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