diff --git a/README.md b/README.md
index d629543fff676b63d07d5e9dc2b08036486fca02..a21251927ab137d5812b67d4c36a5d25167b735a 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,32 @@
 ### 项目介绍
-星云ERP是基于SpringBoot框架的中小企业完全开源的ERP。
+
+星云 ERP 是基于 SpringBoot 框架的中小企业完全开源的 ERP。
 
 ### 环境版本说明
-* nodejs v20.17.0
-* npm 10.8.2
-* pnpm 9.7.1
-> pnpm安装命令：npm install -g pnpm@9.7.1
+
+- nodejs v20.17.0
+- npm 10.8.2
+- pnpm 9.7.1
+  > pnpm 安装命令：npm install -g pnpm@9.7.1
 
 ### 主要技术框架
-* Vue 3.3.4
-* ant-design-vue 4.0.7
-* vxe-table 4.4.5
-* vue-vben-admin
+
+- Vue 3.3.4
+- ant-design-vue 4.0.7
+- vxe-table 4.4.5
+- vue-vben-admin
 
 ### License
-项目使用Apache 2.0许可证，请遵守此许可证的限制条件。
+
+项目使用 Apache 2.0 许可证，请遵守此许可证的限制条件。
 
 ### 其他说明
-* 作者是一个只有几年开发经验的后端开发人员，如有错误之处，望斧正。
-* 后端项目Gitee地址：[点此进入][xingyunGitee]
+
+- 作者是一个只有几年开发经验的后端开发人员，如有错误之处，望斧正。
+- 后端项目 Gitee 地址：[点此进入][xingyunGitee]
 
 ### 注意事项
-老版项目基于ElementUI，已转移到v1分支。
-Vue2项目已转移至v3分支。
+
+老版项目基于 ElementUI，已转移到 v1 分支。 Vue2 项目已转移至 v3 分支。
 
 [xingyunGitee]: https://gitee.com/lframework/xingyun
diff --git a/package.json b/package.json
index 02b21623c0b031b90b04dabd36eb47ae021f3d57..a46a71bb1cda797af7fd5ae38b12025a0e89755b 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "esbuild": "^0.23.0",
     "exceljs": "^4.3.0",
     "js-pinyin": "^0.2.5",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mathjs": "^11.11.2",
     "mockjs": "^1.1.0",
@@ -111,7 +112,7 @@
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",
-    "vue-router": "^4.2.3",
+    "vue-router": "4.0.14",
     "vue-types": "^5.1.0",
     "vuedraggable": "^4.1.0",
     "vxe-pc-ui": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ee485498b3fb81a61441ac8b69caac30c130eeb..c8fe879615a07cfc0c8d8e14d37da170e2b5e9a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       js-pinyin:
         specifier: ^0.2.5
         version: 0.2.7
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -138,8 +141,8 @@ importers:
         specifier: ^2.2.4
         version: 2.4.0(vue@3.4.38(typescript@5.5.4))
       vue-router:
-        specifier: ^4.2.3
-        version: 4.4.3(vue@3.4.38(typescript@5.5.4))
+        specifier: 4.0.14
+        version: 4.0.14(vue@3.4.38(typescript@5.5.4))
       vue-types:
         specifier: ^5.1.0
         version: 5.1.3(vue@3.4.38(typescript@5.5.4))
@@ -4314,6 +4317,7 @@ packages:
 
   lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
 
   lodash.groupby@4.6.0:
     resolution: {integrity: sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==}
@@ -4323,6 +4327,7 @@ packages:
 
   lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
   lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
@@ -6334,8 +6339,8 @@ packages:
     peerDependencies:
       vue: '>=3.0.0'
 
-  vue-router@4.4.3:
-    resolution: {integrity: sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==}
+  vue-router@4.0.14:
+    resolution: {integrity: sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw==}
     peerDependencies:
       vue: ^3.2.0
 
@@ -13370,7 +13375,7 @@ snapshots:
     dependencies:
       vue: 3.4.38(typescript@5.5.4)
 
-  vue-router@4.4.3(vue@3.4.38(typescript@5.5.4)):
+  vue-router@4.0.14(vue@3.4.38(typescript@5.5.4)):
     dependencies:
       '@vue/devtools-api': 6.6.3
       vue: 3.4.38(typescript@5.5.4)
diff --git a/src/api/base-data/print-template/index.ts b/src/api/base-data/print-template/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b5a700aaa4725820d6827df44e27a884bd7fedd
--- /dev/null
+++ b/src/api/base-data/print-template/index.ts
@@ -0,0 +1,152 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageResult } from '@/api/model/pageResult';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+import { UpdatePrintTemplateVo } from '@/api/base-data/print-template/model/updatePrintTemplateVo';
+import { CreatePrintTemplateVo } from '@/api/base-data/print-template/model/createPrintTemplateVo';
+import { GetPrintTemplateBo } from '@/api/base-data/print-template/model/getPrintTemplateBo';
+import { QueryPrintTemplateVo } from '@/api/base-data/print-template/model/queryPrintTemplateVo';
+import { QueryPrintTemplateBo } from '@/api/base-data/print-template/model/queryPrintTemplateBo';
+import { GetPrintTemplateSettingBo } from '@/api/base-data/print-template/model/getPrintTemplateSettingBo';
+import { UpdatePrintTemplateSettingVo } from '@/api/base-data/print-template/model/updatePrintTemplateSettingVo';
+import { UpdatePrintTemplateDemoDataVo } from '@/api/base-data/print-template/model/updatePrintTemplateDemoDataVo';
+import { GetPrintTemplateCompSettingBo } from '@/api/base-data/print-template/model/getPrintTemplateCompSettingBo';
+
+const baseUrl = '/basedata/print/template';
+const region = 'cloud-api';
+
+/**
+ * 查询列表
+ */
+export function query(params: QueryPrintTemplateVo): Promise<PageResult<QueryPrintTemplateBo>> {
+  return defHttp.get<PageResult<QueryPrintTemplateBo>>(
+    {
+      url: baseUrl + '/query',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 根据ID查询
+ * @param id
+ */
+export function get(id: string): Promise<GetPrintTemplateBo> {
+  return defHttp.get<GetPrintTemplateBo>(
+    {
+      url: baseUrl,
+      params: {
+        id: id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 新增
+ * @param data
+ */
+export function create(data: CreatePrintTemplateVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
+
+/**
+ * 修改
+ * @param data
+ */
+export function update(data: UpdatePrintTemplateVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
+
+/**
+ * 查询设置
+ * @param id
+ */
+export function getSetting(id: string): Promise<GetPrintTemplateSettingBo> {
+  return defHttp.get<GetPrintTemplateSettingBo>(
+    {
+      url: baseUrl + '/setting',
+      params: {
+        id: id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 修改设置
+ * @param data
+ */
+export function updateSetting(data: UpdatePrintTemplateSettingVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl + '/setting',
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
+
+/**
+ * 修改示例数据
+ * @param data
+ */
+export function updateDemoData(data: UpdatePrintTemplateDemoDataVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl + '/setting/demo',
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
+
+/**
+ * 查询组件设置
+ * @param id
+ */
+export function getTemplateComp(id: string): Promise<GetPrintTemplateCompSettingBo[]> {
+  return defHttp.get<GetPrintTemplateCompSettingBo[]>(
+    {
+      url: baseUrl + '/setting/comp',
+      params: {
+        id: id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
diff --git a/src/api/base-data/print-template/model/createPrintTemplateVo.ts b/src/api/base-data/print-template/model/createPrintTemplateVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffc96f7eba3e1742a39b013ab4744153820fc988
--- /dev/null
+++ b/src/api/base-data/print-template/model/createPrintTemplateVo.ts
@@ -0,0 +1,6 @@
+export interface CreatePrintTemplateVo {
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/base-data/print-template/model/getPrintTemplateBo.ts b/src/api/base-data/print-template/model/getPrintTemplateBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba452bde6c9904fbbb6373effacab8a06c6660d5
--- /dev/null
+++ b/src/api/base-data/print-template/model/getPrintTemplateBo.ts
@@ -0,0 +1,11 @@
+export interface GetPrintTemplateBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/base-data/print-template/model/getPrintTemplateCompSettingBo.ts b/src/api/base-data/print-template/model/getPrintTemplateCompSettingBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a50c9c09494651730a0a14e2cb7a1730770a1d03
--- /dev/null
+++ b/src/api/base-data/print-template/model/getPrintTemplateCompSettingBo.ts
@@ -0,0 +1,11 @@
+export interface GetPrintTemplateCompSettingBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 组件配置
+   */
+  compJson: object;
+}
diff --git a/src/api/base-data/print-template/model/getPrintTemplateSettingBo.ts b/src/api/base-data/print-template/model/getPrintTemplateSettingBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a48ff5cc18c6dd36cad44fa22d71e882cb98284c
--- /dev/null
+++ b/src/api/base-data/print-template/model/getPrintTemplateSettingBo.ts
@@ -0,0 +1,21 @@
+export interface GetPrintTemplateSettingBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * JSON配置
+   */
+  templateJson: object;
+
+  /**
+   * 示例数据
+   */
+  demoData: object;
+
+  /**
+   * 附加组件配置
+   */
+  compJsonList: object[];
+}
diff --git a/src/api/base-data/print-template/model/queryPrintTemplateBo.ts b/src/api/base-data/print-template/model/queryPrintTemplateBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e301fae97bd27245eb013e748963dee9f0095297
--- /dev/null
+++ b/src/api/base-data/print-template/model/queryPrintTemplateBo.ts
@@ -0,0 +1,31 @@
+export interface QueryPrintTemplateBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 创建人
+   */
+  createBy: string;
+
+  /**
+   * 创建时间
+   */
+  createTime: string;
+
+  /**
+   * 修改人
+   */
+  updateBy: string;
+
+  /**
+   * 修改时间
+   */
+  updateTime: string;
+}
diff --git a/src/api/base-data/print-template/model/queryPrintTemplateVo.ts b/src/api/base-data/print-template/model/queryPrintTemplateVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d01d52f716a1506bf88d6ed5f8d1e51d9935494d
--- /dev/null
+++ b/src/api/base-data/print-template/model/queryPrintTemplateVo.ts
@@ -0,0 +1,8 @@
+import { SortPageVo } from '@/api/model/sortPageVo';
+
+export interface QueryPrintTemplateVo extends SortPageVo {
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/base-data/print-template/model/updatePrintTemplateDemoDataVo.ts b/src/api/base-data/print-template/model/updatePrintTemplateDemoDataVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d29f859a4fe2e1ee52e916c60f433a776789bb5d
--- /dev/null
+++ b/src/api/base-data/print-template/model/updatePrintTemplateDemoDataVo.ts
@@ -0,0 +1,11 @@
+export interface UpdatePrintTemplateDemoDataVo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 示例数据
+   */
+  demoData: string;
+}
diff --git a/src/api/base-data/print-template/model/updatePrintTemplateSettingVo.ts b/src/api/base-data/print-template/model/updatePrintTemplateSettingVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a04cd2f68350c597f824b960a31e885ba1c8dce
--- /dev/null
+++ b/src/api/base-data/print-template/model/updatePrintTemplateSettingVo.ts
@@ -0,0 +1,11 @@
+export interface UpdatePrintTemplateSettingVo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * JSON配置
+   */
+  templateJson: string;
+}
diff --git a/src/api/base-data/print-template/model/updatePrintTemplateVo.ts b/src/api/base-data/print-template/model/updatePrintTemplateVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..343edaffebd2e2fa568f9e0f00cd3695d28be372
--- /dev/null
+++ b/src/api/base-data/print-template/model/updatePrintTemplateVo.ts
@@ -0,0 +1,11 @@
+export interface UpdatePrintTemplateVo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/bpm/flow/definition/index.ts b/src/api/bpm/flow/definition/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b1c81ce17a6b0424136f251bbfb1bf8837bec17
--- /dev/null
+++ b/src/api/bpm/flow/definition/index.ts
@@ -0,0 +1,186 @@
+import { defHttp } from '@/utils/http/axios';
+import { QueryFlowDefinitionVo } from '@/api/bpm/flow/definition/model/queryFlowDefinitionVo';
+import { PageResult } from '@/api/model/pageResult';
+import { QueryFlowDefinitionBo } from '@/api/bpm/flow/definition/model/queryFlowDefinitionBo';
+import { CreateFlowDefinitionVo } from '@/api/bpm/flow/definition/model/createFlowDefinitionVo';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+import { SetFlowDefinitionPublishVo } from '@/api/bpm/flow/definition/model/setFlowDefinitionPublishVo';
+import { UpdateFlowDefinitionVo } from '@/api/bpm/flow/definition/model/updateFlowDefinitionVo';
+import { FlowDefinitionSelectorVo } from '@/api/bpm/flow/definition/model/flowDefinitionSelectorVo';
+import { FlowDefinitionSelectorBo } from '@/api/bpm/flow/definition/model/flowDefinitionSelectorBo';
+
+const baseUrl = '/flow/definition';
+const selectorBaseUrl = '/selector/bpm';
+const region = 'cloud-api';
+
+/**
+ * 查询列表
+ */
+export function query(params: QueryFlowDefinitionVo): Promise<PageResult<QueryFlowDefinitionBo>> {
+  return defHttp.get<PageResult<QueryFlowDefinitionBo>>(
+    {
+      url: baseUrl + '/query',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 查询详情
+ * @param id
+ */
+export function detail(id: string): Promise<void> {
+  return defHttp.get<void>(
+    {
+      url: baseUrl + '/detail',
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 新增
+ * @param data
+ */
+export function create(data: CreateFlowDefinitionVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
+
+/**
+ * 修改
+ * @param data
+ */
+export function update(data: UpdateFlowDefinitionVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
+
+/**
+ * 设置发布状态
+ * @param data
+ */
+export function setPublishStatus(data: SetFlowDefinitionPublishVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/publish',
+      data,
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
+
+/**
+ * 设置激活状态
+ * @param data
+ */
+export function setActivityStatus(data: SetFlowDefinitionPublishVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/activity',
+      data,
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
+
+/**
+ * 复制流程
+ * @param data
+ */
+export function copy(data: UpdateFlowDefinitionVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/copy',
+      data,
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
+
+/**
+ * 根据ID删除
+ * @param data
+ */
+export function deleteById(id: string): Promise<void> {
+  return defHttp.delete<void>(
+    {
+      url: baseUrl,
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
+
+/**
+ * 选择器
+ * @param params
+ */
+export function selector(
+  params: FlowDefinitionSelectorVo,
+): Promise<PageResult<FlowDefinitionSelectorBo>> {
+  return defHttp.get<PageResult<FlowDefinitionSelectorBo>>(
+    {
+      url: selectorBaseUrl + '/flow/definition',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 加载流程定义
+ * @param ids
+ */
+export function loadFlowDefinition(ids: string[]): Promise<FlowDefinitionSelectorBo[]> {
+  return defHttp.post<FlowDefinitionSelectorBo[]>(
+    {
+      url: selectorBaseUrl + '/flow/definition/load',
+      data: ids,
+    },
+    {
+      contentType: ContentTypeEnum.JSON,
+      region,
+    },
+  );
+}
diff --git a/src/api/bpm/flow/definition/model/createFlowDefinitionVo.ts b/src/api/bpm/flow/definition/model/createFlowDefinitionVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c780c6a4f9529a59e1ddbd8332abee689afabf3
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/createFlowDefinitionVo.ts
@@ -0,0 +1,14 @@
+export interface CreateFlowDefinitionVo {
+  /**
+   * 编号
+   */
+  code: string;
+  /**
+   * 名称
+   */
+  name: string;
+  /**
+   * 分类ID
+   */
+  categoryId: string;
+}
diff --git a/src/api/bpm/flow/definition/model/detailFlowDefinitionBo.ts b/src/api/bpm/flow/definition/model/detailFlowDefinitionBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46cc283573159220e18c4f895329211d0cf2b4c9
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/detailFlowDefinitionBo.ts
@@ -0,0 +1,22 @@
+export interface DetailFlowDefinitionBo {
+  /**
+   * ID
+   */
+  id: string;
+  /**
+   * 流程编号
+   */
+  flowCode: string;
+  /**
+   * 流程名称
+   */
+  flowName: string;
+  /**
+   * 流程分类ID
+   */
+  categoryId: string;
+  /**
+   * 流程分类
+   */
+  categoryName: string;
+}
diff --git a/src/api/bpm/flow/definition/model/flowDefinitionSelectorBo.ts b/src/api/bpm/flow/definition/model/flowDefinitionSelectorBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a2c3c11c1b395ae3d4727c60a90c9e274a8e806
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/flowDefinitionSelectorBo.ts
@@ -0,0 +1,26 @@
+export interface FlowDefinitionSelectorBo {
+  /**
+   * ID
+   */
+  id: string;
+  /**
+   * 流程编号
+   */
+  flowCode: string;
+  /**
+   * 流程名称
+   */
+  flowName: string;
+  /**
+   * 流程分类
+   */
+  categoryName: string;
+  /**
+   * 版本号
+   */
+  version: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+}
diff --git a/src/api/bpm/flow/definition/model/flowDefinitionSelectorVo.ts b/src/api/bpm/flow/definition/model/flowDefinitionSelectorVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..998156a18168ed1c453989662d980f20af03a5a7
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/flowDefinitionSelectorVo.ts
@@ -0,0 +1,16 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface FlowDefinitionSelectorVo extends PageVo {
+  /**
+   * 流程编号
+   */
+  code: string;
+  /**
+   * 流程名称
+   */
+  name: string;
+  /**
+   * 流程分类ID
+   */
+  categoryId: string;
+}
diff --git a/src/api/bpm/flow/definition/model/queryFlowDefinitionBo.ts b/src/api/bpm/flow/definition/model/queryFlowDefinitionBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f48378d49e301d42351226716c0f8a22588c06e1
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/queryFlowDefinitionBo.ts
@@ -0,0 +1,30 @@
+export interface QueryFlowDefinitionBo {
+  /**
+   * ID
+   */
+  id: string;
+  /**
+   * 流程编号
+   */
+  flowCode: string;
+  /**
+   * 流程名称
+   */
+  flowName: string;
+  /**
+   * 流程分类
+   */
+  category: string;
+  /**
+   * 版本号
+   */
+  version: string;
+  /**
+   * 是否发布
+   */
+  isPublish: number;
+  /**
+   * 激活状态
+   */
+  activityStatus: number;
+}
diff --git a/src/api/bpm/flow/definition/model/queryFlowDefinitionVo.ts b/src/api/bpm/flow/definition/model/queryFlowDefinitionVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a67e5e0c71ca895bc0cca287c3c59797e54968e2
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/queryFlowDefinitionVo.ts
@@ -0,0 +1,28 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface QueryFlowDefinitionVo extends PageVo {
+  /**
+   * 流程编号
+   */
+  code: string;
+  /**
+   * 流程名称
+   */
+  name: string;
+  /**
+   * 流程分类ID
+   */
+  categoryId: string;
+  /**
+   * 版本号
+   */
+  version: string;
+  /**
+   * 是否发布
+   */
+  isPublish: number;
+  /**
+   * 激活状态
+   */
+  activityStatus: number;
+}
diff --git a/src/api/bpm/flow/definition/model/setFlowDefinitionActivityStatusVo.ts b/src/api/bpm/flow/definition/model/setFlowDefinitionActivityStatusVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a4ddcd7c8b457d8b9469ec3c46d6a3f950d69c6
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/setFlowDefinitionActivityStatusVo.ts
@@ -0,0 +1,10 @@
+export interface SetFlowDefinitionActivityStatusVo {
+  /**
+   * 流程定义ID
+   */
+  id: number;
+  /**
+   * 激活状态
+   */
+  activityStatus: number;
+}
diff --git a/src/api/bpm/flow/definition/model/setFlowDefinitionPublishVo.ts b/src/api/bpm/flow/definition/model/setFlowDefinitionPublishVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9fe119557b2b8dc97e0390189fb50359f97abd06
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/setFlowDefinitionPublishVo.ts
@@ -0,0 +1,10 @@
+export interface SetFlowDefinitionPublishVo {
+  /**
+   * 流程定义ID
+   */
+  id: number;
+  /**
+   * 发布状态
+   */
+  isPublish: number;
+}
diff --git a/src/api/bpm/flow/definition/model/updateFlowDefinitionVo.ts b/src/api/bpm/flow/definition/model/updateFlowDefinitionVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1efe51073dd673f2ffba0a07289933e3195c3de1
--- /dev/null
+++ b/src/api/bpm/flow/definition/model/updateFlowDefinitionVo.ts
@@ -0,0 +1,18 @@
+export interface UpdateFlowDefinitionVo {
+  /**
+   * ID
+   */
+  id: number;
+  /**
+   * 编号
+   */
+  code: string;
+  /**
+   * 名称
+   */
+  name: string;
+  /**
+   * 分类ID
+   */
+  categoryId: string;
+}
diff --git a/src/api/bpm/flow/flow-category/index.ts b/src/api/bpm/flow/flow-category/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4413331271002a1aa6a1af381136d94aba32aa8f
--- /dev/null
+++ b/src/api/bpm/flow/flow-category/index.ts
@@ -0,0 +1,92 @@
+import { defHttp } from '@/utils/http/axios';
+import { QueryFlowCategoryTreeBo } from '@/api/bpm/flow/flow-category/model/queryFlowCategoryTreeBo';
+import { DetailFlowCategoryBo } from '@/api/bpm/flow/flow-category/model/detailFlowCategoryBo';
+import { CreateFlowCategoryVo } from '@/api/bpm/flow/flow-category/model/createFlowCategoryVo';
+import { UpdateFlowCategoryVo } from '@/api/bpm/flow/flow-category/model/updateFlowCategoryVo';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+
+const baseUrl = '/flow/category';
+const region = 'cloud-api';
+
+/**
+ * 查询列表
+ */
+export function query(): Promise<QueryFlowCategoryTreeBo[]> {
+  return defHttp.get<QueryFlowCategoryTreeBo[]>(
+    {
+      url: baseUrl + '/query',
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 根据ID查询
+ * @param id
+ */
+export function detail(id: number): Promise<DetailFlowCategoryBo> {
+  return defHttp.get<DetailFlowCategoryBo>(
+    {
+      url: baseUrl + '/detail',
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 创建
+ * @param data
+ */
+export function create(data: CreateFlowCategoryVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 修改
+ * @param data
+ */
+export function update(data: UpdateFlowCategoryVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 根据ID删除
+ * @param id
+ */
+export function deleteById(id: string): Promise<void> {
+  return defHttp.delete<void>(
+    {
+      url: baseUrl,
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
diff --git a/src/api/bpm/flow/flow-category/model/createFlowCategoryVo.ts b/src/api/bpm/flow/flow-category/model/createFlowCategoryVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bac6595e7667294c1a652b5682c62a3fa4234600
--- /dev/null
+++ b/src/api/bpm/flow/flow-category/model/createFlowCategoryVo.ts
@@ -0,0 +1,11 @@
+export interface CreateFlowCategoryVo {
+  /**
+   * 流程类型名称
+   */
+  name: string;
+
+  /**
+   * 父节点ID
+   */
+  parentId: number;
+}
diff --git a/src/api/bpm/flow/flow-category/model/detailFlowCategoryBo.ts b/src/api/bpm/flow/flow-category/model/detailFlowCategoryBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a786e9d4940b70602296bc7a8b6666e3b61a75a9
--- /dev/null
+++ b/src/api/bpm/flow/flow-category/model/detailFlowCategoryBo.ts
@@ -0,0 +1,21 @@
+export interface DetailFlowCategoryBo {
+  /**
+   * ID
+   */
+  id: number;
+
+  /**
+   * 流程类型名称
+   */
+  name: string;
+
+  /**
+   * 父节点ID
+   */
+  parentId: number;
+
+  /**
+   * 父节点名称
+   */
+  parentName: string;
+}
diff --git a/src/api/bpm/flow/flow-category/model/queryFlowCategoryTreeBo.ts b/src/api/bpm/flow/flow-category/model/queryFlowCategoryTreeBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9eed390da3d4a6a7cdb8e6ff2fc3892ae4d2e4b
--- /dev/null
+++ b/src/api/bpm/flow/flow-category/model/queryFlowCategoryTreeBo.ts
@@ -0,0 +1,16 @@
+export interface QueryFlowCategoryTreeBo {
+  /**
+   * ID
+   */
+  id: number;
+
+  /**
+   * 流程类型名称
+   */
+  name: string;
+
+  /**
+   * 父节点ID
+   */
+  parentId: number;
+}
diff --git a/src/api/bpm/flow/flow-category/model/updateFlowCategoryVo.ts b/src/api/bpm/flow/flow-category/model/updateFlowCategoryVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ef7a2162abae21275819c5df4fd3350408f0e37
--- /dev/null
+++ b/src/api/bpm/flow/flow-category/model/updateFlowCategoryVo.ts
@@ -0,0 +1,11 @@
+export interface UpdateFlowCategoryVo {
+  /**
+   * ID
+   */
+  id: number;
+
+  /**
+   * 流程类型名称
+   */
+  name: string;
+}
diff --git a/src/api/bpm/flow/instance/index.ts b/src/api/bpm/flow/instance/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00c25bd4ef295e700e8d07442f3d12ea7619f9d1
--- /dev/null
+++ b/src/api/bpm/flow/instance/index.ts
@@ -0,0 +1,39 @@
+import { defHttp } from '@/utils/http/axios';
+import { QueryBusinessFlowInstanceBo } from '@/api/bpm/flow/instance/model/queryBusinessFlowInstanceBo';
+
+const baseUrl = '/flow/instance';
+const region = 'cloud-api';
+
+/**
+ * 根据业务ID查询
+ */
+export function listBusiness(businessId: string): Promise<QueryBusinessFlowInstanceBo[]> {
+  return defHttp.get<QueryBusinessFlowInstanceBo[]>(
+    {
+      url: baseUrl + '/list/business',
+      params: {
+        businessId,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 根据ID查询状态
+ */
+export function getStatus(id: string): Promise<string> {
+  return defHttp.get<string>(
+    {
+      url: baseUrl + '/status',
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
diff --git a/src/api/bpm/flow/instance/model/queryBusinessFlowInstanceBo.ts b/src/api/bpm/flow/instance/model/queryBusinessFlowInstanceBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b6229baf31c011c36a2d3c574362be5554ae45e
--- /dev/null
+++ b/src/api/bpm/flow/instance/model/queryBusinessFlowInstanceBo.ts
@@ -0,0 +1,10 @@
+export interface QueryBusinessFlowInstanceBo {
+  /**
+   * ID
+   */
+  id: string;
+  /**
+   * 标题
+   */
+  title: string;
+}
diff --git a/src/api/bpm/flow/task/index.ts b/src/api/bpm/flow/task/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b55fec8e6e1b04582231b0d861cf590ba42bc27c
--- /dev/null
+++ b/src/api/bpm/flow/task/index.ts
@@ -0,0 +1,165 @@
+import { defHttp } from '@/utils/http/axios';
+import { PageResult } from '@/api/model/pageResult';
+import { QueryTodoTaskListVo } from '@/api/bpm/flow/task/model/queryTodoTaskListVo';
+import { QueryTodoTaskListBo } from '@/api/bpm/flow/task/model/queryTodoTaskListBo';
+import { ApprovePassTaskVo } from '@/api/bpm/flow/task/model/approvePassTaskVo';
+import { ApproveRefuseTaskVo } from '@/api/bpm/flow/task/model/approveRefuseTaskVo';
+import { QueryMyTaskListBo } from '@/api/bpm/flow/task/model/queryMyTaskListBo';
+import { QueryMyTaskListVo } from '@/api/bpm/flow/task/model/queryMyTaskListVo';
+import { UndoTaskVo } from '@/api/bpm/flow/task/model/undoTaskVo';
+import { RejectTaskVo } from '@/api/bpm/flow/task/model/rejectTaskVo';
+import { QueryInstanceListBo } from '@/api/bpm/flow/task/model/queryInstanceListBo';
+import { QueryInstanceListVo } from '@/api/bpm/flow/task/model/queryInstanceListVo';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+
+const baseUrl = '/flow/task';
+const region = 'cloud-api';
+
+/**
+ * 查询待办任务列表
+ */
+export function queryTodoList(
+  params: QueryTodoTaskListVo,
+): Promise<PageResult<QueryTodoTaskListBo>> {
+  return defHttp.get<PageResult<QueryTodoTaskListBo>>(
+    {
+      url: baseUrl + '/list/todo',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 查询我的发起列表
+ */
+export function queryMyList(params: QueryMyTaskListVo): Promise<PageResult<QueryMyTaskListBo>> {
+  return defHttp.get<PageResult<QueryMyTaskListBo>>(
+    {
+      url: baseUrl + '/list/my',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 查询流程实例列表
+ */
+export function queryInstanceList(
+  params: QueryInstanceListVo,
+): Promise<PageResult<QueryInstanceListBo>> {
+  return defHttp.get<PageResult<QueryInstanceListBo>>(
+    {
+      url: baseUrl + '/list/instance',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 根据ID查询审核类型
+ */
+export function getCooperateType(id: string): Promise<number> {
+  return defHttp.get<number>(
+    {
+      url: baseUrl + '/cooperate',
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 审核通过
+ * @param params
+ */
+export function approvePass(params: ApprovePassTaskVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/approve/pass',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 审核拒绝
+ * @param params
+ */
+export function approveRefuse(params: ApproveRefuseTaskVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/approve/refuse',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 撤回
+ * @param params
+ */
+export function undo(params: UndoTaskVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/undo',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 反对
+ * @param params
+ */
+export function reject(params: RejectTaskVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/reject',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 终止
+ * @param instanceId
+ */
+export function termination(instanceId: string): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl + '/termination',
+      params: {
+        instanceId,
+      },
+    },
+    {
+      region,
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+    },
+  );
+}
diff --git a/src/api/bpm/flow/task/model/approvePassTaskVo.ts b/src/api/bpm/flow/task/model/approvePassTaskVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ac43a484820d19c6e92d030a2264f28ebb804e7
--- /dev/null
+++ b/src/api/bpm/flow/task/model/approvePassTaskVo.ts
@@ -0,0 +1,15 @@
+export interface ApprovePassTaskVo {
+  /**
+   * 任务ID
+   */
+  taskId: string;
+  /**
+   * 说明
+   */
+  message: string;
+
+  /**
+   * 表单变量
+   */
+  variables: any;
+}
diff --git a/src/api/bpm/flow/task/model/approveRefuseTaskVo.ts b/src/api/bpm/flow/task/model/approveRefuseTaskVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a17f59e2cc5a8d22303ae40c26704ef014a0f49e
--- /dev/null
+++ b/src/api/bpm/flow/task/model/approveRefuseTaskVo.ts
@@ -0,0 +1,15 @@
+export interface ApproveRefuseTaskVo {
+  /**
+   * 任务ID
+   */
+  taskId: string;
+  /**
+   * 说明
+   */
+  message: string;
+
+  /**
+   * 表单变量
+   */
+  variables: any;
+}
diff --git a/src/api/bpm/flow/task/model/queryInstanceListBo.ts b/src/api/bpm/flow/task/model/queryInstanceListBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..adb7830075286469ffd01b4c3a047fe3a17ff1de
--- /dev/null
+++ b/src/api/bpm/flow/task/model/queryInstanceListBo.ts
@@ -0,0 +1,74 @@
+export interface QueryInstanceListBo {
+  /**
+   * 任务标题
+   */
+  title: string;
+  /**
+   * 业务ID
+   */
+  businessId: string;
+  /**
+   * 节点编号
+   */
+  nodeCode: string;
+  /**
+   * 节点名称
+   */
+  nodeName: string;
+  /**
+   * 节点类型
+   */
+  nodeType: number;
+  /**
+   * 流程状态
+   */
+  flowStatus: string;
+  /**
+   * 流程定义ID
+   */
+  flowId: string;
+  /**
+   * 流程定义编号
+   */
+  flowCode: string;
+  /**
+   * 流程定义名称
+   */
+  flowName: string;
+  /**
+   * 流程定义分类ID
+   */
+  categoryId: string;
+  /**
+   * 流程定义分类名称
+   */
+  categoryName: string;
+  /**
+   * 流程实例ID
+   */
+  instanceId: string;
+  /**
+   * 流程实例扩展字段
+   */
+  ext: string;
+  /**
+   * 流程发起人ID
+   */
+  startById: string;
+  /**
+   * 流程发起人
+   */
+  startBy: string;
+  /**
+   * 流程发起时间
+   */
+  startTime: string;
+  /**
+   * 流程结束时间
+   */
+  endTime: string;
+  /**
+   * 流程执行时间
+   */
+  executeTime: string;
+}
diff --git a/src/api/bpm/flow/task/model/queryInstanceListVo.ts b/src/api/bpm/flow/task/model/queryInstanceListVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1e6bdf5faca0cd0e580302c7d6b6fc7382e6409c
--- /dev/null
+++ b/src/api/bpm/flow/task/model/queryInstanceListVo.ts
@@ -0,0 +1,16 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface QueryInstanceListVo extends PageVo {
+  /**
+   * 流程编号
+   */
+  flowCode: string;
+  /**
+   * 流程名称
+   */
+  flowName: string;
+  /**
+   * 任务标题
+   */
+  title: string;
+}
diff --git a/src/api/bpm/flow/task/model/queryMyTaskListBo.ts b/src/api/bpm/flow/task/model/queryMyTaskListBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10b4fbb492a015b447cdfb0622b217558812bf38
--- /dev/null
+++ b/src/api/bpm/flow/task/model/queryMyTaskListBo.ts
@@ -0,0 +1,74 @@
+export interface QueryMyTaskListBo {
+  /**
+   * 任务标题
+   */
+  title: string;
+  /**
+   * 业务ID
+   */
+  businessId: string;
+  /**
+   * 节点编号
+   */
+  nodeCode: string;
+  /**
+   * 节点名称
+   */
+  nodeName: string;
+  /**
+   * 节点类型
+   */
+  nodeType: number;
+  /**
+   * 流程状态
+   */
+  flowStatus: string;
+  /**
+   * 流程定义ID
+   */
+  flowId: string;
+  /**
+   * 流程定义编号
+   */
+  flowCode: string;
+  /**
+   * 流程定义名称
+   */
+  flowName: string;
+  /**
+   * 流程定义分类ID
+   */
+  categoryId: string;
+  /**
+   * 流程定义分类名称
+   */
+  categoryName: string;
+  /**
+   * 流程实例ID
+   */
+  instanceId: string;
+  /**
+   * 流程实例扩展字段
+   */
+  ext: string;
+  /**
+   * 流程发起人ID
+   */
+  startById: string;
+  /**
+   * 流程发起人
+   */
+  startBy: string;
+  /**
+   * 流程发起时间
+   */
+  startTime: string;
+  /**
+   * 流程结束时间
+   */
+  endTime: string;
+  /**
+   * 流程执行时间
+   */
+  executeTime: string;
+}
diff --git a/src/api/bpm/flow/task/model/queryMyTaskListVo.ts b/src/api/bpm/flow/task/model/queryMyTaskListVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a48c6473c21f1a1ab4a6447b83e2303f419e3c6c
--- /dev/null
+++ b/src/api/bpm/flow/task/model/queryMyTaskListVo.ts
@@ -0,0 +1,17 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface QueryMyTaskListVo extends PageVo {
+  /**
+   * 流程编号
+   */
+  flowCode: string;
+  /**
+   * 流程名称
+   */
+  flowName: string;
+
+  /**
+   * 任务标题
+   */
+  title: string;
+}
diff --git a/src/api/bpm/flow/task/model/queryTodoTaskListBo.ts b/src/api/bpm/flow/task/model/queryTodoTaskListBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f027aefd7dc2e7e92e2ea4c106c208b40ed402e5
--- /dev/null
+++ b/src/api/bpm/flow/task/model/queryTodoTaskListBo.ts
@@ -0,0 +1,66 @@
+export interface QueryTodoTaskListBo {
+  /**
+   * 任务ID
+   */
+  taskId: string;
+  /**
+   * 任务标题
+   */
+  title: string;
+  /**
+   * 节点编号
+   */
+  nodeCode: string;
+  /**
+   * 节点名称
+   */
+  nodeName: string;
+  /**
+   * 节点类型
+   */
+  nodeType: number;
+  /**
+   * 流程状态
+   */
+  flowStatus: number;
+  /**
+   * 流程定义ID
+   */
+  flowId: string;
+  /**
+   * 流程定义编号
+   */
+  flowCode: string;
+  /**
+   * 流程定义名称
+   */
+  flowName: string;
+  /**
+   * 流程定义分类ID
+   */
+  categoryId: string;
+  /**
+   * 流程定义分类名称
+   */
+  categoryName: string;
+  /**
+   * 流程实例ID
+   */
+  instanceId: string;
+  /**
+   * 流程实例扩展字段
+   */
+  ext: string;
+  /**
+   * 流程发起人ID
+   */
+  startById: string;
+  /**
+   * 流程发起人
+   */
+  startBy: string;
+  /**
+   * 流程发起时间
+   */
+  startTime: string;
+}
diff --git a/src/api/bpm/flow/task/model/queryTodoTaskListVo.ts b/src/api/bpm/flow/task/model/queryTodoTaskListVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15cb206a83bb759a76a511b179e8070a6c984033
--- /dev/null
+++ b/src/api/bpm/flow/task/model/queryTodoTaskListVo.ts
@@ -0,0 +1,17 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface QueryTodoTaskListVo extends PageVo {
+  /**
+   * 流程编号
+   */
+  flowCode: string;
+  /**
+   * 流程名称
+   */
+  flowName: string;
+
+  /**
+   * 任务标题
+   */
+  title: string;
+}
diff --git a/src/api/bpm/flow/task/model/rejectTaskVo.ts b/src/api/bpm/flow/task/model/rejectTaskVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86d1a93bf014ad294756ab42b995d35b1eeeb8b3
--- /dev/null
+++ b/src/api/bpm/flow/task/model/rejectTaskVo.ts
@@ -0,0 +1,15 @@
+export interface RejectTaskVo {
+  /**
+   * 任务ID
+   */
+  taskId: string;
+  /**
+   * 说明
+   */
+  message: string;
+
+  /**
+   * 表单变量
+   */
+  variables: any;
+}
diff --git a/src/api/bpm/flow/task/model/undoTaskVo.ts b/src/api/bpm/flow/task/model/undoTaskVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d44c2ba5d6d18447d96f9541b906a3da1adaa496
--- /dev/null
+++ b/src/api/bpm/flow/task/model/undoTaskVo.ts
@@ -0,0 +1,15 @@
+export interface UndoTaskVo {
+  /**
+   * 流程实例ID
+   */
+  instanceId: string;
+  /**
+   * 说明
+   */
+  message: string;
+
+  /**
+   * 表单变量
+   */
+  variables: any;
+}
diff --git a/src/api/development/custom/page-category/index.ts b/src/api/development/custom/page-category/index.ts
index dfa4645502bd0003be8af8bbff42d1544c03c7c9..8dc09c960e5537bfa8a33dbd6ac74e97037ca544 100644
--- a/src/api/development/custom/page-category/index.ts
+++ b/src/api/development/custom/page-category/index.ts
@@ -5,15 +5,20 @@ import { QueryGenCustomPageCategoryBo } from '@/api/development/custom/page-cate
 import { GetGenCustomPageCategoryBo } from '@/api/development/custom/page-category/model/getGenCustomPageCategoryBo';
 import { UpdateGenCustomPageCategoryVo } from '@/api/development/custom/page-category/model/updateGenCustomPageCategoryVo';
 import { CreateGenCustomPageCategoryVo } from '@/api/development/custom/page-category/model/createGenCustomPageCategoryVo';
+import { PageResult } from '@/api/model/pageResult';
+import { GenCustomPageCategorySelectorVo } from '@/api/development/custom/page-category/model/genCustomPageCategorySelectorVo';
 
 const baseUrl = '/gen/custom/page/category';
 const selectorBaseUrl = '/selector/gen';
 const region = 'cloud-api';
 
-export function selector(): Promise<GenCustomPageCategorySelectorBo[]> {
-  return defHttp.get<GenCustomPageCategorySelectorBo[]>(
+export function selector(
+  params: GenCustomPageCategorySelectorVo,
+): Promise<PageResult<GenCustomPageCategorySelectorBo>> {
+  return defHttp.get<PageResult<GenCustomPageCategorySelectorBo>>(
     {
       url: selectorBaseUrl + '/custom/page/category',
+      params,
     },
     {
       region,
diff --git a/src/api/development/custom/page-category/model/genCustomPageCategorySelectorBo.ts b/src/api/development/custom/page-category/model/genCustomPageCategorySelectorBo.ts
index 5f81508b8f896354f3c2f8917e6f75739776af68..b5e8500d08f8e8e381ff3a9a747135dc0d270eef 100644
--- a/src/api/development/custom/page-category/model/genCustomPageCategorySelectorBo.ts
+++ b/src/api/development/custom/page-category/model/genCustomPageCategorySelectorBo.ts
@@ -13,9 +13,4 @@ export interface GenCustomPageCategorySelectorBo {
    * 名称
    */
   name: string;
-
-  /**
-   * 父级ID
-   */
-  parentId: string;
 }
diff --git a/src/api/development/custom/page-category/model/genCustomPageCategorySelectorVo.ts b/src/api/development/custom/page-category/model/genCustomPageCategorySelectorVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c619d8014da7cd883e3484a0fb37c6a06c2e0de
--- /dev/null
+++ b/src/api/development/custom/page-category/model/genCustomPageCategorySelectorVo.ts
@@ -0,0 +1,13 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface GenCustomPageCategorySelectorVo extends PageVo {
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/sc/purchase/config/model/getPurchaseConfigBo.ts b/src/api/sc/purchase/config/model/getPurchaseConfigBo.ts
index e9ecbbcdd2edad1f447307d5ece358317136078c..0f37622ae5c567a0063e8f97abdb5f633d14eb98 100644
--- a/src/api/sc/purchase/config/model/getPurchaseConfigBo.ts
+++ b/src/api/sc/purchase/config/model/getPurchaseConfigBo.ts
@@ -3,19 +3,28 @@ export interface GetPurchaseConfigBo {
    * 采购收货单是否关联采购订单
    */
   receiveRequirePurchase: boolean;
-
   /**
    * 采购收货单是否多次关联采购订单
    */
   receiveMultipleRelatePurchase: boolean;
-
   /**
    * 采购退货单是否关联采购收货单
    */
   purchaseReturnRequireReceive: boolean;
-
   /**
    * 采购退货单是否多次关联采购收货单
    */
   purchaseReturnMultipleRelateReceive: boolean;
+  /**
+   * 采购订单是否开启审批流程
+   */
+  purchaseRequireBpm: boolean;
+  /**
+   * 采购订单关联的审批流程ID
+   */
+  purchaseBpmProcessId: string;
+  /**
+   * 采购订单关联的审批流程编号
+   */
+  purchaseBpmProcessCode: string;
 }
diff --git a/src/api/sc/purchase/config/model/updatePurchaseConfigVo.ts b/src/api/sc/purchase/config/model/updatePurchaseConfigVo.ts
index 6e3f4b3786039e0687360105eba7398a2d7519b4..93191841a97dc3ecff4fdbb8cabfc1d751bcb9b0 100644
--- a/src/api/sc/purchase/config/model/updatePurchaseConfigVo.ts
+++ b/src/api/sc/purchase/config/model/updatePurchaseConfigVo.ts
@@ -3,19 +3,24 @@ export interface UpdatePurchaseConfigVo {
    * 采购收货单是否关联采购订单
    */
   receiveRequirePurchase: boolean;
-
   /**
    * 采购收货单是否多次关联采购订单
    */
   receiveMultipleRelatePurchase: boolean;
-
   /**
    * 采购退货单是否关联采购收货单
    */
   purchaseReturnRequireReceive: boolean;
-
   /**
    * 采购退货单是否多次关联采购收货单
    */
   purchaseReturnMultipleRelateReceive: boolean;
+  /**
+   * 采购订单是否开启审批流程
+   */
+  purchaseRequireBpm: boolean;
+  /**
+   * 采购订单关联的审批流程ID
+   */
+  purchaseBpmProcessId: string;
 }
diff --git a/src/api/sc/purchase/order/index.ts b/src/api/sc/purchase/order/index.ts
index be923da7fdcaed84d08bcb08c83d0caccf88d533..0d413ff7e720648f73d78ade658a4b5c397c4e54 100644
--- a/src/api/sc/purchase/order/index.ts
+++ b/src/api/sc/purchase/order/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum, ResponseEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { QueryPurchaseOrderVo } from '@/api/sc/purchase/order/model/queryPurchaseOrderVo';
 import { PageResult } from '@/api/model/pageResult';
 import { QueryPurchaseOrderBo } from '@/api/sc/purchase/order/model/queryPurchaseOrderBo';
@@ -16,6 +15,7 @@ import { PurchaseProductBo } from '@/api/sc/purchase/order/model/purchaseProduct
 import { QueryPurchaseProductVo } from '@/api/sc/purchase/order/model/queryPurchaseProductVo';
 import { PurchaseOrderSelectorVo } from '@/api/sc/purchase/order/model/purchaseOrderSelectorVo';
 import { PurchaseOrderSelectorBo } from '@/api/sc/purchase/order/model/purchaseOrderSelectorBo';
+import { PrintPurchaseOrderBo } from '@/api/sc/purchase/order/model/printPurchaseOrderBo';
 
 const baseUrl = '/purchase/order';
 const selectorBaseUrl = '/selector';
@@ -51,8 +51,8 @@ export function loadPurchaseOrder(ids: string[]): Promise<PurchaseOrderSelectorB
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintPurchaseOrderBo> {
+  return defHttp.get<PrintPurchaseOrderBo>(
     {
       url: baseUrl + '/print',
       params: {
@@ -99,12 +99,13 @@ export function exportList(data: QueryPurchaseOrderVo): Promise<void> {
 /**
  * 查询详情
  */
-export function get(id: string): Promise<GetPurchaseOrderBo> {
+export function get(id: string, isForm: boolean): Promise<GetPurchaseOrderBo> {
   return defHttp.get<GetPurchaseOrderBo>(
     {
       url: baseUrl,
       params: {
         id,
+        isForm,
       },
     },
     {
diff --git a/src/api/sc/purchase/order/model/approvePassPurchaseOrderVo.ts b/src/api/sc/purchase/order/model/approvePassPurchaseOrderVo.ts
index ac5f966efae793ed658e432662cc757569f855ad..30efc0b7184d686586c81c2dd654f750e5ee1ce6 100644
--- a/src/api/sc/purchase/order/model/approvePassPurchaseOrderVo.ts
+++ b/src/api/sc/purchase/order/model/approvePassPurchaseOrderVo.ts
@@ -3,9 +3,4 @@ export interface ApprovePassPurchaseOrderVo {
    * 订单ID
    */
   id: string;
-
-  /**
-   * 备注
-   */
-  description: string;
 }
diff --git a/src/api/sc/purchase/order/model/getPurchaseOrderBo.ts b/src/api/sc/purchase/order/model/getPurchaseOrderBo.ts
index 62f1be3e51786db5c7504e55d3d225e21a0a5b6c..efeecc3a6faf81b4a6ec9f13e84a04d0660f4a43 100644
--- a/src/api/sc/purchase/order/model/getPurchaseOrderBo.ts
+++ b/src/api/sc/purchase/order/model/getPurchaseOrderBo.ts
@@ -46,6 +46,11 @@ export interface GetPurchaseOrderBo {
    */
   expectArriveDate: string;
 
+  /**
+   * 关联的审批流程ID
+   */
+  flowInstanceId: string;
+
   /**
    * 采购数量
    */
diff --git a/src/api/sc/purchase/order/model/printPurchaseOrderBo.ts b/src/api/sc/purchase/order/model/printPurchaseOrderBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c2582086291b7b7aaccfa6ad01a04e14f9f6fe1
--- /dev/null
+++ b/src/api/sc/purchase/order/model/printPurchaseOrderBo.ts
@@ -0,0 +1,85 @@
+export interface PrintPurchaseOrderBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 供应商编号
+   */
+  supplierCode: string;
+  /**
+   * 供应商名称
+   */
+  supplierName: string;
+  /**
+   * 采购员姓名
+   */
+  purchaserName: string;
+  /**
+   * 预计到货日期
+   */
+  expectArriveDate: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: OrderDetailBo[];
+}
+
+export interface OrderDetailBo {
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 采购数量
+   */
+  purchaseNum: number;
+  /**
+   * 采购价
+   */
+  purchasePrice: number;
+  /**
+   * 采购金额
+   */
+  purchaseAmount: number;
+}
diff --git a/src/api/sc/purchase/order/model/queryPurchaseOrderBo.ts b/src/api/sc/purchase/order/model/queryPurchaseOrderBo.ts
index 3179d058d6341e0b3eefcbca49b70a3b1ef2deea..4ef5e1b003f52530a589ce5e86bc6f7b8306965c 100644
--- a/src/api/sc/purchase/order/model/queryPurchaseOrderBo.ts
+++ b/src/api/sc/purchase/order/model/queryPurchaseOrderBo.ts
@@ -54,6 +54,11 @@ export interface QueryPurchaseOrderBo {
    */
   totalAmount: number;
 
+  /**
+   * 关联的审批流程ID
+   */
+  flowInstanceId: string;
+
   /**
    * 备注
    */
diff --git a/src/api/sc/purchase/receive/index.ts b/src/api/sc/purchase/receive/index.ts
index 46230d208dc42cce431fef0ac094e3391e03cc6f..389458308206aa7345b1d8c25a3eb314a5c43dcb 100644
--- a/src/api/sc/purchase/receive/index.ts
+++ b/src/api/sc/purchase/receive/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum, ResponseEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { PageResult } from '@/api/model/pageResult';
 import { ReceiveSheetSelectorVo } from '@/api/sc/purchase/receive/model/receiveSheetSelectorVo';
 import { ReceiveSheetSelectorBo } from '@/api/sc/purchase/receive/model/receiveSheetSelectorBo';
@@ -15,6 +14,7 @@ import { CreateReceiveSheetVo } from '@/api/sc/purchase/receive/model/createRece
 import { UpdateReceiveSheetVo } from '@/api/sc/purchase/receive/model/updateReceiveSheetVo';
 import { ApprovePassReceiveSheetVo } from '@/api/sc/purchase/receive/model/approvePassReceiveSheetVo';
 import { ApproveRefuseReceiveSheetVo } from '@/api/sc/purchase/receive/model/approveRefuseReceiveSheetVo';
+import { PrintReceiveSheetBo } from '@/api/sc/purchase/receive/model/printReceiveSheetBo';
 
 const baseUrl = '/purchase/receive/sheet';
 const selectorBaseUrl = '/selector';
@@ -50,8 +50,8 @@ export function loadReceiveSheet(ids: string[]): Promise<ReceiveSheetSelectorBo[
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintReceiveSheetBo> {
+  return defHttp.get<PrintReceiveSheetBo>(
     {
       url: baseUrl + '/print',
       params: {
diff --git a/src/api/sc/purchase/receive/model/printReceiveSheetBo.ts b/src/api/sc/purchase/receive/model/printReceiveSheetBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7951b55a97c5eb10388c35ab46aeb800d9eab63
--- /dev/null
+++ b/src/api/sc/purchase/receive/model/printReceiveSheetBo.ts
@@ -0,0 +1,93 @@
+export interface PrintReceiveSheetBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 供应商编号
+   */
+  supplierCode: string;
+  /**
+   * 供应商名称
+   */
+  supplierName: string;
+  /**
+   * 采购员姓名
+   */
+  purchaserName: string;
+  /**
+   * 付款日期
+   */
+  paymentDate: string;
+  /**
+   * 到货日期
+   */
+  receiveDate: string;
+  /**
+   * 采购订单号
+   */
+  purchaseOrderCode: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: OrderDetailBo[];
+}
+
+export interface OrderDetailBo {
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 收货数量
+   */
+  receiveNum: number;
+  /**
+   * 采购价
+   */
+  purchasePrice: number;
+  /**
+   * 收货金额
+   */
+  receiveAmount: number;
+}
diff --git a/src/api/sc/purchase/return/index.ts b/src/api/sc/purchase/return/index.ts
index ecc60793c008832b50aec3aa8a7f06d2df219a8f..08281c2eae383bd9bc29f4679c27fda1b6caa812 100644
--- a/src/api/sc/purchase/return/index.ts
+++ b/src/api/sc/purchase/return/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { PageResult } from '@/api/model/pageResult';
 import { QueryPurchaseReturnVo } from '@/api/sc/purchase/return/model/queryPurchaseReturnVo';
 import { QueryPurchaseReturnBo } from '@/api/sc/purchase/return/model/queryPurchaseReturnBo';
@@ -9,6 +8,7 @@ import { CreatePurchaseReturnVo } from '@/api/sc/purchase/return/model/createPur
 import { UpdatePurchaseReturnVo } from '@/api/sc/purchase/return/model/updatePurchaseReturnVo';
 import { ApprovePassPurchaseReturnVo } from '@/api/sc/purchase/return/model/approvePassPurchaseReturnVo';
 import { ApproveRefusePurchaseReturnVo } from '@/api/sc/purchase/return/model/approveRefusePurchaseReturnVo';
+import { PrintPurchaseReturnBo } from '@/api/sc/purchase/return/model/printPurchaseReturnBo';
 
 const baseUrl = '/purchase/return';
 const region = 'cloud-api';
@@ -16,8 +16,8 @@ const region = 'cloud-api';
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintPurchaseReturnBo> {
+  return defHttp.get<PrintPurchaseReturnBo>(
     {
       url: baseUrl + '/print',
       params: {
diff --git a/src/api/sc/purchase/return/model/getPurchaseReturnBo.ts b/src/api/sc/purchase/return/model/getPurchaseReturnBo.ts
index 218707e752f7eef6b837c75370590468f1890f24..2eb850b1a934526d1b9aa22c747c0b97a2e60fa4 100644
--- a/src/api/sc/purchase/return/model/getPurchaseReturnBo.ts
+++ b/src/api/sc/purchase/return/model/getPurchaseReturnBo.ts
@@ -1,3 +1,5 @@
+import { OrderPayTypeBo } from '@/api/sc/pay-type/model/orderPayTypeBo';
+
 export interface GetPurchaseReturnBo {
   /**
    * ID
@@ -187,7 +189,7 @@ export interface ReturnDetailBo {
   returnNum: number;
 
   /**
-   * 采购价
+   * 退货价
    */
   purchasePrice: number;
 
diff --git a/src/api/sc/purchase/return/model/printPurchaseReturnBo.ts b/src/api/sc/purchase/return/model/printPurchaseReturnBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3794d1cc3b41fff346bcce3697e56219b6443848
--- /dev/null
+++ b/src/api/sc/purchase/return/model/printPurchaseReturnBo.ts
@@ -0,0 +1,97 @@
+export interface PrintPurchaseReturnBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 供应商编号
+   */
+  supplierCode: string;
+  /**
+   * 供应商名称
+   */
+  supplierName: string;
+  /**
+   * 采购员姓名
+   */
+  purchaserName: string;
+  /**
+   * 付款日期
+   */
+  paymentDate: string;
+  /**
+   * 采购收货单号
+   */
+  receiveSheetCode: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: ReturnDetailBo[];
+}
+
+export interface ReturnDetailBo {
+  /**
+   * 明细ID
+   */
+  id: string;
+  /**
+   * 商品ID
+   */
+  productId: string;
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 退货数量
+   */
+  returnNum: number;
+  /**
+   * 退货价
+   */
+  purchasePrice: number;
+  /**
+   * 退货金额
+   */
+  returnAmount: number;
+}
diff --git a/src/api/sc/purchase/return/model/returnProductVo.ts b/src/api/sc/purchase/return/model/returnProductVo.ts
index f5f34f8041d5a90adae218ae8b23a274642ef73e..e3efa5387084b1c98d1fa5c0ee7e1d4819b8f84b 100644
--- a/src/api/sc/purchase/return/model/returnProductVo.ts
+++ b/src/api/sc/purchase/return/model/returnProductVo.ts
@@ -5,7 +5,7 @@ export interface ReturnProductVo {
   productId: string;
 
   /**
-   * 采购价
+   * 退货价
    */
   purchasePrice: number;
 
diff --git a/src/api/sc/retail/out/index.ts b/src/api/sc/retail/out/index.ts
index 0ecd317352889e973c21826bfd733b29b539bf83..73fecd68af8a629e53e22c542cee018fdb68dbde 100644
--- a/src/api/sc/retail/out/index.ts
+++ b/src/api/sc/retail/out/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { PageResult } from '@/api/model/pageResult';
 import { GetPaymentDateBo } from '@/api/sc/purchase/receive/model/getPaymentDateBo';
 import { QueryRetailOutSheetVo } from '@/api/sc/retail/out/model/queryRetailOutSheetVo';
@@ -15,6 +14,7 @@ import { ApprovePassRetailOutSheetVo } from '@/api/sc/retail/out/model/approvePa
 import { ApproveRefuseRetailOutSheetVo } from '@/api/sc/retail/out/model/approveRefuseRetailOutSheetVo';
 import { RetailProductBo } from '@/api/sc/retail/out/model/retailProductBo';
 import { QueryRetailProductVo } from '@/api/sc/retail/out/model/queryRetailProductVo';
+import { PrintRetailOutSheetBo } from '@/api/sc/retail/out/model/printRetailOutSheetBo';
 
 const baseUrl = '/retail/out/sheet';
 const region = 'cloud-api';
@@ -22,8 +22,8 @@ const region = 'cloud-api';
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintRetailOutSheetBo> {
+  return defHttp.get<PrintRetailOutSheetBo>(
     {
       url: baseUrl + '/print',
       params: {
diff --git a/src/api/sc/retail/out/model/printRetailOutSheetBo.ts b/src/api/sc/retail/out/model/printRetailOutSheetBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..335403d50fb53654ed3f9486a9f525004a9786ec
--- /dev/null
+++ b/src/api/sc/retail/out/model/printRetailOutSheetBo.ts
@@ -0,0 +1,85 @@
+export interface PrintRetailOutSheetBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 会员编号
+   */
+  memberCode: string;
+  /**
+   * 会员名称
+   */
+  memberName: string;
+  /**
+   * 销售员姓名
+   */
+  salerName: string;
+  /**
+   * 付款日期
+   */
+  paymentDate: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: OrderDetailBo[];
+}
+
+export interface OrderDetailBo {
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 收货数量
+   */
+  receiveNum: number;
+  /**
+   * 采购价
+   */
+  purchasePrice: number;
+  /**
+   * 收货金额
+   */
+  receiveAmount: number;
+}
diff --git a/src/api/sc/retail/return/index.ts b/src/api/sc/retail/return/index.ts
index 33ef3317ec48a30f6ecc91acee4c44dab932fc83..15ba5c362b35bc546f381e092f082326a729078f 100644
--- a/src/api/sc/retail/return/index.ts
+++ b/src/api/sc/retail/return/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { PageResult } from '@/api/model/pageResult';
 import { QueryRetailReturnBo } from '@/api/sc/retail/return/model/queryRetailReturnBo';
 import { QueryRetailReturnVo } from '@/api/sc/retail/return/model/queryRetailReturnVo';
@@ -9,6 +8,7 @@ import { CreateRetailReturnVo } from '@/api/sc/retail/return/model/createRetailR
 import { UpdateRetailReturnVo } from '@/api/sc/retail/return/model/updateRetailReturnVo';
 import { ApprovePassRetailReturnVo } from '@/api/sc/retail/return/model/approvePassRetailReturnVo';
 import { ApproveRefuseRetailReturnVo } from '@/api/sc/retail/return/model/approveRefuseRetailReturnVo';
+import { PrintRetailReturnBo } from '@/api/sc/retail/return/model/printRetailReturnBo';
 
 const baseUrl = '/retail/return';
 const region = 'cloud-api';
@@ -16,8 +16,8 @@ const region = 'cloud-api';
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintRetailReturnBo> {
+  return defHttp.get<PrintRetailReturnBo>(
     {
       url: baseUrl + '/print',
       params: {
diff --git a/src/api/sc/retail/return/model/printRetailReturnBo.ts b/src/api/sc/retail/return/model/printRetailReturnBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b35a6aae2a4414517749f5c79b24ddcb8e6ca1b
--- /dev/null
+++ b/src/api/sc/retail/return/model/printRetailReturnBo.ts
@@ -0,0 +1,97 @@
+export interface PrintRetailReturnBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 客户编号
+   */
+  memberCode: string;
+  /**
+   * 客户名称
+   */
+  memberName: string;
+  /**
+   * 销售员姓名
+   */
+  salerName: string;
+  /**
+   * 付款日期
+   */
+  paymentDate: string;
+  /**
+   * 销售出库单号
+   */
+  outSheetCode: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: ReturnDetailBo[];
+}
+
+export interface ReturnDetailBo {
+  /**
+   * 明细ID
+   */
+  id: string;
+  /**
+   * 商品ID
+   */
+  productId: string;
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 退货数量
+   */
+  returnNum: number;
+  /**
+   * 采购价
+   */
+  purchasePrice: number;
+  /**
+   * 退货金额
+   */
+  returnAmount: number;
+}
diff --git a/src/api/sc/sale/order/index.ts b/src/api/sc/sale/order/index.ts
index e92955f504bda8a4ea2c07f08754f5b9d7e7d4a0..c105b21e8da9a417c0cfba8be3463b9bc257d7e0 100644
--- a/src/api/sc/sale/order/index.ts
+++ b/src/api/sc/sale/order/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { QuerySaleOrderVo } from '@/api/sc/sale/order/model/querySaleOrderVo';
 import { PageResult } from '@/api/model/pageResult';
 import { QuerySaleOrderBo } from '@/api/sc/sale/order/model/querySaleOrderBo';
@@ -14,6 +13,7 @@ import { SaleOrderWithOutBo } from '@/api/sc/sale/order/model/saleOrderWithOutBo
 import { QuerySaleOrderWithOutBo } from '@/api/sc/sale/order/model/querySaleOrderWithOutBo';
 import { QuerySaleOrderWithOutVo } from '@/api/sc/sale/order/model/querySaleOrderWithOutVo';
 import { QuerySaleProductVo } from '@/api/sc/sale/order/model/querySaleProductVo';
+import { PrintSaleOrderBo } from '@/api/sc/sale/order/model/printSaleOrderBo';
 
 const baseUrl = '/sale/order';
 const region = 'cloud-api';
@@ -21,8 +21,8 @@ const region = 'cloud-api';
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintSaleOrderBo> {
+  return defHttp.get<PrintSaleOrderBo>(
     {
       url: baseUrl + '/print',
       params: {
diff --git a/src/api/sc/sale/order/model/printSaleOrderBo.ts b/src/api/sc/sale/order/model/printSaleOrderBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ea8990c65085688aafd68f62d59e56ec775b0e8
--- /dev/null
+++ b/src/api/sc/sale/order/model/printSaleOrderBo.ts
@@ -0,0 +1,81 @@
+export interface PrintSaleOrderBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 客户编号
+   */
+  customerCode: string;
+  /**
+   * 客户名称
+   */
+  customerName: string;
+  /**
+   * 销售员姓名
+   */
+  salerName: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: OrderDetailBo[];
+}
+
+export interface OrderDetailBo {
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 收货数量
+   */
+  receiveNum: number;
+  /**
+   * 采购价
+   */
+  purchasePrice: number;
+  /**
+   * 收货金额
+   */
+  receiveAmount: number;
+}
diff --git a/src/api/sc/sale/out/index.ts b/src/api/sc/sale/out/index.ts
index 5aec8d75ec8d78fd18b0b71c830a17b3ff57cc3f..79aaa1700e65ef5b3be732d513566d14f8e2d1e0 100644
--- a/src/api/sc/sale/out/index.ts
+++ b/src/api/sc/sale/out/index.ts
@@ -1,6 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ContentTypeEnum } from '@/enums/httpEnum';
-import { A4ExcelPortraitPrintBo } from '@/api/model/a4ExcelPortraitPrintBo';
 import { PageResult } from '@/api/model/pageResult';
 import { GetPaymentDateBo } from '@/api/sc/purchase/receive/model/getPaymentDateBo';
 import { QuerySaleOutSheetBo } from '@/api/sc/sale/out/model/querySaleOutSheetBo';
@@ -13,6 +12,7 @@ import { CreateSaleOutSheetVo } from '@/api/sc/sale/out/model/createSaleOutSheet
 import { UpdateSaleOutSheetVo } from '@/api/sc/sale/out/model/updateSaleOutSheetVo';
 import { ApprovePassSaleOutSheetVo } from '@/api/sc/sale/out/model/approvePassSaleOutSheetVo';
 import { ApproveRefuseSaleOutSheetVo } from '@/api/sc/sale/out/model/approveRefuseSaleOutSheetVo';
+import { PrintSaleOutSheetBo } from '@/api/sc/sale/out/model/printSaleOutSheetBo';
 
 const baseUrl = '/sale/out/sheet';
 const region = 'cloud-api';
@@ -20,8 +20,8 @@ const region = 'cloud-api';
 /**
  * 打印
  */
-export function print(id: string): Promise<A4ExcelPortraitPrintBo> {
-  return defHttp.get<A4ExcelPortraitPrintBo>(
+export function print(id: string): Promise<PrintSaleOutSheetBo> {
+  return defHttp.get<PrintSaleOutSheetBo>(
     {
       url: baseUrl + '/print',
       params: {
diff --git a/src/api/sc/sale/out/model/printSaleOutSheetBo.ts b/src/api/sc/sale/out/model/printSaleOutSheetBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25274051dd88dcde79b38f226d93552705b5fc53
--- /dev/null
+++ b/src/api/sc/sale/out/model/printSaleOutSheetBo.ts
@@ -0,0 +1,89 @@
+export interface PrintSaleOutSheetBo {
+  /**
+   * 单号
+   */
+  code: string;
+  /**
+   * 仓库编号
+   */
+  scCode: string;
+  /**
+   * 仓库名称
+   */
+  scName: string;
+  /**
+   * 客户编号
+   */
+  customerCode: string;
+  /**
+   * 客户名称
+   */
+  customerName: string;
+  /**
+   * 销售员姓名
+   */
+  salerName: string;
+  /**
+   * 付款日期
+   */
+  paymentDate: string;
+  /**
+   * 销售订单号
+   */
+  saleOrderCode: string;
+  /**
+   * 备注
+   */
+  description: string;
+  /**
+   * 创建人
+   */
+  createBy: string;
+  /**
+   * 创建时间
+   */
+  createTime: string;
+  /**
+   * 审核人
+   */
+  approveBy: string;
+  /**
+   * 审核时间
+   */
+  approveTime: string;
+  /**
+   * 订单明细
+   */
+  details: OrderDetailBo[];
+}
+
+export interface OrderDetailBo {
+  /**
+   * 商品编号
+   */
+  productCode: string;
+  /**
+   * 商品名称
+   */
+  productName: string;
+  /**
+   * SKU编号
+   */
+  skuCode: string;
+  /**
+   * 简码
+   */
+  externalCode: string;
+  /**
+   * 收货数量
+   */
+  receiveNum: number;
+  /**
+   * 采购价
+   */
+  purchasePrice: number;
+  /**
+   * 收货金额
+   */
+  receiveAmount: number;
+}
diff --git a/src/api/sys/model/userModel.ts b/src/api/sys/model/userModel.ts
index 352dbdce824fdddcaad4c5354e9dd9cd4ef0ac4a..cc8d55607cd33a233ab599c3dfd9eedb7b62a88c 100644
--- a/src/api/sys/model/userModel.ts
+++ b/src/api/sys/model/userModel.ts
@@ -2,7 +2,7 @@
  * @description: Login interface parameters
  */
 export interface LoginParams {
-  tenantName: string,
+  tenantName: string;
   username: string;
   password: string;
   sn: string;
diff --git a/src/api/system/role-category/index.ts b/src/api/system/role-category/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec35d1d639f0134d607bfd04fe98f7c2bf39724c
--- /dev/null
+++ b/src/api/system/role-category/index.ts
@@ -0,0 +1,123 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageResult } from '@/api/model/pageResult';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+import { QuerySysRoleCategoryBo } from '@/api/system/role-category/model/querySysRoleCategoryBo';
+import { GetSysRoleCategoryBo } from '@/api/system/role-category/model/getSysRoleCategoryBo';
+import { CreateSysRoleCategoryVo } from '@/api/system/role-category/model/createSysRoleCategoryVo';
+import { UpdateSysRoleCategoryVo } from '@/api/system/role-category/model/updateSysRoleCategoryVo';
+import { SysRoleSelectorBo } from '@/api/system/role-category/model/sysRoleSelectorBo';
+import { SysRoleCategorySelectorVo } from '@/api/system/role-category/model/sysRoleCategorySelectorVo';
+
+const baseUrl = '/sys/role/category';
+const selectorBaseUrl = '/selector';
+const region = 'cloud-api';
+
+export function selector(
+  params: SysRoleCategorySelectorVo,
+): Promise<PageResult<SysRoleSelectorBo>> {
+  return defHttp.get<PageResult<SysRoleSelectorBo>>(
+    {
+      url: selectorBaseUrl + '/role/category',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+export function loadRoleCategory(ids: string[]): Promise<SysRoleSelectorBo[]> {
+  return defHttp.post<SysRoleSelectorBo[]>(
+    {
+      url: selectorBaseUrl + '/role/category/load',
+      data: ids,
+    },
+    {
+      contentType: ContentTypeEnum.JSON,
+      region,
+    },
+  );
+}
+
+/**
+ * 查询列表
+ */
+export function query(): Promise<QuerySysRoleCategoryBo[]> {
+  return defHttp.get<QuerySysRoleCategoryBo[]>(
+    {
+      url: baseUrl + '/query',
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 查询
+ */
+export function get(id: string): Promise<GetSysRoleCategoryBo> {
+  return defHttp.get<GetSysRoleCategoryBo>(
+    {
+      url: baseUrl,
+      params: {
+        id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 新增
+ * @param data
+ */
+export function create(data: CreateSysRoleCategoryVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
+
+/**
+ * 修改
+ * @param data
+ */
+export function update(data: UpdateSysRoleCategoryVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
+
+/**
+ * 删除
+ */
+export function deleteById(id: string): Promise<void> {
+  return defHttp.delete<void>(
+    {
+      url: baseUrl,
+      data: {
+        id,
+      },
+    },
+    {
+      contentType: ContentTypeEnum.FORM_URLENCODED,
+      region,
+    },
+  );
+}
diff --git a/src/api/system/role-category/model/createSysRoleCategoryVo.ts b/src/api/system/role-category/model/createSysRoleCategoryVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00c80ea0f094c6489ae3872a47e0ee8b499510e7
--- /dev/null
+++ b/src/api/system/role-category/model/createSysRoleCategoryVo.ts
@@ -0,0 +1,11 @@
+export interface CreateSysRoleCategoryVo {
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/system/role-category/model/getSysRoleCategoryBo.ts b/src/api/system/role-category/model/getSysRoleCategoryBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c8d3889075b2e137d6e755f554c7e31a0614cf3
--- /dev/null
+++ b/src/api/system/role-category/model/getSysRoleCategoryBo.ts
@@ -0,0 +1,16 @@
+export interface GetSysRoleCategoryBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/system/role-category/model/querySysRoleCategoryBo.ts b/src/api/system/role-category/model/querySysRoleCategoryBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce9f5c942704a7556dbe368db4cbe2a70f3d201f
--- /dev/null
+++ b/src/api/system/role-category/model/querySysRoleCategoryBo.ts
@@ -0,0 +1,16 @@
+export interface QuerySysRoleCategoryBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/system/role-category/model/sysRoleCategorySelectorVo.ts b/src/api/system/role-category/model/sysRoleCategorySelectorVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3936ddf19ab03977496d39d47b01a5bf52a30946
--- /dev/null
+++ b/src/api/system/role-category/model/sysRoleCategorySelectorVo.ts
@@ -0,0 +1,13 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface SysRoleCategorySelectorVo extends PageVo {
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/system/role-category/model/sysRoleSelectorBo.ts b/src/api/system/role-category/model/sysRoleSelectorBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4af35f6cb1e97f6fa99e5b1b2bb381fcdff69fb
--- /dev/null
+++ b/src/api/system/role-category/model/sysRoleSelectorBo.ts
@@ -0,0 +1,16 @@
+export interface SysRoleSelectorBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/system/role-category/model/updateSysRoleCategoryVo.ts b/src/api/system/role-category/model/updateSysRoleCategoryVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67ab5d7807eddb20bacd6b04e2247fbe98086041
--- /dev/null
+++ b/src/api/system/role-category/model/updateSysRoleCategoryVo.ts
@@ -0,0 +1,16 @@
+export interface UpdateSysRoleCategoryVo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 编号
+   */
+  code: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+}
diff --git a/src/api/system/site-message/index.ts b/src/api/system/site-message/index.ts
index 4fec36bbeaa28b207f377ac32fe4deb0f4477f7b..4f5a89ac0561bd12d8b9f94760739b520c92420f 100644
--- a/src/api/system/site-message/index.ts
+++ b/src/api/system/site-message/index.ts
@@ -5,7 +5,7 @@ import { QuerySysSiteMessageVo } from '@/api/system/site-message/model/querySysS
 import { QuerySysSiteMessageByUserVo } from '@/api/system/site-message/model/querySysSiteMessageByUserVo';
 import { QueryMySysSiteMessageBo } from '@/api/system/site-message/model/queryMySysSiteMessageBo';
 import { SiteMessageDto } from '@/api/system/site-message/model/siteMessageDto';
-import {GetSysSiteMessageBo} from "@/api/system/site-message/model/getSysSiteMessageBo";
+import { GetSysSiteMessageBo } from '@/api/system/site-message/model/getSysSiteMessageBo';
 
 const baseUrl = '/system/message/site';
 const region = 'cloud-api';
diff --git a/src/api/system/user-group/index.ts b/src/api/system/user-group/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67d8b69e338132507bb2fce6e4e99d949cb0e3ea
--- /dev/null
+++ b/src/api/system/user-group/index.ts
@@ -0,0 +1,108 @@
+import { defHttp } from '/@/utils/http/axios';
+import { PageResult } from '@/api/model/pageResult';
+import { ContentTypeEnum } from '@/enums/httpEnum';
+import { QuerySysUserGroupBo } from '@/api/system/user-group/model/querySysUserGroupBo';
+import { QuerySysUserGroupVo } from '@/api/system/user-group/model/querySysUserGroupVo';
+import { GetSysUserGroupBo } from '@/api/system/user-group/model/getSysUserGroupBo';
+import { CreateSysUserGroupVo } from '@/api/system/user-group/model/createSysUserGroupVo';
+import { UpdateSysUserGroupVo } from '@/api/system/user-group/model/updateSysUserGroupVo';
+import { SysUserGroupSelectorVo } from '@/api/system/user-group/model/sysUserGroupSelectorVo';
+import { SysUserGroupSelectorBo } from '@/api/system/user-group/model/sysUserGroupSelectorBo';
+
+const baseUrl = '/sys/user/group';
+const selectorBaseUrl = '/selector';
+const region = 'cloud-api';
+
+export function selector(
+  params: SysUserGroupSelectorVo,
+): Promise<PageResult<SysUserGroupSelectorBo>> {
+  return defHttp.get<PageResult<SysUserGroupSelectorBo>>(
+    {
+      url: selectorBaseUrl + '/user/group',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+export function loadUserGroup(ids: string[]): Promise<SysUserGroupSelectorBo[]> {
+  return defHttp.post<SysUserGroupSelectorBo[]>(
+    {
+      url: selectorBaseUrl + '/user/group/load',
+      data: ids,
+    },
+    {
+      contentType: ContentTypeEnum.JSON,
+      region,
+    },
+  );
+}
+
+/**
+ * 查询列表
+ */
+export function query(params: QuerySysUserGroupVo): Promise<PageResult<QuerySysUserGroupBo>> {
+  return defHttp.get<PageResult<QuerySysUserGroupBo>>(
+    {
+      url: baseUrl + '/query',
+      params,
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 根据ID查询
+ * @param id
+ */
+export function get(id: string): Promise<GetSysUserGroupBo> {
+  return defHttp.get<GetSysUserGroupBo>(
+    {
+      url: baseUrl + '/detail',
+      params: {
+        id: id,
+      },
+    },
+    {
+      region,
+    },
+  );
+}
+
+/**
+ * 新增
+ * @param data
+ */
+export function create(data: CreateSysUserGroupVo): Promise<void> {
+  return defHttp.post<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.JSON,
+      region,
+    },
+  );
+}
+
+/**
+ * 修改
+ * @param data
+ */
+export function update(data: UpdateSysUserGroupVo): Promise<void> {
+  return defHttp.put<void>(
+    {
+      url: baseUrl,
+      data,
+    },
+    {
+      contentType: ContentTypeEnum.JSON,
+      region,
+    },
+  );
+}
diff --git a/src/api/system/user-group/model/createSysUserGroupVo.ts b/src/api/system/user-group/model/createSysUserGroupVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..187d0eeae7ebfcf50dbf363e2ba293cc31c7eadc
--- /dev/null
+++ b/src/api/system/user-group/model/createSysUserGroupVo.ts
@@ -0,0 +1,26 @@
+export interface CreateSysUserGroupVo {
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 接收者类型
+   */
+  receiverType: number;
+
+  /**
+   * 接收者ID
+   */
+  receiverIds: Array<string>;
+
+  /**
+   * 消息类型
+   */
+  messageType: Array<number>;
+
+  /**
+   * 备注
+   */
+  description: string;
+}
diff --git a/src/api/system/user-group/model/getSysUserGroupBo.ts b/src/api/system/user-group/model/getSysUserGroupBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3338555df6f3af796bc9240ecb08896d07f954d1
--- /dev/null
+++ b/src/api/system/user-group/model/getSysUserGroupBo.ts
@@ -0,0 +1,36 @@
+export interface GetSysUserGroupBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 接收者类型
+   */
+  receiverType: number;
+
+  /**
+   * 接收者ID
+   */
+  receiverIds: Array<string>;
+
+  /**
+   * 消息类型
+   */
+  messageType: Array<number>;
+
+  /**
+   * 备注
+   */
+  description: string;
+
+  /**
+   * 状态
+   */
+  available: boolean;
+}
diff --git a/src/api/system/user-group/model/querySysUserGroupBo.ts b/src/api/system/user-group/model/querySysUserGroupBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..537cea7faef489e16d460501b285636d29d97a73
--- /dev/null
+++ b/src/api/system/user-group/model/querySysUserGroupBo.ts
@@ -0,0 +1,41 @@
+export interface QuerySysUserGroupBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 接收者类型
+   */
+  receiverType: string;
+
+  /**
+   * 消息类型
+   */
+  messageType: Array<number>;
+
+  /**
+   * 备注
+   */
+  description: string;
+
+  /**
+   * 创建人
+   */
+  createBy: string;
+
+  /**
+   * 创建时间
+   */
+  createTime: string;
+
+  /**
+   * 状态
+   */
+  available: boolean;
+}
diff --git a/src/api/system/user-group/model/querySysUserGroupVo.ts b/src/api/system/user-group/model/querySysUserGroupVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9d1b96ab335f961cc76df67db6e349f42acf325b
--- /dev/null
+++ b/src/api/system/user-group/model/querySysUserGroupVo.ts
@@ -0,0 +1,23 @@
+import { SortPageVo } from '@/api/model/sortPageVo';
+
+export interface QuerySysUserGroupVo extends SortPageVo {
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 创建时间 起始时间
+   */
+  createTimeStart: string;
+
+  /**
+   * 创建时间 截止时间
+   */
+  createTimeEnd: string;
+
+  /**
+   * 状态
+   */
+  available: boolean;
+}
diff --git a/src/api/system/user-group/model/sysUserGroupSelectorBo.ts b/src/api/system/user-group/model/sysUserGroupSelectorBo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77c0116b1f40a2976be53bbd3e7bba7bd0d9acfe
--- /dev/null
+++ b/src/api/system/user-group/model/sysUserGroupSelectorBo.ts
@@ -0,0 +1,16 @@
+export interface SysUserGroupSelectorBo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 状态
+   */
+  available: boolean;
+}
diff --git a/src/api/system/user-group/model/sysUserGroupSelectorVo.ts b/src/api/system/user-group/model/sysUserGroupSelectorVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b49249f12ed5e04ce2dad3fa6d2caf068e3d2796
--- /dev/null
+++ b/src/api/system/user-group/model/sysUserGroupSelectorVo.ts
@@ -0,0 +1,13 @@
+import { PageVo } from '@/api/model/pageVo';
+
+export interface SysUserGroupSelectorVo extends PageVo {
+  /**
+   * 名称
+   */
+  name: string;
+
+  /**
+   * 状态
+   */
+  available: boolean;
+}
diff --git a/src/api/system/user-group/model/updateSysUserGroupVo.ts b/src/api/system/user-group/model/updateSysUserGroupVo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34aded536d196e5194d43daaa1d55fd55e73f580
--- /dev/null
+++ b/src/api/system/user-group/model/updateSysUserGroupVo.ts
@@ -0,0 +1,13 @@
+import { CreateSysUserGroupVo } from '@/api/system/user-group/model/createSysUserGroupVo';
+
+export interface UpdateSysUserGroupVo extends CreateSysUserGroupVo {
+  /**
+   * ID
+   */
+  id: string;
+
+  /**
+   * 状态
+   */
+  available: boolean;
+}
diff --git a/src/components/BpmApprove/index.ts b/src/components/BpmApprove/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..489670686908a0fc5883344287a99c8a5c9ea3a4
--- /dev/null
+++ b/src/components/BpmApprove/index.ts
@@ -0,0 +1,15 @@
+import BpmApprove from './src/BpmApprove.vue';
+import BpmApproveHis from './src/ApproveHis.vue'
+
+// 自定义业务组件
+import PurchaseOrderViewer from '@/views/sc/purchase/order/viewer.vue';
+
+const install = function (Vue) {
+  Vue.component('BpmApprove', BpmApprove);
+  Vue.component('BpmApproveHis', BpmApproveHis);
+  // 系统功能自定义组件
+  Vue.component('PurchaseOrderViewer', PurchaseOrderViewer);
+};
+export default {
+  install,
+};
diff --git a/src/components/BpmApprove/src/ApproveDialog.vue b/src/components/BpmApprove/src/ApproveDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6aac984cdc3d4f120e28f1ff2a3fb511bb4b907e
--- /dev/null
+++ b/src/components/BpmApprove/src/ApproveDialog.vue
@@ -0,0 +1,132 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="500px"
+    :title="_title"
+    :style="{ top: '20px' }"
+  >
+    <div v-if="visible">
+      <a-form
+        ref="form"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="说明" name="message">
+          <a-textarea v-model:value.trim="formData.message" max-length="200" allow-clear />
+        </a-form-item>
+        <a-form-item v-if="!$utils.isEmpty(_messageList)" label="快捷说明">
+          <a-tag
+            v-for="(item, index) in _messageList"
+            class="cursor-pointer"
+            :key="index"
+            @click="() => (formData.message += item)"
+            >{{ item }}</a-tag
+          >
+        </a-form-item>
+      </a-form>
+    </div>
+    <template #footer>
+      <div style="text-align: center">
+        <a-button type="primary" :loading="loading" @click="submit">确定</a-button>
+        <a-button :loading="loading" @click="closeDialog">关闭</a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {},
+    props: {
+      approveType: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          message: [{ required: true, message: '请输入说明' }],
+        },
+      };
+    },
+    computed: {
+      _title() {
+        if ('pass' === this.approveType) {
+          return '通过';
+        } else if ('refuse' === this.approveType) {
+          return '退回';
+        } else if ('undo' === this.approveType) {
+          return '撤回';
+        } else {
+          return '';
+        }
+      },
+      _messageList() {
+        if ('pass' === this.approveType) {
+          return ['同意', '通过', '收到'];
+        } else if ('refuse' === this.approveType) {
+          return ['退回', '拒绝', '拒绝通过'];
+        } else if ('undo' === this.approveType) {
+          return ['填写错误，需撤回', '重新发起', '撤回'];
+        } else if ('reject' === this.approveType) {
+          return ['反对'];
+        } else {
+          return [];
+        }
+      },
+    },
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          message: '',
+        };
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+      },
+      // 提交
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.$emit('confirm', {
+              message: this.formData.message,
+              approveType: this.approveType,
+            });
+            this.closeDialog();
+          }
+        });
+      },
+    },
+  });
+</script>
+<style></style>
diff --git a/src/components/BpmApprove/src/ApproveHis.vue b/src/components/BpmApprove/src/ApproveHis.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab8e26ea06028cbf9597bd44730dc902f11c6b09
--- /dev/null
+++ b/src/components/BpmApprove/src/ApproveHis.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <a-collapse v-model:active-key="activeKey" v-for="item in formData" :key="item.id" accordion>
+      <a-collapse-panel :key="item.id" :header="item.title">
+        <flow-chart :instance-id="item.id" />
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import FlowChart from '@/components/FlowChart';
+  import * as api from '@/api/bpm/flow/instance';
+
+  export default defineComponent({
+    components: { FlowChart },
+    props: {
+      businessId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: [],
+        activeKey: [],
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 初始化表单数据
+      initFormData() {
+        api.listBusiness(this.businessId).then((res) => {
+          this.formData = res;
+
+          this.activeKey = this.$utils.isEmpty(this.formData) ? '' : this.formData[0].id;
+        });
+      },
+    },
+  });
+</script>
+<style></style>
diff --git a/src/components/BpmApprove/src/BpmApprove.vue b/src/components/BpmApprove/src/BpmApprove.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c7ff19508c642dc697b9fc2f09d1cb93313fa60d
--- /dev/null
+++ b/src/components/BpmApprove/src/BpmApprove.vue
@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <a-modal
+      v-model:open="visible"
+      :mask-closable="false"
+      width="75%"
+      :title="_title"
+      :style="{ top: '20px' }"
+    >
+      <div v-if="visible">
+        <a-tabs v-model:activeKey="activeKey">
+          <a-tab-pane key="detail" tab="详情"
+            ><component ref="comp" :is="componentPath" :id="businessId" is-form
+          /></a-tab-pane>
+          <a-tab-pane key="flowChart" tab="流程图"
+            ><flow-chart v-if="activeKey === 'flowChart'" :instance-id="instanceId"
+          /></a-tab-pane>
+          <a-tab-pane key="approveHis" tab="审核历史"
+            ><bpm-approve-his v-if="activeKey === 'approveHis'" :business-id="businessId"
+          /></a-tab-pane>
+        </a-tabs>
+      </div>
+      <template #footer>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button
+              v-if="showApprovePassBtn"
+              type="primary"
+              :loading="loading"
+              @click="() => onHandle('pass')"
+              >通过</a-button
+            >
+            <a-button
+              v-if="showRejectBtn"
+              type="primary"
+              danger
+              :loading="loading"
+              @click="() => onHandle('reject')"
+              >反对</a-button
+            >
+            <a-button
+              v-if="showApproveRefuseBtn"
+              type="primary"
+              danger
+              :loading="loading"
+              @click="() => onHandle('refuse')"
+              >退回</a-button
+            >
+            <a-button
+              v-if="showUndoBtn"
+              type="primary"
+              :loading="loading"
+              @click="() => onHandle('undo')"
+              >撤回</a-button
+            >
+          </a-space>
+        </div>
+      </template>
+    </a-modal>
+
+    <approve-dialog ref="approveDialog" :approve-type="approveType" @confirm="confirmApprove" />
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import FlowChart from '@/components/FlowChart';
+  import ApproveDialog from './ApproveDialog.vue';
+  import * as api from '@/api/bpm/flow/task';
+  import * as instanceApi from '@/api/bpm/flow/instance';
+
+  export default defineComponent({
+    name: 'BpmApprove',
+    components: { FlowChart, ApproveDialog },
+    props: {
+      taskId: {
+        type: String,
+        default: '',
+      },
+      instanceId: {
+        type: String,
+        required: true,
+      },
+      businessId: {
+        type: String,
+        required: true,
+      },
+      componentPath: {
+        type: String,
+        required: true,
+      },
+      /**
+       * 页面来源
+       * todo: 待办任务
+       * my: 我的任务
+       */
+      pageFrom: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        loading: false,
+        visible: false,
+        activeKey: 'detail',
+        approveType: '',
+        instanceStatus: '',
+        cooperateType: '',
+      };
+    },
+    computed: {
+      _title() {
+        if ('todo' === this.pageFrom) {
+          return '审核';
+        }
+
+        return '';
+      },
+      showApprovePassBtn() {
+        return 'todo' === this.pageFrom;
+      },
+      showApproveRefuseBtn() {
+        return 'todo' === this.pageFrom && !this.showRejectBtn;
+      },
+      showUndoBtn() {
+        return (
+          'my' === this.pageFrom &&
+          this.$enums.FLOW_INSTANCE_STATUS.APPROVING.equalsCode(this.instanceStatus)
+        );
+      },
+      showRejectBtn() {
+        return (
+          'todo' === this.pageFrom &&
+          this.$enums.FLOW_COOPERATE_TYPE.VOTE.equalsCode(this.cooperateType)
+        );
+      },
+    },
+    mounted() {},
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+      },
+      initFormData() {
+        this.activeKey = 'detail';
+
+        this.approveType = '';
+
+        this.instanceStatus = '';
+
+        this.cooperateType = '';
+        if ('my' === this.pageFrom) {
+          instanceApi.getStatus(this.instanceId).then((status) => {
+            this.instanceStatus = status;
+          });
+        } else if ('todo' === this.pageFrom) {
+          api.getCooperateType(this.taskId).then((cooperateType) => {
+            this.cooperateType = cooperateType;
+          });
+        }
+      },
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      onHandle(approveType) {
+        this.approveType = approveType;
+        this.$refs.approveDialog.openDialog();
+      },
+      confirmApprove({ approveType, message }) {
+        const variables = this.$refs.comp.getFormData();
+        if (approveType === 'pass') {
+          this.loading = true;
+          api
+            .approvePass({
+              taskId: this.taskId,
+              message,
+              variables,
+            })
+            .then(() => {
+              this.$emit('confirm');
+              this.$msg.createSuccess('通过成功！');
+              this.closeDialog();
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        } else if (approveType === 'refuse') {
+          this.loading = true;
+          api
+            .approveRefuse({
+              taskId: this.taskId,
+              message,
+              variables,
+            })
+            .then(() => {
+              this.$emit('confirm');
+              this.$msg.createSuccess('退回成功！');
+              this.closeDialog();
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        } else if (approveType === 'undo') {
+          this.loading = true;
+          api
+            .undo({
+              instanceId: this.instanceId,
+              message,
+              variables,
+            })
+            .then(() => {
+              this.$emit('confirm');
+              this.$msg.createSuccess('撤回成功！');
+              this.closeDialog();
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        } else if (approveType === 'reject') {
+          this.loading = true;
+          api
+            .reject({
+              taskId: this.taskId,
+              message,
+              variables,
+            })
+            .then(() => {
+              this.$emit('confirm');
+              this.$msg.createSuccess('反对成功！');
+              this.closeDialog();
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        }
+      },
+    },
+  });
+</script>
+<style scoped></style>
diff --git a/src/components/ChartCard/src/ChartCard.vue b/src/components/ChartCard/src/ChartCard.vue
index 6326a975bedf11399b746841b5b2ac7079764bbd..716bf59a141fde731e8b738967dbfa4ca64f18cd 100644
--- a/src/components/ChartCard/src/ChartCard.vue
+++ b/src/components/ChartCard/src/ChartCard.vue
@@ -8,7 +8,7 @@
         </span>
       </div>
       <div class="total"
-        ><span><count-to prefix="￥" :startVal="0" :endVal="total" /></span
+        ><span><count-to prefix="￥" :startVal="0" :endVal="total" :decimals="2" /></span
       ></div>
     </div>
     <div class="chart-card-content">
diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue
index 37ab7db26b5ce0b85bb191c3baabd4cdf72678d4..3c56da07d42540416d6f2a3f8bffb09945542c28 100644
--- a/src/components/CodeEditor/src/CodeEditor.vue
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full">
+  <div class="h-lg">
     <CodeMirrorEditor
       :value="getValue"
       @change="handleValueChange"
diff --git a/src/components/CronPicker/src/CronPicker.vue b/src/components/CronPicker/src/CronPicker.vue
index a94286d64e589f465fe2a7c3fbacb9c25f892962..ea99d162a4e57c27787be9a602452eda999bbb4c 100644
--- a/src/components/CronPicker/src/CronPicker.vue
+++ b/src/components/CronPicker/src/CronPicker.vue
@@ -68,7 +68,6 @@
         this.$emit('change', this.cron);
       },
       handleOK(val, a) {
-        console.log(val);
         this.cron = val;
         this.$emit('update:value', this.cron);
         // this.$emit("change", Object.assign({},  this.cron));
diff --git a/src/components/CustomList/src/CustomList.vue b/src/components/CustomList/src/CustomList.vue
index 33c4f5cae69dee723228af7f67b10fc6bb4185a0..7d089ccc9ece2aeb32a527d40b76c3fbc210d558 100644
--- a/src/components/CustomList/src/CustomList.vue
+++ b/src/components/CustomList/src/CustomList.vue
@@ -26,7 +26,7 @@
         >
           <template v-if="!$utils.isEmpty(queryParams)" #form>
             <j-border>
-              <j-form :label-width="listConfig.labelWidth + 'px'">
+              <j-form bordered :label-width="listConfig.labelWidth + 'px'">
                 <j-form-item
                   v-for="queryParam in queryParams"
                   :key="queryParam.tableAlias + '_' + queryParam.columnName"
diff --git a/src/components/DataPermission/batch.vue b/src/components/DataPermission/batch.vue
index 5e96c2afa40a74df1669393855d4c08a24cbf038..2569eea7dc4dbdf151132e2a252bf89e690c3127 100644
--- a/src/components/DataPermission/batch.vue
+++ b/src/components/DataPermission/batch.vue
@@ -7,7 +7,7 @@
     :style="{ top: '20px' }"
     :footer="null"
   >
-    <j-form :enable-collapse="false">
+    <j-form bordered :enable-collapse="false">
       <j-form-item
         v-for="item in $enums.SYS_DATA_PERMISSION_DATA_PERMISSION_TYPE.values()"
         :key="item.code"
diff --git a/src/components/DataPermission/index.vue b/src/components/DataPermission/index.vue
index 66d93bd086c801b312580017409e2148326444dd..4f15fe443173a5d12687cc08baed7ad93f302eb6 100644
--- a/src/components/DataPermission/index.vue
+++ b/src/components/DataPermission/index.vue
@@ -7,7 +7,7 @@
     :style="{ top: '20px' }"
     :footer="null"
   >
-    <j-form :enable-collapse="false">
+    <j-form bordered :enable-collapse="false">
       <j-form-item
         v-for="item in $enums.SYS_DATA_PERMISSION_DATA_PERMISSION_TYPE.values()"
         :key="item.code"
diff --git a/src/components/DialogTable/src/DialogTable.vue b/src/components/DialogTable/src/DialogTable.vue
index 8b53c10d1649cc88acc9cd137f5063f91784af3f..a3628af02cc752b4fad8fa35ca5a6d01dcc41cad 100644
--- a/src/components/DialogTable/src/DialogTable.vue
+++ b/src/components/DialogTable/src/DialogTable.vue
@@ -147,12 +147,6 @@
       multiple: { type: Boolean, default: false },
       placeholder: { type: String, default: '' },
       title: { type: String, default: '选择' },
-      option: {
-        type: Object,
-        default: () => {
-          return { label: 'name', value: 'id' };
-        },
-      },
       columnOption: {
         type: Object,
         default: () => {
diff --git a/src/components/FlowChart/index.ts b/src/components/FlowChart/index.ts
index edbeb5591975cdf3354b6e1f9d0f528521c6ff84..0ed8a5ed41218c04a4e44ec7bc62214a6619eca0 100644
--- a/src/components/FlowChart/index.ts
+++ b/src/components/FlowChart/index.ts
@@ -1,4 +1,3 @@
-import { withInstall } from '/@/utils';
-import flowChart from './src/FlowChart.vue';
+import FlowChart from './src/FlowChart.vue';
 
-export const FlowChart = withInstall(flowChart);
+export default FlowChart;
diff --git a/src/components/FlowChart/src/FlowChart.vue b/src/components/FlowChart/src/FlowChart.vue
index 419b0fea7f6353fc2008b54aa8d66edd10441155..959111b2f50e6f7ae95b4442f4f57796e1a0ff60 100644
--- a/src/components/FlowChart/src/FlowChart.vue
+++ b/src/components/FlowChart/src/FlowChart.vue
@@ -1,158 +1,60 @@
 <template>
-  <div class="h-full" :class="prefixCls">
-    <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" />
-    <div ref="lfElRef" class="h-full"></div>
-    <BasicModal @register="register" title="流程数据" width="50%">
-      <JsonPreview :data="graphData" />
-    </BasicModal>
+  <div
+    :style="{
+      height: $utils.isEmpty(height) ? 80 * $vh + 'px' : height,
+      width: $utils.isEmpty(width) ? '100%' : width,
+    }"
+  >
+    <iframe
+      class="w-full h-full"
+      scrolling="no"
+      :src="
+        apiUrl +
+        '/warm-flow-ui/index.html?id=' +
+        instanceId +
+        '&type=FlowChart' +
+        '&token=' +
+        token +
+        '&uuid=' +
+        $utils.uuid()
+      "
+    ></iframe>
   </div>
 </template>
-<script lang="ts">
-  import type { Ref } from 'vue';
-  import type { Definition } from '@logicflow/core';
-  import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue';
-  import FlowChartToolbar from './FlowChartToolbar.vue';
-  import LogicFlow from '@logicflow/core';
-  import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useAppStore } from '/@/store/modules/app';
-  import { createFlowChartContext } from './useFlowContext';
-  import { toLogicFlowData } from './adpterForTurbo';
-  import { useModal, BasicModal } from '/@/components/Modal';
-  import { JsonPreview } from '/@/components/CodeEditor';
-  import { configDefaultDndPanel } from './config';
-  import '@logicflow/core/dist/style/index.css';
-  import '@logicflow/extension/lib/style/index.css';
+<script>
+  import { defineComponent } from 'vue';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { getToken } from '@/utils/auth';
 
   export default defineComponent({
     name: 'FlowChart',
-    components: { BasicModal, FlowChartToolbar, JsonPreview },
+    components: {},
     props: {
-      flowOptions: {
-        type: Object as PropType<Definition>,
-        default: () => ({}),
+      instanceId: {
+        type: String,
+        required: true,
       },
-
-      data: {
-        type: Object as PropType<any>,
-        default: () => ({}),
-      },
-
-      toolbar: {
-        type: Boolean,
-        default: true,
+      height: {
+        type: String,
+        default: '',
       },
-      patternItems: {
-        type: Array,
+      width: {
+        type: String,
+        default: '',
       },
     },
-    setup(props) {
-      const lfElRef = ref(null);
-      const graphData = ref({});
-
-      const lfInstance = ref(null) as Ref<LogicFlow | null>;
-
-      const { prefixCls } = useDesign('flow-chart');
-      const appStore = useAppStore();
-      const [register, { openModal }] = useModal();
-      createFlowChartContext({
-        logicFlow: lfInstance as unknown as LogicFlow,
-      });
-
-      const getFlowOptions = computed(() => {
-        const { flowOptions } = props;
-
-        const defaultOptions: Partial<Definition> = {
-          grid: true,
-          background: {
-            color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
-          },
-          keyboard: {
-            enabled: true,
-          },
-          ...flowOptions,
-        };
-        return defaultOptions as Definition;
-      });
-
-      watch(
-        () => props.data,
-        () => {
-          onRender();
-        },
-      );
-
-      // TODO
-      // watch(
-      //   () => appStore.getDarkMode,
-      //   () => {
-      //     init();
-      //   }
-      // );
-
-      watch(
-        () => unref(getFlowOptions),
-        (options) => {
-          unref(lfInstance)?.updateEditConfig(options);
-        },
-      );
-
-      // init logicFlow
-      async function init() {
-        await nextTick();
-
-        const lfEl = unref(lfElRef);
-        if (!lfEl) {
-          return;
-        }
-        LogicFlow.use(DndPanel);
-
-        // Canvas configuration
-        LogicFlow.use(Snapshot);
-        // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo
-        LogicFlow.use(BpmnElement);
-        // Start the right-click menu
-        LogicFlow.use(Menu);
-        LogicFlow.use(SelectionSelect);
-
-        lfInstance.value = new LogicFlow({
-          ...unref(getFlowOptions),
-          container: lfEl,
-        });
-        const lf = unref(lfInstance)!;
-        lf?.setDefaultEdgeType('line');
-        onRender();
-        lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
-      }
-
-      async function onRender() {
-        await nextTick();
-        const lf = unref(lfInstance);
-        if (!lf) {
-          return;
-        }
-        const lFData = toLogicFlowData(props.data);
-        lf.render(lFData);
-      }
-
-      function handlePreview() {
-        const lf = unref(lfInstance);
-        if (!lf) {
-          return;
-        }
-        graphData.value = unref(lf).getGraphData();
-        openModal();
-      }
-
-      onMounted(init);
+    data() {
+      return {};
+    },
+    computed: {
+      apiUrl() {
+        const { apiUrl, cloudEnable } = useGlobSetting();
 
-      return {
-        register,
-        prefixCls,
-        lfElRef,
-        handlePreview,
-        graphData,
-      };
+        return `${apiUrl}${cloudEnable === 'true' ? '/cloud-api' : ''}`;
+      },
+      token() {
+        return getToken();
+      },
     },
   });
 </script>
diff --git a/src/components/FlowChart/src/FlowChartToolbar.vue b/src/components/FlowChart/src/FlowChartToolbar.vue
deleted file mode 100644
index e2d05c49857d25a1d4d3eb3775370a8e84b53e48..0000000000000000000000000000000000000000
--- a/src/components/FlowChart/src/FlowChartToolbar.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div :class="`${prefixCls}-toolbar`" class="flex items-center px-2 py-1">
-    <template v-for="item in toolbarItemList" :key="item.type">
-      <Tooltip placement="bottom" v-bind="item.disabled ? { visible: false } : {}">
-        <template #title>{{ item.tooltip }}</template>
-        <span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
-          <Icon
-            :icon="item.icon"
-            :class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'"
-          />
-        </span>
-      </Tooltip>
-      <Divider v-if="item.separate" type="vertical" />
-    </template>
-  </div>
-</template>
-<script lang="ts">
-  import type { ToolbarConfig } from './types';
-
-  import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
-  import { Divider, Tooltip } from 'ant-design-vue';
-  import Icon from '@/components/Icon/Icon.vue';
-
-  import { useFlowChartContext } from './useFlowContext';
-  import { ToolbarTypeEnum } from './enum';
-
-  export default defineComponent({
-    name: 'FlowChartToolbar',
-    components: { Icon, Divider, Tooltip },
-    props: {
-      prefixCls: String,
-    },
-    emits: ['view-data'],
-    setup(_, { emit }) {
-      const toolbarItemList = ref<ToolbarConfig[]>([
-        {
-          type: ToolbarTypeEnum.ZOOM_IN,
-          icon: 'codicon:zoom-out',
-          tooltip: '缩小',
-        },
-        {
-          type: ToolbarTypeEnum.ZOOM_OUT,
-          icon: 'codicon:zoom-in',
-          tooltip: '放大',
-        },
-        {
-          type: ToolbarTypeEnum.RESET_ZOOM,
-          icon: 'codicon:screen-normal',
-          tooltip: '重置比例',
-        },
-        { separate: true },
-        {
-          type: ToolbarTypeEnum.UNDO,
-          icon: 'ion:arrow-undo-outline',
-          tooltip: '后退',
-          disabled: true,
-        },
-        {
-          type: ToolbarTypeEnum.REDO,
-          icon: 'ion:arrow-redo-outline',
-          tooltip: '前进',
-          disabled: true,
-        },
-        { separate: true },
-        {
-          type: ToolbarTypeEnum.SNAPSHOT,
-          icon: 'ion:download-outline',
-          tooltip: '下载',
-        },
-        {
-          type: ToolbarTypeEnum.VIEW_DATA,
-          icon: 'carbon:document-view',
-          tooltip: '查看数据',
-        },
-      ]);
-
-      const { logicFlow } = useFlowChartContext();
-
-      function onHistoryChange({ data: { undoAble, redoAble } }) {
-        const itemsList = unref(toolbarItemList);
-        const undoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.UNDO);
-        const redoIndex = itemsList.findIndex((item) => item.type === ToolbarTypeEnum.REDO);
-        if (undoIndex !== -1) {
-          unref(toolbarItemList)[undoIndex].disabled = !undoAble;
-        }
-        if (redoIndex !== -1) {
-          unref(toolbarItemList)[redoIndex].disabled = !redoAble;
-        }
-      }
-
-      const onControl = (item) => {
-        const lf = unref(logicFlow);
-        if (!lf) {
-          return;
-        }
-        switch (item.type) {
-          case ToolbarTypeEnum.ZOOM_IN:
-            lf.zoom();
-            break;
-          case ToolbarTypeEnum.ZOOM_OUT:
-            lf.zoom(true);
-            break;
-          case ToolbarTypeEnum.RESET_ZOOM:
-            lf.resetZoom();
-            break;
-          case ToolbarTypeEnum.UNDO:
-            lf.undo();
-            break;
-          case ToolbarTypeEnum.REDO:
-            lf.redo();
-            break;
-          case ToolbarTypeEnum.SNAPSHOT:
-            lf.getSnapshot();
-            break;
-          case ToolbarTypeEnum.VIEW_DATA:
-            emit('view-data');
-            break;
-        }
-      };
-
-      watchEffect(async () => {
-        if (unref(logicFlow)) {
-          await nextTick();
-          unref(logicFlow)?.on('history:change', onHistoryChange);
-        }
-      });
-
-      onUnmounted(() => {
-        unref(logicFlow)?.off('history:change', onHistoryChange);
-      });
-      return { toolbarItemList, onControl };
-    },
-  });
-</script>
-<style lang="less">
-  @prefix-cls: ~'@{namespace}-flow-chart-toolbar';
-
-  html[data-theme='dark'] {
-    .lf-dnd {
-      background: #080808;
-    }
-  }
-  .@{prefix-cls} {
-    height: 36px;
-    border-bottom: 1px solid @border-color-base;
-    background-color: @app-content-background;
-
-    .disabeld {
-      color: @disabled-color;
-    }
-
-    &__icon {
-      display: inline-block;
-      margin-right: 10px;
-      padding: 2px 4px;
-
-      &:hover {
-        color: @primary-color;
-      }
-    }
-  }
-</style>
diff --git a/src/components/FlowChart/src/adpterForTurbo.ts b/src/components/FlowChart/src/adpterForTurbo.ts
deleted file mode 100644
index b68b276c3b8580ff27237cedfe5c6bb1b0996651..0000000000000000000000000000000000000000
--- a/src/components/FlowChart/src/adpterForTurbo.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-const TurboType = {
-  SEQUENCE_FLOW: 1,
-  START_EVENT: 2,
-  END_EVENT: 3,
-  USER_TASK: 4,
-  SERVICE_TASK: 5,
-  EXCLUSIVE_GATEWAY: 6,
-};
-
-function convertFlowElementToEdge(element) {
-  const { incoming, outgoing, properties, key } = element;
-  const { text, startPoint, endPoint, pointsList, logicFlowType } = properties;
-  const edge = {
-    id: key,
-    type: logicFlowType,
-    sourceNodeId: incoming[0],
-    targetNodeId: outgoing[0],
-    text,
-    startPoint,
-    endPoint,
-    pointsList,
-    properties: {},
-  };
-  const excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType'];
-  Object.keys(element.properties).forEach((property) => {
-    if (excludeProperties.indexOf(property) === -1) {
-      edge.properties[property] = element.properties[property];
-    }
-  });
-  return edge;
-}
-
-function convertFlowElementToNode(element) {
-  const { properties, key } = element;
-  const { x, y, text, logicFlowType } = properties;
-  const node = {
-    id: key,
-    type: logicFlowType,
-    x,
-    y,
-    text,
-    properties: {},
-  };
-  const excludeProperties = ['x', 'y', 'text', 'logicFlowType'];
-  Object.keys(element.properties).forEach((property) => {
-    if (excludeProperties.indexOf(property) === -1) {
-      node.properties[property] = element.properties[property];
-    }
-  });
-  return node;
-}
-
-export function toLogicFlowData(data) {
-  const lfData: {
-    // TODO type
-    nodes: any[];
-    edges: any[];
-  } = {
-    nodes: [],
-    edges: [],
-  };
-  const list = data.flowElementList;
-  list &&
-    list.length > 0 &&
-    list.forEach((element) => {
-      if (element.type === TurboType.SEQUENCE_FLOW) {
-        const edge = convertFlowElementToEdge(element);
-        lfData.edges.push(edge);
-      } else {
-        const node = convertFlowElementToNode(element);
-        lfData.nodes.push(node);
-      }
-    });
-  return lfData;
-}
diff --git a/src/components/FlowChart/src/config.ts b/src/components/FlowChart/src/config.ts
deleted file mode 100644
index 4f10d2ca8991bcdef1c95218412f87834928915e..0000000000000000000000000000000000000000
--- a/src/components/FlowChart/src/config.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-export const nodeList = [
-  {
-    text: '开始',
-    type: 'start',
-    class: 'node-start',
-  },
-  {
-    text: '矩形',
-    type: 'rect',
-    class: 'node-rect',
-  },
-  {
-    type: 'user',
-    text: '用户',
-    class: 'node-user',
-  },
-  {
-    type: 'push',
-    text: '推送',
-    class: 'node-push',
-  },
-  {
-    type: 'download',
-    text: '位置',
-    class: 'node-download',
-  },
-  {
-    type: 'end',
-    text: '结束',
-    class: 'node-end',
-  },
-];
-
-export const BpmnNode = [
-  {
-    type: 'bpmn:startEvent',
-    text: '开始',
-    class: 'bpmn-start',
-  },
-  {
-    type: 'bpmn:endEvent',
-    text: '结束',
-    class: 'bpmn-end',
-  },
-  {
-    type: 'bpmn:exclusiveGateway',
-    text: '网关',
-    class: 'bpmn-exclusiveGateway',
-  },
-  {
-    type: 'bpmn:userTask',
-    text: '用户',
-    class: 'bpmn-user',
-  },
-];
-
-export function configDefaultDndPanel(lf) {
-  return [
-    {
-      text: '选区',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
-      callback: () => {
-        lf.updateEditConfig({
-          stopMoveGraph: true,
-        });
-      },
-    },
-    {
-      type: 'circle',
-      text: '开始',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==',
-    },
-    {
-      type: 'rect',
-      text: '用户任务',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
-      cls: 'important-node',
-    },
-    {
-      type: 'rect',
-      text: '系统任务',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
-      cls: 'import_icon',
-    },
-    {
-      type: 'diamond',
-      text: '条件判断',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII=',
-    },
-    {
-      type: 'circle',
-      text: '结束',
-      icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
-    },
-  ];
-}
diff --git a/src/components/FlowChart/src/enum.ts b/src/components/FlowChart/src/enum.ts
deleted file mode 100644
index 8ea134ca5eba3580d75f23754ee59df02be24441..0000000000000000000000000000000000000000
--- a/src/components/FlowChart/src/enum.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum ToolbarTypeEnum {
-  ZOOM_IN = 'zoomIn',
-  ZOOM_OUT = 'zoomOut',
-  RESET_ZOOM = 'resetZoom',
-
-  UNDO = 'undo',
-  REDO = 'redo',
-
-  SNAPSHOT = 'snapshot',
-  VIEW_DATA = 'viewData',
-}
diff --git a/src/components/FlowChart/src/types.ts b/src/components/FlowChart/src/types.ts
deleted file mode 100644
index 94992ba1a1edb71eec011f5387095fe726b242c9..0000000000000000000000000000000000000000
--- a/src/components/FlowChart/src/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NodeConfig } from '@logicflow/core';
-import { ToolbarTypeEnum } from './enum';
-
-export interface NodeItem extends NodeConfig {
-  icon: string;
-}
-
-export interface ToolbarConfig {
-  type?: string | ToolbarTypeEnum;
-  tooltip?: string | boolean;
-  icon?: string;
-  disabled?: boolean;
-  separate?: boolean;
-}
diff --git a/src/components/FlowChart/src/useFlowContext.ts b/src/components/FlowChart/src/useFlowContext.ts
deleted file mode 100644
index 7d15f3b3404386f229dc1a923be340376f578e5e..0000000000000000000000000000000000000000
--- a/src/components/FlowChart/src/useFlowContext.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type LogicFlow from '@logicflow/core';
-
-import { provide, inject } from 'vue';
-
-const key = Symbol('flow-chart');
-
-type Instance = {
-  logicFlow: LogicFlow;
-};
-
-export function createFlowChartContext(instance: Instance) {
-  provide(key, instance);
-}
-
-export function useFlowChartContext(): Instance {
-  return inject(key) as Instance;
-}
diff --git a/src/components/Form/src/components/ApiTransfer.vue b/src/components/Form/src/components/ApiTransfer.vue
index 73516ff1688377a0061f07b0520f1f60ab3ba654..19619d6097a264f6b8d946f661d1f2967c90bd00 100644
--- a/src/components/Form/src/components/ApiTransfer.vue
+++ b/src/components/Form/src/components/ApiTransfer.vue
@@ -88,8 +88,6 @@
 
       function handleChange(keys: string[], direction: TransferDirection, moveKeys: string[]) {
         _targetKeys.value = keys;
-        console.log(direction);
-        console.log(moveKeys);
         emit('change', keys);
       }
 
diff --git a/src/components/JForm/src/JForm.vue b/src/components/JForm/src/JForm.vue
index b38b5409f727005b506b2fc87e715d055e8b7f51..f1264fc1faf0a7277da5cdf04b4360c60331d1e8 100644
--- a/src/components/JForm/src/JForm.vue
+++ b/src/components/JForm/src/JForm.vue
@@ -55,6 +55,10 @@
         type: Boolean,
         default: false,
       },
+      contentNest: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup() {
       const collapseStatus = ref(false);
diff --git a/src/components/JFormItem/src/JFormItem.vue b/src/components/JFormItem/src/JFormItem.vue
index f7a9dd086b5ee419d19a1fca1c0e57c4889ba476..f9aeeefa42124a4ab061d3e7049ebedf07ff21c7 100644
--- a/src/components/JFormItem/src/JFormItem.vue
+++ b/src/components/JFormItem/src/JFormItem.vue
@@ -1,26 +1,26 @@
 <template>
   <transition enter-active-class="animated fadeIn">
     <div v-show="visible && itemShow" :class="'j-form-item'" :style="{ width: itemWidth }">
-      <span
-        v-if="!hiddenLabel"
+      <div
+        v-if="!hiddenLabel && !(autoHiddenLabel && !$slots.default)"
         :class="_bordered ? 'j-form-item-label-border' : ''"
         class="j-form-item-label"
         :style="{ width: form.labelWidth, minWidth: form.labelWidth }"
       >
-        <span v-if="_required" class="j-form-item-required"></span>
-        <slot v-if="!(autoHiddenLabel && !$slots.default)" name="label"></slot>
-        <span v-if="!$slots.label">{{ autoHiddenLabel && !$slots.default ? '' : label }}</span>
-        <span>{{ autoHiddenLabel && !$slots.default ? '' : '：' }}</span>
-      </span>
-      <div
-        v-if="contentNest"
-        class="j-form-item-content"
-        :class="_bordered ? 'j-form-item-content-border' : ''"
-        :style="{ width: contentWidth }"
-      >
-        <slot></slot>
+        <div class="j-form-item-label-wrapper">
+          <span v-if="_required" class="j-form-item-required"></span>
+          <slot name="label"></slot>
+          <span v-if="!$slots.label">{{ label }}</span>
+          <span>{{ '：' }}</span>
+        </div>
+      </div>
+      <div class="j-form-item-content" :class="_bordered ? 'j-form-item-content-border' : ''">
+        <div
+          class="j-form-item-content-wrapper"
+          :style="{ width: _contentNest ? contentWidth : '100%' }"
+          ><slot></slot
+        ></div>
       </div>
-      <slot v-else></slot>
     </div>
   </transition>
 </template>
@@ -150,6 +150,9 @@
       _bordered() {
         return this.bordered || this.form?.bordered;
       },
+      _contentNest() {
+        return this.contentNest && (this.form?.contentNest ?? this.contentNest);
+      },
     },
   });
 </script>
diff --git a/src/components/MonacoEditor/src/MonacoEditor.vue b/src/components/MonacoEditor/src/MonacoEditor.vue
index 68beb193fa8813459538d71757a23c910d669eed..c27c4c166694cbaf06b3f8d307b1a6a9803ff3e9 100644
--- a/src/components/MonacoEditor/src/MonacoEditor.vue
+++ b/src/components/MonacoEditor/src/MonacoEditor.vue
@@ -143,7 +143,6 @@
       watch(
         () => props.readOnly,
         () => {
-          console.log('props.readOnly', props.readOnly);
           editor.updateOptions({ readOnly: props.readOnly });
         },
         { deep: true },
diff --git a/src/components/PrintDesigner/index.ts b/src/components/PrintDesigner/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a3b25a0892d9755f49e583512aa59b11511860a9
--- /dev/null
+++ b/src/components/PrintDesigner/index.ts
@@ -0,0 +1,6 @@
+import PrintDesigner from './src/PrintDesigner.vue';
+import lodop from './src/libs/lodop';
+
+export default PrintDesigner;
+
+export { lodop };
diff --git a/src/components/PrintDesigner/install.js b/src/components/PrintDesigner/install.js
new file mode 100644
index 0000000000000000000000000000000000000000..c834507ec3890765186eb10ffa418687c364a198
--- /dev/null
+++ b/src/components/PrintDesigner/install.js
@@ -0,0 +1,77 @@
+// import braidPic from './pic/index.vue'
+import braidTxt from './src/components/txt/index.vue';
+import {
+  settings as braidTxtSettings,
+  widgetName as braidTxtName,
+} from './src/components/txt/settings';
+import barCode from './src/components/bar-code/index.vue';
+import {
+  settings as braidBarCodeSettings,
+  widgetName as braidBarCodeName,
+} from './src/components/bar-code/settings';
+import table from './src/components/table/index.vue';
+import {
+  settings as braidTableSettings,
+  widgetName as braidTableName,
+} from './src/components/table/settings';
+import image from './src/components/image/index.vue';
+import {
+  settings as braidImageSettings,
+  widgetName as braidImageName,
+} from './src/components/image/settings';
+import html from './src/components/html/index.vue';
+import {
+  settings as braidHtmlSettings,
+  widgetName as braidHtmlName,
+} from './src/components/html/settings';
+import react from './src/components/react/index.vue';
+import {
+  settings as braidReactSettings,
+  widgetName as braidReactName,
+} from './src/components/react/settings';
+import page from './src/components/page/index.vue';
+import {
+  settings as braidPageSettings,
+  widgetName as braidPageName,
+} from './src/components/page/settings';
+
+import BarCodePanel from './src/components/bar-code/panel.vue';
+import HtmlPanel from './src/components/html/panel.vue';
+import ImagePanel from './src/components/image/panel.vue';
+import TxtPanel from './src/components/txt/panel.vue';
+import TablePanel from './src/components/table/panel.vue';
+import ReactPanel from './src/components/react/panel.vue';
+import PagePanel from './src/components/page/panel.vue';
+
+const install = function (Vue) {
+  Vue.component(braidTxtName, braidTxt);
+  Vue.component(braidBarCodeName, barCode);
+  Vue.component(braidTableName, table);
+  Vue.component(braidImageName, image);
+  Vue.component(braidHtmlName, html);
+  Vue.component(braidReactName, react);
+  Vue.component(braidPageName, page);
+  Vue.component(braidBarCodeName + 'Panel', BarCodePanel);
+  Vue.component(braidHtmlName + 'Panel', HtmlPanel);
+  Vue.component(braidImageName + 'Panel', ImagePanel);
+  Vue.component(braidTxtName + 'Panel', TxtPanel);
+  Vue.component(braidTableName + 'Panel', TablePanel);
+  Vue.component(braidReactName + 'Panel', ReactPanel);
+  Vue.component(braidPageName + 'Panel', PagePanel);
+};
+
+const getWidgetsSetting = function () {
+  return {
+    [braidTxtName]: braidTxtSettings,
+    [braidBarCodeName]: braidBarCodeSettings,
+    [braidTableName]: braidTableSettings,
+    [braidImageName]: braidImageSettings,
+    [braidHtmlName]: braidHtmlSettings,
+    [braidReactName]: braidReactSettings,
+    [braidPageName]: braidPageSettings,
+  };
+};
+export default {
+  install,
+  getWidgetsSetting,
+};
diff --git a/src/components/PrintDesigner/src/PrintDesigner.vue b/src/components/PrintDesigner/src/PrintDesigner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..831aebde5861c10e023af420cc77e9970f4e7cc8
--- /dev/null
+++ b/src/components/PrintDesigner/src/PrintDesigner.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="kr-designer" data-theme="kr-designer">
+    <viewport class="kr-designer-view" />
+    <div class="kr-designer-tool">
+      <div class="kr-designer-tool_con">
+        <panel class="control-panel" />
+      </div>
+      <div class="kr-designer-tool_bar">
+        <a-space>
+          <a-button size="small" type="primary" @click="saveTemp">保存</a-button>
+          <a-button size="small" @click="previewTemp">预览</a-button>
+        </a-space>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import Viewport from './viewport/index.vue';
+  import Panel from './panel/index.vue';
+  import cloneDeep from 'lodash/cloneDeep';
+  import { usePrintDesignerStore } from './store/printDesigner';
+
+  export default defineComponent({
+    name: 'PrintDesigner',
+    components: { Viewport, Panel },
+    props: {
+      widgetOptions: {
+        type: Array,
+        default: () => [],
+      },
+      tempValue: {
+        type: Object,
+        default: () => ({
+          title: 'demo',
+          width: 750,
+          height: 550,
+          pageWidth: 750,
+          pageHeight: 550,
+          tempItems: [],
+        }),
+      },
+      demoData: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    created() {
+      this.initTemp(this.tempValue, this.widgetOptions);
+    },
+    methods: {
+      // 保存模板
+      saveTemp() {
+        let page = this.printDesignerStore.page;
+        this.$emit('save', cloneDeep(page));
+      },
+      // 预览模板
+      previewTemp() {
+        let page = { ...this.printDesignerStore.page };
+        this.$lodop.preview(cloneDeep(page), [this.demoData]);
+      },
+
+      // 初始化设计器
+      initTemp(tempValue, widgetOptions) {
+        this.printDesignerStore.designerInit({
+          tempValue: cloneDeep(tempValue),
+          options: cloneDeep(widgetOptions),
+        });
+      },
+    },
+  });
+</script>
+
+<style lang="scss">
+  body,
+  html {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    box-sizing: border-box;
+  }
+  .kr-designer {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    .kr-designer-view {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .kr-designer-tool {
+      width: 400px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      .a-scrollbar__wrap {
+        overflow: auto;
+      }
+      &_con {
+        flex: 1;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
+      &_bar {
+        padding: 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .kr-form {
+    .a-form-item--mini.a-form-item {
+      margin-bottom: 10px;
+    }
+    .min-input {
+      width: 100px;
+    }
+    .unit-text {
+      font-size: 12px;
+      color: #999999;
+      margin-left: 5px;
+    }
+  }
+
+  .kr-collapse {
+    color: #555555;
+    width: 400px;
+
+    .a-collapse-item__header {
+      box-sizing: border-box;
+      padding-left: 10px;
+    }
+
+    .a-collapse-item__content {
+      box-sizing: border-box;
+      padding: 10px;
+    }
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/components/CommonSettings.ts b/src/components/PrintDesigner/src/components/CommonSettings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b575dfaed994766f870d5fb2ac5417c8f297fb66
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/CommonSettings.ts
@@ -0,0 +1,20 @@
+import { LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+
+export interface CommonSettings {
+  type: string;
+
+  isEdit: boolean;
+
+  draggable: boolean;
+
+  resizable: boolean;
+
+  width: number;
+  height: number;
+  left: number;
+  top: number;
+  title: string;
+  name: string;
+
+  style: LodopStyle;
+}
diff --git a/src/components/PrintDesigner/src/components/bar-code/PDF417.png b/src/components/PrintDesigner/src/components/bar-code/PDF417.png
new file mode 100644
index 0000000000000000000000000000000000000000..8eac90445a431b98a1d6bfc5dba7f3de389a6744
Binary files /dev/null and b/src/components/PrintDesigner/src/components/bar-code/PDF417.png differ
diff --git a/src/components/PrintDesigner/src/components/bar-code/QRCode.png b/src/components/PrintDesigner/src/components/bar-code/QRCode.png
new file mode 100644
index 0000000000000000000000000000000000000000..5948354a927c00409aa80e0ee24ee4f20f70bfdb
Binary files /dev/null and b/src/components/PrintDesigner/src/components/bar-code/QRCode.png differ
diff --git a/src/components/PrintDesigner/src/components/bar-code/barCode.png b/src/components/PrintDesigner/src/components/bar-code/barCode.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e853ac9b7e499d3c664ec5edad104297708d78c
Binary files /dev/null and b/src/components/PrintDesigner/src/components/bar-code/barCode.png differ
diff --git a/src/components/PrintDesigner/src/components/bar-code/index.vue b/src/components/PrintDesigner/src/components/bar-code/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2b306f857fb529ab9c821a85387a2f1ab75b3a2
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/bar-code/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="braid-barcode"
+    :style="{
+      position: 'absolute',
+      width: val.width + 'px',
+      height: val.height + 'px',
+      left: val.left + 'px',
+      top: val.top + 'px',
+      zIndex: val.zIndex,
+    }"
+  >
+    <img :src="codeUrl" />
+    <div
+      class="text"
+      :style="{
+        display: val.style.ShowBarText === '1' ? '' : 'none',
+        fontSize: val.style.FontSize + 'px',
+      }"
+      >1234567890</div
+    >
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import qrCodeImg from './QRCode.png';
+  import pdf417Img from './PDF417.png';
+  import barCodeImg from './barCode.png';
+  import { widgetName } from './settings';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      return {
+        qrCodeImg,
+        pdf417Img,
+        barCodeImg,
+      };
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      codeUrl() {
+        if (this.val.style.CodeType === 'QRCode') {
+          return qrCodeImg;
+        } else if (this.val.style.CodeType === 'PDF417') {
+          return pdf417Img;
+        } else {
+          return barCodeImg;
+        }
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .braid-barcode {
+    &:hover {
+      outline: 1px solid #ddd !important;
+    }
+    &.active {
+      outline: 1px solid #2196f3 !important;
+      &:hover {
+        outline: 1px solid #2196f3 !important;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      user-select: none;
+      -webkit-user-drag: none;
+      pointer-events: none;
+    }
+    .text {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      background-color: #ffffff;
+    }
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/components/bar-code/panel.vue b/src/components/PrintDesigner/src/components/bar-code/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f442cfa03c21dcbe83b4cc8ed7a863dc9d4b388
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/bar-code/panel.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="字号">
+            <a-input-number
+              v-model:value="activeElement.style.FontSize"
+              :min="1"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="条码值">
+            <a-switch
+              v-model:checked="activeElement.style.ShowBarText"
+              :checked-value="'1'"
+              :unchecked-value="'0'"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="条码类型">
+            <a-select v-model:value="activeElement.style.CodeType" class="min-input">
+              <a-select-option v-for="val in codeTypeArray" :key="val" :value="val">{{
+                val
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="打印类型">
+            <a-select v-model:value="activeElement.style.ItemType" class="min-input">
+              <a-select-option v-for="val in itemTypeArray" :value="val.value" :key="val.value">{{
+                val.label
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getCodeTypeArray, getItemTypeArray } from '../../libs/props.js';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    props: {
+      activeElement: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        codeTypeArray: getCodeTypeArray(),
+        itemTypeArray: getItemTypeArray(),
+      };
+    },
+    computed: {
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/bar-code/settings.ts b/src/components/PrintDesigner/src/components/bar-code/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c8cb760155b7c9722f04d59fbd9ded2fc9d0cd5
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/bar-code/settings.ts
@@ -0,0 +1,51 @@
+import { CommonSettings } from '../CommonSettings';
+import { LodopStyle, defaultStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm } from '../../utils/calc';
+
+export const widgetName: string = 'braid-barcode';
+
+export interface BarCodeLodopStyle extends LodopStyle {
+  /**
+   * 条码类型，字符型。目前支持的类型（条码规制）如下：
+   * 128A，128B，128C，128Auto，EAN8，EAN13，EAN128A，EAN128B，EAN128C，Code39，39Extended，2_5interleaved，2_5industrial，2_5matrix，UPC_A，UPC_E0，UPC_E1，UPCsupp2，UPCsupp5，Code93，93Extended，MSI，PostNet，Codabar，QRCode，PDF417。
+   * 其中QRCode和PDF417是二维码，其它为一维码。默认情况下“QRCode的版本”、“PDF417压缩模式”、“PDF417容错级别” “PDF417数据列数” “PDF417基条高(倍数)”等参数会根据宽度和高度自动调整，当然页面程序也可以直接设置它们的具体值。
+   */
+  CodeType: string;
+}
+
+export interface BarCodeWidgetSetting extends CommonSettings {
+  style: BarCodeLodopStyle;
+}
+
+export const settings: BarCodeWidgetSetting = {
+  type: widgetName,
+  isEdit: false,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 200,
+  height: 40,
+  left: 50,
+  top: 0,
+  title: '条码',
+  name: '',
+  style: {
+    ...defaultStyle,
+    FontSize: '9',
+    ShowBarText: '0', // 条码是否显示值 0--不显示 1--显示
+    CodeType: 'Code39', // 条码类型
+    ItemType: '0', // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: BarCodeWidgetSetting) {
+    LODOP.ADD_PRINT_BARCODE(
+      px2mm(printItem.top) + 'mm',
+      px2mm(printItem.left) + 'mm',
+      px2mm(printItem.width) + 'mm',
+      px2mm(printItem.height) + 'mm',
+      printItem.style.CodeType,
+      printItem.value,
+    );
+  },
+};
diff --git a/src/components/PrintDesigner/src/components/html/index.vue b/src/components/PrintDesigner/src/components/html/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21c8122c087d3c68c0e57b0a3efe3d80d24e9236
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/html/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div
+    class="widgets"
+    v-html="val.value"
+    :contenteditable="!!val.isEdit"
+    @blur="(e) => updateText(e, val.uuid)"
+    :style="{
+      position: 'absolute',
+      left: val.left + 'px',
+      top: val.top + 'px',
+      width: val.width + 'px',
+      minHeight: val.height + 'px',
+      zIndex: val.style.zIndex,
+      fontSize: val.style.FontSize + 'px',
+      color: val.style.FontColor,
+    }"
+  ></div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { widgetName } from './settings';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    methods: {
+      updateText(e, uuid) {
+        let text = e.target.innerHTML;
+        this.printDesignerStore.updateData({
+          uuid: uuid,
+          key: 'value',
+          value: text,
+        });
+      },
+    },
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/components/html/panel.vue b/src/components/PrintDesigner/src/components/html/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c9cf306271021ab85452c8ad2a0f257fedd7dec
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/html/panel.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="打印类型">
+            <a-select v-model:value="activeElement.style.ItemType" class="min-input">
+              <a-select-option v-for="val in itemTypeArray" :value="val.value" :key="val.value">{{
+                val.label
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="高度自动">
+            <a-switch
+              v-model:checked="activeElement.style.autoHeight"
+              :active-value="true"
+              :inactive-value="false"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="下边距">
+            <a-input-number
+              :disabled="!activeElement.style.autoHeight"
+              v-model:value="activeElement.style.BottomMargin"
+              :min="0"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getItemTypeArray } from '../../libs/props.js';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        itemTypeArray: getItemTypeArray(),
+      };
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/html/settings.ts b/src/components/PrintDesigner/src/components/html/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1752645070a3df8bf3a22e221079e10880a4c61
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/html/settings.ts
@@ -0,0 +1,76 @@
+import { CommonSettings } from '../CommonSettings';
+import { defaultStyle, LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm, px2pt } from '../../utils/calc';
+
+export const widgetName: string = 'braid-html';
+
+export interface HtmlLodopStyle extends LodopStyle {
+  /**
+   * 高度自动（模板在该元素位置以下的元素都关联打印）
+   */
+  autoHeight: boolean;
+
+  /**
+   * 距离下边距
+   */
+  BottomMargin: number;
+}
+export interface HtmlWidgetSetting extends CommonSettings {
+  value: string;
+  defaultValue: string;
+  style: HtmlLodopStyle;
+}
+
+export const settings: HtmlWidgetSetting = {
+  type: widgetName,
+  isEdit: false,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 120,
+  height: 40,
+  left: 50,
+  top: 0,
+  title: 'html',
+  value: '<div>html<div>',
+  defaultValue: '<div>html<div>',
+  name: '',
+  style: {
+    ...defaultStyle,
+    ItemType: '0', // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
+    autoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
+    BottomMargin: 0, // 距离下边距
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: HtmlWidgetSetting) {
+    const htmlTempTohtml = (val, style) => {
+      let styleStr = 'text-align:' + style.Alignment + ';';
+      styleStr += 'font-size:' + px2pt(style.FontSize) + 'pt;';
+      styleStr += 'color:' + style.FontColor + ';';
+      let html = "<span style='" + styleStr + "'>";
+      html += val;
+      html += '</span>';
+      return html;
+    };
+
+    const html = htmlTempTohtml(printItem.defaultValue, printItem.style);
+    if (printItem.style.autoHeight) {
+      LODOP.ADD_PRINT_HTM(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        'BottomMargin:' + px2mm(printItem.style.BottomMargin) + 'mm',
+        html,
+      );
+    } else {
+      LODOP.ADD_PRINT_HTM(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        px2mm(printItem.height) + 'mm',
+        html,
+      );
+    }
+  },
+};
diff --git a/src/components/PrintDesigner/src/components/image/index.vue b/src/components/PrintDesigner/src/components/image/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b00d4920466f80f5a06df336ae24539ca258554
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/image/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    class="widgets"
+    :style="{
+      position: 'absolute',
+      width: val.width + 'px',
+      height: val.height + 'px',
+      left: val.left + 'px',
+      top: val.top + 'px',
+      zIndex: val.zIndex,
+    }"
+  >
+    <img class="braid-image" :title="val.title" :src="val.value || val.defaultValue" />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { widgetName } from './settings';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      imageUrl() {
+        return this.val.value;
+      },
+    },
+    watch: {
+      val(newVal) {
+        this.imageUrl = newVal.value;
+      },
+    },
+  });
+</script>
+
+<style scoped>
+  .braid-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    -webkit-user-drag: none;
+    pointer-events: none;
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/components/image/panel.vue b/src/components/PrintDesigner/src/components/image/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..57ecbd2adc294ddd92e7b50eb9bd30b7e97c5c5f
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/image/panel.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="打印类型">
+            <a-select
+              :disabled="activeElement.style.ItemType === undefined"
+              v-model:value="activeElement.style.ItemType"
+              class="min-input"
+            >
+              <a-select-option v-for="val in itemTypeArray" :value="val.value" :key="val.value">{{
+                val.label
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getItemTypeArray } from '../../libs/props.js';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        itemTypeArray: getItemTypeArray(),
+      };
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/image/settings.ts b/src/components/PrintDesigner/src/components/image/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7bef3cb6c99f39b53dcebc91a5749fb71dbf33dd
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/image/settings.ts
@@ -0,0 +1,50 @@
+import { CommonSettings } from '../CommonSettings';
+import { defaultStyle, LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm } from '../../utils/calc';
+
+export const widgetName: string = 'braid-image';
+
+export interface ImageLodopStyle extends LodopStyle {}
+export interface ImageWidgetSetting extends CommonSettings {
+  value: string;
+  defaultValue: string;
+  style: ImageLodopStyle;
+}
+
+export const settings: ImageWidgetSetting = {
+  type: widgetName,
+  title: '图片',
+  isEdit: false,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 120,
+  height: 40,
+  left: 50,
+  top: 0,
+  value: '',
+  defaultValue: '',
+  name: '',
+  style: {
+    ...defaultStyle,
+    ItemType: '0', // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: ImageWidgetSetting) {
+    const imageTempTohtml = (value) => {
+      const html = "<img style='width:100%' src='" + value + "'/>";
+
+      return html;
+    };
+
+    const html = imageTempTohtml(printItem.value);
+    LODOP.ADD_PRINT_IMAGE(
+      px2mm(printItem.top) + 'mm',
+      px2mm(printItem.left) + 'mm',
+      px2mm(printItem.width) + 'mm',
+      px2mm(printItem.height) + 'mm',
+      html,
+    );
+  },
+};
diff --git a/src/components/PrintDesigner/src/components/page/index.vue b/src/components/PrintDesigner/src/components/page/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e030308cdc1c30107b1c7a52d7a9ad4c3482b22
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/page/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="widgets"
+    :style="{
+      position: 'absolute',
+      left: val.left + 'px',
+      top: val.top + 'px',
+      width: val.width + 'px',
+      minHeight: val.height + 'px',
+      zIndex: val.style.zIndex,
+      fontSize: val.style.FontSize + 'px',
+      color: val.style.FontColor,
+      textAlign: val.style.Alignment,
+    }"
+  >
+    <span>{{ val.curPageStyle }}{{ val.splitPageStyle }}{{ val.totalPageStyle }}</span>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { widgetName } from './settings';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    methods: {},
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/components/page/panel.vue b/src/components/PrintDesigner/src/components/page/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ca819ae5455c3ca1e7d27db3421ec647b2066d6c
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/page/panel.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-form-item label="对齐方式">
+          <a-radio-group
+            v-model:value="activeElement.style.Alignment"
+            :options="[
+              { label: '左对齐', value: 'left' },
+              { label: '居中', value: 'center' },
+              { label: '右对齐', value: 'right' },
+            ]"
+          />
+        </a-form-item>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="字号">
+            <a-input-number
+              v-model:value="activeElement.style.FontSize"
+              :min="1"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="字体颜色">
+            <a-input v-model:value="activeElement.style.FontColor" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="当前页码样式">
+            <a-input v-model:value="activeElement.curPageStyle" class="min-input" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="总页码样式">
+            <a-input v-model:value="activeElement.totalPageStyle" class="min-input" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="页码分隔样式">
+            <a-input v-model:value="activeElement.splitPageStyle" class="min-input" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="打印类型">
+            <a-select v-model:value="activeElement.style.ItemType" class="min-input">
+              <a-select-option v-for="val in itemTypeArray" :value="val.value" :key="val.value">{{
+                val.label
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="高度自动">
+            <a-switch
+              v-model:checked="activeElement.style.autoHeight"
+              :active-value="true"
+              :inactive-value="false"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="下边距">
+            <a-input-number
+              :disabled="!activeElement.style.autoHeight"
+              v-model:value="activeElement.style.BottomMargin"
+              :min="0"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getItemTypeArray } from '../../libs/props.js';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        itemTypeArray: getItemTypeArray(),
+      };
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/page/settings.ts b/src/components/PrintDesigner/src/components/page/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5864941d32c84cd1a9d22e50943ffbcc68d1fba3
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/page/settings.ts
@@ -0,0 +1,81 @@
+import { CommonSettings } from '../CommonSettings';
+import { defaultStyle, LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm, px2pt } from '../../utils/calc';
+
+export const widgetName: string = 'braid-page';
+
+export interface PageLodopStyle extends LodopStyle {
+  /**
+   * 高度自动（模板在该元素位置以下的元素都关联打印）
+   */
+  autoHeight: boolean;
+
+  /**
+   * 距离下边距
+   */
+  BottomMargin: number;
+}
+export interface PageWidgetSetting extends CommonSettings {
+  curPageStyle: string;
+  splitPageStyle: string;
+  totalPageStyle: string;
+  style: PageLodopStyle;
+}
+
+export const settings: PageWidgetSetting = {
+  type: widgetName,
+  isEdit: false,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 120,
+  height: 40,
+  left: 50,
+  top: 0,
+  title: '分页',
+  curPageStyle: '第##页',
+  splitPageStyle: '/',
+  totalPageStyle: '共##页',
+  name: '',
+  style: {
+    ...defaultStyle,
+    ItemType: '1', // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
+    autoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
+    BottomMargin: 0, // 距离下边距
+    Alignment: 'left',
+    FontSize: '9',
+    FontColor: '#000000',
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: PageWidgetSetting) {
+    const htmlTempTohtml = (style) => {
+      let styleStr = 'text-align:' + style.Alignment + ';';
+      styleStr += 'font-size:' + px2pt(style.FontSize) + 'pt;';
+      styleStr += 'color:' + style.FontColor + ';';
+      let html = "<div style='" + styleStr + "'>";
+      html += `<font><span tdata='pageNO'>${printItem.curPageStyle}</span>${printItem.splitPageStyle}<span tdata='pageCount'>${printItem.totalPageStyle}</span></font>`;
+      html += '</div>';
+      return html;
+    };
+
+    const html = htmlTempTohtml(printItem.style);
+    if (printItem.style.autoHeight) {
+      LODOP.ADD_PRINT_HTM(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        'BottomMargin:' + px2mm(printItem.style.BottomMargin) + 'mm',
+        html,
+      );
+    } else {
+      LODOP.ADD_PRINT_HTM(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        px2mm(printItem.height) + 'mm',
+        html,
+      );
+    }
+  },
+};
diff --git a/src/components/PrintDesigner/src/components/react/index.vue b/src/components/PrintDesigner/src/components/react/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..335810dd15b48d649c85b491bf3065c2d85c1fc5
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/react/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="widgets"
+    :style="{
+      position: 'absolute',
+      left: val.left + 'px',
+      top: val.top + 'px',
+      width: val.width + 'px',
+      minHeight: val.height + 'px',
+      zIndex: val.style.zIndex,
+      border: '1px solid #000000',
+    }"
+  ></div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { widgetName } from './settings';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {},
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/components/react/panel.vue b/src/components/PrintDesigner/src/components/react/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2c9cf306271021ab85452c8ad2a0f257fedd7dec
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/react/panel.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="打印类型">
+            <a-select v-model:value="activeElement.style.ItemType" class="min-input">
+              <a-select-option v-for="val in itemTypeArray" :value="val.value" :key="val.value">{{
+                val.label
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="高度自动">
+            <a-switch
+              v-model:checked="activeElement.style.autoHeight"
+              :active-value="true"
+              :inactive-value="false"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="下边距">
+            <a-input-number
+              :disabled="!activeElement.style.autoHeight"
+              v-model:value="activeElement.style.BottomMargin"
+              :min="0"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getItemTypeArray } from '../../libs/props.js';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        itemTypeArray: getItemTypeArray(),
+      };
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/react/settings.ts b/src/components/PrintDesigner/src/components/react/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ba2d09a18caf62257a9bc7e7fade6ca01cdc2cd
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/react/settings.ts
@@ -0,0 +1,52 @@
+import { CommonSettings } from '../CommonSettings';
+import { defaultStyle, LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm } from '../../utils/calc';
+
+export const widgetName: string = 'braid-react';
+
+export interface ReactLodopStyle extends LodopStyle {
+  /**
+   * 线条类型，数字型，0--实线 1--破折线 2--点线 3--点划线 4--双点划线
+   */
+  intLineStyle: number;
+
+  /**
+   * 线条宽，整数型，单位是（打印）像素，缺省值是1，非实线的线条宽也是0。
+   */
+  intLineWidth: number;
+}
+export interface ReactWidgetSetting extends CommonSettings {
+  style: ReactLodopStyle;
+}
+
+export const settings: ReactWidgetSetting = {
+  type: widgetName,
+  isEdit: false,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 120,
+  height: 40,
+  left: 50,
+  top: 0,
+  title: '矩形',
+  name: '',
+  style: {
+    ...defaultStyle,
+    zIndex: 0,
+    intLineStyle: 0,
+    intLineWidth: 1,
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: ReactWidgetSetting) {
+    LODOP.ADD_PRINT_RECT(
+      px2mm(printItem.top) + 'mm',
+      px2mm(printItem.left) + 'mm',
+      px2mm(printItem.width) + 'mm',
+      px2mm(printItem.height) + 'mm',
+      printItem.style.intLineStyle,
+      printItem.style.intLineWidth,
+    );
+  },
+};
diff --git a/src/components/PrintDesigner/src/components/table/index.vue b/src/components/PrintDesigner/src/components/table/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5dc5ec0812597ec6844c27053adb6d3b93638147
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/table/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="widgets"
+    :style="{
+      left: val.left + 'px',
+      top: val.top + 'px',
+      width: val.width + 'px',
+      height: val.height + 'px',
+      textAlign: val.style.Alignment,
+      color: val.style.FontColor,
+    }"
+    style="position: absolute; overflow: hidden"
+  >
+    <table
+      border="1"
+      width="100%"
+      cellspacing="0"
+      cellpadding="2"
+      style="border-collapse: collapse; font-size: 12px"
+      :style="{
+        borderColor: val.style.borderColor,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+      }"
+    >
+      <tr
+        :style="{
+          borderColor: val.style.borderColor,
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }"
+      >
+        <th
+          :style="{
+            borderColor: val.style.borderColor,
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            fontSize: val.style.FontSize + 'px',
+          }"
+          v-for="item in columns"
+          :key="item.name"
+          :width="item.name === '_seq' ? 40 : ''"
+          >{{ item.title }}</th
+        >
+      </tr>
+      <tr
+        :style="{
+          borderColor: val.style.borderColor,
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }"
+      >
+        <td
+          :style="{
+            borderColor: val.style.borderColor,
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            fontSize: val.style.FontSize + 'px',
+          }"
+          v-for="item in columns"
+          :key="item.name"
+          v-html="item.value"
+        ></td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { widgetName } from './settings';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      // 去掉type='row'的数据
+      columns() {
+        let col = this.val.columns || [];
+        return col;
+      },
+    },
+    methods: {},
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/components/table/panel.vue b/src/components/PrintDesigner/src/components/table/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b0cec648d69ff84809a059997853e8540f7699a
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/table/panel.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="24">
+          <a-form-item label="显示列">
+            <a-checkbox-group v-model:value="activeElement.selectCol" @change="changeCol">
+              <a-row>
+                <a-col v-for="col in activeElement.columnsAttr" :key="col.name" :span="12">
+                  <a-checkbox :value="col.name">{{ col.title }}</a-checkbox>
+                </a-col>
+              </a-row>
+            </a-checkbox-group>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="字号">
+            <a-input-number
+              v-model:value="activeElement.style.FontSize"
+              :min="1"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="字体颜色">
+            <a-input v-model:value="activeElement.style.FontColor" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="边框颜色">
+            <a-input v-model:value="activeElement.style.borderColor" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-form-item label="对齐方式">
+          <a-radio-group
+            v-model:value="activeElement.style.Alignment"
+            :options="[
+              { label: '左对齐', value: 'left' },
+              { label: '居中', value: 'center' },
+              { label: '右对齐', value: 'right' },
+            ]"
+          />
+        </a-form-item>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="高度自动">
+            <a-switch
+              v-model:checked="activeElement.style.autoHeight"
+              :active-value="true"
+              :inactive-value="false"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="下边距">
+            <a-input-number
+              :disabled="!activeElement.style.autoHeight"
+              v-model:value="activeElement.style.BottomMargin"
+              :min="0"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+    methods: {
+      changeCol() {
+        let selectCol = [];
+        this.activeElement.selectCol.forEach((itemName) => {
+          let colInfo = this.activeElement.columnsAttr.find((col) => col.name === itemName);
+          if (colInfo) {
+            selectCol.push(colInfo);
+          }
+        });
+        this.activeElement.columns = selectCol; //表格显示的字段
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/table/settings.ts b/src/components/PrintDesigner/src/components/table/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf7ec4c53f74cb818353d187bf39e8f02b5596eb
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/table/settings.ts
@@ -0,0 +1,182 @@
+import { CommonSettings } from '../CommonSettings';
+import { defaultStyle, LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm, px2pt } from '../../utils/calc';
+import { isEmpty } from '@/utils/utils';
+
+export const widgetName: string = 'braid-table';
+
+export interface TableLodopStyle extends LodopStyle {
+  /**
+   * 高度自动（模板在该元素位置以下的元素都关联打印）
+   */
+  autoHeight: boolean;
+
+  /**
+   * 距离下边距
+   */
+  BottomMargin: number;
+
+  /**
+   * 边框颜色
+   */
+  borderColor: string;
+}
+
+export interface TableWidgetSetting extends CommonSettings {
+  value: any[];
+  defaultValue: any[];
+  columnsAttr: any[];
+  columns: any[];
+  selectCol: any[];
+  style: TableLodopStyle;
+}
+
+export const settings: TableWidgetSetting = {
+  type: widgetName,
+  isEdit: false, // 是否可编辑
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 240,
+  height: 60,
+  left: 50,
+  top: 10,
+  title: '表格',
+  value: [],
+  defaultValue: [],
+  columnsAttr: [], // 表格列选项
+  columns: [], // 已选表格列表
+  selectCol: [], // 已选表格列name数组（用于多选框双向绑定）
+  name: '',
+  style: {
+    ...defaultStyle,
+    Alignment: 'left', // 对齐方式 1--左靠齐 2--居中 3--右靠齐
+    FontSize: '9',
+    FontColor: '#000000',
+    borderColor: '#000000',
+    autoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
+    BottomMargin: 0, // 距离下边距
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: TableWidgetSetting) {
+    const tableTempTohtml = (columns, data, style) => {
+      // 验证输入参数
+      if (!Array.isArray(columns)) {
+        throw new Error("Invalid input: 'columns' must be an array.");
+      }
+      if (!Array.isArray(data)) {
+        throw new Error("Invalid input: 'data' must be an array.");
+      }
+
+      // 定义默认样式
+      const defaultStyle = {
+        Alignment: 'left',
+        FontSize: '12',
+        FontColor: 'black',
+        borderColor: '#000000',
+      };
+
+      // 合并用户提供的样式与默认样式
+      const mergedStyle = { ...defaultStyle, ...style };
+
+      // 生成样式字符串
+      const generateStyleString = (styleObj) => {
+        return Object.entries(styleObj)
+          .filter(([key, value]) => value !== undefined && value !== null)
+          .map(([key, value]) => `${key}:${value}`)
+          .join(';');
+      };
+
+      const styleStr = generateStyleString({
+        'text-align': mergedStyle.Alignment,
+        'font-size': `${px2pt(mergedStyle.FontSize)}pt`,
+        color: mergedStyle.FontColor,
+      });
+
+      // HTML 转义函数，防止 XSS 攻击
+      const escapeHtml = (str) => {
+        if (typeof str !== 'string') {
+          str = String(str);
+        }
+        return str.replace(
+          /[&<>"']/g,
+          (match) =>
+            ({
+              '&': '&amp;',
+              '<': '&lt;',
+              '>': '&gt;',
+              '"': '&quot;',
+              "'": '&#x27;',
+            }[match] || match),
+        );
+      };
+
+      let html =
+        '<style> table td,table th {word-break: break-all;box-sizing:border-box;border:1px solid ' +
+        escapeHtml(mergedStyle.borderColor) +
+        ';' +
+        styleStr +
+        '}</style>';
+      html += `<table border=1 width='100%' cellspacing='0' frame="box" cellpadding='2' style='border-collapse:collapse;'>`;
+
+      // 解析表头
+      html += '<thead><tr>';
+      columns.forEach((column) => {
+        if (column.name === '_seq') {
+          html += '<th width="30">';
+        } else {
+          html += '<th>';
+        }
+        html += escapeHtml(column.title);
+        html += '</th>';
+      });
+      html += '</tr></thead>';
+      html += '<tbody>';
+
+      // 解析内容
+      if (data.length > 0) {
+        data.forEach((item, idx) => {
+          html += '<tr>';
+          columns.forEach((column) => {
+            if (column.name === '_seq') {
+              html += `<td>${idx + 1}</td>`;
+            } else {
+              html += `<td>${escapeHtml(isEmpty(item[column.name]) ? '' : item[column.name])}</td>`;
+            }
+          });
+          html += '</tr>';
+        });
+      } else {
+        html += "<tr><td colspan='" + columns.length + "'>" + escapeHtml('暂无数据') + '</td></tr>';
+      }
+
+      html += '</tbody>';
+      html += '</table>';
+      return html;
+    };
+
+    const html = tableTempTohtml(
+      printItem.columns ? printItem.columns : [],
+      printItem.defaultValue,
+      printItem.style,
+    );
+    if (printItem.style.autoHeight) {
+      LODOP.ADD_PRINT_TABLE(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        'BottomMargin:' + px2mm(printItem.style.BottomMargin) + 'mm',
+        html,
+      );
+    } else {
+      LODOP.ADD_PRINT_TABLE(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        px2mm(printItem.height) + 'mm',
+        html,
+      );
+    }
+  },
+};
diff --git a/src/components/PrintDesigner/src/components/txt/index.vue b/src/components/PrintDesigner/src/components/txt/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eb89adf1842f50dba028ff1816aa08df12e4514d
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/txt/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="widgets"
+    :style="{
+      position: 'absolute',
+      left: val.left + 'px',
+      top: val.top + 'px',
+      width: val.width + 'px',
+      minHeight: val.height + 'px',
+      zIndex: val.style.zIndex,
+      fontSize: val.style.FontSize + 'px',
+      color: val.style.FontColor,
+      textAlign: val.style.Alignment,
+      fontWeight: val.style.Bold === '1' ? 'bold' : 'normal',
+      lineHeight: val.style.FontSize + 'px',
+      border: val.style.bordered
+        ? (!val.style.intLineWidth ? '1' : val.style.intLineWidth) +
+          'px ' +
+          parseIntLineStyle(val.style.intLineStyle) +
+          ' #000'
+        : 'none',
+    }"
+  >
+    <span
+      :style="{
+        position: 'relative',
+        top: (val.style.topOffset || 0) + 'px',
+        left: (val.style.leftOffset || 0) + 'px',
+      }"
+      >{{ val.value }}</span
+    >
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { widgetName } from './settings';
+  import { parseIntLineStyle } from '@/components/PrintDesigner/src/libs/props';
+
+  export default defineComponent({
+    name: widgetName,
+    props: {
+      val: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      return {
+        parseIntLineStyle,
+      };
+    },
+    methods: {},
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/components/txt/panel.vue b/src/components/PrintDesigner/src/components/txt/panel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..709c0b5cccc4468c90b92760940741548bd3ad90
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/txt/panel.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="24">
+          <a-form-item label="内容">
+            <a-textarea
+              :readonly="!activeElement.isEdit"
+              v-model:value="activeElement.value"
+              @change="(e) => updateText(e, activeElement.uuid)"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="字号">
+            <a-input-number
+              v-model:value="activeElement.style.FontSize"
+              :min="1"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="字体颜色">
+            <a-input v-model:value="activeElement.style.FontColor" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="加粗">
+            <a-switch
+              v-model:checked="activeElement.style.Bold"
+              :checked-value="'1'"
+              :unchecked-value="'0'"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="边框">
+            <a-switch
+              v-model:checked="activeElement.style.bordered"
+              :checked-value="true"
+              :unchecked-value="false"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row v-if="activeElement.style.bordered">
+        <a-col :span="12">
+          <a-form-item label="边框样式">
+            <a-select v-model:value="activeElement.style.intLineStyle" class="min-input">
+              <a-select-option
+                v-for="val in intLineStyleArray"
+                :value="val.value"
+                :key="val.value"
+                >{{ val.label }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="边框宽度">
+            <a-input-number
+              v-model:value="activeElement.style.intLineWidth"
+              :min="1"
+              class="min-input"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-form-item label="对齐方式">
+          <a-radio-group
+            v-model:value="activeElement.style.Alignment"
+            :options="[
+              { label: '左对齐', value: 'left' },
+              { label: '居中', value: 'center' },
+              { label: '右对齐', value: 'right' },
+            ]"
+          />
+        </a-form-item>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="打印类型">
+            <a-select v-model:value="activeElement.style.ItemType" class="min-input">
+              <a-select-option v-for="val in itemTypeArray" :value="val.value" :key="val.value">{{
+                val.label
+              }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-form-item label="文字距离上边框距离">
+          <a-input-number v-model:value="activeElement.style.topOffset" class="min-input" />
+        </a-form-item>
+      </a-row>
+      <a-row>
+        <a-form-item label="文字距离左边框距离">
+          <a-input-number v-model:value="activeElement.style.leftOffset" class="min-input" />
+        </a-form-item>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getItemTypeArray, getIntLineStyleArray } from '../../libs/props.js';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        itemTypeArray: getItemTypeArray(),
+        intLineStyleArray: getIntLineStyleArray(),
+      };
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+    methods: {
+      updateText(e, uuid) {
+        this.printDesignerStore.updateData({
+          uuid: uuid,
+          key: 'value',
+          value: this.activeElement.value,
+        });
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/PrintDesigner/src/components/txt/settings.ts b/src/components/PrintDesigner/src/components/txt/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cea84a4aeeea70f67e399da8b9a75d396606b4a6
--- /dev/null
+++ b/src/components/PrintDesigner/src/components/txt/settings.ts
@@ -0,0 +1,90 @@
+import { CommonSettings } from '../CommonSettings';
+import { defaultStyle, LodopStyle } from '@/components/PrintDesigner/src/constants/LodopStyle';
+import { px2mm } from '../../utils/calc';
+
+export const widgetName: string = 'braid-txt';
+
+export interface TxtWidgetStyle extends LodopStyle {
+  /**
+   * 是否显示边框
+   */
+  bordered: boolean;
+
+  /**
+   * 线条类型，数字型，0--实线 1--破折线 2--点线 3--点划线 4--双点划线
+   */
+  intLineStyle?: number;
+
+  /**
+   * 线条宽，整数型，单位是（打印）像素，缺省值是1，非实线的线条宽也是0。
+   */
+  intLineWidth?: number;
+
+  /**
+   * 文字距离上边框距离
+   */
+  topOffset?: number;
+
+  /**
+   * 文字距离左边框距离
+   */
+  leftOffset?: number;
+}
+
+export interface TxtWidgetSetting extends CommonSettings {
+  value: string;
+  style: TxtWidgetStyle;
+}
+
+export const settings: TxtWidgetSetting = {
+  type: widgetName,
+  isEdit: true,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 120,
+  height: 40,
+  left: 50,
+  top: 0,
+  title: '自定义文本',
+  value: '自定义文本',
+  name: '',
+  style: {
+    ...defaultStyle,
+    FontSize: '9',
+    FontColor: '#000000',
+    Bold: '0', // 1代表粗体，0代表非粗体
+    Italic: '0', // 1代表斜体，0代表非斜体
+    Underline: '0', // 1代表有下划线，0代表无下划线
+    Alignment: 'left', // 对齐方式
+    ItemType: '0', // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
+    bordered: false, // 是否显示边框
+    intLineStyle: 0,
+    intLineWidth: 1,
+    topOffset: 0,
+    leftOffset: 0,
+  },
+};
+
+export const parser = {
+  parse(LODOP: object, printItem: TxtWidgetSetting) {
+    if (printItem.style.bordered) {
+      LODOP.ADD_PRINT_RECT(
+        px2mm(printItem.top) + 'mm',
+        px2mm(printItem.left) + 'mm',
+        px2mm(printItem.width) + 'mm',
+        px2mm(printItem.height) + 'mm',
+        printItem.style.intLineStyle,
+        printItem.style.intLineWidth,
+      );
+
+      LODOP.SET_PRINT_STYLEA(0, 'ItemType', printItem.style.ItemType);
+    }
+    LODOP.ADD_PRINT_TEXT(
+      px2mm(printItem.top + (printItem.style.topOffset || 0)) + 'mm',
+      px2mm(printItem.left + (printItem.style.leftOffset || 0)) + 'mm',
+      px2mm(printItem.width) + 'mm',
+      px2mm(printItem.height) + 'mm',
+      printItem.value,
+    );
+  },
+};
diff --git a/src/components/PrintDesigner/src/constants/LodopStyle.ts b/src/components/PrintDesigner/src/constants/LodopStyle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..870b594176ed1a2080521c8aab0c04b9c54d34f1
--- /dev/null
+++ b/src/components/PrintDesigner/src/constants/LodopStyle.ts
@@ -0,0 +1,124 @@
+/**
+ * FontName的值： 字符型，与操作系统字体名一致，缺省是“宋体”。
+ *
+ * FontSize的值：数值型，单位是pt，缺省值是9，可以含小数，如13.5。
+ *
+ * FontColor的值：整数或字符型，整数时是颜色的十进制RGB值；字符时是超文本颜色值，可以是“#”加三色16进制值组合，也可以是英文颜色名；
+ *
+ * Bold的值：数字型，1代表粗体，0代表非粗体，缺省值是0。
+ *
+ * Italic的值：数字型，1代表斜体，0代表非斜体，缺省值是0。
+ *
+ * Underline的值：数字型，1代表有下划线，0代表无下划线，缺省值是0。
+ *
+ * Alignment的值：数字型，1--左靠齐 2--居中 3--右靠齐，缺省值是1。
+ *
+ * Angle的值：数字型，逆时针旋转角度数，单位是度，0度表示不旋转，旋转时以对象的左上角为原点。
+ *
+ * ItemType的值：数字型，0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
+ * 缺省（不调用本函数时）值0。普通项只打印一次；页眉页脚项则每页都在固定位置重复打印；页号项和页数项是特殊的页眉页脚项，其内容包含当前页号和全部页数；多页项每页都打印，直到把内容打印完毕，打印时在每页上的位置和区域大小固定一样（多页项只对纯文本有效）
+ *               在页号或页数对象的文本中，有两个特殊控制字符：
+ * “#”特指“页号”，“&”特指“页数”。
+ * HOrient的值：数字型，0--左边距锁定 1--右边距锁定 2--水平方向居中 3--左边距和右边距同时锁定（中间拉伸），缺省值是0。
+ *
+ * VOrient的值：数字型，0--上边距锁定 1--下边距锁定 2--垂直方向居中 3--上边距和下边距同时锁定（中间拉伸），缺省值是0。
+ *
+ * PenWidth的值：整数型，单位是(打印)像素，缺省值是1，非实线的线条宽也是0。
+ *
+ * PenStyle的值：数字型，0--实线 1--破折线 2--点线 3--点划线 4--双点划线
+ * 缺省值是0。
+ * Stretch的值：数字型，0--截取图片 1--扩展（可变形）缩放 2--按原图长和宽比例（不变形）缩放。缺省值是0。
+ *
+ * ShowBarText的值 ：字符或逻辑型，真表示显示（一维条码的）码值，假表示隐藏码值，默认值是真。true、“true”、1、“1”代表真，false、“false”、0或“0”代表假
+ *
+ * “LinkedItem”的值： 整数字符型，字符型代表被关联项的项目名，整数代表被关联项的序号，如果是负数，代表当前对象的前几个对象，例如-1代表前一个对象，-2代表前面隔一个对象，使用-1时可以用同一个语句连续顺序关联一串对象。
+ * 内容项与别人关联后，会紧跟被关联者之后打印，位置和区域大小随被关联项而定，此时其Top和left不再是上边距和左边距，而是与关联项的间隔空隙及左边距偏移。
+ *             如果关联者是页眉页脚对象，那么不会每页输出，仅与被关联对象同页输出。此时输出的位置与被关联对象的位置相对固定，也就是当上边距小于被关联对象的上边距时，那么其起点位置会与被关联者的上边线保持设计时的距离，否则与被关联对象的下边线保持设计时的距离。
+ */
+export interface LodopStyle {
+  zIndex: number;
+
+  /**
+   * 设定纯文本打印项的字体名称
+   */
+  FontName?: string;
+
+  /**
+   * 设定纯文本打印项的字体大小
+   */
+  FontSize?: string;
+
+  /**
+   * 设定纯文本打印项的字体颜色
+   */
+  FontColor?: string;
+  /**
+   * 设定纯文本打印项是否粗体
+   */
+  Bold?: string;
+
+  /**
+   * 设定纯文本打印项是否斜体
+   */
+  Italic?: string;
+
+  /**
+   * 设定纯文本打印项是否下划线
+   */
+  Underline?: string;
+
+  /**
+   * 设定纯文本打印项的内容左右靠齐方式
+   * 这里使用left center right，在LODOP打印时会转化成1,2,3
+   */
+  Alignment?: string;
+
+  /**
+   * 设定纯文本打印项的旋转角度
+   */
+  Angle?: string;
+
+  /**
+   * 设定打印项的基本属性
+   */
+  ItemType?: string;
+
+  /**
+   * 设定打印项在纸张范围内的水平方向的位置锁定方式
+   */
+  HOrient?: string;
+
+  /**
+   * 设定打印项在纸张范围内的垂直方向的位置锁定方式
+   */
+  VOrient?: string;
+
+  /**
+   * 线条宽度
+   */
+  PenWidth?: string;
+
+  /**
+   * 线条风格
+   */
+  PenStyle?: string;
+
+  /**
+   * 图片截取缩放模式
+   */
+  Stretch?: string;
+
+  /**
+   * (一维)条码的码值是否显示
+   */
+  ShowBarText?: string;
+
+  /**
+   * 设置关联内容项的项目编号
+   */
+  LinkedItem?: number;
+}
+
+export const defaultStyle: LodopStyle = {
+  zIndex: 0,
+};
diff --git a/src/components/PrintDesigner/src/libs/lodop/LodopFuncs.js b/src/components/PrintDesigner/src/libs/lodop/LodopFuncs.js
new file mode 100644
index 0000000000000000000000000000000000000000..b4762deda8f4a2a72a7a06a581df3dae0f306833
--- /dev/null
+++ b/src/components/PrintDesigner/src/libs/lodop/LodopFuncs.js
@@ -0,0 +1,202 @@
+/* eslint-disable */
+// ==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==
+import { h } from 'vue';
+import * as msg from '@/hooks/web/msg';
+
+var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
+
+// ==判断是否需要CLodop(那些不支持插件的浏览器):==
+function needCLodop() {
+  try {
+    var ua = navigator.userAgent;
+    if (ua.match(/Windows\sPhone/i)) return true;
+    if (ua.match(/iPhone|iPod|iPad/i)) return true;
+    if (ua.match(/Android/i)) return true;
+    if (ua.match(/Edge\D?\d+/i)) return true;
+
+    var verTrident = ua.match(/Trident\D?\d+/i);
+    var verIE = ua.match(/MSIE\D?\d+/i);
+    var verOPR = ua.match(/OPR\D?\d+/i);
+    var verFF = ua.match(/Firefox\D?\d+/i);
+    var x64 = ua.match(/x64/i);
+    if (!verTrident && !verIE && x64) return true;
+    else if (verFF) {
+      verFF = verFF[0].match(/\d+/);
+      if (verFF[0] >= 41 || x64) return true;
+    } else if (verOPR) {
+      verOPR = verOPR[0].match(/\d+/);
+      if (verOPR[0] >= 32) return true;
+    } else if (!verTrident && !verIE) {
+      var verChrome = ua.match(/Chrome\D?\d+/i);
+      if (verChrome) {
+        verChrome = verChrome[0].match(/\d+/);
+        if (verChrome[0] >= 41) return true;
+      }
+    }
+    return false;
+  } catch (err) {
+    return true;
+  }
+}
+
+// 加载CLodop时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
+// 主JS文件名“CLodopfuncs.js”是固定名称，其内容是动态的，与其链接的打印环境有关:
+function loadCLodop() {
+  if (CLodopJsState == 'loading' || CLodopJsState == 'complete') return;
+  CLodopJsState = 'loading';
+  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
+  var JS1 = document.createElement('script');
+  var JS2 = document.createElement('script');
+
+  if (window.location.protocol == 'https:') {
+    JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js';
+    JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js';
+  } else {
+    JS1.src = 'http://localhost:8000/CLodopfuncs.js';
+    JS2.src = 'http://localhost:18000/CLodopfuncs.js';
+  }
+  JS1.onload = JS2.onload = function () {
+    CLodopJsState = 'complete';
+  };
+  JS1.onerror = JS2.onerror = function (evt) {
+    CLodopJsState = 'complete';
+  };
+  head.insertBefore(JS1, head.firstChild);
+  head.insertBefore(JS2, head.firstChild);
+  CLodopIsLocal = !!(JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i);
+}
+
+if (needCLodop()) {
+  loadCLodop();
+} // 开始加载
+
+// ==获取LODOP对象主过程,判断是否安装、需否升级:==
+function getLodop(oOBJECT, oEMBED) {
+  var strFontTag = '<font>打印控件';
+  var strLodopInstall =
+    strFontTag +
+    "未安装!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行安装</a>";
+  var strLodopUpdate =
+    strFontTag +
+    "需要升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>";
+  var strLodop64Install =
+    strFontTag +
+    "未安装!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行安装</a>";
+  var strLodop64Update =
+    strFontTag +
+    "需要升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>";
+  var strCLodopInstallA =
+    "<br><font>Web打印服务CLodop未安装启动，点击这里<a href='http://www.lodop.net/download.html' target='_blank'>下载执行安装</a>";
+  var strCLodopInstallB =
+    "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_blank'>点这里直接再次启动</a>）";
+  var strCLodopUpdate =
+    "<br><font>Web打印服务CLodop需升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>";
+  var strLodop7FontTag = '<br><font>Web打印服务Lodop7';
+  var strLodop7HrefX86 =
+    "点击这里<a href='http://www.lodop.net/download.html' target='_blank'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
+  var strLodop7HrefARM =
+    "点击这里<a href='http://www.lodop.net/download.html'  target='_blank'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
+  var strLodop7Install_X86 = strLodop7FontTag + '未安装启动，' + strLodop7HrefX86;
+  var strLodop7Install_ARM = strLodop7FontTag + '未安装启动，' + strLodop7HrefARM;
+  var strLodop7Update_X86 = strLodop7FontTag + '需升级，' + strLodop7HrefX86;
+  var strLodop7Update_ARM = strLodop7FontTag + '需升级，' + strLodop7HrefARM;
+  var strInstallOK = '，成功后请刷新本页面或重启浏览器。</font>';
+  var LODOP;
+  try {
+    var isWinIE = /MSIE/i.test(navigator.userAgent) || /Trident/i.test(navigator.userAgent);
+    var isWinIE64 = isWinIE && /x64/i.test(navigator.userAgent);
+    var isLinuxX86 = /Linux/i.test(navigator.platform) && /x86/i.test(navigator.platform);
+    var isLinuxARM = /Linux/i.test(navigator.platform) && /aarch/i.test(navigator.platform);
+
+    if (needCLodop() || isLinuxX86 || isLinuxARM) {
+      try {
+        LODOP = getCLodop();
+      } catch (err) {}
+      if (!LODOP && CLodopJsState !== 'complete') {
+        if (CLodopJsState == 'loading') {
+          msg.createError('lodop插件还未加载完毕，请稍后再操作.');
+        } else {
+          msg.createError('未曾加载Lodop主JS文件，请先调用loadCLodop过程.');
+        }
+        return;
+      }
+      var strAlertMessage;
+      if (!LODOP) {
+        if (isLinuxX86) strAlertMessage = strLodop7Install_X86;
+        else if (isLinuxARM) strAlertMessage = strLodop7Install_ARM;
+        else {
+          strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : '');
+        }
+        msg.errorDialog(
+          h('div', {
+            innerHTML: strAlertMessage + strInstallOK,
+          }),
+          '打印插件出错',
+        );
+        return;
+      } else {
+        if (isLinuxX86 && LODOP.CVERSION < '7.0.4.2') strAlertMessage = strLodop7Update_X86;
+        else if (isLinuxARM && LODOP.CVERSION < '7.0.4.2') strAlertMessage = strLodop7Update_ARM;
+        else if (CLODOP.CVERSION < '4.1.5.8') strAlertMessage = strCLodopUpdate;
+
+        if (strAlertMessage) {
+          msg.errorDialog(
+            h('div', {
+              innerHTML: strAlertMessage + strInstallOK,
+            }),
+            '打印插件出错',
+          );
+        }
+      }
+    } else {
+      // ==如果页面有Lodop插件就直接使用,否则新建:==
+      if (oOBJECT || oEMBED) {
+        if (isWinIE) {
+          LODOP = oOBJECT;
+        } else {
+          LODOP = oEMBED;
+        }
+      } else if (!CreatedOKLodopObject) {
+        LODOP = document.createElement('object');
+        LODOP.setAttribute('width', 0);
+        LODOP.setAttribute('height', 0);
+        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;');
+        if (isWinIE) {
+          LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA');
+        } else {
+          LODOP.setAttribute('type', 'application/x-print-lodop');
+        }
+        document.documentElement.appendChild(LODOP);
+        CreatedOKLodopObject = LODOP;
+      } else {
+        LODOP = CreatedOKLodopObject;
+      }
+      // ==Lodop插件未安装时提示下载地址:==
+      if (!LODOP || !LODOP.VERSION) {
+        msg.errorDialog(
+          h('div', {
+            innerHTML: (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK,
+          }),
+          '打印插件出错',
+        );
+        return LODOP;
+      }
+      if (LODOP.VERSION < '6.2.2.6') {
+        msg.errorDialog(
+          h('div', {
+            innerHTML: (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK,
+          }),
+          '打印插件出错',
+        );
+      }
+    }
+    // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================
+
+    // ===============================================================================
+    return LODOP;
+  } catch (err) {
+    msg.errorDialog('getLodop出错:' + err, '打印插件出错');
+  }
+}
+
+export { getLodop };
diff --git a/src/components/PrintDesigner/src/libs/lodop/index.js b/src/components/PrintDesigner/src/libs/lodop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e853d0e9401c29b486f7fc41f622f43b2b524af6
--- /dev/null
+++ b/src/components/PrintDesigner/src/libs/lodop/index.js
@@ -0,0 +1,276 @@
+import { getLodop } from './LodopFuncs';
+import cloneDeep from 'lodash/cloneDeep';
+import { strTempToValue } from './tools';
+import { parser as barCodeParser } from '../../components/bar-code/settings';
+import { parser as htmlParser } from '../../components/html/settings';
+import { parser as imageParser } from '../../components/image/settings';
+import { parser as txtParser } from '../../components/txt/settings';
+import { parser as tableParser } from '../../components/table/settings';
+import { parser as reactParser } from '../../components/react/settings';
+import { parser as pageParser } from '../../components/page/settings';
+import { px2pt } from '../../utils/calc';
+
+export default { print, preview, previewTemp };
+
+/**
+ * 打印功能
+ * @param {*Object} temp 打印模板
+ * @param {*Array} data 打印数据
+ */
+function print(temp, data) {
+  let LODOP = _CreateLodop(
+    temp.title,
+    temp.pageDirection,
+    temp.width,
+    temp.height,
+    temp.pageWidth,
+    temp.pageHeight,
+  );
+  let tempItems = cloneDeep(temp.tempItems);
+  let printContent = _TempParser(tempItems, data);
+  if (printContent.length > 1) {
+    // 打印多份
+    printContent.forEach((aPrint, index) => {
+      LODOP.NewPageA();
+      aPrint.forEach((printItem) => {
+        _AddPrintItem(LODOP, printItem, index);
+      });
+    });
+  } else {
+    // 单份
+    printContent[0].forEach((printItem) => {
+      _AddPrintItem(LODOP, printItem);
+    });
+  }
+
+  let flag = LODOP.PRINT();
+  return flag;
+}
+
+/**
+ * 打印预览功能
+ * @param {*Object} temp 打印模板
+ * @param {*Array} data 打印数据
+ */
+function preview(temp, data) {
+  let LODOP = _CreateLodop(
+    temp.title,
+    temp.pageDirection,
+    temp.width,
+    temp.height,
+    temp.pageWidth,
+    temp.pageHeight,
+  );
+  let tempItems = cloneDeep(temp.tempItems);
+  let printContent = _TempParser(tempItems, data);
+  if (data.length > 1) {
+    // 打印多份
+    printContent.forEach((aPrint, index) => {
+      LODOP.NewPageA();
+      aPrint.forEach((printItem) => {
+        _AddPrintItem(LODOP, printItem, index);
+      });
+    });
+  } else {
+    // 单份
+    printContent[0].forEach((printItem) => {
+      _AddPrintItem(LODOP, printItem);
+    });
+  }
+
+  let flag = LODOP.PREVIEW();
+  return flag;
+}
+
+/**
+ * 模板预览功能
+ * @param {*Object} temp 打印模板
+ */
+function previewTemp(temp) {
+  let LODOP = _CreateLodop(
+    temp.title,
+    temp.pageDirection,
+    temp.width,
+    temp.height,
+    temp.pageWidth,
+    temp.pageHeight,
+  );
+
+  let printContent = _TempParser(temp.tempItems);
+  printContent[0].forEach((printItem) => {
+    _AddPrintItem(LODOP, printItem);
+  });
+  let flag = LODOP.PREVIEW();
+  return flag;
+}
+
+/**
+ * LODOP 根据属性创建打印
+ * @param pageName 纸张名称
+ * @param pageDirection 纸张方向
+ * @param width 可视区域宽度(单位px)
+ * @param height 可视区域高度(单位px)
+ * @param pageWidth 纸张宽度(mm)
+ * @param pageHeight 纸张高度(mm)
+ * @param top 可视区域上边距(单位px)
+ * @param left 可视区域左边距(单位px)
+ */
+function _CreateLodop(
+  pageName,
+  pageDirection,
+  width,
+  height,
+  pageWidth = 0,
+  pageHeight = 0,
+  top = 0,
+  left = 0,
+) {
+  let LODOP = getLodop();
+
+  // console.log(strCompanyName, strLicense, strLicenseA, strLicenseB)
+
+  // 设置软件产品注册信息
+  // LODOP.SET_LICENSES(strCompanyName, strLicense, strLicenseA, strLicenseB);
+
+  LODOP.PRINT_INITA(top, left, width, height, pageName);
+  LODOP.SET_PRINT_PAGESIZE(
+    pageDirection,
+    pageWidth ? pageWidth + 'mm' : 0,
+    pageHeight ? pageHeight + 'mm' : 0,
+    '',
+  );
+
+  return LODOP;
+}
+
+/**
+ * 解析模板和数据生成打印项
+ * @param {*Array} tempItem 模板打赢项
+ * @param {Array} data 打印数据,
+ * @return {Array} 若data为null则返回处理后的模板
+ */
+function _TempParser(tempItem, data) {
+  let temp = cloneDeep(tempItem);
+  //修改模板答应项顺序
+  //将自适应高度的打印项（item.style.autoHeight == true）放在第一项
+  let flag = temp.findIndex((item) => item.style.autoHeight);
+  if (flag != -1) {
+    let autoItem = temp[flag];
+    temp.splice(flag, 1);
+    temp.unshift(autoItem);
+    // 处理位于自适应打印项下方的打印项
+    temp.forEach((item) => {
+      // 位于自适应高度项下的打印项修改top、left,并添加关联属性（style.LinkedItem）
+      if (item.top > autoItem.top && item.style.ItemType == 0) {
+        item.top = item.top - autoItem.top - autoItem.height;
+        item.left = item.left - autoItem.left;
+        item.style.LinkedItem = 1;
+      }
+    });
+  }
+
+  if (data && data.length > 0) {
+    // 解析打印模板和数据，生成生成打印内容
+    let tempContent = [];
+    data.forEach((dataItem) => {
+      let conItem = temp.map((tempItem) => {
+        let item = cloneDeep(tempItem);
+        if (item.name) {
+          item.defaultValue = dataItem[item.name];
+          item.value = strTempToValue(item.value, item.defaultValue);
+        }
+        return item;
+      });
+      tempContent.push(conItem);
+    });
+    return tempContent;
+  } else {
+    return [temp];
+  }
+}
+
+/**
+ * 添加打印项
+ * @param {lodop} LODOP 打印实例
+ * @param {Object} printItem 打印项内容
+ * @param {Number} pageIndex 当前打印页的开始序号
+ */
+function _AddPrintItem(LODOP, tempItem, pageIndex = 0) {
+  let printItem = cloneDeep(tempItem);
+  // TempItemStyle转换为LodopItemStyle
+  let lodopStyle = _createLodopStyle(printItem.style);
+
+  // 批量打印时，修改关联打印项的关联序号
+  if (lodopStyle.LinkedItem == 1) {
+    lodopStyle.LinkedItem = 1 + pageIndex;
+  }
+  // 添加打印项
+  switch (printItem.type) {
+    case 'braid-txt':
+      txtParser.parse(LODOP, printItem);
+      break;
+    case 'braid-barcode':
+      barCodeParser.parse(LODOP, printItem);
+      break;
+    case 'braid-html':
+      htmlParser.parse(LODOP, printItem);
+      break;
+    case 'braid-table':
+      tableParser.parse(LODOP, printItem);
+      break;
+    case 'braid-image':
+      imageParser.parse(LODOP, printItem);
+      break;
+    case 'braid-react':
+      reactParser.parse(LODOP, printItem);
+      break;
+    case 'braid-page':
+      pageParser.parse(LODOP, printItem);
+      break;
+    default:
+      '';
+  }
+  // 设置打印项样式
+  Object.keys(lodopStyle).forEach((key) => {
+    switch (key) {
+      case 'FontSize': {
+        LODOP.SET_PRINT_STYLEA(0, key, px2pt(lodopStyle[key]));
+        break;
+      }
+
+      default: {
+        LODOP.SET_PRINT_STYLEA(0, key, lodopStyle[key]);
+      }
+    }
+  });
+  // 设置默认LodopStyle
+  let defaultLodopStyle = printItem.lodopStyle;
+  if (defaultLodopStyle) {
+    Object.keys(defaultLodopStyle).forEach((key) => {
+      LODOP.SET_PRINT_STYLEA(0, key, defaultLodopStyle[key]);
+    });
+  }
+}
+
+/**
+ * 将模板设计样式转换为lodop样式
+ * @param style 模板样式
+ * @returns lodop样式对象
+ */
+function _createLodopStyle(style) {
+  let lodopStyle = {
+    zIndex: style.zIndex,
+  };
+
+  for (let key in style) {
+    if (['bold', 'italic', 'underline', 'ShowBarText'].indexOf(key) > -1) {
+      lodopStyle[key] = style[key] ? 1 : 0;
+    } else if (key === 'Alignment') {
+      lodopStyle[key] = style[key] == 'left' ? 1 : style[key] == 'center' ? 2 : 3;
+    } else {
+      lodopStyle[key] = style[key];
+    }
+  }
+
+  return lodopStyle;
+}
diff --git a/src/components/PrintDesigner/src/libs/lodop/tools.js b/src/components/PrintDesigner/src/libs/lodop/tools.js
new file mode 100644
index 0000000000000000000000000000000000000000..252241140b6e5fbd5c551793d34f530f1454b669
--- /dev/null
+++ b/src/components/PrintDesigner/src/libs/lodop/tools.js
@@ -0,0 +1,29 @@
+/**
+ * 通过模板和模板数据生成打印内容
+ * @param temp 打印模板
+ * @param data 模板数据
+ */
+export const tempToPrint = (temp, data) => {
+  let printContent = temp.map((item) => {
+    var reg = /({[^{]*})/g;
+    let value = item.value.replace(reg, data[item.name] || '');
+    return {
+      top: item.top,
+      left: item.left,
+      width: item.width,
+      height: item.height,
+      value: value,
+    };
+  });
+  return printContent;
+};
+
+/**
+ * 将字符串模板中{}内的内容替换成指定值
+ * @param str 表格列配置信息
+ * @param value 表格数据
+ */
+export const strTempToValue = (str, value) => {
+  let reg = /({[^}^{]*})/g;
+  return str.replace(reg, value || '');
+};
diff --git a/src/components/PrintDesigner/src/libs/props.js b/src/components/PrintDesigner/src/libs/props.js
new file mode 100644
index 0000000000000000000000000000000000000000..aad6765edf351c162890c6f0642728d609d6d66f
--- /dev/null
+++ b/src/components/PrintDesigner/src/libs/props.js
@@ -0,0 +1,68 @@
+export const getDefaultProps = () => ({
+  uuid: '',
+  type: 'braid-txt',
+  name: '',
+  isEdit: true,
+  draggable: true, // 是否可拖拽
+  resizable: true, // 尺寸是否可变
+  width: 120,
+  height: 40,
+  left: 50,
+  top: 0,
+  value: '自定义文本',
+  title: '自定义文本',
+  style: { zIndex: 1 },
+});
+
+export const getCodeTypeArray = () => [
+  '128A',
+  '128B',
+  '128C',
+  '128Auto',
+  'EAN8',
+  'EAN13',
+  'EAN128A',
+  'EAN128B',
+  'EAN128C',
+  'Code39',
+  '39Extended',
+  '2_5interleaved',
+  '2_5industrial',
+  '2_5matrix',
+  'UPC_A',
+  'UPC_E0',
+  'UPC_E1',
+  'UPCsupp2',
+  'UPCsupp5',
+  'Code93',
+  '93Extended',
+  'MSI',
+  'PostNet',
+  'Codabar',
+  'QRCode',
+  'PDF417',
+];
+
+export const getItemTypeArray = () => [
+  { label: '普通项', value: '0' },
+  { label: '页眉页脚', value: '1' },
+  { label: '页号项', value: '2' },
+  { label: '页数项', value: '3' },
+  { label: '多页项', value: '4' },
+];
+
+export const getIntLineStyleArray = () => [
+  { label: '实线', value: 0 },
+  { label: '破折线', value: 1 },
+  { label: '点线', value: 2 },
+  { label: '点划线', value: 3 },
+  { label: '双点划线', value: 4 },
+];
+
+export const parseIntLineStyle = (style) => {
+  if (style === 0) {
+    return 'solid';
+  } else {
+    return 'dashed';
+  }
+};
diff --git a/src/components/PrintDesigner/src/mixins/move.js b/src/components/PrintDesigner/src/mixins/move.js
new file mode 100644
index 0000000000000000000000000000000000000000..c9e00a4064ca283862fa65b5d101377dc3655789
--- /dev/null
+++ b/src/components/PrintDesigner/src/mixins/move.js
@@ -0,0 +1,57 @@
+import { usePrintDesignerStore } from '../store/printDesigner';
+
+export default {
+  setup() {
+    const printDesignerStore = usePrintDesignerStore();
+    return {
+      printDesignerStore,
+    };
+  },
+  methods: {
+    /**
+     * 初始化鼠标拖拽事件
+     * @param {*} e
+     */
+    initmovement(e) {
+      var target = this.printDesignerStore.activeElement;
+
+      // 设置移动状态初始值
+      this.printDesignerStore.initmove({
+        startX: e.pageX,
+        startY: e.pageY,
+        originX: target.left,
+        originY: target.top,
+      });
+
+      // 绑定鼠标移动事件
+      document.addEventListener('mousemove', this.handlemousemove, true);
+
+      // 取消鼠标移动事件
+      document.addEventListener('mouseup', this.handlemouseup, true);
+    },
+
+    /**
+     * 鼠标移动
+     * @param {*} e
+     */
+    handlemousemove(e) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      this.printDesignerStore.move({
+        x: e.pageX,
+        y: e.pageY,
+      });
+    },
+
+    /**
+     * 鼠标up
+     */
+    handlemouseup() {
+      document.removeEventListener('mousemove', this.handlemousemove, true);
+      document.removeEventListener('mouseup', this.handlemouseup, true);
+
+      this.printDesignerStore.stopmove();
+    },
+  },
+};
diff --git a/src/components/PrintDesigner/src/panel/index.vue b/src/components/PrintDesigner/src/panel/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1d8d606eee7c70bbb0064533915b798ffd3cf2d2
--- /dev/null
+++ b/src/components/PrintDesigner/src/panel/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="kr-collapse">
+    <a-collapse v-model:active-key="activeNames">
+      <a-collapse-panel key="1">
+        <template #header>
+          <span>页面参数</span>
+        </template>
+        <page />
+      </a-collapse-panel>
+      <a-collapse-panel key="3">
+        <template #header>
+          <span>组件</span>
+        </template>
+        <options />
+      </a-collapse-panel>
+      <a-collapse-panel key="4">
+        <template #header>
+          <span>已加组件</span>
+        </template>
+        <layers />
+      </a-collapse-panel>
+      <a-collapse-panel key="2" v-if="printDesignerStore.type !== 'page'">
+        <template #header>
+          <span>样式</span>
+        </template>
+        <appearance class="pd-l-10" />
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import page from './page.vue';
+  import style from './style.vue';
+  import options from './options/index.vue';
+  import layers from './layers.vue';
+  import { usePrintDesignerStore } from '../store/printDesigner';
+
+  export default defineComponent({
+    components: {
+      page,
+      appearance: style,
+      options,
+      layers,
+    },
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+
+    data() {
+      return {
+        activeNames: ['1', '2', '3', '4'],
+      };
+    },
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/panel/layers.vue b/src/components/PrintDesigner/src/panel/layers.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a33e9f207257b1733ebc52861b18404f7a593db
--- /dev/null
+++ b/src/components/PrintDesigner/src/panel/layers.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="tag-box">
+    <a-tag
+      class="cursor-pointer"
+      v-for="(layer, index) in layers"
+      :key="layer.uuid"
+      :closable="layer === activeElement ? true : false"
+      :color="layer === activeElement ? primaryColor : ''"
+      @click="
+        (e) => {
+          activeLayer(e, layer);
+        }
+      "
+      @close="
+        (e) => {
+          dele(e, layer);
+        }
+      "
+      >{{ layer.title }}</a-tag
+    >
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { cumulativeOffset, checkInView } from '../utils/offset';
+  import setting from '@/settings/projectSetting';
+  import { usePrintDesignerStore } from '../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    computed: {
+      // 已添加的组件
+      layers() {
+        return this.printDesignerStore.page.tempItems;
+      },
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      primaryColor() {
+        return setting.themeColor;
+      },
+    },
+    methods: {
+      activeLayer(e, item) {
+        this.printDesignerStore.select({
+          uuid: item.uuid,
+        });
+        let viewport = document.querySelector('#viewport');
+        if (viewport) {
+          let target = viewport.querySelector(`[data-uuid='${item.uuid}']`);
+          if (target && !checkInView(target)) {
+            viewport.scrollTop = cumulativeOffset(target).top - 50;
+          }
+        } else {
+          console.error('未找到 "#viewport" 的节点');
+        }
+      },
+
+      // 删除元件
+      dele(e, item) {
+        this.printDesignerStore.delete(item.uuid);
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .tag-box {
+    .ant-tag {
+      margin-bottom: 10px;
+      margin-right: 10px;
+    }
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/panel/options/index.vue b/src/components/PrintDesigner/src/panel/options/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5dc5a8717d4241e603c3323f2e3010e60714fd78
--- /dev/null
+++ b/src/components/PrintDesigner/src/panel/options/index.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="options-box">
+    <template v-for="(item, index) in optionItems" :key="index">
+      <a-popover
+        v-if="item.type === 'braid-table'"
+        placement="top"
+        width="200"
+        v-model:open="tablePopover"
+      >
+        <template #content>
+          <div>
+            <a-checkbox-group v-model:value="item.selectCol">
+              <a-row>
+                <a-col v-for="col in item.columnsAttr" :key="col.name" :span="12">
+                  <a-checkbox :value="col.name">{{ col.title }}</a-checkbox>
+                </a-col>
+              </a-row>
+            </a-checkbox-group>
+          </div>
+          <!--          <a-button size="small" slot="reference">{{ item.title }}</a-button>-->
+          <a-button
+            size="small"
+            type="primary"
+            @click="
+              (e) => {
+                addTempItem(e, item);
+              }
+            "
+            >确定</a-button
+          >
+        </template>
+        <a-button size="small">{{ item.title }}</a-button>
+      </a-popover>
+      <a-button
+        v-else
+        size="small"
+        @click="
+          (e) => {
+            addTempItem(e, item);
+          }
+        "
+        >{{ item.title }}</a-button
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { usePrintDesignerStore } from '../../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        tablePopover: false,
+      };
+    },
+    computed: {
+      optionItems() {
+        return this.printDesignerStore.optionItems;
+      },
+    },
+    methods: {
+      // 添加组件
+      addTempItem(e, item) {
+        switch (item.type) {
+          case 'braid-table': {
+            let selectCol = [];
+            item.selectCol.forEach((itemName) => {
+              let colInfo = item.columnsAttr.find((col) => col.name === itemName);
+              if (colInfo) {
+                selectCol.push(colInfo);
+              }
+            });
+            item.columns = selectCol; //表格显示的字段
+            this.printDesignerStore.addTempItem(item);
+            this.tablePopover = false;
+            break;
+          }
+          default:
+            this.printDesignerStore.addTempItem(item);
+        }
+      },
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .options-box {
+    .ant-btn {
+      margin-bottom: 10px;
+      margin-right: 10px;
+      margin-left: 0;
+    }
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/panel/page.vue b/src/components/PrintDesigner/src/panel/page.vue
new file mode 100644
index 0000000000000000000000000000000000000000..729d71449720f370655b6a8a2eaec1245a1f0790
--- /dev/null
+++ b/src/components/PrintDesigner/src/panel/page.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <a-form label-width="80px" :model="pageInfo" size="mini" class="kr-form">
+      <a-row>
+        <a-col :span="24">
+          <a-form-item label="模板名称">
+            <a-input v-model:value="pageInfo.title" class="w-full" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="模板宽度">
+            <a-input-number v-model:value="pageInfo.width" :min="1" class="min-input" disabled />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="模板高度">
+            <a-input-number v-model:value="pageInfo.height" :min="1" class="min-input" disabled />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="24">
+          <a-form-item label="纸张方向">
+            <a-radio-group
+              v-model:value="pageInfo.pageDirection"
+              :options="[
+                {
+                  label: '纵向',
+                  value: 1,
+                },
+                {
+                  label: '横向',
+                  value: 2,
+                },
+              ]"
+              @change="changePageDirection"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <div style="margin: 5px">
+          <a-space>
+            <a-dropdown>
+              <a @click.prevent>
+                选择纸张
+                <DownOutlined />
+              </a>
+              <template #overlay>
+                <a-menu @click="onSetPageSize">
+                  <a-menu-item v-for="(item, index) in pageSizeModels" :key="index">{{
+                    item.name
+                  }}</a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-space>
+        </div>
+      </a-row>
+      <a-row>
+        <a-form-item label="纸张宽度">
+          <a-input-number v-model:value="pageInfo.pageWidth" :min="1" class="min-input" />
+          <span class="unit-text">(mm)</span>
+        </a-form-item>
+      </a-row>
+      <a-row>
+        <a-form-item label="纸张高度">
+          <a-input-number v-model:value="pageInfo.pageHeight" :min="1" class="min-input" />
+          <span class="unit-text">(mm)</span>
+        </a-form-item>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import { mm2px } from '../utils/calc';
+  import { usePrintDesignerStore } from '../store/printDesigner';
+
+  export default defineComponent({
+    components: {
+      DownOutlined,
+    },
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    computed: {
+      pageInfo() {
+        return this.printDesignerStore.page;
+      },
+      pageSizeModels() {
+        const models = [];
+        models.push(
+          {
+            name: 'A3',
+            width: 297,
+            height: 420,
+          },
+          {
+            name: 'A4',
+            width: 210,
+            height: 297,
+          },
+          {
+            name: 'A5',
+            width: 148,
+            height: 210,
+          },
+          {
+            name: 'A6',
+            width: 105,
+            height: 148,
+          },
+          {
+            name: 'B3',
+            width: 353,
+            height: 500,
+          },
+          {
+            name: 'B4',
+            width: 250,
+            height: 353,
+          },
+          {
+            name: 'B5',
+            width: 176,
+            height: 250,
+          },
+          {
+            name: 'B6',
+            width: 125,
+            height: 176,
+          },
+        );
+
+        return models;
+      },
+    },
+    methods: {
+      onSetPageSize({ key }) {
+        const model = this.pageSizeModels[key];
+        this.pageInfo.pageWidth = model.width;
+        this.pageInfo.pageHeight = model.height;
+        this.pageInfo.width = parseInt(mm2px(model.width));
+        this.pageInfo.height = parseInt(mm2px(model.height));
+
+        this.pageInfo.pageDirection = 1;
+      },
+      changePageDirection() {
+        if (this.pageInfo.pageDirection === 1) {
+          this.pageInfo.width = parseInt(mm2px(this.pageInfo.pageWidth));
+          this.pageInfo.height = parseInt(mm2px(this.pageInfo.pageHeight));
+        } else {
+          this.pageInfo.width = parseInt(mm2px(this.pageInfo.pageHeight));
+          this.pageInfo.height = parseInt(mm2px(this.pageInfo.pageWidth));
+        }
+      },
+    },
+  });
+</script>
diff --git a/src/components/PrintDesigner/src/panel/style.vue b/src/components/PrintDesigner/src/panel/style.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a67f127309066fce1876f83438ae155b7c967da8
--- /dev/null
+++ b/src/components/PrintDesigner/src/panel/style.vue
@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <!-- 公共属性 -->
+    <a-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
+      <a-row>
+        <a-form-item>
+          <a-col :span="24">
+            <a-space
+              ><a-button size="small" type="primary" @click="copyTempItem">复制</a-button></a-space
+            >
+          </a-col>
+        </a-form-item>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="宽度">
+            <a-input-number v-model:value="activeElement.width" :min="1" class="min-input" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="高度">
+            <a-input-number v-model:value="activeElement.height" :min="1" class="min-input" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="横坐标">
+            <a-input-number v-model:value="activeElement.left" :min="0" class="min-input" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="纵坐标">
+            <a-input-number v-model:value="activeElement.top" :min="0" class="min-input" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12">
+          <a-form-item label="组件名称">
+            <a-input v-model:value="activeElement.title" class="min-input" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="字段名">
+            <a-input v-model:value="activeElement.name" class="min-input" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <component :is="activeElement.type + 'Panel'" :active-element="activeElement" />
+    </a-form>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { getCodeTypeArray, getItemTypeArray } from '../libs/props.js';
+  import cloneDeep from 'lodash/cloneDeep';
+  import { usePrintDesignerStore } from '../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        codeTypeArray: getCodeTypeArray(),
+        itemTypeArray: getItemTypeArray(),
+      };
+    },
+    computed: {
+      activeElement() {
+        return this.printDesignerStore.activeElement;
+      },
+      // 页面高度
+      height() {
+        return this.printDesignerStore.page.height;
+      },
+    },
+    methods: {
+      copyTempItem() {
+        const item = cloneDeep(this.activeElement);
+        this.printDesignerStore.addTempItem(item);
+      },
+    },
+  });
+</script>
+<style lang="scss" scoped>
+  .mini-form {
+    ::v-deep.a-form-item--mini.a-form-item {
+      margin-bottom: 10px;
+    }
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/store/printDesigner.js b/src/components/PrintDesigner/src/store/printDesigner.js
new file mode 100644
index 0000000000000000000000000000000000000000..112ecc8e6827c48e967ea4f1ae967a6d82239d21
--- /dev/null
+++ b/src/components/PrintDesigner/src/store/printDesigner.js
@@ -0,0 +1,228 @@
+import { defineStore } from 'pinia';
+import { getDefaultProps } from '../libs/props.js';
+import printComponents from '../../install';
+
+const generate = () => {
+  const s = [];
+  const hexDigits = '0123456789abcdef';
+  for (let i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+
+  const uuid = s.join('');
+  return uuid;
+};
+
+export const usePrintDesignerStore = defineStore({
+  id: 'print-designer-store',
+  state: () => ({
+    zoom: 100, // 画布缩放百分比
+    type: 'page', // 选中元素类型
+    index: -1, // 选中元素索引
+    uuid: -1, // 选中元素uuid
+
+    originX: 0, // 选中元件的横向初始值
+    originY: 0, // 选中元件的纵向初始值
+    startX: 0, // 鼠标摁下时的横坐标
+    startY: 0, // 鼠标摁下时的纵坐标
+    moving: false, // 是否正在移动元件（参考线仅在移动元件时显示）
+
+    activeElement: getDefaultProps(), // 选中对象，要么是元件，要么是页面
+
+    // 模板信息
+    page: {
+      title: 'demo',
+      width: 750,
+      height: 550,
+      pageWidth: 750,
+      pageHeight: 550,
+      tempItems: [], // 模板已选项
+    },
+    optionItems: [], // 可选项
+
+    //模板参数
+    tempId: '', // 模板Id
+    loading: false, // 是否正在初始化中
+
+    widgetSetting: printComponents.getWidgetsSetting(), // 模板组件默认属性
+  }),
+
+  actions: {
+    // 添加模板项
+    addTempItem(item) {
+      const def = { uuid: generate(), top: 0, left: 0 };
+      const setting = JSON.parse(JSON.stringify(item));
+
+      this.page.tempItems.push(Object.assign(setting, def));
+      // 设置选中
+      this.select({
+        uuid: this.page.tempItems[this.page.tempItems.length - 1].uuid,
+      });
+    },
+
+    // 初始化模板设计器
+    async designerInit(tempInfo) {
+      this.initOptionItems(tempInfo.options);
+      this.initPage(tempInfo.tempValue);
+    },
+
+    // 初始化页面属性
+    initPage(pageInfo) {
+      this.page = pageInfo;
+      // 补全默认样式
+      const tempItems = pageInfo.tempItems
+        ? pageInfo.tempItems.map((item) => {
+            const optionItem = {
+              ...this.widgetSetting[item.type],
+              ...item,
+              style: { ...this.widgetSetting[item.type].style, ...(item.style || {}) },
+            };
+            return optionItem;
+          })
+        : [];
+
+      this.page.tempItems = tempItems;
+    },
+    // 初始化可选对象
+    initOptionItems(options) {
+      // 补全默认属性
+      const optionsObject = options
+        ? options.map((item) => {
+            const optionItem = {
+              ...this.widgetSetting[item.type],
+              ...item,
+              style: { ...this.widgetSetting[item.type].style, ...(item.style || {}) },
+            };
+            return optionItem;
+          })
+        : [];
+
+      this.optionItems = optionsObject;
+    },
+
+    // 初始化选中对象
+    initActive() {
+      this.activeElement = getDefaultProps();
+    },
+
+    // 设置 mousemove 操作的初始值
+    initmove(payload) {
+      this.startX = payload.startX;
+      this.startY = payload.startY;
+      this.originX = payload.originX;
+      this.originY = payload.originY;
+      this.moving = true;
+    },
+
+    // 选中元件与取消选中
+    select(temp) {
+      this.uuid = temp.uuid;
+      if (temp.uuid === -1) {
+        this.activeElement = getDefaultProps();
+        this.type = 'page';
+      } else {
+        const widget = this.page.tempItems.find((w) => w.uuid === temp.uuid);
+        if (widget) {
+          this.activeElement = widget;
+          this.type = widget.type;
+        }
+      }
+    },
+
+    // 元件移动结束
+    stopmove() {
+      this.moving = false;
+    },
+
+    // 移动元件
+    move(track) {
+      const target = this.activeElement;
+      const dx = track.x - this.startX;
+      const dy = track.y - this.startY;
+      const left = this.originX + Math.floor((dx * 100) / this.zoom);
+      const top = this.originY + Math.floor((dy * 100) / this.zoom);
+
+      target.left = left > 0 ? left : 0;
+      target.top = top > 0 ? top : 0;
+    },
+
+    // 调整元件尺寸
+    resize(track) {
+      const dx = track.x - this.startX;
+      const dy = track.y - this.startY;
+      let value;
+
+      if (track.type === 'right') {
+        value = this.originX + Math.floor((dx * 100) / this.zoom);
+        this.activeElement.width = value > 10 ? value : 10;
+        return;
+      }
+
+      if (track.type === 'down') {
+        value = this.originX + Math.floor((dy * 100) / this.zoom);
+        this.activeElement.height = value > 10 ? value : 10;
+        return;
+      }
+
+      if (track.type === 'left') {
+        const left = this.originX + Math.floor((dx * 100) / this.zoom);
+        const width = this.originY - Math.floor((dx * 100) / this.zoom);
+        this.activeElement.left = left > 0 ? left : 0;
+        this.activeElement.width = width > 10 ? width : 10;
+        return;
+      }
+
+      if (track.type === 'up') {
+        const top = this.originX + Math.floor((dy * 100) / this.zoom);
+        const height = this.originY - Math.floor((dy * 100) / this.zoom);
+        this.activeElement.top = top > 0 ? top : 0;
+        this.activeElement.height = height > 10 ? height : 10;
+      }
+    },
+
+    // 更新元件初始 top 值
+    updateSrollTop(top) {
+      this.top = top;
+    },
+
+    // 删除选中元件
+    delete(uuid) {
+      const type = this.type;
+      if (type === 'page') return;
+      let index = 0;
+      this.page.tempItems.forEach((item, idx) => {
+        if (item.uuid === uuid) {
+          index = idx;
+        }
+      });
+      // 删除元件
+      this.page.tempItems.splice(index, 1);
+
+      // 重置 activeElement
+      this.activeElement = getDefaultProps();
+      this.type = 'page';
+      this.uuid = -1;
+    },
+
+    // 更新数据
+    updateData({ uuid, value }) {
+      const widget = this.page.tempItems.find((w) => w.uuid === uuid);
+      widget ? (widget.value = value) : '';
+    },
+
+    // 设置模板Id
+    setTempId(id) {
+      this.tempId = id;
+    },
+
+    setLoading(flag) {
+      this.loading = flag;
+    },
+    // 设置模板默认属性
+    setWidgetSetting(settingObj) {
+      this.widgetSetting = settingObj;
+    },
+  },
+});
diff --git a/src/components/PrintDesigner/src/utils/calc.js b/src/components/PrintDesigner/src/utils/calc.js
new file mode 100644
index 0000000000000000000000000000000000000000..267a983b9df1351cd67deebc92ec7a816ff7aab2
--- /dev/null
+++ b/src/components/PrintDesigner/src/utils/calc.js
@@ -0,0 +1,15 @@
+export const mm2px = (mm) => {
+  return (mm * 96) / 25.4;
+};
+
+export const px2mm = (px) => {
+  return (px * 25.4) / 96;
+};
+
+export const px2pt = (px) => {
+  return (px * 72) / 96;
+};
+
+export const pt2px = (pt) => {
+  return (pt * 96) / 72;
+};
diff --git a/src/components/PrintDesigner/src/utils/offset.js b/src/components/PrintDesigner/src/utils/offset.js
new file mode 100644
index 0000000000000000000000000000000000000000..410bc5eab8dca7538ea521ddd295bf34fd7f1015
--- /dev/null
+++ b/src/components/PrintDesigner/src/utils/offset.js
@@ -0,0 +1,24 @@
+/**
+ * 获取元素位置
+ * @param {*} el
+ */
+export function cumulativeOffset(el) {
+  let top = el.offsetTop;
+  let left = el.offsetLeft;
+
+  return {
+    top: top,
+    left: left,
+  };
+}
+
+/**
+ * 判断元素是否在窗口内
+ * @param {*} el
+ */
+export function checkInView(el) {
+  let rect = el.getBoundingClientRect();
+  return (
+    rect.top > 0 && rect.top < window.innerHeight && rect.left < window.innerWidth && rect.right > 0
+  );
+}
diff --git a/src/components/PrintDesigner/src/viewport/index.vue b/src/components/PrintDesigner/src/viewport/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28ecdfc6b1c5d4466c2621f7a01e8df0b1db1a1e
--- /dev/null
+++ b/src/components/PrintDesigner/src/viewport/index.vue
@@ -0,0 +1,183 @@
+<template>
+  <div id="viewport" data-type="viewport" class="holder">
+    <div
+      :style="{
+        height: page.height + 'px',
+        width: page.width + 'px',
+        backgroundImage: 'url(' + backImg + ')',
+      }"
+      class="screen"
+    >
+      <!-- 组件 -->
+      <component
+        v-for="val in widgetStore"
+        :is="val.type"
+        :data-title="val.type"
+        :class="{ active: widgetId === val.uuid }"
+        :key="val.uuid"
+        :val="val"
+        :data-type="val.type"
+        :data-uuid="val.uuid"
+        class="layer"
+      />
+
+      <!-- 参考线 -->
+      <!-- <ref /> -->
+
+      <!-- 尺寸控制器 -->
+      <control />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import control from './size-control.vue';
+  import move from '../mixins/move';
+  import { usePrintDesignerStore } from '../store/printDesigner';
+
+  export default defineComponent({
+    components: {
+      control, // 尺寸控制
+    },
+
+    mixins: [move],
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+
+    data() {
+      return {};
+    },
+
+    computed: {
+      // 已添加的组件
+      widgetStore() {
+        return this.printDesignerStore.page.tempItems;
+      },
+      // 背景图地址
+      backImg() {
+        return this.printDesignerStore.page.imageUrl ? this.printDesignerStore.page.imageUrl : '';
+      },
+
+      // 画布高度
+      page() {
+        return this.printDesignerStore.page;
+      },
+      // 选中项id
+      widgetId() {
+        return this.printDesignerStore.uuid;
+      },
+    },
+
+    mounted() {
+      // 采用事件代理的方式监听元件的选中操作
+      let viewportDom = document.getElementById('viewport');
+      if (viewportDom) {
+        viewportDom.addEventListener('mousedown', this.handleSelection, false);
+      } else {
+        console.error('未找的‘viewport’节点');
+      }
+
+      // 绑定键盘上下左右键用于元件的移动
+      document.addEventListener(
+        'keydown',
+        (e) => {
+          e.stopPropagation();
+          var target = this.printDesignerStore.activeElement;
+          // 左
+          if (e.keyCode === 37 && target.left) {
+            target.left -= 1;
+            return;
+          }
+          // 上
+          if (e.keyCode === 38 && target.top) {
+            e.preventDefault();
+            target.top -= 1;
+            return;
+          }
+          // 右
+          if (e.keyCode === 39 && target.left) {
+            target.left += 1;
+            return;
+          }
+          // 下
+          if (e.keyCode === 40 && target.top) {
+            e.preventDefault();
+            target.top += 1;
+          }
+        },
+        true,
+      );
+    },
+
+    methods: {
+      /**
+       * 目标元素获得焦点
+       */
+      handleSelection(e) {
+        var target = this.selectTarget(e.target);
+        if (target) {
+          var uuid = target.getAttribute('data-uuid');
+          // 设置选中元素
+          this.printDesignerStore.select({
+            uuid: uuid || -1,
+          });
+          // 绑定移动事件：除背景图以外的元件才能移动
+          target = this.printDesignerStore.activeElement;
+          if (target.draggable) {
+            this.initmovement(e); // 参见 mixins
+          }
+        } else {
+          // 取消选中元素
+          this.printDesignerStore.select({
+            uuid: -1,
+          });
+        }
+
+        return true;
+      },
+      /**
+       * 获得选中的目标，如果没有返回false
+       */
+      selectTarget(target) {
+        let type = target.getAttribute('data-type');
+        if (type) {
+          if (type === 'viewport') {
+            return false;
+          } else {
+            return target;
+          }
+        } else {
+          return this.selectTarget(target.parentNode);
+        }
+      },
+    },
+  });
+</script>
+
+<style scoped>
+  .holder {
+    display: flex;
+    justify-content: center;
+    overflow: auto;
+    font-size: 0;
+    border: 1px solid #f5f5f5;
+    border-width: 0 1px;
+    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0),
+      linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
+    background-position: 0 0, 13px 13px;
+    background-size: 26px 26px;
+  }
+  .screen {
+    margin: 25px auto;
+    transform-origin: center top;
+    position: relative;
+    box-shadow: 0 0 5px 1px #cccccc;
+    background-color: #ffffff;
+    background-repeat: no-repeat;
+  }
+</style>
diff --git a/src/components/PrintDesigner/src/viewport/size-control.vue b/src/components/PrintDesigner/src/viewport/size-control.vue
new file mode 100644
index 0000000000000000000000000000000000000000..911db92ede5fd520aca9b87bb98f5e47ec4ada95
--- /dev/null
+++ b/src/components/PrintDesigner/src/viewport/size-control.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-show="optionsType !== 'page'">
+    <!-- 左 -->
+    <div
+      :style="{
+        height: elm.height + 'px',
+        top: elm.top + 'px',
+        left: elm.left + 'px',
+      }"
+      class="verti"
+      @mousedown="handlemousedown($event, 'left', 'left', 'width')"
+    >
+      <div class="square"></div>
+    </div>
+
+    <!-- 右 -->
+    <div
+      :style="{
+        height: elm.height + 'px',
+        top: elm.top + 'px',
+        left: elm.left + elm.width + 'px',
+      }"
+      class="verti"
+      @mousedown="handlemousedown($event, 'right', 'width')"
+    >
+      <div class="square"></div>
+    </div>
+
+    <!-- 上 -->
+    <div
+      :style="{
+        width: elm.width + 'px',
+        top: elm.top + 'px',
+        left: elm.left + 'px',
+      }"
+      class="horiz"
+      @mousedown="handlemousedown($event, 'up', 'top', 'height')"
+    >
+      <div class="square"></div>
+    </div>
+
+    <!-- 下 -->
+    <div
+      :style="{
+        width: elm.width + 'px',
+        top: elm.top + elm.height + 'px',
+        left: elm.left + 'px',
+      }"
+      class="horiz"
+      @mousedown="handlemousedown($event, 'down', 'height')"
+    >
+      <div class="square"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { usePrintDesignerStore } from '../store/printDesigner';
+
+  export default defineComponent({
+    setup() {
+      const printDesignerStore = usePrintDesignerStore();
+      return {
+        printDesignerStore,
+      };
+    },
+    data() {
+      return {
+        type: '', // 调整方向 left | right | up | down
+      };
+    },
+    computed: {
+      optionsType() {
+        return this.printDesignerStore.type;
+      },
+      elm() {
+        let target = this.printDesignerStore.activeElement;
+        if (!target.resizable) return '';
+        return target;
+      },
+    },
+
+    methods: {
+      handlemousedown(e, type, originX, originY) {
+        e.stopPropagation();
+        this.type = type;
+
+        this.printDesignerStore.initmove({
+          startX: e.pageX,
+          startY: e.pageY,
+          originX: this.elm[originX],
+          originY: this.elm[originY],
+        });
+
+        document.addEventListener('mousemove', this.handlemousemove, true);
+        document.addEventListener('mouseup', this.handlemouseup, true);
+      },
+
+      handlemousemove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.printDesignerStore.resize({
+          x: e.pageX,
+          y: e.pageY,
+          type: this.type,
+        });
+      },
+
+      handlemouseup() {
+        document.removeEventListener('mousemove', this.handlemousemove, true);
+        document.removeEventListener('mouseup', this.handlemouseup, true);
+        this.printDesignerStore.stopmove();
+      },
+    },
+  });
+</script>
+
+<style scoped>
+  .verti,
+  .horiz {
+    position: absolute;
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .verti {
+    width: 0;
+    cursor: ew-resize;
+  }
+  .horiz {
+    height: 0;
+    cursor: ns-resize;
+  }
+  .square {
+    box-sizing: border-box;
+    width: 6px;
+    height: 6px;
+    border: 1px solid #2196f3;
+    background-color: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>
diff --git a/src/components/Selector/src/CustomerSelector.vue b/src/components/Selector/src/CustomerSelector.vue
index ae2985c9568c756749bf216335b6287aa2e95ca0..600d305b108aa3dd7292d87b23e605cf548c3864 100644
--- a/src/components/Selector/src/CustomerSelector.vue
+++ b/src/components/Selector/src/CustomerSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/FlowCategorySelector.vue b/src/components/Selector/src/FlowCategorySelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ff343f0076f53d409407572e55f3c38e0a003127
--- /dev/null
+++ b/src/components/Selector/src/FlowCategorySelector.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <a-tree-select
+      v-model:value="model"
+      tree-default-expand-all
+      :show-search="true"
+      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+      :field-names="{ label: 'name', key: 'id', value: 'id', children: 'children' }"
+      :tree-data="options"
+      :placeholder="placeholder"
+      allow-clear
+      :filter-tree-node="filter"
+      :disabled="disabled"
+      :multiple="multiple"
+      style="width: 100%"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/bpm/flow/flow-category';
+
+  export default defineComponent({
+    name: 'FlowCategorySelector',
+    components: {},
+    props: {
+      value: { type: [Object, String, Array], required: true },
+      requestParams: {
+        type: Object,
+        default: (e) => {
+          return {};
+        },
+      },
+      onlyFinal: {
+        type: Boolean,
+        default: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      beforeOpen: {
+        type: Function,
+        default: (e) => {
+          return () => {
+            return true;
+          };
+        },
+      },
+      placeholder: {
+        type: String,
+        default: '',
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        options: [],
+      };
+    },
+    computed: {
+      model: {
+        get() {
+          return this.value;
+        },
+        set() {},
+      },
+      _requestParams() {
+        return Object.assign({}, this.requestParams);
+      },
+    },
+    created() {
+      this.loadOptions();
+    },
+    methods: {
+      getList() {
+        return api.query();
+      },
+      loadOptions() {
+        this.getList().then((data) => {
+          const options = this.$utils.toArrayTree(data);
+          if (this.onlyFinal) {
+            this.$utils.eachTree(options, (item) => {
+              if (!this.$utils.isEmpty(item.children) || this.$utils.isEmpty(item.parentId)) {
+                item.disabled = true;
+              }
+            });
+          }
+
+          this.options = options;
+        });
+      },
+      onChange(e) {
+        if (this.$utils.isEmpty(e)) {
+          this.$emit('update:value', e);
+          this.$emit('clear', e);
+        } else {
+          this.$emit('update:value', e);
+        }
+      },
+      filter(inputValue, node) {
+        return node.name.indexOf(inputValue) > -1;
+      },
+    },
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/src/components/Selector/src/FlowDefinitionSelector.vue b/src/components/Selector/src/FlowDefinitionSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36f9e0c040f5c798d6be7690d2f0e76b3967a9fb
--- /dev/null
+++ b/src/components/Selector/src/FlowDefinitionSelector.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <dialog-table
+      ref="selector"
+      :request="getList"
+      :load="getLoad"
+      :request-params="_requestParams"
+      :table-column="[
+        { field: 'flowCode', title: '流程编号', width: 100 },
+        { field: 'flowName', title: '流程名称', minWidth: 180 },
+        { field: 'categoryName', title: '流程分类', width: 120 },
+        { field: 'version', title: '版本号', width: 60 },
+        { field: 'createTime', title: '创建时间', width: 170 },
+      ]"
+      :column-option="{ label: 'flowCode', value: 'id' }"
+      v-bind="$attrs"
+    >
+      <template #form>
+        <!-- 查询条件 -->
+        <j-border>
+          <j-form bordered>
+            <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="流程编号">
+              <a-input v-model:value="searchParams.code" />
+            </j-form-item>
+            <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="流程名称">
+              <a-input v-model:value="searchParams.name" />
+            </j-form-item>
+            <j-form-item v-if="$utils.isEmpty(requestParams.categoryId)" label="流程分类">
+              <flow-category-selector v-model:value="searchParams.categoryId" :only-final="true" />
+            </j-form-item>
+          </j-form>
+        </j-border>
+      </template>
+      <!-- 工具栏 -->
+      <template #toolbar_buttons>
+        <a-space class="operator">
+          <a-button type="primary" @click="$refs.selector.search()">
+            <template #icon>
+              <SearchOutlined />
+            </template>
+            查询</a-button
+          >
+        </a-space>
+      </template>
+    </dialog-table>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/bpm/flow/definition';
+
+  export default defineComponent({
+    name: 'FlowDefinitionSelector',
+    components: { SearchOutlined },
+    props: {
+      requestParams: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {
+        searchParams: {
+          code: '',
+          name: '',
+          categoryId: '',
+        },
+      };
+    },
+    computed: {
+      _requestParams() {
+        return { ...this.searchParams, ...this.requestParams };
+      },
+    },
+    methods: {
+      getList(params) {
+        return api.selector({
+          ...params,
+          ...this.searchParams,
+          ...this.requestParams,
+        });
+      },
+      getLoad(ids) {
+        return api.loadFlowDefinition(ids);
+      },
+    },
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/src/components/Selector/src/GenCustomListCategorySelector.vue b/src/components/Selector/src/GenCustomListCategorySelector.vue
index ed777a8331cc822c41b145325a7b106aa6f8a79c..d9d07cb6fc9c944ccf08f2f589584e84893f3211 100644
--- a/src/components/Selector/src/GenCustomListCategorySelector.vue
+++ b/src/components/Selector/src/GenCustomListCategorySelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenCustomListSelector.vue b/src/components/Selector/src/GenCustomListSelector.vue
index 811ff077dc7d0cccc5dd769dbb1b125d3b264762..8603b54514b2928164757aea1162302d4a286777 100644
--- a/src/components/Selector/src/GenCustomListSelector.vue
+++ b/src/components/Selector/src/GenCustomListSelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenCustomPageCategorySelector.vue b/src/components/Selector/src/GenCustomPageCategorySelector.vue
index 80e689436ace860c34c5d613d684850313175943..679a30a51725a0d1490809b948b52014cb4cdd28 100644
--- a/src/components/Selector/src/GenCustomPageCategorySelector.vue
+++ b/src/components/Selector/src/GenCustomPageCategorySelector.vue
@@ -5,17 +5,16 @@
       :request="getList"
       :load="getLoad"
       :table-column="[
-        { field: 'code', title: '编号', width: 100 },
-        { field: 'name', title: '名称', minWidth: 160, treeNode: true },
+        { field: 'code', title: '编号', width: 120 },
+        { field: 'name', title: '名称', minWidth: 160 },
       ]"
       :request-params="_requestParams"
-      :handle-search="handleSearch"
       v-bind="$attrs"
     >
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
@@ -43,7 +42,7 @@
 <script>
   import { defineComponent } from 'vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
-  import * as api from '@/api/development/custom/list-category';
+  import * as api from '@/api/development/custom/page-category';
 
   export default defineComponent({
     name: 'GenCustomPageCategorySelector',
@@ -76,40 +75,7 @@
         });
       },
       getLoad(ids) {
-        return api.loadCustomListCategory(ids);
-      },
-      handleSearch(datas) {
-        const filterCode = this.$utils.toString(this.searchParams.code).trim();
-        const filterName = this.$utils.toString(this.searchParams.name).trim();
-        const isFilterCode = !this.$utils.isEmpty(filterCode);
-        const isFilterName = !this.$utils.isEmpty(filterName);
-        if (isFilterCode || isFilterName) {
-          const options = { key: 'id', parentKey: 'parentId', children: 'children', strict: true };
-          const tableData = this.$utils.searchTree(
-            datas,
-            (item) => {
-              let filterResult = true;
-
-              if (isFilterCode) {
-                filterResult &= this.$utils.isEqualWithStr(
-                  this.$utils.toString(item['code']),
-                  filterName,
-                );
-              }
-
-              if (isFilterName) {
-                filterResult &= this.$utils.toString(item['name']).indexOf(filterName) > -1;
-              }
-
-              return filterResult;
-            },
-            options,
-          );
-
-          return tableData;
-        } else {
-          return datas;
-        }
+        return api.loadCustomPageCategory(ids);
       },
     },
   });
diff --git a/src/components/Selector/src/GenCustomPageSelector.vue b/src/components/Selector/src/GenCustomPageSelector.vue
index 83c26258e14e71a10ecc3fe3808225cc48f8c63c..e9dcd19d96db91b264f12c1ae895947dc9d47366 100644
--- a/src/components/Selector/src/GenCustomPageSelector.vue
+++ b/src/components/Selector/src/GenCustomPageSelector.vue
@@ -15,7 +15,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.id)" label="页面ID">
               <a-input v-model:value="searchParams.id" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenCustomSelectorCategorySelector.vue b/src/components/Selector/src/GenCustomSelectorCategorySelector.vue
index d302773a3c6472a52088b16aa4811b0008746f98..e854146922c0f593167f0d4dbbefe93c101b8213 100644
--- a/src/components/Selector/src/GenCustomSelectorCategorySelector.vue
+++ b/src/components/Selector/src/GenCustomSelectorCategorySelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenCustomSelectorSelector.vue b/src/components/Selector/src/GenCustomSelectorSelector.vue
index 7aa449105b0a45547f730dbdf24e6363ab95c39f..5674ab4575000e205f66e341cf340711f1e2fe98 100644
--- a/src/components/Selector/src/GenCustomSelectorSelector.vue
+++ b/src/components/Selector/src/GenCustomSelectorSelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenDataEntityCategorySelector.vue b/src/components/Selector/src/GenDataEntityCategorySelector.vue
index 2eb083596b8cde5f705a4aca2586b3398cd14b31..81ac908784dcf1d18e3f468cc23c2f7f37ad5c6a 100644
--- a/src/components/Selector/src/GenDataEntityCategorySelector.vue
+++ b/src/components/Selector/src/GenDataEntityCategorySelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenDataEntitySelector.vue b/src/components/Selector/src/GenDataEntitySelector.vue
index ca084f07e1abc6f162a7132fb90107270331eaf1..bb6c83d61d42f5fa2a377d778ed57ecda56bf6f7 100644
--- a/src/components/Selector/src/GenDataEntitySelector.vue
+++ b/src/components/Selector/src/GenDataEntitySelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenDataObjCategorySelector.vue b/src/components/Selector/src/GenDataObjCategorySelector.vue
index 22213b33238cc4a7ed412739dacc41ee30c963bc..572fcb537520c1a7c50535bee842b90a3f38330a 100644
--- a/src/components/Selector/src/GenDataObjCategorySelector.vue
+++ b/src/components/Selector/src/GenDataObjCategorySelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/GenDataObjSelector.vue b/src/components/Selector/src/GenDataObjSelector.vue
index a4dba2f558e5c75af92cba9ad82c5dfa3d820530..38c3cf33b1fbfa3bc06ac58322c2759ce3afc69b 100644
--- a/src/components/Selector/src/GenDataObjSelector.vue
+++ b/src/components/Selector/src/GenDataObjSelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
diff --git a/src/components/Selector/src/LogisticsCompanySelector.vue b/src/components/Selector/src/LogisticsCompanySelector.vue
index ebafbe9b2fab3495301ce32deca10955ec3daa27..244048f9b4fca5bac203b75a2b1cb647ab4e56c6 100644
--- a/src/components/Selector/src/LogisticsCompanySelector.vue
+++ b/src/components/Selector/src/LogisticsCompanySelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/MemberSelector.vue b/src/components/Selector/src/MemberSelector.vue
index 6cbeb759a71e2e5cbce7ff4978f126ad0ecfddc7..7fc955ccbc6ab994c35f3a4769b7668ef1787e9f 100644
--- a/src/components/Selector/src/MemberSelector.vue
+++ b/src/components/Selector/src/MemberSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/PayTypeSelector.vue b/src/components/Selector/src/PayTypeSelector.vue
index 18e78898e4dd2a3de3b387afc195940a6bd6ab1d..b1e5e80480d44e1a9d9920b196e7b2feb302469e 100644
--- a/src/components/Selector/src/PayTypeSelector.vue
+++ b/src/components/Selector/src/PayTypeSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/PreTakeStockSheetSelector.vue b/src/components/Selector/src/PreTakeStockSheetSelector.vue
index ff2df9f6f8bc52f2ec6b538663e7829038222ffc..060d91547565e36e1ecc73a32437369340fb709b 100644
--- a/src/components/Selector/src/PreTakeStockSheetSelector.vue
+++ b/src/components/Selector/src/PreTakeStockSheetSelector.vue
@@ -32,7 +32,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="单据号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/ProductBrandSelector.vue b/src/components/Selector/src/ProductBrandSelector.vue
index d4aead6acd658c930efe9da999288cf00e4b5654..7c243f9f8282da2d02bc9245a067eed222c116ab 100644
--- a/src/components/Selector/src/ProductBrandSelector.vue
+++ b/src/components/Selector/src/ProductBrandSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/ProductCategorySelector.vue b/src/components/Selector/src/ProductCategorySelector.vue
index fd5163acb2ce9d1ac043baca470c709029b433fb..58c49a160fd16d8b83784b6241f6903963c5fede 100644
--- a/src/components/Selector/src/ProductCategorySelector.vue
+++ b/src/components/Selector/src/ProductCategorySelector.vue
@@ -11,7 +11,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
diff --git a/src/components/Selector/src/ProductSelector.vue b/src/components/Selector/src/ProductSelector.vue
index e9e3fabd2ce657109e2b7d3435fb17a94519340e..a6623a3624e32684b7e18b25dae064d6c8b74bab 100644
--- a/src/components/Selector/src/ProductSelector.vue
+++ b/src/components/Selector/src/ProductSelector.vue
@@ -21,7 +21,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/PurchaseOrderSelector.vue b/src/components/Selector/src/PurchaseOrderSelector.vue
index b67da57f0ad27f2ba37cdf04fc8e653d6d5db251..fd623bc24722d602d81f9e37e080d70ad006ff27 100644
--- a/src/components/Selector/src/PurchaseOrderSelector.vue
+++ b/src/components/Selector/src/PurchaseOrderSelector.vue
@@ -28,7 +28,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="单据号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/ReceiveSheetSelector.vue b/src/components/Selector/src/ReceiveSheetSelector.vue
index bb4b2f03a16cbef8cc92e5a9346079c6b679a6f9..99e1fd585a6f33884eb302945dcec0fa2b5052e0 100644
--- a/src/components/Selector/src/ReceiveSheetSelector.vue
+++ b/src/components/Selector/src/ReceiveSheetSelector.vue
@@ -28,7 +28,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="单据号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SettleInItemSelector.vue b/src/components/Selector/src/SettleInItemSelector.vue
index 9427df839bfb8f9b2f93cab17110bc2642a29fdc..29af5de91775bfafc0573ebea2e9f26623170dbf 100644
--- a/src/components/Selector/src/SettleInItemSelector.vue
+++ b/src/components/Selector/src/SettleInItemSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SettleOutItemSelector.vue b/src/components/Selector/src/SettleOutItemSelector.vue
index 3765d05f96cd9c7d5f26e3800e68ce8ccf8a214a..13fadd6942a0cb49c166d7d943ed23997dd4c330 100644
--- a/src/components/Selector/src/SettleOutItemSelector.vue
+++ b/src/components/Selector/src/SettleOutItemSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/ShopSelector.vue b/src/components/Selector/src/ShopSelector.vue
index d530236359ffcc864d3a6dd53d42329b0bfc2f5d..ea4598aedfa6c162aebe887e0f1be021df6d6123 100644
--- a/src/components/Selector/src/ShopSelector.vue
+++ b/src/components/Selector/src/ShopSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SimpleDbTableSelector.vue b/src/components/Selector/src/SimpleDbTableSelector.vue
index b893666f66665796940735b44841beb5fdbce7b5..5d7491b9a4bf81aaa2cf447cfebf2b70fa3464f2 100644
--- a/src/components/Selector/src/SimpleDbTableSelector.vue
+++ b/src/components/Selector/src/SimpleDbTableSelector.vue
@@ -19,7 +19,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="表名">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
diff --git a/src/components/Selector/src/StockAdjustReasonSelector.vue b/src/components/Selector/src/StockAdjustReasonSelector.vue
index 337d59b59bd19839f3cd3c0023081c269e5ea142..b5f9cadb5a1e9348cf79f77a6552d17d5c1d85e6 100644
--- a/src/components/Selector/src/StockAdjustReasonSelector.vue
+++ b/src/components/Selector/src/StockAdjustReasonSelector.vue
@@ -15,7 +15,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/StoreCenterSelector.vue b/src/components/Selector/src/StoreCenterSelector.vue
index e5efa13ed17967abe83d4f91ac7cdf4b193971aa..02a50aaa2f7ee5047ee91ee35ce0873f5cadd2f0 100644
--- a/src/components/Selector/src/StoreCenterSelector.vue
+++ b/src/components/Selector/src/StoreCenterSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SupplierSelector.vue b/src/components/Selector/src/SupplierSelector.vue
index d6522a61fea1434e3053221b6bf1a603f30e9bd1..cf37afbd5eb24bd7be140cc142ab085e435135f2 100644
--- a/src/components/Selector/src/SupplierSelector.vue
+++ b/src/components/Selector/src/SupplierSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SysDataDicCategorySelector.vue b/src/components/Selector/src/SysDataDicCategorySelector.vue
index 5dd126ce4c18a80e211b704247c1847134dc4450..529240d64226dd38189a0ec23ddef9d41164a4c9 100644
--- a/src/components/Selector/src/SysDataDicCategorySelector.vue
+++ b/src/components/Selector/src/SysDataDicCategorySelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SysDataDicSelector.vue b/src/components/Selector/src/SysDataDicSelector.vue
index f20769bb4f555e55e67055e77c2e7b61b1b17a9a..8db52b3c95f4ba7dd3fbc9bcf294aef20fc5f742 100644
--- a/src/components/Selector/src/SysDataDicSelector.vue
+++ b/src/components/Selector/src/SysDataDicSelector.vue
@@ -14,7 +14,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SysDeptSelector.vue b/src/components/Selector/src/SysDeptSelector.vue
index ffe33acf78691bbf7e1a1f2ba4e1a6dc8fc296c0..a822dd44cf5966d9e5f11b8baa10048581c9dbb1 100644
--- a/src/components/Selector/src/SysDeptSelector.vue
+++ b/src/components/Selector/src/SysDeptSelector.vue
@@ -70,7 +70,7 @@
         set() {},
       },
       _requestParams() {
-        return Object.assign({}, this.requestParams);
+        return Object.assign({ available: true }, this.requestParams);
       },
     },
     created() {
@@ -78,6 +78,7 @@
     },
     methods: {
       getList(params) {
+        console.log(params);
         return api.selector(params);
       },
       loadOptions() {
diff --git a/src/components/Selector/src/SysNotifyGroupSelector.vue b/src/components/Selector/src/SysNotifyGroupSelector.vue
index a58dd31a8b0da1180e2fb127c6b7292696cd1f77..e7ba8844174a18aa8167eb0b8e566683102ed758 100644
--- a/src/components/Selector/src/SysNotifyGroupSelector.vue
+++ b/src/components/Selector/src/SysNotifyGroupSelector.vue
@@ -19,7 +19,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
               <a-input v-model:value="searchParams.name" />
             </j-form-item>
@@ -60,7 +60,6 @@
     name: 'SysNotifyGroupSelector',
     components: { SearchOutlined },
     props: {
-      value: { type: [Object, String], required: true },
       requestParams: {
         type: Object,
         default: () => {
diff --git a/src/components/Selector/src/SysRoleCategorySelector.vue b/src/components/Selector/src/SysRoleCategorySelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..14460b6e6de2af9d977d3f20e91f0751276a354c
--- /dev/null
+++ b/src/components/Selector/src/SysRoleCategorySelector.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <dialog-table
+      ref="selector"
+      :request="getList"
+      :load="getLoad"
+      :table-column="[
+        { field: 'code', title: '编号', width: 100 },
+        { field: 'name', title: '名称', minWidth: 160, treeNode: true },
+      ]"
+      :request-params="_requestParams"
+      v-bind="$attrs"
+    >
+      <template #form>
+        <!-- 查询条件 -->
+        <j-border>
+          <j-form bordered>
+            <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
+              <a-input v-model:value="searchParams.code" />
+            </j-form-item>
+            <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
+              <a-input v-model:value="searchParams.name" />
+            </j-form-item>
+          </j-form>
+        </j-border>
+      </template>
+      <!-- 工具栏 -->
+      <template #toolbar_buttons>
+        <a-space class="operator">
+          <a-button type="primary" @click="$refs.selector.search()">
+            <template #icon>
+              <SearchOutlined />
+            </template>
+            查询</a-button
+          >
+        </a-space>
+      </template>
+    </dialog-table>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/system/role-category';
+
+  export default defineComponent({
+    name: 'SysRoleCategorySelector',
+    components: { SearchOutlined },
+    props: {
+      requestParams: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {
+        searchParams: {
+          code: '',
+          name: '',
+        },
+      };
+    },
+    computed: {
+      _requestParams() {
+        return { ...this.searchParams, ...this.requestParams };
+      },
+    },
+    methods: {
+      getList(params) {
+        return api.selector({
+          ...params,
+          available: true,
+          ...this.searchParams,
+          ...this.requestParams,
+        });
+      },
+      getLoad(ids) {
+        return api.loadRoleCategory(ids);
+      },
+    },
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/src/components/Selector/src/SysRoleSelector.vue b/src/components/Selector/src/SysRoleSelector.vue
index 6135671224c0ff2332a229aacd31b1f5f5c67029..d7a1981e0adead02a9ee9c22d91577401db2b55f 100644
--- a/src/components/Selector/src/SysRoleSelector.vue
+++ b/src/components/Selector/src/SysRoleSelector.vue
@@ -10,7 +10,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/SysTenantSelector.vue b/src/components/Selector/src/SysTenantSelector.vue
index d38f9b424fc56be4f9bc6baba8e8c54aff37f31c..2226abd04039343d4d5bdffa7f88f405037f50ec 100644
--- a/src/components/Selector/src/SysTenantSelector.vue
+++ b/src/components/Selector/src/SysTenantSelector.vue
@@ -15,7 +15,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.tenantId)" label="租户ID">
               <a-input v-mode:valuel="searchParams.tenantId" />
             </j-form-item>
diff --git a/src/components/Selector/src/TakeStockPlanSelector.vue b/src/components/Selector/src/TakeStockPlanSelector.vue
index 6770e7db74d45cf90947182b4cd25bcb88be8c82..ab59ce4af450715d457ba6d879b8f7ee4c0b3cee 100644
--- a/src/components/Selector/src/TakeStockPlanSelector.vue
+++ b/src/components/Selector/src/TakeStockPlanSelector.vue
@@ -41,7 +41,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="单据号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/Selector/src/UserGroupSelector.vue b/src/components/Selector/src/UserGroupSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f4eb620eaab24bb6472bb4b320251141829d1948
--- /dev/null
+++ b/src/components/Selector/src/UserGroupSelector.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <dialog-table
+      ref="selector"
+      :request="getList"
+      :load="getLoad"
+      :request-params="_requestParams"
+      v-bind="$attrs"
+    >
+      <template #form>
+        <!-- 查询条件 -->
+        <j-border>
+          <j-form bordered>
+            <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
+              <a-input v-model:value="searchParams.code" />
+            </j-form-item>
+            <j-form-item v-if="$utils.isEmpty(requestParams.name)" label="名称">
+              <a-input v-model:value="searchParams.name" />
+            </j-form-item>
+            <j-form-item v-if="$utils.isEmpty(requestParams.available)" label="状态">
+              <a-select v-model:value="searchParams.available" placeholder="全部" allow-clear>
+                <a-select-option
+                  v-for="item in $enums.AVAILABLE.values()"
+                  :key="item.code"
+                  :value="item.code"
+                  >{{ item.desc }}</a-select-option
+                >
+              </a-select>
+            </j-form-item>
+          </j-form>
+        </j-border>
+      </template>
+      <!-- 工具栏 -->
+      <template #toolbar_buttons>
+        <a-space class="operator">
+          <a-button type="primary" @click="$refs.selector.search()">
+            <template #icon>
+              <SearchOutlined />
+            </template>
+            查询</a-button
+          >
+        </a-space>
+      </template>
+    </dialog-table>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/system/user-group';
+
+  export default defineComponent({
+    name: 'UserGroupSelector',
+    components: { SearchOutlined },
+    props: {
+      requestParams: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {
+        searchParams: {
+          code: '',
+          name: '',
+          available: this.$enums.AVAILABLE.ENABLE.code,
+        },
+      };
+    },
+    computed: {
+      _requestParams() {
+        return { available: true, ...this.searchParams, ...this.requestParams };
+      },
+    },
+    methods: {
+      getList(params) {
+        return api.selector({
+          ...params,
+          available: true,
+          ...this.searchParams,
+          ...this.requestParams,
+        });
+      },
+      getLoad(ids) {
+        return api.loadUserGroup(ids);
+      },
+    },
+  });
+</script>
+
+<style lang="less"></style>
diff --git a/src/components/Selector/src/UserSelector.vue b/src/components/Selector/src/UserSelector.vue
index 187bdc859b61ecdde7be3e4c9fde756f07b12383..89e7584a9269b3f981f1d53fb0e757bd3f9dc6ce 100644
--- a/src/components/Selector/src/UserSelector.vue
+++ b/src/components/Selector/src/UserSelector.vue
@@ -20,7 +20,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="编号">
               <a-input v-model:value="searchParams.code" />
             </j-form-item>
diff --git a/src/components/VxeTable/src/css/variable.scss b/src/components/VxeTable/src/css/variable.scss
index e1df40a715644a1abac1e8a4adb484d408013274..bfa75520217343f894cde52767b35169b1683c98 100644
--- a/src/components/VxeTable/src/css/variable.scss
+++ b/src/components/VxeTable/src/css/variable.scss
@@ -1,6 +1,7 @@
-[data-vxe-ui-theme=light]{
+[data-vxe-ui-theme='light'] {
   /*font*/
-  --vxe-ui-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --vxe-ui-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 
   /*font size*/
   --vxe-ui-font-size-large: 16px;
@@ -45,12 +46,16 @@
   --vxe-ui-input-number-disabled-color: #e4e7ed;
   --vxe-ui-input-date-festival-color: #999999;
   --vxe-ui-input-date-festival-important-color: var(--vxe-ui-font-primary-color);
-  --vxe-ui-input-date-notice-background-color: #FF0000;
+  --vxe-ui-input-date-notice-background-color: #ff0000;
   --vxe-ui-input-date-picker-hover-background-color: #f2f6fc;
   --vxe-ui-input-date-picker-selected-color: #fff;
   --vxe-ui-input-date-time-confirm-button-color: #fff;
-  --vxe-ui-input-date-picker-festival-selected-color: var(--vxe-ui-input-date-picker-selected-color);
-  --vxe-ui-input-date-picker-notice-selected-background-color: var(--vxe-ui-input-date-picker-selected-color);
+  --vxe-ui-input-date-picker-festival-selected-color: var(
+    --vxe-ui-input-date-picker-selected-color
+  );
+  --vxe-ui-input-date-picker-notice-selected-background-color: var(
+    --vxe-ui-input-date-picker-selected-color
+  );
   --vxe-ui-input-date-extra-color: #67c23a;
   --vxe-ui-input-date-extra-important-color: #fd2222;
   --vxe-ui-input-date-title-height-default: 30px;
@@ -132,7 +137,7 @@
   --vxe-ui-select-option-height-medium: 28px;
   --vxe-ui-select-option-height-small: 26px;
   --vxe-ui-select-option-height-mini: 24px;
-  --vxe-ui-select-empty-color: #C0C4CC;
+  --vxe-ui-select-empty-color: #c0c4cc;
   --vxe-ui-select-title-color: #909399;
 
   /*pulldown*/
@@ -145,7 +150,7 @@
   --vxe-ui-switch-font-color: #fff;
   --vxe-ui-switch-icon-background-color: #fff;
   --vxe-ui-switch-open-background-color: var(--vxe-ui-font-primary-color);
-  --vxe-ui-switch-disabled-background-color: rgba(0,0,0,0.15) ;
+  --vxe-ui-switch-disabled-background-color: rgba(0, 0, 0, 0.15);
 
   /*upload*/
   --vxe-ui-upload-file-button-border-style: dashed;
@@ -160,7 +165,7 @@
 
   /*tree*/
   --vxe-ui-tree-node-height: 2em;
-  --vxe-ui-tree-node-line-color:#909399;
+  --vxe-ui-tree-node-line-color: #909399;
   --vxe-ui-tree-node-line-style: dotted;
   --vxe-ui-tree-node-line-width: 1px;
 
@@ -189,7 +194,7 @@
   --vxe-ui-font-tinge-color: #d4d5d7;
   --vxe-ui-font-lighten-color: #797b80;
   --vxe-ui-font-darken-color: #47494c;
-  --vxe-ui-font-disabled-color: #BFBFBF;
+  --vxe-ui-font-disabled-color: #bfbfbf;
 
   /*font status color*/
   --vxe-ui-font-primary-color: #0960bd;
@@ -230,7 +235,7 @@
   --vxe-ui-status-error-disabled-color: #f5a8a8;
 
   /*base*/
-  --vxe-ui-base-popup-border-color: #DADCE0;
+  --vxe-ui-base-popup-border-color: #dadce0;
   --vxe-ui-base-popup-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
   --vxe-ui-base-drag-background-color: #dde9fd;
   --vxe-ui-base-active-background-color: #e6f4ff;
@@ -241,11 +246,11 @@
 
   /*input*/
   --vxe-ui-input-border-color: #dcdfe6;
-  --vxe-ui-input-placeholder-color: #C0C4CC;
+  --vxe-ui-input-placeholder-color: #c0c4cc;
   --vxe-ui-input-disabled-background-color: #f3f3f3;
 
   /*modal*/
-  --vxe-ui-modal-header-background-color: #F8F8F8;
+  --vxe-ui-modal-header-background-color: #f8f8f8;
 
   /*tabs*/
   --vxe-ui-tabs-card-header-background-color: #f5f7fa;
@@ -272,10 +277,10 @@
   --vxe-ui-list-design-table-header-background-color: #f8f8f9;
 
   /*switch*/
-  --vxe-ui-switch-close-background-color: rgba(0,0,0,0.35);
+  --vxe-ui-switch-close-background-color: rgba(0, 0, 0, 0.35);
 
   /*upload*/
-  --vxe-ui-upload-drag-over-background-color:rgba(255,255,200,0.8);
+  --vxe-ui-upload-drag-over-background-color: rgba(255, 255, 200, 0.8);
 
   /*tree*/
   --vxe-ui-tree-node-hover-background-color: #f5f7fa;
@@ -292,9 +297,8 @@
   --vxe-ui-table-column-padding-small: 4px 0;
   --vxe-ui-table-column-padding-mini: 3px 0;
 
-  --vxe-ui-table-row-height-default:34px;
-  --vxe-ui-table-row-height-medium:30px;
-  --vxe-ui-table-row-height-small:26px;
-  --vxe-ui-table-row-height-mini:22px;
+  --vxe-ui-table-row-height-default: 34px;
+  --vxe-ui-table-row-height-medium: 30px;
+  --vxe-ui-table-row-height-small: 26px;
+  --vxe-ui-table-row-height-mini: 22px;
 }
-
diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index 3333c2a53eec8d30916692b5ad5456c7487c7ff9..3123b51a77ce40cc3261ffdd3f614d13d632b367 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -30,12 +30,16 @@ import CustomPage from '@/components/CustomPage';
 import OrderTimeLine from '@/components/OrderTimeLine';
 import DataDicPicker from '@/components/DataDicPicker';
 import BatchHandler from '@/components/BatchHandler';
+import PrintDesigner, { lodop } from '@/components/PrintDesigner';
+import printDesignerInstall from '@/components/PrintDesigner/install.js';
+import bpmApproveInstall from '@/components/BpmApprove';
 
 export async function registerGlobComp(app: App) {
   app
     .use(Antd)
     .use(VxeUI)
     .use(VXETable)
+    .use(printDesignerInstall)
     .component('RelativeTime', RelativeTime)
     .component('JForm', JForm)
     .component('JFormItem', JFormItem)
@@ -53,7 +57,9 @@ export async function registerGlobComp(app: App) {
     .component('CustomPage', CustomPage)
     .component('OrderTimeLine', OrderTimeLine)
     .component('DataDicPicker', DataDicPicker)
-    .component('BatchHandler', BatchHandler);
+    .component('BatchHandler', BatchHandler)
+    .component('PrintDesigner', PrintDesigner)
+    .use(bpmApproveInstall);
 
   VxeUI.use(VxeUIPluginRenderAntd);
   VXETable.setup(componentSetting.vxeTable);
@@ -75,6 +81,7 @@ export async function registerGlobComp(app: App) {
   app.config.globalProperties.$defHttp = defHttp;
   app.config.globalProperties.$vh =
     (document.documentElement.clientHeight || document.body.clientHeight) / 100;
+  app.config.globalProperties.$lodop = lodop;
 
   await enumsInstall(app);
   await tagInstall(app);
diff --git a/src/design/color.less b/src/design/color.less
index e3ba75d6ff48b7e238f82eb44f504fe26cb96ea1..e4e34813509016e5d2a428d35fd67e930222769c 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -138,4 +138,4 @@ html {
 @button-cancel-hover-border-color: @primary-color;
 
 // Custom
-@danger-color: #FF4D4F;
+@danger-color: #ff4d4f;
diff --git a/src/design/dark.less b/src/design/dark.less
index 0f47063ef1e17c80eb494156ac2eb9eb7ab030a4..5c8c2e5f66cfbc6bcd0388a779ad23a024f865c2 100644
--- a/src/design/dark.less
+++ b/src/design/dark.less
@@ -16,15 +16,15 @@
 }
 
 [data-theme='dark'] .modal-icon-warning {
-  color: #FAAD14 !important;
+  color: #faad14 !important;
 }
 
 [data-theme='dark'] .modal-icon-success {
-  color: #52C41A !important;
+  color: #52c41a !important;
 }
 
 [data-theme='dark'] .modal-icon-error {
-  color: #FF4D4F !important;
+  color: #ff4d4f !important;
 }
 
 [data-theme='dark'] .modal-icon-info {
@@ -417,7 +417,7 @@
 }
 
 [data-theme='dark'] .vben-lock-page-entry__err-msg {
-  color: #FF4D4F;
+  color: #ff4d4f;
 }
 
 [data-theme='dark'] ul li {
@@ -677,7 +677,7 @@
 }
 
 [data-theme='dark'] .darg-verify-bar {
-  background-color: #52C41A;
+  background-color: #52c41a;
 }
 
 [data-theme='dark'] .darg-verify-content.success {
@@ -709,7 +709,7 @@
 }
 
 [data-theme='dark'] .vben-basic-drawer .ant-drawer-close:hover {
-  color: #FF4D4F;
+  color: #ff4d4f;
 }
 
 [data-theme='dark'] .vben-basic-drawer .ant-drawer-body {
@@ -739,11 +739,11 @@
 }
 
 [data-theme='dark'] .vben-strength-meter-bar--fill[data-score='1'] {
-  background-color: #FF4D4F;
+  background-color: #ff4d4f;
 }
 
 [data-theme='dark'] .vben-strength-meter-bar--fill[data-score='2'] {
-  background-color: #FAAD14;
+  background-color: #faad14;
 }
 
 [data-theme='dark'] .vben-strength-meter-bar--fill[data-score='3'] {
@@ -751,7 +751,7 @@
 }
 
 [data-theme='dark'] .vben-strength-meter-bar--fill[data-score='4'] {
-  background-color: #52C41A;
+  background-color: #52c41a;
 }
 
 [data-theme='dark'] .vben-image-preview .ant-image-preview-operations {
@@ -967,7 +967,7 @@
 }
 
 [data-theme='dark'] .vben-basic-modal-close span:last-child:hover {
-  color: #FF4D4F;
+  color: #ff4d4f;
 }
 
 [data-theme='dark'] html[data-theme='dark'] .lf-dnd {
@@ -1096,15 +1096,15 @@
 }
 
 [data-theme='dark'] .vben-simple-menu-tag--error {
-  background-color: #FF4D4F;
+  background-color: #ff4d4f;
 }
 
 [data-theme='dark'] .vben-simple-menu-tag--success {
-  background-color: #52C41A;
+  background-color: #52c41a;
 }
 
 [data-theme='dark'] .vben-simple-menu-tag--warn {
-  background-color: #FAAD14;
+  background-color: #faad14;
 }
 
 [data-theme='dark'] .vben-editable-cell__icon:hover svg {
diff --git a/src/design/style.less b/src/design/style.less
index 3650073957f70ff7951d863fd4a64fe30183c8b7..d62be9ca0b89e112891ae5e0a1f8e6d54c5c2b8b 100644
--- a/src/design/style.less
+++ b/src/design/style.less
@@ -17,7 +17,7 @@
     flex-wrap: nowrap;
     flex-flow: row nowrap;
     justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
 
     line-height: 40px;
     font-size: 12px;
@@ -29,9 +29,9 @@
       padding: 0 3px 0 3px;
 
       .j-form-item-required:before {
-        content:'*';
+        content: '*';
         color: @danger-color;
-        margin-right:4px
+        margin-right: 4px;
       }
     }
 
@@ -42,8 +42,25 @@
       background-color: rgba(0, 0, 0, 0.02);
     }
 
+    .j-form-item-content:after {
+      content: '';
+      display: inline-block;
+      height: 0;
+      overflow: hidden;
+    }
     .j-form-item-content {
       padding: 0 3px 0 3px;
+      width: 100%;
+    }
+
+    .j-form-item-label-wrapper {
+      display: inline-block;
+      width: 100%;
+    }
+
+    .j-form-item-content-wrapper {
+      display: inline-block;
+      width: 100%;
     }
 
     .j-form-item-content-border {
@@ -51,7 +68,8 @@
     }
   }
 
-  .ant-select, .ant-cascader-picker {
+  .ant-select,
+  .ant-cascader-picker {
     width: 100%;
   }
 }
@@ -93,13 +111,18 @@
   max-height: 128px;
 }
 
-.simple-app-container {
+.app-card-container {
   padding: 16px;
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   margin: 16px;
   border-radius: 4px;
 }
 
+.app-simple-container {
+  padding: 16px;
+  border-radius: 4px;
+}
+
 .number-input {
   text-align: right;
   .ant-input {
@@ -109,7 +132,7 @@
 
 a {
   background-color: transparent;
-  color: #1677FF;
+  color: #1677ff;
   cursor: pointer;
 }
 
diff --git a/src/enums/biz/flowCooperateType.ts b/src/enums/biz/flowCooperateType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ed598afec85f98e9bd200e1a44341267bbfa87c3
--- /dev/null
+++ b/src/enums/biz/flowCooperateType.ts
@@ -0,0 +1,8 @@
+import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
+
+const FLOW_COOPERATE_TYPE: BaseEnum<number, string> = new BaseEnum<number, string>();
+FLOW_COOPERATE_TYPE.set('NORMAL', new BaseEnumItem<number, string>(0, '或签'));
+FLOW_COOPERATE_TYPE.set('ALL', new BaseEnumItem<number, string>(1, '会签'));
+FLOW_COOPERATE_TYPE.set('VOTE', new BaseEnumItem<number, string>(2, '票签'));
+
+export { FLOW_COOPERATE_TYPE };
diff --git a/src/enums/biz/flowDefinitionActivityStatus.ts b/src/enums/biz/flowDefinitionActivityStatus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eefd3014346a9c012a757deb14a58a243efbddc3
--- /dev/null
+++ b/src/enums/biz/flowDefinitionActivityStatus.ts
@@ -0,0 +1,7 @@
+import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
+
+const FLOW_DEFINITION_ACTIVITY_STATUS: BaseEnum<number, string> = new BaseEnum<number, string>();
+FLOW_DEFINITION_ACTIVITY_STATUS.set('ACTIVATE', new BaseEnumItem<number, string>(1, '已激活'));
+FLOW_DEFINITION_ACTIVITY_STATUS.set('DEACTIVATE', new BaseEnumItem<number, string>(0, '已挂起'));
+
+export { FLOW_DEFINITION_ACTIVITY_STATUS };
diff --git a/src/enums/biz/flowDefinitionExtBizType.ts b/src/enums/biz/flowDefinitionExtBizType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7290ad3c0a37fb6adf856c7c3890e0a0d08afcc
--- /dev/null
+++ b/src/enums/biz/flowDefinitionExtBizType.ts
@@ -0,0 +1,9 @@
+import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
+
+const FLOW_DEFINITION_EXT_BIZ_TYPE: BaseEnum<string, string> = new BaseEnum<string, string>();
+FLOW_DEFINITION_EXT_BIZ_TYPE.set(
+  'SYSTEM',
+  new BaseEnumItem<string, string>('system', '系统内部功能'),
+);
+
+export { FLOW_DEFINITION_EXT_BIZ_TYPE };
diff --git a/src/enums/biz/flowDefinitionIsPublish.ts b/src/enums/biz/flowDefinitionIsPublish.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41940d9cc94afea94514d568032e31680033dbb1
--- /dev/null
+++ b/src/enums/biz/flowDefinitionIsPublish.ts
@@ -0,0 +1,8 @@
+import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
+
+const FLOW_DEFINITION_IS_PUBLISH: BaseEnum<number, string> = new BaseEnum<number, string>();
+FLOW_DEFINITION_IS_PUBLISH.set('Y', new BaseEnumItem<number, string>(1, '已发布'));
+FLOW_DEFINITION_IS_PUBLISH.set('N', new BaseEnumItem<number, string>(0, '未发布'));
+FLOW_DEFINITION_IS_PUBLISH.set('UNABLE', new BaseEnumItem<number, string>(9, '已失效'));
+
+export { FLOW_DEFINITION_IS_PUBLISH };
diff --git a/src/enums/biz/flowInstanceStatus.ts b/src/enums/biz/flowInstanceStatus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7240735fe834c12f1d18cc6825b8dff27de6ad37
--- /dev/null
+++ b/src/enums/biz/flowInstanceStatus.ts
@@ -0,0 +1,15 @@
+import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
+
+const FLOW_INSTANCE_STATUS: BaseEnum<string, string> = new BaseEnum<string, string>();
+FLOW_INSTANCE_STATUS.set('CREATE', new BaseEnumItem<string, string>('0', '待提交'));
+FLOW_INSTANCE_STATUS.set('APPROVING', new BaseEnumItem<string, string>('1', '审核中'));
+FLOW_INSTANCE_STATUS.set('APPROVE_PASS', new BaseEnumItem<string, string>('2', '审核通过'));
+FLOW_INSTANCE_STATUS.set('TERMINATION', new BaseEnumItem<string, string>('4', '已终止'));
+FLOW_INSTANCE_STATUS.set('CANCEL', new BaseEnumItem<string, string>('5', '已作废'));
+FLOW_INSTANCE_STATUS.set('UNDO', new BaseEnumItem<string, string>('6', '已撤回'));
+FLOW_INSTANCE_STATUS.set('FINISH', new BaseEnumItem<string, string>('8', '已完成'));
+FLOW_INSTANCE_STATUS.set('REFUSE', new BaseEnumItem<string, string>('9', '已退回'));
+FLOW_INSTANCE_STATUS.set('INVALID', new BaseEnumItem<string, string>('10', '已失效'));
+FLOW_INSTANCE_STATUS.set('REVOKE', new BaseEnumItem<string, string>('11', '已驳回'));
+
+export { FLOW_INSTANCE_STATUS };
diff --git a/src/enums/biz/generateCodeType.ts b/src/enums/biz/generateCodeType.ts
index 4dd9597372e64a1fac9371aec72109708ff72140..50d4861c86de188d4e33e29a20a97c1dcbbdd8f6 100644
--- a/src/enums/biz/generateCodeType.ts
+++ b/src/enums/biz/generateCodeType.ts
@@ -1,55 +1,57 @@
 import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
 
 const GENERATE_CODE_TYPE: BaseEnum<number, string> = new BaseEnum<number, string>();
-GENERATE_CODE_TYPE.set('USER', new BaseEnumItem<number, sring>(1, '用户编号'));
-GENERATE_CODE_TYPE.set('DEPT', new BaseEnumItem<number, sring>(2, '部门编号'));
-GENERATE_CODE_TYPE.set('ROLE', new BaseEnumItem<number, sring>(3, '角色编号'));
-GENERATE_CODE_TYPE.set('SC', new BaseEnumItem<number, sring>(4, '仓库编号'));
-GENERATE_CODE_TYPE.set('CUSTOMER', new BaseEnumItem<number, sring>(5, '客户编号'));
-GENERATE_CODE_TYPE.set('SUPPLIER', new BaseEnumItem<number, sring>(6, '供应商编号'));
-GENERATE_CODE_TYPE.set('MEMBER', new BaseEnumItem<number, sring>(7, '会员编号'));
-GENERATE_CODE_TYPE.set('SHOP', new BaseEnumItem<number, sring>(8, '门店编号'));
-GENERATE_CODE_TYPE.set('BRAND', new BaseEnumItem<number, sring>(9, '品牌编号'));
-GENERATE_CODE_TYPE.set('PRODUCT', new BaseEnumItem<number, sring>(10, '商品编号'));
-GENERATE_CODE_TYPE.set('PURCHASE_ORDER', new BaseEnumItem<number, sring>(200, '采购订单号'));
-GENERATE_CODE_TYPE.set('RECEIVE_SHEET', new BaseEnumItem<number, sring>(201, '采购收货单号'));
-GENERATE_CODE_TYPE.set('PURCHASE_RETURN', new BaseEnumItem<number, sring>(202, '采购退单号'));
-GENERATE_CODE_TYPE.set('SALE_ORDER', new BaseEnumItem<number, sring>(203, '销售订单号'));
-GENERATE_CODE_TYPE.set('SALE_OUT_SHEET', new BaseEnumItem<number, sring>(204, '销售出库单号'));
-GENERATE_CODE_TYPE.set('SALE_RETURN', new BaseEnumItem<number, sring>(205, '销售退货单号'));
-GENERATE_CODE_TYPE.set('RETAIL_OUT_SHEET', new BaseEnumItem<number, sring>(206, '零售出库单号'));
-GENERATE_CODE_TYPE.set('RETAIL_RETURN', new BaseEnumItem<number, sring>(207, '零售退货单号'));
+GENERATE_CODE_TYPE.set('USER', new BaseEnumItem<number, string>(1, '用户编号'));
+GENERATE_CODE_TYPE.set('DEPT', new BaseEnumItem<number, string>(2, '部门编号'));
+GENERATE_CODE_TYPE.set('ROLE', new BaseEnumItem<number, string>(3, '角色编号'));
+GENERATE_CODE_TYPE.set('SC', new BaseEnumItem<number, string>(4, '仓库编号'));
+GENERATE_CODE_TYPE.set('CUSTOMER', new BaseEnumItem<number, string>(5, '客户编号'));
+GENERATE_CODE_TYPE.set('SUPPLIER', new BaseEnumItem<number, string>(6, '供应商编号'));
+GENERATE_CODE_TYPE.set('MEMBER', new BaseEnumItem<number, string>(7, '会员编号'));
+GENERATE_CODE_TYPE.set('SHOP', new BaseEnumItem<number, string>(8, '门店编号'));
+GENERATE_CODE_TYPE.set('BRAND', new BaseEnumItem<number, string>(9, '品牌编号'));
+GENERATE_CODE_TYPE.set('PRODUCT', new BaseEnumItem<number, string>(10, '商品编号'));
+GENERATE_CODE_TYPE.set('USER_GROUP', new BaseEnumItem<number, string>(11, '用户编号'));
+GENERATE_CODE_TYPE.set('COMMON', new BaseEnumItem<number, string>(99, '通用编号'));
+GENERATE_CODE_TYPE.set('PURCHASE_ORDER', new BaseEnumItem<number, string>(200, '采购订单号'));
+GENERATE_CODE_TYPE.set('RECEIVE_SHEET', new BaseEnumItem<number, string>(201, '采购收货单号'));
+GENERATE_CODE_TYPE.set('PURCHASE_RETURN', new BaseEnumItem<number, string>(202, '采购退单号'));
+GENERATE_CODE_TYPE.set('SALE_ORDER', new BaseEnumItem<number, string>(203, '销售订单号'));
+GENERATE_CODE_TYPE.set('SALE_OUT_SHEET', new BaseEnumItem<number, string>(204, '销售出库单号'));
+GENERATE_CODE_TYPE.set('SALE_RETURN', new BaseEnumItem<number, string>(205, '销售退货单号'));
+GENERATE_CODE_TYPE.set('RETAIL_OUT_SHEET', new BaseEnumItem<number, string>(206, '零售出库单号'));
+GENERATE_CODE_TYPE.set('RETAIL_RETURN', new BaseEnumItem<number, string>(207, '零售退货单号'));
 GENERATE_CODE_TYPE.set(
   'PRE_TAKE_STOCK_SHEET',
-  new BaseEnumItem<number, sring>(208, '预先盘点单号'),
+  new BaseEnumItem<number, string>(208, '预先盘点单号'),
 );
-GENERATE_CODE_TYPE.set('TAKE_STOCK_PLAN', new BaseEnumItem<number, sring>(209, '盘点任务号'));
-GENERATE_CODE_TYPE.set('TAKE_STOCK_SHEET', new BaseEnumItem<number, sring>(210, '盘点单号'));
-GENERATE_CODE_TYPE.set('STOCK_ADJUST_SHEET', new BaseEnumItem<number, sring>(212, '库存调整单号'));
-GENERATE_CODE_TYPE.set('SC_TRANSFER_ORDER', new BaseEnumItem<number, sring>(213, '仓库调拨单号'));
-GENERATE_CODE_TYPE.set('LOGISTICS_SHEET', new BaseEnumItem<number, sring>(214, '物流单号'));
+GENERATE_CODE_TYPE.set('TAKE_STOCK_PLAN', new BaseEnumItem<number, string>(209, '盘点任务号'));
+GENERATE_CODE_TYPE.set('TAKE_STOCK_SHEET', new BaseEnumItem<number, string>(210, '盘点单号'));
+GENERATE_CODE_TYPE.set('STOCK_ADJUST_SHEET', new BaseEnumItem<number, string>(212, '库存调整单号'));
+GENERATE_CODE_TYPE.set('SC_TRANSFER_ORDER', new BaseEnumItem<number, string>(213, '仓库调拨单号'));
+GENERATE_CODE_TYPE.set('LOGISTICS_SHEET', new BaseEnumItem<number, string>(214, '物流单号'));
 GENERATE_CODE_TYPE.set(
   'SETTLE_CHECK_SHEET',
-  new BaseEnumItem<number, sring>(300, '供应商对账单号'),
+  new BaseEnumItem<number, string>(300, '供应商对账单号'),
 );
-GENERATE_CODE_TYPE.set('SETTLE_FEE_SHEET', new BaseEnumItem<number, sring>(301, '供应商费用单号'));
-GENERATE_CODE_TYPE.set('SETTLE_PRE_SHEET', new BaseEnumItem<number, sring>(302, '供应商付款单号'));
-GENERATE_CODE_TYPE.set('SETTLE_SHEET', new BaseEnumItem<number, sring>(303, '供应商结算单号'));
+GENERATE_CODE_TYPE.set('SETTLE_FEE_SHEET', new BaseEnumItem<number, string>(301, '供应商费用单号'));
+GENERATE_CODE_TYPE.set('SETTLE_PRE_SHEET', new BaseEnumItem<number, string>(302, '供应商付款单号'));
+GENERATE_CODE_TYPE.set('SETTLE_SHEET', new BaseEnumItem<number, string>(303, '供应商结算单号'));
 GENERATE_CODE_TYPE.set(
   'CUSTOMER_SETTLE_CHECK_SHEET',
-  new BaseEnumItem<number, sring>(304, '客户对账单号'),
+  new BaseEnumItem<number, string>(304, '客户对账单号'),
 );
 GENERATE_CODE_TYPE.set(
   'CUSTOMER_SETTLE_FEE_SHEET',
-  new BaseEnumItem<number, sring>(305, '客户费用单号'),
+  new BaseEnumItem<number, string>(305, '客户费用单号'),
 );
 GENERATE_CODE_TYPE.set(
   'CUSTOMER_SETTLE_PRE_SHEET',
-  new BaseEnumItem<number, sring>(306, '客户预付款单号'),
+  new BaseEnumItem<number, string>(306, '客户预付款单号'),
 );
 GENERATE_CODE_TYPE.set(
   'CUSTOMER_SETTLE_SHEET',
-  new BaseEnumItem<number, sring>(307, '客户结算单号'),
+  new BaseEnumItem<number, string>(307, '客户结算单号'),
 );
 
 export { GENERATE_CODE_TYPE };
diff --git a/src/enums/biz/printType.ts b/src/enums/biz/printType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f5738108195c3cb24ae2806fd07ffcdd37786e6
--- /dev/null
+++ b/src/enums/biz/printType.ts
@@ -0,0 +1,13 @@
+import { BaseEnum, BaseEnumItem } from '@/enums/baseEnum';
+
+const PRINT_TYPE: BaseEnum<number, string> = new BaseEnum<number, string>();
+PRINT_TYPE.set('PURCHASE_ORDER', new BaseEnumItem<number, string>(1, '采购订单'));
+PRINT_TYPE.set('RECEIVE_SHEET', new BaseEnumItem<number, string>(2, '采购收货单'));
+PRINT_TYPE.set('PURCHASE_RETURN', new BaseEnumItem<number, string>(3, '采购退货单'));
+PRINT_TYPE.set('RETAIL_OUT', new BaseEnumItem<number, string>(4, '零售出库单'));
+PRINT_TYPE.set('RETAIL_RETURN', new BaseEnumItem<number, string>(5, '零售退货单'));
+PRINT_TYPE.set('SALE_ORDER', new BaseEnumItem<number, string>(6, '销售订单'));
+PRINT_TYPE.set('SALE_OUT', new BaseEnumItem<number, string>(7, '销售出库单'));
+PRINT_TYPE.set('SALE_RETURN', new BaseEnumItem<number, string>(8, '销售退货单'));
+
+export { PRINT_TYPE };
diff --git a/src/enums/biz/sysNotifyReceiverType.ts b/src/enums/biz/sysNotifyReceiverType.ts
index 13833461d2b86b6ea7bed77ba22513533d8ad440..db5f5837cf3c170aa0bd43bbcb7ae6af594e7572 100644
--- a/src/enums/biz/sysNotifyReceiverType.ts
+++ b/src/enums/biz/sysNotifyReceiverType.ts
@@ -4,5 +4,6 @@ const SYS_NOTIFY_GROUP_RECEIVER_TYPE: BaseEnum<number, string> = new BaseEnum<nu
 SYS_NOTIFY_GROUP_RECEIVER_TYPE.set('DEPT', new BaseEnumItem<number, string>(0, '部门及其子部门'));
 SYS_NOTIFY_GROUP_RECEIVER_TYPE.set('USER', new BaseEnumItem<number, string>(1, '用户'));
 SYS_NOTIFY_GROUP_RECEIVER_TYPE.set('ROLE', new BaseEnumItem<number, string>(2, '角色'));
+SYS_NOTIFY_GROUP_RECEIVER_TYPE.set('USER_GROUP', new BaseEnumItem<number, string>(3, '用户组'));
 
 export { SYS_NOTIFY_GROUP_RECEIVER_TYPE };
diff --git a/src/events/constants/pushEvent.js b/src/events/constants/pushEvent.js
index 4069381d4cb1d9c32573dfe34992538b42121a2d..303747a9ba54123f6f72d320a97beb7f85a62c01 100644
--- a/src/events/constants/pushEvent.js
+++ b/src/events/constants/pushEvent.js
@@ -1,5 +1,4 @@
 /**
  * 前端主动推送给后端的事件类型
  */
-export default {
-}
+export default {};
diff --git a/src/layouts/default/header/components/export-center/FailList.vue b/src/layouts/default/header/components/export-center/FailList.vue
index 564b44c7aa7471ddd4d9ca598fb1ea5f1faba352..6bc8b28b460be52410d8f149188f08891171820b 100644
--- a/src/layouts/default/header/components/export-center/FailList.vue
+++ b/src/layouts/default/header/components/export-center/FailList.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="任务名称" :span="12">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
diff --git a/src/layouts/default/header/components/export-center/SuccessList.vue b/src/layouts/default/header/components/export-center/SuccessList.vue
index c342a37d84ac802980960bc30e8e6cf2ceb21e0b..456baac84c99c905b2d1bf2a1f24a5ec27debbee 100644
--- a/src/layouts/default/header/components/export-center/SuccessList.vue
+++ b/src/layouts/default/header/components/export-center/SuccessList.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="任务名称" :span="12">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue
index bca50834f15835a65f38aa46ca1551468a38f291..d13eeabd41ce2f0e0b81cf3cac9aee5f58bf6be2 100644
--- a/src/layouts/default/header/index.vue
+++ b/src/layouts/default/header/index.vue
@@ -46,6 +46,7 @@
   </Layout.Header>
 </template>
 <script lang="ts" setup>
+  import { Layout } from 'ant-design-vue';
   import { computed, unref } from 'vue';
 
   import { AppLogo, AppSearch } from '@/components/Application';
diff --git a/src/locales/lang/en/component.json b/src/locales/lang/en/component.json
index 48e9ea949653f0ced46f7dfd7ffbf10efd7798e9..d7d63e5b08a70b54f80136a16fcaa55838c540dc 100644
--- a/src/locales/lang/en/component.json
+++ b/src/locales/lang/en/component.json
@@ -1,124 +1,124 @@
 {
   "app": {
-    "searchNotData": "No search results yet", 
-    "toSearch": "to search", 
+    "searchNotData": "No search results yet",
+    "toSearch": "to search",
     "toNavigate": "to navigate"
-  }, 
+  },
   "countdown": {
-    "normalText": "Get SMS code", 
+    "normalText": "Get SMS code",
     "sendText": "Reacquire in {0}s"
-  }, 
+  },
   "cropper": {
-    "selectImage": "Select Image", 
-    "uploadSuccess": "Uploaded success!", 
-    "imageTooBig": "Image too big", 
-    "modalTitle": "Avatar upload", 
-    "okText": "Confirm and upload", 
-    "btn_reset": "Reset", 
-    "btn_rotate_left": "Counterclockwise rotation", 
-    "btn_rotate_right": "Clockwise rotation", 
-    "btn_scale_x": "Flip horizontal", 
-    "btn_scale_y": "Flip vertical", 
-    "btn_zoom_in": "Zoom in", 
-    "btn_zoom_out": "Zoom out", 
+    "selectImage": "Select Image",
+    "uploadSuccess": "Uploaded success!",
+    "imageTooBig": "Image too big",
+    "modalTitle": "Avatar upload",
+    "okText": "Confirm and upload",
+    "btn_reset": "Reset",
+    "btn_rotate_left": "Counterclockwise rotation",
+    "btn_rotate_right": "Clockwise rotation",
+    "btn_scale_x": "Flip horizontal",
+    "btn_scale_y": "Flip vertical",
+    "btn_zoom_in": "Zoom in",
+    "btn_zoom_out": "Zoom out",
     "preview": "Preivew"
-  }, 
+  },
   "drawer": {
-    "loadingText": "Loading...", 
-    "cancelText": "Close", 
+    "loadingText": "Loading...",
+    "cancelText": "Close",
     "okText": "Confirm"
-  }, 
+  },
   "excel": {
-    "exportModalTitle": "Export data", 
-    "fileType": "File type", 
+    "exportModalTitle": "Export data",
+    "fileType": "File type",
     "fileName": "File name"
-  }, 
+  },
   "form": {
-    "putAway": "Put away", 
-    "unfold": "Unfold", 
-    "maxTip": "The number of characters should be less than {0}", 
+    "putAway": "Put away",
+    "unfold": "Unfold",
+    "maxTip": "The number of characters should be less than {0}",
     "apiSelectNotFound": "Wait for data loading to complete..."
-  }, 
+  },
   "icon": {
-    "placeholder": "Click the select icon", 
-    "search": "Search icon", 
+    "placeholder": "Click the select icon",
+    "search": "Search icon",
     "copy": "Copy icon successfully!"
-  }, 
+  },
   "menu": {
     "search": "Menu search"
-  }, 
+  },
   "modal": {
-    "cancelText": "Close", 
-    "okText": "Confirm", 
-    "close": "Close", 
-    "maximize": "Maximize", 
+    "cancelText": "Close",
+    "okText": "Confirm",
+    "close": "Close",
+    "maximize": "Maximize",
     "restore": "Restore"
-  }, 
+  },
   "table": {
-    "settingDens": "Density", 
-    "settingDensDefault": "Default", 
-    "settingDensMiddle": "Middle", 
-    "settingDensSmall": "Compact", 
-    "settingColumn": "Column settings", 
-    "settingColumnShow": "Column display", 
-    "settingIndexColumnShow": "Index Column", 
-    "settingSelectColumnShow": "Selection Column", 
-    "settingFixedLeft": "Fixed Left", 
-    "settingFixedRight": "Fixed Right", 
-    "settingFullScreen": "Full Screen", 
-    "index": "Index", 
+    "settingDens": "Density",
+    "settingDensDefault": "Default",
+    "settingDensMiddle": "Middle",
+    "settingDensSmall": "Compact",
+    "settingColumn": "Column settings",
+    "settingColumnShow": "Column display",
+    "settingIndexColumnShow": "Index Column",
+    "settingSelectColumnShow": "Selection Column",
+    "settingFixedLeft": "Fixed Left",
+    "settingFixedRight": "Fixed Right",
+    "settingFullScreen": "Full Screen",
+    "index": "Index",
     "total": "total of {total}"
-  }, 
+  },
   "time": {
-    "before": " ago", 
-    "after": " after", 
-    "just": "just now", 
-    "seconds": " seconds", 
-    "minutes": " minutes", 
-    "hours": " hours", 
+    "before": " ago",
+    "after": " after",
+    "just": "just now",
+    "seconds": " seconds",
+    "minutes": " minutes",
+    "hours": " hours",
     "days": " days"
-  }, 
+  },
   "tree": {
-    "selectAll": "Select All", 
-    "unSelectAll": "Cancel Select", 
-    "expandAll": "Expand All", 
-    "unExpandAll": "Collapse all", 
-    "checkStrictly": "Hierarchical association", 
+    "selectAll": "Select All",
+    "unSelectAll": "Cancel Select",
+    "expandAll": "Expand All",
+    "unExpandAll": "Collapse all",
+    "checkStrictly": "Hierarchical association",
     "checkUnStrictly": "Hierarchical independence"
-  }, 
+  },
   "upload": {
-    "save": "Save", 
-    "upload": "Upload", 
-    "imgUpload": "ImageUpload", 
-    "uploaded": "Uploaded", 
-    "operating": "Operating", 
-    "del": "Delete", 
-    "download": "download", 
-    "saveWarn": "Please wait for the file to upload and save!", 
-    "saveError": "There is no file successfully uploaded and cannot be saved!", 
-    "preview": "Preview", 
-    "choose": "Select the file", 
-    "accept": "Support {0} format", 
-    "acceptUpload": "Only upload files in {0} format", 
-    "maxSize": "A single file does not exceed {0}MB ", 
-    "maxSizeMultiple": "Only upload files up to {0}MB!", 
-    "maxNumber": "Only upload up to {0} files", 
-    "legend": "Legend", 
-    "fileName": "File name", 
-    "fileSize": "File size", 
-    "fileStatue": "File status", 
-    "startUpload": "Start upload", 
-    "uploadSuccess": "Upload successfully", 
-    "uploadError": "Upload failed", 
-    "uploading": "Uploading", 
-    "uploadWait": "Please wait for the file upload to finish", 
+    "save": "Save",
+    "upload": "Upload",
+    "imgUpload": "ImageUpload",
+    "uploaded": "Uploaded",
+    "operating": "Operating",
+    "del": "Delete",
+    "download": "download",
+    "saveWarn": "Please wait for the file to upload and save!",
+    "saveError": "There is no file successfully uploaded and cannot be saved!",
+    "preview": "Preview",
+    "choose": "Select the file",
+    "accept": "Support {0} format",
+    "acceptUpload": "Only upload files in {0} format",
+    "maxSize": "A single file does not exceed {0}MB ",
+    "maxSizeMultiple": "Only upload files up to {0}MB!",
+    "maxNumber": "Only upload up to {0} files",
+    "legend": "Legend",
+    "fileName": "File name",
+    "fileSize": "File size",
+    "fileStatue": "File status",
+    "startUpload": "Start upload",
+    "uploadSuccess": "Upload successfully",
+    "uploadError": "Upload failed",
+    "uploading": "Uploading",
+    "uploadWait": "Please wait for the file upload to finish",
     "reUploadFailed": "Re-upload failed files"
-  }, 
+  },
   "verify": {
-    "error": "verification failed！", 
-    "time": "The verification is successful and it takes {time} seconds！", 
-    "redoTip": "Click the picture to refresh", 
-    "dragText": "Hold down the slider and drag", 
+    "error": "verification failed！",
+    "time": "The verification is successful and it takes {time} seconds！",
+    "redoTip": "Click the picture to refresh",
+    "dragText": "Hold down the slider and drag",
     "successText": "Verified"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/lang/en/layout.json b/src/locales/lang/en/layout.json
index 5d20bf30adf005db6c3cfb8bce9bf56e5e269336..2732432a0b773c592ed87072b378f7632b5b1244 100644
--- a/src/locales/lang/en/layout.json
+++ b/src/locales/lang/en/layout.json
@@ -1,94 +1,94 @@
 {
   "footer": {
-    "onlinePreview": "Preview", 
+    "onlinePreview": "Preview",
     "onlineDocument": "Document"
-  }, 
+  },
   "header": {
-    "dropdownItemDoc": "Document", 
-    "dropdownItemLoginOut": "Log Out", 
-    "tooltipErrorLog": "Error log", 
-    "tooltipLock": "Lock screen", 
-    "tooltipNotify": "Notification", 
-    "tooltipEntryFull": "Full Screen", 
-    "tooltipExitFull": "Exit Full Screen", 
-    "lockScreenPassword": "Lock screen password", 
-    "lockScreen": "Lock screen", 
-    "lockScreenBtn": "Locking", 
+    "dropdownItemDoc": "Document",
+    "dropdownItemLoginOut": "Log Out",
+    "tooltipErrorLog": "Error log",
+    "tooltipLock": "Lock screen",
+    "tooltipNotify": "Notification",
+    "tooltipEntryFull": "Full Screen",
+    "tooltipExitFull": "Exit Full Screen",
+    "lockScreenPassword": "Lock screen password",
+    "lockScreen": "Lock screen",
+    "lockScreenBtn": "Locking",
     "home": "Home"
-  }, 
+  },
   "multipleTab": {
-    "reload": "Refresh current", 
-    "close": "Close current", 
-    "closeLeft": "Close Left", 
-    "closeRight": "Close Right", 
-    "closeOther": "Close Other", 
+    "reload": "Refresh current",
+    "close": "Close current",
+    "closeLeft": "Close Left",
+    "closeRight": "Close Right",
+    "closeOther": "Close Other",
     "closeAll": "Close All"
-  }, 
+  },
   "setting": {
-    "contentModeFull": "Full", 
-    "contentModeFixed": "Fixed width", 
-    "topMenuAlignLeft": "Left", 
-    "topMenuAlignRight": "Center", 
-    "topMenuAlignCenter": "Right", 
-    "menuTriggerNone": "Not Show", 
-    "menuTriggerBottom": "Bottom", 
-    "menuTriggerTop": "Top", 
-    "menuTypeSidebar": "Left menu mode", 
-    "menuTypeMixSidebar": "Left menu mixed mode", 
-    "menuTypeMix": "Top Menu Mix mode", 
-    "menuTypeTopMenu": "Top menu mode", 
-    "on": "On", 
-    "off": "Off", 
-    "minute": "Minute", 
-    "operatingTitle": "Successful!", 
-    "operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!", 
-    "resetSuccess": "Successfully reset!", 
-    "copyBtn": "Copy", 
-    "clearBtn": "Clear cache and to the login page", 
-    "drawerTitle": "Configuration", 
-    "darkMode": "Dark mode", 
-    "navMode": "Navigation mode", 
-    "interfaceFunction": "Interface function", 
-    "interfaceDisplay": "Interface display", 
-    "animation": "Animation", 
-    "splitMenu": "Split menu", 
-    "closeMixSidebarOnChange": "Switch page to close menu", 
-    "sysTheme": "System theme", 
-    "headerTheme": "Header theme", 
-    "sidebarTheme": "Menu theme", 
-    "menuDrag": "Drag Sidebar", 
-    "menuSearch": "Menu search", 
-    "menuAccordion": "Sidebar accordion", 
-    "menuCollapse": "Collapse menu", 
-    "collapseMenuDisplayName": "Collapse menu display name", 
-    "topMenuLayout": "Top menu layout", 
-    "menuCollapseButton": "Menu collapse button", 
-    "contentMode": "Content area width", 
-    "expandedMenuWidth": "Expanded menu width", 
-    "breadcrumb": "Breadcrumbs", 
-    "breadcrumbIcon": "Breadcrumbs Icon", 
-    "tabs": "Tabs", 
-    "tabDetail": "Tab Detail", 
-    "tabsQuickBtn": "Tabs quick button", 
-    "tabsRedoBtn": "Tabs redo button", 
-    "tabsFoldBtn": "Tabs flod button", 
-    "sidebar": "Sidebar", 
-    "header": "Header", 
-    "footer": "Footer", 
-    "fullContent": "Full content", 
-    "grayMode": "Gray mode", 
-    "colorWeak": "Color Weak Mode", 
-    "progress": "Progress", 
-    "switchLoading": "Switch Loading", 
-    "switchAnimation": "Switch animation", 
-    "animationType": "Animation type", 
-    "autoScreenLock": "Auto screen lock", 
-    "notAutoScreenLock": "Not auto lock", 
-    "fixedHeader": "Fixed header", 
-    "fixedSideBar": "Fixed Sidebar", 
-    "mixSidebarTrigger": "Mixed menu Trigger", 
-    "triggerHover": "Hover", 
-    "triggerClick": "Click", 
+    "contentModeFull": "Full",
+    "contentModeFixed": "Fixed width",
+    "topMenuAlignLeft": "Left",
+    "topMenuAlignRight": "Center",
+    "topMenuAlignCenter": "Right",
+    "menuTriggerNone": "Not Show",
+    "menuTriggerBottom": "Bottom",
+    "menuTriggerTop": "Top",
+    "menuTypeSidebar": "Left menu mode",
+    "menuTypeMixSidebar": "Left menu mixed mode",
+    "menuTypeMix": "Top Menu Mix mode",
+    "menuTypeTopMenu": "Top menu mode",
+    "on": "On",
+    "off": "Off",
+    "minute": "Minute",
+    "operatingTitle": "Successful!",
+    "operatingContent": "The copy is successful, please go to src/settings/projectSetting.ts to modify the configuration!",
+    "resetSuccess": "Successfully reset!",
+    "copyBtn": "Copy",
+    "clearBtn": "Clear cache and to the login page",
+    "drawerTitle": "Configuration",
+    "darkMode": "Dark mode",
+    "navMode": "Navigation mode",
+    "interfaceFunction": "Interface function",
+    "interfaceDisplay": "Interface display",
+    "animation": "Animation",
+    "splitMenu": "Split menu",
+    "closeMixSidebarOnChange": "Switch page to close menu",
+    "sysTheme": "System theme",
+    "headerTheme": "Header theme",
+    "sidebarTheme": "Menu theme",
+    "menuDrag": "Drag Sidebar",
+    "menuSearch": "Menu search",
+    "menuAccordion": "Sidebar accordion",
+    "menuCollapse": "Collapse menu",
+    "collapseMenuDisplayName": "Collapse menu display name",
+    "topMenuLayout": "Top menu layout",
+    "menuCollapseButton": "Menu collapse button",
+    "contentMode": "Content area width",
+    "expandedMenuWidth": "Expanded menu width",
+    "breadcrumb": "Breadcrumbs",
+    "breadcrumbIcon": "Breadcrumbs Icon",
+    "tabs": "Tabs",
+    "tabDetail": "Tab Detail",
+    "tabsQuickBtn": "Tabs quick button",
+    "tabsRedoBtn": "Tabs redo button",
+    "tabsFoldBtn": "Tabs flod button",
+    "sidebar": "Sidebar",
+    "header": "Header",
+    "footer": "Footer",
+    "fullContent": "Full content",
+    "grayMode": "Gray mode",
+    "colorWeak": "Color Weak Mode",
+    "progress": "Progress",
+    "switchLoading": "Switch Loading",
+    "switchAnimation": "Switch animation",
+    "animationType": "Animation type",
+    "autoScreenLock": "Auto screen lock",
+    "notAutoScreenLock": "Not auto lock",
+    "fixedHeader": "Fixed header",
+    "fixedSideBar": "Fixed Sidebar",
+    "mixSidebarTrigger": "Mixed menu Trigger",
+    "triggerHover": "Hover",
+    "triggerClick": "Click",
     "mixSidebarFixed": "Fixed expanded menu"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/lang/en/routes/basic.json b/src/locales/lang/en/routes/basic.json
index e6e35df7e82ce8b6307c818a2371dae1c72c41e8..59401719126b7536bcce40b607bd10d479cc0b6d 100644
--- a/src/locales/lang/en/routes/basic.json
+++ b/src/locales/lang/en/routes/basic.json
@@ -1,4 +1,4 @@
 {
   "login": "Login",
   "errorLogList": "Error Log"
-}
\ No newline at end of file
+}
diff --git a/src/locales/lang/en/routes/demo.json b/src/locales/lang/en/routes/demo.json
index 67acc28f2e226946d7a458232d1478d111614e24..6012cab2f2259837e2dc15353947ca072acabf4f 100644
--- a/src/locales/lang/en/routes/demo.json
+++ b/src/locales/lang/en/routes/demo.json
@@ -1,177 +1,177 @@
 {
   "charts": {
-    "baiduMap": "Baidu map", 
-    "aMap": "A map", 
-    "googleMap": "Google map", 
-    "charts": "Chart", 
-    "map": "Map", 
-    "line": "Line", 
+    "baiduMap": "Baidu map",
+    "aMap": "A map",
+    "googleMap": "Google map",
+    "charts": "Chart",
+    "map": "Map",
+    "line": "Line",
     "pie": "Pie"
-  }, 
+  },
   "comp": {
-    "comp": "Component", 
-    "basic": "Basic", 
-    "transition": "Animation", 
-    "countTo": "Count To", 
-    "scroll": "Scroll", 
-    "scrollBasic": "Basic", 
-    "scrollAction": "Scroll Function", 
-    "virtualScroll": "Virtual Scroll", 
-    "tree": "Tree", 
-    "treeBasic": "Basic", 
-    "editTree": "Searchable/toolbar", 
-    "actionTree": "Function operation", 
-    "modal": "Modal", 
-    "drawer": "Drawer", 
-    "desc": "Desc", 
-    "verify": "Verify", 
-    "verifyDrag": "Drag ", 
-    "verifyRotate": "Picture Restore", 
-    "qrcode": "QR code", 
-    "strength": "Password strength", 
-    "upload": "Upload", 
-    "loading": "Loading", 
-    "time": "Relative Time", 
-    "cropperImage": "Cropper Image", 
+    "comp": "Component",
+    "basic": "Basic",
+    "transition": "Animation",
+    "countTo": "Count To",
+    "scroll": "Scroll",
+    "scrollBasic": "Basic",
+    "scrollAction": "Scroll Function",
+    "virtualScroll": "Virtual Scroll",
+    "tree": "Tree",
+    "treeBasic": "Basic",
+    "editTree": "Searchable/toolbar",
+    "actionTree": "Function operation",
+    "modal": "Modal",
+    "drawer": "Drawer",
+    "desc": "Desc",
+    "verify": "Verify",
+    "verifyDrag": "Drag ",
+    "verifyRotate": "Picture Restore",
+    "qrcode": "QR code",
+    "strength": "Password strength",
+    "upload": "Upload",
+    "loading": "Loading",
+    "time": "Relative Time",
+    "cropperImage": "Cropper Image",
     "cardList": "Card List"
-  }, 
+  },
   "editor": {
-    "editor": "Editor", 
-    "jsonEditor": "Json editor", 
-    "markdown": "Markdown editor", 
-    "tinymce": "Rich text", 
-    "tinymceBasic": "Basic", 
+    "editor": "Editor",
+    "jsonEditor": "Json editor",
+    "markdown": "Markdown editor",
+    "tinymce": "Rich text",
+    "tinymceBasic": "Basic",
     "tinymceForm": "embedded form"
-  }, 
+  },
   "excel": {
-    "excel": "Excel", 
-    "customExport": "Select export format", 
-    "jsonExport": "JSON data export", 
-    "arrayExport": "Array data export", 
+    "excel": "Excel",
+    "customExport": "Select export format",
+    "jsonExport": "JSON data export",
+    "arrayExport": "Array data export",
     "importExcel": "Import"
-  }, 
+  },
   "feat": {
-    "feat": "Page Function", 
-    "icon": "Icon", 
-    "tabs": "Tabs", 
-    "tabDetail": "Tab Detail", 
-    "sessionTimeout": "Session Timeout", 
-    "print": "Print", 
-    "contextMenu": "Context Menu", 
-    "download": "Download", 
-    "clickOutSide": "ClickOutSide", 
-    "imgPreview": "Picture Preview", 
-    "copy": "Clipboard", 
-    "msg": "Message prompt", 
-    "watermark": "Watermark", 
-    "ripple": "Ripple", 
-    "fullScreen": "Full Screen", 
-    "errorLog": "Error Log", 
-    "tab": "Tab with parameters", 
-    "tab1": "Tab with parameter 1", 
-    "tab2": "Tab with parameter 2", 
-    "menu": "Menu with parameters", 
-    "menu1": "Menu with parameters 1", 
-    "menu2": "Menu with parameters 2", 
-    "ws": "Websocket test", 
-    "breadcrumb": "Breadcrumbs", 
-    "breadcrumbFlat": "Flat Mode", 
-    "breadcrumbFlatDetail": "Flat mode details", 
-    "requestDemo": "Retry request demo", 
-    "breadcrumbChildren": "Level mode", 
+    "feat": "Page Function",
+    "icon": "Icon",
+    "tabs": "Tabs",
+    "tabDetail": "Tab Detail",
+    "sessionTimeout": "Session Timeout",
+    "print": "Print",
+    "contextMenu": "Context Menu",
+    "download": "Download",
+    "clickOutSide": "ClickOutSide",
+    "imgPreview": "Picture Preview",
+    "copy": "Clipboard",
+    "msg": "Message prompt",
+    "watermark": "Watermark",
+    "ripple": "Ripple",
+    "fullScreen": "Full Screen",
+    "errorLog": "Error Log",
+    "tab": "Tab with parameters",
+    "tab1": "Tab with parameter 1",
+    "tab2": "Tab with parameter 2",
+    "menu": "Menu with parameters",
+    "menu1": "Menu with parameters 1",
+    "menu2": "Menu with parameters 2",
+    "ws": "Websocket test",
+    "breadcrumb": "Breadcrumbs",
+    "breadcrumbFlat": "Flat Mode",
+    "breadcrumbFlatDetail": "Flat mode details",
+    "requestDemo": "Retry request demo",
+    "breadcrumbChildren": "Level mode",
     "breadcrumbChildrenDetail": "Level mode detail"
-  }, 
+  },
   "flow": {
-    "name": "Graphics editor", 
+    "name": "Graphics editor",
     "flowChart": "FlowChart"
-  }, 
+  },
   "form": {
-    "form": "Form", 
-    "basic": "Basic", 
-    "useForm": "useForm", 
-    "refForm": "RefForm", 
-    "advancedForm": "Shrinkable", 
-    "ruleForm": "Form validation", 
-    "dynamicForm": "Dynamic", 
-    "customerForm": "Custom", 
-    "appendForm": "Append", 
+    "form": "Form",
+    "basic": "Basic",
+    "useForm": "useForm",
+    "refForm": "RefForm",
+    "advancedForm": "Shrinkable",
+    "ruleForm": "Form validation",
+    "dynamicForm": "Dynamic",
+    "customerForm": "Custom",
+    "appendForm": "Append",
     "tabsForm": "TabsForm"
-  }, 
+  },
   "iframe": {
-    "frame": "External", 
-    "antv": "antVue doc (embedded)", 
-    "doc": "Project doc (embedded)", 
+    "frame": "External",
+    "antv": "antVue doc (embedded)",
+    "doc": "Project doc (embedded)",
     "docExternal": "Project doc (external)"
-  }, 
+  },
   "level": {
     "level": "MultiMenu"
-  }, 
+  },
   "page": {
-    "page": "Page", 
-    "form": "Form", 
-    "formBasic": "Basic Form", 
-    "formStep": "Step Form", 
-    "formHigh": "Advanced Form", 
-    "desc": "Details", 
-    "descBasic": "Basic Details", 
-    "descHigh": "Advanced Details", 
-    "result": "Result", 
-    "resultSuccess": "Success", 
-    "resultFail": "Failed", 
-    "account": "Personal", 
-    "accountCenter": "Personal Center", 
-    "accountSetting": "Personal Settings", 
-    "exception": "Exception", 
-    "netWorkError": "Network Error", 
-    "notData": "No data", 
-    "list": "List page", 
-    "listCard": "Card list", 
-    "basic": "Basic list", 
-    "listBasic": "Basic list", 
+    "page": "Page",
+    "form": "Form",
+    "formBasic": "Basic Form",
+    "formStep": "Step Form",
+    "formHigh": "Advanced Form",
+    "desc": "Details",
+    "descBasic": "Basic Details",
+    "descHigh": "Advanced Details",
+    "result": "Result",
+    "resultSuccess": "Success",
+    "resultFail": "Failed",
+    "account": "Personal",
+    "accountCenter": "Personal Center",
+    "accountSetting": "Personal Settings",
+    "exception": "Exception",
+    "netWorkError": "Network Error",
+    "notData": "No data",
+    "list": "List page",
+    "listCard": "Card list",
+    "basic": "Basic list",
+    "listBasic": "Basic list",
     "listSearch": "Search list"
-  }, 
+  },
   "permission": {
-    "permission": "Permission", 
-    "front": "front-end", 
-    "frontPage": "Page", 
-    "frontBtn": "Button", 
-    "frontTestA": "Test page A", 
-    "frontTestB": "Test page B", 
-    "back": "background", 
-    "backPage": "Page", 
+    "permission": "Permission",
+    "front": "front-end",
+    "frontPage": "Page",
+    "frontBtn": "Button",
+    "frontTestA": "Test page A",
+    "frontTestB": "Test page B",
+    "back": "background",
+    "backPage": "Page",
     "backBtn": "Button"
-  }, 
+  },
   "setup": {
     "page": "Intro page"
-  }, 
+  },
   "system": {
-    "moduleName": "System management", 
-    "account": "Account management", 
-    "account_detail": "Account detail", 
-    "password": "Change password", 
-    "dept": "Department management", 
-    "menu": "Menu management", 
+    "moduleName": "System management",
+    "account": "Account management",
+    "account_detail": "Account detail",
+    "password": "Change password",
+    "dept": "Department management",
+    "menu": "Menu management",
     "role": "Role management"
-  }, 
+  },
   "table": {
-    "table": "Table", 
-    "basic": "Basic", 
-    "treeTable": "Tree", 
-    "fetchTable": "Remote loading", 
-    "fixedColumn": "Fixed column", 
-    "customerCell": "Custom column", 
-    "formTable": "Open search", 
-    "useTable": "UseTable", 
-    "refTable": "RefTable", 
-    "multipleHeader": "MultiLevel header", 
-    "mergeHeader": "Merge cells", 
-    "expandTable": "Expandable table", 
-    "fixedHeight": "Fixed height", 
-    "footerTable": "Footer", 
-    "editCellTable": "Editable cell", 
-    "editRowTable": "Editable row", 
-    "authColumn": "Auth column", 
-    "resizeParentHeightTable": "resizeParentHeightTable", 
+    "table": "Table",
+    "basic": "Basic",
+    "treeTable": "Tree",
+    "fetchTable": "Remote loading",
+    "fixedColumn": "Fixed column",
+    "customerCell": "Custom column",
+    "formTable": "Open search",
+    "useTable": "UseTable",
+    "refTable": "RefTable",
+    "multipleHeader": "MultiLevel header",
+    "mergeHeader": "Merge cells",
+    "expandTable": "Expandable table",
+    "fixedHeight": "Fixed height",
+    "footerTable": "Footer",
+    "editCellTable": "Editable cell",
+    "editRowTable": "Editable row",
+    "authColumn": "Auth column",
+    "resizeParentHeightTable": "resizeParentHeightTable",
     "vxeTable": "VxeTable"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/lang/zh-CN/component.json b/src/locales/lang/zh-CN/component.json
index 7af7df1d82acc4f5d101c9378239a7e96d9b2b1b..e326ee49edcd96857b21008dcb9fd79cdd7b6f13 100644
--- a/src/locales/lang/zh-CN/component.json
+++ b/src/locales/lang/zh-CN/component.json
@@ -1,124 +1,124 @@
 {
   "app": {
-    "searchNotData": "暂无搜索结果", 
-    "toSearch": "确认", 
+    "searchNotData": "暂无搜索结果",
+    "toSearch": "确认",
     "toNavigate": "切换"
-  }, 
+  },
   "countdown": {
-    "normalText": "获取验证码", 
+    "normalText": "获取验证码",
     "sendText": "{0}秒后重新获取"
-  }, 
+  },
   "cropper": {
-    "selectImage": "选择图片", 
-    "uploadSuccess": "上传成功", 
-    "imageTooBig": "图片超限", 
-    "modalTitle": "头像上传", 
-    "okText": "确认并上传", 
-    "btn_reset": "重置", 
-    "btn_rotate_left": "逆时针旋转", 
-    "btn_rotate_right": "顺时针旋转", 
-    "btn_scale_x": "水平翻转", 
-    "btn_scale_y": "垂直翻转", 
-    "btn_zoom_in": "放大", 
-    "btn_zoom_out": "缩小", 
+    "selectImage": "选择图片",
+    "uploadSuccess": "上传成功",
+    "imageTooBig": "图片超限",
+    "modalTitle": "头像上传",
+    "okText": "确认并上传",
+    "btn_reset": "重置",
+    "btn_rotate_left": "逆时针旋转",
+    "btn_rotate_right": "顺时针旋转",
+    "btn_scale_x": "水平翻转",
+    "btn_scale_y": "垂直翻转",
+    "btn_zoom_in": "放大",
+    "btn_zoom_out": "缩小",
     "preview": "预览"
-  }, 
+  },
   "drawer": {
-    "loadingText": "加载中...", 
-    "cancelText": "关闭", 
+    "loadingText": "加载中...",
+    "cancelText": "关闭",
     "okText": "确认"
-  }, 
+  },
   "excel": {
-    "exportModalTitle": "导出数据", 
-    "fileType": "文件类型", 
+    "exportModalTitle": "导出数据",
+    "fileType": "文件类型",
     "fileName": "文件名"
-  }, 
+  },
   "form": {
-    "putAway": "收起", 
-    "unfold": "展开", 
-    "maxTip": "字符数应小于{0}位", 
+    "putAway": "收起",
+    "unfold": "展开",
+    "maxTip": "字符数应小于{0}位",
     "apiSelectNotFound": "请等待数据加载完成..."
-  }, 
+  },
   "icon": {
-    "placeholder": "点击选择图标", 
-    "search": "搜索图标", 
+    "placeholder": "点击选择图标",
+    "search": "搜索图标",
     "copy": "复制图标成功!"
-  }, 
+  },
   "menu": {
     "search": "菜单搜索"
-  }, 
+  },
   "modal": {
-    "cancelText": "关闭", 
-    "okText": "确认", 
-    "close": "关闭", 
-    "maximize": "最大化", 
+    "cancelText": "关闭",
+    "okText": "确认",
+    "close": "关闭",
+    "maximize": "最大化",
     "restore": "还原"
-  }, 
+  },
   "table": {
-    "settingDens": "密度", 
-    "settingDensDefault": "默认", 
-    "settingDensMiddle": "中等", 
-    "settingDensSmall": "紧凑", 
-    "settingColumn": "列设置", 
-    "settingColumnShow": "列展示", 
-    "settingIndexColumnShow": "序号列", 
-    "settingSelectColumnShow": "勾选列", 
-    "settingFixedLeft": "固定到左侧", 
-    "settingFixedRight": "固定到右侧", 
-    "settingFullScreen": "全屏", 
-    "index": "序号", 
+    "settingDens": "密度",
+    "settingDensDefault": "默认",
+    "settingDensMiddle": "中等",
+    "settingDensSmall": "紧凑",
+    "settingColumn": "列设置",
+    "settingColumnShow": "列展示",
+    "settingIndexColumnShow": "序号列",
+    "settingSelectColumnShow": "勾选列",
+    "settingFixedLeft": "固定到左侧",
+    "settingFixedRight": "固定到右侧",
+    "settingFullScreen": "全屏",
+    "index": "序号",
     "total": "共 {total} 条数据"
-  }, 
+  },
   "time": {
-    "before": "前", 
-    "after": "后", 
-    "just": "刚刚", 
-    "seconds": "秒", 
-    "minutes": "分钟", 
-    "hours": "小时", 
+    "before": "前",
+    "after": "后",
+    "just": "刚刚",
+    "seconds": "秒",
+    "minutes": "分钟",
+    "hours": "小时",
     "days": "天"
-  }, 
+  },
   "tree": {
-    "selectAll": "选择全部", 
-    "unSelectAll": "取消选择", 
-    "expandAll": "展开全部", 
-    "unExpandAll": "折叠全部", 
-    "checkStrictly": "层级关联", 
+    "selectAll": "选择全部",
+    "unSelectAll": "取消选择",
+    "expandAll": "展开全部",
+    "unExpandAll": "折叠全部",
+    "checkStrictly": "层级关联",
     "checkUnStrictly": "层级独立"
-  }, 
+  },
   "upload": {
-    "save": "保存", 
-    "upload": "上传", 
-    "imgUpload": "图片上传", 
-    "uploaded": "已上传", 
-    "operating": "操作", 
-    "del": "删除", 
-    "download": "下载", 
-    "saveWarn": "请等待文件上传后，保存!", 
-    "saveError": "没有上传成功的文件，无法保存!", 
-    "preview": "预览", 
-    "choose": "选择文件", 
-    "accept": "支持{0}格式", 
-    "acceptUpload": "只能上传{0}格式文件", 
-    "maxSize": "单个文件不超过{0}MB", 
-    "maxSizeMultiple": "只能上传不超过{0}MB的文件!", 
-    "maxNumber": "最多只能上传{0}个文件", 
-    "legend": "略缩图", 
-    "fileName": "文件名", 
-    "fileSize": "文件大小", 
-    "fileStatue": "状态", 
-    "startUpload": "开始上传", 
-    "uploadSuccess": "上传成功", 
-    "uploadError": "上传失败", 
-    "uploading": "上传中", 
-    "uploadWait": "请等待文件上传结束后操作", 
+    "save": "保存",
+    "upload": "上传",
+    "imgUpload": "图片上传",
+    "uploaded": "已上传",
+    "operating": "操作",
+    "del": "删除",
+    "download": "下载",
+    "saveWarn": "请等待文件上传后，保存!",
+    "saveError": "没有上传成功的文件，无法保存!",
+    "preview": "预览",
+    "choose": "选择文件",
+    "accept": "支持{0}格式",
+    "acceptUpload": "只能上传{0}格式文件",
+    "maxSize": "单个文件不超过{0}MB",
+    "maxSizeMultiple": "只能上传不超过{0}MB的文件!",
+    "maxNumber": "最多只能上传{0}个文件",
+    "legend": "略缩图",
+    "fileName": "文件名",
+    "fileSize": "文件大小",
+    "fileStatue": "状态",
+    "startUpload": "开始上传",
+    "uploadSuccess": "上传成功",
+    "uploadError": "上传失败",
+    "uploading": "上传中",
+    "uploadWait": "请等待文件上传结束后操作",
     "reUploadFailed": "重新上传失败文件"
-  }, 
+  },
   "verify": {
-    "error": "验证失败！", 
-    "time": "验证校验成功,耗时{time}秒！", 
-    "redoTip": "点击图片可刷新", 
-    "dragText": "请按住滑块拖动", 
+    "error": "验证失败！",
+    "time": "验证校验成功,耗时{time}秒！",
+    "redoTip": "点击图片可刷新",
+    "dragText": "请按住滑块拖动",
     "successText": "验证通过"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/lang/zh-CN/layout.json b/src/locales/lang/zh-CN/layout.json
index 8980a4994dc3d612aa006c36c3ac058d5b5b67a0..cc0b1441869a0bb569d7a6c7f52b85b90af6499f 100644
--- a/src/locales/lang/zh-CN/layout.json
+++ b/src/locales/lang/zh-CN/layout.json
@@ -1,94 +1,94 @@
 {
   "footer": {
-    "onlinePreview": "在线预览", 
+    "onlinePreview": "在线预览",
     "onlineDocument": "在线文档"
-  }, 
+  },
   "header": {
-    "dropdownItemDoc": "文档", 
-    "dropdownItemLoginOut": "退出系统", 
-    "tooltipErrorLog": "错误日志", 
-    "tooltipLock": "锁定屏幕", 
-    "tooltipNotify": "消息通知", 
-    "tooltipEntryFull": "全屏", 
-    "tooltipExitFull": "退出全屏", 
-    "lockScreenPassword": "锁屏密码", 
-    "lockScreen": "锁定屏幕", 
-    "lockScreenBtn": "锁定", 
+    "dropdownItemDoc": "文档",
+    "dropdownItemLoginOut": "退出系统",
+    "tooltipErrorLog": "错误日志",
+    "tooltipLock": "锁定屏幕",
+    "tooltipNotify": "消息通知",
+    "tooltipEntryFull": "全屏",
+    "tooltipExitFull": "退出全屏",
+    "lockScreenPassword": "锁屏密码",
+    "lockScreen": "锁定屏幕",
+    "lockScreenBtn": "锁定",
     "home": "首页"
-  }, 
+  },
   "multipleTab": {
-    "reload": "重新加载", 
-    "close": "关闭标签页", 
-    "closeLeft": "关闭左侧标签页", 
-    "closeRight": "关闭右侧标签页", 
-    "closeOther": "关闭其它标签页", 
+    "reload": "重新加载",
+    "close": "关闭标签页",
+    "closeLeft": "关闭左侧标签页",
+    "closeRight": "关闭右侧标签页",
+    "closeOther": "关闭其它标签页",
     "closeAll": "关闭全部标签页"
-  }, 
+  },
   "setting": {
-    "contentModeFull": "流式", 
-    "contentModeFixed": "定宽", 
-    "topMenuAlignLeft": "居左", 
-    "topMenuAlignRight": "居中", 
-    "topMenuAlignCenter": "居右", 
-    "menuTriggerNone": "不显示", 
-    "menuTriggerBottom": "底部", 
-    "menuTriggerTop": "顶部", 
-    "menuTypeSidebar": "左侧菜单模式", 
-    "menuTypeMixSidebar": "左侧菜单混合模式", 
-    "menuTypeMix": "顶部菜单混合模式", 
-    "menuTypeTopMenu": "顶部菜单模式", 
-    "on": "开", 
-    "off": "关", 
-    "minute": "分钟", 
-    "operatingTitle": "操作成功", 
-    "operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！", 
-    "resetSuccess": "重置成功！", 
-    "copyBtn": "拷贝", 
-    "clearBtn": "清空缓存并返回登录页", 
-    "drawerTitle": "项目配置", 
-    "darkMode": "主题", 
-    "navMode": "导航栏模式", 
-    "interfaceFunction": "界面功能", 
-    "interfaceDisplay": "界面显示", 
-    "animation": "动画", 
-    "splitMenu": "分割菜单", 
-    "closeMixSidebarOnChange": "切换页面关闭菜单", 
-    "sysTheme": "系统主题", 
-    "headerTheme": "顶栏主题", 
-    "sidebarTheme": "菜单主题", 
-    "menuDrag": "侧边菜单拖拽", 
-    "menuSearch": "菜单搜索", 
-    "menuAccordion": "侧边菜单手风琴模式", 
-    "menuCollapse": "折叠菜单", 
-    "collapseMenuDisplayName": "折叠菜单显示名称", 
-    "topMenuLayout": "顶部菜单布局", 
-    "menuCollapseButton": "菜单折叠按钮", 
-    "contentMode": "内容区域宽度", 
-    "expandedMenuWidth": "菜单展开宽度", 
-    "breadcrumb": "面包屑", 
-    "breadcrumbIcon": "面包屑图标", 
-    "tabs": "标签页", 
-    "tabDetail": "标签详情页", 
-    "tabsQuickBtn": "标签页快捷按钮", 
-    "tabsRedoBtn": "标签页刷新按钮", 
-    "tabsFoldBtn": "标签页折叠按钮", 
-    "sidebar": "左侧菜单", 
-    "header": "顶栏", 
-    "footer": "页脚", 
-    "fullContent": "全屏内容", 
-    "grayMode": "灰色模式", 
-    "colorWeak": "色弱模式", 
-    "progress": "顶部进度条", 
-    "switchLoading": "切换loading", 
-    "switchAnimation": "切换动画", 
-    "animationType": "动画类型", 
-    "autoScreenLock": "自动锁屏", 
-    "notAutoScreenLock": "不自动锁屏", 
-    "fixedHeader": "固定header", 
-    "fixedSideBar": "固定Sidebar", 
-    "mixSidebarTrigger": "混合菜单触发方式", 
-    "triggerHover": "悬停", 
-    "triggerClick": "点击", 
+    "contentModeFull": "流式",
+    "contentModeFixed": "定宽",
+    "topMenuAlignLeft": "居左",
+    "topMenuAlignRight": "居中",
+    "topMenuAlignCenter": "居右",
+    "menuTriggerNone": "不显示",
+    "menuTriggerBottom": "底部",
+    "menuTriggerTop": "顶部",
+    "menuTypeSidebar": "左侧菜单模式",
+    "menuTypeMixSidebar": "左侧菜单混合模式",
+    "menuTypeMix": "顶部菜单混合模式",
+    "menuTypeTopMenu": "顶部菜单模式",
+    "on": "开",
+    "off": "关",
+    "minute": "分钟",
+    "operatingTitle": "操作成功",
+    "operatingContent": "复制成功,请到 src/settings/projectSetting.ts 中修改配置！",
+    "resetSuccess": "重置成功！",
+    "copyBtn": "拷贝",
+    "clearBtn": "清空缓存并返回登录页",
+    "drawerTitle": "项目配置",
+    "darkMode": "主题",
+    "navMode": "导航栏模式",
+    "interfaceFunction": "界面功能",
+    "interfaceDisplay": "界面显示",
+    "animation": "动画",
+    "splitMenu": "分割菜单",
+    "closeMixSidebarOnChange": "切换页面关闭菜单",
+    "sysTheme": "系统主题",
+    "headerTheme": "顶栏主题",
+    "sidebarTheme": "菜单主题",
+    "menuDrag": "侧边菜单拖拽",
+    "menuSearch": "菜单搜索",
+    "menuAccordion": "侧边菜单手风琴模式",
+    "menuCollapse": "折叠菜单",
+    "collapseMenuDisplayName": "折叠菜单显示名称",
+    "topMenuLayout": "顶部菜单布局",
+    "menuCollapseButton": "菜单折叠按钮",
+    "contentMode": "内容区域宽度",
+    "expandedMenuWidth": "菜单展开宽度",
+    "breadcrumb": "面包屑",
+    "breadcrumbIcon": "面包屑图标",
+    "tabs": "标签页",
+    "tabDetail": "标签详情页",
+    "tabsQuickBtn": "标签页快捷按钮",
+    "tabsRedoBtn": "标签页刷新按钮",
+    "tabsFoldBtn": "标签页折叠按钮",
+    "sidebar": "左侧菜单",
+    "header": "顶栏",
+    "footer": "页脚",
+    "fullContent": "全屏内容",
+    "grayMode": "灰色模式",
+    "colorWeak": "色弱模式",
+    "progress": "顶部进度条",
+    "switchLoading": "切换loading",
+    "switchAnimation": "切换动画",
+    "animationType": "动画类型",
+    "autoScreenLock": "自动锁屏",
+    "notAutoScreenLock": "不自动锁屏",
+    "fixedHeader": "固定header",
+    "fixedSideBar": "固定Sidebar",
+    "mixSidebarTrigger": "混合菜单触发方式",
+    "triggerHover": "悬停",
+    "triggerClick": "点击",
     "mixSidebarFixed": "固定展开菜单"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/lang/zh-CN/routes/demo.json b/src/locales/lang/zh-CN/routes/demo.json
index aae6ec6995c0da72f5b823ed4166183e05ebc73d..b64f166f118c3cdb6042c5dfafecfc1612a319bc 100644
--- a/src/locales/lang/zh-CN/routes/demo.json
+++ b/src/locales/lang/zh-CN/routes/demo.json
@@ -1,176 +1,176 @@
 {
   "charts": {
-    "baiduMap": "百度地图", 
-    "aMap": "高德地图", 
-    "googleMap": "谷歌地图", 
-    "charts": "图表", 
-    "map": "地图", 
-    "line": "折线图", 
+    "baiduMap": "百度地图",
+    "aMap": "高德地图",
+    "googleMap": "谷歌地图",
+    "charts": "图表",
+    "map": "地图",
+    "line": "折线图",
     "pie": "饼图"
-  }, 
+  },
   "comp": {
-    "comp": "组件", 
-    "basic": "基础组件", 
-    "transition": "动画组件", 
-    "countTo": "数字动画", 
-    "scroll": "滚动组件", 
-    "scrollBasic": "基础滚动", 
-    "scrollAction": "滚动函数", 
-    "virtualScroll": "虚拟滚动", 
-    "tree": "Tree", 
-    "treeBasic": "基础树", 
-    "editTree": "可搜索/工具栏", 
-    "actionTree": "函数操作示例", 
-    "modal": "弹窗扩展", 
-    "drawer": "抽屉扩展", 
-    "desc": "详情组件", 
-    "verify": "验证组件", 
-    "verifyDrag": "拖拽校验", 
-    "verifyRotate": "图片还原", 
-    "qrcode": "二维码组件", 
-    "strength": "密码强度组件", 
-    "upload": "上传组件", 
-    "loading": "Loading", 
-    "time": "相对时间", 
-    "cropperImage": "图片裁剪", 
+    "comp": "组件",
+    "basic": "基础组件",
+    "transition": "动画组件",
+    "countTo": "数字动画",
+    "scroll": "滚动组件",
+    "scrollBasic": "基础滚动",
+    "scrollAction": "滚动函数",
+    "virtualScroll": "虚拟滚动",
+    "tree": "Tree",
+    "treeBasic": "基础树",
+    "editTree": "可搜索/工具栏",
+    "actionTree": "函数操作示例",
+    "modal": "弹窗扩展",
+    "drawer": "抽屉扩展",
+    "desc": "详情组件",
+    "verify": "验证组件",
+    "verifyDrag": "拖拽校验",
+    "verifyRotate": "图片还原",
+    "qrcode": "二维码组件",
+    "strength": "密码强度组件",
+    "upload": "上传组件",
+    "loading": "Loading",
+    "time": "相对时间",
+    "cropperImage": "图片裁剪",
     "cardList": "卡片列表"
-  }, 
+  },
   "editor": {
-    "editor": "编辑器", 
-    "jsonEditor": "Json编辑器", 
-    "markdown": "markdown编辑器", 
-    "tinymce": "富文本", 
-    "tinymceBasic": "基础使用", 
+    "editor": "编辑器",
+    "jsonEditor": "Json编辑器",
+    "markdown": "markdown编辑器",
+    "tinymce": "富文本",
+    "tinymceBasic": "基础使用",
     "tinymceForm": "嵌入form"
-  }, 
+  },
   "excel": {
-    "excel": "Excel", 
-    "customExport": "选择导出格式", 
-    "jsonExport": "JSON数据导出", 
-    "arrayExport": "Array数据导出", 
+    "excel": "Excel",
+    "customExport": "选择导出格式",
+    "jsonExport": "JSON数据导出",
+    "arrayExport": "Array数据导出",
     "importExcel": "导入"
-  }, 
+  },
   "feat": {
-    "feat": "功能", 
-    "icon": "图标", 
-    "sessionTimeout": "登录过期", 
-    "tabs": "标签页操作", 
-    "tabDetail": "标签详情页", 
-    "print": "打印", 
-    "contextMenu": "右键菜单", 
-    "download": "文件下载", 
-    "clickOutSide": "ClickOutSide组件", 
-    "imgPreview": "图片预览", 
-    "copy": "剪切板", 
-    "msg": "消息提示", 
-    "watermark": "水印", 
-    "ripple": "水波纹", 
-    "fullScreen": "全屏", 
-    "errorLog": "错误日志", 
-    "tab": "Tab带参", 
-    "tab1": "Tab带参1", 
-    "tab2": "Tab带参2", 
-    "menu": "Menu带参", 
-    "menu1": "Menu带参1", 
-    "menu2": "Menu带参2", 
-    "ws": "websocket测试", 
-    "breadcrumb": "面包屑导航", 
-    "breadcrumbFlat": "平级模式", 
-    "requestDemo": "测试请求重试", 
-    "breadcrumbFlatDetail": "平级详情", 
-    "breadcrumbChildren": "层级模式", 
+    "feat": "功能",
+    "icon": "图标",
+    "sessionTimeout": "登录过期",
+    "tabs": "标签页操作",
+    "tabDetail": "标签详情页",
+    "print": "打印",
+    "contextMenu": "右键菜单",
+    "download": "文件下载",
+    "clickOutSide": "ClickOutSide组件",
+    "imgPreview": "图片预览",
+    "copy": "剪切板",
+    "msg": "消息提示",
+    "watermark": "水印",
+    "ripple": "水波纹",
+    "fullScreen": "全屏",
+    "errorLog": "错误日志",
+    "tab": "Tab带参",
+    "tab1": "Tab带参1",
+    "tab2": "Tab带参2",
+    "menu": "Menu带参",
+    "menu1": "Menu带参1",
+    "menu2": "Menu带参2",
+    "ws": "websocket测试",
+    "breadcrumb": "面包屑导航",
+    "breadcrumbFlat": "平级模式",
+    "requestDemo": "测试请求重试",
+    "breadcrumbFlatDetail": "平级详情",
+    "breadcrumbChildren": "层级模式",
     "breadcrumbChildrenDetail": "层级详情"
-  }, 
+  },
   "flow": {
-    "name": "图形编辑器", 
+    "name": "图形编辑器",
     "flowChart": "流程图"
-  }, 
+  },
   "form": {
-    "form": "Form", 
-    "basic": "基础表单", 
-    "useForm": "useForm", 
-    "refForm": "RefForm", 
-    "advancedForm": "可收缩表单", 
-    "ruleForm": "表单验证", 
-    "dynamicForm": "动态表单", 
-    "customerForm": "自定义组件", 
-    "appendForm": "表单增删示例", 
+    "form": "Form",
+    "basic": "基础表单",
+    "useForm": "useForm",
+    "refForm": "RefForm",
+    "advancedForm": "可收缩表单",
+    "ruleForm": "表单验证",
+    "dynamicForm": "动态表单",
+    "customerForm": "自定义组件",
+    "appendForm": "表单增删示例",
     "tabsForm": "标签页+多级field"
-  }, 
+  },
   "iframe": {
-    "frame": "外部页面", 
-    "antv": "antVue文档(内嵌)", 
-    "doc": "项目文档(内嵌)", 
+    "frame": "外部页面",
+    "antv": "antVue文档(内嵌)",
+    "doc": "项目文档(内嵌)",
     "docExternal": "项目文档(外链)"
-  }, 
+  },
   "level": {
     "level": "多级菜单"
-  }, 
+  },
   "page": {
-    "page": "页面", 
-    "form": "表单页", 
-    "formBasic": "基础表单", 
-    "formStep": "分步表单", 
-    "formHigh": "高级表单", 
-    "desc": "详情页", 
-    "descBasic": "基础详情页", 
-    "descHigh": "高级详情页", 
-    "result": "结果页", 
-    "resultSuccess": "成功页", 
-    "resultFail": "失败页", 
-    "account": "个人页", 
-    "accountCenter": "个人中心", 
-    "accountSetting": "个人设置", 
-    "exception": "异常页", 
-    "netWorkError": "网络错误", 
-    "notData": "无数据", 
-    "list": "列表页", 
-    "listCard": "卡片列表", 
-    "listBasic": "标准列表", 
+    "page": "页面",
+    "form": "表单页",
+    "formBasic": "基础表单",
+    "formStep": "分步表单",
+    "formHigh": "高级表单",
+    "desc": "详情页",
+    "descBasic": "基础详情页",
+    "descHigh": "高级详情页",
+    "result": "结果页",
+    "resultSuccess": "成功页",
+    "resultFail": "失败页",
+    "account": "个人页",
+    "accountCenter": "个人中心",
+    "accountSetting": "个人设置",
+    "exception": "异常页",
+    "netWorkError": "网络错误",
+    "notData": "无数据",
+    "list": "列表页",
+    "listCard": "卡片列表",
+    "listBasic": "标准列表",
     "listSearch": "搜索列表"
-  }, 
+  },
   "permission": {
-    "permission": "权限管理", 
-    "front": "基于前端权限", 
-    "frontPage": "页面权限", 
-    "frontBtn": "按钮权限", 
-    "frontTestA": "权限测试页A", 
-    "frontTestB": "权限测试页B", 
-    "back": "基于后台权限", 
-    "backPage": "页面权限", 
+    "permission": "权限管理",
+    "front": "基于前端权限",
+    "frontPage": "页面权限",
+    "frontBtn": "按钮权限",
+    "frontTestA": "权限测试页A",
+    "frontTestB": "权限测试页B",
+    "back": "基于后台权限",
+    "backPage": "页面权限",
     "backBtn": "按钮权限"
-  }, 
+  },
   "setup": {
     "page": "引导页"
-  }, 
+  },
   "system": {
-    "moduleName": "系统管理", 
-    "account": "账号管理", 
-    "account_detail": "账号详情", 
-    "password": "修改密码", 
-    "dept": "部门管理", 
-    "menu": "菜单管理", 
+    "moduleName": "系统管理",
+    "account": "账号管理",
+    "account_detail": "账号详情",
+    "password": "修改密码",
+    "dept": "部门管理",
+    "menu": "菜单管理",
     "role": "角色管理"
-  }, 
+  },
   "table": {
-    "table": "Table", 
-    "basic": "基础表格", 
-    "treeTable": "树形表格", 
-    "fetchTable": "远程加载示例", 
-    "fixedColumn": "固定列", 
-    "customerCell": "自定义列", 
-    "formTable": "开启搜索区域", 
-    "useTable": "UseTable", 
-    "refTable": "RefTable", 
-    "multipleHeader": "多级表头", 
-    "mergeHeader": "合并单元格", 
-    "expandTable": "可展开表格", 
-    "fixedHeight": "定高/头部自定义", 
-    "footerTable": "表尾行合计", 
-    "editCellTable": "可编辑单元格", 
-    "editRowTable": "可编辑行", 
-    "authColumn": "权限列", 
-    "resizeParentHeightTable": "继承父元素高度", 
+    "table": "Table",
+    "basic": "基础表格",
+    "treeTable": "树形表格",
+    "fetchTable": "远程加载示例",
+    "fixedColumn": "固定列",
+    "customerCell": "自定义列",
+    "formTable": "开启搜索区域",
+    "useTable": "UseTable",
+    "refTable": "RefTable",
+    "multipleHeader": "多级表头",
+    "mergeHeader": "合并单元格",
+    "expandTable": "可展开表格",
+    "fixedHeight": "定高/头部自定义",
+    "footerTable": "表尾行合计",
+    "editCellTable": "可编辑单元格",
+    "editRowTable": "可编辑行",
+    "authColumn": "权限列",
+    "resizeParentHeightTable": "继承父元素高度",
     "vxeTable": "VxeTable"
   }
-}
\ No newline at end of file
+}
diff --git a/src/mixins/multiplePageMix.ts b/src/mixins/multiplePageMix.ts
index 17aab443f906dbf6f0241a0ab3ab8cba260a6c86..2e38b61daf315a0ecf7c8df133cbe8f7f3e7d1e3 100644
--- a/src/mixins/multiplePageMix.ts
+++ b/src/mixins/multiplePageMix.ts
@@ -16,7 +16,7 @@ export const multiplePageMix = {
   methods: {
     openChildPage(path: string) {
       const refreshStore = useRefreshStore();
-      refreshStore.setCacheFlag(path, this.$route.path);
+      refreshStore.setCacheFlag(path.split('?')[0], this.$route.path);
       this.$router.push(path);
     },
     closeCurrentPage(refreshParent: boolean = true): void {
diff --git a/src/mixins/print.ts b/src/mixins/print.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b20e3631bffa45c11c6f1bddaeb2e5d80ce347ea
--- /dev/null
+++ b/src/mixins/print.ts
@@ -0,0 +1,12 @@
+import * as api from '@/api/base-data/print-template';
+
+export const printMix = {
+  methods: {
+    lodopPreview(type, printData) {
+      api.getSetting(type).then((res) => {
+        const templateJson = res.templateJson;
+        this.$lodop.preview(templateJson, [printData]);
+      });
+    },
+  },
+};
diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts
index 92d50baa3f1cb1fb1cbea075ab730d13dbbed17f..d9a514fd17eafaa99e5bf5704c7fa3a5e464c7c7 100644
--- a/src/utils/http/axios/index.ts
+++ b/src/utils/http/axios/index.ts
@@ -14,7 +14,7 @@ import { isString, isArray } from '/@/utils/is';
 import { getToken } from '/@/utils/auth';
 import { deepMerge, setObjToUrlParams } from '/@/utils';
 import { formatRequestDate, joinTimestamp } from './helper';
-import {createError, createErrorDialog} from '@/hooks/web/msg';
+import { createError, createErrorDialog } from '@/hooks/web/msg';
 
 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix;
diff --git a/src/utils/lodop.ts b/src/utils/lodop.ts
index 29d02cc3d454cc6c3ff9789b507c9cb70198b86e..184c2cd4b93d41a3b8a933a6e7f55b743974ef35 100644
--- a/src/utils/lodop.ts
+++ b/src/utils/lodop.ts
@@ -1,167 +1,218 @@
 /* eslint-disable */
 // ==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==
 import { h } from 'vue';
-import * as msg from '@/hooks/web/msg'
+import * as msg from '@/hooks/web/msg';
 
-var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState
+var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
 
 // ==判断是否需要CLodop(那些不支持插件的浏览器):==
 function needCLodop() {
   try {
-    var ua = navigator.userAgent
-    if (ua.match(/Windows\sPhone/i)) return true
-    if (ua.match(/iPhone|iPod|iPad/i)) return true
-    if (ua.match(/Android/i)) return true
-    if (ua.match(/Edge\D?\d+/i)) return true
+    var ua = navigator.userAgent;
+    if (ua.match(/Windows\sPhone/i)) return true;
+    if (ua.match(/iPhone|iPod|iPad/i)) return true;
+    if (ua.match(/Android/i)) return true;
+    if (ua.match(/Edge\D?\d+/i)) return true;
 
-    var verTrident = ua.match(/Trident\D?\d+/i)
-    var verIE = ua.match(/MSIE\D?\d+/i)
-    var verOPR = ua.match(/OPR\D?\d+/i)
-    var verFF = ua.match(/Firefox\D?\d+/i)
-    var x64 = ua.match(/x64/i)
-    if ((!verTrident) && (!verIE) && (x64)) return true
+    var verTrident = ua.match(/Trident\D?\d+/i);
+    var verIE = ua.match(/MSIE\D?\d+/i);
+    var verOPR = ua.match(/OPR\D?\d+/i);
+    var verFF = ua.match(/Firefox\D?\d+/i);
+    var x64 = ua.match(/x64/i);
+    if (!verTrident && !verIE && x64) return true;
     else if (verFF) {
-      verFF = verFF[0].match(/\d+/)
-      if ((verFF[0] >= 41) || (x64)) return true
+      verFF = verFF[0].match(/\d+/);
+      if (verFF[0] >= 41 || x64) return true;
     } else if (verOPR) {
-      verOPR = verOPR[0].match(/\d+/)
-      if (verOPR[0] >= 32) return true
-    } else if ((!verTrident) && (!verIE)) {
-      var verChrome = ua.match(/Chrome\D?\d+/i)
+      verOPR = verOPR[0].match(/\d+/);
+      if (verOPR[0] >= 32) return true;
+    } else if (!verTrident && !verIE) {
+      var verChrome = ua.match(/Chrome\D?\d+/i);
       if (verChrome) {
-        verChrome = verChrome[0].match(/\d+/)
-        if (verChrome[0] >= 41) return true
+        verChrome = verChrome[0].match(/\d+/);
+        if (verChrome[0] >= 41) return true;
       }
     }
-    return false
+    return false;
   } catch (err) {
-    return true
+    return true;
   }
 }
 
 // 加载CLodop时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
 // 主JS文件名“CLodopfuncs.js”是固定名称，其内容是动态的，与其链接的打印环境有关:
 function loadCLodop() {
-  if (CLodopJsState == 'loading' || CLodopJsState == 'complete') return
-  CLodopJsState = 'loading'
-  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
-  var JS1 = document.createElement('script')
-  var JS2 = document.createElement('script')
+  if (CLodopJsState == 'loading' || CLodopJsState == 'complete') return;
+  CLodopJsState = 'loading';
+  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
+  var JS1 = document.createElement('script');
+  var JS2 = document.createElement('script');
 
   if (window.location.protocol == 'https:') {
-    JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'
-    JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'
+    JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js';
+    JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js';
   } else {
-    JS1.src = 'http://localhost:8000/CLodopfuncs.js'
-    JS2.src = 'http://localhost:18000/CLodopfuncs.js'
+    JS1.src = 'http://localhost:8000/CLodopfuncs.js';
+    JS2.src = 'http://localhost:18000/CLodopfuncs.js';
   }
-  JS1.onload = JS2.onload = function() { CLodopJsState = 'complete' }
-  JS1.onerror = JS2.onerror = function(evt) { CLodopJsState = 'complete' }
-  head.insertBefore(JS1, head.firstChild)
-  head.insertBefore(JS2, head.firstChild)
-  CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i))
+  JS1.onload = JS2.onload = function () {
+    CLodopJsState = 'complete';
+  };
+  JS1.onerror = JS2.onerror = function (evt) {
+    CLodopJsState = 'complete';
+  };
+  head.insertBefore(JS1, head.firstChild);
+  head.insertBefore(JS2, head.firstChild);
+  CLodopIsLocal = !!(JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i);
 }
 
-if (needCLodop()) { loadCLodop() }// 开始加载
+if (needCLodop()) {
+  loadCLodop();
+} // 开始加载
 
 // ==获取LODOP对象主过程,判断是否安装、需否升级:==
 function getLodopObj(oOBJECT, oEMBED) {
-  var strFontTag = '<font>打印控件'
-  var strLodopInstall = strFontTag + "未安装!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行安装</a>"
-  var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>"
-  var strLodop64Install = strFontTag + "未安装!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行安装</a>"
-  var strLodop64Update = strFontTag + "需要升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>"
-  var strCLodopInstallA = "<br><font>Web打印服务CLodop未安装启动，点击这里<a href='http://www.lodop.net/download.html' target='_blank'>下载执行安装</a>"
-  var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_blank'>点这里直接再次启动</a>）"
-  var strCLodopUpdate = "<br><font>Web打印服务CLodop需升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>"
-  var strLodop7FontTag = '<br><font>Web打印服务Lodop7'
-  var strLodop7HrefX86 = "点击这里<a href='http://www.lodop.net/download.html' target='_blank'>下载安装</a>(下载后解压，点击lodop文件开始执行)"
-  var strLodop7HrefARM = "点击这里<a href='http://www.lodop.net/download.html'  target='_blank'>下载安装</a>(下载后解压，点击lodop文件开始执行)"
-  var strLodop7Install_X86 = strLodop7FontTag + '未安装启动，' + strLodop7HrefX86
-  var strLodop7Install_ARM = strLodop7FontTag + '未安装启动，' + strLodop7HrefARM
-  var strLodop7Update_X86 = strLodop7FontTag + '需升级，' + strLodop7HrefX86
-  var strLodop7Update_ARM = strLodop7FontTag + '需升级，' + strLodop7HrefARM
-  var strInstallOK = '，成功后请刷新本页面或重启浏览器。</font>'
-  var LODOP
+  var strFontTag = '<font>打印控件';
+  var strLodopInstall =
+    strFontTag +
+    "未安装!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行安装</a>";
+  var strLodopUpdate =
+    strFontTag +
+    "需要升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>";
+  var strLodop64Install =
+    strFontTag +
+    "未安装!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行安装</a>";
+  var strLodop64Update =
+    strFontTag +
+    "需要升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>";
+  var strCLodopInstallA =
+    "<br><font>Web打印服务CLodop未安装启动，点击这里<a href='http://www.lodop.net/download.html' target='_blank'>下载执行安装</a>";
+  var strCLodopInstallB =
+    "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_blank'>点这里直接再次启动</a>）";
+  var strCLodopUpdate =
+    "<br><font>Web打印服务CLodop需升级!点击这里<a href='http://www.lodop.net/download.html' target='_blank'>执行升级</a>";
+  var strLodop7FontTag = '<br><font>Web打印服务Lodop7';
+  var strLodop7HrefX86 =
+    "点击这里<a href='http://www.lodop.net/download.html' target='_blank'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
+  var strLodop7HrefARM =
+    "点击这里<a href='http://www.lodop.net/download.html'  target='_blank'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
+  var strLodop7Install_X86 = strLodop7FontTag + '未安装启动，' + strLodop7HrefX86;
+  var strLodop7Install_ARM = strLodop7FontTag + '未安装启动，' + strLodop7HrefARM;
+  var strLodop7Update_X86 = strLodop7FontTag + '需升级，' + strLodop7HrefX86;
+  var strLodop7Update_ARM = strLodop7FontTag + '需升级，' + strLodop7HrefARM;
+  var strInstallOK = '，成功后请刷新本页面或重启浏览器。</font>';
+  var LODOP;
   try {
-    var isWinIE = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent))
-    var isWinIE64 = isWinIE && (/x64/i.test(navigator.userAgent))
-    var isLinuxX86 = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform))
-    var isLinuxARM = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform))
+    var isWinIE = /MSIE/i.test(navigator.userAgent) || /Trident/i.test(navigator.userAgent);
+    var isWinIE64 = isWinIE && /x64/i.test(navigator.userAgent);
+    var isLinuxX86 = /Linux/i.test(navigator.platform) && /x86/i.test(navigator.platform);
+    var isLinuxARM = /Linux/i.test(navigator.platform) && /aarch/i.test(navigator.platform);
 
     if (needCLodop() || isLinuxX86 || isLinuxARM) {
       try {
-        LODOP = getCLodop()
+        LODOP = getCLodop();
       } catch (err) {}
       if (!LODOP && CLodopJsState !== 'complete') {
         if (CLodopJsState == 'loading') {
-          msg.createError('lodop插件还未加载完毕，请稍后再操作.')
+          msg.createError('lodop插件还未加载完毕，请稍后再操作.');
         } else {
-          msg.createError('未曾加载Lodop主JS文件，请先调用loadCLodop过程.')
+          msg.createError('未曾加载Lodop主JS文件，请先调用loadCLodop过程.');
         }
-        return
+        return;
       }
-      var strAlertMessage
+      var strAlertMessage;
       if (!LODOP) {
-        if (isLinuxX86) strAlertMessage = strLodop7Install_X86; else
-        if (isLinuxARM) strAlertMessage = strLodop7Install_ARM; else { strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : '') }
-        msg.errorDialog(h('div', {
-            innerHTML: strAlertMessage + strInstallOK
-        }), '打印插件出错')
-        return
+        if (isLinuxX86) strAlertMessage = strLodop7Install_X86;
+        else if (isLinuxARM) strAlertMessage = strLodop7Install_ARM;
+        else {
+          strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : '');
+        }
+        msg.errorDialog(
+          h('div', {
+            innerHTML: strAlertMessage + strInstallOK,
+          }),
+          '打印插件出错',
+        );
+        return;
       } else {
-        if (isLinuxX86 && LODOP.CVERSION < '7.0.4.2') strAlertMessage = strLodop7Update_X86; else
-        if (isLinuxARM && LODOP.CVERSION < '7.0.4.2') strAlertMessage = strLodop7Update_ARM; else
-        if (CLODOP.CVERSION < '4.1.5.8') strAlertMessage = strCLodopUpdate
+        if (isLinuxX86 && LODOP.CVERSION < '7.0.4.2') strAlertMessage = strLodop7Update_X86;
+        else if (isLinuxARM && LODOP.CVERSION < '7.0.4.2') strAlertMessage = strLodop7Update_ARM;
+        else if (CLODOP.CVERSION < '4.1.5.8') strAlertMessage = strCLodopUpdate;
 
         if (strAlertMessage) {
-          msg.errorDialog(h('div', {
-              innerHTML: strAlertMessage + strInstallOK
-          }), '打印插件出错')
+          msg.errorDialog(
+            h('div', {
+              innerHTML: strAlertMessage + strInstallOK,
+            }),
+            '打印插件出错',
+          );
         }
       }
-    } else { // ==如果页面有Lodop插件就直接使用,否则新建:==
+    } else {
+      // ==如果页面有Lodop插件就直接使用,否则新建:==
       if (oOBJECT || oEMBED) {
-        if (isWinIE) { LODOP = oOBJECT } else { LODOP = oEMBED }
+        if (isWinIE) {
+          LODOP = oOBJECT;
+        } else {
+          LODOP = oEMBED;
+        }
       } else if (!CreatedOKLodopObject) {
-        LODOP = document.createElement('object')
-        LODOP.setAttribute('width', 0)
-        LODOP.setAttribute('height', 0)
-        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;')
-        if (isWinIE) { LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA') } else { LODOP.setAttribute('type', 'application/x-print-lodop') }
-        document.documentElement.appendChild(LODOP)
-        CreatedOKLodopObject = LODOP
-      } else { LODOP = CreatedOKLodopObject }
+        LODOP = document.createElement('object');
+        LODOP.setAttribute('width', 0);
+        LODOP.setAttribute('height', 0);
+        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;');
+        if (isWinIE) {
+          LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA');
+        } else {
+          LODOP.setAttribute('type', 'application/x-print-lodop');
+        }
+        document.documentElement.appendChild(LODOP);
+        CreatedOKLodopObject = LODOP;
+      } else {
+        LODOP = CreatedOKLodopObject;
+      }
       // ==Lodop插件未安装时提示下载地址:==
-      if ((!LODOP) || (!LODOP.VERSION)) {
-        msg.errorDialog(h('div', {
-            innerHTML: (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK
-        }), '打印插件出错')
-        return LODOP
+      if (!LODOP || !LODOP.VERSION) {
+        msg.errorDialog(
+          h('div', {
+            innerHTML: (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK,
+          }),
+          '打印插件出错',
+        );
+        return LODOP;
       }
       if (LODOP.VERSION < '6.2.2.6') {
-        msg.errorDialog(h('div', {
-            innerHTML: (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK
-        }), '打印插件出错')
+        msg.errorDialog(
+          h('div', {
+            innerHTML: (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK,
+          }),
+          '打印插件出错',
+        );
       }
     }
     // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================
 
     // ===============================================================================
-    return LODOP
+    return LODOP;
   } catch (err) {
-    msg.errorDialog('getLodop出错:' + err, '打印插件出错')
+    msg.errorDialog('getLodop出错:' + err, '打印插件出错');
   }
 }
 
 function getLodop(data, title) {
-  const LODOP = getLodopObj()
+  const LODOP = getLodopObj();
 
-  LODOP.PRINT_INIT(title || '未命名的打印')
-  LODOP.SET_PRINT_PAGESIZE(data.orient, data.pageWidth || 0, data.pageHeight, data.pageName)
-  LODOP.ADD_PRINT_HTM(data.marginTop + 'mm', data.marginLeft + 'mm', 'RightMargin:' + data.marginRight + 'mm', 'BottomMargin:' + data.marginBottom + 'mm', data.html)
+  LODOP.PRINT_INIT(title || '未命名的打印');
+  LODOP.SET_PRINT_PAGESIZE(data.orient, data.pageWidth || 0, data.pageHeight, data.pageName);
+  LODOP.ADD_PRINT_HTM(
+    data.marginTop + 'mm',
+    data.marginLeft + 'mm',
+    'RightMargin:' + data.marginRight + 'mm',
+    'BottomMargin:' + data.marginBottom + 'mm',
+    data.html,
+  );
 
-  return LODOP
+  return LODOP;
 }
 
-export { getLodop }
+export { getLodop };
diff --git a/src/views/base-data/address/index.vue b/src/views/base-data/address/index.vue
index 464ad302abbf7ea72a84e6fe21ca1599d4d4b9d4..bd13fa1269edd035e91439a9efcb8e79e43ee5c5 100644
--- a/src/views/base-data/address/index.vue
+++ b/src/views/base-data/address/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="实体类型">
                 <a-select v-model:value="searchFormData.entityType" allow-clear>
                   <a-select-option
diff --git a/src/views/base-data/customer/index.vue b/src/views/base-data/customer/index.vue
index a1a773394f786463009ee87fe3c7e3403a3e953b..57b5ffa851a29c67ed842cc36209eb598b696051 100644
--- a/src/views/base-data/customer/index.vue
+++ b/src/views/base-data/customer/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/logistics/company/index.vue b/src/views/base-data/logistics/company/index.vue
index 569a54932f2a315befd7e632437d27fb7d254aee..16b3ee50eb39d169dacc205dacde69d05e5370e2 100644
--- a/src/views/base-data/logistics/company/index.vue
+++ b/src/views/base-data/logistics/company/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/member/index.vue b/src/views/base-data/member/index.vue
index 063f23bbf952c7c7bfa2793366a8817027f80015..52e078b28730cee6ba79f7cf4a1721a2b498b7fd 100644
--- a/src/views/base-data/member/index.vue
+++ b/src/views/base-data/member/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/pay-type/index.vue b/src/views/base-data/pay-type/index.vue
index 8fad84ed015aa79dbb6eff1d6c5ece1a08672bb6..00c3b4e0b100d9c0c4a454a2caf9a96d9b67f5d1 100644
--- a/src/views/base-data/pay-type/index.vue
+++ b/src/views/base-data/pay-type/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/print-template/add.vue b/src/views/base-data/print-template/add.vue
new file mode 100644
index 0000000000000000000000000000000000000000..453d4cc28f0c7f7e57fcd58f75cf96907551ccca
--- /dev/null
+++ b/src/views/base-data/print-template/add.vue
@@ -0,0 +1,103 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    :style="{ top: '20px' }"
+    title="新增"
+    :footer="null"
+  >
+    <div v-if="visible" v-permission="['base-data:print-template:add']" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/base-data/print-template';
+
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          name: [{ required: true, message: '请输入名称' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          name: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .create(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('新增成功！');
+                // 初始化表单数据
+                this.initFormData();
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+      },
+    },
+  });
+</script>
diff --git a/src/views/base-data/print-template/demo-data.vue b/src/views/base-data/print-template/demo-data.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6773ba3b906ef5a84a6d68971ffc543dc8d491a7
--- /dev/null
+++ b/src/views/base-data/print-template/demo-data.vue
@@ -0,0 +1,102 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="50%"
+    title="编辑示例数据"
+    :body-style="{ padding: '0 0 10px 0' }"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <code-editor v-model:value="formData" bordered />
+
+      <div class="form-modal-footer">
+        <a-space>
+          <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+            >确定</a-button
+          >
+          <a-button :loading="loading" @click="closeDialog">取消</a-button>
+        </a-space>
+      </div>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/base-data/print-template';
+  import { CodeEditor } from '@/components/CodeEditor';
+
+  export default defineComponent({
+    components: {
+      CodeEditor,
+    },
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        formData: '',
+      };
+    },
+    computed: {},
+    mounted() {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = '';
+      },
+      // 页面显示时由父页面触发
+      async open() {
+        // 初始化表单数据
+        this.initFormData();
+
+        this.loading = true;
+        try {
+          const { demoData } = await api.getSetting(this.id);
+          this.formData = JSON.stringify(demoData || {});
+        } finally {
+          this.loading = false;
+        }
+      },
+      submit() {
+        this.loading = true;
+        api
+          .updateDemoData({
+            id: this.id,
+            demoData: this.formData,
+          })
+          .then(() => {
+            this.$msg.createSuccess('保存成功！');
+            this.closeDialog();
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/base-data/print-template/index.vue b/src/views/base-data/print-template/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ce42ebc4b6ddaf2f5209300b5df1a09cd31f62d
--- /dev/null
+++ b/src/views/base-data/print-template/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <div v-permission="['base-data:print-template:query']">
+    <page-wrapper content-full-height fixed-height>
+      <!-- 数据列表 -->
+      <vxe-grid
+        id="PrintTemplate"
+        ref="grid"
+        resizable
+        show-overflow
+        highlight-hover-row
+        keep-source
+        row-id="id"
+        :proxy-config="proxyConfig"
+        :columns="tableColumn"
+        :toolbar-config="toolbarConfig"
+        :custom-config="{}"
+        :pager-config="{}"
+        :loading="loading"
+        height="auto"
+      >
+        <template #form>
+          <j-border>
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form-item label="名称">
+                <a-input v-model:value="searchFormData.name" allow-clear />
+              </j-form-item>
+            </j-form>
+          </j-border>
+        </template>
+        <!-- 工具栏 -->
+        <template #toolbar_buttons>
+          <a-space>
+            <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+            <a-button
+              v-permission="['base-data:print-template:add']"
+              type="primary"
+              :icon="h(PlusOutlined)"
+              @click="$refs.addDialog.openDialog()"
+              >新增</a-button
+            >
+          </a-space>
+        </template>
+
+        <!-- 操作 列自定义内容 -->
+        <template #action_default="{ row }">
+          <table-action outside :actions="createActions(row)" />
+        </template>
+      </vxe-grid>
+    </page-wrapper>
+
+    <!-- 新增窗口 -->
+    <add ref="addDialog" @confirm="search" />
+
+    <!-- 修改窗口 -->
+    <modify :id="id" ref="updateDialog" @confirm="search" />
+
+    <!-- 设置窗口 -->
+    <setting :id="id" ref="settingDialog" />
+
+    <demo-data :id="id" ref="demoDataDialog" />
+  </div>
+</template>
+
+<script>
+  import { h, defineComponent } from 'vue';
+  import Add from './add.vue';
+  import Modify from './modify.vue';
+  import Setting from './setting.vue';
+  import * as api from '@/api/base-data/print-template';
+  import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue';
+  import DemoData from './demo-data.vue';
+
+  export default defineComponent({
+    name: 'PrintTemplate',
+    components: {
+      Add,
+      Modify,
+      Setting,
+      DemoData,
+    },
+    setup() {
+      return {
+        h,
+        SearchOutlined,
+        PlusOutlined,
+      };
+    },
+    data() {
+      return {
+        loading: false,
+        // 当前行数据
+        id: '',
+        ids: [],
+        // 查询列表的查询条件
+        searchFormData: {},
+        // 工具栏配置
+        toolbarConfig: {
+          // 自定义左侧工具栏
+          slots: {
+            buttons: 'toolbar_buttons',
+          },
+        },
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 50 },
+          { field: 'name', title: '名称', minWidth: 160, sortable: true },
+          { title: '操作', width: 180, fixed: 'right', slots: { default: 'action_default' } },
+        ],
+        // 请求接口配置
+        proxyConfig: {
+          props: {
+            // 响应结果列表字段
+            result: 'datas',
+            // 响应结果总条数字段
+            total: 'totalCount',
+          },
+          ajax: {
+            // 查询接口
+            query: ({ page, sorts }) => {
+              return api.query(this.buildQueryParams(page, sorts));
+            },
+          },
+        },
+      };
+    },
+    created() {},
+    methods: {
+      // 列表发生查询时的事件
+      search() {
+        this.$refs.grid.commitProxy('reload');
+      },
+      // 查询前构建查询参数结构
+      buildQueryParams(page, sorts) {
+        return {
+          ...this.$utils.buildSortPageVo(page, sorts),
+          ...this.buildSearchFormData(),
+        };
+      },
+      // 查询前构建具体的查询参数
+      buildSearchFormData() {
+        return {
+          ...this.searchFormData,
+        };
+      },
+      createActions(row) {
+        return [
+          {
+            permission: ['base-data:print-template:modify'],
+            label: '修改',
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => this.$refs.updateDialog.openDialog());
+            },
+          },
+          {
+            permission: ['base-data:print-template:modify'],
+            label: '设置',
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => this.$refs.settingDialog.openDialog());
+            },
+          },
+          {
+            permission: ['base-data:print-template:modify'],
+            label: '示例数据',
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => this.$refs.demoDataDialog.openDialog());
+            },
+          },
+        ];
+      },
+    },
+  });
+</script>
+<style scoped></style>
diff --git a/src/views/base-data/print-template/modify.vue b/src/views/base-data/print-template/modify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e6bab6880b7b1419278ce4260783ea5c5434c3dc
--- /dev/null
+++ b/src/views/base-data/print-template/modify.vue
@@ -0,0 +1,123 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="修改"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-permission="['base-data:print-template:modify']" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/base-data/print-template';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          name: [{ required: true, message: '请输入名称' }],
+        },
+      };
+    },
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          name: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .update(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('修改成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      loadFormData() {
+        this.loading = true;
+        api
+          .get(this.id)
+          .then((data) => {
+            this.formData = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/base-data/print-template/setting.vue b/src/views/base-data/print-template/setting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..89b59492253f765b52856802f95c3edf78eb3dc4
--- /dev/null
+++ b/src/views/base-data/print-template/setting.vue
@@ -0,0 +1,143 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="100%"
+    title="设置"
+    :keyboard="false"
+    :style="{ top: '5px' }"
+    :footer="null"
+  >
+    <div
+      v-if="visible && inited"
+      v-permission="['base-data:print-template:modify']"
+      v-loading="loading"
+    >
+      <print-designer
+        ref="designer"
+        :temp-value="value"
+        :widget-options="widgets"
+        :demo-data="demoData"
+        @save="submit"
+      />
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/base-data/print-template';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        inited: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          name: [{ required: true, message: '请输入名称' }],
+        },
+        value: {
+          title: 'demo',
+          width: 750,
+          height: 550,
+          pageWidth: 750,
+          pageHeight: 550,
+          tempItems: [],
+        },
+        widgets: [],
+        demoData: {},
+      };
+    },
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          templateJson: '',
+        };
+
+        this.inited = false;
+      },
+      // 提交表单事件
+      submit(templateJson) {
+        this.loading = true;
+        this.formData.templateJson = JSON.stringify(templateJson || {});
+        api
+          .updateSetting({
+            id: this.formData.id,
+            templateJson: this.formData.templateJson,
+          })
+          .then(() => {
+            this.$msg.createSuccess('保存成功！');
+            this.$emit('confirm');
+            this.visible = false;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      loadFormData() {
+        this.loading = true;
+        Promise.all([api.getTemplateComp(this.id), api.getSetting(this.id)])
+          .then(([templateComp, setting]) => {
+            this.formData = setting;
+
+            this.value = this.formData.templateJson || {
+              title: '',
+              width: 750,
+              height: 550,
+              pageWidth: 750,
+              pageHeight: 550,
+              tempItems: [],
+            };
+
+            this.widgets = (templateComp || []).map((item) => item.compJson);
+
+            this.demoData = this.formData.demoData;
+          })
+          .finally(() => {
+            this.loading = false;
+
+            this.inited = true;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/base-data/product/brand/index.vue b/src/views/base-data/product/brand/index.vue
index 7b7c6db405cc16bfe06b09664822b3531b4b25a7..74babf9d98fa9b509c8db1eac5ae345c4b52409a 100644
--- a/src/views/base-data/product/brand/index.vue
+++ b/src/views/base-data/product/brand/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/product/category/index.vue b/src/views/base-data/product/category/index.vue
index 66312a41822c5815705598fce8182808f03fc572..bcbb7fbb083b31d2c0efd4e779357368e70ca7a8 100644
--- a/src/views/base-data/product/category/index.vue
+++ b/src/views/base-data/product/category/index.vue
@@ -32,7 +32,7 @@
 
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/product/info/add.vue b/src/views/base-data/product/info/add.vue
index c057f3782e6b974b240014cfe0dd310f3cb0b446..ddbf2e38c418cd1f9ba019d149c44445360dc08a 100644
--- a/src/views/base-data/product/info/add.vue
+++ b/src/views/base-data/product/info/add.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-loading="loading" v-permission="['base-data:product:info:add']">
       <a-form
         ref="form"
@@ -396,11 +396,14 @@
             {
               validator: (rule, value) => {
                 if (!this.$utils.isEmpty(value)) {
-                  if (!this.$utils.isInteger(value)) {
-                    return Promise.reject('销项税率（%）必须为整数');
+                  if (!this.$utils.isFloat(value)) {
+                    return Promise.reject('进项税率（%）必须为数字');
                   }
-                  if (!this.$utils.isIntegerGeZero(value)) {
-                    return Promise.reject('销项税率（%）不允许小于0');
+                  if (!this.$utils.isFloatGeZero(value)) {
+                    return Promise.reject('进项税率（%）不允许小于0');
+                  }
+                  if (!this.$utils.isNumberPrecision(value, 2)) {
+                    return Promise.reject('进项税率（%）最多允许2位小数');
                   }
                 }
 
@@ -413,12 +416,15 @@
             {
               validator: (rule, value) => {
                 if (!this.$utils.isEmpty(value)) {
-                  if (!this.$utils.isInteger(value)) {
-                    return Promise.reject('销项税率（%）必须为整数');
+                  if (!this.$utils.isFloat(value)) {
+                    return Promise.reject('销项税率（%）必须为数字');
                   }
-                  if (!this.$utils.isIntegerGeZero(value)) {
+                  if (!this.$utils.isFloatGeZero(value)) {
                     return Promise.reject('销项税率（%）不允许小于0');
                   }
+                  if (!this.$utils.isNumberPrecision(value, 2)) {
+                    return Promise.reject('销项税率（%）最多允许2位小数');
+                  }
                 }
 
                 return Promise.resolve();
diff --git a/src/views/base-data/product/info/index.vue b/src/views/base-data/product/info/index.vue
index b4fb6e7a7cf4096621f807a1672b7dd1a6145936..87751a63be71b2465868baf029b8dc9e20ef635a 100644
--- a/src/views/base-data/product/info/index.vue
+++ b/src/views/base-data/product/info/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="编号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/base-data/product/info/modify.vue b/src/views/base-data/product/info/modify.vue
index 5785ce0d015f438610d4d7f28af3acb66b302aa4..cd90dddaede906d59e2d397b7763f7144d64f4bc 100644
--- a/src/views/base-data/product/info/modify.vue
+++ b/src/views/base-data/product/info/modify.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-loading="loading" v-permission="['base-data:product:info:modify']">
       <a-form
         ref="form"
@@ -380,11 +380,14 @@
             {
               validator: (rule, value) => {
                 if (!this.$utils.isEmpty(value)) {
-                  if (!this.$utils.isInteger(value)) {
-                    return Promise.reject('销项税率（%）必须为整数');
+                  if (!this.$utils.isFloat(value)) {
+                    return Promise.reject('进项税率（%）必须为数字');
                   }
-                  if (!this.$utils.isIntegerGeZero(value)) {
-                    return Promise.reject('销项税率（%）不允许小于0');
+                  if (!this.$utils.isFloatGeZero(value)) {
+                    return Promise.reject('进项税率（%）不允许小于0');
+                  }
+                  if (!this.$utils.isNumberPrecision(value, 2)) {
+                    return Promise.reject('进项税率（%）最多允许2位小数');
                   }
                 }
 
@@ -397,12 +400,15 @@
             {
               validator: (rule, value) => {
                 if (!this.$utils.isEmpty(value)) {
-                  if (!this.$utils.isInteger(value)) {
-                    return Promise.reject('销项税率（%）必须为整数');
+                  if (!this.$utils.isFloat(value)) {
+                    return Promise.reject('销项税率（%）必须为数字');
                   }
-                  if (!this.$utils.isIntegerGeZero(value)) {
+                  if (!this.$utils.isFloatGeZero(value)) {
                     return Promise.reject('销项税率（%）不允许小于0');
                   }
+                  if (!this.$utils.isNumberPrecision(value, 2)) {
+                    return Promise.reject('销项税率（%）最多允许2位小数');
+                  }
                 }
 
                 return Promise.resolve();
diff --git a/src/views/base-data/product/property/index.vue b/src/views/base-data/product/property/index.vue
index 114611ce97519cd0da7694e67b7857dc04b7ac2c..f6b299b951c36d473785a0de75f63dfa3d69791e 100644
--- a/src/views/base-data/product/property/index.vue
+++ b/src/views/base-data/product/property/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/product/property/item/index.vue b/src/views/base-data/product/property/item/index.vue
index f607d697268e84589d66c8c16d9139664cf0aa35..18c423758061cb507a98cc140d4afd1f4209c45b 100644
--- a/src/views/base-data/product/property/item/index.vue
+++ b/src/views/base-data/product/property/item/index.vue
@@ -24,7 +24,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/shop/index.vue b/src/views/base-data/shop/index.vue
index ac0adf894d31b63f5b5dff823394d0a977583a58..0cdfff930f5a5b81ad10161e6fccb594ed5f4d2e 100644
--- a/src/views/base-data/shop/index.vue
+++ b/src/views/base-data/shop/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="编号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/base-data/store-center/index.vue b/src/views/base-data/store-center/index.vue
index ea3ecc5540a71780d943ef6e552a8b1b94a25b74..98dc91c9155ea0272fbf037a550a2e8013a38555 100644
--- a/src/views/base-data/store-center/index.vue
+++ b/src/views/base-data/store-center/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/base-data/supplier/index.vue b/src/views/base-data/supplier/index.vue
index cd694531a04b74f91c30f7ecc118d5b65eb4b4bf..7035faf5869b3240b26469a4daf3b4a2d98595dd 100644
--- a/src/views/base-data/supplier/index.vue
+++ b/src/views/base-data/supplier/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/bpm/flow/definition/add.vue b/src/views/bpm/flow/definition/add.vue
new file mode 100644
index 0000000000000000000000000000000000000000..25f291ce73b8d8f327aab5bba66b862f65da6f3d
--- /dev/null
+++ b/src/views/bpm/flow/definition/add.vue
@@ -0,0 +1,113 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="新增"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="流程编号" name="code">
+          <a-input v-model:value.trim="formData.code" allow-clear />
+        </a-form-item>
+        <a-form-item label="流程名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <a-form-item label="流程分类" name="categoryId">
+          <flow-category-selector v-model:value="formData.categoryId" only-final />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/bpm/flow/definition';
+  import { validCode } from '@/utils/validate';
+
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入流程编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入流程名称' }],
+          categoryId: [{ required: true, message: '请选择流程分类' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          code: '',
+          name: '',
+          categoryId: '',
+        };
+      },
+      // 页面显示时由父页面触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+      },
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.$msg.createConfirm('新增后流程编号将不可修改，确定新增？').then(() => {
+              this.loading = true;
+              api
+                .create(this.formData)
+                .then(() => {
+                  this.$msg.createSuccess('新增成功！');
+                  this.$emit('confirm');
+                  this.closeDialog();
+                })
+                .finally(() => {
+                  this.loading = false;
+                });
+            });
+          }
+        });
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/category-tree.vue b/src/views/bpm/flow/definition/category-tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0d890155e4e8ee33fe8d7208c9bbae70153ad68e
--- /dev/null
+++ b/src/views/bpm/flow/definition/category-tree.vue
@@ -0,0 +1,120 @@
+<template>
+  <a-card :body-style="{ height: height + 'px', padding: '10px' }">
+    <a-tree
+      v-if="!loading"
+      :tree-data="treeData"
+      default-expand-all
+      show-line
+      :default-expanded-keys="expandedKeys"
+      v-model:selectedKeys="selectedKeys"
+      :field-names="{
+        children: 'children',
+        title: 'name',
+        key: 'id',
+      }"
+      @select="onSelect"
+    >
+      <template #title="{ id: treeKey, name, parentId }">
+        <a-dropdown :trigger="['contextmenu']">
+          <span>{{ name }}</span>
+          <template #overlay>
+            <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+              <a-menu-item
+                v-if="$utils.isEqualWithStr(0, treeKey) || $utils.isEmpty(parentId)"
+                key="1"
+                >新增子项</a-menu-item
+              >
+              <a-menu-item v-if="!$utils.isEqualWithStr(0, treeKey)" key="2">编辑</a-menu-item>
+              <a-menu-item v-if="!$utils.isEqualWithStr(0, treeKey)" key="3">删除</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </template>
+    </a-tree>
+    <add-category
+      ref="addCategoryDialog"
+      :parent-id="parentId"
+      :parent-name="parentName"
+      @confirm="doSearch"
+    />
+    <modify-category :id="id" ref="updateCategoryDialog" @confirm="doSearch" />
+  </a-card>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import AddCategory from './category/add.vue';
+  import ModifyCategory from './category/modify.vue';
+  import * as api from '@/api/bpm/flow/flow-category';
+
+  export default defineComponent({
+    components: {
+      AddCategory,
+      ModifyCategory,
+    },
+    props: {
+      height: {
+        type: Number,
+        default: 100,
+      },
+    },
+    data() {
+      return {
+        loading: false,
+        treeData: [
+          {
+            id: 0,
+            name: '全部分类',
+            children: [],
+          },
+        ],
+        expandedKeys: [0],
+        selectedKeys: [],
+        id: '',
+        parentId: undefined,
+        parentName: '',
+      };
+    },
+    created() {
+      this.doSearch();
+    },
+    methods: {
+      onContextMenuClick(treeKey, menuKey) {
+        if (menuKey === '1') {
+          const allList = this.$utils.toTreeArray(this.treeData);
+          const treeNode = allList.filter((item) => item.id === treeKey)[0];
+          this.parentId = treeNode.id;
+          this.parentName = treeNode.name;
+
+          this.$refs.addCategoryDialog.openDialog();
+        } else if (menuKey === '2') {
+          this.id = treeKey;
+          this.$refs.updateCategoryDialog.openDialog();
+        } else if (menuKey === '3') {
+          this.$msg.createConfirm('是否确认删除此分类？').then(() => {
+            api.deleteById(treeKey).then(() => {
+              this.$msg.createSuccess('删除成功！');
+              this.doSearch();
+            });
+          });
+        }
+      },
+      doSearch() {
+        this.loading = true;
+        api
+          .query()
+          .then((res) => {
+            const flowCategoryTree = this.$utils.toArrayTree(res || []);
+            this.treeData[0].children = [
+              ...flowCategoryTree.map((item) => Object.assign({ parentId: '' }, item)),
+            ];
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+      onSelect(keys) {
+        this.$emit('change', keys[0]);
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/category/add.vue b/src/views/bpm/flow/definition/category/add.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8e626733745a9f9957d63f44b4feacbb574db843
--- /dev/null
+++ b/src/views/bpm/flow/definition/category/add.vue
@@ -0,0 +1,117 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="新增"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <a-form-item label="父级分类">
+          <a-input v-model:value.trim="parentName" allow-clear disabled />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/bpm/flow/flow-category';
+
+  export default defineComponent({
+    components: {},
+    props: {
+      parentId: {
+        type: Number,
+        default: undefined,
+      },
+      parentName: {
+        type: String,
+        default: undefined,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          name: [{ required: true, message: '请输入名称' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          name: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .create({
+                ...this.formData,
+                parentId: this.parentId,
+              })
+              .then(() => {
+                this.$msg.createSuccess('新增成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/category/modify.vue b/src/views/bpm/flow/definition/category/modify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab310757d3126ed695cf96706b379811abc492de
--- /dev/null
+++ b/src/views/bpm/flow/definition/category/modify.vue
@@ -0,0 +1,127 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="修改"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/bpm/flow/flow-category';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          name: [{ required: true, message: '请输入名称' }],
+        },
+      };
+    },
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => {
+          this.$nextTick(() => this.open());
+        });
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          name: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .update(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('修改成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      loadFormData() {
+        this.columnTypeDisabled = false;
+
+        this.loading = true;
+        api
+          .detail(this.id)
+          .then((data) => {
+            this.formData = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/copy.vue b/src/views/bpm/flow/definition/copy.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7939a3e0656eee17a71961016e2c344935566ed
--- /dev/null
+++ b/src/views/bpm/flow/definition/copy.vue
@@ -0,0 +1,132 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="生成新版本"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="流程编号" name="code">
+          <a-input v-model:value.trim="formData.code" disabled />
+        </a-form-item>
+        <a-form-item label="流程名称" name="name">
+          <a-input v-model:value.trim="formData.name" />
+        </a-form-item>
+        <a-form-item label="流程分类" name="categoryId">
+          <flow-category-selector v-model:value="formData.categoryId" only-final />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/bpm/flow/definition';
+  import { validCode } from '@/utils/validate';
+
+  export default defineComponent({
+    components: {},
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入流程编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入流程名称' }],
+          categoryId: [{ required: true, message: '请选择流程分类' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          code: '',
+          name: '',
+          categoryId: '',
+          categoryName: '',
+        };
+      },
+      // 页面显示时由父页面触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+
+        this.loadData();
+      },
+      loadData() {
+        this.loading = true;
+        api
+          .detail(this.id)
+          .then((res) => {
+            this.formData = res;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .copy(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('生成成功！');
+                this.$emit('confirm');
+                this.closeDialog();
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/design.vue b/src/views/bpm/flow/definition/design.vue
new file mode 100644
index 0000000000000000000000000000000000000000..29c010bf1fd4f7e2ad139bb46c8ad3ea5a70ad10
--- /dev/null
+++ b/src/views/bpm/flow/definition/design.vue
@@ -0,0 +1,113 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="100%"
+    title="流程设计"
+    :style="{ top: '0px' }"
+    :body-style="{ height: 100 * $vh + 'px', overflow: 'auto' }"
+    :footer="null"
+  >
+    <iframe
+      v-if="visible && !loading"
+      class="w-full h-full"
+      scrolling="no"
+      :src="
+        apiUrl +
+        '/warm-flow-ui/index.html?id=' +
+        id +
+        '&disabled=' +
+        !$enums.FLOW_DEFINITION_IS_PUBLISH.N.equalsCode(formData.isPublish) +
+        '&token=' +
+        token +
+        '&uuid=' +
+        $utils.uuid()
+      "
+    ></iframe>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { getToken } from '@/utils/auth';
+  import * as api from '@/api/bpm/flow/definition';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+      };
+    },
+    computed: {
+      apiUrl() {
+        const { apiUrl, cloudEnable } = useGlobSetting();
+
+        return `${apiUrl}${cloudEnable === 'true' ? '/cloud-api' : ''}`;
+      },
+      token() {
+        return getToken();
+      },
+    },
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          code: '',
+          name: '',
+          categoryId: '',
+          categoryName: '',
+          isPublish: '',
+        };
+      },
+      // 页面显示时由父页面触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      loadFormData() {
+        this.loading = true;
+        api
+          .detail(this.id)
+          .then((data) => {
+            this.formData = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/detail.vue b/src/views/bpm/flow/definition/detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..12aba37ca3161aed1a50c7f1501b44e54f7c531f
--- /dev/null
+++ b/src/views/bpm/flow/definition/detail.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="查看"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible">
+      <a-descriptions :column="4" bordered>
+        <a-descriptions-item label="名称" :span="4">
+          {{ formData.name }}
+        </a-descriptions-item>
+        <a-descriptions-item label="分类" :span="2">
+          {{ formData.categoryName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="状态" :span="2">
+          <available-tag :available="formData.available" />
+        </a-descriptions-item>
+        <a-descriptions-item label="备注" :span="4">
+          {{ formData.description }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/development/data/entity';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+      };
+    },
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          code: '',
+          name: '',
+          categoryName: '',
+          available: '',
+          description: '',
+        };
+      },
+      // 页面显示时由父页面触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      loadFormData() {
+        this.loading = true;
+        api
+          .get(this.id)
+          .then((data) => {
+            this.formData = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/index.vue b/src/views/bpm/flow/definition/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d7d278bd5e6b049c8ba27f5f79f34a85bbbc5840
--- /dev/null
+++ b/src/views/bpm/flow/definition/index.vue
@@ -0,0 +1,397 @@
+<template>
+  <div>
+    <div v-show="visible">
+      <a-row>
+        <a-col :span="4">
+          <page-wrapper content-full-height fixed-height content-class="!mr-0">
+            <category-tree style="height: 100%" @change="(e) => doSearch(e)" />
+          </page-wrapper>
+        </a-col>
+        <a-col :span="20">
+          <page-wrapper content-full-height fixed-height>
+            <!-- 数据列表 -->
+            <vxe-grid
+              id="DesignFlowDefinition"
+              ref="grid"
+              resizable
+              show-overflow
+              highlight-hover-row
+              keep-source
+              row-id="id"
+              :proxy-config="proxyConfig"
+              :columns="tableColumn"
+              :toolbar-config="toolbarConfig"
+              :custom-config="{}"
+              :pager-config="{}"
+              :loading="loading"
+              height="auto"
+            >
+              <template #form>
+                <j-border>
+                  <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                    <j-form-item label="流程编号">
+                      <a-input v-model:value="searchFormData.code" allow-clear />
+                    </j-form-item>
+                    <j-form-item label="流程名称">
+                      <a-input v-model:value="searchFormData.name" allow-clear />
+                    </j-form-item>
+                    <j-form-item label="版本号">
+                      <a-input v-model:value="searchFormData.version" allow-clear />
+                    </j-form-item>
+                    <j-form-item label="是否发布">
+                      <a-select
+                        placeholder="全部"
+                        v-model:value="searchFormData.isPublish"
+                        allow-clear
+                      >
+                        <a-select-option
+                          v-for="item in $enums.FLOW_DEFINITION_IS_PUBLISH.values()"
+                          :key="item.code"
+                          :value="item.code"
+                          >{{ item.desc }}</a-select-option
+                        >
+                      </a-select>
+                    </j-form-item>
+                    <j-form-item label="激活状态">
+                      <a-select
+                        placeholder="全部"
+                        v-model:value="searchFormData.activityStatus"
+                        allow-clear
+                      >
+                        <a-select-option
+                          v-for="item in $enums.FLOW_DEFINITION_ACTIVITY_STATUS.values()"
+                          :key="item.code"
+                          :value="item.code"
+                          >{{ item.desc }}</a-select-option
+                        >
+                      </a-select>
+                    </j-form-item>
+                    <j-form-item label="版本号">
+                      <a-input v-model:value="searchFormData.version" allow-clear />
+                    </j-form-item>
+                  </j-form>
+                </j-border>
+              </template>
+              <!-- 工具栏 -->
+              <template #toolbar_buttons>
+                <a-space>
+                  <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+                  <a-button
+                    type="primary"
+                    :icon="h(PlusOutlined)"
+                    @click="$refs.addDialog.openDialog()"
+                    >新增</a-button
+                  >
+                </a-space>
+              </template>
+
+              <!-- 操作 列自定义内容 -->
+              <template #action_default="{ row }">
+                <table-action outside :actions="createActions(row)" />
+              </template>
+            </vxe-grid>
+          </page-wrapper>
+        </a-col>
+      </a-row>
+
+      <!-- 新增窗口 -->
+      <add ref="addDialog" @confirm="search" />
+
+      <!-- 修改窗口 -->
+      <modify :id="id" ref="updateDialog" @confirm="search" />
+
+      <!-- 复制窗口 -->
+      <copy :id="id" ref="copyDialog" @confirm="search" />
+
+      <!-- 流程设计窗口 -->
+      <design :id="id" ref="designDialog" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { h, defineComponent } from 'vue';
+  import Add from './add.vue';
+  import Modify from './modify.vue';
+  import Design from './design.vue';
+  import Copy from './copy.vue';
+  import CategoryTree from './category-tree.vue';
+  import { SearchOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/bpm/flow/definition';
+
+  export default defineComponent({
+    name: 'DesignFlowDefinition',
+    // 使用组件
+    components: {
+      Add,
+      Modify,
+      Design,
+      Copy,
+      CategoryTree,
+    },
+    setup() {
+      return {
+        h,
+        SearchOutlined,
+        PlusOutlined,
+        DeleteOutlined,
+      };
+    },
+    data() {
+      return {
+        // 当前行数据
+        id: '',
+        // 是否显示加载框
+        loading: false,
+        visible: true,
+        // 查询列表的查询条件
+        searchFormData: {
+          code: '',
+          name: '',
+          version: '',
+        },
+        // 工具栏配置
+        toolbarConfig: {
+          // 自定义左侧工具栏
+          slots: {
+            buttons: 'toolbar_buttons',
+          },
+        },
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 45 },
+          { field: 'flowCode', title: '流程编号', width: 100 },
+          { field: 'flowName', title: '流程名称', minWidth: 180 },
+          { field: 'categoryName', title: '流程分类', width: 120 },
+          { field: 'version', title: '版本号', width: 60 },
+          {
+            field: 'isPublish',
+            title: '是否发布',
+            width: 80,
+            formatter: ({ cellValue }) => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.getDesc(cellValue);
+            },
+          },
+          {
+            field: 'activityStatus',
+            title: '激活状态',
+            width: 80,
+            formatter: ({ cellValue }) => {
+              return this.$enums.FLOW_DEFINITION_ACTIVITY_STATUS.getDesc(cellValue);
+            },
+          },
+          { field: 'createTime', title: '创建时间', width: 170 },
+          { title: '操作', width: 340, fixed: 'right', slots: { default: 'action_default' } },
+        ],
+        // 请求接口配置
+        proxyConfig: {
+          props: {
+            // 响应结果列表字段
+            result: 'datas',
+            // 响应结果总条数字段
+            total: 'totalCount',
+          },
+          ajax: {
+            // 查询接口
+            query: ({ page }) => {
+              return api.query(this.buildQueryParams(page));
+            },
+          },
+        },
+        batchHandleDatas: [],
+      };
+    },
+    created() {},
+    methods: {
+      // 列表发生查询时的事件
+      search() {
+        this.$refs.grid.commitProxy('reload');
+      },
+      doSearch(categoryId) {
+        if (!this.$utils.isEmpty(categoryId)) {
+          if (this.$utils.isEqualWithStr(0, categoryId)) {
+            this.searchFormData.categoryId = '';
+          } else {
+            this.searchFormData.categoryId = categoryId;
+          }
+        } else {
+          this.searchFormData.categoryId = '';
+        }
+
+        this.search();
+      },
+      // 查询前构建查询参数结构
+      buildQueryParams(page) {
+        return Object.assign(
+          {
+            pageIndex: page.currentPage,
+            pageSize: page.pageSize,
+          },
+          this.buildSearchFormData(),
+        );
+      },
+      // 查询前构建具体的查询参数
+      buildSearchFormData() {
+        return Object.assign({}, this.searchFormData);
+      },
+      // 删除
+      deleteRow(row) {
+        this.$msg.createConfirm('是否确定删除该流程？').then(() => {
+          this.loading = true;
+          api
+            .deleteById(row.id)
+            .then(() => {
+              this.$msg.createSuccess('删除成功！');
+              this.search();
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        });
+      },
+      createActions(row) {
+        return [
+          {
+            label: '流程设计',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.N.equalsCode(row.isPublish);
+            },
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => {
+                this.$refs.designDialog.openDialog();
+              });
+            },
+          },
+          {
+            label: '查看',
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => {
+                this.$refs.designDialog.openDialog();
+              });
+            },
+          },
+          {
+            label: '修改',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.N.equalsCode(row.isPublish);
+            },
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => {
+                this.$refs.updateDialog.openDialog();
+              });
+            },
+          },
+          {
+            label: '发布',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.N.equalsCode(row.isPublish);
+            },
+            onClick: () => {
+              this.$msg.createConfirm('是否确定发布该流程？').then(() => {
+                api
+                  .setPublishStatus({
+                    id: row.id,
+                    isPublish: this.$enums.FLOW_DEFINITION_IS_PUBLISH.Y.code,
+                  })
+                  .then(() => {
+                    this.$msg.createSuccess('发布成功！');
+
+                    this.search();
+                  });
+              });
+            },
+          },
+          {
+            label: '取消发布',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.Y.equalsCode(row.isPublish);
+            },
+            onClick: () => {
+              this.$msg.createConfirm('是否确定取消发布该流程？').then(() => {
+                api
+                  .setPublishStatus({
+                    id: row.id,
+                    isPublish: this.$enums.FLOW_DEFINITION_IS_PUBLISH.N.code,
+                  })
+                  .then(() => {
+                    this.$msg.createSuccess('取消发布成功！');
+
+                    this.search();
+                  });
+              });
+            },
+          },
+          {
+            label: '激活',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_ACTIVITY_STATUS.DEACTIVATE.equalsCode(
+                row.activityStatus,
+              );
+            },
+            onClick: () => {
+              this.$msg.createConfirm('是否确定激活该流程？').then(() => {
+                api
+                  .setActivityStatus({
+                    id: row.id,
+                    activityStatus: this.$enums.FLOW_DEFINITION_ACTIVITY_STATUS.ACTIVATE.code,
+                  })
+                  .then(() => {
+                    this.$msg.createSuccess('激活成功！');
+
+                    this.search();
+                  });
+              });
+            },
+          },
+          {
+            label: '挂起',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_ACTIVITY_STATUS.ACTIVATE.equalsCode(
+                row.activityStatus,
+              );
+            },
+            onClick: () => {
+              this.$msg.createConfirm('是否确定挂起该流程？').then(() => {
+                api
+                  .setActivityStatus({
+                    id: row.id,
+                    activityStatus: this.$enums.FLOW_DEFINITION_ACTIVITY_STATUS.DEACTIVATE.code,
+                  })
+                  .then(() => {
+                    this.$msg.createSuccess('挂起成功！');
+
+                    this.search();
+                  });
+              });
+            },
+          },
+          {
+            label: '生成新版本',
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.Y.equalsCode(row.isPublish);
+            },
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => {
+                this.$refs.copyDialog.openDialog();
+              });
+            },
+          },
+          {
+            label: '删除',
+            danger: true,
+            ifShow: () => {
+              return this.$enums.FLOW_DEFINITION_IS_PUBLISH.N.equalsCode(row.isPublish);
+            },
+            onClick: () => {
+              this.deleteRow(row);
+            },
+          },
+        ];
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/definition/modify.vue b/src/views/bpm/flow/definition/modify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1008f5946f7f3d0b4df659fd7a355cb5fbf94904
--- /dev/null
+++ b/src/views/bpm/flow/definition/modify.vue
@@ -0,0 +1,132 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="修改"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="流程编号" name="code">
+          <a-input v-model:value.trim="formData.code" disabled />
+        </a-form-item>
+        <a-form-item label="流程名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <a-form-item label="流程分类" name="categoryId">
+          <flow-category-selector v-model:value="formData.categoryId" only-final />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/bpm/flow/definition';
+  import { validCode } from '@/utils/validate';
+
+  export default defineComponent({
+    components: {},
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入流程编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入流程名称' }],
+          categoryId: [{ required: true, message: '请选择流程分类' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          code: '',
+          name: '',
+          categoryId: '',
+          categoryName: '',
+        };
+      },
+      // 页面显示时由父页面触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+
+        this.loadData();
+      },
+      loadData() {
+        this.loading = true;
+        api
+          .detail(this.id)
+          .then((res) => {
+            this.formData = res;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .update(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('修改成功！');
+                this.$emit('confirm');
+                this.closeDialog();
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/instance/manage/index.vue b/src/views/bpm/flow/instance/manage/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bcbb546fbef02b778588d6e6b7167e1b1c8230eb
--- /dev/null
+++ b/src/views/bpm/flow/instance/manage/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <div v-show="visible">
+      <page-wrapper content-full-height fixed-height>
+        <!-- 数据列表 -->
+        <vxe-grid
+          id="FlowInstanceManage"
+          ref="grid"
+          resizable
+          show-overflow
+          highlight-hover-row
+          keep-source
+          row-id="id"
+          :proxy-config="proxyConfig"
+          :columns="tableColumn"
+          :toolbar-config="toolbarConfig"
+          :custom-config="{}"
+          :pager-config="{}"
+          :loading="loading"
+          height="auto"
+        >
+          <template #form>
+            <j-border>
+              <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                <j-form-item label="流程编号">
+                  <a-input v-model:value="searchFormData.flowCode" allow-clear />
+                </j-form-item>
+                <j-form-item label="流程名称">
+                  <a-input v-model:value="searchFormData.flowName" allow-clear />
+                </j-form-item>
+                <j-form-item label="标题">
+                  <a-input v-model:value="searchFormData.title" allow-clear />
+                </j-form-item>
+              </j-form>
+            </j-border>
+          </template>
+          <!-- 工具栏 -->
+          <template #toolbar_buttons>
+            <a-space>
+              <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+            </a-space>
+          </template>
+
+          <!-- 操作 列自定义内容 -->
+          <template #action_default="{ row }">
+            <table-action outside :actions="createActions(row)" />
+          </template>
+        </vxe-grid>
+      </page-wrapper>
+    </div>
+    <bpm-approve
+      ref="systemApproveDialog"
+      :instance-id="instanceId"
+      :business-id="businessId"
+      :component-path="componentPath"
+      page-from="my"
+      @confirm="search"
+    />
+  </div>
+</template>
+
+<script>
+  import { h, defineComponent } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/bpm/flow/task';
+  import { multiplePageMix } from '@/mixins/multiplePageMix';
+  import { getSysFlowComponentPath } from '@/views/bpm/flow/task/common';
+
+  export default defineComponent({
+    name: 'FlowInstanceManage',
+    // 使用组件
+    components: {},
+    mixins: [multiplePageMix],
+    setup() {
+      return {
+        h,
+        SearchOutlined,
+      };
+    },
+    data() {
+      return {
+        // 当前行数据
+        id: '',
+        instanceId: '',
+        businessId: '',
+        componentPath: '',
+        // 是否显示加载框
+        loading: false,
+        visible: true,
+        // 查询列表的查询条件
+        searchFormData: {
+          flowCode: '',
+          flowName: '',
+          title: '',
+        },
+        // 工具栏配置
+        toolbarConfig: {
+          // 自定义左侧工具栏
+          slots: {
+            buttons: 'toolbar_buttons',
+          },
+        },
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 45 },
+          { field: 'flowCode', title: '流程编号', width: 100 },
+          { field: 'flowName', title: '流程名称', width: 120 },
+          { field: 'title', title: '标题', minWidth: 180 },
+          { field: 'categoryName', title: '流程分类', width: 120 },
+          { field: 'nodeName', title: '节点名称', width: 120 },
+          {
+            field: 'flowStatus',
+            title: '流程状态',
+            width: 100,
+            formatter: ({ cellValue }) => this.$enums.FLOW_INSTANCE_STATUS.getDesc(cellValue),
+          },
+          { field: 'startBy', title: '发起人', width: 100 },
+          { field: 'startTime', title: '发起时间', width: 170 },
+          { field: 'endTime', title: '结束时间', width: 170 },
+          { field: 'executeTime', title: '审核时长', width: 120 },
+          { title: '操作', width: 100, fixed: 'right', slots: { default: 'action_default' } },
+        ],
+        // 请求接口配置
+        proxyConfig: {
+          props: {
+            // 响应结果列表字段
+            result: 'datas',
+            // 响应结果总条数字段
+            total: 'totalCount',
+          },
+          ajax: {
+            // 查询接口
+            query: ({ page }) => {
+              return api.queryInstanceList(this.buildQueryParams(page));
+            },
+          },
+        },
+        batchHandleDatas: [],
+      };
+    },
+    created() {},
+    methods: {
+      // 列表发生查询时的事件
+      search() {
+        this.$refs.grid.commitProxy('reload');
+      },
+      // 查询前构建查询参数结构
+      buildQueryParams(page) {
+        return Object.assign(
+          {
+            pageIndex: page.currentPage,
+            pageSize: page.pageSize,
+          },
+          this.buildSearchFormData(),
+        );
+      },
+      // 查询前构建具体的查询参数
+      buildSearchFormData() {
+        return Object.assign({}, this.searchFormData);
+      },
+      // 删除
+      createActions(row) {
+        return [
+          {
+            label: '查看',
+            onClick: () => {
+              this.instanceId = row.instanceId;
+              this.businessId = row.businessId;
+              const ext = JSON.parse(row.ext || '{}');
+              if (this.$enums.FLOW_DEFINITION_EXT_BIZ_TYPE.SYSTEM.equalsCode(ext.bizType)) {
+                this.componentPath = getSysFlowComponentPath(ext.bizFlag);
+                this.$refs.systemApproveDialog.openDialog();
+              }
+            },
+          },
+          {
+            label: '终止',
+            danger: true,
+            ifShow: () => {
+              return this.$enums.FLOW_INSTANCE_STATUS.APPROVING.equalsCode(row.flowStatus);
+            },
+            onClick: () => {
+              this.instanceId = row.instanceId;
+              this.businessId = row.businessId;
+              this.$msg.createConfirm('是否确定终止该流程？').then(() => {
+                this.loading = true;
+                api
+                  .termination(this.instanceId)
+                  .then(() => {
+                    this.$msg.createSuccess('终止成功！');
+                    this.search();
+                  })
+                  .finally(() => {
+                    this.loading = false;
+                  });
+              });
+            },
+          },
+        ];
+      },
+      onRefreshPage() {
+        this.search();
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/task/common.js b/src/views/bpm/flow/task/common.js
new file mode 100644
index 0000000000000000000000000000000000000000..ebd7d22816894cc20ec0ed5ccae99dbbe655981f
--- /dev/null
+++ b/src/views/bpm/flow/task/common.js
@@ -0,0 +1,15 @@
+export const getSysFlowComponentPath = (bizFlag) => {
+  if (bizFlag === 'PurchaseOrder') {
+    return 'PurchaseOrderViewer';
+  }
+
+  return;
+};
+
+export const getSysFlowRestartRouter = (bizFlag, businessId) => {
+  if (bizFlag === 'PurchaseOrder') {
+    return '/purchase/order/modify/' + businessId + '?isForm=true';
+  }
+
+  return;
+};
diff --git a/src/views/bpm/flow/task/my/index.vue b/src/views/bpm/flow/task/my/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32440560d0ba1673318a7fb9209bc3d0a6c3d209
--- /dev/null
+++ b/src/views/bpm/flow/task/my/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <div v-show="visible">
+      <page-wrapper content-full-height fixed-height>
+        <!-- 数据列表 -->
+        <vxe-grid
+          id="MyFlow"
+          ref="grid"
+          resizable
+          show-overflow
+          highlight-hover-row
+          keep-source
+          row-id="id"
+          :proxy-config="proxyConfig"
+          :columns="tableColumn"
+          :toolbar-config="toolbarConfig"
+          :custom-config="{}"
+          :pager-config="{}"
+          :loading="loading"
+          height="auto"
+        >
+          <template #form>
+            <j-border>
+              <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                <j-form-item label="流程编号">
+                  <a-input v-model:value="searchFormData.flowCode" allow-clear />
+                </j-form-item>
+                <j-form-item label="流程名称">
+                  <a-input v-model:value="searchFormData.flowName" allow-clear />
+                </j-form-item>
+                <j-form-item label="标题">
+                  <a-input v-model:value="searchFormData.title" allow-clear />
+                </j-form-item>
+              </j-form>
+            </j-border>
+          </template>
+          <!-- 工具栏 -->
+          <template #toolbar_buttons>
+            <a-space>
+              <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+            </a-space>
+          </template>
+
+          <!-- 操作 列自定义内容 -->
+          <template #action_default="{ row }">
+            <table-action outside :actions="createActions(row)" />
+          </template>
+        </vxe-grid>
+      </page-wrapper>
+    </div>
+    <bpm-approve
+      ref="systemApproveDialog"
+      :instance-id="instanceId"
+      :business-id="businessId"
+      :component-path="componentPath"
+      page-from="my"
+      @confirm="search"
+    />
+  </div>
+</template>
+
+<script>
+  import { h, defineComponent } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/bpm/flow/task';
+  import { multiplePageMix } from '@/mixins/multiplePageMix';
+  import { getSysFlowComponentPath, getSysFlowRestartRouter } from '@/views/bpm/flow/task/common';
+
+  export default defineComponent({
+    name: 'MyFlow',
+    // 使用组件
+    components: {},
+    mixins: [multiplePageMix],
+    setup() {
+      return {
+        h,
+        SearchOutlined,
+      };
+    },
+    data() {
+      return {
+        // 当前行数据
+        id: '',
+        instanceId: '',
+        businessId: '',
+        componentPath: '',
+        // 是否显示加载框
+        loading: false,
+        visible: true,
+        // 查询列表的查询条件
+        searchFormData: {
+          flowCode: '',
+          flowName: '',
+          title: '',
+        },
+        // 工具栏配置
+        toolbarConfig: {
+          // 自定义左侧工具栏
+          slots: {
+            buttons: 'toolbar_buttons',
+          },
+        },
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 45 },
+          { field: 'flowCode', title: '流程编号', width: 100 },
+          { field: 'flowName', title: '流程名称', width: 120 },
+          { field: 'title', title: '标题', minWidth: 180 },
+          { field: 'categoryName', title: '流程分类', width: 120 },
+          { field: 'nodeName', title: '节点名称', width: 120 },
+          {
+            field: 'flowStatus',
+            title: '流程状态',
+            width: 100,
+            formatter: ({ cellValue }) => this.$enums.FLOW_INSTANCE_STATUS.getDesc(cellValue),
+          },
+          { field: 'startBy', title: '发起人', width: 100 },
+          { field: 'startTime', title: '发起时间', width: 170 },
+          { field: 'endTime', title: '结束时间', width: 170 },
+          { field: 'executeTime', title: '审核时长', width: 120 },
+          { title: '操作', width: 130, fixed: 'right', slots: { default: 'action_default' } },
+        ],
+        // 请求接口配置
+        proxyConfig: {
+          props: {
+            // 响应结果列表字段
+            result: 'datas',
+            // 响应结果总条数字段
+            total: 'totalCount',
+          },
+          ajax: {
+            // 查询接口
+            query: ({ page }) => {
+              return api.queryMyList(this.buildQueryParams(page));
+            },
+          },
+        },
+        batchHandleDatas: [],
+      };
+    },
+    created() {},
+    methods: {
+      // 列表发生查询时的事件
+      search() {
+        this.$refs.grid.commitProxy('reload');
+      },
+      // 查询前构建查询参数结构
+      buildQueryParams(page) {
+        return Object.assign(
+          {
+            pageIndex: page.currentPage,
+            pageSize: page.pageSize,
+          },
+          this.buildSearchFormData(),
+        );
+      },
+      // 查询前构建具体的查询参数
+      buildSearchFormData() {
+        return Object.assign({}, this.searchFormData);
+      },
+      // 删除
+      createActions(row) {
+        return [
+          {
+            label: '查看',
+            onClick: () => {
+              this.instanceId = row.instanceId;
+              this.businessId = row.businessId;
+              const ext = JSON.parse(row.ext || '{}');
+              if (this.$enums.FLOW_DEFINITION_EXT_BIZ_TYPE.SYSTEM.equalsCode(ext.bizType)) {
+                this.componentPath = getSysFlowComponentPath(ext.bizFlag);
+                this.$refs.systemApproveDialog.openDialog();
+              }
+            },
+          },
+          {
+            label: '重新发起',
+            ifShow: () => {
+              return (
+                this.$enums.FLOW_INSTANCE_STATUS.TERMINATION.equalsCode(row.flowStatus) ||
+                this.$enums.FLOW_INSTANCE_STATUS.UNDO.equalsCode(row.flowStatus) ||
+                this.$enums.FLOW_INSTANCE_STATUS.REFUSE.equalsCode(row.flowStatus) ||
+                this.$enums.FLOW_INSTANCE_STATUS.REVOKE.equalsCode(row.flowStatus)
+              );
+            },
+            onClick: () => {
+              this.instanceId = row.instanceId;
+              this.businessId = row.businessId;
+              const ext = JSON.parse(row.ext || '{}');
+              if (this.$enums.FLOW_DEFINITION_EXT_BIZ_TYPE.SYSTEM.equalsCode(ext.bizType)) {
+                const routeUrl = getSysFlowRestartRouter(ext.bizFlag, this.businessId);
+                this.openChildPage(routeUrl);
+              }
+            },
+          },
+        ];
+      },
+      onRefreshPage() {
+        this.search();
+      },
+    },
+  });
+</script>
diff --git a/src/views/bpm/flow/task/todo/index.vue b/src/views/bpm/flow/task/todo/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e644e7436b732bec7878f1a63222b13b9b5129c8
--- /dev/null
+++ b/src/views/bpm/flow/task/todo/index.vue
@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <div v-show="visible">
+      <page-wrapper content-full-height fixed-height>
+        <!-- 数据列表 -->
+        <vxe-grid
+          id="FlowTodo"
+          ref="grid"
+          resizable
+          show-overflow
+          highlight-hover-row
+          keep-source
+          row-id="id"
+          :proxy-config="proxyConfig"
+          :columns="tableColumn"
+          :toolbar-config="toolbarConfig"
+          :custom-config="{}"
+          :pager-config="{}"
+          :loading="loading"
+          height="auto"
+        >
+          <template #form>
+            <j-border>
+              <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                <j-form-item label="流程编号">
+                  <a-input v-model:value="searchFormData.flowCode" allow-clear />
+                </j-form-item>
+                <j-form-item label="流程名称">
+                  <a-input v-model:value="searchFormData.flowName" allow-clear />
+                </j-form-item>
+                <j-form-item label="标题">
+                  <a-input v-model:value="searchFormData.title" allow-clear />
+                </j-form-item>
+              </j-form>
+            </j-border>
+          </template>
+          <!-- 工具栏 -->
+          <template #toolbar_buttons>
+            <a-space>
+              <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+            </a-space>
+          </template>
+
+          <!-- 操作 列自定义内容 -->
+          <template #action_default="{ row }">
+            <table-action outside :actions="createActions(row)" />
+          </template>
+        </vxe-grid>
+      </page-wrapper>
+    </div>
+    <bpm-approve
+      ref="systemApproveDialog"
+      :task-id="taskId"
+      :instance-id="instanceId"
+      :business-id="businessId"
+      :component-path="componentPath"
+      page-from="todo"
+      @confirm="search"
+    />
+  </div>
+</template>
+
+<script>
+  import { h, defineComponent } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import * as api from '@/api/bpm/flow/task';
+  import { multiplePageMix } from '@/mixins/multiplePageMix';
+  import { getSysFlowComponentPath } from '@/views/bpm/flow/task/common';
+
+  export default defineComponent({
+    name: 'FlowTodo',
+    // 使用组件
+    components: {},
+    mixins: [multiplePageMix],
+    setup() {
+      return {
+        h,
+        SearchOutlined,
+      };
+    },
+    data() {
+      return {
+        // 当前行数据
+        id: '',
+        taskId: '',
+        instanceId: '',
+        businessId: '',
+        componentPath: '',
+        // 是否显示加载框
+        loading: false,
+        visible: true,
+        // 查询列表的查询条件
+        searchFormData: {
+          flowCode: '',
+          flowName: '',
+          title: '',
+        },
+        // 工具栏配置
+        toolbarConfig: {
+          // 自定义左侧工具栏
+          slots: {
+            buttons: 'toolbar_buttons',
+          },
+        },
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 45 },
+          { field: 'flowCode', title: '流程编号', width: 100 },
+          { field: 'flowName', title: '流程名称', width: 120 },
+          { field: 'title', title: '标题', minWidth: 180 },
+          { field: 'categoryName', title: '流程分类', width: 120 },
+          { field: 'nodeName', title: '节点名称', width: 120 },
+          { field: 'startBy', title: '发起人', width: 100 },
+          { field: 'startTime', title: '发起时间', width: 170 },
+          { title: '操作', width: 60, fixed: 'right', slots: { default: 'action_default' } },
+        ],
+        // 请求接口配置
+        proxyConfig: {
+          props: {
+            // 响应结果列表字段
+            result: 'datas',
+            // 响应结果总条数字段
+            total: 'totalCount',
+          },
+          ajax: {
+            // 查询接口
+            query: ({ page }) => {
+              return api.queryTodoList(this.buildQueryParams(page));
+            },
+          },
+        },
+        batchHandleDatas: [],
+      };
+    },
+    created() {},
+    methods: {
+      // 列表发生查询时的事件
+      search() {
+        this.$refs.grid.commitProxy('reload');
+      },
+      // 查询前构建查询参数结构
+      buildQueryParams(page) {
+        return Object.assign(
+          {
+            pageIndex: page.currentPage,
+            pageSize: page.pageSize,
+          },
+          this.buildSearchFormData(),
+        );
+      },
+      // 查询前构建具体的查询参数
+      buildSearchFormData() {
+        return Object.assign({}, this.searchFormData);
+      },
+      // 删除
+      createActions(row) {
+        return [
+          {
+            label: '审核',
+            onClick: () => {
+              this.taskId = row.taskId;
+              this.instanceId = row.instanceId;
+              this.businessId = row.businessId;
+              const ext = JSON.parse(row.ext || '{}');
+              if (this.$enums.FLOW_DEFINITION_EXT_BIZ_TYPE.SYSTEM.equalsCode(ext.bizType)) {
+                this.componentPath = getSysFlowComponentPath(ext.bizFlag);
+                this.$refs.systemApproveDialog.openDialog();
+              }
+            },
+          },
+        ];
+      },
+      onRefreshPage() {
+        this.search();
+      },
+    },
+  });
+</script>
diff --git a/src/views/customer-settle/check-sheet/add.vue b/src/views/customer-settle/check-sheet/add.vue
index f211175ad080580a44c9d26821369437727b9425..173fe1d8e55f0c5a2beda2b5178743baae31dac2 100644
--- a/src/views/customer-settle/check-sheet/add.vue
+++ b/src/views/customer-settle/check-sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:check-sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -63,7 +63,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -74,7 +74,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/check-sheet/approve.vue b/src/views/customer-settle/check-sheet/approve.vue
index b5c8e640c58dd2dbb000aa147465dfb7b4dad837..28a2df227d8f5d0ad6c9363d0dcdce03dfd0dcd3 100644
--- a/src/views/customer-settle/check-sheet/approve.vue
+++ b/src/views/customer-settle/check-sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:check-sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -192,7 +192,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -203,7 +203,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/check-sheet/detail.vue b/src/views/customer-settle/check-sheet/detail.vue
index 42faef5935c9b2cf7e565ea8330590ee0103983c..9f766e7ead3d421634d316a9e288fab068c0d156 100644
--- a/src/views/customer-settle/check-sheet/detail.vue
+++ b/src/views/customer-settle/check-sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['customer-settle:check-sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -189,7 +189,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -200,7 +200,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/customer-settle/check-sheet/index.vue b/src/views/customer-settle/check-sheet/index.vue
index 67a17b2dfd68d3fcef6d49beb3d7e6a115014475..bcb13b1aee205bef7dba7964833c979928e51ee9 100644
--- a/src/views/customer-settle/check-sheet/index.vue
+++ b/src/views/customer-settle/check-sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/customer-settle/check-sheet/modify.vue b/src/views/customer-settle/check-sheet/modify.vue
index a766d0db5a4c4389f37eebc5adfed246434c391e..7a34642e4e5c0804d82e6eb10b7f33edb70b4e43 100644
--- a/src/views/customer-settle/check-sheet/modify.vue
+++ b/src/views/customer-settle/check-sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:check-sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -120,7 +120,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -131,7 +131,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/fee-sheet/add.vue b/src/views/customer-settle/fee-sheet/add.vue
index 844706e851349a974bf17615e6c95c570455d7ae..19bdf0d8b69967029d548b24d6023bca734baf40 100644
--- a/src/views/customer-settle/fee-sheet/add.vue
+++ b/src/views/customer-settle/fee-sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:fee-sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -65,7 +65,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -73,7 +73,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/fee-sheet/approve.vue b/src/views/customer-settle/fee-sheet/approve.vue
index ed73603ef397d5f9ffba480d856a50a163e9e979..3ef6ed7f5ae1c25da252a0d2c1f454fcd6152010 100644
--- a/src/views/customer-settle/fee-sheet/approve.vue
+++ b/src/views/customer-settle/fee-sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:fee-sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -81,7 +81,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -89,7 +89,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/fee-sheet/detail.vue b/src/views/customer-settle/fee-sheet/detail.vue
index 52fb4ef6bf5d1f66ea5dac2a1f440e03d4310679..1cc27d2381abbb4baae5e30c7163023038741622 100644
--- a/src/views/customer-settle/fee-sheet/detail.vue
+++ b/src/views/customer-settle/fee-sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['customer-settle:fee-sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -88,7 +88,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -96,7 +96,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/customer-settle/fee-sheet/index.vue b/src/views/customer-settle/fee-sheet/index.vue
index 373b77c46ecbf1790da79c15a5ea14517bbeccf8..5f4caf3328acc828ad75bad5ca82729e69955025 100644
--- a/src/views/customer-settle/fee-sheet/index.vue
+++ b/src/views/customer-settle/fee-sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/customer-settle/fee-sheet/modify.vue b/src/views/customer-settle/fee-sheet/modify.vue
index 930596f64f02491bdaa3adb3967dec368750d90b..909f445b018293d0a063f64c120be67f37e791c8 100644
--- a/src/views/customer-settle/fee-sheet/modify.vue
+++ b/src/views/customer-settle/fee-sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:fee-sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -121,7 +121,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -129,7 +129,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/pre-sheet/add.vue b/src/views/customer-settle/pre-sheet/add.vue
index 8087c6b97a9a34fb8a48699a0f6f4465efa8f154..10bb75c388f7ea0d34a2a5b0051ceec5637ef5f6 100644
--- a/src/views/customer-settle/pre-sheet/add.vue
+++ b/src/views/customer-settle/pre-sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:pre-sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -46,7 +46,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -54,7 +54,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/pre-sheet/approve.vue b/src/views/customer-settle/pre-sheet/approve.vue
index f57b86e1cf2e854148b73b2cabf8745a35780b5d..0fc327b33aa2bd9efa074c2a6d0b19f1e4100611 100644
--- a/src/views/customer-settle/pre-sheet/approve.vue
+++ b/src/views/customer-settle/pre-sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:pre-sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -78,7 +78,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -86,7 +86,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/pre-sheet/detail.vue b/src/views/customer-settle/pre-sheet/detail.vue
index da076f34a2d7df47c2e8a1caeae60d847de3c7c1..109393e191137ab7805a1252b4e82414001abb0c 100644
--- a/src/views/customer-settle/pre-sheet/detail.vue
+++ b/src/views/customer-settle/pre-sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['customer-settle:pre-sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -85,7 +85,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -93,7 +93,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/customer-settle/pre-sheet/index.vue b/src/views/customer-settle/pre-sheet/index.vue
index a16bb6882f5975150dc7a8922b61f920cce73a14..8586db7891c0e4a334f63bef8c7e133f6617798c 100644
--- a/src/views/customer-settle/pre-sheet/index.vue
+++ b/src/views/customer-settle/pre-sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/customer-settle/pre-sheet/modify.vue b/src/views/customer-settle/pre-sheet/modify.vue
index 6ace6563763ddf5c252bfdbffffaf12f46c871a6..f75d60428afac38b2ca1df64e1d78046cab88d43 100644
--- a/src/views/customer-settle/pre-sheet/modify.vue
+++ b/src/views/customer-settle/pre-sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:pre-sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -102,7 +102,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -110,7 +110,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/sheet/add.vue b/src/views/customer-settle/sheet/add.vue
index 937c21777a95e0fda1b08b8cac623b70346e5d5d..d8b9eda7b725d745f071d5aa60ff76766bdbe82f 100644
--- a/src/views/customer-settle/sheet/add.vue
+++ b/src/views/customer-settle/sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -99,7 +99,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未收款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -113,7 +113,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/sheet/approve.vue b/src/views/customer-settle/sheet/approve.vue
index 25a2a0d1f0cfbd46a767eeec3fde29f019451674..bcdb3a3c347ee3207847a5ad44d4b2a54e6208cc 100644
--- a/src/views/customer-settle/sheet/approve.vue
+++ b/src/views/customer-settle/sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -134,7 +134,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未收款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -148,7 +148,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/customer-settle/sheet/detail.vue b/src/views/customer-settle/sheet/detail.vue
index 9dbaeb405ab9a0375200b2c37a130b61744e8c02..5e3e61dbd48f21bec72d5056aabbcb1749ee209b 100644
--- a/src/views/customer-settle/sheet/detail.vue
+++ b/src/views/customer-settle/sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['customer-settle:sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户">
             {{ formData.customerName }}
           </j-form-item>
@@ -115,7 +115,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未收款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -129,7 +129,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/customer-settle/sheet/index.vue b/src/views/customer-settle/sheet/index.vue
index 409a183270685d7880aabec351a37234c936ce2e..7c982c161b64579c1f2eecb5db45cb095e4f8cd7 100644
--- a/src/views/customer-settle/sheet/index.vue
+++ b/src/views/customer-settle/sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/customer-settle/sheet/modify.vue b/src/views/customer-settle/sheet/modify.vue
index d39f4400b99a6faa16b58ef99bbef2332f27c3de..d37081a9b49e8cee566aa3bb2429b90e942a98e1 100644
--- a/src/views/customer-settle/sheet/modify.vue
+++ b/src/views/customer-settle/sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['customer-settle:sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="客户" required>
             <customer-selector v-model:value="formData.customerId" />
           </j-form-item>
@@ -153,7 +153,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未收款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -167,7 +167,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/dashboard/analysis/components/mixins/resize.js b/src/views/dashboard/analysis/components/mixins/resize.js
index 234953b18aaf76fcbe81083c5c23a63b5f7c66ce..6839ef0c3c8b039a8865e13a14a9798ea780d111 100644
--- a/src/views/dashboard/analysis/components/mixins/resize.js
+++ b/src/views/dashboard/analysis/components/mixins/resize.js
@@ -1,55 +1,57 @@
-import { debounce } from '@/utils'
+import { debounce } from '@/utils';
 
 export default {
   data() {
     return {
       $_sidebarElm: null,
-      $_resizeHandler: null
-    }
+      $_resizeHandler: null,
+    };
   },
   mounted() {
     this.$_resizeHandler = debounce(() => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }, 100)
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    }, 100);
+    this.$_initResizeEvent();
+    this.$_initSidebarResizeEvent();
   },
   beforeDestroy() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.$_destroyResizeEvent();
+    this.$_destroySidebarResizeEvent();
   },
   // to fixed bug when cached by keep-alive
   // https://github.com/PanJiaChen/vue-element-admin/issues/2116
   activated() {
-    this.$_initResizeEvent()
-    this.$_initSidebarResizeEvent()
+    this.$_initResizeEvent();
+    this.$_initSidebarResizeEvent();
   },
   deactivated() {
-    this.$_destroyResizeEvent()
-    this.$_destroySidebarResizeEvent()
+    this.$_destroyResizeEvent();
+    this.$_destroySidebarResizeEvent();
   },
   methods: {
     // use $_ for mixins properties
     // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
     $_initResizeEvent() {
-      window.addEventListener('resize', this.$_resizeHandler)
+      window.addEventListener('resize', this.$_resizeHandler);
     },
     $_destroyResizeEvent() {
-      window.removeEventListener('resize', this.$_resizeHandler)
+      window.removeEventListener('resize', this.$_resizeHandler);
     },
     $_sidebarResizeHandler(e) {
       if (e.propertyName === 'width') {
-        this.$_resizeHandler()
+        this.$_resizeHandler();
       }
     },
     $_initSidebarResizeEvent() {
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0];
+      this.$_sidebarElm &&
+        this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler);
     },
     $_destroySidebarResizeEvent() {
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    }
-  }
-}
+      this.$_sidebarElm &&
+        this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler);
+    },
+  },
+};
diff --git a/src/views/development/custom/list/add.vue b/src/views/development/custom/list/add.vue
index 2aa979e706ec1365aa730261b04b82ab958ec0a8..02d09f2a2f7e63a8e45b1f859324aa521dbfbe2c 100644
--- a/src/views/development/custom/list/add.vue
+++ b/src/views/development/custom/list/add.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -25,7 +25,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="数据对象" :required="true">
             <gen-data-obj-selector
               v-model:value="formData.dataObjId"
@@ -39,7 +39,7 @@
       <div style="height: 10px"></div>
 
       <j-border title="基础配置">
-        <j-form :enable-collapse="false" label-width="160px">
+        <j-form bordered :enable-collapse="false" label-width="160px">
           <j-form-item :span="8" label="是否允许导出" :required="true">
             <a-select v-model:value="formData.allowExport" allow-clear>
               <a-select-option :value="true">是</a-select-option>
diff --git a/src/views/development/custom/list/index.vue b/src/views/development/custom/list/index.vue
index 2abb51f1c1c2e479b9599ad39a4ef726d0dc46d1..ada07001074607281eed73a2afa41d9054429c53 100644
--- a/src/views/development/custom/list/index.vue
+++ b/src/views/development/custom/list/index.vue
@@ -28,11 +28,11 @@
             >
               <template #form>
                 <j-border>
-                  <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
-                    <j-form-item label="名称" :span="6">
+                  <j-form bordered label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                    <j-form-item label="名称">
                       <a-input v-model:value="searchFormData.name" allow-clear />
                     </j-form-item>
-                    <j-form-item label="状态" :span="6">
+                    <j-form-item label="状态">
                       <a-select
                         v-model:value="searchFormData.available"
                         placeholder="全部"
diff --git a/src/views/development/custom/list/modify.vue b/src/views/development/custom/list/modify.vue
index 8f1e521463371e544f7e38266c8d522b8a856def..a4d6bb3a708f4c06e4ca9cccec1089d905e3cb84 100644
--- a/src/views/development/custom/list/modify.vue
+++ b/src/views/development/custom/list/modify.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -35,7 +35,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="数据对象" :required="true">
             <span>{{ formData.dataObjName }}</span>
           </j-form-item>
@@ -45,7 +45,7 @@
       <div style="height: 10px"></div>
 
       <j-border title="基础配置">
-        <j-form :enable-collapse="false" label-width="160px">
+        <j-form bordered :enable-collapse="false" label-width="160px">
           <j-form-item :span="8" label="是否允许导出" :required="true">
             <a-select v-model:value="formData.allowExport" allow-clear>
               <a-select-option :value="true">是</a-select-option>
diff --git a/src/views/development/custom/page/add.vue b/src/views/development/custom/page/add.vue
index 488cbef2b4422d86d8466707584327f4a545b80b..9c16c7e5fd03f99152287c72720a73cc3cf1a168 100644
--- a/src/views/development/custom/page/add.vue
+++ b/src/views/development/custom/page/add.vue
@@ -9,15 +9,12 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
           <j-form-item :span="12" label="分类">
-            <gen-custom-page-category-selector
-              v-model:value="formData.categoryId"
-              :only-final="false"
-            />
+            <gen-custom-page-category-selector v-model:value="formData.categoryId" />
           </j-form-item>
           <j-form-item :span="24" label="备注" :content-nest="false">
             <a-textarea v-model:value="formData.description" />
diff --git a/src/views/development/custom/page/index.vue b/src/views/development/custom/page/index.vue
index 06ff3f1cb6ae893438f6fefea3abed572d6bf660..31de3d08e511cf17532cb36ff87992abaaf88c0e 100644
--- a/src/views/development/custom/page/index.vue
+++ b/src/views/development/custom/page/index.vue
@@ -28,11 +28,11 @@
             >
               <template #form>
                 <j-border>
-                  <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
-                    <j-form-item label="页面ID" :span="6">
+                  <j-form bordered label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                    <j-form-item label="页面ID">
                       <a-input v-model:value="searchFormData.id" allow-clear />
                     </j-form-item>
-                    <j-form-item label="名称" :span="6">
+                    <j-form-item label="名称">
                       <a-input v-model:value="searchFormData.name" allow-clear />
                     </j-form-item>
                   </j-form>
diff --git a/src/views/development/custom/page/modify.vue b/src/views/development/custom/page/modify.vue
index 95ad4efdbd5864c2225a7c67e7162a51187be7e4..357872be12c967fe496d23dee64baadd08296b91 100644
--- a/src/views/development/custom/page/modify.vue
+++ b/src/views/development/custom/page/modify.vue
@@ -9,15 +9,12 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
           <j-form-item :span="12" label="分类">
-            <gen-custom-page-category-selector
-              v-model:value="formData.categoryId"
-              :only-final="false"
-            />
+            <gen-custom-page-category-selector v-model:value="formData.categoryId" />
           </j-form-item>
           <j-form-item :span="24" label="备注" :content-nest="false">
             <a-textarea v-model:value="formData.description" />
diff --git a/src/views/development/custom/selector/add.vue b/src/views/development/custom/selector/add.vue
index 98f26714f5ecba44a895cbc6aae8bcaab2bfa78d..983486474aa2dced93b335c401dac2e1b3acd02b 100644
--- a/src/views/development/custom/selector/add.vue
+++ b/src/views/development/custom/selector/add.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -25,7 +25,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="100px">
+        <j-form bordered :enable-collapse="false" label-width="100px">
           <j-form-item :span="8" label="自定义列表" :required="true">
             <gen-custom-list-selector
               v-model:value="formData.customListId"
@@ -39,7 +39,7 @@
       <div style="height: 10px"></div>
 
       <j-border title="基础配置">
-        <j-form :enable-collapse="false" label-width="160px">
+        <j-form bordered :enable-collapse="false" label-width="160px">
           <j-form-item :span="8" label="对话框标题">
             <a-input v-model:value="formData.dialogTittle" />
           </j-form-item>
@@ -55,7 +55,7 @@
       <div style="height: 10px"></div>
 
       <j-border title="数据配置">
-        <j-form :enable-collapse="false" label-width="160px">
+        <j-form bordered :enable-collapse="false" label-width="160px">
           <j-form-item :span="8" label="ID字段" :required="true">
             <a-tree-select
               v-model:value="formData.idColumn"
diff --git a/src/views/development/custom/selector/index.vue b/src/views/development/custom/selector/index.vue
index f12961684b74034aa0cf6b1f8533f024925db11a..bbcb8cabd512d6faa2660a4742330b77585f3ece 100644
--- a/src/views/development/custom/selector/index.vue
+++ b/src/views/development/custom/selector/index.vue
@@ -28,11 +28,11 @@
             >
               <template #form>
                 <j-border>
-                  <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
-                    <j-form-item label="名称" :span="6">
+                  <j-form bordered label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                    <j-form-item label="名称">
                       <a-input v-model:value="searchFormData.name" allow-clear />
                     </j-form-item>
-                    <j-form-item label="状态" :span="6">
+                    <j-form-item label="状态">
                       <a-select
                         v-model:value="searchFormData.available"
                         placeholder="全部"
diff --git a/src/views/development/custom/selector/modify.vue b/src/views/development/custom/selector/modify.vue
index 34ac138127dc21397384a0775783d39fb0a8c3fb..0abf1af36a53268ff87367a30a154999dc594e3d 100644
--- a/src/views/development/custom/selector/modify.vue
+++ b/src/views/development/custom/selector/modify.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -35,7 +35,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="100px">
+        <j-form bordered :enable-collapse="false" label-width="100px">
           <j-form-item :span="12" label="自定义列表" :required="true">
             <span>{{ formData.customListName }}</span>
           </j-form-item>
@@ -45,7 +45,7 @@
       <div style="height: 10px"></div>
 
       <j-border title="基础配置">
-        <j-form :enable-collapse="false" label-width="160px">
+        <j-form bordered :enable-collapse="false" label-width="160px">
           <j-form-item :span="8" label="对话框标题">
             <a-input v-model:value="formData.dialogTittle" />
           </j-form-item>
@@ -61,7 +61,7 @@
       <div style="height: 10px"></div>
 
       <j-border title="数据配置">
-        <j-form :enable-collapse="false" label-width="160px">
+        <j-form bordered :enable-collapse="false" label-width="160px">
           <j-form-item :span="8" label="ID字段" :required="true">
             <a-tree-select
               v-model:value="formData.idColumn"
diff --git a/src/views/development/data/entity/add.vue b/src/views/development/data/entity/add.vue
index b02fc0f40b056771224cd0e4730dd3b883d5242d..514f18a25ce01463bf13568a91343d30c941cdeb 100644
--- a/src/views/development/data/entity/add.vue
+++ b/src/views/development/data/entity/add.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -25,7 +25,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="数据表" :required="true">
             <simple-db-table-selector
               v-model:value="formData.tableId"
diff --git a/src/views/development/data/entity/index.vue b/src/views/development/data/entity/index.vue
index 437c8da7d5c50a49a224991342186269f48c2b5f..5a2cb40c328aabbb7fb5789dea3930c12474a412 100644
--- a/src/views/development/data/entity/index.vue
+++ b/src/views/development/data/entity/index.vue
@@ -28,11 +28,11 @@
             >
               <template #form>
                 <j-border>
-                  <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
-                    <j-form-item label="名称" :span="6">
+                  <j-form bordered label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                    <j-form-item label="名称">
                       <a-input v-model:value="searchFormData.name" allow-clear />
                     </j-form-item>
-                    <j-form-item label="状态" :span="6">
+                    <j-form-item label="状态">
                       <a-select
                         v-model:value="searchFormData.available"
                         placeholder="全部"
diff --git a/src/views/development/data/entity/modify.vue b/src/views/development/data/entity/modify.vue
index e149f6ff198ca516cab579a49116809e54a0e4c8..0861e71cdcd340a8d7eabf07ed9b935dbf24aec8 100644
--- a/src/views/development/data/entity/modify.vue
+++ b/src/views/development/data/entity/modify.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -35,7 +35,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="数据表" :required="true">
             <a-space>
               <span>{{ formData.tableName }}</span>
diff --git a/src/views/development/data/obj/add.vue b/src/views/development/data/obj/add.vue
index 2a55bbe5d14af80a90cf674f5ef5c5cce62cbd31..04506fe91c9e730800b46b1c689981ffabe5793a 100644
--- a/src/views/development/data/obj/add.vue
+++ b/src/views/development/data/obj/add.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -25,7 +25,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="主表" :required="true">
             <gen-data-entity-selector
               v-model:value="formData.mainTableId"
diff --git a/src/views/development/data/obj/index.vue b/src/views/development/data/obj/index.vue
index f62cbb6732ffea2c9a1d9a0707e5dfb2d598ccc0..802607662420e5ada92c729044258c43fd51bb70 100644
--- a/src/views/development/data/obj/index.vue
+++ b/src/views/development/data/obj/index.vue
@@ -28,11 +28,11 @@
             >
               <template #form>
                 <j-border>
-                  <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
-                    <j-form-item label="名称" :span="6">
+                  <j-form bordered label-width="60px" @collapse="$refs.grid.refreshColumn()">
+                    <j-form-item label="名称">
                       <a-input v-model:value="searchFormData.name" allow-clear />
                     </j-form-item>
-                    <j-form-item label="状态" :span="6">
+                    <j-form-item label="状态">
                       <a-select
                         v-model:value="searchFormData.available"
                         placeholder="全部"
diff --git a/src/views/development/data/obj/modify.vue b/src/views/development/data/obj/modify.vue
index fb5a9a8823e51aec4b13db695d55fddf108546f1..13bcd3a2853ae0f9070f83603e8bf2eb5822b65a 100644
--- a/src/views/development/data/obj/modify.vue
+++ b/src/views/development/data/obj/modify.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-loading="loading">
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="名称" :required="true">
             <a-input v-model:value="formData.name" allow-clear />
           </j-form-item>
@@ -35,7 +35,7 @@
       <div style="height: 10px"></div>
 
       <j-border>
-        <j-form :enable-collapse="false" label-width="80px">
+        <j-form bordered :enable-collapse="false" label-width="80px">
           <j-form-item :span="12" label="主表" :required="true">
             <span>{{ formData.mainTableName }}</span>
           </j-form-item>
diff --git a/src/views/development/qrtz/index.vue b/src/views/development/qrtz/index.vue
index 4244b5aeec522ef8b56cf828733ce762d1ceda32..f628bb76fd70658931c2be1a7814399bdfa0b785 100644
--- a/src/views/development/qrtz/index.vue
+++ b/src/views/development/qrtz/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="名称">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/logistics/sheet/add.vue b/src/views/sc/logistics/sheet/add.vue
index 1f3b3e6a60463ccc4ba9bfa99b0fea67e38ad541..a560d8e2cbea8df6f2aff499cb038aab2ef61206 100644
--- a/src/views/sc/logistics/sheet/add.vue
+++ b/src/views/sc/logistics/sheet/add.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['logistics:sheet:add']" v-loading="loading">
       <j-border title="业务单据">
         <!-- 数据列表 -->
diff --git a/src/views/sc/logistics/sheet/detail.vue b/src/views/sc/logistics/sheet/detail.vue
index ecdfd3cc2ee43004bde8c976c7cba8ef44a78bad..49c7ec59d9e7ee86fe9a36bf8f97d6701ad01b0d 100644
--- a/src/views/sc/logistics/sheet/detail.vue
+++ b/src/views/sc/logistics/sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-permission="['logistics:sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="单据号">
             <span>{{ formData.code }}</span>
           </j-form-item>
@@ -96,7 +96,7 @@
         </vxe-grid>
       </j-border>
       <j-border title="寄件人信息">
-        <j-form label-width="140px" :enable-collapse="false">
+        <j-form bordered label-width="140px" :enable-collapse="false">
           <j-form-item label="姓名" :required="true">
             <a-input v-model:value="formData.senderName" readonly />
           </j-form-item>
@@ -112,7 +112,7 @@
         </j-form>
       </j-border>
       <j-border title="收件人信息">
-        <j-form label-width="140px" :enable-collapse="false">
+        <j-form bordered label-width="140px" :enable-collapse="false">
           <j-form-item label="姓名" :required="true">
             <a-input v-model:value="formData.receiverName" readonly />
           </j-form-item>
@@ -128,7 +128,7 @@
         </j-form>
       </j-border>
       <j-border title="物流单信息">
-        <j-form label-width="140px" :enable-collapse="false">
+        <j-form bordered label-width="140px" :enable-collapse="false">
           <j-form-item label="物流公司" :required="true">
             <logistics-company-selector v-model:value="formData.logisticsCompanyId" disabled />
           </j-form-item>
diff --git a/src/views/sc/logistics/sheet/index.vue b/src/views/sc/logistics/sheet/index.vue
index 092c2528386bbbe725d2733480d278be34f4158b..6d2349890236c2d8e7c9e6f0ea58866a122d8426 100644
--- a/src/views/sc/logistics/sheet/index.vue
+++ b/src/views/sc/logistics/sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/logistics/sheet/modify.vue b/src/views/sc/logistics/sheet/modify.vue
index cd7ae5011f758b4bb53bfdbaea1f5d25ceb3d383..d29605dae7e1dc698dcc597bacaab53a2a431e1a 100644
--- a/src/views/sc/logistics/sheet/modify.vue
+++ b/src/views/sc/logistics/sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['logistics:sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="单据号">
             <span>{{ formData.code }}</span>
           </j-form-item>
diff --git a/src/views/sc/logistics/sheet/query-biz-order.vue b/src/views/sc/logistics/sheet/query-biz-order.vue
index c669b1770eeb3af92df7c2d876a9071f85fc4426..2b700acf03011793c99fd5bb18409230c1f49379 100644
--- a/src/views/sc/logistics/sheet/query-biz-order.vue
+++ b/src/views/sc/logistics/sheet/query-biz-order.vue
@@ -28,7 +28,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="业务单据号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/purchase/batch-add-product.vue b/src/views/sc/purchase/batch-add-product.vue
index 1cbacd9085c96d6a05d8a5f2e78720a53d71f037..008b09bc273145a0324a1475ab850743f57fd64b 100644
--- a/src/views/sc/purchase/batch-add-product.vue
+++ b/src/views/sc/purchase/batch-add-product.vue
@@ -39,7 +39,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/purchase/config/index.vue b/src/views/sc/purchase/config/index.vue
index e5a541c5b9c419b2225a6d4cc53990b55e8732d1..b6844611809d222b338f615557261d1806ccb0da 100644
--- a/src/views/sc/purchase/config/index.vue
+++ b/src/views/sc/purchase/config/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:config:modify']">
       <a-row>
         <a-col :md="16" :sm="24">
@@ -11,6 +11,21 @@
               :model="formData"
               :rules="rules"
             >
+              <j-border class="m-2" title="采购订单设置">
+                <a-form-item label="采购订单是否开启审批流程" name="purchaseRequireBpm">
+                  <a-select v-model:value="formData.purchaseRequireBpm" placeholder="">
+                    <a-select-option :value="true">是</a-select-option>
+                    <a-select-option :value="false">否</a-select-option>
+                  </a-select>
+                </a-form-item>
+                <a-form-item
+                  v-if="formData.purchaseRequireBpm"
+                  label="审批流程"
+                  name="purchaseBpmProcessId"
+                >
+                  <flow-definition-selector v-model:value="formData.purchaseBpmProcessId" />
+                </a-form-item>
+              </j-border>
               <j-border class="m-2" title="采购收货设置">
                 <a-form-item label="采购收货单是否关联采购订单" name="receiveRequirePurchase">
                   <a-select v-model:value="formData.receiveRequirePurchase" placeholder="">
@@ -93,6 +108,8 @@
           purchaseReturnMultipleRelateReceive: [
             { required: true, message: '请选择采购退货单是否多次关联采购收货单' },
           ],
+          purchaseRequireBpm: [{ required: true, message: '请选择采购订单是否开启审批流程' }],
+          purchaseBpmProcessId: [{ required: true, message: '请选择审批流程' }],
         },
       };
     },
diff --git a/src/views/sc/purchase/order/add.vue b/src/views/sc/purchase/order/add.vue
index 7dc4367f0151b605820b17cebe885cbdcde3a51f..2a68ea771ad324aebaa93abb7b337acc68e2ac37 100644
--- a/src/views/sc/purchase/order/add.vue
+++ b/src/views/sc/purchase/order/add.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:order:add']" v-loading="loading">
       <!-- 数据列表 -->
       <vxe-grid
@@ -16,7 +16,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="仓库" required>
                 <store-center-selector v-model:value="formData.scId" />
               </j-form-item>
@@ -102,7 +102,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="采购数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -120,7 +120,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -143,6 +143,7 @@
           >
           <a-button
             v-permission="['purchase:order:approve']"
+            v-if="!requireBpm"
             type="primary"
             :loading="loading"
             @click="directApprovePassOrder"
@@ -167,6 +168,7 @@
     AlertOutlined,
   } from '@ant-design/icons-vue';
   import * as api from '@/api/sc/purchase/order';
+  import * as configApi from '@/api/sc/purchase/config';
   import { multiplePageMix } from '@/mixins/multiplePageMix';
 
   export default defineComponent({
@@ -261,6 +263,7 @@
           },
         ],
         tableData: [],
+        requireBpm: false,
       };
     },
     computed: {},
@@ -291,6 +294,10 @@
         };
 
         this.tableData = [];
+
+        configApi.get().then((res) => {
+          this.requireBpm = res.purchaseRequireBpm;
+        });
       },
       emptyProduct() {
         return {
diff --git a/src/views/sc/purchase/order/approve.vue b/src/views/sc/purchase/order/approve.vue
index 1c6a0e16c12c0cdb0453cbda1e545e70c0ac7732..827661178c534737916f0e73018a6ea204619c3a 100644
--- a/src/views/sc/purchase/order/approve.vue
+++ b/src/views/sc/purchase/order/approve.vue
@@ -1,118 +1,20 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:order:approve']" v-loading="loading">
-      <j-border>
-        <j-form>
-          <j-form-item label="仓库">
-            {{ formData.scName }}
-          </j-form-item>
-          <j-form-item label="供应商">
-            {{ formData.supplierName }}
-          </j-form-item>
-          <j-form-item label="采购员">
-            {{ formData.purchaserName }}
-          </j-form-item>
-          <j-form-item label="预计到货日期">
-            {{ formData.expectArriveDate }}
-          </j-form-item>
-          <j-form-item label="状态">
-            <span
-              v-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status)"
-              style="color: #52c41a"
-              >{{ $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status) }}</span
-            >
-            <span
-              v-else-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)"
-              style="color: #f5222d"
-              >{{ $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status) }}</span
-            >
-            <span v-else style="color: #303133">{{
-              $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status)
-            }}</span>
-          </j-form-item>
-          <j-form-item label="拒绝理由" :content-nest="false">
-            <a-input
-              v-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)"
-              v-model:value="formData.refuseReason"
-              readonly
-            />
-          </j-form-item>
-          <j-form-item label="操作人">
-            <span>{{ formData.createBy }}</span>
-          </j-form-item>
-          <j-form-item label="操作时间" :span="16">
-            <span>{{ formData.createTime }}</span>
-          </j-form-item>
-          <j-form-item
-            v-if="
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status) ||
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)
-            "
-            label="审核人"
-          >
-            <span>{{ formData.approveBy }}</span>
-          </j-form-item>
-          <j-form-item
-            v-if="
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status) ||
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)
-            "
-            label="审核时间"
-            :span="16"
-          >
-            <span>{{ formData.approveTime }}</span>
-          </j-form-item>
-        </j-form>
-      </j-border>
-      <!-- 数据列表 -->
-      <vxe-grid
-        ref="grid"
-        resizable
-        show-overflow
-        highlight-hover-row
-        keep-source
-        row-id="id"
-        height="500"
-        :data="tableData"
-        :columns="tableColumn"
-      >
-        <!-- 采购含税金额 列自定义内容 -->
-        <template #purchaseAmount_default="{ row }">
-          <span
-            v-if="$utils.isFloatGeZero(row.purchasePrice) && $utils.isFloatGeZero(row.purchaseNum)"
-            >{{ $utils.mul(row.purchasePrice, row.purchaseNum) }}</span
-          >
-        </template>
-      </vxe-grid>
-
-      <order-time-line :id="id" />
-
-      <j-border title="合计">
-        <j-form label-width="140px">
-          <j-form-item label="采购数量" :span="6">
-            <a-input v-model:value="formData.totalNum" class="number-input" readonly />
-          </j-form-item>
-          <j-form-item label="赠品数量" :span="6">
-            <a-input v-model:value="formData.giftNum" class="number-input" readonly />
-          </j-form-item>
-          <j-form-item label="含税总金额" :span="6">
-            <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
-          </j-form-item>
-        </j-form>
-      </j-border>
-
-      <j-border title="约定支付">
-        <pay-type ref="payType" :disabled="true" />
-      </j-border>
-
-      <j-border>
-        <j-form label-width="140px">
-          <j-form-item label="备注" :span="24" :content-nest="false">
-            <a-textarea v-model:value.trim="formData.description" maxlength="200" />
-          </j-form-item>
-        </j-form>
-      </j-border>
-
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="detail" tab="详情"
+          ><viewer ref="viewer" :id="id" @load-data-complete="(e) => (formData = e)"
+        /></a-tab-pane>
+        <a-tab-pane
+          v-if="$utils.isEmpty(formData.flowInstanceId)"
+          key="orderTimeLine"
+          tab="变动记录"
+          ><order-time-line :id="id"
+        /></a-tab-pane>
+        <a-tab-pane key="approveHis" v-if="!$utils.isEmpty(formData.flowInstanceId)" tab="审批历史"
+          ><bpm-approve-his :business-id="formData.id"
+        /></a-tab-pane>
+      </a-tabs>
       <div
         v-if="
           $enums.PURCHASE_ORDER_STATUS.CREATED.equalsCode(formData.status) ||
@@ -146,15 +48,15 @@
 <script>
   import { defineComponent } from 'vue';
   import ApproveRefuse from '@/components/ApproveRefuse';
-  import PayType from '@/views/sc/pay-type/index.vue';
   import * as api from '@/api/sc/purchase/order';
   import { multiplePageMix } from '@/mixins/multiplePageMix';
+  import Viewer from './viewer.vue';
 
   export default defineComponent({
     name: 'ApprovePurchaseOrder',
     components: {
+      Viewer,
       ApproveRefuse,
-      PayType,
     },
     mixins: [multiplePageMix],
     data() {
@@ -162,42 +64,10 @@
         id: this.$route.params.id,
         // 是否显示加载框
         loading: false,
+        // 当前激活的标签
+        activeKey: 'detail',
         // 表单数据
         formData: {},
-        // 列表数据配置
-        tableColumn: [
-          { type: 'seq', width: 50 },
-          { field: 'productCode', title: '商品编号', width: 120 },
-          { field: 'productName', title: '商品名称', width: 260 },
-          { field: 'skuCode', title: '商品SKU编号', width: 120 },
-          { field: 'externalCode', title: '商品简码', width: 120 },
-          { field: 'unit', title: '单位', width: 80 },
-          { field: 'spec', title: '规格', width: 80 },
-          { field: 'categoryName', title: '商品分类', width: 120 },
-          { field: 'brandName', title: '商品品牌', width: 120 },
-          { field: 'purchasePrice', title: '采购价（元）', align: 'right', width: 120 },
-          { field: 'taxRate', title: '税率（%）', align: 'right', width: 100 },
-          {
-            field: 'isGift',
-            title: '是否赠品',
-            width: 80,
-            formatter: ({ cellValue }) => {
-              return cellValue ? '是' : '否';
-            },
-          },
-          { field: 'taxCostPrice', title: '含税成本价（元）', align: 'right', width: 140 },
-          { field: 'stockNum', title: '库存数量', align: 'right', width: 100 },
-          { field: 'purchaseNum', title: '采购数量', align: 'right', width: 100 },
-          {
-            field: 'purchaseAmount',
-            title: '采购含税金额',
-            align: 'right',
-            width: 120,
-            slots: { default: 'purchaseAmount_default' },
-          },
-          { field: 'description', title: '备注', width: 200 },
-        ],
-        tableData: [],
       };
     },
     computed: {},
@@ -209,7 +79,6 @@
       openDialog() {
         // 初始化表单数据
         this.initFormData();
-        this.loadData();
       },
       // 关闭对话框
       closeDialog() {
@@ -217,85 +86,8 @@
       },
       // 初始化表单数据
       initFormData() {
-        this.formData = {
-          scName: '',
-          supplierName: '',
-          purchaserName: '',
-          expectArriveDate: '',
-          totalNum: 0,
-          giftNum: 0,
-          totalAmount: 0,
-          description: '',
-        };
-
-        this.tableData = [];
-      },
-      // 加载数据
-      loadData() {
-        this.loading = true;
-        api
-          .get(this.id)
-          .then((res) => {
-            if (
-              !this.$enums.PURCHASE_ORDER_STATUS.CREATED.equalsCode(res.status) &&
-              !this.$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(res.status)
-            ) {
-              this.$msg.createError('订单已审核通过，无需重复审核！');
-              this.closeDialog();
-              return;
-            }
-            this.formData = {
-              scName: res.scName,
-              supplierName: res.supplierName,
-              purchaserName: res.purchaserName,
-              expectArriveDate: res.expectArriveDate,
-              description: res.description,
-              status: res.status,
-              createBy: res.createBy,
-              createTime: res.createTime,
-              approveBy: res.approveBy,
-              approveTime: res.approveTime,
-              refuseReason: res.refuseReason,
-              totalNum: 0,
-              giftNum: 0,
-              totalAmount: 0,
-            };
-            this.tableData = res.details || [];
-
-            this.$refs.payType.setTableData(res.payTypes || []);
-            this.calcSum();
-          })
-          .finally(() => {
-            this.loading = false;
-          });
-      },
-      // 计算汇总数据
-      calcSum() {
-        let totalNum = 0;
-        let giftNum = 0;
-        let totalAmount = 0;
-
-        this.tableData
-          .filter((t) => {
-            return (
-              this.$utils.isFloatGeZero(t.purchasePrice) &&
-              this.$utils.isIntegerGeZero(t.purchaseNum)
-            );
-          })
-          .forEach((t) => {
-            const num = parseInt(t.purchaseNum);
-            if (t.isGift) {
-              giftNum = this.$utils.add(giftNum, num);
-            } else {
-              totalNum = this.$utils.add(totalNum, num);
-            }
-
-            totalAmount = this.$utils.add(totalAmount, this.$utils.mul(num, t.purchasePrice));
-          });
-
-        this.formData.totalNum = totalNum;
-        this.formData.giftNum = giftNum;
-        this.formData.totalAmount = totalAmount;
+        this.formData = {};
+        this.activeKey = 'detail';
       },
       // 审核通过
       approvePassOrder() {
diff --git a/src/views/sc/purchase/order/detail.vue b/src/views/sc/purchase/order/detail.vue
index dfd16149fd4adb949cac2c8091491e9cfb3bee07..c59a60806066f253f88853a40058498769126870 100644
--- a/src/views/sc/purchase/order/detail.vue
+++ b/src/views/sc/purchase/order/detail.vue
@@ -6,118 +6,21 @@
     title="查看"
     :style="{ top: '20px' }"
   >
-    <div v-if="visible" v-permission="['purchase:order:query']" v-loading="loading">
-      <j-border>
-        <j-form>
-          <j-form-item label="仓库">
-            {{ formData.scName }}
-          </j-form-item>
-          <j-form-item label="供应商">
-            {{ formData.supplierName }}
-          </j-form-item>
-          <j-form-item label="采购员">
-            {{ formData.purchaserName }}
-          </j-form-item>
-          <j-form-item label="预计到货日期">
-            {{ formData.expectArriveDate }}
-          </j-form-item>
-          <j-form-item label="状态">
-            <span
-              v-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status)"
-              style="color: #52c41a"
-              >{{ $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status) }}</span
-            >
-            <span
-              v-else-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)"
-              style="color: #f5222d"
-              >{{ $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status) }}</span
-            >
-            <span v-else style="color: #303133">{{
-              $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status)
-            }}</span>
-          </j-form-item>
-          <j-form-item label="拒绝理由" :content-nest="false">
-            <a-input
-              v-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)"
-              v-model:value="formData.refuseReason"
-              readonly
-            />
-          </j-form-item>
-          <j-form-item label="操作人">
-            <span>{{ formData.createBy }}</span>
-          </j-form-item>
-          <j-form-item label="操作时间" :span="16">
-            <span>{{ formData.createTime }}</span>
-          </j-form-item>
-          <j-form-item
-            v-if="
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status) ||
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)
-            "
-            label="审核人"
-          >
-            <span>{{ formData.approveBy }}</span>
-          </j-form-item>
-          <j-form-item
-            v-if="
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status) ||
-              $enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)
-            "
-            label="审核时间"
-            :span="16"
-          >
-            <span>{{ formData.approveTime }}</span>
-          </j-form-item>
-        </j-form>
-      </j-border>
-      <!-- 数据列表 -->
-      <vxe-grid
-        ref="grid"
-        resizable
-        show-overflow
-        highlight-hover-row
-        keep-source
-        row-id="id"
-        height="500"
-        :data="tableData"
-        :columns="tableColumn"
-      >
-        <!-- 采购含税金额 列自定义内容 -->
-        <template #purchaseAmount_default="{ row }">
-          <span
-            v-if="$utils.isFloatGeZero(row.purchasePrice) && $utils.isFloatGeZero(row.purchaseNum)"
-            >{{ $utils.mul(row.purchasePrice, row.purchaseNum) }}</span
-          >
-        </template>
-      </vxe-grid>
-
-      <order-time-line :id="id" />
-
-      <j-border title="合计">
-        <j-form label-width="140px">
-          <j-form-item label="采购数量" :span="6">
-            <a-input v-model:value="formData.totalNum" class="number-input" readonly />
-          </j-form-item>
-          <j-form-item label="赠品数量" :span="6">
-            <a-input v-model:value="formData.giftNum" class="number-input" readonly />
-          </j-form-item>
-          <j-form-item label="含税总金额" :span="6">
-            <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
-          </j-form-item>
-        </j-form>
-      </j-border>
-
-      <j-border title="约定支付">
-        <pay-type ref="payType" :disabled="true" />
-      </j-border>
-
-      <j-border>
-        <j-form label-width="140px">
-          <j-form-item label="备注" :span="24" :content-nest="false">
-            <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
-          </j-form-item>
-        </j-form>
-      </j-border>
+    <div>
+      <a-tabs v-model:activeKey="activeKey" v-if="visible">
+        <a-tab-pane key="detail" tab="详情"
+          ><viewer :id="id" @load-data-complete="(e) => (formData = e)"
+        /></a-tab-pane>
+        <a-tab-pane
+          key="orderTimeLine"
+          v-if="$utils.isEmpty(formData.flowInstanceId)"
+          tab="变动记录"
+          ><order-time-line :id="id"
+        /></a-tab-pane>
+        <a-tab-pane key="approveHis" v-if="!$utils.isEmpty(formData.flowInstanceId)" tab="审批历史"
+          ><bpm-approve-his :business-id="formData.id"
+        /></a-tab-pane>
+      </a-tabs>
     </div>
     <template #footer>
       <div class="form-modal-footer">
@@ -131,14 +34,15 @@
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { getLodop } from '@/utils/lodop';
-  import PayType from '@/views/sc/pay-type/index.vue';
   import * as api from '@/api/sc/purchase/order';
+  import { printMix } from '@/mixins/print';
+  import Viewer from './viewer.vue';
 
   export default defineComponent({
     components: {
-      PayType,
+      Viewer,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -151,40 +55,9 @@
         visible: false,
         // 是否显示加载框
         loading: false,
-        // 表单数据
+        // 当前激活的标签
+        activeKey: 'detail',
         formData: {},
-        // 列表数据配置
-        tableColumn: [
-          { type: 'seq', width: 50 },
-          { field: 'productCode', title: '商品编号', width: 120 },
-          { field: 'productName', title: '商品名称', width: 260 },
-          { field: 'skuCode', title: '商品SKU编号', width: 120 },
-          { field: 'externalCode', title: '商品简码', width: 120 },
-          { field: 'unit', title: '单位', width: 80 },
-          { field: 'spec', title: '规格', width: 80 },
-          { field: 'categoryName', title: '商品分类', width: 120 },
-          { field: 'brandName', title: '商品品牌', width: 120 },
-          { field: 'purchasePrice', title: '采购价（元）', align: 'right', width: 120 },
-          { field: 'taxRate', title: '税率（%）', align: 'right', width: 100 },
-          {
-            field: 'isGift',
-            title: '是否赠品',
-            width: 80,
-            formatter: ({ cellValue }) => {
-              return cellValue ? '是' : '否';
-            },
-          },
-          { field: 'purchaseNum', title: '采购数量', align: 'right', width: 100 },
-          {
-            field: 'purchaseAmount',
-            title: '采购含税金额',
-            align: 'right',
-            width: 120,
-            slots: { default: 'purchaseAmount_default' },
-          },
-          { field: 'description', title: '备注', width: 200 },
-        ],
-        tableData: [],
       };
     },
     computed: {},
@@ -206,92 +79,20 @@
       },
       // 初始化表单数据
       initFormData() {
-        this.formData = {
-          scName: '',
-          supplierName: '',
-          purchaserName: '',
-          expectArriveDate: '',
-          totalNum: 0,
-          giftNum: 0,
-          totalAmount: 0,
-          description: '',
-        };
-
-        this.tableData = [];
-      },
-      // 加载数据
-      loadData() {
-        this.loading = true;
-        api
-          .get(this.id)
-          .then((res) => {
-            this.formData = {
-              scName: res.scName,
-              supplierName: res.supplierName,
-              purchaserName: res.purchaserName,
-              expectArriveDate: res.expectArriveDate,
-              description: res.description,
-              status: res.status,
-              createBy: res.createBy,
-              createTime: res.createTime,
-              approveBy: res.approveBy,
-              approveTime: res.approveTime,
-              refuseReason: res.refuseReason,
-              totalNum: 0,
-              giftNum: 0,
-              totalAmount: 0,
-            };
-            this.tableData = res.details || [];
-
-            this.$refs.payType.setTableData(res.payTypes || []);
-            this.calcSum();
-          })
-          .finally(() => {
-            this.loading = false;
-          });
+        this.formData = {};
+        this.activeKey = 'detail';
       },
       // 页面显示时触发
       open() {
         // 初始化表单数据
         this.initFormData();
-
-        this.loadData();
-      },
-      // 计算汇总数据
-      calcSum() {
-        let totalNum = 0;
-        let giftNum = 0;
-        let totalAmount = 0;
-
-        this.tableData
-          .filter((t) => {
-            return (
-              this.$utils.isFloatGeZero(t.purchasePrice) &&
-              this.$utils.isIntegerGeZero(t.purchaseNum)
-            );
-          })
-          .forEach((t) => {
-            const num = parseInt(t.purchaseNum);
-            if (t.isGift) {
-              giftNum = this.$utils.add(giftNum, num);
-            } else {
-              totalNum = this.$utils.add(totalNum, num);
-            }
-
-            totalAmount = this.$utils.add(totalAmount, this.$utils.mul(num, t.purchasePrice));
-          });
-
-        this.formData.totalNum = totalNum;
-        this.formData.giftNum = giftNum;
-        this.formData.totalAmount = totalAmount;
       },
       print() {
         this.loading = true;
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印采购订单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.PURCHASE_ORDER.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/purchase/order/index.vue b/src/views/sc/purchase/order/index.vue
index 10effbca8f4766131f37c4a7ca0d71a3e742c1ce..8460c56e9f352cf09894713e391e93dcceaca33a 100644
--- a/src/views/sc/purchase/order/index.vue
+++ b/src/views/sc/purchase/order/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/purchase/order/modify.vue b/src/views/sc/purchase/order/modify.vue
index c281e0f9e8bebd01cfc6c20cf79bc0739f6531c3..3f5bc1ae09faaa115ae0c4df67a3c3b76b75891b 100644
--- a/src/views/sc/purchase/order/modify.vue
+++ b/src/views/sc/purchase/order/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:order:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -146,10 +146,8 @@
         </template>
       </vxe-grid>
 
-      <order-time-line :id="id" />
-
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="采购数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -167,7 +165,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -228,6 +226,7 @@
     data() {
       return {
         id: this.$route.params.id,
+        isForm: this.$route.query.isForm || false,
         // 是否显示加载框
         loading: false,
         // 表单数据
@@ -337,7 +336,7 @@
       loadData() {
         this.loading = true;
         api
-          .get(this.id)
+          .get(this.id, this.isForm)
           .then((res) => {
             if (
               !this.$enums.PURCHASE_ORDER_STATUS.CREATED.equalsCode(res.status) &&
@@ -683,6 +682,7 @@
               description: t.description,
             };
           }),
+          isForm: this.isForm,
         };
 
         this.loading = true;
diff --git a/src/views/sc/purchase/order/viewer.vue b/src/views/sc/purchase/order/viewer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..187d584803fb4a0eee101a8baf46ee7c60092614
--- /dev/null
+++ b/src/views/sc/purchase/order/viewer.vue
@@ -0,0 +1,271 @@
+<template>
+  <div v-permission="['purchase:order:query']" v-loading="loading">
+    <j-border>
+      <j-form bordered>
+        <j-form-item label="仓库">
+          {{ formData.scName }}
+        </j-form-item>
+        <j-form-item label="供应商">
+          {{ formData.supplierName }}
+        </j-form-item>
+        <j-form-item label="采购员">
+          {{ formData.purchaserName }}
+        </j-form-item>
+        <j-form-item label="预计到货日期">
+          {{ formData.expectArriveDate }}
+        </j-form-item>
+        <j-form-item label="状态">
+          <span
+            v-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status)"
+            style="color: #52c41a"
+            >{{ $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status) }}</span
+          >
+          <span
+            v-else-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)"
+            style="color: #f5222d"
+            >{{ $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status) }}</span
+          >
+          <span v-else style="color: #303133">{{
+            $enums.PURCHASE_ORDER_STATUS.getDesc(formData.status)
+          }}</span>
+        </j-form-item>
+        <j-form-item label="拒绝理由" :content-nest="false">
+          <a-input
+            v-if="$enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)"
+            v-model:value="formData.refuseReason"
+            readonly
+          />
+        </j-form-item>
+        <j-form-item label="操作人">
+          <span>{{ formData.createBy }}</span>
+        </j-form-item>
+        <j-form-item label="操作时间" :span="16">
+          <span>{{ formData.createTime }}</span>
+        </j-form-item>
+        <j-form-item
+          v-if="
+            $enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status) ||
+            $enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)
+          "
+          label="审核人"
+        >
+          <span>{{ formData.approveBy }}</span>
+        </j-form-item>
+        <j-form-item
+          v-if="
+            $enums.PURCHASE_ORDER_STATUS.APPROVE_PASS.equalsCode(formData.status) ||
+            $enums.PURCHASE_ORDER_STATUS.APPROVE_REFUSE.equalsCode(formData.status)
+          "
+          label="审核时间"
+          :span="16"
+        >
+          <span>{{ formData.approveTime }}</span>
+        </j-form-item>
+      </j-form>
+    </j-border>
+    <!-- 数据列表 -->
+    <vxe-grid
+      ref="grid"
+      resizable
+      show-overflow
+      highlight-hover-row
+      keep-source
+      row-id="id"
+      height="500"
+      :data="tableData"
+      :columns="tableColumn"
+    >
+      <!-- 采购含税金额 列自定义内容 -->
+      <template #purchaseAmount_default="{ row }">
+        <span
+          v-if="$utils.isFloatGeZero(row.purchasePrice) && $utils.isFloatGeZero(row.purchaseNum)"
+          >{{ $utils.mul(row.purchasePrice, row.purchaseNum) }}</span
+        >
+      </template>
+    </vxe-grid>
+
+    <j-border title="合计">
+      <j-form bordered label-width="140px">
+        <j-form-item label="采购数量" :span="6">
+          <a-input v-model:value="formData.totalNum" class="number-input" readonly />
+        </j-form-item>
+        <j-form-item label="赠品数量" :span="6">
+          <a-input v-model:value="formData.giftNum" class="number-input" readonly />
+        </j-form-item>
+        <j-form-item label="含税总金额" :span="6">
+          <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
+        </j-form-item>
+      </j-form>
+    </j-border>
+
+    <j-border title="约定支付">
+      <pay-type ref="payType" :disabled="true" />
+    </j-border>
+
+    <j-border>
+      <j-form bordered label-width="140px">
+        <j-form-item label="备注" :span="24" :content-nest="false">
+          <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
+        </j-form-item>
+      </j-form>
+    </j-border>
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import PayType from '@/views/sc/pay-type/index.vue';
+  import * as api from '@/api/sc/purchase/order';
+
+  export default defineComponent({
+    components: {
+      PayType,
+    },
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+      isForm: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 50 },
+          { field: 'productCode', title: '商品编号', width: 120 },
+          { field: 'productName', title: '商品名称', width: 260 },
+          { field: 'skuCode', title: '商品SKU编号', width: 120 },
+          { field: 'externalCode', title: '商品简码', width: 120 },
+          { field: 'unit', title: '单位', width: 80 },
+          { field: 'spec', title: '规格', width: 80 },
+          { field: 'categoryName', title: '商品分类', width: 120 },
+          { field: 'brandName', title: '商品品牌', width: 120 },
+          { field: 'purchasePrice', title: '采购价（元）', align: 'right', width: 120 },
+          { field: 'taxRate', title: '税率（%）', align: 'right', width: 100 },
+          {
+            field: 'isGift',
+            title: '是否赠品',
+            width: 80,
+            formatter: ({ cellValue }) => {
+              return cellValue ? '是' : '否';
+            },
+          },
+          { field: 'purchaseNum', title: '采购数量', align: 'right', width: 100 },
+          {
+            field: 'purchaseAmount',
+            title: '采购含税金额',
+            align: 'right',
+            width: 120,
+            slots: { default: 'purchaseAmount_default' },
+          },
+          { field: 'description', title: '备注', width: 200 },
+        ],
+        tableData: [],
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.open();
+    },
+    methods: {
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          scName: '',
+          supplierName: '',
+          purchaserName: '',
+          expectArriveDate: '',
+          totalNum: 0,
+          giftNum: 0,
+          totalAmount: 0,
+          description: '',
+          flowInstanceId: '',
+        };
+
+        this.tableData = [];
+      },
+      // 加载数据
+      loadData() {
+        this.loading = true;
+        api
+          .get(this.id, this.isForm)
+          .then((res) => {
+            this.formData = {
+              id: res.id,
+              scName: res.scName,
+              supplierName: res.supplierName,
+              purchaserName: res.purchaserName,
+              expectArriveDate: res.expectArriveDate,
+              description: res.description,
+              status: res.status,
+              createBy: res.createBy,
+              createTime: res.createTime,
+              approveBy: res.approveBy,
+              approveTime: res.approveTime,
+              refuseReason: res.refuseReason,
+              totalNum: 0,
+              giftNum: 0,
+              totalAmount: 0,
+              flowInstanceId: res.flowInstanceId,
+            };
+            this.tableData = res.details || [];
+
+            this.$refs.payType.setTableData(res.payTypes || []);
+            this.calcSum();
+
+            this.$emit('load-data-complete', this.formData);
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+
+        this.loadData();
+      },
+      // 计算汇总数据
+      calcSum() {
+        let totalNum = 0;
+        let giftNum = 0;
+        let totalAmount = 0;
+
+        this.tableData
+          .filter((t) => {
+            return (
+              this.$utils.isFloatGeZero(t.purchasePrice) &&
+              this.$utils.isIntegerGeZero(t.purchaseNum)
+            );
+          })
+          .forEach((t) => {
+            const num = parseInt(t.purchaseNum);
+            if (t.isGift) {
+              giftNum = this.$utils.add(giftNum, num);
+            } else {
+              totalNum = this.$utils.add(totalNum, num);
+            }
+
+            totalAmount = this.$utils.add(totalAmount, this.$utils.mul(num, t.purchasePrice));
+          });
+
+        this.formData.totalNum = totalNum;
+        this.formData.giftNum = giftNum;
+        this.formData.totalAmount = totalAmount;
+      },
+      getFormData() {
+        return this.formData;
+      },
+    },
+  });
+</script>
+<style></style>
diff --git a/src/views/sc/purchase/receive/PurchaseOrderSelectorWithReceive.vue b/src/views/sc/purchase/receive/PurchaseOrderSelectorWithReceive.vue
index 80ec4f36a9702992ad03bd22fcf4554580fdb67c..1831e8be4ed5eb8939aa2839f5377e9ccd11161a 100644
--- a/src/views/sc/purchase/receive/PurchaseOrderSelectorWithReceive.vue
+++ b/src/views/sc/purchase/receive/PurchaseOrderSelectorWithReceive.vue
@@ -22,7 +22,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="采购单号">
               <a-input v-model:value="searchParams.code" allow-clear />
             </j-form-item>
diff --git a/src/views/sc/purchase/receive/add-require.vue b/src/views/sc/purchase/receive/add-require.vue
index dc6bad6a6f6b8c87c26f98922ccbcf222c8500b1..428544fa8fb8df94665eb4d7fb1d114adf4b9d96 100644
--- a/src/views/sc/purchase/receive/add-require.vue
+++ b/src/views/sc/purchase/receive/add-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:receive:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" :before-open="beforeSelectSc" />
           </j-form-item>
@@ -131,7 +131,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="收货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -145,7 +145,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/purchase/receive/add-un-require.vue b/src/views/sc/purchase/receive/add-un-require.vue
index 6c5c41ab92b20ea6260fee08b8ebcb42bacc0216..1b97c0c193da16a69c2bb0104454f79e9ff23b0f 100644
--- a/src/views/sc/purchase/receive/add-un-require.vue
+++ b/src/views/sc/purchase/receive/add-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:receive:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -119,7 +119,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="收货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -133,7 +133,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/purchase/receive/approve.vue b/src/views/sc/purchase/receive/approve.vue
index 0386bb2e18fa9c60fe30c4ff63c12113857ec5e5..614283ffbc86a8e936e6df509f47c35f9be6bd26 100644
--- a/src/views/sc/purchase/receive/approve.vue
+++ b/src/views/sc/purchase/receive/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:receive:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -103,7 +103,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="收货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -117,7 +117,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/purchase/receive/detail.vue b/src/views/sc/purchase/receive/detail.vue
index 5eff2c04b877e24868e0f123fe10366aa14cdf49..53086e39bec1c8e7abb5429ae38be2105d8f8c8a 100644
--- a/src/views/sc/purchase/receive/detail.vue
+++ b/src/views/sc/purchase/receive/detail.vue
@@ -9,7 +9,7 @@
     >
       <div v-if="visible" v-permission="['purchase:receive:query']" v-loading="loading">
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item label="仓库">
               {{ formData.scName }}
             </j-form-item>
@@ -112,7 +112,7 @@
         <order-time-line :id="id" />
 
         <j-border title="合计">
-          <j-form label-width="140px">
+          <j-form bordered label-width="140px">
             <j-form-item label="收货数量" :span="6">
               <a-input v-model:value="formData.totalNum" class="number-input" readonly />
             </j-form-item>
@@ -126,7 +126,7 @@
         </j-border>
 
         <j-border>
-          <j-form label-width="140px">
+          <j-form bordered label-width="140px">
             <j-form-item label="备注" :span="24" :content-nest="false">
               <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
             </j-form-item>
@@ -149,13 +149,14 @@
 <script>
   import { defineComponent } from 'vue';
   import PurchaseOrderDetail from '@/views/sc/purchase/order/detail.vue';
-  import { getLodop } from '@/utils/lodop';
   import * as api from '@/api/sc/purchase/receive';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       PurchaseOrderDetail,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -330,8 +331,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印采购收货单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.RECEIVE_SHEET.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/purchase/receive/index.vue b/src/views/sc/purchase/receive/index.vue
index d18c4b78bf7557b39f6d3e2d161446facc4890af..d89e9529d9c20d2562e76ed40bbca1dcd4fa195f 100644
--- a/src/views/sc/purchase/receive/index.vue
+++ b/src/views/sc/purchase/receive/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/purchase/receive/modify-require.vue b/src/views/sc/purchase/receive/modify-require.vue
index 57915c9781231a315b903656ba4c540c0235a640..c0ec32eed61db07d1211dd88c4e3291c13dadedc 100644
--- a/src/views/sc/purchase/receive/modify-require.vue
+++ b/src/views/sc/purchase/receive/modify-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:receive:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.sc.name }}
           </j-form-item>
@@ -180,7 +180,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="收货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -194,7 +194,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/purchase/receive/modify-un-require.vue b/src/views/sc/purchase/receive/modify-un-require.vue
index a4e81289b976182bae15a5fbed085a9233b23e29..a724cb6249acd11f4fb8481e95f872f1e1dda40b 100644
--- a/src/views/sc/purchase/receive/modify-un-require.vue
+++ b/src/views/sc/purchase/receive/modify-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:receive:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -163,7 +163,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="收货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -177,7 +177,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/purchase/return/ReceiveSheetSelectorWithReturn.vue b/src/views/sc/purchase/return/ReceiveSheetSelectorWithReturn.vue
index 0043c1334bda18791b49c6363de471cbc6d2841f..2105480f738fe6a8df611ad7f7a29ffb4d710592 100644
--- a/src/views/sc/purchase/return/ReceiveSheetSelectorWithReturn.vue
+++ b/src/views/sc/purchase/return/ReceiveSheetSelectorWithReturn.vue
@@ -22,7 +22,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="采购收货单号">
               <a-input v-model:value="searchParams.code" allow-clear />
             </j-form-item>
diff --git a/src/views/sc/purchase/return/add-require.vue b/src/views/sc/purchase/return/add-require.vue
index ac4159e937b93b10ac2d97e69fb6c243c6eecfea..a3ad14345bae680bd817f321b6b86c2fc03124dc 100644
--- a/src/views/sc/purchase/return/add-require.vue
+++ b/src/views/sc/purchase/return/add-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:return:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" :before-open="beforeSelectSc" />
           </j-form-item>
@@ -79,7 +79,7 @@
           <span v-else>{{ row.productName }}</span>
         </template>
 
-        <!-- 采购价 列自定义内容 -->
+        <!-- 退货价 列自定义内容 -->
         <template #purchasePrice_default="{ row }">
           <span>{{ row.purchasePrice }}</span>
         </template>
@@ -123,7 +123,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -137,7 +137,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -238,7 +238,7 @@
           },
           {
             field: 'purchasePrice',
-            title: '采购价（元）',
+            title: '退货价（元）',
             align: 'right',
             width: 120,
             slots: { default: 'purchasePrice_default' },
@@ -526,29 +526,29 @@
           }
 
           if (this.$utils.isEmpty(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价不允许为空！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价不允许为空！');
             return false;
           }
 
           if (!this.$utils.isFloat(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价必须为数字！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价必须为数字！');
             return false;
           }
 
           if (product.isGift) {
             if (parseFloat(product.purchasePrice) !== 0) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须等于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须等于0！');
               return false;
             }
           } else {
             if (!this.$utils.isFloatGtZero(product.purchasePrice)) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须大于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须大于0！');
               return false;
             }
           }
 
           if (!this.$utils.isNumberPrecision(product.purchasePrice, 2)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价最多允许2位小数！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价最多允许2位小数！');
             return false;
           }
 
diff --git a/src/views/sc/purchase/return/add-un-require.vue b/src/views/sc/purchase/return/add-un-require.vue
index 3f26279925fe58af5f9731a3236cf795adeabcb3..e73a83d9357653020068fb91334f5442616f5c07 100644
--- a/src/views/sc/purchase/return/add-un-require.vue
+++ b/src/views/sc/purchase/return/add-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:return:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -56,7 +56,7 @@
             >
             <a-button :icon="h(NumberOutlined)" @click="batchInputReturnNum">批量录入数量</a-button>
             <a-button :icon="h(EditOutlined)" @click="batchInputPurchasePrice"
-              >批量调整采购价</a-button
+              >批量调整退货价</a-button
             >
             <a-button :icon="h(AlertOutlined)" @click="setGift">设置赠品</a-button>
           </a-space>
@@ -75,7 +75,7 @@
           />
         </template>
 
-        <!-- 采购价 列自定义内容 -->
+        <!-- 退货价 列自定义内容 -->
         <template #purchasePrice_default="{ row }">
           <span v-if="row.isGift">{{ row.purchasePrice }}</span>
           <a-input
@@ -116,7 +116,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -130,7 +130,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -236,7 +236,7 @@
           },
           {
             field: 'purchasePrice',
-            title: '采购价（元）',
+            title: '退货价（元）',
             align: 'right',
             width: 120,
             slots: { default: 'purchasePrice_default' },
@@ -455,7 +455,7 @@
             });
           });
       },
-      // 批量录入采购价
+      // 批量录入退货价
       batchInputPurchasePrice() {
         const records = this.$refs.grid.getCheckboxRecords();
         if (this.$utils.isEmpty(records)) {
@@ -465,16 +465,16 @@
 
         for (let i = 0; i < records.length; i++) {
           if (records[i].isGift) {
-            this.$msg.createError('第' + (i + 1) + '行商品为赠品，不允许录入采购价！');
+            this.$msg.createError('第' + (i + 1) + '行商品为赠品，不允许录入退货价！');
             return;
           }
         }
 
         this.$msg
-          .createPrompt('请输入采购价（元）', {
+          .createPrompt('请输入退货价（元）', {
             inputPattern: this.$utils.PATTERN_IS_PRICE,
-            inputErrorMessage: '采购价（元）必须为数字并且不小于0',
-            title: '批量调整采购价',
+            inputErrorMessage: '退货价（元）必须为数字并且不小于0',
+            title: '批量调整退货价',
             required: true,
           })
           .then(({ value }) => {
@@ -540,29 +540,29 @@
           }
 
           if (this.$utils.isEmpty(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价不允许为空！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价不允许为空！');
             return false;
           }
 
           if (!this.$utils.isFloat(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价必须为数字！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价必须为数字！');
             return false;
           }
 
           if (product.isGift) {
             if (parseFloat(product.purchasePrice) !== 0) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须等于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须等于0！');
               return false;
             }
           } else {
             if (!this.$utils.isFloatGtZero(product.purchasePrice)) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须大于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须大于0！');
               return false;
             }
           }
 
           if (!this.$utils.isNumberPrecision(product.purchasePrice, 2)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价最多允许2位小数！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价最多允许2位小数！');
             return false;
           }
 
diff --git a/src/views/sc/purchase/return/approve.vue b/src/views/sc/purchase/return/approve.vue
index 42636fa541f67e18fb89e1f4e884fda28fbc917a..863da51ff2d153af467469179c2f9edcbf3f4b92 100644
--- a/src/views/sc/purchase/return/approve.vue
+++ b/src/views/sc/purchase/return/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:return:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -106,7 +106,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -120,7 +120,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -201,7 +201,7 @@
               return cellValue ? '是' : '否';
             },
           },
-          { field: 'purchasePrice', title: '采购价（元）', align: 'right', width: 120 },
+          { field: 'purchasePrice', title: '退货价（元）', align: 'right', width: 120 },
           { field: 'taxCostPrice', title: '含税成本价（元）', align: 'right', width: 140 },
           {
             field: 'stockNum',
diff --git a/src/views/sc/purchase/return/detail.vue b/src/views/sc/purchase/return/detail.vue
index 1508229267725bbbc9360e2caf5d7f284914772e..ae824928e3180dc719fe41e04f0ded8bd7d975da 100644
--- a/src/views/sc/purchase/return/detail.vue
+++ b/src/views/sc/purchase/return/detail.vue
@@ -9,7 +9,7 @@
     >
       <div v-if="visible" v-permission="['purchase:return:query']" v-loading="loading">
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item label="仓库">
               {{ formData.scName }}
             </j-form-item>
@@ -109,7 +109,7 @@
         <order-time-line :id="id" />
 
         <j-border title="合计">
-          <j-form label-width="140px">
+          <j-form bordered label-width="140px">
             <j-form-item label="退货数量" :span="6">
               <a-input v-model:value="formData.totalNum" class="number-input" readonly />
             </j-form-item>
@@ -123,7 +123,7 @@
         </j-border>
 
         <j-border>
-          <j-form label-width="140px">
+          <j-form bordered label-width="140px">
             <j-form-item label="备注" :span="24" :content-nest="false">
               <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
             </j-form-item>
@@ -146,13 +146,14 @@
 <script>
   import { defineComponent } from 'vue';
   import ReceiveSheetDetail from '@/views/sc/purchase/receive/detail.vue';
-  import { getLodop } from '@/utils/lodop';
   import * as api from '@/api/sc/purchase/return';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       ReceiveSheetDetail,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -186,7 +187,7 @@
               return cellValue ? '是' : '否';
             },
           },
-          { field: 'purchasePrice', title: '采购价（元）', align: 'right', width: 120 },
+          { field: 'purchasePrice', title: '退货价（元）', align: 'right', width: 120 },
           {
             field: 'receiveNum',
             title: '收货数量',
@@ -324,8 +325,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印采购退货单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.PURCHASE_RETURN.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/purchase/return/index.vue b/src/views/sc/purchase/return/index.vue
index b029347d232c37f6d98842e1e9dbdd8aaed5d466..b60e839506551d56cd136624f134112b29dc8a95 100644
--- a/src/views/sc/purchase/return/index.vue
+++ b/src/views/sc/purchase/return/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/purchase/return/modify-require.vue b/src/views/sc/purchase/return/modify-require.vue
index 6b1db27c3430aae19ad6786e94fd0ee407549866..3bef741c03e929749de71455813669e0a72c82f9 100644
--- a/src/views/sc/purchase/return/modify-require.vue
+++ b/src/views/sc/purchase/return/modify-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:return:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.sc.name }}
           </j-form-item>
@@ -118,7 +118,7 @@
           <span v-else>{{ row.productName }}</span>
         </template>
 
-        <!-- 采购价 列自定义内容 -->
+        <!-- 退货价 列自定义内容 -->
         <template #purchasePrice_default="{ row }">
           <span>{{ row.purchasePrice }}</span>
         </template>
@@ -164,7 +164,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -178,7 +178,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -275,7 +275,7 @@
           },
           {
             field: 'purchasePrice',
-            title: '采购价（元）',
+            title: '退货价（元）',
             align: 'right',
             width: 120,
             slots: { default: 'purchasePrice_default' },
@@ -626,29 +626,29 @@
           }
 
           if (this.$utils.isEmpty(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价不允许为空！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价不允许为空！');
             return false;
           }
 
           if (!this.$utils.isFloat(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价必须为数字！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价必须为数字！');
             return false;
           }
 
           if (product.isGift) {
             if (parseFloat(product.purchasePrice) !== 0) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须等于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须等于0！');
               return false;
             }
           } else {
             if (!this.$utils.isFloatGtZero(product.purchasePrice)) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须大于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须大于0！');
               return false;
             }
           }
 
           if (!this.$utils.isNumberPrecision(product.purchasePrice, 2)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价最多允许2位小数！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价最多允许2位小数！');
             return false;
           }
 
diff --git a/src/views/sc/purchase/return/modify-un-require.vue b/src/views/sc/purchase/return/modify-un-require.vue
index 7bce875623a11edf2a692fd88eeca0c8c114a045..f10cf9a855c4b7906e305bbec94ff1a920b9e85d 100644
--- a/src/views/sc/purchase/return/modify-un-require.vue
+++ b/src/views/sc/purchase/return/modify-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['purchase:return:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -98,7 +98,7 @@
             >
             <a-button :icon="h(NumberOutlined)" @click="batchInputReturnNum">批量录入数量</a-button>
             <a-button :icon="h(EditOutlined)" @click="batchInputPurchasePrice"
-              >批量调整采购价</a-button
+              >批量调整退货价</a-button
             >
             <a-button :icon="h(AlertOutlined)" @click="setGift">设置赠品</a-button>
           </a-space>
@@ -117,7 +117,7 @@
           />
         </template>
 
-        <!-- 采购价 列自定义内容 -->
+        <!-- 退货价 列自定义内容 -->
         <template #purchasePrice_default="{ row }">
           <span v-if="row.isGift">{{ row.purchasePrice }}</span>
           <a-input
@@ -160,7 +160,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -174,7 +174,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
@@ -278,7 +278,7 @@
           },
           {
             field: 'purchasePrice',
-            title: '采购价（元）',
+            title: '退货价（元）',
             align: 'right',
             width: 120,
             slots: { default: 'purchasePrice_default' },
@@ -543,7 +543,7 @@
             });
           });
       },
-      // 批量录入采购价
+      // 批量录入退货价
       batchInputPurchasePrice() {
         const records = this.$refs.grid.getCheckboxRecords();
         if (this.$utils.isEmpty(records)) {
@@ -553,16 +553,16 @@
 
         for (let i = 0; i < records.length; i++) {
           if (records[i].isGift) {
-            this.$msg.createError('第' + (i + 1) + '行商品为赠品，不允许录入采购价！');
+            this.$msg.createError('第' + (i + 1) + '行商品为赠品，不允许录入退货价！');
             return;
           }
         }
 
         this.$msg
-          .createPrompt('请输入采购价（元）', {
+          .createPrompt('请输入退货价（元）', {
             inputPattern: this.$utils.PATTERN_IS_PRICE,
-            inputErrorMessage: '采购价（元）必须为数字并且不小于0',
-            title: '批量调整采购价',
+            inputErrorMessage: '退货价（元）必须为数字并且不小于0',
+            title: '批量调整退货价',
             required: true,
           })
           .then(({ value }) => {
@@ -628,29 +628,29 @@
           }
 
           if (this.$utils.isEmpty(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价不允许为空！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价不允许为空！');
             return false;
           }
 
           if (!this.$utils.isFloat(product.purchasePrice)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价必须为数字！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价必须为数字！');
             return false;
           }
 
           if (product.isGift) {
             if (parseFloat(product.purchasePrice) !== 0) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须等于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须等于0！');
               return false;
             }
           } else {
             if (!this.$utils.isFloatGtZero(product.purchasePrice)) {
-              this.$msg.createError('第' + (i + 1) + '行商品采购价必须大于0！');
+              this.$msg.createError('第' + (i + 1) + '行商品退货价必须大于0！');
               return false;
             }
           }
 
           if (!this.$utils.isNumberPrecision(product.purchasePrice, 2)) {
-            this.$msg.createError('第' + (i + 1) + '行商品采购价最多允许2位小数！');
+            this.$msg.createError('第' + (i + 1) + '行商品退货价最多允许2位小数！');
             return false;
           }
 
diff --git a/src/views/sc/retail/batch-add-product.vue b/src/views/sc/retail/batch-add-product.vue
index 3580abd361c39d486c27cb8720baed9d65d5b89d..fa6458d790e4d4fcf440aa4e3f02a93961cf3b55 100644
--- a/src/views/sc/retail/batch-add-product.vue
+++ b/src/views/sc/retail/batch-add-product.vue
@@ -37,7 +37,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/retail/config/index.vue b/src/views/sc/retail/config/index.vue
index 3790261e20145aaceaeafdda25d9bf85a0f69000..2bd628d24abda0c583ea9169d3a10328d30ae66f 100644
--- a/src/views/sc/retail/config/index.vue
+++ b/src/views/sc/retail/config/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:config:modify']">
       <a-row>
         <a-col :md="16" :sm="24">
diff --git a/src/views/sc/retail/out/add.vue b/src/views/sc/retail/out/add.vue
index ad66d26324dad1e8c5bfd280328642c23312857a..04b2903dd298f896ed22c3b263d8702f65aae2a4 100644
--- a/src/views/sc/retail/out/add.vue
+++ b/src/views/sc/retail/out/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:out:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -118,7 +118,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -136,7 +136,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/out/approve.vue b/src/views/sc/retail/out/approve.vue
index f7bf50d8182bc3fd4a87dce5e9201be0da8929d3..8d98b2a6d59ca5b368de3afe7ff02d6fab386351 100644
--- a/src/views/sc/retail/out/approve.vue
+++ b/src/views/sc/retail/out/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:out:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -93,7 +93,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -111,7 +111,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/out/detail.vue b/src/views/sc/retail/out/detail.vue
index 6dcb5795d0681c032a73ce8ebb0dbfc4a6828016..0779ecbaca7ca37afb233bac7d8906f75457f721 100644
--- a/src/views/sc/retail/out/detail.vue
+++ b/src/views/sc/retail/out/detail.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['retail:out:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -93,7 +93,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -111,7 +111,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
           </j-form-item>
@@ -130,14 +130,15 @@
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { getLodop } from '@/utils/lodop';
   import PayType from '@/views/sc/pay-type/index.vue';
   import * as api from '@/api/sc/retail/out';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       PayType,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -298,8 +299,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印零售出库单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.RETAIL_OUT.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/retail/out/index.vue b/src/views/sc/retail/out/index.vue
index d13189086efe24f2f0cef95e5e5f46337f4ec120..edcb2905fc507b05601d89ee1f4cfda93026fa3e 100644
--- a/src/views/sc/retail/out/index.vue
+++ b/src/views/sc/retail/out/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/retail/out/modify.vue b/src/views/sc/retail/out/modify.vue
index 8ef1f7489c689e22f5dcfc7b9dad815a4a8d3dc9..3620e7888240e4194d68abddbec1d4a73a3db49b 100644
--- a/src/views/sc/retail/out/modify.vue
+++ b/src/views/sc/retail/out/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:out:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -168,7 +168,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -186,7 +186,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/return/RetailOutSheetSelector.vue b/src/views/sc/retail/return/RetailOutSheetSelector.vue
index 05b0ad11cb6d80071a24aac05b7b47358963bea2..173e631b75b63cad1fa93536508f09fc4c7e78c6 100644
--- a/src/views/sc/retail/return/RetailOutSheetSelector.vue
+++ b/src/views/sc/retail/return/RetailOutSheetSelector.vue
@@ -22,7 +22,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="零售出库单号">
               <a-input v-model:value="searchParams.code" allow-clear />
             </j-form-item>
diff --git a/src/views/sc/retail/return/add-require.vue b/src/views/sc/retail/return/add-require.vue
index 20464a4b91007ead1d5fe7db819974eed4afe7d6..2ac276c22d2b4f1e9e4e98d4d8d1d788085e3ec4 100644
--- a/src/views/sc/retail/return/add-require.vue
+++ b/src/views/sc/retail/return/add-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:return:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" :before-open="beforeSelectSc" />
           </j-form-item>
@@ -115,7 +115,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -133,7 +133,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/return/add-un-require.vue b/src/views/sc/retail/return/add-un-require.vue
index 267eea3f3a4cb4c80e41ea164b296b7b4da3425c..24ccd557d222b270a308f895e714085bfcf637d4 100644
--- a/src/views/sc/retail/return/add-un-require.vue
+++ b/src/views/sc/retail/return/add-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:return:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -124,7 +124,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -142,7 +142,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/return/approve.vue b/src/views/sc/retail/return/approve.vue
index 3da2520d8c20321ecf54fb88b01c664315e7846f..d64631ccc7e4bec5d1ad2fa9a85d4e8c181f3a67 100644
--- a/src/views/sc/retail/return/approve.vue
+++ b/src/views/sc/retail/return/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:return:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -103,7 +103,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -121,7 +121,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/return/detail.vue b/src/views/sc/retail/return/detail.vue
index 4f275e2e1c6ec0cd3375dd50e6280404ce502ebf..28339251bccf88e67cab8ad27011eacad5c88d28 100644
--- a/src/views/sc/retail/return/detail.vue
+++ b/src/views/sc/retail/return/detail.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['retail:return:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -109,7 +109,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -127,7 +127,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
           </j-form-item>
@@ -149,15 +149,16 @@
 <script>
   import { defineComponent } from 'vue';
   import OutSheetDetail from '@/views/sc/retail/out/detail.vue';
-  import { getLodop } from '@/utils/lodop';
   import PayType from '@/views/sc/pay-type/index.vue';
   import * as api from '@/api/sc/retail/return';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       OutSheetDetail,
       PayType,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -325,8 +326,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印零售退货单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.RETAIL_RETURN.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/retail/return/index.vue b/src/views/sc/retail/return/index.vue
index f60cc0cea5caa440d7b9baeeaf917ce1b22afcc3..ce3b0677e3f9117a02b22c4dbb6c08c7fce238c4 100644
--- a/src/views/sc/retail/return/index.vue
+++ b/src/views/sc/retail/return/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/retail/return/modify-require.vue b/src/views/sc/retail/return/modify-require.vue
index 9c08964e936ce45714372ef255b9725e2555cc2c..848412572418ef615df6f9ef45bb6227b26a62b8 100644
--- a/src/views/sc/retail/return/modify-require.vue
+++ b/src/views/sc/retail/return/modify-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:return:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.sc.name }}
           </j-form-item>
@@ -153,7 +153,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -171,7 +171,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/retail/return/modify-un-require.vue b/src/views/sc/retail/return/modify-un-require.vue
index 8458ca48c1aeef49045e8a8ed03ff747360e905f..727d99413c551a94e2d7aec8c05aa7f54fe0b607 100644
--- a/src/views/sc/retail/return/modify-un-require.vue
+++ b/src/views/sc/retail/return/modify-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['retail:return:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -163,7 +163,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -181,7 +181,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/batch-add-product.vue b/src/views/sc/sale/batch-add-product.vue
index b2d74c36bf66fbb176495ddd0a99a9f3e08a0dbd..aacbef73f855825f52e18baf1dab21a70ba2fb37 100644
--- a/src/views/sc/sale/batch-add-product.vue
+++ b/src/views/sc/sale/batch-add-product.vue
@@ -39,7 +39,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/sale/config/index.vue b/src/views/sc/sale/config/index.vue
index 7d4fe1331f835873cee7f6b9a282adc51baba7c5..285d307afdb370fafa38afd54b67cf3e9b7de3bf 100644
--- a/src/views/sc/sale/config/index.vue
+++ b/src/views/sc/sale/config/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:config:modify']">
       <a-row>
         <a-col :md="16" :sm="24">
diff --git a/src/views/sc/sale/order/add.vue b/src/views/sc/sale/order/add.vue
index 1fac364c5df02506b27ae6567b8a3e29f0f18995..67ec124ad60d14d6d813ef042fdffc74d62880d0 100644
--- a/src/views/sc/sale/order/add.vue
+++ b/src/views/sc/sale/order/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:order:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -99,7 +99,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="销售数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -117,7 +117,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/order/approve.vue b/src/views/sc/sale/order/approve.vue
index 951dc48d7d6ce5ae3ce365e74440721e52160f14..5b60442727975124b0e4bab72769128a638c090a 100644
--- a/src/views/sc/sale/order/approve.vue
+++ b/src/views/sc/sale/order/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:order:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -84,7 +84,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="销售数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -102,7 +102,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/order/detail.vue b/src/views/sc/sale/order/detail.vue
index e0b2846b468ee83d5882dae369856534b77977f3..eb76b499f48990e9243b92e48d525071b975b78e 100644
--- a/src/views/sc/sale/order/detail.vue
+++ b/src/views/sc/sale/order/detail.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['sale:order:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -90,7 +90,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="销售数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -108,7 +108,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
           </j-form-item>
@@ -127,14 +127,15 @@
 </template>
 <script>
   import { defineComponent } from 'vue';
-  import { getLodop } from '@/utils/lodop';
   import PayType from '@/views/sc/pay-type/index.vue';
   import * as api from '@/api/sc/sale/order';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       PayType,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -284,8 +285,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印销售订单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.SALE_ORDER.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/sale/order/index.vue b/src/views/sc/sale/order/index.vue
index 7dc3a462fb136ee12f20ca983bf394f69d9635be..9338de9f52dc90250e4caae5cd62b999b56ecde1 100644
--- a/src/views/sc/sale/order/index.vue
+++ b/src/views/sc/sale/order/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/sale/order/modify.vue b/src/views/sc/sale/order/modify.vue
index 30070089a424a465309f67968834496396ea887c..81cc5f7ffe5a8afee6825c691e4442a2c72d80a2 100644
--- a/src/views/sc/sale/order/modify.vue
+++ b/src/views/sc/sale/order/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:order:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -148,7 +148,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="销售数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -166,7 +166,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/out/SaleOrderSelectorWithOut.vue b/src/views/sc/sale/out/SaleOrderSelectorWithOut.vue
index d67c54487d10e1c67c2376cf44327c6e907d4a8a..6a21821fb103fd0fe01e1e73570106cd36acc791 100644
--- a/src/views/sc/sale/out/SaleOrderSelectorWithOut.vue
+++ b/src/views/sc/sale/out/SaleOrderSelectorWithOut.vue
@@ -22,7 +22,7 @@
       <template #form>
         <!-- 查询条件 -->
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="销售单号" :span="6">
               <a-input v-model:value="searchParams.code" allow-clear />
             </j-form-item>
diff --git a/src/views/sc/sale/out/add-require.vue b/src/views/sc/sale/out/add-require.vue
index c39e442073f2f555298292cef11e23663680a81f..6c6cdeb2d36d07e0c2a02f7d1e8bbe899da9264e 100644
--- a/src/views/sc/sale/out/add-require.vue
+++ b/src/views/sc/sale/out/add-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:out:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" :before-open="beforeSelectSc" />
           </j-form-item>
@@ -117,7 +117,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -131,7 +131,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/out/add-un-require.vue b/src/views/sc/sale/out/add-un-require.vue
index 6f610bc7cc416f6c58eee9e3da151fe1cdca1045..61a19c456c5ac40ee4c677804e2a76fa18de6b79 100644
--- a/src/views/sc/sale/out/add-un-require.vue
+++ b/src/views/sc/sale/out/add-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:out:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -124,7 +124,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -138,7 +138,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/out/approve.vue b/src/views/sc/sale/out/approve.vue
index 6d857aad3b73f390031f56eb742b854bb2f46767..5b7163cb7de9cbeee65cc036a3381a882e388a79 100644
--- a/src/views/sc/sale/out/approve.vue
+++ b/src/views/sc/sale/out/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:out:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -103,7 +103,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -117,7 +117,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/out/detail.vue b/src/views/sc/sale/out/detail.vue
index e97377396dc82a0962bf3798966bec7d0be61f61..0414aadc0be808616ecdaf688ae1f8b0b63c7d7a 100644
--- a/src/views/sc/sale/out/detail.vue
+++ b/src/views/sc/sale/out/detail.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['sale:out:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -103,7 +103,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -117,7 +117,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
           </j-form-item>
@@ -139,13 +139,14 @@
 <script>
   import { defineComponent } from 'vue';
   import SaleOrderDetail from '@/views/sc/sale/order/detail.vue';
-  import { getLodop } from '@/utils/lodop';
   import * as api from '@/api/sc/sale/out';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       SaleOrderDetail,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -318,8 +319,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印销售出库单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.SALE_OUT.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/sale/out/index.vue b/src/views/sc/sale/out/index.vue
index 8c208ffefa0a78677d46ba51e049d2b005c6cbee..66af5f29b14a5b1527f2c82e9ad889c337c2500e 100644
--- a/src/views/sc/sale/out/index.vue
+++ b/src/views/sc/sale/out/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/sale/out/modify-require.vue b/src/views/sc/sale/out/modify-require.vue
index b3ec211b5aa93ac105d4b6664ed3a0365d4a28cc..562e89574745432029bddf03376cdaf5aff5ca5b 100644
--- a/src/views/sc/sale/out/modify-require.vue
+++ b/src/views/sc/sale/out/modify-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:out:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.sc.name }}
           </j-form-item>
@@ -161,7 +161,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -175,7 +175,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/out/modify-un-require.vue b/src/views/sc/sale/out/modify-un-require.vue
index 46fcda2a4a6c25cefeccd9eaab7d54d1fdb0ed14..b69cf6554f05c133f3a58963ce43df2dc562137c 100644
--- a/src/views/sc/sale/out/modify-un-require.vue
+++ b/src/views/sc/sale/out/modify-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:out:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -168,7 +168,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="出库数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -182,7 +182,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/return/SaleOutSheetSelectorWithReturn.vue b/src/views/sc/sale/return/SaleOutSheetSelectorWithReturn.vue
index 6a00d883d4d49754884b2e4f1f47924557961aae..f83f45efe2567f2f215949f72566df5dbb9eb229 100644
--- a/src/views/sc/sale/return/SaleOutSheetSelectorWithReturn.vue
+++ b/src/views/sc/sale/return/SaleOutSheetSelectorWithReturn.vue
@@ -21,7 +21,7 @@
     >
       <template #form>
         <j-border>
-          <j-form>
+          <j-form bordered>
             <j-form-item v-if="$utils.isEmpty(requestParams.code)" label="销售出库单号" :span="6">
               <a-input v-model:value="searchParams.code" allow-clear />
             </j-form-item>
diff --git a/src/views/sc/sale/return/add-require.vue b/src/views/sc/sale/return/add-require.vue
index 0eb9efa44e60b1ce9683e60da759cb674ac800f2..a4a86bd9ad0925728f6eb343b02894b5c694b27e 100644
--- a/src/views/sc/sale/return/add-require.vue
+++ b/src/views/sc/sale/return/add-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:return:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" :before-open="beforeSelectSc" />
           </j-form-item>
@@ -109,7 +109,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -123,7 +123,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/return/add-un-require.vue b/src/views/sc/sale/return/add-un-require.vue
index 43a34394b4ca376c9dff5d4db10d74d3573ff455..ce932758b9606dac842f4a518de4651c9e94ecaf 100644
--- a/src/views/sc/sale/return/add-un-require.vue
+++ b/src/views/sc/sale/return/add-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:return:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -119,7 +119,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -133,7 +133,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/return/approve.vue b/src/views/sc/sale/return/approve.vue
index ba10c29b7611702f90dee957d22fc78a8ccd1e94..813ae3855b9bb5202968bf362d4ee0e0273c27ec 100644
--- a/src/views/sc/sale/return/approve.vue
+++ b/src/views/sc/sale/return/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:return:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -98,7 +98,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -112,7 +112,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/return/detail.vue b/src/views/sc/sale/return/detail.vue
index 55b7e547cefb402c00089dcbfb57d547fd0f3be6..81611136f308239b79c498cea9be7d905310de8c 100644
--- a/src/views/sc/sale/return/detail.vue
+++ b/src/views/sc/sale/return/detail.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['sale:return:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
@@ -104,7 +104,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -118,7 +118,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" readonly />
           </j-form-item>
@@ -140,13 +140,14 @@
 <script>
   import { defineComponent } from 'vue';
   import OutSheetDetail from '@/views/sc/sale/out/detail.vue';
-  import { getLodop } from '@/utils/lodop';
   import * as api from '@/api/sc/sale/return';
+  import { printMix } from '@/mixins/print';
 
   export default defineComponent({
     components: {
       OutSheetDetail,
     },
+    mixins: [printMix],
     props: {
       id: {
         type: String,
@@ -320,8 +321,7 @@
         api
           .print(this.id)
           .then((res) => {
-            const LODOP = getLodop(res, '打印销售退货单');
-            LODOP.PREVIEW();
+            this.lodopPreview(this.$enums.PRINT_TYPE.SALE_RETURN.code, res);
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/sc/sale/return/index.vue b/src/views/sc/sale/return/index.vue
index a96e95fdb64cf906482b41c4f0a6708bd7210f34..1d16f9f5b72f05b245f7df5272722135993d301d 100644
--- a/src/views/sc/sale/return/index.vue
+++ b/src/views/sc/sale/return/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/sale/return/modify-require.vue b/src/views/sc/sale/return/modify-require.vue
index dfd5d1759ed6e70419e00a7c2cf17f2b58426483..196fb067411bd4c51e421cec3e0347b06b4297f9 100644
--- a/src/views/sc/sale/return/modify-require.vue
+++ b/src/views/sc/sale/return/modify-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:return:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.sc.name }}
           </j-form-item>
@@ -153,7 +153,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -167,7 +167,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/sale/return/modify-un-require.vue b/src/views/sc/sale/return/modify-un-require.vue
index 021cb928f89c9add22f8fb9d9fc3ef3b7e24e844..ef0960f53b99efdb284058f5e05f7860c93ded34 100644
--- a/src/views/sc/sale/return/modify-un-require.vue
+++ b/src/views/sc/sale/return/modify-un-require.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['sale:return:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
@@ -163,7 +163,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="退货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
@@ -177,7 +177,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/add.vue b/src/views/sc/stock/adjust/stock/add.vue
index d1cf05324b553e2fe0be8a1a06db62cb11a8e2ec..67428a0378de413c4a568f50e1e28df2ba7daf5a 100644
--- a/src/views/sc/stock/adjust/stock/add.vue
+++ b/src/views/sc/stock/adjust/stock/add.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:adjust:add']" v-loading="loading">
       <j-border>
         <j-form
@@ -93,7 +93,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调整品种数" :span="6">
             <a-input v-model:value="formData.productNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/approve.vue b/src/views/sc/stock/adjust/stock/approve.vue
index f558a0f046298401f0a7b31b21998fd233ce9028..1cbd78dd1eac387966725ede66f554b81faac3a7 100644
--- a/src/views/sc/stock/adjust/stock/approve.vue
+++ b/src/views/sc/stock/adjust/stock/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:adjust:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.scName }}
           </j-form-item>
@@ -84,7 +84,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调整品种数" :span="6">
             <a-input v-model:value="formData.productNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/batch-add-product.vue b/src/views/sc/stock/adjust/stock/batch-add-product.vue
index 9f6d79296571cd52d16717c2dafe40f3e6bd7217..0f9c8a2108b6fdb472231faf5cf1d7fce65c65bd 100644
--- a/src/views/sc/stock/adjust/stock/batch-add-product.vue
+++ b/src/views/sc/stock/adjust/stock/batch-add-product.vue
@@ -29,7 +29,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/detail.vue b/src/views/sc/stock/adjust/stock/detail.vue
index cf72cfd9ead5e0421c123818a9a4edda82376463..0c85b8e8f5828f9888224572b3506f1507bc831e 100644
--- a/src/views/sc/stock/adjust/stock/detail.vue
+++ b/src/views/sc/stock/adjust/stock/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['stock:adjust:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库" required>
             {{ formData.scName }}
           </j-form-item>
@@ -90,7 +90,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调整品种数" :span="6">
             <a-input v-model:value="formData.productNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/index.vue b/src/views/sc/stock/adjust/stock/index.vue
index d2066fb69a538a46ea336ffc8eb8d11ab5b4d075..aee16e00cb92edf58d6dc356edcf3d367d306448 100644
--- a/src/views/sc/stock/adjust/stock/index.vue
+++ b/src/views/sc/stock/adjust/stock/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/modify.vue b/src/views/sc/stock/adjust/stock/modify.vue
index 411ff1bf39a0dc7a0e5bebae5039690d8c1de92d..98b8cffec8da02e70e932cc7fad3bbf07018d445 100644
--- a/src/views/sc/stock/adjust/stock/modify.vue
+++ b/src/views/sc/stock/adjust/stock/modify.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:adjust:modify']" v-loading="loading">
       <j-border>
         <j-form
@@ -144,7 +144,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调整品种数" :span="6">
             <a-input v-model:value="formData.productNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/adjust/stock/reason/index.vue b/src/views/sc/stock/adjust/stock/reason/index.vue
index 9a4b3632f46679c7de383353f624456e28e61353..d4042f7dcd301fd42a2293a9824136b6ed740fd0 100644
--- a/src/views/sc/stock/adjust/stock/reason/index.vue
+++ b/src/views/sc/stock/adjust/stock/reason/index.vue
@@ -20,14 +20,14 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
-              <j-form-item label="编号" :span="6">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
-              <j-form-item label="名称" :span="6">
+              <j-form-item label="名称">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
-              <j-form-item label="状态" :span="6">
+              <j-form-item label="状态">
                 <a-select v-model:value="searchFormData.available" placeholder="全部" allow-clear>
                   <a-select-option
                     v-for="item in $enums.AVAILABLE.values()"
diff --git a/src/views/sc/stock/product-log/index.vue b/src/views/sc/stock/product-log/index.vue
index 95f250869765e5f32b69298bbbae0ef866b0b8c7..68e986d4afec7c4f4639eca8e38ce2276e89a7c3 100644
--- a/src/views/sc/stock/product-log/index.vue
+++ b/src/views/sc/stock/product-log/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="100px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="100px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="仓库">
                 <store-center-selector v-model:value="searchFormData.scId" />
               </j-form-item>
diff --git a/src/views/sc/stock/product/index.vue b/src/views/sc/stock/product/index.vue
index 3901ef70c860caa71db42c0ede8b9804a8a2b0f3..e0e4afb453d460c0e5cc3045ff7455a634148e3c 100644
--- a/src/views/sc/stock/product/index.vue
+++ b/src/views/sc/stock/product/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="仓库">
                 <store-center-selector v-model:value="searchFormData.scId" />
               </j-form-item>
diff --git a/src/views/sc/stock/take/plan/detail.vue b/src/views/sc/stock/take/plan/detail.vue
index c623c29944d80edb3835a1a6a925ed229438b726..746c8b904f177b131ee8c8513b8dac5a6633cd4d 100644
--- a/src/views/sc/stock/take/plan/detail.vue
+++ b/src/views/sc/stock/take/plan/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['stock:take:plan:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
diff --git a/src/views/sc/stock/take/plan/diff.vue b/src/views/sc/stock/take/plan/diff.vue
index a8778700dadb325d551f80abde8a0e2c235c45fa..a64f51952dcc75bfecb5c1dc9f6ff158fca70d82 100644
--- a/src/views/sc/stock/take/plan/diff.vue
+++ b/src/views/sc/stock/take/plan/diff.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['stock:take:plan:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
diff --git a/src/views/sc/stock/take/plan/handle.vue b/src/views/sc/stock/take/plan/handle.vue
index cf1c01a2810ce7dc674181da3e0b2369307a3bb0..1be717978a486f2f79f6c3f10c76808aa2f744a2 100644
--- a/src/views/sc/stock/take/plan/handle.vue
+++ b/src/views/sc/stock/take/plan/handle.vue
@@ -8,7 +8,7 @@
   >
     <div v-if="visible" v-permission="['stock:take:plan:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
diff --git a/src/views/sc/stock/take/plan/index.vue b/src/views/sc/stock/take/plan/index.vue
index 7533300e9c3149a205e44b512e3b2205c1d0ed8f..6e15db000a6b5d50e3e32456958cb0e578f552f6 100644
--- a/src/views/sc/stock/take/plan/index.vue
+++ b/src/views/sc/stock/take/plan/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/stock/take/pre/add.vue b/src/views/sc/stock/take/pre/add.vue
index 6a8abafe5acb552df532f6ed1edea79b6066d352..2a7bdb0cc780595b8f3672bb40c506189efd4843 100644
--- a/src/views/sc/stock/take/pre/add.vue
+++ b/src/views/sc/stock/take/pre/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:take:pre:add']" v-loading="loading">
       <j-border>
-        <j-form label-width="120px">
+        <j-form bordered label-width="120px">
           <j-form-item label="仓库" required>
             <store-center-selector
               v-model:value="formData.scId"
diff --git a/src/views/sc/stock/take/pre/batch-add-product.vue b/src/views/sc/stock/take/pre/batch-add-product.vue
index 46b32304093de363a278f3ebc2899c65bf9509a1..c83dea4353d13edfb176a7d646e2e55ba258b56d 100644
--- a/src/views/sc/stock/take/pre/batch-add-product.vue
+++ b/src/views/sc/stock/take/pre/batch-add-product.vue
@@ -29,7 +29,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/stock/take/pre/detail.vue b/src/views/sc/stock/take/pre/detail.vue
index f25f3e800d49af6e66d71b2b8cd35bd7d03dd6f9..5f42df909dfb3e90e7deeee825d64b536ee7dc2f 100644
--- a/src/views/sc/stock/take/pre/detail.vue
+++ b/src/views/sc/stock/take/pre/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['stock:take:pre:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="仓库">
             {{ formData.scName }}
           </j-form-item>
diff --git a/src/views/sc/stock/take/pre/index.vue b/src/views/sc/stock/take/pre/index.vue
index 9af4d1334bd5e1686da70407efc94307f2df65e1..4c57766e1d62dc72470d0fabb83a2c0deeeb47a8 100644
--- a/src/views/sc/stock/take/pre/index.vue
+++ b/src/views/sc/stock/take/pre/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="90px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="90px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/stock/take/pre/modify.vue b/src/views/sc/stock/take/pre/modify.vue
index 626310a9965ed95626474ad41271c4e3140f5df6..acf5cd6baa07a6f00071043d4655566bd15b5026 100644
--- a/src/views/sc/stock/take/pre/modify.vue
+++ b/src/views/sc/stock/take/pre/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:take:pre:modify']" v-loading="loading">
       <j-border>
-        <j-form label-width="120px">
+        <j-form bordered label-width="120px">
           <j-form-item label="仓库" required>
             <store-center-selector v-model:value="formData.scId" />
           </j-form-item>
diff --git a/src/views/sc/stock/take/sheet/add.vue b/src/views/sc/stock/take/sheet/add.vue
index 8a4f41b8fb5a0e2f1ed717b60bf9133347090da7..dacc8b9a7766fb14517656641e1b96f29dff0ed6 100644
--- a/src/views/sc/stock/take/sheet/add.vue
+++ b/src/views/sc/stock/take/sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:take:sheet:add']" v-loading="loading">
       <j-border>
-        <j-form label-width="120px">
+        <j-form bordered label-width="120px">
           <j-form-item label="关联盘点任务" required>
             <take-stock-plan-selector
               v-model:value="formData.takeStockPlanId"
diff --git a/src/views/sc/stock/take/sheet/approve.vue b/src/views/sc/stock/take/sheet/approve.vue
index 8d0226a249a0af496eeee5a12073a4e12ec63b13..0ec53c5c725308b4c51e10c157ce66eaf4d30387 100644
--- a/src/views/sc/stock/take/sheet/approve.vue
+++ b/src/views/sc/stock/take/sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:take:sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form label-width="120px">
+        <j-form bordered label-width="120px">
           <j-form-item label="关联盘点任务">
             <div>
               <a
diff --git a/src/views/sc/stock/take/sheet/batch-add-product.vue b/src/views/sc/stock/take/sheet/batch-add-product.vue
index 8430e2bf458af64c2e9c6913c81b6eaf0b1fe6e1..708a5501fb3d083b1989f46963c29248fd5dbae0 100644
--- a/src/views/sc/stock/take/sheet/batch-add-product.vue
+++ b/src/views/sc/stock/take/sheet/batch-add-product.vue
@@ -29,7 +29,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/stock/take/sheet/detail.vue b/src/views/sc/stock/take/sheet/detail.vue
index e067a5a8167438d36335a07b71bfe1d570e9239b..cb7493a2a11ef2514f8cd3a3bc9981bc44462aec 100644
--- a/src/views/sc/stock/take/sheet/detail.vue
+++ b/src/views/sc/stock/take/sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['stock:take:sheet:query']" v-loading="loading">
       <j-border>
-        <j-form label-width="120px">
+        <j-form bordered label-width="120px">
           <j-form-item label="关联盘点任务">
             <div>
               <a
diff --git a/src/views/sc/stock/take/sheet/index.vue b/src/views/sc/stock/take/sheet/index.vue
index 5397a4687150dd2ed246dc6bbf59fa85e3b72603..a60cc3a960f2f7e894fe48cf8c1d04059795c180 100644
--- a/src/views/sc/stock/take/sheet/index.vue
+++ b/src/views/sc/stock/take/sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="110px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="110px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/stock/take/sheet/modify.vue b/src/views/sc/stock/take/sheet/modify.vue
index eda461fd09b015de282cf6751da4deea408d4005..50feb66ef24c64e7a85f1cddc6893b54044e993d 100644
--- a/src/views/sc/stock/take/sheet/modify.vue
+++ b/src/views/sc/stock/take/sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:take:sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form label-width="120px">
+        <j-form bordered label-width="120px">
           <j-form-item label="关联盘点任务">
             <div>
               <a
diff --git a/src/views/sc/stock/transfer/add.vue b/src/views/sc/stock/transfer/add.vue
index b1b3da00521dd4a733be10df09a6e8c92151f01a..6e58338ae906c831185a2078fc3048c913c21e43 100644
--- a/src/views/sc/stock/transfer/add.vue
+++ b/src/views/sc/stock/transfer/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:sc-transfer:add']" v-loading="loading">
       <j-border>
-        <j-form ref="form" :model="formData" :rules="rules">
+        <j-form bordered ref="form" :model="formData" :rules="rules">
           <j-form-item label="转出仓库" required>
             <store-center-selector
               v-model:value="formData.sourceScId"
@@ -74,7 +74,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调拨数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/transfer/approve.vue b/src/views/sc/stock/transfer/approve.vue
index 2ff5fea7d42fb985add892182268cb9eab8c527b..06e1f28d6608785bfe2fdfc0fc6662a94d3a4a83 100644
--- a/src/views/sc/stock/transfer/approve.vue
+++ b/src/views/sc/stock/transfer/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:sc-transfer:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="转出仓库" required>
             {{ formData.sourceScName }}
           </j-form-item>
@@ -79,7 +79,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调拨数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/transfer/batch-add-product.vue b/src/views/sc/stock/transfer/batch-add-product.vue
index d15982cd77ca388563a1c61091f236407369d011..3f46762c4d02a49e4c602e6d4f7beb17114d9920 100644
--- a/src/views/sc/stock/transfer/batch-add-product.vue
+++ b/src/views/sc/stock/transfer/batch-add-product.vue
@@ -29,7 +29,7 @@
       >
         <template #form>
           <j-border>
-            <j-form>
+            <j-form bordered>
               <j-form-item label="商品">
                 <a-input v-model:value="searchFormData.condition" allow-clear />
               </j-form-item>
diff --git a/src/views/sc/stock/transfer/detail.vue b/src/views/sc/stock/transfer/detail.vue
index 477405e58a75c58dfadfba02b91d37e73d449037..ecaa6f6e31f87bc2e6a769048897a3424fcbdce4 100644
--- a/src/views/sc/stock/transfer/detail.vue
+++ b/src/views/sc/stock/transfer/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['stock:sc-transfer:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="转出仓库" required>
             {{ formData.sourceScName }}
           </j-form-item>
@@ -93,7 +93,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调拨数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/transfer/index.vue b/src/views/sc/stock/transfer/index.vue
index 543007c6b871f1f1e1245f6ae2a4650b1120668f..e27cd29f526898deeac214e91127147c7d654781 100644
--- a/src/views/sc/stock/transfer/index.vue
+++ b/src/views/sc/stock/transfer/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/sc/stock/transfer/modify.vue b/src/views/sc/stock/transfer/modify.vue
index 3cfebcaee2b59029e91a19f697bbe2230f54bb17..572128356509d2fec6b0cfe0403c83c91bbcad8e 100644
--- a/src/views/sc/stock/transfer/modify.vue
+++ b/src/views/sc/stock/transfer/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:sc-transfer:modify']" v-loading="loading">
       <j-border>
-        <j-form ref="form" :model="formData" :rules="rules">
+        <j-form bordered ref="form" :model="formData" :rules="rules">
           <j-form-item label="转出仓库" required>
             <store-center-selector
               v-model:value="formData.sourceScId"
@@ -124,7 +124,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="调拨数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/transfer/receive.vue b/src/views/sc/stock/transfer/receive.vue
index 50435b5df7b8c0f904e6391332b8ad7cf656fe16..b025b4d2f03094f5506ec78b07dbf0a8fce6b4e1 100644
--- a/src/views/sc/stock/transfer/receive.vue
+++ b/src/views/sc/stock/transfer/receive.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['stock:sc-transfer:receive']" v-loading="loading">
       <j-border>
-        <j-form ref="form">
+        <j-form bordered ref="form">
           <j-form-item label="转出仓库" required>
             <store-center-selector v-model:value="formData.sourceScId" :disabled="true" />
           </j-form-item>
@@ -115,7 +115,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="本次收货数量" :span="6">
             <a-input v-model:value="formData.totalNum" class="number-input" readonly />
           </j-form-item>
diff --git a/src/views/sc/stock/warning/index.vue b/src/views/sc/stock/warning/index.vue
index f75829e81cfbbd1af158ac6833e5fce634cb8cdb..ee121d0d60a9a389c203137cab32875b517ce884 100644
--- a/src/views/sc/stock/warning/index.vue
+++ b/src/views/sc/stock/warning/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="仓库">
                   <store-center-selector v-model:value="searchFormData.scId" />
                 </j-form-item>
diff --git a/src/views/settle/check-sheet/add.vue b/src/views/settle/check-sheet/add.vue
index 8d9612682fc8b35804b6c8318219ffb5ab3c17c8..cc798d7c68e55d71a210ea3e3b02c8baa5ab8b45 100644
--- a/src/views/settle/check-sheet/add.vue
+++ b/src/views/settle/check-sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:check-sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -68,7 +68,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -79,7 +79,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/check-sheet/approve.vue b/src/views/settle/check-sheet/approve.vue
index 914d716254d8c40cd61bf7c43158ffa244746a3c..e372eed7ddd1b5f3693fd2505c2a2ddb7395b216 100644
--- a/src/views/settle/check-sheet/approve.vue
+++ b/src/views/settle/check-sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:check-sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -180,7 +180,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -191,7 +191,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/check-sheet/detail.vue b/src/views/settle/check-sheet/detail.vue
index e8fca83d39b3ef0a5e649d1036aba68bd39342a1..80a0c147d9d87d8026a27ebbc9174b21cbc5f21b 100644
--- a/src/views/settle/check-sheet/detail.vue
+++ b/src/views/settle/check-sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['settle:check-sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -177,7 +177,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -188,7 +188,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/settle/check-sheet/index.vue b/src/views/settle/check-sheet/index.vue
index bc562f8e1db3768ae66bc06157f64a261a12157a..1158f64171d49e1ce7550a63194c0cc5267843f0 100644
--- a/src/views/settle/check-sheet/index.vue
+++ b/src/views/settle/check-sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/settle/check-sheet/modify.vue b/src/views/settle/check-sheet/modify.vue
index afade3b9a5428980bd358ff0ff5687c85e47feed..2b84e16037b3cdb764ac3794d0ef02c816085e92 100644
--- a/src/views/settle/check-sheet/modify.vue
+++ b/src/views/settle/check-sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:check-sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -121,7 +121,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="单据总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -132,7 +132,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/fee-sheet/add.vue b/src/views/settle/fee-sheet/add.vue
index df00a68006d220a064a99e5e6589cb2e4e4818f9..e8a961aa6dffe615b0990a2d24f29228b97d633e 100644
--- a/src/views/settle/fee-sheet/add.vue
+++ b/src/views/settle/fee-sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:fee-sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -70,7 +70,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -78,7 +78,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/fee-sheet/approve.vue b/src/views/settle/fee-sheet/approve.vue
index ac17f6dc6d92a6ba471a4436a19a84ff3b7799ec..912f95a4fccdf3e9b8485ceb5dd8dc19e6700041 100644
--- a/src/views/settle/fee-sheet/approve.vue
+++ b/src/views/settle/fee-sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:fee-sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -75,7 +75,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -83,7 +83,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/fee-sheet/detail.vue b/src/views/settle/fee-sheet/detail.vue
index 50fd0ef8fa6efa4a21c9af7a7fdaf9cd8b13e0b0..d0c96cbaa3deb24f413b08e81c97d332633552e1 100644
--- a/src/views/settle/fee-sheet/detail.vue
+++ b/src/views/settle/fee-sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['settle:fee-sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -82,7 +82,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -90,7 +90,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/settle/fee-sheet/index.vue b/src/views/settle/fee-sheet/index.vue
index a91582bf01ac550320acdce5481a89f073017b08..d720efcea470a4555a9842e59a70e6934deb9a9e 100644
--- a/src/views/settle/fee-sheet/index.vue
+++ b/src/views/settle/fee-sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/settle/fee-sheet/modify.vue b/src/views/settle/fee-sheet/modify.vue
index 49849ab088f3588b5fce16997da5d81c364250d3..bebe3abb0ce9b3f23b47e294bc39401c7e5352fa 100644
--- a/src/views/settle/fee-sheet/modify.vue
+++ b/src/views/settle/fee-sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:fee-sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -120,7 +120,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -128,7 +128,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/in-item/index.vue b/src/views/settle/in-item/index.vue
index 8422ecb327c55e1c28a3b9294db887ea5a2bd38b..7747bff03445ebe12afae19918bfe5ef6802d294 100644
--- a/src/views/settle/in-item/index.vue
+++ b/src/views/settle/in-item/index.vue
@@ -20,14 +20,14 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
-              <j-form-item label="编号" :span="6">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
-              <j-form-item label="名称" :span="6">
+              <j-form-item label="名称">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
-              <j-form-item label="状态" :span="6">
+              <j-form-item label="状态">
                 <a-select v-model:value="searchFormData.available" placeholder="全部" allow-clear>
                   <a-select-option
                     v-for="item in $enums.AVAILABLE.values()"
diff --git a/src/views/settle/out-item/index.vue b/src/views/settle/out-item/index.vue
index 77af2ab968c104cae4678795bff8dadc8f650b67..72a538ffd74b2ddaaf7fe8e47b8576fd52d0898a 100644
--- a/src/views/settle/out-item/index.vue
+++ b/src/views/settle/out-item/index.vue
@@ -20,14 +20,14 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
-              <j-form-item label="编号" :span="6">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
-              <j-form-item label="名称" :span="6">
+              <j-form-item label="名称">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
-              <j-form-item label="状态" :span="6">
+              <j-form-item label="状态">
                 <a-select v-model:value="searchFormData.available" placeholder="全部" allow-clear>
                   <a-select-option
                     v-for="item in $enums.AVAILABLE.values()"
diff --git a/src/views/settle/pre-sheet/add.vue b/src/views/settle/pre-sheet/add.vue
index f22c341aa45f8d987ed01b0e67a1477d6c647ceb..f2be86fe5d464e81675d249ad01cf22f5fb56851 100644
--- a/src/views/settle/pre-sheet/add.vue
+++ b/src/views/settle/pre-sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:pre-sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -51,7 +51,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -59,7 +59,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/pre-sheet/approve.vue b/src/views/settle/pre-sheet/approve.vue
index a56c4709bec5f4b9f19178c74781619175d96817..220905cb06608459396b4b52d931338d4588051e 100644
--- a/src/views/settle/pre-sheet/approve.vue
+++ b/src/views/settle/pre-sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:pre-sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -72,7 +72,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -80,7 +80,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/pre-sheet/detail.vue b/src/views/settle/pre-sheet/detail.vue
index 61c3ab641de5471d58ad0cb70345a09b61bcd341..5e649f337213726c76df840c803ed95176c11f81 100644
--- a/src/views/settle/pre-sheet/detail.vue
+++ b/src/views/settle/pre-sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['settle:pre-sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -79,7 +79,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -87,7 +87,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/settle/pre-sheet/index.vue b/src/views/settle/pre-sheet/index.vue
index a432ded28c411f20f093f30f54b967c165c424dc..e404d46577591679358c96418ad8a92040c3fa12 100644
--- a/src/views/settle/pre-sheet/index.vue
+++ b/src/views/settle/pre-sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/settle/pre-sheet/modify.vue b/src/views/settle/pre-sheet/modify.vue
index 16fe76b5fc329d4d32dab21080bebbfd72eca8f0..108ff42e25c659ef65adecfbecd2f1c27c60b80a 100644
--- a/src/views/settle/pre-sheet/modify.vue
+++ b/src/views/settle/pre-sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:pre-sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -101,7 +101,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="总金额" :span="6">
             <a-input v-model:value="formData.totalAmount" class="number-input" readonly />
           </j-form-item>
@@ -109,7 +109,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/sheet/add.vue b/src/views/settle/sheet/add.vue
index 4a5e0b233a68f4c3869180bffc89c57b54e56d29..038bf63992ffef69c6fa1353177b86dbb632a06c 100644
--- a/src/views/settle/sheet/add.vue
+++ b/src/views/settle/sheet/add.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:sheet:add']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -104,7 +104,7 @@
       </vxe-grid>
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未付款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -118,7 +118,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/sheet/approve.vue b/src/views/settle/sheet/approve.vue
index 6e74c2dd0958c8f98130b81bfe107dcfe436d67f..c218cfc00dfc138a918a17e5826ead677cd52d35 100644
--- a/src/views/settle/sheet/approve.vue
+++ b/src/views/settle/sheet/approve.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:sheet:approve']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -132,7 +132,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未付款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -146,7 +146,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/settle/sheet/detail.vue b/src/views/settle/sheet/detail.vue
index b02611f4918cd23d0c3fb68d4838dbea1d5b71f9..baf586f0f25806cefe2838d854db1390f6233a1a 100644
--- a/src/views/settle/sheet/detail.vue
+++ b/src/views/settle/sheet/detail.vue
@@ -9,7 +9,7 @@
   >
     <div v-if="visible" v-permission="['settle:sheet:query']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商">
             {{ formData.supplierName }}
           </j-form-item>
@@ -113,7 +113,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未付款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -127,7 +127,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" readonly />
           </j-form-item>
diff --git a/src/views/settle/sheet/index.vue b/src/views/settle/sheet/index.vue
index 88a3cc565541edaf68f289cb1548bc3af99fb875..0de83cd8db014e205d78dabd313b0b6a2b892317 100644
--- a/src/views/settle/sheet/index.vue
+++ b/src/views/settle/sheet/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="单据号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/settle/sheet/modify.vue b/src/views/settle/sheet/modify.vue
index 86b319e304eabb7186827d1c76bfbf1b73aaa764..d534feb70910e43274e401f2a4c4a305eb9fffa1 100644
--- a/src/views/settle/sheet/modify.vue
+++ b/src/views/settle/sheet/modify.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="simple-app-container">
+  <div class="app-card-container">
     <div v-permission="['settle:sheet:modify']" v-loading="loading">
       <j-border>
-        <j-form>
+        <j-form bordered>
           <j-form-item label="供应商" required>
             <supplier-selector
               v-model:value="formData.supplierId"
@@ -156,7 +156,7 @@
       <order-time-line :id="id" />
 
       <j-border title="合计">
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="未付款总金额" :span="6">
             <a-input v-model:value="formData.totalUnPayAmount" class="number-input" readonly />
           </j-form-item>
@@ -170,7 +170,7 @@
       </j-border>
 
       <j-border>
-        <j-form label-width="140px">
+        <j-form bordered label-width="140px">
           <j-form-item label="备注" :span="24" :content-nest="false">
             <a-textarea v-model:value.trim="formData.description" maxlength="200" />
           </j-form-item>
diff --git a/src/views/smart-work/file-box/search.vue b/src/views/smart-work/file-box/search.vue
index 9f8c264e8ed61520bfdf86a5f3f698a70cdddc6f..e059a5b4d65f496cddadbb8dd740a93e76618a12 100644
--- a/src/views/smart-work/file-box/search.vue
+++ b/src/views/smart-work/file-box/search.vue
@@ -24,7 +24,7 @@
     >
       <template #form>
         <j-border>
-          <j-form label-width="100px">
+          <j-form bordered label-width="100px">
             <j-form-item label="检索关键字">
               <a-input v-model:value="searchFormData.name" allow-clear />
             </j-form-item>
diff --git a/src/views/sys/login/LoginCaptchaModal.vue b/src/views/sys/login/LoginCaptchaModal.vue
index 9fadabc835ab989c10212ede27d93326be144ae3..dc0f1c83beb80d29fea2a8527864d403765653c6 100644
--- a/src/views/sys/login/LoginCaptchaModal.vue
+++ b/src/views/sys/login/LoginCaptchaModal.vue
@@ -19,6 +19,7 @@
           <template #title>点此获取验证码</template>
           <span>
             <a-image
+              class="cursor-pointer"
               :src="captchaData.image"
               @click="getCaptcha"
               :preview="false"
diff --git a/src/views/sys/login/SessionTimeoutLogin.vue b/src/views/sys/login/SessionTimeoutLogin.vue
index 16abf973c7f53a7e6143f55574fb113890733fb0..a9e6674d99026505ef6a0e0440c529edf1d489e9 100644
--- a/src/views/sys/login/SessionTimeoutLogin.vue
+++ b/src/views/sys/login/SessionTimeoutLogin.vue
@@ -28,7 +28,6 @@
   onMounted(() => {
     // 记录当前的UserId
     userId.value = userStore.getUserInfo?.userId;
-    console.log('Mounted', userStore.getUserInfo);
   });
 
   onBeforeUnmount(() => {
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 5362cf2f1089afa8235d6bf5dd612ed766c10cc7..1c93591403eff0ab102ac98b0ec62cd2e9dca6bc 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <page-wrapper content-full-height fixed-height>
+  <div class="app-simple-container">
     <div v-permission="['system:dept:query']">
       <a-row :gutter="20">
         <a-col :span="14">
@@ -71,6 +71,7 @@
                 :checkable="true"
                 :show-line="true"
                 :show-icon="true"
+                :height="70 * $vh"
                 v-model:expanded-keys="expandedKeys"
                 :field-names="{
                   children: 'children',
@@ -140,7 +141,7 @@
         @confirm="getDeptTrees"
       />
     </div>
-  </page-wrapper>
+  </div>
 </template>
 
 <script>
diff --git a/src/views/system/dept/modify.vue b/src/views/system/dept/modify.vue
index 4fdffc8104fece22afd8e6ab1e330cafd8caf94a..8f1896e3943b764cdb23f55c404ec7fc010a3d5a 100644
--- a/src/views/system/dept/modify.vue
+++ b/src/views/system/dept/modify.vue
@@ -17,7 +17,12 @@
         <a-input v-model:value.trim="formData.shortName" allow-clear />
       </a-form-item>
       <a-form-item label="上级部门" name="parentId">
-        <sys-dept-selector v-model:value="formData.parentId" :only-final="false" />
+        <sys-dept-selector
+          v-if="inited"
+          v-model:value="formData.parentId"
+          :request-params="{ available: formData.available ? true : undefined }"
+          :only-final="false"
+        />
       </a-form-item>
       <a-form-item label="状态" name="available">
         <a-select v-model:value="formData.available" allow-clear>
@@ -72,6 +77,7 @@
       return {
         // 是否显示加载框
         loading: false,
+        inited: false,
         // 表单数据
         formData: {},
         // 表单校验规则
@@ -141,6 +147,7 @@
           .get(this.id)
           .then((data) => {
             this.formData = data;
+            this.inited = true;
           })
           .finally(() => {
             this.loading = false;
diff --git a/src/views/system/dic/index.vue b/src/views/system/dic/index.vue
index 618a568b58fb4faac260916900ebf70dcf327f6c..8c7574bd26b7e00ef7130815787616515fef5567 100644
--- a/src/views/system/dic/index.vue
+++ b/src/views/system/dic/index.vue
@@ -27,7 +27,7 @@
           >
             <template #form>
               <j-border>
-                <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+                <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                   <j-form-item label="编号">
                     <a-input v-model:value="searchFormData.code" allow-clear />
                   </j-form-item>
diff --git a/src/views/system/dic/item/index.vue b/src/views/system/dic/item/index.vue
index 4f1d1d6f3f8f55bcbe2d8ffffaaffccb20755502..30ceec69e75736fe5711e2a68984209b80f172d4 100644
--- a/src/views/system/dic/item/index.vue
+++ b/src/views/system/dic/item/index.vue
@@ -26,7 +26,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="编号">
                   <a-input v-model:value="searchFormData.code" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/generate-code/constants.js b/src/views/system/generate-code/constants.js
index 64968a1cc103a95f9abf572175617a06c821eaf4..0c821b73ab78ff82745d95a2aa0a6bfb7663d864 100644
--- a/src/views/system/generate-code/constants.js
+++ b/src/views/system/generate-code/constants.js
@@ -1,30 +1,30 @@
 export const ruleList = [
   {
-    type: 1,
+    type: '1',
     name: '当前时间',
   },
   {
-    type: 2,
+    type: '2',
     name: '随机字符',
   },
   {
-    type: 3,
+    type: '3',
     name: '流水号',
   },
   {
-    type: 4,
+    type: '4',
     name: '随机整数',
   },
   {
-    type: 5,
+    type: '5',
     name: '雪花ID',
   },
   {
-    type: 6,
+    type: '6',
     name: '静态字符',
   },
   {
-    type: 7,
+    type: '7',
     name: 'UUID',
   },
 ];
diff --git a/src/views/system/generate-code/index.vue b/src/views/system/generate-code/index.vue
index 9b70547e90b4896236362039d57fd0652ad6ddda..f03ed63d2eeea260efa7597ba0d5a60faa6bd6ed 100644
--- a/src/views/system/generate-code/index.vue
+++ b/src/views/system/generate-code/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="规则ID">
                   <a-input v-model:value="searchFormData.id" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/generate-code/setting.vue b/src/views/system/generate-code/setting.vue
index 63650c34ccff33f4f9bdeb740bcb28c42c531f37..326a3979fafeee8a86109c871b97e433a2cf01de 100644
--- a/src/views/system/generate-code/setting.vue
+++ b/src/views/system/generate-code/setting.vue
@@ -67,7 +67,7 @@
               <a-form
                 :label-col="{ span: 4 }"
                 :wrapper-col="{ span: 16 }"
-                v-if="formData.type === 1"
+                v-if="formData.type === '1'"
               >
                 <a-form-item label="时间格式">
                   <a-input v-model:value="formData.pattern" allow-clear />
@@ -76,7 +76,7 @@
               <a-form
                 :label-col="{ span: 4 }"
                 :wrapper-col="{ span: 16 }"
-                v-if="formData.type === 2"
+                v-if="formData.type === '2'"
               >
                 <a-form-item label="可选字符">
                   <a-input v-model:value="formData.pool" allow-clear />
@@ -88,7 +88,7 @@
               <a-form
                 :label-col="{ span: 4 }"
                 :wrapper-col="{ span: 16 }"
-                v-if="formData.type === 3"
+                v-if="formData.type === '3'"
               >
                 <a-form-item label="唯一标识">
                   <a-input v-model:value="formData.key" allow-clear />
@@ -99,14 +99,20 @@
                 <a-form-item label="步长">
                   <a-input v-model:value="formData.step" allow-clear />
                 </a-form-item>
-                <a-form-item label="过期秒数">
+                <a-form-item label="滚动方式">
+                  <a-select v-model:value="formData.expireType">
+                    <a-select-option :value="0">按日期滚动</a-select-option>
+                    <a-select-option :value="1">按过期秒数滚动</a-select-option>
+                  </a-select>
+                </a-form-item>
+                <a-form-item label="过期秒数" v-if="formData.expireType === 1">
                   <a-input v-model:value="formData.expireSeconds" allow-clear />
                 </a-form-item>
               </a-form>
               <a-form
                 :label-col="{ span: 4 }"
                 :wrapper-col="{ span: 16 }"
-                v-if="formData.type === 4"
+                v-if="formData.type === '4'"
               >
                 <a-form-item label="随机个数">
                   <a-input v-model:value="formData.len" allow-clear />
@@ -115,7 +121,7 @@
               <a-form
                 :label-col="{ span: 4 }"
                 :wrapper-col="{ span: 16 }"
-                v-if="formData.type === 6"
+                v-if="formData.type === '6'"
               >
                 <a-form-item label="字符">
                   <a-input v-model:value="formData.val" allow-clear />
@@ -211,7 +217,9 @@
             this.list = configArr.map((item) => {
               return Object.assign({}, item, {
                 id: this.$utils.uuid(),
-                name: this.ruleList.filter((r) => r.type === item.type)[0].name,
+                name: this.ruleList.filter((r) => {
+                  return r.type === item.type;
+                })[0].name,
               });
             });
           })
@@ -226,23 +234,24 @@
         let initConfig = {
           id: this.$utils.uuid(),
         };
-        if (e.type === 1) {
+        if (e.type === '1') {
           initConfig.pattern = 'yyyyMMddHHmmss';
         }
-        if (e.type === 2) {
+        if (e.type === '2') {
           initConfig.pool = 'abcdefghijklmnopqrstuvwxyz';
           initConfig.len = 1;
         }
-        if (e.type === 3) {
+        if (e.type === '3') {
           initConfig.key = this.$utils.uuid();
           initConfig.len = 10;
           initConfig.step = 1;
+          initConfig.expireType = 0;
           initConfig.expireSeconds = 24 * 60 * 60;
         }
-        if (e.type === 4) {
+        if (e.type === '4') {
           initConfig.len = 1;
         }
-        if (e.type === 6) {
+        if (e.type === '6') {
           initConfig.val = 'A';
         }
         return Object.assign({}, e, initConfig);
@@ -290,7 +299,7 @@
 
         for (let i = 0; i < this.list.length; i++) {
           const node = this.list[i];
-          if (node.type === 2) {
+          if (node.type === '2') {
             if (this.$utils.isEmpty(node.pool)) {
               this.$msg.createError('【' + node.name + '】' + '可选字符不能为空！');
               return false;
@@ -305,7 +314,7 @@
               this.$msg.createError('【' + node.name + '】' + '随机个数必须是数字类型并且大于0！');
               return false;
             }
-          } else if (node.type === 3) {
+          } else if (node.type === '3') {
             if (this.$utils.isEmpty(node.key)) {
               this.$msg.createError('【' + node.name + '】' + '唯一标识不能为空！');
               return false;
@@ -331,16 +340,25 @@
               return false;
             }
 
-            if (this.$utils.isEmpty(node.expireSeconds)) {
-              this.$msg.createError('【' + node.name + '】' + '过期秒数不能为空！');
+            if (this.$utils.isEmpty(node.expireType)) {
+              this.$msg.createError('【' + node.name + '】' + '滚动方式不能为空！');
               return false;
             }
 
-            if (!this.$utils.isIntegerGtZero(node.expireSeconds)) {
-              this.$msg.createError('【' + node.name + '】' + '过期秒数必须是数字类型并且大于0！');
-              return false;
+            if (node.expireType === 1) {
+              if (this.$utils.isEmpty(node.expireSeconds)) {
+                this.$msg.createError('【' + node.name + '】' + '过期秒数不能为空！');
+                return false;
+              }
+
+              if (!this.$utils.isIntegerGtZero(node.expireSeconds)) {
+                this.$msg.createError(
+                  '【' + node.name + '】' + '过期秒数必须是数字类型并且大于0！',
+                );
+                return false;
+              }
             }
-          } else if (node.type === 4) {
+          } else if (node.type === '4') {
             if (this.$utils.isEmpty(node.len)) {
               this.$msg.createError('【' + node.name + '】' + '随机个数不能为空！');
               return false;
@@ -350,7 +368,7 @@
               this.$msg.createError('【' + node.name + '】' + '随机个数必须是数字类型并且大于0！');
               return false;
             }
-          } else if (node.type === 6) {
+          } else if (node.type === '6') {
             if (this.$utils.isEmpty(node.val)) {
               this.$msg.createError('【' + node.name + '】' + '字符不能为空！');
               return false;
diff --git a/src/views/system/mail-message/index.vue b/src/views/system/mail-message/index.vue
index fe01c2317fa7c9ec4ecd082cb0b9bdbec366d2c8..0665db77b5b43a221dc8959e5ccc6da35de5e509 100644
--- a/src/views/system/mail-message/index.vue
+++ b/src/views/system/mail-message/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="100px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="100px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="标题">
                   <a-input v-model:value="searchFormData.title" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 260a9f5b27ccc68efbba64c237c2fe6c6e58e610..d39fa13f0ff41acdb0b78b5069de1a6969663311 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -49,11 +49,11 @@
 
         <template #form>
           <j-border>
-            <j-form label-width="60px" @collapse="$refs.grid.refreshColumn()">
-              <j-form-item label="标题" :span="6">
+            <j-form bordered label-width="60px" @collapse="$refs.grid.refreshColumn()">
+              <j-form-item label="标题">
                 <a-input v-model:value="searchFormData.searchMenuName" allow-clear />
               </j-form-item>
-              <j-form-item label="状态" :span="6">
+              <j-form-item label="状态">
                 <a-select v-model:value="searchFormData.available" placeholder="全部" allow-clear>
                   <a-select-option :value="$enums.AVAILABLE.ENABLE.code">{{
                     '仅显示' + $enums.AVAILABLE.ENABLE.desc
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 7bafb27610ba19d275d259b94e58f6cee266760f..9c5295ca94b7f9760d9af0f501f3d775e18cc851 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="100px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="100px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="标题">
                   <a-input v-model:value="searchFormData.title" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/notice/publish.vue b/src/views/system/notice/publish.vue
index 6dc82cf4a2159c6dea57f259e604927081376164..0d57d29849182c352ae071eb4d0bc76eefbef48a 100644
--- a/src/views/system/notice/publish.vue
+++ b/src/views/system/notice/publish.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px">
+              <j-form bordered label-width="80px">
                 <j-form-item label="标题">
                   <a-input v-model:value="searchFormData.title" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/notify-group/add.vue b/src/views/system/notify-group/add.vue
index 111af6badebe153cae2b50a913fca3d27ef18be2..ff44728e7effdef32ab698924a2083ee168a4d60 100644
--- a/src/views/system/notify-group/add.vue
+++ b/src/views/system/notify-group/add.vue
@@ -53,6 +53,13 @@
         >
           <user-selector v-model:value="formData.userIds" :multiple="true" />
         </a-form-item>
+        <a-form-item
+          v-if="$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.USER_GROUP.equalsCode(formData.receiverType)"
+          label="用户组"
+          name="userGroupIds"
+        >
+          <user-group-selector v-model:value="formData.userGroupIds" :multiple="true" />
+        </a-form-item>
         <a-form-item label="消息类型" name="messageType">
           <a-checkbox-group v-model:value="formData.messageType" :options="messageTypeOptions" />
         </a-form-item>
@@ -93,6 +100,7 @@
           deptIds: [{ required: true, message: '请选择部门' }],
           roleIds: [{ required: true, message: '请选择角色' }],
           userIds: [{ required: true, message: '请选择用户' }],
+          userGroupIds: [{ required: true, message: '请选择用户组' }],
         },
       };
     },
@@ -133,6 +141,7 @@
           deptIds: [],
           roleIds: [],
           userIds: [],
+          userGroupIds: [],
         };
       },
       // 提交表单事件
@@ -159,6 +168,12 @@
               this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.DEPT.equalsCode(this.formData.receiverType)
             ) {
               params.receiverIds = this.formData.deptIds;
+            } else if (
+              this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.USER_GROUP.equalsCode(
+                this.formData.receiverType,
+              )
+            ) {
+              params.receiverIds = this.formData.userGroupIds;
             }
             api
               .create(params)
diff --git a/src/views/system/notify-group/index.vue b/src/views/system/notify-group/index.vue
index 060039cf311bf8b3a18771609d17b603e7b72d8c..032f8daf72a2ca8baf0e932e73b4fa006b7a4462 100644
--- a/src/views/system/notify-group/index.vue
+++ b/src/views/system/notify-group/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="名称">
                   <a-input v-model:value="searchFormData.name" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/notify-group/modify.vue b/src/views/system/notify-group/modify.vue
index c018641a774489a3e7cb01bd7447f013e8f55b26..2a4c511636850753ab6e4bf12684fac8b83dc271 100644
--- a/src/views/system/notify-group/modify.vue
+++ b/src/views/system/notify-group/modify.vue
@@ -53,6 +53,13 @@
         >
           <user-selector v-model:value="formData.userIds" :multiple="true" />
         </a-form-item>
+        <a-form-item
+          v-if="$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.USER_GROUP.equalsCode(formData.receiverType)"
+          label="用户组"
+          name="userGroupIds"
+        >
+          <user-group-selector v-model:value="formData.userGroupIds" :multiple="true" />
+        </a-form-item>
         <a-form-item label="消息类型" name="messageType">
           <a-checkbox-group v-model:value="formData.messageType" :options="messageTypeOptions" />
         </a-form-item>
@@ -62,7 +69,7 @@
               v-for="item in $enums.AVAILABLE.values()"
               :key="item.code"
               :value="item.code"
-            >{{ item.desc }}</a-select-option
+              >{{ item.desc }}</a-select-option
             >
           </a-select>
         </a-form-item>
@@ -88,16 +95,6 @@
   export default defineComponent({
     // 使用组件
     components: {},
-    computed: {
-      messageTypeOptions() {
-        return this.$enums.SYS_NOTIFY_GROUP_MESSAGE_TYPE.values().map((item) => {
-          return {
-            label: item.desc,
-            value: item.code,
-          };
-        });
-      },
-    },
     props: {
       id: {
         type: String,
@@ -120,10 +117,21 @@
           deptIds: [{ required: true, message: '请选择部门' }],
           roleIds: [{ required: true, message: '请选择角色' }],
           userIds: [{ required: true, message: '请选择用户' }],
+          userGroupIds: [{ required: true, message: '请选择用户组' }],
           available: [{ required: true, message: '请选择状态' }],
         },
       };
     },
+    computed: {
+      messageTypeOptions() {
+        return this.$enums.SYS_NOTIFY_GROUP_MESSAGE_TYPE.values().map((item) => {
+          return {
+            label: item.desc,
+            value: item.code,
+          };
+        });
+      },
+    },
     created() {
       this.initFormData();
     },
@@ -150,6 +158,7 @@
           deptIds: [],
           roleIds: [],
           userIds: [],
+          userGroupIds: [],
           available: '',
         };
       },
@@ -158,14 +167,7 @@
         this.$refs.form.validate().then((valid) => {
           if (valid) {
             this.loading = true;
-            const params = {
-              id: this.id,
-              name: this.formData.name,
-              receiverType: this.formData.receiverType,
-              messageType: this.formData.messageType,
-              description: this.formData.description,
-              available: this.formData.available,
-            };
+            const params = this.formData;
 
             if (
               this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.USER.equalsCode(this.formData.receiverType)
@@ -179,6 +181,12 @@
               this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.DEPT.equalsCode(this.formData.receiverType)
             ) {
               params.receiverIds = this.formData.deptIds;
+            } else if (
+              this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.USER_GROUP.equalsCode(
+                this.formData.receiverType,
+              )
+            ) {
+              params.receiverIds = this.formData.userGroupIds;
             }
             api
               .update(params)
@@ -217,6 +225,10 @@
               this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.DEPT.equalsCode(data.receiverType)
             ) {
               data.deptIds = data.receiverIds;
+            } else if (
+              this.$enums.SYS_NOTIFY_GROUP_RECEIVER_TYPE.USER_GROUP.equalsCode(data.receiverType)
+            ) {
+              data.userGroupIds = data.receiverIds;
             }
             this.formData = data;
           })
diff --git a/src/views/system/open-domain/add.vue b/src/views/system/open-domain/add.vue
index c9990d2eca2db292446549643f35d8cb29d52b07..197f785b16a29daa6cd0e843eba887b759e53683 100644
--- a/src/views/system/open-domain/add.vue
+++ b/src/views/system/open-domain/add.vue
@@ -60,6 +60,7 @@
         rules: {
           name: [{ required: true, message: '请输入名称' }],
           apiSecret: [{ required: true, message: '请输入Api密钥' }],
+          tenantId: [{ required: true, message: '请选择租户' }],
         },
       };
     },
diff --git a/src/views/system/open-domain/index.vue b/src/views/system/open-domain/index.vue
index dce1169461ce102c3d7177f3ad572e38bd8b2aaa..27cfe476f2fc46440461a7de62cefc85f1002727 100644
--- a/src/views/system/open-domain/index.vue
+++ b/src/views/system/open-domain/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="ID">
                 <a-input v-model:value="searchFormData.id" allow-clear />
               </j-form-item>
diff --git a/src/views/system/open-domain/modify.vue b/src/views/system/open-domain/modify.vue
index ddf516de0283669fa8f8688495b3d260de2ff64f..64d773aa18446b582dd31d6e4678a725f2603482 100644
--- a/src/views/system/open-domain/modify.vue
+++ b/src/views/system/open-domain/modify.vue
@@ -77,6 +77,7 @@
         // 表单校验规则
         rules: {
           name: [{ required: true, message: '请输入名称' }],
+          tenantId: [{ required: true, message: '请选择租户' }],
           available: [{ required: true, message: '请选择状态' }],
         },
       };
diff --git a/src/views/system/oplog/index.vue b/src/views/system/oplog/index.vue
index bcd348d58c2c75b9c0f1cc65fc45a5169644a7ba..a225ab47f57e42f6da1525590262e4d1adf25411 100644
--- a/src/views/system/oplog/index.vue
+++ b/src/views/system/oplog/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="日志名称">
                 <a-input v-model:value="searchFormData.name" allow-clear />
               </j-form-item>
diff --git a/src/views/system/parameter/index.vue b/src/views/system/parameter/index.vue
index a064cc790b017ce19cbfab38fa3036a569ea888b..72b3ce58a5c0a6aee3aac23a8c3cc90398e8c229 100644
--- a/src/views/system/parameter/index.vue
+++ b/src/views/system/parameter/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="键">
                   <a-input v-model:value="searchFormData.pmKey" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/role/add.vue b/src/views/system/role/add.vue
index 6fb93ca431a7333729c295a8166f59a2f561e385..4825ae824bc18dac28652d319dd2cc2887c10a77 100644
--- a/src/views/system/role/add.vue
+++ b/src/views/system/role/add.vue
@@ -28,6 +28,9 @@
         <a-form-item label="名称" name="name">
           <a-input v-model:value.trim="formData.name" allow-clear />
         </a-form-item>
+        <a-form-item label="分类" name="categoryId">
+          <sys-role-category-selector v-model:value="formData.categoryId" />
+        </a-form-item>
         <a-form-item label="权限" name="permission">
           <a-input v-model:value.trim="formData.permission" allow-clear />
         </a-form-item>
@@ -66,6 +69,7 @@
         rules: {
           code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
           name: [{ required: true, message: '请输入名称' }],
+          categoryId: [{ required: true, message: '请选择分类' }],
         },
       };
     },
@@ -94,6 +98,7 @@
           description: '',
           name: '',
           shortName: '',
+          categoryId: '',
         };
       },
       // 提交表单事件
diff --git a/src/views/system/role/category-tree.vue b/src/views/system/role/category-tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..646b3bc080643f7719e536aa22b6a3a88fd21443
--- /dev/null
+++ b/src/views/system/role/category-tree.vue
@@ -0,0 +1,93 @@
+<template>
+  <a-card :body-style="{ height: height + 'px', padding: '10px' }">
+    <a-tree
+      :tree-data="treeData"
+      default-expand-all
+      show-line
+      :default-expanded-keys="expandedKeys"
+      :v-model:selected-keys="selectedKeys"
+      :field-names="{
+        children: 'children',
+        title: 'name',
+        key: 'id',
+      }"
+      @select="onSelect"
+    >
+      <template #title="{ id: treeKey, name }">
+        <a-dropdown :trigger="['contextmenu']">
+          <span>{{ name }}</span>
+          <template #overlay>
+            <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+              <a-menu-item v-if="$utils.isEqualWithStr(0, treeKey)" key="1">新增子项</a-menu-item>
+              <a-menu-item v-if="!$utils.isEqualWithStr(0, treeKey)" key="2">编辑</a-menu-item>
+              <a-menu-item v-if="!$utils.isEqualWithStr(0, treeKey)" key="3">删除</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </template>
+    </a-tree>
+    <add-category ref="addCategoryDialog" @confirm="doSearch" />
+    <modify-category :id="id" ref="updateCategoryDialog" @confirm="doSearch" />
+  </a-card>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import AddCategory from './category/add.vue';
+  import ModifyCategory from './category/modify.vue';
+  import * as api from '@/api/system/role-category';
+
+  export default defineComponent({
+    components: {
+      AddCategory,
+      ModifyCategory,
+    },
+    props: {
+      height: {
+        type: Number,
+        default: 100,
+      },
+    },
+    data() {
+      return {
+        treeData: [
+          {
+            id: 0,
+            name: '全部分类',
+            children: [],
+          },
+        ],
+        expandedKeys: [0],
+        selectedKeys: [],
+        id: '',
+      };
+    },
+    created() {
+      this.doSearch();
+    },
+    methods: {
+      onContextMenuClick(treeKey, menuKey) {
+        if (menuKey === '1') {
+          this.$refs.addCategoryDialog.openDialog();
+        } else if (menuKey === '2') {
+          this.id = treeKey;
+          this.$refs.updateCategoryDialog.openDialog();
+        } else if (menuKey === '3') {
+          this.$msg.createConfirm('是否确认删除此分类？').then(() => {
+            api.deleteById(treeKey).then(() => {
+              this.$msg.createSuccess('删除成功！');
+              this.doSearch();
+            });
+          });
+        }
+      },
+      doSearch() {
+        api.query().then((res) => {
+          this.treeData[0].children = [...res.map((item) => Object.assign({ parentId: 0 }, item))];
+        });
+      },
+      onSelect(keys) {
+        this.$emit('change', keys[0]);
+      },
+    },
+  });
+</script>
diff --git a/src/views/system/role/category/add.vue b/src/views/system/role/category/add.vue
new file mode 100644
index 0000000000000000000000000000000000000000..88999a86613e78bcb71546dc465d2d9dab4ed709
--- /dev/null
+++ b/src/views/system/role/category/add.vue
@@ -0,0 +1,107 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="新增"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="编号" name="code">
+          <a-input v-model:value.trim="formData.code" allow-clear />
+        </a-form-item>
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { validCode } from '@/utils/validate';
+  import * as api from '@/api/system/role-category';
+
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入名称' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          code: '',
+          name: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .create(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('新增成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+      },
+    },
+  });
+</script>
diff --git a/src/views/system/role/category/modify.vue b/src/views/system/role/category/modify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b6a40ff6c88166dcea09ceb6ebe028c8bc416c0
--- /dev/null
+++ b/src/views/system/role/category/modify.vue
@@ -0,0 +1,131 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="修改"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="编号" name="code">
+          <a-input v-model:value.trim="formData.code" allow-clear />
+        </a-form-item>
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value.trim="formData.name" allow-clear />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import { validCode } from '@/utils/validate';
+  import * as api from '@/api/system/role-category';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入名称' }],
+        },
+      };
+    },
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => {
+          this.$nextTick(() => this.open());
+        });
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          id: '',
+          code: '',
+          name: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            api
+              .update(this.formData)
+              .then(() => {
+                this.$msg.createSuccess('修改成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      loadFormData() {
+        this.loading = true;
+        api
+          .get(this.id)
+          .then((data) => {
+            this.formData = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index c9d8b9acf098fdef82e3213d479d0518604e844a..261233ddefe3e7fa438626c65b279bc48fd15c9f 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,115 +1,130 @@
 <template>
   <div v-permission="['system:role:query']">
-    <page-wrapper content-full-height fixed-height>
-      <!-- 数据列表 -->
-      <vxe-grid
-        id="Role"
-        ref="grid"
-        resizable
-        show-overflow
-        highlight-hover-row
-        keep-source
-        row-id="id"
-        :custom-config="{}"
-        :proxy-config="proxyConfig"
-        :columns="tableColumn"
-        :toolbar-config="toolbarConfig"
-        :pager-config="{}"
-        :loading="loading"
-        height="auto"
-      >
-        <template #form>
-          <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
-              <j-form-item label="编号">
-                <a-input v-model:value="searchFormData.code" allow-clear />
-              </j-form-item>
-              <j-form-item label="名称">
-                <a-input v-model:value="searchFormData.name" allow-clear />
-              </j-form-item>
-              <j-form-item label="状态">
-                <a-select v-model:value="searchFormData.available" placeholder="全部" allow-clear>
-                  <a-select-option
-                    v-for="item in $enums.AVAILABLE.values()"
-                    :key="item.code"
-                    :value="item.code"
-                    >{{ item.desc }}</a-select-option
-                  >
-                </a-select>
-              </j-form-item>
-            </j-form>
-          </j-border>
-        </template>
-        <!-- 工具栏 -->
-        <template #toolbar_buttons>
-          <a-space>
-            <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
-            <a-button
-              v-permission="['system:role:add']"
-              type="primary"
-              :icon="h(PlusOutlined)"
-              @click="$refs.addDialog.openDialog()"
-              >新增</a-button
-            >
-            <a-button
-              v-permission="['system:role:permission']"
-              :icon="h(ThunderboltOutlined)"
-              @click="batchSetting"
-              >批量授权</a-button
-            >
-            <a-button
-              v-permission="['system:role:permission']"
-              :icon="h(SettingOutlined)"
-              @click="batchDataPermmission"
-              >批量数据权限</a-button
-            >
-            <a-dropdown v-permission="['system:role:modify']">
-              <template #overlay>
-                <a-menu @click="handleCommand">
-                  <a-menu-item key="batchEnable" :icon="h(CheckOutlined)">批量启用 </a-menu-item>
-                  <a-menu-item key="batchUnable" :icon="h(StopOutlined)">批量停用 </a-menu-item>
-                </a-menu>
-              </template>
-              <a-button>更多<DownOutlined /></a-button>
-            </a-dropdown>
-          </a-space>
-        </template>
+    <a-row>
+      <a-col :span="4">
+        <page-wrapper content-full-height fixed-height content-class="!mr-0">
+          <category-tree style="height: 100%" @change="(e) => doSearch(e)" />
+        </page-wrapper>
+      </a-col>
+      <a-col :span="20">
+        <page-wrapper content-full-height fixed-height>
+          <!-- 数据列表 -->
+          <vxe-grid
+            id="Role"
+            ref="grid"
+            resizable
+            show-overflow
+            highlight-hover-row
+            keep-source
+            row-id="id"
+            :custom-config="{}"
+            :proxy-config="proxyConfig"
+            :columns="tableColumn"
+            :toolbar-config="toolbarConfig"
+            :pager-config="{}"
+            :loading="loading"
+            height="auto"
+          >
+            <template #form>
+              <j-border>
+                <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
+                  <j-form-item label="编号">
+                    <a-input v-model:value="searchFormData.code" allow-clear />
+                  </j-form-item>
+                  <j-form-item label="名称">
+                    <a-input v-model:value="searchFormData.name" allow-clear />
+                  </j-form-item>
+                  <j-form-item label="状态">
+                    <a-select
+                      v-model:value="searchFormData.available"
+                      placeholder="全部"
+                      allow-clear
+                    >
+                      <a-select-option
+                        v-for="item in $enums.AVAILABLE.values()"
+                        :key="item.code"
+                        :value="item.code"
+                        >{{ item.desc }}</a-select-option
+                      >
+                    </a-select>
+                  </j-form-item>
+                </j-form>
+              </j-border>
+            </template>
+            <!-- 工具栏 -->
+            <template #toolbar_buttons>
+              <a-space>
+                <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+                <a-button
+                  v-permission="['system:role:add']"
+                  type="primary"
+                  :icon="h(PlusOutlined)"
+                  @click="$refs.addDialog.openDialog()"
+                  >新增</a-button
+                >
+                <a-button
+                  v-permission="['system:role:permission']"
+                  :icon="h(ThunderboltOutlined)"
+                  @click="batchSetting"
+                  >批量授权</a-button
+                >
+                <a-button
+                  v-permission="['system:role:permission']"
+                  :icon="h(SettingOutlined)"
+                  @click="batchDataPermmission"
+                  >批量数据权限</a-button
+                >
+                <a-dropdown v-permission="['system:role:modify']">
+                  <template #overlay>
+                    <a-menu @click="handleCommand">
+                      <a-menu-item key="batchEnable" :icon="h(CheckOutlined)"
+                        >批量启用
+                      </a-menu-item>
+                      <a-menu-item key="batchUnable" :icon="h(StopOutlined)">批量停用 </a-menu-item>
+                    </a-menu>
+                  </template>
+                  <a-button>更多<DownOutlined /></a-button>
+                </a-dropdown>
+              </a-space>
+            </template>
 
-        <!-- 状态 列自定义内容 -->
-        <template #available_default="{ row }">
-          <available-tag :available="row.available" />
-        </template>
+            <!-- 状态 列自定义内容 -->
+            <template #available_default="{ row }">
+              <available-tag :available="row.available" />
+            </template>
 
-        <!-- 操作 列自定义内容 -->
-        <template #action_default="{ row }">
-          <table-action outside :actions="createActions(row)" />
-        </template>
-      </vxe-grid>
+            <!-- 操作 列自定义内容 -->
+            <template #action_default="{ row }">
+              <table-action outside :actions="createActions(row)" />
+            </template>
+          </vxe-grid>
 
-      <!-- 新增窗口 -->
-      <add ref="addDialog" @confirm="search" />
+          <!-- 新增窗口 -->
+          <add ref="addDialog" @confirm="search" />
 
-      <!-- 修改窗口 -->
-      <modify :id="id" ref="updateDialog" @confirm="search" />
+          <!-- 修改窗口 -->
+          <modify :id="id" ref="updateDialog" @confirm="search" />
 
-      <!-- 查看窗口 -->
-      <detail :id="id" ref="viewDialog" />
+          <!-- 查看窗口 -->
+          <detail :id="id" ref="viewDialog" />
 
-      <!-- 授权窗口 -->
-      <permission ref="permissionDialog" :ids="ids" @confirm="search" />
+          <!-- 授权窗口 -->
+          <permission ref="permissionDialog" :ids="ids" @confirm="search" />
 
-      <!-- 数据权限窗口 -->
-      <data-permission
-        ref="dataPermissionDialog"
-        :biz-id="id"
-        :biz-type="$enums.SYS_DATA_PERMISSION_DATA_BIZ_TYPE.ROLE.code"
-      />
-      <batch-data-permission
-        ref="batchDataPermissionDialog"
-        :biz-ids="ids"
-        :biz-type="$enums.SYS_DATA_PERMISSION_DATA_BIZ_TYPE.ROLE.code"
-      />
-    </page-wrapper>
+          <!-- 数据权限窗口 -->
+          <data-permission
+            ref="dataPermissionDialog"
+            :biz-id="id"
+            :biz-type="$enums.SYS_DATA_PERMISSION_DATA_BIZ_TYPE.ROLE.code"
+          />
+          <batch-data-permission
+            ref="batchDataPermissionDialog"
+            :biz-ids="ids"
+            :biz-type="$enums.SYS_DATA_PERMISSION_DATA_BIZ_TYPE.ROLE.code"
+          />
+        </page-wrapper>
+      </a-col>
+    </a-row>
 
     <!-- 批量操作 -->
     <batch-handler
@@ -155,10 +170,12 @@
     DownOutlined,
   } from '@ant-design/icons-vue';
   import * as api from '@/api/system/role';
+  import CategoryTree from './category-tree.vue';
 
   export default defineComponent({
     name: 'Role',
     components: {
+      CategoryTree,
       Add,
       Modify,
       Detail,
@@ -187,6 +204,7 @@
         // 查询列表的查询条件
         searchFormData: {
           available: true,
+          categoryId: '',
         },
         // 工具栏配置
         toolbarConfig: {
@@ -356,6 +374,19 @@
         this.ids = records.map((item) => item.id);
         this.$nextTick(() => this.$refs.batchDataPermissionDialog.openDialog());
       },
+      doSearch(categoryId) {
+        if (!this.$utils.isEmpty(categoryId)) {
+          if (this.$utils.isEqualWithStr(0, categoryId)) {
+            this.searchFormData.categoryId = '';
+          } else {
+            this.searchFormData.categoryId = categoryId;
+          }
+        } else {
+          this.searchFormData.categoryId = '';
+        }
+
+        this.search();
+      },
     },
   });
 </script>
diff --git a/src/views/system/role/modify.vue b/src/views/system/role/modify.vue
index fcf63d41fcf6335f07c59e06ef52de9093c5ec56..dbc1958ecfa2da1d00e773940dcb2e451b4be229 100644
--- a/src/views/system/role/modify.vue
+++ b/src/views/system/role/modify.vue
@@ -21,6 +21,9 @@
         <a-form-item label="名称" name="name">
           <a-input v-model:value.trim="formData.name" allow-clear />
         </a-form-item>
+        <a-form-item label="分类" name="categoryId">
+          <sys-role-category-selector v-model:value="formData.categoryId" />
+        </a-form-item>
         <a-form-item label="权限" name="permission">
           <a-input v-model:value.trim="formData.permission" allow-clear />
         </a-form-item>
@@ -76,6 +79,7 @@
         rules: {
           code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
           name: [{ required: true, message: '请输入名称' }],
+          categoryId: [{ required: true, message: '请选择分类' }],
           available: [{ required: true, message: '请选择状态' }],
         },
       };
@@ -104,6 +108,7 @@
           permission: '',
           available: '',
           description: '',
+          categoryId: '',
         };
       },
       // 提交表单事件
diff --git a/src/views/system/role/permission.vue b/src/views/system/role/permission.vue
index f54704eec7061ff6ef756c07495b09ff58039f88..aebab9bcf117571316f61949e50f1e7f033fada0 100644
--- a/src/views/system/role/permission.vue
+++ b/src/views/system/role/permission.vue
@@ -15,10 +15,18 @@
         keep-source
         row-id="id"
         :max-height="$vh * 80"
-        :tree-config="{}"
+        :tree-config="{
+          expandAll: true,
+        }"
         :export-config="{}"
         :data="tableData"
-        :checkbox-config="{ trigger: 'row', checkRowKeys: selectedRows }"
+        :checkbox-config="{
+          trigger: 'row',
+          checkRowKeys: selectedRows,
+          checkStrictly: true,
+          range: true,
+          highlight: true,
+        }"
         :columns="tableColumn"
       >
         <!-- 类型 列自定义内容 -->
@@ -120,11 +128,7 @@
             const selectedMenus = [];
             this.$utils.eachTree(res, (item) => {
               if (item.selected) {
-                if (this.$utils.isEmpty(item.children)) {
-                  selectedMenus.push(item.id);
-                }
-
-                item.selected = false;
+                selectedMenus.push(item.id);
               }
             });
 
diff --git a/src/views/system/site-message/index.vue b/src/views/system/site-message/index.vue
index 83b079a03ea61b919113c501896a0a4ed02412ab..bcf9ebd9513a27382d4bff80009a5211976ce98e 100644
--- a/src/views/system/site-message/index.vue
+++ b/src/views/system/site-message/index.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="100px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="100px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="标题">
                   <a-input v-model:value="searchFormData.title" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/site-message/manage.vue b/src/views/system/site-message/manage.vue
index 880dca182f6e42a3f9d0f1038b3747a54bd61c88..8dd927924dd58541f8c9a72216197a1df346bb37 100644
--- a/src/views/system/site-message/manage.vue
+++ b/src/views/system/site-message/manage.vue
@@ -21,7 +21,7 @@
         >
           <template #form>
             <j-border>
-              <j-form label-width="100px" @collapse="$refs.grid.refreshColumn()">
+              <j-form bordered label-width="100px" @collapse="$refs.grid.refreshColumn()">
                 <j-form-item label="标题">
                   <a-input v-model:value="searchFormData.title" allow-clear />
                 </j-form-item>
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index 7be670ff792d62e650ab89116da50e132de3ba0a..5b32cfec76333ccfbbbc7a933fa3715ff44130bd 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="租户ID">
                 <a-input v-model:value="searchFormData.tenantId" allow-clear />
               </j-form-item>
diff --git a/src/views/system/user-group/add.vue b/src/views/system/user-group/add.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2cab47984f0d01493868a0882bcd6fd76dff50ec
--- /dev/null
+++ b/src/views/system/user-group/add.vue
@@ -0,0 +1,142 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="新增"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-loading="loading" v-permission="['system:user-group:add']">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="编号" name="code">
+          <a-input-group compact>
+            <a-input
+              v-model:value.trim="formData.code"
+              style="width: calc(100% - 75px)"
+              allow-clear
+            />
+            <a-button type="primary" @click="onGenerateCode">点此生成</a-button>
+          </a-input-group>
+        </a-form-item>
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value="formData.name" allow-clear />
+        </a-form-item>
+        <a-form-item label="用户" name="userIds">
+          <user-selector v-model:value="formData.userIds" :multiple="true" />
+        </a-form-item>
+        <a-form-item label="备注" name="description">
+          <a-textarea v-model:value.trim="formData.description" />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/system/user-group';
+  import { generateCode } from '@/api/components';
+  import { validCode } from '@/utils/validate';
+
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入名称' }],
+          userIds: [{ required: true, message: '请选择用户' }],
+        },
+      };
+    },
+    computed: {
+      messageTypeOptions() {
+        return this.$enums.SYS_NOTIFY_GROUP_MESSAGE_TYPE.values().map((item) => {
+          return {
+            label: item.desc,
+            value: item.code,
+          };
+        });
+      },
+    },
+    created() {
+      // 初始化表单数据
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          code: '',
+          name: '',
+          userIds: [],
+          description: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            const params = this.formData;
+
+            api
+              .create(params)
+              .then(() => {
+                this.$msg.createSuccess('新增成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化表单数据
+        this.initFormData();
+
+        this.onGenerateCode();
+      },
+      onGenerateCode() {
+        generateCode(this.$enums.GENERATE_CODE_TYPE.USER_GROUP.code).then((res) => {
+          this.formData.code = res;
+        });
+      },
+    },
+  });
+</script>
diff --git a/src/views/system/user-group/index.vue b/src/views/system/user-group/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cf68cf6f381ed74b5673348612fe0f56f64c8392
--- /dev/null
+++ b/src/views/system/user-group/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <div v-permission="['system:user-group:query']">
+      <page-wrapper content-full-height fixed-height>
+        <!-- 数据列表 -->
+        <vxe-grid
+          id="SysNotifyGroup"
+          ref="grid"
+          resizable
+          show-overflow
+          highlight-hover-row
+          keep-source
+          row-id="id"
+          :proxy-config="proxyConfig"
+          :columns="tableColumn"
+          :custom-config="{}"
+          :toolbar-config="toolbarConfig"
+          :pager-config="{}"
+          :loading="loading"
+          height="auto"
+        >
+          <template #form>
+            <j-border>
+              <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
+                <j-form-item label="编号">
+                  <a-input v-model:value="searchFormData.code" allow-clear />
+                </j-form-item>
+                <j-form-item label="名称">
+                  <a-input v-model:value="searchFormData.name" allow-clear />
+                </j-form-item>
+                <j-form-item label="创建时间" :content-nest="false">
+                  <div class="date-range-container">
+                    <a-date-picker
+                      v-model:value="searchFormData.createTimeTimeStart"
+                      placeholder=""
+                      value-format="YYYY-MM-DD 00:00:00"
+                    />
+                    <span class="date-split">至</span>
+                    <a-date-picker
+                      v-model:value="searchFormData.createTimeTimeEnd"
+                      placeholder=""
+                      value-format="YYYY-MM-DD 23:59:59"
+                    />
+                  </div>
+                </j-form-item>
+                <j-form-item label="状态">
+                  <a-select v-model:value="searchFormData.available" placeholder="全部" allow-clear>
+                    <a-select-option
+                      v-for="item in $enums.AVAILABLE.values()"
+                      :key="item.code"
+                      :value="item.code"
+                      >{{ item.desc }}</a-select-option
+                    >
+                  </a-select>
+                </j-form-item>
+              </j-form>
+            </j-border>
+          </template>
+          <!-- 工具栏 -->
+          <template #toolbar_buttons>
+            <a-space>
+              <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
+              <a-button type="primary" :icon="h(PlusOutlined)" @click="$refs.addDialog.openDialog()"
+                >新增</a-button
+              >
+            </a-space>
+          </template>
+
+          <!-- 状态 列自定义内容 -->
+          <template #available_default="{ row }">
+            <available-tag :available="row.available" />
+          </template>
+
+          <!-- 操作 列自定义内容 -->
+          <template #action_default="{ row }">
+            <table-action outside :actions="createActions(row)" />
+          </template>
+        </vxe-grid>
+      </page-wrapper>
+    </div>
+    <!-- 新增窗口 -->
+    <add ref="addDialog" @confirm="search" />
+
+    <!-- 修改窗口 -->
+    <modify :id="id" ref="updateDialog" @confirm="search" />
+  </div>
+</template>
+
+<script>
+  import { h, defineComponent } from 'vue';
+  import Add from './add.vue';
+  import Modify from './modify.vue';
+  import * as api from '@/api/system/user-group';
+  import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
+    name: 'UserGroup',
+    components: {
+      Add,
+      Modify,
+    },
+    setup() {
+      return {
+        h,
+        SearchOutlined,
+        PlusOutlined,
+      };
+    },
+    data() {
+      return {
+        loading: false,
+        // 当前行数据
+        id: '',
+        // 查询列表的查询条件
+        searchFormData: {
+          name: '',
+          createTimeStart: '',
+          createTimeEnd: '',
+          available: this.$enums.AVAILABLE.ENABLE.code,
+        },
+        // 工具栏配置
+        toolbarConfig: {
+          // 自定义左侧工具栏
+          slots: {
+            buttons: 'toolbar_buttons',
+          },
+        },
+        // 列表数据配置
+        tableColumn: [
+          { type: 'seq', width: 50 },
+          { field: 'code', title: '编号', width: 120, sortable: true },
+          { field: 'name', title: '名称', minWidth: 140, sortable: true },
+          { field: 'description', title: '备注', minWidth: 200 },
+          { field: 'createTime', title: '创建时间', width: 170, sortable: true },
+          { field: 'createBy', title: '创建人', width: 100 },
+          { field: 'available', title: '状态', width: 80, slots: { default: 'available_default' } },
+          { title: '操作', width: 60, fixed: 'right', slots: { default: 'action_default' } },
+        ],
+        // 请求接口配置
+        proxyConfig: {
+          props: {
+            // 响应结果列表字段
+            result: 'datas',
+            // 响应结果总条数字段
+            total: 'totalCount',
+          },
+          ajax: {
+            // 查询接口
+            query: ({ page, sorts }) => {
+              return api.query(this.buildQueryParams(page, sorts));
+            },
+          },
+        },
+      };
+    },
+    created() {},
+    methods: {
+      // 列表发生查询时的事件
+      search() {
+        this.$refs.grid.commitProxy('reload');
+      },
+      // 查询前构建查询参数结构
+      buildQueryParams(page, sorts) {
+        return {
+          ...this.$utils.buildSortPageVo(page, sorts),
+          ...this.buildSearchFormData(),
+        };
+      },
+      // 查询前构建具体的查询参数
+      buildSearchFormData() {
+        return {
+          ...this.searchFormData,
+        };
+      },
+      createActions(row) {
+        return [
+          {
+            label: '修改',
+            onClick: () => {
+              this.id = row.id;
+              this.$nextTick(() => this.$refs.updateDialog.openDialog());
+            },
+          },
+        ];
+      },
+    },
+  });
+</script>
+<style scoped></style>
diff --git a/src/views/system/user-group/modify.vue b/src/views/system/user-group/modify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1c679868dc69f2755d41f27de8a0c0e5dfc2c570
--- /dev/null
+++ b/src/views/system/user-group/modify.vue
@@ -0,0 +1,150 @@
+<template>
+  <a-modal
+    v-model:open="visible"
+    :mask-closable="false"
+    width="40%"
+    title="修改"
+    :style="{ top: '20px' }"
+    :footer="null"
+  >
+    <div v-if="visible" v-permission="['system:user-group:modify']" v-loading="loading">
+      <a-form
+        ref="form"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 16 }"
+        :model="formData"
+        :rules="rules"
+      >
+        <a-form-item label="编号" name="code">
+          <a-input v-model:value="formData.code" allow-clear />
+        </a-form-item>
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value="formData.name" allow-clear />
+        </a-form-item>
+        <a-form-item label="用户" name="userIds">
+          <user-selector v-model:value="formData.userIds" :multiple="true" />
+        </a-form-item>
+        <a-form-item label="状态" name="available">
+          <a-select v-model:value="formData.available" allow-clear>
+            <a-select-option
+              v-for="item in $enums.AVAILABLE.values()"
+              :key="item.code"
+              :value="item.code"
+              >{{ item.desc }}</a-select-option
+            >
+          </a-select>
+        </a-form-item>
+        <a-form-item label="备注" name="description">
+          <a-textarea v-model:value.trim="formData.description" />
+        </a-form-item>
+        <div class="form-modal-footer">
+          <a-space>
+            <a-button type="primary" :loading="loading" html-type="submit" @click="submit"
+              >保存</a-button
+            >
+            <a-button :loading="loading" @click="closeDialog">取消</a-button>
+          </a-space>
+        </div>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+  import * as api from '@/api/system/user-group';
+  import { validCode } from '@/utils/validate';
+
+  export default defineComponent({
+    // 使用组件
+    components: {},
+    props: {
+      id: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        // 是否可见
+        visible: false,
+        // 是否显示加载框
+        loading: false,
+        // 表单数据
+        formData: {},
+        // 表单校验规则
+        rules: {
+          code: [{ required: true, message: '请输入编号' }, { validator: validCode }],
+          name: [{ required: true, message: '请输入名称' }],
+          userIds: [{ required: true, message: '请选择用户' }],
+        },
+      };
+    },
+    computed: {},
+    created() {
+      this.initFormData();
+    },
+    methods: {
+      // 打开对话框 由父页面触发
+      openDialog() {
+        this.visible = true;
+
+        this.$nextTick(() => this.open());
+      },
+      // 关闭对话框
+      closeDialog() {
+        this.visible = false;
+        this.$emit('close');
+      },
+      // 初始化表单数据
+      initFormData() {
+        this.formData = {
+          code: '',
+          name: '',
+          description: '',
+          userIds: [],
+          available: '',
+        };
+      },
+      // 提交表单事件
+      submit() {
+        this.$refs.form.validate().then((valid) => {
+          if (valid) {
+            this.loading = true;
+            const params = this.formData;
+
+            api
+              .update(params)
+              .then(() => {
+                this.$msg.createSuccess('修改成功！');
+                this.$emit('confirm');
+                this.visible = false;
+              })
+              .finally(() => {
+                this.loading = false;
+              });
+          }
+        });
+      },
+      // 页面显示时触发
+      open() {
+        // 初始化数据
+        this.initFormData();
+
+        // 查询数据
+        this.loadFormData();
+      },
+      // 查询数据
+      async loadFormData() {
+        this.loading = true;
+        api
+          .get(this.id)
+          .then((data) => {
+            this.formData = data;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      },
+    },
+  });
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index eabadc9c83d4457c13e3b9e6db20413f5acef451..4ecee1cecbb5da4f447230a3104cc575f20f7f2d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -20,7 +20,7 @@
       >
         <template #form>
           <j-border>
-            <j-form label-width="80px" @collapse="$refs.grid.refreshColumn()">
+            <j-form bordered label-width="80px" @collapse="$refs.grid.refreshColumn()">
               <j-form-item label="编号">
                 <a-input v-model:value="searchFormData.code" allow-clear />
               </j-form-item>
diff --git a/vite.config.ts b/vite.config.ts
index 3129daa53048d0f9ac7012f5f8367509f0a455b2..298dc12e229129eefb812e5b6c2b532469e3c645 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,12 +29,6 @@ export default defineApplicationConfig({
           // only https
           // secure: false
         },
-        '/upload': {
-          target: 'http://localhost:3300/upload',
-          changeOrigin: true,
-          ws: true,
-          rewrite: (path) => path.replace(new RegExp(`^/upload`), ''),
-        },
       },
     },
   },