Files
laws-sinotruk-client/src/views/businessSupport/standardizationActivity/modules/StandardizationActivityDrawer.vue
T
2024-03-05 11:01:55 +08:00

352 lines
12 KiB
Vue

<template>
<a-drawer
:title="title"
:width="width"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
:maskClosable="false"
destroyOnClose
class="custom-drawer-style">
<div class="custom-drawer-style-scroll">
<a-spin :spinning="confirmLoading">
<!--基础信息-->
<div class="header-text">{{ $t('basicInformation') }}</div>
<a-form :form="form">
<!--上级节点-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('businessSupport.standardizationActivity.parentNode')">
<a-input :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.parentNode')"
:maxLength="50"
disabled
v-decorator="['supperName', validatorRules.supperName]" />
</a-form-item>
<!--节点类型-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('businessSupport.standardizationActivity.nodeTypes')">
<j-dict-select-tag :placeholder="$t('pleaseSelect') + $t('businessSupport.standardizationActivity.nodeTypes')"
v-decorator="['standardizationType', validatorRules.standardizationType]"
disabled
dict-code="standardization_type" />
</a-form-item>
<!--编号-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('number')">
<a-input :placeholder="$t('pleaseEnter') + $t('number')"
:maxLength="50"
:disabled="disabled"
v-decorator="['num', validatorRules.num]" />
</a-form-item>
<!--名称-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('name')">
<a-input :placeholder="$t('pleaseEnter') + $t('name')"
:maxLength="50"
:disabled="disabled"
v-decorator="['name', validatorRules.name]" />
</a-form-item>
<!--标准化工作领域-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('businessSupport.standardizationActivity.standardizationWorkArea')">
<a-input :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.standardizationWorkArea')"
:maxLength="50"
:disabled="disabled"
v-decorator="['workingArea', validatorRules.workingArea]" />
</a-form-item>
<!--备注-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('remarks')">
<a-textarea :placeholder="$t('pleaseEnter') + $t('remarks')"
:maxLength="500"
:rows="4"
:disabled="disabled"
v-decorator="['notes', validatorRules.notes]" />
</a-form-item>
</a-form>
<!--联络人联系方式-->
<div class="header-text">{{ $t('businessSupport.standardizationActivity.contactPersonContactInformation') }}</div>
<contact-table :data-source="contactDataSource"
:disabled="disabled"
:need-row-selection="!disabled"
@ok="contactModalOk" />
<!--集团参与情况-->
<div class="header-text">{{ $t('businessSupport.standardizationActivity.groupParticipation') }}</div>
<group-table ref="groupTable" :data-source="groupDataSource" :disabled="disabled" :need-row-selection="!disabled" @ok="groupModalOk" />
<!--支付信息-->
<div class="header-text">{{ $t('businessSupport.standardizationActivity.paymentInfo') }}</div>
<payment-table ref="paymentTable"
:data-source="paymentDataSource"
:disabled="disabled"
:need-row-selection="!disabled"
@ok="paymentModalOk" />
<!--参会记录-->
<div class="header-text">{{ $t('businessSupport.standardizationActivity.attendanceRecord') }}</div>
<meeting-table ref="meetingTable"
:data-source="meetingDataSource"
:disabled="disabled"
:need-row-selection="!disabled"
@ok="meetingModalOk" />
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn">
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
<a-button type="primary" @click="handleOk" v-if="!disabled">{{ $t('determine') }}</a-button>
</div>
</a-drawer>
</template>
<script>
import { StandardizedActivityType } from '../../../../enums/commonEnums'
import JTable from '../../../../components/jero/JTable'
import ContactModal from './ContactModal'
import GroupModal from './GroupModal'
import PaymentModal from './PaymentModal'
import MeetingModal from './MeetingModal'
import { addNode, editNode, queryTableDataById } from '../../../../api/businessSupport'
import ContactTable from '../tables/ContactTable'
import GroupTable from '../tables/GroupTable'
import PaymentTable from '../tables/PaymentTable'
import MeetingTable from '../tables/MeetingTable'
export default {
name: 'StandardizationActivityDrawer',
components: {
JTable,
ContactModal,
GroupModal,
PaymentModal,
MeetingModal,
ContactTable,
GroupTable,
PaymentTable,
MeetingTable
},
data () {
return {
title: this.$t('newlyAdded'),
width: 800,
visible: false,
confirmLoading: false,
model: {},
form: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
// 上级节点
supperName: {
rules: [{
required: false,
message: this.$t('pleaseEnter') + this.$t('businessSupport.standardizationActivity.parentNode')
}],
validateTrigger: 'blur'
},
// 节点类型
standardizationType: {
rules: [{
required: false,
message: this.$t('pleaseEnter') + this.$t('businessSupport.standardizationActivity.nodeTypes')
}],
validateTrigger: 'blur'
},
// 编号
num: {
rules: [{
required: true,
message: this.$t('pleaseEnter') + this.$t('number')
}],
validateTrigger: 'blur'
},
// 名称
name: {
rules: [{
required: true,
message: this.$t('pleaseEnter') + this.$t('name')
}],
validateTrigger: 'blur'
},
// 标准化工作领域
workingArea: {
rules: [{
required: true,
message: this.$t('pleaseEnter') + this.$t('businessSupport.standardizationActivity.standardizationWorkArea')
}],
validateTrigger: 'blur'
},
// 备注
notes: {
rules: [{
required: false,
message: this.$t('pleaseEnter') + this.$t('remarks')
}]
}
},
// 联络人联系方式表格
contactDataSource: [],
// 集团参与情况
groupDataSource: [],
// 支付信息
paymentDataSource: [],
// 参会记录
meetingDataSource: [],
uploadTable: {}, // 上传文件
disabled: false
}
},
methods: {
add (record) {
this.title = this.$t('newlyAdded')
this.visible = true
this.disabled = false
switch (record.level) {
case 1:
record.standardizationType = StandardizedActivityType.secondLevelBidCommittee.value
break
case 2:
record.standardizationType = StandardizedActivityType.workingTeam.value
break
case 3:
record.standardizationType = StandardizedActivityType.fourLevelBiddingCommittee.value
break
default:
break
}
this.model = Object.assign({}, record)
this.$nextTick(() => {
this.form.setFieldsValue(this.model)
})
},
edit (id) {
this.title = this.$t('edit')
this.visible = true
this.disabled = false
this.getDetailData(id)
},
view (id) {
this.title = this.$t('view')
this.visible = true
this.disabled = true
this.getDetailData(id)
},
getDetailData (id) {
this.confirmLoading = true
// 获取详情数据
queryTableDataById({ id }).then(res => {
if (res.success) {
const result = res.result || {}
// 基础信息
this.model = Object.assign({}, result.lawsStandardization || {})
this.$nextTick(() => {
this.form.setFieldsValue(this.model)
})
// 联络人联系方式
this.contactDataSource = result.standardizationLiaisonList
// 集团参与情况
this.groupDataSource = result.standardizationGroupList
// 支付信息
this.paymentDataSource = result.standardizationPayments
// 参会记录
this.meetingDataSource = result.standardizationMeetings
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
},
handleOk () {
const groupValidateFlag = this.$refs.groupTable.validateTableData()
const paymentValidateFlag = this.$refs.paymentTable.validateTableData()
const meetingValidateFlag = this.$refs.meetingTable.validateTableData()
if (!groupValidateFlag || !paymentValidateFlag || !meetingValidateFlag) {
return
}
this.form.validateFields((errors, values) => {
if (!errors) {
const formData = {
lawsStandardization: Object.assign(this.model, values), // 基础信息
standardizationLiaisonList: this.contactDataSource, //联络人联系方式
standardizationGroupList: this.groupDataSource, // 集团参与情况
standardizationPayments: this.paymentDataSource, // 支付记录
standardizationMeetings: this.meetingDataSource // 参会记录
}
this.confirmLoading = true
let submitFunc
if (this.model.id) {
submitFunc = editNode
} else {
submitFunc = addNode
}
submitFunc(formData).then(res => {
if (res.success) {
this.$message.success(res.message)
this.$emit('ok')
this.close()
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.form.resetFields()
this.model = {}
this.contactDataSource = []
this.groupDataSource = []
this.paymentDataSource = []
this.meetingDataSource = []
},
contactModalOk (data) {
this.contactDataSource = JSON.parse(JSON.stringify(data))
},
groupModalOk (data) {
this.groupDataSource = JSON.parse(JSON.stringify(data))
},
paymentModalOk (data) {
this.paymentDataSource = JSON.parse(JSON.stringify(data))
},
meetingModalOk (data) {
this.meetingDataSource = JSON.parse(JSON.stringify(data))
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.header-text {
margin-top: 30px;
margin-bottom: 15px;
}
.header-text:first-child {
margin-top: 0;
}
</style>