6/5日发布

This commit is contained in:
沈鸿 2025-06-05 18:02:20 +08:00
parent 6dcf4a846e
commit 4f494ae406
4 changed files with 439 additions and 136 deletions

View File

@ -3,24 +3,11 @@ import Views from '@/layouts/Views.vue';
const inputSuppliesRoutes = [
{
path: '/sub-government-affairs-service/inputSuppliesManage',
path: '/sub-government-affairs-service/material',
name: 'inputSuppliesManage',
component: Layout,
redirect: '/sub-government-affairs-service/materialManage',
meta: { title: '投入品监管平台', icon: 'FullScreen' },
children: [
// {
// path: '/sub-government-affairs-service/inputDataView',
// name: 'inputDataView',
// component: () => import('@/views/inputSuppliesManage/inputDataView/index.vue'),
// meta: { title: '投入品资源一张图', icon: 'Document' },
// },
{
path: '/sub-government-affairs-service/material',
name: 'material',
component: Views,
redirect: '/sub-government-affairs-service/material/pesticide',
meta: { title: '投入品管理', icon: 'OfficeBuilding' },
meta: { title: '投入品管理', icon: 'FullScreen' },
children: [
{
path: '/sub-government-affairs-service/material/pesticide',
@ -34,6 +21,25 @@ const inputSuppliesRoutes = [
component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
meta: { title: '肥料管理', icon: '' },
},
{
path: '/sub-government-affairs-service/material/seed',
name: 'input-supplies-seed',
component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
meta: { title: '种子管理', icon: '' },
},
{
path: '/sub-government-affairs-service/material/others',
name: 'input-supplies-others',
component: () => import('@/views/inputSuppliesManage/material/others/index.vue'),
meta: { title: '其他投入品', icon: '' },
},
// {
// path: '/sub-government-affairs-service/materialManage',
// name: 'materialManage',
// component: Views,
// redirect: '/sub-government-affairs-service/material/pesticide',
// meta: { title: '投入品管理', icon: 'OfficeBuilding' },
// children: [
// {
// path: '/sub-government-affairs-service/material/pesticide',
// name: 'input-supplies-pesticide',
@ -41,25 +47,37 @@ const inputSuppliesRoutes = [
// meta: { title: '农药管理', icon: '' },
// },
// {
// path: '/sub-government-affairs-service/material/ratPoison',
// name: 'input-supplies-ratPoison',
// component: () => import('@/views/inputSuppliesManage/material/ratPoison/index.vue'),
// meta: { title: '兽药管理', icon: '' },
// path: '/sub-government-affairs-service/material/fertilizer',
// name: 'input-supplies-fertilizer',
// component: () => import('@/views/inputSuppliesManage/material/fertilizer/index.vue'),
// meta: { title: '肥料管理', icon: '' },
// },
{
path: '/sub-government-affairs-service/material/seed',
name: 'input-supplies-seed',
component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
meta: { title: '种子管理', icon: '' },
},
// // {
// // path: '/sub-government-affairs-service/material/pesticide',
// // name: 'input-supplies-pesticide',
// // component: () => import('@/views/inputSuppliesManage/material/pesticide/index.vue'),
// // meta: { title: '农药管理', icon: '' },
// // },
// // {
// // path: '/sub-government-affairs-service/material/ratPoison',
// // name: 'input-supplies-ratPoison',
// // component: () => import('@/views/inputSuppliesManage/material/ratPoison/index.vue'),
// // meta: { title: '兽药管理', icon: '' },
// // },
// {
// path: '/sub-government-affairs-service/material/farmMachinery',
// name: 'input-supplies-farmMachinery',
// component: () => import('@/views/inputSuppliesManage/material/farmMachinery/index.vue'),
// meta: { title: '农机管理', icon: '' },
// path: '/sub-government-affairs-service/material/seed',
// name: 'input-supplies-seed',
// component: () => import('@/views/inputSuppliesManage/material/seed/index.vue'),
// meta: { title: '种子管理', icon: '' },
// },
// // {
// // path: '/sub-government-affairs-service/material/farmMachinery',
// // name: 'input-supplies-farmMachinery',
// // component: () => import('@/views/inputSuppliesManage/material/farmMachinery/index.vue'),
// // meta: { title: '农机管理', icon: '' },
// // },
// ],
// },
],
},
// {
// path: '/sub-government-affairs-service/productionDealer',
// name: 'productionDealer',
@ -90,12 +108,12 @@ const inputSuppliesRoutes = [
// component: () => import('@/views/inputSuppliesManage/redBlackRank/index.vue'),
// meta: { title: '企业红黑榜', icon: '' },
// },
{
path: '/sub-government-affairs-service/knowledgeManage',
name: 'knowledgeManage',
component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
meta: { title: '知识库', icon: '' },
},
// {
// path: '/sub-government-affairs-service/knowledgeManage',
// name: 'knowledgeManage',
// component: () => import('@/views/inputSuppliesManage/knowledgeManage/index.vue'),
// meta: { title: '知识库', icon: '' },
// },
// {
// path: '/sub-government-affairs-service/patrolCaseManage',
// name: 'patrolCaseManage',

View File

@ -18,7 +18,7 @@ export default [
path: '/sub-government-affairs-service/individual',
component: () => import('@/views/productOperateMain/individual/index.vue'),
name: 'individual',
meta: { title: '农户', icon: '' },
meta: { title: '农户管理', icon: '' },
},
// {
// path: '/sub-government-affairs-service/collective',
@ -30,7 +30,7 @@ export default [
path: '/sub-government-affairs-service/coop',
component: () => import('@/views/productOperateMain/coOp/index.vue'),
name: 'coop',
meta: { title: '农企合作社', icon: '' },
meta: { title: '农企合作社管理', icon: '' },
},
// {
// path: '/sub-government-affairs-service/enterprise',
@ -62,12 +62,12 @@ export default [
// name: 'enterprise',
// meta: { title: '经营企业', icon: 'Document' },
// },
{
path: '/sub-government-affairs-service/examineList',
component: () => import('@/views/productOperateMain/examine/list.vue'),
name: 'examineList',
meta: { title: '主体审核管理', icon: '' },
},
// {
// path: '/sub-government-affairs-service/examineList',
// component: () => import('@/views/productOperateMain/examine/list.vue'),
// name: 'examineList',
// meta: { title: '主体审核管理', icon: '' },
// },
// {
// path: '/sub-government-affairs-service/examineRecord',
// component: () => import('@/views/productOperateMain/examine/record.vue'),

View File

@ -0,0 +1,270 @@
<template>
<div class="custom-page">
<!-- 替换为 avue-crud 表格区域 -->
<avue-crud ref="crudRef" v-model:data="tableData" v-model:page="pagination" :option="options">
<template #search>
<!-- 搜索区域 -->
<div class="search-area">
<el-input v-model="searchForm.name" placeholder="投入品名称" style="width: 200px; margin-right: 10px"></el-input>
<el-button type="primary" @click="searchData">搜索</el-button>
<el-button @click="resetSearch">重置</el-button>
</div>
</template>
<template #menu-left><el-button type="primary" icon="Plus" @click="openDialog">新增</el-button></template>
<template #menu="scope">
<custom-table-operate :actions="options.actions" :data="scope" />
</template>
</avue-crud>
<!-- 新增/编辑弹窗 -->
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑投入品' : '新增投入品'" width="600px">
<el-form ref="formRef" :model="formData" label-width="100px" class="custom-form">
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" class="custom-input"></el-input>
</el-form-item>
<el-form-item label="规格" prop="specification">
<el-input v-model="formData.specification" class="custom-input"></el-input>
</el-form-item>
<el-form-item label="厂家" prop="manufacturer">
<el-input v-model="formData.manufacturer" class="custom-input"></el-input>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" class="custom-input" type="textarea" :rows="3"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer custom-footer">
<el-button @click="dialogVisible = false" class="custom-button">取消</el-button>
<el-button type="primary" @click="submitForm" class="custom-button">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { CRUD_OPTIONS, customRules } from '@/config';
//
const initialTableData = [
{
id: 1,
name: '甘蔗专用全生物降解地膜',
specification: '厚度0.008mm-0.012mm宽度800mm-1200mm',
manufacturer: '耿马特斯郎全生物降解材料有限公司',
remark: '可根据甘蔗种植需求定制',
},
{
id: 2,
name: '华丰牌加厚地膜',
specification: '厚度≥0.01mm宽度75cm-140cm',
manufacturer: '河南省银丰塑料有限公司',
remark: '符合新国标',
},
{
id: 3,
name: '高速贴片式滴灌带',
specification: '管径16mm-20mm出水流量2.0L/h、2.7L/h',
manufacturer: '库车拉依苏裕丰农民专业合作社(新疆)',
remark: '多种规格可选',
},
{
id: 4,
name: '再生滴灌带',
specification: '500米/卷',
manufacturer: '宁夏佳稼旺生态农业科技有限公司',
remark: '以旧换新50公斤废旧滴灌带兑换500米新带',
},
{
id: 5,
name: '防草布PP编织',
specification: '宽度1.2m克重90g/㎡',
manufacturer: '昆明绿保塑业有限公司',
remark: '用于果园/经济作物抑草',
},
];
//
const searchForm = reactive({
name: '',
});
// avue-crud
const crudRef = ref(null);
//
const tableData = ref([...initialTableData]);
//
const pagination = reactive({
currentPage: 1,
pageSize: 10,
total: initialTableData.length,
});
// avue-crud
const options = reactive({
...CRUD_OPTIONS,
addBtn: false,
searchBtn: false,
emptyBtn: false,
column: [
{
label: '名称',
prop: 'name',
},
{
label: '规格',
prop: 'specification',
},
{
label: '厂家',
prop: 'manufacturer',
},
{
label: '备注',
prop: 'remark',
},
],
actions: [
{
name: '编辑',
icon: 'edit',
event: ({ row }) => editData(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => deleteData(row.id),
},
],
});
//
const dialogVisible = ref(false);
const isEdit = ref(false);
const formRef = ref(null);
const formData = reactive({
id: null,
name: '',
specification: '',
manufacturer: '',
remark: '',
});
//
const searchData = () => {
pagination.currentPage = 1;
const filteredData = initialTableData.filter((item) => item.name.includes(searchForm.name));
tableData.value = filteredData;
pagination.total = filteredData.length;
};
//
const resetSearch = () => {
searchForm.name = '';
pagination.currentPage = 1;
tableData.value = [...initialTableData];
pagination.total = initialTableData.length;
};
//
const openDialog = () => {
isEdit.value = false;
Object.keys(formData).forEach((key) => {
if (key !== 'id') {
formData[key] = '';
}
});
formData.id = tableData.value.length > 0 ? Math.max(...tableData.value.map((item) => item.id)) + 1 : 1;
dialogVisible.value = true;
};
//
const editData = (row) => {
isEdit.value = true;
Object.assign(formData, row);
dialogVisible.value = true;
};
//
const deleteData = (id) => {
tableData.value = tableData.value.filter((item) => item.id !== id);
pagination.total = tableData.value.length;
ElMessage.success('删除成功');
};
//
const submitForm = () => {
if (isEdit.value) {
const index = tableData.value.findIndex((item) => item.id === formData.id);
if (index !== -1) {
tableData.value[index] = { ...formData };
ElMessage.success('编辑成功');
}
} else {
tableData.value.push({ ...formData });
pagination.total = tableData.value.length;
ElMessage.success('新增成功');
}
dialogVisible.value = false;
};
</script>
<style scoped>
.custom-page {
padding: 20px;
height: calc(100vh - 150px);
}
.search-area {
margin-bottom: 20px;
}
.custom-form {
padding: 20px;
}
/* 自定义输入框样式 */
.custom-input {
border-radius: 6px;
transition:
border-color 0.3s,
box-shadow 0.3s;
}
.custom-input:hover {
border-color: #409eff;
}
.custom-input:focus-within {
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
/* 自定义备注输入框样式 */
.custom-input textarea {
border-radius: 6px;
}
/* 对话框底部按钮区域样式 */
.custom-footer {
padding: 10px 20px 20px;
}
/* 自定义按钮样式 */
.custom-button {
border-radius: 6px;
transition: transform 0.2s;
}
.custom-button:hover {
transform: translateY(-2px);
}
/* 主按钮悬停效果 */
.custom-button[type='primary']:hover {
opacity: 0.9;
}
</style>

View File

@ -18,6 +18,10 @@
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #search="{ size }">
<AreaCascader v-model:value="state.query" placeholder="选择行政区域与网格" :width="400" />
</template>
<template #menu-left>
<el-button type="success" icon="download" @click="onExport">导出</el-button>
</template>
@ -25,6 +29,23 @@
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
<template #detail="scope">
<el-tabs type="border-card">
<el-tab-pane label="基本信息">
<avue-detail :option="baseDetailOption" :data="scope.row"></avue-detail>
</el-tab-pane>
<el-tab-pane label="网格地图">
<div v-if="scope.row.mapUrl" style="height: 400px">
<img :src="scope.row.mapUrl" style="max-width: 100%; max-height: 100%" />
</div>
<el-empty v-else description="暂无地图数据"></el-empty>
</el-tab-pane>
<el-tab-pane label="其他信息">
<avue-detail :option="otherDetailOption" :data="scope.row"></avue-detail>
</el-tab-pane>
</el-tabs>
</template>
</avue-crud>
</div>
</template>
@ -46,31 +67,24 @@ const state = reactive({
query: {
current: 1,
size: 10,
gridName: '',
regionCode: '',
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
// addBtnText: '',
addBtnText: '添加网格',
// detail: true,
// detailTitle: '',
column: [
// {
// label: '',
// prop: 'gridArea',
// search: true,
// width: 200,
// addDisplay: false,
// editDisplay: false,
// viewDisplay: true,
// rules: {
// required: true,
// message: '',
// trigger: 'blur',
// },
// },
{
label: '网格编号',
prop: 'id',
},
{
label: '网格名称',
prop: 'gridName',
search: true,
rules: {
required: true,
message: '请输入',
@ -78,10 +92,10 @@ const state = reactive({
},
},
{
label: '网格区域',
label: '所属行政区域',
prop: 'gridAreaName',
// width: 300,
display: false,
addDisplay: false,
viewDisplay: true,
rules: {
required: true,
message: '请输入',
@ -89,18 +103,16 @@ const state = reactive({
},
},
{
label: '网格区域',
label: '所属行政区域',
prop: 'cities',
type: 'cascader',
hide: true,
span: 24,
width: 300,
addDisplay: true,
editDisplay: true,
viewDisplay: false,
// multiple: true,
// checkStrictly: true,
// collapseTags: true,
// emitPath: false,
// checkDescendants: false,
emitPath: false,
props: {
label: 'areaName',
value: 'areaCode',
@ -117,54 +129,31 @@ const state = reactive({
trigger: 'blur',
},
},
{
label: '网格地图',
prop: 'mapUrl',
type: 'upload',
hide: true,
// action: `${VITE_APP_BASE_API}/system/file/upload`,
},
// {
// label: '',
// prop: 'gridManager',
// rules: {
// required: true,
// message: '',
// trigger: 'blur',
// label: '',
// prop: 'gridName',
// type: 'select',
// addDisplay: false,
// hide: true,
// // search: true,
// searchLabelWidth: 100,
// dicUrl: `${VITE_APP_BASE_API}/land-resource/gridManage/page?regionCode={{key}}`,
// props: {
// label: 'gridName',
// value: 'gridName',
// },
// dicHeaders: {
// authorization: UserStore.token,
// },
// {
// label: '',
// prop: 'contactInfo',
// rules: {
// required: true,
// message: '',
// trigger: 'blur',
// dicFormatter: (res) => res.data?.records,
// },
// },
{
label: '省',
prop: 'provinceCode',
hide: true,
display: false,
},
{
label: '市',
prop: 'cityCode',
hide: true,
display: false,
},
{
label: '县/区',
prop: 'gridAreaCode',
hide: true,
display: false,
},
{
label: '乡镇',
prop: 'townCode',
hide: true,
display: false,
},
{
label: '乡镇',
prop: 'village',
hide: true,
display: false,
},
{
label: '备注',
prop: 'note',
@ -209,6 +198,32 @@ const state = reactive({
data: [],
currentRow: {},
});
const baseDetailOption = {
column: [
{
label: '网格名称',
prop: 'gridName',
},
{
label: '所属行政区域',
prop: 'gridAreaName',
},
{
label: '备注',
prop: 'note',
},
],
};
const otherDetailOption = {
column: [
{
label: '创建时间',
prop: 'createTime',
},
// ...
],
};
//
const loadData = () => {
@ -276,7 +291,7 @@ const setCity = (row) => {
if (!isEmpty(row.cities)) {
row.provinceCode = row?.cities[0] ?? null;
row.cityCode = row?.cities[1] ?? null;
row.gridAreaCode = row?.cities[2] ?? null;
row.gridAreaCode = row?.cities[4] ?? null;
row.townCode = row?.cities[3] ?? null;
row.village = row?.cities[4] ?? null;
// row.village = row?.cities.join(',');