picc / admin-no-ui · Files

<template>
  <a-modal :title="title" :width="800" :centered='true' :maskClosable="false" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" style="top:20px;" class="scoped-contract">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <template v-if="!!model.id">
          <a-form-item label="合同模板编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['contractTemplateNo', {'initialValue':model.contractTemplateNo,rules:[{required: true,message: '请输入合同模板编号'}]}]" placeholder="请输入合同模板编号" :readOnly="true" />
          </a-form-item>
        </template>
        <a-form-item label="合同模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
          <a-input v-decorator="['contractTemplateName', {'initialValue':model.contractTemplateName, rules:[{ required: true, message: '请输入4-16个汉字的合同模板名称'},{ validator: checkData, trigger: 'blur'}]}]" placeholder="请输入合同模板名称" />
        </a-form-item>
        <a-form-item label="合同类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select placeholder="请选择" @change="contractType" v-decorator="['contractTemplateType', {'initialValue':model.contractTemplateType,rules:[{ required: true, message: '请选择合同类型'}]}]">
            <a-select-option v-for="(item, index) in contractParamsRange" :key="index+1" :vlaue="item.name">
              {{item.title}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="uploadVerify" label="上传协议模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload name="file" :headers="headers" :action="url.upload" @change="handleChange">
            <a-button v-if="fileList.length < 1">
              <a-icon type="upload" /> 选择 </a-button>
          </a-upload>
          <div class="hoverEvent" style="position:relative;width:500px;" v-for="v in fileList" :key="v.id">
            <span @click.stop="clickProject(v)">{{v.fileName}}</span>
            <a-popconfirm title="确定删除吗?" @confirm="handleDelete(v)">
              <a class="hoverShow">删除</a>
            </a-popconfirm>
          </div>
          <br></span><span v-show="fileListShow" style="color:red;font-size:14px;">请上传协议模板</span>
        </a-form-item>
        <a-form-item class="uploadVerify" label="合同参数配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-button type="link" @click="actionLook">查看</a-button>
          <br></span><span v-show="contractDataShow" style="color:red;font-size:14px;">请查看并勾选合同参数配置</span>
        </a-form-item>
        <a-form-item label="是否电子签约" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['contractElectronic',{'initialValue':model.contractElectronic,rules:[{required: true, message: '请选择是否电子签约'}]}]" @change="selectChange">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-show="selectVal" label="电子签账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-decorator="['cfcaAccountType', {'initialValue':model.cfcaAccountType?model.cfcaAccountType:''}]" :disabled="!!model.collectionNo" placeholder="请选择">
<!--            <a-select-option :value="1">小贷</a-select-option>-->
<!--            <a-select-option :value="2">中交金科</a-select-option>-->
          </a-select>
        </a-form-item>
        <a-form-item v-show="selectVal" label="电子签合同模板编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['cfcaContractTemplateNo', {'initialValue':model.cfcaContractTemplateNo}]" placeholder="请输入电子签合同模板编号" />
        </a-form-item>
        <a-form-item label="上传协议内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea rows="3" placeholder="上传协议内容" v-decorator="['contractContent', {'initialValue':model.contractContent,rules:[{required: true,message: '请输入上传协议内容'}]}]" />
        </a-form-item>
        <a-form-item label="是否强制阅读" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['compulsoryRead',{'initialValue':model.compulsoryRead,rules:[{required: true, message: '请选择是否强制阅读'}]}]">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否首次签署" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['firstSignature',{'initialValue':model.firstSignature,rules:[{required: true, message: '请选择是否首次签署'}]}]">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea rows="4" placeholder="备注" v-decorator="['remark', {'initialValue':model.remark}]" maxlength="60" />
        </a-form-item>
      </a-form>
    </a-spin>
    <contract-parameter-modal ref="parameterForm" @transmitData="transmitData"></contract-parameter-modal>
  </a-modal>
</template>

<script>
import ContractParameterModal from './ContractParameterModal'
import { insertContractTemplate, updateContractTemplate, postAction, getAction, ossDownloadFile,listFileUrl } from '@/api/configApi'
export default {
  name: 'PasswordModal',
  components: {
    ContractParameterModal,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      confirmDirty: false,
      title: '',
      selectVal: false,
      fileList: [],
      fileListShow: false,
      model: {
        value: 1,
        value1: 2,
      },
      contractVal: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      addFlag: true,
      url: {
        upload: window._CONFIG['uploadUrl'],
      },
      parameterVal: '',
      contractParamsRange: JSON.parse(sessionStorage.getItem('CONTRACTTEMPLATETYPE')),
      defaultFileList: [],
      contractData: [],
      contractDataShow: false,
      form: this.$form.createForm(this),
      dataSource: [],
      selectData: [],
      marriageProof: '',
      headers: {
        'X-Access-Token': this.$store.state.user.token,
      },
    }
  },
  created() {
    console.log('created')
    console.log(this.contractParamsRange)
  },
  methods: {
    loadData() {
      let _p = '/config/admin/queryParamByRange?contractTemplateType=' + this.contractVal
      getAction(_p)
        .then((res) => {
          if (res.status.statusCode == 0) {
            this.dataSource = res.result
          } else {
            this.$message.warning(res.status.statusReason)
          }
        })
        .then((res) => {
          let _p = '/config/admin/queryContractParam?contractTemplateNo=' + this.parameterVal
          getAction(_p).then((res) => {
            if (res.status.statusCode == 0) {
              this.selectData = res.result
              this.selectData = this.selectData.concat(this.contractData)
              this.contractData = res.result
              console.log(this.selectData)
              this.dataSource.map((v) => {
                this.selectData.map((v1) => {
                  if (v.contractParamNo == v1.contractParamNo) {
                    v.select = true
                  }
                })
              })
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
        })
    },
    edit(record) {
      console.log(record)
      this.addFlag = false
      this.fileList = []
      this.model = record
      console.log(this.model.contractTemplateType)
      this.parameterVal = this.model.contractTemplateNo
      this.contractVal = this.model.contractTemplateType
      this.loadData()
      this.marriageProof = this.model.contractTemplateUrl
      let c = {
        fileIdentifyingCodeList: this.model.contractTemplateUrl ? this.model.contractTemplateUrl.toString() : '',
        expire: 10000,
      }
      listFileUrl(c).then((res) => {
        if (res.status.statusCode == 0) {
          this.fileList = res.result
        } else {
          this.$message.warning(res.status.statusReason)
        }
      })
      // this.model.contractTemplateUrl
      //   ? this.fileList.push({ fileUrl: this.model.contractTemplateUrl })
      //   : (this.fileList = [])
      this.model.contractElectronic == 1 ? (this.selectVal = true) : (this.selectVal = false)
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => {})
    },

    add() {
      this.fileList = []
      this.model = {}
      this.addFlag = true
      this.contractVal = ''
      this.defaultFileList = []
      this.form.resetFields()
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue()
      })
    },

    close() {
      this.contractData = []
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.selectedRole = []
    },
    transmitData(data) {
      this.contractData = data
      this.contractData.length > 0 ? (this.contractDataShow = false) : (this.contractDataShow = true)
    },
    selectChange(e) {
      let val = e.target.value
      val == 1 ? (this.selectVal = true) : (this.selectVal = false)
    },
    handleChange(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.marriageProof = 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.fileList.push(fileData)
              console.log(this.fileList)
              this.fileListShow = 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} 上传失败.`)
        this.confirmLoading = false
      }
    },
    //fileListShow
    //fileList
    handleSubmit() {
      this.form.validateFields((err, values) => {
        console.log()
        // if (this.fileList.length < 1) {
        //   this.fileListShow = true;
        // }
        if (this.contractData.length < 1) {
          this.contractDataShow = true
        }
        // if (!err && this.fileList.length >= 1 && this.contractData.length >= 1) {
        this.confirmLoading = true
        let formData = values,
          promiseFn
        formData.contractTemplateUrl = this.marriageProof
        formData.contractParamList = this.contractData
        console.log(formData)
        if (!!this.model.id) {
          //编辑
          promiseFn = updateContractTemplate(formData)
        } else {
          promiseFn = insertContractTemplate(formData)
        }
        promiseFn
          .then((res) => {
            if (res.status.statusCode == 0) {
              this.fileList = []
              this.$message.success(res.status.statusReason)
              this.$emit('ok')
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          .finally(() => {
            this.confirmLoading = false
            this.close()
          })
        // }
      })
    },
    contractType(key) {
      this.contractVal = key
    },
    actionLook() {
      if (this.addFlag) {
        // 新增
        if (this.contractVal) {
          // 已选择合同类型
          let _p = '/config/admin/queryParamByRange?contractTemplateType=' + this.contractVal
          getAction(_p).then((res) => {
            console.log(res)
            if (res.status.statusCode == 0) {
              this.dataSource = res.result
              this.dataSource.map((v) => {
                this.contractData.map((v1) => {
                  if (v.contractParamNo == v1.contractParamNo) {
                    v.select = true
                  }
                })
              })
              this.$refs.parameterForm.edit(this.dataSource, '2')
              this.$refs.parameterForm.title = '合同参数详细'
              this.$refs.parameterForm.disableSubmit = true
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
        } else {
          this.$message.warning('请选择合同类型再查看')
        }
      } else {
        let _p = '/config/admin/queryParamByRange?contractTemplateType=' + this.contractVal
        getAction(_p)
          .then((res) => {
            if (res.status.statusCode == 0) {
              this.dataSource = res.result
            } else {
              this.$message.warning(res.status.statusReason)
            }
          })
          .then((res) => {
            console.log(res)
            let _p = '/config/admin/queryContractParam?contractTemplateNo=' + this.parameterVal
            getAction(_p).then((res) => {
              if (res.status.statusCode == 0) {
                this.selectData = res.result
                this.selectData = this.selectData.concat(this.contractData)
                this.dataSource.map((v) => {
                  this.contractData.map((v1) => {
                    if (v.contractParamNo == v1.contractParamNo && !v1.deleteFlag) {
                      v.select = true
                    }
                  })
                })
                console.log(1)
              } else {
                this.$message.warning(res.status.statusReason)
              }
              console.log(2)
              console.log(this.dataSource)
              this.$refs.parameterForm.edit(this.dataSource, '3', this.parameterVal)
              this.$refs.parameterForm.title = '合同参数详细'
              this.$refs.parameterForm.disableSubmit = true
            })
          })
      }
    },
    clickProject(v) {
      console.log(v)
      window.open(v.fileUrl)
    },
    handleDelete(v) {
      this.fileListShow = true
      this.fileList = []
    },
    handleCancel() {
      this.fileListShow = false
      this.fileList = []
      this.close()
    },
    checkData(rule, value, callback) {
      console.log(value)
      if (value) {
        if (/^[\u4e00-\u9fa5]+$/.test(value) && value.length <= 16 && value.length >= 4) {
          callback()
        } else {
          callback(new Error('请输入4-16个汉字的合同模板名称!'))
        }
      }
      callback()
    },
  },
}
</script>
<style>
.scoped-contract .uploadVerify label::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
.scoped-contract .hoverShow {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}
.scoped-contract .ant-upload-list {
  display: none;
}
.scoped-contract .hoverEvent {
  cursor: pointer;
}
.scoped-contract .uploadVerify {
  height: 60px;
}
</style>