493 行
24 KiB
HTML
可执行文件
493 行
24 KiB
HTML
可执行文件
<!--[1.8.50]-->
|
||
<style>
|
||
th {
|
||
background-color: #f5f7fa !important;
|
||
}
|
||
|
||
th>.cell {
|
||
white-space: nowrap !important;
|
||
text-align: center;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
text-align: center;
|
||
line-height: 30px;
|
||
padding: 0;
|
||
}
|
||
|
||
th>.cell,
|
||
td>.cell {
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
.el-table__row>td:last-child>.cell {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.center-content {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.center-content .el-input__inner {
|
||
padding: 0 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.el-range-editor--small .el-range-separator {
|
||
line-height: 32px;
|
||
}
|
||
|
||
.el-button--text-normal {
|
||
color: #666;
|
||
}
|
||
|
||
.flex-column-box {
|
||
width: 160px;
|
||
height: 180px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #d7dae2;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
<div class="purchaseBox" id="goodsImportApp" v-cloak style="padding-bottom: 60px">
|
||
<div>
|
||
<el-collapse accordion>
|
||
<el-collapse-item>
|
||
<template slot="title">
|
||
导入须知>>></i>
|
||
</template>
|
||
<div>1.当开启了店内出售，店内零售价为必填</div>
|
||
<div>2.当开启了商城出售，商城零售价为必填</div>
|
||
<div>3.当开启了店内会员价，店内会员价为必填</div>
|
||
<div>4.当开启了商城会员价，商城会员价为必填</div>
|
||
<div>5.所有价格最多设置两位小数</div>
|
||
<div>6.商品条码长度 1~17位、英文字母、数字或-_ 组合</div>
|
||
<div>7.商品货号长度 1-15位、英文字母、数字或-_ 组合</div>
|
||
<div>8.开启商品称重时，商品库存、超量值、预警值小数点后最多只能有3位；不开启时只能为正整数</div>
|
||
<div>9.称重商品开启时必须输入单位</div>
|
||
<div>10.单位取值范围：KG,kg,G,g,千克,克,斤,市斤</div>
|
||
<div>11.商品设置库存后则商品进价为必填</div>
|
||
<div>12.每个商品的货号和商品条码都不能重复</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
<div class="center-content">
|
||
<div style="display: flex;">
|
||
<el-input placeholder="商品名称/货号/条码" style="width: 200px;" type="text" clearable size="small"
|
||
@keydown.enter.exact.native.prevent="handleCurrentChange(1)" v-model="searchText"></el-input>
|
||
<el-select v-model="type" placeholder="请选择商品导入状态" size="small" clearable style="margin-left: 20px;">
|
||
<el-option value="1" label="已导入"></el-option>
|
||
<el-option value="0" label="未导入"></el-option>
|
||
<el-option value="3" label="货号重复"></el-option>
|
||
<el-option value="4" label="条码重复"></el-option>
|
||
</el-select>
|
||
<el-button @click="handleCurrentChange(1)" type="primary" size="small" style="margin-left: 20px;">搜索
|
||
</el-button>
|
||
|
||
<el-button v-if="operate.uploadFile" @click="showUpload" type="primary" plain size="small"
|
||
style="margin-left: 20px;">
|
||
导入商品
|
||
</el-button>
|
||
|
||
<el-button v-if="operate.importGoodsOut" @click="batchDelete" size="small" style="margin-left: 20px;">批量删除
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="max-width: calc(100vw - 228px);">
|
||
<el-table border :data="goodsList" style="width: calc(100% - 10px);" size="mini" max-height="500px"
|
||
v-loading="loading" element-loading-text="数据获取中" element-loading-spinner="el-icon-loading"
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" fixed="left" width="55"></el-table-column>
|
||
<el-table-column prop="index" fixed="left" label="序号" show-overflow-tooltip width="55"></el-table-column>
|
||
<el-table-column prop="status_name" label="状态" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="规格(开关)" show-overflow-tooltip width="80">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.attribute_name}}</span>
|
||
<el-button size="mini" type="text" v-if="scope.row.attribute == 2"
|
||
@click="sku_info(scope.row.sku_json)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip width="120"></el-table-column>
|
||
<el-table-column prop="goods_brand" label="品牌名称" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="subheading" label="副标题" show-overflow-tooltip></el-table-column>
|
||
<el-table-column v-if="platform_type == 2" prop="third_goods_code" label="Q3编码" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="goods_code" label="条码" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="good_number" label="货号" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="goods_class_name" label="所属分类" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="goods_num" label="库存" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="purch_price" label="进货价" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="retail_state_name" label="店内出售(开关)" show-overflow-tooltip width="110">
|
||
</el-table-column>
|
||
<el-table-column prop="issellonline_name" label="商城出售(开关)" show-overflow-tooltip width="110">
|
||
</el-table-column>
|
||
<el-table-column prop="store_mem_status" label="店内会员价(开关)" show-overflow-tooltip width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="shop_mem_status" label="商城会员价(开关)" show-overflow-tooltip width="120">
|
||
</el-table-column>
|
||
<el-table-column prop="retail_price" label="店内零售价" show-overflow-tooltip width="100"></el-table-column>
|
||
<el-table-column prop="online_price" label="商城零售价" show-overflow-tooltip width="100"></el-table-column>
|
||
<el-table-column prop="store_mem_price" label="店内会员价" show-overflow-tooltip width="100"></el-table-column>
|
||
<el-table-column prop="shop_mem_price" label="商城会员价" show-overflow-tooltip width="100"></el-table-column>
|
||
<el-table-column prop="can_exchange_weigh" label="是否称重" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="vip_online_state" label="线上折扣" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="vip_retail_state" label="线下折扣" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="serial_number_state" label="串号(开关)" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="more_num" label="库存上限" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="less_num" label="库存下限" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="company" label="单位" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="weight_value" label="重量/kg" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="specifications" label="规格" show-overflow-tooltip></el-table-column>
|
||
</el-table>
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
|
||
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500]"
|
||
:page-size="currentLimit" layout="total, sizes, prev, pager, next, jumper" :total="currentLen">
|
||
</el-pagination>
|
||
</div>
|
||
<div class="footer-button-box">
|
||
<el-button v-if="operate.submitToMGoods" @click="syncGoods" type="primary" size="small"
|
||
style="margin-left: 20px;">同步至商品档案
|
||
</el-button>
|
||
</div>
|
||
<!--规格列表-->
|
||
<el-dialog :visible.sync="sku_state" title="规格详情" width="calc(100% - 200px)" height="calc(100% - 65px)"
|
||
append-to-body>
|
||
<el-table size="mini" border :data="skuList.sku_list" style="width: calc(100% - 20px);">
|
||
<el-table-column align="center" fixed type="index" label="序号" width="50"></el-table-column>
|
||
<el-table-column align="center" label="规格名称" :width="skuTitleWidth" fixed="left">
|
||
<template v-for="(title,index) in skuList.sku_name_title">
|
||
<el-table-column align="center" show-overflow-tooltip :label="title" width="100px">
|
||
<template slot-scope="scope">{{scope.row.name[index]}}</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="规格货号" align="center" prop="sku_goods_number"></el-table-column>
|
||
<el-table-column label="规格条码" align="center" prop="sku_code"></el-table-column>
|
||
<el-table-column v-if="platform_type == 2" label="Q3编码" align="center" prop="third_goods_code"></el-table-column>
|
||
<el-table-column label="进价" align="center" prop="purch_price"></el-table-column>
|
||
<el-table-column label="店内零售价" align="center" prop="retail_price"></el-table-column>
|
||
<el-table-column label="商城零售价" align="center" prop="online_price"></el-table-column>
|
||
<el-table-column label="店内会员价" align="center" prop="store_mem_price"></el-table-column>
|
||
<el-table-column label="商城会员价" align="center" prop="shop_mem_price"></el-table-column>
|
||
<el-table-column label="库存" align="center" prop="goods_num"></el-table-column>
|
||
<el-table-column label="库存上限" align="center" prop="more_num"></el-table-column>
|
||
<el-table-column label="库存下限" align="center" prop="less_num"></el-table-column>
|
||
<el-table-column label="单个重量/kg" align="center" prop="sku_weight_value"></el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<el-dialog :visible.sync="showUploadDialog" title="上传导入文件" :append-to-body="true" :close-on-click-modal="false"
|
||
width="600px">
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<div class="radius flex-column-box">
|
||
<span>单规格商品导入</span>
|
||
<el-button type="text" v-if="operate.downModelFile" @click="downModelFile(1)" size="small">下载导入模板
|
||
</el-button>
|
||
<el-upload action="{:U('uploadFile')}" :data="{attribute_state:1}" class="upload-demo"
|
||
ref="uploadFile1" accept=".xls" :show-file-list="false"
|
||
:disabled="upload_percentage[0]>0?true:false" :before-upload="beforeUpload1"
|
||
:on-success="handleAvatarSuccess">
|
||
<div v-if="upload_percentage[0]>0">
|
||
<el-progress type="circle" :width="80" :percentage="upload_percentage[0]"></el-progress>
|
||
</div>
|
||
<el-button v-else size="small" type="text" class="el-button--text-normal">导入商品>>
|
||
</el-button>
|
||
</el-upload>
|
||
<el-alert v-if="upload_percentage[0]>0"
|
||
title="上传时间可能会很长，请您耐心等待"
|
||
type="info" :closable="false"></el-alert>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="radius flex-column-box">
|
||
<span>多规格商品导入</span>
|
||
<el-button type="text" v-if="operate.downModelFile" @click="downModelFile(2)" size="small">下载导入模板
|
||
</el-button>
|
||
<el-upload action="{:U('uploadFile')}" :data="{attribute_state:2}" class="upload-demo"
|
||
ref="uploadFile2" accept=".xls" :show-file-list="false"
|
||
:disabled="upload_percentage[1]>0?true:false" :before-upload="beforeUpload2"
|
||
:on-success="handleAvatarSuccess">
|
||
<div v-if="upload_percentage[1]>0">
|
||
<el-progress type="circle" :width="80" :percentage="upload_percentage[1]"></el-progress>
|
||
</div>
|
||
<el-button v-else size="small" type="text" class="el-button--text-normal">导入商品>>
|
||
</el-button>
|
||
</el-upload>
|
||
<el-alert v-if="upload_percentage[1]>0"
|
||
title="上传时间可能会很长，请您耐心等待"
|
||
type="info" :closable="false"></el-alert>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
var goodsImportApp = new Vue({
|
||
el: "#goodsImportApp",
|
||
data() {
|
||
return {
|
||
platform_type:1,
|
||
skuList: [],
|
||
sku_state: false,
|
||
goodsSelection: [], //选择的商品
|
||
type: "0",
|
||
searchText: "",
|
||
loading: false,
|
||
goodsList: [],
|
||
operate: {},//操作权限
|
||
showUploadDialog: false,//是否显示上传商品文件弹框
|
||
upload_attribute_state: 1,//上传的模板类型
|
||
upload_percentage: [0, 0],//上传进度条
|
||
upload_timer: null,
|
||
currentPage: 1,
|
||
currentLimit: 100,
|
||
currentLen: 0,
|
||
skuTitleWidth: 100,
|
||
}
|
||
},
|
||
methods: {
|
||
//商户平台类型 1默认系统 2微礼平台
|
||
getPlatformType(){
|
||
$.ajax({
|
||
url:'/index.php/Retail/Goods/getPlatformType',
|
||
type:"post",
|
||
data:{},
|
||
success:(res)=>{
|
||
this.platform_type = res.platform_type
|
||
}
|
||
})
|
||
},
|
||
//显示上传文件
|
||
showUpload() {
|
||
this.showUploadDialog = true;
|
||
this.upload_percentage = [0, 0];
|
||
},
|
||
beforeUpload1() {
|
||
this.beforeUpload(1);
|
||
},
|
||
beforeUpload2() {
|
||
this.beforeUpload(2);
|
||
},
|
||
//上传文件前
|
||
beforeUpload(type) {
|
||
let index = type - 1;
|
||
this.upload_attribute_state = type;
|
||
let upload_percentage = this.upload_percentage;
|
||
this.upload_percentage = JSON.parse(JSON.stringify(upload_percentage))
|
||
upload_percentage[index] = 10;
|
||
this.upload_timer = setInterval(() => {
|
||
let upload_percentage = this.upload_percentage;
|
||
if (upload_percentage[index] < 99) {
|
||
upload_percentage[index] += 1;
|
||
this.upload_percentage = JSON.parse(JSON.stringify(upload_percentage))
|
||
} else {
|
||
clearInterval(this.upload_timer);
|
||
}
|
||
}, 100)
|
||
},
|
||
//同步至商品档案
|
||
syncGoods() {
|
||
if (this.goodsSelection.length <= 0) {
|
||
return this.$message.error("请选择商品");
|
||
}
|
||
$.ajax({
|
||
url: "{:U('submitToMGoods')}",
|
||
data: {
|
||
checkgoodsarr: this.goodsSelection
|
||
},
|
||
type: 'post',
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
type: "success",
|
||
message: res.msg,
|
||
onClose: () => {
|
||
this.getData();
|
||
}
|
||
})
|
||
} else {
|
||
var remark = '';
|
||
if (Array.isArray(res.remark)) {
|
||
for (var i = 0; i < res.remark.length; i++) {
|
||
remark += `<p style="margin:5px 0px 0px 10px;color:#009f95;"> ` + (i + 1) + `.` + res.remark[i] + `</p>`
|
||
}
|
||
} else {
|
||
remark = res.remark;
|
||
}
|
||
this.$alert('<div>' + remark + '</div>', '提示', {
|
||
dangerouslyUseHTMLString: true
|
||
}).catch(() => {
|
||
});
|
||
this.getData();
|
||
}
|
||
},
|
||
error: (error) => {
|
||
console.log(error);
|
||
this.$message.error('出错了。')
|
||
}
|
||
})
|
||
},
|
||
//下载导入失败信息
|
||
downFailFile() {
|
||
window.location.href = "{:U('downFailFile')}?attribute_state=" + this.upload_attribute_state;
|
||
},
|
||
//删除记录
|
||
batchDelete() {
|
||
if (this.goodsSelection.length <= 0) {
|
||
return this.$message.error("请选择商品");
|
||
}
|
||
this.$confirm('确认删除?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
$.ajax({
|
||
url: "{:U('importGoodsOut')}",
|
||
type: "post",
|
||
data: {
|
||
checkgoodsarr: this.goodsSelection
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
type: "success",
|
||
message: res.msg,
|
||
onClose: () => {
|
||
this.getData();
|
||
}
|
||
})
|
||
} else {
|
||
this.$message({
|
||
type: "error",
|
||
message: res.msg,
|
||
onClose: () => {
|
||
this.getData();
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
//选择商品
|
||
handleSelectionChange(data) {
|
||
this.goodsSelection = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
this.goodsSelection.push(data[i].id);
|
||
}
|
||
},
|
||
handleAvatarSuccess(res, file) {
|
||
let index = this.upload_attribute_state - 1;
|
||
let upload_percentage = this.upload_percentage;
|
||
upload_percentage[index] = 100;
|
||
this.upload_percentage = JSON.parse(JSON.stringify(upload_percentage));
|
||
clearInterval(this.upload_timer);
|
||
setTimeout(() => {
|
||
this.$refs['uploadFile1'].clearFiles();
|
||
this.$refs['uploadFile2'].clearFiles();
|
||
if (res.status == 1) {
|
||
this.$message.success(res.message);
|
||
this.getData();
|
||
upload_percentage[index] = 0;
|
||
} else if (res.status == 2) {
|
||
this.$alert(res.message, '错误提示', {
|
||
confirmButtonText: '下载失败表格',
|
||
showClose: false,
|
||
callback: action => {
|
||
this.downFailFile();//下载失败表格
|
||
}
|
||
});
|
||
this.getData();
|
||
upload_percentage[index] = 0;
|
||
} else {
|
||
this.$message.error(res.msg);
|
||
this.getData();
|
||
upload_percentage[index] = 0;
|
||
}
|
||
this.upload_percentage = JSON.parse(JSON.stringify(upload_percentage));
|
||
this.showUploadDialog = false;
|
||
}, 1000)
|
||
},
|
||
// 下载导入模板
|
||
downModelFile(type) {
|
||
window.location.href = "{:U('downModelFile')}?attribute_state=" + type;
|
||
},
|
||
//规格详情
|
||
sku_info(info) {
|
||
this.sku_state = true;
|
||
this.skuList = [];
|
||
this.skuList = info;
|
||
this.skuTitleWidth = info.sku_name_title.length * 100;
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentLimit = val;//切换每页数量
|
||
this.currentPage = 1;
|
||
this.getData();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val;
|
||
this.getData();//切换页数
|
||
},
|
||
//初始化数据
|
||
getData() {
|
||
this.loading = true;
|
||
$.ajax({
|
||
url: "{:U('getGoodsList')}",
|
||
type: "post",
|
||
data: {
|
||
page: this.currentPage,
|
||
limit: this.currentLimit,
|
||
type: this.type,
|
||
searchText: this.searchText,
|
||
},
|
||
success: (res) => {
|
||
this.goodsList = res.data.list;
|
||
this.currentLen = res.data.count;
|
||
this.loading = false;
|
||
}
|
||
})
|
||
},
|
||
//获取操作权限
|
||
getOperate() {
|
||
let auth_list = {
|
||
downModelFile: '/index.php/Retail/Goods/downModelFile',
|
||
uploadFile: '/index.php/Retail/Goods/uploadFile',
|
||
submitToMGoods: '/index.php/Retail/Goods/submitToMGoods',
|
||
importGoodsOut: '/index.php/Retail/Goods/importGoodsOut',
|
||
};
|
||
$.ajax({
|
||
url: '/index.php/Retail/Component/checkOperateAuth',
|
||
type: "post",
|
||
data: {
|
||
auth_list: JSON.stringify(auth_list),
|
||
},
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.operate = res.data;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
},
|
||
created() {
|
||
this.getPlatformType();
|
||
this.getOperate();
|
||
this.getData();
|
||
}
|
||
})
|
||
</script> |