表单设计页面，模型基础信息增删

src/views/system/workflow/model/modelPopup.vue

@@ -0,0 +1,129 @@
+<!--模型的新增和修改的弹出框-->
+<template>
+  <el-dialog
+      draggable
+      class="cn-operate-dialog"
+      v-model="modelVisible"
+      :title="title"
+      style="width: 415px; height: 400px"
+      top="30vh"
+  >
+    <el-scrollbar>
+      <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+        <el-form-item label="模型标识">
+          <el-input v-model="form.modelKey" clearable disabled />
+        </el-form-item>
+        <el-form-item label="模型名称" prop='modelName'>
+          <el-input v-model="form.modelName" placeholder="请输入模型名称" clearable />
+        </el-form-item>
+        <el-form-item label="流程分类" prop="category">
+          <el-select v-model='form.category' clearable>
+            <el-option
+                v-for='item in categoryList'
+                :key='item.id'
+                :label='item.name'
+                :value='item.code'
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit />
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="modelVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import { useDictData } from '@/stores/dictData'
+import { addWFModel,updateWFModel } from '@/api/process-boot/workflow/model'
+
+
+const dictData = useDictData()
+const categoryList = dictData.getBasicData('flow_category')
+
+const tableStore = inject('tableStore') as TableStore
+const modelVisible = ref(false)
+const title = ref('')
+const formRef = ref()
+
+// 注意不要和表单ref的命名冲突
+const form = reactive({
+  modelId: undefined,
+  modelKey: `Process_${new Date().getTime()}`,
+  modelName: '',
+  category: '',
+  description: '',
+})
+
+//form表单校验规则
+const rules = {
+  modelName: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '流程分类必选', trigger: 'change' }],
+}
+
+const open = (text: string, data?: any) => {
+  title.value = text
+  if (data) {
+    // 表单赋值
+    for (let key in form) {
+      form[key] = data[key]
+    }
+  } else {
+    resetForm()
+    // 在此处恢复默认表单
+    for (let key in form) {
+      form[key] = ''
+    }
+    form.modelKey = `Process_${new Date().getTime()}`
+  }
+  modelVisible.value = true
+}
+
+//重置表单内容
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields()
+  }
+}
+
+/**
+ * 提交用户表单数据
+ */
+const submit = () => {
+  formRef.value.validate(async (valid: any) => {
+    if (valid) {
+      if (form.modelId) {
+        await updateWFModel(form)
+      } else {
+        await addWFModel(form)
+      }
+      ElMessage.success('保存成功')
+      tableStore.index()
+      modelVisible.value = false
+    }
+  })
+}
+
+/************针对tab切换*************/
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+  transition: none !important;
+}
+
+.el-select {
+  min-width: 180px;
+}
+</style>