<template>
|
<div class="search-form">
|
<SectionTitle :title="'出资机构清单'"></SectionTitle>
|
<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>
|
</div>
|
|
<CommTable
|
:loading="loading"
|
:isAutoIndex="true"
|
:list="list"
|
:maxHeight="530"
|
:header="tableHeader"
|
@doAction="doAction"
|
@updateValue="updateTableValue"
|
ref="waterTable"
|
></CommTable>
|
|
<div v-if="dialogList">
|
<el-dialog :visible.sync="dialogList" :modal-append-to-body="false" width="850px">
|
<OutFundCheckDialog
|
:title="dialogTitle"
|
:records="tempRecord"
|
:serialNo="query.serialNo"
|
@close="dialogList = false"
|
@toShowSucc="toShowSucc"
|
></OutFundCheckDialog>
|
</el-dialog>
|
</div>
|
|
<Dialog
|
v-model="isShowDel"
|
title="删除确认"
|
:buttons="[{ text: '取消' }, { text: '确定', type: 'primary' }]"
|
@handleClick="clickDel"
|
:contentText="`请确认是否需要删除该数据 ?`"
|
></Dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations } from 'vuex'
|
import CommForm from '@/components/CommForm'
|
import CommTable from '@/components/CommTable'
|
import SectionTitle from '@/components/SectionTitle'
|
import Dialog from '@/components/Dialog'
|
import OutFundCheckDialog from '@/components/tabsCapital/OutFundCheckDialog'
|
|
import queryFundUnitContributionOrgList from '@/controller/queryFundUnitContributionOrgList'
|
|
const normalButtons = [
|
{ text: '修改', prop: 'editButton' },
|
{ text: '删除', prop: 'deleteButton' }
|
]
|
|
export default {
|
name: 'protocolImg',
|
components: {
|
CommForm,
|
CommTable,
|
OutFundCheckDialog,
|
Dialog,
|
SectionTitle
|
},
|
props: {
|
conf: {
|
type: Object,
|
default: () => ({})
|
},
|
initValue: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
loading: false,
|
isShowDel: false,
|
tableHeader: [],
|
model: null,
|
list: [],
|
tempRecord: {},
|
dialogList: false,
|
dialogTitle: ''
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
const { isEdit, initValue } = this
|
const { query } = this.$route
|
this.query = query
|
const model = queryFundUnitContributionOrgList()
|
const tabList = model.getTableList()
|
this.formList = model.getFormList(initValue)
|
this.formRules = model.getFormRules()
|
|
this.tableHeader = isEdit
|
? tabList
|
: tabList.filter(({ type }) => type !== 'buttons')
|
this.model = model
|
|
this.getList()
|
},
|
|
async getList() {
|
this.loading = true
|
const { model, query } = this
|
const { serialNo = '' } = query
|
const res = await model.request({
|
serialNo
|
})
|
this.loading = false
|
const { list = [] } = res
|
this.list = list.map(item => ({
|
...item,
|
action: {
|
buttons: normalButtons
|
}
|
}))
|
this.listBackUp = [...this.list]
|
},
|
|
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
|
}
|
},
|
|
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) {
|
this.dialogList = false
|
const { list, currentIndex = 0, dialogTitle } = this
|
const { orgTypeOptions, distributionOptions } = options
|
const { orgType, incomeDistributionMode } = data
|
const orgTypeDesc = orgTypeOptions.find(({ value }) => value === orgType)
|
.label
|
|
const incomeDistributionModeDesc = distributionOptions.find(
|
({ value }) => value === incomeDistributionMode
|
).label
|
if (dialogTitle === '0') {
|
this.list.push({
|
...data,
|
orgTypeDesc,
|
incomeDistributionModeDesc,
|
action: {
|
buttons: normalButtons
|
}
|
})
|
} else {
|
this.$set(list, currentIndex, {
|
...data,
|
orgTypeDesc,
|
incomeDistributionModeDesc,
|
action: {
|
buttons: normalButtons
|
}
|
})
|
}
|
this.listBackUp = [...this.list]
|
console.log(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.setFundUnitContributionOrgSubmitReqs(this.list)
|
},
|
|
...mapMutations(['setFundUnitContributionOrgSubmitReqs'])
|
},
|
computed: {
|
isEdit() {
|
const { conf } = this
|
return conf.edit === 'Y'
|
},
|
formValues() {
|
const { model, formList } = this
|
return model.getFormValues(formList)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
</style>
|
