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

src/views/system/auth/userList/UserSelect.vue

@@ -0,0 +1,31 @@
+<!-- TODO puhui999: 先单独一个后面封装成通用选择组件 -->
+<template>
+    <el-select class='w-1/1' v-bind='attrs'>
+        <el-option
+            v-for='(dict, index) in userOptions'
+            :key='index'
+            :label='dict.nickname'
+            :value='dict.id'
+        />
+    </el-select>
+</template>
+
+<script lang='ts' setup>
+import { ref, onMounted, provide } from 'vue'
+import { getUserListByIds } from '@/api/user-boot/user'
+
+defineOptions({ name: 'UserSelect' })
+const attrs = useAttrs()
+const userOptions = ref([]) // 用户下拉数据
+
+onMounted(async () => {
+    let data: any = []
+    await getUserListByIds().then(res => {
+        data = res.data
+    })
+    if (!data || data.length === 0) {
+        return
+    }
+    userOptions.value = data
+})
+</script>

src/views/system/bpm/form/editor/index.vue

@@ -0,0 +1,154 @@
+<template>
+    <div>
+        <content-wrap>
+            <!-- 表单设计器 -->
+            <FcDesigner ref='designer' height='780px'>
+                <template #handle>
+                    <el-button round size='small' type='primary' @click='handleSave' class='ml10' :icon='Plus'>保存
+                    </el-button>
+                    <el-button round size='small' type='primary' @click='go(-1)' class='ml10' :icon='Back'>取消
+                    </el-button>
+                </template>
+            </FcDesigner>
+        </content-wrap>
+
+        <!-- 表单保存的弹窗 -->
+        <el-dialog v-model='dialogVisible' title='保存表单' class='cn-operate-dialog' style='width: 415px;height: 350px'
+                   top='30vh'>
+            <el-scrollbar>
+                <el-form ref='formRef' :model='formData' :rules='formRules' label-width='80px'>
+                    <el-form-item label='表单名' prop='name'>
+                        <el-input v-model='formData.name' placeholder='请输入表单名' />
+                    </el-form-item>
+                    <el-form-item label='状态' prop='status'>
+                        <el-radio-group v-model='formData.status'>
+                            <el-radio
+                                v-for='dict in options'
+                                :key='dict.value'
+                                :label='dict.value'
+                            >
+                                {{ dict.name }}
+                            </el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label='备注' prop='remark'>
+                        <el-input v-model='formData.remark' placeholder='请输入备注' type='textarea' />
+                    </el-form-item>
+                </el-form>
+            </el-scrollbar>
+            <template #footer>
+                <span class='dialog-footer'>
+                    <el-button :disabled='formLoading' type='primary' @click='submitForm'>确 定</el-button>
+                    <el-button @click='dialogVisible = false'>取 消</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang='ts' setup>
+import { onMounted, ref, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import FcDesigner from '@form-create/designer'
+import { useI18n } from '@/hooks/web/useI18n'
+import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
+import { useTagsViewStore } from '@/stores/modules/tagsView'
+import { useFormCreateDesigner } from '@/components/FormCreate'
+import { Plus, Back } from '@element-plus/icons-vue'
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+
+const options = ref([
+    {
+        value: 1,
+        name: '开启'
+    },
+    {
+        value: 0,
+        name: '关闭'
+    }
+])
+
+defineOptions({ name: 'BpmFormEditor' })
+
+import { ElMessage } from 'element-plus'
+import { addForm, getById, updateForm } from '@/api/bpm-boot/form'
+
+const { push, currentRoute, go } = useRouter() // 路由
+const { query } = useRoute() // 路由信息
+const { delView } = useTagsViewStore() // 视图操作
+
+const designer = ref() // 表单设计器
+useFormCreateDesigner(designer) // 表单设计器增强
+const dialogVisible = ref(false) // 弹窗是否展示
+const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
+const formData = ref({
+    name: '',
+    status: 1,
+    remark: ''
+})
+const formRules = reactive({
+    name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }],
+    status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 处理保存按钮 */
+const handleSave = () => {
+    dialogVisible.value = true
+}
+
+type FormVO = {
+    id: number
+    name: string
+    conf: string
+    fields: string[]
+    status: number
+    remark: string
+    createTime: string
+}
+
+/** 提交表单 */
+const submitForm = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    formLoading.value = true
+    try {
+        const data = formData.value as FormVO
+        data.conf = encodeConf(designer) // 表单配置
+        data.fields = encodeFields(designer) // 表单字段
+        if (!data.id) {
+            await addForm(data)
+            ElMessage.success('保存成功')
+        } else {
+            await updateForm(data)
+            ElMessage.success('更新成功')
+        }
+        dialogVisible.value = false
+        close()
+    } finally {
+        formLoading.value = false
+    }
+}
+/** 关闭按钮 */
+const close = () => {
+    delView(unref(currentRoute))
+    go(-1)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+    // 场景一：新增表单
+    const id = query.id as unknown as string
+    if (!id) {
+        return
+    }
+    // 场景二：修改表单
+    await getById(id).then(res => {
+        formData.value = res.data
+        setConfAndFields(designer, res.data.conf, res.data.fields)
+    })
+
+})
+</script>

src/views/system/bpm/form/index.vue

@@ -11,7 +11,7 @@
                 </el-form-item>
             </template>
             <template v-slot:operation>
-                <el-button type='primary' class='ml10' :icon='Plus' @click='add'>新增</el-button>
+                <el-button type='primary' class='ml10' :icon='Plus' @click='openForm'>新增</el-button>
             </template>
         </TableHeader>
         <!--表格-->
@@ -47,12 +47,23 @@ const render = reactive({
 })
 
 const tableStore = new TableStore({
-    url: '/process-boot/workflow/wfForm/list',
+    url: '/bpm-boot/bpm/form/list',
     method: 'POST',
     column: [
         { title: '序号', type: 'seq', width: 80 },
         { title: '表单名称', minWidth: '160', field: 'name' },
         { title: '备注', minWidth: '140', field: 'remark' },
+        { title: '状态', minWidth: '140', field: 'status',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+            },
+            replaceValue: {
+                0: '关闭',
+                1: '开启',
+            }
+        },
         {
             title: '操作',
             align: 'center',
@@ -85,7 +96,8 @@ const tableStore = new TableStore({
                     icon: 'el-icon-EditPen',
                     render: 'basicButton',
                     click: row => {
-                        push(`/admin/form/formDesigner?id=${row.id}`)
+                        // push(`/admin/form/formDesigner?id=${row.id}`)
+                        openForm(row.id)
                     }
                 },
                 {
@@ -119,11 +131,19 @@ const tableStore = new TableStore({
 
     }
 })
-//新增表单
-const add = () => {
-    push(`/admin/form/formDesigner?id=`)
+/** 添加/修改操作表单 */
+const openForm = (id?: string) => {
+    const toRouter: { name: string; query?: { id: string } } = {
+        name: 'BpmFormEditor'
+    }
+    // 表单新建的时候id传的是event需要排除
+    if (typeof id === 'string') {
+        toRouter.query = {
+            id
+        }
+    }
+    push(toRouter)
 }
-
 tableStore.table.params.orderBy = 'desc'
 tableStore.table.params.name = ''
 provide('tableStore', tableStore)

src/views/system/bpm/model/editor/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <ContentWrap>
+    <!-- 流程设计器，负责绘制流程等 -->
+    <MyProcessDesigner
+        key='designer'
+        v-if='xmlString !== undefined'
+        v-model='xmlString'
+        :value='xmlString'
+        v-bind='controlForm'
+        keyboard
+        ref='processDesigner'
+        @init-finished='initModeler'
+        :additionalModel='controlForm.additionalModel'
+        @save='save'
+    />
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <MyProcessPenal
+        key='penal'
+        :bpmnModeler='modeler as any'
+        :prefix='controlForm.prefix'
+        class='process-panel'
+        :model='model'
+    />
+  </ContentWrap>
+</template>
+
+<script lang='ts' setup>
+import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
+import { onMounted, provide, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
+import { addModel, getById, updateModel } from '@/api/bpm-boot/model'
+
+defineOptions({ name: 'BpmModelEditor' })
+
+const { push, currentRoute, go } = useRouter() // 路由
+const { query } = useRoute() // 路由信息
+
+
+const xmlString = ref(undefined) // BPMN XML
+const modeler = ref(null) // BPMN Modeler
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+})
+
+type ProcessDefinitionVO = {
+  id: string
+  version: number
+  deploymentTIme: string
+  suspensionState: number
+}
+
+type ModelVO = {
+  id: number
+  formName: string
+  key: string
+  name: string
+  description: string
+  category: string
+  formType: number
+  formId: number
+  formCustomCreatePath: string
+  formCustomViewPath: string
+  processDefinition: ProcessDefinitionVO
+  status: number
+  remark: string
+  createTime: string
+  bpmnXml: string
+}
+
+
+const model = ref<ModelVO>() // 流程模型的信息
+
+/** 初始化 modeler */
+const initModeler = (item: any) => {
+  setTimeout(() => {
+    modeler.value = item
+  }, 10)
+}
+
+/** 添加/修改模型 */
+const save = async (bpmnXml: any) => {
+  const data = {
+    ...model.value,
+    bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
+  } as unknown as ModelVO
+  // 提交
+  if (data.id) {
+    await updateModel(data)
+    ElMessage.success('修改成功')
+  } else {
+    await addModel(data)
+    ElMessage.success('新增成功')
+  }
+  // 跳转回去
+  go(-1)
+}
+
+
+/** 初始化 */
+onMounted(async () => {
+  const modelId = query.modelId as unknown as string
+  if (!modelId) {
+    ElMessage.error('缺少模型 modelId 编号')
+    return
+  }
+  // 查询模型
+  let data = {
+    bpmnXml: '',
+    key: '',
+    name: ''
+  }
+  await getById(modelId).then(res => {
+    data = res.data
+  })
+  if (!data.bpmnXml) {
+    // 首次创建的 Model 模型，它是没有 bpmnXml，此时需要给它一个默认的
+    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">
+  <process id="${data.key}" name="${data.name}" isExecutable="true" />
+  <bpmndi:BPMNDiagram id="BPMNDiagram">
+    <bpmndi:BPMNPlane id="${data.key}_di" bpmnElement="${data.key}" />
+  </bpmndi:BPMNDiagram>
+</definitions>`
+  }
+  model.value = {
+    ...data,
+    bpmnXml: undefined // 清空 bpmnXml 属性
+  }
+  xmlString.value = data.bpmnXml
+})
+</script>
+<style lang='scss'>
+.process-panel__container {
+  position: absolute;
+  top: 190px;
+  right: 20px;
+}
+</style>

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

@@ -0,0 +1,231 @@
+<!--流程模型管理界面-->
+<template>
+    <div class='default-main'>
+        <TableHeader>
+            <template v-slot:select>
+<!--                <el-form-item label='用户'>-->
+<!--                    <el-select v-model='tableStore.table.params.userId' filterable clearable>-->
+<!--                        <el-option-->
+<!--                            v-for='item in userListData'-->
+<!--                            :key='item.id'-->
+<!--                            :label='item.userName'-->
+<!--                            :value='item.id'-->
+<!--                        />-->
+<!--                    </el-select>-->
+<!--                </el-form-item>-->
+            </template>
+            <template v-slot:operation>
+                <el-button type='primary' @click='add' class='ml10' :icon='Plus'>新增模型</el-button>
+            </template>
+        </TableHeader>
+        <!--表格-->
+        <Table ref='tableRef' isGroup></Table>
+        <model-popup ref='modelPopup' />
+        <!-- 弹窗：表单详情 -->
+        <el-dialog title='表单详情' v-model='formDetailVisible' width='800'>
+            <form-create :rule='formDetailPreview.rule' :option='formDetailPreview.option' />
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { Plus } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { onMounted, provide, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { sgUserList } from '@/api/advance-boot/sgGroven/sgUser'
+import { deleteSgScheme } from '@/api/advance-boot/sgGroven/sgScheme'
+import ModelPopup from '@/views/system/bpm/model/modelPopup.vue'
+import { deployModel } from '@/api/bpm-boot/model'
+import { getById } from '@/api/bpm-boot/form'
+import { setConfAndFields2 } from '@/utils/formCreate'
+
+defineOptions({
+    name: 'governSchemeHistory'
+})
+
+const { push } = useRouter()
+const modelPopup = ref()
+
+
+const tableStore = new TableStore({
+    url: '/bpm-boot/bpm/model/list',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', width: 80 },
+        { title: '模型标识', field: 'key', width: 160 },
+        { title: '模型名称', field: 'name', width: 160 },
+        { title: '流程分类', field: 'categoryName', width: 150 },
+        { title: '表单信息', field: 'formName', width: 170 },
+        {
+            title: '创建时间', field: 'createTime', width: 150
+        },
+        {
+            title: '最新部署的流程定义',
+            children: [
+                { title: '模型版本', width: '150', field: 'processDefinition.version' },
+                {
+                    title: '激活状态', width: '150', field: 'processDefinition.suspensionState',
+                    render: 'tag',
+                    custom: {
+                        2: 'danger',
+                        1: 'success'
+                    },
+                    replaceValue: {
+                        2: '关闭',
+                        1: '开启'
+                    }
+                },
+                { title: '部署时间', width: '150', field: 'processDefinition.deploymentTime' }
+            ]
+        },
+        {
+            title: '操作',
+            align: 'center',
+            minWidth: '200',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'productSetting',
+                    title: '设计流程',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        handleDesign(row.id)
+                    }
+                },
+                {
+                    name: 'productSetting',
+                    title: '部署流程',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        handleDeployConfirm(row.id)
+                    }
+                },
+                {
+                    name: 'productSetting',
+                    title: '表单预览',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    click: row => {
+                        handleFormDetail(row.formId)
+                    }
+                },
+                {
+                    name: 'update',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        deleteSgScheme(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        if (tableStore.table.params.addr) {
+            tableStore.table.params.addrStrOption = tableStore.table.params.addr.map(tempArray => tempArray.join('/'))
+        }
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+
+    }
+})
+
+
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+tableStore.table.params.userId = ''
+
+provide('tableStore', tableStore)
+
+//新增用户信息
+const add = () => {
+    modelPopup.value.open('新增流程模型')
+}
+
+/** 设计流程 */
+const handleDesign = (rowId: string) => {
+    push({
+        name: 'BpmModelEditor',
+        query: {
+            modelId: rowId
+        }
+    })
+}
+
+
+/** 发布流程 */
+const handleDeployConfirm = (rowId: string) => {
+    try {
+        // 删除的二次确认
+        ElMessageBox.confirm(
+            '是否部署该流程?',
+            '提示',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                draggable: true,
+                type: 'warning'
+            }
+        ).then(() => {
+            handleDeploy(rowId)
+        })
+            .catch(() => {
+            })
+    } catch {
+    }
+}
+
+
+const handleDeploy = async (rowId: string) => {
+    // 发起部署
+    await deployModel(rowId)
+    ElMessage.success('部署成功')
+    tableStore.index()
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+    rule: [],
+    option: {}
+})
+
+const handleFormDetail = async (formId: string) => {
+    // 设置表单
+    await getById(formId).then(res => {
+        const data = res.data
+        setConfAndFields2(formDetailPreview, data.conf, data.fields)
+        // 弹窗打开
+        formDetailVisible.value = true
+    })
+
+}
+
+
+</script>

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>

src/views/system/workflow/form/formDesigner.vue

@@ -1,156 +0,0 @@
-<!--用于表单设计器，提供给-->
-<template>
-    <div id='form-designer' ref='formDesignerContent'>
-        <v-form-designer ref='vfDesignerRef' :resetFormJson='true' :designer-config='designerConfig'>
-            <!-- 自定义按钮插槽 -->
-            <template #customToolButtons>
-                <el-button link type='primary' :icon='Finished' @click='saveForm'>保存</el-button>
-                <el-button link type='primary' :icon='Back' @click='go(-1)'>返回</el-button>
-            </template>
-        </v-form-designer>
-        <el-dialog
-            draggable
-            class='cn-operate-dialog'
-            v-model='formVisible'
-            :title='title'
-            style='width: 415px; height: 250px'
-            top='40vh'
-        >
-            <el-scrollbar>
-                <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' placeholder='请输入表单名' clearable />
-                    </el-form-item>
-                    <el-form-item label='备注'>
-                        <el-input v-model='form.remark' placeholder='请输入备注' clearable />
-                    </el-form-item>
-                </el-form>
-            </el-scrollbar>
-            <template #footer>
-            <span class='dialog-footer'>
-                <el-button @click='formVisible = false'>取消</el-button>
-                <el-button type='primary' @click='submit'>确认</el-button>
-            </span>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-<script setup lang='ts'>
-import { Back, Finished } from '@element-plus/icons-vue'
-import { useRouter, useRoute } from 'vue-router'
-import { mainHeight } from '@/utils/layout'
-import { onMounted, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { getFormById, addWFForm, updateWFForm } from '@/api/process-boot/workflow/form'
-
-defineOptions({
-    name: 'formDesginer'
-})
-const vfDesignerRef = ref()
-const { go } = useRouter()
-const { query } = useRoute()
-const formVisible = ref(false)
-const title = ref('新增表单')
-// 表单对象，表单名称、表单备注、表单内容content
-const form = reactive({
-    id: '',
-    name: '',
-    remark: '',
-    content: ''
-})
-
-//form表单校验规则
-const rules = {
-    name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }]
-}
-
-
-const designerConfig = reactive({
-    // 链接信息是否显示
-    externalLink: false,
-    toolbarMaxWidth: 510,
-    // 语言选择下拉是否显示
-    languageMenu: false,
-    // 模版信息是否显示
-    //formTemplates: false,
-    // 事件信息是否显示
-    //eventCollapse: false,
-    // 清空按钮是否显示
-    //clearDesignerButton: false,
-    // 预览按钮是否显示
-    //previewFormButton: false,
-    exportCodeButton: true,
-    generateSFCButton: false
-})
-
-
-//初始化页面样式、并初始化页面数据
-const formDesignerContent = ref()
-const getFormInfo = async () => {
-    form.id = query.id
-    if (form.id.length > 0) {
-        //如果Id不为空，则查询该表单的数据，用于回显表单内容
-        await getFormById(form.id).then(res => {
-            vfDesignerRef.value.setFormJson(res.data.content)
-            form.name = res.data.name
-            form.remark = res.data.remark
-        })
-    }else{
-        vfDesignerRef.value.clearDesigner()
-        form.name = ''
-        form.remark = ''
-    }
-}
-
-onMounted(() => {
-    formDesignerContent.value.style.maxHeight = mainHeight().height
-    formDesignerContent.value.style.overflowY = 'scroll'
-    getFormInfo()
-})
-
-const saveForm = () => {
-    if (!form.id) {
-        title.value = '新增表单'
-    } else {
-        title.value = '修改表单'
-
-    }
-    formVisible.value = true
-}
-
-const formRef = ref()
-
-/**
- * 提交表单数据
- */
-const submit = () => {
-    const formJson = vfDesignerRef.value.getFormJson()
-    form.content = JSON.stringify(formJson)
-    formRef.value.validate(async (valid: any) => {
-        if (valid) {
-            if (form.id) {
-                await updateWFForm(form)
-            } else {
-                await addWFForm(form)
-            }
-            ElMessage.success('保存成功')
-            formVisible.value = false
-            go(-1)
-        }
-    })
-}
-
-
-</script>
-<style scoped>
-
-#form-designer {
-    padding: 10px;
-    overflow: scroll;
-}
-
-.layout-container .layout-main {
-    overflow: scroll !important;
-}
-
-</style>

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

@@ -1,382 +0,0 @@
-<template>
-    <div>
-        <el-card class="steps-card" :bordered="false">
-            <el-row class="xn-row">
-                <!-- <el-col :span="6"></el-col> -->
-                <el-col :span="16">
-                    <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="8">
-                    <div style="float: right; padding-top: 10px">
-                        <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 tool from '@/utils/tool'
-import modelApi from '@/api/flw/modelApi'
-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
-    console.log(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
-        //这里是流程需要的数据
-        console.log(workFlowParame.modelValue.childNode.childNode, '打印组装数据')
-    } else {
-        workFlowParame.modelValue = JSON.parse(record.processJson)
-    }
-    console.log('给流程设计器给值' + 22222)
-    // 判断表单类型
-    console.log(record.formType, '打印表单类型')
-    // if (record.formType === 'DESIGN') {
-    //     // 判断如果是设计表单，那么第一步加入表单设计器
-    //     steps.value.unshift({
-    //         title: '表单设计',
-    //         content: '表单设计'
-    //     })
-    // 		console.log('给流程设计器给值'+333333);
-    //     nextTick(() => {
-    //         // 给表单设计器给值，表单value，table数据结构
-    //         formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
-    //     })
-    // } else {
-    // 给流程设计器给值
-    console.log('给流程设计器给值' + 22222)
-    nextTick(() => {
-        // modelDesign.value.setValue(workFlowParame, recordData.value)
-        console.log( recordData.value,"9999999999打印recordData");
-        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 && formValue.list && 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; */
-    /* width: 100%; */
-}
-
-.steps-action {
-    text-align: right;
-}
-
-.xn-row {
-    margin-bottom: -10px;
-    margin-top: -10px;
-}
-</style>

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

@@ -1,92 +0,0 @@
-<template>
-    <el-card :bordered="false">
-        <SnowyFormDesign
-            ref="formDesign"
-            :show-head="false"
-            :toolbars="['preview', 'reset', 'importJson', 'exportJson']"
-            show-toolbars-text
-            :database-config="formTableValue"
-            :fields="formDesignFields"
-            :dictData="dictData"
-        />
-    </el-card>
-</template>
-
-<script setup>
-import tool from '@/utils/tool'
-// import { nextTick } from 'process'
-// import modelApi from '@/api/flw/modelApi'
-import { nextTick } from 'vue'
-import SnowyFormDesignCom from 'snowy-form-design'
-const dictData = tool.data.get('DICT_TYPE_TREE_DATA')
-import { ref } from 'vue'
-const token = tool.data.get('TOKEN')
-// const apiUrl = tool.data.get('SNOWY_SYS_BASE_CONFIG').SNOWY_SYS_API_URL + '/api/webapp/dev/file/uploadDynamicReturnUrl'
-
-const formDesign = ref()
-const formTableValue = ref([])
-// 表单设计器可以拖的组件
-const formDesignFields = [
-    'input',
-    'textarea',
-    'number',
-    'select',
-    'checkbox',
-    'radio',
-    'date',
-    'time',
-    'rate',
-    'slider',
-    'uploadFile',
-    'uploadImg',
-    'treeSelect',
-    'batch',
-    'editor',
-    'switch',
-    'alert',
-    'text',
-    'html',
-    'divider',
-    'card',
-    'grid',
-    'table',
-    'xnUserSelector',
-    'xnInput'
-]
-// SnowyFormDesignCom.setConfig({
-// 	uploadFile: apiUrl, // 上传文件地址
-// 	uploadImage: apiUrl, //apiUrl, // 上传图片地址
-// 	uploadFileName: 'file', // 上传文件name
-// 	uploadImageName: 'file', // 上传图片name
-// 	uploadFileData: { data: 'snowy' }, // 上传文件额外参数
-// 	uploadImageData: { data: 'snowy' }, // 上传图片额外参数
-// 	uploadFileHeaders: { data: 'snowy' }, // 上传文件请求头部
-// 	getOrgTree: (param) => {
-// 		return modelApi.modelOrgTreeSelector(param).then((data) => {
-// 			return Promise.resolve(data)
-// 		})
-// 	},
-// 	getUserPage: (param) => {
-// 		return modelApi.modelUserSelector(param).then((data) => {
-// 			return Promise.resolve(data)
-// 		})
-// 	}
-// })
-const setValue = (value, tableValue) => {
-    formTableValue.value = tableValue
-	console.log(formTableValue.value,"888777783288382382");
-    // formDesign.value.handleSetData(value)
-}
-const getValue = () => {
-	console.log(formDesign.value);
-	if(formDesign.value){
-		nextTick(()=>{
-		 return formDesign.value.getValue()
-	})
-	}
-}
-defineExpose({
-    getValue,
-    setValue
-})
-</script>

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

@@ -1,202 +0,0 @@
-<!--流程模型表单页面-->
-<template>
-    <div class="default-main">
-        <TableHeader v-if="showTable">
-            <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 v-if="showTable" ref="tableRef" isGroup></Table>
-        <model-popup ref="modelPopup" />
-        <ConfigSteps v-if="!showTable" ref="configStepsRef" @previousPage="previousPage" />
-    </div>
-</template>
-<script lang="ts" setup>
-import { Plus } from '@element-plus/icons-vue'
-import TableHeader from '@/components/table/header/index.vue'
-import Table from '@/components/table/index.vue'
-import TableStore from '@/utils/tableStore'
-import { deleteWFForm, getFormById } from '@/api/process-boot/workflow/form'
-import { nextTick, onMounted, provide, reactive, ref } from 'vue'
-import { ElMessage } from 'element-plus'
-import { useDictData } from '@/stores/dictData'
-import { useRouter } from 'vue-router'
-import ModelPopup from '@/views/system/workflow/model/modelPopup.vue'
-import ConfigSteps from './configSteps.vue'
-const configStepsRef = ref(null)
-const showTable = ref(true)
-const { push } = useRouter()
-const dictData = useDictData()
-const categoryList = dictData.getBasicData('flow_category')
-const modelPopup = ref()
-
-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 => {
-                        go(row)
-                    }
-                },
-                {
-                    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('新增模型')
-}
-const tableRef = ref(null)
-// config配置界面回调
-const previousPage = () => {
-    showTable.value = true
-    // nextTick(() => {
-    //     tableRef.value.refresh()
-    // })
-}
-const go = (row: TableRow) => {
-    showTable.value = false
-    nextTick(() => {
-        configStepsRef.value.configSteps(row)
-        console.log(row, '90999999')
-    })
-    // push(`/admin/model/configSteps?id=${row.id}`)
-}
-tableStore.table.params.searchKey = ''
-tableStore.table.params.category = ''
-provide('tableStore', tableStore)
-onMounted(() => {
-    // 加载数据
-    tableStore.index()
-})
-</script>
-<style scoped></style>

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

@@ -1,171 +0,0 @@
-<template>
-	<el-card>
-		<!-- 引入workflow组件的位置{{ modelDesignData }}222 -->
-		<!-- {{ modelDesignData.modelValue }} -->
-		<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 { deptList, deptTreeSelector, getDeptListByIds } from '@/api/user-boot/dept'
-    import { flwTemplatePrintSelector, flwTemplateSnSelector } from '@/api/workflow-boot/template'
-    import { allRoleList, getRoleListByIds } from '@/api/user-boot/role'
-    import { getUserListByIds, listAllUserByDeptId } from '@/api/user-boot/user'
-
-	// 模型设计器的值
-	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) => {
-		console.log('获取回显值'+value,record,"+++++++++++--------");
-		modelDesignData.value = JSON.parse(JSON.stringify(value))?JSON.parse(JSON.stringify(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.data.map((item) => {
-				return {
-					label: item,
-					value: item
-				}
-			})
-		})
-		// 获取自定义事件执行监听器选择器
-        executionListenerSelectorForCustomEvent().then((data) => {
-			console.log(data,"00000000000");
-			executionListenerSelectorForCustomEventArray.value = data.data.map((item) => {
-				return {
-					label: item,
-					value: item
-				}
-			})
-		})
-		// 获取任务监听器数据
-        taskListenerSelector().then((data) => {
-			taskListenerArray.value = data.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 deptList(param).then((data) => {
-				return Promise.resolve(data)
-			})
-		},
-		rolePageApi: (param) => {
-			return allRoleList(param).then((data) => {
-				return Promise.resolve(data)
-			})
-		},
-		// posPageApi: (param) => {
-		// 	return modelApi.modelPositionSelector(param).then((data) => {
-		// 		return Promise.resolve(data)
-		// 	})
-		// },
-		userPageApi: (param) => {
-			return listAllUserByDeptId('').then((data) => {
-				return Promise.resolve(data)
-			})
-		},
-		checkedUserListApi: (param) => {
-			return getUserListByIds(param).then((data) => {
-				return Promise.resolve(data)
-			})
-		},
-		// checkedPosListApi: (param) => {
-		// 	return userCenterApi.userCenterGetPositionListByIdList(param).then((data) => {
-		// 		return Promise.resolve(data)
-		// 	})
-		// },
-		checkedOrgListApi: (param) => {
-			return getDeptListByIds(param).then((data) => {
-				return Promise.resolve(data)
-			})
-		},
-		checkedRoleListApi: (param) => {
-			return getRoleListByIds(param).then((data) => {
-				return Promise.resolve(data)
-			})
-		}
-	}
-
-	// 抛出钩子
-	defineExpose({
-		getValue,
-		setValue,
-		setFormFieldListValue
-	})
-</script>

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

@@ -1,137 +0,0 @@
-<!--模型的新增和修改的弹出框-->
-<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='名称' prop='name'>
-          <el-input v-model='form.name' clearable />
-        </el-form-item>
-        <el-form-item label='表单类型'>
-          <el-input v-model='form.formType' disabled />
-        </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='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>
-    </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'
-import { addModel } from '@/api/workflow-boot/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({
-  id: '',
-  name: '',
-  formType: '系统表单',
-  category: '',
-  sortCode: 100
-})
-
-//form表单校验规则
-const rules = {
-  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
-  sortCode: [{ 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.formType = '系统表单'
-    form.sortCode = 100
-  }
-  modelVisible.value = true
-}
-
-//重置表单内容
-const resetForm = () => {
-  if (formRef.value) {
-    formRef.value.resetFields()
-  }
-}
-
-/**
- * 提交用户表单数据
- */
-const submit = () => {
-  formRef.value.validate(async (valid: any) => {
-    if (valid) {
-      if (form.id) {
-        await updateWFModel(form)
-      } else {
-        await addModel(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/processDesigner.vue

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

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

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

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

@@ -1,129 +0,0 @@
-<!--模型的新增和修改的弹出框-->
-<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

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