Commit 7813595d by zhangmeng

提交

parent 9e4bd84e
......@@ -152,6 +152,7 @@
overflow: hidden;
padding:0 6px;
line-height: 28px;
vertical-align: middle;
}
.dm-store__inputtag--tips {
padding:6px;
......
......@@ -3,23 +3,24 @@
<el-select v-model="leftValue" placeholder="请选择" class="w200 inline-block">
<el-option v-for="(v,i) in leftList" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<com-type v-if="leftValue === 1" :uuid="newUuid"></com-type>
<com-tags v-if="leftValue === 2" :uuid="newUuid"></com-tags>
<com-area v-if="leftValue === 3" :uuid="newUuid"></com-area>
<com-group v-if="leftValue === 4" :uuid="newUuid"></com-group>
<com-part v-if="leftValue === 5" :uuid="newUuid"></com-part>
<option-type v-if="storeType === 1" :uuid="newUuid"></option-type>
<option-tags v-if="storeType === 2" :uuid="newUuid"></option-tags>
<option-area v-if="storeType === 3" :uuid="newUuid"></option-area>
<option-group v-if="storeType === 4" :uuid="newUuid"></option-group>
<option-part v-if="leftValue === 5" :uuid="newUuid"></option-part>
</section>
</template>
<script>
import comType from './partials/com-type';
import comArea from './partials/com-area';
import comTags from './partials/com-tags';
import comPart from './partials/com-part';
import comGroup from './partials/com-group';
import uuidv1 from 'uuid/v1';
import qs from 'qs';
import uuidv1 from 'uuid/v1';
import { baseUrl } from './config';
import optionType from './options/option-type';
import optionArea from './options/option-area';
import optionTags from './options/option-tags';
import optionGroup from './options/option-group';
import optionPart from './options/option-part';
export default {
name:'vue-gic-store-new',
props:{
......@@ -29,11 +30,11 @@ export default {
}
},
components:{
'com-type':comType,
'com-area':comArea,
'com-tags':comTags,
'com-part':comPart,
'com-group':comGroup
'option-type':optionType,
'option-area':optionArea,
'option-tags':optionTags,
'option-group':optionGroup,
'option-part':optionPart
},
data() {
return {
......
<template>
<el-popover class="inline-block" placement="bottom-start" width="406" height="400" trigger="click" v-model="popoverShow">
<div class="dm-store__area" style="height: 400px;">
<!-- 左侧 -->
<div class="dm-store__left">
<div class="dm-store__list" style="height:100%;">
<p v-for="(v,i) in areaList" :key="i" class="dm-store__item">
<el-checkbox :indeterminate="v.indeterminate" v-model="v.isCheck" @change="checkProvinceChange(v,i)">{{v.provinceName}}</el-checkbox>
</p>
<div v-for="(v,i) in areaList" :key="i" class="dm-store__item" @click="clickProvince(v,i)">
<div>
<el-checkbox class="inline-block" :indeterminate="v.indeterminate" v-model="v.isCheck" @change="checkProvinceChange(v,i)"></el-checkbox>
<span class="inline-block"> {{v.provinceName}}</span>
</div>
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="dm-store__right">
<div class="dm-store__list" style="height:100%;">
<p v-for="(v,i) in currentCityList" :key="i" class="dm-store__item">
......@@ -15,11 +21,13 @@
</p>
</div>
</div>
<!-- 操作按钮 -->
<div class="dm-store__btn">
<span class="dm-store__btn--cancel" @click="popoverShow = false">取 消</span>
<el-button class="dm-store__btn--cancel" type="text" @click="saveArea">确 定</el-button>
</div>
</div>
<!-- 展示区 -->
<div class="el-input dm-store__reference w240" slot="reference">
<div class="el-input__inner block">
已选择{{totalProvince}}个省、{{totalCity}}个市
......@@ -131,18 +139,22 @@ export default {
})
})
},
clickProvince(item,index) {
this.currentIndex = index;
this.currentCityList = item.children || [];
},
checkProvinceChange(item,index) {
this.currentIndex = index;
this.currentCityList = item.children || [];
item.children.map(v => {
v.isCheck = item.isCheck;
});
if (item.children.length) {
const isAllCheck = item.children.every(v => v.isCheck);
const isNoOneCheck = item.children.every(v => !v.isCheck);
item.isCheck = item.children.some(v => v.isCheck);
item.indeterminate = !(isAllCheck || isNoOneCheck);
}
this.currentIndex = index;
this.currentCityList = item.children || [];
item.children.map(v => {
v.isCheck = item.isCheck;
});
if (item.children.length) {
const isAllCheck = item.children.every(v => v.isCheck);
const isSomeCheck = item.children.some(v => v.isCheck);
item.isCheck = isSomeCheck;
item.indeterminate = !isAllCheck && isSomeCheck;
}
},
/* isIndeterminate isCheck
* true true 半勾选
......@@ -151,16 +163,10 @@ export default {
*/
checkCityChange() {
let item = this.areaList[this.currentIndex];
const isAllCheck = item.children.every(v => v.isCheck);
const isNoOneCheck = item.children.every(v => !v.isCheck);
item.isCheck = item.children.some(v => v.isCheck);
item.indeterminate = !(isAllCheck || isNoOneCheck);
// item.isIndeterminate = true;
const isSomeCheck = item.children.some(v => v.isCheck);
item.isCheck = isSomeCheck;
item.indeterminate = !isAllCheck && isSomeCheck;
console.log(item.indeterminate,item.isCheck);
},
saveArea() {
......@@ -170,9 +176,8 @@ export default {
// 全选 只传省ID
if(!v.isIndeterminate && v.isCheck) {
valueList.push(v.provinceId)
}
// 半选 传市id
if(v.isIndeterminate && v.isCheck && v.children.length) {
} else if(v.isIndeterminate && v.isCheck && v.children.length) {
// 半选 传市id
v.children.map(w => {
if (w.isCheck) {
valueList.push(v.cityId)
......@@ -182,7 +187,11 @@ export default {
});
this.params.value = valueList.filter(v => v).join(',');
this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
this.popoverShow = false;
if (res.data.errorCode === 0) {
this.popoverShow = false;
} else {
this.$message({type:'error',message:'保存失败'});
}
}).catch(err => {
console.log(err)
})
......
<template>
<el-popover class="inline-block" placement="bottom-start" width="490" height="378" trigger="click">
<div class="dm-store__wrap" style="height: 378px;">
<!-- 左侧 -->
<div class="dm-store__left">
<div class="dm-store__state">
<span>选择</span>
......@@ -8,7 +9,7 @@
<!-- <span class="fz13">{{params.isAll?leftTotal:leftCheckList.length}}/{{leftTotal}}</span> -->
</div>
<div class="dm-store__search">
<el-input v-model="leftValue" placeholder="请输入标签名称" prefix-icon="el-icon-search" @change="getLeftList"></el-input>
<el-input v-model="leftValue" placeholder="请输入门店名称" prefix-icon="el-icon-search" @change="getLeftList"></el-input>
</div>
<el-tree ref="tree" class="dm-store__list" :data="leftList" :default-expand-all="true" show-checkbox node-key="storeGroupId" :props="defaultProps"></el-tree>
</div>
......@@ -16,13 +17,14 @@
<el-button type="primary" icon="el-icon-arrow-right" circle @click="saveToRight"></el-button>
<el-button icon="el-icon-close" circle :disabled="!rightCheckList.length" @click="deleteRightItems(false)"></el-button>
</div>
<!-- 右侧 -->
<div class="dm-store__right">
<div class="dm-store__state">
<span>已选<span class="fz12 gray-color">{{rightTotal}}个类型)</span></span>
<el-button type="text" @click="deleteRightAll">全部清除</el-button>
</div>
<div class="dm-store__search">
<el-input v-model="rightValue" placeholder="请输入标签名称" prefix-icon="el-icon-search" @change="getRightList"></el-input>
<el-input v-model="rightValue" placeholder="请输入门店名称" prefix-icon="el-icon-search" @change="getRightList"></el-input>
</div>
<el-checkbox-group v-model="rightCheckList" class="dm-store__list">
<p v-for="(v,i) in rightList" :key="i" class="dm-store__item" @mouseover="rightHoverIndex = i" @mouseout="rightHoverIndex = null">
......@@ -33,6 +35,7 @@
</el-checkbox-group>
</div>
</div>
<!-- 展示区 -->
<div class="el-input dm-store__reference w240" slot="reference">
<div class="el-input__inner dm-store__inputtag">
<el-tag size="small" v-for="v in rightList" :key="v.id" @close="deleteRightItems(v.id)" closable>{{v.name}}</el-tag>
......@@ -51,7 +54,7 @@
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
name:'options-group',
props:{
uuid:{
type:String,
......@@ -88,11 +91,6 @@ export default {
this.getLeftList();
this.getRightList();
},
watch: {
rightList(val) {
this.$emit('emit-tags',val);
}
},
methods:{
// 拉取左侧数据
getLeftList() {
......
......@@ -25,7 +25,7 @@
</div>
<div class="dm-store__right">
<div class="dm-store__state">
<span>已选<span class="fz12 gray-color">{{rightTotal}}类型</span></span>
<span>已选<span class="fz12 gray-color">{{rightTotal}}门店</span></span>
<el-button type="text" @click="deleteRightAll">全部清除</el-button>
</div>
<div class="dm-store__search">
......@@ -58,7 +58,7 @@
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
name:'options-part',
props:{
uuid:{
type:String,
......
......@@ -55,7 +55,7 @@
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
name:'options-tags',
props:{
uuid:{
type:String,
......
......@@ -7,15 +7,15 @@
</el-checkbox-group>
<div class="dm-store__btn dm-store__btn--border">
<span class="dm-store__btn--cancel" @click="popoverShow = false">取 消</span>
<el-button class="dm-store__btn--cancel" type="text" @click="saveType">确 定</el-button>
<el-button class="dm-store__btn--cancel" type="text" @click="saveToRight">确 定</el-button>
</div>
<div class="el-input dm-store__reference w240" slot="reference">
<div class="el-input__inner dm-store__inputtag">
<el-tag v-for="(v,i) in checkedList" size="small" :key="i" closable @close="delTag(i)">{{filterLabel(v)}}</el-tag>
<el-tag v-for="(v,i) in checkedList" size="small" :key="i" closable @close="delItem(i)">{{filterLabel(v)}}</el-tag>
<span class="gray-color dm-store__inputtag--tips" v-show="checkedList.length === 0">请选择门店</span>
</div>
<el-popover placement="top-start" popper-class="select-shop__popper" width="300" trigger="hover">
<el-tag v-for="(v,i) in checkedList" class="select-shop__popper--tag" size="small" :key="i" closable @close="delTag(i)">{{filterLabel(v)}}</el-tag>
<el-tag v-for="(v,i) in checkedList" class="select-shop__popper--tag" size="small" :key="i" closable @close="delItem(i)">{{filterLabel(v)}}</el-tag>
<span slot="reference" class="dm-store__inputtag--total" v-show="checkedList.length">{{checkedList.length}}</span>
</el-popover>
</div>
......@@ -56,6 +56,7 @@ export default {
}
},
methods:{
// label 的filter
filterLabel(val) {
let result = '';
this.typeList.map( v => {
......@@ -82,7 +83,8 @@ export default {
console.log(err)
})
},
saveType() {
// 保存
saveToRight() {
this.params.key = this.uuid;
let valueList = [];
this.params.value = this.checkedList.join(',');
......@@ -91,6 +93,10 @@ export default {
}).catch(err => {
console.log(err)
})
},
// 删除
delItem(index) {
this.checkedList.splice(index,1);
}
}
}
......
<template>
<div class="dm-store__card">
<!-- 左边 -->
<div class="dm-store__left">
<div class="dm-store__state">
<el-select v-model="storeType" placeholder="请选择" class="w100" @change="selectStoreType">
......@@ -8,34 +9,38 @@
<span class="fz13">{{leftCheckList.length}}/{{leftTotal}}</span>
</div>
<div class="dm-store__search">
<el-input v-model="leftValue" placeholder="请输入标签名称" prefix-icon="el-icon-search" @change="leftSearch"></el-input>
<el-input v-model="leftValue" placeholder="请输入门店名称" prefix-icon="el-icon-search" @change="leftSearch"></el-input>
</div>
<el-checkbox-group v-model="leftCheckList" class="dm-store__list">
<div class="dm-store__list" v-loading="leftLoading">
<p class="dm-store__item">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox>
</p>
<p v-for="(v,i) in leftList" :key="i" class="dm-store__item dm-store__item--52">
<el-checkbox :label="v.storeId">
<p>{{v.storeName}}</p>
<p class="fz13 gray">{{v.storeCode}}</p>
</el-checkbox>
<i class="el-icon-arrow-right"></i>
</p>
</el-checkbox-group>
<el-checkbox-group v-model="leftCheckList" @change="handleCheckChange">
<p v-for="(v,i) in leftList" :key="i" class="dm-store__item dm-store__item--52">
<el-checkbox :label="v.storeId">
<p>{{v.storeName}}</p>
<p class="fz13 gray">{{v.storeCode}}</p>
</el-checkbox>
<i class="el-icon-arrow-right"></i>
</p>
</el-checkbox-group>
</div>
</div>
<!-- 中间按钮区域 -->
<div class="dm-store__center">
<el-button type="primary" size="mini" icon="el-icon-arrow-right" :disabled="!leftCheckList.length" @click="saveToRight">转入</el-button>
<el-button icon="el-icon-close" size="mini" :disabled="!rightCheckList.length" @click="deleteRightItems(false)">移除</el-button>
</div>
<!-- 右边 -->
<div class="dm-store__right">
<div class="dm-store__state">
<span>已选<span class="fz12 gray-color">{{rightTotal}}类型</span></span>
<span>已选<span class="fz12 gray-color">{{rightTotal}}门店</span></span>
<el-button type="text" @click="deleteRightAll">全部清除</el-button>
</div>
<div class="dm-store__search">
<el-input v-model="rightValue" placeholder="请输入标签名称" prefix-icon="el-icon-search" @change="getRightList"></el-input>
<el-input v-model="rightValue" placeholder="请输入门店名称" prefix-icon="el-icon-search" @change="getRightList"></el-input>
</div>
<el-checkbox-group v-model="rightCheckList" class="dm-store__list">
<el-checkbox-group v-model="rightCheckList" class="dm-store__list" v-loading="rightLoading">
<p v-for="(v,i) in rightList" :key="i" class="dm-store__item" @mouseover="rightHoverIndex = i" @mouseout="rightHoverIndex = null">
<el-checkbox :label="v.id">{{v.name}}</el-checkbox>
<i class="el-icon-close" v-show="rightHoverIndex !== i"></i>
......@@ -43,14 +48,13 @@
</p>
</el-checkbox-group>
</div>
<!-- 弹出框 -->
<el-dialog title="门店选择" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
<div style="margin:0 auto;position:relative;">
<com-type v-if="storeType === 1" :uuid="newUuid"></com-type>
<com-tags v-if="storeType === 2" :uuid="newUuid"></com-tags>
<com-area v-if="storeType === 3" :uuid="newUuid"></com-area>
<com-group v-if="storeType === 4" :uuid="newUuid"></com-group>
<com-part v-if="storeType === 5" :uuid="newUuid"></com-part>
<option-type v-if="storeType === 1" :uuid="newUuid"></option-type>
<option-tags v-if="storeType === 2" :uuid="newUuid"></option-tags>
<option-area v-if="storeType === 3" :uuid="newUuid"></option-area>
<option-group v-if="storeType === 4" :uuid="newUuid"></option-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
......@@ -63,19 +67,17 @@
import qs from 'qs';
import { baseUrl } from './config';
import uuidv1 from 'uuid/v1';
import comType from './partials/com-type';
import comArea from './partials/com-area';
import comTags from './partials/com-tags';
import comPart from './partials/com-part';
import comGroup from './partials/com-group';
import optionType from './options/option-type';
import optionArea from './options/option-area';
import optionTags from './options/option-tags';
import optionGroup from './options/option-group';
export default {
name:'vue-gic-store-card',
components:{
'com-type':comType,
'com-area':comArea,
'com-tags':comTags,
'com-part':comPart,
'com-group':comGroup
'option-type':optionType,
'option-area':optionArea,
'option-tags':optionTags,
'option-group':optionGroup
},
props:{
uuid:{
......@@ -96,7 +98,6 @@ export default {
],
leftList:[],
rightList:[],
newChecked:this.checked,
leftValue:'',
rightValue:'',
leftCheckList:[],
......@@ -108,13 +109,15 @@ export default {
value:'', //否 string isAll=0时,必填,选中项id,多个逗号分隔
removeItems:'', //否 string isAll=1,取消选中项的id,多个逗号分隔
},
isIndeterminate: true,
isIndeterminate: false,
checkAll:false,
rightHoverIndex:null,
rightTotal:0,
leftTotal:0,
newUuid:uuidv1().replace(/-/g,''), // 生成uuid
dialogVisible:false
dialogVisible:false,
leftLoading:false,
rightLoading:false
}
},
created() {
......@@ -134,43 +137,64 @@ export default {
this.initLeftList();
}
},
// 左侧全选
handleCheckAllChange(val) {
console.log(val)
this.leftCheckList = val ? this.leftList.map(v => v.storeId) : [];
this.isIndeterminate = false;
},
// 左侧选择
handleCheckChange(val) {
let length = val.length;
this.checkAll = length === this.leftList.length;
this.isIndeterminate = length > 0 && length < this.leftList.length;
},
// 初始化左侧数据
initLeftList() {
this.axios.get(baseUrl + '/api-plug/query-store-by-code-name-new?requestProject=gic-web&pageSize=20&currentPage=1&searchParams='+this.leftValue).then(res => {
this.leftLoading = true;
this.axios.get(baseUrl + '/api-plug/query-store-by-code-name-new?requestProject=gic-web&pageSize=999&currentPage=1&searchParams='+this.leftValue).then(res => {
this.leftList = (res.data.result && res.data.result.result) || [];
this.leftTotal = (res.data.result && res.data.result.totalCount) || 0;
this.leftLoading = false;
}).catch(err => {
this.leftLoading = false;
console.log(err)
})
},
// 拉取左侧数据
getLeftList() {
this.leftLoading = true;
let params = {
key:this.newUuid,
search:this.leftValue,
currentPage:1,
pageSize:20
pageSize:999
}
this.axios.post(baseUrl + '/api-plug/get-store-widget-store?requestProject=gic-web',qs.stringify(params)).then(res => {
this.leftList = (res.data.result && res.data.result.result) || [];
this.leftTotal = (res.data.result && res.data.result.totalCount) || 0;
this.leftLoading = false;
}).catch(err => {
this.leftLoading = false;
console.log(err)
})
},
// 拉取右侧数据
getRightList() {
this.rightLoading = true;
let params = {
key:this.newUuid,
selectType:5,
search:this.rightValue,
currentPage:1,
pageSize:20
pageSize:999
}
this.axios.post(baseUrl + '/api-plug/list-right-data?requestProject=gic-web',qs.stringify(params)).then(res => {
this.rightList = (res.data.result && res.data.result.result) || [];
this.rightTotal = (res.data.result && res.data.result.totalCount) || 0;
this.rightLoading = false;
}).catch(err => {
this.rightLoading = false;
console.log(err)
})
},
......@@ -196,6 +220,7 @@ export default {
},
// 删除右侧单选或者多选数据
deleteRightItems(item) {
this.rightLoading = true;
let params = {
key:this.newUuid,
removeItems:item || this.rightCheckList.join(',')
......@@ -204,17 +229,22 @@ export default {
this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
this.getRightList();
this.rightCheckList = [];
this.rightLoading = false;
}).catch(err => {
this.rightLoading = false;
console.log(err)
})
},
// 关闭弹出框
handleClose(){
this.dialogVisible = false;
},
// 弹出框确认
confirm() {
this.getLeftList();
this.dialogVisible = false;
},
// 选择门店类型
selectStoreType() {
if (this.storeType) {
this.dialogVisible = true
......@@ -222,10 +252,6 @@ export default {
this.initLeftList();
}
},
handleCheckAllChange(val) {
this.leftCheckList = val ? this.leftList.map(v => v.storeId) : [];
this.isIndeterminate = false;
},
}
}
......
......@@ -4,17 +4,14 @@
<p>新版门店</p>
<vue-gic-store-new style="padding:20px;" :uuid="uuid"></vue-gic-store-new>
</div>
<div>
<p>新版卡券门店</p>
<vue-gic-store-card style="padding:20px;" :uuid="uuid"></vue-gic-store-card>
</div>
<div>
<p>老版门店</p>
<vue-gic-store-linkage style="padding:20px;" :msg="sendChildData"></vue-gic-store-linkage>
</div>
</div>
</template>
<script>
......
......@@ -38,10 +38,10 @@
<el-input-number controls-position="right" v-model="form.gameWinningRate" :precision="2" :min="0" class="w400" :max="100" :disabled="infoFlag"></el-input-number> %
</el-form-item>
<el-form-item label="限制抽奖" prop="gameLimitCount">
<el-input-number controls-position="right" :min="0" :precision="0" v-model="form.gameLimitCount" class="w400" :disabled="infoFlag"></el-input-number>
<el-input-number controls-position="right" :min="-1" :precision="0" v-model="form.gameLimitCount" class="w400" :disabled="infoFlag"></el-input-number>
<p class="fz12 gray">
<el-checkbox class="pl10" v-model="form.gameLimitDay" :precision="0" :disabled="infoFlag" :true-label="1" :false-label="0">每天</el-checkbox>
不填表示不限制抽奖次数</p>
-1表示不限制抽奖次数</p>
</el-form-item>
<el-form-item label="免费抽奖" prop="gameFreeCount">
<el-input-number controls-position="right" v-model="form.gameFreeCount" :min="0" :precision="0" class="w400" :disabled="infoFlag"></el-input-number>
......@@ -176,7 +176,7 @@ export default {
},
watch:{
'form.gameFreeCount'(val){
if (this.form.gameFreeCount>this.form.gameLimitCount) {
if (this.form.gameLimitDay != -1 && this.form.gameFreeCount>this.form.gameLimitCount) {
this.$tips({type:'warning',message:'免费次数不能大于限制次数'});
this.form.gameFreeCount = this.form.gameLimitCount;
}
......
......@@ -44,10 +44,10 @@
<el-input-number controls-position="right" class="w400" :min="0" :max="100" :precision="2" v-model="form.gameWinningRate" :disabled="infoFlag"></el-input-number> %
</el-form-item>
<el-form-item label="限制抽奖" class="width50" prop="gameLimitDay">
<el-input-number controls-position="right" :min="0" class="w400" v-model="form.gameLimitCount" :precision="0" :disabled="infoFlag"></el-input-number>
<el-input-number controls-position="right" :min="-1" class="w400" v-model="form.gameLimitCount" :precision="0" :disabled="infoFlag"></el-input-number>
<p class="fz12 gray">
<el-checkbox class="pl10" v-model="form.gameLimitDay" :disabled="infoFlag" :true-label="1" :false-label="0">每天</el-checkbox>
不填表示限制抽奖次数</p>
-1表示限制抽奖次数</p>
</el-form-item>
<el-form-item label="免费抽奖" class="width50" prop="gameFreeDay">
<el-input-number controls-position="right" :min="0" class="w400" v-model="form.gameFreeCount" :precision="0" :disabled="infoFlag"></el-input-number>
......@@ -165,7 +165,7 @@ export default {
},
watch:{
'form.gameFreeCount'(val){
if (this.form.gameFreeCount>this.form.gameLimitCount) {
if (this.form.gameLimitDay != -1 && this.form.gameFreeCount>this.form.gameLimitCount) {
this.$tips({type:'warning',message:'免费次数不能大于限制次数'});
this.form.gameFreeCount = this.form.gameLimitCount;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment