225 行
9.3 KiB
JavaScript
可执行文件
225 行
9.3 KiB
JavaScript
可执行文件
/**
|
|
* @m-choose-class 选择分类
|
|
* @m-show-choose-class 显示已选中的分类列表
|
|
*/
|
|
Vue.component('m-choose-class', {
|
|
template: `<el-dialog :append-to-body="true" title="选择分类"
|
|
:visible.sync="showChooseClass"
|
|
width="80%" :top="'50px'"
|
|
:before-close="closeDialog"
|
|
custom-class="customer-el-dialog__body"
|
|
:close-on-click-modal="false">
|
|
<el-scrollbar style="height: calc(100vh - 240px);padding-right: 8px">
|
|
<div style="padding:5px 0 15px 0px">
|
|
<el-input size="small" style="width: 190px"
|
|
@keydown.enter.exact.native.prevent="pageChange(1)"
|
|
v-model="searchForm.class_name" clearable
|
|
placeholder="分类名称"></el-input>
|
|
<el-button type="primary" @click="pageChange(1)" size="small">搜索</el-button>
|
|
</div>
|
|
<template>
|
|
<el-table border :data="dataList" size="small" height="400" :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
|
|
<el-table-column type="index" label="序号" fixed="left" width="50" align="center"></el-table-column>
|
|
<el-table-column align="center" prop="class_name" label="分类名称" min-width="120"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column align="center" prop="goods_num" label="商品数量" min-width="80"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" align="center" fixed="right" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="seeGoods(scope.row)">查看商品</el-button>
|
|
<template v-if="!refresh">
|
|
<el-button size="mini" v-if="verifyUsed(scope.row.id)"
|
|
type="text" style="color: #aaaaaa">已选</el-button>
|
|
<el-button size="mini" :disabled="chooseIdList.length==20?true:false"
|
|
v-else type="text" @click="chooseIt(scope.row)">选择</el-button>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="limitChange"
|
|
@current-change="pageChange"
|
|
:current-page="searchForm.page"
|
|
:page-size="searchForm.limit"
|
|
:total="currentLen"
|
|
:pager-count="5"
|
|
:page-sizes="[10,20,30,40,50,60,70,80,90,100]"
|
|
layout="total, sizes, prev, pager, next, jumper">
|
|
</el-pagination>
|
|
</template>
|
|
</el-scrollbar>
|
|
<div style="text-align: center;padding-top: 10px;border-top: 1px solid #DCDFE6;">
|
|
<p style="font-size: 12px;color: #aaaaaa">已选 {{chooseIdList.length}}/20</p>
|
|
<el-button type="primary" size="medium" @click="closeDialog(1)">确定</el-button>
|
|
</div>
|
|
</el-dialog>`,
|
|
props: {
|
|
'showChooseClass': {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
'usedIdList': {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
},
|
|
},//已选ID列表
|
|
'storeId': {
|
|
type: String,
|
|
default: '',
|
|
},//门店ID
|
|
},
|
|
data() {
|
|
return {
|
|
searchForm: {
|
|
exists_class_id_arr: '',
|
|
class_name: '',
|
|
store_id: '',
|
|
page: 1,
|
|
limit: 10,
|
|
},
|
|
currentLen: 0,
|
|
dataList: [],
|
|
chooseList: [],//本次已选分类列表
|
|
chooseIdList: [],//本次已选分类ID列表
|
|
refresh: false,
|
|
}
|
|
},
|
|
methods: {
|
|
closeDialog(type) {
|
|
console.log(this.chooseList);
|
|
this.$emit('close', type === 1 ? this.chooseList : []);
|
|
},
|
|
seeGoods(item) {
|
|
this.$root.$refs.base.chooseGoods({
|
|
goods_ids: [],
|
|
store_id: this.storeId,
|
|
class_id: item.id_list,
|
|
needChoose: false,
|
|
});
|
|
},
|
|
verifyUsed(id) {
|
|
return this.chooseIdList.indexOf(id) >= 0 ? true : false;
|
|
},
|
|
chooseIt(item) {
|
|
this.chooseList.push(item);
|
|
this.chooseIdList.push(item.id);
|
|
this.refresh = true;
|
|
this.$nextTick(() => {
|
|
this.refresh = false;
|
|
})
|
|
},
|
|
// 切换记录每页数量
|
|
limitChange(val) {
|
|
this.searchForm.limit = val;
|
|
this.searchForm.page = 1;
|
|
this.getClassList();
|
|
},
|
|
// 切换记录页数
|
|
pageChange(val) {
|
|
this.searchForm.page = val;
|
|
this.getClassList();
|
|
},
|
|
// 分类列表
|
|
getClassList() {
|
|
$.ajax({
|
|
url: '/index.php/Retail/Mcoupon/appointGoodsClass',
|
|
type: "post",
|
|
data: this.searchForm,
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.dataList = res.data.list;
|
|
this.currentLen = res.data.count * 1;
|
|
} else {
|
|
this.dataList = [];
|
|
this.currentLen = 0;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
showChooseClass(n, o) {
|
|
if (n) {
|
|
this.searchForm.store_id = this.storeId;
|
|
this.$nextTick(() => {
|
|
this.searchForm.exists_class_id_arr = this.chooseIdList.join(',');
|
|
this.pageChange(1);
|
|
})
|
|
} else {
|
|
this.searchForm = {
|
|
exists_class_id_arr: '',
|
|
class_name: '',
|
|
store_id: '',
|
|
page: 1,
|
|
limit: 10,
|
|
};
|
|
this.currentLen = 0;
|
|
this.dataList = [];
|
|
this.chooseList = [];//本次已选分类列表
|
|
this.chooseIdList = [];//本次已选分类ID列表
|
|
this.refresh = false;
|
|
}
|
|
},
|
|
usedIdList(n) {
|
|
this.chooseIdList = JSON.parse(JSON.stringify(n));
|
|
}
|
|
},
|
|
});
|
|
|
|
Vue.component('m-show-choose-class', {
|
|
template: `<el-table :data="classList" border size="small" :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
|
|
<el-table-column type="index" fixed="left" label="序号" align="center"></el-table-column>
|
|
<el-table-column prop="class_name" label="分类名称" align="center" min-width="120px" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="goods_num" label="商品数量" align="center" min-width="80" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" align="center" fixed="right" width="120px">
|
|
<template slot-scope="scope">
|
|
<button type="button" @click="seeGoods(scope.row)"
|
|
class="el-button el-button--text el-button--mini">
|
|
<span>查看商品</span>
|
|
</button>
|
|
<el-button type="text" v-if="operateState" @click="removeClass(scope.$index,scope.row.class_id)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>`,
|
|
props: {
|
|
'classList': {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
'storeId': {
|
|
type: String,
|
|
default: '',
|
|
},//门店ID
|
|
'operateState': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//操作的权限
|
|
},
|
|
data() {
|
|
return {
|
|
formDis: true,
|
|
}
|
|
},
|
|
methods: {
|
|
//查看商品
|
|
seeGoods(item) {
|
|
this.$root.$refs.base.chooseGoods({
|
|
goods_ids: [],
|
|
store_id: this.storeId,
|
|
class_id: item.id_list,
|
|
needChoose: false,
|
|
});
|
|
},
|
|
//移除已选商品
|
|
removeClass(index, class_id) {
|
|
this.classList.splice(index, 1);
|
|
this.$nextTick(() => {
|
|
this.$emit('del', class_id);
|
|
});
|
|
},
|
|
},
|
|
});
|