274 lines
11 KiB
Vue
274 lines
11 KiB
Vue
<template>
|
|
<div class="custom-page">
|
|
<h1>林地</h1>
|
|
<LandSearch :search="searchForm" @on-search="handleSearch" @on-reset="handleReset" />
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
|
<!-- <el-tab-pane label="待提交" name="0" /> -->
|
|
<el-tab-pane label="待审核" name="1" />
|
|
<el-tab-pane label="已通过" name="2" />
|
|
<el-tab-pane label="已驳回" name="0" />
|
|
</el-tabs>
|
|
<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="height: calc(100vh - 320px)"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
<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>
|
|
import { ref, onMounted } from 'vue';
|
|
import LandSearch from './components/LandSearch.vue';
|
|
import TableComponent from '@/components/tableComponent.vue';
|
|
|
|
const searchForm = ref({});
|
|
const handleSearch = (searchData) => {
|
|
// 使用搜索条件
|
|
console.log(searchData);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
// 重置后的逻辑
|
|
};
|
|
|
|
const activeTab = ref('1');
|
|
const handleTabChange = ({ name }) => {
|
|
// activeTab.value = name;
|
|
console.log('切换tab', activeTab.value);
|
|
searchForm.value.landStatus = Number(activeTab.value);
|
|
getData();
|
|
};
|
|
|
|
const loading = ref(false);
|
|
const tableData = ref([]);
|
|
const pageData = ref({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
});
|
|
const columns = ref([
|
|
{ label: '地块编号', prop: 'id', width: 160 },
|
|
{ label: '地块名称', prop: 'landName', width: 170 },
|
|
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
|
{ label: '土地分类', prop: 'landTypeName' },
|
|
{ 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: 'isTransfer' },
|
|
{ label: '土地受让方', prop: 'transferName' },
|
|
{ label: '受让方联系电话', prop: 'transferPhone', width: 100 },
|
|
{ label: '流转合同', prop: 'transferContract' },
|
|
{ label: '信息填报人', prop: 'fillName' },
|
|
{ label: '信息填报单位', prop: 'fillGroup' },
|
|
{ label: '信息填报时间', prop: 'fillTime' },
|
|
// { label: '信息更新人', prop: 'updateName' },
|
|
// { label: '信息更新单位', prop: 'updateGroup' },
|
|
{ label: '信息更新时间', prop: 'updateTime' },
|
|
]);
|
|
|
|
const handlePageChange = ({ page, pageSize }) => {
|
|
pageData.value.currentPage = page;
|
|
pageData.value.pageSize = pageSize;
|
|
getData();
|
|
};
|
|
|
|
const visible = ref(false);
|
|
const isReadonly = ref(false);
|
|
const dialogTitle = ref();
|
|
const activeFormTab = ref('basic');
|
|
const formData = ref({
|
|
gridName: '',
|
|
gridAreaCode: '',
|
|
scope: '',
|
|
scopeImg: '',
|
|
note: '',
|
|
});
|
|
const initialFormData = { ...formData.value };
|
|
const resetForm = () => {
|
|
formData.value = { ...initialFormData };
|
|
};
|
|
|
|
import { mockData } from './landData';
|
|
import { createLand, deleteLand, editLand, fetchLandList, getLandById, approveLand } from '@/apis/landResourceManagement/landManagement';
|
|
import request from '@/utils/axios';
|
|
const getData = async () => {
|
|
// const filteredParams = filterObject(searchForm.value);
|
|
// const response = await fetchGridList(filteredParams);
|
|
// crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
|
loading.value = true;
|
|
// 模拟接口延迟
|
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
|
tableData.value = mockData
|
|
.filter((item) => item.status === activeTab.value)
|
|
.map((item) => ({
|
|
...item,
|
|
landTypeName: '林地',
|
|
}));
|
|
pageData.value.total = tableData.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);
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
getData();
|
|
fetchLandTypeData();
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.custom-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
h1 {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|