Skip to content

H
haoban-4
Commit 7f27a056 by 无尘
Options

feat: 增加选择门店分组和标签组件

parent d780726e
Showing with 270 additions and 62 deletions
src/api/merchant-auth.js
......@@ -4,13 +4,14 @@
* @Author: 无尘
* @Date: 2020-07-24 12:19:48
* @LastEditors: 无尘
* @LastEditTime: 2020-09-11 16:26:02
* @LastEditTime: 2020-11-17 13:46:07
*/
import getFetch from './get-fetch.js';
let api = {
getAuthEnterprise: '/auth-enterprise-list', // 获取授权商户列表
getGroupList: '/department-list', // 获取 gic 分组列表
getTagList: '/', // 获取标签
getStoreList: '/store-list', // 获取 gic 门店
getAuthDetail: '/enterprise-auth-detail', // 获取授权详情（编辑时获取信息）
getAuditLog: '/enterprise-auth-audit-list', // 获取审核日志
......
src/components/common/gic-select-group-mult.vue
<!--
* @Descripttion: 当前组件信息
* @Descripttion: 选择门店分组组件
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-02-08 10:27:21
* @Date: 2020-11-08 10:27:21
* @LastEditors: 无尘
* @LastEditTime: 2020-09-14 10:11:19
* @LastEditTime: 2020-11-17 13:38:49
-->
<!--
选择门店分组组件：
<gic-select-group-mult
:select-data="selectData"
@checkGroupIds="checkGroupIds">
......@@ -53,8 +52,8 @@
</el-popover>
</template>
<script>
import fetch from '@/api/contact.js';
const { getGicGroup } = fetch;
import fetch from '@/api/merchant-auth.js';
const { getGroupList } = fetch;
import { _debounce } from '@/common/js/public';
export default {
name: 'GicSelectGroupMult',
......@@ -116,21 +115,7 @@ export default {
if (!value || !data.label) return true;
return data.label.indexOf(value) !== -1;
},
/**
* @description: 加载更多
* @param {Object} node
* @param {Function} resolve
* @returns {Function}
* @author: 无尘
*/
async loadNode(node, resolve) {
const that = this;
if (node.level === 0) {
return resolve(that.getGroup());
} else {
await that.getGroup(node, node.data, resolve);
}
},
/**
* @description: 输入
* @param {Object} e
......@@ -186,24 +171,6 @@ export default {
that.$refs.groupTree.setCheckedKeys(keys);
that.$emit('checkGroupIds', that.$refs.groupTree.getCheckedNodes());
},
/**
* @description: 处理排序
* @param {Object} item
* @author: 无尘
*/
async handleSort(item) {
const that = this;
for (let i = 0; i < item.children.length; i++) {
item.children.sort(function(a, b) {
return a.storeGroupSort - b.storeGroupSort;
});
if (item.children[i].length) {
await that.handleSort(item.children[i]);
}
}
},
/**
* @description: 简单数组-->父子数组对象
* @param {Array} data
......@@ -213,30 +180,14 @@ export default {
let tree = data.filter(father => {
// 循环所有项
let branchArr = data.filter(child => {
return father.storeGroupId == child.parentGroupId; // 返回每一项的子级数组
return father.storeGroupId == child.parentId; // 返回每一项的子级数组
});
if (branchArr.length > 0) {
father.children = branchArr; // 如果存在子级，则给父级添加一个children属性，并赋值
}else {
father.children = [];
}
return father.parentGroupId == 0; // 返回第一层
});
// 排序
if (tree.length) {
tree.sort(function(a, b) {
return a.storeGroupSort - b.storeGroupSort;
});
}
/* for (let i = 0; i < tree[0].children.length; i++) {
if (tree[0].children[i].lenth) {
await that.handleSort(tree[0].children[i]);
}
} */
tree.forEach(function(ele, index) {
if (!!ele.children && ele.children.length) {
ele.children.sort(function(a, b) {
return a.storeGroupSort - b.storeGroupSort;
});
}
return father.parentId == 0; // 返回第一层
});
return tree;
},
......@@ -250,12 +201,11 @@ export default {
let para = {
enterpriseId: that.brandId
};
getGicGroup(para)
getGroupList(para)
.then(async res => {
if (!!res.result && !!res.result.length) {
res.result.forEach(ele => {
ele.label = ele.storeGroupName;
ele.departmentName = ele.storeGroupName;
});
const data = await that.treeData(res.result);
that.$nextTick(() => {
......
src/components/common/gic-select-tag.vue 0 → 100644
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-02-08 10:27:21
* @LastEditors: 无尘
* @LastEditTime: 2020-11-17 13:49:40
-->
<!--
选择门店分组组件：
<gic-select-tag
:selectData="selectData"
@returnTags="returnTags">
</gic-select-tag>
import gicSelectTag from '@/components/app/card/gic-select-tag.vue';
returnTags: function(nodes) {
const that = this;
that.conditionObj.tags = nodes;
},
-->
<template>
<el-popover placement="bottom" title="" width="350" trigger="click" v-model="storeVisible">
<div class="daily-store-select">
<div class="el-scrollbar define-search-select">
<div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -5px; margin-right: -5px;">
<el-checkbox-group v-model="dailyRuleForm.tags" @change="handleStoresChange">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item" v-for="item in tags" :key="item.tagId">
<el-checkbox :label="item.tagId">{{ item.tagName }}</el-checkbox>
</li>
<li v-if="!tags.length" class="text-center el-select-dropdown__item"><span>暂无门店标签</span></li>
</ul>
</el-checkbox-group>
</div>
<div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div></div>
<div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div></div>
</div>
</div>
<div class="flex-column item-cell-select inline-block " slot="reference">
<div class="depart-item-wrap">
<div :style="{ width: width }" class="el-select el-select--large depart-item-content">
<span class="font-14 color-c0c4cc p-l-10" style="display: inline-block;line-height: 32px;color: #c0c4cc;" v-if="!dailyRuleForm.tags.length">请选择门店标签</span>
<div class="el-select__tags" style="max-width: 348px;">
<span style="display:block">
<template v-for="(item, index) in selectTags">
<span class="el-tag el-tag--info el-tag--small" :key="index + 'tag'">
<span class="el-select__tags-text">{{ item.tagName }}</span>
<i class="el-tag__close el-icon-close" @click.stop="delDepart(index, selectTags)"></i>
</span>
</template>
</span>
</div>
</div>
</div>
</div>
</el-popover>
</template>
<script>
import fetch from '@/api/merchant-auth.js';
const { getTagList } = fetch;
// import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public';
export default {
name: 'GicSelectTag',
props: {
width: {
type: String,
default() {
return '357px';
}
},
selectData: {
type: [ Object, Array ],
default() {
return [];
}
},
brandId: {
type: String,
default() {
return '';
}
}
},
data() {
return {
projectName: '', // 当前项目名
enterpriseId: this.brandId,
storeVisible: false,
tags: [],
dailyRuleForm: {
tags: []
},
selectTags: []
};
},
mounted() {
const that = this;
if (!!that.brandId) {
that.tags = [];
that.getTagsData();
}
if (!!that.selectData.length) {
that.selectTags = JSON.parse(JSON.stringify(that.selectData));
that.dailyRuleForm.tags = that.selectData.map(ele => ele.tagId);
} else {
that.dailyRuleForm.tags = [];
that.selectTags = [];
}
},
methods: {
/**
* @description: 选中改变
* @param {Array} value
* @author: 无尘
*/
handleStoresChange(value) {
const that = this;
let arr = [];
that.tags.forEach(ele => {
if (value.includes(ele.tagId)) {
arr.push(ele);
}
});
that.selectTags = JSON.parse(JSON.stringify(arr));
that.$emit('returnTags', that.selectTags);
},
/**
* @description: 删除
* @param {Number} index
* @param {Array} arr
* @author: 无尘
*/
delDepart(index, arr) {
const that = this;
arr.splice(index, 1);
that.$emit('returnTags', that.selectTags);
},
/**
* @description: 获取门店标签
* @author: 无尘
*/
getTagsData() {
const that = this;
let para = {
gicEnterpriseId: that.brandId
};
getTagList(para)
.then(res => {
if (res.code == '0000') {
that.tags = res.result || [];
return;
}
})
.catch(function(error) {
});
}
},
watch: {
brandId(val) {
const that = this;
if (val) {
that.dailyRuleForm.tags = [];
that.selectTags = [];
that.tags = [];
that.getTagsData();
}
},
selectData: function(newData, oldData) {
const that = this;
if (!!newData.length) {
that.selectTags = JSON.parse(JSON.stringify(newData));
that.dailyRuleForm.tags = newData.map(ele => ele.tagId);
} else {
that.dailyRuleForm.tags = [];
that.selectTags = [];
}
}
}
};
</script>
<style lang="less" scoped>
.depart-item-content {
width: 213px;
height: 32px;
overflow: hidden;
white-space: nowrap;
border-radius: 2px;
border: 1px solid #c4c6cf;
cursor: pointer;
box-sizing: border-box;
}
.select-tree-wrap {
max-height: 300px;
overflow-y: auto;
}
.item-cell-select {
/deep/ .el-select__tags {
white-space: nowrap;
overflow: hidden;
}
.el-select {
.el-tag {
border-radius: 2px;
border: 1px solid rgba(220, 223, 230, 1);
background-color: #fff;
.el-tag__close {
top: 1px;
color: #909399;
&:hover {
background-color: transparent;
}
}
}
}
}
.w-350 {
width: 350px;
}
.show-select-num {
position: relative;
display: inline-block;
font-size: inherit;
height: 32px;
line-height: 32px;
padding-left: 10px;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
.el-select__caret {
color: #c0c4cc;
font-size: 14px;
transition: transform 0.3s;
transform: rotate(180deg);
cursor: pointer;
&.is-reverse {
transform: rotate(0deg);
}
}
}
.daily-store-select {
position: relative;
}
</style>
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