panqihua
2 years ago
parent
f9a045e8e2
commit
a315ccd185
@ -0,0 +1,277 @@ |
|||||||
|
<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> |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
<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 :data="dataList"> |
||||||
|
<el-table-column type="selection" width="50" align="center"/> |
||||||
|
<el-table-column type="index" label="序号" align="center"> |
||||||
|
|
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="商品编码" align="center"> |
||||||
|
DS000001 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="商品名称" align="center"> |
||||||
|
联想笔记本 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="商品图片" align="center"> |
||||||
|
<img src="http://www.dummyimage.com/50x50"/> |
||||||
|
</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"> |
||||||
|
￥120.00 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="吊牌价" align="center"> |
||||||
|
￥120.00 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="销量" align="center"> |
||||||
|
1000 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="库存" align="center"> |
||||||
|
100 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="状态" align="center"> |
||||||
|
上架 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="创建时间" align="center"> |
||||||
|
2022-12-31 12:31 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<el-button type="text">编辑</el-button> |
||||||
|
<el-button type="text" @click="change(true,123)">上架</el-button> |
||||||
|
<el-button type="text" @click="change(false,123)">下架</el-button> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { mapState } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'BaseForm', |
||||||
|
dicts: ['product_status'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dataList: [{}], |
||||||
|
// 查询参数 |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
productName: undefined, |
||||||
|
productCode: undefined, |
||||||
|
productCategory: undefined, |
||||||
|
productStatus: undefined, |
||||||
|
dateRange: undefined |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
change(status, id) { |
||||||
|
if (status) { |
||||||
|
this.$modal.confirm('商品上架后不可删除，确定上架？') |
||||||
|
} else { |
||||||
|
this.$modal.confirm('确定下架该商品') |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState({ |
||||||
|
categoryOptions: state => state.platformShop.categoryOptions |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.table { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
<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> |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
<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