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/layouts/component/Menu/Icon.vue

@@ -1,13 +1,12 @@
 <template>
-  <el-icon v-if="!icon" :size="size" />
+  <el-icon v-if="icon.includes('icon')" :class="`iconfont ${icon}`" :size="size" />
-  <el-icon v-else-if="icon.includes('icon')" :class="`iconfont ${icon}`" :size="size" />
   <el-icon v-else :size="size"> <component :is="icon" /></el-icon>
 </template>
 <script setup name="layout-icon">
 defineProps({
   icon: {
     type: String,
-    default: '',
+    required: true,
   },
   size: {
     type: Number,

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="landNumber">
+        <el-form-item label="地块编号" prop="id">
-          <el-input v-model="localFormModel.landNumber" placeholder="请输入地块编号" />
+          <el-input v-model="localFormModel.id" placeholder="请输入地块编号" />
         </el-form-item>
-        <el-form-item label="面积（亩）" prop="planArea">
+        <el-form-item label="面积（亩）" prop="area">
-          <el-input-number v-model="localFormModel.planArea" :min="0" placeholder="请输入面积" style="width: 100%" />
+          <el-input-number v-model="localFormModel.area" :min="0" placeholder="请输入面积" />
         </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="businessEntityCode">
+        <el-form-item label="经营主体编码" prop="businessSubjectCode">
-          <el-input v-model="localFormModel.businessEntityCode" placeholder="请输入经营主体编码" />
+          <el-input v-model="localFormModel.businessSubjectCode" placeholder="请输入经营主体编码" />
         </el-form-item>
-        <el-form-item label="种植开始时间" prop="startDate">
+        <el-form-item label="种植开始时间" prop="plantingStartTime">
-          <el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" style="width: 100%" />
+          <el-date-picker v-model="localFormModel.plantingStartTime" type="date" placeholder="请选择种植开始时间" />
         </el-form-item>
         <el-form-item label="账号（手机号）" prop="account">
           <el-input v-model="localFormModel.account" placeholder="请输入账号（手机号）" />
         </el-form-item>
-        <el-form-item label="信息审核时间" prop="approvalTime">
+        <el-form-item label="信息审核时间" prop="auditTime">
-          <el-date-picker v-model="localFormModel.approvalTime" type="date" placeholder="请选择信息审核时间" style="width: 100%" />
+          <el-date-picker v-model="localFormModel.auditTime" type="date" placeholder="请选择信息审核时间" />
         </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="crop">
+        <el-form-item label="种植作物" prop="CropName">
-          <el-input v-model="localFormModel.crop" placeholder="请输入种植作物" />
+          <el-input v-model="localFormModel.CropName" placeholder="请输入种植作物" />
         </el-form-item>
-        <el-form-item label="作物品种" prop="cropBrand">
+        <el-form-item label="作物品种" prop="CropVarietyName">
-          <el-input v-model="localFormModel.cropBrand" placeholder="请输入作物品种" />
+          <el-input v-model="localFormModel.CropVarietyName" placeholder="请输入作物品种" />
         </el-form-item>
-        <el-form-item label="种植结束时间" prop="endDate">
+        <el-form-item label="种植结束时间" prop="plantingEndTime">
-          <el-date-picker v-model="localFormModel.endDate" type="date" placeholder="请选择种植结束时间" style="width: 100%" />
+          <el-date-picker v-model="localFormModel.plantingEndTime" type="date" placeholder="请选择种植结束时间" />
         </el-form-item>
-        <el-form-item label="经营主体名称" prop="businessEntityName">
+        <el-form-item label="经营主体名称" prop="businessSubjectName">
-          <el-input v-model="localFormModel.businessEntityName" placeholder="请输入经营主体名称" />
+          <el-input v-model="localFormModel.businessSubjectName" placeholder="请输入经营主体名称" />
         </el-form-item>
         <el-form-item label="信息填报时间" prop="fillTime">
-          <el-date-picker v-model="localFormModel.fillTime" type="date" placeholder="请选择信息填报时间" style="width: 100%" />
+          <el-date-picker v-model="localFormModel.fillTime" type="date" placeholder="请选择信息填报时间" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -52,13 +52,12 @@
 </template>
 
 <script setup>
-import { ref, watch, toRaw } from 'vue';
+import { ref, watch } from 'vue';
 
 const props = defineProps({
   modelValue: {
     type: Object,
     required: true,
-    default: () => ({}),
   },
   disabled: {
     type: Boolean,
@@ -68,13 +67,22 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-// 初始化一份局部数据
 const localFormModel = ref({ ...props.modelValue });
 
 watch(
   () => props.modelValue,
   (val) => {
-    Object.assign(localFormModel.value, val);
+    if (val) {
+      localFormModel.value = { ...val };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  localFormModel,
+  (val) => {
+    emit('update:modelValue', val);
   },
   { deep: true }
 );
@@ -83,10 +91,4 @@ 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,154 +1,134 @@
 <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"
-    <TableComponent
+      v-model:page="pagination"
-      :loading="loading"
+      :data="crudData"
-      :columns="columns"
+      :option="crudOptions"
-      :table-data="tableData"
+      :table-loading="loading"
-      :current-page="pageData.currentPage"
+      @current-change="handleCurrentChange"
-      :page-size="pageData.pageSize"
+      @size-change="handleSizeChange"
-      :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>
-    </TableComponent>
+    </avue-crud>
-
-    <!-- 查看/编辑弹窗 -->
     <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, onMounted, nextTick } from 'vue';
+import { ref, reactive, computed, watch, onMounted } 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 loading = ref(false); // 加载状态
+const visible = 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({
-  keyword: '', // 关键词
+  status: 1,
-  regionCode: '', // 区域代码
+  keyword: '',
-  gridId: '', // 网格ID
+  regionCode: '',
-  landTypeId: '', // 土地类型ID
+  gridId: '',
+  landTypeId: '',
 });
 
-// 分页数据
+const activeTab = ref('1');
-const pageData = ref({
-  currentPage: 1,
-  pageSize: 10,
-  total: 0,
-});
-
-// ============= 表格配置 =============
-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 handlePageChange = ({ page, pageSize }) => {
+const pagination = ref({
-  pageData.value.currentPage = page;
+  currentPage: 1,
-  pageData.value.pageSize = pageSize;
+  pageSize: 10,
-  getData();
+  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 handleSizeChange = (val) => {
+  pagination.value.pageSize = val;
 };
 
 const getActions = (row) => {
   return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
 };
-
+const formRef = ref();
-const handleView = async (row) => {
+const formData = ref({}); // 初始数据
+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;
-  const searchParms = { ...searchForm.value, ...pageData.value, status: activeTab.value };
+  searchForm.value.status = Number(activeTab.value);
-
+  // 调用接口获取数据
-  try {
+  const response = await fetchRecordList(searchForm.value);
-    const response = await fetchRecordList(searchParms);
+  crudData.value = response.data.records;
-    tableData.value = response.data.records;
+  pagination.value.total = response.data.total;
-    pageData.value.total = response.data.total;
+  loading.value = false;
-  } finally {
+  // setTimeout(() => {
-    loading.value = false;
+  //   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;