natas_hw
/
dolphinscheduler0701
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Refactor][UI] Refactor function manage using NSpace component. (#11124)

This commit is contained in:
songjianet 2022-07-25 22:22:04 +08:00 committed by GitHub
parent 011040f90e
commit 7ed1e7cd74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
dolphinscheduler-ui/src/views/resource/udf/function/index.module.scss
View File

@ -15,59 +15,29 @@
* limitations under the License.
*/
.content {
width: 100%;
.card {
margin-bottom: 8px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
.right {
> .search {
.list {
float: right;
margin: 3px 0 3px 4px;
.table {
table {
width: 100%;
tr {
height: 40px;
font-size: 12px;
th,
td {
&:nth-child(1) {
width: 50px;
text-align: center;
}
}
th {
&:nth-child(1) {
width: 60px;
text-align: center;
}
> span {
font-size: 12px;
color: #555;
}
}
}
}
.table {
table {
width: 100%;
tr {
height: 40px;
font-size: 12px;
th,
td {
&:nth-child(1) {
width: 50px;
text-align: center;
}
}
th {
&:nth-child(1) {
width: 60px;
text-align: center;
}
> span {
font-size: 12px;
color: #555;
}
}
}
}
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
}

98
dolphinscheduler-ui/src/views/resource/udf/function/index.tsx
View File

@ -26,9 +26,9 @@ import {
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { SearchOutlined } from '@vicons/antd'
import { useTable } from './use-table'
import Card from '@/components/card'
import FolderModal from './components/function-modal'
import { useTable } from './use-table'
import styles from './index.module.scss'
export default defineComponent({
@ -94,68 +94,64 @@ export default defineComponent({
const { loadingRef } = this
return (
<div class={styles.content}>
<Card class={styles.card}>
<div class={styles.header}>
<NSpace vertical>
<Card>
<NSpace justify='space-between'>
<NButton
type='primary'
size='small'
onClick={this.handleCreateFolder}
class='btn-create-udf-function'
>
{t('resource.function.create_udf_function')}
</NButton>
<NSpace>
<NButton
type='primary'
onClick={this.handleCreateFolder}
class='btn-create-udf-function'
>
{t('resource.function.create_udf_function')}
<NInput
allowInput={this.trim}
size='small'
placeholder={t('resource.function.enter_keyword_tips')}
v-model={[this.searchVal, 'value']}
/>
<NButton type='primary' size='small' onClick={this.handleSearch}>
<NIcon>
<SearchOutlined/>
</NIcon>
</NButton>
</NSpace>
<div class={styles.right}>
<div class={styles.search}>
<div class={styles.list}>
<NButton type='primary' onClick={this.handleSearch}>
<NIcon>
<SearchOutlined />
</NIcon>
</NButton>
</div>
<div class={styles.list}>
<NInput
allowInput={this.trim}
placeholder={t('resource.function.enter_keyword_tips')}
v-model={[this.searchVal, 'value']}
/>
</div>
</div>
</div>
</div>
</NSpace>
</Card>
<Card title={t('resource.function.udf_function')}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
striped
size={'small'}
class={styles.table}
row-class-name='items'
scrollX={this.tableWidth}
/>
<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.handleChangePageSize}
<NSpace vertical>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
striped
size={'small'}
class={styles.table}
row-class-name='items'
scrollX={this.tableWidth}
/>
</div>
<NSpace justify='center'>
<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.handleChangePageSize}
/>
</NSpace>
</NSpace>
</Card>
<FolderModal
v-model:row={this.row}
v-model:show={this.showRef}
onUpdateList={this.handleUpdateList}
/>
</div>
</NSpace>
)
}
})