xinyin025/smart-admin
1
0
Fork 0
mirror of https://github.com/1024-lab/smart-admin.git synced 2026-06-28 00:24:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

v2.0

Browse Source
This commit is contained in:
zhuoda
2022-11-05 22:40:22 +08:00
parent 1f75c9614e
commit f9cc5accde
1807 changed files with 127943 additions and 78167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/department-children/index.vue
+58
View File
@@ -0,0 +1,58 @@
<!--
* 当前所选部门的子部门 人员管理右上半部分
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-card class="child-dept-container">
<a-breadcrumb>
<a-breadcrumb-item v-for="(item, index) in props.breadcrumb" :key="index">
{{ item }}
</a-breadcrumb-item>
</a-breadcrumb>
<a-list class="department-list" :data-source="props.selectedDepartmentChildren">
<template #renderItem="{ item }">
<a-list-item>
<div class="department-item" @click="selectTree(item.departmentId)">
{{ item.name }}
<RightOutlined />
</div>
</a-list-item>
</template>
</a-list>
</a-card>
</template>
<script setup>
import emitter from '/@/views/system/employee/department/department-mitt';
const props = defineProps({
breadcrumb: Array,
selectedDepartmentChildren: Array,
});
function selectTree(id) {
emitter.emit('selectTree', id);
}
</script>
<style scoped lang="less">
:deep(.ant-list-item) {
padding: 6px 0px;
}
.child-dept-container {
.department-list-box {
margin-top: 20px;
}
.department-list {
height: 170px;
overflow-y: auto;
}
.department-item {
cursor: pointer;
}
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/department-form-modal/index.vue
+138
View File
@@ -0,0 +1,138 @@
<!--
* 部门表单 弹窗
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-modal v-model:visible="visible" :title="formState.departmentId ? '编辑部门' : '添加部门'" @ok="handleOk" destroyOnClose>
<a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
<a-form-item label="上级部门" name="parentId" v-if="formState.parentId != 0">
<DepartmentTreeSelect ref="departmentTreeSelect" v-model:value="formState.parentId" :defaultValueFlag="false" width="100%" />
</a-form-item>
<a-form-item label="部门名称" name="name">
<a-input v-model:value.trim="formState.name" placeholder="请输入部门名称" />
</a-form-item>
<a-form-item label="部门负责人" name="managerId">
<EmployeeSelect ref="employeeSelect" placeholder="请选择部门负责人" width="100%" v-model:value="formState.managerId" :leaveFlag="false" />
</a-form-item>
<a-form-item label="部门排序 （值越大越靠前！）" name="sort">
<a-input-number style="width: 100%" v-model:value="formState.sort" :min="0" placeholder="请输入部门名称" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import message from 'ant-design-vue/lib/message';
import { reactive, ref } from 'vue';
import { departmentApi } from '/@/api/system/department/department-api';
import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue';
import EmployeeSelect from '/@/components/system/employee-select/index.vue';
import { smartSentry } from '/@/lib/smart-sentry';
import { SmartLoading } from '/@/components/framework/smart-loading';
// ----------------------- 对外暴漏 ---------------------
defineExpose({
showModal,
});
// ----------------------- modal 的显示与隐藏 ---------------------
const emits = defineEmits(['refresh']);
const visible = ref(false);
function showModal(data) {
visible.value = true;
updateFormData(data);
}
function closeModal() {
visible.value = false;
resetFormData();
}
// ----------------------- form 表单操作 ---------------------
const formRef = ref();
const departmentTreeSelect = ref();
const defaultDepartmentForm = {
id: undefined,
managerId: undefined, //部门负责人
name: undefined,
parentId: undefined,
sort: 0,
};
const employeeSelect = ref();
let formState = reactive({
...defaultDepartmentForm,
});
// 表单校验规则
const rules = {
parentId: [{ required: true, message: '上级部门不能为空' }],
name: [
{ required: true, message: '部门名称不能为空' },
{ max: 50, message: '部门名称不能大于20个字符', trigger: 'blur' },
],
managerId: [{ required: true, message: '部门负责人不能为空' }],
};
// 更新表单数据
function updateFormData(data) {
Object.assign(formState, defaultDepartmentForm);
if (data) {
Object.assign(formState, data);
}
visible.value = true;
}
// 重置表单数据
function resetFormData() {
Object.assign(formState, defaultDepartmentForm);
}
async function handleOk() {
try {
await formRef.value.validate();
if (formState.departmentId) {
updateDepartment();
} else {
addDepartment();
}
} catch (error) {
message.error('参数验证错误，请仔细填写表单数据!');
}
}
// ----------------------- form 表单 ajax 操作 ---------------------
//添加部门ajax请求
async function addDepartment() {
SmartLoading.show();
try {
await departmentApi.addDepartment(formState);
emits('refresh');
closeModal();
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
}
//更新部门ajax请求
async function updateDepartment() {
SmartLoading.show();
try {
if (formState.parentId == formState.departmentId) {
message.warning('上级菜单不能为自己');
return;
}
await departmentApi.updateDepartment(formState);
emits('refresh');
closeModal();
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
}
</script>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/department-tree/index.vue
+339
View File
@@ -0,0 +1,339 @@
<!--
* 部门树形结构
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-card class="tree-container">
<a-row>
<a-input v-model:value.trim="keywords" placeholder="请输入部门名称" />
</a-row>
<a-row class="sort-flag-row" v-if="props.showMenu">
显示排序字段
<template v-if="showSortFlag"> （值越大越靠前） </template>
：<a-switch v-model:checked="showSortFlag" />
</a-row>
<a-tree
v-if="!_.isEmpty(departmentTreeData)"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
class="tree"
:treeData="departmentTreeData"
:fieldNames="{ title: 'name', key: 'departmentId', value: 'departmentId' }"
style="width: 100%; overflow-x: auto"
:style="[!height ? '' : { height: `${height}px`, overflowY: 'auto' }]"
:showLine="!props.checkable"
:checkable="props.checkable"
:checkStrictly="props.checkStrictly"
:selectable="!props.checkable"
:defaultExpandAll="true"
@select="treeSelectChange"
>
<template #title="item">
<a-popover placement="right" v-if="props.showMenu">
<template #content>
<div style="display: flex; flex-direction: column">
<a-button type="text" @click="addDepartment(item.dataRef)" v-privilege="'system:department:add'">添加下级</a-button>
<a-button type="text" @click="updateDepartment(item.dataRef)" v-privilege="'system:department:update'">修改</a-button>
<a-button
type="text"
v-if="item.departmentId != topDepartmentId"
@click="deleteDepartment(item.departmentId)"
v-privilege="'system:department:delete'"
>删除</a-button
>
</div>
</template>
{{ item.name }}
<!--显示排序字段-->
<template v-if="showSortFlag">
<span class="sort-span">({{ item.sort }})</span>
</template>
</a-popover>
<div v-else>{{ item.name }}</div>
</template>
</a-tree>
<div class="no-data" v-else>暂无结果</div>
<!-- 添加编辑部门弹窗 -->
<DepartmentFormModal ref="departmentFormModal" @refresh="refresh" />
</a-card>
</template>
<script setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { onUnmounted, ref, watch } from 'vue';
import { Modal } from 'ant-design-vue';
import _ from 'lodash';
import { createVNode, onMounted } from 'vue';
import DepartmentFormModal from '../department-form-modal/index.vue';
import { departmentApi } from '/@/api/system/department/department-api';
import { SmartLoading } from '/@/components/framework/smart-loading';
import departmentEmitter from '/@/views/system/employee/department/department-mitt';
import { smartSentry } from '/@/lib/smart-sentry';
const DEPARTMENT_PARENT_ID = 0;
// ----------------------- 组件参数 ---------------------
const props = defineProps({
// 是否可以选中
checkable: {
type: Boolean,
default: false,
},
// 父子节点选中状态不再关联
checkStrictly: {
type: Boolean,
default: false,
},
// 树高度 超出出滚动条
height: Number,
// 显示菜单
showMenu: {
type: Boolean,
default: true,
},
});
// ----------------------- 部门树的展示 ---------------------
const topDepartmentId = ref();
// 所有部门列表
const departmentList = ref([]);
// 部门树形数据
const departmentTreeData = ref([]);
// 存放部门id和部门，用于查找
const idInfoMap = ref(new Map());
// 是否显示排序字段
const showSortFlag = ref(false);
onMounted(() => {
queryDepartmentTree();
});
// 刷新
async function refresh() {
await queryDepartmentTree();
if (currentSelectedDpartmentId.value) {
selectTree(currentSelectedDpartmentId.value);
}
}
// 查询部门列表并构建 部门树
async function queryDepartmentTree() {
let res = await departmentApi.queryAllDepartment();
let data = res.data;
departmentList.value = data;
departmentTreeData.value = buildDepartmentTree(data, DEPARTMENT_PARENT_ID);
data.forEach((e) => {
idInfoMap.value.set(e.departmentId, e);
});
// 默认显示 最顶级ID为列表中返回的第一条数据的ID
if (!_.isEmpty(departmentTreeData.value) && departmentTreeData.value.length > 0) {
topDepartmentId.value = departmentTreeData.value[0].departmentId;
}
selectTree(departmentTreeData.value[0].departmentId);
}
// 构建部门树
function buildDepartmentTree(data, parentId) {
let children = data.filter((e) => e.parentId === parentId) || [];
children.forEach((e) => {
e.children = buildDepartmentTree(data, e.departmentId);
});
updateDepartmentPreIdAndNextId(children);
return children;
}
// 更新树的前置id和后置id
function updateDepartmentPreIdAndNextId(data) {
for (let index = 0; index < data.length; index++) {
if (index === 0) {
data[index].nextId = data.length > 1 ? data[1].departmentId : undefined;
continue;
}
if (index === data.length - 1) {
data[index].preId = data[index - 1].departmentId;
data[index].nextId = undefined;
continue;
}
data[index].preId = data[index - 1].departmentId;
data[index].nextId = data[index + 1].departmentId;
}
}
// ----------------------- 树的选中 ---------------------
const selectedKeys = ref([]);
const checkedKeys = ref([]);
const breadcrumb = ref([]);
const currentSelectedDpartmentId = ref();
const selectedDepartmentChildren = ref([]);
departmentEmitter.on('selectTree', selectTree);
function selectTree(id) {
selectedKeys.value = [id];
treeSelectChange(selectedKeys.value);
}
function treeSelectChange(idList) {
if (_.isEmpty(idList)) {
breadcrumb.value = [];
selectedDepartmentChildren.value = [];
return;
}
let id = idList[0];
selectedDepartmentChildren.value = departmentList.value.filter((e) => e.parentId == id);
let filterDepartmentList = [];
recursionFilterDepartment(filterDepartmentList, id, true);
breadcrumb.value = filterDepartmentList.map((e) => e.name);
}
// ----------------------- 筛选 ---------------------
const keywords = ref('');
watch(
() => keywords.value,
() => {
onSearch();
}
);
// 筛选
function onSearch() {
if (!keywords.value) {
departmentTreeData.value = buildDepartmentTree(departmentList.value, DEPARTMENT_PARENT_ID);
return;
}
let originData = departmentList.value.concat();
if (!originData) {
return;
}
// 筛选出名称符合的部门
let filterDepartmenet = originData.filter((e) => e.name.indexOf(keywords.value) > -1);
let filterDepartmentList = [];
// 循环筛选出的部门 构建部门树
filterDepartmenet.forEach((e) => {
recursionFilterDepartment(filterDepartmentList, e.departmentId, false);
});
departmentTreeData.value = buildDepartmentTree(filterDepartmentList, DEPARTMENT_PARENT_ID);
}
// 根据ID递归筛选部门
function recursionFilterDepartment(resList, id, unshift) {
let info = idInfoMap.value.get(id);
if (!info || resList.some((e) => e.departmentId == id)) {
return;
}
if (unshift) {
resList.unshift(info);
} else {
resList.push(info);
}
if (info.parentId && info.parentId != 0) {
recursionFilterDepartment(resList, info.parentId, unshift);
}
}
// ----------------------- 表单操作：添加部门/修改部门/删除部门/上下移动 ---------------------
const departmentFormModal = ref();
// 添加
function addDepartment(e) {
let data = {
departmentId: 0,
name: '',
parentId: e.departmentId,
};
currentSelectedDpartmentId.value = e.departmentId;
departmentFormModal.value.showModal(data);
}
// 编辑
function updateDepartment(e) {
currentSelectedDpartmentId.value = e.departmentId;
departmentFormModal.value.showModal(e);
}
// 删除
function deleteDepartment(id) {
Modal.confirm({
title: '提醒',
icon: createVNode(ExclamationCircleOutlined),
content: '确定要删除该部门吗?',
okText: '删除',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
// 若删除的是当前的部门 先找到上级部门
let selectedKey = null;
if (!_.isEmpty(selectedKeys.value)) {
selectedKey = selectedKeys.value[0];
if (selectedKey == id) {
let selectInfo = departmentList.value.find((e) => e.departmentId == id);
if (selectInfo && selectInfo.parentId) {
selectedKey = selectInfo.parentId;
}
}
}
await departmentApi.deleteDepartment(id);
await queryDepartmentTree();
// 刷新选中部门
if (selectedKey) {
selectTree(selectedKey);
}
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
onUnmounted(() => {
departmentEmitter.all.clear();
});
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({
queryDepartmentTree,
selectedDepartmentChildren,
breadcrumb,
selectedKeys,
checkedKeys,
keywords,
});
</script>
<style scoped lang="less">
.tree-container {
height: 100%;
.tree {
height: 618px;
margin-top: 10px;
overflow-x: hidden;
}
.sort-flag-row {
margin-top: 10px;
margin-bottom: 10px;
}
.sort-span {
margin-left: 5px;
color: @success-color;
}
.no-data {
margin: 10px;
}
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/employee-department-form-modal/index.vue
+94
View File
@@ -0,0 +1,94 @@
<!--
* 部门 员工 弹窗
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-modal v-model:visible="visible" title="调整部门" :footer="null" destroyOnClose>
<DepartmentTree ref="departmentTree" :height="400" :showMenu="false" />
<div class="footer">
<a-button style="margin-right: 8px" @click="closeModal">取消</a-button>
<a-button type="primary" @click="handleOk">提交</a-button>
</div>
</a-modal>
</template>
<script setup lang="ts">
import { message } from 'ant-design-vue';
import _ from 'lodash';
import { ref } from 'vue';
import DepartmentTree from '../department-tree/index.vue';
import { employeeApi } from '/@/api/system/employee/employee-api';
import { smartSentry } from '/@/lib/smart-sentry';
import { SmartLoading } from '/@/components/framework/smart-loading';
// ----------------------- 以下是字段定义 emits props ---------------------
const emit = defineEmits(['refresh']);
// ----------------------- 显示/隐藏 ------------------------
const departmentTree = ref();
const visible = ref(false);
const employeeIdList = ref([]);
//显示
async function showModal(selectEmployeeId) {
employeeIdList.value = selectEmployeeId;
visible.value = true;
}
//隐藏
function closeModal() {
visible.value = false;
}
// ----------------------- form操作 ---------------------------------
async function handleOk() {
SmartLoading.show();
try {
if (_.isEmpty(employeeIdList.value)) {
message.warning('请选择要调整的员工');
return;
}
if (_.isEmpty(departmentTree.value.selectedKeys)) {
message.warning('请选择要调整的部门');
return;
}
let departmentId = departmentTree.value.selectedKeys[0];
let params = {
employeeIdList: employeeIdList.value,
departmentId: departmentId,
};
await employeeApi.batchUpdateDepartmentEmployee(params);
message.success('操作成功');
emit('refresh');
closeModal();
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({
showModal,
});
</script>
<style scoped lang="less">
.footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 10px 16px;
background: #fff;
text-align: right;
z-index: 1;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/employee-form-modal/index.vue
+224
View File
@@ -0,0 +1,224 @@
<!--
* 员工 表单 弹窗
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-drawer
:title="form.employeeId ? '编辑' : '添加'"
:width="600"
:visible="visible"
:body-style="{ paddingBottom: '80px' }"
@close="onClose"
destroyOnClose
>
<a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
<a-form-item label="姓名" name="actualName">
<a-input v-model:value.trim="form.actualName" placeholder="请输入姓名" />
</a-form-item>
<a-form-item label="手机号" name="phone">
<a-input v-model:value.trim="form.phone" placeholder="请输入手机号" />
</a-form-item>
<a-form-item label="部门" name="departmentId">
<DepartmentTreeSelect ref="departmentTreeSelect" width="100%" :init="false" v-model:value="form.departmentId" />
</a-form-item>
<a-form-item label="登录名" name="loginName">
<a-input v-model:value.trim="form.loginName" placeholder="请输入登录名" />
<p class="hint">初始密码默认为：随机</p>
</a-form-item>
<a-form-item label="性别" name="gender">
<smart-enum-select style="width: 100%" v-model:value="form.gender" placeholder="请选择性别" enum-name="GENDER_ENUM" />
</a-form-item>
<a-form-item label="状态" name="disabledFlag">
<a-select v-model:value="form.disabledFlag" placeholder="请选择状态">
<a-select-option :value="0">启用</a-select-option>
<a-select-option :value="1">禁用</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="角色" name="roleIdList">
<a-select mode="multiple" v-model:value="form.roleIdList" optionFilterProp="title" placeholder="请选择角色">
<a-select-option v-for="item in roleList" :key="item.roleId" :title="item.roleName">{{ item.roleName }}</a-select-option>
</a-select>
</a-form-item>
</a-form>
<div class="footer">
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" style="margin-right: 8px" @click="onSubmit(false)">保存</a-button>
<a-button v-if="!form.employeeId" type="primary" @click="onSubmit(true)">保存并继续添加</a-button>
</div>
</a-drawer>
</template>
<script setup>
import { message } from 'ant-design-vue';
import _ from 'lodash';
import { nextTick, reactive, ref } from 'vue';
import { employeeApi } from '/@/api/system/employee/employee-api';
import { roleApi } from '/@/api/system/role/role-api';
import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue';
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
import { GENDER_ENUM } from '/@/constants/common-const';
import { regular } from '/@/constants/regular-const';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
// ----------------------- 以下是字段定义 emits props ---------------------
const departmentTreeSelect = ref();
// emit
const emit = defineEmits(['refresh', 'show-account']);
// ----------------------- 显示/隐藏 ---------------------
const visible = ref(false); // 是否展示抽屉
// 隐藏
function onClose() {
reset();
visible.value = false;
}
// 显示
async function showDrawer(rowData) {
Object.assign(form, formDefault);
if (rowData && !_.isEmpty(rowData)) {
Object.assign(form, rowData);
}
visible.value = true;
nextTick(() => {
queryAllRole();
});
}
// ----------------------- 表单显示 ---------------------
const roleList = ref([]); //角色列表
async function queryAllRole() {
let res = await roleApi.queryAll();
roleList.value = res.data;
}
const formRef = ref(); // 组件ref
const formDefault = {
id: undefined,
actualName: undefined,
departmentId: undefined,
disabledFlag: 0,
leaveFlag: 0,
gender: GENDER_ENUM.MAN.value,
loginName: undefined,
phone: undefined,
roleIdList: undefined,
};
let form = reactive(_.cloneDeep(formDefault));
function reset() {
Object.assign(form, formDefault);
formRef.value.resetFields();
}
// ----------------------- 表单提交 ---------------------
// 表单规则
const rules = {
actualName: [
{ required: true, message: '姓名不能为空' },
{ max: 30, message: '姓名不能大于30个字符', trigger: 'blur' },
],
phone: [
{ required: true, message: '手机号不能为空' },
{ pattern: regular.phone, message: '请输入正确的手机号码', trigger: 'blur' },
],
loginName: [
{ required: true, message: '登录账号不能为空' },
{ max: 30, message: '登录账号不能大于30个字符', trigger: 'blur' },
],
gender: [{ required: true, message: '性别不能为空' }],
departmentId: [{ required: true, message: '部门不能为空' }],
disabledFlag: [{ required: true, message: '状态不能为空' }],
leaveFlag: [{ required: true, message: '在职状态不能为空' }],
};
// 校验表单
function validateForm(formRef) {
return new Promise((resolve) => {
formRef
.validate()
.then(() => {
resolve(true);
})
.catch(() => {
resolve(false);
});
});
}
// 提交数据
async function onSubmit(keepAdding) {
let validateFormRes = await validateForm(formRef.value);
if (!validateFormRes) {
message.error('参数验证错误，请仔细填写表单数据!');
return;
}
SmartLoading.show();
if (form.employeeId) {
await updateEmployee(keepAdding);
} else {
await addEmployee(keepAdding);
}
}
async function addEmployee(keepAdding) {
try {
let { data } = await employeeApi.addEmployee(form);
message.success('添加成功');
emit('show-account', form.loginName, data);
if (keepAdding) {
reset();
} else {
onClose();
}
emit('refresh');
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
}
async function updateEmployee(keepAdding) {
try {
let result = await employeeApi.updateEmployee(form);
message.success('更新成功');
if (keepAdding) {
reset();
} else {
onClose();
}
emit('refresh');
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({
showDrawer,
});
</script>
<style scoped lang="less">
.footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 10px 16px;
background: #fff;
text-align: right;
z-index: 1;
}
.hint {
margin-top: 5px;
color: #bfbfbf;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/employee-list/index.vue
+390
View File
@@ -0,0 +1,390 @@
<!--
* 员工 列表
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-card class="employee-container">
<div class="header">
<a-typography-title :level="5">部门人员</a-typography-title>
<div class="query-operate">
<a-radio-group v-model:value="params.disabledFlag" style="margin: 8px; flex-shrink: 0" @change="queryEmployeeByKeyword(false)">
<a-radio-button :value="undefined">全部</a-radio-button>
<a-radio-button :value="false">启用</a-radio-button>
<a-radio-button :value="true">禁用</a-radio-button>
</a-radio-group>
<a-input-search v-model:value.trim="params.keyword" placeholder="姓名/手机号/登录账号" @search="queryEmployeeByKeyword(true)">
<template #enterButton>
<a-button style="margin-left: 8px" type="primary">
<template #icon>
<SearchOutlined />
</template>
查询
</a-button>
</template>
</a-input-search>
<a-button @click="reset">
<template #icon>
<ReloadOutlined />
</template>
重置
</a-button>
</div>
</div>
<div class="btn-group">
<a-button class="btn" type="primary" @click="showDrawer" v-privilege="'system:employee:add'" size="small">添加成员</a-button>
<a-button class="btn" size="small" @click="updateEmployeeDepartment" v-privilege="'system:employee:department:update'">调整部门</a-button>
<a-button class="btn" size="small" @click="batchDelete" v-privilege="'system:employee:delete'">批量删除</a-button>
<span class="smart-table-column-operate">
<TableOperator v-model="columns" :tableId="TABLE_ID_CONST.SYSTEM.EMPLOYEE" :refresh="queryEmployee" />
</span>
</div>
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
size="small"
:columns="columns"
:data-source="tableData"
:pagination="false"
:loading="tableLoading"
:scroll="{ x: 1200 }"
row-key="employeeId"
bordered
>
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.dataIndex === 'disabledFlag'">
<a-tag :color="text ? 'error' : 'processing'">{{ text ? '禁用' : '启用' }}</a-tag>
</template>
<template v-else-if="column.dataIndex === 'gender'">
<span>{{ $smartEnumPlugin.getDescByValue('GENDER_ENUM', text) }}</span>
</template>
<template v-else-if="column.dataIndex === 'operate'">
<div class="smart-table-operate">
<a-button v-privilege="'system:employee:update'" type="link" size="small" @click="showDrawer(record)">编辑</a-button>
<a-button
v-privilege="'system:employee:password:reset'"
type="link"
size="small"
@click="resetPassword(record.employeeId, record.loginName)"
>重置密码</a-button
>
<a-button v-privilege="'system:employee:disabled'" type="link" @click="updateDisabled(record.employeeId, record.disabledFlag)">{{
record.disabledFlag ? '启用' : '禁用'
}}</a-button>
</div>
</template>
</template>
</a-table>
<div class="smart-query-table-page">
<a-pagination
showSizeChanger
showQuickJumper
show-less-items
:pageSizeOptions="PAGE_SIZE_OPTIONS"
:defaultPageSize="params.pageSize"
v-model:current="params.pageNum"
v-model:pageSize="params.pageSize"
:total="total"
@change="queryEmployee"
@showSizeChange="queryEmployee"
:show-total="showTableTotal"
/>
</div>
<EmployeeFormModal ref="employeeFormModal" @refresh="queryEmployee" @show-account="showAccount" />
<EmployeeDepartmentFormModal ref="employeeDepartmentFormModal" @refresh="queryEmployee" />
<EmployeePasswordDialog ref="employeePasswordDialog" />
</a-card>
</template>
<script setup lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import _ from 'lodash';
import { computed, createVNode, reactive, ref, watch } from 'vue';
import { employeeApi } from '/@/api/system/employee/employee-api';
import { PAGE_SIZE } from '/@/constants/common-const';
import { SmartLoading } from '/@/components/framework/smart-loading';
import EmployeeFormModal from '../employee-form-modal/index.vue';
import EmployeeDepartmentFormModal from '../employee-department-form-modal/index.vue';
import EmployeePasswordDialog from '../employee-password-dialog/index.vue';
import { PAGE_SIZE_OPTIONS, showTableTotal } from '/@/constants/common-const';
import { smartSentry } from '/@/lib/smart-sentry';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
// ----------------------- 以下是字段定义 emits props ---------------------
const props = defineProps({
departmentId: Number,
breadcrumb: Array,
});
//-------------回显账号密码信息----------
let employeePasswordDialog = ref();
function showAccount(accountName, passWord) {
employeePasswordDialog.value.showModal(accountName, passWord);
}
// ----------------------- 表格/列表/ 搜索 ---------------------
//字段
const columns = ref([
{
title: '姓名',
dataIndex: 'actualName',
width: 85,
},
{
title: '手机号',
dataIndex: 'phone',
width: 80,
},
{
title: '性别',
dataIndex: 'gender',
width: 40,
},
{
title: '登录账号',
dataIndex: 'loginName',
width: 100,
},
{
title: '状态',
dataIndex: 'disabledFlag',
width: 60,
},
{
title: '角色',
dataIndex: 'roleNameList',
width: 100,
},
{
title: '部门',
dataIndex: 'departmentName',
ellipsis: true,
width: 200,
},
{
title: '操作',
dataIndex: 'operate',
width: 120,
},
]);
const tableData = ref();
let defaultParams = {
departmentId: undefined,
disabledFlag: false,
keyword: undefined,
searchCount: undefined,
pageNum: 1,
pageSize: PAGE_SIZE,
sortItemList: undefined,
};
const params = reactive({ ...defaultParams });
const total = ref(0);
// 搜索重置
function reset() {
Object.assign(params, defaultParams);
queryEmployee();
}
const tableLoading = ref(false);
// 查询
async function queryEmployee() {
tableLoading.value = true;
try {
params.departmentId = props.departmentId;
let res = await employeeApi.queryEmployee(params);
tableData.value = res.data.list;
total.value = res.data.total;
// 清除选中
selectedRowKeys.value = [];
selectedRows.value = [];
} catch (error) {
smartSentry.captureError(error);
} finally {
tableLoading.value = false;
}
}
// 根据关键字 查询
async function queryEmployeeByKeyword(allDepartment) {
tableLoading.value = true;
try {
params.pageNum = 1;
params.departmentId = allDepartment ? undefined : props.departmentId;
let res = await employeeApi.queryEmployee(params);
tableData.value = res.data.list;
total.value = res.data.total;
// 清除选中
selectedRowKeys.value = [];
selectedRows.value = [];
} catch (error) {
smartSentry.captureError(error);
} finally {
tableLoading.value = false;
}
}
watch(
() => props.departmentId,
() => {
if (props.departmentId !== params.departmentId) {
params.pageNum = 1;
queryEmployee();
}
},
{ immediate: true }
);
// ----------------------- 多选操作 ---------------------
let selectedRowKeys = ref([]);
let selectedRows = ref([]);
// 是否有选中：用于 批量操作按钮的禁用
const hasSelected = computed(() => selectedRowKeys.value.length > 0);
function onSelectChange(keyArray, selectRows) {
selectedRowKeys.value = keyArray;
selectedRows.value = selectRows;
}
// 批量删除员工
function batchDelete() {
if (!hasSelected.value) {
message.warning('请选择要删除的员工');
return;
}
const actualNameArray = selectedRows.value.map((e) => e.actualName);
const employeeIdArray = selectedRows.value.map((e) => e.employeeId);
Modal.confirm({
title: '确定要删除如下员工吗?',
icon: createVNode(ExclamationCircleOutlined),
content: _.join(actualNameArray, ','),
okText: '删除',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
await employeeApi.batchDeleteEmployee(employeeIdArray);
message.success('删除成功');
queryEmployee();
selectedRowKeys.value = [];
selectedRows.value = [];
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
// 批量更新员工部门
const employeeDepartmentFormModal = ref();
function updateEmployeeDepartment() {
if (!hasSelected.value) {
message.warning('请选择要调整部门的员工');
return;
}
const employeeIdArray = selectedRows.value.map((e) => e.employeeId);
employeeDepartmentFormModal.value.showModal(employeeIdArray);
}
// ----------------------- 添加、修改、禁用、重置密码 ------------------------------------
const employeeFormModal = ref(); //组件
// 展示编辑弹窗
function showDrawer(rowData) {
let params = {};
if (rowData) {
params = _.cloneDeep(rowData);
params.disabledFlag = params.disabledFlag ? 1 : 0;
} else if (props.departmentId) {
params.departmentId = props.departmentId;
}
employeeFormModal.value.showDrawer(params);
}
// 重置密码
function resetPassword(id, name) {
Modal.confirm({
title: '提醒',
icon: createVNode(ExclamationCircleOutlined),
content: '确定要重置密码吗?',
okText: '确定',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
let { data: passWord } = await employeeApi.resetPassword(id);
message.success('重置成功');
employeePasswordDialog.value.showModal(name, passWord);
queryEmployee();
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
// 禁用 / 启用
function updateDisabled(id, disabledFlag) {
Modal.confirm({
title: '提醒',
icon: createVNode(ExclamationCircleOutlined),
content: `确定要${disabledFlag ? '启用' : '禁用'}吗?`,
okText: '确定',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
await employeeApi.updateDisabled(id);
message.success(`${disabledFlag ? '启用' : '禁用'}成功`);
queryEmployee();
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
</script>
<style scoped lang="less">
.employee-container {
height: 100%;
}
.header {
display: flex;
align-items: center;
}
.query-operate {
margin-left: auto;
display: flex;
align-items: center;
}
.btn-group {
margin: 10px 0;
.btn {
margin-right: 8px;
}
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/components/employee-password-dialog/index.vue
+79
View File
@@ -0,0 +1,79 @@
<!--
* 员工 修改密码的 显示密码弹窗
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<a-modal v-model:visible="visible" :zIndex="9999" :width="500" title="提示" :closable="false" :maskClosable="false">
<!-- -->
<ul>
<li>登录名: {{ showLoginName }}</li>
<li>密码: {{ showLoginPassword }}</li>
</ul>
<template #footer>
<a-button
type="primary"
class="account-copy"
:data-clipboard-text="`登录名：${showLoginName}
密码：${showLoginPassword}`"
size="middle"
@click="copy"
>复制密码并关闭</a-button
>
</template>
</a-modal>
</template>
<script setup>
import { message } from 'ant-design-vue';
import Clipboard from 'clipboard';
import { ref } from 'vue';
let visible = ref(false); // 是否展示抽屉
let showLoginName = ref(''); //登录名
let showLoginPassword = ref(''); //登录密码
function copy() {
handleCopy();
visible.value = false;
}
function showModal(loginName, loginPassword) {
visible.value = true;
showLoginName.value = loginName;
showLoginPassword.value = loginPassword;
}
function handleCopy() {
let clipboard = new Clipboard('.account-copy');
clipboard.on('success', (e) => {
message.info('复制成功');
console.log('复制成功');
// 释放内存
clipboard.destroy();
});
clipboard.on('error', (e) => {
// 不支持复制
message.error('浏览器不支持复制，请您手动选择复制');
// 释放内存
clipboard.destroy();
});
}
defineExpose({
showModal,
});
</script>
<style lang="less" scoped>
ul {
margin: 0;
padding: 0;
list-style: none;
padding-left: 32%;
li {
font-weight: bold;
font-size: 16px;
}
}
</style>
>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/department-mitt.ts
+11
View File
@@ -0,0 +1,11 @@
/*
* 部门event bus
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-07-12 23:32:48
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*/
import mitt from 'mitt';
export default mitt();
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/department/index.vue
+72
View File
@@ -0,0 +1,72 @@
<!--
* 组织架构
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-08-08 20:46:18
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
<div class="height100">
<a-row :gutter="16" class="height100">
<a-col :span="6">
<DepartmentTree ref="departmentTree" />
</a-col>
<a-col :span="18" class="height100">
<div class="employee-box height100">
<!-- <DepartmentChildren style="flex-grow: 1" :breadcrumb="breadcrumb" :selectedDepartmentChildren="selectedDepartmentChildren" /> -->
<EmployeeList style="flex-grow: 2.5" class="employee" :departmentId="selectedDepartmentId" />
</div>
</a-col>
</a-row>
</div>
</template>
<script setup>
import _ from 'lodash';
import { computed, ref } from 'vue';
import DepartmentChildren from './components/department-children/index.vue';
import DepartmentTree from './components/department-tree/index.vue';
import EmployeeList from './components/employee-list/index.vue';
const departmentTree = ref();
// 部门 面包屑
const breadcrumb = computed(() => {
if (departmentTree.value) {
return departmentTree.value.breadcrumb;
}
return [];
});
// 当前选中部门的孩子
const selectedDepartmentChildren = computed(() => {
if (departmentTree.value) {
return departmentTree.value.selectedDepartmentChildren;
}
return [];
});
// 当前选中的部门id
const selectedDepartmentId = computed(() => {
if (departmentTree.value) {
let selectedKeys = departmentTree.value.selectedKeys;
return _.isEmpty(selectedKeys) ? null : selectedKeys[0];
}
return null;
});
</script>
<style scoped lang="less">
.height100 {
height: 100%;
}
.employee-box {
display: flex;
flex-direction: column;
.employee {
flex-grow: 2;
}
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-data-scope/index.vue
+157
View File
@@ -0,0 +1,157 @@
<!--
* 角色 数据范围
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<div>
<div class="btn-group">
<a-button class="button-style" type="primary" @click="updateDataScope" v-privilege="'system:role:dataScope:update'"> 保存 </a-button>
<a-button class="button-style" @click="getDataScope" v-privilege="'role:query'"> 刷新 </a-button>
</div>
<a-row class="header">
<a-col class="tab-margin" :span="4">业务单据</a-col>
<a-col class="tab-data" :span="8">查看数据范围</a-col>
<a-col class="tab-margin" :span="12" />
</a-row>
<div class="data-container">
<a-row class="data" align="middle" justify="center" v-for="(item, index) in dataScopeList" :key="item.dataScopeType">
<a-col class="tab-margin" :span="4">
{{ item.dataScopeTypeName }}
</a-col>
<a-col class="tab-data" :span="8">
<a-radio-group v-model:value="selectedDataScopeList[index].viewType">
<a-radio
v-for="scope in item.viewTypeList"
:key="`${item.dataScopeType}-${scope.viewType}`"
class="radio-style"
:value="scope.viewType"
>{{ scope.viewTypeName }}</a-radio
>
</a-radio-group>
</a-col>
<a-col class="tab-margin tab-desc" :span="12">
<p>{{ item.dataScopeTypeDesc }}</p>
</a-col>
</a-row>
</div>
</div>
</template>
<script setup>
import { message } from 'ant-design-vue';
import _ from 'lodash';
import { inject, onMounted, ref, watch } from 'vue';
import { roleApi } from '/@/api/system/role/role-api';
import { smartSentry } from '/@/lib/smart-sentry';
const props = defineProps({
value: Number,
});
defineEmits(['update:value']);
// ----------------------- 显示 ---------------------------------
let selectRoleId = inject('selectRoleId');
let dataScopeList = ref([]);
let selectedDataScopeList = ref([]);
watch(
() => selectRoleId.value,
() => getRoleDataScope()
);
onMounted(getDataScope);
// 获取系统支持的所有种类的数据范围
async function getDataScope() {
let result = await roleApi.getDataScopeList();
dataScopeList.value = result.data;
selectedDataScopeList.value = [];
dataScopeList.value.forEach((item) => {
selectedDataScopeList.value.push({
viewType: undefined,
dataScopeType: item.dataScopeType,
});
});
getRoleDataScope();
}
// 获取数据范围根据角色id，并赋予选中状态
async function getRoleDataScope() {
let result = await roleApi.getDataScopeByRoleId(selectRoleId.value);
let data = result.data;
selectedDataScopeList.value = [];
dataScopeList.value.forEach((item) => {
let find = data.find((e) => e.dataScopeType == item.dataScopeType);
selectedDataScopeList.value.push({
viewType: find ? find.viewType : undefined,
dataScopeType: item.dataScopeType,
});
});
}
// ----------------------- 数据范围更新 ---------------------------------
// 更新
async function updateDataScope() {
try {
let data = {
roleId: selectRoleId.value,
dataScopeItemList: selectedDataScopeList.value.filter((e) => !_.isUndefined(e.viewType)),
};
await roleApi.updateRoleDataScopeList(data);
message.success('保存成功');
getDataScope();
} catch (e) {
smartSentry.captureError(e);
}
}
</script>
<style scoped lang="less">
.btn-group {
text-align: right;
}
.button-style {
margin: 0 10px;
}
.header {
border-bottom: 1px solid #f2f2f2;
font-weight: 600;
margin: 10px 0px;
}
.tab-data {
margin: 10px 0px;
}
.data-container {
height: 680px;
overflow-y: scroll;
}
.data {
border-bottom: 1px solid #f2f2f2;
margin: 10px 0px;
}
.radio-style {
display: block;
height: 30px;
line-height: 30px;
}
.tab-margin {
text-align: center;
margin: 10px 0px;
}
.tab-desc {
line-height: 30px;
font-size: 16px;
text-align: left;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-employee-list/index.vue
+263
View File
@@ -0,0 +1,263 @@
<!--
* 角色 员工 列表
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<div>
<div class="header">
<div>
关键字：
<a-input style="width: 250px" v-model:value="queryForm.keywords" placeholder="姓名/手机号/登录账号" />
<a-button class="button-style" v-if="selectRoleId" type="primary" @click="queryRoleEmployee">搜索</a-button>
<a-button class="button-style" v-if="selectRoleId" type="default" @click="resetQueryRoleEmployee">重置</a-button>
</div>
<div>
<a-button class="button-style" v-if="selectRoleId" type="primary" @click="addRoleEmployee" v-privilege="'system:role:employee:add'"
>添加员工</a-button
>
<a-button class="button-style" v-if="selectRoleId" type="primary" danger @click="batchDelete" v-privilege="'system:role:employee:batch:delete'"
>批量移除</a-button
>
</div>
</div>
<a-table
:loading="tableLoading"
:dataSource="tableData"
:columns="columns"
:pagination="false"
:scroll="{ y: 400 }"
rowKey="employeeId"
:row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
size="small"
bordered
>
<template #bodyCell="{ text, record, column }">
<template v-if="column.dataIndex === 'disabledFlag'">
<a-tag :color="text ? 'error' : 'processing'">{{ text ? '禁用' : '启用' }}</a-tag>
</template>
<template v-else-if="column.dataIndex === 'gender'">
<span>{{ $smartEnumPlugin.getDescByValue('GENDER_ENUM', text) }}</span>
</template>
<template v-if="column.dataIndex === 'operate'">
<a @click="deleteEmployeeRole(record.employeeId)" v-privilege="'system:role:employee:delete'">移除</a>
</template>
</template>
</a-table>
<div class="smart-query-table-page">
<a-pagination
showSizeChanger
showQuickJumper
show-less-items
:pageSizeOptions="PAGE_SIZE_OPTIONS"
:defaultPageSize="queryForm.pageSize"
v-model:current="queryForm.pageNum"
v-model:pageSize="queryForm.pageSize"
:total="total"
@change="queryRoleEmployee"
@showSizeChange="queryRoleEmployee"
:show-total="showTableTotal"
/>
</div>
<EmployeeTableSelectModal ref="selectEmployeeModal" @selectData="selectData" />
</div>
</template>
<script setup>
import { message, Modal } from 'ant-design-vue';
import _ from 'lodash';
import { computed, inject, onMounted, reactive, ref, watch } from 'vue';
import { roleApi } from '/@/api/system/role/role-api';
import { PAGE_SIZE, showTableTotal, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { SmartLoading } from '/@/components/framework/smart-loading';
import EmployeeTableSelectModal from '/@/components/system/employee-table-select-modal/index.vue';
import { smartSentry } from '/@/lib/smart-sentry';
// ----------------------- 以下是字段定义 emits props ---------------------
let selectRoleId = inject('selectRoleId');
// ----------------------- 员工列表：显示和搜索 ------------------------
watch(
() => selectRoleId.value,
() => queryRoleEmployee()
);
onMounted(queryRoleEmployee);
const defaultQueryForm = {
pageNum: 1,
pageSize: PAGE_SIZE,
roleId: undefined,
keywords: undefined,
};
// 查询表单
const queryForm = reactive({ ...defaultQueryForm });
// 总数
const total = ref(0);
// 表格数据
const tableData = ref([]);
// 表格loading效果
const tableLoading = ref(false);
function resetQueryRoleEmployee() {
queryForm.keywords = '';
queryRoleEmployee();
}
async function queryRoleEmployee() {
try {
tableLoading.value = true;
queryForm.roleId = selectRoleId.value;
let res = await roleApi.queryRoleEmployee(queryForm);
tableData.value = res.data.list;
total.value = res.data.total;
} catch (e) {
smartSentry.captureError(e);
} finally {
tableLoading.value = false;
}
}
const columns = reactive([
{
title: '姓名',
dataIndex: 'actualName',
},
{
title: '手机号',
dataIndex: 'phone',
},
{
title: '登录账号',
dataIndex: 'loginName',
},
{
title: '部门',
dataIndex: 'departmentName',
},
{
title: '状态',
dataIndex: 'disabledFlag',
},
{
title: '操作',
dataIndex: 'operate',
width: 60,
},
]);
// ----------------------- 添加成员 ---------------------------------
const selectEmployeeModal = ref();
async function addRoleEmployee() {
let res = await roleApi.getRoleAllEmployee(selectRoleId.value);
let selectedIdList = res.data.map((e) => e.roleId) || [];
selectEmployeeModal.value.showModal(selectedIdList);
}
async function selectData(list) {
if (_.isEmpty(list)) {
message.warning('请选择角色人员');
return;
}
SmartLoading.show();
try {
let params = {
employeeIdList: list,
roleId: selectRoleId.value,
};
await roleApi.batchAddRoleEmployee(params);
message.success('添加成功');
await queryRoleEmployee();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
}
// ----------------------- 移除成员 ---------------------------------
// 删除角色成员方法
async function deleteEmployeeRole(employeeId) {
Modal.confirm({
title: '提示',
content: '确定要删除该角色成员么？',
okText: '确定',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
await roleApi.deleteEmployeeRole(employeeId, selectRoleId.value);
message.success('移除成功');
await queryRoleEmployee();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
// ----------------------- 批量删除 ---------------------------------
const selectedRowKeyList = ref([]);
const hasSelected = computed(() => selectedRowKeyList.value.length > 0);
function onSelectChange(selectedRowKeys) {
selectedRowKeyList.value = selectedRowKeys;
}
// 批量移除
function batchDelete() {
if (!hasSelected.value) {
message.warning('请选择要删除的角色成员');
return;
}
Modal.confirm({
title: '提示',
content: '确定移除这些角色成员吗？',
okText: '确定',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
let params = {
employeeIdList: selectedRowKeyList.value,
roleId: selectRoleId.value,
};
await roleApi.batchRemoveRoleEmployee(params);
message.success('移除成功');
selectedRowKeyList.value = [];
await queryRoleEmployee();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
</script>
<style scoped lang="less">
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0;
}
.button-style {
margin: 0 10px;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-form-modal/index.vue
+111
View File
@@ -0,0 +1,111 @@
<!--
* 角色 表单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<a-modal :title="form.roleId ? '编辑角色' : '添加角色'" :width="600" :visible="modalVisible" @cancel="onClose" :footer="null">
<a-form ref="formRef" :model="form" :rules="rules" :labelCol="{ span: 4 }">
<a-form-item label="角色名称" name="roleName">
<a-input style="width: 100%" placeholder="请输入角色名称" v-model:value="form.roleName" />
</a-form-item>
<a-form-item label="角色备注">
<a-input style="width: 100%" placeholder="请输入角色备注" v-model:value="form.remark" />
</a-form-item>
</a-form>
<div class="footer">
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" @click="submitForm">提交</a-button>
</div>
</a-modal>
</template>
<script setup>
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { roleApi } from '/@/api/system/role/role-api';
import { smartSentry } from '/@/lib/smart-sentry';
import { SmartLoading } from '/@/components/framework/smart-loading';
// ----------------------- 以下是字段定义 emits props ---------------------
let emits = defineEmits(['refresh']);
defineExpose({
showModal,
});
// ----------------------- modal 显示与隐藏 ---------------------
const modalVisible = ref(false);
function showModal(role) {
Object.assign(form, formDefault);
if (role) {
Object.assign(form, role);
}
modalVisible.value = true;
}
function onClose() {
Object.assign(form, formDefault);
modalVisible.value = false;
}
// ----------------------- 表单 ---------------------
const formRef = ref();
const formDefault = {
id: undefined,
remark: undefined,
roleName: undefined,
};
let form = reactive({ ...formDefault });
// 表单规则
const rules = {
roleName: [{ required: true, message: '请输入角色名称' }],
};
// 提交表单
async function submitForm() {
formRef.value
.validate()
.then(async () => {
SmartLoading.show();
try {
if (form.roleId) {
await roleApi.updateRole(form);
} else {
await roleApi.addRole(form);
}
message.info(`${form.roleId ? '编辑' : '添加'}成功`);
emits('refresh');
onClose();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
})
.catch((error) => {
message.error('参数验证错误，请仔细填写表单数据!');
});
}
</script>
<style scoped lang="less">
.footer {
width: 100%;
border-top: 1px solid #e9e9e9;
padding: 10px 16px;
background: #fff;
text-align: right;
z-index: 1;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-list/index.vue
+116
View File
@@ -0,0 +1,116 @@
<!--
* 角色 列表
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<a-card title="角色列表" class="role-container" style="padding: 0">
<template #extra>
<a-button type="primary" size="small" @click="showRoleFormModal" v-privilege="'system:role:add'">添加</a-button>
</template>
<a-menu mode="vertical" v-model:selectedKeys="selectedKeys">
<a-menu-item v-for="item in roleList" :key="item.roleId">
<a-popover placement="right">
<template #content>
<div style="display: flex; flex-direction: column">
<a-button type="text" @click="deleteRole(item.roleId)" v-privilege="'system:role:delete'">删除</a-button>
<a-button type="text" @click="showRoleFormModal(item)" v-privilege="'system:role:update'">编辑</a-button>
</div>
</template>
{{ item.roleName }}
</a-popover>
</a-menu-item>
</a-menu>
</a-card>
<RoleFormModal ref="roleFormModal" @refresh="queryAllRole" />
</template>
<script setup>
import { message, Modal } from 'ant-design-vue';
import _ from 'lodash';
import { computed, onMounted, ref } from 'vue';
import { roleApi } from '/@/api/system/role/role-api';
import { SmartLoading } from '/@/components/framework/smart-loading';
import RoleFormModal from '../role-form-modal/index.vue';
import { smartSentry } from '/@/lib/smart-sentry';
// ----------------------- 角色列表显示 ---------------------
const roleList = ref([]);
onMounted(queryAllRole);
// 查询列表
async function queryAllRole() {
let res = await roleApi.queryAll();
roleList.value = res.data;
if (!_.isEmpty(res.data) && res.data[0].roleId) {
selectedKeys.value = [res.data[0].roleId];
}
}
let selectedKeys = ref([]);
const selectRoleId = computed(() => {
if (!selectedKeys.value && _.isEmpty(selectedKeys.value)) {
return null;
}
return selectedKeys.value[0];
});
// ----------------------- 添加、修改、删除 ---------------------------------
const roleFormModal = ref();
// 显示表单框
function showRoleFormModal(role) {
roleFormModal.value.showModal(role);
}
// 删除角色
function deleteRole(roleId) {
if (!roleId) {
return;
}
Modal.confirm({
title: '提示',
content: '确定要删除该角色么？',
okText: '确定',
okType: 'danger',
async onOk() {
SmartLoading.show();
try {
await roleApi.deleteRole(roleId);
message.info('删除成功');
queryAllRole();
} catch (e) {
smartSentry.captureError(e);
} finally {
SmartLoading.hide();
}
},
cancelText: '取消',
onCancel() {},
});
}
// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({
selectRoleId,
});
</script>
<style scoped lang="less">
.role-container {
height: 100%;
overflow-y: auto;
:deep(.ant-card-body) {
padding: 5px;
}
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
border-right: none;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-setting/index.vue
+44
View File
@@ -0,0 +1,44 @@
<!--
* 角色 设置
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<a-card class="role-container">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="角色-功能权限">
<RoleTree />
</a-tab-pane>
<a-tab-pane key="2" tab="角色-数据范围">
<RoleDataScope />
</a-tab-pane>
<a-tab-pane key="3" tab="角色-员工列表">
<RoleEmployeeList />
</a-tab-pane>
</a-tabs>
</a-card>
</template>
<script setup>
import { ref } from 'vue';
import RoleDataScope from '../role-data-scope/index.vue';
import RoleEmployeeList from '../role-employee-list/index.vue';
import RoleTree from '../role-tree/index.vue';
defineProps({
value: Number,
});
defineEmits(['update:value']);
let activeKey = ref();
</script>
<style scoped lang="less">
.role-container {
height: 100%;
}
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-tree/index.less
+78
View File
@@ -0,0 +1,78 @@
:deep(.ant-checkbox-group) {
width: 100%;
}
.tree-header {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0;
}
.col-desc {
margin: 20px 0;
font-size: 15px;
color: #95a5a6;
padding: 0 20px;
}
.button-style {
margin: 20px 0 20px 0;
padding-left: 20px;
text-align: right;
}
.check-right {
margin-right: 20px;
}
.row-border {
border: 1px solid #f0f0f0;
}
.col-border {
line-height: 50px;
padding-left: 20px;
border-right: 1px solid #f0f0f0;
}
.col-left {
line-height: 50px;
padding-left: 40px;
border-right: 1px solid #f0f0f0;
}
.col-right {
padding-left: 20px;
border-right: 1px solid #f0f0f0;
}
.checked-box {
padding: 0 15px;
:deep(ul li::marker) {
content: '';
}
:deep(ul) {
padding: 0;
margin: 0;
li {
list-style: none;
padding: 0;
margin: 10px 0;
.menu {
border-bottom: 1px solid rgb(240, 240, 240);
display: flex;
align-items: center;
line-height: 25px;
}
.point {
display: flex;
align-items: center;
.point-label {
flex: 1;
padding-left: 40px;
border-left: 1px rgb(240, 240, 240) solid;
}
}
.checked-box-label {
min-width: 150px;
}
}
}
}
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-tree/index.vue
+74
View File
@@ -0,0 +1,74 @@
<!--
* 角色 树形结构
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<div>
<div class="tree-header">
<p>设置角色对应的功能操作、后台管理权限</p>
<a-button v-if="selectRoleId" type="primary" @click="saveChange" v-privilege="'system:role:menu:update'"> 保存 </a-button>
</div>
<!-- 功能权限勾选部分 -->
<RoleTreeCheckbox :tree="tree" />
</div>
</template>
<script setup>
import { inject, ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import _ from 'lodash';
import RoleTreeCheckbox from './role-tree-checkbox.vue';
import { roleMenuApi } from '/@/api/system/role-menu/role-menu-api';
import { useRoleStore } from '/@/store/modules/system/role';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
let roleStore = useRoleStore();
let tree = ref();
let selectRoleId = inject('selectRoleId');
watch(selectRoleId, () => getRoleSelectedMenu(), {
immediate: true,
});
async function getRoleSelectedMenu() {
if (!selectRoleId.value) {
return;
}
let res = await roleMenuApi.getRoleSelectedMenu(selectRoleId.value);
let data = res.data;
if (_.isEmpty(roleStore.treeMap)) {
roleStore.initTreeMap(data.menuTreeList || []);
}
roleStore.initCheckedData(data.selectedMenuId || []);
tree.value = data.menuTreeList;
}
async function saveChange() {
let checkedData = roleStore.checkedData;
if (_.isEmpty(checkedData)) {
message.error('还未选择任何权限');
return;
}
let params = {
roleId: selectRoleId.value,
menuIdList: checkedData,
};
SmartLoading.show();
try {
await roleMenuApi.updateRoleMenu(params);
message.success('保存成功');
} catch (error) {
smartSentry.captureError(error);
} finally {
SmartLoading.hide();
}
}
</script>
<style scoped lang="less">
@import './index.less';
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-tree/role-tree-checkbox.vue
+49
View File
@@ -0,0 +1,49 @@
<!--
* 角色
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<div style="height: 542px; overflow: auto">
<a-checkbox-group v-model:value="checkedData">
<div class="checked-box">
<ul>
<!--li 菜单模块 start-->
<RoleTreeMenu :tree="props.tree" :index="0" />
<!--li 菜单模块 end-->
</ul>
</div>
</a-checkbox-group>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRoleStore } from '/@/store/modules/system/role';
import RoleTreeMenu from '../role-tree/role-tree-menu.vue';
let props = defineProps({
tree: {
type: Array,
default: [],
},
});
defineEmits('update:value');
let roleStore = useRoleStore();
let checkedData = ref();
watch(
() => roleStore.checkedData,
(e) => (checkedData.value = e),
{
deep: true,
}
);
</script>
<style scoped lang="less">
@import './index.less';
</style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-tree/role-tree-menu.vue
+64
View File
@@ -0,0 +1,64 @@
<!--
* 角色 菜单
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<li v-for="module in props.tree" :key="module.menuId">
<div class="menu" :style="{ marginLeft: `${props.index * 4}%` }">
<a-checkbox @change="selectCheckbox(module)" class="checked-box-label" :value="module.menuId">{{ module.menuName }} </a-checkbox>
<div v-if="module.children && module.children.some((e) => e.menuType == MENU_TYPE_ENUM.POINTS.value)">
<RoleTreePoint :tree="module.children" @selectCheckbox="selectCheckbox" />
</div>
</div>
<template v-if="module.children && !module.children.some((e) => e.menuType == MENU_TYPE_ENUM.POINTS.value)">
<RoleTreeMenu :tree="module.children" :index="props.index + 1" />
</template>
</li>
</template>
<script setup>
import { MENU_TYPE_ENUM } from '/@/constants/system/menu-const';
import { useRoleStore } from '/@/store/modules/system/role';
import RoleTreePoint from './role-tree-point.vue';
import RoleTreeMenu from '../role-tree/role-tree-menu.vue';
const props = defineProps({
tree: {
type: Array,
default: [],
},
index: {
type: Number,
default: 0,
},
});
defineEmits('update:value');
let roleStore = useRoleStore();
function selectCheckbox(module) {
if (!module.menuId) {
return;
}
// 是否勾选
let checkedData = roleStore.checkedData;
let findIndex = checkedData.indexOf(module.menuId);
// 选中
if (findIndex == -1) {
// 选中本级以及子级
roleStore.addCheckedDataAndChildren(module);
// 选中上级
roleStore.selectUpperLevel(module);
// 是否有关联菜单 有则选中
if (module.contextMenuId) {
roleStore.addCheckedData(module.contextMenuId);
}
} else {
// 取消选中本级以及子级
roleStore.deleteCheckedDataAndChildren(module);
}
}
</script>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/components/role-tree/role-tree-point.vue
+33
View File
@@ -0,0 +1,33 @@
<!--
* 角色 功能点
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<div class="point">
<div class="point-label">
<template v-for="module in props.tree" :key="module.menuId">
<a-checkbox @change="emits('selectCheckbox', module)" :value="module.menuId">{{ module.menuName }} </a-checkbox>
</template>
</div>
</div>
</template>
<script setup>
const props = defineProps({
tree: {
type: Array,
default: [],
},
index: {
type: Number,
default: 0,
},
});
let emits = defineEmits('selectCheckbox');
</script>
<style scoped lang="less"></style>
smart-admin-web/javascript-ant-design-vue3/src/views/system/employee/role/index.vue
+45
View File
@@ -0,0 +1,45 @@
<!--
* 角色 管理
*
* @Author: 1024创新实验室-主任：卓大
* @Date: 2022-09-12 22:34:00
* @Wechat: zhuda1024
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*
-->
<template>
<div class="height100">
<a-row :gutter="10" type="flex" class="height100">
<a-col flex="200px">
<RoleList ref="roleList" />
</a-col>
<a-col flex="1">
<RoleSetting />
</a-col>
</a-row>
</div>
</template>
<script setup>
import { computed, provide, ref } from 'vue';
import RoleList from './components/role-list/index.vue';
import RoleSetting from './components/role-setting/index.vue';
defineProps({
value: Object,
});
defineEmits('update:value');
let roleList = ref();
const selectRoleId = computed(() => {
if (!roleList.value) {
return null;
}
return roleList.value.selectRoleId;
});
provide('selectRoleId', selectRoleId);
</script>
<style scoped lang="less">
.height100 {
height: 100%;
}
</style>