forked from github/dataease
Merge pull request #3271 from dataease/pr@dev_dataset_bugfix
fix: 创建数据集左侧列表可拉宽 保存数据集校验 数据请求添加loading
This commit is contained in:
xuwei-fit2cloud
GitHub
commit
4a3d27b1b3
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="dataset-api" v-loading="loading">
|
||||
<div class="dataset-api" @mouseup="mouseupDrag" v-loading="loading">
|
||||
<p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
|
||||
<i class="el-icon-d-arrow-right" />
|
||||
</p>
|
||||
<div v-show="showLeft" class="table-list">
|
||||
<div v-show="showLeft" @mousedown="mousedownDrag" :style="{ left: LeftWidth + 'px' }" class="drag-left"></div>
|
||||
<div v-show="showLeft" :style="{ width: LeftWidth + 'px' }" class="table-list">
|
||||
<p class="select-ds">
|
||||
{{ $t('deDataset.select_data_source') }}
|
||||
<i class="el-icon-d-arrow-left" @click="showLeft = false" />
|
||||
@ -36,7 +37,7 @@
|
||||
没有找到相关内容
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-checkbox-list" v-else>
|
||||
<div v-loading="dsLoading" class="table-checkbox-list" v-else>
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-tooltip
|
||||
v-for="t in tableData"
|
||||
@ -51,6 +52,7 @@
|
||||
{ active: activeName === t.name, 'not-allow': !t.enableCheck }
|
||||
]"
|
||||
class="item"
|
||||
:title="t.name"
|
||||
@click="setActiveName(t)"
|
||||
>
|
||||
<svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
|
||||
@ -180,12 +182,14 @@ export default {
|
||||
showLeft: true,
|
||||
tableLoading: false,
|
||||
loading: false,
|
||||
LeftWidth: 240,
|
||||
height: 400,
|
||||
fields: [],
|
||||
fieldsData: [],
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
dsLoading: false,
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
mode: '1',
|
||||
@ -222,6 +226,7 @@ export default {
|
||||
if (val) {
|
||||
this.checkTableList = []
|
||||
this.activeName = ''
|
||||
this.dsLoading = true
|
||||
const dsName = this.options.find((ele) => ele.id === val).name
|
||||
post('/datasource/getTables/' + val, {}).then((response) => {
|
||||
this.tables = response.data
|
||||
@ -231,6 +236,8 @@ export default {
|
||||
this.$set(ele, 'nameExsit', false)
|
||||
})
|
||||
this.avilibelTable = !this.tableData.some((ele) => ele.enableCheck)
|
||||
}).finally(() => {
|
||||
this.dsLoading = false
|
||||
})
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
if (this.options[i].id === val) {
|
||||
@ -272,6 +279,27 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
mousedownDrag() {
|
||||
document
|
||||
.querySelector('.dataset-api')
|
||||
.addEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
mouseupDrag() {
|
||||
document
|
||||
.querySelector('.dataset-api')
|
||||
.removeEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
caculateHeight(e) {
|
||||
if (e.pageX < 240) {
|
||||
this.LeftWidth = 240
|
||||
return
|
||||
}
|
||||
if (e.pageX > 500) {
|
||||
this.LeftWidth = 500
|
||||
return
|
||||
}
|
||||
this.LeftWidth = e.pageX
|
||||
},
|
||||
nameExsitValidator(activeIndex) {
|
||||
this.tableData[activeIndex].nameExsit =
|
||||
this.nameList
|
||||
@ -385,6 +413,15 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.drag-left {
|
||||
position: absolute;
|
||||
height: calc(100vh - 56px);
|
||||
width: 2px;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
@ -438,7 +475,7 @@ export default {
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
height: 40px;
|
||||
width: 215px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="dataset-db" v-loading="loading">
|
||||
<div class="dataset-db" @mouseup="mouseupDrag" v-loading="loading">
|
||||
<p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
|
||||
<i class="el-icon-d-arrow-right"></i>
|
||||
</p>
|
||||
<div class="table-list" v-show="showLeft">
|
||||
<div v-show="showLeft" @mousedown="mousedownDrag" :style="{ left: LeftWidth + 'px' }" class="drag-left"></div>
|
||||
<div class="table-list" :style="{ width: LeftWidth + 'px' }" v-show="showLeft">
|
||||
<p class="select-ds">
|
||||
{{ $t('deDataset.select_data_source') }}
|
||||
<i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
|
||||
@ -37,7 +38,7 @@
|
||||
没有找到相关内容
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="table-checkbox-list">
|
||||
<div v-loading="dsLoading" v-else class="table-checkbox-list">
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-tooltip
|
||||
:disabled="t.enableCheck"
|
||||
@ -52,6 +53,7 @@
|
||||
{ active: activeName === t.name, 'not-allow': !t.enableCheck }
|
||||
]"
|
||||
class="item"
|
||||
:title="t.name"
|
||||
@click="setActiveName(t)"
|
||||
>
|
||||
<svg-icon v-if="!t.enableCheck" icon-class="Checkbox" style="margin-right: 8px"/>
|
||||
@ -181,6 +183,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
showLeft: true,
|
||||
LeftWidth: 240,
|
||||
tableLoading: false,
|
||||
loading: false,
|
||||
height: 400,
|
||||
@ -189,6 +192,7 @@ export default {
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
dsLoading: false,
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
mode: '0',
|
||||
@ -223,6 +227,7 @@ export default {
|
||||
},
|
||||
dataSource(val) {
|
||||
if (val) {
|
||||
this.dsLoading = true
|
||||
this.checkTableList = []
|
||||
this.activeName = ''
|
||||
const dsName = this.options.find((ele) => ele.id === val).name
|
||||
@ -234,6 +239,8 @@ export default {
|
||||
this.$set(ele, 'nameExsit', false)
|
||||
})
|
||||
this.avilibelTable = !this.tableData.some((ele) => ele.enableCheck)
|
||||
}).finally(() => {
|
||||
this.dsLoading = false
|
||||
})
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
if (this.options[i].id === val) {
|
||||
@ -285,6 +292,27 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
mousedownDrag() {
|
||||
document
|
||||
.querySelector('.dataset-db')
|
||||
.addEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
mouseupDrag() {
|
||||
document
|
||||
.querySelector('.dataset-db')
|
||||
.removeEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
caculateHeight(e) {
|
||||
if (e.pageX < 240) {
|
||||
this.LeftWidth = 240
|
||||
return
|
||||
}
|
||||
if (e.pageX > 500) {
|
||||
this.LeftWidth = 500
|
||||
return
|
||||
}
|
||||
this.LeftWidth = e.pageX
|
||||
},
|
||||
nameExsitValidator(activeIndex) {
|
||||
this.tableData[activeIndex].nameExsit =
|
||||
this.nameList
|
||||
@ -398,6 +426,15 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.drag-left {
|
||||
position: absolute;
|
||||
height: calc(100vh - 56px);
|
||||
width: 2px;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
@ -452,7 +489,7 @@ export default {
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
height: 40px;
|
||||
width: 215px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
>{{ $t('deDataset.selected') }} {{ tableNum }}
|
||||
{{ ['excel'].includes(datasetType) ? $t('deDataset.table') : '项' }}</span
|
||||
>
|
||||
<deBtn @click="datasetSave" type="primary">{{
|
||||
<deBtn :disabled="['db', 'excel', 'api'].includes(datasetType) && !tableNum" @click="datasetSave" type="primary">{{
|
||||
$t('commons.save')
|
||||
}}</deBtn>
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user