修复备案卡死问题

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);
   }

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-form-item label="地块编号" prop="landNumber">
-          <el-input v-model="localFormModel.id" placeholder="请输入地块编号" />
+          <el-input v-model="localFormModel.landNumber" placeholder="请输入地块编号" />
         </el-form-item>
-        <el-form-item label="面积（亩）" prop="area">
+        <el-form-item label="面积（亩）" prop="planArea">
-          <el-input-number v-model="localFormModel.area" :min="0" placeholder="请输入面积" />
+          <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-form-item label="经营主体编码" prop="businessEntityCode">
-          <el-input v-model="localFormModel.businessSubjectCode" placeholder="请输入经营主体编码" />
+          <el-input v-model="localFormModel.businessEntityCode" placeholder="请输入经营主体编码" />
         </el-form-item>
-        <el-form-item label="种植开始时间" prop="plantingStartTime">
+        <el-form-item label="种植开始时间" prop="startDate">
-          <el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" />
+          <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-form-item label="信息审核时间" prop="approvalTime">
-          <el-date-picker v-model="localFormModel.auditTime" type="date" placeholder="请选择信息审核时间" />
+          <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-form-item label="种植作物" prop="crop">
-          <el-input v-model="localFormModel.CropName" placeholder="请输入种植作物" />
+          <el-input v-model="localFormModel.crop" placeholder="请输入种植作物" />
         </el-form-item>
-        <el-form-item label="作物品种" prop="CropVarietyName">
+        <el-form-item label="作物品种" prop="cropBrand">
-          <el-input v-model="localFormModel.CropVarietyName" placeholder="请输入作物品种" />
+          <el-input v-model="localFormModel.cropBrand" placeholder="请输入作物品种" />
         </el-form-item>
-        <el-form-item label="种植结束时间" prop="plantingEndTime">
+        <el-form-item label="种植结束时间" prop="endDate">
-          <el-date-picker v-model="localFormModel.plantingEndTime" type="date" placeholder="请选择种植结束时间" />
+          <el-date-picker v-model="localFormModel.endDate" type="date" placeholder="请选择种植结束时间" style="width: 100%" />
         </el-form-item>
-        <el-form-item label="经营主体名称" prop="businessSubjectName">
+        <el-form-item label="经营主体名称" prop="businessEntityName">
-          <el-input v-model="localFormModel.businessSubjectName" placeholder="请输入经营主体名称" />
+          <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) {
+    Object.assign(localFormModel.value, val);
-      localFormModel.value = { ...val };
-    }
-  },
-  { deep: true, immediate: true }
-);
-
-watch(
-  localFormModel,
-  (val) => {
-    emit('update:modelValue', 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>

sub-government-affairs-service/src/views/planting-management/variety-record/components/RecordPage.vue

@@ -1,72 +1,87 @@
 <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"
+    <TableComponent
-      :data="crudData"
+      :loading="loading"
-      :option="crudOptions"
+      :columns="columns"
-      :table-loading="loading"
+      :table-data="tableData"
-      @current-change="handleCurrentChange"
+      :current-page="pageData.currentPage"
-      @size-change="handleSizeChange"
+      :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: '', // 关键词
-  keyword: '',
+  regionCode: '', // 区域代码
-  regionCode: '',
+  gridId: '', // 网格ID
-  gridId: '',
+  landTypeId: '', // 土地类型ID
-  landTypeId: '',
 });
 
-const activeTab = ref('1');
+// 分页数据
-const handleTabChange = ({ name }) => {
+const pageData = ref({
-  getData();
-};
-
-const pagination = ref({
   currentPage: 1,
   pageSize: 10,
   total: 0,
 });
-const crudData = ref([]);
+
-const crudOptions = reactive({
+// ============= 表格配置 =============
-  ...CRUD_OPTIONS,
+const columns = ref([
-  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: 'planArea',
+    formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩`,
+  },
   { label: '所属行政区域', prop: 'belongRegion', width: 160 },
   { label: '所属网格', prop: 'belongGrid', width: 90 },
   { label: '具体位置', prop: 'address', width: 160 },
@@ -83,52 +98,57 @@ const crudOptions = reactive({
   { label: '账号（手机号）', prop: 'account', width: 130 },
   { label: '信息填报时间', prop: 'fillTime', width: 110 },
   { label: '信息审核时间', prop: 'approvalTime', width: 110 },
-  ],
+  { label: '操作', prop: 'action', slotName: 'action', fixed: 'right' },
-});
+]);
-const handleCurrentChange = (val) => {
+
-  pagination.value.currentPage = val;
+// ============= 方法 =============
+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 handleView = async (row) => {
-const mode = ref('view'); // 或 'edit' / 'create'
-const handleView = (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 searchParms = { ...searchForm.value, ...pageData.value, status: activeTab.value };
-  // 调用接口获取数据
+
-  const response = await fetchRecordList(searchForm.value);
+  try {
-  crudData.value = response.data.records;
+    const response = await fetchRecordList(searchParms);
-  pagination.value.total = response.data.total;
+    tableData.value = response.data.records;
+    pageData.value.total = response.data.total;
+  } finally {
     loading.value = false;
-  // setTimeout(() => {
+  }
-  //   crudData.value = mockData.filter((item) => item.landStatus === Number(activeTab.value));
-  //   pagination.value.total = crudData.value.length;
-  //   loading.value = false;
-  // }, 200);
 };
 
 onMounted(() => {
   getData();
 });
 </script>
+
 <style scoped>
 :deep(.el-dialog__body) {
   padding: 20px;