iailab-plat-ui-vue3.git

潘志宝

2024-09-26 e1ff2dfdc5b7cfa04a73a508187651d342fac04b

提交 \| 用户 \| 时间
2f0aa4	1	<template>
潘	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules"
	8	label-width="120px"
	9	>
	10	<el-row>
	11	<el-col :span="12">
6badb7	12	<el-form-item label="方案编号" prop="code">
潘	13	<el-input v-model="formData.code" placeholder="请输入方案编号" />
2f0aa4	14	</el-form-item>
潘	15	</el-col>
	16	<el-col :span="12">
6badb7	17	<el-form-item label="方案名称" prop="name">
潘	18	<el-input v-model="formData.name" placeholder="请输入方案名称" />
2f0aa4	19	</el-form-item>
潘	20	</el-col>
	21	</el-row>
	22	<el-row>
	23	<el-col :span="12">
6badb7	24	<el-form-item label="触发方式" prop="triggerMethod">
潘	25	<el-select v-model="formData.triggerMethod" placeholder="请选择">
2f0aa4	26	<el-option
6badb7	27	v-for="dict in getIntDictOptions(DICT_TYPE.SCHE_TRIGGER_METHOD)"
2f0aa4	28	:key="dict.value"
潘	29	:label="dict.label"
	30	:value="dict.value"
	31	/>
	32	</el-select>
6badb7	33	</el-form-item>
潘	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="触发条件" prop="triggerCondition">
	37	<el-input v-model="formData.triggerCondition" placeholder="请输入触发条件" />
	38	</el-form-item>
	39	</el-col>
	40	</el-row>
	41	<el-row>
	42	<el-col :span="12">
	43	<el-form-item label="调整对象" prop="scheduleObj">
	44	<el-input v-model="formData.scheduleObj" placeholder="请输入调整对象" />
	45	</el-form-item>
	46	</el-col>
	47	<el-col :span="12">
	48	<el-form-item label="调整类型" prop="scheduleType">
	49	<el-input v-model="formData.scheduleType" placeholder="请输入调整类型" />
	50	</el-form-item>
	51	</el-col>
	52	</el-row>
	53	<el-row>
	54	<el-col :span="12">
	55	<el-form-item label="调整策略" prop="scheduleStrategy">
	56	<el-input v-model="formData.scheduleStrategy" placeholder="请输入调整策略 " />
	57	</el-form-item>
	58	</el-col>
	59	<el-col :span="12">
	60	<el-form-item label="调度模型" prop="modelId">
	61	<el-select v-model="formData.modelId" clearable placeholder="请选择调度模型">
2f0aa4	62	<el-option
6badb7	63	v-for="item in scheduleModelList"
潘	64	:key="item.id"
	65	:label="item.modelName"
2f0aa4	66	:value="item.id"
6badb7	67	/>
2f0aa4	68	</el-select>
潘	69
6badb7	70	</el-form-item>
潘	71	</el-col>
	72	</el-row>
	73	<el-row>
	74	<el-col :span="24">
	75	<el-form-item label="备注" prop="remark">
	76	<el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" maxlength="100"
	77	show-word-limit/>
	78	</el-form-item>
	79	</el-col>
	80	</el-row>
2f0aa4	81	</el-form>
潘	82	<template #footer>
	83	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	84	<el-button @click="dialogVisible = false">取消</el-button>
	85	</template>
	86	</Dialog>
	87	</template>
	88	<script lang="ts" setup>
	89	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
6badb7	90	import * as ScheduleSchemeApi from '@/api/model/sche/scheme'
2f0aa4	91	import { CommonStatusEnum } from '@/utils/constants'
6badb7	92	import * as ScheduleModelApi from "@/api/model/sche/model";
2f0aa4	93
6badb7	94	defineOptions({ name: 'ScheduleSchemeForm' })
2f0aa4	95
潘	96	const { t } = useI18n() // 国际化
	97	const message = useMessage() // 消息弹窗
	98	const dialogVisible = ref(false) // 弹窗的是否展示
	99	const dialogTitle = ref('') // 弹窗的标题
	100	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	101	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	102	const formData = ref({
	103	id: undefined,
	104	code: undefined,
	105	name: undefined,
	106	triggerMethod: undefined,
	107	triggerCondition: undefined,
	108	scheduleObj: undefined,
	109	scheduleType: undefined,
	110	scheduleStrategy: undefined,
	111	modelId: undefined,
	112	scheduleTime: undefined,
	113	remark: undefined,
	114	status: 0
	115	})
	116	const formRules = reactive({
	117	code: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
	118	name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
	119	})
	120	const formRef = ref() // 表单 Ref
6badb7	121	const scheduleModelList = ref([] as ScheduleModelApi.ScheduleModelVO[])
2f0aa4	122
潘	123	const addRow = function (index, rows) {
	124	let row = JSON.parse(JSON.stringify(rows[index]))
	125	rows.splice(index, 0, row)
	126	this.orderRow(rows)
	127	}
	128
	129	const deleteRow = function (index, rows) {
	130	if (!rows \|\| rows.length === 1) {
	131	message.error('不能全部删除！')
	132	return
	133	}
	134	rows.splice(index, 1)
	135	this.orderRow(rows)
	136	}
	137
	138	const orderRow = function (rows) {
	139	let modelparamorder = 0
	140	let modelparamportorder = 0
	141	rows.forEach(function (value) {
	142	if (value.modelparamportorder !== modelparamportorder) {
	143	modelparamportorder = value.modelparamportorder
	144	modelparamorder = 1
	145	}
	146	value.modelparamorder = modelparamorder
	147	modelparamorder++
	148	})
	149	}
	150
	151	/** 打开弹窗 */
	152	const open = async (type: string, id?: number) => {
	153	dialogVisible.value = true
	154	dialogTitle.value = t('action.' + type)
	155	formType.value = type
	156	resetForm()
	157	// 修改时，设置数据
	158	if (id) {
	159	formLoading.value = true
	160	try {
6badb7	161	formData.value = await ScheduleSchemeApi.getScheduleScheme(id)
2f0aa4	162	} finally {
潘	163	formLoading.value = false
	164	}
	165	}
6badb7	166	// 加载调度模型列表
潘	167	scheduleModelList.value = await ScheduleModelApi.getScheduleModelList()
2f0aa4	168	}
潘	169	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	170
	171	/** 提交表单 */
	172	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	173	const submitForm = async () => {
	174	// 校验表单
	175	if (!formRef) return
	176	const valid = await formRef.value.validate()
	177	if (!valid) return
	178	// 提交请求
	179	formLoading.value = true
	180	try {
6badb7	181	const data = formData.value as unknown as ScheduleSchemeApi.ScheduleSchemeVO
2f0aa4	182	if (formType.value === 'create') {
6badb7	183	await ScheduleSchemeApi.createScheduleScheme(data)
2f0aa4	184	message.success(t('common.createSuccess'))
潘	185	} else {
6badb7	186	await ScheduleSchemeApi.updateScheduleScheme(data)
2f0aa4	187	message.success(t('common.updateSuccess'))
潘	188	}
	189	dialogVisible.value = false
	190	// 发送操作成功的事件
	191	emit('success')
	192	} finally {
	193	formLoading.value = false
	194	}
	195	}
	196
	197	/** 重置表单 */
	198	const resetForm = () => {
	199	formData.value = {
	200	id: undefined,
	201	code: undefined,
	202	name: undefined,
	203	triggerMethod: undefined,
	204	triggerCondition: undefined,
	205	scheduleObj: undefined,
	206	scheduleType: undefined,
	207	scheduleStrategy: undefined,
	208	modelId: undefined,
	209	scheduleTime: undefined,
	210	remark: undefined,
6badb7	211	status: CommonStatusEnum.ENABLE
2f0aa4	212	}
潘	213	formRef.value?.resetFields()
	214	}
	215	</script>