工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-12-04 bb203eb72ee4604be8c9272cc583ecb9e393aeb8
提交 | 用户 | 时间
2f0aa4 1 <template>
潘 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     >
10       <el-row>
11         <el-col :span="12">
6badb7 12           <el-form-item label="方案编号" prop="code">
aed420 13             <el-input v-model="formData.code" placeholder="请输入方案编号"/>
2f0aa4 14           </el-form-item>
潘 15         </el-col>
16         <el-col :span="12">
6badb7 17           <el-form-item label="方案名称" prop="name">
aed420 18             <el-input v-model="formData.name" placeholder="请输入方案名称"/>
2f0aa4 19           </el-form-item>
潘 20         </el-col>
21       </el-row>
22       <el-row>
23         <el-col :span="12">
6badb7 24           <el-form-item label="触发方式" prop="triggerMethod">
潘 25             <el-select v-model="formData.triggerMethod" placeholder="请选择">
2f0aa4 26               <el-option
aed420 27                 v-for="dict in getDictOptions(DICT_TYPE.SCHE_TRIGGER_METHOD)"
2f0aa4 28                 :key="dict.value"
潘 29                 :label="dict.label"
30                 :value="dict.value"
31               />
32             </el-select>
6badb7 33           </el-form-item>
潘 34         </el-col>
35         <el-col :span="12">
36           <el-form-item label="触发条件" prop="triggerCondition">
aed420 37             <el-input v-model="formData.triggerCondition" placeholder="请输入触发条件"/>
6badb7 38           </el-form-item>
潘 39         </el-col>
40       </el-row>
41       <el-row>
42         <el-col :span="12">
43           <el-form-item label="调整对象" prop="scheduleObj">
aed420 44             <el-input v-model="formData.scheduleObj" placeholder="请输入调整对象"/>
6badb7 45           </el-form-item>
潘 46         </el-col>
47         <el-col :span="12">
48           <el-form-item label="调整类型" prop="scheduleType">
aed420 49             <el-input v-model="formData.scheduleType" placeholder="请输入调整类型"/>
6badb7 50           </el-form-item>
潘 51         </el-col>
52       </el-row>
53       <el-row>
54         <el-col :span="12">
55           <el-form-item label="调整策略" prop="scheduleStrategy">
aed420 56             <el-input v-model="formData.scheduleStrategy" placeholder="请输入调整策略 "/>
6badb7 57           </el-form-item>
潘 58         </el-col>
59         <el-col :span="12">
60           <el-form-item label="调度模型" prop="modelId">
61             <el-select v-model="formData.modelId" clearable placeholder="请选择调度模型">
2f0aa4 62               <el-option
6badb7 63                 v-for="item in scheduleModelList"
潘 64                 :key="item.id"
65                 :label="item.modelName"
2f0aa4 66                 :value="item.id"
6badb7 67               />
2f0aa4 68             </el-select>
潘 69
6badb7 70           </el-form-item>
潘 71         </el-col>
72       </el-row>
73       <el-row>
aed420 74         <el-col :span="12">
潘 75           <el-form-item label="关联项目">
76             <el-select v-model="formData.mpkprojectid" placeholder="请选择">
77               <el-option
78                 v-for="item in mpkProjectList"
79                 :key="item.id"
80                 :label="item.projectName"
81                 :value="item.id"/>
82             </el-select>
83           </el-form-item>
84         </el-col>
85       </el-row>
86       <el-row>
6badb7 87         <el-col :span="24">
潘 88           <el-form-item label="备注" prop="remark">
aed420 89             <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea"
潘 90                       maxlength="100"
6badb7 91                       show-word-limit/>
潘 92           </el-form-item>
93         </el-col>
94       </el-row>
2f0aa4 95     </el-form>
潘 96     <template #footer>
97       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
98       <el-button @click="dialogVisible = false">取 消</el-button>
99     </template>
100   </Dialog>
101 </template>
102 <script lang="ts" setup>
aed420 103 import {DICT_TYPE, getDictOptions} from '@/utils/dict'
潘 104 import * as ScheduleSchemeApi from '@/api/model/sche/scheme'
105 import {CommonStatusEnum} from '@/utils/constants'
106 import * as ScheduleModelApi from "@/api/model/sche/model";
107 import * as ProjectApi from '@/api/model/mpk/project'
2f0aa4 108
aed420 109 defineOptions({name: 'ScheduleSchemeForm'})
2f0aa4 110
aed420 111 const {t} = useI18n() // 国际化
潘 112 const message = useMessage() // 消息弹窗
113 const dialogVisible = ref(false) // 弹窗的是否展示
114 const dialogTitle = ref('') // 弹窗的标题
115 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
116 const formType = ref('') // 表单的类型：create - 新增；update - 修改
117 const formData = ref({
118   id: undefined,
119   code: undefined,
120   name: undefined,
121   triggerMethod: undefined,
122   triggerCondition: undefined,
123   scheduleObj: undefined,
124   scheduleType: undefined,
125   scheduleStrategy: undefined,
126   modelId: undefined,
127   scheduleTime: undefined,
128   remark: undefined,
129   status: 0,
130   mpkprojectid: undefined,
131 })
132 const formRules = reactive({
133   code: [{required: true, message: '编号不能为空', trigger: 'blur'}],
134   name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
135   triggerMethod: [{required: true, message: '触发方式不能为空', trigger: 'blur'}],
136   triggerCondition: [{required: true, message: '触发条件不能为空', trigger: 'blur'}],
137   modelId: [{required: true, message: '调度模型不能为空', trigger: 'blur'}],
138   triggerCondition: [{required: true, message: '触发条件不能为空', trigger: 'blur'}],
139 })
140 const formRef = ref() // 表单 Ref
141 const scheduleModelList = ref([] as ScheduleModelApi.ScheduleModelVO[])
142 const mpkProjectList = ref([])
143 const addRow = function (index, rows) {
144   let row = JSON.parse(JSON.stringify(rows[index]))
145   rows.splice(index, 0, row)
146   this.orderRow(rows)
147 }
148
149 const deleteRow = function (index, rows) {
150   if (!rows || rows.length === 1) {
151     message.error('不能全部删除！')
152     return
153   }
154   rows.splice(index, 1)
155   this.orderRow(rows)
156 }
157
158 const orderRow = function (rows) {
159   let modelparamorder = 0
160   let modelparamportorder = 0
161   rows.forEach(function (value) {
162     if (value.modelparamportorder !== modelparamportorder) {
163       modelparamportorder = value.modelparamportorder
164       modelparamorder = 1
165     }
166     value.modelparamorder = modelparamorder
167     modelparamorder++
168   })
169 }
170
171 /** 打开弹窗 */
172 const open = async (type: string, id?: number) => {
173   dialogVisible.value = true
174   dialogTitle.value = t('action.' + type)
175   formType.value = type
176   resetForm()
177   // 修改时，设置数据
178   if (id) {
179     formLoading.value = true
180     try {
181       formData.value = await ScheduleSchemeApi.getScheduleScheme(id)
182     } finally {
183       formLoading.value = false
184     }
185   }
186   // 加载调度模型列表
187   scheduleModelList.value = await ScheduleModelApi.getScheduleModelList()
188
189   // 获取mpk项目列表
190   mpkProjectList.value = await ProjectApi.list()
191 }
192 defineExpose({open}) // 提供 open 方法，用于打开弹窗
193
194 /** 提交表单 */
195 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
196 const submitForm = async () => {
197   // 校验表单
198   if (!formRef) return
199   const valid = await formRef.value.validate()
200   if (!valid) return
201   // 提交请求
202   formLoading.value = true
203   try {
204     const data = formData.value as unknown as ScheduleSchemeApi.ScheduleSchemeVO
205     if (formType.value === 'create') {
206       await ScheduleSchemeApi.createScheduleScheme(data)
207       message.success(t('common.createSuccess'))
208     } else {
209       await ScheduleSchemeApi.updateScheduleScheme(data)
210       message.success(t('common.updateSuccess'))
211     }
212     dialogVisible.value = false
213     // 发送操作成功的事件
214     emit('success')
215   } finally {
216     formLoading.value = false
217   }
218 }
219
220 /** 重置表单 */
221 const resetForm = () => {
222   formData.value = {
2f0aa4 223     id: undefined,
潘 224     code: undefined,
225     name: undefined,
226     triggerMethod: undefined,
227     triggerCondition: undefined,
228     scheduleObj: undefined,
229     scheduleType: undefined,
230     scheduleStrategy: undefined,
231     modelId: undefined,
232     scheduleTime: undefined,
233     remark: undefined,
aed420 234     status: CommonStatusEnum.ENABLE,
潘 235     mpkprojectid: undefined
2f0aa4 236   }
aed420 237   formRef.value?.resetFields()
潘 238 }
2f0aa4 239 </script>