Skip to content

O
office-web
Commit 82f18629 by 无尘
Options

add: 增加公共组件和增加子管理员

parent 7fce21a7
Showing with 1096 additions and 2 deletions
src/components/limit-textarea.vue 0 → 100644
<!--
限制文本框组件
<limit-textarea
:inputWidth="500"
:inputValue.sync="ruleForm.addressDetail"
:holder="'请输入详细地址'"
:getByType="'word'"
:maxLength="40">
</limit-textarea>
-->
<template>
<div class="input-line-cell" :style="{width: inputWidth + 'px'}">
<el-input
:style="{width: inputWidth + 'px'}"
v-model="itemValue"
:placeholder="holder"
type="textarea"
:rows="3"
@focus="inputFocus()"
@keyup.native="(value) => toInput(value)">
</el-input>
<span class="tip"><span class="len_span">{{inputNum}}</span>/{{limitLength}}</span>
</div>
</template>
<script>
import strLength from '@/common/js/strlen';
export default {
name: "limittextarea",
props: {
inputValue: {// 传入 input value
type: String,
default: ''
},
maxLength: {// 限制长度
type: Number,
default: 10
},
inputWidth: {// input 长度
type: Number,
default: 500
},
getByType: { // 字或字符判断类型
type: String,
default: 'word' // word: 字, char: 字符
},
holder: {
type: String,
default: '请输入'
}
},
data() {
return {
inputNum: 0,
limitLength: 10,
itemValue: '',
}
},
methods: {
inputFocus(num) {
const that = this
console.log(num)
},
// 输入
toInput: function(value) {
const that = this;
console.log(value)
let temp = '';
if (that.getByType == 'word') {
temp = strLength.getByteVal(value.target.value,that.limitLength)
that.itemValue= temp.trim()
that.inputNum = strLength.getZhLen(that.itemValue);
}else {
temp = strLength.getCharVal(value.target.value,that.limitLength)
that.itemValue= temp.trim()
that.inputNum = strLength.getByteLen(that.itemValue);
}
that.$emit('update:inputValue',that.itemValue)
},
},
watch: {
maxLength: function(newData,oldData){
const that = this;
that.limitLength = newData
},
inputValue: function(newData,oldData){
const that = this;
that.itemValue = newData
that.inputNum = strLength.getZhLen(that.itemValue)
},
},
/* 接收数据 */
mounted(){
const that = this;
that.limitLength = that.maxLength;
that.itemValue = that.inputValue || '';
that.inputNum = strLength.getZhLen(that.inputValue);
},
}
</script>
<style lang="less" scoped>
.input-line-cell {
position: relative;
display: inline-block;
}
.w-340 {
width: 340px;
/deep/ .el-input__inner {
font-size: 12px;
color: #fff;
background-color: rgba(255,255,255,.1);
}
}
.el-input {
/deep/ .el-textarea__inner {
font-size: 12px;
color: #606266;
background-color: rgba(255,255,255,.1);
resize: none;
}
.is-disabled{
/deep/ .el-input__inner {
font-size: 12px;
color: #fff;
background-color: rgba(255,255,255,.1);
}
}
}
.tip {
position: absolute;
bottom: -28px;
right: 10px;
display: inline-block;
line-height: 32px;
text-align: right;
font-size: 12px;
color: #909399;
}
</style>
src/router/index.js
......@@ -136,6 +136,16 @@ export const constantRouterMap = [
name: '设置子管理员',
component: _import('setting','setChildAdmin')
},
{
path: '/addAdmin',
name: '添加管理员',
component: _import('setting','addAdmin')
},
{
path: '/addAdminRole',
name: '添加管理员',
component: _import('setting','addAdminRole')
}
]
},
{
......
src/views/setting/addAdmin.vue 0 → 100644
<template>
<div class="companyAddress-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="100px" class="demo-ruleForm">
<el-form-item label="管理员角色" prop="name" class="">
<el-input v-model="ruleForm.name" disabled placeholder="" class="w-380"></el-input>
</el-form-item>
<el-form-item label="选择人员" prop="name" class="">
<div class="flex w-380 flex-wrap">
<template v-for="(item,index) in ruleForm.peopleList">
<div class="people-cell">
<img :src="item.img"/>
<p>{{item.name}}</p>
<i class="el-icon-circle-close" @click.stop="delField(index,item,ruleForm.peopleList)"></i>
</div>
</template>
<div class="people-cell">
<span class="add-icon" @click.stop="showDialogLayer('people')"><i class="el-icon-plus"></i></span>
</div>
</div>
</el-form-item>
<el-form-item label="选择管理范围" prop="name" class="m-b-0">
<div class="flex w-380 flex-wrap">
<template v-for="(item,index) in ruleForm.departList">
<el-tag class="depart-cell">{{item.name}} <i class="el-icon-circle-close" @click.stop="delField(index,item,ruleForm.departList)"></i></el-tag>
</template>
<el-button class="el-tag m-l-8 depart-cell" @click.stop="showDialogLayer('depart')"><i class="el-icon-plus"></i>添加字段</el-button>
</div>
</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 strLength from '@/common/js/strlen';
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: "addAdminRole",
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index',
relocation: true
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: '/setChildAdmin'
},
{
name: '添加成员',
path: ''
}
],
ruleForm: {
name: '企业管理员',
peopleList: [
{
id: '1',
name: '张三',
img: 'http://thirdwx.qlogo.cn/mmopen/j7nX4OeBsXRNyvh6micCywssVEYCaWiaicUZq5Vn2zWktWLAyRvEAH7icQmUhLze8rrQYpM5ptwZ2RL7cX0icyBbiavhYFNTIZhibKu/0'
}
],
departList: [
{
id: '1',
name: '张三',
}
]
},
rules: {
}
}
},
computed: {
},
methods: {
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate((valid) => {
console.log(valid)
if (valid) {
} else {
return false;
}
});
},500),
/**
* 保存---api
*/
postSave() {
const that = this;
},
/**
* 删除字段
*/
delField(index,item,list) {
const that = this
that.$alert('确定要删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
list.splice(index,1)
}).catch(() => {
});
},
/**
* 弹窗显示事件
*/
showDialogLayer() {
const that = this
console.log(1)
},
},
mounted() {
},
components: {
navCrumb
}
}
</script>
<style lang="less" scoped>
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* display */
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
/* 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;
}
.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;
img {
width: 40px;
height: 40px;
border-radius: 4px;
}
.el-icon-circle-close {
position: absolute;
top: -10px;
right: -10px;
font-size: 16px;
color: #808995;
cursor: pointer;
}
}
.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;
}
}
}
}
</style>
src/views/setting/addAdminRole.vue 0 → 100644
<template>
<div class="companyAddress-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="100px" class="demo-ruleForm">
<el-form-item label="角色名称" prop="name" class="">
<!-- <el-input v-model="ruleForm.name" disabled placeholder="" class="w-380"></el-input> -->
<limitInput
:inputWidth="500"
:inputValue.sync="ruleForm.name"
:holder="'请输入角色名称'"
:maxLength="20">
</limitInput>
</el-form-item>
<el-form-item label="角色说明" prop="" class="">
<limitTextarea
:inputWidth="500"
:inputValue.sync="ruleForm.name"
:holder="'请输入角色说明'"
:maxLength="50">
</limitTextarea>
</el-form-item>
<el-form-item label="菜单权限" prop="" class="">
<el-transfer
:titles="['一级权限', '二级权限']"
:left-default-checked="ruleForm.leftChecked"
:data="ruleForm.left"
@left-check-change="leftChange">
</el-transfer>
<el-transfer
:titles="['二级权限', '二级权限']"
:left-default-checked="ruleForm.rightChecked"
:data="ruleForm.right"
@left-check-change="rightChange">
</el-transfer>
</el-form-item>
<el-form-item label="应用权限" prop="" class="">
<el-transfer
:titles="['一级权限', '二级权限']"
:left-default-checked="ruleForm.leftCheckedApp"
:data="ruleForm.leftApp"
@left-check-change="leftChangeApp">
</el-transfer>
<el-transfer
:titles="['二级权限', '二级权限']"
:left-default-checked="ruleForm.rightCheckedApp"
:data="ruleForm.rightApp"
@left-check-change="rightChangeApp">
</el-transfer>
</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 limitInput from '@/components/limit-input.vue';
import limitTextarea from '@/components/limit-textarea.vue';
import strLength from '@/common/js/strlen';
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: "addAdminRole",
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index',
relocation: true
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: '/setChildAdmin'
},
{
name: '新增管理员',
path: ''
}
],
ruleForm: {
name: '企业管理员',
leftChecked: [],
left: [
{
key: 'index',
label: '首页'
},
{
key: 'center',
label: '审核中心'
},
{
key: 'set',
label: '设置'
}
],
rightChecked: [],
right: [
{
key: 'index',
label: '首页'
},
{
key: 'center',
label: '审核中心'
},
{
key: 'set',
label: '设置'
}
],
leftCheckedApp: [],
leftApp: [
{
key: 'index',
label: '首页'
},
{
key: 'center',
label: '审核中心'
},
{
key: 'set',
label: '设置'
}
],
rightCheckedApp: [],
rightApp: [
{
key: 'index',
label: '首页'
},
{
key: 'center',
label: '审核中心'
},
{
key: 'set',
label: '设置'
}
]
},
rules: {
}
}
},
computed: {
},
methods: {
/**
* 保存
*/
submitForm: _debounce(function(formName) {
const that = this;
that.$refs[formName].validate((valid) => {
console.log(valid)
if (valid) {
} else {
return false;
}
});
},500),
/**
* 保存---api
*/
postSave() {
const that = this;
},
/**
* 选择
*/
leftChange(value, direction) {
console.log(value, direction)
},
/**
* 选择
*/
rightChange(value, direction) {
console.log(value, direction)
},
/**
* 选择
*/
leftChangeApp(value, direction) {
console.log(value, direction)
},
/**
* 选择
*/
rightChangeApp(value, direction) {
console.log(value, direction)
},
},
mounted() {
},
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;
}
.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;
}
}
}
}
}
</style>
src/views/setting/setChildAdmin.vue
<template>
<div class="setChildAdmin-wrap common-set-wrap">
<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="text-center"><el-button>新增管理员角色</el-button></div>
<div class="m-t-20">
<ul>
<li v-for="(item,index) in adminRole" :key="index" :class="['role-cell',item.id == activeId? 'role-active':'']" @click.stop="selectRole(item.id)"><i class="iconfont icon-lizhi p-r-6"></i>{{item.name}}</li>
</ul>
</div>
</div>
<div class="setChildAdmin-wrap-right box-sizing">
<div class="role-title flex flex-between">
<span class="font-20 color-303133">{{roleRightObj.name}}</span><span class="font-14 color-1890ff" v-if="roleRightObj.auth==0">查看权限</span><span class="font-14 color-1890ff" v-if="roleRightObj.auth==1">编辑权限</span>
</div>
<div class="role-tip m-t-27 m-b-25">
<el-alert
:title="roleRightObj.tip"
type="info"
:closable="false"
show-icon>
</el-alert>
</div>
<div class="role-add">
<el-button type="primary" @click="toAddRole">添加成员</el-button>
</div>
<div class="role-table ">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="phone"
label="手机号"
>
</el-table-column>
<el-table-column
prop="depart"
label="部门">
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import strLength from '@/common/js/strlen';
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: "setChildAdmin",
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: '/index',
relocation: true
},
{
name: '设置',
path: '/companyAddress'
},
{
name: '设置子管理员',
path: ''
}
],
boxHeight: window.screen.availHeight + 'px',
activeId: 1,
adminRole: [
{
id: '1',
name: '超级管理员'
},
{
id: '2',
name: '企业管理员'
}
],
roleRightObj: {
name: '超级管理员',
tip: '企业的创建者，拥有企业的所有权限，只会有一个',
auth: 1
},
// 角色表格数据
tableData: [
{
id: 1,
name: '张三',
phone: '13333333333',
depart: '技术部'
}
]
}
},
computed: {
},
methods: {
/**
* 路由跳转
*/
changeRoute(path) {
this.$router.push(path)
},
/**
* 选择 role
*/
selectRole(id) {
const that = this;
that.activeId = id
},
/**
* 请求角色---api
*/
postRole() {
const that = this;
},
/**
* 添加成员
*/
toAddRole() {
const that = this;
that.changeRoute('/addAdmin');
}
},
mounted() {
const that = this;
that.boxHeight = (window.screen.availHeight - 430) + 'px'
},
components: {
navCrumb
}
}
</script>
<style lang="less" scoped>
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* display */
.inline-block {
display: inline-block;
}
.block {
display: block;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
/* 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;
}
.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;
.role-cell {
width: 220px;
height: 36px;
line-height: 36px;
padding: 0 20px;
font-size: 14px;
color: #606266;
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,.1);
border: 1px solid rgba(64,158,255,.2);
color: #606266;
font-size: 13px;
/deep/ i {
font-size: 16px;
color: #1890ff;
}
}
}
.role-add {
background: #EBEEF5;
padding: 8px 0 8px 15px;
}
}
}
}
}
</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