Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
4156eea27c
@ -16,6 +16,6 @@ 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_BASE_URL = 'http://192.168.18.99:8080'
|
||||
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.99:8080'
|
||||
# VITE_APP_VIST_URL = 'http://192.168.18.99'
|
||||
|
||||
@ -13,10 +13,8 @@ VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
# 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.99:8080'
|
||||
|
||||
# 本地开发接口地址
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.74:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.74:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.74:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.74:8080'
|
||||
@ -22,6 +22,7 @@
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.6.5",
|
||||
"echarts": "^5.6.0",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"element-plus": "^2.7.2",
|
||||
"js-base64": "^3.7.6",
|
||||
"lodash": "^4.17.21",
|
||||
|
||||
@ -1,23 +1,5 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
/**
|
||||
* 分页查询土地列表
|
||||
* @param {Object} params 请求参数
|
||||
* @param {string} [params.current] 每页条数
|
||||
* @param {string} [params.size] 分页
|
||||
* @param {string} [params.landType] 土地类型 传入id，土地资源管理/基础信息维护/土地类型列表查询
|
||||
* @param {string} [params.regionCode] 区域编码
|
||||
* @param {string} [params.keyword] 关键字
|
||||
* @param {string} [params.gridId] 网格id
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
export function getLandList(params) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/page',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 新增全部土地信息（POST）
|
||||
export function createLand(data = {}) {
|
||||
return request('/land-resource/landManage/v1/save', {
|
||||
@ -26,11 +8,7 @@ export function createLand(data = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存土地基础信息
|
||||
* @param {Object} [data={}] 请求数据，默认为空对象
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
// 保存土地基本信息（POST）
|
||||
export function saveBaseInfo(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/v1/saveBaseInfo',
|
||||
@ -39,11 +17,7 @@ export function saveBaseInfo(data = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存土地产权信息
|
||||
* @param {Object} [data={}] 请求数据，默认为空对象
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
// 保存土地产权信息（PUT）
|
||||
export function saveProperty(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/v1/saveProperty',
|
||||
@ -51,12 +25,24 @@ export function saveProperty(data = {}) {
|
||||
data,
|
||||
});
|
||||
}
|
||||
// 保存土地使用信息（PUT）
|
||||
export function saveUse(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/v1/saveUserInfo',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑土地信息
|
||||
* @param {Object} [data={}] 请求数据，默认为空对象，用于传递要编辑的土地信息
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
// 删除土地信息（DELETE）
|
||||
export function deleteLand(id) {
|
||||
return request({
|
||||
url: `/land-resource/landManage/delete/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
}
|
||||
|
||||
// 编辑土地信息（POST）
|
||||
export function editLand(data = {}) {
|
||||
return request({
|
||||
url: '/land-resource/landManage/edit',
|
||||
@ -65,14 +51,29 @@ export function editLand(data = {}) {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除指定 ID 的土地信息
|
||||
* @param {string|number} id 要删除的土地信息的 ID
|
||||
* @returns {Promise<Object>} 返回包含接口响应数据的 Promise
|
||||
*/
|
||||
export function deleteLand(id) {
|
||||
// 获取土地列表（GET）
|
||||
export function fetchLandList(params) {
|
||||
return request({
|
||||
url: `/land-resource/landManage/delete/${id}`,
|
||||
method: 'delete',
|
||||
url: '/land-resource/landManage/page',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取土地详情（GET）
|
||||
export function getLandById(id) {
|
||||
return request({
|
||||
url: `/land-resource/landManage/getLandInfo`,
|
||||
method: 'get',
|
||||
params: { landId: id },
|
||||
});
|
||||
}
|
||||
|
||||
// 土地信息审批（PUT）
|
||||
export function approveLand(data) {
|
||||
return request({
|
||||
url: '/land-resource/approval/approval',
|
||||
method: 'POST',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
@ -15,3 +15,17 @@ export function GetLandData(params = {}) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
//获取流转去未流转接口
|
||||
export function getOverview(params = {}) {
|
||||
return request('/land-resource/analysis/overview', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
//获取具体土地信息
|
||||
export function getSubArea(params = {}) {
|
||||
return request('/land-resource/analysis/subArea', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -11,19 +11,12 @@
|
||||
@remove-tag="$emit('remove-tag', $event)"
|
||||
@scroll="$emit('scroll', $event)"
|
||||
>
|
||||
<!-- 1. 原生 prefix 插槽 -->
|
||||
<slot name="prefix" />
|
||||
<!-- 2. 如果要实现分组插槽，也照搬 el-option-group 的结构 -->
|
||||
<template v-for="(_, name) in $slots" #[name]="scopedData">
|
||||
<slot :name="name" v-bind="scopedData"> </slot>
|
||||
</template>
|
||||
<slot name="option-group">
|
||||
<!-- 默认选项渲染 -->
|
||||
<el-option v-for="item in options" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" />
|
||||
</slot>
|
||||
<!-- 3. 其他自定义插槽，不指定 name 的默认为 default slot -->
|
||||
<slot />
|
||||
<!-- 4. 下面这几个插槽是 el-select 也常见的： -->
|
||||
<slot name="empty" />
|
||||
<slot name="no-match" />
|
||||
<slot name="footer" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
import { ref } from 'vue';
|
||||
import { createLand, deleteLand, editLand, fetchLandList, getLandById } from '@/apis/landResourceManagement/landManagement';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
export function useLandCrud(type) {
|
||||
const list = ref([]);
|
||||
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
||||
const searchForm = ref({});
|
||||
|
||||
const formVisible = ref(false);
|
||||
const formMode = ref('create');
|
||||
const formData = ref({});
|
||||
|
||||
const fetchList = async () => {
|
||||
const res = await fetchLandList({ ...searchForm.value, type });
|
||||
list.value = res.data.records || [];
|
||||
pagination.value.total = res.data.total;
|
||||
};
|
||||
|
||||
const handleDelete = async (row) => {
|
||||
await ElMessageBox.confirm('确认删除？');
|
||||
await deleteLand(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
fetchList();
|
||||
};
|
||||
|
||||
const openForm = (mode, row = {}) => {
|
||||
formMode.value = mode;
|
||||
formData.value = cloneDeep(row);
|
||||
formVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = async (data) => {
|
||||
if (formMode.value === 'create') {
|
||||
await createLand({ ...data, type });
|
||||
ElMessage.success('新增成功');
|
||||
} else {
|
||||
await editLand(data);
|
||||
ElMessage.success('更新成功');
|
||||
}
|
||||
formVisible.value = false;
|
||||
fetchList();
|
||||
};
|
||||
|
||||
return {
|
||||
list,
|
||||
pagination,
|
||||
searchForm,
|
||||
loading: ref(false),
|
||||
fetchList,
|
||||
handleDelete,
|
||||
handleSubmit,
|
||||
formVisible,
|
||||
formMode,
|
||||
formData,
|
||||
openForm,
|
||||
};
|
||||
}
|
||||
@ -1,10 +1,3 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 14:29:45
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-02-18 09:48:18
|
||||
-->
|
||||
<template>
|
||||
<el-dropdown class="layout-avatar">
|
||||
<span class="el-dropdown-link">
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
/*
|
||||
* @Description: router
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 11:48:41
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-03-26 16:14:45
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
@ -14,7 +7,6 @@ import productOperateMainRoutes from './modules/productOperateMain';
|
||||
import inputSuppliesRoutes from './modules/inputSupplies';
|
||||
import plantingAndBreedingRouter from './modules/plantingAndBreeding';
|
||||
import systemRouter from './modules/system';
|
||||
import produceGoods from './modules/produceGoods';
|
||||
|
||||
export const constantRoutes = [
|
||||
{
|
||||
@ -47,7 +39,21 @@ export const constantRoutes = [
|
||||
...resourceRouter,
|
||||
...productOperateMainRoutes,
|
||||
...inputSuppliesRoutes,
|
||||
// produceGoods,
|
||||
{
|
||||
path: '/sub-government-affairs-service/output-products',
|
||||
name: 'outputProducts',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/output-products/index',
|
||||
meta: { title: '产出品管理', icon: 'Box' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/output-products/index',
|
||||
component: () => import('@/views/outputProductsManage/index.vue'),
|
||||
name: 'outputProductsIndex',
|
||||
meta: { title: '产出品管理', icon: 'List' },
|
||||
},
|
||||
],
|
||||
},
|
||||
// ...plantingAndBreedingRouter,
|
||||
...traceRouter,
|
||||
// ...systemRouter,
|
||||
|
||||
@ -7,37 +7,50 @@ const inputSuppliesRoutes = [
|
||||
name: 'inputSuppliesManage',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/material/pesticide',
|
||||
meta: { title: '投入品管理', icon: 'FullScreen' },
|
||||
meta: { title: '农产品种植管理', icon: 'FullScreen' },
|
||||
children: [
|
||||
// 使用监管概况统计图表
|
||||
{
|
||||
path: '/sub-government-affairs-service/statistics',
|
||||
name: 'Statistics',
|
||||
component: () => import('@/views/planting-management/statistics/index.vue'),
|
||||
meta: { title: '使用监管概况统计', icon: 'PieChart' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/variety-record',
|
||||
name: 'PlantVarietyRecord',
|
||||
component: () => import('@/views/planting-management/variety-record/index.vue'),
|
||||
meta: { title: '农产品种植品种备案', icon: 'Calendar' },
|
||||
},
|
||||
{
|
||||
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' },
|
||||
},
|
||||
{
|
||||
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: 'Timer' },
|
||||
},
|
||||
{
|
||||
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/fertilizer',
|
||||
name: 'input-supplies-fertilizer',
|
||||
component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
|
||||
meta: { title: '肥料管理', icon: 'Grid' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/pesticide',
|
||||
name: 'input-supplies-pesticide',
|
||||
component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
||||
meta: { title: '农药管理', icon: 'Orange' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/material/others',
|
||||
name: 'input-supplies-others',
|
||||
component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
||||
meta: { title: '其他投入品', icon: 'TakeawayBox' },
|
||||
meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
export default {
|
||||
path: '/sub-government-affairs-service/produceGoodsMain',
|
||||
name: 'produceGoodsMain',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/produceGoods',
|
||||
meta: { title: '产出品', icon: 'Document' },
|
||||
children: [
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/produceGoods',
|
||||
// name: 'produceGoods',
|
||||
// component: () => import('@/views/produceGoods/list/index.vue'),
|
||||
// meta: { title: '产出品列表', icon: 'Document' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/produceGoods1',
|
||||
// name: 'produceGoods1',
|
||||
// component: () => import('@/views/produceGoods/test/index.vue'),
|
||||
// meta: { title: '投入品监管平台', icon: 'Document' },
|
||||
// },
|
||||
],
|
||||
};
|
||||
// export default produceGoodsRoutes;
|
||||
@ -322,7 +322,7 @@ const state = reactive({
|
||||
},
|
||||
{ label: '所属行政区域', prop: 'regionName' },
|
||||
{ label: '所属网格', prop: 'gridName' },
|
||||
{ label: '当前进度', prop: 'currentProgress' },
|
||||
{ label: '当前进度', prop: 'currentProgress', formatter: (row, column, cellValue) => `${cellValue} %` },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
|
||||
@ -9,6 +9,14 @@
|
||||
<el-button type="primary" @click="searchData">搜索</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
<div class="search-tabs">
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||
<el-tab-pane label="全部" name="all" />
|
||||
<el-tab-pane label="地膜" name="地膜" />
|
||||
<el-tab-pane label="滴灌带" name="滴灌带" />
|
||||
<el-tab-pane label="防草布" name="防草布" />
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<template #menu-left><el-button type="primary" icon="Plus" @click="openDialog">新增</el-button></template>
|
||||
<template #menu="scope">
|
||||
@ -34,8 +42,8 @@
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer custom-footer">
|
||||
<el-button @click="dialogVisible = false" class="custom-button">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm" class="custom-button">确定</el-button>
|
||||
<el-button class="custom-button" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" class="custom-button" @click="submitForm">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -93,6 +101,7 @@ const searchForm = reactive({
|
||||
|
||||
// avue-crud 实例引用
|
||||
const crudRef = ref(null);
|
||||
const activeTab = ref('all');
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([...initialTableData]);
|
||||
@ -142,7 +151,18 @@ const options = reactive({
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const handleTabChange = (tab) => {
|
||||
if (tab.props.name === 'all') {
|
||||
// 显示全部数据
|
||||
tableData.value = [...initialTableData];
|
||||
} else {
|
||||
// 根据标签名称过滤数据
|
||||
tableData.value = initialTableData.filter((item) => item.name.includes(tab.props.name) || item.remark.includes(tab.props.name));
|
||||
}
|
||||
// 重置分页
|
||||
pagination.currentPage = 1;
|
||||
pagination.total = tableData.value.length;
|
||||
};
|
||||
// 弹窗相关
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
|
||||
@ -1,137 +0,0 @@
|
||||
<template>
|
||||
<section class="custom_attrs_upload_content_lx" :style="{ '--columns': props.fileNum }">
|
||||
<el-upload
|
||||
v-if="props.type != 'view'"
|
||||
class="custom-form__uploader"
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:accept="props.accept"
|
||||
:limit="props.limit"
|
||||
:http-request="rowUploadPicture"
|
||||
:disabled="attrs_.length >= props.limit"
|
||||
>
|
||||
<el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<div v-for="item in attrs_" :key="`attr_${item.uid}`" class="attrs_content__item">
|
||||
<video v-if="isMP4(item.url)" :src="item.url" controls />
|
||||
<img v-else :src="item.url" :alt="item.name" @click="handlePreview(i)" />
|
||||
<el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.uid)"><CircleCloseFilled /></el-icon>
|
||||
</div>
|
||||
<el-image-viewer v-if="previewShow" :url-list="srcList" :initial-index="index" @close="previewShow = false" />
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import { CommonUpload } from '@/apis';
|
||||
|
||||
const emit = defineEmits(['update:attrs']);
|
||||
const props = defineProps({
|
||||
accept: {
|
||||
type: String,
|
||||
default: 'image/*',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'view',
|
||||
},
|
||||
attrs: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
fileNum: {
|
||||
type: Number,
|
||||
default: 4,
|
||||
},
|
||||
});
|
||||
const attrs_ = ref([]);
|
||||
const srcList = ref([]);
|
||||
srcList.value = attrs_.value.map((item) => item.url);
|
||||
watch(
|
||||
() => props.attrs,
|
||||
(val) => {
|
||||
attrs_.value = val;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const index = ref(0);
|
||||
const previewShow = ref(false);
|
||||
|
||||
function handleClearAttr(uid) {
|
||||
attrs_.value = attrs_.value.filter((item) => item.uid !== uid);
|
||||
emit('update:attrs', attrs_.value);
|
||||
}
|
||||
async function rowUploadPicture({ file }) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
const res = await CommonUpload(formData);
|
||||
if (res.code === 200) {
|
||||
attrs_.value.push({
|
||||
...res.data,
|
||||
uid: 'id_' + Date.now(),
|
||||
});
|
||||
emit('update:attrs', attrs_.value);
|
||||
}
|
||||
}
|
||||
function isMP4(filePath) {
|
||||
// 使用正则表达式检查文件路径是否以 .mp4 结尾（不区分大小写）
|
||||
const regex = /\.mp4$/i;
|
||||
return regex.test(filePath);
|
||||
}
|
||||
function handlePreview(i) {
|
||||
previewShow.value = false;
|
||||
nextTick(() => {
|
||||
index.value = i;
|
||||
previewShow.value = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.custom_attrs_upload_content_lx {
|
||||
display: grid;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: repeat(var(--columns), 1fr);
|
||||
box-sizing: border-box;
|
||||
gap: 20px;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.attrs_content__item {
|
||||
aspect-ratio: 1 / 1;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
img,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.clear_btn {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
font-size: 18px;
|
||||
color: #f15c5c;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:hover {
|
||||
.clear_btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -63,6 +63,30 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 种植信息登记 -->
|
||||
<div>
|
||||
<p class="form-group">种植信息登记</p>
|
||||
<el-form :model="plantingForm" disabled label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备案种植作物" prop="recordedCrop">
|
||||
<el-input v-model="plantingForm.recordedCrop" placeholder="请输入备案种植作物" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实际种植作物" prop="actualCrop">
|
||||
<el-input v-model="plantingForm.actualCrop" placeholder="请输入实际种植作物" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="与备案相符" prop="isCropMatch">
|
||||
<el-radio-group v-model="plantingForm.isCropMatch">
|
||||
<el-radio value="1">是</el-radio>
|
||||
<el-radio value="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 巡查信息登记，只有进行过结果登记的才显示 -->
|
||||
<template v-if="dialogTitle !== '查看' && dialogTitle !== '详情' && dialogTitle !== '新增' && dialogTitle !== '编辑'">
|
||||
<p class="form-group">巡查信息登记</p>
|
||||
@ -218,6 +242,14 @@ const illegalForm = ref({
|
||||
img: '', // 违法图片
|
||||
status: '', // 状态
|
||||
});
|
||||
const plantingForm = ref({
|
||||
id: '',
|
||||
inspectionId: '', // 任务ID
|
||||
inspectionTaskName: '', // 巡查任务名称
|
||||
recordedCrop: '甘蔗', // 备案种植作物
|
||||
isCropMatch: '1', // 种植作物与备案作物是否一致
|
||||
actualCrop: '甘蔗', // 实际种植作物
|
||||
});
|
||||
const illegalForms = ref([{ ...illegalForm.value }]);
|
||||
const crudData = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
@ -13,9 +13,20 @@
|
||||
value-key="landType"
|
||||
:clearable="true"
|
||||
/> -->
|
||||
<el-select v-model="query.landType" placeholder="选择土地类型" clearable style="width: 200px; margin-left: 8px">
|
||||
<!-- <el-select v-model="query.landType" placeholder="选择土地类型" clearable style="width: 200px; margin-left: 8px">
|
||||
<el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
<el-tree-select
|
||||
v-model="query.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 200px; margin-left: 8px"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
<el-input v-model="query.keyword" placeholder="关键词搜索" style="margin-left: 8px; width: 200px" @keyup.enter="handleSearch" />
|
||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button @click="resetSearch"> 重置 </el-button>
|
||||
@ -41,9 +52,16 @@
|
||||
<el-input v-model="formDataBasic.landName" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地类型" prop="landType">
|
||||
<el-select v-model="formDataBasic.landType" placeholder="选择土地类型" clearable>
|
||||
<el-option v-for="item in landTypeOptions" :key="item.id" :label="item.landType" :value="item.id" />
|
||||
</el-select>
|
||||
<el-tree-select
|
||||
v-model="formDataBasic.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="具体位置" prop="address">
|
||||
<el-input v-model="formDataBasic.address" placeholder="请输入具体位置" />
|
||||
@ -129,7 +147,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, nextTick } from 'vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { getLandList, createLand, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
|
||||
import { fetchLandList, createLand, saveBaseInfo, saveProperty, editLand, deleteLand } from '@/apis/landResourceManagement/landManagement';
|
||||
import { CommonUpload } from '@/apis/index';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import request from '@/utils/axios';
|
||||
@ -168,6 +186,14 @@ const query = ref({
|
||||
// 表格数据
|
||||
const data = ref([]);
|
||||
const landTypeOptions = ref([]);
|
||||
const treeProps = ref({
|
||||
value: 'id',
|
||||
label: 'landType',
|
||||
children: 'children',
|
||||
// disabled: (data) => {
|
||||
// return data.children && data.children.length > 0;
|
||||
// },
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const formDataBasic = ref({
|
||||
@ -203,7 +229,7 @@ const option = reactive({
|
||||
{ label: '地块名称', prop: 'landName' },
|
||||
{ label: '所属网格', prop: 'gridName' },
|
||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '土地类型', prop: 'landTypeName' },
|
||||
{ label: '土地类型', prop: 'fullLandType' },
|
||||
{ label: '所属行政区域', prop: 'fullRegionName' },
|
||||
{ label: '具体位置', prop: 'address' },
|
||||
{ label: '产权人姓名', prop: 'propertyName' },
|
||||
@ -213,16 +239,16 @@ const option = reactive({
|
||||
{ label: '信息更新时间', prop: 'updateTime' },
|
||||
],
|
||||
actions: [
|
||||
// {
|
||||
// name: '查看',
|
||||
// icon: 'view',
|
||||
// event: ({ row }) => handleView(row),
|
||||
// },
|
||||
// {
|
||||
// name: '编辑',
|
||||
// icon: 'edit',
|
||||
// event: ({ row }) => handleEdit(row),
|
||||
// },
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => handleView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => handleEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
@ -238,7 +264,7 @@ const option = reactive({
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getLandList(query.value);
|
||||
const res = await fetchLandList(query.value);
|
||||
const { current, size, total, records } = res.data;
|
||||
data.value = records;
|
||||
pageData.value = {
|
||||
@ -257,7 +283,7 @@ const fetchLandTypeData = async () => {
|
||||
try {
|
||||
const response = await request.get('/land-resource/baseInfo/landTree', { params: { status: '1' } });
|
||||
if (response.code === 200) {
|
||||
landTypeOptions.value = extractLeafNodes(response.data);
|
||||
landTypeOptions.value = response.data;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取土地类型数据失败', error);
|
||||
|
||||
@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-dialog v-model="isShowVal" title="规划记录" width="1000" center @closed="stageClose">
|
||||
<avue-crud
|
||||
ref="listRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<!-- <el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button> -->
|
||||
</template>
|
||||
|
||||
<template #planId="{ row }">
|
||||
{{ row.planName }}
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getPlantingStage, savePlantingStage, editPlantingStage, delPlantingStage, getPlanHistory } from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rowOriginal: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const listRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
// console.info('loadList', props);
|
||||
getList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
loadList();
|
||||
// console.info('onMounted', props);
|
||||
});
|
||||
watch(
|
||||
() => (props.isShow, props.rowOriginal),
|
||||
() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
console.info('watch', props);
|
||||
loadList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
label: '年度计划',
|
||||
prop: 'planId',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'planName',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/annualManage/page`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{ label: '供应商', prop: 'seedSupplier', addDisplay: false, editDisplay: true },
|
||||
{ label: '种植日期', prop: 'planDate', addDisplay: true, editDisplay: true },
|
||||
{ label: '种植产物', prop: 'crop', addDisplay: false, editDisplay: false },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
async function getList() {
|
||||
stageState.loading = true;
|
||||
getPlanHistory({ ...stageState.query, landId: currentRow.landId })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
stageState.data = records || [];
|
||||
stageState.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
stageState.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
stageState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageRowEdit = (row) => {
|
||||
listRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
if (!currentRow.landId) {
|
||||
app.$message.error('请选择种植规划');
|
||||
return;
|
||||
}
|
||||
listRef.value.rowAdd();
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.landId = currentRow.landId;
|
||||
console.info('stageRowSave', row);
|
||||
savePlantingStage({ ...row })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
editPlantingStage(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
const stageClose = () => {
|
||||
isShowVal.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<div class="inputs-list-warp">
|
||||
<el-row v-if="!disabledVal" :gutter="20">
|
||||
<template v-for="(n, index) in inputsList" :key="index">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="投入品" label-width="80px">
|
||||
<el-cascader v-model="n.id" :options="materialTypes" :props="{ value: 'id', label: 'dataName', checkStrictly: true }" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-form-item label="预估投入量" label-width="100px">
|
||||
<div class="right-warp">
|
||||
<div class="right-item">
|
||||
<el-input-number v-model="n.num" :min="1">
|
||||
<template #suffix>
|
||||
<span>{{ n.unit }}</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</div>
|
||||
<div class="right-item right-do">
|
||||
<el-icon :size="'20'" :color="color" @click="addVal">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<el-icon :size="'20'" :color="color" @click="delVal(index)">
|
||||
<Remove />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
<el-row v-else :gutter="20" class="read-only">
|
||||
<template v-for="(m, indexm) in listData" :key="indexm">
|
||||
<el-col :span="16">
|
||||
<el-cascader
|
||||
v-model="m.id"
|
||||
:options="materialTypes"
|
||||
style="width: 150px"
|
||||
disabled
|
||||
:props="{ value: 'id', label: 'dataName', checkStrictly: true }"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>{{ m.num }}</span>
|
||||
<span>{{ m.unit }}</span>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import inputSuppliesApis from '@/apis/inputSuppliesApi';
|
||||
import { randomNumber } from '@/utils/index';
|
||||
import { isEmpty } from '@/utils';
|
||||
|
||||
const app = useApp();
|
||||
const emit = defineEmits(['']);
|
||||
|
||||
const props = defineProps({
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const { getMaterailTypes } = inputSuppliesApis;
|
||||
let inputsList = reactive([]);
|
||||
const materialTypes = reactive([]);
|
||||
|
||||
async function getTypes() {
|
||||
let res = await getMaterailTypes();
|
||||
if (res.code == 200) {
|
||||
materialTypes.push(...res.data);
|
||||
console.log('types', materialTypes);
|
||||
}
|
||||
}
|
||||
|
||||
let listData = reactive([]);
|
||||
let disabledVal = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
getTypes();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => (props.isDisabled, props.list),
|
||||
() => {
|
||||
disabledVal.value = props.isDisabled;
|
||||
inputsList = props.list.length > 0 ? props.list : reactive([{ id: '', num: 1, unit: 'ml' }]);
|
||||
listData = [];
|
||||
listData = props.list;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
const addVal = () => {
|
||||
// let Id = randomNumber(20);
|
||||
// console.info('生成id', Id);
|
||||
inputsList.push({ id: '', num: 1, unit: 'ml' });
|
||||
};
|
||||
|
||||
const delVal = (index) => {
|
||||
if (index != undefined) {
|
||||
if (inputsList.length < 2) {
|
||||
return app.$message.error('请保留至少一个投入品');
|
||||
}
|
||||
inputsList.shift(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const saveList = () => {
|
||||
let list = [];
|
||||
if (inputsList.length < 2) {
|
||||
if (inputsList[0].id == '' || !inputsList[0].id) {
|
||||
return app.$message.error('请选择投入品');
|
||||
}
|
||||
}
|
||||
list = inputsList.filter((m) => {
|
||||
return !isEmpty(m.id);
|
||||
});
|
||||
|
||||
return list;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
saveList,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.inputs-list-warp {
|
||||
border-radius: 4px;
|
||||
background-color: #ffffff;
|
||||
.right-warp {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
.right-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.right-do {
|
||||
padding-left: 16px;
|
||||
::v-deep() {
|
||||
.el-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #e6e6e6;
|
||||
margin: 0 16px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.read-only {
|
||||
font-size: 12px !important;
|
||||
::v-deep() {
|
||||
.el-input__wrapper {
|
||||
box-shadow: 0 0 0 0 red !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-input__suffix {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,358 +0,0 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-dialog v-model="isShowVal" title="种植阶段详情" width="1000" center @closed="stageClose">
|
||||
<avue-crud
|
||||
ref="stateCrudRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button>
|
||||
</template>
|
||||
|
||||
<template #stage="{ row }">
|
||||
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
|
||||
</template>
|
||||
|
||||
<template #workTime="{ row }">
|
||||
{{ row.operationDate }}
|
||||
</template>
|
||||
|
||||
<template #input-form="{ row }">
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<inputs ref="refinputs" :list="stageState.currentRow.input" :is-disabled="false"></inputs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #input="{ row }">
|
||||
<div style="display: flex; flex-direction: column; height: 100%">
|
||||
<inputs ref="refinputs" :is-disabled="true" :list="row.input"></inputs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getPlantingStage, savePlantingStage, editPlantingStage, delPlantingStage } from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
import inputs from '../component/inputsList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rowOriginal: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
let refinputs = ref(null);
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const stateCrudRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: 0, label: '苗期' },
|
||||
{ value: 1, label: '花果期' },
|
||||
{ value: 2, label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const handleWorkChange = async (value, form, done) => {
|
||||
stageState.form.workTime = value.item?.workTime || '';
|
||||
};
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
// console.info('loadList', props);
|
||||
getStageList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
loadList();
|
||||
// console.info('onMounted', props);
|
||||
});
|
||||
watch(
|
||||
() => (props.isShow, props.rowOriginal),
|
||||
() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
console.info('watch', props);
|
||||
loadList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
stage: null,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
group: [
|
||||
{
|
||||
prop: 'inputs',
|
||||
label: '投入品',
|
||||
column: [
|
||||
{
|
||||
prop: 'input',
|
||||
span: 24,
|
||||
labelWidth: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
column: [
|
||||
{
|
||||
prop: 'input',
|
||||
label: '投入品',
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
span: 24,
|
||||
labelWidth: 0,
|
||||
},
|
||||
{
|
||||
label: '所属阶段',
|
||||
prop: 'stage',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: stageOptions,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
editDisplay: true,
|
||||
addDisplay: true,
|
||||
},
|
||||
{
|
||||
label: '作业类型',
|
||||
prop: 'workId',
|
||||
type: 'select',
|
||||
search: false,
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'workType',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/planManage/workPage?current=1&size=999`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: { required: true, message: '请选择', trigger: 'blur' },
|
||||
change: handleWorkChange,
|
||||
editDisplay: true,
|
||||
addDisplay: true,
|
||||
},
|
||||
{
|
||||
label: '作业时间',
|
||||
prop: 'workTime',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
addDisabled: true,
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => stageRowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
async function getStageList() {
|
||||
stageState.loading = true;
|
||||
getPlantingStage({ ...stageState.query, planId: currentRow.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
// stageState.data = records || [];
|
||||
stageState.data =
|
||||
records.map((m) => {
|
||||
return { ...m, input: m.input ? JSON.parse(m.input) : [] };
|
||||
}) || [];
|
||||
stageState.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
stageState.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
stageState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageRowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.info('删除');
|
||||
delPlantingStage({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
getStageList();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const stageRowEdit = (row) => {
|
||||
stageState.currentRow = row;
|
||||
stateCrudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
stageState.currentRow = {};
|
||||
if (!currentRow.id) {
|
||||
app.$message.error('请选择种植规划');
|
||||
return;
|
||||
}
|
||||
stateCrudRef.value.rowAdd({});
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.planId = currentRow.id;
|
||||
row.input = JSON.stringify(refinputs.value ? refinputs.value.saveList() : []);
|
||||
console.info('stageRowSave', row);
|
||||
savePlantingStage({ ...row })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getStageList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
row.input = JSON.stringify(refinputs.value ? refinputs.value.saveList() : []);
|
||||
editPlantingStage(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
getStageList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
const stageClose = () => {
|
||||
isShowVal.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -1,486 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.pageData"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<el-button type="primary" icon="Upload" @click="onImport">导入</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
|
||||
<template #landClassificationType="{ row }">
|
||||
<el-tag type="primary" :hit="true" size="small" effect="plain">
|
||||
{{ landClassificationType[row.landClassificationType] || '未知' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #planDate-form="{ row, column, value }">
|
||||
<el-date-picker
|
||||
v-model="infoFirst.planDate"
|
||||
type="date"
|
||||
placeholder="请选择种植日期"
|
||||
:disabled-date="disabledDate"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY/MM/DD"
|
||||
:size="size"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #planId="{ row }">
|
||||
{{ row.planName }}
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<stageList :is-show="stageShow" :row-original="currentRowVal" @close="stageHide"></stageList>
|
||||
<historyList :is-show="historyShow" :row-original="currentRowVal" @close="historyHide"></historyList>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {
|
||||
getPlanList,
|
||||
savePlan,
|
||||
exportPlan,
|
||||
editAlan,
|
||||
delPlan,
|
||||
getPlantingStage,
|
||||
savePlantingStage,
|
||||
editPlantingStage,
|
||||
delPlantingStage,
|
||||
} from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
import stageList from '../../component/plantPlan/component/stage.vue';
|
||||
import historyList from '../../component/plantPlan/component/history.vue';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const stateCrudRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
let stageShow = ref(false);
|
||||
let currentRowVal = reactive({});
|
||||
let historyShow = ref(false);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
rowKey: 'landId',
|
||||
searchSpan: 6,
|
||||
searchGutter: 80,
|
||||
searchMenuPosition: 'center',
|
||||
column: [
|
||||
{
|
||||
label: '地块名',
|
||||
type: 'input',
|
||||
prop: 'landName',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
width: '180px',
|
||||
showOverflowTooltip: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{ label: '地址', prop: 'address', width: '240px', showOverflowTooltip: true, addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '种植产物',
|
||||
type: 'input',
|
||||
prop: 'crop',
|
||||
search: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '产权人',
|
||||
type: 'input',
|
||||
prop: 'owner',
|
||||
search: true,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '农用地分类',
|
||||
prop: 'landClassificationType',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '面积',
|
||||
prop: 'area',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{ label: '坐标', prop: 'coordinate', width: '120px', showOverflowTooltip: true, addDisplay: false, editDisplay: false },
|
||||
{
|
||||
label: '土壤类型',
|
||||
prop: 'soilType',
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '种子供应商',
|
||||
prop: 'seedSupplier',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '年度计划',
|
||||
prop: 'planId',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'planName',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/annualManage/page`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '种植日期',
|
||||
prop: 'planDate',
|
||||
width: '180px',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
validator: (rule, value, callback) => {
|
||||
if (!infoFirst.value.planDate || infoFirst.value.planDate == '') {
|
||||
callback(new Error('请选择'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
name: '种植阶段',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => toStage(row),
|
||||
},
|
||||
{
|
||||
name: '规划记录',
|
||||
icon: 'Memo',
|
||||
event: ({ row }) => toHistory(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const landClassificationType = reactive({
|
||||
0: '耕地',
|
||||
1: '果园',
|
||||
2: '茶园',
|
||||
3: '其他园地',
|
||||
4: '林地',
|
||||
5: '草地',
|
||||
6: '其他农用地',
|
||||
7: '农村宅基地',
|
||||
});
|
||||
|
||||
let infoFirst = ref({
|
||||
planId: '', //种植规划主键id
|
||||
planDate: '',
|
||||
});
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
getPlanList(state.query)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
state.data = records;
|
||||
state.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
state.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
// 页数
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 条数
|
||||
const sizeChange = (size) => {
|
||||
state.query.size = size;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const searchChange = (params, done) => {
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.query.current = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const refreshChange = () => {
|
||||
loadData();
|
||||
app.$message.success('刷新成功');
|
||||
};
|
||||
|
||||
// 选择
|
||||
const selectionChange = (rows) => {
|
||||
state.selection = rows;
|
||||
console.info('selectionChange', state.selection);
|
||||
};
|
||||
|
||||
const handleIds = () => {
|
||||
let datalist = state.selection.map((m) => {
|
||||
return { landId: m.landId, landName: m.landName };
|
||||
});
|
||||
|
||||
let selectIdlist = uniqueObjects(datalist, 'landId');
|
||||
let selectIdsVal = selectIdlist.map((n) => {
|
||||
return n.landId;
|
||||
});
|
||||
|
||||
return selectIdsVal.toString() || '';
|
||||
};
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
console.info('新增', infoFirst.value);
|
||||
row.planDate = infoFirst.value.planDate || '';
|
||||
row.landId = handleIds();
|
||||
savePlan(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
console.info('编辑', row);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
console.info('更新');
|
||||
editAlan(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const rowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.info('删除');
|
||||
delPlan({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
// done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const toStage = (row) => {
|
||||
currentRowVal = row;
|
||||
stageShow.value = true;
|
||||
console.info('toStage', currentRowVal);
|
||||
};
|
||||
|
||||
//导入
|
||||
const onImport = () => {};
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
if (isEmpty(state.data)) {
|
||||
app.$message.error('当前暂时没有可供导出的数据！');
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const fileName = '种植规划明细表';
|
||||
exportPlan(state.query)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||
app.$message.success('导出成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error('导出失败！');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
const onAdd = () => {
|
||||
infoFirst.value.planDate = infoFirst.value.planId = '';
|
||||
let ids = handleIds();
|
||||
if (ids == '') {
|
||||
return app.$message.error('先选择土地！');
|
||||
}
|
||||
crudRef.value.rowAdd();
|
||||
};
|
||||
|
||||
function uniqueObjects(arr, key) {
|
||||
return arr.reduce((acc, current) => {
|
||||
const duplicate = acc.find((element) => element[key] === current[key]);
|
||||
if (!duplicate) {
|
||||
acc.push(current);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
}
|
||||
|
||||
//种植阶段相关
|
||||
const rowClick = (row) => {
|
||||
state.currentRow = { ...row };
|
||||
console.info('rowClick', state.currentRow);
|
||||
};
|
||||
|
||||
const stageHide = () => {
|
||||
stageShow.value = false;
|
||||
};
|
||||
|
||||
const toHistory = (row) => {
|
||||
currentRowVal = row;
|
||||
historyShow.value = true;
|
||||
};
|
||||
const historyHide = () => {
|
||||
historyShow.value = false;
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pageData"
|
||||
:data="crudData"
|
||||
:option="crudOptions"
|
||||
:table-loading="loading"
|
||||
@refresh-change="handleRefresh"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<template #search>
|
||||
<div class="custom-search">
|
||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
||||
<el-button @click="resetSearch"> 重置 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <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="120px" class="form-item">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24"><p class="form-title">基础信息</p></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="农产品名称" prop="productName">
|
||||
<el-input v-model="formData.productName" placeholder="请输入网格名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="面积（亩）" prop="area">
|
||||
<el-input v-model="formData.area" 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="contactInfo">
|
||||
<el-input v-model="formData.contactInfo" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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="gridName">
|
||||
<el-input v-model="formData.gridName" placeholder="请输入网格名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24"><p class="form-title">品质信息</p></el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="采收时间" prop="harvestTime">
|
||||
<el-input v-model="formData.harvestTime" placeholder="请输入采收时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地块总产（公斤）" prop="totalYield">
|
||||
<el-input v-model="formData.totalYield" placeholder="请输入地块总产" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格（元/公斤）" prop="price">
|
||||
<el-input v-model="formData.price" placeholder="请输入价格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="亩产（公斤）" prop="yieldPerMu">
|
||||
<el-input v-model="formData.yieldPerMu" placeholder="请输入亩产" />
|
||||
</el-form-item>
|
||||
<el-form-item label="品质" prop="quality">
|
||||
<el-input v-model="formData.quality" placeholder="请输入品质" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产值（元）" prop="outputValue">
|
||||
<el-input v-model="formData.outputValue" placeholder="请输入产值" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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';
|
||||
|
||||
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 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,
|
||||
searchBtn: false,
|
||||
emptyBtn: false,
|
||||
height: 'calc(100vh - 340px)',
|
||||
column: [
|
||||
{ label: '农产品名称', prop: 'productName', width: 150 },
|
||||
{ label: '地块', prop: 'landName' },
|
||||
{ label: '面积（亩）', prop: 'area', formatter: (row, cloumn, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||
{ label: '网格', prop: 'gridName' },
|
||||
{ label: '行政区划', prop: 'gridAreaName' },
|
||||
{ label: '姓名', prop: 'name' },
|
||||
{ label: '联系方式', prop: 'contactInfo' },
|
||||
{ label: '采收时间', prop: 'harvestTime' },
|
||||
{ label: '亩产（公斤）', prop: 'yieldPerMu', width: 80 },
|
||||
{ label: '地块总产（公斤）', prop: 'totalYield' },
|
||||
{ label: '品质', prop: 'quality' },
|
||||
{ label: '价格（元/公斤）', prop: 'price' },
|
||||
{ label: '产值（元）', prop: 'outputValue' },
|
||||
],
|
||||
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 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) => {
|
||||
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';
|
||||
import { mockData } from './output';
|
||||
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 : [];
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
crudData.value = mockData;
|
||||
pageData.value.total = crudData.value.length;
|
||||
};
|
||||
|
||||
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">
|
||||
: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 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
}
|
||||
.custom-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.el-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,122 @@
|
||||
export const mockData = [
|
||||
{
|
||||
productName: '甘蔗',
|
||||
landName: '勐撒坝子南片',
|
||||
area: 28,
|
||||
gridName: '勐撒村第三网格',
|
||||
gridAreaName: '耿马县勐撒镇勐撒村',
|
||||
name: '岩温罕',
|
||||
contactInfo: '183****8823',
|
||||
harvestTime: '2023-12-15',
|
||||
yieldPerMu: 5800,
|
||||
totalYield: 162400,
|
||||
quality: '优等',
|
||||
price: 0.48,
|
||||
outputValue: 77952,
|
||||
},
|
||||
{
|
||||
productName: '茶叶（普洱生茶）',
|
||||
landName: '芒洪古茶山',
|
||||
area: 6.5,
|
||||
gridName: '芒洪村第一网格',
|
||||
gridAreaName: '耿马县芒洪拉祜族布朗族乡',
|
||||
name: '李秀兰',
|
||||
contactInfo: '138****4671',
|
||||
harvestTime: '2023-04-08',
|
||||
yieldPerMu: 210,
|
||||
totalYield: 1365,
|
||||
quality: '特级',
|
||||
price: 85,
|
||||
outputValue: 116025,
|
||||
},
|
||||
{
|
||||
productName: '澳洲坚果',
|
||||
landName: '四排山基地',
|
||||
area: 35,
|
||||
gridName: '翁达村第五网格',
|
||||
gridAreaName: '耿马县四排山乡翁达村',
|
||||
name: '赵卫东',
|
||||
contactInfo: '159****3098',
|
||||
harvestTime: '2023-09-20',
|
||||
yieldPerMu: 320,
|
||||
totalYield: 11200,
|
||||
quality: '良好',
|
||||
price: 18.5,
|
||||
outputValue: 207200,
|
||||
},
|
||||
{
|
||||
productName: '橡胶',
|
||||
landName: '河外胶林',
|
||||
area: 42,
|
||||
gridName: '河外村第二网格',
|
||||
gridAreaName: '耿马县孟定镇河外村',
|
||||
name: '叶嘎',
|
||||
contactInfo: '187****5546',
|
||||
harvestTime: '2023-11-01',
|
||||
yieldPerMu: 95,
|
||||
totalYield: 3990,
|
||||
quality: '中等',
|
||||
price: 10.2,
|
||||
outputValue: 40698,
|
||||
},
|
||||
{
|
||||
productName: '咖啡（阿拉比卡）',
|
||||
landName: '福荣坡地',
|
||||
area: 15,
|
||||
gridName: '福荣村第四网格',
|
||||
gridAreaName: '耿马县勐永镇福荣村',
|
||||
name: '艾叶',
|
||||
contactInfo: '152****7720',
|
||||
harvestTime: '2023-02-18',
|
||||
yieldPerMu: 280,
|
||||
totalYield: 4200,
|
||||
quality: '优等',
|
||||
price: 26.8,
|
||||
outputValue: 112560,
|
||||
},
|
||||
{
|
||||
productName: '火龙果（红心）',
|
||||
landName: '允捧大棚区',
|
||||
area: 8,
|
||||
gridName: '允捧村第一网格',
|
||||
gridAreaName: '耿马县孟定镇允捧村',
|
||||
name: '玉罕香',
|
||||
contactInfo: '135****9924',
|
||||
harvestTime: '2023-07-12',
|
||||
yieldPerMu: 1800,
|
||||
totalYield: 14400,
|
||||
quality: '特级',
|
||||
price: 7.5,
|
||||
outputValue: 108000,
|
||||
},
|
||||
{
|
||||
productName: '香蕉（威廉斯）',
|
||||
landName: '班幸河谷',
|
||||
area: 20,
|
||||
gridName: '班幸村第四网格',
|
||||
gridAreaName: '耿马县孟定镇班幸村',
|
||||
name: '岩峰',
|
||||
contactInfo: '158****3367',
|
||||
harvestTime: '2023-06-30',
|
||||
yieldPerMu: 3200,
|
||||
totalYield: 64000,
|
||||
quality: '良好',
|
||||
price: 3.1,
|
||||
outputValue: 198400,
|
||||
},
|
||||
{
|
||||
productName: '砂仁（中药材）',
|
||||
landName: '大浪坝林下',
|
||||
area: 18,
|
||||
gridName: '大浪坝村第三网格',
|
||||
gridAreaName: '耿马县勐简乡大浪坝村',
|
||||
name: '田志强',
|
||||
contactInfo: '139****7189',
|
||||
harvestTime: '2023-09-08',
|
||||
yieldPerMu: 65,
|
||||
totalYield: 1170,
|
||||
quality: '中等',
|
||||
price: 42,
|
||||
outputValue: 49140,
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="custom-page"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-dialog :v-model="visible" :title="dialogTitle" width="600px" destroy-on-close :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="formModel" :rules="rules" :disabled="isView" label-width="100px">
|
||||
<el-form-item label="地块名称" prop="name">
|
||||
<el-input v-model="formModel.name" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属区域" prop="areaCode">
|
||||
<AreaSelect v-model="formModel.areaCode" :emit-path="false" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="面积（亩）" prop="area">
|
||||
<el-input-number v-model="formModel.area" :min="0" placeholder="请输入面积" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图像文件" prop="image">
|
||||
<FileUploader v-model="formModel.image" :limit="1" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formModel.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button v-if="!isView" type="primary" :loading="submitting" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create', // 'create' | 'edit' | 'view'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '', // 地块类型：grass / forest / field
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'submit']);
|
||||
|
||||
const formRef = ref(null);
|
||||
const formModel = ref({});
|
||||
const submitting = ref(false);
|
||||
|
||||
const isView = computed(() => props.mode === 'view');
|
||||
const dialogTitle = computed(() => {
|
||||
switch (props.mode) {
|
||||
case 'create':
|
||||
return '新增地块';
|
||||
case 'edit':
|
||||
return '编辑地块';
|
||||
case 'view':
|
||||
return '查看地块';
|
||||
default:
|
||||
return '地块信息';
|
||||
}
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
areaCode: [{ required: true, message: '请选择区域', trigger: 'change' }],
|
||||
area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
formModel.value = { ...props.initialData };
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function close() {
|
||||
emit('update:visible', false);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!formRef.value) return;
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
emit('submit', { ...formModel.value });
|
||||
} catch (err) {
|
||||
console.warn('表单校验失败', err);
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="land-page">
|
||||
<SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||
<!-- <el-tab-pane label="待提交" name="-1" /> -->
|
||||
<el-tab-pane label="待审核" name="0" />
|
||||
<el-tab-pane label="已通过" name="1" />
|
||||
<el-tab-pane label="已驳回" name="2" />
|
||||
</el-tabs>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model:page="pagination"
|
||||
:data="crudData"
|
||||
:option="crudOptions"
|
||||
:table-loading="loading"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="crudOptions.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import SearchBar from './SearchBar.vue';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import FormDialog from './FormDialog.vue';
|
||||
|
||||
const loading = ref(false);
|
||||
const visible = ref(false);
|
||||
|
||||
const searchForm = ref({});
|
||||
|
||||
const activeTab = ref('1');
|
||||
const handleTabChange = ({ name }) => {
|
||||
// searchForm.value.landStatus = Number(activeTab.value);
|
||||
getData();
|
||||
};
|
||||
|
||||
const pagination = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const crudData = ref([]);
|
||||
const crudOptions = reactive({
|
||||
...CRUD_OPTIONS,
|
||||
header: 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: 'fullRegionName', width: 160 },
|
||||
{ label: '所属网格', prop: 'gridName', width: 90 },
|
||||
{ label: '具体位置', prop: 'address', width: 160 },
|
||||
{ label: '种植作物', prop: 'CropName' },
|
||||
{ label: '作物品种', prop: 'CropVarietyName' },
|
||||
{ label: '种植开始时间', prop: 'plantingStartTime' },
|
||||
{ label: '种植结束时间', prop: 'plantingEndTime' },
|
||||
{ label: '经营主体名称', prop: 'businessSubjectName', width: 130 },
|
||||
{ label: '账号（手机号）', prop: ' account', width: 130 },
|
||||
{ label: '信息填报时间', prop: 'fillTime', width: 110 },
|
||||
{ label: '信息审核时间', prop: 'auditTime', width: 110 },
|
||||
],
|
||||
});
|
||||
const handleSearch = () => {};
|
||||
const handleReset = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
// 调用接口获取数据
|
||||
// 处理数据
|
||||
// 更新 list 和 total
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="custom-page-search">
|
||||
<el-form :model="search" inline label-width="100px">
|
||||
<el-form-item label="关键词搜索" prop="keyword">
|
||||
<el-input v-model="search.keyword" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="" label-width="0px">
|
||||
<AreaCascader v-model:region-code="search.regionCode" v-model:grid-id="search.id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种植作物" prop="planCrop">
|
||||
<url-select
|
||||
v-model="search.planCrop"
|
||||
url="/land-resource/crops/page"
|
||||
:params="{ status: '0' }"
|
||||
label-key="cropsName"
|
||||
value-key="id"
|
||||
placeholder="请选择种植作物"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearch">搜索</el-button>
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch, toRefs } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
search: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:search', 'search', 'reset']);
|
||||
|
||||
const search = reactive({ ...props.search });
|
||||
|
||||
watch(
|
||||
search,
|
||||
(val) => {
|
||||
emit('update:search', { ...val });
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const onSearch = () => {
|
||||
emit('search');
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
Object.keys(search).forEach((key) => {
|
||||
search[key] = '';
|
||||
});
|
||||
emit('update:search', { ...search });
|
||||
emit('reset');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-page-search {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<RecordPage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import RecordPage from './components/RecordPage.vue';
|
||||
</script>
|
||||
@ -0,0 +1,537 @@
|
||||
<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.gridId" :width="600" />
|
||||
</el-form-item>
|
||||
<el-form-item label="种植作物">
|
||||
<url-select
|
||||
v-model="searchForm.cropId"
|
||||
placeholder="选择种植作物"
|
||||
url="/land-resource/baseInfo/cropPage"
|
||||
:params="{ current: 1, size: 100 }"
|
||||
label-key="cropName"
|
||||
value-key="id"
|
||||
:clearable="true"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</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="-1" /> -->
|
||||
<el-tab-pane label="待审核" name="0" />
|
||||
<el-tab-pane label="已通过" name="1" />
|
||||
<el-tab-pane label="已驳回" name="2" />
|
||||
</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="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-tabs v-model="activeFormTab" class="tabs-wrapper">
|
||||
<el-tab-pane label="土地基本信息" name="basic">
|
||||
<p class="form-title">基本信息</p>
|
||||
<el-form ref="basicFormRef" :model="formData" :disabled="isReadonly" label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="地块名称" prop="landName">
|
||||
<el-input v-model="formData.landName" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地类型" prop="landType">
|
||||
<el-tree-select
|
||||
v-model="formData.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="具体位置" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入具体位置" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土壤类型" prop="soilTypeId">
|
||||
<url-select
|
||||
v-model="formData.soilTypeId"
|
||||
placeholder="选择土壤类型"
|
||||
url="/land-resource/baseInfo/soilTypePage"
|
||||
:params="{ current: 1, size: 100 }"
|
||||
label-key="soilType"
|
||||
value-key="id"
|
||||
:clearable="true"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="土地照片" prop="landUrl">
|
||||
<FileUploader v-model="formData.landUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="面积(亩)" prop="area">
|
||||
<el-input-number v-model="formData.area" :min="0" :precision="2" :step="0.1" controls-position="right" style="width: 100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="" label-width="0" prop="gridId">
|
||||
<AreaCascader v-model:region-code="formData.gridAreaCode" v-model:grid-id="formData.gridId" label="" :split-rows="true" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="土地范围" prop="scope">
|
||||
<el-input v-model="formData.scope" placeholder="请输入土地范围" />
|
||||
<!-- <Attrs v-model:attrs="formData.scope" type="add" accept="image/*" /> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="土地承包信息" name="property">
|
||||
<p class="form-title">承包信息</p>
|
||||
<el-form ref="propertyFormRef" :model="formData" :disabled="isReadonly" label-width="150px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="土地承包经营权人" prop="propertyName">
|
||||
<el-input v-model="formData.propertyName" placeholder="请输入产权人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="propertyPhone">
|
||||
<el-input v-model="formData.propertyPhone" placeholder="请输入产权人联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地经营权证书编号" prop="landCode">
|
||||
<el-input v-model="formData.landCode" placeholder="请输入产权编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="土地经营权证书" prop="propertyCertificateUrl">
|
||||
<FileUploader v-model="formData.propertyCertificateUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12"></el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="土地流转信息" name="use">
|
||||
<p class="form-title">流转信息</p>
|
||||
<el-form ref="useForm" :model="formData" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否土地流转" prop="landTransfer">
|
||||
<el-radio-group v-model="formData.landTransfer" :disabled="isReadonly">
|
||||
<el-radio label="1">是</el-radio>
|
||||
<el-radio label="0">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.landTransfer === '1'" label="土地受让方" prop="landUseName">
|
||||
<el-input v-model="formData.landUseName" placeholder="请输入土地受让方" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.landTransfer === '1'" label="联系电话" prop="landUsePhone">
|
||||
<el-input v-model="formData.landUsePhone" placeholder="请输入土地受让方联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.landTransfer === '1'" label="流转合同" prop="landCertificateUrl">
|
||||
<FileUploader v-model="formData.landCertificateUrl" :limit="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<template v-if="!isReadonly">
|
||||
<el-button type="primary" @click="submitAll">修改</el-button>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// ---------------------------------------------------------------------
|
||||
// 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 request from '@/utils/axios';
|
||||
|
||||
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 activeFormTab = ref('basic');
|
||||
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({
|
||||
keyword: '',
|
||||
landStatus: 1,
|
||||
regionCode: '',
|
||||
gridId: '',
|
||||
id: '',
|
||||
landTypeName: '草地',
|
||||
});
|
||||
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: 'fullRegionName', width: 160 },
|
||||
{ label: '所属网格', prop: 'gridName', width: 90 },
|
||||
{ label: '具体位置', prop: 'address', width: 160 },
|
||||
{ label: '种植作物', prop: 'CropName' },
|
||||
{ label: '作物品种', prop: 'CropVarietyName' },
|
||||
{ label: '种植开始时间', prop: 'plantingStartTime' },
|
||||
{ label: '种植结束时间', prop: 'plantingEndTime' },
|
||||
{ label: '经营主体名称', prop: 'businessSubjectName', width: 130 },
|
||||
{ label: '账号（手机号）', prop: ' account', width: 130 },
|
||||
{ label: '信息填报时间', prop: 'fillTime', width: 110 },
|
||||
{ label: '信息审核时间', prop: 'auditTime', width: 110 },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => handleView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => handleEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => handleDelete(row),
|
||||
},
|
||||
{
|
||||
name: '审核',
|
||||
icon: 'approve',
|
||||
event: ({ row }) => onApprove(row),
|
||||
},
|
||||
// TODO: 驳回应该有填写驳回原因的弹窗
|
||||
{
|
||||
name: '驳回',
|
||||
icon: 'reject',
|
||||
event: ({ row }) => onReject(row),
|
||||
},
|
||||
{
|
||||
name: '驳回原因',
|
||||
icon: 'reject',
|
||||
event: ({ row }) => onRejectReason(row),
|
||||
},
|
||||
],
|
||||
});
|
||||
const handleTabChange = ({ name }) => {
|
||||
searchForm.value.landStatus = Number(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 = 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 handleSubmit = async () => {
|
||||
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 || '新增失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------
|
||||
// 业务代码
|
||||
// ---------------------------------------------------------------------
|
||||
import { createLand, deleteLand, editLand, fetchLandList, getLandById, approveLand } from '@/apis/landResourceManagement/landManagement';
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
fetchLandTypeData();
|
||||
});
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const filteredParams = filterObject(searchForm.value);
|
||||
const response = await fetchLandList(filteredParams);
|
||||
crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||
pageData.value.total = crudData.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);
|
||||
}
|
||||
};
|
||||
const submitAll = async () => {
|
||||
console.log('提交表单:', formData.value);
|
||||
await editLand(formData.value);
|
||||
ElMessage.success('保存成功');
|
||||
resetForm();
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const onApprove = async (row) => {
|
||||
// UNSUBMIT(-1,"未提交"),
|
||||
// REVIEW(0,"待审核"),
|
||||
// PASS(1,"通过"),
|
||||
// REFUSE(2,"驳回");
|
||||
if (row.landStatus !== 0) {
|
||||
ElMessage.error('该地块状态不是待审核状态');
|
||||
return;
|
||||
}
|
||||
const requiredBody = {
|
||||
bizType: 'landResInfo',
|
||||
bizId: row.id,
|
||||
status: 1,
|
||||
opinion: '',
|
||||
};
|
||||
await approveLand(requiredBody);
|
||||
ElMessage.success('审核成功');
|
||||
getData();
|
||||
};
|
||||
|
||||
const onReject = async (row) => {
|
||||
if (row.landStatus !== 0) {
|
||||
ElMessage.error('该地块状态不是待审核状态');
|
||||
return;
|
||||
}
|
||||
const requiredBody = {
|
||||
bizType: 'landResInfo',
|
||||
bizId: row.id,
|
||||
status: 2,
|
||||
opinion: '',
|
||||
};
|
||||
await approveLand(requiredBody);
|
||||
ElMessage.success('驳回成功');
|
||||
getData();
|
||||
};
|
||||
// 显示驳回原因
|
||||
const onRejectReason = async (row) => {
|
||||
ElMessageBox.alert(row.rejectReason || '无驳回原因', '驳回原因');
|
||||
};
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -222,7 +222,7 @@ const crudOptions = reactive({
|
||||
{ label: '年龄', prop: 'age' },
|
||||
{ label: '联系方式', prop: 'phone' },
|
||||
{ label: '居住地行政区划', prop: 'address' },
|
||||
{ label: '种植作物', prop: 'planCrop' },
|
||||
{ label: '种植作物', prop: 'planCropName' },
|
||||
{ label: '创建时间', prop: 'createTime' },
|
||||
{ label: '更新时间', prop: 'updateTime' },
|
||||
],
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<LandCrud type="forest" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LandCrud from './components/LandCrud.vue';
|
||||
</script>
|
||||
@ -7,7 +7,7 @@
|
||||
<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" />
|
||||
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.gridId" :width="600" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
|
||||
@ -16,10 +16,10 @@
|
||||
</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-tab-pane label="待提交" name="-1" /> -->
|
||||
<el-tab-pane label="待审核" name="0" />
|
||||
<el-tab-pane label="已通过" name="1" />
|
||||
<el-tab-pane label="已驳回" name="2" />
|
||||
</el-tabs>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
@ -30,34 +30,122 @@
|
||||
@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-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="gridAreaCode">
|
||||
<AreaSelect v-model="formData.gridAreaCode" :label="null" :emit-path="false" />
|
||||
<el-form-item label="土地类型" prop="landType">
|
||||
<el-tree-select
|
||||
v-model="formData.landType"
|
||||
:data="landTypeOptions"
|
||||
:props="treeProps"
|
||||
placeholder="选择土地类型"
|
||||
clearable
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
@change="handleLandTypeChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="网格化地图" prop="scopeImg">
|
||||
<FileUploader v-model="formData.scopeImg" :limit="1" />
|
||||
<el-form-item label="具体位置" prop="address">
|
||||
<el-input v-model="formData.address" placeholder="请输入具体位置" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input v-model="formData.note" placeholder="请输入备注" />
|
||||
<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>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button v-if="!isReadonly" type="primary" @click="handleSubmit()"> 保存 </el-button>
|
||||
</div>
|
||||
<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>
|
||||
@ -72,6 +160,7 @@ import { CRUD_OPTIONS } from '@/config';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { mockData } from './landData';
|
||||
import request from '@/utils/axios';
|
||||
|
||||
const UserStore = useUserStore();
|
||||
const user = UserStore.getUserInfo();
|
||||
@ -83,6 +172,7 @@ const visible = ref(false);
|
||||
const isReadonly = ref(false);
|
||||
const dialogTitle = ref();
|
||||
const activeTab = ref('1');
|
||||
const activeFormTab = ref('basic');
|
||||
const formData = ref({
|
||||
gridName: '',
|
||||
gridAreaCode: '',
|
||||
@ -101,11 +191,12 @@ const pageData = ref({
|
||||
total: 0,
|
||||
});
|
||||
const searchForm = ref({
|
||||
gridName: '',
|
||||
keyword: '',
|
||||
landStatus: 1,
|
||||
regionCode: '',
|
||||
gridId: '',
|
||||
id: '',
|
||||
status: -1,
|
||||
landTypeName: '草地',
|
||||
});
|
||||
const initialSearchForm = { ...searchForm.value };
|
||||
const resetSearch = () => {
|
||||
@ -137,7 +228,7 @@ const crudOptions = reactive({
|
||||
{ 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: 'fullLandType' },
|
||||
{ label: '土壤类型', prop: 'soilTypeName' },
|
||||
{ label: '所属行政区域', prop: 'fullRegionName', width: 160 },
|
||||
{ label: '所属网格', prop: 'gridName', width: 90 },
|
||||
@ -145,15 +236,13 @@ const crudOptions = reactive({
|
||||
{ label: '土地承包经营人', prop: 'propertyName' },
|
||||
{ label: '联系电话', prop: 'propertyPhone' },
|
||||
{ label: '土地经营权证书编号', prop: 'landCode', width: 160 },
|
||||
{ label: '是否土地流转', prop: 'isTransfer' },
|
||||
{ label: '是否土地流转', prop: 'landTransfer' },
|
||||
{ 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: [
|
||||
@ -173,11 +262,26 @@ const crudOptions = reactive({
|
||||
icon: 'delete',
|
||||
event: ({ row }) => handleDelete(row),
|
||||
},
|
||||
{
|
||||
name: '审核',
|
||||
icon: 'approve',
|
||||
event: ({ row }) => onApprove(row),
|
||||
},
|
||||
// TODO: 驳回应该有填写驳回原因的弹窗
|
||||
{
|
||||
name: '驳回',
|
||||
icon: 'reject',
|
||||
event: ({ row }) => onReject(row),
|
||||
},
|
||||
{
|
||||
name: '驳回原因',
|
||||
icon: 'reject',
|
||||
event: ({ row }) => onRejectReason(row),
|
||||
},
|
||||
],
|
||||
});
|
||||
const handleTabChange = ({ name }) => {
|
||||
// activeTab.value = name;
|
||||
console.log('切换tab', activeTab.value);
|
||||
searchForm.value.landStatus = Number(activeTab.value);
|
||||
getData();
|
||||
};
|
||||
const handleRefresh = async () => {
|
||||
@ -190,17 +294,17 @@ const handleCurrentChange = (val) => {
|
||||
const handleSizeChange = (val) => {
|
||||
pageData.value.pageSize = val;
|
||||
};
|
||||
const handleView = (row) => {
|
||||
const handleView = async (row) => {
|
||||
isReadonly.value = true;
|
||||
formData.value = { ...row };
|
||||
formData.value = await getLandDetail(row.id);
|
||||
dialogTitle.value = '查看网格';
|
||||
// visible.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const handleEdit = (row) => {
|
||||
isReadonly.value = false;
|
||||
formData.value = { ...row };
|
||||
dialogTitle.value = '编辑网格';
|
||||
// visible.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const handleDelete = async (row) => {
|
||||
console.log('删除', row);
|
||||
@ -229,13 +333,13 @@ const handleSubmit = async () => {
|
||||
console.log('提交表单:', formData.value);
|
||||
try {
|
||||
if (dialogTitle.value === '新增网格') {
|
||||
await createGrid(formData.value);
|
||||
await createLand(formData.value);
|
||||
ElMessage.success('新增成功');
|
||||
resetForm();
|
||||
visible.value = false;
|
||||
getData();
|
||||
} else {
|
||||
await updateGrid(formData.value);
|
||||
await editLand(formData.value);
|
||||
ElMessage.success('更新成功');
|
||||
resetForm();
|
||||
visible.value = false;
|
||||
@ -249,28 +353,91 @@ const handleSubmit = async () => {
|
||||
// ---------------------------------------------------------------------
|
||||
// 业务代码
|
||||
// ---------------------------------------------------------------------
|
||||
import { createGrid, updateGrid, deleteGrid, fetchGridList, getGridDetail, exportGrid } from '@/apis/landResourceManagement/gridManagement';
|
||||
import { createLand, deleteLand, editLand, fetchLandList, getLandById, approveLand } from '@/apis/landResourceManagement/landManagement';
|
||||
|
||||
onMounted(() => {
|
||||
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: '草地',
|
||||
}));
|
||||
const filteredParams = filterObject(searchForm.value);
|
||||
const response = await fetchLandList(filteredParams);
|
||||
crudData.value = Array.isArray(response.data.records) ? response.data.records : [];
|
||||
pageData.value.total = crudData.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);
|
||||
}
|
||||
};
|
||||
const submitAll = async () => {
|
||||
console.log('提交表单:', formData.value);
|
||||
await editLand(formData.value);
|
||||
ElMessage.success('保存成功');
|
||||
resetForm();
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const onApprove = async (row) => {
|
||||
// UNSUBMIT(-1,"未提交"),
|
||||
// REVIEW(0,"待审核"),
|
||||
// PASS(1,"通过"),
|
||||
// REFUSE(2,"驳回");
|
||||
if (row.landStatus !== 0) {
|
||||
ElMessage.error('该地块状态不是待审核状态');
|
||||
return;
|
||||
}
|
||||
const requiredBody = {
|
||||
bizType: 'landResInfo',
|
||||
bizId: row.id,
|
||||
status: 1,
|
||||
opinion: '',
|
||||
};
|
||||
await approveLand(requiredBody);
|
||||
ElMessage.success('审核成功');
|
||||
getData();
|
||||
};
|
||||
|
||||
const onReject = async (row) => {
|
||||
if (row.landStatus !== 0) {
|
||||
ElMessage.error('该地块状态不是待审核状态');
|
||||
return;
|
||||
}
|
||||
const requiredBody = {
|
||||
bizType: 'landResInfo',
|
||||
bizId: row.id,
|
||||
status: 2,
|
||||
opinion: '',
|
||||
};
|
||||
await approveLand(requiredBody);
|
||||
ElMessage.success('驳回成功');
|
||||
getData();
|
||||
};
|
||||
// 显示驳回原因
|
||||
const onRejectReason = async (row) => {
|
||||
ElMessageBox.alert(row.rejectReason || '无驳回原因', '驳回原因');
|
||||
};
|
||||
const handleAdd = () => {
|
||||
console.log('handleAdd');
|
||||
resetForm();
|
||||
@ -301,7 +468,7 @@ h1 {
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
height: calc(100vh - 300px);
|
||||
// height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-title {
|
||||
@ -326,4 +493,39 @@ h1 {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,139 @@
|
||||
<template>
|
||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
|
||||
<!-- <h1>统计数据</h1>
|
||||
<div class="content"></div> -->
|
||||
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
|
||||
<div class="custom-page">
|
||||
<!-- <h1>统计数据</h1> -->
|
||||
<div class="content">
|
||||
<div style="display: flex">
|
||||
<pieChart v-for="(item, index) in data" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<pieChart v-for="(item, index) in data1" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, computed } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
|
||||
import { ref, onBeforeMount, reactive } from 'vue';
|
||||
import 'echarts-gl';
|
||||
import pieChart from './components/pie-chart.vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
let dataColor0 = ['#01D3D3', '#00C4F2', '#4A68FF', '#00DD97', '#01D3D3', '#00C4F2', '#4A68FF', '#00DD97'];
|
||||
let data = ref([
|
||||
{
|
||||
title: '农用地面积数据',
|
||||
data: [],
|
||||
refs: 'chart1',
|
||||
},
|
||||
{
|
||||
title: '土地流转面积数据',
|
||||
data: [],
|
||||
refs: 'chart1',
|
||||
},
|
||||
{
|
||||
title: '耕地面积数据',
|
||||
data: [],
|
||||
refs: 'chart1',
|
||||
},
|
||||
]);
|
||||
|
||||
let data1 = ref([
|
||||
{
|
||||
title: '园地面积数据',
|
||||
data: [],
|
||||
refs: 'chart1',
|
||||
},
|
||||
{
|
||||
title: '林地面积数据',
|
||||
data: [],
|
||||
refs: 'chart1',
|
||||
},
|
||||
{
|
||||
title: '草地面积数据',
|
||||
data: [],
|
||||
refs: 'chart1',
|
||||
},
|
||||
]);
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
let res = await getOverview();
|
||||
console.log(res);
|
||||
let res1 = await getOverview({ landTransfer: 1 });
|
||||
res1.data.list.forEach((data2, index) => {
|
||||
data.value[1].data.push({
|
||||
name: data2.landTypeName,
|
||||
value: data2.area,
|
||||
itemStyle: {
|
||||
opacity: 0.9,
|
||||
color: dataColor0[index],
|
||||
},
|
||||
});
|
||||
});
|
||||
res.data.list.forEach(async (data1, index) => {
|
||||
data.value[0].data.push({
|
||||
name: data1.landTypeName,
|
||||
value: data1.area,
|
||||
itemStyle: {
|
||||
opacity: 0.9,
|
||||
color: dataColor0[index],
|
||||
},
|
||||
});
|
||||
// data.value[0].data[index].value = data1.area;
|
||||
// data.value[0].data[index].name = data1.landTypeName;
|
||||
getOrderData({ pid: data1.landTypeId, landTransfer: 1 }, index);
|
||||
});
|
||||
|
||||
console.log(data.value);
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '新增失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const getOrderData = async (datas, indexs) => {
|
||||
let res = await getSubArea(datas);
|
||||
if (res.data.title) {
|
||||
if (res.data.title == '耕地面积数据') {
|
||||
res.data.data.forEach((data3, index) => {
|
||||
data.value[2].data.push({
|
||||
name: data3.landTypeName,
|
||||
value: data3.area,
|
||||
itemStyle: {
|
||||
opacity: 0.9,
|
||||
color: dataColor0[index],
|
||||
},
|
||||
});
|
||||
});
|
||||
} else {
|
||||
res.data.data.forEach((data4, index) => {
|
||||
console.log(indexs);
|
||||
|
||||
data1.value[indexs - 1].data.push({
|
||||
name: data4.landTypeName,
|
||||
value: data4.area,
|
||||
itemStyle: {
|
||||
opacity: 0.9,
|
||||
color: dataColor0[index],
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-page {
|
||||
height: calc(100vh - 150px);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.m-left {
|
||||
margin-left: 2%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="land-page">
|
||||
<LandSearch v-model:search="searchForm" @search="fetchList" />
|
||||
<avue-crud ref="crudRef" v-model:page="pagination" :data="list" :option="crudOptions" :loading="loading">
|
||||
<template #menu-left>
|
||||
<el-button type="primary" @click="openForm('create')">新增</el-button>
|
||||
</template>
|
||||
<template #menu="{ row }">
|
||||
<el-button size="small" @click="openForm('view', row)">查看</el-button>
|
||||
<el-button size="small" type="primary" @click="openForm('edit', row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
<LandForm v-model:visible="formVisible" :mode="formMode" :initial-data="formData" :type="type" @submit="handleSubmit" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import LandSearch from './LandSearch.vue';
|
||||
import LandForm from './LandForm.vue';
|
||||
import { useLandCrud } from '@/composables/useLandCrud';
|
||||
|
||||
const props = defineProps({ type: { type: String, default: '' } });
|
||||
|
||||
const { list, pagination, searchForm, loading, fetchList, handleDelete, handleSubmit, formVisible, formMode, formData, openForm } = useLandCrud(
|
||||
props.type
|
||||
);
|
||||
|
||||
watch(() => props.type, fetchList, { immediate: true });
|
||||
</script>
|
||||
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<el-dialog :v-model="visible" :title="dialogTitle" width="600px" destroy-on-close :close-on-click-modal="false">
|
||||
<el-form ref="formRef" :model="formModel" :rules="rules" :disabled="isView" label-width="100px">
|
||||
<el-form-item label="地块名称" prop="name">
|
||||
<el-input v-model="formModel.name" placeholder="请输入地块名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属区域" prop="areaCode">
|
||||
<AreaSelect v-model="formModel.areaCode" :emit-path="false" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="面积（亩）" prop="area">
|
||||
<el-input-number v-model="formModel.area" :min="0" placeholder="请输入面积" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图像文件" prop="image">
|
||||
<FileUploader v-model="formModel.image" :limit="1" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="formModel.remark" type="textarea" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button v-if="!isView" type="primary" :loading="submitting" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create', // 'create' | 'edit' | 'view'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '', // 地块类型：grass / forest / field
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:visible', 'submit']);
|
||||
|
||||
const formRef = ref(null);
|
||||
const formModel = ref({});
|
||||
const submitting = ref(false);
|
||||
|
||||
const isView = computed(() => props.mode === 'view');
|
||||
const dialogTitle = computed(() => {
|
||||
switch (props.mode) {
|
||||
case 'create':
|
||||
return '新增地块';
|
||||
case 'edit':
|
||||
return '编辑地块';
|
||||
case 'view':
|
||||
return '查看地块';
|
||||
default:
|
||||
return '地块信息';
|
||||
}
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
areaCode: [{ required: true, message: '请选择区域', trigger: 'change' }],
|
||||
area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
if (val) {
|
||||
formModel.value = { ...props.initialData };
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function close() {
|
||||
emit('update:visible', false);
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!formRef.value) return;
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
submitting.value = true;
|
||||
emit('submit', { ...formModel.value });
|
||||
} catch (err) {
|
||||
console.warn('表单校验失败', err);
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="land-search">
|
||||
<el-form :model="search" inline label-width="100px">
|
||||
<el-form-item label="地块名称">
|
||||
<el-input v-model="search.name" placeholder="请输入地块名称" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属区域">
|
||||
<AreaCascader v-model:region-code="search.regionCode" v-model:grid-id="search.id" :width="300" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearch">搜索</el-button>
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch, toRefs } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
search: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:search', 'search', 'reset']);
|
||||
|
||||
const search = reactive({ ...props.search });
|
||||
|
||||
watch(
|
||||
search,
|
||||
(val) => {
|
||||
emit('update:search', { ...val });
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const onSearch = () => {
|
||||
emit('search');
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
Object.keys(search).forEach((key) => {
|
||||
search[key] = '';
|
||||
});
|
||||
emit('update:search', { ...search });
|
||||
emit('reset');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.land-search {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
|
||||
<div>
|
||||
<!-- <h1>统计数据</h1> -->
|
||||
<div class="content">
|
||||
<div :ref="props.refs" style="width: 500px; height: 350px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-gl';
|
||||
import { defineProps } from 'vue';
|
||||
import { size } from 'lodash';
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '暂无';
|
||||
},
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
refs: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
let chart1 = ref(null);
|
||||
|
||||
console.log(props.refs);
|
||||
|
||||
let option = ref({});
|
||||
|
||||
watch(props.data, (data, oldata) => {
|
||||
console.log(data);
|
||||
let instance = echarts.init(chart1.value);
|
||||
instance.setOption(option.value);
|
||||
});
|
||||
|
||||
option.value = {
|
||||
title: {
|
||||
text: props.title,
|
||||
x: 'center',
|
||||
size: 10,
|
||||
},
|
||||
// backgroundColor: '#0f375f',
|
||||
legend: {
|
||||
top: 25,
|
||||
left: '0',
|
||||
itemWidth: 20,
|
||||
itemHeight: 15,
|
||||
textStyle: {
|
||||
color: '#aab2cd',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} <br/>面积: {c}万亩 ({d}%)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}万亩',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
center: ['40%', '60%'],
|
||||
label: {
|
||||
normal: {
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
data: props.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
let instance = echarts.init(chart1.value);
|
||||
instance.setOption(option.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-page {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
.m-left {
|
||||
margin-left: 6%;
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@ export const mockData = [
|
||||
area: 8.72,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县耿马镇允楞村',
|
||||
fullRegionName: '耿马傣族佤族自治县耿马镇允楞村',
|
||||
gridName: '耿马网格1',
|
||||
address: '允楞村委会旁',
|
||||
propertyName: '刘勇',
|
||||
@ -27,7 +27,7 @@ export const mockData = [
|
||||
area: 12.34,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '黄壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县耿马镇复兴村',
|
||||
fullRegionName: '耿马傣族佤族自治县耿马镇复兴村',
|
||||
gridName: '耿马网格A',
|
||||
address: '复兴村大路东侧',
|
||||
propertyName: '张芳',
|
||||
@ -49,7 +49,7 @@ export const mockData = [
|
||||
area: 5.6,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '壤土',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县勐撒镇城子村',
|
||||
fullRegionName: '耿马傣族佤族自治县勐撒镇城子村',
|
||||
gridName: '勐撒网格B',
|
||||
address: '城子村太阳路北侧',
|
||||
propertyName: '赵杰',
|
||||
@ -71,7 +71,7 @@ export const mockData = [
|
||||
area: 14.28,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '砂壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县孟定镇罕宏村',
|
||||
fullRegionName: '耿马傣族佤族自治县孟定镇罕宏村',
|
||||
gridName: '孟定网格C',
|
||||
address: '罕宏村公路旁',
|
||||
propertyName: '周涛',
|
||||
@ -93,7 +93,7 @@ export const mockData = [
|
||||
area: 7.95,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '钙质红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县贺派乡芒抗村',
|
||||
fullRegionName: '耿马傣族佤族自治县贺派乡芒抗村',
|
||||
gridName: '贺派网格D',
|
||||
address: '芒抗村文化站东侧',
|
||||
propertyName: '钱海',
|
||||
@ -115,7 +115,7 @@ export const mockData = [
|
||||
area: 10.5,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县四排山乡东坡村',
|
||||
fullRegionName: '耿马傣族佤族自治县四排山乡东坡村',
|
||||
gridName: '四排山网格E',
|
||||
address: '东坡村卫生室旁',
|
||||
propertyName: '吴强',
|
||||
@ -137,7 +137,7 @@ export const mockData = [
|
||||
area: 6.3,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '砂壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县勐撒镇箐门口村',
|
||||
fullRegionName: '耿马傣族佤族自治县勐撒镇箐门口村',
|
||||
gridName: '勐撒网格F',
|
||||
address: '箐门口村村委路口',
|
||||
propertyName: '郑飞',
|
||||
@ -159,7 +159,7 @@ export const mockData = [
|
||||
area: 9.11,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '壤土',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县孟定镇景信村',
|
||||
fullRegionName: '耿马傣族佤族自治县孟定镇景信村',
|
||||
gridName: '孟定网格G',
|
||||
address: '景信村村口',
|
||||
propertyName: '钱芳',
|
||||
@ -181,7 +181,7 @@ export const mockData = [
|
||||
area: 11.76,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '红壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县耿马镇团结村',
|
||||
fullRegionName: '耿马傣族佤族自治县耿马镇团结村',
|
||||
gridName: '耿马网格H',
|
||||
address: '团结村大桥旁',
|
||||
propertyName: '孙明',
|
||||
@ -203,7 +203,7 @@ export const mockData = [
|
||||
area: 7.22,
|
||||
landTypeName: '耕地',
|
||||
soilTypeName: '砂壤',
|
||||
fullRegionName: '云南省临沧市耿马傣族佤族自治县贺派乡落阳村',
|
||||
fullRegionName: '耿马傣族佤族自治县贺派乡落阳村',
|
||||
gridName: '贺派网格I',
|
||||
address: '落阳村学校旁',
|
||||
propertyName: '李平',
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div>123</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,392 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.pageData"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
>
|
||||
<template #search="{ size }">
|
||||
<AreaCascader v-model:value="state.query" placeholder="选择行政区域与网格" :width="400" />
|
||||
</template>
|
||||
|
||||
<template #menu-left>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
|
||||
<template #detail="scope">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="基本信息">
|
||||
<avue-detail :option="baseDetailOption" :data="scope.row"></avue-detail>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="网格地图">
|
||||
<div v-if="scope.row.mapUrl" style="height: 400px">
|
||||
<img :src="scope.row.mapUrl" style="max-width: 100%; max-height: 100%" />
|
||||
</div>
|
||||
<el-empty v-else description="暂无地图数据"></el-empty>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="其他信息">
|
||||
<avue-detail :option="otherDetailOption" :data="scope.row"></avue-detail>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { isEmpty, downloadFile } from '@/utils';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { compact } from 'lodash';
|
||||
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
gridName: '',
|
||||
regionCode: '',
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '添加网格',
|
||||
// detail: true,
|
||||
// detailTitle: '详情',
|
||||
column: [
|
||||
{
|
||||
label: '网格编号',
|
||||
prop: 'id',
|
||||
addDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '网格名称',
|
||||
prop: 'gridName',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '所属行政区域',
|
||||
prop: 'gridAreaName',
|
||||
addDisplay: false,
|
||||
viewDisplay: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '所属行政区域',
|
||||
prop: 'cities',
|
||||
type: 'cascader',
|
||||
hide: true,
|
||||
span: 24,
|
||||
width: 300,
|
||||
addDisplay: true,
|
||||
editDisplay: true,
|
||||
viewDisplay: false,
|
||||
emitPath: false,
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
children: 'areaChildVOS',
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res.data ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格地图',
|
||||
prop: 'mapUrl',
|
||||
type: 'upload',
|
||||
hide: true,
|
||||
// action: `${VITE_APP_BASE_API}/system/file/upload`,
|
||||
},
|
||||
// {
|
||||
// label: '网格名称',
|
||||
// prop: 'gridName',
|
||||
// type: 'select',
|
||||
// addDisplay: false,
|
||||
// hide: true,
|
||||
// // search: true,
|
||||
// searchLabelWidth: 100,
|
||||
// dicUrl: `${VITE_APP_BASE_API}/land-resource/gridManage/page?regionCode={{key}}`,
|
||||
// props: {
|
||||
// label: 'gridName',
|
||||
// value: 'gridName',
|
||||
// },
|
||||
// dicHeaders: {
|
||||
// authorization: UserStore.token,
|
||||
// },
|
||||
// dicFormatter: (res) => res.data?.records,
|
||||
// },
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rows: 4,
|
||||
overHidden: true,
|
||||
// width: 200,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 200,
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
const baseDetailOption = {
|
||||
column: [
|
||||
{
|
||||
label: '网格名称',
|
||||
prop: 'gridName',
|
||||
},
|
||||
{
|
||||
label: '所属行政区域',
|
||||
prop: 'gridAreaName',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const otherDetailOption = {
|
||||
column: [
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
},
|
||||
// 可以添加更多字段...
|
||||
],
|
||||
};
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
GetEntityList(state.query)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
state.data = records;
|
||||
state.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
state.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
// 页数
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 条数
|
||||
const sizeChange = (size) => {
|
||||
state.query.size = size;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const searchChange = (params, done) => {
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.query.current = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const refreshChange = () => {
|
||||
loadData();
|
||||
app.$message.success('刷新成功');
|
||||
};
|
||||
|
||||
// 选择
|
||||
const selectionChange = (rows) => {
|
||||
state.selection = rows;
|
||||
};
|
||||
|
||||
// 查看
|
||||
const rowView = (row) => {
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
const setCity = (row) => {
|
||||
if (!isEmpty(row.cities)) {
|
||||
row.provinceCode = row?.cities[0] ?? null;
|
||||
row.cityCode = row?.cities[1] ?? null;
|
||||
row.gridAreaCode = row?.cities[4] ?? null;
|
||||
row.townCode = row?.cities[3] ?? null;
|
||||
row.village = row?.cities[4] ?? null;
|
||||
// row.village = row?.cities.join(',');
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
setCity(row);
|
||||
row.gridAreaCode = row.cities;
|
||||
AddEntity(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
const village = !isEmpty(row.village) ? row.village : [];
|
||||
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
setCity(row);
|
||||
UpdateEntity(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const rowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
DeleteEntity({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
if (isEmpty(state.data)) {
|
||||
app.$message.error('当前暂时没有可供导出的数据！');
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const fileName = '网格明细表';
|
||||
ExportEntity(state.query)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||
app.$message.success('导出成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error('导出失败！');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>网格化管理</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 组件逻辑可在此添加
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>计划</template>
|
||||
<script></script>
|
||||
<style></style>
|
||||
@ -1,375 +0,0 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="state.form"
|
||||
v-model:search="state.query"
|
||||
v-model:page="state.pageData"
|
||||
:table-loading="state.loading"
|
||||
:data="state.data"
|
||||
:option="state.options"
|
||||
@refresh-change="refreshChange"
|
||||
@search-reset="searchChange"
|
||||
@search-change="searchChange"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { isEmpty, downloadFile } from '@/utils';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { compact } from 'lodash';
|
||||
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
// addBtnText: '添加网格',
|
||||
column: [
|
||||
{
|
||||
label: '网格区',
|
||||
prop: 'gridArea',
|
||||
search: true,
|
||||
width: 200,
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
viewDisplay: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格名称',
|
||||
prop: 'gridName',
|
||||
search: true,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格区域',
|
||||
prop: 'gridAreaName',
|
||||
width: 300,
|
||||
display: false,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格区域',
|
||||
prop: 'cities',
|
||||
type: 'cascader',
|
||||
hide: true,
|
||||
addDisplay: true,
|
||||
editDisplay: true,
|
||||
viewDisplay: false,
|
||||
// multiple: true,
|
||||
// checkStrictly: true,
|
||||
// collapseTags: true,
|
||||
// emitPath: false,
|
||||
// checkDescendants: false,
|
||||
props: {
|
||||
label: 'areaName',
|
||||
value: 'areaCode',
|
||||
children: 'areaChildVOS',
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicFormatter: (res) => res.data ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '网格管理员',
|
||||
prop: 'gridManager',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '联系方式',
|
||||
prop: 'contactInfo',
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '省',
|
||||
prop: 'provinceCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '市',
|
||||
prop: 'cityCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '县/区',
|
||||
prop: 'gridAreaCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '乡镇',
|
||||
prop: 'townCode',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '乡镇',
|
||||
prop: 'village',
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'note',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rows: 4,
|
||||
overHidden: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 200,
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
GetEntityList(state.query)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
state.data = records;
|
||||
state.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
state.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
// 页数
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 条数
|
||||
const sizeChange = (size) => {
|
||||
state.query.size = size;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const searchChange = (params, done) => {
|
||||
if (done) done();
|
||||
state.query = params;
|
||||
state.query.current = 1;
|
||||
loadData();
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const refreshChange = () => {
|
||||
loadData();
|
||||
app.$message.success('刷新成功');
|
||||
};
|
||||
|
||||
// 选择
|
||||
const selectionChange = (rows) => {
|
||||
state.selection = rows;
|
||||
};
|
||||
|
||||
// 查看
|
||||
const rowView = (row) => {
|
||||
crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
const setCity = (row) => {
|
||||
if (!isEmpty(row.cities)) {
|
||||
row.provinceCode = row?.cities[0] ?? null;
|
||||
row.cityCode = row?.cities[1] ?? null;
|
||||
row.gridAreaCode = row?.cities[2] ?? null;
|
||||
row.townCode = row?.cities[3] ?? null;
|
||||
row.village = row?.cities[4] ?? null;
|
||||
// row.village = row?.cities.join(',');
|
||||
}
|
||||
};
|
||||
|
||||
// 新增
|
||||
const rowSave = (row, done, loading) => {
|
||||
setCity(row);
|
||||
AddEntity(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const rowEdit = (row) => {
|
||||
const village = !isEmpty(row.village) ? row.village : [];
|
||||
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
|
||||
crudRef.value.rowEdit(row);
|
||||
};
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
setCity(row);
|
||||
UpdateEntity(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
// 删除
|
||||
const rowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
DeleteEntity({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
loadData();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
if (isEmpty(state.data)) {
|
||||
app.$message.error('当前暂时没有可供导出的数据！');
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const fileName = '网格明细表';
|
||||
ExportEntity(state.query)
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||
app.$message.success('导出成功！');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error('导出失败！');
|
||||
})
|
||||
.finally(() => {
|
||||
state.loading = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -1601,6 +1601,11 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
claygl@^1.2.1:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
|
||||
integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
|
||||
|
||||
clone-regexp@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npmmirror.com/clone-regexp/-/clone-regexp-1.0.1.tgz#051805cd33173375d82118fc0918606da39fd60f"
|
||||
@ -2086,6 +2091,14 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
|
||||
es-errors "^1.3.0"
|
||||
gopd "^1.2.0"
|
||||
|
||||
echarts-gl@^2.0.9:
|
||||
version "2.0.9"
|
||||
resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
|
||||
integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
|
||||
dependencies:
|
||||
claygl "^1.2.1"
|
||||
zrender "^5.1.1"
|
||||
|
||||
echarts@^5.6.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
|
||||
@ -6679,7 +6692,7 @@ yocto-queue@^0.1.0:
|
||||
resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
|
||||
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
|
||||
|
||||
zrender@5.6.1:
|
||||
zrender@5.6.1, zrender@^5.1.1:
|
||||
version "5.6.1"
|
||||
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
|
||||
integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==
|
||||
|
||||
BIN
sub-operation-service/src/assets/images/ecommerce/contact.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/contact.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
sub-operation-service/src/assets/images/ecommerce/contact1.png
Normal file
BIN
sub-operation-service/src/assets/images/ecommerce/contact1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
sub-operation-service/src/assets/images/finance/wydk1.png
Normal file
BIN
sub-operation-service/src/assets/images/finance/wydk1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 509 KiB |
BIN
sub-operation-service/src/assets/images/logo2.png
Normal file
BIN
sub-operation-service/src/assets/images/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -216,7 +216,7 @@ export default {
|
||||
if (params.seriesName !== 'mouseoutSeries') {
|
||||
return `
|
||||
<span style="color:#FFF">
|
||||
${params.seriesName}<br/>
|
||||
${params.seriesName}（万亩）<br/>
|
||||
<span style="display:inline-block;
|
||||
margin-right:5px;
|
||||
border-radius:10px;
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="layout-header-bottom-left">
|
||||
<div class="layout-header-bottom-search">
|
||||
<div class="title">
|
||||
<img :src="getAssetsFile('images/logo1.png')" />
|
||||
<img :src="getAssetsFile('images/logo2.png')" />
|
||||
</div>
|
||||
<div class="search-warp">
|
||||
<el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
|
||||
|
||||
@ -602,7 +602,7 @@ export const constantRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: () => import('@/views/ecommerce/supplierDetail.vue'),
|
||||
component: () => import('@/views/ecommerce/agriculturalDetail.vue'),
|
||||
name: 'supplierDetail',
|
||||
meta: { title: '农产品详情', headerActive: 'ecommerce', hideInBread: true },
|
||||
},
|
||||
|
||||
@ -9,28 +9,28 @@ import { reactive, ref } from 'vue';
|
||||
// #region
|
||||
const dataList = ref([
|
||||
{
|
||||
name: '豆菜类作物 25万亩',
|
||||
value: 60.8,
|
||||
name: '豆菜类作物',
|
||||
value: 25,
|
||||
money: 100,
|
||||
},
|
||||
{
|
||||
name: '根菜类作物 20万亩',
|
||||
value: 44.4,
|
||||
name: '根菜类作物',
|
||||
value: 20,
|
||||
money: 88,
|
||||
},
|
||||
{
|
||||
name: '叶菜类作物 10万亩',
|
||||
value: 24.3,
|
||||
name: '叶菜类作物',
|
||||
value: 10,
|
||||
money: 92,
|
||||
},
|
||||
{
|
||||
name: '茄科类作物 20万亩',
|
||||
value: 32.7,
|
||||
name: '茄科类作物',
|
||||
value: 20,
|
||||
money: 56,
|
||||
},
|
||||
{
|
||||
name: '其他蔬菜作物 20万亩',
|
||||
value: 32.9,
|
||||
name: '其他蔬菜作物',
|
||||
value: 20,
|
||||
money: 18,
|
||||
},
|
||||
]);
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="goods-num">
|
||||
<div class="num-title">数量：</div>
|
||||
<div class="num-warp">
|
||||
<el-input-number v-model="saveInfo.num" :min="1" :max="10" />
|
||||
<el-input-number v-model="saveInfo.num" :min="1" :max="99999" />
|
||||
<span v-if="currentStock !== 0" class="is-have">有货: {{ currentStock }}</span>
|
||||
<span v-else class="is-have">售罄</span>
|
||||
</div>
|
||||
@ -63,6 +63,10 @@
|
||||
<div class="item-btn reservation" @click="addGoodToCart">
|
||||
<span>加入购物车</span>
|
||||
</div>
|
||||
<div class="contact" @click="showPhone = true">
|
||||
<div><img :src="getAssetsFile('images/ecommerce/contact.png')" alt="" width="15" /></div>
|
||||
<div>联系客服</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -129,11 +133,51 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="showPhone"
|
||||
:body-style="{ padding: 0 }"
|
||||
:show-close="false"
|
||||
title="联系客服"
|
||||
width="700"
|
||||
align-center
|
||||
style="text-align: left"
|
||||
>
|
||||
<template #header>
|
||||
<div class="titleContent">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img :src="getAssetsFile('images/ecommerce/contact1.png')" alt="" width="60" />
|
||||
<span style="margin-left: 10px; font-size: 24px; font-weight: bold">联系客服</span>
|
||||
</div>
|
||||
<div style="cursor: pointer" @click="showPhone = false">
|
||||
<el-icon size="34"><CloseBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div style="padding: 10px; text-align: center; font-size: 24px; color: #000000">
|
||||
<span>客服热线（人工服务时间：8:00-22:00）</span>
|
||||
<div style="margin-top: 20px">客服电话(虚拟号码)：<span style="color: #25bf82">400-059-0985-5109</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
type="danger"
|
||||
style="background-color: #25bf82; padding: 25px 60px; color: #ffffff; font-size: 20px; border: 0; border-radius: 16px"
|
||||
@click="showPhone = false"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="ecommerce">
|
||||
<script setup>
|
||||
import common from './components/common.vue';
|
||||
import banner from './components/banner.vue';
|
||||
import { onMounted, reactive, ref, computed } from 'vue';
|
||||
@ -153,6 +197,7 @@ const router = useRouter();
|
||||
const goodId = route.query.id; // 获取参数
|
||||
const pId = route.query.pid;
|
||||
const currentWeight = ref(0);
|
||||
const showPhone = ref(false);
|
||||
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||||
const tabList = reactive([
|
||||
@ -614,15 +659,22 @@ const toCopy = () => {};
|
||||
}
|
||||
}
|
||||
.top-btn {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.contact {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.contact:hover {
|
||||
}
|
||||
.item-btn {
|
||||
display: inline-block;
|
||||
margin: 8px 24px 8px 0;
|
||||
margin-top: 16px;
|
||||
padding: 0 24px;
|
||||
padding: 7px 24px;
|
||||
margin-right: 20px;
|
||||
font-size: 20px;
|
||||
border-radius: 12px;
|
||||
color: $color-fff;
|
||||
line-height: 42px;
|
||||
&.sign {
|
||||
background: $color-main;
|
||||
cursor: pointer;
|
||||
@ -739,4 +791,19 @@ const toCopy = () => {};
|
||||
}
|
||||
}
|
||||
}
|
||||
.titleContent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background: linear-gradient(#b1ffe0 0%, #ffffff 80%);
|
||||
border-radius: 16px;
|
||||
}
|
||||
:deep(.el-dialog) {
|
||||
padding: 0;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.dialog-footer {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
<div class="goods-num">
|
||||
<div class="num-title">数量：</div>
|
||||
<div class="num-warp">
|
||||
<el-input-number v-model="saveInfo.num" :min="1" :max="10" />
|
||||
<el-input-number v-model="saveInfo.num" :min="1" :max="99999" />
|
||||
<span v-if="currentStock !== 0" class="is-have">有货: {{ currentStock }}</span>
|
||||
<span v-else class="is-have">售罄</span>
|
||||
</div>
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
<el-card shadow="hover" style="border-radius: 16px">
|
||||
<h1>{{ detailInfo.title }}</h1>
|
||||
<div class="subTitle" style="margin: 30px 0; font-weight: bold; font-size: 18px">
|
||||
<span>日期： {{ detailInfo.date }}</span>
|
||||
<span>作者：{{ detailInfo.author }}</span>
|
||||
<span>来源： {{ detailInfo.source }}</span>
|
||||
<span>日期： {{ detailInfo.date }}</span
|
||||
><span>|</span> <span>浏览量：{{ detailInfo.flow }}</span> <span>|</span> <span>来源： {{ detailInfo.source }}</span
|
||||
><span>|</span>
|
||||
<span class="fontSize">
|
||||
【字号：
|
||||
<span @click="changeSize('big')">大</span>
|
||||
@ -43,7 +43,7 @@ const detailInfo = ref({
|
||||
title: '完善强农惠农富农支持制度',
|
||||
date: '2024-02-21',
|
||||
source: '农民日报',
|
||||
author: '汪敏',
|
||||
flow: '4561',
|
||||
content: '',
|
||||
});
|
||||
|
||||
@ -63,7 +63,7 @@ const changeSize = (size) => {
|
||||
<style lang="scss" scoped>
|
||||
.subTitle {
|
||||
span {
|
||||
margin: 0 10px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
@ -82,7 +82,7 @@ const changeSize = (size) => {
|
||||
.fontSize {
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin: 0 10px;
|
||||
margin: 0 5px;
|
||||
&:hover {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
<div class="product-card">
|
||||
<div style="padding: 20px; display: flex; justify-content: space-between">
|
||||
<div style="display: flex">
|
||||
<img :src="getAssetsFile('images/finance/nyyh.png')" width="120px" alt="" />
|
||||
<img :src="getAssetsFile(currentDetail.img)" width="120px" alt="" />
|
||||
<div style="display: flex; align-items: center">
|
||||
<div style="font-size: 20px; font-weight: bold; margin: 0 20px">惠农e贷</div>
|
||||
<div style="font-size: 20px; font-weight: bold; margin: 0 20px">{{ currentDetail.title }}</div>
|
||||
<div style="display: flex" class="tags">
|
||||
<div>额度高</div>
|
||||
<div>政策扶持</div>
|
||||
@ -40,7 +40,9 @@
|
||||
</div>
|
||||
<div style="font-size: 18px">
|
||||
<div class="subs">担保方式：<span>信用、抵押</span></div>
|
||||
<div class="subs">所属机构：<span>农业银行</span></div>
|
||||
<div class="subs">
|
||||
所属机构：<span>{{ currentDetail.type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 18px">
|
||||
<div class="subs">还款方式：<span>等额本息、先息后本</span></div>
|
||||
@ -48,30 +50,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px; padding: 20px">
|
||||
<div v-for="(item, index) in currentDetail.content" :key="index">
|
||||
<div style="padding: 10px 20px">
|
||||
<div style="display: flex">
|
||||
<img :src="getAssetsFile('images/finance/productInt.png')" alt="" height="40" />
|
||||
<!-- <img :src="getAssetsFile('images/finance/productInt.png')" alt="" height="40" />-->
|
||||
<div class="titles">
|
||||
<div>产品介绍</div>
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="underLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
惠农e贷是中国农业银行依托互联网大数据技术，专门为农民设计的一款线上化、批量化、便捷化、普惠化的贷款产品。创新运用互联网大数据分析技术，采取线上线下相结合方式办理贷款。
|
||||
</div>
|
||||
<div style="padding: 20px">
|
||||
<div style="display: flex">
|
||||
<img :src="getAssetsFile('images/finance/customs.png')" alt="" height="40" />
|
||||
<div class="titles">
|
||||
<div>适用客户</div>
|
||||
<div class="underLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents" style="text-indent: 0">
|
||||
广泛覆盖从事特色产业经营、农村电商购销、农业产业链供销以及在农行有金融资产或信贷关系等客户，贷款可用于生产经营和消费，包括但不限于以下范围：<br />1.在农行存款、理财、基金等金融资产达到一定标准的农户。<br />2.在农行办理住房贷款且尚未结清的农户。<br />3.在农行办理过农户贷款且信用记录良好的农户。<br />4.从事茶叶、林果、蔬菜、烟草、谷物种植和畜牧、家禽、渔业养殖等农行认可的特色产业经营农户。<br />5.农行认可的信用村内有资产、有收入、有诚信的农户。<br />6.与农行合作的农业产业化龙头企业上下游农户。<br />7.与农行合作的电商平台上下游购销农户。<br />8.纳入政府增信机制或融资性担保公司担保的农户。
|
||||
<div class="contents" v-html="item.content"></div>
|
||||
</div>
|
||||
<!-- <div style="padding: 20px">-->
|
||||
<!-- <div style="display: flex">-->
|
||||
<!-- <!– <img :src="getAssetsFile('images/finance/customs.png')" alt="" height="40" />–>-->
|
||||
<!-- <div class="titles">-->
|
||||
<!-- <div>适用客户</div>-->
|
||||
<!-- <div class="underLine"></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="contents" style="text-indent: 0">-->
|
||||
<!-- 广泛覆盖从事特色产业经营、农村电商购销、农业产业链供销以及在农行有金融资产或信贷关系等客户，贷款可用于生产经营和消费，包括但不限于以下范围：<br />1.在农行存款、理财、基金等金融资产达到一定标准的农户。<br />2.在农行办理住房贷款且尚未结清的农户。<br />3.在农行办理过农户贷款且信用记录良好的农户。<br />4.从事茶叶、林果、蔬菜、烟草、谷物种植和畜牧、家禽、渔业养殖等农行认可的特色产业经营农户。<br />5.农行认可的信用村内有资产、有收入、有诚信的农户。<br />6.与农行合作的农业产业化龙头企业上下游农户。<br />7.与农行合作的电商平台上下游购销农户。<br />8.纳入政府增信机制或融资性担保公司担保的农户。-->
|
||||
<!-- </div>-->
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
@ -79,7 +81,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '../../../utils/index.js';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@ -88,6 +90,70 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
// #region
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const detailId = route.query.id;
|
||||
|
||||
const mockData = ref([
|
||||
{
|
||||
id: 1,
|
||||
img: 'images/finance/nyyh.png',
|
||||
title: '惠农e贷',
|
||||
type: '农业银行',
|
||||
content: [
|
||||
{
|
||||
title: '一、产品简介',
|
||||
content:
|
||||
'惠农e贷是中国农业银行专为广大农民量身打造的便捷高效线上贷款产品，一部手机实现在线申请、在线取款、在线还款，农民\n' + '足不出户办理贷款。',
|
||||
},
|
||||
{
|
||||
title: '二、产品优势',
|
||||
content:
|
||||
'<p>快：批量作业、自动授信、自动放贷，线上7×24小时服务。</p><p>准：精准对接贷款需求，系统自动核定贷款额度。</p><p>简：申请简便，即可手机银行线上自助申请，也可网点柜台提交申请，借款还款手机分分钟搞定。</p><p>信：符合条件可办理纯信用无担保贷款，也可选用抵押、保证担保贷款。</p><p>惠：利率优惠、随借随还、循环使用，实际使用贷款按日起息，不用款不计利息。</p>',
|
||||
},
|
||||
{
|
||||
title: '三、贷款要素',
|
||||
content:
|
||||
'贷款额度：3000元起步，最高不超过50万元。<p>贷款期限：根据您的生产经营周期及收入等情况综合确定，最长不超过8年。</p><p>贷款利率：根据您的信用状况、担保方式等情况综合确定。</p><p>还款方式：根据贷款期限可灵活选用定期结息到期还本、一次性利随本清、等额本息分期还款等多种方式。</p>',
|
||||
},
|
||||
{
|
||||
title: '四、适用对象',
|
||||
content:
|
||||
'惠农e贷全面支持农村和城郊结合部的种植养殖、生产加工、商贸流通等一二三类产业。<p>种植养殖：牛、羊、猪、鸡等养殖，水稻、玉米、小麦、茶叶、花卉、水果等。</p><p>生产加工：禽蛋肉奶食品加工、手工作坊、乡村车间等。</p><p>商贸流通：农家乐、农资店、小卖店、面条馆、理发店、家电维修店、物流配送中心等。</p>',
|
||||
},
|
||||
{
|
||||
title: '五、贷款条件',
|
||||
content: '品行端正、信用记录良好；<p>有固定生产经营项目，有稳定收入来源；</p><p>提供真实、准确、有效的家庭资产、经营、收入等信息资料。</p>',
|
||||
},
|
||||
{
|
||||
title: '六、合作机构信息公示',
|
||||
content: '农户贷款合作机构信息目录',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: 'images/finance/yzcx.png',
|
||||
title: '农贷通',
|
||||
type: '邮政银行',
|
||||
content: [
|
||||
{
|
||||
title: '一、产品简介',
|
||||
content: '向遵纪守法、诚实守信、有劳动能力的农户发放的，用于支持其生产经营性用途以及改善乡村居民生活环境的贷款。',
|
||||
},
|
||||
{
|
||||
title: '二、服务介绍',
|
||||
content:
|
||||
'适用对象：农户。<p>授信额度：单户贷款最高1000万元。</p><p>贷款期限：最长10年。</p><p>担保方式：信用、保证、抵押、质押。</p><p>利率：以各地实际利率为准。</p>',
|
||||
},
|
||||
{
|
||||
title: '三、办理渠道',
|
||||
content: '邮储银行各大开办信贷业务的网点。客户服务热线：95580。',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const currentDetail = ref(mockData.value[0]);
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
@ -95,8 +161,20 @@ const route = useRoute();
|
||||
const goLoan = () => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/finance/integratedSector/loan',
|
||||
query: { id: detailId },
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (detailId) {
|
||||
for (let i in mockData.value) {
|
||||
if (detailId == mockData.value[i].id) {
|
||||
currentDetail.value = mockData.value[i];
|
||||
console.log(currentDetail.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
@ -105,7 +183,7 @@ const goLoan = () => {
|
||||
text-indent: 2em;
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.product-card {
|
||||
border-radius: 16px;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<template #main>
|
||||
<el-card style="border-radius: 16px" :body-style="{ padding: 0 }">
|
||||
<div style="padding: 20px">
|
||||
<img :src="getAssetsFile('images/finance/wydk.png')" style="width: 100%" alt="" />
|
||||
<img :src="getAssetsFile(currentPic)" style="width: 100%" alt="" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
@ -24,11 +24,23 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const id = route.query.id;
|
||||
|
||||
const currentPic = ref('images/finance/wydk.png');
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
onMounted(() => {
|
||||
if (id) {
|
||||
if (id == '1') {
|
||||
currentPic.value = 'images/finance/wydk.png';
|
||||
} else if (id == '2') {
|
||||
currentPic.value = 'images/finance/wydk1.png';
|
||||
}
|
||||
}
|
||||
});
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
|
||||
@ -17,13 +17,7 @@
|
||||
</div>
|
||||
<span :class="n.isOpen ? 'active' : ''" class="item-title">{{ n.title }}</span>
|
||||
<img v-if="n.children && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
|
||||
<img
|
||||
v-if="n.children && !n.isOpen"
|
||||
alt=""
|
||||
:src="getAssetsFile('images/smartFarm/down_1@2x.png')"
|
||||
class="isOpen fz"
|
||||
@click.stop="openList(index)"
|
||||
/>
|
||||
<img v-if="n.children && !n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/down_1@2x.png')" class="isOpen fz" />
|
||||
</div>
|
||||
<div v-if="n.children && n.isOpen" class="item-children">
|
||||
<div v-for="(item, indexC) in n.children" :key="indexC">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user