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="[
                  'contractName',
                  {
                    initialValue: model ? model.contractName : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入合同名称',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同签约日期" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-date-picker
                :format="dateFormat"
                show-time
                placeholder="请输入合同签约日期"
                :disabled="onlyread && disableSubmit"
                v-decorator="[
                  'contractSigningTime',
                  {
                    initialValue: model ? model.contractSigningTime : '',
                    rules: [
                      {
                        required: true,
                        message: '请输入有合同签约日期',
                      },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              prop="contractCode"
              :labelCol="{ span: 8 }"
              :wrapperCol="{ span: 16 }"
              label="回访文件"
              extra=""
            >
              <a-upload
                name="file"
                :action="url.upload"
                :headers="headers"
                @change="hetongwenjian"
                :disabled="onlyread && disableSubmit"
                v-model="contractCode"
              >
                <a-button> <a-icon type="upload" />选择 </a-button>
              </a-upload>
              <div class="hoverEvent" style="position: relative; width: 500px" v-for="v in fileWenjian" :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-model-item>
          </a-col>
        </a-row>
      </a-form>
      {{ modelList.enterpriseName }}
    </a-spin>
  </a-modal>
</template>

<script>
import { addContractManagement } from '@/api/insys'
import pick from 'lodash.pick'
import { ossDownloadFile, listFileUrl } from '@/api/configApi'
export default {
  name: 'hetongModal',
  props: {
    recordOrderNo: {
      type: String,
      default: '',
    },
    orderNo: {
      type: String,
      default: '',
    },
    customerType: {
      type: Number,
      default: '',
    },
    modelList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      fileList: [],
      fileListShow: false,
      fileWenjian: [],
      marriageProofShow: 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: '',
      contractCode: '',
      form: this.$form.createForm(this),
    }
  },
  methods: {
    edit(record) {
      console.log(record)
      this.form.resetFields()
      let p = { applyNo: localStorage.getItem('dh') }
      this.model = Object.assign({}, record, p)
      this.id = record.id
      this.fileWenjian = []
      this.contractCode = ''
      console.log(this.model)
      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.fileWenjian = []
      this.contractCode = ''
      this.form.resetFields()
      this.visible = true
    },

    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    handleSubmit() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // console.log(err, values)
        if (!err) {
          if (this.contractCode) {
            this.confirmLoading = true
            if (this.customerType == 1) {
              let id = {
                customerNo: this.recordOrderNo,
                contractSignMark: 2,
                customerType: this.customerType,
                customerName: this.modelList.idCardName,
                id: this.id,
                orderNo: this.orderNo,
                contractCode: this.contractCode,
              }
              let formData = Object.assign(values, id)
              addContractManagement(formData)
                .then((res) => {
                  if (res.status.statusCode == 0) {
                    this.$message.success(res.status.statusReason)
                    this.$emit('ok')
                  } else {
                    this.$message.warning(res.status.statusReason)
                  }
                })
                .finally(() => {
                  this.confirmLoading = false
                  this.close()
                })
            } else if (this.customerType == 2) {
              let id = {
                customerNo: this.recordOrderNo,
                contractSignMark: 2,
                customerType: this.customerType,
                customerName: this.modelList.enterpriseName,
                id: this.id,
                orderNo: this.orderNo,
                contractCode: this.contractCode,
              }
              let formData = Object.assign(values, id)
              addContractManagement(formData)
                .then((res) => {
                  if (res.status.statusCode == 0) {
                    this.$message.success(res.status.statusReason)
                    this.$emit('ok')
                  } else {
                    this.$message.warning(res.status.statusReason)
                  }
                })
                .finally(() => {
                  this.confirmLoading = false
                  this.close()
                })
            }
          }
        }else{
            this.$message.warning("请上传合同模板")
        }
      })
    },
    handleCancel() {
      this.close()
    },
    clickProject(v) {
      console.log(v.fileUrl)
      window.open(v.url)
    },
    handleDelete(v) {
      this.marriageProofShow = true
      this.fileWenjian = []
      this.revisitFileList = []
    },
    hetongwenjian(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.contractCode = 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.fileWenjian.push(fileData)
              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-link-man .ant-modal-body {
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 200px;
}
.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>