<template>
|
<div class="search-fomr">
|
<SectionTitle :title="tableType.label"></SectionTitle>
|
<el-button
|
style="margin-bottom:20px"
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
size="small"
|
@click="addRecord"
|
v-if="isEdit"
|
>新增</el-button>
|
<CommTable
|
:loading="loading"
|
:isAutoIndex="true"
|
:list="list"
|
:maxHeight="530"
|
:header="tableHeader"
|
:total="total"
|
@doAction="doAction"
|
@updateValue="updateValue"
|
ref="waterTable"
|
></CommTable>
|
|
<Dialog
|
v-model="isShowDel"
|
title="删除确认"
|
:buttons="[{ text: '取消' }, { text: '确定', type: 'primary' }]"
|
@handleClick="clickDel"
|
:contentText="`请确认是否需要删除该数据 ?`"
|
></Dialog>
|
</div>
|
</template>
|
|
<script>
|
import CommTable from '@/components/CommTable'
|
import SectionTitle from '@/components/SectionTitle'
|
import Dialog from '@/components/Dialog'
|
|
import queryFundUnitAssetAllocationList from '@/controller/queryFundUnitAssetAllocationList' // 功能约束 - 功能子流程定义
|
import queryCodeValueList from '@/controller/queryCodeValueList'
|
import queryProductList from '@/controller/queryProductList'
|
import queryDimenList from '@/controller/queryDimenList'
|
import getOrgList from '@/controller/getOrgList'
|
import getAllCityAreaList from '@/controller/getAllCityAreaList'
|
import { mapMutations, mapState } from 'vuex'
|
|
const normalButtons = [
|
{ text: '修改', prop: 'updateButton' },
|
{ text: '删除', prop: 'deleteButton' },
|
]
|
|
const addButtons = [
|
{ text: '取消', prop: 'cancleButton' },
|
{ text: '保存', prop: 'addButton' },
|
]
|
|
const editButtons = [
|
{ text: '取消', prop: 'cancleButton' },
|
{ text: '保存', prop: 'submitButton' },
|
]
|
|
export default {
|
components: {
|
CommTable,
|
Dialog,
|
SectionTitle,
|
},
|
props: {
|
conf: {
|
type: Object,
|
default: () => ({}),
|
},
|
tableType: { // {"serialNo":"2104221119259470001","assetType":"01"}
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
currentIndex: '', // 操作当前行的下标
|
total: 0,
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
},
|
loading: false,
|
isDoingAdd: false, // 是否是新增操作
|
isShowDel: false,
|
tableHeader: [],
|
list: [],
|
updateList: [], // 更新的列
|
model: null,
|
selectModel: null,
|
productModel: null,
|
dimensionModel: null,
|
orgListModel: null,
|
cityModel: null,
|
productOptions: [],
|
dimensionOptions: [],
|
assetsListOptions: [],
|
query: '',
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { $route, isEdit, tableType } = this
|
const { query } = $route
|
const { value } = tableType
|
this.assetType = value
|
this.query = query
|
let model = queryFundUnitAssetAllocationList({ value })
|
this.model = model
|
this.selectModel = queryCodeValueList()
|
this.productModel = queryProductList()
|
this.dimensionModel = queryDimenList()
|
this.orgListModel = getOrgList()
|
this.cityModel = getAllCityAreaList()
|
const tabList = model.getTableList()
|
this.tableHeader = isEdit
|
? tabList
|
: tabList.filter(({ type }) => type !== 'buttons')
|
this.getList()
|
this.selectOptions()
|
},
|
|
// 获取数据
|
async getList() {
|
const { model, query, tableType, assestConfigListSerialNo = '' } = this
|
const { serialNo = '', isInfo } = query
|
const { value } = tableType
|
this.loading = true
|
// assestConfigListSerialNo && this.$message.warning(assestConfigListSerialNo)
|
const res = await model.request({
|
serialNo: assestConfigListSerialNo,
|
assetType: value,
|
})
|
this.loading = false
|
const { list } = res
|
this.list = res.list.map((item) => ({
|
...item,
|
action: {
|
buttons: normalButtons,
|
},
|
}))
|
// 初始化数据
|
const data = this.list.length ? [...this.list] : null
|
isInfo === '0' && this.setFundUnitAssetAllocationSubmitReqs(data)
|
// this.$emit('sendTable', this.list)
|
},
|
|
async selectOptions() {
|
const {
|
selectModel,
|
productModel,
|
orgListModel,
|
cityModel,
|
tableType,
|
} = this
|
const { value } = tableType
|
// const selectList = await selectModel.request({ codeNo: 'SubFlowType' })
|
// this.assetsListOptions = [...selectList.list]
|
let { list } = await productModel.request({})
|
list = [
|
...list,
|
{
|
label: '适用所有产品',
|
value: '*ALL',
|
},
|
]
|
this.productOptions = [...list]
|
if (value === '02') {
|
const { list } = await selectModel.request({
|
codeNo: 'EducationExperience',
|
})
|
this.assetsListOptions = [...list]
|
} else if (value === '04') {
|
this.assetsListOptions = [
|
{
|
label: '月',
|
value: 'M',
|
},
|
{
|
label: '天',
|
value: 'D',
|
},
|
]
|
} else if (value === '05') {
|
const { list } = await selectModel.request({
|
codeNo: 'FundPaymentName',
|
})
|
this.assetsListOptions = [...list]
|
} else if (value === '06') {
|
const { list } = await orgListModel.request({ orgType: '01' })
|
this.assetsListOptions = [...list]
|
} else if (value === '07') {
|
// const { list } = await selectModel.request({
|
// codeNo: 'CompanyNature'
|
// })
|
// this.assetsListOptions = [...list]
|
} else if (value === '13' || value === '14') {
|
const { list } = await selectModel.request({
|
codeNo: 'CityType',
|
})
|
this.assetsListOptions = [...list]
|
} else if (value === '08' || value === '09') {
|
const { list } = await cityModel.request({
|
queryFlag: '02',
|
})
|
this.assetsListOptions = [...list]
|
} else if (value === '11') {
|
const { list } = await selectModel.request({
|
codeNo: 'FundUnitRiskGrade',
|
})
|
this.assetsListOptions = [...list]
|
} else if (value === '12') {
|
const { list } = await selectModel.request({
|
codeNo: 'CompanyNature',
|
})
|
this.assetsListOptions = [...list]
|
} else if (value === '13') {
|
const { list } = await selectModel.request({
|
codeNo: 'AreaCode',
|
})
|
this.assetsListOptions = [...list]
|
}
|
},
|
|
async queryDimenList(val, inputItem, parentName, recordIndex) {
|
const { dimensionModel } = this
|
const { list } = await dimensionModel.request({ productid: val, hasAll: '01' })
|
// 只有选择所有产品时才添加
|
// if (val === '*ALL') {
|
// list = [
|
// ...list,
|
// {
|
// label: '适用所有维度',
|
// value: '*ALL'
|
// }
|
// ]
|
// }
|
this.dimensionOptions = [...list]
|
this.updateValue(val, inputItem, 'productDimensionName', recordIndex)
|
// console.log(this.dimensionOptions)
|
},
|
// 新增
|
addRecord() {
|
const { isDoingAdd, list, updateList } = this
|
if (isDoingAdd) {
|
this.$message.warning('请先提交当前新增项')
|
return false
|
}
|
const editRecord = this.getEditRecord()
|
this.tempRecord = {}
|
this.list = [editRecord, ...list]
|
this.updateList = [{}, ...updateList]
|
this.isDoingAdd = true
|
},
|
|
/**
|
* info 初始值
|
* 初始化当行输入框
|
*/
|
getEditRecord(info = {}, action = false) {
|
const {
|
tableHeader,
|
model,
|
productOptions,
|
assetsListOptions,
|
currentIndex,
|
} = this
|
const formList = model.getFormList(info)
|
const needOptionsName = [
|
'educationDesc',
|
'loanTermUnitDesc',
|
'repaymentTypeDesc',
|
'applyOrgIDDesc',
|
'cusEnterpriseDesc',
|
'workCityDesc',
|
'houseCityDesc',
|
'cusClassifyDesc',
|
'riskGradeDesc',
|
'cusEnterpriseTypeDesc',
|
'workCityTypeDesc',
|
'houseCityTypeDesc',
|
]
|
// console.log(formList)
|
return tableHeader.reduce(
|
(pre, { prop, isMoney = false }) => {
|
if (prop === 'action') {
|
pre[prop] = {
|
buttons: Object.keys(info).length > 0 ? editButtons : addButtons,
|
}
|
} else {
|
const inputItem = formList.find(({ name }) => name === prop)
|
if (inputItem.name === 'productName') {
|
inputItem.options = [...productOptions]
|
// console.log(inputItem, currentIndex)
|
if (action === 'updateButton') {
|
this.updateValue(inputItem.value, inputItem, '', currentIndex)
|
}
|
}
|
// console.log(inputItem.name)
|
if (needOptionsName.includes(inputItem.name)) {
|
inputItem.options = [...assetsListOptions]
|
}
|
if (inputItem) {
|
pre[prop] = inputItem
|
}
|
}
|
return pre
|
},
|
{ ...info }
|
)
|
},
|
|
// 取消操作
|
changeList(res) {
|
const {
|
list,
|
tempRecord,
|
updateList,
|
buttonProp,
|
currentIndex,
|
assetsListOptions,
|
productOptions,
|
dimensionOptions,
|
query,
|
tableType,
|
} = this
|
const { operation } = query
|
// buttonProp 当前点击的操作
|
let listIndex = 0
|
let updateIndex = 0
|
const applySerialno =
|
typeof tempRecord.applySerialno === 'object'
|
? tempRecord.applySerialno.value
|
: tempRecord.applySerialno
|
// 新增 数据单
|
const sequence =
|
typeof tempRecord.sequence === 'object'
|
? tempRecord.sequence.value
|
: tempRecord.sequence
|
if (applySerialno) {
|
listIndex = list.findIndex(({ serialNo: itemNo }) =>
|
typeof itemNo === 'object'
|
? itemNo.value === serialNo
|
: itemNo === serialNo
|
)
|
updateIndex = updateList.findIndex(
|
({ serialNo: itemNo }) => itemNo === serialNo
|
)
|
} else {
|
listIndex = currentIndex
|
}
|
if (res) {
|
const {
|
productName,
|
productDimensionName,
|
educationDesc,
|
loanTermUnitDesc,
|
repaymentTypeDesc,
|
applyOrgIDDesc,
|
cusEnterpriseDesc,
|
workCityDesc,
|
houseCityDesc,
|
cusClassifyDesc,
|
riskGradeDesc,
|
cusEnterpriseTypeDesc,
|
workCityTypeDesc,
|
houseCityTypeDesc,
|
} = res
|
const product = productOptions.find(
|
({ value }) => value === productName
|
)
|
const dimension = dimensionOptions.find(
|
({ value }) => value === productDimensionName
|
)
|
const { value } = tableType
|
let publicData = null
|
if (value === '02') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === educationDesc
|
)
|
res = {
|
...res,
|
educationDesc: publicData.label,
|
education: res.educationDesc,
|
}
|
} else if (value === '04') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === loanTermUnitDesc
|
)
|
res = {
|
...res,
|
loanTermUnitDesc: publicData.label,
|
loanTermUnit: res.loanTermUnitDesc,
|
}
|
} else if (value === '05') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === repaymentTypeDesc
|
)
|
res = {
|
...res,
|
repaymentTypeDesc: publicData.label,
|
repaymentType: res.repaymentTypeDesc,
|
}
|
} else if (value === '06') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === applyOrgIDDesc
|
)
|
res = {
|
...res,
|
applyOrgIDDesc: publicData.label,
|
applyOrgID: res.applyOrgIDDesc,
|
}
|
} else if (value === '07') {
|
// publicData = assetsListOptions.find(
|
// ({ value }) => value === cusEnterpriseDesc
|
// )
|
// res = {
|
// ...res,
|
// cusEnterpriseDesc: publicData.label,
|
// cusEnterprise: res.cusEnterpriseDesc
|
// }
|
} else if (value === '08') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === workCityDesc
|
)
|
res = {
|
...res,
|
workCityDesc: publicData.label,
|
workCity: res.workCityDesc,
|
}
|
} else if (value === '09') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === houseCityDesc
|
)
|
res = {
|
...res,
|
houseCityDesc: publicData.label,
|
houseCity: res.houseCityDesc,
|
}
|
} else if (value === '10') {
|
// publicData = assetsListOptions.find(
|
// ({ value }) => value === cusClassifyDesc
|
// )
|
// res = {
|
// ...res,
|
// cusClassifyDesc: publicData.label,
|
// cusClassify: res.cusClassifyDesc
|
// }
|
} else if (value === '11') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === riskGradeDesc
|
)
|
res = {
|
...res,
|
riskGradeDesc: publicData.label,
|
riskGrade: res.riskGradeDesc,
|
}
|
} else if (value === '12') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === cusEnterpriseTypeDesc
|
)
|
res = {
|
...res,
|
cusEnterpriseTypeDesc: publicData.label,
|
cusEnterpriseType: res.cusEnterpriseTypeDesc,
|
}
|
} else if (value === '13') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === workCityTypeDesc
|
)
|
res = {
|
...res,
|
workCityTypeDesc: publicData.label,
|
workCityType: res.workCityTypeDesc,
|
}
|
} else if (value === '14') {
|
publicData = assetsListOptions.find(
|
({ value }) => value === houseCityTypeDesc
|
)
|
res = {
|
...res,
|
houseCityTypeDesc: publicData.label,
|
houseCityType: res.houseCityTypeDesc,
|
}
|
}
|
res = {
|
...res,
|
productName: product.label,
|
productCode: res.productName,
|
productDimensionName: dimension.label,
|
productDimension: res.productDimensionName,
|
}
|
}
|
if (buttonProp === 'cancleButton') {
|
// 区分是新增数据的取消 还是修改数据的取消
|
if (operation === 'add') {
|
if (!this.isDoingAdd) {
|
// 值互换
|
let tempList = updateList[updateIndex]
|
tempList = {
|
...tempList,
|
productName: tempList.productCode,
|
productCode: tempList.productName,
|
productDimensionName: tempList.productDimension,
|
productDimension: tempList.productDimensionName,
|
}
|
const { value } = tableType
|
tempList = this.exchangeValue(value, tempList)
|
this.$set(list, listIndex, tempList)
|
this.updateList = updateList.filter(
|
(item, index) => index !== updateIndex
|
)
|
} else {
|
this.isDoingAdd = false
|
this.updateList = updateList.filter((item, index) => index !== 0)
|
this.list = list.filter((item, index) => index !== 0)
|
}
|
} else {
|
if (applySerialno) {
|
this.$set(list, listIndex, updateList[updateIndex])
|
this.updateList = updateList.filter(
|
(item, index) => index !== updateIndex
|
)
|
} else {
|
this.isDoingAdd = false
|
this.updateList = updateList.filter((item, index) => index !== 0)
|
this.list = list.filter((item, index) => index !== 0)
|
}
|
}
|
}
|
|
if (buttonProp === 'deleteButton') {
|
this.list = list.filter((item, index) => index !== listIndex)
|
}
|
|
if (buttonProp === 'addButton') {
|
this.updateList = updateList.filter(
|
(item, index) => index !== updateIndex
|
)
|
const { value } = tableType
|
this.$set(list, listIndex, {
|
...res,
|
assetType: value,
|
action: {
|
buttons: normalButtons,
|
},
|
})
|
this.setFundUnitAssetAllocationSubmitReqs([...this.list])
|
}
|
if (buttonProp === 'submitButton') {
|
this.updateList = updateList.filter(
|
(item, index) => index !== updateIndex
|
)
|
const { value } = tableType
|
this.$set(list, currentIndex, {
|
...res,
|
assetType: value,
|
action: {
|
buttons: normalButtons,
|
},
|
})
|
this.setFundUnitAssetAllocationSubmitReqs([...this.list])
|
}
|
|
// this.$emit('sendTable', this.list)
|
},
|
|
// 保存操作
|
// isAdd 区别是新增还是修改时的保存操作
|
async toSubmit(isAdd = false) {
|
// console.log(isAdd)
|
const { list, currentIndex } = this
|
const curr = list[currentIndex]
|
const [err, values] = this.$refs.waterTable.validate(curr)
|
// console.log(values)
|
// 存在未填数据
|
if (err) {
|
this.$message.warning(err)
|
} else {
|
// 当前放必填项已填
|
if (isAdd) {
|
// 新增
|
this.isDoingAdd = false
|
}
|
this.toCompare(values)
|
// this.changeList(values)
|
}
|
},
|
toCompare(values) {
|
// console.log(values)
|
const { proportion, minAccount = '', maxAccount = '' } = values
|
if (Number(proportion) > 100) {
|
this.$message.warning('占比输入值范围[0,100]！')
|
this.isDoingAdd = true
|
return
|
}
|
if (minAccount && maxAccount) {
|
if (Number(minAccount) > Number(maxAccount)) {
|
this.$message.warning('档次金额下限不能超过档次金额上限！')
|
this.isDoingAdd = true
|
return
|
}
|
}
|
this.changeList(values)
|
},
|
|
updateValue(val, inputItem, parentName, recordIndex = 0) {
|
const { list, tempRecord } = this
|
const { name, options = [] } = inputItem
|
const listItem = list[recordIndex]
|
const key = Object.keys(listItem).find((k) => k === name)
|
if (name === 'productName' && !parentName) {
|
// console.log(inputItem, parentName)
|
this.queryDimenList(val, inputItem, parentName, recordIndex)
|
}
|
if (parentName === 'productDimensionName') {
|
const { dimensionOptions, currentIndex } = this
|
// 置空
|
listItem[parentName].value = ''
|
listItem[parentName].options = [...dimensionOptions]
|
}
|
this.$set(list, recordIndex, {
|
...listItem,
|
[key]: { ...listItem[key], value: val },
|
})
|
},
|
|
// 修改
|
updateRecord(prop) {
|
let {
|
list,
|
tempRecord,
|
updateList,
|
query,
|
currentIndex,
|
tableType,
|
} = this
|
const { value } = tableType
|
const { operation } = query
|
// console.log(tempRecord)
|
tempRecord = {
|
...tempRecord,
|
productName: tempRecord.productCode,
|
productCode: tempRecord.productName,
|
productDimensionName: tempRecord.productDimension,
|
productDimension: tempRecord.productDimensionName,
|
}
|
tempRecord = this.exchangeValue(value, tempRecord)
|
// console.log(tempRecord, 1)
|
if (operation === 'add') {
|
this.updateList = [...updateList, { ...tempRecord }]
|
this.$set(list, currentIndex, this.getEditRecord(tempRecord, prop))
|
} else {
|
// 根据applySerialno查找是修改那一行
|
const index = list.findIndex(
|
({ applySerialno }) => applySerialno === tempRecord.applySerialno
|
)
|
this.updateList = [...updateList, { ...tempRecord }]
|
this.$set(list, index, this.getEditRecord(tempRecord, prop))
|
}
|
},
|
|
doAction(item, record, index) {
|
const { prop } = item
|
this.currentIndex = index
|
this.buttonProp = prop
|
this.tempRecord = record
|
|
// 取消
|
if (prop === 'cancleButton') {
|
this.changeList()
|
}
|
// 删除
|
if (prop === 'deleteButton') {
|
this.isShowDel = true
|
}
|
// 修改
|
if (prop === 'updateButton') {
|
this.updateRecord(prop)
|
}
|
// 保存
|
if (prop === 'submitButton') {
|
this.toSubmit()
|
}
|
// 新增
|
if (prop === 'addButton') {
|
this.toSubmit(true)
|
}
|
},
|
|
clickDel(index) {
|
if (index === 0) {
|
this.isShowDel = false
|
} else {
|
this.toDel()
|
}
|
},
|
// 删除操作
|
toDel() {
|
const { currentIndex, list } = this
|
const delIndex = list.findIndex((item, index) => index === currentIndex)
|
const assetType = list[0].assetType
|
this.list.splice(delIndex, 1)
|
this.isShowDel = false
|
// 删除操作后无数据提交，则提交表单类型
|
const submitData = (this.list && this.list.length) ? [...this.list] : assetType
|
this.setFundUnitAssetAllocationSubmitReqs(submitData)
|
this.$emit('sendTable', this.list)
|
// console.log('删除成功')
|
},
|
|
exchangeValue(value, target) {
|
if (value === '02') {
|
return {
|
...target,
|
education: target.educationDesc,
|
educationDesc: target.education,
|
}
|
} else if (value === '04') {
|
return {
|
...target,
|
loanTermUnit: target.loanTermUnitDesc,
|
loanTermUnitDesc: target.loanTermUnit,
|
}
|
} else if (value === '05') {
|
return {
|
...target,
|
repaymentType: target.repaymentTypeDesc,
|
repaymentTypeDesc: target.repaymentType,
|
}
|
} else if (value === '06') {
|
return {
|
...target,
|
applyOrgID: target.applyOrgIDDesc,
|
applyOrgIDDesc: target.applyOrgID,
|
}
|
} else if (value === '07') {
|
return target
|
// return {
|
// ...target,
|
// cusEnterprise: target.cusEnterpriseDesc,
|
// cusEnterpriseDesc: target.cusEnterprise
|
// }
|
} else if (value === '08') {
|
return {
|
...target,
|
workCity: target.workCityDesc,
|
workCityDesc: target.workCity,
|
}
|
} else if (value === '09') {
|
return {
|
...target,
|
houseCity: target.houseCityDesc,
|
houseCityDesc: target.houseCity,
|
}
|
} else if (value === '10') {
|
// return {
|
// ...target,
|
// cusClassify: target.cusClassifyDesc,
|
// cusClassifyDesc: target.cusClassify
|
// }
|
} else if (value === '11') {
|
return {
|
...target,
|
riskGrade: target.riskGradeDesc,
|
riskGradeDesc: target.riskGrade,
|
}
|
} else if (value === '12') {
|
return {
|
...target,
|
cusEnterpriseType: target.cusEnterpriseTypeDesc,
|
cusEnterpriseTypeDesc: target.cusEnterpriseType,
|
}
|
} else if (value === '13') {
|
return {
|
...target,
|
workCityType: target.workCityTypeDesc,
|
workCityTypeDesc: target.workCityType,
|
}
|
} else if (value === '14') {
|
return {
|
...target,
|
houseCityType: target.houseCityTypeDesc,
|
houseCityTypeDesc: target.houseCityType,
|
}
|
}
|
return target
|
},
|
...mapMutations(['setFundUnitAssetAllocationSubmitReqs']),
|
},
|
computed: {
|
isEdit() {
|
const { conf } = this
|
return conf.edit === 'Y'
|
},
|
...mapState({
|
assestConfigListSerialNo: (state) =>
|
state.captialUnit.assestConfigListSerialNo,
|
}),
|
},
|
// watch: {
|
// assestConfigListSerialNo(val) {
|
// if (val) {
|
// this.getList()
|
// }
|
// },
|
// },
|
}
|
</script>
|
|
<style scoped></style>
|
