Browse Source

[Feature][UI Next]Improve the tenant Modal (#7983)

* Enabling Route Forwarding

* Added the tenant management page

* tenant-modal

* Improve the tenant Modal

* Enabling Route Forwarding

* Improve the tenant Modal

* fix bug

* Improve the tenant Modal

* Improve the tenant Modal

* Improve the tenant Modal
3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
commit
8ab3b1d559
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      dolphinscheduler-ui-next/src/service/modules/tenants/index.ts
  2. 15
      dolphinscheduler-ui-next/src/views/security/tenant/components/tenant-modal.tsx
  3. 23
      dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts
  4. 2
      dolphinscheduler-ui-next/src/views/security/tenant/index.tsx
  5. 45
      dolphinscheduler-ui-next/src/views/security/tenant/use-table.ts

6
dolphinscheduler-ui-next/src/service/modules/tenants/index.ts

@ -49,15 +49,15 @@ export function verifyTenantCode(params: TenantCodeReq): any {
})
}
export function updateTenant(data: TenantCodeReq, id: IdReq): any {
export function updateTenant(data: TenantCodeReq, idReq: IdReq): any {
return axios({
url: `/tenants/${id}`,
url: `/tenants/${idReq.id}`,
method: 'put',
data,
})
}
export function deleteTenantById(id: IdReq): any {
export function deleteTenantById(id: number): any {
return axios({
url: `/tenants/${id}`,
method: 'delete',

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

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { defineComponent, onMounted, PropType, toRefs } from 'vue'
import { defineComponent, onMounted, PropType, toRefs, watch } from 'vue'
import Modal from '@/components/modal'
import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
import { useModalData } from './use-modalData'
@ -35,13 +35,20 @@ const TenantModal = defineComponent({
}
const confirmModal = () => {
handleValidate()
handleValidate(props.statusRef)
}
onMounted(() => {
getListData()
})
watch(() => props.row, () => {
variables.model.id = props.row.id
variables.model.tenantCode = props.row.tenantCode
variables.model.queueId = props.row.queueId
variables.model.description = props.row.description
})
return { ...toRefs(variables), cancelModal, confirmModal }
},
props: {
@ -52,6 +59,10 @@ const TenantModal = defineComponent({
statusRef: {
type: Number as PropType<number>,
default: 0,
},
row: {
type: Object as PropType<any>,
default: {},
}
},
render() {

23
dolphinscheduler-ui-next/src/views/security/tenant/components/use-modalData.ts

@ -19,7 +19,7 @@ import { reactive, ref, SetupContext } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAsyncState } from '@vueuse/core'
import { queryList } from '@/service/modules/queues'
import { verifyTenantCode, createTenant } from '@/service/modules/tenants'
import { verifyTenantCode, createTenant, updateTenant } from '@/service/modules/tenants'
export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "confirmModal")[]>) {
const { t } = useI18n()
@ -27,9 +27,10 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
const variables = reactive({
tenantFormRef: ref(),
model: {
id: ref<number>(0),
tenantCode: ref(''),
description: ref(''),
queueId: ref<number>(-1),
queueId: ref<number>(0),
generalOptions: []
},
rules: {
@ -59,11 +60,13 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
return state
}
const handleValidate = () => {
const handleValidate = (statusRef: number) => {
variables.tenantFormRef.validate((errors: any) => {
if (!errors) {
console.log('验证成功')
submitTenantModal()
console.log('statusRef', statusRef)
statusRef === 0 ? submitTenantModal() : updateTenantModal()
} else {
console.log(errors, '验证失败')
return
@ -86,6 +89,18 @@ export function useModalData(props: any, ctx: SetupContext<("cancelModal" | "con
})
}
const updateTenantModal = () => {
const data = {
tenantCode: variables.model.tenantCode,
queueId: variables.model.queueId,
description: variables.model.description,
id: variables.model.id
}
updateTenant(data, {id: variables.model.id}).then((res: any) => {
ctx.emit('confirmModal', props.showModalRef)
})
}
return {
variables,
getListData,

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

@ -109,7 +109,7 @@ const tenementManage = defineComponent({
onUpdatePageSize={this.requestData}
/>
</div>
<TenantModal showModalRef={this.showModalRef} statusRef={this.statusRef} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
<TenantModal showModalRef={this.showModalRef} statusRef={this.statusRef} row={this.row} onCancelModal={this.onCancelModal} onConfirmModal={this.onConfirmModal}></TenantModal>
</div>
)
},

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

@ -28,6 +28,7 @@ export function useTable() {
const handleEdit= (row: any) => {
variables.showModalRef = true
variables.statusRef = 1
variables.row = row
}
const handleDelete = (row: any) => {
@ -82,28 +83,27 @@ export function useTable() {
{
icon: () => h(EditOutlined)
}
),
h(
NPopconfirm,
{
onPositiveClick: () => { handleDelete(row) }
},
{
trigger: () => h(
NButton,
{
size: 'small',
style: {'margin-left': '5px'},
},
{
icon: () => h(DeleteOutlined),
}
),
default: () => {return '确定删除吗?'}
}
)
]
)
),
h(
NPopconfirm,
{
onPositiveClick: () => { handleDelete(row) }
},
{
trigger: () => h(
NButton,
{
size: 'small',
style: {'margin-left': '5px'},
},
{
icon: () => h(DeleteOutlined),
}
),
default: () => {return '确定删除吗?'}
}
)
])
}
}
]
@ -118,6 +118,7 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
})
const getTableData = (params: any) => {

Loading…
Cancel
Save