updata
This commit is contained in:
parent
19e4a8276b
commit
fc80653a6f
@ -364,7 +364,7 @@ export const asyncRoutes = [
|
|||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "orderManagement",
|
path: "orderManagement",
|
||||||
component: () => import("@/views/customer/orderManagement"),
|
component: () => import("@/views/customer/orderManagement/index.vue"),
|
||||||
name: "OrderManagement",
|
name: "OrderManagement",
|
||||||
meta: { title: "百度订单", fullPath: "/customer/orderManagement", noCache: true, },
|
meta: { title: "百度订单", fullPath: "/customer/orderManagement", noCache: true, },
|
||||||
},
|
},
|
||||||
@ -388,7 +388,7 @@ export const asyncRoutes = [
|
|||||||
{
|
{
|
||||||
path: "userResource", component: () => import(
|
path: "userResource", component: () => import(
|
||||||
// "@/views/customer/userResource/iframeJiNan.vue"//iframe报错
|
// "@/views/customer/userResource/iframeJiNan.vue"//iframe报错
|
||||||
"@/views/customer/userResource"
|
"@/views/customer/userResource/index.vue"
|
||||||
), name: "userResource", meta: { title: "百度资源", fullPath: "/customer/userResource", noCache: true },
|
), name: "userResource", meta: { title: "百度资源", fullPath: "/customer/userResource", noCache: true },
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@ -799,25 +799,7 @@ export const asyncRoutes = [
|
|||||||
{
|
{
|
||||||
|
|
||||||
},
|
},
|
||||||
// 工单管理 - 变为一级菜单
|
|
||||||
{
|
|
||||||
path: "/workOrderManagement",
|
|
||||||
component: Layout,
|
|
||||||
meta: {
|
|
||||||
title: "工单管理",
|
|
||||||
icon: "el-icon-tickets",
|
|
||||||
noCache: true,
|
|
||||||
fullPath: "/workOrderManagement"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: "index",
|
|
||||||
component: () => import("@/views/customer/workOrderManagement"),
|
|
||||||
name: "WorkOrderManagement",
|
|
||||||
meta: { title: "工单管理", fullPath: "/workOrderManagement/index" },
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// 退订管理 - 变为一级菜单（包含子菜单）
|
// 退订管理 - 变为一级菜单（包含子菜单）
|
||||||
{
|
{
|
||||||
path: "/unsubscribeManagement",
|
path: "/unsubscribeManagement",
|
||||||
@ -899,6 +881,25 @@ export const asyncRoutes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
// 工单管理 - 变为一级菜单
|
||||||
|
{
|
||||||
|
path: "/workOrderManagement",
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
title: "工单管理",
|
||||||
|
icon: "el-icon-tickets",
|
||||||
|
noCache: true,
|
||||||
|
fullPath: "/workOrderManagement"
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "index",
|
||||||
|
component: () => import("@/views/customer/workOrderManagement"),
|
||||||
|
name: "WorkOrderManagement",
|
||||||
|
meta: { title: "工单管理", fullPath: "/workOrderManagement/index" },
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
// // 客户
|
// // 客户
|
||||||
{
|
{
|
||||||
@ -1838,37 +1839,38 @@ export const asyncRoutes = [
|
|||||||
},
|
},
|
||||||
},],
|
},],
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: "/administrator", component: Layout, redirect: "/administrator/index", meta: {
|
||||||
|
// title: "企业管理",
|
||||||
|
// icon: "el-icon-office-building",
|
||||||
|
// noCache: true,
|
||||||
|
// fullPath: "/administrator"
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: "departmentManagement",
|
||||||
|
// component: () => import("@/views/administrator/departmentManagement"),
|
||||||
|
// name: "epartmentManagement",
|
||||||
|
// meta: {
|
||||||
|
// title: "部门管理", fullPath: "/administrator/departmentManagement",
|
||||||
|
// },
|
||||||
|
// }, {
|
||||||
|
// path: "configureOrganizationUserRole",
|
||||||
|
// component: () => import("@/views/administrator/configureOrganizationUserRole"),
|
||||||
|
// name: "ConfigureOrganizationUserRole",
|
||||||
|
// meta: {
|
||||||
|
// title: "角色管理", fullPath: "/administrator/configureOrganizationUserRole",
|
||||||
|
// },
|
||||||
|
// }, {
|
||||||
|
// path: "stationMessageSettings",
|
||||||
|
// component: () => import("@/views/administrator/stationMessageSettings"),
|
||||||
|
// name: "StationMessageSettings",
|
||||||
|
// meta: {
|
||||||
|
// title: "站内信设置", fullPath: "/administrator/stationMessageSettings",
|
||||||
|
// },
|
||||||
|
// },],
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: "/administrator", component: Layout, redirect: "/administrator/index", meta: {
|
|
||||||
title: "企业管理",
|
|
||||||
icon: "el-icon-office-building",
|
|
||||||
noCache: true,
|
|
||||||
fullPath: "/administrator"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: "departmentManagement",
|
|
||||||
component: () => import("@/views/administrator/departmentManagement"),
|
|
||||||
name: "epartmentManagement",
|
|
||||||
meta: {
|
|
||||||
title: "部门管理", fullPath: "/administrator/departmentManagement",
|
|
||||||
},
|
|
||||||
}, {
|
|
||||||
path: "configureOrganizationUserRole",
|
|
||||||
component: () => import("@/views/administrator/configureOrganizationUserRole"),
|
|
||||||
name: "ConfigureOrganizationUserRole",
|
|
||||||
meta: {
|
|
||||||
title: "角色管理", fullPath: "/administrator/configureOrganizationUserRole",
|
|
||||||
},
|
|
||||||
}, {
|
|
||||||
path: "stationMessageSettings",
|
|
||||||
component: () => import("@/views/administrator/stationMessageSettings"),
|
|
||||||
name: "StationMessageSettings",
|
|
||||||
meta: {
|
|
||||||
title: "站内信设置", fullPath: "/administrator/stationMessageSettings",
|
|
||||||
},
|
|
||||||
},],
|
|
||||||
}, {
|
|
||||||
path: "/management",
|
path: "/management",
|
||||||
hidden: true,
|
hidden: true,
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|||||||
@ -24,6 +24,9 @@ function filterAsyncRoutes(routes, permissions, userRoles = []) {
|
|||||||
// 检查当前路由是否在权限列表中
|
// 检查当前路由是否在权限列表中
|
||||||
const hasPermission = permissions.some(p => p.path === route.meta?.fullPath);
|
const hasPermission = permissions.some(p => p.path === route.meta?.fullPath);
|
||||||
|
|
||||||
|
// 特殊处理：确保"全部产品"和"资源概览"这两个一级路由在客户角色下显示
|
||||||
|
const isCriticalRoute = route.path === "/product" || route.path === "/overview";
|
||||||
|
|
||||||
// 检查是否为仅客户可访问的路由
|
// 检查是否为仅客户可访问的路由
|
||||||
const isCustomerOnlyRoute = customerOnlyRoutes.includes(route.path);
|
const isCustomerOnlyRoute = customerOnlyRoutes.includes(route.path);
|
||||||
|
|
||||||
@ -36,6 +39,10 @@ function filterAsyncRoutes(routes, permissions, userRoles = []) {
|
|||||||
if (hasPermission) {
|
if (hasPermission) {
|
||||||
res.push(tmpRoute);
|
res.push(tmpRoute);
|
||||||
}
|
}
|
||||||
|
// 如果是关键路由且用户是客户，也要加入结果
|
||||||
|
else if (isCriticalRoute && userRoles.includes('客户')) {
|
||||||
|
res.push(tmpRoute);
|
||||||
|
}
|
||||||
// 如果没有直接权限，但有子路由，递归处理子路由
|
// 如果没有直接权限，但有子路由，递归处理子路由
|
||||||
else if (tmpRoute.children) {
|
else if (tmpRoute.children) {
|
||||||
const filteredChildren = filterAsyncRoutes(tmpRoute.children, permissions, userRoles);
|
const filteredChildren = filterAsyncRoutes(tmpRoute.children, permissions, userRoles);
|
||||||
@ -73,11 +80,12 @@ function addUserRoutes(routes, userType, orgType, userRoles = []) {
|
|||||||
|
|
||||||
// 新增：为所有用户添加五个新的客户菜单，但只有客户角色才能看到
|
// 新增：为所有用户添加五个新的客户菜单，但只有客户角色才能看到
|
||||||
const newCustomerRoutes = [
|
const newCustomerRoutes = [
|
||||||
routes.find(route => route.path === "/workOrderManagement"),
|
|
||||||
routes.find(route => route.path === "/unsubscribeManagement"),
|
routes.find(route => route.path === "/unsubscribeManagement"),
|
||||||
routes.find(route => route.path === "/informationPerfect"),
|
routes.find(route => route.path === "/informationPerfect"),
|
||||||
routes.find(route => route.path === "/rechargeManagement"),
|
routes.find(route => route.path === "/rechargeManagement"),
|
||||||
routes.find(route => route.path === "/invoiceManagement")
|
routes.find(route => route.path === "/invoiceManagement"),
|
||||||
|
routes.find(route => route.path === "/workOrderManagement")
|
||||||
|
|
||||||
].filter(route => {
|
].filter(route => {
|
||||||
// 过滤掉undefined，并且只有客户角色才能看到这些路由
|
// 过滤掉undefined，并且只有客户角色才能看到这些路由
|
||||||
return route && userRoles.includes('客户');
|
return route && userRoles.includes('客户');
|
||||||
|
|||||||
@ -184,7 +184,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" header-align="center" prop="id" label="订单号" show-overflow-tooltip>
|
<el-table-column align="center" header-align="center" prop="id" label="订单号" show-overflow-tooltip>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div class="cell-content">{{ scope.row.id }}</div>
|
<div class="cell-content">{{ scope.row.orderid }}</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" header-align="center" label="订单原价" width="140">
|
<el-table-column align="center" header-align="center" label="订单原价" width="140">
|
||||||
@ -220,7 +220,7 @@
|
|||||||
<div class="cell-content">{{ formatOrderDate(scope.row.order_date) }}</div>
|
<div class="cell-content">{{ formatOrderDate(scope.row.order_date) }}</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" header-align="center" label="操作" width="140">
|
<!-- <el-table-column align="center" header-align="center" label="操作" width="140">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div class="cell-content">
|
<div class="cell-content">
|
||||||
<el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
|
<el-button size="small" v-if="scope.row.order_status === '0'" type="primary"
|
||||||
@ -231,7 +231,7 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column> -->
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -52,13 +52,28 @@
|
|||||||
border
|
border
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
>
|
>
|
||||||
<el-table-column min-width="90px" align="center" prop="productname" label="产品名称"></el-table-column>
|
<el-table-column min-width="150px" align="center" prop="productname" label="产品名称"></el-table-column>
|
||||||
<el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
|
<!-- <el-table-column min-width="150px" align="center" prop="productdesc" label="产品描述" :show-overflow-tooltip="true">
|
||||||
<template slot-scope="{row}">
|
<template slot-scope="{row}">
|
||||||
{{ row.productdesc ? row.productdesc : '-' }}
|
{{ row.productdesc ? row.productdesc : '-' }}
|
||||||
</template>
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
<el-table-column min-width="150px" align="center" prop="resourceid" label="资源ID">
|
||||||
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
|
<el-table-column min-width="150px" align="center" prop="orderid" label="订单号" :show-overflow-tooltip="true"></el-table-column>
|
||||||
|
|
||||||
|
<!-- 修改后的产品配置列，渲染 spec_data -->
|
||||||
|
<el-table-column min-width="150px" align="center" label="产品配置">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.spec_data && scope.row.spec_data.length">
|
||||||
|
{{ scope.row.spec_data.join(', ') }}
|
||||||
|
</span>
|
||||||
|
<span v-else>--</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
|
<el-table-column min-width="60px" align="center" prop="start_date" label="购买日期"></el-table-column>
|
||||||
<el-table-column prop="expire_date" label="到期日期">
|
<el-table-column prop="expire_date" label="到期日期">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|||||||
@ -29,9 +29,9 @@
|
|||||||
<el-button type="primary" style="width:60px;height:32px;" size="small" @click="resetSearch">重置</el-button>
|
<el-button type="primary" style="width:60px;height:32px;" size="small" @click="resetSearch">重置</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row style="height: calc(100vh - 180px)">
|
<el-row style="height: calc(100vh - 240px)">
|
||||||
<el-col >
|
<el-col >
|
||||||
<el-table :data="dataList" height=" calc(100vh - 180px)" style="margin-top: -1px" class="table" border>
|
<el-table :data="dataList" height=" calc(100vh - 260px)" style="margin-top: -1px" class="table" border>
|
||||||
<el-table-column min-width="150" label="产品名称" prop="name"></el-table-column>
|
<el-table-column min-width="150" label="产品名称" prop="name"></el-table-column>
|
||||||
<el-table-column min-width="150" label="产品规格" prop="spec_note">
|
<el-table-column min-width="150" label="产品规格" prop="spec_note">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
@ -227,9 +227,19 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
.input-with-select {
|
.input-with-select {
|
||||||
width: 60%;
|
width: 70%;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.searchSelect {
|
.searchSelect {
|
||||||
width: 110px;
|
width: 110px;
|
||||||
@ -243,28 +253,183 @@ export default {
|
|||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 20px;
|
margin-top: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
::v-deep .el-table__header-wrapper {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table__body-wrapper {
|
||||||
|
tr:hover > td {
|
||||||
|
background-color: #f5f9ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 10px 0;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-button--primary {
|
||||||
|
background-color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #66b1ff;
|
||||||
|
border-color: #66b1ff;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tip-title {
|
.tip-title {
|
||||||
padding-left: 15px;
|
padding: 8px 16px;
|
||||||
height: 35px;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
//border:1px solid red;
|
background-color: #ecf5ff;
|
||||||
background-color: #d5e7ff;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
color: #002da0;
|
color: #409eff;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 4px solid #409eff;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.label-style {
|
.label-style {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
color: #484545;
|
color: #606266;
|
||||||
|
margin-right: 8px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索区域样式优化
|
||||||
|
.search-area {
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 0 16px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对话框样式优化
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.el-dialog__header {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__footer {
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-top: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input-number {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置按钮样式
|
||||||
|
.reset-btn {
|
||||||
|
background-color: #909399;
|
||||||
|
border-color: #909399;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #a6a9ad;
|
||||||
|
border-color: #a6a9ad;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 6px rgba(144, 147, 153, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器样式优化
|
||||||
|
::v-deep .el-select {
|
||||||
|
.el-input__inner {
|
||||||
|
&:focus {
|
||||||
|
border-color: #409eff;
|
||||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式调整
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.search-area {
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格操作列按钮样式
|
||||||
|
.operation-cell {
|
||||||
|
.el-button {
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -427,45 +427,318 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.mainBox {
|
||||||
|
padding: 24px;
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
// 步骤容器样式
|
||||||
|
.step-container {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 步骤标题样式
|
||||||
|
.titleOut {
|
||||||
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 6px;
|
||||||
|
height: 20px;
|
||||||
|
background: white;
|
||||||
|
margin-right: 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单样式优化
|
||||||
.demo-dynamic {
|
.demo-dynamic {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 20px auto;
|
margin: 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
.mainBox {
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
height: calc(100vh - 100px);
|
|
||||||
background: #fff;
|
::v-deep .el-form-item {
|
||||||
overflow-y: auto;
|
margin-bottom: 20px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8fafc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleOut {
|
&:last-of-type {
|
||||||
font-size: 18px;
|
background: none;
|
||||||
font-weight: bold;
|
border-top: 1px dashed #e4e7ed;
|
||||||
color: #4c4948;
|
margin-top: 20px;
|
||||||
display: flex;
|
padding-top: 20px;
|
||||||
justify-content: flex-start;
|
}
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form-item__label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入框样式
|
||||||
|
::v-deep .el-input,
|
||||||
|
::v-deep .el-select,
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #409eff;
|
||||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮样式
|
||||||
|
::v-deep .el-button {
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.el-button--primary {
|
||||||
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.el-button--danger {
|
||||||
|
background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(135deg, #f78989 0%, #f56c6c 100%);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: #c0c4cc;
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.el-button--default {
|
||||||
|
&:hover {
|
||||||
|
color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分类样式优化
|
||||||
.typeStyle {
|
.typeStyle {
|
||||||
padding-left: 0;
|
padding: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
// background: #f8fafc;
|
||||||
|
border-radius: 6px;
|
||||||
|
// border-left: 4px solid #409eff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-right: 15px;
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '•';
|
||||||
|
color: #409eff;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.el-input {
|
.el-input {
|
||||||
width: 200px;
|
flex: 1;
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
&.is-disabled .el-input__inner {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border-color: #e4e7ed;
|
||||||
|
color: #c0c4cc;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
// 响应式设计
|
||||||
padding: 0;
|
@media (max-width: 768px) {
|
||||||
margin: 0;
|
.mainBox {
|
||||||
list-style: none;
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-dynamic {
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
::v-deep .el-row {
|
||||||
|
margin: 0 -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-col {
|
||||||
|
padding: 0 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.typeStyle {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 小屏幕下按钮堆叠
|
||||||
|
::v-deep .el-form-item:last-of-type {
|
||||||
|
.el-button {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& + .el-button {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 步骤进度指示器（可选添加）
|
||||||
|
.step-progress {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
.step {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background: #e4e7ed;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #e4e7ed;
|
||||||
|
color: #909399;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.step-number {
|
||||||
|
background: #409eff;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-title {
|
||||||
|
color: #409eff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载和状态提示优化
|
||||||
|
::v-deep .el-message {
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
&.el-message--success {
|
||||||
|
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||||||
|
border-color: #91d5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.el-message--error {
|
||||||
|
background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
|
||||||
|
border-color: #ffccc7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证状态
|
||||||
|
::v-deep .el-form-item.is-error {
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner {
|
||||||
|
border-color: #f56c6c;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form-item.is-success {
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner {
|
||||||
|
border-color: #67c23a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -40,9 +40,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row style="height: calc(100vh - 195px);">
|
<el-row style="height: calc(100vh - 240px);">
|
||||||
<el-col>
|
<el-col>
|
||||||
<el-table v-loading="loading" @selection-change="selectionChange" :data="dataList" min-width="400px" style="margin-top: -1px" height="calc(100vh - 243px)" class="table" border>
|
<el-table v-loading="loading" @selection-change="selectionChange" :data="dataList" min-width="400px" style="margin-top: -1px" height="calc(100vh - 280px)" class="table" border>
|
||||||
<el-table-column type="selection" width="55">
|
<el-table-column type="selection" width="55">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column min-width="160" label="产品名称" prop="name"> </el-table-column>
|
<el-table-column min-width="160" label="产品名称" prop="name"> </el-table-column>
|
||||||
@ -386,13 +386,24 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box {
|
.box {
|
||||||
background-color: white;
|
background-color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
.input-with-select {
|
.input-with-select {
|
||||||
width: 60%;
|
width: 70%;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
.searchSelect {
|
.searchSelect {
|
||||||
width: 110px;
|
width: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchSelectIcon {
|
.searchSelectIcon {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
@ -401,27 +412,272 @@ export default {
|
|||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 20px;
|
margin-top: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
::v-deep .el-table__header-wrapper {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 12px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table__body-wrapper {
|
||||||
|
tr:hover > td {
|
||||||
|
background-color: #f5f9ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 10px 0;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-button--primary {
|
||||||
|
background-color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #66b1ff;
|
||||||
|
border-color: #66b1ff;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tip-title {
|
.tip-title {
|
||||||
padding-left: 15px;
|
padding: 8px 16px;
|
||||||
height: 35px;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
//border:1px solid red;
|
background: linear-gradient(135deg, #ecf5ff 0%, #e1f0ff 100%);
|
||||||
background-color: #d5e7ff;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
color: #002da0;
|
color: #409eff;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-left: 4px solid #409eff;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.label-style {
|
.label-style {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
color: #2c2a2a;
|
color: #606266;
|
||||||
|
margin-right: 8px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索区域样式优化
|
||||||
|
.search-area {
|
||||||
|
background-color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 0 16px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 折扣区间样式优化
|
||||||
|
.discount-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.priceInput {
|
||||||
|
::v-deep .el-input__inner {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.range-separator {
|
||||||
|
margin: 0 8px;
|
||||||
|
color: #c0c4cc;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置按钮样式
|
||||||
|
.reset-btn {
|
||||||
|
background-color: #909399;
|
||||||
|
border-color: #909399;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #a6a9ad;
|
||||||
|
border-color: #a6a9ad;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 6px rgba(144, 147, 153, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 统一折扣设置按钮
|
||||||
|
.batch-discount-btn {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对话框样式优化
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.el-dialog__header {
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-slider {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.el-slider__button {
|
||||||
|
border-color: #409eff;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__footer {
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-top: 1px solid #e4e7ed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择器样式优化
|
||||||
|
::v-deep .el-select {
|
||||||
|
.el-input__inner {
|
||||||
|
&:focus {
|
||||||
|
border-color: #409eff;
|
||||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 输入框样式优化
|
||||||
|
::v-deep .el-input-number {
|
||||||
|
.el-input__inner {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式调整
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.search-area {
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-range {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.range-separator {
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载状态样式优化
|
||||||
|
::v-deep .el-loading-mask {
|
||||||
|
background-color: rgba(255, 255, 255, 0.7);
|
||||||
|
|
||||||
|
.el-loading-spinner {
|
||||||
|
.circular {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-loading-text {
|
||||||
|
color: #409eff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表格操作列按钮样式
|
||||||
|
.operation-cell {
|
||||||
|
.el-button {
|
||||||
|
margin: 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 状态标签样式
|
||||||
|
.status-tag {
|
||||||
|
&.configured {
|
||||||
|
color: #67c23a;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unconfigured {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 供应商选择器容器
|
||||||
|
.provider-selector {
|
||||||
|
margin-right: 25px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,54 +1,194 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="voucher-container">
|
||||||
<el-form :inline="true" label-width="180px" :model="voucherData" class="demo-form-inline">
|
<div class="form-card">
|
||||||
<el-form-item size="mini" label="发行方名称">
|
<div class="form-header">
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="发行方名称"></el-input>
|
<h2 class="form-title">算力券信息</h2>
|
||||||
</el-form-item>
|
<div class="form-subtitle">请填写算力券的详细信息</div>
|
||||||
<el-form-item size="mini" label="发行方 orgid">
|
</div>
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="发行方 orgid"></el-input>
|
|
||||||
</el-form-item>
|
<el-form :model="voucherData" class="voucher-form">
|
||||||
<el-form-item size="mini" label="接收方名称">
|
<div class="form-grid">
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="接收方名称"></el-input>
|
<div class="form-group">
|
||||||
</el-form-item>
|
<label class="form-label">发行方名称</label>
|
||||||
<el-form-item size="mini" label="接收方 orgid">
|
<el-input
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="接收方 orgid"></el-input>
|
v-model="voucherData.issuer_name"
|
||||||
</el-form-item>
|
placeholder="请输入发行方名称"
|
||||||
<el-form-item size="mini" label="承接方拿到算力券的时间">
|
size="small"
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="承接方拿到算力券的时间"></el-input>
|
class="form-input"
|
||||||
</el-form-item>
|
></el-input>
|
||||||
<el-form-item size="mini" label="面额">
|
</div>
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="面额"></el-input>
|
|
||||||
</el-form-item>
|
<div class="form-group">
|
||||||
<el-form-item size="mini" label="余额">
|
<label class="form-label">发行方 orgid</label>
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="余额"></el-input>
|
<el-input
|
||||||
</el-form-item>
|
v-model="voucherData.issuer_orgid"
|
||||||
<el-form-item size="mini" label="地域">
|
placeholder="请输入发行方 orgid"
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="地域"></el-input>
|
size="small"
|
||||||
</el-form-item>
|
class="form-input"
|
||||||
<el-form-item size="mini" label="可用区">
|
></el-input>
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="可用区"></el-input>
|
</div>
|
||||||
</el-form-item>
|
|
||||||
<el-form-item size="mini" label="使用范围">
|
<div class="form-group">
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="使用范围"></el-input>
|
<label class="form-label">接收方名称</label>
|
||||||
</el-form-item>
|
<el-input
|
||||||
<el-form-item size="mini" label="状态 ">
|
v-model="voucherData.receiver_name"
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="状态 "></el-input>
|
placeholder="请输入接收方名称"
|
||||||
</el-form-item>
|
size="small"
|
||||||
<el-form-item size="mini" label="发放给客户的时间">
|
class="form-input"
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="发放给客户的时间"></el-input>
|
></el-input>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item size="mini" label="生效时间">
|
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="生效时间"></el-input>
|
<div class="form-group">
|
||||||
</el-form-item>
|
<label class="form-label">接收方 orgid</label>
|
||||||
<el-form-item size="mini" label="失效时间">
|
<el-input
|
||||||
<el-input v-model="voucherData.issuer_name" placeholder="失效时间"></el-input>
|
v-model="voucherData.receiver_orgid"
|
||||||
</el-form-item>
|
placeholder="请输入接收方 orgid"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">承接方拿到算力券的时间</label>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="voucherData.obtain_time"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-date-picker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">面额</label>
|
||||||
|
<el-input
|
||||||
|
v-model="voucherData.denomination"
|
||||||
|
placeholder="请输入面额"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
<template slot="append">元</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">余额</label>
|
||||||
|
<el-input
|
||||||
|
v-model="voucherData.balance"
|
||||||
|
placeholder="请输入余额"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
<template slot="append">元</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">地域</label>
|
||||||
|
<el-input
|
||||||
|
v-model="voucherData.region"
|
||||||
|
placeholder="请输入地域"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">可用区</label>
|
||||||
|
<el-input
|
||||||
|
v-model="voucherData.zone"
|
||||||
|
placeholder="请输入可用区"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">使用范围</label>
|
||||||
|
<el-select
|
||||||
|
v-model="voucherData.use_scope"
|
||||||
|
placeholder="请选择使用范围"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
<el-option label="全部服务" value="all"></el-option>
|
||||||
|
<el-option label="计算服务" value="compute"></el-option>
|
||||||
|
<el-option label="存储服务" value="storage"></el-option>
|
||||||
|
<el-option label="网络服务" value="network"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">状态</label>
|
||||||
|
<el-select
|
||||||
|
v-model="voucherData.status"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
<el-option label="未使用" value="unused"></el-option>
|
||||||
|
<el-option label="已使用" value="used"></el-option>
|
||||||
|
<el-option label="已过期" value="expired"></el-option>
|
||||||
|
<el-option label="已冻结" value="frozen"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">发放给客户的时间</label>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="voucherData.distribute"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-date-picker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">生效时间</label>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="voucherData.start_time"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-date-picker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">失效时间</label>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="voucherData.end_time"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择日期时间"
|
||||||
|
size="small"
|
||||||
|
class="form-input"
|
||||||
|
></el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-actions">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="onSubmit"
|
||||||
|
class="submit-btn"
|
||||||
|
>
|
||||||
|
<i class="el-icon-check"></i>
|
||||||
|
添加算力券
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
@click="onReset"
|
||||||
|
class="reset-btn"
|
||||||
|
>
|
||||||
|
<i class="el-icon-refresh"></i>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="btnBox">
|
|
||||||
<el-button type="primary" @click="onSubmit">添加</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "voucher",
|
name: "voucher",
|
||||||
@ -75,19 +215,212 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
console.log('submit!');
|
console.log('submit!', this.voucherData);
|
||||||
|
// 这里可以添加表单验证和提交逻辑
|
||||||
|
},
|
||||||
|
onReset() {
|
||||||
|
this.voucherData = {
|
||||||
|
issuer_name: "",
|
||||||
|
issuer_orgid: "",
|
||||||
|
receiver_name: "",
|
||||||
|
receiver_orgid: "",
|
||||||
|
obtain_time: "",
|
||||||
|
denomination: "",
|
||||||
|
balance: "",
|
||||||
|
region: "",
|
||||||
|
zone: "",
|
||||||
|
use_scope: "",
|
||||||
|
status: "",
|
||||||
|
distribute: "",
|
||||||
|
record: "",
|
||||||
|
start_time: "",
|
||||||
|
end_time: ""
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.btnBox {
|
.voucher-container {
|
||||||
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header {
|
||||||
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 20px 24px;
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-subtitle {
|
||||||
|
margin-top: 4px;
|
||||||
|
opacity: 0.9;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.voucher-form {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
::v-deep .el-input__inner {
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #409eff;
|
||||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
gap: 16px;
|
||||||
margin-top: 50px;
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.voucher-container {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voucher-form {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header {
|
||||||
|
padding: 16px 20px;
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-actions {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载状态和动画
|
||||||
|
.loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 成功提示样式
|
||||||
|
.success-message {
|
||||||
|
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
||||||
|
border: 1px solid #91d5ff;
|
||||||
|
color: #409eff;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user