liriming
2025-03-03 8bb7160c9c4fd7ce5893ee673647b13cc35410ae
提交 | 用户 | 时间
e26cd3 1 <template>
D 2   <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
3     <el-form
4       ref="formRef"
5       v-loading="formLoading"
6       :model="formData"
7       :rules="formRules"
8       label-width="120px"
9     >
b48f2d 10       <el-row>
11         <el-col :span="12">
12           <el-form-item label="编码" prop="code">
13             <el-input v-model="formData.code" 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>
23         <el-col :span="12">
24           <el-form-item label="归档周期" prop="type">
25             <el-select
26               v-model="formData.type"
27               clearable
28               placeholder="请选择归档周期"
29             >
30               <el-option
31                 v-for="dict in getDictOptions(DICT_TYPE.ARC_TYPE)"
32                 :key="dict.value"
33                 :label="dict.label"
34                 :value="dict.value"
35               />
36             </el-select>
37           </el-form-item>
38         </el-col>
39         <el-col :span="12">
40           <el-form-item label="计算方法" prop="calculate">
41             <el-select
42               v-model="formData.calculate"
43               clearable
44               placeholder="请选择计算方法"
45             >
46               <el-option
47                 v-for="dict in getDictOptions(DICT_TYPE.ARC_CALCULATE_TYPE)"
48                 :key="dict.value"
49                 :label="dict.label"
50                 :value="dict.value"
51               />
52             </el-select>
53           </el-form-item>
54         </el-col>
55       </el-row>
56       <el-row>
57         <el-col :span="12">
58           <el-form-item label="归档点位" prop="point">
e26cd3 59             <el-select
D 60               v-model="formData.point"
61               filterable
62               placeholder="请选择归档点位">
63               <el-option
64                 v-for="(item, index) in pointList"
65                 :key="index"
66                 :label="item.pointName"
67                 :value="item.pointNo"/>
68             </el-select>
b48f2d 69           </el-form-item>
70         </el-col>
71         <el-col :span="12">
72           <el-form-item label="是否启用" prop="isEnable">
73             <el-select
74               v-model="formData.isEnable"
75               clearable
76               placeholder="请选择是否启用"
77             >
78               <el-option
79                 v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
80                 :key="dict.value"
81                 :label="dict.label"
82                 :value="dict.value"
83               />
84             </el-select>
85           </el-form-item>
86         </el-col>
87       </el-row>
e26cd3 88     </el-form>
D 89     <template #footer>
90       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
91       <el-button @click="dialogVisible = false">取 消</el-button>
92     </template>
93   </Dialog>
94 </template>
95 <script lang="ts" setup>
96   import {DICT_TYPE, getDictOptions, getIntDictOptions} from "@/utils/dict";
97   import * as ArcDataApi from '@/api/data/arc'
98   import { CommonStatusEnum } from '@/utils/constants'
99   import * as DaPoint from "@/api/data/da/point";
100
101   defineOptions({ name: 'ArcSettingForm' })
102
103   const { t } = useI18n() // 国际化
104   const message = useMessage() // 消息弹窗
105   const dialogVisible = ref(false) // 弹窗的是否展示
106   const dialogTitle = ref('') // 弹窗的标题
107   const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
108   const formType = ref('') // 表单的类型:create - 新增;update - 修改
109   const formData = ref({
110     id: undefined,
b48f2d 111     code: undefined,
e26cd3 112     name: undefined,
D 113     type: undefined,
114     point: undefined,
115     calculate: undefined,
b48f2d 116     sort: 1,
e26cd3 117     isEnable: 1
D 118   })
119   const formRules = reactive({
b48f2d 120     code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
e26cd3 121     name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
D 122     type: [{ required: true, message: '归档周期不能为空', trigger: 'blur' }],
123     point: [{ required: true, message: '归档点位不能为空', trigger: 'blur' }],
124     calculate: [{ required: true, message: '计算方法不能为空', trigger: 'blur' }]
125   })
126   const formRef = ref() // 表单 Ref
127   const pointList = ref([{
128     pointName: '',
129     pointNo: ''
130   }])
131   const queryParams = reactive({
132     pointTypes: "MEASURE,CONSTANT",
133   })
134   /** 打开弹窗 */
135   const open = async (type: string, id?: number) => {
136     dialogVisible.value = true
137     dialogTitle.value = t('action.' + type)
138     formType.value = type
139     resetForm()
140     getPointList()
141     // 修改时,设置数据
142     if (id) {
143       formLoading.value = true
144       try {
145         formData.value = await ArcDataApi.getArcSetting(id)
146       } finally {
147         formLoading.value = false
148       }
149     }
150   }
151   defineExpose({ open }) // 提供 open 方法,用于打开弹窗
152
153   /** 提交表单 */
154   const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
155   const submitForm = async () => {
156     // 校验表单
157     if (!formRef) return
158     const valid = await formRef.value.validate()
159     if (!valid) return
160     // 提交请求
161     formLoading.value = true
162     try {
163       const data = formData.value as unknown as ArcDataApi.ArcSettingVO
164       if (formType.value === 'create') {
165         await ArcDataApi.createArcSetting(data)
166         message.success(t('common.createSuccess'))
167       } else {
168         await ArcDataApi.updateArcSetting(data)
169         message.success(t('common.updateSuccess'))
170       }
171       dialogVisible.value = false
172       // 发送操作成功的事件
173       emit('success')
174     } finally {
175       formLoading.value = false
176     }
177   }
178   const getPointList = async () => {
179     pointList.value = await DaPoint.getPointSimpleList(queryParams)
180   }
181   /** 重置表单 */
182   const resetForm = () => {
183     formData.value = {
184       id: undefined,
185       name: undefined,
186       type: undefined,
187       point: undefined,
188       calculate: undefined,
b48f2d 189       sort: 1,
e26cd3 190       isEnable: 1
D 191     }
192     formRef.value?.resetFields()
193   }
194 </script>