iailab-plat-ui-vue3.git

dengzedong

2024-10-14 ebefc6c7612ef539b4c4f51305015f3a44fc26c8

提交 \| 用户 \| 时间
9ec4bd	1	<template>
潘	2	<Dialog v-model="dialogVisible" :title="dialogTitle">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules"
	8	label-width="80px"
	9	>
	10	<el-row :gutter="8">
	11	<el-col :span="12">
	12	<el-form-item label="key" prop="settingKey">
	13	<el-input v-model="formData.settingKey" placeholder=""/>
	14	</el-form-item>
	15	</el-col>
	16	<el-col :span="12">
	17	<el-form-item label="参数名称" prop="name">
	18	<el-input v-model="formData.name" placeholder=""/>
	19	</el-form-item>
	20	</el-col>
	21	</el-row>
	22	<el-row :gutter="8">
	23	<el-col :span="12">
	24	<el-form-item label="输入类型" prop="type">
	25	<el-select v-model="formData.type" @change="typeChange">
	26	<el-option
	27	v-for="item in getDictOptions(DICT_TYPE.MODEL_METHOD_SETTING_TYPE)"
	28	:key="item.value"
	29	:label="item.label"
	30	:value="item.value"
	31	/>
	32	</el-select>
	33	</el-form-item>
	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="参数类型" prop="valueType">
	37	<el-select v-model="formData.valueType">
	38	<el-option
	39	v-for="item in getDictOptions(DICT_TYPE.MODEL_METHOD_SETTING_VALUE_TYPE)"
	40	:key="item.value"
	41	:label="item.label"
	42	:value="item.value"
	43	:disabled="valueTypeSelectDisabled(item.value)"
	44	/>
	45	</el-select>
	46	</el-form-item>
	47	</el-col>
	48	</el-row>
	49	<div v-if="formData.type === 'input'">
	50	<el-row :gutter="8">
	51	<el-col :span="8">
	52	<el-form-item label="默认值" prop="value">
	53	<el-input v-model="formData.value" placeholder=""/>
	54	</el-form-item>
	55	</el-col>
	56	<el-col :span="8">
	57	<el-form-item label="最大值" prop="max">
	58	<el-input-number v-model="formData.max" placeholder=""/>
	59	</el-form-item>
	60	</el-col>
	61	<el-col :span="8">
	62	<el-form-item label="最小值" prop="min">
	63	<el-input-number v-model="formData.min" placeholder=""/>
	64	</el-form-item>
	65	</el-col>
	66	</el-row>
	67	</div>
	68	<div v-if="formData.type === 'select'">
	69	<el-divider content-position="left">选项信息</el-divider>
	70	<el-row :gutter="8">
	71	<el-col :span="4">
	72	<el-button type="primary" size="small" @click="addRow()">新增</el-button>
	73	</el-col>
	74	</el-row>
	75	<el-table :data="formData.settingSelects" border>
	76	<el-table-column
	77	prop=""
	78	label="key"
	79	align="center">
	80	<template #default="scope">
	81	<el-input size="small" v-model="scope.row.selectKey" maxlength="50" clearable />
	82	</template>
	83	</el-table-column>
	84	<el-table-column
	85	prop=""
	86	label="name"
	87	align="center">
	88	<template #default="scope">
	89	<el-input size="small" v-model="scope.row.name" maxlength="50" clearable />
	90	</template>
	91	</el-table-column>
	92	<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
	93	<template #default="scope">
	94	<el-button
	95	@click="deleteRow(scope.$index)"
	96	key="danger"
	97	type="danger"
	98	link
	99	>删除</el-button>
	100	</template>
	101	</el-table-column>
	102	</el-table>
	103	</div>
	104	</el-form>
	105	<template #footer>
	106	<el-button type="primary" @click="submitForm">确定</el-button>
	107	<el-button @click="dialogVisible = false">取消</el-button>
	108	</template>
	109	</Dialog>
	110	</template>
	111	<script lang="ts" setup>
	112	import {DICT_TYPE,getDictOptions} from '@/utils/dict';
aff5c9	113	import * as ProjectApi from '@/api/model/mpk/project'
潘	114	import * as MpkApi from '@/api/model/mpk/mpk'
9ec4bd	115	import {FormRules} from 'element-plus'
潘	116	import {generateUUID} from "@/utils";
	117	import {func} from "vue-types";
	118
	119
	120	const {t} = useI18n() // 国际化
	121	const message = useMessage() // 消息弹窗
	122
	123	const dialogVisible = ref(false) // 弹窗的是否展示
	124	const dialogTitle = ref('参数设置') // 弹窗的标题
	125	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	126	const formData = ref({
	127	settingKey: undefined,
	128	name: undefined,
	129	type: undefined,
	130	valueType: undefined,
	131	value: undefined,
	132	max: undefined,
	133	min: undefined,
	134	settingSelects: []
	135	})
	136
	137
	138	const formRules = reactive<FormRules>({
	139	settingKey: [
	140	{required: true, message: 'key不能为空', trigger: 'blur'},
	141	],
	142	name: [
	143	{required: true, message: '参数名称不能为空', trigger: 'blur'},
	144	],
	145	type: [
	146	{required: true, message: '输入类型不能为空', trigger: 'blur'},
	147	],
	148	valueType: [
	149	{required: true, message: '参数类型不能为空', trigger: 'blur'},
	150	]
	151	})
	152
	153	const formRef = ref() // 表单 Ref
	154
	155	let methodSettingsRef = undefined
	156	let infoRef = undefined
	157	/** 打开弹窗 */
	158	const open = async (info,methodSettings) => {
	159	dialogVisible.value = true
	160	resetForm()
	161	// 修改时，设置数据
	162	if (info) {
	163	infoRef = info
	164	formLoading.value = true
	165	try {
	166	formData.value = {...info}
	167	} finally {
	168	formLoading.value = false
	169	}
	170	}else {
	171	methodSettingsRef = methodSettings
	172	}
	173	}
	174	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	175
	176
	177	// 数据回调
	178	const emit = defineEmits(['addSettingCallback'])
	179	/** 提交表单 */
	180	const submitForm = async () => {
	181	// 校验表单
	182	if (!formRef) return
	183	const valid = await formRef.value.validate()
	184	if (!valid) return
	185
	186	//校验select
	187	if (formData.value.type === 'select') {
	188	if (formData.value.settingSelects?.length === 0) {
	189	message.error('选项为空');
	190	return
	191	}
	192	}
	193
	194	// 提交请求
	195	formLoading.value = true
	196	try {
	197	if (infoRef) {
	198	// 修改
	199	for (let key in formData.value) {
	200	infoRef[key] = formData.value[key];
	201	}
631da1	202	infoRef = undefined;
9ec4bd	203	}else {
潘	204	// 新增
	205	methodSettingsRef.push({...formData.value})
	206	}
	207	dialogVisible.value = false
	208	} finally {
	209	formLoading.value = false
	210	}
	211	}
	212
	213	/** 重置表单 */
	214	const resetForm = () => {
	215	formData.value = {
	216	settingKey: undefined,
	217	name: undefined,
	218	type: undefined,
	219	valueType: undefined,
	220	value: undefined,
	221	max: undefined,
	222	min: undefined,
	223	settingSelects: []
	224	}
	225	formRef.value?.resetFields()
	226	}
	227
	228	const valueTypeSelectDisabled = (value) => {
	229	const type = formData.value.type;
	230	switch (type) {
	231	case "input":
	232	if (['int','decimal','decimalArray','string'].includes(value)) {
	233	return false
	234	}else {
	235	return true
	236	}
	237	case "file":
	238	if (['file'].includes(value)) {
	239	return false
	240	}else {
	241	return true
	242	}
	243	case "select":
	244	if (['int','string'].includes(value)) {
	245	return false
	246	}else {
	247	return true
	248	}
	249	default :
	250	return true
	251	}
	252	}
	253
	254	const typeChange = () => {
	255	formData.value.valueType = undefined
	256	formData.value.value = undefined
	257	formData.value.max = undefined
	258	formData.value.min = undefined
	259	formData.value.settingSelects = []
	260	}
	261
	262	const addRow = function () {
	263	formData.value.settingSelects.push({
	264	selectKey: '',
	265	name: ''
	266	})
	267	}
	268	const deleteRow = function (index) {
	269	formData.value.settingSelects.splice(index, 1)
	270	}
	271	</script>