storevisit-ui-mobile/src/views/week/doubleWeeklyDetils.vue

<template>
  <div>
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="半月报详情" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <!--        主体内容-->
    <div class="container linep">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="建店布机" name="2">
          <createStoreBJ :reportTargetAll="reportTargetAll"></createStoreBJ>
        </van-collapse-item>
        <van-collapse-item name="16" title="专业时时丽分销店下单">
          <ZYPlaceOrder :reportTargetAll="reportTargetAll"></ZYPlaceOrder>
        </van-collapse-item>
        <van-collapse-item title="业绩目标SAP(千元)" name="1" v-if="type != 3 && type != 4">
          <performanceSAP :reportTargetAll="reportTargetAll" :JZQuota="JZQuota"></performanceSAP>
        </van-collapse-item>
        <van-collapse-item name="27" title="内墙中高端SAP(千元)">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col>
            <van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.rjqSapMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.rjqSapQuarterAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.rjqSapMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.rjqSapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.rjqSapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.rjqSapQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <!-- 内外墙平涂SAP -->
        <van-collapse-item name="2" title="内外墙平涂SAP(千元)">
          <neiwaiqiangpingtu :reportTargetAll="reportTargetAll"></neiwaiqiangpingtu>
        </van-collapse-item>
        <van-collapse-item name="11" title="专业时时丽SAP(千元)">
          <ZYSAP :reportTargetAll="reportTargetAll"></ZYSAP>
        </van-collapse-item>
        <van-collapse-item name="28" title="防水+背胶SAP(千元)">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col
            ><van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.fsbjSapMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.fsbjSapQuarterAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.fsbjSapMonthSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.fsbjSapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.fsbjSapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.fsbjSapQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item name="29" title="瓷砖胶SAP(千元)">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col
            ><van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjSapMonthAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.czjSapQuarterAct)
                }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.czjSapMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck"
                  >{{ reportTargetAll.czjSapQuarterSuccessRate }}%</span
                >
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.czjSapMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.czjSapQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item title="魔术漆SAP(千元)" name="3">
          <van-row>
            <van-col span="12"><span class="leftTitle">本月业绩</span></van-col>
            <van-col span="12"><span class="rightTitle">本季业绩</span></van-col>
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.ysqMonthAct) }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.ysqQuarterAct) }}</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.ysqMonthSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                达成率:<span class="colorbalck">{{ reportTargetAll.ysqQuarterSuccessRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.ysqMonthGrowRate }}%</span>
              </p></van-col
            >
            <van-col span="12"
              ><p>
                成长率:<span class="colorbalck">{{ reportTargetAll.ysqQuarterGrowRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <van-collapse-item title="质感外墙SAP(千元)" name="4">
          <zhiganwaiqiangSAP :reportTargetAll="reportTargetAll"></zhiganwaiqiangSAP>
        </van-collapse-item>
        <van-collapse-item name="17" title="超好贴分销店下单">
          <veryGoodPlaceOrder :reportTargetAll="reportTargetAll"></veryGoodPlaceOrder>
        </van-collapse-item>
        <van-collapse-item title="客户开拓" name="6">
          <van-row>
            <van-col span="24"><span class="leftTitle">非片客户开发</span></van-col>
            <van-col span="24"
              ><p>
                全年开发数:<span class="colorbalck">{{
                  Micrometer(reportTargetAll.customerAct)
                }}</span>
              </p></van-col
            >
            <van-col span="24"
              ><p>
                全年进度率:<span class="colorbalck">{{ reportTargetAll.customerYearRate }}%</span>
              </p></van-col
            >
          </van-row>
        </van-collapse-item>
        <div class="contentContainer" v-if="reportTargetAll.isHistory == '0'">
          <!-- isHistory 是否为历史汇报：0-新汇报 1-历史汇报 -->
          <reportCustom
            ref="reportCustom"
            :disabled="true"
            :reportCustomData="reportTargetAll.customTaskList"></reportCustom>
        </div>
        <template v-else>
          <van-collapse-item title="上期工作成果" name="7">
            <div style="margin-top: -10px">
              <div v-for="(item, index) in reportContentsList2" :key="index">
                <p class="texttitle texttitle2">计划工作进度</p>
                <div style="padding: 10px 0; min-height: 32px" class="contentContainer">
                  <van-field
                    v-model="reportContentsList1[index].doubleWeekContent"
                    rows="4"
                    autosize
                    readonly
                    type="textarea" />
                </div>
                <p class="texttitle texttitle2">实际工作进度</p>
                <div style="padding: 10px 0; min-height: 32px" class="contentContainer">
                  <van-field
                    v-model="item.doubleWeekContent"
                    rows="4"
                    autosize
                    readonly
                    type="textarea" />
                </div>
              </div>
            </div>
          </van-collapse-item>
          <van-collapse-item title="本期工作规划" name="8">
            <div style="margin-top: -10px">
              <div v-for="(item2, index2) in reportContentsList3" :key="index2">
                <div style="padding: 10px 0; min-height: 32px" class="contentContainer">
                  <van-field
                    v-model="item2.doubleWeekContent"
                    rows="4"
                    autosize
                    readonly
                    type="textarea" />
                </div>
              </div>
            </div>
          </van-collapse-item>
        </template>
        <div
          class="contentContainer"
          v-if="reportTarget.status > 1 || reportTarget.reportRemarks != null">
          <p class="texttitle texttitledaily">
            <span class="opint"></span>
            <span v-if="reportTarget.status == 1">待审批</span>
            <span v-if="reportTarget.status == 3">审批完成</span>
            <span v-if="reportTarget.status == 2">退回重写</span>
            <span v-if="reportTarget.status == -1">过期未汇报</span>
            <span v-if="reportTarget.status > 1"><{{ ptitle }}审批></span>
          </p>
          <div style="padding: 10px 0" v-if="reportTarget.status > 1">
            <van-rate
              v-model="reportTarget.number"
              :size="25"
              readonly
              color="#ffd21e"
              void-icon="star"
              void-color="#eee" /><span class="rateText"
              >&nbsp;&nbsp;&nbsp;&nbsp;{{ reportTarget.number }}分</span
            >
          </div>
          <div style="padding: 10px 0" v-if="reportTarget.status > 1">
            <van-field v-model="successContent" rows="4" autosize readonly type="textarea" />
          </div>
        </div>
        <div class="contentContainer" v-if="reportTarget.reportRemarks != null">
          <div>
            <div v-for="(item, index) in reportTarget.reportRemarks" :key="index">
              <p class="contentContainerTitle">
                <template v-if="item.deptName">{{ item.deptName }}-</template>{{ item.postName }}-{{
                  item.nickName
                }}的点评
              </p>
              <div style="padding: 10px 0">
                <van-field
                  v-model="item.remarkContent"
                  rows="4"
                  autosize
                  readonly
                  type="textarea" />
              </div>
              <!-- <p style="text-align: right">点评时间：{{ item.createTime }}</p> -->
            </div>
          </div>
        </div>
      </van-collapse>
    </div>
    <br />
    <div class="contentborder" v-if="reportTarget.status == 2">
      <van-button type="info" size="small" plain class="Btn1" @click="submint">重新填写</van-button>
    </div>
    <br />
  </div>
</template>

<script>
import history from '@/assets/Icon/history.png';
import { userTodayPlanNum, loginLog, homeImge, getDetailById, double_week_type } from '@/api/index';
import createStoreBJ from '@/views/componentsTarget/createStoreBJ';
import ZYPlaceOrder from '@/views/componentsTarget/ZYPlaceOrder';
import performanceSAP from '@/views/componentsTarget/performanceSAP';
import ZYSAP from '@/views/componentsTarget/ZYSAP';
import veryGoodPlaceOrder from '@/views/componentsTarget/veryGoodPlaceOrder';
import neiwaiqiangpingtu from '@/views/componentsTarget/neiwaiqiangpingtu';
import zhiganwaiqiangSAP from '@/views/componentsTarget/zhiganwaiqiangSAP';
import reportCustom from './reportCustom';

export default {
  name: 'home',
  components: {
    createStoreBJ,
    ZYPlaceOrder,
    performanceSAP,
    ZYSAP,
    veryGoodPlaceOrder,
    neiwaiqiangpingtu,
    zhiganwaiqiangSAP,
    reportCustom,
  },
  data() {
    return {
      show: true,
      num: 0,
      title: '',
      deptName: '',
      pnickName: '',
      pdeptName: '',
      todayGoal: {},
      progressWidth: 0,
      history: history,
      imgArr: [],
      message: '89989880989890080989',
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '11',
        '12',
        '16',
        '17',
        '27',
        '28',
        '29',
      ],
      powerGrade: '',
      value: '2',
      reportTargetAll: {},
      reportTarget: {},
      reportContentsList1: [],
      reportContentsList2: [],
      reportContentsList3: [],
      weekType: [],
      successContent: '',
      type: '-1',
      ptitle: '',
      JZQuota: false,
      //
    };
  },
  created() {
    this.powerGrade = localStorage.getItem('powerGrade');
    this.getDetailById();
    double_week_type().then((res) => {
      this.weekType = res.data;
    });
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      // this.getReportInfo()
      if (to.path == '/doubleWeeklyDetils') {
        this.getDetailById();
      }
      // &&from.path=="/myHistoricalDaily"
      //   if(to.path=="/weeklyApprovalDetils"&&from.path=="/dailyApprovalList"){
      //     this.getDetailById()
      //   }
    },
  },
  // activated() {
  //   this.num = 0;
  //   this.homeImgeFn()
  //   this.userTodayPlanNum()
  //   this.loginLogFn()
  // },
  methods: {
    submint() {
      this.$router.push({
        path: '/doubleWeekly',
        query: { reportId: this.$route.query.reportId, temporaryShow: 'N' },
      });
    },
    getDetailById() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getDetailById({ reportId: this.$route.query.reportId }).then((res) => {
        this.JZQuota = false;
        if (res.data.postType == 'JZ') {
          this.JZQuota = true;
        }
        loading1.clear();
        this.title = res.data.deptName + '  ' + res.data.nickName;
        this.reportTargetAll = res.data.reportTargetAll;
        this.reportTarget = res.data;
        this.type = res.data.userType;
        this.reportContents = res.data.reportContents;
        this.ptitle = res.data.pdeptName + '-' + res.data.ppostName + '-' + res.data.pnickName;
        var reportContentsList1 = [];
        var reportContentsList2 = [];
        var reportContentsList3 = [];
        var reportContentsdata = res.data.reportContents;
        if (res.data.status == 3) {
          this.successContent = res.data.successContent;
        } else {
          this.successContent = res.data.failContent;
        }
        for (var i = 0; i < res.data.reportContents.length; i++) {
          if (res.data.reportContents[i].type == '1') {
            reportContentsList1.push(reportContentsdata[i]);
          }
          if (res.data.reportContents[i].type == '2') {
            reportContentsList2.push(reportContentsdata[i]);
          }
          if (res.data.reportContents[i].type == '3') {
            reportContentsList3.push(reportContentsdata[i]);
          }
        }
        var ln1 = reportContentsList1.length;
        var ln2 = reportContentsList2.length;
        if (reportContentsList1.length < reportContentsList2.length) {
          var len2 = ln2 - ln1;
          for (var x = 0; x < len2; x++) {
            reportContentsList1.push({
              doubleWeekContent: '',
            });
          }
        }
        this.reportContentsList1 = reportContentsList1;
        this.reportContentsList2 = reportContentsList2;
        this.reportContentsList3 = reportContentsList3;
      });
    },
    login() {
      if (this.num > 4) {
        this.$router.push('/login');
      } else {
        this.num = this.num + 1;
      }
    },
    homeImgeFn() {
      homeImge({}).then((res) => {
        var imgArr = res.msg;
        var imgReg = /<img.*?(?:>|\/>)/gi;
        var arr = imgArr.match(imgReg); // arr 为包含所有img标签的数组
        this.imgArr = arr;
      });
    },
    userTodayPlanNum() {
      userTodayPlanNum().then((res) => {
        if (res.code == 200) {
          this.todayGoal = res.data;
          this.progressWidth = (this.todayGoal.finishNum / this.todayGoal.planNum) * 100 + '%';
          localStorage.setItem('nickName', res.data.user.nickName);
          localStorage.setItem('storeType', res.data.user.type);
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    loginLogFn() {
      // var ua="Mozilla/5.0 (Linux; Android 10; HRY-AL00Ta Build/HONORHRY-AL00Ta; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.120 MQQBrowser/6.2 TBS/045737 Mobile Safari/537.36 wxwork/4.0.2 ColorScheme/Light MicroMessenger/7.0.1 NetType/WIFI Language/zh Lang/zh".toLowerCase();
      // console.log(ua)
      // var ua= window.navigator.userAgent.toLowerCase();
      // //  .toLowerCase();
      // if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
      //
      // }else{
      //  this.$router.push("/err")
      // }
      var appVersion = navigator.appVersion;
      var Logapp = appVersion.split('(')[1].split(';');
      var arrLog = '';
      if (Logapp[0] == 'Linux') {
        arrLog = {
          browser: navigator.appCodeName,
          os: Logapp[1],
          phoneBrand: Logapp[2].split('/')[1],
          phoneModel: Logapp[2].split('/')[0],
        };
      } else {
        arrLog = {
          browser: navigator.appCodeName,
          os: Logapp[0],
          phoneBrand: '',
          phoneModel: '',
        };
      }
      loginLog(arrLog).then((res) => {
        if (res.code == 200) {
          console.log('设备记录成功');
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    configFn() {
      this.show = false;
    },
  },
};
</script>
<style scoped>
.container {
  margin: 10px;
}
.container .van-collapse-item {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}
.linep p {
  margin: 14px 0 0 0;
  font-size: 14px;
  color: #666;
  padding-left: 6px;
}
.linep .texttitle {
  color: #0057ba;
  position: relative;
  padding-left: 10px;
  margin-top: 16px;
}
.linep .texttitledaily {
  color: #000;
  position: relative;
  padding-left: 10px;
}
.linep .texttitle2 {
  padding-left: 6px;
}
.linep .texttitle .opint {
  position: absolute;
  left: 0px;
  top: 6px;
  margin-right: 6px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #0057ba;
}
.linep .texttitledaily .opint {
  position: absolute;
  left: 0px;
  top: 6px;
  margin-right: 6px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #0057ba;
}
.leftTitle {
  background-color: #a6c9f1;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}
.rightTitle {
  background-color: #ffb5bb;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}
</style>
<style>
.linep .van-cell__title {
  color: #1e5398;
  font-weight: 500;
}
.linep .contentContainer {
  background-color: white;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 10px;
}
.linep .contentContainer .contentContainerTitle {
  color: #222;
  margin-top: 10px;
}
.linep .contentContainer .contentContainerTitle span {
  font-size: 12px;
  color: #333;
}
.linep .contentContainer .van-field__control {
  background-color: #ebf4ff;
  padding: 10px;
  border-radius: 8px;
}
.linep .contentContainer .van-cell {
  padding: 0;
}
</style>