修改程序，将前台写死内容改成可配置

src/components/FormBox.vue

@@ -1,20 +1,27 @@
-<!-- vue3不支持defineEmits动态添加    暂时无法使用配置按钮 -->
+<!-- FormBox.vue -->
 <template>
 	<div>
 		<div v-if="dialog">
-			<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1300px"
-				top="5vh">
+			<el-dialog 
+        :close-on-click-modal="false" 
+        draggable 
+        :title="dialogTitle" 
+        v-model="dialogVisible" 
+        width="1000px"
+        top="10vh"
+        @close="handleDialogClose"
+      >
 				<el-card :body-style="cardBodyStyle">
-					<el-form v-if="formItems && formItems.length > 0" :model="form" label-width="auto"
+					<el-form v-if="formItems && formItems.length > 0" :model="formData" label-width="auto"
 						label-position="right">
 						<div v-for="(itemList, indexList) in formList" :key="indexList">
 							<el-row style="margin-bottom: 5px;" :gutter="10">
 								<el-col v-for="(item, index) in itemList" :key="index" :span="item.span">
 									<el-form-item :label="item.label" :prop="item.prop">
 										<!--文本-->
-										<el-input v-if="item.type === 'input'" v-model="form[item.prop]" clearable
+										<el-input v-if="item.type === 'input'" v-model="formData[item.prop]" clearable
 											placeholder="请输入" style="width:100%; ">
-											<template #append v-if="item.searchButton?item.searchButton:false">
+											<template #append v-if="item.searchButton==true||item.searchButton=='1'?true:false">
 												<el-button @click="emit(item.searchCallback)">
 													<el-icon>
 														<Search />
@@ -22,33 +29,37 @@
 											</template>
 										</el-input>
 										<!-- 下拉 -->
-										<el-select v-if="item.type === 'select'" v-model="form[item.prop]" clearable
+										<el-select v-if="item.type === 'select'" v-model="formData[item.prop]" clearable
 											style="width:100%; ">
 											<el-option v-for="(option,i) in item.options" :key="i"
 												:value="option[item.optionValue?item.optionValue:'value']"
 												:label="option[item.optionLabel?item.optionLabel:'label']" />
 										</el-select>
 										<!-- 单选 -->
-										<el-radio-group v-if="item.type === 'radio'" v-model="form[item.prop]"
+										<el-radio-group v-if="item.type === 'radio'" v-model="formData[item.prop]"
 											style="width:100%; ">
 											<el-radio v-for="(option,i) in item.options" :key="i"
-												:label="option[item.optionValue?item.optionValue:'value']">{{option[item.optionLabel?item.optionLabel:'label']}}
+												:label="option[item.optionValue?item.optionValue:'value']">
+												{{option[item.optionLabel?item.optionLabel:'label']}}
 											</el-radio>
 										</el-radio-group>
 										<!--日期-->
-										<el-date-picker v-if="item.type === 'date'" v-model="form[item.prop]"
+										<el-date-picker v-if="item.type === 'date'" v-model="formData[item.prop]"
 											type="date" clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD"
 											style="width:100%; " />
-										<!--日期-->
-										<el-date-picker v-if="item.type === 'daterange'" v-model="form[item.prop]"
+										<!--日期范围-->
+										<el-date-picker v-if="item.type === 'daterange'" v-model="formData[item.prop]"
 											type="daterange" clearable range-separator="至" start-placeholder="开始日期"
 											end-placeholder="结束日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
 											style="width:100%; "></el-date-picker>
-										<!--日期-->
-										<el-date-picker v-if="item.type === 'datetimerange'" v-model="form[item.prop]"
+										<!--日期时间范围-->
+										<el-date-picker v-if="item.type === 'datetimerange'" v-model="formData[item.prop]"
 											type="daterange" range-separator="至" start-placeholder="开始时间"
 											end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
 											format="YYYY-MM-DD HH:mm:ss" style="width: 350px; " />
+										<!--文本-->
+										<el-input v-if="item.type === 'textarea'" type="textarea" v-model="formData[item.prop]" clearable
+											placeholder="请输入" style="width:100%; " :rows="4"/>
 									</el-form-item>
 								</el-col>
 							</el-row>
@@ -56,269 +67,251 @@
 					</el-form>
 				</el-card>
 
-
 				<template #footer>
 					<div class="dialog-footer">
-						<el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
-						<el-button type="danger" @click="()=>dialogVisible=false">取消</el-button>
+						<el-button type="success" @click="handleSave">保存</el-button>
+						<el-button type="danger" @click="handleClose">取消</el-button>
 					</div>
 				</template>
 			</el-dialog>
 		</div>
-
-		<div v-else>
-			<el-card :body-style="cardBodyStyle">
-				<el-form v-if="formItems && formItems.length > 0" :model="form" label-width="auto"
-					label-position="right">
-					<div v-for="(itemList, indexList) in formList" :key="indexList">
-						<el-row style="margin-bottom: 5px;" :gutter="10">
-							<el-col v-for="(item, index) in itemList" :key="index" :span="item.span">
-								<el-form-item :label="item.label" :prop="item.prop">
-									<!--文本-->
-									<el-input v-if="item.type === 'input'" v-model="form[item.prop]" clearable
-										placeholder="请输入" style="width:100%; ">
-										<template #append v-if="item.searchButton?item.searchButton:false">
-											<el-button @click="emit(item.searchCallback)">
-												<el-icon>
-													<Search />
-												</el-icon></el-button>
-										</template>
-									</el-input>
-									<!-- 下拉 -->
-									<el-select v-if="item.type === 'select'" v-model="form[item.prop]" clearable
-										style="width:100%; ">
-										<el-option v-for="(option,i) in item.options" :key="i"
-											:value="option[item.optionValue?item.optionValue:'value']"
-											:label="option[item.optionLabel?item.optionLabel:'label']" />
-									</el-select>
-									<!-- 单选 -->
-									<el-radio-group v-if="item.type === 'radio'" v-model="form[item.prop]"
-										style="width:100%; ">
-										<el-radio v-for="(option,i) in item.options" :key="i"
-											:label="option[item.optionValue?item.optionValue:'value']">{{option[item.optionLabel?item.optionLabel:'label']}}
-										</el-radio>
-									</el-radio-group>
-									<!--日期-->
-									<el-date-picker v-if="item.type === 'date'" v-model="form[item.prop]"
-										type="date" clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD"
-										style="width:100%; " />
-									<!--日期-->
-									<el-date-picker v-if="item.type === 'daterange'" v-model="form[item.prop]"
-										type="daterange" clearable range-separator="至" start-placeholder="开始日期"
-										end-placeholder="结束日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
-										style="width:100%; "></el-date-picker>
-									<!--日期-->
-									<el-date-picker v-if="item.type === 'datetimerange'" v-model="form[item.prop]"
-										type="daterange" range-separator="至" start-placeholder="开始时间"
-										end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
-										format="YYYY-MM-DD HH:mm:ss" style="width: 350px; " />
-								</el-form-item>
-							</el-col>
-						</el-row>
-					</div>
-				</el-form>
-			</el-card>
-		</div>
-
-
+		<!-- 非弹窗模式省略... -->
 	</div>
 </template>
+
 <script setup>
-	import {
-		ref,
-		getCurrentInstance,
-		onMounted,
-		reactive,
-		computed
-	} from 'vue'
-	const {
-		proxy
-	} = getCurrentInstance()
-	import style from '@/tools/style'
-	const cardBodyStyle = ref(style.card)
-	onMounted(() => {
-		// init()
-		getMenuForm()
-	})
-	const props = defineProps({
-		// formItem: {
-		// 	type: Array,
-		// 	default: () => []
-		// },
-		formData: {
-			type: Object,
-			default: () => {}
-		},
-		formName: { // form查询数据
-			type: String,
-			default: () => ''
-		},
-		dialog: {
-			type: Boolean,
-			default: () => false
-		}
-	})
-	const emit = defineEmits()
-	// const form = reactive(JSON.parse(JSON.stringify(props.formData))) // form查询数据
-	const form = computed(() => {
-		return props.formData
-	})
-	const formList = ref([])
-	const span = ref(5)
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  watch,
+  nextTick
+} from 'vue'
+import { Search } from '@element-plus/icons-vue'
+
+const {
+  proxy
+} = getCurrentInstance()
+
+import style from '@/tools/style'
+const cardBodyStyle = ref(style.card)
 
+// Props
+const props = defineProps({
+  formData: {
+    type: Object,
+    default: () => ({})
+  },
+  formName: {
+    type: String,
+    default: () => ''
+  },
+  dialog: {
+    type: Boolean,
+    default: () => false
+  },
+  title: {
+    type: String,
+    default: '编辑'
+  }
+})
 
+// Emits
+const emit = defineEmits(['save', 'update:dialog', 'close'])
 
-	const formItems = ref([])
-	const getMenuForm = () => {
-		var url = 'framework/MenuForm/queryMenuForm'
-		var param = {
-			menuId: localStorage.getItem('menuId'),
-			formType: '录入',
-			formName: props.formName
-		}
-		proxy.$axios.get(url, param).then(response => {
-			if (response.data.code == '0') {
-				formItems.value = response.data.data
-				init()
-			} else {
-				ElMessage.error('操作失败！' + response.data.msg)
-			}
-		})
-	}
+// 响应式数据
+const formItems = ref([])
+const formList = ref([])
+const dicTypes = ref([])
+const urls = ref([])
+const dialogVisible = ref(false)
+const dialogTitle = ref('编辑')
 
+// 监听 dialog prop 变化
+watch(() => props.dialog, (newVal) => {
+  console.log('FormBox dialog prop changed:', newVal)
+  dialogVisible.value = newVal
+  if (newVal) {
+    dialogTitle.value = props.formData?.id ? '编辑客户' : '新增客户'
+  }
+}, { immediate: true })
 
+// 监听内部 dialogVisible 变化
+watch(dialogVisible, (newVal) => {
+  console.log('FormBox dialogVisible changed:', newVal)
+  emit('update:dialog', newVal)
+  if (!newVal) {
+    emit('close')
+  }
+})
 
+onMounted(() => {
+  if (props.formName) {
+    getMenuForm()
+  }
+})
 
+// 获取表单配置
+const getMenuForm = () => {
+  var url = 'framework/MenuForm/queryMenuForm'
+  var param = {
+    menuId: localStorage.getItem('menuId'),
+    formType: '录入',
+    formName: props.formName
+  }
+  proxy.$axios.get(url, param).then(response => {
+    if (response.data.code == '0') {
+      formItems.value = response.data.data
+      init()
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
 
-	const dicTypes = ref([])
-	const urls = ref([])
-	const init = async () => {
-		var colsCount = 4
-		var length = Math.ceil(formItems.value.length / colsCount)
-		var arr = []
-		for (var i = 0; i < length; i++) {
-			arr.push([])
-		}
-		var col = 0
-		formItems.value.forEach((item, index) => {
-			col = Math.floor(index / colsCount)
-			if (item.type == 'datetimerange') {
-				item.span = 12
-			} else {
-				item.span = 6
-			}
-			if ((item.type == 'select' || item.type == 'radio') && item.dicType && item.dicType != null &&
-				item
-				.dicType != '') {
-				dicTypes.value.push(item.dicType)
-			}
+// 初始化表单布局
+const init = async () => {
+  var colsCount = 4
+  var length = Math.ceil(formItems.value.length / colsCount)
+  var arr = []
+  for (var i = 0; i < length; i++) {
+    arr.push([])
+  }
+  var col = 0
+  formItems.value.forEach((item, index) => {
+    col = Math.floor(index / colsCount)
+	if(item.formType == "录入" && item.type != 'textarea'){
+		item.span = 12
+	}else if (item.type == 'datetimerange') {
+      item.span = 12
+    } else if(item.type == 'textarea'){
+		item.span = 24
+	} else {
+      item.span = 6
+    }
+	
+    if ((item.type == 'select' || item.type == 'radio') && item.dicType && item.dicType != null &&
+      item.dicType != '') {
+      dicTypes.value.push(item.dicType)
+    }
 
-			if ((item.type == 'select' || item.type == 'radio') && item.url && item.url != null && item
-				.url != '') {
-				urls.value.push({
-					'url': item.url,
-					'param': item.param,
-					'optionLabel': item.optionLabel,
-					'optionValue': item.optionValue,
-				})
-			}
-			arr[col].push(item)
-		})
-		formList.value = arr
+    if ((item.type == 'select' || item.type == 'radio') && item.url && item.url != null && item.url != '') {
+      urls.value.push({
+        'url': item.url,
+        'param': item.param,
+        'optionLabel': item.optionLabel,
+        'optionValue': item.optionValue,
+      })
+    }
+    arr[col].push(item)
+  })
+  formList.value = arr
 
-		console.log('dicTypes.value:' + JSON.stringify(dicTypes.value))
-		if (dicTypes.value.length > 0) {
-			getDic()
-		}
-		console.log('urls.value:' + JSON.stringify(urls.value))
-		if (urls.value.length > 0) {
-			for (var item of urls.value) {
-				await getOption(item)
-			}
-		}
-	}
-	const dialogVisible = ref(false)
-	const open = () => {
-		dialogVisible.value = true
-	}
-	const close = () => {
-		dialogVisible.value = false
-	}
+  if (dicTypes.value.length > 0) {
+    getDic()
+  }
+  
+  if (urls.value.length > 0) {
+    for (var item of urls.value) {
+      await getOption(item)
+    }
+  }
+}
 
-	const getDic = () => {
-		var url = 'framework/Common/querySelectorList'
-		var param = {
-			type: JSON.stringify(dicTypes.value)
-		}
-		proxy.$axios.get(url, param).then(response => {
-			if (response.data.code == '0') {
+// 获取字典数据
+const getDic = () => {
+  var url = 'framework/Common/querySelectorList'
+  var param = {
+    type: JSON.stringify(dicTypes.value)
+  }
+  proxy.$axios.get(url, param).then(response => {
+    if (response.data.code == '0') {
+      for (let key in response.data.data) {
+        for (var item of formItems.value) {
+          if ((item.type == 'select' || item.type == 'radio') && item.dicType && item.dicType != null && item.dicType != '') {
+            if (key == item.dicType) {
+              item.options = response.data.data[key]
+              item.optionLabel = 'dicName'
+              item.optionValue = 'dicCode'
+            }
+          }
+        }
+      }
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
 
-				// console.log(response.data.data)
+// 获取选项数据
+const getOption = (item) => {
+  return new Promise((resolve) => {
+    var url = item.url
+    var param = item.param
+    proxy.$axios.get(url, param).then(response => {
+      if (response.data.code == '0') {
+        for (var form of formItems.value) {
+          if (form.url == item.url) {
+            form.options = response.data.data
+            form.optionLabel = item.optionLabel
+            form.optionValue = item.optionValue
+          }
+        }
+        resolve()
+      } else {
+        ElMessage.error('操作失败！' + response.data.msg)
+        resolve()
+      }
+    }).catch(() => {
+      resolve()
+    })
+  })
+}
 
-				for (let key in response.data.data) {
-					// console.log('key：' + key)
-					for (var item of formItems.value) {
-						if ((item.type == 'select' || item.type == 'radio') && item.dicType && item.dicType !=
-							null && item.dicType != '') {
-							// console.log('item.dicType:' + item.dicType)
-							if (key == item.dicType) {
-								item.options = response.data.data[key]
-								item.optionLabel = 'dicName'
-								item.optionValue = 'dicCode'
-							}
-						}
-					}
-				}
-				// console.log('props.formItem:' + JSON.stringify(props.formItem))
+// 保存
+const handleSave = () => {
+  console.log('保存表单数据:', props.formData)
+  emit('save', props.formData)
+}
 
-			} else {
-				ElMessage.error('操作失败！' + response.data.msg)
-			}
-		})
-	}
+// 关闭弹窗
+const handleClose = () => {
+  dialogVisible.value = false
+}
 
-	const getOption = (item) => { // 清空搜索栏
-		var url = item.url
-		var param = item.param
-		proxy.$axios.get(url, param).then(response => {
-			if (response.data.code == '0') {
-				for (var form of formItems.value) {
-					if (form.url == item.url) {
-						form.options = response.data.data
-						form.optionLabel = item.optionLabel
-						form.optionValue = item.optionValue
-					}
-				}
-			} else {
-				ElMessage.error('操作失败！' + response.data.msg)
-			}
-		})
-	}
+// 弹窗关闭事件
+const handleDialogClose = () => {
+  dialogVisible.value = false
+}
 
-	const handleSave = () => {
-		emit('save', form.value)
-	}
-	defineExpose({
-		open,
-		close,
-		form
-	})
+// 暴露给父组件的方法
+const open = () => {
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({
+  open,
+  close
+})
 </script>
 
 <style>
-	.search-bar {
-		display: flex;
-		flex-direction: row;
-
-	}
+.search-bar {
+  display: flex;
+  flex-direction: row;
+}
 
-	.search-bar .form {
-		display: flex;
-		flex-direction: row;
-	}
+.search-bar .form {
+  display: flex;
+  flex-direction: row;
+}
 
-	.search-bar .button {
-		display: flex;
-		flex-direction: row;
-	}
+.search-bar .button {
+  display: flex;
+  flex-direction: row;
+}
 </style>

src/components/TableBox.vue

@@ -52,7 +52,7 @@
 	onMounted(() => {
 		// init()
 		getMenuTable()
-		getTableData()
+		//getTableData()
     updateViewportHeight()
 	})
 

src/views/sto/main/customer.vue

@@ -1,528 +1,204 @@
 <template>
   <div>
-    <el-card :body-style="cardBodyStyle">
-      <el-form :model="query" label-width="auto" label-position="right">
-        <el-row :gutter="10">
-          <el-col :span="5">
-            <el-form-item label="客户名称" style="margin-bottom: 0px;" >
-              <el-input v-model="query.customerNm" clearable placeholder="请输入客户名称" style="width:100%;"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-form-item label="" style="margin-bottom: 0px; margin-top: 5px;">
-              <el-button type="primary" @click="handleSearch">查询</el-button>
-              <el-button type="success" @click="insertDialog">新增</el-button>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </el-card>
-    <ButtonBox @search="handleSearch" @add="insertDialog"></ButtonBox>
-    <el-card :body-style="cardBodyStyle">
-      <el-table :data="tableData" border highlight-current-row   @selection-change="handleSelectionChange" :height="height"  >
-        <el-table-column type="selection" fixed></el-table-column>
-        <el-table-column type="index" label="序号" align="center" width="60">
-          <template #default="scope">
-            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="true" prop="customerNm" label="客户名称" width="150" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="customerShortNm" label="客户简称" width="150" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="contactPerson" label="联系人" width="150" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="contactInfo" label="联系方式" width="150" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="defaultAddress" label="默认地址" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column label="操作" header-align="center" align="center" width="200px" fixed="right">
-          <template #default="scope">
-            <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button plain type="danger" @click="handleRemove(scope.row )">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <el-card :body-style="cardBodyStyle">
-      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
-                     background="background" layout="total, sizes, prev, pager, next, jumper"
-                     @size-change="handleSizeChange"
-                     @current-change="handleCurrentChange">
-      </el-pagination>
-    </el-card>
-
-    <el-dialog class="diaClass"  :close-on-click-modal="false" draggable title="新增" v-model="dialogVisible" width="40%" top="5vh"
-               @open="openDialog">
-      <el-card  >
-      <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="客户名称" prop="customerNm">
-              <el-input v-model="form.customerNm" maxlength="100" placeholder="请输入客户名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="客户简称" prop="customerShortNm">
-              <el-input v-model="form.customerShortNm" maxlength="100"  placeholder="请输入客户简称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系人" prop="contactPerson">
-              <el-input v-model="form.contactPerson"  maxlength="50" placeholder="请输入联系人"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系方式" prop="contactInfo">
-              <el-input v-model="form.contactInfo" maxlength="50" placeholder="请输入联系方式"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="默认地址" prop="defaultAddress">
-              <el-input
-                  v-model="form.defaultAddress"
-                  :autosize="{ minRows: 2, maxRows: 4 }"
-                  type="textarea"
-                  placeholder="请输入默认地址"
-                  maxlength="2"
-                  show-word-limit
-              />
-            </el-form-item>
-          </el-col>
-
-        </el-row>
-      </el-form>
-
-      </el-card>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="success" plain @click="handleInsert(ruleFormRef)">保存</el-button>
-          <el-button type="danger" plain @click="handleCancelSave">取消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-    <el-dialog class="diaClass"  :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisibleEdit" width="40%" top="5vh"
-               @open="openDialog">
-      <el-card :body-style="cardBodyStyle">
-      <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="客户名称" prop="customerNm">
-              <el-input v-model="form.customerNm" placeholder="请输入客户名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="客户简称" prop="customerShortNm">
-              <el-input v-model="form.customerShortNm" placeholder="请输入客户简称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系人" prop="contactPerson">
-              <el-input v-model="form.contactPerson" placeholder="请输入联系人"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系方式" prop="contactInfo">
-              <el-input v-model="form.contactInfo" placeholder="请输入联系方式"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="默认地址" prop="defaultAddress">
-              <el-input
-                  v-model="form.defaultAddress"
-                  :autosize="{ minRows: 2, maxRows: 4 }"
-                  type="textarea"
-                  placeholder="请输入默认地址"
-              />
-            </el-form-item>
-          </el-col>
-
-        </el-row>
-      </el-form>
-
-      </el-card>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="success" plain @click="handleSave(ruleFormRef)">保存</el-button>
-          <el-button type="danger" plain @click="handleCancelSave2">取消</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <SearchBox ref="SearchBoxRef" formName="selectTop" :formData="query" @showPop="showPop" @reset="reset"></SearchBox>
+    <ButtonBox @search="handleSearch" @add="insertDialog" @start="start('0')" @remove="shutdwon('1')" @edit="editDialog"></ButtonBox>
   </div>
+  <div>
+    <TableBox ref="TableBoxRef" :tableData="tableDate" @edit="handleEdit" @remove="handleRemove" :page="pageType" :url="url" :param="query"></TableBox>
 
+    <FormBox ref="FormBoxRef" formName="input" :formData="form" :dialog="dialog" @save="handleSave" 
+      @update:dialog="(val) => dialog = val" :title="dialogTitle"></FormBox>
+  </div>
 </template>
 
 <script setup>
-import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
+import { getCurrentInstance, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import tools from '@/tools'
-import ButtonBox from "@/components/ButtonBox.vue";
-
-const {
-  proxy
-} = getCurrentInstance()
+import ButtonBox from "@/components/ButtonBox.vue"
+import SearchBox from "@/components/SearchBox.vue"
+import FormBox from '@/components/FormBox.vue'
+import TableBox from '@/components/TableBox.vue'
 
-const cardBodyStyle = ref(tools.style.card)
-const inputStyle = ref(tools.style.input)
+const { proxy } = getCurrentInstance()
 
+// 查询参数
+const query = ref({
+  customerNm: ''
+})
 
-
-const url = ref('/sto/Customer/query')
-
-/**
- *   查询
- */
-
+// 表单数据 - 确保包含所有动态配置的字段
 const form = ref({
-  customerNm: '',
-  customerShortNm: '',
-  contactPerson: '',
-  contactInfo: '',
-  defaultAddress: ''
-});
-
-const query = ref({
+  id: '',
   customerNm: '',
   customerShortNm: '',
   contactPerson: '',
   contactInfo: '',
   defaultAddress: ''
 })
-const tableData = ref([])
-const TableBoxRef = ref(null)
-const handleSearch = () => {
-  // TableBoxRef.value.search()
-  getTableData()
-}
 
+// 控制弹窗显示
+const dialog = ref(false)
 
+// 弹窗标题
+const dialogTitle = ref('新增客户')
 
+// 表格相关配置
+const url = ref('sto/Customer/query')
+const tName = ref('sto_customer')
+const pageType = ref(true)
 
-/**
- * 分页
- */
-const currentPage = ref(1)
-const totalRows = ref(0)
-const pageSizes = ref([ 10, 20, 30, 40])
-const pageSize = ref(10)
-const handleSizeChange = (val) => {
-  pageSize.value = val
-  getTableData()
-}
-const handleCurrentChange = (val) => {
-  currentPage.value = val
-  getTableData()
-}
-/**
- * 分页
- */
-
-
-/**
- * 新增
- */
-const dialogVisible = ref(false)
-const dialogVisibleEdit = ref(false)
-
-const ruleFormRef = ref()
-
-const rules = reactive({
-  customerNm: [
-    {required: true, message: '不允许为空', trigger: 'blur'},
-  ],
-  customerShortNm: [
-    {required: true, message: '不允许为空', trigger: 'blur'},
-  ],
-  contactPerson: [
-    {required: true, message: '不允许为空', trigger: 'blur'},
-  ],
-  contactInfo: [
-    {required: true, message: '不允许为空', trigger: 'blur'},
-  ],
-  // defaultAddress: [
-  //   {required: true, message: '不允许为空', trigger: 'blur'},
-  // ],
+// 组件引用
+const TableBoxRef = ref(null)
+const FormBoxRef = ref(null)
 
+// 监听弹窗状态
+watch(dialog, (newVal) => {
+  console.log('弹窗状态变化:', newVal)
 })
 
+// ========== 弹窗相关方法 ==========
+
+// 新增弹窗
 const insertDialog = () => {
+  console.log('打开新增弹窗')
+  
+  // 重置表单数据
   form.value = {
+    id: '',
     customerNm: '',
     customerShortNm: '',
     contactPerson: '',
     contactInfo: '',
     defaultAddress: ''
   }
-  dialogVisible.value = true
+  
+  dialogTitle.value = '新增客户'
+  dialog.value = true
+  
+  console.log('dialog.value:', dialog.value)
+  console.log('form.value:', form.value)
+}
+
+// 编辑弹窗（通过顶部按钮）
+const editDialog = () => {
+  if (TableBoxRef.value?.multipleSelection?.length > 0) {
+    const selectedRow = TableBoxRef.value.multipleSelection[0]
+    handleEdit(selectedRow)
+  } else {
+    ElMessage.warning('请先选择要编辑的行')
+  }
 }
-/**
- * 新增
- */
-
-
-/**
- * 保存、修改、删除
- */
-const refUpload = ref()
-
-const openDialog = () => {
 
+// 表格行编辑（通过表格内的编辑按钮）
+const handleEdit = (row) => {
+  console.log('编辑行数据:', row)
+  
+  // 确保所有字段都有值
+  form.value = {
+    id: row.id || '',
+    customerNm: row.customerNm || '',
+    customerShortNm: row.customerShortNm || '',
+    contactPerson: row.contactPerson || '',
+    contactInfo: row.contactInfo || '',
+    defaultAddress: row.defaultAddress || ''
+  }
+  
+  dialogTitle.value = '编辑客户'
+  dialog.value = true
+  
+  console.log('编辑弹窗已打开，form:', form.value)
 }
 
-
-const handleSave = (ruleFormRef) => {
-  if (!ruleFormRef) return
-  ruleFormRef.validate((valid) => {
-    if (valid) {
-      console.log('submit!')
-      var url = 'sto/Customer/save'
-      var param = {
-        json: JSON.stringify(form.value),
-
-      }
-      proxy.$axios.post(url, param).then(response => {
-        if (response.data.code == 0) {
-          ElMessage({
-            message: '保存成功',
-            type: 'success',
-          })
-          dialogVisibleEdit.value = false
-          handleSearch()
-        } else {
-          ElMessage({
-            type: 'error',
-            message: '操作失败' + response.data.msg
-          })
-        }
-      });
-    } else {
-      console.log('error submit!')
-      return false
+// 保存表单
+const handleSave = async (formData) => {
+  try {
+    const url = 'sto/Customer/save'
+    var param = {
+      json: JSON.stringify(formData),
     }
-  })
-};
-const handleInsert = (ruleFormRef) => {
-  if (!ruleFormRef) return
-  ruleFormRef.validate((valid) => {
-    if (valid) {
-      console.log('submit!')
-      var url = 'sto/Customer/save'
-      var param = {
-        json: JSON.stringify(form.value),
-
+    console.log(JSON.stringify(formData))
+    
+    proxy.$axios.post(url, param).then(response => {
+      if (response.data.code == 0) {
+        ElMessage({
+          message: '保存成功',
+          type: 'success',
+        })
+        dialog.value = false
+        handleSearch()
+      } else {
+        ElMessage({
+          type: 'error',
+          message: '操作失败' + response.data.msg
+        })
       }
-      console.log('form.value!' ,form.value)
-      proxy.$axios.post(url, param).then(response => {
-        if (response.data.code == 0) {
-          ElMessage({
-            message: '保存成功',
-            type: 'success',
-          })
-          dialogVisible.value = false
-          handleSearch()
-        } else {
-          ElMessage({
-            type: 'error',
-            message: '操作失败' + response.data.msg
-          })
-        }
-      });
-    } else {
-      console.log('error submit!')
-      return false
-    }
-  })
-};
-
-const handleCancelSave = () => {
-  dialogVisible.value = false
-}
-const handleCancelSave2 = () => {
-  dialogVisibleEdit.value = false
+    });
+  } catch (error) {
+    ElMessage.error('操作失败: ' + error.message)
+    console.error('保存失败:', error)
+  }
 }
 
-const handleEdit = (row) => {
-  var url = 'sto/Customer/queryByPK'
-  var param = {
-    id: row.id
+// ========== 表格相关方法 ==========
+
+// 搜索
+const handleSearch = () => {
+  //console.log('执行搜索')
+  if (TableBoxRef.value?.search) {
+    TableBoxRef.value.search()
   }
-  proxy.$axios.get(url, param).then(response => {
-    if (response.data.code == '0') {
-      form.value = response.data.data
-      console.log(form.value)
-      dialogVisibleEdit.value = true
-    } else {
-      ElMessage.error('操作失败！' + response.data.msg)
-    }
-  })
 }
 
+// 删除处理
 const handleRemove = (row) => {
   var url = 'sto/Customer/remove'
   var param = {
     id: row.id
   }
-  ElMessageBox.confirm(
-      '确定删除本条记录?',
-      '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-        draggable: true,
-      }
-  )
-      .then(() => {
-        proxy.$axios.get(url, param).then(response => {
-          if (response.data.code == '0') {
-            console.log(response.data.data)
-            ElMessage({
-              type: 'success',
-              message: '删除成功！',
-            });
-            getTableData()
-          } else {
-            ElMessage.error('操作失败！' + response.data.msg)
-          }
-        })
-      })
-      .catch(() => {
-        ElMessage({
-          type: 'info',
-          message: '已取消',
-        })
-      })
-
-
-}
-
-
-/**
- * 保存、修改、删除
- */
-
-const multipleSelection = ref([])
-const handleSelectionChange = (val) => {
-  multipleSelection.value = val
-}
-
-const handleRemoveBatch = () => {
-  console.log('handleRemoveBatch')
-
-  if (multipleSelection.value.length < 1) {
-    ElMessage({
-      type: 'warning',
-      message: '请选择要删除的数据!'
-    })
-    return
-  }
-
-  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
+  ElMessageBox.confirm(`确定删除客户 "${row.customerNm}" 吗？`, '删除确认', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
-    var ids = []
-    multipleSelection.value.forEach((item, index) => {
-      ids.push(item.id)
-    })
-    /* var url = 'cot/SignRequest/removeBatch'*/
-    var param = {
-      ids: JSON.stringify(ids)
+  }).then(async () => {
+    try {
+      proxy.$axios.get(url, param).then(response => {
+        if (response.data.code == '0') {
+          console.log(response.data.data)
+          ElMessage({
+            type: 'success',
+            message: '删除成功！',
+          });
+          handleSearch()
+        } else {
+          ElMessage.error('操作失败！' + response.data.msg)
+        }
+      })
+    } catch (error) {
+      ElMessage.error('删除失败: ' + error.message)
     }
-    proxy.$axios.post(url, param).then(response => {
-      if (response.data.code == '0') {
-        ElMessage({
-          type: 'success',
-          message: '操作成功!',
-        });
-        getTableData()
-        dialogVisible.value = false
-      } else {
-        ElMessage({
-          type: 'error',
-          message: '操作失败!' + response.data.msg
-        });
-      }
-    })
-  }).catch(() => {
-    ElMessage({
-      type: 'info',
-      message: '已取消删除'
-    })
   })
 }
 
-const handleEditBatch = () => {
-  console.log('handleEditBatch')
-  if (multipleSelection.value.length != 1) {
-    ElMessage({
-      type: 'warning',
-      message: '请选择一条数据编辑!'
-    })
-    return
-  }
-  handleEdit(multipleSelection.value[0])
+// 行选择变化
+const handleSelectionChange = (selectedRows) => {
+  console.log('选中行:', selectedRows)
 }
 
-const handleUpload = () => {
-  console.log('handleUpload')
-}
+// ========== 其他方法 ==========
 
-const handleDownload = () => {
-  console.log('handleDownload')
+const reset = () => {
+  query.value = { customerNm: '' }
+  handleSearch()
 }
 
-const handleImport = () => {
-  console.log('handleImport')
-}
-
-const handleExport = () => {
-  console.log('handleExport')
-}
-const getTableData = () => {
-  var url = 'sto/Customer/query'
-  var param = {
-    page: currentPage.value,
-    rows: pageSize.value,
-    customerNm: query.value.customerNm,
-    customerShortNm: query.value.customerShortNm,
-    contactPerson: query.value.contactPerson,
-    contactInfo: query.value.contactInfo,
-    defaultAddress: query.value.defaultAddress,
-    json: JSON.stringify(query.value)
-  }
-  proxy.$axios.get(url, param).then(response => {
-    if (response.data.code == '0') {
-      tableData.value = response.data.data.records
-      totalRows.value = response.data.data.total
-    } else {
-      ElMessage.error('操作失败！' + response.data.msg)
-    }
-  })
+const start = (type) => {
+  console.log('启用操作:', type)
+  // TODO: 实现启用逻辑
 }
-const height = ref(600)
-const updateViewportHeight = () => {
-  height.value = window.innerHeight * 0.65
-  console.log( window.innerHeight);
-};
-onMounted(() => {
-  getTableData()
-  updateViewportHeight()
-})
-</script>
 
-<style scoped>
-::v-deep .diaClass .el-form-item {
-  width: 100%
-}
-::v-deep .el-autocomplete{
-  width: 100%;
-}
-::v-deep .el-dialog__body {
-  background-color: #F2F6FC;
+const shutdwon = (type) => {
+  console.log('停用操作:', type)
+  // TODO: 实现停用逻辑
 }
-</style>
+</script>