一大波修改
This commit is contained in:
parent
ab7d436744
commit
3d64c5fcb7
@ -173,11 +173,11 @@ const crudOptions = reactive({
|
|||||||
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: '删除',
|
||||||
@ -232,23 +232,23 @@ const handleDelete = async (row) => {
|
|||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
console.log('提交表单:', formData.value);
|
console.log('提交表单:', formData.value);
|
||||||
try {
|
// try {
|
||||||
if (dialogTitle.value === '新增网格') {
|
// if (dialogTitle.value === '新增网格') {
|
||||||
await createGrid(formData.value);
|
// await createGrid(formData.value);
|
||||||
ElMessage.success('新增成功');
|
// ElMessage.success('新增成功');
|
||||||
resetForm();
|
// resetForm();
|
||||||
visible.value = false;
|
// visible.value = false;
|
||||||
getData();
|
// getData();
|
||||||
} else {
|
// } else {
|
||||||
await updateGrid(formData.value);
|
// await updateGrid(formData.value);
|
||||||
ElMessage.success('更新成功');
|
// ElMessage.success('更新成功');
|
||||||
resetForm();
|
// resetForm();
|
||||||
visible.value = false;
|
// visible.value = false;
|
||||||
getData();
|
// getData();
|
||||||
}
|
// }
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
ElMessage.error(error.message || '新增失败，请重试');
|
// ElMessage.error(error.message || '新增失败，请重试');
|
||||||
}
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
|
|||||||
@ -127,11 +127,8 @@ const filterObject = (obj) => {
|
|||||||
const crudData = ref([]);
|
const crudData = ref([]);
|
||||||
const crudOptions = reactive({
|
const crudOptions = reactive({
|
||||||
...CRUD_OPTIONS,
|
...CRUD_OPTIONS,
|
||||||
addBtn: false,
|
|
||||||
header: false,
|
header: false,
|
||||||
searchBtn: false,
|
menu: false,
|
||||||
emptyBtn: false,
|
|
||||||
refreshBtn: false,
|
|
||||||
height: 'calc(100vh - 360px)',
|
height: 'calc(100vh - 360px)',
|
||||||
column: [
|
column: [
|
||||||
{ label: '地块编号', prop: 'id', width: 160 },
|
{ label: '地块编号', prop: 'id', width: 160 },
|
||||||
@ -227,23 +224,23 @@ const handleDelete = async (row) => {
|
|||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
console.log('提交表单:', formData.value);
|
console.log('提交表单:', formData.value);
|
||||||
try {
|
// try {
|
||||||
if (dialogTitle.value === '新增网格') {
|
// if (dialogTitle.value === '新增网格') {
|
||||||
await createGrid(formData.value);
|
// await createGrid(formData.value);
|
||||||
ElMessage.success('新增成功');
|
// ElMessage.success('新增成功');
|
||||||
resetForm();
|
// resetForm();
|
||||||
visible.value = false;
|
// visible.value = false;
|
||||||
getData();
|
// getData();
|
||||||
} else {
|
// } else {
|
||||||
await updateGrid(formData.value);
|
// await updateGrid(formData.value);
|
||||||
ElMessage.success('更新成功');
|
// ElMessage.success('更新成功');
|
||||||
resetForm();
|
// resetForm();
|
||||||
visible.value = false;
|
// visible.value = false;
|
||||||
getData();
|
// getData();
|
||||||
}
|
// }
|
||||||
} catch (error) {
|
// } catch (error) {
|
||||||
ElMessage.error(error.message || '新增失败，请重试');
|
// ElMessage.error(error.message || '新增失败，请重试');
|
||||||
}
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
|
|||||||
@ -1,231 +1,203 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page">
|
<div class="custom-page">
|
||||||
<h1>林地</h1>
|
<h1>林地</h1>
|
||||||
<LandSearch :search="searchForm" @on-search="handleSearch" @on-reset="handleReset" />
|
<!-- 搜索 -->
|
||||||
|
<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.id" :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-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||||
<!-- <el-tab-pane label="待提交" name="0" /> -->
|
<!-- <el-tab-pane label="待提交" name="0" /> -->
|
||||||
<el-tab-pane label="待审核" name="1" />
|
<el-tab-pane label="待审核" name="1" />
|
||||||
<el-tab-pane label="已通过" name="2" />
|
<el-tab-pane label="已通过" name="2" />
|
||||||
<el-tab-pane label="已驳回" name="0" />
|
<el-tab-pane label="已驳回" name="0" />
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<TableComponent
|
<avue-crud
|
||||||
:loading="loading"
|
ref="crudRef"
|
||||||
:columns="columns"
|
v-model:page="pageData"
|
||||||
:table-data="tableData"
|
:data="crudData"
|
||||||
:current-page="pageData.currentPage"
|
:option="crudOptions"
|
||||||
:page-size="pageData.pageSize"
|
:table-loading="loading"
|
||||||
:total="pageData.total"
|
@current-change="handleCurrentChange"
|
||||||
:show-pagination="true"
|
@size-change="handleSizeChange"
|
||||||
:show-border="true"
|
|
||||||
:show-sort="true"
|
|
||||||
style="height: calc(100vh - 320px)"
|
|
||||||
@page-change="handlePageChange"
|
|
||||||
>
|
>
|
||||||
<template #action="scope">
|
<!-- <template #menu-left>
|
||||||
<!-- <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="primary" icon="Plus" @click="handleAdd">新增网格</el-button>
|
||||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
|
</template> -->
|
||||||
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
<template #menu="scope">
|
||||||
|
<custom-table-operate :actions="crudOptions.actions" :data="scope" />
|
||||||
</template>
|
</template>
|
||||||
</TableComponent>
|
</avue-crud>
|
||||||
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
|
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
|
||||||
<el-tabs v-model="activeFormTab" class="tabs-wrapper">
|
<el-form ref="form" :model="formData" :rules="rules" :disabled="isReadonly" label-width="100px" class="form-item">
|
||||||
<el-tab-pane label="土地基本信息" name="basic">
|
<p class="form-title">填写网格信息</p>
|
||||||
<p class="form-title">基本信息</p>
|
<el-form-item label="网格名称" prop="gridName">
|
||||||
<el-form ref="basicFormRef" :model="formData" :disabled="isReadonly" label-width="120px">
|
<el-input v-model="formData.gridName" placeholder="请输入网格名称" />
|
||||||
<el-row :gutter="20">
|
</el-form-item>
|
||||||
<el-col :span="12">
|
<el-form-item label="所属行政区域" prop="gridAreaCode">
|
||||||
<el-form-item label="地块名称" prop="landName">
|
<AreaSelect v-model="formData.gridAreaCode" :label="null" :emit-path="false" />
|
||||||
<el-input v-model="formData.landName" placeholder="请输入地块名称" />
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item label="网格化地图" prop="scopeImg">
|
||||||
<el-form-item label="土地类型" prop="landType">
|
<FileUploader v-model="formData.scopeImg" :limit="1" />
|
||||||
<el-tree-select
|
</el-form-item>
|
||||||
v-model="formData.landType"
|
<el-form-item label="备注" prop="note">
|
||||||
:data="landTypeOptions"
|
<el-input v-model="formData.note" placeholder="请输入备注" />
|
||||||
:props="treeProps"
|
</el-form-item>
|
||||||
placeholder="选择土地类型"
|
</el-form>
|
||||||
clearable
|
|
||||||
check-strictly
|
|
||||||
:render-after-expand="false"
|
|
||||||
/>
|
|
||||||
</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>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="visible = false">取消</el-button>
|
<el-button @click="handleCancel">取消</el-button>
|
||||||
<template v-if="!isReadonly">
|
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
||||||
<el-button type="primary" @click="submitAll">修改</el-button>
|
</div>
|
||||||
</template>
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
// ---------------------------------------------------------------------
|
||||||
import LandSearch from './components/LandSearch.vue';
|
// avue-crud 通用代码
|
||||||
import TableComponent from '@/components/tableComponent.vue';
|
// ---------------------------------------------------------------------
|
||||||
|
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';
|
||||||
|
|
||||||
const searchForm = ref({});
|
const UserStore = useUserStore();
|
||||||
const handleSearch = (searchData) => {
|
const user = UserStore.getUserInfo();
|
||||||
// 使用搜索条件
|
console.log('admin 属性：', user.admin);
|
||||||
console.log(searchData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleReset = () => {
|
|
||||||
// 重置后的逻辑
|
|
||||||
};
|
|
||||||
|
|
||||||
const activeTab = ref('1');
|
|
||||||
const handleTabChange = ({ name }) => {
|
|
||||||
// activeTab.value = name;
|
|
||||||
console.log('切换tab', activeTab.value);
|
|
||||||
getData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const tableData = ref([]);
|
|
||||||
|
const visible = ref(false);
|
||||||
|
const isReadonly = ref(false);
|
||||||
|
const dialogTitle = ref();
|
||||||
|
const activeTab = ref('1');
|
||||||
|
const formData = ref({
|
||||||
|
gridName: '',
|
||||||
|
gridAreaCode: '',
|
||||||
|
scope: '',
|
||||||
|
scopeImg: '',
|
||||||
|
note: '',
|
||||||
|
});
|
||||||
|
const initialFormData = { ...formData.value };
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = { ...initialFormData };
|
||||||
|
};
|
||||||
|
|
||||||
const pageData = ref({
|
const pageData = ref({
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
});
|
});
|
||||||
const columns = ref([
|
const searchForm = ref({
|
||||||
{ label: '地块编号', prop: 'id', width: 160 },
|
gridName: '',
|
||||||
{ label: '地块名称', prop: 'landName', width: 170 },
|
keyword: '',
|
||||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
regionCode: '',
|
||||||
{ label: '土地分类', prop: 'landTypeName' },
|
id: '',
|
||||||
{ label: '土壤类型', prop: 'soilTypeName' },
|
status: -1,
|
||||||
{ label: '所属行政区域', prop: 'fullRegionName', width: 160 },
|
});
|
||||||
{ label: '所属网格', prop: 'gridName', width: 90 },
|
const initialSearchForm = { ...searchForm.value };
|
||||||
{ label: '具体位置', prop: 'address', width: 160 },
|
const resetSearch = () => {
|
||||||
{ label: '土地承包经营人', prop: 'propertyName' },
|
searchForm.value = { ...initialSearchForm };
|
||||||
{ label: '联系电话', prop: 'propertyPhone' },
|
};
|
||||||
{ label: '土地经营权证书编号', prop: 'landCode', width: 160 },
|
// 过滤对象，只保留有值的属性
|
||||||
{ label: '是否土地流转', prop: 'isTransfer', formatter: (row, column, cellValue) => (cellValue === 1 ? '是' : '否') },
|
const filterObject = (obj) => {
|
||||||
{ label: '土地受让方', prop: 'transferName' },
|
const newObj = {};
|
||||||
{ label: '受让方联系电话', prop: 'transferPhone', width: 100 },
|
Object.keys(obj).forEach((key) => {
|
||||||
{ label: '流转合同', prop: 'transferContract' },
|
const value = obj[key];
|
||||||
{ label: '信息填报人', prop: 'fillName' },
|
// 检查值是否有效，排除空字符串、null 和 undefined
|
||||||
{ label: '信息填报单位', prop: 'fillGroup' },
|
if (value !== '' && value !== null && value !== undefined) {
|
||||||
{ label: '信息填报时间', prop: 'fillTime' },
|
newObj[key] = value;
|
||||||
// { label: '信息更新人', prop: 'updateName' },
|
}
|
||||||
// { label: '信息更新单位', prop: 'updateGroup' },
|
});
|
||||||
{ label: '信息更新时间', prop: 'updateTime' },
|
return newObj;
|
||||||
{ label: '操作', prop: 'action', slotName: 'action', fixed: 'right' },
|
};
|
||||||
]);
|
|
||||||
|
|
||||||
const actions = [
|
const crudData = ref([]);
|
||||||
{
|
const crudOptions = reactive({
|
||||||
name: '查看',
|
...CRUD_OPTIONS,
|
||||||
icon: 'view',
|
header: false,
|
||||||
event: ({ row }) => handleView(row),
|
menu: false,
|
||||||
},
|
height: 'calc(100vh - 360px)',
|
||||||
{
|
column: [
|
||||||
name: '编辑',
|
{ label: '地块编号', prop: 'id', width: 160 },
|
||||||
icon: 'edit',
|
{ label: '地块名称', prop: 'landName', width: 170 },
|
||||||
event: ({ row }) => handleEdit(row),
|
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||||
},
|
{ label: '土地分类', prop: 'landTypeName' },
|
||||||
{
|
{ label: '土壤类型', prop: 'soilTypeName' },
|
||||||
type: 'danger',
|
{ label: '所属行政区域', prop: 'fullRegionName', width: 160 },
|
||||||
name: '删除',
|
{ label: '所属网格', prop: 'gridName', width: 90 },
|
||||||
icon: 'delete',
|
{ label: '具体位置', prop: 'address', width: 160 },
|
||||||
event: ({ row }) => handleDelete(row.id),
|
{ label: '土地承包经营人', prop: 'propertyName' },
|
||||||
},
|
{ label: '联系电话', prop: 'propertyPhone' },
|
||||||
];
|
{ label: '土地经营权证书编号', prop: 'landCode', width: 160 },
|
||||||
const handleView = async (row) => {
|
{ 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' },
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '查看',
|
||||||
|
icon: 'view',
|
||||||
|
event: ({ row }) => handleView(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '编辑',
|
||||||
|
icon: 'edit',
|
||||||
|
event: ({ row }) => handleEdit(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'danger',
|
||||||
|
name: '删除',
|
||||||
|
icon: 'delete',
|
||||||
|
event: ({ row }) => handleDelete(row),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const handleTabChange = ({ name }) => {
|
||||||
|
// activeTab.value = name;
|
||||||
|
console.log('切换tab', 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 = (row) => {
|
||||||
isReadonly.value = true;
|
isReadonly.value = true;
|
||||||
formData.value = await getLandDetail(row.id);
|
formData.value = { ...row };
|
||||||
dialogTitle.value = '查看网格';
|
dialogTitle.value = '查看网格';
|
||||||
visible.value = true;
|
// visible.value = true;
|
||||||
};
|
};
|
||||||
const handleEdit = (row) => {
|
const handleEdit = (row) => {
|
||||||
isReadonly.value = false;
|
isReadonly.value = false;
|
||||||
formData.value = { ...row };
|
formData.value = { ...row };
|
||||||
dialogTitle.value = '编辑网格';
|
dialogTitle.value = '编辑网格';
|
||||||
visible.value = true;
|
// visible.value = true;
|
||||||
};
|
};
|
||||||
const handleDelete = async (row) => {
|
const handleDelete = async (row) => {
|
||||||
console.log('删除', row);
|
console.log('删除', row);
|
||||||
@ -250,127 +222,105 @@ const handleDelete = async (row) => {
|
|||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePageChange = ({ page, pageSize }) => {
|
const handleSubmit = async () => {
|
||||||
pageData.value.currentPage = page;
|
console.log('提交表单:', formData.value);
|
||||||
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 () => {
|
|
||||||
loading.value = true;
|
|
||||||
const requestData = {
|
|
||||||
...searchForm.value,
|
|
||||||
page: pageData.value.currentPage,
|
|
||||||
size: pageData.value.pageSize,
|
|
||||||
landStatus: activeTab.value,
|
|
||||||
landTypeName: '草地',
|
|
||||||
};
|
|
||||||
const response = await fetchLandList(requestData);
|
|
||||||
tableData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
|
||||||
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 {
|
try {
|
||||||
const response = await request.get('/land-resource/baseInfo/landTree', { params: { status: '1' } });
|
if (dialogTitle.value === '新增网格') {
|
||||||
if (response.code === 200) {
|
await createGrid(formData.value);
|
||||||
landTypeOptions.value = response.data;
|
ElMessage.success('新增成功');
|
||||||
|
resetForm();
|
||||||
|
visible.value = false;
|
||||||
|
getData();
|
||||||
|
} else {
|
||||||
|
await updateGrid(formData.value);
|
||||||
|
ElMessage.success('更新成功');
|
||||||
|
resetForm();
|
||||||
|
visible.value = false;
|
||||||
|
getData();
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取土地类型数据失败', error);
|
ElMessage.error(error.message || '新增失败，请重试');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------
|
||||||
|
// 业务代码
|
||||||
|
// ---------------------------------------------------------------------
|
||||||
|
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getData();
|
getData();
|
||||||
fetchLandTypeData();
|
|
||||||
});
|
});
|
||||||
|
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));
|
||||||
|
crudData.value = mockData
|
||||||
|
.filter((item) => item.status === activeTab.value)
|
||||||
|
.map((item) => ({
|
||||||
|
...item,
|
||||||
|
landTypeName: '林地',
|
||||||
|
}));
|
||||||
|
pageData.value.total = crudData.value.length;
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
console.log('handleAdd');
|
||||||
|
resetForm();
|
||||||
|
isReadonly.value = false;
|
||||||
|
dialogTitle.value = '新增网格';
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
const handleCancel = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.custom-page {
|
.custom-page {
|
||||||
display: flex;
|
padding-bottom: 0px;
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.tabs-wrapper {
|
.search-bar {
|
||||||
width: 100%;
|
padding-left: 20px;
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
:deep(.el-dialog__body) {
|
||||||
// background-color: #7daaaa;
|
padding: 20px;
|
||||||
|
height: calc(100vh - 300px);
|
||||||
.el-tabs__header {
|
overflow-y: auto;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-title {
|
.form-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
.form-item {
|
||||||
|
width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
.dialog-footer {
|
.dialog-footer {
|
||||||
display: block;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.custom-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,329 +0,0 @@
|
|||||||
<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.id" :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="0" /> -->
|
|
||||||
<el-tab-pane label="待审核" name="1" />
|
|
||||||
<el-tab-pane label="已通过" name="2" />
|
|
||||||
<el-tab-pane label="已驳回" name="0" />
|
|
||||||
</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-left>
|
|
||||||
<el-button type="primary" icon="Plus" @click="handleAdd">新增网格</el-button>
|
|
||||||
</template> -->
|
|
||||||
<template #menu="scope">
|
|
||||||
<custom-table-operate :actions="crudOptions.actions" :data="scope" />
|
|
||||||
</template>
|
|
||||||
</avue-crud>
|
|
||||||
<el-dialog :key="dialogTitle" v-model="visible" :title="dialogTitle" width="60%" align-center :draggable="true">
|
|
||||||
<el-form ref="form" :model="formData" :rules="rules" :disabled="isReadonly" label-width="100px" class="form-item">
|
|
||||||
<p class="form-title">填写网格信息</p>
|
|
||||||
<el-form-item label="网格名称" prop="gridName">
|
|
||||||
<el-input v-model="formData.gridName" placeholder="请输入网格名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="所属行政区域" prop="gridAreaCode">
|
|
||||||
<AreaSelect v-model="formData.gridAreaCode" :label="null" :emit-path="false" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="网格化地图" prop="scopeImg">
|
|
||||||
<FileUploader v-model="formData.scopeImg" :limit="1" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="note">
|
|
||||||
<el-input v-model="formData.note" placeholder="请输入备注" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button @click="handleCancel">取消</el-button>
|
|
||||||
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
|
||||||
</div>
|
|
||||||
</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';
|
|
||||||
|
|
||||||
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 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({
|
|
||||||
gridName: '',
|
|
||||||
keyword: '',
|
|
||||||
regionCode: '',
|
|
||||||
id: '',
|
|
||||||
status: -1,
|
|
||||||
});
|
|
||||||
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: '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' },
|
|
||||||
],
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
name: '查看',
|
|
||||||
icon: 'view',
|
|
||||||
event: ({ row }) => handleView(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '编辑',
|
|
||||||
icon: 'edit',
|
|
||||||
event: ({ row }) => handleEdit(row),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'danger',
|
|
||||||
name: '删除',
|
|
||||||
icon: 'delete',
|
|
||||||
event: ({ row }) => handleDelete(row),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
const handleTabChange = ({ name }) => {
|
|
||||||
// activeTab.value = name;
|
|
||||||
console.log('切换tab', 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 = (row) => {
|
|
||||||
isReadonly.value = true;
|
|
||||||
formData.value = { ...row };
|
|
||||||
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 createGrid(formData.value);
|
|
||||||
ElMessage.success('新增成功');
|
|
||||||
resetForm();
|
|
||||||
visible.value = false;
|
|
||||||
getData();
|
|
||||||
} else {
|
|
||||||
await updateGrid(formData.value);
|
|
||||||
ElMessage.success('更新成功');
|
|
||||||
resetForm();
|
|
||||||
visible.value = false;
|
|
||||||
getData();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
ElMessage.error(error.message || '新增失败，请重试');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
|
||||||
// 业务代码
|
|
||||||
// ---------------------------------------------------------------------
|
|
||||||
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
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));
|
|
||||||
crudData.value = mockData
|
|
||||||
.filter((item) => item.status === activeTab.value)
|
|
||||||
.map((item) => ({
|
|
||||||
...item,
|
|
||||||
landTypeName: '林地',
|
|
||||||
}));
|
|
||||||
pageData.value.total = crudData.value.length;
|
|
||||||
loading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,385 @@
|
|||||||
|
<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"
|
||||||
|
>
|
||||||
|
<template #action="scope">
|
||||||
|
<!-- <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
|
||||||
|
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
||||||
|
</template>
|
||||||
|
</TableComponent>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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);
|
||||||
|
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', formatter: (row, column, cellValue) => (cellValue === 1 ? '是' : '否') },
|
||||||
|
{ 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' },
|
||||||
|
{ label: '操作', prop: 'action', slotName: 'action', fixed: 'right' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const actions = [
|
||||||
|
{
|
||||||
|
name: '查看',
|
||||||
|
icon: 'view',
|
||||||
|
event: ({ row }) => handleView(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '编辑',
|
||||||
|
icon: 'edit',
|
||||||
|
event: ({ row }) => handleEdit(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'danger',
|
||||||
|
name: '删除',
|
||||||
|
icon: 'delete',
|
||||||
|
event: ({ row }) => handleDelete(row.id),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
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 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 () => {
|
||||||
|
loading.value = true;
|
||||||
|
// const requestData = {
|
||||||
|
// ...searchForm.value,
|
||||||
|
// page: pageData.value.currentPage,
|
||||||
|
// size: pageData.value.pageSize,
|
||||||
|
// landStatus: activeTab.value,
|
||||||
|
// landTypeName: '草地',
|
||||||
|
// };
|
||||||
|
// const response = await fetchLandList(requestData);
|
||||||
|
// tableData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||||
|
// pageData.value.total = tableData.value.length;
|
||||||
|
// loading.value = false;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 30px 0;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -218,17 +218,14 @@ const filterObject = (obj) => {
|
|||||||
const crudData = ref([]);
|
const crudData = ref([]);
|
||||||
const crudOptions = reactive({
|
const crudOptions = reactive({
|
||||||
...CRUD_OPTIONS,
|
...CRUD_OPTIONS,
|
||||||
addBtn: false,
|
|
||||||
header: false,
|
header: false,
|
||||||
searchBtn: false,
|
menu: false,
|
||||||
emptyBtn: false,
|
|
||||||
refreshBtn: false,
|
|
||||||
height: 'calc(100vh - 360px)',
|
height: 'calc(100vh - 360px)',
|
||||||
column: [
|
column: [
|
||||||
{ label: '地块编号', prop: 'id', width: 160 },
|
{ label: '地块编号', prop: 'id', width: 160 },
|
||||||
{ label: '地块名称', prop: 'landName', width: 170 },
|
{ label: '地块名称', prop: 'landName', width: 170 },
|
||||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||||
{ label: '土地分类', prop: 'fullLandType' },
|
{ label: '土地分类', prop: 'landTypeName' },
|
||||||
{ label: '土壤类型', prop: 'soilTypeName' },
|
{ label: '土壤类型', prop: 'soilTypeName' },
|
||||||
{ label: '所属行政区域', prop: 'fullRegionName', width: 160 },
|
{ label: '所属行政区域', prop: 'fullRegionName', width: 160 },
|
||||||
{ label: '所属网格', prop: 'gridName', width: 90 },
|
{ label: '所属网格', prop: 'gridName', width: 90 },
|
||||||
@ -262,22 +259,22 @@ const crudOptions = reactive({
|
|||||||
icon: 'delete',
|
icon: 'delete',
|
||||||
event: ({ row }) => handleDelete(row),
|
event: ({ row }) => handleDelete(row),
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: '审核',
|
// name: '审核',
|
||||||
icon: 'approve',
|
// icon: 'approve',
|
||||||
event: ({ row }) => onApprove(row),
|
// event: ({ row }) => onApprove(row),
|
||||||
},
|
// },
|
||||||
// TODO: 驳回应该有填写驳回原因的弹窗
|
// // TODO: 驳回应该有填写驳回原因的弹窗
|
||||||
{
|
// {
|
||||||
name: '驳回',
|
// name: '驳回',
|
||||||
icon: 'reject',
|
// icon: 'reject',
|
||||||
event: ({ row }) => onReject(row),
|
// event: ({ row }) => onReject(row),
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: '驳回原因',
|
// name: '驳回原因',
|
||||||
icon: 'reject',
|
// icon: 'reject',
|
||||||
event: ({ row }) => onRejectReason(row),
|
// event: ({ row }) => onRejectReason(row),
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
const handleTabChange = ({ name }) => {
|
const handleTabChange = ({ name }) => {
|
||||||
@ -331,23 +328,6 @@ const handleDelete = async (row) => {
|
|||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
console.log('提交表单:', formData.value);
|
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 || '新增失败，请重试');
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
@ -361,9 +341,18 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const filteredParams = filterObject(searchForm.value);
|
// const filteredParams = filterObject(searchForm.value);
|
||||||
const response = await fetchLandList(filteredParams);
|
// const response = await fetchLandList(filteredParams);
|
||||||
crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
// crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||||
|
// pageData.value.total = crudData.value.length;
|
||||||
|
// loading.value = false;
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||||
|
crudData.value = mockData
|
||||||
|
.filter((item) => item.status === activeTab.value)
|
||||||
|
.map((item) => ({
|
||||||
|
...item,
|
||||||
|
landTypeName: '草地',
|
||||||
|
}));
|
||||||
pageData.value.total = crudData.value.length;
|
pageData.value.total = crudData.value.length;
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -127,11 +127,8 @@ const filterObject = (obj) => {
|
|||||||
const crudData = ref([]);
|
const crudData = ref([]);
|
||||||
const crudOptions = reactive({
|
const crudOptions = reactive({
|
||||||
...CRUD_OPTIONS,
|
...CRUD_OPTIONS,
|
||||||
addBtn: false,
|
|
||||||
header: false,
|
header: false,
|
||||||
searchBtn: false,
|
menu: false,
|
||||||
emptyBtn: false,
|
|
||||||
refreshBtn: false,
|
|
||||||
height: 'calc(100vh - 360px)',
|
height: 'calc(100vh - 360px)',
|
||||||
column: [
|
column: [
|
||||||
{ label: '地块编号', prop: 'id', width: 160 },
|
{ label: '地块编号', prop: 'id', width: 160 },
|
||||||
@ -227,23 +224,6 @@ const handleDelete = async (row) => {
|
|||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
console.log('提交表单:', formData.value);
|
console.log('提交表单:', formData.value);
|
||||||
try {
|
|
||||||
if (dialogTitle.value === '新增网格') {
|
|
||||||
await createGrid(formData.value);
|
|
||||||
ElMessage.success('新增成功');
|
|
||||||
resetForm();
|
|
||||||
visible.value = false;
|
|
||||||
getData();
|
|
||||||
} else {
|
|
||||||
await updateGrid(formData.value);
|
|
||||||
ElMessage.success('更新成功');
|
|
||||||
resetForm();
|
|
||||||
visible.value = false;
|
|
||||||
getData();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
ElMessage.error(error.message || '新增失败，请重试');
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// ---------------------------------------------------------------------
|
// ---------------------------------------------------------------------
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user