文件

672 行
29 KiB
HTML
可执行文件

<!--[1.6.48]-->
<style>
.chooseGoods {
width: 100%;
box-sizing: border-box;
height: calc(100vh - 190px);
}
.selected-goods {
box-sizing: border-box;
}
.chooseGoodsTables {
margin: 0 20px 20px 0;
display: inline-block;
vertical-align: top;
}
.max-dialog-content {
margin-left: 160px;
height: calc(100vh - 65px);
box-sizing: border-box;
margin-bottom: 0;
}
.goods-img {
max-width: 32px;
max-height: 32px;
}
#giftGoods .el-pagination {
border: 1px solid #ebeef5;
border-top: 0;
padding: 5px;
}
#giftGoods .max-dialog-content .el-dialog__footer {
padding: 0 20px 0;
}
#giftGoods .max-dialog-content .el-dialog__body {
padding: 10px 20px;
}
#giftGoods .dialog-footer {
text-align: center;
}
</style>
<div id="giftGoods" v-cloak>
<el-form :inline="true" size="small">
<el-form-item>
<el-input v-model="gift_keyword" clearable placeholder="请输入商品名称"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="select_state" clearable placeholder="赠品状态">
<el-option v-for="item in stateList" :key="item.value"
:label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="timeData"
style="margin-top: 1px"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchGifts" size="small" plain>搜索</el-button>
</el-form-item>
<el-form-item>
<el-button v-if="operate.chooseGoodsJoinGifts"
type="primary"
@click="addSendGoods"
size="small"
plain>添加赠品
</el-button>
</el-form-item>
</el-form>
<!-- 赠品列表 -->
<template>
<el-table :data="giftsList" border align="center" size="small" style="width: 100%">
<el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
<el-table-column align="center" prop="goods_name" label="商品名称" min-width="100px"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="sku_name" label="商品规格" min-width="100px"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="remain_inventory" label="赠品库存" min-width="100px"></el-table-column>
<el-table-column align="center" prop="goods_num" label="剩余库存" min-width="100px"></el-table-column>
<el-table-column align="center" prop="created_at" label="添加时间" min-width="130px"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" label="赠品状态" min-width="70px">
<template slot-scope="scope">
<el-switch v-model="scope.row.status"
active-value="1"
inactive-value="0"
:disabled="!operate.updateGiftsStatus"
@change="switchChange(scope.$index)">
</el-switch>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="130px">
<template slot-scope="scope">
<el-button v-if="operate.updateGiftsInventory"
type="text"
size="mini" @click="goodsSet(scope.row)">库存设置
</el-button>
<el-button v-if="operate.deleteGiftsRecord"
type="text"
size="mini"
style="color: #999;"
@click="deleteGoods(scope.row.gifts_id)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination @current-change="CurrentChange"
:current-page="currentPage"
:page-sizes="[10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</template>
<!-- 库存设置 -->
<el-dialog title="库存设置" :append-to-body="true" :visible.sync="goodsSetDialog" width="30%">
<el-form label-width="100px" size="small">
<el-form-item label="商品库存:">
<span>{{giftsSetForm.goods_num}}</span>
<span style="color: #999">该库存不包含赠品库存</span>
</el-form-item>
<el-form-item label="赠品库存:">
<span>{{giftsSetForm.remain_inventory}}</span>
</el-form-item>
<el-form-item label="操作:">
<el-radio v-model="giftsSetForm.operate_type" :label="1">增加库存</el-radio>
<el-radio v-model="giftsSetForm.operate_type" :label="0">减少库存</el-radio>
</el-form-item>
<el-form-item label="数量:">
<el-input style="width: 150px"
v-model="giftsSetForm.operate_num"
oninput="value=this.value.replace(/^[0]|\D/,'')"
placeholder="请输入操作数量"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="setOK">确 定</el-button>
</span>
</el-dialog>
<!-- 选择商品 -->
<el-dialog title="选择商品"
:visible.sync="chooseGoodsDialog"
:modal-append-to-body="false"
:append-to-body="false"
:top="'65px'"
:width="'calc(100vw - 160px)'"
:custom-class="'max-dialog-content'"
:close-on-press-escape="false"
:before-close="closeChild"
:close-on-click-modal="false">
<el-scrollbar class="chooseGoods">
<!-- 商品信息 -->
<div class="chooseGoodsTables">
<el-form :inline="true">
<el-form-item label="商品信息">
<el-input v-model="goods_keyword" size="small"
@keydown.enter.exact.native.prevent="searchChooseGoods"
clearable placeholder="请输入商品名称">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchChooseGoods" size="small" plain>搜索</el-button>
</el-form-item>
</el-form>
<!-- 商品信息表格 -->
<template>
<el-table :data="chooseGoodsTable" border size="mini">
<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="商品名称"></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="sku_name" label="商品规格"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="goods_num" label="库存"></el-table-column>
<el-table-column align="center" prop="retail_price" label="零售价"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="text"
size="mini"
:disabled="alreadyChoose.length>=max_choose_num?true:false"
@click="chooseGoods(scope.row)"
v-if="checkGoods(scope.row)">选择
</el-button>
<el-button v-else type="text" style="color: #666;" size="mini">已选</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- 分页 -->
<el-pagination @current-change="chooseGoodsCurrentChange"
:current-page="chooseGoodsCurrentPage"
:page-sizes="[10]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="chooseGoodsTotal">
</el-pagination>
</div>
<!-- 已选商品 -->
<div class="chooseGoodsTables">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="已选商品">
<el-input v-model="select_keyword"
size="small"
clearable
@input="goodsNull"
@keydown.enter.exact.native.prevent="searchChooseGoodsTable"
placeholder="请输入商品名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchChooseGoodsTable" size="small" plain>搜索</el-button>
<el-button v-if="alreadyChoose.length" @click="toClearChoose" size="small">清空已选</el-button>
</el-form-item>
</el-form>
<el-scrollbar class="selected-goods">
<el-table :data="showAlreadyChoose" border size="mini" height="calc(100vh - 273px)">
<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
<el-table-column align="center" prop="goods_name" label="商品名称"
show-overflow-tooltip></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="sku_name" label="商品规格"
show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="goods_num" label="库存"></el-table-column>
<el-table-column align="center" prop="retail_price" label="成本价"></el-table-column>
<el-table-column align="center" label="赠品库存">
<template slot-scope="scope">
<el-input v-model="scope.row.remain_inventory"
oninput="value=this.value.replace(/^[0]|\D/,'')"
size="small" clearable
@blur="inventoryOver(scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="deleteSelected(scope.$index,scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</el-scrollbar>
<div slot="footer" class="dialog-footer">
<el-button type="primary"
round
@click="chooseAlready"
:disabled="alreadyChoose.length==0"
size="small">确定选择({{alreadyChoose.length}}/{{max_choose_num}})
</el-button>
</div>
</el-dialog>
</div>
<script type="text/javaScript">
var giftGoods = new Vue({
el: "#giftGoods",
data: function () {
return {
gift_keyword: '',//赠品列表搜索关键词
goods_keyword: '', //可选商品列表搜索关键词
giftsList: [], //赠品库表格
stateList: [
{ // 下拉框
value: '1',
label: '开启'
},
{
value: '0',
label: '关闭'
}
],
max_choose_num: 100,//最大选择数量
select_state: '', // 下拉框值
timeData: [], //选择的时间数组
chooseGoodsTable: [], //可选商品数组
goodsStatus: '', //商品状态
goodsChange: '1', // 商品单选
goodsNum: '', //商品数量
goodsSetDialog: false, //商品库存弹框
chooseGoodsDialog: false, //选择商品弹框
goodsInfoTable: [], // 商品信息表格
currentPage: 1, //当前页
chooseGoodsCurrentPage: 1, //可选商品当前页
pageSize: 10, //每页展示条信息
total: 0, //总计数据
chooseGoodsTotal: 0, //可选商品总计
giftsSetForm: {
gifts_id: 0,//赠品库id
goods_num: '',//赠品数量
remain_inventory: '',//系统数量
operate_num: '',//操作数量
operate_type: 1,//操作类型 1增加 2减少
},
chooseGoodsObj: {},//已选商品id信息
operate: {},//操作权限
chooseGoodsOK: true, //选择商品
alreadyChoose: [], //已选商品列表
showAlreadyChoose: [], //展示已选商品列表
select_keyword: '', //已选列表搜索关键词
}
},
created() {
this.getGoodsGiftBack();
//获取操作权限
var auth_list = {
updateGiftsStatus: '/index.php/Retail/GoodsGifts/updateGiftsStatus',
deleteGiftsRecord: '/index.php/Retail/GoodsGifts/deleteGiftsRecord',
chooseGoodsJoinGifts: '/index.php/Retail/GoodsGifts/chooseGoodsJoinGifts',
updateGiftsInventory: '/index.php/Retail/GoodsGifts/updateGiftsInventory'
};
$.ajax({
url: "{:U('Retail/Component/checkOperateAuth')}",
type: "post",
data: {
auth_list: JSON.stringify(auth_list),
},
success: (res) => {
if (res.status == 1) {
this.operate = res.data;
}
}
})
},
methods: {
//关闭选择赠品弹框
closeChild() {
if (this.alreadyChoose.length > 0) {
this.$confirm("关闭后所选商品将清空,确认关闭?", "关闭提示", {
confirmButtonText: '确认关闭',
cancelButtonText: '取消关闭',
type: 'info'
}).then(() => {
this.chooseGoodsDialog = false;
this.clearChoose();
}).catch(() => {
})
} else {
this.chooseGoodsDialog = false;
}
},
//即将清空已选
toClearChoose() {
this.$confirm("确认清空已选商品列表?", "关闭提示", {
confirmButtonText: '清空',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
this.clearChoose();
}).catch(() => {
})
},
//清空已选列表
clearChoose() {
this.alreadyChoose = [];
this.showAlreadyChoose = [];
this.chooseGoodsObj = {};
},
//获取赠品库列表
getGoodsGiftBack() {
$.ajax({
type: 'post',
url: '/index.php/Retail/GoodsGifts/getGoodsGiftBack',
data: {
page: this.currentPage,
pageSize: 10,
start_time: this.timeData ? this.timeData[0] : '',
end_time: this.timeData ? this.timeData[1] : '',
status: this.select_state,
search: this.gift_keyword,
},
success: res => {
if (res.status == 1) {
this.giftsList = res.data.list;
this.total = parseInt(res.data.total);
}
if (res.status == 0) {
console.log(res);
this.giftsList = [];
this.total = 0;
}
}
})
},
//获取可选商品
adminCanChooseBySku() {
$.ajax({
type: 'post',
url: '/index.php/Retail/GoodsGifts/adminCanChooseBySku',
data: {
keyword: this.goods_keyword,
page: this.chooseGoodsCurrentPage,
pageSize: 10,
},
success: res => {
if (res.status == 1) {
this.chooseGoodsTable = [];
this.chooseGoodsTable = res.data;
this.chooseGoodsTotal = parseInt(res.total);
}
}
})
},
//搜索赠品
searchGifts() {
this.currentPage = 1;
this.getGoodsGiftBack()
},
//已选列表搜索
searchChooseGoodsTable() {
this.showAlreadyChoose = [];
if (this.select_keyword == '') {
this.showAlreadyChoose = this.alreadyChoose;
} else {
for (let i = 0; i < this.alreadyChoose.length; i++) {
if (this.fuzzySearch(this.alreadyChoose[i].goods_name, this.select_keyword)) {
this.showAlreadyChoose.push(this.alreadyChoose[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;
}
},
//清空已选搜索关键词
goodsNull(e) {
if (!e) {
this.showAlreadyChoose = this.alreadyChoose
}
},
//修改赠品状态
switchChange(index) {
$.ajax({
type: 'post',
url: '/index.php/Retail/GoodsGifts/updateGiftsStatus',
data: {
gifts_id: this.giftsList[index].gifts_id,
},
success: res => {
if (res.status == 1) {
console.log(res);
this.$message({
message: '修改成功',
type: 'success'
});
} else {
var giftsList = JSON.parse(JSON.stringify(this.giftsList));
giftsList[index].status = giftsList[index].status == 1 ? '0' : '1';
this.giftsList = [];
this.giftsList = giftsList;
this.$message.error(res.msg);
}
}
})
},
//显示选择赠品
addSendGoods() {
this.chooseGoodsDialog = true;
this.adminCanChooseBySku();
},
//删除赠品
deleteGoods(id) {
this.$confirm('是否删除该商品并恢复库存?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
type: 'post',
url: '/index.php/Retail/GoodsGifts/deleteGiftsRecord',
data: {
gifts_id: id,
},
success: res => {
if (res.status == 1) {
console.log(res);
this.$message({
message: '删除成功',
type: 'success'
});
} else {
this.$message.error('删除失败');
}
}
})
this.getGoodsGiftBack()
}).catch(() => {
});
},
//显示设置赠品库存
goodsSet(item) {
this.giftsSetForm = {
gifts_id: item.gifts_id,
goods_num: item.goods_num * 1,
remain_inventory: item.remain_inventory * 1,
operate_num: '',
operate_type: 1,
};
this.goodsSetDialog = true;
},
//搜索待选列表
searchChooseGoods() {
this.chooseGoodsCurrentPage = 1;
this.adminCanChooseBySku();
},
//判断商品是否可选
checkGoods(item) {
return !this.chooseGoodsObj[`${item.goods_id},${item.sku_id}`];
},
//点击了选择商品
chooseGoods(item) {
item = JSON.parse(JSON.stringify(item));
this.chooseGoodsObj[`${item.goods_id},${item.sku_id}`] = true;
this.alreadyChoose.unshift(item);
if (this.select_keyword) {
if (this.fuzzySearch(item.goods_name, this.select_keyword)) {
this.showAlreadyChoose.unshift(item);
}
} else {
this.showAlreadyChoose.unshift(item);
}
var chooseGoodsTable = JSON.parse(JSON.stringify(this.chooseGoodsTable));
this.chooseGoodsTable = [];
this.chooseGoodsTable = chooseGoodsTable;
},
//删除已选商品
deleteSelected(index, item) {
delete this.chooseGoodsObj[`${item.goods_id},${item.sku_id}`];
this.alreadyChoose.splice(index, 1);
this.showAlreadyChoose.splice(index, 1);
var chooseGoodsTable = JSON.parse(JSON.stringify(this.chooseGoodsTable));
this.chooseGoodsTable = [];
this.chooseGoodsTable = chooseGoodsTable;
},
// 赠品列表页码改变
CurrentChange(val) {
this.currentPage = val;
this.getGoodsGiftBack();
},
//可选商品页码改变
chooseGoodsCurrentChange(val) {
this.chooseGoodsCurrentPage = val;
this.adminCanChooseBySku();
},
//已选列表输入库存失焦判断库存
inventoryOver(x) {
if (x.remain_inventory > x.goods_num) {
this.$message({
message: '库存不足',
type: 'warning',
});
this.showAlreadyChoose.some((item) => {
if (item.goods_id == x.goods_id) {
item.remain_inventory = ''
}
});
}
},
// 提交添加赠品
chooseAlready() {
this.$confirm("确认将已选商品添加到赠品库?", "提示", {
confirmButtonText: '确认添加',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
var arr = [];
for (var i in this.alreadyChoose) {
arr.push({
sale_goods_id: this.alreadyChoose[i].sale_goods_id,
goods_id: this.alreadyChoose[i].goods_id,
sku_id: this.alreadyChoose[i].sku_id,
remain_inventory: this.alreadyChoose[i].remain_inventory ? this.alreadyChoose[i].remain_inventory : 0,
})
}
console.log(arr);
$.ajax({
type: 'post',
url: '/index.php/Retail/GoodsGifts/chooseGoodsJoinGifts',
data: {
gifts_json: JSON.stringify(arr),
},
success: res => {
if (res.status == 1) {
this.$message({
message: res.msg,
type: 'success',
});
this.clearChoose();
this.chooseGoodsDialog = false;
this.getGoodsGiftBack()
} else {
this.$message({
message: res.msg,
type: 'error',
});
}
}
})
}).catch(() => {
})
},
//保存修改赠品库存操作
setOK() {
$.ajax({
type: 'post',
url: '/index.php/Retail/GoodsGifts/updateGiftsInventory',
data: {
gifts_id: this.giftsSetForm.gifts_id,
remain_inventory: this.giftsSetForm.operate_num,
type: this.giftsSetForm.operate_type,
},
success: res => {
if (res.status == 1) {
this.getGoodsGiftBack();
this.$message({
message: '库存设置成功',
type: 'success'
});
this.goodsSetDialog = false;
} else {
this.$message.error('库存设置失败');
}
}
})
},
}
})
</script>