jsm-mall-front/src/views/setting/insuranceAdministration/employerInsurance/InsuranceContractForm.vue

<template>
  <div>
    <zj-form-container ref="formRef" :formData="formData" :formRules="formRules">
      <zj-form-module title="保险信息" label-width="110px" :formData="formData" :formItems="formItems" :column="3">
      </zj-form-module>
    </zj-form-container>
    <div v-if="type === 0 || type === 1" style="text-align: right">
      <el-button size="mini" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/util'
import { policyOrderDetail, policyOrderUpdate } from '@/api/employerInsurance'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  components: {
    ImageUpload
  },
  props: {
    type: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      disabled: this.type === 2,
      // 表单数据
      formData: {
        belongCompany: '',
        belongCompanyCode: '',
        buyUnit: '',
        buyUnitId: '',
        classWebsitId: '',
        classWebsitName: '',
        companyWechatId: '',
        companyWechatName: '',
        createBy: '',
        createTime: '',
        endTime: '',
        fileUrl: '',
        id: '',
        isPay: '',
        isReceipt: '',
        isSend: '',
        monthDate: '',
        payAmount: 0,
        payTime: '',
        policyId: '',
        policyName: '',
        policyNumber: '',
        policyOrderStatus: '',
        receiptTime: '',
        replaceIdcard: '',
        replaceName: '',
        replaceNumber: '',
        replacePhone: '',
        sendBatch: '',
        sendTime: '',
        startTime: '',
        transactionId: '',
        type: '',
        updateBy: '',
        updateTime: '',
        websitId: '',
        websitName: '',
        websitUserId: '',
        workerIdcard: '',
        workerMobile: '',
        workerName: '',
        workerNumber: ''
      },
      formRules: {}
    }
  },
  computed: {
    formItems() {
      return [
        {
          name: 'el-input',
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '保单编号', prop: 'policyNumber', rules: [...required] }
        },
        {
          name: 'el-date-picker',
          attributes: { disabled: this.disabled, type: 'date', style: { width: '100%' } },
          formItemAttributes: { label: '生效时间', prop: 'startTime', rules: [...required] }
        },
        {
          name: 'el-date-picker',
          attributes: { disabled: this.disabled, type: 'date', style: { width: '100%' } },
          formItemAttributes: { label: '失效时间', prop: 'endTime', rules: [...required] }
        },
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '上传附件',
            prop: 'fileUrl',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            return (
              <div>
                <ImageUpload fileList={this.formData.fileUrl} limit={1} fileType={['image']} />
                <h4 style="color:#ffa700">上传图片</h4>
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    // 获取详情
    if (this.type !== 0) {
      policyOrderDetail({
        id: this.item.id
      }).then(res => {
        this.formData = { ...res.data, fileUrl: res.data.fileUrl ? [{ url: res.data.fileUrl }] : [] }
      })
    }
  },
  methods: {
    submit() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          policyOrderUpdate({
            ...this.formData,
            startTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.formData.startTime)),
            endTime: this.formData?.endTime
              ? `${dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.formData.endTime))?.split(' ')?.[0]} 23:59:59`
              : '',
            fileUrl: this.formData?.fileUrl?.[0]?.url
          }).then(res => {
            this.$message({
              type: 'success',
              message: `保存成功!`
            })
            this.$emit('success')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

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