配置调整,行政信息页面开发
This commit is contained in:
parent
04bd98eab5
commit
1af553dbc1
@ -1,5 +1,5 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VITE_APP_TITLE = 运营云后台管理系统
|
VITE_APP_TITLE = 政务云后台管理系统
|
||||||
|
|
||||||
# 开发环境配置
|
# 开发环境配置
|
||||||
VITE_APP_ENV = 'development'
|
VITE_APP_ENV = 'development'
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VITE_APP_TITLE = 运营云后台管理系统
|
VITE_APP_TITLE = 政务云后台管理系统
|
||||||
|
|
||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
VITE_APP_ENV = 'production'
|
VITE_APP_ENV = 'production'
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VITE_APP_TITLE = 运营云后台管理系统
|
VITE_APP_TITLE = 政务云后台管理系统
|
||||||
|
|
||||||
# 测试环境配置
|
# 测试环境配置
|
||||||
VITE_APP_ENV = 'production'
|
VITE_APP_ENV = 'production'
|
||||||
|
|
||||||
# 测试环境
|
# 测试环境
|
||||||
VITE_APP_BASE_API = 'http://192.168.18.99:8080/'
|
VITE_APP_BASE_API = 'http://192.168.18.99:8080'
|
||||||
VITE_APP_PLATFORM = 'http://192.168.18.99/platform'
|
VITE_APP_PLATFORM = 'http://192.168.18.99/platform'
|
||||||
|
|
||||||
# 是否在打包时开启压缩,支持 gzip 和 brotli
|
# 是否在打包时开启压缩,支持 gzip 和 brotli
|
||||||
|
@ -218,6 +218,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
min-width: 1000px;
|
||||||
}
|
}
|
||||||
// 表格组件中的各插槽元素自定义样式
|
// 表格组件中的各插槽元素自定义样式
|
||||||
.custom-tooltip-content {
|
.custom-tooltip-content {
|
||||||
|
@ -59,6 +59,7 @@
|
|||||||
:label="column.label"
|
:label="column.label"
|
||||||
:width="column.width"
|
:width="column.width"
|
||||||
:align="column.align || 'center'"
|
:align="column.align || 'center'"
|
||||||
|
:fixed="column.fixed ?? false"
|
||||||
:sortable="column.sortable"
|
:sortable="column.sortable"
|
||||||
:header-class-name="column.headerClassName"
|
:header-class-name="column.headerClassName"
|
||||||
>
|
>
|
||||||
@ -340,7 +341,7 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
/* 自定义鼠标悬停颜色 */
|
/* 自定义鼠标悬停颜色 */
|
||||||
:deep(.el-table__body tr:hover > td) {
|
:deep(.el-table__body tr:hover > td) {
|
||||||
background-color: rgba(37, 191, 130, 0.1) !important;
|
background-color: rgba(237 255 248) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 自定义表头样式 */
|
/* 自定义表头样式 */
|
||||||
|
@ -2,9 +2,10 @@
|
|||||||
<section class="app-main">
|
<section class="app-main">
|
||||||
<router-view v-slot="{ Component, route }">
|
<router-view v-slot="{ Component, route }">
|
||||||
<transition name="fade-transform" mode="out-in">
|
<transition name="fade-transform" mode="out-in">
|
||||||
<keep-alive :include="tagsViewStore.cachedViews">
|
<!-- <keep-alive :include="tagsViewStore.cachedViews">
|
||||||
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
|
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
|
||||||
</keep-alive>
|
</keep-alive> -->
|
||||||
|
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
<iframe-toggle />
|
<iframe-toggle />
|
||||||
|
@ -7,19 +7,11 @@
|
|||||||
class="sidebar-logo-link"
|
class="sidebar-logo-link"
|
||||||
to="/"
|
to="/"
|
||||||
>
|
>
|
||||||
<img
|
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||||
v-if="logo"
|
|
||||||
:src="logoY"
|
|
||||||
class="sidebar-logo"
|
|
||||||
/>
|
|
||||||
<h1 v-else class="sidebar-title">{{ title }}</h1>
|
<h1 v-else class="sidebar-title">{{ title }}</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||||
<img
|
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||||
v-if="logo"
|
|
||||||
:src="logoY"
|
|
||||||
class="sidebar-logo"
|
|
||||||
/>
|
|
||||||
<h1 class="sidebar-title">{{ title }}</h1>
|
<h1 class="sidebar-title">{{ title }}</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
</transition>
|
</transition>
|
||||||
@ -78,7 +70,6 @@ function getUser() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
getUser();
|
getUser();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -149,46 +149,8 @@ export const constantRoutes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/customer',
|
// 产业运营云后台管理菜单【可访问页面参考】
|
||||||
name: "customer",
|
|
||||||
component: Layout,
|
|
||||||
hidden: false,
|
|
||||||
alwaysShow: true,
|
|
||||||
redirect: 'noredirect',
|
|
||||||
meta: {
|
|
||||||
icon: "peoples",
|
|
||||||
link: null,
|
|
||||||
noCache: false,
|
|
||||||
title: "客户管理",
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'customer/customerManage',
|
|
||||||
component: () => import('@/views/customer/customerManage'),
|
|
||||||
name: 'customerManage',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "客户信息管理",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'customer/customerCategory',
|
|
||||||
component: () => import('@/views/customer/customerCategory'),
|
|
||||||
name: 'customerCategory',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "客户分类设置",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/goods',
|
path: '/goods',
|
||||||
name: "goods",
|
name: "goods",
|
||||||
@ -253,123 +215,248 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: '/plant',
|
||||||
|
// name: "plant",
|
||||||
|
// component: Layout,
|
||||||
|
// hidden: false,
|
||||||
|
// alwaysShow: true,
|
||||||
|
// redirect: 'noredirect',
|
||||||
|
// meta: {
|
||||||
|
// icon: "sunny",
|
||||||
|
// link: null,
|
||||||
|
// noCache: false,
|
||||||
|
// title: "智慧种植",
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'plant/ambient',
|
||||||
|
// component: () => import('@/views/plant/ambient'),
|
||||||
|
// name: 'ambient',
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "农业环境监测",
|
||||||
|
// icon: "",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'plant/control',
|
||||||
|
// component: () => import('@/views/plant/control'),
|
||||||
|
// name: 'control',
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "生产管理控制",
|
||||||
|
// icon: "",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/trade',
|
||||||
|
// name: "trade",
|
||||||
|
// component: Layout,
|
||||||
|
// hidden: false,
|
||||||
|
// alwaysShow: true,
|
||||||
|
// redirect: 'noredirect',
|
||||||
|
// meta: {
|
||||||
|
// icon: "money",
|
||||||
|
// link: null,
|
||||||
|
// noCache: false,
|
||||||
|
// title: "电商交易",
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'trade/agriculturalinputstrading',
|
||||||
|
// component: () => import('@/views/trade/agriculturalinputstrading'),
|
||||||
|
// name: 'agriculturalinputstrading',
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "农资交易",
|
||||||
|
// icon: "",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'trade/supplierServices',
|
||||||
|
// component: () => import('@/views/trade/supplierServices'),
|
||||||
|
// name: 'supplierServices',
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "供应商服务",
|
||||||
|
// icon: "",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'trade/procurementServices',
|
||||||
|
// component: () => import('@/views/trade/procurementServices'),
|
||||||
|
// name: 'procurementServices',
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "采购商服务",
|
||||||
|
// icon: "",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'trade/landTransaction',
|
||||||
|
// component: () => import('@/views/trade/landTransaction'),
|
||||||
|
// name: 'landTransaction',
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "土地交易",
|
||||||
|
// icon: "",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/order',
|
||||||
|
// name: "order",
|
||||||
|
// component: Layout,
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "订单列表",
|
||||||
|
// icon: "documentation",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'order/obligation',
|
||||||
|
// component: () => import('@/views/order/obligation'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "待付款",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "obligation",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/sendGoods',
|
||||||
|
// component: () => import('@/views/order/sendGoods'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "待发货",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "sendGoods",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/shipped',
|
||||||
|
// component: () => import('@/views/order/shipped'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "已发货",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "shipped",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/receivedGoods',
|
||||||
|
// component: () => import('@/views/order/receivedGoods'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "已收货",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "receivedGoods",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/completed',
|
||||||
|
// component: () => import('@/views/order/completed'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "已完成",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "completed",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/cancelled',
|
||||||
|
// component: () => import('@/views/order/cancelled'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "已取消",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "cancelled",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/salesService',
|
||||||
|
// component: () => import('@/views/order/salesService'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "退货/退款",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "salesService",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'order/refunded',
|
||||||
|
// component: () => import('@/views/order/refunded'),
|
||||||
|
// hidden: false,
|
||||||
|
// meta: {
|
||||||
|
// title: "已退货/退款",
|
||||||
|
// noCache: false,
|
||||||
|
// link: null,
|
||||||
|
// },
|
||||||
|
// name: "refunded",
|
||||||
|
// },
|
||||||
|
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
|
||||||
|
// 政务云后台管理系统菜单
|
||||||
{
|
{
|
||||||
path: '/plant',
|
path: "/mainbody",
|
||||||
name: "plant",
|
name: "mainbody",
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: false,
|
hidden: false,
|
||||||
alwaysShow: true,
|
|
||||||
redirect: 'noredirect',
|
|
||||||
meta: {
|
|
||||||
icon: "sunny",
|
|
||||||
link: null,
|
|
||||||
noCache: false,
|
|
||||||
title: "智慧种植",
|
|
||||||
},
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'plant/ambient',
|
path: "mainbody/index",
|
||||||
component: () => import('@/views/plant/ambient'),
|
component: () => import("@/views/mainbody/index"),
|
||||||
name: 'ambient',
|
|
||||||
hidden: false,
|
hidden: false,
|
||||||
meta: {
|
meta: {
|
||||||
title: "农业环境监测",
|
title: "生产经营主体",
|
||||||
icon: "",
|
icon: "user",
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'plant/control',
|
|
||||||
component: () => import('@/views/plant/control'),
|
|
||||||
name: 'control',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "生产管理控制",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/trade',
|
|
||||||
name: "trade",
|
|
||||||
component: Layout,
|
|
||||||
hidden: false,
|
|
||||||
alwaysShow: true,
|
|
||||||
redirect: 'noredirect',
|
|
||||||
meta: {
|
|
||||||
icon: "money",
|
|
||||||
link: null,
|
|
||||||
noCache: false,
|
|
||||||
title: "电商交易",
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'trade/agriculturalinputstrading',
|
|
||||||
component: () => import('@/views/trade/agriculturalinputstrading'),
|
|
||||||
name: 'agriculturalinputstrading',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "农资交易",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'trade/supplierServices',
|
|
||||||
component: () => import('@/views/trade/supplierServices'),
|
|
||||||
name: 'supplierServices',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "供应商服务",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'trade/procurementServices',
|
|
||||||
component: () => import('@/views/trade/procurementServices'),
|
|
||||||
name: 'procurementServices',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "采购商服务",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'trade/landTransaction',
|
|
||||||
component: () => import('@/views/trade/landTransaction'),
|
|
||||||
name: 'landTransaction',
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "土地交易",
|
|
||||||
icon: "",
|
|
||||||
noCache: false,
|
noCache: false,
|
||||||
link: null,
|
link: null,
|
||||||
},
|
},
|
||||||
|
name: "mainbody",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/brand',
|
path: "/inputs",
|
||||||
name: "brand",
|
name: "inputs",
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: false,
|
hidden: false,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'brand/index',
|
path: "inputs/index",
|
||||||
component: () => import('@/views/brand/index'),
|
component: () => import("@/views/inputs/index"),
|
||||||
hidden: false,
|
hidden: false,
|
||||||
meta: {
|
meta: {
|
||||||
title: "公共品牌",
|
title: "投入品监管平台",
|
||||||
icon: "star",
|
icon: "tree",
|
||||||
noCache: false,
|
noCache: false,
|
||||||
link: null,
|
link: null,
|
||||||
},
|
},
|
||||||
@ -378,108 +465,67 @@ export const constantRoutes = [
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/order',
|
path: '/region',
|
||||||
name: "order",
|
name: "region",
|
||||||
component: Layout,
|
component: Layout,
|
||||||
hidden: false,
|
hidden: false,
|
||||||
|
redirect: 'noredirect',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'region/index',
|
||||||
|
component: () => import('@/views/region/index'),
|
||||||
|
hidden: false,
|
||||||
|
meta: {
|
||||||
|
title: "行政信息",
|
||||||
|
icon: "star",
|
||||||
|
noCache: false,
|
||||||
|
link: null,
|
||||||
|
},
|
||||||
|
name: "region",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/traceability",
|
||||||
|
name: "traceability",
|
||||||
|
component: Layout,
|
||||||
|
hidden: false,
|
||||||
|
alwaysShow: true,
|
||||||
|
redirect: "noredirect",
|
||||||
meta: {
|
meta: {
|
||||||
title: "订单列表",
|
icon: "tree-table",
|
||||||
icon: "documentation",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
link: null,
|
||||||
|
noCache: false,
|
||||||
|
title: "溯源管理",
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'order/obligation',
|
path: "traceability/query",
|
||||||
component: () => import('@/views/order/obligation'),
|
component: () => import("@/views/traceability/query"),
|
||||||
|
name: "query",
|
||||||
hidden: false,
|
hidden: false,
|
||||||
meta: {
|
meta: {
|
||||||
title: "待付款",
|
title: "溯源查询",
|
||||||
|
icon: "",
|
||||||
noCache: false,
|
noCache: false,
|
||||||
link: null,
|
link: null,
|
||||||
},
|
},
|
||||||
name: "obligation",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'order/sendGoods',
|
path: "traceability/statistics",
|
||||||
component: () => import('@/views/order/sendGoods'),
|
component: () => import("@/views/traceability/statistics"),
|
||||||
|
name: "溯源统计",
|
||||||
hidden: false,
|
hidden: false,
|
||||||
meta: {
|
meta: {
|
||||||
title: "待发货",
|
title: "生产管理控制",
|
||||||
|
icon: "icon-data",
|
||||||
noCache: false,
|
noCache: false,
|
||||||
link: null,
|
link: null,
|
||||||
},
|
},
|
||||||
name: "sendGoods",
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'order/shipped',
|
|
||||||
component: () => import('@/views/order/shipped'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已发货",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "shipped",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/receivedGoods',
|
|
||||||
component: () => import('@/views/order/receivedGoods'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已收货",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "receivedGoods",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/completed',
|
|
||||||
component: () => import('@/views/order/completed'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已完成",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "completed",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/cancelled',
|
|
||||||
component: () => import('@/views/order/cancelled'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已取消",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "cancelled",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/salesService',
|
|
||||||
component: () => import('@/views/order/salesService'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "退货/退款",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "salesService",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'order/refunded',
|
|
||||||
component: () => import('@/views/order/refunded'),
|
|
||||||
hidden: false,
|
|
||||||
meta: {
|
|
||||||
title: "已退货/退款",
|
|
||||||
noCache: false,
|
|
||||||
link: null,
|
|
||||||
},
|
|
||||||
name: "refunded",
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
// 动态路由,基于用户权限动态去加载
|
// 动态路由,基于用户权限动态去加载
|
||||||
|
@ -7,7 +7,7 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* 侧边栏主题 深色主题theme-dark,浅色主题theme-light
|
* 侧边栏主题 深色主题theme-dark,浅色主题theme-light
|
||||||
*/
|
*/
|
||||||
sideTheme: 'theme-dark',
|
sideTheme: 'theme-light',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否系统布局配置
|
* 是否系统布局配置
|
||||||
|
@ -14,7 +14,7 @@ const useSettingsStore = defineStore(
|
|||||||
{
|
{
|
||||||
state: () => ({
|
state: () => ({
|
||||||
title: '',
|
title: '',
|
||||||
theme: storageSetting.theme || '#409EFF',
|
theme: storageSetting.theme || '#25bf82',
|
||||||
sideTheme: storageSetting.sideTheme || sideTheme,
|
sideTheme: storageSetting.sideTheme || sideTheme,
|
||||||
showSettings: showSettings,
|
showSettings: showSettings,
|
||||||
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
|
||||||
|
@ -1,6 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
开发中...
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup></script>
|
|
@ -1,325 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<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="ID" prop="id">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.id"
|
|
||||||
placeholder="用户ID"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="分类名称" prop="userCategoryName">
|
|
||||||
<el-input
|
|
||||||
v-model="formInline.userCategoryName"
|
|
||||||
placeholder="用户分类名称"
|
|
||||||
clearable
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户状态" prop="userStatus">
|
|
||||||
<el-select v-model="formInline.userStatus" placeholder="请选择" clearable>
|
|
||||||
<el-option label="异常" value="0" />
|
|
||||||
<el-option label="正常" value="1" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item
|
|
||||||
label="申请日期"
|
|
||||||
prop="startDate"
|
|
||||||
style="margin-right: 0"
|
|
||||||
>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="formInline.startDate"
|
|
||||||
type="date"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择起始日期"
|
|
||||||
clearable
|
|
||||||
:disabled-date="disableStartDate"
|
|
||||||
style="width: 160px"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style="width: 30px; text-align: center; display: inline-block"
|
|
||||||
>
|
|
||||||
-
|
|
||||||
</span>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="formInline.endDate"
|
|
||||||
type="date"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择截止日期"
|
|
||||||
clearable
|
|
||||||
:disabled-date="disableEndDate"
|
|
||||||
style="width: 160px"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button class="el-button-gry" type="primary" icon="Search" @click="onSubmit"
|
|
||||||
>查询</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
icon="Refresh"
|
|
||||||
style="margin: 16px 0 0 0"
|
|
||||||
@click="resetForm"
|
|
||||||
>重置</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<tableComponent
|
|
||||||
:table-data="tableData"
|
|
||||||
:columns="columns"
|
|
||||||
:show-border="false"
|
|
||||||
:show-selection="false"
|
|
||||||
:header-cell-class-name="getHeaderClass"
|
|
||||||
@page-change="handlePaginationChange"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
:total="tableTotal" :current-page="formInline.current" :page-size="formInline.size"
|
|
||||||
>
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #userStatus="slotProps">
|
|
||||||
<span v-if="slotProps.row.userStatus == 1" class="color-green"
|
|
||||||
>正常</span
|
|
||||||
>
|
|
||||||
<span v-else-if="slotProps.row.userStatus == 0" class="color-red"
|
|
||||||
>异常</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<el-button text class="el-button-custom" @click="seeDetails(slotProps.row)">查看</el-button>
|
|
||||||
<el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
|
|
||||||
<el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { id } from "element-plus/es/locales.mjs";
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
const formInline = reactive({
|
|
||||||
id: "",
|
|
||||||
nickname: "",
|
|
||||||
userName: "",
|
|
||||||
userCategoryName: "",
|
|
||||||
accountNumber: "",
|
|
||||||
phoneNumber: "",
|
|
||||||
sex: "",
|
|
||||||
userStatus: "",
|
|
||||||
userCategory: "",
|
|
||||||
unitPrice: "",
|
|
||||||
ordersNums: "",
|
|
||||||
startDate: "",
|
|
||||||
endDate: "",
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 禁用开始日期的逻辑(不能晚于已选的结束日期)
|
|
||||||
const disableStartDate = (time) => {
|
|
||||||
if (!formInline.endDate) return false;
|
|
||||||
const endDate = new Date(formInline.endDate);
|
|
||||||
return time.getTime() > endDate.getTime();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 禁用结束日期的逻辑(不能早于已选的开始日期)
|
|
||||||
const disableEndDate = (time) => {
|
|
||||||
if (!formInline.startDate) return false;
|
|
||||||
const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
|
|
||||||
const currentDate = new Date(time).setHours(0, 0, 0, 0);
|
|
||||||
return currentDate < startDate;
|
|
||||||
};
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
formInline.current = 1;
|
|
||||||
if (formInline.startDate && !formInline.endDate) {
|
|
||||||
ElMessage.warning("请选择结束日期!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (formInline.endDate && !formInline.startDate) {
|
|
||||||
ElMessage.warning("请选择开始日期!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log( formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
formInline.endDate = "";
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([
|
|
||||||
{ prop: "id", label: "ID" },
|
|
||||||
{ prop: "nickname", label: "昵称", width: "120" },
|
|
||||||
{ prop: "userName", label: "姓名" },
|
|
||||||
{ prop: "accountNumber", label: "账号", width: "120" },
|
|
||||||
{ prop: "phoneNumber", label: "手机号", width: "120" },
|
|
||||||
{ prop: "sex", label: "性别" },
|
|
||||||
{ prop: "userStatus", label: "用户状态", slotName: "userStatus" },
|
|
||||||
{ prop: "userCategory", label: "用户分类" },
|
|
||||||
{ prop: "unitPrice", label: "客单价" },
|
|
||||||
{ prop: "ordersNums", label: "订单数目" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action",width: "140",align: "center" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 形容词(情绪/风格)
|
|
||||||
const adjectives = [
|
|
||||||
"暴躁的",
|
|
||||||
"快乐的",
|
|
||||||
"忧郁的",
|
|
||||||
"疯狂的",
|
|
||||||
"安静的",
|
|
||||||
"慵懒的",
|
|
||||||
"甜甜的",
|
|
||||||
"咸咸的",
|
|
||||||
"酸酸的",
|
|
||||||
"辣辣的",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 食物名词(仅限食物)
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合:形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${adjectives})`) + Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
nickname: () => generateFoodNickname(), //昵称
|
|
||||||
userName: "@cname", //姓名
|
|
||||||
accountNumber: Mock.mock("@id").toString().slice(0, 10), //账号
|
|
||||||
phoneNumber: "@integer(13000000000, 18999999999)", //手机号
|
|
||||||
sex: '@pick(["男", "女"])', //性别
|
|
||||||
"userStatus|1": [0, 1], //0异常 1正常
|
|
||||||
"userCategory|1":
|
|
||||||
'@pick(["活跃/低消费", "活跃/中消费", "活跃/高消费"])', //用户分类
|
|
||||||
unitPrice: "@float(10, 200, 2, 2)", //客单价
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = () => {
|
|
||||||
// 模拟API请求延迟
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = generateMockData();
|
|
||||||
tableTotal.value = tableData.value.length;
|
|
||||||
}, 500);
|
|
||||||
};
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection) => {
|
|
||||||
console.log("选中项:", selection);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
};
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要删除的行:", row);
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿(根据实际样式调整)
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化(适用于动态变化的header/searchbar)
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped></style>
|
|
@ -1,321 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="app-container customer-control">
|
|
||||||
<div class="container-custom">
|
|
||||||
<!-- 搜索栏 -->
|
|
||||||
<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="nickname">
|
|
||||||
<el-input v-model="formInline.nickname" placeholder="用户昵称" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="ID" prop="id">
|
|
||||||
<el-input v-model="formInline.id" placeholder="用户ID" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="姓名" prop="userName">
|
|
||||||
<el-input v-model="formInline.userName" placeholder="用户姓名" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="账号" prop="accountNumber">
|
|
||||||
<el-input v-model="formInline.accountNumber" placeholder="用户账号" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号" prop="phoneNumber">
|
|
||||||
<el-input v-model="formInline.phoneNumber" placeholder="用户手机号" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="性别" prop="sex">
|
|
||||||
<el-select v-model="formInline.sex" placeholder="请选择" clearable>
|
|
||||||
<el-option label="男" value="1" />
|
|
||||||
<el-option label="女" value="2" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户状态" prop="userStatus">
|
|
||||||
<el-select v-model="formInline.userStatus" placeholder="请选择" clearable>
|
|
||||||
<el-option label="异常" value="0" />
|
|
||||||
<el-option label="正常" value="1" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户分类" prop="userCategory">
|
|
||||||
<el-select v-model="formInline.userCategory" placeholder="请选择" clearable>
|
|
||||||
<el-option label="活跃/低消费" value="1" />
|
|
||||||
<el-option label="活跃/中消费" value="2" />
|
|
||||||
<el-option label="活跃/高消费" value="3" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="客单价" prop="unitPrice">
|
|
||||||
<el-select v-model="formInline.unitPrice" placeholder="请选择" clearable>
|
|
||||||
<el-option label="≤500" value="1" />
|
|
||||||
<el-option label="≤1000" value="2" />
|
|
||||||
<el-option label="≤1500" value="3" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="订单数目" prop="ordersNums">
|
|
||||||
<el-select v-model="formInline.ordersNums" placeholder="请选择" clearable>
|
|
||||||
<el-option label="≤500" value="1" />
|
|
||||||
<el-option label="≤1000" value="2" />
|
|
||||||
<el-option label="≤1500" value="3" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="申请日期" prop="startDate" style="margin-right: 0">
|
|
||||||
<el-date-picker v-model="formInline.startDate" type="date" value-format="YYYY-MM-DD"
|
|
||||||
placeholder="请选择起始日期" clearable :disabled-date="disableStartDate" style="width: 160px" />
|
|
||||||
<span style="width: 30px; text-align: center; display: inline-block">
|
|
||||||
-
|
|
||||||
</span>
|
|
||||||
<el-date-picker v-model="formInline.endDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择截止日期"
|
|
||||||
clearable :disabled-date="disableEndDate" style="width: 160px" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="search-bar-right">
|
|
||||||
<el-button type="primary" class="el-button-gry" icon="Search" @click="onSubmit">查询</el-button>
|
|
||||||
<el-button icon="Refresh" style="margin: 16px 0 0 0" @click="resetForm">重置</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
|
|
||||||
<tableComponent :table-data="tableData" :columns="columns" :show-border="false" :show-selection="false"
|
|
||||||
:header-cell-class-name="getHeaderClass" @page-change="handlePaginationChange"
|
|
||||||
@selection-change="handleSelectionChange" :total="tableTotal" :current-page="formInline.current"
|
|
||||||
:page-size="formInline.size">
|
|
||||||
<!-- 自定义-状态 -->
|
|
||||||
<template #userStatus="slotProps">
|
|
||||||
<span v-if="slotProps.row.userStatus == 1" class="color-green">正常</span>
|
|
||||||
<span v-else-if="slotProps.row.userStatus == 0" class="color-red">异常</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义-操作 -->
|
|
||||||
<template #action="slotProps">
|
|
||||||
<el-button text class="el-button-custom" @click="seeDetails(slotProps.row)">查看</el-button>
|
|
||||||
<el-button text class="el-button-custom" @click="handleEdit(slotProps.row)">编辑</el-button>
|
|
||||||
<el-button text class="el-button-delete" @click="handleDelete(slotProps.row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</tableComponent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
|
||||||
import tableComponent from "@/components/tableComponent.vue";
|
|
||||||
import Mock from "mockjs";
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
const iconSize = "16px";
|
|
||||||
|
|
||||||
const formInline = reactive({
|
|
||||||
id: "",
|
|
||||||
nickname: "",
|
|
||||||
userName: "",
|
|
||||||
accountNumber: "",
|
|
||||||
phoneNumber: "",
|
|
||||||
sex: "",
|
|
||||||
userStatus: "",
|
|
||||||
userCategory: "",
|
|
||||||
unitPrice: "",
|
|
||||||
ordersNums: "",
|
|
||||||
startDate: "",
|
|
||||||
endDate: "",
|
|
||||||
current: 1,
|
|
||||||
size: 10,
|
|
||||||
});
|
|
||||||
|
|
||||||
// 禁用开始日期的逻辑(不能晚于已选的结束日期)
|
|
||||||
const disableStartDate = (time) => {
|
|
||||||
if (!formInline.endDate) return false;
|
|
||||||
const endDate = new Date(formInline.endDate);
|
|
||||||
return time.getTime() > endDate.getTime();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 禁用结束日期的逻辑(不能早于已选的开始日期)
|
|
||||||
const disableEndDate = (time) => {
|
|
||||||
if (!formInline.startDate) return false;
|
|
||||||
const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
|
|
||||||
const currentDate = new Date(time).setHours(0, 0, 0, 0);
|
|
||||||
return currentDate < startDate;
|
|
||||||
};
|
|
||||||
|
|
||||||
const searchForm = ref(null);
|
|
||||||
const onSubmit = () => {
|
|
||||||
formInline.current = 1;
|
|
||||||
if (formInline.startDate && !formInline.endDate) {
|
|
||||||
ElMessage.warning("请选择结束日期!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (formInline.endDate && !formInline.startDate) {
|
|
||||||
ElMessage.warning("请选择开始日期!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log( formInline);
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
const resetForm = () => {
|
|
||||||
searchForm.value.resetFields();
|
|
||||||
formInline.endDate = "";
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = ref([]);
|
|
||||||
const tableLoading = ref(false);
|
|
||||||
const tableTotal = ref(0);
|
|
||||||
let nowClickRow = ref({});
|
|
||||||
// 列配置
|
|
||||||
const columns = ref([
|
|
||||||
{ prop: "id", label: "ID" },
|
|
||||||
{ prop: "nickname", label: "昵称", width: "120" },
|
|
||||||
{ prop: "userName", label: "姓名" },
|
|
||||||
{ prop: "accountNumber", label: "账号" },
|
|
||||||
{ prop: "phoneNumber", label: "手机号", width: "120" },
|
|
||||||
{ prop: "sex", label: "性别" },
|
|
||||||
{ prop: "userStatus", label: "用户状态", slotName: "userStatus" },
|
|
||||||
{ prop: "userCategory", label: "用户分类" },
|
|
||||||
{ prop: "unitPrice", label: "客单价" },
|
|
||||||
{ prop: "ordersNums", label: "订单数目" },
|
|
||||||
{ prop: "action", label: "操作", slotName: "action",width: "140",align: "center" },
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 生成食物主题昵称
|
|
||||||
const generateFoodNickname = () => {
|
|
||||||
// 形容词(情绪/风格)
|
|
||||||
const adjectives = [
|
|
||||||
"暴躁的",
|
|
||||||
"快乐的",
|
|
||||||
"忧郁的",
|
|
||||||
"疯狂的",
|
|
||||||
"安静的",
|
|
||||||
"慵懒的",
|
|
||||||
"甜甜的",
|
|
||||||
"咸咸的",
|
|
||||||
"酸酸的",
|
|
||||||
"辣辣的",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 食物名词(仅限食物)
|
|
||||||
const foods = [
|
|
||||||
"辣椒",
|
|
||||||
"西瓜",
|
|
||||||
"土豆",
|
|
||||||
"番茄",
|
|
||||||
"黄瓜",
|
|
||||||
"苹果",
|
|
||||||
"蛋糕",
|
|
||||||
"面包",
|
|
||||||
"披萨",
|
|
||||||
"冰淇淋",
|
|
||||||
"奶茶",
|
|
||||||
"咖啡",
|
|
||||||
"啤酒",
|
|
||||||
"炸鸡",
|
|
||||||
];
|
|
||||||
|
|
||||||
// 随机组合:形容词 + 食物
|
|
||||||
return Mock.mock(`@pick(${adjectives})`) + Mock.mock(`@pick(${foods})`);
|
|
||||||
};
|
|
||||||
// 生成模拟数据
|
|
||||||
const generateMockData = () => {
|
|
||||||
return Mock.mock({
|
|
||||||
"list|10": [
|
|
||||||
{
|
|
||||||
"id|+1": 10000,
|
|
||||||
nickname: () => generateFoodNickname(), //昵称
|
|
||||||
userName: "@cname", //姓名
|
|
||||||
accountNumber: Mock.mock("@id").toString().slice(0, 10), //账号
|
|
||||||
phoneNumber: "@integer(13000000000, 18999999999)", //手机号
|
|
||||||
sex: '@pick(["男", "女"])', //性别
|
|
||||||
"userStatus|1": [0, 1], //0异常 1正常
|
|
||||||
"userCategory|1":
|
|
||||||
'@pick(["活跃/低消费", "活跃/中消费", "活跃/高消费"])', //用户分类
|
|
||||||
unitPrice: "@float(10, 200, 2, 2)", //客单价
|
|
||||||
ordersNums: "@integer(10, 200)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}).list;
|
|
||||||
};
|
|
||||||
// 加载数据
|
|
||||||
const loadData = async () => {
|
|
||||||
// 模拟API请求延迟
|
|
||||||
setTimeout(() => {
|
|
||||||
tableData.value = generateMockData();
|
|
||||||
tableTotal.value = tableData.value.length;
|
|
||||||
}, 500);
|
|
||||||
// try {
|
|
||||||
// let response = await getGoodManageInfo(formInline);
|
|
||||||
// console.log(response);
|
|
||||||
// if (response.code == 200) {
|
|
||||||
// tableData.value = response.data.records;
|
|
||||||
// tableTotal.value = response.data.total;
|
|
||||||
// }
|
|
||||||
// } catch (error) {
|
|
||||||
// console.log(error);
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
|
|
||||||
const getHeaderClass = ({ column }) => {
|
|
||||||
return "custom-header";
|
|
||||||
};
|
|
||||||
// 分页变化
|
|
||||||
const handlePaginationChange = ({ page, pageSize }) => {
|
|
||||||
console.log("分页变化:", page, pageSize);
|
|
||||||
// 这里可以调用API获取新数据
|
|
||||||
loadData();
|
|
||||||
};
|
|
||||||
// 多选框变化
|
|
||||||
const handleSelectionChange = (selection) => {
|
|
||||||
console.log("选中项:", selection);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 查看详情
|
|
||||||
const seeDetails = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要查看详情的行:", row);
|
|
||||||
};
|
|
||||||
// 编辑操作
|
|
||||||
const handleEdit = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
};
|
|
||||||
// 删除操作
|
|
||||||
const handleDelete = (row) => {
|
|
||||||
nowClickRow.value = row;
|
|
||||||
console.log("要编辑的行:", row);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const titleRef = ref(null);
|
|
||||||
const searchBarRef = ref(null);
|
|
||||||
const tableViewportHeight = ref(0);
|
|
||||||
// 精确计算可用高度
|
|
||||||
const calculateTableHeight = () => {
|
|
||||||
// 获取窗口总高度
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
|
|
||||||
// 获取各组件高度
|
|
||||||
const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
|
|
||||||
const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
|
|
||||||
|
|
||||||
// 计算容器内边距补偿(根据实际样式调整)
|
|
||||||
const paddingCompensation = 130;
|
|
||||||
|
|
||||||
// 最终计算
|
|
||||||
tableViewportHeight.value =
|
|
||||||
windowHeight - headerHeight - searchBarHeight - paddingCompensation;
|
|
||||||
// console.log(tableViewportHeight.value);
|
|
||||||
};
|
|
||||||
// 组件挂载时加载数据
|
|
||||||
onMounted(() => {
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
calculateTableHeight();
|
|
||||||
|
|
||||||
// 添加响应式监听
|
|
||||||
window.addEventListener("resize", calculateTableHeight);
|
|
||||||
|
|
||||||
// 监听DOM变化(适用于动态变化的header/searchbar)
|
|
||||||
const observer = new ResizeObserver(calculateTableHeight);
|
|
||||||
if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
|
|
||||||
if (searchBarRef.value) observer.observe(searchBarRef.value);
|
|
||||||
});
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", calculateTableHeight);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped></style>
|
|
@ -2,25 +2,22 @@
|
|||||||
<div class="app-container home">
|
<div class="app-container home">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :sm="24" :lg="16" style="padding-left: 20px">
|
<el-col :sm="24" :lg="16" style="padding-left: 20px">
|
||||||
<h2>农业产业运营云平台 - 后台管理系统</h2>
|
<h2>农业产业政务云平台 - 后台管理系统</h2>
|
||||||
<p>
|
|
||||||
是为农业产业园运营单位打造的一体化智能管理平台,旨在提升园区运营效率、优化业务流程、保障数据安全,实现运营服务的数字化、规范化和透明化。
|
|
||||||
</p>
|
|
||||||
<b>
|
|
||||||
核心功能
|
|
||||||
</b>
|
|
||||||
<p>
|
<p>
|
||||||
✅ 权限分级管理:支持多角色(如超级管理员、部门管理员、审核员)精细化权限控制,确保数据安全与操作合规。<br>
|
是为县域监管部门打造的一体化智能管理平台,旨在提升农业政务监管效率、优化业务流程、保障数据安全,实现农业产业监管的数字化、规范化和透明化。
|
||||||
✅ 业务协同办理:集成工单流转、事项审批、数据填报等功能,实现跨域高效协作。<br>
|
</p>
|
||||||
✅ 数据可视化分析:动态展示园区服务、财政支出等关键指标,辅助园区管理决策。<br>
|
<b> 核心功能 </b>
|
||||||
✅ 安全审计追溯:操作日志全记录,支持敏感行为预警与责任追溯,符合等保要求。<br>
|
<p>
|
||||||
✅ 移动端适配:支持PC端与移动端同步操作,满足园区运营事务处理需求。
|
✅ 权限分级管理:支持多角色(如超级管理员、部门管理员、审核员)精细化权限控制,确保数据安全与操作合规。<br />
|
||||||
|
✅ 业务协同办理:集成工单流转、事项审批、数据填报等功能,实现跨域高效协作。<br />
|
||||||
|
✅ 数据可视化分析:动态展示农资监管、农产品溯源等关键要素,辅助监管部门管理决策。<br />
|
||||||
|
✅ 安全审计追溯:操作日志全记录,支持敏感行为预警与责任追溯,符合等保要求。<br />
|
||||||
|
✅ 移动端适配:支持PC端与移动端同步操作,满足农业监管事务处理需求。
|
||||||
</p>
|
</p>
|
||||||
<b>系统价值</b>
|
<b>系统价值</b>
|
||||||
<p>
|
<p>
|
||||||
🔹 提效减负:自动化流程减少人工干预,缩短办事周期。<br>
|
🔹 提效减负:自动化流程减少人工干预,缩短办事周期。<br />
|
||||||
🔹 阳光政务:全流程电子化留痕,增强公众监督与信任。<br>
|
🔹 阳光政务:全流程电子化留痕,增强公众监督与信任。<br />
|
||||||
🔹 资源整合:打破信息孤岛,实现跨系统数据互通共享。
|
🔹 资源整合:打破信息孤岛,实现跨系统数据互通共享。
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
@ -79,7 +76,7 @@
|
|||||||
>http://47.109.205.240/platform</el-link
|
>http://47.109.205.240/platform</el-link
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
<div style="height: 200px;"></div>
|
<div style="height: 200px"></div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -266,22 +263,22 @@
|
|||||||
<span>客户端</span>
|
<span>客户端</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- <div class="body" v-if="state.user.userName == 'super'">
|
<div class="body">
|
||||||
<img
|
<img
|
||||||
src="@/assets/images/MXd3uUrO.png"
|
src="@/assets/images/MXd3uUrO.png"
|
||||||
alt="donate"
|
alt="donate"
|
||||||
style="width: 196px"
|
style="width: 196px"
|
||||||
/>
|
/>
|
||||||
<p style="width: 200px; text-align: center">政务云APP客户端</p>
|
<p style="width: 200px; text-align: center">政务云APP客户端</p>
|
||||||
</div> -->
|
</div>
|
||||||
<div class="body">
|
<!-- <div class="body" v-else>
|
||||||
<img
|
<img
|
||||||
src="@/assets/images/4SVVtpob.png"
|
src="@/assets/images/4SVVtpob.png"
|
||||||
alt="donate"
|
alt="donate"
|
||||||
style="width: 196px"
|
style="width: 196px"
|
||||||
/>
|
/>
|
||||||
<p style="width: 200px; text-align: center">运营云APP客户端</p>
|
<p style="width: 200px; text-align: center">运营云APP客户端</p>
|
||||||
</div>
|
</div> -->
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -292,21 +289,21 @@
|
|||||||
const version = ref("4.0.1");
|
const version = ref("4.0.1");
|
||||||
|
|
||||||
// 获取用户这里用于临时根据账户判断角色,显示不同客户端app下载图片【没其他用途】
|
// 获取用户这里用于临时根据账户判断角色,显示不同客户端app下载图片【没其他用途】
|
||||||
import { getUserProfile } from "@/api/system/user"
|
import { getUserProfile } from "@/api/system/user";
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
user: {},
|
user: {},
|
||||||
roleGroup: {},
|
roleGroup: {},
|
||||||
postGroup: {}
|
postGroup: {},
|
||||||
})
|
});
|
||||||
function getUser() {
|
function getUser() {
|
||||||
getUserProfile().then(response => {
|
getUserProfile().then((response) => {
|
||||||
state.user = response.data
|
state.user = response.data;
|
||||||
state.roleGroup = response.roleGroup
|
state.roleGroup = response.roleGroup;
|
||||||
state.postGroup = response.postGroup
|
state.postGroup = response.postGroup;
|
||||||
console.log(state.user) // 获取用户信息
|
console.log(state.user); // 获取用户信息
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
getUser()
|
getUser();
|
||||||
|
|
||||||
function goTarget(url) {
|
function goTarget(url) {
|
||||||
window.open(url, "__blank");
|
window.open(url, "__blank");
|
||||||
|
48
src/views/region/index.vue
Normal file
48
src/views/region/index.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container customer-control">
|
||||||
|
<div ref="buttonRef">
|
||||||
|
<!-- 按钮组 -->
|
||||||
|
<el-button icon="Sort" type="primary">{{ btnText }}</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="table-cont">
|
||||||
|
<el-table :data="tableData" style="width: 100%" row-key="id" border lazy v-loading="loading"
|
||||||
|
:tree-props="{ children: 'areaChildVOS' }" default-expand-all>
|
||||||
|
<el-table-column prop="areaName" label="区域名称" />
|
||||||
|
<el-table-column prop="areaCode" label="区域代码" />
|
||||||
|
<el-table-column prop="level" label="区域级别" />
|
||||||
|
<el-table-column prop="operate" label="操作" slotName="operate">
|
||||||
|
<template #default="slotProps">
|
||||||
|
<el-button text type="success">新增</el-button>
|
||||||
|
<el-button text type="success" v-if="slotProps.row.areaCode != 530000">编辑</el-button>
|
||||||
|
<el-button text type="danger" v-if="slotProps.row.areaCode != 530000">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { getRegion } from "@/api/common";
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const { params, query } = route
|
||||||
|
|
||||||
|
let btnText = ref('展开全部');
|
||||||
|
|
||||||
|
const tableData = ref([]);
|
||||||
|
let loading = ref(false);
|
||||||
|
const getArea = async () => {
|
||||||
|
const res = await getRegion();
|
||||||
|
if (res.code === 200) {
|
||||||
|
tableData.value = res.data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getArea();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scope></style>
|
@ -33,9 +33,9 @@ export default defineConfig(({ mode, command }) => {
|
|||||||
chunkSizeWarningLimit: 2000,
|
chunkSizeWarningLimit: 2000,
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
output: {
|
output: {
|
||||||
chunkFileNames: "static/js/[name]-[hash].js",
|
chunkFileNames: `static/js/[name]-${Date.now()}-[hash].js`,
|
||||||
entryFileNames: "static/js/[name]-[hash].js",
|
entryFileNames: `static/js/[name]-${Date.now()}-[hash].js`,
|
||||||
assetFileNames: "static/[ext]/[name]-[hash].[ext]",
|
assetFileNames: `static/[ext]/[name]-${Date.now()}-[hash].[ext]`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user