jsm-mall-front/src/views/setting/difficultyFee/difficultyExpenseApproval/InsuranceContractForm.vue

<template>
  <div>
    <zj-form-container v-if="formDialog" ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
      <zj-form-module
        v-if="formData.pgOrderBase"
        title="工单信息"
        label-width="110px"
        :formData="formData.pgOrderBase"
        :formItems="formItems"
        :column="3"
      >
      </zj-form-module>
      <zj-form-module title="申请信息" label-width="110px" :formData="formData" :formItems="formItems2" :column="3">
      </zj-form-module>
      <template
        v-if="[3].includes(type) && formData.workerInvolveApplyItems && formData.workerInvolveApplyItems.length"
      >
        <template v-for="(item, index) in formData.workerInvolveApplyItems">
          <zj-form-module
            :key="`${index}1`"
            :title="`网点审核`"
            label-width="100px"
            :form-data="item"
            :form-items="formItems3"
            :column="3"
          >
          </zj-form-module>
          <zj-form-module
            v-if="!!item.status"
            :key="`${index}2`"
            :title="`中心审核`"
            label-width="100px"
            :form-data="item"
            :form-items="formItems4"
            :column="3"
          >
          </zj-form-module>
        </template>
      </template>
    </zj-form-container>
    <zj-form-container
      v-if="formDialog && [1, 2].includes(type)"
      ref="formRef1"
      :form-data="formData1"
      :form-attributes="{ size: 'mini' }"
      :styleSwitch="false"
    >
      <zj-form-module title="网点审核" label-width="100px" :form-data="formData1" :form-items="formItems3" :column="3">
      </zj-form-module>
    </zj-form-container>
    <zj-form-container
      v-if="formDialog && [2].includes(type)"
      ref="formRef2"
      :form-data="formData2"
      :form-attributes="{ size: 'mini' }"
      :styleSwitch="false"
    >
      <zj-form-module title="中心审核" label-width="100px" :form-data="formData2" :form-items="formItems4" :column="3">
      </zj-form-module>
    </zj-form-container>

    <div v-if="[0, 1, 2].includes(type)" style="text-align: right">
      <el-button
        size="mini"
        @click="
          () => {
            $emit('success')
          }
        "
      >
        取消
      </el-button>
      <el-button v-if="type == 1" size="mini" type="primary" @click="networkAudit">网点审批</el-button>
      <el-button v-if="type == 2" size="mini" type="primary" @click="centralAudit">中心审批</el-button>
    </div>
  </div>
</template>

<script>
import { workerApplyDetail, workerApplyWebsitAppeal, workerApplyAppeal } from '@/api/difficultyExpenseApproval.js'
import { required } from '@/components/template/rules_verify.js'
import ImageUpload from '@/components/file-upload'
export default {
  components: { ImageUpload },
  props: {
    type: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formDialog: false,
      formData: {
        applyWorkerName: '',
        applyWorkerNumber: '',
        applyWorkerPhone: '',
        auditTime: '',
        companyWechatId: '',
        companyWechatName: '',
        createBy: '',
        createTime: '',
        id: '',
        image: [],
        maintenancePricePass: '',
        orderBaseId: '',
        pgOrderBase: {},
        principal: '',
        problemDescription: '',
        reason: '',
        remark: '',
        status: '',
        updateBy: '',
        updateTime: '',
        userId: '',
        websitAuditTime: '',
        websitCustomerCharges: '',
        websitId: '',
        websitMaintenancePricePass: '',
        websitName: '',
        websitPrincipal: '',
        websitRemark: '',
        workerInvolveApplyItems: []
      },
      formData1: {
        auditTime: '',
        involveApplyId: '',
        maintenancePricePass: '',
        principal: '',
        remark: '',
        status: '',
        websitAuditTime: '',
        websitCustomerCharges: '',
        websitMaintenancePricePass: '',
        websitPrincipal: '',
        websitRemark: '',
        websitStatus: ''
      },
      formData2: {
        auditTime: '',
        maintenancePricePass: '',
        principal: '',
        remark: '',
        status: ''
      },
      formRules: {}
    }
  },
  computed: {
    formItems() {
      return [
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '工单单号', prop: 'id' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '工单类型', prop: 'orderSmallTypeText' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '客户姓名', prop: 'userName' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '客户电话', prop: 'userMobile' }
        },
        {
          md: 12,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '客户地址', prop: 'address' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '主要工程师', prop: 'workerName' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '完工时间', prop: 'overTime' }
        }
      ]
    },
    formItems2() {
      return [
        {
          name: 'slot-component',
          md: 12,
          attributes: { disabled: true },
          formItemAttributes: { label: '所属网点', prop: 'websitName' },
          render: (h, { props, onInput }) => {
            var { formData } = props
            return (
              <el-input
                value={`(${formData.websitId || ''})${formData.websitName || ''}`}
                disabled={true}
                size="mini"
                placeholder=""
              ></el-input>
            )
          }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '申请人', prop: 'applyWorkerName' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '申请时间', prop: 'createTime' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.type),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '申请理由',
            prop: 'reason',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.type),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '问题描述',
            prop: 'problemDescription',
            rules: [...required]
          }
        },
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '环境照片',
            prop: 'image',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload fileList={this.formData.image} limit={100} isEdit={[0, 1].includes(this.type)} />
                <div style="color:orange">可以上传最多15个文件，图片或者视频</div>
              </div>
            )
          }
        }
      ]
    },
    formItems3() {
      return [
        {
          md: 12,
          name: 'el-radio',
          options: [
            { label: '通过审核', value: 3 },
            { label: '驳回可重申', value: 2 },
            { label: '驳回不可申诉', value: 4 }
          ],
          attributes: {
            disabled: [2, 3].includes(this.type)
          },
          formItemAttributes: {
            label: '网点审批',
            prop: 'websitStatus',
            rules: [...required]
          }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: [2, 3].includes(this.type), type: 'number' },
          formItemAttributes: { label: '申请费用', prop: 'websitMaintenancePricePass', rules: [...required] }
        },
        {
          md: 6,
          name: 'el-radio',
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 2 }
          ],
          attributes: {
            disabled: [2, 3].includes(this.type)
          },
          formItemAttributes: {
            'label-width': '120px',
            label: '是否向客户收费',
            prop: 'websitCustomerCharges',
            rules: [...required]
          }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '网点审核人', prop: 'websitPrincipal' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '网点审核时间', prop: 'websitAuditTime' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [2, 3].includes(this.type),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '审核备注',
            prop: 'websitRemark',
            rules: [...required]
          }
        }
      ]
    },
    formItems4() {
      return [
        {
          md: 12,
          name: 'el-radio',
          options: [
            { label: '通过审核', value: 5 },
            { label: '驳回可重申', value: 2 },
            { label: '驳回不可申诉', value: 4 }
          ],
          attributes: {
            disabled: [3].includes(this.type)
          },
          formItemAttributes: {
            label: '中心审批',
            prop: 'status',
            rules: [...required]
          }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '中心审核人', prop: 'principal' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: { disabled: true },
          formItemAttributes: { label: '中心审核时间', prop: 'auditTime' }
        },
        {
          md: 6,
          name: 'el-input',
          attributes: {
            disabled: [3].includes(this.type),
            type: 'number'
          },
          formItemAttributes: {
            label: '审批费用',
            prop: 'maintenancePricePass',
            rules: [...required]
          }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {
            disabled: [3].includes(this.type),
            type: 'textarea',
            rows: 3,
            placeholder: '请输入'
          },
          formItemAttributes: {
            label: '审核备注',
            prop: 'remark',
            rules: [...required]
          }
        }
      ]
    }
  },

  created() {
    workerApplyDetail({
      orderBaseId: this.item.orderBaseId
    }).then(res => {
      this.formData = {
        ...res.data,
        image: res.data?.image ? res.data?.image?.split(',').map(url => ({ url })) : []
      }
      this.formDialog = true
      if ([2].includes(this.type)) {
        this.formData1 = {
          ...this.formData?.workerInvolveApplyItems?.[0]
        }
      }
    })
  },
  methods: {
    networkAudit() {
      this.$refs.formRef.validate(valid0 => {
        if (valid0) {
          this.$refs.formRef1.validate((valid, invalidFields, errLabels) => {
            if (valid) {
              workerApplyWebsitAppeal({
                ...this.formData,
                image: this.formData.image.map(item => item.url).join(','),
                workerInvolveApplyItem: { ...this.formData1 }
              }).then(res => {
                this.$message({
                  type: 'success',
                  message: '审核成功'
                })
                this.$emit('success')
              })
            }
          })
        }
      })
    },
    centralAudit() {
      this.$refs.formRef2.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          workerApplyAppeal({
            ...this.formData?.workerInvolveApplyItems?.[0],
            ...this.formData2
          }).then(res => {
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.$emit('success')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>