258 lines
8.6 KiB
Vue
258 lines
8.6 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<!-- 组合按钮 -->
|
||
|
|
<el-button-group>
|
||
|
|
<el-button type="primary" icon="el-icon-plus" @click="$router.replace('/spu/add')">添加</el-button>
|
||
|
|
<el-button type="danger" icon="el-icon-delete" @click="deleteSpu(countSelIdArr($refs.myTable.selection))">删除
|
||
|
|
</el-button>
|
||
|
|
<el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
|
||
|
|
</el-button-group>
|
||
|
|
<!-- 用户select选项 -->
|
||
|
|
<el-button-group class="m-l-20">
|
||
|
|
<SelectionShopId v-model="form.shop_id" :allSel="true" />
|
||
|
|
</el-button-group>
|
||
|
|
<!-- 分类select选项 -->
|
||
|
|
<el-button-group class="m-l-20">
|
||
|
|
<SelectionPath v-model="form.path" :shop_id="form.shop_id" :allSel="true" />
|
||
|
|
</el-button-group>
|
||
|
|
<!-- 商品spu表格 -->
|
||
|
|
<el-table class="m-t-20 w-100" ref="myTable"
|
||
|
|
:data="spuListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
|
||
|
|
<el-table-column align="center" type="selection" width="40">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" label="排序" width="70">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-input v-model="scope.row.sort" @focus="tempSort = scope.row.sort"
|
||
|
|
@blur="blurOrder(scope.row.id, scope.row.sort)"></el-input>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center" prop="id" label="id" width="50">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="name" label="名称" width="150" min-width="150">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="spu_number" label="编号" min-width="120">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="图片" width="120" min-width="120">
|
||
|
|
<template v-if="scope.row.photo != ''" slot-scope="scope">
|
||
|
|
<el-image :src="$store.state.settings.host + '/Data/UploadFiles/spu/' + scope.row.photo"
|
||
|
|
:preview-src-list="[$store.state.settings.host + '/Data/UploadFiles/spu/' + scope.row.photo]">
|
||
|
|
<div slot="error" class="image-slot">
|
||
|
|
<i class="el-icon-picture-outline"></i>
|
||
|
|
</div>
|
||
|
|
</el-image>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="controler" label="操作" width="380" min-width="380">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button-group>
|
||
|
|
<el-button :type="scope.row.recommend == '1' ? 'success' : 'info'" class="iconfont icon-tuijian"
|
||
|
|
@click="handeleRecommend(scope.row.id, scope.row.recommend)"><span class="m-l-5">推荐</span></el-button>
|
||
|
|
<el-button :type="scope.row.show == '1' ? 'primary' : 'info'"
|
||
|
|
:class="scope.row.show == '1' ? 'iconfont icon-yanjing' : 'iconfont icon-biyanjing'"
|
||
|
|
@click="handeleShow(scope.row.id, scope.row.show)"><span class="m-l-5">显示</span></el-button>
|
||
|
|
<el-button type="warning" icon="el-icon-edit"
|
||
|
|
@click="$router.replace(`/spu/edit/${scope.row.id}`)">编辑</el-button>
|
||
|
|
<el-button type="danger" icon="el-icon-delete" @click="deleteSpu([scope.row.id])">删除</el-button>
|
||
|
|
</el-button-group>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<!-- 分页 -->
|
||
|
|
<el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
|
||
|
|
:total="spuListArr.length">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { countSelIdArr } from '@/utils'
|
||
|
|
import SelectionShopId from '@/components/SelectionShopId'
|
||
|
|
import SelectionPath from '@/components/SelectionPath'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Spu',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
pageSize: 30, // 每页显示记录条数
|
||
|
|
currentPage: 1, // 当前页
|
||
|
|
form: {
|
||
|
|
shop_id: '',
|
||
|
|
path: ''
|
||
|
|
},
|
||
|
|
tempSort: ''// 临时记录 商品排序序号
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
SelectionShopId,
|
||
|
|
SelectionPath
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
// 获取商品列表
|
||
|
|
spuList () {
|
||
|
|
return this.$store.state.spuList
|
||
|
|
},
|
||
|
|
// 获取分类列表
|
||
|
|
categoryList () {
|
||
|
|
return this.$store.state.categoryList
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 按照shop_id path条件过滤 商品列表
|
||
|
|
* @return: 商品列表
|
||
|
|
*/
|
||
|
|
spuListArr () {
|
||
|
|
// 过滤出对应商铺的商品
|
||
|
|
let pList = this.spuList
|
||
|
|
if (this.form.shop_id !== '') { // 如果不是"所有商铺" 则按shop_id过滤
|
||
|
|
pList = pList.filter((item) => item.shop_id === this.form.shop_id)
|
||
|
|
}
|
||
|
|
// 过滤出 分类已经被删除的商品 （未分类）
|
||
|
|
if (this.form.path === 'none') {
|
||
|
|
const list = pList.filter((item) => {
|
||
|
|
let t = true
|
||
|
|
for (let index = 0; index < this.categoryList.length; index++) {
|
||
|
|
if (this.categoryList[index].path === item.path) {
|
||
|
|
t = false
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return t
|
||
|
|
})
|
||
|
|
return list
|
||
|
|
} else if (this.form.path !== '') {
|
||
|
|
var pattern = this.form.path // selection path分类条件
|
||
|
|
// 对特殊字符进行转义，以防止它们影响正则表达式的匹配
|
||
|
|
var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
||
|
|
// 构建动态正则表达式对象
|
||
|
|
var regexPattern = new RegExp('^' + escapedPattern + '(-|$)')
|
||
|
|
const list = pList.filter((item) => {
|
||
|
|
let t = false
|
||
|
|
for (let index = 0; index < this.categoryList.length; index++) { // 先确保 商品的path 在分类列表path中是存在的
|
||
|
|
if (this.categoryList[index].path === item.path) {
|
||
|
|
t = true
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (t) {
|
||
|
|
return regexPattern.test(item.path)
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return list
|
||
|
|
} else {
|
||
|
|
return pList // 所有分类显示所有商品
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
countSelIdArr,
|
||
|
|
// 搜索标签
|
||
|
|
handleClose (tag) {
|
||
|
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
|
||
|
|
},
|
||
|
|
showInput () {
|
||
|
|
this.inputVisible = true
|
||
|
|
this.$nextTick(_ => {
|
||
|
|
this.$refs.saveTagInput.$refs.input.focus()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleInputConfirm () {
|
||
|
|
const inputValue = this.inputValue
|
||
|
|
if (inputValue) {
|
||
|
|
this.dynamicTags.push(inputValue)
|
||
|
|
}
|
||
|
|
this.inputVisible = false
|
||
|
|
this.inputValue = ''
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 跳转到编辑页面
|
||
|
|
*/
|
||
|
|
toEditPage () {
|
||
|
|
const selId = this.countSelIdArr(this.$refs.myTable.selection)
|
||
|
|
switch (selId.length) {
|
||
|
|
case 0:
|
||
|
|
this.$message.error('请选择一条需要编辑的记录')
|
||
|
|
break
|
||
|
|
case 1:
|
||
|
|
this.$router.push('/register/edit/' + selId['0'])
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
this.$message.error('只能选择一条记录')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 删除spu
|
||
|
|
*/
|
||
|
|
deleteSpu (idArr) {
|
||
|
|
this.$store.dispatch('fetchDelSpu', idArr)
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 排序input失焦 更新数据库的排序
|
||
|
|
* @param {*} id 商品id
|
||
|
|
* @param {*} sort 排序序号
|
||
|
|
*/
|
||
|
|
async blurOrder (id, sort) {
|
||
|
|
if (this.tempSort !== sort) { // 失焦时 和 之前点击时 排序做一下对比 有更新 再向api提交数据
|
||
|
|
this.form.id = id
|
||
|
|
this.form.sort = sort
|
||
|
|
const res = await this.$store.dispatch('fetchOrderSpu', this.form)
|
||
|
|
if (res.data.status === 1) {
|
||
|
|
this.$router.push({ path: '/spu/index', query: { refresh: Date.now() } })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 设置前端是否显示 商品
|
||
|
|
* @param {*} id 商品id
|
||
|
|
* @param {*} show 0隐藏 1显示
|
||
|
|
*/
|
||
|
|
async handeleShow (id, show) {
|
||
|
|
this.form.id = id
|
||
|
|
if (show === '0') {
|
||
|
|
this.form.show = '1'
|
||
|
|
} else {
|
||
|
|
this.form.show = '0'
|
||
|
|
}
|
||
|
|
const res = await this.$store.dispatch('fetchShowSpu', this.form)
|
||
|
|
if (res.data.status === 1) {
|
||
|
|
this.$router.push({ path: '/spu/index', query: { refresh: Date.now() } })
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 设置前端是否推荐 商品
|
||
|
|
* @param {*} id 商品id
|
||
|
|
* @param {*} recommend 0推荐 1不推荐
|
||
|
|
*/
|
||
|
|
async handeleRecommend (id, recommend) {
|
||
|
|
this.form.id = id
|
||
|
|
if (recommend === '0') {
|
||
|
|
this.form.recommend = '1'
|
||
|
|
} else {
|
||
|
|
this.form.recommend = '0'
|
||
|
|
}
|
||
|
|
const res = await this.$store.dispatch('fetchRecommendSpu', this.form)
|
||
|
|
if (res.data.status === 1) {
|
||
|
|
this.$router.push({ path: '/spu/index', query: { refresh: Date.now() } })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
},
|
||
|
|
filters: {
|
||
|
|
countSelIdArr
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "@/styles/theme.scss";
|
||
|
|
|
||
|
|
i {
|
||
|
|
font-size: 18px !important;
|
||
|
|
margin-right: 12px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
</style>
|