iailab-plat-ui-vue3.git

潘志宝

2024-09-26 e1ff2dfdc5b7cfa04a73a508187651d342fac04b

提交 \| 用户 \| 时间
2f0aa4	1	<template>
6badb7	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
2f0aa4	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">
	12	<el-form-item label="模型编号" prop="modelCode">
	13	<el-input v-model="formData.modelCode" placeholder="请输入模型编号" />
	14	</el-form-item>
	15	</el-col>
	16	<el-col :span="12">
	17	<el-form-item label="模型名称" prop="modelName">
	18	<el-input v-model="formData.modelName" placeholder="请输入模型名称" />
	19	</el-form-item>
	20	</el-col>
	21	</el-row>
	22	<el-row>
	23	<el-col :span="12">
	24	<el-form-item label="模型类型" prop="modelType">
6badb7	25	<el-select v-model="formData.modelType" placeholder="请选择">
潘	26	<el-option
8ea580	27	v-for="dict in getStrDictOptions(DICT_TYPE.SCHE_MODEL_TYPE)"
6badb7	28	:key="dict.value"
潘	29	:label="dict.label"
	30	:value="dict.value"
	31	/>
	32	</el-select>
2f0aa4	33	</el-form-item>
潘	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="调用方式" prop="invocation">
6badb7	37	<el-select v-model="formData.invocation" placeholder="请选择">
潘	38	<el-option
8ea580	39	v-for="dict in getStrDictOptions(DICT_TYPE.SCHE_MODEL_INVOCATION)"
6badb7	40	:key="dict.value"
潘	41	:label="dict.label"
	42	:value="dict.value"
	43	/>
	44	</el-select>
2f0aa4	45	</el-form-item>
潘	46	</el-col>
	47	</el-row>
	48	<el-row>
	49	<el-col :span="24">
	50	<el-form-item label="类名" prop="className">
	51	<el-input v-model="formData.className" placeholder="请输入类名 " />
	52	</el-form-item>
	53	</el-col>
	54	</el-row>
	55	<el-row>
	56	<el-col :span="12">
	57	<el-form-item label="方法名" prop="methodName">
	58	<el-input v-model="formData.methodName" placeholder="请输入方法名 " />
	59	</el-form-item>
	60	</el-col>
	61	<el-col :span="12">
	62	<el-form-item label="参数数量" prop="portLength">
8ea580	63	<el-input-number v-model="formData.portLength" :min="0" controls-position="right" />
2f0aa4	64	</el-form-item>
潘	65	</el-col>
	66	</el-row>
	67	<el-row>
	68	<el-col :span="24">
	69	<el-form-item label="参数构造" prop="paramStructure">
	70	<el-input v-model="formData.paramStructure" placeholder="请输入参数构造 " />
	71	</el-form-item>
	72	</el-col>
	73	</el-row>
	74	<el-row>
	75	<el-col :span="24">
	76	<el-form-item label="模型路径" prop="modelPath">
6badb7	77	<el-input v-model="formData.modelPath" placeholder="模型路径" />
2f0aa4	78	</el-form-item>
潘	79	</el-col>
	80	</el-row>
	81	<el-divider content-position="left">输入参数</el-divider>
	82	<el-table
	83	:data="formData.paramList"
	84	border
	85	style="width: 100%; margin-top: 5px;">
	86	<el-table-column
	87	prop=""
	88	label="端口"
	89	width="100"
	90	align="center">
6badb7	91	<template #default="scope">
2f0aa4	92	<el-input size="mini" v-model="scope.row.modelparamportorder" maxlength="5" clearable
6badb7	93	style="width:100%; hight:100%"/>
2f0aa4	94	</template>
潘	95	</el-table-column>
	96	<el-table-column
	97	prop=""
	98	label="序号"
	99	width="100"
	100	align="center">
6badb7	101	<template #default="scope">
2f0aa4	102	<el-input size="mini" v-model="scope.row.modelparamorder" maxlength="5" clearable
6badb7	103	style="width:100%;hight:100%"/>
2f0aa4	104	</template>
潘	105	</el-table-column>
	106	<el-table-column
	107	prop=""
	108	label="类型"
	109	width="150"
	110	align="center">
6badb7	111	<template #default="scope">
2f0aa4	112	<el-select v-model="scope.row.modelparamtype" placeholder="请选择">
潘	113	<el-option
8ea580	114	v-for="dict in getStrDictOptions(DICT_TYPE.MODEL_PARAM_TYPE)"
2f0aa4	115	:key="dict.value"
潘	116	:label="dict.label"
	117	:value="dict.value"
	118	/>
	119	</el-select>
	120	</template>
	121	</el-table-column>
8ea580	122	<el-table-column
2f0aa4	123	prop=""
潘	124	label="参数名称"
	125	align="center">
6badb7	126	<template #default="scope">
2f0aa4	127	<el-select
潘	128	size="mini"
	129	v-model="scope.row.modelparamid"
	130	filterable
	131	placeholder="请选择">
	132	<el-option
d3ee81	133	v-for="(item, index) in modelparamListMap[scope.row.modelparamtype]"
2f0aa4	134	:key="index"
潘	135	:label="item.name"
d3ee81	136	:value="item.id"/>
2f0aa4	137	</el-select>
潘	138	</template>
8ea580	139	</el-table-column>
2f0aa4	140	<el-table-column
潘	141	prop=""
	142	label="参数长度"
d3ee81	143	width="160"
2f0aa4	144	align="center">
6badb7	145	<template #default="scope">
d3ee81	146	<el-input-number v-model="scope.row.datalength" :min="0" clearable controls-position="right"
潘	147	style="width:100%;hight:100%"/>
2f0aa4	148	</template>
潘	149	</el-table-column>
	150	<el-table-column
	151	prop=""
	152	label="操作"
	153	width="100"
	154	align="center">
6badb7	155	<template #default="scope">
2f0aa4	156	<el-button
6badb7	157	link
潘	158	@click.prevent="addRow(scope.$index, formData.paramList)"
	159	type="primary"
2f0aa4	160	size="small">
潘	161	添加
	162	</el-button>
	163	<el-button
6badb7	164	link
潘	165	@click.prevent="deleteRow(scope.$index, formData.paramList)"
	166	type="primary"
2f0aa4	167	size="small">
潘	168	删除
	169	</el-button>
	170	</template>
	171	</el-table-column>
	172	</el-table>
	173
	174	<el-divider content-position="left">设置参数</el-divider>
	175	<el-table
6badb7	176	:data="formData.settingList"
2f0aa4	177	border
潘	178	style="width: 100%; margin-top: 5px;">
	179	<el-table-column
	180	prop=""
	181	label="键"
	182	align="center">
6badb7	183	<template #default="scope">
d3ee81	184	<el-input size="mini" v-model="scope.row.key" maxlength="20" clearable
6badb7	185	style="width:100%;hight:100%"/>
2f0aa4	186	</template>
潘	187	</el-table-column>
	188	<el-table-column
	189	prop=""
	190	label="名称"
	191	align="center">
6badb7	192	<template #default="scope">
d3ee81	193	<el-input size="mini" v-model="scope.row.name" maxlength="20" clearable
6badb7	194	style="width:100%;hight:100%"/>
2f0aa4	195	</template>
潘	196	</el-table-column>
	197	<el-table-column
	198	prop=""
	199	label="类型"
	200	align="center">
6badb7	201	<template #default="scope">
d3ee81	202	<el-select v-model="scope.row.valuetype" placeholder="请选择">
潘	203	<el-option
	204	v-for="dict in getStrDictOptions(DICT_TYPE.MODEL_METHOD_SETTING_VALUE_TYPE)"
	205	:key="dict.value"
	206	:label="dict.label"
	207	:value="dict.value"
	208	/>
	209	</el-select>
2f0aa4	210	</template>
潘	211	</el-table-column>
	212	<el-table-column
	213	prop=""
	214	label="值"
	215	align="center">
6badb7	216	<template #default="scope">
2f0aa4	217	<el-input size="mini" v-model="scope.row.value" maxlength="256" clearable
6badb7	218	style="width:100%;hight:100%"/>
2f0aa4	219	</template>
潘	220	</el-table-column>
	221	<el-table-column
	222	prop=""
	223	label="操作"
	224	width="100"
	225	align="center">
6badb7	226	<template #default="scope">
2f0aa4	227	<el-button
6badb7	228	@click.prevent="addRow(scope.$index, formData.settingList)"
潘	229	link
	230	type="primary"
2f0aa4	231	size="small">
潘	232	添加
	233	</el-button>
	234	<el-button
6badb7	235	@click.prevent="deleteRow(scope.$index, formData.settingList)"
潘	236	link
	237	type="primary"
2f0aa4	238	size="small">
潘	239	删除
	240	</el-button>
	241	</template>
	242	</el-table-column>
	243	</el-table>
	244	</el-form>
	245	<template #footer>
	246	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	247	<el-button @click="dialogVisible = false">取消</el-button>
	248	</template>
	249	</Dialog>
	250	</template>
	251	<script lang="ts" setup>
8ea580	252	import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
2f0aa4	253	import * as ScheduleModelApi from '@/api/model/sche/model'
潘	254	import { CommonStatusEnum } from '@/utils/constants'
	255
	256	defineOptions({ name: 'ScheduleModelForm' })
	257
	258	const { t } = useI18n() // 国际化
	259	const message = useMessage() // 消息弹窗
	260	const dialogVisible = ref(false) // 弹窗的是否展示
	261	const dialogTitle = ref('') // 弹窗的标题
	262	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	263	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	264	const formData = ref({
	265	id: undefined,
	266	modelCode: undefined,
	267	modelName: undefined,
	268	modelType: undefined,
	269	className: undefined,
	270	methodName: undefined,
	271	portLength: undefined,
	272	paramStructure: undefined,
	273	modelPath: undefined,
	274	resultStrId: undefined,
	275	invocation: undefined,
8ea580	276	status: CommonStatusEnum.ENABLE,
2f0aa4	277	paramList: [{
潘	278	modelparamportorder: '1',
	279	modelparamorder: '1',
	280	modelparamtype: '',
	281	modelparamid: '',
	282	datalength: ''
	283	}],
	284	settingList: [{
	285	key: '',
	286	value: '',
	287	valuetype: '',
	288	name: ''
	289	}]
	290	})
	291	const formRules = reactive({
	292	modelCode: [{ required: true, message: '模型编号不能为空', trigger: 'blur' }],
	293	modelName: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
	294	modelType: [{ required: true, message: '模型类型不能为空', trigger: 'blur' }]
	295	})
	296	const formRef = ref() // 表单 Ref
6badb7	297	const modelparamListMap = ref({})
2f0aa4	298
潘	299	const addRow = function (index, rows) {
	300	let row = JSON.parse(JSON.stringify(rows[index]))
	301	rows.splice(index, 0, row)
	302	this.orderRow(rows)
	303	}
	304
	305	const deleteRow = function (index, rows) {
	306	if (!rows \|\| rows.length === 1) {
	307	message.error('不能全部删除！')
	308	return
	309	}
	310	rows.splice(index, 1)
	311	this.orderRow(rows)
	312	}
	313
	314	const orderRow = function (rows) {
	315	let modelparamorder = 0
	316	let modelparamportorder = 0
	317	rows.forEach(function (value) {
	318	if (value.modelparamportorder !== modelparamportorder) {
	319	modelparamportorder = value.modelparamportorder
	320	modelparamorder = 1
	321	}
	322	value.modelparamorder = modelparamorder
	323	modelparamorder++
	324	})
	325	}
	326
	327	/** 打开弹窗 */
	328	const open = async (type: string, id?: number) => {
	329	dialogVisible.value = true
	330	dialogTitle.value = t('action.' + type)
	331	formType.value = type
	332	resetForm()
	333	// 修改时，设置数据
	334	if (id) {
	335	formLoading.value = true
	336	try {
	337	formData.value = await ScheduleModelApi.getScheduleModel(id)
	338	} finally {
	339	formLoading.value = false
	340	}
	341	}
d3ee81	342	// 加载参数列表
潘	343	modelparamListMap.value = await ScheduleModelApi.getModelParamList()
2f0aa4	344	}
潘	345	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	346
	347	/** 提交表单 */
	348	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	349	const submitForm = async () => {
	350	// 校验表单
	351	if (!formRef) return
	352	const valid = await formRef.value.validate()
	353	if (!valid) return
	354	// 提交请求
	355	formLoading.value = true
	356	try {
	357	const data = formData.value as unknown as ScheduleModelApi.ScheduleModelVO
	358	if (formType.value === 'create') {
	359	await ScheduleModelApi.createScheduleModel(data)
	360	message.success(t('common.createSuccess'))
	361	} else {
	362	await ScheduleModelApi.updateScheduleModel(data)
	363	message.success(t('common.updateSuccess'))
	364	}
	365	dialogVisible.value = false
	366	// 发送操作成功的事件
	367	emit('success')
	368	} finally {
	369	formLoading.value = false
	370	}
	371	}
	372
	373	/** 重置表单 */
	374	const resetForm = () => {
	375	formData.value = {
	376	id: undefined,
	377	modelCode: undefined,
	378	modelName: undefined,
	379	modelType: undefined,
	380	className: undefined,
	381	methodName: undefined,
	382	portLength: undefined,
	383	paramStructure: undefined,
	384	modelPath: undefined,
	385	resultStrId: undefined,
	386	invocation: undefined,
6badb7	387	status: CommonStatusEnum.ENABLE,
2f0aa4	388	paramList: [{
潘	389	modelparamportorder: '1',
	390	modelparamorder: '1',
	391	modelparamtype: '',
	392	modelparamid: '',
	393	datalength: ''
	394	}],
	395	settingList: [{
	396	key: '',
	397	value: '',
	398	valuetype: '',
	399	name: ''
	400	}]
	401	}
	402	formRef.value?.resetFields()
	403	}
	404	</script>