iailab-plat-ui-vue3.git

潘志宝

6 天以前 1f375577b9e5d6e89aa4d70c526db88eeb95c9a0

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