<template>
|
<div class="search-form">
|
<CommForm
|
:inline="true"
|
:list="formList"
|
@updateValue="updateValue"
|
@buttonAction="buttonAction"
|
ref="form"
|
:formValues="formValues"
|
:formRules="formRules"
|
:buttons="formButtons"
|
:isShowAll="isShowAll"
|
formType="search"
|
></CommForm>
|
|
<div class="middle-button" v-if="isEdit">
|
<el-button
|
style="margin-bottom:20px"
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="small"
|
@click="addRecord"
|
>新增</el-button>
|
<el-button style="margin-bottom:20px" type="primary" size="small" @click="blukRecord">批量删除</el-button>
|
</div>
|
<CommTable
|
:loading="loading"
|
:isAutoIndex="true"
|
:list="list"
|
:maxHeight="530"
|
:header="tableHeader"
|
@doAction="doAction"
|
@updateValue="updateTableValue"
|
@handleSelectionChange="handleSelectionChange"
|
:isShowCheckbox="isShowCheckbox"
|
ref="waterTable"
|
></CommTable>
|
|
<div v-if="dialogList">
|
<el-dialog :visible.sync="dialogList" :modal-append-to-body="false" width="850px">
|
<protocolDialog
|
:title="dialogTitle"
|
:records="tempRecord"
|
:serialNo="query.serialNo"
|
@close="dialogList = false"
|
@toShowSucc="toShowSucc"
|
></protocolDialog>
|
</el-dialog>
|
</div>
|
|
<Dialog
|
v-model="isShowDel"
|
title="删除确认"
|
:buttons="[{ text: '取消' }, { text: '确定', type: 'primary' }]"
|
@handleClick="clickDel"
|
:contentText="`请确认是否需要删除该数据 ?`"
|
></Dialog>
|
<input type="file" id="uploadFiles" style="display:none" @change="uploadList" />
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations } from 'vuex'
|
import CommForm from '@/components/CommForm'
|
import CommTable from '@/components/CommTable'
|
import Dialog from '@/components/Dialog'
|
import protocolDialog from '@/components/tabsLoad/protocolDialog'
|
|
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' // 上传
|
import downloadFile from '@/controller/downloadFile' // 上传
|
|
const normalButtons = [
|
{ text: '上传文件', prop: 'upLoadButton' },
|
{ text: '下载文件', prop: 'downLoadButton' },
|
{ text: '修改', prop: 'editButton' },
|
{ text: '删除', prop: 'deleteButton' },
|
]
|
|
// 详情和审核阶段仅展示该按钮
|
const nonApplyButton = [{ text: '下载文件', prop: 'downLoadButton' }]
|
|
export default {
|
name: 'protocolImg',
|
components: {
|
CommForm,
|
CommTable,
|
protocolDialog,
|
Dialog,
|
},
|
props: {
|
conf: {
|
type: Object,
|
default: () => ({}),
|
},
|
initValue: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
isShowDel: false,
|
formList: [],
|
formRules: {},
|
tableHeader: [],
|
formButtons: [
|
{ text: '重置', type: 'default' },
|
{ text: '搜索' },
|
{ text: '展开', type: 'fold' },
|
],
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 1000000,
|
},
|
model: null,
|
productModel: null,
|
dimensionsModel: null,
|
uploadFileModel: null,
|
downloadFileModel: null,
|
isShowAll: false,
|
list: [],
|
listBackUp: [],
|
tempList: [], // 存放每次手动的搜索结果
|
tempRecord: {},
|
dialogList: false,
|
dialogTitle: '',
|
delArr: [],
|
productNameOptions: [],
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { isEdit, initValue } = this
|
const { query } = this.$route
|
this.query = query
|
const model = loanOrgImageList()
|
const tabList = model.getTableList()
|
this.formList = model.getFormList(initValue)
|
this.formRules = model.getFormRules()
|
|
this.tableHeader = tabList
|
// ? tabList
|
// : tabList.filter(({ type }) => type !== 'buttons')
|
this.model = model
|
this.productModel = queryProductList()
|
this.dimensionsModel = queryDimenList()
|
this.uploadFileModel = uploadFile()
|
this.downloadFileModel = downloadFile()
|
|
this.setSelectOptions()
|
this.getList()
|
},
|
setSelectOptions() {
|
const { formList } = this
|
formList.forEach(({ name }) => {
|
if (name === 'productId') {
|
this.queryProductList(name)
|
}
|
if (name === 'functionIdArray') {
|
this.queryCodeValueList(name, { codeNo: 'ImageFunctionType' })
|
}
|
if (name === 'documentType') {
|
this.queryCodeValueList(name, { codeNo: 'ImageDocumentType' })
|
}
|
if (name === 'borrowerType') {
|
this.queryCodeValueList(name, { codeNo: 'ORG_IMAGE_BORROWER_TYPE' })
|
}
|
})
|
},
|
|
async queryProductList(name, info = {}) {
|
const { productModel, dimensionsModel } = this
|
const { list } = await productModel.request({ ...info, hasAll: '01' })
|
this.productNameOptions = list
|
if (name === 'productId') {
|
this.updateValue(name, { options: list }, false)
|
this.updateValue(
|
'dimensionsCodeArray',
|
{ options: [], value: [] },
|
false
|
)
|
}
|
if (name === 'dimensionsCodeArray') {
|
const { list } = await dimensionsModel.request({ productid: info })
|
this.updateValue(name, { options: list })
|
}
|
},
|
|
async queryCodeValueList(name, info = {}) {
|
const tempModel = queryCodeValueList()
|
const { list } = await tempModel.request(info)
|
this.updateValue(name, { options: list })
|
},
|
|
async getList() {
|
this.loading = true
|
const { model, formValues, query, pageInfo } = this
|
const { serialNo: relativeSerialNo, operation } = query
|
const res = await model.request({
|
...formValues,
|
...pageInfo,
|
relativeSerialNo,
|
})
|
this.loading = false
|
const { list = [] } = res
|
this.list = list.map((item) => ({
|
...item,
|
action: {
|
// 当前操作为修改/新增/变更申请operation才为'add',其他操作为空
|
buttons: operation === 'add' ? normalButtons : nonApplyButton,
|
},
|
}))
|
this.listBackUp = [...this.list]
|
},
|
|
blukRecord() {
|
const { delArr } = this
|
delArr.forEach((item) => {
|
this.list.splice(0, 1)
|
})
|
this.listBackUp = [...this.list]
|
},
|
|
// 表单按钮事件处理
|
buttonAction(id) {
|
if (id === 0) {
|
this.resetForm()
|
}
|
if (id === 1) {
|
this.resetList()
|
}
|
if (id === 2) {
|
const { isShowAll } = this
|
this.isShowAll = !isShowAll
|
}
|
},
|
|
resetList() {
|
this.pageInfo.currentPage = 1
|
const { query } = this
|
const { operation } = query
|
operation === 'detail' ? this.getList() : this.forntSearch()
|
},
|
|
forntSearch() {
|
this.tempList = []
|
let { formValues, res = [], listBackUp } = this
|
const isValue = Object.values(formValues).every(
|
(val) => val === '' || val.length === 0
|
)
|
// console.log(isValue)
|
if (isValue) {
|
res = [...listBackUp]
|
} else {
|
for (let key in formValues) {
|
if (formValues[key].length > 0) {
|
res = this.filterTable(key, formValues[key])
|
}
|
}
|
}
|
this.list = [...res]
|
},
|
|
filterTable(key, value) {
|
// 多选时搜索字段包含Array
|
if (key.includes('Array')) {
|
key = key.slice(0, key.indexOf('Array'))
|
}
|
// console.log(key, value)
|
const { listBackUp, tempList } = this
|
// console.log(tempList)
|
// console.log(listBackUp)
|
if (tempList.length === 0) {
|
this.tempList = listBackUp.filter((item) => {
|
// console.log(item[key])
|
// 多选时为数组
|
if (Array.isArray(value)) {
|
return value.includes(item[key])
|
}
|
return value === item[key]
|
})
|
} else {
|
// console.log(tempList,key,value)
|
// 取前一次的搜索结果进行查询
|
this.tempList = tempList.filter((item) => {
|
// console.log(item[key],'--',value)
|
// 多选时为数组
|
if (Array.isArray(value)) {
|
return value.includes(item[key])
|
}
|
return value === item[key]
|
})
|
}
|
return this.tempList
|
},
|
|
resetForm() {
|
const { model } = this
|
this.formList = model.getFormList()
|
this.setSelectOptions()
|
},
|
|
addRecord() {
|
this.dialogList = true
|
this.dialogTitle = '0'
|
this.tempRecord = {}
|
},
|
doAction(item, record, index) {
|
const { prop } = item
|
this.currentIndex = index
|
this.buttonProp = prop
|
this.tempRecord = record
|
|
// 删除
|
if (prop === 'deleteButton') {
|
this.isShowDel = true
|
}
|
// 修改
|
if (prop === 'editButton') {
|
// console.log(record)
|
this.dialogTitle = '1'
|
this.dialogList = true
|
}
|
// 上传
|
if (prop === 'upLoadButton') {
|
this.toUpLoad()
|
}
|
// 下载
|
if (prop === 'downLoadButton') {
|
this.toDown()
|
}
|
},
|
|
// 上传
|
async toUpLoad() {
|
document.getElementById('uploadFiles').click()
|
},
|
|
async uploadList() {
|
const { currentIndex, tempRecord, list, uploadFileModel, query } = this
|
const { serialNo = '' } = query
|
const file = document.getElementById('uploadFiles').files[0]
|
const { name } = file
|
this.loading = true
|
const { fileSerialNo } = await uploadFileModel.request({
|
serialNo,
|
file,
|
})
|
this.loading = false
|
this.$message.success('上传成功')
|
// 上传成功后重新置空,否则在名字相同的情况下不会再触发change事件
|
document.getElementById('uploadFiles').value = ''
|
// console.log(document.getElementById('uploadFiles').value)
|
// console.log(fileSerialNo)
|
this.$set(list, currentIndex, {
|
...tempRecord,
|
example: name,
|
fileSerialNo,
|
})
|
const { mark = '', serialNo: tempSerialNo } = this.list[currentIndex]
|
if (mark) {
|
// 新增
|
const markIndex = this.listBackUp.findIndex(
|
(item) => item.mark === mark
|
)
|
this.listBackUp.splice(markIndex, 1, this.list[currentIndex])
|
} else {
|
// 修改
|
const serialNoIndex = this.listBackUp.findIndex(
|
(item) => item.serialNo === tempSerialNo
|
)
|
|
this.listBackUp.splice(serialNoIndex, 1, this.list[currentIndex])
|
// console.log(this.listBackUp[serialNoIndex])
|
}
|
// this.listBackUp = [...this.list]
|
console.log(currentIndex, tempRecord, list)
|
},
|
|
// 下载
|
async toDown() {
|
const { downloadFileModel, tempRecord } = this
|
const { fileSerialNo } = tempRecord
|
await downloadFileModel.request({ serialNo: fileSerialNo })
|
this.$message.success('下载成功')
|
// console.log(tempRecord)
|
},
|
|
// 批量删除
|
handleSelectionChange(checkedRecords, val) {
|
const { list } = this
|
this.delArr = []
|
checkedRecords.forEach((item, index) => {
|
this.delArr.push(index)
|
})
|
console.log(this.delArr)
|
console.log(checkedRecords, val)
|
},
|
// 更新表单数据
|
updateValue(index, info, flg = true) {
|
// console.log(index, info, flg)
|
const { formList } = this
|
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.queryProductList('dimensionsCodeArray', info.value)
|
}
|
if (!flg) {
|
}
|
}
|
},
|
|
updateTableValue() {
|
const { list } = this
|
const { name } = inputItem
|
const listItem = list[recordIndex]
|
const key = Object.keys(listItem).find((k) => k === name)
|
this.$set(list, recordIndex, {
|
...listItem,
|
[key]: { ...listItem[key], value: val },
|
})
|
this.listBackUp = [...this.list]
|
},
|
toShowSucc(data, options, selectDesc) {
|
console.log('data:',data)
|
// console.log(options)
|
// console.log(selectDesc)
|
this.dialogList = false
|
const { list, currentIndex = 0, dialogTitle, productNameOptions } = this
|
const {
|
productId,
|
dimensionsCode,
|
documentType,
|
entSignRequirement,
|
functionId,
|
legalSignRequirement,
|
customerSignRequirement,
|
signRequirement,
|
borrowerType
|
} = data
|
const {
|
DimenOptions,
|
legalOptions,
|
signatureOptions,
|
fileTypsOptions,
|
funcOptions,
|
borrowerTypeOptions
|
} = options
|
// 产品名称
|
const { label } = productNameOptions.find(
|
({ value }) => productId === value
|
)
|
console.log('productName:', label)
|
// 维度名称
|
data.dimensionsName = DimenOptions.find(
|
({ value }) => dimensionsCode === value
|
).label
|
console.log(selectDesc.dimensionsCodeDesc)
|
// 功能名称
|
data.functionName = funcOptions.find(
|
({ value }) => functionId === value
|
).label
|
// 文件类型
|
selectDesc.documentTypeDesc = fileTypsOptions.find(
|
({ value }) => documentType === value
|
).label
|
//借款人类型
|
selectDesc.borrowerTypeName = borrowerTypeOptions.find(
|
({ value }) => borrowerType === value
|
).label
|
// 签章要求
|
selectDesc.signRequirementDesc = legalOptions.find(
|
({ value }) => signRequirement === value
|
).label
|
// 客户签章要求
|
if (customerSignRequirement) {
|
selectDesc.customerSignRequirementDesc = signatureOptions.find(
|
({ value }) => customerSignRequirement === value
|
).label
|
}
|
// 法人签章要求
|
if (legalSignRequirement) {
|
selectDesc.legalSignRequirementDesc = signatureOptions.find(
|
({ value }) => legalSignRequirement === value
|
).label
|
}
|
// 公司签章要求
|
if (entSignRequirement) {
|
selectDesc.entSignRequirementDesc = signatureOptions.find(
|
({ value }) => entSignRequirement === value
|
).label
|
}
|
|
if (dialogTitle === '0') {
|
this.list.push({
|
...data,
|
...selectDesc,
|
productName: label,
|
action: {
|
buttons: normalButtons,
|
},
|
})
|
} else {
|
this.$set(list, currentIndex, {
|
...data,
|
...selectDesc,
|
productName: label,
|
action: {
|
buttons: normalButtons,
|
},
|
})
|
}
|
this.listBackUp = [...this.list]
|
console.log('list:',this.list, currentIndex)
|
},
|
|
clickDel(index) {
|
if (index === 0) {
|
this.isShowDel = false
|
} else {
|
this.toDel()
|
}
|
},
|
// 删除操作
|
toDel() {
|
const { currentIndex, list } = this
|
const delIndex = list.findIndex((item, index) => index === currentIndex)
|
this.list.splice(delIndex, 1)
|
this.listBackUp = [...this.list]
|
this.isShowDel = false
|
console.log('删除成功')
|
},
|
|
submit() {
|
// console.log(this.list)
|
// this.setLoanOrgImageListSubmitReqs(this.list)
|
// listBackUp是除去搜索操作后所存储的数据
|
this.setLoanOrgImageListSubmitReqs(this.listBackUp)
|
},
|
|
...mapMutations(['setLoanOrgImageListSubmitReqs']),
|
},
|
computed: {
|
isEdit() {
|
const { conf } = this
|
return conf.edit === 'Y'
|
},
|
formValues() {
|
const { model, formList } = this
|
return model.getFormValues(formList)
|
},
|
isShowCheckbox() {
|
const { query } = this
|
const { operation } = query
|
return operation === 'add' ? true : false
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
