diff --git a/package.json b/package.json
index f833ca4..72fd21a 100644
--- a/package.json
+++ b/package.json
@@ -79,9 +79,13 @@
     "uuid": "^9.0.1",
     "vue": "^3.3.1",
     "vue-baidu-map-3x": "^1.0.35",
+    "vue-demi": "^0.14.10",
     "vue-i18n": "9.2.2",
+    "vue-plugin-hiprint": "^0.0.59-beta4",
     "vue-router": "^4.2.0",
     "vue3-dnd": "^2.1.0",
+    "vue3-ruler-tool": "^0.0.1",
+    "vue3-sketch-ruler": "^2.2.9",
     "vuedraggable": "^4.1.0",
     "vuedraggable-es": "^4.1.1",
     "websocket": "^1.0.35"
diff --git a/src/api/displayboardapi/indexapi.ts b/src/api/displayboardapi/indexapi.ts
index 523c5ce..db2c257 100644
--- a/src/api/displayboardapi/indexapi.ts
+++ b/src/api/displayboardapi/indexapi.ts
@@ -126,7 +126,7 @@ export const targetListForDepartment = (data?: targetCanShu):any => {
 }
 
 //获取审批节点或条件节点
-export const gainNodeFactor = (data?: any) => {
+export const gainNodeFactor = (data?: any) => { 
     return request({
         url: '/systemapi/task_flow/gain_node_factor',
         method: 'post',
@@ -182,3 +182,20 @@ export const hotNews = (data: attributePage):any => {
 			data: data
 	})
 }
+//获取行政组织几人员相关控件信息
+export const gainOrgOfPeopleNodeFactor = (data?: any) => { 
+    return request({
+        url: '/systemapi/task_flow/gainOrgOfPeopleNodeFactor',
+        method: 'post',
+        data: data
+    })
+}
+
+//获取行政组织几人员关系
+export const gainOegAndPeople = (data?: any) => { 
+    return request({
+        url: '/systemapi/user/gainOegAndPeople',
+        method: 'post',
+        data: data
+    })
+}
diff --git a/src/api/displayboardapi/types.ts b/src/api/displayboardapi/types.ts
index 90d6d2a..69c123a 100644
--- a/src/api/displayboardapi/types.ts
+++ b/src/api/displayboardapi/types.ts
@@ -150,3 +150,19 @@ export interface setupPage {
 export interface attributePage extends setupPage{
 	type?:number
 }
+//发送范围结构体
+export interface sendTableFields {
+	fields:string;
+	lable:string;
+	multipleChoice:boolean;
+	types:string;
+}
+//获取行政组织几人员关系结构体
+export interface sendCustFields {
+	id: string;
+	number: string;
+	name: string;
+	icon:string;
+	isPick: boolean;
+	types: string;
+}
diff --git a/src/assets/public/iconfont.css b/src/assets/public/iconfont.css
new file mode 100644
index 0000000..44babf5
--- /dev/null
+++ b/src/assets/public/iconfont.css
@@ -0,0 +1,561 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3559670 */
+  src: url("iconfont.woff2?t=1667531544868") format("woff2"),
+    url("iconfont.woff?t=1667531544868") format("woff"),
+    url("iconfont.ttf?t=1667531544868") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sv-edit-data:before {
+  content: "\e655";
+}
+
+.sv-shimmer:before {
+  content: "\e6d6";
+}
+
+.sv-origin:before {
+  content: "\e6ac";
+}
+
+.sv-zIndex:before {
+  content: "\e603";
+}
+
+.sv-structure:before {
+  content: "\ec6f";
+}
+
+.sv-list:before {
+  content: "\e742";
+}
+
+.sv-grid:before {
+  content: "\e849";
+}
+
+.sv-flow:before {
+  content: "\e611";
+}
+
+.sv-switch:before {
+  content: "\e6f6";
+}
+
+.sv-theme:before {
+  content: "\e644";
+}
+
+.sv-element:before {
+  content: "\e615";
+}
+
+.sv-pdf:before {
+  content: "\e67a";
+}
+
+.sv-browser:before {
+  content: "\e726";
+}
+
+.sv-font-big:before {
+  content: "\eb04";
+}
+
+.sv-font-small:before {
+  content: "\eb05";
+}
+
+.sv-font-bold:before {
+  content: "\ec83";
+}
+
+.sv-font-tiny:before {
+  content: "\e6c1";
+}
+
+.sv-options:before {
+  content: "\e607";
+}
+
+.sv-close:before {
+  content: "\e646";
+}
+
+.sv-clone:before {
+  content: "\ec7a";
+}
+
+.sv-cut:before {
+  content: "\e643";
+}
+
+.sv-preview:before {
+  content: "\e61c";
+}
+
+.sv-zoom-in:before {
+  content: "\e60f";
+}
+
+.sv-zoom-out:before {
+  content: "\e610";
+}
+
+.sv-edit:before {
+  content: "\e6b9";
+}
+
+.sv-paste:before {
+  content: "\e6c0";
+}
+
+.sv-copy:before {
+  content: "\e6c2";
+}
+
+.sv-unlock:before {
+  content: "\e6e7";
+}
+
+.sv-lock:before {
+  content: "\e6e8";
+}
+
+.sv-zIndex-plus:before {
+  content: "\e715";
+}
+
+.sv-zIndex-minus:before {
+  content: "\e716";
+}
+
+.sv-zIndex-top:before {
+  content: "\e71f";
+}
+
+.sv-sigh:before {
+  content: "\e724";
+}
+
+.sv-ask:before {
+  content: "\e725";
+}
+
+.sv-dev-code:before {
+  content: "\e733";
+}
+
+.sv-bug:before {
+  content: "\e73f";
+}
+
+.sv-zIndex-bottom:before {
+  content: "\e71d";
+}
+
+.sv-new:before {
+  content: "\e64d";
+}
+
+.sv-clear:before {
+  content: "\e62d";
+}
+
+.sv-base:before {
+  content: "\e7d0";
+}
+
+.sv-export:before {
+  content: "\eabf";
+}
+
+.sv-import:before {
+  content: "\eac0";
+}
+
+.sv-add:before {
+  content: "\eaf3";
+}
+
+.sv-printer:before {
+  content: "\eabe";
+}
+
+.sv-save:before {
+  content: "\eabd";
+}
+
+.sv-more:before {
+  content: "\e625";
+}
+
+.sv-menu:before {
+  content: "\e628";
+}
+
+.sv-nav-right:before {
+  content: "\e629";
+}
+
+.sv-nav-up:before {
+  content: "\e62a";
+}
+
+.sv-nav-left:before {
+  content: "\e62b";
+}
+
+.sv-nav-down:before {
+  content: "\e62c";
+}
+
+.sv-setting:before {
+  content: "\e62e";
+}
+
+.sv-delete:before {
+  content: "\e630";
+}
+
+.sv-undo:before {
+  content: "\e631";
+}
+
+.sv-redo:before {
+  content: "\e632";
+}
+
+.sv-refresh:before {
+  content: "\e634";
+}
+
+.sv-history:before {
+  content: "\e635";
+}
+
+.sv-html:before {
+  content: "\e633";
+}
+
+.sv-longText:before {
+  content: "\e64c";
+}
+
+.sv-table:before {
+  content: "\ec15";
+}
+
+.sv-qrcode:before {
+  content: "\e642";
+}
+
+.sv-image:before {
+  content: "\e8ba";
+}
+
+.sv-barcode:before {
+  content: "\eb64";
+}
+
+.sv-text:before {
+  content: "\e60b";
+}
+
+.sv-vline:before {
+  content: "\e63a";
+}
+
+.sv-oval:before {
+  content: "\eb99";
+}
+
+.sv-rect:before {
+  content: "\e620";
+}
+
+.sv-hline:before {
+  content: "\e60a";
+}
+
+.sv-print-c:before {
+  content: "\e602";
+}
+
+.sv-print:before {
+  content: "\e601";
+}
+
+.sv-c:before {
+  content: "\e600";
+}
+
+.sv-vertical:before {
+  content: "\e706";
+}
+
+.sv-distributeHor:before {
+  content: "\e707";
+}
+
+.sv-right:before {
+  content: "\e708";
+}
+
+.sv-left:before {
+  content: "\e709";
+}
+
+.sv-distributeVer:before {
+  content: "\e70f";
+}
+
+.sv-bottom:before {
+  content: "\e710";
+}
+
+.sv-top:before {
+  content: "\e711";
+}
+
+.sv-horizontal:before {
+  content: "\e712";
+}
+
+.sv-rotate:before {
+  content: "\e66f";
+}
+
+.sv-butongbu:before {
+  content: "\e636";
+}
+
+.sv-synchronization:before {
+  content: "\e676";
+}
+/* 重写全局 hiprint 样式 */
+.hiprint-headerLine,
+.hiprint-footerLine {
+  border-color: purple !important;
+}
+
+.hiprint-headerLine:hover,
+.hiprint-footerLine:hover {
+  border-top: 3px dashed purple !important;
+}
+
+.hiprint-headerLine:hover:before {
+  content: "页眉线";
+  left: calc(50% - 18px);
+  position: relative;
+  background: #ffff;
+  top: -14px;
+  color: purple;
+  font-size: 12px;
+}
+
+.hiprint-footerLine:hover:before {
+  content: "页脚线";
+  left: calc(50% - 18px);
+  position: relative;
+  color: purple;
+  background: #ffff;
+  top: -14px;
+  font-size: 12px;
+}
+/* 区域 */
+.left {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 10px 0;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+.center {
+  margin: 0 10px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 20px;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+.right {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 10px 0;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+/* 左侧拖拽元素样式 */
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  margin: 10px 0 0 24px;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  padding: 4px 10px;
+  margin: 10px 8px 4px 8px;
+  width: 38%;
+  min-height: 60px;
+  border-radius: 4px;
+  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
+}
+.item .iconfont {
+  font-size: 1.5rem;
+}
+.item span {
+  font-size: 14px;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+  height: 4px;
+  width: 4px;
+}
+::-webkit-scrollbar-corner {
+  height: 4px;
+  width: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: purple;
+  border-radius: 2px;
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+::-webkit-scrollbar-thumb:hover {
+  background: purple;
+}
+
+/* flex */
+.flex-row {
+  display: flex;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+.flex-2 {
+  flex: 2;
+}
+.flex-3 {
+  flex: 3;
+}
+.flex-4 {
+  flex: 4;
+}
+.flex-5 {
+  flex: 5;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+button:hover {
+  opacity: 1;
+}
+button i {
+  font-size: 16px !important;
+}
+.circle,
+.circle-4 {
+  border-radius: 4px !important;
+}
+.circle-10 {
+  border-radius: 10px !important;
+}
+
+/* modal */
+.modal {
+  padding: 0;
+  margin: 0;
+}
+.modal .mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: #00000073;
+}
+.modal .wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  overflow: auto;
+  background-color: #00000073;
+  outline: 0;
+}
+.modal .wrap .box {
+  position: relative;
+  margin: 10% auto;
+  width: 40%;
+  background: #fff;
+  border-radius: 4px;
+  z-index: 1001;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+.modal-box__header {
+  padding: 10px 14px;
+  border-bottom: 1px solid #e9e9e9;
+}
+.modal-box__footer {
+  text-align: end;
+}
+.modal-box__footer button {
+  min-width: 100px;
+}
+.modal-box__footer button:not(:last-child) {
+  margin-right: 10px;
+}
diff --git a/src/assets/public/iconfont.ttf b/src/assets/public/iconfont.ttf
new file mode 100644
index 0000000..9638e3d
Binary files /dev/null and b/src/assets/public/iconfont.ttf differ
diff --git a/src/assets/public/iconfont.woff b/src/assets/public/iconfont.woff
new file mode 100644
index 0000000..6e19925
Binary files /dev/null and b/src/assets/public/iconfont.woff differ
diff --git a/src/assets/public/iconfont.woff2 b/src/assets/public/iconfont.woff2
new file mode 100644
index 0000000..53f7d77
Binary files /dev/null and b/src/assets/public/iconfont.woff2 differ
diff --git a/src/assets/public/iconfontCss/iconfont.css b/src/assets/public/iconfontCss/iconfont.css
new file mode 100644
index 0000000..44babf5
--- /dev/null
+++ b/src/assets/public/iconfontCss/iconfont.css
@@ -0,0 +1,561 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3559670 */
+  src: url("iconfont.woff2?t=1667531544868") format("woff2"),
+    url("iconfont.woff?t=1667531544868") format("woff"),
+    url("iconfont.ttf?t=1667531544868") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sv-edit-data:before {
+  content: "\e655";
+}
+
+.sv-shimmer:before {
+  content: "\e6d6";
+}
+
+.sv-origin:before {
+  content: "\e6ac";
+}
+
+.sv-zIndex:before {
+  content: "\e603";
+}
+
+.sv-structure:before {
+  content: "\ec6f";
+}
+
+.sv-list:before {
+  content: "\e742";
+}
+
+.sv-grid:before {
+  content: "\e849";
+}
+
+.sv-flow:before {
+  content: "\e611";
+}
+
+.sv-switch:before {
+  content: "\e6f6";
+}
+
+.sv-theme:before {
+  content: "\e644";
+}
+
+.sv-element:before {
+  content: "\e615";
+}
+
+.sv-pdf:before {
+  content: "\e67a";
+}
+
+.sv-browser:before {
+  content: "\e726";
+}
+
+.sv-font-big:before {
+  content: "\eb04";
+}
+
+.sv-font-small:before {
+  content: "\eb05";
+}
+
+.sv-font-bold:before {
+  content: "\ec83";
+}
+
+.sv-font-tiny:before {
+  content: "\e6c1";
+}
+
+.sv-options:before {
+  content: "\e607";
+}
+
+.sv-close:before {
+  content: "\e646";
+}
+
+.sv-clone:before {
+  content: "\ec7a";
+}
+
+.sv-cut:before {
+  content: "\e643";
+}
+
+.sv-preview:before {
+  content: "\e61c";
+}
+
+.sv-zoom-in:before {
+  content: "\e60f";
+}
+
+.sv-zoom-out:before {
+  content: "\e610";
+}
+
+.sv-edit:before {
+  content: "\e6b9";
+}
+
+.sv-paste:before {
+  content: "\e6c0";
+}
+
+.sv-copy:before {
+  content: "\e6c2";
+}
+
+.sv-unlock:before {
+  content: "\e6e7";
+}
+
+.sv-lock:before {
+  content: "\e6e8";
+}
+
+.sv-zIndex-plus:before {
+  content: "\e715";
+}
+
+.sv-zIndex-minus:before {
+  content: "\e716";
+}
+
+.sv-zIndex-top:before {
+  content: "\e71f";
+}
+
+.sv-sigh:before {
+  content: "\e724";
+}
+
+.sv-ask:before {
+  content: "\e725";
+}
+
+.sv-dev-code:before {
+  content: "\e733";
+}
+
+.sv-bug:before {
+  content: "\e73f";
+}
+
+.sv-zIndex-bottom:before {
+  content: "\e71d";
+}
+
+.sv-new:before {
+  content: "\e64d";
+}
+
+.sv-clear:before {
+  content: "\e62d";
+}
+
+.sv-base:before {
+  content: "\e7d0";
+}
+
+.sv-export:before {
+  content: "\eabf";
+}
+
+.sv-import:before {
+  content: "\eac0";
+}
+
+.sv-add:before {
+  content: "\eaf3";
+}
+
+.sv-printer:before {
+  content: "\eabe";
+}
+
+.sv-save:before {
+  content: "\eabd";
+}
+
+.sv-more:before {
+  content: "\e625";
+}
+
+.sv-menu:before {
+  content: "\e628";
+}
+
+.sv-nav-right:before {
+  content: "\e629";
+}
+
+.sv-nav-up:before {
+  content: "\e62a";
+}
+
+.sv-nav-left:before {
+  content: "\e62b";
+}
+
+.sv-nav-down:before {
+  content: "\e62c";
+}
+
+.sv-setting:before {
+  content: "\e62e";
+}
+
+.sv-delete:before {
+  content: "\e630";
+}
+
+.sv-undo:before {
+  content: "\e631";
+}
+
+.sv-redo:before {
+  content: "\e632";
+}
+
+.sv-refresh:before {
+  content: "\e634";
+}
+
+.sv-history:before {
+  content: "\e635";
+}
+
+.sv-html:before {
+  content: "\e633";
+}
+
+.sv-longText:before {
+  content: "\e64c";
+}
+
+.sv-table:before {
+  content: "\ec15";
+}
+
+.sv-qrcode:before {
+  content: "\e642";
+}
+
+.sv-image:before {
+  content: "\e8ba";
+}
+
+.sv-barcode:before {
+  content: "\eb64";
+}
+
+.sv-text:before {
+  content: "\e60b";
+}
+
+.sv-vline:before {
+  content: "\e63a";
+}
+
+.sv-oval:before {
+  content: "\eb99";
+}
+
+.sv-rect:before {
+  content: "\e620";
+}
+
+.sv-hline:before {
+  content: "\e60a";
+}
+
+.sv-print-c:before {
+  content: "\e602";
+}
+
+.sv-print:before {
+  content: "\e601";
+}
+
+.sv-c:before {
+  content: "\e600";
+}
+
+.sv-vertical:before {
+  content: "\e706";
+}
+
+.sv-distributeHor:before {
+  content: "\e707";
+}
+
+.sv-right:before {
+  content: "\e708";
+}
+
+.sv-left:before {
+  content: "\e709";
+}
+
+.sv-distributeVer:before {
+  content: "\e70f";
+}
+
+.sv-bottom:before {
+  content: "\e710";
+}
+
+.sv-top:before {
+  content: "\e711";
+}
+
+.sv-horizontal:before {
+  content: "\e712";
+}
+
+.sv-rotate:before {
+  content: "\e66f";
+}
+
+.sv-butongbu:before {
+  content: "\e636";
+}
+
+.sv-synchronization:before {
+  content: "\e676";
+}
+/* 重写全局 hiprint 样式 */
+.hiprint-headerLine,
+.hiprint-footerLine {
+  border-color: purple !important;
+}
+
+.hiprint-headerLine:hover,
+.hiprint-footerLine:hover {
+  border-top: 3px dashed purple !important;
+}
+
+.hiprint-headerLine:hover:before {
+  content: "页眉线";
+  left: calc(50% - 18px);
+  position: relative;
+  background: #ffff;
+  top: -14px;
+  color: purple;
+  font-size: 12px;
+}
+
+.hiprint-footerLine:hover:before {
+  content: "页脚线";
+  left: calc(50% - 18px);
+  position: relative;
+  color: purple;
+  background: #ffff;
+  top: -14px;
+  font-size: 12px;
+}
+/* 区域 */
+.left {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 10px 0;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+.center {
+  margin: 0 10px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 20px;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+.right {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 10px 0;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+/* 左侧拖拽元素样式 */
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  margin: 10px 0 0 24px;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  padding: 4px 10px;
+  margin: 10px 8px 4px 8px;
+  width: 38%;
+  min-height: 60px;
+  border-radius: 4px;
+  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
+}
+.item .iconfont {
+  font-size: 1.5rem;
+}
+.item span {
+  font-size: 14px;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+  height: 4px;
+  width: 4px;
+}
+::-webkit-scrollbar-corner {
+  height: 4px;
+  width: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: purple;
+  border-radius: 2px;
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+::-webkit-scrollbar-thumb:hover {
+  background: purple;
+}
+
+/* flex */
+.flex-row {
+  display: flex;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+.flex-2 {
+  flex: 2;
+}
+.flex-3 {
+  flex: 3;
+}
+.flex-4 {
+  flex: 4;
+}
+.flex-5 {
+  flex: 5;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+button:hover {
+  opacity: 1;
+}
+button i {
+  font-size: 16px !important;
+}
+.circle,
+.circle-4 {
+  border-radius: 4px !important;
+}
+.circle-10 {
+  border-radius: 10px !important;
+}
+
+/* modal */
+.modal {
+  padding: 0;
+  margin: 0;
+}
+.modal .mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: #00000073;
+}
+.modal .wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  overflow: auto;
+  background-color: #00000073;
+  outline: 0;
+}
+.modal .wrap .box {
+  position: relative;
+  margin: 10% auto;
+  width: 40%;
+  background: #fff;
+  border-radius: 4px;
+  z-index: 1001;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+.modal-box__header {
+  padding: 10px 14px;
+  border-bottom: 1px solid #e9e9e9;
+}
+.modal-box__footer {
+  text-align: end;
+}
+.modal-box__footer button {
+  min-width: 100px;
+}
+.modal-box__footer button:not(:last-child) {
+  margin-right: 10px;
+}
diff --git a/src/assets/public/iconfontCss/iconfont.ttf b/src/assets/public/iconfontCss/iconfont.ttf
new file mode 100644
index 0000000..9638e3d
Binary files /dev/null and b/src/assets/public/iconfontCss/iconfont.ttf differ
diff --git a/src/assets/public/iconfontCss/iconfont.woff b/src/assets/public/iconfontCss/iconfont.woff
new file mode 100644
index 0000000..6e19925
Binary files /dev/null and b/src/assets/public/iconfontCss/iconfont.woff differ
diff --git a/src/assets/public/iconfontCss/iconfont.woff2 b/src/assets/public/iconfontCss/iconfont.woff2
new file mode 100644
index 0000000..53f7d77
Binary files /dev/null and b/src/assets/public/iconfontCss/iconfont.woff2 differ
diff --git a/src/assets/public/print-lock.css b/src/assets/public/print-lock.css
new file mode 100644
index 0000000..402cca9
--- /dev/null
+++ b/src/assets/public/print-lock.css
@@ -0,0 +1,562 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3559670 */
+  src: url("iconfont.woff2?t=1667531544868") format("woff2"),
+    url("iconfont.woff?t=1667531544868") format("woff"),
+    url("iconfont.ttf?t=1667531544868") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sv-edit-data:before {
+  content: "\e655";
+}
+
+.sv-shimmer:before {
+  content: "\e6d6";
+}
+
+.sv-origin:before {
+  content: "\e6ac";
+}
+
+.sv-zIndex:before {
+  content: "\e603";
+}
+
+.sv-structure:before {
+  content: "\ec6f";
+}
+
+.sv-list:before {
+  content: "\e742";
+}
+
+.sv-grid:before {
+  content: "\e849";
+}
+
+.sv-flow:before {
+  content: "\e611";
+}
+
+.sv-switch:before {
+  content: "\e6f6";
+}
+
+.sv-theme:before {
+  content: "\e644";
+}
+
+.sv-element:before {
+  content: "\e615";
+}
+
+.sv-pdf:before {
+  content: "\e67a";
+}
+
+.sv-browser:before {
+  content: "\e726";
+}
+
+.sv-font-big:before {
+  content: "\eb04";
+}
+
+.sv-font-small:before {
+  content: "\eb05";
+}
+
+.sv-font-bold:before {
+  content: "\ec83";
+}
+
+.sv-font-tiny:before {
+  content: "\e6c1";
+}
+
+.sv-options:before {
+  content: "\e607";
+}
+
+.sv-close:before {
+  content: "\e646";
+}
+
+.sv-clone:before {
+  content: "\ec7a";
+}
+
+.sv-cut:before {
+  content: "\e643";
+}
+
+.sv-preview:before {
+  content: "\e61c";
+}
+
+.sv-zoom-in:before {
+  content: "\e60f";
+}
+
+.sv-zoom-out:before {
+  content: "\e610";
+}
+
+.sv-edit:before {
+  content: "\e6b9";
+}
+
+.sv-paste:before {
+  content: "\e6c0";
+}
+
+.sv-copy:before {
+  content: "\e6c2";
+}
+
+.sv-unlock:before {
+  content: "\e6e7";
+}
+
+.sv-lock:before {
+  content: "\e6e8";
+}
+
+.sv-zIndex-plus:before {
+  content: "\e715";
+}
+
+.sv-zIndex-minus:before {
+  content: "\e716";
+}
+
+.sv-zIndex-top:before {
+  content: "\e71f";
+}
+
+.sv-sigh:before {
+  content: "\e724";
+}
+
+.sv-ask:before {
+  content: "\e725";
+}
+
+.sv-dev-code:before {
+  content: "\e733";
+}
+
+.sv-bug:before {
+  content: "\e73f";
+}
+
+.sv-zIndex-bottom:before {
+  content: "\e71d";
+}
+
+.sv-new:before {
+  content: "\e64d";
+}
+
+.sv-clear:before {
+  content: "\e62d";
+}
+
+.sv-base:before {
+  content: "\e7d0";
+}
+
+.sv-export:before {
+  content: "\eabf";
+}
+
+.sv-import:before {
+  content: "\eac0";
+}
+
+.sv-add:before {
+  content: "\eaf3";
+}
+
+.sv-printer:before {
+  content: "\eabe";
+}
+
+.sv-save:before {
+  content: "\eabd";
+}
+
+.sv-more:before {
+  content: "\e625";
+}
+
+.sv-menu:before {
+  content: "\e628";
+}
+
+.sv-nav-right:before {
+  content: "\e629";
+}
+
+.sv-nav-up:before {
+  content: "\e62a";
+}
+
+.sv-nav-left:before {
+  content: "\e62b";
+}
+
+.sv-nav-down:before {
+  content: "\e62c";
+}
+
+.sv-setting:before {
+  content: "\e62e";
+}
+
+.sv-delete:before {
+  content: "\e630";
+}
+
+.sv-undo:before {
+  content: "\e631";
+}
+
+.sv-redo:before {
+  content: "\e632";
+}
+
+.sv-refresh:before {
+  content: "\e634";
+}
+
+.sv-history:before {
+  content: "\e635";
+}
+
+.sv-html:before {
+  content: "\e633";
+}
+
+.sv-longText:before {
+  content: "\e64c";
+}
+
+.sv-table:before {
+  content: "\ec15";
+}
+
+.sv-qrcode:before {
+  content: "\e642";
+}
+
+.sv-image:before {
+  content: "\e8ba";
+}
+
+.sv-barcode:before {
+  content: "\eb64";
+}
+
+.sv-text:before {
+  content: "\e60b";
+}
+
+.sv-vline:before {
+  content: "\e63a";
+}
+
+.sv-oval:before {
+  content: "\eb99";
+}
+
+.sv-rect:before {
+  content: "\e620";
+}
+
+.sv-hline:before {
+  content: "\e60a";
+}
+
+.sv-print-c:before {
+  content: "\e602";
+}
+
+.sv-print:before {
+  content: "\e601";
+}
+
+.sv-c:before {
+  content: "\e600";
+}
+
+.sv-vertical:before {
+  content: "\e706";
+}
+
+.sv-distributeHor:before {
+  content: "\e707";
+}
+
+.sv-right:before {
+  content: "\e708";
+}
+
+.sv-left:before {
+  content: "\e709";
+}
+
+.sv-distributeVer:before {
+  content: "\e70f";
+}
+
+.sv-bottom:before {
+  content: "\e710";
+}
+
+.sv-top:before {
+  content: "\e711";
+}
+
+.sv-horizontal:before {
+  content: "\e712";
+}
+
+.sv-rotate:before {
+  content: "\e66f";
+}
+
+.sv-butongbu:before {
+  content: "\e636";
+}
+
+.sv-synchronization:before {
+  content: "\e676";
+}
+/* 重写全局 hiprint 样式 */
+.hiprint-headerLine,
+.hiprint-footerLine {
+  border-color: purple !important;
+}
+
+.hiprint-headerLine:hover,
+.hiprint-footerLine:hover {
+  border-top: 3px dashed purple !important;
+}
+
+.hiprint-headerLine:hover:before {
+  content: "页眉线";
+  left: calc(50% - 18px);
+  position: relative;
+  background: #ffff;
+  top: -14px;
+  color: purple;
+  font-size: 12px;
+}
+
+.hiprint-footerLine:hover:before {
+  content: "页脚线";
+  left: calc(50% - 18px);
+  position: relative;
+  color: purple;
+  background: #ffff;
+  top: -14px;
+  font-size: 12px;
+}
+/* 区域 */
+.left {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 10px 0;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+.center {
+  margin: 0 10px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 20px;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+.right {
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  padding: 10px 0;
+  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
+  overflow: auto;
+}
+/* 左侧拖拽元素样式 */
+.title {
+  font-size: 16px;
+  font-weight: 500;
+  width: 100%;
+  margin: 10px 0 0 24px;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: white;
+  padding: 4px 10px;
+  margin: 10px 8px 4px 8px;
+  width: 38%;
+  min-height: 60px;
+  border-radius: 4px;
+  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
+}
+.item .iconfont {
+  font-size: 1.5rem;
+}
+.item span {
+  font-size: 14px;
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+  height: 4px;
+  width: 4px;
+}
+::-webkit-scrollbar-corner {
+  height: 4px;
+  width: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: purple;
+  border-radius: 2px;
+  background-image: -webkit-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+::-webkit-scrollbar-thumb:hover {
+  background: purple;
+}
+
+/* flex */
+.flex-row {
+  display: flex;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+
+.flex-1 {
+  flex: 1;
+}
+.flex-2 {
+  flex: 2;
+}
+.flex-3 {
+  flex: 3;
+}
+.flex-4 {
+  flex: 4;
+}
+.flex-5 {
+  flex: 5;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+button:hover {
+  opacity: 1;
+}
+button i {
+  font-size: 16px !important;
+}
+.circle,
+.circle-4 {
+  border-radius: 4px !important;
+}
+.circle-10 {
+  border-radius: 10px !important;
+}
+
+/* modal */
+.modal {
+  padding: 0;
+  margin: 0;
+}
+.modal .mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: #00000073;
+}
+.modal .wrap {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  overflow: auto;
+  background-color: #00000073;
+  outline: 0;
+}
+.modal .wrap .box {
+  position: relative;
+  margin: 10% auto;
+  width: 40%;
+  background: #fff;
+  border-radius: 4px;
+  z-index: 1001;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+.modal-box__header {
+  padding: 10px 14px;
+  border-bottom: 1px solid #e9e9e9;
+}
+.modal-box__footer {
+  text-align: end;
+}
+.modal-box__footer button {
+  min-width: 100px;
+}
+.modal-box__footer button:not(:last-child) {
+  margin-right: 10px;
+}
+
diff --git a/src/components/DesignForm/aceDrawer.vue b/src/components/DesignForm/aceDrawer.vue
index a7687a9..de58f47 100644
--- a/src/components/DesignForm/aceDrawer.vue
+++ b/src/components/DesignForm/aceDrawer.vue
@@ -19,7 +19,6 @@ const props = withDefaults(
     id?: string;
     // eslint-disable-next-line vue/require-default-prop
     codeType?: string;
-    data?: object;
   }>(),
   {
     id: "editJson",
@@ -85,7 +84,7 @@ const jiShuDiGui = (val: []) => {
 watch(
   () => visible,
   (val: booble) => {
-    jiShuDiGui(props.data.content);
+    jiShuDiGui(props.data?.content);
   },
   { deep: true }
 );
@@ -113,7 +112,9 @@ const drawerBeforeClose = () => {
   emits("beforeClose");
   treeSelectAry.value = [];
 };
-onMounted(() => {});
+onMounted(() => {
+  console.log("预览视图--------------------------------》", props.data);
+});
 onUnmounted(() => {
   if (Object.keys(editor.value).length !== 0) {
     editor.value.destroy();
diff --git a/src/components/DesignForm/aceDrawerPage.vue b/src/components/DesignForm/aceDrawerPage.vue
index fc9d053..a056c92 100644
--- a/src/components/DesignForm/aceDrawerPage.vue
+++ b/src/components/DesignForm/aceDrawerPage.vue
@@ -3,90 +3,89 @@
 @ 时间: 2023-07-19 08:39:34
 @ 备注: 抽屉
 -->
-<script lang='ts' setup>
-import { ref, nextTick, watch, onMounted, onUnmounted } from 'vue'
-import { aceEdit } from '@/api/DesignForm/utils'
+<script lang="ts" setup>
+import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
+import { aceEdit } from "@/api/DesignForm/utils";
 
 const props = withDefaults(
-    defineProps<{
-		data?:object
-		modelValue: boolean
-		// eslint-disable-next-line vue/require-default-prop
-		title?: string
-		direction?: 'rtl' | 'ltr'
-		content: string
-		id?: string
-		// eslint-disable-next-line vue/require-default-prop
-		codeType?: string
-    }>(),
-    {
-		id: 'editJson',
-		content: '',
-		direction: 'ltr'
-    }
-)
- const emits = defineEmits<{
-    (e: 'beforeClose'): void
-    (e: 'confirm', content: string): void
-    (e: 'update:modelValue', val: boolean): void
-}>()
-const editor = ref<any>({})
- const visible = ref(false)
+  defineProps<{
+    data?: object;
+    modelValue: boolean;
+    // eslint-disable-next-line vue/require-default-prop
+    title?: string;
+    direction?: "rtl" | "ltr";
+    content: string;
+    id?: string;
+    // eslint-disable-next-line vue/require-default-prop
+    codeType?: string;
+  }>(),
+  {
+    id: "editJson",
+    content: "",
+    direction: "ltr",
+  }
+);
+const emits = defineEmits<{
+  (e: "beforeClose"): void;
+  (e: "confirm", content: string): void;
+  (e: "update:modelValue", val: boolean): void;
+}>();
+const editor = ref<any>({});
+const visible = ref(false);
 watch(
-    () => props.modelValue,
-    (val: boolean) => {
-		visible.value = val
-		if (val) {
-			initEditor()
-		}
+  () => props.modelValue,
+  (val: boolean) => {
+    visible.value = val;
+    if (val) {
+      initEditor();
     }
-)
+  }
+);
 const initEditor = () => {
-    nextTick(() => {
-      	editor.value = aceEdit(props.content, props.id, props.codeType)
-    })
-}
+  nextTick(() => {
+    editor.value = aceEdit(props.content, props.id, props.codeType);
+  });
+};
 const dialogConfirm = () => {
-    const editVal = editor.value.getValue()
-    emits('confirm', editVal)
-}
+  const editVal = editor.value.getValue();
+  emits("confirm", editVal);
+};
 const drawerBeforeClose = () => {
-    emits('update:modelValue', false)
-    emits('beforeClose')
-}
-onMounted(() => {})
+  emits("update:modelValue", false);
+  emits("beforeClose");
+};
+onMounted(() => {});
 onUnmounted(() => {
-    if (Object.keys(editor.value).length !== 0) {
-		editor.value.destroy()
-		editor.value.container.remove()
-    }
-})
+  if (Object.keys(editor.value).length !== 0) {
+    editor.value.destroy();
+    editor.value.container.remove();
+  }
+});
 </script>
 <template>
-	<el-drawer
-		v-model="visible"
-		size="60%"
-		:title="title"
-		:direction="direction as any"
-		class="ace-dialog"
-		:append-to-body="true"
-		:before-close="drawerBeforeClose"
-	>
-		<template #header>
-			<div v-html="title"></div>
-		</template>
-		<div>{{props.data}}</div>
-		<div v-if="visible" :id="id"></div>
-		<div class="dialog-footer">
-			<el-button type="primary" size="small" @click="dialogConfirm">
-				确定
-			</el-button>
-		</div>
-	</el-drawer>
+  <el-drawer
+    v-model="visible"
+    size="60%"
+    :title="title"
+    :direction="direction as any"
+    class="ace-dialog"
+    :append-to-body="true"
+    :before-close="drawerBeforeClose"
+  >
+    <template #header>
+      <div v-html="title"></div>
+    </template>
+    <div>{{ props.data }}</div>
+    <div v-if="visible" :id="id"></div>
+    <div class="dialog-footer">
+      <el-button type="primary" size="small" @click="dialogConfirm"> 确定 </el-button>
+    </div>
+  </el-drawer>
 </template>
-<style  lang='scss' scoped>
-#editJson, #editJsonCopy {
-    width: 100%;
-    height: calc(100vh - 90px);
+<style lang="scss" scoped>
+#editJson,
+#editJsonCopy {
+  width: 100%;
+  height: calc(100vh - 90px);
 }
 </style>
diff --git a/src/components/DesignForm/public/expand/pickpost.vue b/src/components/DesignForm/public/expand/pickpost.vue
index 83e917b..a7fb2fa 100644
--- a/src/components/DesignForm/public/expand/pickpost.vue
+++ b/src/components/DesignForm/public/expand/pickpost.vue
@@ -4,11 +4,9 @@
 @ 备注: 岗位选择
 -->
 <script lang="ts" setup>
-import { basis_org_postList } from "@/api/hr/org/index";
+import { basis_org_postList,getgovcont, getpositioncont,getOrgTreeList } from "@/api/hr/org/index";
 
 import { orgInfo } from "@/api/hr/org/type";
-import { getOrgTreeList } from "@/api/hr/org/index";
-import { getgovcont, getpositioncont } from "@/api/hr/org/index";
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/DesignForm/public/expand/pickrole.vue b/src/components/DesignForm/public/expand/pickrole.vue
index 73ef0c2..2018611 100644
--- a/src/components/DesignForm/public/expand/pickrole.vue
+++ b/src/components/DesignForm/public/expand/pickrole.vue
@@ -18,7 +18,11 @@ const emits = defineEmits<{
 }>();
 const value = computed({
   get: () => {
-    return props.modelValue * 1;
+    if (props.modelValue == "") {
+      return props.modelValue;
+    } else {
+      return props.modelValue * 1;
+    }
   },
   set: (newVal: any) => {
     emits("update:modelValue", newVal);
diff --git a/src/components/DesignForm/public/expand/userDialog.vue b/src/components/DesignForm/public/expand/userDialog.vue
index 07859f7..2f3d289 100644
--- a/src/components/DesignForm/public/expand/userDialog.vue
+++ b/src/components/DesignForm/public/expand/userDialog.vue
@@ -3,361 +3,380 @@
 @ 时间: 2023-08-21 14:41:41
 @ 备注: 选择用户
 -->
-<script lang='ts' setup>
-import { ref, onMounted, reactive, nextTick } from 'vue'
-import { getRequest } from '@/api/DesignForm'
-import formatResult from '@/utils/DesignForm/formatResult'
-import { getOrgFormTree,getOrgFormUserList,searchUserCustomerFormList } from '@/api/hr/org/index'
-import { orgform,criteriaForPeopleList } from '@/api/hr/org/type'
-import UserRole from '@/assets/icons/user.svg'
+<script lang="ts" setup>
+import { ref, onMounted, reactive, nextTick } from "vue";
+import { getRequest } from "@/api/DesignForm";
+import formatResult from "@/utils/DesignForm/formatResult";
+import {
+  getOrgFormTree,
+  getOrgFormUserList,
+  searchUserCustomerFormList,
+} from "@/api/hr/org/index";
+import { orgform, criteriaForPeopleList } from "@/api/hr/org/type";
+import UserRole from "@/assets/icons/user.svg";
 
 const props = withDefaults(
-    defineProps<{
-      	modelValue?: string
-    }>(),
-    {}
-)
+  defineProps<{
+    modelValue?: string;
+  }>(),
+  {}
+);
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-}>()
-const visible = ref(false)
+  (e: "update:modelValue", value: string): void;
+}>();
+const visible = ref(false);
 // 侧栏处理
-const treeEl = ref()
-const treeData = ref<orgform[]>([])
-const department = ref(309)
+const treeEl = ref();
+const treeData = ref<orgform[]>([]);
+const department = ref(309);
 const handleNodeClick = (data: any) => {
-    department.value = data.id
-	getUserList()
-}
+  department.value = data.id;
+  getUserList();
+};
 const getTreeData = () => {
-    // getRequest('deptList', {}).then((res: any) => {
-    //   treeData.value = formatResult(res.data, 'transformDataToChild')
-    // })
-	getOrgFormTree({id:309})
-		.then(({ data }) => {
-			// console.log(data)
-			treeData.value = data.list
-		}).finally(()=>{})
-}
+  // getRequest('deptList', {}).then((res: any) => {
+  //   treeData.value = formatResult(res.data, 'transformDataToChild')
+  // })
+  getOrgFormTree({ id: 309 })
+    .then(({ data }) => {
+      // console.log(data)
+      treeData.value = data.list;
+    })
+    .finally(() => {});
+};
 // 侧栏处理结束
-const userName = ref()
+const userName = ref();
 const tableData = ref<criteriaForPeopleList[]>();
 const page = reactive({
-    total: 0,
-    current: 1,
-    pageSize: 10
-})
+  total: 0,
+  current: 1,
+  pageSize: 10,
+});
 const searchClick = () => {
-    getUserList()
-}
+  getUserList();
+};
 const resetClick = () => {
-    userName.value = ''
-    department.value = ''
-    treeEl.value.setCurrentKey(null)
-    getUserList()
-}
+  userName.value = "";
+  department.value = "";
+  treeEl.value.setCurrentKey(null);
+  getUserList();
+};
 const getUserList = () => {
-    const params = {
-		pageInfo: {
-			pageIndex: page.current,
-			pageSize: page.pageSize
-		},
-		name: userName.value,
-		department: department.value
-    }
-    // getRequest('userList', params).then((res: any) => {
-    //   	tableData.value = res.data.list
-    // })
-	// getOrgFormUserList
-	getOrgFormUserList(params)
-		.then(({ data })=>{
-			tableData.value = data.list
-			page.total = data.total
-		})
-		.finally(()=>{})
-}
+  const params = {
+    pageInfo: {
+      pageIndex: page.current,
+      pageSize: page.pageSize,
+    },
+    name: userName.value,
+    department: department.value,
+  };
+  // getRequest('userList', params).then((res: any) => {
+  //   	tableData.value = res.data.list
+  // })
+  // getOrgFormUserList
+  getOrgFormUserList(params)
+    .then(({ data }) => {
+      tableData.value = data.list;
+      page.total = data.total;
+    })
+    .finally(() => {});
+};
 const currentChange = (current: number) => {
-    page.current = current
-    getUserList()
-}
+  page.current = current;
+  getUserList();
+};
 //　已选
 // const checkData = ref<any>([]);
 
 const checkDataList = reactive<criteriaForPeopleList[]>([]);
 
 const tableRowClick = (row: any) => {
-   
-	if(checkDataList.length > 0){
-		let isIn = true
-		checkDataList.forEach(item =>{
-			if(item.id == row.id){
-				isIn = false
-			}
-		})
-		if(isIn){
-			checkDataList.push(row)
-		}
-	}else{
-		checkDataList.push(row)
-	}
-	// console.log("checkDataList",checkDataList,row)
-}
+  if (checkDataList.length > 0) {
+    let isIn = true;
+    checkDataList.forEach((item) => {
+      if (item.id == row.id) {
+        isIn = false;
+      }
+    });
+    if (isIn) {
+      checkDataList.push(row);
+    }
+  } else {
+    checkDataList.push(row);
+  }
+  // console.log("checkDataList",checkDataList,row)
+};
 const delRowClick = (row: criteriaForPeopleList) => {
-	// console.log("checkDataList",row)
-    // checkData.value.forEach((item: any, index: number) => {
-	// 	if (item === row) {
-	// 		checkData.value.splice(index, 1)
-	// 	}
-    // })
-	if(checkDataList &&checkDataList.length > 0) {
-		checkDataList.forEach((item:criteriaForPeopleList,index:number) => {
-			if(item.id == row.id){
-				checkDataList.splice(index,1)
-			}
-		})
-	}
-
+  // console.log("checkDataList",row)
+  // checkData.value.forEach((item: any, index: number) => {
+  // 	if (item === row) {
+  // 		checkData.value.splice(index, 1)
+  // 	}
+  // })
+  if (checkDataList && checkDataList.length > 0) {
+    checkDataList.forEach((item: criteriaForPeopleList, index: number) => {
+      if (item.id == row.id) {
+        checkDataList.splice(index, 1);
+      }
+    });
+  }
 
-	// let checkDataAry = checkDataList
-	// if(checkDataAry.length > 0) {
-	// 	checkDataList.splice(0,checkDataList.length)
-	// 	console.log("checkDataList----1------>",checkDataAry,checkDataList)
-	// 	checkDataAry.forEach(item => {
-	// 		if(item.id != row.id){
-	// 			console.log("checkDataList---------->",item)
-	// 			checkDataList.push(item)
-	// 		}
-	// 	})
-	// }
-}
+  // let checkDataAry = checkDataList
+  // if(checkDataAry.length > 0) {
+  // 	checkDataList.splice(0,checkDataList.length)
+  // 	console.log("checkDataList----1------>",checkDataAry,checkDataList)
+  // 	checkDataAry.forEach(item => {
+  // 		if(item.id != row.id){
+  // 			console.log("checkDataList---------->",item)
+  // 			checkDataList.push(item)
+  // 		}
+  // 	})
+  // }
+};
 const delAllClick = () => {
-    // checkData.value = []
-	checkDataList.splice(0,checkDataList.length)
-}
+  // checkData.value = []
+  checkDataList.splice(0, checkDataList.length);
+};
 // 弹窗处理
 const open = () => {
-    visible.value = true
-	// console.log("open--->",props.modelValue)
-    if (props.modelValue) {
-		searchUserCustomerFormList({name:props.modelValue})
-			.then(({data})=>{
-				// console.log("弹窗处理",data)
-				// checkDataList = data
-				checkDataList.splice(0,checkDataList.length)
-				if(data.length > 0){
-					data.forEach((item:any) => {
-						checkDataList.push(item)
-					})
-				}
-			})
-      	// checkData.value = props.modelValue.split(',')
-		// let jsonCont:criteriaForPeopleList[]  = JSON.parse(props.modelValue)
-		// if(jsonCont.length > 0) {
-		// 	checkDataList.splice(0,checkDataList.length)
-		// 	jsonCont.forEach(item=>{
-		// 		checkDataList.push(item)
-		// 	})
-		// }
-    } else {
-		checkDataList.splice(0,checkDataList.length)
-    }
-}
+  visible.value = true;
+  // console.log("open--->",props.modelValue)
+  if (props.modelValue) {
+    searchUserCustomerFormList({ name: props.modelValue }).then(({ data }) => {
+      // console.log("弹窗处理",data)
+      // checkDataList = data
+      checkDataList.splice(0, checkDataList.length);
+      if (data.length > 0) {
+        data.forEach((item: any) => {
+          checkDataList.push(item);
+        });
+      }
+    });
+    // checkData.value = props.modelValue.split(',')
+    // let jsonCont:criteriaForPeopleList[]  = JSON.parse(props.modelValue)
+    // if(jsonCont.length > 0) {
+    // 	checkDataList.splice(0,checkDataList.length)
+    // 	jsonCont.forEach(item=>{
+    // 		checkDataList.push(item)
+    // 	})
+    // }
+  } else {
+    checkDataList.splice(0, checkDataList.length);
+  }
+};
 // 关闭弹窗
 const confirmClick = () => {
-    // emits('update:modelValue', checkData.value.join(','))
-	let jsonStr = JSON.stringify(checkDataList)
-	emits('update:modelValue', jsonStr)
-    visible.value = false
-}
-defineExpose({ open })
+  // emits('update:modelValue', checkData.value.join(','))
+  let jsonStr = JSON.stringify(checkDataList);
+  emits("update:modelValue", jsonStr);
+  visible.value = false;
+};
+defineExpose({ open });
 onMounted(() => {
-    nextTick(() => {
-		// 可根据实际情况放在点击打开弹窗后加载，会出现loading
-		getTreeData()
-		getUserList()
-    })
-})
-
+  nextTick(() => {
+    // 可根据实际情况放在点击打开弹窗后加载，会出现loading
+    getTreeData();
+    getUserList();
+  });
+});
 
-const defaultProps ={
-	children: 'children',
-  	label: 'name',
-}
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
 </script>
 <template>
-	<el-dialog
-		title="用户选择"
-		v-model="visible"
-		:append-to-body="true"
-		:props="defaultProps "
-		width="80%"
-		top="2vh"
-		draggable
-	>
-		<el-row :gutter="20">
-			<el-col :span="6" style="padding:0">
-				<div class="sidebar_tree">
-					<el-tree
-						ref="treeEl"
-						:data="treeData"
-						node-key="id"
-						@node-click="handleNodeClick"
-						:props="defaultProps "
-						highlight-current
-					/>
-				</div>
-			</el-col>
-			<el-col :span="12">
-				<div class="search">
-					<el-input placeholder="请输入用户名" v-model="userName" />
-					<el-button type="primary" @click="searchClick">查询</el-button>
-					<el-button @click="resetClick">重置</el-button>
-				</div>
-				<div class="list">
-					<el-table :data="tableData" style="width: 100%; height:710px">
-						<el-table-column prop="userName" label="照片" width="100px" align="center">
-							<template #default="scope">
-								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
-								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
-							</template>
-						</el-table-column>
-						<el-table-column prop="name" label="姓名"  width="120px"  align="left">
-							<template #default="scope">
-								{{ scope.row.name }}({{ scope.row.number }})
-							</template>
-						</el-table-column>
-						<el-table-column prop="tel" label="联系方式"  width="120px"  align="left" />
-						<el-table-column prop="nickName" label="归属行政组织"  align="left">
-							<template #default="{ row }">
-								{{ row.companyname }}<span v-if="row.maindeparmentname!=''"> / {{ row.maindeparmentname }}</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="操作" width="60px">
-							<template #default="{ row }">
-								<el-button circle size="small" @click="tableRowClick(row)"><el-icon><ArrowRight /></el-icon></el-button>
-							</template>
-						</el-table-column>
-					</el-table>
-					<div class="page">
-						<el-pagination
-							background
-							layout="prev, pager, next, jumper"
-							small
-							hide-on-single-page
-							:current-page="page.current"
-							:total="page.total"
-							:page-size="page.pageSize"
-							@current-change="currentChange"
-						/>
-					</div>
-				</div>
-			</el-col>
-			<el-col :span="6">
-				<div class="has_select">
-					<div class="total">
-						<div>已选择：{{ checkDataList.length }}</div>
-						<el-button type="danger" @click="delAllClick" size="small">全部移除</el-button>
-					</div>
-					<el-table :data="checkDataList" style="height:710px">
-						<el-table-column prop="userName" label="照片" width="60px" align="center">
-							<template #default="scope">
-								<el-avatar v-if="scope.row.icon != ''" shape="square" :size="30" :src="scope.row.icon" />
-								<el-avatar v-else shape="square" :size="30" :src="UserRole" />
-							</template>
-						</el-table-column>
-						<el-table-column prop="name" label="姓名"  align="left">
-							<template #default="scope">
-								{{ scope.row.name }}({{ scope.row.number }})
-							</template>
-						</el-table-column>
-						<el-table-column label="操作" width="60px">
-							<template #default="{ row }">
-								<el-button size="small" type="danger" @click="delRowClick(row)">移除</el-button>
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-			</el-col>
-		</el-row>
-		
-		<template #footer>
-			<div>
-				<el-button @click="visible = false">取消</el-button>
-				<el-button type="primary" @click="confirmClick"> 确定 </el-button>
-			</div>
-		</template>
+  <el-dialog
+    title="用户选择"
+    v-model="visible"
+    :append-to-body="true"
+    :props="defaultProps"
+    width="80%"
+    top="2vh"
+    draggable
+  >
+    <el-row :gutter="20">
+      <el-col :span="6" style="padding: 0">
+        <div class="sidebar_tree">
+          <el-tree
+            ref="treeEl"
+            :data="treeData"
+            node-key="id"
+            @node-click="handleNodeClick"
+            :props="defaultProps"
+            highlight-current
+          />
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="search">
+          <el-input placeholder="请输入用户名" v-model="userName" />
+          <el-button type="primary" @click="searchClick">查询</el-button>
+          <el-button @click="resetClick">重置</el-button>
+        </div>
+        <div class="list">
+          <el-table :data="tableData" style="width: 100%; height: 710px">
+            <el-table-column prop="userName" label="照片" width="100px" align="center">
+              <template #default="scope">
+                <el-avatar
+                  v-if="scope.row.icon != ''"
+                  shape="square"
+                  :size="30"
+                  :src="scope.row.icon"
+                />
+                <el-avatar v-else shape="square" :size="30" :src="UserRole" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="姓名" width="120px" align="left">
+              <template #default="scope">
+                {{ scope.row.name }}({{ scope.row.number }})
+              </template>
+            </el-table-column>
+            <el-table-column prop="tel" label="联系方式" width="120px" align="left" />
+            <el-table-column prop="nickName" label="归属行政组织" align="left">
+              <template #default="{ row }">
+                {{ row.companyname
+                }}<span v-if="row.maindeparmentname != ''">
+                  / {{ row.maindeparmentname }}</span
+                >
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="60px">
+              <template #default="{ row }">
+                <el-button circle size="small" @click="tableRowClick(row)"
+                  ><el-icon><ArrowRight /></el-icon
+                ></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="page">
+            <el-pagination
+              background
+              layout="prev, pager, next, jumper"
+              small
+              hide-on-single-page
+              :current-page="page.current"
+              :total="page.total"
+              :page-size="page.pageSize"
+              @current-change="currentChange"
+            />
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="has_select">
+          <div class="total">
+            <div>已选择：{{ checkDataList.length }}</div>
+            <el-button type="danger" @click="delAllClick" size="small"
+              >全部移除</el-button
+            >
+          </div>
+          <el-table :data="checkDataList" style="height: 710px">
+            <el-table-column prop="userName" label="照片" width="60px" align="center">
+              <template #default="scope">
+                <el-avatar
+                  v-if="scope.row.icon != ''"
+                  shape="square"
+                  :size="30"
+                  :src="scope.row.icon"
+                />
+                <el-avatar v-else shape="square" :size="30" :src="UserRole" />
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="姓名" align="left">
+              <template #default="scope">
+                {{ scope.row.name }}({{ scope.row.number }})
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="60px">
+              <template #default="{ row }">
+                <el-button size="small" type="danger" @click="delRowClick(row)"
+                  >移除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-col>
+    </el-row>
+
+    <template #footer>
+      <div>
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="confirmClick"> 确定 </el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
 .sidebar_tree {
-	width: 100%;
-	border: 1px solid #ebeef5;
-	border-radius: 3px;
-	padding: 10px 0;
-	margin-right: 10px;
-	height: 750px;
-	overflow-y: auto;
+  width: 100%;
+  border: 1px solid #ebeef5;
+  border-radius: 3px;
+  padding: 10px 0;
+  margin-right: 10px;
+  height: 750px;
+  overflow-y: auto;
 }
 .has_select {
-	width: 100%;
+  width: 100%;
 
-	.total {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 32px;
-		margin-bottom: 10px;
-	}
+  .total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 32px;
+    margin-bottom: 10px;
+  }
 }
 .search {
-	display: flex;
-	margin-bottom: 10px;
-	.el-input {
-		margin-right: 10px;
-	}
+  display: flex;
+  margin-bottom: 10px;
+  .el-input {
+    margin-right: 10px;
+  }
 }
 .page {
-	padding-top: 20px;
-	display: flex;
-	justify-content:space-between;
+  padding-top: 20px;
+  display: flex;
+  justify-content: space-between;
 }
 .expand-user-dialog {
+  display: flex;
+  align-items: flex-start;
+  .sidebar-tree {
+    width: 180px;
+    border: 1px solid #ebeef5;
+    border-radius: 3px;
+    padding: 10px 0;
+    margin-right: 10px;
+    max-height: 500px;
+    overflow-y: auto;
+  }
+  .table-list {
+  }
+  .search {
     display: flex;
-    align-items: flex-start;
-    .sidebar-tree {
-		width: 180px;
-		border: 1px solid #ebeef5;
-		border-radius: 3px;
-		padding: 10px 0;
-		margin-right: 10px;
-		max-height: 500px;
-		overflow-y: auto;
-    }
-    .table-list {
-      	
+    margin-bottom: 10px;
+    .el-input {
+      margin-right: 10px;
     }
-    .search {
-		display: flex;
-		margin-bottom: 10px;
-		.el-input {
-			margin-right: 10px;
-		}
-    }
-    .page {
-		padding-top: 20px;
-		display: flex;
-		justify-content: flex-end;
-    }
-    .has-select {
-		width: 200px;
-		margin-left: 20px;
-		.total {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			height: 32px;
-			margin-bottom: 10px;
-		}
+  }
+  .page {
+    padding-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .has-select {
+    width: 200px;
+    margin-left: 20px;
+    .total {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 32px;
+      margin-bottom: 10px;
     }
+  }
 }
 </style>
diff --git a/src/components/DesignForm/public/form/formItem.vue b/src/components/DesignForm/public/form/formItem.vue
index 898605f..253d7b5 100644
--- a/src/components/DesignForm/public/form/formItem.vue
+++ b/src/components/DesignForm/public/form/formItem.vue
@@ -1003,7 +1003,6 @@ const diGuiJilian = (val: any, options: any[]) => {
 };
 </script>
 <template>
-  {{ data.type }}
   <BaiduMap
     v-if="judgeIsShow(data.name) && data.type === 'baidumap' && type != 4"
     :data="data"
diff --git a/src/main.ts b/src/main.ts
index 3909ed5..24eac8b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -28,6 +28,10 @@ import ComWidget from '@/widget/index'
 import AKDesign from '@/views/sysworkflow/codepage/index'
 import * as pinia  from './store/index'
 
+import SketchRule from 'vue3-sketch-ruler'
+import 'vue3-sketch-ruler/lib/style.css'
+
+
 
 
 const app = createApp(App);
@@ -39,7 +43,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 	app.component(key, component)
 }
-
+app.component('SketchRule', SketchRule)
 app.directive('focus', {
 	mounted(el) {
 	  el.focus();
diff --git a/src/store/ruler/index.ts b/src/store/ruler/index.ts
new file mode 100644
index 0000000..b4cbfd8
--- /dev/null
+++ b/src/store/ruler/index.ts
@@ -0,0 +1,143 @@
+import { defineStore } from "pinia";
+import { store } from "@/store";
+export const printPageConfigStore = defineStore("printPageConfigStore", () => {
+    const isMoveCanvas = ref(false);
+    const isThumbnail = ref(true);
+    const viewWidth = ref<number>(1000);
+    const viewHeight = ref<number>(800);                                                                                                                           
+    const scale = ref<number>(100); //缩放
+    const scrollTop = ref<number>(0);
+    const scrollLeft = ref<number>(0);
+    const  screenWidth = ref<number>(1920);
+    const screenHeight = ref<number>(1080);
+    //bg
+    const backgroundColor = ref<string>('#FFFFFF');
+    const  backgroundImage = ref<string>('');
+
+    const scaleSub = () => {
+        return scale.value
+    }
+
+    const percent = () => {
+        return scale.value * 0.01
+    }
+
+    const thumbnailSize = () => {
+        if(scale.value > 100){
+            return 10 / scale.value
+        }else{
+            return 0.1;
+        }
+    }
+
+    const viewWidthSub = () => {
+        return viewWidth.value;
+    }
+
+    const viewHeightSub = () => {
+        return viewHeight.value;
+    }
+
+    const scrollTopSub = () => {
+        return scrollTop.value;
+    }
+    const  scrollLeftSub = () => {
+        return scrollLeft.value;
+    }
+    const  screenWidthSub = () => {
+        return screenWidth.value;
+    }
+    const  screenHeightSub = () => {
+        return screenHeight.value;
+    }
+
+    const showWidth = () => {
+        return screenWidthSub() * (scaleSub() < 100 ? 1 : percent()) + 400;
+    }
+    const  showHeight = () => {
+        return screenHeightSub() * (scaleSub() < 100 ? 1 : percent()) + 400;
+    }
+
+    const isMoveCanvasSub = () => {
+        return isMoveCanvas.value;
+    }
+
+    const canvasConfig = () =>{
+        return {
+            thumbnailWidth: Math.ceil(screenWidthSub() * thumbnailSize() * percent()),
+            thumbnailHeight: Math.ceil(screenHeightSub() * thumbnailSize ()* percent()),
+            thumbnailWrapWidth: Math.ceil(showWidth()* thumbnailSize()),
+            thumbnailWrapHeight: Math.ceil(showHeight() * thumbnailSize())
+        }                  
+    }
+    
+    const setViewBox = (data:{ width: number; height: number }) => {
+        viewWidth.value =  data.width; 
+        viewHeight.value = data.height;
+    }
+
+    const setScroll = ({ left, top }: { left: number; top: number }) => {
+        const distance = 60;
+
+        if (left < 0) {
+            left = 0;
+        } else if (left > showWidth() - viewWidthSub() - distance) {
+            left = showWidth() - viewWidthSub() - distance;
+        }
+
+        if (top < 0) {
+            top = 0;
+        } else if (top > showHeight() - viewHeightSub() - distance) {
+            top = showHeight() - viewHeightSub() - distance;
+        }
+        scrollLeft.value = Math.round(left);
+        scrollTop.value = Math.round(top);
+    }
+
+    const setMoveCanvas = (data: boolean) => {
+        isMoveCanvas.value = data
+    }
+
+    const setScale = (data: number) => {
+        scale.value = data;
+    }
+    const setThumbnail = (data: boolean) => {
+        isThumbnail.value = data;
+    }
+    return {
+        isMoveCanvas,
+        isThumbnail,
+        viewWidth,
+        viewHeight,
+        scale, //缩放
+        scrollTop,
+        scrollLeft,
+        screenWidth,
+        screenHeight,
+        //bg
+        backgroundColor,
+        backgroundImage,
+        scaleSub,
+        percent,
+        thumbnailSize,
+        viewWidthSub,
+        viewHeightSub,
+        scrollTopSub,
+        scrollLeftSub,
+        screenWidthSub,
+        screenHeightSub,
+        showWidth,
+        showHeight,
+        isMoveCanvasSub,
+        canvasConfig,
+        setViewBox,
+        setScroll,
+        setMoveCanvas,
+        setScale,
+        setThumbnail
+    };
+});
+
+export function useUserStoreHook() {
+    return printPageConfigStore(store);
+}
diff --git a/src/views/process/canvas-bg/CanvasBg.vue b/src/views/process/canvas-bg/CanvasBg.vue
new file mode 100644
index 0000000..986c206
--- /dev/null
+++ b/src/views/process/canvas-bg/CanvasBg.vue
@@ -0,0 +1,214 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2025-03-24 11:00:01
+@ 备注: 画板背景
+-->
+<script lang="ts" setup>
+import { drawRuler } from "./drawRuler.ts";
+import { printPageConfigStore } from "@/store/ruler/index";
+
+const editorStore = printPageConfigStore();
+const topRulerRef = ref(null); //上部标尺
+const leftRulerRef = ref(null); //左部标尺
+const scrollLeft = ref(editorStore.scrollLeftSub() - 24);
+const scrollTop = ref(editorStore.scrollLeftSub() - 24);
+const isMoveCanvas = ref(editorStore.isMoveCanvasSub());
+
+let moveInfo = {
+  startX: 0,
+  startY: 0,
+};
+
+const bgStyle = reactive({
+  width: editorStore.showWidth() + "px",
+  height: editorStore.showHeight() + "px",
+});
+const canvasStyle = reactive({
+  left: -scrollLeft.value + "px",
+  top: -scrollTop.value + "px",
+  width: editorStore.screenWidth + "px",
+  height: editorStore.screenHeight + "px",
+  transform: `scale(${editorStore.scale * 0.01})`,
+});
+const topStyle = reactive({
+  left: -scrollLeft.value + "px",
+});
+const leftStyle = reactive({
+  top: -scrollTop.value + "px",
+});
+
+let isRuler = false;
+const refreshRuler = () => {
+  if (!isRuler) {
+    isRuler = true;
+    nextTick(() => {
+      drawRuler(
+        "top",
+        topRulerRef.value,
+        editorStore.scale,
+        editorStore.showWidth(),
+        24,
+        60
+      );
+      drawRuler(
+        "left",
+        leftRulerRef.value,
+        editorStore.scale,
+        editorStore.showHeight(),
+        24,
+        60
+      );
+      isRuler = false;
+    });
+  }
+};
+
+//数据监听区域
+watch(
+  () => editorStore.screenWidth,
+  () => {
+    refreshRuler();
+  },
+  {
+    deep: true,
+  }
+);
+watch(
+  () => editorStore.screenHeight,
+  () => {
+    refreshRuler();
+  },
+  {
+    deep: true,
+  }
+);
+watch(
+  () => editorStore.scale,
+  (val: number) => {
+    console.log("标尺刻度值---111--》", val);
+    canvasStyle.scale = val * 0.01;
+    refreshRuler();
+  },
+  {
+    deep: true,
+  }
+);
+const onKeyAction = (e: KeyboardEvent) => {
+  if (e.keyCode == keyCode.space) {
+    editorStore.setMoveCanvas(!editorStore.isMoveCanvas);
+  }
+};
+const onWheelAction = (e: WheelEvent) => {
+  //   console.log(editorStore.scale);
+  if (e.wheelDelta > 0) {
+    editorStore.setScale(editorStore.scale + 1);
+  } else {
+    editorStore.setScale(editorStore.scale - 1);
+  }
+};
+
+onMounted(() => {
+  //   window.addEventListener("keydown", onKeyAction);
+  window.addEventListener("wheel", onWheelAction);
+  refreshRuler();
+});
+onBeforeUnmount(() => {
+  //   window.removeEventListener("keydown", onKeyAction);
+  window.removeEventListener("wheel", onWheelAction);
+});
+
+const onMoveCanvasDown = (e: MouseEvent) => {
+  e.stopPropagation();
+  console.log("鼠标", editorStore.scale);
+  moveInfo = {
+    startX: e.clientX,
+    startY: e.clientY,
+  };
+};
+const onMoveCanvasUp = (e: MouseEvent) => {
+  e.stopPropagation();
+  let left = scrollLeft.value - (e.clientX - moveInfo.startX);
+  let top = scrollTop.value - (e.clientY - moveInfo.startY);
+  //   console.log('move', left, top);
+  editorStore.setScroll({ left, top });
+};
+</script>
+<template>
+  <div class="dashboard-canvas" id="dashboard">
+    <div class="canvas-bg" :style="bgStyle">
+      <div
+        :style="canvasStyle"
+        class="canvas-panel-wrap"
+        @mousedown="onMoveCanvasDown"
+        @mouseup="onMoveCanvasUp"
+      >
+        {{ canvasStyle }}
+        <slot></slot>
+      </div>
+      <canvas ref="topRulerRef" class="canvas-ruler top" :style="topStyle"></canvas>
+      <canvas ref="leftRulerRef" class="canvas-ruler left" :style="leftStyle"></canvas>
+
+      <i class="canvas-ruler-cross fa fa-eye"></i>
+      <div
+        class="canvas-move"
+        v-show="isMoveCanvas"
+        @mousedown="onMoveCanvasDown"
+        @mouseup="onMoveCanvasUp"
+      >
+        1212312312
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.dashboard-canvas {
+  top: 0px;
+  height: calc(100vh - 200px);
+  overflow: hidden;
+  position: relative;
+  left: 0px;
+  width: 100%;
+}
+.canvas-ruler-cross {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  background-color: var(--ruler-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.canvas-panel-wrap {
+  position: absolute;
+  box-shadow: var(--canvas-shadow) 0 0 30px 0;
+  transform-origin: left top;
+  margin-left: 20px;
+  margin-top: 20px;
+  background-color: #e4e4ed;
+}
+.canvas-move {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--move-bg);
+  cursor: move;
+}
+
+.canvas-ruler {
+  position: absolute;
+  transform-origin: left top;
+  // cursor: ew-resize;
+  background-color: var(--ruler-bg);
+
+  &.left {
+    top: 24px;
+    left: 0px;
+  }
+
+  &.top {
+    top: 0px;
+    left: 24px;
+  }
+}
+</style>
diff --git a/src/views/process/canvas-bg/drawRuler.ts b/src/views/process/canvas-bg/drawRuler.ts
new file mode 100644
index 0000000..717b068
--- /dev/null
+++ b/src/views/process/canvas-bg/drawRuler.ts
@@ -0,0 +1,98 @@
+/**
+ * 画标尺刻度Canvas
+ * @param direction 方向
+ * @param canvas canvas DOM
+ * @param scale 缩放比例[20-200]
+ * @param width 长度
+ * @param height 高度
+ * @param startLen 开始距离
+ */
+export function drawRuler(
+  direction: string,
+  canvas: HTMLCanvasElement,
+  scale: number = 100,
+  width: number,
+  height: number = 24,
+  startLen: number = 60
+) {
+  const padding = 2;
+  const ctx: CanvasRenderingContext2D = canvas.getContext('2d');
+  const percent = scale * 0.01;
+  let unit = Math.ceil(10 / percent);
+  if (unit < 8) {
+    unit = 8;
+  }
+  //计算出要绘制多少个刻度
+  const scaleCount = Math.ceil(width + startLen / unit);
+  if (direction == 'top') {
+    canvas.width = width + startLen;
+    canvas.height = height;
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    //绘制起点
+    ctx.strokeStyle = 'rgb(161, 174, 179)';
+    ctx.font = '10px Arial';
+    ctx.lineWidth = 0.5;
+    ctx.moveTo(startLen, 0);
+    ctx.lineTo(startLen, height);
+    ctx.fillText('0', startLen + padding, 13);
+
+    for (let i = 1; i <= scaleCount; i++) {
+      //计算每个刻度的位置
+        const step = startLen + Math.round(i * unit * percent);
+        //10的倍数刻度大长度
+        if (i % 10 === 0) {
+          ctx.moveTo(step, 0);
+          ctx.lineTo(step, height);
+          //标注刻度值
+          const scaleText = i * unit + '';
+          ctx.fillText(scaleText, step + padding, 13);
+        } else if (i % 5 === 0) {//5的倍数刻度中长度
+          ctx.moveTo(step, 15);
+          ctx.lineTo(step, height);
+          //标注刻度值
+          const scaleText = i * unit + '';
+          ctx.fillText(scaleText, step + padding, 13);
+        } else {//其他刻度小长度
+          ctx.moveTo(step, height - 2);
+          ctx.lineTo(step, height);
+        }
+      }
+      ctx.stroke();
+  } else {
+    canvas.width = height;
+    canvas.height = width + startLen;
+    ctx.clearRect(0, 0, height, width + startLen);
+
+    ctx.beginPath();
+    //绘制起点
+    ctx.strokeStyle = 'rgb(161, 174, 179)';
+    ctx.font = '10px Arial';
+    ctx.lineWidth = 0.5;
+    ctx.moveTo(0, startLen);
+    ctx.lineTo(height, startLen);
+    ctx.fillText('0', padding, startLen - padding);
+    //计算出要绘制多少个刻度
+
+    for (let i = 1; i <= scaleCount; i++) {
+      const step = startLen + Math.round(i * unit * percent);
+      if (i % 10 === 0) {
+        ctx.moveTo(0, step);
+        ctx.lineTo(height, step);
+        //标注刻度值
+        const scaleText = unit * i + '';
+        ctx.fillText(scaleText, padding, step - padding);
+      } else if (i % 5 === 0) {
+        ctx.moveTo(15, step);
+        ctx.lineTo(height, step);
+        //标注刻度值
+        const scaleText = unit * i + '';
+        ctx.fillText(scaleText, padding, step - padding);
+      } else {
+        ctx.moveTo(height - 2, step);
+        ctx.lineTo(height, step);
+      }
+    }
+    ctx.stroke();
+  }
+}
diff --git a/src/views/process/customProvider.js b/src/views/process/customProvider.js
new file mode 100644
index 0000000..879c64e
--- /dev/null
+++ b/src/views/process/customProvider.js
@@ -0,0 +1,75 @@
+import { hiprint } from "vue-plugin-hiprint";
+export const iCustomProvider = function (options) {
+    console.log(options.moduleList.value);
+    var addElementTypes = function (context) {
+        context.removePrintElementTypes("providerModule1");
+        context.addPrintElementTypes("providerModule1", [
+            new hiprint.PrintElementTypeGroup("追溯业务", [
+                // options.config,
+                ...options.moduleList.value.map(item => ({
+                    tid: item.defaultModule,
+                    title: item.title,
+                    data: item.title,
+                    type: item.type,
+                    options: {
+                        field: item.field,
+                        height: 14,
+                        testData: "默认",
+                        fontSize: 12,
+                        fontWeight: '500',
+                        textAlign: 'center',
+                        textContentVerticalAlign: 'middle',
+                        ...(item.textType ? { textType: item.textType } : {}),
+                    },
+                })),
+                {
+                    tid: "providerModule1.text",
+                    title: "文本",
+                    data: "文本",
+                    type: "text",
+                    options: {
+                        field: "customText",
+                        testData: "文本",
+                        height: 14,
+                        fontSize: 12,
+                        fontWeight: "500",
+                        textAlign: "left",
+                        textContentVerticalAlign: "middle",
+                    },
+                },
+                {
+                    tid: "providerModule1.barcode",
+                    title: "条形码",
+                    data: "XS888888888",
+                    type: "text",
+                    options: {
+                        field: "barcode",
+                        testData: "XS888888888",
+                        height: 32,
+                        fontSize: 12,
+                        lineHeight: 18,
+                        textAlign: "left",
+                        textType: "barcode",
+                    },
+                },
+                {
+                    tid: "providerModule1.qrcode",
+                    title: "二维码",
+                    data: "XS888888888",
+                    type: "qrcode",
+                    options: {
+                        field: "qrcode",
+                        testData: "XS888888888",
+                        height: 32,
+                        fontSize: 12,
+                        lineHeight: 18,
+                        textType: "qrcode",
+                    },
+                },
+            ]),
+        ]);
+    };
+    return {
+        addElementTypes: addElementTypes,
+    };
+};
diff --git a/src/views/process/print/canvas-bg/CanvasBg.vue b/src/views/process/print/canvas-bg/CanvasBg.vue
new file mode 100644
index 0000000..27d4dac
--- /dev/null
+++ b/src/views/process/print/canvas-bg/CanvasBg.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="canvas-bg" :style="bgStyle">
+    <div :style="canvasStyle" class="canvas-panel-wrap">
+      {{ canvasStyle }} <slot></slot>
+    </div>
+
+    <canvas ref="topRulerRef" class="canvas-ruler top" :style="topStyle"></canvas>
+    <canvas ref="leftRulerRef" class="canvas-ruler left" :style="leftStyle"></canvas>
+    <i class="canvas-ruler-cross"></i>
+
+    <div
+      class="canvas-move"
+      v-show="isMoveCanvas"
+      @mousedown="onMoveCanvasDown"
+      @mouseup="onMoveCanvasUp"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  onMounted,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+} from "vue";
+import { drawRuler } from "./drawRuler.ts";
+import { useUserRulerStore } from "@/store/ruler/index";
+import { keyCode } from "./data/keyCode";
+
+export default defineComponent({
+  name: "CanvasBg",
+
+  setup() {
+    const editorStore = useUserRulerStore();
+    const topRulerRef = ref();
+    const leftRulerRef = ref();
+    const isMoveCanvas = computed(() => editorStore.isMoveCanvas);
+    watch(
+      () => editorStore.screenWidth,
+      () => {
+        refreshRuler();
+      }
+    );
+    watch(
+      () => editorStore.screenHeight,
+      () => {
+        refreshRuler();
+      }
+    );
+    watch(
+      () => editorStore.scale,
+      () => {
+        refreshRuler();
+      }
+    );
+
+    let isRuler = false;
+    const refreshRuler = () => {
+      if (!isRuler) {
+        isRuler = true;
+        nextTick(() => {
+          drawRuler(
+            "top",
+            topRulerRef.value,
+            editorStore.scale,
+            editorStore.showWidth,
+            24,
+            60
+          );
+          drawRuler(
+            "left",
+            leftRulerRef.value,
+            editorStore.scale,
+            editorStore.showWidth,
+            24,
+            60
+          );
+          isRuler = false;
+        });
+      }
+    };
+    const scrollLeft = computed(() => {
+      return editorStore.scrollLeft - 24;
+    });
+    const scrollTop = computed(() => {
+      return editorStore.scrollTop - 24;
+    });
+    const onKeyAction = (e: KeyboardEvent) => {
+      if (e.keyCode == keyCode.space) {
+        editorStore.setMoveCanvas(!editorStore.isMoveCanvas);
+      }
+    };
+    const onWheelAction = (e: WheelEvent) => {
+      if (isMoveCanvas.value) {
+        if (e.wheelDelta > 0) {
+          editorStore.setScale(editorStore.scale + 1);
+        } else {
+          editorStore.setScale(editorStore.scale - 1);
+        }
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("keydown", onKeyAction);
+      window.addEventListener("wheel", onWheelAction);
+      refreshRuler();
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("keydown", onKeyAction);
+      window.removeEventListener("wheel", onWheelAction);
+    });
+    let moveInfo = {
+      startX: 0,
+      startY: 0,
+    };
+    return {
+      topRulerRef,
+      leftRulerRef,
+      topStyle: computed(() => ({
+        left: -scrollLeft.value + "px",
+      })),
+      leftStyle: computed(() => ({ top: -scrollTop.value + "px" })),
+      isMoveCanvas,
+      bgStyle: computed(() => ({
+        width: editorStore.showWidth + "px",
+        height: editorStore.showHeight + "px",
+      })),
+      canvasStyle: computed(() => ({
+        left: -scrollLeft.value + "px",
+        top: -scrollTop.value + "px",
+        width: editorStore.screenWidth + "px",
+        height: editorStore.screenHeight + "px",
+        transform: `scale(${editorStore.scale * 0.01})`,
+      })),
+      scrollLeft,
+      scrollTop,
+      onMoveCanvasDown: (e: MouseEvent) => {
+        e.stopPropagation();
+
+        moveInfo = {
+          startX: e.clientX,
+          startY: e.clientY,
+        };
+      },
+      onMoveCanvasUp: (e: MouseEvent) => {
+        e.stopPropagation();
+        let left = scrollLeft.value - (e.clientX - moveInfo.startX);
+        let top = scrollTop.value - (e.clientY - moveInfo.startY);
+        //   console.log('move', left, top);
+        editorStore.setScroll({ left, top });
+      },
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.canvas-ruler-cross {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+
+  background-color: var(--ruler-bg);
+}
+.canvas-panel-wrap {
+  position: absolute;
+  box-shadow: var(--canvas-shadow) 0 0 30px 0;
+  transform-origin: left top;
+  margin-left: 60px;
+  margin-top: 60px;
+}
+.canvas-move {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--move-bg);
+  cursor: move;
+}
+
+.canvas-ruler {
+  position: absolute;
+  transform-origin: left top;
+  // cursor: ew-resize;
+  background-color: var(--ruler-bg);
+
+  &.left {
+    top: 24px;
+    left: 0px;
+  }
+
+  &.top {
+    top: 0px;
+    left: 24px;
+  }
+}
+</style>
diff --git a/src/views/process/print/canvas-bg/CanvasSlider.vue b/src/views/process/print/canvas-bg/CanvasSlider.vue
new file mode 100644
index 0000000..1e8aae6
--- /dev/null
+++ b/src/views/process/print/canvas-bg/CanvasSlider.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="canvas-slider">
+    <el-tooltip placement="top" effect="light">
+      <template #content>
+        <div class="operation-tip-item">
+          <div>按下空格键，可移动画布</div>
+          <div>按下空格键，滚动鼠标滑轮可放缩画布</div>
+        </div>
+      </template>
+      <i class="el-icon-thumb" />
+    </el-tooltip>
+    <el-input-number v-model="scalePercent" :min="20" :max="200" size="small"></el-input-number>
+    <el-slider
+      size="small"
+      v-model="scalePercent"
+      :min="20"
+      :max="200"
+      :step="5"
+      style="width: 100px; margin: 0 12px"
+    ></el-slider>
+
+    <el-tooltip placement="top">
+      <template #content> 实际大小 </template>
+      <i class="el-icon-full-screen" @click="onRealCanvas" />
+    </el-tooltip>
+    <el-tooltip placement="top">
+      <template #content> 适应屏幕大小 </template>
+      <i class="el-icon-aim" @click="onFitCanvas" />
+    </el-tooltip>
+    <i
+      class="el-icon-monitor"
+      :style="{ color: showThumbnail ? 'dodgerblue' : 'rgba(0,0,0,0.5)' }"
+      @click="onMagic"
+    ></i>
+  </div>
+</template>
+
+<script lang="ts">
+  import { useEditorStore } from '@/stores/editor';
+
+  import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+  //下方状态栏
+  export default defineComponent({
+    name: 'CanvasSlider',
+    setup() {
+      const store = useEditorStore();
+
+      const scalePercent = computed({
+        get: () => store.scale,
+        set: (value) => {
+          store.setScale(value);
+        }
+      });
+      const showThumbnail = computed({
+        get: () => store.$state.isThumbnail,
+        set: (value) => {
+          store.setThumbnail(value);
+        }
+      });
+
+      const onFitCanvas = () => {
+        store.setScale(
+          parseInt(
+            //@ts-ignore
+            ((document.getElementById('dashboard').offsetHeight - 84) / store.screenHeight) * 100
+          )
+        );
+      };
+      const onRealCanvas = () => {
+        store.setScale(100);
+      };
+      const onMagic = () => {
+        showThumbnail.value = !showThumbnail.value;
+      };
+
+      return {
+        showThumbnail,
+
+        scalePercent,
+
+        //method
+        onMagic,
+        onFitCanvas,
+        onRealCanvas
+      };
+    }
+  });
+</script>
+<style lang="scss" scoped>
+  .operation-tip-item > div {
+    color: var(--el-color-primary);
+    background: rgba(26, 103, 255, 0.1);
+    padding: 5px 10px;
+  }
+
+  .operation-tip-item > div:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  i {
+    font-size: 16px;
+    color: var(--slider-icon);
+    cursor: pointer;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+
+  :deep(.el-input-number__decrease) {
+    border: none;
+    background: none;
+  }
+
+  :deep(.el-input-number__increase) {
+    border: none;
+    background: none;
+  }
+
+  :deep(.el-input__wrapper) {
+    border: none;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+  }
+
+  .el-input-number--small {
+    width: 84px;
+  }
+
+  $line: solid 1px var(--canvas-slider-border);
+
+  .canvas-slider {
+    display: flex;
+    position: fixed;
+    bottom: 10px;
+    right: 310px;
+    background-color: var(--slider-bg);
+    height: 32px;
+    justify-content: flex-end;
+    align-items: center;
+    border: $line;
+    z-index: 9;
+    border-radius: 2px;
+    padding: 0 16px;
+  }
+</style>
diff --git a/src/views/process/print/canvas-bg/CanvasThumbnail.vue b/src/views/process/print/canvas-bg/CanvasThumbnail.vue
new file mode 100644
index 0000000..f3fcc5b
--- /dev/null
+++ b/src/views/process/print/canvas-bg/CanvasThumbnail.vue
@@ -0,0 +1,193 @@
+<template>
+  <canvas
+    class="canvas-thumbnail"
+    :width="canvasConfig.thumbnailWrapWidth"
+    :height="canvasConfig.thumbnailWrapHeight"
+    ref="thumbnailRef"
+    v-show="showThumbnail"
+    @mousedown="onMoveStart"
+    @mousemove="onMove"
+    @mouseup="onMoveEnd"
+    @mouseleave="onMoveEnd"
+  >
+  </canvas>
+</template>
+
+<script lang="ts">
+  import { useEditorStore } from '@/stores/editor';
+  import {
+    defineComponent,
+    ref,
+    computed,
+    reactive,
+    watch,
+    onMounted,
+    nextTick,
+    onBeforeUnmount
+  } from 'vue';
+  export default defineComponent({
+    name: 'CanvasThumbnail',
+    setup(props, context) {
+      const editorStore = useEditorStore();
+      const thumbnailRef = ref();
+      const canvasConfig = computed(() => editorStore.canvasConfig);
+      let isLock = false;
+      const viewBox = computed({
+        get: () => ({ viewWidth: editorStore.viewWidth, viewHeight: editorStore.viewHeight }),
+        set: (v) => {
+          editorStore.setViewBox(v);
+        }
+      });
+      const unscale = computed(() => {
+        if (editorStore.scale > 100) {
+          return 1 / editorStore.thumbnailSize;
+        } else {
+          return 10;
+        }
+      });
+
+      const getViewBox = () => {
+        nextTick(() => {
+          let dashboardDom = document.getElementById('dashboard');
+          if (!dashboardDom) {
+            return;
+          }
+          viewBox.value.viewWidth = dashboardDom.offsetWidth;
+          viewBox.value.viewHeight = dashboardDom.offsetHeight;
+          drawThumbnail();
+        });
+      };
+      const drawThumbnail = () => {
+        if (!isLock) {
+          isLock = true;
+          nextTick(() => {
+            let startLen = 6;
+
+            const ctx = thumbnailRef.value.getContext('2d');
+            ctx.clearRect(
+              0,
+              0,
+              canvasConfig.value.thumbnailWrapWidth,
+              canvasConfig.value.thumbnailWrapHeight
+            );
+            ctx.beginPath();
+            ctx.fillStyle = 'rgba(26, 103, 255, 0.5)';
+            ctx.rect(
+              startLen,
+              startLen,
+              canvasConfig.value.thumbnailWidth,
+              canvasConfig.value.thumbnailHeight
+            );
+            ctx.fill();
+            ctx.beginPath();
+            ctx.strokeStyle = '#1a67ff';
+            ctx.rect(
+              Math.round(editorStore.scrollLeft * editorStore.thumbnailSize),
+              Math.round(editorStore.scrollTop * editorStore.thumbnailSize),
+              viewBox.value.viewWidth * editorStore.thumbnailSize,
+              viewBox.value.viewHeight * editorStore.thumbnailSize
+            );
+            ctx.stroke();
+
+            isLock = false;
+          });
+        }
+      };
+      watch(
+        () => editorStore.scale,
+        () => {
+          drawThumbnail();
+        }
+      );
+      watch(
+        () => editorStore.screenWidth,
+        () => {
+          drawThumbnail();
+        }
+      );
+      watch(
+        () => editorStore.screenHeight,
+        () => {
+          drawThumbnail();
+        }
+      );
+      watch(
+        () => editorStore.scrollLeft,
+        () => {
+          drawThumbnail();
+        }
+      );
+      watch(
+        () => editorStore.scrollTop,
+        () => {
+          drawThumbnail();
+        }
+      );
+
+      watch(
+        () => editorStore.screenHeight,
+        () => {
+          drawThumbnail();
+        }
+      );
+      watch(
+        () => editorStore.viewHeight,
+        () => {
+          drawThumbnail();
+        }
+      );
+      watch(
+        () => editorStore.viewWidth,
+        () => {
+          drawThumbnail();
+        }
+      );
+
+      onMounted(() => {
+        window.addEventListener('resize', getViewBox);
+        getViewBox();
+      });
+      onBeforeUnmount(() => {
+        window.removeEventListener('resize', getViewBox);
+      });
+      let moveInfo = {
+        startX: 0,
+        startY: 0,
+        isMove: false
+      };
+      return {
+        canvasConfig,
+        thumbnailRef,
+        showThumbnail: computed(() => editorStore.isThumbnail),
+        onMoveStart: (e: MouseEvent) => {
+          moveInfo.isMove = true;
+          moveInfo.startX = e.clientX;
+          moveInfo.startY = e.clientY;
+        },
+        onMove: (e: MouseEvent) => {
+          if (moveInfo.isMove) {
+            let left = editorStore.scrollLeft + (e.clientX - moveInfo.startX) * unscale.value;
+            let top = editorStore.scrollTop + (e.clientY - moveInfo.startY) * unscale.value;
+            // console.log('thumbnail', left, top);
+            editorStore.setScroll({ left, top });
+            moveInfo.startX = e.clientX;
+            moveInfo.startY = e.clientY;
+          }
+        },
+        onMoveEnd: () => {
+          moveInfo.isMove = false;
+        }
+      };
+    }
+  });
+</script>
+<style lang="scss" scoped>
+  .canvas-thumbnail {
+    background-color: var(--thumbnail-wrap-bg);
+    position: fixed;
+    right: 310px;
+    bottom: 48px;
+    z-index: 9;
+    cursor: move;
+  }
+</style>
diff --git a/src/views/process/print/canvas-bg/data/keyCode.ts b/src/views/process/print/canvas-bg/data/keyCode.ts
new file mode 100644
index 0000000..a8ee423
--- /dev/null
+++ b/src/views/process/print/canvas-bg/data/keyCode.ts
@@ -0,0 +1,41 @@
+export const keyCode = {
+  space: 32,
+  backspace: 8,
+  shift: 16,
+  ctr: 17,
+  option: 18,
+  command: 91,
+  alt: 18,
+  ctrl: 17,
+  equal: 187,
+  minus: 189,
+  q: 81,
+  w: 87,
+  c: 67,
+  d: 68,
+  z: 90,
+  y: 89,
+  g: 71,
+  l: 76,
+  h: 72,
+  u: 85,
+  o: 79,
+  r: 82,
+  t: 84,
+  b: 66,
+  s: 83,
+  p: 80,
+  left: 37,
+  top: 38,
+  right: 39,
+  bottom: 40
+};
+
+// export function getCodeKey(code) {
+//   for (let k in keyCode) {
+//     if (keyCode[k] == code) {
+//       return k;
+//     }
+//   }
+//   return '';
+// }
diff --git a/src/views/process/print/canvas-bg/drawRuler.ts b/src/views/process/print/canvas-bg/drawRuler.ts
new file mode 100644
index 0000000..717b068
--- /dev/null
+++ b/src/views/process/print/canvas-bg/drawRuler.ts
@@ -0,0 +1,98 @@
+/**
+ * 画标尺刻度Canvas
+ * @param direction 方向
+ * @param canvas canvas DOM
+ * @param scale 缩放比例[20-200]
+ * @param width 长度
+ * @param height 高度
+ * @param startLen 开始距离
+ */
+export function drawRuler(
+  direction: string,
+  canvas: HTMLCanvasElement,
+  scale: number = 100,
+  width: number,
+  height: number = 24,
+  startLen: number = 60
+) {
+  const padding = 2;
+  const ctx: CanvasRenderingContext2D = canvas.getContext('2d');
+  const percent = scale * 0.01;
+  let unit = Math.ceil(10 / percent);
+  if (unit < 8) {
+    unit = 8;
+  }
+  //计算出要绘制多少个刻度
+  const scaleCount = Math.ceil(width + startLen / unit);
+  if (direction == 'top') {
+    canvas.width = width + startLen;
+    canvas.height = height;
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    //绘制起点
+    ctx.strokeStyle = 'rgb(161, 174, 179)';
+    ctx.font = '10px Arial';
+    ctx.lineWidth = 0.5;
+    ctx.moveTo(startLen, 0);
+    ctx.lineTo(startLen, height);
+    ctx.fillText('0', startLen + padding, 13);
+
+    for (let i = 1; i <= scaleCount; i++) {
+      //计算每个刻度的位置
+        const step = startLen + Math.round(i * unit * percent);
+        //10的倍数刻度大长度
+        if (i % 10 === 0) {
+          ctx.moveTo(step, 0);
+          ctx.lineTo(step, height);
+          //标注刻度值
+          const scaleText = i * unit + '';
+          ctx.fillText(scaleText, step + padding, 13);
+        } else if (i % 5 === 0) {//5的倍数刻度中长度
+          ctx.moveTo(step, 15);
+          ctx.lineTo(step, height);
+          //标注刻度值
+          const scaleText = i * unit + '';
+          ctx.fillText(scaleText, step + padding, 13);
+        } else {//其他刻度小长度
+          ctx.moveTo(step, height - 2);
+          ctx.lineTo(step, height);
+        }
+      }
+      ctx.stroke();
+  } else {
+    canvas.width = height;
+    canvas.height = width + startLen;
+    ctx.clearRect(0, 0, height, width + startLen);
+
+    ctx.beginPath();
+    //绘制起点
+    ctx.strokeStyle = 'rgb(161, 174, 179)';
+    ctx.font = '10px Arial';
+    ctx.lineWidth = 0.5;
+    ctx.moveTo(0, startLen);
+    ctx.lineTo(height, startLen);
+    ctx.fillText('0', padding, startLen - padding);
+    //计算出要绘制多少个刻度
+
+    for (let i = 1; i <= scaleCount; i++) {
+      const step = startLen + Math.round(i * unit * percent);
+      if (i % 10 === 0) {
+        ctx.moveTo(0, step);
+        ctx.lineTo(height, step);
+        //标注刻度值
+        const scaleText = unit * i + '';
+        ctx.fillText(scaleText, padding, step - padding);
+      } else if (i % 5 === 0) {
+        ctx.moveTo(15, step);
+        ctx.lineTo(height, step);
+        //标注刻度值
+        const scaleText = unit * i + '';
+        ctx.fillText(scaleText, padding, step - padding);
+      } else {
+        ctx.moveTo(height - 2, step);
+        ctx.lineTo(height, step);
+      }
+    }
+    ctx.stroke();
+  }
+}
diff --git a/src/views/process/state.vue b/src/views/process/state.vue
new file mode 100644
index 0000000..51ed1d3
--- /dev/null
+++ b/src/views/process/state.vue
@@ -0,0 +1,14 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2025-03-24 09:42:31
+@ 备注: 
+-->
+<script lang="ts" setup>
+import CanvasBg from "@/views/process/canvas-bg/CanvasBg.vue";
+</script>
+<template>
+  <div>
+    <CanvasBg />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/views/process/state2.vue b/src/views/process/state2.vue
new file mode 100644
index 0000000..185d73d
--- /dev/null
+++ b/src/views/process/state2.vue
@@ -0,0 +1,30 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2025-03-22 11:05:01
+@ 备注: 
+-->
+<script lang="ts" setup>
+import { Vue3RulerTool } from "vue3-ruler-tool";
+import "vue3-ruler-tool/dist/style.css";
+const presetLine = ref([
+  { type: "h", site: 20 },
+  { type: "v", site: 10 },
+]);
+const visible = ref(true);
+const input = (list: any) => {
+  presetLine.value = list;
+};
+</script>
+<template>
+  <vue3-ruler-tool
+    :value="presetLine"
+    :step-length="50"
+    :parent="true"
+    :is-scale-revise="true"
+    :visible.sync="visible"
+    @input="input"
+  >
+    <div>我是内容</div>
+  </vue3-ruler-tool>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageConfig.ts b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageConfig.ts
new file mode 100644
index 0000000..059e816
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageConfig.ts
@@ -0,0 +1,39 @@
+export default {
+    paperOrientationList:[
+        {
+            value:1,
+            label:"纵向"
+        },
+        {
+            value:2,
+            label:"横向"
+        },
+    ],
+    // 纸张类型
+    paperTypes: {
+        'A3': {
+          width: 420,
+          height: 296.6
+        },
+        'A4': {
+          width: 210,
+          height: 296.6
+        },
+        'A5': {
+          width: 210,
+          height: 147.6
+        },
+        'B3': {
+          width: 500,
+          height: 352.6
+        },
+        'B4': {
+          width: 250,
+          height: 352.6
+        },
+        'B5': {
+          width: 250,
+          height: 175.6
+        }
+      },
+}
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
index f4fc84b..1279688 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
@@ -5,7 +5,8 @@
 -->
 <script lang="ts" setup>
 import { ElTable } from "element-plus";
-import { Hide, View } from "@element-plus/icons-vue";
+import { Hide, View, Calendar, Search } from "@element-plus/icons-vue";
+
 import {
   attrButton,
   tableButton,
@@ -33,6 +34,11 @@ import { formTableField, formTabelStruct } from "@/api/DesignForm/type";
 
 import tempOtherUnit from "@/components/DesignForm/pageList/types";
 import { ElMessage } from "element-plus";
+import { sendTableFields, sendCustFields } from "@/api/displayboardapi/types";
+import {
+  gainOrgOfPeopleNodeFactor,
+  gainOegAndPeople,
+} from "@/api/displayboardapi/indexapi";
 
 import Sortable from "sortablejs";
 //引入子组件
@@ -220,6 +226,15 @@ const state = reactive({
       },
     },
   },
+  sendMsg: {
+    open: false, //是否开启发送消息
+    type: "textcard", //消息类型
+    title: [], //标题对应的表字段
+    content: [], //描述对应的表字段
+    icon: "", //图片对应的表字段
+    sendRange: 2, //发送范围
+    sendRangeList: [], //发送范围辅助信息
+  },
 });
 /**
 @ 作者: 秦东
@@ -368,6 +383,14 @@ const getListInfo = () => {
       console.log("获取列表内容---->", stateData);
       state.tableData = stateData.tableData;
       state.searchData = stateData.searchData;
+      if (stateData.sendMsg) {
+        state.sendMsg = stateData.sendMsg;
+
+        if (state.sendMsg.sendRange != 0) {
+          oldPickSendRange.value = state.sendMsg.sendRange;
+        }
+      }
+
       if (state.searchData == null) {
         state.searchData = new Array();
       }
@@ -866,6 +889,7 @@ const dialogOpen = (obj: any, params: any = {}) => {
   drawer.visible = true;
   Object.assign(drawer, { direction: "ltr" }, params);
   let editData = objToStringify(obj, true);
+  console.log("数据格式处理------------------------>", params);
   switch (params.type) {
     case "dict":
       editData = json2string(obj, true);
@@ -1087,8 +1111,473 @@ const addListField = (
   // }
   // console.log("state.tableData.columns", state.tableData);
 };
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-25 15:27:52
+@ 功能: 选择发送范围
+*/
+const tableFieldsList = ref<sendTableFields[]>();
+const oldPickSendRange = ref<number>(2);
+const pickTableIsOpen = ref(false); //指定表格
+const sendTableLoading = ref(false);
+const pickCustomizeIsOpen = ref(false); //自定义发送范围
+const sendCustLoading = ref(false);
+const pickSendRange = (val: number) => {
+  console.log("pickSendRange", val);
+  switch (val) {
+    case 5: //指定表格中的字段
+      getOrgPeople();
+      pickTableIsOpen.value = true;
+
+      break;
+    case 6: //自定义发送范围
+      gainPeopleAndOrg();
+      pickCustomizeIsOpen.value = true;
+      break;
+    default:
+      oldPickSendRange.value = val;
+  }
+};
+const tableFields = reactive({
+  list: [],
+});
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-26 09:03:12
+@ 功能: 获取要发送得行政组织字段
+*/
+const getOrgPeople = () => {
+  gainOrgOfPeopleNodeFactor({ id: state.formId })
+    .then((data) => {
+      tableFieldsList.value = data.data;
+      console.log("选表格中指定发送范围数据", data);
+      if (state.sendMsg.sendRangeList.length > 0) {
+        tableFields.list = [];
+        state.sendMsg.sendRangeList.forEach((item: sendTableFields) => {
+          if (item.types != "people" && item.types != "masterOrg") {
+            tableFields.list.push(item.id);
+          }
+        });
+      }
+    })
+    .finally(() => {
+      sendTableLoading.value = false;
+    });
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-25 15:55:48
+@ 功能: 关闭表格发送范围
+*/
+const handleTableClose = () => {
+  pickTableIsOpen.value = false;
+  state.sendMsg.sendRangeList = [];
+  sendTableLoading.value = false;
+  state.sendMsg.sendRange = oldPickSendRange.value;
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-25 16:00:08
+@ 功能: 选表格中指定发送范围数据
+*/
+const pickTableSendRange = () => {
+  // sendTableLoading.value = true;
+  console.log("选表格中指定发送范围数据", tableFields.list);
+  if (
+    tableFields.list &&
+    tableFields.list.length > 0 &&
+    tableFieldsList.value.length > 0
+  ) {
+    state.sendMsg.sendRangeList = [];
+    tableFields.list.forEach((item: string) => {
+      tableFieldsList.value.forEach((vit: sendTableFields) => {
+        if (vit.id == item) {
+          state.sendMsg.sendRangeList.push(vit);
+        }
+      });
+    });
+    if (state.sendMsg.sendRangeList.length > 0) {
+      sendTableLoading.value = false;
+      pickTableIsOpen.value = false;
+      oldPickSendRange.value = state.sendMsg.sendRange;
+    } else {
+      handleTableClose();
+    }
+  } else {
+    handleTableClose();
+  }
+  console.log("选表----------->", state);
+};
+
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-26 11:08:42
+@ 功能: 关闭自定义发送范围
+*/
+const handleCustClose = () => {
+  pickCustomizeIsOpen.value = false;
+  state.sendMsg.sendRange = oldPickSendRange.value;
+  delAllPick();
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-27 08:42:51
+@ 功能: 获取自定义人员与行政组织穿梭框
+*/
+const orgManLoading = ref(false);
+const orgManList = ref<sendCustFields[]>([]);
+const orgAndPeopleBrea = ref<sendCustFields[]>([]);
+const PickOrgManList = ref<sendCustFields[]>([]);
+const gainPeopleAndOrg = (orgId?: string) => {
+  orgManLoading.value = true;
+  gainOegAndPeople({ id: orgId })
+    .then((data) => {
+      console.log("获取自定义人员与行政组织穿梭框----------->", data);
+      orgAndPeopleBrea.value = data.data.breadcrumb;
+      orgManList.value = data.data.orgManList;
+      nextTick(() => {
+        if (PickOrgManList.value.length <= 0) {
+          PickOrgManList.value = [];
+          console.log(
+            "获取自定义人员与行政组织穿梭框----------->",
+            state.sendMsg.sendRangeList
+          );
+          state.sendMsg.sendRangeList.forEach((item: sendTableFields) => {
+            console.log("获取自定义人员与行政组织穿梭框----------->", item.types);
+            if (item.types == "people" || item.types == "masterOrg") {
+              orgManList.value.forEach((itemOrg: sendCustFields) => {
+                if (item.id == itemOrg.id && item.types == itemOrg.types) {
+                  itemOrg.isPick = true;
+                  // PickOrgManList.value.push(itemOrg);
+                }
+              });
+              PickOrgManList.value.push(item);
+            }
+          });
+        } else {
+          if (PickOrgManList.value.length > 0) {
+            PickOrgManList.value.forEach((item: sendCustFields) => {
+              orgManList.value.forEach((itemOrg: sendCustFields) => {
+                if (
+                  item.id == itemOrg.id &&
+                  item.number == itemOrg.number &&
+                  item.types == itemOrg.types
+                ) {
+                  itemOrg.isPick = true;
+                }
+              });
+            });
+          }
+        }
+
+        console.log(
+          "获取自定义人员与行政组织穿梭框---------11111->",
+          PickOrgManList.value
+        );
+      });
+    })
+    .finally(() => {
+      orgManLoading.value = false;
+    });
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-26 11:37:21
+@ 功能: 提交自定义数据
+*/
+const pickCustSendRange = () => {
+  sendCustLoading.value = true;
+
+  if (PickOrgManList.value && PickOrgManList.value.length > 0) {
+    state.sendMsg.sendRangeList = [];
+    PickOrgManList.value.forEach((item: string) => {
+      state.sendMsg.sendRangeList.push(item);
+      // if (item.types == "masterOrg") {
+      //   state.sendMsg.sendRangeList.push({
+      //     lable: item.name,
+      //     fields: item.id,
+      //     types: item.types,
+      //     multipleChoice: true,
+      //   });
+      // } else {
+      //   state.sendMsg.sendRangeList.push({
+      //     lable: item.name,
+      //     fields: item.id,
+      //     types: item.types,
+      //     multipleChoice: false,
+      //   });
+      // }
+    });
+    if (state.sendMsg.sendRangeList.length > 0) {
+      sendCustLoading.value = false;
+      oldPickSendRange.value = state.sendMsg.sendRange;
+      handleCustClose();
+    } else {
+      handleCustClose();
+    }
+  } else {
+    handleCustClose();
+  }
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-27 09:15:59
+@ 功能: 选择人员或行政组织
+*/
+const pickOrgOrMan = (info: sendCustFields) => {
+  if (info.isPick) {
+    //已被选择的要去除选择
+    info.isPick = false;
+    if (PickOrgManList.value.length > 0) {
+      PickOrgManList.value.forEach((item: sendCustFields, index: number) => {
+        if (
+          item.id == info.id &&
+          item.number == info.number &&
+          item.types == info.types
+        ) {
+          PickOrgManList.value.splice(index, 1);
+        }
+      });
+    }
+  } else {
+    //未被选择的要加上选择
+    info.isPick = true;
+    if (PickOrgManList.value.length > 0) {
+      let isWrite = true;
+      PickOrgManList.value.forEach((item: sendCustFields) => {
+        if (
+          item.id == info.id &&
+          item.number == info.number &&
+          item.types == info.types
+        ) {
+          isWrite = false;
+        }
+      });
+      if (isWrite) {
+        PickOrgManList.value.push(info);
+      }
+    } else {
+      PickOrgManList.value.push(info);
+    }
+  }
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-27 09:54:56
+@ 功能: 删除已选择的信息
+*/
+const delPick = (info: sendCustFields) => {
+  if (PickOrgManList.value.length > 0) {
+    PickOrgManList.value.forEach((item: sendCustFields, index: number) => {
+      if (item.id == info.id && item.number == info.number && item.types == info.types) {
+        PickOrgManList.value.splice(index, 1);
+      }
+    });
+  }
+
+  if (orgManList.value.length > 0) {
+    orgManList.value.forEach((itemOrg: sendCustFields) => {
+      if (
+        info.id == itemOrg.id &&
+        info.number == itemOrg.number &&
+        info.types == itemOrg.types
+      ) {
+        itemOrg.isPick = false;
+      }
+    });
+  }
+};
+/**
+@ 作者: 秦东
+@ 时间: 2025-03-27 10:09:23
+@ 功能: 删除所有选择
+*/
+const delAllPick = () => {
+  if (PickOrgManList.value.length > 0) {
+    PickOrgManList.value.splice(0, PickOrgManList.value.length);
+  }
+  if (orgManList.value.length > 0) {
+    orgManList.value.forEach((itemOrg: sendCustFields) => {
+      itemOrg.isPick = false;
+    });
+  }
+  // if (peopleList.value.length > 0) {
+  //   peopleList.value.forEach((itemMan: sendCustFields) => {
+  //     itemMan.isPick = false;
+  //   });
+  // }
+};
 </script>
 <template>
+  <!--自定义发送范围-->
+  <el-dialog
+    v-model="pickCustomizeIsOpen"
+    title="自定义发送范围"
+    width="600"
+    :before-close="handleCustClose"
+    draggable
+  >
+    <div class="custBox">
+      <el-row>
+        <el-col :span="12" class="rightLine">
+          <div class="leftSearch">
+            <el-input
+              v-model="input2"
+              style="width: 100%"
+              placeholder="搜查成员"
+              :prefix-icon="Search"
+            />
+          </div>
+          <div class="leftButBox fenpi">
+            <div style="padding: 5px 0">
+              <el-button type="primary" text size="small" @click="gainPeopleAndOrg()"
+                >全部</el-button
+              >
+            </div>
+            <el-scrollbar wrap-style="padding: 5px 0">
+              <div class="scrollbar-flex-content">
+                <el-button
+                  v-for="item in orgAndPeopleBrea"
+                  type="primary"
+                  text
+                  size="small"
+                  @click="gainPeopleAndOrg(item.id)"
+                  >{{ item.name }}</el-button
+                >
+              </div>
+            </el-scrollbar>
+          </div>
+          <el-scrollbar height="400px" v-loading="orgManLoading">
+            <div v-for="item in orgManList">
+              <div
+                v-if="item.types == 'masterOrg'"
+                :class="
+                  item.isPick ? 'scrollbar-demo-item active' : 'scrollbar-demo-item'
+                "
+              >
+                <div class="usBox" @click="pickOrgOrMan(item)">
+                  <span class="iconSpan fa fa-folder-o"></span>
+                  <el-text>{{ item.name }}</el-text>
+                </div>
+                <div @click="gainPeopleAndOrg(item.id)" style="cursor: pointer">下级</div>
+              </div>
+
+              <div
+                v-else
+                :class="
+                  item.isPick ? 'scrollbar-demo-item active' : 'scrollbar-demo-item'
+                "
+              >
+                <div class="usBox" @click="pickOrgOrMan(item)">
+                  <el-image
+                    v-if="item.icon != ''"
+                    style="width: 30px; height: 30px"
+                    :src="item.icon"
+                    fit="fit"
+                  />
+                  <span v-else class="iconSpan fa fa-user-o"></span>
+                  <div class="usInfo">
+                    <el-text>{{ item.name }}</el-text
+                    ><el-text type="info">（No：{{ item.number }}）</el-text>
+                  </div>
+                </div>
+                <div></div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-col>
+        <el-col :span="12">
+          <div class="leftSearch pickTitle">
+            <el-text class="mx-1">已选择（{{ PickOrgManList.length }}）</el-text>
+            <el-text
+              class="mx-1"
+              type="danger"
+              style="cursor: pointer"
+              @click="delAllPick"
+              >清空</el-text
+            >
+          </div>
+          <el-scrollbar height="435px">
+            <div v-for="item in PickOrgManList">
+              <div v-if="item.types == 'masterOrg'" class="scrollbar-demo-item active">
+                <div class="usBoxac">
+                  <span class="iconSpan fa fa-folder-o"></span>
+                  <el-text>{{ item.name }}</el-text>
+                </div>
+                <div>
+                  <i class="fa fa-close" @click="delPick(item)"></i>
+                </div>
+              </div>
+
+              <div v-else class="scrollbar-demo-item active">
+                <div class="usBoxac">
+                  <el-image
+                    v-if="item.icon != ''"
+                    style="width: 30px; height: 30px"
+                    :src="item.icon"
+                    fit="fit"
+                  />
+                  <span v-else class="iconSpan fa fa-user-o"></span>
+                  <div class="usInfo">
+                    <el-text>{{ item.name }}</el-text
+                    ><el-text type="info">（No：{{ item.number }}）</el-text>
+                  </div>
+                </div>
+                <div><i class="fa fa-close" @click="delPick(item)"></i></div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-col>
+      </el-row>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCustClose">取消选择</el-button>
+        <el-button type="primary" @click="pickCustSendRange" v-loading="sendCustLoading">
+          确定选择
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!--表格中的数据-->
+  <el-dialog
+    v-model="pickTableIsOpen"
+    title="从现有表单中选择发送范围字段"
+    width="500"
+    :before-close="handleTableClose"
+    draggable
+  >
+    <el-form :model="tableFields" label-width="auto">
+      <el-form-item label="表格字段">
+        <el-select
+          v-model="tableFields.list"
+          placeholder="请选择表格字段"
+          clearable
+          multiple
+        >
+          <el-option
+            v-for="item in tableFieldsList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleTableClose">取消选择</el-button>
+        <el-button
+          type="primary"
+          @click="pickTableSendRange"
+          v-loading="sendTableLoading"
+        >
+          确定选择
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
   <el-main class="mainBox">
     <div class="header">
       <div class="field"></div>
@@ -1353,6 +1842,7 @@ const addListField = (
       :title="drawer.title"
       :direction="drawer.direction"
       :content="drawer.content"
+      :data="drawer"
       :code-type="drawer.codeType"
       @before-close="drawerBeforeClose"
       @confirm="dialogConfirm"
@@ -1377,7 +1867,7 @@ const addListField = (
         :search-data="state.searchData"
         :config="state.config"
         :form-id="props.appPageKey"
-        :viewPage="stateList.view"
+        :viewPage="state.view"
         v-if="state.previewVisible"
       />
     </el-drawer>
@@ -1496,6 +1986,98 @@ const addListField = (
         </div>
       </el-tab-pane>
       <el-tab-pane label="列表设置" :name="2">
+        <el-divider content-position="left">企业微信消息推送</el-divider>
+        <div class="demo_collapse">
+          <el-form
+            label-position="top"
+            label-width="auto"
+            :model="state.sendMsg"
+            style="max-width: 600px"
+          >
+            <el-form-item label="是否开启推送信息">
+              <el-switch
+                v-model="state.sendMsg.open"
+                class="ml-2"
+                inline-prompt
+                active-text="是"
+                inactive-text="否"
+                style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949"
+              />
+            </el-form-item>
+            <el-form-item v-if="state.sendMsg.open" label="消息类型">
+              <el-radio-group v-model="state.sendMsg.type" size="small">
+                <el-radio-button value="textcard">文本卡片</el-radio-button>
+                <el-radio-button v-if="!isCardTrue" value="news"
+                  >图文消息</el-radio-button
+                >
+                <el-radio-button value="text">文本消息</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              v-if="state.sendMsg.open && state.sendMsg.type != 'text'"
+              label="发送消息标题字段"
+            >
+              <el-select
+                v-model="state.sendMsg.title"
+                multiple
+                placeholder="请选择消息标题字段"
+                clearable
+              >
+                <el-option
+                  v-for="item in allKeyWords"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="state.sendMsg.open" label="发送消息主体字段" clearable>
+              <el-select
+                v-model="state.sendMsg.content"
+                multiple
+                placeholder="请选择消息主体字段"
+              >
+                <el-option
+                  v-for="item in allKeyWords"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="state.sendMsg.open && !isCardTrue && state.sendMsg.type == 'news'"
+              label="图片字段"
+            >
+              <el-select
+                v-model="state.sendMsg.icon"
+                placeholder="请选择图片字段"
+                clearable
+              >
+                <el-option
+                  v-for="item in cardKeyWords"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="state.sendMsg.open" label="发送范围">
+              <el-radio-group
+                v-model="state.sendMsg.sendRange"
+                size="small"
+                @change="pickSendRange"
+              >
+                <el-radio-button :value="1">全集团</el-radio-button>
+                <el-radio-button :value="2">本公司</el-radio-button>
+                <el-radio-button :value="3">本部门</el-radio-button>
+                <el-radio-button :value="4">本行政组织</el-radio-button>
+                <el-radio-button :value="5">表格中指定</el-radio-button>
+                <el-radio-button :value="6">自定义</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </div>
         <el-divider content-position="left">开启视图</el-divider>
         <div class="demo_collapse">
           <el-collapse v-value="activeName" @change="handleChange">
@@ -2284,4 +2866,80 @@ const addListField = (
     color: #337ecc;
   }
 }
+.custBox {
+  border: 1px solid #c4c4c4;
+  height: 470px;
+  overflow: hidden;
+  .rightLine {
+    height: 470px;
+    border-right: 1px solid #c4c4c4;
+  }
+  .leftSearch {
+    border-bottom: 1px solid #c4c4c4;
+    padding: 2px 5px;
+  }
+  .pickTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 37px;
+  }
+  .leftButBox {
+    border-bottom: 1px solid #c4c4c4;
+    padding: 0px 5px;
+  }
+  .fenpi {
+    display: flex;
+  }
+}
+.scrollbar-flex-content {
+  display: flex;
+  width: fit-content;
+}
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  margin: 5px;
+  text-align: left;
+  border-radius: 4px;
+  background: rgb(221.7, 222.6, 224.4);
+  color: #303133;
+  padding: 0 5px;
+  .usBox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    span {
+      overflow: hidden; /* 隐藏溢出内容 :ml-search[overflow] */
+    }
+    .iconSpan {
+      font-size: 25px;
+      margin-right: 10px;
+    }
+  }
+  .usBoxac {
+    display: flex;
+    align-items: center;
+    span {
+      overflow: hidden; /* 隐藏溢出内容 :ml-search[overflow] */
+    }
+    .iconSpan {
+      font-size: 25px;
+      margin-right: 10px;
+    }
+  }
+  .usInfo {
+    margin-left: 4px;
+  }
+}
+.scrollbar-demo-item.active {
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  i {
+    color: #f56c6c;
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage.vue
new file mode 100644
index 0000000..8d98602
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage.vue
@@ -0,0 +1,136 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2025-03-24 15:32:40
+@ 备注: 打印模版设计
+-->
+<script lang="ts" setup>
+import PageConfig from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageConfig";
+import { printPageConfigStore } from "@/store/ruler/index";
+
+import CanvasBg from "@/views/process/canvas-bg/CanvasBg.vue";
+
+const props = defineProps({
+  appCont: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  formKey: {
+    type: String,
+    default: "",
+  },
+  groupKey: {
+    type: String,
+    default: "",
+  },
+  menuId: {
+    type: String,
+    default: "",
+  },
+  appPageKey: {
+    type: String,
+    default: "",
+  },
+  formVersion: {
+    type: String,
+    default: "",
+  },
+  state: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+
+const paperOrientation = ref<number>(1);
+const pageSize = ref<number>(2);
+</script>
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside class="asideBox">
+        <div class="titleBox">打印数据源</div>
+      </el-aside>
+      <el-container class="contBox">
+        <el-header>
+          <div class="titleBox">
+            <el-row :gutter="5" class="rowBox">
+              <el-col :span="4">
+                <el-select
+                  v-model="paperOrientation"
+                  placeholder="请选择纸张方向"
+                  size="small"
+                >
+                  <el-option
+                    v-for="item in PageConfig.paperOrientationList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="12">
+                <el-radio-group v-model="pageSize" size="small">
+                  <el-radio-button label="A3" value="A3" />
+                  <el-radio-button label="A4" value="A4" />
+                  <el-radio-button label="A5" value="A5" />
+                  <el-radio-button label="B3" value="B3" />
+                  <el-radio-button label="B4" value="B4" />
+                  <el-radio-button label="B5" value="B5" />
+                  <el-radio-button label="自定义" value="zdy" />
+                </el-radio-group>
+              </el-col>
+              <el-col :span="6">
+                <el-button-group class="ml-4" size="small">
+                  <el-button type="primary">预览</el-button>
+                  <el-button type="danger">清空</el-button>
+                  <el-button type="primary">保存</el-button>
+                </el-button-group>
+              </el-col>
+            </el-row>
+          </div>
+        </el-header>
+        <el-main>
+          <CanvasBg />
+        </el-main>
+      </el-container>
+      <el-aside class="asideBox">
+        <div class="titleBox">模块设置</div>
+      </el-aside>
+    </el-container>
+  </div>
+</template>
+<style lang="scss" scoped>
+.common-layout {
+  width: 100%;
+  height: calc(100vh - 40px);
+  :deep .el-header {
+    padding: 0px;
+  }
+  :deep .el-main {
+    padding: 0px;
+  }
+  .asideBox {
+    width: 220px;
+    height: calc(100vh - 40px);
+  }
+  .contBox {
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+  }
+  .titleBox {
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+  }
+  .rowBox {
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
index e558793..1021d4e 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
@@ -12,6 +12,8 @@ import { getProductionMarkForm } from "@/api/DesignForm/requestapi";
 import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue";
 import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue";
 import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue";
+import PrintSetupPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/printSetupPage.vue";
+
 const props = defineProps({
   appCont: {
     type: Object,
@@ -218,6 +220,7 @@ onBeforeMount(() => {
               <el-tab-pane label="① 页面管理" :name="1"> </el-tab-pane>
               <el-tab-pane label="② 流程设计" :name="2"> </el-tab-pane>
               <el-tab-pane label="③ 列表设计" :name="3"> </el-tab-pane>
+              <el-tab-pane label="④ 打印设计" :name="4"> </el-tab-pane>
             </el-tabs>
           </div>
           <div class="headRight">
@@ -259,6 +262,16 @@ onBeforeMount(() => {
             v-model:app-page-key="appPageKey"
             v-model:form-version="formVersion"
           />
+          <PrintSetupPage
+            v-if="tabsActive == 4"
+            v-model:state="state"
+            :form-Key="props.formKey"
+            :app-cont="props.appCont"
+            :menu-id="menuId"
+            :group-key="props.groupKey"
+            v-model:app-page-key="appPageKey"
+            v-model:form-version="formVersion"
+          />
         </el-container>
       </el-container>
     </div>
diff --git a/src/views/sysworkflow/lowcodepage/pageList.vue b/src/views/sysworkflow/lowcodepage/pageList.vue
index b6ec4c4..90c7925 100644
--- a/src/views/sysworkflow/lowcodepage/pageList.vue
+++ b/src/views/sysworkflow/lowcodepage/pageList.vue
@@ -3,652 +3,664 @@
 @ 时间: 2024-03-18 11:32:14
 @ 备注: 自定义表单列表
 -->
-<script lang='ts' setup>
-import { ElTable } from 'element-plus'
-import { Hide, View } from '@element-plus/icons-vue'
-import { attrButton,tableButton,tableButtonList,tableLogButtonList,tableAttrLogButtonList,diaOrDrawer } from '@/api/DesignForm/tableButton'
-
-import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
-import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index'
-import { gainFormTableField,editCustomerFormList,gainFormListCont,gainListTableField } from '@/api/DesignForm/requestapi'
-import { formTableField,formTabelStruct } from "@/api/DesignForm/type";
-
-import tempOtherUnit from '@/components/DesignForm/pageList/types'
-import { ElMessage } from 'element-plus'
-
-import Sortable from 'sortablejs'
+<script lang="ts" setup>
+import { ElTable } from "element-plus";
+import { Hide, View } from "@element-plus/icons-vue";
+import {
+  attrButton,
+  tableButton,
+  tableButtonList,
+  tableLogButtonList,
+  tableAttrLogButtonList,
+  diaOrDrawer,
+} from "@/api/DesignForm/tableButton";
+
+import {
+  json2string,
+  objToStringify,
+  string2json,
+  stringToObj,
+} from "@/utils/DesignForm/form";
+import { analysisForm, setFlowFormKeyPower } from "@/api/workflowapi/index";
+import {
+  gainFormTableField,
+  editCustomerFormList,
+  gainFormListCont,
+  gainListTableField,
+} from "@/api/DesignForm/requestapi";
+import { formTableField, formTabelStruct } from "@/api/DesignForm/type";
+
+import tempOtherUnit from "@/components/DesignForm/pageList/types";
+import { ElMessage } from "element-plus";
+
+import Sortable from "sortablejs";
 //引入子组件
-import PageListHeadTools from '@/views/sysworkflow/lowcodepage/pageListHeadTools.vue'
-import ControlSetup  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue'
-import FieldSetUp  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/fieldSetUp.vue'
-import SearchField  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue'
-import PreviewPage  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue'
-import CodePage  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue'
-
+import PageListHeadTools from "@/views/sysworkflow/lowcodepage/pageListHeadTools.vue";
+import ControlSetup from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue";
+import FieldSetUp from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/fieldSetUp.vue";
+import SearchField from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue";
+import PreviewPage from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue";
+import CodePage from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue";
 
 const props = defineProps({
-	formKey:{
-		type:String,
-		default:""
-	},
-	formVersion:{
-		type:String,
-		default:""
-	},
-	tabsActive:{
-		type:Number,
-		default:1
-	},
-	state:{
-		type:Object,
-		default(){
-			return {}
-		}
-	}
+  formKey: {
+    type: String,
+    default: "",
+  },
+  formVersion: {
+    type: String,
+    default: "",
+  },
+  tabsActive: {
+    type: Number,
+    default: 1,
+  },
+  state: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
 });
 
 const emits = defineEmits<{
-    (e: 'update:state', val: formStruct): void
-	(e: 'update:formKey', val: string): void
-	(e: 'update:formVersion', val: string): void
-	(e: 'judgeFlowIsEdit', val: boolean): void
-	(e: 'runNextWindows', val: number): void
-	(e: 'closeFormPage'): void
-}>()
-
-const statePro =  computed({
-	get() {
-		return props.state
-	},
-	set(val: formStruct) {
-		emits('update:state', val)
-	}
+  (e: "update:state", val: formStruct): void;
+  (e: "update:formKey", val: string): void;
+  (e: "update:formVersion", val: string): void;
+  (e: "judgeFlowIsEdit", val: boolean): void;
+  (e: "runNextWindows", val: number): void;
+  (e: "closeFormPage"): void;
+}>();
+
+const statePro = computed({
+  get() {
+    return props.state;
+  },
+  set(val: formStruct) {
+    emits("update:state", val);
+  },
 });
 
-const formTableActive = ref(1)
-const pageLoading = ref(false)
+const formTableActive = ref(1);
+const pageLoading = ref(false);
 //自定义列表结构
 const state = reactive({
-    tableData: {
-      // tableProps: {}, //表格所有参数
-      columns: [],
-      config: {},
-	  controlBtn:[],
-	  operateBtn:[]
+  tableData: {
+    // tableProps: {}, //表格所有参数
+    columns: [],
+    config: {},
+    controlBtn: [],
+    operateBtn: [],
+  },
+  searchData: [],
+  loading: false,
+  attrObj: {},
+  config: {
+    pageSize: 10,
+    searchIsShow: true,
+    searchFormIsShow: true,
+    openPageMode: "drawer",
+  },
+  tagList: {},
+  formId: props.formKey.toString() || "",
+  formList: [], // 所有可选表单数据源
+  name: "",
+  treeData: {}, // 左侧树相关
+  previewVisible: false,
+  tabsName: "second",
+  formFieldList: [], // 表单数据源所有可选字段
+  formApi: {
+    type: "1",
+    addApiUrl: "",
+    editApiUrl: "",
+    delApiUrl: "",
+    lookApiUrl: "",
+  },
+  dict: {},
+  refreshTable: true,
+  view: {
+    list: {
+      status: true,
+      isClick: false,
+      form: {
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
     },
-    searchData: [],
-    loading: false,
-    attrObj: {},
-    config: {
-		pageSize:10,
-		searchIsShow:true,
-		searchFormIsShow:true,
-		openPageMode:"drawer"
-	},
-    tagList: {},
-    formId: props.formKey.toString() || '',
-    formList: [], // 所有可选表单数据源
-    name: '',
-    treeData: {}, // 左侧树相关
-    previewVisible: false,
-    tabsName: 'second',
-    formFieldList: [], // 表单数据源所有可选字段
-	formApi:{
-		type:"1",
-		addApiUrl:"",
-		editApiUrl:"",
-		delApiUrl:"",
-		lookApiUrl:""
-	},
-    dict: {},
-    refreshTable: true,
-	view:{
-		list:{
-			status:true,
-			isClick:false,
-			form:{
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		},
-		card:{
-			status:false,
-			isClick:false,
-			form:{
-				sort:1,
-				sortWord:"",
-				imgWork:"",
-				imgWidth:50,
-				imgHeight:50,
-				imgBorderRadius:5,
-				imgPadding:2,
-				titleWork:"",
-				describe:"",
-				ranks:3,
-				title:[]
-			}
-		},
-		date:{
-			status:false,
-			isClick:false,
-			form:{
-				startTime:"",
-				endTime:"",
-				dayType:1,
-				title:[]
-			}
-		}
-		,
-		time:{
-			status:false,
-			isClick:false,
-			form:{
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		}
-		,
-		gantt:{
-			status:false,
-			isClick:false,
-			form:{
-				startTime:"",
-				endTime:"",
-				dayType:2,
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		}
-		,
-		map:{
-			status:false,
-			isClick:false,
-			form:{
-				mapWord:"",
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		}
-	}
-})
+    card: {
+      status: false,
+      isClick: false,
+      form: {
+        sort: 1,
+        sortWord: "",
+        imgWork: "",
+        imgWidth: 50,
+        imgHeight: 50,
+        imgBorderRadius: 5,
+        imgPadding: 2,
+        titleWork: "",
+        describe: "",
+        ranks: 3,
+        title: [],
+      },
+    },
+    date: {
+      status: false,
+      isClick: false,
+      form: {
+        startTime: "",
+        endTime: "",
+        dayType: 1,
+        title: [],
+      },
+    },
+    time: {
+      status: false,
+      isClick: false,
+      form: {
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
+    },
+    gantt: {
+      status: false,
+      isClick: false,
+      form: {
+        startTime: "",
+        endTime: "",
+        dayType: 2,
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
+    },
+    map: {
+      status: false,
+      isClick: false,
+      form: {
+        mapWord: "",
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
+    },
+  },
+});
 
 const kaif = (id: number, callback?: (list: any) => void) => {
-	// const content = stringToObj(props.state.formData)
-	// console.log('获取当前数据下所有字段',statePro.value.formData)
-	filterFiled(statePro.value.formData)
-	callback && callback(statePro.value.formData.list)
+  // const content = stringToObj(props.state.formData)
+  // console.log('获取当前数据下所有字段',statePro.value.formData)
+  filterFiled(statePro.value.formData);
+  callback && callback(statePro.value.formData.list);
 
-	// console.log('获取当前数据下所有字段--->',state.formFieldList)
-}
+  // console.log('获取当前数据下所有字段--->',state.formFieldList)
+};
 const filterFiled = (obj: any) => {
-    obj?.list.forEach((item: FormList) => {
-      if (item.type === 'grid' || item.type === 'tabs') {
-        item.columns.forEach((col: FormList) => {
-          filterFiled(col)
-        })
-      } else if (['card', 'div'].includes(item.type)) {
-        filterFiled(item)
-      } else if (!excludeType.includes(item.type) && item.name) {
-        state.formFieldList.push({
-          prop: item.name,
-          label: item.formItem?.label,
-          help: item.config.help || ''
-        })
-      }
-    })
-  }
+  obj?.list.forEach((item: FormList) => {
+    if (item.type === "grid" || item.type === "tabs") {
+      item.columns.forEach((col: FormList) => {
+        filterFiled(col);
+      });
+    } else if (["card", "div"].includes(item.type)) {
+      filterFiled(item);
+    } else if (!excludeType.includes(item.type) && item.name) {
+      state.formFieldList.push({
+        prop: item.name,
+        label: item.formItem?.label,
+        help: item.config.help || "",
+      });
+    }
+  });
+};
 const excludeType = [
-    'txt',
-    'title',
-    'table',
-    'component',
-    'upload',
-    'button',
-    'tinymce',
-    'inputSlot',
-    'flex'
-  ]
+  "txt",
+  "title",
+  "table",
+  "component",
+  "upload",
+  "button",
+  "tinymce",
+  "inputSlot",
+  "flex",
+];
 
 const powerUnitAry = ref<any>({
-	nodeKey:"",
-	recUnitAry:{
-		masterUnitList:[],
-		sunUnitList:[],
-		unitAllKey:[],
-		unitAllState:[]
-	}
-})
-const formTableField = reactive<formTableField>({})
+  nodeKey: "",
+  recUnitAry: {
+    masterUnitList: [],
+    sunUnitList: [],
+    unitAllKey: [],
+    unitAllState: [],
+  },
+});
+const formTableField = reactive<formTableField>({});
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-13 08:24:54
 @ 功能: 解析表单
 */
 const jieForm = () => {
-	// analysisForm({nodeKey:"begin",nodeJson:JSON.stringify(statePro.value.formData)})
-	// 	.then((data)=>{
-	// 		if(data.code == 0){
-	// 			powerUnitAry.value = data.data
-	// 		}
-	// 	})
-	if(props.formKey != ""){
-		gainFormTableField({id:props.formKey.toString()})
-			.then((data)=>{
-				// console.log('解析表单--->',data)
-				formTableField.masterTable=data.data.masterTable
-				formTableField.sunTable=data.data.sunTable
-			})
-	}
-	
-}
+  // analysisForm({nodeKey:"begin",nodeJson:JSON.stringify(statePro.value.formData)})
+  // 	.then((data)=>{
+  // 		if(data.code == 0){
+  // 			powerUnitAry.value = data.data
+  // 		}
+  // 	})
+  if (props.formKey != "") {
+    gainFormTableField({ id: props.formKey.toString() }).then((data) => {
+      // console.log('解析表单--->',data)
+      formTableField.masterTable = data.data.masterTable;
+      formTableField.sunTable = data.data.sunTable;
+    });
+  }
+};
 const handleSelectionChange = (val: User[]) => {
-	// console.log('表单选中--->',val)
-}
+  // console.log('表单选中--->',val)
+};
 // watch(()=>statePro.value,()=>{
 // 	jieForm()
 // },
 // {
 // 	deep: true
 // })
-watch(()=>props.tabsActive,(val:number)=>{
-	if(val == 3){
-		jieForm();
-		getListInfo();
-	}
-})
-onMounted(()=>{
-	jieForm();
-	nextTick(() => {
-      	columnDrop()
-		getListInfo();
-		gainFormTableKeyWord(props.formKey)
-    })
-})
+watch(
+  () => props.tabsActive,
+  (val: number) => {
+    if (val == 3) {
+      jieForm();
+      getListInfo();
+    }
+  }
+);
+onMounted(() => {
+  jieForm();
+  nextTick(() => {
+    columnDrop();
+    getListInfo();
+    gainFormTableKeyWord(props.formKey);
+  });
+});
 
-const allKeyWords = ref<any[]>([])
-const timeKeyWords = ref<any[]>([])
-const mapKeyWords = ref<any[]>([])
-const isMapTrue = ref(true)
+const allKeyWords = ref<any[]>([]);
+const timeKeyWords = ref<any[]>([]);
+const mapKeyWords = ref<any[]>([]);
+const isMapTrue = ref(true);
 /**
 @ 作者: 秦东
 @ 时间: 2024-07-06 10:44:54
 @ 功能: 获取数据表字段数据
 */
-const gainFormTableKeyWord = (val:string) => {
-	// console.log("获取数据表字段数据-----------》",val)
-	gainListTableField({id:val.toString()})
-		.then((data) =>{
-			// console.log("获取数据表字段数据",data)
-			allKeyWords.value = data.data.allKeyWords
-			timeKeyWords.value = data.data.timeKeyWords
-			mapKeyWords.value = data.data.mapKeyWords
-			isMapTrue.value = !data.data.isMap
-		})
-}
-
-
-const setUpFieldInfo = ref<tableButton>()
-const setUpFieldIsOpen= ref(false)
-
-const tableAttrBut = ref<InstanceType<typeof ElTable>>()
+const gainFormTableKeyWord = (val: string) => {
+  // console.log("获取数据表字段数据-----------》",val)
+  gainListTableField({ id: val.toString() }).then((data) => {
+    // console.log("获取数据表字段数据",data)
+    allKeyWords.value = data.data.allKeyWords;
+    timeKeyWords.value = data.data.timeKeyWords;
+    mapKeyWords.value = data.data.mapKeyWords;
+    isMapTrue.value = !data.data.isMap;
+  });
+};
+
+const setUpFieldInfo = ref<tableButton>();
+const setUpFieldIsOpen = ref(false);
+
+const tableAttrBut = ref<InstanceType<typeof ElTable>>();
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-25 11:51:46
 @ 功能: 设置字段属性
 */
-const setUpField = (val:any) =>{
-	// console.log("设置字段属性-->",val)
-	setUpFieldInfo.value = val
-	
-	setUpFieldIsOpen.value = true
+const setUpField = (val: any) => {
+  // console.log("设置字段属性-->",val)
+  setUpFieldInfo.value = val;
 
-	// console.log("设置字段属性-1->",setUpFieldIsOpen)
-}
+  setUpFieldIsOpen.value = true;
+
+  // console.log("设置字段属性-1->",setUpFieldIsOpen)
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-27 09:17:15
 @ 功能: 设置功能按钮
 */
-const listButtonIsShow = ref(false)
+const listButtonIsShow = ref(false);
 const setUpFieldBut = () => {
-	// console.log("设置字段属性-->")
-	listButtonIsShow.value = true
-}
+  // console.log("设置字段属性-->")
+  listButtonIsShow.value = true;
+};
 //功能按钮
-const tableAttrButClick = (val:tableButton[]) => {
-	if(zhuDaunIsTrue.value == true){
-		if(state.tableData.controlBtn.length > 0){
-			state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length);
-			state.tableData.controlBtn = val
-		}else{
-			state.tableData.controlBtn = val
-		}
-	}
-}
+const tableAttrButClick = (val: tableButton[]) => {
+  if (zhuDaunIsTrue.value == true) {
+    if (state.tableData.controlBtn.length > 0) {
+      state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length);
+      state.tableData.controlBtn = val;
+    } else {
+      state.tableData.controlBtn = val;
+    }
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-25 14:58:22
 @ 功能: 功能字段
 */
-const tableFieldAttrButClick = (val:tableButton[]) => {
-	if(zhuDaunIsTrue.value == true){
-		if(val.length > 0){	//判断是否有选中的字段
-			if(state.tableData.columns.length > 0){	//判断列表是否有数据
-				val.forEach((item:tableButton)=>{
-					let isTrue = true;
-					state.tableData.columns.forEach((itemTab:tableButton)=>{
-						if(item.id == itemTab.id){
-							isTrue = false;
-						}
-					});
-					if(isTrue){
-						state.tableData.columns.push(item)
-					}
-				})
-			}else{ //列表无数据,直接新增
-				val.forEach((item:tableButton)=>{
-					state.tableData.columns.push(item)
-				})
-			}
-			//此处往下是处理列表中有为选中的字段
-			let delField = []
-			tableAttrLogButtonList.forEach((item:tableButton)=>{
-				let isTrue = true;
-				val.forEach((itemVal:tableButton)=>{
-					if(item.id == itemVal.id){
-						isTrue = false
-					}
-				})
-				if(isTrue){
-					delField.push(item.id)
-				}
-			});
-			if(delField.length > 0){
-				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-					delField.forEach((item:string)=>{
-						if(item == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					})
-					
-				});
-			}
-		}else{ //无选中的字段
-			if(state.tableData.columns.length > 0){
-				tableAttrLogButtonList.forEach((item:tableButton)=>{
-					state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-						if(item.id == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					});
-				});
-			}
-		}
-		if(state.tableData.columns.length > 0){
-			let isOpent = true;
-			state.tableData.columns.forEach((itemTab:tableButton)=>{
-				if(itemTab.fieldClass == "__control"){
-					isOpent = false;
-				}
-			});
-			if(isOpent){
-				state.tableData.operateBtn = [];
-			}
-		}else{
-			state.tableData.operateBtn = [];
-		}
-	}
-}
+const tableFieldAttrButClick = (val: tableButton[]) => {
+  if (zhuDaunIsTrue.value == true) {
+    if (val.length > 0) {
+      //判断是否有选中的字段
+      if (state.tableData.columns.length > 0) {
+        //判断列表是否有数据
+        val.forEach((item: tableButton) => {
+          let isTrue = true;
+          state.tableData.columns.forEach((itemTab: tableButton) => {
+            if (item.id == itemTab.id) {
+              isTrue = false;
+            }
+          });
+          if (isTrue) {
+            state.tableData.columns.push(item);
+          }
+        });
+      } else {
+        //列表无数据,直接新增
+        val.forEach((item: tableButton) => {
+          state.tableData.columns.push(item);
+        });
+      }
+      //此处往下是处理列表中有为选中的字段
+      let delField = [];
+      tableAttrLogButtonList.forEach((item: tableButton) => {
+        let isTrue = true;
+        val.forEach((itemVal: tableButton) => {
+          if (item.id == itemVal.id) {
+            isTrue = false;
+          }
+        });
+        if (isTrue) {
+          delField.push(item.id);
+        }
+      });
+      if (delField.length > 0) {
+        state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+          delField.forEach((item: string) => {
+            if (item == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    } else {
+      //无选中的字段
+      if (state.tableData.columns.length > 0) {
+        tableAttrLogButtonList.forEach((item: tableButton) => {
+          state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+            if (item.id == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    }
+    if (state.tableData.columns.length > 0) {
+      let isOpent = true;
+      state.tableData.columns.forEach((itemTab: tableButton) => {
+        if (itemTab.fieldClass == "__control") {
+          isOpent = false;
+        }
+      });
+      if (isOpent) {
+        state.tableData.operateBtn = [];
+      }
+    } else {
+      state.tableData.operateBtn = [];
+    }
+  }
+};
 const zhuDaunIsTrue = ref(false);
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-25 16:36:38
 @ 功能: 列表字段处理
 */
-const tableListFieldClick = (val:any[]) => {
-	// console.log("列表字段处理-->",val)
-	// zhuDaunIsTrue.value = true
-	if(zhuDaunIsTrue.value == true){
-		if(val.length > 0){
-			if(state.tableData.columns.length > 0){	//判断列表是否有数据
-				val.forEach((item:tableButton)=>{
-					let isTrue = true;
-					state.tableData.columns.forEach((itemTab:tableButton)=>{
-						if(item.id == itemTab.id){
-							// console.log("列表字段处理-111->",val)
-							isTrue = false;
-						}
-					});
-					if(isTrue){
-						state.tableData.columns.push(item)
-					}
-				})
-			}else{ //列表无数据,直接新增
-				val.forEach((item:any)=>{
-					state.tableData.columns.push(item)
-				})
-			}
-			//此处往下是处理列表中有为选中的字段
-			let delField = []
-			formTableField.masterTable.forEach((item:tableButton)=>{
-				let isTrue = true;
-				val.forEach((itemVal:tableButton)=>{
-					if(item.id == itemVal.id){
-						isTrue = false
-					}
-				})
-				if(isTrue){
-					delField.push(item.id)
-				}
-			});
-			if(delField.length > 0){
-				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-					delField.forEach((item:string)=>{
-						if(item == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					})
-					
-				});
-			}
-		}else{
-			if(state.tableData.columns.length > 0){
-				formTableField.masterTable.forEach((item:tableButton)=>{
-					state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-						if(item.id == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					});
-				});
-			}
-		}
-	}
-	console.log("state.tableData.columns",state.tableData.columns)
-}
+const tableListFieldClick = (val: any[]) => {
+  // console.log("列表字段处理-->",val)
+  // zhuDaunIsTrue.value = true
+  if (zhuDaunIsTrue.value == true) {
+    if (val.length > 0) {
+      if (state.tableData.columns.length > 0) {
+        //判断列表是否有数据
+        val.forEach((item: tableButton) => {
+          let isTrue = true;
+          state.tableData.columns.forEach((itemTab: tableButton) => {
+            if (item.id == itemTab.id) {
+              // console.log("列表字段处理-111->",val)
+              isTrue = false;
+            }
+          });
+          if (isTrue) {
+            state.tableData.columns.push(item);
+          }
+        });
+      } else {
+        //列表无数据,直接新增
+        val.forEach((item: any) => {
+          state.tableData.columns.push(item);
+        });
+      }
+      //此处往下是处理列表中有为选中的字段
+      let delField = [];
+      formTableField.masterTable.forEach((item: tableButton) => {
+        let isTrue = true;
+        val.forEach((itemVal: tableButton) => {
+          if (item.id == itemVal.id) {
+            isTrue = false;
+          }
+        });
+        if (isTrue) {
+          delField.push(item.id);
+        }
+      });
+      if (delField.length > 0) {
+        state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+          delField.forEach((item: string) => {
+            if (item == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    } else {
+      if (state.tableData.columns.length > 0) {
+        formTableField.masterTable.forEach((item: tableButton) => {
+          state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+            if (item.id == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    }
+  }
+  console.log("state.tableData.columns", state.tableData.columns);
+};
 
-const container = ref()
+const container = ref();
 //拖动字段排序
 const columnDrop = () => {
-    const wrapperTr = container.value.querySelector(
-      	'.el-table__header-wrapper tr'
-    )
-	// console.log("wrapperTr",wrapperTr)
-    Sortable.create(wrapperTr, {
-		animation: 180,
-		delay: 0,
-		onEnd: (evt: any) => {
-			// console.log("evt",evt.oldIndex,evt.newIndex)
-			const oldItem = state.tableData.columns[evt.oldIndex]
-			state.tableData.columns.splice(evt.oldIndex, 1)
-			state.tableData.columns.splice(evt.newIndex, 0, oldItem)
-			// 重染表格，否则点下面的设置对不上了
-			state.refreshTable = false
-			nextTick(() => {
-				state.refreshTable = true
-				nextTick(() => {
-					columnDrop() // 拖完后拖不到了，再执行一下
-				})
-			})
-		}
-    })
-}
+  const wrapperTr = container.value.querySelector(".el-table__header-wrapper tr");
+  // console.log("wrapperTr",wrapperTr)
+  Sortable.create(wrapperTr, {
+    animation: 180,
+    delay: 0,
+    onEnd: (evt: any) => {
+      // console.log("evt",evt.oldIndex,evt.newIndex)
+      const oldItem = state.tableData.columns[evt.oldIndex];
+      state.tableData.columns.splice(evt.oldIndex, 1);
+      state.tableData.columns.splice(evt.newIndex, 0, oldItem);
+      // 重染表格，否则点下面的设置对不上了
+      state.refreshTable = false;
+      nextTick(() => {
+        state.refreshTable = true;
+        nextTick(() => {
+          columnDrop(); // 拖完后拖不到了，再执行一下
+        });
+      });
+    },
+  });
+};
 
-const tableFieldList = ref<InstanceType<typeof ElTable>>()
-const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>()
+const tableFieldList = ref<InstanceType<typeof ElTable>>();
+const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>();
 
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-27 08:27:22
 @ 功能: 删除表头列表字段
 */
-const delCol = (val:any) => {
-	let delInfo = []
-	let delInfoBut = []
-	if(state.tableData.columns.length > 0) {
-		
-		state.tableData.columns.forEach((item: any, index: number) => {
-			if (item.id === val.id) {
-				state.tableData.columns.splice(index, 1)
-				if(item.attribute == "-"){
-					delInfoBut.push(item)
-				}else{
-					delInfo.push(item)
-				}
-			}
-			
-		})
-		
-		// tableFieldList.value!.toggleRowSelection(delInfo, true)
-		// console.log("delInfo",delInfo)
-		// tableFieldList.value!.clearSelection()
-	}else{
-		tableFieldList.value!.clearSelection()
-		tableFieldAttrBut.value!.clearSelection()
-	}
-	if(delInfo.length > 0){
-		delInfo.forEach((item:any)=>{
-			tableFieldList.value!.toggleRowSelection(item, false)
-		})
-	}
-	if(delInfoBut.length > 0){
-		delInfoBut.forEach((item:any)=>{
-			tableFieldAttrBut.value!.toggleRowSelection(item, false)
-		})
-	}
-}
+const delCol = (val: any) => {
+  let delInfo = [];
+  let delInfoBut = [];
+  if (state.tableData.columns.length > 0) {
+    state.tableData.columns.forEach((item: any, index: number) => {
+      if (item.id === val.id) {
+        state.tableData.columns.splice(index, 1);
+        if (item.attribute == "-") {
+          delInfoBut.push(item);
+        } else {
+          delInfo.push(item);
+        }
+      }
+    });
+
+    // tableFieldList.value!.toggleRowSelection(delInfo, true)
+    // console.log("delInfo",delInfo)
+    // tableFieldList.value!.clearSelection()
+  } else {
+    tableFieldList.value!.clearSelection();
+    tableFieldAttrBut.value!.clearSelection();
+  }
+  if (delInfo.length > 0) {
+    delInfo.forEach((item: any) => {
+      tableFieldList.value!.toggleRowSelection(item, false);
+    });
+  }
+  if (delInfoBut.length > 0) {
+    delInfoBut.forEach((item: any) => {
+      tableFieldAttrBut.value!.toggleRowSelection(item, false);
+    });
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-27 10:13:34
 @ 功能: 更新列表记录操作按钮
 */
-const updataLogBut = (val:attrButton[]) => {
-	// console.log("更新列表记录操作按钮",val)
-	let isWrete = true
-	if(state.tableData.columns && state.tableData.columns.length > 0){
-		state.tableData.columns.forEach((item:any)=>{
-			if(item.fieldClass == "__control"){
-				state.tableData.operateBtn = val.value
-				isWrete = false
-			}
-		})
-	}
-	if(isWrete){
-		state.tableData.operateBtn = [];
-	}
-	// console.log("更新列表记录操作按钮------1------->",state.tableData.operateBtn)
-}
+const updataLogBut = (val: attrButton[]) => {
+  // console.log("更新列表记录操作按钮",val)
+  let isWrete = true;
+  if (state.tableData.columns && state.tableData.columns.length > 0) {
+    state.tableData.columns.forEach((item: any) => {
+      if (item.fieldClass == "__control") {
+        state.tableData.operateBtn = val.value;
+        isWrete = false;
+      }
+    });
+  }
+  if (isWrete) {
+    state.tableData.operateBtn = [];
+  }
+  // console.log("更新列表记录操作按钮------1------->",state.tableData.operateBtn)
+};
 
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-28 15:00:12
 @ 功能: 处理查询条件
 */
-const addOrDelSearchField = (val:attrButton,isTrue:boolean) => {
-	if(isTrue){
-		if(state.searchData.length>0){
-			let isWrite = true;
-			state.searchData.forEach((item:attrButton,index:number)=>{
-				if(item.id==val.id){
-					isWrite = false;
-				}
-			})
-			if(isWrite){
-				state.searchData.push(val)
-			}
-		}else{
-			state.searchData.push(val)
-		}
-	}else{
-		if(state.searchData.length>0){
-			state.searchData.forEach((item:attrButton,index:number)=>{
-				if(item.id==val.id){
-					state.searchData.splice(index,1)
-				}
-			})
-		}
-	}
-}
-
-// 定义自定义表头
-const readerColumn = (column:any) => {
-	// console.log(column)
-	let labelLong = column.label.length // 表头label长度
-	if(column.label.length < 3) {
-		labelLong = 3
-	}
-	let size = 30 // 根据需求定义一个字体的标尺
-	// column.minWidth = labelLong * size
-	//@ts-ignore
-	return labelLong * size
-}
-
-const adaptiveWidth = (colName: any) =>{
-    if (!colName) {
-        return
+const addOrDelSearchField = (val: attrButton, isTrue: boolean) => {
+  if (isTrue) {
+    if (state.searchData.length > 0) {
+      let isWrite = true;
+      state.searchData.forEach((item: attrButton, index: number) => {
+        if (item.id == val.id) {
+          isWrite = false;
+        }
+      });
+      if (isWrite) {
+        state.searchData.push(val);
+      }
+    } else {
+      state.searchData.push(val);
     }
-    colName += ''
-    const english = /\w+/
-    let colWidth = 0
-    for (const char of colName) {
-        if (english.test(char)) {
-            colWidth += 30
-        } else {
-            colWidth += 30
+  } else {
+    if (state.searchData.length > 0) {
+      state.searchData.forEach((item: attrButton, index: number) => {
+        if (item.id == val.id) {
+          state.searchData.splice(index, 1);
         }
+      });
     }
-    return colWidth
-}
-const codeIsShow = ref(false)	//生成代码
+  }
+};
+
+// 定义自定义表头
+const readerColumn = (column: any) => {
+  // console.log(column)
+  let labelLong = column.label.length; // 表头label长度
+  if (column.label.length < 3) {
+    labelLong = 3;
+  }
+  let size = 30; // 根据需求定义一个字体的标尺
+  // column.minWidth = labelLong * size
+  //@ts-ignore
+  return labelLong * size;
+};
+
+const adaptiveWidth = (colName: any) => {
+  if (!colName) {
+    return;
+  }
+  colName += "";
+  const english = /\w+/;
+  let colWidth = 0;
+  for (const char of colName) {
+    if (english.test(char)) {
+      colWidth += 30;
+    } else {
+      colWidth += 30;
+    }
+  }
+  return colWidth;
+};
+const codeIsShow = ref(false); //生成代码
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-29 11:12:26
 @ 功能: 列表头部按钮操作
 */
 const listPageTools = (type: string) => {
-	// console.log("列表头部操作--》",type)
-	switch(type){
-		case "del":
-			clearData()
-			break;
-		case "eye":
-			state.previewVisible = true
-			break;
-		case "json":
-			drawer.title = "查看表格列表结构"
-			dialogOpen(state, { direction: 'ltr', type: 'json' })
-			break;
-		case "save":
-			saveFormListData()
-		case "close":
-			emits('closeFormPage')
-			break;
-		default:
-	}
-}
+  // console.log("列表头部操作--》",type)
+  switch (type) {
+    case "del":
+      clearData();
+      break;
+    case "eye":
+      state.previewVisible = true;
+      break;
+    case "json":
+      drawer.title = "查看表格列表结构";
+      dialogOpen(state, { direction: "ltr", type: "json" });
+      break;
+    case "save":
+      saveFormListData();
+    case "close":
+      emits("closeFormPage");
+      break;
+    default:
+  }
+};
 
 /**
 @ 作者: 秦东
@@ -656,65 +668,64 @@ const listPageTools = (type: string) => {
 @ 功能: 关闭预览
 */
 const handlePreviewClose = () => {
-	state.previewVisible = false
-}
+  state.previewVisible = false;
+};
 const drawer = reactive({
-    visible: false,
-    title: '',
-    direction: 'ltr',
-    content: '',
-    codeType: ''
-})
+  visible: false,
+  title: "",
+  direction: "ltr",
+  content: "",
+  codeType: "",
+});
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-29 14:08:49
 @ 功能: 数据格式处理
 */
 const dialogOpen = (obj: any, params: any = {}) => {
-    drawer.visible = true
-    Object.assign(drawer, { direction: 'ltr' }, params)
-    let editData = objToStringify(obj, true)
-    switch (params.type) {
-      case 'dict':
-        editData = json2string(obj, true)
-        break
-      case 'beforeRequest':
-      case 'beforeDelete':
-      case 'treeBeforeRequest':
-        if (!obj) {
-          editData = beforeRequest
-        }
-        break
-      case 'afterResponse':
-      case 'treeAfterResponse':
-        if (!obj) {
-          editData = afterResponse
-        }
-        break
-    }
-    drawer.content = editData
-}
+  drawer.visible = true;
+  Object.assign(drawer, { direction: "ltr" }, params);
+  let editData = objToStringify(obj, true);
+  switch (params.type) {
+    case "dict":
+      editData = json2string(obj, true);
+      break;
+    case "beforeRequest":
+    case "beforeDelete":
+    case "treeBeforeRequest":
+      if (!obj) {
+        editData = beforeRequest;
+      }
+      break;
+    case "afterResponse":
+    case "treeAfterResponse":
+      if (!obj) {
+        editData = afterResponse;
+      }
+      break;
+  }
+  drawer.content = editData;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-29 11:02:51
 @ 功能: 清空数据
 */
 const clearData = () => {
-	tableFieldList.value!.clearSelection()
-	tableFieldAttrBut.value!.clearSelection()
-	tableAttrBut.value!.clearSelection()
-	state.searchData = []
-	// state.tableData.controlBtn = []
-	// state.tableData.columns = []
-	state.tableData.operateBtn = []
-	state.tableData.config = {}
-	if(formTableField.masterTable){
-		formTableField.masterTable.forEach((item)=>{
-			item.isSearch = false;
-		})
-	}
-	
-}
+  tableFieldList.value!.clearSelection();
+  tableFieldAttrBut.value!.clearSelection();
+  tableAttrBut.value!.clearSelection();
+  state.searchData = [];
+  // state.tableData.controlBtn = []
+  // state.tableData.columns = []
+  state.tableData.operateBtn = [];
+  state.tableData.config = {};
+  if (formTableField.masterTable) {
+    formTableField.masterTable.forEach((item) => {
+      item.isSearch = false;
+    });
+  }
+};
 
 /**
 @ 作者: 秦东
@@ -722,205 +733,217 @@ const clearData = () => {
 @ 功能: 添加自定义表单列表设定
 */
 const saveFormListData = () => {
-	const { type ,addApiUrl ,editApiUrl,delApiUrl,lookApiUrl } = state.formApi
-	if(!props.formKey || props.formKey == "" || props.formKey == null || props.formKey == undefined){
-		return ElMessage.error('未知表单参数！请先保存前置表单后再操作！')
-	}
-	// console.log("添加自定义表单列表设定",state.formApi)
-	if(type != 1){
-		if(addApiUrl=="" || editApiUrl=="" || delApiUrl=="" || lookApiUrl == ""){
-			return ElMessage.error('请补全列表第三方APIUrl！')
-		}
-	}
-	if(state.tableData.columns.length < 1){
-		return ElMessage.error('未设置表单查询项！不可提交！')
-	}
-	let params: any = {
-		data: json2string(state),
-		id: props.formKey.toString()
-	}
-	// console.log("添加自定义表单列表设定",params)
-	editCustomerFormList(params)
-		.then((data)=>{
-			// console.log("添加自定义表单列表设定",data)
-			ElMessage.success(data.msg)
-		})
-}
+  const { type, addApiUrl, editApiUrl, delApiUrl, lookApiUrl } = state.formApi;
+  if (
+    !props.formKey ||
+    props.formKey == "" ||
+    props.formKey == null ||
+    props.formKey == undefined
+  ) {
+    return ElMessage.error("未知表单参数！请先保存前置表单后再操作！");
+  }
+  // console.log("添加自定义表单列表设定",state.formApi)
+  if (type != 1) {
+    if (addApiUrl == "" || editApiUrl == "" || delApiUrl == "" || lookApiUrl == "") {
+      return ElMessage.error("请补全列表第三方APIUrl！");
+    }
+  }
+  if (state.tableData.columns.length < 1) {
+    return ElMessage.error("未设置表单查询项！不可提交！");
+  }
+  let params: any = {
+    data: json2string(state),
+    id: props.formKey.toString(),
+  };
+  // console.log("添加自定义表单列表设定",params)
+  editCustomerFormList(params).then((data) => {
+    // console.log("添加自定义表单列表设定",data)
+    ElMessage.success(data.msg);
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-01 08:41:31
 @ 功能: 获取列表内容
 */
 const getListInfo = () => {
-	// console.log("获取列表内容1111",props.formKey)
-	gainFormListCont({id:props.formKey.toString()})
-		.then((data)=>{
-			// console.log("获取列表内容",data)
-			if(data.data.listjson != null && data.data.listjson != "" && data.data.listjson != "null"){
-				let stateData = string2json(data.data.listjson)
-				// console.log("获取列表内容---->",stateData)
-				state.tableData = stateData.tableData
-				state.searchData = stateData.searchData
-				state.loading = stateData.loading
-				state.attrObj = stateData.attrObj
-				state.config = stateData.config
-				state.tagList = stateData.tagList
-				state.formId = stateData.formId
-				state.formList = stateData.formList
-				state.name = stateData.name
-				state.treeData = stateData.treeData
-				state.previewVisible = stateData.previewVisible
-				state.formFieldList = stateData.formFieldList
-				state.formApi = stateData.formApi
-				state.dict = stateData.dict
-				state.refreshTable = stateData.refreshTable
-				if(stateData.view && stateData.view != null && stateData.view != ""){
-					if(stateData.view.card  && stateData.view.card  != null && stateData.view.card  != ""){
-						state.view = stateData.view
-					}else{
-						state.view = stateData.view
-						state.view.card ={
-							status:false,
-							isClick:false,
-							form:{
-								sort:1,
-								sortWord:"",
-								imgWork:"",
-								imgWidth:50,
-								imgHeight:50,
-								imgBorderRadius:5,
-								imgPadding:2,
-								titleWork:"",
-								describe:"",
-								ranks:3,
-								title:[]
-							}
-						}
-					}
-					
-				}
-				
+  // console.log("获取列表内容1111",props.formKey)
+  gainFormListCont({ id: props.formKey.toString() }).then((data) => {
+    // console.log("获取列表内容",data)
+    if (
+      data.data.listjson != null &&
+      data.data.listjson != "" &&
+      data.data.listjson != "null"
+    ) {
+      let stateData = string2json(data.data.listjson);
+      // console.log("获取列表内容---->",stateData)
+      state.tableData = stateData.tableData;
+      state.searchData = stateData.searchData;
+      state.loading = stateData.loading;
+      state.attrObj = stateData.attrObj;
+      state.config = stateData.config;
+      state.tagList = stateData.tagList;
+      state.formId = stateData.formId;
+      state.formList = stateData.formList;
+      state.name = stateData.name;
+      state.treeData = stateData.treeData;
+      state.previewVisible = stateData.previewVisible;
+      state.formFieldList = stateData.formFieldList;
+      state.formApi = stateData.formApi;
+      state.dict = stateData.dict;
+      state.refreshTable = stateData.refreshTable;
+      if (stateData.view && stateData.view != null && stateData.view != "") {
+        if (
+          stateData.view.card &&
+          stateData.view.card != null &&
+          stateData.view.card != ""
+        ) {
+          state.view = stateData.view;
+        } else {
+          state.view = stateData.view;
+          state.view.card = {
+            status: false,
+            isClick: false,
+            form: {
+              sort: 1,
+              sortWord: "",
+              imgWork: "",
+              imgWidth: 50,
+              imgHeight: 50,
+              imgBorderRadius: 5,
+              imgPadding: 2,
+              titleWork: "",
+              describe: "",
+              ranks: 3,
+              title: [],
+            },
+          };
+        }
+      }
 
-				// console.log("获取列表内容--1-->",stateData.view)
-				// console.log("获取列表内容--2-->",state.view)
-			}
-			
+      // console.log("获取列表内容--1-->",stateData.view)
+      // console.log("获取列表内容--2-->",state.view)
+    }
 
-			zhuDaunIsTrue.value = false
-			
-			if(state.tableData && state.tableData.columns && state.tableData.columns.length > 0) {
-				
-				if(formTableField.masterTable && formTableField.masterTable.length > 0){
-					state.tableData.columns.forEach((itemCol:any)=>{
-						formTableField.masterTable.forEach((item:any)=>{
-							if(itemCol.id == item.id){
-								// console.log("========>",item)
-								item.isSearch = true
-								tableFieldList.value!.toggleRowSelection(item, true)
-							}
-						})
-					})
-					
-				}
-				
-				if(tableAttrLogButtonList && tableAttrLogButtonList.length > 0){
-					state.tableData.columns.forEach((itemCol:any)=>{
-						tableAttrLogButtonList.forEach((item:any)=>{
-							if(itemCol.id == item.id){
-								tableFieldAttrBut.value!.toggleRowSelection(item, true)
-							}
-						})
-					})
-				}
-				
-			// 	// let delInfo = []
-			// 	// let delInfoBut = []
+    zhuDaunIsTrue.value = false;
+
+    if (
+      state.tableData &&
+      state.tableData.columns &&
+      state.tableData.columns.length > 0
+    ) {
+      if (formTableField.masterTable && formTableField.masterTable.length > 0) {
+        state.tableData.columns.forEach((itemCol: any) => {
+          formTableField.masterTable.forEach((item: any) => {
+            if (itemCol.id == item.id) {
+              // console.log("========>",item)
+              item.isSearch = true;
+              tableFieldList.value!.toggleRowSelection(item, true);
+            }
+          });
+        });
+      }
 
-			// 	// state.tableData.columns.forEach((item: any) => {
-			// 	// 	if(item.fieldClass != "-"){
-			// 	// 		delInfo.push(item)
-			// 	// 	}else{
-			// 	// 		delInfoBut.push(item)
-			// 	// 	}
-			// 	// 	// tableFieldList.value!.toggleRowSelection(item, true)
-			// 	// 	// if
-			// 	// 	// tableFieldAttrBut.value!.toggleRowSelection(item, true)
-			// 	// })
-			// 	// if(delInfo.length > 0){
-			// 	// 	delInfo.forEach((item:any)=>{
-			// 	// 		tableFieldList.value!.toggleRowSelection(item, true)
-			// 	// 	})
-			// 	// }
-			// 	// if(delInfoBut.length > 0){
-			// 	// 	delInfoBut.forEach((item:any)=>{
-			// 	// 		tableFieldAttrBut.value!.toggleRowSelection(item, true)
-			// 	// 	})
-			// 	// }
-			}
-			
-			if(state.tableData && state.tableData.controlBtn && state.tableData.controlBtn.length > 0) {
-				
-				state.tableData.controlBtn.forEach((itemCol:any)=>{
-					tableButtonList.forEach((item:any)=>{
-						if(itemCol.id == item.id){
-							tableAttrBut.value!.toggleRowSelection(item, true)
-						}
-					})
-				})
-			}
+      if (tableAttrLogButtonList && tableAttrLogButtonList.length > 0) {
+        state.tableData.columns.forEach((itemCol: any) => {
+          tableAttrLogButtonList.forEach((item: any) => {
+            if (itemCol.id == item.id) {
+              tableFieldAttrBut.value!.toggleRowSelection(item, true);
+            }
+          });
+        });
+      }
 
-			zhuDaunIsTrue.value = true
-		})
-		
-}
+      // 	// let delInfo = []
+      // 	// let delInfoBut = []
+
+      // 	// state.tableData.columns.forEach((item: any) => {
+      // 	// 	if(item.fieldClass != "-"){
+      // 	// 		delInfo.push(item)
+      // 	// 	}else{
+      // 	// 		delInfoBut.push(item)
+      // 	// 	}
+      // 	// 	// tableFieldList.value!.toggleRowSelection(item, true)
+      // 	// 	// if
+      // 	// 	// tableFieldAttrBut.value!.toggleRowSelection(item, true)
+      // 	// })
+      // 	// if(delInfo.length > 0){
+      // 	// 	delInfo.forEach((item:any)=>{
+      // 	// 		tableFieldList.value!.toggleRowSelection(item, true)
+      // 	// 	})
+      // 	// }
+      // 	// if(delInfoBut.length > 0){
+      // 	// 	delInfoBut.forEach((item:any)=>{
+      // 	// 		tableFieldAttrBut.value!.toggleRowSelection(item, true)
+      // 	// 	})
+      // 	// }
+    }
 
-const showCollapse = () => {}
+    if (
+      state.tableData &&
+      state.tableData.controlBtn &&
+      state.tableData.controlBtn.length > 0
+    ) {
+      state.tableData.controlBtn.forEach((itemCol: any) => {
+        tableButtonList.forEach((item: any) => {
+          if (itemCol.id == item.id) {
+            tableAttrBut.value!.toggleRowSelection(item, true);
+          }
+        });
+      });
+    }
+
+    zhuDaunIsTrue.value = true;
+  });
+};
+
+const showCollapse = () => {};
 // 弹窗确认
 const dialogConfirm = (editVal: string) => {
-    // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
-    try {
-      	if (typeof drawer.callback === 'function') {
-			// callback
-			const newObj =
-			drawer.codeType === 'json'? string2json(editVal): stringToObj(editVal)
-			drawer.callback(newObj)
-      	} else {
-			switch (drawer.type) {
-				case 'css':
-					// 表单属性－编辑表单样式
-					if (!state.value.formData.config) {
-						state.value.formData.config = {}
-					}
-					state.value.formData.config.style = editVal
-					break
-				case 'dict':
-					state.value.formDict = string2json(editVal)
-					break
-				case 'beforeRequest':
-				case 'beforeSubmit':
-				case 'afterResponse':
-				case 'afterSubmit':
-				case 'closeSubmit':
-				case 'change':
-					if (!state.value.formData.events) {
-						state.value.formData.events = {}
-					}
-					state.value.formData.events[drawer.type] = stringToObj(editVal)
-					break
-				default:
-					state.value.formData = stringToObj(editVal)
-			}
-      	}
-      	dialogCancel()
-    } catch (res) {
-		// console.log(res.message)
-		//ElMessage.error(res.message)
+  // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
+  try {
+    if (typeof drawer.callback === "function") {
+      // callback
+      const newObj =
+        drawer.codeType === "json" ? string2json(editVal) : stringToObj(editVal);
+      drawer.callback(newObj);
+    } else {
+      switch (drawer.type) {
+        case "css":
+          // 表单属性－编辑表单样式
+          if (!state.value.formData.config) {
+            state.value.formData.config = {};
+          }
+          state.value.formData.config.style = editVal;
+          break;
+        case "dict":
+          state.value.formDict = string2json(editVal);
+          break;
+        case "beforeRequest":
+        case "beforeSubmit":
+        case "afterResponse":
+        case "afterSubmit":
+        case "closeSubmit":
+        case "change":
+          if (!state.value.formData.events) {
+            state.value.formData.events = {};
+          }
+          state.value.formData.events[drawer.type] = stringToObj(editVal);
+          break;
+        default:
+          state.value.formData = stringToObj(editVal);
+      }
     }
-}
+    dialogCancel();
+  } catch (res) {
+    // console.log(res.message)
+    //ElMessage.error(res.message)
+  }
+};
 </script>
 <template>
-	<div class="design-containers design-table" v-loading="pageLoading">
-		<!-- <div class="components-list">
+  <div class="design-containers design-table" v-loading="pageLoading">
+    <!-- <div class="components-list">
 			<el-divider content-position="left">表格列字段</el-divider>
 			<el-table
 				ref="multipleTableRef"
@@ -934,787 +957,1033 @@ const dialogConfirm = (editVal: string) => {
 				</el-table-column>
 			</el-table>
 		</div> -->
-		
-		<div class="main-body">
-			<div class="header">
-				<div class="field">
-				
-				</div>
-				<PageListHeadTools @clearData="listPageTools" />
-			</div>
-			<div  ref="container"  class="table_box main_table">
 
-				<div class="search-box" >
-					<SearchField v-if="state.searchData&&state.searchData.length>0&&state.config.searchIsShow" v-model:searchData="state.searchData" />
-					<div v-else class="tipBox" >条件查询搜索区域</div>
-					
-				</div>
-
-
-
-				<div class="operateButArea">
-					<div class="operatLeft">
-						<el-text v-if="state.tableData.controlBtn.length === 0" class="mx-1 tipBox" type="info">操作按钮区域</el-text>
-						<el-button
-							v-for="item in state.tableData.controlBtn"
-							v-bind="item"
-							:key="item.type"
-						>
-							{{ item.label }}
-						</el-button>
-					</div>
-					<div>
-						<el-button-group class="ml-4">
-							<el-tooltip
-								v-if="state.config.searchFormIsShow"
-								class="box-item"
-								effect="dark"
-								content="折叠查询表单"
-								placement="top"
-							>
-								<el-button size="small" @click="state.config.searchIsShow=!state.config.searchIsShow" class="fa fa-search" />
-							</el-tooltip>
-							<el-tooltip
-								v-if="state.view.list.status"
-								class="box-item"
-								effect="dark"
-								content="列表视图"
-								placement="top"
-							>
-								<el-button size="small" class="fa fa-table"  :color="state.view.list.isClick?'#a0cfff':''" @click="tabsView(state.view.list)" />
-							</el-tooltip>
-							<el-tooltip
-								v-if="state.view.date.status"
-								class="box-item"
-								effect="dark"
-								content="日历视图"
-								placement="top"
-							>
-								<el-button size="small" class="fa fa-calendar" />
-							</el-tooltip>
-							<el-tooltip
-								v-if="state.view.time.status"
-								class="box-item"
-								effect="dark"
-								content="时间轴"
-								placement="top"
-							>
-								<el-button size="small" class="fa fa-clock-o" />
-							</el-tooltip>
-							<el-tooltip
-								v-if="state.view.gantt.status"
-								class="box-item"
-								effect="dark"
-								content="甘特图"
-								placement="top"
-							>
-								<el-button size="small" class="fa fa-bar-chart" />
-							</el-tooltip>
-							<el-tooltip
-								v-if="state.view.map.status"
-								class="box-item"
-								effect="dark"
-								content="地图视图"
-								placement="top"
-							>
-								<el-button size="small" class="fa fa-map-signs" />
-							</el-tooltip>
-							
-						</el-button-group>
-					</div>
-				</div>
-				
-				<div class="operateButArea tipBox" v-if="!state.tableData.columns?.length">
-					表格列设置区域，可从左上角 添加表格列字段
-					选择已有列或直接从上方工具栏 生成脚本预览 编辑
-				</div>
-				<el-table
-					:data="[{}]"
-					v-bind="state.tableData.tableProps || {}"
-					ref="tableEl"
-					
-				>
-					<template
-						v-for="item in state.tableData.columns"
-						:key="item.prop || item.label"
-					>
-
-						<el-table-column v-bind="item" :width="readerColumn(item)">
-
-							<template #header="scope">
-								<div class="field_close">
-									<el-text>{{ item.label }}</el-text>
-									<i ><el-icon  @click="delCol(item)"><Close /></el-icon></i>
-								</div>
-								<el-tooltip placement="top" v-if="item.help">
-									<template #content>
-										<span v-html="item.help"></span>
-									</template>
-									<i class="icon-help"></i>
-								</el-tooltip>
-							</template>
-							<template #default v-if="item.field !== 'index'">
-								<el-checkbox v-if="item.field === 'checkbox'" />
-								<span v-if="item.field === 'operate'">操作</span>
-								<span v-if="item.field !== 'checkbox'&&item.field !== 'operate'" >数据</span>
-							</template>
-						</el-table-column>
-					</template>
-				</el-table>
-				<div class="table-tip">
-					操作提示：<br />
-					*从数据列表配置中选择 所属表单<br />
-					*从左上角 添加表格字段 选择预设字段<br />
-					*可拖动表头字段移动调整表头字段排列顺序<br />
-					*可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br />
-				
-				</div>
-			</div>
-		</div>
-		<div class="sidebar-tools">
-			<el-tabs ref="multipleTableRef" v-model="formTableActive" class="form_tabs" @tab-click="handleClick">
-				<el-tab-pane label="字段设置" :name="1">
-					<el-divider content-position="left">功能字段</el-divider>
-					<el-table ref="tableFieldAttrBut" :data="tableAttrLogButtonList" border  style="width: 100%" @selection-change="tableFieldAttrButClick">
-						<el-table-column fixed type="selection" width="40"  align="center" />
-						<el-table-column prop="label" label="字段" />
-						<el-table-column fixed="right" label="设置" width="55" align="center">
-							<template #default="scope">
-								<el-icon v-if="scope.row.fieldClass=='__control'" title="设置" @click="setUpFieldBut(scope.row)"><Setting /></el-icon>
-							</template>
-						</el-table-column>
-					</el-table>
-					<el-divider content-position="left">列表字段</el-divider>
-					<el-table ref="tableFieldList" :data="formTableField.masterTable" border @selection-change="tableListFieldClick"  style="width: 100%">
-						<el-table-column fixed type="selection" width="40"  align="center" />
-						<el-table-column prop="label" label="字段">
-							<template #default="scope">
-								{{scope.row.label}}({{scope.row.fieldClass}}[{{scope.row.pattern}}])
-							</template>
-						</el-table-column>
-						<el-table-column fixed="right" label="查询" width="55" align="center">
-							<template #default="scope">
-								<el-switch
-									v-model="scope.row.isSearch"
-									:active-action-icon="View"
-									:inactive-action-icon="Hide"
-									style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-									@change="addOrDelSearchField(scope.row, $event)"
-								/>
-							</template>
-						</el-table-column>
-						<!-- <el-table-column fixed="right" label="设置" width="55" align="center">
+    <div class="main-body">
+      <div class="header">
+        <div class="field"></div>
+        <PageListHeadTools @clearData="listPageTools" />
+      </div>
+      <div ref="container" class="table_box main_table">
+        <div class="search-box">
+          <SearchField
+            v-if="
+              state.searchData && state.searchData.length > 0 && state.config.searchIsShow
+            "
+            v-model:searchData="state.searchData"
+          />
+          <div v-else class="tipBox">条件查询搜索区域</div>
+        </div>
+
+        <div class="operateButArea">
+          <div class="operatLeft">
+            <el-text
+              v-if="state.tableData.controlBtn.length === 0"
+              class="mx-1 tipBox"
+              type="info"
+              >操作按钮区域</el-text
+            >
+            <el-button
+              v-for="item in state.tableData.controlBtn"
+              v-bind="item"
+              :key="item.type"
+            >
+              {{ item.label }}
+            </el-button>
+          </div>
+          <div>
+            <el-button-group class="ml-4">
+              <el-tooltip
+                v-if="state.config.searchFormIsShow"
+                class="box-item"
+                effect="dark"
+                content="折叠查询表单"
+                placement="top"
+              >
+                <el-button
+                  size="small"
+                  @click="state.config.searchIsShow = !state.config.searchIsShow"
+                  class="fa fa-search"
+                />
+              </el-tooltip>
+              <el-tooltip
+                v-if="state.view.list.status"
+                class="box-item"
+                effect="dark"
+                content="列表视图"
+                placement="top"
+              >
+                <el-button
+                  size="small"
+                  class="fa fa-table"
+                  :color="state.view.list.isClick ? '#a0cfff' : ''"
+                  @click="tabsView(state.view.list)"
+                />
+              </el-tooltip>
+              <el-tooltip
+                v-if="state.view.date.status"
+                class="box-item"
+                effect="dark"
+                content="日历视图"
+                placement="top"
+              >
+                <el-button size="small" class="fa fa-calendar" />
+              </el-tooltip>
+              <el-tooltip
+                v-if="state.view.time.status"
+                class="box-item"
+                effect="dark"
+                content="时间轴"
+                placement="top"
+              >
+                <el-button size="small" class="fa fa-clock-o" />
+              </el-tooltip>
+              <el-tooltip
+                v-if="state.view.gantt.status"
+                class="box-item"
+                effect="dark"
+                content="甘特图"
+                placement="top"
+              >
+                <el-button size="small" class="fa fa-bar-chart" />
+              </el-tooltip>
+              <el-tooltip
+                v-if="state.view.map.status"
+                class="box-item"
+                effect="dark"
+                content="地图视图"
+                placement="top"
+              >
+                <el-button size="small" class="fa fa-map-signs" />
+              </el-tooltip>
+            </el-button-group>
+          </div>
+        </div>
+
+        <div class="operateButArea tipBox" v-if="!state.tableData.columns?.length">
+          表格列设置区域，可从左上角 添加表格列字段 选择已有列或直接从上方工具栏
+          生成脚本预览 编辑
+        </div>
+        <el-table :data="[{}]" v-bind="state.tableData.tableProps || {}" ref="tableEl">
+          <template
+            v-for="item in state.tableData.columns"
+            :key="item.prop || item.label"
+          >
+            <el-table-column v-bind="item" :width="readerColumn(item)">
+              <template #header="scope">
+                <div class="field_close">
+                  <el-text>{{ item.label }}</el-text>
+                  <i
+                    ><el-icon @click="delCol(item)"><Close /></el-icon
+                  ></i>
+                </div>
+                <el-tooltip placement="top" v-if="item.help">
+                  <template #content>
+                    <span v-html="item.help"></span>
+                  </template>
+                  <i class="icon-help"></i>
+                </el-tooltip>
+              </template>
+              <template #default v-if="item.field !== 'index'">
+                <el-checkbox v-if="item.field === 'checkbox'" />
+                <span v-if="item.field === 'operate'">操作</span>
+                <span v-if="item.field !== 'checkbox' && item.field !== 'operate'"
+                  >数据</span
+                >
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+        <div class="table-tip">
+          操作提示：<br />
+          *从数据列表配置中选择 所属表单<br />
+          *从左上角 添加表格字段 选择预设字段<br />
+          *可拖动表头字段移动调整表头字段排列顺序<br />
+          *可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br />
+        </div>
+      </div>
+    </div>
+    <div class="sidebar-tools">
+      <el-tabs
+        ref="multipleTableRef"
+        v-model="formTableActive"
+        class="form_tabs"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane label="字段设置" :name="1">
+          <el-divider content-position="left">功能字段</el-divider>
+          <el-table
+            ref="tableFieldAttrBut"
+            :data="tableAttrLogButtonList"
+            border
+            style="width: 100%"
+            @selection-change="tableFieldAttrButClick"
+          >
+            <el-table-column fixed type="selection" width="40" align="center" />
+            <el-table-column prop="label" label="字段" />
+            <el-table-column fixed="right" label="设置" width="55" align="center">
+              <template #default="scope">
+                <el-icon
+                  v-if="scope.row.fieldClass == '__control'"
+                  title="设置"
+                  @click="setUpFieldBut(scope.row)"
+                  ><Setting
+                /></el-icon>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-divider content-position="left">列表字段</el-divider>
+          <el-table
+            ref="tableFieldList"
+            :data="formTableField.masterTable"
+            border
+            @selection-change="tableListFieldClick"
+            style="width: 100%"
+          >
+            <el-table-column fixed type="selection" width="40" align="center" />
+            <el-table-column prop="label" label="字段">
+              <template #default="scope">
+                {{ scope.row.label }}({{ scope.row.fieldClass }}[{{ scope.row.pattern }}])
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="查询" width="55" align="center">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.isSearch"
+                  :active-action-icon="View"
+                  :inactive-action-icon="Hide"
+                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                  @change="addOrDelSearchField(scope.row, $event)"
+                />
+              </template>
+            </el-table-column>
+            <!-- <el-table-column fixed="right" label="设置" width="55" align="center">
 							<template #default="scope">
 								<el-icon title="设置" @click="setUpField(scope.row)"><Setting /></el-icon>
 							</template>
 						</el-table-column> -->
-					</el-table>
-					<!-- <el-divider content-position="left">查询条件</el-divider> -->
-				</el-tab-pane>
-				<el-tab-pane label="列表设置" :name="2">
-					<el-divider content-position="left">开启视图</el-divider>
-						<div class="demo_collapse">
-							<el-collapse v-value="activeName"  @change="handleChange">
-								<el-collapse-item  name="list" :class="state.view.list.status?'isTrueItem':''"  :disabled="!state.view.list.status">
-									<template #title>
-										<div class="collapse-title">
-											<div>
-												<i class="fa fa-table"></i>
-												<el-text>列表视图</el-text>
-											</div>
-											<el-switch v-if="1==0" class="openOfClose" v-model="state.view.list.status" @click.stop="showCollapse" />
-										</div>
-									</template>
-									<div>
-										<el-form
-											label-position="top"
-											label-width="auto"
-											:model="state.view.list.form"
-											style="max-width: 600px"
-										>
-											<el-form-item label="标题字段">
-												<el-select v-model="state.view.list.form.title" multiple placeholder="请选择标题字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="排序字段">
-												<el-select v-model="state.view.list.form.sortWord" placeholder="请选择排序字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序方式">
-												<el-radio-group v-model="state.view.list.form.sort">
-													<el-radio :label="1">降序</el-radio>
-													<el-radio :label="2">升序</el-radio>
-												</el-radio-group>
-											</el-form-item>
-
-
-										</el-form>
-									</div>
-								</el-collapse-item>
-								<el-collapse-item title="Consistency" name="card" :class="state.view.card&&state.view.card.status?'isTrueItem':''"  :disabled="!state.view.card.status">
-									<template #title>
-										<div class="collapse-title">
-											<div>
-												<i class="fa fa-id-card-o"></i>
-												<el-text>卡片视图</el-text>
-											</div>
-											<el-switch class="openOfClose" v-model="state.view.card.status" :disabled="isCardTrue" @click.stop="showCollapse" />
-										</div>
-									</template>
-									<div>
-										<el-form
-											label-position="top"
-											label-width="auto"
-											:model="state.view.card.form"
-											style="max-width: 600px"
-										>
-											<el-form-item label="标题字段">
-												<el-select v-model="state.view.card.form.title" multiple placeholder="请选择标题字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="图片字段">
-												<el-select v-model="state.view.card.form.imgWork" placeholder="请选择图片字段">
-													<el-option v-for="item in cardKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="图片宽度与高度">
-												<el-input
-													v-model="state.view.card.form.imgWidth"
-													placeholder="请输入图片宽度"
-												>
-													<template #prepend>宽度</template>
-													<template #suffix>PX</template>
-												</el-input>
-												<el-input
-													v-model="state.view.card.form.imgHeight"
-													placeholder="请输入图片高度"
-													style="margin-top:10px;"
-												>
-													<template #prepend>高度</template>
-													<template #suffix>PX</template>
-												</el-input>
-											</el-form-item>
-											<el-form-item label="图片圆角">
-												<el-input
-													v-model="state.view.card.form.imgBorderRadius"
-													placeholder="请输入图片圆角"
-													style="margin-top:10px;"
-												>
-													<template #prepend>圆角</template>
-													<template #suffix>PX</template>
-												</el-input>
-											</el-form-item>
-
-											<el-form-item label="图片边框缩进">
-												<el-input
-													v-model="state.view.card.form.imgPadding"
-													placeholder="请输入图片边框缩进"
-													style="margin-top:10px;"
-												>
-													<template #prepend>缩进</template>
-													<template #suffix>PX</template>
-												</el-input>
-											</el-form-item>
-											<el-form-item label="卡片标题">
-												<el-select v-model="state.view.card.form.titleWork" placeholder="请选择时间轴段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="卡片标题描述">
-												<el-select v-model="state.view.card.form.describe" placeholder="请选择时间轴段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="每行几列">
-												<el-input
-													v-model="state.view.card.form.ranks"
-													placeholder="请输入每行几列"
-													style="margin-top:10px;"
-												>
-													<template #suffix>列</template>
-												</el-input>
-											</el-form-item>
-											<el-form-item label="排序字段">
-												<el-select v-model="state.view.card.form.sortWord" placeholder="请选择时间轴段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序方式">
-												<el-radio-group v-model="state.view.card.form.sort">
-													<el-radio :label="1">降序</el-radio>
-													<el-radio :label="2">升序</el-radio>
-												</el-radio-group>
-											</el-form-item>
-
-
-										</el-form>
-									</div>
-								</el-collapse-item>
-								<el-collapse-item title="Consistency" name="date" :class="state.view.date.status?'isTrueItem':''"  :disabled="!state.view.date.status">
-									<template #title>
-										<div class="collapse-title">
-											<div>
-												<i class="fa fa-calendar"></i>
-												<el-text>日历视图</el-text>
-											</div>
-											<el-switch class="openOfClose" v-model="state.view.date.status"  @click.stop="showCollapse" />
-										</div>
-									</template>
-									<div>
-										<el-form
-											label-position="top"
-											label-width="auto"
-											:model="state.view.date.form"
-											style="max-width: 600px"
-										>
-											<el-form-item label="标题字段">
-												<el-select v-model="state.view.date.form.title" multiple placeholder="请选择标题字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item >
-												<span slot="label">
-													时间跨度
-													<el-tooltip
-														class="box-item"
-														effect="dark"
-														content="假如一个任务今天开始，明天结束。日历列表中用区间日期展示这一条信息。"
-														placement="top"
-													>
-														<i class="fa fa-question-circle-o"></i>
-													</el-tooltip>
-												</span>
-												<el-select v-model="state.view.date.form.startTime" clearable placeholder="请选择开始时间">
-													<template #prefix>从</template>
-													<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-												<el-select v-model="state.view.date.form.endTime" clearable placeholder="请选择结束时间" style="margin-top:10px;">
-													<template #prefix>至</template>
-													<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="默认展示">
-												<el-select v-model="state.view.date.form.dayType" clearable placeholder="请选择展示方式">
-													<el-option label="月" :value="1" />
-													<el-option label="周" :value="2" />
-													<el-option label="日" :value="3" />
-												</el-select>
-											</el-form-item>
-
-
-										</el-form>
-									</div>
-								</el-collapse-item>
-
-
-								<el-collapse-item title="Consistency" name="time" :class="state.view.time.status?'isTrueItem':''"  :disabled="!state.view.time.status">
-									<template #title>
-										<div class="collapse-title">
-											<div>
-												<i class="fa fa-clock-o"></i>
-												<el-text>时间轴</el-text>
-											</div>
-											<el-switch class="openOfClose" v-model="state.view.time.status"  @click.stop="showCollapse" />
-										</div>
-									</template>
-									<div>
-										<el-form
-											label-position="top"
-											label-width="auto"
-											:model="state.view.time.form"
-											style="max-width: 600px"
-										>
-											<el-form-item label="标题字段">
-												<el-select v-model="state.view.time.form.title" multiple placeholder="请选择标题字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="时间轴字段">
-												<el-select v-model="state.view.time.form.sortWord" placeholder="请选择时间轴段">
-													<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序方式">
-												<el-radio-group v-model="state.view.time.form.sort">
-													<el-radio :label="1">降序</el-radio>
-													<el-radio :label="2">升序</el-radio>
-												</el-radio-group>
-											</el-form-item>
-
-
-										</el-form>
-									</div>
-								</el-collapse-item>
-
-								<el-collapse-item title="Consistency" name="gantt" :class="state.view.gantt.status?'isTrueItem':''"  :disabled="!state.view.gantt.status">
-									<template #title>
-										<div class="collapse-title">
-											<div>
-												<i class="fa fa-bar-chart fa-rotate-0 "></i>
-												<el-text>甘特图</el-text>
-											</div>
-											<el-switch class="openOfClose" v-model="state.view.gantt.status"  @click.stop="showCollapse" />
-										</div>
-									</template>
-									<div>
-										<el-form
-											label-position="top"
-											label-width="auto"
-											:model="state.view.gantt.form"
-											style="max-width: 600px"
-										>
-											<el-form-item label="标题字段">
-												<el-select v-model="state.view.gantt.form.title" multiple placeholder="请选择标题字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="时间设置">
-												<el-select v-model="state.view.gantt.form.startTime" clearable placeholder="请选择开始时间">
-													<template #prefix>开始时间</template>
-													<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-												<el-select v-model="state.view.gantt.form.endTime" clearable placeholder="请选择结束时间" style="margin-top:10px;">
-													<template #prefix>结束时间</template>
-													<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="默认时间刻度">
-												<el-select v-model="state.view.gantt.form.dayType" clearable placeholder="请选择展示方式">
-													<el-option label="时" :value="1" />
-													<el-option label="日" :value="2" />
-													<el-option label="周" :value="3" />
-													<el-option label="月" :value="4" />
-													<el-option label="季" :value="5" />
-													<el-option label="年" :value="6" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序字段">
-												<el-select v-model="state.view.gantt.form.sortWord" placeholder="请选择时间轴段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序方式">
-												<el-radio-group v-model="state.view.gantt.form.sort">
-													<el-radio :label="1">降序</el-radio>
-													<el-radio :label="2">升序</el-radio>
-												</el-radio-group>
-											</el-form-item>
-
-
-										</el-form>
-									</div>
-								</el-collapse-item>
-
-								<el-collapse-item title="Consistency" name="map" :class="state.view.map.status?'isTrueItem':''"  :disabled="!state.view.map.status">
-									<template #title>
-										<div class="collapse-title">
-											<div>
-												<i class="fa fa-map-signs"></i>
-												<el-text>地图视图</el-text>
-											</div>
-											<el-switch class="openOfClose" v-model="state.view.map.status" :disabled="isMapTrue" @click.stop="showCollapse" />
-										</div>
-									</template>
-									<div>
-										<el-form
-											label-position="top"
-											label-width="auto"
-											:model="state.view.map.form"
-											style="max-width: 600px"
-										>
-											<el-form-item label="标题字段">
-												<el-select v-model="state.view.map.form.title" multiple placeholder="请选择标题字段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-											<el-form-item label="位置字段">
-												<el-select v-model="state.view.map.form.mapWord" placeholder="请选择位置字段">
-													<el-option v-for="item in mapKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序字段">
-												<el-select v-model="state.view.map.form.sortWord" placeholder="请选择时间轴段">
-													<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-												</el-select>
-											</el-form-item>
-
-											<el-form-item label="排序方式">
-												<el-radio-group v-model="state.view.map.form.sort">
-													<el-radio :label="1">降序</el-radio>
-													<el-radio :label="2">升序</el-radio>
-												</el-radio-group>
-											</el-form-item>
-
-
-										</el-form>
-									</div>
-								</el-collapse-item>
-
-
-
-							</el-collapse>
-						</div>
-					<el-divider content-position="left">功能按钮</el-divider>
-					<el-table ref="tableAttrBut" :data="tableButtonList" border  style="width: 100%" @selection-change="tableAttrButClick">
-						<el-table-column fixed type="selection" width="40"  align="center" />
-						<el-table-column prop="label" label="字段" />
-					</el-table>
-					<el-divider content-position="left">基本功能设置</el-divider>
-					<el-form :model="state.config" label-width="auto" style="width: 96%; margin-left:2%;">
-						<el-form-item label="每页显示数据得数量">
-							<el-input-number
-								v-model="state.config.pageSize"
-								class="mx-4"
-								:min="1"
-								:max="10000"
-								controls-position="right"
-							/>
-						</el-form-item>
-						<el-form-item label="数据添加编辑打开方式">
-							
-							<el-select
-								v-model="state.config.openPageMode"
-								clearable
-								placeholder="请选择"
-							>
-								<el-option
-									v-for="itemOpt in diaOrDrawer"
-									:key="itemOpt.value"
-									:label="itemOpt.label"
-									:value="itemOpt.value"
-								/>
-							</el-select>
-						</el-form-item>
-						<el-form-item label="可折叠查询表单">
-							<el-switch
-								v-model="state.config.searchFormIsShow"
-								:active-action-icon="View"
-								:inactive-action-icon="Hide"
-								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-							/>
-						</el-form-item>
-					</el-form>
-					<el-divider content-position="left">数据处理事件</el-divider>
-					<el-form :model="state.formApi" label-width="auto" style="width: 96%; margin-left:2%;">
-						<el-form-item label="数据处理方式">
-							<el-switch
-								v-model="state.formApi.type"
-								active-text="默认"
-    							inactive-text="第三方API"
-								active-value="1"
-      							inactive-value="2"
-								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409EFF"
-							/>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="填加APIUrl">
-							<el-input v-model="state.formApi.addApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="编辑APIUrl">
-							<el-input v-model="state.formApi.editApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="删除APIUrl">
-							<el-input v-model="state.formApi.delApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="查看APIUrl">
-							<el-input v-model="state.formApi.lookApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-					</el-form>
-					
-				</el-tab-pane>
-			</el-tabs>
-			<!-- {{props.formKey}}
+          </el-table>
+          <!-- <el-divider content-position="left">查询条件</el-divider> -->
+        </el-tab-pane>
+        <el-tab-pane label="列表设置" :name="2">
+          <el-divider content-position="left">开启视图</el-divider>
+          <div class="demo_collapse">
+            <el-collapse v-value="activeName" @change="handleChange">
+              <el-collapse-item
+                name="list"
+                :class="state.view.list.status ? 'isTrueItem' : ''"
+                :disabled="!state.view.list.status"
+              >
+                <template #title>
+                  <div class="collapse-title">
+                    <div>
+                      <i class="fa fa-table"></i>
+                      <el-text>列表视图</el-text>
+                    </div>
+                    <el-switch
+                      v-if="1 == 0"
+                      class="openOfClose"
+                      v-model="state.view.list.status"
+                      @click.stop="showCollapse"
+                    />
+                  </div>
+                </template>
+                <div>
+                  <el-form
+                    label-position="top"
+                    label-width="auto"
+                    :model="state.view.list.form"
+                    style="max-width: 600px"
+                  >
+                    <el-form-item label="标题字段">
+                      <el-select
+                        v-model="state.view.list.form.title"
+                        multiple
+                        placeholder="请选择标题字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="排序字段">
+                      <el-select
+                        v-model="state.view.list.form.sortWord"
+                        placeholder="请选择排序字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序方式">
+                      <el-radio-group v-model="state.view.list.form.sort">
+                        <el-radio :label="1">降序</el-radio>
+                        <el-radio :label="2">升序</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-collapse-item>
+              <el-collapse-item
+                title="Consistency"
+                name="card"
+                :class="state.view.card && state.view.card.status ? 'isTrueItem' : ''"
+                :disabled="!state.view.card.status"
+              >
+                <template #title>
+                  <div class="collapse-title">
+                    <div>
+                      <i class="fa fa-id-card-o"></i>
+                      <el-text>卡片视图</el-text>
+                    </div>
+                    <el-switch
+                      class="openOfClose"
+                      v-model="state.view.card.status"
+                      :disabled="isCardTrue"
+                      @click.stop="showCollapse"
+                    />
+                  </div>
+                </template>
+                <div>
+                  <el-form
+                    label-position="top"
+                    label-width="auto"
+                    :model="state.view.card.form"
+                    style="max-width: 600px"
+                  >
+                    <el-form-item label="标题字段">
+                      <el-select
+                        v-model="state.view.card.form.title"
+                        multiple
+                        placeholder="请选择标题字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="图片字段">
+                      <el-select
+                        v-model="state.view.card.form.imgWork"
+                        placeholder="请选择图片字段"
+                      >
+                        <el-option
+                          v-for="item in cardKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="图片宽度与高度">
+                      <el-input
+                        v-model="state.view.card.form.imgWidth"
+                        placeholder="请输入图片宽度"
+                      >
+                        <template #prepend>宽度</template>
+                        <template #suffix>PX</template>
+                      </el-input>
+                      <el-input
+                        v-model="state.view.card.form.imgHeight"
+                        placeholder="请输入图片高度"
+                        style="margin-top: 10px"
+                      >
+                        <template #prepend>高度</template>
+                        <template #suffix>PX</template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="图片圆角">
+                      <el-input
+                        v-model="state.view.card.form.imgBorderRadius"
+                        placeholder="请输入图片圆角"
+                        style="margin-top: 10px"
+                      >
+                        <template #prepend>圆角</template>
+                        <template #suffix>PX</template>
+                      </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="图片边框缩进">
+                      <el-input
+                        v-model="state.view.card.form.imgPadding"
+                        placeholder="请输入图片边框缩进"
+                        style="margin-top: 10px"
+                      >
+                        <template #prepend>缩进</template>
+                        <template #suffix>PX</template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="卡片标题">
+                      <el-select
+                        v-model="state.view.card.form.titleWork"
+                        placeholder="请选择时间轴段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="卡片标题描述">
+                      <el-select
+                        v-model="state.view.card.form.describe"
+                        placeholder="请选择时间轴段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="每行几列">
+                      <el-input
+                        v-model="state.view.card.form.ranks"
+                        placeholder="请输入每行几列"
+                        style="margin-top: 10px"
+                      >
+                        <template #suffix>列</template>
+                      </el-input>
+                    </el-form-item>
+                    <el-form-item label="排序字段">
+                      <el-select
+                        v-model="state.view.card.form.sortWord"
+                        placeholder="请选择时间轴段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序方式">
+                      <el-radio-group v-model="state.view.card.form.sort">
+                        <el-radio :label="1">降序</el-radio>
+                        <el-radio :label="2">升序</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-collapse-item>
+              <el-collapse-item
+                title="Consistency"
+                name="date"
+                :class="state.view.date.status ? 'isTrueItem' : ''"
+                :disabled="!state.view.date.status"
+              >
+                <template #title>
+                  <div class="collapse-title">
+                    <div>
+                      <i class="fa fa-calendar"></i>
+                      <el-text>日历视图</el-text>
+                    </div>
+                    <el-switch
+                      class="openOfClose"
+                      v-model="state.view.date.status"
+                      @click.stop="showCollapse"
+                    />
+                  </div>
+                </template>
+                <div>
+                  <el-form
+                    label-position="top"
+                    label-width="auto"
+                    :model="state.view.date.form"
+                    style="max-width: 600px"
+                  >
+                    <el-form-item label="标题字段">
+                      <el-select
+                        v-model="state.view.date.form.title"
+                        multiple
+                        placeholder="请选择标题字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                      <span slot="label">
+                        时间跨度
+                        <el-tooltip
+                          class="box-item"
+                          effect="dark"
+                          content="假如一个任务今天开始，明天结束。日历列表中用区间日期展示这一条信息。"
+                          placement="top"
+                        >
+                          <i class="fa fa-question-circle-o"></i>
+                        </el-tooltip>
+                      </span>
+                      <el-select
+                        v-model="state.view.date.form.startTime"
+                        clearable
+                        placeholder="请选择开始时间"
+                      >
+                        <template #prefix>从</template>
+                        <el-option
+                          v-for="item in timeKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                      <el-select
+                        v-model="state.view.date.form.endTime"
+                        clearable
+                        placeholder="请选择结束时间"
+                        style="margin-top: 10px"
+                      >
+                        <template #prefix>至</template>
+                        <el-option
+                          v-for="item in timeKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="默认展示">
+                      <el-select
+                        v-model="state.view.date.form.dayType"
+                        clearable
+                        placeholder="请选择展示方式"
+                      >
+                        <el-option label="月" :value="1" />
+                        <el-option label="周" :value="2" />
+                        <el-option label="日" :value="3" />
+                      </el-select>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-collapse-item>
+
+              <el-collapse-item
+                title="Consistency"
+                name="time"
+                :class="state.view.time.status ? 'isTrueItem' : ''"
+                :disabled="!state.view.time.status"
+              >
+                <template #title>
+                  <div class="collapse-title">
+                    <div>
+                      <i class="fa fa-clock-o"></i>
+                      <el-text>时间轴</el-text>
+                    </div>
+                    <el-switch
+                      class="openOfClose"
+                      v-model="state.view.time.status"
+                      @click.stop="showCollapse"
+                    />
+                  </div>
+                </template>
+                <div>
+                  <el-form
+                    label-position="top"
+                    label-width="auto"
+                    :model="state.view.time.form"
+                    style="max-width: 600px"
+                  >
+                    <el-form-item label="标题字段">
+                      <el-select
+                        v-model="state.view.time.form.title"
+                        multiple
+                        placeholder="请选择标题字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="时间轴字段">
+                      <el-select
+                        v-model="state.view.time.form.sortWord"
+                        placeholder="请选择时间轴段"
+                      >
+                        <el-option
+                          v-for="item in timeKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序方式">
+                      <el-radio-group v-model="state.view.time.form.sort">
+                        <el-radio :label="1">降序</el-radio>
+                        <el-radio :label="2">升序</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-collapse-item>
+
+              <el-collapse-item
+                title="Consistency"
+                name="gantt"
+                :class="state.view.gantt.status ? 'isTrueItem' : ''"
+                :disabled="!state.view.gantt.status"
+              >
+                <template #title>
+                  <div class="collapse-title">
+                    <div>
+                      <i class="fa fa-bar-chart fa-rotate-0"></i>
+                      <el-text>甘特图</el-text>
+                    </div>
+                    <el-switch
+                      class="openOfClose"
+                      v-model="state.view.gantt.status"
+                      @click.stop="showCollapse"
+                    />
+                  </div>
+                </template>
+                <div>
+                  <el-form
+                    label-position="top"
+                    label-width="auto"
+                    :model="state.view.gantt.form"
+                    style="max-width: 600px"
+                  >
+                    <el-form-item label="标题字段">
+                      <el-select
+                        v-model="state.view.gantt.form.title"
+                        multiple
+                        placeholder="请选择标题字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="时间设置">
+                      <el-select
+                        v-model="state.view.gantt.form.startTime"
+                        clearable
+                        placeholder="请选择开始时间"
+                      >
+                        <template #prefix>开始时间</template>
+                        <el-option
+                          v-for="item in timeKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                      <el-select
+                        v-model="state.view.gantt.form.endTime"
+                        clearable
+                        placeholder="请选择结束时间"
+                        style="margin-top: 10px"
+                      >
+                        <template #prefix>结束时间</template>
+                        <el-option
+                          v-for="item in timeKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="默认时间刻度">
+                      <el-select
+                        v-model="state.view.gantt.form.dayType"
+                        clearable
+                        placeholder="请选择展示方式"
+                      >
+                        <el-option label="时" :value="1" />
+                        <el-option label="日" :value="2" />
+                        <el-option label="周" :value="3" />
+                        <el-option label="月" :value="4" />
+                        <el-option label="季" :value="5" />
+                        <el-option label="年" :value="6" />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序字段">
+                      <el-select
+                        v-model="state.view.gantt.form.sortWord"
+                        placeholder="请选择时间轴段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序方式">
+                      <el-radio-group v-model="state.view.gantt.form.sort">
+                        <el-radio :label="1">降序</el-radio>
+                        <el-radio :label="2">升序</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-collapse-item>
+
+              <el-collapse-item
+                title="Consistency"
+                name="map"
+                :class="state.view.map.status ? 'isTrueItem' : ''"
+                :disabled="!state.view.map.status"
+              >
+                <template #title>
+                  <div class="collapse-title">
+                    <div>
+                      <i class="fa fa-map-signs"></i>
+                      <el-text>地图视图</el-text>
+                    </div>
+                    <el-switch
+                      class="openOfClose"
+                      v-model="state.view.map.status"
+                      :disabled="isMapTrue"
+                      @click.stop="showCollapse"
+                    />
+                  </div>
+                </template>
+                <div>
+                  <el-form
+                    label-position="top"
+                    label-width="auto"
+                    :model="state.view.map.form"
+                    style="max-width: 600px"
+                  >
+                    <el-form-item label="标题字段">
+                      <el-select
+                        v-model="state.view.map.form.title"
+                        multiple
+                        placeholder="请选择标题字段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="位置字段">
+                      <el-select
+                        v-model="state.view.map.form.mapWord"
+                        placeholder="请选择位置字段"
+                      >
+                        <el-option
+                          v-for="item in mapKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序字段">
+                      <el-select
+                        v-model="state.view.map.form.sortWord"
+                        placeholder="请选择时间轴段"
+                      >
+                        <el-option
+                          v-for="item in allKeyWords"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="排序方式">
+                      <el-radio-group v-model="state.view.map.form.sort">
+                        <el-radio :label="1">降序</el-radio>
+                        <el-radio :label="2">升序</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+          <el-divider content-position="left">功能按钮</el-divider>
+          <el-table
+            ref="tableAttrBut"
+            :data="tableButtonList"
+            border
+            style="width: 100%"
+            @selection-change="tableAttrButClick"
+          >
+            <el-table-column fixed type="selection" width="40" align="center" />
+            <el-table-column prop="label" label="字段" />
+          </el-table>
+          <el-divider content-position="left">基本功能设置</el-divider>
+          <el-form
+            :model="state.config"
+            label-width="auto"
+            style="width: 96%; margin-left: 2%"
+          >
+            <el-form-item label="每页显示数据得数量">
+              <el-input-number
+                v-model="state.config.pageSize"
+                class="mx-4"
+                :min="1"
+                :max="10000"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="数据添加编辑打开方式">
+              <el-select
+                v-model="state.config.openPageMode"
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="itemOpt in diaOrDrawer"
+                  :key="itemOpt.value"
+                  :label="itemOpt.label"
+                  :value="itemOpt.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="可折叠查询表单">
+              <el-switch
+                v-model="state.config.searchFormIsShow"
+                :active-action-icon="View"
+                :inactive-action-icon="Hide"
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+              />
+            </el-form-item>
+          </el-form>
+          <el-divider content-position="left">数据处理事件</el-divider>
+          <el-form
+            :model="state.formApi"
+            label-width="auto"
+            style="width: 96%; margin-left: 2%"
+          >
+            <el-form-item label="数据处理方式">
+              <el-switch
+                v-model="state.formApi.type"
+                active-text="默认"
+                inactive-text="第三方API"
+                active-value="1"
+                inactive-value="2"
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff"
+              />
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="填加APIUrl">
+              <el-input v-model="state.formApi.addApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="编辑APIUrl">
+              <el-input v-model="state.formApi.editApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="删除APIUrl">
+              <el-input v-model="state.formApi.delApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="查看APIUrl">
+              <el-input v-model="state.formApi.lookApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <!-- {{props.formKey}}
 			<br>
 			{{props.formVersion}}
 			<br>
 			{{formTableField}} -->
-		</div>  
-
-
-		<ace-drawer
-			v-model="drawer.visible"
-			:title="drawer.title"
-			:direction="drawer.direction"
-			:content="drawer.content"
-			:code-type="drawer.codeType"
-			@before-close="drawerBeforeClose"
-			@confirm="dialogConfirm"
-		/>
-		<FieldSetUp v-model:is-open="setUpFieldIsOpen" :setup-field-info="setUpFieldInfo" />
-		<ControlSetup v-model:is-show="listButtonIsShow" v-model:contbutary:="state.tableData.operateBtn" @updata-log-but="updataLogBut" />
-		<CodePage  v-model:is-show="codeIsShow" :list-data="state" />
-
-		<el-drawer
-			v-model="state.previewVisible"
-			title="列表预览"
-			direction="btt"
-			:before-close="handlePreviewClose"
-			size="90%"
-		>
-			<ak-page-list
-				:data="state.tableData"
-				:search-data="state.searchData"
-				:config="state.config"
-				:viewPage="stateList.view"
-				v-if="state.previewVisible"
-			/>
-
-		</el-drawer>
-	</div>
+    </div>
+
+    <ace-drawer
+      v-model="drawer.visible"
+      :title="drawer.title"
+      :direction="drawer.direction"
+      :content="drawer.content"
+      :code-type="drawer.codeType"
+      @before-close="drawerBeforeClose"
+      @confirm="dialogConfirm"
+    />
+    <FieldSetUp v-model:is-open="setUpFieldIsOpen" :setup-field-info="setUpFieldInfo" />
+    <ControlSetup
+      v-model:is-show="listButtonIsShow"
+      v-model:contbutary:="state.tableData.operateBtn"
+      @updata-log-but="updataLogBut"
+    />
+    <CodePage v-model:is-show="codeIsShow" :list-data="state" />
+
+    <el-drawer
+      v-model="state.previewVisible"
+      title="列表预览"
+      direction="btt"
+      :before-close="handlePreviewClose"
+      size="90%"
+    >
+      <ak-page-list
+        :data="state.tableData"
+        :search-data="state.searchData"
+        :config="state.config"
+        :viewPage="stateList.view"
+        v-if="state.previewVisible"
+      />
+    </el-drawer>
+  </div>
 </template>
-<style  lang='scss' scoped>
-.design-containers{
-	display: flex;
-    background-color: #FFFFFF;
-	margin: 0;
-	.components-list{
-		width: 200px;
-		padding:  0;
-		overflow-y: auto;
-		height: calc(100vh - 40px);
-		position: relative;
-		overflow-x: hidden;
-		border-right: 1px solid #e0e0e0;
-	}
-}
-.form_tabs  > .el-tabs__content{
-	padding: 0;
-}
-.table_box{
-	background: #fff;
-    border: 1px dashed #999;
-    margin: 10px;
-    height: calc(100vh - 100px);
+<style lang="scss" scoped>
+.design-containers {
+  display: flex;
+  background-color: #ffffff;
+  margin: 0;
+  .components-list {
+    width: 200px;
+    padding: 0;
     overflow-y: auto;
-    overflow-x: hidden;
+    height: calc(100vh - 40px);
     position: relative;
-	.table-tip{
-		color: #999;
-		padding: 30px 0;
-		line-height: 22px;
-	}
-	.operateButArea{
-		width: 100%;
-		display: flex;
-		align-items: center;
-  		justify-content: space-between;
-		margin-top:15px;
-		.operatLeft{
-			padding-bottom: 2px;
-		}
-	}
+    overflow-x: hidden;
+    border-right: 1px solid #e0e0e0;
+  }
+}
+.form_tabs > .el-tabs__content {
+  padding: 0;
 }
-.main_table{
-	padding: 10px 20px;
-	
+.table_box {
+  background: #fff;
+  border: 1px dashed #999;
+  margin: 10px;
+  height: calc(100vh - 100px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  .table-tip {
+    color: #999;
+    padding: 30px 0;
+    line-height: 22px;
+  }
+  .operateButArea {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 15px;
+    .operatLeft {
+      padding-bottom: 2px;
+    }
+  }
 }
-.cell{
-		min-width:120px;
-	}
-.field_close{
-	i{
-		display: none;
-		cursor: pointer;
-	}
-	
+.main_table {
+  padding: 10px 20px;
 }
-.field_close:hover{
-	i{
-		display: inline;
-		cursor: pointer;
-	}
-	
+.cell {
+  min-width: 120px;
 }
-.tipBox{
-	border: 1px dotted #ddd;
-    padding: 3px 5px;
-    border-radius: 5px;
-    color: #999;
-    text-align: center;
+.field_close {
+  i {
+    display: none;
+    cursor: pointer;
+  }
+}
+.field_close:hover {
+  i {
+    display: inline;
     cursor: pointer;
+  }
 }
-.demo_collapse{
-	padding: 0 10px;
+.tipBox {
+  border: 1px dotted #ddd;
+  padding: 3px 5px;
+  border-radius: 5px;
+  color: #999;
+  text-align: center;
+  cursor: pointer;
+}
+.demo_collapse {
+  padding: 0 10px;
 
-	:deep .el-collapse{
-		border: 0px;
-		
-	}
-	:deep .el-collapse-item__header {
-		padding-left:5px;
-		border: 1px solid #eeeeee;
-		border-radius:10px;
-		
-	}
-	:deep .el-collapse-item{
-		border-radius: 10px 10px;
-		background-color: rgb(245, 247, 250) !important;
-		margin-bottom: 10px;
-		.el-collapse-item__wrap{
-			background-color: rgb(245, 247, 250) !important;
-		}
-		
-		.collapse-title{
-			i{
-				padding:0 5px 0 0;
-			}
-		}
-		.openOfClose{
-			margin:9px 9px 0 0;
-		}
+  :deep .el-collapse {
+    border: 0px;
+  }
+  :deep .el-collapse-item__header {
+    padding-left: 5px;
+    border: 1px solid #eeeeee;
+    border-radius: 10px;
+  }
+  :deep .el-collapse-item {
+    border-radius: 10px 10px;
+    background-color: rgb(245, 247, 250) !important;
+    margin-bottom: 10px;
+    .el-collapse-item__wrap {
+      background-color: rgb(245, 247, 250) !important;
+    }
 
-		
+    .collapse-title {
+      i {
+        padding: 0 5px 0 0;
+      }
+    }
+    .openOfClose {
+      margin: 9px 9px 0 0;
+    }
+  }
+  :deep .el-collapse-item:last-child {
+    margin-bottom: 0;
+  }
 
+  :deep .el-collapse-item__content {
+    padding-left: 10px;
+    padding-bottom: 0px;
+    padding-top: 10px;
+  }
 
-	}
-	:deep .el-collapse-item:last-child{
-		margin-bottom:0;
-	}
-	
-	:deep .el-collapse-item__content {
-		
-		padding-left: 10px;
-		padding-bottom:0px;
-		padding-top: 10px;
-	}
+  :deep .collapse-title {
+    flex: 1 0 90%;
+    order: 1;
+    display: flex;
+    justify-content: space-between;
 
-	:deep .collapse-title {
-		flex: 1 0 90%;
-		order: 1;
-		display: flex;
-		justify-content: space-between;
-		
-		.el-collapse-item__header {
-			flex: 1 0 auto;
-			order: -1;
-		}
-	}
+    .el-collapse-item__header {
+      flex: 1 0 auto;
+      order: -1;
+    }
+  }
 }
-.isTrueItem{
-	:deep .el-collapse-item__header{
-		color:#79bbff;
-		background-color: #c6e2ff;
-	}
-	.el-text{
-		color:#337ecc;
-	}	
+.isTrueItem {
+  :deep .el-collapse-item__header {
+    color: #79bbff;
+    background-color: #c6e2ff;
+  }
+  .el-text {
+    color: #337ecc;
+  }
 }
 </style>