You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
661 lines
17 KiB
661 lines
17 KiB
<!-- @format -->
|
|
|
|
<template>
|
|
<div class="main">
|
|
<div class="left">
|
|
<div class="top">
|
|
<ns-tree-api v-bind="orgTreeConfig" @select="handleSelect" v-model:treeData="treeData">
|
|
<template #title="data">
|
|
{{ data.orgInfo?.orgName }}
|
|
</template>
|
|
</ns-tree-api>
|
|
</div>
|
|
<div class="top">
|
|
<ns-tree-api
|
|
v-bind="deptTreeConfig"
|
|
@select="handleSelect2"
|
|
v-model:treeData="treeDataDept">
|
|
<template #title="data">
|
|
{{ data.deptInfo?.deptName }}
|
|
</template>
|
|
</ns-tree-api>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
|
|
</div>
|
|
<a-drawer
|
|
:width="500"
|
|
title=" "
|
|
:visible="visible"
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
destroyOnClose
|
|
@close="onClose">
|
|
<ns-form
|
|
ref="formRef"
|
|
:schemas="formSchema"
|
|
:model="formData"
|
|
class="form"
|
|
:wrapperCol="{ span: 20 }"
|
|
formLayout="vertical" />
|
|
<span class="admin">用户权限</span>
|
|
<ns-view-list-table
|
|
v-bind="tableConfig2"
|
|
class="drawerTable"
|
|
:model="data"
|
|
:pagination="false"
|
|
rowKey="uuid" />
|
|
<template #footer>
|
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
|
<a-button :disabled="!dynamicDisabled" type="primary" @click="onEdit">确定</a-button>
|
|
</template>
|
|
</a-drawer>
|
|
|
|
<a-modal
|
|
title="用户信息"
|
|
:width="520"
|
|
:visible="addformvisible"
|
|
cancelText="取消"
|
|
@ok="handleOk"
|
|
@cancel="handleClose">
|
|
<ns-form
|
|
ref="modalFormRef"
|
|
:wrapperCol="{ span: 24 }"
|
|
:schemas="formSchema2"
|
|
:model="formData2"
|
|
formLayout="vertical" />
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { computed, createVNode, defineComponent, reactive, ref, watchEffect } from 'vue';
|
|
import { http } from '/nerv-lib/util/http';
|
|
import { NsMessage, NsModal } from '/nerv-lib/component';
|
|
import { formConfig, formConfig2 } from './config';
|
|
import { origanizemanage } from '/@/api/origanizemanage';
|
|
|
|
defineOptions({ name: 'UserManageIndex' });
|
|
|
|
const mainRef = ref();
|
|
const data = reactive({});
|
|
let formData = ref({});
|
|
let formData2 = ref({});
|
|
const formRef = ref();
|
|
const modalFormRef = ref();
|
|
const visible = ref(false);
|
|
const addformvisible = ref(false);
|
|
const searchValue = ref<string>('');
|
|
const searchValue2 = ref<string>('');
|
|
const disabled = ref(false);
|
|
|
|
const opMap: any = ref({
|
|
type: 'add',
|
|
fuc: () => {},
|
|
record: {},
|
|
});
|
|
watchEffect(() => {
|
|
disabled.value = opMap.value.type === 'edit';
|
|
});
|
|
const formSchema = formConfig(disabled);
|
|
const casData = ref([]);
|
|
const formSchema2 = formConfig2(casData);
|
|
const treeData = ref([]);
|
|
const treeDataDept = ref([]);
|
|
const treeData2 = ref([]);
|
|
const userAuthList = ref([]);
|
|
// const orgId = JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgId;
|
|
const orgId = JSON.parse(sessionStorage.getItem('ORGID')!);
|
|
const orgTreeConfig = ref({
|
|
selectedKeys: ['0-0'],
|
|
defaultExpandAll: true,
|
|
api: origanizemanage.queryOrgTree,
|
|
params: { orgId },
|
|
transform: (data) => {
|
|
const otherOrg = data[0]?.listOrg;
|
|
let treeData = [];
|
|
// 特殊处理
|
|
if (data[0]?.orgInfo) {
|
|
treeData = data;
|
|
}
|
|
otherOrg?.map((item) => {
|
|
treeData.push({ orgInfo: item } as never);
|
|
});
|
|
return treeData;
|
|
},
|
|
header: {
|
|
title: '关联企业',
|
|
icon: 'orgLink',
|
|
},
|
|
formConfig: {
|
|
schemas: [
|
|
{
|
|
field: 'orgName',
|
|
component: 'NsInput',
|
|
autoSubmit: true,
|
|
componentProps: {
|
|
placeholder: '请输入企业名称',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
const deptTreeConfig = ref({
|
|
defaultExpandAll: true,
|
|
api: origanizemanage.queryDeptTree,
|
|
params: { orgId },
|
|
|
|
header: {
|
|
title: '关联部门',
|
|
icon: 'deptLink',
|
|
},
|
|
formConfig: {
|
|
schemas: [
|
|
{
|
|
field: 'deptName',
|
|
component: 'NsInput',
|
|
autoSubmit: true,
|
|
componentProps: {
|
|
placeholder: '请输入部门名称',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
});
|
|
const dynamicDisabled = computed(() => {
|
|
return formRef.value?.validateResult && userAuthList.value?.length;
|
|
});
|
|
const fetch = (api, params = { orgId }) => {
|
|
return http.post(api, params);
|
|
};
|
|
|
|
// 企业树
|
|
const getOrgTree = (params?) => {
|
|
fetch(origanizemanage.queryOrgTree, params).then((res) => {
|
|
const otherOrg = res.data[0].listOrg;
|
|
// 特殊处理
|
|
if (res.data[0].orgInfo) {
|
|
treeData.value = res.data;
|
|
}
|
|
otherOrg?.map((item) => {
|
|
treeData.value.push({ orgInfo: item } as never);
|
|
});
|
|
});
|
|
};
|
|
// getOrgTree();
|
|
// 部门树
|
|
// fetch(origanizemanage.queryDeptTree).then((res) => {
|
|
// treeData2.value = res.data;
|
|
// });
|
|
|
|
const onSearch = () => {
|
|
console.log(searchValue.value);
|
|
getOrgTree({ orgName: searchValue.value, orgId });
|
|
};
|
|
const onSearch2 = () => {
|
|
console.log(searchValue2.value);
|
|
fetch(origanizemanage.queryDeptTree, { deptName: searchValue2.value, orgId }).then((res) => {
|
|
treeData2.value = res.data;
|
|
});
|
|
};
|
|
|
|
const tableFetch = (params) => {
|
|
console.log(params, 'sdfasfasdfasdfasdf');
|
|
|
|
// console.log(mainRef.value);
|
|
|
|
tableConfig.value.params = {
|
|
...mainRef.value.params,
|
|
...params,
|
|
};
|
|
|
|
setTimeout(() => {
|
|
mainRef.value?.nsTableRef.reload();
|
|
}, 100);
|
|
};
|
|
|
|
const handleSelect = (selectedKeys: any, info: any) => {
|
|
console.log(info);
|
|
|
|
fetch(origanizemanage.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => {
|
|
treeDataDept.value = res.data;
|
|
});
|
|
tableFetch({ orgId: info.node?.orgInfo.orgId });
|
|
};
|
|
|
|
const handleSelect2 = (selectedKeys: any, info: any) => {
|
|
tableFetch({ deptId: info.node?.deptInfo.deptId });
|
|
};
|
|
|
|
const onClose = () => {
|
|
visible.value = false;
|
|
formData.value = {};
|
|
userAuthList.value.splice(0);
|
|
};
|
|
|
|
const onEdit = () => {
|
|
formRef.value?.triggerSubmit().then(() => {
|
|
console.log(formData.value, 'formData.value');
|
|
if (!userAuthList.value.length) {
|
|
NsMessage.error('请添加用户权限');
|
|
return;
|
|
}
|
|
|
|
opMap.value.fuc &&
|
|
opMap.value.fuc({ ...formData.value, userRoleList: userAuthList.value, orgId });
|
|
});
|
|
};
|
|
|
|
const handleOk = () => {
|
|
if (casData.value?.length !== 3) {
|
|
NsMessage.error('未选择角色');
|
|
}
|
|
const currentOrgId = casData.value[0].value;
|
|
const isSameOrg = userAuthList.value.filter(({ orgId }) => {
|
|
return orgId === currentOrgId;
|
|
});
|
|
if (isSameOrg?.length) {
|
|
NsMessage.error('同一组织只能添加一个角色');
|
|
return;
|
|
}
|
|
console.log(casData.value, userAuthList.value, 'formData2.value');
|
|
|
|
const str = casData.value.map((item) => item?.label).join('/');
|
|
userAuthList.value.push({
|
|
deptRoleInfoList: str,
|
|
roleId: casData.value[2].value,
|
|
roleName: casData.value[2].label,
|
|
orgId: casData.value[0].value,
|
|
} as never);
|
|
handleClose();
|
|
};
|
|
const handleClose = () => {
|
|
addformvisible.value = false;
|
|
casData.value = [];
|
|
modalFormRef.value.reset();
|
|
};
|
|
|
|
const tableConfig = ref({
|
|
title: '用户管理',
|
|
api: origanizemanage.userList,
|
|
params: {
|
|
orgId,
|
|
},
|
|
headerActions: [
|
|
{
|
|
label: '新增',
|
|
name: 'userAdd',
|
|
type: 'primary',
|
|
handle: () => {
|
|
opMap.value.type = 'add';
|
|
setTimeout(() => {
|
|
formData.value = {
|
|
sex: '男',
|
|
orgName: JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgName,
|
|
};
|
|
userAuthList.value.splice(0);
|
|
});
|
|
opMap.value.fuc = (formData: any) => {
|
|
return http.post(origanizemanage.addUser, formData).then(() => {
|
|
mainRef.value?.nsTableRef.reload();
|
|
visible.value = false;
|
|
NsMessage.success('操作成功');
|
|
});
|
|
};
|
|
visible.value = true;
|
|
},
|
|
},
|
|
{
|
|
label: '导入',
|
|
type: 'primary',
|
|
name: 'userImport',
|
|
handle: () => {},
|
|
},
|
|
{
|
|
label: '模板下载',
|
|
type: 'primary',
|
|
name: 'userTemDownload',
|
|
handle: () => {},
|
|
},
|
|
{
|
|
label: '导出',
|
|
type: 'primary',
|
|
name: 'userExports',
|
|
},
|
|
{
|
|
label: '批量删除',
|
|
type: 'primary',
|
|
name: 'userBatchDel',
|
|
dynamicDisabled: (data: any) => {
|
|
return data.list.length === 0;
|
|
},
|
|
confirm: true,
|
|
isReload: true,
|
|
isClearCheck: true,
|
|
api: origanizemanage.batchDel,
|
|
dynamicParams: { userIds: 'userId[]' },
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'address',
|
|
customRender: (text: any) => {
|
|
return text.index + 1;
|
|
},
|
|
textNumber: 3,
|
|
// sorter: true,
|
|
},
|
|
{
|
|
title: '账号',
|
|
dataIndex: 'accountNo',
|
|
// sorter: true,
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'realName',
|
|
// sorter: true,
|
|
},
|
|
{
|
|
title: '性别',
|
|
dataIndex: 'sex',
|
|
// sorter: true,
|
|
textNumber: 4,
|
|
},
|
|
{
|
|
title: '手机号',
|
|
dataIndex: 'telephone',
|
|
},
|
|
{
|
|
title: '邮箱',
|
|
textNumber: 5,
|
|
textEllipsis: true,
|
|
dataIndex: 'email',
|
|
},
|
|
{
|
|
title: '组织关系',
|
|
dataIndex: 'orgName',
|
|
// textNumber: 9,
|
|
// textEllipsis: true,
|
|
},
|
|
{
|
|
title: '部门/角色',
|
|
dataIndex: 'userRoleInfos',
|
|
customRender: ({ value }) => {
|
|
if (!value) return '-';
|
|
return createVNode('div', {}, [
|
|
createVNode('span', {}, value[0]?.deptRoleInfoList),
|
|
value.length > 1 &&
|
|
createVNode(
|
|
'a',
|
|
{
|
|
onClick: () =>
|
|
NsModal.info({
|
|
icon: null,
|
|
content: createVNode('div', {
|
|
innerHTML: value.map((item) => item?.deptRoleInfoList).join('<br>'),
|
|
}),
|
|
}),
|
|
},
|
|
`+${value.length}`,
|
|
),
|
|
]);
|
|
},
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'userStatus',
|
|
customRender: ({ value }) => ['正常', '冻结'][value],
|
|
},
|
|
],
|
|
columnActions: {
|
|
title: '操作',
|
|
actions: [
|
|
{
|
|
label: '编辑',
|
|
name: 'userEdit',
|
|
// dynamicParams: 'uuid',
|
|
handle: (record: any) => {
|
|
userAuthList.value.splice(0);
|
|
setTimeout(() => {
|
|
formData.value = record;
|
|
userAuthList.value.push(...record.userRoleInfos);
|
|
}, 10);
|
|
opMap.value.type = 'edit';
|
|
opMap.value.fuc = (formData: any) => {
|
|
return http.post(origanizemanage.editUser, formData).then(() => {
|
|
mainRef.value?.nsTableRef.reload();
|
|
visible.value = false;
|
|
NsMessage.success('操作成功');
|
|
});
|
|
};
|
|
visible.value = true;
|
|
},
|
|
},
|
|
{
|
|
label: '冻结',
|
|
name: 'userFrozen',
|
|
confirm: true,
|
|
defaultParams: { userStatus: 1 },
|
|
dynamicParams: 'userId',
|
|
isReload: true,
|
|
ifShow: ({ userStatus }) => userStatus === 0,
|
|
api: origanizemanage.frozen,
|
|
},
|
|
{
|
|
label: '解冻',
|
|
name: 'userUnFrozen',
|
|
confirm: true,
|
|
defaultParams: { userStatus: 0 },
|
|
dynamicParams: 'userId',
|
|
ifShow: ({ userStatus }) => userStatus === 1,
|
|
isReload: true,
|
|
api: origanizemanage.frozen,
|
|
},
|
|
{
|
|
label: '重置密码',
|
|
name: 'userCodeReset',
|
|
confirm: true,
|
|
handle: ({ userId }: any) => {
|
|
http
|
|
.post(origanizemanage.resetPwd, { userId, password: 123456 })
|
|
.then(() => NsModal.success({ content: '密码重置成功,初始密码123456' }));
|
|
},
|
|
},
|
|
{
|
|
label: '删除',
|
|
name: 'userDelete',
|
|
dynamicParams: 'userId',
|
|
confirm: true,
|
|
isReload: true,
|
|
api: origanizemanage.del,
|
|
},
|
|
],
|
|
},
|
|
|
|
formConfig: {
|
|
schemas: [
|
|
{
|
|
field: 'accountNo',
|
|
label: '账号名',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入账号名',
|
|
maxLength: 30,
|
|
},
|
|
},
|
|
{
|
|
field: 'realName',
|
|
label: '姓名',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入姓名',
|
|
maxLength: 30,
|
|
},
|
|
},
|
|
{
|
|
field: 'telephone',
|
|
label: '手机号',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入手机号',
|
|
maxLength: 11,
|
|
},
|
|
},
|
|
{
|
|
field: 'email',
|
|
label: '邮箱',
|
|
component: 'NsInput',
|
|
componentProps: {
|
|
placeholder: '请输入邮箱',
|
|
maxLength: 30,
|
|
},
|
|
},
|
|
{
|
|
field: 'userStatus',
|
|
label: '用户状态',
|
|
component: 'NsSelect',
|
|
componentProps: {
|
|
allowClear: true,
|
|
placeholder: '请选择用户状态',
|
|
options: [
|
|
{
|
|
label: '正常',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '冻结',
|
|
value: 1,
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
params: {},
|
|
},
|
|
// pagination: { defaultPageSize: 10 },
|
|
rowKey: 'userId',
|
|
});
|
|
const tableConfig2 = {
|
|
// api: {
|
|
// url: '/carbon_emission/device/getGatewayList',
|
|
// method: 'post',
|
|
// },
|
|
value: userAuthList.value,
|
|
rowSelection: null,
|
|
headerActions: [
|
|
{
|
|
label: '新增',
|
|
name: 'userAdd',
|
|
style: { marginBottom: '16px' },
|
|
// type: 'primary',
|
|
handle: () => {
|
|
addformvisible.value = true;
|
|
},
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
title: '角色信息',
|
|
dataIndex: 'userRoleList',
|
|
customRender: ({ record }) => {
|
|
if (record) {
|
|
// const res = record.userAuthList.reduce((pre, cur) => {
|
|
// pre.push(cur.label);
|
|
// return pre;
|
|
// }, []);
|
|
return record.deptRoleInfoList;
|
|
}
|
|
return '-';
|
|
},
|
|
},
|
|
],
|
|
columnActions: {
|
|
title: '操作',
|
|
actions: [
|
|
{
|
|
label: '删除',
|
|
name: 'userAdd',
|
|
confirm: true,
|
|
handle: (record: any, name: any, reload: any) => {
|
|
const id = record.roleId;
|
|
console.log(userAuthList.value, id);
|
|
let idx = 0;
|
|
userAuthList.value?.some((item, index) => {
|
|
idx = index;
|
|
if (item.roleId === id) return true;
|
|
});
|
|
userAuthList.value.splice(idx, 1);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
background-color: @ns-content-bg;
|
|
display: flex;
|
|
}
|
|
.left {
|
|
width: 300px;
|
|
// max-height: calc(100vh - 96px);
|
|
margin-right: @ns-gap;
|
|
min-width: fit-content;
|
|
> div {
|
|
border-radius: @ns-border-radius;
|
|
background-color: @white;
|
|
// box-shadow: @ns-content-box-shadow;
|
|
flex: 1;
|
|
}
|
|
.top:first-child {
|
|
margin-bottom: @ns-gap;
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.top {
|
|
overflow: auto;
|
|
// height: 50%;
|
|
// border-bottom: 5px solid rgb(229, 235, 240);
|
|
// overflow-y: auto;
|
|
}
|
|
.ns-table-title {
|
|
text-align: left;
|
|
// height: 46px;
|
|
line-height: 46px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding-left: 16px;
|
|
}
|
|
.admin {
|
|
text-align: left;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
user-select: text;
|
|
width: calc(100% + 32px);
|
|
}
|
|
.drawerTable {
|
|
:deep(.ns-table-container),
|
|
:deep(.ns-table-main) {
|
|
border-top: 0;
|
|
padding: 0;
|
|
.drawerTable {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top,
|
|
:deep(.ns-table-search),
|
|
:deep(.ns-table-main) {
|
|
box-shadow: @ns-content-box-shadow;
|
|
}
|
|
</style>
|
|
|