panqihua
2 years ago
parent
0b24a125a1
commit
7383c73514
@ -1,272 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<el-tabs v-model="activeName" type="border-card"> |
|
||||||
<el-tab-pane label="基本信息" name="base"> |
|
||||||
<div class="title">基本信息</div> |
|
||||||
<el-divider /> |
|
||||||
<el-form :inline="true"> |
|
||||||
<el-form-item label="商品名称"> |
|
||||||
<el-input placeholder="请输入商品名称" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="商品编码"> |
|
||||||
<el-input placeholder="请输入商品编码" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-cascader placeholder="请选择商品分类" :options="categoryOptions"></el-cascader> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<el-form :inline="true"> |
|
||||||
<el-form-item label="计量单位"> |
|
||||||
<el-select placeholder="请选择计量单位" v-model="form.unit" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="库存预警"> |
|
||||||
<el-input-number placeholder="请输入最低库存数量" v-model="form.num" controls-position="right" |
|
||||||
:step="100" :min="0"></el-input-number> |
|
||||||
</el-form-item> |
|
||||||
<br /> |
|
||||||
<el-form-item label="是否上架"> |
|
||||||
<el-switch v-model="form.isOnShelf" active-color="#adbcf9" inactive-color="#adbc00"> |
|
||||||
</el-switch> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<div class="title">商品主图</div> |
|
||||||
<el-divider /> |
|
||||||
<el-row> |
|
||||||
<el-col :span="4" v-for="(item, index) in form.fileList" :key="index"> |
|
||||||
<div class="img" :style="{ |
|
||||||
backgroundImage: `url(${item.blobURL})` |
|
||||||
}"> |
|
||||||
<i class="el-icon-check" v-if="item.primary"></i> |
|
||||||
</div> |
|
||||||
<div style="text-align: center;"> |
|
||||||
<el-button type="text" @click="setPrimary(index)">设为主图</el-button> |
|
||||||
<el-button type="text" @click="handleRemove(index)">删除图片</el-button> |
|
||||||
</div> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
<el-upload action="#" accept="image/png, image/jpeg" :limit="maxFileCount" :show-file-list="false" |
|
||||||
:auto-upload="false" :file-list="form.fileList" :on-change="handleChange"> |
|
||||||
<el-button type="primary" v-if="form.fileList.length < maxFileCount">上传图片</el-button><span |
|
||||||
class="upload-tip">145*145（单张图片大小不超过{{ maxFileSizeM }}，支持格式jpg、png，最多上传8张）</span> |
|
||||||
</el-upload> |
|
||||||
<div class="title">商品详情</div> |
|
||||||
<h1>富文本编辑器</h1> |
|
||||||
<el-divider /> |
|
||||||
<el-button type="primary" @click="save">保存</el-button> |
|
||||||
<el-button @click="$emit('close')">关闭</el-button> |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="库存规格" name="spec"> |
|
||||||
<el-row type="flex" justify="center"> |
|
||||||
<el-col :span="2"> |
|
||||||
<div class="left-title">库存/规格</div> |
|
||||||
</el-col> |
|
||||||
<el-col :span="16"> |
|
||||||
<el-input placeholder="输入规格名称"> |
|
||||||
<template slot="append"> |
|
||||||
<el-button>添加规格</el-button> |
|
||||||
</template> |
|
||||||
</el-input> |
|
||||||
<div class="top"> |
|
||||||
<tag-list label="尺寸" @change-tags="(tags) => { console.info(tags) }" /> |
|
||||||
<tag-list label="颜色" @change-tags="(tags) => { console.info(tags) }" /> |
|
||||||
</div> |
|
||||||
<el-table class="spec-table" :data="specList" :span-method="arraySpanMethod" border> |
|
||||||
<el-table-column label="尺寸" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<span v-if="scope.row === undefined">批量设置</span> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="颜色" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="价格" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-input v-if="scope.row === undefined"> |
|
||||||
<template slot="append"> |
|
||||||
<el-button>设置</el-button> |
|
||||||
</template> |
|
||||||
</el-input> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="吊牌 价格" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-input v-if="scope.row === undefined"> |
|
||||||
<template slot="append"> |
|
||||||
<el-button>设置</el-button> |
|
||||||
</template> |
|
||||||
</el-input> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="库存" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-input v-if="scope.row === undefined"> |
|
||||||
<template slot="append"> |
|
||||||
<el-button>设置</el-button> |
|
||||||
</template> |
|
||||||
</el-input> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="图片" align="center"></el-table-column> |
|
||||||
</el-table> |
|
||||||
</el-col> |
|
||||||
|
|
||||||
</el-row> |
|
||||||
|
|
||||||
</el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
|
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import { mapState } from 'vuex' |
|
||||||
import TagList from "./tag_list" |
|
||||||
export default { |
|
||||||
name: "AddProduct", |
|
||||||
components: { TagList }, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
//库存数据 |
|
||||||
specList: [undefined], |
|
||||||
// 最大上传文件数 |
|
||||||
maxFileCount: 2, |
|
||||||
//最大上传文件体积 单位字节 |
|
||||||
maxFileSize: 1024 * 1024 * 5, |
|
||||||
form: { |
|
||||||
// 库存预警 |
|
||||||
num: 100, |
|
||||||
// 是否商家 |
|
||||||
isOnShelf: true, |
|
||||||
//计量单位 |
|
||||||
unit: undefined, |
|
||||||
fileList: [] |
|
||||||
|
|
||||||
}, |
|
||||||
activeName: "base" |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
arraySpanMethod({ row, column, rowIndex, columnIndex }) { |
|
||||||
if (rowIndex === this.specList.length - 1) { |
|
||||||
switch (columnIndex) { |
|
||||||
case 0: return [1, 2] |
|
||||||
case 1: return [0, 0] |
|
||||||
default: return [1, 1] |
|
||||||
} |
|
||||||
} else { |
|
||||||
return [1, 1] |
|
||||||
} |
|
||||||
}, |
|
||||||
// 设置主图 |
|
||||||
setPrimary(index) { |
|
||||||
|
|
||||||
let _index = this.form.fileList.findIndex(item => item.primary) |
|
||||||
let old = this.form.fileList[_index] |
|
||||||
old.primary = false |
|
||||||
this.form.fileList.splice(_index, 1, old) |
|
||||||
let _new = this.form.fileList[index] |
|
||||||
_new.primary = true |
|
||||||
this.form.fileList.splice(index, 1, _new) |
|
||||||
|
|
||||||
}, |
|
||||||
handleChange(file, fileList) { |
|
||||||
if (file.size > this.maxFileSize) { |
|
||||||
this.$modal.msgWarning(`单张图片大小不能超过${this.maxFileSizeM}`) |
|
||||||
return |
|
||||||
} |
|
||||||
file.blobURL = URL.createObjectURL(file.raw) |
|
||||||
file.primary = false |
|
||||||
if (this.form.fileList.length === 0) { |
|
||||||
file.primary = true |
|
||||||
} |
|
||||||
this.form.fileList.push(file) |
|
||||||
|
|
||||||
}, |
|
||||||
handleRemove(index) { |
|
||||||
let del = this.form.fileList[index] |
|
||||||
this.form.fileList.splice(index, 1) |
|
||||||
//删除主图时默认设置剩下图片中的第一张为主图 |
|
||||||
if (this.form.fileList.length > 0 && del.primary) { |
|
||||||
let defaultPrimary = this.form.fileList[0] |
|
||||||
defaultPrimary.primary = true |
|
||||||
this.form.fileList.splice(0, 1, defaultPrimary) |
|
||||||
} |
|
||||||
}, |
|
||||||
handlePreview(file) { |
|
||||||
console.log(file); |
|
||||||
}, |
|
||||||
save() { |
|
||||||
this.$modal.msgSuccess("保存成功") |
|
||||||
this.$emit('close') |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
...mapState({ |
|
||||||
categoryOptions: state => state.platformShop.categoryOptions |
|
||||||
}), |
|
||||||
maxFileSizeM() { |
|
||||||
return `${this.maxFileSize / 1024 / 1024}M` |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style lang="scss"> |
|
||||||
.spec-table { |
|
||||||
margin-top: 10px; |
|
||||||
|
|
||||||
thead th { |
|
||||||
background-color: #fff !important; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.top { |
|
||||||
margin-top: 5px; |
|
||||||
background-color: #f5f5f5; |
|
||||||
border-radius: 5px; |
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2); |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.img { |
|
||||||
width: 145px; |
|
||||||
height: 145px; |
|
||||||
background-position: center; |
|
||||||
background-size: cover; |
|
||||||
margin: auto; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: 50px; |
|
||||||
} |
|
||||||
|
|
||||||
.left-title { |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
color: rgba(16, 16, 16, 1); |
|
||||||
font-size: 16px; |
|
||||||
text-align: left; |
|
||||||
font-family: SourceHanSansSC-regular; |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-switch__core:after { |
|
||||||
content: ""; |
|
||||||
position: absolute; |
|
||||||
top: 1px; |
|
||||||
left: 1px; |
|
||||||
border-radius: 100%; |
|
||||||
-webkit-transition: all 0.3s; |
|
||||||
transition: all 0.3s; |
|
||||||
width: 16px; |
|
||||||
height: 16px; |
|
||||||
background-color: #5a7bf4 !important; |
|
||||||
} |
|
||||||
|
|
||||||
.upload-tip { |
|
||||||
font-size: 14px; |
|
||||||
text-align: left; |
|
||||||
font-family: SourceHanSansSC-regular; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,121 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<el-row> |
|
||||||
<el-form :inline="true"> |
|
||||||
<el-form-item> |
|
||||||
<el-input v-model="queryParams.productName" placeholder="请输入商品名称" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-input v-model="queryParams.productCode" placeholder="请输入商品编码" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-cascader placeholder="请选择商品分类" v-model="queryParams.productCategory" |
|
||||||
:options="categoryOptions"></el-cascader> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-select v-model="queryParams.productStatus" placeholder="状态" clearable> |
|
||||||
<el-option v-for="dict in dict.type.product_status" :key="dict.value" :label="dict.label" |
|
||||||
:value="dict.value"></el-option> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd" |
|
||||||
type="daterange" range-separator="-" start-placeholder="开始日期" |
|
||||||
end-placeholder="结束日期"></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-button type="primary" icon="el-icon-search" size="mini">查询</el-button> |
|
||||||
<el-button icon="el-icon-refresh" size="mini">重置</el-button> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
</el-row> |
|
||||||
<el-row type="flex" justify="space-between"> |
|
||||||
<el-col :span="12"> |
|
||||||
<el-button type="primary" @click="$emit('show-add')">新增商品</el-button> |
|
||||||
<el-button>批量上架</el-button> |
|
||||||
<el-button>批量下架</el-button> |
|
||||||
<el-button>批量删除</el-button> |
|
||||||
</el-col> |
|
||||||
<el-col :span="6"> |
|
||||||
<el-button type="text">下载模板</el-button> |
|
||||||
<el-button>导入</el-button> |
|
||||||
<el-button>导出</el-button> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
<el-row class="table"> |
|
||||||
<el-table> |
|
||||||
<el-table-column type="selection" width="50" align="center" /> |
|
||||||
<el-table-column label="序号" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品编码" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品名称" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品图片" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品分类" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="单位" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="销售价" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="吊牌价" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="销量" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="库存" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="状态" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="创建时间" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="操作" align="center"> |
|
||||||
|
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import { mapState } from 'vuex' |
|
||||||
export default { |
|
||||||
name: "BaseForm", |
|
||||||
dicts: ['product_status'], |
|
||||||
data() { |
|
||||||
return { |
|
||||||
// 查询参数 |
|
||||||
queryParams: { |
|
||||||
pageNum: 1, |
|
||||||
pageSize: 10, |
|
||||||
productName: undefined, |
|
||||||
productCode: undefined, |
|
||||||
productCategory: undefined, |
|
||||||
productStatus: undefined, |
|
||||||
dateRange: undefined |
|
||||||
}, |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
...mapState({ |
|
||||||
categoryOptions: state => state.platformShop.categoryOptions |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style scoped lang="scss"> |
|
||||||
.table { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,95 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="size"> |
|
||||||
<i class="el-icon-delete"></i> |
|
||||||
<span>{{ this.label }}</span> |
|
||||||
<i class="el-icon-delete" @click="tags = []"></i> |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-row class="add" type="flex" justify="space-between"> |
|
||||||
<el-col :span="11"> |
|
||||||
<el-input v-model="value"> |
|
||||||
<template slot="append"> |
|
||||||
<el-button @click="addTag">添加</el-button> |
|
||||||
</template> |
|
||||||
</el-input> |
|
||||||
</el-col> |
|
||||||
<el-col :span="11"> |
|
||||||
<el-tag v-for="(tag, index) in tags" :key="tag.name" closable :type="tag.type" |
|
||||||
@close="tags.splice(index, 1)"> |
|
||||||
{{ tag.name }} |
|
||||||
</el-tag> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "TagList", |
|
||||||
props: { |
|
||||||
label: String |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
//当前尺寸文本 |
|
||||||
value: '', |
|
||||||
tags: [], |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
|
|
||||||
addTag() { |
|
||||||
let value = this.value |
|
||||||
if (value) { |
|
||||||
if (this.tags.find(item => item.name === value)) { |
|
||||||
this.$modal.msgWarning(`请问重复添加${value}`) |
|
||||||
} else { |
|
||||||
this.tags.push({ name: value, type: '' }) |
|
||||||
this.value = '' |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
tags(value) { |
|
||||||
this.$emit('change-tags', value) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style scoped lang="scss"> |
|
||||||
.add { |
|
||||||
background-color: #ffffff; |
|
||||||
padding: 5px; |
|
||||||
|
|
||||||
&>div:last-child { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
overflow-x: auto; |
|
||||||
|
|
||||||
&>span { |
|
||||||
margin-left: 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.size { |
|
||||||
font-size: 16px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: space-between; |
|
||||||
padding: 15px 10px; |
|
||||||
|
|
||||||
&>span { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
&>i:first-child { |
|
||||||
visibility: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
&>i:last-child { |
|
||||||
color: red; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
<template> |
|
||||||
<div v-if="showList"> |
|
||||||
<el-tabs v-model="activeName" type="card" class="custom-tab"> |
|
||||||
<el-tab-pane label="全部商品（120）" name="all"> |
|
||||||
全部商品 |
|
||||||
|
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="上架商品（120）" name="on-shelf"> |
|
||||||
上架商品 |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="下架商品（120）" name="off-shelf"> |
|
||||||
下架商品 |
|
||||||
</el-tab-pane> |
|
||||||
<el-tab-pane label="库存预警（120）" name="warn"> |
|
||||||
库存预警 |
|
||||||
</el-tab-pane> |
|
||||||
</el-tabs> |
|
||||||
<base-form @show-add="showList = false" /> |
|
||||||
</div> |
|
||||||
<add-product v-else @close="showList = true" /> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import BaseForm from './components/form' |
|
||||||
import AddProduct from './components/add_product' |
|
||||||
//TODO:商品库，封装成公共组件给总平台、厂商/经销商使用 |
|
||||||
export default { |
|
||||||
name: "Index", |
|
||||||
components: { BaseForm, AddProduct }, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
activeName: "all", |
|
||||||
showList: true |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style scoped lang="scss"> |
|
||||||
div[role='tablist']>div { |
|
||||||
background-color: #1684fc; |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue