FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/subPages/pages/commitment/components/commitmentConfirmForm/index.vue

<script>
import {uploadFile} from "@/api/commitment";
import {v4 as uuidv4} from "uuid";

export default {
  props:{
    value:{
      type: Object,
      default: ()=>{}
    }
  },
  computed:{
    formStates:{
      get(){
        return this.value
      },
      set(value){
        this.$emit('input', value)
      }
    }
  },
  data(){
    return {
      checkResultColumns: [
        {
          text: '整改',
          value: 1
        },
        {
          text: '整改扣分',
          value: 2
        },
        {
          text: '符合',
          value: 0
        }
      ],
      checkGoalColumns: [
        {
          text: '整改 0分',
          value: 0
        },
        {
          text: '整改扣分 -10分',
          value: -10
        },
        {
          text: '符合',
          value: 0
        }
      ],
      checkResultPopupVisible: false,
      checkScorePopupVisible: false,
    }
  },
  methods:{
    handleCheckResultConfirm(value) {
      this.formStates.auditResult = value.text
      this.checkResultPopupVisible = false
    },
    handleCheckGoalConfirm(value) {
      this.formStates.auditScore = value.text
      this.checkScorePopupVisible = false
    },
    beforeUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50;
      if (!isLt50M) {
        this.$toast('上传的图片大小不能超过 50MB!');
        return false;
      }
      return true;
    },
    afterRead(file) {
      uploadFile({
        uuid: uuidv4(),
        file: file
      }).then(res => {
        if (res.code === 0) {
              this.formStates.fileList.push({
                uuid: res.data,
            url: URL.createObjectURL(file.file)
          })
        }
      })
    },
  }
}
</script>

<template>
  <view>
    <van-form v-if="formStates">
      <!--核查结果-->
      <van-field
          readonly
          clickable
          name="auditResult"
          :value="formStates.auditResult"
          label="核查结果"
          placeholder="请选择核查结果"
          @click="checkResultPopupVisible = true"
      />
      <van-popup v-model="checkResultPopupVisible" position="bottom">
        <van-picker
            show-toolbar
            value-key="text"
            :columns="checkResultColumns"
            @confirm="(value)=>handleCheckResultConfirm(value)"
            @cancel="checkResultPopupVisible = false"
        />
      </van-popup>
      <!--核查得分-->
      <van-field
          readonly
          clickable
          name="auditScore"
          :value="formStates.auditScore"
          label="核查得分"
          placeholder="请选择核查得分"
          @click="checkScorePopupVisible = true"
      />
      <van-popup v-model="checkScorePopupVisible" position="bottom">
        <van-picker
            show-toolbar
            value-key="text"
            :columns="checkGoalColumns"
            @confirm="(value)=>handleCheckGoalConfirm(value)"
            @cancel="checkScorePopupVisible = false"
        />
      </van-popup>
      <!--核查说明-->
      <van-field
          clickable
          name="auditRemark"
          v-model="formStates.auditRemark"
          label="核查说明"
          type="textarea"
          placeholder="请输入核查说明"
      />
      <!--附件上传-->
      <van-field label="文件上传">
        <template #input>
          <view class="upload-files">
            <view
                v-for="(item,index) in formStates.fileList"
                :key="index"
            >
              <img :src="item.url" style="width: 80px; height: 80px;"/>
            </view>
            <van-uploader v-if="!formStates.fileList || (formStates.fileList && formStates.fileList.length < 3)"
                          :before-upload="beforeUpload"
                          accept="image/*,pdf"
                          :after-read="(file)=>afterRead(file)"
            >
            </van-uploader>
          </view>
          <view class="upload-description">
            <view>
              支持png、jpg、pdf，最大50M
            </view>
            <view>
              最多3个附件
            </view>
          </view>
        </template>
      </van-field>
      <slot name="footer"></slot>
    </van-form>
  </view>
</template>

<style scoped lang="scss">

</style>