Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:土地资源

Browse Source
This commit is contained in:
沈鸿 2025-06-13 14:59:45 +08:00
parent 96d4801116
commit 2c8efe5569
4 changed files with 178 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
sub-government-affairs-service/src/apis/landResourceManagement/landManagement/index.js
View File

@ -18,6 +18,13 @@ export function getLandList(params) {
params,
});
}
// 新增全部土地信息（POST）
export function createLand(data = {}) {
return request('/land-resource/landManage/v1/save', {
method: 'POST',
data,
});
}
/**
* 保存土地基础信息

2
sub-government-affairs-service/src/components/AreaCascader/index.vue
View File

@ -120,6 +120,8 @@ const containerStyle = computed(() => ({
text-align: right;
line-height: 32px;
width: 120px;
box-sizing: border-box;
padding-right: 12px;
}
.controls {
display: flex;

436
sub-government-affairs-service/src/views/landManage/component/landsManage/index.vue
View File

@ -30,16 +30,16 @@
</avue-crud>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialogVisible" title="新增" width="800px" top="8vh">
<el-tabs v-model="activeTab">
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
<el-tabs v-model="activeTab" class="tabs-wrapper">
<el-tab-pane label="土地基本信息" name="basic">
<el-form ref="basicFormRef" :model="formDataBasic" :rules="basicRules" label-width="120px" class="form-container">
<p class="form-title">编辑基本信息</p>
<el-form ref="basicFormRef" :model="formDataBasic" :disabled="isReadonly" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="地块名称" prop="landName">
<el-input v-model="formDataBasic.landName" placeholder="请输入地块名称" />
</el-form-item>
<el-form-item label="面积(亩)" prop="area">
<el-input-number v-model="formDataBasic.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
</el-form-item>
<el-form-item label="土地类型" prop="landType">
<el-select v-model="formDataBasic.landType" placeholder="选择土地类型" clearable>
<el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
@ -48,9 +48,6 @@
<el-form-item label="具体位置" prop="address">
<el-input v-model="formDataBasic.address" placeholder="请输入具体位置" />
</el-form-item>
<el-form-item label="所属网格" prop="gridId">
<AreaCascader v-model:region-code="formDataBasic.regionCode" v-model:grid-id="formDataBasic.gridId" label="" :width="500" />
</el-form-item>
<el-form-item label="土壤类型" prop="soilTypeId">
<url-select
v-model="formDataBasic.soilTypeId"
@ -63,25 +60,30 @@
/>
</el-form-item>
<el-form-item label="土地照片" prop="landUrl">
<el-upload
:http-request="customUploadRequest"
:on-success="(res, file) => handleUploadSuccess(res, file, 'basic')"
multiple
:show-file-list="true"
>
<template #trigger>
<el-button type="primary">点击上传</el-button>
</template>
</el-upload>
<FileUploader v-model="formDataBasic.landUrl" :limit="1" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="面积(亩)" prop="area">
<el-input-number v-model="formDataBasic.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="formDataBasic.regionCode" v-model:grid-id="formDataBasic.gridId" label="" :split-rows="true" />
</el-form-item>
<el-form-item label="土地范围" prop="scope">
<el-input v-model="formDataBasic.scope" placeholder="请输入土地范围" />
<!-- <Attrs v-model:attrs="formDataBasic.scope" type="add" accept="image/*" /> -->
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="土地产权信息" name="property">
<el-form ref="propertyFormRef" :model="formDataProperty" :rules="propertyRules" label-width="120px" class="form-container">
<p class="form-title">编辑产权信息</p>
<el-form ref="propertyFormRef" style="width: 60%" :model="formDataProperty" :disabled="isReadonly" label-width="120px">
<el-row :gutter="20">
<el-form-item label="地块名称">
<el-input v-model="formDataProperty.landName" disabled />
</el-form-item>
@ -97,87 +99,27 @@
<el-form-item label="产权证书" prop="propertyCertificateUrl">
<FileUploader v-model="formDataProperty.propertyCertificateUrl" :limit="1" />
</el-form-item>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
<template #footer>
<span class="dialog-footer">
<el-button @click="addDialogVisible = false">取消</el-button>
<el-button v-if="activeTab === 'basic'" type="primary" @click="handleAddSubmit('basic')">提交</el-button>
<el-button v-if="activeTab === 'basic'" :disabled="disabledProperty" @click="activeTab = 'property'">下一步</el-button>
<el-button v-else @click="activeTab = 'basic'">上一步</el-button>
<el-button v-if="activeTab === 'property'" type="primary" @click="handleAddSubmit('property')"> 提交 </el-button>
</span>
<el-button @click="visible = false">取消</el-button>
<!-- 土地基本信息 tab -->
<template v-if="activeTab === 'basic'">
<el-button type="primary" @click="submitBasicInfo">暂存</el-button>
<el-button @click="activeTab = 'property'">下一步</el-button>
</template>
</el-dialog>
<!-- 查看和编辑共用弹窗 -->
<el-dialog v-model="viewEditDialogVisible" :title="viewEditTitle" width="800px" top="8vh">
<el-form
ref="viewEditFormRef"
:model="viewEditFormData"
:rules="isView ? {} : editRules"
label-width="120px"
class="view-edit-form"
:disabled="isView"
>
<h3 class="section-title">土地基本信息</h3>
<el-form-item label="地块名称" prop="landName">
<el-input v-model="viewEditFormData.landName" />
</el-form-item>
<el-form-item label="面积(亩)" prop="area">
<el-input-number v-model="viewEditFormData.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
</el-form-item>
<el-form-item label="土地类型" prop="landType">
<el-select v-model="viewEditFormData.landType" clearable>
<el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="具体位置" prop="address">
<el-input v-model="viewEditFormData.address" />
</el-form-item>
<el-form-item label="所属网格" prop="gridId">
<AreaCascader v-model="viewEditFormData.regionCode" v-model:grid-id="viewEditFormData.gridId" :width="500" label="" />
</el-form-item>
<el-form-item label="土壤类型" prop="soilTypeId">
<url-select
v-model="viewEditFormData.soilTypeId"
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="viewEditFormData.landUrl" :limit="1" />
</el-form-item>
<el-form-item label="土地范围" prop="scope">
<el-input v-model="viewEditFormData.scope" />
</el-form-item>
<h3 class="section-title">土地产权信息</h3>
<el-form-item label="产权人姓名" prop="propertyName">
<el-input v-model="viewEditFormData.propertyName" />
</el-form-item>
<el-form-item label="联系方式" prop="propertyPhone">
<el-input v-model="viewEditFormData.propertyPhone" />
</el-form-item>
<el-form-item label="产权编号" prop="landCode">
<el-input v-model="viewEditFormData.landCode" />
</el-form-item>
<el-form-item label="产权证书" prop="propertyCertificateUrl">
<FileUploader v-model="viewEditFormData.propertyCertificateUrl" :limit="1" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="viewEditDialogVisible = false">{{ isView ? '关闭' : '取消' }}</el-button>
<el-button v-if="isView" type="primary" @click="handleEdit">编辑</el-button>
<el-button v-if="!isView" type="primary" @click="handleView">查看</el-button>
<el-button v-if="!isView" type="primary" @click="handleViewEditSubmit"> 提交 </el-button>
<!-- 土地产权信息 tab -->
<template v-else>
<el-button @click="activeTab = 'basic'">上一步</el-button>
<el-button v-if="formDataProperty.landId" type="primary" @click="submitPropertyInfo">提交</el-button>
<el-button v-else type="primary" @click="submitAll">保存</el-button>
</template>
</span>
</template>
</el-dialog>
@ -187,8 +129,9 @@
<script setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import { getLandList, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
import { getLandList, createLand, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
import { CommonUpload } from '@/apis/index';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/utils/axios';
// ==============================
@ -196,17 +139,14 @@ import request from '@/utils/axios';
// ==============================
const loading = ref(false);
const crudRef = ref();
const addDialogVisible = ref(false);
const visible = ref(false);
const isReadonly = ref(false);
const activeTab = ref('basic');
const viewEditDialogVisible = ref(false);
const isView = ref(false);
// 控制是否启用验证规则
const isValidationEnabled = ref(false);
const dialogTitle = ref('新增');
// 表单引用
const basicFormRef = ref(null);
const propertyFormRef = ref(null);
const viewEditFormRef = ref(null);
// 分页数据
const pageData = ref({
@ -251,97 +191,6 @@ const formDataProperty = ref({
propertyCertificateUrl: '',
});
const viewEditFormData = ref({
id: '',
landName: '',
gridId: '',
gridName: '',
area: 0,
landType: '',
landTypeId: '',
landTypeName: '',
address: '',
detailAddress: '',
fullLandType: '',
fullRegionName: '',
soilTypeId: '',
soilType: '',
landUrl: '',
scope: '',
propertyName: '',
propertyPhone: '',
landCode: '',
propertyCertificateUrl: '',
updateTime: '',
});
// OSS URL
const ossUrl = 'http://gov-cloud.oss-cn-chengdu.aliyuncs.com/';
// ==============================
// 计算属性
// ==============================
const viewEditTitle = computed(() => {
return isView.value ? '查看' : '编辑';
});
const disabledProperty = computed(() => {
return formDataBasic.value.id ? false : true;
});
// ==============================
// 表单验证规则
// ==============================
const basicRules = reactive(
isValidationEnabled.value
? {
landName: [{ required: true, message: '请输入地块名称', trigger: 'blur' }],
area: [
{ required: true, message: '请输入面积', trigger: 'blur' },
{
type: 'number',
min: 0,
message: '面积必须大于0',
trigger: 'blur',
},
],
landType: [{ required: true, message: '请选择土地类型', trigger: 'change' }],
address: [{ required: true, message: '请输入具体位置', trigger: 'blur' }],
gridId: [{ required: true, message: '请选择所属网格', trigger: 'change' }],
soilTypeId: [{ required: true, message: '请选择土壤类型', trigger: 'change' }],
landUrl: [{ required: true, message: '请上传土地照片', trigger: 'change' }],
scope: [{ required: true, message: '请输入土地范围', trigger: 'blur' }],
}
: {}
);
const propertyRules = reactive(
isValidationEnabled.value
? {
propertyName: [{ required: true, message: '请输入产权人姓名', trigger: 'blur' }],
propertyPhone: [
{ required: true, message: '请输入联系方式', trigger: 'blur' },
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
],
landCode: [{ required: true, message: '请输入产权编号', trigger: 'blur' }],
propertyCertificateUrl: [{ required: true, message: '请上传产权证书', trigger: 'change' }],
}
: {}
);
const editRules = reactive(
isValidationEnabled.value
? {
...basicRules,
...propertyRules,
}
: {}
);
// ==============================
// CRUD 配置
// ==============================
@ -353,7 +202,7 @@ const option = reactive({
column: [
{ label: '地块名称', prop: 'landName' },
{ label: '所属网格', prop: 'gridName' },
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${cellValue} 亩` },
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
{ label: '土地类型', prop: 'landTypeName' },
{ label: '所属行政区域', prop: 'fullRegionName' },
{ label: '具体位置', prop: 'address' },
@ -364,16 +213,16 @@ const option = reactive({
{ label: '信息更新时间', prop: 'updateTime' },
],
actions: [
{
name: '查看',
icon: 'view',
event: ({ row }) => handleView(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => handleEdit(row),
},
// {
// name: '查看',
// icon: 'view',
// event: ({ row }) => handleView(row),
// },
// {
// name: '编辑',
// icon: 'edit',
// event: ({ row }) => handleEdit(row),
// },
{
type: 'danger',
name: '删除',
@ -440,7 +289,7 @@ const handleAdd = () => {
propertyCertificateUrl: '',
};
addDialogVisible.value = true;
visible.value = true;
activeTab.value = 'basic';
// 重置表单验证
@ -455,22 +304,15 @@ const handleAdd = () => {
};
const handleView = (row) => {
isView.value = true;
viewEditFormData.value = { ...row };
viewEditDialogVisible.value = true;
isReadonly.value = true;
dialogTitle.value = '土地资源详情';
visible.value = true;
};
const handleEdit = (row) => {
isView.value = false;
viewEditFormData.value = { ...row };
viewEditDialogVisible.value = true;
// 重置表单验证
// nextTick(() => {
// if (viewEditFormRef.value) {
// viewEditFormRef.value.resetFields();
// }
// });
dialogTitle.value = '编辑';
isReadonly.value = false;
visible.value = true;
};
const handleDelete = (id) => {
@ -500,94 +342,57 @@ const resetSearch = () => {
// ==============================
// 方法 - 表单提交
// ==============================
const handleAddSubmit = async (tab) => {
const submitBasicInfo = async () => {
try {
if (tab === 'basic') {
await basicFormRef.value.validate();
const res = await saveBaseInfo(formDataBasic.value);
if (res.code === 200) {
activeTab.value = 'property';
formDataProperty.value.id = res.data.id;
formDataProperty.value.landName = formDataBasic.value.landName;
ElMessage.success('基本信息已暂存');
}
} else if (tab === 'property') {
} catch (error) {
console.error('暂存失败', error);
}
};
const submitPropertyInfo = async () => {
try {
await propertyFormRef.value.validate();
if (!formDataProperty.value.id) {
ElMessage.error('请先保存基本信息');
return;
}
const res = await saveProperty(formDataProperty.value);
if (res.code === 200) {
addDialogVisible.value = false;
getData();
}
}
} catch (error) {
console.error('表单提交失败', error);
}
};
const handleViewEditSubmit = async () => {
try {
await viewEditFormRef.value.validate();
// 合并提交逻辑
const { id, ...formData } = viewEditFormData.value;
if (id) {
// 更新逻辑
// await updateLandInfo({ id, ...formData });
await editLand({ id, ...formData });
viewEditDialogVisible.value = false;
ElMessage.success('产权信息提交成功');
visible.value = false;
getData();
}
} catch (error) {
console.error('表单提交失败', error);
console.error('产权信息提交失败', error);
}
};
// ==============================
// 方法 - 文件上传
// ==============================
const customUploadRequest = async (options) => {
const formData = new FormData();
formData.append('file', options.file);
const submitAll = async () => {
try {
const response = await CommonUpload(formData);
options.onSuccess(response, options.file);
return response;
} catch (err) {
console.error('上传失败', err);
options.onError(err);
throw err;
}
await basicFormRef.value.validate();
await propertyFormRef.value.validate();
const combinedData = {
...formDataProperty.value,
...formDataBasic.value,
};
const handleUploadSuccess = (res, file, type) => {
if (res?.data?.url) {
const url = res.data.url;
switch (type) {
case 'basic':
formDataBasic.value.landUrl = url;
break;
case 'property':
formDataProperty.value.propertyCertificateUrl = url;
break;
case 'viewEditBasic':
viewEditFormData.value.landUrl = url;
break;
case 'viewEditProperty':
viewEditFormData.value.propertyCertificateUrl = url;
break;
const baseRes = await createLand(combinedData);
if (baseRes.code === 200) {
ElMessage.success('全部信息保存成功');
visible.value = false;
getData();
} else {
ElMessage.error('信息保存失败');
}
// 手动触发验证
nextTick(() => {
if (type === 'basic' && basicFormRef.value) {
basicFormRef.value.validateField('landUrl');
} else if (type === 'property' && propertyFormRef.value) {
propertyFormRef.value.validateField('propertyCertificateUrl');
} else if (type.includes('viewEdit') && viewEditFormRef.value) {
const field = type === 'viewEditBasic' ? 'landUrl' : 'propertyCertificateUrl';
viewEditFormRef.value.validateField(field);
}
});
} catch (error) {
console.error('保存失败', error);
}
};
@ -616,6 +421,11 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
// :deep(.el-dialog__body) {
// padding: 20px;
// height: calc(100vh - 300px);
// overflow-y: auto;
// }
.custom-page {
padding: 20px;
height: calc(100vh - 150px);
@ -632,40 +442,40 @@ onMounted(() => {
}
}
}
.tabs-wrapper {
width: 100%;
display: flex;
align-items: center;
// background-color: #7daaaa;
.form-container,
.view-edit-form {
padding: 0 20px;
max-height: calc(100vh - 300px);
overflow-y: auto;
.el-form-item {
margin-bottom: 22px;
:deep(.el-tabs__item) {
font-size: 16px;
color: #555555;
font-weight: 500;
// border: 1 solid #f000;
}
}
.view-edit-form {
.section-title {
color: #409eff;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin: 20px 0;
}
.preview-image {
max-width: 100%;
max-height: 200px;
border: 1px solid #eee;
:deep(.el-tabs__content) {
padding: 20px;
// background-color: #f5f5f5;
border-radius: 4px;
display: block;
margin-top: 8px;
height: calc(100vh - 300px);
overflow-y: auto;
}
:deep(.el-tab-pane) {
margin: 0 auto;
width: 80%;
}
}
.form-title {
font-size: 16px;
font-weight: 500;
margin: 30px 0;
color: #333333;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
padding: 10px 20px 0;
border-top: 1px solid #eee;
display: block;
text-align: center;
}
</style>

6
sub-government-affairs-service/src/views/resource/grid/GridMember.vue
View File

@ -415,10 +415,4 @@ const onExport = () => {
.dialog-footer {
text-align: center;
}
:deep(.area-cascader-label) {
padding: 0 12px 0 0;
margin: 0;
width: 120px;
box-sizing: border-box;
}
</style>