Add File
This commit is contained in:
335
frontend/src/views/ds/TableList.vue
Normal file
335
frontend/src/views/ds/TableList.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="table-list_layout">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<el-button text style="color: #fff" :icon="ArrowLeft" @click="back()" />
|
||||
{{ props.dsName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="left-side">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span>{{ t('ds.tables') }}</span>
|
||||
<el-button style="padding: 12px" text :icon="CreditCard" @click="editTables(ds)" />
|
||||
</div>
|
||||
<el-input
|
||||
v-model="searchValue"
|
||||
clearable
|
||||
style="margin: 16px 0"
|
||||
:placeholder="t('ds.Search Datasource')"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
v-for="(item, _index) in tableList"
|
||||
:key="_index"
|
||||
class="list-item_primary"
|
||||
@click="clickTable(item)"
|
||||
>
|
||||
{{ item.table_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div v-if="fieldList.length === 0">
|
||||
{{ t('ds.no_data_tip') }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div style="display: flex; justify-content: start; align-items: center">
|
||||
<span>{{ currentTable.table_name }}</span>
|
||||
<el-divider direction="vertical" />
|
||||
<span>{{ t('ds.comment') }}:</span>
|
||||
<span>{{ currentTable.custom_comment }}</span>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
text
|
||||
class="action-btn"
|
||||
:icon="IconOpeEdit"
|
||||
@click="editTable"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane :label="t('ds.table_schema')" name="schema">
|
||||
<el-table :data="fieldList" style="width: 100%">
|
||||
<el-table-column prop="field_name" :label="t('ds.field.name')" width="180" />
|
||||
<el-table-column prop="field_type" :label="t('ds.field.type')" width="180" />
|
||||
<el-table-column prop="field_comment" :label="t('ds.field.comment')" />
|
||||
<el-table-column :label="t('ds.field.custom_comment')">
|
||||
<template #default="scope">
|
||||
<div class="field-comment">
|
||||
<span>{{ scope.row.custom_comment }}</span>
|
||||
<el-button
|
||||
text
|
||||
class="action-btn"
|
||||
:icon="IconOpeEdit"
|
||||
@click="editField(scope.row)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ds.field.status')" width="180">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; align-items: center">
|
||||
<el-switch
|
||||
v-model="scope.row.checked"
|
||||
size="small"
|
||||
@change="changeStatus(scope.row)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="t('ds.preview')" name="preview">
|
||||
<div style="margin: 16px 0">{{ t('ds.preview_tip') }}</div>
|
||||
<el-table :data="previewData.data" style="width: 100%; height: 600px">
|
||||
<el-table-column
|
||||
v-for="(c, index) in previewData.fields"
|
||||
:key="index"
|
||||
:prop="c"
|
||||
:label="c"
|
||||
/>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="tableDialog"
|
||||
:title="t('ds.edit.table_comment')"
|
||||
width="600"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
@closed="closeTable"
|
||||
>
|
||||
<div>{{ t('ds.edit.table_comment_label') }}</div>
|
||||
<el-input v-model="tableComment" clearable :rows="3" type="textarea" />
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 20px">
|
||||
<el-button secondary @click="closeTable">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveTable">{{ t('common.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="fieldDialog"
|
||||
:title="t('ds.edit.field_comment')"
|
||||
width="600"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
@closed="closeField"
|
||||
>
|
||||
<div>{{ t('ds.edit.field_comment_label') }}</div>
|
||||
<el-input v-model="fieldComment" clearable :rows="3" type="textarea" />
|
||||
<div style="display: flex; justify-content: flex-end; margin-top: 20px">
|
||||
<el-button secondary @click="closeField">{{ t('common.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveField">{{ t('common.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<DsForm ref="dsForm" @refresh="refresh" />
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { datasourceApi } from '@/api/datasource'
|
||||
import { onMounted } from 'vue'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import type { TabsPaneContext } from 'element-plus-secondary'
|
||||
import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
|
||||
import { CreditCard } from '@element-plus/icons-vue'
|
||||
import DsForm from './form.vue'
|
||||
|
||||
const props = defineProps({
|
||||
dsId: { type: [Number], required: true },
|
||||
dsName: { type: [String], required: true },
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
const dsId = ref<number>(0)
|
||||
const searchValue = ref('')
|
||||
const tableList = ref<any>([])
|
||||
const currentTable = ref<any>({})
|
||||
const currentField = ref<any>({})
|
||||
const fieldList = ref<any>([])
|
||||
const previewData = ref<any>({})
|
||||
|
||||
const activeName = ref('schema')
|
||||
const tableDialog = ref<boolean>(false)
|
||||
const fieldDialog = ref<boolean>(false)
|
||||
const dsForm = ref()
|
||||
const ds = ref<any>({})
|
||||
const tableComment = ref('')
|
||||
const fieldComment = ref('')
|
||||
|
||||
const buildData = () => {
|
||||
return { table: currentTable.value, fields: fieldList.value }
|
||||
}
|
||||
|
||||
const back = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
// const save = () => {
|
||||
// datasourceApi.edit(buildData()).then(() => {
|
||||
// ElMessage({
|
||||
// message: "Save success",
|
||||
// type: "success",
|
||||
// showClose: true,
|
||||
// });
|
||||
// });
|
||||
// };
|
||||
|
||||
const editTable = () => {
|
||||
tableComment.value = currentTable.value.custom_comment
|
||||
tableDialog.value = true
|
||||
}
|
||||
|
||||
const closeTable = () => {
|
||||
tableDialog.value = false
|
||||
}
|
||||
|
||||
const saveTable = () => {
|
||||
currentTable.value.custom_comment = tableComment.value
|
||||
datasourceApi.saveTable(currentTable.value).then(() => {
|
||||
closeTable()
|
||||
ElMessage({
|
||||
message: t('common.save_success'),
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const editField = (row: any) => {
|
||||
currentField.value = row
|
||||
fieldComment.value = currentField.value.custom_comment
|
||||
fieldDialog.value = true
|
||||
}
|
||||
|
||||
const changeStatus = (row: any) => {
|
||||
currentField.value = row
|
||||
datasourceApi.saveField(currentField.value).then(() => {
|
||||
closeField()
|
||||
ElMessage({
|
||||
message: t('common.save_success'),
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const closeField = () => {
|
||||
fieldDialog.value = false
|
||||
}
|
||||
|
||||
const saveField = () => {
|
||||
currentField.value.custom_comment = fieldComment.value
|
||||
datasourceApi.saveField(currentField.value).then(() => {
|
||||
closeField()
|
||||
ElMessage({
|
||||
message: t('common.save_success'),
|
||||
type: 'success',
|
||||
showClose: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const clickTable = (table: any) => {
|
||||
currentTable.value = table
|
||||
datasourceApi.fieldList(table.id).then((res) => {
|
||||
fieldList.value = res
|
||||
datasourceApi.previewData(dsId.value, buildData()).then((res) => {
|
||||
previewData.value = res
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleClick = (tab: TabsPaneContext) => {
|
||||
if (tab.paneName === 'preview') {
|
||||
datasourceApi.previewData(dsId.value, buildData()).then((res) => {
|
||||
previewData.value = res
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const editTables = (item: any) => {
|
||||
dsForm.value.open(item, true)
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
init()
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
dsId.value = props.dsId
|
||||
datasourceApi.getDs(dsId.value).then((res) => {
|
||||
ds.value = res
|
||||
fieldList.value = []
|
||||
datasourceApi.tableList(props.dsId).then((res) => {
|
||||
tableList.value = res
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table-list_layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.header {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
background: #050e21;
|
||||
box-shadow: 0 2px 4px #1f23291f;
|
||||
}
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.container {
|
||||
height: calc(100% - 56px);
|
||||
width: 100%;
|
||||
.left-side {
|
||||
width: 246px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
width: calc(100% - 246px);
|
||||
height: 100%;
|
||||
float: right;
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-comment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.action-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user