storevisit-ui-mobile/src/views/signApproval/signApproval.vue

<template>
  <div class="signApproval">
    <div class="navBarTOP">
      <!--        顶部条-->
      <van-nav-bar class="navBar" title="审批详情" left-arrow @click-left="onClickLeft">
        <template #right>
          <span style="color: #0057ba" v-if="edit && userShow" @click="onSubmit">编辑</span>
          <!--          v-if="list.updatable"-->
        </template>
      </van-nav-bar>
    </div>
    <!--        主体内容-->
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div
      class="container"
      style="width: 94%; margin: 0 auto; border-radius: 6px; padding-bottom: 12px">
      <div class="card mt10">
        <div class="title">
          {{ list.storeName }}(<span style="color: #1989fa">{{ list.storeCode }}</span
          >)
        </div>
        <div class="subtitle">地址：{{ list.addressLine }}</div>
        <div class="subtitle">拜访人：{{ list.nickName }}</div>
        <div class="subtitle">拜访日期：{{ list.startTime }}~{{ list.stopTime }}</div>
        <!-- 分销店 -->
        <template
          v-if="
            verifyStoreType(list.storeCategory) && verifyStoreType(list.storeCategory).type == 'fxd'
          ">
          <div class="subtitle" style="display: flex">
            <div class="label" style="width: 75px">经销商：</div>
            <div class="valuue TCFXList">
              <div
                class="sfaStoreChainsContactList"
                v-for="(item, index) in list.sfaStoreChainsContactList"
                :key="index">
                {{ item.categoryDescribe }}
                {{ item.chainCode }}
                {{ item.chainName }}
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="subtitle">经销商：{{ list.chainName }}</div>
        </template>
      </div>

      <div class="card appreval">
        <div style="padding: 0 10px 10px; font-size: 16px; font-weight: bold">任务</div>
        <van-collapse v-model="activeNames" v-if="list.sfaTaskList">
          <van-collapse-item
            v-for="(item1, index1) in list.sfaTaskList"
            :name="index1"
            :title="item1.taskName">
            <div class="deviceCode" v-if="item1.deviceCode && item1.putInCode">
              <div class="vertical"></div>
              <p class="mg0">
                <span>设备编号：{{ item1.deviceCode }}</span>
              </p>
              <p class="mg0">
                <span>投放编号：{{ item1.putInCode }}</span>
              </p>
            </div>
            <div
              class="container containert"
              style="width: 100%; margin: 0 auto; padding: 10px 0"
              v-if="item1.taskType == 2">
              <!--              <p v-if="checkShow" style="    padding: 0 10px; font-size: 14px;">全部不经营</p>-->
              <el-table
                :data="item1.collectionItemList"
                border
                style="width: 100%"
                class="table-headermd">
                <el-table-column prop="collectionName" label="产品名称" width="180">
                  <template slot-scope="scope">
                    <span class="tipTitle" @click="tipTitle(scope.row.collectionName)">{{
                      scope.row.collectionName
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="name" width="180">
                  <template slot="header">
                    <span>进货原价</span>
                  </template>
                  <template slot-scope="scope">
                    <p class="f-right">{{ scope.row.collectionOptionList[0].answerValue }}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="address">
                  <template slot="header">
                    <span>促后净价</span>
                  </template>
                  <template slot-scope="scope">
                    <p class="f-right">{{ scope.row.collectionOptionList[1].answerValue }}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="address">
                  <template slot="header">
                    <span>油工拿货价</span>
                  </template>
                  <template slot-scope="scope">
                    <p class="f-right">{{ scope.row.collectionOptionList[2].answerValue }}</p>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <van-form ref="tabstoreVal" v-if="item1.taskType == 1">
              <div v-for="(item, index) in item1.collectionItemList" :key="index">
                <div class="formLabel z-cell z-cells" v-if="item.answerType == 'sz'">
                  <van-cell>
                    <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                  </van-cell>
                  <p class="mg0">{{ item.collectionOptionList[0].answerValue }}</p>
                  <p
                    style="
                      color: #444;
                      font-size: 12px;
                      margin: 0;
                      padding: 10px 0;
                      text-align: right;
                    ">
                    <van-field
                      class="mobile-input"
                      v-model="item.collectionOptionList[0].collectionOption"
                      autosize
                      readonly
                      type="textarea" />
                  </p>
                  <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
                </div>
                <div class="formLabel z-cell z-cells" v-if="item.answerType == 'zp'">
                  <van-cell>
                    <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                  </van-cell>
                  <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
                </div>
                <div class="formLabel z-cell z-cells" v-if="item.answerType == 'wb'">
                  <van-cell>
                    <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                  </van-cell>
                  <div class="selesetText">
                    <p class="mg0">{{ item.collectionOptionList[0].answerValue }}</p>
                  </div>
                  <p style="color: #999; font-size: 12px; margin: 0; text-align: right">
                    <van-field
                      class="mobile-input"
                      v-model="item.collectionOptionList[0].collectionOption"
                      autosize
                      readonly
                      type="textarea" />
                  </p>
                  <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
                </div>
                <div class="formLabel z-cell z-cells" v-if="item.answerType == 'duox'">
                  <van-cell>
                    <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                  </van-cell>
                  <div class="selesetText">
                    <p
                      class="mg0"
                      v-for="(item1, index1) in item.collectionOptionList"
                      :key="index1">
                      <span v-if="item1.isCheck == 1">{{ item1.collectionOption }}</span>
                    </p>
                  </div>
                  <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
                </div>
                <div class="formLabel z-cell z-cells" v-if="item.answerType == 'dx'">
                  <van-cell>
                    <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
                  </van-cell>
                  <div class="selesetText">
                    <p
                      class="mg0"
                      v-for="(item2, index2) in item.collectionOptionList"
                      :key="index2">
                      <span v-if="item2.isCheck == 1">{{ item2.collectionOption }}</span>
                    </p>
                  </div>
                  <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
                </div>
              </div>
            </van-form>
          </van-collapse-item>
        </van-collapse>
      </div>
      <div style="padding: 10px 16px; font-size: 16px; font-weight: bold" v-if="list.visitsMore">
        更多记录
      </div>
      <van-cell-group v-if="list.visitsMore">
        <van-cell v-for="(item1, index1) in list.visitsMore" :key="index1">
          <template #title>
            <van-row>
              <van-col span="6">拜访人：</van-col>
              <van-col span="18" class="custom-titles">{{ item1.userName }}</van-col>
            </van-row>
          </template>
          <template #right-icon>
            <span>{{ item1.visitTime }}</span>
          </template>
        </van-cell>
      </van-cell-group>
      <p
        style="padding: 0 16px; font-size: 16px; font-weight: bold"
        v-if="ListHistoryList.length > 0">
        审批历史
      </p>
      <van-steps direction="vertical" :active="ListHistoryTOTLE">
        <van-step v-for="(item, index) in ListHistoryList" :key="index">
          <h3 style="font-size: 14px">{{ item.activityName }} &nbsp;{{ item.assigneeName }}</h3>
          <p>{{ item.comment }}</p>
        </van-step>
      </van-steps>
    </div>
    <div v-if="approvalShow">
      <div class="contentContainersign">
        <p class="contentContainerTitlesign">审批意见</p>
        <div style="padding: 10px 0">
          <van-field
            v-model="Content"
            rows="4"
            autosize
            maxlength="800"
            show-word-limit
            :formatter="formatter"
            type="textarea"
            placeholder="请输入审批意见" />
        </div>
      </div>
      <br />
      <van-row>
        <van-col span="12">
          <van-button
            type="info"
            size="small"
            plain
            class="BtnBorder BtnBorderRed"
            @click="refuseFn"
            >拒绝</van-button
          >
        </van-col>
        <!--      <van-col span="8">-->
        <!--        <van-button type="info" size="small" plain class="BtnBorder"  @click="reject">退回修改</van-button>-->
        <!--      </van-col>-->
        <van-col span="12">
          <van-button type="info" size="small" plain class="Btn" @click="submit">通过</van-button>
        </van-col>
      </van-row>
      <br />
      <br />
    </div>
  </div>
</template>

<script>
import {
  getCustomerSignDetail,
  addComplete,
  getListHistoryaList,
  getVisitsDetail,
} from '@/api/index';
import deleteUploadImg from '@/components/deleteUploadImg';

export default {
  name: 'abnormalVisit',
  components: { deleteUploadImg },
  data() {
    return {
      activeNames: [],
      value: '',
      sdsd: false,
      showPicker: false,
      approvalShow: false,
      logshow: false,
      edit: false,
      imgs: [],
      checkboxGroup: [],
      radio: '',
      uploadid2: 'uploadid2',
      collectionItemList: [],
      rdId: '',
      show: false,
      PhotoTypeList: [],
      PhotoType: '',
      PhotoTypeText: '',
      indexselect: 0,
      visitId: '',
      storeGroupId: '',
      taskId: '',
      collectionId: '',
      storeId: '',
      collectionAnswerlisd: [],
      tableData1: [],
      taskType: 1,
      flag: false,
      Content: '',
      indeximg: '',
      dataList: {},
      ListHistoryList: [],
      ListHistoryTOTLE: 0,
      list: '',
      userShow: false,
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.type == 1 || this.$route.query.type == 2) {
        this.approvalShow = false;
      } else {
        this.approvalShow = true;
      }
      if (to.path == '/signApproval' && from.path == '/signApprovalList') {
        this.signId = this.$route.query.signId + '';
        // if(this.$route.query.itemType=="dkhqy"){
        //   this.info()
        //   this.KJshow=false
        // }else{
        //   this.KJshow=true
        //   this.infoKJ()
        // }
      }
    },
  },
  activated() {
    this.infoKJ();
  },
  created() {
    if (this.$route.query.type == 1 || this.$route.query.type == 2) {
      this.approvalShow = false;
    } else {
      this.approvalShow = true;
    }
    this.signId = this.$route.query.signId + '';
    // this.infoKJ();
  },

  methods: {
    getListHistoryList() {
      var form = { processInstanceId: this.$route.query.instanceId, pageNum: 1, pageSize: 999 };
      getListHistoryaList(form).then((res) => {
        this.ListHistoryList = res.rows;
        this.ListHistoryTOTLE = res.total;
      });
    },
    onSubmit() {
      localStorage.setItem('storeName', this.dataList.storeName);
      localStorage.setItem('ORGName', this.dataList.deptName);
      localStorage.setItem('chainNameR', this.dataList.storeName);
      this.$router.push({
        path: '/sign',
        query: {
          id: this.dataList.storeId,
          signId: this.dataList.signId,
          taskId: this.$route.query.taskId,
          edit: true,
        },
      });
    },
    submit() {
      var formData = {
        taskId: this.$route.query.taskId,
        instanceId: this.dataList.instanceId,
        variables: JSON.stringify({
          comment: this.Content,
          pass: true,
          refuse: true,
        }),
      };
      this.$dialog
        .confirm({
          message: '确认提交审批？',
        })
        .then(() => {
          addComplete(formData).then((res) => {
            if (res.code == 200) {
              this.$dialog
                .alert({
                  title: '系统提示',
                  message: '审批成功',
                })
                .then(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$toast(res.msg);
            }
          });
        });
    },
    reject() {
      if (this.Content.trim() == '') {
        this.$toast('请输入驳回原因！');
        return;
      }
      var formData = {
        taskId: this.$route.query.taskId,
        instanceId: this.dataList.instanceId,
        refuse: true,
        variables: JSON.stringify({
          comment: this.Content,
          pass: false,
          refuse: true,
        }),
      };
      this.$dialog
        .confirm({
          message: '确认提交审批？',
        })
        .then(() => {
          addComplete(formData).then((res) => {
            if (res.code == 200) {
              this.$dialog
                .alert({
                  title: '系统提示',
                  message: '审批成功',
                })
                .then(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$toast(res.msg);
            }
          });
        });
    },
    refuseFn() {
      if (this.Content.trim() == '') {
        this.$toast('请输入拒绝原因！');
        return;
      }
      var formData = {
        taskId: this.$route.query.taskId,
        instanceId: this.dataList.instanceId,
        refuse: false,
        variables: JSON.stringify({
          comment: this.Content,
          refuse: false,
          pass: false,
        }),
      };
      this.$dialog
        .confirm({
          message: '确认提交审批？',
        })
        .then(() => {
          addComplete(formData).then((res) => {
            if (res.code == 200) {
              this.$dialog
                .alert({
                  title: '系统提示',
                  message: '审批成功',
                })
                .then(() => {
                  this.$router.go(-1);
                });
            } else {
              this.$toast(res.msg);
            }
          });
        });
    },
    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,
        ''
      );
    },
    checkFn(val) {
      var arrc = [];
      for (var cl = 0; cl < val.length; cl++) {
        if (val[cl].isCheck == '1') {
          arrc.push(val[cl].collectionOption);
        }
      }
      return arrc.join(',');
    },
    infoKJ() {
      this.getListHistoryList();
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      if (this.$route.query.edit == 'true') {
        this.edit = true;
      } else {
        this.edit = false;
      }
      getVisitsDetail({
        visitsId: this.$route.query.visitsId,
        instanceId: this.$route.query.instanceId,
      }).then((res) => {
        if (res.code == 200) {
          this.list = res.data;
          if (res.data.sfaTaskList) {
            for (var p = 0; p < res.data.sfaTaskList.length; p++) {
              if (res.data.sfaTaskList[p].processKey != null) {
                this.activeNames.push(p);
              }
            }
          }
          this.dataList.instanceId = res.data.instanceId;
          if (res.data.stopTime != res.data.updateTime) {
            this.updateTimeShow = true;
          } else {
            this.updateTimeShow = false;
          }
          if (res.data.taskId != null) {
            this.CWShow = true;
          } else {
            this.CWShow = false;
          }

          this.sameDay = res.data.sameDay;
          if (localStorage.getItem('userId') == res.data.userId) {
            this.remarkShow = true;
          } else {
            this.remarkShow = false;
          }
          if (res.data.visitRemarks != null) {
            if (res.data.visitRemarks.length > 0) {
              this.managerRemarkContents = res.data.visitRemarks;
            } else {
              this.managerRemarkContents = null;
            }
          }

          if (res.data.visitSource == 2) {
            this.imgs = res.data.sysFileInfos;
          }
        } else {
          this.$toast.fail(res.msg);
        }
        loading1.clear();
      });
    },
    info() {
      this.getListHistoryList();
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      if (this.$route.query.edit == 'true') {
        this.edit = true;
      } else {
        this.edit = false;
      }
      getCustomerSignDetail({ signId: this.signId }).then((res) => {
        if (localStorage.getItem('userId') == res.data.userId) {
          this.userShow = true;
        } else {
          this.userShow = false;
        }
        loading1.clear();
        this.dataList = res.data;
        var collectionItemLists = res.data.sfaTaskList
          ? res.data.sfaTaskList[0].collectionItemList
          : 'res.data.sfaTaskList';
        for (var q = 0; q < collectionItemLists.length; q++) {
          if (
            collectionItemLists[q].answerType == 'sz' ||
            collectionItemLists[q].answerType == 'wb'
          ) {
            collectionItemLists[q].answerValue =
              collectionItemLists[q].collectionOptionList[0].answerValue;
          }
          if (
            collectionItemLists[q].answerType == 'duox' ||
            collectionItemLists[q].answerType == 'dx'
          ) {
            collectionItemLists[q].answerValue = [];
            for (var qq = 0; qq < collectionItemLists[q].collectionOptionList.length; qq++) {
              if (collectionItemLists[q].collectionOptionList[qq].isCheck == 1) {
                collectionItemLists[q].answerValue.push(
                  collectionItemLists[q].collectionOptionList[qq].collectionOptionId
                );
                collectionItemLists[q].collectionOptionList[qq].code =
                  collectionItemLists[q].collectionCode;
                collectionItemLists[q].collectionOptionList[qq].answerType =
                  collectionItemLists[q].answerType;
                this.collectionAnswerlisd.push(collectionItemLists[q].collectionOptionList[qq]);
              }
            }
            collectionItemLists[q].answerValue = collectionItemLists[q].answerValue.join();
          }
        }
        this.collectionItemList = collectionItemLists;
      });
    },
    historiStoreVisit(val, index, kyType) {
      this.$router.push({
        path: '/historiStoreVisit',
        query: {
          visitId: this.$route.query.visitsId,
          ids: index,
          taskType: val.taskType,
          kyType: kyType,
        },
      });
      sessionStorage.setItem('collectionItemList', JSON.stringify(val.collectionItemList));
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tipTitle(val) {
      this.$toast(val);
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}
.container .custom-titles {
  white-space: break-spaces;
}
.card {
  background: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  .title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  .subtitle {
    line-height: 24px;
    font-size: 14px;
    color: #7b7b7b;
  }
  .info {
    font-size: 16px;
    color: #484848;
    line-height: 40px;
    border-bottom: 1px solid #dedede;
    position: relative;
    &:last-child {
      border-bottom: 0;
    }
    .arrow {
      float: right;
      display: inline-block;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      background: #1989fa;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      margin-top: 9px;
    }
    .arrowdetils1 {
      background: #fff;
      position: absolute;
      top: 50%;
      color: #444;
      right: 0;
      margin-top: -22px;
    }
  }
}
.TCFXList {
  .van-field__control--custom {
    flex-direction: column;
    align-items: self-start;
    .TCFXListTreeSelec {
      padding: 3px;
    }
  }
}
.signApproval {
  .deviceCode {
    p {
      color: #4a4a4a;
    }
  }
}
</style>
<style>
.fontWeit .van-cell__title {
  font-weight: bold;
  font-size: 16px;
}
.fontWeit .van-cell__title p {
  margin: 0;
}
.comment .van-field__control {
  background-color: #ebf4ff;
  border-radius: 6px;
}
.contern .van-cell {
  background-color: #ebf4ff;
  border-radius: 6px;
  overflow: hidden;
}
</style>
<style scoped>
.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;
}

.ztext-cell .van-cell__title {
  font-size: 14px;
}
</style>
<style>
.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;
}

.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 !important;
  height: 36px;
}
.BtnBorderRed {
  border: 1px solid orangered !important;
  color: orangered !important;
}
.contentContainersign {
  background-color: white;
  border-radius: 8px;
  padding: 10px 16px;
  margin: 10px;
}

.contentContainersign .contentContainerTitlesign {
  color: #222;
  font-size: 14px;
  margin: 0;
}
.contentContainersign .van-cell {
  background-color: #ebf4ff;
}
.appreval {
  border: 1px solid #f5f5f5;
  border-radius: 6px;
  overflow: hidden;
  padding: 10px 0 0 !important;
  margin: 16px;
}
.appreval .van-collapse-item__content {
  padding: 0;
}
.appreval .z-cells .van-cell__title {
  font-weight: normal;
  color: #4a4a4a;
}
.appreval .van-cell {
  padding: 10px 12px;
}
.mobile-input .van-field__control {
  font-size: 12px;
  color: #999;
  border: 0;
}
.formLabel .mobile-input {
  border: 0 !important;
}
</style>