diff --git a/frontend/src/icons/svg/data-reference.svg b/frontend/src/icons/svg/data-reference.svg new file mode 100644 index 0000000000..b294b7c599 --- /dev/null +++ b/frontend/src/icons/svg/data-reference.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/icons/svg/reference-field.svg b/frontend/src/icons/svg/reference-field.svg new file mode 100644 index 0000000000..b311d14227 --- /dev/null +++ b/frontend/src/icons/svg/reference-field.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/icons/svg/reference-play.svg b/frontend/src/icons/svg/reference-play.svg new file mode 100644 index 0000000000..5a706247bd --- /dev/null +++ b/frontend/src/icons/svg/reference-play.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/frontend/src/icons/svg/reference-setting.svg b/frontend/src/icons/svg/reference-setting.svg new file mode 100644 index 0000000000..74107b66d3 --- /dev/null +++ b/frontend/src/icons/svg/reference-setting.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/icons/svg/reference-table.svg b/frontend/src/icons/svg/reference-table.svg new file mode 100644 index 0000000000..96a9732884 --- /dev/null +++ b/frontend/src/icons/svg/reference-table.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index cd9db96d02..5b20d6a67e 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -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', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 078c88b4b6..2eaf817e61 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -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: '編輯標題', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index cfe0b029cf..232d039588 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -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: '编辑标题', diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue index 59687b635c..6573acc53d 100644 --- a/frontend/src/views/dataset/add/AddApi.vue +++ b/frontend/src/views/dataset/add/AddApi.vue @@ -380,6 +380,7 @@ export default { display: flex; height: 100%; position: relative; + width: 100%; .arrow-right { position: absolute; diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue index e89180b5dd..a28198e1d8 100644 --- a/frontend/src/views/dataset/add/AddDB.vue +++ b/frontend/src/views/dataset/add/AddDB.vue @@ -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; diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue index 81268ae966..d3c7147383 100644 --- a/frontend/src/views/dataset/add/AddExcel.vue +++ b/frontend/src/views/dataset/add/AddExcel.vue @@ -58,7 +58,14 @@ highlight-current @node-click="handleNodeClick" @check-change="handleCheckChange" - /> + > + + {{ data.excelLable }} + + + + +
@@ -76,7 +83,15 @@ v-model="sheetObj.datasetName" :placeholder="$t('commons.name')" @change="changeDatasetName" + size="small" /> +
+ {{ $t('deDataset.already_exists') }} +
@@ -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; diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue index 27e3e31c35..ff1a4db8c1 100644 --- a/frontend/src/views/dataset/add/AddSQL.vue +++ b/frontend/src/views/dataset/add/AddSQL.vue @@ -9,7 +9,7 @@ {{ $t('dataset.confirm') }} --> -
+
- {{ $t('sql_variable.variable_mgm') }} + + {{ $t('deDataset.data_reference') }} + + {{ $t('sql_variable.variable_mgm') }} + + + + {{ $t('deDataset.run_a_query') }} -
- -
-
-
- {{ $t('deDataset.running_results') }} - {{ - `(${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')})` - }} - - -
-
- - - - -
- -
- {{ $t('dataset.sql_variable_limit_1') - }}
- {{ $t('dataset.sql_variable_limit_2') }}
+
+
+
+

+ {{ $t('chart.back') }} + {{ $t('deDataset.data_reference') }} + +

+

+ + + {{ (showTable && dataTable) || selectedDatasource.name }} + + + + {{ (showTable && fieldData.length) || tableData.length }} + +

- - - - - - - - + + - + - - -
- {{ - $t('dataset.cancel') - }} - {{ - $t('dataset.confirm') - }} + + + + + + + + +
+ {{ + $t('dataset.cancel') + }} + {{ + $t('dataset.confirm') + }} +
+
- +
@@ -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); + } } } } diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue index ba42bf5b8e..f97e268a30 100644 --- a/frontend/src/views/dataset/add/AddUnion.vue +++ b/frontend/src/views/dataset/add/AddUnion.vue @@ -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) { diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue index 4a1b739927..f436fc42fd 100644 --- a/frontend/src/views/dataset/data/FieldEdit.vue +++ b/frontend/src/views/dataset/data/FieldEdit.vue @@ -326,7 +326,7 @@ style="margin-left: -4px" :disabled="!hasDataPermission('manage', param.privileges)" @click="dqTrans(scope.row, 'd')" - >{{ $t('convert_to_indicator') }}{{ $t('deDataset.convert_to_indicator') }}