This commit is contained in:
dinghao
2024-05-28 11:08:57 +08:00
parent d2b0a2ca06
commit de08945d49
12 changed files with 1125 additions and 476 deletions

View File

@@ -9,7 +9,7 @@
<ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button>
<ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button>
<ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button>
<a-tree :tree-data="apartmentTreeData" @select="SelectApartmentTree">
<a-tree :tree-data="apartmentTreeData" defaultExpandAll @select="SelectApartmentTree">
<template #title="{ title }">
{{ title }}
</template>
@@ -18,13 +18,19 @@
<a-col :span="12" class="list">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="部门信息">
<ns-form :schemas="formSchema" :model="formData" formLayout="vertical" class="form" />
<ns-form
ref="formRef"
:schemas="formSchema"
:model="formData"
formLayout="vertical"
class="form" />
</a-tab-pane>
<a-tab-pane key="2" tab="部门权限">
<a-tree
:tree-data="apartmentAdminTreeData"
v-model:checkedKeys="ApartcheckedKeys"
checkable
defaultExpandAll
@select="ApartmentSelect">
<template #title="{ title }">
{{ title }}
@@ -46,7 +52,7 @@
<ns-button style="margin: 10px" type="primary" @click="addUser">新增角色</ns-button>
<ns-button type="primary" @click="addUserSon">新增子角色</ns-button>
<ns-button style="margin: 10px" type="primary" @click="deleteUser">删除</ns-button>
<a-tree :tree-data="userTreeData" @select="SelectUserTree">
<a-tree :tree-data="userTreeData" defaultExpandAll @select="SelectUserTree">
<template #title="{ title }">
{{ title }}
</template>
@@ -65,6 +71,7 @@
<a-tree
:tree-data="userAdminTreeData"
v-model:checkedKeys="UsercheckedKeys"
defaultExpandAll
checkable
@select="UserSelect">
<template #title="{ title }">
@@ -86,9 +93,12 @@
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { http } from '/nerv-lib/util/http';
import { uuid } from '@antv/x6/lib/util/string/uuid';
import { cloneDeep } from 'lodash-es';
import { formConfig, formConfig2 } from './config';
export default defineComponent({
name: 'AuthorityManageIndex',
setup() {
const formRef = ref();
let formData = ref({});
let formData2 = ref({});
const activeKey = ref('1');
@@ -97,7 +107,12 @@
const disabled2 = ref(true);
const ApartcheckedKeys = ref<string[]>([]);
const UsercheckedKeys = ref<string[]>([]);
const selectKey = ref();
const selectRef = ref();
const selectKey2 = ref();
const selectRef2 = ref();
const formSchema = formConfig(disabled as any);
const formSchema2 = formConfig2(disabled2 as any);
watch(ApartcheckedKeys, () => {
console.log('checkedKeys', ApartcheckedKeys.value);
});
@@ -115,9 +130,10 @@
{
title: '铁路总局',
key: '0-0',
info: { name: '铁路总局' },
children: [
{ title: '济阳站', key: '0-0-0' },
{ title: '临沂站', key: '0-0-1' },
{ title: '济阳站', key: '0-0-0', info: { name: '济阳站' } },
{ title: '临沂站', key: '0-0-1', info: { name: '临沂站' } },
],
},
]);
@@ -127,8 +143,8 @@
title: '产品总监',
key: '0-0',
children: [
{ title: '产品经理', key: '0-0-0' },
{ title: '产品助理', key: '0-0-1' },
{ title: '产品经理', key: '0-0-0', info: { departname: '产品经理' } },
{ title: '产品助理', key: '0-0-1', info: { departname: '产品助理' } },
],
},
]);
@@ -182,14 +198,22 @@
const addUserSon = () => {
disabled.value = false;
opMap.type = 'addson';
};
const deleteApartment = () => {
Modal.confirm({
title: '是否确认删除',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, ''),
onOk() {},
onOk() {
function deepDel(data = apartmentTreeData.value[0].children) {
data.map((item, index) => {
if (item.key === selectKey.value) data.splice(index, 1);
});
}
deepDel();
console.log(selectKey.value);
},
onCancel() {
console.log('Cancel');
},
@@ -202,7 +226,15 @@
title: '是否确认删除',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, ''),
onOk() {},
onOk() {
function deepDel(data = userTreeData.value[0].children) {
data.map((item, index) => {
if (item.key === selectKey2.value) data.splice(index, 1);
});
}
deepDel();
console.log(selectKey2.value);
},
onCancel() {
console.log('Cancel');
},
@@ -213,12 +245,18 @@
const SelectApartmentTree = (selectedKeys: any, info: any) => {
disabled.value = false;
console.log(selectedKeys, 'selectedKeys');
console.log(info, 'info');
console.log(info.node.dataRef, 'info');
selectKey.value = selectedKeys[0];
selectRef.value = info.node.dataRef;
formData.value = info.node.dataRef.info;
};
const SelectUserTree = (selectedKeys: any, info: any) => {
disabled2.value = false;
console.log(selectedKeys, 'selectedKeys');
console.log(info, 'info');
console.log(info.node.dataRef.info, 'info');
selectKey2.value = selectedKeys[0];
selectRef2.value = info.node.dataRef;
formData2.value = info.node.dataRef.info;
};
const CancelApartment = () => {
@@ -240,6 +278,8 @@
};
const ApartmentSure = () => {
// formRef.value?.triggerSubmit().then(() => {});
disabled.value = !disabled.value;
opMap.fuc && opMap.fuc(formData.value);
// console.log(formData.value.name, 'formData');
@@ -248,191 +288,42 @@
apartmentTreeData.value[0].children.push({
title: formData.value.name,
key: 'a1',
info: { ...formData.value },
});
} else {
} else if (selectRef.value && opMap.type === 'addson')
selectRef.value['children'] = [
{ key: '123', title: formData.value.name, info: { ...cloneDeep(formData.value) } },
];
else {
console.log('ss');
}
formData.value = {};
};
const UserSure = () => {
disabled2.value = !disabled2.value;
opMap.fuc && opMap.fuc(formData2.value);
console.log(formData2.value, 'formData2');
userTreeData.value[0].children.push({
title: formData2.value.departname,
key: 'a2',
});
console.log(opMap.type, 'opMap.type');
if (opMap.type === 'add') {
userTreeData.value[0].children.push({
title: formData2.value.departname,
key: 'a2',
info: { ...formData2.value },
});
} else if (selectRef2.value && opMap.type === 'addson')
selectRef2.value['children'] = [
{
key: '123',
title: formData2.value.departname,
info: { ...cloneDeep(formData2.value) },
},
];
else {
console.log('ss');
}
formData2.value = {};
};
const formSchema = reactive([
{
field: 'field111',
component: 'NsChildForm',
componentProps: {
schemas: [
{
label: '部门名称',
field: 'name',
component: 'NsInput',
componentProps: {
disabled: disabled,
placeholder: '请输入部门名称',
},
rules: [
{
required: false,
message: '请输入部门名称',
},
],
},
{
label: '上级部门',
field: 'department',
component: 'NsSelect',
componentProps: {
disabled: disabled,
placeholder: '请选择上级部门',
options: [
{
label: '部门1',
value: 1,
},
{
label: '部门2',
value: 2,
},
],
},
},
{
label: '部门编码',
field: 'code',
component: 'NsInput',
componentProps: {
disabled: disabled,
placeholder: '请输入部门编码',
},
rules: [
{
required: false,
message: '请输入部门编码',
},
],
},
{
label: '排序',
field: 'order',
component: 'NsInput',
componentProps: {
disabled: disabled,
placeholder: '请输入排序',
},
rules: [
{
required: false,
message: '请输入排序',
},
],
},
{
field: 'remark',
label: '备注',
component: 'NsTextarea',
componentProps: {
disabled: disabled,
placeholder: '请输入',
},
},
],
},
},
]);
const formSchema2 = reactive([
{
field: 'field111',
component: 'NsChildForm',
componentProps: {
schemas: [
{
label: '角色名称',
field: 'departname',
component: 'NsInput',
componentProps: {
disabled: disabled2,
placeholder: '请输入角色名称',
},
rules: [
{
required: false,
message: '请输入角色名称',
},
],
},
{
label: '上级领导',
field: 'department',
component: 'NsSelect',
componentProps: {
disabled: disabled2,
placeholder: '请选择上级领导',
options: [
{
label: '领导1',
value: 1,
},
{
label: '领导2',
value: 2,
},
],
},
},
{
label: '节点编码',
field: 'code',
component: 'NsInput',
componentProps: {
disabled: disabled2,
placeholder: '请输入节点编码',
},
rules: [
{
required: false,
message: '请输入节点编码',
},
],
},
{
label: '是否部门领导',
field: 'isleader',
component: 'NsRadioGroup',
componentProps: {
disabled: disabled2,
radioType: 'radio',
options: [
{ label: '是', value: 1 },
{ label: '否', value: 2 },
],
rules: [
{
required: false,
message: '请选择是否部门领导',
},
],
},
},
{
field: 'remark',
label: '备注',
component: 'NsTextarea',
componentProps: {
disabled: disabled2,
placeholder: '请输入',
},
},
],
},
},
]);
return {
disabled,
disabled2,
@@ -462,6 +353,7 @@
userAdminTreeData,
UsercheckedKeys,
UserSelect,
formRef,
};
},
});