371 行
17 KiB
JavaScript
可执行文件
371 行
17 KiB
JavaScript
可执行文件
Vue.component('template-choose-store-goods', {
|
|
template: `<div class="choose-store-goods-box" v-cloak>
|
|
<div class="chooseGoods">
|
|
<!-- 待选商品信息 -->
|
|
<div class="chooseGoodsTables">
|
|
<el-form :inline="true">
|
|
<el-form-item label="商品信息">
|
|
<el-input v-model="searchForm.keyword" size="small"
|
|
@keydown.enter.exact.native.prevent="searchGoods"
|
|
clearable placeholder="请输入商品名称">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="searchGoods" size="small" plain>搜索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<!-- 商品信息表格 -->
|
|
<template>
|
|
<el-table :data="goodsList" border size="mini">
|
|
<el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
|
|
<el-table-column align="center" prop="goods_name" show-overflow-tooltip
|
|
label="商品名称" min-width="120px"></el-table-column>
|
|
<el-table-column align="center" label="图片" width="60px">
|
|
<template slot-scope="scope">
|
|
<el-image class="goods-img" :src="scope.row.goods_img?scope.row.goods_img:''">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="goods_number" width="100" label="货号"></el-table-column>
|
|
<el-table-column align="center" prop="goods_num" width="80px" label="库存"></el-table-column>
|
|
<el-table-column align="center" prop="retail_price" width="90px" label="零售价"></el-table-column>
|
|
<el-table-column align="center" prop="online_price" width="90px" label="商城价"></el-table-column>
|
|
<el-table-column align="center" label="操作" width="80px">
|
|
<template slot-scope="scope">
|
|
<el-button type="text"
|
|
size="mini"
|
|
:disabled="chooseGoodsList.length>=max_choose_num?true:false"
|
|
@click="chooseGoods(scope.row)"
|
|
v-if="checkGoods(scope.row.id)">选择
|
|
</el-button>
|
|
<el-button v-else type="text" style="color: #666;" size="mini">已选</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<div slot="empty" v-if="!loading">暂无数据</div>
|
|
<div slot="empty" v-else><span class="el-icon-loading"></span></div>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination @size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="searchForm.page"
|
|
:page-sizes="[10]"
|
|
:page-size="searchForm.limit"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="currentLen">
|
|
</el-pagination>
|
|
</template>
|
|
</div>
|
|
<!-- 已选商品 -->
|
|
<div class="chooseGoodsTables">
|
|
<el-form :inline="true" class="demo-form-inline" size="small">
|
|
<el-form-item label="已选商品">
|
|
<el-input v-model="select_keyword"
|
|
clearable
|
|
@input="goodsNull"
|
|
@keydown.enter.exact.native.prevent="searchChooseGoods"
|
|
placeholder="请输入商品名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="searchChooseGoods" plain>搜索</el-button>
|
|
<el-button v-if="chooseGoodsList.length" @click="toClearChoose">清空已选</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="selected-goods">
|
|
<el-table :data="showChooseGoodsList" border size="mini" height="calc(100vh - 286px)">
|
|
<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
|
|
<el-table-column align="center" prop="goods_name" show-overflow-tooltip
|
|
label="商品名称" min-width="120px"></el-table-column>
|
|
<el-table-column align="center" label="图片" width="60px">
|
|
<template slot-scope="scope">
|
|
<el-image class="goods-img" :src="scope.row.goods_img?scope.row.goods_img:''">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="goods_number" width="100" label="货号"></el-table-column>
|
|
<el-table-column align="center" prop="goods_num" width="80px" label="库存"></el-table-column>
|
|
<el-table-column align="center" prop="retail_price" width="90px" label="零售价"></el-table-column>
|
|
<el-table-column align="center" prop="online_price" width="90px" label="商城价"></el-table-column>
|
|
<template v-for="item in input_field">
|
|
<el-table-column align="center" width="100px"
|
|
:prop="item.key" :label="item.title">
|
|
<template slot-scope="scope">
|
|
<el-input type="text" size="mini" v-model="scope.row[item.key]"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<el-table-column align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="mini" @click="deleteSelected(scope.$index)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<div slot="empty" v-if="!loading">未选择商品</div>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary"
|
|
round
|
|
@click="sureChooseGoods"
|
|
:disabled="chooseGoodsList.length==0?true:false"
|
|
size="small">确定选择({{chooseGoodsList.length}}/{{max_choose_num}})
|
|
</el-button>
|
|
</div>
|
|
</div>`,
|
|
props: {
|
|
'max_choose_num': {
|
|
type: Number,
|
|
default: 1,
|
|
},//最大可选商品数量
|
|
'show': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//为了重新渲染数据
|
|
'store_id': {
|
|
type: Number,
|
|
default: 0,
|
|
},//门店ID，可不传
|
|
'online_state': {
|
|
type: String,
|
|
default: '',
|
|
},//商城出售状态 0非商城出售 1商城出售
|
|
'status': {
|
|
type: String,
|
|
default: '',
|
|
},//商品上下架状态 0上架 1下架
|
|
'input_field': {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
},
|
|
},//其他显示字段
|
|
'distribution': {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
searchForm: {
|
|
keyword: '',
|
|
page: 1,
|
|
limit: 10,
|
|
},//待选商品列表搜索选项
|
|
currentLen: 0,//待选商品总数量
|
|
loading: false,
|
|
goodsList: [],//待选商品列表
|
|
chooseGoodsList: [],//已选商品列表
|
|
showChooseGoodsList: [],//展示的已选商品列表
|
|
select_keyword: '',
|
|
chooseGoodsObj: {},//已选商品id对象
|
|
}
|
|
},
|
|
methods: {
|
|
//即将清空已选
|
|
toClearChoose() {
|
|
this.$confirm("确认清空已选商品列表？", "关闭提示", {
|
|
confirmButtonText: '清空',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.chooseGoodsList = [];
|
|
this.showChooseGoodsList = [];
|
|
this.chooseGoodsObj = {};
|
|
var goodsList = JSON.parse(JSON.stringify(this.goodsList));
|
|
this.goodsList = [];
|
|
this.goodsList = goodsList;
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
//确认选择商品
|
|
sureChooseGoods() {
|
|
let chooseGoodsList = JSON.parse(JSON.stringify(this.chooseGoodsList));
|
|
let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,2})$/;
|
|
if (this.input_field.length) {
|
|
for (let i = 0; i < chooseGoodsList.length; i++) {
|
|
for (let j = 0; j < this.input_field.length; j++) {
|
|
let a = chooseGoodsList[i][this.input_field[j].key];
|
|
switch (this.input_field[j].type) {
|
|
case 'rate':
|
|
if (((this.input_field[j].required || a != ''
|
|
&& a != undefined)
|
|
&& !reg.test(a))
|
|
|| (a && a * 1 < 0.01 || a * 1 > 99)) {
|
|
return this.$message.error(`${this.input_field[j].title}设置有误`);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.chooseGoodsList = [];
|
|
this.showChooseGoodsList = [];
|
|
this.chooseGoodsObj = {};
|
|
this.select_keyword = '';
|
|
this.currentLen = 0;
|
|
this.$nextTick(function () {
|
|
this.$emit('select-goods', chooseGoodsList);
|
|
}.bind(this))
|
|
},
|
|
//清空已选搜索关键词
|
|
goodsNull(e) {
|
|
if (!e) {
|
|
this.showChooseGoodsList = this.chooseGoodsList
|
|
}
|
|
},
|
|
//判断商品是否可选
|
|
checkGoods(goods_id) {
|
|
return !this.chooseGoodsObj[goods_id];
|
|
},
|
|
//点击了选择商品
|
|
chooseGoods(item) {
|
|
item = JSON.parse(JSON.stringify(item));
|
|
this.chooseGoodsObj[item.id] = true;
|
|
this.chooseGoodsList.unshift(item);
|
|
if (this.select_keyword) {
|
|
if (this.fuzzySearch(item.goods_name, this.select_keyword)) {
|
|
this.showChooseGoodsList.unshift(item);
|
|
}
|
|
} else {
|
|
this.showChooseGoodsList.unshift(item);
|
|
}
|
|
var goodsList = JSON.parse(JSON.stringify(this.goodsList));
|
|
this.goodsList = [];
|
|
this.goodsList = goodsList;
|
|
},
|
|
//删除已选商品
|
|
deleteSelected(index) {
|
|
let goods_id = this.showChooseGoodsList[index].id;
|
|
delete this.chooseGoodsObj[goods_id];
|
|
this.showChooseGoodsList.splice(index, 1);
|
|
for (var i in this.chooseGoodsList) {
|
|
if (this.chooseGoodsList[i].id == goods_id) {
|
|
this.chooseGoodsList.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
delete goods_id;
|
|
var goodsList = JSON.parse(JSON.stringify(this.goodsList));
|
|
this.goodsList = [];
|
|
this.goodsList = goodsList;
|
|
},
|
|
//已选列表搜索
|
|
searchChooseGoods() {
|
|
this.showChooseGoodsList = [];
|
|
if (this.select_keyword == '') {
|
|
this.showChooseGoodsList = this.chooseGoodsList;
|
|
} else {
|
|
for (let i = 0; i < this.chooseGoodsList.length; i++) {
|
|
if (this.fuzzySearch(this.chooseGoodsList[i].goods_name, this.select_keyword)) {
|
|
this.showChooseGoodsList.push(this.chooseGoodsList[i]);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
//模糊搜索商品名称
|
|
fuzzySearch(name, keyword) {
|
|
if (keyword === '' || keyword === undefined) {
|
|
return true;
|
|
}
|
|
let len = 0;
|
|
let arr = String(keyword).split('');
|
|
for (let i in arr) {
|
|
console.log(arr[i]);
|
|
if (name.indexOf(arr[i]) != -1) {
|
|
len++;
|
|
}
|
|
}
|
|
if (len == arr.length) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
//准备搜索
|
|
searchGoods() {
|
|
this.searchForm.page = 1;
|
|
this.getCount();
|
|
this.getData();
|
|
},
|
|
//切换每页数量
|
|
handleSizeChange(val) {
|
|
this.searchForm.limit = val;
|
|
this.searchForm.page = 1;
|
|
this.getData();
|
|
},
|
|
//切换页数
|
|
handleCurrentChange(val) {
|
|
this.searchForm.page = val;
|
|
this.getData();
|
|
},
|
|
//获取商品列表
|
|
getData() {
|
|
this.goodsList = [];
|
|
this.loading = true;
|
|
$.ajax({
|
|
url: "/index.php/Retail/Component/getStoreGoodsList",
|
|
type: 'post',
|
|
data: {
|
|
store_id: this.store_id,
|
|
online_state: this.online_state,
|
|
status: this.status,
|
|
distribution: this.distribution ? 1 : 0,
|
|
...this.searchForm,
|
|
},
|
|
success: (res) => {
|
|
this.loading = false;
|
|
if (res.status == 1) {
|
|
this.goodsList = res.data;
|
|
}
|
|
},
|
|
error: (data) => {
|
|
console.log(data);
|
|
this.loading = false;
|
|
}
|
|
})
|
|
},
|
|
//获取商品总数量
|
|
getCount() {
|
|
$.ajax({
|
|
url: "/index.php/Retail/Component/getStoreGoodsCount",
|
|
type: 'post',
|
|
data: {
|
|
store_id: this.store_id,
|
|
online_state: this.online_state,
|
|
status: this.status,
|
|
...this.searchForm,
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.currentLen = res.count;
|
|
}
|
|
},
|
|
error: (data) => {
|
|
console.log(data);
|
|
}
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
show(n, o) {
|
|
//监听show的变化，重新渲染列表
|
|
if (n) {
|
|
this.getCount();
|
|
this.getData();
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
// console.log('created');
|
|
this.getCount();
|
|
this.getData();
|
|
},
|
|
}); |