|
|
<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="searchbox">
|
|
|
<div class="searchinput">
|
|
|
<a-input placeholder="请输入成员姓名/手机号" @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys">
|
|
|
<i slot="prefix" class="iconfont icon-sousuo"></i>
|
|
|
<button slot="suffix" @click="onSearch">搜索</button>
|
|
|
</a-input>
|
|
|
<!-- <div class="groupSelect" type="card" style="margin-bottom: 16px">
|
|
|
<div v-for="(item,index) in groupList" :class="item.checked?'active':''" :key="index" @click="changeGroup(item.teamName)" v-if="showGroup || index <= 5 && !showGroup">{{item.teamName}}</div>
|
|
|
<span class="showGroupSelect" @click="showGroup = !showGroup">{{showGroup?'收起':'展开'}}</span>
|
|
|
</div>-->
|
|
|
</div>
|
|
|
<div class>
|
|
|
<button class="addGroup" @click="addGroupShow = true">添加分组</button>
|
|
|
<button class="pagechange" @click="showDetail('add')">
|
|
|
<i class="iconfont icon-fangda"></i> 添加成员
|
|
|
</button>
|
|
|
<!-- <button @click="changepage(1)">下一页</button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- :expanded-row-keys.sync="expandedRowKeys" -->
|
|
|
<a-table :columns="columns" :data-source="memberList" :pagination="false" @change="onChange" :loading="{spinning: isspinning,tip: '加载中',wrapperClassName: 'spinstyle',
|
|
|
}" :locale="tablenodata">
|
|
|
<!-- <a slot="index" slot-scope="record, text, index">{{ index + 1 }}</a> -->
|
|
|
<span slot="nickName" slot-scope="text, record">
|
|
|
<!-- <i class="iconfont icon-chengyuan"></i> -->
|
|
|
<svg class="svg_icon" v-if="record.agencyRole == 3" aria-hidden="true" style="width:32px">
|
|
|
<use xlink:href="#icon-chengyuan" />
|
|
|
</svg>
|
|
|
<svg class="svg_icon" v-if="record.agencyRole == 2" aria-hidden="true" style="width:32px">
|
|
|
<use xlink:href="#icon-guanliyuan" />
|
|
|
</svg>
|
|
|
<svg class="svg_icon" v-if="record.agencyRole == 1" aria-hidden="true" style="width:32px">
|
|
|
<use xlink:href="#icon-chuangjianren" />
|
|
|
</svg>
|
|
|
{{ record.aliasName || record.userName }}
|
|
|
<span>{{ record.tel?'（'+ record.tel + '）':'' }}</span>
|
|
|
</span>
|
|
|
<div slot="setting" v-if="!record.children" class="setting" slot-scope="text, record" style="color: #f40">
|
|
|
<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="8" :total="pagination.total" @change="onChange" />
|
|
|
<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>
|
|
|
<a-modal :title="modalTitle" v-model="visible" centered id="demo" @cancel="modalCancel" width="640px" destroyOnClose class="detailWindow">
|
|
|
<template slot="footer" v-if="this.modalTitle != '成员详情'">
|
|
|
<button style="background-color: #fff; border-color: #d9d9d9" @click="modalCancel">取消</button>
|
|
|
<button style="background-color: #f40;color: #fff;border: none;margin-left: 16px;margin-right: 16px;" @click="handleSubmit">确定</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="['tel', {rules: [{ required: true, message: '请输入手机号' },{ type: 'regexp', validator: validateServiceName, message: '请输入正确的手机号', }, ], validateTrigger: 'submit', }, ]" :max-length="11" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="备注名">
|
|
|
<a-input placeholder="请输入备注名" v-decorator="[ 'aliasName', { rules: [{ required: true, message: '请输入备注名' }] }, ]" />
|
|
|
</a-form-item>
|
|
|
<a-form-item label="分组">
|
|
|
<a-select default-value="lucy" placeholder="请选择分组" v-decorator="['agencyTeamId',{ rules: [{ required: false, message: '请选择分组' }] },]" dropdownClassName="groupSelectDrop">
|
|
|
<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>
|
|
|
<span @click="[addGroupShow = true,idEdit = true,recordId = item.id]">修改</span>
|
|
|
<span @click.stop="delGroup(item)">删除</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bt1" style="padding: 9px 16px; cursor: pointer;" @mousedown="e => e.preventDefault()" @click="[addGroupShow = true,idEdit = false]">添加新分组</div>
|
|
|
</div>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
<a-form-item label="角色">
|
|
|
<a-radio-group v-decorator="[
|
|
|
'agencyRole',
|
|
|
{ rules: [{ required: true, message: '请选择角色' }] },
|
|
|
]" :options="options" @change="groupChange" />
|
|
|
</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="idEdit?'编辑分组':'添加分组'" v-model="addGroupShow" centered id="demo" @cancel="addGroupShow = false" @ok="addMemberGroup" width="400px" destroyOnClose class="addGroupModal">
|
|
|
<a-input placeholder="请输入分组名" v-model="groupName"></a-input>
|
|
|
<template slot="footer">
|
|
|
<a-button key="back" @click="addGroupShow = false">取消</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 } from '../../api/userinfo'
|
|
|
import { formatDateYMD, getUserApplyOrderStatusById, getAgencyRoleTypeById, getAgencyPermissionNameById, getAgencyPermissionsByRole } from '../../utils/commonUtil'
|
|
|
const rowSelection = {
|
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
|
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
|
|
},
|
|
|
onSelect: (record, selected, selectedRows) => {
|
|
|
console.log(record, selected, selectedRows)
|
|
|
},
|
|
|
onSelectAll: (selected, selectedRows, changeRows) => {
|
|
|
console.log(selected, selectedRows, changeRows)
|
|
|
},
|
|
|
}
|
|
|
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: 8,
|
|
|
total: null, //分页配置
|
|
|
status: 0,
|
|
|
keys: null,
|
|
|
// searchTag: 1,
|
|
|
},
|
|
|
isspinning: false,
|
|
|
sortedInfo: null,
|
|
|
statusNum: {
|
|
|
num0: 0,
|
|
|
num1: 0,
|
|
|
num2: 0,
|
|
|
num3: 0,
|
|
|
},
|
|
|
loginUserInfo: null,
|
|
|
memberList: [],
|
|
|
visible: false,
|
|
|
currentMember: {},
|
|
|
modalTitle: '新建成员',
|
|
|
options: [
|
|
|
// { 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: [],
|
|
|
rowSelection,
|
|
|
showGroup: false,
|
|
|
addGroupShow: false,
|
|
|
delGroupShow: false,
|
|
|
groupName: '', // 分组名称
|
|
|
loading: false,
|
|
|
idEdit: false,
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
columns() {
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
customRender: (text, row, index) => {
|
|
|
if (row.children) {
|
|
|
return ''
|
|
|
} else {
|
|
|
return index + 1
|
|
|
}
|
|
|
},
|
|
|
// ellipsis: true,
|
|
|
width: 60,
|
|
|
},
|
|
|
{
|
|
|
title: '姓名',
|
|
|
dataIndex: 'nickName',
|
|
|
key: 'nickName',
|
|
|
scopedSlots: { customRender: 'nickName' },
|
|
|
ellipsis: true,
|
|
|
width: 230,
|
|
|
},
|
|
|
// {
|
|
|
// title: '角色',
|
|
|
// dataIndex: 'role',
|
|
|
// key: 'role',
|
|
|
// width: 100,
|
|
|
// ellipsis: true,
|
|
|
// },
|
|
|
{
|
|
|
title: '分组',
|
|
|
dataIndex: 'agencyTeamId',
|
|
|
key: 'agencyTeamId',
|
|
|
width: 100,
|
|
|
filters: this.groupList,
|
|
|
customRender: (text, row, index) => {
|
|
|
let text1
|
|
|
this.groupList.forEach((item) => {
|
|
|
if (item.id == text) {
|
|
|
text1 = item.teamName
|
|
|
}
|
|
|
})
|
|
|
return text1
|
|
|
},
|
|
|
ellipsis: true,
|
|
|
onFilter: (value, record) => {
|
|
|
console.log(value)
|
|
|
console.log(record)
|
|
|
return record.group.indexOf(value) === 0
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '权限',
|
|
|
dataIndex: 'permission',
|
|
|
key: 'permission',
|
|
|
ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
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: 140,
|
|
|
},
|
|
|
]
|
|
|
return columns
|
|
|
},
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
// this.getMemberList();
|
|
|
if (localStorage.getItem('LOGIN_DATA')) {
|
|
|
this.loginUserInfo = JSON.parse(localStorage.getItem('LOGIN_DATA'))
|
|
|
}
|
|
|
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()
|
|
|
}
|
|
|
},
|
|
|
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) => {
|
|
|
console.log(item)
|
|
|
item.role = getAgencyRoleTypeById(item.agencyRole)
|
|
|
item.permission = getAgencyPermissionNameById(item.agencyPermissions)
|
|
|
// })
|
|
|
})
|
|
|
this.pagination.total = data.data.recordCount
|
|
|
}
|
|
|
})
|
|
|
console.log(data)
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
this.isspinning = false
|
|
|
},
|
|
|
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.idEdit) {
|
|
|
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) {
|
|
|
console.log(item)
|
|
|
this.recordId = item.id
|
|
|
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,
|
|
|
})
|
|
|
}, 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: '2',
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
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')
|
|
|
},
|
|
|
})
|
|
|
},
|
|
|
modalCancel() {
|
|
|
// console.log(this);
|
|
|
this.visible = false
|
|
|
this.permission = getAgencyPermissionsByRole()
|
|
|
this.permissionName = getAgencyPermissionNameById(this.permission)
|
|
|
},
|
|
|
handleSubmit() {
|
|
|
console.log('issubmit')
|
|
|
console.log(this.currentMember)
|
|
|
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,
|
|
|
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.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)
|
|
|
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)
|
|
|
},
|
|
|
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()
|
|
|
}
|
|
|
// }
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</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;
|
|
|
/deep/ .searchbox {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 16px;
|
|
|
.searchinput {
|
|
|
// width: 326px;
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
.groupSelect {
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
flex-wrap: wrap;
|
|
|
width: 410px;
|
|
|
margin-left: 20px;
|
|
|
border-radius: 4px;
|
|
|
margin-bottom: 0 !important;
|
|
|
> div {
|
|
|
// width: 60px;
|
|
|
text-align: center;
|
|
|
padding: 5px 12px;
|
|
|
font-size: 14px;
|
|
|
border: 1px solid #eee;
|
|
|
cursor: pointer;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
> div:not(:first-child) {
|
|
|
margin-left: -1px;
|
|
|
// border-left: none;
|
|
|
}
|
|
|
.active {
|
|
|
color: #ff4400;
|
|
|
border: 1px solid #ff4400;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.showGroupSelect {
|
|
|
position: absolute;
|
|
|
right: 12px;
|
|
|
top: 6px;
|
|
|
color: #ff4400;
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
.ant-input {
|
|
|
width: 280px;
|
|
|
position: relative;
|
|
|
height: 32px;
|
|
|
text-indent: 10px;
|
|
|
background: #fff;
|
|
|
// border: 1px solid rgba(77, 87, 94, 0.3);
|
|
|
border-radius: 0px;
|
|
|
box-shadow: 0px 2px 4px 0px transparent;
|
|
|
font-size: 14px !important;
|
|
|
padding-right: 0;
|
|
|
border-color: #ddd;
|
|
|
// z-index: ;
|
|
|
&::placeholder {
|
|
|
text-indent: 10px;
|
|
|
font-size: 14px !important;
|
|
|
}
|
|
|
&:hover {
|
|
|
border-color: #ff4400;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
&:focus {
|
|
|
border-color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
.ant-input-affix-wrapper {
|
|
|
width: unset;
|
|
|
position: relative;
|
|
|
.ant-input-prefix {
|
|
|
position: absolute;
|
|
|
width: 20px;
|
|
|
right: 0;
|
|
|
top: 16px;
|
|
|
i {
|
|
|
color: #c9c9c9;
|
|
|
}
|
|
|
}
|
|
|
.ant-input-suffix {
|
|
|
// position: absolute;
|
|
|
top: 0;
|
|
|
transform: translate(0);
|
|
|
right: 0px !important;
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 70px;
|
|
|
height: 32px;
|
|
|
color: white;
|
|
|
background: #ff4400;
|
|
|
border-color: #ff4400;
|
|
|
border: none;
|
|
|
border-radius: 0px;
|
|
|
font-size: 14px;
|
|
|
box-shadow: none;
|
|
|
cursor: pointer;
|
|
|
outline: none;
|
|
|
&:hover {
|
|
|
background-color: #ff4400cc;
|
|
|
}
|
|
|
// &:focus {
|
|
|
// border: none;
|
|
|
// }
|
|
|
}
|
|
|
}
|
|
|
.addGroup {
|
|
|
// width: 120px;
|
|
|
padding: 0 16px;
|
|
|
height: 32px;
|
|
|
line-height: 30px;
|
|
|
border: 1px solid #cccccc;
|
|
|
// border-radius: 4px;
|
|
|
font-size: 16px;
|
|
|
color: #333;
|
|
|
background-color: #fff;
|
|
|
&:hover {
|
|
|
border-color: #ff4400;
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
&:first-child {
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
}
|
|
|
.pagechange {
|
|
|
// width: 120px;
|
|
|
padding: 0 16px;
|
|
|
height: 32px;
|
|
|
line-height: 30px;
|
|
|
border: 1px solid #f40;
|
|
|
// border-radius: 4px;
|
|
|
font-size: 16px;
|
|
|
color: #fff;
|
|
|
background-color: #ff4400;
|
|
|
&:hover {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
&:first-child {
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/deep/ .ant-table-placeholder {
|
|
|
min-height: 300px;
|
|
|
> div {
|
|
|
position: relative;
|
|
|
height: 131px;
|
|
|
top: 30px;
|
|
|
// transform: translateY(-50%);
|
|
|
}
|
|
|
}
|
|
|
/deep/ .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 #ccc;
|
|
|
padding-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-table-row-cell-break-word {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-tbody {
|
|
|
.ant-table-row-cell-ellipsis {
|
|
|
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) {
|
|
|
padding: 0 9px;
|
|
|
margin: 0 9px;
|
|
|
}
|
|
|
// a:last-child {
|
|
|
// }
|
|
|
.delete {
|
|
|
border-left: 1px solid #979797;
|
|
|
border-right: 1px solid #979797;
|
|
|
}
|
|
|
}
|
|
|
// /deep/ .ant-table-row-cell-break-word {
|
|
|
// padding: 12px 8px !important;
|
|
|
// }
|
|
|
// .addGroupModal {
|
|
|
/deep/ .ant-modal {
|
|
|
.ant-modal-header {
|
|
|
text-align: center;
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
.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: 50px;
|
|
|
width: 50px;
|
|
|
line-height: 50px;
|
|
|
}
|
|
|
.ant-modal-header {
|
|
|
padding: 14px;
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-modal-footer {
|
|
|
padding: 0;
|
|
|
button {
|
|
|
outline: none;
|
|
|
width: 60px;
|
|
|
height: 32px;
|
|
|
font-size: 14px;
|
|
|
border: 1px solid #fff;
|
|
|
border-radius: 5px;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.groupSelectDrop {
|
|
|
.groupSelectSub {
|
|
|
cursor: pointer;
|
|
|
padding: 9px 16px;
|
|
|
&:hover {
|
|
|
> div {
|
|
|
color: #ff4400 !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;
|
|
|
}
|
|
|
</style>
|