<template> <div class="app-container"> <el-card class="box-card goods-manage-card"> <div slot="header" class="clearfix"> <el-radio-group v-model="radiomodel" class="radiomodels" @change="radiomodelbtn"> <el-radio-button :label="1">上架销售中({{onsale_count}})</el-radio-button> <el-radio-button :label="2">仓库中的商品({{downsale_count}})</el-radio-button> <el-radio-button :label="3">审核记录</el-radio-button> <el-radio-button :label="4">最近删除({{del_count}})</el-radio-button> </el-radio-group> </div> <el-form :inline="true" class="queryFormInline" :model="formInline"> <el-row :span="24" type="flex" align="middle" justify="space-between"> <el-col :span="20"> <el-form-item label="商品编号"> <el-input v-model.trim="formInline.goods_id" size="mini" placeholder="填写商品编号"></el-input> </el-form-item> <el-form-item label="商品名称"> <el-input v-model.trim="formInline.goods_name" size="mini" placeholder="填写商品名称"></el-input> </el-form-item> <el-form-item label="商品状态" v-show="radiomodel==3"> <el-select v-model.trim="formInline.status" placeholder="请选择" size="mini" style='width:100px;'> <el-option label="全部" value="5" v-if='radiomodel==3'></el-option> <el-option label="审核中" value="1" v-if='radiomodel==3'></el-option> <el-option label="审核拒绝" value="2" v-if='radiomodel==3'></el-option> </el-select> </el-form-item> <el-form-item label="发布时间"> <el-date-picker style='width:315px;' v-model.trim="formInline.uptime" type="daterange" range-separator="至" size="mini" format="yyyy 年 MM 月 dd 日" value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item label="价格区间"> <el-input v-model.trim="formInline.price_min" size="mini" placeholder="最小价格" style="width:100px;"></el-input> - <el-input v-model.trim="formInline.price_max" size="mini" placeholder="最大价格" style="width:100px;"></el-input> </el-form-item> <el-form-item> <el-button type="primary" size="mini" @click="handleQuery" >查询 </el-button> </el-form-item> </el-col> <el-col :span="4"> <div style="float: right"> <el-button style="float:right;margin-left: 10px;" type="danger" v-if='radiomodel===2' size="mini" :disabled="multiple" @click="handledelsale('9','del','all')" >批量删除 </el-button> <el-button style="float:right;margin-left: 10px;" type="danger" v-if='radiomodel==4' size="mini" :disabled="multiple" @click="handledelgrain('9','all')" >彻底删除 </el-button> <el-button v-if='radiomodel==1' style="float:right;margin-left: 20px;" type="primary" :disabled="multiple" size="mini" @click="handleUpsale('9','down','all')" >批量下架 </el-button> <el-button v-if='radiomodel==2' style="float:right;margin-left: 20px;" type="primary" :disabled="multiple" size="mini" @click="handleUpsale('9','up','all')" >批量申请上架 </el-button> <el-button v-if='radiomodel==4' :disabled="multiple" style="float:right;margin-left: 20px;" type="primary" size="mini" @click="handledelsale('9','return','all')" >批量还原 </el-button> <el-button v-if='radiomodel==3' :disabled="multiple" style="float:right;margin-left: 20px;align-items:normal" type="primary" size="mini" @click="handleCancelUpale" >批量取消申请上架 </el-button> </div> </el-col> </el-row> </el-form> <el-table v-loading="loading" :data="freightList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-column label="商品主图" width="95" align="center"> <template slot-scope="scope"> <img :src="scope.row.default_image" alt="" style="width:60px;height:60px;"> </template> </el-table-column> <el-table-column label="商品编号" align="center" prop="goods_id"/> <el-table-column label="商品名称" align="center" prop="goods_name"/> <el-table-column label="协议价" align="center" prop=""> <template slot-scope="scope"> {{scope.row.js_price/100}}元 </template> </el-table-column> <!-- <el-table-column label="类型" align="center" :formatter="formatType" prop="ChargeType"/> --> <el-table-column label="库存量" align="center" prop="stock"/> <el-table-column label="商品状态" align="center" prop> <template slot-scope="scope"> <span v-if="radiomodel==1||radiomodel==2"> {{scope.row.is_onsale===0?'下架':'上架'}} </span> <span v-if="radiomodel==3"> {{scope.row.up_onsale===1?'审核中':'审核拒绝'}} </span> <span v-if="radiomodel==4"> {{scope.row.is_on===0?'已删除':'彻底删除'}} </span> </template> </el-table-column> <el-table-column label="发布时间" align="center" :formatter="formatTime" prop="add_time"/> <el-table-column label="审核说明" align="center" prop="last_perate_content" width="240px"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <div v-if='radiomodel==3&&scope.row.up_onsale===1'> <el-button size="mini" type="text" @click="handleCancelUpsale(scope.row)" >取消上架申请 </el-button> </div> <div v-else> <el-button v-if="radiomodel==1" size="mini" type="text" @click="handleUpsale(scope.row,'down','one')" >下架 </el-button> <el-button v-if="radiomodel==2" size="mini" type="text" @click="handleUpsale(scope.row,'up','one')" >申请上架 </el-button> <el-button v-if="radiomodel==4" size="mini" type="text" @click="handledelsale(scope.row,'return','one')" >还原 </el-button> <el-divider direction="vertical" v-if="radiomodel!=3"></el-divider> <!-- 上架销售中,不下架编辑 --> <el-button v-if="radiomodel==1" size="mini" type="text" @click="hotEditGoods(scope.row)" >编辑 </el-button> <el-button v-if="radiomodel!=4 && radiomodel!=1" size="mini" type="text" @click="editgoods(scope.row)" >编辑 </el-button> <el-divider direction="vertical" v-if="radiomodel!=4"></el-divider> <el-button size="mini" type="text" @click="lookdetail(scope.row)" >预览 </el-button> <el-divider direction="vertical" v-if="radiomodel!=1"></el-divider> <el-button v-if="radiomodel!=4&&radiomodel!=1" size="mini" type="text" @click="handledelsale(scope.row,'del','one')" >删除 </el-button> <el-button v-if="radiomodel==4" size="mini" type="text" @click="handledelgrain(scope.row,'one')" >彻底删除 </el-button> </div> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="formInline.page" :limit.sync="formInline.limit" @pagination="getList" /> <!-- 商品编辑--> <!-- <el-dialog title="编辑商品" :visible.sync="editisOpen" v-if="editisOpen" width="70%" class="freightTemplate-add">--> <!-- <editGood :option="goodsid" @closeEditDialog="closeEditGoods"></editGood>--> <!-- </el-dialog>--> <el-dialog title="商品详情" :visible.sync="isOpen" center v-if="isOpen" width="70%" class="freightTemplate-add" :close-on-click-modal="false"> <goodDetail :goods-id="goodDetails"></goodDetail> </el-dialog> </el-card> <!-- 不下架 编辑商品 --> <el-dialog title="编辑商品" :visible.sync="isHotEditGoods" center :close-on-click-modal="false" :before-close="cancelHotEditGoods" width="50%" class="dialog-spe"> <p class="hot-edit-goods-tips">备注:上架销售中的商品,仅可修改【发货时效、邮费模板、售后时长、商品库存量】等信息,修改后无需审核可直接上架。 如需编辑更多商品信息,请先将商品下架再进行编辑。</p> <el-form :model="hotEditGoodsForm" ref="hotEditGoodsForm" label-width="30%" size="small"> <el-form-item label="发货时效:" prop="delay_compensate"> <el-select v-model="hotEditGoodsForm.delay_compensate" style="width:400px" placeholder="请选择发货时效"> <el-option label="24小时" :value="24"></el-option> <el-option label="48小时" :value="48"></el-option> </el-select> </el-form-item> <el-form-item label="邮费模板:" prop="freight_id"> <el-select v-model="hotEditGoodsForm.freight_id" placeholder="请选择邮费模板" style="width:400px;"> <el-option v-for="item in freightOptions" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="售后时长:" prop="aftersale_time"> <el-select v-model="hotEditGoodsForm.aftersale_time" style="width:400px;" placeholder="请选择售后时长"> <el-option label="7天" :value="7"></el-option> <el-option label="15天" :value="15"></el-option> <el-option label="30天" :value="30"></el-option> </el-select> </el-form-item> </el-form> <el-table :data="speList" class="hot-edit-goods-table" border v-if="speList.length"> <el-table-column label="规格项" prop="spe" align="center"> <template slot-scope="scope"> <span v-for="(item, index) in scope.row.objArr" :key="index"> {{ `${item.name}: ${item.spec_values}` }} </span> </template> </el-table-column> <el-table-column label="库存量" width="160px" prop="stock" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.stock" /> </template> </el-table-column> </el-table> <el-table :data="speListone" class="hot-edit-goods-table" border v-else> <el-table-column label="规格项" prop="spe" align="center"> <template slot-scope="scope"> 默认 </template> </el-table-column> <el-table-column label="库存量" width="160px" prop="stock" align="center"> <template slot-scope="scope"> <el-input v-model.trim="scope.row.stock" /> </template> </el-table-column> </el-table> <span slot="footer" class="dialog-footer"> <el-button size="small" @click="cancelHotEditGoods">取 消</el-button> <el-button size="small" type="primary" @click="saveHotEditGoods">保 存</el-button> </span> </el-dialog> </div> </template> <script> import goodDetail from './components/goodsdetail' import editGood from '@/views/system/goods/add/index' import { GetFreight,getGoodsNew } from '@/api/module/goods' import { getlistGoods, shelvesStatus, delgoodsStatus,cancelOnsale,cancelOnsaleAllData,saveHotEditGoodsData } from '@/api/module/goodsgement' import {dateFormat} from '@/utils' export default { name: "freight", data() { return { goodDetails: { goods_id: '' }, // editisOpen: false,//编辑 downsale_count: '',//仓库数量 onsale_count: '',//上架数量 del_count: '',//删除数量 radiomodel: 1, formInline: { page: 1, limit: 20, goods_name: '', goods_id: '', status: '5', uptime: '', price_min: '', price_max: '' }, // fullHeight: 0, // tableHeight: 0, // 遮罩层 loading: false, // 选中数组 selectionsList:[], ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // freight表格数据 freightList: [], // 弹出层标题 title: "", // 是否显示弹出层 isOpen: false, // 查询参数 queryParams: { page: 1, limit: 20, seller_id: null, name: null, sort: null, is_default: null, charge_type: null, dispatching: null, disdispatching: null, publish: null, created: null, modified: null, }, // 表单参数 goodsid: 0, // 表单校验 rules: { name: [ {required: true, message: "模板名称不能为空", trigger: "blur"} ], }, // 热更新商品 isHotEditGoods: false, hotEditGoodsForm: { delay_compensate: 24, freight_id: 310, aftersale_time: 7 }, freightOptions: [], speList: [], speListone:[], stock: 0, rowInfo: null }; }, components: { goodDetail, editGood }, created() { if( this.$route.query.goodsStatus ) { this.radiomodel = Number(this.$route.query.goodsStatus); } this.getList(); // this.$nextTick(() => { // let headerHeight = document.getElementsByClassName('queryFormInline')[0].clientHeight // this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight - headerHeight // }) }, watch: { // fullHeight(val) { // let headerHeight = document.getElementsByClassName('queryFormInline')[0].clientHeight // let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight // this.tableHeight = val - formHeight - 40 - headerHeight // } }, methods: { // 运费模板 getFreightData() { let params = { is_status: 1 } GetFreight(params).then(res => { if(res.data) { this.freightOptions = res.data; }else { this.freightOptions = '' } }); }, handledelgrain(row, isall) { //彻底删除 let good_id, is_on, title, message if (isall == 'one') { good_id = [row.goods_id] is_on = 2 title = "彻底删除" message = "此操作将彻底删除该商品,是否继续?" } else if (isall == 'all') { good_id = this.ids is_on = 2 title = "彻底删除" message = "此操作将彻底删除选中的商品,是否继续?" } let data = { 'goods_id': good_id, 'is_on': is_on } this.$msgbox({ title: title, message: message, center: true, showCancelButton: true, confirmButtonText: '确定', cancelButtonText: '取消', beforeClose: (action, instance, done) => { if (action === 'confirm') { delgoodsStatus(data).then(res => { if (res.code == 1) { done() this.getList() } }) } else { done(); } } }).then(action => { this.$message({ type: 'success', message: '操作成功!' }); }); }, handledelsale(row, status, isall) {//删除还原 let good_id, is_on, title, message if (isall == 'one') { good_id = [row.goods_id] if (status == 'del') { // 0 删除 1还原 is_on = 0 title = "删除" message = "是否删除该商品!" } if (status == 'return') { is_on = 1 title = "还原" message = "是否还原该商品!" } } else if (isall == 'all') { good_id = this.ids if (status == 'del') { is_on = 0 title = "批量删除" message = "是否删除选中的商品!" } if (status == 'return') { is_on = 1 title = "批量还原" message = "是否还原选中的商品!" } } let data = { 'goods_id': good_id, 'is_on': is_on } this.$msgbox({ title: title, message: message, center: true, showCancelButton: true, confirmButtonText: '确定', cancelButtonText: '取消', beforeClose: (action, instance, done) => { if (action === 'confirm') { delgoodsStatus(data).then(res => { if (res.code == 1) { done() this.$message({ type: 'success', message: '操作成功!' }); this.getList() } else { done() this.$message({ type: 'warning', message: res.message }); } }) } else { done(); } } }).then(action => { // this.$message({ // type: 'success', // message: '操作成功!' // }); }); }, // 下架/申请上架 handleUpsale(row, status, isall) { //上下架 //console.log(442,row); let good_id, is_onsale, title, message if (isall == 'one') { good_id = [row.goods_id] if (status == 'up') { // 0 下架 1上架 is_onsale = 1 title = "商品上架" message = "是否上架该商品" } if (status == 'down') { is_onsale = 0 title = "商品下架" message = "是否下架该商品!" } } else if (isall == 'all') { good_id = this.ids if (status == 'up') { is_onsale = 1 title = "商品批量上架" message = "是否上架选中的商品!" } if (status == 'down') { is_onsale = 0 title = "商品批量下架" message = "是否下架选中的商品!" } } let data = { 'goods_id': good_id, 'is_onsale': is_onsale } this.$msgbox({ title: title, message: message, center: true, showCancelButton: true, confirmButtonText: '确定', cancelButtonText: '取消', beforeClose: (action, instance, done) => { if (action === 'confirm') { shelvesStatus(data).then(res => { if (res.code == 1) { done() this.getList() }else { this.$message({type: 'success', message: res.message ? res.message : '操作失败'}); } }) } else { done(); } } }).then(action => { this.$message({ type: 'success', message: '操作成功!' }); }); }, /** 批量取消申请上架 */ handleCancelUpale() { // id组成的数组 this.ids if( this.ids.length <= 0 ) { this.$message({type:'warning',message:'请先选择需要操作的数据'}); return } let isContinue = true; for (let i = 0; i < this.selectionsList.length; i++) { if(this.selectionsList[i].up_onsale != 1) { isContinue = false break } } // if (!isContinue) { this.$message({type:'warning',message:'所选商品中有部分未申请上架,请重新勾选'}); return } let ids = {goods_id:this.ids.join(',')}; this.$confirm('是否批量取消所选中的商品的上架申请', '批量取消申请上架', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', center: true }).then(async() => { let res = await cancelOnsaleAllData(ids) if (res.code == 1) { this.$message({type:'success',message:'批量取消成功'}); } else { this.$message({type:'success',message: res.message ? res.message : '批量取消失败'}); } this.getList() }).catch(() => {}); }, // 取消上架申请 handleCancelUpsale(row) { let id = { goods_id: 0 }; id.goods_id = row.goods_id ? row.goods_id : 0; this.$msgbox({ title: '取消商品上架申请', message: "是否取消选中商品的上架申请!", center: true, showCancelButton: true, confirmButtonText: '确定', cancelButtonText: '取消', beforeClose: (action, instance, done) => { if (action === 'confirm') { cancelOnsale(id).then(res => { if (res.code == 1) { done() this.getList() }else { this.$message({type: 'error', message: res.message ? res.message : '操作失败'}); } }) } else { done(); } } }).then(action => { this.$message({ type: 'success', message: '操作成功!' }); }); }, editgoods(row) {//商品编辑 // this.editisOpen = true let goodsId = Number(row.goods_id); // let goodsParam = { // goods_id: Number(row.goods_id) // }; this.$router.push({ path: '/system/goods/editgoods', query: { goods_id : goodsId } }); //this.$router.push({ path: '/system/goods/editgoods' }); }, /** 不下架 编辑部分商品信息 */ hotEditGoods(row) { let data = { goodsId: row.goods_id }; if (!data.goodsId) { return } // 获取运费模板 this.getFreightData(); getGoodsNew(data).then(res=> { if (res.code == 1 && res.data) { this.isHotEditGoods = true; this.stock = res.data.stock this.rowInfo = res.data this.hotEditGoodsForm.delay_compensate = res.data.delay_compensate this.hotEditGoodsForm.freight_id = res.data.freight_id this.hotEditGoodsForm.aftersale_time = res.data.aftersale_time // 规格组合 this.speList = [] this.speListone = [] if (res.data.specs && res.data.specs_group) { let nameArr = [] res.data.specs.map(item => { nameArr.push(item.spec_name) }) for (let i = 0, len = res.data.specs_group.length; i < len; i++) { this.speList.push({ nameArr, spec_name: res.data.specs_group[i].spec_values, stock: res.data.specs_group[i].stock, id: res.data.specs_group[i].id }) } for (let i = 0, len = this.speList.length; i < len; i++) { let arr = [] for (let j = 0, len = res.data.specs.length; j < len; j++) { arr.push({ name: this.speList[i].nameArr[j], spec_values: this.speList[i].spec_name[j] }) } this.speList[i].objArr = arr } }else{ debugger this.speListone.push({ stock:res.data.stock }) } } }); console.log(this.speList) }, /** 保存 不下架 编辑商品 */ saveHotEditGoods() { let groupArr = [] this.speList.map(item => { groupArr.push({ id: item.id, stock: item.stock }) }) let data = { goods_id: this.rowInfo.goods_id, delay_compensate: this.hotEditGoodsForm.delay_compensate, aftersale_time: this.hotEditGoodsForm.aftersale_time, freight_id: this.hotEditGoodsForm.freight_id, specs_group: this.speList.length ? groupArr : undefined, stock: this.speList.length ? undefined : this.speListone[0].stock } saveHotEditGoodsData(data).then(res=> { if (res.code == 1) { this.$message({ type: 'success', message: '保存成功' }) this.getList() } }); }, /** 不下架编辑 退出*/ cancelHotEditGoods() { this.isHotEditGoods = false; }, lookdetail(row) {//预览商品详情 this.isOpen = true this.goodDetails.goods_id = row.goods_id }, radiomodelbtn(val) { //头部切换 //console.log(505,val) this.formInline = { page: 1, limit: 20, goods_name: '', goods_id: '', status: '5', uptime: '', price_min: '', price_max: '' } this.getList() }, closeEditGoods(val) { this.editisOpen = false; this.getList(); }, //格式化状态 formatDefault(row) { var types = row.IsDefault var optDes = '' if (types == 1) { optDes = "是" } else if (types == 0) { optDes = "否" } return optDes }, //格式化时间 formatTime(row) { var Time = row.add_time var newtime = "" if (Time > 0) { newtime = dateFormat(Time * 1000, "Y-m-d H:i:s"); } return newtime }, /** 查询freight列表 */ getList() { //debugger let data = { page: this.formInline.page, limit: this.formInline.limit, } if (this.radiomodel === 1) { data['is_onsale'] = 1 data['is_on'] = 1 data['up_onsale'] = 0 } if (this.radiomodel === 2) { data['is_onsale'] = 0 data['is_on'] = 1 data['up_onsale'] = 0 } if (this.radiomodel === 3) { data['up_onsale'] = Number(this.formInline.status) data['is_onsale'] = 0 data['is_on'] = 1 } if (this.radiomodel === 4) { data['is_on'] = 0 } if (this.formInline.goods_name) { data['goods_name'] = this.formInline.goods_name } if (this.formInline.goods_id) { data['goods_id'] = this.formInline.goods_id } if (this.formInline.uptime && this.formInline.uptime.length == 2) { data['start_time'] = this.formInline.uptime[0] / 1000 data['end_time'] = this.formInline.uptime[1] / 1000 + 86399 } if (this.formInline.price_min && this.formInline.price_max) { data['price_min'] = this.formInline.price_min data['price_max'] = this.formInline.price_max } //console.log("查询list的参数:", data); getlistGoods(data).then(res => { if (res.data) { this.freightList = res.data.list; this.total = res.data.count; this.downsale_count = res.data.downsale_count//仓库数量 this.onsale_count = res.data.onsale_count//上架数量 this.del_count = res.data.del_count//删除数量 } }); }, // 取消按钮 cancel() { this.isOpen = false; this.reset(); }, /** 搜索按钮操作 */ handleQuery() { this.formInline.page = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.selectionsList = selection; this.ids = selection.map(item => item.goods_id) this.single = selection.length !== 1 this.multiple = !selection.length }, } //methods结束 }; </script> <style scoped lang="scss" type="text/stylus"> .app-container { width: 100%; height: 100%; } .goods-manage-card >>> .el-card__body { height: calc(100% - 61px); overflow-y : auto; } .freightTemplate-add { ::v-deep .el-dialog { height: 80%; overflow: hidden; } ::v-deep .el-dialog__body { height: calc(100% - 60px); overflow-x: hidden; overflow-y: scroll; } } .radiomodels .el-radio-button { margin: 0 10px; } ::v-deep .radiomodels .el-radio-button .el-radio-button__inner { border: 1px solid #DCDFE6 !important; border-radius: 4px !important; } ::v-deep .radiomodels .el-radio-button .el-radio-button__orig-radio:checked + .el-radio-button__inner { box-shadow: none; } .queryFormInline { padding-bottom: 20px; } .hot-edit-goods-tips { color: red; font-size: 14px; width: 80%; margin: 0 auto 20px; line-height: 20px; } /* 弹窗 样式 重置 */ .dialog-spe >>> .el-dialog { width: 75%; height: 75%; overflow: hidden; } .dialog-spe >>> .el-dialog .el-dialog__body { height:calc(100% - 115px); padding: 0 20px 20px 40px; overflow: auto; } .hot-edit-goods-table { width: 90%; margin: 20px auto 0; } </style>