Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
1c04a438ba
@ -9,13 +9,13 @@ VITE_APP_BASE_API = '/apis'
|
|||||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||||
|
|
||||||
# 阿里云接口地址
|
# 阿里云接口地址
|
||||||
VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||||
VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
|
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9204'
|
||||||
|
|
||||||
# 内网测试库接口地址
|
# 内网测试库接口地址
|
||||||
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||||
# VITE_APP_UPLOAD_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_BASE_URL = 'http://192.168.18.99:8080'
|
||||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.74:8080'
|
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
19
sub-government-affairs-service/components.d.ts
vendored
Normal file
19
sub-government-affairs-service/components.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
AreaCascader: typeof import('./src/components/AreaCascader/index.vue')['default']
|
||||||
|
AreaSelect: typeof import('./src/components/AreaSelect/index.vue')['default']
|
||||||
|
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||||
|
FileUploader: typeof import('./src/components/FileUploader/index.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
TableComponent: typeof import('./src/components/tableComponent.vue')['default']
|
||||||
|
UrlSelect: typeof import('./src/components/UrlSelect/index.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
12388
sub-government-affairs-service/package-lock.json
generated
Normal file
12388
sub-government-affairs-service/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -34,6 +34,7 @@
|
|||||||
"screenfull": "^6.0.2",
|
"screenfull": "^6.0.2",
|
||||||
"splitpanes": "^4.0.3",
|
"splitpanes": "^4.0.3",
|
||||||
"vue": "^3.3.11",
|
"vue": "^3.3.11",
|
||||||
|
"vue-demi": "^0.14.10",
|
||||||
"vue-router": "^4.2.5",
|
"vue-router": "^4.2.5",
|
||||||
"vue-tianditu": "^2.7.6"
|
"vue-tianditu": "^2.7.6"
|
||||||
},
|
},
|
||||||
|
@ -84,7 +84,7 @@ export function delAnimalMedicine(ids) {
|
|||||||
// #region
|
// #region
|
||||||
/* 查询种源 */
|
/* 查询种源 */
|
||||||
export function getSeedList(params) {
|
export function getSeedList(params) {
|
||||||
return request('/inputGoods/provenance/page', {
|
return request('/inputGoods/supervise/provenance/page', {
|
||||||
params,
|
params,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,76 @@
|
|||||||
|
import request from '@/utils/axios';
|
||||||
|
|
||||||
|
/* 种子补贴-列表 */
|
||||||
|
export function getSeedSubsidyRecords(params) {
|
||||||
|
return request('/inputGoods/subsidy/provenance/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子补贴-新增 */
|
||||||
|
export function seedSubsidySave(data) {
|
||||||
|
return request('/inputGoods/subsidy/provenance/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子补贴-编辑 */
|
||||||
|
export function editSeedSubsidy(data) {
|
||||||
|
return request('/inputGoods/subsidy/provenance/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子补贴-删除 */
|
||||||
|
export function delSeedSubsidy(ids) {
|
||||||
|
return request(`/inputGoods/subsidy/provenance/delete/${ids}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 肥料补贴-列表 */
|
||||||
|
export function getFertilizeSubsidyRecords(params) {
|
||||||
|
return request('/inputGoods/subsidy/fertilize/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料补贴-新增 */
|
||||||
|
export function fertilizeSubsidySave(data) {
|
||||||
|
return request('/inputGoods/subsidy/fertilize/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料补贴-编辑 */
|
||||||
|
export function editFertilizeSubsidy(data) {
|
||||||
|
return request('/inputGoods/subsidy/fertilize/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料补贴-删除 */
|
||||||
|
export function delFertilizeSubsidy(ids) {
|
||||||
|
return request(`/inputGoods/subsidy/fertilize/delete/${ids}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 农药补贴-列表 */
|
||||||
|
export function getPesticideSubsidyRecords(params) {
|
||||||
|
return request('/inputGoods/subsidy/pesticide/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药补贴-新增 */
|
||||||
|
export function pesticideSubsidySave(data) {
|
||||||
|
return request('/inputGoods/subsidy/pesticide/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药补贴-编辑 */
|
||||||
|
export function editPesticideSubsidy(data) {
|
||||||
|
return request('/inputGoods/subsidy/pesticide/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药补贴-删除 */
|
||||||
|
export function delPesticideSubsidy(ids) {
|
||||||
|
return request(`/inputGoods/subsidy/pesticide/delete/${ids}`);
|
||||||
|
}
|
@ -0,0 +1,81 @@
|
|||||||
|
import request from '@/utils/axios';
|
||||||
|
|
||||||
|
/* 种子使用监管-列表 */
|
||||||
|
export function getSeedUseRegulatoryRecords(params) {
|
||||||
|
return request('/inputGoods/supervise/provenance/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子使用监管-新增 */
|
||||||
|
export function seedUseRegulatorySave(data) {
|
||||||
|
return request('/inputGoods/supervise/provenance/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子使用监管-编辑 */
|
||||||
|
export function editSeedUseRegulatory(data) {
|
||||||
|
return request('/inputGoods/supervise/provenance/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 种子使用监管-删除 */
|
||||||
|
export function delSeedUseRegulatory(ids) {
|
||||||
|
return request(`/inputGoods/supervise/provenance/delete/${ids}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 获取详情-通用,传入url和参数 */
|
||||||
|
export function getRowDetails({ url, id }) {
|
||||||
|
return request(`${url}${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 肥料使用监管-列表 */
|
||||||
|
export function getFertilizeUseRegulatoryRecords(params) {
|
||||||
|
return request('/inputGoods/supervise/fertilize/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料使用监管-新增 */
|
||||||
|
export function fertilizeUseRegulatorySave(data) {
|
||||||
|
return request('/inputGoods/supervise/fertilize/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料使用监管-编辑 */
|
||||||
|
export function editFertilizeUseRegulatory(data) {
|
||||||
|
return request('/inputGoods/supervise/fertilize/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 肥料使用监管-删除 */
|
||||||
|
export function delFertilizeUseRegulatory(ids) {
|
||||||
|
return request(`/inputGoods/supervise/fertilize/delete/${ids}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 农药使用监管-列表 */
|
||||||
|
export function getPesticideUseRegulatoryRecords(params) {
|
||||||
|
return request('/inputGoods/supervise/pesticide/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药使用监管-新增 */
|
||||||
|
export function pesticideUseRegulatorySave(data) {
|
||||||
|
return request('/inputGoods/supervise/pesticide/save', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药使用监管-编辑 */
|
||||||
|
export function editPesticideUseRegulatory(data) {
|
||||||
|
return request('/inputGoods/supervise/pesticide/edit', {
|
||||||
|
data,
|
||||||
|
method: 'PUT',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/* 农药使用监管-删除 */
|
||||||
|
export function delPesticideUseRegulatory(ids) {
|
||||||
|
return request(`/inputGoods/supervise/pesticide/delete/${ids}`);
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 472 KiB |
@ -9,12 +9,6 @@ const inputSuppliesRoutes = [
|
|||||||
redirect: '/sub-government-affairs-service/material/pesticide',
|
redirect: '/sub-government-affairs-service/material/pesticide',
|
||||||
meta: { title: '农产品种植管理', icon: 'FullScreen' },
|
meta: { title: '农产品种植管理', icon: 'FullScreen' },
|
||||||
children: [
|
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',
|
path: '/sub-government-affairs-service/variety-record',
|
||||||
name: 'PlantVarietyRecord',
|
name: 'PlantVarietyRecord',
|
||||||
@ -25,31 +19,107 @@ const inputSuppliesRoutes = [
|
|||||||
path: '/sub-government-affairs-service/material/annualPlans',
|
path: '/sub-government-affairs-service/material/annualPlans',
|
||||||
name: 'annualPlans',
|
name: 'annualPlans',
|
||||||
component: () => import('@/views/inputSuppliesManage/material/annualPlan/index.vue'),
|
component: () => import('@/views/inputSuppliesManage/material/annualPlan/index.vue'),
|
||||||
meta: { title: '农产品种植进度管理', icon: 'Timer' },
|
meta: { title: '农产品种植计划管理', icon: 'Timer' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/material/seed',
|
path: '/sub-government-affairs-service/planting-base',
|
||||||
name: 'input-supplies-seed',
|
name: 'PlantingBase',
|
||||||
component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
|
component: () => import('@/views/planting-management/planting-base/index.vue'),
|
||||||
meta: { title: '种子种苗管理', icon: 'Watermelon' },
|
meta: { title: '种植基地管理', icon: 'Crop' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/material/fertilizer',
|
path: '/sub-government-affairs-service/planting-batch',
|
||||||
name: 'input-supplies-fertilizer',
|
name: 'PlantingBatch',
|
||||||
component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
|
component: () => import('@/views/planting-management/planting-batch/index.vue'),
|
||||||
meta: { title: '肥料管理', icon: 'Grid' },
|
meta: { title: '种植批次管理', icon: 'Connection' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/material/pesticide',
|
path: '/sub-government-affairs-service/agricultural-work',
|
||||||
name: 'input-supplies-pesticide',
|
name: 'AgriculturalWork',
|
||||||
component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
|
component: () => import('@/views/planting-management/agricultural-work/index.vue'),
|
||||||
meta: { title: '农药管理', icon: 'Orange' },
|
meta: { title: '农事作业管理', icon: 'Notification' },
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: '/sub-government-affairs-service/material/seed',
|
||||||
|
// name: 'input-supplies-seed',
|
||||||
|
// component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
|
||||||
|
// 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' },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/supervisionOfInputs ',
|
||||||
|
name: 'supervisionOfInputs',
|
||||||
|
redirect: '/sub-government-affairs-service/supervisionOfInputs/seedRegulation',
|
||||||
|
meta: { title: '投入品使用监管', icon: 'Connection' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/statistics',
|
||||||
|
name: 'Statistics',
|
||||||
|
component: () => import('@/views/planting-management/statistics/index.vue'),
|
||||||
|
meta: { title: '使用监管概况统计', icon: '' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/sub-government-affairs-service/material/others',
|
path: '/sub-government-affairs-service/supervisionOfInputs/seedRegulation',
|
||||||
name: 'input-supplies-others',
|
name: 'seedRegulation',
|
||||||
component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
|
component: () => import('@/views/inputSuppliesManage/supervisionOfInputs/seedRegulation.vue'),
|
||||||
meta: { title: '其他投入品管理', icon: 'TakeawayBox' },
|
meta: { title: '种子使用监管', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/supervisionOfInputs/fertilizerRegulation',
|
||||||
|
name: 'fertilizerRegulation',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/supervisionOfInputs/fertilizerRegulation.vue'),
|
||||||
|
meta: { title: '肥料使用监管', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/supervisionOfInputs/pesticideRegulation',
|
||||||
|
name: 'pesticideRegulation',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/supervisionOfInputs/pesticideRegulation.vue'),
|
||||||
|
meta: { title: '农药使用监管', icon: '' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/subsidyManage',
|
||||||
|
name: 'subsidyManage',
|
||||||
|
redirect: '/sub-government-affairs-service/subsidyManage/seedSubsidy',
|
||||||
|
meta: { title: '补贴管理', icon: 'Connection' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/subsidyManage/seedSubsidy',
|
||||||
|
name: 'seedSubsidy',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/subsidyManage/seedSubsidy.vue'),
|
||||||
|
meta: { title: '种子补贴', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/subsidyManage/fertilizerSubsidy',
|
||||||
|
name: 'fertilizerSubsidy',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/subsidyManage/fertilizerSubsidy.vue'),
|
||||||
|
meta: { title: '肥料补贴', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-government-affairs-service/subsidyManage/pesticideSubsidy',
|
||||||
|
name: 'pesticideSubsidy',
|
||||||
|
component: () => import('@/views/inputSuppliesManage/subsidyManage/pesticideSubsidy.vue'),
|
||||||
|
meta: { title: '农药补贴', icon: '' },
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -9,12 +9,12 @@ const landsRoutes = [
|
|||||||
redirect: '/sub-government-affairs-service/plantPlan',
|
redirect: '/sub-government-affairs-service/plantPlan',
|
||||||
meta: { title: '土地管理', icon: 'Grape' },
|
meta: { title: '土地管理', icon: 'Grape' },
|
||||||
children: [
|
children: [
|
||||||
{
|
// {
|
||||||
path: '/sub-government-affairs-service/landsManage',
|
// path: '/sub-government-affairs-service/landsManage',
|
||||||
name: 'landsManage',
|
// name: 'landsManage',
|
||||||
component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
// component: () => import('@/views/landManage/component/landsManage/index.vue'),
|
||||||
meta: { title: '土地资源信息登记', icon: '' },
|
// meta: { title: '土地资源信息登记', icon: '' },
|
||||||
},
|
// },
|
||||||
// {
|
// {
|
||||||
// path: '/sub-government-affairs-service/plantPlan',
|
// path: '/sub-government-affairs-service/plantPlan',
|
||||||
// name: 'plantPlan',
|
// name: 'plantPlan',
|
||||||
|
@ -82,6 +82,7 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.table-cont {
|
.table-cont {
|
||||||
|
@ -37,8 +37,8 @@
|
|||||||
>
|
>
|
||||||
<!-- 自定义-操作 -->
|
<!-- 自定义-操作 -->
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<el-button type="primary" @click="seeDetails(slotProps.row)">详情</el-button>
|
<!-- <el-button type="primary" @click="seeDetails(slotProps.row)">详情</el-button> -->
|
||||||
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
<!-- <el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button> -->
|
||||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</tableComponent>
|
</tableComponent>
|
||||||
@ -76,7 +76,7 @@
|
|||||||
:clearable="false"
|
:clearable="false"
|
||||||
type="date"
|
type="date"
|
||||||
value-format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
||||||
placeholder="请选择起始日期"
|
placeholder="请选择检测时间"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="检测结果" prop="detectionResult" class="dialog-form-item">
|
<el-form-item label="检测结果" prop="detectionResult" class="dialog-form-item">
|
||||||
@ -199,14 +199,14 @@ const tableLoading = ref(false);
|
|||||||
const tableTotal = ref(0);
|
const tableTotal = ref(0);
|
||||||
const columns = ref([
|
const columns = ref([
|
||||||
// { prop: "id", label: "ID" },
|
// { prop: "id", label: "ID" },
|
||||||
{ prop: 'name', label: '类别名称' },
|
{ prop: 'name', label: '姓名' },
|
||||||
{ prop: 'phone', label: '联系方式' },
|
{ prop: 'phone', label: '联系方式' },
|
||||||
{ prop: 'landName', label: '用药地块' },
|
{ prop: 'landName', label: '用药地块' },
|
||||||
{ prop: 'detectionTime', label: '检测时间' },
|
{ prop: 'detectionTime', label: '检测时间' },
|
||||||
{ prop: 'detectionResult', label: '检测结果' },
|
{ prop: 'detectionResult', label: '检测结果' },
|
||||||
{ prop: 'detectionUnit', label: '检测单位' },
|
{ prop: 'detectionUnit', label: '检测单位' },
|
||||||
// { prop: 'status', label: '检测报告(是否上传)' },
|
{ prop: 'isUpload', label: '检测报告(是否上传)' },
|
||||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
]);
|
]);
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
formInline.current = page;
|
formInline.current = page;
|
||||||
|
@ -38,11 +38,11 @@
|
|||||||
@page-change="handlePaginationChange"
|
@page-change="handlePaginationChange"
|
||||||
>
|
>
|
||||||
<!-- 自定义-操作 -->
|
<!-- 自定义-操作 -->
|
||||||
<template #action="slotProps">
|
<!-- <template #action="slotProps">
|
||||||
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
</template>
|
</template> -->
|
||||||
</tableComponent>
|
</tableComponent>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -136,13 +136,30 @@ const selectedIds = ref([]);
|
|||||||
const tableLoading = ref(false);
|
const tableLoading = ref(false);
|
||||||
const tableTotal = ref(0);
|
const tableTotal = ref(0);
|
||||||
const columns = ref([
|
const columns = ref([
|
||||||
{ prop: 'seedName', label: '种子种苗名称' },
|
// 行政区划编码
|
||||||
{ prop: 'varietyName', label: '品种名称' },
|
{ prop: 'regionCode', label: '行政区划编码' },
|
||||||
{ prop: 'brand', label: '品牌' },
|
// 行政区划名称
|
||||||
{ prop: 'manufacturer', label: '生产厂家' },
|
{ prop: 'regionCode', label: '行政区划名称' },
|
||||||
{ prop: 'classifyName', label: '分类' },
|
// 网格编码
|
||||||
{ prop: 'productUnit', label: '产品规格' },
|
{ prop: 'gridId', label: '网格编码' },
|
||||||
{ prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
// 网格名称
|
||||||
|
{ prop: 'gridName', label: '网格名称' },
|
||||||
|
// 地块编号
|
||||||
|
{ prop: 'landId', label: '地块编号' },
|
||||||
|
// 地块名称
|
||||||
|
{ prop: 'landName', label: '地块名称' },
|
||||||
|
// 种子编号
|
||||||
|
{ prop: 'provenanceId', label: '种子编号' },
|
||||||
|
{ prop: 'provenanceName', label: '种子种苗名称' },
|
||||||
|
// 使用量
|
||||||
|
{ prop: 'useNumber', label: '使用量' },
|
||||||
|
// 使用时间
|
||||||
|
{ prop: 'useTime', label: '使用时间' },
|
||||||
|
// 生成经营主体编码
|
||||||
|
{ prop: 'businessEntityCode', label: '生成经营主体编码' },
|
||||||
|
// 生产经营主体名称
|
||||||
|
{ prop: 'businessEntityName', label: '生产经营主体名称' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
]);
|
]);
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
formInline.current = page;
|
formInline.current = page;
|
||||||
|
@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="container-custom">
|
||||||
|
<h2 class="custom-h2">肥料补贴</h2>
|
||||||
|
<div ref="searchBarRef" class="search-box">
|
||||||
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-toolbar">
|
||||||
|
<!-- <el-button type="primary" icon="plus" @click="addItem()">新增</el-button> -->
|
||||||
|
<el-tabs v-model="formInline.status" class="demo-tabs" @tab-click="handleChangeStatus">
|
||||||
|
<el-tab-pane label="已通过" :name="1" :value="1"></el-tab-pane>
|
||||||
|
<el-tab-pane label="已驳回" :name="2" :value="2"></el-tab-pane>
|
||||||
|
<el-tab-pane label="待审核" :name="3" :value="3"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<template #action="slotProps">
|
||||||
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</tableComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||||
|
<el-cascader
|
||||||
|
v-model="dialogForm.classifyId"
|
||||||
|
:options="seedTypeDialogList"
|
||||||
|
:props="cascaderProps"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="handleCascaderChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import { getFertilizeSubsidyRecords, fertilizeSubsidySave, editFertilizeSubsidy, delFertilizeSubsidy } from '@/apis/inputSuppliesApi/subsidyManage';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
status: 1,
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
const handleChangeStatus = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'name', label: '申请人姓名' },
|
||||||
|
{ prop: 'idCard', label: '身份证号' },
|
||||||
|
{ prop: 'gridName', label: '所属网格' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'bankAccount', label: '银行账户信息' },
|
||||||
|
{ prop: 'applicantType', label: '申请人身份' },
|
||||||
|
{ prop: 'landNumber', label: '地块编号' },
|
||||||
|
{ prop: 'planLocation', label: '种植地点' },
|
||||||
|
{ prop: 'cropType', label: '种植作物种类' },
|
||||||
|
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getFertilizeSubsidyRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
const seedTypeChange = () => {
|
||||||
|
console.log(formInline.seedTypeId);
|
||||||
|
// 重新获取表格数据,需添加参数
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择蔬菜种苗',
|
||||||
|
trigger: ['change', 'blur'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
// console.log('要编辑的行: ', row);
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
const deleteGoods = async (ids) => {
|
||||||
|
try {
|
||||||
|
let res = await delFertilizeSubsidy(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await fertilizeSubsidySave(param);
|
||||||
|
} else {
|
||||||
|
response = await editFertilizeSubsidy(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const cancelDialog = async () => {
|
||||||
|
restDialogForm();
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
};
|
||||||
|
const restDialogForm = () => {
|
||||||
|
Object.assign(dialogForm, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([]);
|
||||||
|
const seedTypeDialogList = ref([]);
|
||||||
|
const getSeedTypeList = async () => {
|
||||||
|
try {
|
||||||
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 级联选择器配置
|
||||||
|
const cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
// getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.file-uploader__upload) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="container-custom">
|
||||||
|
<h2 class="custom-h2">农药补贴</h2>
|
||||||
|
<div ref="searchBarRef" class="search-box">
|
||||||
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-toolbar">
|
||||||
|
<!-- <el-button type="primary" icon="plus" @click="addItem()">新增</el-button> -->
|
||||||
|
<el-tabs v-model="formInline.status" class="demo-tabs" @tab-click="handleChangeStatus">
|
||||||
|
<el-tab-pane label="已通过" :name="1" :value="1"></el-tab-pane>
|
||||||
|
<el-tab-pane label="已驳回" :name="2" :value="2"></el-tab-pane>
|
||||||
|
<el-tab-pane label="待审核" :name="3" :value="3"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<template #action="slotProps">
|
||||||
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</tableComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||||
|
<el-cascader
|
||||||
|
v-model="dialogForm.classifyId"
|
||||||
|
:options="seedTypeDialogList"
|
||||||
|
:props="cascaderProps"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="handleCascaderChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
·
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import { getPesticideSubsidyRecords, pesticideSubsidySave, editPesticideSubsidy, delPesticideSubsidy } from '@/apis/inputSuppliesApi/subsidyManage';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
status: 1,
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
const handleChangeStatus = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'name', label: '申请人姓名' },
|
||||||
|
{ prop: 'idCard', label: '身份证号' },
|
||||||
|
{ prop: 'gridName', label: '所属网格' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'bankAccount', label: '银行账户信息' },
|
||||||
|
{ prop: 'applicantType', label: '申请人身份' },
|
||||||
|
{ prop: 'landNumber', label: '地块编号' },
|
||||||
|
{ prop: 'planLocation', label: '种植地点' },
|
||||||
|
{ prop: 'cropType', label: '种植作物种类' },
|
||||||
|
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getPesticideSubsidyRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
const seedTypeChange = () => {
|
||||||
|
console.log(formInline.seedTypeId);
|
||||||
|
// 重新获取表格数据,需添加参数
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择蔬菜种苗',
|
||||||
|
trigger: ['change', 'blur'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
console.log('要编辑的行: ', row);
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
const deleteGoods = async (ids) => {
|
||||||
|
try {
|
||||||
|
let res = await delPesticideSubsidy(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await pesticideSubsidySave(param);
|
||||||
|
} else {
|
||||||
|
response = await editPesticideSubsidy(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const cancelDialog = async () => {
|
||||||
|
restDialogForm();
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
};
|
||||||
|
const restDialogForm = () => {
|
||||||
|
Object.assign(dialogForm, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([]);
|
||||||
|
const seedTypeDialogList = ref([]);
|
||||||
|
const getSeedTypeList = async () => {
|
||||||
|
try {
|
||||||
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 级联选择器配置
|
||||||
|
const cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
// getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.file-uploader__upload) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,426 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="container-custom">
|
||||||
|
<h2 class="custom-h2">种子补贴</h2>
|
||||||
|
<div ref="searchBarRef" class="search-box">
|
||||||
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-toolbar">
|
||||||
|
<!-- <el-button type="primary" icon="plus" @click="addItem()">新增</el-button> -->
|
||||||
|
<el-tabs v-model="formInline.status" class="demo-tabs" @tab-click="handleChangeStatus">
|
||||||
|
<el-tab-pane label="已通过" :name="1" :value="1"></el-tab-pane>
|
||||||
|
<el-tab-pane label="已驳回" :name="2" :value="2"></el-tab-pane>
|
||||||
|
<el-tab-pane label="待审核" :name="3" :value="3"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<template #action="slotProps">
|
||||||
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</tableComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form :inline="true" :label-width="'auto'">
|
||||||
|
<el-form-item label="地块编号" prop="seedName">
|
||||||
|
<el-input v-model="dialogForm.id" placeholder="请输入地块编号" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="getDetails">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-descriptions title="地块信息" border>
|
||||||
|
<el-descriptions-item label="地块">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属行政区">18100000000</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属网格">Suzhou</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions title="经营主体信息" border>
|
||||||
|
<el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'80'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<div class="dialog-form-title">农药用药详情</div>
|
||||||
|
<el-form-item label="种子编号" prop="name" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.name" clearable placeholder="请输入姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="种子名称" prop="phone" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.phone" clearable placeholder="请输入联系方式" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用量" required prop="useNumber" class="dialog-form-item">
|
||||||
|
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入用药量" style="width: 150px" />
|
||||||
|
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||||
|
<el-option v-for="el in unitList" :key="el.unit" :value="el.unit" :label="el.unit" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用时间" prop="detectionTime" class="dialog-form-item">
|
||||||
|
<el-date-picker v-model="dialogForm.detectionTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import { getSeedSubsidyRecords, seedSubsidySave, editSeedSubsidy, delSeedSubsidy } from '@/apis/inputSuppliesApi/subsidyManage';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
status: 1,
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
const handleChangeStatus = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'name', label: '申请人姓名' },
|
||||||
|
{ prop: 'idCard', label: '身份证号' },
|
||||||
|
{ prop: 'gridName', label: '所属网格' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'bankAccount', label: '银行账户信息' },
|
||||||
|
{ prop: 'applicantType', label: '申请人身份' },
|
||||||
|
{ prop: 'landNumber', label: '地块编号' },
|
||||||
|
{ prop: 'planLocation', label: '种植地点' },
|
||||||
|
{ prop: 'cropType', label: '种植作物种类' },
|
||||||
|
{ prop: 'planArea', label: '种植面积(亩)' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getSeedSubsidyRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
const seedTypeChange = () => {
|
||||||
|
console.log(formInline.seedTypeId);
|
||||||
|
// 重新获取表格数据,需添加参数
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [{ required: true, message: '请选择蔬菜种苗', trigger: ['change', 'blur'] }],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
console.log('查看详情: ', row);
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
console.log('要编辑的行: ', row);
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
console.log('删除操作: ', row);
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
const deleteGoods = async (ids) => {
|
||||||
|
try {
|
||||||
|
let res = await delSeedSubsidy(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await seedSubsidySave(param);
|
||||||
|
} else {
|
||||||
|
response = await editSeedSubsidy(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const cancelDialog = async () => {
|
||||||
|
restDialogForm();
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
};
|
||||||
|
const restDialogForm = () => {
|
||||||
|
Object.assign(dialogForm, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([]);
|
||||||
|
const seedTypeDialogList = ref([]);
|
||||||
|
const getSeedTypeList = async () => {
|
||||||
|
try {
|
||||||
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 级联选择器配置
|
||||||
|
const cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
const unitList = ref([
|
||||||
|
{ id: '1', unit: 'kg' },
|
||||||
|
{ id: '2', unit: 'g' },
|
||||||
|
{ id: '3', unit: 'L' },
|
||||||
|
{ id: '4', unit: 'ml' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
// getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.file-uploader__upload) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,423 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="container-custom">
|
||||||
|
<h2 class="custom-h2">肥料使用监管</h2>
|
||||||
|
<div ref="searchBarRef" class="search-box">
|
||||||
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-toolbar">
|
||||||
|
<el-button type="primary" icon="plus" @click="addItem()">新增</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<template #action="slotProps">
|
||||||
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</tableComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||||
|
<el-cascader
|
||||||
|
v-model="dialogForm.classifyId"
|
||||||
|
:options="seedTypeDialogList"
|
||||||
|
:props="cascaderProps"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="handleCascaderChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import {
|
||||||
|
getFertilizeUseRegulatoryRecords,
|
||||||
|
fertilizeUseRegulatorySave,
|
||||||
|
editFertilizeUseRegulatory,
|
||||||
|
delFertilizeUseRegulatory,
|
||||||
|
getRowDetails,
|
||||||
|
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
seedTypeId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'regionCode', label: '行政区域编码' },
|
||||||
|
{ prop: 'regionName', label: '行政区域名称' },
|
||||||
|
{ prop: 'gridId', label: '网格编码' },
|
||||||
|
{ prop: 'gridName', label: '网格名称' },
|
||||||
|
{ prop: 'landId', label: '地块编码' },
|
||||||
|
{ prop: 'landName', label: '地块名称' },
|
||||||
|
{ prop: 'name', label: '姓名' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'fertilizeId', label: '化肥编号' },
|
||||||
|
{ prop: 'fertilizeName', label: '化肥名称' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getFertilizeUseRegulatoryRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
const seedTypeChange = () => {
|
||||||
|
console.log(formInline.seedTypeId);
|
||||||
|
// 重新获取表格数据,需添加参数
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择蔬菜种苗',
|
||||||
|
trigger: ['change', 'blur'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
// console.log('要编辑的行: ', row);
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
const deleteGoods = async (ids) => {
|
||||||
|
try {
|
||||||
|
let res = await delFertilizeUseRegulatory(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await fertilizeUseRegulatorySave(param);
|
||||||
|
} else {
|
||||||
|
response = await editFertilizeUseRegulatory(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const cancelDialog = async () => {
|
||||||
|
restDialogForm();
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
};
|
||||||
|
const restDialogForm = () => {
|
||||||
|
Object.assign(dialogForm, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([]);
|
||||||
|
const seedTypeDialogList = ref([]);
|
||||||
|
const getSeedTypeList = async () => {
|
||||||
|
try {
|
||||||
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 级联选择器配置
|
||||||
|
const cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.file-uploader__upload) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,421 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="container-custom">
|
||||||
|
<h2 class="custom-h2">农药使用监管</h2>
|
||||||
|
<div ref="searchBarRef" class="search-box">
|
||||||
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-toolbar">
|
||||||
|
<el-button type="primary" icon="plus" @click="addItem()">新增</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<template #action="slotProps">
|
||||||
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</tableComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'120'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<el-form-item label="种子种苗名称" prop="seedName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.seedName" clearable placeholder="请输入种子种苗名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品种名称" prop="varietyName" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.varietyName" clearable placeholder="请输入品种名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="品牌" prop="brand" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.brand" clearable placeholder="请输入品牌" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生产厂家" prop="manufacturer" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.manufacturer" clearable placeholder="请输入生产厂家" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="蔬菜种苗" prop="classifyId" class="dialog-form-item">
|
||||||
|
<el-cascader
|
||||||
|
v-model="dialogForm.classifyId"
|
||||||
|
:options="seedTypeDialogList"
|
||||||
|
:props="cascaderProps"
|
||||||
|
placeholder="请选择"
|
||||||
|
@change="handleCascaderChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品规格" prop="productUnit" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.productUnit" clearable placeholder="请输入产品规格" />
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗主图" prop="photoUrl" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrl" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; display: inline-block">
|
||||||
|
<el-form-item label="种子种苗详情图" prop="photoUrlDetail" class="dialog-form-item" style="width: 100%">
|
||||||
|
<FileUploader v-model="dialogForm.photoUrlDetail" :limit="1" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import {
|
||||||
|
getPesticideUseRegulatoryRecords,
|
||||||
|
pesticideUseRegulatorySave,
|
||||||
|
editPesticideUseRegulatory,
|
||||||
|
delPesticideUseRegulatory,
|
||||||
|
getRowDetails,
|
||||||
|
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
seedTypeId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'name', label: '姓名' },
|
||||||
|
{ prop: 'phone', label: '联系方式' },
|
||||||
|
{ prop: 'landName', label: '用药地块' },
|
||||||
|
{ prop: 'landId', label: '地块编码' },
|
||||||
|
{ prop: 'detectionTime', label: '检测时间' },
|
||||||
|
{ prop: 'detectionResult', label: '检测结果' },
|
||||||
|
{ prop: 'detectionUnit', label: '检测单位' },
|
||||||
|
{ prop: 'isUpload', label: '检测报告(是否上传)' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getPesticideUseRegulatoryRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
const seedTypeChange = () => {
|
||||||
|
console.log(formInline.seedTypeId);
|
||||||
|
// 重新获取表格数据,需添加参数
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择蔬菜种苗',
|
||||||
|
trigger: ['change', 'blur'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
console.log('要编辑的行: ', row);
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
const deleteGoods = async (ids) => {
|
||||||
|
try {
|
||||||
|
let res = await delPesticideUseRegulatory(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await pesticideUseRegulatorySave(param);
|
||||||
|
} else {
|
||||||
|
response = await editPesticideUseRegulatory(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const cancelDialog = async () => {
|
||||||
|
restDialogForm();
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
};
|
||||||
|
const restDialogForm = () => {
|
||||||
|
Object.assign(dialogForm, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([]);
|
||||||
|
const seedTypeDialogList = ref([]);
|
||||||
|
const getSeedTypeList = async () => {
|
||||||
|
try {
|
||||||
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 级联选择器配置
|
||||||
|
const cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.file-uploader__upload) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div>使用监管概览,开发中...</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
@ -0,0 +1,436 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="container-custom">
|
||||||
|
<h2 class="custom-h2">种子使用监管</h2>
|
||||||
|
<div ref="searchBarRef" class="search-box">
|
||||||
|
<div class="search-bar">
|
||||||
|
<div class="search-bar-left">
|
||||||
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="formInline.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="分类" prop="seedTypeId">
|
||||||
|
<el-select v-model="formInline.seedTypeId" placeholder="请选择" clearable @change="seedTypeChange">
|
||||||
|
<el-option v-for="item in seedTypeList" :key="item.id" :value="item.id" :label="item.dataName" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
|
<el-button icon="Refresh" @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-toolbar">
|
||||||
|
<el-button type="primary" icon="plus" @click="addItem()">新增</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<tableComponent
|
||||||
|
:table-data="tableData"
|
||||||
|
:columns="columns"
|
||||||
|
:show-selection="false"
|
||||||
|
:loading="tableLoading"
|
||||||
|
:total="tableTotal"
|
||||||
|
:current-page="formInline.current"
|
||||||
|
:page-size="formInline.size"
|
||||||
|
:show-sort="false"
|
||||||
|
@page-change="handlePaginationChange"
|
||||||
|
>
|
||||||
|
<!-- 自定义-操作 -->
|
||||||
|
<template #action="slotProps">
|
||||||
|
<el-button type="primary" @click="seeDetails(slotProps.row)">查看</el-button>
|
||||||
|
<el-button type="primary" @click="handleEdit(slotProps.row)">编辑</el-button>
|
||||||
|
<el-button @click="handleDelete(slotProps.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</tableComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="800" :close-on-click-modal="false">
|
||||||
|
<el-form :inline="true" :label-width="'auto'">
|
||||||
|
<el-form-item label="地块编号" prop="seedName">
|
||||||
|
<el-input v-model="dialogForm.id" placeholder="请输入地块编号" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="Search" @click="getDetails">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-descriptions title="地块信息" border>
|
||||||
|
<el-descriptions-item label="地块">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属行政区">18100000000</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="所属网格">Suzhou</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions title="经营主体信息" border>
|
||||||
|
<el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系方式">18100000000</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-form
|
||||||
|
ref="dialogRef"
|
||||||
|
:model="dialogForm"
|
||||||
|
:inline="true"
|
||||||
|
:label-width="'80'"
|
||||||
|
:rules="dialogFormRules"
|
||||||
|
:disabled="formDisabled"
|
||||||
|
class="dialog-form-container"
|
||||||
|
>
|
||||||
|
<div class="dialog-form-title">农药用药详情</div>
|
||||||
|
<el-form-item label="种子编号" prop="name" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.name" clearable placeholder="请输入姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="种子名称" prop="phone" class="dialog-form-item">
|
||||||
|
<el-input v-model="dialogForm.phone" clearable placeholder="请输入联系方式" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用量" required prop="useNumber" class="dialog-form-item">
|
||||||
|
<el-input-number v-model="dialogForm.useNumber" :min="1" :controls="false" placeholder="请输入用药量" style="width: 150px" />
|
||||||
|
<el-select v-model="dialogForm.useUnit" placeholder="请选择" style="width: 80px">
|
||||||
|
<el-option v-for="el in unitList" :key="el.unit" :value="el.unit" :label="el.unit" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用时间" prop="detectionTime" class="dialog-form-item">
|
||||||
|
<el-date-picker v-model="dialogForm.detectionTime" :clearable="false" type="date" value-format="YYYY-MM-DD" placeholder="请选择使用时间" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button v-if="!formDisabled" type="primary" @click="onSaveCategory">保存</el-button>
|
||||||
|
<el-button v-if="!formDisabled" @click="cancelDialog">取消</el-button>
|
||||||
|
<el-button v-else @click="cancelDialog">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||||
|
import tableComponent from '@/components/tableComponent.vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import inputSuppliesApi from '@/apis/inputSuppliesApi';
|
||||||
|
const { getMaterailTypes } = inputSuppliesApi;
|
||||||
|
import {
|
||||||
|
getSeedUseRegulatoryRecords,
|
||||||
|
seedUseRegulatorySave,
|
||||||
|
editSeedUseRegulatory,
|
||||||
|
delSeedUseRegulatory,
|
||||||
|
getRowDetails,
|
||||||
|
} from '@/apis/inputSuppliesApi/supervisionOfInputs';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const formInline = reactive({
|
||||||
|
name: '',
|
||||||
|
seedTypeId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
});
|
||||||
|
const searchForm = ref(null);
|
||||||
|
const onSubmit = () => {
|
||||||
|
formInline.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
searchForm.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格数据
|
||||||
|
const tableData = ref([]);
|
||||||
|
const selectedIds = ref([]);
|
||||||
|
const tableLoading = ref(false);
|
||||||
|
const tableTotal = ref(0);
|
||||||
|
const columns = ref([
|
||||||
|
{ prop: 'regionCode', label: '行政区域编码' },
|
||||||
|
{ prop: 'regionName', label: '行政区域名称' },
|
||||||
|
{ prop: 'gridId', label: '网格编码' },
|
||||||
|
{ prop: 'gridName', label: '网格名称' },
|
||||||
|
{ prop: 'landId', label: '地块编码' },
|
||||||
|
{ prop: 'landName', label: '地块名称' },
|
||||||
|
{ prop: 'provenanceId', label: '种子编号' },
|
||||||
|
{ prop: 'provenanceName', label: '种子名称' },
|
||||||
|
{ prop: 'provenanceId', label: '使用量' },
|
||||||
|
{ prop: 'provenanceName', label: '使用时间' },
|
||||||
|
{ prop: 'phone', label: '生产经营主体编码' },
|
||||||
|
{ prop: 'name', label: '生产经营主体名称' },
|
||||||
|
// { prop: 'action', label: '操作', slotName: 'action', width: 230, fixed: 'right' },
|
||||||
|
]);
|
||||||
|
const handlePaginationChange = ({ page, pageSize }) => {
|
||||||
|
formInline.current = page;
|
||||||
|
formInline.size = pageSize;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
const loadData = async () => {
|
||||||
|
tableLoading.value = true;
|
||||||
|
try {
|
||||||
|
let response = await getSeedUseRegulatoryRecords(formInline);
|
||||||
|
tableLoading.value = false;
|
||||||
|
if (response.code == 200) {
|
||||||
|
tableData.value = response.data.records;
|
||||||
|
tableTotal.value = response.data.total;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
tableLoading.value = false;
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractThirdLevelChildren = (dataArray) => {
|
||||||
|
let result = [];
|
||||||
|
// 遍历第一层数组
|
||||||
|
for (const level1 of dataArray) {
|
||||||
|
// 检查第一层是否有children且是数组
|
||||||
|
if (level1.children && Array.isArray(level1.children)) {
|
||||||
|
// 遍历第二层数组
|
||||||
|
for (const level2 of level1.children) {
|
||||||
|
// 检查第二层是否有children且是数组
|
||||||
|
if (level2.children && Array.isArray(level2.children)) {
|
||||||
|
// 将第三层的所有对象添加到结果数组中
|
||||||
|
result.push(...level2.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
const seedTypeChange = () => {
|
||||||
|
console.log(formInline.seedTypeId);
|
||||||
|
// 重新获取表格数据,需添加参数
|
||||||
|
};
|
||||||
|
|
||||||
|
const dialogFormVisible = ref(false);
|
||||||
|
const dialogRef = ref(null);
|
||||||
|
const dialogTitle = ref('新增');
|
||||||
|
const formDisabled = ref(false);
|
||||||
|
const dialogForm = reactive({
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
const dialogFormRules = ref({
|
||||||
|
seedName: [{ required: true, message: '请输入种子种苗名称', trigger: 'blur' }],
|
||||||
|
varietyName: [{ required: true, message: '请输入品种名称', trigger: 'blur' }],
|
||||||
|
brand: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
manufacturer: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
|
||||||
|
classifyId: [{ required: true, message: '请选择蔬菜种苗', trigger: ['change', 'blur'] }],
|
||||||
|
productUnit: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const addItem = async () => {
|
||||||
|
ElMessage.success('点击新增!');
|
||||||
|
// restDialogForm();
|
||||||
|
// dialogTitle.value = '新增';
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const seeDetails = async (row) => {
|
||||||
|
console.log('查看详情: ', row);
|
||||||
|
ElMessage.success('点击查看详情!');
|
||||||
|
// dialogTitle.value = '详情';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = true;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
console.log('要编辑的行: ', row);
|
||||||
|
ElMessage.success('点击编辑!');
|
||||||
|
// dialogTitle.value = '编辑';
|
||||||
|
// setDialogForm(row);
|
||||||
|
// formDisabled.value = false;
|
||||||
|
// dialogFormVisible.value = true;
|
||||||
|
};
|
||||||
|
const getDetails = async () => {
|
||||||
|
let response = await getRowDetails({
|
||||||
|
url: '/inputGoods/supervise/provenance/getDetail/',
|
||||||
|
id: dialogForm.id,
|
||||||
|
});
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
setDialogForm(response.data);
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const setDialogForm = (row) => {
|
||||||
|
dialogForm.id = row.id;
|
||||||
|
dialogForm.seedName = row.seedName;
|
||||||
|
dialogForm.varietyName = row.varietyName;
|
||||||
|
dialogForm.brand = row.brand;
|
||||||
|
dialogForm.manufacturer = row.manufacturer;
|
||||||
|
dialogForm.classifyId = row.classifyId;
|
||||||
|
dialogForm.classifyName = row.classifyName;
|
||||||
|
dialogForm.productSpecification = row.productSpecification;
|
||||||
|
dialogForm.productUnit = row.productUnit;
|
||||||
|
dialogForm.productAttributes = row.productAttributes;
|
||||||
|
dialogForm.photoUrl = row.photoUrl;
|
||||||
|
dialogForm.photoUrlDetail = row.photoUrlDetail;
|
||||||
|
};
|
||||||
|
const handleDelete = (row) => {
|
||||||
|
console.log('删除操作: ', row);
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
deleteGoods(row.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
onSubmit();
|
||||||
|
app.$message.success('删除成功!');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
const deleteGoods = async (ids) => {
|
||||||
|
try {
|
||||||
|
let res = await delSeedUseRegulatory(ids);
|
||||||
|
return res;
|
||||||
|
} catch (error) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const onSaveCategory = () => {
|
||||||
|
console.log(dialogForm);
|
||||||
|
dialogRef.value.validate(async (valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
let param = { ...dialogForm };
|
||||||
|
param.classifyId = dialogForm.classifyId.join(',');
|
||||||
|
param.classifyName = dialogForm.classifyName.join(',');
|
||||||
|
console.log(param);
|
||||||
|
let response;
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
response = await seedUseRegulatorySave(param);
|
||||||
|
} else {
|
||||||
|
response = await editSeedUseRegulatory(param);
|
||||||
|
}
|
||||||
|
if (response.code == 200) {
|
||||||
|
cancelDialog();
|
||||||
|
onSubmit();
|
||||||
|
if (dialogTitle.value == '新增') {
|
||||||
|
ElMessage.success('新增成功!');
|
||||||
|
} else {
|
||||||
|
ElMessage.success('编辑成功!');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.msg);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const cancelDialog = async () => {
|
||||||
|
restDialogForm();
|
||||||
|
dialogFormVisible.value = false;
|
||||||
|
};
|
||||||
|
const restDialogForm = () => {
|
||||||
|
Object.assign(dialogForm, {
|
||||||
|
id: '',
|
||||||
|
seedName: '', //种子种苗名称
|
||||||
|
varietyName: '', //品种名称
|
||||||
|
brand: '', //品牌
|
||||||
|
manufacturer: '', //生产厂家
|
||||||
|
classifyId: '', //蔬菜种苗id
|
||||||
|
classifyName: '', //蔬菜种苗名称
|
||||||
|
productSpecification: '', //产品规格(number)
|
||||||
|
productUnit: '', //产品规格单位
|
||||||
|
productAttributes: '', //自定义商品属性
|
||||||
|
photoUrl: '', //种子种苗主图
|
||||||
|
photoUrlDetail: '', //种子种苗详情图
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const seedTypeList = ref([]);
|
||||||
|
const seedTypeDialogList = ref([]);
|
||||||
|
const getSeedTypeList = async () => {
|
||||||
|
try {
|
||||||
|
let response = await getMaterailTypes({ moduleType: '4' });
|
||||||
|
console.log(response);
|
||||||
|
if (response.code == 200) {
|
||||||
|
if (response.data?.length > 0) {
|
||||||
|
seedTypeDialogList.value = response.data[0].children;
|
||||||
|
let result = extractThirdLevelChildren(response.data);
|
||||||
|
seedTypeList.value = result;
|
||||||
|
console.log(seedTypeDialogList.value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 级联选择器配置
|
||||||
|
const cascaderProps = ref({
|
||||||
|
label: 'dataName', // 选项标签字段名
|
||||||
|
value: 'id', // 选项值字段名
|
||||||
|
children: 'children', // 子选项字段名
|
||||||
|
emitPath: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
});
|
||||||
|
const handleCascaderChange = () => {
|
||||||
|
const selectedNames = getSelectedNames(dialogForm.classifyId);
|
||||||
|
console.log('对应的名称:', selectedNames); // 例如: ['花草类种子', '具体种子名称']
|
||||||
|
// 如果需要,可以将名称也保存到表单数据中
|
||||||
|
dialogForm.classifyName = selectedNames;
|
||||||
|
};
|
||||||
|
const getSelectedNames = (ids) => {
|
||||||
|
if (!ids || !ids.length) return [];
|
||||||
|
|
||||||
|
let names = [];
|
||||||
|
let currentLevel = seedTypeDialogList.value;
|
||||||
|
|
||||||
|
for (const id of ids) {
|
||||||
|
const foundItem = currentLevel.find((item) => item.id === id);
|
||||||
|
if (!foundItem) break;
|
||||||
|
|
||||||
|
names.push(foundItem.dataName);
|
||||||
|
currentLevel = foundItem.children || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return names;
|
||||||
|
};
|
||||||
|
|
||||||
|
const unitList = ref([
|
||||||
|
{ id: '1', unit: 'kg' },
|
||||||
|
{ id: '2', unit: 'g' },
|
||||||
|
{ id: '3', unit: 'L' },
|
||||||
|
{ id: '4', unit: 'ml' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
onSubmit();
|
||||||
|
// getSeedTypeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dialog-form-item {
|
||||||
|
:deep(.el-upload--picture-card) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.file-uploader__upload) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-upload-list__item) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -33,7 +33,6 @@ import Register from './common/Register.vue';
|
|||||||
import FileUpload from './common/FileUpload.vue';
|
import FileUpload from './common/FileUpload.vue';
|
||||||
import { getIllegalList, createLandIllegal, registerLandIllegal, illegalInfo } from '@/apis/land';
|
import { getIllegalList, createLandIllegal, registerLandIllegal, illegalInfo } from '@/apis/land';
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import Attrs from '../../common/Attrs.vue';
|
|
||||||
import { add } from 'lodash';
|
import { add } from 'lodash';
|
||||||
|
|
||||||
const { VITE_APP_BASE_API } = import.meta.env;
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
|
@ -157,19 +157,20 @@ const crudOptions = reactive({
|
|||||||
emptyBtn: false,
|
emptyBtn: false,
|
||||||
height: 'calc(100vh - 340px)',
|
height: 'calc(100vh - 340px)',
|
||||||
column: [
|
column: [
|
||||||
{ label: '农产品名称', prop: 'productName', width: 150 },
|
{ label: '行政区划编码', prop: 'AreaCode', width: 150 },
|
||||||
|
{ label: '行政区划', prop: 'gridAreaName', width: 150 },
|
||||||
|
{ label: '网格编码', prop: 'gridCode', width: 150 },
|
||||||
|
{ label: '网格名称', prop: 'gridName', width: 150 },
|
||||||
|
{ label: '地块编码', prop: 'landCode', width: 150 },
|
||||||
{ label: '地块', prop: 'landName' },
|
{ label: '地块', prop: 'landName' },
|
||||||
|
{ label: '农产品名称', prop: 'productName', width: 150 },
|
||||||
{ label: '面积(亩)', prop: 'area', formatter: (row, cloumn, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
{ 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: 'yieldPerMu', width: 80 },
|
||||||
{ label: '地块总产(公斤)', prop: 'totalYield' },
|
{ label: '地块总产(公斤)', prop: 'totalYield' },
|
||||||
{ label: '品质', prop: 'quality' },
|
{ label: '生产经营主体编码', prop: 'enterCode', width: 150 },
|
||||||
{ label: '价格(元/公斤)', prop: 'price' },
|
{ label: '生产经营主体类型', prop: 'enterType', width: 150 },
|
||||||
{ label: '产值(元)', prop: 'outputValue' },
|
{ label: '生产经营主体名称', prop: 'enterName' },
|
||||||
|
{ label: '是否溯源', prop: 'isTrace' },
|
||||||
],
|
],
|
||||||
actions: [
|
actions: [
|
||||||
{
|
{
|
||||||
|
@ -1,11 +1,18 @@
|
|||||||
export const mockData = [
|
export const mockData = [
|
||||||
{
|
{
|
||||||
|
AreaCode: '530501', // 行政区划编码
|
||||||
|
gridCode: 'G001', // 网格编码
|
||||||
|
landCode: 'L001', // 地块编码
|
||||||
|
enterCode: 'E001', // 生产经营主体编码
|
||||||
|
enterType: '农户', // 生产经营主体类型
|
||||||
|
enterName: '岩温罕', // 生产经营主体名称(原name字段)
|
||||||
|
isTrace: '是', // 是否溯源
|
||||||
|
// 原始字段
|
||||||
productName: '甘蔗',
|
productName: '甘蔗',
|
||||||
landName: '勐撒坝子南片',
|
landName: '勐撒坝子南片',
|
||||||
area: 28,
|
area: 28,
|
||||||
gridName: '勐撒村第三网格',
|
gridName: '勐撒村第三网格',
|
||||||
gridAreaName: '耿马县勐撒镇勐撒村',
|
gridAreaName: '耿马县勐撒镇勐撒村',
|
||||||
name: '岩温罕',
|
|
||||||
contactInfo: '183****8823',
|
contactInfo: '183****8823',
|
||||||
harvestTime: '2023-12-15',
|
harvestTime: '2023-12-15',
|
||||||
yieldPerMu: 5800,
|
yieldPerMu: 5800,
|
||||||
@ -15,12 +22,18 @@ export const mockData = [
|
|||||||
outputValue: 77952,
|
outputValue: 77952,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530502',
|
||||||
|
gridCode: 'G002',
|
||||||
|
landCode: 'L002',
|
||||||
|
enterCode: 'E002',
|
||||||
|
enterType: '农企合作社',
|
||||||
|
enterName: '李秀兰',
|
||||||
|
isTrace: '是',
|
||||||
productName: '茶叶(普洱生茶)',
|
productName: '茶叶(普洱生茶)',
|
||||||
landName: '芒洪古茶山',
|
landName: '芒洪古茶山',
|
||||||
area: 6.5,
|
area: 6.5,
|
||||||
gridName: '芒洪村第一网格',
|
gridName: '芒洪村第一网格',
|
||||||
gridAreaName: '耿马县芒洪拉祜族布朗族乡',
|
gridAreaName: '耿马县芒洪拉祜族布朗族乡',
|
||||||
name: '李秀兰',
|
|
||||||
contactInfo: '138****4671',
|
contactInfo: '138****4671',
|
||||||
harvestTime: '2023-04-08',
|
harvestTime: '2023-04-08',
|
||||||
yieldPerMu: 210,
|
yieldPerMu: 210,
|
||||||
@ -30,12 +43,18 @@ export const mockData = [
|
|||||||
outputValue: 116025,
|
outputValue: 116025,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530503',
|
||||||
|
gridCode: 'G003',
|
||||||
|
landCode: 'L003',
|
||||||
|
enterCode: 'E003',
|
||||||
|
enterType: '农企合作社',
|
||||||
|
enterName: '赵卫东',
|
||||||
|
isTrace: '是',
|
||||||
productName: '澳洲坚果',
|
productName: '澳洲坚果',
|
||||||
landName: '四排山基地',
|
landName: '四排山基地',
|
||||||
area: 35,
|
area: 35,
|
||||||
gridName: '翁达村第五网格',
|
gridName: '翁达村第五网格',
|
||||||
gridAreaName: '耿马县四排山乡翁达村',
|
gridAreaName: '耿马县四排山乡翁达村',
|
||||||
name: '赵卫东',
|
|
||||||
contactInfo: '159****3098',
|
contactInfo: '159****3098',
|
||||||
harvestTime: '2023-09-20',
|
harvestTime: '2023-09-20',
|
||||||
yieldPerMu: 320,
|
yieldPerMu: 320,
|
||||||
@ -45,12 +64,18 @@ export const mockData = [
|
|||||||
outputValue: 207200,
|
outputValue: 207200,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530504',
|
||||||
|
gridCode: 'G004',
|
||||||
|
landCode: 'L004',
|
||||||
|
enterCode: 'E004',
|
||||||
|
enterType: '农户',
|
||||||
|
enterName: '叶嘎',
|
||||||
|
isTrace: '否',
|
||||||
productName: '橡胶',
|
productName: '橡胶',
|
||||||
landName: '河外胶林',
|
landName: '河外胶林',
|
||||||
area: 42,
|
area: 42,
|
||||||
gridName: '河外村第二网格',
|
gridName: '河外村第二网格',
|
||||||
gridAreaName: '耿马县孟定镇河外村',
|
gridAreaName: '耿马县孟定镇河外村',
|
||||||
name: '叶嘎',
|
|
||||||
contactInfo: '187****5546',
|
contactInfo: '187****5546',
|
||||||
harvestTime: '2023-11-01',
|
harvestTime: '2023-11-01',
|
||||||
yieldPerMu: 95,
|
yieldPerMu: 95,
|
||||||
@ -60,12 +85,18 @@ export const mockData = [
|
|||||||
outputValue: 40698,
|
outputValue: 40698,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530505',
|
||||||
|
gridCode: 'G005',
|
||||||
|
landCode: 'L005',
|
||||||
|
enterCode: 'E005',
|
||||||
|
enterType: '农户',
|
||||||
|
enterName: '艾叶',
|
||||||
|
isTrace: '是',
|
||||||
productName: '咖啡(阿拉比卡)',
|
productName: '咖啡(阿拉比卡)',
|
||||||
landName: '福荣坡地',
|
landName: '福荣坡地',
|
||||||
area: 15,
|
area: 15,
|
||||||
gridName: '福荣村第四网格',
|
gridName: '福荣村第四网格',
|
||||||
gridAreaName: '耿马县勐永镇福荣村',
|
gridAreaName: '耿马县勐永镇福荣村',
|
||||||
name: '艾叶',
|
|
||||||
contactInfo: '152****7720',
|
contactInfo: '152****7720',
|
||||||
harvestTime: '2023-02-18',
|
harvestTime: '2023-02-18',
|
||||||
yieldPerMu: 280,
|
yieldPerMu: 280,
|
||||||
@ -75,12 +106,18 @@ export const mockData = [
|
|||||||
outputValue: 112560,
|
outputValue: 112560,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530506',
|
||||||
|
gridCode: 'G006',
|
||||||
|
landCode: 'L006',
|
||||||
|
enterCode: 'E006',
|
||||||
|
enterType: '农户',
|
||||||
|
enterName: '玉罕香',
|
||||||
|
isTrace: '是',
|
||||||
productName: '火龙果(红心)',
|
productName: '火龙果(红心)',
|
||||||
landName: '允捧大棚区',
|
landName: '允捧大棚区',
|
||||||
area: 8,
|
area: 8,
|
||||||
gridName: '允捧村第一网格',
|
gridName: '允捧村第一网格',
|
||||||
gridAreaName: '耿马县孟定镇允捧村',
|
gridAreaName: '耿马县孟定镇允捧村',
|
||||||
name: '玉罕香',
|
|
||||||
contactInfo: '135****9924',
|
contactInfo: '135****9924',
|
||||||
harvestTime: '2023-07-12',
|
harvestTime: '2023-07-12',
|
||||||
yieldPerMu: 1800,
|
yieldPerMu: 1800,
|
||||||
@ -90,12 +127,18 @@ export const mockData = [
|
|||||||
outputValue: 108000,
|
outputValue: 108000,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530507',
|
||||||
|
gridCode: 'G007',
|
||||||
|
landCode: 'L007',
|
||||||
|
enterCode: 'E007',
|
||||||
|
enterType: '农户',
|
||||||
|
enterName: '岩峰',
|
||||||
|
isTrace: '否',
|
||||||
productName: '香蕉(威廉斯)',
|
productName: '香蕉(威廉斯)',
|
||||||
landName: '班幸河谷',
|
landName: '班幸河谷',
|
||||||
area: 20,
|
area: 20,
|
||||||
gridName: '班幸村第四网格',
|
gridName: '班幸村第四网格',
|
||||||
gridAreaName: '耿马县孟定镇班幸村',
|
gridAreaName: '耿马县孟定镇班幸村',
|
||||||
name: '岩峰',
|
|
||||||
contactInfo: '158****3367',
|
contactInfo: '158****3367',
|
||||||
harvestTime: '2023-06-30',
|
harvestTime: '2023-06-30',
|
||||||
yieldPerMu: 3200,
|
yieldPerMu: 3200,
|
||||||
@ -105,12 +148,18 @@ export const mockData = [
|
|||||||
outputValue: 198400,
|
outputValue: 198400,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
AreaCode: '530508',
|
||||||
|
gridCode: 'G008',
|
||||||
|
landCode: 'L008',
|
||||||
|
enterCode: 'E008',
|
||||||
|
enterType: '农企合作社',
|
||||||
|
enterName: '田志强',
|
||||||
|
isTrace: '是',
|
||||||
productName: '砂仁(中药材)',
|
productName: '砂仁(中药材)',
|
||||||
landName: '大浪坝林下',
|
landName: '大浪坝林下',
|
||||||
area: 18,
|
area: 18,
|
||||||
gridName: '大浪坝村第三网格',
|
gridName: '大浪坝村第三网格',
|
||||||
gridAreaName: '耿马县勐简乡大浪坝村',
|
gridAreaName: '耿马县勐简乡大浪坝村',
|
||||||
name: '田志强',
|
|
||||||
contactInfo: '139****7189',
|
contactInfo: '139****7189',
|
||||||
harvestTime: '2023-09-08',
|
harvestTime: '2023-09-08',
|
||||||
yieldPerMu: 65,
|
yieldPerMu: 65,
|
||||||
|
@ -0,0 +1,106 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-page">
|
||||||
|
<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 label="" label-width="0">
|
||||||
|
<AreaCascader v-model:region-code="searchForm.regionCode" v-model:grid-id="searchForm.id" :width="600" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="种植作物" prop="planCrop">
|
||||||
|
<url-select
|
||||||
|
v-model="searchForm.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="handleSearch">查询</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<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="getActions(scope.row)" :data="scope" />
|
||||||
|
</template> -->
|
||||||
|
</avue-crud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, computed } from 'vue';
|
||||||
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
|
import { mockData } from './mockData';
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
const getData = async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||||
|
crudData.value = mockData;
|
||||||
|
pagination.value.total = crudData.value.length;
|
||||||
|
};
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const searchForm = ref({});
|
||||||
|
|
||||||
|
const pagination = ref({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
const crudData = ref([]);
|
||||||
|
const crudOptions = ref({
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
header: false,
|
||||||
|
menu: false,
|
||||||
|
height: 'calc(100vh - 330px)',
|
||||||
|
column: [
|
||||||
|
{ label: '地块编号', prop: 'landNumber', width: 160 },
|
||||||
|
{ label: '地块名称', prop: 'landName', width: 170 },
|
||||||
|
{ label: '面积', prop: 'planArea', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||||
|
{ label: '所属行政区域', prop: 'belongRegion', width: 160 },
|
||||||
|
{ label: '所属网格', prop: 'belongGrid', width: 90 },
|
||||||
|
{ label: '具体位置', prop: 'address', width: 160 },
|
||||||
|
{ label: '基地编码', prop: 'baseCode' },
|
||||||
|
{ label: '基地名称', prop: 'baseName' },
|
||||||
|
{ label: '种植批次编码', prop: 'batchCode' },
|
||||||
|
{ label: '种植批次名称', prop: 'batchName' },
|
||||||
|
{ label: '种植作物', prop: 'crop' },
|
||||||
|
{ label: '作物品种', prop: 'cropBrand' },
|
||||||
|
{ label: '种植开始时间', prop: 'startDate' },
|
||||||
|
{ label: '种植结束时间', prop: 'endDate' },
|
||||||
|
{ label: '经营主体代码', prop: 'businessEntityCode', width: 130 },
|
||||||
|
{ label: '经营主体类型', prop: 'businessEntityType', width: 130 },
|
||||||
|
{ label: '经营主体名称', prop: 'businessEntityName', width: 130 },
|
||||||
|
{ label: '账号(手机号)', prop: 'account', width: 130 },
|
||||||
|
{ label: '信息填报时间', prop: 'fillTime', width: 110 },
|
||||||
|
{ label: '信息审核时间', prop: 'approvalTime', width: 110 },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pagination.value.currentPage = val;
|
||||||
|
};
|
||||||
|
const handleSizeChange = (val) => {
|
||||||
|
pagination.value.pageSize = val;
|
||||||
|
};
|
||||||
|
const getActions = (row) => {
|
||||||
|
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
||||||
|
};
|
||||||
|
const handleView = (row) => {
|
||||||
|
console.log(row);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
@ -0,0 +1,46 @@
|
|||||||
|
export const mockData = [
|
||||||
|
{
|
||||||
|
landNumber: 'DN532526001', // 耿马县行政区划代码开头
|
||||||
|
landName: '四排山坚果标准化种植园', // 耿马县重点坚果产区
|
||||||
|
planArea: 68.3, // 面积(亩)
|
||||||
|
belongRegion: '耿马县四排山乡', // 澳洲坚果主产区
|
||||||
|
belongGrid: '四排山村第2网格', // 实际网格划分
|
||||||
|
address: '四排山乡至芒关村公路西侧坡地', // 具体位置
|
||||||
|
baseCode: 'JD53252601', // 耿马县基地编码
|
||||||
|
baseName: '耿马澳洲坚果产业示范基地', // 省级示范基地
|
||||||
|
batchCode: 'ZZPC5325261801', // 2024年第一批种植
|
||||||
|
batchName: ' 2024年澳洲坚果丰产林项目',
|
||||||
|
crop: '澳洲坚果', // 耿马县"一县一业"主导产业
|
||||||
|
cropBrand: '桂热1号', // 云南主推品种
|
||||||
|
startDate: ' 2024-05-15', // 坚果最佳定植时间
|
||||||
|
endDate: '2025-09-30', // 进入丰产期时间
|
||||||
|
businessEntityCode: 'HZ532526001', // 合作社编码
|
||||||
|
businessEntityType: '合作社',
|
||||||
|
businessEntityName: '耿马四排山坚果种植专业合作社', // 真实合作社
|
||||||
|
account: '159****3098', // 匹配原始数据中坚果种植户
|
||||||
|
fillTime: ' 2024-05-10 09:30',
|
||||||
|
approvalTime: ' 2024-05-12 14:15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
landNumber: 'DN532526002',
|
||||||
|
landName: '芒洪古茶园', // 耿马县芒洪乡著名古茶山
|
||||||
|
planArea: 32.6,
|
||||||
|
belongRegion: ' 耿马县芒洪乡',
|
||||||
|
belongGrid: '芒洪村第1网格',
|
||||||
|
address: '芒洪村后山海拔1800米处',
|
||||||
|
baseCode: 'JD53252602',
|
||||||
|
baseName: '耿马古树茶保护基地',
|
||||||
|
batchCode: 'ZZPC5325262302',
|
||||||
|
batchName: '2023年春茶采摘批次',
|
||||||
|
crop: '茶树',
|
||||||
|
cropBrand: '勐库大叶种', // 临沧市代表性茶树品种
|
||||||
|
startDate: '2023-03-20', // 春茶采摘时间
|
||||||
|
endDate: '2023-04-15',
|
||||||
|
businessEntityCode: 'HZ532526001',
|
||||||
|
businessEntityType: '合作社',
|
||||||
|
businessEntityName: '耿马芒洪茶叶专业合作社', // 真实存在的合作社
|
||||||
|
account: '138****4671', // 匹配原始数据
|
||||||
|
fillTime: '2023-03-15 14:10',
|
||||||
|
approvalTime: '2023-03-16 16:30',
|
||||||
|
},
|
||||||
|
];
|
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-page">
|
||||||
|
<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>
|
||||||
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<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="getActions(scope.row)" :data="scope" />
|
||||||
|
</template> -->
|
||||||
|
</avue-crud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, computed } from 'vue';
|
||||||
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
|
import { mockData } from './mockData';
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
const getData = async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||||
|
crudData.value = mockData;
|
||||||
|
pagination.value.total = crudData.value.length;
|
||||||
|
};
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const searchForm = ref({});
|
||||||
|
const pagination = ref({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
const crudData = ref([]);
|
||||||
|
const crudOptions = ref({
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
header: false,
|
||||||
|
menu: false,
|
||||||
|
height: 'calc(100vh - 330px)',
|
||||||
|
column: [
|
||||||
|
{ label: '基地编码', prop: 'baseCode' },
|
||||||
|
{ label: '基地名称', prop: 'baseName' },
|
||||||
|
{ label: '所属行政区域', prop: 'regionName' },
|
||||||
|
{ label: '所属网格', prop: 'gridName' },
|
||||||
|
{ label: '具体位置', prop: 'adress' },
|
||||||
|
{ label: '经纬度', prop: 'longitude' },
|
||||||
|
{ label: '气候条件', prop: 'weather' },
|
||||||
|
{ label: '海拔(米)', prop: 'altitude' },
|
||||||
|
{ label: '面积(亩)', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||||
|
{ label: '使用状态', prop: 'status' },
|
||||||
|
{ label: '经营主体代码', prop: 'businessCode' },
|
||||||
|
{ label: '经营主体类型', prop: 'businessType' },
|
||||||
|
{ label: '经营主体名称', prop: 'businessSubjectName' },
|
||||||
|
{ label: '创建时间', prop: 'createTime' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pagination.value.currentPage = val;
|
||||||
|
};
|
||||||
|
const handleSizeChange = (val) => {
|
||||||
|
pagination.value.pageSize = val;
|
||||||
|
};
|
||||||
|
const getActions = (row) => {
|
||||||
|
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
||||||
|
};
|
||||||
|
const handleView = (row) => {
|
||||||
|
console.log(row);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
@ -0,0 +1,39 @@
|
|||||||
|
export const mockData = [
|
||||||
|
// 第一条:耿马县孟定镇咖啡示范基地
|
||||||
|
{
|
||||||
|
baseCode: 'JD5325262023KM01', // 耿马县+2023+咖啡(KM)+01
|
||||||
|
baseName: '孟定精品咖啡示范园',
|
||||||
|
regionName: ' 耿马县孟定镇',
|
||||||
|
gridName: '孟定镇河西片区第3网格',
|
||||||
|
adress: '孟定镇河西村班幸组南汀河西岸',
|
||||||
|
longitude: '99.0832°E', // 实际经纬度(孟定镇中心区域)
|
||||||
|
latitude: '23.5521°N',
|
||||||
|
weather: '热带季风气候', // 年均温21.5℃,年降水量1600mm
|
||||||
|
altitude: 850, // 孟定坝区典型海拔
|
||||||
|
area: 286.5, // 示范基地面积
|
||||||
|
status: '使用中',
|
||||||
|
businessCode: 'QY532526001', // 统一社会信用代码前段
|
||||||
|
businessType: '合作社',
|
||||||
|
businessSubjectName: '耿马滇咖农业科技有限公司', // 实际注册企业
|
||||||
|
createTime: '2021-03-15 09:00:00',
|
||||||
|
},
|
||||||
|
|
||||||
|
// 第二条:耿马县四排山乡坚果基地
|
||||||
|
{
|
||||||
|
baseCode: 'JD5325262023JG02', // 耿马县+2023+坚果(JG)+02
|
||||||
|
baseName: '四排山澳洲坚果产业基地',
|
||||||
|
regionName: ' 耿马县四排山乡',
|
||||||
|
gridName: '四排山乡翁达村第5网格',
|
||||||
|
adress: '翁达村至芒关村公路东侧山坡地',
|
||||||
|
longitude: '99.2178°E', // 四排山乡中心区域坐标
|
||||||
|
latitude: '23.7865°N',
|
||||||
|
weather: '南亚热带气候', // 年均温19.8℃,年降水量1400mm
|
||||||
|
altitude: 1200, // 山地种植区典型海拔
|
||||||
|
area: 580, // 连片种植面积
|
||||||
|
status: '使用中',
|
||||||
|
businessCode: 'HZ532526001', // 合作社注册代码
|
||||||
|
businessType: '合作社',
|
||||||
|
businessSubjectName: '耿马四排山坚果种植专业合作社', // 真实合作社
|
||||||
|
createTime: '2018-05-20 14:30:00',
|
||||||
|
},
|
||||||
|
];
|
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div class="custom-page">
|
||||||
|
<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>
|
||||||
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<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="getActions(scope.row)" :data="scope" />
|
||||||
|
</template> -->
|
||||||
|
</avue-crud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, computed } from 'vue';
|
||||||
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
|
import { mockData } from './mockData';
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
const getData = async () => {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||||
|
crudData.value = mockData;
|
||||||
|
pagination.value.total = crudData.value.length;
|
||||||
|
};
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const searchForm = ref({});
|
||||||
|
const pagination = ref({
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
|
});
|
||||||
|
const crudData = ref([]);
|
||||||
|
const crudOptions = ref({
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
header: false,
|
||||||
|
menu: false,
|
||||||
|
height: 'calc(100vh - 330px)',
|
||||||
|
column: [
|
||||||
|
{ label: '基地编码', prop: 'baseCode' },
|
||||||
|
{ label: '种植批次编码', prop: 'plantingBatchCode' },
|
||||||
|
{ label: '种植批次名称', prop: 'plantingBatchName' },
|
||||||
|
{ label: '种植作物', prop: 'cropsName' },
|
||||||
|
{ label: '种植基地编码', prop: 'plantingBaseCode' },
|
||||||
|
{ label: '种植基地', prop: 'plantingBase' },
|
||||||
|
{ label: '所属行政区域', prop: 'district' },
|
||||||
|
{ label: '所属网格', prop: 'gridName' },
|
||||||
|
{ label: '种植开始时间', prop: 'plantingStartTime' },
|
||||||
|
{ label: '种植结束时间', prop: 'plantingEndTime' },
|
||||||
|
{ label: '账号(手机号)', prop: 'account' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const handleCurrentChange = (val) => {
|
||||||
|
pagination.value.currentPage = val;
|
||||||
|
};
|
||||||
|
const handleSizeChange = (val) => {
|
||||||
|
pagination.value.pageSize = val;
|
||||||
|
};
|
||||||
|
const getActions = (row) => {
|
||||||
|
return [{ name: '查看', icon: 'view', event: () => handleView(row) }];
|
||||||
|
};
|
||||||
|
const handleView = (row) => {
|
||||||
|
console.log(row);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
@ -0,0 +1,31 @@
|
|||||||
|
export const mockData = [
|
||||||
|
// 第一条:耿马县咖啡种植数据(孟定镇特色产业)
|
||||||
|
{
|
||||||
|
baseCode: 'JD5325262023KM01', // 基地编码:耿马县+2023+咖啡(KM)+01
|
||||||
|
plantingBatchCode: 'KM-PC20231001', // 种植批次编码:咖啡-批次2023年10月第1批
|
||||||
|
plantingBatchName: '2023年精品咖啡秋植批次',
|
||||||
|
cropsName: '咖啡(阿拉比卡)', // 孟定镇主要种植品种
|
||||||
|
plantingBaseCode: 'JD-MD-ZJ01', // 种植基地编码:孟定-精品01
|
||||||
|
plantingBase: '耿马孟定精品咖啡示范园', // 实际存在的示范基地
|
||||||
|
district: '耿马县孟定镇', // 精确到镇级
|
||||||
|
gridName: '孟定镇河西片区第3网格', // 按当地网格划分
|
||||||
|
plantingStartTime: '2023-06-15', // 咖啡最佳种植期
|
||||||
|
plantingEndTime: '2024-11-30', // 咖啡采收周期
|
||||||
|
account: '159****3098', // 匹配原始数据中咖啡种植户联系方式
|
||||||
|
},
|
||||||
|
|
||||||
|
// 第二条:耿马县澳洲坚果数据(四排山乡主导产业)
|
||||||
|
{
|
||||||
|
baseCode: 'JD5325262023JG02', // 基地编码:耿马县+2023+坚果(JG)+02
|
||||||
|
plantingBatchCode: 'JG-PC20190502', // 种植批次编码:坚果-批次2019年5月第2批
|
||||||
|
plantingBatchName: '2019年澳洲坚果丰产林项目',
|
||||||
|
cropsName: '澳洲坚果', // 四排山乡支柱产业
|
||||||
|
plantingBaseCode: 'JD-SPS-FC01', // 种植基地编码:四排山-丰产01
|
||||||
|
plantingBase: '耿马四排山澳洲坚果标准化基地', // 政府扶持项目
|
||||||
|
district: '耿马县四排山乡', // 精确到乡级
|
||||||
|
gridName: '四排山乡翁达村第5网格', // 对应原始数据中的网格
|
||||||
|
plantingStartTime: '2019-05-20', // 坚果最佳定植时间
|
||||||
|
plantingEndTime: '2026-09-30', // 坚果丰产期开始时间
|
||||||
|
account: '158****3367', // 匹配原始数据中坚果种植户联系方式
|
||||||
|
},
|
||||||
|
];
|
@ -1,9 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-page"></div>
|
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/inputman.png')})`">
|
||||||
|
<!-- <h1>统计数据</h1>
|
||||||
|
<div class="content"></div> -->
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, onMounted, computed } from 'vue';
|
import { ref, watch, onMounted, computed } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
.custom-page {
|
||||||
|
height: calc(100vh - 150px);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -3,9 +3,9 @@
|
|||||||
<SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
|
<SearchBar v-model:search="searchForm" @search="handleSearch" @reset="handleReset" />
|
||||||
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
|
||||||
<!-- <el-tab-pane label="待提交" name="-1" /> -->
|
<!-- <el-tab-pane label="待提交" name="-1" /> -->
|
||||||
<el-tab-pane label="待审核" name="0" />
|
<el-tab-pane label="待审核" name="1" />
|
||||||
<el-tab-pane label="已通过" name="1" />
|
<el-tab-pane label="已通过" name="2" />
|
||||||
<el-tab-pane label="已驳回" name="2" />
|
<el-tab-pane label="已驳回" name="3" />
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<avue-crud
|
<avue-crud
|
||||||
ref="crudRef"
|
ref="crudRef"
|
||||||
@ -16,9 +16,9 @@
|
|||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
>
|
>
|
||||||
<template #menu="scope">
|
<!-- <template #menu="scope">
|
||||||
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
<custom-table-operate :actions="getActions(scope.row)" :data="scope" />
|
||||||
</template>
|
</template> -->
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
<el-dialog v-model="visible" title="查看" width="60%" align-center :draggable="true">
|
<el-dialog v-model="visible" title="查看" width="60%" align-center :draggable="true">
|
||||||
<RecordForm ref="formRef" v-model="formData" :disabled="mode === 'view'" />
|
<RecordForm ref="formRef" v-model="formData" :disabled="mode === 'view'" />
|
||||||
@ -61,6 +61,7 @@ const crudData = ref([]);
|
|||||||
const crudOptions = reactive({
|
const crudOptions = reactive({
|
||||||
...CRUD_OPTIONS,
|
...CRUD_OPTIONS,
|
||||||
header: false,
|
header: false,
|
||||||
|
menu: false,
|
||||||
height: 'calc(100vh - 330px)',
|
height: 'calc(100vh - 330px)',
|
||||||
column: [
|
column: [
|
||||||
{ label: '地块编号', prop: 'landNumber', width: 160 },
|
{ label: '地块编号', prop: 'landNumber', width: 160 },
|
||||||
|
@ -178,14 +178,14 @@ const crudOptions = reactive({
|
|||||||
{ label: '企业负责人', prop: 'contactPerson' },
|
{ label: '企业负责人', prop: 'contactPerson' },
|
||||||
{ label: '联系方式', prop: 'phone' },
|
{ label: '联系方式', prop: 'phone' },
|
||||||
{ label: '企业地址', prop: 'address' },
|
{ label: '企业地址', prop: 'address' },
|
||||||
{ label: '地块数量', prop: 'villageCount' },
|
{ label: '地块数量', prop: 'landCount' },
|
||||||
{ label: '地块编号', prop: 'villageCode' },
|
{ label: '地块编号', prop: 'landNumber' },
|
||||||
{ label: '地块名称', prop: 'villageName' },
|
{ label: '地块名称', prop: 'landName' },
|
||||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||||
{ label: '所属行政区划', prop: 'address' },
|
{ label: '所属行政区划', prop: 'address' },
|
||||||
{ label: '所属网格', prop: 'gridCode' },
|
{ label: '所属网格', prop: 'gridCode' },
|
||||||
{ label: '种植作物', prop: 'primaryProduct' },
|
{ label: '种植作物', prop: 'planCrop' },
|
||||||
{ label: '账号(手机号)', prop: 'account' },
|
{ label: '账号(手机号)', prop: 'phone' },
|
||||||
{ label: '信息录入时间', prop: 'createTime' },
|
{ label: '信息录入时间', prop: 'createTime' },
|
||||||
{ label: '信息更新时间', prop: 'updateTime' },
|
{ label: '信息更新时间', prop: 'updateTime' },
|
||||||
],
|
],
|
||||||
|
@ -208,14 +208,14 @@ const crudOptions = reactive({
|
|||||||
{ label: '联系方式', prop: 'phone' },
|
{ label: '联系方式', prop: 'phone' },
|
||||||
// 地址
|
// 地址
|
||||||
{ label: '地址', prop: 'address', width: '300px' },
|
{ label: '地址', prop: 'address', width: '300px' },
|
||||||
{ label: '地块数量', prop: 'villageCount' },
|
{ label: '地块数量', prop: 'landCount' },
|
||||||
{ label: '地块编号', prop: 'villageCode' },
|
{ label: '地块编号', prop: 'landNumber' },
|
||||||
{ label: '地块名称', prop: 'villageName' },
|
{ label: '地块名称', prop: 'landName' },
|
||||||
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
{ label: '面积', prop: 'area', formatter: (row, column, cellValue) => `${Number(cellValue).toFixed(2)} 亩` },
|
||||||
{ label: '所属行政区划', prop: 'address' },
|
{ label: '所属行政区划', prop: 'address' },
|
||||||
{ label: '所属网格', prop: 'gridCode' },
|
{ label: '所属网格', prop: 'gridCode' },
|
||||||
{ label: '种植作物', prop: 'planCropName' },
|
{ label: '种植作物', prop: 'planCropName' },
|
||||||
{ label: '账号(手机号)', prop: 'account' },
|
{ label: '账号(手机号)', prop: 'phone' },
|
||||||
{ label: '创建时间', prop: 'createTime' },
|
{ label: '创建时间', prop: 'createTime' },
|
||||||
{ label: '更新时间', prop: 'updateTime' },
|
{ label: '更新时间', prop: 'updateTime' },
|
||||||
],
|
],
|
||||||
|
@ -1,401 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="field-management">
|
<div class="mapDiv">
|
||||||
<!-- 左侧面板 -->
|
<tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
|
||||||
<div class="panel left">
|
<!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
|
||||||
<el-input v-model="searchTerm" placeholder="搜索地块名称" clearable style="margin-bottom: 15px"></el-input>
|
<!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
|
||||||
|
<tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
|
||||||
<el-table :data="filteredFields" highlight-current-row style="width: 100%" height="calc(100vh - 300px)" @row-click="selectField">
|
<tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
|
||||||
<el-table-column prop="name" label="名称"></el-table-column>
|
</tdt-map>
|
||||||
<el-table-column prop="area" label="面积(㎡)">
|
|
||||||
<template #default="{ row }">
|
|
||||||
{{ row.area.toFixed(2) }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div class="stats">总面积: {{ totalArea.toFixed(2) }} ㎡</div>
|
|
||||||
|
|
||||||
<div class="button-group">
|
|
||||||
<el-button type="primary" @click="startDrawing">新增地块</el-button>
|
|
||||||
<el-button type="danger" :disabled="!selectedField" @click="removeField">删除地块</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧地图区域 -->
|
|
||||||
<div class="panel right">
|
|
||||||
<tdt-map class="map" :center="mapCenter" :zoom="mapZoom" @init="onMapInit"> </tdt-map>
|
|
||||||
|
|
||||||
<div class="layer-switch">
|
|
||||||
<el-radio-group v-model="layerType" size="small" @change="changeBaseLayer">
|
|
||||||
<el-radio-button label="vector">矢量</el-radio-button>
|
|
||||||
<el-radio-button label="image">影像</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field-layer-switch">
|
|
||||||
<el-switch v-model="showFieldLayer" active-text="显示地块"></el-switch>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="zoom-scale">缩放级别: {{ mapZoom }}, 比例尺: 1:{{ scale.toLocaleString() }}</div>
|
|
||||||
|
|
||||||
<el-dialog v-model="drawDialogVisible" title="新增地块">
|
|
||||||
<el-form>
|
|
||||||
<el-form-item label="地块名称">
|
|
||||||
<el-input v-model="newFieldName"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="地块面积">
|
|
||||||
<el-input :value="newFieldArea.toFixed(2) + ' ㎡'" readonly></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="cancelDrawing">取消</el-button>
|
|
||||||
<el-button type="primary" @click="saveNewField">保存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch } from 'vue';
|
import { reactive, onMounted, ref } from 'vue';
|
||||||
import { TdtMap } from 'vue-tianditu';
|
import { TdtMap, TdtTileLayer } from 'vue-tianditu';
|
||||||
import { ElMessage } from 'element-plus';
|
import { map_config } from '@/config/map';
|
||||||
// import { map_config } from '../../config/map';
|
|
||||||
|
|
||||||
// 模拟接口服务(使用localStorage)
|
const key = map_config.tianditu.token;
|
||||||
const fieldService = {
|
|
||||||
getFields() {
|
|
||||||
const fields = localStorage.getItem('fields');
|
|
||||||
return Promise.resolve(fields ? JSON.parse(fields) : []);
|
|
||||||
},
|
|
||||||
createField(field) {
|
|
||||||
return this.getFields().then((fields) => {
|
|
||||||
field.id = Date.now();
|
|
||||||
fields.push(field);
|
|
||||||
localStorage.setItem('fields', JSON.stringify(fields));
|
|
||||||
return field;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
deleteField(id) {
|
|
||||||
return this.getFields().then((fields) => {
|
|
||||||
const newFields = fields.filter((f) => f.id !== id);
|
|
||||||
localStorage.setItem('fields', JSON.stringify(newFields));
|
|
||||||
return newFields;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// 响应式状态
|
const state = reactive({
|
||||||
const fields = ref([]);
|
center: [100.088, 23.883],
|
||||||
const selectedField = ref(null);
|
zoom: 14,
|
||||||
const searchTerm = ref('');
|
img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||||||
const newFieldName = ref('');
|
cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
||||||
const drawDialogVisible = ref(false);
|
// 添加其他地图层URL
|
||||||
const newFieldCoords = ref([]);
|
// ...
|
||||||
const newFieldArea = ref(0);
|
|
||||||
const layerType = ref('vector');
|
|
||||||
const showFieldLayer = ref(true);
|
|
||||||
const map = ref(null);
|
|
||||||
const mapCenter = ref([100.088, 23.883]);
|
|
||||||
const mapZoom = ref(12);
|
|
||||||
const scale = ref(0);
|
|
||||||
|
|
||||||
// 天地图图层
|
|
||||||
const baseLayers = {
|
|
||||||
vector: null,
|
|
||||||
vectorLabel: null,
|
|
||||||
image: null,
|
|
||||||
imageLabel: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
// 覆盖物图层
|
|
||||||
const overlayLayer = ref(null);
|
|
||||||
|
|
||||||
// 计算属性
|
|
||||||
const filteredFields = computed(() => {
|
|
||||||
const term = searchTerm.value.toLowerCase();
|
|
||||||
return term ? fields.value.filter((f) => f.name.toLowerCase().includes(term)) : fields.value;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const totalArea = computed(() => {
|
// 确保地图有明确的高度
|
||||||
return fields.value.reduce((sum, field) => sum + field.area, 0);
|
const mapHeight = ref('100vh');
|
||||||
});
|
|
||||||
|
|
||||||
// 地图初始化
|
onMounted(() => {
|
||||||
const onMapInit = (mapInstance) => {
|
console.log('地图组件已挂载');
|
||||||
map.value = mapInstance;
|
// 检查天地图API是否加载成功
|
||||||
|
if (window.T) {
|
||||||
// 创建图层
|
console.log('天地图API已加载:', window.T);
|
||||||
baseLayers.vector = new T.TileLayer('vec');
|
|
||||||
baseLayers.vectorLabel = new T.TileLayer('cva');
|
|
||||||
baseLayers.image = new T.TileLayer('img');
|
|
||||||
baseLayers.imageLabel = new T.TileLayer('cia');
|
|
||||||
|
|
||||||
// 添加默认图层
|
|
||||||
map.value.addLayer(baseLayers.image);
|
|
||||||
map.value.addLayer(baseLayers.imageLabel);
|
|
||||||
|
|
||||||
// 创建覆盖物图层
|
|
||||||
overlayLayer.value = new T.Map.OverlayLayer();
|
|
||||||
map.value.addLayer(overlayLayer.value);
|
|
||||||
|
|
||||||
// 添加控件
|
|
||||||
map.value.addControl(new T.Control.Zoom());
|
|
||||||
map.value.addControl(new T.Control.Scale());
|
|
||||||
|
|
||||||
// 事件监听
|
|
||||||
map.value.addEventListener('zoomend', updateScale);
|
|
||||||
map.value.addEventListener('moveend', updateScale);
|
|
||||||
|
|
||||||
// 初始加载数据
|
|
||||||
loadFields();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新比例尺
|
|
||||||
const updateScale = () => {
|
|
||||||
if (map.value) {
|
|
||||||
mapZoom.value = map.value.getZoom();
|
|
||||||
scale.value = Math.round(map.value.getScale());
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 切换底图
|
|
||||||
const changeBaseLayer = () => {
|
|
||||||
if (!map.value) return;
|
|
||||||
|
|
||||||
// 移除当前底图
|
|
||||||
map.value.removeLayer(baseLayers.vector);
|
|
||||||
map.value.removeLayer(baseLayers.vectorLabel);
|
|
||||||
map.value.removeLayer(baseLayers.image);
|
|
||||||
map.value.removeLayer(baseLayers.imageLabel);
|
|
||||||
|
|
||||||
// 添加新底图
|
|
||||||
if (layerType.value === 'vector') {
|
|
||||||
map.value.addLayer(baseLayers.vector);
|
|
||||||
map.value.addLayer(baseLayers.vectorLabel);
|
|
||||||
} else {
|
} else {
|
||||||
map.value.addLayer(baseLayers.image);
|
console.error('天地图API未加载');
|
||||||
map.value.addLayer(baseLayers.imageLabel);
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
// 加载地块数据
|
|
||||||
const loadFields = () => {
|
|
||||||
fieldService.getFields().then((data) => {
|
|
||||||
fields.value = data;
|
|
||||||
refreshOverlays();
|
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
// 刷新覆盖物
|
|
||||||
const refreshOverlays = () => {
|
|
||||||
if (!map.value || !overlayLayer.value) return;
|
|
||||||
|
|
||||||
// 清除所有覆盖物
|
|
||||||
overlayLayer.value.clearOverLays();
|
|
||||||
|
|
||||||
// 如果不显示地块图层则跳过绘制
|
|
||||||
if (!showFieldLayer.value) return;
|
|
||||||
|
|
||||||
// 绘制所有地块
|
|
||||||
fields.value.forEach((field) => {
|
|
||||||
const isSelected = selectedField.value?.id === field.id;
|
|
||||||
const polygon = createPolygon(field, isSelected);
|
|
||||||
overlayLayer.value.addOverLay(polygon);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 创建多边形
|
|
||||||
const createPolygon = (field, isSelected = false) => {
|
|
||||||
const coords = field.geometry.coordinates[0].map((c) => new T.LngLat(c[0], c[1]));
|
|
||||||
return new T.Polygon(coords, {
|
|
||||||
color: isSelected ? '#ff0000' : '#1890ff',
|
|
||||||
weight: isSelected ? 3 : 2,
|
|
||||||
opacity: 0.8,
|
|
||||||
fillColor: isSelected ? '#ffa39e' : '#e6f7ff',
|
|
||||||
fillOpacity: 0.5,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择地块
|
|
||||||
const selectField = (field) => {
|
|
||||||
selectedField.value = field;
|
|
||||||
refreshOverlays();
|
|
||||||
|
|
||||||
// 居中显示选中地块
|
|
||||||
if (map.value) {
|
|
||||||
const coords = field.geometry.coordinates[0];
|
|
||||||
const center = coords.reduce(
|
|
||||||
(acc, coord) => {
|
|
||||||
acc[0] += coord[0];
|
|
||||||
acc[1] += coord[1];
|
|
||||||
return acc;
|
|
||||||
},
|
|
||||||
[0, 0]
|
|
||||||
);
|
|
||||||
|
|
||||||
center[0] /= coords.length;
|
|
||||||
center[1] /= coords.length;
|
|
||||||
|
|
||||||
map.value.panTo(new T.LngLat(center[0], center[1]));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 开始绘制
|
|
||||||
const startDrawing = () => {
|
|
||||||
if (!map.value) return;
|
|
||||||
|
|
||||||
// 清除当前覆盖物
|
|
||||||
refreshOverlays();
|
|
||||||
|
|
||||||
// 创建绘制工具
|
|
||||||
const polygonTool = new T.PolygonTool(map.value, {
|
|
||||||
showLabel: true,
|
|
||||||
color: '#fa541c',
|
|
||||||
weight: 3,
|
|
||||||
opacity: 0.6,
|
|
||||||
fillColor: '#ffbb96',
|
|
||||||
fillOpacity: 0.4,
|
|
||||||
});
|
|
||||||
|
|
||||||
polygonTool.open();
|
|
||||||
|
|
||||||
// 绘制完成事件
|
|
||||||
polygonTool.addEventListener('draw', (e) => {
|
|
||||||
newFieldCoords.value = e.currentLnglats.map((lnglat) => [lnglat.lng, lnglat.lat]);
|
|
||||||
newFieldArea.value = e.currentArea;
|
|
||||||
drawDialogVisible.value = true;
|
|
||||||
|
|
||||||
// 清除临时图形
|
|
||||||
polygonTool.close();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 保存新地块
|
|
||||||
const saveNewField = () => {
|
|
||||||
if (!newFieldName.value.trim()) {
|
|
||||||
ElMessage.error('请输入地块名称');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newField = {
|
|
||||||
id: Date.now(),
|
|
||||||
name: newFieldName.value,
|
|
||||||
area: newFieldArea.value,
|
|
||||||
geometry: {
|
|
||||||
type: 'Polygon',
|
|
||||||
coordinates: [newFieldCoords.value],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
fieldService.createField(newField).then(() => {
|
|
||||||
ElMessage.success('地块创建成功');
|
|
||||||
drawDialogVisible.value = false;
|
|
||||||
newFieldName.value = '';
|
|
||||||
loadFields();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 取消绘制
|
|
||||||
const cancelDrawing = () => {
|
|
||||||
drawDialogVisible.value = false;
|
|
||||||
refreshOverlays();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 删除地块
|
|
||||||
const removeField = () => {
|
|
||||||
if (!selectedField.value) return;
|
|
||||||
|
|
||||||
fieldService.deleteField(selectedField.value.id).then(() => {
|
|
||||||
ElMessage.success('地块已删除');
|
|
||||||
selectedField.value = null;
|
|
||||||
loadFields();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 监听地块图层显示状态
|
|
||||||
watch(showFieldLayer, refreshOverlays);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.field-management {
|
.mapDiv {
|
||||||
display: flex;
|
|
||||||
height: calc(100vh - 160px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel.left {
|
|
||||||
width: 320px;
|
|
||||||
padding: 15px;
|
|
||||||
border-right: 1px solid #e4e7ed;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #f8fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel.right {
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100vh; /* 确保容器有明确高度 */
|
||||||
}
|
|
||||||
|
|
||||||
.layer-switch {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
right: 15px;
|
|
||||||
background: white;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-layer-switch {
|
|
||||||
position: absolute;
|
|
||||||
top: 60px;
|
|
||||||
right: 15px;
|
|
||||||
background: white;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-scale {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 15px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
padding: 12px;
|
|
||||||
margin: 10px 0;
|
|
||||||
background: #edf2ff;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #364fc7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group > * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,47 +1,401 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mapDiv">
|
<div class="field-management">
|
||||||
<tdt-map ref="tdtMapRef" :center="state.center" :zoom="state.zoom" :style="{ height: mapHeight }">
|
<!-- 左侧面板 -->
|
||||||
<!-- <tdt-tile-layer :layer-type="'img_w'"></tdt-tile-layer> -->
|
<div class="panel left">
|
||||||
<!-- <tdt-tile-layer :layer-type="'cia_w'" :z-index="2"></tdt-tile-layer> -->
|
<el-input v-model="searchTerm" placeholder="搜索地块名称" clearable style="margin-bottom: 15px"></el-input>
|
||||||
<tdt-tilelayer :url="state.img_w_url" :z-index="1"></tdt-tilelayer>
|
|
||||||
<tdt-tilelayer :url="state.cia_w_url" :z-index="2"></tdt-tilelayer>
|
<el-table :data="filteredFields" highlight-current-row style="width: 100%" height="calc(100vh - 300px)" @row-click="selectField">
|
||||||
</tdt-map>
|
<el-table-column prop="name" label="名称"></el-table-column>
|
||||||
|
<el-table-column prop="area" label="面积(㎡)">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ row.area.toFixed(2) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="stats">总面积: {{ totalArea.toFixed(2) }} ㎡</div>
|
||||||
|
|
||||||
|
<div class="button-group">
|
||||||
|
<el-button type="primary" @click="startDrawing">新增地块</el-button>
|
||||||
|
<el-button type="danger" :disabled="!selectedField" @click="removeField">删除地块</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧地图区域 -->
|
||||||
|
<div class="panel right">
|
||||||
|
<tdt-map class="map" :center="mapCenter" :zoom="mapZoom" @init="onMapInit"> </tdt-map>
|
||||||
|
|
||||||
|
<div class="layer-switch">
|
||||||
|
<el-radio-group v-model="layerType" size="small" @change="changeBaseLayer">
|
||||||
|
<el-radio-button label="vector">矢量</el-radio-button>
|
||||||
|
<el-radio-button label="image">影像</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-layer-switch">
|
||||||
|
<el-switch v-model="showFieldLayer" active-text="显示地块"></el-switch>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zoom-scale">缩放级别: {{ mapZoom }}, 比例尺: 1:{{ scale.toLocaleString() }}</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="drawDialogVisible" title="新增地块">
|
||||||
|
<el-form>
|
||||||
|
<el-form-item label="地块名称">
|
||||||
|
<el-input v-model="newFieldName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地块面积">
|
||||||
|
<el-input :value="newFieldArea.toFixed(2) + ' ㎡'" readonly></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancelDrawing">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveNewField">保存</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, onMounted, ref } from 'vue';
|
import { ref, computed, onMounted, watch } from 'vue';
|
||||||
import { TdtMap, TdtTileLayer } from 'vue-tianditu';
|
import { TdtMap } from 'vue-tianditu';
|
||||||
import { map_config } from '@/config/map';
|
import { ElMessage } from 'element-plus';
|
||||||
|
// import { map_config } from '../../config/map';
|
||||||
|
|
||||||
const key = map_config.tianditu.token;
|
// 模拟接口服务(使用localStorage)
|
||||||
|
const fieldService = {
|
||||||
|
getFields() {
|
||||||
|
const fields = localStorage.getItem('fields');
|
||||||
|
return Promise.resolve(fields ? JSON.parse(fields) : []);
|
||||||
|
},
|
||||||
|
createField(field) {
|
||||||
|
return this.getFields().then((fields) => {
|
||||||
|
field.id = Date.now();
|
||||||
|
fields.push(field);
|
||||||
|
localStorage.setItem('fields', JSON.stringify(fields));
|
||||||
|
return field;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteField(id) {
|
||||||
|
return this.getFields().then((fields) => {
|
||||||
|
const newFields = fields.filter((f) => f.id !== id);
|
||||||
|
localStorage.setItem('fields', JSON.stringify(newFields));
|
||||||
|
return newFields;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const state = reactive({
|
// 响应式状态
|
||||||
center: [100.088, 23.883],
|
const fields = ref([]);
|
||||||
zoom: 14,
|
const selectedField = ref(null);
|
||||||
img_w_url: `http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
const searchTerm = ref('');
|
||||||
cia_w_url: `http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key}`,
|
const newFieldName = ref('');
|
||||||
// 添加其他地图层URL
|
const drawDialogVisible = ref(false);
|
||||||
// ...
|
const newFieldCoords = ref([]);
|
||||||
|
const newFieldArea = ref(0);
|
||||||
|
const layerType = ref('vector');
|
||||||
|
const showFieldLayer = ref(true);
|
||||||
|
const map = ref(null);
|
||||||
|
const mapCenter = ref([100.088, 23.883]);
|
||||||
|
const mapZoom = ref(12);
|
||||||
|
const scale = ref(0);
|
||||||
|
|
||||||
|
// 天地图图层
|
||||||
|
const baseLayers = {
|
||||||
|
vector: null,
|
||||||
|
vectorLabel: null,
|
||||||
|
image: null,
|
||||||
|
imageLabel: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 覆盖物图层
|
||||||
|
const overlayLayer = ref(null);
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const filteredFields = computed(() => {
|
||||||
|
const term = searchTerm.value.toLowerCase();
|
||||||
|
return term ? fields.value.filter((f) => f.name.toLowerCase().includes(term)) : fields.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 确保地图有明确的高度
|
const totalArea = computed(() => {
|
||||||
const mapHeight = ref('100vh');
|
return fields.value.reduce((sum, field) => sum + field.area, 0);
|
||||||
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
// 地图初始化
|
||||||
console.log('地图组件已挂载');
|
const onMapInit = (mapInstance) => {
|
||||||
// 检查天地图API是否加载成功
|
map.value = mapInstance;
|
||||||
if (window.T) {
|
|
||||||
console.log('天地图API已加载:', window.T);
|
// 创建图层
|
||||||
} else {
|
baseLayers.vector = new T.TileLayer('vec');
|
||||||
console.error('天地图API未加载');
|
baseLayers.vectorLabel = new T.TileLayer('cva');
|
||||||
|
baseLayers.image = new T.TileLayer('img');
|
||||||
|
baseLayers.imageLabel = new T.TileLayer('cia');
|
||||||
|
|
||||||
|
// 添加默认图层
|
||||||
|
map.value.addLayer(baseLayers.image);
|
||||||
|
map.value.addLayer(baseLayers.imageLabel);
|
||||||
|
|
||||||
|
// 创建覆盖物图层
|
||||||
|
overlayLayer.value = new T.Map.OverlayLayer();
|
||||||
|
map.value.addLayer(overlayLayer.value);
|
||||||
|
|
||||||
|
// 添加控件
|
||||||
|
map.value.addControl(new T.Control.Zoom());
|
||||||
|
map.value.addControl(new T.Control.Scale());
|
||||||
|
|
||||||
|
// 事件监听
|
||||||
|
map.value.addEventListener('zoomend', updateScale);
|
||||||
|
map.value.addEventListener('moveend', updateScale);
|
||||||
|
|
||||||
|
// 初始加载数据
|
||||||
|
loadFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 更新比例尺
|
||||||
|
const updateScale = () => {
|
||||||
|
if (map.value) {
|
||||||
|
mapZoom.value = map.value.getZoom();
|
||||||
|
scale.value = Math.round(map.value.getScale());
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换底图
|
||||||
|
const changeBaseLayer = () => {
|
||||||
|
if (!map.value) return;
|
||||||
|
|
||||||
|
// 移除当前底图
|
||||||
|
map.value.removeLayer(baseLayers.vector);
|
||||||
|
map.value.removeLayer(baseLayers.vectorLabel);
|
||||||
|
map.value.removeLayer(baseLayers.image);
|
||||||
|
map.value.removeLayer(baseLayers.imageLabel);
|
||||||
|
|
||||||
|
// 添加新底图
|
||||||
|
if (layerType.value === 'vector') {
|
||||||
|
map.value.addLayer(baseLayers.vector);
|
||||||
|
map.value.addLayer(baseLayers.vectorLabel);
|
||||||
|
} else {
|
||||||
|
map.value.addLayer(baseLayers.image);
|
||||||
|
map.value.addLayer(baseLayers.imageLabel);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载地块数据
|
||||||
|
const loadFields = () => {
|
||||||
|
fieldService.getFields().then((data) => {
|
||||||
|
fields.value = data;
|
||||||
|
refreshOverlays();
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 刷新覆盖物
|
||||||
|
const refreshOverlays = () => {
|
||||||
|
if (!map.value || !overlayLayer.value) return;
|
||||||
|
|
||||||
|
// 清除所有覆盖物
|
||||||
|
overlayLayer.value.clearOverLays();
|
||||||
|
|
||||||
|
// 如果不显示地块图层则跳过绘制
|
||||||
|
if (!showFieldLayer.value) return;
|
||||||
|
|
||||||
|
// 绘制所有地块
|
||||||
|
fields.value.forEach((field) => {
|
||||||
|
const isSelected = selectedField.value?.id === field.id;
|
||||||
|
const polygon = createPolygon(field, isSelected);
|
||||||
|
overlayLayer.value.addOverLay(polygon);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 创建多边形
|
||||||
|
const createPolygon = (field, isSelected = false) => {
|
||||||
|
const coords = field.geometry.coordinates[0].map((c) => new T.LngLat(c[0], c[1]));
|
||||||
|
return new T.Polygon(coords, {
|
||||||
|
color: isSelected ? '#ff0000' : '#1890ff',
|
||||||
|
weight: isSelected ? 3 : 2,
|
||||||
|
opacity: 0.8,
|
||||||
|
fillColor: isSelected ? '#ffa39e' : '#e6f7ff',
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择地块
|
||||||
|
const selectField = (field) => {
|
||||||
|
selectedField.value = field;
|
||||||
|
refreshOverlays();
|
||||||
|
|
||||||
|
// 居中显示选中地块
|
||||||
|
if (map.value) {
|
||||||
|
const coords = field.geometry.coordinates[0];
|
||||||
|
const center = coords.reduce(
|
||||||
|
(acc, coord) => {
|
||||||
|
acc[0] += coord[0];
|
||||||
|
acc[1] += coord[1];
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
[0, 0]
|
||||||
|
);
|
||||||
|
|
||||||
|
center[0] /= coords.length;
|
||||||
|
center[1] /= coords.length;
|
||||||
|
|
||||||
|
map.value.panTo(new T.LngLat(center[0], center[1]));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 开始绘制
|
||||||
|
const startDrawing = () => {
|
||||||
|
if (!map.value) return;
|
||||||
|
|
||||||
|
// 清除当前覆盖物
|
||||||
|
refreshOverlays();
|
||||||
|
|
||||||
|
// 创建绘制工具
|
||||||
|
const polygonTool = new T.PolygonTool(map.value, {
|
||||||
|
showLabel: true,
|
||||||
|
color: '#fa541c',
|
||||||
|
weight: 3,
|
||||||
|
opacity: 0.6,
|
||||||
|
fillColor: '#ffbb96',
|
||||||
|
fillOpacity: 0.4,
|
||||||
|
});
|
||||||
|
|
||||||
|
polygonTool.open();
|
||||||
|
|
||||||
|
// 绘制完成事件
|
||||||
|
polygonTool.addEventListener('draw', (e) => {
|
||||||
|
newFieldCoords.value = e.currentLnglats.map((lnglat) => [lnglat.lng, lnglat.lat]);
|
||||||
|
newFieldArea.value = e.currentArea;
|
||||||
|
drawDialogVisible.value = true;
|
||||||
|
|
||||||
|
// 清除临时图形
|
||||||
|
polygonTool.close();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存新地块
|
||||||
|
const saveNewField = () => {
|
||||||
|
if (!newFieldName.value.trim()) {
|
||||||
|
ElMessage.error('请输入地块名称');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newField = {
|
||||||
|
id: Date.now(),
|
||||||
|
name: newFieldName.value,
|
||||||
|
area: newFieldArea.value,
|
||||||
|
geometry: {
|
||||||
|
type: 'Polygon',
|
||||||
|
coordinates: [newFieldCoords.value],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
fieldService.createField(newField).then(() => {
|
||||||
|
ElMessage.success('地块创建成功');
|
||||||
|
drawDialogVisible.value = false;
|
||||||
|
newFieldName.value = '';
|
||||||
|
loadFields();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 取消绘制
|
||||||
|
const cancelDrawing = () => {
|
||||||
|
drawDialogVisible.value = false;
|
||||||
|
refreshOverlays();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除地块
|
||||||
|
const removeField = () => {
|
||||||
|
if (!selectedField.value) return;
|
||||||
|
|
||||||
|
fieldService.deleteField(selectedField.value.id).then(() => {
|
||||||
|
ElMessage.success('地块已删除');
|
||||||
|
selectedField.value = null;
|
||||||
|
loadFields();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听地块图层显示状态
|
||||||
|
watch(showFieldLayer, refreshOverlays);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.mapDiv {
|
.field-management {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100vh - 160px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.left {
|
||||||
|
width: 320px;
|
||||||
|
padding: 15px;
|
||||||
|
border-right: 1px solid #e4e7ed;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel.right {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh; /* 确保容器有明确高度 */
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-switch {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
background: white;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-layer-switch {
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
right: 15px;
|
||||||
|
background: white;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-scale {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
padding: 12px;
|
||||||
|
margin: 10px 0;
|
||||||
|
background: #edf2ff;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #364fc7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group > * {
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
|
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`">
|
||||||
<div class="custom-page">
|
<!-- <div class="custom-page">
|
||||||
<!-- <h1>统计数据</h1> -->
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div style="display: flex">
|
<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" />
|
<pieChart v-for="(item, index) in data" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
|
||||||
@ -9,12 +8,13 @@
|
|||||||
<div style="display: flex; margin-top: 20px">
|
<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" />
|
<pieChart v-for="(item, index) in data1" :key="index" class="m-left" :refs="item.refs" :title="item.title" :data="item.data" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
|
import { getOverview, getSubArea } from '../../../apis/resource/statisticAnalysis';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
import { ref, onBeforeMount, reactive } from 'vue';
|
import { ref, onBeforeMount, reactive } from 'vue';
|
||||||
import 'echarts-gl';
|
import 'echarts-gl';
|
||||||
import pieChart from './components/pie-chart.vue';
|
import pieChart from './components/pie-chart.vue';
|
||||||
@ -57,7 +57,7 @@ let data1 = ref([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
getData();
|
// getData();
|
||||||
});
|
});
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -55,7 +55,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="good-price-num">
|
<div class="good-price-num">
|
||||||
<div class="good-price-num-pos">
|
<div class="good-price-num-pos">
|
||||||
<div class="price" @click="toCheckGood(index, indexg)">{{ g.price }} / {{ g.unit }}</div>
|
<div class="price" @click="toCheckGood(index, indexg)">{{ g.netWeightInfoVO.goodSpecs }}</div>
|
||||||
<div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.quantity).toFixed(2) }}</div>
|
<div class="total" @click="toCheckGood(index, indexg)">{{ (g.price * g.quantity).toFixed(2) }}</div>
|
||||||
<div class="num">
|
<div class="num">
|
||||||
<div class="right-item">
|
<div class="right-item">
|
||||||
|
@ -56,7 +56,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="good-price-num">
|
<div class="good-price-num">
|
||||||
<div class="good-price-num-pos">
|
<div class="good-price-num-pos">
|
||||||
<div class="price">¥{{ g.unitPrice }} / {{ g.unit }} * {{ g.quantity }}</div>
|
<div class="price">{{ g.netWeightInfoVO ? g.netWeightInfoVO.goodSpecs : '' }}</div>
|
||||||
<div class="total">
|
<div class="total">
|
||||||
<div class="amount">{{ (g.unitPrice * g.quantity).toFixed(2) }}</div>
|
<div class="amount">{{ (g.unitPrice * g.quantity).toFixed(2) }}</div>
|
||||||
<!-- <div class="amount">{{ (g.unitPrice * g.quantity + g.carriage).toFixed(2) }}</div> -->
|
<!-- <div class="amount">{{ (g.unitPrice * g.quantity + g.carriage).toFixed(2) }}</div> -->
|
||||||
@ -195,6 +195,7 @@ let bottomList = reactive([
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
page.orderStatus = 'all';
|
page.orderStatus = 'all';
|
||||||
store.getData(page).then((res) => {
|
store.getData(page).then((res) => {
|
||||||
|
console.log(typeof res.records[0].orderItemInfos[0].netWeightInfoVO.goodSpecs);
|
||||||
total.value = res.total;
|
total.value = res.total;
|
||||||
if (res.records.length > 0) {
|
if (res.records.length > 0) {
|
||||||
show.value = true;
|
show.value = true;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user