修改列表子表显示内容

src/components/DesignForm/tableListPage/formPageCont.vue

@@ -3,203 +3,196 @@
 @ 时间: 2024-04-03 13:39:16
 @ 备注: 列表内容展示
 -->
-<script lang='ts' setup>
+<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'
 import {
-  constFormBtnEvent,
+  submitButton,
-  constFormProps
+  afreshSubmitButton,
-} from '@/api/DesignForm/utils'
+  editFormCont,
-
+  draftSubmitButton,
-import RunFlowStep from '@/views/taskplatform/taskmanagement/runFlowStep.vue'
+  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:{
+  isShow: {
-		type:Boolean,
+    type: Boolean,
-		default:false,
+    default: false,
   },
-	drawerWith:{
+  drawerWith: {
-		type:Number,
+    type: Number,
-		default:0
+    default: 0,
   },
-	tablePageClass:{
+  tablePageClass: {
-		type:Number,
+    type: Number,
-		default:1
+    default: 1,
+  },
+  operState: {
+    type: Number,
+    default: 1,
+  },
+  pageInfo: {
+    type: Object,
+    default() {
+      return {};
     },
-	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 runstep = ref(null);
 //表单ID
 const openOfClose = computed({
   get() {
-		return props.isShow
+    return props.isShow;
   },
   set(val: boolean) {
-		emits('update:isShow', val)
+    emits("update:isShow", val);
-	}
+  },
 });
-const formProps = inject(constFormProps, {}) as any
+const formProps = inject(constFormProps, {}) as any;
 
-let getFieldRecordPromises: any[] = []
+let getFieldRecordPromises: any[] = [];
-let objMastesform: any
+let objMastesform: any;
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-03 14:09:24
 @ 功能: 监听状态变化处理数据
 */
-watch(()=>props.isShow,(val:bool)=>{
+watch(
-	
+  () => props.isShow,
-	if(val){
+  (val: bool) => {
+    if (val) {
       formLoading.value = true;
       getCustomrrFormInfo();
       Promise.all(gainTaskFormInfoPromise).then(() => {
         //console.log(gainTaskFormInfoData)
-			if(gainTaskFormInfoData.structure&&gainTaskFormInfoData.tableData){
+        if (gainTaskFormInfoData.structure && gainTaskFormInfoData.tableData) {
-
+          objMastesform = stringToObj(gainTaskFormInfoData.structure.mastesform);
-				
-
-
-				objMastesform = stringToObj(gainTaskFormInfoData.structure.mastesform)
           for (const element of objMastesform.list) {
-					if(element.type == "table"){
+            if (element.type == "table") {
               //console.log(element);
-						for (const item of element.list){
+              for (const item of element.list) {
-							
+                if (item.options) {
-							if(item.options){
+                  if (
-								if(item.type=="radio"||item.type=="select"||item.type=="checkbox"){
+                    item.type == "radio" ||
+                    item.type == "select" ||
+                    item.type == "checkbox"
+                  ) {
                     console.log(item.config.optionsType);
-									if(item.config.optionsType==3){
+                    if (item.config.optionsType == 3) {
-										let paramx:string = ""+item.control.optionsValue3Field
+                      let paramx: string = "" + item.control.optionsValue3Field;
-										getFieldRecordPromises.push(getFieldRecord(paramx).then(({ data }) => {
+                      getFieldRecordPromises.push(
+                        getFieldRecord(paramx).then(({ data }) => {
                           //console.log(data)
-											item.options = data
+                          item.options = data;
-										}));
+                        })
+                      );
                     }
                   }
-								
                 }
               }
             }
           }
 
-
+          Promise.all(getFieldRecordPromises)
-				Promise.all(getFieldRecordPromises).then(()=>{
+            .then(() => {
               //console.log(objMastesform)
 
-					formState.formData = 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)
+              formState.dict = string2json(gainTaskFormInfoData.structure.dict);
-
-
 
-
+              if (props.tablePageClass != 4) {
-					if(props.tablePageClass != 4){
+                judgeSubmitCancel({ name: stringObjMastesform }).then((data: any) => {
-						judgeSubmitCancel({"name":stringObjMastesform})
+                  if (data.code == 0) {
-							.then((data:any) =>{
+                    if (data.data == 3 || data.data == 4) {
-								if(data.code == 0){
-									if (data.data == 3 || data.data == 4){
                       // formState.formData.list.push(submitButtonEs)
-										if(props.operState == 2){
+                      if (props.operState == 2) {
-												formState.formData.list.push(afreshSubmitButton)
+                        formState.formData.list.push(afreshSubmitButton);
-										}else if(props.operState == 3){
+                      } else if (props.operState == 3) {
-												formState.formData.list.push(editFormCont)
+                        formState.formData.list.push(editFormCont);
-										}else if(props.operState == 4){
+                      } else if (props.operState == 4) {
-												formState.formData.list.push(draftSubmitButton)
+                        formState.formData.list.push(draftSubmitButton);
-										}else if(props.operState == 5){
+                      } else if (props.operState == 5) {
-											formState.formData.list.push(submitButtonEs)
+                        formState.formData.list.push(submitButtonEs);
                       }
                     }
                   }
-							})
+                });
               }
-					nextTick(()=>{
+              nextTick(() => {
                 // console.log("获取自定义表单内容-1111-->",data.tableData)
-						formEl.value.setValue(gainTaskFormInfoData.tableData)
+                formEl.value.setValue(gainTaskFormInfoData.tableData);
-					}) 
+              });
-
-
-
-					
             })
-				.finally(()=>{
+            .finally(() => {
               formLoading.value = false;
               //alert(props.pageInfo.masters_key)
-					gainEditDataLog({id:props.pageInfo.masters_key})
+              gainEditDataLog({ id: props.pageInfo.masters_key }).then(({ data }) => {
-					.then(({data})=>{
                 // console.log("获取修改记录-1111-->",data)
-						pageLog.value = 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: {}
+    config: {},
   },
   dict: {},
   formId: props.pageInfo.id,
   id: 1,
-    loading: true
+  loading: true,
-})
+});
-const pageLog = ref<any[]>([])
+const pageLog = ref<any[]>([]);
-let gainTaskFormInfoData: customerFormVersionCont
+let gainTaskFormInfoData: customerFormVersionCont;
-let gainTaskFormInfoPromise: any[] = []
+let gainTaskFormInfoPromise: any[] = [];
 
 /**
 @ 作者: 秦东
@@ -207,9 +200,10 @@ let gainTaskFormInfoPromise: any[] = []
 @ 功能: 获取自定义表单内容
 */
 const getCustomrrFormInfo = () => {
-	gainTaskFormInfoPromise.push(gainTaskFormInfo({id:props.pageInfo.masters_key})
+  gainTaskFormInfoPromise.push(
-		.then(({data})=>{
+    gainTaskFormInfo({ id: props.pageInfo.masters_key })
-			gainTaskFormInfoData = data
+      .then(({ data }) => {
+        gainTaskFormInfoData = data;
         /* // console.log("获取自定义表单内容",data,data.structure)
 			formState.formData = stringToObj(data.structure.mastesform)
 			// console.log("获取自定义表单内容--->",formState)
@@ -241,7 +235,7 @@ const getCustomrrFormInfo = () => {
 				formEl.value.setValue(data.tableData)
 			}) */
       })
-		.finally(()=>{
+      .finally(() => {
         /* formLoading.value = false;
 			//alert(props.pageInfo.masters_key)
 			gainEditDataLog({id:props.pageInfo.masters_key})
@@ -249,8 +243,9 @@ const getCustomrrFormInfo = () => {
 				// console.log("获取修改记录-1111-->",data)
 				pageLog.value = data
 			}); */
-		}));
+      })
-}
+  );
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-07 10:55:34
@@ -258,108 +253,101 @@ const getCustomrrFormInfo = () => {
 */
 const afterSubmit = (type: string) => {
   // console.log("表单提交成功")
-	if (type === 'success') {
+  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);
-}
+};
 //提交审批
-const sendDraftSubmit = (type: string,val?:any) => {
+const sendDraftSubmit = (type: string, val?: any) => {
   // console.log("提交审批",type,val)
   // emits("getmytodolist")
-	if (type === 'success') {
+  if (type === "success") {
-		if(props.pageInfo.flowIsOpen == 1){
+    if (props.pageInfo.flowIsOpen == 1) {
-			let sendInfo ={
+      let sendInfo = {
-				id:val.data.runFlowId,
+        id: val.data.runFlowId,
-				flowList:flowAry.value,
+        flowList: flowAry.value,
-				state:3
+        state: 3,
-			}
+      };
       // console.log("草稿提交审批--1-<",sendInfo)
-			draftsInitiateApproval(sendInfo)
+      draftsInitiateApproval(sendInfo).then((data: any) => {
-				.then((data:any) =>{
         // console.log("草稿提交审批---<",sendInfo,data)
-					if(data.code == 0){
+        if (data.code == 0) {
-						ElMessage.success(data.msg || '提交成功！')
+          ElMessage.success(data.msg || "提交成功！");
-						if(runstep.value){
+          if (runstep.value) {
-							runstep.value.gainRunFlowTask()
+            runstep.value.gainRunFlowTask();
           }
           emits("getPageData");
-						closeDrawer()
+          closeDrawer();
         }
-				})
+      });
     }
   }
-}
+};
 //保存草稿箱(带流程)
-const saveEditFormInfo  = (type: string,val?:any) => {
+const saveEditFormInfo = (type: string, val?: any) => {
   // console.log("草稿提交审批--1-<",type,val)
-	if(type == "success"){
+  if (type == "success") {
-		runstep.value.gainRunFlowTask()
+    runstep.value.gainRunFlowTask();
     emits("getPageData");
-		closeDrawer()
+    closeDrawer();
   }
-}
+};
 
 //重新提交审核
-const anewSubmit = (type: string,val?:any) => {
+const anewSubmit = (type: string, val?: any) => {
   // console.log("重新提交数据-11--<",type,val)
-	if(type == "success"){
+  if (type == "success") {
-		afreshRunWorkflow({id:val.data.runFlowId})
+    afreshRunWorkflow({ id: val.data.runFlowId })
-			.then((data:any) => {
+      .then((data: any) => {
         // console.log("重新提交数据---<",data,runstep.value)
-				runstep.value.gainRunFlowTask()
+        runstep.value.gainRunFlowTask();
       })
       .finally(() => {
         emits("getPageData");
-				closeDrawer()
+        closeDrawer();
-			})
+      });
   }
-}
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-04-11 11:35:24
 @ 功能: 申请修改
 */
 //修改完毕
-const submitEdit = (type: string,val?:any) => {
+const submitEdit = (type: string, val?: any) => {
   // console("修改完毕----->",type,val)
-	if(type == "success"){
+  if (type == "success") {
-		runstep.value.gainRunFlowTask()
+    runstep.value.gainRunFlowTask();
     emits("getPageData");
-		closeDrawer()
+    closeDrawer();
   }
-}
+};
 const jsuanKuandu = () => {
-	if(props.pageInfo.flowIsOpen==1){
+  if (props.pageInfo.flowIsOpen == 1) {
-		return 900 + 350
+    return 900 + 350;
-	}else{
+  } else {
-		return 900
+    return 900;
   }
+};
 
-}
+function optionsValue3Get3(data: any, fieldName: any) {
-
-
-function optionsValue3Get3(data:any,fieldName:any){
   //console.log("formPageCont","optionsValue3Get3")
-	emits('optionsValue4Get4',data,fieldName)
+  emits("optionsValue4Get4", data, fieldName);
 }
-
-
 </script>
 <template>
-	
   <el-drawer
     v-model="openOfClose"
     title="查看表单内容"
@@ -369,14 +357,13 @@ function optionsValue3Get3(data:any,fieldName:any){
     :close-on-press-escape="false"
     :destroy-on-close="true"
   >
-		<div v-if="props.pageInfo.flowIsOpen==1" class="common-layout">
+    <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..."
+            v-loading="formLoading"
+            element-loading-text="Loading..."
             :form-data="formState.formData"
             :type="props.tablePageClass"
             :dict="formState.dict"
@@ -386,33 +373,57 @@ function optionsValue3Get3(data:any,fieldName:any){
             :before-submit="beforeSubmit"
             :close-app-submit="closeDrawer"
             :change-key-val="changeKeyVal"
-						:anew-submit = "anewSubmit"
+            :anew-submit="anewSubmit"
             :save-edit-form-info="saveEditFormInfo"
-						:send-draft-submit= "sendDraftSubmit"
+            :send-draft-submit="sendDraftSubmit"
             :after-submit="afterSubmit"
             :submit-edit="submitEdit"
           />
-					<el-divider  v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
+          <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-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">
+                  <el-descriptions-item
-										{{mastItem.label}}
+                    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-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-tab-pane
-										<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border>
+                    v-for="(sonItem, sonIndex) in item.sunList"
-											<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" :label="sonKey">	{{sonCentor}}
+                    :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;">
+                <table style="margin-top: 20px">
                   <tr>
                     <td class="biankuang" width="100">修改说明：</td>
-											<td class="biankuang">{{item.explicate}}</td>
+                    <td class="biankuang">{{ item.explicate }}</td>
                   </tr>
                 </table>
               </el-card>
@@ -427,11 +438,15 @@ function optionsValue3Get3(data:any,fieldName:any){
             </div>
           </el-header>
           <el-scrollbar class="scorllbarBox">
-			
+            <RunFlowStep
-						<RunFlowStep ref="runstep" v-model:flowary="flowAry" :flow-key="props.pageInfo.runFlowId" :current-progress="currentProgress"  @updatelist="drawerBeforeClose" />
+              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">
@@ -440,7 +455,8 @@ function optionsValue3Get3(data:any,fieldName:any){
       </el-header>
       <ak-form
         ref="formEl"
-				v-loading="formLoading" element-loading-text="Loading..."
+        v-loading="formLoading"
+        element-loading-text="Loading..."
         :form-data="formState.formData"
         :type="props.tablePageClass"
         :dict="formState.dict"
@@ -450,45 +466,75 @@ function optionsValue3Get3(data:any,fieldName:any){
         :before-submit="beforeSubmit"
         :close-app-submit="closeDrawer"
         :change-key-val="changeKeyVal"
-				:anew-submit = "anewSubmit"
+        :anew-submit="anewSubmit"
         :after-submit="afterSubmit"
         :save-edit-form-info="saveEditFormInfo"
-				:send-draft-submit= "sendDraftSubmit"
+        :send-draft-submit="sendDraftSubmit"
         :submit-edit="submitEdit"
-				@optionsValue3Get3 = "optionsValue3Get3"
+        @optionsValue3Get3="optionsValue3Get3"
       />
-			<el-divider v-if="pageLog&&pageLog.length > 0" content-position="left">历史记录</el-divider>
+      <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-timeline-item
-					<el-card >
+          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" >
+                  <el-descriptions-item
+                    v-for="(mastItem, mastIndex) in item.masterdata"
+                    :key="mastIndex"
+                    label-align="right"
+                    width="150px"
+                  >
                     <template #label>
-											<div style="width: 100px;">
+                      <div style="width: 100px">
-												{{mastItem.label}}
+                        {{ mastItem.label }}
                       </div>
                     </template>
 
-										
+                    <div v-if="mastItem.types == 'lowcodeImage'">
-										<div v-if="mastItem.types=='lowcodeImage'">
+                      <el-image
-											<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
+                        style="width: 100px; height: 100px"
+                        :src="mastItem.value"
+                        fit="cover"
+                      />
                     </div>
-										<div v-if="mastItem.types=='lowcodeCarsusel'">
+                    <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-carousel-item
-													<el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill" />
+                          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'">
+                    <div v-else-if="mastItem.types == 'signaturemap'">
-											<el-image style="width: 200px; height: 150px" :src="mastItem.value" fit="cover" />
+                      <el-image
+                        style="width: 200px; height: 150px"
+                        :src="mastItem.value"
+                        fit="cover"
+                      />
                     </div>
-										<div v-else-if="mastItem.types=='colorPicker'">
+                    <div v-else-if="mastItem.types == 'colorPicker'">
-											<div :style="'width: 30px; height: 30px; background-color: '+mastItem.value" ></div>
+                      <div
+                        :style="
+                          'width: 30px; height: 30px; background-color: ' + mastItem.value
+                        "
+                      ></div>
                     </div>
-										<div v-else-if="mastItem.types=='switch'">
+                    <div v-else-if="mastItem.types == 'switch'">
                       <el-switch
                         v-model="mastItem.value"
                         class="ml-2"
@@ -497,37 +543,41 @@ function optionsValue3Get3(data:any,fieldName:any){
                         disabled
                       />
                     </div>
-										<div v-else-if="mastItem.types=='rate'">
+                    <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;">
+                    <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'">
+                    <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>
-													</video>
                         </el-carousel-item>
                       </el-carousel>
-											
-											
                     </div>
-										<div v-else-if="mastItem.types=='upload'">
+                    <div v-else-if="mastItem.types == 'upload'">
-											<div v-if="mastItem.auxiliary=='picture-card'">
+                      <div v-if="mastItem.auxiliary == 'picture-card'">
-												<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
+                        <el-image
+                          style="width: 100px; height: 100px"
+                          :src="mastItem.value"
+                          fit="cover"
+                        />
                       </div>
-											<div v-else-if="mastItem.auxiliary=='picture'">
+                      <div v-else-if="mastItem.auxiliary == 'picture'">
-												<el-image style="width: 100px; height: 100px" :src="mastItem.value" fit="cover" />
+                        <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'">
+                    <div v-else-if="mastItem.types == 'baidumap'">
                       <BaiduMapLook :address="mastItem.value" />
                     </div>
                     <div v-else v-html="mastItem.value"></div>
@@ -535,72 +585,102 @@ function optionsValue3Get3(data:any,fieldName:any){
                 </el-descriptions>
               </el-tab-pane>
             </el-tabs>
-						<el-tabs v-if="item.sunData" type="border-card" style="margin-top:20px;">
+            <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-tab-pane
-							
+                v-for="(sonItem, sonIndex) in item.sunData"
-								<el-descriptions v-for="(sonVal,sonIndex) in sonItem" :key="sonIndex" border>
+                :label="sonIndex"
-									<el-descriptions-item v-for="(sonCentor,sonKey) in sonVal" :key="sonKey" width="150px" >	
+                :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;">
+                      <div style="width: 100px">
-												{{sonCentor.label}}
+                        {{ sonCentor.label }}
                       </div>
                     </template>
 
-										<div v-if="sonCentor.types=='lowcodeImage'">
+                    <div v-if="sonCentor.types == 'lowcodeImage'">
-											<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
+                      <el-image
+                        style="width: 100px; height: 100px"
+                        :src="sonCentor.value"
+                        fit="cover"
+                      />
                     </div>
-										<div v-if="sonCentor.types=='lowcodeCarsusel'">
+                    <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-carousel-item
-													<el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill" />
+                          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'">
+                    <div v-else-if="sonCentor.types == 'signaturemap'">
-											<el-image style="width: 200px; height: 150px" :src="sonCentor.value" fit="cover" />
+                      <el-image
+                        style="width: 200px; height: 150px"
+                        :src="sonCentor.value"
+                        fit="cover"
+                      />
                     </div>
-										<div v-else-if="sonCentor.types=='colorPicker'">
+                    <div v-else-if="sonCentor.types == 'colorPicker'">
-											<div :style="'width: 30px; height: 30px; background-color: '+sonCentor.value" ></div>
+                      <div
+                        :style="
+                          'width: 30px; height: 30px; background-color: ' +
+                          sonCentor.value
+                        "
+                      ></div>
                     </div>
-										<div v-else-if="sonCentor.types=='rate'">
+                    <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;">
+                    <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'">
+                    <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>
-													</video>
                         </el-carousel-item>
                       </el-carousel>
-											
-											
                     </div>
-										<div v-else-if="sonCentor.types=='upload'">
+                    <div v-else-if="sonCentor.types == 'upload'">
-											<div v-if="sonCentor.auxiliary=='picture-card'">
+                      <div v-if="sonCentor.auxiliary == 'picture-card'">
-												<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
+                        <el-image
+                          style="width: 100px; height: 100px"
+                          :src="sonCentor.value"
+                          fit="cover"
+                        />
                       </div>
-											<div v-else-if="sonCentor.auxiliary=='picture'">
+                      <div v-else-if="sonCentor.auxiliary == 'picture'">
-												<el-image style="width: 100px; height: 100px" :src="sonCentor.value" fit="cover" />
+                        <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'">
+                    <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>
@@ -611,40 +691,38 @@ function optionsValue3Get3(data:any,fieldName:any){
     </div>
   </el-drawer>
 </template>
-<style  lang='scss' scoped>
+<style lang="scss" scoped>
-.common-layout{
+.common-layout {
   height: 100vh;
   padding: 0 15px;
-	.el-main{
+  .el-main {
     height: 100vh;
-		padding:0;
+    padding: 0;
   }
-	.flowBox{
+  .flowBox {
     height: 100vh;
     border-left: 1px solid #ccc;
-		.scorllbarBox{
+    .scorllbarBox {
-			height: calc(100vh - 35px)
+      height: calc(100vh - 35px);
     }
-		.workFlowHead{
+    .workFlowHead {
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
   }
-	.el-header{
+  .el-header {
-		padding:0 10px;
+    padding: 0 10px;
-		line-height:30px;
+    line-height: 30px;
-		text-align:right;
+    text-align: right;
-		font-size:20px;
+    font-size: 20px;
-		i{
+    i {
-			cursor:pointer;
+      cursor: pointer;
     }
   }
-	
 }
-.biankuang{
+.biankuang {
-	border: 1px solid #D4D7DE;
+  border: 1px solid #d4d7de;
-	padding:10px 10px;
+  padding: 10px 10px;
-	
 }
 </style>

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"

src/views/process/print/canvas-bg/CanvasBg.vue

@@ -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>

src/views/process/print/canvas-bg/CanvasSlider.vue

@@ -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>

src/views/process/print/canvas-bg/CanvasThumbnail.vue

@@ -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>

src/views/process/print/canvas-bg/data/keyCode.ts

@@ -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 '';
-// }

src/views/process/print/canvas-bg/drawRuler.ts

@@ -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();
-  }
-}