| 1 |
- @extends('layouts.base')
@section('title', '单品风控')
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<div class="all">
<div id="app" v-cloak>
<div class="vue-main">
<div class="vue-main-title">
<div class="vue-main-title-left"></div>
<div class="vue-main-title-content">风控商品列表</div>
<div class="vue-main-title-button">
<el-button type="primary" plain icon="el-icon-plus" size="small" @click="addGoods">添加风控商品</el-button>
</div>
</div>
<div class="vue-main-form">
<el-button size="mini" @click="patchDel">批量删除风控商品</el-button>
<el-table :data="list" style="width: 100%" @selection-change="selectedGoods">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="ID" align="center" width="120"></el-table-column>
<el-table-column label="商品">
<template slot-scope="scope">
<img v-if="scope.row.thumb" :src="scope.row.thumb" onerror="this.src='/addons/yun_shop/static/resource/images/nopic.jpg'; this.title='图片未找到.'" style="width:50px;height:50px"></img>
<a :href="'{{ yzWebFullUrl('plugin.yz-supply.admin.shop-goods.edit', array('id' => '')) }}'+[[scope.row.id]]">
[[scope.row.title]]
</a>
</template>
</el-table-column>
<el-table-column label="价格">
<template slot-scope="scope">
[[scope.row.price]]
</template>
</el-table-column>
<el-table-column label="库存">
<template slot-scope="scope">
[[scope.row.stock]]
</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
[[scope.row.status_name]]
</template>
</el-table-column>
<el-table-column prop="refund_time" label="操作" align="center" width="320">
<template slot-scope="scope">
<el-link title="删除" :underline="false" @click="oneDel(scope.row.id)" style="width:50px;">
<i class="iconfont icon-ht_operation_delete"></i>
</el-link>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 单品风控商品添加 -->
<el-dialog :visible.sync="confirm_search_show" width="750px" title="单品风控商品添加">
<div style="height:400px;overflow:auto" id="confirm-send">
<el-form ref="goods_search" :model="goods_search" :rules="goods_search_rules" label-width="15%">
<div >
<el-form-item label="商品名称" prop="">
<el-input v-model="goods_search.title" :disabled='readonly' style="width:70%;"></el-input>
<el-button type="primary" icon="el-icon-search" @click="searchGoods()">搜索</el-button>
</el-form-item>
</div>
<el-table ref="multipleTable" :data="goods_search_list" tooltip-effect="dark" height="250" style="width: 100%" @selection-change="moreGoodsChange">
<el-table-column type="selection" :selectable="checkSelectable" width="55"></el-table-column>
<el-table-column width="550">
<template slot-scope="scope">
<div style="display:flex;width: 88%;">
<div style="width:50px;height:50px">
<img :src="scope.row.thumb" alt="" style="width:50px;height:50px">
</div>
<div style="margin-left:20px;display: flex;flex-direction: column;justify-content: space-between;">
<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">[[scope.row.title]]</div>
<div style="color:#999">[[scope.row.id]]</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="confirm_search_show = false">取 消</el-button>
<el-button type="primary" @click="sureconfirmAdd()">确认添加</el-button>
</span>
</el-dialog>
<!-- 分页 -->
<div class="vue-page" >
<el-row>
<el-col align="right">
<el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
:page-size="per_page" :current-page="current_page" background
></el-pagination>
</el-col>
</el-row>
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
delimiters: ['[[', ']]'],
name: 'test',
data() {
return {
list:[],
rules: {},
current_page:1,
total:1,
per_page:1,
id:'',
name:'',
search_form:{},
selectedBranchs:[],
readonly:false,
confirm_search_show:false,// 确认发货弹窗
//商品搜索条件
goods_search:{
title:"",
},
goods_search_rules:{
},
yz_goods_control_ids:[],//已添加的id
goods_search_list:[
],
goods_ids:[],//选择的商品id
del_goods_ids:[],
}
},
created() {
},
mounted() {
this.getData(1);
},
methods: {
//检验商品是否可以选
checkSelectable(item){
return item.select_status == 0;
},
sureconfirmAdd(){
if(this.goods_ids.length == 0){
this.$message({
message: '请选择要添加风控的商品',
type: 'error'
});
return false;
}
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-control.add') !!}',{goods: this.goods_ids}).then(function(response) {
if (response.data.result) {
this.$message({
message: response.data.msg,
type: 'success'
});
loading.close();
this.confirm_search_show = false;
this.getData(1);
} else {
this.$message({
message: response.data.msg,
type: 'error'
});
}
loading.close();
}, function(response) {
this.$message({
message: response.data.msg,
type: 'error'
});
loading.close();
});
},
searchGoods(){
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-control.goods-search') !!}',{keyword: this.goods_search.title}).then(function(response) {
if (response.data.result) {
this.goods_search_list = response.data.data.data;
loading.close();
} else {
this.$message({
message: response.data.msg,
type: 'error'
});
}
loading.close();
}, function(response) {
this.$message({
message: response.data.msg,
type: 'error'
});
loading.close();
});
},
//选择商品
selectedGoods(selection) {
let arr = [];
for(let j = 0,len = selection.length; j < len; j++){
console.log(selection[j].id);
arr.push(selection[j].id);
}
this.del_goods_ids = arr;
},
//选择商品
moreGoodsChange(selection) {
let arr = [];
for(let j = 0,len = selection.length; j < len; j++){
console.log(selection[j].id);
arr.push(selection[j].id);
}
this.goods_ids = arr;
},
getData(page,json) {
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-control.index') !!}',{page:page,search:json}).then(function(response) {
if (response.data.result) {
this.list = response.data.data.data;
this.current_page=response.data.data.current_page;
this.total=response.data.data.total;
this.per_page=response.data.data.per_page;
console.log(this.total);
loading.close();
} else {
this.$message({
message: response.data.msg,
type: 'error'
});
}
loading.close();
}, function(response) {
this.$message({
message: response.data.msg,
type: 'error'
});
loading.close();
});
},
search(val) {
var that = this;
let json = {
id: that.search_form.id,
name: that.search_form.name,
};
console.log(json)
this.getData(val,json);
},
// 添加新风控商品
addGoods() {
this.confirm_search_show = true;
this.confirm_send_con = "";
this.goods_search = {
title:"",
}
this.goods_search_list = [];
this.goods_ids = [];
},
patchDel(){
if(this.del_goods_ids.length == 0){
this.$message({type: 'error',message: '请选择要删除的商品'});
return false;
}
this.del();
},
oneDel(id){
this.del_goods_ids.push(id);
this.del();
},
del() {
this.$confirm('确定删除吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
this.$http.post('{!! yzWebFullUrl('plugin.yz-supply.admin.goods-control.delete') !!}',{ids:this.del_goods_ids}).then(function (response) {
if (response.data.result) {
this.$message({type: 'success',message: '删除成功!'});
this.getData(1);
}
else{
this.$message({type: 'error',message: response.data.msg});
}
loading.close();
},function (response) {
this.$message({type: 'error',message: response.data.msg});
loading.close();
}
);
}).catch(() => {
this.$message({type: 'info',message: '已取消删除'});
});
},
},
})
</script>
@endsection
|
