Files
laws-sinotruk-client/src/views/businessSupport/standardizationActivity/modules/MeetingModal.vue
T
2023-11-06 20:25:44 +08:00

127 lines
3.7 KiB
Vue

<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:maskClosable="false"
:confirmLoading="confirmLoading"
:ok-text="$t('preservation')"
:cancel-text="$t('cancel')"
@ok="handleOk"
@cancel="handleCancel">
<a-form :form="form">
<!--参会日期-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('workCenter.postMeetingManageProcess.attendanceDate')">
<j-date :placeholder="$t('pleaseSelect') + $t('workCenter.postMeetingManageProcess.attendanceDate')"
show-type="day"
date-format="YYYY-MM-DD"
v-decorator="['participationTime', validatorRules.participationTime]" />
</a-form-item>
<!--会议名称-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('workCenter.postMeetingManageProcess.meetingName')">
<a-input :placeholder="$t('pleaseEnter') + $t('workCenter.postMeetingManageProcess.meetingName')"
@change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
v-decorator="['name', validatorRules.name]" />
</a-form-item>
<!--参会人员-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('workCenter.enStandardRevision.conferee')">
<user-selection :placeholder="$t('pleaseSelect') + $t('workCenter.enStandardRevision.conferee')"
v-decorator="['personnel', validatorRules.personnel]" />
</a-form-item>
</a-form>
</j-modal>
</template>
<script>
import UserSelection from '../../../../components/selection/UserSelection'
export default {
name: 'MeetingModal',
components: { UserSelection },
data () {
return {
title: this.$t('businessSupport.standardizationActivity.attendanceRecord'),
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: {
// 参会日期
participationTime: {
rules: [{
required: true,
message: this.$t('pleaseSelect') + this.$t('workCenter.postMeetingManageProcess.attendanceDate')
}],
validateTrigger: 'change'
},
// 会议名称
name: {
rules: [{
required: true,
message: this.$t('pleaseEnter') + this.$t('workCenter.postMeetingManageProcess.meetingName')
}],
validateTrigger: 'blur'
},
// 参会人员
personnel: {
rules: [{
required: true,
message: this.$t('pleaseSelect') + this.$t('workCenter.enStandardRevision.conferee')
}],
validateTrigger: 'change'
}
}
}
},
methods: {
add () {
this.visible = true
},
view (record) {
this.visible = true
this.model = Object.assign({}, record)
this.disabled = true
this.$nextTick(() => {
this.form.setFieldsValue(this.model)
})
},
handleOk () {
this.form.validateFields((errors, values) => {
if (!errors) {
const formData = Object.assign({}, values)
this.$emit('ok', formData)
this.close()
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.model = {}
this.form.resetFields()
}
}
}
</script>
<style scoped lang="less">
</style>