You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1292 lines
42 KiB
Vue

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