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

<template>
  <div v-if="info" class="VisitSummaryDetail">
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar
        class="navBar"
        :title="info.summaryTaskName"
        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="lineGrey" style="height: 6px"></div>
    <!--        主体内容-->
    <div
      class="container linep"
      style="
        background-color: #fff;
        width: 94%;
        margin: 0px auto;
        border-radius: 6px;
        padding: 10px;
      ">
      <div style="padding: 4px 0">
        <van-icon :name="ry" size="16" style="float: left" />
        <span style="font-size: 13px; margin-left: 8px"
          >&nbsp;{{ info.nickName }} - {{ info.postName }}</span
        >
      </div>
      <div style="padding: 4px 0">
        <van-icon :name="zw" size="16" style="float: left" />
        <span style="font-size: 13px; margin-left: 8px">&nbsp;所属部门：{{ info.deptName }}</span>
      </div>
      <div style="padding: 4px 0">
        <van-icon :name="tm" size="16" style="float: left" />
        <span style="font-size: 13px; margin-left: 8px">&nbsp;提交时间：{{ info.createTime }}</span>
      </div>
    </div>
    <div class="lineGrey"></div>
    <div class="container linep" style="width: 94%; margin: 0px auto; border-radius: 6px">
      <!-- 退回待提交 summaryUpdate：Boolean类型，true-允许编辑，false-不允许编辑 -->
      <template v-if="info.approvalStatus == '3' && info.summaryUpdate">
        <componVisitSummary
          :collectionItemLists="collectionItemLists"
          :approvalStatus="info.approvalStatus"
          ref="componVisitSummary">
          <!-- 活动扫码 -->
          <ActivityQRCode
            v-if="info.qrCodeCheck == '1'"
            ref="ActivityQRCode"
            :ActivityQRCodeData="ActivityQRCodeData"
            :approvalStatus="info.approvalStatus"
            :userSummaryId="$route.query.userSummaryId"
            :qrUuid="qrUuid"></ActivityQRCode>
        </componVisitSummary>
      </template>
      <!-- 补填、详情 -->
      <template v-else>
        <allowWriteAgainSummary
          :collectionItemLists="collectionItemLists"
          :approvalStatus="info.approvalStatus"
          ref="allowWriteAgainSummary">
          <!-- 活动扫码 -->
          <ActivityQRCode
            v-if="info.qrCodeCheck == '1'"
            ref="ActivityQRCode"
            :ActivityQRCodeData="ActivityQRCodeData"
            :approvalStatus="info.approvalStatus"
            :userSummaryId="$route.query.userSummaryId"
            :qrUuid="qrUuid"></ActivityQRCode>
        </allowWriteAgainSummary>
      </template>
    </div>
    <div
      class="newCarList"
      v-for="(item, index) in info.summaryApprovals"
      :key="index"
      v-if="info.summaryApprovals">
      <div class="newlist">
        <div class="info">审批人：{{ item.handleUserName }}</div>
        <div class="info">审批结果：{{ setApprovalStatus(item.approvalStatus) }}</div>
        <div class="info">审批时间：{{ item.handleTime }}</div>
        <div class="info">审批意见：{{ item.approvalOpinion }}</div>
      </div>
    </div>
    <br />
    <!-- 从查询列表来 -->
    <!-- approvalStatus//1-待审批 2-审批通过 3-拒绝待提交 -->
    <div
      class="tc"
      style="padding: 0 16px"
      v-if="writeAgain && (!info.approvalStatus || info.approvalStatus == '1')">
      <van-button class="submitBtn" block type="info" color="#0057ba" @click="onSubmit">
        补填保存
      </van-button>
    </div>
    <div class="tc" style="padding: 0 16px" v-if="info.approvalStatus == '3' && info.summaryUpdate">
      <van-button class="submitBtn" block type="info" color="#0057ba" @click="submitApproval">
        提交审批
      </van-button>
    </div>
    <br />
    <br />
    <br />
  </div>
</template>

<script>
import history from '@/assets/Icon/history.png';
import tm from '@/assets/Icon/tm.png';
import zw from '@/assets/Icon/zw.png';
import ry from '@/assets/Icon/ry.png';
import { getSummaryMobilo, insertCustomAnswer } from '@/api/index';
import { ImagePreview } from 'vant';
import deleteUploadImg from '@/components/deleteUploadImg';
import componVisitSummary from '@/views/week/componVisitSummary';
import allowWriteAgainSummary from '@/views/week/allowWriteAgainSummary';
import { writeAgainCustomAnswer } from '@/api/week';
import { changeApproval } from '@/api/SUPTaskApproval.js';
import ActivityQRCode from './ActivityQRCode';
export default {
  name: 'daily',
  components: { deleteUploadImg, componVisitSummary, allowWriteAgainSummary, ActivityQRCode },
  data() {
    return {
      info: null,
      zw: zw,
      tm: tm,
      ry: ry,
      show: true,
      num: 0,
      todayGoal: {},
      progressWidth: 0,
      history: history,
      imgArr: [],
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '10', '16', '17'],
      value: '2',
      message: '',
      powerGrade: '',
      Content: '',
      Content2: '',
      reportTargetAll: {},
      reportContents: [{ dayContent: '' }],
      reportTarget: {},
      successContent: '',
      imgList: [],
      type: '-1',
      collectionItemLists: [],
      writeAgain: false,
      approvalMessage: '',
      source: '',
      ActivityQRCodeData: {},
      qrUuid: null,
      //
    };
  },
  activated() {
    this.ActivityQRCodeData = {};
    this.source = this.$route.query.source || '';
    this.powerGrade = localStorage.getItem('powerGrade');
    this.getDetailById();
    this.num = 0;
    this.userTodayPlanNum();
  },
  methods: {
    setApprovalStatus(status) {
      if (status == '1') {
        return '通过';
      } else if (status == '2') {
        return '拒绝';
      }
    },
    pviewFn(val, imgVal) {
      var imgList = [];
      var photos = this.reportTarget.photos[val].photos;
      for (let i = 0; i < photos.length; i++) {
        imgList.push(photos[i].fileUrl);
      }
      ImagePreview({ images: imgList, startPosition: imgVal });
    },
    submint() {
      this.$router.push({
        path: '/daily',
        query: { reportId: this.$route.query.reportId, temporaryShow: 'N' },
      });
    },
    getDetailById() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getSummaryMobilo({ userSummaryId: this.$route.query.userSummaryId }).then((res) => {
        loading1.clear();
        this.ActivityQRCodeData = {
          summaryEventName: res.data.summaryEventName || '',
          summaryEventDate: res.data.summaryEventDate || '',
          qrStartTime: res.data.qrStartTime || '',
          qrEndTime: res.data.qrEndTime || '',
        };
        this.qrUuid = res.data.qrUuid;
        this.reportTargetAll = res.data.reportTargetAll;
        this.info = res.data;
        this.type = res.data.userType;
        if (res.data.status == 3) {
          this.successContent = res.data.successContent;
        } else {
          this.successContent = res.data.failContent;
        }
        if (res.data.reportContents && res.data.reportContents.length > 0) {
          this.Content = res.data.reportContents[0].dayContent;
          if (res.data.reportContents.length > 1) {
            this.Content2 = res.data.reportContents[1].dayContent;
          } else {
            this.Content2 = '';
          }
        } else {
          this.Content = '';
          this.Content2 = '';
        }
        this.reportContents = res.data.reportContents;
        var imgList = [];
        if (res.data.photos != null) {
          for (var k = 0; k < res.data.photos.length; k++) {
            imgList.push(res.data.photos[k].fileUrl + '');
          }
        }
        this.imgList = imgList;
        this.writeAgain = res.data.customItemList.some((item) => {
          return item.allowWriteAgain;
        });

        this.collectionItemLists = res.data.customItemList;
      });
    },
    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);
    },
    onSubmit() {
      let collectionAnswerlisd = this.$refs.allowWriteAgainSummary.collectionAnswerlisd;
      let collectionItemList = this.$refs.allowWriteAgainSummary.collectionItemList;
      for (var c = 0; c < collectionAnswerlisd.length; c++) {
        for (var b = 0; b < collectionItemList.length; b++) {
          if (collectionAnswerlisd[c].id == collectionItemList[b].customId) {
            collectionItemList[b].customOptionList = collectionAnswerlisd[c].value;
          }
        }
      }
      // 获取所有可以补填的题
      let customItemList = collectionItemList.filter((item) => item.allowWriteAgain);
      console.log(customItemList);
      // // 照片
      let zpDataList = customItemList.find((item) => item.answerType == 'zp');
      if (zpDataList) {
        let fileIdList = [];
        zpDataList.fileInfoList.forEach((item) => {
          fileIdList.push(item.id);
        });
        zpDataList.fileIdList = fileIdList;
      }
      writeAgainCustomAnswer({
        userSummaryId: this.$route.query.userSummaryId,
        customItemList: customItemList,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$toast('操作成功！');
            this.$router.replace({
              path: this.source,
            });
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast(err.msg);
        });
    },
    submitApproval() {
      if (this.info.qrCodeCheck == '1') {
        // 执行 ActivityQRCode from表单验证触发
        this.$refs.ActivityQRCode.$refs.tabstoreVal
          .validate()
          .then(() => {
            // 验证通过
            let ActivityQRCodeData = this.$refs.ActivityQRCode.activityForm || {};
            this.submitApprovalFun(ActivityQRCodeData);
          })
          .catch((errors) => {
            //验证失败
            window.scrollTo(0, 0);
            return;
          });
      } else {
        this.submitApprovalFun();
      }
    },
    submitApprovalFun(ActivityQRCodeData = {}) {
      let collectionAnswerlisd = this.$refs.componVisitSummary.collectionAnswerlisd;
      let collectionItemList = this.$refs.componVisitSummary.collectionItemList;
      for (var c = 0; c < collectionAnswerlisd.length; c++) {
        for (var b = 0; b < collectionItemList.length; b++) {
          if (collectionAnswerlisd[c].id == collectionItemList[b].customId) {
            collectionItemList[b].customOptionList = collectionAnswerlisd[c].value;
          }
        }
      }
      // // 照片
      let zpDataList = collectionItemList.find((item) => item.answerType == 'zp');
      if (zpDataList) {
        let fileIdList = [];
        zpDataList.fileInfoList.forEach((item) => {
          fileIdList.push(item.id);
        });
        zpDataList.fileIdList = fileIdList;
      }
      insertCustomAnswer({
        userSummaryId: this.info.userSummaryId, //	Long	用户总结id，如果为新增则不填，编辑则必填
        summaryId: this.info.summaryId, //Long	主管任务id
        customItemList: collectionItemList,
        ...ActivityQRCodeData,
        qrUuid: this.qrUuid,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$toast('操作成功！');
            this.$router.replace({
              path: this.source,
            });
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast(err.msg);
        });
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  // background-color: white;
}

.van-f-red {
  color: red;
  width: 8px;
  display: inline-block;
  line-height: 26px;
}

.formLabel {
  margin: 0 16px;
  border-bottom: 1px solid #f1f1f1;
}

.formLabel .van-cell {
  padding: 10px 0;
}

.formLabel .van-cell::after {
  border: 0;
}

.formLabel .van-field {
  border: 1px solid #f1f1f1;
  padding: 6px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.formLabel .van-field__control {
  padding: 0 10px;
}

.formLabel .formLabeltitle {
  position: absolute;
  top: 8px;
}

.z-checkbox .van-radio {
  padding: 6px 0;
}
.z-celly .van-cell__title {
  font-weight: initial;
  font-size: 14px;
}
.bottomBtn {
  position: fixed;
  bottom: 0;
  z-index: 10;
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .van-button {
    /* flex: 1; */
    width: 40%;
  }
}
.approvalRemarh {
  width: 94%;
  margin: 0px auto;
  border-radius: 6px;
  margin-bottom: 40px;
  .approvalLabel {
    font-size: 14px;
    padding: 5px 0;
  }
}
</style>
<style lang="scss">
.table-headermd {
  font-size: 1.2rem;
  text-align: center;
  position: initial;
  width: 94% !important;
  margin: 0 auto;
  border-right: 0;
}

.table-headermd .el-table__header,
.table-headermd .el-table__body {
  width: 100% !important;
}

.table-headermd col {
  width: 5.8rem;
}

.table-headermd col:nth-child(2),
.table-headermd col:nth-child(4),
.table-headermd col:nth-child(3) {
  width: 5rem;
}

.table-headermd .van-cell {
  padding: 0 4px;
  height: 100%;
}

.table-headermd th.el-table__cell > .cell {
  padding: 0 4px;
}

.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}

.table-headermd .el-table__cell {
  padding: 4px 0;
}

.table-headermd .tipTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.table-headermd::before {
  height: 0;
}

.f-right {
  text-align: right;
  margin: 0;
}

.mg0 {
  margin: 6px 10px;
  color: #909090;
  font-size: 14px;
}

.selesetText {
  margin-bottom: 16px;
}

.z-cells .van-cell__title {
  font-weight: bold;
  color: #4a4a4a;
}

.z-cells .van-cell {
  padding-bottom: 0;
}

.VisitSummaryDetail {
  .newCarList {
    width: 94%;
    padding: 14px;
    margin: 0px auto;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    margin-top: 10px;
  }
  .newCarList .van-cell {
    border-radius: 6px;
    overflow: hidden;
  }
  .newCarList .newlist .title {
    /* line-height: 32px; */
  }
  .newCarList .van-cell__right-icon {
    top: 5px;
  }
  .newCarList .newlist {
    box-sizing: border-box;
  }
  .newCarList .newlist .title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 5px 0;
    /* line-height: 14px; */
  }
  .newCarList .newlist .info {
    font-size: 14px;
    color: #999;
    line-height: 26px;
  }
  .newCarList .newlist .title p {
    padding: 0;
    margin: 0;
  }
  .newCarList .newlist .title .textLeft {
    display: inline-block;
    /* padding-bottom: 10px; */
  }
  .newCarList .newlist .title .textRight {
    float: right;
    color: #0057ba;
  }

  .linep .van-cell__title {
    color: #646566;
    font-weight: 500;
    font-size: 14px;
  }
}
</style>