<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-29 14:12:11
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-04-30 11:29:43
|
* @Description: 分配-模板
|
-->
|
<template>
|
<div class="box ">
|
<v-navbar title="分配模板" fixed>
|
<template v-slot:right>
|
<div class="flex-center-g" @click="isShowFilter = true;">
|
<span>筛选</span>
|
<svg class="icon" aria-hidden="true" style="width:18px;height:18px;">
|
<use xlink:href="#iconshaixuan"></use>
|
</svg>
|
</div>
|
</template>
|
</v-navbar>
|
<van-search
|
v-model="searchKey"
|
shape="round"
|
placeholder="请输入商户名称"
|
@search="onSearch"
|
@clear="onCancel"
|
/>
|
|
<section class="section">
|
<div class="flex-between-g title">
|
<p class="left">为以下商户分配【模板】</p>
|
<p class="right flex-start-g">
|
<span>{{isSelectAll ? '取消':'全选'}}</span>
|
<van-checkbox v-model="isSelectAll" class="icon" @change="setCheckResult"></van-checkbox>
|
</p>
|
</div>
|
<van-checkbox-group v-model="checkResult">
|
<hList :defScroll='30' :finished='finished' :loading="loading" @scroll="saleOrderLoad" height="74vh">
|
<div class="list-box">
|
<div class="item flex-between-g" v-for="(item, index) in list" :key="index">
|
<div class="flex-start-g">
|
<div class="icon-box flex-center-g">
|
<svg class="icon" aria-hidden="true" style="width:22px;height:22px;fill:#fff;">
|
<use xlink:href="#iconshanghuguanliliebiao"></use>
|
</svg>
|
</div>
|
<div>
|
<p class="name" v-text="item.merName">商户名称</p>
|
<p class="tel" v-text="item.merId">未配置产品</p>
|
</div>
|
</div>
|
<van-checkbox :key="item.merId" :name="item.merId" :disabled="item.status===1"></van-checkbox>
|
</div>
|
</div>
|
</hList>
|
</van-checkbox-group>
|
</section>
|
|
<footer class="footer">
|
<van-button class="btn" @click="save">确认分配</van-button>
|
</footer>
|
|
<v-filter v-model="isShowFilter" :areaList="areaList" :templateArr="templateArr" :hasTime="false" :hasMoney="false" hasCity :belongArr="belongArr" @search="init"></v-filter>
|
|
</div>
|
</template>
|
|
|
<script>
|
import {calcAreaTwo} from '@/utils/index';
|
import hList from '../../components/common/h-list';
|
export default {
|
components:{
|
hList
|
},
|
data() {
|
return {
|
searchKey:'',
|
finished:false,
|
loading:false,
|
isShowFilter:false,
|
isSelectAll: false,
|
checkResult: [],
|
list: [],
|
belongArr:[],
|
templateArr:[],
|
areaList:{},
|
Area:[]
|
}
|
},
|
computed:{
|
tempId(){
|
return this.$route.query.id || '';
|
}
|
},
|
created() {
|
this.init()
|
this.merInit()
|
this.getArea()
|
},
|
methods: {
|
// 确认搜索
|
onSearch(){
|
this.$api.getTempMerList({
|
tempId:this.tempId,
|
searchKey:this.searchKey
|
}).then(res=>{
|
this.list = [...res.body]
|
})
|
},
|
// 取消搜索
|
onCancel(){
|
this.$api.getTempMerList({
|
tempId:this.tempId,
|
searchKey:this.searchKey
|
}).then(res=>{
|
this.list = [...res.body]
|
})
|
},
|
// 下滑刷新
|
saleOrderLoad(params={}){
|
//this.checkResult = [];
|
this.isSelectAll = false;
|
params.tempId = this.tempId;
|
if(this.list.length >= 10){
|
params.merId = this.list[this.list.length-1].merId
|
}
|
this.$api.getTempMerList(params).then((res) => {
|
if(res.body.length < 10){
|
this.list = [...this.list,...res.body]
|
this.finished = true
|
this.loading = false
|
}else{
|
this.list = [...this.list,...res.body]
|
this.loading = false
|
this.finished = false
|
}
|
this.list.forEach(item=>{
|
if(item.status!==0){
|
this.checkResult.push(item.merId)
|
}
|
})
|
this.isShowFilter = false;
|
}).catch((err) => {
|
|
});
|
},
|
// 保存分配
|
save(){
|
let arr = this.checkResult.map(item=>item+'')
|
this.$api.saveMerListTemp({
|
merIdList:arr,
|
tempId:this.$route.query.id
|
}).then((res) => {
|
this.$notify('模板分配成功')
|
this.$router.back()
|
}).catch((err) => {
|
|
});
|
},
|
init(params={}){
|
this.checkResult = [];
|
this.isSelectAll = false;
|
params.tempId = this.tempId;
|
this.$api.getTempMerList(params).then((res) => {
|
let list = res.body || [];
|
list.forEach(item=>{
|
if(item.status!==0){
|
this.checkResult.push(item.merId)
|
}
|
})
|
if(res.body.length < 10){
|
this.finished = true
|
}
|
this.list = list;
|
this.isShowFilter = false;
|
}).catch((err) => {
|
|
});
|
},
|
merInit(){
|
this.$api.merInitFilter().then(({body}) => {
|
let chanList =body.chanList || [];
|
let templateArr =body.tempList || [];
|
|
chanList = chanList.map(val => {
|
val.name = val.chanName;
|
val.code = val.chanId;
|
return val;
|
});
|
|
templateArr = templateArr.map(val => {
|
val.name = val.tempName;
|
val.code = val.id;
|
return val;
|
});
|
|
|
if (this.orgType !== 2) {
|
this.belongArr = chanList;
|
this.templateArr = templateArr;
|
}
|
});
|
},
|
// 获取地区
|
getArea(){
|
this.$api.getOrgAreaInfo(2).then(res => {
|
let arr = [];
|
let list = res.body || [];
|
this.parseArea(list)
|
this.areaList = calcAreaTwo(this.Area)
|
});
|
},
|
// 全选 取消
|
setCheckResult(v) {
|
if (v) {
|
this.list.forEach(item => {
|
|
this.checkResult.push(item.merId)
|
})
|
} else {
|
this.checkResult = []
|
this.list.forEach(item => {
|
if(item.status===1){
|
this.checkResult.push(item.merId)
|
}
|
})
|
}
|
},
|
parseArea(list,){
|
list.forEach(item=>{
|
let childList = item.childList;
|
this.Area.push({
|
name:item.name,
|
value:item.code
|
})
|
if(Array.isArray(childList)){
|
this.parseArea(childList)
|
}
|
})
|
},
|
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.box {
|
padding-top: 55px;
|
background-color: @c-bg-f5;
|
padding-bottom: 50px;
|
}
|
|
.title {
|
.lh(50px);
|
padding: 0 20px 0 8px;
|
background-color: @c-bg-fff;
|
|
.left {
|
color: @c-text-666;
|
}
|
|
.right {
|
color: @c-text-999;
|
|
.icon {
|
margin-left: 8px;
|
}
|
}
|
}
|
|
.section {
|
background: @c-bg-fff;
|
//padding-bottom: 20px;
|
}
|
|
.item {
|
margin: 0 8px 10px;
|
box-shadow: 0px 0px 5px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 3px;
|
background: @c-bg-fff;
|
padding: 0 12px;
|
height: 67px;
|
|
.icon-box {
|
height: 32px;
|
width: 32px;
|
margin-right: 15px;
|
border-radius: 50%;
|
background: @c-bg-black;
|
}
|
|
.name {
|
font-weight: bold;
|
}
|
|
.tel {
|
font-size: @font-12;
|
color: @c-text-666;
|
margin-top: 5px;
|
}
|
|
.btn {
|
.lh(25px);
|
padding: 0 12p;
|
background: @c-bg-default;
|
border-radius: 13px;
|
color: @c-text-fff;
|
}
|
}
|
|
.footer {
|
.flex(center);
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
height: 50px;
|
background-color: @c-bg-fff;
|
|
.btn {
|
.lh(44px);
|
color: @c-text-fff;
|
background-color: @c-bg-default;
|
border-radius: 22px;
|
width: 320px;
|
}
|
}
|
</style>
|
