From 1da7823939f0fbc19b43c3e4c5cc705205e27b94 Mon Sep 17 00:00:00 2001
From: hreenshan112 <hreenshan112@noreply.gitcode.com>
Date: Tue, 3 Dec 2024 11:43:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../appPage/appPageForm/pageList.vue          | 3223 +++++++++--------
 1 file changed, 1730 insertions(+), 1493 deletions(-)

diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
index 07eeb01..d2f9981 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue
@@ -3,97 +3,114 @@
 @ 时间: 2024-05-07 15:09:21
 @ 备注: 表单列表
 -->
-<script lang='ts' setup>
-import { ElTable } from 'element-plus'
-import { Hide, View } from '@element-plus/icons-vue'
-import { attrButton,tableButton,tableButtonList,tableLogButtonList,tableAttrLogButtonList,diaOrDrawer } from '@/api/DesignForm/tableButton'
-
-import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
-import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index'
-import { gainFormTableField,editCustomerFormList,gainFormListCont,gainListTableField } from '@/api/DesignForm/requestapi'
-
-import { formTableField,formTabelStruct } from "@/api/DesignForm/type";
-
-import tempOtherUnit from '@/components/DesignForm/pageList/types'
-import { ElMessage } from 'element-plus'
-
-import Sortable from 'sortablejs'
+<script lang="ts" setup>
+import { ElTable } from "element-plus";
+import { Hide, View } from "@element-plus/icons-vue";
+import {
+  attrButton,
+  tableButton,
+  tableButtonList,
+  tableLogButtonList,
+  tableAttrLogButtonList,
+  diaOrDrawer,
+} from "@/api/DesignForm/tableButton";
+
+import {
+  json2string,
+  objToStringify,
+  string2json,
+  stringToObj,
+} from "@/utils/DesignForm/form";
+import { analysisForm, setFlowFormKeyPower } from "@/api/workflowapi/index";
+import {
+  gainFormTableField,
+  editCustomerFormList,
+  gainFormListCont,
+  gainListTableField,
+} from "@/api/DesignForm/requestapi";
+
+import { formTableField, formTabelStruct } from "@/api/DesignForm/type";
+
+import tempOtherUnit from "@/components/DesignForm/pageList/types";
+import { ElMessage } from "element-plus";
+
+import Sortable from "sortablejs";
 //引入子组件
-import PageListHeadTools from '@/views/sysworkflow/lowcodepage/pageListHeadToolsApp.vue'
-import ControlSetup  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue'
-import FieldSetUp  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/fieldSetUp.vue'
-import SearchField  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue'
-import PreviewPage  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue'
-import CodePage  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue'
+import PageListHeadTools from "@/views/sysworkflow/lowcodepage/pageListHeadToolsApp.vue";
+import ControlSetup from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue";
+import FieldSetUp from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/fieldSetUp.vue";
+import SearchField from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue";
+import PreviewPage from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue";
+import CodePage from "@/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue";
 
 const props = defineProps({
-	appCont:{
-		type:Object,
-		default(){
-			return {}
-		}
-	},
-	formKey:{
-		type:String,
-		default:""
-	},
-	groupKey:{
-		type:String,
-		default:""
-	},
-	menuId:{
-		type:String,
-		default:""
-	},
-	appPageKey:{
-		type:String,
-		default:""
-	},
-	formVersion:{
-		type:String,
-		default:""
-	},
-	state:{
-		type:Object,
-		default(){
-			return {}
-		}
-	}
+  appCont: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  formKey: {
+    type: String,
+    default: "",
+  },
+  groupKey: {
+    type: String,
+    default: "",
+  },
+  menuId: {
+    type: String,
+    default: "",
+  },
+  appPageKey: {
+    type: String,
+    default: "",
+  },
+  formVersion: {
+    type: String,
+    default: "",
+  },
+  state: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
 });
 
-const formTableActive = ref(1)		//字段属性
+const formTableActive = ref(1); //字段属性
 const zhuDaunIsTrue = ref(false);
-const listButtonIsShow = ref(false)
-const formTableField = reactive<formTableField>({})
-const container = ref()
+const listButtonIsShow = ref(false);
+const formTableField = reactive<formTableField>({});
+const container = ref();
 const drawer = reactive({
-    visible: false,
-    title: '',
-    direction: 'ltr',
-    content: '',
-    codeType: ''
-})
-const setUpFieldIsOpen= ref(false)
-const setUpFieldInfo = ref<tableButton>()
-const codeIsShow = ref(false)	//生成代码
-const tableFieldList = ref<InstanceType<typeof ElTable>>()
-const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>()
-const tableAttrBut = ref<InstanceType<typeof ElTable>>()
+  visible: false,
+  title: "",
+  direction: "ltr",
+  content: "",
+  codeType: "",
+});
+const setUpFieldIsOpen = ref(false);
+const setUpFieldInfo = ref<tableButton>();
+const codeIsShow = ref(false); //生成代码
+const tableFieldList = ref<InstanceType<typeof ElTable>>();
+const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>();
+const tableAttrBut = ref<InstanceType<typeof ElTable>>();
 const emits = defineEmits<{
-    (e: 'update:state', val: formStruct): void
-	(e: 'update:formKey', val: string): void
-	(e: 'update:formVersion', val: string): void
-	(e: 'judgeFlowIsEdit', val: boolean): void
-	(e: 'runNextWindows', val: number): void
-	(e: 'closeFormPage'): void
-}>()
-const statePro =  computed({
-	get() {
-		return props.state
-	},
-	set(val: formStruct) {
-		emits('update:state', val)
-	}
+  (e: "update:state", val: formStruct): void;
+  (e: "update:formKey", val: string): void;
+  (e: "update:formVersion", val: string): void;
+  (e: "judgeFlowIsEdit", val: boolean): void;
+  (e: "runNextWindows", val: number): void;
+  (e: "closeFormPage"): void;
+}>();
+const statePro = computed({
+  get() {
+    return props.state;
+  },
+  set(val: formStruct) {
+    emits("update:state", val);
+  },
 });
 /**
 @ 作者: 秦东
@@ -101,677 +118,673 @@ const statePro =  computed({
 @ 功能: 自定义列表结构
 */
 const state = reactive({
-    tableData: {
-      // tableProps: {}, //表格所有参数
-      columns: [],
-      config: {},
-	  controlBtn:[],
-	  operateBtn:[]
+  tableData: {
+    // tableProps: {}, //表格所有参数
+    columns: [],
+    config: {},
+    controlBtn: [],
+    operateBtn: [],
+  },
+  searchData: [],
+  loading: false,
+  attrObj: {},
+  config: {
+    pageSize: 10,
+    searchIsShow: true,
+    searchFormIsShow: true,
+    openPageMode: "drawer",
+  },
+  tagList: {},
+  formId: props.appPageKey.toString() || "",
+  formList: [], // 所有可选表单数据源
+  name: "",
+  treeData: {}, // 左侧树相关
+  previewVisible: false,
+  tabsName: "second",
+  formFieldList: [], // 表单数据源所有可选字段
+  formApi: {
+    type: "1",
+    addApiUrl: "",
+    editApiUrl: "",
+    delApiUrl: "",
+    lookApiUrl: "",
+  },
+  dict: {},
+  refreshTable: true,
+  view: {
+    list: {
+      status: true,
+      isClick: true,
+      form: {
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
     },
-    searchData: [],
-    loading: false,
-    attrObj: {},
-    config: {
-		pageSize:10,
-		searchIsShow:true,
-		searchFormIsShow:true,
-		openPageMode:"drawer"
-	},
-    tagList: {},
-    formId: props.appPageKey.toString() || '',
-    formList: [], // 所有可选表单数据源
-    name: '',
-    treeData: {}, // 左侧树相关
-    previewVisible: false,
-    tabsName: 'second',
-    formFieldList: [], // 表单数据源所有可选字段
-	formApi:{
-		type:"1",
-		addApiUrl:"",
-		editApiUrl:"",
-		delApiUrl:"",
-		lookApiUrl:""
-	},
-    dict: {},
-    refreshTable: true,
-	view:{
-		list:{
-			status:true,
-			isClick:true,
-			form:{
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		},
-		date:{
-			status:false,
-			isClick:false,
-			form:{
-				startTime:"",
-				endTime:"",
-				dayType:1,
-				title:[]
-			}
-		}
-		,
-		time:{
-			status:false,
-			isClick:false,
-			form:{
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		}
-		,
-		gantt:{
-			status:false,
-			isClick:false,
-			form:{
-				startTime:"",
-				endTime:"",
-				dayType:2,
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		}
-		,
-		map:{
-			status:false,
-			isClick:false,
-			form:{
-				mapWord:"",
-				sortWord:"",
-				sort:1,
-				title:[]
-			}
-		},
-		card:{
-			status:false,
-			isClick:false,
-			form:{
-				sort:1,
-				sortWord:"",
-				imgWork:"",
-				imgWidth:50,
-				imgHeight:50,
-				imgBorderRadius:5,
-				imgPadding:2,
-				titleWork:"",
-				describe:"",
-				ranks:3,
-				title:[]
-			}
-		}
-	}
-		
-
-})
+    date: {
+      status: false,
+      isClick: false,
+      form: {
+        startTime: "",
+        endTime: "",
+        dayType: 1,
+        title: [],
+      },
+    },
+    time: {
+      status: false,
+      isClick: false,
+      form: {
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
+    },
+    gantt: {
+      status: false,
+      isClick: false,
+      form: {
+        startTime: "",
+        endTime: "",
+        dayType: 2,
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
+    },
+    map: {
+      status: false,
+      isClick: false,
+      form: {
+        mapWord: "",
+        sortWord: "",
+        sort: 1,
+        title: [],
+      },
+    },
+    card: {
+      status: false,
+      isClick: false,
+      form: {
+        sort: 1,
+        sortWord: "",
+        imgWork: "",
+        imgWidth: 50,
+        imgHeight: 50,
+        imgBorderRadius: 5,
+        imgPadding: 2,
+        titleWork: "",
+        describe: "",
+        ranks: 3,
+        title: [],
+      },
+    },
+  },
+});
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 14:50:34
 @ 功能: 选项卡事件
 */
-const handleClick = () => {
-
-}
+const handleClick = () => {};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 14:59:19
 @ 功能: 功能按钮
 */
-const tableAttrButClick = (val:tableButton[]) => {
-	if(zhuDaunIsTrue.value == true){
-		if(state.tableData.controlBtn.length > 0){
-			state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length);
-			state.tableData.controlBtn = val
-		}else{
-			state.tableData.controlBtn = val
-		}
-	}
-}
+const tableAttrButClick = (val: tableButton[]) => {
+  if (zhuDaunIsTrue.value == true) {
+    if (state.tableData.controlBtn.length > 0) {
+      state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length);
+      state.tableData.controlBtn = val;
+    } else {
+      state.tableData.controlBtn = val;
+    }
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:16:13
 @ 功能: 设置功能按钮
 */
 const setUpFieldBut = () => {
-	// console.log("设置字段属性-->")
-	listButtonIsShow.value = true
-}
+  // console.log("设置字段属性-->")
+  listButtonIsShow.value = true;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:33:58
 @ 功能: 更新列表记录操作按钮
 */
-const updataLogBut = (val:attrButton[]) => {
-	// console.log("更新列表记录操作按钮",val)
-	let isWrete = true
-	if(state.tableData.columns && state.tableData.columns.length > 0){
-		state.tableData.columns.forEach((item:any)=>{
-			if(item.fieldClass == "__control"){
-				state.tableData.operateBtn = val.value
-				isWrete = false
-			}
-		})
-	}
-	if(isWrete){
-		state.tableData.operateBtn = [];
-	}
-	// console.log("更新列表记录操作按钮------1------->",state.tableData.operateBtn)
-}
+const updataLogBut = (val: attrButton[]) => {
+  // console.log("更新列表记录操作按钮",val)
+  let isWrete = true;
+  if (state.tableData.columns && state.tableData.columns.length > 0) {
+    state.tableData.columns.forEach((item: any) => {
+      if (item.fieldClass == "__control") {
+        state.tableData.operateBtn = val.value;
+        isWrete = false;
+      }
+    });
+  }
+  if (isWrete) {
+    state.tableData.operateBtn = [];
+  }
+  // console.log("更新列表记录操作按钮------1------->",state.tableData.operateBtn)
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:39:27
 @ 功能: 解析表单
 */
 const jieForm = () => {
-	if(props.appPageKey != ""){
-		gainFormTableField({id:props.appPageKey.toString()})
-			.then((data)=>{
-				console.log('解析表单--->',data)
-				formTableField.masterTable=data.data.masterTable
-				formTableField.sunTable=data.data.sunTable
-				nextTick(()=>{
-					columnDrop()
-					getListInfo();
-				})
-			})
-	}
-}
+  if (props.appPageKey != "") {
+    gainFormTableField({ id: props.appPageKey.toString() }).then((data) => {
+      console.log("解析表单--->", data);
+      formTableField.masterTable = data.data.masterTable;
+      formTableField.sunTable = data.data.sunTable;
+      nextTick(() => {
+        columnDrop();
+        getListInfo();
+      });
+    });
+  }
+};
 
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:41:53
 @ 功能: 组件加载完毕后执行
 */
-onMounted(()=>{
-	jieForm();
-	nextTick(() => {
-      	
-
-
-		gainFormTableKeyWord(props.appPageKey.toString())
-    })
-})
+onMounted(() => {
+  jieForm();
+  nextTick(() => {
+    gainFormTableKeyWord(props.appPageKey.toString());
+  });
+});
 
-const allKeyWords = ref<any[]>([])
-const timeKeyWords = ref<any[]>([])
-const mapKeyWords = ref<any[]>([])
-const isMapTrue = ref(true)
-const cardKeyWords = ref<any[]>([])
-const isCardTrue = ref(true)
+const allKeyWords = ref<any[]>([]);
+const timeKeyWords = ref<any[]>([]);
+const mapKeyWords = ref<any[]>([]);
+const isMapTrue = ref(true);
+const cardKeyWords = ref<any[]>([]);
+const isCardTrue = ref(true);
 /**
 @ 作者: 秦东
 @ 时间: 2024-07-06 10:44:54
 @ 功能: 获取数据表字段数据
 */
-const gainFormTableKeyWord = (val:string) => {
-	gainListTableField({id:val.toString()})
-		.then((data) =>{
-			// console.log("获取数据表字段数据",data)
-			allKeyWords.value = data.data.allKeyWords
-			timeKeyWords.value = data.data.timeKeyWords
-			mapKeyWords.value = data.data.mapKeyWords
-			isMapTrue.value = !data.data.isMap
-
-			cardKeyWords.value = data.data.cardKeyWords
-			isCardTrue.value = !data.data.isCard
-		})
-}
+const gainFormTableKeyWord = (val: string) => {
+  gainListTableField({ id: val.toString() }).then((data) => {
+    // console.log("获取数据表字段数据",data)
+    allKeyWords.value = data.data.allKeyWords;
+    timeKeyWords.value = data.data.timeKeyWords;
+    mapKeyWords.value = data.data.mapKeyWords;
+    isMapTrue.value = !data.data.isMap;
+
+    cardKeyWords.value = data.data.cardKeyWords;
+    isCardTrue.value = !data.data.isCard;
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:42:18
 @ 功能: 拖动字段排序
 */
 const columnDrop = () => {
-    const wrapperTr = container.value.querySelector(
-      	'.el-table__header-wrapper tr'
-    )
-	// console.log("wrapperTr",wrapperTr)
-    Sortable.create(wrapperTr, {
-		animation: 180,
-		delay: 0,
-		onEnd: (evt: any) => {
-			// console.log("evt",evt.oldIndex,evt.newIndex)
-			const oldItem = state.tableData.columns[evt.oldIndex]
-			state.tableData.columns.splice(evt.oldIndex, 1)
-			state.tableData.columns.splice(evt.newIndex, 0, oldItem)
-			// 重染表格，否则点下面的设置对不上了
-			state.refreshTable = false
-			nextTick(() => {
-				state.refreshTable = true
-				nextTick(() => {
-					columnDrop() // 拖完后拖不到了，再执行一下
-				})
-			})
-		}
-    })
-}
+  const wrapperTr = container.value.querySelector(".el-table__header-wrapper tr");
+  // console.log("wrapperTr",wrapperTr)
+  Sortable.create(wrapperTr, {
+    animation: 180,
+    delay: 0,
+    onEnd: (evt: any) => {
+      // console.log("evt",evt.oldIndex,evt.newIndex)
+      const oldItem = state.tableData.columns[evt.oldIndex];
+      state.tableData.columns.splice(evt.oldIndex, 1);
+      state.tableData.columns.splice(evt.newIndex, 0, oldItem);
+      // 重染表格，否则点下面的设置对不上了
+      state.refreshTable = false;
+      nextTick(() => {
+        state.refreshTable = true;
+        nextTick(() => {
+          columnDrop(); // 拖完后拖不到了，再执行一下
+        });
+      });
+    },
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:43:23
 @ 功能: 获取列表内容
 */
 const getListInfo = () => {
-	// console.log("获取列表内容1111",props.appPageKey)
-	gainFormListCont({id:props.appPageKey.toString()})
-		.then((data)=>{
-			// console.log("获取列表内容",data)
-			if(data.data.listjson != null && data.data.listjson != ""){
-				let stateData = string2json(data.data.listjson)
-				// console.log("获取列表内容---->",stateData)
-				state.tableData = stateData.tableData
-				state.searchData = stateData.searchData
-				if(state.searchData == null){
-					state.searchData = new Array()
-				}
-				state.loading = stateData.loading
-				state.attrObj = stateData.attrObj
-				state.config = stateData.config
-				state.tagList = stateData.tagList
-				state.formId = stateData.formId
-				state.formList = stateData.formList
-				state.name = stateData.name
-				state.treeData = stateData.treeData
-				state.previewVisible = stateData.previewVisible
-				state.formFieldList = stateData.formFieldList
-				state.formApi = stateData.formApi
-				state.dict = stateData.dict
-				state.refreshTable = stateData.refreshTable
-				// if(stateData.view){
-				// 	state.view = stateData.view
-				// }
-				if(stateData.view && stateData.view != null && stateData.view != ""){
-					if(stateData.view.card  && stateData.view.card  != null && stateData.view.card  != ""){
-						state.view = stateData.view
-					}else{
-						state.view = stateData.view
-						state.view.card ={
-							status:false,
-							isClick:false,
-							form:{
-								sort:1,
-								sortWord:"",
-								imgWork:"",
-								imgWidth:50,
-								imgHeight:50,
-								imgBorderRadius:5,
-								imgPadding:2,
-								titleWork:"",
-								describe:"",
-								ranks:3,
-								title:[]
-							}
-						}
-					}
-					
-				}
-				
-			}
-			
+  // console.log("获取列表内容1111",props.appPageKey)
+  gainFormListCont({ id: props.appPageKey.toString() }).then((data) => {
+    // console.log("获取列表内容",data)
+    if (data.data.listjson != null && data.data.listjson != "") {
+      let stateData = string2json(data.data.listjson);
+      // console.log("获取列表内容---->",stateData)
+      state.tableData = stateData.tableData;
+      state.searchData = stateData.searchData;
+      if (state.searchData == null) {
+        state.searchData = new Array();
+      }
+      state.loading = stateData.loading;
+      state.attrObj = stateData.attrObj;
+      state.config = stateData.config;
+      state.tagList = stateData.tagList;
+      state.formId = stateData.formId;
+      state.formList = stateData.formList;
+      state.name = stateData.name;
+      state.treeData = stateData.treeData;
+      state.previewVisible = stateData.previewVisible;
+      state.formFieldList = stateData.formFieldList;
+      state.formApi = stateData.formApi;
+      state.dict = stateData.dict;
+      state.refreshTable = stateData.refreshTable;
+      // if(stateData.view){
+      // 	state.view = stateData.view
+      // }
+      if (stateData.view && stateData.view != null && stateData.view != "") {
+        if (
+          stateData.view.card &&
+          stateData.view.card != null &&
+          stateData.view.card != ""
+        ) {
+          state.view = stateData.view;
+        } else {
+          state.view = stateData.view;
+          state.view.card = {
+            status: false,
+            isClick: false,
+            form: {
+              sort: 1,
+              sortWord: "",
+              imgWork: "",
+              imgWidth: 50,
+              imgHeight: 50,
+              imgBorderRadius: 5,
+              imgPadding: 2,
+              titleWork: "",
+              describe: "",
+              ranks: 3,
+              title: [],
+            },
+          };
+        }
+      }
+    }
 
-			zhuDaunIsTrue.value = false
-			// console.log("====1====>",state.tableData.columns)
-			// console.log("====2====>",formTableField.masterTable)
-			// console.log("====3====>",state.searchData)
-			if(state.searchData && state.searchData.length>0) {
-				if(formTableField.masterTable && formTableField.masterTable.length > 0){
-					state.searchData.forEach((itemCol:any)=>{
-						formTableField.masterTable.forEach((item:any)=>{
-							if(itemCol.id == item.id){
-								// console.log("====111====>",itemCol)
-								// console.log("====222====>",item)
-								item.isSearch = true
-								// tableFieldList.value!.toggleRowSelection(item, true)
-							}
-						})
-					})
-				}
-			}
-			if(state.tableData.columns && state.tableData.columns.length > 0){
-				if(formTableField.masterTable && formTableField.masterTable.length > 0){
-					state.tableData.columns.forEach((itemCol:any)=>{
-						formTableField.masterTable.forEach((item:any)=>{
-							if(itemCol.id == item.id){
-								tableFieldList.value!.toggleRowSelection(item, true)
-							}
-						})
-					})
-				}
-			}
+    zhuDaunIsTrue.value = false;
+    // console.log("====1====>",state.tableData.columns)
+    // console.log("====2====>",formTableField.masterTable)
+    // console.log("====3====>",state.searchData)
+    if (state.searchData && state.searchData.length > 0) {
+      if (formTableField.masterTable && formTableField.masterTable.length > 0) {
+        state.searchData.forEach((itemCol: any) => {
+          formTableField.masterTable.forEach((item: any) => {
+            if (itemCol.id == item.id) {
+              // console.log("====111====>",itemCol)
+              // console.log("====222====>",item)
+              item.isSearch = true;
+              // tableFieldList.value!.toggleRowSelection(item, true)
+            }
+          });
+        });
+      }
+    }
+    if (state.tableData.columns && state.tableData.columns.length > 0) {
+      if (formTableField.masterTable && formTableField.masterTable.length > 0) {
+        state.tableData.columns.forEach((itemCol: any) => {
+          formTableField.masterTable.forEach((item: any) => {
+            if (itemCol.id == item.id) {
+              tableFieldList.value!.toggleRowSelection(item, true);
+            }
+          });
+        });
+      }
+    }
 
-			if(tableAttrLogButtonList && tableAttrLogButtonList.length > 0){
-				if(state.tableData.columns && state.tableData.columns.length > 0){
-					state.tableData.columns.forEach((itemCol:any)=>{
-						tableAttrLogButtonList.forEach((item:any)=>{
-							if(itemCol.id == item.id){
-								tableFieldAttrBut.value!.toggleRowSelection(item, true)
-							}
-						})
-					})
-				}
-			}
-			if(state.tableData && state.tableData.controlBtn && state.tableData.controlBtn.length > 0) {
-				
-				state.tableData.controlBtn.forEach((itemCol:any)=>{
-					tableButtonList.forEach((item:any)=>{
-						if(itemCol.id == item.id){
-							tableAttrBut.value!.toggleRowSelection(item, true)
-						}
-					})
-				})
-			}
+    if (tableAttrLogButtonList && tableAttrLogButtonList.length > 0) {
+      if (state.tableData.columns && state.tableData.columns.length > 0) {
+        state.tableData.columns.forEach((itemCol: any) => {
+          tableAttrLogButtonList.forEach((item: any) => {
+            if (itemCol.id == item.id) {
+              tableFieldAttrBut.value!.toggleRowSelection(item, true);
+            }
+          });
+        });
+      }
+    }
+    if (
+      state.tableData &&
+      state.tableData.controlBtn &&
+      state.tableData.controlBtn.length > 0
+    ) {
+      state.tableData.controlBtn.forEach((itemCol: any) => {
+        tableButtonList.forEach((item: any) => {
+          if (itemCol.id == item.id) {
+            tableAttrBut.value!.toggleRowSelection(item, true);
+          }
+        });
+      });
+    }
 
-			zhuDaunIsTrue.value = true
-		})
-		
-}
+    zhuDaunIsTrue.value = true;
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 15:59:43
 @ 功能: 功能字段
 */
-const tableFieldAttrButClick = (val:tableButton[]) => {
-	if(zhuDaunIsTrue.value == true){
-		if(val.length > 0){	//判断是否有选中的字段
-			if(state.tableData.columns&&state.tableData.columns.length > 0){	//判断列表是否有数据
-				val.forEach((item:tableButton)=>{
-					let isTrue = true;
-					state.tableData.columns.forEach((itemTab:tableButton)=>{
-						if(item.id == itemTab.id){
-							isTrue = false;
-						}
-					});
-					if(isTrue){
-						state.tableData.columns.push(item)
-					}
-				})
-			}else{ //列表无数据,直接新增
-				state.tableData.columns = []
-				val.forEach((item:tableButton)=>{
-					state.tableData.columns.push(item)
-				})
-			}
-			//此处往下是处理列表中有为选中的字段
-			let delField = []
-			tableAttrLogButtonList.forEach((item:tableButton)=>{
-				let isTrue = true;
-				val.forEach((itemVal:tableButton)=>{
-					if(item.id == itemVal.id){
-						isTrue = false
-					}
-				})
-				if(isTrue){
-					delField.push(item.id)
-				}
-			});
-			if(delField.length > 0){
-				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-					delField.forEach((item:string)=>{
-						if(item == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					})
-					
-				});
-			}
-		}else{ //无选中的字段
-			if(state.tableData.columns.length > 0){
-				tableAttrLogButtonList.forEach((item:tableButton)=>{
-					state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-						if(item.id == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					});
-				});
-			}
-		}
-		if(state.tableData.columns.length > 0){
-			let isOpent = true;
-			state.tableData.columns.forEach((itemTab:tableButton)=>{
-				if(itemTab.fieldClass == "__control"){
-					isOpent = false;
-				}
-			});
-			if(isOpent){
-				state.tableData.operateBtn = [];
-			}
-		}else{
-			state.tableData.operateBtn = [];
-		}
-	}
-}
+const tableFieldAttrButClick = (val: tableButton[]) => {
+  if (zhuDaunIsTrue.value == true) {
+    if (val.length > 0) {
+      //判断是否有选中的字段
+      if (state.tableData.columns && state.tableData.columns.length > 0) {
+        //判断列表是否有数据
+        val.forEach((item: tableButton) => {
+          let isTrue = true;
+          state.tableData.columns.forEach((itemTab: tableButton) => {
+            if (item.id == itemTab.id) {
+              isTrue = false;
+            }
+          });
+          if (isTrue) {
+            state.tableData.columns.push(item);
+          }
+        });
+      } else {
+        //列表无数据,直接新增
+        state.tableData.columns = [];
+        val.forEach((item: tableButton) => {
+          state.tableData.columns.push(item);
+        });
+      }
+      //此处往下是处理列表中有为选中的字段
+      let delField = [];
+      tableAttrLogButtonList.forEach((item: tableButton) => {
+        let isTrue = true;
+        val.forEach((itemVal: tableButton) => {
+          if (item.id == itemVal.id) {
+            isTrue = false;
+          }
+        });
+        if (isTrue) {
+          delField.push(item.id);
+        }
+      });
+      if (delField.length > 0) {
+        state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+          delField.forEach((item: string) => {
+            if (item == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    } else {
+      //无选中的字段
+      if (state.tableData.columns.length > 0) {
+        tableAttrLogButtonList.forEach((item: tableButton) => {
+          state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+            if (item.id == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    }
+    if (state.tableData.columns.length > 0) {
+      let isOpent = true;
+      state.tableData.columns.forEach((itemTab: tableButton) => {
+        if (itemTab.fieldClass == "__control") {
+          isOpent = false;
+        }
+      });
+      if (isOpent) {
+        state.tableData.operateBtn = [];
+      }
+    } else {
+      state.tableData.operateBtn = [];
+    }
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:00:41
 @ 功能: 定义自定义表头
 */
-const readerColumn = (column:any) => {
-	let labelLong = column.label.length // 表头label长度
-	if(column.label.length < 3) {
-		labelLong = 3
-	}
-	let size = 30 // 根据需求定义一个字体的标尺
-	return labelLong * size
-}
+const readerColumn = (column: any) => {
+  let labelLong = column.label.length; // 表头label长度
+  if (column.label.length < 3) {
+    labelLong = 3;
+  }
+  let size = 30; // 根据需求定义一个字体的标尺
+  return labelLong * size;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:02:55
 @ 功能: 列表字段处理
 */
-const tableListFieldClick = (val:any[]) => {
-	// console.log("列表字段处理-->",state.tableData)
-	// zhuDaunIsTrue.value = true
-	if(zhuDaunIsTrue.value == true){
-		if(val.length > 0){
-			if(state.tableData.columns.length > 0){	//判断列表是否有数据
-				val.forEach((item:tableButton)=>{
-					let isTrue = true;
-					state.tableData.columns.forEach((itemTab:tableButton)=>{
-						if(item.id == itemTab.id){
-							// console.log("列表字段处理-111->",val)
-							isTrue = false;
-						}
-					});
-					if(isTrue){
-						state.tableData.columns.push(item)
-					}
-				})
-			}else{ //列表无数据,直接新增
-				val.forEach((item:any)=>{
-					state.tableData.columns.push(item)
-				})
-			}
-			//此处往下是处理列表中有为选中的字段
-			let delField = []
-			formTableField.masterTable.forEach((item:tableButton)=>{
-				let isTrue = true;
-				val.forEach((itemVal:tableButton)=>{
-					if(item.id == itemVal.id){
-						isTrue = false
-					}
-				})
-				if(isTrue){
-					delField.push(item.id)
-				}
-			});
-			if(delField.length > 0){
-				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-					delField.forEach((item:string)=>{
-						if(item == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					})
-					
-				});
-			}
-		}else{
-			if(state.tableData.columns.length > 0){
-				formTableField.masterTable.forEach((item:tableButton)=>{
-					state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-						if(item.id == itemTab.id){
-							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-						}
-					});
-				});
-			}
-		}
-	}
-	console.log("state.tableData.columns",state.tableData.columns)
-}
+const tableListFieldClick = (val: any[]) => {
+  console.log("列表字段处理-1->", val);
+  console.log("列表字段处理-2->", state.tableData);
+  // zhuDaunIsTrue.value = true
+  if (zhuDaunIsTrue.value == true) {
+    if (val.length > 0) {
+      if (state.tableData.columns.length > 0) {
+        //判断列表是否有数据
+        val.forEach((item: tableButton) => {
+          let isTrue = true;
+          state.tableData.columns.forEach((itemTab: tableButton) => {
+            if (item.id == itemTab.id) {
+              // console.log("列表字段处理-111->",val)
+              isTrue = false;
+            }
+          });
+          if (isTrue) {
+            state.tableData.columns.push(item);
+          }
+        });
+      } else {
+        //列表无数据,直接新增
+        val.forEach((item: any) => {
+          state.tableData.columns.push(item);
+        });
+      }
+      //此处往下是处理列表中有为选中的字段
+      let delField = [];
+      formTableField.masterTable.forEach((item: tableButton) => {
+        let isTrue = true;
+        val.forEach((itemVal: tableButton) => {
+          if (item.id == itemVal.id) {
+            isTrue = false;
+          }
+        });
+        if (isTrue) {
+          delField.push(item.id);
+        }
+      });
+      if (delField.length > 0) {
+        state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+          delField.forEach((item: string) => {
+            if (item == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    } else {
+      if (state.tableData.columns.length > 0) {
+        formTableField.masterTable.forEach((item: tableButton) => {
+          state.tableData.columns.forEach((itemTab: tableButton, index: number) => {
+            if (item.id == itemTab.id) {
+              state.tableData.columns.splice(index, 1); //删除列表中已经存在的字段
+            }
+          });
+        });
+      }
+    }
+  }
+  console.log("state.tableData.columns", state.tableData.columns);
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:05:22
 @ 功能: 处理查询条件
 */
-const addOrDelSearchField = (val:attrButton,isTrue:boolean) => {
-	console.log("处理查询条件",state.searchData)
-	if(isTrue){
-		if(state.searchData.length>0){
-			let isWrite = true;
-			state.searchData.forEach((item:attrButton,index:number)=>{
-				if(item.id==val.id){
-					isWrite = false;
-				}
-			})
-			if(isWrite){
-				state.searchData.push(val)
-			}
-		}else{
-			state.searchData.push(val)
-		}
-	}else{
-		if(state.searchData.length>0){
-			state.searchData.forEach((item:attrButton,index:number)=>{
-				if(item.id==val.id){
-					state.searchData.splice(index,1)
-				}
-			})
-		}
-	}
-}
+const addOrDelSearchField = (val: attrButton, isTrue: boolean) => {
+  console.log("处理查询条件", state.searchData);
+  if (isTrue) {
+    if (state.searchData.length > 0) {
+      let isWrite = true;
+      state.searchData.forEach((item: attrButton, index: number) => {
+        if (item.id == val.id) {
+          isWrite = false;
+        }
+      });
+      if (isWrite) {
+        state.searchData.push(val);
+      }
+    } else {
+      state.searchData.push(val);
+    }
+  } else {
+    if (state.searchData.length > 0) {
+      state.searchData.forEach((item: attrButton, index: number) => {
+        if (item.id == val.id) {
+          state.searchData.splice(index, 1);
+        }
+      });
+    }
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:25:05
 @ 功能: 列表头部按钮操作
 */
 const listPageTools = (type: string) => {
-	// console.log("列表头部操作--》",type)
-	switch(type){
-		case "del":
-			clearData()
-			break;
-		case "eye":
-			state.previewVisible = true
-			break;
-		case "json":
-			drawer.title = "查看表格列表结构"
-			dialogOpen(state, { direction: 'ltr', type: 'json' })
-			break;
-		case "save":
-			saveFormListData()
-		case "close":
-			emits('closeFormPage')
-			break;
-		default:
-	}
-}
+  // console.log("列表头部操作--》",type)
+  switch (type) {
+    case "del":
+      clearData();
+      break;
+    case "eye":
+      state.previewVisible = true;
+      break;
+    case "json":
+      drawer.title = "查看表格列表结构";
+      dialogOpen(state, { direction: "ltr", type: "json" });
+      break;
+    case "save":
+      saveFormListData();
+    case "close":
+      emits("closeFormPage");
+      break;
+    default:
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:34:26
 @ 功能: 添加自定义表单列表设定
 */
 const saveFormListData = () => {
-	const { type ,addApiUrl ,editApiUrl,delApiUrl,lookApiUrl } = state.formApi
-	if(!props.appPageKey || props.appPageKey == "" || props.appPageKey == null || props.appPageKey == undefined){
-		return ElMessage.error('未知表单参数！请先保存前置表单后再操作！')
-	}
-	// console.log("添加自定义表单列表设定",state.formApi)
-	if(type != 1){
-		if(addApiUrl=="" || editApiUrl=="" || delApiUrl=="" || lookApiUrl == ""){
-			return ElMessage.error('请补全列表第三方APIUrl！')
-		}
-	}
-	if(state.tableData.columns.length < 1){
-		return ElMessage.error('未设置表单查询项！不可提交！')
-	}
-	let params: any = {
-		data: json2string(state),
-		id: props.appPageKey.toString()
-	}
-	// console.log("添加自定义表单列表设定",params)
-	editCustomerFormList(params)
-		.then((data)=>{
-			// console.log("添加自定义表单列表设定",data)
-			ElMessage.success(data.msg)
-		})
-}
+  const { type, addApiUrl, editApiUrl, delApiUrl, lookApiUrl } = state.formApi;
+  if (
+    !props.appPageKey ||
+    props.appPageKey == "" ||
+    props.appPageKey == null ||
+    props.appPageKey == undefined
+  ) {
+    return ElMessage.error("未知表单参数！请先保存前置表单后再操作！");
+  }
+  // console.log("添加自定义表单列表设定",state.formApi)
+  if (type != 1) {
+    if (addApiUrl == "" || editApiUrl == "" || delApiUrl == "" || lookApiUrl == "") {
+      return ElMessage.error("请补全列表第三方APIUrl！");
+    }
+  }
+  if (state.tableData.columns.length < 1) {
+    return ElMessage.error("未设置表单查询项！不可提交！");
+  }
+  let params: any = {
+    data: json2string(state),
+    id: props.appPageKey.toString(),
+  };
+  // console.log("添加自定义表单列表设定",params)
+  editCustomerFormList(params).then((data) => {
+    // console.log("添加自定义表单列表设定",data)
+    ElMessage.success(data.msg);
+  });
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:25:22
 @ 功能: 关闭预览
 */
 const handlePreviewClose = () => {
-	state.previewVisible = false
-}
+  state.previewVisible = false;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:25:35
 @ 功能: 清空数据
 */
 const clearData = () => {
-	tableFieldList.value!.clearSelection()
-	tableFieldAttrBut.value!.clearSelection()
-	tableAttrBut.value!.clearSelection()
-	state.searchData = []
-	// state.tableData.controlBtn = []
-	// state.tableData.columns = []
-	state.tableData.operateBtn = []
-	state.tableData.config = {}
-	if(formTableField.masterTable){
-		formTableField.masterTable.forEach((item)=>{
-			item.isSearch = false;
-		})
-	}
-	
-}
+  tableFieldList.value!.clearSelection();
+  tableFieldAttrBut.value!.clearSelection();
+  tableAttrBut.value!.clearSelection();
+  state.searchData = [];
+  // state.tableData.controlBtn = []
+  // state.tableData.columns = []
+  state.tableData.operateBtn = [];
+  state.tableData.config = {};
+  if (formTableField.masterTable) {
+    formTableField.masterTable.forEach((item) => {
+      item.isSearch = false;
+    });
+  }
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-21 16:26:01
 @ 功能: 数据格式处理
 */
 const dialogOpen = (obj: any, params: any = {}) => {
-    drawer.visible = true
-    Object.assign(drawer, { direction: 'ltr' }, params)
-    let editData = objToStringify(obj, true)
-    switch (params.type) {
-      case 'dict':
-        editData = json2string(obj, true)
-        break
-      case 'beforeRequest':
-      case 'beforeDelete':
-      case 'treeBeforeRequest':
-        if (!obj) {
-          editData = beforeRequest
-        }
-        break
-      case 'afterResponse':
-      case 'treeAfterResponse':
-        if (!obj) {
-          editData = afterResponse
-        }
-        break
-    }
-    drawer.content = editData
-}
-
-const activeName = ref<any[]>(["list"])
-const listOnOrOff = ref(true)
-
-const viewList1 = ref()
+  drawer.visible = true;
+  Object.assign(drawer, { direction: "ltr" }, params);
+  let editData = objToStringify(obj, true);
+  switch (params.type) {
+    case "dict":
+      editData = json2string(obj, true);
+      break;
+    case "beforeRequest":
+    case "beforeDelete":
+    case "treeBeforeRequest":
+      if (!obj) {
+        editData = beforeRequest;
+      }
+      break;
+    case "afterResponse":
+    case "treeAfterResponse":
+      if (!obj) {
+        editData = afterResponse;
+      }
+      break;
+  }
+  drawer.content = editData;
+};
+
+const activeName = ref<any[]>(["list"]);
+const listOnOrOff = ref(true);
+
+const viewList1 = ref();
 
 /**
 @ 作者: 秦东
@@ -779,870 +792,1094 @@ const viewList1 = ref()
 @ 功能: 折叠组件变动事件
 */
 const handleChange = (val: string[]) => {
-	// console.log("折叠组件变动事件--->",val,activeName)
-
-	
-
-	// judjeIsTrue
-}
-
-const judjeIsTrue = (val:string) => {
-	if (activeName.value.includes(val)){
-		return true
-	}else{
-		false
-	}
-}
-
-const tabsView = (val:any) => {
-	val.isClick = !val.isClick
-}
+  // console.log("折叠组件变动事件--->",val,activeName)
+  // judjeIsTrue
+};
+
+const judjeIsTrue = (val: string) => {
+  if (activeName.value.includes(val)) {
+    return true;
+  } else {
+    false;
+  }
+};
+
+const tabsView = (val: any) => {
+  val.isClick = !val.isClick;
+};
 /**
 @ 作者: 秦东
 @ 时间: 2024-07-20 10:41:17
 @ 功能: 开关事件
 */
-const showCollapse = () => {
-	
-}
+const showCollapse = () => {};
 // 弹窗确认
 const dialogConfirm = (editVal: string) => {
-    // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
-    try {
-      	if (typeof drawer.callback === 'function') {
-			// callback
-			const newObj =
-			drawer.codeType === 'json'? string2json(editVal): stringToObj(editVal)
-			drawer.callback(newObj)
-      	} else {
-			switch (drawer.type) {
-				case 'css':
-					// 表单属性－编辑表单样式
-					if (!state.value.formData.config) {
-						state.value.formData.config = {}
-					}
-					state.value.formData.config.style = editVal
-					break
-				case 'dict':
-					state.value.formDict = string2json(editVal)
-					break
-				case 'beforeRequest':
-				case 'beforeSubmit':
-				case 'afterResponse':
-				case 'afterSubmit':
-				case 'closeSubmit':
-				case 'change':
-					if (!state.value.formData.events) {
-						state.value.formData.events = {}
-					}
-					state.value.formData.events[drawer.type] = stringToObj(editVal)
-					break
-				default:
-					state.value.formData = stringToObj(editVal)
-			}
-      	}
-      	dialogCancel()
-    } catch (res) {
-		// console.log(res.message)
-		//ElMessage.error(res.message)
+  // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
+  try {
+    if (typeof drawer.callback === "function") {
+      // callback
+      const newObj =
+        drawer.codeType === "json" ? string2json(editVal) : stringToObj(editVal);
+      drawer.callback(newObj);
+    } else {
+      switch (drawer.type) {
+        case "css":
+          // 表单属性－编辑表单样式
+          if (!state.value.formData.config) {
+            state.value.formData.config = {};
+          }
+          state.value.formData.config.style = editVal;
+          break;
+        case "dict":
+          state.value.formDict = string2json(editVal);
+          break;
+        case "beforeRequest":
+        case "beforeSubmit":
+        case "afterResponse":
+        case "afterSubmit":
+        case "closeSubmit":
+        case "change":
+          if (!state.value.formData.events) {
+            state.value.formData.events = {};
+          }
+          state.value.formData.events[drawer.type] = stringToObj(editVal);
+          break;
+        default:
+          state.value.formData = stringToObj(editVal);
+      }
     }
-}
+    dialogCancel();
+  } catch (res) {
+    // console.log(res.message)
+    //ElMessage.error(res.message)
+  }
+};
 </script>
 <template>
-	<el-main class="mainBox">
-		<div class="header">
-			<div class="field">
-				
-			</div>
-			<PageListHeadTools @clearData="listPageTools" />
-		</div>
-		<div  ref="container"  class="table_box main_table">
-
-			<div class="search-box" >
-				<SearchField v-if="state.searchData&&state.searchData.length>0&&state.config.searchIsShow" v-model:searchData="state.searchData" />
-				<div v-else class="tipBox" >条件查询搜索区域</div>
-			</div>
-
-
-
-			<div class="operateButArea">
-				<div class="operatLeft">
-					<el-text v-if="state.tableData.controlBtn.length === 0" class="mx-1 tipBox" type="info">操作按钮区域</el-text>
-					<el-button
-						v-for="item in state.tableData.controlBtn"
-						v-bind="item"
-						:key="item.type"
-					>
-						{{ item.label }}
-					</el-button>
-				</div>
-				<div>
-					
-				
-					
-					<el-button-group class="ml-4">
-						<el-tooltip
-							v-if="state.config.searchFormIsShow"
-							class="box-item"
-							effect="dark"
-							content="折叠查询表单"
-							placement="top"
-						>
-							<el-button size="small" @click="state.config.searchIsShow=!state.config.searchIsShow" class="fa fa-search" />
-						</el-tooltip>
-						<el-tooltip
-							v-if="state.view.list.status"
-							class="box-item"
-							effect="dark"
-							content="列表视图"
-							placement="top"
-						>
-							<el-button size="small" class="fa fa-table"  :color="state.view.list.isClick?'#a0cfff':''" @click="tabsView(state.view.list)" />
-						</el-tooltip>
-						<el-tooltip
-							v-if="state.view.card.status"
-							class="box-item"
-							effect="dark"
-							content="卡片视图"
-							placement="top"
-						>
-							<el-button size="small" class="fa fa-id-card-o" />
-						</el-tooltip>
-						
-						<el-tooltip
-							v-if="state.view.date.status"
-							class="box-item"
-							effect="dark"
-							content="日历视图"
-							placement="top"
-						>
-							<el-button size="small" class="fa fa-calendar" />
-						</el-tooltip>
-						<el-tooltip
-							v-if="state.view.time.status"
-							class="box-item"
-							effect="dark"
-							content="时间轴"
-							placement="top"
-						>
-							<el-button size="small" class="fa fa-clock-o" />
-						</el-tooltip>
-						<el-tooltip
-							v-if="state.view.gantt.status"
-							class="box-item"
-							effect="dark"
-							content="甘特图"
-							placement="top"
-						>
-							<el-button size="small" class="fa fa-bar-chart" />
-						</el-tooltip>
-						<el-tooltip
-							v-if="state.view.map.status"
-							class="box-item"
-							effect="dark"
-							content="地图视图"
-							placement="top"
-						>
-							<el-button size="small" class="fa fa-map-signs" />
-						</el-tooltip>
-						
-					</el-button-group>
-
-				</div>
-			</div>
-
-			<div class="operateButArea tipBox" v-if="!state.tableData.columns?.length">
-				表格列设置区域，可从左上角 添加表格列字段
-				选择已有列或直接从上方工具栏 生成脚本预览 编辑
-			</div>
-			<el-table
-				:data="[{}]"
-				v-bind="state.tableData.tableProps || {}"
-				ref="tableEl"
-				
-			>
-				<template
-					v-for="item in state.tableData.columns"
-					:key="item.prop || item.label"
-				>
-
-					<el-table-column v-bind="item" :width="readerColumn(item)">
-
-						<template #header="scope">
-							<div class="field_close">
-								<el-text>{{ item.label }}</el-text>
-								<i ><el-icon  @click="delCol(item)"><Close /></el-icon></i>
-							</div>
-							<el-tooltip placement="top" v-if="item.help">
-								<template #content>
-									<span v-html="item.help"></span>
-								</template>
-								<i class="icon-help"></i>
-							</el-tooltip>
-						</template>
-						<template #default v-if="item.field !== 'index'">
-							<el-checkbox v-if="item.field === 'checkbox'" />
-							<span v-if="item.field === 'operate'">操作</span>
-							<span v-if="item.field !== 'checkbox'&&item.field !== 'operate'" >数据</span>
-						</template>
-					</el-table-column>
-				</template>
-			</el-table>
-			<div class="table-tip">
-				操作提示：<br />
-				*从数据列表配置中选择 所属表单<br />
-				*从左上角 添加表格字段 选择预设字段<br />
-				*可拖动表头字段移动调整表头字段排列顺序<br />
-				*可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br />
-
-			</div>
-		</div>
-		
-		<ace-drawer
-			v-model="drawer.visible"
-			:title="drawer.title"
-			:direction="drawer.direction"
-			:content="drawer.content"
-			:code-type="drawer.codeType"
-			@before-close="drawerBeforeClose"
-			@confirm="dialogConfirm"
-		/>
-		<FieldSetUp v-model:is-open="setUpFieldIsOpen" :setup-field-info="setUpFieldInfo" />
-		<ControlSetup v-model:is-show="listButtonIsShow" v-model:contbutary:="state.tableData.operateBtn" @updata-log-but="updataLogBut" />
-		<CodePage  v-model:is-show="codeIsShow" :list-data="state" />
-
-		<el-drawer
-			v-model="state.previewVisible"
-			title="列表预览"
-			direction="btt"
-			:before-close="handlePreviewClose"
-			size="90%"
-		>
-			<ak-page-list
-				:data="state.tableData"
-				:search-data="state.searchData"
-				:config="state.config"
-				:form-id="props.appPageKey"
-				:viewPage="stateList.view"
-				v-if="state.previewVisible"
-			/>
-
-		</el-drawer>
-	</el-main>
-	<el-aside class="asideBox">
-		<el-tabs ref="multipleTableRef" v-model="formTableActive" @tab-click="handleClick">
-			<el-tab-pane label="字段设置" :name="1">
-				<el-divider content-position="left">功能字段</el-divider>
-				<div class="form_tabs">
-					<el-table ref="tableFieldAttrBut" :data="tableAttrLogButtonList" border  style="width: 100%" @selection-change="tableFieldAttrButClick">
-						<el-table-column fixed type="selection" width="40"  align="center" />
-						<el-table-column prop="label" label="字段" />
-						<el-table-column fixed="right" label="设置" width="55" align="center">
-							<template #default="scope">
-								<el-icon v-if="scope.row.fieldClass=='__control'" title="设置" @click="setUpFieldBut(scope.row)" class="shoushi"><Setting /></el-icon>
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-				<el-divider content-position="left">列表字段</el-divider>
-				<div class="form_tabs">
-					<el-table ref="tableFieldList" :data="formTableField.masterTable" border @selection-change="tableListFieldClick"  style="width: 100%">
-						<el-table-column fixed type="selection" width="40"  align="center" />
-						<el-table-column prop="label" label="字段">
-							<template #default="scope">
-								{{scope.row.label}}({{scope.row.fieldClass}}[{{scope.row.pattern}}])
-							</template>
-						</el-table-column>
-						<el-table-column fixed="right" label="查询" width="55" align="center">
-							<template #default="scope">
-								<el-switch
-									v-model="scope.row.isSearch"
-									:active-action-icon="View"
-									:inactive-action-icon="Hide"
-									style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-									@change="addOrDelSearchField(scope.row, $event)"
-								/>
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-			</el-tab-pane>
-			<el-tab-pane label="列表设置" :name="2">
-			
-				<el-divider content-position="left">开启视图</el-divider>
-				<div class="demo_collapse">
-					<el-collapse v-value="activeName"  @change="handleChange">
-						<el-collapse-item  name="list" :class="state.view.list.status?'isTrueItem':''"  :disabled="!state.view.list.status">
-							<template #title>
-								<div class="collapse-title">
-									<div>
-										<i class="fa fa-table"></i>
-										<el-text>列表视图</el-text>
-									</div>
-									<el-switch v-if="1==0" class="openOfClose" v-model="state.view.list.status" @click.stop="showCollapse" />
-								</div>
-							</template>
-							<div>
-								<el-form
-									label-position="top"
-									label-width="auto"
-									:model="state.view.list.form"
-									style="max-width: 600px"
-								>
-									<el-form-item label="标题字段">
-										<el-select v-model="state.view.list.form.title" multiple placeholder="请选择标题字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="排序字段">
-										<el-select v-model="state.view.list.form.sortWord" placeholder="请选择排序字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序方式">
-										<el-radio-group v-model="state.view.list.form.sort">
-											<el-radio :label="1">降序</el-radio>
-											<el-radio :label="2">升序</el-radio>
-										</el-radio-group>
-									</el-form-item>
-									
-
-								</el-form>
-							</div>
-						</el-collapse-item>
-					
-						<el-collapse-item title="Consistency" name="card" :class="state.view.card.status?'isTrueItem':''"  :disabled="!state.view.card.status">
-							<template #title>
-								<div class="collapse-title">
-									<div>
-										<i class="fa fa-id-card-o"></i>
-										<el-text>卡片视图</el-text>
-									</div>
-									<el-switch class="openOfClose" v-model="state.view.card.status" :disabled="isCardTrue" @click.stop="showCollapse" />
-								</div>
-							</template>
-							<div>
-								<el-form
-									label-position="top"
-									label-width="auto"
-									:model="state.view.card.form"
-									style="max-width: 600px"
-								>
-									<el-form-item label="标题字段">
-										<el-select v-model="state.view.card.form.title" multiple placeholder="请选择标题字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="图片字段">
-										<el-select v-model="state.view.card.form.imgWork" placeholder="请选择图片字段">
-											<el-option v-for="item in cardKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="图片宽度与高度">
-										<el-input
-											v-model="state.view.card.form.imgWidth"
-											placeholder="请输入图片宽度"
-										>
-											<template #prepend>宽度</template>
-											<template #suffix>PX</template>
-										</el-input>
-										<el-input
-											v-model="state.view.card.form.imgHeight"
-											placeholder="请输入图片高度"
-											style="margin-top:10px;"
-										>
-											<template #prepend>高度</template>
-											<template #suffix>PX</template>
-										</el-input>
-									</el-form-item>
-									<el-form-item label="图片圆角">
-										<el-input
-											v-model="state.view.card.form.imgBorderRadius"
-											placeholder="请输入图片圆角"
-											style="margin-top:10px;"
-										>
-											<template #prepend>圆角</template>
-											<template #suffix>PX</template>
-										</el-input>
-									</el-form-item>
-
-									<el-form-item label="图片边框缩进">
-										<el-input
-											v-model="state.view.card.form.imgPadding"
-											placeholder="请输入图片边框缩进"
-											style="margin-top:10px;"
-										>
-											<template #prepend>缩进</template>
-											<template #suffix>PX</template>
-										</el-input>
-									</el-form-item>
-									<el-form-item label="卡片标题">
-										<el-select v-model="state.view.card.form.titleWork" placeholder="请选择时间轴段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="卡片标题描述">
-										<el-select v-model="state.view.card.form.describe" placeholder="请选择时间轴段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="每行几列">
-										<el-input
-											v-model="state.view.card.form.ranks"
-											placeholder="请输入每行几列"
-											style="margin-top:10px;"
-										>
-											<template #suffix>列</template>
-										</el-input>
-									</el-form-item>
-									<el-form-item label="排序字段">
-										<el-select v-model="state.view.card.form.sortWord" placeholder="请选择时间轴段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序方式">
-										<el-radio-group v-model="state.view.card.form.sort">
-											<el-radio :label="1">降序</el-radio>
-											<el-radio :label="2">升序</el-radio>
-										</el-radio-group>
-									</el-form-item>
-
-
-								</el-form>
-							</div>
-						</el-collapse-item>
-						<el-collapse-item title="Consistency" name="date" :class="state.view.date.status?'isTrueItem':''"  :disabled="!state.view.date.status">
-							<template #title>
-								<div class="collapse-title">
-									<div>
-										<i class="fa fa-calendar"></i>
-										<el-text>日历视图</el-text>
-									</div>
-									<el-switch class="openOfClose" v-model="state.view.date.status"  @click.stop="showCollapse" />
-								</div>
-							</template>
-							<div>
-								<el-form
-									label-position="top"
-									label-width="auto"
-									:model="state.view.date.form"
-									style="max-width: 600px"
-								>
-									<el-form-item label="标题字段">
-										<el-select v-model="state.view.date.form.title" multiple placeholder="请选择标题字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item >
-										<span slot="label">
-											时间跨度
-											<el-tooltip
-												class="box-item"
-												effect="dark"
-												content="假如一个任务今天开始，明天结束。日历列表中用区间日期展示这一条信息。"
-												placement="top"
-											>
-												<i class="fa fa-question-circle-o"></i>
-											</el-tooltip>
-										</span>
-										<el-select v-model="state.view.date.form.startTime" clearable placeholder="请选择开始时间">
-											<template #prefix>从</template>
-											<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-										<el-select v-model="state.view.date.form.endTime" clearable placeholder="请选择结束时间" style="margin-top:10px;">
-											<template #prefix>至</template>
-											<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="默认展示">
-										<el-select v-model="state.view.date.form.dayType" clearable placeholder="请选择展示方式">
-											<el-option label="月" :value="1" />
-											<el-option label="周" :value="2" />
-											<el-option label="日" :value="3" />
-										</el-select>
-									</el-form-item>
-
-
-								</el-form>
-							</div>
-						</el-collapse-item>
-
-
-						<el-collapse-item title="Consistency" name="time" :class="state.view.time.status?'isTrueItem':''"  :disabled="!state.view.time.status">
-							<template #title>
-								<div class="collapse-title">
-									<div>
-										<i class="fa fa-clock-o"></i>
-										<el-text>时间轴</el-text>
-									</div>
-									<el-switch class="openOfClose" v-model="state.view.time.status"  @click.stop="showCollapse" />
-								</div>
-							</template>
-							<div>
-								<el-form
-									label-position="top"
-									label-width="auto"
-									:model="state.view.time.form"
-									style="max-width: 600px"
-								>
-									<el-form-item label="标题字段">
-										<el-select v-model="state.view.time.form.title" multiple placeholder="请选择标题字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="时间轴字段">
-										<el-select v-model="state.view.time.form.sortWord" placeholder="请选择时间轴段">
-											<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序方式">
-										<el-radio-group v-model="state.view.time.form.sort">
-											<el-radio :label="1">降序</el-radio>
-											<el-radio :label="2">升序</el-radio>
-										</el-radio-group>
-									</el-form-item>
-
-
-								</el-form>
-							</div>
-						</el-collapse-item>
-
-						<el-collapse-item title="Consistency" name="gantt" :class="state.view.gantt.status?'isTrueItem':''"  :disabled="!state.view.gantt.status">
-							<template #title>
-								<div class="collapse-title">
-									<div>
-										<i class="fa fa-bar-chart fa-rotate-0 "></i>
-										<el-text>甘特图</el-text>
-									</div>
-									<el-switch class="openOfClose" v-model="state.view.gantt.status"  @click.stop="showCollapse" />
-								</div>
-							</template>
-							<div>
-								<el-form
-									label-position="top"
-									label-width="auto"
-									:model="state.view.gantt.form"
-									style="max-width: 600px"
-								>
-									<el-form-item label="标题字段">
-										<el-select v-model="state.view.gantt.form.title" multiple placeholder="请选择标题字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="时间设置">
-										<el-select v-model="state.view.gantt.form.startTime" clearable placeholder="请选择开始时间">
-											<template #prefix>开始时间</template>
-											<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-										<el-select v-model="state.view.gantt.form.endTime" clearable placeholder="请选择结束时间" style="margin-top:10px;">
-											<template #prefix>结束时间</template>
-											<el-option v-for="item in timeKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="默认时间刻度">
-										<el-select v-model="state.view.gantt.form.dayType" clearable placeholder="请选择展示方式">
-											<el-option label="时" :value="1" />
-											<el-option label="日" :value="2" />
-											<el-option label="周" :value="3" />
-											<el-option label="月" :value="4" />
-											<el-option label="季" :value="5" />
-											<el-option label="年" :value="6" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序字段">
-										<el-select v-model="state.view.gantt.form.sortWord" placeholder="请选择时间轴段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序方式">
-										<el-radio-group v-model="state.view.gantt.form.sort">
-											<el-radio :label="1">降序</el-radio>
-											<el-radio :label="2">升序</el-radio>
-										</el-radio-group>
-									</el-form-item>
-
-
-								</el-form>
-							</div>
-						</el-collapse-item>
-
-						<el-collapse-item title="Consistency" name="map" :class="state.view.map.status?'isTrueItem':''"  :disabled="!state.view.map.status">
-							<template #title>
-								<div class="collapse-title">
-									<div>
-										<i class="fa fa-map-signs"></i>
-										<el-text>地图视图</el-text>
-									</div>
-									<el-switch class="openOfClose" v-model="state.view.map.status" :disabled="isMapTrue" @click.stop="showCollapse" />
-								</div>
-							</template>
-							<div>
-								<el-form
-									label-position="top"
-									label-width="auto"
-									:model="state.view.map.form"
-									style="max-width: 600px"
-								>
-									<el-form-item label="标题字段">
-										<el-select v-model="state.view.map.form.title" multiple placeholder="请选择标题字段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-									<el-form-item label="位置字段">
-										<el-select v-model="state.view.map.form.mapWord" placeholder="请选择位置字段">
-											<el-option v-for="item in mapKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序字段">
-										<el-select v-model="state.view.map.form.sortWord" placeholder="请选择时间轴段">
-											<el-option v-for="item in allKeyWords" :key="item.value" :label="item.label" :value="item.value" />
-										</el-select>
-									</el-form-item>
-
-									<el-form-item label="排序方式">
-										<el-radio-group v-model="state.view.map.form.sort">
-											<el-radio :label="1">降序</el-radio>
-											<el-radio :label="2">升序</el-radio>
-										</el-radio-group>
-									</el-form-item>
-
-
-								</el-form>
-							</div>
-						</el-collapse-item>
-
-
-
-					</el-collapse>
-				</div>
-				<el-divider content-position="left">功能按钮</el-divider>
-				<div class="form_tabs">
-					<el-table ref="tableAttrBut" :data="tableButtonList" border  style="width: 100%" @selection-change="tableAttrButClick">
-						<el-table-column fixed type="selection" width="40"  align="center" />
-						<el-table-column prop="label" label="字段" />
-					</el-table>
-				</div>
-				<el-divider content-position="left">基本功能设置</el-divider>
-				<div class="form_tabs">
-					<el-form :model="state.config" label-width="auto">
-						<el-form-item label="每页显示数据得数量">
-							<el-input-number
-								v-model="state.config.pageSize"
-								class="mx-4"
-								:min="1"
-								:max="10000"
-								controls-position="right"
-							/>
-						</el-form-item>
-						<el-form-item label="数据添加编辑打开方式">
-							
-							<el-select
-								v-model="state.config.openPageMode"
-								clearable
-								placeholder="请选择"
-							>
-								<el-option
-									v-for="itemOpt in diaOrDrawer"
-									:key="itemOpt.value"
-									:label="itemOpt.label"
-									:value="itemOpt.value"
-								/>
-							</el-select>
-						</el-form-item>
-						<el-form-item label="可折叠查询表单">
-							<el-switch
-								v-model="state.config.searchFormIsShow"
-								:active-action-icon="View"
-								:inactive-action-icon="Hide"
-								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
-							/>
-						</el-form-item>
-					</el-form>
-				</div>
-				<el-divider content-position="left">数据处理事件</el-divider>
-				<div class="form_tabs">
-					<el-form :model="state.formApi" label-width="auto">
-						<el-form-item label="数据处理方式">
-							<el-switch
-								v-model="state.formApi.type"
-								active-text="默认"
-    							inactive-text="第三方API"
-								active-value="1"
-      							inactive-value="2"
-								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409EFF"
-							/>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="填加APIUrl">
-							<el-input v-model="state.formApi.addApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="编辑APIUrl">
-							<el-input v-model="state.formApi.editApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="删除APIUrl">
-							<el-input v-model="state.formApi.delApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-						<el-form-item v-if="state.formApi.type!=1" label="查看APIUrl">
-							<el-input v-model="state.formApi.lookApiUrl" placeholder="请输入接口地址">
-								<template #prefix>http://</template>
-							</el-input>
-						</el-form-item>
-					</el-form>
-				</div>
-			</el-tab-pane>
-		</el-tabs>
-	</el-aside>
+  <el-main class="mainBox">
+    <div class="header">
+      <div class="field"></div>
+      <PageListHeadTools @clearData="listPageTools" />
+    </div>
+    <div ref="container" class="table_box main_table">
+      <div class="search-box">
+        <SearchField
+          v-if="
+            state.searchData && state.searchData.length > 0 && state.config.searchIsShow
+          "
+          v-model:searchData="state.searchData"
+        />
+        <div v-else class="tipBox">条件查询搜索区域</div>
+      </div>
+
+      <div class="operateButArea">
+        <div class="operatLeft">
+          <el-text
+            v-if="state.tableData.controlBtn.length === 0"
+            class="mx-1 tipBox"
+            type="info"
+            >操作按钮区域</el-text
+          >
+          <el-button
+            v-for="item in state.tableData.controlBtn"
+            v-bind="item"
+            :key="item.type"
+          >
+            {{ item.label }}
+          </el-button>
+        </div>
+        <div>
+          <el-button-group class="ml-4">
+            <el-tooltip
+              v-if="state.config.searchFormIsShow"
+              class="box-item"
+              effect="dark"
+              content="折叠查询表单"
+              placement="top"
+            >
+              <el-button
+                size="small"
+                @click="state.config.searchIsShow = !state.config.searchIsShow"
+                class="fa fa-search"
+              />
+            </el-tooltip>
+            <el-tooltip
+              v-if="state.view.list.status"
+              class="box-item"
+              effect="dark"
+              content="列表视图"
+              placement="top"
+            >
+              <el-button
+                size="small"
+                class="fa fa-table"
+                :color="state.view.list.isClick ? '#a0cfff' : ''"
+                @click="tabsView(state.view.list)"
+              />
+            </el-tooltip>
+            <el-tooltip
+              v-if="state.view.card.status"
+              class="box-item"
+              effect="dark"
+              content="卡片视图"
+              placement="top"
+            >
+              <el-button size="small" class="fa fa-id-card-o" />
+            </el-tooltip>
+
+            <el-tooltip
+              v-if="state.view.date.status"
+              class="box-item"
+              effect="dark"
+              content="日历视图"
+              placement="top"
+            >
+              <el-button size="small" class="fa fa-calendar" />
+            </el-tooltip>
+            <el-tooltip
+              v-if="state.view.time.status"
+              class="box-item"
+              effect="dark"
+              content="时间轴"
+              placement="top"
+            >
+              <el-button size="small" class="fa fa-clock-o" />
+            </el-tooltip>
+            <el-tooltip
+              v-if="state.view.gantt.status"
+              class="box-item"
+              effect="dark"
+              content="甘特图"
+              placement="top"
+            >
+              <el-button size="small" class="fa fa-bar-chart" />
+            </el-tooltip>
+            <el-tooltip
+              v-if="state.view.map.status"
+              class="box-item"
+              effect="dark"
+              content="地图视图"
+              placement="top"
+            >
+              <el-button size="small" class="fa fa-map-signs" />
+            </el-tooltip>
+          </el-button-group>
+        </div>
+      </div>
+
+      <div class="operateButArea tipBox" v-if="!state.tableData.columns?.length">
+        表格列设置区域，可从左上角 添加表格列字段 选择已有列或直接从上方工具栏
+        生成脚本预览 编辑
+      </div>
+      <el-table :data="[{}]" v-bind="state.tableData.tableProps || {}" ref="tableEl">
+        <template v-for="item in state.tableData.columns" :key="item.prop || item.label">
+          <el-table-column v-bind="item" :width="readerColumn(item)">
+            <template #header="scope">
+              <div class="field_close">
+                <el-text>{{ item.label }}</el-text>
+                <i
+                  ><el-icon @click="delCol(item)"><Close /></el-icon
+                ></i>
+              </div>
+              <el-tooltip placement="top" v-if="item.help">
+                <template #content>
+                  <span v-html="item.help"></span>
+                </template>
+                <i class="icon-help"></i>
+              </el-tooltip>
+            </template>
+            <template #default v-if="item.field !== 'index'">
+              <el-checkbox v-if="item.field === 'checkbox'" />
+              <span v-if="item.field === 'operate'">操作</span>
+              <span v-if="item.field !== 'checkbox' && item.field !== 'operate'"
+                >数据</span
+              >
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+      <div class="table-tip">
+        操作提示：<br />
+        *从数据列表配置中选择 所属表单<br />
+        *从左上角 添加表格字段 选择预设字段<br />
+        *可拖动表头字段移动调整表头字段排列顺序<br />
+        *可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br />
+      </div>
+    </div>
+
+    <ace-drawer
+      v-model="drawer.visible"
+      :title="drawer.title"
+      :direction="drawer.direction"
+      :content="drawer.content"
+      :code-type="drawer.codeType"
+      @before-close="drawerBeforeClose"
+      @confirm="dialogConfirm"
+    />
+    <FieldSetUp v-model:is-open="setUpFieldIsOpen" :setup-field-info="setUpFieldInfo" />
+    <ControlSetup
+      v-model:is-show="listButtonIsShow"
+      v-model:contbutary:="state.tableData.operateBtn"
+      @updata-log-but="updataLogBut"
+    />
+    <CodePage v-model:is-show="codeIsShow" :list-data="state" />
+
+    <el-drawer
+      v-model="state.previewVisible"
+      title="列表预览"
+      direction="btt"
+      :before-close="handlePreviewClose"
+      size="90%"
+    >
+      <ak-page-list
+        :data="state.tableData"
+        :search-data="state.searchData"
+        :config="state.config"
+        :form-id="props.appPageKey"
+        :viewPage="stateList.view"
+        v-if="state.previewVisible"
+      />
+    </el-drawer>
+  </el-main>
+  <el-aside class="asideBox">
+    <el-tabs ref="multipleTableRef" v-model="formTableActive" @tab-click="handleClick">
+      <el-tab-pane label="字段设置" :name="1">
+        <el-divider content-position="left">功能字段</el-divider>
+        <div class="form_tabs">
+          <el-table
+            ref="tableFieldAttrBut"
+            :data="tableAttrLogButtonList"
+            border
+            style="width: 100%"
+            @selection-change="tableFieldAttrButClick"
+          >
+            <el-table-column fixed type="selection" width="40" align="center" />
+            <el-table-column prop="label" label="字段" />
+            <el-table-column fixed="right" label="设置" width="55" align="center">
+              <template #default="scope">
+                <el-icon
+                  v-if="scope.row.fieldClass == '__control'"
+                  title="设置"
+                  @click="setUpFieldBut(scope.row)"
+                  class="shoushi"
+                  ><Setting
+                /></el-icon>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-divider content-position="left">列表字段</el-divider>
+        <div class="form_tabs">
+          <el-table
+            ref="tableFieldList"
+            :data="formTableField.masterTable"
+            border
+            @selection-change="tableListFieldClick"
+            style="width: 100%"
+          >
+            <el-table-column fixed type="selection" width="40" align="center" />
+            <el-table-column prop="label" label="字段">
+              <template #default="scope">
+                {{ scope.row.label }}({{ scope.row.fieldClass }}[{{ scope.row.pattern }}])
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="查询" width="55" align="center">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.isSearch"
+                  :active-action-icon="View"
+                  :inactive-action-icon="Hide"
+                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+                  @change="addOrDelSearchField(scope.row, $event)"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="列表设置" :name="2">
+        <el-divider content-position="left">开启视图</el-divider>
+        <div class="demo_collapse">
+          <el-collapse v-value="activeName" @change="handleChange">
+            <el-collapse-item
+              name="list"
+              :class="state.view.list.status ? 'isTrueItem' : ''"
+              :disabled="!state.view.list.status"
+            >
+              <template #title>
+                <div class="collapse-title">
+                  <div>
+                    <i class="fa fa-table"></i>
+                    <el-text>列表视图</el-text>
+                  </div>
+                  <el-switch
+                    v-if="1 == 0"
+                    class="openOfClose"
+                    v-model="state.view.list.status"
+                    @click.stop="showCollapse"
+                  />
+                </div>
+              </template>
+              <div>
+                <el-form
+                  label-position="top"
+                  label-width="auto"
+                  :model="state.view.list.form"
+                  style="max-width: 600px"
+                >
+                  <el-form-item label="标题字段">
+                    <el-select
+                      v-model="state.view.list.form.title"
+                      multiple
+                      placeholder="请选择标题字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="排序字段">
+                    <el-select
+                      v-model="state.view.list.form.sortWord"
+                      placeholder="请选择排序字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序方式">
+                    <el-radio-group v-model="state.view.list.form.sort">
+                      <el-radio :label="1">降序</el-radio>
+                      <el-radio :label="2">升序</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <el-collapse-item
+              title="Consistency"
+              name="card"
+              :class="state.view.card.status ? 'isTrueItem' : ''"
+              :disabled="!state.view.card.status"
+            >
+              <template #title>
+                <div class="collapse-title">
+                  <div>
+                    <i class="fa fa-id-card-o"></i>
+                    <el-text>卡片视图</el-text>
+                  </div>
+                  <el-switch
+                    class="openOfClose"
+                    v-model="state.view.card.status"
+                    :disabled="isCardTrue"
+                    @click.stop="showCollapse"
+                  />
+                </div>
+              </template>
+              <div>
+                <el-form
+                  label-position="top"
+                  label-width="auto"
+                  :model="state.view.card.form"
+                  style="max-width: 600px"
+                >
+                  <el-form-item label="标题字段">
+                    <el-select
+                      v-model="state.view.card.form.title"
+                      multiple
+                      placeholder="请选择标题字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="图片字段">
+                    <el-select
+                      v-model="state.view.card.form.imgWork"
+                      placeholder="请选择图片字段"
+                    >
+                      <el-option
+                        v-for="item in cardKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="图片宽度与高度">
+                    <el-input
+                      v-model="state.view.card.form.imgWidth"
+                      placeholder="请输入图片宽度"
+                    >
+                      <template #prepend>宽度</template>
+                      <template #suffix>PX</template>
+                    </el-input>
+                    <el-input
+                      v-model="state.view.card.form.imgHeight"
+                      placeholder="请输入图片高度"
+                      style="margin-top: 10px"
+                    >
+                      <template #prepend>高度</template>
+                      <template #suffix>PX</template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="图片圆角">
+                    <el-input
+                      v-model="state.view.card.form.imgBorderRadius"
+                      placeholder="请输入图片圆角"
+                      style="margin-top: 10px"
+                    >
+                      <template #prepend>圆角</template>
+                      <template #suffix>PX</template>
+                    </el-input>
+                  </el-form-item>
+
+                  <el-form-item label="图片边框缩进">
+                    <el-input
+                      v-model="state.view.card.form.imgPadding"
+                      placeholder="请输入图片边框缩进"
+                      style="margin-top: 10px"
+                    >
+                      <template #prepend>缩进</template>
+                      <template #suffix>PX</template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="卡片标题">
+                    <el-select
+                      v-model="state.view.card.form.titleWork"
+                      placeholder="请选择时间轴段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="卡片标题描述">
+                    <el-select
+                      v-model="state.view.card.form.describe"
+                      placeholder="请选择时间轴段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="每行几列">
+                    <el-input
+                      v-model="state.view.card.form.ranks"
+                      placeholder="请输入每行几列"
+                      style="margin-top: 10px"
+                    >
+                      <template #suffix>列</template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="排序字段">
+                    <el-select
+                      v-model="state.view.card.form.sortWord"
+                      placeholder="请选择时间轴段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序方式">
+                    <el-radio-group v-model="state.view.card.form.sort">
+                      <el-radio :label="1">降序</el-radio>
+                      <el-radio :label="2">升序</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+            <el-collapse-item
+              title="Consistency"
+              name="date"
+              :class="state.view.date.status ? 'isTrueItem' : ''"
+              :disabled="!state.view.date.status"
+            >
+              <template #title>
+                <div class="collapse-title">
+                  <div>
+                    <i class="fa fa-calendar"></i>
+                    <el-text>日历视图</el-text>
+                  </div>
+                  <el-switch
+                    class="openOfClose"
+                    v-model="state.view.date.status"
+                    @click.stop="showCollapse"
+                  />
+                </div>
+              </template>
+              <div>
+                <el-form
+                  label-position="top"
+                  label-width="auto"
+                  :model="state.view.date.form"
+                  style="max-width: 600px"
+                >
+                  <el-form-item label="标题字段">
+                    <el-select
+                      v-model="state.view.date.form.title"
+                      multiple
+                      placeholder="请选择标题字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item>
+                    <span slot="label">
+                      时间跨度
+                      <el-tooltip
+                        class="box-item"
+                        effect="dark"
+                        content="假如一个任务今天开始，明天结束。日历列表中用区间日期展示这一条信息。"
+                        placement="top"
+                      >
+                        <i class="fa fa-question-circle-o"></i>
+                      </el-tooltip>
+                    </span>
+                    <el-select
+                      v-model="state.view.date.form.startTime"
+                      clearable
+                      placeholder="请选择开始时间"
+                    >
+                      <template #prefix>从</template>
+                      <el-option
+                        v-for="item in timeKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                    <el-select
+                      v-model="state.view.date.form.endTime"
+                      clearable
+                      placeholder="请选择结束时间"
+                      style="margin-top: 10px"
+                    >
+                      <template #prefix>至</template>
+                      <el-option
+                        v-for="item in timeKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="默认展示">
+                    <el-select
+                      v-model="state.view.date.form.dayType"
+                      clearable
+                      placeholder="请选择展示方式"
+                    >
+                      <el-option label="月" :value="1" />
+                      <el-option label="周" :value="2" />
+                      <el-option label="日" :value="3" />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <el-collapse-item
+              title="Consistency"
+              name="time"
+              :class="state.view.time.status ? 'isTrueItem' : ''"
+              :disabled="!state.view.time.status"
+            >
+              <template #title>
+                <div class="collapse-title">
+                  <div>
+                    <i class="fa fa-clock-o"></i>
+                    <el-text>时间轴</el-text>
+                  </div>
+                  <el-switch
+                    class="openOfClose"
+                    v-model="state.view.time.status"
+                    @click.stop="showCollapse"
+                  />
+                </div>
+              </template>
+              <div>
+                <el-form
+                  label-position="top"
+                  label-width="auto"
+                  :model="state.view.time.form"
+                  style="max-width: 600px"
+                >
+                  <el-form-item label="标题字段">
+                    <el-select
+                      v-model="state.view.time.form.title"
+                      multiple
+                      placeholder="请选择标题字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="时间轴字段">
+                    <el-select
+                      v-model="state.view.time.form.sortWord"
+                      placeholder="请选择时间轴段"
+                    >
+                      <el-option
+                        v-for="item in timeKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序方式">
+                    <el-radio-group v-model="state.view.time.form.sort">
+                      <el-radio :label="1">降序</el-radio>
+                      <el-radio :label="2">升序</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <el-collapse-item
+              title="Consistency"
+              name="gantt"
+              :class="state.view.gantt.status ? 'isTrueItem' : ''"
+              :disabled="!state.view.gantt.status"
+            >
+              <template #title>
+                <div class="collapse-title">
+                  <div>
+                    <i class="fa fa-bar-chart fa-rotate-0"></i>
+                    <el-text>甘特图</el-text>
+                  </div>
+                  <el-switch
+                    class="openOfClose"
+                    v-model="state.view.gantt.status"
+                    @click.stop="showCollapse"
+                  />
+                </div>
+              </template>
+              <div>
+                <el-form
+                  label-position="top"
+                  label-width="auto"
+                  :model="state.view.gantt.form"
+                  style="max-width: 600px"
+                >
+                  <el-form-item label="标题字段">
+                    <el-select
+                      v-model="state.view.gantt.form.title"
+                      multiple
+                      placeholder="请选择标题字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="时间设置">
+                    <el-select
+                      v-model="state.view.gantt.form.startTime"
+                      clearable
+                      placeholder="请选择开始时间"
+                    >
+                      <template #prefix>开始时间</template>
+                      <el-option
+                        v-for="item in timeKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                    <el-select
+                      v-model="state.view.gantt.form.endTime"
+                      clearable
+                      placeholder="请选择结束时间"
+                      style="margin-top: 10px"
+                    >
+                      <template #prefix>结束时间</template>
+                      <el-option
+                        v-for="item in timeKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="默认时间刻度">
+                    <el-select
+                      v-model="state.view.gantt.form.dayType"
+                      clearable
+                      placeholder="请选择展示方式"
+                    >
+                      <el-option label="时" :value="1" />
+                      <el-option label="日" :value="2" />
+                      <el-option label="周" :value="3" />
+                      <el-option label="月" :value="4" />
+                      <el-option label="季" :value="5" />
+                      <el-option label="年" :value="6" />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序字段">
+                    <el-select
+                      v-model="state.view.gantt.form.sortWord"
+                      placeholder="请选择时间轴段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序方式">
+                    <el-radio-group v-model="state.view.gantt.form.sort">
+                      <el-radio :label="1">降序</el-radio>
+                      <el-radio :label="2">升序</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+
+            <el-collapse-item
+              title="Consistency"
+              name="map"
+              :class="state.view.map.status ? 'isTrueItem' : ''"
+              :disabled="!state.view.map.status"
+            >
+              <template #title>
+                <div class="collapse-title">
+                  <div>
+                    <i class="fa fa-map-signs"></i>
+                    <el-text>地图视图</el-text>
+                  </div>
+                  <el-switch
+                    class="openOfClose"
+                    v-model="state.view.map.status"
+                    :disabled="isMapTrue"
+                    @click.stop="showCollapse"
+                  />
+                </div>
+              </template>
+              <div>
+                <el-form
+                  label-position="top"
+                  label-width="auto"
+                  :model="state.view.map.form"
+                  style="max-width: 600px"
+                >
+                  <el-form-item label="标题字段">
+                    <el-select
+                      v-model="state.view.map.form.title"
+                      multiple
+                      placeholder="请选择标题字段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="位置字段">
+                    <el-select
+                      v-model="state.view.map.form.mapWord"
+                      placeholder="请选择位置字段"
+                    >
+                      <el-option
+                        v-for="item in mapKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序字段">
+                    <el-select
+                      v-model="state.view.map.form.sortWord"
+                      placeholder="请选择时间轴段"
+                    >
+                      <el-option
+                        v-for="item in allKeyWords"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="排序方式">
+                    <el-radio-group v-model="state.view.map.form.sort">
+                      <el-radio :label="1">降序</el-radio>
+                      <el-radio :label="2">升序</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+        <el-divider content-position="left">功能按钮</el-divider>
+        <div class="form_tabs">
+          <el-table
+            ref="tableAttrBut"
+            :data="tableButtonList"
+            border
+            style="width: 100%"
+            @selection-change="tableAttrButClick"
+          >
+            <el-table-column fixed type="selection" width="40" align="center" />
+            <el-table-column prop="label" label="字段" />
+          </el-table>
+        </div>
+        <el-divider content-position="left">基本功能设置</el-divider>
+        <div class="form_tabs">
+          <el-form :model="state.config" label-width="auto">
+            <el-form-item label="每页显示数据得数量">
+              <el-input-number
+                v-model="state.config.pageSize"
+                class="mx-4"
+                :min="1"
+                :max="10000"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="数据添加编辑打开方式">
+              <el-select
+                v-model="state.config.openPageMode"
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="itemOpt in diaOrDrawer"
+                  :key="itemOpt.value"
+                  :label="itemOpt.label"
+                  :value="itemOpt.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="可折叠查询表单">
+              <el-switch
+                v-model="state.config.searchFormIsShow"
+                :active-action-icon="View"
+                :inactive-action-icon="Hide"
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+        <el-divider content-position="left">数据处理事件</el-divider>
+        <div class="form_tabs">
+          <el-form :model="state.formApi" label-width="auto">
+            <el-form-item label="数据处理方式">
+              <el-switch
+                v-model="state.formApi.type"
+                active-text="默认"
+                inactive-text="第三方API"
+                active-value="1"
+                inactive-value="2"
+                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff"
+              />
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="填加APIUrl">
+              <el-input v-model="state.formApi.addApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="编辑APIUrl">
+              <el-input v-model="state.formApi.editApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="删除APIUrl">
+              <el-input v-model="state.formApi.delApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="state.formApi.type != 1" label="查看APIUrl">
+              <el-input v-model="state.formApi.lookApiUrl" placeholder="请输入接口地址">
+                <template #prefix>http://</template>
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </el-aside>
 </template>
-<style  lang='scss' scoped>
-.asideBox{
-	height: calc(100vh - 40px);
-	width: 300px;
-	overflow-y : auto;
-	.form_tabs{
-		padding: 0 10px;
-	}
-	.shoushi{
-		cursor:pointer;
-	}
+<style lang="scss" scoped>
+.asideBox {
+  height: calc(100vh - 40px);
+  width: 300px;
+  overflow-y: auto;
+  .form_tabs {
+    padding: 0 10px;
+  }
+  .shoushi {
+    cursor: pointer;
+  }
 }
 
-.mainBox{
-	border-left: 1px solid #ECECEC;
-	border-right: 1px solid #ECECEC;
-	padding: 0;
-	overflow-y : auto;
-	.table_box{
-		background: #fff;
-		border: 1px dashed #999;
-		margin: 10px;
-		height: calc(100vh - 100px);
-		overflow-y: auto;
-		overflow-x: hidden;
-		position: relative;
-		.table-tip{
-			color: #999;
-			padding: 30px 0;
-			line-height: 22px;
-		}
-		.operateButArea{
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			margin-top:15px;
-			.operatLeft{
-				padding-bottom: 2px;
-			}
-		}
-	}
-	.main_table{
-		padding: 10px 20px;
-		
-	}
+.mainBox {
+  border-left: 1px solid #ececec;
+  border-right: 1px solid #ececec;
+  padding: 0;
+  overflow-y: auto;
+  .table_box {
+    background: #fff;
+    border: 1px dashed #999;
+    margin: 10px;
+    height: calc(100vh - 100px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    .table-tip {
+      color: #999;
+      padding: 30px 0;
+      line-height: 22px;
+    }
+    .operateButArea {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 15px;
+      .operatLeft {
+        padding-bottom: 2px;
+      }
+    }
+  }
+  .main_table {
+    padding: 10px 20px;
+  }
 }
-.cell{
-		min-width:120px;
-	}
-.field_close{
-	i{
-		display: none;
-		cursor: pointer;
-	}
-	
+.cell {
+  min-width: 120px;
 }
-.field_close:hover{
-	i{
-		display: inline;
-		cursor: pointer;
-	}
-	
+.field_close {
+  i {
+    display: none;
+    cursor: pointer;
+  }
 }
-.tipBox{
-	border: 1px dotted #ddd;
-    padding: 3px 5px;
-    border-radius: 5px;
-    color: #999;
-    text-align: center;
+.field_close:hover {
+  i {
+    display: inline;
     cursor: pointer;
+  }
+}
+.tipBox {
+  border: 1px dotted #ddd;
+  padding: 3px 5px;
+  border-radius: 5px;
+  color: #999;
+  text-align: center;
+  cursor: pointer;
 }
 
-.demo_collapse{
-	padding: 0 10px;
-
-	:deep .el-collapse{
-		border: 0px;
-		
-	}
-	:deep .el-collapse-item__header {
-		padding-left:5px;
-		border: 1px solid #eeeeee;
-		border-radius:10px;
-		
-	}
-	:deep .el-collapse-item{
-		border-radius: 10px 10px;
-		background-color: rgb(245, 247, 250) !important;
-		margin-bottom: 10px;
-		.el-collapse-item__wrap{
-			background-color: rgb(245, 247, 250) !important;
-		}
-		
-		.collapse-title{
-			i{
-				padding:0 5px 0 0;
-			}
-		}
-		.openOfClose{
-			margin:9px 9px 0 0;
-		}
-
-		
-
-
-	}
-	:deep .el-collapse-item:last-child{
-		margin-bottom:0;
-	}
-	
-	:deep .el-collapse-item__content {
-		
-		padding-left: 10px;
-		padding-bottom:0px;
-		padding-top: 10px;
-	}
+.demo_collapse {
+  padding: 0 10px;
+
+  :deep .el-collapse {
+    border: 0px;
+  }
+  :deep .el-collapse-item__header {
+    padding-left: 5px;
+    border: 1px solid #eeeeee;
+    border-radius: 10px;
+  }
+  :deep .el-collapse-item {
+    border-radius: 10px 10px;
+    background-color: rgb(245, 247, 250) !important;
+    margin-bottom: 10px;
+    .el-collapse-item__wrap {
+      background-color: rgb(245, 247, 250) !important;
+    }
 
-	:deep .collapse-title {
-		flex: 1 0 90%;
-		order: 1;
-		display: flex;
-		justify-content: space-between;
-		
-		.el-collapse-item__header {
-			flex: 1 0 auto;
-			order: -1;
-		}
-	}
+    .collapse-title {
+      i {
+        padding: 0 5px 0 0;
+      }
+    }
+    .openOfClose {
+      margin: 9px 9px 0 0;
+    }
+  }
+  :deep .el-collapse-item:last-child {
+    margin-bottom: 0;
+  }
+
+  :deep .el-collapse-item__content {
+    padding-left: 10px;
+    padding-bottom: 0px;
+    padding-top: 10px;
+  }
+
+  :deep .collapse-title {
+    flex: 1 0 90%;
+    order: 1;
+    display: flex;
+    justify-content: space-between;
+
+    .el-collapse-item__header {
+      flex: 1 0 auto;
+      order: -1;
+    }
+  }
 }
-.isTrueItem{
-	:deep .el-collapse-item__header{
-		color:#79bbff;
-		background-color: #c6e2ff;
-	}
-	.el-text{
-		color:#337ecc;
-	}	
+.isTrueItem {
+  :deep .el-collapse-item__header {
+    color: #79bbff;
+    background-color: #c6e2ff;
+  }
+  .el-text {
+    color: #337ecc;
+  }
 }
 </style>