菜单配置

cyl/dev
张少康 2 years ago
commit e79c5e32f9

@ -33,10 +33,7 @@
<div class="f12 c9 ml24 mb8">默认角色11</div> <div class="f12 c9 ml24 mb8">默认角色11</div>
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;"> <a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
<template v-for="(item, index) in ['创建人(1人)','管理员(3人)','成员(12人)']"> <template v-for="(item, index) in ['创建人(1人)','管理员(3人)','成员(12人)']">
<a-menu-item :key="item" class="fsa showdot" @click="selectGroup(item)"> <a-menu-item :key="item" class="fsa showdot" @click="selectGroup(item)">{{item}}</a-menu-item>
{{item}}
</a-menu-item>
</template> </template>
</a-menu> </a-menu>
<div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div> <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div>
@ -111,7 +108,7 @@
<!-- :expanded-row-keys.sync="expandedRowKeys" --> <!-- :expanded-row-keys.sync="expandedRowKeys" -->
<!-- v-if="modalTitle == ''" --> <!-- v-if="modalTitle == ''" -->
<div class> <div class>
<a-table :columns="columns" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata"> <a-table :columns="columns" :scroll="{x:currWidth}" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle'}" :rowKey="(record) => record.id" :locale="tablenodata">
<!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> --> <!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
<span slot="nickName" slot-scope="text, record"> <span slot="nickName" slot-scope="text, record">
<!-- <svg class="svg_icon" v-if="record.agencyRole == 3" aria-hidden="true" style="width:32px"> <!-- <svg class="svg_icon" v-if="record.agencyRole == 3" aria-hidden="true" style="width:32px">
@ -125,11 +122,11 @@
</svg>--> </svg>-->
{{ record.aliasName || record.userName }} {{ record.aliasName || record.userName }}
</span> </span>
<div slot="join"> <div slot="join" slot-scope="text, record">
<a-switch default-checked @change="onChange" /> <a-switch default-checked :checked="record.join" @change="showChange(record)" />
</div> </div>
<div slot="bigScreen"> <div slot="bigScreen" slot-scope="text, record">
<a-switch default-checked @change="onChange" /> <a-switch default-checked :checked="record.bigScreen" @change="showChange(record)" />
</div> </div>
<div slot="setting" v-if="!record.children" class="setting" slot-scope="text, record" style="color: #1890FF"> <div slot="setting" v-if="!record.children" class="setting" slot-scope="text, record" style="color: #1890FF">
<!-- <a @click="showDetail('detail', record)">详情</a> --> <!-- <a @click="showDetail('detail', record)">详情</a> -->
@ -327,7 +324,7 @@
<script> <script>
import { getMemberListApi, deleteMemberApi, addMemberApi, getMemberGroupApi, addMemberGroupApi, updateMemberGroupApi, delMemberGroupApi, updateMemberApi } from '../../api/userinfo' import { getMemberListApi, deleteMemberApi, addMemberApi, getMemberGroupApi, addMemberGroupApi, updateMemberGroupApi, delMemberGroupApi, updateMemberApi } from '../../api/userinfo'
import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole } from '../../utils/commonUtil' import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole, tableWidth } from '../../utils/commonUtil'
export default { export default {
// //
@ -407,7 +404,7 @@ export default {
} }
}, },
// ellipsis: true, // ellipsis: true,
width: 60, width: 50,
}, },
{ {
title: '姓名', title: '姓名',
@ -415,6 +412,18 @@ export default {
key: 'nickName', key: 'nickName',
scopedSlots: { customRender: 'nickName' }, scopedSlots: { customRender: 'nickName' },
ellipsis: true, ellipsis: true,
// customCell: (a,b) => {
// console.log(a);
// console.log(b);
// return {
// style: {
// 'min-width': '120px',
// width: '120px',
// overflow: 'hidden',
// display: 'inline-block',
// },
// }
// },
// width: 120, // width: 120,
}, },
{ {
@ -438,8 +447,10 @@ export default {
// width: 100, // width: 100,
// filters: this.groupList, // filters: this.groupList,
customRender: (text, row, index) => { customRender: (text, row, index) => {
let text1 let text1 = '系统'
this.groupList.forEach((item) => { this.groupList.forEach((item) => {
// text1 = ''
if (item.id == text) { if (item.id == text) {
text1 = item.teamName text1 = item.teamName
} }
@ -499,6 +510,8 @@ export default {
if (localStorage.getItem('LOGIN_DATA')) { if (localStorage.getItem('LOGIN_DATA')) {
this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA')) this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
} }
tableWidth(this, this.columns, 120)
console.log(this.currWidth)
this.$emit('setTitle', '团队成员') this.$emit('setTitle', '团队成员')
}, },
/** /**
@ -566,7 +579,8 @@ export default {
this.memberList.forEach((item, index) => { this.memberList.forEach((item, index) => {
// item.group = '' + ((index % 5) + 1) // item.group = '' + ((index % 5) + 1)
// item1.children.forEach((item) => { // item1.children.forEach((item) => {
console.log(item) item.join = false
item.bigScreen = false
item.role = getAgencyRoleTypeById(item.agencyRole) item.role = getAgencyRoleTypeById(item.agencyRole)
item.permission = getAgencyPermissionNameById(item.agencyPermissions) item.permission = getAgencyPermissionNameById(item.agencyPermissions)
// }) // })
@ -873,6 +887,14 @@ export default {
} }
// } // }
}, },
/**
* 参与统计大屏显示状态切换
*
*
*/
showChange(e) {
console.log(e)
},
}, },
} }
</script> </script>
@ -1000,7 +1022,7 @@ export default {
padding-left: 16px; padding-left: 16px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
min-width: 1020px; // min-width: 1020px;
&::before { &::before {
position: absolute; position: absolute;
content: ''; content: '';

File diff suppressed because one or more lines are too long

@ -121,7 +121,7 @@
<div class="content"> <div class="content">
<!-- :expanded-row-keys.sync="expandedRowKeys" childrenColumnName="users" --> <!-- :expanded-row-keys.sync="expandedRowKeys" childrenColumnName="users" -->
<!-- :scroll="{ y: tableHeight }" --> <!-- :scroll="{ y: tableHeight }" -->
<a-table :columns="columns" class="dataTable" :data-source="dataList" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index"> <a-table :columns="columns" :scroll="{x:currWidth}" class="dataTable" :data-source="dataList" :pagination="false" @change="onChange" :loading="{ spinning: isspinning, tip: '加载中', wrapperClassName: 'spinstyle', }" :rowKey="(record) => record.index">
<span slot="custom_objob"> <span slot="custom_objob">
<span class="fw500">在职人数</span> <span class="fw500">在职人数</span>
</span> </span>
@ -178,7 +178,7 @@
<script> <script>
import { dataStatisticsListApi, dataStatisticsTeamDetailApi, getMemberGroupApi } from '../../../../api/userinfo' import { dataStatisticsListApi, dataStatisticsTeamDetailApi, getMemberGroupApi } from '../../../../api/userinfo'
import moment from 'moment' import moment from 'moment'
import { getDateYMD, formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById, toFixed } from '../../../../utils/commonUtil' import { getDateYMD, formatDateYMD, formatDateYMDHM, getUserApplyOrderStatusById, toFixed, tableWidth } from '../../../../utils/commonUtil'
const rowSelection = { const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows) console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
@ -326,8 +326,8 @@ export default {
const columns = [ const columns = [
{ {
// title: ' ', // title: ' ',
dataIndex: 'aliasName', dataIndex: 'index',
key: 'aliasName', key: 'index',
slots: { title: 'title_index' }, slots: { title: 'title_index' },
customRender: (text, row, index) => { customRender: (text, row, index) => {
@ -337,7 +337,7 @@ export default {
return index + 1 return index + 1
// } // }
}, },
width: 60, width: 50,
}, },
{ {
title: '姓名', title: '姓名',
@ -610,26 +610,32 @@ export default {
}, },
// //
watch: { watch: {
menuType(value) { menuType: {
// setTimeout(()=>{ handler(value) {
console.log(value)
if (value == 'role') {
console.log(this.columns)
this.columns.splice(2, 0, {
title: '部门',
dataIndex: 'agencyTeamName',
key: 'agencyTeamName',
ellipsis: true,
width: 120,
slots: { title: 'agencyTeamName' },
})
} else {
console.log(value) console.log(value)
console.log(this.columns.slice(2, 3)) if (value == 'group') {
if (this.columns.slice(2, 3)[0].title == '部门') { console.log(this.columns)
this.columns.splice(2, 1) this.columns.splice(2, 0, {
title: '部门',
dataIndex: 'agencyTeamName',
key: 'agencyTeamName',
ellipsis: true,
width: 120,
slots: { title: 'agencyTeamName' },
})
tableWidth(this, this.columns, 120)
console.log(this.currWidth)
} else {
console.log(value)
console.log(this.columns.slice(2, 3))
if (this.columns.slice(2, 3)[0].title == '部门') {
this.columns.splice(2, 1)
}
} }
} },
immediate: true,
// setTimeout(()=>{
// },200) // },200)
}, },
}, },
@ -641,6 +647,8 @@ export default {
this.contentListSearchForm.start = moment().add(-0, 'd').format('YYYY-MM-DD') this.contentListSearchForm.start = moment().add(-0, 'd').format('YYYY-MM-DD')
this.contentListSearchForm.end = moment().format('YYYY-MM-DD') this.contentListSearchForm.end = moment().format('YYYY-MM-DD')
this.billList = [...this.billList, ...this.billList, ...this.billList] this.billList = [...this.billList, ...this.billList, ...this.billList]
tableWidth(this, this.columns, 120)
console.log(this.currWidth)
this.$emit('setTitle', '团队数据') this.$emit('setTitle', '团队数据')
this.getDataStatisticsList() this.getDataStatisticsList()
this.getMemberGroup() this.getMemberGroup()
@ -990,7 +998,7 @@ table {
padding-left: 16px; padding-left: 16px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
min-width: 1020px; // min-width: 1020px;
&::before { &::before {
position: absolute; position: absolute;
content: ''; content: '';
@ -1153,9 +1161,9 @@ td:empty:before {
// padding-right: 0; // padding-right: 0;
} }
} }
.ant-table-body::-webkit-scrollbar { // .ant-table-body::-webkit-scrollbar {
width: 0 !important; // width: 0 !important;
} // }
.ant-table-hide-scrollbar { .ant-table-hide-scrollbar {
// padding-right: 0 !important; // padding-right: 0 !important;
} }
@ -1165,7 +1173,7 @@ td:empty:before {
} }
.content { .content {
position: relative; position: relative;
overflow: auto; // overflow: auto;
// max-height: 700px; // max-height: 700px;
} }
.total { .total {

@ -1,4 +1,4 @@
@import "http://at.alicdn.com/t/c/font_3135652_vgfhlnrtoao.css"; @import "http://at.alicdn.com/t/c/font_3135652_jgx9kzxm8t.css";
// 初始化页面样式 // 初始化页面样式
body, body,
@ -330,11 +330,11 @@ i {
.pt12 { .pt12 {
padding-top: 12px; padding-top: 12px;
} }
.letter0{ .letter0 {
letter-spacing: 0; letter-spacing: 0;
} }
.mb40{ .mb40 {
margin-bottom: 40px; margin-bottom: 40px;
} }
.pb8 { .pb8 {
padding-bottom: 8px; padding-bottom: 8px;
@ -671,7 +671,7 @@ i {
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4); box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
padding: 0 16px 16px 16px; padding: 0 16px 10px 16px;
> div { > div {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
@ -682,8 +682,9 @@ i {
> a { > a {
> div { > div {
display: flex; display: flex;
padding: 16px 0; padding: 12px 0;
font-size: 14px; font-size: 14px;
line-height: 24px;
// font-weight: bold; // font-weight: bold;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -691,7 +692,8 @@ i {
color: #ff4400; color: #ff4400;
} }
span { span {
line-height: 18px; line-height: 24px;
i { i {
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
@ -701,9 +703,9 @@ i {
} }
} }
button { button {
width: 130px; width: 126px;
height: 32px; height: 32px;
margin-top: 24px; margin-top: 12px;
border: 1px solid rgba(77, 87, 94, 0.1); border: 1px solid rgba(77, 87, 94, 0.1);
border-radius: 17px; border-radius: 17px;
color: #ff4400; color: #ff4400;
@ -722,7 +724,7 @@ i {
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4); box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
padding: 0 16px 16px 16px; padding: 0 16px 10px 16px;
> div { > div {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
@ -733,7 +735,7 @@ i {
> a { > a {
> div { > div {
display: flex; display: flex;
padding: 16px 0; padding: 12px 0;
font-size: 14px; font-size: 14px;
// font-weight: bold; // font-weight: bold;
justify-content: space-between; justify-content: space-between;
@ -742,7 +744,8 @@ i {
color: #1890ff; color: #1890ff;
} }
span { span {
line-height: 18px; line-height: 24px;
i { i {
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
@ -754,7 +757,7 @@ i {
button { button {
width: 130px; width: 130px;
height: 32px; height: 32px;
margin-top: 24px; margin-top: 12px;
border: 1px solid rgba(77, 87, 94, 0.1); border: 1px solid rgba(77, 87, 94, 0.1);
border-radius: 17px; border-radius: 17px;
color: #1890ff; color: #1890ff;

@ -1588,7 +1588,27 @@ export function getAgencyRoleTypeById(id) {
}); });
return str; return str;
} }
/**
* table最小宽度优化
*
*
*/
export function tableWidth(_context,columns,widthNum){
let num = 0;
console.log(columns);
for (var i = 0; i < columns.length; i++) {
if (typeof(columns[i].width) == "undefined") {
num += widthNum
console.log(widthNum);
} else {
num += columns[i].width
}
}
console.log(num);
_context.currWidth = num;
console.log(_context.currWidth+"==============表宽")
}
/** /**
* 代理成员权限 * 代理成员权限
*/ */

@ -56,14 +56,14 @@
<span class="fsa"> <span class="fsa">
<span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span> <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
<img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else /> <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
<div class="ml8">{{ userbaseInfo.userName }}</div> <div class="ml4">{{ userbaseInfo.userName }}</div>
</span> </span>
<div class="loginbox" slot="overlay"> <div class="loginbox" slot="overlay">
<!-- <div> <!-- <div>
<img :src="loginValue.imgSrc" alt v-if="loginValue.imgSrc !== ''" style="border-radius: 50%" /> <img :src="loginValue.imgSrc" alt v-if="loginValue.imgSrc !== ''" style="border-radius: 50%" />
<span v-else class="iconfont icon-morentouxiang avatar f32"></span> <span v-else class="iconfont icon-morentouxiang avatar f32"></span>
<span class="username">{{loginValue.userName || loginValue.nickName || loginValue.tel}}</span> <span class="username">{{loginValue.userName || loginValue.nickName || loginValue.tel}}</span>
</div> --> </div>-->
<router-link to="/accountsetting"> <router-link to="/accountsetting">
<div> <div>
<span> <span>
@ -75,7 +75,7 @@
<router-link to="/merchantBack" v-if="loginValue.agencyName == '郑州一才工作' && (loginValue.agencyRole == 2 || loginValue.agencyRole == 1 )"> <router-link to="/merchantBack" v-if="loginValue.agencyName == '郑州一才工作' && (loginValue.agencyRole == 2 || loginValue.agencyRole == 1 )">
<div> <div>
<span> <span>
<i class="iconfont icon-zhanghaoshezhi"></i>商家后台 <i class="iconfont icon-shangjiahoutai"></i>商家后台
</span> </span>
<i class="iconfont icon-youjiantou"></i> <i class="iconfont icon-youjiantou"></i>
</div> </div>
@ -135,10 +135,10 @@
<span class="fsa f14 cf shadow"> <span class="fsa f14 cf shadow">
<span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span> <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
<img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else /> <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
<span class="ml8">{{ userbaseInfo.userName }}</span> <span class="ml4">{{ userbaseInfo.userName }}</span>
</span> </span>
<div class="loginbox" slot="overlay"> <div class="loginbox" slot="overlay">
<div> <!-- <div>
<img :src="loginValue.imgSrc" alt v-if="loginValue.imgSrc !== ''" style="border-radius: 50%" /> <img :src="loginValue.imgSrc" alt v-if="loginValue.imgSrc !== ''" style="border-radius: 50%" />
<span v-else class="iconfont icon-morentouxiang avatar"></span> <span v-else class="iconfont icon-morentouxiang avatar"></span>
<span class="username"> <span class="username">
@ -146,7 +146,7 @@
loginValue.userName || loginValue.nickName || loginValue.tel loginValue.userName || loginValue.nickName || loginValue.tel
}} }}
</span> </span>
</div> </div> -->
<router-link to="/accountsetting"> <router-link to="/accountsetting">
<div> <div>
<span> <span>
@ -158,7 +158,7 @@
<router-link to="/merchantBack" v-if="loginValue.agencyName == '郑州一才工作' && (loginValue.agencyRole == 2 || loginValue.agencyRole == 1 )"> <router-link to="/merchantBack" v-if="loginValue.agencyName == '郑州一才工作' && (loginValue.agencyRole == 2 || loginValue.agencyRole == 1 )">
<div> <div>
<span> <span>
<i class="iconfont icon-zhanghaoshezhi"></i>商家后台 <i class="iconfont icon-shangjiahoutai"></i>商家后台
</span> </span>
<i class="iconfont icon-youjiantou"></i> <i class="iconfont icon-youjiantou"></i>
</div> </div>
@ -680,25 +680,25 @@ export default {
// justify-content: space-between; // justify-content: space-between;
// line-height: 36px; // line-height: 36px;
.titleTag { .titleTag {
font-size: 14px; font-size: 14px;
display: flex; display: flex;
margin-left: 150px; margin-left: 150px;
li { li {
font-weight: 400; font-weight: 400;
color: #333; color: #333;
margin-right: 24px; margin-right: 24px;
line-height: 48px; line-height: 48px;
// text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05); // text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
a { a {
transition: none; transition: none;
&:hover { &:hover {
color: #ff4400; color: #ff4400;
}
} }
} }
} }
}
.navigationright { .navigationright {
float: right; float: right;
margin-right: 24px; margin-right: 24px;

@ -50,18 +50,9 @@
<span class="fsa f14"> <span class="fsa f14">
<span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span> <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
<img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else /> <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
{{ userbaseInfo.userName }} <div class="ml4">{{ userbaseInfo.userName }}</div>
</span> </span>
<div class="loginbox backTable" slot="overlay"> <div class="loginbox backTable" slot="overlay">
<div class="tal">
<img :src="userbaseInfo.imgSrc" alt v-if="userbaseInfo.imgSrc !== ''" style="border-radius:50%;width:32px;height:32px;" />
<span v-else class="iconfont icon-morentouxiang avatar"></span>
<span class="username">
{{
userbaseInfo.userName || userbaseInfo.nickName || userbaseInfo.tel
}}
</span>
</div>
<router-link to="/accountsetting"> <router-link to="/accountsetting">
<div> <div>
<span> <span>
@ -73,7 +64,7 @@
<router-link to="/main"> <router-link to="/main">
<div> <div>
<span> <span>
<i class="iconfont icon-zhanghaoshezhi"></i>返回首页 <i class="iconfont icon-shangjiahoutai"></i>返回首页
</span> </span>
<i class="iconfont icon-youjiantou"></i> <i class="iconfont icon-youjiantou"></i>
</div> </div>

Loading…
Cancel
Save