liupopo
1 year ago
6 changed files with 892 additions and 377 deletions
@ -1,388 +1,430 @@ |
|||||
<template> |
<template> |
||||
<div :class="{ 'has-logo': showLogo }"> |
<div :class="{ 'has-logo': showLogo }"> |
||||
<logo v-if="showLogo" :collapse="isCollapse" /> |
<logo v-if="showLogo" :collapse="isCollapse" /> |
||||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
<el-scrollbar wrap-class="scrollbar-wrapper"> |
||||
<el-menu :default-active="$route.path" :background-color="variables.menuBg" :text-color="variables.menuText" |
<el-menu |
||||
:unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" |
:default-active="$route.path" |
||||
mode="vertical"> |
:background-color="variables.menuBg" |
||||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> |
:text-color="variables.menuText" |
||||
</el-menu> |
:unique-opened="false" |
||||
</el-scrollbar> |
:active-text-color="variables.menuActiveText" |
||||
</div> |
: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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { |
import { |
||||
mapGetters |
mapGetters |
||||
} from "vuex"; |
} from 'vuex' |
||||
import Logo from "./Logo"; |
import Logo from './Logo' |
||||
import SidebarItem from "./SidebarItem"; |
import SidebarItem from './SidebarItem' |
||||
import variables from "@/styles/variables.scss"; |
import variables from '@/styles/variables.scss' |
||||
import { |
import { |
||||
getrolemenus, |
getrolemenus, |
||||
loginDetails |
loginDetails |
||||
} from "@/api/system/Role/role.js"; |
} from '@/api/system/Role/role.js' |
||||
import { |
import { |
||||
getStorage |
getStorage |
||||
} from "@/utils/auth"; |
} from '@/utils/auth' |
||||
export default { |
export default { |
||||
components: { |
components: { |
||||
SidebarItem, |
SidebarItem, |
||||
Logo, |
Logo |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
YongHuid: [], |
YongHuid: [], |
||||
// routes: [], |
// routes: [], |
||||
params: { |
params: { |
||||
sourceSid: "", |
sourceSid: '', |
||||
userSid: "", |
userSid: '' |
||||
}, |
}, |
||||
routes: [{ |
routes: [{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "userInfo", |
component: 'userInfo', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-menu", |
icon: 'el-icon-menu', |
||||
title: "用户信息", |
title: '用户信息' |
||||
}, |
}, |
||||
name: "/userInfo/index", |
name: '/userInfo/index', |
||||
path: "/userInfo/index" |
path: '/userInfo/index' |
||||
}, |
}, { |
||||
{ |
alwaysShow: true, |
||||
alwaysShow: true, |
component: 'pms', |
||||
component: "marketingCard", |
meta: { |
||||
meta: { |
icon: 'el-icon-menu', |
||||
icon: "el-icon-menu", |
title: '商品管理' |
||||
title: "营销卡设置", |
}, |
||||
}, |
name: '/pms', |
||||
name: "/marketingCard", |
path: '/pms', |
||||
path: "/marketingCard", |
children: [{ |
||||
children: [ |
alwaysShow: true, |
||||
{ |
component: 'brand/index', |
||||
alwaysShow: true, |
meta: { |
||||
component: "index", |
icon: 'el-icon-help', |
||||
meta: { |
title: '品牌管理' |
||||
icon: "el-icon-help", |
}, |
||||
title: "小程序礼包设置", |
name: '/brand/index', |
||||
}, |
path: '/brand/index' |
||||
name: "/marketingCard/applet", |
}, { |
||||
path: "/marketingCard/applet", |
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, |
alwaysShow: true, |
||||
component: "index", |
component: 'index', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "礼包设置", |
title: '礼包设置' |
||||
}, |
}, |
||||
name: "/marketingCard/index", |
name: '/marketingCard/index', |
||||
path: "/marketingCard/index", |
path: '/marketingCard/index' |
||||
}, |
}, |
||||
|
|
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "pickupCardSet", |
component: 'pickupCardSet', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "个人卡设置", |
title: '个人卡设置' |
||||
}, |
}, |
||||
name: "/marketingCard/pickupCardSet", |
name: '/marketingCard/pickupCardSet', |
||||
path: "/marketingCard/pickupCardSet", |
path: '/marketingCard/pickupCardSet' |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "corporateCardSet", |
component: 'corporateCardSet', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "企业卡设置", |
title: '企业卡设置' |
||||
}, |
}, |
||||
name: "/marketingCard/corporateCardSet", |
name: '/marketingCard/corporateCardSet', |
||||
path: "/marketingCard/corporateCardSet", |
path: '/marketingCard/corporateCardSet' |
||||
}, |
} |
||||
// { |
// { |
||||
// alwaysShow: true, |
// alwaysShow: true, |
||||
// component: "grantRecords", |
// component: "grantRecords", |
||||
// meta: { |
// meta: { |
||||
// icon: "el-icon-help", |
// icon: "el-icon-help", |
||||
// title: "发放记录", |
// title: "发放记录", |
||||
// }, |
// }, |
||||
// name: "/marketingCard/grantRecords", |
// name: "/marketingCard/grantRecords", |
||||
// path: "/marketingCard/grantRecords", |
// path: "/marketingCard/grantRecords", |
||||
// }, |
// }, |
||||
// { |
// { |
||||
// alwaysShow: true, |
// alwaysShow: true, |
||||
// component: "carList", |
// component: "carList", |
||||
// meta: { |
// meta: { |
||||
// icon: "el-icon-help", |
// icon: "el-icon-help", |
||||
// title: "提货卡列表", |
// title: "提货卡列表", |
||||
// }, |
// }, |
||||
// name: "/marketingCard/carList", |
// name: "/marketingCard/carList", |
||||
// path: "/marketingCard/carList", |
// path: "/marketingCard/carList", |
||||
// }, |
// }, |
||||
] |
] |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "carManage", |
component: 'carManage', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-menu", |
icon: 'el-icon-menu', |
||||
title: "营销卡管理", |
title: '营销卡管理' |
||||
}, |
}, |
||||
name: "/cardManage", |
name: '/cardManage', |
||||
path: "/cardManage", |
path: '/cardManage', |
||||
children: [ |
children: [ |
||||
|
|
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "person", |
component: 'person', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "个人卡统计", |
title: '个人卡统计' |
||||
}, |
}, |
||||
name: "/cardManage/person", |
name: '/cardManage/person', |
||||
path: "/cardManage/person", |
path: '/cardManage/person' |
||||
}, |
}, |
||||
|
|
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "enterprise", |
component: 'enterprise', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "企业卡统计", |
title: '企业卡统计' |
||||
}, |
}, |
||||
name: "/cardManage/enterprise", |
name: '/cardManage/enterprise', |
||||
path: "/cardManage/enterprise", |
path: '/cardManage/enterprise' |
||||
}, { |
}, { |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "giftCard", |
component: 'giftCard', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "福利卡统计", |
title: '福利卡统计' |
||||
}, |
}, |
||||
name: "/cardManage/giftCard", |
name: '/cardManage/giftCard', |
||||
path: "/cardManage/giftCard", |
path: '/cardManage/giftCard' |
||||
}, |
} |
||||
] |
] |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "pickupPoint", |
component: 'pickupPoint', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-menu", |
icon: 'el-icon-menu', |
||||
title: "提货地点", |
title: '提货地点' |
||||
}, |
}, |
||||
name: "/pickupPoint/index", |
name: '/pickupPoint/index', |
||||
path: "/pickupPoint/index" |
path: '/pickupPoint/index' |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "network", |
component: 'network', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-menu", |
icon: 'el-icon-menu', |
||||
title: "支行管理", |
title: '支行管理' |
||||
}, |
}, |
||||
name: "/network/index", |
name: '/network/index', |
||||
path: "/network/index" |
path: '/network/index' |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "commodity", |
component: 'commodity', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-menu", |
icon: 'el-icon-menu', |
||||
title: "商品信息", |
title: '商品信息' |
||||
}, |
}, |
||||
name: "/commodity/index", |
name: '/commodity/index', |
||||
path: "/commodity/index" |
path: '/commodity/index' |
||||
}, |
}, |
||||
|
|
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "order", |
component: 'order', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-menu", |
icon: 'el-icon-menu', |
||||
title: "订单管理", |
title: '订单管理' |
||||
}, |
}, |
||||
name: "/order", |
name: '/order', |
||||
path: "/order", |
path: '/order', |
||||
children: [{ |
children: [{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "index", |
component: 'index', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "订单统计", |
title: '订单统计' |
||||
}, |
}, |
||||
name: "/order/index", |
name: '/order/index', |
||||
path: "/order/index", |
path: '/order/index' |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "distributionCount", |
component: 'distributionCount', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "网点配货统计", |
title: '网点配货统计' |
||||
}, |
}, |
||||
name: "/order/distributionCount", |
name: '/order/distributionCount', |
||||
path: "/order/distributionCount", |
path: '/order/distributionCount' |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "subBranch", |
component: 'subBranch', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "支行配货统计", |
title: '支行配货统计' |
||||
}, |
}, |
||||
name: "/order/subBranch", |
name: '/order/subBranch', |
||||
path: "/order/subBranch", |
path: '/order/subBranch' |
||||
}, |
}, |
||||
{ |
{ |
||||
alwaysShow: true, |
alwaysShow: true, |
||||
component: "allDistributionCount", |
component: 'allDistributionCount', |
||||
meta: { |
meta: { |
||||
icon: "el-icon-help", |
icon: 'el-icon-help', |
||||
title: "总配货统计", |
title: '总配货统计' |
||||
}, |
}, |
||||
name: "/order/allDistributionCount", |
name: '/order/allDistributionCount', |
||||
path: "/order/allDistributionCount", |
path: '/order/allDistributionCount' |
||||
}, |
} |
||||
|
|
||||
] |
] |
||||
}, |
}, |
||||
|
|
||||
// { |
// { |
||||
// alwaysShow: true, |
// alwaysShow: true, |
||||
// component: "order", |
// component: "order", |
||||
// meta: { |
// meta: { |
||||
// icon: "el-icon-menu", |
// icon: "el-icon-menu", |
||||
// title: "订单信息", |
// title: "订单信息", |
||||
// }, |
// }, |
||||
// name: "/order/index", |
// name: "/order/index", |
||||
// path: "/order/index" |
// path: "/order/index" |
||||
// }, |
// }, |
||||
|
|
||||
|
{ |
||||
{ |
alwaysShow: true, |
||||
alwaysShow: true, |
component: 'print', |
||||
component: "print", |
meta: { |
||||
meta: { |
icon: 'el-icon-menu', |
||||
icon: "el-icon-menu", |
title: '电子卡管理' |
||||
title: "电子卡管理", |
}, |
||||
}, |
name: '/print', |
||||
name: "/print", |
path: '/print', |
||||
path: "/print", |
children: [{ |
||||
children: [{ |
alwaysShow: true, |
||||
alwaysShow: true, |
component: 'index', |
||||
component: "index", |
meta: { |
||||
meta: { |
icon: 'el-icon-help', |
||||
icon: "el-icon-help", |
title: '打印电子卡' |
||||
title: "打印电子卡", |
}, |
||||
}, |
name: '/print/index', |
||||
name: "/print/index", |
path: '/print/index' |
||||
path: "/print/index", |
}, |
||||
}, |
{ |
||||
{ |
alwaysShow: true, |
||||
alwaysShow: true, |
component: 'print', |
||||
component: "print", |
meta: { |
||||
meta: { |
icon: 'el-icon-menu', |
||||
icon: "el-icon-menu", |
title: '打印企业卡' |
||||
title: "打印企业卡", |
}, |
||||
}, |
name: '/print/enterpriseCrad', |
||||
name: "/print/enterpriseCrad", |
path: '/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