|
@ -9,7 +9,7 @@ |
|
|
<ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button> |
|
|
<ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button> |
|
|
<ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button> |
|
|
<ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button> |
|
|
<ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button> |
|
|
<ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button> |
|
|
<a-tree :tree-data="treeData" @select="handleSelect"> |
|
|
<a-tree :tree-data="apartmentTreeData" @select="SelectApartmentTree"> |
|
|
<template #title="{ title }"> |
|
|
<template #title="{ title }"> |
|
|
{{ title }} |
|
|
{{ title }} |
|
|
</template> |
|
|
</template> |
|
@ -18,11 +18,21 @@ |
|
|
<a-col :span="12" class="list"> |
|
|
<a-col :span="12" class="list"> |
|
|
<a-tabs v-model:activeKey="activeKey"> |
|
|
<a-tabs v-model:activeKey="activeKey"> |
|
|
<a-tab-pane key="1" tab="部门信息"> |
|
|
<a-tab-pane key="1" tab="部门信息"> |
|
|
<ns-form :schemas="formSchema" :model="formData" /> |
|
|
<ns-form :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 |
|
|
|
|
|
@select="ApartmentSelect"> |
|
|
|
|
|
<template #title="{ title }"> |
|
|
|
|
|
{{ title }} |
|
|
|
|
|
</template> |
|
|
|
|
|
</a-tree> |
|
|
</a-tab-pane> |
|
|
</a-tab-pane> |
|
|
<a-tab-pane key="2" tab="部门权限">2</a-tab-pane> |
|
|
|
|
|
</a-tabs> |
|
|
</a-tabs> |
|
|
<ns-button style="margin: 10px" type="primary">取消</ns-button> |
|
|
<ns-button style="margin: 20px" type="primary" @click="CancelApartment">取消</ns-button> |
|
|
<ns-button type="primary" @click="ApartmentSure">{{ |
|
|
<ns-button type="primary" @click="ApartmentSure">{{ |
|
|
disabled ? '编辑' : '确定' |
|
|
disabled ? '编辑' : '确定' |
|
|
}}</ns-button> |
|
|
}}</ns-button> |
|
@ -36,7 +46,7 @@ |
|
|
<ns-button style="margin: 10px" type="primary" @click="addUser">新增角色</ns-button> |
|
|
<ns-button style="margin: 10px" type="primary" @click="addUser">新增角色</ns-button> |
|
|
<ns-button type="primary" @click="addUserSon">新增子角色</ns-button> |
|
|
<ns-button type="primary" @click="addUserSon">新增子角色</ns-button> |
|
|
<ns-button style="margin: 10px" type="primary" @click="deleteUser">删除</ns-button> |
|
|
<ns-button style="margin: 10px" type="primary" @click="deleteUser">删除</ns-button> |
|
|
<a-tree :tree-data="treeData" @select="handleSelect"> |
|
|
<a-tree :tree-data="userTreeData" @select="SelectUserTree"> |
|
|
<template #title="{ title }"> |
|
|
<template #title="{ title }"> |
|
|
{{ title }} |
|
|
{{ title }} |
|
|
</template> |
|
|
</template> |
|
@ -45,28 +55,53 @@ |
|
|
<a-col :span="12" class="list"> |
|
|
<a-col :span="12" class="list"> |
|
|
<a-tabs v-model:activeKey="activeKey2"> |
|
|
<a-tabs v-model:activeKey="activeKey2"> |
|
|
<a-tab-pane key="1" tab="角色信息"> |
|
|
<a-tab-pane key="1" tab="角色信息"> |
|
|
<ns-form :schemas="formSchema" :model="formData" /> |
|
|
<ns-form |
|
|
|
|
|
:schemas="formSchema2" |
|
|
|
|
|
:model="formData2" |
|
|
|
|
|
formLayout="vertical" |
|
|
|
|
|
class="form" /> |
|
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
<a-tab-pane key="2" tab="角色权限"> |
|
|
|
|
|
<a-tree |
|
|
|
|
|
:tree-data="userAdminTreeData" |
|
|
|
|
|
v-model:checkedKeys="UsercheckedKeys" |
|
|
|
|
|
checkable |
|
|
|
|
|
@select="UserSelect"> |
|
|
|
|
|
<template #title="{ title }"> |
|
|
|
|
|
{{ title }} |
|
|
|
|
|
</template> |
|
|
|
|
|
</a-tree> |
|
|
</a-tab-pane> |
|
|
</a-tab-pane> |
|
|
<a-tab-pane key="2" tab="角色权限">2</a-tab-pane> |
|
|
|
|
|
</a-tabs> |
|
|
</a-tabs> |
|
|
<ns-button style="margin: 10px" type="primary">取消</ns-button> |
|
|
<ns-button style="margin: 20px" type="primary" @click="CancelUser">取消</ns-button> |
|
|
<ns-button type="primary">确定</ns-button> |
|
|
<ns-button type="primary" @click="UserSure">{{ disabled2 ? '编辑' : '确定' }}</ns-button> |
|
|
</a-col> |
|
|
</a-col> |
|
|
</a-row> |
|
|
</a-row> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import { createVNode, defineComponent, reactive, ref } from 'vue'; |
|
|
import { createVNode, defineComponent, reactive, ref, watch } from 'vue'; |
|
|
import { Modal } from 'ant-design-vue'; |
|
|
import { Modal } from 'ant-design-vue'; |
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; |
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; |
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
export default defineComponent({ |
|
|
export default defineComponent({ |
|
|
name: 'OrderListIndex', |
|
|
name: 'authorityManageIndex', |
|
|
setup() { |
|
|
setup() { |
|
|
|
|
|
const ApartcheckedKeys = ref<string[]>([]); |
|
|
|
|
|
const UsercheckedKeys = ref<string[]>([]); |
|
|
|
|
|
|
|
|
|
|
|
watch(ApartcheckedKeys, () => { |
|
|
|
|
|
console.log('checkedKeys', ApartcheckedKeys.value); |
|
|
|
|
|
}); |
|
|
|
|
|
watch(UsercheckedKeys, () => { |
|
|
|
|
|
console.log('checkedKeys', UsercheckedKeys.value); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const activeKey = ref('1'); |
|
|
const activeKey = ref('1'); |
|
|
const activeKey2 = ref('1'); |
|
|
const activeKey2 = ref('1'); |
|
|
const disabled = ref(false); |
|
|
const disabled = ref(false); |
|
|
|
|
|
const disabled2 = ref(false); |
|
|
|
|
|
|
|
|
const addApartment = () => { |
|
|
const addApartment = () => { |
|
|
disabled.value = false; |
|
|
disabled.value = false; |
|
@ -88,7 +123,7 @@ |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
const addUser = () => { |
|
|
const addUser = () => { |
|
|
disabled.value = false; |
|
|
disabled2.value = false; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const addUserSon = () => { |
|
|
const addUserSon = () => { |
|
@ -107,15 +142,41 @@ |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const handleSelect = (selectedKeys: any, info: any) => { |
|
|
const SelectApartmentTree = (selectedKeys: any, info: any) => { |
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
console.log(info, 'info'); |
|
|
console.log(info, 'info'); |
|
|
}; |
|
|
}; |
|
|
|
|
|
const SelectUserTree = (selectedKeys: any, info: any) => { |
|
|
|
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
|
|
|
console.log(info, 'info'); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const ApartmentSelect = (selectedKeys: any, info: any) => { |
|
|
|
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
|
|
|
console.log(info, 'info'); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const UserSelect = (selectedKeys: any, info: any) => { |
|
|
|
|
|
console.log(selectedKeys, 'selectedKeys'); |
|
|
|
|
|
console.log(info, 'info'); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const ApartmentSure = () => { |
|
|
const ApartmentSure = () => { |
|
|
disabled.value = !disabled.value; |
|
|
disabled.value = !disabled.value; |
|
|
}; |
|
|
}; |
|
|
|
|
|
const UserSure = () => { |
|
|
|
|
|
disabled2.value = !disabled2.value; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const CancelApartment = () => { |
|
|
|
|
|
disabled.value = true; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const CancelUser = () => { |
|
|
|
|
|
disabled2.value = true; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const treeData = [ |
|
|
const apartmentTreeData = [ |
|
|
{ |
|
|
{ |
|
|
title: '铁路总局', |
|
|
title: '铁路总局', |
|
|
key: '0-0', |
|
|
key: '0-0', |
|
@ -125,11 +186,69 @@ |
|
|
], |
|
|
], |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
|
|
|
const userTreeData = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '产品总监', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ title: '产品经理', key: '0-0-0' }, |
|
|
|
|
|
{ title: '产品助理', key: '0-0-1' }, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const apartmentAdminTreeData = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '首页', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '控制台', |
|
|
|
|
|
key: '0-0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ title: 'leaf', key: '0-0-0-0' }, |
|
|
|
|
|
{ title: 'leaf', key: '0-0-0-1' }, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '用户管理', |
|
|
|
|
|
key: '0-0-1', |
|
|
|
|
|
children: [{ key: '0-0-1-0', title: 'sss' }], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const userAdminTreeData = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '首页', |
|
|
|
|
|
key: '0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '工作台', |
|
|
|
|
|
key: '0-0-0', |
|
|
|
|
|
children: [ |
|
|
|
|
|
{ title: 'leaf', key: '0-0-0-0' }, |
|
|
|
|
|
{ title: 'leaf', key: '0-0-0-1' }, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '系统管理', |
|
|
|
|
|
key: '0-0-1', |
|
|
|
|
|
children: [{ key: '0-0-1-0', title: 'sss' }], |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
let formData = reactive({ |
|
|
let formData = reactive({ |
|
|
department: '', |
|
|
department: '', |
|
|
remark: '', |
|
|
remark: '', |
|
|
}); |
|
|
}); |
|
|
|
|
|
let formData2 = reactive({ |
|
|
|
|
|
department: '', |
|
|
|
|
|
remark: '', |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const formSchema = reactive([ |
|
|
const formSchema = reactive([ |
|
|
{ |
|
|
{ |
|
@ -234,21 +353,142 @@ |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
]); |
|
|
]); |
|
|
|
|
|
const formSchema2 = reactive([ |
|
|
|
|
|
{ |
|
|
|
|
|
field: 'field111', |
|
|
|
|
|
component: 'NsChildForm', |
|
|
|
|
|
componentProps: { |
|
|
|
|
|
schemas: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '角色名称', |
|
|
|
|
|
field: 'department', |
|
|
|
|
|
component: 'NsSelect', |
|
|
|
|
|
componentProps: { |
|
|
|
|
|
disabled: disabled2, |
|
|
|
|
|
placeholder: '请选择角色名称', |
|
|
|
|
|
options: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '正常', |
|
|
|
|
|
value: 1, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '冻结', |
|
|
|
|
|
value: 2, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
rules: [ |
|
|
|
|
|
{ |
|
|
|
|
|
required: false, |
|
|
|
|
|
message: '请选择角色名称', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '上级领导', |
|
|
|
|
|
field: 'department', |
|
|
|
|
|
component: 'NsSelect', |
|
|
|
|
|
componentProps: { |
|
|
|
|
|
disabled: disabled2, |
|
|
|
|
|
placeholder: '请选择上级领导', |
|
|
|
|
|
options: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '正常', |
|
|
|
|
|
value: 1, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '冻结', |
|
|
|
|
|
value: 2, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '节点编码', |
|
|
|
|
|
field: 'department', |
|
|
|
|
|
component: 'NsSelect', |
|
|
|
|
|
componentProps: { |
|
|
|
|
|
disabled: disabled2, |
|
|
|
|
|
placeholder: '请选择节点编码', |
|
|
|
|
|
options: [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '正常', |
|
|
|
|
|
value: 1, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '冻结', |
|
|
|
|
|
value: 2, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
rules: [ |
|
|
|
|
|
{ |
|
|
|
|
|
required: false, |
|
|
|
|
|
message: '请选择节点编码', |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
label: '是否部门领导', |
|
|
|
|
|
field: 'sex', |
|
|
|
|
|
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 { |
|
|
return { |
|
|
disabled, |
|
|
disabled, |
|
|
|
|
|
disabled2, |
|
|
formSchema, |
|
|
formSchema, |
|
|
|
|
|
formSchema2, |
|
|
formData, |
|
|
formData, |
|
|
treeData, |
|
|
formData2, |
|
|
handleSelect, |
|
|
apartmentTreeData, |
|
|
|
|
|
userTreeData, |
|
|
|
|
|
SelectApartmentTree, |
|
|
|
|
|
SelectUserTree, |
|
|
activeKey, |
|
|
activeKey, |
|
|
activeKey2, |
|
|
activeKey2, |
|
|
ApartmentSure, |
|
|
ApartmentSure, |
|
|
|
|
|
UserSure, |
|
|
addApartment, |
|
|
addApartment, |
|
|
addApartmentSon, |
|
|
addApartmentSon, |
|
|
deleteApartment, |
|
|
deleteApartment, |
|
|
deleteUser, |
|
|
deleteUser, |
|
|
addUser, |
|
|
addUser, |
|
|
addUserSon, |
|
|
addUserSon, |
|
|
|
|
|
CancelApartment, |
|
|
|
|
|
CancelUser, |
|
|
|
|
|
apartmentAdminTreeData, |
|
|
|
|
|
ApartmentSelect, |
|
|
|
|
|
ApartcheckedKeys, |
|
|
|
|
|
userAdminTreeData, |
|
|
|
|
|
UsercheckedKeys, |
|
|
|
|
|
UserSelect, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
@ -301,6 +541,6 @@ |
|
|
width: calc(100% + 32px); |
|
|
width: calc(100% + 32px); |
|
|
} |
|
|
} |
|
|
.form { |
|
|
.form { |
|
|
margin-left: 10px; |
|
|
margin: 20px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|