完成自定义表单手机也是自定义设置

src/components/DesignForm/public/form/form.vue

@@ -1991,7 +1991,7 @@ const webPage = computed({
 			}"
 		>
 
-			<WebFormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" :alldata="formData" @optionsValue3Get2="optionsValue3Get2"/>
+			<WebFormGroup :tableinfo="formData.form" :is-web="webPage" :numrun="numrun" :data="formData.list" :alldata="formData" @optionsValue3Get2="optionsValue3Get2"/>
 			
 			<slot></slot>
 	  	</el-form>

src/components/DesignForm/public/form/web/childTable.vue

@@ -0,0 +1,305 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-10-18 09:21:25
+@ 备注: 表单表格属性解析
+-->
+<script lang='ts' setup>
+import FormItem from '@/components/DesignForm/public/form/formItem.vue'
+import { inject, computed } from 'vue'
+import Tooltips from '@/components/DesignForm/tooltip.vue'
+import {constFormProps } from '@/api/DesignForm/utils'
+import { jsonParseStringify } from '@/utils/DesignForm'
+import LowcodeImagePage from '@/components/DesignForm/public/expand/lowcodeImage.vue'
+import UploadPageList from '@/components/DesignForm/public/expand/uploadPageList.vue'
+
+import LokOrgCentent from '@/widget/org/cont.vue' 
+
+
+const props = withDefaults(
+    defineProps<{
+      	data: any
+    }>(),
+    {
+		data: () => {
+			return {}
+		}
+    }
+)
+const formProps = inject(constFormProps, {}) as any
+const tableDataNew = computed(() => {
+	// console.log("如果编辑页禁用时-----1---->",props.data.name)
+	// console.log("如果编辑页禁用时-----2---->",formProps.value.model[props.data.name])
+	// console.log("如果编辑页禁用时-----3---->",formProps.value.model)
+	// console.log("如果编辑页禁用时-----4---->",formProps.value)
+    return formProps.value.model[props.data.name]
+})
+const type = computed(() => {
+    return formProps.value.type
+})
+// 如果编辑页禁用时，则返回true
+const editDisabled = computed(() => {
+    return formProps.value.type === 2 && props.data.config?.editDisabled
+})
+const addColumn = () => {
+	// console.log("如果编辑页禁用时--------->",tableDataNew.value)
+    const temp: any = {}
+    if (props.data.list) {
+		props.data.list.forEach((item: any) => {
+			if (item.name) {
+				temp[item.name] = item.control.modelValue
+			}
+		})
+		tableDataNew.value.push(jsonParseStringify(temp))
+    }
+}
+const getText = (text: any,val:any,name:any) => {
+	// console.log("text===>",text)
+	// console.log("name===>",name)
+	// console.log("val===>",val)
+    if (typeof text === 'string') {
+      	return text
+    } else {
+      	return text && text.toString()
+    }
+}
+const delColumn = (index: number) => {
+    tableDataNew.value.splice(index, 1)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-08-02 13:22:14
+@ 功能: 时间戳转换对象
+*/
+const timeToAry = (timestamp:number) => {
+	const date = new Date(timestamp);
+	const year = date.getFullYear();
+	const month = ('0' + (date.getMonth() + 1)).slice(-2);
+	const day = ('0' + date.getDate()).slice(-2);
+	const hours = ('0' + date.getHours()).slice(-2);
+	const minutes = ('0' + date.getMinutes()).slice(-2);
+	const seconds = ('0' + date.getSeconds()).slice(-2);
+	return {
+		year:year,
+		month:month,
+		day:day,
+		hours:hours,
+		minutes:minutes,
+		seconds
+	}
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-08-02 13:02:49
+@ 功能: 将时间戳转换成字符串
+*/
+const timeToString = (timeVal:any,types:int) => {
+	// console.log("将时间戳转换成字符串",timeVal,types)
+	let timeStr = ""
+	if(Array.isArray(timeVal)){
+		if(timeVal.length >= 2){
+			let startTime = timeToAry(timeVal[0])
+			let endTime = timeToAry(timeVal[1])
+			switch(types){
+			case "year":	//年
+				timeStr = `${startTime.year} 至 ${endTime.year}`;
+				break;
+			case "month":	//月
+				timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
+				break;
+			case "datetime": //日期+时间
+				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
+				break;
+			case  "week":	//周
+				let startWeek = getYearWeek(startTime)
+				let endWeek = getYearWeek(endTime)
+				timeStr = `${startWeek} 至 ${endWeek}`;
+				break;
+			case "timeCalss": //时间
+				timeStr = `${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
+				break;
+			case "datetimerange":
+				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} ${startTime.hours}:${startTime.minutes}:${startTime.seconds} 至 ${endTime.year}-${endTime.month}-${endTime.day} ${endTime.hours}:${endTime.minutes}:${endTime.seconds}`;
+				break;
+			case "daterange":
+				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
+				break;
+			case "monthrange":
+				timeStr = `${startTime.year}-${startTime.month} 至 ${endTime.year}-${endTime.month}`;
+				break;
+			default:
+				timeStr = `${startTime.year}-${startTime.month}-${startTime.day} 至 ${endTime.year}-${endTime.month}-${endTime.day}`;
+				break;
+			}
+		}else if(timeVal.length == 1){
+			let {year,month,day,hours,minutes,seconds} = timeToAry(timeVal[0])
+			switch(types){
+				case "year":	//年
+					timeStr = `${year}`;
+					break;
+				case "month":	//月
+					timeStr = `${year}-${month}`;
+					break;
+				case "datetime": //日期+时间
+					timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+					break;
+				case  "week":	//周
+					timeStr = getYearWeek(timeVal)
+					break;
+				case "timeCalss": //时间
+					timeStr = `${hours}:${minutes}:${seconds}`;
+					break;
+				default:
+					timeStr = `${year}-${month}-${day}`
+					break;
+			}
+		}else{
+			timeStr = "未知时间"
+		}
+	}else{
+		let {year,month,day,hours,minutes,seconds} = timeToAry(timeVal)
+		switch(types){
+			case "year":	//年
+				timeStr = `${year}`;
+				break;
+			case "month":	//月
+				timeStr = `${year}-${month}`;
+				break;
+			case "datetime": //日期+时间
+				timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+				break;
+			case  "week":	//周
+				timeStr = getYearWeek(timeVal)
+				break;
+			case "timePicker": //时间
+				timeStr = `${hours}:${minutes}:${seconds}`;
+				break;
+			default:
+				timeStr = `${year}-${month}-${day}`
+				break;
+		}
+	}
+	
+	return timeStr
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-10-11 14:49:23
+@ 功能: 计算有options属性的结果
+*/
+const optToString = (timeVal:any,item:any) => {
+	let timeStr = ""
+	if(item.options && Array.isArray(item.options)){
+		if(Array.isArray(timeVal)){
+			let strArt = new Array
+			switch(item.type){
+			case "radio": 
+				timeVal.forEach((tim:any)=>{
+					item.options.forEach((it:any)=>{
+						if(it.value == tim){
+							strArt.push(it.label)
+						}
+					})
+				})
+				break;
+			case "checkbox": 
+				timeVal.forEach((tim:any)=>{
+					item.options.forEach((it:any)=>{
+						if(it.value == tim){
+							strArt.push(it.label)
+						}
+					})
+				})
+				break;
+			case "select": 
+				timeVal.forEach((tim:any)=>{
+					item.options.forEach((it:any)=>{
+						if(it.value == tim){
+							strArt.push(it.label)
+						}
+					})
+				})
+				break;
+			default:
+				break;
+			}
+			if(strArt.length > 0){
+				timeStr = strArt.toString()
+			}
+		}else{
+			let strArt = new Array
+			switch(item.type){
+			case "radio": 
+				item.options.forEach((it:any)=>{
+					if(it.value == timeVal){
+						strArt.push(it.label)
+					}
+				})
+				break;
+			case "checkbox": 
+				item.options.forEach((it:any)=>{
+					if(it.value == timeVal){
+						strArt.push(it.label)
+					}
+				})
+				break;
+			case "select": 
+				item.options.forEach((it:any)=>{
+					if(it.value == timeVal){
+						strArt.push(it.label)
+					}
+				})
+				break;
+			default:
+				break;
+			}
+			if(strArt.length > 0){
+				timeStr = strArt.toString()
+			}
+		}
+	}
+	
+	
+	return timeStr
+}
+</script>
+<template>
+	<div>
+		<el-card v-for="(cardItem,cardIndex) in tableDataNew" :key="cardIndex" style="width: 100%;margin-bottom: 10px;" shadow="always">
+			<!-- {{cardItem}}<br><br><br>
+			{{data.list}} -->
+			
+			<template v-for="(item, index) in data.list">
+				<span v-if="item.type === 'index'"></span>
+				<form-item
+				 	v-else
+					v-model="cardItem[item.name]"
+					:tProp="`${data.name}.${cardIndex}.${item.name}`"
+					:data="item"
+				/>
+			</template>
+			<template #footer class="footBody">
+				<div class="footBody">
+					<el-button link type="danger" @click="delColumn(cardIndex)">{{ data.config.delBtnText }}</el-button>
+				</div>
+			</template>
+		</el-card>
+		<div
+			class="table-btn"
+			v-if="[1, 2].includes(type as number) && data.config.addBtnText && !editDisabled"
+		>
+			<el-button size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button>
+		</div>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.cardTable{
+	width: 100%;
+	margin-bottom: 10px;
+}
+.footBody{
+	text-align: right;
+	deep:el-card__footer{
+		text-align: right;
+	}
+}
+</style>

src/components/DesignForm/public/form/webformGroup.vue

@@ -8,7 +8,8 @@ import { computed, watch, inject, onUnmounted } from 'vue'
 import Draggable from 'vuedraggable-es'
 // import FormItem from '@/components/DesignForm/public/form/web/formItem.vue'
 import FormItem from './formItem.vue'
-import ChildTable from './childTable.vue'
+import ChildTable from '@/components/DesignForm/public/form/web/childTable.vue'
+// import ChildTable from './childTable.vue'
 import Tooltips from '@/components/DesignForm/tooltip.vue'
 import FlexBox from './flexBox.vue'
 import { useDesignFormStore } from '@/store/DesignForm/designForm'
@@ -31,10 +32,14 @@ const props = withDefaults(
 		nodeKey?:string
 		purview?:any[]
 		alldata?:any
+		isWeb?: boolean //
     }>(),
     {
 		data: () => {
 			return []
+		},
+		isWeb: () => {
+			return false
 		}
     }
 )
@@ -778,6 +783,11 @@ function optionsValue3Get1(data: any,fieldName: string){
 				</template>
 				<!--表格组件-->
 				<template v-else-if="element.type === 'table'">
+					<div class="form-table" v-if="type === 5">
+						<!-- <form-group :data="element.list" data-type="not-nested" /> -->
+						<WebFormGroup :data="element.list"  :is-web="props.isWeb" data-type="not-table"  />
+					</div>
+					<child-table v-else :data="element" :is-web="props.isWeb" />
 				</template>
 				<!--格栅布局-->
 				<template v-else-if="element.type === 'grid'">
@@ -896,5 +906,11 @@ function optionsValue3Get1(data: any,fieldName: string){
 	</draggable>
 </template>
 <style  lang='scss' scoped>
-
+.add-form .form-table .drag{
+	flex-wrap:wrap;
+	width:100%;
+}
+.add-form .form-table .drag > div{
+	width:100%;
+}
 </style>

src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue

@@ -701,7 +701,7 @@ const dialogConfirmTree = (val:treeStruct[]) => {
 		@confirm="dialogConfirm"
 		@confirmTree="dialogConfirmTree"
 	/>
-	<PreviewPage v-model:state="state"   @clickClose="closePreviewPage" />
+	<PreviewPage v-model:state="state" :is-web="isWeb"  @clickClose="closePreviewPage" />
 </template>
 <style  lang='scss' scoped>
 .asideBox{

src/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue

@@ -11,7 +11,13 @@ const props = defineProps({
 		default(){
 			return {}
 		}
-	}
+	},
+	isWeb:{
+		type:Boolean,
+		default(){
+			return false
+		}
+	}  //
 });
 const emits = defineEmits<{
     (e: 'update:state', val: any): void
@@ -68,6 +74,7 @@ const clickClose = () => {
 				ref="previewForm"
 				:form-data="state.formDataPreview"
 				:dict="state.formDict"
+				:is-web="props.isWeb" 
 			/>
 			<template #footer>
 				<div class="dialog-footer">