houzhongjian
9 天以前 eeddc808a8d6428bfd1c2d6e21e4a71f5e9bdbef
提交 | 用户 | 时间
2f0aa4 1 <template>
6badb7 2   <Dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
2f0aa4 3     <el-form
4       ref="formRef"
5       v-loading="formLoading"
6       :model="formData"
7       :rules="formRules"
8       label-width="120px"
9     >
22bece 10       <el-divider content-position="left">基本信息</el-divider>
2f0aa4 11       <el-row>
12         <el-col :span="12">
13           <el-form-item label="模型编号" prop="modelCode">
14             <el-input v-model="formData.modelCode" placeholder="请输入模型编号" />
15           </el-form-item>
16         </el-col>
17       </el-row>
18       <el-row>
19         <el-col :span="12">
20           <el-form-item label="模型类型" prop="modelType">
6badb7 21             <el-select v-model="formData.modelType" placeholder="请选择">
22               <el-option
8ea580 23                 v-for="dict in getStrDictOptions(DICT_TYPE.SCHE_MODEL_TYPE)"
6badb7 24                 :key="dict.value"
25                 :label="dict.label"
26                 :value="dict.value"
27               />
28             </el-select>
2f0aa4 29           </el-form-item>
30         </el-col>
31         <el-col :span="12">
32           <el-form-item label="调用方式" prop="invocation">
6badb7 33             <el-select v-model="formData.invocation" placeholder="请选择">
34               <el-option
8ea580 35                 v-for="dict in getStrDictOptions(DICT_TYPE.SCHE_MODEL_INVOCATION)"
6badb7 36                 :key="dict.value"
37                 :label="dict.label"
38                 :value="dict.value"
39               />
40             </el-select>
2f0aa4 41           </el-form-item>
42         </el-col>
43       </el-row>
22bece 44       <el-divider content-position="left">模型信息</el-divider>
D 45       <div style="width: 120px;text-align: right;margin-bottom: 8px">
e4de9b 46         <el-popover placement="right" :width="300" trigger="click" ref="modelPopover" @before-enter="model = undefined">
22bece 47           <template #reference>
D 48             <span style="color: #409eff;cursor: pointer">关联模型信息</span>
49           </template>
50           <template #default>
51             <div style="display:flex;flex-direction: row;align-items: center;">
52               <el-cascader style="width: 100%" v-model="model" placeholder="选择模型" :teleported="false" @change="changeModel" :options="scheduleModelList"/>
53             </div>
54           </template>
55         </el-popover>
56       </div>
2f0aa4 57       <el-row>
22bece 58         <el-col :span="12">
D 59           <el-form-item label="模型名称" prop="modelName">
091c7e 60             <el-input v-model="formData.modelName" placeholder="请输入模型名称"/>
22bece 61           </el-form-item>
D 62         </el-col>
63         <el-col :span="12">
2f0aa4 64           <el-form-item label="类名" prop="className">
22bece 65             <el-input v-model="formData.className" placeholder="请输入类名" :disabled="true" />
2f0aa4 66           </el-form-item>
67         </el-col>
68       </el-row>
69       <el-row>
70         <el-col :span="12">
71           <el-form-item label="方法名" prop="methodName">
22bece 72             <el-input v-model="formData.methodName" placeholder="请输入方法名" :disabled="true" />
2f0aa4 73           </el-form-item>
74         </el-col>
75         <el-col :span="12">
76           <el-form-item label="参数数量" prop="portLength">
22bece 77             <el-input-number v-model="formData.portLength" :min="0" controls-position="right" :disabled="true" />
2f0aa4 78           </el-form-item>
79         </el-col>
80       </el-row>
81       <el-row>
82         <el-col :span="24">
83           <el-form-item label="参数构造" prop="paramStructure">
22bece 84             <el-input v-model="formData.paramStructure" placeholder="请输入参数构造" :disabled="true" />
2f0aa4 85           </el-form-item>
86         </el-col>
87       </el-row>
88       <el-row>
89         <el-col :span="24">
90           <el-form-item label="模型路径" prop="modelPath">
22bece 91             <el-input v-model="formData.modelPath" placeholder="模型路径" :disabled="true" />
2f0aa4 92           </el-form-item>
93         </el-col>
94       </el-row>
95       <el-divider content-position="left">输入参数</el-divider>
96       <el-table
97         :data="formData.paramList"
98         border
99         style="width: 100%; margin-top: 5px;">
100         <el-table-column
101           prop=""
102           label="端口"
103           width="100"
104           align="center">
6badb7 105           <template #default="scope">
22bece 106             <el-input v-model="scope.row.modelparamportorder" maxlength="5" clearable :disabled="true"
6badb7 107                       style="width:100%; hight:100%"/>
2f0aa4 108           </template>
109         </el-table-column>
110         <el-table-column
111           prop=""
112           label="序号"
113           width="100"
114           align="center">
6badb7 115           <template #default="scope">
22bece 116             <el-input v-model="scope.row.modelparamorder" maxlength="5" clearable
6badb7 117                       style="width:100%;hight:100%"/>
2f0aa4 118           </template>
119         </el-table-column>
120         <el-table-column
121           prop=""
122           label="类型"
123           width="150"
124           align="center">
6badb7 125           <template #default="scope">
22bece 126             <el-select v-model="scope.row.modelparamtype" placeholder="请选择" @change="changeModelparamtype(scope.row)">
2f0aa4 127               <el-option
8ea580 128                 v-for="dict in getStrDictOptions(DICT_TYPE.MODEL_PARAM_TYPE)"
2f0aa4 129                 :key="dict.value"
130                 :label="dict.label"
131                 :value="dict.value"
132               />
133             </el-select>
134           </template>
135         </el-table-column>
8ea580 136         <el-table-column
2f0aa4 137           prop=""
138           label="参数名称"
139           align="center">
6badb7 140           <template #default="scope">
22bece 141             <el-select v-if="scope.row.modelparamtype === 'NormalItem'"
D 142               v-model="scope.row.modelparamid"
143               placeholder="请选择"
144               filterable
145               style="width: 100%">
146               <el-option-group
147                 v-for="group in modelparamListMap['NormalItem']"
148                 :key="group.value"
149                 :label="group.label"
150               >
151                 <el-option
152                   v-for="item in group.children"
153                   :key="item.value"
154                   :label="item.label"
155                   :value="item.value"
156                 />
157               </el-option-group>
158             </el-select>
159             <el-select v-else
2f0aa4 160               v-model="scope.row.modelparamid"
161               filterable
162               placeholder="请选择">
163               <el-option
d3ee81 164                 v-for="(item, index) in modelparamListMap[scope.row.modelparamtype]"
2f0aa4 165                 :key="index"
166                 :label="item.name"
d3ee81 167                 :value="item.id"/>
2f0aa4 168             </el-select>
169           </template>
8ea580 170         </el-table-column>
2f0aa4 171         <el-table-column
172           prop=""
173           label="参数长度"
d3ee81 174           width="160"
2f0aa4 175           align="center">
6badb7 176           <template #default="scope">
d3ee81 177             <el-input-number v-model="scope.row.datalength" :min="0" clearable controls-position="right"
178                              style="width:100%;hight:100%"/>
2f0aa4 179           </template>
180         </el-table-column>
181         <el-table-column
182           prop=""
183           label="操作"
184           width="100"
185           align="center">
6badb7 186           <template #default="scope">
2f0aa4 187             <el-button
6badb7 188               link
189               @click.prevent="addRow(scope.$index, formData.paramList)"
190               type="primary"
2f0aa4 191               size="small">
192               添加
193             </el-button>
194             <el-button
6badb7 195               link
22bece 196               @click.prevent="deleteRow(scope.$index, scope.row, formData.paramList)"
6badb7 197               type="primary"
2f0aa4 198               size="small">
199               删除
200             </el-button>
201           </template>
202         </el-table-column>
203       </el-table>
204
205       <el-divider content-position="left">设置参数</el-divider>
206       <el-table
6badb7 207         :data="formData.settingList"
2f0aa4 208         border
209         style="width: 100%; margin-top: 5px;">
210         <el-table-column
211           prop=""
212           label="键"
213           align="center">
6badb7 214           <template #default="scope">
22bece 215             <el-input v-model="scope.row.key" maxlength="20" clearable :disabled="true"
6badb7 216                       style="width:100%;hight:100%"/>
2f0aa4 217           </template>
218         </el-table-column>
219         <el-table-column
220           prop=""
221           label="名称"
222           align="center">
6badb7 223           <template #default="scope">
22bece 224             <el-input v-model="scope.row.name" maxlength="20" clearable :disabled="true"
6badb7 225                       style="width:100%;hight:100%"/>
2f0aa4 226           </template>
227         </el-table-column>
228         <el-table-column
229           prop=""
230           label="类型"
231           align="center">
6badb7 232           <template #default="scope">
22bece 233             <el-select v-model="scope.row.valuetype" placeholder="请选择" :disabled="true">
d3ee81 234               <el-option
235                 v-for="dict in getStrDictOptions(DICT_TYPE.MODEL_METHOD_SETTING_VALUE_TYPE)"
236                 :key="dict.value"
237                 :label="dict.label"
238                 :value="dict.value"
239               />
240             </el-select>
2f0aa4 241           </template>
242         </el-table-column>
243         <el-table-column
244           prop=""
245           label="值"
246           align="center">
6badb7 247           <template #default="scope">
22bece 248             <el-input v-model="scope.row.value" maxlength="256" clearable  :disabled="scope.row.key === 'pyFile'"
6badb7 249                       style="width:100%;hight:100%"/>
2f0aa4 250           </template>
251         </el-table-column>
22bece 252 <!--        <el-table-column-->
D 253 <!--          prop=""-->
254 <!--          label="操作"-->
255 <!--          width="100"-->
256 <!--          align="center">-->
257 <!--          <template #default="scope">-->
258 <!--            <el-button-->
259 <!--              @click.prevent="addRow(scope.$index, formData.settingList)"-->
260 <!--              link-->
261 <!--              type="primary"-->
262 <!--              size="small">-->
263 <!--              添加-->
264 <!--            </el-button>-->
265 <!--            <el-button-->
266 <!--              @click.prevent="deleteRow(scope.$index, formData.settingList)"-->
267 <!--              link-->
268 <!--              type="primary"-->
269 <!--              size="small">-->
270 <!--              删除-->
271 <!--            </el-button>-->
272 <!--          </template>-->
273 <!--        </el-table-column>-->
2f0aa4 274       </el-table>
275     </el-form>
276     <template #footer>
277       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
278       <el-button @click="dialogVisible = false">取 消</el-button>
279     </template>
280   </Dialog>
281 </template>
282 <script lang="ts" setup>
8ea580 283   import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
2f0aa4 284   import * as ScheduleModelApi from '@/api/model/sche/model'
285   import { CommonStatusEnum } from '@/utils/constants'
22bece 286   import * as MpkApi from "@/api/model/mpk/mpk";
2f0aa4 287
288   defineOptions({ name: 'ScheduleModelForm' })
289
290   const { t } = useI18n() // 国际化
291   const message = useMessage() // 消息弹窗
292   const dialogVisible = ref(false) // 弹窗的是否展示
293   const dialogTitle = ref('') // 弹窗的标题
294   const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
295   const formType = ref('') // 表单的类型:create - 新增;update - 修改
296   const formData = ref({
297     id: undefined,
298     modelCode: undefined,
299     modelName: undefined,
300     modelType: undefined,
301     className: undefined,
302     methodName: undefined,
303     portLength: undefined,
304     paramStructure: undefined,
305     modelPath: undefined,
306     resultStrId: undefined,
307     invocation: undefined,
8ea580 308     status: CommonStatusEnum.ENABLE,
22bece 309     paramList: [],
D 310     settingList: []
2f0aa4 311   })
312   const formRules = reactive({
313     modelCode: [{ required: true, message: '模型编号不能为空', trigger: 'blur' }],
314     modelName: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
315     modelType: [{ required: true, message: '模型类型不能为空', trigger: 'blur' }]
316   })
317   const formRef = ref() // 表单 Ref
6badb7 318   const modelparamListMap = ref({})
22bece 319   // 调度模型列表
D 320   const scheduleModelList = ref([])
321   const model = ref()
322   const modelPopover = ref()
2f0aa4 323
324   const addRow = function (index, rows) {
325     let row = JSON.parse(JSON.stringify(rows[index]))
326     rows.splice(index, 0, row)
327     this.orderRow(rows)
328   }
329
22bece 330   const deleteRow = function (index, row, rows) {
D 331     if (!rows || rows.length === 1 || rows.filter(e => e.modelparamportorder === row.modelparamportorder).length === 1) {
332       message.error('不可删除!')
2f0aa4 333       return
334     }
335     rows.splice(index, 1)
336     this.orderRow(rows)
337   }
338
339   const orderRow = function (rows) {
340     let modelparamorder = 0
341     let modelparamportorder = 0
342     rows.forEach(function (value) {
343       if (value.modelparamportorder !== modelparamportorder) {
344         modelparamportorder = value.modelparamportorder
345         modelparamorder = 1
346       }
347       value.modelparamorder = modelparamorder
348       modelparamorder++
349     })
350   }
351
352   /** 打开弹窗 */
353   const open = async (type: string, id?: number) => {
354     dialogVisible.value = true
355     dialogTitle.value = t('action.' + type)
356     formType.value = type
357     resetForm()
358     // 修改时,设置数据
359     if (id) {
360       formLoading.value = true
361       try {
362         formData.value = await ScheduleModelApi.getScheduleModel(id)
363       } finally {
364         formLoading.value = false
365       }
366     }
d3ee81 367     // 加载参数列表
368     modelparamListMap.value = await ScheduleModelApi.getModelParamList()
22bece 369     // 加载调度模型列表
D 370     getScheduleModelList()
2f0aa4 371   }
372   defineExpose({ open }) // 提供 open 方法,用于打开弹窗
373
374   /** 提交表单 */
375   const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
376   const submitForm = async () => {
377     // 校验表单
378     if (!formRef) return
379     const valid = await formRef.value.validate()
380     if (!valid) return
381     // 提交请求
382     formLoading.value = true
383     try {
384       const data = formData.value as unknown as ScheduleModelApi.ScheduleModelVO
385       if (formType.value === 'create') {
386         await ScheduleModelApi.createScheduleModel(data)
387         message.success(t('common.createSuccess'))
388       } else {
389         await ScheduleModelApi.updateScheduleModel(data)
390         message.success(t('common.updateSuccess'))
391       }
392       dialogVisible.value = false
393       // 发送操作成功的事件
394       emit('success')
395     } finally {
396       formLoading.value = false
397     }
398   }
399
400   /** 重置表单 */
401   const resetForm = () => {
402     formData.value = {
403       id: undefined,
404       modelCode: undefined,
405       modelName: undefined,
406       modelType: undefined,
407       className: undefined,
408       methodName: undefined,
409       portLength: undefined,
410       paramStructure: undefined,
411       modelPath: undefined,
412       resultStrId: undefined,
413       invocation: undefined,
6badb7 414       status: CommonStatusEnum.ENABLE,
22bece 415       paramList: [],
D 416       settingList: []
2f0aa4 417     }
418     formRef.value?.resetFields()
419   }
22bece 420
D 421   const getScheduleModelList = async () => {
422     let list = await MpkApi.list({pyType: 'schedul'})
423     if (list && list.length > 0) {
424       scheduleModelList.value = list.map(e => {
425         return {
426           label: e.pyChineseName,
427           value: e,
428           children: e.modelMethods.map(m => {
429             return {
430               label: m.methodName,
431               value: m
432             }
433           })
434         }
435       })
436     }
437   }
438
439   // 选择调度模型
440   const changeModel = async () => {
441     // 校验
442     if (model.value && model.value.length > 0) {
443       const modelInfo = model.value[0]
444       const methodInfo = model.value[1]
445       formData.value.modelName = modelInfo.pyChineseName
446       formData.value.className = modelInfo.pkgName + '.impl.' + modelInfo.pyName + 'Impl';
447       formData.value.methodName = methodInfo.methodName
448       formData.value.portLength = methodInfo.dataLength
449       // 参数构造
450       let paramStructure = []
451       for (let i = 0; i < methodInfo.dataLength; i++) {
452         paramStructure.push('[[D')
453       }
454       if (methodInfo.model === 1) {
455         paramStructure.push('java.util.HashMap')
456       }
457       paramStructure.push('java.util.HashMap')
458       formData.value.paramStructure = paramStructure.join(',')
459       formData.value.modelPath = modelInfo.pyModule
460       // 输入参数
461       let paramList = []
462       for (let i = 0; i < methodInfo.dataLength; i++) {
463         paramList.push({
464           modelparamportorder: i+1 + '',
465           modelparamorder: '1',
466           modelparamtype: '',
467           modelparamid: '',
468           datalength: 0
469         })
470       }
471
472       formData.value.paramList = paramList
473       // 设置参数
474       let settingList = []
475       methodInfo.methodSettings.forEach(e => {
476         settingList.push({
477           key: e.settingKey,
478           value: e.value,
479           valuetype: e.valueType,
480           name: e.name
481         })
482       })
483       formData.value.settingList = settingList
484       modelPopover.value.hide()
485     }else {
486       message.error("请先选择模型")
487     }
488   }
489
490   function changeModelparamtype(row) {
491     row.modelparamid = ''
492   }
2f0aa4 493 </script>