子表卡片增删优化

src/components/lowCode/tablePage.vue

@@ -9,7 +9,7 @@ import {
 } from '@/api/lowCode/utils';
 import { jsonParseStringify } from '@/utils/lowCode/item/index'
 import { SCOPE } from 'element-plus'
-import { onMounted,ref,computed } from 'vue';
+import { onMounted,ref,computed,nextTick } from 'vue';
 import SvgIcon from '@/components/svgIcon/index.vue'
 const props = withDefaults(
     defineProps<{
@@ -25,12 +25,15 @@ const props = withDefaults(
 		type:1
     }
 )
+const addBtnFlag = ref(true)
 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)
+	console.log(formProps.value.model)
+	console.log(props.data.name)
     return formProps.value.model[props.data.name]
 })
 const type = computed(() => {
@@ -129,8 +132,7 @@ function autoAddColumnOne(){
 					if(userCompCount>0){
 						autoAddColumnOne()
 					}else{
-						addColumn()
-						defaultOneAddedFlag.value = true
+						waitProvideFormPropsModelDo()
 					}
 					
 				}
@@ -140,9 +142,41 @@ function autoAddColumnOne(){
 	},200)
 }
 
+
+function waitProvideFormPropsModelDo(){
+	setTimeout(()=>{
+		if(tableDataNew){
+			addColumn()
+			defaultOneAddedFlag.value = true
+		}else{
+			waitProvideFormPropsModelDo
+		}
+	},200)
+	
+}
+
 const addColumn = () => {
 	console.log("如果编辑页禁用时--------->",tableDataNew.value)
     const temp: any = {}
+    if (props.data.list) {
+		console.log(props.data.list)
+		props.data.list.forEach((item: any) => {
+			if (item.name) {
+				temp[item.name] = item.control.modelValue
+			}
+		})
+		//console.log(temp)
+		
+		tableDataNew.value.push(jsonParseStringify(temp))
+		addBtnFlag.value = false
+    }
+}
+/* //改造这个方法,index为传入的数组下标,要在数组中新增一个元素,元素的属性与其他元素一致,元素的下标为index+1,原来的index之后的元素往后排即可
+const addColumnCurrent=(val:any , index:any) =>{
+	console.log(val)
+	console.log(index)
+	console.log("如果编辑页禁用时--------->",tableDataNew.value)
+    const temp: any = {}
     if (props.data.list) {
 		props.data.list.forEach((item: any) => {
 			if (item.name) {
@@ -151,6 +185,63 @@ const addColumn = () => {
 		})
 		tableDataNew.value.push(jsonParseStringify(temp))
     }
+} */
+
+/**
+ * 删除数组中指定下标的元素
+ * @param index 要删除的元素下标
+ */
+const deleteColumnCurrent = (index: any) => {
+    console.log("删除元素，下标：", index)
+    console.log("删除前数组：", tableDataNew.value)
+    
+    // 验证下标有效性
+    if (typeof index !== 'number' && typeof index !== 'string') {
+        console.error("删除失败：下标类型无效")
+        return
+    }
+    
+    const numIndex = Number(index)
+    
+    // 检查下标是否在有效范围内
+    if (isNaN(numIndex) || numIndex < 0 || numIndex >= tableDataNew.value.length) {
+        console.error(`删除失败：下标 ${index} 超出范围 (0-${tableDataNew.value.length - 1})`)
+        return
+    }
+    
+    try {
+        // 使用 splice 删除指定位置的元素
+        const deletedItem = tableDataNew.value.splice(numIndex, 1)
+        console.log("删除的元素：", deletedItem[0])
+        console.log("删除后数组：", tableDataNew.value)
+        
+        // 返回被删除的元素，便于后续操作（如撤销功能）
+        return deletedItem[0]
+    } catch (error) {
+        console.error("删除操作失败：", error)
+        throw error
+    }
+}
+
+const addColumnCurrent = (val: any, index: any) => {
+    console.log(val)
+    console.log(index)
+    console.log("如果编辑页禁用时--------->", tableDataNew.value)
+    
+    if (!props.data.list) return
+    
+    const temp: any = {}
+    props.data.list.forEach((item: any) => {
+        if (item.name) {
+            temp[item.name] = item.control.modelValue
+        }
+    })
+    
+    const newItem = jsonParseStringify(temp)
+    
+    // 计算插入位置，确保在有效范围内
+    const insertIndex = Math.min(Math.max(index + 1, 0), tableDataNew.value.length)
+    tableDataNew.value.splice(insertIndex, 0, newItem)
 }
 const getText = (text: any,val:any,name:any) => {
 	// console.log("text===>",text)
@@ -285,12 +376,15 @@ const emits = defineEmits<{
 	(e: 'asfValueChanged', val: any): void
 }>()
 
+
+
 function asfValueChanged(val:any){
 	console.log("tablePage-asfValueChanged",val)
 	emits("asfValueChanged",val)
 }
 </script>
 <template>
+	<div></div>
     <div>
         <el-form :model="tableDataNew" :disabled="props.type === 3" label-width="auto" class="formTable">
             <el-card v-for="(itval,itIndex) in tableDataNew" :key="itIndex" class="taskCardBox" shadow="always">
@@ -322,13 +416,20 @@ function asfValueChanged(val:any){
  data.config.delBtnText}}
 		  			</el-button>
 				</template>
+				
+					<el-icon  v-if="type == 1 && itIndex > 0" style="float:right; margin-left: 14px;margin-bottom: 13px;margin-right: 5px;" @click="deleteColumnCurrent(itIndex)"><Minus /></el-icon>
+					<el-icon  v-if="type==1" style="float:right;margin-bottom: 13px;margin-right: 5px;" @click="addColumnCurrent(itval,itIndex)"><Plus /></el-icon>
+					
+				
+				
+				
             </el-card>
         </el-form>
         <div
 			class="table-btn"
 			v-if="[1, 2, 4,5,7].includes(type as number) && data.config.addBtnText && !editDisabled"
 		>
-			<el-button size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button>
+			<el-button v-if="!defaultOneFlag&&addBtnFlag" size="small" @click="addColumn">{{ data.config.addBtnText }}</el-button>
 		</div>
     </div>
 </template>