From 301d6b418da9c3c0ad0580557e8b0c3a49065502 Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Tue, 2 Apr 2024 08:05:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/requestapi.ts              |  16 +
 src/api/DesignForm/tableButton.ts             |  14 +
 src/api/DesignForm/types.ts                   |   2 +
 .../DesignForm/tableListPage/index.vue        | 490 ++++++++++++++++++
 src/store/DesignForm/designForm.ts            |  13 +-
 src/types/components.d.ts                     |   6 +
 src/views/sysworkflow/codepage/index.ts       |   2 +
 .../sysworkflow/lowcodepage/appFormList.vue   |  95 +++-
 src/views/sysworkflow/lowcodepage/index.vue   |  10 +-
 .../sysworkflow/lowcodepage/pageList.vue      | 306 ++++++++---
 10 files changed, 880 insertions(+), 74 deletions(-)
 create mode 100644 src/components/DesignForm/tableListPage/index.vue

diff --git a/src/api/DesignForm/requestapi.ts b/src/api/DesignForm/requestapi.ts
index eee6a1163..24009cccd 100644
--- a/src/api/DesignForm/requestapi.ts
+++ b/src/api/DesignForm/requestapi.ts
@@ -317,3 +317,19 @@ export function gainFormTableField(data?:any){
 		data: data
 	});
 }
+//编辑自定义表单列表数据
+export function editCustomerFormList(data: any) {
+	return request({
+		url: '/systemapi/customer_form/editCustomerFormList',
+		method: 'post',
+		data: data
+	});
+}
+//获取表单列表数据
+export function gainFormListCont(data: getContForId) {
+	return request({
+		url: '/systemapi/customer_form/gainFormListCont',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/api/DesignForm/tableButton.ts b/src/api/DesignForm/tableButton.ts
index 20551274f..9a6f20609 100644
--- a/src/api/DesignForm/tableButton.ts
+++ b/src/api/DesignForm/tableButton.ts
@@ -118,3 +118,17 @@ export const diaOrDrawer = [
 		value:"dialog"
 	}
 ]
+
+//表单结构
+export interface FormPageList {
+	columns: tableButton[],
+    config: any,
+	controlBtn:tableButton[],
+	operateBtn:tableButton[]
+}
+export interface FormPageConfig{
+	pageSize:number,
+	searchIsShow:boolean,
+	searchFormIsShow:boolean,
+	openPageMode:string
+}
diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 869001111..58f8ab189 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -199,3 +199,5 @@ export interface CarsuselConfig  {
 	imgUrl:string,
 	link:string
 }
+
+
diff --git a/src/components/DesignForm/tableListPage/index.vue b/src/components/DesignForm/tableListPage/index.vue
new file mode 100644
index 000000000..8313cf626
--- /dev/null
+++ b/src/components/DesignForm/tableListPage/index.vue
@@ -0,0 +1,490 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-03-29 14:21:27
+@ 备注: 自定义表单通用列表
+-->
+<script lang='ts' setup>
+import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
+import { attrButton,FormPageList,FormPageConfig } from '@/api/DesignForm/tableButton'
+import { inputUnit,timeUnit,choiceUnit,switchUnit,orgUnit,checkboxUnit } from '@/api/DesignForm/fieldUnit'
+import type { FormInstance, FormRules } from 'element-plus'
+
+
+
+const props = withDefaults(
+    defineProps<{
+		data: FormPageList
+		searchData?: attrButton[]
+		config:FormPageConfig
+		formId?:string
+		beforeRequest?: (params: any, rout: any) => any
+		afterResponse?: (result: any) => any | string
+		beforeDelete?: (params: any, route: any) => any
+		showPage?: boolean
+		requestUrl?: string // 请求的api
+		deleteUrl?: string // 删除的api
+		dict?: { [key: string | number]: string | number }
+		fixedBottomScroll?: boolean
+		query?: { [key: string]: any } // 一些附加的请求参数
+		autoLoad?: boolean // 初始时自动请求加载数据
+		delKey?: string // 删除标识
+		lookPageIsShow?:boolean
+    }>(),
+    {
+		showPage: true,
+		data: () => {
+			return { columns: [],controlBtn:[],operateBtn:[],config:{} }
+		},
+		searchData: () => {
+			return []
+		},
+		config:() =>{
+			return {}
+		},
+		dict: () => {
+			return {}
+		},
+		formId:() =>{
+			return ""
+		},
+		fixedBottomScroll: true,
+		autoLoad: true,
+		delKey: 'id',
+		query: () => {
+			return {}
+		},
+		lookPageIsShow:() => {
+			return false
+		}
+    }
+)
+const emits = defineEmits<{
+    (e: 'selectionChange', row: any): void
+    (e: 'btnClick', btn: any, row?: any): void // 列表上面及表格列表里添加删除按钮事件
+}>()
+
+const designStore = useDesignFormStore()
+const route = useRoute()
+const router = useRouter()
+const tableDataList = ref([]) // 表格行数据
+
+const state = reactive({
+    loading: false,
+    currentPage: 1,
+    pageSize: props.config?.pageSize || 20,
+    total: 0,
+    selectionChecked: [],
+    dict: {}, // 接口返回的
+    searchFormDown: false,
+    treeValue: {}, // 侧栏树选中的值
+    tableScrollMargin: 0,
+    columnsCheck: designStore.getColumnsCheck(route.path),
+    currentNodeKey: ''
+})
+/**
+@ 作者: 秦东
+@ 时间: 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 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(props.searchData && props.searchData.length > 0){
+		props.searchData.forEach((item:any)=>{
+			item.value="";
+		})
+	}
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 11:36:07
+@ 功能: 功能按钮动作
+*/
+const setUpClick = (val:string,id:string) =>{
+	console.log("功能按钮动作",val)
+	
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 13:30:06
+@ 功能: 表格选择操作
+*/
+const selectionChange = (row: any) => {
+    state.selectionChecked = row
+    emits('selectionChange', row)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 13:31:37
+@ 功能: 获取表格头内容
+*/
+const columnsFilter = computed(() => {
+    if (!state.columnsCheck?.length) {
+      	return props.data.columns
+    } else {
+		return props.data.columns.filter((item: any) => {
+			return state.columnsCheck.includes(item.prop || item.type)
+		})
+    }
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 14:14:36
+@ 功能: 翻页操作
+*/
+const handleSizeChange = (page: number) => {
+	console.log("翻页操作",page)
+    state.pageSize = page
+    getListData(1)
+}
+const handleCurrentChange = (page: number) => {
+    getListData(page)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 14:15:16
+@ 功能: 获取数据
+*/
+// 筛选查询列表数据
+const getListData = (page?: number) => {
+	if (page) {
+      	state.currentPage = page
+    }
+	getPageData()
+}
+watch(()=>props.lookPageIsShow,(val:boolean)=>{
+	if(val && props.formId != ""){
+		getPageData()
+		
+	}
+})
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 15:51:32
+@ 功能: 获取数据
+*/
+const getPageData = () => {
+	let sendData = {
+			formId:props.formId,
+			page:state.currentPage,
+			pagesize:state.pageSize,
+			searchData:json2string(props.searchData)
+		}
+		console.log("获取列表详细信息",sendData)
+}
+</script>
+<template>
+	<div ref="container" v-loading="state.loading" class="table-list-comm">
+		<el-row class="rowBox">
+			<el-col :span="24">
+				<el-form  v-if="config.searchIsShow" ref="ruleSearchForm" class="seacherForm">
+					<template v-for="(item, index) in searchData" :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="searchData.length">
+						<el-button type="primary" @click="getPageData"><el-icon><Search /></el-icon>查询</el-button>
+						<el-button @click="resetFields(ruleSearchForm)"><el-icon><Refresh /></el-icon>重置</el-button>
+					</div>
+				</el-form>
+			</el-col>
+			<el-col :span="24">
+				<div class="operateButArea">
+					<div class="operatLeft">
+						<el-text v-if="data.controlBtn.length === 0" class="mx-1 tipBox" type="info">操作按钮区域</el-text>
+						<el-button
+							v-for="item in data.controlBtn"
+							v-bind="item"
+							:key="item.type"
+							@click="setUpClick(item)"
+						>
+							{{ item.label }}
+						</el-button>
+					</div>
+					<div>
+						<el-tooltip
+							v-if="config.searchFormIsShow"
+							class="box-item"
+							effect="dark"
+							content="折叠查询表单"
+							placement="bottom"
+						>
+							<el-icon @click="config.searchIsShow=!config.searchIsShow"><Search /></el-icon>
+						</el-tooltip>
+					</div>
+				</div>
+			</el-col>
+			<el-col :span="24">
+				<el-table
+					v-bind="data.tableProps"
+					ref="table"
+					:data="tableDataList"
+					@selection-change="selectionChange"
+				>
+					<template
+						v-for="item in columnsFilter"
+						:key="item.prop || item.label"
+					>
+						<el-table-column v-if="['-'].includes(item.fieldClass)" v-bind="item" config="" width="60">
+							<template v-if="item.help" #header="scope">
+								{{ scope.column.label }}
+								<tooltip :content="item.help" />
+							</template>
+							<template v-else-if="item.fieldClass === '__control'" #default="scope">
+							</template>
+						</el-table-column>
+						<el-table-column v-else v-bind="item" config="">
+							<template v-if="item.help" #header="scope">
+								{{ scope.column.label }}
+								<tooltip :content="item.help" />
+							</template>
+							<template v-else-if="item.fieldClass === '__control'" #default="scope">
+								
+							</template>
+						</el-table-column>
+					</template>
+				</el-table>
+			</el-col>
+			<el-col v-if="state.total > 0" :span="24">
+				<div class="pageBox">
+					<el-pagination
+						v-model:currentPage="state.currentPage"
+						v-model:page-size="state.pageSize"
+						:page-sizes="[20, 30, 40, 50] as any"
+						:total="state.total"
+						layout="total, sizes, prev, pager, next, jumper"
+						@size-change="handleSizeChange"
+						@current-change="handleCurrentChange"
+					/>
+				</div>
+			</el-col>
+			<el-col :span="24" >
+				{{formId}}
+				{{ data.operateBtn}}
+			</el-col>
+			<el-col :span="24" style="display:none">
+				<el-button-group>
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="提交审批"
+								placement="top-end"
+							>
+								<el-button type="success" size="small" class="fa fa-send-o"  />
+							</el-tooltip>
+
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="重新申请"
+								placement="top-end"
+							>
+								<el-button type="warning" size="small" class="fa fa-retweet"   />
+							</el-tooltip>
+							<el-tooltip
+								class="box-item"
+								effect="dark"
+								content="查看详情"
+								placement="top-end"
+							>
+								<el-button type="primary" size="small" class="fa fa-eye"  />
+							</el-tooltip>
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="撤回"
+								placement="top-end"
+							>
+								<el-button  size="small" class="fa fa-reply-all"  />
+							</el-tooltip>
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="删除"
+								placement="top-end"
+							>
+								<el-button type="danger" size="small" class="fa fa-trash-o"  />
+							</el-tooltip>
+
+							<el-tooltip
+								
+								class="box-item"
+								effect="dark"
+								content="申请修改"
+								placement="top-end"
+							>
+								<el-button type="info" size="small" class="fa fa-edit"  />
+							</el-tooltip>
+							</el-button-group>
+			
+			
+			</el-col>
+		</el-row>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.rowBox{
+	width:100%;
+}
+.table-list-comm{
+	padding:0px 15px 15px 15px;
+}
+.seacherForm{
+	min-height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+.pageBox{
+	width:100%;
+	margin-top:20px;
+	text-align: center;
+	display: flex;
+  	justify-content: center;
+}
+.operateButArea{
+		width: 100%;
+		display: flex;
+		align-items: center;
+  		justify-content: space-between;
+		margin-top:15px;
+		.operatLeft{
+			padding-bottom: 2px;
+		}
+}
+.group{
+	width: auto;
+    margin-right: 10px;
+}
+</style>
diff --git a/src/store/DesignForm/designForm.ts b/src/store/DesignForm/designForm.ts
index 005106c97..6af14f964 100644
--- a/src/store/DesignForm/designForm.ts
+++ b/src/store/DesignForm/designForm.ts
@@ -1,10 +1,12 @@
 import { defineStore } from 'pinia'
+import { getStorage, setStorage } from '@/utils/lowCodeForm'
 
 export const useDesignFormStore = defineStore('designForm', {
   state: () => {
     return {
       controlAttr: {},
-      activeKey: ''
+      activeKey: '',
+			columnsCheck: getStorage('tableColumns', true) || [], // 表格勾选的列
       //type: 1, //当前表单状态 1新增；2查看（表单模式） ；3查看； 4设计
       //isEdit: false, //编辑状态，type=1新增模式下有编辑状态，主要用于控制编辑模式下某些字段的禁用状态，即可新增但不能修改
       //model: {}, // 给form-group提供联动条件设置
@@ -17,6 +19,13 @@ export const useDesignFormStore = defineStore('designForm', {
     },
     setActiveKey(key: string) {
       this.activeKey = key
-    }
+    },
+		setColumnsCheck(path: string, data: string[]) {
+      this.columnsCheck[path] = data
+      setStorage('tableColumns', this.columnsCheck, 0)
+    },
+    getColumnsCheck(path: string) {
+      return this.columnsCheck[path] || []
+    },
   }
 })
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 9ec12b513..5cea651e1 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -26,6 +26,7 @@ declare module '@vue/runtime-core' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
@@ -74,6 +75,8 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
@@ -100,6 +103,8 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
+    IEpRefresh: typeof import('~icons/ep/refresh')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
@@ -125,6 +130,7 @@ declare module '@vue/runtime-core' {
     SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default']
     SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
+    TableListPage: typeof import('./../components/DesignForm/tableListPage/index.vue')['default']
     Template: typeof import('./../components/DesignForm/template.vue')['default']
     TextPage: typeof import('./../components/DesignForm/designLayout/textPage.vue')['default']
     Tinymce: typeof import('./../components/DesignForm/public/form/tinymce.vue')['default']
diff --git a/src/views/sysworkflow/codepage/index.ts b/src/views/sysworkflow/codepage/index.ts
index d02f93321..da5356626 100644
--- a/src/views/sysworkflow/codepage/index.ts
+++ b/src/views/sysworkflow/codepage/index.ts
@@ -2,10 +2,12 @@ import formDesign from '@/components/DesignForm/public/form/form.vue'
 import tableList from '@/components/DesignForm/public/form/components/list.vue'
 import flow from '@/components/DesignForm/public/form/components/flow.vue'
 import Screen from '@/components/DesignForm/public/form/components/screen.vue'
+import akPageList from '@/components/DesignForm/tableListPage/index.vue'
 
 export default (app: any) => {
   app.component('AkForm', formDesign)
   app.component('AkList', tableList)
   app.component('AkFlow', flow)
   app.component('AkScreen', Screen)
+	app.component('AkPageList', akPageList)
 }
diff --git a/src/views/sysworkflow/lowcodepage/appFormList.vue b/src/views/sysworkflow/lowcodepage/appFormList.vue
index e1762ffe1..7294ae561 100644
--- a/src/views/sysworkflow/lowcodepage/appFormList.vue
+++ b/src/views/sysworkflow/lowcodepage/appFormList.vue
@@ -7,7 +7,7 @@
 import { customerFormCont } from "@/api/DesignForm/type";
 import { getCustomerFormList,editProductionFormStatus } from '@/api/DesignForm/requestapi'
 import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
-
+import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
 import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
 import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue'
 
@@ -27,7 +27,7 @@ const props = defineProps({
 	}
 });
 
-const emits = defineEmits(["update:formKey"]);
+const emits = defineEmits(["update:formKey","getRongQiAttr"]);
 
 //表单ID
 const formKeyStr =  computed({
@@ -49,6 +49,8 @@ const pageApp = ref<number>(1)			//页码
 const pageAppSize = ref<number>(12)	//每页显示几个
 const pageAppTotal = ref<number>(0)	//总记录数
 const contList = ref<customerFormCont[]>()
+
+const lookPageIsShow = ref(false)
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-21 10:54:23
@@ -74,6 +76,7 @@ const getFormAppList = () => {
 @ 功能: 创建表单任务
 */
 const startUsing = (id:string,title:string) => {
+	emits('getRongQiAttr')
 	versionId.value = id
 	versionTitle.value = title
 	openTaskDrawer.value = true
@@ -84,6 +87,7 @@ const startUsing = (id:string,title:string) => {
 @ 功能: 编辑表单
 */
 const editFormApp = (id:string) => {
+	emits('getRongQiAttr')
 	formId.value = id.toString()
 	addFormIsShow.value= true
 	console.log("编辑表单",id,"-",formId.value,"-",addFormIsShow.value)
@@ -127,6 +131,71 @@ const refreshPage = (pageType:string) =>{
 onMounted(()=>{
 	getFormAppList()
 })
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 14:32:18
+@ 功能: 查看表单列表
+*/
+const lookFormList = (val:any) => {
+	emits('getRongQiAttr')
+	console.log("查看表单列表", val)
+	lookPageIsShow.value = true
+	state.formId = val.idStr
+	let stateData = string2json(val.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.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
+
+
+}
+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 || '',
+    formList: [], // 所有可选表单数据源
+    name: '',
+    treeData: {}, // 左侧树相关
+    previewVisible: false,
+    tabsName: 'second',
+    formFieldList: [], // 表单数据源所有可选字段
+	formApi:{
+		type:"1",
+		addApiUrl:"",
+		editApiUrl:"",
+		delApiUrl:"",
+		lookApiUrl:""
+	},
+    dict: {},
+    refreshTable: true
+})
 </script>
 <template>
     <div>
@@ -148,11 +217,11 @@ onMounted(()=>{
 						@click.top="startUsing(item.id,item.name)"
 					/>
 					<div class="cardhead">
-						<el-text  class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.id,item.name)">{{item.id}}{{item.name}}</el-text>
+						<el-text  class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.id,item.name)">{{item.name}}</el-text>
 					</div>
 					<el-row>
 						<el-col :span="8" class="but_centent">
-							<el-button size="small" circle class="button" :icon="View"></el-button>
+							<el-button size="small" circle class="button" :icon="View" @click="lookFormList(item)"></el-button>
 						</el-col>
 						<el-col :span="8" class="but_centent">
 							<el-button size="small" circle class="button" :icon="Edit" @click="editFormApp(item.idStr)"></el-button>
@@ -169,6 +238,24 @@ onMounted(()=>{
 		</div>
 		<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" />
 		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
+
+
+		<el-drawer
+			v-model="lookPageIsShow"
+			title="列表预览"
+			direction="rtl"
+			:before-close="handlePreviewClose"
+			:size="props.drawerWith"
+		>
+			<ak-page-list
+				:data="state.tableData"
+				:search-data="state.searchData"
+				:config="state.config"
+				:form-id="state.formId"
+				v-model:look-page-is-show="lookPageIsShow"
+			/>
+
+		</el-drawer>
 	</div>
 </template>
 <style  lang='scss' scoped>
diff --git a/src/views/sysworkflow/lowcodepage/index.vue b/src/views/sysworkflow/lowcodepage/index.vue
index 8e13153e7..0f6f55124 100644
--- a/src/views/sysworkflow/lowcodepage/index.vue
+++ b/src/views/sysworkflow/lowcodepage/index.vue
@@ -129,6 +129,14 @@ onMounted(()=>{
 	drawerWith.value = contbody.value?.clientWidth
 	gainFormGroup()
 })
+/**
+@ 作者: 秦东
+@ 时间: 2024-04-01 14:27:51
+@ 功能: 获取容器宽度
+*/
+const getRongQiAttr = () => {
+	drawerWith.value = contbody.value?.clientWidth
+}
 </script>
 <template>
 	<div ref="contbody" class="box_content">
@@ -170,7 +178,7 @@ onMounted(()=>{
 							</el-dropdown>
 						</div>
 					</template>
-					<AppFormList v-model:form-key="formKey" :group-id="item.idStr" :drawer-with="drawerWith" />
+					<AppFormList v-model:form-key="formKey" :group-id="item.idStr" :drawer-with="drawerWith" @getRongQiAttr="getRongQiAttr" />
 					
 				</el-card>
 				
diff --git a/src/views/sysworkflow/lowcodepage/pageList.vue b/src/views/sysworkflow/lowcodepage/pageList.vue
index dc04529bb..0e9c7f425 100644
--- a/src/views/sysworkflow/lowcodepage/pageList.vue
+++ b/src/views/sysworkflow/lowcodepage/pageList.vue
@@ -10,11 +10,11 @@ import { attrButton,tableButton,tableButtonList,tableLogButtonList,tableAttrLogB
 
 import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
 import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index'
-import { gainFormTableField } from '@/api/DesignForm/requestapi'
+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'
 //引入子组件
@@ -80,6 +80,7 @@ const state = reactive({
     loading: false,
     attrObj: {},
     config: {
+		pageSize:10,
 		searchIsShow:true,
 		searchFormIsShow:true,
 		openPageMode:"drawer"
@@ -97,6 +98,7 @@ const state = reactive({
 		addApiUrl:"",
 		editApiUrl:"",
 		delApiUrl:"",
+		lookApiUrl:""
 	},
     dict: {},
     refreshTable: true
@@ -182,13 +184,15 @@ const handleSelectionChange = (val: User[]) => {
 // })
 watch(()=>props.tabsActive,(val:number)=>{
 	if(val == 3){
-		jieForm()
+		jieForm();
+		getListInfo();
 	}
 })
 onMounted(()=>{
-	jieForm()
+	jieForm();
 	nextTick(() => {
       	columnDrop()
+		getListInfo();
     })
 })
 const setUpFieldInfo = ref<tableButton>()
@@ -220,11 +224,13 @@ const setUpFieldBut = () => {
 }
 //功能按钮
 const tableAttrButClick = (val:tableButton[]) => {
-	if(state.tableData.controlBtn.length > 0){
-		state.tableData.controlBtn.splice(0, state.tableData.controlBtn.length);
-		state.tableData.controlBtn = val
-	}else{
-		state.tableData.controlBtn = val
+	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
+		}
 	}
 }
 /**
@@ -233,72 +239,75 @@ const tableAttrButClick = (val:tableButton[]) => {
 @ 功能: 功能字段
 */
 const tableFieldAttrButClick = (val:tableButton[]) => {
-	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(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)
 					}
-				});
-				if(isTrue){
+				})
+			}else{ //列表无数据,直接新增
+				val.forEach((item:tableButton)=>{
 					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)			//删除列表中已经存在的字段
+			//此处往下是处理列表中有为选中的字段
+			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)
+				}
 			});
-		}
-	}else{ //无选中的字段
-		if(state.tableData.columns.length > 0){
-			tableAttrLogButtonList.forEach((item:tableButton)=>{
+			if(delField.length > 0){
 				state.tableData.columns.forEach((itemTab:tableButton,index:number)=>{
-					if(item.id == itemTab.id){
-						state.tableData.columns.splice(index,1)			//删除列表中已经存在的字段
-					}
+					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(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 = [];
 			}
-		});
-		if(isOpent){
+		}else{
 			state.tableData.operateBtn = [];
 		}
-	}else{
-		state.tableData.operateBtn = [];
 	}
 }
+const zhuDaunIsTrue = ref(false);
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-25 16:36:38
@@ -306,12 +315,15 @@ const tableFieldAttrButClick = (val:tableButton[]) => {
 */
 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;
 					}
 				});
@@ -359,6 +371,7 @@ const tableListFieldClick = (val:any[]) => {
 		}
 	}
 }
+}
 
 const container = ref()
 //拖动字段排序
@@ -512,7 +525,7 @@ const adaptiveWidth = (colName: any) =>{
     }
     return colWidth
 }
-const codeIsShow = ref(false)
+const codeIsShow = ref(false)	//生成代码
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-29 11:12:26
@@ -525,18 +538,27 @@ const listPageTools = (type: string) => {
 			clearData()
 			break;
 		case "eye":
-			clearData()
+			state.previewVisible = true
 			break;
 		case "json":
 			drawer.title = "查看表格列表结构"
 			dialogOpen(state, { direction: 'ltr', type: 'json' })
 			break;
 		case "save":
-			clearData()
+			saveFormListData()
 			break;
 		default:
 	}
 }
+
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-29 14:42:39
+@ 功能: 关闭预览
+*/
+const handlePreviewClose = () => {
+	state.previewVisible = false
+}
 const drawer = reactive({
     visible: false,
     title: '',
@@ -595,9 +617,131 @@ const clearData = () => {
 	
 }
 
+/**
+@ 作者: 秦东
+@ 时间: 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
+	}
+	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})
+		.then((data)=>{
+			console.log("获取列表内容",data)
+			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.columns.length > 0) {
+				
+				if(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.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.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>
@@ -620,6 +764,7 @@ const clearData = () => {
 		<div class="main-body">
 			<div class="header">
 				<div class="field">
+				{{props.formKey}}
 				</div>
 				<PageListHeadTools @clearData="listPageTools" />
 			</div>
@@ -752,6 +897,15 @@ const clearData = () => {
 					</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
@@ -803,6 +957,11 @@ const clearData = () => {
 								<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>
@@ -824,12 +983,25 @@ const clearData = () => {
 			@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>