Skip to content
GitLab
Unverified Commit 324c8da3 authored by linlinjava's avatar linlinjava Committed by GitHub
Browse files

Merge branch 'master' into dev

parents 693cf5cd 4c46da9b
Show whitespace changes
Inline Side-by-side
litemall-admin/src/styles/index.scss
View file @ 324c8da3
......@@ -22,7 +22,7 @@ html {
box-sizing: border-box;
}
#app{
#app {
height: 100%;
}
......@@ -53,9 +53,9 @@ a:hover {
text-decoration: none;
}
div:focus{
div:focus {
outline: none;
}
}
.fr {
float: right;
......@@ -96,36 +96,29 @@ div:focus{
}
}
code {
aside {
background: #eef1f6;
padding: 15px 16px;
padding: 8px 24px;
margin-bottom: 20px;
border-radius: 2px;
display: block;
line-height: 36px;
font-size: 15px;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
line-height: 32px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
}
.warn-content{
background: rgba(66,185,131,.1);
border-radius: 2px;
padding: 16px;
padding: 1rem;
line-height: 1.6rem;
word-spacing: .05rem;
a{
color: #42b983;
font-weight: 600;
}
}
//main-container全局样式
.app-container {
padding: 20px;
......@@ -153,13 +146,16 @@ code {
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
......@@ -169,6 +165,7 @@ code {
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
......@@ -176,6 +173,7 @@ code {
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
......
litemall-admin/src/styles/mixin.scss
View file @ 324c8da3
......@@ -10,9 +10,11 @@
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
......@@ -37,21 +39,25 @@
$transparent-border-style: $width solid transparent;
height: 0;
width: 0;
@if $direction==up {
border-bottom: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==right {
border-left: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
@else if $direction==down {
border-top: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==left {
border-right: $color-border-style;
border-top: $transparent-border-style;
......
litemall-admin/src/styles/sidebar.scss
View file @ 324c8da3
#app {
// 主体区域
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: 180px;
margin-left: $sideBarWidth;
position: relative;
}
// 侧边栏
.sidebar-container {
transition: width 0.28s;
width: 180px !important;
width: $sideBarWidth !important;
background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
......@@ -18,62 +19,111 @@
left: 0;
z-index: 1001;
overflow: hidden;
//reset element-ui css
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden!important;
.el-scrollbar__view {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
.el-scrollbar__bar.is-vertical{
right: 0px;
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
.is-active > .el-submenu__title{
color: #f4f4f5!important;
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
background-color: $menuHover !important;
}
}
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $subMenuHover !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: 36px !important;
width: 54px !important;
}
.main-container {
margin-left: 36px;
margin-left: 54px;
}
.submenu-title-noDropdown {
padding-left: 10px !important;
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 10px !important;
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding-left: 10px !important;
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
......@@ -88,35 +138,33 @@
}
}
}
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
.sidebar-container .el-submenu .el-menu-item {
min-width: 180px !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover !important;
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: 180px !important;
min-width: $sideBarWidth !important;
}
//适配移动端
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: 180px !important;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-180px, 0, 0);
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
......@@ -124,10 +172,38 @@
}
}
.el-menu--vertical{
& >.el-menu{
.svg-icon{
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
litemall-admin/src/styles/transition.scss
View file @ 324c8da3
//globl transition css
// global transition css
/*fade*/
/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
......@@ -11,21 +11,23 @@
opacity: 0;
}
/*fade-transform*/
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/*breadcrumb transition*/
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
......@@ -44,4 +46,3 @@
.breadcrumb-leave-active {
position: absolute;
}
litemall-admin/src/styles/variables.scss
View file @ 324c8da3
// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
......@@ -7,7 +8,28 @@ $tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
//sidebar
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$menuHover:#001528;
$subMenuHover:#001528;
$sideBarWidth: 210px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;
menuBg: $menuBg;
menuHover: $menuHover;
subMenuBg: $subMenuBg;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
litemall-admin/src/utils/createUniqueString.js deleted 100644 → 0
View file @ 693cf5cd
/**
* Created by jiachenpan on 17/3/8.
*/
export default function createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
}
litemall-admin/src/utils/print.js 0 → 100644
View file @ 324c8da3
// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options);
this.options = this.extend({
'noPrint': '.no-print'
}, options);
if ((typeof dom) === "string") {
this.dom = document.querySelector(dom);
} else {
this.isDOM(dom)
this.dom = this.isDOM(dom) ? dom : dom.$el;
}
this.init();
};
Print.prototype = {
init: function () {
var content = this.getStyle() + this.getHtml();
this.writeIframe(content);
},
extend: function (obj, obj2) {
for (var k in obj2) {
obj[k] = obj2[k];
}
return obj;
},
getStyle: function () {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
return str;
},
getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
for (var k = 0; k < inputs.length; k++) {
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
if (inputs[k].checked == true) {
inputs[k].setAttribute('checked', "checked")
} else {
inputs[k].removeAttribute('checked')
}
} else if (inputs[k].type == "text") {
inputs[k].setAttribute('value', inputs[k].value)
} else {
inputs[k].setAttribute('value', inputs[k].value)
}
}
for (var k2 = 0; k2 < textareas.length; k2++) {
if (textareas[k2].type == 'textarea') {
textareas[k2].innerHTML = textareas[k2].value
}
}
for (var k3 = 0; k3 < selects.length; k3++) {
if (selects[k3].type == 'select-one') {
var child = selects[k3].children;
for (var i in child) {
if (child[i].tagName == 'OPTION') {
if (child[i].selected == true) {
child[i].setAttribute('selected', "selected")
} else {
child[i].removeAttribute('selected')
}
}
}
}
}
return this.dom.outerHTML;
},
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
iframe.id = "myIframe";
//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
w = f.contentWindow || f.contentDocument;
doc = f.contentDocument || f.contentWindow.document;
doc.open();
doc.write(content);
doc.close();
var _this = this
iframe.onload = function(){
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
},
toPrint: function (frameWindow) {
try {
setTimeout(function () {
frameWindow.focus();
try {
if (!frameWindow.document.execCommand('print', false, null)) {
frameWindow.print();
}
} catch (e) {
frameWindow.print();
}
frameWindow.close();
}, 10);
} catch (err) {
console.log('err', err);
}
},
isDOM: (typeof HTMLElement === 'object') ?
function (obj) {
return obj instanceof HTMLElement;
} :
function (obj) {
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
}
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
// 4. 添加实例方法
Vue.prototype.$print = Print
}
export default MyPlugin
litemall-admin/src/utils/request.js
View file @ 324c8da3
......@@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
timeout: 5000 // request timeout
})
......
litemall-admin/src/utils/validate.js
View file @ 324c8da3
/**
* Created by jiachenpan on 16/11/18.
* Created by PanJiaChen on 16/11/18.
*/
export function isvalidUsername(str) {
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri*/
export function validateURL(textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL(url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/* 小写字母*/
export function validateLowerCase(str) {
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母*/
export function validateUpperCase(str) {
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母*/
export function validateAlphabets(str) {
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* validate email
* @param email
* @returns {boolean}
* @param {string} email
* @returns {Boolean}
*/
export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString(str) {
if (typeof str === 'string' || str instanceof String) {
return true
}
return false
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function validateEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return re.test(email)
export function isArray(arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
litemall-admin/src/views/config/express.vue
View file @ 324c8da3
......@@ -50,8 +50,12 @@ export default {
update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return
return false
}
this.doUpdate()
})
},
doUpdate() {
updateExpress(this.dataForm).then(response => {
this.$notify.success({
title: '成功',
......@@ -63,7 +67,6 @@ export default {
message: response.data.errmsg
})
})
})
}
}
}
......
litemall-admin/src/views/config/mall.vue
View file @ 324c8da3
......@@ -7,6 +7,15 @@
<el-form-item label="商场地址" prop="litemall_mall_address">
<el-input v-model="dataForm.litemall_mall_address"/>
</el-form-item>
<el-form-item label="地理坐标">
<el-col :span="11">
<el-input v-model="dataForm.litemall_mall_longitude" placeholder="经度"/>
</el-col>
<el-col :span="2" style="text-align: center;">-</el-col>
<el-col :span="11">
<el-input v-model="dataForm.litemall_mall_latitude" placeholder="纬度"/>
</el-col>
</el-form-item>
<el-form-item label="联系电话" prop="litemall_mall_phone">
<el-input v-model="dataForm.litemall_mall_phone"/>
</el-form-item>
......@@ -32,7 +41,23 @@ export default {
litemall_mall_name: '',
litemall_mall_address: '',
litemall_mall_phone: '',
litemall_mall_qq: ''
litemall_mall_qq: '',
litemall_mall_longitude: '',
litemall_mall_latitude: ''
},
rules: {
litemall_mall_name: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_mall_address: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_mall_phone: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_mall_qq: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
}
}
},
......@@ -49,6 +74,14 @@ export default {
this.init()
},
update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.doUpdate()
})
},
doUpdate() {
updateMall(this.dataForm)
.then(response => {
this.$notify.success({
......
litemall-admin/src/views/config/order.vue
View file @ 324c8da3
......@@ -34,7 +34,22 @@ export default {
name: 'ConfigOrder',
data() {
return {
dataForm: {}
dataForm: {
litemall_order_unpaid: 0,
litemall_order_unconfirm: 0,
litemall_order_comment: 0
},
rules: {
litemall_order_unpaid: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_order_unconfirm: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_order_comment: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
}
}
},
created() {
......@@ -50,6 +65,14 @@ export default {
this.init()
},
update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.doUpdate()
})
},
doUpdate() {
updateOrder(this.dataForm)
.then(response => {
this.$notify.success({
......
litemall-admin/src/views/config/wx.vue
View file @ 324c8da3
......@@ -5,9 +5,7 @@
:rules="rules"
:model="dataForm"
status-icon
label-width="300px"
>
label-width="300px">
<el-tabs tab-position="left" >
<el-tab-pane label="首页配置">
<el-form-item label="新品首发栏目商品显示数量" prop="litemall_wx_index_new">
......@@ -51,7 +49,35 @@ export default {
name: 'ConfigWx',
data() {
return {
dataForm: { }
dataForm: {
litemall_wx_index_new: 0,
litemall_wx_index_hot: 0,
litemall_wx_index_brand: 0,
litemall_wx_index_topic: 0,
litemall_wx_catlog_list: 0,
litemall_wx_catlog_goods: 0,
litemall_wx_share: false
},
rules: {
litemall_wx_index_new: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_wx_index_hot: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_wx_index_brand: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_wx_index_topic: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_wx_catlog_list: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
litemall_wx_catlog_goods: [
{ required: true, message: '不能为空', trigger: 'blur' }
]
}
}
},
created() {
......@@ -67,6 +93,14 @@ export default {
this.init()
},
update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.doUpdate()
})
},
doUpdate() {
updateWx(this.dataForm)
.then(response => {
this.$notify.success({
......
litemall-admin/src/views/errorPage/401.vue
View file @ 324c8da3
<template>
<div class="errPage-container">
<el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">返回</el-button>
<el-row>
<el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1>
......
litemall-admin/src/views/goods/comment.vue
View file @ 324c8da3
......@@ -22,7 +22,7 @@
<el-table-column align="center" label="评论图片" prop="picUrls">
<template slot-scope="scope">
<img v-for="item in scope.row.picUrls" :key="item" :src="item" width="40">
<el-image v-for="item in scope.row.picUrls" :key="item" :src="item" :preview-src-list="scope.row.picUrls" :lazy="true" style="width: 40px; height: 40px; margin-right: 5px;"/>
</template>
</el-table-column>
......@@ -64,7 +64,7 @@ export default {
components: { Pagination },
data() {
return {
list: undefined,
list: [],
total: 0,
listLoading: true,
listQuery: {
......@@ -90,7 +90,7 @@ export default {
getList() {
this.listLoading = true
listComment(this.listQuery).then(response => {
this.list = response.data.data.items
this.list = response.data.data.list
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
......
litemall-admin/src/views/goods/create.vue
View file @ 324c8da3
......@@ -5,21 +5,16 @@
<h3>商品介绍</h3>
<el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
<el-form-item label="商品编号" prop="goodsSn">
<el-input v-model="goods.goodsSn"/>
<el-input v-model="goods.goodsSn" />
</el-form-item>
<el-form-item label="商品名称" prop="name">
<el-input v-model="goods.name"/>
<el-input v-model="goods.name" />
</el-form-item>
<el-form-item label="专柜价格" prop="counterPrice">
<el-form-item label="市场售价" prop="counterPrice">
<el-input v-model="goods.counterPrice" placeholder="0.00">
<template slot="append">元</template>
</el-input>
</el-form-item>
<el-form-item label="当前价格" prop="retailPrice">
<el-input v-model="goods.retailPrice" placeholder="0.00">
<template slot="append">元</template>
</el-input>
</el-form-item>
<el-form-item label="是否新品" prop="isNew">
<el-radio-group v-model="goods.isNew">
<el-radio :label="true">新品</el-radio>
......@@ -46,9 +41,10 @@
:headers="headers"
:on-success="uploadPicUrl"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif">
accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
......@@ -62,13 +58,14 @@
:on-remove="handleRemove"
multiple
accept=".jpg,.jpeg,.png,.gif"
list-type="picture-card">
<i class="el-icon-plus"/>
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
</el-form-item>
<el-form-item label="商品单位">
<el-input v-model="goods.unit" placeholder="件 / 个 / 盒"/>
<el-input v-model="goods.unit" placeholder="件 / 个 / 盒" />
</el-form-item>
<el-form-item label="关键字">
......@@ -82,26 +79,27 @@
class="input-new-keyword"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"/>
@blur="handleInputConfirm"
/>
<el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
</el-form-item>
<el-form-item label="所属分类">
<el-cascader :options="categoryList" expand-trigger="hover" @change="handleCategoryChange"/>
<el-cascader :options="categoryList" expand-trigger="hover" clearable @change="handleCategoryChange" />
</el-form-item>
<el-form-item label="所属品牌商">
<el-select v-model="goods.brandId">
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/>
<el-select v-model="goods.brandId" clearable>
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="商品简介">
<el-input v-model="goods.brief"/>
<el-input v-model="goods.brief" />
</el-form-item>
<el-form-item label="商品详细介绍">
<editor :init="editorInit" v-model="goods.detail"/>
<editor v-model="goods.detail" :init="editorInit" />
</el-form-item>
</el-form>
</el-card>
......@@ -121,7 +119,7 @@
</el-row>
<el-table :data="specifications">
<el-table-column property="specification" label="规格名"/>
<el-table-column property="specification" label="规格名" />
<el-table-column property="value" label="规格值">
<template slot-scope="scope">
<el-tag type="primary">
......@@ -139,7 +137,8 @@
align="center"
label="操作"
width="250"
class-name="small-padding fixed-width">
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button>
</template>
......@@ -154,12 +153,13 @@
status-icon
label-position="left"
label-width="100px"
style="width: 400px; margin-left:50px;">
style="width: 400px; margin-left:50px;"
>
<el-form-item label="规格名" prop="specification">
<el-input v-model="specForm.specification"/>
<el-input v-model="specForm.specification" />
</el-form-item>
<el-form-item label="规格值" prop="value">
<el-input v-model="specForm.value"/>
<el-input v-model="specForm.value" />
</el-form-item>
<el-form-item label="规格图片" prop="picUrl">
<el-upload
......@@ -168,9 +168,10 @@
:headers="headers"
:on-success="uploadSpecPicUrl"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif">
accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
</el-form>
......@@ -191,8 +192,8 @@
</el-tag>
</template>
</el-table-column>
<el-table-column property="price" width="100" label="货品售价"/>
<el-table-column property="number" width="100" label="货品数量"/>
<el-table-column property="price" width="100" label="货品售价" />
<el-table-column property="number" width="100" label="货品数量" />
<el-table-column property="url" width="100" label="货品图片">
<template slot-scope="scope">
<img v-if="scope.row.url" :src="scope.row.url" width="40">
......@@ -205,24 +206,25 @@
</el-table-column>
</el-table>
<el-dialog :visible.sync="productVisiable" title="设置货品">
<el-dialog :visible.sync="productVisiable" title="添加货品">
<el-form
ref="productForm"
:model="productForm"
status-icon
label-position="left"
label-width="100px"
style="width: 400px; margin-left:50px;">
style="width: 400px; margin-left:50px;"
>
<el-form-item label="货品规格列" prop="specifications">
<el-tag v-for="tag in productForm.specifications" :key="tag">
{{ tag }}
</el-tag>
</el-form-item>
<el-form-item label="货品售价" prop="price">
<el-input v-model="productForm.price"/>
<el-input v-model="productForm.price" />
</el-form-item>
<el-form-item label="货品数量" prop="number">
<el-input v-model="productForm.number"/>
<el-input v-model="productForm.number" />
</el-form-item>
<el-form-item label="货品图片" prop="url">
<el-upload
......@@ -231,9 +233,10 @@
:headers="headers"
:on-success="uploadProductUrl"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif">
accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="productForm.url" :src="productForm.url" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
</el-form>
......@@ -246,10 +249,10 @@
<el-card class="box-card">
<h3>商品参数</h3>
<el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
<el-button type="primary" @click="handleAttributeShow">添加</el-button>
<el-table :data="attributes">
<el-table-column property="attribute" label="商品参数名称"/>
<el-table-column property="value" label="商品参数值"/>
<el-table-column property="attribute" label="商品参数名称" />
<el-table-column property="value" label="商品参数值" />
<el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
......@@ -257,19 +260,20 @@
</el-table-column>
</el-table>
<el-dialog :visible.sync="attributeVisiable" title="设置商品参数">
<el-dialog :visible.sync="attributeVisiable" title="添加商品参数">
<el-form
ref="attributeForm"
:model="attributeForm"
status-icon
label-position="left"
label-width="100px"
style="width: 400px; margin-left:50px;">
style="width: 400px; margin-left:50px;"
>
<el-form-item label="商品参数名称" prop="attribute">
<el-input v-model="attributeForm.attribute"/>
<el-input v-model="attributeForm.attribute" />
</el-form-item>
<el-form-item label="商品参数值" prop="value">
<el-input v-model="attributeForm.value"/>
<el-input v-model="attributeForm.value" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......@@ -351,7 +355,7 @@ export default {
keywords: [],
categoryList: [],
brandList: [],
goods: { picUrl: '', gallery: [] },
goods: { picUrl: '', gallery: [], isHot: false, isNew: true, isOnSale: true },
specVisiable: false,
specForm: { specification: '', value: '', picUrl: '' },
multipleSpec: false,
......@@ -368,6 +372,7 @@ export default {
},
editorInit: {
language: 'zh_CN',
height: 500,
convert_urls: false,
plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
......
litemall-admin/src/views/goods/edit.vue
View file @ 324c8da3
......@@ -4,19 +4,17 @@
<el-card class="box-card">
<h3>商品介绍</h3>
<el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
<el-form-item label="商品编号" prop="goodsSn">
<el-input v-model="goods.goodsSn"/>
<el-form-item label="商品ID" prop="id">
<el-input v-model="goods.id" disabled />
</el-form-item>
<el-form-item label="商品名称" prop="name">
<el-input v-model="goods.name"/>
<el-input v-model="goods.name" />
</el-form-item>
<el-form-item label="专柜价格" prop="counterPrice">
<el-input v-model="goods.counterPrice" placeholder="0.00">
<template slot="append">元</template>
</el-input>
<el-form-item label="商品编号" prop="goodsSn">
<el-input v-model="goods.goodsSn" />
</el-form-item>
<el-form-item label="当前价格" prop="retailPrice">
<el-input v-model="goods.retailPrice" placeholder="0.00">
<el-form-item label="市场售价" prop="counterPrice">
<el-input v-model="goods.counterPrice" placeholder="0.00">
<template slot="append">元</template>
</el-input>
</el-form-item>
......@@ -46,9 +44,10 @@
:show-file-list="false"
:on-success="uploadPicUrl"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif">
accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
......@@ -63,50 +62,49 @@
:on-remove="handleRemove"
multiple
accept=".jpg,.jpeg,.png,.gif"
list-type="picture-card">
<i class="el-icon-plus"/>
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
</el-form-item>
<el-form-item label="商品单位">
<el-input v-model="goods.unit" placeholder="件 / 个 / 盒"/>
<el-input v-model="goods.unit" placeholder="件 / 个 / 盒" />
</el-form-item>
<el-form-item label="关键字">
<el-tag v-for="tag in keywords" :key="tag" closable type="primary" @close="handleClose(tag)">
{{ tag }}
</el-tag>
<el-input v-if="newKeywordVisible" ref="newKeywordInput" v-model="newKeyword" class="input-new-keyword" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"/>
<el-input v-if="newKeywordVisible" ref="newKeywordInput" v-model="newKeyword" class="input-new-keyword" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
<el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
</el-form-item>
<el-form-item label="所属分类">
<el-cascader :options="categoryList" v-model="categoryIds" expand-trigger="hover" @change="handleCategoryChange"/>
<el-cascader v-model="categoryIds" :options="categoryList" clearable expand-trigger="hover" @change="handleCategoryChange" />
</el-form-item>
<el-form-item label="所属品牌商">
<el-select v-model="goods.brandId">
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/>
<el-select v-model="goods.brandId" clearable>
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="商品简介">
<el-input v-model="goods.brief"/>
<el-input v-model="goods.brief" />
</el-form-item>
<el-form-item label="商品详细介绍">
<editor :init="editorInit" v-model="goods.detail"/>
<editor v-model="goods.detail" :init="editorInit" />
</el-form-item>
</el-form>
</el-card>
<el-card class="box-card">
<h3>商品规格</h3>
<el-button :plain="true" type="primary" @click="handleSpecificationShow">添加</el-button>
<el-table :data="specifications">
<el-table-column property="specification" label="规格名" />
<el-table-column property="value" label="规格值" >
<el-table-column property="value" label="规格值">
<template slot-scope="scope">
<el-tag type="primary">
{{ scope.row.value }}
......@@ -118,9 +116,9 @@
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button>
<el-button type="primary" size="mini" @click="handleSpecificationShow(scope.row)">设置</el-button>
</template>
</el-table-column>
</el-table>
......@@ -128,10 +126,10 @@
<el-dialog :visible.sync="specVisiable" title="设置规格">
<el-form ref="specForm" :rules="rules" :model="specForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="规格名" prop="specification">
<el-input v-model="specForm.specification"/>
<el-input v-model="specForm.specification" disabled />
</el-form-item>
<el-form-item label="规格值" prop="value">
<el-input v-model="specForm.value"/>
<el-input v-model="specForm.value" disabled />
</el-form-item>
<el-form-item label="规格图片" prop="picUrl">
<el-upload
......@@ -140,15 +138,16 @@
:show-file-list="false"
:on-success="uploadSpecPicUrl"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif">
accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="specVisiable = false">取消</el-button>
<el-button type="primary" @click="handleSpecificationAdd">确定</el-button>
<el-button type="primary" @click="handleSpecificationEdit">确定</el-button>
</div>
</el-dialog>
</el-card>
......@@ -156,28 +155,28 @@
<el-card class="box-card">
<h3>商品库存</h3>
<el-table :data="products">
<el-table-column property="value" label="货品规格" >
<el-table-column property="value" label="货品规格">
<template slot-scope="scope">
<el-tag v-for="tag in scope.row.specifications" :key="tag">
{{ tag }}
</el-tag>
</template>
</el-table-column>
<el-table-column property="price" width="100" label="货品售价"/>
<el-table-column property="number" width="100" label="货品数量"/>
<el-table-column property="url" width="100" label="货品图片">
<el-table-column property="price" label="货品售价" />
<el-table-column property="number" label="货品数量" />
<el-table-column property="url" label="货品图片">
<template slot-scope="scope">
<img v-if="scope.row.url" :src="scope.row.url" width="40">
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="productVisiable" title="设置货品">
<el-dialog :visible.sync="productVisiable" title="编辑货品">
<el-form ref="productForm" :model="productForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="货品规格列" prop="specifications">
<el-tag v-for="tag in productForm.specifications" :key="tag">
......@@ -185,10 +184,10 @@
</el-tag>
</el-form-item>
<el-form-item label="货品售价" prop="price">
<el-input v-model="productForm.price"/>
<el-input v-model="productForm.price" />
</el-form-item>
<el-form-item label="货品数量" prop="number">
<el-input v-model="productForm.number"/>
<el-input v-model="productForm.number" />
</el-form-item>
<el-form-item label="货品图片" prop="url">
<el-upload
......@@ -197,9 +196,10 @@
:show-file-list="false"
:on-success="uploadProductUrl"
class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif">
accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="productForm.url" :src="productForm.url" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
</el-form-item>
</el-form>
......@@ -212,29 +212,31 @@
<el-card class="box-card">
<h3>商品参数</h3>
<el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
<el-table :data="attributes">
<el-table-column property="attribute" label="商品参数名称"/>
<el-table-column property="value" label="商品参数值"/>
<el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
<el-button type="primary" @click="handleAttributeShow">添加</el-button>
<el-table :data="attributesData">
<el-table-column property="attribute" label="商品参数名称" />
<el-table-column property="value" label="商品参数值" />
<el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleAttributeShow(scope.row)">设置</el-button>
<el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="attributeVisiable" title="设置商品参数">
<el-dialog :visible.sync="attributeVisiable" :title="attributeAdd ? '添加商品参数' : '编辑商品参数'">
<el-form ref="attributeForm" :model="attributeForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
<el-form-item label="商品参数名称" prop="attribute">
<el-input v-model="attributeForm.attribute"/>
<el-input v-model="attributeForm.attribute" />
</el-form-item>
<el-form-item label="商品参数值" prop="value">
<el-input v-model="attributeForm.value"/>
<el-input v-model="attributeForm.value" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="attributeVisiable = false">取消</el-button>
<el-button type="primary" @click="handleAttributeAdd">确定</el-button>
<el-button v-if="attributeAdd" type="primary" @click="handleAttributeAdd">确定</el-button>
<el-button v-else type="primary" @click="handleAttributeEdit">确定</el-button>
</div>
</el-dialog>
</el-card>
......@@ -282,6 +284,10 @@
height: 145px;
display: block;
}
.op-container {
display: flex;
justify-content: center;
}
</style>
<script>
......@@ -320,16 +326,15 @@ export default {
{ id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }
],
attributeVisiable: false,
attributeAdd: true,
attributeForm: { attribute: '', value: '' },
attributes: [],
rules: {
goodsSn: [
{ required: true, message: '商品编号不能为空', trigger: 'blur' }
],
name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
},
editorInit: {
language: 'zh_CN',
height: '400px',
convert_urls: false,
plugins: [
'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
......@@ -357,6 +362,16 @@ export default {
return {
'X-Litemall-Admin-Token': getToken()
}
},
attributesData() {
var attributesData = []
for (var i = 0; i < this.attributes.length; i++) {
if (this.attributes[i].deleted) {
continue
}
attributesData.push(this.attributes[i])
}
return attributesData
}
},
created() {
......@@ -371,6 +386,13 @@ export default {
const goodsId = this.$route.query.id
detailGoods(goodsId).then(response => {
this.goods = response.data.data.goods
// 稍微调整一下前后端不一致
if (this.goods.brandId === 0) {
this.goods.brandId = null
}
if (this.goods.keywords === '') {
this.goods.keywords = null
}
this.specifications = response.data.data.specifications
this.products = response.data.data.products
this.attributes = response.data.data.attributes
......@@ -488,99 +510,20 @@ export default {
uploadSpecPicUrl: function(response) {
this.specForm.picUrl = response.data.url
},
handleSpecificationShow() {
this.specForm = { specification: '', value: '', picUrl: '' }
handleSpecificationShow(row) {
this.specForm = Object.assign({}, row)
this.specVisiable = true
},
handleSpecificationAdd() {
var index = this.specifications.length - 1
handleSpecificationEdit() {
this.specForm.updateTime = ''
for (var i = 0; i < this.specifications.length; i++) {
const v = this.specifications[i]
if (v.specification === this.specForm.specification) {
index = i
if (v.id === this.specForm.id) {
this.specifications.splice(i, 1, this.specForm)
break
}
}
this.specifications.splice(index + 1, 0, this.specForm)
this.specVisiable = false
this.specToProduct()
},
handleSpecificationDelete(row) {
const index = this.specifications.indexOf(row)
this.specifications.splice(index, 1)
this.specToProduct()
},
specToProduct() {
if (this.specifications.length === 0) {
return
}
// 根据specifications创建临时规格列表
var specValues = []
var spec = this.specifications[0].specification
var values = []
values.push(0)
for (var i = 1; i < this.specifications.length; i++) {
const aspec = this.specifications[i].specification
if (aspec === spec) {
values.push(i)
} else {
specValues.push(values)
spec = aspec
values = []
values.push(i)
}
}
specValues.push(values)
// 根据临时规格列表生产货品规格
// 算法基于 https://blog.csdn.net/tyhj_sf/article/details/53893125
var productsIndex = 0
var products = []
var combination = []
var n = specValues.length
for (var s = 0; s < n; s++) {
combination[s] = 0
}
var index = 0
var isContinue = false
do {
var specifications = []
for (var x = 0; x < n; x++) {
var z = specValues[x][combination[x]]
specifications.push(this.specifications[z].value)
}
products[productsIndex] = {
id: productsIndex,
specifications: specifications,
price: 0.0,
number: 0,
url: ''
}
productsIndex++
index++
combination[n - 1] = index
for (var j = n - 1; j >= 0; j--) {
if (combination[j] >= specValues[j].length) {
combination[j] = 0
index = 0
if (j - 1 >= 0) {
combination[j - 1] = combination[j - 1] + 1
}
}
}
isContinue = false
for (var p = 0; p < n; p++) {
if (combination[p] !== 0) {
isContinue = true
}
}
} while (isContinue)
this.products = products
},
handleProductShow(row) {
this.productForm = Object.assign({}, row)
......@@ -590,6 +533,7 @@ export default {
this.productForm.url = response.data.url
},
handleProductEdit() {
this.productForm.updateTime = ''
for (var i = 0; i < this.products.length; i++) {
const v = this.products[i]
if (v.id === this.productForm.id) {
......@@ -599,17 +543,34 @@ export default {
}
this.productVisiable = false
},
handleAttributeShow() {
handleAttributeShow(row) {
if (row.id) {
this.attributeForm = Object.assign({}, row)
this.attributeAdd = false
} else {
this.attributeForm = {}
this.attributeAdd = true
}
this.attributeVisiable = true
},
handleAttributeAdd() {
this.attributes.unshift(this.attributeForm)
this.attributeVisiable = false
},
handleAttributeEdit() {
// 这是一个trick，设置updateTime的值为空，告诉后端这个记录已编辑需要更新。
this.attributeForm.updateTime = ''
for (var i = 0; i < this.attributes.length; i++) {
const v = this.attributes[i]
if (v.id === this.attributeForm.id) {
this.attributes.splice(i, 1, this.attributeForm)
break
}
}
this.attributeVisiable = false
},
handleAttributeDelete(row) {
const index = this.attributes.indexOf(row)
this.attributes.splice(index, 1)
row.deleted = true
}
}
}
......
litemall-admin/src/views/goods/list.vue
View file @ 324c8da3
......@@ -3,8 +3,9 @@
<!-- 查询和其他操作 -->
<div class="filter-container">
<el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品编号"/>
<el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品名称"/>
<el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品ID" />
<el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品编号" />
<el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品名称" />
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
<el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
......@@ -16,6 +17,9 @@
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" class="table-expand">
<el-form-item label="商品编号">
<span>{{ props.row.goodsSn }}</span>
</el-form-item>
<el-form-item label="宣传画廊">
<img v-for="pic in props.row.gallery" :key="pic" :src="pic" class="gallery">
</el-form-item>
......@@ -34,13 +38,14 @@
<el-form-item label="品牌商ID">
<span>{{ props.row.brandId }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column align="center" label="商品编号" prop="goodsSn"/>
<el-table-column align="center" label="商品ID" prop="id" />
<el-table-column align="center" min-width="100" label="名称" prop="name"/>
<el-table-column align="center" min-width="100" label="名称" prop="name" />
<el-table-column align="center" property="iconUrl" label="图片">
<template slot-scope="scope">
......@@ -57,15 +62,15 @@
<el-table-column align="center" label="详情" prop="detail">
<template slot-scope="scope">
<el-dialog :visible.sync="detailDialogVisible" title="商品详情">
<div v-html="goodsDetail"/>
<div class="goods-detail-box" v-html="goodsDetail" />
</el-dialog>
<el-button type="primary" size="mini" @click="showDetail(scope.row.detail)">查看</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="专柜价格" prop="counterPrice"/>
<el-table-column align="center" label="市场售价" prop="counterPrice" />
<el-table-column align="center" label="当前价格" prop="retailPrice"/>
<el-table-column align="center" label="当前价格" prop="retailPrice" />
<el-table-column align="center" label="是否新品" prop="isNew">
<template slot-scope="scope">
......@@ -118,6 +123,9 @@
width: 80px;
margin-right: 10px;
}
.goods-detail-box img {
width: 100%;
}
</style>
<script>
......@@ -153,7 +161,7 @@ export default {
getList() {
this.listLoading = true
listGoods(this.listQuery).then(response => {
this.list = response.data.data.items
this.list = response.data.data.list
this.total = response.data.data.total
this.listLoading = false
}).catch(() => {
......
litemall-admin/src/views/layout/components/AppMain.vue
View file @ 324c8da3
......@@ -2,7 +2,7 @@
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews">
<router-view :key="key"/>
<router-view :key="key" />
</keep-alive>
</transition>
</section>
......@@ -22,13 +22,34 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
.app-main {
/*84 = navbar + tags-view = 50 +34 */
min-height: calc(100vh - 84px);
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
}
.fixed-header+.app-main {
padding-top: 50px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
.fixed-header+.app-main {
padding-top: 84px;
}
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
padding-right: 15px;
}
}
</style>
litemall-admin/src/views/layout/components/ScrollPane.vue 0 → 100644
View file @ 324c8da3
<template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
<script>
const tagAndTagSpacing = 4 // tagAndTagSpacing
export default {
name: 'ScrollPane',
data() {
return {
left: 0
}
},
computed: {
scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap
}
},
methods: {
handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.scrollWrapper
const tagList = this.$parent.$refs.tag
let firstTag = null
let lastTag = null
// find first tag and last tag
if (tagList.length > 0) {
firstTag = tagList[0]
lastTag = tagList[tagList.length - 1]
}
if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
// find preTag and nextTag
const currentIndex = tagList.findIndex(item => item === currentTag)
const prevTag = tagList[currentIndex - 1]
const nextTag = tagList[currentIndex + 1]
// the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
// the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
}
}
}
}
}
</script>
<style lang="scss" scoped>
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
/deep/ {
.el-scrollbar__bar {
bottom: 0px;
}
.el-scrollbar__wrap {
height: 49px;
}
}
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment