picc / admin-no-ui · Files

<template>
  <a-modal
    :title="title"
    :width="1000"
    :centered="true"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    :maskClosable="false"
    style="top: 20px"
    class="scope-link-man"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="险种" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入险种"
                v-decorator="[
                  'insureClass',
                  {
                    initialValue: model ? model.insureClass : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入险种',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="保单号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入保单号"
                v-decorator="[
                  'insureNo',
                  {
                    initialValue: model ? model.insureNo : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入有保单号',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="投保时间" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-date-picker
                :format="dateFormat"
                @change="onChangeTime"
                show-time
                placeholder="请输入调查时间"
                :disabled="onlyread && disableSubmit"
                v-decorator="[
                  'insureTime',
                  {
                    initialValue: model ? model.insureTime : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入有投保时间',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="期限（月）" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入期限（月）"
                v-decorator="[
                  'insureLimit',
                  {
                    initialValue: model ? model.insureLimit : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入期限（月）',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="投保人" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入投保人"
                v-decorator="[
                  'insureMan',
                  {
                    initialValue: model ? model.insureMan : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入投保人',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="被保险人" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入被保险人"
                v-decorator="[
                  'quiltInsureMan',
                  {
                    initialValue: model ? model.quiltInsureMan : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入被保险人',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="保额" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入保额"
                v-decorator="[
                  'insureQuota',
                  {
                    initialValue: model ? model.insureQuota : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入保额',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="保费" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input
                placeholder="请输入保费"
                v-decorator="[
                  'insureAmount',
                  {
                    initialValue: model ? model.insureAmount : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入保费',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="备注" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-textarea
                rows="2"
                placeholder="请输入备注"
                v-decorator="[
                  'remark',
                  {
                    initialValue: model ? model.remark : '',
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          class="uploadVerify"
          label="上传文件"
          extra="仅支持上传jpg\png\jpeg\bmp\pdf\excel文件格式"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 12 }"
        >
          <a-upload
            name="file"
            :action="url.upload"
            :headers="headers"
            @change="cailiao"
            :disabled="onlyread && disableSubmit"
            v-decorator="[
              'guaranteeFileIdentifyingCode',
              { initialValue: model ? model.guaranteeFileIdentifyingCode : '' },
            ]"
          >
            <a-button> <a-icon type="upload" />选择 </a-button>
          </a-upload>
          <div class="hoverEvent" style="position: relative; width: 500px" v-for="v in marriageProofList" :key="v.id">
            <span @click.stop="clickProject(v)">{{ v.fileName }}</span>
            <a-popconfirm title="确定删除吗?" @confirm="handleDelete(v)">
              <a class="hoverShow">删除</a>
            </a-popconfirm>
          </div>
          <span v-show="marriageProofShow" style="color: red; font-size: 14px; padding-left: 10px">请上传文件</span>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { saveOrUpdateGuaranteeInfoFollow,ossDownloadFile,listFileUrl } from '@/api/configApi'
import pick from 'lodash.pick'

export default {
  name: 'BaoxianModal',
  props: {
    typeBtn: {
      type: String,
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      fileList: [],
      fileListShow: false,
      onlyread: false,
      disableSubmit: true,
      title: '',
      status: '',
      dateFormat: 'YYYY-MM-DD 00:00:00',
      validatorRules: {},
      url: {
        upload: window._CONFIG['uploadUrl'],
      },
      headers: {
        'X-Access-Token': this.$store.state.user.token,
      },
      model: {},
      id: '',
      form: this.$form.createForm(this),
      updateBtn: '',
      journalTime: '',
      modelList: [],
      guaranteeFileIdentifyingCode: [],
      marriageProofList: [],
    }
  },
  methods: {
    edit(record) {
      this.form.resetFields()
      let p = { applyNo: localStorage.getItem('dh') }
      this.model = Object.assign({}, record, p)
      this.journalTime = this.model.insureTime
      this.id = record.id
      // console.log(this.model)
      this.guaranteeFileIdentifyingCode = this.model.guaranteeFileIdentifyingCode ? this.model.guaranteeFileIdentifyingCode : []
      let c = {
        fileIdentifyingCodeList: this.model.guaranteeFileIdentifyingCode ? this.model.guaranteeFileIdentifyingCode.toString() : '',
        expire: 10000,
      }
      listFileUrl(c).then((res) => {
        if (res.status.statusCode == 0) {
          this.marriageProofList = res.result
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'bankName', 'bankCardType'))
      })
    },

    add(applyNo) {
      let data = { applyNo: applyNo, accountType: 1 }
      this.model = Object.assign({}, data)
      this.journalTime = ''
      this.form.resetFields()
      this.visible = true
    },

    close() {
      // this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    onChangeTime(value, dateString) {
      this.journalTime = dateString
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        console.log(err, values)
        if (!err) {
          this.confirmLoading = true
          if (this.updateBtn == 'edit') {
            var id = { id: this.id }
          } else if (this.updateBtn == 'add') {
            var id = ''
          }
          let a = values.insureTime
          let formData = Object.assign(values)
          formData.insureTime = this.journalTime
          formData.orderNo = this.modelList.orderNo
          formData.guaranteeType = this.modelList.guaranteeType
          formData.customerType = this.modelList.customerType
          formData.guaranteeName = this.modelList.guaranteeName
          formData.guaranteeFileIdentifyingCode = this.guaranteeFileIdentifyingCode
          if (this.typeBtn == 'edit') {
            saveOrUpdateGuaranteeInfoFollow(formData)
              .then((res) => {
                if (res.status.statusCode == 0) {
                  this.$message.success(res.status.statusReason)
                  this.$emit('commonBankAccountModalOk')
                } else {
                  this.$message.warning(res.status.statusReason)
                }
              })
              .finally(() => {
                this.confirmLoading = false
                this.close()
              })
          } else {
            this.$emit('tableList', formData)
            this.confirmLoading = false
            this.close()
          }
        }
      })
    },
    handleCancel() {
      this.close()
    },
    clickProject(v) {
      console.log(v.fileUrl)
      window.open(v.url)
    },
    handleDelete(v) {
      this.marriageProofShow = true
      this.marriageProofList = []
      this.cailiao.marriageProof = []
      // console.log(v)
    },
    cailiao(info) {
      this.confirmLoading = true
      let fileList = [...info.fileList]
      fileList.slice(-2)
      if (info.file.status === 'done') {
        if (info.file.response.status.statusCode == 0) {
          this.confirmLoading = false
          let _p = {
            fileIdentifyingCode: info.file.response.result.fileIdentifyingCode,
            expire: 10000,
          }
          this.guaranteeFileIdentifyingCode.push(info.file.response.result.fileIdentifyingCode)
          ossDownloadFile(_p).then((res) => {
            if (res.status.statusCode == 0) {
              var urls = res.result
              let fileData = {
                url: res.result.url,
                fileName: res.result.fileName,
              }
              this.marriageProofList.push(fileData)
              console.log(this.marriageProofList)
              this.marriageProofShow = false
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
        }
        this.$message.success(`${info.file.name} 上传成功!`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
  },
}
</script>
<style>
.scope-person .ant-modal-body {
    padding: 0 24px !important;
}

.scope-person .ant-modal-body {
    overflow-y: scroll;
    min-height: 600px;
    max-height: 600px !important;
}

.scope-person .ant-tabs-bar {
    margin-bottom: 0;
}

.scope-person .ant-card-body {
    padding: 10px 24px;
}

.scope-person .ant-layout-sider {
    flex: 0 0 300px;
    max-width: 300px !important;
    min-width: 300px !important;
    width: 300px !important;
}

.scope-person .ant-modal-footer {
    display: none;
}

.scope-person .scoped-img img {
    width: 200px;
}

.ant-upload-list,
.ant-upload-list-text {
    display: none !important;
}
</style>