From 227117205cbb62e9febf96870d2fbb9ce056eb43 Mon Sep 17 00:00:00 2001
From: houzhongjian <houzhongyi@126.com>
Date: 星期三, 06 十一月 2024 14:09:54 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/data/plan/item/ItemForm.vue | 177 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 177 insertions(+), 0 deletions(-)
diff --git a/src/views/data/plan/item/ItemForm.vue b/src/views/data/plan/item/ItemForm.vue
new file mode 100644
index 0000000..97257c2
--- /dev/null
+++ b/src/views/data/plan/item/ItemForm.vue
@@ -0,0 +1,177 @@
+<template>
+ <Dialog v-model="dialogVisible" :title="dialogTitle">
+ <el-form
+ ref="formRef"
+ v-loading="formLoading"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ >
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="指标编码" prop="itemNo">
+ <el-input v-model="formData.itemNo" disabled/>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="指标名称" prop="itemName">
+ <el-input v-model="formData.itemName" placeholder="请输入指标名称"/>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="计划分类" prop="itemCategory">
+ <el-tree-select
+ v-model="formData.itemCategory"
+ :data="categoryTree"
+ :default-expanded-keys="[0]"
+ :props="defaultProps"
+ check-strictly
+ node-key="id"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="时间粒度" prop="timeGranularity">
+ <el-select v-model="formData.timeGranularity" placeholder="请选择">
+ <el-option
+ v-for="dict in getStrDictOptions(DICT_TYPE.TIME_GRANULARITY)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="数据集" prop="dataSet">
+ <el-select v-model="formData.dataSet" clearable placeholder="请选择数据集" @change="handleDataSetChange($event)">
+ <el-option
+ v-for="item in dataSetList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id + ''"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-form-item label="备注" prop="remark">
+ <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" maxlength="100"
+ show-word-limit/>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
+import * as ItemApi from '@/api/data/plan/item'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as DataSetApi from "@/api/data/plan/data";
+import * as CategoryApi from "@/api/data/plan/category";
+import {defaultProps} from "@/api/data/plan/category";
+import {handleTree} from "@/utils/tree";
+
+defineOptions({ name: 'PlanItemForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+ id: undefined,
+ itemNo: '',
+ itemName: '',
+ itemCategory: '',
+ timeGranularity: '',
+ dataSet: '',
+ remark: '',
+ status: undefined,
+})
+const formRules = reactive({
+ itemName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+ itemCategory: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
+ dataSet: [{ required: true, message: '数据集不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const dataSetList = ref([] as DataSetApi.DataSetVO[])
+
+const categoryTree = ref<Tree[]>([])
+const getCategoryTree = async () => {
+ categoryTree.value = []
+ const res = await CategoryApi.getCategoryListAllSimple()
+ let category: Tree = { id: 0, label: '主类目', children: [] }
+ category.children = handleTree(res, 'id', 'pid')
+ categoryTree.value.push(category)
+}
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+ dialogVisible.value = true
+ dialogTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 加载数据源列表
+ dataSetList.value = await DataSetApi.getDataSetList()
+ // 加载类别
+ await getCategoryTree()
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await ItemApi.getItem(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as ItemApi.ItemVO
+ if (formType.value === 'create') {
+ await ItemApi.createItem(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ItemApi.updateItem(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ dataSource: '',
+ querySql: '',
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
--
Gitblit v1.9.3