|
|
<template>
|
|
|
<div class="townsman-container">
|
|
|
<!-- <div class="pb16 bb1 mb16 f20" style="color:#ff4400">我的团队</div> -->
|
|
|
<a-breadcrumb class="newBreadcrumb mt0 mb16">
|
|
|
<a-breadcrumb-item href>
|
|
|
<router-link :to="{name:'merchantBack'}">
|
|
|
<a-icon type="home" />
|
|
|
</router-link>
|
|
|
</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item>团队成员</a-breadcrumb-item>
|
|
|
</a-breadcrumb>
|
|
|
<div class="contentbody bodyContainer">
|
|
|
<div class="leftContainer pb24">
|
|
|
<div class="searchbox pb12 ml12 mr12">
|
|
|
<div class="searchinput">
|
|
|
<a-input-search placeholder="搜索成员" v-model.trim="pagination.keys" allowClear @search="onSearch" @keyup.enter="onSearch" @input="resetsearch">
|
|
|
<!-- <a-icon slot="prefix" type="search" class="cccc" /> -->
|
|
|
<!-- <a-button slot="enterButton" class="cblue">搜索</a-button> -->
|
|
|
</a-input-search>
|
|
|
</div>
|
|
|
<!-- <i class="iconfont icon-fangda ml12 c6 curp" @click="[addGroupShow = true,isEdit = false]" style="line-height:32px"></i> -->
|
|
|
</div>
|
|
|
|
|
|
<a-radio-group v-model="menuType" class="pl12 pr12 tac" style="width:100%" :style="{ marginBottom: '8px' }">
|
|
|
<a-radio-button value="group" class="changeGroup" style="width:50%">按部门</a-radio-button>
|
|
|
<a-radio-button value="role" class="changeGroup" style="width:50%">按角色</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
<div v-if="menuType == 'role'">
|
|
|
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<a-menu-item key="all" class="fsa bb_after fw500" @click="selectGroup('all')">
|
|
|
全部角色
|
|
|
<i class="the_num f14 tac" style="min-width:12px" @click.stop>19</i>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
<!-- <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></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;">
|
|
|
<template v-for="(item, index) in ['创建人','管理员','成员']">
|
|
|
<a-menu-item :key="item" class="fsa" @click="selectGroup(item)">
|
|
|
<span>
|
|
|
{{item}}
|
|
|
<svg class="svg f20 ml4 mb2" aria-hidden="true">
|
|
|
<use xlink:href="#icon-xitong" />
|
|
|
</svg>
|
|
|
</span>
|
|
|
<i class="the_num tac" style="min-width:12px" @click.stop>3</i>
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
</a-menu>
|
|
|
<!-- <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div> -->
|
|
|
<!-- <div class="f12 c9 ml24 mb8">自定义角色（8人）</div> -->
|
|
|
<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','角色2']">
|
|
|
<a-menu-item :key="item" class="fsa" @click="selectGroup(item)">
|
|
|
<span>
|
|
|
{{item}}
|
|
|
<svg class="svg f26 ml4 mb2" aria-hidden="true">
|
|
|
<use xlink:href="#icon-zidingyi" />
|
|
|
</svg>
|
|
|
</span>
|
|
|
<span class="the_num tac" style="min-width:12px">1</span>
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
</a-menu>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<a-menu :selectedKeys="selectedKeys" class="bgf" mode="inline" :class="'leftMenu'" style="overflow-y:scroll;height:calc(100%);overflow-x:hidden;">
|
|
|
<a-menu-item key="all" class="fsa bb_after fw500" @click="selectGroup('all')">
|
|
|
全部部门
|
|
|
<i class="the_num f14" @click.stop>18</i>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
<!-- <div class="bb1 ml12 mr12 mt4 mb4" style="wdith:calc(100% - 24px)"></div> -->
|
|
|
<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 groupList">
|
|
|
<a-menu-item :key="item.teamName" class="fsa showdot" @click="selectGroup(item)">
|
|
|
{{item.teamName}}
|
|
|
<a-dropdown overlayClassName="groupdropdown" :trigger="['click']" placement="bottomRight">
|
|
|
<i class="iconfont icon-gengduo3 thedot f14" @click.stop></i>
|
|
|
<div class="groupdropdownbox backTable" slot="overlay">
|
|
|
<div @click="[addGroupShow = true,isEdit = true,recordId = item.id,groupName=item.teamName]">修改名称</div>
|
|
|
<div @click="delGroup(item)">删除</div>
|
|
|
<div @click="index != 0?moveList(item,'up'):null" :class="index == 0 ? 'unactive':''">上移</div>
|
|
|
<div @click="index + 1 < groupList.length?moveList(item,'down'):null" :class="index + 1 == groupList.length? 'unactive':''">下移</div>
|
|
|
</div>
|
|
|
</a-dropdown>
|
|
|
<div class="the_num f14 tac" style="min-width:12px" @click.stop>6</div>
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
</a-menu>
|
|
|
<div class="pt12 ml12 mr12 mt4 bt1">
|
|
|
<a-button type="dashed" class="setMiddle" icon="plus" @click="[addGroupShow = true,isEdit = false]">
|
|
|
<!-- <i class="iconfont icon-fangda c6 f12 mr8" style="line-height:32px"></i> -->
|
|
|
<span class="ml4">添加部门</span>
|
|
|
</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rightContainer mb24">
|
|
|
<div class="fsa pb14 bb1 mb24">
|
|
|
<div class="f16 fw500">{{ selectedKeys[0] == 'all' ? '全部成员（19人）':selectedKeys[0] + '（8人）' }}</div>
|
|
|
<!-- <button class="addGroup" @click="addGroupShow = true">添加部门</button> -->
|
|
|
<a-button class="addmemeber f14" @click="showDetail('add')">
|
|
|
<i class="iconfont icon-fangda mr4"></i> 添加成员
|
|
|
</a-button>
|
|
|
<!-- <button @click="changepage(1)">下一页</button> -->
|
|
|
</div>
|
|
|
<!-- :expanded-row-keys.sync="expandedRowKeys" -->
|
|
|
<!-- v-if="modalTitle == ''" -->
|
|
|
<div class>
|
|
|
<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> -->
|
|
|
<span slot="nickName" slot-scope="text, record">{{ record.aliasName || record.userName }}</span>
|
|
|
<div slot="inAgencyStatistics" slot-scope="text, record">
|
|
|
<a-switch :checked="text" @change="showChange(record,'inAgencyStatistics')" />
|
|
|
</div>
|
|
|
<div slot="showAgencyScreen" slot-scope="text, record">
|
|
|
<a-switch :checked="text" @change="showChange(record,'showAgencyScreen')" />
|
|
|
</div>
|
|
|
<div slot="setting" v-if="!record.children" class="setting" slot-scope="text, record" style="color: #1890FF">
|
|
|
<!-- <a @click="showDetail('detail', record)">详情</a> -->
|
|
|
<a v-if="loginUserInfo.agencyRole != 3" class="delete" @click="showDetail('edit', record)">编辑</a>
|
|
|
<a v-if="loginUserInfo.agencyRole != 3" @click="deleteMemeber(record)">删除</a>
|
|
|
</div>
|
|
|
</a-table>
|
|
|
<div class="pagecontainer mt16">
|
|
|
<!-- <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="20" :total="pagination.total" @change="onChange" /> -->
|
|
|
<a-pagination :current="pagination.pageNum" :page-size-options="pagination.pageSizeOptions" :default-current="1" :defaultPageSize="20" :show-total="total => `共${total}条`" :total="pagination.total" @change="onChange" size="small" show-size-changer show-quick-jumper />
|
|
|
<!-- <div class="ant-pagination-options-quick-jumper f14 ml12">
|
|
|
<span>共{{ pagination.total }}条，</span>跳至
|
|
|
<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
|
|
|
</div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div v-else-if="modalTitle == '添加成员' || modalTitle == '编辑成员'">
|
|
|
<a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
|
<div class="fw500 mb16 f16">成员基础信息</div>
|
|
|
<a-form-item class="addItem" label="备注名">
|
|
|
<a-input placeholder="请输入备注名" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入备注名' }] }, ]" />
|
|
|
</a-form-item>
|
|
|
<a-form-item class="addItem" label="手机号">
|
|
|
<a-input placeholder="请输入手机号" v-decorator="['tel', {rules: [{ required: true, message: '请输入手机号' },{ type: 'regexp', validator: validateServiceName, message: '请输入正确的手机号', }, ], validateTrigger: 'submit',validateFirst:true }, ]" :max-length="11" />
|
|
|
</a-form-item>
|
|
|
<a-divider />
|
|
|
<div class="fw500 mb16 f16">
|
|
|
<div class="por" style="width:404px">
|
|
|
角色
|
|
|
<div class="addRole">
|
|
|
<i class="iconfont icon-fangda ml12 c6 curp"></i>添加角色
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<a-form-item class="addItem">
|
|
|
<a-radio-group v-decorator="[
|
|
|
'agencyRole',
|
|
|
{ rules: [{ required: true, message: '请选择角色' }] },
|
|
|
]" :options="options" @change="groupChange" />
|
|
|
</a-form-item>
|
|
|
<a-divider />
|
|
|
<div class="fw500 mb16 f16">成员部门</div>
|
|
|
<a-form-item>
|
|
|
<a-radio-group v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择部门' }] },]">
|
|
|
<a-radio :value="item.id" v-for="item in groupList" @change="onGroupChange(item)" :key="item.id">{{item.teamName}}</a-radio>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
<a-divider />
|
|
|
|
|
|
<a-row>
|
|
|
<div class="fw500 mb16 f16">权限</div>
|
|
|
<a-checkbox @change="onChange">参与统计</a-checkbox>
|
|
|
<a-checkbox @change="onChange">大屏显示</a-checkbox>
|
|
|
</a-row>
|
|
|
<a-divider />
|
|
|
<a-button key="back" @click="modalCancel">取消</a-button>
|
|
|
<a-button key="submit" class="ml16 mr16" type="primary" :loading="loading" @click="handleSubmit">保存</a-button>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
<div v-else-if="modalTitle == '成员详情'">
|
|
|
<div class="fw500 mb16 f16">成员基础信息</div>
|
|
|
<div style="margin-bottom:24px" class="f14 fss">
|
|
|
<div class="c6">备注名：</div>
|
|
|
<div>{{ currentMember.aliasName || currentMember.userName }}</div>
|
|
|
</div>
|
|
|
<div style="margin-bottom:24px" class="f14 fss">
|
|
|
<div class="c6">手机号：</div>
|
|
|
<div>{{ currentMember.tel }}</div>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
<div class="fw500 mb16 f16">角色</div>
|
|
|
<div style="margin-bottom:24px" class="f14">
|
|
|
<div>{{ currentMember.role }}</div>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
<div class="fw500 mb16 f16">成员部门</div>
|
|
|
<div style="margin-bottom:24px" class="f14">
|
|
|
<div>{{ currentMember.agencyTeamName }}</div>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
<div class="fw500 mb16 f16">权限</div>
|
|
|
<div style="margin-bottom:24px" class="f14">
|
|
|
<div>{{ currentMember.permission }}</div>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
</div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-modal :title="modalTitle" v-model="visible" centered id="demo" @cancel="modalCancel" width="640px" destroyOnClose class="detailWindow">
|
|
|
<template slot="footer" v-if="this.modalTitle != '成员详情'">
|
|
|
<a-button key="back" @click="modalCancel">取消</a-button>
|
|
|
<a-button key="submit" class="ml16" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
|
|
|
</template>
|
|
|
<template slot="footer" v-else>
|
|
|
<span></span>
|
|
|
</template>
|
|
|
<template v-if="modalTitle == '成员详情'">
|
|
|
<a-row style="margin-bottom:24px">
|
|
|
<a-col :span="4">手机号：</a-col>
|
|
|
<a-col :span="18">{{ currentMember.tel }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row style="margin-bottom:24px">
|
|
|
<a-col :span="4">备注名：</a-col>
|
|
|
<a-col :span="18">{{ currentMember.aliasName || currentMember.userName }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row style="margin-bottom:24px">
|
|
|
<a-col :span="4">部门：</a-col>
|
|
|
<a-col :span="18">{{ currentMember.agencyTeamName }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row style="margin-bottom:24px">
|
|
|
<a-col :span="4">角色：</a-col>
|
|
|
<a-col :span="18">{{ currentMember.role }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row style="margin-bottom:24px">
|
|
|
<a-col :span="4">权限：</a-col>
|
|
|
<a-col :span="18">{{ currentMember.permission }}</a-col>
|
|
|
</a-row>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
|
|
|
<a-form-item label="备注名">
|
|
|
<a-input placeholder="请输入备注名" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入备注名' }] }, ]" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="手机号">
|
|
|
<a-input placeholder="请输入手机号" v-decorator="['tel', {rules: [{ required: true, message: '请输入手机号' },{ type: 'regexp', validator: validateServiceName, message: '请输入正确的手机号', }, ], validateTrigger: 'submit',validateFirst:true }, ]" :max-length="11" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="部门选择">
|
|
|
<a-select placeholder="请选择部门" v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择部门' }] },]" dropdownClassName="groupSelectDrop">
|
|
|
<a-select-option v-for="(item,index) in groupList" :value="item.id" class="groupSelectSub fsa" :key="index">
|
|
|
<div>{{item.teamName}}</div>
|
|
|
</a-select-option>
|
|
|
<!-- <div slot="dropdownRender" slot-scope="menu">
|
|
|
<div v-for="(item,index) in groupList" @click="choiceGroup(item)" class="groupSelectSub fsa" :key="index">
|
|
|
<div>{{item.teamName}}</div>
|
|
|
</div>
|
|
|
</div>-->
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="角色">
|
|
|
<a-select placeholder="请选择角色" :defaultActiveFirstOption="false" v-decorator="['agencyRole',{ rules: [{ required: true, message: '请选择角色' }] },]" dropdownClassName="groupSelectDrop">
|
|
|
<a-select-option v-for="(item,index) in roleOptions" :value="item.value" class="groupSelectSub fsa" :key="index">
|
|
|
<div>{{item.label}}</div>
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<!-- <a-form-item label="角色" class="dn">
|
|
|
<a-radio-group v-decorator="[
|
|
|
'agencyRole',
|
|
|
{ rules: [{ required: true, message: '请选择角色' }] },
|
|
|
]" :options="roleOptions" @change="groupChange" />
|
|
|
</a-form-item>-->
|
|
|
<a-form-item label="参与统计">
|
|
|
<a-switch v-decorator="['inAgencyStatistics',{ valuePropName: 'checked' }]" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="大屏显示">
|
|
|
<a-switch v-decorator="['showAgencyScreen',{ valuePropName: 'checked' }]" />
|
|
|
</a-form-item>
|
|
|
<!-- <a-row>
|
|
|
<a-col :span="4">权限：</a-col>
|
|
|
<a-col :span="16">{{ permissionName }}</a-col>
|
|
|
</a-row>-->
|
|
|
</a-form>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
<a-modal :title="isEdit?'编辑部门':'添加部门'" v-model="addGroupShow" centered id="demo" @cancel="addGroupShow = false" @ok="addMemberGroup" width="640px" :destroyOnClose="true" class="addGroupModal">
|
|
|
<div class="fsc setMiddle mt20" style="width:420px">
|
|
|
<div class="mr12 c6">
|
|
|
<span class="mr4" style="color:#f5222d">*</span>部门名称:
|
|
|
</div>
|
|
|
<a-input placeholder="请输入部门名" v-model="groupName" class="flex1"></a-input>
|
|
|
</div>
|
|
|
<template slot="footer">
|
|
|
<a-button key="back" @click="[addGroupShow = false,groupName = '']">取消</a-button>
|
|
|
<a-button key="submit" type="primary" :loading="loading" @click="addMemberGroup">确定</a-button>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
<a-modal title="删除部门" v-model="delGroupShow" centered id="demo" @cancel="delGroupShow = false" width="400px" destroyOnClose class="addGroupModal">
|
|
|
<div>确定要删除该部门吗？</div>
|
|
|
<template slot="footer">
|
|
|
<a-button key="back" @click="delGroupShow = false">取消</a-button>
|
|
|
<a-button key="submit" type="primary" :loading="loading" @click="delMemberGroup">确定</a-button>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getMemberListApi, deleteMemberApi, addMemberApi, getMemberGroupApi, addMemberGroupApi, updateMemberGroupApi, delMemberGroupApi, updateMemberApi, moveGroupNextApi, moveGroupPrevApi, memberShowScreenApi, memberJoinDataApi } from '../../api/userinfo'
|
|
|
import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole, tableWidth } from '../../utils/commonUtil'
|
|
|
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: '',
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
tablenodata: {
|
|
|
// 空状态文本内容
|
|
|
emptyText: () => (
|
|
|
<div>
|
|
|
<div>
|
|
|
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" style="width:105px;height:90px;marginTop:20px" />
|
|
|
</div>
|
|
|
<div style="marginBottom:20px">暂无数据</div>
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
form: this.$form.createForm(this),
|
|
|
|
|
|
pagination: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 20,
|
|
|
total: null, //分页配置
|
|
|
status: 0,
|
|
|
keys: null,
|
|
|
size: 'small',
|
|
|
showTotal: function (total, range) {
|
|
|
return `共${total}条`
|
|
|
},
|
|
|
pageSizeOptions: ['25', '50', '100'],
|
|
|
showSizeChanger: true,
|
|
|
// searchTag: 1,
|
|
|
},
|
|
|
isspinning: false,
|
|
|
sortedInfo: null,
|
|
|
statusNum: {
|
|
|
num0: 0,
|
|
|
num1: 0,
|
|
|
num2: 0,
|
|
|
num3: 0,
|
|
|
},
|
|
|
loginUserInfo: null,
|
|
|
memberList: [],
|
|
|
visible: false,
|
|
|
currentMember: {},
|
|
|
modalTitle: '',
|
|
|
roleOptions: [
|
|
|
// { label: "创建人", value: "1" },
|
|
|
{ label: '管理员', value: '2' },
|
|
|
{ label: '成员', value: '3' },
|
|
|
],
|
|
|
permissionName: '查看职位，报名，查看报名，查看老乡，修改密码，修改手机号',
|
|
|
permission: 'job:list,apply:add,apply:list,apply:user,user:pwd,user:tel',
|
|
|
expandedRowKeys: [],
|
|
|
groupList: [],
|
|
|
showGroup: false,
|
|
|
addGroupShow: false,
|
|
|
delGroupShow: false,
|
|
|
groupName: '', // 部门名称
|
|
|
loading: false,
|
|
|
isEdit: false, // 编辑部门名称的判断
|
|
|
selectedKeys: ['all'],
|
|
|
menuType: 'group',
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
columns() {
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
customRender: (text, row, index) => {
|
|
|
if (row.children) {
|
|
|
return ''
|
|
|
} else {
|
|
|
return index + 1
|
|
|
}
|
|
|
},
|
|
|
// ellipsis: true,
|
|
|
width: 50,
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
dataIndex: 'nickName',
|
|
|
key: 'nickName',
|
|
|
scopedSlots: { customRender: 'nickName' },
|
|
|
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,
|
|
|
},
|
|
|
{
|
|
|
title: '角色',
|
|
|
dataIndex: 'role',
|
|
|
key: 'role',
|
|
|
width: 120,
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
|
|
|
// {
|
|
|
// title: '权限',
|
|
|
// dataIndex: 'permission',
|
|
|
// key: 'permission',
|
|
|
// ellipsis: true,
|
|
|
// },
|
|
|
{
|
|
|
title: '部门',
|
|
|
dataIndex: 'agencyTeamId',
|
|
|
key: 'agencyTeamId',
|
|
|
// width: 100,
|
|
|
// filters: this.groupList,
|
|
|
customRender: (text, row, index) => {
|
|
|
let text1 = '系统'
|
|
|
this.groupList.forEach((item) => {
|
|
|
// text1 = '系统'
|
|
|
|
|
|
if (item.id == text) {
|
|
|
text1 = item.teamName
|
|
|
}
|
|
|
})
|
|
|
return text1
|
|
|
},
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '手机号',
|
|
|
dataIndex: 'tel',
|
|
|
key: 'tel',
|
|
|
ellipsis: true,
|
|
|
width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '参与统计',
|
|
|
dataIndex: 'inAgencyStatistics',
|
|
|
key: 'inAgencyStatistics',
|
|
|
scopedSlots: { customRender: 'inAgencyStatistics' },
|
|
|
|
|
|
ellipsis: true,
|
|
|
width: 80,
|
|
|
},
|
|
|
{
|
|
|
title: '大屏显示',
|
|
|
dataIndex: 'showAgencyScreen',
|
|
|
key: 'showAgencyScreen',
|
|
|
scopedSlots: { customRender: 'showAgencyScreen' },
|
|
|
|
|
|
ellipsis: true,
|
|
|
width: 80,
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
dataIndex: 'setting',
|
|
|
key: 'setting',
|
|
|
// sorter: (a, b) => a.userApplyOrder.localeCompare(b.userApplyOrder),
|
|
|
scopedSlots: { customRender: 'setting' },
|
|
|
ellipsis: true,
|
|
|
|
|
|
// sortOrder: sortedInfo.columnKey == "userApplyOrder" && sortedInfo.order,
|
|
|
// ellipsis: true,
|
|
|
width: 90,
|
|
|
},
|
|
|
]
|
|
|
return columns
|
|
|
},
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
// this.getMemberList();
|
|
|
if (localStorage.getItem('LOGIN_DATA')) {
|
|
|
this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
|
|
|
}
|
|
|
tableWidth(this, this.columns, 120)
|
|
|
console.log(this.currWidth)
|
|
|
this.$emit('setTitle', '团队成员')
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {
|
|
|
this.getMemberList()
|
|
|
this.getMemberGroup()
|
|
|
window.modalCancel = this.modalCancel
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
onChange(e, e1, e2) {
|
|
|
console.log(e)
|
|
|
console.log(e1)
|
|
|
console.log(e2)
|
|
|
if (typeof e == 'number') {
|
|
|
this.pagination.pageNum = e
|
|
|
this.getMemberList()
|
|
|
}
|
|
|
},
|
|
|
/**
|
|
|
* 添加成员部门选择切换
|
|
|
*/
|
|
|
onGroupChange(e) {
|
|
|
console.log(e)
|
|
|
this.form.setFieldsValue({
|
|
|
agencyTeamId: e.teamName,
|
|
|
})
|
|
|
this.agencyTeamId = e.id
|
|
|
},
|
|
|
/**
|
|
|
* 部门列表选择
|
|
|
*
|
|
|
*
|
|
|
*/
|
|
|
getGroup(e) {
|
|
|
console.log(e)
|
|
|
},
|
|
|
inputpageChange(e) {
|
|
|
const pagenumcount = this.pagination.total / this.pagination.pageSize
|
|
|
console.log(pagenumcount)
|
|
|
if (e.target.value) {
|
|
|
if (e.target.value > pagenumcount) {
|
|
|
this.pagination.pageNum = Math.ceil(pagenumcount)
|
|
|
} else {
|
|
|
this.pagination.pageNum = e.target.value
|
|
|
}
|
|
|
} else {
|
|
|
this.pagination.pageNum = 1
|
|
|
}
|
|
|
// this.getJobList();
|
|
|
this.getMemberList()
|
|
|
console.log(e)
|
|
|
},
|
|
|
async getMemberList() {
|
|
|
// let jobinfo = {...this.pagination , searchTag:1}
|
|
|
try {
|
|
|
this.isspinning = true
|
|
|
console.log(this.pagination)
|
|
|
getMemberListApi(this.pagination).then(({ data }) => {
|
|
|
if (data.status === 200) {
|
|
|
this.memberList = data.data.recordList
|
|
|
this.memberList.forEach((item, index) => {
|
|
|
// item.group = '部门' + ((index % 5) + 1)
|
|
|
// item1.children.forEach((item) => {
|
|
|
item.inAgencyStatistics = item.inAgencyStatistics == 0 ? true : false
|
|
|
item.showAgencyScreen = item.showAgencyScreen == 0 ? true : false
|
|
|
item.role = getAgencyRoleTypeById(item.agencyRole)
|
|
|
item.permission = getAgencyPermissionNameById(item.agencyPermissions)
|
|
|
// })
|
|
|
})
|
|
|
console.log(this.memberList)
|
|
|
// this.memberList.sort((a, b) => {
|
|
|
// return a.agencyRole - b.agencyRole
|
|
|
// })
|
|
|
this.memberList.sort((a, b) => {
|
|
|
if (a.agencyRole == b.agencyRole) {
|
|
|
//==同理 id相同就继续判断数量是否相同
|
|
|
return b.agencyTeamId - a.agencyTeamId
|
|
|
} else {
|
|
|
return a.agencyRole - b.agencyRole
|
|
|
}
|
|
|
})
|
|
|
this.pagination.total = data.data.recordCount
|
|
|
this.isspinning = false
|
|
|
}
|
|
|
})
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
},
|
|
|
getMemberGroup() {
|
|
|
getMemberGroupApi().then(({ data }) => {
|
|
|
if (data.status == 200) {
|
|
|
console.log(data)
|
|
|
this.groupList = data.data.list
|
|
|
this.groupList.forEach((item, index) => {
|
|
|
console.log(item)
|
|
|
if (index > 0) {
|
|
|
item.checked = false
|
|
|
} else {
|
|
|
item.checked = true
|
|
|
}
|
|
|
console.log(item)
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
addMemberGroup() {
|
|
|
let that = this
|
|
|
this.loading = true
|
|
|
if (that.groupName.trim == '') {
|
|
|
return
|
|
|
} else {
|
|
|
if (this.isEdit) {
|
|
|
updateMemberGroupApi({ teamName: this.groupName, recordId: this.recordId }).then(({ data }) => {
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
that.$message.success('修改成功')
|
|
|
that.groupName = ''
|
|
|
that.addGroupShow = false
|
|
|
} else {
|
|
|
that.$message.warning(data.msg)
|
|
|
}
|
|
|
that.getMemberGroup()
|
|
|
that.loading = false
|
|
|
})
|
|
|
} else {
|
|
|
addMemberGroupApi({ teamName: this.groupName }).then(({ data }) => {
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
that.$message.success('添加成功')
|
|
|
that.groupName = ''
|
|
|
that.addGroupShow = false
|
|
|
} else {
|
|
|
that.$message.warning(data.msg)
|
|
|
}
|
|
|
that.getMemberGroup()
|
|
|
that.loading = false
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// async updateMemberGroup() {
|
|
|
// let { data } = await console.log(data)
|
|
|
// },
|
|
|
delMemberGroup() {
|
|
|
this.loading = true
|
|
|
delMemberGroupApi(this.recordId).then(({ data }) => {
|
|
|
if (data.status == 200) {
|
|
|
this.$message.success('删除成功')
|
|
|
this.delGroupShow = false
|
|
|
} else {
|
|
|
this.$message.warning(data.msg)
|
|
|
}
|
|
|
this.getMemberGroup()
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
|
|
|
delGroup(item) {
|
|
|
let that = this
|
|
|
this.recordId = item.id
|
|
|
this.$confirm({
|
|
|
title: '删除',
|
|
|
content: '确定要删除该部门吗？',
|
|
|
centered: true,
|
|
|
onOk(e1, e2) {
|
|
|
console.log(e1)
|
|
|
console.log(e2)
|
|
|
return new Promise((res) => {
|
|
|
that.delMemberGroup()
|
|
|
setTimeout(() => {
|
|
|
res()
|
|
|
}, 2000)
|
|
|
})
|
|
|
},
|
|
|
onCancel() {},
|
|
|
})
|
|
|
// this.delGroupShow = true
|
|
|
},
|
|
|
getPopupContainer(el, dialogContext) {
|
|
|
console.log(el)
|
|
|
console.log(dialogContext)
|
|
|
if (dialogContext) {
|
|
|
return dialogContext.getDialogWrap()
|
|
|
} else {
|
|
|
return document.body
|
|
|
}
|
|
|
},
|
|
|
resetpag() {
|
|
|
// this.pagination = {
|
|
|
// //分页配置
|
|
|
// pageNum: 1,
|
|
|
// pageSize: 8,
|
|
|
// total: null,
|
|
|
// status: this.pagination.status,
|
|
|
// keys: null,
|
|
|
// };
|
|
|
},
|
|
|
resetsearch(e) {
|
|
|
console.log(e)
|
|
|
if (e.target.value.length === 0) {
|
|
|
this.pagination.keys = ''
|
|
|
|
|
|
this.getMemberList()
|
|
|
}
|
|
|
},
|
|
|
onSearch() {
|
|
|
if (this.pagination.keys != null && this.pagination.keys.length != 0) {
|
|
|
this.getMemberList()
|
|
|
}
|
|
|
},
|
|
|
showDetail(type, e) {
|
|
|
console.log(type)
|
|
|
console.log(e)
|
|
|
let that = this
|
|
|
if (type == 'edit') {
|
|
|
this.currentMember = e
|
|
|
this.modalTitle = '编辑成员'
|
|
|
this.visible = true
|
|
|
setTimeout(() => {
|
|
|
console.log(this.currentMember)
|
|
|
that.form.setFieldsValue({
|
|
|
agencyRole: this.currentMember.agencyRole + '',
|
|
|
aliasName: this.currentMember.aliasName,
|
|
|
tel: this.currentMember.tel,
|
|
|
group: this.currentMember.group,
|
|
|
agencyTeamId: this.currentMember.agencyTeamName,
|
|
|
showAgencyScreen: this.currentMember.showAgencyScreen,
|
|
|
inAgencyStatistics: this.currentMember.inAgencyStatistics,
|
|
|
})
|
|
|
}, 200)
|
|
|
} else if (type == 'detail') {
|
|
|
this.currentMember = e
|
|
|
this.modalTitle = '成员详情'
|
|
|
this.visible = true
|
|
|
} else {
|
|
|
this.modalTitle = '添加成员'
|
|
|
this.visible = true
|
|
|
this.$nextTick(() => {
|
|
|
console.log(123)
|
|
|
that.form.setFieldsValue({
|
|
|
agencyRole: '3',
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
deleteMemeber(e) {
|
|
|
this.$confirm({
|
|
|
title: '确定删除',
|
|
|
content: '是否确定删除该成员',
|
|
|
onOk: async () => {
|
|
|
console.log('ok')
|
|
|
let { data } = await deleteMemberApi({ id: e.id })
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
this.getMemberList()
|
|
|
} else {
|
|
|
console.log(data.msg)
|
|
|
this.$message.warning(data.msg)
|
|
|
}
|
|
|
},
|
|
|
onCancel: () => {
|
|
|
console.log('cancel')
|
|
|
},
|
|
|
})
|
|
|
},
|
|
|
selectGroup(item) {
|
|
|
console.log(item)
|
|
|
this.selectedKeys = [item.teamName || item]
|
|
|
if (typeof item != 'object') {
|
|
|
this.pagination.agencyTeamIds = ''
|
|
|
} else {
|
|
|
this.pagination.agencyTeamIds = item.id + ''
|
|
|
}
|
|
|
this.getMemberList()
|
|
|
},
|
|
|
modalCancel() {
|
|
|
// console.log(this);
|
|
|
this.modalTitle = ''
|
|
|
this.visible = false
|
|
|
// this.permission = getAgencyPermissionsByRole()
|
|
|
// this.permissionName = getAgencyPermissionNameById(this.permission)
|
|
|
},
|
|
|
handleSubmit() {
|
|
|
console.log('issubmit')
|
|
|
console.log(this.currentMember)
|
|
|
console.log(this.form.getFieldsValue())
|
|
|
let formData = this.form.getFieldsValue()
|
|
|
this.form.validateFields(async (err) => {
|
|
|
console.log(err)
|
|
|
if (err == null) {
|
|
|
if (this.modalTitle == '编辑成员') {
|
|
|
try {
|
|
|
let { data } = await updateMemberApi({
|
|
|
...this.form.getFieldsValue(),
|
|
|
agencyPermissions: this.permission,
|
|
|
inAgencyStatistics: formData.inAgencyStatistics == true ? 0 : 1,
|
|
|
showAgencyScreen: formData.showAgencyScreen == true ? 0 : 1,
|
|
|
// agencyTeamId: this.agencyTeamId,
|
|
|
id: this.currentMember.id,
|
|
|
})
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
this.$message.success('修改成功')
|
|
|
this.visible = false
|
|
|
this.permission = getAgencyPermissionsByRole()
|
|
|
this.permissionName = getAgencyPermissionNameById(this.permission)
|
|
|
this.modalTitle = ''
|
|
|
this.getMemberList()
|
|
|
} else {
|
|
|
this.$message.warning(data.msg)
|
|
|
this.visible = false
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
} else {
|
|
|
try {
|
|
|
let { data } = await addMemberApi({
|
|
|
...this.form.getFieldsValue(),
|
|
|
agencyPermissions: this.permission,
|
|
|
inAgencyStatistics: formData.inAgencyStatistics == true ? 0 : 1,
|
|
|
showAgencyScreen: formData.showAgencyScreen == true ? 0 : 1,
|
|
|
// agencyTeamId: this.agencyTeamId,
|
|
|
})
|
|
|
console.log(data)
|
|
|
if (data.status == 200) {
|
|
|
this.$message.success('新建成功')
|
|
|
this.visible = false
|
|
|
this.permission = getAgencyPermissionsByRole(1)
|
|
|
this.permissionName = getAgencyPermissionNameById(this.permission)
|
|
|
this.modalTitle = ''
|
|
|
this.getMemberList()
|
|
|
} else {
|
|
|
this.$message.warning(data.msg)
|
|
|
this.visible = false
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
changeGroup(e) {
|
|
|
console.log(e)
|
|
|
this.groupList.forEach((item) => {
|
|
|
item.checked = false
|
|
|
if (item.text == e) {
|
|
|
item.checked = true
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// choiceGroup(e) {
|
|
|
// console.log(e)
|
|
|
// this.form.setFieldsValue({
|
|
|
// agencyTeamId: e.teamName,
|
|
|
// })
|
|
|
// this.agencyTeamId = e.id
|
|
|
// console.log(this.agencyTeamId)
|
|
|
// },
|
|
|
// choiceRole(e) {
|
|
|
// console.log(e)
|
|
|
// this.form.setFieldsValue({
|
|
|
// agencyRole: e.teamName,
|
|
|
// })
|
|
|
// this.agencyTeamId = e.id
|
|
|
// console.log(this.agencyTeamId)
|
|
|
// },
|
|
|
groupChange(e) {
|
|
|
console.log(e)
|
|
|
this.form.setFieldsValue({
|
|
|
agencyRole: e.target.value,
|
|
|
})
|
|
|
this.permission
|
|
|
if (this.form.getFieldValue('agencyRole') == 1) {
|
|
|
this.permission = getAgencyPermissionsByRole(1)
|
|
|
} else {
|
|
|
this.permission = getAgencyPermissionsByRole(2)
|
|
|
}
|
|
|
console.log(this.permission)
|
|
|
this.permissionName = getAgencyPermissionNameById(this.permission)
|
|
|
},
|
|
|
validateServiceName(rule, value, callback) {
|
|
|
console.log(rule)
|
|
|
console.log(value)
|
|
|
console.log(callback)
|
|
|
let reg = /^1[3|4|5|7|8|9][0-9]{9}$/
|
|
|
// if(value.length == 11){
|
|
|
if (!reg.test(value)) {
|
|
|
callback(new Error())
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
// }
|
|
|
},
|
|
|
/**
|
|
|
* 参与统计大屏显示状态切换
|
|
|
*
|
|
|
*
|
|
|
*/
|
|
|
showChange(e, type) {
|
|
|
console.log(e)
|
|
|
let that = this
|
|
|
this.memberList.forEach((item) => {
|
|
|
if (item.id == e.id) {
|
|
|
item[type] = !item[type]
|
|
|
console.log(item[type])
|
|
|
if (type == 'showAgencyScreen' && item['showAgencyScreen'] == true) {
|
|
|
item['inAgencyStatistics'] = true
|
|
|
} else if (type == 'inAgencyStatistics' && item['inAgencyStatistics'] == false) {
|
|
|
item['showAgencyScreen'] = false
|
|
|
}
|
|
|
|
|
|
console.log(item)
|
|
|
}
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
that.$forceUpdate()
|
|
|
}, 10)
|
|
|
},
|
|
|
/**
|
|
|
* 大屏显示
|
|
|
*/
|
|
|
memberShowScreen(val) {
|
|
|
memberShowScreenApi().then(({ data }) => {})
|
|
|
},
|
|
|
/**
|
|
|
* 参与统计
|
|
|
*/
|
|
|
memberJoinData(val) {
|
|
|
memberJoinDataApi().then(({ data }) => {})
|
|
|
},
|
|
|
moveList(item, type) {
|
|
|
console.log(item)
|
|
|
if (type == 'up') {
|
|
|
// let middle = this.groupList[index - 1]
|
|
|
// this.groupList[index - 1] = this.groupList[index]
|
|
|
// this.groupList[index] = middle
|
|
|
moveGroupPrevApi(item.id).then((res) => {
|
|
|
console.log(res)
|
|
|
if (res.data.status == 200) {
|
|
|
this.getMemberGroup()
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
// let middle = this.groupList[index + 1]
|
|
|
// this.groupList[index + 1] = this.groupList[index]
|
|
|
// this.groupList[index] = middle
|
|
|
moveGroupNextApi(item.id).then((res) => {
|
|
|
console.log(res)
|
|
|
if (res.data.status == 200) {
|
|
|
this.getMemberGroup()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
// this.$forceUpdate()
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.townsman-container {
|
|
|
// margin-top: 16px;
|
|
|
// min-height: calc(100vh - 200px);
|
|
|
height: 100%;
|
|
|
padding: 0px;
|
|
|
// background-color: #fff;
|
|
|
border: 1px solid #0000;
|
|
|
}
|
|
|
.contenttitle {
|
|
|
display: flex;
|
|
|
padding-bottom: 0px;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
font-weight: 600;
|
|
|
margin-top: 16px;
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
ul {
|
|
|
display: flex;
|
|
|
height: 40px;
|
|
|
.townsmanactive {
|
|
|
// border-color: #;
|
|
|
// width: 128px;
|
|
|
color: #ff4400;
|
|
|
z-index: 999;
|
|
|
border-bottom: 2px solid #ff6600;
|
|
|
> span {
|
|
|
font-size: 16px;
|
|
|
color: #ff6600;
|
|
|
}
|
|
|
}
|
|
|
li {
|
|
|
position: relative;
|
|
|
width: 118px;
|
|
|
font-size: 16px;
|
|
|
// height: 40px;
|
|
|
padding-bottom: 16px;
|
|
|
color: #666;
|
|
|
// line-height: 40px;
|
|
|
text-align: center;
|
|
|
transition: width 0.2s;
|
|
|
cursor: pointer;
|
|
|
> span {
|
|
|
margin-left: 12px;
|
|
|
font-size: 16px;
|
|
|
color: #ff6600;
|
|
|
}
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
display: block;
|
|
|
width: 1px;
|
|
|
height: 16px;
|
|
|
right: 0;
|
|
|
top: 5px;
|
|
|
// transform: translateY(-50%);
|
|
|
background-color: #eeeeee;
|
|
|
}
|
|
|
&:last-child::after {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 100px;
|
|
|
height: 28px;
|
|
|
position: relative;
|
|
|
font-size: 14px;
|
|
|
border: 1px solid #cccccc;
|
|
|
background-color: #fff;
|
|
|
margin-right: -1px;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
button:first-child {
|
|
|
// border-radius: 4px 0px 0px 4px;
|
|
|
}
|
|
|
button:last-child {
|
|
|
// border-radius: 0px 4px 4px 0px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.contentbody {
|
|
|
// overflow: hidden;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding-left: 0;
|
|
|
padding-bottom: 0px;
|
|
|
// overflow: hidden;
|
|
|
// min-height: calc(100vh - 105px);
|
|
|
// height: calc(100vh - 105px);
|
|
|
.leftContainer {
|
|
|
width: 260px;
|
|
|
min-width: 220px;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
/deep/ .searchbox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.searchinput {
|
|
|
width: 100%;
|
|
|
}
|
|
|
// padding-bottom: 14px;
|
|
|
}
|
|
|
.leftMenu {
|
|
|
max-width: calc(100% - 1px);
|
|
|
margin-right: 1px;
|
|
|
border-right-color: transparent;
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 0;
|
|
|
}
|
|
|
}
|
|
|
.thedot {
|
|
|
display: none;
|
|
|
}
|
|
|
.showdot:hover {
|
|
|
.thedot {
|
|
|
display: block;
|
|
|
}
|
|
|
.the_num {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.rightContainer {
|
|
|
flex: 1;
|
|
|
padding-left: 16px;
|
|
|
// overflow: hidden;
|
|
|
position: relative;
|
|
|
// min-width: 1020px;
|
|
|
&::before {
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
width: 1px;
|
|
|
height: calc(100% - 16px);
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
background: #eee;
|
|
|
}
|
|
|
.addmemeber {
|
|
|
border: 0;
|
|
|
padding: 0 12px;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
color: #fff;
|
|
|
background: #1890ff;
|
|
|
border-radius: 4px;
|
|
|
i {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
&:hover {
|
|
|
background: #40a9ff;
|
|
|
}
|
|
|
}
|
|
|
.addRole {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translateY(-50%);
|
|
|
color: #1890ff;
|
|
|
i {
|
|
|
// transform: translateY(4px);
|
|
|
margin-right: 4px;
|
|
|
font-weight: 400;
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
.addItem {
|
|
|
width: 404px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .ant-table-placeholder {
|
|
|
min-height: 300px;
|
|
|
> div {
|
|
|
position: relative;
|
|
|
height: 131px;
|
|
|
top: 30px;
|
|
|
// transform: translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
/deep/.ant-table {
|
|
|
.ant-table-content {
|
|
|
.ant-table-body {
|
|
|
.ant-table-thead {
|
|
|
th {
|
|
|
padding: 12px 0;
|
|
|
div {
|
|
|
padding: 0px 8px;
|
|
|
}
|
|
|
&:not(:first-child) {
|
|
|
> span {
|
|
|
// line-height: 22px;
|
|
|
> div {
|
|
|
// line-height: 1;
|
|
|
border-left: 1px solid #ddd;
|
|
|
padding-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
font-size: 14px !important;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
font-size: 14px !important;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-tbody {
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
font-size: 14px !important;
|
|
|
padding: 12px 14px;
|
|
|
}
|
|
|
.ant-table-row-expand-icon {
|
|
|
// color: #000;
|
|
|
padding: 0;
|
|
|
}
|
|
|
.ant-table-row-indent {
|
|
|
display: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/ .ant-table-column-sorter-inner {
|
|
|
height: 16px !important;
|
|
|
}
|
|
|
.setting {
|
|
|
a:nth-child(2) {
|
|
|
}
|
|
|
// a:last-child {
|
|
|
// }
|
|
|
.delete {
|
|
|
// border-left: 1px solid #979797;
|
|
|
border-right: 1px solid #eee;
|
|
|
padding: 0 6px 0 0;
|
|
|
margin: 0 6px 0 0;
|
|
|
}
|
|
|
}
|
|
|
// /deep/ .ant-table-row-cell-break-word {
|
|
|
// padding: 12px 8px !important;
|
|
|
// }
|
|
|
// .addGroupModal {
|
|
|
/deep/ .ant-modal {
|
|
|
.ant-modal-header {
|
|
|
// text-align: center;
|
|
|
// border-bottom: none;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
padding: 10px 16px;
|
|
|
.ant-modal-title {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.ant-modal-body {
|
|
|
min-height: 170px;
|
|
|
}
|
|
|
.ant-modal-close-x {
|
|
|
height: 40px;
|
|
|
width: 50px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
.ant-modal-footer {
|
|
|
// border-top: none;
|
|
|
}
|
|
|
// .ant-btn:not(.ant-btn-primary):hover,
|
|
|
// .ant-btn:not(.ant-btn-primary):focus {
|
|
|
// color: #ff4400;
|
|
|
// background-color: #fff;
|
|
|
// border-color: #ff4400;
|
|
|
// }
|
|
|
// .ant-btn-primary {
|
|
|
// background-color: #ff4400;
|
|
|
// border-color: #ff4400;
|
|
|
// &:hover {
|
|
|
// opacity: 0.8;
|
|
|
// }
|
|
|
// }
|
|
|
}
|
|
|
// }
|
|
|
.detailWindow {
|
|
|
/deep/ .ant-modal {
|
|
|
.ant-modal-close-x {
|
|
|
height: 40px;
|
|
|
width: 50px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
.ant-modal-header {
|
|
|
// padding: 12px;
|
|
|
text-align: left;
|
|
|
// background-color: #f5f5f5;
|
|
|
}
|
|
|
.ant-modal-body {
|
|
|
padding-left: 100px;
|
|
|
min-height: 318px;
|
|
|
.ant-form-item {
|
|
|
margin-bottom: 12px;
|
|
|
// .ant-form-item-control-wrapper{
|
|
|
// margin-bottom: 16px;
|
|
|
// }
|
|
|
}
|
|
|
.ant-form-item-control {
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
.ant-row {
|
|
|
line-height: 30px;
|
|
|
|
|
|
.ant-col:first-child {
|
|
|
text-align: right;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.groupSelectDrop {
|
|
|
.groupSelectSub {
|
|
|
cursor: pointer;
|
|
|
padding: 9px 16px;
|
|
|
&:hover {
|
|
|
> div {
|
|
|
color: #1890ff !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/.spinstyle {
|
|
|
.ant-spin-dot-item {
|
|
|
background-color: #1890ff !important;
|
|
|
}
|
|
|
.ant-spin-text {
|
|
|
color: #1890ff !important;
|
|
|
}
|
|
|
}
|
|
|
.pagecontainer {
|
|
|
// position: absolute;
|
|
|
// bottom: 0;
|
|
|
// left: 50%;
|
|
|
width: 100%;
|
|
|
// transform: translateX(-50%);
|
|
|
display: flex;
|
|
|
// justify-content: center;
|
|
|
}
|
|
|
.groupdropdown {
|
|
|
.groupdropdownbox {
|
|
|
width: 102px;
|
|
|
// height: 114px;
|
|
|
overflow: hidden;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
text-align: left;
|
|
|
box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.4);
|
|
|
padding: 8px 0;
|
|
|
> div:not(.unactive) {
|
|
|
height: 32px;
|
|
|
padding: 0 12px;
|
|
|
line-height: 32px;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
background: #e7f3ff;
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.unactive {
|
|
|
color: #cccccc;
|
|
|
height: 32px;
|
|
|
padding: 0 12px;
|
|
|
line-height: 32px;
|
|
|
cursor: no-drop;
|
|
|
}
|
|
|
}
|
|
|
</style>
|