xuziqiang
6 months ago
2 changed files with 221 additions and 1 deletions
@ -0,0 +1,220 @@ |
|||
<!-- @format --> |
|||
|
|||
<template> |
|||
<div class="main"> |
|||
<div class="left"> |
|||
<div class="ns-table-title">部门管理</div> |
|||
<a-row> |
|||
<a-col :span="12" class="tree"> |
|||
<ns-button style="margin: 10px" type="primary">新增部门</ns-button> |
|||
<ns-button type="primary">新增子部门</ns-button> |
|||
<ns-button style="margin: 10px" type="primary">删除</ns-button> |
|||
<a-tree :tree-data="treeData" @select="handleSelect"> |
|||
<template #title="{ title }"> |
|||
{{ title }} |
|||
</template> |
|||
</a-tree> |
|||
</a-col> |
|||
<a-col :span="12" class="list"> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="部门信息"> |
|||
<ns-form :schemas="formSchema" :model="formData" disabled /> |
|||
</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> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
<div class="right"></div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { createVNode, defineComponent, reactive, ref } from 'vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
export default defineComponent({ |
|||
name: 'OrderListIndex', |
|||
setup() { |
|||
const activeKey = ref('1'); |
|||
|
|||
const treeData = [ |
|||
{ |
|||
title: '铁路总局', |
|||
key: '0-0', |
|||
children: [ |
|||
{ title: '济阳站', key: '0-0-0' }, |
|||
{ title: '临沂站', key: '0-0-1' }, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
let formData = reactive({ |
|||
department: '', |
|||
remark: '', |
|||
}); |
|||
|
|||
const handleSelect = (selectedKeys: any, info: any) => { |
|||
console.log(selectedKeys, 'selectedKeys'); |
|||
console.log(info, 'info'); |
|||
}; |
|||
|
|||
const formSchema = reactive([ |
|||
{ |
|||
field: 'field111', |
|||
component: 'NsChildForm', |
|||
componentProps: { |
|||
schemas: [ |
|||
{ |
|||
label: '部门名称', |
|||
field: 'department', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择部门', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 2, |
|||
}, |
|||
], |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: false, |
|||
message: '请选择部门', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '上级部门', |
|||
field: 'department', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择上级部门', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 2, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: '部门编码', |
|||
field: 'department', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择部门编码', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 2, |
|||
}, |
|||
], |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: false, |
|||
message: '请选择部门编码', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '排序', |
|||
field: 'order', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入排序', |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: false, |
|||
message: '请输入排序', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: 'remark', |
|||
label: '备注', |
|||
component: 'NsTextarea', |
|||
componentProps: { |
|||
placeholder: '请输入', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]); |
|||
return { |
|||
formSchema, |
|||
formData, |
|||
treeData, |
|||
handleSelect, |
|||
activeKey, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style scoped> |
|||
.main { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
.left { |
|||
width: 50%; |
|||
height: calc(100vh-50px); |
|||
border-right: 5px solid rgb(229, 235, 240); |
|||
} |
|||
.left .tree { |
|||
width: 400px; |
|||
height: 89vh; |
|||
border-right: 2px solid rgb(229, 235, 240); |
|||
} |
|||
.right { |
|||
width: 50%; |
|||
} |
|||
|
|||
.top { |
|||
height: 50vh; |
|||
border-bottom: 5px solid rgb(229, 235, 240); |
|||
} |
|||
.ns-table-title { |
|||
text-align: left; |
|||
height: 46px; |
|||
line-height: 46px; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding-left: 16px; |
|||
width: 100%; |
|||
border-bottom: 2px solid rgb(229, 235, 240); |
|||
} |
|||
.table { |
|||
width: 2000px; |
|||
} |
|||
.admin { |
|||
text-align: left; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding-left: 16px; |
|||
width: calc(100% + 32px); |
|||
} |
|||
.form { |
|||
margin-left: 10px; |
|||
} |
|||
</style> |
Loading…
Reference in new issue