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, 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; text-align: right;
line-height: 32px; line-height: 32px;
width: 120px; width: 120px;
box-sizing: border-box;
padding-right: 12px;
} }
.controls { .controls {
display: flex; display: flex;

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

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

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

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