liupopo
1 year ago
6 changed files with 892 additions and 377 deletions
@ -1,388 +1,430 @@ |
|||
<template> |
|||
<div :class="{ 'has-logo': showLogo }"> |
|||
<logo v-if="showLogo" :collapse="isCollapse" /> |
|||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|||
<el-menu :default-active="$route.path" :background-color="variables.menuBg" :text-color="variables.menuText" |
|||
:unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" |
|||
mode="vertical"> |
|||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</div> |
|||
<div :class="{ 'has-logo': showLogo }"> |
|||
<logo v-if="showLogo" :collapse="isCollapse" /> |
|||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|||
<el-menu |
|||
:default-active="$route.path" |
|||
:background-color="variables.menuBg" |
|||
:text-color="variables.menuText" |
|||
:unique-opened="false" |
|||
:active-text-color="variables.menuActiveText" |
|||
:collapse-transition="false" |
|||
mode="vertical" |
|||
> |
|||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
mapGetters |
|||
} from "vuex"; |
|||
import Logo from "./Logo"; |
|||
import SidebarItem from "./SidebarItem"; |
|||
import variables from "@/styles/variables.scss"; |
|||
import { |
|||
getrolemenus, |
|||
loginDetails |
|||
} from "@/api/system/Role/role.js"; |
|||
import { |
|||
getStorage |
|||
} from "@/utils/auth"; |
|||
export default { |
|||
components: { |
|||
SidebarItem, |
|||
Logo, |
|||
}, |
|||
data() { |
|||
return { |
|||
YongHuid: [], |
|||
// routes: [], |
|||
params: { |
|||
sourceSid: "", |
|||
userSid: "", |
|||
}, |
|||
routes: [{ |
|||
alwaysShow: true, |
|||
component: "userInfo", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "用户信息", |
|||
}, |
|||
name: "/userInfo/index", |
|||
path: "/userInfo/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "marketingCard", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "营销卡设置", |
|||
}, |
|||
name: "/marketingCard", |
|||
path: "/marketingCard", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "小程序礼包设置", |
|||
}, |
|||
name: "/marketingCard/applet", |
|||
path: "/marketingCard/applet", |
|||
}, |
|||
import { |
|||
mapGetters |
|||
} from 'vuex' |
|||
import Logo from './Logo' |
|||
import SidebarItem from './SidebarItem' |
|||
import variables from '@/styles/variables.scss' |
|||
import { |
|||
getrolemenus, |
|||
loginDetails |
|||
} from '@/api/system/Role/role.js' |
|||
import { |
|||
getStorage |
|||
} from '@/utils/auth' |
|||
export default { |
|||
components: { |
|||
SidebarItem, |
|||
Logo |
|||
}, |
|||
data() { |
|||
return { |
|||
YongHuid: [], |
|||
// routes: [], |
|||
params: { |
|||
sourceSid: '', |
|||
userSid: '' |
|||
}, |
|||
routes: [{ |
|||
alwaysShow: true, |
|||
component: 'userInfo', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '用户信息' |
|||
}, |
|||
name: '/userInfo/index', |
|||
path: '/userInfo/index' |
|||
}, { |
|||
alwaysShow: true, |
|||
component: 'pms', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '商品管理' |
|||
}, |
|||
name: '/pms', |
|||
path: '/pms', |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: 'brand/index', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '品牌管理' |
|||
}, |
|||
name: '/brand/index', |
|||
path: '/brand/index' |
|||
}, { |
|||
alwaysShow: true, |
|||
component: 'enterprise', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '商品分类' |
|||
}, |
|||
name: '/cardManage/enterprise', |
|||
path: '/cardManage/enterprise' |
|||
}, { |
|||
alwaysShow: true, |
|||
component: 'giftCard', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '商品类型' |
|||
}, |
|||
name: '/cardManage/giftCard', |
|||
path: '/cardManage/giftCard' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'marketingCard', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '营销卡设置' |
|||
}, |
|||
name: '/marketingCard', |
|||
path: '/marketingCard', |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '小程序礼包设置' |
|||
}, |
|||
name: '/marketingCard/applet', |
|||
path: '/marketingCard/applet' |
|||
}, |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "礼包设置", |
|||
}, |
|||
name: "/marketingCard/index", |
|||
path: "/marketingCard/index", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '礼包设置' |
|||
}, |
|||
name: '/marketingCard/index', |
|||
path: '/marketingCard/index' |
|||
}, |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "pickupCardSet", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "个人卡设置", |
|||
}, |
|||
name: "/marketingCard/pickupCardSet", |
|||
path: "/marketingCard/pickupCardSet", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "corporateCardSet", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "企业卡设置", |
|||
}, |
|||
name: "/marketingCard/corporateCardSet", |
|||
path: "/marketingCard/corporateCardSet", |
|||
}, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: "grantRecords", |
|||
// meta: { |
|||
// icon: "el-icon-help", |
|||
// title: "发放记录", |
|||
// }, |
|||
// name: "/marketingCard/grantRecords", |
|||
// path: "/marketingCard/grantRecords", |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: "carList", |
|||
// meta: { |
|||
// icon: "el-icon-help", |
|||
// title: "提货卡列表", |
|||
// }, |
|||
// name: "/marketingCard/carList", |
|||
// path: "/marketingCard/carList", |
|||
// }, |
|||
] |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "carManage", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "营销卡管理", |
|||
}, |
|||
name: "/cardManage", |
|||
path: "/cardManage", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'pickupCardSet', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '个人卡设置' |
|||
}, |
|||
name: '/marketingCard/pickupCardSet', |
|||
path: '/marketingCard/pickupCardSet' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'corporateCardSet', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '企业卡设置' |
|||
}, |
|||
name: '/marketingCard/corporateCardSet', |
|||
path: '/marketingCard/corporateCardSet' |
|||
} |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: "grantRecords", |
|||
// meta: { |
|||
// icon: "el-icon-help", |
|||
// title: "发放记录", |
|||
// }, |
|||
// name: "/marketingCard/grantRecords", |
|||
// path: "/marketingCard/grantRecords", |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: "carList", |
|||
// meta: { |
|||
// icon: "el-icon-help", |
|||
// title: "提货卡列表", |
|||
// }, |
|||
// name: "/marketingCard/carList", |
|||
// path: "/marketingCard/carList", |
|||
// }, |
|||
] |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'carManage', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '营销卡管理' |
|||
}, |
|||
name: '/cardManage', |
|||
path: '/cardManage', |
|||
children: [ |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "person", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "个人卡统计", |
|||
}, |
|||
name: "/cardManage/person", |
|||
path: "/cardManage/person", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'person', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '个人卡统计' |
|||
}, |
|||
name: '/cardManage/person', |
|||
path: '/cardManage/person' |
|||
}, |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "enterprise", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "企业卡统计", |
|||
}, |
|||
name: "/cardManage/enterprise", |
|||
path: "/cardManage/enterprise", |
|||
}, { |
|||
alwaysShow: true, |
|||
component: "giftCard", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "福利卡统计", |
|||
}, |
|||
name: "/cardManage/giftCard", |
|||
path: "/cardManage/giftCard", |
|||
}, |
|||
] |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "pickupPoint", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "提货地点", |
|||
}, |
|||
name: "/pickupPoint/index", |
|||
path: "/pickupPoint/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "network", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "支行管理", |
|||
}, |
|||
name: "/network/index", |
|||
path: "/network/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "commodity", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "商品信息", |
|||
}, |
|||
name: "/commodity/index", |
|||
path: "/commodity/index" |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'enterprise', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '企业卡统计' |
|||
}, |
|||
name: '/cardManage/enterprise', |
|||
path: '/cardManage/enterprise' |
|||
}, { |
|||
alwaysShow: true, |
|||
component: 'giftCard', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '福利卡统计' |
|||
}, |
|||
name: '/cardManage/giftCard', |
|||
path: '/cardManage/giftCard' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'pickupPoint', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '提货地点' |
|||
}, |
|||
name: '/pickupPoint/index', |
|||
path: '/pickupPoint/index' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'network', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '支行管理' |
|||
}, |
|||
name: '/network/index', |
|||
path: '/network/index' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'commodity', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '商品信息' |
|||
}, |
|||
name: '/commodity/index', |
|||
path: '/commodity/index' |
|||
}, |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "order", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "订单管理", |
|||
}, |
|||
name: "/order", |
|||
path: "/order", |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "订单统计", |
|||
}, |
|||
name: "/order/index", |
|||
path: "/order/index", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "distributionCount", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "网点配货统计", |
|||
}, |
|||
name: "/order/distributionCount", |
|||
path: "/order/distributionCount", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "subBranch", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "支行配货统计", |
|||
}, |
|||
name: "/order/subBranch", |
|||
path: "/order/subBranch", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "allDistributionCount", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "总配货统计", |
|||
}, |
|||
name: "/order/allDistributionCount", |
|||
path: "/order/allDistributionCount", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'order', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '订单管理' |
|||
}, |
|||
name: '/order', |
|||
path: '/order', |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '订单统计' |
|||
}, |
|||
name: '/order/index', |
|||
path: '/order/index' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'distributionCount', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '网点配货统计' |
|||
}, |
|||
name: '/order/distributionCount', |
|||
path: '/order/distributionCount' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'subBranch', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '支行配货统计' |
|||
}, |
|||
name: '/order/subBranch', |
|||
path: '/order/subBranch' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'allDistributionCount', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '总配货统计' |
|||
}, |
|||
name: '/order/allDistributionCount', |
|||
path: '/order/allDistributionCount' |
|||
} |
|||
|
|||
] |
|||
}, |
|||
] |
|||
}, |
|||
|
|||
// { |
|||
// alwaysShow: true, |
|||
// component: "order", |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "订单信息", |
|||
// }, |
|||
// name: "/order/index", |
|||
// path: "/order/index" |
|||
// }, |
|||
|
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "print", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "电子卡管理", |
|||
}, |
|||
name: "/print", |
|||
path: "/print", |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "打印电子卡", |
|||
}, |
|||
name: "/print/index", |
|||
path: "/print/index", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "print", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "打印企业卡", |
|||
}, |
|||
name: "/print/enterpriseCrad", |
|||
path: "/print/enterpriseCrad" |
|||
}, |
|||
|
|||
|
|||
] |
|||
}, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: "order", |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "订单信息", |
|||
// }, |
|||
// name: "/order/index", |
|||
// path: "/order/index" |
|||
// }, |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: 'print', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '电子卡管理' |
|||
}, |
|||
name: '/print', |
|||
path: '/print', |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: 'el-icon-help', |
|||
title: '打印电子卡' |
|||
}, |
|||
name: '/print/index', |
|||
path: '/print/index' |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'print', |
|||
meta: { |
|||
icon: 'el-icon-menu', |
|||
title: '打印企业卡' |
|||
}, |
|||
name: '/print/enterpriseCrad', |
|||
path: '/print/enterpriseCrad' |
|||
} |
|||
|
|||
] |
|||
} |
|||
|
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['sidebar']), |
|||
// routes() { |
|||
// f4d2e507-c4ed-451c-b364-04c08f962045 |
|||
// console.log('78979789', this.$router.options.routes) |
|||
// return this.$router.options.routes |
|||
// }, |
|||
activeMenu() { |
|||
// const route = this.$route |
|||
// const { |
|||
// meta, |
|||
// path |
|||
// } = route |
|||
// // if set path, the sidebar will highlight the path you set |
|||
// if (meta.activeMenu) { |
|||
// return meta.activeMenu |
|||
// } |
|||
return '/index' |
|||
}, |
|||
showLogo() { |
|||
return this.$store.state.settings.sidebarLogo |
|||
}, |
|||
variables() { |
|||
return variables |
|||
}, |
|||
isCollapse() { |
|||
return !this.sidebar.opened |
|||
} |
|||
}, |
|||
created() { |
|||
this.postHuoquyonghu() |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
postHuoquyonghu() { |
|||
// var token = getStorage() |
|||
// loginDetails(token).then((response) => { |
|||
// console.log('resss', response) |
|||
// if (response.code === '200') { |
|||
// this.YongHuid = response.data |
|||
// this.params.userSid = this.YongHuid.sid |
|||
// getrolemenus(this.params).then((res) => { |
|||
// const userRoles = this.resRouter(res.data) |
|||
this.routes.push({ |
|||
path: '*', |
|||
redirect: '/404', |
|||
hidden: true |
|||
}) |
|||
console.log('左侧菜单', this.routes) |
|||
return this.routes |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
resRouter(menus) { |
|||
// 递归，将后台传来数组 |
|||
for (var i = 0; i < menus.length; i++) { |
|||
if (menus[i].children && menus[i].children.length != 0) { |
|||
this.resRouter(menus[i].children) |
|||
} |
|||
if (menus[i].children.length == 0) { |
|||
delete menus[i].children |
|||
delete menus[i].redirect |
|||
} |
|||
if (menus[i].component == '') { |
|||
console.log('55555', menus[i]) |
|||
menus[i] = { |
|||
path: menus[i].path, |
|||
component: '', |
|||
redirect: menus[i].path, |
|||
children: [menus[i]] |
|||
} |
|||
} else { |
|||
// menus[i] = { |
|||
// path: menus[i].path, |
|||
// component: '', |
|||
// redirect: menus[i].path, |
|||
// children: [menus[i]], |
|||
// } |
|||
} |
|||
} |
|||
this.routes = menus |
|||
console.log('左侧菜单', this.routes) |
|||
return menus |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapGetters(["sidebar"]), |
|||
// routes() { |
|||
// f4d2e507-c4ed-451c-b364-04c08f962045 |
|||
// console.log('78979789', this.$router.options.routes) |
|||
// return this.$router.options.routes |
|||
// }, |
|||
activeMenu() { |
|||
// const route = this.$route |
|||
// const { |
|||
// meta, |
|||
// path |
|||
// } = route |
|||
// // if set path, the sidebar will highlight the path you set |
|||
// if (meta.activeMenu) { |
|||
// return meta.activeMenu |
|||
// } |
|||
return "/index"; |
|||
}, |
|||
showLogo() { |
|||
return this.$store.state.settings.sidebarLogo; |
|||
}, |
|||
variables() { |
|||
return variables; |
|||
}, |
|||
isCollapse() { |
|||
return !this.sidebar.opened; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.postHuoquyonghu(); |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
postHuoquyonghu() { |
|||
// var token = getStorage() |
|||
// loginDetails(token).then((response) => { |
|||
// console.log('resss', response) |
|||
// if (response.code === '200') { |
|||
// this.YongHuid = response.data |
|||
// this.params.userSid = this.YongHuid.sid |
|||
// getrolemenus(this.params).then((res) => { |
|||
// const userRoles = this.resRouter(res.data) |
|||
this.routes.push({ |
|||
path: "*", |
|||
redirect: "/404", |
|||
hidden: true, |
|||
}); |
|||
console.log("左侧菜单", this.routes); |
|||
return this.routes; |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
resRouter(menus) { |
|||
// 递归，将后台传来数组 |
|||
for (var i = 0; i < menus.length; i++) { |
|||
if (menus[i].children && menus[i].children.length != 0) { |
|||
this.resRouter(menus[i].children); |
|||
} |
|||
if (menus[i].children.length == 0) { |
|||
delete menus[i].children; |
|||
delete menus[i].redirect; |
|||
} |
|||
if (menus[i].component == "") { |
|||
console.log("55555", menus[i]); |
|||
menus[i] = { |
|||
path: menus[i].path, |
|||
component: "", |
|||
redirect: menus[i].path, |
|||
children: [menus[i]], |
|||
}; |
|||
} else { |
|||
// menus[i] = { |
|||
// path: menus[i].path, |
|||
// component: '', |
|||
// redirect: menus[i].path, |
|||
// children: [menus[i]], |
|||
// } |
|||
} |
|||
} |
|||
this.routes = menus; |
|||
console.log("左侧菜单", this.routes); |
|||
return menus; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,14 @@ |
|||
<template> |
|||
<brand-detail :is-edit='false'></brand-detail> |
|||
</template> |
|||
<script> |
|||
import BrandDetail from './components/BrandDetail' |
|||
export default { |
|||
name: 'addBrand', |
|||
components: { BrandDetail } |
|||
} |
|||
</script> |
|||
<style> |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<el-card class="form-container" shadow="never"> |
|||
<el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px"> |
|||
<el-form-item label="品牌名称：" prop="name"> |
|||
<el-input v-model="brand.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="品牌首字母："> |
|||
<el-input v-model="brand.firstLetter"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="品牌LOGO：" prop="logo"> |
|||
<single-upload v-model="brand.logo"></single-upload> |
|||
</el-form-item> |
|||
<el-form-item label="品牌专区大图："> |
|||
<single-upload v-model="brand.bigPic"></single-upload> |
|||
</el-form-item> |
|||
<el-form-item label="品牌故事："> |
|||
<el-input |
|||
placeholder="请输入内容" |
|||
type="textarea" |
|||
v-model="brand.brandStory" |
|||
:autosize="true"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="排序：" prop="sort"> |
|||
<el-input v-model.number="brand.sort"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="是否显示："> |
|||
<el-radio-group v-model="brand.showStatus"> |
|||
<el-radio :label="1">是</el-radio> |
|||
<el-radio :label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="品牌制造商："> |
|||
<el-radio-group v-model="brand.factoryStatus"> |
|||
<el-radio :label="1">是</el-radio> |
|||
<el-radio :label="0">否</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button> |
|||
<el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
</template> |
|||
<script> |
|||
import {createBrand, getBrand, updateBrand} from '@/api/brand' |
|||
import SingleUpload from '@/components/Upload/singleUpload' |
|||
const defaultBrand={ |
|||
bigPic: '', |
|||
brandStory: '', |
|||
factoryStatus: 0, |
|||
firstLetter: '', |
|||
logo: '', |
|||
name: '', |
|||
showStatus: 0, |
|||
sort: 0 |
|||
}; |
|||
export default { |
|||
name: 'BrandDetail', |
|||
components:{SingleUpload}, |
|||
props: { |
|||
isEdit: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
brand:Object.assign({}, defaultBrand), |
|||
rules: { |
|||
name: [ |
|||
{required: true, message: '请输入品牌名称', trigger: 'blur'}, |
|||
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'} |
|||
], |
|||
|
|||
sort: [ |
|||
{type: 'number', message: '排序必须为数字'} |
|||
], |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.isEdit) { |
|||
getBrand(this.$route.query.id).then(response => { |
|||
this.brand = response.data; |
|||
}); |
|||
}else{ |
|||
this.brand = Object.assign({},defaultBrand); |
|||
} |
|||
}, |
|||
methods: { |
|||
onSubmit(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.$confirm('是否提交数据', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
if (this.isEdit) { |
|||
updateBrand(this.$route.query.id, this.brand).then(response => { |
|||
this.$refs[formName].resetFields(); |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success', |
|||
duration:1000 |
|||
}); |
|||
this.$router.back(); |
|||
}); |
|||
} else { |
|||
createBrand(this.brand).then(response => { |
|||
this.$refs[formName].resetFields(); |
|||
this.brand = Object.assign({},defaultBrand); |
|||
this.$message({ |
|||
message: '提交成功', |
|||
type: 'success', |
|||
duration:1000 |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
} else { |
|||
this.$message({ |
|||
message: '验证失败', |
|||
type: 'error', |
|||
duration:1000 |
|||
}); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.brand = Object.assign({},defaultBrand); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,302 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-card class="filter-container" shadow="never"> |
|||
<div> |
|||
<i class="el-icon-search"></i> |
|||
<span>筛选搜索</span> |
|||
<el-button |
|||
style="float: right" |
|||
@click="searchBrandList()" |
|||
type="primary" |
|||
size="small"> |
|||
查询结果 |
|||
</el-button> |
|||
</div> |
|||
<div style="margin-top: 15px"> |
|||
<el-form :inline="true" :model="listQuery" size="small" label-width="140px"> |
|||
<el-form-item label="输入搜索："> |
|||
<el-input style="width: 203px" v-model="listQuery.name" placeholder="品牌名称/关键字"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</el-card> |
|||
<el-card class="operate-container" shadow="never"> |
|||
<i class="el-icon-tickets"></i> |
|||
<span>数据列表</span> |
|||
<el-button |
|||
class="btn-add" |
|||
@click="addBrand()" |
|||
size="mini"> |
|||
添加 |
|||
</el-button> |
|||
</el-card> |
|||
<div class="table-container"> |
|||
<el-table ref="brandTable" |
|||
:data="list" |
|||
style="width: 100%" |
|||
@selection-change="handleSelectionChange" |
|||
v-loading="listLoading" |
|||
border> |
|||
<el-table-column type="selection" width="60" align="center"></el-table-column> |
|||
<el-table-column label="编号" width="100" align="center"> |
|||
<template slot-scope="scope">{{scope.row.id}}</template> |
|||
</el-table-column> |
|||
<el-table-column label="品牌名称" align="center"> |
|||
<template slot-scope="scope">{{scope.row.name}}</template> |
|||
</el-table-column> |
|||
<el-table-column label="品牌首字母" width="100" align="center"> |
|||
<template slot-scope="scope">{{scope.row.firstLetter}}</template> |
|||
</el-table-column> |
|||
<el-table-column label="排序" width="100" align="center"> |
|||
<template slot-scope="scope">{{scope.row.sort}}</template> |
|||
</el-table-column> |
|||
<el-table-column label="品牌制造商" width="100" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-switch |
|||
@change="handleFactoryStatusChange(scope.$index, scope.row)" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
v-model="scope.row.factoryStatus"> |
|||
</el-switch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="是否显示" width="100" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-switch |
|||
@change="handleShowStatusChange(scope.$index, scope.row)" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
v-model="scope.row.showStatus"> |
|||
</el-switch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="相关" width="220" align="center"> |
|||
<template slot-scope="scope"> |
|||
<span>商品：</span> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
@click="getProductList(scope.$index, scope.row)">100 |
|||
</el-button> |
|||
<span>评价：</span> |
|||
<el-button |
|||
size="mini" |
|||
type="text" |
|||
@click="getProductCommentList(scope.$index, scope.row)">1000 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="200" align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
size="mini" |
|||
@click="handleUpdate(scope.$index, scope.row)">编辑 |
|||
</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="danger" |
|||
@click="handleDelete(scope.$index, scope.row)">删除 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="batch-operate-container"> |
|||
<el-select |
|||
size="small" |
|||
v-model="operateType" placeholder="批量操作"> |
|||
<el-option |
|||
v-for="item in operates" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button |
|||
style="margin-left: 20px" |
|||
class="search-button" |
|||
@click="handleBatchOperate()" |
|||
type="primary" |
|||
size="small"> |
|||
确定 |
|||
</el-button> |
|||
</div> |
|||
<div class="pagination-container"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
layout="total, sizes,prev, pager, next,jumper" |
|||
:page-size="listQuery.pageSize" |
|||
:page-sizes="[5,10,15]" |
|||
:current-page.sync="listQuery.pageNum" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import {fetchList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand' |
|||
|
|||
export default { |
|||
name: 'brandList', |
|||
data() { |
|||
return { |
|||
operates: [ |
|||
|
|||
], |
|||
operateType: null, |
|||
listQuery: { |
|||
keyword: null, |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}, |
|||
list: null, |
|||
total: null, |
|||
listLoading: true, |
|||
multipleSelection: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.listLoading = true; |
|||
fetchList(this.listQuery).then(response => { |
|||
this.listLoading = false; |
|||
this.list = response.data.records; |
|||
this.total = response.data.total; |
|||
this.totalPage = response.data.pages; |
|||
this.pageSize = response.data.size; |
|||
}); |
|||
}, |
|||
handleSelectionChange(val) { |
|||
this.multipleSelection = val; |
|||
}, |
|||
handleUpdate(index, row) { |
|||
this.$router.push({path: '/pms/updateBrand', query: {id: row.id}}) |
|||
}, |
|||
handleDelete(index, row) { |
|||
this.$confirm('是否要删除该品牌', '提示', { |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
}).then(() => { |
|||
deleteBrand(row.id).then(response => { |
|||
this.$message({ |
|||
message: '删除成功', |
|||
type: 'success', |
|||
duration: 1000 |
|||
}); |
|||
this.getList(); |
|||
}); |
|||
}); |
|||
}, |
|||
getProductList(index, row) { |
|||
console.log(index, row); |
|||
}, |
|||
getProductCommentList(index, row) { |
|||
console.log(index, row); |
|||
}, |
|||
handleFactoryStatusChange(index, row) { |
|||
var data = new URLSearchParams(); |
|||
data.append("ids", row.id); |
|||
data.append("factoryStatus", row.factoryStatus); |
|||
updateFactoryStatus(data).then(response => { |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success', |
|||
duration: 1000 |
|||
}); |
|||
}).catch(error => { |
|||
if (row.factoryStatus === 0) { |
|||
row.factoryStatus = 1; |
|||
} else { |
|||
row.factoryStatus = 0; |
|||
} |
|||
}); |
|||
}, |
|||
handleShowStatusChange(index, row) { |
|||
let data = new URLSearchParams(); |
|||
; |
|||
data.append("ids", row.id); |
|||
data.append("showStatus", row.showStatus); |
|||
updateShowStatus(data).then(response => { |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success', |
|||
duration: 1000 |
|||
}); |
|||
}).catch(error => { |
|||
if (row.showStatus === 0) { |
|||
row.showStatus = 1; |
|||
} else { |
|||
row.showStatus = 0; |
|||
} |
|||
}); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.listQuery.pageNum = 1; |
|||
this.listQuery.pageSize = val; |
|||
this.getList(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.listQuery.pageNum = val; |
|||
this.getList(); |
|||
}, |
|||
searchBrandList() { |
|||
this.listQuery.pageNum = 1; |
|||
this.getList(); |
|||
}, |
|||
handleBatchOperate() { |
|||
console.log(this.multipleSelection); |
|||
if (this.multipleSelection < 1) { |
|||
this.$message({ |
|||
message: '请选择一条记录', |
|||
type: 'warning', |
|||
duration: 1000 |
|||
}); |
|||
return; |
|||
} |
|||
let showStatus = 0; |
|||
if (this.operateType === 'showBrand') { |
|||
showStatus = 1; |
|||
} else if (this.operateType === 'hideBrand') { |
|||
showStatus = 0; |
|||
} else { |
|||
this.$message({ |
|||
message: '请选择批量操作类型', |
|||
type: 'warning', |
|||
duration: 1000 |
|||
}); |
|||
return; |
|||
} |
|||
let ids = []; |
|||
for (let i = 0; i < this.multipleSelection.length; i++) { |
|||
ids.push(this.multipleSelection[i].id); |
|||
} |
|||
let data = new URLSearchParams(); |
|||
data.append("ids", ids); |
|||
data.append("showStatus", showStatus); |
|||
updateShowStatus(data).then(response => { |
|||
this.getList(); |
|||
this.$message({ |
|||
message: '修改成功', |
|||
type: 'success', |
|||
duration: 1000 |
|||
}); |
|||
}); |
|||
}, |
|||
addBrand() { |
|||
this.$router.push({path: '/pms/addBrand'}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
|
|||
|
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,14 @@ |
|||
<template> |
|||
<brand-detail :is-edit='true'></brand-detail> |
|||
</template> |
|||
<script> |
|||
import BrandDetail from './components/BrandDetail' |
|||
export default { |
|||
name: 'updateBrand', |
|||
components: { BrandDetail } |
|||
} |
|||
</script> |
|||
<style> |
|||
</style> |
|||
|
|||
|
|||
Loading…
Reference in new issue