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

<template>
  <div>
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="周报审批" left-arrow @click-left="onClickLeft" />
    </div>
    <!--        主体内容-->
    <div class="container linep">
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div style="height: 4px"></div>
      <van-collapse v-model="activeNames">
        <template v-if="!YFQuota">
          <!-- YFQuota:应用服务平台 不显示各项指标 -->
          <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="乳胶漆中高端(千元)">
            <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>
          <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">
            <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.zgwqMonthAct)
                  }}</span>
                </p></van-col
              >
              <van-col span="12"
                ><p>
                  实际:<span class="colorbalck">{{
                    Micrometer(reportTargetAll.zgwqQuarterAct)
                  }}</span>
                </p></van-col
              >
              <van-col span="12"
                ><p>
                  达成率:<span class="colorbalck">{{ reportTargetAll.zgwqMonthSuccessRate }}%</span>
                </p></van-col
              >
              <van-col span="12"
                ><p>
                  达成率:<span class="colorbalck"
                    >{{ reportTargetAll.zgwqQuarterSuccessRate }}%</span
                  >
                </p></van-col
              >
              <van-col span="12"
                ><p>
                  成长率:<span class="colorbalck">{{ reportTargetAll.zgwqMonthGrowRate }}%</span>
                </p></van-col
              >
              <van-col span="12"
                ><p>
                  成长率:<span class="colorbalck">{{ reportTargetAll.zgwqQuarterGrowRate }}%</span>
                </p></van-col
              >
            </van-row>
          </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="12" v-if="powerGrade>=3"><span class="leftTitle">非片区经销商</span></van-col>-->
              <!--            v-if="powerGrade==2"-->
              <van-col span="24"><span class="leftTitle">非片客户开发</span></van-col>
              <!--            <van-col span="12" v-if="powerGrade>=3"><span class="rightTitle" >TOP70直营家装</span></van-col>-->
              <van-col span="24"
                ><p>
                  全年开发数:<span class="colorbalck">{{
                    Micrometer(reportTargetAll.customerAct)
                  }}</span>
                </p></van-col
              >
              <!--            <van-col span="12" v-if="powerGrade>=3"><p>全年目标:<span class="colorbalck">{{reportTargetAll.directCustomerYearTarget}}</span></p></van-col>-->
              <!--            <van-col span="24"><p>实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.customerAct) }}</span></p></van-col>-->
              <!--            <van-col span="12" v-if="powerGrade>=3"><p>实际:<span class="colorbalck">{{reportTargetAll.directCustomerAct}}</span></p></van-col>-->
              <van-col span="24"
                ><p>
                  全年进度率:<span class="colorbalck">{{ reportTargetAll.customerYearRate }}%</span>
                </p></van-col
              >
              <!--            <van-col span="12" v-if="powerGrade>=3"><p>全年进度率:<span class="colorbalck">{{reportTargetAll.directCustomerYearRate}}%</span></p></van-col>-->
            </van-row>
          </van-collapse-item>
        </template>
        <van-collapse-item title="上周工作成果" name="8">
          <div style="margin-top: -10px">
            <div v-for="(item2, index2) in reportContentsList2" :key="index2">
              <div v-if="index2 < 7">
                <p class="texttitle">
                  <span class="opint"></span
                  ><span v-if="!reportTarget.hideWeekDate">{{
                    weeklyTimeDivision(item2.contentTime, 0)
                  }}</span
                  ><span>{{ weeklyTimeDivision(item2.contentTime, 1) }}</span>
                </p>
                <p>
                  <span class="colorbalck">上午:</span
                  >{{ reportContentsList1[index2].weekContentAm }}
                </p>
                <p>
                  <span class="colorbalck">下午:</span
                  >{{ reportContentsList1[index2].weekContentPm }}
                </p>
                <p class="texttitle texttitle2">实际工作进度</p>
                <p><span class="colorbalck">上午:</span>{{ item2.weekContentAm }}</p>
                <p><span class="colorbalck">下午:</span>{{ item2.weekContentPm }}</p>
              </div>
              <p v-if="index2 == 7" class="texttitle"><span class="opint"></span>上周工作重点</p>
              <div v-if="index2 == 7" style="padding: 10px 0" class="contentContainer">
                <van-field
                  v-model="reportContentsList1[index2].weekContentSummary"
                  rows="4"
                  autosize
                  readonly
                  type="textarea" />
              </div>
              <p v-if="index2 == 7" class="texttitle"><span class="opint"></span>上周工作成果</p>
              <div v-if="index2 == 7" style="padding: 10px 0" class="contentContainer">
                <van-field
                  v-model="item2.weekContentSummary"
                  rows="4"
                  autosize
                  readonly
                  type="textarea" />
              </div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="本周工作规划" name="9">
          <div style="margin-top: -10px">
            <div v-for="(item, index) in reportContentsList3" :key="index">
              <p v-if="index < 7" class="texttitle">
                <span class="opint"></span
                ><span v-if="!reportTarget.hideWeekDate">{{
                  weeklyTimeDivision(item.contentTime, 0)
                }}</span
                ><span>{{ weeklyTimeDivision(item.contentTime, 1) }}</span>
              </p>
              <p v-if="index < 7"><span class="colorbalck">上午:</span>{{ item.weekContentAm }}</p>
              <p v-if="index < 7"><span class="colorbalck">下午:</span>{{ item.weekContentPm }}</p>
              <p v-if="index == 7" class="texttitle"><span class="opint"></span>本周工作重点</p>
              <div v-if="index == 7" style="padding: 10px 0" class="contentContainer">
                <van-field
                  v-model="item.weekContentSummary"
                  rows="4"
                  autosize
                  readonly
                  type="textarea" />
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="contentContainer">
        <p class="contentContainerTitle">打分 <span>请点亮小星星，一颗小星星代表1分</span></p>
        <div style="padding: 10px 0">
          <van-rate
            v-model="number"
            :size="25"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee" />
          <span class="rateText">&nbsp;&nbsp;&nbsp;&nbsp;{{ number }}分</span>
        </div>
      </div>
      <div class="contentContainer">
        <p class="contentContainerTitle">评语</p>
        <div style="padding: 10px 0">
          <van-field
            v-model="Content"
            rows="4"
            autosize
            :formatter="formatter"
            maxlength="800"
            show-word-limit
            type="textarea" />
        </div>
      </div>
      <br />
      <br />
      <van-row>
        <van-col span="12">
          <van-button type="info" size="small" plain class="Btn" @click="submit"
            >确认审批</van-button
          >
        </van-col>
        <van-col span="12">
          <van-button type="info" size="small" plain class="BtnBorder" @click="reject"
            >退回重写</van-button
          >
        </van-col>
      </van-row>
    </div>
    <br />
    <br />
  </div>
</template>

<script>
import { updateReport, getDetailById } 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';
export default {
  name: 'weeklyApproval',
  components: {
    createStoreBJ,
    ZYPlaceOrder,
    performanceSAP,
    ZYSAP,
    veryGoodPlaceOrder,
  },
  data() {
    return {
      show: true,
      num: 0,
      form: { rate: 0, message: '' },
      list: [],
      todayGoal: {},
      progressWidth: 0,
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '11',
        '12',
        '16',
        '17',
        '27',
        '28',
        '29',
      ],
      powerGrade: '',
      value: '2',
      Content: '',
      number: '',
      timeList: [],
      reportTargetAll: {},
      reportContentsList1: [],
      reportContentsList2: [],
      reportContentsList3: [],
      updateReport: {},
      reportTarget: {},
      type: '-1',
      JZQuota: false,
      YFQuota: false, //应用服务
    };
  },
  created() {
    this.powerGrade = localStorage.getItem('powerGrade');
    // this.type=localStorage.getItem("storeType")
    this.getDetailById();
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      // this.type=localStorage.getItem("storeType")
      this.timeList = this.parseTimeParagraph();
      if (to.path == '/weeklyApproval') {
        this.getDetailById();
        this.number == 0;
        this.Content = '';
      }
    },
  },
  methods: {
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        ''
      );
    },
    reject() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据提交中...',
        forbidClick: true,
      });
      if (this.Content.trim() == '') {
        this.$toast('评语未填写');
        return false;
      }
      if (this.Content.length > 800) {
        this.$toast('评语内容超过800字');
        return false;
      }
      this.reportTarget.number = this.number;
      this.reportTarget.failContent = this.Content;
      this.reportTarget.failContent = this.reportTarget.failContent;
      this.reportTarget.status = 2;
      updateReport(this.reportTarget).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.$dialog
            .alert({
              title: '系统提示',
              message: '提交成功',
            })
            .then(() => {
              window.location.replace(window.location.origin + '/mobile/dailyApprovalList');
            });
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    submit() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据提交中...',
        forbidClick: true,
      });
      if (this.number == '0') {
        this.$toast('评分未选择');
        return false;
      }
      if (this.Content.trim() == '') {
        this.$toast('评语未填写');
        return false;
      }
      if (this.Content.length > 800) {
        this.$toast('评语未填写');
        return false;
      }
      this.reportTarget.number = this.number;
      this.reportTarget.successContent = this.Content;
      this.reportTarget.successContent = this.reportTarget.successContent;
      this.reportTarget.status = 3;
      updateReport(this.reportTarget).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.$dialog
            .alert({
              title: '系统提示',
              message: '保存成功',
            })
            .then(() => {
              window.location.replace(window.location.origin + '/mobile/dailyApprovalList');
            });
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    getDetailById() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getDetailById({ reportId: this.$route.query.reportId }).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.YFQuota = res.data.postType == 'Y' ? true : false;
          this.JZQuota = false;
          if (res.data.postType == 'JZ') {
            this.JZQuota = true;
          }
          var dayTime = res.data.date;
          this.type = res.data.userType;
          this.timeList = this.parseTimeParagraph(
            dayTime.slice(0, 4) + '-' + dayTime.slice(4, 6) + '-' + dayTime.slice(6, 8)
          );
          if (res.data.status != '1') {
            this.$dialog
              .alert({
                title: '系统提示',
                message: '周报已提交或过期',
              })
              .then(() => {
                window.location.replace(window.location.origin + '/mobile/home');
              });
          } else {
            this.reportTargetAll = res.data.reportTargetAll;
            this.reportTarget = res.data;
            this.reportContents = res.data.reportContents;
            var reportContentsList1 = [];
            var reportContentsList2 = [];
            var reportContentsList3 = [];
            var reportContentsdata = res.data.reportContents;
            for (var i = 0; i < reportContentsdata.length; i++) {
              if (
                reportContentsdata[i].type == '1' &&
                reportContentsdata[i].contentTime.split(' ')[1] != undefined
              ) {
                reportContentsList1.push(reportContentsdata[i]);
              }
              if (
                reportContentsdata[i].type == '2' &&
                reportContentsdata[i].contentTime.split(' ')[1] != undefined
              ) {
                reportContentsList2.push(reportContentsdata[i]);
              }
              if (
                reportContentsdata[i].type == '3' &&
                reportContentsdata[i].contentTime.split(' ')[1] != undefined
              ) {
                reportContentsList3.push(reportContentsdata[i]);
              }
            }
            for (var p = 0; p < reportContentsdata.length; p++) {
              if (
                reportContentsdata[p].type == '2' &&
                reportContentsdata[p].contentTime.split(' ')[1] == undefined
              ) {
                reportContentsList2.push(reportContentsdata[p]);
              }
              if (
                reportContentsdata[p].type == '1' &&
                reportContentsdata[p].contentTime.split(' ')[1] == undefined
              ) {
                reportContentsList1.push(reportContentsdata[p]);
              }
              if (
                reportContentsdata[p].type == '3' &&
                reportContentsdata[p].contentTime.split(' ')[1] == undefined
              ) {
                reportContentsList3.push(reportContentsdata[p]);
              }
            }
            var ln1 = reportContentsList1.length;
            var ln2 = reportContentsList2.length;
            if (reportContentsList1.length > reportContentsList2.length) {
              var len = ln1 - ln2;
              for (var x = 0; x < len; x++) {
                reportContentsList2.push({
                  contentTime: this.timeList[5 + x],
                  weekContentAm: '',
                  weekContentPm: '',
                  weekContentSummary: null,
                });
              }
            }
            if (reportContentsList1.length < reportContentsList2.length) {
              var len2 = ln2 - ln1;
              for (var x = 0; x < len2; x++) {
                reportContentsList1.push({
                  contentTime: '',
                  weekContentAm: '',
                  weekContentPm: '',
                  weekContentSummary: null,
                });
              }
            }
            this.reportContentsList1 = reportContentsList1;
            this.reportContentsList2 = reportContentsList2;
            this.reportContentsList3 = reportContentsList3;
          }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    backFn() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否确认退回重写？',
        })
        .then(() => {
          // on confirm
        });
    },
    approvalFn() {
      if (this.form.message.trim() == '') {
        this.$toast('评语未填写');
        return;
      }
      this.$router.go(-1);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</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 .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;
}
.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>
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}
.van-button--info {
  border: 1px solid #0057ba;
  border-radius: 5px;
}
.linep .van-cell__title {
  color: #1e5398;
  font-weight: 500;
}
.Btn {
  margin: 0 auto 10px;
  display: block;
  width: 90%;
  border-radius: 5px;
  color: #fff !important;
  background-color: #0057ba;
  border: 1px solid #0057ba;
  height: 36px;
}
.BtnBorder {
  margin: 0 auto 10px;
  display: block;
  width: 90%;
  border-radius: 5px;
  border: 1px solid #0057ba;
  color: #0057ba;
  height: 36px;
}
.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>