6/9提交老板的需求

sub-government-affairs-service/src/layouts/component/Header/index.vue

@@ -61,7 +61,7 @@ const stylePlaceholder = () => {
     width: calc(100% - 60px);
   }
   &.no-collapse {
-    width: calc(100% - 210px);
+    width: calc(100% - 240px);
   }
   &-placeholder {
     height: 50px;

sub-government-affairs-service/src/layouts/component/Sider/index.vue

@@ -56,7 +56,7 @@ const activeMenu = computed(() => {
   left: 0;
   z-index: 98;
   overflow: hidden;
-  width: 210px;
+  width: 240px;
   height: 100%;
   background-color: #ffffff;
   box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

sub-government-affairs-service/src/layouts/index.vue

@@ -37,7 +37,7 @@ const SettingStore = useSettingStore();
   }
   &-container {
     position: relative;
-    margin-left: 210px;
+    margin-left: 240px;
     height: 100%;
     transition: margin-left 0.28s;
     box-sizing: border-box;

sub-government-affairs-service/src/router/modules/annualplan.js

@@ -6,7 +6,7 @@ const annualplanRoutes = [
     name: 'annualPlan',
     component: Views,
     redirect: '/sub-government-affairs-service/annualPlans',
-    meta: { title: '年度种植计划', icon: '' },
+    meta: { title: '种植进度网格化管理', icon: '' },
     children: [
       // {
       //   path: '/sub-government-affairs-service/annualPlans',
@@ -18,7 +18,7 @@ const annualplanRoutes = [
         path: '/sub-government-affairs-service/annualPlans',
         name: 'annualPlans',
         component: () => import('@/views/annualPlan/component/annualPlans/index.vue'),
-        meta: { title: '年度种植计划&实际', icon: 'Memo' },
+        meta: { title: '种植进度网格化管理', icon: 'Memo' },
       },
     ],
   },

sub-government-affairs-service/src/router/modules/dict.js

@@ -15,12 +15,12 @@ const dictRoutes = [
         component: () => import('@/views/dict/component/region/index.vue'),
         meta: { title: '行政信息', icon: '' },
       },
-      {
+      // {
-        path: '/sub-government-affairs-service/landCassification',
+      //   path: '/sub-government-affairs-service/landCassification',
-        name: 'landCassification',
+      //   name: 'landCassification',
-        component: () => import('@/views/dict/component/landCassification/index.vue'),
+      //   component: () => import('@/views/dict/component/landCassification/index.vue'),
-        meta: { title: '土地分类', icon: '' },
+      //   meta: { title: '土地分类', icon: '' },
-      },
+      // },
       // {
       //   path: '/sub-government-affairs-service/dictCrop',
       //   name: 'dictCrop',

sub-government-affairs-service/src/router/modules/inputSupplies/index.js

@@ -25,7 +25,7 @@ const inputSuppliesRoutes = [
         path: '/sub-government-affairs-service/material/seed',
         name: 'input-supplies-seed',
         component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
-        meta: { title: '种子管理', icon: '' },
+        meta: { title: '种子使用监督管理', icon: '' },
       },
       {
         path: '/sub-government-affairs-service/material/others',
@@ -33,6 +33,12 @@ const inputSuppliesRoutes = [
         component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
         meta: { title: '其他投入品', icon: '' },
       },
+      {
+        path: '/sub-government-affairs-service/material/annualPlans',
+        name: 'annualPlans',
+        component: () => import('@/views/inputSuppliesManage/material/annualPlan/index.vue'),
+        meta: { title: '种植进度网格化管理', icon: '' },
+      },
       // {
       //   path: '/sub-government-affairs-service/materialManage',
       //   name: 'materialManage',

sub-government-affairs-service/src/router/modules/productOperateMain.js

@@ -6,7 +6,7 @@ export default [
     name: 'productOperateMain',
     component: Layout,
     redirect: '/sub-government-affairs-service/mainHome',
-    meta: { title: '生产经营主体', icon: 'icon-shop' },
+    meta: { title: '农业生产经营主体管理', icon: 'icon-shop' },
     children: [
       // {
       //   path: '/sub-government-affairs-service/mainHome',
@@ -30,7 +30,7 @@ export default [
         path: '/sub-government-affairs-service/coop',
         component: () => import('@/views/productOperateMain/coOp/index.vue'),
         name: 'coop',
-        meta: { title: '农企合作社管理', icon: '' },
+        meta: { title: '企业管理', icon: '' },
       },
       // {
       //   path: '/sub-government-affairs-service/enterprise',

sub-government-affairs-service/src/router/modules/resource.js

@@ -9,15 +9,21 @@ export default [
     path: '/sub-government-affairs-service/resource',
     name: 'resourceManagement',
     component: Layout,
-    redirect: '/sub-government-affairs-service/grid',
+    redirect: '/sub-government-affairs-service/landCassification',
     meta: { title: '土地资源管理', icon: 'icon-test' },
     children: [
+      {
+        path: '/sub-government-affairs-service/landCassification',
+        name: 'landCassification',
+        component: () => import('@/views/dict/component/landCassification/index.vue'),
+        meta: { title: '土地分类', icon: '' },
+      },
       {
         redirect: '/sub-government-affairs-service/add-grid',
         path: '/sub-government-affairs-service/grid',
         // component: () => import('@/views/resource/grid/index.vue'),
         name: 'grid',
-        meta: { title: '网格化管理', icon: 'Memo' },
+        meta: { title: '土地资源网格化管理', icon: 'Memo' },
         children: [
           {
             path: '/sub-government-affairs-service/add-grid',
@@ -39,7 +45,7 @@ export default [
           // },
         ],
       },
-      ...annualplanRouters,
+      // ...annualplanRouters,
       ...landsRoutes,
       // ...statisticsRoutes,
       ...dictRoutes,

sub-government-affairs-service/src/router/modules/trace.js

@@ -7,7 +7,7 @@ export default [
     name: 'trace',
     component: Layout,
     redirect: '/sub-government-affairs-service/trace-home',
-    meta: { title: '溯源管理', icon: 'Connection' },
+    meta: { title: '农产品流通溯源管理', icon: 'Connection' },
     children: [
       {
         path: '/sub-government-affairs-service/record',

sub-government-affairs-service/src/views/inputSuppliesManage/material/annualPlan/index.vue

@@ -0,0 +1,659 @@
+<template>
+  <div class="custom-page">
+    <avue-crud
+      ref="crudRef"
+      v-model="state.form"
+      v-model:page="state.pageData"
+      :table-loading="state.loading"
+      :data="state.data"
+      :option="state.options"
+      @refresh-change="refreshChange"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+    >
+      <template #menu-left>
+        <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
+        <el-button type="success" icon="download" @click="onExport">导出</el-button>
+      </template>
+      <template #menu="{ row }">
+        <custom-table-operate :actions="state.options.actions" :data="{ row }" />
+      </template>
+
+      <template #search>
+        <div class="custom-search">
+          <div class="search-fields">
+            <div class="search-item">
+              <AreaCascader
+                v-model:region-code="areaQuery.regionCode"
+                v-model:grid-id="areaQuery.gridId"
+                placeholder="选择行政区域与网格"
+                :show-separator="true"
+                :width="500"
+              />
+            </div>
+            <div class="search-item">
+              <span>种植作物：</span>
+              <el-select v-model="state.query.cropsId" placeholder="种植作物" :clearable="true">
+                <el-option v-for="item in cropsOptions" :key="item.id" :label="item.cropsName" :value="item.id" />
+              </el-select>
+            </div>
+            <div class="search-item">
+              <span>计划编号：</span>
+              <el-input v-model="state.query.id" placeholder="计划编号" :clearable="true" />
+            </div>
+            <div class="search-item">
+              <span>计划名称：</span>
+              <el-input v-model="state.query.planName" placeholder="计划名称" :clearable="true" />
+            </div>
+          </div>
+          <div class="search-buttons">
+            <el-button type="primary" @click="searchChange"> 查询 </el-button>
+            <el-button @click="resetSearch"> 重置 </el-button>
+          </div>
+        </div>
+      </template>
+    </avue-crud>
+
+    <el-dialog v-model="detailDialogVisible" title="年度种植计划详情页" width="800" class="detail-dialog">
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="年度种植计划" name="basic">
+          <h3>{{ currentDetailRow.planName }}</h3>
+          <div>所属行政区域：{{ currentDetailRow.regionName }}</div>
+          <div>所属网格：{{ currentDetailRow.gridName }}</div>
+          <div>计划编号：{{ currentDetailRow.id }}</div>
+          <div>计划名称：{{ currentDetailRow.planName }}</div>
+          <div>种植作物：{{ currentDetailRow.cropsName }}</div>
+          <div>种植面积：{{ currentDetailRow.planParameters?.plantingArea }}</div>
+          <div>种植月份：{{ currentDetailRow.planParameters?.plantingMonths }}</div>
+          <div>
+            生长周期：{{ currentDetailRow.planParameters?.growthCycle }}
+            {{ getGrowthCycleUnitName(currentDetailRow.planParameters?.growthCycleUnit) }}
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="实际种植情况" name="planting">
+          <h3>{{ currentDetailRow.planName }}</h3>
+          <div>所属行政区域：{{ currentDetailRow.regionName }}</div>
+          <div>所属网格：{{ currentDetailRow.gridName }}</div>
+          <div>计划编号：{{ currentDetailRow.id }}</div>
+          <div>计划名称：{{ currentDetailRow.planName }}</div>
+          <div>种植作物：{{ currentDetailRow.cropsName }}</div>
+          <div>种植面积：{{ currentDetailRow.actualParameters?.plantingArea }}</div>
+          <div>种植月份：{{ currentDetailRow.actualParameters?.plantingMonths }}</div>
+          <div>
+            生长周期：{{ currentDetailRow.actualParameters?.growthCycle }}
+            {{ getGrowthCycleUnitName(currentDetailRow.actualParameters?.growthCycleUnit) }}
+          </div>
+          <div>当前进度：{{ currentDetailRow.currentProgress }}%</div>
+        </el-tab-pane>
+      </el-tabs>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 新增、重新制定计划和填写实际种植信息操作的共用弹窗 -->
+    <el-dialog v-model="commonDialogVisible" :title="dialogTitle">
+      <template #default>
+        <el-form ref="planForm" :model="formData" :rules="formRules" label-width="120px" class="common-dialog">
+          <el-form-item label="" label-width="0px">
+            <AreaCascader v-model:value="areaFormData" split-rows label="所属行政区域-网格" :width="500" />
+          </el-form-item>
+          <!-- <AreaCascader v-model:value="areaFormData" split-rows label="所属行政区域-网格" :width="500" /> -->
+          <el-form-item label="计划名称">
+            <el-input v-model="formData.planName" style="width: 380px" />
+          </el-form-item>
+          <el-form-item label="种植作物" prop="cropsName">
+            <el-select v-model="formData.cropsId" placeholder="种植作物" style="width: 380px" :clearable="true">
+              <el-option v-for="item in cropsOptions" :key="item.id" :label="item.cropsName" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="种植面积" prop="plantingArea">
+            <el-input v-model="formData.plantingArea" style="width: 380px" />
+          </el-form-item>
+          <el-form-item label="种植月份" prop="plantingMonths">
+            <el-select v-model="formData.plantingMonths" placeholder="请选择月份" style="width: 380px" :clearable="true">
+              <el-option v-for="item in monthsOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="生长周期" prop="growthCycle">
+            <el-input-number v-model="formData.growthCycle" :min="1" style="width: 300px" />
+            <el-select v-model="formData.growthCycleUnit" disabled style="width: 68px; margin: 0; padding: 0">
+              <el-option label="天" value="1" />
+              <el-option label="周" value="2" />
+              <el-option label="月" value="3" />
+              <el-option label="年" value="4" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="commonDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { reactive, ref, computed, onMounted, watch } from 'vue';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { isEmpty, downloadFile } from '@/utils';
+import { useUserStore } from '@/store/modules/user';
+import { getAnnualList, examineAnnual, delAnnual, exportAnnua } from '@/apis/land.js';
+import { pageCropsList } from '@/apis/landResourceManagement/cropsManagement/index.js';
+import { saveAnnual, editAnnual, saveActualProgress, getAnnualDetail } from '@/apis/landResourceManagement/plantingPlan/index.js';
+
+const app = useApp();
+const crudRef = ref(null);
+const userStore = useUserStore();
+// 用于 AreaCascader 绑定的对象
+const areaFormData = ref({
+  regionCode: '',
+  gridName: '',
+  gridId: '',
+});
+watch(
+  areaFormData,
+  (newVal) => {
+    formData.value.regionCode = newVal.regionCode;
+    formData.value.gridName = newVal.gridName;
+    formData.value.gridId = newVal.gridId;
+  },
+  { deep: true }
+);
+const formRules = reactive({
+  // planName: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
+  // cropsId: [{ required: true, message: '请选择种植作物', trigger: 'change' }],
+  // plantingArea: [
+  //   { required: true, message: '请输入种植面积', trigger: 'blur' },
+  //   { type: 'number', message: '种植面积必须为数字', trigger: 'blur' },
+  // ],
+  // plantingMonths: [{ required: true, message: '请选择种植月份', trigger: 'change' }],
+  // growthCycle: [
+  //   { required: true, message: '请输入生长周期', trigger: 'blur' },
+  //   { type: 'number', message: '生长周期必须为数字', trigger: 'blur' },
+  // ],
+});
+// 存储种植作物列表
+const cropsOptions = ref([]);
+// 初始化种植作物列表
+const fetchCropsList = async () => {
+  try {
+    // 调用 pageCropsList 获取种植作物分页列表
+    const res = await pageCropsList({ status: '0' });
+    if (res.code === 200) {
+      console.log('res :>> ', res.data.records);
+      cropsOptions.value = res.data.records;
+      console.log('object :>> ', cropsOptions.value);
+    }
+  } catch (error) {
+    app.$message.error('获取种植作物列表失败');
+  }
+};
+onMounted(() => {
+  fetchCropsList();
+});
+
+// 根据单位值获取单位名称
+const getGrowthCycleUnitName = (unit) => {
+  const unitMap = {
+    1: '天',
+    2: '周',
+    3: '月',
+    4: '年',
+  };
+  return unitMap[unit] || '';
+};
+// 获取详情数据
+const fetchDetailData = async (id) => {
+  try {
+    const res = await getAnnualDetail(id);
+    if (res.code === 200) {
+      currentDetailRow.value = res.data;
+    } else {
+      app.$message.error(res.msg || '获取详情数据失败');
+    }
+  } catch (error) {
+    console.error('获取详情数据出错:', error);
+    app.$message.error('获取详情数据失败，请稍后重试');
+  }
+};
+const openDetailDialog = async (row) => {
+  detailDialogVisible.value = true;
+  await fetchDetailData(row.id);
+};
+// 详情弹窗
+const detailDialogVisible = ref(false);
+// 详情弹窗当前激活的标签页
+const activeTab = ref('basic');
+const currentDetailRow = ref({});
+// 共用弹窗
+const commonDialogVisible = ref(false);
+// 当前操作类型，跟弹窗标题一致
+const currentAction = ref('');
+// 弹窗标题
+const dialogTitle = computed(() => {
+  if (currentAction.value === 'reCreate') {
+    return '重新制定计划';
+  } else if (currentAction.value === 'fillActual') {
+    return '填写实际种植信息';
+  } else if (currentAction.value === 'add') {
+    return '新增年度种植计划';
+  }
+  return '';
+});
+
+const monthsOptions = ref([
+  { value: 1, label: '1月' },
+  { value: 2, label: '2月' },
+  { value: 3, label: '3月' },
+  { value: 4, label: '4月' },
+  { value: 5, label: '5月' },
+  { value: 6, label: '6月' },
+  { value: 7, label: '7月' },
+  { value: 8, label: '8月' },
+  { value: 9, label: '9月' },
+  { value: 10, label: '10月' },
+  { value: 11, label: '11月' },
+  { value: 12, label: '12月' },
+]);
+// 表单引用
+const planForm = ref(null);
+// 判断当前用户是否是网格员
+const isGridMember = computed(() => {
+  const userRoles = userStore.getUserInfo().roles;
+  console.log('当前用户角色:', userRoles);
+  return userRoles.some((role) => role.roleKey === 'gridMember');
+  // return true;
+});
+
+// 级联选择器查询参数，必须使用 ref ，否则无法使用 v-model:value 更新
+const areaQuery = ref({
+  regionCode: '',
+  gridName: '',
+  gridId: '',
+});
+
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+    id: '',
+    planName: '',
+    cropsName: '',
+    cropsId: '',
+  },
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    addBtnText: '',
+    addBtn: false,
+    searchBtn: false,
+    emptyBtn: false,
+    fit: true,
+    column: [
+      { label: '计划编号', prop: 'id', minWidth: 100 },
+      { label: '计划名称', prop: 'planName' },
+      { label: '种植作物', prop: 'cropsName' },
+      { label: '种植面积', prop: 'plantingArea', formatter: (row, column, cellValue) => `${cellValue} 亩` },
+      { label: '种植月份', prop: 'plantingMonths', formatter: (row, column, cellValue) => `${cellValue} 月` },
+      {
+        label: '生长周期',
+        prop: 'growthCycle',
+        formatter: (row, column, cellValue) => {
+          const unitMap = { 1: '天', 2: '周', 3: '月', 4: '年' };
+          const unit = unitMap[row.growthCycleUnit] || '';
+          return `${cellValue} ${unit}`;
+        },
+      },
+      { label: '所属行政区域', prop: 'regionName' },
+      { label: '所属网格', prop: 'gridName' },
+      { label: '当前进度', prop: 'currentProgress' },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => {
+          openDetailDialog(row);
+        },
+      },
+      {
+        name: '重新制定计划',
+        icon: 'edit',
+        event: ({ row }) => {
+          currentAction.value = 'reCreate';
+          formData.value = { ...row };
+          if (isGridMember.value) {
+            formData.value.regionName = row.regionName;
+            formData.value.gridName = row.gridName;
+          }
+          formData.value.growthCycleUnit = row.growthCycleUnit || '1';
+          commonDialogVisible.value = true;
+        },
+      },
+      {
+        name: '填写实际种植信息',
+        icon: 'edit',
+        event: ({ row }) => {
+          currentAction.value = 'fillActual';
+          formData.value = { ...row };
+          if (isGridMember.value) {
+            formData.value.regionName = row.regionName;
+            formData.value.gridName = row.gridName;
+          }
+          formData.value.growthCycleUnit = row.growthCycleUnit || '1';
+          commonDialogVisible.value = true;
+        },
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  currentRow: {},
+});
+
+const formData = ref({
+  year: '',
+  regionCode: '',
+  gridId: '',
+  regionName: '',
+  gridName: '',
+  planName: '', // 必填
+  cropsId: null,
+  cropsName: '',
+  plantingArea: null,
+  plantingMonths: '',
+  growthCycle: '',
+  growthCycleUnit: '1', // 默认单位为周
+  note: '',
+});
+// 提交计划表单
+const submitForm = async () => {
+  try {
+    // 表单验证
+    await planForm.value.validate();
+    // 验证通过，提交表单
+    console.log('表单数据:', formData.value);
+
+    if (currentAction.value === 'reCreate') {
+      // 重新制定计划的提交逻辑
+      await editAnnual(formData.value);
+      app.$message.success('重新制定计划成功');
+    } else if (currentAction.value === 'fillActual') {
+      // 填写实际种植信息的提交逻辑
+      await saveActualProgress(formData.value);
+      app.$message.success('填写实际种植信息成功');
+    } else if (currentAction.value === 'add') {
+      // 新增计划的提交逻辑
+      await saveAnnual(formData.value);
+      app.$message.success('新增年度种植计划成功');
+    }
+
+    commonDialogVisible.value = false;
+    loadData();
+  } catch (error) {
+    console.error('表单提交失败:', error);
+    if (error.errors) {
+      // 表单验证失败
+      app.$message.error('请填写完整且正确的表单信息');
+    } else {
+      // API 调用失败
+      app.$message.error('操作失败，请稍后重试');
+    }
+  }
+};
+
+const onAdd = () => {
+  currentAction.value = 'add';
+  formData.value = {
+    regionName: '',
+    gridName: '',
+    planName: '',
+    cropsName: '',
+    plantingArea: '',
+    plantingMonths: '',
+    growthCycle: '',
+    growthCycleUnit: '1',
+  };
+  commonDialogVisible.value = true;
+};
+
+// 加载
+const loadData = () => {
+  state.loading = true;
+  getAnnualList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        const { current, size, total, records } = res.data;
+        state.data = records;
+        state.pageData = {
+          currentPage: current || 1,
+          pageSize: size || 10,
+          total: total,
+        };
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      state.data = [];
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+loadData();
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = () => {
+  state.query = {
+    ...state.query,
+    ...areaQuery.value,
+    current: 1,
+  };
+  console.log('搜索参数', state.query);
+  loadData();
+};
+
+// 重置搜索
+const resetSearch = () => {
+  state.query = {
+    current: 1,
+    size: 10,
+    id: '',
+    planName: '',
+    cropsName: '',
+    cropsId: '',
+  };
+  areaQuery.value.regionCode = '';
+  areaQuery.value.gridName = '';
+  areaQuery.value.gridId = '';
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  if (isEmpty(row)) return;
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      console.info('删除');
+      delAnnual({ id: row.id })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            // done();
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
+    })
+    .catch(() => {});
+};
+// 导出
+const onExport = () => {
+  if (isEmpty(state.data)) {
+    app.$message.error('当前暂时没有可供导出的数据！');
+    return;
+  }
+  state.loading = true;
+  const fileName = '年度计划明细表';
+  exportAnnua(state.query)
+    .then((res) => {
+      if (res.status === 200) {
+        downloadFile(res.data, `${fileName}.xlsx`, 'blob');
+        app.$message.success('导出成功！');
+      }
+    })
+    .catch((err) => {
+      app.$message.error('导出失败！');
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+</script>
+<style scoped lang="scss">
+.custom-page {
+  /* 详情弹窗样式 */
+
+  /* 表单弹窗样式 */
+  .el-dialog {
+    .el-form {
+      padding: 0 20px;
+      width: 100%;
+      // background-color: aqua;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+
+      &-item {
+        margin-bottom: 18px;
+        width: 60%;
+        // background-color: #606266;
+
+        &__label {
+          font-weight: 500;
+          color: #606266;
+        }
+
+        /* 输入框和选择器统一宽度 */
+        .el-input,
+        .el-select,
+        .el-cascader {
+          width: 100%;
+          max-width: 400px;
+        }
+
+        /* 数字输入框和单位选择器组合 */
+        .el-input-number {
+          margin-right: 10px;
+
+          & + .el-select {
+            width: 100px;
+          }
+        }
+      }
+    }
+  }
+
+  /* 按钮样式微调 */
+  .el-button {
+    padding: 8px 16px;
+    border-radius: 4px;
+
+    & + .el-button {
+      margin-left: 12px;
+    }
+  }
+
+  /* 搜索区域样式 */
+  .custom-search {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 16px;
+    border-radius: 8px;
+    // background-color: #f5f7fa;
+
+    .search-fields {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      width: 100%;
+      margin-bottom: 16px;
+    }
+
+    .search-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .el-input,
+      .el-select,
+      .el-cascader {
+        width: 200px;
+      }
+      span {
+        font-size: 14px;
+        color: #606266;
+        align-self: center;
+      }
+    }
+
+    .search-buttons {
+      display: flex;
+      align-self: center;
+      gap: 12px;
+      margin-left: 8px;
+    }
+  }
+}
+</style>

sub-government-affairs-service/src/views/trace/record/seed/index.vue

@@ -51,7 +51,7 @@ const res = [
   },
   {
     id: '100003',
-    name: '滇辣',
+    name: '小米辣',
     shop: '云南宏斌绿色食品集团',
     buyTime: '2025-01-12 17:25:32',
     avalibleTime: '2026-01-12 17:25:32',