模型基础信息

src/views/pqs/process/definition/editor/index.vue

@@ -90,12 +90,12 @@ onMounted(async () => {
             // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
             data.key = Math.random().toString(36).slice(-8)
             data.bpmnXml = ` <?xml version="1.0" encoding="UTF-8"?>
-  <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
+  <bpmn2:definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
     <process id="flow_${data.key}" name="${data.name || ''}"  />
     <bpmndi:BPMNDiagram id="BPMNDiagram">
       <bpmndi:BPMNPlane id="flow_${data.key}_di" bpmnElement="flow_${data.key}" />
     </bpmndi:BPMNDiagram>
-  </definitions>`
+  </bpmn2:definitions>`
         }
     } else {
         await ModelApi.readXml(prop.model?.deploymentId).then((res: any) => {

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

@@ -0,0 +1,363 @@
+<template>
+    <div>
+        <el-card class='steps-card' :bordered='false'>
+            <el-row class='xn-row'>
+                <el-col :span='6'></el-col>
+                <el-col :span='12'>
+                    <el-steps :current='current'>
+                        <el-step v-for='item in steps' :key='item.title' :title='item.title'>
+                            <template #icon>
+                                <el-icon color='#409efc' class='no-inherit' v-if="item.title === '表单设计'">
+                                    <SetUp />
+                                </el-icon>
+
+                                <el-icon color='#409efc' class='no-inherit' v-if="item.title === '模型设计'">
+                                    <PieChart />
+                                </el-icon>
+
+                                <el-icon color='#409efc' class='no-inherit' v-if="item.title === '完成'">
+                                    <Select />
+                                </el-icon>
+                            </template>
+                        </el-step>
+                    </el-steps>
+                </el-col>
+                <el-col :span='6'>
+                    <div style='float: right'>
+                        <el-button :disabled='current !== 1' style='margin-left: 8px' @click='prev'>
+                            <template #icon>
+                                <Back />
+                            </template>
+                            后退
+                        </el-button>
+                        <el-button :disabled="recordData.formType === 'DESIGN' ? current === 2 : current === 1"
+                                   type='primary' style='margin-left: 8px' @click='next'>
+                            <template #icon>
+                                <Right />
+                            </template>
+                            继续
+                        </el-button>
+                        <el-button type='primary' danger ghost style='margin-left: 8px' @click="emit('previousPage')">
+                            <template #icon>
+                                <Close />
+                            </template>
+                        </el-button>
+                    </div>
+                </el-col>
+            </el-row>
+        </el-card>
+
+        <div v-if='current === 0'>
+            <!--			<form-design ref="formDesign" v-if="recordData.formType === 'DESIGN'" :form-value="workFlowParame.formValue" />-->
+            <!--			<model-design ref="modelDesign" v-else />-->
+            <model-design ref='modelDesign' />
+        </div>
+        <div v-if='current === 1'>
+            <model-design ref='modelDesign' v-if="recordData.formType === 'DESIGN'" />
+            <el-card v-else>
+                <el-result status='success' title='操作成功' sub-title='此时您可以一键部署此流程啦'>
+                    <template #extra>
+                        <el-space size='middle'>
+                            <el-button v-if='current > 0' style='margin-left: 8px' @click='prev'>
+                                <template #icon>
+                                    <Back />
+                                </template>
+                                后退
+                            </el-button>
+                            <el-button
+                                v-if='current == steps.length - 1'
+                                type='primary'
+                                :loading='submitLoading'
+                                @click='seveDeployment'
+                            >
+                                <template #icon>
+                                    <Tools />
+                                </template>
+                                部署运行
+                            </el-button>
+                        </el-space>
+                    </template>
+                </el-result>
+            </el-card>
+        </div>
+        <div v-if='current === 2'>
+            <el-card>
+                <el-result status='success' title='操作成功' sub-title='此时您可以一键部署此流程啦'>
+                    <template #extra>
+                        <el-space size='middle'>
+                            <el-button v-if='current > 0' style='margin-left: 8px' @click='prev'>
+                                <template #icon>
+                                    <Back />
+                                </template>
+                                后退
+                            </el-button>
+                            <el-button
+                                v-if='current == steps.length - 1'
+                                type='primary'
+                                :loading='submitLoading'
+                                @click='seveDeployment'
+                            >
+                                <template #icon>
+                                    <Tools />
+                                </template>
+                                部署运行
+                            </el-button>
+                        </el-space>
+                    </template>
+                </el-result>
+            </el-card>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ElMessage } from 'element-plus'
+import { Plus, SetUp, Select, PieChart, Back, Right, Close, Tools } from '@element-plus/icons-vue'
+import { defineComponent, nextTick, ref } from 'vue'
+import ModelDesign from './modelDesign.vue'
+// import FormDesign from './formDesign.vue'
+import config from '@/components/XnWorkflow/nodes/config/config'
+import { cloneDeep } from 'lodash-es'
+
+const emit = defineEmits({ previousPage: null })
+
+const current = ref(0)
+// const formDesign = ref(null)
+const modelDesign = ref(null)
+
+const recordData = ref({})
+const tableJson = ref([])
+const submitLoading = ref(false)
+// 分布步骤数据
+const steps = ref([
+    {
+        title: '模型设计',
+        content: '模型设计'
+    },
+    {
+        title: '完成',
+        content: '您的流程已经完成，是否立即部署运行'
+    }
+])
+// 整个工作流的数据模型外壳
+const workFlowParame = {
+    formValue: {},
+    modelValue: cloneDeep(config.nodeModel.node)
+}
+// 打开这个界面
+const configSteps = (record) => {
+    // 全局赋值
+    recordData.value = record
+    workFlowParame.formValue = record.formJson == null ? false : JSON.parse(record.formJson)
+    if (record.processJson == null) {
+        // 给模型设计器基础外壳给值
+        workFlowParame.modelValue.id = tool.snowyUuid()
+        workFlowParame.modelValue.type = 'process'
+        workFlowParame.modelValue.title = record.name
+        workFlowParame.modelValue.properties.configInfo = JSON.parse(
+            JSON.stringify(config.nodeConfigInfo.processConfigInfo)
+        )
+
+        // 创建参与人节点
+        const userTaskNode = cloneDeep(config.nodeModel.node)
+        userTaskNode.id = tool.snowyUuid()
+        userTaskNode.title = '发起申请'
+        userTaskNode.dataLegal = false
+        userTaskNode.type = 'startTask'
+
+        // 创建发起人模型
+        const startEventNode = cloneDeep(config.nodeModel.node)
+        startEventNode.id = tool.snowyUuid()
+        startEventNode.title = '开始'
+        startEventNode.type = 'startEvent'
+        startEventNode.dataLegal = true
+        startEventNode.childNode = userTaskNode
+
+        // 装回全局模型中
+        workFlowParame.modelValue.childNode = startEventNode
+    } else {
+        workFlowParame.modelValue = JSON.parse(record.processJson)
+    }
+    // 判断表单类型
+    if (record.formType === 'DESIGN') {
+        // 判断如果是设计表单，那么第一步加入表单设计器
+        steps.value.unshift({
+            title: '表单设计',
+            content: '表单设计'
+        })
+        nextTick(() => {
+            // 给表单设计器给值，表单value，table数据结构
+            // formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
+        })
+    } else {
+        // 给流程设计器给值
+        nextTick(() => {
+            modelDesign.value.setValue(workFlowParame, recordData.value)
+        })
+    }
+}
+// 下一步
+const next = () => {
+    current.value++
+    // 判断是哪一步
+    if (current.value === 1) {
+        if (recordData.value.formType === 'DESIGN') {
+            // formDesignNext()
+        } else {
+            modelDesignNext()
+        }
+    }
+    if (current.value === 2) {
+        modelDesignNext()
+    }
+}
+// const formDesignNext = () => {
+// 	const formValue = formDesign.value.getValue()
+// 	if (!formDataVerification(formValue)) {
+// 		current.value--
+// 		return
+// 	}
+// 	workFlowParame.formValue = formValue
+// 	nextTick(() => {
+// 		modelDesign.value.setValue(workFlowParame, recordData.value)
+// 		// 给流程设计器表单的字段
+// 		modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
+// 	})
+// }
+const modelDesignNext = () => {
+    workFlowParame.modelValue = modelDesign.value.getValue()
+    // 这里完成之后，需要调用保存接口，传给后端
+    recordData.value.formJson = JSON.stringify(workFlowParame.formValue)
+    // 校验整体的model设计后的json
+    if (!modelDataVerification(workFlowParame.modelValue)) {
+        current.value--
+        return
+    }
+    recordData.value.processJson = JSON.stringify(workFlowParame.modelValue)
+    // 保存进去
+    modelApi.submitForm(recordData.value, recordData.value.id).then(() => {
+    })
+}
+// 上一步
+const prev = () => {
+    current.value--
+    if (current.value === 0) {
+        nextTick(() => {
+            if (recordData.value.formType === 'DESIGN') {
+                // formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
+            } else {
+                modelDesign.value.setValue(workFlowParame, recordData.value)
+                modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
+            }
+        })
+    }
+    if (current.value === 1) {
+        nextTick(() => {
+            modelDesign.value.setValue(workFlowParame, recordData.value)
+            modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
+        })
+    }
+}
+// 部署流程按钮
+const seveDeployment = () => {
+    const param = {
+        id: recordData.value.id
+    }
+    submitLoading.value = true
+    modelApi
+        .modelDeploy(param)
+        .then(() => {
+            ElMessage.success('部署成功')
+            submitLoading.value = false
+            // 恢复到第一步
+            current.value = 0
+            // 告诉上一个界面成功了
+            emit('previousPage')
+        })
+        .finally(() => {
+            submitLoading.value = false
+        })
+}
+// 表单设计器选择好的内容校验
+const formDataVerification = (formValue) => {
+    let error = 0
+    // 判断是否包含动态表格batch
+    if (formValue.list.length > 0) {
+        for (let i = 0; i < formValue.list.length; i++) {
+            const items = formValue.list[i]
+            // 处理判断动态表格中
+            if (formValue.list[i].type === 'batch') {
+                // 判断动态表格中是否有内容，没内容提示并不能下一步
+                if (items.list.length > 0) {
+                    for (let j = 0; j < items.list.length; j++) {
+                        const itemsObj = items.list[j]
+                        if (!itemsObj.selectColumn) {
+                            error++
+                            ElMessage.warning('请选择动态表格中的子表字段')
+                            break
+                        }
+                    }
+                } else {
+                    error++
+                    ElMessage.warning('包含了动态表格,但未选择表格中内容')
+                    break
+                }
+            } else {
+                const type = items.type
+                // alert text divider card grid table
+                if (
+                    (type !== 'alert') &
+                    (type !== 'text') &
+                    (type !== 'divider') &
+                    (type !== 'card') &
+                    (type !== 'grid') &
+                    (type !== 'table')
+                ) {
+                    // 其他项判断确认选择了表，并且选择了字段，但凡有一个没选视为不过
+                    if (!items.selectTable || !items.selectColumn) {
+                        error++
+                        ElMessage.warning('名称为：' + items.label + ' 的组件未选择表或字段')
+                        break
+                    }
+                }
+            }
+        }
+    } else {
+        error++
+        ElMessage.warning('未选择任何组件并赋予字段')
+    }
+    return error === 0
+}
+// 模型整体校验
+const modelDataVerification = (modelValue) => {
+    if (JSON.stringify(modelValue).indexOf('dataLegal":false') !== -1) {
+        ElMessage.warning('流程未配置完成')
+        return false
+    }
+    return true
+}
+// 抛出钩子
+defineExpose({
+    configSteps
+})
+defineComponent({
+    ModelDesign
+})
+</script>
+<style scoped>
+.steps-card {
+    margin-top: -12px;
+    margin-left: -12px;
+    margin-right: -12px;
+    margin-bottom: 10px;
+    padding-top: -10px;
+}
+
+.steps-action {
+    text-align: right;
+}
+
+.xn-row {
+    margin-bottom: -10px;
+    margin-top: -10px;
+}
+</style>

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

@@ -1,33 +1,33 @@
 <!--流程模型表单页面-->
 <template>
-    <div class='default-main'>
-        <TableHeader>
-            <template v-slot:select>
-                <el-form-item label='模型名称'>
-                    <el-input
-                        v-model='tableStore.table.params.name'
-                        clearable
-                    />
-                </el-form-item>
-                <el-form-item label='流程类别'>
-                    <el-select v-model='tableStore.table.params.category' clearable>
-                        <el-option
-                            v-for='item in categoryList'
-                            :key='item.id'
-                            :label='item.name'
-                            :value='item.code'
-                        />
-                    </el-select>
-                </el-form-item>
-            </template>
-            <template v-slot:operation>
-                <el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
-            </template>
-        </TableHeader>
-        <!--表格-->
-        <Table ref='tableRef' isGroup></Table>
-        <model-popup ref='modelPopup' />
-    </div>
+  <div class='default-main'>
+    <TableHeader>
+      <template v-slot:select>
+        <el-form-item label='模型名称'>
+          <el-input
+              v-model='tableStore.table.params.searchKey'
+              clearable
+          />
+        </el-form-item>
+        <el-form-item label='流程类别'>
+          <el-select v-model='tableStore.table.params.category' clearable>
+            <el-option
+                v-for='item in categoryList'
+                :key='item.id'
+                :label='item.name'
+                :value='item.code'
+            />
+          </el-select>
+        </el-form-item>
+      </template>
+      <template v-slot:operation>
+        <el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
+      </template>
+    </TableHeader>
+    <!--表格-->
+    <Table ref='tableRef' isGroup></Table>
+    <model-popup ref='modelPopup' />
+  </div>
 
 </template>
 <script lang='ts' setup>
@@ -42,132 +42,148 @@ import { useDictData } from '@/stores/dictData'
 import { useRouter } from 'vue-router'
 import ModelPopup from '@/views/system/workflow/model/modelPopup.vue'
 
-
 const { push } = useRouter()
 const dictData = useDictData()
 const categoryList = dictData.getBasicData('flow_category')
 const modelPopup = ref()
-const tableStore = new TableStore({
-    url: '/process-boot/workflow/model/list',
-    method: 'POST',
-    column: [
-        { title: '序号', type: 'seq', width: 80 },
-        { title: '模型标识', minWidth: '160', field: 'modelKey' },
-        { title: '模型名称', minWidth: '160', field: 'modelName' },
-        {
-            title: '流程类别', minWidth: '160', field: 'category',
-            formatter: (row: any) => {
-                return categoryList.filter(item => item.code === row.cellValue)[0].name
-            }
-        },
-        {
-            title: '模型版本', minWidth: '120', field: 'version', type: 'html',
-            formatter: (obj: any) => {
-                const val = obj.row.version
-                return `<a href='javascript:void(0);'  style='color: #409EFF;text-decoration: none'>V${val}</a>`
-                // return `<el-tag size='small'>v{{val}}</el-tag>`
-            }
-        },
-        { title: '备注', minWidth: '160', field: 'description' },
-        {
-            title: '操作',
-            align: 'center',
-            render: 'buttons',
-            minWidth: '230',
-            fixed: 'right',
-            buttons: [
-                {
-                    name: 'view',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        modelPopup.value.open('修改模型', row)
-                    }
-                },
-                {
-                    name: 'update',
-                    title: '设计',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        push(`/admin/model/processDesigner?id=${row.id}`)
-                    }
-                },
-                {
-                    name: 'deploy',
-                    title: '部署',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        push(`/admin/form/formDesigner?id=${row.id}`)
-                    }
-                },
-                {
-                    name: 'deploy',
-                    title: '预览流程',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        push(`/admin/form/formDesigner?id=${row.id}`)
-                    }
-                },
-                {
-                    name: 'deploy',
-                    title: '历史版本',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-                    click: row => {
-                        push(`/admin/form/formDesigner?id=${row.id}`)
-                    }
-                },
-                {
-                    name: 'update',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除吗？'
-                    },
-                    click: row => {
-                        deleteWFForm(row.id).then(res => {
-                            ElMessage.success('删除成功')
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '') {
-                delete tableStore.table.params[key]
-            }
-        }
 
+
+
+const tableStore = new TableStore({
+  url: '/workflow-boot/flw/model/page',
+  method: 'POST',
+  column: [
+    { title: '序号', type: 'seq', width: 80 },
+    { title: '流程名称', minWidth: '160', field: 'name' },
+    {
+      title: '流程分类', minWidth: '160', field: 'category',
+      formatter: (row: any) => {
+        return categoryList.filter(item => item.code === row.cellValue)[0].name
+      }
+    },
+    {
+      title: '模型版本', minWidth: '120', field: 'versionCode', type: 'html',
+      formatter: (obj: any) => {
+        const val = obj.row.versionCode
+        if (val) {
+          return `<a href='javascript:void(0);'  style='color: #409EFF;text-decoration: none'>V${val}</a>`
+        } else {
+          return ''
+        }
+      }
+    },
+    {
+      title: '表单类型', minWidth: '160', field: 'formType',
+      formatter: (obj: any) => {
+        const val = obj.row.formType
+        if (val == 'DESIGN') {
+          return '系统表单'
+        } else {
+          return ''
+        }
+      }
+    },
+    { title: '排序码', minWidth: '160', field: 'sortCode' },
+    { title: '状态', minWidth: '160', field: 'modelStatus' },
+    {
+      title: '操作',
+      align: 'center',
+      render: 'buttons',
+      minWidth: '230',
+      fixed: 'right',
+      buttons: [
+        {
+          name: 'view',
+          title: '编辑',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            modelPopup.value.open('修改模型', row)
+          }
+        },
+        {
+          name: 'update',
+          title: '设计',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            push(`/admin/model/configSteps?id=${row.id}`)
+          }
+        },
+        {
+          name: 'deploy',
+          title: '部署',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            push(`/admin/form/formDesigner?id=${row.id}`)
+          }
+        },
+        {
+          name: 'deploy',
+          title: '预览流程',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            push(`/admin/form/formDesigner?id=${row.id}`)
+          }
+        },
+        {
+          name: 'deploy',
+          title: '历史版本',
+          type: 'primary',
+          icon: 'el-icon-EditPen',
+          render: 'basicButton',
+          click: row => {
+            push(`/admin/form/formDesigner?id=${row.id}`)
+          }
+        },
+        {
+          name: 'update',
+          title: '删除',
+          type: 'danger',
+          icon: 'el-icon-Delete',
+          render: 'confirmButton',
+          popconfirm: {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            confirmButtonType: 'danger',
+            title: '确定删除吗？'
+          },
+          click: row => {
+            deleteWFForm(row.id).then(res => {
+              ElMessage.success('删除成功')
+              tableStore.index()
+            })
+          }
+        }
+      ]
     }
+  ],
+  beforeSearchFun: () => {
+    for (let key in tableStore.table.params) {
+      if (tableStore.table.params[key] === '') {
+        delete tableStore.table.params[key]
+      }
+    }
+
+  }
 })
 //新增表单
 const add = () => {
-    modelPopup.value.open('新增模型')
+  modelPopup.value.open('新增模型')
 }
 
-tableStore.table.params.orderBy = 'desc'
-tableStore.table.params.name = ''
+tableStore.table.params.searchKey = ''
+tableStore.table.params.category = ''
 provide('tableStore', tableStore)
 onMounted(() => {
-    // 加载数据
-    tableStore.index()
+  // 加载数据
+  tableStore.index()
 })
 </script>
 <style scoped>

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

@@ -0,0 +1,163 @@
+<template>
+	<el-card>
+		<Workflow
+			v-model="modelDesignData.modelValue"
+			:form-field-list-value="formFieldListValue"
+			:record-data="recordData"
+			:sn-template-array="snTemplateArray"
+			:print-template-array="printTemplateArray"
+			:execution-listener-array="executionListenerArray"
+			:execution-listener-selector-for-custom-event-array="executionListenerSelectorForCustomEventArray"
+			:task-listener-array="taskListenerArray"
+			:selector-api-function="selectorApiFunction"
+		/>
+	</el-card>
+</template>
+<script setup name="modelDesign">
+	import Workflow from '@/components/XnWorkflow/index.vue'
+    import { ref } from 'vue'
+	// import modelApi from '@/api/flw/modelApi'
+	// import userCenterApi from '@/api/sys/userCenterApi'
+	// import templatePrintApi from '@/api/flw/templatePrintApi'
+	// import templateSnApi from '@/api/flw/templateSnApi'
+    import {
+        executionListenerSelector,
+        executionListenerSelectorForCustomEvent,
+        taskListenerSelector
+    } from '@/api/workflow-boot/model'
+    import { deptTreeSelector } from '@/api/user-boot/dept'
+    import { flwTemplatePrintSelector, flwTemplateSnSelector } from '@/api/workflow-boot/template'
+
+	// 模型设计器的值
+	const modelDesignData = ref({})
+	// 模型主题值
+	const recordData = ref({})
+	// 序列号列表
+	const snTemplateArray = ref([])
+	// 打印模板列表
+	const printTemplateArray = ref([])
+	// 执行监听器数据
+	const executionListenerArray = ref([])
+	// 自定义事件执行监听器选择器
+	const executionListenerSelectorForCustomEventArray = ref([])
+	// 任务监听器数据
+	const taskListenerArray = ref([])
+
+	const formFieldListValue = ref([])
+	// 获取值
+	const getValue = () => {
+		return modelDesignData.value.modelValue
+	}
+
+	// 回显值
+	const setValue = (value, record) => {
+		modelDesignData.value = value
+		recordData.value = record
+		// 获取序列号列表
+        flwTemplateSnSelector().then((data) => {
+			snTemplateArray.value = data.map((item) => {
+				return {
+					value: item['id'],
+					label: item['name']
+				}
+			})
+		})
+
+		// 获取打印模板列表
+        flwTemplatePrintSelector().then((data) => {
+			printTemplateArray.value = data.map((item) => {
+				return {
+					value: item['id'],
+					label: item['name']
+				}
+			})
+		})
+		// 获取执行监听器数据
+        executionListenerSelector().then((data) => {
+			executionListenerArray.value = data.map((item) => {
+				return {
+					label: item,
+					value: item
+				}
+			})
+		})
+		// 获取自定义事件执行监听器选择器
+        executionListenerSelectorForCustomEvent().then((data) => {
+			executionListenerSelectorForCustomEventArray.value = data.map((item) => {
+				return {
+					label: item,
+					value: item
+				}
+			})
+		})
+		// 获取任务监听器数据
+        taskListenerSelector().then((data) => {
+			taskListenerArray.value = data.map((item) => {
+				return {
+					label: item,
+					value: item
+				}
+			})
+		})
+	}
+	// 传字段的数据过来
+	const setFormFieldListValue = (value) => {
+		if (value) {
+			formFieldListValue.value = JSON.parse(JSON.stringify(value))
+		}
+	}
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return deptTreeSelector(param).then((orgTree) => {
+				return Promise.resolve(orgTree)
+			})
+		},
+		// orgPageApi: (param) => {
+		// 	return modelApi.modelOrgListSelector(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// rolePageApi: (param) => {
+		// 	return modelApi.modelRoleSelector(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// posPageApi: (param) => {
+		// 	return modelApi.modelPositionSelector(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// userPageApi: (param) => {
+		// 	return modelApi.modelUserSelector(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// checkedUserListApi: (param) => {
+		// 	return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// checkedPosListApi: (param) => {
+		// 	return userCenterApi.userCenterGetPositionListByIdList(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// checkedOrgListApi: (param) => {
+		// 	return userCenterApi.userCenterGetOrgListByIdList(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// },
+		// checkedRoleListApi: (param) => {
+		// 	return userCenterApi.userCenterGetRoleListByIdList(param).then((data) => {
+		// 		return Promise.resolve(data)
+		// 	})
+		// }
+	}
+	// 抛出钩子
+	defineExpose({
+		getValue,
+		setValue,
+		setFormFieldListValue
+	})
+</script>

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

@@ -2,21 +2,21 @@
 <template>
   <el-dialog
       draggable
-      class="cn-operate-dialog"
-      v-model="modelVisible"
-      :title="title"
-      style="width: 415px; height: 400px"
-      top="30vh"
+      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 :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
+        <el-form-item label='名称' prop='name'>
+          <el-input v-model='form.name' clearable />
         </el-form-item>
-        <el-form-item label="模型名称" prop='modelName'>
-          <el-input v-model="form.modelName" placeholder="请输入模型名称" clearable />
+        <el-form-item label='表单类型'>
+          <el-input v-model='form.formType' disabled />
         </el-form-item>
-        <el-form-item label="流程分类" prop="category">
+        <el-form-item label='流程分类' prop='category'>
           <el-select v-model='form.category' clearable>
             <el-option
                 v-for='item in categoryList'
@@ -26,25 +26,31 @@
             />
           </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 label='排序' prop='sortCode'>
+          <el-input v-model='form.sortCode' placeholder='请输入排序' />
         </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 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>
+<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'
+import { addWFModel, updateWFModel } from '@/api/process-boot/workflow/model'
+import { addModel } from '@/api/workflow-boot/model'
 
 
 const dictData = useDictData()
@@ -57,17 +63,18 @@ const formRef = ref()
 
 // 注意不要和表单ref的命名冲突
 const form = reactive({
-  modelId: undefined,
-  modelKey: `Process_${new Date().getTime()}`,
-  modelName: '',
+  id: '',
+  name: '',
+  formType: '系统表单',
   category: '',
-  description: '',
+  sortCode: 100
 })
 
 //form表单校验规则
 const rules = {
-  modelName: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '流程分类必选', trigger: 'change' }],
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  sortCode: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '流程分类必选', trigger: 'change' }]
 }
 
 const open = (text: string, data?: any) => {
@@ -83,7 +90,8 @@ const open = (text: string, data?: any) => {
     for (let key in form) {
       form[key] = ''
     }
-    form.modelKey = `Process_${new Date().getTime()}`
+    form.formType = '系统表单'
+    form.sortCode = 100
   }
   modelVisible.value = true
 }
@@ -101,10 +109,10 @@ const resetForm = () => {
 const submit = () => {
   formRef.value.validate(async (valid: any) => {
     if (valid) {
-      if (form.modelId) {
+      if (form.id) {
         await updateWFModel(form)
       } else {
-        await addWFModel(form)
+        await addModel(form)
       }
       ElMessage.success('保存成功')
       tableStore.index()

src/views/system/workflow/model/translate/translations.js

@@ -1,276 +0,0 @@
-/**
- *参考 https://github.com/bpmn-io/bpmn-js-i18n
- */
-
-const translations = {
-
-    "Name":"名称",
-    "Value":"值",
-    "ID":"唯一标识(ID)",
-    "General":"基础属性",
-
-    "Activate the create/remove space tool": "启动创建/删除空间工具",
-    "Activate the global connect tool": "启动全局连接工具",
-    "Activate the hand tool": "启动手动工具",
-    "Activate the lasso tool": "启动套索工具",
-    "Ad-hoc": "Ad-hoc子流程",
-    "Add Lane above": "添加到通道之上",
-    "Add Lane below": "添加到通道之下",
-    "Append ConditionIntermediateCatchEvent": "添加中间条件捕获事件",
-    "Append element": "添加元素",
-    "Append EndEvent": "添加结束事件",
-    "Append Gateway": "添加网关",
-    "Append Intermediate/Boundary Event": "添加中间/边界事件",
-    "Append MessageIntermediateCatchEvent": "添加消息中间捕获事件",
-    "Append ReceiveTask": "添加接收任务",
-    "Append SignalIntermediateCatchEvent": "添加信号中间捕获事件",
-    "Append Task": "添加任务",
-    "Append TimerIntermediateCatchEvent": "添加定时器中间捕获事件",
-    "Append compensation activity": "追加补偿活动",
-    "Append {type}": "追加 {type}",
-    "Boundary Event": "边界事件",
-    "Business Rule Task": "规则任务",
-    "Call Activity": "引用流程",
-    "Cancel Boundary Event": "取消边界事件",
-    "Cancel End Event": "取消结束事件",
-    "Change type": "更改类型",
-    "Collapsed Pool": "折叠池",
-    "Collection": "集合",
-    "Compensation Boundary Event": "补偿边界事件",
-    "Compensation End Event": "结束补偿事件",
-    "Compensation Intermediate Throw Event": "中间补偿抛出事件",
-    "Compensation Start Event": "补偿启动事件",
-    "Complex Gateway": "复杂网关",
-    "Conditional Boundary Event": "条件边界事件",
-    "Conditional Boundary Event (non-interrupting)": "条件边界事件 (非中断)",
-    "Conditional Flow": "条件流",
-    "Conditional Intermediate Catch Event": "中间条件捕获事件",
-    "Conditional Start Event": "条件启动事件",
-    "Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
-    "Connect using Association": "文本关联",
-    "Connect using DataInputAssociation": "数据关联",
-    "Connect using Sequence/MessageFlow or Association": "消息关联",
-    "Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出/边界事件",
-    "Create DataObjectReference": "创建数据对象引用",
-    "Create DataStoreReference": "创建数据存储引用",
-    "Create element": "创建元素",
-    "Create EndEvent": "创建结束事件",
-    "Create Gateway": "创建网关",
-    "Create Group": "创建组",
-    "Create Intermediate/Boundary Event": "创建中间/边界事件",
-    "Create Pool/Participant": "创建池/参与者",
-    "Create StartEvent": "创建开始事件",
-    "Create Task": "创建任务",
-    "Create expanded SubProcess": "创建可折叠子流程",
-    "Create {type}": "创建 {type}",
-    "Data": "数据",
-    "Data Object Reference": "数据对象引用",
-    "Data Store Reference": "数据存储引用",
-    "Default Flow": "默认流",
-    "Divide into three Lanes": "分成三条通道",
-    "Divide into two Lanes": "分成两条通道",
-    "Empty Pool": "空泳道",
-    "Empty Pool (removes content)": "清空泳道（删除内容）",
-    "End Event": "结束事件",
-    "Error Boundary Event": "错误边界事件",
-    "Error End Event": "结束错误事件",
-    "Error Start Event": "错误启动事件",
-    "Escalation Boundary Event": "升级边界事件",
-    "Escalation Boundary Event (non-interrupting)": "升级边界事件 (非中断)",
-    "Escalation End Event": "结束升级事件",
-    "Escalation Intermediate Throw Event": "中间升级抛出事件",
-    "Escalation Start Event": "升级启动事件",
-    "Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)",
-    "Events": "事件",
-    "Event Sub Process": "事件子流程",
-    "Event based Gateway": "事件网关",
-    "Exclusive Gateway": "独占网关",
-    "Expanded Pool": "展开泳道",
-    "Gateways": "网关",
-    "Inclusive Gateway": "包容网关",
-    "Intermediate Throw Event": "中间抛出事件",
-    "Link Intermediate Catch Event": "中间链接捕获事件",
-    "Link Intermediate Throw Event": "中间链接抛出事件",
-    "Loop": "循环",
-    "Manual Task": "手动任务",
-    "Message Boundary Event": "消息边界事件",
-    "Message Boundary Event (non-interrupting)": "消息边界事件 (非中断)",
-    "Message End Event": "结束消息事件",
-    "Message Intermediate Catch Event": "中间消息捕获事件",
-    "Message Intermediate Throw Event": "中间消息抛出事件",
-    "Message Start Event": "消息启动事件",
-    "Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
-    "Parallel Gateway": "并行网关",
-    "Parallel Multi Instance": "并行多实例",
-    "Participants": "参与者",
-    "Participant Multiplicity": "参与者多重性",
-    "Receive Task": "接受任务",
-    "Remove": "移除",
-    "Script Task": "脚本任务",
-    "Send Task": "发送任务",
-    "Sequence Flow": "顺序流",
-    "Sequential Multi Instance": "串行多实例",
-    "Service Task": "服务任务",
-    "Signal Boundary Event": "信号边界事件",
-    "Signal Boundary Event (non-interrupting)": "信号边界事件 (非中断)",
-    "Signal End Event": "结束信号事件",
-    "Signal Intermediate Catch Event": "中间信号捕获事件",
-    "Signal Intermediate Throw Event": "中间信号抛出事件",
-    "Signal Start Event": "信号启动事件",
-    "Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
-    "Start Event": "开始事件",
-    "Sub Process": "子流程",
-    "Sub Processes": "子流程",
-    "Sub Process (collapsed)": "可折叠子流程",
-    "Sub Process (expanded)": "可展开子流程",
-    "Task": "任务",
-    "Tasks": "任务",
-    "Terminate End Event": "终止边界事件",
-    "Timer Boundary Event": "定时边界事件",
-    "Timer Boundary Event (non-interrupting)": "定时边界事件 (非中断)",
-    "Timer Intermediate Catch Event": "中间定时捕获事件",
-    "Timer Start Event": "定时启动事件",
-    "Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
-    "Transaction": "事务",
-    "User Task": "用户任务",
-    "already rendered {element}": "{element} 已呈现",
-    "diagram not part of bpmn:Definitions": "图表不是 bpmn:Definitions 的一部分",
-    "element required": "需要元素",
-    "correcting missing bpmnElement on {plane} to {rootElement}": "在 {plane} 上更正缺失的 bpmnElement 为 {rootElement}",
-    "element {element} referenced by {referenced}#{property} not yet drawn": "元素 {element} 的引用 {referenced}#{property} 尚未绘制",
-    "failed to import {element}": "{element} 导入失败",
-    "flow elements must be children of pools/participants": "元素必须是池/参与者的子级",
-    "more than {count} child lanes": "超过 {count} 条通道",
-    "missing {semantic}#attachedToRef": "在 {element} 中缺少 {semantic}#attachedToRef",
-    "multiple DI elements defined for {element}": "为 {element} 定义了多个 DI 元素",
-    "no bpmnElement referenced in {element}": "{element} 中没有引用 bpmnElement",
-    "no diagram to display": "没有要显示的图表",
-    "no shape type specified": "未指定形状类型",
-    "no parent for {element} in {parent}": "在 {element} 中没有父元素 {parent}",
-    "no process or collaboration to display": "没有可显示的流程或协作",
-    "out of bounds release": "越界释放",
-    "Version tag":"版本标记",
-    "Change element":"改变元素",
-    "Documentation":"文档",
-    "PROCESS":"流程",
-    "Element documentation":"元素文档说明",
-    "User assignment":"分配用户",
-    "History cleanup":"历史记录清理",
-    "Time to live":"历史记录生存时间",
-    "Tasklist":"任务列表",
-    "Candidate starter":"候选启动器",
-    "Candidate starter groups":"候选启动组",
-    "Specify more than one group as a comma separated list.":"多个组用','分隔.",
-    "Candidate starter users":"候选发起人",
-    "Specify more than one user as a comma separated list.":"多个用户用','分隔.",
-    "External task":"外部任务",
-    "Startable":"可启动(Startable)",
-    "Executable":"可直接执行",
-    "Job execution":"作业执行",
-    "Priority":"优先级",
-    "Forms":"表单",
-    "Execution listeners":"执行侦听器",
-    "Extension properties":"扩展属性",
-    "Event type":"事件类型",
-    "Listener type":"侦听器类型",
-    "Field injection":"字段注入",
-    "Start initiator":"开始发起人",
-    "Initiator":"发起人",
-    "Asynchronous continuations":"异步延续",
-    "Before":"之前",
-    "After":"之后",
-    "Inputs":"输入",
-    "Outputs":"输出",
-    "Local variable name":"局部变量名称",
-    "Assignment type":"分配类型",
-    "Format":"格式",
-    "Type":"类型",
-    "Expression":"表达式(Expression)",
-    "Script":"脚本(Script)",
-    "Delegate expression":"委托表达式(Delegate expression)",
-    "Java class":"Java类(Java class)",
-    "start":"开始(start)",
-    "end":"结束(end)",
-    "Start typing \"${}\" to create an expression.":"开始键入\"${}\"以创建表达式.",
-    "Process variable name":"过程变量名称",
-    "List values":"列表值",
-    "Map entries":"映射条目",
-    "Key":"键",
-    "Values":"值",
-    "Form reference":"引用表单ID",
-    "Binding":"结合",
-    "Version":"版本",
-    "Form fields":"表单字段",
-    "Form key":"表单ID",
-    "Embedded or External Task Forms":"拓展表单",
-    "Camunda Forms":"标准表单",
-    "Generated Task Forms":"内置表单",
-    "Refers to the process variable name":"指的是(引用)过程变量名称",
-    "Label":"标签",
-    "Default value":"默认值",
-    "Constraints":"限制",
-    "Properties":"属性",
-    "Config":"配置",
-    "Implementation":"实施",
-    "Field injections":"字段注入",
-    "Task listeners":"任务侦听器",
-    "Listener ID":"侦听器ID",
-    "Message":"消息",
-    "Global message reference":"引用全局消息ID",
-    "Result variable":"结果变量",
-    "Resource":"资源",
-    "External resource":"外部资源",
-    "Inline script":"内联脚本",
-    "Process variables":"过程变量",
-    "Global signal reference":"引用全局信号ID",
-    "Signal":"信号",
-    "Called element":"被调用元素",
-    "In mapping propagation":"在映射传播中",
-    "Propagate all variables":"传播所有变量",
-    "Out mapping propagation":"向外映射传播",
-    "In mappings":"在映射中",
-    "Source":"来源",
-    "Target":"目标",
-    "Local":"局部的(Local)",
-    "Out mappings":"输出映射",
-    "Link":"链接",
-    "Timer":"定时器",
-    "Retry time cycle":"重试时间周期",
-    "Variable name":"变量名称",
-    "Condition Expression":"条件表达式",
-    "Condition":"条件",
-    "Process documentation":"流程文档",
-    "Assignee":"委托人",
-    "Candidate groups":"候选组",
-    "Candidate users":"候选用户",
-    "Due date":"期限",
-    "The due date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"到期日期为EL表达式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)",
-    "Follow up date":"跟进日期",
-    "The follow up date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"作为EL表达式(例如${someDate})或ISO日期(例如2015-06-26T09:54:00)的跟进日期",
-    "Connector ID":"连接器ID",
-    "Connector inputs":"连接器输入",
-    "Connector outputs":"连接器输出",
-    "Topic":"主题",
-    "Errors":"错误",
-    "Global error reference":"引用全局错误ID",
-    "Throw expression":"Throw表达式",
-    "Decision reference":"引用决策ID",
-    "Tenant ID":"租户ID",
-    "Multi-instance":"多实例",
-    "Loop cardinality":"循环基数",
-    "Completion condition":"完成条件",
-    "Element variable":"元素变量",
-    "Asynchronous before":"异步之前",
-    "Asynchronous after":"异步之后",
-};
-
-export const customTranslate = (template, replacements) =>{
-    replacements = replacements || {};
-    // Translate
-    template = translations[template] || template;
-    // Replace
-    return template.replace(/{([^}]+)}/g, (_, key)=> {
-        return replacements[key] || '{' + key + '}';
-    });
-}
-

src/views/system/workflow/model_old/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>

src/views/system/workflow/model_old/processDesigner.vue

@@ -0,0 +1,9 @@
+<template>
+    <h1>111</h1>
+</template>
+
+<script lang='ts' setup>
+</script>
+
+<style scoped>
+</style>