|
|
|
@ -4,8 +4,7 @@ |
|
|
|
|
<div class="side"> |
|
|
|
|
<div class="m-b-20"> |
|
|
|
|
<h6 class="p-title">后台员工账号</h6> |
|
|
|
|
<el-radio-group v-model="studentType" |
|
|
|
|
@change="changeType"> |
|
|
|
|
<el-radio-group v-model="studentType" @change="changeType"> |
|
|
|
|
<div class="m-b-20"> |
|
|
|
|
<el-radio :label="1">所有员工</el-radio> |
|
|
|
|
</div> |
|
|
|
@ -17,39 +16,24 @@ |
|
|
|
|
<el-divider></el-divider> |
|
|
|
|
<div> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<h6 class="p-title" |
|
|
|
|
style="margin-bottom: 0">组织架构</h6> |
|
|
|
|
<el-button type="text" |
|
|
|
|
@click="addOrg" |
|
|
|
|
v-auth="'/system:后台账号:新增部门'">添加</el-button> |
|
|
|
|
<h6 class="p-title" style="margin-bottom: 0">组织架构</h6> |
|
|
|
|
<el-button type="text" @click="addOrg" v-auth="'/system:后台账号:新增部门'">添加</el-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style="overflow: auto"> |
|
|
|
|
<el-tree :data="orgList" |
|
|
|
|
default-expand-all |
|
|
|
|
ref="orgTree" |
|
|
|
|
node-key="id" |
|
|
|
|
highlight-current |
|
|
|
|
:expand-on-click-node="false" |
|
|
|
|
@node-click="handleNodeClick" |
|
|
|
|
:props="{children: 'children', label: 'organizationName', isLeaf: 'leaf'}"> |
|
|
|
|
<span class="custom-tree-node" |
|
|
|
|
slot-scope="{ node, data }"> |
|
|
|
|
<el-tree :data="orgList" default-expand-all ref="orgTree" node-key="id" highlight-current |
|
|
|
|
:expand-on-click-node="false" @node-click="handleNodeClick" |
|
|
|
|
:props="{ children: 'children', label: 'organizationName', isLeaf: 'leaf' }"> |
|
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
|
|
<span class="org-name">{{ node.label }}</span> |
|
|
|
|
<span> |
|
|
|
|
<el-button v-auth="'/system:后台账号:新增部门'" |
|
|
|
|
type="text" |
|
|
|
|
icon="el-icon-circle-plus-outline" |
|
|
|
|
<el-button v-auth="'/system:后台账号:新增部门'" type="text" icon="el-icon-circle-plus-outline" |
|
|
|
|
@click="() => addOrg(node, data)"> |
|
|
|
|
</el-button> |
|
|
|
|
<el-button v-auth="'/system:后台账号:编辑部门'" |
|
|
|
|
type="text" |
|
|
|
|
icon="el-icon-edit-outline" |
|
|
|
|
<el-button v-auth="'/system:后台账号:编辑部门'" type="text" icon="el-icon-edit-outline" |
|
|
|
|
@click="() => editOrg(node, data)"> |
|
|
|
|
</el-button> |
|
|
|
|
<el-button v-auth="'/system:后台账号:删除部门'" |
|
|
|
|
type="text" |
|
|
|
|
icon="el-icon-delete" |
|
|
|
|
<el-button v-auth="'/system:后台账号:删除部门'" type="text" icon="el-icon-delete" |
|
|
|
|
@click="() => delOrg(node, data)"> |
|
|
|
|
</el-button> |
|
|
|
|
</span> |
|
|
|
@ -58,36 +42,22 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog :title="orgForm.id ? '编辑' : '新增' + '部门'" |
|
|
|
|
:visible.sync="orgVisible" |
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
<el-dialog :title="orgForm.id ? '编辑' : '新增' + '部门'" :visible.sync="orgVisible" :close-on-click-modal="false" |
|
|
|
|
width="50%"> |
|
|
|
|
<el-form v-if="orgVisible" |
|
|
|
|
ref="orgForm" |
|
|
|
|
:model="orgForm" |
|
|
|
|
:rules="orgRules" |
|
|
|
|
label-width="100px"> |
|
|
|
|
<el-form-item label="部门名称" |
|
|
|
|
prop="organizationName"> |
|
|
|
|
<el-input v-model.trim="orgForm.organizationName" |
|
|
|
|
placeholder="请输入"></el-input> |
|
|
|
|
<el-form v-if="orgVisible" ref="orgForm" :model="orgForm" :rules="orgRules" label-width="100px"> |
|
|
|
|
<el-form-item label="部门名称" prop="organizationName"> |
|
|
|
|
<el-input v-model.trim="orgForm.organizationName" placeholder="请输入"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="上级部门"> |
|
|
|
|
<span v-if="orgForm.parentName">{{ orgForm.parentName }}</span> |
|
|
|
|
<el-cascader v-else |
|
|
|
|
:options="orgListDia" |
|
|
|
|
v-model="cascaderValue" |
|
|
|
|
:props="cascaderProps" |
|
|
|
|
clearable |
|
|
|
|
<el-cascader v-else :options="orgListDia" v-model="cascaderValue" :props="cascaderProps" clearable |
|
|
|
|
style="width: 100%"> |
|
|
|
|
</el-cascader> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="closeOrg">取 消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="orgSubmit">确 定</el-button> |
|
|
|
|
<el-button type="primary" @click="orgSubmit">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
@ -97,195 +67,96 @@ |
|
|
|
|
<div class="tool"> |
|
|
|
|
<ul class="filter"> |
|
|
|
|
<li> |
|
|
|
|
<el-input style="width: 250px;" |
|
|
|
|
placeholder="请输入员工姓名/手机号" |
|
|
|
|
prefix-icon="el-icon-search" |
|
|
|
|
v-model="keyWord" |
|
|
|
|
<el-input style="width: 250px;" placeholder="请输入员工姓名/手机号" prefix-icon="el-icon-search" v-model="keyWord" |
|
|
|
|
clearable></el-input> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="addStaff" |
|
|
|
|
v-auth="'/system:后台账号:新增员工'">新增员工</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="batchImport" |
|
|
|
|
v-auth="'/system:后台账号:批量导入'">批量导入</el-button> |
|
|
|
|
<el-button type="primary" @click="addStaff" v-auth="'/system:后台账号:新增员工'">新增员工</el-button> |
|
|
|
|
<el-button type="primary" @click="batchImport" v-auth="'/system:后台账号:批量导入'">批量导入</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-table :data="listData" |
|
|
|
|
class="table" |
|
|
|
|
ref="table" |
|
|
|
|
stripe |
|
|
|
|
header-align="center" |
|
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
|
row-key="accountId"> |
|
|
|
|
<el-table-column type="selection" |
|
|
|
|
width="55" |
|
|
|
|
align="center" |
|
|
|
|
:reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" |
|
|
|
|
width="60" |
|
|
|
|
label="序号" |
|
|
|
|
align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="userName" |
|
|
|
|
label="员工姓名" |
|
|
|
|
align="center" |
|
|
|
|
min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="account" |
|
|
|
|
label="账号" |
|
|
|
|
align="center" |
|
|
|
|
min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="phone" |
|
|
|
|
label="手机号" |
|
|
|
|
align="center" |
|
|
|
|
width="120"></el-table-column> |
|
|
|
|
<el-table-column prop="staffArchitectureName" |
|
|
|
|
label="所在部门" |
|
|
|
|
align="center" |
|
|
|
|
min-width="200" |
|
|
|
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" |
|
|
|
|
@selection-change="handleSelectionChange" row-key="accountId"> |
|
|
|
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column prop="userName" label="员工姓名" align="center" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="account" label="账号" align="center" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="phone" label="手机号" align="center" width="120"></el-table-column> |
|
|
|
|
<el-table-column prop="staffArchitectureName" label="所在部门" align="center" min-width="200" |
|
|
|
|
show-overflow-tooltip></el-table-column> |
|
|
|
|
<el-table-column prop="roleName" |
|
|
|
|
label="授权角色" |
|
|
|
|
align="center" |
|
|
|
|
min-width="200" |
|
|
|
|
<el-table-column prop="roleName" label="授权角色" align="center" min-width="200" |
|
|
|
|
show-overflow-tooltip></el-table-column> |
|
|
|
|
<el-table-column prop="lastLoginTime" |
|
|
|
|
label="最后登录时间" |
|
|
|
|
align="center" |
|
|
|
|
width="130"></el-table-column> |
|
|
|
|
<el-table-column label="操作" |
|
|
|
|
align="center" |
|
|
|
|
width="300"> |
|
|
|
|
<el-table-column prop="lastLoginTime" label="最后登录时间" align="center" width="130"></el-table-column> |
|
|
|
|
<el-table-column label="操作" align="center" width="300"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
<el-button type="text" |
|
|
|
|
v-auth="'/system:后台账号:查看'" |
|
|
|
|
@click="queryStaff(scope.row,true)">查看</el-button> |
|
|
|
|
<el-button type="text" |
|
|
|
|
v-auth="'/system:后台账号:编辑'" |
|
|
|
|
@click="queryStaff(scope.row,false)">编辑</el-button> |
|
|
|
|
<el-button type="text" |
|
|
|
|
v-auth="'/system:后台账号:重置密码'" |
|
|
|
|
@click="resetPassword(scope.row)">重置密码</el-button> |
|
|
|
|
<el-button type="text" |
|
|
|
|
v-auth="'/system:后台账号:删除'" |
|
|
|
|
@click="delStaff(scope.row)">删除</el-button> |
|
|
|
|
<el-button type="text" v-auth="'/system:后台账号:查看'" @click="queryStaff(scope.row, true)">查看</el-button> |
|
|
|
|
<el-button type="text" v-auth="'/system:后台账号:编辑'" @click="queryStaff(scope.row, false)">编辑</el-button> |
|
|
|
|
<el-button type="text" v-auth="'/system:后台账号:重置密码'" @click="resetPassword(scope.row)">重置密码</el-button> |
|
|
|
|
<el-button type="text" v-auth="'/system:后台账号:删除'" @click="delStaff(scope.row)">删除</el-button> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="pagination"> |
|
|
|
|
<el-pagination background |
|
|
|
|
@current-change="currentChange" |
|
|
|
|
:current-page="page" |
|
|
|
|
layout="total, prev, pager, next" |
|
|
|
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" |
|
|
|
|
:total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog :title="isDetail ? '查看' : (form.accountId ? '编辑' : '新增') + '员工'" |
|
|
|
|
:visible.sync="staffVisible" |
|
|
|
|
width="580px" |
|
|
|
|
class="dialog" |
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
@close="closeStaff"> |
|
|
|
|
<el-form ref="form" |
|
|
|
|
:model="form" |
|
|
|
|
:rules="rules" |
|
|
|
|
label-width="150px" |
|
|
|
|
:disabled="isDetail" |
|
|
|
|
<el-dialog :title="isDetail ? '查看' : (form.accountId ? '编辑' : '新增') + '员工'" :visible.sync="staffVisible" |
|
|
|
|
width="580px" class="dialog" :close-on-click-modal="false" @close="closeStaff"> |
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="isDetail" |
|
|
|
|
style='margin-right: 80px;'> |
|
|
|
|
<el-form-item prop="workNumber" |
|
|
|
|
label="工号"> |
|
|
|
|
<el-input v-model.trim="form.workNumber" |
|
|
|
|
placeholder="请输入工号"></el-input> |
|
|
|
|
<el-form-item prop="workNumber" label="工号"> |
|
|
|
|
<el-input v-model.trim="form.workNumber" placeholder="请输入工号"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="userName" |
|
|
|
|
label="姓名"> |
|
|
|
|
<el-input v-model.trim="form.userName" |
|
|
|
|
placeholder="请输入姓名"></el-input> |
|
|
|
|
<el-form-item prop="userName" label="姓名"> |
|
|
|
|
<el-input v-model.trim="form.userName" placeholder="请输入姓名"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="account" |
|
|
|
|
label="账号"> |
|
|
|
|
<el-input v-model.trim="form.account" |
|
|
|
|
placeholder="请输入账号"></el-input> |
|
|
|
|
<el-form-item prop="account" label="账号"> |
|
|
|
|
<el-input v-model.trim="form.account" placeholder="请输入账号"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="roleList" |
|
|
|
|
label="授权角色"> |
|
|
|
|
<el-select class="w-100" |
|
|
|
|
v-model="form.roleList" |
|
|
|
|
multiple> |
|
|
|
|
<el-form-item prop="roleList" label="授权角色"> |
|
|
|
|
<el-select class="w-100" v-model="form.roleList" multiple> |
|
|
|
|
<template v-for="item in roleList"> |
|
|
|
|
<!-- 不显示超管 --> |
|
|
|
|
<el-option v-if="item.roleName !== '超级管理员'" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.roleName" |
|
|
|
|
:value="item.id"> |
|
|
|
|
<el-option v-if="item.roleName !== '超级管理员'" :key="item.id" :label="item.roleName" :value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</template> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="所在部门"> |
|
|
|
|
<el-cascader class="w-100" |
|
|
|
|
v-model="form.staffArchitectureId" |
|
|
|
|
:options="orgList" |
|
|
|
|
<el-cascader class="w-100" v-model="form.staffArchitectureId" :options="orgList" |
|
|
|
|
:props="casProps"></el-cascader> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="phone" |
|
|
|
|
label="手机号"> |
|
|
|
|
<el-input v-model.trim="form.phone" |
|
|
|
|
placeholder="请输入手机号" |
|
|
|
|
maxlength="11"></el-input> |
|
|
|
|
<el-form-item prop="phone" label="手机号"> |
|
|
|
|
<el-input v-model.trim="form.phone" placeholder="请输入手机号" maxlength="11"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="email" |
|
|
|
|
label="邮箱"> |
|
|
|
|
<el-input v-model.trim="form.email" |
|
|
|
|
placeholder="请输入邮箱"></el-input> |
|
|
|
|
<el-form-item prop="email" label="邮箱"> |
|
|
|
|
<el-input v-model.trim="form.email" placeholder="请输入邮箱"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer" |
|
|
|
|
v-if="!isDetail"> |
|
|
|
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
|
|
|
|
<el-button @click="staffVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="submitStaff">确定</el-button> |
|
|
|
|
<el-button type="primary" @click="submitStaff">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<el-dialog title="批量导入" |
|
|
|
|
:visible.sync="importVisible" |
|
|
|
|
width="24%" |
|
|
|
|
:close-on-click-modal="false"> |
|
|
|
|
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" :close-on-click-modal="false"> |
|
|
|
|
<div style="text-align: center"> |
|
|
|
|
<div style="margin-bottom: 10px;"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
|
|
|
|
<el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
|
|
|
|
</div> |
|
|
|
|
<el-upload ref="importStaff" |
|
|
|
|
name="file" |
|
|
|
|
accept=".xls,.xlsx" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
:on-error="uploadError" |
|
|
|
|
:on-success="uploadSuccess" |
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
:limit="1" |
|
|
|
|
:on-exceed="handleExceed" |
|
|
|
|
:action="this.api.importStaff" |
|
|
|
|
:file-list="uploadList" |
|
|
|
|
:headers="headers"> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
|
|
|
|
<el-upload ref="importStaff" name="file" accept=".xls,.xlsx" :on-remove="handleRemove" :on-error="uploadError" |
|
|
|
|
:on-success="uploadSuccess" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" |
|
|
|
|
:action="this.api.importStaff" :file-list="uploadList" :headers="headers"> |
|
|
|
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-link v-if="uploadFaild" |
|
|
|
|
type="primary" |
|
|
|
|
@click="showFaild">部分数据导入失败,查看失败原因</el-link> |
|
|
|
|
<el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败,查看失败原因</el-link> |
|
|
|
|
</div> |
|
|
|
|
<span slot="footer" |
|
|
|
|
class="dialog-footer"> |
|
|
|
|
<el-button size="small" |
|
|
|
|
@click="importVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" |
|
|
|
|
type="primary" |
|
|
|
|
@click="uploadSure">确 定</el-button> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button size="small" @click="importVisible = false">取 消</el-button> |
|
|
|
|
<el-button size="small" type="primary" @click="uploadSure">确 定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
@ -870,22 +741,27 @@ export default { |
|
|
|
|
.m-b-20 { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.org-name { |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.w-100 { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.wrap { |
|
|
|
|
display: flex; |
|
|
|
|
min-height: 100%; |
|
|
|
|
padding: 0 24px; |
|
|
|
|
|
|
|
|
|
.side { |
|
|
|
|
width: 300px; |
|
|
|
|
padding: 24px 10px 24px 0; |
|
|
|
|
margin-right: 24px; |
|
|
|
|
border-right: 1px solid rgba(0, 0, 0, 0.06); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: calc(100% - 374px); |
|
|
|
|
padding: 24px 0; |
|
|
|
|