<template>
<section>
<el-col :span="24">
<el-tabs v-model="activeName">
<el-tab-pane label="库存不足商品补货明细" name="1">
<el-table
:data="deficiencyData"
v-loading="loading"
size="mini"
style="width: 100%"
stripe
ref="deficiencyTable"
@selection-change="tableDeficiencyChange"
highlight-current-row
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column label="商品补货数量" label-class-name="tableTh" align="center">
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status==1">已执行</span>
<span v-else>初始</span>
</template>
</el-table-column>
<el-table-column prop="planTime" width="140" label="补货计划生成日期" align="center"></el-table-column>
<el-table-column prop="img" label="图片" align="center"></el-table-column>
<el-table-column prop="sku" width="140" label="SKU" align="center"></el-table-column>
<el-table-column prop="jybhl" width="100" label="建议补货量" align="center"></el-table-column>
<el-table-column prop="sjbhl" width="140px" label="实际补货量" align="center">
<template slot-scope="scope">
<template>
<el-button
class="editRankBtn"
v-if="!editDeficiencyIdsMap[scope.row.id]"
@dblclick.native.prevent="editDeficiencyChange(scope.row.id)"
type="text"
size="medium"
>{{scope.row.sjbhl}}</el-button>
<template v-if="editDeficiencyIdsMap[scope.row.id]">
<el-input-number
v-model="localDeficiencyCount"
:precision="0"
:min="0"
clearable
placeholder
/>
<i class="el-icon-check" @click="confirmDeficiencyChange(scope)"></i>
<i class="el-icon-close" @click="cancelDeficiencyChange(scope.row.id)"></i>
</template>
</template>
</template>
</el-table-column>
<el-table-column prop="sddm" width="100" label="商店代码" align="center"></el-table-column>
<el-table-column prop="sdmc" width="100" label="商店名称" align="center"></el-table-column>
</el-table-column>
<el-table-column label="商品基本信息" align="center" label-class-name="tableTh">
<el-table-column prop="spdm" width="100" label="商品代码" align="center"></el-table-column>
<el-table-column prop="spmc" width="160" label="商品名称" align="center"></el-table-column>
<el-table-column prop="ysmc" width="160" label="颜色名称" align="center"></el-table-column>
<el-table-column prop="cmmc" width="160" label="尺码名称" align="center"></el-table-column>
</el-table-column>
<el-table-column label="发货仓库与门店库存信息" align="center" label-class-name="tableTh">
<el-table-column prop="fczks" width="100" label="发仓在库数" align="center"></el-table-column>
<el-table-column prop="fcsds" width="100" label="发仓锁定数" align="center"></el-table-column>
<el-table-column prop="fckys" width="100" label="发仓可用数" align="center"></el-table-column>
<el-table-column prop="mdzks" width="100" label="门店在库数" align="center"></el-table-column>
<el-table-column prop="mdsds" width="100" label="门店锁定数" align="center"></el-table-column>
<el-table-column prop="mdzts" width="100" label="门店在途数" align="center"></el-table-column>
<el-table-column prop="mdthzt" width="100" label="门店退货在途" align="center"></el-table-column>
</el-table-column>
<el-table-column label="门店历史销信息" align="center" label-class-name="tableTh">
<el-table-column prop="qjzxl" width="100" label="期间总销量" align="center"></el-table-column>
<el-table-column prop="djrxl" width="100" label="店均日销量" align="center"></el-table-column>
<el-table-column prop="djrje" width="100" label="店均日金额" align="center"></el-table-column>
<el-table-column prop="sqll" label="售罄率" align="center"></el-table-column>
<el-table-column prop="qhl" label="欠货率" align="center"></el-table-column>
<el-table-column prop="skuxcb" width="100" label="SKU销存比" align="center"></el-table-column>
</el-table-column>
<el-table-column label="门店预测信息" align="center" label-class-name="tableTh">
<el-table-column prop="ycqjts" width="120" label="预测区间天数" align="center"></el-table-column>
<el-table-column prop="ycdjrxl" width="120" label="预测店均日销量" align="center"></el-table-column>
<el-table-column prop="ycdjrxl" width="120" label="预测店均日金额" align="center"></el-table-column>
<el-table-column prop="ycdjrje" width="140" label="匹配销售预测算法" align="center"></el-table-column>
<el-table-column prop="ppxsycsf" width="120" label="预测商品等级" align="center"></el-table-column>
<el-table-column prop="ycspdj" width="180" label="匹配商品等级陈列上限类型" align="center"></el-table-column>
<el-table-column prop="jycll" width="100" label="建议陈列量" align="center"></el-table-column>
<el-table-column prop="csbhl" width="100" label="初始补货量" align="center"></el-table-column>
<el-table-column prop="spbzbzs" width="120" label="商品标准包装数" align="center"></el-table-column>
<el-table-column prop="bzcsbhl" width="120" label="标准初始补货量" align="center"></el-table-column>
<el-table-column prop="zdbzcsbhl" width="140" label="总的标准初始补货量" align="center"></el-table-column>
<el-table-column prop="ppkcfpsf" width="140" label="匹配库存分配算法" align="center"></el-table-column>
<el-table-column prop="bzl" label="不足量" align="center"></el-table-column>
</el-table-column>
<el-table-column label="其他信息" align="center" label-class-name="tableTh">
<el-table-column prop="mddj" label="门店等级" align="center"></el-table-column>
<el-table-column prop="mdyxj" width="100" label="门店优先级" align="center"></el-table-column>
<el-table-column prop="jhsjrq" width="100" label="计划上架日期" align="center"></el-table-column>
<el-table-column prop="sjsjrq" width="100" label="实际上架日期" align="center"></el-table-column>
<el-table-column prop="zxts" label="在销天数" align="center"></el-table-column>
<el-table-column prop="bhzj" label="补货组织" align="center"></el-table-column>
<el-table-column prop="preStart" width="140" label="补货预测起始日期" align="center"></el-table-column>
<el-table-column prop="preEnd" width="140" label="补货预测截止日期" align="center"></el-table-column>
<el-table-column prop="hisStart" width="170" label="补货历史进销存起始日期" align="center"></el-table-column>
<el-table-column prop="hisEnd" width="170" label="补货历史进销存截止日期" align="center"></el-table-column>
<el-table-column prop="planerName" label="计划人" align="center"></el-table-column>
<el-table-column prop="salerName" label="业务员" align="center"></el-table-column>
<el-table-column prop="executorName" label="执行人" align="center"></el-table-column>
<el-table-column prop="exeTime" label="执行时间" align="center"></el-table-column>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="searchDeficiencyData.totalNumber>0"
:total="searchDeficiencyData.totalNumber"
:page.sync="searchDeficiencyData.page"
:limit.sync="searchDeficiencyData.size"
@pagination="updateDeficiencyList"
/>
</el-tab-pane>
<el-tab-pane label="库存充足商品补货明细" name="2">
<el-table
:data="enoughData"
v-loading="loading"
ref="enoughTable"
size="mini"
style="width: 100%"
stripe
highlight-current-row
@selection-change="tableEnoughChange"
>
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column label="商品补货数量" align="center" label-class-name="tableTh">
<el-table-column prop="status" label="状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.status==1">已执行</span>
<span v-else>初始</span>
</template>
</el-table-column>
<el-table-column prop="planTime" width="140" label="补货计划生成日期" align="center"></el-table-column>
<el-table-column prop="img" label="图片" align="center"></el-table-column>
<el-table-column prop="sku" width="140" label="SKU" align="center"></el-table-column>
<el-table-column prop="jybhl" width="100" label="建议补货量" align="center"></el-table-column>
<el-table-column prop="sjbhl" width="140px" label="实际补货量" align="center">
<template slot-scope="scope">
<template>
<el-button
class="editRankBtn"
v-if="!editEnoughIdsMap[scope.row.id]"
@dblclick.native.prevent="editEnoughChange(scope.row.id)"
type="text"
size="medium"
>{{scope.row.sjbhl}}</el-button>
<template v-if="editEnoughIdsMap[scope.row.id]">
<el-input-number
v-model="localEnoughCount"
:precision="0"
:min="0"
clearable
placeholder
/>
<i class="el-icon-check" @click="confirmEnoughChange(scope)"></i>
<i class="el-icon-close" @click="cancelEnoughChange(scope.row.id)"></i>
</template>
</template>
</template>
</el-table-column>
<el-table-column prop="sddm" width="100" label="商店代码" align="center"></el-table-column>
<el-table-column prop="sdmc" width="100" label="商店名称" align="center"></el-table-column>
</el-table-column>
<el-table-column label="商品基本信息" align="center" label-class-name="tableTh">
<el-table-column prop="spdm" width="100" label="商品代码" align="center"></el-table-column>
<el-table-column prop="spmc" width="160" label="商品名称" align="center"></el-table-column>
<el-table-column prop="ysmc" width="160" label="颜色名称" align="center"></el-table-column>
<el-table-column prop="cmmc" width="160" label="尺码名称" align="center"></el-table-column>
</el-table-column>
<el-table-column label="发货仓库与门店库存信息" align="center" label-class-name="tableTh">
<el-table-column prop="fczks" width="100" label="发仓在库数" align="center"></el-table-column>
<el-table-column prop="fcsds" width="100" label="发仓锁定数" align="center"></el-table-column>
<el-table-column prop="fckys" width="100" label="发仓可用数" align="center"></el-table-column>
<el-table-column prop="mdzks" width="100" label="门店在库数" align="center"></el-table-column>
<el-table-column prop="mdsds" width="100" label="门店锁定数" align="center"></el-table-column>
<el-table-column prop="mdzts" width="100" label="门店在途数" align="center"></el-table-column>
<el-table-column prop="mdthzt" width="100" label="门店退货在途" align="center"></el-table-column>
</el-table-column>
<el-table-column label="门店历史销信息" align="center" label-class-name="tableTh">
<el-table-column prop="qjzxl" width="100" label="期间总销量" align="center"></el-table-column>
<el-table-column prop="djrxl" width="100" label="店均日销量" align="center"></el-table-column>
<el-table-column prop="djrje" width="100" label="店均日金额" align="center"></el-table-column>
<el-table-column prop="sqll" label="售罄率" align="center"></el-table-column>
<el-table-column prop="qhl" label="欠货率" align="center"></el-table-column>
<el-table-column prop="skuxcb" width="100" label="SKU销存比" align="center"></el-table-column>
</el-table-column>
<el-table-column label="门店预测信息" align="center" label-class-name="tableTh">
<el-table-column prop="ycqjts" width="120" label="预测区间天数" align="center"></el-table-column>
<el-table-column prop="ycdjrxl" width="120" label="预测店均日销量" align="center"></el-table-column>
<el-table-column prop="ycdjrxl" width="120" label="预测店均日金额" align="center"></el-table-column>
<el-table-column prop="ycdjrje" width="140" label="匹配销售预测算法" align="center"></el-table-column>
<el-table-column prop="ppxsycsf" width="120" label="预测商品等级" align="center"></el-table-column>
<el-table-column prop="ycspdj" width="180" label="匹配商品等级陈列上限类型" align="center"></el-table-column>
<el-table-column prop="jycll" width="100" label="建议陈列量" align="center"></el-table-column>
<el-table-column prop="csbhl" width="100" label="初始补货量" align="center"></el-table-column>
<el-table-column prop="spbzbzs" width="120" label="商品标准包装数" align="center"></el-table-column>
<el-table-column prop="bzcsbhl" width="120" label="标准初始补货量" align="center"></el-table-column>
<el-table-column prop="zdbzcsbhl" width="140" label="总的标准初始补货量" align="center"></el-table-column>
</el-table-column>
<el-table-column label="其他信息" align="center" label-class-name="tableTh">
<el-table-column prop="mddj" label="门店等级" align="center"></el-table-column>
<el-table-column prop="mdyxj" width="100" label="门店优先级" align="center"></el-table-column>
<el-table-column prop="jhsjrq" width="100" label="计划上架日期" align="center"></el-table-column>
<el-table-column prop="sjsjrq" width="100" label="实际上架日期" align="center"></el-table-column>
<el-table-column prop="zxts" label="在销天数" align="center"></el-table-column>
<el-table-column prop="bhzj" label="补货组织" align="center"></el-table-column>
<el-table-column prop="preStart" width="140" label="补货预测起始日期" align="center"></el-table-column>
<el-table-column prop="preEnd" width="140" label="补货预测截止日期" align="center"></el-table-column>
<el-table-column prop="hisStart" width="170" label="补货历史进销存起始日期" align="center"></el-table-column>
<el-table-column prop="hisEnd" width="170" label="补货历史进销存截止日期" align="center"></el-table-column>
<el-table-column prop="planerName" label="计划人" align="center"></el-table-column>
<el-table-column prop="salerName" label="业务员" align="center"></el-table-column>
<el-table-column prop="executorName" label="执行人" align="center"></el-table-column>
<el-table-column prop="exeTime" label="执行时间" align="center"></el-table-column>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="searchEnoughData.totalNumber>0"
:total="searchEnoughData.totalNumber"
:page.sync="searchEnoughData.page"
:limit.sync="searchEnoughData.size"
@pagination="updateEnoughList"
/>
</el-tab-pane>
</el-tabs>
</el-col>
</section>
</template>
<script>
import { mapActions, mapMutations } from "vuex";
export default {
name: "List",
// 组件通讯
props: {
loading: {
default: false
}
},
data() {
return {
tableDeficiencyData: {},
deficiencyEnd: false, //控制table change 在nextTick执行完 ，防止多次出发table change事件
isDeficiencyPage: false, //页面改变导致的 tabel change事件的判定
tableEnoughData: {},
enoughEnd: false, //控制table change 在nextTick执行完 ，防止多次出发table change事件
isEnoughPage: false, //页面改变导致的 tabel change事件的判定
enoughData: [],
editEnoughIdsMap: null,
deficiencyData: [],
editDeficiencyIdsMap: null,
localEnoughCount: "",
localDeficiencyCount: "",
updateList: [], //生成补货计划的数组
searchEnoughData: {
type: 1,
size: 10,
page: 1,
state: "1",
planer: "", //计划人
ckdm: "", //仓库代码
sku: "", //SKU
saler: "", //业务员
deptId: "", //组织id集合
start: "", //补货计划生成区间-起始
end: "", //补货计划生成区间-截
mdlist: [],
mdcode: "",
mdtype: -1,
splist: [],
spcode: "",
sptype: -1,
totalNumber: 0
},
searchDeficiencyData: {
type: 1,
size: 10,
page: 1,
state: "0",
totalNumber: 0,
planer: "", //计划人
sku: "", //SKU
saler: "", //业务员
deptId: "", //组织id集合
start: "", //补货计划生成区间-起始
end: "", //补货计划生成区间-截
mdlist: [],
mdcode: "",
mdtype: -1,
splist: [],
spcode: "",
sptype: -1
},
activeName: "1"
};
},
methods: {
...mapActions(["planEnough", "planDeficiency", "stepUpdate"]),
...mapMutations(["NOTICE_ARRAY"]),
// 修改库存充足实际补货量
editEnoughChange(id) {
if (!this.editEnoughIdsMap) return;
this.localEnoughCount = 0;
this.editEnoughIdsMap = this.enoughData.reduce(
(map, item) => R.assoc(item.id, false, map),
{}
);
this.editEnoughIdsMap[id] = true;
},
// 取消修改库存充足实际补货量
cancelEnoughChange(id) {
if (!this.editEnoughIdsMap) return;
this.editEnoughIdsMap[id] = false;
},
// 确认修改库存充足实际补货量
confirmEnoughChange(scope) {
this.editEnoughIdsMap[scope.row.id] = false;
this.postConfirmReq(scope, 1);
},
// 修改库存不足实际补货量
editDeficiencyChange(id) {
if (!this.editDeficiencyIdsMap) return;
this.localDeficiencyCount = 0;
this.editDeficiencyIdsMap = this.deficiencyData.reduce(
(map, item) => R.assoc(item.id, false, map),
{}
);
this.editDeficiencyIdsMap[id] = true;
},
// 取消修改库存不足实际补货量
cancelDeficiencyChange(id) {
if (!this.editDeficiencyIdsMap) return;
this.editDeficiencyIdsMap[id] = false;
},
// 确认修改库存不足实际补货量
confirmDeficiencyChange(scope) {
this.editDeficiencyIdsMap[scope.row.id] = false;
this.postConfirmReq(scope, 0);
},
// 确认修改数据
postConfirmReq(scope, type) {
let param = { ...scope.row };
if (type === 1) {
param.sjbhl = this.localEnoughCount;
} else {
param.sjbhl = this.localDeficiencyCount;
}
this.stepUpdate(param).then(res => {
if (res.code === 0) {
if (type === 1) {
this.getEnoughList();
} else {
this.getDeficiencyList();
}
}
});
},
/**
* 库存充足pageSize 变更
*/
updateEnoughList(res) {
this.searchEnoughData.page = res.page;
this.searchEnoughData.size = res.limit;
this.isEnoughPage = true;
this.getEnoughList();
},
/**
* 库存不足pageSize 变更
*/
updateDeficiencyList(res) {
this.searchDeficiencyData.page = res.page;
this.searchDeficiencyData.size = res.limit;
this.isDeficiencyPage = true;
this.getDeficiencyList();
},
noticeFun() {
let noticeDArray = []; //选中库存不足的所有数组集合
let deficiencyKey = Object.keys(this.tableDeficiencyData);
deficiencyKey.forEach(key => {
noticeDArray = [...noticeDArray, ...this.tableDeficiencyData[key]];
});
let noticeEArray = []; //选中库存充足的所有数组集合
let enoughKey = Object.keys(this.tableEnoughData);
enoughKey.forEach(key => {
noticeEArray = [...noticeEArray, ...this.tableEnoughData[key]];
});
let noticeAllArr = [...noticeDArray, ...noticeEArray].map(
item => item.id
); //所有选中(包含库存充足与不足)的数组id集合
this.NOTICE_ARRAY(noticeAllArr);
},
/**
* 库存不足change
*/
tableDeficiencyChange(value) {
let page = this.searchDeficiencyData.page;
if (this.deficiencyEnd) return;
if (this.isDeficiencyPage) {
if (
this.tableDeficiencyData[page] &&
this.tableDeficiencyData[page].length > 0
) {
let nowPageData = this.tableDeficiencyData[page].map(item => item.id); //当前页面选中的id数组
let allData = this.deficiencyData.map(item => item.id); //当前列表ID的数组
let indexArr = []; //选中的数组在当前列表的index
for (let i = 0; i < nowPageData.length; i++) {
indexArr.push(allData.indexOf(nowPageData[i]));
}
let checkData = indexArr.map(item => {
//默认勾选中的数据
return this.deficiencyData[item];
});
this.deficiencyEnd = true;
this.$nextTick(() => {
this.toggleDeficiencySelection(checkData);
this.deficiencyEnd = false;
});
} else {
this.tableDeficiencyData[page] = value;
}
this.isDeficiencyPage = false;
} else {
this.tableDeficiencyData[page] = value;
}
this.noticeFun();
},
// 选中回显
toggleDeficiencySelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.deficiencyTable.toggleRowSelection(row);
});
} else {
this.$refs.deficiencyTable.clearSelection();
}
},
/**
* 库存充足足change
*/
tableEnoughChange(value) {
let page = this.searchEnoughData.page;
if (this.enoughEnd) return;
if (this.isEnoughPage) {
if (
this.tableEnoughData[page] &&
this.tableEnoughData[page].length > 0
) {
let nowPageData = this.tableEnoughData[page].map(item => item.id); //当前页面选中的id数组
let allData = this.enoughData.map(item => item.id); //当前列表ID的数组
let indexArr = []; //选中的数组在当前列表的index
for (let i = 0; i < nowPageData.length; i++) {
indexArr.push(allData.indexOf(nowPageData[i]));
}
let checkData = indexArr.map(item => {
//默认勾选中的数据
return this.enoughData[item];
});
this.enoughEnd = true;
this.$nextTick(() => {
this.toggleEnoughSelection(checkData);
this.enoughEnd = false;
});
} else {
this.tableEnoughData[page] = value;
}
this.isEnoughPage = false;
} else {
this.tableEnoughData[page] = value;
}
this.noticeFun();
},
// 选中回显
toggleEnoughSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.enoughTable.toggleRowSelection(row);
});
} else {
this.$refs.enoughTable.clearSelection();
}
},
initData() {
this.getEnoughList();
this.getDeficiencyList();
},
// 获取库存充足商品列表
getEnoughList() {
this.planEnough(this.searchEnoughData).then(res => {
if (res.code === 0) {
this.enoughData = res.page.list;
this.editEnoughIdsMap = this.enoughData.reduce(
(map, item) => R.assoc(item.id, false, map),
{}
);
this.searchEnoughData.page = res.page.currPage;
this.searchEnoughData.size = res.page.pageSize;
this.searchEnoughData.totalNumber = res.page.totalCount;
let page = this.searchEnoughData.page;
if (
this.tableEnoughData[page] &&
this.tableEnoughData[page].length > 0
) {
this.tableEnoughChange(this.enoughData);
} else {
this.tableEnoughData[page] = [];
}
}
});
},
// 获取库存不足商品列表
getDeficiencyList() {
this.planDeficiency(this.searchDeficiencyData).then(res => {
if (res.code === 0) {
this.deficiencyData = res.page.list;
this.editDeficiencyIdsMap = this.deficiencyData.reduce(
(map, item) => R.assoc(item.id, false, map),
{}
);
this.searchDeficiencyData.page = res.page.currPage;
this.searchDeficiencyData.size = res.page.pageSize;
this.searchDeficiencyData.totalNumber = res.page.totalCount;
let page = this.searchDeficiencyData.page;
if (
this.tableDeficiencyData[page] &&
this.tableDeficiencyData[page].length > 0
) {
this.tableDeficiencyChange(this.deficiencyData);
} else {
this.tableDeficiencyData[page] = [];
}
}
});
}
},
mounted() {
this.$nextTick(() => {
this.initData();
});
}
};
</script>
<style>
</style>
<style lang="scss" scoped >
// /deep/ .el-table thead.is-group .tableTh{
// color:#181818;
// background: #f7f1f1;
// }
/deep/ .el-table--mini td,
.el-table--mini th {
padding: 5px 0;
}
</style>
