<template>
|
<div class="apply-info">
|
<div class="dialog-form">
|
<p class="dialog-form-title">{{title==='0'?'新增':'修改'}}</p>
|
<div>
|
<CommForm
|
:inline="true"
|
:list="formList"
|
@updateValue="updateValue"
|
ref="editMarkForm"
|
:formValues="formValues"
|
:formRules="formRules"
|
:column="2"
|
></CommForm>
|
<div class="dialog-upload">
|
<el-upload
|
class="file-uploader"
|
:show-file-list="false"
|
:http-request="uploadFile"
|
action="customize"
|
multiple
|
>
|
<el-button size="mini">选择文件</el-button>
|
</el-upload>
|
</div>
|
</div>
|
|
<div class="dialog-form-buttons">
|
<p>
|
<el-button class="comm-button" @click="$emit('close')">关闭</el-button>
|
</p>
|
<p>
|
<el-button
|
class="comm-button"
|
type="primary"
|
@click="submitDialog"
|
>{{title==='0'?'新增':'修改'}}</el-button>
|
</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CommForm from '@/components/CommForm'
|
import loanOrgImageList from '@/controller/loanOrgImageList'
|
import queryCodeValueList from '@/controller/queryCodeValueList'
|
import queryProductList from '@/controller/queryProductList'
|
import queryDimenList from '@/controller/queryDimenList'
|
import uploadFile from '@/controller/uploadFile' // 上传
|
export default {
|
components: {
|
CommForm
|
},
|
props: {
|
title: {
|
type: String,
|
default: ''
|
},
|
serialNo: {
|
type: String,
|
default: ''
|
},
|
records: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
formList: [],
|
model: null,
|
uploadModel: null,
|
selectDesc: {},
|
file: null,
|
fileSerialNo: '',
|
DimenOptions: [], // 缓存维度名称的options
|
legalOptions: [], // 缓存法人的options
|
signatureOptions: [], // 缓存签章的options
|
fileTypsOptions: [], // 文件类型的options
|
funcOptions: [], // 功能类型的options
|
borrowerTypeOptions: [], //借款人类型的options
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { records, title } = this
|
const model = loanOrgImageList(true)
|
this.uploadModel = uploadFile()
|
this.model = model
|
|
this.formList = model.getFormList(records)
|
this.collectionsDesc()
|
this.clearDefault()
|
this.selectOptions()
|
// 修改时手动调一次
|
if (title !== '0') {
|
this.queryDimenList('dimensionsCode', this.formValues.productId)
|
this.updateValue(-1, records.example)
|
// 修改时将操作行的fileSerialNo赋值到当前弹框的fileSerialNo,否则修改操作如果未上传文件,到时fileSerialNo为空。
|
this.fileSerialNo = records.fileSerialNo
|
// console.log(this.records)
|
}
|
},
|
|
// 构造下拉框描述字段对象
|
collectionsDesc() {
|
const { formList } = this
|
formList.forEach(({ type, name }) => {
|
if (type === 'select') {
|
this.selectDesc = { ...this.selectDesc, [`${name}Desc`]: '' }
|
}
|
})
|
},
|
|
clearDefault() {
|
const { formList, batchIndex } = this
|
const exampleIndex = formList.findIndex(({ name }) => name === 'example')
|
if (exampleIndex > -1 && formList[exampleIndex].value) {
|
formList[exampleIndex].value = ''
|
}
|
},
|
|
selectOptions() {
|
const { formList } = this
|
formList.forEach(({ name }) => {
|
if (name === 'productId') {
|
this.queryProductList(name)
|
}
|
if (name === 'functionId') {
|
this.queryCodeValueList(name, { codeNo: 'ImageFunctionType' })
|
}
|
if (name === 'documentType') {
|
this.queryCodeValueList(name, { codeNo: 'ImageDocumentType' })
|
}
|
|
if (name === 'signRequirement') {
|
this.queryCodeValueList(name, { codeNo: 'ImageSignType' })
|
}
|
|
if (name === 'borrowerType') {
|
this.queryCodeValueList(name, { codeNo: 'ORG_IMAGE_BORROWER_TYPE' })
|
}
|
|
if (
|
name === 'customerSignRequirement' ||
|
name === 'legalSignRequirement' ||
|
name === 'entSignRequirement'
|
) {
|
this.queryCodeValueList(name, { codeNo: 'SignType' })
|
}
|
})
|
},
|
|
async queryProductList(name, info = {}) {
|
const tempModel = queryProductList()
|
const { list } = await tempModel.request({ ...info, hasAll: '01' })
|
this.updateValue(name, { options: list }, false)
|
// this.updateValue('dimensionsCode', { options: [], value: '' }, false)
|
},
|
|
async queryDimenList(name, info = {}, flg = true) {
|
const tempModel = queryDimenList()
|
const { list } = await tempModel.request({
|
productid: info,
|
hasAll: '01'
|
})
|
this.DimenOptions = [...list]
|
this.updateValue(name, { options: list }, flg)
|
},
|
|
async queryCodeValueList(name, info = {}) {
|
const tempModel = queryCodeValueList()
|
const { list } = await tempModel.request(info)
|
if (info.codeNo === 'SignType') {
|
this.signatureOptions = [...list]
|
}
|
if (info.codeNo === 'ImageSignType') {
|
this.legalOptions = [...list]
|
}
|
if (info.codeNo === 'ImageDocumentType') {
|
this.fileTypsOptions = [...list]
|
}
|
if (info.codeNo === 'ImageFunctionType') {
|
this.funcOptions = [...list]
|
}
|
if (info.codeNo === 'ORG_IMAGE_BORROWER_TYPE') {
|
this.borrowerTypeOptions = [...list]
|
}
|
this.updateValue(name, { options: list })
|
},
|
|
// 更新表单数据
|
updateValue(index, info, flg = true) {
|
// console.log(index, info, flg)
|
const { formList, formValues } = this
|
const { productId, dimensionsCode } = formValues
|
if (isNaN(index)) {
|
// index is name
|
index = formList.findIndex(({ name }) => name === index)
|
}
|
if (!isNaN(index) && index > -1) {
|
const preInfo = formList[index]
|
this.$set(formList, index, { ...preInfo, ...info })
|
if (flg && info.name === 'productId') {
|
this.$set(formList, index + 1, {
|
...this.formList[index + 1],
|
value: ''
|
})
|
// console.log(this.formList[index + 1],1)
|
this.queryDimenList('dimensionsCode', info.value, false)
|
}
|
// console.log(this.formValues)
|
// 修改初始化时。info为options
|
// if (Object.keys(info)[0] === 'options') {
|
// formList.forEach(item => {
|
// if (item.hasOwnProperty('descName')) {
|
// const { descName, options, value } = item
|
// console.log(options,value)
|
// const { label } = options.find(
|
// tempItem => (tempItem.value = value)
|
// )
|
// this.selectDesc[descName] = label
|
// }
|
// })
|
// }
|
// if (info.hasOwnProperty('descName')) {
|
// const { descName, options, value } = info
|
// const { label } = options.find(item => (item.value = value))
|
// this.selectDesc[descName] = label
|
// }
|
}
|
|
if (index === -1) {
|
const exampleIndex = formList.findIndex(
|
({ name }) => name === 'example'
|
)
|
if (exampleIndex > -1) {
|
this.formList[exampleIndex].value = info
|
}
|
}
|
// if (info.name === 'productId' && dimensionsCode) {
|
// this.queryDimenList('dimensionsCode', productId, false)
|
// }
|
},
|
|
async uploadFile(params) {
|
const { serialNo, uploadModel } = this
|
const { file } = params
|
const { fileSerialNo } = await uploadModel.request({
|
serialNo,
|
file
|
})
|
this.$message.success('上传成功!')
|
this.fileSerialNo = fileSerialNo
|
const { name } = file
|
const index = -1
|
this.updateValue(index, name)
|
},
|
|
// 表单按钮事件处理
|
async submitDialog() {
|
const {
|
uploadModel,
|
file,
|
formValues,
|
selectDesc,
|
serialNo,
|
fileSerialNo = '',
|
DimenOptions,
|
legalOptions,
|
signatureOptions,
|
fileTypsOptions,
|
funcOptions,
|
borrowerTypeOptions
|
} = this
|
// 用于新增时作替换操作的标记数字
|
const mark = Math.random()
|
const values = this.$refs.editMarkForm.validate()
|
if (values) {
|
const options = {
|
DimenOptions,
|
legalOptions,
|
signatureOptions,
|
fileTypsOptions,
|
funcOptions,
|
borrowerTypeOptions
|
}
|
this.$emit(
|
'toShowSucc',
|
{ ...formValues, fileSerialNo, mark },
|
options,
|
selectDesc
|
)
|
} else {
|
this.$message.warning('当前页面必填数据未填写完毕或填写数据格式错误!')
|
}
|
}
|
},
|
computed: {
|
// 表单值信息
|
formValues() {
|
const { model, formList } = this
|
if (model) {
|
return model.getFormValues(formList)
|
}
|
return {}
|
},
|
formRules() {
|
const { model, formList } = this
|
if (model) {
|
return model.getFormRules(formList)
|
}
|
return {}
|
}
|
},
|
watch: {
|
// formValues() {
|
// const { formValues, title } = this
|
// const { productId, dimensionsCode } = formValues
|
// if (productId && dimensionsCode) {
|
// // this.queryProductList('productId')
|
// this.queryDimenList('dimensionsCode', productId, false)
|
// }
|
// }
|
}
|
}
|
</script>
|
|
<style lang="postcss" scoped>
|
.dialog-form {
|
& .dialog-form-buttons {
|
display: flex;
|
justify-content: center;
|
padding: 50px 0 10px 0;
|
& p {
|
margin: 0 40px 0 0;
|
}
|
& p:last-child {
|
margin-right: 0;
|
}
|
}
|
& .dialog-upload {
|
display: flex;
|
align-content: center;
|
margin-left: 100px;
|
& .el-button {
|
color: #0081f0;
|
border-color: #0081f0;
|
}
|
& .upload {
|
color: #0081f0;
|
font-size: 12px;
|
margin-left: 20px;
|
cursor: pointer;
|
line-height: 28px;
|
}
|
}
|
}
|
</style>
|
