From 488748c992dde48fb3443839aff480ca6570439c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B2=88=E9=B8=BF?= <shenhongkm@163.com>
Date: Tue, 1 Jul 2025 10:57:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../production-subjects/farmer/index.vue      | 621 ++++++++++++++++++
 1 file changed, 621 insertions(+)
 create mode 100644 sub-government-affairs-service/src/views/trace/production-subjects/farmer/index.vue

diff --git a/sub-government-affairs-service/src/views/trace/production-subjects/farmer/index.vue b/sub-government-affairs-service/src/views/trace/production-subjects/farmer/index.vue
new file mode 100644
index 0000000..b57d765
--- /dev/null
+++ b/sub-government-affairs-service/src/views/trace/production-subjects/farmer/index.vue
@@ -0,0 +1,621 @@
+<template>
+  <div class="custom-page">
+    <!-- 关键词搜索 -->
+    <el-form :inline="true" :model="searchForm" class="search-bar">
+      <el-form-item label="关键词">
+        <el-input v-model="searchForm.name" placeholder="请输入关键词" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <avue-crud ref="crudRef" v-model:page="pageData" :data="crudData" :option="crudOptions" :table-loading="loading">
+      <template v-if="activeTab === '0'" #menu-left>
+        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
+      </template>
+      <template #menu="scope">
+        <custom-table-operate :actions="getActions(scope.row)" :data="scope" />
+      </template>
+    </avue-crud>
+
+    <!-- 新增弹窗 -->
+    <el-dialog :key="dialogTitle" v-model="dialogVisible" :title="dialogTitle" width="60%" align-center :draggable="true">
+      <el-form :model="formData" label-width="120px" class="custom-form" :disabled="isReadonly">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model="formData.name" placeholder="请输入姓名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" prop="idType">
+              <el-select v-model="formData.idType" placeholder="请选择证件类型" disabled>
+                <el-option label="身份证" value="101" />
+                <el-option label="护照" value="2" />
+                <el-option label="港澳身份证" value="3" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="证件号码" prop="idCard">
+              <el-input v-model="formData.idCard" placeholder="请输入证件号码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" prop="sex">
+              <el-radio-group v-model="formData.sex">
+                <el-radio value="1">男</el-radio>
+                <el-radio value="0">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="年龄" prop="age">
+              <el-input v-model="formData.age" placeholder="请输入年龄" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系方式" prop="phone">
+              <el-input v-model="formData.phone" placeholder="请输入联系方式" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="居住地行政区划" prop="addressArr">
+              <area-select v-model="formData.addressArr" :label="null" />
+              <!-- <el-input v-model="formData.detailAddress" placeholder="请选择居住地行政区划" /> -->
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="具体地址" prop="detailAddress">
+              <el-input v-model="formData.detailAddress" placeholder="请输入具体地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="种植面积" prop="area">
+              <el-input v-model="formData.area" placeholder="请输入种植面积" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="种植作物" prop="planCrop">
+              <!-- <el-select v-model="formData.planCrop" placeholder="种植作物" style="width: 380px" :clearable="true">
+                <el-option v-for="item in cropsOptions" :key="item.id" :label="item.cropsName" :value="item.id" />
+              </el-select> -->
+              <url-select
+                v-model="formData.planCrop"
+                url="/land-resource/crops/page"
+                :params="{ status: '0' }"
+                label-key="cropsName"
+                value-key="id"
+                placeholder="请选择种植作物"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button v-if="!isReadonly" type="primary" @click="handleSave">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted, watch, nextTick } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { CRUD_OPTIONS } from '@/config';
+import { fetchFarmerList, fetchFarmerById, saveFarmerList, editFarmer, approveFarmer, deleteFarmers } from '@/apis/businessEntity';
+import { pageCropsList } from '@/apis/landResourceManagement/cropsManagement/index.js';
+
+// ---------------------------------------------------------------------
+// 1. 模拟“当前用户角色”
+//    可选值：'superadmin'（超级管理员）、'auditor'（审核员）、'submitter'（提交人）
+// ---------------------------------------------------------------------
+const role = ref('superadmin'); // 开发时可手动切换为 'superadmin' / 'auditor' / 'submitter'
+
+// 角色判断的计算属性
+const isSuperAdmin = computed(() => role.value === 'superadmin');
+const isAuditor = computed(() => role.value === 'auditor');
+
+// ---------------------------------------------------------------------
+// 2. Tab 与数据的状态控制
+// ---------------------------------------------------------------------
+const activeTab = ref('2');
+const dialogTitle = ref('新增');
+const isReadonly = ref(false);
+// 搜索表单模型
+const searchForm = ref({
+  name: '',
+  idCard: '',
+  phone: '',
+  status: '',
+  userId: '',
+});
+const loading = ref(false);
+const crudRef = ref();
+// 分页数据
+const pageData = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+});
+// 模拟的原始数据列表（通常从后端接口拿到）
+const crudData = ref([]);
+
+// 新增弹窗显示状态
+const dialogVisible = ref(false);
+// 定义默认表单数据
+const defaultFormData = {
+  name: '',
+  idType: '101',
+  idCard: '',
+  sex: '1',
+  age: '',
+  phone: '',
+  provinceCode: '', // 省
+  cityCode: '', // 市
+  countyCode: '', // 区县
+  townCode: '', // 镇
+  villageCode: '', // 村
+  address: '',
+  addressArr: [],
+  detailAddress: '',
+  area: '',
+  planCrop: '',
+  reason: '',
+};
+// 新增表单数据，使用默认数据初始化
+const formData = ref({ ...defaultFormData });
+
+// 重置表单数据的方法
+const resetForm = () => {
+  formData.value = { ...defaultFormData };
+};
+
+// ==============================
+// CRUD 配置
+// ==============================
+const crudOptions = reactive({
+  ...CRUD_OPTIONS,
+  header: false,
+  column: [
+    { label: '主体编码', prop: 'id' },
+    { label: '姓名', prop: 'name' },
+    {
+      label: '证件类型',
+      prop: 'idType',
+      formatter: (row, column, cellValue) => {
+        return cellValue === '101' ? '身份证' : '其它';
+      },
+    },
+    { label: '证件号码', prop: 'idCard' },
+    {
+      label: '性别',
+      prop: 'sex',
+      formatter: (row, column, cellValue) => {
+        return cellValue === '1' ? '男' : '女';
+      },
+    },
+    { label: '年龄', prop: 'age' },
+    { label: '联系方式', prop: 'phone' },
+    { label: '所属行政区划', prop: 'address' },
+    { label: '种植作物', prop: 'planCropName' },
+    { label: '数据来源', prop: 'dataSource' },
+    { label: '创建时间', prop: 'createTime' },
+  ],
+});
+
+// ---------------------------------------------------------------------
+// 3. 各种操作方法占位（请根据实际 API/逻辑改写）
+// ---------------------------------------------------------------------
+async function getData() {
+  loading.value = true;
+  try {
+    const params = {
+      ...searchForm.value,
+      status: activeTab.value,
+      current: pageData.value.currentPage,
+      size: pageData.value.pageSize,
+    };
+    const response = await fetchFarmerList(params);
+    if (response.code === 200 && response.data) {
+      crudData.value = response.data.records;
+      console.log('获取数据成功:', crudData.value);
+      pageData.value = {
+        currentPage: response.data.current,
+        pageSize: response.data.size,
+        total: response.data.total,
+      };
+    } else {
+      ElMessage.error(response.msg || '获取数据失败');
+    }
+  } catch (error) {
+    ElMessage.error('获取数据失败，请稍后重试');
+  } finally {
+    loading.value = false;
+  }
+}
+// 存储种植作物列表
+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) {
+    console.error('获取种植作物列表失败:', error);
+  }
+};
+function handleSearch() {
+  getData();
+}
+function handleReset() {
+  searchForm.value.keyword = '';
+  handleSearch();
+}
+function handleTabChange(tab) {
+  handleSearch();
+}
+// 新增
+const handleAdd = () => {
+  isReadonly.value = false; // 设置为可编辑模式
+  resetForm();
+  dialogTitle.value = '新增';
+  dialogVisible.value = true;
+};
+// 根据address解构行政区划数据
+watch(
+  () => formData.value.addressArr,
+  (newValue) => {
+    if (newValue.length === 5) {
+      formData.value.provinceCode = newValue[0] || '';
+      formData.value.cityCode = newValue[1] || '';
+      formData.value.countyCode = newValue[2] || '';
+      formData.value.townCode = newValue[3] || '';
+      formData.value.villageCode = newValue[4] || '';
+    } else {
+      ElMessageBox.alert('行政区划数据错误');
+    }
+  }
+);
+
+// 保存新增数据saveFarmerList
+const handleSave = async () => {
+  try {
+    let response;
+    if (dialogTitle.value === '新增') {
+      console.log('新增formData.value.arr :>> ', formData.value.addressArr);
+      // 新增操作调用 saveFarmerList 接口
+      response = await saveFarmerList(formData.value);
+      if (response.code === 200) {
+        ElMessage.success('新增成功');
+      }
+    } else if (dialogTitle.value === '编辑') {
+      // 编辑操作调用 editFarmer 接口
+      response = await editFarmer(formData.value);
+      if (response.code === 200) {
+        ElMessage.success('编辑成功');
+      }
+    }
+
+    if (response && response.code === 200) {
+      dialogVisible.value = false;
+      getData(); // 重新获取数据
+    }
+  } catch (error) {
+    if (dialogTitle.value === '新增') {
+      ElMessage.error('新增失败，请稍后重试');
+    } else {
+      ElMessage.error('编辑失败，请稍后重试');
+    }
+  }
+};
+const getFarmerById = async (id) => {
+  try {
+    const response = await fetchFarmerById(id);
+    if (response.code === 200 && response.data) {
+      return response.data;
+    } else {
+      ElMessage.error(response.msg || '获取数据失败');
+      return null;
+    }
+  } catch (error) {
+    ElMessage.error('获取数据失败，请稍后重试');
+    return null;
+  }
+};
+// 查看
+async function handleView(row) {
+  dialogTitle.value = '查看';
+  isReadonly.value = true; // 设置为只读模式
+
+  const data = await getFarmerById(row.id);
+  if (data) {
+    const addressArr = [data.provinceCode, data.cityCode, data.countyCode, data.townCode, data.villageCode].filter(Boolean);
+    formData.value = {
+      ...data,
+      addressArr: addressArr,
+    };
+  }
+  nextTick(() => {
+    dialogVisible.value = true;
+  });
+}
+
+// 编辑（修改/填写）
+async function handleEdit(row) {
+  if (row.status === '2') {
+    try {
+      await ElMessageBox.confirm('编辑后数据将需要重新审核，是否继续？', '确认编辑', {
+        confirmButtonText: '继续编辑',
+        cancelButtonText: '取消',
+        type: 'warning',
+      });
+    } catch {
+      return;
+    }
+  }
+  const data = await getFarmerById(row.id);
+  if (data) {
+    const addressArr = [data.provinceCode, data.cityCode, data.countyCode, data.townCode, data.villageCode].filter(Boolean);
+    formData.value = {
+      ...data,
+      addressArr: addressArr,
+    };
+  }
+  dialogTitle.value = '编辑';
+  isReadonly.value = false;
+  nextTick(() => {
+    dialogVisible.value = true;
+  });
+}
+
+// 提交审核（待提交 → 待审核）
+function handleSubmit(row) {
+  ElMessageBox.confirm('确定提交审核吗？', '提交审核').then(() => {
+    const params = {
+      id: row.id,
+      status: '1',
+      reason: row.reason || '',
+    };
+    approveFarmer(params)
+      .then(() => {
+        row.rejectReason = ''; // 清空驳回原因
+        getData(); // 重新获取数据
+      })
+      .catch(() => {
+        ElMessage.error('提交审核失败，请稍后重试');
+      });
+  });
+}
+
+// 重新提交（被驳回 → 待审核）
+function handleResubmit(row) {
+  ElMessageBox.confirm('确认重新提交吗？', '重新提交').then(() => {
+    const params = {
+      id: row.id,
+      status: '1', // 待审核
+      reason: '重新提交审核',
+    };
+    approveFarmer(params)
+      .then(() => {
+        console.log(`ID=${row.id} 重新提交审核`);
+        row.status = '1';
+        row.rejectReason = '';
+        getData();
+        ElMessage.success('已重新提交，状态已变为"待审核"');
+      })
+      .catch((error) => {
+        console.error('重新提交失败:', error);
+        ElMessage.error(error.response?.data?.msg || '重新提交失败');
+      });
+  });
+}
+
+// 撤销（待审核 → 待提交），超级管理员和提交人拥有撤销
+function handleWithdraw(row) {
+  ElMessageBox.confirm('确认撤销本次审核吗？', '撤销').then(() => {
+    const params = {
+      id: row.id,
+      status: '0', // 待提交
+      reason: '用户主动撤销',
+    };
+    approveFarmer(params)
+      .then(() => {
+        console.log(`ID=${row.id} 撤销审核`);
+        row.status = '0';
+        getData();
+        ElMessage.success('已撤销，状态已变为"待提交"');
+      })
+      .catch((error) => {
+        console.error('撤销失败:', error);
+        ElMessage.error(error.response?.data?.msg || '撤销失败');
+      });
+  });
+}
+
+// 审核通过（待审核 → 已通过）
+function handleApprove(row) {
+  ElMessageBox.confirm('确认通过审核？', '审核通过').then(() => {
+    const params = {
+      id: row.id,
+      status: '2', // 已通过
+      reason: '审核通过',
+    };
+    approveFarmer(params)
+      .then(() => {
+        console.log(`ID=${row.id} 审核通过`);
+        row.status = '2';
+        getData();
+        ElMessage.success('审核已通过');
+      })
+      .catch((error) => {
+        console.error('审核通过操作失败:', error);
+        ElMessage.error(error.response?.data?.msg || '审核操作失败');
+      });
+  });
+}
+
+// 审核驳回（待审核 → 已驳回），需要填写驳回原因
+function handleReject(row) {
+  ElMessageBox.prompt('请输入驳回原因', '审核驳回', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    inputPattern: /.+/, // 必须输入内容
+    inputErrorMessage: '驳回原因不能为空',
+  })
+    .then(({ value }) => {
+      const params = {
+        id: row.id,
+        status: '3', // 已驳回
+        reason: value.trim(),
+      };
+      return approveFarmer(params).then(() => {
+        console.log(`ID=${row.id} 驳回，原因：${value.trim()}`);
+        row.status = '3';
+        row.rejectReason = value.trim();
+        getData();
+        ElMessage.success('已驳回');
+      });
+    })
+    .catch((error) => {
+      if (error !== 'cancel') {
+        console.error('驳回操作失败:', error);
+        ElMessage.error(error.response?.data?.msg || '驳回操作失败');
+      }
+    });
+}
+
+// 查看/弹窗 驳回原因
+function showRejectReason(row) {
+  ElMessageBox.alert(row.reason || '无驳回原因', '驳回原因');
+}
+
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm('确定删除该条记录？', '删除提示');
+
+    console.log(`删除 ID=${row.id}`);
+    await deleteFarmers(row.id); // 直接传递单ID
+    await getData();
+    ElMessage.success('已删除');
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error(`删除失败: ${error.message || '请稍后重试'}`);
+    }
+  }
+}
+
+// 定义操作映射
+const ACTION_MAP = {
+  view: { name: '查看', icon: 'view', handler: handleView },
+  edit: { name: '编辑', icon: 'edit', handler: handleEdit },
+  submit: { name: '提交审核', icon: 'submit', handler: handleSubmit },
+  delete: { type: 'danger', name: '删除', icon: 'delete', handler: handleDelete },
+  approve: { name: '通过', icon: 'approve', handler: handleApprove },
+  reject: { name: '驳回', icon: 'reject', handler: handleReject },
+  withdraw: { name: '撤销', icon: 'withdraw', handler: handleWithdraw },
+  resubmit: { name: '重新提交', icon: 'resubmit', handler: handleResubmit },
+  reason: { name: '驳回原因', icon: 'reason', handler: showRejectReason },
+  modify: { name: '修改', icon: 'edit', handler: handleEdit },
+};
+
+// 定义角色和状态对应的操作配置
+const ROLE_STATUS_ACTIONS = {
+  superadmin: {
+    0: ['view', 'edit', 'submit', 'delete'],
+    1: ['view', 'approve', 'reject', 'withdraw', 'delete'],
+    2: ['view', 'modify', 'delete'],
+    3: ['view', 'edit', 'reason', 'resubmit', 'delete'],
+  },
+  auditor: {
+    0: [],
+    1: ['view', 'approve', 'reject'],
+    2: ['view', 'delete'],
+    3: ['view', 'reason', 'delete'],
+  },
+  submitter: {
+    0: ['view', 'edit', 'submit', 'delete'],
+    1: ['view', 'withdraw', 'delete'],
+    2: ['view', 'modify', 'delete'],
+    3: ['view', 'edit', 'reason', 'resubmit', 'delete'],
+  },
+};
+
+// 根据角色和状态动态生成操作按钮
+function getActions(row) {
+  const currentRole = role.value;
+  const status = row.status;
+  const actionKeys = ROLE_STATUS_ACTIONS[currentRole]?.[status] || [];
+
+  return actionKeys.map((key) => {
+    const action = ACTION_MAP[key];
+    return {
+      ...action,
+      event: () => action.handler(row),
+    };
+  });
+}
+
+// ---------------------------------------------------------------------
+// 4. 示例：页面加载时可以从后端获取 crudData
+// ---------------------------------------------------------------------
+onMounted(() => {
+  getData();
+  fetchCropsList(); // 初始化种植作物列表
+});
+</script>
+
+<style scoped lang="scss">
+// :deep(.avue-crud__header) {
+//   display: none;
+// }
+.custom-page {
+  padding: 20px;
+  height: calc(100vh - 150px);
+  overflow-y: auto;
+
+  .search-bar {
+    margin-bottom: 20px;
+  }
+}
+:deep(.el-dialog__body) {
+  padding: 20px;
+  height: calc(100vh - 300px);
+  overflow-y: auto;
+}
+
+.custom-form {
+  padding: 20px;
+
+  .el-form-item {
+    margin-bottom: 22px;
+  }
+  .el-input,
+  .el-select,
+  .el-cascader,
+  .el-date-picker {
+    width: 500px;
+    max-width: 100%; // 防止超出父容器
+    box-sizing: border-box; // 让padding/border包含在宽度内
+  }
+}
+</style>