CJYXTX\27961
8 months ago
parent
bc77460904
commit
2fbf0c94f6
@ -0,0 +1,29 @@
|
||||
package jnpf.permission.model.user.form;
|
||||
|
||||
import io.swagger.v3.oas.annotations.media.Schema;
|
||||
import lombok.Data;
|
||||
|
||||
import javax.validation.constraints.NotBlank;
|
||||
|
||||
/**
|
||||
*
|
||||
* @author JNPF开发平台组
|
||||
* @version V3.1.0
|
||||
* @copyright 引迈信息技术有限公司
|
||||
* @date 2021/3/12 15:31
|
||||
*/
|
||||
@Data
|
||||
public class UserResetPasswordForgeForm {
|
||||
|
||||
@Schema(description = "用户id")
|
||||
private String id;
|
||||
|
||||
@Schema(description = "新密码，需要 MD5 加密后传输")
|
||||
private String account;
|
||||
@Schema(description = "新密码，需要 MD5 加密后传输")
|
||||
private String userPassword;
|
||||
|
||||
|
||||
@Schema(description = "重复新密码")
|
||||
private String validatePassword;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :title="!dataForm.id ? '新建权限' : '编辑权限'" :close-on-click-modal="false"
|
||||
:visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" v-loading="loading"
|
||||
label-width="100px">
|
||||
<el-form-item label="权限组名称" prop="fullName">
|
||||
<el-input v-model="dataForm.fullName" placeholder="请输入权限组名称" maxlength="100">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限组编码" prop="enCode">
|
||||
<el-input v-model="dataForm.enCode" placeholder="请输入权限组编码" maxlength="50">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sortCode">
|
||||
<el-input-number :min="0" :max="999999" v-model="dataForm.sortCode"
|
||||
controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="enabledMark">
|
||||
<el-switch v-model="dataForm.enabledMark" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="说明" prop="description">
|
||||
<el-input v-model="dataForm.description" placeholder="请输入说明" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAuthorizeInfo, Update, Create } from '@/api/permission/authorize'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
loading: false,
|
||||
btnLoading: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
fullName: '',
|
||||
enCode: '',
|
||||
sortCode: 0,
|
||||
enabledMark: 1,
|
||||
description: ''
|
||||
},
|
||||
dataRule: {
|
||||
fullName: [
|
||||
{ required: true, message: '权限组名称不能为空', trigger: 'blur' },
|
||||
],
|
||||
enCode: [
|
||||
{ required: true, message: '权限组编码不能为空', trigger: 'blur' },
|
||||
{ validator: this.formValidate('enCode'), trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.btnLoading = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
this.loading = true
|
||||
getAuthorizeInfo(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (!valid) return
|
||||
const formMethod = this.dataForm.id ? Update : Create
|
||||
formMethod(this.dataForm).then((res) => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.btnLoading = false
|
||||
this.visible = false
|
||||
this.$emit('close', true)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout">
|
||||
<div class="JNPF-common-layout-center">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="keyword" placeholder="请输入关键词查询" clearable
|
||||
@keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<topOpts @add="addOrUpdateHandle" addText="新建">
|
||||
</topOpts>
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="list">
|
||||
<el-table-column prop="fullName" label="权限组名称" show-overflow-tooltip min-width="200" />
|
||||
<el-table-column prop="enCode" label="权限组编码" width="200" />
|
||||
<el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column prop="sortCode" label="排序" width="70" align="center" />
|
||||
<el-table-column prop="enabledMark" label="状态" width="70" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.enabledMark == 1 ? 'success' : 'danger'" disable-transitions>
|
||||
{{scope.row.enabledMark==1?'启用':'禁用'}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150">
|
||||
<template slot-scope="scope">
|
||||
<tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button type="text" size="mini">{{$t('common.moreBtn')}}<i
|
||||
class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="setUserAuthorize(scope.row.id)">权限成员
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
@click.native="handleAuthorize(scope.row.id,scope.row.fullName)">权限授权
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="copyAuthorize(scope.row.id)">复制权限
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</tableOpts>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage"
|
||||
:limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
</div>
|
||||
</div>
|
||||
<Form v-if="formVisible" ref="form" @close="closeForm" />
|
||||
<userTransfer v-if="userVisible" ref="transfer" :permissionGroupId="authorizeId" multiple
|
||||
@confirm="closeUser" />
|
||||
<AuthorizeForm v-if="authorizeFormVisible" ref="AuthorizeForm" @close="removeAuthorizeForm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAuthorizeList, Delete, CopyPermissions } from '@/api/permission/authorize'
|
||||
import Form from './Form'
|
||||
import userTransfer from './permissionGroup'
|
||||
import AuthorizeForm from './AuthorizeForm'
|
||||
export default {
|
||||
name: 'onlineDev-visualPortal',
|
||||
components: { Form, userTransfer, AuthorizeForm },
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
keyword: '',
|
||||
listQuery: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
},
|
||||
total: 0,
|
||||
drawerVisible: false,
|
||||
listLoading: false,
|
||||
formVisible: false,
|
||||
selectedData: [],
|
||||
authorizeFormVisible: false,
|
||||
authorizeId: '',
|
||||
userVisible: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.keyword = ''
|
||||
this.category = ''
|
||||
this.type = ''
|
||||
this.enabledLock = ''
|
||||
this.search()
|
||||
},
|
||||
search() {
|
||||
this.listQuery = {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
let query = {
|
||||
...this.listQuery,
|
||||
keyword: this.keyword,
|
||||
}
|
||||
getAuthorizeList(query).then(res => {
|
||||
this.list = res.data.list
|
||||
this.total = res.data.pagination.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
copyAuthorize(id) {
|
||||
this.$confirm('您确定要复制该功能权限, 是否继续?', this.$t('common.tipTitle'), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
CopyPermissions(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
});
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
handleDel(id) {
|
||||
this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
Delete(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
});
|
||||
})
|
||||
}).catch(() => { });
|
||||
},
|
||||
addOrUpdateHandle(id) {
|
||||
this.dialogVisible = false
|
||||
this.formVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.init(id)
|
||||
})
|
||||
},
|
||||
closeForm(isRefresh) {
|
||||
this.formVisible = false
|
||||
if (isRefresh) this.initData()
|
||||
},
|
||||
closeUser(isRefresh) {
|
||||
this.userVisible = false
|
||||
if (isRefresh) this.initData()
|
||||
},
|
||||
setUserAuthorize(id) {
|
||||
this.authorizeId = id || ''
|
||||
this.userVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.transfer.init()
|
||||
})
|
||||
},
|
||||
handleAuthorize(id, fullName) {
|
||||
this.authorizeFormVisible = true
|
||||
fullName = '权限授权-' + fullName
|
||||
this.$nextTick(() => {
|
||||
this.$refs.AuthorizeForm.init(id, fullName, 'Role')
|
||||
})
|
||||
},
|
||||
removeAuthorizeForm(isRefresh) {
|
||||
this.authorizeFormVisible = false
|
||||
if (isRefresh) {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="选择用户" :close-on-click-modal="false" :visible.sync="visible"
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" lock-scroll append-to-body
|
||||
width='800px'>
|
||||
<div class="transfer__body" v-loading="allLoading" :style="{height}">
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<el-input placeholder="输入关键词进行搜索" v-model="pagination.keyword"
|
||||
@keyup.enter.native="search" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="transfer-pane__body left-pane">
|
||||
<el-tabs v-model="activeName" class="transfer-pane__body-tab hasSys-tab">
|
||||
<el-tab-pane label="部门" name="department">
|
||||
<el-tree :data="treeData" :props="props" check-on-click-node
|
||||
:expand-on-click-node="false" @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id" v-loading="loading" lazy
|
||||
:load="loadNode" v-if="!this.isAsync">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<div class="single-list" ref="infiniteBody" v-if="this.isAsync"
|
||||
v-loading="loading && pagination.currentPage==1">
|
||||
<template v-if="treeData.length">
|
||||
<div v-for="(item,index) in treeData" :key="index" class="selected-item-user"
|
||||
@click="handleNodeClick(item)">
|
||||
<div class="selected-item-main">
|
||||
<el-avatar :size="36" :src="define.comUrl+item.headIcon"
|
||||
class="selected-item-headIcon">
|
||||
</el-avatar>
|
||||
<div class="selected-item-text">
|
||||
<p class="name">{{item.fullName}}</p>
|
||||
<p class="organize" :title="item.organize">{{item.organize}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色" name="role" v-if="multiple">
|
||||
<el-tree :data="treeData2" :props="props" :expand-on-click-node="false"
|
||||
default-expand-all check-on-click-node @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id" v-loading="roleLoading" ref="roleTree"
|
||||
:filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="岗位" name="position" v-if="multiple">
|
||||
<el-tree :data="treeData3" :props="props" :expand-on-click-node="false"
|
||||
default-expand-all check-on-click-node @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id" v-loading="positionLoading"
|
||||
ref="positionTree" :filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="分组" name="group" v-if="multiple">
|
||||
<el-tree :data="treeData4" :props="props" :expand-on-click-node="false"
|
||||
default-expand-all check-on-click-node @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id" v-loading="groupLoading" ref="groupTree"
|
||||
:filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<span>已选</span>
|
||||
<el-button @click="removeAll" type="text" class="removeAllBtn">清空列表</el-button>
|
||||
</div>
|
||||
<div class="transfer-pane__body shadow right-pane">
|
||||
<template v-if="selectedList.length">
|
||||
<div v-for="(item,index) in selectedList" :key="index"
|
||||
class="selected-item-user-multiple">
|
||||
<template v-if="item.children.length">
|
||||
<p class="selected-item-title">
|
||||
<i :class="item.icon"></i><span>{{item.fullName}}</span>
|
||||
</p>
|
||||
<div class="selected-item-main" v-for="(child,i) in item.children" :key="i">
|
||||
<el-avatar :size="36" :src="define.comUrl+child.headIcon"
|
||||
class="selected-item-headIcon" v-if="child.type==='user'">
|
||||
</el-avatar>
|
||||
<div class="selected-item-icon" v-else>{{child.fullName.substring(0,1)}}</div>
|
||||
<div class="selected-item-text">
|
||||
<p class="name">{{child.fullName}}</p>
|
||||
<p class="organize" :title="child.organize">{{child.organize}}</p>
|
||||
</div>
|
||||
<i class="el-icon-delete delete" @click="removeData(child.id)"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible=false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading"
|
||||
@click="confirm">{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getImUserSelector, getSelectedList } from '@/api/permission/user'
|
||||
import { getPositionSelector } from '@/api/permission/position'
|
||||
import { getRoleSelector } from '@/api/permission/role'
|
||||
import { getGroupSelector } from '@/api/permission/group'
|
||||
import { getPermissionMember, savePermissionMember } from '@/api/permission/authorize'
|
||||
const defaultSelectedList = [
|
||||
{
|
||||
id: "department",
|
||||
type: "department",
|
||||
fullName: "部门",
|
||||
icon: "icon-ym icon-ym-tree-department1",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "position",
|
||||
type: "position",
|
||||
fullName: "岗位",
|
||||
icon: "icon-ym icon-ym-tree-position1",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "user",
|
||||
type: "user",
|
||||
fullName: "用户",
|
||||
icon: "icon-ym icon-ym-tree-user2",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "group",
|
||||
type: "group",
|
||||
fullName: "分组",
|
||||
icon: "icon-ym icon-ym-generator-group1",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: "role",
|
||||
type: "role",
|
||||
fullName: "角色",
|
||||
icon: "icon-ym icon-ym-generator-role",
|
||||
children: []
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'JNPF-userTransfer',
|
||||
data() {
|
||||
return {
|
||||
allLoading: false,
|
||||
loading: false,
|
||||
roleLoading: true,
|
||||
positionLoading: true,
|
||||
groupLoading: true,
|
||||
activeName: '',
|
||||
treeData: [],
|
||||
treeData2: [],
|
||||
treeData3: [],
|
||||
treeData4: [],
|
||||
selectedData: [],
|
||||
props: {
|
||||
children: 'children',
|
||||
label: 'fullName',
|
||||
isLeaf: 'isLeaf'
|
||||
},
|
||||
nodeId: '0',
|
||||
ids: [],
|
||||
total: 0,
|
||||
isAsync: false,
|
||||
finish: false,
|
||||
pagination: {
|
||||
keyword: '',
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
permissionData: [],
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
selectedList: defaultSelectedList
|
||||
}
|
||||
},
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: "400px"
|
||||
},
|
||||
// allLoading: {
|
||||
// type: Boolean,
|
||||
// default: false
|
||||
// },
|
||||
permissionGroupId: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
activeName(val) {
|
||||
this.pagination.keyword = ''
|
||||
this.isAsync = false
|
||||
if (!val) return
|
||||
this.nodeId = '0'
|
||||
this.treeData = []
|
||||
this.getData()
|
||||
},
|
||||
selectedData(val) {
|
||||
if (!this.multiple) return
|
||||
this.selectedList = JSON.parse(JSON.stringify(defaultSelectedList))
|
||||
for (let i = 0; i < this.selectedData.length; i++) {
|
||||
const item = this.selectedData[i];
|
||||
const type = item.type == 'company' ? 'department' : item.type
|
||||
this.selectedList.map(res => {
|
||||
if (res.type == type) {
|
||||
const obj = {
|
||||
fullName: item.fullName,
|
||||
type: type,
|
||||
headIcon: item.headIcon,
|
||||
organize: item.organize,
|
||||
id: item.id
|
||||
}
|
||||
res.children.push(obj)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.visible = true
|
||||
this.getOtherData()
|
||||
this.selectedData = []
|
||||
this.ids = []
|
||||
this.pagination.keyword = ''
|
||||
this.activeName = ''
|
||||
this.nodeId = '0'
|
||||
this.isAsync = false
|
||||
this.finish = false
|
||||
this.$nextTick(() => {
|
||||
this.activeName = 'department'
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
bindScroll() {
|
||||
let _this = this,
|
||||
vBody = _this.$refs.infiniteBody;
|
||||
vBody.addEventListener("scroll", function () {
|
||||
if (vBody.scrollHeight - vBody.clientHeight - vBody.scrollTop <= 200 && !_this.loading && !_this.finish) {
|
||||
_this.pagination.currentPage += 1
|
||||
_this.getList()
|
||||
}
|
||||
});
|
||||
},
|
||||
confirm() {
|
||||
this.btnLoading = true
|
||||
let query = {
|
||||
ids: this.ids,
|
||||
id: this.permissionGroupId
|
||||
}
|
||||
savePermissionMember(query).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.$emit('confirm', true)
|
||||
this.visible = false
|
||||
this.btnLoading = false
|
||||
}
|
||||
})
|
||||
}).catch()
|
||||
},
|
||||
getData() {
|
||||
if (this.activeName === 'department') {
|
||||
this.getList()
|
||||
} else if (['role', 'position', 'group'].includes(this.activeName)) {
|
||||
this.$refs[this.activeName + 'Tree'] && this.$refs[this.activeName + 'Tree'].filter(this.pagination.keyword)
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
getSelectList() {
|
||||
this.allLoading = true
|
||||
if (!this.permissionData.length) return this.allLoading = false
|
||||
getSelectedList(this.permissionData).then(res => {
|
||||
this.selectedData = res.data.list.map(o => ({ ...o, id: o.type ? o.id + '--' + o.type : o.id }))
|
||||
this.ids = this.selectedData.map(o => o.id)
|
||||
this.allLoading = false
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
getPermissionMember(this.permissionGroupId).then(res => {
|
||||
let list = res.data.list || []
|
||||
console.log(res.data.list)
|
||||
this.permissionData = list.map(res => {
|
||||
return res.id + '--' + res.type
|
||||
})
|
||||
this.getSelectList()
|
||||
}).catch(() => { })
|
||||
},
|
||||
getOtherData() {
|
||||
this.roleLoading = true
|
||||
this.positionLoading = true
|
||||
this.groupLoading = true
|
||||
getRoleSelector().then(res => {
|
||||
this.treeData2 = res.data.list
|
||||
this.roleLoading = false
|
||||
})
|
||||
getPositionSelector().then(res => {
|
||||
this.treeData3 = res.data.list
|
||||
this.positionLoading = false
|
||||
})
|
||||
getGroupSelector().then(res => {
|
||||
this.treeData4 = res.data
|
||||
this.groupLoading = false
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.nodeId = '0'
|
||||
this.treeData = []
|
||||
this.pagination.currentPage = 1
|
||||
this.isAsync = !!this.pagination.keyword
|
||||
this.finish = false
|
||||
if (this.isAsync && this.activeName === 'department') {
|
||||
this.$nextTick(() => {
|
||||
this.bindScroll()
|
||||
})
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data[this.props.label].indexOf(value) !== -1;
|
||||
},
|
||||
getList() {
|
||||
this.loading = true
|
||||
if (this.pagination.keyword) this.nodeId = '0'
|
||||
getImUserSelector(this.nodeId, this.pagination).then(res => {
|
||||
if (this.pagination.keyword) {
|
||||
if (res.data.list.length < this.pagination.pageSize) {
|
||||
this.finish = true
|
||||
}
|
||||
this.treeData = [...this.treeData, ...res.data.list]
|
||||
this.total = res.data.pagination.total
|
||||
} else {
|
||||
this.treeData = res.data.list
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
this.nodeId = '0'
|
||||
return resolve(this.treeData)
|
||||
}
|
||||
this.nodeId = node.data.id
|
||||
getImUserSelector(this.nodeId).then(res => {
|
||||
resolve(res.data.list)
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
const usableList = this.multiple ? ['company', 'department', 'role', 'position', 'group', 'user'] : ['user']
|
||||
if (!usableList.includes(data.type)) return
|
||||
const boo = this.selectedData.some(o => o.id === data.id + '--' + data.type)
|
||||
let item = JSON.parse(JSON.stringify(data))
|
||||
item.id += '--' + item.type
|
||||
if (boo) return
|
||||
this.multiple ? this.selectedData.push(item) : this.selectedData = [item]
|
||||
this.multiple ? this.ids.push(item.id) : this.ids = [item.id]
|
||||
this.$emit('input', this.ids)
|
||||
this.$emit('getValue', this.ids, this.selectedData)
|
||||
},
|
||||
removeAll() {
|
||||
this.selectedData = []
|
||||
this.ids = []
|
||||
this.$emit('input', this.ids)
|
||||
this.$emit('getValue', this.ids, this.selectedData)
|
||||
},
|
||||
removeData(id) {
|
||||
const index = this.selectedData.findIndex((item) => {
|
||||
return item.id == id
|
||||
})
|
||||
if (index != -1) {
|
||||
this.selectedData.splice(index, 1)
|
||||
this.ids.splice(index, 1)
|
||||
}
|
||||
this.$emit('input', this.ids)
|
||||
this.$emit('getValue', this.ids, this.selectedData)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div class="popupSelect-container">
|
||||
<div class="el-select" @click.stop="openDialog">
|
||||
<div class="el-select__tags" v-if="multiple" ref="tags"
|
||||
:style="{ 'max-width': inputWidth - 32 + 'px', width: '100%',cursor:'pointer' }">
|
||||
<span v-if="collapseTags && tagsList.length">
|
||||
<el-tag :closable="!selectDisabled" :size="collapseTagSize" type="info"
|
||||
@close="deleteTag($event, 0)" disable-transitions>
|
||||
<span class="el-select__tags-text">{{ tagsList[0].fullName }}</span>
|
||||
</el-tag>
|
||||
<el-tag v-if="tagsList.length > 1" :closable="false" type="info" disable-transitions>
|
||||
<span class="el-select__tags-text">+ {{ tagsList.length - 1 }}</span>
|
||||
</el-tag>
|
||||
</span>
|
||||
<transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
|
||||
<el-tag v-for="(item,i) in tagsList" :key="item.id" :size="collapseTagSize"
|
||||
:closable="!selectDisabled" type="info" @close="deleteTag($event, i)"
|
||||
disable-transitions>
|
||||
<span class="el-select__tags-text">{{ item.fullName }}</span>
|
||||
</el-tag>
|
||||
</transition-group>
|
||||
</div>
|
||||
<el-input ref="reference" v-model="innerValue" type="text" :placeholder="currentPlaceholder"
|
||||
:disabled="selectDisabled" readonly :validate-event="false"
|
||||
:tabindex="(multiple) ? '-1' : null" @mouseenter.native="inputHovering = true"
|
||||
@mouseleave.native="inputHovering = false">
|
||||
<template slot="suffix">
|
||||
<i v-show="!showClose"
|
||||
:class="['el-select__caret', 'el-input__icon', 'el-icon-arrow-up']"></i>
|
||||
<i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close"
|
||||
@click="handleClearClick"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-dialog title="选择用户" :close-on-click-modal="false" :visible.sync="visible"
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" lock-scroll append-to-body
|
||||
width="800px" :modal-append-to-body="false" @close="onClose">
|
||||
<div class="transfer__body">
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<el-input placeholder="请输入关键词查询" v-model="keyword" @keyup.enter.native="getData"
|
||||
clearable class="search-input">
|
||||
<el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="transfer-pane__body">
|
||||
<el-tree :data="treeData" :props="props" check-on-click-node
|
||||
@node-click="handleNodeClick" class="JNPF-common-el-tree" node-key="id"
|
||||
v-loading="loading" lazy :load="loadNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" :title="node.label">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<span>已选</span>
|
||||
<el-button @click="removeAll" type="text" class="removeAllBtn">清空列表</el-button>
|
||||
</div>
|
||||
<div class="transfer-pane__body shadow right-pane">
|
||||
<template v-if="selectedData.length">
|
||||
<div v-for="(item,index) in selectedData" :key="index" class="selected-item-user">
|
||||
<div class="selected-item-main">
|
||||
<el-avatar :size="36" :src="define.comUrl+item.headIcon"
|
||||
class="selected-item-headIcon">
|
||||
</el-avatar>
|
||||
<div class="selected-item-text">
|
||||
<p class="name">{{item.fullName}}
|
||||
<i class="el-icon-delete" @click="removeData(index)"></i>
|
||||
</p>
|
||||
<p class="organize" :title="item.organize">{{item.organize}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible=false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserInfoList, getListByAuthorize } from '@/api/permission/user'
|
||||
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
|
||||
export default {
|
||||
name: 'useSelect',
|
||||
inject: {
|
||||
elForm: {
|
||||
default: ''
|
||||
},
|
||||
elFormItem: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Array],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapseTags: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hasSys: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
keyword: '',
|
||||
activeName: '',
|
||||
nodeId: '',
|
||||
innerValue: '',
|
||||
loading: false,
|
||||
props: {
|
||||
children: 'children',
|
||||
label: 'fullName',
|
||||
isLeaf: 'isLeaf'
|
||||
},
|
||||
treeData: [],
|
||||
treeData2: [],
|
||||
treeData3: [],
|
||||
treeData4: [{
|
||||
id: 'currentUser',
|
||||
fullName: '当前用户'
|
||||
}],
|
||||
selectedData: [],
|
||||
tagsList: [],
|
||||
inputHovering: false,
|
||||
inputWidth: 0,
|
||||
initialInputHeight: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.setDefault()
|
||||
},
|
||||
selectDisabled() {
|
||||
this.$nextTick(() => {
|
||||
this.resetInputHeight();
|
||||
});
|
||||
},
|
||||
activeName(val) {
|
||||
this.keyword = ''
|
||||
if (!val) return
|
||||
this.nodeId = '0'
|
||||
this.treeData = []
|
||||
this.treeData2 = []
|
||||
this.treeData3 = []
|
||||
this.getData()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showClose() {
|
||||
let hasValue = this.multiple
|
||||
? Array.isArray(this.value) && this.value.length > 0
|
||||
: this.value !== undefined && this.value !== null && this.value !== '';
|
||||
let criteria = this.clearable &&
|
||||
!this.selectDisabled &&
|
||||
this.inputHovering &&
|
||||
hasValue;
|
||||
return criteria;
|
||||
},
|
||||
currentPlaceholder() {
|
||||
if (this.multiple && Array.isArray(this.value) && this.value.length) {
|
||||
return ''
|
||||
} else {
|
||||
return this.placeholder
|
||||
}
|
||||
},
|
||||
selectDisabled() {
|
||||
return this.disabled || (this.elForm || {}).disabled;
|
||||
},
|
||||
_elFormItemSize() {
|
||||
return (this.elFormItem || {}).elFormItemSize;
|
||||
},
|
||||
selectSize() {
|
||||
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
},
|
||||
collapseTagSize() {
|
||||
return ['small', 'mini'].indexOf(this.selectSize) > -1
|
||||
? 'mini'
|
||||
: 'small';
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setDefault()
|
||||
},
|
||||
mounted() {
|
||||
addResizeListener(this.$el, this.handleResize);
|
||||
|
||||
const reference = this.$refs.reference;
|
||||
if (reference && reference.$el) {
|
||||
const sizeMap = {
|
||||
medium: 36,
|
||||
small: 32,
|
||||
mini: 28
|
||||
};
|
||||
const input = reference.$el.querySelector('input');
|
||||
this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize];
|
||||
}
|
||||
if (this.multiple) {
|
||||
this.resetInputHeight();
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (reference && reference.$el) {
|
||||
this.inputWidth = reference.$el.getBoundingClientRect().width;
|
||||
}
|
||||
});
|
||||
this.setDefault()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.$el && this.handleResize) removeResizeListener(this.$el, this.handleResize);
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.activeName = ''
|
||||
},
|
||||
openDialog() {
|
||||
if (this.selectDisabled) return
|
||||
this.visible = true
|
||||
this.activeName = 'all'
|
||||
this.keyword = ''
|
||||
this.nodeId = '0'
|
||||
this.selectedData = []
|
||||
this.setDefault()
|
||||
},
|
||||
confirm() {
|
||||
if (this.multiple) {
|
||||
this.innerValue = ''
|
||||
this.tagsList = JSON.parse(JSON.stringify(this.selectedData))
|
||||
let selectedIds = this.selectedData.map(o => o.id)
|
||||
this.$emit('input', selectedIds)
|
||||
this.$emit('change', selectedIds, this.selectedData)
|
||||
} else {
|
||||
if (!this.selectedData.length) {
|
||||
this.innerValue = ''
|
||||
this.$emit('input', '')
|
||||
this.$emit('change', '', {})
|
||||
this.visible = false
|
||||
return
|
||||
}
|
||||
this.innerValue = this.selectedData[0].fullName
|
||||
let selectedIds = this.selectedData.map(o => o.id)
|
||||
this.$emit('input', selectedIds[0])
|
||||
this.$emit('change', selectedIds[0], this.selectedData[0])
|
||||
}
|
||||
this.visible = false
|
||||
},
|
||||
setDefault() {
|
||||
if (!this.value || !this.value.length) {
|
||||
this.innerValue = ''
|
||||
this.selectedData = []
|
||||
this.tagsList = []
|
||||
return
|
||||
}
|
||||
const arr = this.multiple ? this.value : [this.value]
|
||||
const hasSysItem = arr.some(o => o === 'currentUser')
|
||||
getUserInfoList(arr).then(res => {
|
||||
this.selectedData = res.data.list
|
||||
if (hasSysItem) {
|
||||
this.selectedData.push({
|
||||
id: 'currentUser',
|
||||
fullName: '当前用户'
|
||||
})
|
||||
}
|
||||
if (this.multiple) {
|
||||
this.innerValue = ''
|
||||
this.tagsList = JSON.parse(JSON.stringify(this.selectedData))
|
||||
} else {
|
||||
this.innerValue = this.selectedData.length ? this.selectedData[0].fullName : ''
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.multiple) {
|
||||
this.resetInputHeight();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
this.nodeId = '0'
|
||||
this.getAllList()
|
||||
},
|
||||
getAllList() {
|
||||
this.loading = true
|
||||
if (this.keyword) this.nodeId = '0'
|
||||
getListByAuthorize(this.nodeId, this.keyword).then(res => {
|
||||
this.treeData = res.data.list
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
this.nodeId = '0'
|
||||
return resolve(this.treeData)
|
||||
}
|
||||
this.nodeId = node.data.id
|
||||
getListByAuthorize(this.nodeId).then(res => {
|
||||
resolve(res.data.list)
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.type !== 'user') return
|
||||
this.handleNodeClick2(data)
|
||||
},
|
||||
handleNodeClick2(data) {
|
||||
const boo = this.selectedData.some(o => o.id === data.id)
|
||||
if (boo) return
|
||||
this.multiple ? this.selectedData.push(data) : this.selectedData = [data]
|
||||
},
|
||||
removeAll() {
|
||||
this.selectedData = []
|
||||
},
|
||||
removeData(index) {
|
||||
this.selectedData.splice(index, 1)
|
||||
},
|
||||
deleteTag(event, index) {
|
||||
this.selectedData.splice(index, 1)
|
||||
this.confirm()
|
||||
event.stopPropagation();
|
||||
},
|
||||
handleClearClick(event) {
|
||||
this.selectedData = []
|
||||
this.confirm()
|
||||
event.stopPropagation();
|
||||
},
|
||||
resetInputWidth() {
|
||||
this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
|
||||
},
|
||||
handleResize() {
|
||||
this.resetInputWidth();
|
||||
if (this.multiple) this.resetInputHeight();
|
||||
},
|
||||
resetInputHeight() {
|
||||
if (this.collapseTags) return;
|
||||
this.$nextTick(() => {
|
||||
if (!this.$refs.reference) return;
|
||||
let inputChildNodes = this.$refs.reference.$el.childNodes;
|
||||
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
|
||||
const tags = this.$refs.tags;
|
||||
const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
|
||||
const sizeInMap = this.initialInputHeight || 40;
|
||||
input.style.height = this.selectedData.length === 0
|
||||
? sizeInMap + 'px'
|
||||
: Math.max(
|
||||
tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,
|
||||
sizeInMap
|
||||
) + 'px';
|
||||
});
|
||||
},
|
||||
resetInputWidth() {
|
||||
this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
|
||||
},
|
||||
handleResize() {
|
||||
this.resetInputWidth();
|
||||
if (this.multiple) this.resetInputHeight();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout JNPF-flex-main">
|
||||
<div class="JNPF-common-layout-center">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('common.keyword')">
|
||||
<el-input v-model="keyword" :placeholder="$t('common.enterKeyword')" clearable
|
||||
@keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<topOpts @add="addOrUpdateHandle()"></topOpts>
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="list">
|
||||
<el-table-column prop="account" label="账号" width="100" />
|
||||
<el-table-column prop="realName" label="姓名" width="100" />
|
||||
<el-table-column prop="gender" label="性别" width="90" align="center">
|
||||
<template slot-scope="scope" sortable>
|
||||
<span>{{ scope.row.gender ==1 ? '男': ( scope.row.gender == 2 ? '女' : '保密') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobilePhone" label="手机" width="120" />
|
||||
<el-table-column prop="organizeId" label="所属组织" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
|
||||
</tableOpts>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage"
|
||||
:limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
</div>
|
||||
<Form v-if="formVisible" ref="Form" @refreshDataList="initData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGradeManageList, delGradeManage } from '@/api/permission/gradeManage'
|
||||
import Form from './Form'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Form
|
||||
},
|
||||
name: 'permission-grade',
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
categoryList: [],
|
||||
keyword: '',
|
||||
listQuery: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
},
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
formVisible: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.keyword = ''
|
||||
this.search()
|
||||
},
|
||||
search() {
|
||||
this.listQuery = {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
let query = {
|
||||
...this.listQuery,
|
||||
keyword: this.keyword
|
||||
}
|
||||
getGradeManageList(query).then(res => {
|
||||
this.list = res.data.list
|
||||
this.total = res.data.pagination.total
|
||||
this.listLoading = false
|
||||
}).catch(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
addOrUpdateHandle(id) {
|
||||
this.formVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Form.init(id)
|
||||
})
|
||||
},
|
||||
handleDel(id) {
|
||||
this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delGradeManage(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout JNPF-flex-main">
|
||||
<div class="JNPF-common-layout-center">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('common.keyword')">
|
||||
<el-input v-model="keyword" :placeholder="$t('common.enterKeyword')" clearable
|
||||
@keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<topOpts @add="addOrUpdateHandle()"></topOpts>
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="list">
|
||||
<el-table-column prop="fullName" label="分组名称" width="200" />
|
||||
<el-table-column prop="enCode" label="分组编码" width="150" />
|
||||
<el-table-column prop="type" label="分组类型" width="150" />
|
||||
<el-table-column prop="description" label="说明" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column prop="enabledMark" label="状态" width="70" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.enabledMark == 1 ? 'success' : 'danger'" disable-transitions>
|
||||
{{scope.row.enabledMark==1?'启用':'禁用'}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sortCode" label="排序" width="70" align="center" />
|
||||
<el-table-column label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
|
||||
<el-dropdown hide-on-click>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button type="text" size="mini">
|
||||
{{$t('common.moreBtn')}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@click.native="handleUserRelation(scope.row.id, scope.row.fullName)">
|
||||
组内成员
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</tableOpts>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage"
|
||||
:limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
</div>
|
||||
<Form v-if="formVisible" ref="Form" @refreshDataList="initData" />
|
||||
<UserRelationList v-if="userRelationListVisible" ref="UserRelationList"
|
||||
@refreshDataList="initData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGroupList, delGroup } from '@/api/permission/group'
|
||||
import Form from './Form'
|
||||
import UserRelationList from '@/views/permission/userRelation/Selector'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Form,
|
||||
UserRelationList
|
||||
},
|
||||
name: 'permission-group',
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
categoryList: [],
|
||||
keyword: '',
|
||||
listQuery: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
},
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
formVisible: false,
|
||||
userRelationListVisible: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.keyword = ''
|
||||
this.search()
|
||||
},
|
||||
search() {
|
||||
this.listQuery = {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
let query = {
|
||||
...this.listQuery,
|
||||
keyword: this.keyword
|
||||
}
|
||||
getGroupList(query).then(res => {
|
||||
this.list = res.data.list
|
||||
this.total = res.data.pagination.total
|
||||
this.listLoading = false
|
||||
}).catch(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
addOrUpdateHandle(id) {
|
||||
this.formVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Form.init(id)
|
||||
})
|
||||
},
|
||||
removeUserRelationList(isRefresh) {
|
||||
this.userRelationListVisible = false
|
||||
if (isRefresh) {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
handleDel(id) {
|
||||
this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delGroup(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.$store.commit('generator/SET_GROUP_TREE', [])
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleUserRelation(id, fullName) {
|
||||
this.userRelationListVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.UserRelationList.init(id, fullName, 'Group')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible"
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" lock-scroll append-to-body width="600px"
|
||||
:modal-append-to-body="false">
|
||||
<div class="transfer__body">
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<el-input placeholder="请输入关键词查询" v-model="listQuery.keyword" @keyup.enter.native="search"
|
||||
clearable class="search-input">
|
||||
<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="transfer-pane__body shadow right-pane"
|
||||
v-loading="loading && listQuery.currentPage==1" ref="list">
|
||||
<template v-if="list.length">
|
||||
<div v-for="(item,index) in list" :key="index" class="selected-item-user">
|
||||
<div class="selected-item-main">
|
||||
<el-avatar :size="36" :src="define.comUrl+item.headIcon"
|
||||
class="selected-item-headIcon">
|
||||
</el-avatar>
|
||||
<div class="selected-item-text">
|
||||
<p class="name">{{item.realName}}/{{item.account}}
|
||||
</p>
|
||||
<p class="organize" :title="item.organize">{{item.organize}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getUserList
|
||||
} from '@/api/permission/user'
|
||||
import { removeResizeListener } from 'element-ui/src/utils/resize-event';
|
||||
export default {
|
||||
name: 'useSelect',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
title: '',
|
||||
list: [],
|
||||
listQuery: {
|
||||
organizeId: '',
|
||||
keyword: '',
|
||||
currentPage: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
finish: false,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.$el && this.handleResize) removeResizeListener(this.$el, this.handleResize);
|
||||
},
|
||||
methods: {
|
||||
init(id, name) {
|
||||
this.visible = true
|
||||
this.list = []
|
||||
this.title = '查看成员 - ' + name || ''
|
||||
this.listQuery.organizeId = id
|
||||
this.listQuery.keyword = ''
|
||||
this.listQuery.currentPage = 1
|
||||
this.finish = false
|
||||
this.loading = false
|
||||
this.initData()
|
||||
this.$nextTick(() => {
|
||||
this.bindScroll()
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.list = []
|
||||
this.finish = false
|
||||
this.loading = false
|
||||
this.listQuery.currentPage = 1
|
||||
this.listQuery.sort = 'desc'
|
||||
this.initData()
|
||||
},
|
||||
reset() {
|
||||
this.listQuery.keyword = ''
|
||||
this.search()
|
||||
},
|
||||
initData() {
|
||||
this.loading = true
|
||||
getUserList(this.listQuery).then(res => {
|
||||
if (res.data.list.length < this.listQuery.pageSize) this.finish = true
|
||||
this.list = [...this.list, ...res.data.list]
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
bindScroll() {
|
||||
let _this = this,
|
||||
vBody = _this.$refs.list;
|
||||
vBody.addEventListener("scroll", function () {
|
||||
if (vBody.scrollHeight - vBody.clientHeight - vBody.scrollTop <= 200 && !_this.loading && !_this.finish) {
|
||||
_this.listQuery.currentPage += 1
|
||||
_this.initData()
|
||||
}
|
||||
});
|
||||
},
|
||||
confirm() {
|
||||
this.visible = false
|
||||
},
|
||||
handleResize() {
|
||||
this.resetInputWidth();
|
||||
if (this.multiple) this.resetInputHeight();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
>>> .transfer__body {
|
||||
line-height: 32px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
margin-top: -10px;
|
||||
height: 400px;
|
||||
}
|
||||
.transfer__body .transfer-pane {
|
||||
width: 570px;
|
||||
}
|
||||
.transfer__body .selected-item-user .selected-item-text {
|
||||
width: 480px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.JNPF-dialog.JNPF-dialog_center .el-dialog .el-dialog__body {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 90vh;
|
||||
padding: 20px 50px 2px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout">
|
||||
<div class="JNPF-common-layout-left">
|
||||
<div class="JNPF-common-title">
|
||||
<h2>{{$t('common.organization')}}</h2>
|
||||
<span class="options">
|
||||
<el-dropdown>
|
||||
<el-link icon="icon-ym icon-ym-mpMenu" :underline="false" />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="getOrganizeList()">刷新数据</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toggleExpand(true)">展开全部</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toggleExpand(false)">折叠全部</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="showDiagram">架构图</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</div>
|
||||
<div class="JNPF-common-tree-search-box">
|
||||
<el-input placeholder="输入关键字" v-model="filterText" suffix-icon="el-icon-search" clearable />
|
||||
</div>
|
||||
<el-scrollbar class="JNPF-common-el-tree-scrollbar" v-loading="treeLoading">
|
||||
<el-tree ref="treeBox" :data="treeData" :props="defaultProps" :default-expand-all="expands"
|
||||
highlight-current :expand-on-click-node="false" node-key="id"
|
||||
@node-click="handleNodeClick" class="JNPF-common-el-tree" v-if="refreshTree"
|
||||
:filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ data }" :title="data.fullName">
|
||||
<i :class="data.icon" />
|
||||
<span class="text" :title="data.fullName">{{data.fullName}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="JNPF-common-layout-center JNPF-flex-main">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('common.keyword')">
|
||||
<el-input v-model="listQuery.keyword" :placeholder="$t('common.enterKeyword')"
|
||||
clearable @keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<topOpts @add="addOrUpdateHandle()" />
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="tableData">
|
||||
<el-table-column prop="fullName" label="岗位名称" width="200" />
|
||||
<el-table-column prop="enCode" label="岗位编码" width="150" />
|
||||
<el-table-column prop="type" label="岗位类型" width="100" />
|
||||
<el-table-column prop="department" label="所属组织" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorTime" :formatter="jnpf.tableDateFormat" label="创建时间"
|
||||
width="120" />
|
||||
<el-table-column prop="sortCode" label="排序" width="70" align="center" />
|
||||
<el-table-column label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
|
||||
<el-dropdown hide-on-click>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button type="text" size="mini">
|
||||
{{$t('common.moreBtn')}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@click.native="handleUserRelation(scope.row.id, scope.row.fullName)">
|
||||
{{$t('position.postMember')}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</tableOpts>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage"
|
||||
:limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
</div>
|
||||
</div>
|
||||
<Form v-if="formVisible" ref="Form" @refreshDataList="initData" />
|
||||
<Diagram v-if="diagramVisible" ref="Diagram" @close="diagramVisible = false" />
|
||||
<UserRelationList v-if="userRelationListVisible" ref="UserRelationList"
|
||||
@refreshDataList="getOrganizeList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDepartmentSelectorByAuth } from '@/api/permission/department'
|
||||
import { getPositionList, delPosition } from '@/api/permission/position'
|
||||
import Form from './Form'
|
||||
import Diagram from '@/views/permission/user/Diagram'
|
||||
import UserRelationList from './userRelation'
|
||||
|
||||
export default {
|
||||
name: 'permission-position',
|
||||
components: { Form, UserRelationList, Diagram },
|
||||
data() {
|
||||
return {
|
||||
treeData: [],
|
||||
tableData: [],
|
||||
treeLoading: false,
|
||||
listLoading: false,
|
||||
authorizeFormVisible: false,
|
||||
userRelationListVisible: false,
|
||||
organizeIdTree: [],
|
||||
listQuery: {
|
||||
organizeId: '',
|
||||
keyword: '',
|
||||
currentPage: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'fullName'
|
||||
},
|
||||
total: 0,
|
||||
diagramVisible: false,
|
||||
formVisible: false,
|
||||
expands: true,
|
||||
refreshTree: true,
|
||||
filterText: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.treeBox.filter(val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrganizeList(true)
|
||||
},
|
||||
methods: {
|
||||
showDiagram() {
|
||||
this.diagramVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Diagram.init()
|
||||
})
|
||||
},
|
||||
toggleExpand(expands) {
|
||||
this.filterText = ''
|
||||
this.refreshTree = false
|
||||
this.expands = expands
|
||||
this.$nextTick(() => {
|
||||
this.refreshTree = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.treeBox.setCurrentKey(this.companyId)
|
||||
})
|
||||
})
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.fullName.indexOf(value) !== -1;
|
||||
},
|
||||
getOrganizeList(isInit) {
|
||||
this.filterText = ''
|
||||
this.treeLoading = true
|
||||
getDepartmentSelectorByAuth().then(res => {
|
||||
this.treeData = res.data.list
|
||||
this.$nextTick(() => {
|
||||
this.treeLoading = false
|
||||
if (isInit) this.initData()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.treeLoading = false
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
getPositionList(this.listQuery).then(res => {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.pagination.total
|
||||
this.listLoading = false
|
||||
}).catch(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.listQuery = {
|
||||
...this.listQuery,
|
||||
currentPage: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
reset() {
|
||||
this.listQuery.keyword = ''
|
||||
this.search()
|
||||
},
|
||||
handleNodeClick(data, node) {
|
||||
if (this.listQuery.organizeId === data.id) return
|
||||
this.listQuery.organizeId = data.id
|
||||
const nodePath = this.getNodePath(node)
|
||||
this.organizeIdTree = nodePath.map(o => o.id)
|
||||
this.reset()
|
||||
},
|
||||
getNodePath(node) {
|
||||
let fullPath = []
|
||||
const loop = (node) => {
|
||||
if (node.level) fullPath.unshift(node.data)
|
||||
if (node.parent) loop(node.parent)
|
||||
}
|
||||
loop(node)
|
||||
return fullPath
|
||||
},
|
||||
addOrUpdateHandle(id) {
|
||||
this.formVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Form.init(id, this.listQuery.organizeId, this.organizeIdTree)
|
||||
})
|
||||
},
|
||||
removeUserRelationList(isRefresh) {
|
||||
this.userRelationListVisible = false
|
||||
if (isRefresh) {
|
||||
this.keyword = ''
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
removeAuthorizeForm(isRefresh) {
|
||||
this.authorizeFormVisible = false
|
||||
if (isRefresh) {
|
||||
this.keyword = ''
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
handleDel(id) {
|
||||
this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delPosition(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleUserRelation(id, fullName) {
|
||||
this.userRelationListVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.UserRelationList.init(id, fullName)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<el-dialog :title="pageTitle" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="visible" lock-scroll append-to-body
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" width="800px">
|
||||
<div class="transfer__body" v-loading="allLoading">
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<el-input placeholder="请输入关键词查询" v-model="keyword" @keyup.enter.native="search" clearable
|
||||
class="search-input">
|
||||
<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="transfer-pane__body left-pane">
|
||||
<el-tree :data="treeData" :props="props" check-on-click-node @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id" v-loading="loading" default-expand-all
|
||||
:filter-node-method="filterNode" ref="tree">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<span>已选</span>
|
||||
<el-button @click="removeAll" type="text" class="removeAllBtn">清空列表</el-button>
|
||||
</div>
|
||||
<div class="transfer-pane__body shadow right-pane">
|
||||
<template v-if="selectedData.length">
|
||||
<div v-for="(item,index) in selectedData" :key="index" class="selected-item-user">
|
||||
<div class="selected-item-main">
|
||||
<el-avatar :size="36" :src="define.comUrl+item.headIcon"
|
||||
class="selected-item-headIcon">
|
||||
</el-avatar>
|
||||
<div class="selected-item-text">
|
||||
<p class="name">{{item.fullName}}</p>
|
||||
<p class="organize" :title="item.organize">{{item.organize}}</p>
|
||||
</div>
|
||||
<i class="el-icon-delete" @click="removeData(index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserRelationList, createUserRelation } from '@/api/permission/userRelation'
|
||||
import { getUserInfoList, getUsersByPositionId } from '@/api/permission/user'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
loading: false,
|
||||
btnLoading: false,
|
||||
allLoading: false,
|
||||
pageTitle: '',
|
||||
dataForm: {
|
||||
objectId: '',
|
||||
objectType: 'Position',
|
||||
userIds: []
|
||||
},
|
||||
treeData: [],
|
||||
selectedData: [],
|
||||
keyword: '',
|
||||
props: {
|
||||
children: 'children',
|
||||
label: 'fullName',
|
||||
isLeaf: 'isLeaf'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, fullName) {
|
||||
this.visible = true
|
||||
this.dataForm.objectId = id
|
||||
this.dataForm.userIds = []
|
||||
this.list = []
|
||||
this.selectedData = []
|
||||
this.keyword = ''
|
||||
this.$nextTick(() => {
|
||||
this.pageTitle = this.$t(`position.postMember`) + ' - ' + fullName
|
||||
this.allLoading = true
|
||||
this.initData()
|
||||
getUserRelationList(this.dataForm.objectId).then(res => {
|
||||
this.dataForm.userIds = res.data.ids
|
||||
this.getSelectList()
|
||||
})
|
||||
})
|
||||
},
|
||||
getSelectList() {
|
||||
if (!this.dataForm.userIds.length) return this.allLoading = false
|
||||
getUserInfoList(this.dataForm.userIds).then(res => {
|
||||
this.selectedData = res.data.list
|
||||
this.allLoading = false
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.$refs.tree && this.$refs.tree.filter(this.keyword)
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data[this.props.label].indexOf(value) !== -1;
|
||||
},
|
||||
initData() {
|
||||
this.loading = true
|
||||
getUsersByPositionId({ positionId: this.dataForm.objectId }).then(res => {
|
||||
this.treeData = res.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.type !== 'user') return
|
||||
const boo = this.selectedData.some(o => o.id === data.id)
|
||||
if (boo) return
|
||||
this.selectedData.push(data)
|
||||
},
|
||||
removeAll() {
|
||||
this.selectedData = []
|
||||
},
|
||||
removeData(index) {
|
||||
this.selectedData.splice(index, 1)
|
||||
},
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
this.dataForm.userIds = this.selectedData.map(o => o.id)
|
||||
createUserRelation(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.btnLoading = false
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout">
|
||||
<div class="JNPF-common-layout-left">
|
||||
<div class="JNPF-common-title">
|
||||
<h2>{{$t('common.organization')}}</h2>
|
||||
<span class="options">
|
||||
<el-dropdown>
|
||||
<el-link icon="icon-ym icon-ym-mpMenu" :underline="false" />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="getOrganizeList()">刷新数据</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toggleExpand(true)">展开全部</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toggleExpand(false)">折叠全部</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="showDiagram">架构图</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</div>
|
||||
<div class="JNPF-common-tree-search-box">
|
||||
<el-input placeholder="输入关键字" v-model="filterText" suffix-icon="el-icon-search" clearable />
|
||||
</div>
|
||||
<el-scrollbar class="JNPF-common-el-tree-scrollbar" v-loading="treeLoading">
|
||||
<el-tree ref="treeBox" :data="treeData" :props="defaultProps" :default-expand-all="expands"
|
||||
highlight-current :expand-on-click-node="false" node-key="id"
|
||||
@node-click="handleNodeClick" class="JNPF-common-el-tree" v-if="refreshTree"
|
||||
:filter-node-method="filterNode">
|
||||
<span class=" custom-tree-node" slot-scope="{ data }" :title="data.fullName">
|
||||
<i :class="data.icon" />
|
||||
<span class="text" :title="data.fullName">{{data.fullName}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="JNPF-common-layout-center">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('common.keyword')">
|
||||
<el-input v-model="listQuery.keyword" :placeholder="$t('common.enterKeyword')"
|
||||
clearable @keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<topOpts @add="addOrUpdateHandle()"></topOpts>
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="list">
|
||||
<el-table-column prop="fullName" label="角色名称" width="200" />
|
||||
<el-table-column prop="enCode" label="角色编码" width="150" />
|
||||
<el-table-column prop="type" label="角色类型" width="70" align="center" />
|
||||
<el-table-column prop="organizeInfo" label="所属组织" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column prop="sortCode" label="排序" width="70" align="center" />
|
||||
<el-table-column prop="enabledMark" label="状态" width="70" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.enabledMark == 1 ? 'success' : 'danger'" disable-transitions>
|
||||
{{scope.row.enabledMark==1?'启用':'禁用'}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
|
||||
<el-dropdown hide-on-click>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button type="text" size="mini">
|
||||
{{$t('common.moreBtn')}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleUserRelation(scope.row)">
|
||||
{{$t('role.roleMember')}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</tableOpts>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage"
|
||||
:limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
</div>
|
||||
<Form v-if="formVisible" ref="Form" @refreshDataList="initData" />
|
||||
<Diagram v-if="diagramVisible" ref="Diagram" @close="diagramVisible = false" />
|
||||
<component :is="currentView" v-if="userRelationListVisible" ref="UserRelationList"
|
||||
@refreshDataList="initData" @closeDialog="userRelationListVisible=false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDepartmentSelectorByAuth } from '@/api/permission/department'
|
||||
import { getRoleList, delRole, updateRoleState } from '@/api/permission/role'
|
||||
import Form from './Form'
|
||||
import UserRelationList from './userRelation'
|
||||
import GlobalUserRelationList from '@/views/permission/userRelation/Selector'
|
||||
import Diagram from '@/views/permission/user/Diagram'
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
components: { Form, UserRelationList, GlobalUserRelationList, Diagram },
|
||||
name: 'permission-role',
|
||||
data() {
|
||||
return {
|
||||
treeData: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'fullName'
|
||||
},
|
||||
list: [],
|
||||
listQuery: {
|
||||
organizeId: '',
|
||||
keyword: '',
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
},
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
treeLoading: false,
|
||||
formVisible: false,
|
||||
diagramVisible: false,
|
||||
userRelationListVisible: false,
|
||||
currentView: null,
|
||||
expands: true,
|
||||
refreshTree: true,
|
||||
filterText: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.treeBox.filter(val)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
created() {
|
||||
this.getOrganizeList(true)
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.listQuery.keyword = ''
|
||||
this.search()
|
||||
},
|
||||
search() {
|
||||
this.listQuery = {
|
||||
...this.listQuery,
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
sort: 'desc',
|
||||
sidx: ''
|
||||
}
|
||||
this.initData()
|
||||
},
|
||||
showDiagram() {
|
||||
this.diagramVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Diagram.init()
|
||||
})
|
||||
},
|
||||
toggleExpand(expands) {
|
||||
this.filterText = ''
|
||||
this.refreshTree = false
|
||||
this.expands = expands
|
||||
this.$nextTick(() => {
|
||||
this.refreshTree = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.treeBox.setCurrentKey(this.companyId)
|
||||
})
|
||||
})
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.fullName.indexOf(value) !== -1;
|
||||
},
|
||||
getOrganizeList(isInit) {
|
||||
this.filterText = ''
|
||||
this.treeLoading = true
|
||||
getDepartmentSelectorByAuth().then(res => {
|
||||
if (this.userInfo.isAdministrator) {
|
||||
let globalItem = {
|
||||
fullName: "全局",
|
||||
hasChildren: false,
|
||||
id: "0",
|
||||
parentId: "-1",
|
||||
icon: 'icon-ym icon-ym-global-role'
|
||||
}
|
||||
this.treeData = [...res.data.list, globalItem]
|
||||
} else {
|
||||
this.treeData = res.data.list || []
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.treeLoading = false
|
||||
if (isInit) this.initData()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.treeLoading = false
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
getRoleList(this.listQuery).then(res => {
|
||||
this.list = res.data.list
|
||||
this.total = res.data.pagination.total
|
||||
this.listLoading = false
|
||||
}).catch(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
addOrUpdateHandle(id) {
|
||||
this.formVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Form.init(id)
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (this.listQuery.organizeId === data.id) return
|
||||
this.listQuery.organizeId = data.id
|
||||
this.reset()
|
||||
},
|
||||
removeUserRelationList(isRefresh) {
|
||||
this.userRelationListVisible = false
|
||||
if (isRefresh) {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
handleUpdateState(row) {
|
||||
const txt = row.enabledMark ? '禁用' : '开启'
|
||||
this.$confirm(`您确定要${txt}当前角色吗, 是否继续?`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updateRoleState(row.id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
onClose: () => {
|
||||
row.enabledMark = row.enabledMark ? 0 : 1
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleDel(id) {
|
||||
this.$confirm(this.$t('common.delTip'), this.$t('common.tipTitle'), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delRole(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleUserRelation(row) {
|
||||
this.currentView = row.type === '全局' ? GlobalUserRelationList : UserRelationList
|
||||
this.$nextTick(() => {
|
||||
this.userRelationListVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.UserRelationList.init(row.id, row.fullName, 'Role')
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<el-dialog :title="pageTitle" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="visible" lock-scroll append-to-body
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" width="800px">
|
||||
<div class="transfer__body" v-loading="allLoading">
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<el-input placeholder="请输入关键词查询" v-model="keyword" @keyup.enter.native="search" clearable
|
||||
class="search-input">
|
||||
<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="transfer-pane__body left-pane">
|
||||
<el-tree :data="treeData" :props="props" check-on-click-node @node-click="handleNodeClick"
|
||||
class="JNPF-common-el-tree" node-key="id" v-loading="loading" lazy :load="loadNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" :title="node.label">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-pane">
|
||||
<div class="transfer-pane__tools">
|
||||
<span>已选</span>
|
||||
<el-button @click="removeAll" type="text" class="removeAllBtn">清空列表</el-button>
|
||||
</div>
|
||||
<div class="transfer-pane__body shadow right-pane">
|
||||
<template v-if="selectedData.length">
|
||||
<div v-for="(item,index) in selectedData" :key="index" class="selected-item-user">
|
||||
<div class="selected-item-main">
|
||||
<el-avatar :size="36" :src="define.comUrl+item.headIcon"
|
||||
class="selected-item-headIcon">
|
||||
</el-avatar>
|
||||
<div class="selected-item-text">
|
||||
<p class="name">{{item.fullName}}</p>
|
||||
<p class="organize" :title="item.organize">{{item.organize}}</p>
|
||||
</div>
|
||||
<i class="el-icon-delete" @click="removeData(index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserRelationList, createUserRelation } from '@/api/permission/userRelation'
|
||||
import { getUserInfoList, getUsersByRoleId, getUsersByRoleOrgId } from '@/api/permission/user'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
allLoading: false,
|
||||
pageTitle: '',
|
||||
dataForm: {
|
||||
objectId: '',
|
||||
objectType: 'Role',
|
||||
userIds: []
|
||||
},
|
||||
selectedData: [],
|
||||
treeData: [],
|
||||
nodeId: '0',
|
||||
props: {
|
||||
children: 'children',
|
||||
label: 'fullName',
|
||||
isLeaf: 'isLeaf'
|
||||
},
|
||||
keyword: '',
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) return
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, fullName) {
|
||||
this.visible = true
|
||||
this.dataForm.objectId = id
|
||||
this.dataForm.userIds = []
|
||||
this.selectedData = []
|
||||
this.$nextTick(() => {
|
||||
this.pageTitle = this.$t(`role.roleMember`) + ' - ' + fullName
|
||||
this.allLoading = true
|
||||
this.initData()
|
||||
getUserRelationList(this.dataForm.objectId).then(res => {
|
||||
this.dataForm.userIds = res.data.ids
|
||||
this.getSelectList()
|
||||
})
|
||||
})
|
||||
},
|
||||
getSelectList() {
|
||||
if (!this.dataForm.userIds.length) return this.allLoading = false
|
||||
getUserInfoList(this.dataForm.userIds).then(res => {
|
||||
this.selectedData = res.data.list
|
||||
this.allLoading = false
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.nodeId = '0'
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.loading = true
|
||||
if (this.keyword) this.nodeId = '0'
|
||||
const query = {
|
||||
keyword: this.keyword,
|
||||
organizeId: this.nodeId,
|
||||
roleId: this.dataForm.objectId
|
||||
}
|
||||
getUsersByRoleOrgId(query).then(res => {
|
||||
this.treeData = res.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
loadNode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
this.nodeId = '0'
|
||||
return resolve(this.treeData)
|
||||
}
|
||||
this.nodeId = node.data.id
|
||||
const query = {
|
||||
keyword: this.keyword,
|
||||
organizeId: this.nodeId,
|
||||
roleId: this.dataForm.objectId
|
||||
}
|
||||
getUsersByRoleOrgId(query).then(res => {
|
||||
resolve(res.data)
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.type !== 'user') return
|
||||
const boo = this.selectedData.some(o => o.id === data.id)
|
||||
if (boo) return
|
||||
this.selectedData.push(data)
|
||||
},
|
||||
removeAll() {
|
||||
this.selectedData = []
|
||||
},
|
||||
removeData(index) {
|
||||
this.selectedData.splice(index, 1)
|
||||
},
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
this.dataForm.userIds = this.selectedData.map(o => o.id)
|
||||
createUserRelation(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.btnLoading = false
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="JNPF-preview-main user-form">
|
||||
<div class="JNPF-common-page-header">
|
||||
<el-page-header @back="goBack" content="组织架构图" />
|
||||
<div class="options">
|
||||
<el-button @click="goBack">{{$t('common.cancelButton')}} </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" v-loading="loading">
|
||||
<organization-chart :datasource="ds"></organization-chart>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDepartmentSelector } from '@/api/permission/department'
|
||||
import OrganizationChart from 'vue-organization-chart'
|
||||
import 'vue-organization-chart/dist/orgchart.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
OrganizationChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
ds: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.loading = true
|
||||
getDepartmentSelector().then(res => {
|
||||
let data = res.data.list
|
||||
let _this = this
|
||||
const loop = list => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
_this.$set(list[i], 'name', list[i].fullName)
|
||||
if (list[i].children && Array.isArray(list[i].children) && list[i].children.length) {
|
||||
loop(list[i].children)
|
||||
}
|
||||
}
|
||||
}
|
||||
loop(data)
|
||||
this.$nextTick(() => {
|
||||
if (data.length >= 1) {
|
||||
data = {
|
||||
name: '组织架构图',
|
||||
children: data
|
||||
}
|
||||
}
|
||||
this.ds = data
|
||||
this.loading = false
|
||||
})
|
||||
}).catch(() => { this.loading = false })
|
||||
},
|
||||
goBack() {
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
>>> .orgchart-container {
|
||||
height: 100%;
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
.orgchart {
|
||||
background: none !important;
|
||||
padding: 0;
|
||||
.node {
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.title {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
.content {
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orgchart .lines {
|
||||
.rightLine {
|
||||
border-right: 1px solid #1890ff;
|
||||
}
|
||||
.leftLine {
|
||||
border-left: 1px solid #1890ff;
|
||||
}
|
||||
.topLine {
|
||||
border-top: 2px solid #1890ff;
|
||||
}
|
||||
.downLine {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<el-dialog title="导出数据" :close-on-click-modal="false" :visible.sync="visible"
|
||||
class="JNPF-dialog JNPF-dialog_center JNPF-dialog-export" lock-scroll width="600px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="type">
|
||||
<el-radio :label="0">当前页面数据</el-radio>
|
||||
<el-radio :label="1">全部页面数据</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item class="export-line">
|
||||
<p slot="label" class="export-label">列表数据<span>请选择导出字段</span></p>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
|
||||
@change="handleCheckAllChange">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="columns" @change="handleCheckedChange">
|
||||
<el-checkbox v-for="item in columnList" :label="item.prop" :key="item.prop"
|
||||
class="column-item">
|
||||
{{item.label}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<p class="footer-tip">提示:系统将导出列表中选中的数据</p>
|
||||
<el-button @click="visible=false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" @click="downLoad" :loading="btnLoading">导 出</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ExportExcel } from '@/api/permission/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
type: 0,
|
||||
columns: [],
|
||||
columnList: [
|
||||
{ label: "账户", prop: "account" },
|
||||
{ label: "姓名", prop: "realName" },
|
||||
{ label: "性别", prop: "gender" },
|
||||
{ label: "电子邮箱", prop: "email" },
|
||||
{ label: "所属组织", prop: "organizeId" },
|
||||
{ label: "直属主管", prop: "managerId" },
|
||||
{ label: "岗位", prop: "positionId" },
|
||||
{ label: "角色", prop: "roleId" },
|
||||
{ label: "排序", prop: "sortCode" },
|
||||
{ label: "状态", prop: "enabledMark" },
|
||||
{ label: "说明", prop: "description" },
|
||||
{ label: "民族", prop: "nation" },
|
||||
{ label: "籍贯", prop: "nativePlace" },
|
||||
{ label: "入职时间", prop: "entryDate" },
|
||||
{ label: "证件类型", prop: "certificatesType" },
|
||||
{ label: "证件号码", prop: "certificatesNumber" },
|
||||
{ label: "文化程度", prop: "education" },
|
||||
{ label: "出生年月", prop: "birthday" },
|
||||
{ label: "办公电话", prop: "telePhone" },
|
||||
{ label: "办公座机", prop: "landline" },
|
||||
{ label: "手机号码", prop: "mobilePhone" },
|
||||
{ label: "紧急联系", prop: "urgentContacts" },
|
||||
{ label: "紧急电话", prop: "urgentTelePhone" },
|
||||
{ label: "通讯地址", prop: "postalAddress" }
|
||||
],
|
||||
listQuery: {},
|
||||
checkAll: true,
|
||||
isIndeterminate: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(listQuery) {
|
||||
this.visible = true
|
||||
this.checkAll = true
|
||||
this.isIndeterminate = false
|
||||
this.btnLoading = false
|
||||
this.listQuery = listQuery
|
||||
this.columns = this.columnList.map(o => o.prop)
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.columns = val ? this.columnList.map(o => o.prop) : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedChange(value) {
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.columnList.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnList.length;
|
||||
},
|
||||
downLoad() {
|
||||
if (!this.columns.length) return this.$message.warning(`请至少选择一个导出字段`)
|
||||
this.btnLoading = true
|
||||
let query = {
|
||||
...this.listQuery,
|
||||
dataType: this.type,
|
||||
selectKey: this.columns.join(',')
|
||||
}
|
||||
ExportExcel(query).then(res => {
|
||||
this.btnLoading = false
|
||||
if (!res.data.url) return
|
||||
this.jnpf.downloadFile(res.data.url)
|
||||
this.visible = false
|
||||
}).catch(() => { this.btnLoading = false })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-dialog :title="$t(`user.resetPassword`)" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false" :visible.sync="visible" lock-scroll
|
||||
class="JNPF-dialog JNPF-dialog_center" width="600px">
|
||||
<el-form ref="dataForm" v-loading="formLoading" :model="dataForm" :rules="dataRule"
|
||||
label-width="100px">
|
||||
<el-form-item label="账户" prop="account">
|
||||
<el-input v-model="dataForm.account" placeholder="账户" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="userPassword">
|
||||
<el-input v-model="dataForm.userPassword" type="password" autocomplete="off"
|
||||
placeholder="输入新密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="validatePassword">
|
||||
<el-input v-model="dataForm.validatePassword" type="password" autocomplete="off"
|
||||
placeholder="确认新密码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
resetUserPassword
|
||||
} from '@/api/permission/user'
|
||||
import md5 from 'js-md5'
|
||||
import { getSystemConfig } from '@/api/system/sysConfig'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const validateUserPassword = (rule, value, callback) => {
|
||||
|
||||
if (value === '') {
|
||||
callback(new Error('新密码不能为空'));
|
||||
}else{
|
||||
if (this.dataForm.password2 !== '') {
|
||||
this.$refs.dataForm.validateField('password2');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入新密码'));
|
||||
} else if (value !== this.dataForm.userPassword) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
return {
|
||||
visible: false,
|
||||
formLoading: false,
|
||||
btnLoading: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
account: '',
|
||||
userPassword: '',
|
||||
validatePassword: ''
|
||||
},
|
||||
dataRule: {
|
||||
userPassword: [
|
||||
{ required: true, validator: validateUserPassword, trigger: 'blur' }
|
||||
],
|
||||
validatePassword: [
|
||||
{ required: true, validator: validatePassword, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
init(id, account) {
|
||||
this.visible = true
|
||||
this.formLoading = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.dataForm.id = id
|
||||
this.dataForm.account = account
|
||||
this.formLoading = false
|
||||
})
|
||||
},
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.btnLoading = true
|
||||
const formData = {
|
||||
id: this.dataForm.id,
|
||||
userPassword: md5(this.dataForm.userPassword),
|
||||
validatePassword: md5(this.dataForm.validatePassword)
|
||||
}
|
||||
resetUserPassword(formData).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.btnLoading = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="JNPF-preview-main">
|
||||
<div class="JNPF-common-page-header">
|
||||
<el-page-header @back="goBack" content="第三方服务绑定管理" />
|
||||
<div class="options">
|
||||
<el-button @click="goBack()">{{$t('common.cancelButton')}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<el-col :span="22" :offset="1" class="mt-20">
|
||||
<template v-for="(item,i) in socialsList">
|
||||
<el-row :key="i">
|
||||
<el-col :span="1" class="col-img">
|
||||
<img v-if="item.enname" :src="item.logo" alt="" class="row-img" />
|
||||
<img v-if="!item.enname" src="" alt="" class="row-img" />
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<div class="tag-group-div">
|
||||
<span class="tag-group-span">{{item.name}}</span>
|
||||
</div>
|
||||
<div class="tag-group-con"> <span>{{item.describetion}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="1" class="col-line-height">
|
||||
<el-button size="small" type="" v-if="item.entity"
|
||||
@click="deleteSocials(item.entity.id)">解绑</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider class="divider-margin" :key="i"></el-divider>
|
||||
</template>
|
||||
</el-col>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSocialsUserListByUser, deleteSocials } from '@/api/permission/socialsUser'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userId: "",
|
||||
socialsList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(rowdata) {
|
||||
this.userId = rowdata.id;
|
||||
this.initList()
|
||||
},
|
||||
initList() {
|
||||
getSocialsUserListByUser(this.userId).then(res => {
|
||||
this.socialsList = res.data;
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.$emit('close')
|
||||
},
|
||||
deleteSocials(id) {
|
||||
this.$confirm('确定要解除该账号绑定?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteSocials(this.userId, id).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1000,
|
||||
onClose: () => {
|
||||
this.initList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.initList()
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.col-img {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
.tag-group-div {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.row-img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.tag-group-span {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin-right: 20px;
|
||||
font-weight: bolder;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tag-group-con {
|
||||
font-size: 14px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.divider-margin {
|
||||
margin: 15px 0px;
|
||||
}
|
||||
.tag-group-button {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.col-line-height {
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="visible"
|
||||
lock-scroll class="JNPF-dialog JNPF-dialog_center" width="700px">
|
||||
<el-form ref="dataForm" v-loading="formLoading" :model="dataForm" label-width="100px">
|
||||
<el-form-item label="工作移交人" prop="account">
|
||||
<el-input v-model="dataForm.account" placeholder="请输入工作移交人" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作交接人" prop="handoverId">
|
||||
<JnpfUserSelect v-model="dataForm.managerId" placeholder="请选择工作交接人" @change="changeUser"
|
||||
:key="key" />
|
||||
</el-form-item>
|
||||
<el-form-item label="交接内容" prop="handoverContent">
|
||||
<template>
|
||||
<div class="tabs-box">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="流程列表" name="flow">
|
||||
<el-alert title="转交内容：发起节点、审批节点、抄送人是移交人的流程" type="warning" show-icon>
|
||||
</el-alert>
|
||||
<div class="tabs-box-inner">
|
||||
<el-tree :data="treeData.flow" :props="props" show-checkbox default-expand-all
|
||||
@check-change="handleCheckChange(1)" node-key="id" ref="handoverContentTree1"
|
||||
check-on-click-node :expand-on-click-node="false">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" :title="node.label">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我的待办" name="wait">
|
||||
<el-alert title="转交内容：包含移交人未处理的待办和已处理的待办" type="warning" show-icon>
|
||||
</el-alert>
|
||||
<div class="tabs-box-inner">
|
||||
<el-tree :data="treeData.wait" :props="props" show-checkbox default-expand-all
|
||||
@check-change="handleCheckChange(2)" node-key="id" ref="handoverContentTree2"
|
||||
check-on-click-node :expand-on-click-node="false">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" :title="node.label">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="权限组" name="permission">
|
||||
<el-alert title="转交内容：移交人的权限组" type="warning" show-icon>
|
||||
</el-alert>
|
||||
<div class="tabs-box-inner">
|
||||
<el-tree :data="treeData.permission" :props="props" show-checkbox
|
||||
default-expand-all @check-change="handleCheckChange(3)" node-key="id"
|
||||
ref="handoverContentTree3" check-on-click-node :expand-on-click-node="false">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" :title="node.label">
|
||||
<i :class="data.icon"></i>
|
||||
<span class="text">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getWorkHandover,
|
||||
getWorkByUser
|
||||
} from '@/api/permission/user'
|
||||
import { mapGetters } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
key: +new Date(),
|
||||
visible: false,
|
||||
formLoading: false,
|
||||
btnLoading: false,
|
||||
activeName: 'flow',
|
||||
treeData: [],
|
||||
props: {
|
||||
children: 'children',
|
||||
label: 'fullName',
|
||||
isLeaf: 'isLeaf',
|
||||
icon: 'icon',
|
||||
value: 'id',
|
||||
disabled: 'disabled'
|
||||
},
|
||||
workHandoverPersonnelData: {},
|
||||
fromId: '',
|
||||
dataForm: {
|
||||
id: '',
|
||||
account: '',
|
||||
managerId: '',
|
||||
waitList: [],
|
||||
flowList: [],
|
||||
permissionList: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
changeUser(id, item) {
|
||||
if (this.workHandoverPersonnelData.id === id || item.isAdministrator == 1) {
|
||||
this.$message.warning(this.workHandoverPersonnelData.id === id ? '工作交接无法转交给本人' : '工作交接无法转交给管理员')
|
||||
this.dataForm.managerId = "";
|
||||
this.key = +new Date();
|
||||
}
|
||||
},
|
||||
init(data) {
|
||||
this.workHandoverPersonnelData = data
|
||||
this.dataForm.account = data.realName + '/' + data.account
|
||||
this.visible = true
|
||||
this.activeName = 'flow'
|
||||
this.dataForm.managerId = ''
|
||||
this.dataForm.waitList = []
|
||||
this.dataForm.flowList = []
|
||||
this.dataForm.permissionList = []
|
||||
this.fromId = data.id
|
||||
getWorkByUser(this.fromId).then(res => {
|
||||
this.treeData = res.data || []
|
||||
})
|
||||
},
|
||||
handleCheckChange(type) {
|
||||
const dataName = type == 1 ? 'flowList' : type == 2 ? 'waitList' : 'permissionList'
|
||||
const treeRef = this.$refs['handoverContentTree' + type];
|
||||
const parentIds = treeRef.getHalfCheckedKeys();
|
||||
const childrenIds = treeRef.getCheckedKeys();
|
||||
const dataIds = [...new Set([...parentIds, ...childrenIds])];
|
||||
this.dataForm[dataName] = dataIds
|
||||
},
|
||||
dataFormSubmit() {
|
||||
// 检查是否是自己交接给自己
|
||||
if (this.workHandoverPersonnelData.id === this.dataForm.managerId) {
|
||||
this.dataForm.managerId = "";
|
||||
this.$message.warning("工作交接无法转交给本人");
|
||||
this.key = +new Date();
|
||||
return;
|
||||
}
|
||||
// 检查是否选择了交接人
|
||||
if (!this.dataForm.managerId) {
|
||||
return this.$message.warning("请先选择工作交接人");
|
||||
}
|
||||
// 检查是否选择了交接内容
|
||||
if (
|
||||
!this.dataForm.waitList.length &&
|
||||
!this.dataForm.flowList.length &&
|
||||
!this.dataForm.permissionList.length
|
||||
) {
|
||||
return this.$message.warning("请先选择交接内容");
|
||||
}
|
||||
this.btnLoading = true;
|
||||
const query = {
|
||||
waitList: this.dataForm.waitList,
|
||||
flowList: this.dataForm.flowList,
|
||||
permissionList: this.dataForm.permissionList,
|
||||
toId: this.dataForm.managerId,
|
||||
fromId: this.fromId
|
||||
};
|
||||
getWorkHandover(query)
|
||||
.then(() => {
|
||||
this.$message.success("工作交接成功");
|
||||
setTimeout(() => {
|
||||
this.visible = false;
|
||||
this.btnLoading = false;
|
||||
this.$emit("complete");
|
||||
}, 1000);
|
||||
})
|
||||
.catch(() => {
|
||||
this.btnLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.JNPF-dialog_center {
|
||||
.tabs-box {
|
||||
border: 1px solid #dcdfe6;
|
||||
min-height: 300px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin: 0 0 6px !important;
|
||||
}
|
||||
}
|
||||
.tabs-box-inner {
|
||||
max-height: 200px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout">
|
||||
<div class="JNPF-common-layout-left">
|
||||
<div class="JNPF-common-title">
|
||||
<h2>{{$t('common.organization')}}</h2>
|
||||
<span class="options">
|
||||
<el-dropdown>
|
||||
<el-link icon="icon-ym icon-ym-mpMenu" :underline="false" />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="getOrganizeList()">刷新数据</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toggleExpand(true)">展开全部</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="toggleExpand(false)">折叠全部</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="showDiagram">架构图</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</div>
|
||||
<div class="JNPF-common-tree-search-box">
|
||||
<el-input placeholder="输入关键字" v-model="filterText" suffix-icon="el-icon-search" clearable />
|
||||
</div>
|
||||
<el-scrollbar class="JNPF-common-el-tree-scrollbar" v-loading="treeLoading">
|
||||
<el-tree ref="treeBox" :data="treeData" :props="defaultProps" :default-expand-all="expands"
|
||||
highlight-current :expand-on-click-node="false" node-key="id"
|
||||
@node-click="handleNodeClick" class="JNPF-common-el-tree" v-if="refreshTree"
|
||||
:filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ data, node }" :title="data.fullName">
|
||||
<i :class="data.icon" />
|
||||
<span class="text" :title="data.fullName">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="JNPF-common-layout-center JNPF-flex-main">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('common.keyword')">
|
||||
<el-input v-model="listQuery.keyword" :placeholder="$t('common.enterKeyword')"
|
||||
clearable @keyup.enter.native="search()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="search()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<topOpts @add="addOrUpdateHandle()">
|
||||
<el-button type="text" icon="el-icon-download" @click="exportForm">导出</el-button>
|
||||
<el-button type="text" icon="el-icon-upload2" @click="uploadForm">导入</el-button>
|
||||
<el-button type="text" icon="icon-ym icon-ym-synForThird"
|
||||
@click="handleSync">第三方同步</el-button>
|
||||
</topOpts>
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="tableData">
|
||||
<el-table-column prop="account" label="账号" width="100" />
|
||||
<el-table-column prop="realName" label="姓名" width="100" />
|
||||
<el-table-column prop="gender" label="性别" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.gender ==1 ? '男': ( scope.row.gender == 2 ? '女' : '保密') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mobilePhone" label="手机" width="120" />
|
||||
<el-table-column prop="organize" label="所属组织" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="creatorTime" label="创建时间" :formatter="jnpf.tableDateFormat"
|
||||
width="120" />
|
||||
<el-table-column prop="sortCode" label="排序" width="70" align="center" />
|
||||
<el-table-column prop="enabledMark" label="状态" width="70" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" disable-transitions v-if="scope.row.enabledMark == 1">启用
|
||||
</el-tag>
|
||||
<el-tag type="warning" disable-transitions v-else-if="scope.row.enabledMark == 2">锁定
|
||||
</el-tag>
|
||||
<el-tag type="danger" disable-transitions v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
<template slot-scope="scope" v-if="!scope.row.isAdministrator">
|
||||
<tableOpts @edit="addOrUpdateHandle(scope.row.id)" @del="handleDel(scope.row.id)">
|
||||
<el-dropdown hide-on-click>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button size="mini" type="text">
|
||||
{{$t('common.moreBtn')}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@click.native="handleResetPwd(scope.row.id, scope.row.account)">
|
||||
{{$t('user.resetPassword')}}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="unlockUser(scope.row.id)"
|
||||
v-if="scope.row.enabledMark == 2">解除锁定</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="socialsBindBtn(scope.row)" v-if="useSocials">
|
||||
绑定管理
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="workHandover(scope.row)"
|
||||
:disabled="scope.row.enabledMark == 1 || scope.row.enabledMark == 2">
|
||||
工作交接
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</tableOpts>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
<pagination :total="total" :page.sync="listQuery.currentPage"
|
||||
:limit.sync="listQuery.pageSize" @pagination="initData" />
|
||||
</div>
|
||||
</div>
|
||||
<Form v-show="formVisible" ref="Form" @close="removeForm" />
|
||||
<Diagram v-if="diagramVisible" ref="Diagram" @close="diagramVisible = false" />
|
||||
<ResetPwdForm v-if="resetFormVisible" ref="ResetPwdForm" @refreshDataList="initData" />
|
||||
<ExportForm v-if="exportFormVisible" ref="exportForm" />
|
||||
<ImportForm v-if="importFormVisible" ref="importForm" @refresh="reset()" />
|
||||
<SocialsBind v-if="socialsVisible" ref="SocialsBind" @close="socialsVisible=false" />
|
||||
<WorkHandoverForm v-if="workHandoverVisible" ref="WorkHandoverForm" @complete="initData" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getDepartmentSelectorByAuth } from '@/api/permission/department'
|
||||
import { getUserList, updateUserState, unlockUser, delUser } from '@/api/permission/user'
|
||||
import Form from './Form'
|
||||
import Diagram from './Diagram'
|
||||
import ResetPwdForm from './ResetPassword'
|
||||
import ImportForm from './ImportForm'
|
||||
import ExportForm from './ExportForm'
|
||||
import SocialsBind from './SocialsBind'
|
||||
import WorkHandoverForm from './WorkHandoverForm.vue'
|
||||
import { mapGetters } from "vuex"
|
||||
export default {
|
||||
name: 'permission-user',
|
||||
components: {
|
||||
Form,
|
||||
Diagram,
|
||||
ResetPwdForm,
|
||||
ExportForm,
|
||||
ImportForm,
|
||||
SocialsBind,
|
||||
WorkHandoverForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
treeData: [],
|
||||
tableData: [],
|
||||
treeLoading: false,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
organizeId: '',
|
||||
keyword: '',
|
||||
currentPage: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'fullName'
|
||||
},
|
||||
total: 0,
|
||||
type: '',
|
||||
formVisible: false,
|
||||
diagramVisible: false,
|
||||
resetFormVisible: false,
|
||||
authorizeFormVisible: false,
|
||||
importFormVisible: false,
|
||||
exportFormVisible: false,
|
||||
expands: true,
|
||||
refreshTree: true,
|
||||
filterText: '',
|
||||
socialsVisible: false,
|
||||
workHandoverVisible: false,
|
||||
organizeIdTree: [],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.treeBox.filter(val)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
useSocials() {
|
||||
return localStorage.getItem('useSocials') && localStorage.getItem('useSocials') != '0'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getOrganizeList(true)
|
||||
},
|
||||
methods: {
|
||||
workHandover(data) {
|
||||
this.workHandoverVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.WorkHandoverForm.init(data)
|
||||
})
|
||||
},
|
||||
showDiagram() {
|
||||
this.diagramVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Diagram.init()
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.listQuery.currentPage = 1
|
||||
this.listQuery.pageSize = 20
|
||||
this.listQuery.sort = 'desc'
|
||||
this.initData()
|
||||
},
|
||||
reset() {
|
||||
this.listQuery.keyword = ''
|
||||
this.search()
|
||||
},
|
||||
toggleExpand(expands) {
|
||||
this.filterText = ''
|
||||
this.refreshTree = false
|
||||
this.expands = expands
|
||||
this.$nextTick(() => {
|
||||
this.refreshTree = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.treeBox.setCurrentKey(this.companyId)
|
||||
})
|
||||
})
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.fullName.indexOf(value) !== -1;
|
||||
},
|
||||
getOrganizeList(isInit) {
|
||||
this.filterText = ''
|
||||
this.treeLoading = true
|
||||
getDepartmentSelectorByAuth().then(res => {
|
||||
this.treeData = res.data.list
|
||||
this.treeLoading = false
|
||||
if (isInit) this.initData()
|
||||
}).catch(() => {
|
||||
this.treeLoading = false
|
||||
})
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
getUserList(this.listQuery).then(res => {
|
||||
this.tableData = res.data.list
|
||||
this.total = res.data.pagination.total
|
||||
this.listLoading = false
|
||||
}).catch(() => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getNodePath(node) {
|
||||
let fullPath = []
|
||||
const loop = (node) => {
|
||||
if (node.level) fullPath.unshift(node.data)
|
||||
if (node.parent) loop(node.parent)
|
||||
}
|
||||
loop(node)
|
||||
return fullPath
|
||||
},
|
||||
handleNodeClick(data, node) {
|
||||
if (this.listQuery.organizeId === data.id) return
|
||||
this.listQuery.organizeId = data.id
|
||||
this.type = data.type
|
||||
const nodePath = this.getNodePath(node)
|
||||
this.organizeIdTree = nodePath.map(o => o.id)
|
||||
this.reset()
|
||||
},
|
||||
addOrUpdateHandle(id) {
|
||||
this.formVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.Form.init(id, this.organizeIdTree || [])
|
||||
})
|
||||
},
|
||||
removeForm(isRefresh) {
|
||||
this.formVisible = false
|
||||
if (isRefresh) {
|
||||
this.keyword = ''
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
removeAuthorizeForm(isRefresh) {
|
||||
this.authorizeFormVisible = false
|
||||
if (isRefresh) {
|
||||
this.keyword = ''
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
handleUpdateState(row) {
|
||||
const txt = row.enabledMark ? '禁用' : '开启'
|
||||
this.$confirm(`您确定要${txt}当前用户吗, 是否继续?`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updateUserState(row.id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
onClose: () => {
|
||||
row.enabledMark = row.enabledMark ? 0 : 1
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleDel(id) {
|
||||
this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delUser(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
unlockUser(id) {
|
||||
this.$confirm('此操作将解除该账户锁定, 是否继续?', '解除锁定', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
unlockUser(id).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
exportForm() {
|
||||
this.exportFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.exportForm.init(this.listQuery)
|
||||
})
|
||||
},
|
||||
uploadForm() {
|
||||
this.importFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.importForm.init()
|
||||
})
|
||||
},
|
||||
handleResetPwd(id, account) {
|
||||
this.resetFormVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ResetPwdForm.init(id, account)
|
||||
})
|
||||
},
|
||||
socialsBindBtn(data) {
|
||||
this.socialsVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.SocialsBind.init(data)
|
||||
})
|
||||
},
|
||||
handleSync() {
|
||||
this.$router.push({ path: `/system/sysConfig?type=1` })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
>>> .icon-ym {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="JNPF-common-layout JNPF-flex-main">
|
||||
<div class="JNPF-common-layout-center">
|
||||
<el-row class="JNPF-common-search-box" :gutter="16">
|
||||
<el-form @submit.native.prevent>
|
||||
<el-col :span="6">
|
||||
<el-form-item :label="$t('common.keyword')">
|
||||
<el-input v-model="listQuery.keyword" :placeholder="$t('common.enterKeyword')"
|
||||
clearable @change="initData()" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="initData()">
|
||||
{{$t('common.search')}}</el-button>
|
||||
<el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="JNPF-common-layout-main JNPF-flex-main">
|
||||
<div class="JNPF-common-head">
|
||||
<div>
|
||||
<el-button type="danger" size="small" @click="batchDel">强制下线</el-button>
|
||||
</div>
|
||||
<div class="JNPF-common-head-right">
|
||||
<el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
||||
<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
|
||||
@click="initData()" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<JNPF-table v-loading="listLoading" :data="tableDataList" has-c
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column prop="userName" label="在线用户" width="120" />
|
||||
<el-table-column prop="loginIPAddress" label="登录IP" width="120" />
|
||||
<el-table-column prop="loginTime" label="登录时间" width="150" />
|
||||
<el-table-column prop="loginPlatForm" label="登录设备" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-button slot="reference" type="text" class="JNPF-table-delBtn"
|
||||
@click="handleDel(scope.row.userId)">
|
||||
{{$t('userOnline.forcedOffline')}}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</JNPF-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getOnlineUser,
|
||||
batchDelOnlineUser,
|
||||
deleteOnlineUser
|
||||
} from '@/api/permission/onlineUser'
|
||||
|
||||
export default {
|
||||
name: 'permission-userOnline',
|
||||
data() {
|
||||
return {
|
||||
formVisible: false,
|
||||
tableDataList: [],
|
||||
refreshLoading: false,
|
||||
listLoading: true,
|
||||
multipleSelection: [],
|
||||
listQuery: {
|
||||
keyword: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.listQuery.keyword = ''
|
||||
this.initData()
|
||||
},
|
||||
initData() {
|
||||
this.listLoading = true
|
||||
let query = {
|
||||
...this.listQuery,
|
||||
keyword: this.keyword
|
||||
}
|
||||
getOnlineUser(this.listQuery).then(res => {
|
||||
this.tableDataList = res.data
|
||||
this.listLoading = false
|
||||
this.refreshLoading = false
|
||||
}).catch(() => {
|
||||
this.listLoading = false
|
||||
this.refreshLoading = false
|
||||
})
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
const res = val.map(item => item.userId)
|
||||
this.multipleSelection = res
|
||||
},
|
||||
batchDel() {
|
||||
if (!this.multipleSelection.length) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: '请选择一条数据',
|
||||
duration: 1500,
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$confirm('您确定要强制下线这些用户吗, 是否继续?', '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
batchDelOnlineUser(this.multipleSelection).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
},
|
||||
handleDel(userId) {
|
||||
this.$confirm(this.$t(`userOnline.cancelAccountTip`), this.$t(`common.tipTitle`), {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteOnlineUser(userId).then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg,
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.initData()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => { })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<el-dialog :title="pageTitle" :close-on-click-modal="false" :close-on-press-escape="false"
|
||||
:visible.sync="visible" lock-scroll append-to-body destroy-on-close
|
||||
class="JNPF-dialog JNPF-dialog_center transfer-dialog" width="800px">
|
||||
<userTransfer v-model="dataForm.userIds" ref="userTransfer" multiple />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{$t('common.confirmButton')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import { getUserRelationList, createUserRelation } from '@/api/permission/userRelation'
|
||||
import userTransfer from '@/components/JNPF-userTransfer'
|
||||
|
||||
export default {
|
||||
components: { userTransfer },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
pageTitle: '',
|
||||
dataForm: {
|
||||
objectId: '',
|
||||
objectType: '',
|
||||
userIds: []
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) return
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, fullName, type) {
|
||||
this.visible = true
|
||||
this.dataForm.objectId = id
|
||||
this.dataForm.objectType = type
|
||||
this.dataForm.userIds = []
|
||||
this.$nextTick(() => {
|
||||
if (type === 'Position') {
|
||||
this.pageTitle = this.$t(`position.postMember`) + ' - ' + fullName
|
||||
} else if (type === 'Role') {
|
||||
this.pageTitle = this.$t(`role.roleMember`) + ' - ' + fullName
|
||||
} else if (type === 'Group') {
|
||||
this.pageTitle = '组内成员 - ' + fullName
|
||||
}
|
||||
this.$refs.userTransfer && (this.$refs.userTransfer.allLoading = true)
|
||||
getUserRelationList(this.dataForm.objectId).then(res => {
|
||||
this.dataForm.userIds = res.data.ids
|
||||
this.$refs.userTransfer && this.$refs.userTransfer.init()
|
||||
})
|
||||
})
|
||||
},
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
createUserRelation(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.btnLoading = false
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
this.btnLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue