iailab-plat-ui-vue3.git

Merge branch 'master' of http://dlindusit.com:53929/r/iailab-plat-ui-vue3

潘志宝

5 天以前 4c014a4f8034bd8c73aba8d909a58f63d5c4ec89

提交 \| 用户 \| 时间
c62768	1	<template>
J	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="55%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules" label-width="100px">
	8	<el-row>
	9	<el-col :span="12">
	10	<el-form-item label="指标编码" prop="itemNo">
	11	<el-input v-model="formData.itemNo" disabled/>
	12	</el-form-item>
	13	</el-col>
	14	<el-col :span="12">
	15	<el-form-item label="指标名称" prop="itemName">
	16	<el-input v-model="formData.itemName" placeholder="请输入指标名称"/>
	17	</el-form-item>
	18	</el-col>
	19	</el-row>
	20	<el-row>
	21	<el-col :span="12">
	22	<el-form-item label="指标分类" prop="itemCategory">
6a72da	23	<el-tree-select
J	24	v-model="formData.itemCategory"
	25	:data="dataCategoryList"
	26	:default-expanded-keys="[0]"
	27	:props="defaultProps"
	28	check-strictly
	29	node-key="id"
	30	/>
c62768	31	</el-form-item>
J	32	</el-col>
	33	<el-col :span="12">
	34	<el-form-item label="时间粒度" prop="timeGranularity">
d5bb0c	35	<el-select v-model="formData.timeGranularity" clearable placeholder="请选择">
c62768	36	<el-option
J	37	v-for="dict in getStrDictOptions(DICT_TYPE.TIME_GRANULARITY)"
	38	:key="dict.value"
	39	:label="dict.label"
	40	:value="dict.value"
	41	/>
	42	</el-select>
	43	</el-form-item>
	44	</el-col>
	45	</el-row>
	46	<el-row>
d3ee81	47	<el-col :span="6">
c62768	48	<el-form-item label="指标精度" prop="precision">
J	49	<el-input v-model="formData.precision"/>
	50	</el-form-item>
	51	</el-col>
d3ee81	52	<el-col :span="6">
c62768	53	<el-form-item label="转换系数" prop="coefficient">
J	54	<el-input v-model="formData.coefficient"/>
	55	</el-form-item>
	56	</el-col>
d3ee81	57	<el-col :span="6">
c62768	58	<el-form-item label="数量单位" prop="unit">
J	59	<el-input v-model="formData.unit"/>
	60	</el-form-item>
	61	</el-col>
	62	</el-row>
	63	<el-row>
683738	64	<el-col :span="12">
c62768	65	<el-form-item label="数据集" prop="atomItem.dataSet">
6a72da	66	<el-select v-model="formData.atomItem.dataSet" filterable
J	67	allow-create clearable placeholder="请选择数据集" @change="handleDataSetChange($event)">
c62768	68	<el-option
J	69	v-for="item in dataSetList"
	70	:key="item.id"
	71	:label="item.name"
	72	:value="item.id + ''"
	73	/>
	74	</el-select>
	75	</el-form-item>
	76	</el-col>
d3ee81	77	<el-col :span="6">
c62768	78	<el-form-item label="使用字段" prop="atomItem.usingField">
6a72da	79	<el-select v-model="formData.atomItem.usingField" filterable
J	80	allow-create clearable placeholder="请选择字段">
c62768	81	<el-option
J	82	v-for="item in dataSetFieldList"
	83	:key="item.id"
	84	:label="item.fieldCode"
fb7d46	85	:value="item.fieldCode"
c62768	86	/>
J	87	</el-select>
	88	</el-form-item>
	89	</el-col>
d3ee81	90	<el-col :span="6">
1f3755	91	<el-form-item label="统计方式" prop="atomItem.statFunc">
67e80d	92	<el-select v-model="formData.atomItem.statFunc" clearable placeholder="请选择">
c62768	93	<el-option
d3ee81	94	v-for="dict in getStrDictOptions(DICT_TYPE.DATA_STAT_FUNC)"
c62768	95	:key="dict.value"
J	96	:label="dict.label"
	97	:value="dict.value"
	98	/>
	99	</el-select>
d3ee81	100	</el-form-item>
潘	101	</el-col>
	102	</el-row>
	103	<el-row>
	104	<el-col :span="24">
	105	<el-form-item label="备注" prop="remark">
	106	<el-input v-model="formData.remark" type="textarea" maxlength="100"/>
c62768	107	</el-form-item>
J	108	</el-col>
	109	</el-row>
	110	</el-form>
	111	<template #footer>
	112	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	113	<el-button @click="dialogVisible = false">取消</el-button>
	114	</template>
	115	</Dialog>
	116	</template>
	117	<script lang="ts" setup>
	118	import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
	119	import * as ItemApi from '@/api/data/ind/item/item'
	120	import * as DataSetApi from '@/api/data/ind/data/data.set'
	121	import * as DataSetFieldApi from '@/api/data/ind/data/data.field'
	122	import * as CategoryApi from '@/api/data/ind/category/index'
6a72da	123	import {handleTree} from "@/utils/tree";
c62768	124
J	125	defineOptions({name: 'IndDataSetForm'})
	126
	127	const {t} = useI18n() // 国际化
	128	const message = useMessage() // 消息弹窗
	129
	130	const dialogVisible = ref(false) // 弹窗的是否展示
	131	const dialogTitle = ref('') // 弹窗的标题
	132	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	133	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	134	let formData = ref({
	135	id: undefined,
	136	itemNo: '',
	137	itemName: '',
	138	itemType: '',
	139	itemCategory: '',
d3ee81	140	coefficient: 1,
潘	141	precision: 0,
c62768	142	businessType: '',
J	143	timeRange: '',
	144	timeGranularity: '',
	145	remark: '',
	146	atomItem:{
	147	dataSource:'',
	148	dataSet: '',
	149	usingField: '',
	150	statFunc: ''
	151	}
	152	})
	153	const validateAsNumber = (rule, value, callback) => {
	154	const regex = /^(\-\|\+)?\d+(\.\d+)?$/;
	155	if (!regex.test(value)) {
	156	callback(new Error('请输入数字！'));
	157	}
	158	}
	159	const formRules = reactive({
	160	itemName: [{required: true, message: '指标名称不能为空', trigger: 'blur'}],
	161	itemCategory: [{required: true, message: '指标分类不能为空', trigger: 'blur'}],
1f3755	162	"atomItem.usingField": [{required: true, message: '使用字段不能为空', trigger: 'blur'}],
潘	163	"atomItem.statFunc": [{required: true, message: '统计方式不能为空', trigger: 'blur'}],
c62768	164	})
J	165	const formRef = ref() // 表单 Ref
	166	const dataSetList = ref([] as DataSetApi.DataSetVO[])
	167	const dataSetFieldList = ref([] as DataSetFieldApi.DataSetFieldVO[])
6a72da	168
J	169	const dataCategoryList = ref<Tree[]>([])
	170
	171	const getCategoryTree = async () => {
	172	dataCategoryList.value = []
	173	const res = await CategoryApi.getCategoryListAllSimple()
	174	let category: Tree = {id: 0, label: '主类目', children: []}
	175	category.children = handleTree(res, 'id', 'pid')
	176	dataCategoryList.value.push(category)
	177	}
c62768	178	/** 打开弹窗 */
J	179	const open = async (type: string, id?: string) => {
	180	dialogVisible.value = true
	181	dialogTitle.value = '原子指标'
	182	formType.value = type
	183	resetForm()
	184	// 加载数据源列表
	185	dataSetList.value = await DataSetApi.getDataSetList()
6a72da	186	await getCategoryTree()
c62768	187	// 修改时，设置数据
J	188	if (id) {
	189	formLoading.value = true
	190	try {
	191	formData.value = await ItemApi.getItem(id)
	192	if(formData.value.atomItem.dataSet !== null){
	193	const queryParams = reactive({
	194	dataSetId: formData.value.atomItem.dataSet,
	195	})
	196	dataSetFieldList.value = (await DataSetFieldApi.getDataSetFieldPage(queryParams)).list
	197	}
	198	} finally {
	199	formLoading.value = false
	200	}
	201	}
	202
	203	}
	204	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	205
	206	/** 提交表单 */
	207	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	208	const submitForm = async () => {
d3ee81	209	debugger
c62768	210	// 校验表单
J	211	if (!formRef) return
	212	const valid = await formRef.value.validate()
	213	if (!valid) return
	214	// 提交请求
	215	formLoading.value = true
	216	try {
	217	formData.value.itemType = 'ATOM'
	218	for (let index in dataSetList.value){
	219	if(formData.value.atomItem.dataSet === dataSetList.value[index].id){
	220	formData.value.atomItem.dataSource = dataSetList.value[index].dataSource
	221	}
	222	}
	223	const data = formData.value as ItemApi.ItemVO
	224	if (formType.value === 'create') {
	225	await ItemApi.createItem(data)
	226	message.success(t('common.createSuccess'))
	227	} else {
	228	await ItemApi.updateItem(data)
	229	message.success(t('common.updateSuccess'))
	230	}
	231	dialogVisible.value = false
	232	// 发送操作成功的事件
	233	emit('success')
	234	} finally {
	235	formLoading.value = false
	236	}
	237	}
	238
	239	/** 重置表单 */
	240	const resetForm = () => {
	241	formData.value = {
	242	id: '',
	243	itemNo: '',
	244	itemName: '',
	245	itemType: '',
	246	itemCategory: '',
d3ee81	247	coefficient: 1,
潘	248	precision: 0,
c62768	249	businessType: '',
J	250	timeRange: '',
	251	timeGranularity: '',
	252	remark: '',
	253	atomItem:{
	254	dataSource:'',
	255	dataSet: '',
	256	usingField: '',
	257	statFunc: ''
	258	}
	259	}
	260	dataSetFieldList.value = []
	261	formRef.value?.resetFields()
	262	}
	263
	264	async function handleDataSetChange(event) {
	265	if (event !== null && event !== undefined) {
	266	const queryParams = reactive({
	267	dataSetId: event,
	268	})
	269	dataSetFieldList.value = (await DataSetFieldApi.getDataSetFieldPage(queryParams)).list
	270	}
	271	}
	272
	273	</script>