From 243f1bfc7cb359024424d9851c2b2c59408d7bb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=88=E9=B8=BF?= <shenhongkm@163.com>
Date: Wed, 2 Jul 2025 09:40:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=87=E6=A1=88=E5=8D=A1?=
 =?UTF-8?q?=E6=AD=BB=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AreaSelect/index.vue       |   2 +-
 .../variety-record/components/RecordForm.vue  |  60 +++---
 .../variety-record/components/RecordPage.vue  | 174 ++++++++++--------
 3 files changed, 127 insertions(+), 109 deletions(-)

diff --git a/sub-government-affairs-service/src/components/AreaSelect/index.vue b/sub-government-affairs-service/src/components/AreaSelect/index.vue
index e087d9c..1f68bce 100644
--- a/sub-government-affairs-service/src/components/AreaSelect/index.vue
+++ b/sub-government-affairs-service/src/components/AreaSelect/index.vue
@@ -90,7 +90,7 @@ const fetchAreaData = async () => {
       },
     });
     areaOptions.value = res.data ?? [];
-    console.log('AreaSelect区域数据', areaOptions.value);
+    // console.log('AreaSelect区域数据', areaOptions.value);
   } catch (err) {
     console.error('加载行政区域失败', err);
   }
diff --git a/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordForm.vue b/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordForm.vue
index 2105e1a..0e34798 100644
--- a/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordForm.vue
+++ b/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordForm.vue
@@ -2,26 +2,26 @@
   <el-form ref="formRef" :model="localFormModel" :rules="rules" :disabled="disabled" label-width="120px">
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="地块编号" prop="id">
-          <el-input v-model="localFormModel.id" placeholder="请输入地块编号" />
+        <el-form-item label="地块编号" prop="landNumber">
+          <el-input v-model="localFormModel.landNumber" placeholder="请输入地块编号" />
         </el-form-item>
-        <el-form-item label="面积（亩）" prop="area">
-          <el-input-number v-model="localFormModel.area" :min="0" placeholder="请输入面积" />
+        <el-form-item label="面积（亩）" prop="planArea">
+          <el-input-number v-model="localFormModel.planArea" :min="0" placeholder="请输入面积" style="width: 100%" />
         </el-form-item>
         <el-form-item label="所属行政区域" prop="areaCode">
           <AreaSelect v-model="localFormModel.areaCode" :emit-path="false" label="" />
         </el-form-item>
-        <el-form-item label="经营主体编码" prop="businessSubjectCode">
-          <el-input v-model="localFormModel.businessSubjectCode" placeholder="请输入经营主体编码" />
+        <el-form-item label="经营主体编码" prop="businessEntityCode">
+          <el-input v-model="localFormModel.businessEntityCode" placeholder="请输入经营主体编码" />
         </el-form-item>
-        <el-form-item label="种植开始时间" prop="plantingStartTime">
-          <el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" />
+        <el-form-item label="种植开始时间" prop="startDate">
+          <el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" style="width: 100%" />
         </el-form-item>
         <el-form-item label="账号（手机号）" prop="account">
           <el-input v-model="localFormModel.account" placeholder="请输入账号（手机号）" />
         </el-form-item>
-        <el-form-item label="信息审核时间" prop="auditTime">
-          <el-date-picker v-model="localFormModel.auditTime" type="date" placeholder="请选择信息审核时间" />
+        <el-form-item label="信息审核时间" prop="approvalTime">
+          <el-date-picker v-model="localFormModel.approvalTime" type="date" placeholder="请选择信息审核时间" style="width: 100%" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -31,20 +31,20 @@
         <el-form-item label="具体位置" prop="address">
           <el-input v-model="localFormModel.address" placeholder="请输入具体位置" />
         </el-form-item>
-        <el-form-item label="种植作物" prop="CropName">
-          <el-input v-model="localFormModel.CropName" placeholder="请输入种植作物" />
+        <el-form-item label="种植作物" prop="crop">
+          <el-input v-model="localFormModel.crop" placeholder="请输入种植作物" />
         </el-form-item>
-        <el-form-item label="作物品种" prop="CropVarietyName">
-          <el-input v-model="localFormModel.CropVarietyName" placeholder="请输入作物品种" />
+        <el-form-item label="作物品种" prop="cropBrand">
+          <el-input v-model="localFormModel.cropBrand" placeholder="请输入作物品种" />
         </el-form-item>
-        <el-form-item label="种植结束时间" prop="plantingEndTime">
-          <el-date-picker v-model="localFormModel.plantingEndTime" type="date" placeholder="请选择种植结束时间" />
+        <el-form-item label="种植结束时间" prop="endDate">
+          <el-date-picker v-model="localFormModel.endDate" type="date" placeholder="请选择种植结束时间" style="width: 100%" />
         </el-form-item>
-        <el-form-item label="经营主体名称" prop="businessSubjectName">
-          <el-input v-model="localFormModel.businessSubjectName" placeholder="请输入经营主体名称" />
+        <el-form-item label="经营主体名称" prop="businessEntityName">
+          <el-input v-model="localFormModel.businessEntityName" placeholder="请输入经营主体名称" />
         </el-form-item>
         <el-form-item label="信息填报时间" prop="fillTime">
-          <el-date-picker v-model="localFormModel.fillTime" type="date" placeholder="请选择信息填报时间" />
+          <el-date-picker v-model="localFormModel.fillTime" type="date" placeholder="请选择信息填报时间" style="width: 100%" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -52,12 +52,13 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, toRaw } from 'vue';
 
 const props = defineProps({
   modelValue: {
     type: Object,
     required: true,
+    default: () => ({}),
   },
   disabled: {
     type: Boolean,
@@ -67,22 +68,13 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
+// 初始化一份局部数据
 const localFormModel = ref({ ...props.modelValue });
 
 watch(
   () => props.modelValue,
   (val) => {
-    if (val) {
-      localFormModel.value = { ...val };
-    }
-  },
-  { deep: true, immediate: true }
-);
-
-watch(
-  localFormModel,
-  (val) => {
-    emit('update:modelValue', val);
+    Object.assign(localFormModel.value, val);
   },
   { deep: true }
 );
@@ -91,4 +83,10 @@ const rules = {
   // id: [{ required: true, message: '地块编号不能为空', trigger: 'blur' }],
   // area: [{ type: 'number', min: 0, message: '面积必须大于等于0', trigger: 'change' }],
 };
+
+const getFormData = () => toRaw(localFormModel.value);
+
+defineExpose({
+  getFormData,
+});
 </script>
diff --git a/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordPage.vue b/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordPage.vue
index bb35d8a..ba07685 100644
--- a/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordPage.vue
+++ b/sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordPage.vue
@@ -1,134 +1,154 @@
 <template>
   <div class="custom-body">
+    <!-- 搜索栏 -->
     <SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
+
+    <!-- 标签页 -->
     <el-tabs v-model="activeTab" @tab-click="handleTabChange">
-      <!-- <el-tab-pane label="待提交" name="-1" /> -->
       <el-tab-pane label="待审核" name="1" />
       <el-tab-pane label="已通过" name="2" />
       <el-tab-pane label="已驳回" name="3" />
     </el-tabs>
-    <avue-crud
-      ref="crudRef"
-      v-model:page="pagination"
-      :data="crudData"
-      :option="crudOptions"
-      :table-loading="loading"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
+
+    <!-- 表格组件 -->
+    <TableComponent
+      :loading="loading"
+      :columns="columns"
+      :table-data="tableData"
+      :current-page="pageData.currentPage"
+      :page-size="pageData.pageSize"
+      :total="pageData.total"
+      :show-pagination="true"
+      :show-border="true"
+      :show-sort="true"
+      style="max-height: calc(100vh - 220px)"
+      @page-change="handlePageChange"
     >
-      <template #menu="scope">
+      <!-- 操作列插槽 -->
+      <template #action="scope">
         <custom-table-operate :actions="getActions(scope.row)" :data="scope" />
       </template>
-    </avue-crud>
+    </TableComponent>
+
+    <!-- 查看/编辑弹窗 -->
     <el-dialog v-model="visible" title="查看" width="60%" align-center :draggable="true">
       <RecordForm ref="formRef" v-model="formData" :disabled="mode === 'view'" />
+
+      <!-- 弹窗底部按钮 -->
       <template #footer>
         <el-button @click="visible = false">取消</el-button>
-        <el-button v-if="mode !== 'view'" type="primary" @click="handleSubmit">提交</el-button>
+        <el-button v-if="mode !== 'view'" type="primary" @click="handleSubmit"> 提交 </el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import SearchBar from './SearchBar.vue';
-import { CRUD_OPTIONS } from '@/config';
 import RecordForm from './RecordForm.vue';
+import { fetchRecordList } from '@/apis/inputSuppliesApi/record';
 
-const loading = ref(false);
-const visible = ref(false);
+// ============= 响应式状态 =============
+const loading = ref(false); // 加载状态
+const visible = ref(false); // 弹窗显示状态
+const activeTab = ref('1'); // 当前激活的标签页
+const formRef = ref(); // 表单引用
+const formData = ref({}); // 表单数据
+const mode = ref('view'); // 模式：view查看/edit编辑/create创建
+const tableData = ref([]); // 表格数据
 
+// 搜索表单数据
 const searchForm = ref({
-  status: 1,
-  keyword: '',
-  regionCode: '',
-  gridId: '',
-  landTypeId: '',
+  keyword: '', // 关键词
+  regionCode: '', // 区域代码
+  gridId: '', // 网格ID
+  landTypeId: '', // 土地类型ID
 });
 
-const activeTab = ref('1');
-const handleTabChange = ({ name }) => {
-  getData();
-};
-
-const pagination = ref({
+// 分页数据
+const pageData = ref({
   currentPage: 1,
   pageSize: 10,
   total: 0,
 });
-const crudData = ref([]);
-const crudOptions = reactive({
-  ...CRUD_OPTIONS,
-  header: false,
-  // menu: false,
-  height: 'calc(100vh - 330px)',
-  column: [
-    { label: '地块编号', prop: 'landNumber', width: 160 },
-    { label: '地块名称', prop: 'landName', width: 170 },
-    { label: '面积', prop: 'planArea', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
-    { label: '所属行政区域', prop: 'belongRegion', width: 160 },
-    { label: '所属网格', prop: 'belongGrid', width: 90 },
-    { label: '具体位置', prop: 'address', width: 160 },
-    { label: '基地名称', prop: 'baseName' },
-    { label: '种植批次编码', prop: 'batchCode' },
-    { label: '种植批次名称', prop: 'batchName' },
-    { label: '种植作物', prop: 'crop' },
-    { label: '作物品种', prop: 'cropBrand' },
-    { label: '种植开始时间', prop: 'startDate' },
-    { label: '种植结束时间', prop: 'endDate' },
-    { label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
-    { label: '经营主体类型', prop: 'businessEntityType', width: 130 },
-    { label: '经营主体名称', prop: 'businessEntityName', width: 130 },
-    { label: '账号（手机号）', prop: 'account', width: 130 },
-    { label: '信息填报时间', prop: 'fillTime', width: 110 },
-    { label: '信息审核时间', prop: 'approvalTime', width: 110 },
-  ],
-});
-const handleCurrentChange = (val) => {
-  pagination.value.currentPage = val;
+
+// ============= 表格配置 =============
+const columns = ref([
+  { label: '地块编号', prop: 'landNumber', width: 160 },
+  { label: '地块名称', prop: 'landName', width: 170 },
+  {
+    label: '面积',
+    prop: 'planArea',
+    formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩`,
+  },
+  { label: '所属行政区域', prop: 'belongRegion', width: 160 },
+  { label: '所属网格', prop: 'belongGrid', width: 90 },
+  { label: '具体位置', prop: 'address', width: 160 },
+  { label: '基地名称', prop: 'baseName' },
+  { label: '种植批次编码', prop: 'batchCode' },
+  { label: '种植批次名称', prop: 'batchName' },
+  { label: '种植作物', prop: 'crop' },
+  { label: '作物品种', prop: 'cropBrand' },
+  { label: '种植开始时间', prop: 'startDate' },
+  { label: '种植结束时间', prop: 'endDate' },
+  { label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
+  { label: '经营主体类型', prop: 'businessEntityType', width: 130 },
+  { label: '经营主体名称', prop: 'businessEntityName', width: 130 },
+  { label: '账号（手机号）', prop: 'account', width: 130 },
+  { label: '信息填报时间', prop: 'fillTime', width: 110 },
+  { label: '信息审核时间', prop: 'approvalTime', width: 110 },
+  { label: '操作', prop: 'action', slotName: 'action', fixed: 'right' },
+]);
+
+// ============= 方法 =============
+const handleTabChange = ({ name }) => {
+  getData();
 };
-const handleSizeChange = (val) => {
-  pagination.value.pageSize = val;
+
+const handlePageChange = ({ page, pageSize }) => {
+  pageData.value.currentPage = page;
+  pageData.value.pageSize = pageSize;
+  getData();
 };
 
 const getActions = (row) => {
   return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
 };
-const formRef = ref();
-const formData = ref({}); // 初始数据
-const mode = ref('view'); // 或 'edit' / 'create'
-const handleView = (row) => {
+
+const handleView = async (row) => {
   formData.value = { ...row };
+  await nextTick();
   mode.value = 'view';
   visible.value = true;
 };
-const handleSearch = () => {};
+
+const handleSearch = () => {
+  getData();
+};
+
 const handleReset = () => {
   getData();
 };
 
-import { mockData } from '../mockData';
-import { createRecord, deleteRecord, updateRecord, getRecord, fetchRecordList } from '@/apis/inputSuppliesApi/record';
 const getData = async () => {
   loading.value = true;
-  searchForm.value.status = Number(activeTab.value);
-  // 调用接口获取数据
-  const response = await fetchRecordList(searchForm.value);
-  crudData.value = response.data.records;
-  pagination.value.total = response.data.total;
-  loading.value = false;
-  // setTimeout(() => {
-  //   crudData.value = mockData.filter((item) => item.landStatus === Number(activeTab.value));
-  //   pagination.value.total = crudData.value.length;
-  //   loading.value = false;
-  // }, 200);
+  const searchParms = { ...searchForm.value, ...pageData.value, status: activeTab.value };
+
+  try {
+    const response = await fetchRecordList(searchParms);
+    tableData.value = response.data.records;
+    pageData.value.total = response.data.total;
+  } finally {
+    loading.value = false;
+  }
 };
 
 onMounted(() => {
   getData();
 });
 </script>
+
 <style scoped>
 :deep(.el-dialog__body) {
   padding: 20px;