61501土地资源管理
This commit is contained in:
parent
4c65ec3e9e
commit
68a889c1ed
@ -10,8 +10,13 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
|
||||
# 阿里云接口地址
|
||||
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
|
||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
|
||||
|
||||
# 内网接口地址
|
||||
# 内网测试库接口地址
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.98:9204'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
|
||||
# 本地开发接口地址
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.74:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.74:8080'
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@ -9,23 +9,29 @@ const inputSuppliesRoutes = [
|
||||
redirect: '/sub-government-affairs-service/material/pesticide',
|
||||
meta: { title: '投入品管理', icon: 'FullScreen' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/annualPlans',
|
||||
name: 'annualPlans',
|
||||
component: () => import('@/views/inputSuppliesManage/material/annualPlan/index.vue'),
|
||||
meta: { title: '农产品种植管理', icon: 'Timer' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/pesticide',
|
||||
name: 'input-supplies-pesticide',
|
||||
component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
||||
meta: { title: '农药管理', icon: 'Orange' },
|
||||
meta: { title: '农药使用管理', icon: 'Orange' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/fertilizer',
|
||||
name: 'input-supplies-fertilizer',
|
||||
component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
|
||||
meta: { title: '肥料管理', icon: 'Grid' },
|
||||
meta: { title: '肥料使用管理', icon: 'Grid' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/seed',
|
||||
name: 'input-supplies-seed',
|
||||
component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
|
||||
meta: { title: '种子使用监督管理', icon: 'Watermelon' },
|
||||
meta: { title: '种子使用管理', icon: 'Watermelon' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/others',
|
||||
@ -33,99 +39,6 @@ const inputSuppliesRoutes = [
|
||||
component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
||||
meta: { title: '其他投入品', icon: 'TakeawayBox' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/annualPlans',
|
||||
name: 'annualPlans',
|
||||
component: () => import('@/views/inputSuppliesManage/material/annualPlan/index.vue'),
|
||||
meta: { title: '种植进度网格化管理', icon: 'Timer' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/materialManage',
|
||||
// name: 'materialManage',
|
||||
// component: Views,
|
||||
// redirect: '/sub-government-affairs-service/material/pesticide',
|
||||
// meta: { title: '投入品管理', icon: 'OfficeBuilding' },
|
||||
// children: [
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/pesticide',
|
||||
// name: 'input-supplies-pesticide',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
||||
// meta: { title: '农药管理', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/fertilizer',
|
||||
// name: 'input-supplies-fertilizer',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
|
||||
// meta: { title: '肥料管理', icon: '' },
|
||||
// },
|
||||
// // {
|
||||
// // path: '/sub-government-affairs-service/material/pesticide',
|
||||
// // name: 'input-supplies-pesticide',
|
||||
// // component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
||||
// // meta: { title: '农药管理', icon: '' },
|
||||
// // },
|
||||
// // {
|
||||
// // path: '/sub-government-affairs-service/material/ratPoison',
|
||||
// // name: 'input-supplies-ratPoison',
|
||||
// // component: () => import('@/views/inputSuppliesManage/material/ratPoison/index.vue'),
|
||||
// // meta: { title: '兽药管理', icon: '' },
|
||||
// // },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/material/seed',
|
||||
// name: 'input-supplies-seed',
|
||||
// component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
|
||||
// meta: { title: '种子管理', icon: '' },
|
||||
// },
|
||||
// // {
|
||||
// // path: '/sub-government-affairs-service/material/farmMachinery',
|
||||
// // name: 'input-supplies-farmMachinery',
|
||||
// // component: () => import('@/views/inputSuppliesManage/material/farmMachinery/index.vue'),
|
||||
// // meta: { title: '农机管理', icon: '' },
|
||||
// // },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/productionDealer',
|
||||
// name: 'productionDealer',
|
||||
// component: () => import('@/views/inputSuppliesManage/productionDealer/index.vue'),
|
||||
// meta: { title: '企业经销商管理', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/enterpriseDealerCheck',
|
||||
// name: 'enterpriseDealerCheck',
|
||||
// component: () => import('@/views/inputSuppliesManage/enterpriseDealerCheck/index.vue'),
|
||||
// meta: { title: '企业经销商抽检', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/useSupervise',
|
||||
// name: 'useSupervise',
|
||||
// component: () => import('@/views/inputSuppliesManage/useSupervise/index.vue'),
|
||||
// meta: { title: '使用监管', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/leaseSupervise',
|
||||
// name: 'leaseSupervise',
|
||||
// component: () => import('@/views/inputSuppliesManage/leaseSupervise/index.vue'),
|
||||
// meta: { title: '农机租赁监管', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/redBlackRank',
|
||||
// name: 'redBlackRank',
|
||||
// component: () => import('@/views/inputSuppliesManage/redBlackRank/index.vue'),
|
||||
// meta: { title: '企业红黑榜', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/knowledgeManage',
|
||||
// name: 'knowledgeManage',
|
||||
// component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
|
||||
// meta: { title: '知识库', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/patrolCaseManage',
|
||||
// name: 'patrolCaseManage',
|
||||
// component: () => import('@/views/inputSuppliesManage/patrolCaseManage/index.vue'),
|
||||
// meta: { title: '巡查与案件管理', icon: 'Document' },
|
||||
// },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -9,12 +9,12 @@ const landsRoutes = [
|
||||
redirect: '/sub-government-affairs-service/plantPlan',
|
||||
meta: { title: '土地管理', icon: 'Grape' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/landsManage',
|
||||
name: 'landsManage',
|
||||
component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
||||
meta: { title: '土地资源信息登记', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/landsManage',
|
||||
// name: 'landsManage',
|
||||
// component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
||||
// meta: { title: '土地资源信息登记', icon: '' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/plantPlan',
|
||||
// name: 'plantPlan',
|
||||
@ -33,12 +33,12 @@ const landsRoutes = [
|
||||
component: () => import('@/views/landManage/component/landPartol/index.vue'),
|
||||
meta: { title: '土地使用巡查', icon: '' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/illegalHandle',
|
||||
// name: 'illegalHandle',
|
||||
// component: () => import('@/views/landManage/component/illegalHandle/index.vue'),
|
||||
// meta: { title: '土地案件', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/illegalHandle',
|
||||
name: 'illegalHandle',
|
||||
component: () => import('@/views/landManage/component/illegalHandle/index.vue'),
|
||||
meta: { title: '土地案件', icon: '' },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,22 +1,57 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
// import annualplanRouters from './annualplan';
|
||||
import statisticsRoutes from './statisticAnalysis';
|
||||
import landsRoutes from './lands';
|
||||
// import dictRoutes from './dict';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource',
|
||||
name: 'resourceManagement',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/landCassification',
|
||||
redirect: '/sub-government-affairs-service/resource/database/statistics',
|
||||
meta: { title: '土地资源管理', icon: 'icon-test' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/landCassification',
|
||||
name: 'landCassification',
|
||||
component: () => import('@/views/dict/component/landCassification/index.vue'),
|
||||
meta: { title: '土地分类', icon: 'Discount' },
|
||||
path: '/sub-government-affairs-service/resource/database',
|
||||
name: 'landResourceDatabase',
|
||||
redirect: '/sub-government-affairs-service/resource/database/statistics',
|
||||
meta: { title: '土地资源库', icon: 'Connection' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource/database/statistics',
|
||||
name: 'landStatistics',
|
||||
component: () => import('@/views/resource/database/Statistics.vue'),
|
||||
meta: { title: '统计数据', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource/database/map',
|
||||
name: 'landMap',
|
||||
component: () => import('@/views/resource/database/LandMap.vue'),
|
||||
meta: { title: '地块地图', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource/database/cultivated-land',
|
||||
name: 'cultivatedLand',
|
||||
component: () => import('@/views/resource/database/CultivatedLand.vue'),
|
||||
meta: { title: '耕地', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource/database/orchard',
|
||||
name: 'orchardLand',
|
||||
component: () => import('@/views/resource/database/Orchard.vue'),
|
||||
meta: { title: '园地', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource/database/forest',
|
||||
name: 'forestLand',
|
||||
component: () => import('@/views/resource/database/Forest.vue'),
|
||||
meta: { title: '林地', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/resource/database/grassland',
|
||||
name: 'grassLand',
|
||||
component: () => import('@/views/resource/database/Grassland.vue'),
|
||||
meta: { title: '草地', icon: '' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
redirect: '/sub-government-affairs-service/add-grid',
|
||||
@ -45,10 +80,7 @@ export default [
|
||||
// },
|
||||
],
|
||||
},
|
||||
// ...annualplanRouters,
|
||||
...landsRoutes,
|
||||
// ...statisticsRoutes,
|
||||
// ...dictRoutes,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
</template>
|
||||
</avue-crud>
|
||||
</section>
|
||||
<div>222</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<el-dialog :key="dialogTitle" v-model="dialogVisible" :title="dialogTitle" width="80%">
|
||||
<el-dialog :key="dialogTitle" v-model="dialogVisible" :title="dialogTitle" width="60%" append-to-body>
|
||||
<el-form :model="formData" label-width="120px" class="custom-form" :disabled="isReadonly">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
@ -108,6 +108,13 @@ import { getMemberList, addMember, updateMember, deleteMembers } from '@/apis/bu
|
||||
// import { useCoop } from '../../../../store/modules/coop';
|
||||
// const defaultFormData = useCoop().$state.data;
|
||||
|
||||
const props = defineProps({
|
||||
entId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const dialogTitle = ref('新增');
|
||||
const dialogVisible = ref(false);
|
||||
const isReadonly = ref(false);
|
||||
@ -121,7 +128,7 @@ const pageData = ref({
|
||||
total: 0,
|
||||
});
|
||||
const searchForm = ref({
|
||||
entId: '',
|
||||
entId: props.entId,
|
||||
userId: '',
|
||||
});
|
||||
const crudData = ref([]);
|
||||
@ -183,7 +190,7 @@ const crudOptions = reactive({
|
||||
{ label: '年龄', prop: 'age' },
|
||||
{ label: '联系方式', prop: 'phone' },
|
||||
{ label: '居住地行政区划', prop: 'address' },
|
||||
{ label: '种植作物', prop: 'planCrop' },
|
||||
{ label: '种植作物', prop: 'planCropName' },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
@ -204,15 +211,22 @@ const crudOptions = reactive({
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const syncAddressToForm = () => {
|
||||
const arr = formData.value.addressArr || [];
|
||||
[formData.value.provinceCode, formData.value.cityCode, formData.value.countyCode, formData.value.townCode, formData.value.villageCode] = arr;
|
||||
};
|
||||
async function getData() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
...searchForm.value,
|
||||
// ...searchForm.value,
|
||||
entId: props.entId,
|
||||
current: pageData.value.currentPage,
|
||||
size: pageData.value.pageSize,
|
||||
};
|
||||
if (!props.entId) {
|
||||
return;
|
||||
}
|
||||
const response = await getMemberList(params);
|
||||
if (response.code === 200 && response.data) {
|
||||
crudData.value = response.data.records;
|
||||
@ -231,16 +245,25 @@ async function getData() {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
getData();
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
// onMounted(() => {
|
||||
// getData();
|
||||
// });
|
||||
watch(
|
||||
() => props.entId,
|
||||
() => {
|
||||
getData();
|
||||
}
|
||||
);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
let response;
|
||||
syncAddressToForm();
|
||||
if (dialogTitle.value === '新增') {
|
||||
// 新增操作调用 saveFarmerList 接口
|
||||
formData.value.entId = props.entId;
|
||||
response = await addMember(formData.value);
|
||||
if (response.code === 200) {
|
||||
ElMessage.success('新增成功');
|
||||
@ -266,18 +289,6 @@ const handleSave = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// watch(
|
||||
// () => formData.value.addressArr,
|
||||
// (newValue) => {
|
||||
// if (newValue.length <= 3) {
|
||||
// formData.value.provinceCode = '530000';
|
||||
// formData.value.cityCode = '530900';
|
||||
// formData.value.countyCode = newValue[0];
|
||||
// formData.value.townCode = newValue[1];
|
||||
// formData.value.street = newValue[2];
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
const handleAdd = () => {
|
||||
isReadonly.value = false; // 设置为可编辑模式
|
||||
resetForm();
|
||||
@ -289,7 +300,7 @@ function handleView(row) {
|
||||
dialogTitle.value = '查看';
|
||||
isReadonly.value = true; // 设置为只读模式
|
||||
dialogVisible.value = true;
|
||||
const addressArr = [row.countyCode, row.townCode, row.street].filter(Boolean);
|
||||
const addressArr = [row.provinceCode || '', row.cityCode || '', row.countyCode || '', row.townCode || '', row.villageCode || ''];
|
||||
formData.value = {
|
||||
...row,
|
||||
addressArr,
|
||||
@ -300,7 +311,7 @@ async function handleEdit(row) {
|
||||
dialogTitle.value = '编辑';
|
||||
isReadonly.value = false;
|
||||
dialogVisible.value = true;
|
||||
const addressArr = [row.countyCode, row.townCode, row.street].filter(Boolean);
|
||||
const addressArr = [row.provinceCode || '', row.cityCode || '', row.countyCode || '', row.townCode || '', row.villageCode || ''];
|
||||
formData.value = {
|
||||
...row,
|
||||
addressArr,
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
<el-tab-pane label="信用评级" name="credit">
|
||||
<TabCreditEvaluation v-model="formData" :readonly="isReadonly" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="dialogTitle === '查看'" label="职工/社员管理" name="employee">
|
||||
<TabMember :readonly="isReadonly" />
|
||||
<el-tab-pane v-if="dialogTitle !== '新增'" label="职工/社员管理" name="employee">
|
||||
<TabMember :readonly="isReadonly" :ent-id="formData.id" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@ -173,13 +173,13 @@ const crudOptions = reactive({
|
||||
searchBtn: false,
|
||||
emptyBtn: false,
|
||||
column: [
|
||||
{ label: '农企/合作社名称', prop: 'businessName' },
|
||||
{ label: '地点', prop: 'regAddress' },
|
||||
{ label: '企业名称', prop: 'businessName' },
|
||||
{ label: '所属行政区划', prop: 'address' },
|
||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '经营产品', prop: 'businessScope' },
|
||||
{ label: '联系人', prop: 'contactPerson' },
|
||||
{ label: '联系电话', prop: 'phone' },
|
||||
{ label: '聘工人数', prop: 'villageCount' },
|
||||
// { label: '聘工人数', prop: 'villageCount' },
|
||||
{ label: '信息录入时间', prop: 'createTime' },
|
||||
{ label: '信息更新时间', prop: 'updateTime' },
|
||||
],
|
||||
|
||||
@ -0,0 +1,324 @@
|
||||
<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);
|
||||
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,329 @@
|
||||
<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,329 @@
|
||||
<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,20 @@
|
||||
<template>
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land1.png')})`">
|
||||
<!-- <h1>统计数据</h1>
|
||||
<div class="content"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-page {
|
||||
height: calc(100vh - 150px);
|
||||
background-size: cover;
|
||||
// background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,329 @@
|
||||
<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,17 @@
|
||||
<template>
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
|
||||
<!-- <h1>统计数据</h1>
|
||||
<div class="content"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-page {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,222 @@
|
||||
export const mockData = [
|
||||
{
|
||||
id: 'GM2025001',
|
||||
landName: '耿马镇允楞村耕地一号',
|
||||
area: 8.72,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县耿马镇允楞村',
|
||||
gridName: '耿马网格1',
|
||||
address: '允楞村委会旁',
|
||||
propertyName: '刘勇',
|
||||
propertyPhone: '15908761234',
|
||||
landCode: 'GM2025-E1',
|
||||
isTransfer: '否',
|
||||
transferName: '',
|
||||
transferPhone: '',
|
||||
transferContract: '',
|
||||
fillName: '赵敏',
|
||||
fillGroup: '耿马镇农业服务中心',
|
||||
fillTime: '2025-06-02 08:45:00',
|
||||
updateTime: '2025-06-05 13:20:30',
|
||||
status: '0',
|
||||
},
|
||||
{
|
||||
id: 'GM2025002',
|
||||
landName: '耿马镇复兴村耕地二号',
|
||||
area: 12.34,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '黄壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县耿马镇复兴村',
|
||||
gridName: '耿马网格A',
|
||||
address: '复兴村大路东侧',
|
||||
propertyName: '张芳',
|
||||
propertyPhone: '13607894521',
|
||||
landCode: 'GM2025-E2',
|
||||
isTransfer: '是',
|
||||
transferName: '李强',
|
||||
transferPhone: '13809123456',
|
||||
transferContract: 'HZ-GM-002.pdf',
|
||||
fillName: '王磊',
|
||||
fillGroup: '耿马镇政府',
|
||||
fillTime: '2025-06-03 09:15:00',
|
||||
updateTime: '2025-06-06 14:05:10',
|
||||
status: '1',
|
||||
},
|
||||
{
|
||||
id: 'GM2025003',
|
||||
landName: '勐撒镇城子村耕地三号',
|
||||
area: 5.6,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '壤土',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县勐撒镇城子村',
|
||||
gridName: '勐撒网格B',
|
||||
address: '城子村太阳路北侧',
|
||||
propertyName: '赵杰',
|
||||
propertyPhone: '15012346789',
|
||||
landCode: 'GM2025-E3',
|
||||
isTransfer: '否',
|
||||
transferName: '',
|
||||
transferPhone: '',
|
||||
transferContract: '',
|
||||
fillName: '孙丽',
|
||||
fillGroup: '勐撒镇农业站',
|
||||
fillTime: '2025-06-04 10:30:00',
|
||||
updateTime: '2025-06-07 16:40:45',
|
||||
status: '2',
|
||||
},
|
||||
{
|
||||
id: 'GM2025004',
|
||||
landName: '孟定镇罕宏村耕地四号',
|
||||
area: 14.28,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '砂壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县孟定镇罕宏村',
|
||||
gridName: '孟定网格C',
|
||||
address: '罕宏村公路旁',
|
||||
propertyName: '周涛',
|
||||
propertyPhone: '15876543210',
|
||||
landCode: 'GM2025-E4',
|
||||
isTransfer: '是',
|
||||
transferName: '吴静',
|
||||
transferPhone: '13987654321',
|
||||
transferContract: 'HZ-GM-004.pdf',
|
||||
fillName: '郑勇',
|
||||
fillGroup: '孟定镇人民政府',
|
||||
fillTime: '2025-06-05 11:50:00',
|
||||
updateTime: '2025-06-08 09:10:20',
|
||||
status: '0',
|
||||
},
|
||||
{
|
||||
id: 'GM2025005',
|
||||
landName: '贺派乡芒抗村耕地五号',
|
||||
area: 7.95,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '钙质红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县贺派乡芒抗村',
|
||||
gridName: '贺派网格D',
|
||||
address: '芒抗村文化站东侧',
|
||||
propertyName: '钱海',
|
||||
propertyPhone: '13765432109',
|
||||
landCode: 'GM2025-E5',
|
||||
isTransfer: '否',
|
||||
transferName: '',
|
||||
transferPhone: '',
|
||||
transferContract: '',
|
||||
fillName: '李霞',
|
||||
fillGroup: '贺派乡农村合作社',
|
||||
fillTime: '2025-06-06 08:20:00',
|
||||
updateTime: '2025-06-09 15:35:30',
|
||||
status: '1',
|
||||
},
|
||||
{
|
||||
id: 'GM2025006',
|
||||
landName: '四排山乡东坡村耕地六号',
|
||||
area: 10.5,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县四排山乡东坡村',
|
||||
gridName: '四排山网格E',
|
||||
address: '东坡村卫生室旁',
|
||||
propertyName: '吴强',
|
||||
propertyPhone: '15123459876',
|
||||
landCode: 'GM2025-E6',
|
||||
isTransfer: '否',
|
||||
transferName: '',
|
||||
transferPhone: '',
|
||||
transferContract: '',
|
||||
fillName: '赵慧',
|
||||
fillGroup: '四排山乡政府',
|
||||
fillTime: '2025-06-07 09:40:00',
|
||||
updateTime: '2025-06-10 12:25:15',
|
||||
status: '2',
|
||||
},
|
||||
{
|
||||
id: 'GM2025007',
|
||||
landName: '勐撒镇箐门口村耕地七号',
|
||||
area: 6.3,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '砂壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县勐撒镇箐门口村',
|
||||
gridName: '勐撒网格F',
|
||||
address: '箐门口村村委路口',
|
||||
propertyName: '郑飞',
|
||||
propertyPhone: '15234568790',
|
||||
landCode: 'GM2025-E7',
|
||||
isTransfer: '是',
|
||||
transferName: '孙敏',
|
||||
transferPhone: '15345678901',
|
||||
transferContract: 'HZ-GM-007.pdf',
|
||||
fillName: '钱军',
|
||||
fillGroup: '勐撒镇综治办',
|
||||
fillTime: '2025-06-08 14:10:00',
|
||||
updateTime: '2025-06-11 11:55:45',
|
||||
status: '0',
|
||||
},
|
||||
{
|
||||
id: 'GM2025008',
|
||||
landName: '孟定镇景信村耕地八号',
|
||||
area: 9.11,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '壤土',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县孟定镇景信村',
|
||||
gridName: '孟定网格G',
|
||||
address: '景信村村口',
|
||||
propertyName: '钱芳',
|
||||
propertyPhone: '15456789012',
|
||||
landCode: 'GM2025-E8',
|
||||
isTransfer: '否',
|
||||
transferName: '',
|
||||
transferPhone: '',
|
||||
transferContract: '',
|
||||
fillName: '李强',
|
||||
fillGroup: '孟定镇农业站',
|
||||
fillTime: '2025-06-09 10:05:00',
|
||||
updateTime: '2025-06-12 13:40:30',
|
||||
status: '1',
|
||||
},
|
||||
{
|
||||
id: 'GM2025009',
|
||||
landName: '耿马镇团结村耕地九号',
|
||||
area: 11.76,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县耿马镇团结村',
|
||||
gridName: '耿马网格H',
|
||||
address: '团结村大桥旁',
|
||||
propertyName: '孙明',
|
||||
propertyPhone: '15567890123',
|
||||
landCode: 'GM2025-E9',
|
||||
isTransfer: '否',
|
||||
transferName: '',
|
||||
transferPhone: '',
|
||||
transferContract: '',
|
||||
fillName: '周杰',
|
||||
fillGroup: '耿马镇政府',
|
||||
fillTime: '2025-06-10 11:30:00',
|
||||
updateTime: '2025-06-13 16:15:20',
|
||||
status: '2',
|
||||
},
|
||||
{
|
||||
id: 'GM2025010',
|
||||
landName: '贺派乡落阳村耕地十号',
|
||||
area: 7.22,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '砂壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县贺派乡落阳村',
|
||||
gridName: '贺派网格I',
|
||||
address: '落阳村学校旁',
|
||||
propertyName: '李平',
|
||||
propertyPhone: '15678901234',
|
||||
landCode: 'GM2025-E10',
|
||||
isTransfer: '是',
|
||||
transferName: '王敏',
|
||||
transferPhone: '15789012345',
|
||||
transferContract: 'HZ-GM-010.pdf',
|
||||
fillName: '张华',
|
||||
fillGroup: '贺派乡综治办',
|
||||
fillTime: '2025-06-11 13:00:00',
|
||||
updateTime: '2025-06-14 09:50:55',
|
||||
status: '0',
|
||||
},
|
||||
];
|
||||
@ -1,11 +1,3 @@
|
||||
/*
|
||||
* @Descripttion:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2022-09-18 21:24:29
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-03-20 14:24:31
|
||||
*/
|
||||
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import qiankun from 'vite-plugin-qiankun';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user