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

<template>
  <div class="dailyApproval">
    <!--        顶部条-->
    <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 style="height: 4px"></div>
    <!--        主体内容-->
    <div class="container linep" v-if="reportTargetAll">
      <template v-if="postName == '质感销售负责人' || postName == '质感销售专员'">
        <target :homePageIndicatorDate="homePageIndicatorList"></target>
      </template>
      <template v-else>
        <van-collapse v-model="activeNames" style="margin-top: -3px">
          <template v-if="!YFQuota">
            <!-- YFQuota:应用服务平台 不显示各项指标 -->
            <Atarget :reportInfo="reportTarget"></Atarget>
            <Btarget :reportInfo="reportTarget"></Btarget>
          </template>
        </van-collapse>
      </template>
      <div class="contentContainer">
        <!-- isHistory 是否为历史汇报：0-新汇报 1-历史汇报 -->
        <reportCustom
          ref="reportCustom"
          v-if="reportTarget.isHistory == '0'"
          :disabled="true"
          :reportCustomData="reportTarget.customTaskList"></reportCustom>
        <template v-else>
          <div v-if="GZQuota">
            <p class="contentContainerTitle">今日项目跟进数</p>
            <div style="padding: 10px 0">
              <van-field readonly v-model="projectFollowNum" type="digit" />
            </div>
            <p class="contentContainerTitle">今日TUC成功报备数量</p>
            <div style="padding: 10px 0">
              <van-field readonly v-model="tucReportingSuccessNum" type="digit" />
            </div>
          </div>
          <!-- 今日未拜访原因 如果不为空则展示，为空则不展示 -->
          <div v-if="reportTarget.notVisitReason && reportTarget.notVisitReason != ''">
            <p class="contentContainerTitle">截至日报提交时间，今日拜访0家店的原因</p>
            <div style="padding: 10px 0">
              <van-field
                readonly
                v-model="reportTarget.notVisitReason"
                rows="4"
                autosize
                type="textarea" />
            </div>
          </div>
          <p class="contentContainerTitle">今日机会与挑战总结</p>
          <div style="padding: 10px 0">
            <van-field v-model="Contents" rows="4" autosize readonly type="textarea" />
          </div>
          <p class="contentContainerTitle">明日工作规划</p>
          <div style="padding: 10px 0">
            <van-field v-model="Content2" rows="4" autosize readonly type="textarea" />
          </div>
        </template>
      </div>
      <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
            maxlength="800"
            show-word-limit
            :formatter="formatter"
            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 history from '@/assets/Icon/history.png';
import { ImagePreview } from 'vant';
import {
  userTodayPlanNum,
  updateReport,
  getDetailById,
  getReportInfo,
  buryingPoint,
} from '@/api/index';
import visitedRealTime from '@/views/componentsTarget/visitedRealTime';
import createStoreBJ from '@/views/componentsTarget/createStoreBJ';
import placeOrder from '@/views/componentsTarget/placeOrder';
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 reportCustom from './reportCustom';
import target from './target.vue';
import Atarget from '@/views/home/Atarget.vue';
import Btarget from '@/views/home/Btarget.vue';
export default {
  name: 'daily',
  components: {
    visitedRealTime,
    createStoreBJ,
    placeOrder,
    ZYPlaceOrder,
    performanceSAP,
    ZYSAP,
    veryGoodPlaceOrder,
    reportCustom,
    target,
    Atarget,
    Btarget,
  },
  data() {
    return {
      show: true,
      num: 0,
      todayGoal: {},
      progressWidth: 0,
      downloadShow: false,
      history: history,
      imgArr: [],
      imgList: [],
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '10',
        '16',
        '17',
        '20',
        '21',
        '22',
        '23',
        '11',
        '29',
        '33',
        '40',
        '41',
        '42',
        '43',
      ],
      Content: '',
      Content2: '',
      number: 0,
      powerGrade: '',
      reportTargetAll: null,
      saptitle: '业绩目标SAP(千元)',
      failContent: '',
      successContent: '',
      reportContents: [{ dayContent: '' }],
      projectFollowNum: '',
      tucReportingSuccessNum: '',
      reportTarget: {},
      Contents: '',
      type: '-1',
      JZQuota: false,
      GZQuota: false,
      YFQuota: false,
      titlejz: '',
      visitIMG1Flag: false,
      postName: '',
      homePageIndicatorList: null,
      //
    };
  },
  created() {
    this.powerGrade = localStorage.getItem('powerGrade');
    this.getDetailById();
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      if (to.path == '/dailyApproval') {
        this.getDetailById();
        this.number == 0;
        this.Content = '';
      }
    },
  },
  methods: {
    setVisitIMG1Flag(item) {
      this.$set(item, 'visitIMG1Flag', !item.visitIMG1Flag);
      this.$forceUpdate();
    },
    buryingPoint(val) {
      buryingPoint(val);
    },
    pviewFn(index) {
      var imgList = [];
      var photos = this.reportTarget.photoSummary;
      for (let i = 0; i < photos.length; i++) {
        imgList.push(photos[i].fileUrl);
      }
      ImagePreview({ images: imgList, startPosition: index });
      this.buryingPoint({
        systemModel: '日报审核',
        buryingPointType: 2,
        buryingPointValue: datai.taskName,
        buryingPointName: '拜访照片',
        buryingPointPosition: '日报照片',
      });
    },
    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;
      }
      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('评语内容超过800字');
        return false;
      }
      this.reportTarget.number = this.number;
      this.reportTarget.successContent = this.Content;
      this.reportTarget.status = 3;
      this.reportTarget.successContent = this.reportTarget.successContent;
      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) => {
        this.postName = res.data.postName;
        if (res.data.postName == '质感销售负责人' || res.data.postName == '质感销售专员') {
          this.homePageIndicatorList = res.data.homePageIndicatorList;
        } else {
          this.homePageIndicatorList = null;
        }
        this.GZQuota = false;
        this.JZQuota = false;
        this.YFQuota = res.data.postType == 'YF' ? true : false;
        if (res.data.postType == 'JZ') {
          this.JZQuota = true;
        } else if (res.data.postType == 'GZ') {
          this.GZQuota = true;
          this.saptitle = '公裝业绩SAP(千元)';
        } else {
          this.saptitle = '业绩目标SAP(千元)';
        }
        loading1.clear();
        if (res.code == 200) {
          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;
            this.type = res.data.userType;
            if (res.data.reportContents.length > 0) {
              this.Contents = res.data.reportContents[0].dayContent;
              if (res.data.reportContents.length > 1) {
                this.Content2 = res.data.reportContents[1].dayContent;
              } else {
                this.Content2 = '';
              }
              if (res.data.reportContents.length > 2) {
                this.projectFollowNum = res.data.reportContents[2].projectFollowNum;
                this.tucReportingSuccessNum = res.data.reportContents[3].tucReportingSuccessNum;
              }
            } else {
              this.Contents = '';
              this.Content2 = '';
            }
          }
          var imgList = [];
          if (res.data.photoSummary != null) {
            for (var k = 0; k < res.data.photoSummary.length; k++) {
              imgList.push(res.data.photoSummary[k].fileUrl + '');
            }
          }
          this.imgList = imgList;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    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);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  margin: 10px;
}

.container .van-collapse-item {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.linep p {
  margin: 10px 0 0 0;
  font-size: 14px;
  color: #666;
}

.linep .texttitle {
  color: #0057ba;
  position: relative;
  padding-left: 10px;
}

.linep .texttitle2 {
  padding-left: 0;
}

.linep .texttitle .opint {
  position: absolute;
  left: 0px;
  top: 6px;
  margin-right: 6px;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background-color: #004d8c;
}

.leftTitle {
  background-color: #74a4d9;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}

.rightTitle {
  background-color: #e7b4bb;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}
</style>
<style lang="scss">
.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;
}

.linep .contentContainer .contentContainerTitle span {
  font-size: 12px;
  color: #666;
}

.linep .contentContainer .van-field__control {
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 8px;
}

.linep .contentContainer .van-cell {
  padding: 0;
}

.colorbalck {
  color: #333;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}
.visitIMG img {
  display: block;
  width: 100%;
  height: 148px;
  border-radius: 6px;
}
.visitIMG1 img {
  display: block;
  width: 100%;
  height: 75px;
  border-radius: 6px;
}

.table-headermd {
  font-size: 12px;
  text-align: center;
  position: initial;
  width: 98% !important;
  margin: 0 auto;
  border-right: 0;
  border-radius: 10px;
  .el-table__cell {
    padding: 6px 0 !important;
  }
}
.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}
</style>