feat:"tijaio"
This commit is contained in:
dinghao
@@ -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="treeData" @select="handleSelect">
|
||||
<a-tree :tree-data="apartmentTreeData" @select="SelectApartmentTree">
|
||||
<template #title="{ title }">
|
||||
{{ title }}
|
||||
</template>
|
||||
@@ -18,11 +18,21 @@
|
||||
<a-col :span="12" class="list">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<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 key="2" tab="部门权限">2</a-tab-pane>
|
||||
</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">{{
|
||||
disabled ? '编辑' : '确定'
|
||||
}}</ns-button>
|
||||
@@ -36,7 +46,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="treeData" @select="handleSelect">
|
||||
<a-tree :tree-data="userTreeData" @select="SelectUserTree">
|
||||
<template #title="{ title }">
|
||||
{{ title }}
|
||||
</template>
|
||||
@@ -45,28 +55,53 @@
|
||||
<a-col :span="12" class="list">
|
||||
<a-tabs v-model:activeKey="activeKey2">
|
||||
<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 key="2" tab="角色权限">2</a-tab-pane>
|
||||
</a-tabs>
|
||||
<ns-button style="margin: 10px" type="primary">取消</ns-button>
|
||||
<ns-button type="primary">确定</ns-button>
|
||||
<ns-button style="margin: 20px" type="primary" @click="CancelUser">取消</ns-button>
|
||||
<ns-button type="primary" @click="UserSure">{{ disabled2 ? '编辑' : '确定' }}</ns-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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 { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
export default defineComponent({
|
||||
name: 'OrderListIndex',
|
||||
name: 'authorityManageIndex',
|
||||
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 activeKey2 = ref('1');
|
||||
const disabled = ref(false);
|
||||
const disabled2 = ref(false);
|
||||
|
||||
const addApartment = () => {
|
||||
disabled.value = false;
|
||||
@@ -88,7 +123,7 @@
|
||||
});
|
||||
};
|
||||
const addUser = () => {
|
||||
disabled.value = false;
|
||||
disabled2.value = false;
|
||||
};
|
||||
|
||||
const addUserSon = () => {
|
||||
@@ -107,15 +142,41 @@
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelect = (selectedKeys: any, info: any) => {
|
||||
const SelectApartmentTree = (selectedKeys: any, info: any) => {
|
||||
console.log(selectedKeys, 'selectedKeys');
|
||||
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 = () => {
|
||||
disabled.value = !disabled.value;
|
||||
};
|
||||
const UserSure = () => {
|
||||
disabled2.value = !disabled2.value;
|
||||
};
|
||||
|
||||
const treeData = [
|
||||
const CancelApartment = () => {
|
||||
disabled.value = true;
|
||||
};
|
||||
|
||||
const CancelUser = () => {
|
||||
disabled2.value = true;
|
||||
};
|
||||
|
||||
const apartmentTreeData = [
|
||||
{
|
||||
title: '铁路总局',
|
||||
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({
|
||||
department: '',
|
||||
remark: '',
|
||||
});
|
||||
let formData2 = reactive({
|
||||
department: '',
|
||||
remark: '',
|
||||
});
|
||||
|
||||
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 {
|
||||
disabled,
|
||||
disabled2,
|
||||
formSchema,
|
||||
formSchema2,
|
||||
formData,
|
||||
treeData,
|
||||
handleSelect,
|
||||
formData2,
|
||||
apartmentTreeData,
|
||||
userTreeData,
|
||||
SelectApartmentTree,
|
||||
SelectUserTree,
|
||||
activeKey,
|
||||
activeKey2,
|
||||
ApartmentSure,
|
||||
UserSure,
|
||||
addApartment,
|
||||
addApartmentSon,
|
||||
deleteApartment,
|
||||
deleteUser,
|
||||
addUser,
|
||||
addUserSon,
|
||||
CancelApartment,
|
||||
CancelUser,
|
||||
apartmentAdminTreeData,
|
||||
ApartmentSelect,
|
||||
ApartcheckedKeys,
|
||||
userAdminTreeData,
|
||||
UsercheckedKeys,
|
||||
UserSelect,
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -301,6 +541,6 @@
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
.form {
|
||||
margin-left: 10px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user