Browse Source

[Feature][UI Next]Added the tenant management page (#7945)

* Enabling Route Forwarding
* Added the tenant management page
* tenant-modal
3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
commit
8a4ae60d81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
  2. 2
      dolphinscheduler-ui-next/src/router/modules/security.ts
  3. 2
      dolphinscheduler-ui-next/src/store/menu/menu.ts
  4. 64
      dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx
  5. 38
      dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss
  6. 91
      dolphinscheduler-ui-next/src/views/security/tenant/index.tsx
  7. 129
      dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts

1
dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx

@ -38,6 +38,7 @@ const Sidebar = defineComponent({
const { handleMenuClick } = useMenuClick() const { handleMenuClick } = useMenuClick()
return { collapsedRef, defaultExpandedKeys, handleMenuClick } return { collapsedRef, defaultExpandedKeys, handleMenuClick }
}, },
render() { render() {

2
dolphinscheduler-ui-next/src/router/modules/security.ts

@ -32,7 +32,7 @@ export default {
{ {
path: '/security/tenant', path: '/security/tenant',
name: 'tenement-manage', name: 'tenement-manage',
component: components['home'], component: components['tenant'],
meta: { meta: {
title: '租户管理', title: '租户管理',
}, },

2
dolphinscheduler-ui-next/src/store/menu/menu.ts

@ -21,7 +21,7 @@ import MenuState from './types'
export const useMenuStore = defineStore({ export const useMenuStore = defineStore({
id: 'menu', id: 'menu',
state: (): MenuState => ({ state: (): MenuState => ({
menuKey: '', menuKey: 'home',
}), }),
persist: true, persist: true,
getters: { getters: {

64
dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx

@ -0,0 +1,64 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineComponent, PropType } from 'vue'
// import { } from 'naive-ui'
// import styles from './index.module.scss'
import Modal from '@/components/modal'
import { NForm, NFormItem, NInput } from 'naive-ui'
const TenantModal = defineComponent({
name: 'tenant-modal',
emits: ['cancelModal', 'confirmModal'],
setup(props, ctx) {
const cancelModal = () => {
ctx.emit('cancelModal', props.showModalRef)
}
const confirmModal = async () => {
ctx.emit('confirmModal', props.showModalRef)
}
return { cancelModal, confirmModal }
},
props: {
showModalRef: {
type: Boolean as PropType<boolean>,
default: false,
}
},
render() {
return (
<div>
<Modal
title="创建租户"
show={this.showModalRef}
onCancel={this.cancelModal}
onConfirm={this.confirmModal}
>
{{
default: () => (
<div></div>
),
}}
</Modal>
</div>
)
},
})
export default TenantModal

38
dolphinscheduler-ui-next/src/views/security/tenant/index.module.scss

@ -0,0 +1,38 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
width: 100%;
.header {
display: flex;
justify-content: space-between;
.search {
display: flex;
}
}
.form, .pagination {
margin-top: 16px;
}
.pagination {
display: flex;
justify-content: center;
}
}

91
dolphinscheduler-ui-next/src/views/security/tenant/index.tsx

@ -0,0 +1,91 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { defineComponent, toRefs, onMounted } from 'vue'
import { NButton, NInput, NIcon, NDataTable, NPagination, NCard } from 'naive-ui'
import styles from './index.module.scss'
import { useTable } from './use-table'
import { SearchOutlined } from '@vicons/antd'
import TenantModal from './components/tenant-modal'
const tenementManage = defineComponent({
name: 'tenement-manage',
setup() {
const { variables, getTableData } = useTable()
const requestData = () => {
getTableData({
pageSize: variables.pageSize,
pageNo: variables.page,
searchVal: variables.searchVal
})
}
const handleModalChange = () => {
variables.showModalRef = true
}
const onCancelModal = () => {
variables.showModalRef = false
}
const onConfirmModal = () => {
variables.showModalRef = false
}
onMounted(() => {
requestData()
})
return { ...toRefs(variables), requestData, handleModalChange, onCancelModal, onConfirmModal }
},
render() {
return (
<div class={styles.container}>
<NCard>
<div class={styles.header}>
<div>
<NButton size="small" onClick={this.handleModalChange}></NButton>
</div>
<div class={styles.search}>
<NInput size="small" v-model={[this.searchVal, 'value']} on-input={this.requestData} placeholder="请输入关键词" clearable />
<NButton size="small"><NIcon><SearchOutlined /></NIcon></NButton>
</div>
</div>
</NCard>
<div class={styles.form}>
<NDataTable columns={this.columns} data={this.tableData} />
</div>
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}
v-model:page-size={this.pageSize}
page-count={this.totalPage}
show-size-picker
page-sizes={[10, 30, 50]}
show-quick-jumper
onUpdatePage={this.requestData}
onUpdatePageSize={this.requestData}
/>
</div>
<TenantModal showModalRef={this.showModalRef} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
</div>
)
},
})
export default tenementManage

129
dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts

@ -0,0 +1,129 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { useAsyncState } from '@vueuse/core'
import { queryTenantListPaging } from '@/service/modules/tenants'
import { reactive, h, ref } from 'vue'
import { NButton } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import {
DeleteOutlined, EditOutlined
} from '@vicons/antd'
export function useTable() {
const { t } = useI18n()
const handleEdit= (row: any) => {
console.log('click', row)
}
const handleDelete = (row: any) => {
console.log('click2', row)
}
const createColumns = () => {
return [
{
title: '编号',
key: 'num'
},
{
title: '操作系统租户',
key: 'tenantCode'
},
{
title: '描述',
key: 'description'
},
{
title: '队列',
key: 'queueName'
},
{
title: '创建时间',
key: 'createTime'
},
{
title: '更新时间',
key: 'updateTime'
},
{
title: '操作',
key: 'actions',
render (row: any) {
return h(
'div',
null, [
h(
NButton,
{
size: 'small',
onClick: () => { handleEdit(row) }
},
{
icon: () => h(EditOutlined)
}
),
h(
NButton,
{
size: 'small',
onClick: () => { handleDelete(row) }
},
{
icon: () => h(DeleteOutlined)
}
)
]
)
}
}
]
}
const variables = reactive({
columns: createColumns(),
tableData: [],
page: ref(1),
pageSize: ref(10),
searchVal: ref(null),
totalPage: ref(1),
showModalRef: ref(false)
})
const getTableData = (params: any) => {
const { state } = useAsyncState(
queryTenantListPaging({...params}).then((res: any) => {
variables.tableData = res.totalList.map((item: any, index: number) => {
return {
num: index + 1,
...item
}
})
variables.totalPage = res.totalPage
}),
{}
)
return state
}
return {
variables,
getTableData
}
}
Loading…
Cancel
Save