提交模型设计代码

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/colors": "^7.0.2",
     "@element-plus/icons-vue": "^2.3.1",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@vueuse/core": "^10.7.0",
@@ -31,6 +32,7 @@
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "jquery": "^3.7.1",
+    "js-pinyin": "^0.2.5",
     "less": "^4.2.0",
     "lodash-es": "^4.17.21",
     "luckyexcel": "^1.0.1",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@ant-design/colors':
+        specifier: ^7.0.2
+        version: 7.0.2
       '@element-plus/icons-vue':
         specifier: ^2.3.1
         version: 2.3.1(vue@3.4.26(typescript@5.4.5))
@@ -74,6 +77,9 @@ importers:
       jquery:
         specifier: ^3.7.1
         version: 3.7.1
+      js-pinyin:
+        specifier: ^0.2.5
+        version: 0.2.5
       less:
         specifier: ^4.2.0
         version: 4.2.0
@@ -181,6 +187,9 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==, tarball: https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz}
     engines: {node: '>=6.0.0'}
 
+  '@ant-design/colors@7.0.2':
+    resolution: {integrity: sha512-7KJkhTiPiLHSu+LmMJnehfJ6242OCxSlR3xHVBecYxnMW8MS/878NXct1GqYARyL59fyeFdKRxXTfvR9SnDgJg==, tarball: https://registry.npmmirror.com/@ant-design/colors/-/colors-7.0.2.tgz}
+
   '@babel/code-frame@7.24.2':
     resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==, tarball: https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.24.2.tgz}
     engines: {node: '>=6.9.0'}
@@ -1513,6 +1522,9 @@ packages:
   jquery@3.7.1:
     resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==, tarball: https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz}
 
+  js-pinyin@0.2.5:
+    resolution: {integrity: sha512-XuqAZ9fctWCzKx/ALgsDRtfd/xwaC/IyAwkDkW8jTXhlVNRuj+lG2tKEOWraCHLgaOSPkSFFWXB3qjfNTaMU6A==, tarball: https://registry.npmmirror.com/js-pinyin/-/js-pinyin-0.2.5.tgz}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==, tarball: https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz}
 
@@ -2240,6 +2252,10 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@ant-design/colors@7.0.2':
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+
   '@babel/code-frame@7.24.2':
     dependencies:
       '@babel/highlight': 7.24.5
@@ -3744,6 +3760,8 @@ snapshots:
 
   jquery@3.7.1: {}
 
+  js-pinyin@0.2.5: {}
+
   js-tokens@4.0.0: {}
 
   jsesc@2.5.2: {}

src/api/dbs/dbsApi.js

@@ -0,0 +1,45 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/tenapp/dbs/${url}`, ...arg)
+/**
+ * 多租户
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取数据源分页
+	dbsPage(data) {
+		return request('storage/page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'storage/edit' : 'storage/add', data)
+	},
+	// 删除数据源
+	dbsDelete(data) {
+		return request('storage/delete', data)
+	},
+	// 获取数据源详情
+	dbsDetail(data) {
+		return request('storage/detail', data, 'get')
+	},
+	// 获取数据库中所有表
+	dbsTables(data) {
+		return request('tables', data, 'get')
+	},
+	// 获取数据库表中所有字段
+	dbsTableColumns(data) {
+		return request('tableColumns', data, 'get')
+	}
+}

src/api/flw/modelApi.js

@@ -0,0 +1,89 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/flwapp/flw/model/${url}`, ...arg)
+/**
+ * 模型
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取模型分页
+	modelPage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取所有模型列表
+	modelAllList(data) {
+		return request('allList', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除模型
+	modelDelete(data) {
+		return request('delete', data)
+	},
+	// 部署模型
+	modelDeploy(data) {
+		return request('deploy', data)
+	},
+	// 获取模型详情
+	modelDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 停用模型
+	modelDisable(data) {
+		return request('disableModel', data)
+	},
+	// 启用模型
+	modelEnable(data) {
+		return request('enableModel', data)
+	},
+	// 模型降版
+	modelDownVersion(data) {
+		return request('downVersion', data)
+	},
+	// 获取组织树选择器
+	modelOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取组织列表选择器
+	modelOrgListSelector(data) {
+		return request('orgListSelector', data, 'get')
+	},
+	// 获取职位选择器
+	modelPositionSelector(data) {
+		return request('positionSelector', data, 'get')
+	},
+	// 获取角色选择器
+	modelRoleSelector(data) {
+		return request('roleSelector', data, 'get')
+	},
+	// 获取用户选择器
+	modelUserSelector(data) {
+		return request('userSelector', data, 'get')
+	},
+	// 获取执行监听器选择器
+	modelExecutionListenerSelector(data) {
+		return request('executionListenerSelector', data, 'get')
+	},
+	// 获取自定义事件执行监听器选择器
+	modelExecutionListenerSelectorForCustomEvent(data) {
+		return request('executionListenerSelectorForCustomEvent', data, 'get')
+	},
+	// 获取任务监听器选择器
+	modelTaskListenerSelector(data) {
+		return request('taskListenerSelector', data, 'get')
+	}
+}

src/api/flw/processApi.js

@@ -0,0 +1,93 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/flwapp/flw/process/monitor/${url}`, ...arg)
+/**
+ * 流程
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取所有流程分页
+	processMonitorPage(data) {
+		return request('monitorPage', data, 'get')
+	},
+	// 删除流程
+	processDelete(data) {
+		return request('delete', data)
+	},
+	// 终止流程
+	processEnd(data) {
+		return request('end', data)
+	},
+	// 撤回流程
+	processRevoke(data) {
+		return request('revoke', data)
+	},
+	// 挂起流程
+	processSuspend(data) {
+		return request('suspend', data)
+	},
+	// 激活流程
+	processActive(data) {
+		return request('active', data)
+	},
+	// 转办流程
+	processTurn(data) {
+		return request('turn', data)
+	},
+	// 跳转流程
+	processJump(data) {
+		return request('jump', data)
+	},
+	// 复活流程
+	processRestart(data) {
+		return request('restart', data)
+	},
+	// 迁移流程
+	processMigrate(data) {
+		return request('migrate', data)
+	},
+	// 获取流程变量分页
+	processVariablePage(data) {
+		return request('variablePage', data, 'get')
+	},
+	// 批量编辑流程变量
+	processVariableUpdateBatch(data) {
+		return request('variableUpdateBatch', data)
+	},
+	// 获取流程详情
+	processDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取可跳转节点列表
+	processGetCanJumpNodeInfoList(data) {
+		return request('getCanJumpNodeInfoList', data, 'get')
+	},
+	// 获取可复活到节点列表
+	processGetCanRestartNodeInfoList(data) {
+		return request('getCanRestartNodeInfoList', data, 'get')
+	},
+	// 获取可迁移到节点列表
+	processGetCanMigrateNodeInfoList(data) {
+		return request('getCanMigrateNodeInfoList', data, 'get')
+	},
+	// 获取组织树选择器
+	processOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取用户选择器
+	processUserSelector(data) {
+		return request('userSelector', data, 'get')
+	}
+}

src/api/flw/processMyApi.js

@@ -0,0 +1,73 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/flwapp/flw/process/${url}`, ...arg)
+/**
+ * 我的流程
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取我可以发起的流程模型列表
+	processMyModelList(data) {
+		return request('myModelList', data, 'get')
+	},
+	// 保存草稿
+	processSaveDraft(data) {
+		return request('saveDraft', data)
+	},
+	// 发起流程
+	processStart(data) {
+		return request('start', data)
+	},
+	// 获取我的草稿分页
+	processMyDraftPage(data) {
+		return request('myDraftPage', data, 'get')
+	},
+	// 获取草稿详情
+	processDraftDetail(data) {
+		return request('draftDetail', data, 'get')
+	},
+	// 删除草稿
+	processDeleteDraft(data) {
+		return request('deleteDraft', data)
+	},
+	// 获取我发起的流程分页
+	processMyPage(data) {
+		return request('myPage', data, 'get')
+	},
+	// 获取我的待阅流程分页
+	processMyCopyUnreadPage(data) {
+		return request('myCopyUnreadPage', data, 'get')
+	},
+	// 设置待阅流程为已阅
+	processReadMyCopyProcess(data) {
+		return request('readMyCopyProcess', data)
+	},
+	// 获取我的已阅流程分页
+	processMyCopyHasReadPage(data) {
+		return request('myCopyHasReadPage', data, 'get')
+	},
+	// 删除我的已阅流程
+	processDeleteMyHasReadProcess(data) {
+		return request('deleteMyHasReadProcess', data)
+	},
+	// 撤回流程
+	processRevoke(data) {
+		return request('revoke', data)
+	},
+	// 获取流程详情
+	processDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/flw/taskApi.js

@@ -0,0 +1,81 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/flwapp/flw/task/${url}`, ...arg)
+/**
+ * 待办任务
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取待办任务分页
+	taskTodoPage(data) {
+		return request('todoPage', data, 'get')
+	},
+	// 获取已办任务分页
+	taskDonePage(data) {
+		return request('donePage', data, 'get')
+	},
+	// 调整申请
+	taskAdjust(data) {
+		return request('adjust', data)
+	},
+	// 审批保存
+	taskSave(data) {
+		return request('save', data)
+	},
+	// 审批同意
+	taskPass(data) {
+		return request('pass', data)
+	},
+	// 审批拒绝
+	taskReject(data) {
+		return request('reject', data)
+	},
+	// 审批退回
+	taskBack(data) {
+		return request('back', data)
+	},
+	// 任务转办
+	taskTurn(data) {
+		return request('turn', data)
+	},
+	// 审批跳转
+	taskJump(data) {
+		return request('jump', data)
+	},
+	// 任务加签
+	taskAddSign(data) {
+		return request('addSign', data)
+	},
+	// 任务详情
+	taskDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取可驳回节点列表
+	taskGetCanBackNodeInfoList(data) {
+		return request('getCanBackNodeInfoList', data, 'get')
+	},
+	// 获取可跳转节点列表
+	taskGetCanJumpNodeInfoList(data) {
+		return request('getCanJumpNodeInfoList', data, 'get')
+	},
+	// 获取组织树选择器
+	taskOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取用户选择器
+	taskUserSelector(data) {
+		return request('userSelector', data, 'get')
+	}
+}

src/api/flw/templatePrintApi.js

@@ -0,0 +1,41 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/flwapp/flw/templatePrint/${url}`, ...arg)
+/**
+ * 打印模板
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取打印模板分页
+	templatePrintPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	templatePrintSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除打印模板
+	templatePrintDelete(data) {
+		return request('delete', data)
+	},
+	// 获取打印模板详情
+	templatePrintDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取打印模板选择列表
+	templateFlwTemplatePrintSelector(data) {
+		return request('flwTemplatePrintSelector', data, 'get')
+	}
+}

src/api/flw/templateSnApi.js

@@ -0,0 +1,41 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/flwapp/flw/templateSn/${url}`, ...arg)
+/**
+ * 流水号
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取流水号模板分页
+	templateSnPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	templateSnSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除流水号模板
+	templateSnDelete(data) {
+		return request('delete', data)
+	},
+	// 获取流水号模板详情
+	templateSnDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取序列号模板选择列表
+	templateFlwTemplateSnSelector(data) {
+		return request('flwTemplateSnSelector', data, 'get')
+	}
+}

src/api/sys/indexApi.js

@@ -0,0 +1,53 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/index/${url}`, ...arg)
+/**
+ * 系统首页控制器
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 添加当前用户日程
+	indexScheduleAdd(data) {
+		return request('schedule/add', data)
+	},
+	// 删除日程
+	indexScheduleDeleteSchedule(data) {
+		return request('schedule/deleteSchedule', data)
+	},
+	// 获取当前用户日程列表
+	indexScheduleList(data) {
+		return request('schedule/list', data, 'get')
+	},
+	// 获取当前用户站内信列表
+	indexMessageList(data) {
+		return request('message/list', data, 'get')
+	},
+	// 获取站内信详情
+	indexMessageDetail(data) {
+		return request('message/detail', data, 'get')
+	},
+	//站内信全部标记已读
+	indexMessageAllMarkRead(data) {
+		return request('message/allMessageMarkRead', data)
+	},
+	// 获取当前用户访问日志列表
+	indexVisLogList(data) {
+		return request('visLog/list', data, 'get')
+	},
+	// 获取当前用户操作日志列表
+	indexOpLogList(data) {
+		return request('opLog/list', data, 'get')
+	}
+}

src/api/sys/orgApi.js

@@ -0,0 +1,53 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/org/${url}`, ...arg)
+/**
+ * 机构
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取组织分页
+	orgPage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取组织列表
+	orgList(data) {
+		return request('list', data, 'get')
+	},
+	// 获取组织树
+	orgTree(data) {
+		return request('tree', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除组织
+	orgDelete(data) {
+		return request('delete', data)
+	},
+	// 获取组织详情
+	orgDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取组织树选择器
+	orgOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取用户选择器
+	orgUserSelector(data) {
+		return request('userSelector', data, 'get')
+	}
+}

src/api/sys/positionApi.js

@@ -0,0 +1,49 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/position/${url}`, ...arg)
+/**
+ * 职位
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取职位分页
+	positionPage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取职位列表
+	positionList(data) {
+		return request('list', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除职位
+	positionDelete(data) {
+		return request('delete', data)
+	},
+	// 获取职位详情
+	positionDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取组织树选择器
+	positionOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取职位选择器
+	positionPositionSelector(data) {
+		return request('positionSelector', data, 'get')
+	}
+}

src/api/sys/resource/buttonApi.js

@@ -0,0 +1,37 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/button/${url}`, ...arg)
+/**
+ * 按钮
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取按钮分页
+	buttonPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除按钮
+	buttonDelete(data) {
+		return request('delete', data)
+	},
+	// 获取按钮详情
+	buttonDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/sys/resource/fieldApi.js

@@ -0,0 +1,45 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/field/${url}`, ...arg)
+/**
+ * 字段
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取字段分页
+	fieldPage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取字段树
+	fieldTree(data) {
+		return request('tree', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除字段
+	fieldDelete(data) {
+		return request('delete', data)
+	},
+	// 获取字段详情
+	fieldDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取菜单树选择器
+	fieldMenuTreeSelector(data) {
+		return request('MenuTreeSelector', data, 'get')
+	}
+}

src/api/sys/resource/menuApi.js

@@ -0,0 +1,49 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/menu/${url}`, ...arg)
+/**
+ * 菜单
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取菜单树
+	menuTree(data) {
+		return request('tree', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 更改菜单所属模块
+	menuChangeModule(data) {
+		return request('changeModule', data)
+	},
+	// 删除菜单
+	menuDelete(data) {
+		return request('delete', data)
+	},
+	// 获取菜单详情
+	menuDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取模块选择器
+	menuModuleSelector(data) {
+		return request('moduleSelector', data, 'get')
+	},
+	// 获取菜单树选择器
+	menuTreeSelector(data) {
+		return request('menuTreeSelector', data, 'get')
+	}
+}

src/api/sys/resource/moduleApi.js

@@ -0,0 +1,37 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/module/${url}`, ...arg)
+/**
+ * 模块
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取模块分页
+	modulePage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除模块
+	moduleDelete(data) {
+		return request('delete', data)
+	},
+	// 获取模块详情
+	moduleDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/sys/roleApi.js

@@ -0,0 +1,97 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/role/${url}`, ...arg)
+/**
+ * 角色
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取角色分页
+	rolePage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取角色列表
+	roleList(data) {
+		return request('list', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除角色
+	roleDelete(data) {
+		return request('delete', data)
+	},
+	// 获取角色详情
+	roleDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取角色拥有资源
+	roleOwnResource(data) {
+		return request('ownResource', data, 'get')
+	},
+	// 给角色授权资源
+	roleGrantResource(data) {
+		return request('grantResource', data)
+	},
+	// 获取角色拥有移动端菜单
+	roleOwnMobileMenu(data) {
+		return request('ownMobileMenu', data, 'get')
+	},
+	// 给角色授权移动端菜单
+	roleGrantMobileMenu(data) {
+		return request('grantMobileMenu', data)
+	},
+	// 获取角色拥有权限
+	roleOwnPermission(data) {
+		return request('ownPermission', data, 'get')
+	},
+	// 给角色授权权限
+	roleGrantPermission(data) {
+		return request('grantPermission', data)
+	},
+	// 获取角色下的用户
+	roleOwnUser(data) {
+		return request('ownUser', data, 'get')
+	},
+	// 给角色授权用户
+	roleGrantUser(data) {
+		return request('grantUser', data)
+	},
+	// 获取机构树
+	roleOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取资源授权树
+	roleResourceTreeSelector(data) {
+		return request('resourceTreeSelector', data, 'get')
+	},
+	// 获取移动端菜单授权树
+	roleMobileMenuTreeSelector(data) {
+		return request('mobileMenuTreeSelector', data, 'get')
+	},
+	// 获取权限授权树
+	rolePermissionTreeSelector(data) {
+		return request('permissionTreeSelector', data, 'get')
+	},
+	// 获取角色选择器
+	roleRoleSelector(data) {
+		return request('roleSelector', data, 'get')
+	},
+	// 获取用户选择器
+	roleUserSelector(data) {
+		return request('userSelector', data, 'get')
+	}
+}

src/api/sys/userApi.js

@@ -0,0 +1,111 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/user/${url}`, ...arg)
+/**
+ * 用户接口api
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取用户分页
+	userPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交表单 edit为true时为编辑，默认为新增
+	submitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除用户
+	userDelete(data) {
+		return request('delete', data)
+	},
+	// 获取用户详情
+	userDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 禁用用户
+	userDisableUser(data) {
+		return request('disableUser', data)
+	},
+	// 启用用户
+	userEnableUser(data) {
+		return request('enableUser', data)
+	},
+	// 重置用户密码
+	userResetPassword(data) {
+		return request('resetPassword', data)
+	},
+	// 获取组织选择器
+	userOrgTreeSelector(data) {
+		return request('orgTreeSelector', data, 'get')
+	},
+	// 获取职位选择器
+	userPositionSelector(data) {
+		return request('positionSelector', data, 'get')
+	},
+	// 获取角色选择器
+	userRoleSelector(data) {
+		return request('roleSelector', data, 'get')
+	},
+	// 获取用户选择器
+	userSelector(data) {
+		return request('userSelector', data, 'get')
+	},
+	// 用户拥有角色
+	userOwnRole(data) {
+		return request('ownRole', data, 'get')
+	},
+	// 给用户授权角色
+	grantRole(data) {
+		return request('grantRole', data)
+	},
+	// 获取用户拥有资源
+	userOwnResource(data) {
+		return request('ownResource', data, 'get')
+	},
+	// 给用户授权资源
+	userGrantResource(data) {
+		return request('grantResource', data)
+	},
+	// 获取用户拥有权限
+	userOwnPermission(data) {
+		return request('ownPermission', data, 'get')
+	},
+	// 给用户授权权限
+	userGrantPermission(data) {
+		return request('grantPermission', data)
+	},
+	// 下载用户导入模板
+	userDownloadImportUserTemplate(data) {
+		return request('downloadImportUserTemplate', data, 'get', {
+			responseType: 'blob'
+		})
+	},
+	// 用户导入
+	userImport(data) {
+		return request('import', data)
+	},
+	// 用户导出
+	userExport(data) {
+		return request('export', data, 'get', {
+			responseType: 'blob'
+		})
+	},
+	// 导出用户个人信息
+	userExportUserInfo(data) {
+		return request('exportUserInfo', data, 'get', {
+			responseType: 'blob'
+		})
+	}
+}

src/api/sys/userCenterApi.js

@@ -0,0 +1,101 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/api/webapp/sys/userCenter/${url}`, ...arg)
+/**
+ * 用户个人控制器
+ *
+ * @author yubaoshan
+ * @date 2022-09-22 22:33:20
+ */
+export default {
+	// 获取图片验证码
+	userGetPicCaptcha(data) {
+		return request('getPicCaptcha', data, 'get')
+	},
+	// 找回密码获取手机验证码
+	userFindPasswordGetPhoneValidCode(data) {
+		return request('findPasswordGetPhoneValidCode', data, 'get')
+	},
+	// 找回密码获取邮箱验证码
+	userFindPasswordGetEmailValidCode(data) {
+		return request('findPasswordGetEmailValidCode', data, 'get')
+	},
+	// 通过手机号找回用户密码
+	userFindPasswordByPhone(data) {
+		return request('findPasswordByPhone', data)
+	},
+	// 通过邮箱找回用户密码
+	userFindPasswordByEmail(data) {
+		return request('findPasswordByEmail', data)
+	},
+	// 修改用户密码
+	userUpdatePassword(data) {
+		return request('updatePassword', data)
+	},
+	// 修改用户头像
+	userUpdateAvatar(data) {
+		return request('updateAvatar', data)
+	},
+	// 修改用户签名图片
+	userUpdateSignature(data) {
+		return request('updateSignature', data)
+	},
+	// 获取登录用户的菜单
+	userLoginMenu(data) {
+		return request('loginMenu', data, 'get')
+	},
+	// 获取登录用户组织树
+	userLoginOrgTree(data) {
+		return request('loginOrgTree', data, 'get')
+	},
+	// 获取登录用户的职位信息
+	userLoginPositionInfo(data) {
+		return request('loginPositionInfo', data, 'get')
+	},
+	// 编辑个人信息
+	userUpdateUserInfo(data) {
+		return request('updateUserInfo', data)
+	},
+	// 编辑个人工作台
+	userUpdateUserWorkbench(data) {
+		return request('updateUserWorkbench', data)
+	},
+	// 获取登录用户的工作台
+	userLoginWorkbench(data) {
+		return request('loginWorkbench', data, 'get')
+	},
+	// 获取登录用户的站内信分页
+	userLoginUnreadMessagePage(data) {
+		return request('loginUnreadMessagePage', data, 'get')
+	},
+	// 读取登录用户站内信详情
+	userLoginUnreadMessageDetail(data) {
+		return request('loginUnreadMessageDetail', data, 'get')
+	},
+	// 根据id集合获取组织集合
+	userCenterGetOrgListByIdList(data) {
+		return request('getOrgListByIdList', data)
+	},
+	// 根据id集合获取用户集合
+	userCenterGetUserListByIdList(data) {
+		return request('getUserListByIdList', data)
+	},
+	// 根据id集合获取职位集合
+	userCenterGetPositionListByIdList(data) {
+		return request('getPositionListByIdList', data)
+	},
+	// 根据id集合获取角色集合
+	userCenterGetRoleListByIdList(data) {
+		return request('getRoleListByIdList', data)
+	}
+}

src/assets/icons/mobile/filled/iconfont.css

@@ -0,0 +1,173 @@
+@font-face {
+  font-family: "snowy"; /* Project id 3880534 */
+  src: url('iconfont.ttf?t=1675528061732') format('truetype');
+}
+
+.snowy {
+  font-family: "snowy" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.arrow-up-filling:before {
+  content: "\e688";
+}
+
+.arrow-down-filling:before {
+  content: "\e689";
+}
+
+.arrow-left-filling:before {
+  content: "\e68a";
+}
+
+.arrow-right-filling:before {
+  content: "\e68b";
+}
+
+.caps-unlock-filling:before {
+  content: "\e68c";
+}
+
+.comment-filling:before {
+  content: "\e68d";
+}
+
+.check-item-filling:before {
+  content: "\e68e";
+}
+
+.clock-filling:before {
+  content: "\e68f";
+}
+
+.delete-filling:before {
+  content: "\e690";
+}
+
+.decline-filling:before {
+  content: "\e691";
+}
+
+.dynamic-filling:before {
+  content: "\e692";
+}
+
+.intermediate-filling:before {
+  content: "\e693";
+}
+
+.favorite-filling:before {
+  content: "\e694";
+}
+
+.layout-filling:before {
+  content: "\e695";
+}
+
+.help-filling:before {
+  content: "\e696";
+}
+
+.history-filling:before {
+  content: "\e697";
+}
+
+.filter-filling:before {
+  content: "\e698";
+}
+
+.file-common-filling:before {
+  content: "\e699";
+}
+
+.news-filling:before {
+  content: "\e69a";
+}
+
+.edit-filling:before {
+  content: "\e69b";
+}
+
+.fullscreen-expand-filling:before {
+  content: "\e69c";
+}
+
+.smile-filling:before {
+  content: "\e69d";
+}
+
+.rise-filling:before {
+  content: "\e69e";
+}
+
+.picture-filling:before {
+  content: "\e69f";
+}
+
+.notification-filling:before {
+  content: "\e6a0";
+}
+
+.user-filling:before {
+  content: "\e6a1";
+}
+
+.setting-filling:before {
+  content: "\e6a2";
+}
+
+.switch-filling:before {
+  content: "\e6a3";
+}
+
+.work-filling:before {
+  content: "\e6a4";
+}
+
+.task-filling:before {
+  content: "\e6a5";
+}
+
+.success-filling:before {
+  content: "\e6a6";
+}
+
+.warning-filling:before {
+  content: "\e6a7";
+}
+
+.folder-filling:before {
+  content: "\e6a8";
+}
+
+.map-filling:before {
+  content: "\e6a9";
+}
+
+.prompt-filling:before {
+  content: "\e6aa";
+}
+
+.meh-filling:before {
+  content: "\e6ab";
+}
+
+.cry-filling:before {
+  content: "\e6ac";
+}
+
+.top-filling:before {
+  content: "\e6ad";
+}
+
+.home-filling:before {
+  content: "\e6ae";
+}
+
+.sorting:before {
+  content: "\e6af";
+}
+

src/assets/icons/mobile/filled/iconfont.json

@@ -0,0 +1,289 @@
+{
+  "id": "3880534",
+  "name": "snowy-app-filled",
+  "font_family": "snowy",
+  "css_prefix_text": "",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "15838581",
+      "name": "arrow-up-filling",
+      "font_class": "arrow-up-filling",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "15838582",
+      "name": "arrow-down-filling",
+      "font_class": "arrow-down-filling",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "15838583",
+      "name": "arrow-left-filling",
+      "font_class": "arrow-left-filling",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "15838584",
+      "name": "arrow-right-filling",
+      "font_class": "arrow-right-filling",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "15838585",
+      "name": "caps-unlock-filling",
+      "font_class": "caps-unlock-filling",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "15838586",
+      "name": "comment-filling",
+      "font_class": "comment-filling",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "15838587",
+      "name": "check-item-filling",
+      "font_class": "check-item-filling",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "15838588",
+      "name": "clock-filling",
+      "font_class": "clock-filling",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "15838589",
+      "name": "delete-filling",
+      "font_class": "delete-filling",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "15838590",
+      "name": "decline-filling",
+      "font_class": "decline-filling",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
+      "icon_id": "15838591",
+      "name": "dynamic-filling",
+      "font_class": "dynamic-filling",
+      "unicode": "e692",
+      "unicode_decimal": 59026
+    },
+    {
+      "icon_id": "15838592",
+      "name": "intermediate-filling",
+      "font_class": "intermediate-filling",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "15838593",
+      "name": "favorite-filling",
+      "font_class": "favorite-filling",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "15838594",
+      "name": "layout-filling",
+      "font_class": "layout-filling",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
+    {
+      "icon_id": "15838595",
+      "name": "help-filling",
+      "font_class": "help-filling",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "15838596",
+      "name": "history-filling",
+      "font_class": "history-filling",
+      "unicode": "e697",
+      "unicode_decimal": 59031
+    },
+    {
+      "icon_id": "15838597",
+      "name": "filter-filling",
+      "font_class": "filter-filling",
+      "unicode": "e698",
+      "unicode_decimal": 59032
+    },
+    {
+      "icon_id": "15838598",
+      "name": "file-common-filling",
+      "font_class": "file-common-filling",
+      "unicode": "e699",
+      "unicode_decimal": 59033
+    },
+    {
+      "icon_id": "15838599",
+      "name": "news-filling",
+      "font_class": "news-filling",
+      "unicode": "e69a",
+      "unicode_decimal": 59034
+    },
+    {
+      "icon_id": "15838600",
+      "name": "edit-filling",
+      "font_class": "edit-filling",
+      "unicode": "e69b",
+      "unicode_decimal": 59035
+    },
+    {
+      "icon_id": "15838601",
+      "name": "fullscreen-expand-filling",
+      "font_class": "fullscreen-expand-filling",
+      "unicode": "e69c",
+      "unicode_decimal": 59036
+    },
+    {
+      "icon_id": "15838602",
+      "name": "smile-filling",
+      "font_class": "smile-filling",
+      "unicode": "e69d",
+      "unicode_decimal": 59037
+    },
+    {
+      "icon_id": "15838603",
+      "name": "rise-filling",
+      "font_class": "rise-filling",
+      "unicode": "e69e",
+      "unicode_decimal": 59038
+    },
+    {
+      "icon_id": "15838604",
+      "name": "picture-filling",
+      "font_class": "picture-filling",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "15838605",
+      "name": "notification-filling",
+      "font_class": "notification-filling",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "15838606",
+      "name": "user-filling",
+      "font_class": "user-filling",
+      "unicode": "e6a1",
+      "unicode_decimal": 59041
+    },
+    {
+      "icon_id": "15838607",
+      "name": "setting-filling",
+      "font_class": "setting-filling",
+      "unicode": "e6a2",
+      "unicode_decimal": 59042
+    },
+    {
+      "icon_id": "15838608",
+      "name": "switch-filling",
+      "font_class": "switch-filling",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "15838609",
+      "name": "work-filling",
+      "font_class": "work-filling",
+      "unicode": "e6a4",
+      "unicode_decimal": 59044
+    },
+    {
+      "icon_id": "15838610",
+      "name": "task-filling",
+      "font_class": "task-filling",
+      "unicode": "e6a5",
+      "unicode_decimal": 59045
+    },
+    {
+      "icon_id": "15838611",
+      "name": "success-filling",
+      "font_class": "success-filling",
+      "unicode": "e6a6",
+      "unicode_decimal": 59046
+    },
+    {
+      "icon_id": "15838612",
+      "name": "warning-filling",
+      "font_class": "warning-filling",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "15838613",
+      "name": "folder-filling",
+      "font_class": "folder-filling",
+      "unicode": "e6a8",
+      "unicode_decimal": 59048
+    },
+    {
+      "icon_id": "15838614",
+      "name": "map-filling",
+      "font_class": "map-filling",
+      "unicode": "e6a9",
+      "unicode_decimal": 59049
+    },
+    {
+      "icon_id": "15838615",
+      "name": "prompt-filling",
+      "font_class": "prompt-filling",
+      "unicode": "e6aa",
+      "unicode_decimal": 59050
+    },
+    {
+      "icon_id": "15838616",
+      "name": "meh-filling",
+      "font_class": "meh-filling",
+      "unicode": "e6ab",
+      "unicode_decimal": 59051
+    },
+    {
+      "icon_id": "15838617",
+      "name": "cry-filling",
+      "font_class": "cry-filling",
+      "unicode": "e6ac",
+      "unicode_decimal": 59052
+    },
+    {
+      "icon_id": "15838618",
+      "name": "top-filling",
+      "font_class": "top-filling",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
+    {
+      "icon_id": "15838619",
+      "name": "home-filling",
+      "font_class": "home-filling",
+      "unicode": "e6ae",
+      "unicode_decimal": 59054
+    },
+    {
+      "icon_id": "15838620",
+      "name": "sorting",
+      "font_class": "sorting",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    }
+  ]
+}

src/assets/icons/mobile/index.js

@@ -0,0 +1,36 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import './line/iconfont.css'
+import lineJsonData from './line/iconfont.json'
+
+import './filled/iconfont.css'
+import filledJsonData from './filled/iconfont.json'
+
+export default {
+	icons: [
+		{
+			name: '基础',
+			key: 'default',
+			iconItem: [
+				{
+					name: '线框风格',
+					key: 'default',
+					item: lineJsonData.glyphs
+				},
+				{
+					name: '实底风格',
+					key: 'filled',
+					item: filledJsonData.glyphs
+				}
+			]
+		}
+	]
+}

src/assets/icons/mobile/line/iconfont.css

@@ -0,0 +1,825 @@
+@font-face {
+  font-family: "snowy"; /* Project id 3791763 */
+  src: url('iconfont.ttf?t=1675526220710') format('truetype');
+}
+
+.snowy {
+  font-family: "snowy" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.export-outlined:before {
+  content: "\e792";
+}
+
+.experiment-outlined:before {
+  content: "\e7c9";
+}
+
+.expand-outlined:before {
+  content: "\e915";
+}
+
+.expand-alt-outlined:before {
+  content: "\e7e9";
+}
+
+.exception-outlined:before {
+  content: "\e7bb";
+}
+
+.euro-outlined:before {
+  content: "\e78f";
+}
+
+.euro-circle-outlined:before {
+  content: "\eb62";
+}
+
+.environment-outlined:before {
+  content: "\e790";
+}
+
+.ellipsis-outlined:before {
+  content: "\e815";
+}
+
+.download-outlined:before {
+  content: "\e814";
+}
+
+.dollar-outlined:before {
+  content: "\e78d";
+}
+
+.dollar-circle-outlined:before {
+  content: "\eb61";
+}
+
+.dislike-outlined:before {
+  content: "\e7c8";
+}
+
+.disconnect-outlined:before {
+  content: "\e7e8";
+}
+
+.dingtalk-outlined:before {
+  content: "\e881";
+}
+
+.desktop-outlined:before {
+  content: "\e845";
+}
+
+.deployment-unit-outlined:before {
+  content: "\e7d2";
+}
+
+.delivered-procedure-outlined:before {
+  content: "\e911";
+}
+
+.delete-column-outlined:before {
+  content: "\e901";
+}
+
+.delete-row-outlined:before {
+  content: "\e902";
+}
+
+.database-outlined:before {
+  content: "\e7b9";
+}
+
+.dashboard-outlined:before {
+  content: "\e78b";
+}
+
+.customer-service-outlined:before {
+  content: "\e7ca";
+}
+
+.crown-outlined:before {
+  content: "\e844";
+}
+
+.credit-card-outlined:before {
+  content: "\e7e5";
+}
+
+.copyright-outlined:before {
+  content: "\e789";
+}
+
+.copyright-circle-outlined:before {
+  content: "\eb60";
+}
+
+.control-outlined:before {
+  content: "\e79c";
+}
+
+.container-outlined:before {
+  content: "\e7b8";
+}
+
+.contacts-outlined:before {
+  content: "\e7e4";
+}
+
+.console-sql-outlined:before {
+  content: "\e910";
+}
+
+.compress-outlined:before {
+  content: "\e914";
+}
+
+.compass-outlined:before {
+  content: "\e786";
+}
+
+.comment-outlined:before {
+  content: "\e8ea";
+}
+
+.coffee-outlined:before {
+  content: "\e6b5";
+}
+
+.code-outlined:before {
+  content: "\e79b";
+}
+
+.cloud-server-outlined:before {
+  content: "\e7db";
+}
+
+.cloud-upload-outlined:before {
+  content: "\e7dc";
+}
+
+.cloud-outlined:before {
+  content: "\e7dd";
+}
+
+.cloud-download-outlined:before {
+  content: "\e7de";
+}
+
+.cloud-sync-outlined:before {
+  content: "\e7e0";
+}
+
+.clear-outlined:before {
+  content: "\e900";
+}
+
+.ci-circle-outlined:before {
+  content: "\e77f";
+}
+
+.carry-out-outlined:before {
+  content: "\e7d6";
+}
+
+.car-outlined:before {
+  content: "\e7da";
+}
+
+.ci-outlined:before {
+  content: "\eb5f";
+}
+
+.camera-outlined:before {
+  content: "\e7d9";
+}
+
+.calendar-outlined:before {
+  content: "\e7d4";
+}
+
+.calculator-outlined:before {
+  content: "\e79a";
+}
+
+.bulb-outlined:before {
+  content: "\e7c7";
+}
+
+.build-outlined:before {
+  content: "\e7d5";
+}
+
+.bug-outlined:before {
+  content: "\e8e9";
+}
+
+.branches-outlined:before {
+  content: "\e7e7";
+}
+
+.borderless-table-outlined:before {
+  content: "\e813";
+}
+
+.border-outlined:before {
+  content: "\e7b7";
+}
+
+.book-outlined:before {
+  content: "\e7b6";
+}
+
+.block-outlined:before {
+  content: "\e7df";
+}
+
+.bell-outlined:before {
+  content: "\e7c5";
+}
+
+.bars-outlined:before {
+  content: "\e71a";
+}
+
+.barcode-outlined:before {
+  content: "\e7d8";
+}
+
+.bank-outlined:before {
+  content: "\e7c6";
+}
+
+.audit-outlined:before {
+  content: "\e7c0";
+}
+
+.audio-outlined:before {
+  content: "\e89b";
+}
+
+.audio-muted-outlined:before {
+  content: "\e8e8";
+}
+
+.api-outlined:before {
+  content: "\e7e3";
+}
+
+.apartment-outlined:before {
+  content: "\e89a";
+}
+
+.alert-outlined:before {
+  content: "\e7c4";
+}
+
+.aim-outlined:before {
+  content: "\e913";
+}
+
+.account-book-outlined:before {
+  content: "\e7d3";
+}
+
+.column-height-outlined:before {
+  content: "\e811";
+}
+
+.column-width-outlined:before {
+  content: "\e812";
+}
+
+.radius-setting-outlined:before {
+  content: "\e7b5";
+}
+
+.unordered-list-outlined:before {
+  content: "\e80f";
+}
+
+.ordered-list-outlined:before {
+  content: "\e810";
+}
+
+.drag-outlined:before {
+  content: "\e843";
+}
+
+.sort-descending-outlined:before {
+  content: "\e80d";
+}
+
+.sort-ascending-outlined:before {
+  content: "\e80e";
+}
+
+.font-colors-outlined:before {
+  content: "\e808";
+}
+
+.font-size-outlined:before {
+  content: "\e809";
+}
+
+.line-height-outlined:before {
+  content: "\e80a";
+}
+
+.dash-outlined:before {
+  content: "\e80b";
+}
+
+.small-dash-outlined:before {
+  content: "\e80c";
+}
+
+.zoom-out-outlined:before {
+  content: "\e898";
+}
+
+.zoom-in-outlined:before {
+  content: "\e899";
+}
+
+.undo-outlined:before {
+  content: "\e787";
+}
+
+.redo-outlined:before {
+  content: "\e788";
+}
+
+.bold-outlined:before {
+  content: "\e804";
+}
+
+.strikethrough-outlined:before {
+  content: "\e805";
+}
+
+.underline-outlined:before {
+  content: "\e806";
+}
+
+.italic-outlined:before {
+  content: "\e807";
+}
+
+.bg-colors-outlined:before {
+  content: "\e803";
+}
+
+.align-right-outlined:before {
+  content: "\e7fb";
+}
+
+.align-left-outlined:before {
+  content: "\e802";
+}
+
+.align-center-outlined:before {
+  content: "\e7f5";
+}
+
+.highlight-outlined:before {
+  content: "\e7e2";
+}
+
+.diff-outlined:before {
+  content: "\e7bf";
+}
+
+.snippets-outlined:before {
+  content: "\e7bd";
+}
+
+.delete-outlined:before {
+  content: "\e7c3";
+}
+
+.scissor-outlined:before {
+  content: "\e7e6";
+}
+
+.copy-outlined:before {
+  content: "\e7bc";
+}
+
+.form-outlined:before {
+  content: "\e791";
+}
+
+.edit-outlined:before {
+  content: "\e7e1";
+}
+
+.stop-outlined:before {
+  content: "\e842";
+}
+
+.issues-close-outlined:before {
+  content: "\e68e";
+}
+
+.warning-outlined:before {
+  content: "\e682";
+}
+
+.clock-circle-outlined:before {
+  content: "\e784";
+}
+
+.check-circle-outlined:before {
+  content: "\e77d";
+}
+
+.check-square-outlined:before {
+  content: "\e794";
+}
+
+.check-outlined:before {
+  content: "\e7fc";
+}
+
+.exclamation-circle-outlined:before {
+  content: "\e785";
+}
+
+.exclamation-outlined:before {
+  content: "\e7fa";
+}
+
+.info-circle-outlined:before {
+  content: "\e77e";
+}
+
+.info-outlined:before {
+  content: "\e7f9";
+}
+
+.minus-square-outlined:before {
+  content: "\e796";
+}
+
+.plus-square-outlined:before {
+  content: "\e797";
+}
+
+.minus-circle-outlined:before {
+  content: "\e780";
+}
+
+.minus-outlined:before {
+  content: "\e801";
+}
+
+.pause-circle-outlined:before {
+  content: "\e783";
+}
+
+.pause-outlined:before {
+  content: "\e800";
+}
+
+.plus-circle-outlined:before {
+  content: "\e781";
+}
+
+.plus-outlined:before {
+  content: "\e8fe";
+}
+
+.question-circle-outlined:before {
+  content: "\e782";
+}
+
+.question-outlined:before {
+  content: "\e7ff";
+}
+
+.fullscreen-outlined:before {
+  content: "\e7ec";
+}
+
+.fullscreen-exit-outlined:before {
+  content: "\e7ed";
+}
+
+.radius-bottomleft-outlined:before {
+  content: "\e7b1";
+}
+
+.radius-bottomright-outlined:before {
+  content: "\e7b2";
+}
+
+.radius-upleft-outlined:before {
+  content: "\e7b3";
+}
+
+.radius-upright-outlined:before {
+  content: "\e7b4";
+}
+
+.pic-center-outlined:before {
+  content: "\e7f6";
+}
+
+.pic-right-outlined:before {
+  content: "\e7f7";
+}
+
+.pic-left-outlined:before {
+  content: "\e7f8";
+}
+
+.border-outer-outlined:before {
+  content: "\e7a9";
+}
+
+.border-top-outlined:before {
+  content: "\e7aa";
+}
+
+.border-bottom-outlined:before {
+  content: "\e7ab";
+}
+
+.border-left-outlined:before {
+  content: "\e7ac";
+}
+
+.border-right-outlined:before {
+  content: "\e7ad";
+}
+
+.border-inner-outlined:before {
+  content: "\e7ae";
+}
+
+.border-verticle-outlined:before {
+  content: "\e7af";
+}
+
+.border-horizontal-outlined:before {
+  content: "\e7b0";
+}
+
+.menu-unfold-outlined:before {
+  content: "\e7f3";
+}
+
+.menu-fold-outlined:before {
+  content: "\e7f4";
+}
+
+.logout-outlined:before {
+  content: "\e78c";
+}
+
+.login-outlined:before {
+  content: "\e8f4";
+}
+
+.cluster-outlined:before {
+  content: "\e7d7";
+}
+
+.down-square-outlined:before {
+  content: "\e793";
+}
+
+.left-square-outlined:before {
+  content: "\e795";
+}
+
+.right-square-outlined:before {
+  content: "\e798";
+}
+
+.up-Square-outlined:before {
+  content: "\e799";
+}
+
+.play-circle-outlined:before {
+  content: "\e67a";
+}
+
+.arrow-down-outlined:before {
+  content: "\e66d";
+}
+
+.arrow-right-outlined:before {
+  content: "\e66e";
+}
+
+.arrow-up-outlined:before {
+  content: "\e66f";
+}
+
+.arrow-left-outlined:before {
+  content: "\e670";
+}
+
+.swap-outlined:before {
+  content: "\e7f2";
+}
+
+.swap-right-outlined:before {
+  content: "\e8f2";
+}
+
+.swap-left-outlined:before {
+  content: "\e8f3";
+}
+
+.enter-outlined:before {
+  content: "\e7fd";
+}
+
+.rollback-outlined:before {
+  content: "\e7fe";
+}
+
+.retweet-outlined:before {
+  content: "\e8f1";
+}
+
+.fast-backward-outlined:before {
+  content: "\e8ed";
+}
+
+.fast-forward-outlined:before {
+  content: "\e8ee";
+}
+
+.vertical-align-bottom-outlined:before {
+  content: "\e7ef";
+}
+
+.vertical-align-middle-outlined:before {
+  content: "\e7f0";
+}
+
+.vertical-align-top-outlined:before {
+  content: "\e7f1";
+}
+
+.vertical-right-outlined:before {
+  content: "\e7ea";
+}
+
+.vertical-left-outlined:before {
+  content: "\e7eb";
+}
+
+.double-left-outlined:before {
+  content: "\e66b";
+}
+
+.double-right-outlined:before {
+  content: "\e66c";
+}
+
+.up-circle-outlined:before {
+  content: "\e666";
+}
+
+.right-circle-outlined:before {
+  content: "\e667";
+}
+
+.left-circle-outlined:before {
+  content: "\e66a";
+}
+
+.down-circle-outlined:before {
+  content: "\eb5e";
+}
+
+.caret-up-outlined:before {
+  content: "\e689";
+}
+
+.caret-down-outlined:before {
+  content: "\e68a";
+}
+
+.caret-left-outlined:before {
+  content: "\e68b";
+}
+
+.caret-right-outlined:before {
+  content: "\e68c";
+}
+
+.left-outlined:before {
+  content: "\e685";
+}
+
+.up-outlined:before {
+  content: "\e686";
+}
+
+.down-outlined:before {
+  content: "\e687";
+}
+
+.right-outlined:before {
+  content: "\e688";
+}
+
+.arrows-alt-outlined:before {
+  content: "\e665";
+}
+
+.shrink-outlined:before {
+  content: "\e68d";
+}
+
+.step-backward-outlined:before {
+  content: "\e8ef";
+}
+
+.step-forward-outlined:before {
+  content: "\e8f0";
+}
+
+.robot-outlined:before {
+  content: "\e897";
+}
+
+.file-word-outlined:before {
+  content: "\e7ba";
+}
+
+.usergroup-delete-outlined:before {
+  content: "\e760";
+}
+
+.field-time-outlined:before {
+  content: "\eb5d";
+}
+
+.setting-outlined:before {
+  content: "\e78e";
+}
+
+.file-search-outlined:before {
+  content: "\e730";
+}
+
+.team-outlined:before {
+  content: "\e67d";
+}
+
+.message-outlined:before {
+  content: "\e78a";
+}
+
+.mail-outlined:before {
+  content: "\e62e";
+}
+
+.send-outlined:before {
+  content: "\e622";
+}
+
+.appstore-add-outlined:before {
+  content: "\e8eb";
+}
+
+.user-outlined:before {
+  content: "\e641";
+}
+
+.project-outlined:before {
+  content: "\e746";
+}
+
+.hdd-outlined:before {
+  content: "\e734";
+}
+
+.tool-outlined:before {
+  content: "\e75b";
+}
+
+.user-switch-outlined:before {
+  content: "\ea3d";
+}
+
+.appstore-outlined:before {
+  content: "\e601";
+}
+
+.home-outlined:before {
+  content: "\e965";
+}
+

src/components/ColorPicker/index.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="snowy-color-picker" @click="forceResize">
+		<color-picker v-bind="$attrs" format="hex" :pureColor="props.value" @update:pureColor="update" />
+	</div>
+</template>
+
+<script setup>
+	import { ColorPicker } from 'vue3-colorpicker'
+	import 'vue3-colorpicker/style.css'
+
+	const emit = defineEmits(['update:value'])
+
+	const props = defineProps({
+		value: {
+			type: String,
+			default: '#1890ff'
+		}
+	})
+
+	const forceResize = () => {
+		window.dispatchEvent(new Event('resize'))
+	}
+
+	const update = (val) => {
+		const currentColor = document.querySelector('.current-color')
+		if (currentColor) {
+			currentColor.textContent = val
+		}
+		emit('update:value', val)
+	}
+</script>
+
+<style lang="less">
+	.snowy-color-picker {
+		.vc-color-wrap {
+			width: auto;
+		}
+		.current-color {
+			color: #fff;
+			padding: 0 10px;
+		}
+	}
+</style>

src/components/Selector/orgSelectorPlus.vue

@@ -1,398 +1,496 @@
 <template>
-	<a-modal
-		v-model:visible="visible"
-		title="机构选择"
-		:width="1000"
-		:mask-closable="false"
+    <el-dialog v-model="visible" title="机构选择" :align-center="true" width="90%" style="height: 600px">
+        <!-- :mask-closable="false"
 		:destroy-on-close="true"
 		@ok="handleOk"
-		@cancel="handleClose"
-	>
-		<a-row :gutter="10">
-			<a-col :span="7">
-				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
-					<a-tree
-						v-if="treeData"
-						v-model:expandedKeys="defaultExpandedKeys"
-						:tree-data="treeData"
-						:field-names="treeFieldNames"
-						@select="treeSelect"
-					>
-					</a-tree>
-				</a-card>
-			</a-col>
-			<a-col :span="11">
-				<div class="table-operator" style="margin-bottom: 10px">
-					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
-						<a-row :gutter="24">
-							<a-col :span="12">
-								<a-form-item name="searchKey">
-									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入机构名" />
-								</a-form-item>
-							</a-col>
-							<a-col :span="12">
-								<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
-								<a-button class="snowy-buttom-left" @click="() => reset()"> 重置 </a-button>
-							</a-col>
-						</a-row>
-					</a-form>
-				</div>
-				<div class="org-table">
-					<a-table
-						ref="table"
-						size="small"
-						:columns="commons"
-						:data-source="tableData"
-						:expand-row-by-click="true"
-						:loading="pageLoading"
-						bordered
-						:pagination="false"
-					>
-						<template #title>
-							<span>待选择列表 {{ tableRecordNum }} 条</span>
-							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+		@cancel="handleClose" -->
+        <div class="drawer_body">
+            <el-row :gutter="10">
+                <el-col :span="7">
+                    <el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+                        <el-tree
+                            v-if="treeData"
+                            v-model:expandedKeys="defaultExpandedKeys"
+                            :data="treeData"
+                            :field-names="treeFieldNames"
+                            :props="defaultProps"
+                            accordion
+                            :default-expand-all="true"
+                            @node-click="treeSelect"
+                        ></el-tree>
+                    </el-card>
+                </el-col>
+                <el-col :span="11">
+                    <div class="table-operator" style="margin-bottom: 10px">
+                        <el-form
+                            ref="searchFormRef"
+                            name="advanced_search"
+                            class="ant-advanced-search-form"
+                            :model="searchFormState"
+                        >
+                            <el-row :gutter="24">
+                                <el-col :span="12">
+                                    <el-form-item name="searchKey">
+                                        <el-input
+                                            v-model="searchFormState.searchKey"
+                                            placeholder="请输入机构名"
+                                        />
+                                    </el-form-item>
+                                </el-col>
+                                <el-col :span="12">
+                                    <el-button type="primary" class="primarySele" @click="loadData()">查询</el-button>
+                                    <el-button class="snowy-buttom-left" @click="() => reset()">重置</el-button>
+                                </el-col>
+                            </el-row>
+                        </el-form>
+                    </div>
+                    <div class="org-table">
+						<div class="org_table_head">
+							<p>待选择列表</p>
+							<div class="org_table_head_add">
+								添加当前数据
 							</div>
-						</template>
-						<template #bodyCell="{ column, record }">
-							<template v-if="column.dataIndex === 'category'">
-								{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
-							</template>
-							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
-							</template>
-						</template>
-					</a-table>
-					<div class="mt-2">
-						<a-pagination
-							v-if="!isEmpty(tableData)"
-							v-model:current="current"
-							v-model:page-size="pageSize"
-							:total="total"
-							size="small"
-							showSizeChanger
-							@change="paginationChange"
-						/>
-					</div>
-				</div>
-			</a-col>
-			<a-col :span="6">
-				<div class="org-table">
-					<a-table
-						ref="selectedTable"
-						size="small"
-						:columns="selectedCommons"
-						:data-source="selectedData"
-						:expand-row-by-click="true"
-						:loading="selectedTableListLoading"
-						bordered
-					>
-						<template #title>
-							<span>已选择: {{ selectedData.length }}</span>
-							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+						</div>
+                        <el-table
+                            ref="table"
+                            size="small"
+                            :columns="commons"
+                            :data="tableData"
+                            :expand-row-by-click="true"
+                            :loading="pageLoading"
+                            bordered
+                            :pagination="false"
+                            border
+                            stripe
+                            height="330"
+                        >
+                            <template #title>
+                                <span>待选择列表 {{ tableRecordNum }} 条</span>
+                                <div v-if="!radioModel" style="float: right">
+                                    <el-button type="dashed" size="small" @click="addAllPageRecord">
+                                        添加当前数据
+                                    </el-button>
+                                </div>
+                            </template>
+                            <template #bodyCell="{ column, record }">
+                                <template v-if="column.dataIndex === 'category'">
+                                    {{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
+                                </template>
+                                <template v-if="column.dataIndex === 'action'">
+                                    <el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
+                                </template>
+                            </template>
+                            <el-table-column prop="action" label="操作" width="80" align="center">
+                                <el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
+                            </el-table-column>
+                            <el-table-column prop="name" label="机构名" />
+                            <el-table-column prop="type" label="分类"></el-table-column>
+                        </el-table>
+                        <div class="mt-2">
+                            <el-pagination
+                                v-if="!isEmpty(tableData)"
+                                v-model:current="current"
+                                v-model:page-size="pageSize"
+                                :total="total"
+                                size="small"
+                                showSizeChanger
+                                @change="paginationChange"
+                            />
+                        </div>
+                    </div>
+                </el-col>
+                <el-col :span="6">
+                    <div class="org-table">
+						<div class="org_table_heads">
+							<p>待选择列表</p>
+							<div class="org_table_head_delete">
+								全部移除
 							</div>
-						</template>
-						<template #bodyCell="{ column, record }">
-							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
-							</template>
-						</template>
-					</a-table>
-				</div>
-			</a-col>
-		</a-row>
-	</a-modal>
+						</div>
+                        <el-table
+                            ref="selectedTable"
+                            size="small"
+                            :columns="selectedCommons"
+                            :data="selectedData"
+                            :expand-row-by-click="true"
+                            :loading="selectedTableListLoading"
+                            bordered
+							border
+                        >
+                            <template #title>
+                                <span>已选择: {{ selectedData.length }}</span>
+                                <div v-if="!radioModel" style="float: right">
+                                    <el-button type="dashed" danger size="small" @click="delAllRecord">
+                                        全部移除
+                                    </el-button>
+                                </div>
+                            </template>
+                            <template #bodyCell="{ column, record }">
+                                <template v-if="column.dataIndex === 'action'">
+                                    <el-button type="dashed" danger size="small" @click="delRecord(record)">
+                                        移除
+                                    </el-button>
+                                </template>
+                            </template>
+							<el-table-column prop="action" label="操作" width="80" align="center">
+                                <el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
+                            </el-table-column>
+                            <el-table-column prop="name" label="机构名" />
+                        </el-table>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="visible = false">确定</el-button>
+            </div>
+        </template>
+    </el-dialog>
 </template>
 
 <script setup name="orgSelectorPlus">
-	import { ElMessage } from 'element-plus'
-	import { remove, isEmpty } from 'lodash-es'
-	import { ref } from 'vue'
-	// 弹窗是否打开
-	const visible = ref(false)
-	// 主表格common
-	const commons = [
-		{
-			title: '操作',
-			dataIndex: 'action',
-			align: 'center',
-			width: 80
-		},
-		{
-			title: '机构名',
-			dataIndex: 'name',
-			ellipsis: true
-		},
-		{
-			title: '分类',
-			dataIndex: 'category'
-		}
-	]
-	// 选中表格的表格common
-	const selectedCommons = [
-		{
-			title: '操作',
-			dataIndex: 'action',
-			align: 'center',
-			width: 80
-		},
-		{
-			title: '机构名',
-			dataIndex: 'name',
-			ellipsis: true
-		}
-	]
-	// 主表格的ref 名称
-	const table = ref()
-	// 选中表格的ref 名称
-	const selectedTable = ref()
-	const tableRecordNum = ref()
-	const searchFormState = ref({})
-	const searchFormRef = ref()
-	const cardLoading = ref(true)
-	const pageLoading = ref(false)
-	const selectedTableListLoading = ref(false)
-	// 替换treeNode 中 title,key,children
-	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
-	// 获取机构树数据
-	const treeData = ref()
-	//  默认展开二级树的节点id
-	const defaultExpandedKeys = ref([])
-	const emit = defineEmits({ onBack: null })
-	const tableData = ref([])
-	const selectedData = ref([])
-	const recordIds = ref()
-	const props = defineProps(['orgPageApi', 'orgTreeApi', 'radioModel', 'dataIsConverterFlw', 'checkedOrgListApi'])
-	// 是否是单选
-	const radioModel = props.radioModel || false
-	// 数据是否转换成工作流格式
-	const dataIsConverterFlw = props.dataIsConverterFlw || false
-	// 分页相关
-	const current = ref(0) // 当前页数
-	const pageSize = ref(20) // 每页条数
-	const total = ref(0) // 数据总数
+import { ElMessage } from 'element-plus'
+import { remove, isEmpty } from 'lodash-es'
+import { ref } from 'vue'
+// 弹窗是否打开
+const visible = ref(false)
+// 主表格common
+const commons = [
+    {
+        label: '操作',
+        prop: 'action',
+        align: 'center',
+        width: 80
+    },
+    {
+        label: '机构名',
+        prop: 'name',
+        ellipsis: true
+    },
+    {
+        label: '分类',
+        prop: 'category'
+    }
+]
+// 选中表格的表格common
+const selectedCommons = [
+    {
+        label: '操作',
+        prop: 'action',
+        align: 'center',
+        width: 80
+    },
+    {
+        label: '机构名',
+        prop: 'name',
+        ellipsis: true
+    }
+]
 
-	// 打开弹框
-	const showOrgPlusModal = (ids) => {
-		visible.value = true
-		if (dataIsConverterFlw) {
-			ids = goDataConverter(ids)
-		}
-		recordIds.value = ids
-		if (props.orgTreeApi) {
-			// 获取机构树
-			props.orgTreeApi().then((data) => {
-				cardLoading.value = false
-				if (data !== null) {
-					treeData.value = data
-					// 默认展开2级
-					treeData.value.forEach((item) => {
-						// 因为0的顶级
-						if (item.parentId === '0') {
-							defaultExpandedKeys.value.push(item.id)
-							// 取到下级ID
-							if (item.children) {
-								item.children.forEach((items) => {
-									defaultExpandedKeys.value.push(items.id)
-								})
-							}
-						}
-					})
-				}
-			})
-		}
-		searchFormState.value.size = pageSize.value
-		loadData()
-		if (props.checkedOrgListApi) {
-			if (isEmpty(recordIds.value)) {
-				return
-			}
-			const param = {
-				idList: recordIds.value
-			}
-			selectedTableListLoading.value = true
-			props
-				.checkedOrgListApi(param)
-				.then((data) => {
-					selectedData.value = data
-				})
-				.finally(() => {
-					selectedTableListLoading.value = false
-				})
-		}
-	}
-	// 查询主表格数据
-	const loadData = () => {
-		pageLoading.value = true
-		props
-			.orgPageApi(searchFormState.value)
-			.then((data) => {
-				current.value = data.current
-				total.value = data.total
-				// 重置、赋值
-				tableData.value = []
-				tableRecordNum.value = 0
-				tableData.value = data.records
-				if (data.records) {
-					tableRecordNum.value = data.records.length
-				} else {
-					tableRecordNum.value = 0
-				}
-			})
-			.finally(() => {
-				pageLoading.value = false
-			})
-	}
-	// pageSize改变回调分页事件
-	const paginationChange = (page, pageSize) => {
-		searchFormState.value.current = page
-		searchFormState.value.size = pageSize
-		loadData()
-	}
-	const judge = () => {
-		if (radioModel && selectedData.value.length > 0) {
-			return false
-		}
-		return true
-	}
-	// 添加记录
-	const addRecord = (record) => {
-		if (!judge()) {
-			message.warning('只可选择一条')
-			return
-		}
-		const selectedRecord = selectedData.value.filter((item) => item.id === record.id)
-		if (selectedRecord.length === 0) {
-			selectedData.value.push(record)
-		} else {
-			message.warning('该记录已存在')
-		}
-	}
-	// 添加全部
-	const addAllPageRecord = () => {
-		let newArray = selectedData.value.concat(tableData.value)
-		let list = []
-		for (let item1 of newArray) {
-			let flag = true
-			for (let item2 of list) {
-				if (item1.id === item2.id) {
-					flag = false
-				}
-			}
-			if (flag) {
-				list.push(item1)
-			}
-		}
-		selectedData.value = list
-	}
-	// 删减记录
-	const delRecord = (record) => {
-		remove(selectedData.value, (item) => item.id === record.id)
-	}
-	// 删减记录
-	const delAllRecord = () => {
-		selectedData.value = []
-	}
-	// 点击树查询
-	const treeSelect = (selectedKeys) => {
-		searchFormState.value.current = 0
-		if (selectedKeys.length > 0) {
-			searchFormState.value.orgId = selectedKeys.toString()
-		} else {
-			delete searchFormState.value.orgId
-		}
-		loadData()
-	}
-	// 确定
-	const handleOk = () => {
-		const value = []
-		selectedData.value.forEach((item) => {
-			const obj = {
-				id: item.id,
-				name: item.name,
-				category: item.category
-			}
-			value.push(obj)
-		})
-		// 判断是否做数据的转换为工作流需要的
-		if (dataIsConverterFlw) {
-			emit('onBack', outDataConverter(value))
-		} else {
-			emit('onBack', value)
-		}
-		handleClose()
-	}
-	// 重置
-	const reset = () => {
-		delete searchFormState.value.searchKey
-		loadData()
-	}
-	const handleClose = () => {
-		searchFormState.value = {}
-		tableRecordNum.value = 0
-		tableData.value = []
-		current.value = 0
-		pageSize.value = 20
-		total.value = 0
-		selectedData.value = []
-		visible.value = false
-	}
+// 主表格的ref 名称
+const table = ref()
+// 选中表格的ref 名称
+const selectedTable = ref()
+const tableRecordNum = ref()
+const searchFormState = ref({})
+const searchFormRef = ref()
+const cardLoading = ref(true)
+const pageLoading = ref(false)
+const selectedTableListLoading = ref(false)
+//树状图数据配置
+const defaultProps = {
+    children: 'children',
+    label: 'name'
+}
+// 替换treeNode 中 title,key,children
+const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
+// 获取机构树数据
+const treeData = ref()
+//  默认展开二级树的节点id
+const defaultExpandedKeys = ref([])
+const emit = defineEmits({ onBack: null })
+const tableData = ref([])
+const selectedData = ref([])
+const recordIds = ref()
+const props = defineProps(['orgPageApi', 'orgTreeApi', 'radioModel', 'dataIsConverterFlw', 'checkedOrgListApi'])
+// 是否是单选
+const radioModel = props.radioModel || false
+// 数据是否转换成工作流格式
+const dataIsConverterFlw = props.dataIsConverterFlw || false
+// 分页相关
+const current = ref(0) // 当前页数
+const pageSize = ref(20) // 每页条数
+const total = ref(0) // 数据总数
 
-	// 数据进入后转换
-	const goDataConverter = (data) => {
-		const resultData = []
-		if (data.length > 0) {
-			const values = data[0].value.split(',')
-			if (JSON.stringify(values) !== '[""]') {
-				for (let i = 0; i < values.length; i++) {
-					resultData.push(values[i])
-				}
-			}
-		}
-		return resultData
-	}
-	// 数据出口转换器
-	const outDataConverter = (data) => {
-		const obj = {}
-		let label = ''
-		let value = ''
-		for (let i = 0; i < data.length; i++) {
-			if (data.length === i + 1) {
-				label = label + data[i].name
-				value = value + data[i].id
-			} else {
-				label = label + data[i].name + ','
-				value = value + data[i].id + ','
-			}
-		}
-		obj.key = 'ORG'
-		obj.label = label
-		obj.value = value
-		obj.extJson = ''
-		return obj
-	}
-	defineExpose({
-		showOrgPlusModal
-	})
+// 打开弹框
+const showOrgPlusModal = ids => {
+    visible.value = true
+    if (dataIsConverterFlw) {
+        ids = goDataConverter(ids)
+    }
+    recordIds.value = ids
+    if (props.orgTreeApi) {
+        // 获取机构树
+        props.orgTreeApi().then(data => {
+            cardLoading.value = false
+            if (data !== null) {
+                console.log(data, 'data,++++++++++++')
+                treeData.value = data.data
+                // 默认展开2级
+                treeData.value.forEach(item => {
+                    // 因为0的顶级
+                    if (item.parentId === '0') {
+                        defaultExpandedKeys.value.push(item.id)
+                        // 取到下级ID
+                        if (item.children) {
+                            item.children.forEach(items => {
+                                defaultExpandedKeys.value.push(items.id)
+                            })
+                        }
+                    }
+                })
+            }
+        })
+    }
+    searchFormState.value.size = pageSize.value
+    loadData()
+    if (props.checkedOrgListApi) {
+        if (isEmpty(recordIds.value)) {
+            return
+        }
+        const param = {
+            idList: recordIds.value
+        }
+        selectedTableListLoading.value = true
+        props
+            .checkedOrgListApi(param)
+            .then(data => {
+                selectedData.value = data
+            })
+            .finally(() => {
+                selectedTableListLoading.value = false
+            })
+    }
+}
+// 查询主表格数据
+const loadData = () => {
+    pageLoading.value = true
+    props
+        .orgPageApi(searchFormState.value)
+        .then(data => {
+            current.value = data.current
+            total.value = data.total
+            // 重置、赋值
+            tableData.value = []
+            tableRecordNum.value = 0
+            console.log(data, '999999999999')
+            tableData.value = data.data.records
+            if (data.records) {
+                tableRecordNum.value = data.data.records.length
+            } else {
+                tableRecordNum.value = 0
+            }
+        })
+        .finally(() => {
+            pageLoading.value = false
+        })
+}
+// pageSize改变回调分页事件
+const paginationChange = (page, pageSize) => {
+    searchFormState.value.current = page
+    searchFormState.value.size = pageSize
+    loadData()
+}
+const judge = () => {
+    if (radioModel && selectedData.value.length > 0) {
+        return false
+    }
+    return true
+}
+// 添加记录
+const addRecord = record => {
+    if (!judge()) {
+        message.warning('只可选择一条')
+        return
+    }
+    const selectedRecord = selectedData.value.filter(item => item.id === record.id)
+    if (selectedRecord.length === 0) {
+        selectedData.value.push(record)
+    } else {
+        message.warning('该记录已存在')
+    }
+}
+// 添加全部
+const addAllPageRecord = () => {
+    let newArray = selectedData.value.concat(tableData.value)
+    let list = []
+    for (let item1 of newArray) {
+        let flag = true
+        for (let item2 of list) {
+            if (item1.id === item2.id) {
+                flag = false
+            }
+        }
+        if (flag) {
+            list.push(item1)
+        }
+    }
+    selectedData.value = list
+}
+// 删减记录
+const delRecord = record => {
+    remove(selectedData.value, item => item.id === record.id)
+}
+// 删减记录
+const delAllRecord = () => {
+    selectedData.value = []
+}
+// 点击树查询
+const treeSelect = selectedKeys => {
+    console.log(selectedKeys.id, '111112222333')
+    searchFormState.value.current = 0
+    if (selectedKeys.id) {
+        searchFormState.value.orgId = selectedKeys.id.toString()
+    } else {
+        // delete searchFormState.value.orgId
+        delete searchFormState.value.orgId
+    }
+    loadData()
+}
+// 确定
+const handleOk = () => {
+    const value = []
+    selectedData.value.forEach(item => {
+        const obj = {
+            id: item.id,
+            name: item.name,
+            category: item.category
+        }
+        value.push(obj)
+    })
+    // 判断是否做数据的转换为工作流需要的
+    if (dataIsConverterFlw) {
+        emit('onBack', outDataConverter(value))
+    } else {
+        emit('onBack', value)
+    }
+    handleClose()
+}
+// 重置
+const reset = () => {
+    delete searchFormState.value.searchKey
+    loadData()
+}
+const handleClose = () => {
+    searchFormState.value = {}
+    tableRecordNum.value = 0
+    tableData.value = []
+    current.value = 0
+    pageSize.value = 20
+    total.value = 0
+    selectedData.value = []
+    visible.value = false
+}
+
+// 数据进入后转换
+const goDataConverter = data => {
+    const resultData = []
+    if (data.length > 0) {
+        const values = data[0].value.split(',')
+        if (JSON.stringify(values) !== '[""]') {
+            for (let i = 0; i < values.length; i++) {
+                resultData.push(values[i])
+            }
+        }
+    }
+    return resultData
+}
+// 数据出口转换器
+const outDataConverter = data => {
+    const obj = {}
+    let label = ''
+    let value = ''
+    for (let i = 0; i < data.length; i++) {
+        if (data.length === i + 1) {
+            label = label + data[i].name
+            value = value + data[i].id
+        } else {
+            label = label + data[i].name + ','
+            value = value + data[i].id + ','
+        }
+    }
+    obj.key = 'ORG'
+    obj.label = label
+    obj.value = value
+    obj.extJson = ''
+    return obj
+}
+defineExpose({
+    showOrgPlusModal
+})
 </script>
 
-<style lang="less" scoped>
-	.selectorTreeDiv {
-		max-height: 500px;
-		overflow: auto;
+<style lang="scss" scoped>
+.selectorTreeDiv {
+    height: 500px;
+    overflow: auto;
+}
+.cardTag {
+    margin-left: 10px;
+}
+.primarySele {
+    margin-right: 10px;
+}
+.ant-form-item {
+    margin-bottom: 0 !important;
+}
+.org-table {
+    overflow: auto;
+    max-height: 450px;
+}
+.drawer_body {
+    width: 100%;
+    height: 350px;
+}
+.dialog-footer{
+	position:absolute;
+	right:10px;
+	bottom:10px;
+	z-index:2005;
+}
+.org_table_head,.org_table_heads{
+	width:100%;
+	height: 40px;
+	border: 1px solid #F0F0F0;
+	display:flex;
+	align-items:center;
+	justify-content: space-between;
+	padding:0 10px;
+	p{
+		font-size: 12px;
 	}
-	.cardTag {
-		margin-left: 10px;
+	.org_table_head_add,.org_table_head_delete{
+		width:100px;
+		height:24px;
+		font-size: 12px;
+		border:2px dashed #F0F0F0;
+		border-radius:2px;
+		cursor:pointer;
+		display:flex;
+		align-items: center;
+		justify-content: center;
 	}
-	.primarySele {
-		margin-right: 10px;
+	.org_table_head_add:hover{
+		 border:2px dashed #3FA9FF;
+		 color:#3FA9FF;
 	}
-	.ant-form-item {
-		margin-bottom: 0 !important;
-	}
-	.org-table {
-		overflow: auto;
-		max-height: 450px;
+	.org_table_head_delete{
+		width:72px;
+		height:24px;
+		border:2px dashed #FF4D4F;
+		color:#FF4D4F;
 	}
+}
 </style>

src/components/Selector/posSelectorPlus.vue

@@ -1,6 +1,6 @@
 <template>
-	<a-modal
-		v-model:visible="visible"
+	<el-dialog
+		v-model="visible"
 		title="职位选择"
 		:width="1000"
 		:mask-closable="false"
@@ -8,41 +8,41 @@
 		@ok="handleOk"
 		@cancel="handleClose"
 	>
-		<a-row :gutter="10">
-			<a-col :span="7">
-				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
-					<a-tree
+		<el-row :gutter="10">
+			<el-col :span="7">
+				<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+					<el-tree
 						v-if="treeData"
 						v-model:expandedKeys="defaultExpandedKeys"
 						:tree-data="treeData"
 						:field-names="treeFieldNames"
-						@select="treeSelect"
+						@node-click="treeSelect"
 					>
-					</a-tree>
-				</a-card>
-			</a-col>
-			<a-col :span="11">
+					</el-tree>
+				</el-card>
+			</el-col>
+			<el-col :span="11">
 				<div class="table-operator" style="margin-bottom: 10px">
-					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
-						<a-row :gutter="24">
-							<a-col :span="12">
-								<a-form-item name="searchKey">
-									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
-								</a-form-item>
-							</a-col>
-							<a-col :span="12">
-								<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
-								<a-button class="snowy-buttom-left" @click="() => reset()"> 重置 </a-button>
-							</a-col>
-						</a-row>
-					</a-form>
+					<el-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+						<el-row :gutter="24">
+							<el-col :span="12">
+								<el-form-item name="searchKey">
+									<el-input v-model:value="searchFormState.searchKey" placeholder="请输入职位名" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="12">
+								<el-button type="primary" class="primarySele" @click="loadData()"> 查询 </el-button>
+								<el-button class="snowy-buttom-left" @click="() => reset()"> 重置 </el-button>
+							</el-col>
+						</el-row>
+					</el-form>
 				</div>
 				<div class="pos-table">
-					<a-table
+					<el-table
 						ref="table"
 						size="small"
 						:columns="commons"
-						:data-source="tableData"
+						:datel="tableData"
 						:expand-row-by-click="true"
 						:loading="pageLoading"
 						bordered
@@ -51,20 +51,20 @@
 						<template #title>
 							<span>待选择列表 {{ tableRecordNum }} 条</span>
 							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+								<el-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</el-button>
 							</div>
 						</template>
 						<template #bodyCell="{ column, record }">
 							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
+								<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
 							</template>
 							<template v-if="column.dataIndex === 'category'">
 								{{ $TOOL.dictTypeData('POSITION_CATEGORY', record.category) }}
 							</template>
 						</template>
-					</a-table>
+					</el-table>
 					<div class="mt-2">
-						<a-pagination
+						<el-pagination
 							v-if="!isEmpty(tableData)"
 							v-model:current="current"
 							v-model:page-size="pageSize"
@@ -75,14 +75,14 @@
 						/>
 					</div>
 				</div>
-			</a-col>
-			<a-col :span="6">
+			</el-col>
+			<el-col :span="6">
 				<div class="pos-table">
-					<a-table
+					<el-table
 						ref="selectedTable"
 						size="small"
 						:columns="selectedCommons"
-						:data-source="selectedData"
+						:datel-source="selectedData"
 						:expand-row-by-click="true"
 						:loading="selectedTableListLoading"
 						bordered
@@ -90,19 +90,19 @@
 						<template #title>
 							<span>已选择: {{ selectedData.length }}</span>
 							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+								<el-button type="dashed" danger size="small" @click="delAllRecord">全部移除</el-button>
 							</div>
 						</template>
 						<template #bodyCell="{ column, record }">
 							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
+								<el-button type="dashed" danger size="small" @click="delRecord(record)">移除</el-button>
 							</template>
 						</template>
-					</a-table>
+					</el-table>
 				</div>
-			</a-col>
-		</a-row>
-	</a-modal>
+			</el-col>
+		</el-row>
+	</el-dialog>
 </template>
 
 <script setup name="posSelectorPlus">

src/components/Selector/roleSelectorPlus.vue

@@ -1,6 +1,6 @@
 <template>
-	<a-modal
-		v-model:visible="visible"
+	<el-dialog
+		v-model="visible"
 		title="角色选择"
 		:width="1000"
 		:mask-closable="false"
@@ -8,41 +8,41 @@
 		@ok="handleOk"
 		@cancel="handleClose"
 	>
-		<a-row :gutter="10">
-			<a-col :span="7">
-				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
-					<a-tree
+		<el-row :gutter="10">
+			<el-col :span="7">
+				<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+					<el-tree
 						v-if="treeData"
 						v-model:expandedKeys="defaultExpandedKeys"
-						:tree-data="treeData"
+						:data="treeData"
 						:field-names="treeFieldNames"
 						@select="treeSelect"
 					>
-					</a-tree>
-				</a-card>
-			</a-col>
-			<a-col :span="11">
+					</el-tree>
+				</el-card>
+			</el-col>
+			<el-col :span="11">
 				<div class="table-operator" style="margin-bottom: 10px">
-					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
-						<a-row :gutter="24">
-							<a-col :span="12">
-								<a-form-item name="searchKey">
-									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入角色名" />
-								</a-form-item>
-							</a-col>
-							<a-col :span="12">
-								<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
-								<a-button class="snowy-buttom-left" @click="() => reset()"> 重置 </a-button>
-							</a-col>
-						</a-row>
-					</a-form>
+					<el-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+						<el-row :gutter="24">
+							<el-col :span="12">
+								<el-form-item name="searchKey">
+									<el-input v-model:value="searchFormState.searchKey" placeholder="请输入角色名" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="12">
+								<el-button type="primary" class="primarySele" @click="loadData()"> 查询 </el-button>
+								<el-button class="snowy-buttom-left" @click="() => reset()"> 重置 </el-button>
+							</el-col>
+						</el-row>
+					</el-form>
 				</div>
 				<div class="role-table">
-					<a-table
+					<el-table
 						ref="table"
 						size="small"
 						:columns="commons"
-						:data-source="tableData"
+						:data="tableData"
 						:expand-row-by-click="true"
 						:loading="pageLoading"
 						bordered
@@ -51,20 +51,20 @@
 						<template #title>
 							<span>待选择列表 {{ tableRecordNum }} 条</span>
 							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+								<el-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</el-button>
 							</div>
 						</template>
 						<template #bodyCell="{ column, record }">
 							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
+								<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
 							</template>
 							<template v-if="column.dataIndex === 'category'">
 								{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
 							</template>
 						</template>
-					</a-table>
+					</el-table>
 					<div class="mt-2">
-						<a-pagination
+						<el-pagination
 							v-if="!isEmpty(tableData)"
 							v-model:current="current"
 							v-model:page-size="pageSize"
@@ -75,10 +75,10 @@
 						/>
 					</div>
 				</div>
-			</a-col>
-			<a-col :span="6">
+			</el-col>
+			<el-col :span="6">
 				<div class="role-table">
-					<a-table
+					<el-table
 						ref="selectedTable"
 						size="small"
 						:columns="selectedCommons"
@@ -90,19 +90,19 @@
 						<template #title>
 							<span>已选择: {{ selectedData.length }}</span>
 							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+								<el-button type="dashed" danger size="small" @click="delAllRecord">全部移除</el-button>
 							</div>
 						</template>
 						<template #bodyCell="{ column, record }">
 							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
+								<el-button type="dashed" danger size="small" @click="delRecord(record)">移除</el-button>
 							</template>
 						</template>
-					</a-table>
+					</el-table>
 				</div>
-			</a-col>
-		</a-row>
-	</a-modal>
+			</el-col>
+		</el-row>
+	</el-dialog>
 </template>
 
 <script setup name="roleSelectorPlus">

src/components/Selector/userSelectorPlus.vue

@@ -1,6 +1,6 @@
 <template>
-	<a-modal
-		v-model:visible="visible"
+	<el-dialog
+		v-model="visible"
 		title="用户选择"
 		:width="1000"
 		:mask-closable="false"
@@ -8,37 +8,37 @@
 		@ok="handleOk"
 		@cancel="handleClose"
 	>
-		<a-row :gutter="10">
-			<a-col :span="7">
-				<a-card size="small" :loading="cardLoading" class="selectorTreeDiv">
-					<a-tree
+		<el-row :gutter="10">
+			<el-col :span="7">
+				<el-card size="small" :loading="cardLoading" class="selectorTreeDiv">
+					<el-tree
 						v-if="treeData"
 						v-model:expandedKeys="defaultExpandedKeys"
-						:tree-data="treeData"
+						:data="treeData"
 						:field-names="treeFieldNames"
-						@select="treeSelect"
+						@node-click="treeSelect"
 					>
-					</a-tree>
-				</a-card>
-			</a-col>
-			<a-col :span="11">
+					</el-tree>
+				</el-card>
+			</el-col>
+			<el-col :span="11">
 				<div class="table-operator" style="margin-bottom: 10px">
-					<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
-						<a-row :gutter="24">
-							<a-col :span="12">
-								<a-form-item name="searchKey">
-									<a-input v-model:value="searchFormState.searchKey" placeholder="请输入用户名" />
-								</a-form-item>
-							</a-col>
-							<a-col :span="12">
-								<a-button type="primary" class="primarySele" @click="loadData()"> 查询 </a-button>
-								<a-button class="snowy-buttom-left" @click="reset()"> 重置 </a-button>
-							</a-col>
-						</a-row>
-					</a-form>
+					<el-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
+						<el-row :gutter="24">
+							<el-col :span="12">
+								<el-form-item name="searchKey">
+									<el-input v-model:value="searchFormState.searchKey" placeholder="请输入用户名" />
+								</el-form-item>
+							</el-col>
+							<el-col :span="12">
+								<el-button type="primary" class="primarySele" @click="loadData()"> 查询 </el-button>
+								<el-button class="snowy-buttom-left" @click="reset()"> 重置 </el-button>
+							</el-col>
+						</el-row>
+					</el-form>
 				</div>
 				<div class="user-table">
-					<a-table
+					<el-table
 						ref="table"
 						size="small"
 						:columns="commons"
@@ -51,20 +51,20 @@
 						<template #title>
 							<span>待选择列表 {{ tableRecordNum }} 条</span>
 							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</a-button>
+								<el-button type="dashed" size="small" @click="addAllPageRecord">添加当前数据</el-button>
 							</div>
 						</template>
 						<template #bodyCell="{ column, record }">
 							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" size="small" @click="addRecord(record)">添加</a-button>
+								<el-button type="dashed" size="small" @click="addRecord(record)">添加</el-button>
 							</template>
 							<template v-if="column.dataIndex === 'category'">
 								{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
 							</template>
 						</template>
-					</a-table>
+					</el-table>
 					<div class="mt-2">
-						<a-pagination
+						<el-pagination
 							v-if="!isEmpty(tableData)"
 							v-model:current="current"
 							v-model:page-size="pageSize"
@@ -75,10 +75,10 @@
 						/>
 					</div>
 				</div>
-			</a-col>
-			<a-col :span="6">
+			</el-col>
+			<el-col :span="6">
 				<div class="user-table">
-					<a-table
+					<el-table
 						ref="selectedTable"
 						size="small"
 						:columns="selectedCommons"
@@ -90,19 +90,19 @@
 						<template #title>
 							<span>已选择: {{ selectedData.length }}</span>
 							<div v-if="!radioModel" style="float: right">
-								<a-button type="dashed" danger size="small" @click="delAllRecord">全部移除</a-button>
+								<el-button type="dashed" danger size="small" @click="delAllRecord">全部移除</el-button>
 							</div>
 						</template>
 						<template #bodyCell="{ column, record }">
 							<template v-if="column.dataIndex === 'action'">
-								<a-button type="dashed" danger size="small" @click="delRecord(record)">移除</a-button>
+								<el-button type="dashed" danger size="small" @click="delRecord(record)">移除</el-button>
 							</template>
 						</template>
-					</a-table>
+					</el-table>
 				</div>
-			</a-col>
-		</a-row>
-	</a-modal>
+			</el-col>
+		</el-row>
+	</el-dialog>
 </template>
 
 <script setup name="userSelectorPlus">
@@ -186,7 +186,7 @@
 			props.orgTreeApi().then((data) => {
 				cardLoading.value = false
 				if (data !== null) {
-					treeData.value = data
+					treeData.value = data.data
 					// 默认展开2级
 					treeData.value.forEach((item) => {
 						// 因为0的顶级

src/components/XnFormContainer/index.vue

@@ -1,47 +0,0 @@
-<template>
-	<el-dialog v-if="isModal" :visible="visible" @cancel="cancel" v-bind="$attrs">
-		<template v-for="slotKey in slotKeys" #[slotKey]>
-			<slot :name="slotKey" />
-		</template>
-	</el-dialog>
-	<el-drawer v-else :visible="visible" v-bind="$attrs" :footer-style="{ textAlign: 'right' }">
-		<template v-for="slotKey in slotKeys" #[slotKey]>
-			<slot :name="slotKey" />
-		</template>
-	</el-drawer>
-</template>
-
-<script>
-	import { mapState } from 'pinia'
-	import { globalStore } from '@/store'
-
-	const FormContainerTypeEnum = {
-		DRAWER: 'drawer',
-		MODAL: 'modal'
-	}
-	export default {
-		name: 'XnFormContainer',
-		inheritAttrs: false,
-		props: {
-			visible: {
-				type: Boolean,
-				default: false,
-				required: true
-			}
-		},
-		computed: {
-			...mapState(globalStore, ['formStyle']),
-			slotKeys() {
-				return Object.keys(this.$slots)
-			},
-			isModal() {
-				return FormContainerTypeEnum.MODAL === this.formStyle
-			}
-		},
-		methods: {
-			cancel() {
-				this.$emit('close')
-			}
-		}
-	}
-</script>

src/components/XnWorkflow/components/addWatch.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="dialogFormVisible" title="新增" width="500">
+    <el-dialog v-model="dialogFormVisible" title="新增" width="500" :append-to-body="true">
         <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" label-position="top">
             <el-form-item label="监听类型：" prop="listenerType">
                 <el-select v-model="formData.listenerType" placeholder="请选择类型">
@@ -40,7 +40,7 @@ const props = defineProps({
         default: false
     }
 })
-const emit=defineEmits(['close','addWacth'])
+const emit = defineEmits(['close', 'addWacth'])
 watch(
     () => props.addFlag,
     (val, oldVal) => {
@@ -99,13 +99,22 @@ const listenerValueArray = reactive([
     }
 ])
 //关闭
-async function handleClose(){
-    emit("close")
+async function handleClose() {
+    emit('close')
 }
 //提交
-async function handleAdd(){
-    emit("addWatch",formData);
-    emit("close");
+const formRef = ref(null)
+async function handleAdd() {
+    formRef.value.validate(valid => {
+        if (valid) {
+            console.log(valid)
+            emit("addWatch",formData);
+            emit("close");
+        } else {
+            console.log('error submit!')
+            return false
+        }
+    })
 }
 onMounted(() => {
     console.log()
@@ -115,9 +124,9 @@ onMounted(() => {
 .dialog-footer {
     padding: 20px 15px !important;
 }
-.el-form{
-    width:96%;
-    margin:0 auto;
-    margin-top:20px;
+.el-form {
+    width: 96%;
+    margin: 0 auto;
+    margin-top: 20px;
 }
 </style>

src/components/XnWorkflow/globalAttribute/watchs.vue

@@ -7,8 +7,8 @@
         <div class="watchs_info">
             <el-button type="primary" :icon="Plus" size="small" @click="handleAdd">新增</el-button>
             <el-table :data="tableData" border style="width: 100%" height="400">
-                <el-table-column align="left" prop="listenerType" label="名称" width="180" />
-                <el-table-column align="left" prop="javaClass" label="JAVA监听器" width="180" />
+                <el-table-column align="left" prop="listenerType" label="名称" width="120" />
+                <el-table-column align="left" prop="javaClass" label="JAVA监听器"/>
                 <el-table-column align="left" fixed="right" label="操作" width="120">
                     <template #default="scope">
                         <el-button link type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

src/components/XnWorkflow/index.vue

@@ -25,29 +25,34 @@
             <!--				</el-button>-->
             <!--			</el-tooltip>-->
 
-            <el-tooltip class="box-item" effect="dark" content="配置流程全局属性" placement="top">
+            <el-tooltip class="box-item" effect="dark" content="配置流程全局属性" placement="top-start">
                 <el-button :icon="Setting" @click="drawerVisibile=true">
                     全局配置
-                    <template #icon>
+                    <!-- <template #icon>
                         <Setting />
-                    </template>
+                    </template> -->
                 </el-button>
             </el-tooltip>
         </div>
         <div class="box-scale">
-            <node-wrap
-                v-if="childNode"
-                v-model="childNode.childNode"
-                :form-field-list-value="childFormFieldListValue"
-                :record-data="childRecordData"
-                :process-config-info="childNode.properties.configInfo"
-                :execution-listener-array="executionListenerArray"
-                :task-listener-array="taskListenerArray"
-                :selector-api-function="selectorApiFunction"
-            />
+			<!-- 展示流程图组件 -->
+			<!-- {{ childNode }}{{ modelValue }}444{{ childRecordData }}
+			节点111{{ childNode }} -->
+			<!-- {{ childRecordData }} -->
+    		<node-wrap
+				v-if="childNode"
+				v-model="childNode.childNode"
+				:form-field-list-value="childFormFieldListValue"
+				:record-data="childRecordData"
+				:process-config-info="childNode.properties.configInfo"
+				:execution-listener-array="executionListenerArray"
+				:task-listener-array="taskListenerArray"
+				:selector-api-function="selectorApiFunction"
+			/>
+			<!-- <nodeWrap v-if="childNode" v-model="childNode.childNode" :currentActivityId="currentActivityId" /> -->
             <div class="end-node">
                 <div class="end-node-circle"></div>
-                <div class="end-node-text">流程结束</div>
+                <div class="end-node-text">流程结束111</div>
             </div>
         </div>
         <process
@@ -76,7 +81,13 @@ export default {
     computed: {
         Plus() {
             return Plus
-        }
+        },
+		Setting(){
+			return Setting
+		},
+		Setting(){
+			return Warning
+		}
     },
     components: {
         nodeWrap,
@@ -105,8 +116,13 @@ export default {
             childRecordData: this.recordData
         }
     },
+	mounted(){
+
+	console.log(this);
+	},
     watch: {
         modelValue(val) {
+			console.log(val,"9999999");
             this.childNode = val
         },
         // 监听字段列表传输的相关动静
@@ -137,4 +153,9 @@ export default {
 
 <style lang="less">
 @import './flowIndex.less';
+.box-scale{
+    width: 100%;
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+}
 </style>

src/components/XnWorkflow/nodeWrap.vue

@@ -85,47 +85,36 @@
 	/>
 </template>
 
-<script>
-	import startEvent from './nodes/startEvent.vue'
-	import startTask from './nodes/startTask.vue'
-	import userTask from './nodes/userTask.vue'
-	import exclusiveGateway from './nodes/exclusiveGateway.vue'
-	import parallelGateway from './nodes/parallelGateway.vue'
-	import serviceTask from './nodes/serviceTask.vue'
-
-	export default {
-		components: {
-			startEvent,
-			startTask,
-			userTask,
-			exclusiveGateway,
-			parallelGateway,
-			serviceTask
+<script setup>
+	import StartEvent from './nodes/startEvent.vue'
+	import StartTask from './nodes/startTask.vue'
+	import UserTask from './nodes/userTask.vue'
+	import ExclusiveGateway from './nodes/exclusiveGateway.vue'
+	import ParallelGateway from './nodes/parallelGateway.vue'
+	import ServiceTask from './nodes/serviceTask.vue'
+	import {ref,watch} from 'vue'
+	const props = defineProps({
+		modelValue: { type: Object, default: () => {} },
+		formFieldListValue: { type: Array, default: () => [] },
+		recordData: { type: Object, default: () => {} },
+		processConfigInfo: { type: Object, default: () => {} },
+		executionListenerArray: { type: Array, default: () => [] },
+		taskListenerArray: { type: Array, default: () => [] },
+		selectorApiFunction: { type: Object, default: () => {} }
+	})
+	const emit = defineEmits(['update:modelValue'])
+	// 创建响应式引用
+	const childNode = ref({})
+	// 监听 props.modelValue 的变化，并同步到 childNode.value
+	watch(
+		() => props.modelValue,
+		(newValue) => {
+			childNode.value = newValue
 		},
-		props: {
-			modelValue: { type: Object, default: () => {} },
-			formFieldListValue: { type: Array, default: () => [] },
-			recordData: { type: Object, default: () => {} },
-			processConfigInfo: { type: Object, default: () => {} },
-			executionListenerArray: { type: Array, default: () => [] },
-			taskListenerArray: { type: Array, default: () => [] },
-			selectorApiFunction: { type: Object, default: () => {} }
-		},
-		data() {
-			return {
-				childNode: {}
-			}
-		},
-		watch: {
-			modelValue(val) {
-				this.childNode = val
-			},
-			childNode(val) {
-				this.$emit('update:modelValue', val)
-			}
-		},
-		mounted() {
-			this.childNode = this.modelValue
-		}
-	}
+		{ immediate: true } // 立即执行一次监听器
+	)
+	// 监听 childNode.value 的变化，并发出自定义事件 update:modelValue
+	watch(childNode, (newValue) => {
+		emit('update:modelValue', newValue)
+	})
 </script>

src/components/XnWorkflow/nodes/addNode.vue

@@ -1,152 +1,273 @@
+<!-- 添加节点组件 -->
 <template>
-	<div class="add-node-btn-box">
-		<div class="add-node-btn">
-			<a-popover v-model:visible="visible" placement="rightTop" trigger="click" :width="270">
-				<template #content>
-					<div class="add-node-popover-body">
-						<ul style="height: 80px">
-							<li>
-								<a-button shape="circle" size="large" @click="addType('userTask')">
-									<template #icon>
-										<user-outlined style="color: #ff943e; font-size: 18px" />
-									</template>
-								</a-button>
-								<p>审批节点</p>
-							</li>
-							<li>
-								<a-button shape="circle" size="large" @click="addType('serviceTask')">
-									<template #icon>
-										<send-outlined style="color: #3296fa; font-size: 18px" />
-									</template>
-								</a-button>
-								<p>抄送节点</p>
-							</li>
-							<li v-if="addExclusiveGateway">
-								<a-button shape="circle" size="large" @click="addType('exclusiveGateway')">
-									<template #icon>
-										<share-alt-outlined style="color: #15bc83; font-size: 18px" />
-									</template>
-								</a-button>
-								<p>条件分支</p>
-							</li>
-							<li v-if="addParallelGateway">
-								<a-button shape="circle" size="large" @click="addType('parallelGateway')">
-									<template #icon>
-										<partition-outlined :rotate="180" style="color: #ac28f5; font-size: 18px" />
-									</template>
-								</a-button>
-								<p>并行分支</p>
-							</li>
-						</ul>
-					</div>
-				</template>
-				<a-button type="primary" shape="circle">
-					<!--  @click="addNodeButton" -->
-					<template #icon><plus-outlined /></template>
-				</a-button>
-			</a-popover>
-		</div>
-	</div>
+    <div class="add-node-btn-box">
+        <div class="add-node-btn">
+            <el-popover placement="right" :width="280" trigger="click">
+                <template #reference>
+                    <el-button type="primary" circle @click="addNodeButton" :icon="Plus"></el-button>
+                </template>
+                <div class="button_info">
+                    <ul style="height: 80px">
+                        <li>
+                            <el-button
+                                size="large"
+                                type="primary"
+                                :icon="UserFilled"
+                                circle
+                                @click="addType('userTask')"
+                            ></el-button>
+                            <p>审批节点</p>
+                        </li>
+                        <li>
+                            <el-button
+                                size="large"
+                                type="warning"
+                                :icon="Promotion"
+                                circle
+                                @click="addType('serviceTask')"
+                            ></el-button>
+                            <p>抄送节点</p>
+                        </li>
+                        <li v-if="addExclusiveGateway">
+                            <el-button
+                                size="large"
+                                type="danger"
+                                :icon="Share"
+                                circle
+                                @click="addType('exclusiveGateway')"
+                            ></el-button>
+                            <p>条件分支</p>
+                        </li>
+                        <li v-if="addParallelGateway">
+                            <el-button
+                                size="large"
+                                type="success"
+                                :icon="Operation"
+                                circle
+                                @click="addType('parallelGateway')"
+                            ></el-button>
+                            <p>并行分支</p>
+                        </li>
+                    </ul>
+                </div>
+            </el-popover>
+        </div>
+    </div>
 </template>
+<!-- <script>
+import { cloneDeep } from 'lodash-es'
+import config from '@/components/XnWorkflow/nodes/config/config'
+const NodeTitleMap = {
+    userTask: '审核人',
+    serviceTask: '抄送人',
+    exclusiveGateway: '条件路由',
+    parallelGateway: '并行路由'
+}
+export default {
+    props: {
+        modelValue: { type: Object, default: () => {} },
+        parentData: { type: Object, default: () => {} },
+        nodeItem: { type: Object, default: () => {} }
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            visible: true,
+            addExclusiveGateway: true,
+            addParallelGateway: true
+        }
+    },
+    mounted() {},
+    methods: {
+        addNodeButton() {
+            // 他的上级是条件分支或并行分支，将其不在添加 // 控制节点下面
+            if (!this.parentData) {
+                this.disabledChildren()
+            } else {
+                if (this.parentData.type === 'exclusiveGateway' || this.parentData.type === 'parallelGateway') {
+                    this.addExclusiveGateway = false
+                    this.addParallelGateway = false
+                }
+            }
+        },
+        disabledChildren() {
+            // 如果下级是条件分支或并行分支，将其不在添加 // 控制节点上面
+            if (this.modelValue && this.modelValue.type) {
+                if (this.modelValue.type === 'exclusiveGateway' || this.modelValue.type === 'parallelGateway') {
+                    this.addExclusiveGateway = false
+                    this.addParallelGateway = false
+                }
+            }
+            // 不管其他的，如果是条件分支的项，那么他的下面无法添加条件
+            if (this.nodeItem) {
+                this.addExclusiveGateway = false
+            }
+        },
+        getBaseCondition(type, title) {
+            const condition = cloneDeep(config.nodeModel.node)
+            condition.id = this.$TOOL.snowyUuid()
+            condition.type = type
+            condition.title = title
+            return condition
+        },
+        addType(type) {
+            const nodeModel = this.getBaseCondition(type, NodeTitleMap[type]) || {}
+            nodeModel.childNode = this.modelValue
+            if (type === 'userTask') {
+                // 创建 configInfo
+                const configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+                nodeModel.properties.configInfo = configInfo
+            } else if (type === 'exclusiveGateway') {
+                nodeModel.dataLegal = true
+                // 创建分支节点1
+                const condition1 = this.getBaseCondition('sequenceFlow', '条件1')
+                // 创建分支节点1 configInfo
+                const condition1ConfigInfo1 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
+                condition1ConfigInfo1.priorityLevel = 1
+                condition1.properties.configInfo = condition1ConfigInfo1
+                // 创建分支节点2
+                const condition2 = this.getBaseCondition('sequenceFlow', '条件2')
+                // 创建分支节点2 configInfo
+                const condition1ConfigInfo2 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
+                condition1ConfigInfo2.priorityLevel = 2
+                condition2.properties.configInfo = condition1ConfigInfo2
+                // 装进去
+                nodeModel.conditionNodeList.push(condition1)
+                nodeModel.conditionNodeList.push(condition2)
+            } else if (type === 'parallelGateway') {
+                // 创建主节点
+                nodeModel.dataLegal = true
+                // 创建分支节点1
+                const condition1 = this.getBaseCondition('userTask', '审批人1')
+                condition1.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+                condition1.dataLegal = true
+                // 创建分支节点2
+                const condition2 = this.getBaseCondition('userTask', '审批人2')
+                condition2.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+                condition2.dataLegal = true
+                // 装进去
+                nodeModel.conditionNodeList.push(condition1)
+                nodeModel.conditionNodeList.push(condition2)
+            }
+            this.visible = true
+            this.$emit('update:modelValue', nodeModel)
+        }
+    }
+}
 
-<script>
-	import { cloneDeep } from 'lodash-es'
+</script> -->
+
+<script setup>
+import { Plus, UserFilled, Promotion, Share, Operation } from '@element-plus/icons-vue';
+import {ref,nextTick} from 'vue'
+import { cloneDeep } from 'lodash-es'
 	import config from '@/components/XnWorkflow/nodes/config/config'
+	import tool from '@/utils/tool'
 	const NodeTitleMap = {
 		userTask: '审核人',
 		serviceTask: '抄送人',
 		exclusiveGateway: '条件路由',
 		parallelGateway: '并行路由'
 	}
-	export default {
-		props: {
-			modelValue: { type: Object, default: () => {} },
-			parentData: { type: Object, default: () => {} },
-			nodeItem: { type: Object, default: () => {} }
-		},
-		emits: ['update:modelValue'],
-		data() {
-			return {
-				visible: false,
-				addExclusiveGateway: true,
-				addParallelGateway: true
-			}
-		},
-		mounted() {},
-		methods: {
-			addNodeButton() {
-				// 他的上级是条件分支或并行分支，将其不在添加 // 控制节点下面
-				if (!this.parentData) {
-					this.disabledChildren()
-				} else {
-					if (this.parentData.type === 'exclusiveGateway' || this.parentData.type === 'parallelGateway') {
-						this.addExclusiveGateway = false
-						this.addParallelGateway = false
-					}
-				}
-			},
-			disabledChildren() {
-				// 如果下级是条件分支或并行分支，将其不在添加 // 控制节点上面
-				if (this.modelValue && this.modelValue.type) {
-					if (this.modelValue.type === 'exclusiveGateway' || this.modelValue.type === 'parallelGateway') {
-						this.addExclusiveGateway = false
-						this.addParallelGateway = false
-					}
-				}
-				// 不管其他的，如果是条件分支的项，那么他的下面无法添加条件
-				if (this.nodeItem) {
-					this.addExclusiveGateway = false
-				}
-			},
-			getBaseCondition(type, title) {
-				const condition = cloneDeep(config.nodeModel.node)
-				condition.id = this.$TOOL.snowyUuid()
-				condition.type = type
-				condition.title = title
-				return condition
-			},
-			addType(type) {
-				const nodeModel = this.getBaseCondition(type, NodeTitleMap[type]) || {}
-				nodeModel.childNode = this.modelValue
-				if (type === 'userTask') {
-					// 创建 configInfo
-					const configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
-					nodeModel.properties.configInfo = configInfo
-				} else if (type === 'exclusiveGateway') {
-					nodeModel.dataLegal = true
-					// 创建分支节点1
-					const condition1 = this.getBaseCondition('sequenceFlow', '条件1')
-					// 创建分支节点1 configInfo
-					const condition1ConfigInfo1 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
-					condition1ConfigInfo1.priorityLevel = 1
-					condition1.properties.configInfo = condition1ConfigInfo1
-					// 创建分支节点2
-					const condition2 = this.getBaseCondition('sequenceFlow', '条件2')
-					// 创建分支节点2 configInfo
-					const condition1ConfigInfo2 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
-					condition1ConfigInfo2.priorityLevel = 2
-					condition2.properties.configInfo = condition1ConfigInfo2
-					// 装进去
-					nodeModel.conditionNodeList.push(condition1)
-					nodeModel.conditionNodeList.push(condition2)
-				} else if (type === 'parallelGateway') {
-					// 创建主节点
-					nodeModel.dataLegal = true
-					// 创建分支节点1
-					const condition1 = this.getBaseCondition('userTask', '审批人1')
-					condition1.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
-					condition1.dataLegal = true
-					// 创建分支节点2
-					const condition2 = this.getBaseCondition('userTask', '审批人2')
-					condition2.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
-					condition2.dataLegal = true
-					// 装进去
-					nodeModel.conditionNodeList.push(condition1)
-					nodeModel.conditionNodeList.push(condition2)
-				}
-				this.visible = false
-				this.$emit('update:modelValue', nodeModel)
+	const props = defineProps({
+		modelValue: { type: Object, default: () => {} },
+		parentData: { type: Object, default: () => {} },
+		nodeItem: { type: Object, default: () => {} }
+	})
+	const emit = defineEmits(['update:modelValue'])
+	const visible = ref(false)
+	const addExclusiveGateway = ref(true)
+	const addParallelGateway = ref(true)
+	const addNodeButton = () => {
+		// 他的上级是条件分支或并行分支，将其不在添加 // 控制节点下面
+		if (!props.parentData) {
+			disabledChildren()
+		} else {
+			if (props.parentData.type === 'exclusiveGateway' || props.parentData.type === 'parallelGateway') {
+				addExclusiveGateway.value = false
+				addParallelGateway.value = false
 			}
 		}
 	}
+	const disabledChildren = () => {
+		// 如果下级是条件分支或并行分支，将其不在添加 // 控制节点上面
+		if (props.modelValue && props.modelValue.type) {
+			if (props.modelValue.type === 'exclusiveGateway' || props.modelValue.type === 'parallelGateway') {
+				addExclusiveGateway.value = false
+				addParallelGateway.value = false
+			}
+		}
+		// 不管其他的，如果是条件分支的项，那么他的下面无法添加条件
+		if (props.nodeItem) {
+			addExclusiveGateway.value = false
+		}
+	}
+	const getBaseCondition = (type, title) => {
+		const condition = cloneDeep(config.nodeModel.node)
+		condition.id = tool.snowyUuid()
+		condition.type = type
+		condition.title = title
+		return condition
+	}
+	const addType = (type) => {
+		const nodeModel = getBaseCondition(type, NodeTitleMap[type]) || {}
+		nodeModel.childNode = props.modelValue
+		if (type === 'userTask') {
+			// 创建 configInfo
+			nodeModel.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+		} else if (type === 'exclusiveGateway') {
+			nodeModel.dataLegal = true
+			// 创建分支节点1
+			const condition1 = getBaseCondition('sequenceFlow', '条件1')
+			// 创建分支节点1 configInfo
+			const condition1ConfigInfo1 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
+			condition1ConfigInfo1.priorityLevel = 1
+			condition1.properties.configInfo = condition1ConfigInfo1
+			// 创建分支节点2
+			const condition2 = getBaseCondition('sequenceFlow', '条件2')
+			// 创建分支节点2 configInfo
+			const condition1ConfigInfo2 = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
+			condition1ConfigInfo2.priorityLevel = 2
+			condition2.properties.configInfo = condition1ConfigInfo2
+			// 装进去
+			nodeModel.conditionNodeList.push(condition1)
+			nodeModel.conditionNodeList.push(condition2)
+		} else if (type === 'parallelGateway') {
+			// 创建主节点
+			nodeModel.dataLegal = true
+			// 创建分支节点1
+			const condition1 = getBaseCondition('userTask', '审批人1')
+			condition1.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+			condition1.dataLegal = true
+			// 创建分支节点2
+			const condition2 = getBaseCondition('userTask', '审批人2')
+			condition2.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+			condition2.dataLegal = true
+			// 装进去
+			nodeModel.conditionNodeList.push(condition1)
+			nodeModel.conditionNodeList.push(condition2)
+		}
+		visible.value = false
+		emit('update:modelValue', nodeModel)
+	}
 </script>
+<style lang="scss" scoped>
+.button_info{
+	width:100%;
+	ul{
+		width:100%;
+		display:flex;
+		align-items: center;
+		justify-content: space-between;
+		li{
+			list-style: none;
+			p{
+				font-size: 12px;
+				text-align: center;
+				margin-top: 10px;
+				font-weight: 800;
+			}
+		}
+	}
+}
+</style>

src/components/XnWorkflow/nodes/common/previewCustomForm.vue

@@ -1,42 +1,42 @@
 <template>
-	<a-modal
-		title="预览"
-		:width="700"
-		:visible="visible"
-		:destroy-on-close="true"
-		:footer-style="{ textAlign: 'right' }"
-		:mask="false"
-		:confirmLoading="confirmLoading"
-		@ok="onSubmit"
-		@cancel="onClose"
-	>
-		<component ref="customFormRef" :is="customFormsLayouts" />
-	</a-modal>
+    <el-dialog
+        title="预览"
+        :width="700"
+        v-model="visible"
+        :destroy-on-close="true"
+        :footer-style="{ textAlign: 'right' }"
+        :mask="false"
+        :confirmLoading="confirmLoading"
+        @ok="onSubmit"
+        @cancel="onClose"
+    >
+        <component ref="customFormRef" :is="customFormsLayouts" />
+    </el-dialog>
 </template>
 
 <script setup name="previewCustomForm">
-	import { ElMessage } from 'element-plus'
-	import { loadComponent } from '../../customForm'
-	import { ref } from 'vue'
-	const visible = ref(false)
-	const confirmLoading = ref(false)
-	const customFormRef = ref()
-	const customFormsLayouts = ref()
-	const onOpen = (url) => {
-		if (url) {
-			visible.value = true
-			customFormsLayouts.value = loadComponent(url)
-		}
-	}
-	const onSubmit = () => {
-		customFormRef.value.getData().then((value) => {
-			message.info(JSON.stringify(value))
-		})
-	}
-	const onClose = () => {
-		visible.value = false
-	}
-	defineExpose({
-		onOpen
-	})
+import { ElMessage } from 'element-plus'
+import { loadComponent } from '../../customForm'
+import { ref } from 'vue'
+const visible = ref(false)
+const confirmLoading = ref(false)
+const customFormRef = ref()
+const customFormsLayouts = ref()
+const onOpen = url => {
+    if (url) {
+        visible.value = true
+        customFormsLayouts.value = loadComponent(url)
+    }
+}
+const onSubmit = () => {
+    customFormRef.value.getData().then(value => {
+        message.info(JSON.stringify(value))
+    })
+}
+const onClose = () => {
+    visible.value = false
+}
+defineExpose({
+    onOpen
+})
 </script>

src/components/XnWorkflow/nodes/exclusiveGateway.vue

@@ -1,189 +1,214 @@
 <template>
-	<div class="branch-wrap">
-		<div class="branch-box-wrap">
-			<div class="branch-box">
-				<a-button class="add-branch" type="primary" shape="round" @click="addTerm"> 添加条件 </a-button>
-				<div v-for="(item, index) in childNode.conditionNodeList" :key="index" class="col-box">
-					<div class="condition-node">
-						<div class="condition-node-box">
-							<div class="auto-judge" @click="show(index)">
-								<div v-if="index != 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
-									<left-outlined />
-								</div>
-								<div class="title">
-									<span class="node-title">{{ item.title }}</span>
-									<span class="priority-title">优先级{{ item.properties.configInfo.priorityLevel }}</span>
-									<close-outlined class="close" @click.stop="delTerm(index)" />
-								</div>
-								<div class="content">
-									<span v-if="toText(childNode, index)">{{ toText(childNode, index) }}</span>
-									<span v-else class="placeholder">请设置条件</span>
-								</div>
-								<div
-									v-if="index !== childNode.conditionNodeList.length - 1"
-									class="sort-right"
-									@click.stop="arrTransfer(index)"
-								>
-									<right-outlined />
-								</div>
-							</div>
-							<add-node v-model="item.childNode" :node-item="item" />
-						</div>
-					</div>
-					<slot v-if="item.childNode" :node="item" />
-					<div v-if="index === 0" class="top-left-cover-line" />
-					<div v-if="index === 0" class="bottom-left-cover-line" />
-					<div v-if="index === childNode.conditionNodeList.length - 1" class="top-right-cover-line" />
-					<div v-if="index === childNode.conditionNodeList.length - 1" class="bottom-right-cover-line" />
-				</div>
-			</div>
-			<add-node v-model="childNode.childNode" :parent-data="childNode" />
-		</div>
+    <div class="branch-wrap">
+        <div class="branch-box-wrap">
+            <div class="branch-box">
+                <el-button class="add-branch" type="primary" shape="round" @click="addTerm">添加条件</el-button>
+                <div v-for="(item, index) in childNode.conditionNodeList" :key="index" class="col-box">
+                    <div class="condition-node">
+                        <div class="condition-node-box">
+                            <div class="auto-judge" @click="show(index)">
+                                <div v-if="index != 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
+                                    <left-outlined />
+                                </div>
+                                <div class="title">
+                                    <span class="node-title">{{ item.title }}</span>
+                                    <span class="priority-title">
+                                        优先级{{ item.properties.configInfo.priorityLevel }}
+                                    </span>
+                                    <close-outlined class="close" @click.stop="delTerm(index)" />
+                                </div>
+                                <div class="content">
+                                    <span v-if="toText(childNode, index)">{{ toText(childNode, index) }}</span>
+                                    <span v-else class="placeholder">请设置条件</span>
+                                </div>
+                                <div
+                                    v-if="index !== childNode.conditionNodeList.length - 1"
+                                    class="sort-right"
+                                    @click.stop="arrTransfer(index)"
+                                >
+                                    <right-outlined />
+                                </div>
+                            </div>
+                            <add-node v-model="item.childNode" :node-item="item" />
+                        </div>
+                    </div>
+                    <slot v-if="item.childNode" :node="item" />
+                    <div v-if="index === 0" class="top-left-cover-line" />
+                    <div v-if="index === 0" class="bottom-left-cover-line" />
+                    <div v-if="index === childNode.conditionNodeList.length - 1" class="top-right-cover-line" />
+                    <div v-if="index === childNode.conditionNodeList.length - 1" class="bottom-right-cover-line" />
+                </div>
+            </div>
+            <add-node v-model="childNode.childNode" :parent-data="childNode" />
+        </div>
 
-		<xn-form-container
-			v-model:visible="drawer"
-			:destroy-on-close="true"
-			:width="700"
-			:body-style="{ 'padding-top': '0px' }"
-		>
-			<template #title>
-				<div class="node-wrap-drawer__title">
-					<label v-if="!isEditTitle" @click="editTitle">
-						{{ form.title }}
-						<edit-outlined class="node-wrap-drawer-title-edit" />
-					</label>
-					<a-input
-						v-if="isEditTitle"
-						ref="nodeTitle"
-						v-model:value="form.title"
-						allow-clear
-						@blur="saveTitle"
-						@keyup.enter="saveTitle"
-					/>
-				</div>
-			</template>
-			<a-layout-content>
-				<a-tabs v-model:activeKey="activeKey">
-					<a-tab-pane key="1" tab="条件配置" force-render>
-						<a-form layout="vertical">
-							<div v-show="!isNodeLegal(form)" style="margin-bottom: 10px">
-								<a-alert message="请填写完成所有项！" type="error" />
-							</div>
-							<div class="mb-2">
-								<span class="left-span-label">配置要执行的条件</span>
-							</div>
-							<p style="margin-bottom: 2px">
-								<a-button type="primary" round @click="addDynamicValidateForm" size="small">
-									<plus-outlined />
-									增加条件组
-								</a-button>
-							</p>
-							<a-form-item v-for="(domain, index) in dynamicValidateForm" :key="index">
-								<a-divider style="margin: 10px 0" />
-								<a-row>
-									<a-col :span="22">
-										<a-table :data-source="domain" size="small" :pagination="false">
-											<a-table-column data-index="field" title="条件字段" width="130">
-												<template #default="{ record }">
-													<a-select
-														v-model:value="record.field"
-														placeholder="请选择"
-														v-if="recordData.formType === 'DESIGN'"
-													>
-														<a-select-option
-															v-for="formField in fieldList"
-															:key="formField.model"
-															:value="formField.model"
-															@click="record.label = formField.label"
-															>{{ formField.label }}</a-select-option
-														>
-													</a-select>
-													<a-input v-model:value="record.field" placeholder="条件" v-else />
-												</template>
-											</a-table-column>
-											<a-table-column data-index="label" title="描述">
-												<template #default="{ record }">
-													<a-input v-model:value="record.label" placeholder="描述" />
-												</template>
-											</a-table-column>
-											<a-table-column data-index="operator" width="140">
-												<template #title>
-													<a-tooltip>
-														<template #title
-															>注：自定义表单模式下条件选择完全放开，中文字段不可以使用大于、大于等于、小于、小于等于！</template
-														>
-														<question-circle-outlined />
-														运算符
-													</a-tooltip>
-												</template>
-												<template #default="{ record }">
-													<a-select v-model:value="record.operator" placeholder="请选择">
-														<a-select-option value="==">等于</a-select-option>
-														<a-select-option value="!=">不等于</a-select-option>
-														<a-select-option value=">" v-if="isSelectOption(record)">大于</a-select-option>
-														<a-select-option value=">=" v-if="isSelectOption(record)">大于等于</a-select-option>
-														<a-select-option value="<" v-if="isSelectOption(record)">小于</a-select-option>
-														<a-select-option value="<=" v-if="isSelectOption(record)">小于等于</a-select-option>
-														<a-select-option value="include" v-if="!isSelectOption(record, 'include')"
-															>包含</a-select-option
-														>
-														<a-select-option value="notInclude" v-if="!isSelectOption(record, 'notInclude')"
-															>不包含</a-select-option
-														>
-													</a-select>
-												</template>
-											</a-table-column>
-											<a-table-column data-index="value" width="100">
-												<template #title>
-													<a-tooltip>
-														<template #title>中文字段需判断等于，值必须加入英文双引号</template>
-														<question-circle-outlined />
-														值
-													</a-tooltip>
-												</template>
-												<template #default="{ record }">
-													<a-input v-model:value="record.value" placeholder="值" />
-												</template>
-											</a-table-column>
-											<a-table-column data-index="value" title="移除" width="55">
-												<template #default="{ index }">
-													<a-button size="small" type="primary" danger ghost @click="deleteConditionList(index, domain)"
-														>移除</a-button
-													>
-												</template>
-											</a-table-column>
-										</a-table>
-										<a-button type="dashed" class="dashedButton" @click="addConditionList(index)">
-											<PlusOutlined />
-											增加条件
-										</a-button>
-									</a-col>
-									<a-col :span="2" class="deleteIcon">
-										<minus-circle-two-tone class="minusCircle" @click="delDomains(index)" />
-									</a-col>
-								</a-row>
-							</a-form-item>
-						</a-form>
-					</a-tab-pane>
-					<a-tab-pane key="2" tab="执行监听" force-render>
-						<prop-listener-info
-							ref="propExecutionListenerInfoRef"
-							:listenerValue="form.properties.executionListenerInfo"
-							:defaultListenerList="executionListenerInfo"
-							:listener-value-array="executionListenerArray"
-						/>
-					</a-tab-pane>
-				</a-tabs>
-			</a-layout-content>
-			<template #footer>
-				<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
-				<a-button @click="drawer = false">取消</a-button>
-			</template>
-		</xn-form-container>
-	</div>
+        <xn-form-container
+            v-model:visible="drawer"
+            :destroy-on-close="true"
+            :width="700"
+            :body-style="{ 'padding-top': '0px' }"
+        >
+            <template #title>
+                <div class="node-wrap-drawer__title">
+                    <label v-if="!isEditTitle" @click="editTitle">
+                        {{ form.title }}
+                        <edit-outlined class="node-wrap-drawer-title-edit" />
+                    </label>
+                    <el-input
+                        v-if="isEditTitle"
+                        ref="nodeTitle"
+                        v-model="form.title"
+                        allow-clear
+                        @blur="saveTitle"
+                        @keyup.enter="saveTitle"
+                    />
+                </div>
+            </template>
+            <el-layout-content>
+                <el-tabs v-model="activeKey">
+                    <el-tab-pane name="1" label="条件配置" lazy>
+                        <el-form layout="vertical">
+                            <div v-show="!isNodeLegal(form)" style="margin-bottom: 10px">
+                                <el-alert message="请填写完成所有项！" type="error" />
+                            </div>
+                            <div class="mb-2">
+                                <span class="left-span-label">配置要执行的条件</span>
+                            </div>
+                            <p style="margin-bottom: 2px">
+                                <el-button type="primary" round @click="addDynamicValidateForm" size="small">
+                                    <plus-outlined />
+                                    增加条件组
+                                </el-button>
+                            </p>
+                            <el-form-item v-for="(domain, index) in dynamicValidateForm" :key="index">
+                                <el-divider style="margin: 10px 0" />
+                                <el-row>
+                                    <el-col :span="22">
+                                        <el-table :datel-source="domain" size="small" :pagination="false">
+                                            <el-table-column datel-index="field" title="条件字段" width="130">
+                                                <template #default="{ record }">
+                                                    <el-select
+                                                        v-model:value="record.field"
+                                                        placeholder="请选择"
+                                                        v-if="recordData.formType === 'DESIGN'"
+                                                    >
+                                                        <el-select-option
+                                                            v-for="formField in fieldList"
+                                                            :key="formField.model"
+                                                            :value="formField.model"
+                                                            @click="record.label = formField.label"
+                                                        >
+                                                            {{ formField.label }}
+                                                        </el-select-option>
+                                                    </el-select>
+                                                    <el-input v-model:value="record.field" placeholder="条件" v-else />
+                                                </template>
+                                            </el-table-column>
+                                            <el-table-column datel-index="label" title="描述">
+                                                <template #default="{ record }">
+                                                    <el-input v-model:value="record.label" placeholder="描述" />
+                                                </template>
+                                            </el-table-column>
+                                            <el-table-column datel-index="operator" width="140">
+                                                <template #title>
+                                                    <el-tooltip>
+                                                        <template #title>
+                                                            注：自定义表单模式下条件选择完全放开，中文字段不可以使用大于、大于等于、小于、小于等于！
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                        运算符
+                                                    </el-tooltip>
+                                                </template>
+                                                <template #default="{ record }">
+                                                    <el-select v-model:value="record.operator" placeholder="请选择">
+                                                        <el-select-option value="==">等于</el-select-option>
+                                                        <el-select-option value="!=">不等于</el-select-option>
+                                                        <el-select-option value=">" v-if="isSelectOption(record)">
+                                                            大于
+                                                        </el-select-option>
+                                                        <el-select-option value=">=" v-if="isSelectOption(record)">
+                                                            大于等于
+                                                        </el-select-option>
+                                                        <el-select-option value="<" v-if="isSelectOption(record)">
+                                                            小于
+                                                        </el-select-option>
+                                                        <el-select-option value="<=" v-if="isSelectOption(record)">
+                                                            小于等于
+                                                        </el-select-option>
+                                                        <el-select-option
+                                                            value="include"
+                                                            v-if="!isSelectOption(record, 'include')"
+                                                        >
+                                                            包含
+                                                        </el-select-option>
+                                                        <el-select-option
+                                                            value="notInclude"
+                                                            v-if="!isSelectOption(record, 'notInclude')"
+                                                        >
+                                                            不包含
+                                                        </el-select-option>
+                                                    </el-select>
+                                                </template>
+                                            </el-table-column>
+                                            <el-table-column datel-index="value" width="100">
+                                                <template #title>
+                                                    <el-tooltip>
+                                                        <template #title>
+                                                            中文字段需判断等于，值必须加入英文双引号
+                                                        </template>
+                                                        <question-circle-outlined />
+                                                        值
+                                                    </el-tooltip>
+                                                </template>
+                                                <template #default="{ record }">
+                                                    <el-input v-model:value="record.value" placeholder="值" />
+                                                </template>
+                                            </el-table-column>
+                                            <el-table-column datel-index="value" title="移除" width="55">
+                                                <template #default="{ index }">
+                                                    <el-button
+                                                        size="small"
+                                                        type="primary"
+                                                        danger
+                                                        ghost
+                                                        @click="deleteConditionList(index, domain)"
+                                                    >
+                                                        移除
+                                                    </el-button>
+                                                </template>
+                                            </el-table-column>
+                                        </el-table>
+                                        <el-button type="dashed" class="dashedButton" @click="addConditionList(index)">
+                                            <PlusOutlined />
+                                            增加条件
+                                        </el-button>
+                                    </el-col>
+                                    <el-col :span="2" class="deleteIcon">
+                                        <minus-circle-two-tone class="minusCircle" @click="delDomains(index)" />
+                                    </el-col>
+                                </el-row>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <el-tab-pane name="2" label="执行监听" lazy>
+                        <prop-listener-info
+                            ref="propExecutionListenerInfoRef"
+                            :listenerValue="form.properties.executionListenerInfo"
+                            :defaultListenerList="executionListenerInfo"
+                            :listener-value-array="executionListenerArray"
+                        />
+                    </el-tab-pane>
+                </el-tabs>
+            </el-layout-content>
+            <template #footer>
+                <el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
+                <el-button @click="drawer = false">取消</el-button>
+            </template>
+        </xn-form-container>
+    </div>
 </template>
 
-<script>
+<!-- <script>
 	import { cloneDeep, isEmpty } from 'lodash-es'
 	import addNode from './addNode.vue'
 	import config from '@/components/XnWorkflow/nodes/config/config'
@@ -281,9 +306,9 @@
 			},
 			// 校验此条件是否通过
 			isNodeLegal(data) {
-				const priorityLevel = data.properties.configInfo.priorityLevel
-				const len = this.childNode.conditionNodeList.length
-				const priorityLevelMax = this.childNode.conditionNodeList[len - 1].properties.configInfo.priorityLevel
+				const priorityLevel = data&&data.propertie&&data.properties.configInfo&&data.properties.configInfo.priorityLevel?data.properties.configInfo.priorityLevel:{};
+				const len = this.childNode&&this.childNode.conditionNodeList&&this.childNode.conditionNodeList.length?this.childNode.conditionNodeList.length:0;
+				const priorityLevelMax = len!=0?this.childNode.conditionNodeList[len - 1].properties.configInfo.priorityLevel:0;
 				// 如果往其他条件的分支中增加，那我们一视同仁
 				if (priorityLevelMax === priorityLevel) {
 					if (this.dynamicValidateForm.length > 0) {
@@ -469,19 +494,299 @@
 			}
 		}
 	}
+</script> -->
+<script setup>
+import { cloneDeep, isEmpty } from 'lodash-es'
+import config from '@/components/XnWorkflow/nodes/config/config'
+import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
+import tool from '@/utils/tool'
+import AddNode from './addNode.vue'
+import { ref, watch, onMounted } from 'vue'
+import PropListenerInfo from './prop/propListenerInfo.vue'
+const props = defineProps({
+    modelValue: { type: Object, default: () => {} },
+    formFieldListValue: { type: Array, default: () => [] },
+    recordData: { type: Object, default: () => {} },
+    executionListenerArray: { type: Array, default: () => [] },
+    taskListenerArray: { type: Array, default: () => [] }
+})
+const emit = defineEmits(['update:modelValue'])
+const nodeTitleRef = ref()
+const propExecutionListenerInfoRef = ref()
+const childNode = ref({})
+const drawer = ref(false)
+const isEditTitle = ref(false)
+const index = ref(0)
+const form = ref({})
+const dynamicValidateForm = ref([])
+const fieldList = ref([])
+const activeKey = ref('1')
+const executionListenerInfo = cloneDeep(config.listener.exclusiveGatewayExecutionListenerInfo)
+const operatorList = cloneDeep(config.exclusiveGatewayConfig.operatorList)
+watch(props, newValue => {
+    if (newValue.modelValue) {
+        childNode.value = newValue.modelValue
+    }
+})
+onMounted(() => {
+    childNode.value = props.modelValue
+    // 把字段给掏出来
+    fieldList.value = workFlowUtils.getListField(props.formFieldListValue).map(m => {
+        let type = m.type //slider rate number
+        if (type === 'slider' || type === 'rate' || type === 'number') {
+            m.type = 'number'
+        }
+        return {
+            label: m.label,
+            model: m.selectTable + '.' + m.model,
+            type: m.type
+        }
+    })
+})
+const show = value => {
+    index.value = value
+    form.value = {}
+    form.value = cloneDeep(childNode.value.conditionNodeList[value])
+    drawer.value = true
+    dynamicValidateForm.value = form.value.properties.conditionInfo
+}
+const editTitle = () => {
+    isEditTitle.value = true
+    nextTick(() => {
+        nodeTitleRef.value.focus()
+    })
+}
+const saveTitle = () => {
+    isEditTitle.value = false
+}
+const save = () => {
+    form.value.properties.conditionInfo = dynamicValidateForm.value
+    form.value.properties.executionListenerInfo = propExecutionListenerInfoRef.value.selectedListenerList()
+    if (isNodeLegal(form.value)) {
+        form.value.dataLegal = true
+        childNode.value.conditionNodeList[index.value] = form.value
+        setCalibration()
+        emit('update:modelValue', childNode)
+        drawer.value = false
+    } else {
+        form.value.dataLegal = false
+    }
+}
+const isSelectOption = (record, value) => {
+    if (props.recordData.formType === 'DESIGN') {
+        if (record.field) {
+            return fieldList.value.find(f => f.model === record.field).type === 'number'
+        }
+    } else {
+        if (value === 'include' || value === 'notInclude') {
+            return false
+        } else {
+            return true
+        }
+    }
+}
+// 校验此条件是否通过
+const isNodeLegal = data => {
+    const priorityLevel =
+        data && data.properties && data.properties.configInfo && data.properties.configInfo.priorityLevel
+            ? data.properties.configInfo.priorityLevel
+            : ''
+    const len =
+        childNode.value && childNode.value.conditionNodeList && childNode.value.conditionNodeList.length
+            ? childNode.value.conditionNodeList.length
+            : 0
+    const priorityLevelMax =
+        len != 0 ? childNode.value.conditionNodeList[len - 1].properties.configInfo.priorityLevel : 0
+    // 如果往其他条件的分支中增加，那我们一视同仁
+    if (priorityLevelMax === priorityLevel) {
+        if (dynamicValidateForm.value.length > 0) {
+            for (let i = 0; i < dynamicValidateForm.value.length; i++) {
+                const obj = dynamicValidateForm.value[i]
+                if (obj.length > 0) {
+                    return isNodeLegalItem()
+                }
+            }
+        } else {
+            return true
+        }
+    } else {
+        return isNodeLegalItem()
+    }
+}
+// 设置校验
+const setCalibration = () => {
+    // 在数据返回更新之前，我要顺手吧优先级最后的条件校验设置为 true，管他设没设
+    for (let i = 0; i < childNode.value.conditionNodeList.length; i++) {
+        let conditionNode = childNode.value.conditionNodeList[i]
+        // 取到优先级
+        const priorityLevel = conditionNode.properties.configInfo.priorityLevel
+        // 如果是最高的
+        if (priorityLevel === childNode.value.conditionNodeList.length) {
+            // 给成通过，不管他的条件，本身优先级最后的就是其他条件进入，一般也不设
+            conditionNode.dataLegal = true
+        } else {
+            // 其他地方的，判断是否有条件，无条件的统统给 false
+            if (conditionNode.properties.conditionInfo.length === 0) {
+                conditionNode.dataLegal = false
+            }
+        }
+    }
+}
+const isNodeLegalItem = () => {
+    let objNum = 0
+    let successNum = 0
+    if (dynamicValidateForm.value.length > 0) {
+        for (let i = 0; i < dynamicValidateForm.value.length; i++) {
+            const obj = dynamicValidateForm.value[i]
+            let objNumItem = 0
+            if (!isEmpty(obj)) {
+                for (let a = 0; a < obj.length; a++) {
+                    objNumItem++
+                    if (isObjLegal(obj[a])) {
+                        successNum++
+                    }
+                }
+                objNum = objNum + objNumItem
+            } else {
+                objNum++
+            }
+        }
+    }
+    if (successNum !== 0) {
+        if (objNum === successNum) {
+            return true
+        }
+    }
+    return false
+}
+// 校验对象中是否有空值
+const isObjLegal = obj => {
+    let a = 0
+    for (let b in obj) {
+        if (!obj[b]) {
+            a++
+        }
+    }
+    return a === 1
+}
+// 增加条件组
+const addDynamicValidateForm = () => {
+    dynamicValidateForm.value.push([])
+}
+// 删除条件组
+const delDomains = index => {
+    dynamicValidateForm.value.splice(index, 1)
+}
+const addTerm = () => {
+    const len = childNode.value.conditionNodeList.length
+    const priorityLevel = childNode.value.conditionNodeList[len - 1].properties.configInfo.priorityLevel
+    // 创建分支节点 n
+    const condition = cloneDeep(config.nodeModel.node)
+    condition.id = tool.snowyUuid()
+    condition.type = 'sequenceFlow'
+    condition.title = `条件${priorityLevel + 1}`
+    // 创建分支节点2 configInfo
+    const condition1ConfigInfo = cloneDeep(config.nodeConfigInfo.conditionConfigInfo)
+    condition1ConfigInfo.priorityLevel = priorityLevel + 1
+    condition.properties.configInfo = condition1ConfigInfo
+    childNode.value.conditionNodeList.push(condition)
+}
+const delTerm = index => {
+    childNode.value.conditionNodeList.splice(index, 1)
+    if (childNode.value.conditionNodeList.length === 1) {
+        if (childNode.value.childNode) {
+            // 如果有子项
+            if (!isEmpty(childNode.value.conditionNodeList[0].childNode)) {
+                reData(childNode.value.conditionNodeList[0].childNode, childNode.value.childNode)
+            } else {
+                childNode.value.conditionNodeList[0].childNode = childNode.value.childNode
+            }
+        }
+        emit('update:modelValue', childNode.value.conditionNodeList[0].childNode)
+    }
+}
+const reData = (data, addData) => {
+    if (!isEmpty(data)) {
+        data.childNode = addData
+    } else {
+        reData(data.childNode, addData)
+    }
+}
+const arrTransfer = (index, type = 1) => {
+    childNode.value.conditionNodeList[index] = childNode.value.conditionNodeList.splice(
+        index + type,
+        1,
+        childNode.value.conditionNodeList[index]
+    )[0]
+    childNode.value.conditionNodeList.map((item, index) => {
+        item.properties.configInfo.priorityLevel = index + 1
+    })
+    setCalibration()
+    emit('update:modelValue', childNode.value)
+}
+const addConditionList = index => {
+    const domainsObj = {
+        label: '',
+        key: '',
+        operator: '==',
+        value: ''
+    }
+    dynamicValidateForm.value[index].push(domainsObj)
+}
+const deleteConditionList = (index, domain) => {
+    domain.splice(index, 1)
+}
+const toText = (childNode, index) => {
+    const conditionList = childNode.conditionNodeList[index].properties.conditionInfo
+    const priorityLevel = childNode.conditionNodeList[index].properties.configInfo.priorityLevel
+    const len = childNode.conditionNodeList.length
+    const priorityLevelMax = childNode.conditionNodeList[len - 1].properties.configInfo.priorityLevel
+    if (JSON.stringify(conditionList) !== undefined && conditionList.length > 0) {
+        let text = ''
+        for (let i = 0; i < conditionList.length; i++) {
+            for (let j = 0; j < conditionList[i].length; j++) {
+                if (j + 1 !== conditionList[i].length) {
+                    text =
+                        text +
+                        conditionList[i][j].label +
+                        getOperatorLabel(conditionList[i][j].operator) +
+                        conditionList[i][j].value +
+                        ' 且 '
+                } else {
+                    text =
+                        text +
+                        conditionList[i][j].label +
+                        getOperatorLabel(conditionList[i][j].operator) +
+                        conditionList[i][j].value
+                }
+            }
+            if (i + 1 !== conditionList.length) {
+                text = text + ' 或 '
+            }
+        }
+        return text
+    } else if (conditionList.length === 0 && priorityLevel < priorityLevelMax) {
+        return false
+    } else {
+        return '其他条件进入此流程'
+    }
+}
+// 通过value 获取界面显示的label汉字
+const getOperatorLabel = value => {
+    return operatorList.find(item => item.value === value).label
+}
 </script>
-
 <style scoped lang="less">
-	.deleteIcon {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	.minusCircle {
-		font-size: 25px;
-	}
-	.dashedButton {
-		margin-top: 10px;
-		width: 100%;
-	}
+.deleteIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.minusCircle {
+    font-size: 25px;
+}
+.dashedButton {
+    margin-top: 10px;
+    width: 100%;
+}
 </style>

src/components/XnWorkflow/nodes/parallelGateway.vue

@@ -30,7 +30,7 @@
 	</div>
 </template>
 
-<script>
+<!-- <script>
 	import { cloneDeep } from 'lodash-es'
 	import addNode from './addNode.vue'
 	import userTask from './userTask.vue'
@@ -107,4 +107,69 @@
 			}
 		}
 	}
+</script> -->
+<script setup>
+	import { cloneDeep } from 'lodash-es'
+	import config from '@/components/XnWorkflow/nodes/config/config'
+	import tool from '@/utils/tool'
+	import AddNode from './addNode.vue'
+	import UserTask from './userTask.vue'
+	import {ref,watch,onMounted} from 'vue';
+	const props = defineProps({
+		modelValue: { type: Object, default: () => {} },
+		formFieldListValue: { type: Array, default: () => [] },
+		recordData: { type: Object, default: () => {} },
+		processConfigInfo: { type: Object, default: () => {} },
+		executionListenerArray: { type: Array, default: () => [] },
+		taskListenerArray: { type: Array, default: () => [] },
+		selectorApiFunction: { type: Object, default: () => {} }
+	})
+	const emit = defineEmits(['update:modelValue'])
+	const childNode = ref({})
+	const drawer = ref(false)
+	const index = ref(0)
+	const form = ref({})
+	watch(props, (newValue) => {
+		if (props.modelValue) {
+			childNode.value = newValue.modelValue
+		}
+	})
+	onMounted(() => {
+		childNode.value = props.modelValue
+	})
+	const addTerm = () => {
+		const len = childNode.value.conditionNodeList.length + 1
+		// 创建主节点
+		const nodeModel = cloneDeep(config.nodeModel.node)
+		nodeModel.id = tool.snowyUuid()
+		nodeModel.type = 'userTask'
+		;(nodeModel.title = `审批人${len}`),
+			(nodeModel.priorityLevel = len),
+			(nodeModel.conditionNodeList = []),
+			(nodeModel.childNode = {})
+		// 创建 configInfo
+		nodeModel.properties.configInfo = cloneDeep(config.nodeConfigInfo.userTaskConfigInfo)
+		childNode.value.conditionNodeList.push(nodeModel)
+	}
+	const delTerm = (index) => {
+		childNode.value.conditionNodeList.splice(index, 1)
+		if (childNode.value.conditionNodeList.length === 1) {
+			if (childNode.value.childNode) {
+				// 这是{}
+				if (JSON.stringify(childNode.value.conditionNodeList[0].childNode) !== '{}') {
+					reData(childNode.value.conditionNodeList[0].childNode, childNode.value.childNode)
+				} else {
+					childNode.value.conditionNodeList[0].childNode = childNode.value.childNode
+				}
+			}
+			emit('update:modelValue', childNode.value.conditionNodeList[0].childNode)
+		}
+	}
+	const reData = (data, addData) => {
+		if (JSON.stringify(data) !== '{}') {
+			data.childNode = addData
+		} else {
+			reData(data.childNode, addData)
+		}
+	}
 </script>

src/components/XnWorkflow/nodes/prop/formUserSelector.vue

@@ -1,6 +1,6 @@
 <template>
-	<a-modal
-		v-model:visible="visible"
+	<el-dialog
+		v-model="visible"
 		title="表单人员选择"
 		:mask-closable="false"
 		:destroy-on-close="true"
@@ -9,10 +9,10 @@
 		@cancel="handleCancel"
 	>
 		<div class="form-user-table">
-			<a-table
+			<el-table
 				ref="table"
 				:columns="columns"
-				:data-source="dataSource"
+				:datel-source="dataSource"
 				:row-key="(record) => record.model"
 				:expand-row-by-click="true"
 				:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
@@ -21,12 +21,13 @@
 				bordered
 			/>
 		</div>
-	</a-modal>
+	</el-dialog>
 </template>
 
 <script setup name="formUserSelector">
 	import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
 	import { ElMessage } from 'element-plus'
+	import {ref,reactive} from 'vue'
 	const visible = ref(false)
 
 	const columns = [

src/components/XnWorkflow/nodes/prop/propButtonInfo.vue

@@ -1,157 +1,171 @@
 <template>
-	<div class="mb-2">
-		<span class="left-span-label">参与者可以看见或操作哪些按钮</span>
-	</div>
-	<a-table
-		ref="table"
-		:columns="columns"
-		:data-source="dataSource"
-		:row-key="(record) => record.key"
-		:expand-row-by-click="true"
-		:row-selection="{
-			selectedRowKeys: state.selectedRowKeys,
-			onChange: onSelectChange,
-			getCheckboxProps: checkboxProps
-		}"
-		:pagination="false"
-		:show-header="false"
-		size="small"
-	>
-		<template #bodyCell="{ column, record }">
-			<template v-if="column.dataIndex === 'label'">
-				<a-popover trigger="hover" placement="left">
-					<template #content>
-						<a-button :type="record.type" size="small">
-							<template #icon>
-								<component :is="record.icon" />
-							</template>
-							{{ record.label }}
-						</a-button>
-						<div v-if="record.key === 'SAVE'" style="width: 300px">
-							”保存“按钮作用为发起节点保存操作，审批节点下无保存操作。
-						</div>
-						<div v-if="record.key === 'SUBMIT'" style="width: 300px">
-							”提交“按钮作用为发起节点填写完申请单，提交流程到下一步。
-						</div>
-						<div v-if="record.key === 'REVOKE'" style="width: 300px">”撤回“按钮作用为发起节点发错内容，将其撤回。</div>
-						<div v-if="record.key === 'PASS'" style="width: 300px">按钮作用为审批节点同意该审核之操作。</div>
-						<div v-if="record.key === 'REJECT'" style="width: 300px">按钮作用为审批节点进行拒绝之操作。</div>
-						<div v-if="record.key === 'BACK'" style="width: 300px">按钮作用为审批节点退回操作，可退回至任意节点。</div>
-						<div v-if="record.key === 'ADD_SIGN'" style="width: 300px">按钮作用为审批节点加签操作。</div>
-						<div v-if="record.key === 'TURN'" style="width: 300px">按钮作用为审批节点转给他人办理操作。</div>
-						<div v-if="record.key === 'JUMP'" style="width: 300px">按钮作用为审批节点可跳转至任意节点操作。</div>
-						<div v-if="record.key === 'PRINT'" style="width: 300px">
-							按钮配置后，操作人到该节点可以进行管理员配置的全局打印模板，进行打印此流程进展的内容。
-						</div>
-					</template>
-					<a-button size="small" :type="record.type">
-						<template #icon>
-							<component :is="record.icon" />
-						</template>
-						{{ record.label }}
-					</a-button>
-				</a-popover>
-			</template>
-			<template v-if="column.dataIndex === 'newLabel'">
-				<a-input v-model:value="record.newLabel" show-count :maxlength="10" />
-			</template>
-		</template>
-	</a-table>
+    <div class="mb-2">
+        <span class="left-span-label">参与者可以看见或操作哪些按钮</span>
+    </div>
+    <el-table
+        ref="table"
+        :columns="columns"
+        :datel-source="dataSource"
+        :row-key="record => record.key"
+        :expand-row-by-click="true"
+        :row-selection="{
+            selectedRowKeys: state.selectedRowKeys,
+            onChange: onSelectChange,
+            getCheckboxProps: checkboxProps
+        }"
+        :pagination="false"
+        :show-header="false"
+        size="small"
+    >
+        <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'label'">
+                <el-popover trigger="hover" placement="left">
+                    <template #content>
+                        <el-button :type="record.type" size="small">
+                            <template #icon>
+                                <component :is="record.icon" />
+                            </template>
+                            {{ record.label }}
+                        </el-button>
+                        <div v-if="record.key === 'SAVE'" style="width: 300px">
+                            ”保存“按钮作用为发起节点保存操作，审批节点下无保存操作。
+                        </div>
+                        <div v-if="record.key === 'SUBMIT'" style="width: 300px">
+                            ”提交“按钮作用为发起节点填写完申请单，提交流程到下一步。
+                        </div>
+                        <div v-if="record.key === 'REVOKE'" style="width: 300px">
+                            ”撤回“按钮作用为发起节点发错内容，将其撤回。
+                        </div>
+                        <div v-if="record.key === 'PASS'" style="width: 300px">
+                            按钮作用为审批节点同意该审核之操作。
+                        </div>
+                        <div v-if="record.key === 'REJECT'" style="width: 300px">
+                            按钮作用为审批节点进行拒绝之操作。
+                        </div>
+                        <div v-if="record.key === 'BACK'" style="width: 300px">
+                            按钮作用为审批节点退回操作，可退回至任意节点。
+                        </div>
+                        <div v-if="record.key === 'ADD_SIGN'" style="width: 300px">按钮作用为审批节点加签操作。</div>
+                        <div v-if="record.key === 'TURN'" style="width: 300px">
+                            按钮作用为审批节点转给他人办理操作。
+                        </div>
+                        <div v-if="record.key === 'JUMP'" style="width: 300px">
+                            按钮作用为审批节点可跳转至任意节点操作。
+                        </div>
+                        <div v-if="record.key === 'PRINT'" style="width: 300px">
+                            按钮配置后，操作人到该节点可以进行管理员配置的全局打印模板，进行打印此流程进展的内容。
+                        </div>
+                    </template>
+                    <el-button size="small" :type="record.type">
+                        <template #icon>
+                            <component :is="record.icon" />
+                        </template>
+                        {{ record.label }}
+                    </el-button>
+                </el-popover>
+            </template>
+            <template v-if="column.dataIndex === 'newLabel'">
+                <el-input v-model:value="record.newLabel" show-count :maxlength="10" />
+            </template>
+        </template>
+    </el-table>
 </template>
 
 <script setup name="propButtonInfo">
-	import config from '@/components/XnWorkflow/nodes/config/config'
-	import { cloneDeep } from 'lodash-es'
+import config from '@/components/XnWorkflow/nodes/config/config'
+import { cloneDeep } from 'lodash-es'
+import { ref, reactive } from 'vue'
 
-	const columns = [
-		{
-			title: '',
-			dataIndex: 'label',
-			align: 'center'
-		},
-		{
-			title: '',
-			dataIndex: 'newLabel'
-		}
-	]
-	const buttonInfo = cloneDeep(config.nodeModel.buttonInfo)
+const columns = [
+    {
+        title: '',
+        dataIndex: 'label',
+        align: 'center'
+    },
+    {
+        title: '',
+        dataIndex: 'newLabel'
+    }
+]
+const buttonInfo = cloneDeep(config.nodeModel.buttonInfo)
 
-	const props = defineProps(['buttonInfo', 'showButton', 'noChecked'])
+const props = defineProps(['buttonInfo', 'showButton', 'noChecked'])
 
-	const dataSource = ref([])
-	const selectedRowKeys = ref([])
-	// 将其回传的跟本组件的关联性切断
-	selectedRowKeys.value = cloneDeep(props.showButton)
+const dataSource = ref([])
+const selectedRowKeys = ref([])
+// 将其回传的跟本组件的关联性切断
+selectedRowKeys.value = cloneDeep(props.showButton)
 
-	// 设置按钮选中及显示的
-	const buttonInfoData = () => {
-		buttonInfo.forEach((button) => {
-			if (props.buttonInfo.length > 0) {
-				props.buttonInfo.forEach((item) => {
-					if (button.key === item.key) {
-						button.newLabel = item.label
-						button.value = item.value
-					}
-				})
-			} else {
-				button.newLabel = button.label
-			}
-			// 匹配选中的
-			if (selectedRowKeys.value.length > 0) {
-				selectedRowKeys.value.forEach((selectedRowKey) => {
-					if (button.value === 'SHOW') {
-						// 已有的里面如果不包含这个已经被选中的
-						if (selectedRowKeys.value.indexOf(button.key) === -1) {
-							selectedRowKeys.value.push(button.key)
-						}
-					}
-					if (selectedRowKey === button.key) {
-						button.value = 'SHOW'
-					}
-				})
-			} else if (button.value === 'SHOW') {
-				if (selectedRowKeys.value.indexOf(button.key) === -1) {
-					selectedRowKeys.value.push(button.key)
-				}
-			}
-		})
-		return buttonInfo
-	}
+// 设置按钮选中及显示的
+const buttonInfoData = () => {
+    buttonInfo.forEach(button => {
+        if (props.buttonInfo.length > 0) {
+            props.buttonInfo.forEach(item => {
+                if (button.key === item.key) {
+                    button.newLabel = item.label
+                    button.value = item.value
+                }
+            })
+        } else {
+            button.newLabel = button.label
+        }
+        // 匹配选中的
+        if (selectedRowKeys.value.length > 0) {
+            selectedRowKeys.value.forEach(selectedRowKey => {
+                if (button.value === 'SHOW') {
+                    // 已有的里面如果不包含这个已经被选中的
+                    if (selectedRowKeys.value.indexOf(button.key) === -1) {
+                        selectedRowKeys.value.push(button.key)
+                    }
+                }
+                if (selectedRowKey === button.key) {
+                    button.value = 'SHOW'
+                }
+            })
+        } else if (button.value === 'SHOW') {
+            if (selectedRowKeys.value.indexOf(button.key) === -1) {
+                selectedRowKeys.value.push(button.key)
+            }
+        }
+    })
+    return buttonInfo
+}
 
-	dataSource.value = buttonInfoData()
+dataSource.value = buttonInfoData()
 
-	// 设置默认选中的
-	const state = reactive({
-		selectedRowKeys: selectedRowKeys.value,
-		loading: false
-	})
-	// 点击复选框回调
-	const onSelectChange = (selectedRowKeys) => {
-		state.selectedRowKeys = selectedRowKeys
-	}
-	// 设置选择框的默认属性配置，将其设置成不可取消，不可选中
-	const checkboxProps = (record) => ({
-		disabled:
-			(record.value === 'SHOW' && props.showButton.indexOf(record.key) > -1) || props.noChecked.indexOf(record.key) > -1
-	})
-	// 父界面需要调用获取参数
-	const selectedButtonKeyList = () => {
-		let resultData = cloneDeep(dataSource.value)
-		resultData.forEach((dataItem) => {
-			if (state.selectedRowKeys.indexOf(dataItem.key) > -1) {
-				dataItem.value = 'SHOW'
-			} else {
-				dataItem.value = 'HIDE'
-			}
-			if (dataItem.newLabel !== '') {
-				dataItem.label = dataItem.newLabel
-			}
-			delete dataItem.newLabel
-		})
-		return resultData
-	}
-	// 抛出方法，让上个界面使用
-	defineExpose({
-		selectedButtonKeyList
-	})
+// 设置默认选中的
+const state = reactive({
+    selectedRowKeys: selectedRowKeys.value,
+    loading: false
+})
+// 点击复选框回调
+const onSelectChange = selectedRowKeys => {
+    state.selectedRowKeys = selectedRowKeys
+}
+// 设置选择框的默认属性配置，将其设置成不可取消，不可选中
+const checkboxProps = record => ({
+    disabled:
+        (record.value === 'SHOW' && props.showButton.indexOf(record.key) > -1) ||
+        props.noChecked.indexOf(record.key) > -1
+})
+// 父界面需要调用获取参数
+const selectedButtonKeyList = () => {
+    let resultData = cloneDeep(dataSource.value)
+    resultData.forEach(dataItem => {
+        if (state.selectedRowKeys.indexOf(dataItem.key) > -1) {
+            dataItem.value = 'SHOW'
+        } else {
+            dataItem.value = 'HIDE'
+        }
+        if (dataItem.newLabel !== '') {
+            dataItem.label = dataItem.newLabel
+        }
+        delete dataItem.newLabel
+    })
+    return resultData
+}
+// 抛出方法，让上个界面使用
+defineExpose({
+    selectedButtonKeyList
+})
 </script>

src/components/XnWorkflow/nodes/prop/propFieldInfo.vue

@@ -2,10 +2,10 @@
 	<div class="mb-2">
 		<span class="left-span-label">参与者可以看见或操作哪些字段</span>
 	</div>
-	<a-table
+	<el-table
 		ref="table"
 		:columns="columns"
-		:data-source="dataSource"
+		:datel-source="dataSource"
 		:row-key="(record) => record.key"
 		:expand-row-by-click="true"
 		:pagination="false"
@@ -19,16 +19,17 @@
 				{{ record.label }}
 			</template>
 			<template v-if="column.dataIndex === 'value'">
-				<a-radio-group v-model:value="record.value" :disabled="record.disabled">
-					<a-radio :key="radio.value" v-for="radio in fieldRadioList" :value="radio.value">{{ radio.label }}</a-radio>
-				</a-radio-group>
+				<el-radio-group v-model:value="record.value" :disabled="record.disabled">
+					<el-radio :key="radio.value" v-for="radio in fieldRadioList" :value="radio.value">{{ radio.label }}</el-radio>
+				</el-radio-group>
 			</template>
 		</template>
-	</a-table>
+	</el-table>
 </template>
 
 <script setup name="propFieldInfo">
 	import config from '@/components/XnWorkflow/nodes/config/config'
+	import {ref} from 'vue'
 	const columns = [
 		{
 			title: '表单字段',

src/components/XnWorkflow/nodes/prop/propListenerInfo.vue

@@ -2,16 +2,16 @@
 	<div class="mb-2">
 		<span class="left-span-label">配置要执行的监听</span>
 	</div>
-	<a-button type="primary" size="small" @click="addEditListener" class="mb-2">
+	<el-button type="primary" size="small" @click="addEditListener" class="mb-2">
 		<template #icon>
-			<plus-outlined />
+			<!-- <plus-outlined/> -->
 		</template>
 		新增
-	</a-button>
-	<a-table
+	</el-button>
+	<el-table
 		ref="table"
 		:columns="columns"
-		:data-source="dataSource"
+		:datel-source="dataSource"
 		:row-key="(record) => record.id"
 		bordered
 		:expand-row-by-click="true"
@@ -23,22 +23,22 @@
 				{{ listenerlabel(record.listenerType) }}
 			</template>
 			<template v-if="column.dataIndex === 'action'">
-				<a-popconfirm title="确定要删除此监听吗？" @confirm="deleteListener(record)" placement="topRight">
-					<a-button type="link" danger size="small">删除</a-button>
-				</a-popconfirm>
+				<el-popconfirm title="确定要删除此监听吗？" @confirm="deleteListener(record)" placement="topRight">
+					<el-button type="link" danger size="small">删除</el-button>
+				</el-popconfirm>
 			</template>
 		</template>
-	</a-table>
-	<a-modal v-model:visible="modalVisible" title="新增" @ok="handleOk" @cancel="handleCancel">
-		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
-			<a-form-item label="监听类型：" name="listenerType">
-				<a-select v-model:value="formData.listenerType" placeholder="请选择类型" :options="listenerTypeOptions" @change="listenerType" />
-			</a-form-item>
-			<a-form-item label="JAVA监听器：" name="javaClass">
-				<a-select v-model:value="formData.javaClass" placeholder="请选择JAVA监听器" :options="listenerValueArray" />
-			</a-form-item>
-		</a-form>
-	</a-modal>
+	</el-table>
+	<el-dialog v-model="modalVisible" title="新增" @ok="handleOk" @cancel="handleCancel">
+		<el-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+			<el-form-item label="监听类型：" name="listenerType">
+				<el-select v-model:value="formData.listenerType" placeholder="请选择类型" :options="listenerTypeOptions" @change="listenerType" />
+			</el-form-item>
+			<el-form-item label="JAVA监听器：" name="javaClass">
+				<el-select v-model:value="formData.javaClass" placeholder="请选择JAVA监听器" :options="listenerValueArray" />
+			</el-form-item>
+		</el-form>
+	</el-dialog>
 </template>
 
 <script setup name="PropListenerInfo">

src/components/XnWorkflow/nodes/prop/propTag.vue

@@ -1,5 +1,5 @@
 <template>
-	<a-tag v-for="tag in tagList()">{{ tag }}</a-tag
+	<el-tag v-for="tag in tagList()">{{ tag }}</el-tag
 	><!-- 花里胡哨的颜色先去掉，用的时候拿到旁边就行 :color="randomColor()"-->
 </template>
 

src/components/XnWorkflow/nodes/prop/templateGenerator.vue

@@ -1,7 +1,8 @@
 <template>
 	<div>
-		<a-textarea
+		<el-input
 			ref="smsInput"
+			type="textarea"
 			v-model:value="smsContent"
 			:auto-size="{ minRows: 3, maxRows: 6 }"
 			placeholder="请输入内容"
@@ -11,25 +12,25 @@
 			@click.native="focusHandler"
 			@keydown.up.down.left.right.native="focusHandler"
 			@select.native="selectHandler"
-		></a-textarea>
-		<a-dropdown>
+		></el-input>
+		<el-dropdown>
 			<template #overlay>
-				<a-menu>
-					<a-menu-item
+				<el-menu>
+					<el-menu-item
 						v-for="fields in fieldInfoLisNew"
 						:key="fields.value"
 						:value="fields.value"
 						:disabled="fields.value === 'disabled'"
 						@click="insertFields(fields)"
-						>{{ fields.label }}</a-menu-item
+						>{{ fields.label }}</el-menu-item
 					>
-				</a-menu>
+				</el-menu>
 			</template>
-			<a-button size="small" type="primary" style="float: right; margin-top: -35px; margin-right: 10px">
+			<el-button size="small" type="primary" style="float: right; margin-top: -35px; margin-right: 10px">
 				置入字段
-				<DownOutlined />
-			</a-button>
-		</a-dropdown>
+				<!-- <DownOutlined /> -->
+			</el-button>
+		</el-dropdown>
 	</div>
 </template>
 

src/components/XnWorkflow/nodes/serviceTask.vue

@@ -23,7 +23,7 @@
 					<label v-if="!isEditTitle" @click="editTitle"
 						>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit" />
 					</label>
-					<a-input
+					<el-input
 						v-if="isEditTitle"
 						ref="nodeTitle"
 						v-model:value="form.title"
@@ -33,43 +33,43 @@
 					/>
 				</div>
 			</template>
-			<a-layout-content>
-				<a-tabs v-model:activeKey="activeKey">
-					<a-tab-pane key="1" tab="抄送配置" force-render>
-						<a-form layout="vertical" :model="userTypeForm">
+			<el-container>
+				<el-tabs v-model="activeKey">
+					<el-tab-pane name="1" label="抄送配置" lazy>
+						<el-form layout="vertical" :model="userTypeForm">
 							<div v-show="nodeLegal" style="margin-bottom: 10px">
-								<a-alert message="请选择抄送人员！" type="error" />
+								<el-alert message="请选择抄送人员！" type="error" />
 							</div>
 							<div class="mb-2">
 								<span class="left-span-label">选择要抄送的人员</span>
 							</div>
-							<a-radio-group v-model:value="userSelectionType" style="width: 100%">
-								<a-row style="padding-bottom: 10px">
-									<a-col :span="8" v-for="userSelectionType in userSelectionTypeList" :key="userSelectionType.value">
-										<a-radio :value="userSelectionType.value" @click="selectionClick(userSelectionType.value)">
+							<el-radio-group v-model:value="userSelectionType" style="width: 100%">
+								<el-row style="padding-bottom: 10px">
+									<el-col :span="8" v-for="userSelectionType in userSelectionTypeList" :key="userSelectionType.value">
+										<el-radio :value="userSelectionType.value" @click="selectionClick(userSelectionType.value)">
 											{{ userSelectionType.label }}
-										</a-radio>
-									</a-col>
-								</a-row>
-							</a-radio-group>
-							<a-form-item v-if="userSelectionType === 'USER'">
-								<a-button class="mt-2" type="primary" size="small" round @click="openSelector">
+										</el-radio>
+									</el-col>
+								</el-row>
+							</el-radio-group>
+							<el-form-item v-if="userSelectionType === 'USER'">
+								<el-button class="mt-2" type="primary" size="small" round @click="openSelector">
 									<template #icon>
 										<search-outlined />
 									</template>
 									选择
-								</a-button>
+								</el-button>
 								<p />
 								<prop-tag :tag-list="getTagList('USER')" />
-							</a-form-item>
-							<a-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
+							</el-form-item>
+							<el-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
 								<div class="mt-2">
-									<a-button type="primary" @click="openSelector" size="small">
+									<el-button type="primary" @click="openSelector" size="small">
 										<template #icon>
 											<search-outlined />
 										</template>
 										选择
-									</a-button>
+									</el-button>
 								</div>
 								<div class="mt-2">
 									<prop-tag
@@ -77,21 +77,21 @@
 										:tag-list="form.properties.participateInfo[0]"
 									/>
 								</div>
-							</a-form-item>
-							<a-form-item
+							</el-form-item>
+							<el-form-item
 								class="mt-2"
 								v-if="recordData.formType === 'DEFINE' && userSelectionType === 'FORM_USER'"
 								name="formUser"
 								:rules="[{ required: true, message: '请输入人员变量' }]"
 							>
 								<template #label>
-									<a-tooltip>
+									<el-tooltip>
 										<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
 										<question-circle-outlined />
 										人员变量：
-									</a-tooltip>
+									</el-tooltip>
 								</template>
-								<a-input
+								<el-input
 									style="width: 50%"
 									v-model:value="userTypeForm.formUser"
 									allow-clear
@@ -99,22 +99,23 @@
 									@keyup.enter="customFormUser"
 									placeholder="请输入人员变量"
 								/>
-							</a-form-item>
-						</a-form>
-					</a-tab-pane>
-					<a-tab-pane key="2" tab="执行监听" force-render>
+							</el-form-item>
+						</el-form>
+					</el-tab-pane>
+					<el-tab-pane name="2" label="执行监听" lazy>
 						<prop-listener-info
 							ref="propExecutionListenerInfoRef"
+							v-if="form&&form.properties&&form.properties.executionListenerInfo"
 							:listener-value="form.properties.executionListenerInfo"
 							:default-listener-list="executionListenerInfo"
 							:listener-value-array="executionListenerArray"
 						/>
-					</a-tab-pane>
-				</a-tabs>
-			</a-layout-content>
+					</el-tab-pane>
+				</el-tabs>
+			</el-container>
 			<template #footer>
-				<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
-				<a-button @click="drawer = false">取消</a-button>
+				<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
+				<el-button @click="drawer = false">取消</el-button>
 			</template>
 		</xn-form-container>
 		<form-user-selector ref="formUserSelectorRef" :form-field-list="formFieldListValue" @click="userCallBack" />
@@ -123,7 +124,7 @@
 			:org-tree-api="selectorApiFunction.orgTreeApi"
 			:user-page-api="selectorApiFunction.userPageApi"
 			:checked-user-list-api="selectorApiFunction.checkedUserListApi"
-			:data-is-converter-flw="true"
+			:datel-is-converter-flw="true"
 			@onBack="userCallBack"
 		/>
 	</div>

src/components/XnWorkflow/nodes/startTask.vue

@@ -1,241 +1,251 @@
 <template>
-	<div class="node-wrap">
-		<div class="node-wrap-box start-node" @click="show">
-			<div class="title" style="background: #576a95">
-				<user-outlined class="icon" />
-				<span>{{ childNode.title }}</span>
-			</div>
-			<div class="content">
-				<span v-if="toText(childNode)">{{ toText(childNode) }}</span>
-				<span v-else class="placeholder">请配置字段与按钮</span>
-			</div>
-		</div>
-		<add-node v-model="childNode.childNode" />
-		<xn-form-container
-			v-model:visible="drawer"
-			:destroy-on-close="true"
-			:width="700"
-			:body-style="{ 'padding-top': '0px' }"
-		>
-			<template #title>
-				<div class="node-wrap-drawer__title">
-					<label v-if="!isEditTitle" @click="editTitle">
-						{{ form.title }}
-						<edit-outlined class="node-wrap-drawer-title-edit" />
-					</label>
-					<a-input
-						v-if="isEditTitle"
-						ref="nodeTitle"
-						v-model:value="form.title"
-						allow-clear
-						@blur="saveTitle"
-						@keyup.enter="saveTitle"
-					/>
-				</div>
-			</template>
-			<a-layout-content>
-				<a-tabs v-model:activeKey="activeKey">
-					<a-tab-pane key="1" tab="按钮配置" force-render>
-						<prop-button-info
-							ref="propButtonInfo"
-							:button-info="selectedButtonInfo"
-							:show-button="startTaskDefaultButtonkey"
-							:no-checked="startTaskNoCheckedButtonkey"
-						/>
-					</a-tab-pane>
-					<a-tab-pane key="2" tab="字段配置" force-render v-if="recordData.formType === 'DESIGN'">
-						<prop-field-info ref="propFieldInfo" :field-info="fieldInfo" :form-field-list-value="formFieldListValue" />
-					</a-tab-pane>
-					<a-tab-pane key="3" tab="表单配置" force-render v-else>
-						<div class="mb-2">
-							<span class="left-span-label">参与者可以填写的表单</span>
-						</div>
-						<a-form ref="startTaskFormRef" :model="formData" layout="vertical">
-							<a-form-item
-								label="节点表单"
-								name="FORM_URL"
-								:rules="[{ required: true, message: '请输入节点表单组件地址' }]"
-							>
-								<a-input
-									v-model:value="formData.FORM_URL"
-									addon-before="src/views/flw/customform/"
-									addon-after=".vue"
-									placeholder="请输入节点表单组件地址"
-									allow-clear
-								>
-									<template #suffix>
-										<a-button
-											v-if="formData.FORM_URL"
-											type="primary"
-											size="small"
-											@click="$refs.previewCustomFormRef.onOpen(formData.FORM_URL)"
-										>
-											预览
-										</a-button>
-									</template>
-								</a-input>
-							</a-form-item>
-							<a-form-item
-								label="移动端节点表单"
-								name="MOBILE_FORM_URL"
-								:rules="[{ required: true, message: '请输入移动端节点表单组件地址' }]"
-							>
-								<a-input
-									v-model:value="formData.MOBILE_FORM_URL"
-									addon-before="pages/flw/customform/"
-									addon-after=".vue"
-									placeholder="请输入移动端节点表单组件地址"
-									allow-clear
-								/>
-							</a-form-item>
-						</a-form>
-					</a-tab-pane>
-					<a-tab-pane key="4" tab="执行监听" force-render>
-						<prop-listener-info
-							ref="propExecutionListenerInfoRef"
-							:listener-value="form.properties.executionListenerInfo"
-							:default-listener-list="executionListenerInfo"
-							:listener-value-array="executionListenerArray"
-						/>
-					</a-tab-pane>
-					<a-tab-pane key="5" tab="节点监听" force-render>
-						<prop-listener-info
-							ref="propTaskListenerInfoRef"
-							:listener-value="form.properties.taskListenerInfo"
-							:default-listener-list="taskListenerInfo"
-							:listener-value-array="taskListenerArray"
-						/>
-					</a-tab-pane>
-				</a-tabs>
-			</a-layout-content>
-			<template #footer>
-				<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
-				<a-button @click="drawer = false">取消</a-button>
-			</template>
-		</xn-form-container>
-		<preview-custom-form ref="previewCustomFormRef" />
-	</div>
+    <div class="node-wrap">
+        <div class="node-wrap-box start-node" @click="show">
+            <div class="title" style="background: #576a95">
+                <!-- <user-outlined class="icon" /> -->
+                <span>{{ childNode.title }}777111</span>
+            </div>
+            <div class="content">
+                <span v-if="toText(childNode)">{{ toText(childNode) }}</span>
+                <span v-else class="placeholder">请配置字段与按钮</span>
+            </div>
+        </div>
+        <!-- 添加节点 -->
+        <addNode v-model="childNode.childNode" />
+        <form_container v-model="drawer" :destroy-on-close="true" :width="700" :body-style="{ 'padding-top': '0px' }">
+            <template #title>
+                <div class="node-wrap-drawer__title">
+                    <label v-if="!isEditTitle" @click="editTitle">
+                        {{ form.title }}
+                        <!-- <edit-outlined class="node-wrap-drawer-title-edit" /> -->
+                    </label>
+                    <el-input
+                        v-if="isEditTitle"
+                        ref="nodeTitle"
+                        v-model:value="form.title"
+                        allow-clear
+                        @blur="saveTitle"
+                        @keyup.enter="saveTitle"
+                    />
+                </div>
+            </template>
+            <el-container>
+                <el-tabs v-model:activeKey="activeKey">
+                    <el-tab-pane name="1" label="按钮配置" lazy>
+                        <prop-button-info
+                            ref="propButtonInfo"
+                            :button-info="selectedButtonInfo"
+                            :show-button="startTaskDefaultButtonkey"
+                            :no-checked="startTaskNoCheckedButtonkey"
+                        />
+                    </el-tab-pane>
+                    <el-tab-pane name="2" label="字段配置" lazy v-if="recordData.formType === 'DESIGN'">
+                        <prop-field-info
+                            ref="propFieldInfo"
+                            :field-info="fieldInfo"
+                            :form-field-list-value="formFieldListValue"
+                        />
+                    </el-tab-pane>
+                    <el-tab-pane name="3" label="表单配置" lazy v-else>
+                        <div class="mb-2">
+                            <span class="left-span-label">参与者可以填写的表单</span>
+                        </div>
+                        <el-form ref="startTaskFormRef" :model="formData" layout="vertical">
+                            <el-form-item
+                                label="节点表单"
+                                name="FORM_URL"
+                                :rules="[{ required: true, message: '请输入节点表单组件地址' }]"
+                            >
+                                <el-input
+                                    v-model:value="formData.FORM_URL"
+                                    addon-before="src/views/flw/customform/"
+                                    addon-after=".vue"
+                                    placeholder="请输入节点表单组件地址"
+                                    allow-clear
+                                >
+                                    <template #suffix>
+                                        <el-button
+                                            v-if="formData.FORM_URL"
+                                            type="primary"
+                                            size="small"
+                                            @click="$refs.previewCustomFormRef.onOpen(formData.FORM_URL)"
+                                        >
+                                            预览
+                                        </el-button>
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item
+                                label="移动端节点表单"
+                                name="MOBILE_FORM_URL"
+                                :rules="[{ required: true, message: '请输入移动端节点表单组件地址' }]"
+                            >
+                                <el-input
+                                    v-model:value="formData.MOBILE_FORM_URL"
+                                    addon-before="pages/flw/customform/"
+                                    addon-after=".vue"
+                                    placeholder="请输入移动端节点表单组件地址"
+                                    allow-clear
+                                />
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <el-tab-pane name="4" label="执行监听" lazy>
+                        <prop-listener-info
+                            v-if="form.properties && form.properties.executionListenerInfo"
+                            ref="propExecutionListenerInfoRef"
+                            :listener-value="form.properties.executionListenerInfo"
+                            :default-listener-list="executionListenerInfo"
+                            :listener-value-array="executionListenerArray"
+                        />
+                    </el-tab-pane>
+                    <el-tab-pane name="5" label="节点监听" lazy>
+                        <prop-listener-info
+                            ref="propTaskListenerInfoRef"
+                            v-if="form.properties && form.properties.taskListenerInfo"
+                            :listener-value="form.properties.taskListenerInfo"
+                            :default-listener-list="taskListenerInfo"
+                            :listener-value-array="taskListenerArray"
+                        />
+                    </el-tab-pane>
+                </el-tabs>
+            </el-container>
+            <template #footer>
+                <el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
+                <el-button @click="drawer = false">取消111</el-button>
+            </template>
+        </form_container>
+        <preview-custom-form ref="previewCustomFormRef" />
+    </div>
 </template>
 
 <script>
-	import { cloneDeep } from 'lodash-es'
-	import config from '@/components/XnWorkflow/nodes/config/config'
-	import addNode from './addNode.vue'
-	import propButtonInfo from './prop/propButtonInfo.vue'
-	import propFieldInfo from './prop/propFieldInfo.vue'
-	import propListenerInfo from './prop/propListenerInfo.vue'
-	import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
-
-	export default {
-		components: {
-			addNode,
-			propButtonInfo,
-			propFieldInfo,
-			propListenerInfo,
-			PreviewCustomForm
-		},
-		props: {
-			modelValue: { type: Object, default: () => {} },
-			formFieldListValue: { type: Array, default: () => [] },
-			recordData: { type: Object, default: () => {} },
-			processConfigInfo: { type: Object, default: () => {} },
-			executionListenerArray: { type: Array, default: () => [] },
-			taskListenerArray: { type: Array, default: () => [] }
-		},
-		data() {
-			return {
-				childNode: {},
-				drawer: false,
-				isEditTitle: false,
-				form: {},
-				activeKey: '1',
-				selectedButtonInfo: [],
-				executionListenerInfo: cloneDeep(config.listener.startTaskExecutionListenerInfo),
-				taskListenerInfo: cloneDeep(config.listener.userTaskTaskListenerInfo),
-				startTaskDefaultButtonkey: cloneDeep(config.button.startTaskDefaultButtonkey),
-				startTaskNoCheckedButtonkey: cloneDeep(config.button.startTaskNoCheckedButtonkey),
-				fieldInfo: [],
-				formData: {}
-			}
-		},
-		watch: {
-			modelValue() {
-				this.childNode = this.modelValue
-			}
-		},
-		mounted() {
-			this.childNode = this.modelValue
-		},
-		methods: {
-			show() {
-				this.form = cloneDeep(this.childNode)
-				this.isEditTitle = false
-				this.drawer = true
-				this.selectedButtonInfo = this.form.properties.buttonInfo
-				this.fieldInfo = this.form.properties.fieldInfo
-				// 初始化自定义表单字段值
-				this.initFormInfo()
-			},
-			initFormInfo() {
-				const processConfigInfo = cloneDeep(this.processConfigInfo)
-				if (!this.form.properties.formInfo.find((f) => f.key === 'FORM_URL')) {
-					this.formData.FORM_URL = processConfigInfo.processStartTaskFormUrl
-				} else {
-					this.formData.FORM_URL = this.form.properties.formInfo.find((f) => f.key === 'FORM_URL').value
-				}
-				if (!this.form.properties.formInfo.find((f) => f.key === 'MOBILE_FORM_URL')) {
-					this.formData.MOBILE_FORM_URL = processConfigInfo.processStartTaskMobileFormUrl
-				} else {
-					this.formData.MOBILE_FORM_URL = this.form.properties.formInfo.find((f) => f.key === 'MOBILE_FORM_URL').value
-				}
-			},
-			editTitle() {
-				this.isEditTitle = true
-				this.$nextTick(() => {
-					this.$refs.nodeTitle.focus()
-				})
-			},
-			saveTitle() {
-				this.isEditTitle = false
-			},
-			save() {
-				this.form.id = this.$TOOL.snowyUuid()
-				this.form.properties.buttonInfo = this.$refs.propButtonInfo.selectedButtonKeyList()
-				this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList()
-				this.form.properties.taskListenerInfo = this.$refs.propTaskListenerInfoRef.selectedListenerList()
-				if (this.recordData.formType === 'DESIGN') {
-					this.form.properties.fieldInfo = this.$refs.propFieldInfo.selectedFieldList()
-					this.form.dataLegal = true
-					this.$emit('update:modelValue', this.form)
-					this.drawer = false
-				} else {
-					this.$refs.startTaskFormRef
-						.validate()
-						.then((values) => {
-							this.form.dataLegal = true
-							this.form.properties.formInfo = cloneDeep(config.nodeModel.formInfo)
-							this.form.properties.formInfo.find((f) => f.key === 'FORM_URL').value = values.FORM_URL
-							this.form.properties.formInfo.find((f) => f.key === 'MOBILE_FORM_URL').value = values.MOBILE_FORM_URL
-							this.$emit('update:modelValue', this.form)
-							this.drawer = false
-						})
-						.catch((err) => {})
-				}
-			},
-			// eslint-disable-next-line no-unused-vars
-			toText(childNode) {
-				if (childNode.dataLegal) {
-					return '系统自动配置参与人'
-				} else {
-					return false
-				}
-			}
-		}
-	}
+import { cloneDeep } from 'lodash-es'
+import config from '@/components/XnWorkflow/nodes/config/config'
+import form_container from '../../../components/formContainer/index.vue'
+import addNode from './addNode.vue'
+import propButtonInfo from './prop/propButtonInfo.vue'
+import propFieldInfo from './prop/propFieldInfo.vue'
+import propListenerInfo from './prop/propListenerInfo.vue'
+import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
+import { add } from 'xe-utils'
+export default {
+    components: {
+        addNode,
+        propButtonInfo,
+        propFieldInfo,
+        propListenerInfo,
+        PreviewCustomForm,
+        form_container
+    },
+    props: {
+        modelValue: { type: Object, default: () => {} },
+        formFieldListValue: { type: Array, default: () => [] },
+        recordData: { type: Object, default: () => {} },
+        processConfigInfo: { type: Object, default: () => {} },
+        executionListenerArray: { type: Array, default: () => [] },
+        taskListenerArray: { type: Array, default: () => [] }
+    },
+    data() {
+        return {
+            childNode: {},
+            drawer: false,
+            isEditTitle: false,
+            form: {},
+            activeKey: '1',
+            selectedButtonInfo: [],
+            executionListenerInfo: cloneDeep(config.listener.startTaskExecutionListenerInfo),
+            taskListenerInfo: cloneDeep(config.listener.userTaskTaskListenerInfo),
+            startTaskDefaultButtonkey: cloneDeep(config.button.startTaskDefaultButtonkey),
+            startTaskNoCheckedButtonkey: cloneDeep(config.button.startTaskNoCheckedButtonkey),
+            fieldInfo: [],
+            formData: {}
+        }
+    },
+    watch: {
+        modelValue() {
+            this.childNode = this.modelValue
+        }
+    },
+    mounted() {
+        this.childNode = this.modelValue
+    },
+    methods: {
+        show() {
+            this.form = cloneDeep(this.childNode)
+            this.isEditTitle = false
+            this.drawer = true
+            this.selectedButtonInfo =
+                this.form && this.form.propertie && this.form.properties.buttonInfo
+                    ? this.form.properties.buttonInfo
+                    : {}
+            this.fieldInfo = this.form.properties.fieldInfo
+            // 初始化自定义表单字段值
+            this.initFormInfo()
+        },
+        initFormInfo() {
+            const processConfigInfo = cloneDeep(this.processConfigInfo)
+            if (!this.form.properties.formInfo.find(f => f.key === 'FORM_URL')) {
+                this.formData.FORM_URL = processConfigInfo.processStartTaskFormUrl
+            } else {
+                this.formData.FORM_URL = this.form.properties.formInfo.find(f => f.key === 'FORM_URL').value
+            }
+            if (!this.form.properties.formInfo.find(f => f.key === 'MOBILE_FORM_URL')) {
+                this.formData.MOBILE_FORM_URL = processConfigInfo.processStartTaskMobileFormUrl
+            } else {
+                this.formData.MOBILE_FORM_URL = this.form.properties.formInfo.find(
+                    f => f.key === 'MOBILE_FORM_URL'
+                ).value
+            }
+        },
+        editTitle() {
+            this.isEditTitle = true
+            this.$nextTick(() => {
+                this.$refs.nodeTitle.focus()
+            })
+        },
+        saveTitle() {
+            this.isEditTitle = false
+        },
+        save() {
+            this.form.id = this.$TOOL.snowyUuid()
+            this.form.properties.buttonInfo = this.$refs.propButtonInfo.selectedButtonKeyList()
+            this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList()
+            this.form.properties.taskListenerInfo = this.$refs.propTaskListenerInfoRef.selectedListenerList()
+            if (this.recordData.formType === 'DESIGN') {
+                this.form.properties.fieldInfo = this.$refs.propFieldInfo.selectedFieldList()
+                this.form.dataLegal = true
+                this.$emit('update:modelValue', this.form)
+                this.drawer = false
+            } else {
+                this.$refs.startTaskFormRef
+                    .validate()
+                    .then(values => {
+                        this.form.dataLegal = true
+                        this.form.properties.formInfo = cloneDeep(config.nodeModel.formInfo)
+                        this.form.properties.formInfo.find(f => f.key === 'FORM_URL').value = values.FORM_URL
+                        this.form.properties.formInfo.find(f => f.key === 'MOBILE_FORM_URL').value =
+                            values.MOBILE_FORM_URL
+                        this.$emit('update:modelValue', this.form)
+                        this.drawer = false
+                    })
+                    .catch(err => {})
+            }
+        },
+        // eslint-disable-next-line no-unused-vars
+        toText(childNode) {
+            if (childNode.dataLegal) {
+                return '系统自动配置参与人'
+            } else {
+                return false
+            }
+        }
+    }
+}
 </script>
 
 <style scoped>
-	.font-span {
-		padding-bottom: 8px;
-	}
+.font-span {
+    padding-bottom: 8px;
+}
 </style>

src/components/XnWorkflow/nodes/userTask.vue

@@ -11,10 +11,10 @@
 				<span v-else class="placeholder">请选择</span>
 			</div>
 		</div>
-		<add-node v-model="childNode.childNode" />
+		<addNode v-model="childNode.childNode" />
 
 		<!-- 抽屉 -->
-		<xn-form-container
+		<formContainer
 			v-model:visible="drawer"
 			:destroy-on-close="true"
 			:width="700"
@@ -25,79 +25,80 @@
 					<label v-if="!isEditTitle" @click="editTitle"
 						>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit"
 					/></label>
-					<a-input
+					<el-input
 						v-if="isEditTitle"
 						ref="nodeTitle"
-						v-model:value="form.title"
+						v-model="form.title"
 						allow-clear
 						@blur="saveTitle"
 						@keyup.enter="saveTitle"
 					/>
 				</div>
 			</template>
-			<a-layout-content>
-				<a-tabs v-model:activeKey="activeKey">
-					<a-tab-pane key="1" tab="人员配置" force-render>
+			<el-container>
+				{{ activeKey }}
+				<el-tabs v-model="activeKey">
+					<el-tab-pane name="1" label="人员配置" lazy>
 						<div v-show="!nodeLegal" style="margin-bottom: 10px">
-							<a-alert message="请配置节点相关人员！" type="error" />
+							<el-alert message="请配置节点相关人员！" type="error" />
 						</div>
-						<a-form layout="vertical" :model="userTypeForm" ref="userTypeFormRef">
+						<el-form layout="vertical" :model="userTypeForm" ref="userTypeFormRef">
 							<div class="mb-3">
 								<span class="left-span-label">选择审批人员类型</span>
 							</div>
-							<a-radio-group v-model:value="userSelectionType" style="width: 100%">
-								<a-row style="padding-bottom: 10px">
-									<a-col :span="8">
-										<a-radio value="ORG" @click="selectionClick('ORG')">机构</a-radio>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="ROLE" @click="selectionClick('ROLE')">角色</a-radio>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="POSITION" @click="selectionClick('POSITION')">职位</a-radio>
-									</a-col>
-								</a-row>
-								<a-row style="padding-bottom: 10px">
-									<a-col :span="8">
-										<a-radio value="ORG_LEADER" @click="selectionClick('ORG_LEADER')">部门主管</a-radio>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="SUPERVISOR" @click="selectionClick('SUPERVISOR')">上级主管</a-radio>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="MUL_LEVEL_SUPERVISOR" @click="selectionClick('MUL_LEVEL_SUPERVISOR')"
-											>连续多级主管</a-radio
+							<el-radio-group v-model:value="userSelectionType" style="width: 100%">
+								<el-row style="padding-bottom: 10px">
+									<el-col :span="8">
+										<el-radio value="ORG" @click="selectionClick('ORG')">机构</el-radio>
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="ROLE" @click="selectionClick('ROLE')">角色</el-radio>
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="POSITION" @click="selectionClick('POSITION')">职位</el-radio>
+									</el-col>
+								</el-row>
+								<el-row style="padding-bottom: 10px">
+									<el-col :span="8">
+										<el-radio value="ORG_LEADER" @click="selectionClick('ORG_LEADER')">部门主管</el-radio>
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="SUPERVISOR" @click="selectionClick('SUPERVISOR')">上级主管</el-radio>
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="MUL_LEVEL_SUPERVISOR" @click="selectionClick('MUL_LEVEL_SUPERVISOR')"
+											>连续多级主管</el-radio
 										>
-									</a-col>
-								</a-row>
-								<a-row style="padding-bottom: 10px">
-									<a-col :span="8">
-										<a-radio value="USER" @click="selectionClick('USER')">用户</a-radio>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="FORM_USER" @click="selectionClick('FORM_USER')">表单内的人</a-radio>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="FORM_USER_SUPERVISOR" @click="selectionClick('FORM_USER_SUPERVISOR')"
-											>表单内的人上级主管</a-radio
+									</el-col>
+								</el-row>
+								<el-row style="padding-bottom: 10px">
+									<el-col :span="8">
+										<el-radio value="USER" @click="selectionClick('USER')">用户</el-radio>
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="FORM_USER" @click="selectionClick('FORM_USER')">表单内的人</el-radio>
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="FORM_USER_SUPERVISOR" @click="selectionClick('FORM_USER_SUPERVISOR')"
+											>表单内的人上级主管</el-radio
 										>
-									</a-col>
-								</a-row>
-								<a-row style="padding-bottom: 10px">
-									<a-col :span="8">
-										<a-radio
+									</el-col>
+								</el-row>
+								<el-row style="padding-bottom: 10px">
+									<el-col :span="8">
+										<el-radio
 											value="FORM_USER_MUL_LEVEL_SUPERVISOR"
 											@click="selectionClick('FORM_USER_MUL_LEVEL_SUPERVISOR')"
-											>表单内的人连续多级主管</a-radio
+											>表单内的人连续多级主管</el-radio
 										>
-									</a-col>
-									<a-col :span="8">
-										<a-radio value="INITIATOR" @click="selectionClick('INITIATOR')">发起人</a-radio>
-									</a-col>
-									<a-col :span="8" />
-								</a-row>
-							</a-radio-group>
-							<a-form-item
+									</el-col>
+									<el-col :span="8">
+										<el-radio value="INITIATOR" @click="selectionClick('INITIATOR')">发起人</el-radio>
+									</el-col>
+									<el-col :span="8" />
+								</el-row>
+							</el-radio-group>
+							<el-form-item
 								class="mt-2"
 								v-if="
 									recordData.formType === 'DEFINE' &&
@@ -109,13 +110,13 @@
 								:rules="[{ required: true, message: '请输入人员变量' }]"
 							>
 								<template #label>
-									<a-tooltip>
+									<el-tooltip>
 										<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
 										<question-circle-outlined />
 										人员变量：
-									</a-tooltip>
+									</el-tooltip>
 								</template>
-								<a-input
+								<el-input
 									style="width: 50%"
 									v-model:value="userTypeForm.formUser"
 									allow-clear
@@ -123,22 +124,22 @@
 									@keyup.enter="customFormUser"
 									placeholder="请输入人员变量"
 								/>
-							</a-form-item>
+							</el-form-item>
 							<div v-if="seleType" class="mt-2">
-								<a-button type="primary" @click="openSelector" size="small">
+								<el-button type="primary" @click="openSelector" size="small">
 									<template #icon>
 										<search-outlined />
 									</template>
 									选择
-								</a-button>
+								</el-button>
 							</div>
 							<div class="mt-2">
 								<prop-tag
-									v-if="form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''"
+									v-if="form.properties&&form.properties.participateInfo&&form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''"
 									:tag-list="form.properties.participateInfo[0]"
 								/>
 							</div>
-							<a-form-item
+							<el-form-item
 								class="mt-2"
 								v-if="
 									userSelectionType === 'SUPERVISOR' ||
@@ -154,108 +155,108 @@
 								name="levelSupervisor"
 								:rules="[{ required: true, message: '请选择主管级别' }]"
 							>
-								<a-select
+								<el-select
 									style="width: 50%"
 									v-model:value="userTypeForm.levelSupervisor"
 									placeholder="请选择主管级别"
 									@change="levelSupervisorChange"
 									:options="levelSupervisorList"
 								/>
-							</a-form-item>
-						</a-form>
-					</a-tab-pane>
-					<a-tab-pane key="2" tab="审批配置" force-render>
+							</el-form-item>
+						</el-form>
+					</el-tab-pane>
+					<el-tab-pane name="2" label="审批配置" lazy>
 						<span class="left-span-label">配置审批方式</span>
-						<a-form label-position="top" layout="vertical" class="mt-2">
+						<el-form label-position="top" layout="vertical" class="mt-2">
 							<div v-show="!nodeLegal" style="margin-bottom: 10px">
-								<a-alert message="请配置节点相关人员！" type="error" />
+								<el-alert message="请配置节点相关人员！" type="error" />
 							</div>
-							<a-form-item label="任务节点类型">
-								<a-radio-group v-model:value="form.properties.configInfo.userTaskType">
-									<a-radio
+							<el-form-item label="任务节点类型">
+								<el-radio-group v-model:value="form.properties.configInfo.userTaskType">
+									<el-radio
 										v-for="userTaskType in userTaskTypeList"
 										:key="userTaskType.value"
 										:value="userTaskType.value"
-										>{{ userTaskType.label }}</a-radio
+										>{{ userTaskType.label }}</el-radio
 									>
-								</a-radio-group>
-							</a-form-item>
-							<a-form-item label="审批退回类型">
-								<a-radio-group v-model:value="form.properties.configInfo.userTaskRejectType">
-									<a-radio
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="审批退回类型">
+								<el-radio-group v-model:value="form.properties.configInfo.userTaskRejectType">
+									<el-radio
 										v-for="userTaskRejectType in userTaskRejectTypeList"
 										:key="userTaskRejectType.value"
 										:value="userTaskRejectType.value"
 										>{{ userTaskRejectType.label }}
-									</a-radio>
+									</el-radio>
 									<br />
-								</a-radio-group>
-							</a-form-item>
-							<a-form-item label="多人审批类型">
-								<a-radio-group v-model:value="form.properties.configInfo.userTaskMulApproveType">
-									<a-radio
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="多人审批类型">
+								<el-radio-group v-model:value="form.properties.configInfo.userTaskMulApproveType">
+									<el-radio
 										v-for="userTaskMulApproveType in userTaskMulApproveTypeList"
 										:key="userTaskMulApproveType.value"
 										:value="userTaskMulApproveType.value"
 										>{{ userTaskMulApproveType.label }}
-									</a-radio>
+									</el-radio>
 									<br />
-								</a-radio-group>
-							</a-form-item>
-							<a-form-item label="审批人员为空时">
-								<a-radio-group v-model:value="form.properties.configInfo.userTaskEmptyApproveType">
-									<a-radio
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="审批人员为空时">
+								<el-radio-group v-model:value="form.properties.configInfo.userTaskEmptyApproveType">
+									<el-radio
 										v-for="userTaskEmptyApproveType in userTaskEmptyApproveTypeList"
 										:key="userTaskEmptyApproveType.value"
 										:value="userTaskEmptyApproveType.value"
 										@change="userTaskEmptyApproveTypeChange"
 										>{{ userTaskEmptyApproveType.label }}
-									</a-radio>
-								</a-radio-group>
-							</a-form-item>
-							<a-form-item
+									</el-radio>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item
 								v-if="form.properties.configInfo.userTaskEmptyApproveType === 'AUTO_TURN'"
 								label="审批人为空时转交人"
 							>
-								<p><a-button type="primary" size="small" @click="seleApproveUser">选择人员</a-button></p>
-								<a-tag
+								<p><el-button type="primary" size="small" @click="seleApproveUser">选择人员</el-button></p>
+								<el-tag
 									v-if="form.properties.configInfo.userTaskEmptyApproveUserArray.length > 0"
 									color="orange"
 									closable
 									@close="closeApproveUserTag"
 								>
-									{{ form.properties.configInfo.userTaskEmptyApproveUserArray[0].name }}</a-tag
+									{{ form.properties.configInfo.userTaskEmptyApproveUserArray[0].name }}</el-tag
 								>
-							</a-form-item>
-						</a-form>
-					</a-tab-pane>
-					<a-tab-pane key="3" tab="按钮配置" force-render>
+							</el-form-item>
+						</el-form>
+					</el-tab-pane>
+					<el-tab-pane name="3" label="按钮配置" lazy>
 						<prop-button-info
 							ref="propButtonInfo"
 							:button-info="selectedButtonInfo"
 							:show-button="defaultButtonkey"
 							:no-checked="userTaskNoCheckedButtonkey"
 						/>
-					</a-tab-pane>
-					<a-tab-pane key="4" tab="字段配置" force-render v-if="recordData.formType === 'DESIGN'">
+					</el-tab-pane>
+					<el-tab-pane name="4" label="字段配置" lazy v-if="recordData.formType === 'DESIGN'">
 						<prop-field-info
 							ref="propFieldInfo"
 							:field-info="fieldInfo"
 							:default-field-model="defaultFieldModel"
 							:form-field-list-value="formFieldListValue"
 						/>
-					</a-tab-pane>
-					<a-tab-pane key="5" tab="表单配置" force-render v-else>
+					</el-tab-pane>
+					<el-tab-pane name="5" label="表单配置" lazy v-else>
 						<div class="mb-2">
 							<span class="left-span-label">参与者可以使用的表单</span>
 						</div>
-						<a-form ref="userTaskFormRef" :model="formData" layout="vertical">
-							<a-form-item
+						<el-form ref="userTaskFormRef" :model="formData" layout="vertical">
+							<el-form-item
 								label="节点表单"
 								name="FORM_URL"
 								:rules="[{ required: true, message: '请输入节点表单组件地址' }]"
 							>
-								<a-input
+								<el-input
 									v-model:value="formData.FORM_URL"
 									addon-before="src/views/flw/customform/"
 									addon-after=".vue"
@@ -263,61 +264,61 @@
 									allow-clear
 								>
 									<template #suffix>
-										<a-button
+										<el-button
 											v-if="formData.FORM_URL"
 											type="primary"
 											size="small"
 											@click="$refs.previewCustomFormRef.onOpen(formData.FORM_URL)"
 										>
 											预览
-										</a-button>
+										</el-button>
 									</template>
-								</a-input>
-							</a-form-item>
-							<a-form-item
+								</el-input>
+							</el-form-item>
+							<el-form-item
 								label="移动端节点表单"
 								name="MOBILE_FORM_URL"
 								:rules="[{ required: true, message: '请输入移动端节点表单组件地址' }]"
 							>
-								<a-input
+								<el-input
 									v-model:value="formData.MOBILE_FORM_URL"
 									addon-before="pages/flw/customform/"
 									addon-after=".vue"
 									placeholder="请输入移动端节点表单组件地址"
 									allow-clear
 								/>
-							</a-form-item>
-						</a-form>
-					</a-tab-pane>
-					<a-tab-pane key="6" tab="执行监听" force-render>
+							</el-form-item>
+						</el-form>
+					</el-tab-pane>
+					<el-tab-pane name="6" label="执行监听" lazy>
 						<prop-listener-info
 							ref="propExecutionListenerInfoRef"
 							:listener-value="form.properties.executionListenerInfo"
 							:default-listener-list="executionListenerInfo"
 							:listener-value-array="executionListenerArray"
 						/>
-					</a-tab-pane>
-					<a-tab-pane key="7" tab="节点监听" force-render>
+					</el-tab-pane>
+					<el-tab-pane name="7" label="节点监听" lazy>
 						<prop-listener-info
 							ref="propTaskListenerInfoRef"
 							:listener-value="form.properties.taskListenerInfo"
 							:default-listener-list="taskListenerInfo"
 							:listener-value-array="taskListenerArray"
 						/>
-					</a-tab-pane>
-				</a-tabs>
-			</a-layout-content>
+					</el-tab-pane>
+				</el-tabs>
+			</el-container>
 			<template #footer>
-				<a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
-				<a-button @click="drawer = false">取消</a-button>
+				<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
+				<el-button @click="drawer = false">取消</el-button>
 			</template>
-		</xn-form-container>
+		</formContainer>
 		<role-selector-plus
 			ref="roleselectorPlus"
 			:org-tree-api="selectorApiFunction.orgTreeApi"
 			:role-page-api="selectorApiFunction.rolePageApi"
 			:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
-			:data-is-converter-flw="true"
+			:datel-is-converter-flw="true"
 			@onBack="callBack"
 		/>
 		<user-selector-plus
@@ -325,7 +326,7 @@
 			:org-tree-api="selectorApiFunction.orgTreeApi"
 			:user-page-api="selectorApiFunction.userPageApi"
 			:checked-user-list-api="selectorApiFunction.checkedUserListApi"
-			:data-is-converter-flw="true"
+			:datel-is-converter-flw="true"
 			@onBack="callBack"
 		/>
 		<pos-selector-plus
@@ -333,7 +334,7 @@
 			:org-tree-api="selectorApiFunction.orgTreeApi"
 			:pos-page-api="selectorApiFunction.posPageApi"
 			:checked-pos-list-api="selectorApiFunction.checkedPosListApi"
-			:data-is-converter-flw="true"
+			:datel-is-converter-flw="true"
 			@onBack="callBack"
 		/>
 		<org-selector-plus
@@ -341,7 +342,7 @@
 			:org-tree-api="selectorApiFunction.orgTreeApi"
 			:org-page-api="selectorApiFunction.orgPageApi"
 			:checked-org-list-api="selectorApiFunction.checkedOrgListApi"
-			:data-is-converter-flw="true"
+			:datel-is-converter-flw="true"
 			@onBack="callBack"
 		/>
 		<form-user-selector ref="formuserselector" :form-field-list="formFieldListValue" @click="formuserClick" />
@@ -371,7 +372,7 @@
 	import orgSelectorPlus from '@/components/Selector/orgSelectorPlus.vue'
 	import propTag from './prop/propTag.vue'
 	import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
-
+    import formContainer from '@/components/formContainer/index.vue';
 	export default {
 		components: {
 			addNode,
@@ -384,7 +385,8 @@
 			posSelectorPlus,
 			orgSelectorPlus,
 			propTag,
-			PreviewCustomForm
+			PreviewCustomForm,
+			formContainer
 		},
 		// inject: ['select'],
 		props: {

src/components/XnWorkflow/process.vue

@@ -1,5 +1,5 @@
 <template>
-	<xn-form-container
+	<formContainer
 		v-model:visible="drawer"
 		:destroy-on-close="true"
 		:title="modelTitle"
@@ -18,29 +18,28 @@
 					<div class="mb-2">
 						<span class="left-span-label">配置使用该流程的人员</span>
 					</div>
-					<el-button type="primary" round @click="selectionParticipants('ORG')" size="small">
-						<Plus/>
+					<el-button type="primary" :icon="Plus" round @click="selectionParticipants('ORG')" size="small">
 						选择机构
 					</el-button>
 					<p />
 					<prop-tag :tagList="getTagList('ORG')" />
 					<el-divider />
 					<el-button type="primary" round @click="selectionParticipants('ROLE')" size="small">
-						<plus-outlined />
+						<!-- <plus-outlined /> -->
 						选择角色
 					</el-button>
 					<p />
 					<prop-tag :tagList="getTagList('ROLE')" />
 					<el-divider />
 					<el-button type="primary" round @click="selectionParticipants('POSITION')" size="small">
-						<plus-outlined />
+						<!-- <plus-outlined /> -->
 						选择职位
 					</el-button>
 					<p />
 					<prop-tag :tagList="getTagList('POSITION')" />
 					<el-divider />
 					<el-button type="primary" round @click="selectionParticipants('USER')" size="small">
-						<plus-outlined />
+						<!-- <plus-outlined /> -->
 						选择用户
 					</el-button>
 					<p />
@@ -59,7 +58,7 @@
 								:rules="[{ required: true, message: '请选择流水号' }]"
 							>
 								<el-select
-								v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processSnTemplateId"
+								v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processSnTemplateId"
 									v-model:value="form.properties.configInfo.processSnTemplateId"
 									placeholder="请选择流水号"
 									:options="snTemplateArray"
@@ -75,6 +74,7 @@
 								:rules="[{ required: true, message: '请选择打印模板' }]"
 							>
 								<el-select
+								    v-if="form&&form.properties&&form.properties.configInfo.processPrintTemplateId"
 									v-model:value="form.properties.configInfo.processPrintTemplateId"
 									placeholder="请选择打印模板"
 									:options="printTemplateArray"
@@ -93,7 +93,7 @@
 					>
 						<template-generator
 							ref="processTitleGenerator"
-							v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processTitleTemplate"
+							v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processTitleTemplate"
 							v-model:inputValue="form.properties.configInfo.processTitleTemplate"
 							:fieldInfoLis="fieldInfoLis"
 						/>
@@ -105,16 +105,16 @@
 					>
 						<template-generator
 							ref="processAbstractGenerator"
-							v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processAbstractTemplate"
+							v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processAbstractTemplate"
 							v-model:inputValue="form.properties.configInfo.processAbstractTemplate"
 							:fieldInfoLis="fieldInfoLis"
 						/>
 					</el-form-item>
 
 					<el-form-item label="开启自动去重" name="processEnableAutoDistinct">
-						<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" v-model:checked="form.properties.configInfo.processEnableAutoDistinct" />
+						<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" v-model:checked="form.properties.configInfo.processEnableAutoDistinct" />
 					</el-form-item>
-					<el-form-item v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" name="processAutoDistinctType">
+					<el-form-item v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableAutoDistinct" name="processAutoDistinctType">
 						<el-radio-group v-model:value="form.properties.configInfo.processAutoDistinctType">
 							<el-radio
 								v-for="autoDistinctType in processAutoDistinctTypeList"
@@ -127,12 +127,12 @@
 					<el-row :gutter="[10, 0]">
 						<el-col :span="12">
 							<el-form-item label="开启审批撤销" name="processEnableRevoke">
-								<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableRevoke" v-model:checked="form.properties.configInfo.processEnableRevoke" />
+								<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableRevoke" v-model:checked="form.properties.configInfo.processEnableRevoke" />
 							</el-form-item>
 						</el-col>
 						<el-col :span="12">
 							<el-form-item label="开启意见必填" name="processEnableCommentRequired">
-								<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCommentRequired" v-model:checked="form.properties.configInfo.processEnableCommentRequired" />
+								<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCommentRequired" v-model:checked="form.properties.configInfo.processEnableCommentRequired" />
 							</el-form-item>
 						</el-col>
 					</el-row>
@@ -166,88 +166,88 @@
 					</el-form-item>
 
 					<el-form-item label="开启待办通知" name="processEnableTodoNotice">
-						<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice" v-model:checked="form.properties.configInfo.processEnableTodoNotice" />
+						<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice" v-model:checked="form.properties.configInfo.processEnableTodoNotice" />
 					</el-form-item>
 					<el-form-item
 						label="待办通知方式"
-						v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
+						v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
 						name="processTodoNoticeChannel"
 						:rules="[{ required: formData.processEnableTodoNotice, message: '请选择通知方式' }]"
 					>
 						<el-checkbox-group
-						v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeChannel"
+						v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeChannel"
 							v-model:value="form.properties.configInfo.processTodoNoticeChannel"
 							:options="noticeInfoList"
 						/>
 					</el-form-item>
 					<el-form-item
 						label="待办通知模板"
-						v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
+						v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableTodoNotice"
 						name="processTodoNoticeTemplate"
 						:rules="[{ required: formData.processEnableTodoNotice, message: '请创造通知模板' }]"
 					>
 						<template-generator
 							ref="todoNoticeChannelRef"
 							:fieldInfoLis="fieldInfoLis"
-							v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeTemplate"
+							v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processTodoNoticeTemplate"
 							v-model:inputValue="form.properties.configInfo.processTodoNoticeTemplate"
 						/>
 					</el-form-item>
 
 					<el-form-item label="开启抄送通知" name="processEnableCopyNotice">
-						<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice" v-model:checked="form.properties.configInfo.processEnableCopyNotice" />
+						<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice" v-model:checked="form.properties.configInfo.processEnableCopyNotice" />
 					</el-form-item>
 					<el-form-item
 						label="抄送通知方式"
-						v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
+						v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
 						name="processCopyNoticeChannel"
 						:rules="[{ required: formData.processEnableCopyNotice, message: '请选择通知方式' }]"
 					>
 						<el-checkbox-group
-						   v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeChannel"
+						   v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeChannel"
 							v-model:value="form.properties.configInfo.processCopyNoticeChannel"
 							:options="noticeInfoList"
 						/>
 					</el-form-item>
 					<el-form-item
 						label="抄送通知模板"
-						v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
+						v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCopyNotice"
 						name="processCopyNoticeTemplate"
 						:rules="[{ required: formData.processEnableCopyNotice, message: '请创造通知模板' }]"
 					>
 						<template-generator
 							ref="enableCopyNoticeRef"
 							:fieldInfoLis="fieldInfoLis"
-							v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeTemplate"
+							v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCopyNoticeTemplate"
 							v-model:inputValue="form.properties.configInfo.processCopyNoticeTemplate"
 						/>
 					</el-form-item>
 
 					<el-form-item label="开启完成通知" name="processEnableCompleteNotice">
-						<el-switch v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice" v-model:checked="form.properties.configInfo.processEnableCompleteNotice" />
+						<el-switch v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice" v-model:checked="form.properties.configInfo.processEnableCompleteNotice" />
 					</el-form-item>
 					<el-form-item
 						label="完成通知方式"
-						v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
+						v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
 						name="processCompleteNoticeChannel"
 						:rules="[{ required: formData.processEnableCompleteNotice, message: '请选择通知方式' }]"
 					>
 						<el-checkbox-group
-						    v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeChannel"
+						    v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeChannel"
 							v-model:value="form.properties.configInfo.processCompleteNoticeChannel"
 							:options="noticeInfoList"
 						/>
 					</el-form-item>
 					<el-form-item
 						label="完成通知模板"
-						v-show="form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
+						v-show="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processEnableCompleteNotice"
 						name="processCompleteNoticeTemplate"
 						:rules="[{ required: formData.processEnableCompleteNotice, message: '请创造通知模板' }]"
 					>
 						<template-generator
 							ref="enableCompleteNoticeRef"
 							:fieldInfoLis="fieldInfoLis"
-							v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeTemplate"
+							v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processCompleteNoticeTemplate"
 							v-model:inputValue="form.properties.configInfo.processCompleteNoticeTemplate"
 						/>
 					</el-form-item>
@@ -262,7 +262,7 @@
 						:rules="[{ required: true, message: '请输入开始节点表单' }]"
 					>
 						<el-input
-						    v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
+						    v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
 							v-model:value="form.properties.configInfo.processStartTaskFormUrl"
 							addon-before="src/views/flw/customform/"
 							addon-after=".vue"
@@ -271,7 +271,7 @@
 						>
 							<template #suffix>
 								<el-button
-									v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
+									v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskFormUrl"
 									type="primary"
 									size="small"
 									@click="$refs.previewCustomFormRef.onOpen(form.properties.configInfo.processStartTaskFormUrl)"
@@ -287,7 +287,7 @@
 						:rules="[{ required: true, message: '请输入移动端开始节点表单' }]"
 					>
 						<el-input
-						    v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskMobileFormUrl"
+						    v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processStartTaskMobileFormUrl"
 							v-model:value="form.properties.configInfo.processStartTaskMobileFormUrl"
 							addon-before="pages/flw/customform/"
 							addon-after=".vue"
@@ -301,7 +301,7 @@
 						:rules="[{ required: true, message: '请输入人员节点表单' }]"
 					>
 						<el-input
-						    v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskFormUrl"
+						    v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskFormUrl"
 							v-model:value="form.properties.configInfo.processUserTaskFormUrl"
 							addon-before="src/views/flw/customform/"
 							addon-after=".vue"
@@ -310,7 +310,7 @@
 						>
 							<template #suffix>
 								<el-button
-									v-if="form.properties.configInfo.processUserTaskFormUrl"
+									v-if="form&&form.properties.configInfo.processUserTaskFormUrl"
 									type="primary"
 									size="small"
 									@click="$refs.previewCustomFormRef.onOpen(form.properties.configInfo.processUserTaskFormUrl)"
@@ -326,7 +326,7 @@
 						:rules="[{ required: true, message: '请输入移动端人员节点表单' }]"
 					>
 						<el-input
-					    	v-if="form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskMobileFormUrl"
+					    	v-if="form&&form.properties&&form.properties.configInfo&&form.properties.configInfo.processUserTaskMobileFormUrl"
 							v-model:value="form.properties.configInfo.processUserTaskMobileFormUrl"
 							addon-before="pages/flw/customform/"
 							addon-after=".vue"
@@ -338,7 +338,7 @@
 				<el-tab-pane key="5" tab="执行监听" force-render>
 					<prop-listener-info
 						ref="propListenerInfoRef"
-						:listenerValue="form.properties?.executionListenerInfo"
+						:listenerValue="form&&form.properties?.executionListenerInfo"
 						:defaultListenerList="executionListenerInfo"
 						:listener-value-array="executionListenerArray"
 						listener-type="global"
@@ -386,7 +386,7 @@
 			@onBack="callBack"
 		/>
 		<preview-custom-form ref="previewCustomFormRef" />
-	</xn-form-container>
+	</formContainer>
 </template>
 
 <script>
@@ -400,7 +400,8 @@
 	import propTag from './nodes/prop/propTag.vue'
 	import PropListenerInfo from '@/components/XnWorkflow/nodes/prop/propListenerInfo.vue'
 	import PreviewCustomForm from '@/components/XnWorkflow/nodes/common/previewCustomForm.vue'
-
+	import { Plus } from '@element-plus/icons-vue'
+	import formContainer from '@/components/formContainer/index.vue'
 	export default {
 		components: {
 			PropListenerInfo,
@@ -410,7 +411,9 @@
 			posSelectorPlus,
 			orgSelectorPlus,
 			propTag,
-			PreviewCustomForm
+			PreviewCustomForm,
+			formContainer,
+			Plus
 		},
 		props: {
 			modelValue: { type: Object, default: () => {} },
@@ -453,7 +456,7 @@
 		computed: {
 			// 监听内部数组，选了人员相关，我们就不提示
 			alertShow() {
-				if(this.form.properties&&this.form.properties.participateInfo){
+				if(this.form&&this.form.properties&&this.form.properties.participateInfo){
 				    return this.form.properties.participateInfo.length <= 0
 				}
 			}
@@ -493,15 +496,16 @@
 		methods: {
 			showDrawer() {
 				this.form = {}
+				console.log(this.childNode,"hahhahahahah28992392399293");
 				this.form = cloneDeep(this.childNode)
-				this.formData = this.form.properties.configInfo
+				this.formData = this.form&&this.form.properties&&this.form.properties.configInfo?this.form.properties.configInfo:{}
 				this.drawer = true
 				// 制作默认的摘要字段
 				this.makeAbstractTemp()
 			},
 			// 制作默认显示的摘要信息
 			makeAbstractTemp() {
-				let temp = this.form.properties.configInfo.processAbstractTemplate
+				let temp =  this.form&&this.form.properties&&this.form.properties.configInfo.processAbstractTemplate?this.form.properties.configInfo.processAbstractTemplate:''
 				if (temp === '') {
 					if (this.fieldInfoLis.length > 0) {
 						let fieldInfoTemp = ''
@@ -544,8 +548,10 @@
 			},
 			// 选择参与人
 			selectionParticipants(type) {
-				let participateInfo = this.form.properties.participateInfo
+				console.log(type,"type=====----2--1-2-2-12-");
+				let participateInfo = this.form&&this.form.properties&&this.form.properties.participateInfo?this.form.properties.participateInfo:[]
 				let data = []
+				console.log(this.form,"999992929232");
 				if (participateInfo.length > 0) {
 					participateInfo.forEach((item) => {
 						if (item.key === type) {
@@ -590,7 +596,7 @@
 			},
 			// 获取tag标签的内容
 			getTagList(type) {
-				const participateInfo = this.form.properties&&this.form.properties.participateInfo?this.form.properties.participateInfo:[]
+				const participateInfo = this.form&&this.form.properties&&this.form.properties.participateInfo?this.form.properties.participateInfo:[]
 				if (participateInfo.length < 0) {
 					return undefined
 				} else {
@@ -635,6 +641,9 @@
 				traverse(data)
 				return result
 			}
+		},
+		mounted(){
+			this.showDrawer()
 		}
 	}
 </script>

src/components/formContainer/index.vue

@@ -0,0 +1,54 @@
+<template>
+    <el-dialog v-if="isModal" v-model="visibles" @cancel="cancel" v-bind="$attrs">
+        <template v-for="slotKey in slotKeys" #[slotKey]>
+            <slot :name="slotKey" />
+        </template>
+    </el-dialog>
+    <el-drawer v-else v-model="visibles" v-bind="$attrs" :footer-style="{ textAlign: 'right' }">
+        <template v-for="slotKey in slotKeys" #[slotKey]>
+            <slot :name="slotKey" />
+        </template>
+    </el-drawer>
+</template>
+
+<script>
+import { mapState } from 'pinia'
+import { globalStore } from '@/store'
+
+const FormContainerTypeEnum = {
+    DRAWER: 'drawer',
+    MODAL: 'modal'
+}
+export default {
+    inheritAttrs: false,
+    props: {
+        visible: {
+            type: Boolean,
+            default: false,
+            required: true
+        }
+    },
+    computed: {
+        ...mapState(globalStore, ['formStyle']),
+        slotKeys() {
+            return Object.keys(this.$slots)
+        },
+        isModal() {
+            return FormContainerTypeEnum.MODAL === this.formStyle
+        }
+    },
+    data() {
+        return {
+            visibles: ''
+        }
+    },
+    methods: {
+        cancel() {
+            this.$emit('close')
+        }
+    },
+    mounted() {
+        this.visibles = this.visible
+    }
+}
+</script>

src/config/iconSelect.js

@@ -0,0 +1,827 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+/**
+ * 图标选择器基础数据
+ * 推荐前往https://icones.js.org下载图标的Vue文件，然后放在src/assets/icons文件夹里面
+ * 这个网址有118个图标集，包括antd、font awesome、bootstrap、eleme等累计140456个图标
+ */
+const uiwIconComponentMap = import.meta.glob('../assets/icons/uiw/*.vue') // 异步方式
+
+const uiwIcons = Object.keys(uiwIconComponentMap).map((key) => {
+	return key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
+})
+
+export default {
+	icons: [
+		{
+			name: '基础',
+			key: 'default',
+			iconItem: [
+				{
+					name: '线框风格',
+					key: 'default',
+					item: [
+						'step-backward-outlined',
+						'step-forward-outlined',
+						'fast-backward-outlined',
+						'fast-forward-outlined',
+						'shrink-outlined',
+						'arrows-alt-outlined',
+						'down-outlined',
+						'up-outlined',
+						'left-outlined',
+						'right-outlined',
+						'caret-up-outlined',
+						'caret-down-outlined',
+						'caret-left-outlined',
+						'caret-right-outlined',
+						'up-circle-outlined',
+						'down-circle-outlined',
+						'left-circle-outlined',
+						'right-circle-outlined',
+						'double-right-outlined',
+						'double-left-outlined',
+						'vertical-left-outlined',
+						'vertical-right-outlined',
+						'vertical-align-top-outlined',
+						'vertical-align-middle-outlined',
+						'vertical-align-bottom-outlined',
+						'forward-outlined',
+						'backward-outlined',
+						'rollback-outlined',
+						'enter-outlined',
+						'retweet-outlined',
+						'swap-outlined',
+						'swap-left-outlined',
+						'swap-right-outlined',
+						'arrow-up-outlined',
+						'arrow-down-outlined',
+						'arrow-left-outlined',
+						'arrow-right-outlined',
+						'play-circle-outlined',
+						'up-Square-outlined',
+						'down-square-outlined',
+						'left-square-outlined',
+						'right-square-outlined',
+						'login-outlined',
+						'logout-outlined',
+						'menu-fold-outlined',
+						'menu-unfold-outlined',
+						'border-bottom-outlined',
+						'border-horizontal-outlined',
+						'border-inner-outlined',
+						'border-outer-outlined',
+						'border-left-outlined',
+						'border-right-outlined',
+						'border-top-outlined',
+						'border-verticle-outlined',
+						'pic-center-outlined',
+						'pic-left-outlined',
+						'pic-right-outlined',
+						'radius-bottomleft-outlined',
+						'radius-bottomright-outlined',
+						'radius-upleft-outlined',
+						'radius-upright-outlined',
+						'fullscreen-outlined',
+						'fullscreen-exit-outlined',
+						'question-outlined',
+						'question-circle-outlined',
+						'plus-outlined',
+						'plus-circle-outlined',
+						'pause-outlined',
+						'pause-circle-outlined',
+						'minus-outlined',
+						'minus-circle-outlined',
+						'plus-square-outlined',
+						'minus-square-outlined',
+						'info-outlined',
+						'info-circle-outlined',
+						'exclamation-outlined',
+						'exclamation-circle-outlined',
+						'close-outlined',
+						'close-circle-outlined',
+						'close-square-outlined',
+						'check-outlined',
+						'check-circle-outlined',
+						'check-square-outlined',
+						'clock-circle-outlined',
+						'warning-outlined',
+						'issues-close-outlined',
+						'stop-outlined',
+						'edit-outlined',
+						'form-outlined',
+						'copy-outlined',
+						'scissor-outlined',
+						'delete-outlined',
+						'snippets-outlined',
+						'diff-outlined',
+						'highlight-outlined',
+						'align-center-outlined',
+						'align-left-outlined',
+						'align-right-outlined',
+						'bg-colors-outlined',
+						'bold-outlined',
+						'italic-outlined',
+						'underline-outlined',
+						'strikethrough-outlined',
+						'redo-outlined',
+						'undo-outlined',
+						'zoom-in-outlined',
+						'zoom-out-outlined',
+						'font-colors-outlined',
+						'font-size-outlined',
+						'line-height-outlined',
+						'dash-outlined',
+						'small-dash-outlined',
+						'sort-ascending-outlined',
+						'sort-descending-outlined',
+						'drag-outlined',
+						'ordered-list-outlined',
+						'unordered-list-outlined',
+						'radius-setting-outlined',
+						'column-width-outlined',
+						'column-height-outlined',
+						'account-book-outlined',
+						'aim-outlined',
+						'alert-outlined',
+						'apartment-outlined',
+						'api-outlined',
+						'appstore-add-outlined',
+						'appstore-outlined',
+						'audio-outlined',
+						'audio-muted-outlined',
+						'audit-outlined',
+						'bank-outlined',
+						'barcode-outlined',
+						'bars-outlined',
+						'bell-outlined',
+						'block-outlined',
+						'book-outlined',
+						'border-outlined',
+						'borderless-table-outlined',
+						'branches-outlined',
+						'bug-outlined',
+						'build-outlined',
+						'bulb-outlined',
+						'calculator-outlined',
+						'calendar-outlined',
+						'camera-outlined',
+						'car-outlined',
+						'carry-out-outlined',
+						'ci-circle-outlined',
+						'ci-outlined',
+						'clear-outlined',
+						'cloud-download-outlined',
+						'cloud-outlined',
+						'cloud-server-outlined',
+						'cloud-sync-outlined',
+						'cloud-upload-outlined',
+						'cluster-outlined',
+						'code-outlined',
+						'coffee-outlined',
+						'comment-outlined',
+						'compass-outlined',
+						'compress-outlined',
+						'console-sql-outlined',
+						'contacts-outlined',
+						'container-outlined',
+						'control-outlined',
+						'copyright-circle-outlined',
+						'copyright-outlined',
+						'credit-card-outlined',
+						'crown-outlined',
+						'customer-service-outlined',
+						'dashboard-outlined',
+						'database-outlined',
+						'delete-column-outlined',
+						'delete-row-outlined',
+						'delivered-procedure-outlined',
+						'deployment-unit-outlined',
+						'desktop-outlined',
+						'dingtalk-outlined',
+						'disconnect-outlined',
+						'dislike-outlined',
+						'dollar-circle-outlined',
+						'dollar-outlined',
+						'download-outlined',
+						'ellipsis-outlined',
+						'environment-outlined',
+						'euro-circle-outlined',
+						'euro-outlined',
+						'exception-outlined',
+						'expand-alt-outlined',
+						'expand-outlined',
+						'experiment-outlined',
+						'export-outlined',
+						'eye-outlined',
+						'eye-invisible-outlined',
+						'field-binary-outlined',
+						'field-number-outlined',
+						'field-string-outlined',
+						'field-time-outlined',
+						'file-add-outlined',
+						'file-done-outlined',
+						'file-excel-outlined',
+						'file-exclamation-outlined',
+						'file-outlined',
+						'file-gif-outlined',
+						'file-image-outlined',
+						'file-jpg-outlined',
+						'file-markdown-outlined',
+						'file-pdf-outlined',
+						'file-ppt-outlined',
+						'file-protect-outlined',
+						'file-search-outlined',
+						'file-sync-outlined',
+						'file-text-outlined',
+						'file-unknown-outlined',
+						'file-word-outlined',
+						'file-zip-outlined',
+						'filter-outlined',
+						'fire-outlined',
+						'flag-outlined',
+						'folder-add-outlined',
+						'folder-outlined',
+						'folder-open-outlined',
+						'folder-view-outlined',
+						'fork-outlined',
+						'format-painter-outlined',
+						'frown-outlined',
+						'function-outlined',
+						'fund-projection-screen-outlined',
+						'fund-view-outlined',
+						'funnel-plot-outlined',
+						'gateway-outlined',
+						'gif-outlined',
+						'gift-outlined',
+						'global-outlined',
+						'gold-outlined',
+						'group-outlined',
+						'hdd-outlined',
+						'heart-outlined',
+						'history-outlined',
+						'holder-outlined',
+						'home-outlined',
+						'hourglass-outlined',
+						'idcard-outlined',
+						'import-outlined',
+						'inbox-outlined',
+						'insert-row-above-outlined',
+						'insert-row-below-outlined',
+						'insert-row-left-outlined',
+						'insert-row-right-outlined',
+						'insurance-outlined',
+						'interaction-outlined',
+						'key-outlined',
+						'laptop-outlined',
+						'layout-outlined',
+						'like-outlined',
+						'line-outlined',
+						'link-outlined',
+						'loading3-quarters-outlined',
+						'loading-outlined',
+						'lock-outlined',
+						'mac-command-outlined',
+						'mail-outlined',
+						'man-outlined',
+						'medicine-box-outlined',
+						'meh-outlined',
+						'menu-outlined',
+						'merge-cells-outlined',
+						'message-outlined',
+						'mobile-outlined',
+						'money-collect-outlined',
+						'monitor-outlined',
+						'more-outlined',
+						'node-collapse-outlined',
+						'node-expand-outlined',
+						'node-index-outlined',
+						'notification-outlined',
+						'number-outlined',
+						'one-to-one-outlined',
+						'paper-clip-outlined',
+						'partition-outlined',
+						'pay-circle-outlined',
+						'percentage-outlined',
+						'phone-outlined',
+						'picture-outlined',
+						'play-square-outlined',
+						'pound-circle-outlined',
+						'pound-outlined',
+						'poweroff-outlined',
+						'printer-outlined',
+						'profile-outlined',
+						'project-outlined',
+						'property-safety-outlined',
+						'pull-request-outlined',
+						'pushpin-outlined',
+						'qrcode-outlined',
+						'read-outlined',
+						'reconciliation-outlined',
+						'red-envelope-outlined',
+						'reload-outlined',
+						'rest-outlined',
+						'robot-outlined',
+						'rocket-outlined',
+						'rotate-left-outlined',
+						'rotate-right-outlined',
+						'safety-certificate-outlined',
+						'safety-outlined',
+						'save-outlined',
+						'scan-outlined',
+						'schedule-outlined',
+						'search-outlined',
+						'security-scan-outlined',
+						'select-outlined',
+						'send-outlined',
+						'setting-outlined',
+						'shake-outlined',
+						'share-alt-outlined',
+						'shop-outlined',
+						'shopping-cart-outlined',
+						'shopping-outlined',
+						'sisternode-outlined',
+						'skin-outlined',
+						'smile-outlined',
+						'solution-outlined',
+						'sound-outlined',
+						'split-cells-outlined',
+						'star-outlined',
+						'subnode-outlined',
+						'switcher-outlined',
+						'sync-outlined',
+						'table-outlined',
+						'tablet-outlined',
+						'tag-outlined',
+						'tags-outlined',
+						'team-outlined',
+						'thunderbolt-outlined',
+						'to-top-outlined',
+						'tool-outlined',
+						'trademark-circle-outlined',
+						'trademark-outlined',
+						'transaction-outlined',
+						'translation-outlined',
+						'trophy-outlined',
+						'ungroup-outlined',
+						'unlock-outlined',
+						'upload-outlined',
+						'usb-outlined',
+						'user-add-outlined',
+						'user-delete-outlined',
+						'user-outlined',
+						'user-switch-outlined',
+						'usergroup-add-outlined',
+						'usergroup-delete-outlined',
+						'verified-outlined',
+						'video-camera-add-outlined',
+						'video-camera-outlined',
+						'wallet-outlined',
+						'whats-app-outlined',
+						'wifi-outlined',
+						'woman-outlined'
+					]
+				},
+				{
+					name: '实底风格',
+					key: 'filled',
+					item: [
+						'step-backward-filled',
+						'step-forward-filled',
+						'fast-backward-filled',
+						'fast-forward-filled',
+						'caret-up-filled',
+						'caret-down-filled',
+						'caret-left-filled',
+						'caret-right-filled',
+						'up-circle-filled',
+						'down-circle-filled',
+						'left-circle-filled',
+						'right-circle-filled',
+						'forward-filled',
+						'backward-filled',
+						'play-circle-filled',
+						'up-square-filled',
+						'down-square-filled',
+						'left-square-filled',
+						'right-square-filled',
+						'question-circle-filled',
+						'plus-circle-filled',
+						'pause-circle-filled',
+						'minus-circle-filled',
+						'plus-square-filled',
+						'minus-square-filled',
+						'info-circle-filled',
+						'exclamation-circle-filled',
+						'close-circle-filled',
+						'close-square-filled',
+						'check-circle-filled',
+						'check-square-filled',
+						'clock-circle-filled',
+						'warning-filled',
+						'stop-filled',
+						'edit-filled',
+						'copy-filled',
+						'delete-filled',
+						'snippets-filled',
+						'diff-filled',
+						'highlight-filled',
+						'pie-chart-filled',
+						'box-plot-filled',
+						'fund-filled',
+						'sliders-filled',
+						'android-filled',
+						'apple-filled',
+						'windows-filled',
+						'chrome-filled',
+						'github-filled',
+						'aliwangwang-filled',
+						'weibo-square-filled',
+						'weibo-circle-filled',
+						'taobao-circle-filled',
+						'html5-filled',
+						'wechat-filled',
+						'youtube-filled',
+						'alipay-circle-filled',
+						'skype-filled',
+						'gitlab-filled',
+						'linkedin-filled',
+						'facebook-filled',
+						'code-sandbox-circle-filled',
+						'codepen-circle-filled',
+						'slack-square-filled',
+						'behance-square-filled',
+						'dribbble-square-filled',
+						'instagram-filled',
+						'yuque-filled',
+						'yahoo-filled',
+						'account-book-filled',
+						'alert-filled',
+						'alipay-square-filled',
+						'amazon-circle-filled',
+						'amazon-square-filled',
+						'api-filled',
+						'appstore-filled',
+						'audio-filled',
+						'bank-filled',
+						'behance-circle-filled',
+						'bell-filled',
+						'book-filled',
+						'bug-filled',
+						'build-filled',
+						'bulb-filled',
+						'calculator-filled',
+						'calendar-filled',
+						'camera-filled',
+						'car-filled',
+						'carry-out-filled',
+						'ci-circle-filled',
+						'cloud-filled',
+						'code-filled',
+						'code-sandbox-square-filled',
+						'codepen-square-filled',
+						'compass-filled',
+						'contacts-filled',
+						'container-filled',
+						'control-filled',
+						'copyright-circle-filled',
+						'credit-card-filled',
+						'crown-filled',
+						'customer-service-filled',
+						'dashboard-filled',
+						'database-filled',
+						'dingtalk-circle-filled',
+						'dingtalk-square-filled',
+						'dislike-filled',
+						'dollar-circle-filled',
+						'dribbble-circle-filled',
+						'dropbox-circle-filled',
+						'dropbox-square-filled',
+						'environment-filled',
+						'euro-circle-filled',
+						'experiment-filled',
+						'eye-filled',
+						'eye-invisible-filled',
+						'file-add-filled',
+						'file-excel-filled',
+						'file-exclamation-filled',
+						'file-filled',
+						'file-image-filled',
+						'file-markdown-filled',
+						'file-pdf-filled',
+						'file-ppt-filled',
+						'file-text-filled',
+						'file-unknown-filled',
+						'file-word-filled',
+						'file-zip-filled',
+						'filter-filled',
+						'fire-filled',
+						'flag-filled',
+						'folder-add-filled',
+						'folder-filled',
+						'folder-open-filled',
+						'format-painter-filled',
+						'frown-filled',
+						'funnel-plot-filled',
+						'gift-filled',
+						'gold-filled',
+						'golden-filled',
+						'google-circle-filled',
+						'google-plus-circle-filled',
+						'google-plus-square-filled',
+						'google-square-filled',
+						'hdd-filled',
+						'heart-filled',
+						'home-filled',
+						'hourglass-filled',
+						'idcard-filled',
+						'ie-circle-filled',
+						'ie-square-filled',
+						'insurance-filled',
+						'interaction-filled',
+						'layout-filled',
+						'like-filled',
+						'lock-filled',
+						'mac-command-filled',
+						'mail-filled',
+						'medicine-box-filled',
+						'medium-circle-filled',
+						'medium-square-filled',
+						'meh-filled',
+						'message-filled',
+						'mobile-filled',
+						'money-collect-filled',
+						'notification-filled',
+						'pay-circle-filled',
+						'phone-filled',
+						'picture-filled',
+						'play-square-filled',
+						'pound-circle-filled',
+						'printer-filled',
+						'profile-filled',
+						'project-filled',
+						'property-safety-filled',
+						'pushpin-filled',
+						'qq-circle-filled',
+						'qq-square-filled',
+						'read-filled',
+						'reconciliation-filled',
+						'red-envelope-filled',
+						'reddit-circle-filled',
+						'reddit-square-filled',
+						'rest-filled',
+						'robot-filled',
+						'rocket-filled',
+						'safety-certificate-filled',
+						'save-filled',
+						'schedule-filled',
+						'security-scan-filled',
+						'setting-filled',
+						'shop-filled',
+						'shopping-filled',
+						'signal-filled',
+						'sketch-circle-filled',
+						'sketch-square-filled',
+						'skin-filled',
+						'slack-circle-filled',
+						'smile-filled',
+						'sound-filled',
+						'star-filled',
+						'switcher-filled',
+						'tablet-filled',
+						'tag-filled',
+						'tags-filled',
+						'taobao-square-filled',
+						'thunderbolt-filled',
+						'tool-filled',
+						'trademark-circle-filled',
+						'trophy-filled',
+						'twitter-circle-filled',
+						'twitter-square-filled',
+						'unlock-filled',
+						'usb-filled',
+						'video-camera-filled',
+						'wallet-filled',
+						'zhihu-circle-filled',
+						'zhihu-square-filled'
+					]
+				},
+				{
+					name: '双色风格',
+					key: 'twotone',
+					item: [
+						'up-circle-two-tone',
+						'down-circle-two-tone',
+						'left-circle-two-tone',
+						'right-circle-two-tone',
+						'play-circle-two-tone',
+						'up-square-two-tone',
+						'down-square-two-tone',
+						'left-square-two-tone',
+						'right-square-two-tone',
+						'question-circle-two-tone',
+						'plus-circle-two-tone',
+						'pause-circle-two-tone',
+						'minus-circle-two-tone',
+						'plus-square-two-tone',
+						'minus-square-two-tone',
+						'info-circle-two-tone',
+						'exclamation-circle-two-tone',
+						'close-circle-two-tone',
+						'close-square-two-tone',
+						'check-circle-two-tone',
+						'check-square-two-tone',
+						'clock-circle-two-tone',
+						'warning-two-tone',
+						'stop-two-tone',
+						'edit-two-tone',
+						'copy-two-tone',
+						'delete-two-tone',
+						'snippets-two-tone',
+						'diff-two-tone',
+						'highlight-two-tone',
+						'pie-chart-two-tone',
+						'box-plot-two-tone',
+						'fund-two-tone',
+						'sliders-two-tone',
+						'account-book-two-tone',
+						'alert-two-tone',
+						'api-two-tone',
+						'appstore-two-tone',
+						'audio-two-tone',
+						'bank-two-tone',
+						'bell-two-tone',
+						'book-two-tone',
+						'bug-two-tone',
+						'build-two-tone',
+						'bulb-two-tone',
+						'calculator-two-tone',
+						'calendar-two-tone',
+						'camera-two-tone',
+						'car-two-tone',
+						'carry-out-two-tone',
+						'ci-circle-two-tone',
+						'ci-two-tone',
+						'cloud-two-tone',
+						'code-two-tone',
+						'compass-two-tone',
+						'contacts-two-tone',
+						'container-two-tone',
+						'control-two-tone',
+						'copyright-circle-two-tone',
+						'copyright-two-tone',
+						'credit-card-two-tone',
+						'crown-two-tone',
+						'customer-service-two-tone',
+						'dashboard-two-tone',
+						'database-two-tone',
+						'dislike-two-tone',
+						'dollar-circle-two-tone',
+						'dollar-two-tone',
+						'environment-two-tone',
+						'euro-circle-two-tone',
+						'account-book-two-tone',
+						'alert-two-tone',
+						'api-two-tone',
+						'appstore-two-tone',
+						'audio-two-tone',
+						'bank-two-tone',
+						'bell-two-tone',
+						'book-two-tone',
+						'bug-two-tone',
+						'build-two-tone',
+						'bulb-two-tone',
+						'calculator-two-tone',
+						'calendar-two-tone',
+						'camera-two-tone',
+						'car-two-tone',
+						'carry-out-two-tone',
+						'ci-circle-two-tone',
+						'ci-two-tone',
+						'cloud-two-tone',
+						'code-two-tone',
+						'compass-two-tone',
+						'contacts-two-tone',
+						'container-two-tone',
+						'control-two-tone',
+						'copyright-circle-two-tone',
+						'copyright-two-tone',
+						'credit-card-two-tone',
+						'crown-two-tone',
+						'customer-service-two-tone',
+						'dashboard-two-tone',
+						'database-two-tone',
+						'dislike-two-tone',
+						'dollar-circle-two-tone',
+						'dollar-two-tone',
+						'environment-two-tone',
+						'euro-circle-two-tone',
+						'euro-two-tone',
+						'experiment-two-tone',
+						'eye-two-tone',
+						'eye-invisible-two-tone',
+						'file-add-two-tone',
+						'file-excel-two-tone',
+						'file-exclamation-two-tone',
+						'file-two-tone',
+						'file-image-two-tone',
+						'file-markdown-two-tone',
+						'file-pdf-two-tone',
+						'file-ppt-two-tone',
+						'file-text-two-tone',
+						'file-unknown-two-tone',
+						'file-word-two-tone',
+						'file-zip-two-tone',
+						'filter-two-tone',
+						'fire-two-tone',
+						'flag-two-tone',
+						'folder-add-two-tone',
+						'folder-two-tone',
+						'folder-open-two-tone',
+						'frown-two-tone',
+						'funnel-plot-two-tone',
+						'gift-two-tone',
+						'gold-two-tone',
+						'hdd-two-tone',
+						'heart-two-tone',
+						'home-two-tone',
+						'hourglass-two-tone',
+						'idcard-two-tone',
+						'insurance-two-tone',
+						'interaction-two-tone',
+						'layout-two-tone',
+						'like-two-tone',
+						'lock-two-tone',
+						'mail-two-tone',
+						'medicine-box-two-tone',
+						'meh-two-tone',
+						'message-two-tone',
+						'mobile-two-tone',
+						'money-collect-two-tone',
+						'notification-two-tone',
+						'phone-two-tone',
+						'picture-two-tone',
+						'play-square-two-tone',
+						'pound-circle-two-tone',
+						'printer-two-tone',
+						'profile-two-tone',
+						'project-two-tone',
+						'property-safety-two-tone',
+						'pushpin-two-tone',
+						'reconciliation-two-tone',
+						'red-envelope-two-tone',
+						'rest-two-tone',
+						'rocket-two-tone',
+						'safety-certificate-two-tone',
+						'save-two-tone',
+						'schedule-two-tone',
+						'security-scan-two-tone',
+						'setting-two-tone',
+						'shop-two-tone',
+						'shopping-two-tone',
+						'skin-two-tone',
+						'smile-two-tone',
+						'sound-two-tone',
+						'star-two-tone',
+						'switcher-two-tone',
+						'tablet-two-tone',
+						'tag-two-tone',
+						'tags-two-tone',
+						'thunderbolt-two-tone',
+						'tool-two-tone',
+						'trademark-circle-two-tone',
+						'trophy-two-tone',
+						'unlock-two-tone',
+						'usb-two-tone',
+						'video-camera-two-tone',
+						'wallet-two-tone'
+					]
+				}
+			]
+		},
+		{
+			name: '扩展',
+			key: 'extend',
+			iconItem: [
+				{
+					name: '常用',
+					key: 'default',
+					item: uiwIcons
+				},
+				{
+					name: '其他',
+					key: 'other',
+					item: ['GiteeIcon']
+				}
+			]
+		}
+	]
+}

src/config/index.js

@@ -0,0 +1,101 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+const DEFAULT_CONFIG = {
+	// 首页地址
+	DASHBOARD_URL: '/index',
+
+	// 接口地址
+	API_URL: import.meta.env.VITE_API_BASEURL,
+
+	// 请求超时
+	TIMEOUT: 60000,
+
+	// TokenName // Authorization
+	TOKEN_NAME: 'token',
+
+	// Token前缀，注意最后有个空格，如不需要需设置空字符串 // Bearer
+	TOKEN_PREFIX: '',
+
+	// 追加其他头
+	HEADERS: {},
+
+	// 请求是否开启缓存
+	REQUEST_CACHE: false,
+
+	// 布局 经典：classical，双排菜单：doublerow
+	SNOWY_LAYOUT: 'doublerow',
+
+	// 菜单是否折叠
+	SNOWY_MENU_COLLAPSE: false,
+
+	// 模块坞
+	SNOWY_MODULE_UNFOLD_OPEN: true,
+
+	// 是否开启多标签
+	SNOWY_LAYOUT_TAGS_OPEN: true,
+
+	// 是否开启展示面包屑
+	SNOWY_BREADCRUMD_OPEN: false,
+
+	// 顶栏是否应用主题色
+	SNOWY_TOP_HEADER_THEME_COLOR_OPEN: false,
+
+	// 顶栏主题色通栏
+	SNOWY_TOP_HEADER_THEME_COLOR_SPREAD: false,
+
+	// 侧边菜单是否排他展开
+	SNOWY_SIDE_UNIQUE_OPEN: true,
+
+	// 语言
+	LANG: 'zh-cn',
+
+	// 主题颜色
+	COLOR: '#1890FF',
+
+	// 默认整体主题
+	SNOWY_THEME: 'dark',
+
+	// 整体表单风格
+	SNOWY_FORM_STYLE: 'drawer',
+
+	// 成功色
+	success: '#52c41a',
+
+	// 警告色
+	warning: '#faad14',
+
+	// 错误色
+	error: '#f5222f',
+
+	// 系统基础配置，这些是数据库中保存起来的
+	SYS_BASE_CONFIG: {
+		// 默认logo
+		SNOWY_SYS_LOGO: '/img/logo.png',
+		// 背景图
+		SNOWY_SYS_BACK_IMAGE: '',
+		// 系统名称
+		SNOWY_SYS_NAME: 'Snowy',
+		// 版本
+		SNOWY_SYS_VERSION: '2.0',
+		// 版权
+		SNOWY_SYS_COPYRIGHT: 'Snowy ©2022 Created by xiaonuo.vip',
+		// 版权跳转URL
+		SNOWY_SYS_COPYRIGHT_URL: 'https://www.xiaonuo.vip',
+		// 默认文件存储
+		SNOWY_SYS_DEFAULT_FILE_ENGINE: 'LOCAL',
+		// 是否开启验证码
+		SNOWY_SYS_DEFAULT_CAPTCHA_OPEN: 'false',
+		// 默认重置密码
+		SNOWY_SYS_DEFAULT_PASSWORD: '123456'
+	}
+}
+
+export default DEFAULT_CONFIG

src/config/route.js

@@ -0,0 +1,44 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+// 静态路由配置
+const routes = {
+	// 默认模块，仅限于后端未添加任何单页配置，用此路由
+	module: [
+		{
+			id: '01',
+			name: 'homeModule',
+			path: '/homeModule',
+			component: '',
+			meta: {
+				title: '默认',
+				type: 'module',
+				icon: 'bank-outlined'
+			},
+			children: []
+		}
+	],
+	// 默认谁都有个人中心
+	menu: [
+		{
+			id: '001',
+			name: 'usercenter',
+			path: '/usercenter',
+			component: 'sys/user/userCenter',
+			meta: {
+				title: '个人中心',
+				type: 'menu',
+				hidden: true
+			}
+		}
+	]
+}
+
+export default routes

src/config/settingConfig.js

@@ -0,0 +1,64 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+const colorList = [
+	{
+		key: '薄暮',
+		color: '#F5222D'
+	},
+	{
+		key: '火山',
+		color: '#FA541C'
+	},
+	{
+		key: '胭脂粉',
+		color: '#EB2F96'
+	},
+	{
+		key: '日暮',
+		color: '#FAAD14'
+	},
+	{
+		key: '明青',
+		color: '#13C2C2'
+	},
+	{
+		key: '极光绿',
+		color: '#52C41A'
+	},
+	{
+		key: '深绿',
+		color: '#009688'
+	},
+	{
+		key: '拂晓蓝（默认）',
+		color: '#1890FF'
+	},
+	{
+		key: '极客蓝',
+		color: '#2F54EB'
+	},
+	{
+		key: '酱紫',
+		color: '#722ED1'
+	},
+	{
+		key: '主题黑',
+		color: '#001529'
+	}
+]
+
+const updateColorWeak = (colorWeak) => {
+	// document.body.className = colorWeak ? 'colorWeak' : '';
+	const app = document.body.querySelector('#app')
+	colorWeak ? app.classList.add('colorWeak') : app.classList.remove('colorWeak')
+}
+
+export { colorList, updateColorWeak }

src/config/themeColor.js

@@ -0,0 +1,10 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */

src/store/global.js

@@ -0,0 +1,162 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { defineStore } from 'pinia'
+import { changeColor } from '@/utils/themeUtil'
+import config from '@/config'
+import { message } from 'ant-design-vue'
+import tool from '@/utils/tool'
+import { ref } from 'vue'
+const toolDataGet = (key) => {
+	return tool.data.get(key)
+}
+
+// 获取缓存中的，如果取不到那就用配置的
+const getCacheConfig = (value) => {
+	const data = toolDataGet(value)
+	if (data === null) {
+		return config[value]
+	}
+	return data
+}
+
+/**
+ * deprecated 请使用 useGlobalStore
+ */
+export const globalStore = defineStore('global', () => {
+	// 利用Vue3组合式API，ref()定义state的属性
+	// function() 定义actions
+	// computed 定义getters
+
+	// 定义state
+	// 移动端布局
+	const isMobile = ref(false)
+	// 布局
+	const layout = ref(getCacheConfig('SNOWY_LAYOUT'))
+
+	// 菜单是否折叠 toggle
+	const menuIsCollapse = ref(getCacheConfig('SNOWY_MENU_COLLAPSE'))
+	// 侧边菜单是否排他展开
+	const sideUniqueOpen = ref(getCacheConfig('SNOWY_SIDE_UNIQUE_OPEN'))
+	// 多标签栏
+	const layoutTagsOpen = ref(getCacheConfig('SNOWY_LAYOUT_TAGS_OPEN'))
+	// 是否展示面包屑
+	const breadcrumbOpen = ref(getCacheConfig('SNOWY_BREADCRUMD_OPEN'))
+	// 顶栏是否应用主题色
+	const topHeaderThemeColorOpen = ref(getCacheConfig('SNOWY_TOP_HEADER_THEME_COLOR_OPEN'))
+	// 顶栏主题色通栏
+	const topHeaderThemeColorSpread = ref(getCacheConfig('SNOWY_TOP_HEADER_THEME_COLOR_SPREAD'))
+	// 模块坞
+	const moduleUnfoldOpen = ref(getCacheConfig('SNOWY_MODULE_UNFOLD_OPEN'))
+
+	// 主题
+	const theme = ref(getCacheConfig('SNOWY_THEME'))
+	// 主题颜色
+	const themeColor = ref(toolDataGet('SNOWY_THEME_COLOR') || config.COLOR)
+	// 整体表单风格
+	const formStyle = ref(getCacheConfig('SNOWY_FORM_STYLE'))
+	// 用户信息
+	const userInfo = ref(toolDataGet('USER_INFO') || {})
+	// 系统配置
+	const sysBaseConfig = ref(toolDataGet('SNOWY_SYS_BASE_CONFIG') || config.SYS_BASE_CONFIG)
+	// 默认应用
+	const module = ref(getCacheConfig('SNOWY_MENU_MODULE_ID'))
+
+	// 定义action
+	const setIsMobile = (key) => {
+		isMobile.value = key
+	}
+	const setLayout = (key) => {
+		layout.value = key
+	}
+	const setTheme = (key) => {
+		theme.value = key
+		const closeMessage = message.loading(`加载中...`)
+		changeColor(themeColor.value, key).then(closeMessage)
+	}
+	const setThemeColor = (key) => {
+		themeColor.value = key
+		const closeMessage = message.loading(`加载中...`)
+		changeColor(key, theme.value).then(closeMessage)
+	}
+	const initTheme = () => {
+		const closeMessage = message.loading(`加载中...`)
+		changeColor(themeColor.value, theme.value).then(closeMessage)
+	}
+	const toggleConfig = (key) => {
+		switch (key) {
+			case 'menuIsCollapse':
+				menuIsCollapse.value = !menuIsCollapse.value
+				break
+			case 'topHeaderThemeColorSpread':
+				topHeaderThemeColorSpread.value = !topHeaderThemeColorSpread.value
+				break
+			case 'sideUniqueOpen':
+				sideUniqueOpen.value = !sideUniqueOpen.value
+				break
+			case 'layoutTagsOpen':
+				layoutTagsOpen.value = !layoutTagsOpen.value
+				break
+			case 'breadcrumbOpen':
+				breadcrumbOpen.value = !breadcrumbOpen.value
+				break
+			case 'topHeaderThemeColorOpen':
+				topHeaderThemeColorOpen.value = !topHeaderThemeColorOpen.value
+				topHeaderThemeColorSpread.value = topHeaderThemeColorOpen.value
+					? topHeaderThemeColorSpread.value
+					: topHeaderThemeColorOpen.value
+				break
+			case 'moduleUnfoldOpen':
+				moduleUnfoldOpen.value = !moduleUnfoldOpen.value
+				break
+		}
+	}
+	const setFormStyle = (key) => {
+		formStyle.value = key
+	}
+	const setUserInfo = (key) => {
+		userInfo.value = key
+	}
+	const setSysBaseConfig = (key) => {
+		sysBaseConfig.value = key
+	}
+	const setModule = (key) => {
+		module.value = key
+	}
+	return {
+		isMobile,
+		layout,
+		menuIsCollapse,
+		sideUniqueOpen,
+		layoutTagsOpen,
+		breadcrumbOpen,
+		topHeaderThemeColorOpen,
+		topHeaderThemeColorSpread,
+		moduleUnfoldOpen,
+		theme,
+		themeColor,
+		formStyle,
+		userInfo,
+		sysBaseConfig,
+		module,
+		setIsMobile,
+		setLayout,
+		setTheme,
+		setThemeColor,
+		initTheme,
+		toggleConfig,
+		setFormStyle,
+		setUserInfo,
+		setSysBaseConfig,
+		setModule
+	}
+})
+
+export const useGlobalStore = globalStore

src/store/iframe.js

@@ -0,0 +1,58 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { defineStore } from 'pinia'
+
+export const iframeStore = defineStore('iframe', () => {
+	// 定义state
+	const iframeList = ref([])
+	const setIframeList = (route) => {
+		iframeList.value = []
+		iframeList.value.push(route)
+	}
+
+	// 定义action
+	const pushIframeList = (route) => {
+		const target = iframeList.value.find((item) => item.path === route.path)
+		if (!target) {
+			iframeList.value.push(route)
+		}
+	}
+	const removeIframeList = (route) => {
+		iframeList.value.forEach((item, index) => {
+			if (item.path === route.path) {
+				iframeList.value.splice(index, 1)
+			}
+		})
+	}
+	const refreshIframe = (route) => {
+		iframeList.value.forEach((item) => {
+			if (item.path === route.path) {
+				const url = route.meta.url
+				item.meta.url = ''
+				setTimeout(() => {
+					item.meta.url = url
+				}, 200)
+			}
+		})
+	}
+	const clearIframeList = () => {
+		iframeList.value = []
+	}
+
+	return {
+		iframeList,
+		setIframeList,
+		pushIframeList,
+		removeIframeList,
+		refreshIframe,
+		clearIframeList
+	}
+})

src/store/index.js

@@ -0,0 +1,5 @@
+export * from './global'
+export * from './search'
+export * from './iframe'
+export * from './keepAlive'
+export * from './viewTags'

src/store/keepAlive.js

@@ -0,0 +1,55 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { defineStore } from 'pinia'
+
+export const keepAliveStore = defineStore('keepAlive', () => {
+	// 定义state
+	const keepLiveRoute = ref([])
+	const routeKey = ref(null)
+	const routeShow = ref(true)
+
+	// 定义action
+	const pushKeepLive = (component) => {
+		if (!keepLiveRoute.value.includes(component)) {
+			keepLiveRoute.value.push(component)
+		}
+	}
+	const removeKeepLive = (component) => {
+		const index = keepLiveRoute.value.indexOf(component)
+		if (index !== -1) {
+			keepLiveRoute.value.splice(index, 1)
+		}
+	}
+	const clearKeepLive = () => {
+		keepLiveRoute.value = []
+	}
+	const setRouteKey = (key) => {
+		routeKey.value = key
+	}
+	const setRouteShow = (key) => {
+		routeShow.value = key
+	}
+	const setRouteKeyAction = (key) => {
+		setRouteKey(key)
+	}
+
+	return {
+		keepLiveRoute,
+		routeKey,
+		routeShow,
+		pushKeepLive,
+		removeKeepLive,
+		clearKeepLive,
+		setRouteKey,
+		setRouteShow,
+		setRouteKeyAction
+	}
+})

src/store/search.js

@@ -0,0 +1,63 @@
+import '@/utils/objects'
+import { defineStore } from 'pinia'
+
+export const searchStore = defineStore('search', () => {
+	// 定义state
+	const pool = ref([])
+	const hotkey = ref({
+		open: 's',
+		close: 'esc'
+	})
+	const active = ref(false)
+
+	// 定义action
+	const toggleActive = () => {
+		active.value = !active.value
+	}
+	const setActive = (val) => {
+		active.value = val
+	}
+	const init = (menu) => {
+		const poolList = []
+		const getFullName = function (meta) {
+			if (meta.breadcrumb) {
+				let list = []
+				meta.breadcrumb.forEach((item) => {
+					list.push(item.meta.title)
+				})
+				return list.join(' / ')
+			}
+			return meta.title
+		}
+		const push = function (menu) {
+			menu.forEach((m) => {
+				if ('menu' === m.meta.type) {
+					if (m.children) {
+						push(m.children)
+					} else if (m.children === null) {
+						poolList.push({
+							icon: m.meta.icon,
+							path: m.path,
+							fullPath: m.path,
+							name: m.meta.title,
+							fullName: getFullName(m.meta),
+							namePinyin: m.meta.title.toPinyin(),
+							namePinyinFirst: m.meta.title.toPinyin(true)
+						})
+					}
+				}
+			})
+		}
+		push(menu)
+		pool.value = poolList
+	}
+
+	return {
+		pool,
+		hotkey,
+		active,
+		toggleActive,
+		setActive,
+		init
+	}
+})

src/store/sysBaseConfig.js

@@ -0,0 +1,40 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import configApi from '@/api/dev/configApi'
+import { message } from 'ant-design-vue'
+
+const formData = ref({
+	SNOWY_SYS_LOGO: '',
+	SNOWY_SYS_BACK_IMAGE: '',
+	SNOWY_SYS_NAME: '',
+	SNOWY_SYS_VERSION: '',
+	SNOWY_SYS_COPYRIGHT: '',
+	SNOWY_SYS_COPYRIGHT_URL: '',
+	SNOWY_SYS_DEFAULT_FILE_ENGINE: 'LOCAL',
+	SNOWY_SYS_DEFAULT_CAPTCHA_OPEN: false,
+	SNOWY_SYS_DEFAULT_PASSWORD: ''
+})
+
+const param = {
+	category: 'SYS_BASE'
+}
+
+const getSysBaseConfig = () => {
+	configApi.configList(param).then((data) => {
+		if (data) {
+			data.forEach((item) => {
+				formData.value[item.configKey] = item.configValue ? '' : item.configValue
+			})
+		} else {
+			message.warning('表单项不存在，请初始化数据库')
+		}
+	})
+}

src/store/viewTags.js

@@ -0,0 +1,68 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { defineStore } from 'pinia'
+
+export const viewTagsStore = defineStore('viewTags', () => {
+	// 定义state
+	const viewTags = ref([])
+
+	// 定义action
+	const pushViewTags = (route) => {
+		const target = viewTags.value.find((item) => item.path === route.path)
+		const isName = route.name
+		if (!target && isName) {
+			viewTags.value.push(route)
+		}
+		if (target) {
+			viewTags.value.forEach((item, index) => {
+				if (item.path === route.path) {
+					viewTags.value[index] = { ...route, ...item }
+					// Object.assign(item, route)
+				}
+			})
+		}
+	}
+	const removeViewTags = (route) => {
+		viewTags.value.forEach((item, index) => {
+			if (item.fullPath === route.fullPath) {
+				viewTags.value.splice(index, 1)
+			}
+		})
+	}
+	const updateViewTags = (route) => {
+		viewTags.value.forEach((item, index) => {
+			if (item.fullPath === route.fullPath) {
+				viewTags.value[index] = { ...route, ...item }
+				// Object.assign(item, route)
+			}
+		})
+	}
+	const updateViewTagsTitle = (title = '') => {
+		const nowFullPath = location.hash.substring(1)
+		viewTags.value.forEach((item) => {
+			if (item.fullPath === nowFullPath) {
+				item.meta.title = title
+			}
+		})
+	}
+	const clearViewTags = () => {
+		viewTags.value = []
+	}
+
+	return {
+		viewTags,
+		pushViewTags,
+		removeViewTags,
+		updateViewTags,
+		updateViewTagsTitle,
+		clearViewTags
+	}
+})

src/utils/enum.js

@@ -0,0 +1,15 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+export const ThemeModeEnum = {
+	LIGHT: 'light',
+	DARK: 'dark',
+	REAL_DARK: 'realDark'
+}

src/utils/objects.js

@@ -0,0 +1,39 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import pinyin from 'js-pinyin'
+
+// 中文转拼音 传入仅首字母
+Object.defineProperty(String.prototype, 'toPinyin', {
+	writable: false,
+	enumerable: false,
+	configurable: true,
+	value: function (first) {
+		let str = this
+		if (first) {
+			return pinyin.getCamelChars(str).replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, '')
+		}
+		return pinyin.getFullChars(str).replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, '')
+	}
+})
+
+// 字符检索 传入检索值
+Object.defineProperty(String.prototype, 'filter', {
+	writable: false,
+	enumerable: false,
+	configurable: true,
+	value: function (input) {
+		let str = this
+		let en = str.toLowerCase().includes(input.toLowerCase())
+		let zhFull = str.toPinyin().toLowerCase().includes(input.toLowerCase())
+		let zhFirst = str.toPinyin(true).toLowerCase().includes(input.toLowerCase())
+		return en || zhFull || zhFirst
+	}
+})

src/utils/request.ts

@@ -96,7 +96,7 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
                 response.data.code === 'A0000' ||
                 response.data.type === 'application/json' ||
                 Array.isArray(response.data) ||
-                response.data.size 
+                response.data.size
                 // ||
                 // response.data.type === 'application/octet-stream' ||
                 // response.data.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -228,6 +228,37 @@ export function requestPayload(method: Method, data: anyObj) {
         }
     }
 }
+// 适配器, 用于适配不同的请求方式
+export function baseRequest(url, value = {}, method = 'post', options = {}) {
+    url = sysConfig.API_URL + url
+    if (method === 'post') {
+        return service.post(url, value, options)
+    } else if (method === 'get') {
+        return service.get(url, { params: value, ...options })
+    } else if (method === 'formdata') {
+        // form-data表单提交的方式
+        return service.post(url, qs.stringify(value), {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            },
+            ...options
+        })
+    } else {
+        // 其他请求方式，例如：put、delete
+        return service({
+            method: method,
+            url: url,
+            data: value,
+            ...options
+        })
+    }
+}
+// 模块内的请求, 会自动加上模块的前缀
+export const moduleRequest =
+	(moduleUrl) =>
+	(url, ...arg) => {
+		return baseRequest(moduleUrl + url, ...arg)
+	}
 
 interface LoadingInstance {
     target: any

src/utils/themeUtil.js

@@ -0,0 +1,81 @@
+/**
+ *  Copyright [2022] [https://www.xiaonuo.vip]
+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
+ *	1.请不要删除和修改根目录下的LICENSE文件。
+ *	2.请不要删除和修改Snowy源码头部的版权声明。
+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
+ */
+import { generate } from '@ant-design/colors'
+import tool from '../utils/tool'
+import config from '../config'
+import { ThemeModeEnum } from './enum'
+
+const changeColor = (newPrimaryColor, theme, darkClass = 'snowy-theme-dark') => {
+	return new Promise((resolve) => {
+		const themeEleId = 'snowy-theme-var'
+		const themeEle = document.querySelector(`#${themeEleId}`)
+		if (themeEle && themeEle.parentNode) {
+			themeEle.parentNode.removeChild(themeEle)
+		}
+		const isRealDark = theme === ThemeModeEnum.REAL_DARK
+		if (newPrimaryColor) {
+			const colors = generate(newPrimaryColor, isRealDark ? { theme: 'dark' } : {})
+			const rootClass = isRealDark ? `.${darkClass}` : ':root'
+			const styleElement = document.createElement('style')
+			styleElement.id = themeEleId
+			styleElement.setAttribute('type', 'text/css')
+			styleElement.innerHTML = `${rootClass}{${colors
+				.map((c, i) => {
+					return `--primary-${i + 1}:${c};`
+				})
+				.concat([`--primary-color:${newPrimaryColor};`])
+				.join('')}}`
+			document.head.appendChild(styleElement)
+		} else {
+			document.body.removeAttribute('snowy-theme')
+		}
+		if (isRealDark) {
+			document.body.classList.add(darkClass)
+		} else {
+			document.body.classList.remove(darkClass)
+		}
+		resolve()
+	})
+}
+
+const loadLocalTheme = (localSetting) => {
+	if (localSetting) {
+		let { theme, themeColor } = localSetting
+		themeColor = themeColor || config.COLOR
+		theme = theme || config.THEME
+		changeColor(themeColor, theme)
+	}
+}
+
+/**
+ * 获取本地保存的配置
+ * @param loadTheme {boolean} 是否加载配置中的主题
+ * @returns {Object}
+ */
+const getLocalSetting = (loadTheme) => {
+	let localSetting = {}
+	try {
+		const theme = tool.data.get('SNOWY_THEME')
+		const themeColor = tool.data.get('SNOWY_THEME_COLOR')
+		localSetting = {
+			theme,
+			themeColor
+		}
+	} catch (e) {
+		console.error(e)
+	}
+	if (loadTheme) {
+		loadLocalTheme(localSetting)
+	}
+	return localSetting
+}
+
+export { loadLocalTheme, getLocalSetting, changeColor }

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

@@ -1,43 +1,47 @@
 <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'>
+        <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 === '表单设计'">
+                                <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 === '模型设计'">
+                                <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 === '完成'">
+                                <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'>
+                <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'>
+                        <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')">
+                        <el-button type="primary" danger ghost style="margin-left: 8px" @click="emit('previousPage')">
                             <template #icon>
                                 <Close />
                             </template>
@@ -47,28 +51,32 @@
             </el-row>
         </el-card>
 
-        <div v-if='current === 0'>
-            <!--			<form-design ref="formDesign" v-if="recordData.formType === 'DESIGN'" :form-value="workFlowParame.formValue" />-->
+        <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' />
+            <model-design ref="modelDesign" />
         </div>
-        <div v-if='current === 1'>
-            <model-design ref='modelDesign' v-if="recordData.formType === 'DESIGN'" />
+        <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='此时您可以一键部署此流程啦'>
+                <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'>
+                        <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'
+                                v-if="current == steps.length - 1"
+                                type="primary"
+                                :loading="submitLoading"
+                                @click="seveDeployment"
                             >
                                 <template #icon>
                                     <Tools />
@@ -80,22 +88,22 @@
                 </el-result>
             </el-card>
         </div>
-        <div v-if='current === 2'>
+        <div v-if="current === 2">
             <el-card>
-                <el-result status='success' title='操作成功' sub-title='此时您可以一键部署此流程啦'>
+                <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'>
+                        <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'
+                                v-if="current == steps.length - 1"
+                                type="primary"
+                                :loading="submitLoading"
+                                @click="seveDeployment"
                             >
                                 <template #icon>
                                     <Tools />
@@ -114,14 +122,16 @@ 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 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 formDesign = ref(null)
 const modelDesign = ref(null)
 
 const recordData = ref({})
@@ -144,9 +154,10 @@ const workFlowParame = {
     modelValue: cloneDeep(config.nodeModel.node)
 }
 // 打开这个界面
-const configSteps = (record) => {
+const configSteps = record => {
     // 全局赋值
     recordData.value = record
+    console.log(record, '------')
     workFlowParame.formValue = record.formJson == null ? false : JSON.parse(record.formJson)
     if (record.processJson == null) {
         // 给模型设计器基础外壳给值
@@ -174,26 +185,34 @@ const configSteps = (record) => {
 
         // 装回全局模型中
         workFlowParame.modelValue.childNode = startEventNode
+        //这里是流程需要的数据
+        console.log(workFlowParame.modelValue.childNode.childNode, '打印组装数据')
     } else {
         workFlowParame.modelValue = JSON.parse(record.processJson)
     }
+    console.log('给流程设计器给值' + 22222)
     // 判断表单类型
-    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)
-        })
-    }
+    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 = () => {
@@ -201,7 +220,7 @@ const next = () => {
     // 判断是哪一步
     if (current.value === 1) {
         if (recordData.value.formType === 'DESIGN') {
-            // formDesignNext()
+            formDesignNext()
         } else {
             modelDesignNext()
         }
@@ -210,19 +229,19 @@ const next = () => {
         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 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()
     // 这里完成之后，需要调用保存接口，传给后端
@@ -234,8 +253,7 @@ const modelDesignNext = () => {
     }
     recordData.value.processJson = JSON.stringify(workFlowParame.modelValue)
     // 保存进去
-    modelApi.submitForm(recordData.value, recordData.value.id).then(() => {
-    })
+    modelApi.submitForm(recordData.value, recordData.value.id).then(() => {})
 }
 // 上一步
 const prev = () => {
@@ -243,7 +261,7 @@ const prev = () => {
     if (current.value === 0) {
         nextTick(() => {
             if (recordData.value.formType === 'DESIGN') {
-                // formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
+                formDesign.value.setValue(workFlowParame.formValue, JSON.parse(recordData.value.tableJson))
             } else {
                 modelDesign.value.setValue(workFlowParame, recordData.value)
                 modelDesign.value.setFormFieldListValue(workFlowParame.formValue.list)
@@ -278,10 +296,10 @@ const seveDeployment = () => {
         })
 }
 // 表单设计器选择好的内容校验
-const formDataVerification = (formValue) => {
+const formDataVerification = formValue => {
     let error = 0
     // 判断是否包含动态表格batch
-    if (formValue.list.length > 0) {
+    if (formValue && formValue.list && formValue.list.length > 0) {
         for (let i = 0; i < formValue.list.length; i++) {
             const items = formValue.list[i]
             // 处理判断动态表格中
@@ -328,7 +346,7 @@ const formDataVerification = (formValue) => {
     return error === 0
 }
 // 模型整体校验
-const modelDataVerification = (modelValue) => {
+const modelDataVerification = modelValue => {
     if (JSON.stringify(modelValue).indexOf('dataLegal":false') !== -1) {
         ElMessage.warning('流程未配置完成')
         return false
@@ -345,11 +363,12 @@ defineComponent({
 </script>
 <style scoped>
 .steps-card {
-    margin-top: -12px;
+    /* margin-top: -12px;
     margin-left: -12px;
     margin-right: -12px;
     margin-bottom: 10px;
-    padding-top: -10px;
+    padding-top: -10px; */
+    /* width: 100%; */
 }
 
 .steps-action {

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

@@ -0,0 +1,92 @@
+<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,36 +1,28 @@
 <!--流程模型表单页面-->
 <template>
-  <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>
-
+    <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>
+<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'
@@ -41,151 +33,170 @@ 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 ''
+    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()
+                        })
+                    }
+                }
+            ]
         }
-      }
-    },
-    {
-      title: '表单类型', minWidth: '160', field: 'formType',
-      formatter: (obj: any) => {
-        const val = obj.row.formType
-        if (val == 'DESIGN') {
-          return '系统表单'
-        } else {
-          return ''
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
         }
-      }
-    },
-    { 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('新增模型')
+}
+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()
+    // 加载数据
+    tableStore.index()
 })
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

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

@@ -1,5 +1,7 @@
 <template>
 	<el-card>
+		<!-- 引入workflow组件的位置{{ modelDesignData }}222 -->
+		<!-- {{ modelDesignData.modelValue }} -->
 		<Workflow
 			v-model="modelDesignData.modelValue"
 			:form-field-list-value="formFieldListValue"
@@ -16,6 +18,7 @@
 <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'
@@ -53,7 +56,8 @@
 
 	// 回显值
 	const setValue = (value, record) => {
-		modelDesignData.value = value
+		console.log('获取回显值'+value,record,"+++++++++++--------");
+		modelDesignData.value = JSON.parse(JSON.stringify(value))?JSON.parse(JSON.stringify(value)):{};
 		recordData.value = record
 		// 获取序列号列表
         flwTemplateSnSelector().then((data) => {
@@ -76,7 +80,7 @@
 		})
 		// 获取执行监听器数据
         executionListenerSelector().then((data) => {
-			executionListenerArray.value = data.map((item) => {
+			executionListenerArray.value = data.data.map((item) => {
 				return {
 					label: item,
 					value: item
@@ -85,7 +89,8 @@
 		})
 		// 获取自定义事件执行监听器选择器
         executionListenerSelectorForCustomEvent().then((data) => {
-			executionListenerSelectorForCustomEventArray.value = data.map((item) => {
+			console.log(data,"00000000000");
+			executionListenerSelectorForCustomEventArray.value = data.data.map((item) => {
 				return {
 					label: item,
 					value: item
@@ -94,7 +99,7 @@
 		})
 		// 获取任务监听器数据
         taskListenerSelector().then((data) => {
-			taskListenerArray.value = data.map((item) => {
+			taskListenerArray.value = data.data.map((item) => {
 				return {
 					label: item,
 					value: item
@@ -156,6 +161,7 @@
 			})
 		}
 	}
+
 	// 抛出钩子
 	defineExpose({
 		getValue,