修复备案卡死问题

2025-07-02 09:40:26 +08:00 · 2025-07-02 09:40:26 +08:00 · 243f1bfc7c
commit 243f1bfc7c
parent e20d7d5135
3 changed files with 127 additions and 109 deletions
--- 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);
  }
--- 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>
--- 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,27 +1,40 @@
 <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>
@ -31,42 +44,44 @@
 </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: [
+
+// ============= 表格配置 =============
+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: '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 },
-  ],
-});
-const handleCurrentChange = (val) => {
-  pagination.value.currentPage = val;
+  { 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;
+  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;
-  // 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;