<template>
|
<div>
|
<el-row>
|
<el-col :span="5">
|
<category-tree ref="tree" @hand-show-add-category = "handShowAddCategory" @hand-tree-item="handTreeItem" :tag="1">
|
<template #default="{data}">
|
<el-tooltip class="item" effect="dark" :content="data.isDisplay ? '隐藏' : '显示'" placement="top">
|
<span :class="['isShow', data.isDisplay ? 'hideEye' : 'openEye']" @click.stop="isShowCategory(data)"></span>
|
</el-tooltip>
|
</template>
|
</category-tree>
|
</el-col>
|
<el-col :span="19" class="tabs">
|
<div v-show="treeRow && !treeRow.childrens" :style="'min-height:' + (height-233) +'px;'" class="right-con">
|
<div class="operatePosition">
|
<span>已关联商品</span>
|
<div>
|
<el-button type="primary" size="mini" @click="batchCancelRelation">取消关联</el-button>
|
<el-button type="success" size="mini" @click="relationProdDialog">关联商品</el-button>
|
</div>
|
</div>
|
<list-condition-template ref="table" dataKey="spuId"
|
:multipleSelected="true" :tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange" @selected="handSelected"
|
>
|
<template slot="columns">
|
<el-table-column label="商品名称" prop="spuName" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="商品主编码" prop="spuNum">
|
</el-table-column>
|
<el-table-column label="上架状态" prop="catDesc">
|
<template slot-scope="scope">
|
<span class="statusTag" :style="{ background: scope.row.state === '1' ? '#52c41a' :'#f5222d'}"></span>
|
<span>{{scope.row.state === '1' ? '已上架' : '已下架'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" prop="action">
|
<template slot-scope="scope">
|
<wly-btn type="primary" @click="cancelRelation(scope.row)">取消关联</wly-btn>
|
<wly-btn v-if="pageInfo.pageSize * (pageInfo.pageNum - 1)+scope.$index+1!== total" icon="el-icon-bottom" @click="relationProdSort('down', scope.row)"></wly-btn>
|
<wly-btn v-if="pageInfo.pageSize * (pageInfo.pageNum - 1)+scope.$index+1!== 1" icon="el-icon-top" @click="relationProdSort('top', scope.row)"></wly-btn>
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
</div>
|
<h2 v-if="!treeRow || treeRow.childrens" class="noRelationStyle" :style="'min-height:' + (height-233) +'px;'">暂无可关联商品</h2>
|
</el-col>
|
</el-row>
|
<exhibition-category-info :show.sync ='show' :title="title" :row="row" @hand-refresh-tree-data="handRefreshTreeData" :catId="catId"></exhibition-category-info>
|
<product-selected :show.sync ='selectedProdVisible' title="关联商品" @hand-selected-row-data="handSelectedRowData" :productSelectedParams="productSelectedParams">
|
<el-table-column
|
label="商品分类"
|
prop="catName"
|
width="140px"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
label="上架状态"
|
prop="state"
|
>
|
<template slot-scope="scope">
|
<span class="statusTag"
|
:style="{ background: scope.row.state === '1' ? '#52c41a' :'#f5222d'}"></span>
|
<span>{{scope.row.state === '1' ? '已上架' : '已下架'}}</span>
|
</template>
|
</el-table-column>
|
</product-selected>
|
</div>
|
</template>
|
<script>
|
import { mapGetters } from 'vuex'
|
import categoryTree from '@/views/productCategory/components/categoryTree.vue'
|
import exhibitionCategoryInfo from '@/views/productExhibition/info.vue'
|
import { objectCopy } from '@/utils/objectCopyHelper'
|
import productExhibitionApi from '@/api/productmanagement/productExhibition'
|
import productSelected from '@/views/product/components/productSelected.vue'
|
import Sortable from 'sortablejs'
|
|
export default {
|
components: { categoryTree, exhibitionCategoryInfo, productSelected },
|
data() {
|
return {
|
height: 300,
|
total: 0,
|
tableData: [],
|
show: false,
|
title: null,
|
row: {},
|
catId: null,
|
loading: false,
|
selectedRow: [],
|
treeRow: null,
|
selectedProdVisible: false, // 打开关联商品弹窗
|
productSelectedParams: {
|
resApi: productExhibitionApi,
|
shopId: '0005',
|
},
|
pageInfo: {}
|
}
|
},
|
computed: {
|
...mapGetters([
|
'mainContainerHeight'
|
]),
|
},
|
watch: {
|
mainContainerHeight(newHeight, oldHeight) {
|
this.height = newHeight
|
},
|
},
|
created() {
|
this.$nextTick(function() {
|
this.height = window.innerHeight
|
})
|
},
|
mounted() {
|
this.rowDrop()
|
},
|
methods: {
|
// 行拖拽,排序方法
|
rowDrop() {
|
const el = this.$refs.table.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
this.sortable = Sortable.create(el, {
|
ghostClass: 'sortable-ghost',
|
onEnd: async evt => {
|
const moveData = this.tableData[evt.oldIndex]
|
const params = {
|
catIdSale: moveData.catIdSale,
|
spuId: moveData.spuId,
|
newSort: this.tableData[evt.newIndex].sort
|
}
|
await this.dragOrtTable(params);
|
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
|
this.tableData.splice(evt.newIndex, 0, targetRow);
|
}
|
});
|
},
|
// 表格拖拽排序
|
async dragOrtTable(params) {
|
const res = await productExhibitionApi.dragOrtTable(params);
|
if (res) {
|
// 刷新列表
|
// this.getList(this.$refs.table.getPageInfo());
|
}
|
},
|
// 获取选中的商品
|
async handSelectedRowData(rows) {
|
const params = {
|
catIdSale: this.treeRow.catId,
|
boList: rows.map(item => { return { spuId: item.spuId } })
|
}
|
const res = await productExhibitionApi.relationProd(params);
|
if (res.data) {
|
// 刷新列表
|
this.getList();
|
this.$message.info('关联商品成功！');
|
}
|
},
|
// 打开关联商品弹窗
|
relationProdDialog() {
|
this.selectedProdVisible = true
|
},
|
// 切换展示分类的显示状态
|
async isShowCategory(row) {
|
const params = {
|
catId: row.catId,
|
displaySate: row.isDisplay ? 0 : 1,
|
}
|
const res = await productExhibitionApi.isShowCategory(params);
|
if (res.data) {
|
row.isDisplay = params.displaySate;
|
}
|
},
|
handSelected(val) {
|
this.selectedRow = val
|
},
|
batchCancelRelation() {
|
if (!this.selectedRow.length) {
|
this.$message.info('请选择要取消关联的商品');
|
return;
|
}
|
const params = {
|
catIdSale: this.treeRow.catId,
|
boList: this.selectedRow.map(item => { return { spuId: item.spuId } })
|
}
|
this.cancelRelation(params)
|
},
|
// 取消关联
|
async cancelRelation(rows) {
|
let params = null
|
if (!rows.boList?.length) {
|
params = {
|
catIdSale: this.treeRow.catId,
|
boList: [{ spuId: rows.spuId }]
|
}
|
}
|
const res = await productExhibitionApi.cancelRelation(params || rows);
|
if (res.data) {
|
// 刷新列表
|
this.getList();
|
this.$message.info('取消关联成功');
|
this.$refs.table.clearTableSelected() // 清空表格勾选项
|
}
|
},
|
// 关联商品排序
|
async relationProdSort(tag, row) {
|
let res = null
|
const params = {
|
catIdSale: row.catIdSale,
|
spuId: row.spuId
|
}
|
if (tag === 'top') {
|
res = await productExhibitionApi.relationProdTopSort(params);
|
} else {
|
res = await productExhibitionApi.relationProdDownSort(params);
|
}
|
if (res.data) {
|
// 刷新列表
|
this.getList(this.$refs.table.getPageInfo());
|
}
|
},
|
/**
|
* 获取列表
|
*/
|
async getList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
this.loading = true
|
const res = await productExhibitionApi.getRelationProdList({ catId: this.treeRow.catId, ...pageInfo })
|
if (res) {
|
this.loading = false
|
this.tableData = res.data.list
|
this.total = res.data.total
|
this.pageInfo = pageInfo
|
}
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.getList(pageInfo)
|
},
|
/**
|
* 选择某个树节点触发
|
*/
|
handTreeItem(row) {
|
if (row) {
|
this.treeRow = row
|
this.productSelectedParams.catIdSale = row.catId
|
this.$refs.table.clearTableSelected() // 清空表格勾选项
|
this.selectedRow = []
|
if (!row.childrens) {
|
this.getList()
|
}
|
}
|
},
|
/**
|
* 初始化数据
|
*/
|
initData() {
|
this.tableData = []
|
this.listQuery = {
|
pageNum: 1,
|
pageSize: 10
|
}
|
},
|
/**
|
*刷新分类树
|
*/
|
handRefreshTreeData() {
|
this.$refs.tree.queryList()
|
},
|
/**
|
* 打开新增编辑弹框
|
*/
|
handShowAddCategory(data, tag) {
|
if (tag === 1) {
|
if (data) {
|
this.title = '新增子分类'
|
this.row.parentCatId = data.catId
|
} else {
|
this.title = '新增分类'
|
this.row = {}
|
}
|
} else {
|
this.title = '编辑分类'
|
this.row = objectCopy(data)
|
}
|
this.show = true
|
},
|
}
|
}
|
</script>
|
<style scoped>
|
.openEye{
|
--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M256 105c-101.8 0-188.4 62.4-224 151 35.6 88.6 122.2 151 224 151s188.4-62.4 224-151c-35.6-88.6-122.2-151-224-151zm0 251.7c-56 0-101.8-45.3-101.8-100.7S200 155.3 256 155.3 357.8 200.6 357.8 256 312 356.7 256 356.7zm0-161.1c-33.6 0-61.1 27.2-61.1 60.4s27.5 60.4 61.1 60.4 61.1-27.2 61.1-60.4-27.5-60.4-61.1-60.4z' fill='currentColor'/%3E%3C/svg%3E"); width: 1em; height: 1em; background-color: currentcolor; -webkit-mask-image: var(--svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;
|
}
|
.hideEye{
|
--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M256.1 144.8c56.2 0 101.9 45.3 101.9 101.1 0 13.1-2.6 25.5-7.3 37l59.5 59c30.8-25.5 55-58.4 69.9-96-35.3-88.7-122.3-151.6-224.2-151.6-28.5 0-55.8 5.1-81.1 14.1l44 43.7c11.6-4.6 24.1-7.3 37.3-7.3zM52.4 89.7l46.5 46.1 9.4 9.3c-33.9 26-60.4 60.8-76.3 100.8 35.2 88.7 122.2 151.6 224.1 151.6 31.6 0 61.7-6.1 89.2-17l8.6 8.5 59.7 59 25.9-25.7L78.2 64 52.4 89.7zM165 201.4l31.6 31.3c-1 4.2-1.6 8.7-1.6 13.1 0 33.5 27.3 60.6 61.1 60.6 4.5 0 9-.6 13.2-1.6l31.6 31.3c-13.6 6.7-28.7 10.7-44.8 10.7-56.2 0-101.9-45.3-101.9-101.1 0-15.8 4.1-30.7 10.8-44.3zm87.8-15.7l64.2 63.7.4-3.2c0-33.5-27.3-60.6-61.1-60.6l-3.5.1z' fill='currentColor'/%3E%3C/svg%3E"); width: 1em; height: 1em; background-color: currentcolor; -webkit-mask-image: var(--svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;
|
}
|
|
</style>
|
<style lang="scss" scoped>
|
.tabs{
|
padding-left: 20px;
|
.noRelationStyle {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30px;
|
margin-top: 50px;
|
color: rgb(163, 170, 175);
|
}
|
}
|
.right-con{
|
background: #fff;
|
padding:20px;
|
border-radius: 4px;
|
}
|
.isShow{
|
display: inline-block;
|
width: 16px;
|
line-height: 26px;
|
background-color: #fcb1b1;
|
}
|
/deep/.treeIcon{
|
width: 80px !important;
|
}
|
.operatePosition{
|
display: flex;
|
&>span, &>div{
|
flex: 1;
|
}
|
&>div{
|
text-align: right;
|
}
|
}
|
/deep/.main-b-style{
|
padding: 0;
|
}
|
</style>
|
