完成自定义表单列表清除按钮和生成代码按钮功能展示

src/api/DesignForm/fieldUnit.ts

@@ -0,0 +1,6 @@
+export const inputUnit = ["input","varchar"]
+export const timeUnit = ["time"]
+export const orgUnit = ["org"]
+export const choiceUnit = ["radio"]
+export const switchUnit = ["switch"]
+export const checkboxUnit = ["checkbox"]

src/api/DesignForm/tableButton.ts

@@ -2,7 +2,7 @@ export interface tableButton {
 	id?: string;
 	name?: string;
 	field?: string;
-	types?: string;
+	type?: string;
 	attribute:string;
 	pattern?: string;
 	fieldClass?: string;
@@ -10,6 +10,7 @@ export interface tableButton {
 	inactiveValue?: string;
 	options?: optionsInfo[];
 	config?:any;
+	label?: string;
 }
 export interface optionsInfo {
 	label: string;
@@ -70,10 +71,10 @@ export const tableAttrLogButtonList :tableButton[] = [
 		// attribute:"checkbox"
 
 		id: "checkbox",
-		name: "多选",
+		label: "多选",
 		field:  "checkbox",
-		types: "-",
+		type: "selection",
-		attribute:"",
+		attribute:"-",
 		pattern: "bigint",
 		fieldClass: "-",
 		activeValue: "",
@@ -83,10 +84,10 @@ export const tableAttrLogButtonList :tableButton[] = [
 	{
 
 		id: "serialNumber",
-		name: "序号",
+		label: "序号",
 		field:  "index",
-		types: "-",
+		type: "index",
-		attribute:"",
+		attribute:"-",
 		pattern: "bigint",
 		fieldClass: "-",
 		activeValue: "",
@@ -95,10 +96,10 @@ export const tableAttrLogButtonList :tableButton[] = [
 	},
 	{
 		id: "operate",
-		name: "操作",
+		label: "操作",
 		field:  "operate",
-		types: "-",
+		type: "",
-		attribute:"",
+		attribute:"-",
 		pattern: "bigint",
 		fieldClass: "__control",
 		activeValue: "",
@@ -106,3 +107,14 @@ export const tableAttrLogButtonList :tableButton[] = [
 		options: []
 	}
 ];
+//新增和编辑页面展开方式
+export const diaOrDrawer = [
+	{
+		label:"抽屉",
+		value:"drawer"
+	},
+	{
+		label:"弹窗",
+		value:"dialog"
+	}
+]

src/views/sysworkflow/lowcodepage/pageList.vue

@@ -5,8 +5,8 @@
 -->
 <script lang='ts' setup>
 import { ElTable } from 'element-plus'
-
+import { Hide, View } from '@element-plus/icons-vue'
-import { attrButton,tableButton,tableButtonList,tableLogButtonList,tableAttrLogButtonList } from '@/api/DesignForm/tableButton'
+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'
@@ -21,6 +21,9 @@ 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({
@@ -73,10 +76,14 @@ const state = reactive({
 	  controlBtn:[],
 	  operateBtn:[]
     },
-    searchData: {},
+    searchData: [],
     loading: false,
     attrObj: {},
-    config: {},
+    config: {
+		searchIsShow:true,
+		searchFormIsShow:true,
+		openPageMode:"drawer"
+	},
     tagList: {},
     formId: props.formKey || '',
     formList: [], // 所有可选表单数据源
@@ -85,6 +92,12 @@ const state = reactive({
     previewVisible: false,
     tabsName: 'second',
     formFieldList: [], // 表单数据源所有可选字段
+	formApi:{
+		type:"1",
+		addApiUrl:"",
+		editApiUrl:"",
+		delApiUrl:"",
+	},
     dict: {},
     refreshTable: true
 })
@@ -180,6 +193,8 @@ onMounted(()=>{
 })
 const setUpFieldInfo = ref<tableButton>()
 const setUpFieldIsOpen= ref(false)
+
+const tableAttrBut = ref<InstanceType<typeof ElTable>>()
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-25 11:51:46
@@ -356,7 +371,7 @@ const columnDrop = () => {
 		animation: 180,
 		delay: 0,
 		onEnd: (evt: any) => {
-			// console.log("evt",evt.oldIndex,evt.newIndex)
+			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)
@@ -374,6 +389,7 @@ const columnDrop = () => {
 
 const tableFieldList = ref<InstanceType<typeof ElTable>>()
 const tableFieldAttrBut = ref<InstanceType<typeof ElTable>>()
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-27 08:27:22
@@ -387,7 +403,7 @@ const delCol = (val:any) => {
 		state.tableData.columns.forEach((item: any, index: number) => {
 			if (item.id === val.id) {
 				state.tableData.columns.splice(index, 1)
-				if(item.types == "-"){
+				if(item.attribute == "-"){
 					delInfoBut.push(item)
 				}else{
 					delInfo.push(item)
@@ -436,14 +452,148 @@ const updataLogBut = (val:attrButton[]) => {
 	// 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":
+			clearData()
+			break;
+		case "json":
+			drawer.title = "查看表格列表结构"
+			dialogOpen(state, { direction: 'ltr', type: 'json' })
+			break;
+		case "save":
+			clearData()
+			break;
+		default:
+	}
+}
+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;
+		})
+	}
 	
-
+}
-
-
-
-
 
 
 
@@ -452,7 +602,7 @@ const updataLogBut = (val:attrButton[]) => {
 
 </script>
 <template>
-	<div ref="container" class="design-containers design-table" v-loading="pageLoading">
+	<div class="design-containers design-table" v-loading="pageLoading">
 		<!-- <div class="components-list">
 			<el-divider content-position="left">表格列字段</el-divider>
 			<el-table
@@ -471,20 +621,19 @@ const updataLogBut = (val:attrButton[]) => {
 			<div class="header">
 				<div class="field">
 				</div>
-				<PageListHeadTools />
+				<PageListHeadTools @clearData="listPageTools" />
 			</div>
-			<div class="table_box main_table">
+			<div  ref="container"  class="table_box main_table">
 
-				<div
+				<div class="search-box" >
-					class="search-box"
+					<SearchField v-if="state.searchData.length>0&&state.config.searchIsShow" v-model:searchData="state.searchData" />
-				>
+					<div v-else class="tipBox" >条件查询搜索区域</div>
-					<div class="tipBox" >条件查询搜索区域，单击可编辑</div>
 				</div>
 
 
 
 				<div class="operateButArea">
-					<div>
+					<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"
@@ -494,7 +643,17 @@ const updataLogBut = (val:attrButton[]) => {
 							{{ item.label }}
 						</el-button>
 					</div>
-					<div>2</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">
@@ -505,30 +664,19 @@ const updataLogBut = (val:attrButton[]) => {
 					:data="[{}]"
 					v-bind="state.tableData.tableProps || {}"
 					ref="tableEl"
-					v-if="state.refreshTable && state.tableData.columns?.length"
+					
 				>
 					<template
 						v-for="item in state.tableData.columns"
 						:key="item.prop || item.label"
 					>
 
-						<el-table-column v-if="item.id == 'checkbox'" fixed type="selection" width="40"  align="center" />
+						<el-table-column v-bind="item" :width="readerColumn(item)">
-						<el-table-column  v-else-if="item.field == 'index'" type="index" width="80"  align="center">
-							<template #header="scope">
-								<div class="field_close">
-									{{item.name}}
-									<i class="field_close fa fa-close" @click="delCol(item)"></i>
-								</div>
 
-							</template>
-						</el-table-column>
-					
-						<el-table-column v-else v-bind="item">
 							<template #header="scope">
-
 								<div class="field_close">
-									{{item.name}}
+									<el-text>{{ item.label }}</el-text>
-									<i class="field_close fa fa-close" @click="delCol(item)"></i>
+									<i ><el-icon  @click="delCol(item)"><Close /></el-icon></i>
 								</div>
 								<el-tooltip placement="top" v-if="item.help">
 									<template #content>
@@ -537,14 +685,12 @@ const updataLogBut = (val:attrButton[]) => {
 									<i class="icon-help"></i>
 								</el-tooltip>
 							</template>
-							<template #default>
+							<template #default v-if="item.field !== 'index'">
-								<span v-if="item.fieldClass=='__control'">操作</span>
+								<el-checkbox v-if="item.field === 'checkbox'" />
-								<span v-else>数据</span>
+								<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">
@@ -552,7 +698,8 @@ const updataLogBut = (val:attrButton[]) => {
 					*从数据列表配置中选择 所属表单<br />
 					*从左上角 添加表格字段 选择预设字段<br />
 					*可拖动表头字段移动调整表头字段排列顺序<br />
-					*可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段
+					*可通过顶部工具栏 生成脚本预览 查看或编辑添加自定义字段<br />
+				
 				</div>
 			</div>
 		</div>
@@ -562,7 +709,7 @@ const updataLogBut = (val:attrButton[]) => {
 					<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="name" label="字段" />
+						<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>
@@ -572,26 +719,92 @@ const updataLogBut = (val:attrButton[]) => {
 					<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="name" label="字段">
+						<el-table-column prop="label" label="字段">
 							<template #default="scope">
-								{{scope.row.name}}({{scope.row.fieldClass}}[{{scope.row.pattern}}])
+								{{scope.row.label}}({{scope.row.fieldClass}}[{{scope.row.pattern}}])
 							</template>
 						</el-table-column>
-						<el-table-column fixed="right" label="设置" width="55" align="center">
+						<el-table-column fixed="right" label="查询" width="55" align="center">
 							<template #default="scope">
-								<el-icon title="设置" @click="setUpField(scope.row)"><Setting /></el-icon>
+								<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-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-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>
+					
 				</el-tab-pane>
 			</el-tabs>
 			<!-- {{props.formKey}}
@@ -602,14 +815,21 @@ const updataLogBut = (val:attrButton[]) => {
 		</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" />
 	</div>
 </template>
 <style  lang='scss' scoped>
@@ -648,18 +868,25 @@ const updataLogBut = (val:attrButton[]) => {
 		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{
@@ -675,6 +902,5 @@ const updataLogBut = (val:attrButton[]) => {
     color: #999;
     text-align: center;
     cursor: pointer;
-	margin-top: 15px;
 }
 </style>

src/views/sysworkflow/lowcodepage/pageListHeadTools.vue

@@ -58,7 +58,7 @@
 	  }
 	})
 	const btnClick = (type: string) => {
-	  emits('click', type)
+	  emits('clearData', type)
 	}
   </script>
 <style  lang='scss' scoped>

src/views/sysworkflow/lowcodepage/pageSetUpDialog/codePage.vue

@@ -0,0 +1,52 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-03-29 13:52:10
+@ 备注: 查看表单列表代码
+-->
+<script lang='ts' setup>
+const props = defineProps({
+	isShow:{
+		type:Boolean,
+		default:false,
+	},
+	listData:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+const direction = ref('ltr')
+const emits = defineEmits(["update:isShow"]);
+const isShowIng =  computed({
+	get() {
+		return props.isShow
+	},
+	set(val: formStruct) {
+		emits('update:isShow', val)
+	}
+});
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-27 10:25:54
+@ 功能: 关闭弹窗
+*/
+const closeLogBut = () =>{
+	emits('update:isShow', false)
+}
+</script>
+<template>
+	<el-drawer
+		v-model="isShowIng"
+		title="生成脚本预览"
+		:direction="direction"
+		:before-close="closeLogBut"
+	>
+
+		<div v-if="props.listData" :id="id"></div>
+	</el-drawer>
+</template>
+<style  lang='scss' scoped>
+
+</style>

src/views/sysworkflow/lowcodepage/pageSetUpDialog/controlSetup.vue

@@ -19,6 +19,7 @@ const props = defineProps({
 		}
 	}
 });
+const direction = ref('ltr')
 // const emits = defineEmits<{
 //     (e: 'update:isShow', val: boolean): void
 // 	(e: 'updataLogBut', val: function): void
@@ -88,12 +89,10 @@ const xuanZhongLog = (val:attrButton[]) =>{
 }
 </script>
 <template>
-	<el-dialog
+	<el-drawer
 		v-model="isShowIng"
 		title="设置数据记录操作按钮"
-		width="500"
+		:direction="direction"
-		draggable
-		center
 		:before-close="closeLogBut"
 	>
 		<el-table ref="tableLogBut" :data="tableLogButtonList" border  style="width: 100%" @selection-change="xuanZhongLog">
@@ -101,14 +100,18 @@ const xuanZhongLog = (val:attrButton[]) =>{
 			<el-table-column prop="label" label="字段" />
 			
 		</el-table>
-		<template #footer>
+		
 			<div class="dialog-footer">
 				<el-button @click="closeLogBut">取消</el-button>
 				<el-button type="primary" @click="closeLogBut">确定</el-button>
 			</div>
-		</template>
+	
-	</el-dialog>
+	</el-drawer>
+	
 </template>
 <style  lang='scss' scoped>
-
+.dialog-footer {
+	margin-top: 20px;
+	text-align: center;
+}
 </style>

src/views/sysworkflow/lowcodepage/pageSetUpDialog/previewPage.vue

@@ -0,0 +1,14 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-03-29 13:50:19
+@ 备注: 列表预览
+-->
+<script lang='ts' setup>
+
+</script>
+<template>
+	<div></div>
+</template>
+<style  lang='scss' scoped>
+
+</style>

src/views/sysworkflow/lowcodepage/pageSetUpDialog/searchField.vue

@@ -0,0 +1,225 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-03-28 11:39:14
+@ 备注: 查询字段
+-->
+<script lang='ts' setup>
+import { tableButton } from '@/api/DesignForm/tableButton'
+import type { FormInstance, FormRules } from 'element-plus'
+
+import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/DesignForm/fieldUnit'
+
+
+
+
+
+const props = defineProps({
+	searchData:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+const emits = defineEmits(["update:searchData"]);
+const drawerIsShow =  computed({
+	get() {
+		return props.searchData
+	},
+	set(val: tableButton) {
+		emits('update:searchData', val)
+	}
+});
+watch(()=>drawerIsShow.value,(val:tableButton)=>{
+	
+},
+{
+	deep: true
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-28 13:17:46
+@ 功能: 重置表单
+*/
+const ruleSearchForm = ref()
+const resetFields = (formEl: FormInstance | undefined) => {
+	// formEl.resetFields()
+	// console.log("formEl",formEl,formEl.resetFields())
+    // if (!formEl) return
+  	// formEl.resetFields()
+	if(drawerIsShow.value.length > 0){
+		drawerIsShow.value.forEach((item:any)=>{
+			item.value="";
+		})
+	}
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-28 16:03:12
+@ 功能: 判断类型
+*/
+const unitIsShow = (val:tableButton,unitName:string) => {
+	// val.pattern
+	switch (val.fieldClass) {
+		case "id":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "masters_key": //自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "creater": //自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "creater_time": //自定义表单保留字
+			return timeUnit.includes(unitName);
+			break;
+		case "edit_time": //自定义表单保留字
+			return timeUnit.includes(unitName);
+			break;
+		case "flow_id": //自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "baidumap":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "input":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "radio":		//自定义表单保留字
+			return choiceUnit.includes(unitName);
+			break;
+		case "switch":		//自定义表单保留字
+			return switchUnit.includes(unitName);
+			break;
+		case "orgCentent":		//自定义表单保留字
+			return orgUnit.includes(unitName);
+			break;
+		case "varchar":		//自定义表单保留字
+			return inputUnit.includes(unitName);
+			break;
+		case "checkbox":
+			return checkboxUnit.includes(unitName);
+			break;
+		default:
+			return inputUnit.includes(unitName);
+			break;
+	}
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-28 16:59:13
+@ 功能: 时间选择器
+*/
+const shortcuts = [
+	{
+		text: '此刻',
+		value: new Date(),
+	},
+	{
+		text: '昨天',
+		value: () => {
+		const date = new Date()
+		date.setTime(date.getTime() - 3600 * 1000 * 24)
+		return date
+		},
+	},
+	{
+		text: '一周前',
+		value: () => {
+		const date = new Date()
+		date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+		return date
+		},
+	},
+]
+</script>
+<template>
+	<el-form ref="ruleSearchForm" class="seacherForm">
+		<template v-for="(item, index) in drawerIsShow" :key="index">
+			<div class="group group-input">
+				<el-form-item :label="item.label"  class="form_cont">
+					<el-input
+						v-model="item.value"
+						:placeholder="'请输入'+item.label"
+						clearable
+						v-if="unitIsShow(item,'input')"
+					/>
+					<el-date-picker
+						v-model="item.value"
+						type="datetime"
+						:placeholder="'请选择'+item.label"
+						:shortcuts="shortcuts"
+						v-if="unitIsShow(item,'time')"
+					/>
+					<el-select
+						v-model="item.value"
+						clearable
+						:placeholder="'请选择'+item.label"
+						v-if="unitIsShow(item,'radio')"
+					>
+						<el-option
+							v-for="itemOpt in item.options"
+							:key="itemOpt.value"
+							:label="itemOpt.label"
+							:value="itemOpt.value"
+						/>
+					</el-select>
+					<el-select
+						v-model="item.value"
+						clearable
+						:placeholder="'请选择'+item.label"
+						v-if="unitIsShow(item,'switch')"
+					>
+						<el-option
+							:key="item.activeValue"
+							label="是"
+							:value="item.activeValue"
+						/>
+						<el-option
+							:key="item.inactiveValue"
+							label="否"
+							:value="item.inactiveValue"
+						/>
+					</el-select>
+					<el-select
+						v-model="item.value"
+						multiple
+						clearable
+						:placeholder="'请选择'+item.label"
+						v-if="unitIsShow(item,'checkbox')"
+					>
+						<el-option
+							v-for="itemOpt in item.options"
+							:key="itemOpt.value"
+							:label="itemOpt.label"
+							:value="itemOpt.value"
+						/>
+					</el-select>
+					<el-select
+						v-model="item.value"
+						clearable
+						:placeholder="'请选择'+item.label"
+						v-if="unitIsShow(item,'org')"
+					>
+					</el-select>
+				</el-form-item>
+			</div>
+		</template>
+		<div class="group group-btn" v-if="drawerIsShow.length">
+			<el-button type="primary"><el-icon><Search /></el-icon>查询</el-button>
+			<el-button @click="resetFields(ruleSearchForm)"><el-icon><Refresh /></el-icon>重置</el-button>
+      </div>
+	</el-form>
+</template>
+<style  lang='scss' scoped>
+.seacherForm{
+	min-height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+.group{
+	width: auto;
+    margin-right: 10px;
+}
+</style>