daimp-front/sub-government-affairs-service/src/views/resource/database/Grassland.vue

<template>
  <div class="custom-page">
    <h1>草地</h1>
    <!-- 搜索 -->
    <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 lable="">
        <AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.gridId" :width="600" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
        <el-button @click="resetSearch"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <!-- 四个固定 Tabs -->
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <!-- <el-tab-pane label="待提交" name="-1" /> -->
      <el-tab-pane label="待审核" name="0" />
      <el-tab-pane label="已通过" name="1" />
      <el-tab-pane label="已驳回" name="2" />
    </el-tabs>
    <avue-crud
      ref="crudRef"
      v-model:page="pageData"
      :data="crudData"
      :option="crudOptions"
      :table-loading="loading"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
      <template #menu="scope">
        <custom-table-operate :actions="crudOptions.actions" :show="false" :data="scope" />
      </template>
    </avue-crud>
    <el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
      <el-tabs v-model="activeFormTab" class="tabs-wrapper">
        <el-tab-pane label="土地基本信息" name="basic">
          <p class="form-title">基本信息</p>
          <el-form ref="basicFormRef" :model="formData" :disabled="isReadonly" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="地块名称" prop="landName">
                  <el-input v-model="formData.landName" placeholder="请输入地块名称" />
                </el-form-item>
                <el-form-item label="土地类型" prop="landType">
                  <el-tree-select
                    v-model="formData.landType"
                    :data="landTypeOptions"
                    :props="treeProps"
                    placeholder="选择土地类型"
                    clearable
                    check-strictly
                    :render-after-expand="false"
                    @change="handleLandTypeChange"
                  />
                </el-form-item>
                <el-form-item label="具体位置" prop="address">
                  <el-input v-model="formData.address" placeholder="请输入具体位置" />
                </el-form-item>
                <el-form-item label="土壤类型" prop="soilTypeId">
                  <url-select
                    v-model="formData.soilTypeId"
                    placeholder="选择土壤类型"
                    url="/land-resource/baseInfo/soilTypePage"
                    :params="{ current: 1, size: 100 }"
                    label-key="soilType"
                    value-key="id"
                    :clearable="true"
                  />
                </el-form-item>
                <el-form-item label="土地照片" prop="landUrl">
                  <FileUploader v-model="formData.landUrl" :limit="1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="面积(亩)" prop="area">
                  <el-input-number v-model="formData.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
                </el-form-item>

                <el-form-item label="" label-width="0" prop="gridId">
                  <AreaCascader v-model:region-code="formData.gridAreaCode" v-model:grid-id="formData.gridId" label="" :split-rows="true" />
                </el-form-item>

                <el-form-item label="土地范围" prop="scope">
                  <el-input v-model="formData.scope" placeholder="请输入土地范围" />
                  <!-- <Attrs v-model:attrs="formData.scope" type="add" accept="image/*" /> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="土地承包信息" name="property">
          <p class="form-title">承包信息</p>
          <el-form ref="propertyFormRef" :model="formData" :disabled="isReadonly" label-width="150px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="土地承包经营权人" prop="propertyName">
                  <el-input v-model="formData.propertyName" placeholder="请输入产权人姓名" />
                </el-form-item>
                <el-form-item label="联系方式" prop="propertyPhone">
                  <el-input v-model="formData.propertyPhone" placeholder="请输入产权人联系方式" />
                </el-form-item>
                <el-form-item label="土地经营权证书编号" prop="landCode">
                  <el-input v-model="formData.landCode" placeholder="请输入产权编号" />
                </el-form-item>
                <el-form-item label="土地经营权证书" prop="propertyCertificateUrl">
                  <FileUploader v-model="formData.propertyCertificateUrl" :limit="1" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12"></el-col> -->
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="土地流转信息" name="use">
          <p class="form-title">流转信息</p>
          <el-form ref="useForm" :model="formData" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否土地流转" prop="landTransfer">
                  <el-radio-group v-model="formData.landTransfer" :disabled="isReadonly">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="formData.landTransfer === '1'" label="土地受让方" prop="landUseName">
                  <el-input v-model="formData.landUseName" placeholder="请输入土地受让方" />
                </el-form-item>
                <el-form-item v-if="formData.landTransfer === '1'" label="联系电话" prop="landUsePhone">
                  <el-input v-model="formData.landUsePhone" placeholder="请输入土地受让方联系方式" />
                </el-form-item>
                <el-form-item v-if="formData.landTransfer === '1'" label="流转合同" prop="landCertificateUrl">
                  <FileUploader v-model="formData.landCertificateUrl" :limit="1" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <template v-if="!isReadonly">
            <el-button type="primary" @click="submitAll">修改</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// ---------------------------------------------------------------------
// avue-crud 通用代码
// ---------------------------------------------------------------------
import { ref, reactive, watch, onMounted, computed, nextTick } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore } from '@/store/modules/user';
import { mockData } from './landData';
import request from '@/utils/axios';

const UserStore = useUserStore();
const user = UserStore.getUserInfo();
console.log('admin 属性：', user.admin);

const loading = ref(false);

const visible = ref(false);
const isReadonly = ref(false);
const dialogTitle = ref();
const activeTab = ref('1');
const activeFormTab = ref('basic');
const formData = ref({
  gridName: '',
  gridAreaCode: '',
  scope: '',
  scopeImg: '',
  note: '',
});
const initialFormData = { ...formData.value };
const resetForm = () => {
  formData.value = { ...initialFormData };
};

const pageData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});
const searchForm = ref({
  keyword: '',
  landStatus: 1,
  regionCode: '',
  gridId: '',
  id: '',
  landTypeName: '草地',
});
const initialSearchForm = { ...searchForm.value };
const resetSearch = () => {
  searchForm.value = { ...initialSearchForm };
};
// 过滤对象，只保留有值的属性
const filterObject = (obj) => {
  const newObj = {};
  Object.keys(obj).forEach((key) => {
    const value = obj[key];
    // 检查值是否有效，排除空字符串、null 和 undefined
    if (value !== '' && value !== null && value !== undefined) {
      newObj[key] = value;
    }
  });
  return newObj;
};

const crudData = ref([]);
const crudOptions = reactive({
  ...CRUD_OPTIONS,
  addBtn: false,
  header: false,
  searchBtn: false,
  emptyBtn: false,
  refreshBtn: false,
  height: 'calc(100vh - 360px)',
  column: [
    { label: '地块编号', prop: 'id', width: 160 },
    { label: '地块名称', prop: 'landName', width: 170 },
    { label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
    { label: '土地分类', prop: 'fullLandType' },
    { label: '土壤类型', prop: 'soilTypeName' },
    { label: '所属行政区域', prop: 'fullRegionName', width: 160 },
    { label: '所属网格', prop: 'gridName', width: 90 },
    { label: '具体位置', prop: 'address', width: 160 },
    { label: '土地承包经营人', prop: 'propertyName' },
    { label: '联系电话', prop: 'propertyPhone' },
    { label: '土地经营权证书编号', prop: 'landCode', width: 160 },
    { label: '是否土地流转', prop: 'landTransfer' },
    { label: '土地受让方', prop: 'transferName' },
    { label: '受让方联系电话', prop: 'transferPhone', width: 100 },
    { label: '流转合同', prop: 'transferContract' },
    { label: '信息填报人', prop: 'fillName' },
    { label: '信息填报单位', prop: 'fillGroup' },
    { label: '信息填报时间', prop: 'fillTime' },
    { label: '信息更新时间', prop: 'updateTime' },
  ],
  actions: [
    {
      name: '查看',
      icon: 'view',
      event: ({ row }) => handleView(row),
    },
    {
      name: '编辑',
      icon: 'edit',
      event: ({ row }) => handleEdit(row),
    },
    {
      type: 'danger',
      name: '删除',
      icon: 'delete',
      event: ({ row }) => handleDelete(row),
    },
    {
      name: '审核',
      icon: 'approve',
      event: ({ row }) => onApprove(row),
    },
    // TODO: 驳回应该有填写驳回原因的弹窗
    {
      name: '驳回',
      icon: 'reject',
      event: ({ row }) => onReject(row),
    },
    {
      name: '驳回原因',
      icon: 'reject',
      event: ({ row }) => onRejectReason(row),
    },
  ],
});
const handleTabChange = ({ name }) => {
  searchForm.value.landStatus = Number(activeTab.value);
  getData();
};
const handleRefresh = async () => {
  searchForm.value = { ...initialSearchForm };
  getData();
};
const handleCurrentChange = (val) => {
  pageData.value.currentPage = val;
};
const handleSizeChange = (val) => {
  pageData.value.pageSize = val;
};
const handleView = async (row) => {
  isReadonly.value = true;
  formData.value = await getLandDetail(row.id);
  dialogTitle.value = '查看网格';
  visible.value = true;
};
const handleEdit = (row) => {
  isReadonly.value = false;
  formData.value = { ...row };
  dialogTitle.value = '编辑网格';
  visible.value = true;
};
const handleDelete = async (row) => {
  console.log('删除', row);
  //   try {
  //     await ElMessageBox.confirm('确认删除该网格吗？', '提示', {
  //       confirmButtonText: '确定',
  //       cancelButtonText: '取消',
  //       type: 'warning',
  //     });

  //     const response = await deleteGrid(row.id);

  //     ElMessage.success('删除成功');
  //     getData();
  //   } catch (error) {
  //     if (error === 'cancel') {
  //       ElMessage.info('已取消删除');
  //     } else {
  //       ElMessage.error('删除失败');
  //       console.error('删除异常:', error);
  //     }
  //   }
};

const handleSubmit = async () => {
  console.log('提交表单:', formData.value);
  try {
    if (dialogTitle.value === '新增网格') {
      await createLand(formData.value);
      ElMessage.success('新增成功');
      resetForm();
      visible.value = false;
      getData();
    } else {
      await editLand(formData.value);
      ElMessage.success('更新成功');
      resetForm();
      visible.value = false;
      getData();
    }
  } catch (error) {
    ElMessage.error(error.message || '新增失败，请重试');
  }
};

// ---------------------------------------------------------------------
// 业务代码
// ---------------------------------------------------------------------
import { createLand, deleteLand, editLand, fetchLandList, getLandById, approveLand } from '@/apis/landResourceManagement/landManagement';

onMounted(() => {
  getData();
  fetchLandTypeData();
});
const getData = async () => {
  loading.value = true;
  const filteredParams = filterObject(searchForm.value);
  const response = await fetchLandList(filteredParams);
  crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
  pageData.value.total = crudData.value.length;
  loading.value = false;
};

const getLandDetail = async (id) => {
  const response = await getLandById(id);
  return response.data;
};
const landTypeOptions = ref([]);
const treeProps = ref({
  value: 'id',
  label: 'landType',
  children: 'children',
  // disabled: (data) => {
  //   return data.children && data.children.length > 0;
  // },
});
const fetchLandTypeData = async () => {
  try {
    const response = await request.get('/land-resource/baseInfo/landTree', { params: { status: '1' } });
    if (response.code === 200) {
      landTypeOptions.value = response.data;
    }
  } catch (error) {
    console.error('获取土地类型数据失败', error);
  }
};
const submitAll = async () => {
  console.log('提交表单:', formData.value);
  await editLand(formData.value);
  ElMessage.success('保存成功');
  resetForm();
  visible.value = false;
};

const onApprove = async (row) => {
  // UNSUBMIT(-1,"未提交"),
  // REVIEW(0,"待审核"),
  // PASS(1,"通过"),
  // REFUSE(2,"驳回");
  if (row.landStatus !== 0) {
    ElMessage.error('该地块状态不是待审核状态');
    return;
  }
  const requiredBody = {
    bizType: 'landResInfo',
    bizId: row.id,
    status: 1,
    opinion: '',
  };
  await approveLand(requiredBody);
  ElMessage.success('审核成功');
  getData();
};

const onReject = async (row) => {
  if (row.landStatus !== 0) {
    ElMessage.error('该地块状态不是待审核状态');
    return;
  }
  const requiredBody = {
    bizType: 'landResInfo',
    bizId: row.id,
    status: 2,
    opinion: '',
  };
  await approveLand(requiredBody);
  ElMessage.success('驳回成功');
  getData();
};
// 显示驳回原因
const onRejectReason = async (row) => {
  ElMessageBox.alert(row.rejectReason || '无驳回原因', '驳回原因');
};
const handleAdd = () => {
  console.log('handleAdd');
  resetForm();
  isReadonly.value = false;
  dialogTitle.value = '新增网格';
  visible.value = true;
};

const handleSearch = () => {
  getData();
};
const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped lang="scss">
.custom-page {
  padding-bottom: 0px;
}
h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.search-bar {
  padding-left: 20px;
}
:deep(.el-dialog__body) {
  padding: 20px;
  // height: calc(100vh - 300px);
  overflow-y: auto;
}
.form-title {
  font-size: 16px;
  font-weight: 500;
  margin: 30px 0;
  color: #333333;
}
.form-item {
  width: 500px;
  margin: 0 auto;
}
.dialog-footer {
  text-align: center;
}
.custom-search {
  display: flex;
  align-items: center;
  padding-left: 20px;

  .el-button {
    margin-left: 12px;
  }
}
.tabs-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  // background-color: #7daaaa;

  .el-tabs__header {
    width: 100%;

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }

    .el-tabs__item {
      font-size: 16px;
      color: #555555;
      font-weight: 500;
    }
  }
  :deep(.el-tabs__content) {
    padding: 20px;
    // background-color: #af8686;
    border-radius: 4px;
    width: 80%;
    height: calc(100vh - 400px);
    overflow-y: auto;

    .el-tab-pane {
      margin: 0 auto;
      width: 100%;
      // background-color: #555555;
    }
  }
}
</style>