From 0438d39ae4a14cb8090fe285ae2012682eb73e78 Mon Sep 17 00:00:00 2001 From: XiaoJiang521 <131635688+XiaoJiang521@users.noreply.github.com> Date: Wed, 23 Aug 2023 18:53:37 +0800 Subject: [PATCH] [feature] add button update and delete (#106) --- seatunnel-ui/src/locales/en_US/datasource.ts | 1 + seatunnel-ui/src/locales/zh_CN/datasource.ts | 1 + seatunnel-ui/src/router/index.ts | 4 +- .../src/views/datasource/list/index.tsx | 2 +- .../src/views/datasource/list/use-columns.ts | 22 +++++++++- .../views/virtual-tables/list/use-columns.ts | 43 ++++++++----------- 6 files changed, 43 insertions(+), 30 deletions(-) diff --git a/seatunnel-ui/src/locales/en_US/datasource.ts b/seatunnel-ui/src/locales/en_US/datasource.ts index e811af285..27b2412c6 100644 --- a/seatunnel-ui/src/locales/en_US/datasource.ts +++ b/seatunnel-ui/src/locales/en_US/datasource.ts @@ -35,6 +35,7 @@ export default { operation: 'Operation', click_to_view: 'Click to view', delete: 'Delete', + delete_confirm: 'Are you sure delete ?', confirm: 'Confirm', cancel: 'Cancel', create: 'Create', diff --git a/seatunnel-ui/src/locales/zh_CN/datasource.ts b/seatunnel-ui/src/locales/zh_CN/datasource.ts index f8321b5f9..6222fd05b 100644 --- a/seatunnel-ui/src/locales/zh_CN/datasource.ts +++ b/seatunnel-ui/src/locales/zh_CN/datasource.ts @@ -35,6 +35,7 @@ export default { operation: '操作', click_to_view: '点击查看', delete: '删除', + delete_confirm: '确认删除？', confirm: '确定', cancel: '取消', create: '创建', diff --git a/seatunnel-ui/src/router/index.ts b/seatunnel-ui/src/router/index.ts index 2a88a6940..464afbcf6 100644 --- a/seatunnel-ui/src/router/index.ts +++ b/seatunnel-ui/src/router/index.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import { createRouter, createWebHashHistory } from 'vue-router' +import {createRouter, createWebHistory} from 'vue-router' import routes from './routes' import NProgress from 'nprogress' import 'nprogress/nprogress.css' const router = createRouter({ - history: createWebHashHistory( + history: createWebHistory( import.meta.env.MODE === 'production' ? '/ui/' : '/' ), routes diff --git a/seatunnel-ui/src/views/datasource/list/index.tsx b/seatunnel-ui/src/views/datasource/list/index.tsx index 052757494..260cfdfac 100644 --- a/seatunnel-ui/src/views/datasource/list/index.tsx +++ b/seatunnel-ui/src/views/datasource/list/index.tsx @@ -52,7 +52,7 @@ const DatasourceList = defineComponent({ const { getColumns } = useColumns((id: string, type: 'edit' | 'delete') => { if (type === 'edit') { router.push({ name: 'datasource-edit', params: { id } }) - } else { + } else if(type === 'delete'){ deleteRecord(id) } }) diff --git a/seatunnel-ui/src/views/datasource/list/use-columns.ts b/seatunnel-ui/src/views/datasource/list/use-columns.ts index 807a42978..81b31a76d 100644 --- a/seatunnel-ui/src/views/datasource/list/use-columns.ts +++ b/seatunnel-ui/src/views/datasource/list/use-columns.ts @@ -23,7 +23,6 @@ import { getTableColumn } from '@/common/table' import { useTableOperation } from '@/hooks' import { EditOutlined } from '@vicons/antd' -import ResourceAuth from '@/components/resource-auth' export function useColumns(onCallback: Function) { const { t } = useI18n() @@ -80,7 +79,26 @@ export function useColumns(onCallback: Function) { { title: t('datasource.update_time'), key: 'updateTime', - } + }, + useTableOperation({ + title: t('datasource.operation'), + key: 'operation', + buttons: [ + { + text: t('datasource.edit'), + icon: h(EditOutlined), + onClick: (rowData) => void onCallback(rowData.id, 'edit') + }, + { + isDelete: true, + text: t('datasource.delete'), + onPositiveClick: (rowData) => void onCallback(rowData.id, 'delete'), + negativeText: t('datasource.cancel'), + positiveText: t('datasource.confirm'), + popTips: t('datasource.delete_confirm') + } + ] + }) ] } diff --git a/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts b/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts index 860dd0000..86b881f0b 100644 --- a/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts +++ b/seatunnel-ui/src/views/virtual-tables/list/use-columns.ts @@ -19,6 +19,7 @@ import { h, ref, watch, onMounted } from 'vue' import { useI18n } from 'vue-i18n' import { EditOutlined } from '@vicons/antd' import { NButton, NSpace } from 'naive-ui' +import {useTableOperation} from "@/hooks"; //import type { TableColumns, VirtualTableRecord } from '../types' export function useColumns(onCallback: Function) { @@ -70,33 +71,25 @@ export function useColumns(onCallback: Function) { //render: (rowData: VirtualTableRecord) => // renderTableTime(rowData.createTime) }, - { + useTableOperation({ title: t('virtual_tables.operation'), key: 'operation', - render: (row: any) => - h(NSpace, null, { - default: () => [ - h( - NButton, - { - text: true, - onClick: () => void onCallback(row.tableId, 'edit') - }, - { - default: () => t('virtual_tables.edit') - } - ), - h( - NButton, - { - text: true, - onClick: () => void onCallback(row.tableId, 'delete') - }, - { default: () => t('virtual_tables.delete') } - ) - ] - }) - } + buttons: [ + { + text: t('datasource.edit'), + icon: h(EditOutlined), + onClick: (rowData) => void onCallback(rowData.tableId, 'edit') + }, + { + isDelete: true, + text: t('datasource.delete'), + onPositiveClick: (rowData) => void onCallback(rowData.tableId, 'delete'), + negativeText: t('datasource.cancel'), + positiveText: t('datasource.confirm'), + popTips: t('datasource.delete_confirm') + } + ] + }) ] return columns }