FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/subPages/pages/commitment/commitmentDetail/index.vue

<script>
import DescriptionText from "@/subPages/pages/commitment/commitmentDetail/components/DescriptionText.vue";
import InputComponents from "@/subPages/pages/commitment/commitmentDetail/components/InputComponents.vue";
import DividerComponents from "@/subPages/pages/commitment/commitmentDetail/components/DividerComponents.vue";
import IndicatorComponents from "@/subPages/pages/commitment/commitmentDetail/components/IndicatorComponents.vue";
import {downFileBase64, editVerifyTask} from "@/api/commitment";
import CommitmentConfirmForm from "@/subPages/pages/commitment/components/commitmentConfirmForm/index.vue";
import buriedPoint from "@/utils/dd.buriedPoint";

export default {
  components: {CommitmentConfirmForm, IndicatorComponents, DividerComponents, InputComponents, DescriptionText},
  data() {
    return {
      actionSheetShow: false,
      currentStep: 0,
      batchCheckForm:{
        fileList:[]
      },
      checkResultColumns: [
        {
          text: '整改',
          value: 1
        },
        {
          text: '整改扣分',
          value: 2
        },
        {
          text: '符合',
          value: 0
        }
      ]
    };
  },
  onLoad(){
    buriedPoint('经营承诺详情','1-2','subPages/pages/commitment/commitmentDetail/index')
  },
  computed: {
    templateJson: {
      get() {
        return this.$store.state.template.templateJson
      },
      set(value) {
        this.$store.commit('template/setTemplateComponents', value)
      }
    },
    noDownload() {
      return this.$route.query.noDownload
    },
    indicatorList:{
      get() {
        return this.$store.state.template.indicatorList
      },
      set(value) {
        this.$store.commit('template/setIndicatorList', value)
      }
    },
    /* 批量核查的列表,只有auditResult为3(未核查的)和approvalStatus已拒绝(0)的 */
    batchCheckIndicatorList(){
      return this.indicatorList.filter(item => item.auditResult === 3 || item.approvalStatus === 0)
    }
  },
  watch:{
    '$route.query.uuid':{
      handler(val){
        if(val) {
          this.currentStep = 0
          this.$store.dispatch('template/getPromiseDetail', this.$route.query.uuid)
        }
      },
      immediate:true
    }
  },
  methods: {
    handleClose() {
      this.$router.go(-1)
    },
    handleDownPdf() {
     if(!this.templateJson.attmentId){
       this.$toast('暂无承诺书')
     }else {
       downFileBase64({
         uuid:this.templateJson.attmentId
       }).then(res => {
         if (res.code === 0) {
           const a = document.createElement('a')
           a.href = res.data
           a.download = '承诺书.pdf'
           a.click()
         }
       })
     }
    },
    /* 批量核查显示 */
    handleBatchCommitment() {
      this.actionSheetShow = true
    },
    /* 批量核查下一步 */
    handleNextStep() {
      this.currentStep = 1
    },
    handlePrevStep() {
      this.currentStep = 0
    },
    onCheckResultSubmit(){
      const result = []
      this.batchCheckIndicatorList.forEach(item => {
        result.push({
          "uuid": item.uuid,
          "promiseId": item.promiseId,
          "indicatorId": item.indicatorId,
          "indicatorInput": item.indicatorInput,
          "indicatorInputBody": item.indicatorInputBody,
          "auditor": uni.getStorageSync("userInfo").realName,
          "auditResult": this.checkResultColumns.find(item => item.text === this.batchCheckForm.auditResult)
              && this.checkResultColumns.find(item => item.text === this.batchCheckForm.auditResult).value,
          "auditRemark": this.batchCheckForm.auditRemark,
          "expandStr": this.batchCheckForm.fileList.map(item => item.uuid).join(','),
        })
      })
      editVerifyTask(result).then( async res => {
        if (res.code === 0) {
          this.$toast('核查成功')
          this.actionSheetShow = false
          this.batchCheckForm={}
          await this.$store.dispatch('template/getPromiseDetail', this.$route.query.uuid)
        }else{
          this.$toast('核查失败' + res.msg)
        }
      })
    }
  }
}
</script>

<template>
  <view class="h5-page">
    <view class="page-content">
      <view
          v-for="(item,index) in templateJson.components" :key="index"
      >
        <DescriptionText v-if="item.base.moduleName === 'InstructionsText'" :index="index"></DescriptionText>
        <InputComponents v-else-if="item.base.moduleName === 'Input'" :index="index"></InputComponents>
        <DividerComponents v-else-if="item.base.moduleName === 'divider'" :index="index"></DividerComponents>
      </view>
      <view class="commit-title" v-if="batchCheckIndicatorList.length > 0" @click="handleBatchCommitment">批量核查</view>
      <IndicatorComponents></IndicatorComponents>
    </view>
    <view class="page-bottom">
      <van-button plain type="primary" @click="handleClose">关闭</van-button>
      <van-button v-if="!noDownload" type="info" @click="handleDownPdf">下载PDF</van-button>
    </view>
    <van-action-sheet v-model="actionSheetShow" title="批量核查">
      <div class="content">
        <view v-show="currentStep === 0" class="first-step">
          <van-checkbox
              shape="square"
              style="margin-top: 20px"
              v-for="(item,index) in batchCheckIndicatorList" :key="index" :name="index"
              v-model="batchCheckIndicatorList[index].selectValue">
            {{ item.indicatorInputBody }}
          </van-checkbox>

          <van-button round block type="info" style="margin-top: 20px"
                      @click="handleNextStep">下一步</van-button>
        </view>
        <view
          v-show="currentStep === 1"
          class="second-step"
        >
          <CommitmentConfirmForm
                                 v-model="batchCheckForm">
            <template #footer>
              <view style="margin: 16px;">
                <van-button round block type="info" @click="handlePrevStep">上一步</van-button>
                <van-button style="margin-top: 20px" round block type="info" @click="onCheckResultSubmit">核查确认</van-button>
              </view>
            </template>
          </CommitmentConfirmForm>
        </view>
      </div>
    </van-action-sheet>
  </view>
</template>

<style lang="scss" scoped>
.h5-page {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
  overflow-y: auto; /* 确保垂直滚动 */
  display: flex;
  flex-direction: column;
  float: left;
  width: calc(100% - 40px);
}

.page-content {
  flex: 1;
}

.page-bottom {
  height: 48px;
}

.page-content-bottom {
  text-align: left;
  margin-top: 50px;
  background: #F6F6F6;
  border-radius: 4px;
  padding: 10px;

  view {
    margin-bottom: 10px;
  }
}

.page-bottom {
  display: flex;
  width: 100%;
}

/* 默认情况下，每个按钮平分空间 */
.page-bottom .van-button {
  flex: 1;
  margin-right: 10px;
}

/* 取消最后一个按钮的右侧间距 */
.page-bottom .van-button:last-child {
  margin-right: 0;
}

/* 当只有两个按钮时的样式 */
.page-bottom .van-button:first-child:nth-last-child(2) {
  flex: 1;  /* 第一个按钮占 1/3 */
}

.page-bottom .van-button:nth-child(2):last-child {
  flex: 3;  /* 第二个按钮占 2/3 */
}

/* 自定义滚动条的宽度和颜色 */
.h5-page::-webkit-scrollbar {
  width: 1px; /* 滚动条宽度 */
}

.h5-page::-webkit-scrollbar-track {
  background: transparent; /* 滚动条轨道颜色 */
}

.h5-page::-webkit-scrollbar-thumb {
  background: #faf4f4; /* 滚动条颜色 */
}
.commit-title {
  color: #4476E9;
  text-align: end;
}
.content {
  padding: 16px 16px 160px;
}

</style>