From 1ea8b75a7e0a32493506528f270b57224618c44b Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Mon, 7 Apr 2025 08:46:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=97=E8=A1=A8=E5=AD=90?=
 =?UTF-8?q?=E8=A1=A8=E6=98=BE=E7=A4=BA=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DesignForm/tableListPage/formPageCont.vue | 1178 +++++++++--------
 .../DesignForm/tableListPage/index.vue        |    3 +-
 .../process/print/canvas-bg/CanvasBg.vue      |  200 ---
 .../process/print/canvas-bg/CanvasSlider.vue  |  148 ---
 .../print/canvas-bg/CanvasThumbnail.vue       |  193 ---
 .../process/print/canvas-bg/data/keyCode.ts   |   41 -
 .../process/print/canvas-bg/drawRuler.ts      |   98 --
 7 files changed, 630 insertions(+), 1231 deletions(-)
 delete mode 100644 src/views/process/print/canvas-bg/CanvasBg.vue
 delete mode 100644 src/views/process/print/canvas-bg/CanvasSlider.vue
 delete mode 100644 src/views/process/print/canvas-bg/CanvasThumbnail.vue
 delete mode 100644 src/views/process/print/canvas-bg/data/keyCode.ts
 delete mode 100644 src/views/process/print/canvas-bg/drawRuler.ts

diff --git a/src/components/DesignForm/tableListPage/formPageCont.vue b/src/components/DesignForm/tableListPage/formPageCont.vue
index b0d8656..ac4d7a4 100644
--- a/src/components/DesignForm/tableListPage/formPageCont.vue
+++ b/src/components/DesignForm/tableListPage/formPageCont.vue
@@ -3,203 +3,196 @@
 @ 时间: 2024-04-03 13:39:16
 @ 备注: 列表内容展示
 -->
-<script lang='ts' setup>
-import { submitButton, afreshSubmitButton,editFormCont,draftSubmitButton,editLookFormCont } from "@/utils/workflow/const";
-import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
-import { gainTaskFormInfo,generateFlow,gainEditDataLog,draftsInitiateApproval,afreshRunWorkflow } from '@/api/taskapi/management'
-import { Close } from '@element-plus/icons-vue'
-import { judgeSubmitCancel,startRunFlow,getFieldRecord } from '@/api/DesignForm/requestapi'
-import { submitButtonEs } from '@/api/DesignForm/tableButton'
+<script lang="ts" setup>
 import {
-  constFormBtnEvent,
-  constFormProps
-} from '@/api/DesignForm/utils'
-
-import RunFlowStep from '@/views/taskplatform/taskmanagement/runFlowStep.vue'
+  submitButton,
+  afreshSubmitButton,
+  editFormCont,
+  draftSubmitButton,
+  editLookFormCont,
+} from "@/utils/workflow/const";
+import {
+  json2string,
+  objToStringify,
+  string2json,
+  stringToObj,
+} from "@/utils/DesignForm/form";
+import {
+  gainTaskFormInfo,
+  generateFlow,
+  gainEditDataLog,
+  draftsInitiateApproval,
+  afreshRunWorkflow,
+} from "@/api/taskapi/management";
+import { Close } from "@element-plus/icons-vue";
+import {
+  judgeSubmitCancel,
+  startRunFlow,
+  getFieldRecord,
+} from "@/api/DesignForm/requestapi";
+import { submitButtonEs } from "@/api/DesignForm/tableButton";
+import { constFormBtnEvent, constFormProps } from "@/api/DesignForm/utils";
+
+import RunFlowStep from "@/views/taskplatform/taskmanagement/runFlowStep.vue";
 import { customerFormVersionCont } from "@/api/taskapi/types";
 import { stringify } from "uuid";
 
-
 const props = defineProps({
-	isShow:{
-		type:Boolean,
-		default:false,
-	},
-	drawerWith:{
-		type:Number,
-		default:0
-	},
-	tablePageClass:{
-		type:Number,
-		default:1
-	},
-	operState:{
-		type:Number,
-		default:1
-	},
-	pageInfo:{
-		type:Object,
-		default(){
-			return {}
-		}
-	}
+  isShow: {
+    type: Boolean,
+    default: false,
+  },
+  drawerWith: {
+    type: Number,
+    default: 0,
+  },
+  tablePageClass: {
+    type: Number,
+    default: 1,
+  },
+  operState: {
+    type: Number,
+    default: 1,
+  },
+  pageInfo: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
 });
 const formEl = ref<any>();
-const emits = defineEmits(["update:isShow","getPageData","optionsValue4Get4"]);
+const emits = defineEmits(["update:isShow", "getPageData", "optionsValue4Get4"]);
 const formLoading = ref(false);
 const flowAry = ref<any[]>(); //流程列表
-const currentProgress  = ref<number>(1);  //当前步进值
-const runstep = ref(null)
+const currentProgress = ref<number>(1); //当前步进值
+const runstep = ref(null);
 //表单ID
-const openOfClose =  computed({
-	get() {
-		return props.isShow
-	},
-	set(val: boolean) {
-		emits('update:isShow', val)
-	}
+const openOfClose = computed({
+  get() {
+    return props.isShow;
+  },
+  set(val: boolean) {
+    emits("update:isShow", val);
+  },
 });
-const formProps = inject(constFormProps, {}) as any
+const formProps = inject(constFormProps, {}) as any;
 
-let getFieldRecordPromises: any[] = []
-let objMastesform: any
+let getFieldRecordPromises: any[] = [];
+let objMastesform: any;
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-03 14:09:24
 @ 功能: 监听状态变化处理数据
 */
-watch(()=>props.isShow,(val:bool)=>{
-	
-	if(val){
-		formLoading.value = true;
-		getCustomrrFormInfo();
-		Promise.all(gainTaskFormInfoPromise).then(() => {
-			//console.log(gainTaskFormInfoData)
-			if(gainTaskFormInfoData.structure&&gainTaskFormInfoData.tableData){
-
-				
-
-
-				objMastesform = stringToObj(gainTaskFormInfoData.structure.mastesform)
-				for (const element of objMastesform.list) {
-					if(element.type == "table"){
-						//console.log(element);
-						for (const item of element.list){
-							
-							if(item.options){
-								if(item.type=="radio"||item.type=="select"||item.type=="checkbox"){
-									console.log(item.config.optionsType);
-									if(item.config.optionsType==3){
-										let paramx:string = ""+item.control.optionsValue3Field
-										getFieldRecordPromises.push(getFieldRecord(paramx).then(({ data }) => {
-											//console.log(data)
-											item.options = data
-										}));
-									}
-								}
-								
-							}
-						}
-					}
-				}
-
-
-				Promise.all(getFieldRecordPromises).then(()=>{
-					//console.log(objMastesform)
-					
-					formState.formData = objMastesform
-					//console.log(formState.formData)
-					let stringObjMastesform = JSON.stringify(objMastesform);
-					//console.log(stringObjMastesform)
-					//console.log(gainTaskFormInfoData.structure.mastesformjson)
-					
-					formState.dict = string2json(gainTaskFormInfoData.structure.dict)
-
-
-
-
-					if(props.tablePageClass != 4){
-						judgeSubmitCancel({"name":stringObjMastesform})
-							.then((data:any) =>{
-								if(data.code == 0){
-									if (data.data == 3 || data.data == 4){
-										// formState.formData.list.push(submitButtonEs)
-										if(props.operState == 2){
-												formState.formData.list.push(afreshSubmitButton)
-										}else if(props.operState == 3){
-												formState.formData.list.push(editFormCont)
-										}else if(props.operState == 4){
-												formState.formData.list.push(draftSubmitButton)
-										}else if(props.operState == 5){
-											formState.formData.list.push(submitButtonEs)
-										}
-									}
-								}
-							})
-					}
-					nextTick(()=>{
-						// console.log("获取自定义表单内容-1111-->",data.tableData)
-						formEl.value.setValue(gainTaskFormInfoData.tableData)
-					}) 
-
-
-
-					
-				})
-				.finally(()=>{
-					formLoading.value = false;
-					//alert(props.pageInfo.masters_key)
-					gainEditDataLog({id:props.pageInfo.masters_key})
-					.then(({data})=>{
-						// console.log("获取修改记录-1111-->",data)
-						pageLog.value = data
-					});
-				});
-
-
-
-	
-
-
-
-
-
-
-
-
-
-			}
-		});
-
-
-
-		
-	}
-})
+watch(
+  () => props.isShow,
+  (val: bool) => {
+    if (val) {
+      formLoading.value = true;
+      getCustomrrFormInfo();
+      Promise.all(gainTaskFormInfoPromise).then(() => {
+        //console.log(gainTaskFormInfoData)
+        if (gainTaskFormInfoData.structure && gainTaskFormInfoData.tableData) {
+          objMastesform = stringToObj(gainTaskFormInfoData.structure.mastesform);
+          for (const element of objMastesform.list) {
+            if (element.type == "table") {
+              //console.log(element);
+              for (const item of element.list) {
+                if (item.options) {
+                  if (
+                    item.type == "radio" ||
+                    item.type == "select" ||
+                    item.type == "checkbox"
+                  ) {
+                    console.log(item.config.optionsType);
+                    if (item.config.optionsType == 3) {
+                      let paramx: string = "" + item.control.optionsValue3Field;
+                      getFieldRecordPromises.push(
+                        getFieldRecord(paramx).then(({ data }) => {
+                          //console.log(data)
+                          item.options = data;
+                        })
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          Promise.all(getFieldRecordPromises)
+            .then(() => {
+              //console.log(objMastesform)
+
+              formState.formData = objMastesform;
+              //console.log(formState.formData)
+              let stringObjMastesform = JSON.stringify(objMastesform);
+              //console.log(stringObjMastesform)
+              //console.log(gainTaskFormInfoData.structure.mastesformjson)
+
+              formState.dict = string2json(gainTaskFormInfoData.structure.dict);
+
+              if (props.tablePageClass != 4) {
+                judgeSubmitCancel({ name: stringObjMastesform }).then((data: any) => {
+                  if (data.code == 0) {
+                    if (data.data == 3 || data.data == 4) {
+                      // formState.formData.list.push(submitButtonEs)
+                      if (props.operState == 2) {
+                        formState.formData.list.push(afreshSubmitButton);
+                      } else if (props.operState == 3) {
+                        formState.formData.list.push(editFormCont);
+                      } else if (props.operState == 4) {
+                        formState.formData.list.push(draftSubmitButton);
+                      } else if (props.operState == 5) {
+                        formState.formData.list.push(submitButtonEs);
+                      }
+                    }
+                  }
+                });
+              }
+              nextTick(() => {
+                // console.log("获取自定义表单内容-1111-->",data.tableData)
+                formEl.value.setValue(gainTaskFormInfoData.tableData);
+              });
+            })
+            .finally(() => {
+              formLoading.value = false;
+              //alert(props.pageInfo.masters_key)
+              gainEditDataLog({ id: props.pageInfo.masters_key }).then(({ data }) => {
+                // console.log("获取修改记录-1111-->",data)
+                pageLog.value = data;
+              });
+            });
+        }
+      });
+    }
+  }
+);
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-03 14:25:15
 @ 功能: 关闭抽屉
 */
 const closeDrawer = () => {
-	emits('update:isShow', false)
-}
+  emits("update:isShow", false);
+};
 
 //表单相关内容
 const formState = reactive({
-    formData: {
-      list: [],
-      form: {},
-      config: {}
-    },
-    dict: {},
-    formId: props.pageInfo.id,
-    id: 1,
-    loading: true
-})
-const pageLog = ref<any[]>([])
-let gainTaskFormInfoData: customerFormVersionCont
-let gainTaskFormInfoPromise: any[] = []
+  formData: {
+    list: [],
+    form: {},
+    config: {},
+  },
+  dict: {},
+  formId: props.pageInfo.id,
+  id: 1,
+  loading: true,
+});
+const pageLog = ref<any[]>([]);
+let gainTaskFormInfoData: customerFormVersionCont;
+let gainTaskFormInfoPromise: any[] = [];
 
 /**
 @ 作者: 秦东
@@ -207,10 +200,11 @@ let gainTaskFormInfoPromise: any[] = []
 @ 功能: 获取自定义表单内容
 */
 const getCustomrrFormInfo = () => {
-	gainTaskFormInfoPromise.push(gainTaskFormInfo({id:props.pageInfo.masters_key})
-		.then(({data})=>{
-			gainTaskFormInfoData = data
-			/* // console.log("获取自定义表单内容",data,data.structure)
+  gainTaskFormInfoPromise.push(
+    gainTaskFormInfo({ id: props.pageInfo.masters_key })
+      .then(({ data }) => {
+        gainTaskFormInfoData = data;
+        /* // console.log("获取自定义表单内容",data,data.structure)
 			formState.formData = stringToObj(data.structure.mastesform)
 			// console.log("获取自定义表单内容--->",formState)
 			formState.dict = string2json(data.structure.dict)
@@ -240,411 +234,495 @@ const getCustomrrFormInfo = () => {
 				// console.log("获取自定义表单内容-1111-->",data.tableData)
 				formEl.value.setValue(data.tableData)
 			}) */
-		})
-		.finally(()=>{
-			/* formLoading.value = false;
+      })
+      .finally(() => {
+        /* formLoading.value = false;
 			//alert(props.pageInfo.masters_key)
 			gainEditDataLog({id:props.pageInfo.masters_key})
 			.then(({data})=>{
 				// console.log("获取修改记录-1111-->",data)
 				pageLog.value = data
 			}); */
-		}));
-}
+      })
+  );
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-07 10:55:34
 @ 功能: 表单动作回调
 */
 const afterSubmit = (type: string) => {
-	// console.log("表单提交成功")
-	if (type === 'success') {
-		// router.go(-1)
-		// console.log("表单提交成功")
-		emits("getPageData");
-		closeDrawer();
-		
-	}
-}
+  // console.log("表单提交成功")
+  if (type === "success") {
+    // router.go(-1)
+    // console.log("表单提交成功")
+    emits("getPageData");
+    closeDrawer();
+  }
+};
 const closeAppSubmit = () => {
-	closeDrawer()
-}
+  closeDrawer();
+};
 //流程执行
 const drawerBeforeClose = () => {
-	// console.log("监听打开关闭",false)
-	// emits("getmytodolist")
-	// emits("update:isshow", false);
-}
+  // console.log("监听打开关闭",false)
+  // emits("getmytodolist")
+  // emits("update:isshow", false);
+};
 //提交审批
-const sendDraftSubmit = (type: string,val?:any) => {
-	// console.log("提交审批",type,val)
-	// emits("getmytodolist")
-	if (type === 'success') {
-		if(props.pageInfo.flowIsOpen == 1){
-			let sendInfo ={
-				id:val.data.runFlowId,
-				flowList:flowAry.value,
-				state:3
-			}
-			// console.log("草稿提交审批--1-<",sendInfo)
-			draftsInitiateApproval(sendInfo)
-				.then((data:any) =>{
-					// console.log("草稿提交审批---<",sendInfo,data)
-					if(data.code == 0){
-						ElMessage.success(data.msg || '提交成功！')
-						if(runstep.value){
-							runstep.value.gainRunFlowTask()
-						}
-						emits("getPageData");
-						closeDrawer()
-					}
-				})
-		}
-	}
-}
+const sendDraftSubmit = (type: string, val?: any) => {
+  // console.log("提交审批",type,val)
+  // emits("getmytodolist")
+  if (type === "success") {
+    if (props.pageInfo.flowIsOpen == 1) {
+      let sendInfo = {
+        id: val.data.runFlowId,
+        flowList: flowAry.value,
+        state: 3,
+      };
+      // console.log("草稿提交审批--1-<",sendInfo)
+      draftsInitiateApproval(sendInfo).then((data: any) => {
+        // console.log("草稿提交审批---<",sendInfo,data)
+        if (data.code == 0) {
+          ElMessage.success(data.msg || "提交成功！");
+          if (runstep.value) {
+            runstep.value.gainRunFlowTask();
+          }
+          emits("getPageData");
+          closeDrawer();
+        }
+      });
+    }
+  }
+};
 //保存草稿箱(带流程)
-const saveEditFormInfo  = (type: string,val?:any) => {
-	// console.log("草稿提交审批--1-<",type,val)
-	if(type == "success"){
-		runstep.value.gainRunFlowTask()
-		emits("getPageData");
-		closeDrawer()
-	}
-}
+const saveEditFormInfo = (type: string, val?: any) => {
+  // console.log("草稿提交审批--1-<",type,val)
+  if (type == "success") {
+    runstep.value.gainRunFlowTask();
+    emits("getPageData");
+    closeDrawer();
+  }
+};
 
 //重新提交审核
-const anewSubmit = (type: string,val?:any) => {
-	// console.log("重新提交数据-11--<",type,val)
-	if(type == "success"){
-		afreshRunWorkflow({id:val.data.runFlowId})
-			.then((data:any) => {
-				// console.log("重新提交数据---<",data,runstep.value)
-				runstep.value.gainRunFlowTask()
-			})
-			.finally(() => {
-				emits("getPageData");
-				closeDrawer()
-			})
-	}
-}
+const anewSubmit = (type: string, val?: any) => {
+  // console.log("重新提交数据-11--<",type,val)
+  if (type == "success") {
+    afreshRunWorkflow({ id: val.data.runFlowId })
+      .then((data: any) => {
+        // console.log("重新提交数据---<",data,runstep.value)
+        runstep.value.gainRunFlowTask();
+      })
+      .finally(() => {
+        emits("getPageData");
+        closeDrawer();
+      });
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-11 11:35:24
 @ 功能: 申请修改
 */
 //修改完毕
-const submitEdit = (type: string,val?:any) => {
-	// console("修改完毕----->",type,val)
-	if(type == "success"){
-		runstep.value.gainRunFlowTask()
-		emits("getPageData");
-		closeDrawer()
-	}
-}
+const submitEdit = (type: string, val?: any) => {
+  // console("修改完毕----->",type,val)
+  if (type == "success") {
+    runstep.value.gainRunFlowTask();
+    emits("getPageData");
+    closeDrawer();
+  }
+};
 const jsuanKuandu = () => {
-	if(props.pageInfo.flowIsOpen==1){
-		return 900 + 350
-	}else{
-		return 900
-	}
-	
-}
-
-
-function optionsValue3Get3(data:any,fieldName:any){
-	//console.log("formPageCont","optionsValue3Get3")
-	emits('optionsValue4Get4',data,fieldName)
+  if (props.pageInfo.flowIsOpen == 1) {
+    return 900 + 350;
+  } else {
+    return 900;
+  }
+};
+
+function optionsValue3Get3(data: any, fieldName: any) {
+  //console.log("formPageCont","optionsValue3Get3")
+  emits("optionsValue4Get4", data, fieldName);
 }
-
-
 </script>
 <template>
-	
-	<el-drawer
-		v-model="openOfClose"
-		title="查看表单内容"
-		:size="jsuanKuandu()"
-		:with-header="false" 
-		:close-on-click-modal="false" 
-		:close-on-press-escape="false" 
-		:destroy-on-close="true"
-	>
-		<div v-if="props.pageInfo.flowIsOpen==1" class="common-layout">
-		
-			<el-container>
-				<el-main>
-				
-					<ak-form
-						ref="formEl"
-						v-loading="formLoading" element-loading-text="Loading..."
-						:form-data="formState.formData"
-						:type="props.tablePageClass"
-						:dict="formState.dict"
-						request-url="getFormContent"
-						add-url="saveFormContent"
-						edit-url="editFormContent"
-						:before-submit="beforeSubmit"
-						:close-app-submit="closeDrawer"
-						:change-key-val="changeKeyVal"
-						:anew-submit = "anewSubmit"
-						:save-edit-form-info="saveEditFormInfo"
-						:send-draft-submit= "sendDraftSubmit"
-						:after-submit="afterSubmit"
-						:submit-edit="submitEdit"
-					/>
-					<el-divider  v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
-					<el-timeline style="width: 100%">
-						<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
-							<el-card>
-								<el-descriptions  border>
-									<el-descriptions-item v-for="(mastItem,mastIndex) in item.masterdata" :key="mastItem.label" :label="mastItem.label">
-										{{mastItem.label}}
-									</el-descriptions-item>
-								</el-descriptions>
-								<el-tabs v-if="item.sunList" type="border-card" style="margin-top:20px;">
-									<el-tab-pane v-for="(sonItem,sonIndex) in item.sunList" :label="sonIndex" :key="sonIndex">
-										<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border>
-											<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" :label="sonKey">	{{sonCentor}}
-											</el-descriptions-item>
-										</el-descriptions>
-									</el-tab-pane>
-								</el-tabs>
-								<table style="margin-top:20px;">
-										<tr>
-											<td class="biankuang" width="100">修改说明：</td>
-											<td class="biankuang">{{item.explicate}}</td>
-										</tr>
-									</table>
-							</el-card>
-						</el-timeline-item>
-					</el-timeline>
-				</el-main>
-				<el-aside width="350px" class="flowBox">
-					<el-header height="30px">
-						<div class="workFlowHead">
-							<el-text>审批流程</el-text>
-							<el-icon @click="closeDrawer"><Close /></el-icon>
-						</div>
-					</el-header>
-					<el-scrollbar class="scorllbarBox">
-			
-						<RunFlowStep ref="runstep" v-model:flowary="flowAry" :flow-key="props.pageInfo.runFlowId" :current-progress="currentProgress"  @updatelist="drawerBeforeClose" />
-					</el-scrollbar>
-				</el-aside>
-				
-			</el-container>
-		</div>
-		<div v-else class="common-layout">
-			<el-header height="30px">
-				<el-icon @click="closeDrawer"><Close /></el-icon>
-			</el-header>
-			<ak-form
-				ref="formEl"
-				v-loading="formLoading" element-loading-text="Loading..."
-				:form-data="formState.formData"
-				:type="props.tablePageClass"
-				:dict="formState.dict"
-				request-url="getFormContent"
-				add-url="saveFormContent"
-				edit-url="editFormContent"
-				:before-submit="beforeSubmit"
-				:close-app-submit="closeDrawer"
-				:change-key-val="changeKeyVal"
-				:anew-submit = "anewSubmit"
-				:after-submit="afterSubmit"
-				:save-edit-form-info="saveEditFormInfo"
-				:send-draft-submit= "sendDraftSubmit"
-				:submit-edit="submitEdit"
-				@optionsValue3Get3 = "optionsValue3Get3"
-			/>
-			<el-divider v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
-			<el-timeline style="width: 100%">
-				<el-timeline-item v-for="(item,index) in pageLog" :key="index" :timestamp="item.time+' 操作人：'+item.creater" placement="top">
-					<el-card >
-						<el-tabs>
-							<el-tab-pane label="主要信息">
-								<el-descriptions  border :column="1">
-									<el-descriptions-item v-for="(mastItem,mastIndex) in item.masterdata" :key="mastIndex" label-align="right"  width="150px" >
-										<template #label>
-											<div style="width: 100px;">
-												{{mastItem.label}}
-											</div>
-										</template>
-										
-										
-										<div v-if="mastItem.types=='lowcodeImage'">
-											<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
-										</div>
-										<div v-if="mastItem.types=='lowcodeCarsusel'">
-											<el-carousel :interval="5000" type="card" height="200px">
-												<el-carousel-item v-for="item in mastItem.value" :key="item.imgId">
-													<el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill" />
-												</el-carousel-item>
-											</el-carousel>
-										</div>
-										<div v-else-if="mastItem.types=='signaturemap'">
-											<el-image style="width: 200px; height: 150px" :src="mastItem.value" fit="cover" />
-										</div>
-										<div v-else-if="mastItem.types=='colorPicker'">
-											<div :style="'width: 30px; height: 30px; background-color: '+mastItem.value" ></div>
-										</div>
-										<div v-else-if="mastItem.types=='switch'">
-											<el-switch
-												v-model="mastItem.value"
-												class="ml-2"
-												:active-value="1"
-												:inactive-value="2"
-												disabled
-											/>
-										</div>
-										<div v-else-if="mastItem.types=='rate'">
-											<el-rate v-model="mastItem.value" disabled />
-										</div>
-										<div v-else-if="mastItem.types=='slider'" style="max-width: 300px;">
-											<el-slider v-model="mastItem.value" disabled />
-										</div>
-										<div v-else-if="mastItem.types=='videoUpAndPlay'">
-
-											<el-carousel :interval="5000" arrow="always" height="250px">
-												<el-carousel-item v-for="item in mastItem.value" :key="item.id">
-													<video  
-														:src="item.url"
-														style="width: 100%; height: 250px"
-														controls
-														>
-													</video>
-												</el-carousel-item>
-											</el-carousel>
-											
-											
-										</div>
-										<div v-else-if="mastItem.types=='upload'">
-											<div v-if="mastItem.auxiliary=='picture-card'">
-												<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
-											</div>
-											<div v-else-if="mastItem.auxiliary=='picture'">
-												<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
-											</div>
-											<div v-else v-html="mastItem.value"></div>
-										</div>
-										<div v-else-if="mastItem.types=='baidumap'">
-											<BaiduMapLook :address="mastItem.value" />
-										</div>
-										<div v-else v-html="mastItem.value"></div>
-									</el-descriptions-item>
-								</el-descriptions>
-							</el-tab-pane>
-						</el-tabs>
-						<el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
-							<el-tab-pane v-for="(sonItem,sonIndex) in item.sunData" :label="sonIndex" :key="sonIndex">
-							
-								<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border>
-									<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" width="150px" >	
-										<template #label>
-											<div style="width: 100px;">
-												{{sonCentor.label}}
-											</div>
-										</template>
-
-										<div v-if="sonCentor.types=='lowcodeImage'">
-											<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
-										</div>
-										<div v-if="sonCentor.types=='lowcodeCarsusel'">
-											<el-carousel :interval="5000" type="card" height="200px">
-												<el-carousel-item v-for="item in sonCentor.value" :key="item.imgId">
-													<el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill" />
-												</el-carousel-item>
-											</el-carousel>
-										</div>
-										<div v-else-if="sonCentor.types=='signaturemap'">
-											<el-image style="width: 200px; height: 150px" :src="sonCentor.value" fit="cover" />
-										</div>
-										<div v-else-if="sonCentor.types=='colorPicker'">
-											<div :style="'width: 30px; height: 30px; background-color: '+sonCentor.value" ></div>
-										</div>
-										<div v-else-if="sonCentor.types=='rate'">
-											<el-rate v-model="sonCentor.value" disabled />
-										</div>
-										<div v-else-if="sonCentor.types=='slider'" style="max-width: 300px;">
-											<el-slider v-model="sonCentor.value" disabled />
-										</div>
-										<div v-else-if="sonCentor.types=='videoUpAndPlay'">
-
-											<el-carousel :interval="5000" arrow="always" height="250px">
-												<el-carousel-item v-for="item in sonCentor.value" :key="item.id">
-													<video  
-														:src="item.url"
-														style="width: 100%; height: 250px"
-														controls
-														>
-													</video>
-												</el-carousel-item>
-											</el-carousel>
-											
-											
-										</div>
-										<div v-else-if="sonCentor.types=='upload'">
-											<div v-if="sonCentor.auxiliary=='picture-card'">
-												<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
-											</div>
-											<div v-else-if="sonCentor.auxiliary=='picture'">
-												<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
-											</div>
-											<div v-else v-html="sonCentor.value"></div>
-										</div>
-										<div v-else-if="sonCentor.types=='baidumap'">
-											<BaiduMapLook :address="sonCentor.value" />
-										</div>
-										<div v-else v-html="sonCentor.value"></div>
-
-
-
-
-
-									</el-descriptions-item>
-								</el-descriptions>
-							</el-tab-pane>
-						</el-tabs>
-					</el-card>
-				</el-timeline-item>
-			</el-timeline>
-		</div>
-	</el-drawer>
+  <el-drawer
+    v-model="openOfClose"
+    title="查看表单内容"
+    :size="jsuanKuandu()"
+    :with-header="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <div v-if="props.pageInfo.flowIsOpens == 1" class="common-layout">
+      <el-container>
+        <el-main>
+          <ak-form
+            ref="formEl"
+            v-loading="formLoading"
+            element-loading-text="Loading..."
+            :form-data="formState.formData"
+            :type="props.tablePageClass"
+            :dict="formState.dict"
+            request-url="getFormContent"
+            add-url="saveFormContent"
+            edit-url="editFormContent"
+            :before-submit="beforeSubmit"
+            :close-app-submit="closeDrawer"
+            :change-key-val="changeKeyVal"
+            :anew-submit="anewSubmit"
+            :save-edit-form-info="saveEditFormInfo"
+            :send-draft-submit="sendDraftSubmit"
+            :after-submit="afterSubmit"
+            :submit-edit="submitEdit"
+          />
+          <el-divider v-if="pageLog && pageLog.length > 0" content-position="left"
+            >历史记录</el-divider
+          >
+          <el-timeline style="width: 100%">
+            <el-timeline-item
+              v-for="(item, index) in pageLog"
+              :key="index"
+              :timestamp="item.time + ' 操作人：' + item.creater"
+              placement="top"
+            >
+              <el-card>
+                <el-descriptions border>
+                  <el-descriptions-item
+                    v-for="(mastItem, mastIndex) in item.masterdata"
+                    :key="mastItem.label"
+                    :label="mastItem.label"
+                  >
+                    {{ mastItem.label }}
+                  </el-descriptions-item>
+                </el-descriptions>
+                <el-tabs v-if="item.sunList" type="border-card" style="margin-top: 20px">
+                  <el-tab-pane
+                    v-for="(sonItem, sonIndex) in item.sunList"
+                    :label="sonIndex"
+                    :key="sonIndex"
+                  >
+                    <el-descriptions
+                      v-for="(sonVal, sonIndex) in sonItem"
+                      :key="sonIndex"
+                      border
+                    >
+                      <el-descriptions-item
+                        v-for="(sonCentor, sonKey) in sonVal"
+                        :key="sonKey"
+                        :label="sonKey"
+                      >
+                        {{ sonCentor }}
+                      </el-descriptions-item>
+                    </el-descriptions>
+                  </el-tab-pane>
+                </el-tabs>
+                <table style="margin-top: 20px">
+                  <tr>
+                    <td class="biankuang" width="100">修改说明：</td>
+                    <td class="biankuang">{{ item.explicate }}</td>
+                  </tr>
+                </table>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </el-main>
+        <el-aside width="350px" class="flowBox">
+          <el-header height="30px">
+            <div class="workFlowHead">
+              <el-text>审批流程</el-text>
+              <el-icon @click="closeDrawer"><Close /></el-icon>
+            </div>
+          </el-header>
+          <el-scrollbar class="scorllbarBox">
+            <RunFlowStep
+              ref="runstep"
+              v-model:flowary="flowAry"
+              :flow-key="props.pageInfo.runFlowId"
+              :current-progress="currentProgress"
+              @updatelist="drawerBeforeClose"
+            />
+          </el-scrollbar>
+        </el-aside>
+      </el-container>
+    </div>
+    <div v-else class="common-layout">
+      <el-header height="30px">
+        <el-icon @click="closeDrawer"><Close /></el-icon>
+      </el-header>
+      <ak-form
+        ref="formEl"
+        v-loading="formLoading"
+        element-loading-text="Loading..."
+        :form-data="formState.formData"
+        :type="props.tablePageClass"
+        :dict="formState.dict"
+        request-url="getFormContent"
+        add-url="saveFormContent"
+        edit-url="editFormContent"
+        :before-submit="beforeSubmit"
+        :close-app-submit="closeDrawer"
+        :change-key-val="changeKeyVal"
+        :anew-submit="anewSubmit"
+        :after-submit="afterSubmit"
+        :save-edit-form-info="saveEditFormInfo"
+        :send-draft-submit="sendDraftSubmit"
+        :submit-edit="submitEdit"
+        @optionsValue3Get3="optionsValue3Get3"
+      />
+      <el-divider v-if="pageLog && pageLog.length > 0" content-position="left"
+        >历史记录</el-divider
+      >
+      <el-timeline style="width: 100%">
+        <el-timeline-item
+          v-for="(item, index) in pageLog"
+          :key="index"
+          :timestamp="item.time + ' 操作人：' + item.creater"
+          placement="top"
+        >
+          <el-card>
+            <el-tabs>
+              <el-tab-pane label="主要信息">
+                <el-descriptions border :column="1">
+                  <el-descriptions-item
+                    v-for="(mastItem, mastIndex) in item.masterdata"
+                    :key="mastIndex"
+                    label-align="right"
+                    width="150px"
+                  >
+                    <template #label>
+                      <div style="width: 100px">
+                        {{ mastItem.label }}
+                      </div>
+                    </template>
+
+                    <div v-if="mastItem.types == 'lowcodeImage'">
+                      <el-image
+                        style="width: 100px; height: 100px"
+                        :src="mastItem.value"
+                        fit="cover"
+                      />
+                    </div>
+                    <div v-if="mastItem.types == 'lowcodeCarsusel'">
+                      <el-carousel :interval="5000" type="card" height="200px">
+                        <el-carousel-item
+                          v-for="item in mastItem.value"
+                          :key="item.imgId"
+                        >
+                          <el-image
+                            style="width: 100%; height: 100%"
+                            :src="item.imgUrl"
+                            fit="fill"
+                          />
+                        </el-carousel-item>
+                      </el-carousel>
+                    </div>
+                    <div v-else-if="mastItem.types == 'signaturemap'">
+                      <el-image
+                        style="width: 200px; height: 150px"
+                        :src="mastItem.value"
+                        fit="cover"
+                      />
+                    </div>
+                    <div v-else-if="mastItem.types == 'colorPicker'">
+                      <div
+                        :style="
+                          'width: 30px; height: 30px; background-color: ' + mastItem.value
+                        "
+                      ></div>
+                    </div>
+                    <div v-else-if="mastItem.types == 'switch'">
+                      <el-switch
+                        v-model="mastItem.value"
+                        class="ml-2"
+                        :active-value="1"
+                        :inactive-value="2"
+                        disabled
+                      />
+                    </div>
+                    <div v-else-if="mastItem.types == 'rate'">
+                      <el-rate v-model="mastItem.value" disabled />
+                    </div>
+                    <div v-else-if="mastItem.types == 'slider'" style="max-width: 300px">
+                      <el-slider v-model="mastItem.value" disabled />
+                    </div>
+                    <div v-else-if="mastItem.types == 'videoUpAndPlay'">
+                      <el-carousel :interval="5000" arrow="always" height="250px">
+                        <el-carousel-item v-for="item in mastItem.value" :key="item.id">
+                          <video
+                            :src="item.url"
+                            style="width: 100%; height: 250px"
+                            controls
+                          ></video>
+                        </el-carousel-item>
+                      </el-carousel>
+                    </div>
+                    <div v-else-if="mastItem.types == 'upload'">
+                      <div v-if="mastItem.auxiliary == 'picture-card'">
+                        <el-image
+                          style="width: 100px; height: 100px"
+                          :src="mastItem.value"
+                          fit="cover"
+                        />
+                      </div>
+                      <div v-else-if="mastItem.auxiliary == 'picture'">
+                        <el-image
+                          style="width: 100px; height: 100px"
+                          :src="mastItem.value"
+                          fit="cover"
+                        />
+                      </div>
+                      <div v-else v-html="mastItem.value"></div>
+                    </div>
+                    <div v-else-if="mastItem.types == 'baidumap'">
+                      <BaiduMapLook :address="mastItem.value" />
+                    </div>
+                    <div v-else v-html="mastItem.value"></div>
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-tab-pane>
+            </el-tabs>
+            <el-tabs v-if="item.sunData" type="border-card" style="margin-top: 20px">
+              <el-tab-pane
+                v-for="(sonItem, sonIndex) in item.sunData"
+                :label="sonIndex"
+                :key="sonIndex"
+              >
+                <el-descriptions
+                  v-for="(sonVal, sonIndex) in sonItem"
+                  :key="sonIndex"
+                  border
+                >
+                  <el-descriptions-item
+                    v-for="(sonCentor, sonKey) in sonVal"
+                    :key="sonKey"
+                    width="150px"
+                  >
+                    <template #label>
+                      <div style="width: 100px">
+                        {{ sonCentor.label }}
+                      </div>
+                    </template>
+
+                    <div v-if="sonCentor.types == 'lowcodeImage'">
+                      <el-image
+                        style="width: 100px; height: 100px"
+                        :src="sonCentor.value"
+                        fit="cover"
+                      />
+                    </div>
+                    <div v-if="sonCentor.types == 'lowcodeCarsusel'">
+                      <el-carousel :interval="5000" type="card" height="200px">
+                        <el-carousel-item
+                          v-for="item in sonCentor.value"
+                          :key="item.imgId"
+                        >
+                          <el-image
+                            style="width: 100%; height: 100%"
+                            :src="item.imgUrl"
+                            fit="fill"
+                          />
+                        </el-carousel-item>
+                      </el-carousel>
+                    </div>
+                    <div v-else-if="sonCentor.types == 'signaturemap'">
+                      <el-image
+                        style="width: 200px; height: 150px"
+                        :src="sonCentor.value"
+                        fit="cover"
+                      />
+                    </div>
+                    <div v-else-if="sonCentor.types == 'colorPicker'">
+                      <div
+                        :style="
+                          'width: 30px; height: 30px; background-color: ' +
+                          sonCentor.value
+                        "
+                      ></div>
+                    </div>
+                    <div v-else-if="sonCentor.types == 'rate'">
+                      <el-rate v-model="sonCentor.value" disabled />
+                    </div>
+                    <div v-else-if="sonCentor.types == 'slider'" style="max-width: 300px">
+                      <el-slider v-model="sonCentor.value" disabled />
+                    </div>
+                    <div v-else-if="sonCentor.types == 'videoUpAndPlay'">
+                      <el-carousel :interval="5000" arrow="always" height="250px">
+                        <el-carousel-item v-for="item in sonCentor.value" :key="item.id">
+                          <video
+                            :src="item.url"
+                            style="width: 100%; height: 250px"
+                            controls
+                          ></video>
+                        </el-carousel-item>
+                      </el-carousel>
+                    </div>
+                    <div v-else-if="sonCentor.types == 'upload'">
+                      <div v-if="sonCentor.auxiliary == 'picture-card'">
+                        <el-image
+                          style="width: 100px; height: 100px"
+                          :src="sonCentor.value"
+                          fit="cover"
+                        />
+                      </div>
+                      <div v-else-if="sonCentor.auxiliary == 'picture'">
+                        <el-image
+                          style="width: 100px; height: 100px"
+                          :src="sonCentor.value"
+                          fit="cover"
+                        />
+                      </div>
+                      <div v-else v-html="sonCentor.value"></div>
+                    </div>
+                    <div v-else-if="sonCentor.types == 'baidumap'">
+                      <BaiduMapLook :address="sonCentor.value" />
+                    </div>
+                    <div v-else v-html="sonCentor.value"></div>
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-tab-pane>
+            </el-tabs>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </el-drawer>
 </template>
-<style  lang='scss' scoped>
-.common-layout{
-	height: 100vh;
-	padding: 0 15px;
-	.el-main{
-		height: 100vh;
-		padding:0;
-	}
-	.flowBox{
-		height: 100vh;
-		border-left: 1px solid #ccc;
-		.scorllbarBox{
-			height: calc(100vh - 35px)
-		}
-		.workFlowHead{
-			display: flex;
-			align-items: center;
-  			justify-content: space-between;
-		}
-	}
-	.el-header{
-		padding:0 10px;
-		line-height:30px;
-		text-align:right;
-		font-size:20px;
-		i{
-			cursor:pointer;
-		}
-	}
-	
+<style lang="scss" scoped>
+.common-layout {
+  height: 100vh;
+  padding: 0 15px;
+  .el-main {
+    height: 100vh;
+    padding: 0;
+  }
+  .flowBox {
+    height: 100vh;
+    border-left: 1px solid #ccc;
+    .scorllbarBox {
+      height: calc(100vh - 35px);
+    }
+    .workFlowHead {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+  .el-header {
+    padding: 0 10px;
+    line-height: 30px;
+    text-align: right;
+    font-size: 20px;
+    i {
+      cursor: pointer;
+    }
+  }
 }
-.biankuang{
-	border: 1px solid #D4D7DE;
-	padding:10px 10px;
-	
+.biankuang {
+  border: 1px solid #d4d7de;
+  padding: 10px 10px;
 }
 </style>
diff --git a/src/components/DesignForm/tableListPage/index.vue b/src/components/DesignForm/tableListPage/index.vue
index 73db294..4f42b1b 100644
--- a/src/components/DesignForm/tableListPage/index.vue
+++ b/src/components/DesignForm/tableListPage/index.vue
@@ -1944,7 +1944,8 @@ const readerColumnSun = (column: any) => {
               :label="item.label"
               :width="readerColumnSun(item.children)"
             >
-              <template #default="scope">
+              <template #default="scope"
+                >{{ data.tableProps }}
                 <el-table
                   v-if="item.pattern == 'table'"
                   v-bind="data.tableProps"
diff --git a/src/views/process/print/canvas-bg/CanvasBg.vue b/src/views/process/print/canvas-bg/CanvasBg.vue
deleted file mode 100644
index 27d4dac..0000000
--- a/src/views/process/print/canvas-bg/CanvasBg.vue
+++ /dev/null
@@ -1,200 +0,0 @@
-<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
deleted file mode 100644
index 1e8aae6..0000000
--- a/src/views/process/print/canvas-bg/CanvasSlider.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<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
deleted file mode 100644
index f3fcc5b..0000000
--- a/src/views/process/print/canvas-bg/CanvasThumbnail.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<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
deleted file mode 100644
index a8ee423..0000000
--- a/src/views/process/print/canvas-bg/data/keyCode.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-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
deleted file mode 100644
index 717b068..0000000
--- a/src/views/process/print/canvas-bg/drawRuler.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * 画标尺刻度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();
-  }
-}