<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
|
<link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
|
<link rel="stylesheet" th:href="@{/plugin/bootstrap-3.3.5/css/bootstrap.min.css}">
|
<link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
|
</head>
|
|
<body>
|
<div class="ibox-content" id="app" v-cloak>
|
<el-form label-width="120px" >
|
<el-row>
|
<p class="el-big-title">分销设置</p>
|
</el-row>
|
<el-row style="margin-top: 20px;">
|
<el-col>
|
<template v-for="paramSettingOne in fxkg">
|
<el-form-item>
|
<span slot="label">{{paramSettingOne.paramName}}</span>
|
<el-col >
|
<el-radio-group v-model="paramSettingOne.paramValue">
|
<el-radio v-model="paramSettingOne.paramValue" :label="'1'">开启分销</el-radio>
|
<el-radio v-model="paramSettingOne.paramValue" :label="'2'">关闭分销</el-radio>
|
</el-radio-group>
|
</el-col>
|
</el-form-item >
|
</template>
|
</el-col>
|
</el-row>
|
|
<el-row style="margin-top: 20px;">
|
<el-col>
|
<template v-for="paramSettingTwo in fxms">
|
<el-form-item>
|
<span slot="label">{{paramSettingTwo.paramName}}</span>
|
<el-col>
|
<el-radio-group v-model="paramSettingTwo.paramValue">
|
<el-radio :label="'1'">一级分销</el-radio>
|
<el-radio :label="'2'">二级分销</el-radio>
|
</el-radio-group>
|
</el-col>
|
</el-form-item >
|
</template>
|
</el-col>
|
</el-row>
|
|
<el-row style="margin-top: 20px;">
|
<el-col>
|
<template v-for="paramSettingThree in sqfs">
|
<el-form-item>
|
<span slot="label">{{paramSettingThree.paramName}}</span>
|
<el-col>
|
<el-radio-group v-model="paramSettingThree.paramValue" @change="sqfsChange">
|
<div style="margin-top: 12px;"><el-radio :label="'1'">无需申请满足条件自动成为分销员</el-radio></div>
|
<div style="margin-top: 20px;"><el-radio :label="'2'">需要客户主动申请</el-radio></div>
|
</el-radio-group>
|
</el-col>
|
</el-form-item >
|
</template>
|
</el-col>
|
</el-row>
|
|
<el-row v-show="isShow" style="margin-top: 20px;">
|
<el-col>
|
<template v-for="paramSettingFive in sqtj">
|
<el-form-item>
|
<span slot="label">{{paramSettingFive.paramName}}</span>
|
<el-col>
|
<el-radio-group v-model="paramSettingFive.paramValue">
|
<div style="margin-top: 12px;"><el-radio :label="'1'">无条件注册即可成为分销员</el-radio></div>
|
<div style="margin-top: 25px;"><el-radio :label="'2'">消费任意产品可成为分销员</el-radio></div>
|
<div style="margin-top: 25px;display:flex;align-items: center;">
|
<el-radio :label="'3'">消费指定产品可成为分销员</el-radio>
|
<div style="display:flex;align-items: center;">
|
<el-button type="primary" @click="drawer = true">设置产品</el-button>
|
<el-input style="width:100px;display: none;" v-model="paramSettingFive.paramValue1"></el-input>
|
<el-input style="width:100px;display: none;" v-model="cpid"></el-input>
|
</div>
|
</div>
|
<div style="margin-top: 25px;display:flex;align-items: center;">
|
<el-radio :label="'4'">消费指定金额可成为分销员</el-radio>
|
<div style="display:flex;align-items: center;">
|
<el-input style="width:100px;" v-model="paramSettingFive.paramValue2" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
|
<div style="font-size: 14px;align-items: center;">元</div>
|
</div>
|
</div>
|
</el-radio-group>
|
</el-col>
|
</el-form-item >
|
</template>
|
</el-col>
|
</el-row>
|
|
<el-row v-show="isShow" style="margin-top: 20px;">
|
<el-col>
|
<template v-for="paramSettingFour in shfs">
|
<el-form-item>
|
<span slot="label">{{paramSettingFour.paramName}}</span>
|
<el-col>
|
<el-radio-group v-model="paramSettingFour.paramValue">
|
<div style="margin-top: 12px;"><el-radio :label="'1'">系统自动审核</el-radio></div>
|
<div style="margin-top: 20px;"><el-radio :label="'2'">人工审核</el-radio></div>
|
</el-radio-group>
|
</el-col>
|
</el-form-item >
|
</template>
|
</el-col>
|
</el-row>
|
|
|
<el-drawer
|
title="分销产品"
|
:visible.sync="drawer"
|
:direction="direction"
|
size="90%"
|
>
|
<el-row >
|
<el-col :span="24">
|
<el-row class="vertical ">
|
<el-input class="searchInput" @input="searchGoods()" v-model="queryKey"
|
placeholder="搜索添加产品"></el-input>
|
<el-button @click="searchGoods()" type="primary">搜索</el-button>
|
</el-row>
|
|
<div class="searchResultTable" style="width: 50%" v-show="showSearchTable">
|
<!-- 搜索加载数据表格 -->
|
<el-table
|
ref="dataTable"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
@selection-change="handleSelectionChange"
|
@row-click="handleClickTableRow"
|
:max-height="400"
|
:data="searchTableData"
|
style="width: 100%">
|
<el-table-column
|
type="selection"
|
width="50">
|
</el-table-column>
|
<el-table-column
|
prop="id"
|
label="ID">
|
</el-table-column>
|
|
<el-table-column
|
prop="title"
|
label="产品名称">
|
</el-table-column>
|
<el-table-column
|
prop="price"
|
label="价格">
|
</el-table-column>
|
<el-table-column
|
prop="score"
|
label="积分">
|
</el-table-column>
|
<el-table-column
|
prop="attrValues"
|
label="产品属性">
|
</el-table-column>
|
<el-table-column
|
label="是否上架">
|
<template slot-scope="scope">
|
<span v-if="scope.row.status == 1">是</span>
|
<span v-if="scope.row.status == 2">否</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="150"
|
prop="address"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="primary"
|
size="mini"
|
@click="handleEdit(scope.$index, scope.row)">选择
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-row class="btn-box">
|
<el-button size="mini" type="danger" @click="closeXm()">关闭</el-button>
|
<el-button size="mini" type="primary" @click="chouseGoods()">确认</el-button>
|
</el-row>
|
</div>
|
|
<el-row class="mt-10">
|
<el-table
|
:stripe="true"
|
:border="true"
|
:height="tableHeight"
|
:data="order"
|
style="width: 100%">
|
<el-table-column
|
type="index"
|
width="50">
|
</el-table-column>
|
<el-table-column
|
prop="id"
|
width="280"
|
label="产品ID">
|
</el-table-column>
|
<el-table-column
|
prop="title"
|
width="280"
|
label="产品名称">
|
</el-table-column>
|
<el-table-column
|
prop="attrValues"
|
width="80"
|
label="产品属性">
|
</el-table-column>
|
<el-table-column
|
prop="price"
|
label="单价">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="primary"
|
size="mini"
|
@click="removeItem(scope.$index, scope.row)">删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-row>
|
<el-row class="mt-20 vertical">
|
<el-col :span="14" class="btn-box">
|
<el-button type="primary" @click="submitOrder()">保存</el-button>
|
<el-button type="danger" @click="drawer = false">取消</el-button>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</el-drawer>
|
<el-row justify="center" type="flex">
|
<el-button type="primary" @click="submit()">保存</el-button>
|
</el-row>
|
</el-form>
|
</div>
|
</body>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/bootstrap-3.3.5/js/bootstrap.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>
|
<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>
|
<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
cpid:"",
|
//业绩设置框
|
drawer: false,
|
direction: 'rtl',
|
order: [],
|
tableHeight: 500,
|
/*****搜索表格数据*********/
|
//搜索关键词
|
queryKey: '',
|
//是否展示搜索表格
|
showSearchTable: false,
|
//搜索表格数据
|
searchTableData: [],
|
//表格加载效果
|
loading: false,
|
/******搜索表格数据END********/
|
val:'',
|
isShow:true,
|
fxkg:[],
|
fxms:[],
|
sqfs:[],
|
shfs:[],
|
sqtj:[],
|
},
|
created: function () {
|
this.loadInfo();
|
},
|
mounted: function () {
|
},
|
|
methods: {
|
//加载分类
|
loadInfo() {
|
let _this = this;
|
_this.loadParamSetting();
|
},
|
sqfsChange(val){
|
let _this = this;
|
_this.isShow=(val==2)?true:false;
|
},
|
loadParamSetting() {
|
let _this = this;
|
//加载配置
|
AjaxProxy.requst({
|
app: _this,
|
data: {},
|
url: basePath + '/fenXiao/ruleSetting/selectFenXiaoSetting',
|
callback: function (data) {
|
_this.fxkg = data.mapInfo.fxkg;
|
_this.fxms = data.mapInfo.fxms;
|
_this.sqfs = data.mapInfo.sqfs;
|
if(_this.sqfs.length > 0){
|
let paramssqfs = _this.sqfs[0].paramValue;
|
if(paramssqfs == 2){
|
_this.isShow = true;
|
}else{
|
_this.isShow = false;
|
}
|
}
|
_this.shfs = data.mapInfo.shfs;
|
_this.sqtj = data.mapInfo.sqtj;
|
_this.order = data.mapInfo.order;
|
}
|
});
|
},
|
setSelectGoods(data){
|
console.log(data);
|
},
|
|
//选择产品
|
handleEdit(index, row) {
|
this.pushToSelectGoods(row);
|
},
|
pushToSelectGoods(goods) {
|
|
//判断是否被选中
|
let selected = false;
|
for(let i = 0; i < this.order.length; i++){
|
if (this.order[i].id === goods.id) {
|
selected = true;
|
return;
|
}
|
}
|
alert(selected);
|
if (!selected) {
|
//未选中产品加入列表
|
let item = {};
|
item.ShopProduct = goods;
|
item.goodsId = goods.id;
|
item.count = 1;
|
this.order.push(item.ShopProduct);
|
}
|
|
},
|
|
/**
|
* 点击多选
|
*/
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
/**
|
* 提交表单订单
|
* submitType 1 提交，2保存
|
*/
|
submitOrder(submitType) {
|
let _this = this;
|
let submitDate ="";
|
for (let i = 0; i < _this.order.length; i++) {
|
let ShopProduct = _this.order[i];
|
let goodsId = ShopProduct.id;
|
submitDate = submitDate +goodsId+",";
|
}
|
alert(submitDate);
|
_this.cpid = submitDate;
|
_this.drawer = false;
|
},
|
/**
|
* 批量选择产品
|
*/
|
chouseGoods() {
|
let _this = this;
|
this.closeXm();
|
},
|
/**
|
* 行点击事件
|
*/
|
handleClickTableRow(row, event, column) {
|
this.pushToSelectGoods(row);
|
},
|
/**
|
* 删除组合产品
|
*/
|
removeItem(index, row) {
|
this.order.splice(index, 1);
|
},
|
/**
|
* 搜索项目绑定的产品信息
|
*/
|
searchGoods() {
|
let _this = this;
|
if (this.queryKey && this.queryKey.trim().length > 0) {
|
this.showSearchTable = true;
|
this.loading = true;
|
AjaxProxy.requst({
|
app: _this,
|
contentType: 'application/x-www-form-urlencoded',
|
//TODO 优化下拉加载
|
data: {name: _this.queryKey, limit: 10000},
|
url: basePath + "/fenXiao/ruleSetting/selectProduct",
|
callback: function (data) {
|
_this.searchTableData = data.rows;
|
_this.loading = false;
|
}
|
});
|
} else {
|
this.showSearchTable = false;
|
}
|
},
|
closeXm() {
|
this.showSearchTable = false;
|
},
|
|
submit() {
|
console.log("提交");
|
let _this = this;
|
let submitDate = [];
|
for (let i = 0; i < _this.fxkg.length; i++) {
|
let paramSetting = _this.fxkg[i];
|
let paramCode = paramSetting.paramCode;
|
let paramValue = paramSetting.paramValue;
|
let paramValue1 = paramSetting.paramValue1;
|
let paramValue2 = paramSetting.paramValue2;
|
|
let obj = {
|
paramCode: paramCode,
|
paramValue: paramValue,
|
paramValue1: paramValue1,
|
paramValue2: paramValue2,
|
}
|
submitDate.push(obj);
|
}
|
for (let i = 0; i < _this.fxms.length; i++) {
|
let paramSetting = _this.fxms[i];
|
let paramCode = paramSetting.paramCode;
|
let paramValue = paramSetting.paramValue;
|
let paramValue1 = paramSetting.paramValue1;
|
let paramValue2 = paramSetting.paramValue2;
|
|
let obj = {
|
paramCode: paramCode,
|
paramValue: paramValue,
|
paramValue1: paramValue1,
|
paramValue2: paramValue2,
|
}
|
submitDate.push(obj);
|
}
|
for (let i = 0; i < _this.sqfs.length; i++) {
|
let paramSetting = _this.sqfs[i];
|
let paramCode = paramSetting.paramCode;
|
let paramValue = paramSetting.paramValue;
|
let paramValue1 = paramSetting.paramValue1;
|
let paramValue2 = paramSetting.paramValue2;
|
|
let obj = {
|
paramCode: paramCode,
|
paramValue: paramValue,
|
paramValue1: paramValue1,
|
paramValue2: paramValue2,
|
}
|
submitDate.push(obj);
|
}
|
for (let i = 0; i < _this.shfs.length; i++) {
|
let paramSetting = _this.shfs[i];
|
let paramCode = paramSetting.paramCode;
|
let paramValue = paramSetting.paramValue;
|
let paramValue1 = paramSetting.paramValue1;
|
let paramValue2 = paramSetting.paramValue2;
|
|
let obj = {
|
paramCode: paramCode,
|
paramValue: paramValue,
|
paramValue1: paramValue1,
|
paramValue2: paramValue2,
|
}
|
submitDate.push(obj);
|
}
|
for (let i = 0; i < _this.sqtj.length; i++) {
|
let paramSetting = _this.sqtj[i];
|
let paramCode = paramSetting.paramCode;
|
let paramValue = paramSetting.paramValue;
|
let paramValue1;
|
let paramValue2;
|
if(paramValue === '3'){
|
paramValue1 = _this.cpid;
|
}else if(paramValue === '4'){
|
paramValue2 = paramSetting.paramValue2;
|
}
|
let obj = {
|
paramCode: paramCode,
|
paramValue: paramValue,
|
paramValue1: paramValue1,
|
paramValue2: paramValue2,
|
}
|
submitDate.push(obj);
|
}
|
|
AjaxProxy.requst({
|
app: _this,
|
data: submitDate,
|
url: basePath + '/fenXiao/ruleSetting/updateFenXiaoSetting',
|
callback: function (data) {
|
_this.$message({
|
message: data.info,
|
type: 'success',
|
onClose: function () {
|
_this.loadParamSetting();
|
}
|
});
|
}
|
});
|
}
|
}
|
})
|
</script>
|
|
</body>
|
</html>
|
