Commit 7d25348f by 无尘

feat: 增加组件

parent 7ca08b4d
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2020-02-08 10:27:21
* @LastEditors: 无尘
* @LastEditTime: 2020-05-11 15:06:16
* @LastEditTime: 2020-07-21 13:59:49
-->
<!--
选择门店分组组件:
......@@ -34,8 +34,6 @@
<el-checkbox-group v-model="dailyRuleForm.stores" @change="handleStoresChange">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li :class="['el-select-dropdown__item', item.select ? 'selected hover' : '']" v-for="item in stores" :key="item.storeId">
<!-- @click="checkStore(item)" -->
<!-- <span>{{ item.storeName }}</span> -->
<el-checkbox :label="item.storeId">{{ item.storeName }}</el-checkbox>
</li>
<li v-if="!stores.length" class="text-center"><span>暂无数据</span></li>
......
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-07-21 10:10:57
* @LastEditors: 无尘
* @LastEditTime: 2020-07-21 14:15:54
-->
<!--
设置成员所在部门(回收站)
<store-auth-dialog v-if="setVisible" @closeSet="closeSet"></store-auth-dialog>
import storeAuthDialog from '@/components/company/store-auth-dialog.vue';
-->
<template>
<el-dialog width="600px" title="门店绑定" :visible.sync="setVisible" append-to-body :before-close="handleClose">
<div class="bind-store-body">
<div class="el-form-item el-form-item--large">
<label for="name" class="el-form-item__label" style="width: 110px;">
选择绑定门店
</label>
<div class="el-form-item__content" style="margin-left: 110px;">
<el-radio v-model="formData.sendRange" label="1" @change="changeRange">所有门店</el-radio>
<el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="2" @change="changeRange">选择分组</el-radio>
<el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="3" @change="changeRange">选择门店</el-radio>
<div v-if="(formData.sendRange == '2' || formData.sendRange == '3') && !formData.selectList.length" class="el-form-item__error">请选择绑定门店</div>
<store-auth-group v-if="formData.sendRange == '2'" :selectGroup="selectGroupData" @checkGroupIds="checkGroupIds"></store-auth-group>
<store-auth-store v-if="formData.sendRange == '3'" :selectStore="selectStoreData" @checkStoreIds="checkStoreIds"></store-auth-store>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</div>
</el-dialog>
</template>
<script>
/* eslint-disable */
import storeAuthGroup from '@/components/company/store-auth-group.vue';
import storeAuthStore from '@/components/company/store-auth-store.vue';
import {
_debounce
} from '@/common/js/public';
import {
getRequest,
postRequest
} from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
export default {
props: {
selectData: {
type: [Object, Array],
default () {
return [];
}
}
},
data() {
return {
setVisible: true,
formData: {
sendRange: '1',
selectList: []
},
selectGroupData: [],// 选择的分组数据
selectStoreData: [] // 选择的门店数据
};
},
computed: {},
watch: {
searchSelect(val) {
this.$refs.groupTree.filter(val);
}
},
methods: {
/**
* 加载更多
*/
async loadNode(node, resolve) {
// console.log(node, resolve);
const that = this;
if (node.level === 0) {
return resolve(that.getGroup());
} else {
await that.getGroup(node, node.data, resolve);
}
},
/**
* 关闭弹窗
*/
handleClose(done) {
const that = this;
done();
that.$emit('closeSet');
that.selectGroupData = [];
that.selectStoreData = [];
},
cancel() {
const that = this;
that.$emit('closeSet');
that.selectGroupData = [];
that.selectStoreData = [];
},
filterNode(value, data) {
if (!value || !data.label) return true;
return data.label.indexOf(value) !== -1;
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
if (!that.groupDataCopy.length) {
return false;
}
}, 200),
/**
* 清空
*/
clearSearch() {
const that = this;
that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
},
/**
* 选择 tree 节点,获取选择节点信息
*/
checkGroup: function(e) {
const that = this;
that.groupIds = that.$refs.groupTree.getCheckedNodes();
that.$emit('checkGroupIds', that.$refs.groupTree.getCheckedNodes());
},
/**
* 获取tree 数据
*/
/**
* 获取门店分组
*/
getGroup(node, data, resolve) {
let that = this;
let para = {
parentId: data ? data.departmentId : '',
isStore: 0
};
if (node && (!data.hasSonNode || data.isStore == 1)) {
resolve([]);
return false;
}
getRequest('/haoban-manage3-web/department-list-level', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && resData.result.length) {
resData.result.forEach(ele => {
ele.expand = false;
ele.children = [];
ele.label = ele.departmentName;
});
}
if (node) {
resolve(resData.result);
if (!data.children) {
that.$set(data, 'children', []);
}
data.children = resData.result || [];
that.$forceUpdate();
return false;
}
that.groupData = resData.result || [];
// 存一份数据自己搜索
that.groupDataCopy = JSON.parse(JSON.stringify(that.groupData));
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 确定
*/
submitForm() {
const that = this;
if (that.formData.sendRange == '2' && !that.selectGroupData.length) {
// showMsg.showmsg('请选择部门', 'warning');
return false;
}
if (that.formData.sendRange == '3' && !that.selectStoreData.length) {
// showMsg.showmsg('请选择部门', 'warning');
return false;
}
that.$emit('closeSet', that.selectId);
}
},
components: {
storeAuthGroup,
storeAuthStore
},
mounted() {
}
};
</script>
<style lang="less" scoped>
.select-tree-wrap {
height: 445px;
overflow-y: auto;
border: 1px solid #e4e7ed;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-07-21 10:10:57
* @LastEditors: 无尘
* @LastEditTime: 2020-07-21 11:24:14
-->
<!--
设置成员所在部门(回收站)
<store-auth-group @checkGroupIds="checkGroupIds"></store-auth-group>
import storeAuthGroup from '@/components/company/store-auth-group.vue';
-->
<template>
<div class="bind-store-body">
<div class="select-search">
<!-- 树形也自带有过滤搜索的方法 -->
<el-input placeholder="请输入内容" clearable v-model="searchSelect" style="width: 296px;" @keyup.native="value => toInput(value, searchSelect)" @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
</div>
<div class="select-tree-wrap m-t-20">
<el-tree ref="groupTree" :filter-node-method="filterNode" :data="groupData" :load="loadNode" node-key="departmentId" lazy show-checkbox default-expand-all :props="defaultProps" :expand-on-click-node="false" @check="checkGroup">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span :class="['font-14 p-r-10 iconfont', data.isStore == 1 ? 'icondianpu-kuai' : 'iconqiye-tianchong', data.bindFlag == 1 ? 'color-2f54eb' : 'color-dedfe6']"></span><span class="font-14 color-606266">{{ node.label }}</span>
</span>
</el-tree>
</div>
</div>
</template>
<script>
/* eslint-disable */
import {
_debounce
} from '@/common/js/public';
import {
getRequest,
postRequest
} from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
export default {
props: {
selectGroup: {
type: [Object, Array],
default () {
return {};
}
}
},
data() {
return {
searchSelect: '', // 搜索字段
groupData: [],
groupDataCopy: [],
defaultProps: {
children: 'children',
label: 'departmentName'
}
};
},
computed: {},
watch: {
searchSelect(val) {
this.$refs.groupTree.filter(val);
}
},
methods: {
/**
* 加载更多
*/
async loadNode(node, resolve) {
// console.log(node, resolve);
const that = this;
if (node.level === 0) {
return resolve(that.getGroup());
} else {
await that.getGroup(node, node.data, resolve);
}
},
filterNode(value, data) {
if (!value || !data.label) return true;
return data.label.indexOf(value) !== -1;
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
if (!that.groupDataCopy.length) {
return false;
}
}, 200),
/**
* 清空
*/
clearSearch() {
const that = this;
that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
},
/**
* 选择 tree 节点,获取选择节点信息
*/
checkGroup: function(e) {
const that = this;
that.groupIds = that.$refs.groupTree.getCheckedNodes();
that.$emit('checkGroupIds', that.$refs.groupTree.getCheckedNodes());
},
/**
* 获取tree 数据
*/
/**
* 获取门店分组
*/
getGroup(node, data, resolve) {
let that = this;
let para = {
parentId: data ? data.departmentId : '',
isStore: 0
};
if (node && (!data.hasSonNode || data.isStore == 1)) {
resolve([]);
return false;
}
getRequest('/haoban-manage3-web/department-list-level', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && resData.result.length) {
resData.result.forEach(ele => {
ele.expand = false;
ele.children = [];
ele.label = ele.departmentName;
});
}
if (node) {
resolve(resData.result);
if (!data.children) {
that.$set(data, 'children', []);
}
data.children = resData.result || [];
that.$forceUpdate();
return false;
}
that.groupData = resData.result || [];
// 存一份数据自己搜索
that.groupDataCopy = JSON.parse(JSON.stringify(that.groupData));
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
},
components: {},
mounted() {
const that = this;
that.getGroup();
}
};
</script>
<style lang="less" scoped>
.bind-store-body {
.w-215 {
width: 215px;
}
.w-115 {
width: 115px;
}
.select-tree-wrap {
height: 445px;
overflow-y: auto;
border: 1px solid #e4e7ed;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-07-21 10:10:57
* @LastEditors: 无尘
* @LastEditTime: 2020-07-21 14:15:30
-->
<!--
设置成员所在部门(回收站)
<store-auth-store @checkStoreIds="checkStoreIds"></store-auth-store>
import storeAuthStore from '@/components/company/store-auth-store.vue';
-->
<template>
<div class="daily-store-select">
<div class="select-search">
<el-input placeholder="请输入门店名称" v-model="searchSelect" style="width: 100%;" clearable @keyup.native="value => toInput(value, searchSelect)" @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
</div>
<div class="checkbox border-box" style="padding: 15px 20px;">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
</div>
<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.stores" @change="handleStoresChange">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li :class="['el-select-dropdown__item', item.select ? 'selected hover' : '']" v-for="item in stores" :key="item.storeId">
<el-checkbox :label="item.storeId">{{ item.storeName }}</el-checkbox>
</li>
<li v-if="!stores.length" class="text-center"><span>暂无数据</span></li>
</ul>
</el-checkbox-group>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
import {
_debounce
} from '@/common/js/public';
import {
getRequest,
postRequest
} from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
export default {
props: {
selectStore: {
type: [Object, Array],
default () {
return {};
}
}
},
data() {
return {
checkAll: false, // 全选
isIndeterminate: false,
searchSelect: '', // 搜索字段
stores: [], // 门店列表集合
storesCopy: [],
dailyRuleForm: {
stores: [], // 已选门店id结果集
},
pageNum: 1,
pageSize: 200
};
},
computed: {},
methods: {
/**
* 全选
*/
handleCheckAllChange(val) {
const that = this;
that.dailyRuleForm.stores = val ? that.stores.map(item => item.storeId) : [];
that.isIndeterminate = false;
that.$emit('checkStoreIds', that.dailyRuleForm.stores);
},
handleStoresChange(value) {
const that = this;
let checkedCount = value.length;
that.checkAll = checkedCount === that.stores.length;
that.isIndeterminate = checkedCount > 0 && checkedCount < that.stores.length;
that.$emit('checkStoreIds', that.dailyRuleForm.stores);
},
/**
* 输入
*/
toInput: _debounce(function(e, value) {
const that = this;
if (that.searchSelect != '') {
that.stores = [];
that.pageNum = 1;
that.getStoreData();
}
}, 500),
/**
* 选择门店
*/
checkStore(item) {
const that = this;
if (item.select) {
item.select = false;
const index = that.dailyRuleForm.stores.indexOf(item.storeId);
that.dailyRuleForm.stores.splice(index, 1);
} else {
item.select = true;
that.dailyRuleForm.stores.push(item.storeId);
}
that.storesCopy.forEach(ele => {
if (that.dailyRuleForm.stores.includes(ele.storeId)) {
ele.select = true;
}
});
},
/**
* 清空
*/
clearSearch() {
const that = this;
that.stores = [];
that.pageNum = 1;
that.getStoreData();
// that.stores = JSON.parse(JSON.stringify(that.storesCopy));
},
/**
* 获取门店
*/
getStoreData() {
let that = this;
let para = {
searchName: that.searchSelect,
gicEnterpriseId: that.brandId,
pageNum: that.pageNum,
pageSize: that.pageSize
};
getRequest('/haoban-app-customer-web/cardCoupon/get-store-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.result.result) {
resData.result.result.forEach(ele => {
ele.select = false;
if (that.selectStore.includes(ele.storeId)) {
ele.select = true;
}
});
}
if (that.pageNum == 1) {
that.stores = JSON.parse(JSON.stringify(resData.result.result)) || [];
that.storesCopy = JSON.parse(JSON.stringify(resData.result.result)) || [];
}else {
resData.result.result.forEach(ele => {
that.stores.push(ele);
that.storesCopy.push(ele);
})
}
if (that.pageNum*that.pageSize < resData.result.totalCount) {
that.pageNum ++;
that.$nextTick(()=>{
that.getStoreData();
})
}
// console.log('that.stores:',that.stores)
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
components: {},
watch: {
selectStore: function(newData, oldData) {
const that = this;
if (!!newData.length) {
that.dailyRuleForm.stores = JSON.parse(JSON.stringify(newData));
}else {
that.dailyRuleForm.stores = [];
}
},
},
mounted() {
const that = this;
that.stores = [];
that.storesCopy = [];
that.getStoreData();
if (!!that.selectStore.length) {
that.dailyRuleForm.stores = JSON.parse(JSON.stringify(that.selectStore));
}else {
that.dailyRuleForm.stores = [];
}
}
};
</script>
<style lang="less" scoped>
.daily-store-select {
position: relative;
}
</style>
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2020-07-16 16:37:05
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 14:49:34
* @LastEditTime: 2020-07-21 13:42:37
*/
import _import from './_import.js';
......@@ -60,21 +60,22 @@ export const routes = [
name: '审核中心',
redirect: 'unreview',
component: _import('reviewCenter', 'index'),
children: [{
path: '/reviewed',
name: '已审核',
component: _import('reviewCenter', 'reviewed')
},
{
path: '/unreview',
name: '未审核',
component: _import('reviewCenter', 'unreview')
},
{
path: '/reviewSet',
name: '审核设置',
component: _import('reviewCenter', 'reviewSet')
}
children: [
{
path: '/reviewed',
name: '已审核',
component: _import('reviewCenter', 'reviewed')
},
{
path: '/unreview',
name: '未审核',
component: _import('reviewCenter', 'unreview')
},
{
path: '/reviewSet',
name: '审核设置',
component: _import('reviewCenter', 'reviewSet')
}
]
},
{
......@@ -88,6 +89,16 @@ export const routes = [
path: '/enterpriseSet',
name: '企业信息',
component: _import('enterprise', 'enterpriseSet')
},
{
path: '/authManage',
name: '权限管理',
component: _import('enterprise', 'authManage')
},
{
path: '/superAdmin',
name: '超级管理员',
component: _import('enterprise', 'superAdmin')
}
]
},
......@@ -116,4 +127,4 @@ export const routes = [
redirect: '/404',
hidden: true
}
]
];
......@@ -4,7 +4,7 @@
* @Author: 无尘
* @Date: 2019-03-20 14:36:37
* @LastEditors: 无尘
* @LastEditTime: 2020-07-20 14:49:18
* @LastEditTime: 2020-07-21 13:42:01
-->
<template>
<div class="my-customer-wrap common-set-wrap">
......@@ -49,6 +49,16 @@ export default {
tabId: '1',
tabName: '企业信息',
icon: 'iconqiyexinxi'
},
{
tabId: '2',
tabName: '权限管理',
icon: 'iconqiyexinxi'
},
{
tabId: '3',
tabName: '超级管理员',
icon: 'iconqiyexinxi'
}
],
activeBrand: '', // 商户(品牌) id
......@@ -97,10 +107,10 @@ export default {
that.changeRoute('enterpriseSet');
break;
case '2':
that.changeRoute('adminList');
that.changeRoute('authManage');
break;
case '3':
that.changeRoute('material');
that.changeRoute('superAdmin');
break;
}
},
......
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2020-03-16 09:59:39
* @LastEditors: 无尘
* @LastEditTime: 2020-07-21 13:48:29
-->
<template>
<div class="daily-set-wrap ">
<div class="daily-set-content border-box">
<div class="admin-tip-body">
<div role="alert" class="el-alert el-alert--info">
<i class="el-alert__icon el-icon-info"></i>
<div class="el-alert__content">
<span class="el-alert__title">超级管理员不可新增,默认为企业微信所添加的好办应用管理员,拥有好办所有管理权限。</span>
</div>
</div>
</div>
<div class="admin-table-body m-t-20">
<el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%">
<el-table-column label="姓名">
<template slot-scope="scope">
{{scope.row.userName || '--'}}
</template>
</el-table-column>
<el-table-column label="职务">
<template slot-scope="scope">
{{scope.row.departmentName || '--'}}
</template>
</el-table-column>
<el-table-column label="手机号">
<template slot-scope="scope">
{{scope.row.userPhone || '--'}}
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import { getRequest } from '@/api/api';
// import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
props: {},
data() {
return {
wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
tableData: []
};
},
methods: {
changeToggle(item) {
item.expand = item.expand ? false : true;
},
/**
* 获取数据
*/
getData(val) {
const that = this;
let para = {
wxEnterpriseId: that.wxEnterpriseId
};
getRequest('/haoban-manage3-web/admin-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && resData.result.length) {
resData.result.forEach(ele => {
ele.expand = false;
});
}
that.tableData = resData.result || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
watch: {},
mounted() {
const that = this;
that.$emit('showTab', 2);
document.documentElement.style.backgroundColor = '#f0f2f5';
that.getData();
},
destroyed() {
document.documentElement.style.backgroundColor = '#fff';
},
components: {}
};
</script>
<style type="text/less" lang="less" scoped>
.bg-ebecf0 {
background: #ebecf0;
}
.color-c0c4cc {
display: inline-block;
line-height: 34px;
padding-left: 10px;
color: #c0c4cc;
}
.condition-tips {
display: inline-block;
vertical-align: middle;
line-height: 32px;
}
.p-l-30 {
padding-left: 30px;
}
.p-l-40 {
padding-left: 40px;
}
.p-l-55 {
padding-left: 55px;
}
.p-l-85 {
padding-left: 85px;
}
.m-l-20 {
margin-left: 20px;
}
.line-50 {
height: 50px;
line-height: 50px;
}
.el-alert--info {
width: 608px;
font-size: 14px;
color: #606266;
background: rgba(240, 245, 255, 1);
border-radius: 2px;
border: 1px solid rgba(133, 165, 255, 1);
}
.el-icon-info {
width: 12px;
font-size: 12px;
color: #2f54eb;
}
.table-condition {
/* min-width: 1200px; */
}
.admin-table-body {
.admin-thead {
width: 100%;
height: 48px;
line-height: 48px;
}
.row-th {
height: 48px;
line-height: 48px;
}
.el-row {
font-size: 14px;
border-bottom: 1px solid #dcdfe6;
overflow: hidden;
&.border-set {
border-bottom: 0px solid #dcdfe6;
.el-col {
position: relative;
border-bottom: 1px solid #dcdfe6;
&::after {
content: ' ';
position: absolute;
left: 0px;
bottom: 0;
width: 100%;
height: 50px;
border-bottom: 1px solid #dcdfe6;
z-index: 1;
}
&.line-one {
&::after {
content: ' ';
position: absolute;
left: 55px;
bottom: 0;
width: calc(100% - 55px);
height: 50px;
border-bottom: 1px solid #dcdfe6;
z-index: 1;
}
}
}
}
.hide-border {
position: relative;
&::after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
width: 55px;
height: 1px;
background: #fff;
z-index: 1;
}
}
}
}
.daily-set-wrap {
height: 100%;
.daily-set-content {
padding: 20px;
.table-condition-left {
font-size: 0;
}
}
.el-form {
.el-form-item {
margin-bottom: 4px;
}
/deep/ .el-form-item__label {
color: #606266;
}
}
.depart-item-content {
width: 213px;
height: 32px;
overflow: hidden;
white-space: nowrap;
border-radius: 4px;
border: 1px solid #dcdfe6;
cursor: pointer;
}
.item-cell-select {
/deep/ .el-select__tags {
white-space: nowrap;
overflow: hidden;
}
}
.depart-cell {
position: relative;
margin: 0 24px 24px 0;
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
}
}
}
</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