工作流表单+模型代码提交

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

@@ -0,0 +1,176 @@
+<template>
+    <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title' style='max-width: 450px;height: 450px'>
+        <el-scrollbar>
+            <el-form :inline='false' :model='formData' label-width='120px' :rules='rules' ref='formRef'>
+                <el-form-item label='流程标识' prop='key'>
+                    <el-input
+                        v-model='formData.key'
+                        disabled
+                    />
+                </el-form-item>
+
+                <el-form-item label='流程名称' prop='name'>
+                    <el-input
+                        v-model='formData.name'
+                        :disabled='!!formData.id'
+                        clearable
+                        placeholder='请输入流程名称'
+                    />
+                </el-form-item>
+
+
+                <el-form-item label='流程分类' prop='category'>
+                    <el-select
+                        v-model='formData.category'
+                        clearable
+                        placeholder='请选择流程分类'
+                        style='width: 100%'
+                    >
+                        <el-option
+                            v-for='category in categoryList'
+                            :key='category.id'
+                            :label='category.name'
+                            :value='category.id'
+                        />
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item v-if='formData.id' label='流程图标' prop='icon'>
+                    <UploadImg v-model='formData.icon' :limit='1' height='128px' width='128px' />
+                </el-form-item>
+
+                <el-form-item label='流程描述' prop='description'>
+                    <el-input v-model='formData.description' clearable type='textarea' />
+                </el-form-item>
+
+                <el-form-item label='流程表单' prop='formId'>
+                    <el-select v-model='formData.formId' clearable style='width: 100%'>
+                        <el-option
+                            v-for='form in formList'
+                            :key='form.id'
+                            :label='form.name'
+                            :value='form.id'
+                        />
+                    </el-select>
+                </el-form-item>
+
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class='dialog-footer'>
+                <el-button @click='dialogVisible = false'>取消</el-button>
+                <el-button type='primary' @click='submit'>确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang='ts' setup>
+import { ref, inject, reactive, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
+import { getFormSimpleList } from '@/api/bpm-boot/form'
+import { getCategorySimpleList } from '@/api/bpm-boot/category'
+import { addModel, updateModel } from '@/api/bpm-boot/model'
+
+
+//传入type的名称
+const categoryList = ref()
+const formList = ref()
+
+const title = ref('')
+const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
+
+const dialogVisible = ref(false)
+// 注意不要和表单ref的命名冲突
+const formData = reactive({
+    id: '',
+    key: '',
+    name: '',
+    category: '',
+    icon: '',
+    description: '',
+    formId: ''
+})
+
+//form表单校验规则
+const rules = {
+    key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+    name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+    category: [{ required: true, message: '流程分类不能为空', trigger: 'change' }],
+    formId: [{ required: true, message: '流程表单不能为空', trigger: 'change' }]
+}
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.resetFields()
+    }
+}
+
+const open = async (text: string, data?: any) => {
+    title.value = text
+    await getFormSimpleList().then(res => {
+        formList.value = res.data
+    })
+
+    await getCategorySimpleList().then(res => {
+        categoryList.value = res.data
+    })
+    //默认选中第一个tab
+    if (data) {
+        // 表单赋值
+        for (let key in formData) {
+            formData[key] = data[key]
+        }
+    } else {
+        resetForm()
+        // 在此处恢复默认表单
+        for (let key in formData) {
+            formData[key] = ''
+        }
+        //随机一个key给该模型
+        formData.key = `Process_${new Date().getTime()}`
+    }
+
+
+    dialogVisible.value = true
+}
+
+
+/**
+ * 提交用户表单数据
+ */
+const submit = () => {
+    formRef.value.validate(async (valid: any) => {
+        if (valid) {
+            if (formData.id) {
+                await updateModel(formData)
+                ElMessage.success('更新成功')
+                tableStore.index()
+                dialogVisible.value = false
+            } else {
+                await addModel(formData).then(res => {
+                    formData.id = res.data
+                    //查询进线数据，避免一直处于loading状态
+                    ElMessage.success('保存成功')
+                    tableStore.index()
+                    dialogVisible.value = false
+                })
+            }
+
+        }
+    })
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-upload-list__item {
+    transition: none !important;
+}
+
+.el-select {
+    min-width: 180px;
+}
+</style>