mirror of
https://github.com/dataease/dataease.git
synced 2025-02-25 03:52:59 +08:00
feat: 数据参考 excel 同名校验 国际化
This commit is contained in:
dataeaseShu
parent
80d7f2927a
commit
aba68be35b
4
frontend/src/icons/svg/data-reference.svg
Normal file
4
frontend/src/icons/svg/data-reference.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2.00033C11.5933 2.00033 5.23004 2.00033 3.99954 2.00033C3.26316 2.00033 2.66666 2.59728 2.66666 3.33366V10.0003H10.6667V1.00033H12V11.0003C12 11.1844 11.8508 11.3337 11.6667 11.3337H3.99999C3.26362 11.3337 2.66666 11.9306 2.66666 12.667C2.66666 13.4034 3.26164 14.0003 3.99802 14.0003C6.32365 14.0003 12.2815 14.0003 13 14.0003C13.1841 14.0003 13.3333 13.8511 13.3333 13.667V5.33366H14.6667V14.667C14.6667 15.0352 14.3682 15.3337 14 15.3337H3.99999C2.52724 15.3337 1.33333 14.1437 1.33333 12.6709C1.33333 10.0477 1.33333 6.0493 1.33333 3.33243C1.33333 1.85967 2.52688 0.666992 3.99964 0.666992C5.02765 0.666992 9.06402 0.666992 11.0023 0.666992C11.5546 0.666992 12 1.11471 12 1.66699V2.00033Z" />
|
||||
<path d="M4.33333 12.0003C4.14923 12.0003 3.99999 12.1496 3.99999 12.3337V13.0003C3.99999 13.1844 4.14923 13.3337 4.33333 13.3337H11.6667C11.8508 13.3337 12 13.1844 12 13.0003V12.3337C12 12.1496 11.8508 12.0003 11.6667 12.0003H4.33333Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
4
frontend/src/icons/svg/reference-field.svg
Normal file
4
frontend/src/icons/svg/reference-field.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.66668 4.66634H11C11.1841 4.66634 11.3333 4.81558 11.3333 4.99967V5.66634C11.3333 5.85044 11.1841 5.99967 11 5.99967H8.66668V10.9997C8.66668 11.1838 8.51744 11.333 8.33334 11.333H7.66668C7.48258 11.333 7.33334 11.1838 7.33334 10.9997V5.99967H5.00001C4.81592 5.99967 4.66668 5.85044 4.66668 5.66634V4.99967C4.66668 4.81558 4.81592 4.66634 5.00001 4.66634H7.33334C7.33334 4.66634 8.66668 4.68523 8.66668 4.66634Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33334 1.99967C1.33334 1.63148 1.63182 1.33301 2.00001 1.33301H14C14.3682 1.33301 14.6667 1.63148 14.6667 1.99967V13.9997C14.6667 14.3679 14.3682 14.6663 14 14.6663H2.00001C1.63182 14.6663 1.33334 14.3679 1.33334 13.9997V1.99967ZM2.66668 13.333V2.66634H13.3333V13.333H2.66668Z" fill="#646A73"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 863 B |
10
frontend/src/icons/svg/reference-play.svg
Normal file
10
frontend/src/icons/svg/reference-play.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4476_153334)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99984 1.66699C11.4976 1.66699 14.3332 4.50261 14.3332 8.00033C14.3332 11.498 11.4976 14.3337 7.99984 14.3337C4.50212 14.3337 1.6665 11.498 1.6665 8.00033C1.6665 4.50261 4.50212 1.66699 7.99984 1.66699ZM7.99984 0.666992C12.0498 0.666992 15.3332 3.95033 15.3332 8.00033C15.3332 12.0503 12.0498 15.3337 7.99984 15.3337C3.94984 15.3337 0.666504 12.0503 0.666504 8.00033C0.666504 3.95033 3.94984 0.666992 7.99984 0.666992ZM6.85744 11.4096L11.4714 8.50657C11.5568 8.45249 11.6271 8.37772 11.6758 8.2892C11.7245 8.20069 11.75 8.1013 11.75 8.00027C11.75 7.89924 11.7245 7.79985 11.6758 7.71133C11.6271 7.62282 11.5568 7.54804 11.4714 7.49397L6.85764 4.59117C6.76324 4.53177 6.65444 4.50037 6.54324 4.50037C6.46511 4.50063 6.38779 4.51628 6.3157 4.54642C6.24361 4.57657 6.17816 4.62061 6.1231 4.67605C6.06803 4.73149 6.02443 4.79723 5.99477 4.86952C5.96511 4.94181 5.94998 5.01923 5.95024 5.09737V10.9036C5.95031 11.0152 5.98155 11.1247 6.04044 11.2196C6.0814 11.2859 6.13508 11.3435 6.1984 11.389C6.26172 11.4345 6.33342 11.4671 6.40937 11.4847C6.48532 11.5024 6.56402 11.5048 6.64092 11.4919C6.71782 11.479 6.79141 11.451 6.85744 11.4096Z"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4476_153334">
|
||||
<rect width="16" height="16"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
frontend/src/icons/svg/reference-setting.svg
Normal file
3
frontend/src/icons/svg/reference-setting.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11.333H14.2393C14.3879 11.333 14.4418 11.3485 14.4961 11.3775C14.5505 11.4066 14.5931 11.4492 14.6221 11.5035C14.6512 11.5579 14.6667 11.6117 14.6667 11.7603V12.239C14.6667 12.3876 14.6512 12.4415 14.6221 12.4958C14.5931 12.5501 14.5505 12.5928 14.4961 12.6218C14.4418 12.6509 14.3879 12.6663 14.2393 12.6663H11V14.239C11 14.3876 10.9845 14.4415 10.9555 14.4958C10.9264 14.5501 10.8838 14.5928 10.8295 14.6218C10.7751 14.6509 10.7213 14.6663 10.5727 14.6663H10.094C9.94539 14.6663 9.89151 14.6509 9.83719 14.6218C9.78287 14.5928 9.74024 14.5501 9.71118 14.4958C9.68213 14.4415 9.66666 14.3876 9.66666 14.239V12.6663H1.76064C1.61206 12.6663 1.55817 12.6509 1.50385 12.6218C1.44953 12.5928 1.4069 12.5501 1.37785 12.4958C1.3488 12.4415 1.33333 12.3876 1.33333 12.239V11.7603C1.33333 11.6117 1.3488 11.5579 1.37785 11.5035C1.4069 11.4492 1.44953 11.4066 1.50385 11.3775C1.55817 11.3485 1.61206 11.333 1.76064 11.333H9.66666V9.76032C9.66666 9.61174 9.68213 9.55785 9.71118 9.50353C9.74024 9.44921 9.78287 9.40658 9.83719 9.37753C9.89151 9.34848 9.94539 9.33301 10.094 9.33301H10.5727C10.7213 9.33301 10.7751 9.34848 10.8295 9.37753C10.8838 9.40658 10.9264 9.44921 10.9555 9.50353C10.9845 9.55785 11 9.61174 11 9.76032V11.333ZM4.99999 3.33301V1.76032C4.99999 1.61174 5.01547 1.55785 5.04452 1.50353C5.07357 1.44921 5.1162 1.40658 5.17052 1.37753C5.22484 1.34848 5.27872 1.33301 5.42731 1.33301H5.90601C6.0546 1.33301 6.10848 1.34848 6.1628 1.37753C6.21712 1.40658 6.25976 1.44921 6.28881 1.50353C6.31786 1.55785 6.33333 1.61174 6.33333 1.76032V3.33301H14.2393C14.3879 3.33301 14.4418 3.34848 14.4961 3.37753C14.5505 3.40658 14.5931 3.44921 14.6221 3.50353C14.6512 3.55785 14.6667 3.61174 14.6667 3.76032V4.23903C14.6667 4.38761 14.6512 4.44149 14.6221 4.49582C14.5931 4.55014 14.5505 4.59277 14.4961 4.62182C14.4418 4.65087 14.3879 4.66634 14.2393 4.66634H6.33333V6.23903C6.33333 6.38761 6.31786 6.44149 6.28881 6.49582C6.25976 6.55014 6.21712 6.59277 6.1628 6.62182C6.10848 6.65087 6.0546 6.66634 5.90601 6.66634H5.42731C5.27872 6.66634 5.22484 6.65087 5.17052 6.62182C5.1162 6.59277 5.07357 6.55014 5.04452 6.49582C5.01547 6.44149 4.99999 6.38761 4.99999 6.23903V4.66634H1.76064C1.61206 4.66634 1.55817 4.65087 1.50385 4.62182C1.44953 4.59277 1.4069 4.55014 1.37785 4.49582C1.3488 4.44149 1.33333 4.38761 1.33333 4.23903V3.76032C1.33333 3.61174 1.3488 3.55785 1.37785 3.50353C1.4069 3.44921 1.44953 3.40658 1.50385 3.37753C1.55817 3.34848 1.61206 3.33301 1.76064 3.33301H4.99999Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
3
frontend/src/icons/svg/reference-table.svg
Normal file
3
frontend/src/icons/svg/reference-table.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15156 1.33301C2.1474 1.33301 1.33337 2.14703 1.33337 3.15119V12.8482C1.33337 13.8523 2.1474 14.6663 3.15155 14.6663H12.8485C13.8527 14.6663 14.6667 13.8523 14.6667 12.8482V3.15119C14.6667 2.14704 13.8527 1.33301 12.8485 1.33301H3.15156ZM13.3334 2.66634H2.66671V5.33301H5.33337H6.66671H9.33337H10.6667H13.3334V2.66634ZM2.66671 9.33301V6.66634H5.33337V9.33301H2.66671ZM2.66671 10.6663V13.333L5.33337 13.333V10.6663H2.66671ZM6.66671 10.6663V13.333H9.33337V10.6663H6.66671ZM10.6667 10.6663V13.333L13.3334 13.333V10.6663H10.6667ZM13.3334 9.33301V6.66634H10.6667V9.33301H13.3334ZM9.33337 9.33301H6.66671V6.66634H9.33337V9.33301Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 769 B |
@ -519,7 +519,10 @@ export default {
|
||||
convert_to_dimension: 'Convert to Dimension',
|
||||
left_to_edit: 'Select the data table on the left to edit',
|
||||
cannot_be_duplicate: 'The dataset name cannot be duplicate',
|
||||
set_saved_successfully: 'Data set saved successfully'
|
||||
set_saved_successfully: 'Data set saved successfully',
|
||||
to_start_using: 'Browse the contents of your database, tables, and columns. Select a database to start using.',
|
||||
to_run_query: 'Click to run query',
|
||||
the_running_results: 'You can view the running results'
|
||||
},
|
||||
detabs: {
|
||||
eidttitle: 'Edit Title',
|
||||
|
||||
@ -519,7 +519,10 @@ export default {
|
||||
convert_to_dimension: '轉換為維度',
|
||||
left_to_edit: '選中左側的資料表可進行編輯',
|
||||
cannot_be_duplicate: '數据集名稱不允許重複',
|
||||
set_saved_successfully: '數据集保存成功'
|
||||
set_saved_successfully: '數据集保存成功',
|
||||
to_start_using: '瀏覽您的數据庫，表和列的內容。 選擇一個數据庫即可開始使用。',
|
||||
to_run_query: '點擊運行査詢',
|
||||
the_running_results: '即可查看運行結果'
|
||||
},
|
||||
detabs: {
|
||||
eidttitle: '編輯標題',
|
||||
|
||||
@ -519,7 +519,10 @@ export default {
|
||||
convert_to_dimension: '转换为维度',
|
||||
left_to_edit: '选中左侧的数据表可进行编辑',
|
||||
cannot_be_duplicate: '数据集名称不允许重复',
|
||||
set_saved_successfully: '数据集保存成功'
|
||||
set_saved_successfully: '数据集保存成功',
|
||||
to_start_using: '浏览您的数据库，表和列的内容。 选择一个数据库即可开始使用。',
|
||||
to_run_query: '点击运行查询',
|
||||
the_running_results: '即可查看运行结果'
|
||||
},
|
||||
detabs: {
|
||||
eidttitle: '编辑标题',
|
||||
|
||||
@ -380,6 +380,7 @@ export default {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
|
||||
@ -282,14 +282,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
nameExsitValidator(activeIndex) {
|
||||
if (
|
||||
!this.nameList ||
|
||||
this.nameList.length === 0 ||
|
||||
!this.checkDatasetName.includes(this.tableData[activeIndex].datasetName)
|
||||
) {
|
||||
this.tableData[activeIndex].nameExsit = false
|
||||
return
|
||||
}
|
||||
this.tableData[activeIndex].nameExsit =
|
||||
this.nameList
|
||||
.concat(this.checkDatasetName)
|
||||
@ -300,6 +292,8 @@ export default {
|
||||
this.tableData.forEach((ele, index) => {
|
||||
if (this.checkDatasetName.includes(ele.datasetName)) {
|
||||
this.nameExsitValidator(index)
|
||||
} else {
|
||||
ele.nameExsit = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -402,6 +396,8 @@ export default {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
|
||||
@ -58,7 +58,14 @@
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ data }">
|
||||
{{ data.excelLable }}
|
||||
<span class="error-name-exsit" v-if="data.nameExsit">
|
||||
<svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-detail">
|
||||
@ -76,7 +83,15 @@
|
||||
v-model="sheetObj.datasetName"
|
||||
:placeholder="$t('commons.name')"
|
||||
@change="changeDatasetName"
|
||||
size="small"
|
||||
/>
|
||||
<div
|
||||
v-if="sheetObj.nameExsit"
|
||||
style="left: 107px; top: 52px"
|
||||
class="el-form-item__error"
|
||||
>
|
||||
{{ $t('deDataset.already_exists') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="result-num">
|
||||
@ -183,11 +198,13 @@ import { getToken } from '@/utils/auth'
|
||||
import i18n from '@/lang'
|
||||
import { $alert, $confirm } from '@/utils/message'
|
||||
import store from '@/store'
|
||||
import msgCfm from '@/components/msgCfm/index'
|
||||
|
||||
const token = getToken()
|
||||
|
||||
export default {
|
||||
name: 'AddExcel',
|
||||
mixins: [msgCfm],
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
@ -200,6 +217,10 @@ export default {
|
||||
editType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -275,8 +296,30 @@ export default {
|
||||
})
|
||||
this.defaultCheckedKeys.splice(index, 1)
|
||||
}
|
||||
this.validateName()
|
||||
this.$emit('setTableNum', this.defaultCheckedKeys.length)
|
||||
},
|
||||
nameExsitValidator(ele, checkList) {
|
||||
this.$set(
|
||||
ele,
|
||||
'nameExsit',
|
||||
this.nameList
|
||||
.concat(checkList)
|
||||
.filter((name) => name === ele.datasetName).length > 1
|
||||
)
|
||||
},
|
||||
validateName() {
|
||||
const checkList = this.$refs.tree.getCheckedNodes().map(ele => ele.datasetName)
|
||||
this.excelData
|
||||
.reduce((pre, next) => pre.concat(next.sheets), [])
|
||||
.forEach((ele, index) => {
|
||||
if (checkList.includes(ele.datasetName)) {
|
||||
this.nameExsitValidator(ele, checkList)
|
||||
} else {
|
||||
this.$set(ele, 'nameExsit', false)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.sheet) {
|
||||
this.sheetObj = data
|
||||
@ -300,6 +343,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.validateName();
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
@ -367,24 +411,20 @@ export default {
|
||||
var effectExtField = false
|
||||
var changeFiled = false
|
||||
var selectNode = this.$refs.tree.getCheckedNodes()
|
||||
if (selectNode.some((ele) => ele.nameExsit)) {
|
||||
this.openMessageSuccess('deDataset.cannot_be_duplicate', 'error')
|
||||
return
|
||||
}
|
||||
for (var i = 0; i < selectNode.length; i++) {
|
||||
if (selectNode[i].sheet) {
|
||||
if (!selectNode[i].datasetName || selectNode[i].datasetName === '') {
|
||||
validate = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.pls_input_name', 'error')
|
||||
return
|
||||
}
|
||||
if (selectNode[i].datasetName.length > 50 && !this.param.tableId) {
|
||||
validate = false
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.char_can_not_more_50'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
|
||||
return
|
||||
}
|
||||
if (selectNode[i].effectExtField) {
|
||||
@ -398,7 +438,7 @@ export default {
|
||||
}
|
||||
}
|
||||
if (selectedSheet.length == 0) {
|
||||
this.$message.warning(this.$t('dataset.ple_select_excel'))
|
||||
this.openMessageSuccess('dataset.ple_select_excel', 'error')
|
||||
return
|
||||
}
|
||||
if (!validate) {
|
||||
@ -429,9 +469,16 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
if (this.param.editType === 0 && this.param.tableId && (effectExtField || changeFiled)) {
|
||||
|
||||
var msg = effectExtField ? i18n.t('dataset.effect_ext_field') + ', ' + i18n.t('dataset.excel_replace_msg') : i18n.t('dataset.excel_replace_msg')
|
||||
if (
|
||||
this.param.editType === 0 &&
|
||||
this.param.tableId &&
|
||||
(effectExtField || changeFiled)
|
||||
) {
|
||||
var msg = effectExtField
|
||||
? i18n.t('dataset.task.effect_ext_field') +
|
||||
', ' +
|
||||
i18n.t('dataset.task.excel_replace_msg')
|
||||
: i18n.t('dataset.task.excel_replace_msg')
|
||||
$confirm(msg, () => {
|
||||
this.saveExcelData(sheetFileMd5, table)
|
||||
})
|
||||
@ -445,7 +492,7 @@ export default {
|
||||
!this.param.tableId
|
||||
) {
|
||||
this.$confirm(
|
||||
this.$t('dataset.excel_replace_msg'),
|
||||
this.$t('dataset.task.excel_replace_msg'),
|
||||
this.$t('dataset.merge_title'),
|
||||
{
|
||||
distinguishCancelAndClose: true,
|
||||
@ -457,7 +504,7 @@ export default {
|
||||
.then(() => {
|
||||
table.mergeSheet = true
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.openMessageSuccess('deDataset.set_saved_successfully')
|
||||
this.cancel()
|
||||
})
|
||||
})
|
||||
@ -467,29 +514,20 @@ export default {
|
||||
}
|
||||
table.mergeSheet = false
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.openMessageSuccess('deDataset.set_saved_successfully')
|
||||
this.cancel()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.openMessageSuccess('deDataset.set_saved_successfully')
|
||||
this.cancel()
|
||||
})
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
if (this.param.tableId) {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'ViewTable',
|
||||
param: this.param.table
|
||||
})
|
||||
} else {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
}
|
||||
this.$router.back()
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
this.searchTable = ''
|
||||
this.options = []
|
||||
@ -518,6 +556,8 @@ export default {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
@ -563,6 +603,18 @@ export default {
|
||||
.table-checkbox-list {
|
||||
height: calc(100% - 100px);
|
||||
overflow-y: auto;
|
||||
.custom-tree-node {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.error-name-exsit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.item {
|
||||
height: 40px;
|
||||
width: 215px;
|
||||
@ -598,6 +650,7 @@ export default {
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button> -->
|
||||
|
||||
<div class="sql-editer" :style="{ height: sqlHeight + 'px' }">
|
||||
<div class="sql-editer">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-select
|
||||
@ -60,206 +60,298 @@
|
||||
</el-col>
|
||||
<el-col style="text-align: right" :span="12">
|
||||
<el-button
|
||||
icon="el-icon-s-operation"
|
||||
type="text"
|
||||
size="small"
|
||||
class="de-text-btn"
|
||||
@click="variableMgm"
|
||||
@click="dataReference = true"
|
||||
>
|
||||
{{ $t('sql_variable.variable_mgm') }}
|
||||
<svg-icon icon-class="data-reference" />
|
||||
{{ $t('deDataset.data_reference') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
icon="el-icon-video-play"
|
||||
type="text"
|
||||
size="small"
|
||||
style="color: #1f2329"
|
||||
class="de-text-btn"
|
||||
@click="variableMgm"
|
||||
>
|
||||
<svg-icon icon-class="reference-setting" />
|
||||
{{ $t('sql_variable.variable_mgm') }}
|
||||
</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button
|
||||
class="de-text-btn"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="getSQLPreview"
|
||||
>
|
||||
<svg-icon icon-class="reference-play" />
|
||||
{{ $t('deDataset.run_a_query') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="code-container">
|
||||
<codemirror
|
||||
ref="myCm"
|
||||
v-model="sql"
|
||||
class="codemirror"
|
||||
:options="sqlOption"
|
||||
@ready="onCmReady"
|
||||
@focus="onCmFocus"
|
||||
@input="onCmCodeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sql-result">
|
||||
<div class="sql-title">
|
||||
{{ $t('deDataset.running_results') }}
|
||||
<span class="result-num">{{
|
||||
`(${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')})`
|
||||
}}</span>
|
||||
|
||||
<span @mousedown="mousedownDrag" class="drag"></span>
|
||||
</div>
|
||||
<div class="table-sql">
|
||||
<el-empty
|
||||
:image-size="60"
|
||||
v-if="errMsg"
|
||||
:image="errImg"
|
||||
:description="$t('deDataset.run_failed')"
|
||||
></el-empty>
|
||||
<ux-grid
|
||||
v-else
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
:height="height"
|
||||
:checkbox-config="{ highlight: true }"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.fieldName"
|
||||
min-width="200px"
|
||||
:field="field.fieldName"
|
||||
:title="field.remarks"
|
||||
:resizable="true"
|
||||
/>
|
||||
</ux-grid>
|
||||
</div>
|
||||
<el-drawer
|
||||
:title="dialogTitle"
|
||||
:visible.sync="showVariableMgm"
|
||||
custom-class="user-drawer sql-dataset-drawer"
|
||||
size="840px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<div class="content">
|
||||
<i class="el-icon-info"></i> {{ $t('dataset.sql_variable_limit_1')
|
||||
}}<br />
|
||||
{{ $t('dataset.sql_variable_limit_2') }}<br />
|
||||
<div class="refrence-sql-table">
|
||||
<div class="data-reference" v-if="dataReference">
|
||||
<div class="table-database-name">
|
||||
<p>
|
||||
<span
|
||||
@click="
|
||||
showTable = false
|
||||
dataTable = ''
|
||||
"
|
||||
style="cursor: pointer"
|
||||
v-if="showTable"
|
||||
><i class="el-icon-arrow-left"></i> {{ $t('chart.back') }}</span
|
||||
>
|
||||
<span v-else>{{ $t('deDataset.data_reference') }}</span>
|
||||
<i
|
||||
@click="
|
||||
showTable = false
|
||||
dataTable = ''
|
||||
dataReference = false
|
||||
"
|
||||
style="cursor: pointer"
|
||||
class="el-icon-close"
|
||||
></i>
|
||||
</p>
|
||||
<p v-if="dataSource">
|
||||
<span>
|
||||
<svg-icon icon-class="db-de" />
|
||||
{{ (showTable && dataTable) || selectedDatasource.name }}
|
||||
</span>
|
||||
<span class="grey">
|
||||
<svg-icon
|
||||
:icon-class="showTable ? 'reference-table' : 'reference-field'"
|
||||
/>
|
||||
{{ (showTable && fieldData.length) || tableData.length }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<el-table :data="variablesTmp">
|
||||
<el-table-column prop="variableName" :label="$t('panel.param_name')">
|
||||
</el-table-column>
|
||||
<el-table-column width="200" :label="$t('deDataset.parameter_type')">
|
||||
<template slot-scope="scope">
|
||||
<el-cascader
|
||||
v-model="scope.row.type"
|
||||
size="mini"
|
||||
class="select-type"
|
||||
:options="fieldOptions"
|
||||
@change="variableTypeChange(scope.row)"
|
||||
<span class="no-select-datasource" v-if="!dataSource">{{
|
||||
$t('deDataset.to_start_using')
|
||||
}}</span>
|
||||
<div v-else-if="dataSource && !dataTable" class="item-list">
|
||||
<div
|
||||
@click="typeSwitch(ele)"
|
||||
:key="ele.name"
|
||||
v-for="ele in tableData"
|
||||
class="table-or-field"
|
||||
>
|
||||
{{ ele.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="dataSource && dataTable" class="item-list">
|
||||
<div
|
||||
:key="ele.fieldName"
|
||||
v-for="ele in fieldData"
|
||||
class="table-or-field"
|
||||
>
|
||||
{{ ele.fieldName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sql-table">
|
||||
<div class="code-container" :style="{ height: sqlHeight + 'px' }">
|
||||
<codemirror
|
||||
ref="myCm"
|
||||
v-model="sql"
|
||||
class="codemirror"
|
||||
:options="sqlOption"
|
||||
@ready="onCmReady"
|
||||
@focus="onCmFocus"
|
||||
@input="onCmCodeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sql-result">
|
||||
<div class="sql-title">
|
||||
{{ $t('deDataset.running_results') }}
|
||||
<span class="result-num">{{
|
||||
`(${$t('dataset.preview_show')} 1000 ${$t(
|
||||
'dataset.preview_item'
|
||||
)})`
|
||||
}}</span>
|
||||
|
||||
<span @mousedown="mousedownDrag" class="drag"></span>
|
||||
</div>
|
||||
<div class="table-sql">
|
||||
<el-empty
|
||||
:image-size="125"
|
||||
v-if="initFlag"
|
||||
style="margin-top: 80px"
|
||||
:image="initImg"
|
||||
:description="$t('deDataset.to_run_query')"
|
||||
>{{ $t('deDataset.the_running_results') }}
|
||||
</el-empty>
|
||||
<el-empty
|
||||
:image-size="60"
|
||||
v-else-if="errMsg"
|
||||
:image="errImg"
|
||||
:description="$t('deDataset.run_failed')"
|
||||
></el-empty>
|
||||
<ux-grid
|
||||
v-else
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
:height="height"
|
||||
:checkbox-config="{ highlight: true }"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.fieldName"
|
||||
min-width="200px"
|
||||
:field="field.fieldName"
|
||||
:title="field.remarks"
|
||||
:resizable="true"
|
||||
/>
|
||||
</ux-grid>
|
||||
</div>
|
||||
<el-drawer
|
||||
:title="dialogTitle"
|
||||
:visible.sync="showVariableMgm"
|
||||
custom-class="user-drawer sql-dataset-drawer"
|
||||
size="840px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<div class="content">
|
||||
<i class="el-icon-info"></i>
|
||||
{{ $t('dataset.sql_variable_limit_1') }}<br />
|
||||
{{ $t('dataset.sql_variable_limit_2') }}<br />
|
||||
</div>
|
||||
<el-table :data="variablesTmp">
|
||||
<el-table-column
|
||||
prop="variableName"
|
||||
:label="$t('panel.param_name')"
|
||||
>
|
||||
</el-cascader>
|
||||
<span class="select-svg-icon">
|
||||
<svg-icon
|
||||
v-if="scope.row.type[0] === 'TEXT'"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="
|
||||
[
|
||||
'DATETIME-YEAR',
|
||||
'DATETIME-YEAR-MONTH',
|
||||
'DATETIME',
|
||||
'DATETIME-YEAR-MONTH-DAY'
|
||||
].includes(scope.row.type[0])
|
||||
"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="['LONG', 'DOUBLE'].includes(scope.row.type[0])"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<!-- <svg-icon
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="200"
|
||||
:label="$t('deDataset.parameter_type')"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-cascader
|
||||
v-model="scope.row.type"
|
||||
size="mini"
|
||||
class="select-type"
|
||||
:options="fieldOptions"
|
||||
@change="variableTypeChange(scope.row)"
|
||||
>
|
||||
</el-cascader>
|
||||
<span class="select-svg-icon">
|
||||
<svg-icon
|
||||
v-if="scope.row.type[0] === 'TEXT'"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="
|
||||
[
|
||||
'DATETIME-YEAR',
|
||||
'DATETIME-YEAR-MONTH',
|
||||
'DATETIME',
|
||||
'DATETIME-YEAR-MONTH-DAY'
|
||||
].includes(scope.row.type[0])
|
||||
"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="['LONG', 'DOUBLE'].includes(scope.row.type[0])"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<!-- <svg-icon
|
||||
v-if="scope.row.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/> -->
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="350"
|
||||
prop="defaultValue"
|
||||
:label="$t('commons.params_value')"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
size="small"
|
||||
v-if="scope.row.type[0] === 'TEXT'"
|
||||
type="text"
|
||||
:placeholder="$t('fu.search_bar.please_input')"
|
||||
v-model="scope.row.defaultValue"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
v-if="
|
||||
scope.row.type[0] === 'LONG' || scope.row.type[0] === 'DOUBLE'
|
||||
"
|
||||
:placeholder="$t('fu.search_bar.please_input')"
|
||||
type="number"
|
||||
v-model="scope.row.defaultValue"
|
||||
/>
|
||||
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME-YEAR'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="year"
|
||||
size="small"
|
||||
value-format="yyyy"
|
||||
:placeholder="$t('dataset.select_year')"
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="350"
|
||||
prop="defaultValue"
|
||||
:label="$t('commons.params_value')"
|
||||
>
|
||||
</el-date-picker>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
size="small"
|
||||
v-if="scope.row.type[0] === 'TEXT'"
|
||||
type="text"
|
||||
:placeholder="$t('fu.search_bar.please_input')"
|
||||
v-model="scope.row.defaultValue"
|
||||
/>
|
||||
<el-input
|
||||
size="small"
|
||||
v-if="
|
||||
scope.row.type[0] === 'LONG' ||
|
||||
scope.row.type[0] === 'DOUBLE'
|
||||
"
|
||||
:placeholder="$t('fu.search_bar.please_input')"
|
||||
type="number"
|
||||
v-model="scope.row.defaultValue"
|
||||
/>
|
||||
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="month"
|
||||
size="small"
|
||||
:format="scope.row.type[1]"
|
||||
:value-format="scope.row.type[1]"
|
||||
:placeholder="$t('dataset.select_month')"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME-YEAR'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="year"
|
||||
size="small"
|
||||
value-format="yyyy"
|
||||
:placeholder="$t('dataset.select_year')"
|
||||
>
|
||||
</el-date-picker>
|
||||
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH-DAY'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="date"
|
||||
size="small"
|
||||
:format="scope.row.type[1]"
|
||||
:value-format="scope.row.type[1]"
|
||||
:placeholder="$t('dataset.select_date')"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="month"
|
||||
size="small"
|
||||
:format="scope.row.type[1]"
|
||||
:value-format="scope.row.type[1]"
|
||||
:placeholder="$t('dataset.select_month')"
|
||||
>
|
||||
</el-date-picker>
|
||||
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="datetime"
|
||||
size="small"
|
||||
:format="scope.row.type[1]"
|
||||
:value-format="scope.row.type[1]"
|
||||
:placeholder="$t('dataset.select_time')"
|
||||
>
|
||||
</el-date-picker>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="de-foot">
|
||||
<deBtn secondary @click="closeVariableMgm">{{
|
||||
$t('dataset.cancel')
|
||||
}}</deBtn>
|
||||
<deBtn type="primary" @click="saveVariable()">{{
|
||||
$t('dataset.confirm')
|
||||
}}</deBtn>
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH-DAY'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="date"
|
||||
size="small"
|
||||
:format="scope.row.type[1]"
|
||||
:value-format="scope.row.type[1]"
|
||||
:placeholder="$t('dataset.select_date')"
|
||||
>
|
||||
</el-date-picker>
|
||||
|
||||
<el-date-picker
|
||||
v-if="scope.row.type[0] === 'DATETIME'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="datetime"
|
||||
size="small"
|
||||
:format="scope.row.type[1]"
|
||||
:value-format="scope.row.type[1]"
|
||||
:placeholder="$t('dataset.select_time')"
|
||||
>
|
||||
</el-date-picker>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="de-foot">
|
||||
<deBtn secondary @click="closeVariableMgm">{{
|
||||
$t('dataset.cancel')
|
||||
}}</deBtn>
|
||||
<deBtn type="primary" @click="saveVariable()">{{
|
||||
$t('dataset.confirm')
|
||||
}}</deBtn>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -292,10 +384,12 @@ import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/hint/sql-hint'
|
||||
import 'codemirror/addon/hint/show-hint'
|
||||
import { engineMode } from '@/api/system/engine'
|
||||
import msgCfm from '@/components/msgCfm/index'
|
||||
|
||||
export default {
|
||||
name: 'AddSQL',
|
||||
components: { codemirror },
|
||||
mixins: [msgCfm],
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
@ -305,9 +399,15 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
dataSource: '',
|
||||
dataTable: '',
|
||||
initFlag: true,
|
||||
showTable: false,
|
||||
tableData: [],
|
||||
fieldData: [],
|
||||
errMsg: false,
|
||||
options: [],
|
||||
sql: '',
|
||||
dataReference: false,
|
||||
sqlOption: {
|
||||
tabSize: 2,
|
||||
styleActiveLine: true,
|
||||
@ -322,7 +422,8 @@ export default {
|
||||
},
|
||||
data: [],
|
||||
errImg: require('@/assets/error.png'),
|
||||
sqlHeight: 330,
|
||||
initImg: require('@/assets/None.png'),
|
||||
sqlHeight: 248,
|
||||
fields: [],
|
||||
mode: '0',
|
||||
syncType: 'sync_now',
|
||||
@ -392,7 +493,8 @@ export default {
|
||||
computed: {
|
||||
codemirror() {
|
||||
return this.$refs.myCm.codemirror
|
||||
}
|
||||
},
|
||||
dataSourceDetail() {}
|
||||
},
|
||||
watch: {
|
||||
'param.tableId': {
|
||||
@ -421,6 +523,19 @@ export default {
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getField(name) {
|
||||
post('/dataset/table/getFields', {
|
||||
dataSourceId: this.dataSource,
|
||||
info: JSON.stringify({ table: name })
|
||||
}).then((res) => {
|
||||
this.fieldData = res.data
|
||||
})
|
||||
},
|
||||
typeSwitch({ name }) {
|
||||
this.showTable = true
|
||||
this.dataTable = name
|
||||
this.getField(name)
|
||||
},
|
||||
mousedownDrag() {
|
||||
document
|
||||
.querySelector('.dataset-sql')
|
||||
@ -455,6 +570,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
post('/datasource/getTables/' + this.dataSource, {}).then((response) => {
|
||||
this.tableData = response.data
|
||||
})
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
@ -492,12 +610,9 @@ export default {
|
||||
|
||||
getSQLPreview() {
|
||||
this.errMsg = false
|
||||
this.initFlag = false
|
||||
if (!this.dataSource || this.datasource === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_slc_data_source'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.pls_slc_data_source', 'error')
|
||||
return
|
||||
}
|
||||
this.parseVariable()
|
||||
@ -523,27 +638,15 @@ export default {
|
||||
|
||||
save() {
|
||||
if (!this.dataSource || this.datasource === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_slc_data_source'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.pls_slc_data_source', 'error')
|
||||
return
|
||||
}
|
||||
if (!this.table.name || this.table.name === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.pls_input_name', 'error')
|
||||
return
|
||||
}
|
||||
if (this.table.name.length > 50) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.char_can_not_more_50'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
|
||||
return
|
||||
}
|
||||
this.parseVariable()
|
||||
@ -562,20 +665,13 @@ export default {
|
||||
})
|
||||
}
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.openMessageSuccess('deDataset.set_saved_successfully')
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
if (this.param.tableId) {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'ViewTable',
|
||||
param: this.param.table
|
||||
})
|
||||
} else {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
}
|
||||
this.$router.back()
|
||||
},
|
||||
|
||||
showSQL(val) {
|
||||
@ -715,16 +811,90 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.sql-editer {
|
||||
min-height: 330px;
|
||||
background: #f5f6f7;
|
||||
padding: 16px 24px;
|
||||
.code-container {
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 64px);
|
||||
margin-top: 16px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
.CodeMirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.refrence-sql-table {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
overflow: hidden;
|
||||
.data-reference {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
.no-select-datasource {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
.table-database-name {
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
padding: 16px 12px;
|
||||
border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:nth-child(2)p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.grey {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
}
|
||||
|
||||
.item-list {
|
||||
padding: 16px 8px;
|
||||
height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
.table-or-field {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
color: var(--primary, #3370ff);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 4px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sql-table {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.code-container {
|
||||
background: #f5f6f7;
|
||||
box-sizing: border-box;
|
||||
min-height: 248px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
.CodeMirror {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -768,6 +938,14 @@ export default {
|
||||
padding: 18px 25px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
.el-empty__bottom,
|
||||
.el-empty__description p {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-top: 0;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,19 +209,11 @@ export default {
|
||||
},
|
||||
save() {
|
||||
if (!this.param.name || this.param.name === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.pls_input_name', 'error')
|
||||
return
|
||||
}
|
||||
if (this.param.name.length > 50) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.char_can_not_more_50'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
|
||||
return
|
||||
}
|
||||
const table = {
|
||||
@ -239,14 +231,7 @@ export default {
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
if (this.param.tableId) {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'ViewTable',
|
||||
param: this.param.table
|
||||
})
|
||||
} else {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
}
|
||||
this.$router.back()
|
||||
},
|
||||
selectDs() {
|
||||
this.selectDsDialog = true
|
||||
@ -260,11 +245,7 @@ export default {
|
||||
},
|
||||
confirmSelectDs() {
|
||||
if (this.tempDs.mode === 0 && this.tempDs.modelInnerType === 'sql') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.sql_ds_union_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.openMessageSuccess('deDataset.sql_ds_union_error')
|
||||
return
|
||||
}
|
||||
const ds = JSON.parse(JSON.stringify(this.unionItem))
|
||||
@ -315,11 +296,7 @@ export default {
|
||||
if (this.checkUnion()) {
|
||||
this.editUnion = false
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('dataset.union_error'),
|
||||
type: 'error',
|
||||
showClose: true
|
||||
})
|
||||
this.openMessageSuccess('deDataset.union_error')
|
||||
}
|
||||
},
|
||||
cancelUnion(val) {
|
||||
|
||||
@ -326,7 +326,7 @@
|
||||
style="margin-left: -4px"
|
||||
:disabled="!hasDataPermission('manage', param.privileges)"
|
||||
@click="dqTrans(scope.row, 'd')"
|
||||
>{{ $t('convert_to_indicator') }}</el-button
|
||||
>{{ $t('deDataset.convert_to_indicator') }}</el-button
|
||||
>
|
||||
<template v-if="scope.row.extField !== 0">
|
||||
<el-button
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</span>
|
||||
<span class="title-text" style="width: 100px"
|
||||
>{{ $t('deDataset.display') }} {{ form.row }}
|
||||
{{ $t('deDataset.that_s_ok') }}</span
|
||||
{{ $t('deDataset.row') }}</span
|
||||
>
|
||||
<el-popover
|
||||
popper-class="de-set-count de-card-dropdown"
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
class="table-num"
|
||||
v-if="['db', 'excel', 'api'].includes(datasetType)"
|
||||
>{{ $t('deDataset.selected') }} {{ tableNum }}
|
||||
{{ $t('deDataset.zhang_biao') }}</span
|
||||
{{ $t('deDataset.table') }}</span
|
||||
>
|
||||
<deBtn @click="datasetSave" type="primary">{{
|
||||
$t('commons.save')
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
<div v-if="!tData.length" class="no-tdata">
|
||||
{{ $t('deDataset.no_dataset_click') }}
|
||||
<span @click="() => clickAdd()" class="no-tdata-new">{{
|
||||
$t('deDataset.newly_build')
|
||||
$t('deDataset.create')
|
||||
}}</span>
|
||||
</div>
|
||||
<el-tree
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -10,13 +10,10 @@
|
||||
<span>{{ $t('driver.mgm') }}</span>
|
||||
</div>
|
||||
<deBtn type="primary" @click="addDriver" icon="el-icon-plus"
|
||||
>{{ $t("driver.add") }}
|
||||
>{{ $t('driver.add') }}
|
||||
</deBtn>
|
||||
</div>
|
||||
<de-aside-container
|
||||
style="padding: 0 0"
|
||||
type="datasource"
|
||||
>
|
||||
<de-aside-container style="padding: 0 0" type="datasource">
|
||||
<ds-tree
|
||||
@switch-mgm="switchMgm"
|
||||
ref="dsTree"
|
||||
@ -24,8 +21,7 @@
|
||||
@switch-main="switchMain"
|
||||
/>
|
||||
</de-aside-container>
|
||||
<de-main-container
|
||||
>
|
||||
<de-main-container>
|
||||
<component
|
||||
:is="component"
|
||||
v-if="!!component"
|
||||
@ -35,21 +31,26 @@
|
||||
@refresh-type="refreshType"
|
||||
@switch-component="switchMain"
|
||||
/>
|
||||
<el-empty v-else :image-size="125" :description="$t(`datasource.${swTips}`)" :image="image"></el-empty>
|
||||
<el-empty
|
||||
v-else
|
||||
:image-size="125"
|
||||
:description="$t(`datasource.${swTips}`)"
|
||||
:image="image"
|
||||
></el-empty>
|
||||
</de-main-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from "@/components/dataease/DeMainContainer";
|
||||
import DeAsideContainer from "@/components/dataease/DeAsideContainer";
|
||||
import DsTree from "./DsTree";
|
||||
import DsForm from "./DsForm";
|
||||
import dsTable from "./dsTable";
|
||||
import DriverForm from "./DriverFormDetail";
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import DsTree from './DsTree'
|
||||
import DsForm from './DsForm'
|
||||
import dsTable from './dsTable'
|
||||
import DriverForm from './DriverFormDetail'
|
||||
|
||||
export default {
|
||||
name: "DsMain",
|
||||
name: 'DsMain',
|
||||
components: { DeMainContainer, DeAsideContainer, DsTree },
|
||||
data() {
|
||||
return {
|
||||
@ -58,65 +59,65 @@ export default {
|
||||
datasource: {},
|
||||
param: null,
|
||||
tData: null,
|
||||
currentMgm: "dsMgm",
|
||||
dsTypes: [],
|
||||
};
|
||||
currentMgm: 'dsMgm',
|
||||
dsTypes: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
swTips() {
|
||||
return this.currentMgm === 'driverMgm' ? 'on_the_left' : 'on_the_left';
|
||||
return this.currentMgm === 'driverMgm' ? 'on_the_left' : 'on_the_left'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump() {
|
||||
this.$refs.dsTree.dsMgm();
|
||||
this.switchMgm('dsMgm');
|
||||
this.$refs.dsTree.dsMgm()
|
||||
this.switchMgm('dsMgm')
|
||||
},
|
||||
switchMgm(type) {
|
||||
this.currentMgm = type;
|
||||
this.currentMgm = type
|
||||
},
|
||||
addDriver() {
|
||||
this.$refs.dsTree.addDriver();
|
||||
this.$refs.dsTree.addDriver()
|
||||
},
|
||||
// 切换main区内容
|
||||
switchMain(param) {
|
||||
const { component, componentParam, tData, dsTypes } = param;
|
||||
this.component = '';
|
||||
this.param = null;
|
||||
const { component, componentParam, tData, dsTypes } = param
|
||||
this.component = ''
|
||||
this.param = null
|
||||
this.$nextTick(() => {
|
||||
switch (component) {
|
||||
case "DsForm":
|
||||
this.component = DsForm;
|
||||
this.param = componentParam;
|
||||
this.tData = tData;
|
||||
this.dsTypes = dsTypes;
|
||||
break;
|
||||
case "DriverForm":
|
||||
this.component = DriverForm;
|
||||
this.param = componentParam;
|
||||
this.tData = tData;
|
||||
this.dsTypes = dsTypes;
|
||||
break;
|
||||
case "dsTable":
|
||||
this.component = dsTable;
|
||||
this.param = componentParam;
|
||||
break;
|
||||
case 'DsForm':
|
||||
this.component = DsForm
|
||||
this.param = componentParam
|
||||
this.tData = tData
|
||||
this.dsTypes = dsTypes
|
||||
break
|
||||
case 'DriverForm':
|
||||
this.component = DriverForm
|
||||
this.param = componentParam
|
||||
this.tData = tData
|
||||
this.dsTypes = dsTypes
|
||||
break
|
||||
case 'dsTable':
|
||||
this.component = dsTable
|
||||
this.param = componentParam
|
||||
break
|
||||
default:
|
||||
this.component = '';
|
||||
this.param = null;
|
||||
break;
|
||||
this.component = ''
|
||||
this.param = null
|
||||
break
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
refreshType(datasource) {
|
||||
this.datasource = datasource;
|
||||
this.$refs.dsTree && this.$refs.dsTree.refreshType(datasource);
|
||||
this.datasource = datasource
|
||||
this.$refs.dsTree && this.$refs.dsTree.refreshType(datasource)
|
||||
},
|
||||
msg2Current(sourceParam) {
|
||||
this.$refs.dsTree && this.$refs.dsTree.markInvalid(sourceParam);
|
||||
},
|
||||
},
|
||||
};
|
||||
this.$refs.dsTree && this.$refs.dsTree.markInvalid(sourceParam)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-col>
|
||||
<el-row class="title-css" v-show="showView === 'Datasource'">
|
||||
<el-col class="title-text" :span="12">
|
||||
{{ $t("commons.datasource") }}
|
||||
{{ $t('commons.datasource') }}
|
||||
</el-col>
|
||||
<el-col class="title-operate" :span="12">
|
||||
<el-tooltip
|
||||
@ -111,7 +111,11 @@
|
||||
v-if="data.type === 'folder'"
|
||||
effect="dark"
|
||||
:content="
|
||||
$t(showView === 'Driver' ? 'driver.add' : 'datasource.add_data_source')
|
||||
$t(
|
||||
showView === 'Driver'
|
||||
? 'driver.add'
|
||||
: 'datasource.add_data_source'
|
||||
)
|
||||
"
|
||||
placement="top"
|
||||
>
|
||||
@ -133,11 +137,11 @@
|
||||
<slot>
|
||||
<el-dropdown-item command="edit">
|
||||
<i class="el-icon-edit"></i>
|
||||
{{ $t("chart.edit") }}
|
||||
{{ $t('chart.edit') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="delete">
|
||||
<i class="el-icon-delete"></i>
|
||||
{{ $t("chart.delete") }}
|
||||
{{ $t('chart.delete') }}
|
||||
</el-dropdown-item>
|
||||
</slot>
|
||||
</el-dropdown-menu>
|
||||
@ -166,7 +170,10 @@
|
||||
:rules="rule"
|
||||
>
|
||||
<el-form-item :label="$t('datasource.driver_name')" prop="name">
|
||||
<el-input v-model="driverForm.name" :placeholder="$t('fu.search_bar.please_input')" />
|
||||
<el-input
|
||||
v-model="driverForm.name"
|
||||
:placeholder="$t('fu.search_bar.please_input')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.drive_type')" prop="type">
|
||||
<el-select
|
||||
@ -189,9 +196,9 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
|
||||
<deBtn secondary @click="close()">{{ $t('commons.cancel') }}</deBtn>
|
||||
<deBtn type="primary" size="mini" @click="saveDriver(driverForm)"
|
||||
>{{ $t("commons.save") }}
|
||||
>{{ $t('commons.save') }}
|
||||
</deBtn>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@ -206,10 +213,18 @@
|
||||
>
|
||||
<el-tabs v-model="tabActive" @tab-click="changeTab">
|
||||
<el-tab-pane :label="$t('datasource.all')" name="all"> </el-tab-pane>
|
||||
<el-tab-pane :label="$t('datasource.relational_database')" name="reDb"> </el-tab-pane>
|
||||
<el-tab-pane :label="$t('datasource.non_relational_database')" name="noReDb">
|
||||
<el-tab-pane
|
||||
:label="$t('datasource.relational_database')"
|
||||
name="reDb"
|
||||
>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
:label="$t('datasource.non_relational_database')"
|
||||
name="noReDb"
|
||||
>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('datasource.other')" name="other">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('datasource.other')" name="other"> </el-tab-pane>
|
||||
<div class="db-container">
|
||||
<div
|
||||
@click="addDb(db)"
|
||||
@ -230,8 +245,8 @@
|
||||
</el-col>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import i18n from "@/lang";
|
||||
import { mapGetters } from 'vuex'
|
||||
import i18n from '@/lang'
|
||||
import {
|
||||
listDatasource,
|
||||
listDatasourceByType,
|
||||
@ -241,368 +256,364 @@ import {
|
||||
addDriver,
|
||||
delDriver,
|
||||
listDriverByType,
|
||||
updateDriver,
|
||||
} from "@/api/system/datasource";
|
||||
import { ApplicationContext } from "@/utils/ApplicationContext";
|
||||
import deTextarea from "@/components/deCustomCm/deTextarea.vue";
|
||||
import msgCfm from "@/components/msgCfm";
|
||||
updateDriver
|
||||
} from '@/api/system/datasource'
|
||||
import { ApplicationContext } from '@/utils/ApplicationContext'
|
||||
import deTextarea from '@/components/deCustomCm/deTextarea.vue'
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
|
||||
export default {
|
||||
name: "DsTree",
|
||||
name: 'DsTree',
|
||||
mixins: [msgCfm],
|
||||
components: { deTextarea },
|
||||
props: {
|
||||
datasource: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabActive: "all",
|
||||
tabActive: 'all',
|
||||
dsTypeRelate: false,
|
||||
expandedArray: [],
|
||||
tData: [],
|
||||
dsTypes: [],
|
||||
dsTypesForDriver: [],
|
||||
showSearchInput: false,
|
||||
key: "",
|
||||
showView: "Datasource",
|
||||
dialogTitle: "",
|
||||
key: '',
|
||||
showView: 'Datasource',
|
||||
dialogTitle: '',
|
||||
editDriver: false,
|
||||
driverForm: {
|
||||
name: "",
|
||||
desc: "",
|
||||
type: "",
|
||||
name: '',
|
||||
desc: '',
|
||||
type: ''
|
||||
},
|
||||
params: {},
|
||||
rule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t("datasource.input_name"),
|
||||
trigger: "blur",
|
||||
message: i18n.t('datasource.input_name'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 2,
|
||||
max: 50,
|
||||
message: i18n.t("datasource.input_limit_2_25", [2, 25]),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: i18n.t('datasource.input_limit_2_25', [2, 25]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
desc: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t("datasource.input_name"),
|
||||
trigger: "blur",
|
||||
message: i18n.t('datasource.input_name'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 2,
|
||||
max: 200,
|
||||
message: i18n.t("datasource.input_limit_2_25", [2, 25]),
|
||||
trigger: "blur",
|
||||
},
|
||||
message: i18n.t('datasource.input_limit_2_25', [2, 25]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t("datasource.please_choose_type"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
message: i18n.t('datasource.please_choose_type'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
key(val) {
|
||||
this.$refs.myDsTree.filter(val);
|
||||
},
|
||||
this.$refs.myDsTree.filter(val)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["user"]),
|
||||
...mapGetters(['user'])
|
||||
},
|
||||
created() {
|
||||
this.queryTreeDatas();
|
||||
this.datasourceTypes();
|
||||
this.queryTreeDatas()
|
||||
this.datasourceTypes()
|
||||
},
|
||||
methods: {
|
||||
changeTab() {},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
showSearchWidget() {
|
||||
this.showSearchInput = true;
|
||||
this.showSearchInput = true
|
||||
},
|
||||
closeSearchWidget() {
|
||||
this.key = "";
|
||||
this.showSearchInput = false;
|
||||
this.key = ''
|
||||
this.showSearchInput = false
|
||||
},
|
||||
queryTreeDatas() {
|
||||
if (this.showView === "Datasource") {
|
||||
if (this.showView === 'Datasource') {
|
||||
listDatasource().then((res) => {
|
||||
this.tData = this.buildTree(res.data);
|
||||
});
|
||||
this.tData = this.buildTree(res.data)
|
||||
})
|
||||
}
|
||||
if (this.showView === "Driver") {
|
||||
if (this.showView === 'Driver') {
|
||||
listDrivers().then((res) => {
|
||||
this.tData = this.buildTree(res.data);
|
||||
});
|
||||
this.tData = this.buildTree(res.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
datasourceTypes() {
|
||||
listDatasourceType().then((res) => {
|
||||
this.dsTypes = res.data;
|
||||
this.dsTypes = res.data
|
||||
this.dsTypes.forEach((item) => {
|
||||
if (item.isJdbc) {
|
||||
this.dsTypesForDriver.push(item);
|
||||
this.dsTypesForDriver.push(item)
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
},
|
||||
refreshType(datasource) {
|
||||
const method =
|
||||
this.showView === "Datasource"
|
||||
? listDatasourceByType
|
||||
: listDriverByType;
|
||||
let typeData = [];
|
||||
this.showView === 'Datasource' ? listDatasourceByType : listDriverByType
|
||||
let typeData = []
|
||||
method(datasource.type).then((res) => {
|
||||
typeData = this.buildTree(res.data);
|
||||
typeData = this.buildTree(res.data)
|
||||
if (typeData.length === 0) {
|
||||
const index = this.tData.findIndex((item) => {
|
||||
if (item.id === datasource.type) {
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
});
|
||||
this.tData.splice(index, 1);
|
||||
})
|
||||
this.tData.splice(index, 1)
|
||||
} else {
|
||||
let find = false;
|
||||
let find = false
|
||||
for (let index = 0; index < this.tData.length; index++) {
|
||||
if (typeData[0].id === this.tData[index].id) {
|
||||
this.tData[index].children = typeData[0].children;
|
||||
this.tData[index].children = typeData[0].children
|
||||
for (let i = 0; i < this.tData[index].children.length; i++) {
|
||||
if (this.tData[index].children[i].id === datasource.id) {
|
||||
this.showInfo({ data: this.tData[index].children[i] });
|
||||
this.showInfo({ data: this.tData[index].children[i] })
|
||||
}
|
||||
}
|
||||
find = true;
|
||||
find = true
|
||||
}
|
||||
}
|
||||
if (!find) {
|
||||
this.tData.push(typeData[0]);
|
||||
this.tData.push(typeData[0])
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
buildTree(array) {
|
||||
const types = {};
|
||||
const newArr = [];
|
||||
const types = {}
|
||||
const newArr = []
|
||||
for (let index = 0; index < array.length; index++) {
|
||||
const element = array[index];
|
||||
const element = array[index]
|
||||
if (this.msgNodeId) {
|
||||
if (element.id === this.msgNodeId) {
|
||||
element.msgNode = true;
|
||||
element.msgNode = true
|
||||
}
|
||||
}
|
||||
if (!(element.type in types)) {
|
||||
types[element.type] = [];
|
||||
types[element.type] = []
|
||||
// newArr.push(...element, ...{ children: types[element.type] })
|
||||
newArr.push({
|
||||
id: element.type,
|
||||
name: element.typeDesc,
|
||||
type: "folder",
|
||||
children: types[element.type],
|
||||
});
|
||||
type: 'folder',
|
||||
children: types[element.type]
|
||||
})
|
||||
}
|
||||
types[element.type].push(element);
|
||||
types[element.type].push(element)
|
||||
// newArr.children.push({ id: element.id, label: element.name })
|
||||
}
|
||||
return newArr;
|
||||
return newArr
|
||||
},
|
||||
addFolder() {
|
||||
if (this.showView === "Driver") {
|
||||
this.dialogTitle = this.$t("datasource.add_driver");
|
||||
this.editDriver = true;
|
||||
this.switchMain("DriverForm", {}, this.tData, this.dsTypes);
|
||||
if (this.showView === 'Driver') {
|
||||
this.dialogTitle = this.$t('datasource.add_driver')
|
||||
this.editDriver = true
|
||||
this.switchMain('DriverForm', {}, this.tData, this.dsTypes)
|
||||
} else {
|
||||
this.dsTypeRelate = true;
|
||||
this.dsTypeRelate = true
|
||||
}
|
||||
},
|
||||
addDriver() {
|
||||
this.dialogTitle = this.$t("datasource.add_driver");
|
||||
this.editDriver = true;
|
||||
this.dialogTitle = this.$t('datasource.add_driver')
|
||||
this.editDriver = true
|
||||
},
|
||||
driverMgm() {
|
||||
this.$emit("switch-main", {});
|
||||
this.$emit("switch-mgm", "driverMgm");
|
||||
this.showView = "Driver";
|
||||
this.expandedArray = [];
|
||||
this.tData = [];
|
||||
this.queryTreeDatas();
|
||||
this.$emit('switch-main', {})
|
||||
this.$emit('switch-mgm', 'driverMgm')
|
||||
this.showView = 'Driver'
|
||||
this.expandedArray = []
|
||||
this.tData = []
|
||||
this.queryTreeDatas()
|
||||
},
|
||||
dsMgm() {
|
||||
this.$emit("switch-main", {});
|
||||
this.showView = "Datasource";
|
||||
this.expandedArray = [];
|
||||
this.tData = [];
|
||||
this.queryTreeDatas();
|
||||
this.$emit('switch-main', {})
|
||||
this.showView = 'Datasource'
|
||||
this.expandedArray = []
|
||||
this.tData = []
|
||||
this.queryTreeDatas()
|
||||
},
|
||||
addDb({ type }) {
|
||||
this.$router.push({
|
||||
name: "datasource-form",
|
||||
params: { type },
|
||||
});
|
||||
name: 'datasource-form',
|
||||
params: { type }
|
||||
})
|
||||
},
|
||||
addFolderWithType(data) {
|
||||
if (this.showView === "Driver") {
|
||||
this.driverForm.type = data.id;
|
||||
this.dialogTitle = this.$t("datasource.add_driver");
|
||||
this.editDriver = true;
|
||||
if (this.showView === 'Driver') {
|
||||
this.driverForm.type = data.id
|
||||
this.dialogTitle = this.$t('datasource.add_driver')
|
||||
this.editDriver = true
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: "datasource-form",
|
||||
params: { type: data.id },
|
||||
});
|
||||
name: 'datasource-form',
|
||||
params: { type: data.id }
|
||||
})
|
||||
}
|
||||
},
|
||||
nodeClick(node, data) {
|
||||
if (node.type === "folder") return;
|
||||
this.showInfo(data);
|
||||
if (node.type === 'folder') return
|
||||
this.showInfo(data)
|
||||
},
|
||||
clickFileMore(param) {
|
||||
const { optType, data } = param;
|
||||
const { optType, data } = param
|
||||
switch (optType) {
|
||||
case "edit":
|
||||
this.edit(data);
|
||||
break;
|
||||
case "delete":
|
||||
this._handleDelete(data);
|
||||
break;
|
||||
case 'edit':
|
||||
this.edit(data)
|
||||
break
|
||||
case 'delete':
|
||||
this._handleDelete(data)
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
},
|
||||
showInfo(row) {
|
||||
if (this.showView === "Driver") {
|
||||
const param = { ...row.data, ...{ showModel: "show" } };
|
||||
if (this.showView === 'Driver') {
|
||||
const param = { ...row.data, ...{ showModel: 'show' } }
|
||||
this.switchMain(
|
||||
this.showView === "Datasource" ? "DsForm" : "DriverForm",
|
||||
this.showView === 'Datasource' ? 'DsForm' : 'DriverForm',
|
||||
param,
|
||||
this.tData,
|
||||
this.dsTypes
|
||||
);
|
||||
)
|
||||
} else {
|
||||
this.switchMain("dsTable", row.data);
|
||||
this.switchMain('dsTable', row.data)
|
||||
}
|
||||
},
|
||||
handleCommand(type, data) {
|
||||
switch (type) {
|
||||
case "edit":
|
||||
this._handleEditer(data);
|
||||
break;
|
||||
case "delete":
|
||||
this._handleDelete(data);
|
||||
break;
|
||||
case 'edit':
|
||||
this._handleEditer(data)
|
||||
break
|
||||
case 'delete':
|
||||
this._handleDelete(data)
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
},
|
||||
_handleEditer(row) {
|
||||
if (this.showView === "Datasource") {
|
||||
const param = { ...row, ...{ showModel: "show" } };
|
||||
this.switchMain(
|
||||
'DsForm',
|
||||
param,
|
||||
this.tData,
|
||||
this.dsTypes
|
||||
);
|
||||
if (this.showView === 'Datasource') {
|
||||
const param = { ...row, ...{ showModel: 'show' } }
|
||||
this.switchMain('DsForm', param, this.tData, this.dsTypes)
|
||||
return
|
||||
}
|
||||
this.editDriver = true;
|
||||
this.dialogTitle = this.$t('datasource.edit_driver');
|
||||
this.driverForm = row;
|
||||
this.editDriver = true
|
||||
this.dialogTitle = this.$t('datasource.edit_driver')
|
||||
this.driverForm = row
|
||||
},
|
||||
_handleDelete(datasource) {
|
||||
const params = {
|
||||
title: this.showView === "Datasource" ? 'datasource.this_data_source' : 'datasource.delete_this_driver',
|
||||
title:
|
||||
this.showView === 'Datasource'
|
||||
? 'datasource.this_data_source'
|
||||
: 'datasource.delete_this_driver',
|
||||
cb: () => {
|
||||
let method = delDriver;
|
||||
let parma = { type: datasource.type, id: datasource.id };
|
||||
if (this.showView === "Datasource") {
|
||||
method = delDs;
|
||||
parma = datasource.id;
|
||||
let method = delDriver
|
||||
let parma = { type: datasource.type, id: datasource.id }
|
||||
if (this.showView === 'Datasource') {
|
||||
method = delDs
|
||||
parma = datasource.id
|
||||
}
|
||||
method(parma).then((res) => {
|
||||
if (res.success) {
|
||||
this.openMessageSuccess("commons.delete_success");
|
||||
this.switchMain("", {}, this.tData, this.dsTypes);
|
||||
this.refreshType(datasource);
|
||||
this.openMessageSuccess('commons.delete_success')
|
||||
this.switchMain('', {}, this.tData, this.dsTypes)
|
||||
this.refreshType(datasource)
|
||||
} else {
|
||||
this.openMessageSuccess(res.message, "error")
|
||||
this.openMessageSuccess(res.message, 'error')
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
this.handlerConfirm(params)
|
||||
},
|
||||
switchMain(component, componentParam, tData, dsTypes) {
|
||||
if (component === "DsForm") {
|
||||
if (component === 'DsForm') {
|
||||
this.$router.push({
|
||||
name: "datasource-form",
|
||||
name: 'datasource-form',
|
||||
params: {
|
||||
...componentParam,
|
||||
msgNodeId: this.msgNodeId,
|
||||
},
|
||||
});
|
||||
return;
|
||||
msgNodeId: this.msgNodeId
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$emit("switch-main", {
|
||||
this.$emit('switch-main', {
|
||||
component,
|
||||
componentParam,
|
||||
tData,
|
||||
dsTypes,
|
||||
});
|
||||
dsTypes
|
||||
})
|
||||
},
|
||||
markInvalid(msgParam) {
|
||||
const param = JSON.parse(msgParam);
|
||||
const msgNodeId = param.id;
|
||||
this.msgNodeId = msgNodeId;
|
||||
const param = JSON.parse(msgParam)
|
||||
const msgNodeId = param.id
|
||||
this.msgNodeId = msgNodeId
|
||||
this.$nextTick(() => {
|
||||
this.tData.forEach((folder) => {
|
||||
const nodes = folder.children;
|
||||
const nodes = folder.children
|
||||
nodes.forEach((node) => {
|
||||
if (node.id === msgNodeId) {
|
||||
node.msgNode = true;
|
||||
node.msgNode = true
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$refs["driverForm"].resetFields();
|
||||
this.editDriver = false;
|
||||
this.$refs['driverForm'].resetFields()
|
||||
this.editDriver = false
|
||||
this.driverForm = {
|
||||
name: "",
|
||||
desc: "",
|
||||
type: "",
|
||||
};
|
||||
name: '',
|
||||
desc: '',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
saveDriver(driverForm) {
|
||||
this.$refs["driverForm"].validate((valid) => {
|
||||
this.$refs['driverForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const req = driverForm.id ? updateDriver : addDriver;
|
||||
const req = driverForm.id ? updateDriver : addDriver
|
||||
req(driverForm).then((res) => {
|
||||
this.openMessageSuccess("dataset.save_success")
|
||||
this.refreshType(driverForm);
|
||||
this.close();
|
||||
});
|
||||
this.openMessageSuccess('dataset.save_success')
|
||||
this.refreshType(driverForm)
|
||||
this.close()
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
return false
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-tree-container {
|
||||
|
||||
@ -45,13 +45,13 @@
|
||||
@click="createtDataset(scope.row)"
|
||||
class="text-btn mar3 mar6"
|
||||
type="text"
|
||||
>{{ $t("datasource.create_dataset") }}</el-button
|
||||
>{{ $t('datasource.create_dataset') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="selectDataset(scope.row)"
|
||||
class="text-btn"
|
||||
type="text"
|
||||
>{{ $t("dataset.detail") }}</el-button
|
||||
>{{ $t('dataset.detail') }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -68,7 +68,7 @@
|
||||
<el-row style="margin-top: 12px" :gutter="24">
|
||||
<el-col :span="12">
|
||||
<p class="table-name">
|
||||
{{ $t("datasource.table_name") }}
|
||||
{{ $t('datasource.table_name') }}
|
||||
</p>
|
||||
<p class="table-value">
|
||||
{{ dsTableDetail.name }}
|
||||
@ -76,104 +76,98 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p class="table-name">
|
||||
{{ $t("datasource.table_description") }}
|
||||
{{ $t('datasource.table_description') }}
|
||||
</p>
|
||||
<p class="table-value">
|
||||
{{ dsTableDetail.remark || "-" }}
|
||||
{{ dsTableDetail.remark || '-' }}
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
:data="dsTableData"
|
||||
stripe
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
:label="$t('panel.column_name')">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('dataset.field_type')">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('datasource.field_description')">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table :data="dsTableData" stripe style="width: 100%">
|
||||
<el-table-column prop="date" :label="$t('panel.column_name')">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" :label="$t('dataset.field_type')">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
:label="$t('datasource.field_description')"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import keyEnter from "@/components/msgCfm/keyEnter.js";
|
||||
import GridTable from "@/components/gridTable/index.vue";
|
||||
import { dsTable } from "@/api/dataset/dataset";
|
||||
import keyEnter from '@/components/msgCfm/keyEnter.js'
|
||||
import GridTable from '@/components/gridTable/index.vue'
|
||||
import { dsTable } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
mixins: [keyEnter],
|
||||
components: { GridTable },
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userDrawer: false,
|
||||
dsTableDetail: {},
|
||||
nikeName: "",
|
||||
nikeName: '',
|
||||
loading: false,
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
total: 0
|
||||
},
|
||||
dsTableData: [{date: 1}],
|
||||
tableData: [{ name: 1 }],
|
||||
};
|
||||
dsTableData: [],
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.initSearch();
|
||||
this.initSearch()
|
||||
},
|
||||
methods: {
|
||||
createtDataset(row) {},
|
||||
selectDataset(row) {
|
||||
this.dsTableDetail = row;
|
||||
this.userDrawer = true;
|
||||
this.dsTableDetail = row
|
||||
this.userDrawer = true
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.paginationConfig.currentPage = 1;
|
||||
this.paginationConfig.pageSize = pageSize;
|
||||
this.search();
|
||||
this.paginationConfig.currentPage = 1
|
||||
this.paginationConfig.pageSize = pageSize
|
||||
this.search()
|
||||
},
|
||||
handleCurrentChange(currentPage) {
|
||||
this.paginationConfig.currentPage = currentPage;
|
||||
this.search();
|
||||
this.paginationConfig.currentPage = currentPage
|
||||
this.search()
|
||||
},
|
||||
initSearch() {
|
||||
this.handleCurrentChange(1);
|
||||
this.handleCurrentChange(1)
|
||||
},
|
||||
search() {
|
||||
this.loading = true;
|
||||
this.loading = true
|
||||
const param = {
|
||||
conditions: [],
|
||||
};
|
||||
conditions: []
|
||||
}
|
||||
if (this.nikeName) {
|
||||
param.conditions.push({
|
||||
field: `dataset_table_task.name`,
|
||||
operator: "like",
|
||||
value: this.nikeName,
|
||||
});
|
||||
operator: 'like',
|
||||
value: this.nikeName
|
||||
})
|
||||
}
|
||||
const { currentPage, pageSize } = this.paginationConfig;
|
||||
const { currentPage, pageSize } = this.paginationConfig
|
||||
dsTable(currentPage, pageSize, this.params.id).then((response) => {
|
||||
this.tableData = response.data.listObject;
|
||||
this.paginationConfig.total = response.data.itemCount;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
this.tableData = response.data.listObject
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -3,11 +3,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user