Commit 5f749b51 by fairyly

feat: 更新路由配置

parent 04789620
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @Author: 无尘 * @Author: 无尘
* @Date: 2018-10-10 14:44:45 * @Date: 2018-10-10 14:44:45
* @LastEditors : 无尘 * @LastEditors : 无尘
* @LastEditTime : 2020-02-12 11:21:17 * @LastEditTime : 2020-02-18 08:46:29
*/ */
import Vue from 'vue'; import Vue from 'vue';
import Router from 'vue-router'; import Router from 'vue-router';
...@@ -44,11 +44,6 @@ export const constantRouterMap = [ ...@@ -44,11 +44,6 @@ export const constantRouterMap = [
redirect: 'login' redirect: 'login'
}, },
{ {
path: '/tree',
name: '登录',
component: _import('login', 'tree')
},
{
path: '/login', path: '/login',
name: '登录', name: '登录',
component: _import('login', 'index') component: _import('login', 'index')
...@@ -120,17 +115,17 @@ export const constantRouterMap = [ ...@@ -120,17 +115,17 @@ export const constantRouterMap = [
children: [ children: [
{ {
path: '/memberShowSet', path: '/memberShowSet',
name: '会员基础设置', name: '会员展示设置',
component: _import('apps/customerApp', 'memberShowSet') component: _import('apps/customerApp', 'memberShowSet')
}, },
{ {
path: '/memberGroupSet', path: '/memberGroupSet',
name: '会员基础设置', name: '会员分组设置',
component: _import('apps/customerApp', 'memberGroupSet') component: _import('apps/customerApp', 'memberGroupSet')
}, },
{ {
path: '/memberSearchSet', path: '/memberSearchSet',
name: '会员基础设置', name: '会员搜索设置',
component: _import('apps/customerApp', 'memberSearchSet') component: _import('apps/customerApp', 'memberSearchSet')
} }
] ]
......
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors : 无尘
* @LastEditTime : 2020-01-14 14:44:57
-->
<!--
<org-tree v-if="item.children.length" :itemData="item.children" ></org-tree>
import orgTree from './org-tree.vue';
-->
<template>
<ul class="m-l-10">
<draggable :list="itemData" class="org-component" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
<li v-for="(item, index) in itemData" :key="index + 'gic'">
<div class="li-cell cursor-pointer" @click="toggleExpand(item)">{{ item.label }}</div>
<li-row v-show="!!item.children.length && item.expand" :itemData="item.children"></li-row>
</li>
</draggable>
</ul>
</template>
<script>
import draggable from 'vuedraggable';
export default {
name: 'li-row',
components: {
draggable
},
props: {
itemData: {
type: [Object, Array],
default() {
return [];
}
}
},
data() {
return {
// leftOption
leftOption: {
group: {
name: 'people',
pull: true,
put: false
},
sort: false,
disabled: false
}
};
},
methods: {
/**
* 展开或者关闭下级
*/
toggleExpand(item) {
console.log(item);
item.expand = item.expand ? false : true;
},
/**
* move{relatedContext, draggedContext}
*/
onMove(evt) {
// const that = this;
// 判断中间是否存在父级
const draggedElement = evt.draggedContext.element;
console.log(evt, !draggedElement.fixed);
return !draggedElement.fixed;
},
/**
* move end
*/
itemMoveEnd(evt) {
const that = this;
// 判断中间是否已经添加
console.log(that.itemData);
that.$forceUpdate();
}
},
watch: {
itemData: function(newData, oldData) {
const that = this;
that.trData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.trData = JSON.parse(JSON.stringify(that.itemData));
},
beforeDestroy() {
this.tempArr = [];
}
};
</script>
<style lang="less" scoped>
.li-cell {
line-height: 26px;
}
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2018-10-10 14:44:45
-->
<template>
<div class="login-wrap">
<header>
<div class="login-wrap-header">
<img class="login-wrap-inline" src="../../assets/logo.png" alt="logo" />
<span class="login-wrap-inline">好办管理后台</span>
</div>
</header>
<section>
<!-- <ul class="list-content">
<draggable :list="gicData" class="compenent" :options="leftOption" :move="onMove" @start="isDragging = true" @end="itemMoveEnd">
<li v-for="(item, index) in gicData" :key="index + 'gic'">
<div class="li-cell">{{ item.label }}</div>
<org-tree v-if="item.children.length" :itemData="item.children"></org-tree>
</li>
</draggable>
</ul> -->
<org-tree :itemData="gicData"></org-tree>
<!-- <ul class="list-content">
<draggable :options="{ group: { name: 'people', pull: true, put: true }, sort: true }" v-model="wxData" class="drag-wrap">
<li v-for="(item, index) in wxData" :key="index + 'wx'">
<div class="li-cell">{{ item.label }}</div>
<wx-tree v-if="item.children.length" :itemData="item.children"></wx-tree>
</li>
</draggable>
</ul> -->
<wx-tree :itemData="wxData" v-model="wxData"></wx-tree>
<el-button type="primary" @click="getData">获取数据</el-button>
</section>
<footer class="p-t-35">
<vue-gic-footer></vue-gic-footer>
</footer>
</div>
</template>
<script>
import orgTree from './org-tree.vue';
import wxTree from './wx-tree.vue';
// import { _debounce } from '@/common/js/public';
// import errMsg from '@/common/js/error';
// import { postRequest } from '@/api/api';
export default {
name: 'login',
data() {
return {
// 企业列表
gicData: [
{
id: 1,
expand: false,
label: '总部1',
children: [
{
id: 11,
expand: false,
label: '总部11',
children: [
{
id: 111,
expand: false,
label: '总部111',
children: []
}
]
},
{
id: 12,
expand: false,
label: '总部12',
children: [
{
id: 121,
expand: false,
label: '总部121',
children: []
}
]
}
]
}
],
wxData: [
{
id: 2,
expand: false,
label: '总部2',
children: [
{
id: 21,
expand: false,
label: '总部21',
children: [
{
id: 211,
expand: true,
label: '总部211',
children: []
}
]
},
{
id: 22,
expand: false,
label: '总部22',
children: [
{
id: 221,
expand: true,
label: '总部221',
children: []
}
]
}
]
}
]
};
},
computed: {},
methods: {
getData() {
const that = this;
console.log(that.gicData, that.wxData);
},
/**
* 处理路由跳转
*/
toRouterView(val) {
const that = this;
// 模拟检查数据,有两个参数
that.$router.push({
path: val.path
});
}
},
mounted() {
// const that = this;
if (!!localStorage.getItem('userInfo')) {
localStorage.removeItem('userInfo');
}
},
components: {
orgTree,
wxTree
}
};
</script>
<style lang="less" scoped>
.list-content {
position: relative;
width: 500px;
height: 200px;
}
.li-cell {
line-height: 26px;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.p-lr-5 {
padding: 0 5px;
}
.color-676767 {
color: #676767;
}
.color-808080 {
color: #808080;
&.color-303133 {
color: #303133;
}
}
.login-wrap {
position: relative;
header {
width: 100%;
padding: 0;
margin: 0;
background: rgba(255, 255, 255, 1);
}
&-header {
width: 1400px;
height: 64px;
line-height: 64px;
padding: 0 0 0 60px;
margin: 0 auto;
background: rgba(255, 255, 255, 1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*-webkit-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
-moz-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
box-shadow: 0px 0px 10px rgba(147,165,184,0.13);*/
}
&-inline {
display: inline-block;
vertical-align: middle;
font-size: 20px;
color: #1f2f3d;
}
&-body {
width: 100%;
background: url('../../assets/login/banner.png') no-repeat center center;
background-size: auto 640px;
}
&-out {
position: relative;
width: 1400px;
height: 640px;
margin: 0 auto;
/*background: rgba(0,0,0,1);*/
}
&-inner {
position: absolute;
top: 140px;
right: 170px;
width: 303px;
height: 340px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 238, 245, 1);
border-radius: 4px;
-webkit-box-shadow: 2px 0px 12px rgba(6, 19, 33, 0.1);
-moz-box-shadow: 2px 0px 12px rgba(6, 19, 33, 0.1);
box-shadow: 2px 0px 12px rgba(6, 19, 33, 0.1);
&__block {
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
&__head {
position: relative;
width: 100%;
height: 56px;
line-height: 56px;
border-bottom: 1px solid rgba(235, 238, 245, 1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 18px;
color: #303133;
ul {
position: relative;
}
#line-active {
position: absolute;
bottom: 0;
left: 123px;
width: 56px;
height: 2px;
background: #1890ff;
z-index: 2;
transition: all 0.3s ease-in;
}
}
&__body {
position: relative;
width: 100%;
height: 317px;
text-align: center;
padding: 34px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.loginForm {
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.w-139 {
width: 139px;
}
.code-item {
text-align: left;
}
.el-button {
width: 100%;
padding: 0;
height: 40px;
line-height: 40px;
}
.el-input {
/deep/ .el-input__inner {
height: 40px;
line-height: 40px;
}
}
}
#qrcode {
width: 156px;
height: 156px;
margin: 0 auto;
}
}
&__title {
width: 100%;
margin-top: 20px;
font-size: 12px;
color: #606266;
&.m-t-5 {
margin-top: 5px;
}
.el-button {
font-size: 12px;
}
}
&__expired {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 34px;
left: 73px;
width: 157px;
height: 156px;
background: rgba(255, 255, 255, 1);
opacity: 0.9;
}
&__selectBody {
position: relative;
width: 100%;
height: 317px;
text-align: center;
padding: 32px 21px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.el-button--primary {
width: 100%;
margin-top: 27px;
}
}
&__swiper {
margin-top: 30px;
.swiper-cell {
cursor: pointer;
.swiper-slide-log_img {
padding: 6px;
border-radius: 8px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&.defalut-bg {
padding: 25px;
background: #82c5ff;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
i {
font-size: 35px;
color: #e5f3ff;
}
}
}
.img-bg {
background: #ededee;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
&.current-item {
.swiper-slide-log_img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
&.defalut-bg {
/*padding: 25px;*/
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}
}
}
.swiper-slide {
&__img {
width: 72px;
height: 72px;
border-radius: 8px;
}
&__p {
margin-top: 14px;
font-size: 14px;
color: #6b6d71;
}
}
.swiper-button-prev {
height: 97px;
margin-top: -66px;
left: 0;
padding-top: 55px;
background: #fff;
background-image: none;
i {
color: #303133;
}
}
.swiper-button-next {
height: 97px;
margin-top: -66px;
right: 0;
padding-top: 55px;
background: #fff;
background-image: none;
i {
color: #303133;
}
}
}
}
&-expired__title {
font-size: 12px;
color: #f56c6c;
}
.el-icon-refresh {
color: #1890ff;
cursor: pointer;
}
.el-button {
&.h-48 {
height: 48px;
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-14 16:51:07
* @LastEditors : 无尘
* @LastEditTime : 2020-01-14 14:44:57
-->
<!--
<wx-tree v-model="itemData" ></wx-tree>
import wxTree from './wx-tree.vue';
-->
<template>
<ul class="m-l-10">
<draggable :list="itemData" class="wx-component" :options="rightOption" @input="emitter" @change="changeData">
<li v-for="(item, index) in itemData" :key="index + 'gic'">
<div class="li-cell cursor-pointer" v-contextmenu:contextmenu @click="toggleExpand(item)">{{ item.label }}</div>
<v-contextmenu ref="contextmenu">
<v-contextmenu-item @click="addChild(item)">添加子部门</v-contextmenu-item>
<v-contextmenu-item @click="modChild(item)">修改名称</v-contextmenu-item>
<v-contextmenu-item @click="delChild(item)">删除</v-contextmenu-item>
<v-contextmenu-item>部门ID: {{ item.id }}</v-contextmenu-item>
</v-contextmenu>
<li-row v-if="item.expand" :itemData="item.children"></li-row
><!-- v-show="!!item.children.length && item.expand" -->
</li>
</draggable>
</ul>
</template>
<script>
import draggable from 'vuedraggable';
import showMsg from '@/common/js/showmsg';
export default {
name: 'li-row',
components: {
draggable
},
props: {
value: {
type: [Object, Array],
default() {
return [];
}
},
itemData: {
type: [Object, Array],
default() {
return [];
}
}
},
data() {
return {
rightOption: { group: { name: 'people', pull: true, put: true }, sort: true }
};
},
computed: {},
methods: {
/**
* 改变数组数据
*/
emitter(value) {
console.log(value);
this.$emit('input', value);
},
changeData(value) {
console.log(value);
},
/**
* 展开或者关闭下级
*/
toggleExpand(item) {
const that = this;
console.log(item);
item.expand = item.expand ? false : true;
if (!item.children.length) {
item.expand = true;
}
that.$forceUpdate();
},
/**
* 添加子部门
*/
addChild(item) {
const that = this;
console.log('添加:', item);
item.children.push({
id: 225,
expand: true,
label: '总部225',
children: []
});
that.$forceUpdate();
},
/**
* 修改名称
*/
modChild(item) {
const that = this;
console.log('修改:', item);
item.label = 2222;
that.$forceUpdate();
},
/**
* 删除
*/
delChild(item) {
const that = this;
console.log('删除:', item, that.itemData);
if (!!item.children.length) {
showMsg.showmsg('当前节点下有子节点,不可删除', 'warning');
return false;
}
let key = '';
that.itemData.forEach((ele, index) => {
if (ele.id == item.id) {
key = index;
}
});
that.itemData.splice(key, 1);
that.$forceUpdate();
}
},
watch: {
value: function(newData, oldData) {
const that = this;
that.trData = JSON.parse(JSON.stringify(newData));
}
},
mounted() {
const that = this;
that.trData = JSON.parse(JSON.stringify(that.value));
}
/* beforeDestroy() {} */
};
</script>
<style lang="less" scoped>
.li-cell {
min-height: 26px;
line-height: 26px;
}
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:00:58
-->
<template>
<div class="review-wrap">
<!-- 公共头部菜单插件 -->
<vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
<div class="setting-wrap__body">
<div id="content" class="content">
<div class="content-body" :style="{ height: contentHeight }">
<div class="left-menu" :style="{ height: contentHeight }">
<vue-office-aside ref="asideMenu" :projectName="projectName" :collapseFlag="collapseFlag"> </vue-office-aside>
</div>
<transition name="fade" mode="out-in">
<!-- 缓存已经填好内容的页面 -->
<!-- <keep-alive include="editGroupGrade"> -->
<router-view></router-view>
<!-- </keep-alive > -->
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'reviewed',
data() {
return {
projectName: 'haoban-manage-web', // 当前项目名
collapseFlag: false, // 折叠参数
contentHeight: '0px' //页面内容高度
};
},
computed: {},
methods: {
// 处理路由跳转
toRouterView(val) {
const that = this;
// 模拟检查数据,有两个参数
/*{
name:,
path:
}*/
that.$router.push({
path: val.path
});
},
// 折叠事件
collapseTag(val) {
const that = this;
that.collapseFlag = val;
}
},
watch: {
$route: {
handler: function(val, oldVal) {
this.$refs.asideMenu.refreshRoute();
},
// 深度观察监听
deep: true
}
},
mounted() {
const that = this;
that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
}
};
</script>
<style lang="less">
.review-wrap {
background-color: #f0f2f5;
}
.setting-wrap__body {
.content {
padding-top: 64px;
/* height: calc(100% - 64px);
overflow-y: auto;*/
min-width: 1400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.content-body {
display: flex;
overflow: hidden;
.common-set-wrap {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
}
}
}
}
}
}
.el-table__body-wrapper .el-table__empty-block {
height: 256px;
}
.el-table__empty-text {
width: auto;
margin-bottom: 80px;
&::before {
content: ' ';
display: block;
width: 60px;
height: 60px;
background: url(../../assets/no-data_icon.png) no-repeat center;
margin: 0px auto 22px auto;
}
}
.el-table__empty-text {
margin-bottom: 0;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2019-10-21 17:53:54
-->
<template>
<div class="reviewed-wrap common-set-wrap">
<nav-crumb :navpath="navpath"> </nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
<div class="reviewed-body-head">
<el-select class="w-130" v-model="filterValue" placeholder="全部状态" @change="getTableList"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
><el-select class="w-168 m-l-10" v-model="filterBrand" placeholder="全部品牌" @change="getTableList">
<el-option label="全部品牌" value=""></el-option>
<el-option v-for="item in brandOptions" :key="item.brandId" :label="item.name" :value="item.brandId"> </el-option> </el-select
><el-input class="w-250 m-l-10" placeholder="请输入提交人姓名或门店名称" prefix-icon="el-icon-search" v-model="searchValue" clearable @clear="clearSearch" @keyup.enter.native="searchEnterFun"> </el-input>
</div>
<div class="reviewed-body-content">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
<el-table-column label="审核事项">
<template slot-scope="scope">
{{ scope.row.auditingType == 0 ? '门店信息变更' : scope.row.auditingType == 1 ? '新增成员' : scope.row.auditingType == 2 ? '成员离职' : '转移成员' }}
</template>
</el-table-column>
<el-table-column label="品牌">
<template slot-scope="scope">
{{ scope.row.brandName || '--' }}
</template>
</el-table-column>
<el-table-column label="提交人" show-overflow-tooltip>
<template slot-scope="scope">
<div class="flex">
<el-popover placement="top-start" width="400" trigger="hover" @show="showSingleInfo(scope.row.applyId)">
<div class="apply-info-detail">
<div class="flex">
<div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
<i v-if="!scope.row.headPic" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headPic" alt="img" />
</div>
<div class="flex flex-column apply-info-right flex-space-between">
<div class="apply-info-name">
{{ scope.row.applyName }}
<i :class="[scope.row.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont']"></i>
</div>
<div class="apply-info-code">
<span class="w-80">员工代码:</span><span class="w-130">{{ scope.row.code }}</span>
</div>
<div class="apply-info-phone">
<span class="w-80">手机号:</span><span class="w-130">{{ scope.row.nationcode == '86' ? scope.row.phoneNumber : '+' + scope.row.nationcode + '-' + scope.row.phoneNumber }}</span>
</div>
<div class="apply-info-job">
<span class="w-80">职位:</span><span class="w-130">{{ scope.row.positionName }}</span>
</div>
<div class="apply-info-store">
<span class="w-80">所属门店:</span><span class="w-130">{{ scope.row.storeName }}</span>
</div>
</div>
</div>
</div>
<div slot="reference">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
<i v-if="!scope.row.headPic" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headPic" alt="img" />
</div>
</div>
</el-popover>
<div class="flex flex-column apply-info">
<span>{{ scope.row.applyName }}</span>
<span class="font-13">{{ scope.row.storeName }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="详情" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.auditingType != 0 || (scope.row.auditingType == 0 && scope.row.auditingUpdateType != 1)">{{ scope.row.detail }}</span>
<div class="line-hidden-2" v-if="scope.row.auditingUpdateType == 1">
<!-- <span> {{ scope.row.auditingType == 0? '门店信息变更': scope.row.auditingType == 0? '新增成员': '成员离职'}}</span> -->
<span>{{ scope.row.detail }}</span>
<el-button type="text" @click="showStoreChange(scope.row)">查看详情</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="提交时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="line-h-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="line-h-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="审核时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="line-h-18">{{ scope.row.updateTime | timeStampToYmd }}</div>
<div class="line-h-18">{{ scope.row.updateTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<span :class="[scope.row.auditingStatus == 2 ? 'color-FF585C' : '']">{{ scope.row.auditingStatus == 1 ? '超级管理员已同意' : '超级管理员已拒绝' }}</span>
<el-popover class="inline-block" placement="top" width="150" trigger="hover">
<div class="tooltip-text">{{ scope.row.refuseReason }}</div>
<div slot="reference">
<i class="el-icon-question" v-if="scope.row.auditingStatus == 2" @click="toggleReason(scope.row)"></i>
</div>
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 门店变更 -->
<storeChange v-model="showStoreDialog" :storeChangeData="storeChangeData"> </storeChange>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import storeChange from '@/components/review/store-change.vue';
import errMsg from '@/common/js/error';
import { getRequest, postRequest } from '@/api/api';
export default {
name: 'reviewed',
data() {
return {
tableH: window.screen.availHeight - 464 - 126 + 'px',
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '审核中心',
path: '/unreview'
},
{
name: '已审核',
path: ''
}
],
filterValue: '99',
filterBrand: '',
brandOptions: [], //品牌
filterOptions: [
// {
// label: '待审核',
// value: '0'
// },
{
label: '已同意',
value: '1'
},
{
label: '已拒绝',
value: '2'
},
{
label: '已审核',
value: '99'
}
],
searchValue: '', // 搜索
tableData: [
// {
// enterpriseAuditingId: 1,
// auditingType: 0,// 审核类型(0:门店信息变更,1:新增成员,2:成员离职)
// detail: '',
// relationId: 112,
// applyId: '12223233',
// applyName: '测试',
// headPic: '',
// storeName: '测试',
// refuseReason: '111111',
// auditingStatus: 1, //审核状态 (0:待审核 ,1: 已同意,2:已拒绝)
// beforeContent: '',
// afterContent: '',
// createTime: '2018-12-09 14:34:56'
// }
],
multipleSelection: [],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
// info
applyInfo: {
// photo: '',
// applyName: '测试的',
// sex: 2,
// code: '223344545fffffffffffffff4',
// phone: '13012343333',
// job: '店长',
// store: '测试门店'
},
// store
showStoreDialog: false,
storeChangeData: {}
};
},
computed: {},
methods: {
/**
* 搜索标签清空
*/
clearSearch() {
const that = this;
that.currentPage = 1;
that.getTableList();
},
/**
* 搜索标签
*/
searchEnterFun(e) {
const that = this;
let searchVal = String(e.target.value).trim();
if (!searchVal) {
return false;
}
that.currentPage = 1;
that.getTableList();
},
toggleReason(item) {
const that = this;
item.visible = true;
that.tableData.forEach(function(ele, index) {
if (ele.enterpriseAuditingId != item.enterpriseAuditingId) {
ele.visible = false;
}
});
},
/**
* 表格---多选
*/
handleSelectionChange(val) {
const that = this;
that.multipleSelection = val;
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
// let fullPath = that.$route.fullPath;
that.getTableList();
},
/**
* 获取头像处显示信息
*/
/* eslint-disable */
showSingleInfo(memberId) {},
/**
* 显示门店变更
*/
showStoreChange(item) {
const that = this;
that.storeChangeData = {
beforeContent: [],
afterContent: []
};
that.showStoreDialog = true;
that.storeChangeData = {
beforeContent: item.beforeContent != '' ? JSON.parse(item.beforeContent) : [],
afterContent: item.afterContent != '' ? JSON.parse(item.afterContent) : []
};
},
/**
* 获取品牌
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/application-brand-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandOptions = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
if (val) {
that.currentPage = 1;
}
let para = {
auditingType: '',
auditingStatus: that.filterValue,
search: that.searchValue || '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
brandId: that.filterBrand // 20190918新增品牌
};
getRequest('/haoban-manage-web/audit/auditing-list.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
this.getTableList();
this.getBrandData();
},
components: {
navCrumb,
storeChange
}
};
</script>
<style lang="less" scoped>
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-start {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.inline-block {
display: inline-block;
}
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.font-13 {
font-size: 13px;
}
.font-14 {
font-size: 14px;
}
.line-h-18 {
line-height: 18px;
}
.line-hidden-2 {
.flex;
.flex-align-center;
.flex-start;
height: 46px;
overflow: hidden;
white-space: pre-wrap;
span {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
max-height: 46px;
overflow: hidden;
}
}
.w-80 {
width: 80px;
}
.w-130 {
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.w-168 {
display: inline-block;
width: 168px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.w-250 {
width: 250px;
}
.m-l-10 {
margin-left: 10px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.common-wrap__page {
margin-top: 24px;
}
.tooltip-text {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
min-height: 500px;
padding: 24px;
.w-280 {
width: 280px;
}
.w-514 {
width: 514px;
}
.m-l-20 {
margin-left: 20px;
}
.m-t-45 {
margin-top: 45px;
}
.v-align-b {
vertical-align: bottom;
}
.text-center {
text-align: center;
}
.reviewed-body-head {
margin-bottom: 22px;
}
.table-head-pic {
width: 35px;
height: 35px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
width: 35px;
height: 35px;
border-radius: 3px;
}
}
.apply-info {
margin-left: 15px;
line-height: 18px;
span {
font-size: 14px;
color: #606266;
&.font-13 {
font-size: 13px;
}
}
}
}
}
.apply-info-detail {
/*padding: 18px;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.apply-info-img {
width: 150px;
height: 150px;
border-radius: 12px;
text-align: center;
i {
font-size: 106px;
color: #e5f3ff;
}
img {
width: 150px;
height: 150px;
border-radius: 12px;
}
}
.apply-info-name {
font-size: 16px;
color: #303133;
}
.apply-info-right {
width: 229px;
padding-left: 16px;
font-size: 13px;
color: #606266;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.w-80 {
display: inline-block;
vertical-align: top;
color: #303133;
}
.w-130 {
color: #303133;
}
}
}
.el-icon-question {
font-size: 14px;
color: #c0c4cc;
cursor: pointer;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2019-10-25 17:00:57
-->
<template>
<div class="unreview-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
<div class="reviewed-body-head flex flex-space-between">
<div>
<el-select v-model="filterValue" placeholder="全部事项" @change="getTableList" class="w-130"> <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
><el-select v-model="filterBrand" placeholder="全部品牌" @change="getTableList" class="w-168 m-l-10">
<el-option label="全部品牌" value=""></el-option>
<el-option v-for="item in brandOptions" :key="item.brandId" :label="item.name" :value="item.brandId"> </el-option>
</el-select>
</div>
<el-button type="primary" @click="approveAll">批量同意</el-button>
</div>
<div class="reviewed-body-content">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="审核事项">
<template slot-scope="scope">
{{ scope.row.auditingType == 0 ? '门店信息变更' : scope.row.auditingType == 1 ? '新增成员' : scope.row.auditingType == 2 ? '成员离职' : '转移成员' }}
</template>
</el-table-column>
<el-table-column label="品牌">
<template slot-scope="scope">
{{ scope.row.brandName || '--' }}
</template>
</el-table-column>
<el-table-column label="提交人" show-overflow-tooltip>
<template slot-scope="scope">
<div class="flex">
<el-popover placement="top-start" width="400" trigger="hover" @show="showSingleInfo(scope.row.applyId)">
<div class="apply-info-detail">
<div class="flex">
<div class="apply-info-img flex-align-center flex-pack-center bg-82C5FF ">
<i v-if="!scope.row.headPic" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headPic" alt="img" />
</div>
<div class="flex flex-column apply-info-right flex-space-between">
<div class="apply-info-name">
{{ scope.row.applyName }}
<i :class="[scope.row.sex == 2 ? 'icon-xingbienv color-FF585C' : 'icon-xingbienan color-508CEE', 'iconfont']"></i>
</div>
<div class="apply-info-code">
<span class="w-80">员工代码:</span><span class="w-130">{{ scope.row.code }}</span>
</div>
<div class="apply-info-phone">
<span class="w-80">手机号:</span><span class="w-130">{{ scope.row.nationcode == '86' ? scope.row.phoneNumber : '+' + scope.row.nationcode + '-' + scope.row.phoneNumber }}</span>
</div>
<div class="apply-info-job">
<span class="w-80">职位:</span><span class="w-130">{{ scope.row.positionName }}</span>
</div>
<div class="apply-info-store">
<span class="w-80">所属门店:</span><span class="w-130">{{ scope.row.storeName }}</span>
</div>
</div>
</div>
</div>
<div slot="reference">
<div class="flex flex-align-center flex-pack-center bg-82C5FF table-head-pic">
<i v-if="!scope.row.headPic" class="iconfont icon-yewuduanmorentouxian"></i>
<img v-else :src="scope.row.headPic" alt="img" />
</div>
</div>
</el-popover>
<div class="flex flex-column apply-info">
<span>{{ scope.row.applyName || '--' }}</span>
<span class="font-13">{{ scope.row.storeName || '--' }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="详情" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.auditingType != 0 || (scope.row.auditingType == 0 && scope.row.auditingUpdateType != 1)">{{ scope.row.detail }}</span>
<div class="line-hidden-2" v-if="scope.row.auditingUpdateType == 1">
<!-- <span> {{ scope.row.auditingType == 0? '门店信息变更': scope.row.auditingType == 0? '新增成员': '成员离职'}}</span> -->
<span>{{ scope.row.detail }}</span>
<el-button type="text" @click="showStoreChange(scope.row)">查看详情</el-button>
</div>
</template>
</el-table-column>
<el-table-column label="提交时间" show-overflow-tooltip>
<template slot-scope="scope">
<div class="line-h-18">{{ scope.row.createTime | timeStampToYmd }}</div>
<div class="line-h-18">{{ scope.row.createTime | timeStampToHms }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">同意</el-button>
<el-button @click="handleClick(scope.$index, scope.row, 'refuse')" type="text" size="small">拒绝</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 门店变更 -->
<storeChange v-model="showStoreDialog" :storeChangeData="storeChangeData"> </storeChange>
<!-- 同意 -->
<el-dialog class="approve-dialog" title="" :visible.sync="approveVisible" width="422px">
<div class="approve-body text-center">
<div><i class="el-icon-success"></i><span class="approve-icon-tip">同意</span></div>
<div class="approve-tip">是否确认同意</div>
</div>
<div slot="footer" class="approve-footer dialog-footer" style="text-align: center;">
<el-button @click="approveVisible = false">取 消</el-button>
<el-button type="primary" @click="sendApprove">确 定</el-button>
</div>
</el-dialog>
<!-- 拒绝 -->
<el-dialog class="refuse-dialog" title="提示" :visible.sync="refuseVisible" :before-close="cancelRefuse" width="422px">
<div>
<div class="refuse-tip">请输入拒绝理由</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<el-form-item label="" prop="refuseReason">
<el-input class="font-14" v-model="ruleForm.refuseReason" type="textarea" placeholder="最多 50 个字" :rows="3"> </el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="approve-footer dialog-footer">
<el-button @click="cancelRefuse('ruleForm')">取 消</el-button>
<el-button type="primary" @click="sendRefuse('ruleForm')">确 定</el-button>
</div>
</el-dialog>
<review-result-detail :tableListData="tableListData" :detailShow="detailShow" @hideDetailDialog="hideDetailDialog"> </review-result-detail>
<review-result :resultText="resultText" :resultShow="resultShow" @showResultDetail="showResultDetail" @hideResultDialog="hideResultDialog"> </review-result>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import storeChange from '@/components/review/store-change.vue';
import reviewResultDetail from '@/components/review/review-result-detail.vue';
import reviewResult from '@/components/review/review-result.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest } from '@/api/api';
export default {
name: 'unreview',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '审核中心',
path: '/unreview'
},
{
name: '待审核',
path: ''
}
],
filterValue: '',
filterBrand: '',
brandOptions: [], // 品牌
filterOptions: [
{
label: '全部事项',
value: ''
},
{
label: '门店信息变更',
value: '0'
},
{
label: '新增成员',
value: '1'
},
{
label: '成员离职',
value: '2'
},
{
label: '转移成员',
value: '3'
}
],
tableData: [
// {
// enterpriseAuditingId: 1,
// auditingType: 0,//审核类型(0:门店信息变更,1:新增成员,2:成员离职)
// detail: '',
// relationId: 112,
// applyId: '12223233',
// applyName: '测试',
// headPic: '',
// storeName: '测试门店',
// refuseReason: '111111',
// auditingStatus: 0, //审核状态 (0:待审核 ,1: 已同意,2:已拒绝)
// beforeContent: '',
// afterContent: '',
// createTime: '2018-12-09 14:34:56'
// }
],
multipleSelection: [],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
// 操作
selectId: '',
ruleForm: {
refuseReason: ''
},
rules: {
refuseReason: [
{ required: true, message: '拒绝理由不能为空', trigger: 'change' },
{ min: 1, max: 50, message: '长度在 1 到 50 个字', trigger: 'change' }
]
},
showStoreDialog: false,
storeChangeData: {
beforeContent: [],
afterContent: []
},
approveVisible: false,
refuseVisible: false,
detailShow: false,
resultShow: false,
tableListData: [], //审核详情的数据
resultText: ''
};
},
computed: {},
methods: {
/**
* 关闭详情
*
*/
hideDetailDialog() {
const that = this;
that.detailShow = false;
},
/**
* 关闭结果
*
*/
hideResultDialog() {
const that = this;
that.resultShow = false;
that.getTableList();
},
/**
* 显示详情
*
*/
showResultDetail() {
const that = this;
that.detailShow = true;
},
/**
* 表格---多选
*/
handleSelectionChange(val) {
const that = this;
that.multipleSelection = val;
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getTableList();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getTableList();
},
/**
* 操作
*/
handleClick(index, item, flag) {
const that = this;
that.selectId = item.enterpriseAuditingId;
!!flag ? (that.refuseVisible = true) : (that.approveVisible = true);
},
/**
* 确定同意
*/
sendApprove: _debounce(function() {
const that = this;
that.postApprove(that.selectId);
}, 500),
/**
* 批量同意
*/
approveAll: function() {
const that = this;
let ids = !!that.multipleSelection.length ? that.multipleSelection.map(item => item.enterpriseAuditingId) : '';
if (!ids) {
that.$message({
message: '请至少选择一条审核事项',
type: 'warning'
});
return false;
}
that
.$confirm('是否批量同意?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postAllApprove(ids);
});
},
postApprove(ids) {
const that = this;
let para = {
enterpriseAuditingId: ids
};
postRequest('/haoban-manage-web/audit/approve.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.approveVisible = false;
that.getTableList();
that.$forceUpdate();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
postAllApprove(ids) {
const that = this;
let para = {
enterpriseAuditingIds: ids
};
postRequest('/haoban-manage-web/audit/batch-approve.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
// showMsg.showmsg('操作成功', 'success');
let resultList = resData.result.list;
that.resultText = resData.result.auditResult;
that.tableListData = [];
that.tableData.forEach(ele => {
resultList.forEach(key => {
if (key.enterpriseAuditingId == ele.enterpriseAuditingId) {
ele.auditStatus = key.auditStatus == 1 ? '成功' : '失败';
that.tableListData.push(ele);
}
});
});
that.resultShow = true;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 取消拒绝
*/
cancelRefuse(formName) {
const that = this;
that.refuseVisible = false;
that.$refs['ruleForm'].resetFields();
},
/**
* 确定拒绝
*/
sendRefuse: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.postRefuse();
} else {
return false;
}
});
}, 500),
postRefuse() {
const that = this;
let para = {
enterpriseAuditingId: that.selectId,
refuseReason: that.ruleForm.refuseReason
};
getRequest('/haoban-manage-web/audit/refuse.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.refuseVisible = false;
that.$refs['ruleForm'].resetFields();
that.getTableList();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取头像处显示信息
*/
/* eslint-disable */
showSingleInfo(memberId) {},
/**
* 显示门店变更
*/
showStoreChange(item) {
const that = this;
that.storeChangeData = {
beforeContent: [],
afterContent: []
};
that.showStoreDialog = true;
that.storeChangeData = {
beforeContent: item.beforeContent != '' ? JSON.parse(item.beforeContent) : [],
afterContent: item.afterContent != '' ? JSON.parse(item.afterContent) : []
};
},
/**
* 获取品牌
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/application-brand-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandOptions = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取列表数据
*/
getTableList(val) {
const that = this;
if (val) {
that.currentPage = 1;
}
let para = {
auditingType: that.filterValue,
auditingStatus: '0',
search: '', // 搜索字段
pageNum: that.currentPage, // 当前页
pageSize: that.pageSize, // 一页显示个数
brandId: that.filterBrand // 20190918新增品牌
};
getRequest('/haoban-manage-web/audit/auditing-list.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.tableData = resData.result.list || [];
that.total = resData.result.total;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
this.getTableList();
this.getBrandData();
},
components: {
navCrumb,
storeChange,
reviewResultDetail,
reviewResult
}
};
</script>
<style lang="less" scoped>
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.flex-start {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
}
.bg-82C5FF {
background: #82c5ff;
}
.color-508CEE {
color: #508cee;
}
.color-FF585C {
color: #ff585c;
}
.font-13 {
font-size: 13px;
}
.font-14 {
font-size: 14px;
}
.line-h-18 {
line-height: 18px;
}
.line-hidden-2 {
.flex;
.flex-align-center;
.flex-start;
height: 46px;
overflow: hidden;
span {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
max-height: 46px;
overflow: hidden;
}
}
.w-80 {
width: 80px;
}
.w-130 {
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.w-168 {
display: inline-block;
width: 168px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.common-wrap__page {
margin-top: 24px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
min-height: 500px;
padding: 24px;
.w-280 {
width: 280px;
}
.w-514 {
width: 514px;
}
.m-l-20 {
margin-left: 20px;
}
.m-t-45 {
margin-top: 45px;
}
.v-align-b {
vertical-align: bottom;
}
.reviewed-body-head {
margin-bottom: 22px;
}
.table-head-pic {
width: 35px;
height: 35px;
border-radius: 4px;
i {
font-size: 20px;
color: #e5f3ff;
}
img {
width: 35px;
height: 35px;
border-radius: 3px;
}
}
.apply-info {
margin-left: 15px;
line-height: 18px;
span {
font-size: 14px;
color: #606266;
&.font-13 {
font-size: 13px;
}
}
}
}
}
.apply-info-detail {
/*padding: 18px;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.apply-info-img {
width: 150px;
height: 150px;
border-radius: 12px;
text-align: center;
i {
font-size: 106px;
color: #e5f3ff;
}
img {
width: 150px;
height: 150px;
border-radius: 12px;
}
}
.apply-info-name {
font-size: 16px;
color: #303133;
}
.apply-info-right {
width: 229px;
padding-left: 16px;
font-size: 13px;
color: #606266;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.w-80 {
display: inline-block;
vertical-align: top;
color: #303133;
}
.w-130 {
color: #303133;
}
}
}
.approve-dialog {
.el-icon-success {
display: inline-block;
vertical-align: middle;
font-size: 24px;
color: #67c23a;
}
.approve-icon-tip {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
font-size: 18px;
color: #303133;
}
.approve-tip {
margin-top: 31px;
font-size: 14px;
color: #606266;
}
/deep/.el-dialog__body {
padding-top: 0;
}
/deep/.el-dialog__footer {
border: none;
padding: 18px 20px 22px 20px;
}
}
.refuse-dialog {
.refuse-tip {
margin-bottom: 20px;
font-size: 14px;
color: #606266;
}
/deep/.el-dialog__footer {
border: none;
/*padding: 18px 20px 22px 20px;*/
}
.el-textarea {
/deep/ .el-textarea__inner {
font-size: 14px;
color: #606266;
background-color: rgba(255, 255, 255, 0.1);
resize: none;
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-12-06 15:28:43
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:01:34
-->
<template>
<div class="companyAddress-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ height: $store.state.bgHeight }">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="管理员角色" prop="roleName" class="">
<el-input v-model="ruleForm.roleName" disabled placeholder="" class="w-380"></el-input>
</el-form-item>
<!-- <el-form-item :label="ruleForm.userId ? '' : '选择人员'" prop="name" class=""> -->
<div class="el-form-item el-form-item--large">
<label for="name" class="el-form-item__label" style="width: 100px; cursor: pointer;">
<el-tooltip class="item" effect="dark" content="仅限选择行政架构人员" placement="top-start">
<span>选择人员<span class="el-icon-info font-12 color-909399"></span> </span
></el-tooltip>
</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="flex w-380 flex-wrap">
<template v-for="(item, index) in ruleForm.peopleList">
<div class="people-cell flex flex-align-center flex-pack-center flex-column" :key="index + item.name">
<div :class="['inline-block', 'img-wrap', 'flex', 'flex-align-center', 'flex-pack-center', !item.headPic ? 'img-wrap-bg' : '']">
<img v-if="item.headPic" :src="item.headPic" alt="headPic" />
<i v-else class="iconfont icon-yewuduanmorentouxian"></i>
<i class="el-icon-circle-close" v-if="!ruleForm.userId" @click.stop="delField(index, item, ruleForm.peopleList)"></i>
</div>
<p>{{ item.name }}</p>
</div>
</template>
<div class="people-cell" v-if="!ruleForm.userId">
<span class="add-icon" @click.stop="showDialogLayer('people', ruleForm.peopleList)"><i class="el-icon-plus"></i></span>
</div>
</div>
</div>
</div>
<el-form-item label="选择管理范围" prop="name" class="m-b-0"> </el-form-item>
<el-form-item label="行政架构" prop="name" class="m-b-0 m-t-10">
<div class="flex w-380 flex-column item-cell-select">
<div class="depart-item-wrap">
<div class="el-select el-select--large depart-item-content" @click="showDialogLayer('depart', ruleForm.departList)">
<div class="el-select__tags" style="max-width: 181px;">
<span>
<template v-for="(item, index) in ruleForm.departList">
<span class="el-tag el-tag--info el-tag--small" :key="index">
<span class="el-select__tags-text">{{ item.name }}</span
><i class="el-tag__close el-icon-close" @click.stop="delDepart(index, ruleForm.departList)"></i>
</span>
</template>
</span>
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item label="门店架构" prop="name" class="m-t-22">
<div class="flex w-380 flex-column item-cell-select">
<div class="store-item-wrap" v-if="ruleForm.roleCode == 'admin'">
<el-select v-model="ruleForm.brandValue" multiple placeholder="请选择" style="width:213px">
<el-option v-for="item in ruleForm.brandOptions" :key="item.groupId" :label="item.name" :value="item.groupId"> </el-option>
</el-select>
</div>
<!-- 子管理员添加门店 -->
<div class="depart-item-wrap" v-if="ruleForm.roleCode == 'child_admin'">
<div style="width:213px" class="el-select el-select--large depart-item-content" @click="showDialogLayer('store', ruleForm.brandValue)">
<div class="el-select__tags" style="max-width: 181px;">
<span>
<template v-for="(item, index) in ruleForm.brandValue">
<span class="el-tag el-tag--info el-tag--small" :key="index">
<span class="el-select__tags-text">{{ item.name || item.storeName }}</span
><i class="el-tag__close el-icon-close" @click.stop="delDepart(index, ruleForm.brandValue)"></i>
</span>
</template>
</span>
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item class="m-t-24">
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<vue-select-employee :defaultSelection="defaultSelection" :onlyPerson="onlyPerson" :treeSet="treeSet" :changed="changed" @handleSelectedList="handleSelectedList"> </vue-select-employee>
<vue-select-store ref="storeSelector" :currentBrand="currentBrand" :treeSet="storeTreeSet" :selectType="'group-store'" :defaultList="defaultStoreList" @handleSelectedList="handleSelectedList"> </vue-select-store>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import vueSelectEmployee from '@/components/common/vueSelectEmployee.vue';
import vueSelectStore from 'components/common/vueSelectStore';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'addAdminRole',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: '/setChildAdmin'
},
{
name: '添加成员',
path: ''
}
],
ruleForm: {
brandId: '',
roleId: '',
roleCode: 'admin',
roleName: '企业管理员',
peopleList: [
// {
// id: '1',
// name: '张三',
// headPic: 'http://thirdwx.qlogo.cn/mmopen/j7nX4OeBsXRNyvh6micCywssVEYCaWiaicUZq5Vn2zWktWLAyRvEAH7icQmUhLze8rrQYpM5ptwZ2RL7cX0icyBbiavhYFNTIZhibKu/0'
// }
],
departList: [
// {
// id: '1',
// name: '张三张三',
// },
],
brandValue: [],
brandOptions: [
// {
// name: 'A品牌',
// brandId: '1',
// }
]
},
rules: {},
treeSet: {
isSelectPerson: false, // 控制只能选部门(false)
dialogVisible: false, // 控制显示/隐藏
isSingle: false // 是否单选
},
treeData: {},
defaultSelection: [],
changed: '',
onlyPerson: false, // 控制只能选人(true)
selectType: '',
currentBrand: this.$route.query.brandId, // 品牌的 id
defaultStoreList: [],
storeTreeSet: {
isSelectPerson: false, // 控制只能选部门(false)
dialogVisible: false, // 控制显示/隐藏
isSingle: false // 是否单选
}
};
},
computed: {},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
this.$router.push(route);
},
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
let data = [];
let flag = that.ruleForm.peopleList.length; // && that.ruleForm.brandValue.length; // that.ruleForm.departList.length &&
if (!flag || (!that.ruleForm.brandValue.length && !that.ruleForm.departList.length)) {
that.$message.error({
message: '请完善信息'
});
return;
}
flag = null;
that.ruleForm.departList.forEach(function(item) {
data.push({ groupId: item.groupId });
});
that.ruleForm.brandValue.forEach(function(item) {
// 品牌只有 brandId 无 storeId , 如:['57b303dff06c4e758e26951f5e9c5e97']
// 如果是企业管理员
if (that.ruleForm.roleCode === 'admin') {
data.push({ groupId: item });
} else {
// 如果是子管理员
item.storeId ? data.push({ storeId: item.storeId }) : data.push({ groupId: item.groupId });
}
});
let clerks = that.ruleForm.peopleList.map(item => item.employeeClerkId).join(',');
that.postSave(data, clerks);
} else {
return false;
}
});
}, 500),
/**
* 保存---api
*/
postSave(data, clerks) {
const that = this;
let para = {
data: JSON.stringify(data),
roleId: that.ruleForm.roleId,
brandId: that.ruleForm.brandId,
clerkIds: clerks
};
postRequest('/haoban-manage-web/save-clerk-role', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('添加成功', 'success');
that.changeRoute('/setChildAdmin');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 删除字段
*/
delField(index, item, list) {
const that = this;
that
.$alert('确定要删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
.then(({ value }) => {
list.splice(index, 1);
})
.catch(() => {});
},
/**
* 删除选的部门
*/
delDepart(index, item) {
item.splice(index, 1);
},
/**
* 弹窗显示事件
*/
showDialogLayer(type, selData) {
const that = this;
that.selectType = type;
that.changed = type;
if (type === 'store') {
that.defaultStoreList = selData;
that.storeTreeSet = {
dialogVisible: true,
isSingle: false,
isSelectPerson: true
};
return;
}
that.treeSet = {
dialogVisible: true,
isSingle: false,
isSelectPerson: false
};
if (type === 'people') {
that.onlyPerson = true;
that.treeSet = {
dialogVisible: true,
isSingle: false,
isSelectPerson: true
};
} else {
that.onlyPerson = false;
}
that.defaultSelection = selData;
if (!!that.treeData.hasOwnProperty('treeData')) {
return;
}
},
/**
* 处理已选部门
*/
handleSelectedList(group) {
const that = this;
if (that.selectType === 'people') {
that.ruleForm.peopleList = group;
} else if (that.selectType === 'store') {
that.ruleForm.brandValue = group;
} else {
that.ruleForm.departList = group;
}
},
/**
* 获取品牌--门店架构
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/brand/list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.ruleForm.brandOptions = resData.result;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取用户已有数据
*/
getUserData() {
const that = this;
let para = {
roleId: that.ruleForm.roleId,
userId: that.ruleForm.userId,
brandId: that.ruleForm.brandId
};
postRequest('/haoban-manage-web/find-clerk-role', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result) {
that.ruleForm.peopleList = [resData.result.user];
resData.result.admList.forEach(function(ele, index) {
ele.id = ele.groupId;
ele.label = ele.name;
});
that.ruleForm.departList = resData.result.admList || [];
resData.result.storeList.forEach(function(ele, index) {
ele.id = ele.groupId ? ele.groupId : ele.storeId;
ele.label = ele.name;
});
that.ruleForm.brandValue = that.ruleForm.roleCode === 'admin' ? resData.result.storeList.map(item => item.groupId) : resData.result.storeList || [];
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getBrandData();
that.ruleForm.brandId = that.$route.query.brandId;
if (!!that.$route.query.hasOwnProperty('roleId')) {
that.ruleForm.roleId = that.$route.query.roleId;
}
if (!!that.$route.query.hasOwnProperty('roleCode')) {
that.ruleForm.roleCode = that.$route.query.roleCode;
that.ruleForm.roleName = that.$route.query.roleCode === 'admin' ? '企业管理员' : '子管理员';
}
if (!!that.$route.query.hasOwnProperty('userId')) {
that.ruleForm.userId = that.$route.query.userId;
that.navpath = [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: '/setChildAdmin'
},
{
name: '编辑成员',
path: ''
}
];
that.getUserData();
}
},
components: {
navCrumb,
vueSelectEmployee,
vueSelectStore
}
};
</script>
<style lang="less" scoped>
/* display */
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
h2 {
font-size: 16px;
color: #303133;
}
p {
font-size: 14px;
color: #909399;
}
.m-t-24 {
margin-top: 24px;
}
.m-b-0 {
margin-bottom: 0;
}
.w-380 {
width: 380px;
}
.people-cell {
position: relative;
margin-right: 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.img-wrap {
position: relative;
width: 40px;
height: 40px;
border-radius: 4px;
text-align: center;
&.img-wrap-bg {
background: #82c5ff;
}
}
img {
width: 100%;
max-width: 40px;
max-height: 40px;
border-radius: 4px;
}
.icon-yewuduanmorentouxian {
font-size: 20px;
color: #e5f3ff;
}
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
}
}
.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;
}
}
.add-icon {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
border: 1px dashed #c0ccda;
cursor: pointer;
i {
font-size: 16px;
color: #8c939d;
}
&:hover {
border-color: #409eff;
i {
color: #409eff;
}
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-12-06 15:48:29
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:01:44
-->
<template>
<div class="companyAddress-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ 'min-height': $store.state.bgHeight }">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="角色名称" prop="roleName" class="">
<limitInput :inputWidth="500" :inputValue.sync="ruleForm.roleName" :disflag="!!showFlag" :holder="'请输入角色名称'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="角色说明" prop="remark" class="">
<limitTextarea :inputWidth="500" :inputValue.sync="ruleForm.remark" :holder="'请输入角色说明'" :disInput="!!showFlag" :maxLength="50"> </limitTextarea>
</el-form-item>
<el-form-item label="菜单权限" prop="leftChecked" class="m-t-44">
<div class="w-500 border-1 p-10 border-box el-form-item_menu" :style="{ 'max-height': menuH }">
<el-tree :data="ruleForm.menuTree" show-checkbox default-expand-all node-key="rightId" ref="tree" highlight-current :props="defaultProps"> </el-tree>
<!-- <div class="mask" v-if="!!showFlag"></div> -->
</div>
</el-form-item>
<el-form-item label="应用权限" prop="" class="">
<div class="apps-content">
<ul class="flex flex-row flex-wrap">
<li v-for="(item, index) in appDataList" :key="index" :class="['flex flex-align-center border-box flex', !!item.check ? 'border-active' : '']" @click="selectApp(item)">
<span class="square-item flex flex-align-center flex-pack-center" :style="{ background: item.appBackgroudColor }">
<img :src="item.appIcon" alt="" />
</span>
<span class="color-303133 font-14 p-l-8">{{ item.appName }}</span>
<div class="common-cell_radio" v-if="!!item.check">
<!-- 新增选中 -->
<div class="box-triangle">
<div class="wrap__box__outer">
<i class="el-icon-upload-success el-icon-check"></i>
</div>
</div>
</div>
</li>
</ul>
</div>
</el-form-item>
<el-form-item>
<el-button :disabled="!!showFlag" type="primary" @click="submitForm('ruleForm')">保 存</el-button>
</el-form-item>
</el-form>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'addAdminRole',
data() {
return {
menuH: window.screen.availHeight - 695 + 'px',
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: '/setChildAdmin'
},
{
name: '新增管理员角色',
path: ''
}
],
showFlag: false, // 是否可保存
ruleForm: {
roleId: '',
roleName: '',
remark: '角色说明',
leftChecked: [],
menuTree: [],
left: [
// {
// key: 'index',
// label: '首页'
// },
],
rightChecked: [],
right: [
// {
// key: 'index',
// label: '首页'
// },
],
leftCheckedApp: [],
leftApp: [
// {
// key: 'index',
// label: '首页'
],
rightCheckedApp: [],
rightApp: [
// {
// key: 'index',
// label: '首页'
// },
],
appRightList: []
},
rules: {
roleName: [{ required: true, message: '请填写角色名称', trigger: 'blur' }],
remark: [{ required: true, message: '请填写角色说明', trigger: 'blur' }]
/* leftChecked: [
{ required: true, message: '请选择菜单权限', trigger: 'change' }
], */
},
defaultProps: {
children: 'children',
label: 'rightName'
},
appDataList: [
{
appId: '1', //应用id
appName: '签到', //应用名称
appDesc: '签到', //应用介绍
appBackgroudColor: '#1890ff',
appIcon: 'icon-hangzhengjiagou',
appType: 0, //应用类型 0 企业自用 1 第三方
status: 3, //状态 0删除 1待上架 2 审核 3上架 4 拒绝'
remark: '',
check: false
}
]
};
},
computed: {},
methods: {
/**
* 选择 APP
*/
selectApp(item) {
let that = this;
if (!!that.showFlag) {
return false;
}
item.check = !!item.check ? false : true;
},
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
let concatArray = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
let data = [];
concatArray.forEach(function(ele, index) {
data.push({ rightId: ele });
});
that.ruleForm.appRightList = [];
that.appDataList.forEach(ele => {
if (ele.check == true) {
that.ruleForm.appRightList.push(ele.appId);
}
});
/* if (!that.ruleForm.appRightList.length) {
that.$message.error({
duration: 1000,
message: ' 请选择应用权限'
});
return false;
} */
that.postSave(data);
} else {
return false;
}
});
}, 500),
/**
* 保存---api
*/
postSave(data) {
const that = this;
const para = {
data: JSON.stringify(data),
roleId: that.ruleForm.roleId,
roleName: that.ruleForm.roleName,
remark: that.ruleForm.remark,
brandId: that.ruleForm.brandId,
appRightList: that.ruleForm.appRightList.join(',')
};
postRequest('/haoban-manage-web/save-role', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('操作成功', 'success');
that.$router.push('/setChildAdmin');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取菜单列表
*/
getMenuList() {
const that = this;
const para = {};
postRequest('/haoban-manage-web/menu-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
let result = [];
// 只显示 display == 1 的
resData.result.forEach(function(ele, index) {
!!that.ruleForm.roleId && !!that.showFlag ? (ele.disabled = true) : '';
if (!!ele.display) {
result.push(ele);
}
});
that.ruleForm.menuTree = that.treeData(result);
}
if (!!that.ruleForm.roleId) {
that.getRoleDetail(that.ruleForm.roleId);
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 简单数组-->父子数组对象
*/
treeData(data) {
let tree = data.filter(father => {
//循环所有项
let branchArr = data.filter(child => {
return father.haobanMenuRightId == child.parentRightId; //返回每一项的子级数组
});
if (branchArr.length > 0) {
father.children = branchArr; //如果存在子级,则给父级添加一个children属性,并赋值
}
return father.parentRightId == -1; //返回第一层
});
return tree;
},
/**
* 获取角色详情
*/
getRoleDetail(roleId) {
const that = this;
const para = {
roleId: roleId
};
postRequest('/haoban-manage-web/role-detail', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.ruleForm.roleId = resData.result.role.roleId;
that.ruleForm.roleName = resData.result.role.roleName;
that.ruleForm.roleCode = resData.result.role.roleCode;
that.ruleForm.remark = resData.result.role.remark;
that.ruleForm.appRightList = resData.result.appRightList || [];
if (!!that.ruleForm.right.length) {
let list = that.ruleForm.right.map(item => item.rightId);
let rightChecked = [];
resData.result.menuRightList.forEach(function(ele, index) {
if (list.includes(ele.rightId)) {
rightChecked.push(ele.rightId);
}
});
that.ruleForm.rightChecked = rightChecked;
}
let newList = resData.result.menuRightList;
let ids = [];
newList.forEach(function(ele, index) {
if (!!that.$refs.tree.getNode(ele.rightId).isLeaf) {
ids.push(ele.rightId);
}
});
that.$refs.tree.setCheckedKeys(ids);
// 设置已选
that.appDataList.forEach(ele => {
if (that.ruleForm.appRightList.includes(ele.appId)) {
ele.check = true;
}
});
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 选择
*/
leftChange(value, direction) {
const that = this;
that.ruleForm.leftChecked = value;
let selFlag = value.includes(direction[0]); // true: 选中;false: 未选
value.includes(direction[0]) ? replaceData() : replaceData();
function replaceData() {
that.ruleForm.right = [];
that.ruleForm.left.forEach(function(ele, index) {
// 确定选择哪一个一级菜单,设置右侧数据
if (ele.rightId.includes(direction[0])) {
// 未选择设置 check
if (!selFlag) {
ele.check = false;
} else {
ele.check = true;
}
if (!!ele.children && !!ele.children.length) {
ele.children.forEach(function(el, key) {
that.ruleForm.right.push(el);
});
}
}
});
}
// 设置右侧已选
that.ruleForm.rightChecked = that.ruleForm.right.map(item => {
if (item.check === true) {
return item.rightId;
}
});
},
/**
* 选择
*/
rightChange(value, direction) {
const that = this;
let selFlag = value.includes(direction[0]); // true: 选中;false: 未选
that.ruleForm.rightChecked = value;
that.ruleForm.left.forEach(function(ele, index) {
if (!!ele.children && !!ele.children.length) {
ele.children.forEach(function(el, key) {
// 确定选择哪一个一级菜单,设置右侧数据
if (el.rightId.includes(direction[0])) {
// 未选择设置 check
if (!selFlag) {
el.check = false;
} else {
el.check = true;
}
}
});
}
});
},
/**
* 获取应用列表
*/
getAppList() {
let that = this;
postRequest('/haoban-manage-web/application-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
resData.result.forEach(ele => {
ele.check = false;
});
}
that.appDataList = resData.result || [];
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
if (!!that.$route.query.hasOwnProperty('roleId')) {
that.ruleForm.roleId = that.$route.query.roleId;
that.navpath[3].name = '管理员角色';
if (that.$route.query.type === 'show') {
that.showFlag = true;
}
// that.getRoleDetail(that.ruleForm.roleId)
}
if (!!that.$route.query.hasOwnProperty('brandId')) {
that.ruleForm.brandId = that.$route.query.brandId;
}
Promise.all([that.getAppList()])
.then(function(posts) {
that.getMenuList();
})
.catch(function(error) {
// ...
});
},
components: {
navCrumb,
limitInput,
limitTextarea
}
};
</script>
<style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
h2 {
font-size: 16px;
color: #303133;
}
p {
font-size: 14px;
color: #909399;
}
.m-t-24 {
margin-top: 24px;
}
.w-380 {
width: 380px;
}
.w-500 {
width: 500px;
}
.border-1 {
border: 1px solid #dcdfe6;
}
.p-10 {
padding: 10px;
}
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.el-form-item_menu {
position: relative;
border-radius: 2px;
max-height: 516px;
overflow-x: hidden;
overflow-y: auto;
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(176, 176, 176, 0.5);
z-index: 1;
}
}
.apps-content {
li {
position: relative;
width: 235px;
height: 44px;
padding-left: 24px;
background: #fff;
border: 1px solid #dcdfe6;
border-radius: 6px;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
&.border-active {
border-color: #1890ff;
}
.common-cell_radio {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
.box-triangle {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.wrap__box__outer {
position: absolute;
right: -16px;
bottom: -6px;
width: 40px;
height: 20px;
background: #1890ff;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
i {
position: absolute;
top: 1px;
left: 15px;
font-size: 12px;
color: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
}
.square-item {
width: 25px;
height: 25px;
border-radius: 8px;
img {
max-width: 25px;
max-height: 25px;
}
i {
font-size: 14px;
color: #fff;
}
}
}
}
.el-transfer {
display: inline-block;
vertical-align: top;
/deep/ .el-transfer-panel:last-child {
display: none;
}
/deep/ .el-transfer__buttons {
padding: 0 5px;
.el-button {
display: none;
}
}
&.el-transfer-check {
/deep/ .el-transfer-panel__item {
&:hover {
background: #f5f7fa;
}
&:active {
background: #f5f7fa;
}
}
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 16:47:28
* @LastEditors: 无尘
* @LastEditTime: 2019-11-18 09:32:40
-->
<template>
<div class="companyAddress-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ height: $store.state.bgHeight }">
<h2 class="font-w-500">企业地址设置</h2>
<p class="m-t-24">暂时无法设置</p>
<!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="企业地址" prop="switch" class="m-t-22">开启后手机端通讯录将显示,反之则不显示
<el-switch v-model="ruleForm.switch"></el-switch>
</el-form-item>
<el-form-item label=" " prop="name" class="" v-if="ruleForm.switch">
<el-input v-model="ruleForm.name" placeholder="请输入地址" class="w-380"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
</el-form-item>
</el-form> -->
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
// import showMsg from '@/common/js/showmsg';
// import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
// import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: 'companyAddress',
data() {
const nameValid = (rule, value, callback) => {
if (!!this.ruleForm.switch && value.replace(/\s/g) == '') {
callback(new Error('请输入地址'));
} else {
callback();
}
};
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '企业设置',
path: '/companyAddress'
},
{
name: '企业地址',
path: ''
}
],
ruleForm: {
switch: false,
name: ''
},
rules: {
name: [
{ validator: nameValid, trigger: 'blur' } //required: true,
]
}
};
},
computed: {},
methods: {
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
/* eslint-disable */
if (valid) {
} else {
return false;
}
});
}, 500),
/**
* 保存---api
*/
postSave() {
const that = this;
that.ruleForm = [];
}
},
// mounted() {},
components: {
navCrumb
}
};
</script>
<style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
h2 {
font-size: 16px;
color: #303133;
}
p {
font-size: 14px;
color: #909399;
}
.m-t-24 {
margin-top: 24px;
}
.w-380 {
width: 380px;
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 16:48:26
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:02:09
-->
<template>
<div class="companyCertify-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="企业名称" prop="enterpriseName" class="">
<limitInput :inputWidth="495" :inputValue.sync="ruleForm.enterpriseName" :holder="'请输入企业名称'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="所在地区" prop="region" class="city-area">
<vue-office-area :projectName="projectName" :postUrl="postUrl" :areaOptions="areaOptions" @selected="selected"></vue-office-area>
</el-form-item>
<el-form-item label="详细地址" prop="detailAddress" class="">
<limitInput :inputWidth="495" :inputValue.sync="ruleForm.detailAddress" :holder="'请输入详细地址'" :maxLength="40"> </limitInput>
</el-form-item>
<el-form-item label="营业执照注册号" prop="businessLicenseNum" class="">
<limitInput :inputWidth="495" :inputValue.sync="ruleForm.businessLicenseNum" :holder="'请输入营业执照注册号'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="证件类型" prop="cardType" class="">
<div>
<el-radio v-model="ruleForm.cardType" label="0">多证合一营业执照(原“注册号”字样,调整为18位的“统一社会信用代码”)</el-radio>
</div>
<div>
<el-radio v-model="ruleForm.cardType" label="1">普通营业执照(仍然标识为15位的“注册号”)</el-radio>
</div>
</el-form-item>
<el-form-item label="营业执照" prop="businessLicenseUrl" class="">
<single-upload :imgSrc.sync="ruleForm.businessLicenseUrl" :uploadLimit="8" :field="'businessCard'"> </single-upload>
</el-form-item>
<el-form-item label="手持证件照片" prop="cardUrl" class="">
<single-upload :imgSrc.sync="ruleForm.cardUrl" :field="'cardUrl'"> </single-upload>
</el-form-item>
<el-form-item label="授权书" prop="authUrl" class="">
<single-upload :imgSrc.sync="ruleForm.authUrl" :field="'authUrl'"> </single-upload>
</el-form-item>
<el-form-item label="状态" prop="status" class="status-item" v-if="ruleForm.authenticationStatus != 0">
<el-tag v-if="ruleForm.authenticationStatus == 1"><i class="el-icon-loading"></i>审核中</el-tag>
<el-tag type="success" v-if="ruleForm.authenticationStatus == 2"><i class="el-icon-success"></i>审核成功</el-tag>
<el-tag type="danger" v-if="ruleForm.authenticationStatus == 3"><i class="el-icon-error"></i>审核失败</el-tag><span class="color-606266 error-text" v-if="ruleForm.authenticationStatus == 3">{{ ruleForm.refuseReason }}</span>
</el-form-item>
<el-form-item>
<el-button :disabled="ruleForm.authenticationStatus == 0 || ruleForm.authenticationStatus == 3 ? false : true" type="primary" @click="submitForm('ruleForm')"> 保 存 </el-button
><el-button :disabled="ruleForm.authenticationStatus == 0 || ruleForm.authenticationStatus == 3 ? false : true" type="primary" @click="submitReview('ruleForm')">
提交审核
</el-button>
</el-form-item>
</el-form>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import limitInput from '@/components/limit-input.vue';
import singleUpload from '@/components/single-upload.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest, postJson } from '@/api/api';
export default {
name: 'companyCertify',
data() {
return {
projectName: 'haoban-manage-web', // 当前项目名
postUrl: '/haoban-manage-web/dict-district-list', // 地区选择请求 url 参数
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '企业设置',
path: '/companyAddress'
},
{
name: '企业认证',
path: ''
}
],
ruleForm: {
enterpriseName: '',
region: '',
detailAddress: '',
businessLicenseNum: '',
cardType: '0', // 证件类型(0:多证合一营业执照,1:普通营业执照)
businessLicenseUrl: '',
cardUrl: '',
authUrl: '',
authenticationStatus: 0,
refuseReason: ''
},
rules: {
enterpriseName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
businessLicenseNum: [{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }],
region: [{ required: true, message: '请选择地区', trigger: 'blur' }],
cardType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
businessLicenseUrl: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
cardUrl: [{ required: true, message: '请上传照片', trigger: 'blur' }],
authUrl: [{ required: true, message: '请上传授权书', trigger: 'blur' }]
},
// 省市县
areaOptions: {
provinceName: '',
provinceId: '',
cityName: '',
cityId: '',
countryName: '',
countyId: ''
},
baseUrl: ''
};
},
computed: {},
beforeMount() {
const that = this;
let host = window.location.origin;
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://www.gicdev.com';
} else {
that.baseUrl = host;
}
},
methods: {
/**
* 省市县选择
*/
selected(val) {
const that = this;
if (!!val.country) {
that.ruleForm.region = val;
that.ruleForm.areaId = val.areaIdl;
} else {
that.ruleForm.region = '';
}
},
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
let data = JSON.parse(JSON.stringify(that.ruleForm));
that.postSave(data, true);
} else {
return false;
}
});
}, 500),
/**
* 保存---api
*/
postSave(data, saveOnly) {
const that = this;
let para = {
enterpriseName: data.enterpriseName,
enterpriseCode: data.enterpriseCode,
provinceId: data.region.province,
cityId: data.region.city,
areaId: data.region.areaId,
detailAddress: data.detailAddress,
cardType: data.cardType,
cardUrl: data.cardUrl,
businessLicenseUrl: data.businessLicenseUrl,
businessLicenseNum: data.businessLicenseNum,
authUrl: data.authUrl,
saveOnly: saveOnly
};
postJson('/haoban-manage-web/enterprise-authentication/update-authentication', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
saveOnly === false ? that.getCompanyInfo() : '';
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 审核提交
*/
submitReview: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
let data = JSON.parse(JSON.stringify(that.ruleForm));
that.postSave(data, false);
} else {
return false;
}
});
}, 500),
/**
* 审核---api
*/
/* eslint-disable */
postReview() {},
/**
* 查询企业认证信息
*/
getCompanyInfo() {
const that = this;
postRequest('/haoban-manage-web/enterprise-authentication/find-detail', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
for (let k of Object.keys(resData.result)) {
if (resData.result[k] == null || resData.result[k] == 'null') {
resData.result[k] = '';
}
}
let newObj = {
provinceName: resData.result.provinceName,
provinceId: resData.result.provinceId,
cityName: resData.result.cityName,
cityId: resData.result.cityId,
countryName: resData.result.areaName,
countyId: resData.result.areaId
};
that.areaOptions = newObj;
resData.result.region = newObj;
resData.result.cardType = String(resData.result.cardType);
that.ruleForm = Object.assign(that.ruleForm, resData.result);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getCompanyInfo();
},
components: {
navCrumb,
limitInput,
singleUpload
}
};
</script>
<style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
.m-t-24 {
margin-top: 24px;
}
.w-500 {
width: 500px;
}
.status-item {
.el-tag {
line-height: 34px;
}
i {
font-size: 16px;
margin-right: 10px;
}
}
.avatar-uploader {
/deep/ .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 180px;
height: 180px;
line-height: 180px;
text-align: center;
}
.avatar {
width: 180px;
height: 180px;
display: block;
}
.upload-tip {
color: #606266;
font-size: 12px;
line-height: 22px;
}
.color-606266 {
color: #606266;
}
.error-text {
display: inline-block;
vertical-align: middle;
width: 200px;
padding-left: 10px;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-08-01 14:42:38
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:02:30
-->
<template>
<div class="storePermission-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<div class="">
<div class="check-box-wrap inline-block vertical-top">
<el-checkbox v-model="contactHideFlag">隐藏通讯录模块</el-checkbox>
</div>
<div class="tip-text-wrap w-440 inline-block vertical-top">注:隐藏后,APP将不展示通讯录,通讯录仍可用,但无法进行通讯录及门店管理,以及添加员工操作。所有通讯录内容仅可在PC管理后台进行操作和管理。</div>
</div>
<div>
<el-button type="primary" @click="saveSet">保 存</el-button>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'contactPermission',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '通讯录信息',
path: '/staffDetails'
},
{
name: '通讯录控制',
path: ''
}
],
contactHideFlag: false
};
},
methods: {
saveSet: _debounce(function() {
const that = this;
let para = {
contactHideFlag: that.contactHideFlag ? '1' : '0'
};
postRequest('/haoban-manage-web/contact/save-contact-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}, 300),
/**
* 获取设置数据
*/
getSetData() {
const that = this;
let para = {};
postRequest('/haoban-manage-web/contact/find-contact-setting', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.contactHideFlag = resData.result.contactHideFlag == 1 ? true : false;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getSetData();
},
components: {
navCrumb
}
};
</script>
<style lang="less" scoped>
.bg-fff {
background: #fff;
}
.common-set-wrap {
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
/*background: #fff;*/
/*padding: 24px;*/
min-height: 500px;
.m-t-24 {
margin-top: 24px;
}
.w-440 {
width: 440px;
white-space: pre-wrap;
word-break: break-all;
font-size: 12px;
color: #909399;
}
.tip-text-wrap {
line-height: 24px;
padding-left: 20px;
}
.vertical-top {
vertical-align: top;
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 14:44:45
* @LastEditors: 无尘
* @LastEditTime: 2018-10-10 14:44:45
-->
<template>
<div class="setting-wrap">
<!-- 公共头部菜单插件 -->
<vue-office-header :projectName="projectName" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
<div class="setting-wrap__body">
<div id="content" class="content">
<div class="content-body" :style="{ height: contentHeight }">
<div class="left-menu" :style="{ height: contentHeight }">
<vue-office-aside ref="asideMenu" :projectName="projectName" :collapseFlag="collapseFlag"> </vue-office-aside>
</div>
<transition name="fade" mode="out-in">
<!-- 缓存已经填好内容的页面 -->
<!-- <keep-alive include="editGroupGrade"> -->
<router-view></router-view>
<!-- </keep-alive > -->
</transition>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'setting',
data() {
return {
projectName: 'haoban-manage-web',
contentHeight: '0px', //页面内容高度
collapseFlag: false // 折叠参数
};
},
computed: {},
methods: {
// 处理路由跳转
toRouterView(val) {
let that = this;
// 模拟检查数据
// //有两个参数
//{
// name:,
// path:
//}
that.$router.push({
path: val.path
});
},
// 折叠事件
collapseTag(val) {
const that = this;
that.collapseFlag = val;
}
},
watch: {
$route: {
handler: function(val, oldVal) {
// console.log("获取当前路由:",val,oldVal);
this.$refs.asideMenu.refreshRoute();
},
// 深度观察监听
deep: true
}
},
mounted() {
const that = this;
//获取项目名 pathname (路由的hash)
that.pathName = window.location.hash.split('/')[1];
that.contentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
}
};
</script>
<style lang="less">
.setting-wrap {
background-color: #f0f2f5;
}
.setting-wrap__body {
.content {
padding-top: 64px;
/* height: calc(100% - 64px);
overflow-y: auto;*/
min-width: 1400px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.content-body {
display: flex;
overflow: hidden;
.common-set-wrap {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
}
}
&.setChildAdmin-wrap {
.right-content {
.right-box {
background: transparent;
padding: 0;
}
}
}
}
}
}
}
/*.content-body .left-menu {
-ms-flex: 0 0 200px;
flex: 0 0 200px;
width: 200px;
height: 100%;
background: #020b21;
transition: all .2s ease;
position: fixed;
z-index: 5;
}*/
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 16:56:18
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:02:43
-->
<template>
<div class="replaceAdmin-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ height: $store.state.bgHeight }">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="获取验证码"></el-step>
<el-step title="绑定新的超级管理员"></el-step>
<el-step title="完成"></el-step>
</el-steps>
<div class="w-514 replaceAdmin-wrap-form m-t-45">
<el-form v-if="active == 0" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
<el-form-item label="当前绑定账号" prop="name" class="">
<el-input v-model="ruleForm.name" disabled placeholder="" class="w-280"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone" class="">
<!-- <el-input v-model="ruleForm.phone" disabled placeholder="" class="w-280"></el-input><el-button class="m-l-20 v-align-b" type="primary" plain :disabled="disableBtn" @click="sendCode(ruleForm.phone)">{{ !disableBtn && !!countNum ? '获取验证码' : countNum + 's' }} </el-button> -->
<countryMobile :inputWidth="280" :nationCode.sync="ruleForm.nationcode" v-model="ruleForm.phone" :holder="''" disflag="true"> </countryMobile><el-button class="m-l-20 v-align-b" type="primary" plain :disabled="disableBtn" @click="sendCode(ruleForm.phone)">{{ (disableBtn && countNum == 60) || (!disableBtn && !!countNum) ? '获取验证码' : countNum + 's' }} </el-button>
</el-form-item>
<el-form-item label="验证码" prop="code" class="">
<el-input v-model="ruleForm.code" placeholder="请输入验证码" class="w-280"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
</el-form-item>
</el-form>
<!-- 新绑定 -->
<el-form v-show="active == 1" :model="newRuleForm" :rules="newRules" ref="newRuleForm" label-width="140px" class="demo-ruleForm">
<el-form-item label="新绑定超级管理员" prop="name" class="">
<div class="master-select w-280" @click="showSelect">
{{ !!newRuleForm.name ? newRuleForm.name : '请选择' }}
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="newFormLoad" @click="newSubmitForm('newRuleForm')">提 交</el-button>
<el-button @click="submitFormBack" plain>上一步</el-button>
</el-form-item>
</el-form>
<!-- 提交成功 -->
<div class="replaceAdmin-wrap-success" v-if="active == 2">
<div class="icon-outer"><i class="el-icon-success"></i></div>
<p class="font-w-500">操作成功</p>
</div>
</div>
</div>
</div>
<vue-select-employee :defaultSelection="defaultSelection" :treeSet="treeSet" :onlyPerson="onlyPerson" :changed="changed" @handleSelectedList="handleSelectedList"> </vue-select-employee>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import vueSelectEmployee from '@/components/common/vueSelectEmployee';
import countryMobile from '@/components/common/country-mobile.vue';
import { _debounce } from '@/common/js/public';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { postRequest } from '@/api/api';
export default {
name: 'replaceAdmin',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '更换超级管理员',
path: ''
}
],
subNavText: '更换超级管理员,需要先验证当前超级管理员身份',
active: 0,
ruleForm: {
name: '',
phone: 1334444444,
code: '',
nationcode: ''
},
rules: {
name: [{ required: true, message: '请输入当前绑定账号', trigger: 'blur' }],
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
},
disableBtn: false, // 发验证码
countNum: 60,
// 新绑定
newFormLoad: false,
newRuleForm: {
name: '',
id: '',
label: '',
type: ''
},
newRules: {
name: [{ required: true, message: '请输入手机号/姓名', trigger: ['blur', 'change'] }]
},
// 行政架构选人
treeSet: {
isSelectPerson: true, // 控制只能选部门(false)
dialogVisible: false, // 控制显示/隐藏
isSingle: true // 是否单选
},
treeData: {},
defaultSelection: [], // 已选数据
onlyPerson: true, // 控制只能选人(true)
changed: ''
};
},
computed: {},
methods: {
/**
* 显示选择控件
*/
showSelect() {
const that = this;
that.treeSet = {
dialogVisible: true,
isSingle: true,
isSelectPerson: true
};
},
/**
* 处理树形控件选择的数据
*/
handleSelectedList(list) {
const that = this;
if (!!list && !!Object.keys(list).length) {
that.defaultSelection = [list];
that.newRuleForm.name = list.name;
that.newRuleForm.id = list.id;
}
},
/**
* 倒计时
*/
countDown() {
const that = this;
let time = setInterval(function() {
if (that.countNum === 0) {
clearInterval(time);
that.countNum = 60;
that.disableBtn = false;
return false;
}
that.countNum--;
}, 1000);
},
/**
* 发验证码
*/
sendCode: _debounce(function(phone) {
let that = this;
that.disableBtn = true;
that.postSendCode(phone);
}, 500),
/**
* 发验证码---api
*/
/* eslint-disable */
postSendCode(phone) {
let that = this;
postRequest('/haoban-manage-web/enterprise-setting/send-admin-valid-code', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.countDown();
let handle = String(phone).substr(0, 3) + '****' + phone.substr(7, phone.length-1);
that.$message({
message: `验证码已发送到您的手机:+${that.ruleForm.nationcode}${handle}`,
type: 'success'
});
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 下一步
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.checkSendCode();
} else {
return false;
}
});
}, 500),
/**
* 检查验证码
*/
checkSendCode() {
let that = this;
let para = {
code: that.ruleForm.code,
};
postRequest('/haoban-manage-web/enterprise-setting/check-admin-valid-code', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (that.active++ > 2) {
that.active == 2;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 新绑定---提交
*/
newSubmitForm: _debounce(function(formName) {
const that = this;
that.newRuleForm.name = that.newRuleForm.name.replace(/(^\s+)|(\s+$)/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.postReplace();
} else {
return false;
}
});
}, 500),
/**
* 新绑定---提交 API
*/
postReplace() {
let that = this;
let para = {
adminClerkId: that.newRuleForm.id,
};
postRequest('/haoban-manage-web/enterprise-setting/change-admin', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.active++;
showMsg.showmsg('保存成功,请重新登录!', 'success');
that.loginOut();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 新绑定---上一步
*/
submitFormBack() {
const that = this;
that.$refs['newRuleForm'].resetFields();
!!that.active ? that.active-- : '';
},
/**
* 退出登录
*
*/
loginOut() {
let that = this;
postRequest('/haoban-manage-web/logout',{})
.then((res) => {
let resData = res.data;
if (resData.errorCode == 1) {
// 跳转登录页
window.location.href = window.location.origin + '/haoban-web/#/login';
return;
}
errMsg.errorMsg(resData);
})
.catch(function (error) {
that.$message.error({
duration: 1000,
message: error.message
})
});
},
/**
* 获取当前用户信息
*/
getCurrentUser() {
const that = this;
const userData = JSON.parse(localStorage.getItem('userInfo'));
postRequest('/haoban-manage-web/enterprise/find-super-manager', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.ruleForm.name = resData.result.name;
that.ruleForm.phone = resData.result.phoneNumber;
that.ruleForm.nationcode = resData.result.nationcode;
if (userData.phoneNumber != resData.result.phoneNumber) {
that.disableBtn = true;
}else {
that.disableBtn = false;
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getCurrentUser();
},
components: {
navCrumb,
vueSelectEmployee,
countryMobile
}
};
</script>
<style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
min-height: 500px;
padding: 24px;
.w-280 {
width: 280px;
}
.w-514 {
width: 514px;
}
.m-l-20 {
margin-left: 20px;
}
.m-t-45 {
margin-top: 45px;
}
.v-align-b {
vertical-align: bottom;
}
.text-center {
text-align: center;
}
.replaceAdmin-wrap-form {
margin: 45px auto 0;
}
.master-select {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 32px;
line-height: 32px;
outline: none;
padding: 0 12px;
width: 100%;
cursor: pointer;
}
.replaceAdmin-wrap-success {
text-align: center;
i {
font-size: 50px;
color: #67c23a;
}
p {
margin-top: 24px;
font-size: 20px;
color: #303133;
}
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 16:57:22
* @LastEditors: 无尘
* @LastEditTime: 2018-10-10 16:57:22
-->
<template>
<div class="setChildAdmin-wrap common-set-wrap" :style="{ height: windowH }">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<div class="setChildAdmin-wrap-body flex">
<div class="setChildAdmin-wrap-left w-260" :style="{ height: boxHeight }">
<div class="m-t-20" v-for="(pItem, pIndex) in roleListData" :key="pIndex">
<div class="role-cell-head flex">
<div class="flex-1 max-half role-cell-head_name">{{ pItem.brandName }}</div>
<div class="text-right flex-1 " v-if="!!pItem.canAddRole">
<el-button size="mini" @click="changeRoute('/addAdminRole?brandId=' + pItem.brandId)">新增角色</el-button>
</div>
</div>
<ul>
<li v-for="(item, index) in pItem.roleList" :key="index" :class="['role-cell border-bottom-1', pItem.brandId == activeBrandId && item.roleId == activeId ? 'role-active' : '']" @click.stop="selectRole(item, pItem.brandId)">
<i class="iconfont icon-lizhi p-r-6"></i>
{{ item.roleName }}
</li>
</ul>
</div>
</div>
<div class="setChildAdmin-wrap-right box-sizing">
<div class="role-title flex flex-between m-b-25">
<span class="font-20 color-303133"> {{ roleRightObj.roleName }} </span><span class="font-14 color-1890ff pinter" v-if="roleRightObj.roleCode != 'child_admin'" @click="toRoleDetail('show')"> 查看权限 </span
><span v-if="roleRightObj.roleCode == 'child_admin'">
<span class="font-14 color-1890ff pinter p-r-6" @click="toDelRole" v-if="!tableData.length"> 删除角色 </span
><span class="font-14 color-1890ff pinter" @click="toRoleDetail('edit')">
编辑权限
</span>
</span>
</div>
<div class="role-tip " v-if="roleRightObj.roleCode === 'master_admin' || roleRightObj.roleCode === 'admin'">
<el-alert :title="roleRightObj.roleCode === 'master_admin' ? '企业的创建者,拥有企业的所有权限,只会有一个' : roleRightObj.roleCode === 'admin' ? '企业管理员,拥有企业的所有权限,不能创建企业管理员,可以有多个' : ''" type="info" :closable="false" show-icon> </el-alert>
</div>
<div class="role-add m-t-27" v-if="!!roleRightObj.isEdit">
<el-button type="primary" @click="toAddRole(roleRightObj.roleCode)">添加成员</el-button>
</div>
<div :class="['role-table', !!roleRightObj.isEdit ? '' : 'm-t-27']">
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="clerkName" label="姓名"> </el-table-column>
<el-table-column label="手机号">
<template slot-scope="scope">
{{ scope.row.nationcode == '86' ? scope.row.clerkPhone : '+' + scope.row.nationcode + '-' + scope.row.clerkPhone }}
</template>
</el-table-column>
<el-table-column prop="groupName" label="部门"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope" v-if="scope.row.canEdit == 1">
<el-button @click="handleShow(scope.$index, scope.row, roleRightObj.roleCode)" type="text" size="small">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="block common-wrap__page text-right" v-if="tableData.length != 0">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
</div>
</div>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { postRequest } from '@/api/api';
export default {
name: 'setChildAdmin',
data() {
return {
windowH: window.screen.availHeight - 180 - 15 + 'px',
tableH: window.screen.availHeight - 440 - 180,
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: ''
}
],
boxHeight: window.screen.availHeight - 20 + 'px',
isAddAdmin: '', // 是否有添加管理员权限
activeId: '', // 当前选择的管理员 id
activeBrandId: '', // 当前选择的管理员对应的品牌 id
roleListData: [
// {
// brandId: '1',
// brandName: '集团',
// roleList: [
// {
// roleId: '1',
// roleName: '超级管理员'
// },
// {
// roleId: '2',
// roleName: '企业管理员'
// }
// ],
// }
],
roleRightObj: {
roleName: '超级管理员',
tip: '企业的创建者,拥有企业的所有权限,只会有一个',
roleCode: '',
isEdit: 0
},
// 角色表格数据
tableData: [
// {
// userId: 1,
// clerkName: '张三',
// clerkPhone: '13333333333',
// groupName: '技术部'
// }
],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0
};
},
computed: {},
methods: {
/**
* 路由跳转
*/
changeRoute(path) {
this.$router.push(path);
},
/**
* role 详情
*/
toRoleDetail(type) {
const that = this;
that.changeRoute(`/addAdminRole?roleId=${that.activeId}&type=${type}&brandId=${that.activeBrandId}`);
},
/**
* 删除 role
*/
toDelRole() {
const that = this;
that
.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.postToDelRole();
})
.catch(() => {});
},
postToDelRole() {
const that = this;
let para = {
roleId: that.activeId,
brandId: that.activeBrandId
};
postRequest('/haoban-manage-web/del-role', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
that.getRoles();
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 选择 role
*/
selectRole(item, brandId) {
const that = this;
that.activeId = item.roleId;
that.activeBrandId = brandId;
that.roleRightObj = item;
that.getRoleUsers();
},
/**
* 添加成员
*/
toAddRole(roleCode) {
const that = this;
that.changeRoute(`/addAdmin?roleId=${that.activeId}&roleCode=${roleCode}&brandId=${that.activeBrandId}`);
},
/**
* 删除成员
*/
handleDel(index, item) {
const that = this;
that
.$alert('确定要删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
.then(({ value }) => {
that.postDelUser(item.userId, index);
})
.catch(() => {});
},
postDelUser(userId, index) {
const that = this;
let para = {
roleId: that.activeId,
userId: userId,
brandId: that.activeBrandId
};
postRequest('/haoban-manage-web/del-role-user', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
that.tableData.splice(index, 1);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
handleShow(index, item, roleCode) {
const that = this;
that.changeRoute(`/addAdmin?roleId=${that.activeId}&roleCode=${roleCode}&userId=${item.userId}&brandId=${that.activeBrandId}`);
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
const that = this;
that.pageSize = val;
that.getRoleUsers();
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
const that = this;
that.currentPage = val;
that.getRoleUsers();
},
/**
* 获取角色用户数据
*/
getRoleUsers() {
const that = this;
let para = {
roleId: that.activeId,
brandId: that.activeBrandId,
pageSize: that.pageSize,
pageNum: that.currentPage
};
postRequest('/haoban-manage-web/role-user-list', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!resData.result || !resData.result.result) {
that.tableData = [];
return false;
}
that.tableData = resData.result.result;
that.total = resData.result.totalCount;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取角色数据
*/
getRoles() {
const that = this;
postRequest('/haoban-manage-web/role-list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.isAddAdmin = resData.result.isAddAdmin;
that.roleListData = resData.result.roleList || [];
if (!!resData.result && !!resData.result.roleList.length) {
that.activeId = that.roleListData[0].roleList[0].roleId;
that.activeBrandId = that.roleListData[0].brandId;
that.roleRightObj = that.roleListData[0].roleList[0];
that.getRoleUsers();
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.boxHeight = window.screen.availHeight - 430 + 'px';
that.getRoles();
},
components: {
navCrumb
}
};
</script>
<style lang="less" scoped>
/* display */
.inline-block {
display: inline-block;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.pinter {
cursor: pointer;
}
.text-right {
text-align: right;
}
/* flex */
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-column {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-between {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.font-14 {
font-size: 14px;
}
.font-20 {
font-size: 20px;
}
.color-303133 {
color: #303133;
}
.color-1890ff {
color: #1890ff;
}
.text-center {
text-align: center;
}
.w-260 {
width: 260px;
}
.p-r-6 {
padding-right: 6px;
}
.m-t-20 {
margin-top: 20px;
}
.m-b-25 {
margin-bottom: 25px;
}
.m-t-27 {
margin-top: 27px;
}
.common-wrap__page {
margin-top: 24px;
}
.common-set-wrap {
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
/*background: #fff;*/
/*padding: 24px;*/
/*min-height: 500px;*/
.setChildAdmin-wrap {
/* &-body {
} */
&-left {
min-width: 260px;
height: 100%;
padding: 20px 0 0 0;
background: #eef1f8;
overflow-x: hidden;
overflow-y: auto;
.role-cell-head {
height: 36px;
line-height: 36px;
padding: 0 20px;
font-size: 14px;
color: #606266;
.max-half {
max-width: 50%;
min-width: 50%;
width: 50%;
overflow: hidden;
}
}
.role-cell {
position: relative;
width: 220px;
height: 36px;
line-height: 36px;
padding: 0 20px;
font-size: 14px;
color: #606266;
background: #fff;
cursor: pointer;
overflow: hidden;
i {
color: #1890ff;
}
&:hover {
color: #fff;
background: #1890ff;
i {
color: #fff;
}
}
&.role-active {
color: #fff;
background: #1890ff;
i {
color: #fff;
}
}
}
}
&-right {
width: calc(100% - 260px);
padding: 24px;
background: #fff;
.role-tip {
.el-alert {
background-color: rgba(64, 158, 255, 0.1);
border: 1px solid rgba(64, 158, 255, 0.2);
color: #606266;
font-size: 13px;
/deep/ i {
font-size: 16px;
color: #1890ff;
}
}
}
.role-add {
background: #ebeef5;
padding: 8px 0 8px 15px;
}
}
}
}
}
}
.el-table {
min-height: 360px;
/deep/.el-table__empty-block {
height: 256px;
}
/deep/.el-table__empty-text {
width: auto;
margin-bottom: 80px;
&::before {
content: ' ';
display: block;
width: 60px;
height: 60px;
background: url(../../assets/no-data_icon.png) no-repeat center;
margin: 0px auto 22px auto;
}
}
/deep/.el-table__empty-text {
margin-bottom: 0;
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 16:55:06
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:02:54
-->
<template>
<div class="staffDetails-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" :style="{ height: $store.state.bgHeight, 'overflow-y': 'auto' }">
<div class="staffDetails-cell">
<h2 class="m-b-25 font-w-500">{{ adminStruct.name }}</h2>
<div class="staffDetails-cell-fixed">
<template v-for="(item, index) in adminStruct.fixedList">
<el-button disabled class="staffDetails-cell-btn" :key="'btn1' + index">{{ item.fieldName }}</el-button>
</template>
</div>
<div class="staffDetails-cell-add font-0">
<template v-for="(item, index) in adminStruct.defineList">
<el-tag class="staffDetails-cell-btn" :key="'tag1' + index">{{ item.fieldName }} <i class="el-icon-circle-close" @click.stop="delField(index, item, adminStruct.defineList, 1)"></i></el-tag>
</template>
<el-button class="el-tag m-l-8 staffDetails-cell-btn" @click.stop="showDialogLayer(1)"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
</div>
<div class="staffDetails-cell">
<h2 class="m-b-25 font-w-500">{{ storeStruct.name }}</h2>
<div class="staffDetails-cell-fixed">
<template v-for="(item, index) in storeStruct.fixedList">
<el-button disabled class="staffDetails-cell-btn" :key="'btn' + index">{{ item.fieldName }}</el-button>
</template>
</div>
<div class="staffDetails-cell-add font-0">
<template v-for="(item, index) in storeStruct.defineList">
<el-tag class="staffDetails-cell-btn" :key="'tag' + index">{{ item.fieldName }} <i class="el-icon-circle-close" @click.stop="delField(index, item, storeStruct.defineList, 2)"></i></el-tag>
</template>
<el-button class="el-tag m-l-8 staffDetails-cell-btn" @click.stop="showDialogLayer(2)"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
<!-- 自定义字段 -->
<staff-detail-field :detailData="detailData" :showCustomDialog="showCustomDialog" :dataType="dataType" @customHandleConfirm="customHandleConfirm"> </staff-detail-field>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import staffDetailField from '@/components/set/staff-detail-field.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { postRequest } from '@/api/api';
export default {
name: 'staffDetails',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '通讯录信息',
path: '/staffDetails'
},
{
name: '员工详细字段',
path: ''
}
],
// 固定的字段
fixData: ['clerkName', 'clerkPhone', 'groupName', 'positionName'],
fixDataStore: ['clerkName', 'clerkPhone', 'groupName', 'positionName', 'clerkCode'],
// 行政架构
adminStruct: {
name: '行政架构通讯录员工详情字段',
fixedList: [
/*{
fieldName: "姓名",
fields: "clerkName"
}*/
],
defineList: [
/* {
fieldName: "姓名",
fields: "clerkName"
},*/
]
},
// 门店架构'
storeStruct: {
name: '门店架构通讯录员工详情字段',
fixedList: [
/* {
fieldName: "姓名",
fields: "clerkName"
},*/
],
defineList: [
/* {
fieldName: "姓名",
fields: "clerkName"
}*/
]
},
showCustomDialog: false, // 自定义弹框显示标志
detailData: [], // 已选数据 '类型:1行政架构,2门店架构'
dataType: null //'类型:1行政架构,2门店架构'
};
},
computed: {},
methods: {
/**
* 自定义弹窗显示事件
*/
showDialogLayer(type) {
const that = this;
that.showCustomDialog = true;
that.dataType = type;
if (type === 1) {
that.detailData = that.adminStruct.fixedList.map(item => item.fields).concat(that.adminStruct.defineList.map(item => item.fields));
} else {
that.detailData = that.storeStruct.fixedList.map(item => item.fields).concat(that.storeStruct.defineList.map(item => item.fields));
}
},
/**
* 自定义弹框触发事件
*/
customHandleConfirm(val) {
const that = this;
that.showCustomDialog = false;
if (!!val) {
return false;
}
that.getSaveFields(that.dataType);
},
/**
* 删除字段
*/
delField(index, item, list, flag) {
const that = this;
that
.$alert('确定要删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
.then(({ value }) => {
that.postDlField(item.fields, flag, list, index);
})
.catch(() => {});
},
/**
* 删除字段---api
*/
postDlField(code, type, list, index) {
const that = this;
const para = {
fields: code,
type: type // 类型:1行政架构,2门店架构'
};
postRequest('/haoban-manage-web/record/employee-show-field-delete.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'success');
list.splice(index, 1);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取已经选择的字段
*/
getSaveFields(type) {
const that = this;
if (type === 1) {
that.adminStruct.fixedList = [];
that.adminStruct.defineList = [];
} else {
that.storeStruct.fixedList = [];
that.storeStruct.defineList = [];
}
const para = {
type: type // 类型:1行政架构,2门店架构'
};
postRequest('/haoban-manage-web/record/employee-show-field-detail.json', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
resData.result.forEach(function(ele, index) {
if (Number.parseInt(type) === 1) {
that.fixData.includes(ele.fields) ? that.adminStruct.fixedList.push(ele) : that.adminStruct.defineList.push(ele);
} else {
that.fixDataStore.includes(ele.fields) ? that.storeStruct.fixedList.push(ele) : that.storeStruct.defineList.push(ele);
}
});
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
Promise.all([that.getSaveFields(1), that.getSaveFields(2)]);
},
components: {
navCrumb,
staffDetailField
}
};
</script>
<style lang="less" scoped>
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
background: #fff;
padding: 24px;
min-height: 500px;
h2 {
font-size: 16px;
color: #303133;
}
.m-l-8 {
margin-left: 8px;
}
.m-r-20 {
margin-left: 20px;
}
.m-b-25 {
margin-bottom: 25px;
}
.staffDetails-cell {
& + .staffDetails-cell {
margin-top: 14px;
padding-top: 36px;
border-top: 1px solid #e4e7ed;
}
}
.el-tag {
position: relative;
cursor: pointer;
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
&:hover {
color: #f56c6c;
}
}
}
.staffDetails-cell-btn {
width: 110px;
height: 32px;
padding: 0;
margin: 0 20px 20px 0;
text-align: center;
vertical-align: top;
font-size: 12px;
}
}
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2018-10-10 16:55:46
* @LastEditors: 无尘
* @LastEditTime: 2018-10-10 16:55:46
-->
<template>
<div class="storePermission-wrap common-set-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box" style="background: unset; padding: 0;">
<el-tabs v-model="activeName" @tab-click="handleClick">
<template v-for="(item, index) in brandList">
<el-tab-pane :label="item.name" :name="item.groupId" :key="'name' + index"> </el-tab-pane>
</template>
</el-tabs>
<div class="storePermission-title font-w-500">
门店成员通讯录可见权限
</div>
<div v-if="brandList.length" class="bg-fff permiss-contain">
<set-permiss ref="clerkPermiss" :permType="1" :authData="brandList.clerkData"> </set-permiss>
<div class="b-l"></div>
<set-permiss ref="clerkManagePermiss" :permType="2" :authData="brandList.managerData"> </set-permiss>
<div class="switch-cell p-l-110 m-t-15">
<el-button type="primary" @click="saveAll">保 存</el-button>
</div>
</div>
<div v-if="brandList.length" class="storePermission-wrap-switch m-t-24">
<div class="storePermission-switch-title font-w-500">
门店信息变更是否需要审核
</div>
<div class="storePermission-switch-body">
<div class="switch-cell">
<el-switch v-model="switchList.addStoreClerkCheck" :inactive-text="switchList.addName"> </el-switch>
</div>
<div class="switch-cell">
<el-switch v-model="switchList.deleteStoreClerkCheck" :inactive-text="switchList.delName"> </el-switch>
</div>
<div class="switch-cell">
<el-switch v-model="switchList.storeInformationChangeCheck" :inactive-text="switchList.modName"> </el-switch>
</div>
<div class="switch-cell">
<el-switch v-model="switchList.tranferClerkCheck" :inactive-text="switchList.tranferClerkName"> </el-switch>
</div>
<div class="switch-cell p-l-94">
<el-button type="primary" @click="saveSwitch">保 存</el-button>
</div>
</div>
</div>
<!-- 无品牌是说明先添加品牌 -->
<div class="no-brand-content p-20 bg-fff text-center p-t-185" v-if="!brandList.length">
<p class="font-14 color-909399 m-b-10">请创建品牌后进行门店权限设置</p>
<el-button class="" type="primary" @click="toStoreAdd">马上新建品牌</el-button>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import setPermiss from '@/components/set/set-permiss.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
export default {
name: 'storePermission',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index'
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '通讯录信息',
path: '/staffDetails'
},
{
name: '门店权限设置',
path: ''
}
],
// 品牌 tab
activeName: '', // 显示的pannel,也是选择的 groupId
brandList: [
/*{
id: 'a',
name: 'A 品牌',
clerkData: {},
managerData: {}
}*/
],
// 审核开关
switchList: {
addName: '新增门店成员',
addStoreClerkCheck: false,
delName: '删除门店成员',
deleteStoreClerkCheck: false,
modName: '门店信息变更',
storeInformationChangeCheck: false,
tranferClerkCheck: false,
tranferClerkName: '转移门店成员'
}
};
},
computed: {},
methods: {
/**
* 去添加品牌
*
*/
toStoreAdd() {
this.$router.push('/storeFrame');
},
/**
* tab clcik
*/
handleClick(tab, event) {
const that = this;
that.getStoreAuth(tab.name, Number.parseInt(tab.index));
that.activeName = tab.name;
},
/**
* save
*/
saveSwitch: _debounce(function() {
const that = this;
let data = JSON.parse(JSON.stringify(that.switchList));
data.addStoreClerkCheck = data.addStoreClerkCheck == true ? 1 : 0;
data.deleteStoreClerkCheck = data.deleteStoreClerkCheck == true ? 1 : 0;
data.storeInformationChangeCheck = data.storeInformationChangeCheck == true ? 1 : 0;
data.tranferClerkCheck = data.tranferClerkCheck == true ? 1 : 0;
that.setStoreAuth(data);
}, 600),
/**
* 保存所有(两个)
*
*/
saveAll: _debounce(function() {
/* eslint-disable */
let that = this;
if (that.$refs.clerkPermiss.ruleForm.radio == 3 && (!that.$refs.clerkPermiss.ruleForm.visibleAll.length && !that.$refs.clerkPermiss.ruleForm.visibleStoreAll.length)) {
that.$message.error({
duration: 1000,
message: '请选择指定部门/人员'
});
return false;
}
if (that.$refs.clerkManagePermiss.ruleForm.radio == 3 && (!that.$refs.clerkManagePermiss.ruleForm.visibleAll.length && !that.$refs.clerkManagePermiss.ruleForm.visibleStoreAll.length)) {
that.$message.error({
duration: 1000,
message: '请选择指定部门/人员'
});
return false;
}
that.$refs.clerkPermiss.submitForm('ruleForm');
let clerkTime = setTimeout(() => {
that.$refs.clerkManagePermiss.submitForm('ruleForm');
clearTimeout(clerkTime);
}, 500);
},500),
/**
* 门店权限设置
*/
setStoreAuth(data) {
const that = this;
let para = {
brandId: data.brandId,
groupId: that.activeName,
addStoreClerkCheck: data.addStoreClerkCheck,
deleteStoreClerkCheck: data.deleteStoreClerkCheck,
storeInformationChangeCheck: data.storeInformationChangeCheck,
tranferClerkCheck: data.tranferClerkCheck
};
postRequest('/haoban-manage-web/brand/saveStoreAuth', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('保存成功', 'success');
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取门店权限设置
*/
getStoreAuth(groupId, index) {
const that = this;
let para = {
groupId: groupId
};
postRequest('/haoban-manage-web/brand/storeAuth', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result) {
that.brandList.clerkData = resData.result;
that.brandList.managerData = resData.result;
// 设置开关
let brandDTO = resData.result.brandDTO;
brandDTO.addStoreClerkCheck = brandDTO.addStoreClerkCheck == 1 ? true : false;
brandDTO.deleteStoreClerkCheck = brandDTO.deleteStoreClerkCheck == 1 ? true : false;
brandDTO.storeInformationChangeCheck = brandDTO.storeInformationChangeCheck == 1 ? true : false;
brandDTO.tranferClerkCheck = brandDTO.tranferClerkCheck == 1 ? true : false;
that.switchList = Object.assign(that.switchList, brandDTO);
that.$forceUpdate();
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 获取品牌列表
*/
getBrandData() {
const that = this;
postRequest('/haoban-manage-web/brand/list', {})
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (!!resData.result && !!resData.result.length) {
that.brandList = resData.result;
that.activeName = resData.result[0].groupId;
that.getStoreAuth(resData.result[0].groupId, 0);
}
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getBrandData();
},
components: {
navCrumb,
setPermiss
}
};
</script>
<style lang="less" scoped>
.bg-fff {
background: #fff;
}
.common-set-wrap {
.right-content {
/*width: 100%;*/
padding: 24px;
min-height: calc(100% - 240px);
.right-box {
/*background: #fff;*/
/*padding: 24px;*/
min-height: 500px;
.m-t-24 {
margin-top: 24px;
}
.el-tabs {
background: #fff;
/deep/ .el-tabs__nav-wrap {
height: 54px;
line-height: 54px;
.el-tabs__nav-next,
.el-tabs__nav-prev {
line-height: 54px;
}
&::after {
height: 1px;
}
.el-tabs__nav-scroll {
padding-left: 20px;
}
&.is-scrollable {
.el-tabs__nav-scroll {
padding-left: 0;
}
}
}
.el-tab-pane {
padding: 1px;
}
}
.b-l {
width: 100%;
height: 0;
margin: 38px 0 26px 0;
border-top: 1px solid #e4e7ed;
}
.el-form-item {
margin-bottom: 0;
}
.storePermission-title {
.bg-fff;
padding: 10px 32px 0 32px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.storePermission-wrap-switch {
width: 100%;
background: #fff;
}
.storePermission-switch-title {
width: 100%;
padding: 0 32px;
height: 54px;
line-height: 54px;
font-size: 16px;
color: #303133;
border-bottom: 1px solid #e4e7ed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.p-l-94 {
padding-left: 94px;
}
.storePermission-switch-body {
width: 100%;
padding: 34px 32px;
.switch-cell {
margin-bottom: 42px;
}
.el-switch {
/deep/ .is-active {
color: #303133;
}
}
}
}
}
}
.permiss-contain {
width: 100%;
padding: 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<!--
* @Descripttion: 当前组件信息
* @version: 1.0.0
* @Author: 无尘
* @Date: 2019-05-10 09:43:35
* @LastEditors: 无尘
* @LastEditTime: 2019-09-25 17:01:20
-->
<template>
<div class="sign-contain">
<div class="sign-content border-box">
<div>
<el-date-picker class="m-l-10" v-model="choiceDate" @change="changeDate" :picker-options="pickerOptions" :editable="false" :value-format="'yyyy-MM-dd'" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
</div>
<div class="m-t-20">
<store-tree-select :brandId="brandId" :activeGroupId="activeGroupId" @checkStoreGroupIds="checkStoreGroupIds"> </store-tree-select>
</div>
<div class="m-t-20">
<el-button type="primary" class="m-l-10" @click="exportData"><i class="iconfont icon-icon_yunxiazai p-r-6"></i>导 出</el-button>
</div>
</div>
</div>
</template>
<script>
import storeTreeSelect from '@/components/app/store-tree-select.vue';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
name: 'index',
components: {
storeTreeSelect
},
data() {
return {
projectName: 'haoban-manage-web', // 当前项目名
contentHeight: '0px', // 页面内容高度
choiceDate: [],
choiceDateCopy: [],
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.choiceDateCopy = [minDate.getTime()];
if (maxDate) {
this.choiceDateCopy = [];
}
},
disabledDate: time => {
if (this.choiceDateCopy.length) {
const one = 31 * 24 * 3600 * 1000;
const minTime = this.choiceDateCopy[0] - one;
const maxTime = this.choiceDateCopy[0] + one;
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6;
}
return time.getTime() > Date.now() - 8.64e6;
}
},
brandId: '',
activeGroupId: '',
storeGroupIds: []
};
},
methods: {
/**
* 导出数据
*/
exportData() {
let that = this;
that.postExportData();
},
postExportData() {
let that = this;
let para = {
date: that.choiceDate,
storeIds: that.storeGroupIds
};
getRequest('/haoban-manage-web/home/find-quick-entry', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.entryData = resData.result;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* 日期
*/
changeDate(e) {
let that = this;
if (!e) {
that.choiceDateCopy = [];
that.choiceDate = [];
} else {
that.choiceDateCopy = JSON.parse(JSON.stringify(that.choiceDate));
}
},
/**
* 选择门店分组
*/
checkStoreGroupIds: function(nodes) {
let that = this;
that.currentPage = 1;
that.storeGroupIds = nodes;
},
/**
* 获取门店数据
*/
getStoreData() {
const that = this;
let para = {};
getRequest('/haoban-manage-web/home/find-quick-entry', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
that.entryData = resData.result;
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
},
mounted() {
const that = this;
that.getStoreData();
}
};
</script>
<style lang="less" scoped>
.sign-contain {
width: 100%;
.sign-content {
width: 100%;
padding: 20px;
.m-l-10 {
margin-left: 10px;
}
/* .item-cell-select {
&.m-l-10 {
margin-left: 0;
}
} */
}
}
</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