<template>
|
<a-modal :title="title" :width="drawerWidth" :visible="visible" @cancel="close" @ok="handleSubmit" style="overflow: auto;padding-bottom: 53px;">
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="活动名称">
|
<a-input placeholder="请输入活动名称" v-decorator="['name', validatorRules.name]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="开始时间">
|
<a-date-picker
|
style="width: 100%"
|
v-decorator="['startTime', validatorRules.startTime]"
|
placeholder="请输入开始时间"
|
format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
|
:disabled-date="disabledDate"
|
:show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
|
/>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结束时间">
|
<a-date-picker
|
style="width: 100%"
|
v-decorator="['endTime', validatorRules.endTime]"
|
placeholder="请输入结束时间"
|
format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss"
|
:disabled-date="disabledDate"
|
:show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
|
/>
|
<!--<j-date style="width: 100%" dateFormat="YYYY-MM-DD HH:mm:ss" :showTime="true" v-decorator="['endTime', validatorRules.endTime]"></j-date>-->
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构选择">
|
<j-select-depart :rootOpened="true" customReturnField="orgCode" :isMyDepart="true" v-model="orgCodes" :multi="true" />
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { postAction, putAction } from '@tievd/cube-block/lib/api/manage'
|
import moment from 'moment'
|
|
export default {
|
name: 'ActivityModal',
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
title: '操作',
|
visible: false,
|
drawerWidth: 700,
|
model: {},
|
validatorRules: {
|
name: {
|
rules: [{ required: true, message: '活动名称不能为空' }]
|
},
|
startTime: {
|
rules: [{ required: true, message: '开始时间不能为空' }]
|
},
|
endTime: {
|
rules: [{ required: true, message: '结束时间不能为空' }]
|
},
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
orgCodes: '',
|
confirmLoading: false,
|
}
|
},
|
|
methods: {
|
moment,
|
disabledDate(current) {
|
// Can not select days before today and today
|
|
return current && current < moment().startOf('day');
|
},
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
add() {
|
this.edit({})
|
},
|
edit(record) {
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
this.form.resetFields()
|
// if (record.id !== undefined) {
|
// // 新增编辑的特殊操作写在这里
|
// }
|
this.visible = true
|
this.model = Object.assign({}, record)
|
this.orgCodes = record.orgCodes;
|
this.$nextTick(() => {
|
this.form.setFieldsValue(
|
pick(this.model, 'name', 'startTime', 'endTime')
|
)
|
})
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.disableSubmit = false
|
this.model = {}
|
this.orgCodes = "";
|
},
|
handleSubmit() {
|
// 触发表单验证
|
this.form.validateFields(async (err, values) => {
|
if (!err) {
|
try {
|
this.confirmLoading = true
|
let formData = Object.assign(this.model, values)
|
if (formData.startTime >= formData.endTime) {
|
throw new Error('开始时间必须小于结束时间');
|
}
|
formData.orgCodes = this.orgCodes;
|
let res = null
|
if (!this.model.id) {
|
// 新增
|
res = await postAction('/jyz/activity/add', formData)
|
} else {
|
// 编辑
|
res = await putAction('/jyz/activity/edit', formData)
|
}
|
this.$message.success(res.message)
|
if (res.success) {
|
this.$emit('ok')
|
}
|
} catch (err) {
|
this.$message.error(err.message);
|
} finally {
|
this.confirmLoading = false
|
this.close()
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="less"></style>
|
