492 行
18 KiB
HTML
可执行文件
492 行
18 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<style>
|
|
.Business_tb1 table tr th {
|
|
height: 30px !important;
|
|
background-color: #D5e9ed;
|
|
color: #00a3d6;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.Business_tb1 table tr td {
|
|
/*border: none;*/
|
|
height: 100%;
|
|
position: relative;
|
|
/*background-color: white;*/
|
|
font-size: 12px;
|
|
}
|
|
|
|
.Business_tb1 table tr {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.layui-form-item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
width: auto;
|
|
}
|
|
|
|
select {
|
|
height: 38px;
|
|
border: 1px solid #ccc;
|
|
color: #333;
|
|
}
|
|
|
|
.search-btn {
|
|
height: 40px;
|
|
display: inline-block;
|
|
padding: 0 18px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 2px;
|
|
margin: 0;
|
|
color: #666;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.total {
|
|
width: 96%;
|
|
margin-left: 15px;
|
|
height: 80px;
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.total-num {
|
|
color: #00a3d6;
|
|
}
|
|
|
|
.import {
|
|
display: block;
|
|
width: 122px;
|
|
height: 40px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.goods-check-box {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: auto;
|
|
}
|
|
|
|
.showDetail {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.detail {
|
|
background-color: white;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.checkAll {
|
|
padding: 0 15px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
border-radius: 0 2px 2px 0;
|
|
margin: 0 0 10px 18px;
|
|
background-color: white;
|
|
color: #333;
|
|
border: 1px solid #ddd;
|
|
position: relative;
|
|
}
|
|
|
|
.checkAll::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.isCheckAll {
|
|
background-color: #007aff;
|
|
color: white;
|
|
border-color: #007aff;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid #007aff;
|
|
}
|
|
|
|
.isCheck:before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 10px;
|
|
background-color: white;
|
|
border-right: 2px solid #007aff;
|
|
border-bottom: 2px solid #007aff;
|
|
position: absolute;
|
|
transform: rotateZ(45deg);
|
|
top: 3px;
|
|
left: 6px;
|
|
}
|
|
|
|
.del:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.calc-left {
|
|
margin-left: 160px;
|
|
margin-top: 65px !important;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
<div id="mGoodsImport" style="position: relative;with:100%;height: 100%;overflow-y: auto;padding: 0 20px;">
|
|
<div style="margin: 20px 0 20px;">
|
|
<el-collapse accordion>
|
|
<el-collapse-item>
|
|
<template slot="title">
|
|
商品导入须知>>></i>
|
|
</template>
|
|
<div>1.商品导入前请先下载商品导入模板,务必严格按照商品导入须知中的要求编辑商品信息</div>
|
|
<div>2.如遇商品导入出错,请先下载商品导入失败表格查看具体失败原因</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
<form style="display: flex;height: calc(100% - 90px);flex-direction: column;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: auto;">数据类型</label>
|
|
<div class="layui-input-inline" style="width: 150px;">
|
|
<select v-model="status_type" @change="getGoodsList">
|
|
<option value="0">--未导入--</option>
|
|
<option value="1">--已导入--</option>
|
|
<option value="3">--名称重复--</option>
|
|
<option value="4">--条码重复--</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline" style="width: auto;position: absolute;right: 38px;">
|
|
|
|
<div class="search-btn">导入商品表格</div>
|
|
|
|
<input type="file" class="import" @change="chooseFile" ref="myChooseFile" style="cursor: pointer">
|
|
|
|
<div class="search-btn" @click="downFile">下载商品导入模板</div>
|
|
</div>
|
|
</div>
|
|
<div class="Business"
|
|
style="flex: 1;overflow-y: hidden;display: flex;flex-direction:column;box-sizing: border-box;">
|
|
<div style="position: relative;display: flex;height: 43px;">
|
|
<div v-if="status_type==0" class="checkAll" @click="checkAll"
|
|
:class="checkGoodsList.length==goodsList.length&&goodsList.length?'isCheckAll':''">全选
|
|
</div>
|
|
<div v-if="status_type==1" class="checkAll" @click="checkAll"
|
|
:class="hasImportList.length==goodsList.length&&goodsList.length?'isCheckAll':''">全选
|
|
</div>
|
|
<div v-if="status_type==3" class="checkAll" @click="checkAll"
|
|
:class="goodsNumberList.length==goodsList.length&&goodsList.length?'isCheckAll':''">全选
|
|
</div>
|
|
<div v-if="status_type==4" class="checkAll" @click="checkAll"
|
|
:class="goodsCodeList.length==goodsList.length&&goodsList.length?'isCheckAll':''">全选
|
|
</div>
|
|
<div class="checkAll del" @click="delAll" v-if="status_type!=-1">批量删除</div>
|
|
</div>
|
|
<div class="Business_tb1" style="max-height: calc(100% - 43px);overflow-y: auto;overflow-x: auto;">
|
|
<table border="0" cellspacing="0" cellpadding="0" class="layui-table"
|
|
style="height:calc(100% - 1px);position: relative;overflow-y: auto;margin: 0">
|
|
<tr style="height: 30px;position: relative;top:0;left:0;" id="tabletitle">
|
|
<th>选择</th>
|
|
<th>序号</th>
|
|
<th>商品名称</th>
|
|
<th>条码</th>
|
|
<th>产地</th>
|
|
<th>品牌</th>
|
|
<th>单位</th>
|
|
<th>规格</th>
|
|
<th>状态</th>
|
|
</tr>
|
|
<tr v-if="!goodsList.length" style="height: 30px;">
|
|
<td colspan="9">暂无该类型数据</td>
|
|
</tr>
|
|
<template v-for="(item,index) in goodsList">
|
|
<tr style="height: 30px;">
|
|
<td>
|
|
<input type="checkbox" v-model="checkGoodsList" :value="item.id" v-if="item.status==0"
|
|
class="goods-check-box">
|
|
<input type="checkbox" v-model="hasImportList" :value="item.id"
|
|
v-if="item.status==1&&status_type==1"
|
|
class="goods-check-box">
|
|
<input type="checkbox" v-model="goodsNumberList" :value="item.id"
|
|
v-if="item.status==3&&status_type==3"
|
|
class="goods-check-box">
|
|
<input type="checkbox" v-model="goodsCodeList" :value="item.id"
|
|
v-if="item.status==4&&status_type==4"
|
|
class="goods-check-box">
|
|
</td>
|
|
<td>{{index+1}}</td>
|
|
<td>{{item.name}}</td>
|
|
<td>{{item.code}}</td>
|
|
<td>{{item.origin}}</td>
|
|
<td>{{item.trademark}}</td>
|
|
<td>{{item.unit}}</td>
|
|
<td>{{item.specification}}</td>
|
|
<td>{{item.statusname}}</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="total">
|
|
<div class="layui-form-item">
|
|
<div class="search-btn isCheckAll" @click="downFailFile" v-if="canDownFailFile">下载商品导入失败表格</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label" style="width: auto;">商品种类:
|
|
<span class="total-num">{{goodsList.length}}</span>
|
|
</label>
|
|
<div class="search-btn" @click="doConfirm">同步至商品云库</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var mGoodsImport = new Vue({
|
|
el: '#mGoodsImport',
|
|
data() {
|
|
return {
|
|
canDownFailFile: false,
|
|
keyword: "",
|
|
goodsList: [],
|
|
checkGoodsList: [],
|
|
status_type: 0,
|
|
hasImportList: [],
|
|
goodsNumberList: [],
|
|
goodsCodeList: [],
|
|
skuList: {},
|
|
showDetail: false
|
|
}
|
|
},
|
|
created() {
|
|
$('.show-goods-item-box').css({'opacity': 1});
|
|
this.getGoodsList();
|
|
},
|
|
methods: {
|
|
getGoodsList() {
|
|
var status_type = this.status_type;
|
|
$.ajax({
|
|
url: "{:U('getGoodsList')}",
|
|
data: {
|
|
type: status_type
|
|
},
|
|
type: 'post',
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.goodsList = res.data;
|
|
} else {
|
|
this.goodsList = [];
|
|
}
|
|
},
|
|
error: (error) => {
|
|
this.$message.error('错误了。。。')
|
|
}
|
|
})
|
|
},
|
|
seeDetail(index) {
|
|
var goodsList = JSON.parse(JSON.stringify(this.goodsList));
|
|
this.skuList = [];
|
|
this.skuList = goodsList[index].sku_json;
|
|
this.$nextTick(() => {
|
|
this.showDetail = true;
|
|
});
|
|
},
|
|
//同步至云库
|
|
doConfirm() {
|
|
var checkGoodsList = this.checkGoodsList;
|
|
if (this.status_type != 0 && this.status_type != -1) {
|
|
return;
|
|
}
|
|
if (checkGoodsList.length == 0) {
|
|
return this.$message.warning('请选择要同步的商品');
|
|
}
|
|
|
|
this.$confirm('确定要将选中同步到商品档案中?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
$.ajax({
|
|
url: "{:U('submitToMGoods')}",
|
|
data: {
|
|
checkCodeIds: checkGoodsList.join(','),
|
|
},
|
|
type: 'post',
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.$message.success(res.msg);
|
|
this.getGoodsList();
|
|
} else {
|
|
var remake = '';
|
|
if (Array.isArray(res.data)) {
|
|
for (var i = 0; i < res.data.length; i++) {
|
|
remake += `<p style="margin:5px 0px 0px 10px;color:#009f95;"> ` + (i + 1) + `.` + res.data[i] + `</p>`
|
|
}
|
|
} else {
|
|
remake = res.msg;
|
|
}
|
|
this.$alert('<div>' + remake + '</div>', '提示', {
|
|
dangerouslyUseHTMLString: true
|
|
});
|
|
}
|
|
},
|
|
error: (error) => {
|
|
console.log(error);
|
|
this.$message.error('出错了。')
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
// 下载导入模板
|
|
downFile() {
|
|
window.location.href = "{:U('downModelFile')}";
|
|
},
|
|
// 上传模板表格
|
|
chooseFile() {
|
|
console.log(this.$refs.myChooseFile.files[0]);
|
|
var file = this.$refs.myChooseFile.files[0];
|
|
if (file) {
|
|
var fd = new FormData();
|
|
fd.append('file', file);
|
|
$.ajax({
|
|
url: "{:U('uploadFile')}",
|
|
data: fd,
|
|
type: 'post',
|
|
async: false,
|
|
cache: false,
|
|
contentType: false, //不设置内容类型
|
|
processData: false,
|
|
success: (res) => {
|
|
this.canDownFailFile = true;
|
|
if (res.status == 1) {
|
|
this.$message.success(res.msg)
|
|
this.getGoodsList();
|
|
} else {
|
|
this.$message.warning(res.msg)
|
|
this.getGoodsList();
|
|
}
|
|
$(this.$refs.myChooseFile).val('');
|
|
}
|
|
})
|
|
}
|
|
},
|
|
downFailFile() {
|
|
window.location.href = "{:U('downFailFile')}";
|
|
},
|
|
// 全选
|
|
checkAll() {
|
|
var checkGoodsList = [];
|
|
var goodsList = this.goodsList;
|
|
var status_type = this.status_type;
|
|
status_type = status_type > 0 ? status_type : 0;
|
|
for (var i = 0; i < goodsList.length; i++) {
|
|
if (goodsList[i]['status'] == status_type) {
|
|
checkGoodsList.push(goodsList[i]['id']);
|
|
}
|
|
}
|
|
var length = checkGoodsList.length;
|
|
if (status_type == 0 || status_type == -1) {
|
|
if (this.checkGoodsList.length == length) {
|
|
this.checkGoodsList = [];
|
|
return;
|
|
}
|
|
this.checkGoodsList = checkGoodsList;
|
|
} else if (status_type == 1) {
|
|
if (this.hasImportList.length == length) {
|
|
this.hasImportList = [];
|
|
return;
|
|
}
|
|
this.hasImportList = checkGoodsList;
|
|
} else if (status_type == 3) {
|
|
if (this.goodsNumberList.length == length) {
|
|
this.goodsNumberList = [];
|
|
return;
|
|
}
|
|
this.goodsNumberList = checkGoodsList;
|
|
} else if (status_type == 4) {
|
|
if (this.goodsCodeList.length == length) {
|
|
this.goodsCodeList = [];
|
|
return;
|
|
}
|
|
this.goodsCodeList = checkGoodsList;
|
|
}
|
|
},
|
|
//删除
|
|
delAll() {
|
|
var status_type = this.status_type;
|
|
var delGoodsList = [];
|
|
if (status_type == 0 || status_type == -1) {
|
|
delGoodsList = this.checkGoodsList
|
|
} else if (status_type == 1) {
|
|
delGoodsList = this.hasImportList
|
|
} else if (status_type == 3) {
|
|
delGoodsList = this.goodsNumberList
|
|
} else if (status_type == 4) {
|
|
delGoodsList = this.goodsCodeList
|
|
}
|
|
|
|
if (delGoodsList.length > 0) {
|
|
this.$confirm('您确定要删除选中的数据吗?', '提示', {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
$.ajax({
|
|
url: "{:U('delGoodsItem')}",
|
|
data: {
|
|
id: delGoodsList.join(',')
|
|
},
|
|
type: "post",
|
|
success: (res) => {
|
|
// console.log(res);
|
|
if (res.status == 1) {
|
|
this.$message.success(res.msg)
|
|
this.getGoodsList();
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
} else {
|
|
this.$message.warning('请选择您需要删除的数据')
|
|
}
|
|
}
|
|
},
|
|
})
|
|
</script>
|