Skip to content

M
marketing
Commit 9e4bd84e by zhangmeng
Options

门店选择组件

parent 47750f4d
Showing with 1314 additions and 219 deletions
dist.zip deleted 100644 → 0
File deleted
dist/static/css/app.af066c509331a2c0b6f4d2a253c8d6e6.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/app.fde2c0616f5f7d9da0da4a2c463012ee.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.2f0a9078f57d17746a8d.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.5921f5fa7fb6df700852.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/vendor.6b464a5bf69f693bb00d.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/vendor.ad484ea676beca0f8899.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/test/dmStore/README.md 0 → 100755
# vue 插件—-门店选择组件
<<<<<<< HEAD
> A Vue.js Store New Plugin
## Install
```shell
npm install @gic-test/vue-gic-store-new -S
```
## how to use
```
// main.js
import dmStore from './dmStore';
import dmCard from './dmStore/store-card';
// 通用组件
import vueGicStoreNew from '@gic-test/vue-gic-store-new'
Vue.use(vueGicStoreLinkage)
// 卡券中使用
import { vueGicStoreCard } from '@gic-test/vue-gic-store-new'
Vue.use(vueGicStoreCard)
// 使用页面
<vue-gic-store-new :uuid="uuid"></vue-gic-store-new>
<vue-gic-store-card :uuid="uuid"></vue-gic-store-card>
data() {
return {
// 参数
uuid:'', // 新增传空，编辑必传
}
}
```
src/test/dmStore/com-area.vue deleted 100644 → 0
<template>
<el-popover class="fl" placement="bottom-start" width="406" trigger="click">
<div class="dm-store__area clearfix">
<div class="dm-store__area__left fl">
<el-checkbox v-for="(v,i) in areaList" v-model="v.isCheck" :key="i" @change="setCurrentCity(v)">{{v.provinceName}}</el-checkbox>
</div>
<div class="dm-store__area__right fr">
cccc
<el-checkbox v-for="(v,i) in currentCityList" v-model="v.isCheck" :key="i">{{v.cityName}}</el-checkbox>
</div>
</div>
<div class="el-input dm-store__type__inner w200" slot="reference">
<div class="el-input__inner block">
已选择1个门店区域
</div>
</div>
</el-popover>
</template>
<script>
const baseUrl = 'http://gicdev.demogic.com';
export default {
name:'options-type',
props:{
checked:{
type:Array,
default() {
return [];
}
}
},
watch: {
newChecked(val) {
this.$emit('get-emit',val);
}
},
data() {
return {
areaList:[],
currentCityList:[],
newChecked:this.checked
}
},
created() {
this.getAreaTree();
},
methods:{
init() {
this.newChecked = this.checked;
console.log(this.newChecked)
},
delTag(index){
this.newChecked.splice(index,1);
},
filterLabel(val) {
let result = '';
this.typeList.map( v => {
if (val === v.value) {
result = v.label;
}
})
return result;
},
getAreaTree() {
this.axios.get(baseUrl + '/api-plug/dict-district-tree?requestProject=gic-web').then(res => {
this.areaList = res.data.result.map(v => ({
isCheck:false,
...v,
}))
console.log(this.areaList)
})
},
setCurrentCity(item) {
this.currentCityList = item.children || [];
item.children.map(v => {
v.isCheck = item.isCheck
});
}
}
}
</script>
src/test/dmStore/com-type.vue deleted 100644 → 0
<template>
<el-popover class="fl" placement="bottom-start" width="176" trigger="click">
<el-checkbox-group v-model="newChecked">
<div v-for="(v,i) in typeList" :key="i">
<el-checkbox :label="v.value">{{v.label}}</el-checkbox>
</div>
</el-checkbox-group>
<div class="el-input dm-store__type__inner w200" slot="reference">
<div placeholder="请选择" class="el-input__inner block">
<div class="dm-store__tag__wrap">
<el-tag v-for="(v,i) in newChecked" size="mini" :key="i" closable @close="delTag(i)">{{filterLabel(v)}}</el-tag>
</div>
<el-popover v-if="newChecked.length" class="dm-store__tag__count" placement="top-start" title="已选择" width="200" trigger="hover">
<div>
<el-tag v-for="(v,i) in newChecked" size="mini" :key="i" closable @close="delTag(i)">{{filterLabel(v)}}</el-tag>
</div>
<span slot="reference">共{{newChecked.length}}项</span>
</el-popover>
</div>
</div>
</el-popover>
</template>
<script>
export default {
name:'options-type',
props:{
checked:{
type:Array,
default() {
return [];
}
}
},
watch: {
newChecked(val) {
this.$emit('get-emit',val);
}
},
data() {
return {
typeList:[
{label:'自营',value:0},
{label:'联营',value:1},
{label:'代理',value:2},
{label:'代销',value:3},
{label:'托管',value:4},
],
newChecked:this.checked
}
},
methods:{
init() {
this.newChecked = this.checked;
console.log(this.newChecked)
},
delTag(index){
this.newChecked.splice(index,1);
},
filterLabel(val) {
let result = '';
this.typeList.map( v => {
if (val === v.value) {
result = v.label;
}
})
return result;
}
}
}
</script>
<style lang="scss">
.w200 {
width: 200px;
}
</style>
src/test/dmStore/config.js 0 → 100644
const host = window.location.origin;
export const baseUrl = host.indexOf('localhost') !== -1 ? 'http://gicdev.demogic.com' : host
src/test/dmStore/index.css 0 → 100644
/* reset样式 */
.w100 {
width: 100px;
}
.w200 {
width: 200px;
}
.w240 {
width: 240px;
}
.inline-block {
vertical-align: middle;
display:inline-block!important;
}
.block{
display: block!important;
}
.gray-color{
color:#909399;
}
.fz13 {
font-size: 13px;
}
.fz12 {
font-size: 12px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
.clearfix{
zoom: 1;
}
.vertical-middle {
vertical-align: middle;
}
.block{
display: block;
overflow: hidden;
}
/* reset样式end */
/* 公共样式START */
.dm-store__btn{
text-align: right;
height: 18px;
line-height: 28px;
}
.dm-store__btn--border {
border-top:1px solid #E4E7ED;
}
.dm-store__btn--cancel {
font-size: 13px;
margin-right: 8px;
}
/* 左右移动的组件 */
.dm-store__wrap{
width: 500px;
height: 378px;
overflow: hidden;
}
.dm-store__left,.dm-store__right{
display: inline-block;
width: 200px;
height:376px;
overflow: hidden;
border:1px solid #E4E7ED;
border-radius:4px;
vertical-align: middle;
background: #fff;
}
.dm-store__state {
display: flex;
justify-content: space-between;
background:#F5F7FA;
border-bottom: 1px solid #E4E7ED;
height: 40px;
padding:0 10px;
line-height: 40px;
overflow: hidden;
}
.dm-store__state > * {
vertical-align: middle;
}
.dm-store__search {
margin: 10px;
}
.dm-store__search .el-input__inner {
border-radius: 30px;
}
.dm-store__list{
margin: 0;
overflow-y: auto;
overflow-x: hidden;
height: 284px;
}
.dm-store__item{
height: 34px;
display: flex;
justify-content: space-between;
line-height: 34px;
padding:0 10px;
}
.dm-store__item--52 {
height: 52px;
line-height: 52px;
}
.dm-store__item:hover {
background: #F5F7FA;
}
.dm-store__item >i {
line-height: 34px;
}
.dm-store__item--52 >i {
line-height: 52px;
}
.dm-store__item .el-checkbox__label{
white-space: nowrap;
text-overflow: ellipsis;
width: 136px;
overflow: hidden;
vertical-align: middle;
}
.dm-store__center{
display: inline-block;
vertical-align: middle;
width: 78px;
}
.dm-store__center .el-button {
display: block;
margin: 10px auto;
}
.dm-store__inputtag{
white-space: nowrap;
overflow: hidden;
padding:0 6px;
line-height: 28px;
}
.dm-store__inputtag--tips {
padding:6px;
}
.dm-store__inputtag .el-tag{
margin-right:4px;
}
.dm-store__inputtag--total{
position: absolute;
top: 1px;
right: 1px;
background:#fff;
border-radius: 4px;
height: 30px;
line-height: 30px;
font-size: 12px;
padding: 0 6px;
}
/* 公共样式END */
.dm-store__area{
width: 412px;
height: 403px;
overflow: hidden;
}
.dm-store__type__item {
height: 34px;
line-height: 34px;
padding:0 10px;
}
.dm-store__type__item:hover {
background: #F5F7FA;
}
.dm-store__inner {
position: relative;
vertical-align: middle;
}
.dm-store__card{
width: 490px;
height: 378px;
overflow: hidden;
/* background: #fff; */
}
src/test/dmStore/index.js 0 → 100644
import storeNew from "./index.vue";
import storeCard from "./store-card.vue";
const gicStoreNew = {
install(Vue, options) {
Vue.component(storeNew.name, storeNew)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(gicStoreNew);
}
export default gicStoreNew;
export const gicStoreCard = {
install(Vue, options) {
Vue.component(storeCard.name, storeCard)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(gicStoreCard);
}
src/test/dmStore/index.scss deleted 100644 → 0
.w200 {
width: 200px;
}
.block{
display: block!important;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after{
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
.clearfix{
zoom: 1;
}
.vertical-middle {
vertical-align: middle;
}
.block{
display: block;
overflow: hidden;
}
.dm-store .dm-store__type__inner {
position: relative;
vertical-align: middle;
}
.dm-store .dm-store__tag__wrap {
max-width: calc(100% - 20px);
line-height: 28px;
overflow: hidden;
white-space: nowrap;
}
.dm-store .dm-store__tag__wrap .el-tag {
margin-right:5px;
}
.dm-store .dm-store__tag__count {
position:absolute;
right: 2px;
top: 0;
font-size: 12px;
}
.dm-store__area__left{
width: 200px;
}
.dm-store__area__right{
width: 200px;
}
src/test/dmStore/package.json 0 → 100644
{
"dependencies": {
"vue": "^2.5.11"
},
"description": "vue-gic-store-new Plugin",
"license": "MIT",
"main": "index.js",
"name": "@gic-test/vue-gic-store-new",
"private": false,
"version": "1.0.2"
}
src/test/dmStore/partials/com-area.vue 0 → 100644
<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>
</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">
<el-checkbox v-model="v.isCheck" @change="checkCityChange(v)">{{v.cityName}}</el-checkbox>
</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}}个市
</div>
</div>
</el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-area',
props:{
uuid:{
type:String,
default:''
}
},
watch: {
areaList:{
handler(val) {
this.totalProvince = this.areaList.filter(v => (!v.isIndeterminate && v.isCheck)).length;
this.totalCity = 0;
this.areaList.map(v => {
if (v.children.length) {
v.children.map(w => {
if (w.isCheck) {
this.totalCity ++
}
})
}
})
},
deep:true
}
},
data() {
return {
popoverShow:false,
areaList:[],
currentCityList:[],
currentIndex:0,
totalCity:0,
totalProvince:0,
defaultProps: {
children: 'children',
label: 'label',
id:'id'
},
params:{
selectType:3, // 是 int 下拉选择项
key:'', // 是 string 32位唯一值
isAll:0, // 是 int 是否勾选全部 1是 0否
value:'', //否 string isAll=0时，必填，选中项id，多个逗号分隔
removeItems:'', //否 string isAll=1，取消选中项的id，多个逗号分隔
},
}
},
created() {
this.getAreaTree();
},
methods:{
// 获取树形结构
async getAreaTree() {
let res = await this.axios.get(baseUrl + '/api-plug/dict-district-tree?requestProject=gic-web')
this.areaList = res.data.result.map(v => ({
isCheck:false,
indeterminate:false,
label:v.provinceName,
id:v.provinceId,
...v,
children:v.children.map(w => ({
isCheck:false,
label:w.cityName,
id:w.cityId,
...w
}))
}))
await this.getCheckedData();
},
// 获取已选择项
getCheckedData() {
return new Promise((resolve,reject) => {
let params = {
key:this.uuid,
selectType:3,
search:'',
currentPage:1,
pageSize:3000
}
this.axios.post(baseUrl + '/api-plug/list-right-data?requestProject=gic-web',qs.stringify(params)).then(res => {
let list = (res.data.result && res.data.result.result) || [];
list.map(u => u.id).map(u => {
this.areaList.map(v => {
if (u === v.provinceId) {
v.isIndeterminate = false;
v.isCheck = true;
} else {
v.children.map(w => {
if (u === w.cityId) {
w.isCheck = true;
}
})
}
})
})
}).catch(err => {
console.log(err)
})
})
},
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);
}
},
/* isIndeterminate isCheck
* true true 半勾选
* false false 不选
* false true 全选
*/
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;
console.log(item.indeterminate,item.isCheck);
},
saveArea() {
this.params.key = this.uuid;
let valueList = [];
this.areaList.map(v => {
// 全选 只传省ID
if(!v.isIndeterminate && v.isCheck) {
valueList.push(v.provinceId)
}
// 半选 传市id
if(v.isIndeterminate && v.isCheck && v.children.length) {
v.children.map(w => {
if (w.isCheck) {
valueList.push(v.cityId)
}
})
}
});
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;
}).catch(err => {
console.log(err)
})
}
}
}
</script>
src/test/dmStore/partials/com-group.vue 0 → 100644
<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>
<!-- <el-checkbox v-model="params.isAll" :true-label="1" :false-label="0" @change="handleCheckAllChange">所有门店</el-checkbox> -->
<!-- <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>
</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>
<div class="dm-store__center">
<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>
</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">
<el-checkbox :label="v.id">{{v.name}}</el-checkbox>
<i class="el-icon-close" v-show="rightHoverIndex !== i"></i>
<i class="el-icon-circle-close" v-show="rightHoverIndex === i" @click.stop="deleteRightItems(v.id)"></i>
</p>
</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>
<span class="gray-color dm-store__inputtag--tips" v-show="rightList.length === 0">请选择门店</span>
</div>
<el-popover placement="top-start" popper-class="select-shop__popper" width="300" trigger="hover">
<el-tag class="select-shop__popper--tag" v-for="v in rightList" :key="v.id" @close="deleteRightItems(v.id)" closable>
{{v.name}}
</el-tag>
<span slot="reference" class="dm-store__inputtag--total" v-show="rightList.length">共{{params.isAll?rightTotal:rightList.length}}项</span>
</el-popover>
</div>
</el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
props:{
uuid:{
type:String,
default:''
}
},
data() {
return {
leftList:[],
rightList:[],
leftValue:'',
rightValue:'',
leftCheckList:[],
rightCheckList:[],
params:{
selectType:4, // 是 int 下拉选择项
key:'', // 是 string 32位唯一值
isAll:0, // 是 int 是否勾选全部 1是 0否
value:'', //否 string isAll=0时，必填，选中项id，多个逗号分隔
removeItems:'', //否 string isAll=1，取消选中项的id，多个逗号分隔
},
isIndeterminate: true,
rightHoverIndex:null,
rightTotal:0,
leftTotal:0,
defaultProps:{
id:'storeGroupId',
label:'storeGroupName',
children:'children'
}
}
},
created() {
this.getLeftList();
this.getRightList();
},
watch: {
rightList(val) {
this.$emit('emit-tags',val);
}
},
methods:{
// 拉取左侧数据
getLeftList() {
this.axios.get(baseUrl + '/api-plug/store-group-list?requestProject=gic-web&search='+this.leftValue).then(res => {
this.leftList = res.data.result || [];
// this.leftTotal = res.data.result.totalCount || 0;
}).catch(err => {
console.log(err)
})
},
// 拉取右侧数据
getRightList() {
let params = {
key:this.uuid,
selectType:4,
search:this.rightValue,
currentPage:1,
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;
}).catch(err => {
console.log(err)
})
},
// 左侧数据移动到右侧
saveToRight() {
this.params.key = this.uuid;
if (this.params.isAll) {
this.params.removeItems = this.leftList.filter(v => {
return this.leftCheckList.indexOf(v.tagId) < 0;
}).map(v => v.tagId).join(',');
} else {
this.params.value = this.$refs.tree.getCheckedKeys(true).join(',');
}
this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
this.getRightList();
}).catch(err => {
console.log(err)
})
},
// 删除右侧全部
deleteRightAll() {
this.axios.get(baseUrl + '/api-plug/remove-allitems?requestProject=gic-web&key='+this.uuid).then(res => {
if (res.data.errorCode === 0) {
this.getRightList();
} else {
this.$message({type:'error',message:'清除全部失败'});
}
}).catch(err => {
console.log(err)
})
},
// 删除右侧单选或者多选数据
deleteRightItems(item) {
let params = {
key:this.uuid,
removeItems:item || this.rightCheckList.join(',')
}
this.params.value = this.leftCheckList.join(',');
// console.log(url);
this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
this.getRightList();
this.rightCheckList = [];
}).catch(err => {
console.log(err)
})
},
// 选中所有数据
handleCheckAllChange(val) {
this.leftCheckList = val ? this.leftList.map(v => v.tagId) : [];
},
}
}
</script>
src/test/dmStore/partials/com-part.vue 0 → 100644
<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">
<el-checkbox v-model="params.isAll" :true-label="1" :false-label="0" @change="handleCheckAllChange">所有门店</el-checkbox>
<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>
</div>
<el-checkbox-group v-model="leftCheckList" class="dm-store__list">
<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="gray fz13">{{v.storeCode}}</p>
</el-checkbox>
<i class="el-icon-arrow-right"></i>
</p>
</el-checkbox-group>
</div>
<div class="dm-store__center">
<el-button type="primary" icon="el-icon-arrow-right" circle :disabled="!leftCheckList.length" @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>
</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">
<el-checkbox :label="v.id">{{v.name}}</el-checkbox>
<i class="el-icon-close" v-show="rightHoverIndex !== i"></i>
<i class="el-icon-circle-close" v-show="rightHoverIndex === i" @click.stop="deleteRightItems(v.id)"></i>
</p>
</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>
<span class="gray-color dm-store__inputtag--tips" v-show="rightList.length === 0">请选择门店</span>
</div>
<el-popover placement="top-start" popper-class="select-shop__popper" width="300" trigger="hover">
<el-tag class="select-shop__popper--tag" v-for="v in rightList" :key="v.id" @close="deleteRightItems(v.id)" closable>
{{v.name}}
</el-tag>
<span slot="reference" class="dm-store__inputtag--total" v-show="rightList.length">共{{params.isAll?rightTotal:rightList.length}}项</span>
</el-popover>
</div>
</el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
props:{
uuid:{
type:String,
default:''
}
},
data() {
return {
leftList:[],
rightList:[],
leftValue:'',
rightValue:'',
leftCheckList:[],
rightCheckList:[],
params:{
selectType:5, // 是 int 下拉选择项
key:'', // 是 string 32位唯一值
isAll:0, // 是 int 是否勾选全部 1是 0否
value:'', //否 string isAll=0时，必填，选中项id，多个逗号分隔
removeItems:'', //否 string isAll=1，取消选中项的id，多个逗号分隔
},
isIndeterminate: true,
rightHoverIndex:null,
rightTotal:0,
leftTotal:0
}
},
created() {
this.getLeftList();
this.getRightList();
},
methods:{
// 拉取左侧数据
getLeftList() {
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.leftList = res.data.result.result || [];
this.leftTotal = res.data.result.totalCount || 0;
}).catch(err => {
console.log(err)
})
},
// 拉取右侧数据
getRightList() {
let params = {
key:this.uuid,
selectType:5,
search:this.rightValue,
currentPage:1,
pageSize:20
}
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;
}).catch(err => {
console.log(err)
})
},
// 左侧数据移动到右侧
saveToRight() {
this.params.key = this.uuid;
if (this.params.isAll) {
this.params.removeItems = this.leftList.filter(v => {
return this.leftCheckList.indexOf(v.storeId) < 0;
}).map(v => v.storeId).join(',');
} else {
this.params.value = this.leftCheckList.join(',');
}
this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
this.getRightList();
}).catch(err => {
console.log(err)
})
},
// 删除右侧全部
deleteRightAll() {
this.axios.get(baseUrl + '/api-plug/remove-allitems?requestProject=gic-web&key='+this.uuid).then(res => {
if (res.data.errorCode === 0) {
this.getRightList();
} else {
this.$message({type:'error',message:'清除全部失败'});
}
}).catch(err => {
console.log(err)
})
},
// 删除右侧单选或者多选数据
deleteRightItems(item) {
let params = {
key:this.uuid,
removeItems:item || this.rightCheckList.join(',')
}
this.params.value = this.leftCheckList.join(',');
this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
this.getRightList();
this.rightCheckList = [];
}).catch(err => {
console.log(err)
})
},
// 选中所有数据
handleCheckAllChange(val) {
this.leftCheckList = val ? this.leftList.map(v => v.storeId) : [];
},
}
}
</script>
src/test/dmStore/partials/com-tags.vue 0 → 100644
<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">
<el-checkbox v-model="params.isAll" :true-label="1" :false-label="0" @change="handleCheckAllChange">所有门店</el-checkbox>
<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>
</div>
<el-checkbox-group v-model="leftCheckList" class="dm-store__list">
<p v-for="(v,i) in leftList" :key="i" class="dm-store__item">
<el-checkbox :label="v.tagId">{{v.tagName}}</el-checkbox>
<i class="el-icon-arrow-right"></i>
</p>
</el-checkbox-group>
</div>
<div class="dm-store__center">
<el-button type="primary" icon="el-icon-arrow-right" circle :disabled="!leftCheckList.length" @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>
</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">
<el-checkbox :label="v.id">{{v.name}}</el-checkbox>
<i class="el-icon-close" v-show="rightHoverIndex !== i"></i>
<i class="el-icon-circle-close" v-show="rightHoverIndex === i" @click.stop="deleteRightItems(v.id)"></i>
</p>
</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>
<span class="gray-color dm-store__inputtag--tips" v-show="rightList.length === 0">请选择门店</span>
</div>
<el-popover placement="top-start" popper-class="select-shop__popper" width="300" trigger="hover">
<el-tag class="select-shop__popper--tag" v-for="v in rightList" :key="v.id" @close="deleteRightItems(v.id)" closable>
{{v.name}}
</el-tag>
<span slot="reference" class="dm-store__inputtag--total" v-show="rightList.length">共{{params.isAll?rightTotal:rightList.length}}项</span>
</el-popover>
</div>
</el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
props:{
uuid:{
type:String,
default:''
}
},
data() {
return {
leftList:[],
rightList:[],
leftValue:'',
rightValue:'',
leftCheckList:[],
rightCheckList:[],
params:{
selectType:2, // 是 int 下拉选择项
key:'', // 是 string 32位唯一值
isAll:0, // 是 int 是否勾选全部 1是 0否
value:'', //否 string isAll=0时，必填，选中项id，多个逗号分隔
removeItems:'', //否 string isAll=1，取消选中项的id，多个逗号分隔
},
isIndeterminate: true,
rightHoverIndex:null,
rightTotal:0,
leftTotal:0
}
},
created() {
this.getLeftList();
this.getRightList();
},
methods:{
// 拉取左侧数据
getLeftList() {
this.axios.get(baseUrl + '/api-plug/tag-list?requestProject=gic-web&search='+this.leftValue).then(res => {
this.leftList = res.data.result.result || [];
this.leftTotal = res.data.result.totalCount || 0;
}).catch(err => {
console.log(err)
})
},
// 拉取右侧数据
getRightList() {
let params = {
key:this.uuid,
selectType:2,
search:this.rightValue,
currentPage:1,
pageSize:20
}
this.axios.post(baseUrl + '/api-plug/list-right-data?requestProject=gic-web',qs.stringify(params)).then(res => {
if (res.data.errorCode === 0) {
this.rightList = (res.data.result && res.data.result.result) || [];
this.rightTotal = (res.data.result && res.data.result.totalCount) || 0;
}
}).catch(err => {
console.log(err)
})
},
// 左侧数据移动到右侧
saveToRight() {
this.params.key = this.uuid;
if (this.params.isAll) {
this.params.removeItems = this.leftList.filter(v => {
return this.leftCheckList.indexOf(v.tagId) < 0;
}).map(v => v.tagId).join(',');
} else {
this.params.value = this.leftCheckList.join(',');
}
this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
this.getRightList();
}).catch(err => {
console.log(err)
})
},
// 删除右侧全部
deleteRightAll() {
this.axios.get(baseUrl + '/api-plug/remove-allitems?requestProject=gic-web&key='+this.uuid).then(res => {
if (res.data.errorCode === 0) {
this.getRightList();
} else {
this.$message({type:'error',message:'清除全部失败'});
}
}).catch(err => {
console.log(err)
})
},
// 删除右侧单选或者多选数据
deleteRightItems(item) {
let params = {
key:this.uuid,
removeItems:item || this.rightCheckList.join(',')
}
this.params.value = this.leftCheckList.join(',');
this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
this.getRightList();
this.rightCheckList = [];
}).catch(err => {
console.log(err)
})
},
// 选中所有数据
handleCheckAllChange(val) {
this.leftCheckList = val ? this.leftList.map(v => v.tagId) : [];
},
}
}
</script>
src/test/dmStore/partials/com-type.vue 0 → 100644
<template>
<el-popover class="inline-block" placement="bottom-start" width="214" trigger="click" v-model="popoverShow">
<el-checkbox-group v-model="checkedList">
<div class="dm-store__type__item" v-for="(v,i) in typeList" :key="i">
<el-checkbox :label="v.value">{{v.label}}</el-checkbox>
</div>
</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>
</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>
<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>
<span slot="reference" class="dm-store__inputtag--total" v-show="checkedList.length">共{{checkedList.length}}项</span>
</el-popover>
</div>
</el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
export default {
name:'options-type',
props:{
uuid:{
type:String,
default:''
}
},
created() {
this.getRightList();
},
data() {
return {
typeList:[
{label:'自营',value:'0'},
{label:'联营',value:'1'},
{label:'代理',value:'2'},
{label:'代销',value:'3'},
{label:'托管',value:'4'},
],
checkedList:[],
popoverShow:false,
params:{
selectType:1, // 是 int 下拉选择项
key:'', // 是 string 32位唯一值
isAll:0, // 是 int 是否勾选全部 1是 0否
value:'', //否 string isAll=0时，必填，选中项id，多个逗号分隔
removeItems:'', //否 string isAll=1，取消选中项的id，多个逗号分隔
},
}
},
methods:{
filterLabel(val) {
let result = '';
this.typeList.map( v => {
if (val === v.value) {
result = v.label;
}
})
return result;
},
// 拉取右侧数据
getRightList() {
let params = {
key:this.uuid,
selectType:1,
search:'',
currentPage:1,
pageSize:20
}
this.axios.post(baseUrl + '/api-plug/list-right-data?requestProject=gic-web',qs.stringify(params)).then(res => {
if (res.data.errorCode === 0) {
this.checkedList = ((res.data.result && res.data.result.result) || []).map(v => v.id);
}
}).catch(err => {
console.log(err)
})
},
saveType() {
this.params.key = this.uuid;
let valueList = [];
this.params.value = this.checkedList.join(',');
this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
this.popoverShow = false;
}).catch(err => {
console.log(err)
})
}
}
}
</script>
src/test/dmStore/store-card.vue 0 → 100644
<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">
<el-option v-for="(v,i) in storeTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
</el-select>
<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>
</div>
<el-checkbox-group v-model="leftCheckList" class="dm-store__list">
<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>
</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>
<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>
</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">
<el-checkbox :label="v.id">{{v.name}}</el-checkbox>
<i class="el-icon-close" v-show="rightHoverIndex !== i"></i>
<i class="el-icon-circle-close" v-show="rightHoverIndex === i" @click.stop="deleteRightItems(v.id)"></i>
</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>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
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';
export default {
name:'vue-gic-store-card',
components:{
'com-type':comType,
'com-area':comArea,
'com-tags':comTags,
'com-part':comPart,
'com-group':comGroup
},
props:{
uuid:{
type:String,
default:''
}
},
data() {
return {
storeType:0,
storeTypeOptions:[ // 一级列表
{label:'所有门店',value:0},
{label:'门店类型',value:1},
{label:'门店标签',value:2},
{label:'门店区域',value:3},
{label:'门店分组',value:4},
// {label:'部分门店',value:5}
],
leftList:[],
rightList:[],
newChecked:this.checked,
leftValue:'',
rightValue:'',
leftCheckList:[],
rightCheckList:[],
params:{
selectType:5, // 是 int 下拉选择项
key:'', // 是 string 32位唯一值
isAll:0, // 是 int 是否勾选全部 1是 0否
value:'', //否 string isAll=0时，必填，选中项id，多个逗号分隔
removeItems:'', //否 string isAll=1，取消选中项的id，多个逗号分隔
},
isIndeterminate: true,
checkAll:false,
rightHoverIndex:null,
rightTotal:0,
leftTotal:0,
newUuid:uuidv1().replace(/-/g,''), // 生成uuid
dialogVisible:false
}
},
created() {
this.newUuid = this.uuid || this.newUuid;
if (!this.uuid) {
this.$emit('update:uuid',this.newUuid);
}
this.initLeftList();
this.getRightList();
},
methods:{
//左侧搜索 如果是全部门店则调用init列表
leftSearch() {
if (this.storeType) {
this.getLeftList();
} else {
this.initLeftList();
}
},
// 初始化左侧数据
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.leftList = (res.data.result && res.data.result.result) || [];
this.leftTotal = (res.data.result && res.data.result.totalCount) || 0;
}).catch(err => {
console.log(err)
})
},
// 拉取左侧数据
getLeftList() {
let params = {
key:this.newUuid,
search:this.leftValue,
currentPage:1,
pageSize:20
}
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;
}).catch(err => {
console.log(err)
})
},
// 拉取右侧数据
getRightList() {
let params = {
key:this.newUuid,
selectType:5,
search:this.rightValue,
currentPage:1,
pageSize:20
}
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;
}).catch(err => {
console.log(err)
})
},
// 左侧数据移动到右侧
saveToRight() {
this.params.key = this.newUuid;
if (this.params.isAll) {
this.params.removeItems = this.leftList.filter(v => {
return this.leftCheckList.indexOf(v.storeId) < 0;
}).map(v => v.storeId).join(',');
} else {
this.params.value = this.leftCheckList.join(',');
}
this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
this.getRightList();
}).catch(err => {
console.log(err)
})
},
// 删除右侧全部
deleteRightAll() {
this.deleteRightItems(this.rightList.map(v => v.id).join(','));
},
// 删除右侧单选或者多选数据
deleteRightItems(item) {
let params = {
key:this.newUuid,
removeItems:item || this.rightCheckList.join(',')
}
this.params.value = this.leftCheckList.join(',');
this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
this.getRightList();
this.rightCheckList = [];
}).catch(err => {
console.log(err)
})
},
handleClose(){
this.dialogVisible = false;
},
confirm() {
this.getLeftList();
this.dialogVisible = false;
},
selectStoreType() {
if (this.storeType) {
this.dialogVisible = true
} else {
this.initLeftList();
}
},
handleCheckAllChange(val) {
this.leftCheckList = val ? this.leftList.map(v => v.storeId) : [];
this.isIndeterminate = false;
},
}
}
</script>
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