hxgksystemapp/src/views/sysworkflow/lowcodepage/pageList.vue

<!--
@ 作者: 秦东
@ 时间: 2024-03-18 11:32:14
@ 备注: 自定义表单列表
-->
<script lang='ts' setup>
import { ElTable } from 'element-plus'
import { Hide, View } from '@element-plus/icons-vue'
import { attrButton,tableButton,tableButtonList,tableLogButtonList,tableAttrLogButtonList,diaOrDrawer } from '@/api/DesignForm/tableButton'

import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index'
import { gainFormTableField,editCustomerFormList,gainFormListCont } from '@/api/DesignForm/requestapi'
import { formTableField,formTabelStruct } from "@/api/DesignForm/type";

import tempOtherUnit from '@/components/DesignForm/pageList/types'
import { ElMessage } from 'element-plus'

import Sortable from 'sortablejs'
//引入子组件
import PageListHeadTools from '@/views/sysworkflow/lowcodepage/pageListHeadTools.vue'
import ControlSetup  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue'
import FieldSetUp  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/fieldSetUp.vue'
import SearchField  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue'
import PreviewPage  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue'
import CodePage  from '@/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue'


const props = defineProps({
	formKey:{
		type:String,
		default:""
	},
	formVersion:{
		type:String,
		default:""
	},
	tabsActive:{
		type:Number,
		default:1
	},
	state:{
		type:Object,
		default(){
			return {}
		}
	}
});

const emits = defineEmits<{
    (e: 'update:state', val: formStruct): void
	(e: 'update:formKey', val: string): void
	(e: 'update:formVersion', val: string): void
	(e: 'judgeFlowIsEdit', val: boolean): void
	(e: 'runNextWindows', val: number): void
	(e: 'closeFormPage'): void
}>()

const statePro =  computed({
	get() {
		return props.state
	},
	set(val: formStruct) {
		emits('update:state', val)
	}
});

const formTableActive = ref(1)
const pageLoading = ref(false)
//自定义列表结构
const state = reactive({
    tableData: {
      // tableProps: {}, //表格所有参数
      columns: [],
      config: {},
	  controlBtn:[],
	  operateBtn:[]
    },
    searchData: [],
    loading: false,
    attrObj: {},
    config: {
		pageSize:10,
		searchIsShow:true,
		searchFormIsShow:true,
		openPageMode:"drawer"
	},
    tagList: {},
    formId: props.formKey.toString() || '',
    formList: [], // 所有可选表单数据源
    name: '',
    treeData: {}, // 左侧树相关
    previewVisible: false,
    tabsName: 'second',
    formFieldList: [], // 表单数据源所有可选字段
	formApi:{
		type:"1",
		addApiUrl:"",
		editApiUrl:"",
		delApiUrl:"",
		lookApiUrl:""
	},
    dict: {},
    refreshTable: true
})

const kaif = (id: number, callback?: (list: any) => void) => {
	// const content = stringToObj(props.state.formData)
	console.log('获取当前数据下所有字段',statePro.value.formData)
	filterFiled(statePro.value.formData)
	callback && callback(statePro.value.formData.list)

	console.log('获取当前数据下所有字段--->',state.formFieldList)
}
const filterFiled = (obj: any) => {
    obj?.list.forEach((item: FormList) => {
      if (item.type === 'grid' || item.type === 'tabs') {
        item.columns.forEach((col: FormList) => {
          filterFiled(col)
        })
      } else if (['card', 'div'].includes(item.type)) {
        filterFiled(item)
      } else if (!excludeType.includes(item.type) && item.name) {
        state.formFieldList.push({
          prop: item.name,
          label: item.formItem?.label,
          help: item.config.help || ''
        })
      }
    })
  }
const excludeType = [
    'txt',
    'title',
    'table',
    'component',
    'upload',
    'button',
    'tinymce',
    'inputSlot',
    'flex'
  ]

const powerUnitAry = ref<any>({
	nodeKey:"",
	recUnitAry:{
		masterUnitList:[],
		sunUnitList:[],
		unitAllKey:[],
		unitAllState:[]
	}
})
const formTableField = reactive<formTableField>({})
/**
@ 作者: 秦东
@ 时间: 2024-03-13 08:24:54
@ 功能: 解析表单
*/
const jieForm = () => {
	// analysisForm({nodeKey:"begin",nodeJson:JSON.stringify(statePro.value.formData)})
	// 	.then((data)=>{
	// 		if(data.code == 0){
	// 			powerUnitAry.value = data.data
	// 		}
	// 	})
	if(props.formKey != ""){
		gainFormTableField({id:props.formKey.toString()})
			.then((data)=>{
				console.log('解析表单--->',data)
				formTableField.masterTable=data.data.masterTable
				formTableField.sunTable=data.data.sunTable
			})
	}
	
}
const handleSelectionChange = (val: User[]) => {
	console.log('表单选中--->',val)
}
// watch(()=>statePro.value,()=>{
// 	jieForm()
// },
// {
// 	deep: true
// })
watch(()=>props.tabsActive,(val:number)=>{
	if(val == 3){
		jieForm();
		getListInfo();
	}
})
onMounted(()=>{
	jieForm();
	nextTick(() => {
      	columnDrop()
		getListInfo();
    })
})
const setUpFieldInfo = ref<tableButton>()
const setUpFieldIsOpen= ref(false)

const tableAttrBut = ref<InstanceType<typeof ElTable>>()
/**
@ 作者: 秦东
@ 时间: 2024-03-25 11:51:46
@ 功能: 设置字段属性
*/
const setUpField = (val:any) =>{
	console.log("设置字段属性-->",val)
	setUpFieldInfo.value = val
	
	setUpFieldIsOpen.value = true

	console.log("设置字段属性-1->",setUpFieldIsOpen)
}
/**
@ 作者: 秦东
@ 时间: 2024-03-27 09:17:15
@ 功能: 设置功能按钮
*/
const listButtonIsShow = ref(false)
const setUpFieldBut = () => {
	// console.log("设置字段属性-->")
	listButtonIsShow.value = true
}
//功能按钮
const tableAttrButClick = (val:tableButton[]) => {
	if(zhuDaunIsTrue.value == true){
		if(state.tableData.controlBtn.length > 0){
			state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length);
			state.tableData.controlBtn = val
		}else{
			state.tableData.controlBtn = val
		}
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-03-25 14:58:22
@ 功能: 功能字段
*/
const tableFieldAttrButClick = (val:tableButton[]) => {
	if(zhuDaunIsTrue.value == true){
		if(val.length > 0){	//判断是否有选中的字段
			if(state.tableData.columns.length > 0){	//判断列表是否有数据
				val.forEach((item:tableButton)=>{
					let isTrue = true;
					state.tableData.columns.forEach((itemTab:tableButton)=>{
						if(item.id == itemTab.id){
							isTrue = false;
						}
					});
					if(isTrue){
						state.tableData.columns.push(item)
					}
				})
			}else{ //列表无数据,直接新增
				val.forEach((item:tableButton)=>{
					state.tableData.columns.push(item)
				})
			}
			//此处往下是处理列表中有为选中的字段
			let delField = []
			tableAttrLogButtonList.forEach((item:tableButton)=>{
				let isTrue = true;
				val.forEach((itemVal:tableButton)=>{
					if(item.id == itemVal.id){
						isTrue = false
					}
				})
				if(isTrue){
					delField.push(item.id)
				}
			});
			if(delField.length > 0){
				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
					delField.forEach((item:string)=>{
						if(item == itemTab.id){
							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
						}
					})
					
				});
			}
		}else{ //无选中的字段
			if(state.tableData.columns.length > 0){
				tableAttrLogButtonList.forEach((item:tableButton)=>{
					state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
						if(item.id == itemTab.id){
							state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
						}
					});
				});
			}
		}
		if(state.tableData.columns.length > 0){
			let isOpent = true;
			state.tableData.columns.forEach((itemTab:tableButton)=>{
				if(itemTab.fieldClass == "__control"){
					isOpent = false;
				}
			});
			if(isOpent){
				state.tableData.operateBtn = [];
			}
		}else{
			state.tableData.operateBtn = [];
		}
	}
}
const zhuDaunIsTrue = ref(false);
/**
@ 作者: 秦东
@ 时间: 2024-03-25 16:36:38
@ 功能: 列表字段处理
*/
const tableListFieldClick = (val:any[]) => {
	console.log("列表字段处理-->",val)
	// zhuDaunIsTrue.value = true
	if(zhuDaunIsTrue.value == true){
	if(val.length > 0){
		if(state.tableData.columns.length > 0){	//判断列表是否有数据
			val.forEach((item:tableButton)=>{
				let isTrue = true;
				state.tableData.columns.forEach((itemTab:tableButton)=>{
					if(item.id == itemTab.id){
						console.log("列表字段处理-111->",val)
						isTrue = false;
					}
				});
				if(isTrue){
					state.tableData.columns.push(item)
				}
			})
		}else{ //列表无数据,直接新增
			val.forEach((item:any)=>{
				state.tableData.columns.push(item)
			})
		}
		//此处往下是处理列表中有为选中的字段
		let delField = []
		formTableField.masterTable.forEach((item:tableButton)=>{
			let isTrue = true;
			val.forEach((itemVal:tableButton)=>{
				if(item.id == itemVal.id){
					isTrue = false
				}
			})
			if(isTrue){
				delField.push(item.id)
			}
		});
		if(delField.length > 0){
			state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
				delField.forEach((item:string)=>{
					if(item == itemTab.id){
						state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
					}
				})
				
			});
		}
	}else{
		if(state.tableData.columns.length > 0){
			formTableField.masterTable.forEach((item:tableButton)=>{
				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
					if(item.id == itemTab.id){
						state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
					}
				});
			});
		}
	}
}
}

const container = ref()
//拖动字段排序
const columnDrop = () => {
    const wrapperTr = container.value.querySelector(
      	'.el-table__header-wrapper tr'
    )
	console.log("wrapperTr",wrapperTr)
    Sortable.create(wrapperTr, {
		animation: 180,
		delay: 0,
		onEnd: (evt: any) => {
			console.log("evt",evt.oldIndex,evt.newIndex)
			const oldItem = state.tableData.columns[evt.oldIndex]
			state.tableData.columns.splice(evt.oldIndex, 1)
			state.tableData.columns.splice(evt.newIndex, 0, oldItem)
			// 重染表格，否则点下面的设置对不上了
			state.refreshTable = false
			nextTick(() => {
				state.refreshTable = true
				nextTick(() => {
					columnDrop() // 拖完后拖不到了，再执行一下
				})
			})
		}
    })
}

const tableFieldList = ref<InstanceType<typeof ElTable>>()
const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>()

/**
@ 作者: 秦东
@ 时间: 2024-03-27 08:27:22
@ 功能: 删除表头列表字段
*/
const delCol = (val:any) => {
	let delInfo = []
	let delInfoBut = []
	if(state.tableData.columns.length > 0) {
		
		state.tableData.columns.forEach((item: any, index: number) => {
			if (item.id === val.id) {
				state.tableData.columns.splice(index, 1)
				if(item.attribute == "-"){
					delInfoBut.push(item)
				}else{
					delInfo.push(item)
				}
			}
			
		})
		
		// tableFieldList.value!.toggleRowSelection(delInfo, true)
		console.log("delInfo",delInfo)
		// tableFieldList.value!.clearSelection()
	}else{
		tableFieldList.value!.clearSelection()
		tableFieldAttrBut.value!.clearSelection()
	}
	if(delInfo.length > 0){
		delInfo.forEach((item:any)=>{
			tableFieldList.value!.toggleRowSelection(item, false)
		})
	}
	if(delInfoBut.length > 0){
		delInfoBut.forEach((item:any)=>{
			tableFieldAttrBut.value!.toggleRowSelection(item, false)
		})
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-03-27 10:13:34
@ 功能: 更新列表记录操作按钮
*/
const updataLogBut = (val:attrButton[]) => {
	console.log("更新列表记录操作按钮",val)
	let isWrete = true
	if(state.tableData.columns && state.tableData.columns.length > 0){
		state.tableData.columns.forEach((item:any)=>{
			if(item.fieldClass == "__control"){
				state.tableData.operateBtn = val.value
				isWrete = false
			}
		})
	}
	if(isWrete){
		state.tableData.operateBtn = [];
	}
	// console.log("更新列表记录操作按钮------1------->",state.tableData.operateBtn)
}

/**
@ 作者: 秦东
@ 时间: 2024-03-28 15:00:12
@ 功能: 处理查询条件
*/
const addOrDelSearchField = (val:attrButton,isTrue:boolean) => {
	if(isTrue){
		if(state.searchData.length>0){
			let isWrite = true;
			state.searchData.forEach((item:attrButton,index:number)=>{
				if(item.id==val.id){
					isWrite = false;
				}
			})
			if(isWrite){
				state.searchData.push(val)
			}
		}else{
			state.searchData.push(val)
		}
	}else{
		if(state.searchData.length>0){
			state.searchData.forEach((item:attrButton,index:number)=>{
				if(item.id==val.id){
					state.searchData.splice(index,1)
				}
			})
		}
	}
}

// 定义自定义表头
const readerColumn = (column:any) => {
	// console.log(column)
	let labelLong = column.label.length // 表头label长度
	if(column.label.length < 3) {
		labelLong = 3
	}
	let size = 30 // 根据需求定义一个字体的标尺
	// column.minWidth = labelLong * size
	//@ts-ignore
	return labelLong * size
}

const adaptiveWidth = (colName: any) =>{
    if (!colName) {
        return
    }
    colName += ''
    const english = /\w+/
    let colWidth = 0
    for (const char of colName) {
        if (english.test(char)) {
            colWidth += 30
        } else {
            colWidth += 30
        }
    }
    return colWidth
}
const codeIsShow = ref(false)	//生成代码
/**
@ 作者: 秦东
@ 时间: 2024-03-29 11:12:26
@ 功能: 列表头部按钮操作
*/
const listPageTools = (type: string) => {
	console.log("列表头部操作--》",type)
	switch(type){
		case "del":
			clearData()
			break;
		case "eye":
			state.previewVisible = true
			break;
		case "json":
			drawer.title = "查看表格列表结构"
			dialogOpen(state, { direction: 'ltr', type: 'json' })
			break;
		case "save":
			saveFormListData()
			break;
		default:
	}
}

/**
@ 作者: 秦东
@ 时间: 2024-03-29 14:42:39
@ 功能: 关闭预览
*/
const handlePreviewClose = () => {
	state.previewVisible = false
}
const drawer = reactive({
    visible: false,
    title: '',
    direction: 'ltr',
    content: '',
    codeType: ''
})
/**
@ 作者: 秦东
@ 时间: 2024-03-29 14:08:49
@ 功能: 数据格式处理
*/
const dialogOpen = (obj: any, params: any = {}) => {
    drawer.visible = true
    Object.assign(drawer, { direction: 'ltr' }, params)
    let editData = objToStringify(obj, true)
    switch (params.type) {
      case 'dict':
        editData = json2string(obj, true)
        break
      case 'beforeRequest':
      case 'beforeDelete':
      case 'treeBeforeRequest':
        if (!obj) {
          editData = beforeRequest
        }
        break
      case 'afterResponse':
      case 'treeAfterResponse':
        if (!obj) {
          editData = afterResponse
        }
        break
    }
    drawer.content = editData
}
/**
@ 作者: 秦东
@ 时间: 2024-03-29 11:02:51
@ 功能: 清空数据
*/
const clearData = () => {
	tableFieldList.value!.clearSelection()
	tableFieldAttrBut.value!.clearSelection()
	tableAttrBut.value!.clearSelection()
	state.searchData = []
	// state.tableData.controlBtn = []
	// state.tableData.columns = []
	state.tableData.operateBtn = []
	state.tableData.config = {}
	if(formTableField.masterTable){
		formTableField.masterTable.forEach((item)=>{
			item.isSearch = false;
		})
	}
	
}

/**
@ 作者: 秦东
@ 时间: 2024-03-29 14:58:52
@ 功能: 添加自定义表单列表设定
*/
const saveFormListData = () => {
	const { type ,addApiUrl ,editApiUrl,delApiUrl,lookApiUrl } = state.formApi
	if(!props.formKey || props.formKey == "" || props.formKey == null || props.formKey == undefined){
		return ElMessage.error('未知表单参数！请先保存前置表单后再操作！')
	}
	console.log("添加自定义表单列表设定",state.formApi)
	if(type != 1){
		if(addApiUrl=="" || editApiUrl=="" || delApiUrl=="" || lookApiUrl == ""){
			return ElMessage.error('请补全列表第三方APIUrl！')
		}
	}
	if(state.tableData.columns.length < 1){
		return ElMessage.error('未设置表单查询项！不可提交！')
	}
	let params: any = {
		data: json2string(state),
		id: props.formKey.toString()
	}
	console.log("添加自定义表单列表设定",params)
	editCustomerFormList(params)
		.then((data)=>{
			console.log("添加自定义表单列表设定",data)
			ElMessage.success(data.msg)
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-04-01 08:41:31
@ 功能: 获取列表内容
*/
const getListInfo = () => {
	console.log("获取列表内容1111",props.formKey)
	gainFormListCont({id:props.formKey.toString()})
		.then((data)=>{
			console.log("获取列表内容",data)
			if(data.data.listjson != null && data.data.listjson != ""){
				let stateData = string2json(data.data.listjson)
				console.log("获取列表内容---->",stateData)
				state.tableData = stateData.tableData
				state.searchData = stateData.searchData
				state.loading = stateData.loading
				state.attrObj = stateData.attrObj
				state.config = stateData.config
				state.tagList = stateData.tagList
				state.formId = stateData.formId
				state.formList = stateData.formList
				state.name = stateData.name
				state.treeData = stateData.treeData
				state.previewVisible = stateData.previewVisible
				state.formFieldList = stateData.formFieldList
				state.formApi = stateData.formApi
				state.dict = stateData.dict
				state.refreshTable = stateData.refreshTable
			}
			

			zhuDaunIsTrue.value = false
			
			if(state.tableData && state.tableData.columns && state.tableData.columns.length > 0) {
				
				if(formTableField.masterTable && formTableField.masterTable.length > 0){
					state.tableData.columns.forEach((itemCol:any)=>{
						formTableField.masterTable.forEach((item:any)=>{
							if(itemCol.id == item.id){
								console.log("========>",item)
								item.isSearch = true
								tableFieldList.value!.toggleRowSelection(item, true)
							}
						})
					})
					
				}
				
				if(tableAttrLogButtonList && tableAttrLogButtonList.length > 0){
					state.tableData.columns.forEach((itemCol:any)=>{
						tableAttrLogButtonList.forEach((item:any)=>{
							if(itemCol.id == item.id){
								tableFieldAttrBut.value!.toggleRowSelection(item, true)
							}
						})
					})
				}
				
			// 	// let delInfo = []
			// 	// let delInfoBut = []

			// 	// state.tableData.columns.forEach((item: any) => {
			// 	// 	if(item.fieldClass != "-"){
			// 	// 		delInfo.push(item)
			// 	// 	}else{
			// 	// 		delInfoBut.push(item)
			// 	// 	}
			// 	// 	// tableFieldList.value!.toggleRowSelection(item, true)
			// 	// 	// if
			// 	// 	// tableFieldAttrBut.value!.toggleRowSelection(item, true)
			// 	// })
			// 	// if(delInfo.length > 0){
			// 	// 	delInfo.forEach((item:any)=>{
			// 	// 		tableFieldList.value!.toggleRowSelection(item, true)
			// 	// 	})
			// 	// }
			// 	// if(delInfoBut.length > 0){
			// 	// 	delInfoBut.forEach((item:any)=>{
			// 	// 		tableFieldAttrBut.value!.toggleRowSelection(item, true)
			// 	// 	})
			// 	// }
			}
			
			if(state.tableData && state.tableData.controlBtn && state.tableData.controlBtn.length > 0) {
				
				state.tableData.controlBtn.forEach((itemCol:any)=>{
					tableButtonList.forEach((item:any)=>{
						if(itemCol.id == item.id){
							tableAttrBut.value!.toggleRowSelection(item, true)
						}
					})
				})
			}

			zhuDaunIsTrue.value = true
		})
		
}


</script>
<template>
	<div class="design-containers design-table" v-loading="pageLoading">
		<!-- <div class="components-list">
			<el-divider content-position="left">表格列字段</el-divider>
			<el-table
				ref="multipleTableRef"
				:data="powerUnitAry.recUnitAry.masterUnitList"
				style="width: 100%"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="30" />
				<el-table-column label="栏目">
					<template #default="scope">{{ scope.row.name }}</template>
				</el-table-column>
			</el-table>
		</div> -->
		<div class="main-body">
			<div class="header">
				<div class="field">
				{{props.formKey}}
				</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-tooltip
							v-if="state.config.searchFormIsShow"
							class="box-item"
							effect="dark"
							content="折叠查询表单"
							placement="bottom"
						>
							<el-icon @click="state.config.searchIsShow=!state.config.searchIsShow"><Search /></el-icon>
						</el-tooltip>
					</div>
				</div>
				
				<div class="operateButArea tipBox" v-if="!state.tableData.columns?.length">
					表格列设置区域，可从左上角 添加表格列字段
					选择已有列或直接从上方工具栏 生成脚本预览 编辑
				</div>
				<el-table
					:data="[{}]"
					v-bind="state.tableData.tableProps || {}"
					ref="tableEl"
					
				>
					<template
						v-for="item in state.tableData.columns"
						:key="item.prop || item.label"
					>

						<el-table-column v-bind="item" :width="readerColumn(item)">

							<template #header="scope">
								<div class="field_close">
									<el-text>{{ item.label }}</el-text>
									<i ><el-icon  @click="delCol(item)"><Close /></el-icon></i>
								</div>
								<el-tooltip placement="top" v-if="item.help">
									<template #content>
										<span v-html="item.help"></span>
									</template>
									<i class="icon-help"></i>
								</el-tooltip>
							</template>
							<template #default v-if="item.field !== 'index'">
								<el-checkbox v-if="item.field === 'checkbox'" />
								<span v-if="item.field === 'operate'">操作</span>
								<span v-if="item.field !== 'checkbox'&&item.field !== 'operate'" >数据</span>
							</template>
						</el-table-column>
					</template>
				</el-table>
				<div class="table-tip">
					操作提示：<br />
					*从数据列表配置中选择 所属表单<br />
					*从左上角 添加表格字段 选择预设字段<br />
					*可拖动表头字段移动调整表头字段排列顺序<br />
					*可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br />
				
				</div>
			</div>
		</div>
		<div class="sidebar-tools">
			<el-tabs ref="multipleTableRef" v-model="formTableActive" class="form_tabs" @tab-click="handleClick">
				<el-tab-pane label="字段设置" :name="1">
					<el-divider content-position="left">功能字段</el-divider>
					<el-table ref="tableFieldAttrBut" :data="tableAttrLogButtonList" border  style="width: 100%" @selection-change="tableFieldAttrButClick">
						<el-table-column fixed type="selection" width="40"  align="center" />
						<el-table-column prop="label" label="字段" />
						<el-table-column fixed="right" label="设置" width="55" align="center">
							<template #default="scope">
								<el-icon v-if="scope.row.fieldClass=='__control'" title="设置" @click="setUpFieldBut(scope.row)"><Setting /></el-icon>
							</template>
						</el-table-column>
					</el-table>
					<el-divider content-position="left">列表字段</el-divider>
					<el-table ref="tableFieldList" :data="formTableField.masterTable" border @selection-change="tableListFieldClick"  style="width: 100%">
						<el-table-column fixed type="selection" width="40"  align="center" />
						<el-table-column prop="label" label="字段">
							<template #default="scope">
								{{scope.row.label}}({{scope.row.fieldClass}}[{{scope.row.pattern}}])
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="查询" width="55" align="center">
							<template #default="scope">
								<el-switch
									v-model="scope.row.isSearch"
									:active-action-icon="View"
									:inactive-action-icon="Hide"
									style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
									@change="addOrDelSearchField(scope.row, $event)"
								/>
							</template>
						</el-table-column>
						<!-- <el-table-column fixed="right" label="设置" width="55" align="center">
							<template #default="scope">
								<el-icon title="设置" @click="setUpField(scope.row)"><Setting /></el-icon>
							</template>
						</el-table-column> -->
					</el-table>
					<el-divider content-position="left">查询条件</el-divider>
				</el-tab-pane>
				<el-tab-pane label="列表设置" :name="2">
					
					<el-divider content-position="left">功能按钮</el-divider>
					<el-table ref="tableAttrBut" :data="tableButtonList" border  style="width: 100%" @selection-change="tableAttrButClick">
						<el-table-column fixed type="selection" width="40"  align="center" />
						<el-table-column prop="label" label="字段" />
					</el-table>
					<el-divider content-position="left">基本功能设置</el-divider>
					<el-form :model="state.config" label-width="auto" style="width: 96%; margin-left:2%;">
						<el-form-item label="每页显示数据得数量">
							<el-input-number
								v-model="state.config.pageSize"
								class="mx-4"
								:min="1"
								:max="10000"
								controls-position="right"
							/>
						</el-form-item>
						<el-form-item label="数据添加编辑打开方式">
							
							<el-select
								v-model="state.config.openPageMode"
								clearable
								placeholder="请选择"
							>
								<el-option
									v-for="itemOpt in diaOrDrawer"
									:key="itemOpt.value"
									:label="itemOpt.label"
									:value="itemOpt.value"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="可折叠查询表单">
							<el-switch
								v-model="state.config.searchFormIsShow"
								:active-action-icon="View"
								:inactive-action-icon="Hide"
								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
							/>
						</el-form-item>
					</el-form>
					<el-divider content-position="left">数据处理事件</el-divider>
					<el-form :model="state.formApi" label-width="auto" style="width: 96%; margin-left:2%;">
						<el-form-item label="数据处理方式">
							<el-switch
								v-model="state.formApi.type"
								active-text="默认"
    							inactive-text="第三方API"
								active-value="1"
      							inactive-value="2"
								style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409EFF"
							/>
						</el-form-item>
						<el-form-item v-if="state.formApi.type!=1" label="填加APIUrl">
							<el-input v-model="state.formApi.addApiUrl" placeholder="请输入接口地址">
								<template #prefix>http://</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="state.formApi.type!=1" label="编辑APIUrl">
							<el-input v-model="state.formApi.editApiUrl" placeholder="请输入接口地址">
								<template #prefix>http://</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="state.formApi.type!=1" label="删除APIUrl">
							<el-input v-model="state.formApi.delApiUrl" placeholder="请输入接口地址">
								<template #prefix>http://</template>
							</el-input>
						</el-form-item>
						<el-form-item v-if="state.formApi.type!=1" label="查看APIUrl">
							<el-input v-model="state.formApi.lookApiUrl" placeholder="请输入接口地址">
								<template #prefix>http://</template>
							</el-input>
						</el-form-item>
					</el-form>
					
				</el-tab-pane>
			</el-tabs>
			<!-- {{props.formKey}}
			<br>
			{{props.formVersion}}
			<br>
			{{formTableField}} -->
		</div>  


		<ace-drawer
			v-model="drawer.visible"
			:title="drawer.title"
			:direction="drawer.direction"
			:content="drawer.content"
			:code-type="drawer.codeType"
			@before-close="drawerBeforeClose"
			@confirm="dialogConfirm"
		/>
		<FieldSetUp v-model:is-open="setUpFieldIsOpen" :setup-field-info="setUpFieldInfo" />
		<ControlSetup v-model:is-show="listButtonIsShow" v-model:contbutary:="state.tableData.operateBtn" @updata-log-but="updataLogBut" />
		<CodePage  v-model:is-show="codeIsShow" :list-data="state" />

		<el-drawer
			v-model="state.previewVisible"
			title="列表预览"
			direction="btt"
			:before-close="handlePreviewClose"
			size="90%"
		>
			<ak-page-list
				:data="state.tableData"
				:search-data="state.searchData"
				:config="state.config"
				v-if="state.previewVisible"
			/>

		</el-drawer>
	</div>
</template>
<style  lang='scss' scoped>
.design-containers{
	display: flex;
    background-color: #FFFFFF;
	margin: 0;
	.components-list{
		width: 200px;
		padding:  0;
		overflow-y: auto;
		height: calc(100vh - 40px);
		position: relative;
		overflow-x: hidden;
		border-right: 1px solid #e0e0e0;
	}
}
.form_tabs  > .el-tabs__content{
	padding: 0;
}
.table_box{
	background: #fff;
    border: 1px dashed #999;
    margin: 10px;
    height: calc(100vh - 100px);
    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;
	}
	
}
.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;
}
</style>