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