You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
12 KiB
434 lines
12 KiB
1 year ago
|
<template>
|
||
|
|
<div class="article-manager">
|
||
|
|
<el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
|
||
|
|
<el-tabs v-model="artFrom.type" @tab-click="onClickTab">
|
||
|
|
<el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type.toString()" v-for="(item, index) in headeNum" :key="index" />
|
||
|
|
</el-tabs>
|
||
|
|
<div>
|
||
|
|
<el-form ref="artFrom" :model="artFrom" label-width="80px" label-position="right" inline @submit.native.prevent>
|
||
|
|
<el-form-item label="商品分类：" label-for="pid">
|
||
|
|
<el-cascader
|
||
|
|
v-model="artFrom.cate_id"
|
||
|
|
size="small"
|
||
|
|
:options="treeSelect"
|
||
|
|
:props="{ multiple: false, emitPath: false, checkStrictly: true }"
|
||
|
|
clearable
|
||
|
|
class="form_content_width"
|
||
|
|
></el-cascader>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="商品搜索：" label-for="store_name">
|
||
|
|
<el-input clearable placeholder="请输入商品名称/关键字/ID" v-model="artFrom.store_name" class="form_content_width" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="userSearchs">查询</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
<div class="Button">
|
||
|
|
<el-button type="primary" class="mr14">添加商品</el-button>
|
||
|
|
<el-button type="success" class="mr14" @click="onCopy">商品采集</el-button>
|
||
|
|
<el-dropdown class="bnt mr14" @command="batchSelect">
|
||
|
|
<el-button>批量修改<i class="el-icon-arrow-down el-icon--right"></i></el-button>
|
||
|
|
<el-dropdown-menu slot="dropdown">
|
||
|
|
<el-dropdown-item :command="1">商品分类</el-dropdown-item>
|
||
|
|
<el-dropdown-item :command="2">物流设置</el-dropdown-item>
|
||
|
|
<el-dropdown-item :command="3">购买送积分</el-dropdown-item>
|
||
|
|
<el-dropdown-item :command="4">购买送优惠券</el-dropdown-item>
|
||
|
|
<el-dropdown-item :command="5">关联用户标签</el-dropdown-item>
|
||
|
|
<el-dropdown-item :command="6">活动推荐</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</el-dropdown>
|
||
|
|
<el-button @click="onDismount" v-show="artFrom.type === '1'">批量下架</el-button>
|
||
|
|
<el-button @click="onShelves" v-show="artFrom.type === '2'">批量上架</el-button>
|
||
|
|
<el-button class="export" @click="exports">导出</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table
|
||
|
|
ref="table"
|
||
|
|
:data="tableList"
|
||
|
|
class="ivu-mt mt14"
|
||
|
|
v-loading="loading"
|
||
|
|
highlight-current-row
|
||
|
|
:row-key="getRowKey"
|
||
|
|
@selection-change="handleSelectRow"
|
||
|
|
empty-text="暂无数据"
|
||
|
|
>
|
||
|
|
<el-table-column type="expand" width="50" v-if="['1', '2'].includes(artFrom.type)">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<expandRow :row="scope.row"></expandRow>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column>
|
||
|
|
<el-table-column label="商品ID" width="80">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.id }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="商品图" min-width="90">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="tabBox_img" v-viewer>
|
||
|
|
<img v-lazy="scope.row.image" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="商品名称" min-width="250">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.store_name }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="商品类型" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.product_type }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="商品售价" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.price }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="销量" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.sales }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="库存" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.stock }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="排序" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span>{{ scope.row.sort }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="状态" min-width="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-switch
|
||
|
|
class="defineSwitch"
|
||
|
|
:active-value="1"
|
||
|
|
:inactive-value="0"
|
||
|
|
v-model="scope.row.is_show"
|
||
|
|
:value="scope.row.is_show"
|
||
|
|
:disabled="scope.row.stop_status ? true : false"
|
||
|
|
@change="changeSwitch(scope.row)"
|
||
|
|
size="large"
|
||
|
|
active-text="上架"
|
||
|
|
inactive-text="下架"
|
||
|
|
>
|
||
|
|
</el-switch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" fixed="right" minWidth="100">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text" @click="edit(scope.row)">查看订单</el-button>
|
||
|
|
<el-button @click="del(scope.row, scope)" type="text">取消订单</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="acea-row row-right page">
|
||
|
|
<pagination v-if="total" :total="total" :page.sync="artFrom.page" :limit.sync="artFrom.limit" @pagination="getDataList" />
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'product_productList',
|
||
|
|
// components: { expandRow, attribute, taoBao, goodsDetail, userLabel, couponList },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
template: false,
|
||
|
|
modals: false,
|
||
|
|
batchModal: false,
|
||
|
|
labelShow: false,
|
||
|
|
batchType: 1, // 批量设置类型
|
||
|
|
batchFormData: {
|
||
|
|
cate_id: [],
|
||
|
|
logistics: [],
|
||
|
|
freight: 2,
|
||
|
|
postage: 0,
|
||
|
|
temp_id: null,
|
||
|
|
give_integral: 0,
|
||
|
|
label_id: [],
|
||
|
|
coupon_ids: [],
|
||
|
|
recommend: []
|
||
|
|
},
|
||
|
|
ruleBatch: {},
|
||
|
|
couponName: [], // 优惠券
|
||
|
|
dataLabel: [], // 标签
|
||
|
|
templateList: [], // 运费模版
|
||
|
|
grid: {
|
||
|
|
xl: 6,
|
||
|
|
lg: 8,
|
||
|
|
md: 12,
|
||
|
|
sm: 24,
|
||
|
|
xs: 24
|
||
|
|
},
|
||
|
|
artFrom: {
|
||
|
|
page: 1,
|
||
|
|
limit: 15,
|
||
|
|
cate_id: '',
|
||
|
|
type: '1',
|
||
|
|
store_name: ''
|
||
|
|
},
|
||
|
|
list: [],
|
||
|
|
tableList: [],
|
||
|
|
headeNum: [
|
||
|
|
{
|
||
|
|
count: 2,
|
||
|
|
name: '出售中商品',
|
||
|
|
type: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
count: 40,
|
||
|
|
name: '仓库中商品',
|
||
|
|
type: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
count: 5,
|
||
|
|
name: '已经售馨商品',
|
||
|
|
type: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
count: 10,
|
||
|
|
name: '警戒库存',
|
||
|
|
type: 4
|
||
|
|
},
|
||
|
|
{
|
||
|
|
count: 1,
|
||
|
|
name: '商品回收站',
|
||
|
|
type: 5
|
||
|
|
}
|
||
|
|
],
|
||
|
|
loading: false,
|
||
|
|
data: [],
|
||
|
|
total: 0,
|
||
|
|
attrTemplate: false,
|
||
|
|
ids: [],
|
||
|
|
goodsId: '',
|
||
|
|
isProductBox: false,
|
||
|
|
treeSelect: [],
|
||
|
|
multipleSelection: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
activated() {},
|
||
|
|
methods: {
|
||
|
|
// 标签弹窗关闭
|
||
|
|
labelClose() {},
|
||
|
|
look(row) {
|
||
|
|
this.goodsId = row.id
|
||
|
|
this.isProductBox = true
|
||
|
|
},
|
||
|
|
// 物流方式
|
||
|
|
logisticsBtn(e) {
|
||
|
|
this.batchFormData.logistics = e
|
||
|
|
},
|
||
|
|
// 关联用户标签
|
||
|
|
openLabel() {
|
||
|
|
this.labelShow = true
|
||
|
|
},
|
||
|
|
closeLabel(label) {
|
||
|
|
let index = this.dataLabel.indexOf(this.dataLabel.filter(d => d.id == label.id)[0])
|
||
|
|
this.dataLabel.splice(index, 1)
|
||
|
|
},
|
||
|
|
|
||
|
|
getPath() {},
|
||
|
|
// 导出
|
||
|
|
async exports() {
|
||
|
|
let [th, filekey, data, fileName] = [[], [], [], '']
|
||
|
|
let excelData = JSON.parse(JSON.stringify(this.artFrom))
|
||
|
|
excelData.page = 1
|
||
|
|
excelData.limit = 50
|
||
|
|
excelData.ids = this.ids
|
||
|
|
for (let i = 0; i < excelData.page + 1; i++) {
|
||
|
|
let lebData = await this.getExcelData(excelData)
|
||
|
|
if (!fileName) fileName = lebData.filename
|
||
|
|
if (!filekey.length) {
|
||
|
|
filekey = lebData.fileKey
|
||
|
|
}
|
||
|
|
if (!th.length) th = lebData.header
|
||
|
|
if (lebData.export.length) {
|
||
|
|
data = data.concat(lebData.export)
|
||
|
|
excelData.page++
|
||
|
|
} else {
|
||
|
|
this.$exportExcel(th, filekey, fileName, data)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getExcelData(excelData) {},
|
||
|
|
freight() {},
|
||
|
|
// 批量上架
|
||
|
|
onShelves() {},
|
||
|
|
// 批量下架
|
||
|
|
onDismount() {},
|
||
|
|
getRowKey(row) {
|
||
|
|
return row.id
|
||
|
|
},
|
||
|
|
// 选中某一行
|
||
|
|
handleSelectRow(selection) {
|
||
|
|
const uniqueArr = []
|
||
|
|
const ids = []
|
||
|
|
for (let i = 0; i < selection.length; i++) {
|
||
|
|
const item = selection[i]
|
||
|
|
if (!ids.includes(item.id)) {
|
||
|
|
uniqueArr.push(item)
|
||
|
|
ids.push(item.id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.ids = ids
|
||
|
|
this.multipleSelection = uniqueArr
|
||
|
|
},
|
||
|
|
|
||
|
|
// tab选择
|
||
|
|
onClickTab() {
|
||
|
|
this.artFrom.page = 1
|
||
|
|
this.multipleSelection = []
|
||
|
|
this.$refs.table.clearSelection()
|
||
|
|
this.getDataList()
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取商品表单头数量
|
||
|
|
goodHeade() {},
|
||
|
|
// 商品分类；
|
||
|
|
goodsCategory() {},
|
||
|
|
// 商品列表；
|
||
|
|
getDataList() {},
|
||
|
|
showSelectData() {},
|
||
|
|
// 表格搜索
|
||
|
|
userSearchs() {
|
||
|
|
this.artFrom.page = 1
|
||
|
|
},
|
||
|
|
// 上下架
|
||
|
|
changeSwitch(row) {},
|
||
|
|
// 数据导出；
|
||
|
|
exportData: function() {},
|
||
|
|
// 属性弹出；
|
||
|
|
attrTap() {
|
||
|
|
this.attrTemplate = true
|
||
|
|
},
|
||
|
|
changeTemplate(msg) {
|
||
|
|
this.attrTemplate = msg
|
||
|
|
},
|
||
|
|
// 编辑
|
||
|
|
edit(row) {
|
||
|
|
// this.$router.push({ path: this.$routeProStr + '/product/add_product/' + row.id });
|
||
|
|
},
|
||
|
|
// 确认
|
||
|
|
del(row, tit, num) {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep .el-tabs__item {
|
||
|
|
height: 54px !important;
|
||
|
|
line-height: 54px !important;
|
||
|
|
}
|
||
|
|
::v-deep .ivu-modal-mask {
|
||
|
|
z-index: 999 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .ivu-modal-wrap {
|
||
|
|
z-index: 999 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Box {
|
||
|
|
::v-deep .ivu-modal-body {
|
||
|
|
height: 700px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.batch-box {
|
||
|
|
::v-deep .ivu-modal-body {
|
||
|
|
overflow: auto;
|
||
|
|
min-height: 350px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabBox_img {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 11;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .happy-scroll-content {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.demo-spin-icon-load {
|
||
|
|
animation: ani-demo-spin 1s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes ani-demo-spin {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-spin-col {
|
||
|
|
height: 100px;
|
||
|
|
position: relative;
|
||
|
|
border: 1px solid #eee;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.labelInput {
|
||
|
|
border: 1px solid #dcdee2;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 15px;
|
||
|
|
border-radius: 5px;
|
||
|
|
min-height: 30px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 12px;
|
||
|
|
|
||
|
|
.span {
|
||
|
|
color: #c5c8ce;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconxiayi {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-dropdown-link {
|
||
|
|
cursor: pointer;
|
||
|
|
color: var(--prev-color-primary);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.el-icon-arrow-down {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.el-dropdown-menu__item {
|
||
|
|
a {
|
||
|
|
color: #606266;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.label_width {
|
||
|
|
width: 400px;
|
||
|
|
}
|
||
|
|
</style>
|