feat: 数据集 数据源优化
* feat: 数据集 数据源优化 * feat: 国际化 * feat: 格式化 * feat: 国际化修正 合并代码
This commit is contained in:
dataeaseShu
GitHub
parent
44720e4e33
commit
59a605c0c9
@ -241,4 +241,11 @@ export function exportExcel(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function dsTable(page, size, id) {
|
||||
return request({
|
||||
url: '/datasource/getTables/' + id + '/' + page + '/' + size,
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
export default { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, checkCustomDs }
|
||||
|
||||
@ -34,3 +34,13 @@ export function save(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function dbPreview(data) {
|
||||
return request({
|
||||
url: '/dataset/table/dbPreview',
|
||||
method: 'post',
|
||||
loading: true,
|
||||
data
|
||||
})
|
||||
}
|
||||
BIN
frontend/src/assets/FileType.png
Normal file
BIN
frontend/src/assets/FileType.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 622 B |
BIN
frontend/src/assets/None_Select_ds.png
Normal file
BIN
frontend/src/assets/None_Select_ds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
frontend/src/assets/error.png
Normal file
BIN
frontend/src/assets/error.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -24,7 +24,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { log } from "@antv/g2plot/lib/utils";
|
||||
export default {
|
||||
name: "DePwd",
|
||||
inject: {
|
||||
|
||||
55
frontend/src/components/deCustomCm/deTextarea.vue
Normal file
55
frontend/src/components/deCustomCm/deTextarea.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-input
|
||||
v-count="value"
|
||||
:placeholder="$t('fu.search_bar.please_input')"
|
||||
show-word-limit
|
||||
:disabled="disabled"
|
||||
:value="value"
|
||||
@input="handleChange"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "DeTextarea",
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: String,
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
},
|
||||
directives: {
|
||||
count: {
|
||||
update: function (el, binding) {
|
||||
const lg = binding.value?.length || 0;
|
||||
const count = el.querySelector(".el-input__count");
|
||||
if (!lg) {
|
||||
if (count.classList.contains("no-zore")) {
|
||||
count.classList.remove("no-zore");
|
||||
}
|
||||
count.innerHTML = "0/200";
|
||||
return;
|
||||
}
|
||||
if (el.querySelector(".no-zore")) {
|
||||
count.firstChild.innerHTML = lg;
|
||||
return;
|
||||
}
|
||||
const newCount = document.createElement("span");
|
||||
const num = document.createElement("span");
|
||||
const total = document.createElement("span");
|
||||
num.style.color = "#1F2329";
|
||||
total.innerHTML = "/200";
|
||||
num.innerHTML = lg;
|
||||
newCount.classList.add("el-input__count", "no-zore");
|
||||
newCount.appendChild(num);
|
||||
newCount.appendChild(total);
|
||||
el.replaceChild(newCount, count);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
3
frontend/src/icons/svg/db-de.svg
Normal file
3
frontend/src/icons/svg/db-de.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.5C7.07786 1.5 5.30656 1.7586 3.98986 2.1975C3.33543 2.41564 2.75172 2.69192 2.31622 3.03514C1.88917 3.37169 1.5 3.86104 1.5 4.5V13.5C1.5 14.139 1.88917 14.6283 2.31622 14.9649C2.75172 15.3081 3.33543 15.5844 3.98986 15.8025C5.30656 16.2414 7.07786 16.5 9 16.5C10.9221 16.5 12.6934 16.2414 14.0101 15.8025C14.6646 15.5844 15.2483 15.3081 15.6838 14.9649C16.1108 14.6283 16.5 14.139 16.5 13.5V4.5C16.5 3.86104 16.1108 3.37169 15.6838 3.03514C15.2483 2.69192 14.6646 2.41564 14.0101 2.1975C12.6934 1.7586 10.9221 1.5 9 1.5ZM15 6.39495C14.6991 6.54883 14.365 6.68421 14.0101 6.8025C12.6934 7.2414 10.9221 7.5 9 7.5C7.07786 7.5 5.30656 7.2414 3.98986 6.8025C3.63499 6.68421 3.30092 6.54883 3 6.39495V9C3 9.00091 3.00012 9.00435 3.00229 9.01147C3.00484 9.01983 3.01112 9.03634 3.02631 9.06107C3.05814 9.11293 3.12306 9.1909 3.24468 9.28674C3.49231 9.4819 3.89712 9.69045 4.4642 9.87948C5.59052 10.2549 7.19422 10.5 9 10.5C10.8058 10.5 12.4095 10.2549 13.5358 9.87948C14.1029 9.69045 14.5077 9.4819 14.7553 9.28674C14.8769 9.1909 14.9419 9.11293 14.9737 9.06107C14.9889 9.03634 14.9952 9.01983 14.9977 9.01147C14.9999 9.00429 15 9.00105 15 9.00017C15 9.0002 15 9.00012 15 9.00017V6.39495ZM15 10.8949C14.6991 11.0488 14.365 11.1842 14.0101 11.3025C12.6934 11.7414 10.9221 12 9 12C7.07786 12 5.30656 11.7414 3.98986 11.3025C3.63499 11.1842 3.30092 11.0488 3 10.8949V13.5C3 13.5007 2.99999 13.5039 3.00229 13.5115C3.00484 13.5198 3.01112 13.5363 3.02631 13.5611C3.05814 13.6129 3.12306 13.6909 3.24468 13.7867C3.49231 13.9819 3.89712 14.1905 4.4642 14.3795C5.59052 14.7549 7.19422 15 9 15C10.8058 15 12.4095 14.7549 13.5358 14.3795C14.1029 14.1905 14.5077 13.9819 14.7553 13.7867C14.8769 13.6909 14.9419 13.6129 14.9737 13.5611C14.9889 13.5363 14.9952 13.5198 14.9977 13.5115C15 13.5039 15 13.5007 15 13.5V10.8949Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
6
frontend/src/icons/svg/de-api-new.svg
Normal file
6
frontend/src/icons/svg/de-api-new.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.49673 12.566H8.5468L6.78125 17.15H7.80078L8.20278 16.046H9.83475L10.2367 17.15H11.2623L9.49673 12.566ZM9.52727 15.206H8.51088L9.02122 13.8208L9.52727 15.206Z" fill="#1F2329"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7387 12.566H11.8127V17.15H12.7667V15.482H13.7267C14.2576 15.482 14.6843 15.3692 14.9797 15.1177C15.2797 14.8623 15.4187 14.4861 15.4187 14.018C15.4187 13.553 15.2813 13.1797 14.9834 12.9264C14.6901 12.6772 14.2663 12.566 13.7387 12.566ZM14.4647 14.018C14.4647 14.2521 14.3967 14.3948 14.2979 14.4778C14.187 14.5658 13.9945 14.624 13.6847 14.624H12.7667V13.424H13.6847C13.9892 13.424 14.182 13.4826 14.2929 13.5713L14.2991 13.5757C14.3952 13.6449 14.4647 13.7806 14.4647 14.018Z" fill="#1F2329"/>
|
||||
<path d="M16.2388 12.566H17.1868V17.15H16.2388V12.566Z" fill="#1F2329"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C8.37742 2 5.39755 4.75178 5.03667 8.27907C2.12636 9.12781 0 11.8156 0 15C0 18.866 3.13401 22 7 22H17C20.866 22 24 18.866 24 15C24 11.8156 21.8736 9.12782 18.9633 8.27908C18.6025 4.75179 15.6226 2 12 2ZM12 4C9.23858 4 7 6.23858 7 9V10C4.23858 10 2 12.2386 2 15C2 17.7614 4.23858 20 7 20H17C19.7614 20 22 17.7614 22 15C22 12.2386 19.7614 10 17 10V9C17 6.23858 14.7614 4 12 4Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
frontend/src/icons/svg/de-copy.svg
Normal file
3
frontend/src/icons/svg/de-copy.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 d="M3.33333 5.33301V13.333H10V5.33301H3.33333ZM11.3333 4.66634V14.0737C11.3333 14.401 11.0548 14.6663 10.7111 14.6663H2.62222C2.27858 14.6663 2 14.401 2 14.0737V4.59227C2 4.26499 2.27858 3.99967 2.62222 3.99967H10.6667C11.0349 3.99967 11.3333 4.29815 11.3333 4.66634ZM13.8047 1.52827C13.9254 1.64891 14 1.81558 14 1.99967V10.333C14 10.5171 13.8508 10.6663 13.6667 10.6663H13C12.8159 10.6663 12.6667 10.5171 12.6667 10.333V2.66634H6.33333C6.14924 2.66634 6 2.5171 6 2.33301V1.66634C6 1.48225 6.14924 1.33301 6.33333 1.33301H13.3333C13.5174 1.33301 13.6841 1.40763 13.8047 1.52827Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 680 B |
3
frontend/src/icons/svg/de-db-new.svg
Normal file
3
frontend/src/icons/svg/de-db-new.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 13.5C16.5 14.139 16.1108 14.6283 15.6838 14.9649C15.2483 15.3081 14.6646 15.5844 14.0101 15.8025C12.6934 16.2414 10.9221 16.5 9 16.5C7.07786 16.5 5.30656 16.2414 3.98986 15.8025C3.33543 15.5844 2.75172 15.3081 2.31622 14.9649C1.88917 14.6283 1.5 14.139 1.5 13.5V4.5C1.5 3.86104 1.88917 3.37169 2.31622 3.03514C2.75172 2.69192 3.33543 2.41564 3.98986 2.1975C5.30656 1.7586 7.07786 1.5 9 1.5C10.9221 1.5 12.6934 1.7586 14.0101 2.1975C14.6646 2.41564 15.2483 2.69192 15.6838 3.03514C16.1108 3.37169 16.5 3.86104 16.5 4.5V13.5ZM3 4.49995C3 4.49928 2.99999 4.49609 3.00229 4.48853C3.00484 4.48017 3.01112 4.46366 3.02631 4.43893C3.05814 4.38707 3.12306 4.3091 3.24468 4.21326C3.49231 4.0181 3.89712 3.80955 4.4642 3.62052C5.59052 3.24508 7.19422 3 9 3C10.8058 3 12.4095 3.24508 13.5358 3.62052C14.1029 3.80955 14.5077 4.0181 14.7553 4.21326C14.8769 4.3091 14.9419 4.38707 14.9737 4.43893C14.9889 4.46366 14.9952 4.48017 14.9977 4.48853C15 4.49609 15 4.49928 15 4.49995C15 4.49998 15 4.49991 15 4.49995C15 4.50083 14.9999 4.50429 14.9977 4.51147C14.9952 4.51983 14.9889 4.53634 14.9737 4.56107C14.9419 4.61293 14.8769 4.6909 14.7553 4.78674C14.5077 4.9819 14.1029 5.19045 13.5358 5.37948C12.4095 5.75492 10.8058 6 9 6C7.19422 6 5.59052 5.75492 4.4642 5.37948C3.89712 5.19045 3.49231 4.9819 3.24468 4.78674C3.12306 4.6909 3.05814 4.61293 3.02631 4.56107C3.01112 4.53634 3.00484 4.51983 3.00229 4.51147C3.00012 4.50435 3 4.50086 3 4.49995ZM15 6.39495C14.6991 6.54883 14.365 6.68421 14.0101 6.8025C12.6934 7.2414 10.9221 7.5 9 7.5C7.07786 7.5 5.30656 7.2414 3.98986 6.8025C3.63499 6.68421 3.30092 6.54883 3 6.39495V9C3 9.00091 3.00012 9.00435 3.00229 9.01147C3.00484 9.01983 3.01112 9.03634 3.02631 9.06107C3.05814 9.11293 3.12306 9.1909 3.24468 9.28674C3.49231 9.4819 3.89712 9.69045 4.4642 9.87948C5.59052 10.2549 7.19422 10.5 9 10.5C10.8058 10.5 12.4095 10.2549 13.5358 9.87948C14.1029 9.69045 14.5077 9.4819 14.7553 9.28674C14.8769 9.1909 14.9419 9.11293 14.9737 9.06107C14.9889 9.03634 14.9952 9.01983 14.9977 9.01147C14.9999 9.00429 15 9.00104 15 9.00017C15 9.00012 15 9.0002 15 9.00017V6.39495ZM15 10.8949C14.6991 11.0488 14.365 11.1842 14.0101 11.3025C12.6934 11.7414 10.9221 12 9 12C7.07786 12 5.30656 11.7414 3.98986 11.3025C3.63499 11.1842 3.30092 11.0488 3 10.8949V13.5C3 13.5007 2.99999 13.5039 3.00229 13.5115C3.00484 13.5198 3.01112 13.5363 3.02631 13.5611C3.05814 13.6129 3.12306 13.6909 3.24468 13.7867C3.49231 13.9819 3.89712 14.1905 4.4642 14.3795C5.59052 14.7549 7.19422 15 9 15C10.8058 15 12.4095 14.7549 13.5358 14.3795C14.1029 14.1905 14.5077 13.9819 14.7553 13.7867C14.8769 13.6909 14.9419 13.6129 14.9737 13.5611C14.9889 13.5363 14.9952 13.5198 14.9977 13.5115C15 13.5039 15 13.5007 15 13.5V10.8949Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
3
frontend/src/icons/svg/de-delete.svg
Normal file
3
frontend/src/icons/svg/de-delete.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 d="M5.33337 2.66634V1.99967C5.33337 1.63148 5.63185 1.33301 6.00004 1.33301H10C10.3682 1.33301 10.6667 1.63148 10.6667 1.99967V2.66634H14.2394C14.388 2.66634 14.4419 2.68181 14.4962 2.71086C14.5505 2.73991 14.5931 2.78255 14.6222 2.83687C14.6512 2.89119 14.6667 2.94507 14.6667 3.09366V3.57236C14.6667 3.72095 14.6512 3.77483 14.6222 3.82915C14.5931 3.88347 14.5505 3.9261 14.4962 3.95515C14.4419 3.9842 14.388 3.99967 14.2394 3.99967H13.3334V13.9997C13.3334 14.3679 13.0349 14.6663 12.6667 14.6663H3.33337C2.96518 14.6663 2.66671 14.3679 2.66671 13.9997V3.99967H1.76069C1.6121 3.99967 1.55822 3.9842 1.5039 3.95515C1.44958 3.9261 1.40695 3.88347 1.3779 3.82915C1.34884 3.77483 1.33337 3.72095 1.33337 3.57236V3.09366C1.33337 2.94507 1.34884 2.89119 1.3779 2.83687C1.40695 2.78255 1.44958 2.73991 1.5039 2.71086C1.55822 2.68181 1.6121 2.66634 1.76069 2.66634H5.33337ZM4.00004 3.99967V13.333H12V3.99967H4.00004ZM6.33337 5.99967H7.00004C7.18414 5.99967 7.33337 6.14891 7.33337 6.33301V10.9997C7.33337 11.1838 7.18414 11.333 7.00004 11.333H6.33337C6.14928 11.333 6.00004 11.1838 6.00004 10.9997V6.33301C6.00004 6.14891 6.14928 5.99967 6.33337 5.99967ZM9.00004 5.99967H9.66671C9.8508 5.99967 10 6.14891 10 6.33301V10.9997C10 11.1838 9.8508 11.333 9.66671 11.333H9.00004C8.81595 11.333 8.66671 11.1838 8.66671 10.9997V6.33301C8.66671 6.14891 8.81595 5.99967 9.00004 5.99967Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
frontend/src/icons/svg/de-excel-new.svg
Normal file
3
frontend/src/icons/svg/de-excel-new.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.59281 0.75H13.2551C13.4256 0.75 13.5891 0.817729 13.7096 0.938288L15.9045 3.13314C16.025 3.2537 16.0928 3.41721 16.0928 3.58771V16.6072C16.0928 16.9622 15.805 17.25 15.4499 17.25H2.59281C2.23776 17.25 1.94995 16.9622 1.94995 16.6072V1.39286C1.94995 1.03782 2.23776 0.75 2.59281 0.75ZM3.49278 15.7073H14.5499V4.60714H12.4607C12.3364 4.60714 12.2357 4.50641 12.2357 4.38215V2.29296H3.49278V15.7073ZM12.9381 6.24172C13.0143 6.14312 12.944 6 12.8194 6H11.3236C11.2771 6 11.2333 6.02152 11.2049 6.05828L8.88122 8.75813L9.93744 10.125L12.9381 6.24172ZM8.88122 8.75813L8.88332 8.76083L9.93744 10.125L8.88332 11.4892L8.88122 11.4918L6.79494 14.1917C6.76654 14.2285 6.7227 14.25 6.67625 14.25H5.18038C5.05578 14.25 4.9855 14.1069 5.06169 14.0083L7.99157 10.2167C8.03327 10.1627 8.03327 10.0873 7.99157 10.0333L5.06172 6.24172C4.98553 6.14312 5.05581 6 5.18041 6H6.67626C6.72271 6 6.76655 6.02152 6.79495 6.05828L8.88122 8.75813ZM11.2049 14.1917L8.88122 11.4918L9.93744 10.125L12.9381 14.0083C13.0143 14.1069 12.944 14.25 12.8195 14.25H11.3236C11.2771 14.25 11.2333 14.2285 11.2049 14.1917Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
6
frontend/src/icons/svg/de-sql-new.svg
Normal file
6
frontend/src/icons/svg/de-sql-new.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.21318 11.7122H4.45313L4.4668 11.9124C4.48915 12.2398 4.64051 12.5153 4.89014 12.7055C5.13666 12.8933 5.46792 12.9902 5.84478 12.9902C6.23004 12.9902 6.56838 12.8907 6.81441 12.6917C7.06466 12.4893 7.20342 12.1962 7.20342 11.8491C7.20342 11.584 7.12388 11.3529 6.93138 11.1707C6.74715 10.9964 6.47735 10.8845 6.13314 10.809L5.78149 10.7321C5.57894 10.6879 5.46467 10.6307 5.40295 10.5757C5.3497 10.5282 5.32696 10.4752 5.32696 10.3989C5.32696 10.3047 5.36831 10.2302 5.44967 10.1729C5.53606 10.1119 5.67056 10.0701 5.84039 10.0701C6.01573 10.0701 6.14422 10.1152 6.22867 10.1807C6.31044 10.2441 6.36403 10.3362 6.37674 10.4618L6.39382 10.6304H7.15252L7.14619 10.4368C7.12447 9.77132 6.55718 9.33911 5.85137 9.33911C5.48931 9.33911 5.16604 9.4402 4.92907 9.62872C4.68928 9.81948 4.54546 10.0949 4.54546 10.4165C4.54546 10.6839 4.62894 10.9195 4.81821 11.1056C5.00153 11.2858 5.26764 11.4034 5.6027 11.4764L5.95402 11.5533C6.15976 11.5985 6.27693 11.6572 6.34096 11.715C6.39663 11.7653 6.42193 11.8232 6.42193 11.9084C6.42193 11.9954 6.38051 12.0769 6.28953 12.1428C6.19597 12.2107 6.05107 12.2593 5.86675 12.2593C5.45897 12.2593 5.26332 12.0822 5.23517 11.8745L5.21318 11.7122Z" fill="#1F2329"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8414 11.1658C10.8414 11.7443 10.6663 12.232 10.3312 12.5595L10.8658 13.2957H9.95861L9.68874 12.9251C9.5336 12.969 9.36786 12.9902 9.19268 12.9902C8.69703 12.9902 8.27821 12.8148 7.98519 12.4865C7.69434 12.1606 7.544 11.7028 7.544 11.1658C7.544 10.6287 7.69433 10.1705 7.98507 9.8441C8.278 9.51523 8.69683 9.33911 9.19268 9.33911C9.68854 9.33911 10.1074 9.51523 10.4003 9.8441C10.691 10.1705 10.8414 10.6287 10.8414 11.1658ZM8.76559 11.655L9.19776 12.2505L9.19268 12.2505C8.92003 12.2505 8.71099 12.1491 8.56667 11.9748C8.41912 11.7966 8.32549 11.525 8.32549 11.1658C8.32549 10.8053 8.41918 10.5331 8.56675 10.3547C8.71105 10.1803 8.92005 10.0789 9.19268 10.0789C9.46531 10.0789 9.67431 10.1803 9.81861 10.3547C9.96618 10.5331 10.0599 10.8053 10.0599 11.1658C10.0599 11.4879 9.98492 11.7392 9.86334 11.916L9.67231 11.655H8.76559Z" fill="#1F2329"/>
|
||||
<path d="M13.6334 12.9375V12.2065H12.1041V9.39185H11.3336V12.9375H13.6334Z" fill="#1F2329"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59256 0.75H13.2548C13.4254 0.75 13.5889 0.817729 13.7094 0.938288L15.9043 3.13314C16.0248 3.2537 16.0925 3.41721 16.0925 3.58771V16.6072C16.0925 16.9622 15.8048 17.25 15.4497 17.25H2.59256C2.23752 17.25 1.94971 16.9622 1.94971 16.6072V1.39286C1.94971 1.03782 2.23752 0.75 2.59256 0.75ZM3.49253 15.7073H14.5497V4.60714H12.4604C12.3362 4.60714 12.2354 4.50641 12.2354 4.38215V2.29296H3.49253V15.7073Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
3
frontend/src/icons/svg/de-union-new.svg
Normal file
3
frontend/src/icons/svg/de-union-new.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.69976 6.5C9.86544 6.5 9.99975 6.63431 9.99975 6.8V7.7C9.99975 7.86568 9.86544 8 9.69976 8H7.74975C7.62703 8 7.52495 8.08844 7.50378 8.20506L7.49976 8.25V14.25C7.49976 14.3727 7.58819 14.4748 7.70482 14.496L7.74975 14.5H15.7498C15.8725 14.5 15.9746 14.4116 15.9957 14.2949L15.9998 14.25V8.25C15.9998 8.12727 15.9113 8.0252 15.7947 8.00403L15.7498 8H13.7998C13.6341 8 13.4998 7.86568 13.4998 7.7V6.8C13.4998 6.63431 13.6341 6.5 13.7998 6.5H15.7498C16.684 6.5 17.4473 7.23214 17.4972 8.15398L17.4998 8.25V14.25C17.4998 15.1843 16.7676 15.9476 15.8458 15.9974L15.7498 16H7.74975C6.81547 16 6.05219 15.2679 6.00234 14.346L5.99976 14.25V8.25C5.99976 7.31572 6.73189 6.55244 7.65374 6.50259L7.74975 6.5H9.69976ZM10.7498 2C11.684 2 12.4473 2.73214 12.4972 3.65398L12.4998 3.75V9.75C12.4998 10.6843 11.7676 11.4476 10.8458 11.4974L10.7498 11.5H8.79976C8.63407 11.5 8.49975 11.3657 8.49975 11.2V10.3C8.49975 10.1343 8.63407 10 8.79976 10H10.7498C10.8725 10 10.9746 9.91156 10.9957 9.79494L10.9998 9.75V3.75C10.9998 3.62727 10.9113 3.5252 10.7947 3.50403L10.7498 3.5H2.74976C2.62703 3.5 2.52495 3.58844 2.50378 3.70506L2.49976 3.75V9.75C2.49976 9.87273 2.58819 9.9748 2.70482 9.99597L2.74976 10H4.69976C4.86544 10 4.99976 10.1343 4.99976 10.3V11.2C4.99976 11.3657 4.86544 11.5 4.69976 11.5H2.74976C1.81547 11.5 1.05219 10.7679 1.00235 9.84602L0.999756 9.75V3.75C0.999756 2.81572 1.73189 2.05244 2.65374 2.00259L2.74976 2H10.7498Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
5
frontend/src/icons/svg/driver-de.svg
Normal file
5
frontend/src/icons/svg/driver-de.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.4502 12.4309C11.4502 12.2756 11.5761 12.1497 11.7314 12.1497H12.9189C13.0742 12.1497 13.2001 12.2756 13.2001 12.4309V13.6184C13.2001 13.7737 13.0742 13.8996 12.9189 13.8996H11.7314C11.5761 13.8996 11.4502 13.7737 11.4502 13.6184V12.4309Z"/>
|
||||
<path d="M13.3492 2H4.65099C4.32791 2 4.04681 2.22111 3.97071 2.5351L2.0197 10.5848C2.00661 10.6388 2 10.6942 2 10.7497C2 10.7584 2.00016 10.767 2.00047 10.7757V15.2996C2.00047 15.6861 2.31386 15.9995 2.70045 15.9995H15.3C15.6866 15.9995 16 15.6861 16 15.2996V10.7497C16 10.6645 15.9848 10.5828 15.9569 10.5073L14.0295 2.53548C13.9536 2.22131 13.6724 2 13.3492 2ZM14.2926 10.0258H3.70332L5.28122 3.4697H12.7186L14.2926 10.0258Z"/>
|
||||
<path d="M11.4502 12.4309C11.4502 12.2756 11.5761 12.1497 11.7314 12.1497H12.9189C13.0742 12.1497 13.2001 12.2756 13.2001 12.4309V13.6184C13.2001 13.7737 13.0742 13.8996 12.9189 13.8996H11.7314C11.5761 13.8996 11.4502 13.7737 11.4502 13.6184V12.4309Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
6
frontend/src/icons/svg/icon_add-entry_outlined.svg
Normal file
6
frontend/src/icons/svg/icon_add-entry_outlined.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 14.6189C2 15.0136 2.31818 15.3336 2.71068 15.3336H7.99679V13.9935H3.33253V2.00032L12.6602 2.00032V8.66699H13.9928V1.37491C13.9928 0.980162 13.6746 0.660156 13.2821 0.660156H2.71068C2.31818 0.660156 2 0.980162 2 1.37491V14.6189Z" fill="#1F2329"/>
|
||||
<path d="M4.67068 7.51235C4.67068 7.41366 4.75023 7.33366 4.84835 7.33366H11.1557C11.2538 7.33366 11.3333 7.41366 11.3333 7.51235V8.49513C11.3333 8.59382 11.2538 8.67382 11.1557 8.67382H4.84835C4.75023 8.67382 4.67068 8.59382 4.67068 8.49513V7.51235Z" fill="#1F2329"/>
|
||||
<path d="M4.84996 4.66698C4.75183 4.66698 4.67229 4.74698 4.67229 4.84567V5.82845C4.67229 5.92714 4.75183 6.00714 4.84996 6.00714H7.82233C7.92045 6.00714 8 5.92714 8 5.82845V4.84567C8 4.74698 7.92045 4.66698 7.82233 4.66698H4.84996Z" fill="#1F2329"/>
|
||||
<path d="M11.3333 10.3337C11.3333 10.1496 11.4826 10.0003 11.6667 10.0003H12.3333C12.5174 10.0003 12.6667 10.1496 12.6667 10.3337V12.0003H14.3333C14.5174 12.0003 14.6667 12.1496 14.6667 12.3337V13.0003C14.6667 13.1844 14.5174 13.3337 14.3333 13.3337H12.6667V15.0003C12.6667 15.1844 12.5174 15.3337 12.3333 15.3337H11.6667C11.4826 15.3337 11.3333 15.1844 11.3333 15.0003V13.3337H9.66667C9.48257 13.3337 9.33333 13.1844 9.33333 13.0003V12.3337C9.33333 12.1496 9.48257 12.0003 9.66667 12.0003H11.3333V10.3337Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
7
frontend/src/icons/svg/icon_doc-replace_outlined.svg
Normal file
7
frontend/src/icons/svg/icon_doc-replace_outlined.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.33325 14.0174C1.33325 14.4122 1.65143 14.7322 2.04393 14.7322H6.66337V13.392H2.66578V2.67414L11.9935 2.67414V7.36471H13.326V2.04874C13.326 1.65399 13.0078 1.33398 12.6153 1.33398H2.04393C1.65143 1.33398 1.33325 1.65399 1.33325 2.04874V14.0174Z" fill="#1F2329"/>
|
||||
<path d="M3.99831 4.85966C3.99831 4.76097 4.07786 4.68097 4.17598 4.68097H10.4833C10.5814 4.68097 10.661 4.76097 10.661 4.85966V5.84244C10.661 5.94113 10.5814 6.02113 10.4833 6.02113H4.17598C4.07786 6.02113 3.99831 5.94113 3.99831 5.84244V4.85966Z" fill="#1F2329"/>
|
||||
<path d="M4.17598 7.36471C4.07786 7.36471 3.99831 7.44471 3.99831 7.54339V8.52618C3.99831 8.62487 4.07786 8.70487 4.17598 8.70487H6.88546C6.98359 8.70487 7.06313 8.62487 7.06313 8.52618V7.54339C7.06313 7.44471 6.98359 7.36471 6.88546 7.36471H4.17598Z" fill="#1F2329"/>
|
||||
<path d="M13.9301 11.3328L8.46535 11.3328C8.28125 11.3328 8.13201 11.1836 8.13201 10.9995V10.3328C8.13201 10.1487 8.28125 9.99951 8.46535 9.99951H11.4654V9.0813C11.4654 8.79271 11.8072 8.64048 12.0217 8.83354L14.1531 10.7517C14.3802 10.9561 14.2356 11.3328 13.9301 11.3328Z" fill="#1F2329"/>
|
||||
<path d="M10.7986 13.9995V14.9177C10.7986 15.2063 10.4568 15.3585 10.2423 15.1655L8.11093 13.2473C7.88386 13.0429 8.02843 12.6662 8.33392 12.6662L13.7986 12.6662C13.9827 12.6662 14.132 12.8154 14.132 12.9995V13.6662C14.132 13.8503 13.9827 13.9995 13.7986 13.9995H10.7986Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -1 +1,5 @@
|
||||
<svg t="1637222099589" class="icon" viewBox="0 0 1509 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7937" width="200" height="200"><path d="M1011.443368 0.003996a482.94738 482.94738 0 0 0-256.075854 72.242288 3.07414 3.07414 0 0 0-1.53707 0h-1.844484A483.869622 483.869622 0 0 0 496.832348 0.003996 504.773773 504.773773 0 0 0 0.051338 511.848291a505.081187 505.081187 0 0 0 498.010666 512.151709 483.254794 483.254794 0 0 0 255.153612-73.471944 3.07414 3.07414 0 0 0 1.53707 0h0.614828a483.254794 483.254794 0 0 0 255.153612 72.549702A505.081187 505.081187 0 0 0 1509.454034 511.848291 505.081187 505.081187 0 0 0 1011.443368 0.003996z m-304.954679 916.401107a430.379587 430.379587 0 0 1-208.426685 53.490035 450.976325 450.976325 0 0 1-443.905803-458.046847A451.283739 451.283739 0 0 1 498.062004 53.801445a428.227689 428.227689 0 0 1 208.426685 53.797448 522.603784 522.603784 0 0 0 0 808.80621z m304.954679 53.490035a430.379587 430.379587 0 0 1-208.426685-53.490035 522.603784 522.603784 0 0 0 0-808.80621 428.227689 428.227689 0 0 1 208.426685-53.797448 451.283739 451.283739 0 0 1 443.905803 458.046846 450.976325 450.976325 0 0 1-443.905803 458.046847z" p-id="7938"></path></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 2.66732V9.33398H9.33301V2.66732H2.66634ZM1.99967 1.33398C1.63148 1.33398 1.33301 1.63246 1.33301 2.00065V10.0007C1.33301 10.3688 1.63148 10.6673 1.99967 10.6673H9.99967C10.3679 10.6673 10.6663 10.3688 10.6663 10.0007V2.00065C10.6663 1.63246 10.3679 1.33398 9.99967 1.33398H1.99967Z" fill="#3370FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66634 6.66732V13.334H13.333V6.66732H6.66634ZM5.99967 5.33398C5.63148 5.33398 5.33301 5.63246 5.33301 6.00065V14.0007C5.33301 14.3688 5.63148 14.6673 5.99967 14.6673H13.9997C14.3679 14.6673 14.6663 14.3688 14.6663 14.0007V6.00065C14.6663 5.63246 14.3679 5.33398 13.9997 5.33398H5.99967Z" fill="#3370FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99967 5.33398C10.3679 5.33398 10.6663 5.63246 10.6663 6.00065V10.0007C10.6663 10.3688 10.3679 10.6673 9.99967 10.6673H5.99967C5.63148 10.6673 5.33301 10.3688 5.33301 10.0007V6.00065C5.33301 5.63246 5.63148 5.33398 5.99967 5.33398H9.99967Z" fill="#3370FF" fill-opacity="0.6"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
3
frontend/src/icons/svg/join-join.svg
Normal file
3
frontend/src/icons/svg/join-join.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.778 7.22266C10.9621 7.22266 11.1113 7.37189 11.1113 7.55599V8.55599C11.1113 8.74008 10.9621 8.88932 10.778 8.88932H8.61133C8.47496 8.88932 8.36155 8.98759 8.33803 9.11717L8.33355 9.1671V15.8338C8.33355 15.9701 8.43181 16.0835 8.5614 16.1071L8.61133 16.1115H17.5002C17.6366 16.1115 17.75 16.0133 17.7735 15.8837L17.778 15.8338V9.1671C17.778 9.03073 17.6797 8.91732 17.5501 8.8938L17.5002 8.88932H15.3335C15.1495 8.88932 15.0002 8.74008 15.0002 8.55599V7.55599C15.0002 7.37189 15.1495 7.22266 15.3335 7.22266H17.5002C18.5383 7.22266 19.3864 8.03614 19.4418 9.06041L19.4447 9.1671V15.8338C19.4447 16.8719 18.6312 17.7199 17.6069 17.7753L17.5002 17.7782H8.61133C7.57324 17.7782 6.72515 16.9647 6.66976 15.9405L6.66688 15.8338V9.1671C6.66688 8.12901 7.48037 7.28092 8.50464 7.22553L8.61133 7.22266H10.778ZM11.9447 2.22266C12.9828 2.22266 13.8308 3.03614 13.8862 4.06041L13.8891 4.1671V10.8338C13.8891 11.8719 13.0756 12.7199 12.0513 12.7753L11.9447 12.7782H9.778C9.5939 12.7782 9.44466 12.629 9.44466 12.4449V11.4449C9.44466 11.2608 9.5939 11.1115 9.778 11.1115H11.9447C12.081 11.1115 12.1944 11.0133 12.218 10.8837L12.2224 10.8338V4.1671C12.2224 4.03073 12.1242 3.91732 11.9946 3.8938L11.9447 3.88932H3.05577C2.91941 3.88932 2.80599 3.98759 2.78247 4.11717L2.77799 4.1671V10.8338C2.77799 10.9701 2.87626 11.0836 3.00584 11.1071L3.05577 11.1115H5.22244C5.40653 11.1115 5.55577 11.2608 5.55577 11.4449V12.4449C5.55577 12.629 5.40653 12.7782 5.22244 12.7782H3.05577C2.01768 12.7782 1.16959 11.9647 1.11421 10.9405L1.11133 10.8338V4.1671C1.11133 3.12901 1.92482 2.28092 2.94909 2.22553L3.05577 2.22266H11.9447Z" fill="#646A73"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -1 +1,7 @@
|
||||
<svg t="1637222082620" class="icon" viewBox="0 0 1509 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7099" width="200" height="200"><path d="M29.563081 516.459501a478.33617 478.33617 0 0 0 470.958234 485.406692A478.33617 478.33617 0 0 0 970.557308 516.459501 478.33617 478.33617 0 0 0 500.521315 31.052809 478.028756 478.028756 0 0 0 29.563081 516.152087z" p-id="7100"></path><path d="M1011.443368 0.003996a482.94738 482.94738 0 0 0-256.075854 72.242288 3.07414 3.07414 0 0 0-1.53707 0h-1.844484A483.869622 483.869622 0 0 0 496.832348 0.003996 504.773773 504.773773 0 0 0 0.051338 511.848291a505.081187 505.081187 0 0 0 498.010666 512.151709 483.254794 483.254794 0 0 0 255.153612-73.471944 3.07414 3.07414 0 0 0 1.53707 0h0.614828a483.254794 483.254794 0 0 0 255.153612 72.549702A505.081187 505.081187 0 0 0 1509.454034 511.848291 505.081187 505.081187 0 0 0 1011.443368 0.003996z m-304.954679 916.401107a430.379587 430.379587 0 0 1-208.426685 53.490035 450.976325 450.976325 0 0 1-443.905803-458.046847A451.283739 451.283739 0 0 1 498.062004 53.801445a428.227689 428.227689 0 0 1 208.426685 53.797448 522.603784 522.603784 0 0 0 0 808.80621z m304.954679 53.490035a430.379587 430.379587 0 0 1-208.426685-53.490035 522.603784 522.603784 0 0 0 0-808.80621 428.227689 428.227689 0 0 1 208.426685-53.797448 451.283739 451.283739 0 0 1 443.905803 458.046846 450.976325 450.976325 0 0 1-443.905803 458.046847z" p-id="7101"></path></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.33301 2.00065C1.33301 1.63246 1.63148 1.33398 1.99967 1.33398H9.99967C10.3679 1.33398 10.6663 1.63246 10.6663 2.00065V10.0007C10.6663 10.3688 10.3679 10.6673 9.99967 10.6673H1.99967C1.63148 10.6673 1.33301 10.3688 1.33301 10.0007V2.00065Z" fill="#3370FF" fill-opacity="0.6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 2.66732V9.33398H9.33301V2.66732H2.66634ZM1.99967 1.33398C1.63148 1.33398 1.33301 1.63246 1.33301 2.00065V10.0007C1.33301 10.3688 1.63148 10.6673 1.99967 10.6673H9.99967C10.3679 10.6673 10.6663 10.3688 10.6663 10.0007V2.00065C10.6663 1.63246 10.3679 1.33398 9.99967 1.33398H1.99967Z" fill="#3370FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66634 6.66732V13.334H13.333V6.66732H6.66634ZM5.99967 5.33398C5.63148 5.33398 5.33301 5.63246 5.33301 6.00065V14.0007C5.33301 14.3688 5.63148 14.6673 5.99967 14.6673H13.9997C14.3679 14.6673 14.6663 14.3688 14.6663 14.0007V6.00065C14.6663 5.63246 14.3679 5.33398 13.9997 5.33398H5.99967Z" fill="#3370FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99967 5.33398C10.3679 5.33398 10.6663 5.63246 10.6663 6.00065V10.0007C10.6663 10.3688 10.3679 10.6673 9.99967 10.6673H5.99967C5.63148 10.6673 5.33301 10.3688 5.33301 10.0007V6.00065C5.33301 5.63246 5.63148 5.33398 5.99967 5.33398H9.99967Z" fill="#3370FF" fill-opacity="0.6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33301 6.66732H6.66634V9.33398H9.33301V6.66732ZM10.6663 6.00065C10.6663 5.63246 10.3679 5.33398 9.99967 5.33398H5.99967C5.63148 5.33398 5.33301 5.63246 5.33301 6.00065V10.0007C5.33301 10.3688 5.63148 10.6673 5.99967 10.6673H9.99967C10.3679 10.6673 10.6663 10.3688 10.6663 10.0007V6.00065Z" fill="#3370FF"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
@ -1 +1,7 @@
|
||||
<svg t="1637222010777" class="icon" viewBox="0 0 1509 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6222" width="200" height="200"><path d="M544.174102 511.848291a478.33617 478.33617 0 0 0 470.958234 485.406692 478.33617 478.33617 0 0 0 470.958234-485.406692A478.028756 478.028756 0 0 0 1015.132336 26.4416 478.33617 478.33617 0 0 0 544.174102 511.848291z" p-id="6223"></path><path d="M1011.443368 0.003996a482.94738 482.94738 0 0 0-256.075854 72.242288 3.07414 3.07414 0 0 0-1.53707 0h-1.844484A483.869622 483.869622 0 0 0 496.832348 0.003996 504.773773 504.773773 0 0 0 0.051338 511.848291a505.081187 505.081187 0 0 0 498.010666 512.151709 483.254794 483.254794 0 0 0 255.153612-73.471944 3.07414 3.07414 0 0 0 1.53707 0h0.614828a483.254794 483.254794 0 0 0 255.153612 72.549702A505.081187 505.081187 0 0 0 1509.454034 511.848291 505.081187 505.081187 0 0 0 1011.443368 0.003996z m-304.954679 916.401107a430.379587 430.379587 0 0 1-208.426685 53.490035 450.976325 450.976325 0 0 1-443.905803-458.046847A451.283739 451.283739 0 0 1 498.062004 53.801445a428.227689 428.227689 0 0 1 208.426685 53.797448 522.603784 522.603784 0 0 0 0 808.80621z m304.954679 53.490035a430.379587 430.379587 0 0 1-208.426685-53.490035 522.603784 522.603784 0 0 0 0-808.80621 428.227689 428.227689 0 0 1 208.426685-53.797448 451.283739 451.283739 0 0 1 443.905803 458.046846 450.976325 450.976325 0 0 1-443.905803 458.046847z" p-id="6224"></path></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66634 2.66732V9.33398H9.33301V2.66732H2.66634ZM1.99967 1.33398C1.63148 1.33398 1.33301 1.63246 1.33301 2.00065V10.0007C1.33301 10.3688 1.63148 10.6673 1.99967 10.6673H9.99967C10.3679 10.6673 10.6663 10.3688 10.6663 10.0007V2.00065C10.6663 1.63246 10.3679 1.33398 9.99967 1.33398H1.99967Z" fill="#3370FF"/>
|
||||
<path d="M5.33301 6.00065C5.33301 5.63246 5.63148 5.33398 5.99967 5.33398H13.9997C14.3679 5.33398 14.6663 5.63246 14.6663 6.00065V14.0007C14.6663 14.3688 14.3679 14.6673 13.9997 14.6673H5.99967C5.63148 14.6673 5.33301 14.3688 5.33301 14.0007V6.00065Z" fill="#3370FF" fill-opacity="0.6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66634 6.66732V13.334H13.333V6.66732H6.66634ZM5.99967 5.33398C5.63148 5.33398 5.33301 5.63246 5.33301 6.00065V14.0007C5.33301 14.3688 5.63148 14.6673 5.99967 14.6673H13.9997C14.3679 14.6673 14.6663 14.3688 14.6663 14.0007V6.00065C14.6663 5.63246 14.3679 5.33398 13.9997 5.33398H5.99967Z" fill="#3370FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99967 5.33398C10.3679 5.33398 10.6663 5.63246 10.6663 6.00065V10.0007C10.6663 10.3688 10.3679 10.6673 9.99967 10.6673H5.99967C5.63148 10.6673 5.33301 10.3688 5.33301 10.0007V6.00065C5.33301 5.63246 5.63148 5.33398 5.99967 5.33398H9.99967Z" fill="#3370FF" fill-opacity="0.6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33301 6.66732H6.66634V9.33398H9.33301V6.66732ZM10.6663 6.00065C10.6663 5.63246 10.3679 5.33398 9.99967 5.33398H5.99967C5.63148 5.33398 5.33301 5.63246 5.33301 6.00065V10.0007C5.33301 10.3688 5.63148 10.6673 5.99967 10.6673H9.99967C10.3679 10.6673 10.6663 10.3688 10.6663 10.0007V6.00065Z" fill="#3370FF"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
@ -468,6 +468,59 @@ export default {
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm'
|
||||
},
|
||||
deDataset: {
|
||||
search_by_name: 'Search by name',
|
||||
new_folder: 'New Folder',
|
||||
search_fields: 'Search Fields',
|
||||
show_rows: 'Show Rows',
|
||||
display: 'Display',
|
||||
row: 'Row',
|
||||
restricted_objects: 'Restricted Objects',
|
||||
select_data_source: 'Select Data Source',
|
||||
by_table_name: 'Search by table name',
|
||||
run_a_query: 'Run a query',
|
||||
running_results: 'Running results',
|
||||
parameter_type: 'Parameter Type',
|
||||
run_failed: 'Run failed',
|
||||
select_data_table: 'Select Data Table',
|
||||
in_the_file: 'Merged cells cannot exist in the file',
|
||||
or_date_type: 'The first line of the file is the header line, which cannot be empty or date type',
|
||||
is_within_500m: 'Please ensure the size of Excel file is within 500M',
|
||||
upload_data: 'Upload data',
|
||||
excel_data_first: 'Please upload Excel data first',
|
||||
is_currently_available: 'No data table is currently available',
|
||||
sure_to_synchronize: 'Synchronizing fields may cause changes to the edited fields. Are you sure to synchronize?',
|
||||
folder_name: 'Folder Name',
|
||||
folder: 'Folder',
|
||||
edit_folder: 'Edit Folder',
|
||||
new_folder: 'New Folder',
|
||||
name_already_exists: 'Folder name already exists',
|
||||
data_preview: 'Data preview',
|
||||
original_name: 'Original Name',
|
||||
database: 'Database',
|
||||
selected: 'Selected:',
|
||||
table: 'Table',
|
||||
no_dataset_click: 'No dataset, click',
|
||||
create: 'Create',
|
||||
new_folder_first: 'Please create a new folder first',
|
||||
on_the_left: 'Please select a dataset on the left',
|
||||
expression_syntax_error: 'Field expression syntax error',
|
||||
create_dashboard: 'Create Dashboard',
|
||||
cannot_be_empty: 'SQL cannot be empty',
|
||||
to_run_query: 'Click to run query',
|
||||
the_running_results: 'You can view the running results',
|
||||
data_reference: 'Data Reference',
|
||||
want_to_replace: 'Replacement may affect custom dataset, associated dataset, dashboard, etc. Do you want to replace?',
|
||||
replace_the_data: 'Are you sure to replace the data?',
|
||||
append_successfully: 'Append successfully',
|
||||
already_exists: 'Dataset name already exists',
|
||||
edit_dataset: 'Edit Dataset',
|
||||
convert_to_indicator: 'Convert to Indicator',
|
||||
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'
|
||||
},
|
||||
detabs: {
|
||||
eidttitle: 'Edit Title',
|
||||
selectview: 'Select View',
|
||||
@ -1655,7 +1708,6 @@ export default {
|
||||
please_input_replication_num: 'Please enter Replication number',
|
||||
acquire_increment: 'Growth number',
|
||||
connect_timeout: 'Connection timeout (seconds)',
|
||||
query_timeout: 'Query timeout（seconds）',
|
||||
please_input_initial_pool_size: 'Please enter the number of initial connections',
|
||||
please_input_min_pool_size: 'Please enter the minimum number of connections',
|
||||
please_input_max_pool_size: 'Please enter the maximum number of connections',
|
||||
@ -1708,7 +1760,33 @@ export default {
|
||||
valid: 'Valid',
|
||||
invalid: 'Invalid',
|
||||
api_step_1: 'Connection API',
|
||||
api_step_2: 'Extract data'
|
||||
api_step_2: 'Extract data',
|
||||
_ip_address: 'Please enter host name / IP address',
|
||||
display_name: 'Display name:',
|
||||
connection_mode: 'Connection mode:',
|
||||
driver_file: 'Driver file',
|
||||
edit_driver: 'Edit driver',
|
||||
driver_name: 'Driver name:',
|
||||
drive_type: 'Drive type',
|
||||
add_driver: 'Add driver',
|
||||
on_the_left: 'Please select drive on the left',
|
||||
no_data_table: 'No data table',
|
||||
on_the_left: 'Please select the data source on the left',
|
||||
table_name: 'Table name:',
|
||||
create_dataset: 'Create dataset',
|
||||
field_description: 'Field description',
|
||||
table_description: 'Table description',
|
||||
relational_database: 'Relational database',
|
||||
non_relational_database: 'Non relational database',
|
||||
all: 'All',
|
||||
other: 'other',
|
||||
this_data_source: 'Are you sure to delete this data source?',
|
||||
cannot_be_deleted: '4 datasets are using this data source and cannot be deleted',
|
||||
delete_this_item: 'Do you want to delete this item?',
|
||||
can_be_uploaded: 'Only files in jar format can be uploaded',
|
||||
query_timeout: 'query timeout',
|
||||
add_data_source: 'add data source',
|
||||
delete_this_driver: 'Are you sure to delete this driver?'
|
||||
},
|
||||
pblink: {
|
||||
key_pwd: 'Please enter the password to open the link',
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
},
|
||||
table: {
|
||||
ok: '確定',
|
||||
custom_table_fields: '自定義錶格字段',
|
||||
custom_table_fields: '自定義表格字段',
|
||||
custom_table_fields_desc: '固定字段不在選擇範圍'
|
||||
},
|
||||
steps: {
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
tinymce: '富文本編輯器',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'JSON 編輯器',
|
||||
dndList: '列錶拖拽',
|
||||
dndList: '列表拖拽',
|
||||
splitPane: 'Splitpane',
|
||||
avatarUpload: '頭像上傳',
|
||||
dropzone: 'Dropzone',
|
||||
@ -65,10 +65,10 @@ export default {
|
||||
dragDialog: '拖拽 Dialog',
|
||||
dragSelect: '拖拽 Select',
|
||||
dragKanban: '可拖拽看闆',
|
||||
charts: '圖錶',
|
||||
keyboardChart: '鍵盤圖錶',
|
||||
charts: '圖表',
|
||||
keyboardChart: '鍵盤圖表',
|
||||
lineChart: '摺線圖',
|
||||
mixChart: '混合圖錶',
|
||||
mixChart: '混合圖表',
|
||||
example: '綜合實例',
|
||||
nested: '路由嵌套',
|
||||
menu1: '菜單1',
|
||||
@ -84,10 +84,10 @@ export default {
|
||||
inlineEditTable: 'Table 內編輯',
|
||||
complexTable: '綜合 Table',
|
||||
tab: 'Tab',
|
||||
form: '錶單',
|
||||
form: '表單',
|
||||
createArticle: '創建文章',
|
||||
editArticle: '編輯文章',
|
||||
articleList: '文章列錶',
|
||||
articleList: '文章列表',
|
||||
errorPages: '錯誤頁面',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
excel: 'Excel',
|
||||
exportExcel: '導出 Excel',
|
||||
selectExcel: '導出 已選擇項',
|
||||
mergeHeader: '導出 多級錶頭',
|
||||
mergeHeader: '導出 多級表頭',
|
||||
uploadExcel: '上傳 Excel',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
@ -403,7 +403,7 @@ export default {
|
||||
hour: '小時',
|
||||
minute: '分鐘',
|
||||
day: '天',
|
||||
by_task_name: '通過任務名稱蒐索',
|
||||
by_task_name: '通過任務名稱搜索',
|
||||
delete_this_task: '確定删除該任務嗎？',
|
||||
all_read_successfully: '全部已讀成功全部已读成功',
|
||||
message_receiving_management: '消息接收管理',
|
||||
@ -434,7 +434,7 @@ export default {
|
||||
read_message: '已讀消息',
|
||||
all_messages: '全部消息',
|
||||
message_list: '消息清單',
|
||||
by_plugin_name: '通過挿件名稱蒐索',
|
||||
by_plugin_name: '通過挿件名稱搜索',
|
||||
unable_to_uninstall: '內寘挿件，無法卸載',
|
||||
free: '免費',
|
||||
cost: '費用',
|
||||
@ -443,8 +443,8 @@ export default {
|
||||
installation_time: '安裝時間'
|
||||
},
|
||||
table: {
|
||||
dynamicTips1: '固定錶頭, 按照錶頭順序排序',
|
||||
dynamicTips2: '不固定錶頭, 按照點擊順序排序',
|
||||
dynamicTips1: '固定表頭, 按照表頭順序排序',
|
||||
dynamicTips2: '不固定表頭, 按照點擊順序排序',
|
||||
dragTips1: '默認順序',
|
||||
dragTips2: '拖拽後順序',
|
||||
title: '標題',
|
||||
@ -468,6 +468,59 @@ export default {
|
||||
cancel: '取 消',
|
||||
confirm: '確 定'
|
||||
},
|
||||
deDataset: {
|
||||
search_by_name: '通過名稱搜索',
|
||||
new_folder: '新建資料夾',
|
||||
search_fields: '搜索欄位',
|
||||
show_rows: '顯示行數',
|
||||
display: '顯示',
|
||||
row: '行',
|
||||
restricted_objects: '受限對象',
|
||||
select_data_source: '選擇資料來源',
|
||||
by_table_name: '通過表名稱搜索',
|
||||
run_a_query: '運行査詢',
|
||||
running_results: '運行結果',
|
||||
parameter_type: '參數類型',
|
||||
run_failed: '運行失敗',
|
||||
select_data_table: '選擇資料表',
|
||||
in_the_file: '檔案中不能存在合併儲存格',
|
||||
or_date_type: '檔案的第一行為標題行，不能為空，不能為日期型',
|
||||
is_within_500m: 'Excel文件大小請確保在500M以內',
|
||||
upload_data: '上傳數據',
|
||||
excel_data_first: '請先上傳Excel數據',
|
||||
is_currently_available: '當前無可用的資料表',
|
||||
sure_to_synchronize: '同步欄位可能導致已編輯欄位發生變更，確定同步？',
|
||||
folder_name: '資料夾名稱',
|
||||
folder: '所屬資料夾',
|
||||
edit_folder: '編輯資料夾',
|
||||
new_folder: '新建資料夾',
|
||||
name_already_exists: '資料夾名稱已存在',
|
||||
data_preview: '數據預覽',
|
||||
original_name: '原始名稱',
|
||||
database: '資料庫',
|
||||
selected: '已選：',
|
||||
table: '表',
|
||||
no_dataset_click: '暫無數据集，點擊',
|
||||
create: '新建',
|
||||
new_folder_first: '請先新建資料夾',
|
||||
on_the_left: '請在左側選擇數据集',
|
||||
expression_syntax_error: '欄位運算式語法錯誤',
|
||||
create_dashboard: '創建儀表板',
|
||||
cannot_be_empty: 'SQL不能為空',
|
||||
to_run_query: '點擊運行査詢',
|
||||
the_running_results: '即可查看運行結果',
|
||||
data_reference: '數據參攷',
|
||||
want_to_replace: '替換可能會影響自定義數据集、關聯數据集、儀表板等，是否替換？',
|
||||
replace_the_data: '確定替換數據嗎？',
|
||||
append_successfully: '追加成功',
|
||||
already_exists: '數据集名稱已存在',
|
||||
edit_dataset: '編輯數据集',
|
||||
convert_to_indicator: '轉換為名額',
|
||||
convert_to_dimension: '轉換為維度',
|
||||
left_to_edit: '選中左側的資料表可進行編輯',
|
||||
cannot_be_duplicate: '數据集名稱不允許重複',
|
||||
set_saved_successfully: '數据集保存成功'
|
||||
},
|
||||
detabs: {
|
||||
eidttitle: '編輯標題',
|
||||
selectview: '選擇視圖',
|
||||
@ -825,7 +878,7 @@ export default {
|
||||
table_borders: '表格邊框',
|
||||
subject_name: '主題名稱',
|
||||
template_name: '模版名稱',
|
||||
search_keywords: '蒐索關鍵字',
|
||||
search_keywords: '搜索關鍵字',
|
||||
delete_this_topic: '確定删除該主題嗎？',
|
||||
network_error: '網絡錯誤',
|
||||
to_overwrite_them: '當前分類存在相同名稱模版，是否覆蓋？',
|
||||
@ -839,7 +892,7 @@ export default {
|
||||
edit_template: '編輯模版',
|
||||
edit_classification: '編輯分類',
|
||||
classification_name: '分類名稱',
|
||||
by_event_details: '通過事件詳情蒐索',
|
||||
by_event_details: '通過事件詳情搜索',
|
||||
password_input_error: '原始密碼輸入錯誤'
|
||||
},
|
||||
chart: {
|
||||
@ -876,7 +929,7 @@ export default {
|
||||
add_db_table: '添加數據庫數據集',
|
||||
add_api_table: '添加API數據集',
|
||||
pls_slc_data_source: '請選擇數據源',
|
||||
table: '錶',
|
||||
table: '表',
|
||||
edit: '編輯',
|
||||
create_view: '創建試圖',
|
||||
data_preview: '數據預覽',
|
||||
@ -884,7 +937,7 @@ export default {
|
||||
quota: '指標',
|
||||
title: '標題',
|
||||
show: '顯示',
|
||||
chart_type: '圖錶類型',
|
||||
chart_type: '圖表類型',
|
||||
shape_attr: '圖形屬性',
|
||||
module_style: '組件樣式',
|
||||
result_filter: '過濾器',
|
||||
@ -1011,19 +1064,19 @@ export default {
|
||||
belong_group: '所屬分組',
|
||||
select_group: '選擇分組',
|
||||
name_can_not_empty: '名稱不能爲空',
|
||||
template_can_not_empty: '請選擇儀錶版',
|
||||
template_can_not_empty: '請選擇儀表版',
|
||||
custom_count: '記錄數',
|
||||
table_title_fontsize: '錶頭字體大小',
|
||||
table_item_fontsize: '錶格字體大小',
|
||||
table_header_bg: '錶頭背景',
|
||||
table_item_bg: '錶格背景',
|
||||
table_title_fontsize: '表頭字體大小',
|
||||
table_item_fontsize: '表格字體大小',
|
||||
table_header_bg: '表頭背景',
|
||||
table_item_bg: '表格背景',
|
||||
table_header_font_color: '表頭字體',
|
||||
table_item_font_color: '表格字體',
|
||||
stripe: '斑馬紋',
|
||||
start_angle: '起始角度',
|
||||
end_angle: '結束角度',
|
||||
style_priority: '樣式優先級',
|
||||
dashboard: '儀錶闆',
|
||||
dashboard: '儀表闆',
|
||||
dimension_color: '名稱顔色',
|
||||
quota_color: '值顔色',
|
||||
dimension_font_size: '名稱字體大小',
|
||||
@ -1037,8 +1090,8 @@ export default {
|
||||
filter_condition: '過濾條件',
|
||||
filter_field_can_null: '過濾字段必填',
|
||||
preview_100_data: '預覽前100條記錄',
|
||||
chart_table_normal: '彙總錶',
|
||||
chart_table_info: '明細錶',
|
||||
chart_table_normal: '彙總表',
|
||||
chart_table_info: '明細表',
|
||||
chart_card: '指標卡',
|
||||
chart_bar: '基礎柱狀圖',
|
||||
chart_bar_stack: '堆疊柱狀圖',
|
||||
@ -1050,7 +1103,7 @@ export default {
|
||||
chart_pie_rose: '南丁格爾玫瑰圖',
|
||||
chart_funnel: '漏鬥圖',
|
||||
chart_radar: '雷達圖',
|
||||
chart_gauge: '儀錶盤',
|
||||
chart_gauge: '儀表盤',
|
||||
chart_map: '地圖',
|
||||
dateStyle: '日期顯示',
|
||||
datePattern: '日期格式',
|
||||
@ -1066,8 +1119,8 @@ export default {
|
||||
chart_show_error: '無法正常顯示',
|
||||
chart_error_tips: '如有疑問請聯繫管理員',
|
||||
title_cannot_empty: '標題不能爲空',
|
||||
table_title_height: '錶頭行高',
|
||||
table_item_height: '錶格行高',
|
||||
table_title_height: '表頭行高',
|
||||
table_item_height: '表格行高',
|
||||
axis_show: '軸線顯示',
|
||||
axis_color: '軸線顔色',
|
||||
axis_width: '軸線寬度',
|
||||
@ -1152,7 +1205,7 @@ export default {
|
||||
axis_value_max: '最大值',
|
||||
axis_value_split: '間隔',
|
||||
axis_auto: '自動',
|
||||
table_info_switch: '明細錶切換將清空維度',
|
||||
table_info_switch: '明細表切換將清空維度',
|
||||
drag_block_value_axis_main: '主軸值',
|
||||
drag_block_value_axis_ext: '副軸值',
|
||||
yAxis_main: '主縱軸',
|
||||
@ -1187,7 +1240,7 @@ export default {
|
||||
drag_block_word_cloud_size: '詞大小',
|
||||
splitCount_less_100: '刻度數範圍0-100',
|
||||
change_chart_type: '更改類型',
|
||||
chart_type_table: '錶格',
|
||||
chart_type_table: '表格',
|
||||
chart_type_quota: '指標',
|
||||
chart_type_trend: '趨勢',
|
||||
chart_type_compare: '比較',
|
||||
@ -1376,11 +1429,11 @@ export default {
|
||||
sql_data: 'SQL 數據集',
|
||||
excel_data: 'Excel 數據集',
|
||||
custom_data: '自定義數據集',
|
||||
pls_slc_tbl_left: '請從左側選擇錶',
|
||||
pls_slc_tbl_left: '請從左側選擇表',
|
||||
add_db_table: '添加數據庫數據集',
|
||||
add_api_table: '添加API數據集',
|
||||
pls_slc_data_source: '請選擇數據源',
|
||||
table: '錶',
|
||||
table: '表',
|
||||
edit: '編輯',
|
||||
create_view: '創建視圖',
|
||||
data_preview: '數據預覽',
|
||||
@ -1415,7 +1468,7 @@ export default {
|
||||
execute_rate: '執行頻率',
|
||||
execute_once: '立即執行',
|
||||
simple_cron: '簡單重複',
|
||||
cron_config: '錶達式設定',
|
||||
cron_config: '表達式設定',
|
||||
no_limit: '無限製',
|
||||
set_end_time: '設定結束時間',
|
||||
operate: '操作',
|
||||
@ -1447,21 +1500,21 @@ export default {
|
||||
preview_total: '共',
|
||||
pls_input_less_5: '請輸入5位以內的正整數',
|
||||
field_edit: '編輯字段',
|
||||
table_already_add_to: '該錶已添加至',
|
||||
table_already_add_to: '該表已添加至',
|
||||
uploading: '上傳中...',
|
||||
add_union: '新建關聯',
|
||||
union_setting: '關聯設置',
|
||||
pls_slc_union_field: '請選擇關聯字段',
|
||||
pls_slc_union_table: '請選擇關聯錶',
|
||||
source_table: '關聯錶',
|
||||
pls_slc_union_table: '請選擇關聯表',
|
||||
source_table: '關聯表',
|
||||
source_field: '關聯字段',
|
||||
target_table: '被關聯錶',
|
||||
target_table: '被關聯表',
|
||||
target_field: '被關聯字段',
|
||||
union_relation: '關聯關繫',
|
||||
pls_setting_union_success: '請正確設置關聯關繫',
|
||||
invalid_dataset: 'Kettle未運行，無效數據集',
|
||||
check_all: '全選',
|
||||
can_not_union_self: '被關聯錶不能與關聯錶相同',
|
||||
can_not_union_self: '被關聯表不能與關聯表相同',
|
||||
float: '小數',
|
||||
edit_custom_table: '編輯自定義數據集',
|
||||
edit_field: '編輯字段',
|
||||
@ -1481,7 +1534,7 @@ export default {
|
||||
task_edit_title: '編輯任務',
|
||||
sync_latter: '稍後同步',
|
||||
task: {
|
||||
list: '任務列錶',
|
||||
list: '任務列表',
|
||||
record: '執行記錄',
|
||||
create: '新建任務',
|
||||
name: '任務名稱',
|
||||
@ -1497,7 +1550,7 @@ export default {
|
||||
pending: '暫停',
|
||||
confirm_exec: '手動觸發執行？',
|
||||
change_success: '狀態切換成功',
|
||||
excel_replace_msg: '可能會影響計算欄位、自定義數據集、關聯數據集、儀錶板等，確認替換？',
|
||||
excel_replace_msg: '可能會影響計算欄位、自定義數據集、關聯數據集、儀表板等，確認替換？',
|
||||
effect_ext_field: '會影響計算欄位'
|
||||
},
|
||||
field_group_type: '分類',
|
||||
@ -1511,7 +1564,7 @@ export default {
|
||||
d_q_trans: '維度/指標轉換',
|
||||
add_calc_field: '新建計算字段',
|
||||
input_name: '請輸入名稱',
|
||||
field_exp: '字段錶達式',
|
||||
field_exp: '字段表達式',
|
||||
data_type: '數據類型',
|
||||
click_ref_field: '點擊引用字段',
|
||||
click_ref_function: '點擊引用函數',
|
||||
@ -1522,7 +1575,7 @@ export default {
|
||||
ple_select_excel: '請選擇要導入的 Excel',
|
||||
merge: '合並',
|
||||
no_merge: '不合並',
|
||||
merge_msg: '數據錶中存在字段一致的情況，是否合並到一個數據集中?',
|
||||
merge_msg: '數據表中存在字段一致的情況，是否合並到一個數據集中?',
|
||||
merge_title: '合並數據',
|
||||
field_name_less_50: '字段名不能超過50個字符',
|
||||
excel_info_1: '1、文件終不能存在合併單元格；',
|
||||
@ -1655,7 +1708,6 @@ export default {
|
||||
please_input_replication_num: '請輸入副本數量',
|
||||
acquire_increment: '增長數',
|
||||
connect_timeout: '連接超時(秒)',
|
||||
query_timeout: '査詢超時（秒）',
|
||||
please_input_initial_pool_size: '請輸入初始連接數',
|
||||
please_input_min_pool_size: '請輸入最小連接數',
|
||||
please_input_max_pool_size: '請輸入最大連接數',
|
||||
@ -1708,7 +1760,33 @@ export default {
|
||||
valid: '有效',
|
||||
invalid: '無效',
|
||||
api_step_1: '連接API',
|
||||
api_step_2: '選取數據'
|
||||
api_step_2: '選取數據',
|
||||
_ip_address: '請輸入主機名/ IP地址',
|
||||
display_name: '顯示名稱',
|
||||
connection_mode: '連接管道',
|
||||
driver_file: '驅動檔案',
|
||||
edit_driver: '編輯驅動',
|
||||
driver_name: '驅動名稱',
|
||||
drive_type: '驅動類型',
|
||||
add_driver: '添加驅動',
|
||||
on_the_left: '請在左側選擇驅動',
|
||||
no_data_table: '暫無資料表',
|
||||
on_the_left: '請在左側選擇資料來源',
|
||||
table_name: '表名稱',
|
||||
create_dataset: '創建數据集',
|
||||
field_description: '欄位描述',
|
||||
table_description: '表描述',
|
||||
relational_database: '關係型數據庫',
|
||||
non_relational_database: '非關係型數據庫',
|
||||
all: '所有',
|
||||
other: '其他',
|
||||
this_data_source: '確定删除該資料來源嗎？',
|
||||
cannot_be_deleted: '4個數据集正在使用此資料來源，無法删除',
|
||||
delete_this_item: '是否要删除此項？',
|
||||
can_be_uploaded: '僅支持上傳JAR格式的檔案',
|
||||
query_timeout: '査詢超時',
|
||||
add_data_source: '添加資料來源',
|
||||
delete_this_driver: '確定删除該驅動嗎？'
|
||||
},
|
||||
pblink: {
|
||||
key_pwd: '請輸入密碼打開鏈接',
|
||||
@ -1809,9 +1887,9 @@ export default {
|
||||
over_time: '有效期',
|
||||
link_expire: '鏈接已過期！',
|
||||
link_share: '鏈接分享',
|
||||
link_share_desc: '開啓鏈接後，任何人可通過此鏈接訪問儀錶闆。',
|
||||
link_share_desc: '開啓鏈接後，任何人可通過此鏈接訪問儀表闆。',
|
||||
share: '分享',
|
||||
remove_share_confirm: '確認取消當前儀錶闆所有分享？',
|
||||
remove_share_confirm: '確認取消當前儀表闆所有分享？',
|
||||
share_in: '分享給我',
|
||||
share_out: '我分享的',
|
||||
who_share: '分享人',
|
||||
@ -1820,12 +1898,12 @@ export default {
|
||||
org: '組織',
|
||||
role: '角色',
|
||||
user: '用戶',
|
||||
datalist: '視圖列錶',
|
||||
datalist: '視圖列表',
|
||||
group: '目錄',
|
||||
panel: '儀錶闆',
|
||||
panel_list: '儀錶闆',
|
||||
panel: '儀表闆',
|
||||
panel_list: '儀表闆',
|
||||
groupAdd: '新建目錄',
|
||||
panelAdd: '新建儀錶闆',
|
||||
panelAdd: '新建儀表闆',
|
||||
delete: '刪除',
|
||||
move_to: '移動到',
|
||||
rename: '重命名',
|
||||
@ -1847,8 +1925,8 @@ export default {
|
||||
add_category: '添加分類',
|
||||
add_app_category: '添加应用分類',
|
||||
filter_keywords: '輸入關鍵字進行過濾',
|
||||
dashboard_theme: '儀錶闆主題',
|
||||
table: '錶格',
|
||||
dashboard_theme: '儀表闆主題',
|
||||
table: '表格',
|
||||
gap: '有間隙',
|
||||
no_gap: '無間隙',
|
||||
component_gap: '組件間隙',
|
||||
@ -1856,10 +1934,10 @@ export default {
|
||||
minute: '分鐘',
|
||||
second: '秒',
|
||||
photo: '圖片',
|
||||
default_panel: '默認儀錶闆',
|
||||
default_panel: '默認儀表闆',
|
||||
create_public_links: '創建公共鏈接',
|
||||
to_default: '另存爲默認',
|
||||
to_default_panel: '另存爲默認儀錶闆',
|
||||
to_default_panel: '另存爲默認儀表闆',
|
||||
store: '收藏',
|
||||
save_to_panel: '保存爲模闆',
|
||||
export_to_panel: '導出爲模闆',
|
||||
@ -1869,7 +1947,7 @@ export default {
|
||||
preview: '預覽',
|
||||
fullscreen_preview: '全屏預覽',
|
||||
new_tab_preview: '新Tab頁預覽',
|
||||
select_panel_from_left: '請從左側選擇儀錶闆',
|
||||
select_panel_from_left: '請從左側選擇儀表闆',
|
||||
template_name: '模闆名稱',
|
||||
template: '模闆',
|
||||
category: '分類',
|
||||
@ -1881,9 +1959,9 @@ export default {
|
||||
belong_to_category: '所屬類別',
|
||||
pls_select_belong_to_category: '請選擇所屬類別',
|
||||
template_name_cannot_be_empty: '模闆名稱不能爲空',
|
||||
select_by_table: '按錶選擇',
|
||||
data_list: '數據列錶',
|
||||
component_list: '組件列錶',
|
||||
select_by_table: '按表選擇',
|
||||
data_list: '數據列表',
|
||||
component_list: '組件列表',
|
||||
custom_scope: '控製範圍',
|
||||
binding_parameters: '參數',
|
||||
multiple_choice: '多選',
|
||||
@ -1900,7 +1978,7 @@ export default {
|
||||
insert_picture: '插入圖片',
|
||||
redo: '重做',
|
||||
undo: '撤銷',
|
||||
panelNull: '這是個空的儀錶闆，可以通過編輯來豐富內容',
|
||||
panelNull: '這是個空的儀表闆，可以通過編輯來豐富內容',
|
||||
copy: '複製',
|
||||
paste: '黏貼',
|
||||
cut: '剪切',
|
||||
@ -1946,12 +2024,12 @@ export default {
|
||||
select_component: '請選擇組件',
|
||||
other_module: '其他',
|
||||
content: '內容',
|
||||
default_panel_name: '默認儀錶闆名稱',
|
||||
source_panel_name: '原儀錶闆名稱',
|
||||
default_panel_name: '默認儀表闆名稱',
|
||||
source_panel_name: '原儀表闆名稱',
|
||||
content_style: '內容樣式',
|
||||
canvas_self_adaption: '自適應畫佈區域',
|
||||
panel_save_tips: '儀錶闆已變動，是否保存？',
|
||||
panel_save_warn_tips: '如果未保存，妳對儀錶闆做的變更將會丟失！',
|
||||
panel_save_tips: '儀表闆已變動，是否保存？',
|
||||
panel_save_warn_tips: '如果未保存，妳對儀表闆做的變更將會丟失！',
|
||||
do_not_save: '不保存',
|
||||
save: '保存',
|
||||
drill: '下鑽',
|
||||
@ -1978,7 +2056,7 @@ export default {
|
||||
new_window: '新窗口',
|
||||
now_window: '當前窗口',
|
||||
hyperLinks: '目標地址',
|
||||
link_open_tips: '儀錶闆非編輯狀態可打開鏈接',
|
||||
link_open_tips: '儀表闆非編輯狀態可打開鏈接',
|
||||
data_loading: '數據準備中...',
|
||||
export_loading: '導出中...',
|
||||
export_pdf: '導出PDF',
|
||||
@ -1989,8 +2067,8 @@ export default {
|
||||
open_model: '打開方式',
|
||||
link_type: '鏈接類型',
|
||||
link_outer: '外部鏈接',
|
||||
link_panel: '儀錶闆',
|
||||
select_jump_panel: '選擇關聯的儀錶闆',
|
||||
link_panel: '儀表闆',
|
||||
select_jump_panel: '選擇關聯的儀表闆',
|
||||
link_view: '聯動視圖',
|
||||
link_view_field: '聯動視圖字段',
|
||||
add_jump_field: '追加跳轉聯動依賴字段',
|
||||
@ -2010,11 +2088,11 @@ export default {
|
||||
video_add_tips: '請點擊添加配置視頻信息...',
|
||||
web_add_tips: '請點擊添加網頁信息...',
|
||||
panel_view_result_show: '視圖結果',
|
||||
panel_view_result_tips: '選擇儀錶闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
|
||||
panel_view_result_tips: '選擇儀表闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
|
||||
timeout_refresh: '請求超時，稍後刷新...',
|
||||
mobile_layout: '移動端佈局',
|
||||
component_hidden: '隱藏的組件',
|
||||
public_link_tips: '當前是公共鏈接模式，目標儀錶闆未設置公共鏈接，無法跳轉',
|
||||
public_link_tips: '當前是公共鏈接模式，目標儀表闆未設置公共鏈接，無法跳轉',
|
||||
input_title: '請輸入標題',
|
||||
show_title: '標題',
|
||||
default_settings: '默認值設置',
|
||||
@ -2095,7 +2173,7 @@ export default {
|
||||
linkAuth: '數據源',
|
||||
datasetAuth: '數據集',
|
||||
chartAuth: '視圖',
|
||||
panelAuth: '儀錶闆',
|
||||
panelAuth: '儀表闆',
|
||||
menuAuth: '菜單和操作',
|
||||
deptHead: '所有組織',
|
||||
roleHead: '所有角色',
|
||||
@ -2103,7 +2181,7 @@ export default {
|
||||
linkAuthHead: '所有數據源',
|
||||
datasetAuthHead: '所有數據集',
|
||||
chartAuthHead: '所有視圖',
|
||||
panelAuthHead: '所有儀錶闆',
|
||||
panelAuthHead: '所有儀表闆',
|
||||
menuAuthHead: '所有菜單和操作',
|
||||
view: '查看',
|
||||
use: '使用',
|
||||
@ -2211,7 +2289,7 @@ export default {
|
||||
web_msg: '站內消息通知',
|
||||
show_more: '查看更多',
|
||||
all_type: '全部類型',
|
||||
panel_type: '儀錶闆分享',
|
||||
panel_type: '儀表闆分享',
|
||||
dataset_type: '數據集同步',
|
||||
content: '消息內容',
|
||||
sned_time: '提交時間',
|
||||
@ -2222,8 +2300,8 @@ export default {
|
||||
please_select: '請至少選擇一條消息',
|
||||
mark_success: '標記已讀成功',
|
||||
receive_manage: '接收管理',
|
||||
i18n_msg_type_panel_share: '儀錶闆分享',
|
||||
i18n_msg_type_panel_share_cacnel: '儀錶闆取消分享',
|
||||
i18n_msg_type_panel_share: '儀表闆分享',
|
||||
i18n_msg_type_panel_share_cacnel: '儀表闆取消分享',
|
||||
i18n_msg_type_dataset_sync: '數據集同步',
|
||||
i18n_msg_type_dataset_sync_success: '數據集同步成功',
|
||||
i18n_msg_type_dataset_sync_faild: '數據集同步失敗',
|
||||
@ -2277,11 +2355,11 @@ export default {
|
||||
placeholder: '請選擇'
|
||||
},
|
||||
detextgridselect: {
|
||||
label: '文本列錶',
|
||||
label: '文本列表',
|
||||
placeholder: '請選擇'
|
||||
},
|
||||
denumbergridselect: {
|
||||
label: '數字列錶',
|
||||
label: '數字列表',
|
||||
placeholder: '請選擇'
|
||||
},
|
||||
dedaterange: {
|
||||
@ -2312,8 +2390,8 @@ export default {
|
||||
open_mode: '展示風格',
|
||||
m_default: '簡單風格',
|
||||
m_elec: '電子時鐘',
|
||||
m_simple: '簡單錶盤',
|
||||
m_complex: '複雜錶盤',
|
||||
m_simple: '簡單表盤',
|
||||
m_complex: '複雜表盤',
|
||||
select_openMode: '請選擇展示風格',
|
||||
select_time_format: '請選擇時間各式',
|
||||
select_date_format: '請選擇日期格式'
|
||||
@ -2341,7 +2419,7 @@ export default {
|
||||
},
|
||||
emailtask: {
|
||||
title: '報告主題',
|
||||
panel: '儀錶闆',
|
||||
panel: '儀表闆',
|
||||
content: '報告正文',
|
||||
recipients: '收件人',
|
||||
recisetting: '接受設置',
|
||||
@ -2353,7 +2431,7 @@ export default {
|
||||
default: '默認',
|
||||
custom: '自定義',
|
||||
rate_type: '發送p頻率',
|
||||
cron_exp: 'cron錶達式',
|
||||
cron_exp: 'cron表達式',
|
||||
exec_time: '執行時間',
|
||||
start_time: '開始時間',
|
||||
end_time: '結束時間',
|
||||
|
||||
@ -468,6 +468,59 @@ export default {
|
||||
cancel: '取 消',
|
||||
confirm: '确 定'
|
||||
},
|
||||
deDataset: {
|
||||
search_by_name: '通过名称搜索',
|
||||
new_folder: '新建文件夹',
|
||||
search_fields: '搜索字段',
|
||||
show_rows: '显示行数',
|
||||
display: '显示',
|
||||
row: '行',
|
||||
restricted_objects: '受限对象',
|
||||
select_data_source: '选择数据源',
|
||||
by_table_name: '通过表名称搜索',
|
||||
run_a_query: '运行查询',
|
||||
running_results: '运行结果',
|
||||
parameter_type: '参数类型',
|
||||
run_failed: '运行失败',
|
||||
select_data_table: '选择数据表',
|
||||
in_the_file: '文件中不能存在合并单元格',
|
||||
or_date_type: '文件的第一行为标题行，不能为空，不能为日期型',
|
||||
is_within_500m: 'Excel文件大小请确保在500M以内',
|
||||
upload_data: '上传数据',
|
||||
excel_data_first: '请先上传Excel数据',
|
||||
is_currently_available: '当前无可用的数据表',
|
||||
sure_to_synchronize: '同步字段可能导致已编辑字段发生变更，确定同步？',
|
||||
folder_name: '文件夹名称',
|
||||
folder: '所属文件夹',
|
||||
edit_folder: '编辑文件夹',
|
||||
new_folder: '新建文件夹',
|
||||
name_already_exists: '文件夹名称已存在',
|
||||
data_preview: '数据预览',
|
||||
original_name: '原始名称',
|
||||
database: '数据库',
|
||||
selected: '已选：',
|
||||
table: '张表',
|
||||
no_dataset_click: '暂无数据集，点击',
|
||||
create: '新建',
|
||||
new_folder_first: '请先新建文件夹',
|
||||
on_the_left: '请在左侧选择数据集',
|
||||
expression_syntax_error: '字段表达式语法错误',
|
||||
create_dashboard: '创建仪表板',
|
||||
cannot_be_empty: 'SQL不能为空',
|
||||
to_run_query: '点击运行查询',
|
||||
the_running_results: '即可查看运行结果',
|
||||
data_reference: '数据参考',
|
||||
want_to_replace: '替换可能会影响自定义数据集、关联数据集、仪表板等，是否替换？',
|
||||
replace_the_data: '确定替换数据吗？',
|
||||
append_successfully: '追加成功',
|
||||
already_exists: '数据集名称已存在',
|
||||
edit_dataset: '编辑数据集',
|
||||
convert_to_indicator: '转换为指标',
|
||||
convert_to_dimension: '转换为维度',
|
||||
left_to_edit: '选中左侧的数据表可进行编辑',
|
||||
cannot_be_duplicate: '数据集名称不允许重复',
|
||||
set_saved_successfully: '数据集保存成功'
|
||||
},
|
||||
detabs: {
|
||||
eidttitle: '编辑标题',
|
||||
selectview: '选择视图',
|
||||
@ -1635,7 +1688,7 @@ export default {
|
||||
oracle_sid: 'SID',
|
||||
oracle_service_name: '服务名',
|
||||
get_schema: '获取 Schema',
|
||||
schema: '数据库 Schema',
|
||||
schema: 'Schema',
|
||||
charset: '字符集',
|
||||
targetCharset: '目标字符集',
|
||||
please_choose_schema: '请选择数据库 Schema',
|
||||
@ -1655,7 +1708,6 @@ export default {
|
||||
please_input_replication_num: '请输入副本数量',
|
||||
acquire_increment: '增长数',
|
||||
connect_timeout: '连接超时(秒)',
|
||||
query_timeout: '查询超时(秒)',
|
||||
please_input_initial_pool_size: '请输入初始连接数',
|
||||
please_input_min_pool_size: '请输入最小连接数',
|
||||
please_input_max_pool_size: '请输入最大连接数',
|
||||
@ -1708,7 +1760,34 @@ export default {
|
||||
valid: '有效',
|
||||
invalid: '无效',
|
||||
api_step_1: '连接API',
|
||||
api_step_2: '提取数据'
|
||||
api_step_2: '提取数据',
|
||||
_ip_address: '请输入主机名/IP地址',
|
||||
display_name: '显示名称',
|
||||
connection_mode: '连接方式',
|
||||
driver_file: '驱动文件',
|
||||
edit_driver: '编辑驱动',
|
||||
driver_name: '驱动名称',
|
||||
drive_type: '驱动类型',
|
||||
add_driver: '添加驱动',
|
||||
on_the_left: '请在左侧选择驱动',
|
||||
no_data_table: '暂无数据表',
|
||||
on_the_left: '请在左侧选择数据源',
|
||||
table_name: '表名称',
|
||||
create_dataset: '创建数据集',
|
||||
field_description: '字段描述',
|
||||
table_description: '表描述',
|
||||
relational_database: '关系型数据库',
|
||||
non_relational_database: '非关系型数据库',
|
||||
all: '所有',
|
||||
other: '其他',
|
||||
this_data_source: '确定删除该数据源吗？',
|
||||
cannot_be_deleted: '4个数据集正在使用此数据源，无法删除',
|
||||
please_select: '请选择',
|
||||
delete_this_item: '是否要删除此项？',
|
||||
can_be_uploaded: '仅支持上传JAR格式的文件',
|
||||
query_timeout: '查询超时',
|
||||
add_data_source: '添加数据源',
|
||||
delete_this_driver: '确定删除该驱动吗？'
|
||||
},
|
||||
pblink: {
|
||||
key_pwd: '请输入密码打开链接',
|
||||
|
||||
@ -27,7 +27,7 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial,FangSong,SimHei,STHeiti,STKaiti,STSong,STFangsong sans-serif;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, FangSong, SimHei, STHeiti, STKaiti, STSong, STFangsong sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -160,9 +160,11 @@ div:focus {
|
||||
height: 100vh !important;
|
||||
}
|
||||
}
|
||||
.de-tabs-edit>.el-tabs__header{
|
||||
padding-right: 50px !important;
|
||||
|
||||
.de-tabs-edit>.el-tabs__header {
|
||||
padding-right: 50px !important;
|
||||
}
|
||||
|
||||
.de-tabs {
|
||||
.el-tabs__header {
|
||||
margin: 0 0 0 0 !important;
|
||||
@ -605,13 +607,13 @@ div:focus {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: 34px !important;
|
||||
line-height: 34px !important;
|
||||
padding: 0 0 0 6px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
// .el-collapse-item__header {
|
||||
// height: 34px !important;
|
||||
// line-height: 34px !important;
|
||||
// padding: 0 0 0 6px !important;
|
||||
// font-size: 12px !important;
|
||||
// font-weight: 400 !important;
|
||||
// }
|
||||
|
||||
.blackTheme .el-submenu__title {
|
||||
color: var(--TextPrimary);
|
||||
@ -789,32 +791,39 @@ div:focus {
|
||||
}
|
||||
}
|
||||
|
||||
.pwd-tips > span {
|
||||
.pwd-tips>span {
|
||||
|
||||
font-weight: 800;
|
||||
color: #F56C6C;
|
||||
font-weight: 800;
|
||||
color: #F56C6C;
|
||||
}
|
||||
.amap-container{
|
||||
|
||||
.amap-container {
|
||||
// position: inherit !important;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.l7-scene {
|
||||
// position: relative !important;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.fu-operator-component__operator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fu-operator-component__label {
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
.view-select-option {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.de-select-option {
|
||||
display: none !important;
|
||||
}
|
||||
.el-checkbox__input.is-checked:not(.is-disabled) + .el-checkbox__label {
|
||||
|
||||
.el-checkbox__input.is-checked:not(.is-disabled)+.el-checkbox__label {
|
||||
color: #1F2329 !important;
|
||||
}
|
||||
|
||||
@ -855,9 +864,10 @@ div:focus {
|
||||
.el-table__header-wrapper {
|
||||
background-color: var(--TableBG, #f5f6f7) !important;
|
||||
}
|
||||
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
background-color: var(--TableBG, #f5f6f7) !important;
|
||||
background-color: var(--TableBG, #f5f6f7) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -872,6 +882,7 @@ div:focus {
|
||||
padding: 16px 20px !important;
|
||||
flex-direction: row;
|
||||
box-shadow: 0px 4px 8px 0px #1f23291a;
|
||||
|
||||
span {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
@ -888,9 +899,11 @@ div:focus {
|
||||
margin-right: 8.67px;
|
||||
}
|
||||
}
|
||||
|
||||
.de-message-error {
|
||||
border: 1px solid var(--deDanger, #f54a45) !important;
|
||||
background: var(--deWhitemsgDeDanger, #fef1f1) !important;
|
||||
|
||||
i {
|
||||
color: var(--deDanger, #f54a45);
|
||||
}
|
||||
@ -899,6 +912,7 @@ div:focus {
|
||||
.de-message-success {
|
||||
border: 1px solid var(--deSuccess, #34c724) !important;
|
||||
background: var(--deWhitemsgDeSuccess, #f0fbef) !important;
|
||||
|
||||
i {
|
||||
color: var(--deSuccess, #34c724);
|
||||
}
|
||||
@ -907,6 +921,7 @@ div:focus {
|
||||
.pagination-cont {
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
|
||||
.el-pager li {
|
||||
background-color: #fff !important;
|
||||
border: 1px solid #bbbfc4 !important;
|
||||
@ -948,6 +963,7 @@ div:focus {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-import-class>.el-dialog__body {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
@ -964,18 +980,17 @@ div:focus {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk)
|
||||
> .el-form-item__label:before {
|
||||
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk)
|
||||
> .el-form-item__label::after {
|
||||
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after {
|
||||
content: "*";
|
||||
color: #f54a45;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
@ -987,6 +1002,27 @@ div:focus {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 92px;
|
||||
width: 552px;
|
||||
}
|
||||
|
||||
.el-textarea .el-input__count {
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #8F959E;
|
||||
line-height: 20px;
|
||||
padding: 0 12px 6px 0;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.de-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.de-dialog-form {
|
||||
@ -994,7 +1030,7 @@ div:focus {
|
||||
.el-dialog__close {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 0 24px 24px 24px;
|
||||
}
|
||||
@ -1010,6 +1046,7 @@ div:focus {
|
||||
|
||||
.de-confirm {
|
||||
border: none;
|
||||
|
||||
.el-message-box__header {
|
||||
display: none;
|
||||
}
|
||||
@ -1022,6 +1059,7 @@ div:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-message-box__status {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
@ -1059,6 +1097,7 @@ div:focus {
|
||||
|
||||
.de-confirm-fail {
|
||||
padding: 0 24px 24px 0 !important;
|
||||
|
||||
.el-message-box__status {
|
||||
color: #ff8800 !important;
|
||||
}
|
||||
@ -1116,6 +1155,7 @@ div:focus {
|
||||
background: var(--deDanger, #f54a45) !important;
|
||||
border: none !important;
|
||||
color: #ffffff !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--deDangerHover, #f54a45) !important;
|
||||
}
|
||||
@ -1136,6 +1176,7 @@ div:focus {
|
||||
.date-filter-poper>.el-scrollbar>.el-select-dropdown__wrap {
|
||||
max-height: 230px !important;
|
||||
}
|
||||
|
||||
.tox {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
@ -1148,6 +1189,7 @@ div:focus {
|
||||
.el-input__prefix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-icon-circle-close {
|
||||
margin-right: 20px;
|
||||
}
|
||||
@ -1164,11 +1206,13 @@ div:focus {
|
||||
.el-input__inner {
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.el-input__prefix {
|
||||
left: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -1184,8 +1228,9 @@ div:focus {
|
||||
width: 100%;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.el-drawer__header {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
margin: 0;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
@ -1222,6 +1267,7 @@ div:focus {
|
||||
.filter {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
|
||||
> :nth-child(1) {
|
||||
color: var(--deTextSecondary, #1f2329);
|
||||
font-family: "PingFang SC";
|
||||
@ -1232,8 +1278,10 @@ div:focus {
|
||||
white-space: nowrap;
|
||||
width: 116px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
flex: 1;
|
||||
|
||||
.item,
|
||||
.more {
|
||||
font-family: PingFang SC;
|
||||
@ -1253,10 +1301,11 @@ div:focus {
|
||||
}
|
||||
|
||||
.active,
|
||||
.more:hover{
|
||||
.more:hover {
|
||||
background: var(--primary10, rgba(51, 112, 255, 0.1));
|
||||
color: var(--primaryselect, #0c296e);
|
||||
}
|
||||
|
||||
.more {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -1294,14 +1343,18 @@ div:focus {
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.user-popper {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
|
||||
.popper__arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-select {
|
||||
|
||||
.el-select-dropdown__empty,
|
||||
.el-scrollbar__wrap,
|
||||
.popper__arrow {
|
||||
@ -1314,9 +1367,150 @@ div:focus {
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.upload-user{
|
||||
|
||||
.upload-user {
|
||||
margin-bottom: 5px;
|
||||
.el-upload{
|
||||
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.de-row-rules {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
padding-left: 10px;
|
||||
margin: 24px 0 16px 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 14px;
|
||||
width: 2px;
|
||||
background: #3370ff;
|
||||
}
|
||||
}
|
||||
|
||||
.de-foot {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.de-card-dropdown {
|
||||
margin-top: 0 !important;
|
||||
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.de-serach-table {
|
||||
.top-operate {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.right-user {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.de-button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__icon {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.name-email-search {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w100-textarea {
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.schema-label {
|
||||
.el-form-item__label {
|
||||
display: flex;
|
||||
padding: 0 !important;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-button--text {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.de-tree {
|
||||
.el-tree-node.is-current.is-focusable {
|
||||
&>.el-tree-node__content {
|
||||
background-color: var(--deWhiteHover, #3370ff);
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
|
||||
i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #646a73;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
i:active {
|
||||
background: rgba(31, 35, 41, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.de-text-btn {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
padding: 2px 4px !important;
|
||||
|
||||
&:hover {
|
||||
background: rgba(51, 112, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,72 +1,161 @@
|
||||
<template>
|
||||
<el-row style="display: flex;flex-direction: column;height: 100%">
|
||||
<el-row style="height: 26px;" class="title-text">
|
||||
<span style="line-height: 26px;">
|
||||
{{ $t('datasource.add_api_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row>
|
||||
<el-form :inline="true">
|
||||
<el-form-item class="form-item">
|
||||
<el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-select v-model="mode" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
|
||||
<el-option :label="$t('dataset.sync_data')" value="1" :disabled="!kettleRunning && engineMode!=='simple'" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="mode === '1'" class="form-item">
|
||||
<el-select v-model="syncType" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
|
||||
<el-option :label="$t('dataset.sync_now')" value="sync_now" />
|
||||
<el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" style="float: right;">
|
||||
<div class="dataset-api">
|
||||
<p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
|
||||
<i class="el-icon-d-arrow-right"></i>
|
||||
</p>
|
||||
<div class="table-list" v-else>
|
||||
<p class="select-ds">
|
||||
{{ $t('deDataset.select_data_source') }}
|
||||
<i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
|
||||
</p>
|
||||
<el-select
|
||||
class="ds-list"
|
||||
v-model="dataSource"
|
||||
filterable
|
||||
:placeholder="$t('dataset.pls_slc_data_source')"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<p class="select-ds">{{ $t('datasource.data_table') }}</p>
|
||||
<el-input
|
||||
v-model="searchTable"
|
||||
size="small"
|
||||
class="search"
|
||||
:placeholder="$t('deDataset.by_table_name')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
<div class="table-checkbox-list">
|
||||
<!-- <div class="item" v-for="(ele, index) in tableData"> -->
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-tooltip
|
||||
:disabled="t.enableCheck"
|
||||
effect="dark"
|
||||
v-for="t in tableData"
|
||||
:key="t.name"
|
||||
:content="$t('dataset.table_already_add_to') + ': ' + t.datasetPath"
|
||||
placement="right"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
{ active: activeName === t.name, 'not-allow': !t.enableCheck }
|
||||
]"
|
||||
class="item"
|
||||
@click="setActiveName(t)"
|
||||
>
|
||||
<el-checkbox :label="t.name" :disabled="!t.enableCheck">
|
||||
</el-checkbox>
|
||||
<span class="label">{{ showTableNameWithComment(t) }}</span>
|
||||
<span class="error-name-exsit" v-if="t.nameExsit">
|
||||
<svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
|
||||
</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-checkbox-group>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-detail">
|
||||
<div class="top-table-detail">
|
||||
<el-select
|
||||
v-model="mode"
|
||||
filterable
|
||||
:placeholder="$t('dataset.connect_mode')"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dataset.sync_data')"
|
||||
value="1"
|
||||
:disabled="!kettleRunning && engineMode !== 'simple'"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="syncType"
|
||||
filterable
|
||||
:placeholder="$t('dataset.connect_mode')"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('dataset.sync_now')" value="sync_now" />
|
||||
<el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-empty
|
||||
style="padding-top: 160px"
|
||||
size="125"
|
||||
v-if="!dataSource"
|
||||
:description="$t('dataset.pls_slc_data_source')"
|
||||
:image="noSelectTable"
|
||||
></el-empty>
|
||||
<template v-else-if="activeName">
|
||||
<div class="dataset">
|
||||
<span class="name">{{ $t('dataset.name') }}</span>
|
||||
<el-input
|
||||
v-model="searchTable"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
@change="validateName"
|
||||
v-if="activeIndex !== -1"
|
||||
v-model="tableData[activeIndex].datasetName"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-col style="overflow-y: auto;">
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-tooltip v-for="t in tableData" :key="t.name" :disabled="t.enableCheck" effect="dark" :content="$t('dataset.table_already_add_to')+': '+t.datasetPath" placement="bottom">
|
||||
<el-checkbox
|
||||
border
|
||||
:label="t.name"
|
||||
:disabled="!t.enableCheck"
|
||||
>{{ showTableNameWithComment(t) }}</el-checkbox>
|
||||
</el-tooltip>
|
||||
</el-checkbox-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div
|
||||
v-if="tableData[activeIndex].nameExsit"
|
||||
style="left: 107px; top: 52px"
|
||||
class="el-form-item__error"
|
||||
>
|
||||
{{ $t('deDataset.already_exists') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data" v-loading="tableLoading">
|
||||
<span class="result-num">{{
|
||||
`${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
|
||||
}}</span>
|
||||
<div class="table-grid">
|
||||
<ux-grid
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty
|
||||
style="padding-top: 160px"
|
||||
size="125"
|
||||
v-else-if="avilibelTable"
|
||||
:description="$t('deDataset.is_currently_available')"
|
||||
:image="noAvilibelTableImg"
|
||||
></el-empty>
|
||||
<el-empty
|
||||
style="padding-top: 160px"
|
||||
size="125"
|
||||
v-else-if="!activeName"
|
||||
:description="$t('deDataset.left_to_edit')"
|
||||
:image="noSelectTable"
|
||||
></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
|
||||
import {engineMode} from "@/api/system/engine";
|
||||
import { engineMode } from '@/api/system/engine'
|
||||
|
||||
export default {
|
||||
name: 'AddApi',
|
||||
@ -78,6 +167,12 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showLeft: true,
|
||||
tableLoading: false,
|
||||
loading: false,
|
||||
height: 400,
|
||||
fields: [],
|
||||
fieldsData: [],
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
@ -88,15 +183,40 @@ export default {
|
||||
tableData: [],
|
||||
kettleRunning: false,
|
||||
engineMode: 'local',
|
||||
selectedDatasource: {}
|
||||
selectedDatasource: {},
|
||||
disabledSync: true,
|
||||
avilibelTable: false,
|
||||
noAvilibelTableImg: require('@/assets/None.png'),
|
||||
noSelectTable: require('@/assets/None_Select_ds.png'),
|
||||
activeName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeIndex() {
|
||||
return this.tableData.findIndex((ele) => ele.name === this.activeName)
|
||||
},
|
||||
checkDatasetName() {
|
||||
return this.tableData
|
||||
.filter((ele, index) => {
|
||||
return this.checkTableList.includes(ele.name)
|
||||
})
|
||||
.map((ele) => ele.datasetName)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSource(val) {
|
||||
if (val) {
|
||||
post('/datasource/getTables/' + val, {}).then(response => {
|
||||
this.checkTableList = []
|
||||
this.activeName = ''
|
||||
const dsName = this.options.find((ele) => ele.id === val).name
|
||||
post('/datasource/getTables/' + val, {}).then((response) => {
|
||||
this.tables = response.data
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
this.tableData.forEach((ele) => {
|
||||
this.$set(ele, 'datasetName', dsName + '_' + ele.name)
|
||||
this.$set(ele, 'nameExsit', false)
|
||||
})
|
||||
this.avilibelTable = !this.tableData.some((ele) => ele.enableCheck)
|
||||
})
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
if (this.options[i].id === val) {
|
||||
@ -107,7 +227,15 @@ export default {
|
||||
},
|
||||
searchTable(val) {
|
||||
if (val && val !== '') {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
|
||||
this.tableData = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.tables.filter((ele) => {
|
||||
return ele.name
|
||||
.toLocaleLowerCase()
|
||||
.includes(val.toLocaleLowerCase())
|
||||
})
|
||||
)
|
||||
)
|
||||
} else {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
}
|
||||
@ -115,24 +243,78 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.initDataSource()
|
||||
window.onresize = () => {
|
||||
this.calHeight()
|
||||
}
|
||||
this.calHeight()
|
||||
},
|
||||
activated() {
|
||||
this.initDataSource()
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
engineMode().then(res => {
|
||||
engineMode().then((res) => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
},
|
||||
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)
|
||||
.filter((name) => name === this.tableData[activeIndex].datasetName)
|
||||
.length > 1
|
||||
},
|
||||
validateName() {
|
||||
this.tableData.forEach((ele, index) => {
|
||||
if (this.checkDatasetName.includes(ele.datasetName)) {
|
||||
this.nameExsitValidator(index)
|
||||
}
|
||||
})
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 195 - 54
|
||||
}, 10)
|
||||
},
|
||||
setActiveName({ name, datasourceId, enableCheck }) {
|
||||
if (!enableCheck) return
|
||||
this.activeName = name
|
||||
this.dbPreview({
|
||||
dataSourceId: datasourceId,
|
||||
info: JSON.stringify({ table: name })
|
||||
})
|
||||
},
|
||||
dbPreview(data) {
|
||||
this.tableLoading = true
|
||||
dbPreview(data)
|
||||
.then((res) => {
|
||||
const { fields, data } = res.data
|
||||
this.fields = fields
|
||||
this.fieldsData = data
|
||||
this.$refs.plxTable.reloadData(data)
|
||||
})
|
||||
.finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
initDataSource() {
|
||||
listApiDatasource().then(response => {
|
||||
listApiDatasource().then((response) => {
|
||||
this.options = response.data
|
||||
})
|
||||
},
|
||||
kettleState() {
|
||||
isKettleRunning().then(res => {
|
||||
isKettleRunning().then((res) => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
},
|
||||
@ -144,20 +326,22 @@ export default {
|
||||
}
|
||||
},
|
||||
save() {
|
||||
let ds = {}
|
||||
this.options.forEach(ele => {
|
||||
if (ele.id === this.dataSource) {
|
||||
ds = ele
|
||||
}
|
||||
})
|
||||
if (this.tableData.some((ele) => ele.nameExsit)) {
|
||||
this.openMessageSuccess('deDataset.cannot_be_duplicate', 'error')
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
const mode = this.mode
|
||||
const syncType = this.syncType
|
||||
this.checkTableList.forEach(function(name) {
|
||||
this.checkTableList.forEach(function (name) {
|
||||
const datasetName = this.tableData.find(
|
||||
(ele) => ele.name === name
|
||||
).datasetName
|
||||
tables.push({
|
||||
name: ds.name + '_' + name,
|
||||
name: datasetName,
|
||||
sceneId: sceneId,
|
||||
dataSourceId: dataSourceId,
|
||||
type: 'api',
|
||||
@ -166,15 +350,18 @@ export default {
|
||||
info: JSON.stringify({ table: name })
|
||||
})
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$emit('saveSuccess', tables[0])
|
||||
this.cancel()
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables)
|
||||
.then((response) => {
|
||||
this.openMessageSuccess('deDataset.set_saved_successfully')
|
||||
this.cancel()
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
this.$router.back()
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
@ -185,30 +372,186 @@ export default {
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
<style scoped lang="scss">
|
||||
.dataset-api {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-top-right-radius: 13px;
|
||||
border-bottom-right-radius: 13px;
|
||||
}
|
||||
.table-list {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
padding: 16px 12px;
|
||||
font-family: PingFang SC;
|
||||
border-right: 1px solid rgba(31, 35, 41, 0.15);
|
||||
|
||||
.select-ds {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--deTextPlaceholder, #8f959e);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.ds-list {
|
||||
margin: 12px 0 24px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-checkbox-list {
|
||||
height: calc(100% - 190px);
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
height: 40px;
|
||||
width: 215px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--deWhiteHover, #3370ff);
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
|
||||
::v-deep.el-checkbox__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep.el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 85%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.error-name-exsit {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.not-allow {
|
||||
cursor: not-allowed;
|
||||
color: var(--deTextDisable, #bbbfc4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.table-detail {
|
||||
font-family: PingFang SC;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.top-table-detail {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
background: #f5f6f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-select {
|
||||
width: 120px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.dataset {
|
||||
padding: 21px 24px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
.el-input {
|
||||
width: 420px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
.data {
|
||||
padding: 16px 25px;
|
||||
overflow: auto;
|
||||
height: calc(100% - 140px);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.result-num {
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-family: PingFang SC;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-grid {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.db-select-pop {
|
||||
.selected::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
border: 2px solid #3370ff;
|
||||
border-top-color: rgba(0, 0, 0, 0);
|
||||
border-left-color: rgba(0, 0, 0, 0);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,87 +1,187 @@
|
||||
<template>
|
||||
<el-row style="display: flex;flex-direction: column;height: 100%">
|
||||
<el-row style="height: 26px;" class="title-text">
|
||||
<span style="line-height: 26px;">
|
||||
{{ $t('dataset.add_db_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-form :inline="true">
|
||||
<el-form-item class="form-item">
|
||||
<el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-select v-model="mode" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
|
||||
<el-option :label="$t('dataset.direct_connect')" value="0"/>
|
||||
<el-option :label="$t('dataset.sync_data')" value="1"
|
||||
:disabled="disabledSync"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="mode === '1'" class="form-item">
|
||||
<el-select v-model="syncType" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
|
||||
<el-option :label="$t('dataset.sync_now')" value="sync_now"/>
|
||||
<el-option :label="$t('dataset.sync_latter')" value="sync_latter"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" style="float: right;">
|
||||
<div class="dataset-db" v-loading="loading">
|
||||
<p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
|
||||
<i class="el-icon-d-arrow-right"></i>
|
||||
</p>
|
||||
<div class="table-list" v-else>
|
||||
<p class="select-ds">
|
||||
{{ $t('deDataset.select_data_source') }}
|
||||
<i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
|
||||
</p>
|
||||
<el-select
|
||||
class="ds-list"
|
||||
v-model="dataSource"
|
||||
filterable
|
||||
popper-class="db-select-pop"
|
||||
:placeholder="$t('dataset.pls_slc_data_source')"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<p class="select-ds">{{ $t('datasource.data_table') }}</p>
|
||||
<el-input
|
||||
v-model="searchTable"
|
||||
size="small"
|
||||
class="search"
|
||||
:placeholder="$t('deDataset.by_table_name')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
<div class="table-checkbox-list">
|
||||
<!-- <div class="item" v-for="(ele, index) in tableData"> -->
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-tooltip
|
||||
:disabled="t.enableCheck"
|
||||
effect="dark"
|
||||
v-for="t in tableData"
|
||||
:key="t.name"
|
||||
:content="$t('dataset.table_already_add_to') + ': ' + t.datasetPath"
|
||||
placement="right"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
{ active: activeName === t.name, 'not-allow': !t.enableCheck }
|
||||
]"
|
||||
class="item"
|
||||
@click="setActiveName(t)"
|
||||
>
|
||||
<el-checkbox :label="t.name" :disabled="!t.enableCheck">
|
||||
</el-checkbox>
|
||||
<span class="label">{{ showTableNameWithComment(t) }}</span>
|
||||
<span class="error-name-exsit" v-if="t.nameExsit">
|
||||
<svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
|
||||
</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-checkbox-group>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-detail">
|
||||
<div class="top-table-detail">
|
||||
<el-select
|
||||
v-model="mode"
|
||||
filterable
|
||||
:placeholder="$t('dataset.connect_mode')"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('dataset.direct_connect')" value="0" />
|
||||
<el-option
|
||||
:label="$t('dataset.sync_data')"
|
||||
value="1"
|
||||
:disabled="disabledSync"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="mode === '1'"
|
||||
v-model="syncType"
|
||||
filterable
|
||||
:placeholder="$t('dataset.connect_mode')"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('dataset.sync_now')" value="sync_now" />
|
||||
<el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-empty
|
||||
style="padding-top: 160px"
|
||||
size="125"
|
||||
v-if="!dataSource"
|
||||
:description="$t('dataset.pls_slc_data_source')"
|
||||
:image="noSelectTable"
|
||||
></el-empty>
|
||||
<template v-else-if="activeName">
|
||||
<div class="dataset">
|
||||
<span class="name">{{ $t('dataset.name') }}</span>
|
||||
<el-input
|
||||
v-model="searchTable"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
@change="validateName"
|
||||
v-if="activeIndex !== -1"
|
||||
v-model="tableData[activeIndex].datasetName"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-col style="overflow-y: auto;">
|
||||
<el-checkbox-group v-model="checkTableList" size="small">
|
||||
<el-tooltip v-for="t in tableData" :key="t.name" :disabled="t.enableCheck" effect="dark"
|
||||
:content="$t('dataset.table_already_add_to')+': '+t.datasetPath" placement="bottom">
|
||||
<el-checkbox
|
||||
border
|
||||
:label="t.name"
|
||||
:disabled="!t.enableCheck"
|
||||
>{{ showTableNameWithComment(t) }}
|
||||
</el-checkbox>
|
||||
</el-tooltip>
|
||||
</el-checkbox-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div
|
||||
v-if="tableData[activeIndex].nameExsit"
|
||||
style="left: 107px; top: 52px"
|
||||
class="el-form-item__error"
|
||||
>
|
||||
{{ $t('deDataset.already_exists') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data" v-loading="tableLoading">
|
||||
<span class="result-num">{{
|
||||
`${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
|
||||
}}</span>
|
||||
<div class="table-grid">
|
||||
<ux-grid
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty
|
||||
style="padding-top: 160px"
|
||||
size="125"
|
||||
v-else-if="avilibelTable"
|
||||
:description="$t('deDataset.is_currently_available')"
|
||||
:image="noAvilibelTableImg"
|
||||
></el-empty>
|
||||
<el-empty
|
||||
style="padding-top: 160px"
|
||||
size="125"
|
||||
v-else-if="!activeName"
|
||||
:description="$t('deDataset.left_to_edit')"
|
||||
:image="noSelectTable"
|
||||
></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listDatasource, post, isKettleRunning} from '@/api/dataset/dataset'
|
||||
import {engineMode} from "@/api/system/engine";
|
||||
import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
|
||||
import { engineMode, dbPreview } from '@/api/system/engine'
|
||||
import msgCfm from '@/components/msgCfm/index'
|
||||
|
||||
export default {
|
||||
name: 'AddDB',
|
||||
mixins: [msgCfm],
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showLeft: true,
|
||||
tableLoading: false,
|
||||
loading: false,
|
||||
height: 400,
|
||||
fields: [],
|
||||
fieldsData: [],
|
||||
searchTable: '',
|
||||
options: [],
|
||||
dataSource: '',
|
||||
@ -93,22 +193,53 @@ export default {
|
||||
kettleRunning: false,
|
||||
selectedDatasource: {},
|
||||
engineMode: 'local',
|
||||
disabledSync: true
|
||||
disabledSync: true,
|
||||
avilibelTable: false,
|
||||
noAvilibelTableImg: require('@/assets/None.png'),
|
||||
noSelectTable: require('@/assets/None_Select_ds.png'),
|
||||
activeName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
activeIndex() {
|
||||
return this.tableData.findIndex((ele) => ele.name === this.activeName)
|
||||
},
|
||||
checkDatasetName() {
|
||||
return this.tableData
|
||||
.filter((ele, index) => {
|
||||
return this.checkTableList.includes(ele.name)
|
||||
})
|
||||
.map((ele) => ele.datasetName)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkTableList(val) {
|
||||
this.validateName()
|
||||
this.$emit('setTableNum', val.length)
|
||||
},
|
||||
dataSource(val) {
|
||||
if (val) {
|
||||
this.checkTableList = []
|
||||
post('/datasource/getTables/' + val, {}).then(response => {
|
||||
this.activeName = ''
|
||||
const dsName = this.options.find((ele) => ele.id === val).name
|
||||
post('/datasource/getTables/' + val, {}).then((response) => {
|
||||
this.tables = response.data
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
this.tableData.forEach((ele) => {
|
||||
this.$set(ele, 'datasetName', dsName + '_' + ele.name)
|
||||
this.$set(ele, 'nameExsit', false)
|
||||
})
|
||||
this.avilibelTable = !this.tableData.some((ele) => ele.enableCheck)
|
||||
})
|
||||
for (let i = 0; i < this.options.length; i++) {
|
||||
if (this.options[i].id === val) {
|
||||
this.selectedDatasource = this.options[i]
|
||||
this.mode = '0'
|
||||
if (this.engineMode === 'simple' || (!this.kettleRunning || this.selectedDatasource.calculationMode === 'DIRECT')) {
|
||||
if (
|
||||
this.engineMode === 'simple' ||
|
||||
!this.kettleRunning ||
|
||||
this.selectedDatasource.calculationMode === 'DIRECT'
|
||||
) {
|
||||
this.disabledSync = true
|
||||
} else {
|
||||
this.disabledSync = false
|
||||
@ -119,9 +250,15 @@ export default {
|
||||
},
|
||||
searchTable(val) {
|
||||
if (val && val !== '') {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => {
|
||||
return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase())
|
||||
})))
|
||||
this.tableData = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.tables.filter((ele) => {
|
||||
return ele.name
|
||||
.toLocaleLowerCase()
|
||||
.includes(val.toLocaleLowerCase())
|
||||
})
|
||||
)
|
||||
)
|
||||
} else {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
}
|
||||
@ -129,24 +266,78 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.initDataSource()
|
||||
window.onresize = () => {
|
||||
this.calHeight()
|
||||
}
|
||||
this.calHeight()
|
||||
},
|
||||
activated() {
|
||||
this.initDataSource()
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
engineMode().then(res => {
|
||||
engineMode().then((res) => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
},
|
||||
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)
|
||||
.filter((name) => name === this.tableData[activeIndex].datasetName)
|
||||
.length > 1
|
||||
},
|
||||
validateName() {
|
||||
this.tableData.forEach((ele, index) => {
|
||||
if (this.checkDatasetName.includes(ele.datasetName)) {
|
||||
this.nameExsitValidator(index)
|
||||
}
|
||||
})
|
||||
},
|
||||
dbPreview(data) {
|
||||
this.tableLoading = true
|
||||
dbPreview(data)
|
||||
.then((res) => {
|
||||
const { fields, data } = res.data
|
||||
this.fields = fields
|
||||
this.fieldsData = data
|
||||
this.$refs.plxTable.reloadData(data)
|
||||
})
|
||||
.finally(() => {
|
||||
this.tableLoading = false
|
||||
})
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 195 - 54
|
||||
}, 10)
|
||||
},
|
||||
setActiveName({ name, datasourceId, enableCheck }) {
|
||||
if (!enableCheck) return
|
||||
this.activeName = name
|
||||
this.dbPreview({
|
||||
dataSourceId: datasourceId,
|
||||
info: JSON.stringify({ table: name })
|
||||
})
|
||||
},
|
||||
initDataSource() {
|
||||
listDatasource().then(response => {
|
||||
this.options = response.data.filter(item => item.type !== 'api')
|
||||
listDatasource().then((response) => {
|
||||
this.options = response.data.filter((item) => item.type !== 'api')
|
||||
})
|
||||
},
|
||||
kettleState() {
|
||||
isKettleRunning().then(res => {
|
||||
isKettleRunning().then((res) => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
},
|
||||
@ -158,39 +349,43 @@ export default {
|
||||
}
|
||||
},
|
||||
save() {
|
||||
let ds = {}
|
||||
this.options.forEach(ele => {
|
||||
if (ele.id === this.dataSource) {
|
||||
ds = ele
|
||||
}
|
||||
})
|
||||
if (this.tableData.some((ele) => ele.nameExsit)) {
|
||||
this.openMessageSuccess('deDataset.cannot_be_duplicate', 'error')
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
const mode = this.mode
|
||||
const syncType = this.syncType
|
||||
this.checkTableList.forEach(function (name) {
|
||||
this.checkTableList.forEach((name) => {
|
||||
const datasetName = this.tableData.find(
|
||||
(ele) => ele.name === name
|
||||
).datasetName
|
||||
tables.push({
|
||||
name: ds.name + '_' + name,
|
||||
name: datasetName,
|
||||
sceneId: sceneId,
|
||||
dataSourceId: dataSourceId,
|
||||
type: 'db',
|
||||
syncType: syncType,
|
||||
mode: parseInt(mode),
|
||||
info: JSON.stringify({table: name})
|
||||
info: JSON.stringify({ table: name })
|
||||
})
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$emit('saveSuccess', tables[0])
|
||||
this.cancel()
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables)
|
||||
.then((response) => {
|
||||
this.openMessageSuccess('deDataset.set_saved_successfully')
|
||||
this.cancel()
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
this.$emit('switchComponent', {name: ''})
|
||||
this.$router.back()
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
this.searchTable = ''
|
||||
this.options = []
|
||||
@ -199,30 +394,186 @@ export default {
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
.dataset-db {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-top-right-radius: 13px;
|
||||
border-bottom-right-radius: 13px;
|
||||
}
|
||||
.table-list {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
padding: 16px 12px;
|
||||
font-family: PingFang SC;
|
||||
border-right: 1px solid rgba(31, 35, 41, 0.15);
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.select-ds {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--deTextPlaceholder, #8f959e);
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
.search {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.ds-list {
|
||||
margin: 12px 0 24px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
.table-checkbox-list {
|
||||
height: calc(100% - 190px);
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
height: 40px;
|
||||
width: 215px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--deWhiteHover, #3370ff);
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
|
||||
::v-deep.el-checkbox__label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::v-deep.el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 85%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.error-name-exsit {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.not-allow {
|
||||
cursor: not-allowed;
|
||||
color: var(--deTextDisable, #bbbfc4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-detail {
|
||||
font-family: PingFang SC;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.top-table-detail {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
background: #f5f6f7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-select {
|
||||
width: 120px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.dataset {
|
||||
padding: 21px 24px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 420px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.data {
|
||||
padding: 16px 25px;
|
||||
overflow: auto;
|
||||
height: calc(100% - 140px);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.result-num {
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-family: PingFang SC;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-grid {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.db-select-pop {
|
||||
.selected::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
border: 2px solid #3370ff;
|
||||
border-top-color: rgba(0, 0, 0, 0);
|
||||
border-left-color: rgba(0, 0, 0, 0);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,157 +1,188 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;" class="title-text">
|
||||
<span style="line-height: 26px;">
|
||||
{{ param.tableId?$t('dataset.edit_excel_table'):$t('dataset.add_excel_table') }}
|
||||
</span>
|
||||
<span style="line-height: 26px;">
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="bottom">
|
||||
<div slot="content">
|
||||
{{ $t('dataset.excel_info_1') }}<br>
|
||||
{{ $t('dataset.excel_info_2') }}<br>
|
||||
{{ $t('dataset.excel_info_3') }}
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
<div class="dataset-excel">
|
||||
<!-- <el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
</el-button> -->
|
||||
<p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
|
||||
<i class="el-icon-d-arrow-right"></i>
|
||||
</p>
|
||||
<div class="table-list" v-else>
|
||||
<p class="select-ds">
|
||||
<span
|
||||
>{{ $t('deDataset.select_data_table ') }}
|
||||
<el-tooltip class="item" effect="dark" placement="right">
|
||||
<div slot="content">
|
||||
{{ $t('dataset.excel_info_1') }}<br />
|
||||
{{ $t('dataset.excel_info_2') }}<br />
|
||||
{{ $t('dataset.excel_info_3') }}
|
||||
</div>
|
||||
<i class="el-icon-warning-outline"></i> </el-tooltip
|
||||
></span>
|
||||
<i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
|
||||
</p>
|
||||
<el-upload
|
||||
:action="baseUrl + 'dataset/table/excel/upload'"
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
:file-list="fileList"
|
||||
:data="param"
|
||||
accept=".xls,.xlsx,"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadFail"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
>
|
||||
<deBtn
|
||||
class="search"
|
||||
icon="el-icon-upload2"
|
||||
:loading="uploading"
|
||||
secondary
|
||||
:disabled="uploading"
|
||||
>{{ $t('deDataset.upload_data') }}
|
||||
</deBtn>
|
||||
</el-upload>
|
||||
<div class="table-checkbox-list">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
class="de-tree"
|
||||
:data="excelData"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
node-key="id"
|
||||
:props="props"
|
||||
show-checkbox
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-detail">
|
||||
<el-empty
|
||||
style="padding-top: 172px"
|
||||
:image-size="125"
|
||||
v-if="!excelData.length"
|
||||
:image="errImg"
|
||||
:description="$t('deDataset.excel_data_first')"
|
||||
></el-empty>
|
||||
<template v-else>
|
||||
<div class="dataset">
|
||||
<span class="name">{{ $t('dataset.name') }}</span>
|
||||
<el-input
|
||||
v-model="sheetObj.datasetName"
|
||||
:placeholder="$t('commons.name')"
|
||||
@change="changeDatasetName"
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="result-num">
|
||||
{{
|
||||
`${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
|
||||
}}
|
||||
</div>
|
||||
|
||||
<el-row style="margin-top: 10px;">
|
||||
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<el-row>
|
||||
<el-col style="width: 200px;">
|
||||
<el-form :inline="true" size="mini" class="row-style">
|
||||
<el-form-item class="form-item">
|
||||
<el-upload
|
||||
:action="baseUrl+'dataset/table/excel/upload'"
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
:file-list="fileList"
|
||||
:data="param"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadFail"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
>
|
||||
<el-button size="mini" type="primary" :disabled="uploading">
|
||||
<span v-if="!uploading" style="font-size: 12px;">{{ $t('dataset.upload_file') }}</span>
|
||||
<span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="excelData"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
:default-checked-keys="defaultCheckedKeys"
|
||||
node-key="id"
|
||||
:props="props"
|
||||
show-checkbox
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
|
||||
</el-aside>
|
||||
|
||||
<el-container>
|
||||
<el-header style="text-align: left;" height="30px">
|
||||
<el-row>
|
||||
<el-col style="width: 500px;">
|
||||
<el-form :inline="true" size="mini" class="row-style">
|
||||
<el-form-item v-show="!param.tableId" class="form-item" :label="$t('dataset.name')">
|
||||
<el-input v-model="sheetObj.datasetName" :placeholder="$t('commons.name')" @change="changeDatasetName" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div>
|
||||
<span>{{ $t('dataset.data_preview') }}</span>
|
||||
<span class="limit-length-data">（{{ $t('dataset.preview_100_data') }}）</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-main>
|
||||
|
||||
<div class="text item">
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:width-resize="true"
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
:height="height"
|
||||
:checkbox-config="{ highlight: true }"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in sheetObj.fields"
|
||||
:key="field.fieldName + field.fieldType"
|
||||
min-width="200px"
|
||||
:field="field.fieldName"
|
||||
:title="field.remarks"
|
||||
:resizable="true"
|
||||
>
|
||||
<template slot="header">
|
||||
<el-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
@command="(type) => handleCommand(type, field)"
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in sheetObj.fields"
|
||||
:key="field.fieldName"
|
||||
min-width="200px"
|
||||
:field="field.fieldName"
|
||||
:title="field.remarks"
|
||||
:resizable="true"
|
||||
<span class="type-switch">
|
||||
<svg-icon
|
||||
v-if="field.fieldType === 'TEXT'"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text" />
|
||||
<svg-icon
|
||||
v-if="field.fieldType === 'DATETIME'"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="
|
||||
field.fieldType === 'LONG' ||
|
||||
field.fieldType === 'DOUBLE'
|
||||
"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value" />
|
||||
<i class="el-icon-arrow-down el-icon--right"></i
|
||||
></span>
|
||||
<el-dropdown-menu
|
||||
style="width: 178px"
|
||||
class="de-card-dropdown"
|
||||
slot="dropdown"
|
||||
>
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span style="display: flex;align-items: center;">
|
||||
<span style="display: inline-block;font-size: 12px;">
|
||||
<div style="display: inline-block;">
|
||||
<el-select v-model="field.fieldType" size="mini" style="display: inline-block;width: 120px;" @change="changeDatasetName">
|
||||
<el-option
|
||||
v-for="item in fieldOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.value === 'TEXT'" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.value === 'DATETIME'" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.value === 'LONG' || item.value === 'DOUBLE'" icon-class="field_value" class="field-icon-value" />
|
||||
</span>
|
||||
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</span>
|
||||
<span style="font-size: 12px;margin-left: 10px;">
|
||||
{{ field.remarks }}
|
||||
</span>
|
||||
<el-dropdown-item
|
||||
v-for="item in fieldOptions"
|
||||
:key="item.value"
|
||||
:command="item.value"
|
||||
><span>
|
||||
<svg-icon
|
||||
v-if="item.value === 'TEXT'"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.value === 'DATETIME'"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="
|
||||
item.value === 'LONG' || item.value === 'DOUBLE'
|
||||
"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<span
|
||||
style="
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
"
|
||||
>{{ item.label }}</span
|
||||
></el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span style="font-size: 14px; margin-left: 10px">
|
||||
{{ field.remarks }}
|
||||
</span>
|
||||
</template>
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import i18n from '@/lang'
|
||||
import {$alert, $confirm} from "@/utils/message";
|
||||
import store from "@/store";
|
||||
import { $alert, $confirm } from '@/utils/message'
|
||||
import store from '@/store'
|
||||
|
||||
const token = getToken()
|
||||
|
||||
@ -173,13 +204,18 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showLeft: true,
|
||||
errImg: require('@/assets/None_Select_ds.png'),
|
||||
sheetObj: { datasetName: ' ', fields: [] },
|
||||
sheets: [],
|
||||
data: [],
|
||||
mode: '1',
|
||||
height: 600,
|
||||
fileList: [],
|
||||
headers: { Authorization: token, 'Accept-Language': i18n.locale.replace('_', '-') },
|
||||
headers: {
|
||||
Authorization: token,
|
||||
'Accept-Language': i18n.locale.replace('_', '-')
|
||||
},
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
path: '',
|
||||
uploading: false,
|
||||
@ -187,7 +223,11 @@ export default {
|
||||
{ label: this.$t('dataset.text'), value: 'TEXT' },
|
||||
{ label: this.$t('dataset.time'), value: 'DATETIME' },
|
||||
{ label: this.$t('dataset.value'), value: 'LONG' },
|
||||
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 'DOUBLE' }
|
||||
{
|
||||
label:
|
||||
this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
|
||||
value: 'DOUBLE'
|
||||
}
|
||||
],
|
||||
props: {
|
||||
label: 'excelLable',
|
||||
@ -200,6 +240,13 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
defaultCheckedKeys(val) {
|
||||
const excelNum = this.excelData.map((ele) => ele.id)
|
||||
this.$emit(
|
||||
'setTableNum',
|
||||
val.filter((ele) => !excelNum.includes(ele)).length
|
||||
)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
@ -221,13 +268,14 @@ export default {
|
||||
this.defaultCheckedKeys.push(data.id)
|
||||
this.handleNodeClick(data)
|
||||
} else {
|
||||
var index = this.defaultCheckedKeys.findIndex(id => {
|
||||
var index = this.defaultCheckedKeys.findIndex((id) => {
|
||||
if (id == data.id) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
this.defaultCheckedKeys.splice(index, 1)
|
||||
}
|
||||
this.$emit('setTableNum', this.defaultCheckedKeys.length)
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.sheet) {
|
||||
@ -238,6 +286,10 @@ export default {
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
}
|
||||
},
|
||||
handleCommand(type, field) {
|
||||
field.fieldType = type
|
||||
this.changeDatasetName()
|
||||
},
|
||||
changeDatasetName() {
|
||||
for (var i = 0; i < this.excelData.length; i++) {
|
||||
if (this.excelData[i].excelId == this.sheetObj.sheetExcelId) {
|
||||
@ -251,7 +303,7 @@ export default {
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10
|
||||
}, 10)
|
||||
@ -263,20 +315,25 @@ export default {
|
||||
let myError = response.toString()
|
||||
myError = myError.replace('Error: ', '')
|
||||
|
||||
if(myError.indexOf('AuthenticationException') >= 0){
|
||||
if (myError.indexOf('AuthenticationException') >= 0) {
|
||||
const message = i18n.t('login.tokenError')
|
||||
$alert(message, () => {
|
||||
store.dispatch('user/logout').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
}, {
|
||||
confirmButtonText: i18n.t('login.re_login'),
|
||||
showClose: false
|
||||
})
|
||||
$alert(
|
||||
message,
|
||||
() => {
|
||||
store.dispatch('user/logout').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
},
|
||||
{
|
||||
confirmButtonText: i18n.t('login.re_login'),
|
||||
showClose: false
|
||||
}
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
const errorMessage = JSON.parse(myError).message + ', ' + this.$t('dataset.parse_error')
|
||||
const errorMessage =
|
||||
JSON.parse(myError).message + ', ' + this.$t('dataset.parse_error')
|
||||
|
||||
this.path = ''
|
||||
this.fields = []
|
||||
@ -330,10 +387,10 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
if(selectNode[i].effectExtField){
|
||||
if (selectNode[i].effectExtField) {
|
||||
effectExtField = true
|
||||
}
|
||||
if(selectNode[i].changeFiled){
|
||||
if (selectNode[i].changeFiled) {
|
||||
changeFiled = true
|
||||
}
|
||||
selectedSheet.push(selectNode[i])
|
||||
@ -378,35 +435,44 @@ export default {
|
||||
$confirm(msg, () => {
|
||||
this.saveExcelData(sheetFileMd5, table)
|
||||
})
|
||||
}else {
|
||||
} else {
|
||||
this.saveExcelData(sheetFileMd5, table)
|
||||
}
|
||||
},
|
||||
saveExcelData(sheetFileMd5, table) {
|
||||
if (new Set(sheetFileMd5).size !== sheetFileMd5.length && !this.param.tableId) {
|
||||
this.$confirm(this.$t('dataset.excel_replace_msg'), this.$t('dataset.merge_title'), {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: this.$t('dataset.merge'),
|
||||
cancelButtonText: this.$t('dataset.no_merge'),
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
table.mergeSheet = true
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
}).catch(action => {
|
||||
if (action === 'close') {
|
||||
return
|
||||
if (
|
||||
new Set(sheetFileMd5).size !== sheetFileMd5.length &&
|
||||
!this.param.tableId
|
||||
) {
|
||||
this.$confirm(
|
||||
this.$t('dataset.excel_replace_msg'),
|
||||
this.$t('dataset.merge_title'),
|
||||
{
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: this.$t('dataset.merge'),
|
||||
cancelButtonText: this.$t('dataset.no_merge'),
|
||||
type: 'info'
|
||||
}
|
||||
table.mergeSheet = false
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
)
|
||||
.then(() => {
|
||||
table.mergeSheet = true
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
})
|
||||
.catch((action) => {
|
||||
if (action === 'close') {
|
||||
return
|
||||
}
|
||||
table.mergeSheet = false
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
@ -415,7 +481,10 @@ export default {
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
if (this.param.tableId) {
|
||||
this.$emit('switchComponent', { name: 'ViewTable', param: this.param.table })
|
||||
this.$emit('switchComponent', {
|
||||
name: 'ViewTable',
|
||||
param: this.param.table
|
||||
})
|
||||
} else {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
}
|
||||
@ -429,57 +498,146 @@ export default {
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.el-header {
|
||||
background-color: var(--ContentBG, rgb(241, 243, 248));
|
||||
color: var(--TextActive, #333);
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row-style ::v-deep .el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dataPreview ::v-deep .el-card__header{
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.dataPreview ::v-deep .el-card__body{
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: var(--ContentBG, rgb(241, 243, 248));
|
||||
color: var(--TextActive, #333);
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
padding: 0px
|
||||
}
|
||||
|
||||
.limit-length-data {
|
||||
font-size: 12px;
|
||||
color: var(--TableColor, #3d4d66);
|
||||
}
|
||||
.limit-length-data {
|
||||
font-size: 12px;
|
||||
color: var(--TableColor, #3d4d66);
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.dataset-excel {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.arrow-right {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
height: 24px;
|
||||
width: 20px;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-top-right-radius: 13px;
|
||||
border-bottom-right-radius: 13px;
|
||||
}
|
||||
.table-list {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
padding: 16px 12px;
|
||||
font-family: PingFang SC;
|
||||
border-right: 1px solid rgba(31, 35, 41, 0.15);
|
||||
|
||||
.select-ds {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: var(--deTextPlaceholder, #8f959e);
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.table-checkbox-list {
|
||||
height: calc(100% - 100px);
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
height: 40px;
|
||||
width: 215px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--deWhiteHover, #3370ff);
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-detail {
|
||||
font-family: PingFang SC;
|
||||
flex: 1;
|
||||
|
||||
.dataset {
|
||||
padding: 21px 24px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 420px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.data {
|
||||
padding: 16px 24px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 80px);
|
||||
overflow-y: auto;
|
||||
|
||||
.result-num {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.type-switch {
|
||||
padding: 2px 1.5px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
i {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,187 +1,274 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;" class="title-text">
|
||||
<span style="line-height: 26px;">
|
||||
{{ param.tableId ? $t('dataset.edit_sql') : $t('dataset.add_sql_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
<div class="dataset-sql" @mouseup="mouseupDrag">
|
||||
<!-- <el-input v-model="name" size="mini" :placeholder="$t('commons.name')"/> -->
|
||||
|
||||
<!-- <el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button size="mini" type="primary" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button> -->
|
||||
|
||||
<div class="sql-editer" :style="{ height: sqlHeight + 'px' }">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-select
|
||||
v-model="dataSource"
|
||||
filterable
|
||||
style="width: 215px"
|
||||
:placeholder="$t('dataset.pls_slc_data_source')"
|
||||
size="small"
|
||||
@change="changeDatasource()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="!param.tableId"
|
||||
v-model="mode"
|
||||
style="width: 120px; margin: 0 12px"
|
||||
filterable
|
||||
:placeholder="$t('dataset.connect_mode')"
|
||||
size="small"
|
||||
>
|
||||
<el-option :label="$t('dataset.direct_connect')" value="0" />
|
||||
<el-option
|
||||
:label="$t('dataset.sync_data')"
|
||||
value="1"
|
||||
:disabled="disabledSync"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="mode === '1'"
|
||||
v-model="syncType"
|
||||
style="width: 120px"
|
||||
filterable
|
||||
:placeholder="$t('dataset.connect_mode')"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dataset.sync_now')"
|
||||
value="sync_now"
|
||||
:disabled="engineMode === 'simple'"
|
||||
/>
|
||||
<el-option :label="$t('dataset.sync_latter')" value="sync_latter" />
|
||||
</el-select>
|
||||
</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"
|
||||
>
|
||||
{{ $t('sql_variable.variable_mgm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-button
|
||||
icon="el-icon-video-play"
|
||||
class="de-text-btn"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="getSQLPreview"
|
||||
>
|
||||
{{ $t('deDataset.run_a_query') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-form :inline="true">
|
||||
<el-form-item class="form-item">
|
||||
<el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini"
|
||||
@change="changeDatasource()">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-input v-model="name" size="mini" :placeholder="$t('commons.name')"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!param.tableId" class="form-item">
|
||||
<el-select v-model="mode" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
|
||||
<el-option :label="$t('dataset.direct_connect')" value="0"/>
|
||||
<el-option :label="$t('dataset.sync_data')" value="1"
|
||||
:disabled="disabledSync"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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>
|
||||
|
||||
<el-form-item v-if="mode === '1'" class="form-item">
|
||||
<el-select v-model="syncType" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
|
||||
<el-option :label="$t('dataset.sync_now')" value="sync_now" :disabled="engineMode === 'simple'"/>
|
||||
<el-option :label="$t('dataset.sync_latter')" value="sync_latter"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-row style="float: right">
|
||||
<el-button v-if="mode === '0'" type="text" size="mini" @click="variableMgm">
|
||||
{{ $t('sql_variable.variable_mgm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col style="min-width: 200px;">
|
||||
<codemirror
|
||||
ref="myCm"
|
||||
v-model="sql"
|
||||
class="codemirror"
|
||||
:options="sqlOption"
|
||||
@ready="onCmReady"
|
||||
@focus="onCmFocus"
|
||||
@input="onCmCodeChange"
|
||||
<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"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 10px;">
|
||||
<el-card class="box-card dataPreview" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>{{ $t('dataset.data_preview') }}</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" size="mini" @click="getSQLPreview">
|
||||
{{ $t('dataset.preview') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="text item">
|
||||
<ux-grid
|
||||
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-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"
|
||||
/>
|
||||
</ux-grid>
|
||||
</div>
|
||||
<span class="table-count">
|
||||
{{ $t('dataset.preview_show') }}
|
||||
<span class="span-number">1000</span>
|
||||
{{ $t('dataset.preview_item') }}
|
||||
</span>
|
||||
</el-card>
|
||||
</el-row>
|
||||
|
||||
<el-dialog :title="dialogTitle" :visible="showVariableMgm" :before-close="closeVariableMgm" width="60%"
|
||||
class="dialog-css" append-to-body>
|
||||
<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>
|
||||
|
||||
<div slot="title" class="header-title">
|
||||
<span>{{dialogTitle}}</span>
|
||||
<span>
|
||||
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="bottom">
|
||||
<div slot="content">
|
||||
{{ $t('dataset.sql_variable_limit_1') }}<br>
|
||||
{{ $t('dataset.sql_variable_limit_2') }}<br>
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<el-table :data="variablesTmp" style="width: 80%">
|
||||
<el-table-column prop="variableName" :label="$t('commons.name')" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.type')" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-cascader v-model="scope.row.type" size="mini" style="display: inline-block;width: 120px;" :options="fieldOptions" @change="variableTypeChange(scope.row)">
|
||||
</el-cascader>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="defaultValue" :label="$t('commons.params_value')" :render-header="renderPrice">
|
||||
<template slot-scope="scope">
|
||||
<el-input size="mini" v-if="scope.row.type[0] === 'TEXT'" type="text" v-model="scope.row.defaultValue" />
|
||||
<el-input size="mini" v-if="scope.row.type[0] === 'LONG' || scope.row.type[0] === 'DOUBLE'" 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"
|
||||
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"
|
||||
: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-MONTH-DAY'"
|
||||
v-model="scope.row.defaultValue"
|
||||
type="date"
|
||||
: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"
|
||||
: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 slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeVariableMgm">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveVariable()">{{ $t('dataset.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</el-row>
|
||||
</el-col>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {post, listDatasource, isKettleRunning} from '@/api/dataset/dataset'
|
||||
import {codemirror} from 'vue-codemirror'
|
||||
import {getTable} from '@/api/dataset/dataset'
|
||||
import {Base64} from 'js-base64'
|
||||
import { post, listDatasource, isKettleRunning } from '@/api/dataset/dataset'
|
||||
import { codemirror } from 'vue-codemirror'
|
||||
import { getTable } from '@/api/dataset/dataset'
|
||||
import { Base64 } from 'js-base64'
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效
|
||||
@ -204,22 +291,22 @@ import 'codemirror/keymap/emacs.js'
|
||||
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 { engineMode } from '@/api/system/engine'
|
||||
|
||||
export default {
|
||||
name: 'AddSQL',
|
||||
components: {codemirror},
|
||||
components: { codemirror },
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
required: true
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataSource: '',
|
||||
errMsg: false,
|
||||
options: [],
|
||||
name: '',
|
||||
sql: '',
|
||||
sqlOption: {
|
||||
tabSize: 2,
|
||||
@ -228,11 +315,14 @@ export default {
|
||||
line: true,
|
||||
mode: 'text/x-sql',
|
||||
theme: 'solarized',
|
||||
hintOptions: { // 自定义提示选项
|
||||
hintOptions: {
|
||||
// 自定义提示选项
|
||||
completeSingle: false // 当匹配只有一项的时候是否自动补全
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
errImg: require('@/assets/error.png'),
|
||||
sqlHeight: 330,
|
||||
fields: [],
|
||||
mode: '0',
|
||||
syncType: 'sync_now',
|
||||
@ -248,37 +338,55 @@ export default {
|
||||
fieldOptions: [
|
||||
{ label: this.$t('dataset.text'), value: 'TEXT' },
|
||||
{ label: this.$t('dataset.value'), value: 'LONG' },
|
||||
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 'DOUBLE' },
|
||||
{
|
||||
label:
|
||||
this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
|
||||
value: 'DOUBLE'
|
||||
},
|
||||
{ label: this.$t('dataset.time_year'), value: 'DATETIME-YEAR' },
|
||||
{ label: this.$t('dataset.time_year_month'), value: 'DATETIME-YEAR-MONTH',
|
||||
children: [{
|
||||
value: 'yyyy-MM',
|
||||
label: 'YYYY-MM'
|
||||
}, {
|
||||
value: 'yyyy/MM',
|
||||
label: 'YYYY/MM'
|
||||
}]
|
||||
{
|
||||
label: this.$t('dataset.time_year_month'),
|
||||
value: 'DATETIME-YEAR-MONTH',
|
||||
children: [
|
||||
{
|
||||
value: 'yyyy-MM',
|
||||
label: 'YYYY-MM'
|
||||
},
|
||||
{
|
||||
value: 'yyyy/MM',
|
||||
label: 'YYYY/MM'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ label: this.$t('dataset.time_year_month_day'), value: 'DATETIME-YEAR-MONTH-DAY',
|
||||
children: [{
|
||||
value: 'yyyy-MM-dd',
|
||||
label: 'YYYY-MM-DD'
|
||||
}, {
|
||||
value: 'yyyy/MM/dd',
|
||||
label: 'YYYY/MM/DD'
|
||||
}]
|
||||
{
|
||||
label: this.$t('dataset.time_year_month_day'),
|
||||
value: 'DATETIME-YEAR-MONTH-DAY',
|
||||
children: [
|
||||
{
|
||||
value: 'yyyy-MM-dd',
|
||||
label: 'YYYY-MM-DD'
|
||||
},
|
||||
{
|
||||
value: 'yyyy/MM/dd',
|
||||
label: 'YYYY/MM/DD'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ label: this.$t('dataset.time_all'), value: 'DATETIME',
|
||||
children: [{
|
||||
value: 'yyyy-MM-dd HH:mm:ss',
|
||||
label: 'YYYY-MM-DD HH:MI:SS'
|
||||
}, {
|
||||
value: 'yyyy/MM/dd HH:mm:ss',
|
||||
label: 'YYYY/MM/DD HH:MI:SS'
|
||||
}
|
||||
{
|
||||
label: this.$t('dataset.time_all'),
|
||||
value: 'DATETIME',
|
||||
children: [
|
||||
{
|
||||
value: 'yyyy-MM-dd HH:mm:ss',
|
||||
label: 'YYYY-MM-DD HH:MI:SS'
|
||||
},
|
||||
{
|
||||
value: 'yyyy/MM/dd HH:mm:ss',
|
||||
label: 'YYYY/MM/DD HH:MI:SS'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -308,13 +416,26 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
engineMode().then(res => {
|
||||
engineMode().then((res) => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
mousedownDrag() {
|
||||
document
|
||||
.querySelector('.dataset-sql')
|
||||
.addEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
mouseupDrag() {
|
||||
document
|
||||
.querySelector('.dataset-sql')
|
||||
.removeEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
caculateHeight(e) {
|
||||
this.sqlHeight = e.pageY - 56
|
||||
},
|
||||
kettleState() {
|
||||
isKettleRunning().then(res => {
|
||||
isKettleRunning().then((res) => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
},
|
||||
@ -323,7 +444,11 @@ export default {
|
||||
if (this.options[i].id === this.dataSource) {
|
||||
this.selectedDatasource = this.options[i]
|
||||
this.mode = '0'
|
||||
if (this.engineMode === 'simple' || (!this.kettleRunning || this.selectedDatasource.calculationMode === 'DIRECT')) {
|
||||
if (
|
||||
this.engineMode === 'simple' ||
|
||||
!this.kettleRunning ||
|
||||
this.selectedDatasource.calculationMode === 'DIRECT'
|
||||
) {
|
||||
this.disabledSync = true
|
||||
} else {
|
||||
this.disabledSync = false
|
||||
@ -335,35 +460,38 @@ export default {
|
||||
const that = this
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 56 - 30 - 26 - 25 - 43 - 160 - 10 - 37 - 20 - 10 - 16
|
||||
that.height =
|
||||
currentHeight - 56 - 30 - 26 - 25 - 43 - 160 - 10 - 37 - 20 - 10 - 16
|
||||
}, 10)
|
||||
},
|
||||
initDataSource() {
|
||||
listDatasource().then(response => {
|
||||
this.options = response.data.filter(item => item.type !== 'api')
|
||||
listDatasource().then((response) => {
|
||||
this.options = response.data.filter((item) => item.type !== 'api')
|
||||
})
|
||||
},
|
||||
|
||||
initTableInfo() {
|
||||
if (this.param.tableId) {
|
||||
getTable(this.param.tableId).then(response => {
|
||||
getTable(this.param.tableId).then((response) => {
|
||||
const table = response.data
|
||||
this.name = table.name
|
||||
this.dataSource = table.dataSourceId
|
||||
this.mode = table.mode + ''
|
||||
|
||||
if(JSON.parse(table.info).isBase64Encryption){
|
||||
this.sql = Base64.decode(JSON.parse(table.info).sql)
|
||||
}else {
|
||||
this.sql = JSON.parse(table.info.replace(/\n/g, '\\n').replace(/\r/g, '\\r')).sql
|
||||
if (JSON.parse(table.info).isBase64Encryption) {
|
||||
this.sql = Base64.decode(JSON.parse(table.info).sql)
|
||||
} else {
|
||||
this.sql = JSON.parse(
|
||||
table.info.replace(/\n/g, '\\n').replace(/\r/g, '\\r')
|
||||
).sql
|
||||
}
|
||||
this.variables= JSON.parse(table.sqlVariableDetails)
|
||||
this.variables = JSON.parse(table.sqlVariableDetails)
|
||||
this.getSQLPreview()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getSQLPreview() {
|
||||
this.errMsg = false
|
||||
if (!this.dataSource || this.datasource === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
@ -377,13 +505,20 @@ export default {
|
||||
dataSourceId: this.dataSource,
|
||||
type: 'sql',
|
||||
sqlVariableDetails: JSON.stringify(this.variables),
|
||||
info: JSON.stringify({sql: Base64.encode(this.sql.trim()), isBase64Encryption: true})
|
||||
}).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
info: JSON.stringify({
|
||||
sql: Base64.encode(this.sql.trim()),
|
||||
isBase64Encryption: true
|
||||
})
|
||||
})
|
||||
.then((response) => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
})
|
||||
.catch((err) => {
|
||||
this.errMsg = true
|
||||
})
|
||||
},
|
||||
|
||||
save() {
|
||||
@ -395,7 +530,7 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.name || this.name === '') {
|
||||
if (!this.table.name || this.table.name === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
@ -403,7 +538,7 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.name.length > 50) {
|
||||
if (this.table.name.length > 50) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.char_can_not_more_50'),
|
||||
@ -414,16 +549,19 @@ export default {
|
||||
this.parseVariable()
|
||||
const table = {
|
||||
id: this.param.tableId,
|
||||
name: this.name,
|
||||
name: this.table.name,
|
||||
sceneId: this.param.id,
|
||||
dataSourceId: this.dataSource,
|
||||
type: 'sql',
|
||||
syncType: this.syncType,
|
||||
mode: parseInt(this.mode),
|
||||
sqlVariableDetails: JSON.stringify(this.variables),
|
||||
info: JSON.stringify({sql: Base64.encode(this.sql.trim()), isBase64Encryption: true})
|
||||
info: JSON.stringify({
|
||||
sql: Base64.encode(this.sql.trim()),
|
||||
isBase64Encryption: true
|
||||
})
|
||||
}
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
@ -431,9 +569,12 @@ export default {
|
||||
|
||||
cancel() {
|
||||
if (this.param.tableId) {
|
||||
this.$emit('switchComponent', {name: 'ViewTable', param: this.param.table})
|
||||
this.$emit('switchComponent', {
|
||||
name: 'ViewTable',
|
||||
param: this.param.table
|
||||
})
|
||||
} else {
|
||||
this.$emit('switchComponent', {name: ''})
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
}
|
||||
},
|
||||
|
||||
@ -443,8 +584,7 @@ export default {
|
||||
onCmReady(cm) {
|
||||
this.codemirror.setSize('-webkit-fill-available', 'auto')
|
||||
},
|
||||
onCmFocus(cm) {
|
||||
},
|
||||
onCmFocus(cm) {},
|
||||
onCmCodeChange(newCode) {
|
||||
this.sql = newCode
|
||||
this.$emit('codeChange', this.sql)
|
||||
@ -452,7 +592,7 @@ export default {
|
||||
|
||||
resetComponent() {
|
||||
this.dataSource = ''
|
||||
this.name = ''
|
||||
this.table.name = ''
|
||||
this.sql = ''
|
||||
this.data = []
|
||||
this.fields = []
|
||||
@ -465,24 +605,31 @@ export default {
|
||||
this.dialogTitle = this.$t('sql_variable.variable_mgm') + ' '
|
||||
this.showVariableMgm = true
|
||||
},
|
||||
parseVariable(){
|
||||
parseVariable() {
|
||||
this.variablesTmp = []
|
||||
var reg = new RegExp("\\${(.*?)}", "gim");
|
||||
var match = this.sql.match(reg);
|
||||
var reg = new RegExp('\\${(.*?)}', 'gim')
|
||||
var match = this.sql.match(reg)
|
||||
const names = []
|
||||
if (match !== null) {
|
||||
for (let index = 0; index < match.length; index++) {
|
||||
var name = match[index].substring(2, match[index].length - 1)
|
||||
if(names.indexOf(name) < 0){
|
||||
if (names.indexOf(name) < 0) {
|
||||
names.push(name)
|
||||
var obj = undefined
|
||||
for (let i = 0; i < this.variables.length; i ++) {
|
||||
if(this.variables[i].variableName === name){
|
||||
for (let i = 0; i < this.variables.length; i++) {
|
||||
if (this.variables[i].variableName === name) {
|
||||
obj = this.variables[i]
|
||||
}
|
||||
}
|
||||
if(obj === undefined){
|
||||
obj = {variableName: name, alias: '', type: [], required: false, defaultValue: '', details: ''}
|
||||
if (obj === undefined) {
|
||||
obj = {
|
||||
variableName: name,
|
||||
alias: '',
|
||||
type: [],
|
||||
required: false,
|
||||
defaultValue: '',
|
||||
details: ''
|
||||
}
|
||||
obj.type.push('TEXT')
|
||||
}
|
||||
this.variablesTmp.push(obj)
|
||||
@ -494,78 +641,134 @@ export default {
|
||||
closeVariableMgm() {
|
||||
this.showVariableMgm = false
|
||||
},
|
||||
saveVariable(){
|
||||
saveVariable() {
|
||||
this.variables = JSON.parse(JSON.stringify(this.variablesTmp)).concat()
|
||||
this.showVariableMgm = false
|
||||
},
|
||||
variableTypeChange(row){
|
||||
variableTypeChange(row) {
|
||||
row.defaultValue = ''
|
||||
},
|
||||
renderPrice(h, { column, $index }) {
|
||||
return [
|
||||
column.label,
|
||||
h(
|
||||
'el-tooltip',
|
||||
{
|
||||
props: {
|
||||
content: this.$t('dataset.params_work'),
|
||||
placement: 'top'
|
||||
}
|
||||
},
|
||||
[h('span', { class: { 'el-icon-info': true }})]
|
||||
)
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.codemirror {
|
||||
height: 160px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.codemirror ::v-deep .CodeMirror-scroll {
|
||||
height: 160px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
.dataPreview ::v-deep .el-card__header {
|
||||
padding: 6px 8px;
|
||||
<style lang="scss">
|
||||
.sql-dataset-drawer {
|
||||
.el-drawer__body {
|
||||
padding: 16px 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-type {
|
||||
width: 180px;
|
||||
.el-input__inner {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-svg-icon {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.content {
|
||||
height: 62px;
|
||||
width: 792px;
|
||||
border-radius: 4px;
|
||||
background: #e1eaff;
|
||||
position: relative;
|
||||
padding: 9px 19px 9px 40px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 12.6px;
|
||||
left: 16.7px;
|
||||
font-size: 14px;
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.dataset-sql {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sql-result {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
.sql-title {
|
||||
user-select: none;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
|
||||
.dataPreview ::v-deep .el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
.result-num {
|
||||
font-weight: 400;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.drag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 7px;
|
||||
width: 100px;
|
||||
border-radius: 3.5px;
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.span-number {
|
||||
color: #0a7be0;
|
||||
}
|
||||
|
||||
.table-count {
|
||||
color: #606266;
|
||||
.table-sql {
|
||||
height: calc(100% - 64px);
|
||||
padding: 18px 25px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,6 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-row style="height: 26px;" class="title-text">
|
||||
<span style="line-height: 26px;font-size: 14px;">
|
||||
{{ param.tableId?$t('dataset.edit_union'):$t('dataset.add_union_table') }}
|
||||
</span>
|
||||
<el-row style="float: right">
|
||||
<el-button size="mini" @click="cancel">
|
||||
{{ $t('dataset.cancel') }}
|
||||
</el-button>
|
||||
<el-button :disabled="!name || dataset.length === 0" size="mini" type="primary" @click="save">
|
||||
{{ $t('dataset.confirm') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<div>
|
||||
<el-form :inline="true" style="display: flex;align-items: center;justify-content: space-between;">
|
||||
<div class="dataset-union" @mouseup="mouseupDrag">
|
||||
<!-- <el-form :inline="true" style="display: flex;align-items: center;justify-content: space-between;">
|
||||
<el-form-item class="form-item" :label="$t('commons.name')">
|
||||
<el-input v-model="name" size="mini" :placeholder="$t('commons.name')" clearable />
|
||||
</el-form-item>
|
||||
@ -24,7 +9,8 @@
|
||||
{{ $t('dataset.preview_result') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form> -->
|
||||
<div :style="{ height: unionHeight + 'px' }" class="unio-editer-container">
|
||||
<!--添加第一个数据集按钮-->
|
||||
<div v-if="dataset.length === 0">
|
||||
<el-button type="primary" size="mini" @click="selectDs">
|
||||
@ -44,7 +30,7 @@
|
||||
/>
|
||||
<div v-if="dataset.length > 0">
|
||||
<union-node
|
||||
v-for="(item,index) in dataset[0].childrenDs"
|
||||
v-for="(item, index) in dataset[0].childrenDs"
|
||||
:key="index"
|
||||
:node-index="index"
|
||||
:children-node="item"
|
||||
@ -57,42 +43,90 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--选择数据集-->
|
||||
<el-dialog v-if="selectDsDialog" v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="400px" class="dialog-css">
|
||||
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" clear-empty-dir="true" @getTable="firstDs" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
|
||||
<div class="preview-container">
|
||||
<div class="sql-title">
|
||||
{{ $t('deDataset.data_preview') }}
|
||||
<span class="result-num">{{
|
||||
`(${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')})`
|
||||
}}</span>
|
||||
<span @mousedown="mousedownDrag" class="drag"></span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<union-preview :table="previewTable" :dataset="dataset" />
|
||||
</div>
|
||||
<!--选择数据集-->
|
||||
<el-drawer
|
||||
v-if="selectDsDialog"
|
||||
:title="$t('chart.select_dataset')"
|
||||
:visible.sync="selectDsDialog"
|
||||
custom-class="user-drawer sql-dataset-drawer"
|
||||
size="600px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<dataset-tree
|
||||
:fix-height="true"
|
||||
show-mode="union"
|
||||
:custom-type="customType"
|
||||
clear-empty-dir="true"
|
||||
@getTable="firstDs"
|
||||
/>
|
||||
<div class="de-foot">
|
||||
<deBtn secondary @click="closeSelectDs()">{{
|
||||
$t('dataset.cancel')
|
||||
}}</deBtn>
|
||||
<deBtn
|
||||
:disabled="!tempDs.id"
|
||||
type="primary"
|
||||
@click="confirmSelectDs()"
|
||||
>{{ $t('dataset.confirm') }}</deBtn
|
||||
>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!--编辑关联关系-->
|
||||
<el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
|
||||
<el-dialog
|
||||
v-if="editUnion"
|
||||
v-dialogDrag
|
||||
top="5vh"
|
||||
:title="
|
||||
unionParam.type === 'add'
|
||||
? $t('dataset.add_union_relation')
|
||||
: $t('dataset.edit_union_relation')
|
||||
"
|
||||
:visible="editUnion"
|
||||
:show-close="false"
|
||||
width="600px"
|
||||
class="dialog-css"
|
||||
>
|
||||
<union-edit :union-param="unionParam" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
|
||||
<el-button size="mini" @click="closeEditUnion()">{{
|
||||
$t('dataset.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{
|
||||
$t('dataset.confirm')
|
||||
}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--数据预览界面-->
|
||||
<el-drawer v-if="showPreview" :title="$t('dataset.preview_result')" :visible.sync="showPreview" direction="btt" class="preview-style">
|
||||
<union-preview :table="previewTable" :dataset="dataset" />
|
||||
</el-drawer>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UnionNode from '@/views/dataset/add/union/UnionNode'
|
||||
import NodeItem from '@/views/dataset/add/union/NodeItem'
|
||||
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
|
||||
import datasetTree from '@/views/dataset/common/datasetTree'
|
||||
import UnionEdit from '@/views/dataset/add/union/UnionEdit'
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import UnionPreview from '@/views/dataset/add/union/UnionPreview'
|
||||
export default {
|
||||
name: 'AddUnion',
|
||||
components: { UnionPreview, UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
|
||||
components: {
|
||||
UnionPreview,
|
||||
UnionEdit,
|
||||
datasetTree,
|
||||
NodeItem,
|
||||
UnionNode
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
@ -102,31 +136,34 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
// mock data，结构比较复杂，需要这个结构多看看...
|
||||
datasetMock: [{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [
|
||||
{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: 'left', // left join,right join,inner join
|
||||
unionFields: [
|
||||
{
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
allChildCount: 0
|
||||
}
|
||||
],
|
||||
unionToParent: {},
|
||||
allChildCount: 0
|
||||
}],
|
||||
datasetMock: [
|
||||
{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [
|
||||
{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: 'left', // left join,right join,inner join
|
||||
unionFields: [
|
||||
{
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
allChildCount: 0
|
||||
}
|
||||
],
|
||||
unionToParent: {},
|
||||
allChildCount: 0
|
||||
}
|
||||
],
|
||||
// union data
|
||||
dataset: [],
|
||||
unionHeight: 298,
|
||||
// union item
|
||||
unionItem: {
|
||||
currentDs: {},
|
||||
@ -138,19 +175,17 @@ export default {
|
||||
},
|
||||
allChildCount: 0
|
||||
},
|
||||
name: '关联数据集',
|
||||
customType: ['db', 'sql', 'excel', 'api'],
|
||||
selectDsDialog: false,
|
||||
// 弹框临时选中的数据集
|
||||
tempDs: {},
|
||||
editUnion: false,
|
||||
unionParam: {},
|
||||
showPreview: false,
|
||||
previewTable: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'param.tableId': function() {
|
||||
'param.tableId': function () {
|
||||
this.resetComponent()
|
||||
this.initTableData()
|
||||
}
|
||||
@ -159,8 +194,21 @@ export default {
|
||||
this.initTableData()
|
||||
},
|
||||
methods: {
|
||||
mousedownDrag() {
|
||||
document
|
||||
.querySelector('.dataset-union')
|
||||
.addEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
mouseupDrag() {
|
||||
document
|
||||
.querySelector('.dataset-union')
|
||||
.removeEventListener('mousemove', this.caculateHeight)
|
||||
},
|
||||
caculateHeight(e) {
|
||||
this.unionHeight = e.pageY - 56
|
||||
},
|
||||
save() {
|
||||
if (!this.name || this.name === '') {
|
||||
if (!this.param.name || this.param.name === '') {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
@ -168,7 +216,7 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.name.length > 50) {
|
||||
if (this.param.name.length > 50) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.char_can_not_more_50'),
|
||||
@ -178,21 +226,24 @@ export default {
|
||||
}
|
||||
const table = {
|
||||
id: this.param.tableId,
|
||||
name: this.name,
|
||||
name: this.param.name,
|
||||
sceneId: this.param.id,
|
||||
dataSourceId: this.dataset[0].currentDs.dataSourceId,
|
||||
type: 'union',
|
||||
mode: this.dataset[0].currentDs.mode,
|
||||
info: '{"union":' + JSON.stringify(this.dataset) + '}'
|
||||
}
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
post('/dataset/table/update', table).then((response) => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
if (this.param.tableId) {
|
||||
this.$emit('switchComponent', { name: 'ViewTable', param: this.param.table })
|
||||
this.$emit('switchComponent', {
|
||||
name: 'ViewTable',
|
||||
param: this.param.table
|
||||
})
|
||||
} else {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
}
|
||||
@ -251,7 +302,12 @@ export default {
|
||||
// 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
|
||||
if (this.unionParam.type === 'add') {
|
||||
this.dataset[0].childrenDs.pop()
|
||||
this.calc({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
|
||||
this.calc({
|
||||
type: 'delete',
|
||||
grandParentAdd: true,
|
||||
grandParentSub: true,
|
||||
subCount: 0
|
||||
})
|
||||
}
|
||||
},
|
||||
confirmEditUnion() {
|
||||
@ -280,7 +336,12 @@ export default {
|
||||
}
|
||||
for (let i = 0; i < union.unionFields.length; i++) {
|
||||
const ele = union.unionFields[i]
|
||||
if (!ele.parentField || !ele.parentField.id || !ele.currentField || !ele.currentField.id) {
|
||||
if (
|
||||
!ele.parentField ||
|
||||
!ele.parentField.id ||
|
||||
!ele.currentField ||
|
||||
!ele.currentField.id
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
@ -289,64 +350,90 @@ export default {
|
||||
|
||||
initTableData() {
|
||||
if (this.param.tableId) {
|
||||
post('/dataset/table/get/' + this.param.tableId, null).then(response => {
|
||||
const table = JSON.parse(JSON.stringify(response.data))
|
||||
this.name = table.name
|
||||
this.dataset = JSON.parse(table.info).union
|
||||
})
|
||||
post('/dataset/table/get/' + this.param.tableId, null).then(
|
||||
(response) => {
|
||||
const table = JSON.parse(JSON.stringify(response.data))
|
||||
this.dataset = JSON.parse(table.info).union
|
||||
this.previewData()
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
previewData() {
|
||||
this.previewTable = {
|
||||
id: this.param.tableId,
|
||||
name: this.name,
|
||||
name: this.param.name,
|
||||
sceneId: this.param.id,
|
||||
dataSourceId: this.dataset[0].currentDs.dataSourceId,
|
||||
type: 'union',
|
||||
mode: this.dataset[0].currentDs.mode,
|
||||
info: '{"union":' + JSON.stringify(this.dataset) + '}'
|
||||
}
|
||||
this.showPreview = true
|
||||
},
|
||||
|
||||
resetComponent() {
|
||||
this.dataset = []
|
||||
this.name = '关联数据集'
|
||||
this.param.name = '关联数据集'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.union-container{
|
||||
<style lang="scss" scoped>
|
||||
.dataset-union {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: calc(100vh - 200px);
|
||||
overflow: auto;
|
||||
}
|
||||
.form-item{
|
||||
margin-bottom: 10px!important;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.preview-style ::v-deep .el-drawer{
|
||||
height: 50%!important;
|
||||
}
|
||||
.preview-style ::v-deep .el-drawer .el-drawer__header{
|
||||
margin-bottom: 10px!important;
|
||||
padding: 10px 16px 0!important;
|
||||
font-size: 14px;
|
||||
}
|
||||
.preview-style ::v-deep .el-drawer .el-drawer__body{
|
||||
padding: 0 16px 10px!important;
|
||||
}
|
||||
.form-item ::v-deep .el-form-item__label{
|
||||
font-size: 12px!important;
|
||||
font-weight: 400!important;
|
||||
|
||||
.unio-editer-container {
|
||||
min-height: 298px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
flex: 1;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
.sql-title {
|
||||
user-select: none;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
|
||||
.result-num {
|
||||
font-weight: 400;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.drag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 7px;
|
||||
width: 100px;
|
||||
border-radius: 3.5px;
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.union-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="ds-node" @click="nodeClick">
|
||||
<svg-icon v-if="currentNode.currentDs.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
|
||||
<svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
|
||||
<svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
|
||||
<svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'api'" icon-class="ds-api" class="ds-icon-api" />
|
||||
<svg-icon
|
||||
v-if="currentNode.currentDs.modelInnerType === 'db'"
|
||||
icon-class="ds-db"
|
||||
class="ds-icon-db"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="currentNode.currentDs.modelInnerType === 'sql'"
|
||||
icon-class="ds-sql"
|
||||
class="ds-icon-sql"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="currentNode.currentDs.modelInnerType === 'excel'"
|
||||
icon-class="ds-excel"
|
||||
class="ds-icon-excel"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="currentNode.currentDs.modelInnerType === 'api'"
|
||||
icon-class="ds-api"
|
||||
class="ds-icon-api"
|
||||
/>
|
||||
|
||||
<span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span>
|
||||
<span class="node-name" :title="currentNode.currentDs.name">{{
|
||||
currentNode.currentDs.name
|
||||
}}</span>
|
||||
|
||||
<span class="node-menu" @click.stop>
|
||||
<el-dropdown trigger="click" size="small" @command="nodeMenuClick">
|
||||
@ -14,14 +32,27 @@
|
||||
<el-button icon="el-icon-more" type="text" size="small" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="currentNode.currentDs.mode === 0 && currentNode.currentDs.modelInnerType === 'sql'" icon="el-icon-copy-document" :command="beforeNodeMenuClick('union',currentNode)">
|
||||
<span style="font-size: 12px;">{{ $t('dataset.union') }}</span>
|
||||
<el-dropdown-item
|
||||
:disabled="
|
||||
currentNode.currentDs.mode === 0 &&
|
||||
currentNode.currentDs.modelInnerType === 'sql'
|
||||
"
|
||||
icon="el-icon-copy-document"
|
||||
:command="beforeNodeMenuClick('union', currentNode)"
|
||||
>
|
||||
<span style="font-size: 12px">{{ $t('dataset.union') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeNodeMenuClick('edit',currentNode)">
|
||||
<span style="font-size: 12px;">{{ $t('dataset.edit') }}</span>
|
||||
<el-dropdown-item
|
||||
icon="el-icon-edit-outline"
|
||||
:command="beforeNodeMenuClick('edit', currentNode)"
|
||||
>
|
||||
<span style="font-size: 12px">{{ $t('dataset.edit') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" :command="beforeNodeMenuClick('delete',currentNode)">
|
||||
<span style="font-size: 12px;">{{ $t('dataset.delete') }}</span>
|
||||
<el-dropdown-item
|
||||
icon="el-icon-delete"
|
||||
:command="beforeNodeMenuClick('delete', currentNode)"
|
||||
>
|
||||
<span style="font-size: 12px">{{ $t('dataset.delete') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
@ -29,31 +60,84 @@
|
||||
</div>
|
||||
|
||||
<!--选择数据集-->
|
||||
<el-dialog v-if="selectDsDialog" v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="400px" class="dialog-css">
|
||||
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" clear-empty-dir="true" :mode="currentNode.currentDs.mode" @getTable="firstDs" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
|
||||
<el-drawer
|
||||
v-if="selectDsDialog"
|
||||
:title="$t('chart.select_dataset')"
|
||||
:visible.sync="selectDsDialog"
|
||||
custom-class="user-drawer sql-dataset-drawer"
|
||||
size="600px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<dataset-tree
|
||||
:fix-height="true"
|
||||
show-mode="union"
|
||||
:custom-type="customType"
|
||||
:clear-empty-dir="true"
|
||||
:mode="currentNode.currentDs.mode"
|
||||
@getTable="firstDs"
|
||||
/>
|
||||
<div class="de-foot">
|
||||
<deBtn secondary @click="closeSelectDs()">{{
|
||||
$t('dataset.cancel')
|
||||
}}</deBtn>
|
||||
<deBtn
|
||||
:disabled="!tempDs.id"
|
||||
type="primary"
|
||||
@click="confirmSelectDs()"
|
||||
>{{ $t('dataset.confirm') }}</deBtn
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
|
||||
<!--编辑单个数据集字段-->
|
||||
<el-dialog v-if="editField" v-dialogDrag :title="$t('dataset.field_select')" :visible="editField" :show-close="false" width="400px" class="dialog-css">
|
||||
<!-- <el-drawer
|
||||
v-if="editField"
|
||||
:title="$t('dataset.field_select')"
|
||||
:visible.sync="editField"
|
||||
custom-class="user-drawer sql-dataset-drawer"
|
||||
size="840px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<union-field-edit :node="currentNode" />
|
||||
<div class="de-foot">
|
||||
<deBtn size="mini" @click="closeEditField()">{{
|
||||
$t("dataset.cancel")
|
||||
}}</deBtn>
|
||||
<deBtn type="primary" size="mini" @click="confirmEditField()">{{
|
||||
$t("dataset.confirm")
|
||||
}}</deBtn>
|
||||
</div>
|
||||
</el-drawer> -->
|
||||
<el-dialog
|
||||
v-if="editField"
|
||||
v-dialogDrag
|
||||
:title="$t('dataset.field_select')"
|
||||
:visible="editField"
|
||||
:show-close="false"
|
||||
width="400px"
|
||||
class="dialog-css"
|
||||
>
|
||||
<union-field-edit :node="currentNode" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeEditField()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="confirmEditField()">{{ $t('dataset.confirm') }}</el-button>
|
||||
<el-button size="mini" @click="closeEditField()">{{
|
||||
$t('dataset.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" size="mini" @click="confirmEditField()">{{
|
||||
$t('dataset.confirm')
|
||||
}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
|
||||
import datasetTree from '@/views/dataset/common/datasetTree'
|
||||
import UnionFieldEdit from '@/views/dataset/add/union/UnionFieldEdit'
|
||||
export default {
|
||||
name: 'NodeItem',
|
||||
components: { UnionFieldEdit, DatasetGroupSelectorTree },
|
||||
components: { UnionFieldEdit, datasetTree },
|
||||
props: {
|
||||
currentNode: {
|
||||
type: Object,
|
||||
@ -110,8 +194,8 @@ export default {
|
||||
},
|
||||
beforeNodeMenuClick(type, item) {
|
||||
return {
|
||||
'type': type,
|
||||
'item': item
|
||||
type: type,
|
||||
item: item
|
||||
}
|
||||
},
|
||||
|
||||
@ -151,7 +235,9 @@ export default {
|
||||
confirmSelectDs() {
|
||||
// 校验当前数据集是否已被关联，以及直连模式是否属于同一数据源
|
||||
if (this.tempDs.mode === 0) {
|
||||
if (this.tempDs.dataSourceId !== this.tempParentDs.currentDs.dataSourceId) {
|
||||
if (
|
||||
this.tempDs.dataSourceId !== this.tempParentDs.currentDs.dataSourceId
|
||||
) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: this.$t('dataset.can_not_union_diff_datasource'),
|
||||
@ -187,7 +273,12 @@ export default {
|
||||
},
|
||||
// 增加与删除事件向父级传递
|
||||
notifyFirstParent(type) {
|
||||
this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount })
|
||||
this.$emit('notifyParent', {
|
||||
type: type,
|
||||
grandParentAdd: true,
|
||||
grandParentSub: true,
|
||||
subCount: this.currentNode.allChildCount
|
||||
})
|
||||
},
|
||||
closeEditField() {
|
||||
this.editField = false
|
||||
@ -201,7 +292,10 @@ export default {
|
||||
const arr = []
|
||||
for (let i = 0; i < this.originData.length; i++) {
|
||||
arr.push(this.originData[0].currentDs.id)
|
||||
if (this.originData[0].childrenDs && this.originData[0].childrenDs.length > 0) {
|
||||
if (
|
||||
this.originData[0].childrenDs &&
|
||||
this.originData[0].childrenDs.length > 0
|
||||
) {
|
||||
this.getDs(this.originData[0].childrenDs, arr)
|
||||
}
|
||||
}
|
||||
@ -220,34 +314,34 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ds-node{
|
||||
width:160px;
|
||||
.ds-node {
|
||||
width: 160px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: #dcdfe6 solid 1px;
|
||||
min-width: 160px;
|
||||
color: var(--TextPrimary,#606266);
|
||||
color: var(--TextPrimary, #606266);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.node-name{
|
||||
.node-name {
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.ds-node .node-menu{
|
||||
.ds-node .node-menu {
|
||||
visibility: hidden;
|
||||
}
|
||||
.ds-node:hover .node-menu{
|
||||
.ds-node:hover .node-menu {
|
||||
visibility: visible;
|
||||
}
|
||||
.ds-node:hover{
|
||||
.ds-node:hover {
|
||||
cursor: pointer;
|
||||
border: var(--Main,#2681ff) solid 1px;
|
||||
border: var(--Main, #2681ff) solid 1px;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 0 20px;
|
||||
|
||||
@ -1,17 +1,35 @@
|
||||
<template>
|
||||
<div v-if="unionParam.type" style="height:600px;">
|
||||
<div
|
||||
v-if="unionParam.type"
|
||||
style="height: calc(100% - 55px); overflow-y: auto"
|
||||
>
|
||||
<div class="field-style">
|
||||
<div class="fields">
|
||||
<p :title="unionParam.parent.currentDs.name">{{ unionParam.parent.currentDs.name }}</p>
|
||||
<union-field-list :field-list="parentField" :node="unionParam.parent" @checkedFields="changeParentFields" />
|
||||
<p :title="unionParam.parent.currentDs.name">
|
||||
{{ unionParam.parent.currentDs.name }}
|
||||
</p>
|
||||
<union-field-list
|
||||
:field-list="parentField"
|
||||
:node="unionParam.parent"
|
||||
@checkedFields="changeParentFields"
|
||||
/>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<p :title="unionParam.parent.currentDs.name">{{ unionParam.node.currentDs.name }}</p>
|
||||
<union-field-list :field-list="nodeField" :node="unionParam.node" @checkedFields="changeNodeFields" />
|
||||
<p :title="unionParam.parent.currentDs.name">
|
||||
{{ unionParam.node.currentDs.name }}
|
||||
</p>
|
||||
<union-field-list
|
||||
:field-list="nodeField"
|
||||
:node="unionParam.node"
|
||||
@checkedFields="changeNodeFields"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
<union-item-edit :parent-field-list="parentField" :node-field-list="nodeField" :union-param="unionParam" />
|
||||
<union-item-edit
|
||||
:parent-field-list="parentField"
|
||||
:node-field-list="nodeField"
|
||||
:union-param="unionParam"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -36,9 +54,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'unionParam': function() {
|
||||
|
||||
}
|
||||
unionParam: function () {}
|
||||
},
|
||||
mounted() {
|
||||
this.getParentFieldList()
|
||||
@ -46,13 +62,25 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getParentFieldList() {
|
||||
post('/dataset/field/list/' + this.unionParam.parent.currentDs.id, null, true).then(response => {
|
||||
this.parentField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
post(
|
||||
'/dataset/field/list/' + this.unionParam.parent.currentDs.id,
|
||||
null,
|
||||
true
|
||||
).then((response) => {
|
||||
this.parentField = JSON.parse(JSON.stringify(response.data)).filter(
|
||||
(ele) => ele.extField === 0
|
||||
)
|
||||
})
|
||||
},
|
||||
getNodeFieldList() {
|
||||
post('/dataset/field/list/' + this.unionParam.node.currentDs.id, null, true).then(response => {
|
||||
this.nodeField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
post(
|
||||
'/dataset/field/list/' + this.unionParam.node.currentDs.id,
|
||||
null,
|
||||
true
|
||||
).then((response) => {
|
||||
this.nodeField = JSON.parse(JSON.stringify(response.data)).filter(
|
||||
(ele) => ele.extField === 0
|
||||
)
|
||||
})
|
||||
},
|
||||
|
||||
@ -66,26 +94,35 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-style{
|
||||
height: 300px;
|
||||
}
|
||||
.fields{
|
||||
<style lang="scss" scoped>
|
||||
.field-style {
|
||||
height: 430px;
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
display: flex;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.fields {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 0 6px;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
margin: 6px 0!important;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
|
||||
& > p {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
&:nth-child(1) {
|
||||
border-right: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>{{ node.currentDs.name }}</p>
|
||||
<union-field-list :field-list="fieldList" :node="node" @checkedFields="changeFields" />
|
||||
<union-field-list
|
||||
:field-list="fieldList"
|
||||
:node="node"
|
||||
@checkedFields="changeFields"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,9 +32,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getFieldList() {
|
||||
post('/dataset/field/list/' + this.node.currentDs.id, null, true).then(response => {
|
||||
this.fieldList = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
})
|
||||
post('/dataset/field/list/' + this.node.currentDs.id, null, true).then(
|
||||
(response) => {
|
||||
this.fieldList = JSON.parse(JSON.stringify(response.data)).filter(
|
||||
(ele) => ele.extField === 0
|
||||
)
|
||||
}
|
||||
)
|
||||
},
|
||||
changeFields(val) {
|
||||
this.node.currentDsField = val
|
||||
@ -40,5 +48,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,45 +1,80 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field-block-style">
|
||||
<div class="field-block-option">
|
||||
<span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{ fieldList.length }})</span>
|
||||
<el-input
|
||||
v-model="search"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
class="option-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-block-head">
|
||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="check-style" @change="handleCheckAllChange"> </el-checkbox>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style">{{ $t('dataset.field_origin_name') }}</span>
|
||||
<span class="field-style">{{ $t('dataset.field_name') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field-block-body">
|
||||
<el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
|
||||
<div v-for="field in fieldSearchList" :key="field.id" class="field-item-style">
|
||||
<el-checkbox :label="field.id" class="check-style"> </el-checkbox>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style" :title="field.originName">
|
||||
<span>
|
||||
<svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
</span>
|
||||
<span class="origin-style">
|
||||
{{ field.originName }}
|
||||
</span>
|
||||
<div class="field-block-style">
|
||||
<div class="field-block-option">
|
||||
<span class="option-field"
|
||||
>{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{
|
||||
fieldList.length
|
||||
}})</span
|
||||
>
|
||||
<el-input
|
||||
v-model="search"
|
||||
size="small"
|
||||
:placeholder="$t('auth.search_by_field')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
class="option-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-block-head">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
class="check-style"
|
||||
@change="handleCheckAllChange"
|
||||
> </el-checkbox
|
||||
>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style">{{ $t('panel.column_name') }}</span>
|
||||
<span class="field-style">{{ $t('deDataset.original_name') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field-block-body">
|
||||
<el-checkbox-group
|
||||
v-model="checkedFields"
|
||||
@change="handleCheckedCitiesChange"
|
||||
>
|
||||
<div
|
||||
v-for="field in fieldSearchList"
|
||||
:key="field.id"
|
||||
class="field-item-style"
|
||||
>
|
||||
<el-checkbox :label="field.id" class="check-style"
|
||||
> </el-checkbox
|
||||
>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style value" :title="field.originName">
|
||||
<span>
|
||||
<svg-icon
|
||||
v-if="field.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 2 || field.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
</span>
|
||||
<span class="origin-style">
|
||||
{{ field.originName }}
|
||||
</span>
|
||||
<span class="field-style" :title="field.name">{{ field.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<span class="field-style value" :title="field.name">{{
|
||||
field.name
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -67,13 +102,17 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fieldList: function() {
|
||||
fieldList: function () {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
this.init()
|
||||
},
|
||||
search: function(val) {
|
||||
search: function (val) {
|
||||
if (val && val !== '') {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
|
||||
this.fieldSearchList = JSON.parse(
|
||||
JSON.stringify(this.fieldList)
|
||||
).filter((ele) =>
|
||||
ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase())
|
||||
)
|
||||
} else {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
}
|
||||
@ -88,14 +127,15 @@ export default {
|
||||
this.handleCheckedCitiesChange(this.checkedFields)
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
|
||||
this.checkedFields = val ? this.fieldList.map((ele) => ele.id) : []
|
||||
this.isIndeterminate = false
|
||||
this.returnCheckedFields()
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.fieldList.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
|
||||
this.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < this.fieldList.length
|
||||
this.returnCheckedFields()
|
||||
},
|
||||
|
||||
@ -106,71 +146,85 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.field-block-style{
|
||||
height: 300px;
|
||||
<style lang="scss" scoped>
|
||||
.field-block-style {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.field-block-head{
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.field-block-body{
|
||||
height: 210px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.field-origin-style{
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-style{
|
||||
margin-left: 10px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
}
|
||||
.label-style{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-item-style{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top:1px solid #dcdfe6;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.check-style{
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.origin-style{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.field-block-option{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.option-field{
|
||||
color: #C0C4CC;
|
||||
}
|
||||
.option-input{
|
||||
width: 120px;
|
||||
font-family: PingFang SC;
|
||||
.field-block-head {
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-top: 1px solid rgba(31, 35, 41, 0.15);
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
}
|
||||
.field-block-body {
|
||||
height: 281px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.field-origin-style {
|
||||
display: flex;
|
||||
margin-left: 12px;
|
||||
width: 140px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
.field-style {
|
||||
width: 140px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
.label-style {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-item-style {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
}
|
||||
.check-style {
|
||||
width: 52px;
|
||||
text-align: center;
|
||||
::v-deep.el-checkbox__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.origin-style {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.field-block-option {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.option-field {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
.option-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,31 +1,73 @@
|
||||
<template>
|
||||
<div class="union-container">
|
||||
<div class="union-header">
|
||||
{{ $t('dataset.join_view') }}
|
||||
{{ $t('dataset.union_relation') }}
|
||||
<div class="union-header-operator">
|
||||
<svg-icon v-if="unionParam.node.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" />
|
||||
<svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" />
|
||||
<svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" />
|
||||
<svg-icon v-else icon-class="no-join" class="join-icon" />
|
||||
|
||||
<el-select v-model="unionParam.node.unionToParent.unionType" size="mini" class="union-selector">
|
||||
<el-option v-for="item in unionOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<span class="select-svg-icon">
|
||||
<svg-icon
|
||||
v-if="unionParam.node.unionToParent.unionType === 'left'"
|
||||
icon-class="left-join"
|
||||
class="join-icon"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="unionParam.node.unionToParent.unionType === 'right'"
|
||||
icon-class="right-join"
|
||||
class="join-icon"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="unionParam.node.unionToParent.unionType === 'inner'"
|
||||
icon-class="inner-join"
|
||||
class="join-icon"
|
||||
/>
|
||||
<svg-icon v-else icon-class="no-join" class="join-icon" />
|
||||
</span>
|
||||
<el-select
|
||||
v-model="unionParam.node.unionToParent.unionType"
|
||||
size="small"
|
||||
class="union-selector"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in unionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<el-button size="mini" icon="el-icon-circle-plus-outline" class="union-add" @click="addUnion">{{ $t('dataset.add_union_field') }}</el-button>
|
||||
<deBtn
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
class="union-add"
|
||||
@click="addUnion"
|
||||
>{{ $t('dataset.add_union_field') }}</deBtn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="union-body">
|
||||
<div class="union-body-header">
|
||||
<span class="column" :title="unionParam.parent.currentDs.name">{{ unionParam.parent.currentDs.name }}</span>
|
||||
<span class="column" :title="unionParam.node.currentDs.name">{{ unionParam.node.currentDs.name }}</span>
|
||||
<span class="column" :title="unionParam.parent.currentDs.name">{{
|
||||
unionParam.parent.currentDs.name
|
||||
}}</span>
|
||||
<span class="column" :title="unionParam.node.currentDs.name">{{
|
||||
unionParam.node.currentDs.name
|
||||
}}</span>
|
||||
<span class="column-last">{{ $t('dataset.operator') }}</span>
|
||||
</div>
|
||||
<div class="union-body-container">
|
||||
<div v-for="(field,index) in unionParam.node.unionToParent.unionFields" :key="index" class="union-body-item">
|
||||
<div
|
||||
v-for="(field, index) in unionParam.node.unionToParent.unionFields"
|
||||
:key="index"
|
||||
class="union-body-item"
|
||||
>
|
||||
<!--左侧父级field-->
|
||||
<span class="column">
|
||||
<el-select v-model="field.parentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
|
||||
<el-select
|
||||
v-model="field.parentField.id"
|
||||
:placeholder="$t('dataset.pls_slc_union_field')"
|
||||
filterable
|
||||
clearable
|
||||
size="small"
|
||||
class="select-field"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in parentFieldList"
|
||||
:key="item.id"
|
||||
@ -34,16 +76,32 @@
|
||||
>
|
||||
<span>
|
||||
<span v-if="item.deType === 0">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 1">
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 2 || item.deType === 3">
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 5">
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
@ -52,9 +110,17 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</span>
|
||||
<svg-icon icon-class="join-join" class="join-icon" />
|
||||
<!--右侧孩子field-->
|
||||
<span class="column">
|
||||
<el-select v-model="field.currentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
|
||||
<el-select
|
||||
v-model="field.currentField.id"
|
||||
:placeholder="$t('dataset.pls_slc_union_field')"
|
||||
filterable
|
||||
clearable
|
||||
size="small"
|
||||
class="select-field"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in nodeFieldList"
|
||||
:key="item.id"
|
||||
@ -63,16 +129,32 @@
|
||||
>
|
||||
<span>
|
||||
<span v-if="item.deType === 0">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 1">
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 2 || item.deType === 3">
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 5">
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
@ -83,12 +165,19 @@
|
||||
</span>
|
||||
|
||||
<span class="column-last">
|
||||
<el-button :disabled="unionParam.node.unionToParent.unionFields && unionParam.node.unionToParent.unionFields.length === 1" icon="el-icon-delete" circle size="mini" @click="removeUnionItem(index)" />
|
||||
<el-button
|
||||
:disabled="
|
||||
unionParam.node.unionToParent.unionFields &&
|
||||
unionParam.node.unionToParent.unionFields.length === 1
|
||||
"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="removeUnionItem(index)"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -118,9 +207,7 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
@ -148,77 +235,99 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.union-container{
|
||||
<style lang="scss" scoped>
|
||||
.union-container {
|
||||
height: 275px;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
.union-header{
|
||||
.union-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
margin-bottom: 8px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.union-header-operator{
|
||||
.union-header-operator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
|
||||
.select-svg-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.union-selector{
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
margin-left: 6px;
|
||||
.union-selector {
|
||||
width: 180px;
|
||||
::v-deep.el-input__inner {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
.union-add{
|
||||
margin-left: 6px;
|
||||
.union-add {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.union-body{
|
||||
.union-body {
|
||||
height: 240px;
|
||||
width: 100%;
|
||||
}
|
||||
.union-body-header{
|
||||
height: 30px;
|
||||
.union-body-header {
|
||||
height: 46px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
.union-body-header .column{
|
||||
width: 240px;
|
||||
.union-body-header .column {
|
||||
width: 336px;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-right: 9px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.union-body-header .column-last{
|
||||
.union-body-header .column-last {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
.union-body-container{
|
||||
.union-body-container {
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.select-field{
|
||||
width: 200px;
|
||||
.select-field {
|
||||
width: 352px;
|
||||
display: inline-block;
|
||||
}
|
||||
.union-body-item{
|
||||
height: 36px;
|
||||
.union-body-item {
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.union-body-item .column{
|
||||
width: 240px;
|
||||
.union-body-item .column {
|
||||
width: 352px;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.union-body-item .column-last{
|
||||
.union-body-item .column-last {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
::v-deep i {
|
||||
font-size: 16px;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,30 @@
|
||||
<template>
|
||||
<div class="children-node node-container" :style="{height:nodeHeight}">
|
||||
<div class="children-node node-container" :style="{ height: nodeHeight }">
|
||||
<div class="node-line">
|
||||
<svg-icon v-if="childrenNode.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" @click="unionEdit" />
|
||||
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" @click="unionEdit" />
|
||||
<svg-icon v-else-if="childrenNode.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" @click="unionEdit" />
|
||||
<svg-icon v-else icon-class="no-join" class="join-icon" @click="unionEdit" />
|
||||
<svg-icon
|
||||
v-if="childrenNode.unionToParent.unionType === 'left'"
|
||||
icon-class="left-join"
|
||||
class="join-icon"
|
||||
@click="unionEdit"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="childrenNode.unionToParent.unionType === 'right'"
|
||||
icon-class="right-join"
|
||||
class="join-icon"
|
||||
@click="unionEdit"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else-if="childrenNode.unionToParent.unionType === 'inner'"
|
||||
icon-class="inner-join"
|
||||
class="join-icon"
|
||||
@click="unionEdit"
|
||||
/>
|
||||
<svg-icon
|
||||
v-else
|
||||
icon-class="no-join"
|
||||
class="join-icon"
|
||||
@click="unionEdit"
|
||||
/>
|
||||
|
||||
<svg class="join-svg-container">
|
||||
<path fill="none" stroke="#dcdfe6" :d="pathParam + lineLength" />
|
||||
@ -23,7 +43,7 @@
|
||||
<!--递归调用自身，完成树状结构-->
|
||||
<div>
|
||||
<union-node
|
||||
v-for="(item,index) in childrenNode.childrenDs"
|
||||
v-for="(item, index) in childrenNode.childrenDs"
|
||||
:key="index"
|
||||
:node-index="index"
|
||||
:children-node="item"
|
||||
@ -36,13 +56,29 @@
|
||||
</div>
|
||||
|
||||
<!--编辑关联关系-->
|
||||
<el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css" destroy-on-close>
|
||||
<el-drawer
|
||||
v-if="editUnion"
|
||||
:title="
|
||||
unionParam.type === 'add'
|
||||
? $t('dataset.add_union_relation')
|
||||
: $t('dataset.edit_union_relation')
|
||||
"
|
||||
:visible.sync="editUnion"
|
||||
custom-class="user-drawer union-dataset-drawer"
|
||||
size="840px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<union-edit :union-param="unionParam" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
|
||||
<div class="de-foot">
|
||||
<deBtn secondary @click="closeEditUnion()">{{
|
||||
$t('dataset.cancel')
|
||||
}}</deBtn>
|
||||
<deBtn type="primary" @click="confirmEditUnion()">{{
|
||||
$t('dataset.confirm')
|
||||
}}</deBtn>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -92,15 +128,15 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'childrenNode.allChildCount': function() {
|
||||
'childrenNode.allChildCount': function () {
|
||||
this.calcNodeHeight()
|
||||
this.nodeLineHeight()
|
||||
},
|
||||
nodeIndex: function() {
|
||||
nodeIndex: function () {
|
||||
this.calcNodeHeight()
|
||||
this.nodeLineHeight()
|
||||
},
|
||||
childrenList: function() {
|
||||
childrenList: function () {
|
||||
this.calcNodeHeight()
|
||||
this.nodeLineHeight()
|
||||
}
|
||||
@ -135,19 +171,28 @@ export default {
|
||||
} else {
|
||||
if (this.nodeIndex === 0) {
|
||||
this.pathParam = this.pathExt
|
||||
this.lineLength = this.childrenNode.allChildCount < 2 ? '' : ('l0,' + ((this.childrenNode.allChildCount - 1) * 40))
|
||||
} else if (this.nodeIndex === (this.childrenList.length - 1)) {
|
||||
this.lineLength =
|
||||
this.childrenNode.allChildCount < 2
|
||||
? ''
|
||||
: 'l0,' + (this.childrenNode.allChildCount - 1) * 40
|
||||
} else if (this.nodeIndex === this.childrenList.length - 1) {
|
||||
this.pathParam = this.pathMore
|
||||
this.lineLength = ''
|
||||
} else {
|
||||
this.pathParam = this.pathMoreExt
|
||||
this.lineLength = this.childrenNode.allChildCount < 2 ? '' : ('l0,' + ((this.childrenNode.allChildCount - 1) * 40))
|
||||
this.lineLength =
|
||||
this.childrenNode.allChildCount < 2
|
||||
? ''
|
||||
: 'l0,' + (this.childrenNode.allChildCount - 1) * 40
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算行高
|
||||
calcNodeHeight() {
|
||||
this.nodeHeight = this.childrenNode.allChildCount < 1 ? '40px' : (this.childrenNode.allChildCount * 40 + 'px')
|
||||
this.nodeHeight =
|
||||
this.childrenNode.allChildCount < 1
|
||||
? '40px'
|
||||
: this.childrenNode.allChildCount * 40 + 'px'
|
||||
},
|
||||
calc(param) {
|
||||
this.notifyFirstParent(param)
|
||||
@ -184,7 +229,12 @@ export default {
|
||||
if (this.unionParam.type === 'add') {
|
||||
this.childrenNode.childrenDs.pop()
|
||||
// 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
|
||||
this.notifyFirstParent({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
|
||||
this.notifyFirstParent({
|
||||
type: 'delete',
|
||||
grandParentAdd: true,
|
||||
grandParentSub: true,
|
||||
subCount: 0
|
||||
})
|
||||
} else {
|
||||
// 向第一级传递
|
||||
this.$emit('cancelUnionEdit', this.tempData)
|
||||
@ -217,7 +267,12 @@ export default {
|
||||
}
|
||||
for (let i = 0; i < union.unionFields.length; i++) {
|
||||
const ele = union.unionFields[i]
|
||||
if (!ele.parentField || !ele.parentField.id || !ele.currentField || !ele.currentField.id) {
|
||||
if (
|
||||
!ele.parentField ||
|
||||
!ele.parentField.id ||
|
||||
!ele.currentField ||
|
||||
!ele.currentField.id
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
@ -228,30 +283,34 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.node-container{
|
||||
.node-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.join-icon{
|
||||
.join-icon {
|
||||
height: 26px;
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
color:#dcdfe6;
|
||||
color: #dcdfe6;
|
||||
}
|
||||
.join-svg-container{
|
||||
width:60px;
|
||||
.join-svg-container {
|
||||
width: 60px;
|
||||
}
|
||||
.node-line{
|
||||
.node-line {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
.join-icon:hover{
|
||||
.join-icon:hover {
|
||||
cursor: pointer;
|
||||
color: var(--Main,#2681ff);
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 0 20px;
|
||||
color: var(--Main, #2681ff);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.union-dataset-drawer {
|
||||
.el-drawer__body {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,29 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="text item">
|
||||
<ux-grid
|
||||
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>
|
||||
<span class="table-count">
|
||||
{{ $t('dataset.preview_show') }}
|
||||
<span class="span-number">1000</span>
|
||||
{{ $t('dataset.preview_item') }}
|
||||
</span>
|
||||
<div class="table-preview">
|
||||
<ux-grid
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%"
|
||||
height="100%"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
@ -50,21 +43,17 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'table': function() {
|
||||
table: function () {
|
||||
this.initPreview()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initHeight()
|
||||
this.initPreview()
|
||||
},
|
||||
methods: {
|
||||
initHeight() {
|
||||
this.height = (document.getElementsByClassName('el-drawer__body')[0].clientHeight - 40) + 'px'
|
||||
},
|
||||
initPreview() {
|
||||
if (this.dataset && this.dataset.length > 0) {
|
||||
post('/dataset/table/unionPreview', this.table).then(response => {
|
||||
post('/dataset/table/unionPreview', this.table).then((response) => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
@ -82,13 +71,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.span-number{
|
||||
color: #0a7be0;
|
||||
}
|
||||
.table-count{
|
||||
color: #606266;
|
||||
}
|
||||
span{
|
||||
font-size: 12px;
|
||||
.table-preview {
|
||||
height: calc(100% - 64px);
|
||||
padding: 18px 25px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
256
frontend/src/views/dataset/common/DatasetDetail.vue
Normal file
256
frontend/src/views/dataset/common/DatasetDetail.vue
Normal file
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div v-if="tabStatus" class="info-tab">
|
||||
<div v-if="type === 'chart' && detail.chart" class="info-card">
|
||||
<div class="info-item">
|
||||
<p class="info-title">
|
||||
{{ $t('chart.datalist') + $t('desearchbutton.text') }}
|
||||
</p>
|
||||
<p class="info-content">{{ detail.chart.name }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('chart.chart_type') }}</p>
|
||||
<svg-icon v-if="detail.chart.type" :icon-class="detail.chart.type" />
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('chart.title') }}</p>
|
||||
<p class="info-content">{{ detail.chart.title || 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.create_by') }}</p>
|
||||
<p class="info-content">{{ detail.chart.createBy }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.create_time') }}</p>
|
||||
<p class="info-content">
|
||||
{{ detail.chart.createTime | timestampFormatDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detail.table" class="info-card">
|
||||
<div class="info-item">
|
||||
<p class="info-title">
|
||||
{{ $t('dataset.datalist') + $t('desearchbutton.text') }}
|
||||
</p>
|
||||
<p class="info-content">{{ detail.table.name }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.type') }}</p>
|
||||
<p v-if="detail.table.type === 'db'" class="info-content">
|
||||
{{ $t('dataset.db_data') }}
|
||||
</p>
|
||||
<p v-if="detail.table.type === 'sql'" class="info-content">
|
||||
{{ $t('dataset.sql_data') }}
|
||||
</p>
|
||||
<p v-if="detail.table.type === 'excel'" class="info-content">
|
||||
{{ $t('dataset.excel_data') }}
|
||||
</p>
|
||||
<p v-if="detail.table.type === 'custom'" class="info-content">
|
||||
{{ $t('dataset.custom_data') }}
|
||||
</p>
|
||||
<p v-if="detail.table.type === 'union'" class="info-content">
|
||||
{{ $t('dataset.union_data') }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-show="detail.table.type === 'db'" class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.table') }}</p>
|
||||
<p class="info-content">{{ info.table }}</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="detail.table.type === 'db' || detail.table.type === 'sql'"
|
||||
class="info-item"
|
||||
>
|
||||
<p class="info-title">{{ $t('dataset.mode') }}</p>
|
||||
<p v-if="detail.table.mode === 0" class="info-content">
|
||||
{{ $t('dataset.direct_connect') }}
|
||||
</p>
|
||||
<p v-if="detail.table.mode === 1" class="info-content">
|
||||
{{ $t('dataset.sync_data') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.create_by') }}</p>
|
||||
<p class="info-content">{{ detail.table.createBy }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.create_time') }}</p>
|
||||
<p class="info-content">
|
||||
{{ detail.table.createTime | timestampFormatDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="detail.datasource" class="info-card">
|
||||
<div class="info-item">
|
||||
<p class="info-title">
|
||||
{{ $t('datasource.datasource') + $t('desearchbutton.text') }}
|
||||
</p>
|
||||
<p class="info-content">{{ detail.datasource.name }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('commons.description') }}</p>
|
||||
<p class="info-content">{{ detail.datasource.desc || 'N/A' }}</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('datasource.type') }}</p>
|
||||
<p v-if="detail.datasource.type === 'mysql'" class="info-content">
|
||||
MySQL
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'sqlServer'" class="info-content">
|
||||
SQL Server
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'oracle'" class="info-content">
|
||||
Oracle
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'hive'" class="info-content">
|
||||
Apache Hive
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'pg'" class="info-content">
|
||||
PostgreSQL
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'es'" class="info-content">
|
||||
Elasticsearch
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'mariadb'" class="info-content">
|
||||
MariaDB
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'ds_doris'" class="info-content">
|
||||
Doris
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'ck'" class="info-content">
|
||||
ClickHouse
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'redshift'" class="info-content">
|
||||
AWS Redshift
|
||||
</p>
|
||||
<p v-if="detail.datasource.type === 'mongo'" class="info-content">
|
||||
MongoDB
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<p class="info-title">{{ $t('dataset.create_time') }}</p>
|
||||
<p class="info-content">
|
||||
{{ detail.datasource.createTime | timestampFormatDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'DatasetChartDetail',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
tabStatus: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabActive: 'chart',
|
||||
detail: {
|
||||
chart: {},
|
||||
table: {},
|
||||
datasource: {}
|
||||
},
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: function () {
|
||||
this.init()
|
||||
},
|
||||
type: function () {
|
||||
this.typeChange()
|
||||
},
|
||||
tabStatus: function () {
|
||||
this.typeChange()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.data.id) {
|
||||
if (this.type === 'dataset') {
|
||||
post(
|
||||
'/dataset/table/datasetDetail/' + this.data.id,
|
||||
null,
|
||||
false
|
||||
).then((res) => {
|
||||
this.detail = res.data
|
||||
this.info = JSON.parse(res.data.table.info)
|
||||
})
|
||||
} else if (this.type === 'chart') {
|
||||
post(
|
||||
'/chart/view/chartDetail/' + this.data.id + '/' + this.panelInfo.id,
|
||||
null,
|
||||
false
|
||||
).then((res) => {
|
||||
this.detail = res.data
|
||||
this.info = JSON.parse(res.data.table.info)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
typeChange() {
|
||||
if (this.type === 'dataset') {
|
||||
this.tabActive = 'table'
|
||||
} else if (this.type === 'chart') {
|
||||
this.tabActive = 'chart'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info-tab {
|
||||
padding: 0 4;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.info-card {
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
|
||||
.info-item {
|
||||
margin: 6px 0;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
margin-bottom: 8px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.info-title {
|
||||
font-size: 12px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.info-content {
|
||||
font-size: 14px;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -37,7 +37,7 @@
|
||||
@node-collapse="nodeCollapse"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
<span style="display: flex; flex: 1; width: 0">
|
||||
<span v-if="data.type === 'scene'">
|
||||
<!-- <el-button-->
|
||||
<!-- icon="el-icon-folder-opened"-->
|
||||
@ -46,7 +46,16 @@
|
||||
<!-- />-->
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
@ -60,7 +69,13 @@
|
||||
<span class="title-text scene-title-name" :title="currGroup.name">
|
||||
{{ currGroup.name }}
|
||||
</span>
|
||||
<el-button icon="el-icon-back" size="mini" style="float: right" circle @click="back">
|
||||
<el-button
|
||||
icon="el-icon-back"
|
||||
size="mini"
|
||||
style="float: right"
|
||||
circle
|
||||
@click="back"
|
||||
>
|
||||
<!-- {{ $t('dataset.back') }}-->
|
||||
</el-button>
|
||||
</el-row>
|
||||
@ -90,20 +105,57 @@
|
||||
@node-click="sceneClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node-list">
|
||||
<span :id="data.id" style="display: flex;flex: 1;width: 0;">
|
||||
<span :id="data.id" style="display: flex; flex: 1; width: 0">
|
||||
<span>
|
||||
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
|
||||
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
|
||||
<svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
|
||||
<svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
|
||||
<svg-icon v-if="data.type === 'union'" icon-class="ds-union" class="ds-icon-union" />
|
||||
<svg-icon v-if="data.type === 'api'" icon-class="ds-api" class="ds-icon-api" />
|
||||
<svg-icon
|
||||
v-if="data.type === 'db'"
|
||||
icon-class="ds-db"
|
||||
class="ds-icon-db"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.type === 'sql'"
|
||||
icon-class="ds-sql"
|
||||
class="ds-icon-sql"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.type === 'excel'"
|
||||
icon-class="ds-excel"
|
||||
class="ds-icon-excel"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.type === 'custom'"
|
||||
icon-class="ds-custom"
|
||||
class="ds-icon-custom"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.type === 'union'"
|
||||
icon-class="ds-union"
|
||||
class="ds-icon-union"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.type === 'api'"
|
||||
icon-class="ds-api"
|
||||
class="ds-icon-api"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="data.type === 'db' || data.type === 'sql'">
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"
|
||||
><i class="el-icon-s-operation"
|
||||
/></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"
|
||||
><i class="el-icon-alarm-clock"
|
||||
/></span>
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
@ -115,7 +167,7 @@
|
||||
|
||||
<script>
|
||||
import { isKettleRunning, post } from '@/api/dataset/dataset'
|
||||
import {engineMode} from "@/api/system/engine";
|
||||
import { engineMode } from '@/api/system/engine'
|
||||
|
||||
export default {
|
||||
name: 'DatasetGroupSelector',
|
||||
@ -179,33 +231,45 @@ export default {
|
||||
sort: 'type asc,create_time desc,name asc'
|
||||
},
|
||||
dsLoading: false,
|
||||
treeStyle: this.fixHeight ? {
|
||||
height: '200px',
|
||||
overflow: 'auto'
|
||||
} : {},
|
||||
treeStyle: this.fixHeight
|
||||
? {
|
||||
height: '200px',
|
||||
overflow: 'auto'
|
||||
}
|
||||
: {},
|
||||
filterText: ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
'unionData': function() {
|
||||
unionData: function () {
|
||||
this.unionDataChange()
|
||||
},
|
||||
'table': function() {
|
||||
table: function () {
|
||||
if (this.table && this.table.sceneId) {
|
||||
post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(response => {
|
||||
this.currGroup = response.data
|
||||
post('dataset/group/getScene/' + this.table.sceneId, {}, false).then(
|
||||
(response) => {
|
||||
this.currGroup = response.data
|
||||
|
||||
this.$nextTick(function() {
|
||||
this.sceneMode = true
|
||||
this.tableTree()
|
||||
})
|
||||
})
|
||||
this.$nextTick(function () {
|
||||
this.sceneMode = true
|
||||
this.tableTree()
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
search(val) {
|
||||
if (val && val !== '') {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
|
||||
this.tableData = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.tables.filter((ele) => {
|
||||
return ele.name
|
||||
.toLocaleLowerCase()
|
||||
.includes(val.toLocaleLowerCase())
|
||||
})
|
||||
)
|
||||
)
|
||||
} else {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
}
|
||||
@ -220,7 +284,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
engineMode().then(res => {
|
||||
engineMode().then((res) => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
},
|
||||
@ -230,7 +294,7 @@ export default {
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
kettleState() {
|
||||
isKettleRunning(false).then(res => {
|
||||
isKettleRunning(false).then((res) => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
},
|
||||
@ -255,7 +319,7 @@ export default {
|
||||
|
||||
tree(group) {
|
||||
this.dsLoading = true
|
||||
post('/dataset/group/tree', group, false).then(response => {
|
||||
post('/dataset/group/tree', group, false).then((response) => {
|
||||
this.data = response.data
|
||||
this.dsLoading = false
|
||||
})
|
||||
@ -265,29 +329,39 @@ export default {
|
||||
this.tableData = []
|
||||
if (this.currGroup) {
|
||||
this.dsLoading = true
|
||||
post('/dataset/table/list', {
|
||||
sort: 'type asc,name asc,create_time desc',
|
||||
sceneId: this.currGroup.id,
|
||||
mode: this.mode < 0 ? null : this.mode,
|
||||
typeFilter: this.customType ? this.customType : null
|
||||
}, false).then(response => {
|
||||
this.tables = response.data.filter(ele => {
|
||||
return !(ele.mode === 0 && ele.type === 'sql')
|
||||
})
|
||||
for (let i = 0; i < this.tables.length; i++) {
|
||||
if (this.tables[i].mode === 1 && this.kettleRunning === false && this.engineMode !== 'simple' ) {
|
||||
this.$set(this.tables[i], 'disabled', true)
|
||||
post(
|
||||
'/dataset/table/list',
|
||||
{
|
||||
sort: 'type asc,name asc,create_time desc',
|
||||
sceneId: this.currGroup.id,
|
||||
mode: this.mode < 0 ? null : this.mode,
|
||||
typeFilter: this.customType ? this.customType : null
|
||||
},
|
||||
false
|
||||
)
|
||||
.then((response) => {
|
||||
this.tables = response.data.filter((ele) => {
|
||||
return !(ele.mode === 0 && ele.type === 'sql')
|
||||
})
|
||||
for (let i = 0; i < this.tables.length; i++) {
|
||||
if (
|
||||
this.tables[i].mode === 1 &&
|
||||
this.kettleRunning === false &&
|
||||
this.engineMode !== 'simple'
|
||||
) {
|
||||
this.$set(this.tables[i], 'disabled', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
|
||||
this.$nextTick(function() {
|
||||
this.unionDataChange()
|
||||
this.$nextTick(function () {
|
||||
this.unionDataChange()
|
||||
})
|
||||
this.dsLoading = false
|
||||
})
|
||||
.catch((res) => {
|
||||
this.dsLoading = false
|
||||
})
|
||||
this.dsLoading = false
|
||||
}).catch(res => {
|
||||
this.dsLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -323,9 +397,13 @@ export default {
|
||||
}
|
||||
// check mode=1的数据集是否创建doris表
|
||||
if (data.mode === 1 && !this.showMode) {
|
||||
post('/dataset/table/checkDorisTableIsExists/' + data.id, {}, false).then(response => {
|
||||
post(
|
||||
'/dataset/table/checkDorisTableIsExists/' + data.id,
|
||||
{},
|
||||
false
|
||||
).then((response) => {
|
||||
if (response.data) {
|
||||
this.$nextTick(function() {
|
||||
this.$nextTick(function () {
|
||||
this.$emit('getTable', data)
|
||||
})
|
||||
} else {
|
||||
@ -346,7 +424,7 @@ export default {
|
||||
return
|
||||
}
|
||||
if (!this.checkedList || this.checkedList.length === 0) {
|
||||
this.tableData.forEach(ele => {
|
||||
this.tableData.forEach((ele) => {
|
||||
const span = document.getElementById(ele.id).parentNode
|
||||
const div1 = span.parentNode
|
||||
const div2 = div1.parentNode
|
||||
@ -356,16 +434,18 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
const tableList = this.tableData.map(ele => {
|
||||
const tableList = this.tableData.map((ele) => {
|
||||
return ele.id
|
||||
})
|
||||
const unionList = this.unionData.map(ele => {
|
||||
const unionList = this.unionData.map((ele) => {
|
||||
return ele.targetTableId
|
||||
})
|
||||
unionList.push(this.checkedList[0].tableId)
|
||||
const notUnionList = tableList.concat(unionList).filter(v => tableList.includes(v) && !unionList.includes(v))
|
||||
const notUnionList = tableList
|
||||
.concat(unionList)
|
||||
.filter((v) => tableList.includes(v) && !unionList.includes(v))
|
||||
|
||||
notUnionList.forEach(ele => {
|
||||
notUnionList.forEach((ele) => {
|
||||
const span = document.getElementById(ele).parentNode
|
||||
const div1 = span.parentNode
|
||||
const div2 = div1.parentNode
|
||||
@ -390,65 +470,65 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.search-input {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf{
|
||||
display: none;
|
||||
}
|
||||
.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.custom-tree-node-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding:0 8px;
|
||||
}
|
||||
.custom-tree-node-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title-css {
|
||||
height: 26px;
|
||||
}
|
||||
.title-css {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.scene-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.scene-title-name{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.scene-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.scene-title-name {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,11 +23,15 @@
|
||||
<el-col :span="8">
|
||||
<el-dropdown>
|
||||
<el-button size="mini" type="primary">
|
||||
{{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
{{ searchMap[searchType]
|
||||
}}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="searchTypeClick('all')">{{ $t('commons.all') }}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="searchTypeClick('folder')">{{ this.$t('commons.folder') }}
|
||||
<el-dropdown-item @click.native="searchTypeClick('all')">{{
|
||||
$t('commons.all')
|
||||
}}</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="searchTypeClick('folder')"
|
||||
>{{ this.$t('commons.folder') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
@ -47,29 +51,88 @@
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span v-if="data.modelInnerType === 'group'" slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
<span
|
||||
v-if="data.modelInnerType === 'group'"
|
||||
slot-scope="{ node, data }"
|
||||
class="custom-tree-node"
|
||||
>
|
||||
<span style="display: flex; flex: 1; width: 0">
|
||||
<span v-if="data.modelInnerType === 'scene'">
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else slot-scope="{ node, data }" class="custom-tree-node-list">
|
||||
<span :id="data.id" style="display: flex;flex: 1;width: 0;">
|
||||
<span
|
||||
v-else
|
||||
slot-scope="{ node, data }"
|
||||
class="custom-tree-node-list"
|
||||
>
|
||||
<span :id="data.id" style="display: flex; flex: 1; width: 0">
|
||||
<span>
|
||||
<svg-icon v-if="data.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
|
||||
<svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
|
||||
<svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
|
||||
<svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
|
||||
<svg-icon v-if="data.modelInnerType === 'union'" icon-class="ds-union" class="ds-icon-union" />
|
||||
<svg-icon v-if="data.modelInnerType === 'api'" icon-class="ds-api" class="ds-icon-api" />
|
||||
<svg-icon
|
||||
v-if="data.modelInnerType === 'db'"
|
||||
icon-class="ds-db"
|
||||
class="ds-icon-db"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.modelInnerType === 'sql'"
|
||||
icon-class="ds-sql"
|
||||
class="ds-icon-sql"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.modelInnerType === 'excel'"
|
||||
icon-class="ds-excel"
|
||||
class="ds-icon-excel"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.modelInnerType === 'custom'"
|
||||
icon-class="ds-custom"
|
||||
class="ds-icon-custom"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.modelInnerType === 'union'"
|
||||
icon-class="ds-union"
|
||||
class="ds-icon-union"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="data.modelInnerType === 'api'"
|
||||
icon-class="ds-api"
|
||||
class="ds-icon-api"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
|
||||
<span
|
||||
v-if="
|
||||
data.modelInnerType === 'db' ||
|
||||
data.modelInnerType === 'sql'
|
||||
"
|
||||
>
|
||||
<span v-if="data.mode === 0" style="margin-left: 6px"
|
||||
><i class="el-icon-s-operation"
|
||||
/></span>
|
||||
<span v-if="data.mode === 1" style="margin-left: 6px"
|
||||
><i class="el-icon-alarm-clock"
|
||||
/></span>
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
@ -178,18 +241,20 @@ export default {
|
||||
parentId: 'pid'
|
||||
},
|
||||
isTreeSearch: false,
|
||||
treeStyle: this.fixHeight ? {
|
||||
height: '300px',
|
||||
overflow: 'auto'
|
||||
} : {}
|
||||
treeStyle: this.fixHeight
|
||||
? {
|
||||
height: '300px',
|
||||
overflow: 'auto'
|
||||
}
|
||||
: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
'unionData': function() {
|
||||
unionData: function () {
|
||||
this.unionDataChange()
|
||||
},
|
||||
'table': function() {
|
||||
table: function () {
|
||||
this.treeNode()
|
||||
},
|
||||
filterText(val) {
|
||||
@ -205,8 +270,7 @@ export default {
|
||||
this.treeNode()
|
||||
this.initExpand()
|
||||
},
|
||||
created() {
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
close() {
|
||||
this.editGroup = false
|
||||
@ -232,19 +296,22 @@ export default {
|
||||
},
|
||||
treeNode(cache) {
|
||||
const modelInfo = localStorage.getItem('dataset-tree')
|
||||
const userCache = (modelInfo && cache)
|
||||
const userCache = modelInfo && cache
|
||||
if (userCache) {
|
||||
this.data = JSON.parse(modelInfo)
|
||||
}
|
||||
this.customType ? this.customType.push('group') : null
|
||||
queryAuthModel({
|
||||
modelType: 'dataset',
|
||||
privileges: this.privileges,
|
||||
datasetMode: this.mode,
|
||||
clearEmptyDir: this.clearEmptyDir,
|
||||
mode: this.mode < 0 ? null : this.mode,
|
||||
modelInnerTypeArray: this.customType
|
||||
}, !userCache).then(res => {
|
||||
queryAuthModel(
|
||||
{
|
||||
modelType: 'dataset',
|
||||
privileges: this.privileges,
|
||||
datasetMode: this.mode,
|
||||
clearEmptyDir: this.clearEmptyDir,
|
||||
mode: this.mode < 0 ? null : this.mode,
|
||||
modelInnerTypeArray: this.customType
|
||||
},
|
||||
!userCache
|
||||
).then((res) => {
|
||||
if (cache) {
|
||||
localStorage.setItem('dataset-tree', JSON.stringify(res.data))
|
||||
}
|
||||
@ -280,9 +347,13 @@ export default {
|
||||
}
|
||||
// check mode=1的数据集是否创建doris表
|
||||
if (data.mode === 1 && !this.showMode) {
|
||||
post('/dataset/table/checkDorisTableIsExists/' + data.id, {}, false).then(response => {
|
||||
post(
|
||||
'/dataset/table/checkDorisTableIsExists/' + data.id,
|
||||
{},
|
||||
false
|
||||
).then((response) => {
|
||||
if (response.data) {
|
||||
this.$nextTick(function() {
|
||||
this.$nextTick(function () {
|
||||
this.$emit('getTable', data)
|
||||
})
|
||||
} else {
|
||||
@ -303,7 +374,7 @@ export default {
|
||||
return
|
||||
}
|
||||
if (!this.checkedList || this.checkedList.length === 0) {
|
||||
this.tableData.forEach(ele => {
|
||||
this.tableData.forEach((ele) => {
|
||||
const span = document.getElementById(ele.id).parentNode
|
||||
const div1 = span.parentNode
|
||||
const div2 = div1.parentNode
|
||||
@ -313,15 +384,17 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
const tableList = this.tableData.map(ele => {
|
||||
const tableList = this.tableData.map((ele) => {
|
||||
return ele.id
|
||||
})
|
||||
const unionList = this.unionData.map(ele => {
|
||||
const unionList = this.unionData.map((ele) => {
|
||||
return ele.targetTableId
|
||||
})
|
||||
unionList.push(this.checkedList[0].tableId)
|
||||
const notUnionList = tableList.concat(unionList).filter(v => tableList.includes(v) && !unionList.includes(v))
|
||||
notUnionList.forEach(ele => {
|
||||
const notUnionList = tableList
|
||||
.concat(unionList)
|
||||
.filter((v) => tableList.includes(v) && !unionList.includes(v))
|
||||
notUnionList.forEach((ele) => {
|
||||
const span = document.getElementById(ele).parentNode
|
||||
const div1 = span.parentNode
|
||||
const div2 = div1.parentNode
|
||||
@ -343,7 +416,10 @@ export default {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
if (this.searchType === 'folder') {
|
||||
if (data.modelInnerType === 'group' && data.label.indexOf(value) !== -1) {
|
||||
if (
|
||||
data.modelInnerType === 'group' &&
|
||||
data.label.indexOf(value) !== -1
|
||||
) {
|
||||
this.searchPids.push(data.id)
|
||||
return true
|
||||
}
|
||||
@ -367,12 +443,12 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0
|
||||
margin: 12px 0;
|
||||
}
|
||||
.search-input {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf{
|
||||
.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf {
|
||||
display: none;
|
||||
}
|
||||
.custom-tree-node {
|
||||
@ -389,7 +465,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding:0 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
@ -407,11 +483,11 @@ export default {
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
.scene-title{
|
||||
.scene-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.scene-title-name{
|
||||
.scene-title-name {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<el-col ref="container" v-loading="dataLoading" style="width: 100%;height:100%">
|
||||
<el-col
|
||||
ref="container"
|
||||
v-loading="dataLoading"
|
||||
style="width: 100%; height: 100%"
|
||||
>
|
||||
<span>{{ table.name }}</span>
|
||||
<ux-grid
|
||||
id="dsData"
|
||||
ref="plxTable"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
style="width: 100%"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:checkbox-config="{ highlight: true }"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
@ -18,15 +22,33 @@
|
||||
:resizable="true"
|
||||
>
|
||||
<template slot="header">
|
||||
<svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon
|
||||
v-if="field.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 2 || field.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
<span>{{ field.name }}</span>
|
||||
</template>
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
<span v-if="table.name" style="font-size: 12px;">{{ $t('chart.preview_100_data') }}</span>
|
||||
<span v-if="table.name" style="font-size: 12px">{{
|
||||
$t('chart.preview_100_data')
|
||||
}}</span>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
@ -62,7 +84,8 @@ export default {
|
||||
// }
|
||||
// this.height = window.innerHeight / 3
|
||||
this.$nextTick(() => {
|
||||
this.height = document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5
|
||||
this.height =
|
||||
document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
@ -72,21 +95,23 @@ export default {
|
||||
if (this.table.id) {
|
||||
this.dataLoading = true
|
||||
this.table.row = 100
|
||||
post('/dataset/table/getPreviewData/1/100', this.table, false,30000).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
if (response.data.status === 'warnning') {
|
||||
this.$warning(response.data.msg, 3000)
|
||||
}
|
||||
if (response.data.status === 'error') {
|
||||
this.$error(response.data.msg, 3000)
|
||||
}
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
this.dataLoading = false
|
||||
}).catch(res => {
|
||||
this.dataLoading = false
|
||||
})
|
||||
post('/dataset/table/getPreviewData/1/100', this.table, false, 30000)
|
||||
.then((response) => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
if (response.data.status === 'warnning') {
|
||||
this.$warning(response.data.msg, 3000)
|
||||
}
|
||||
if (response.data.status === 'error') {
|
||||
this.$error(response.data.msg, 3000)
|
||||
}
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
this.dataLoading = false
|
||||
})
|
||||
.catch((res) => {
|
||||
this.dataLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -99,5 +124,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
437
frontend/src/views/dataset/common/datasetTree.vue
Normal file
437
frontend/src/views/dataset/common/datasetTree.vue
Normal file
@ -0,0 +1,437 @@
|
||||
<template>
|
||||
<div class="ds-move-tree">
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
size="small"
|
||||
:placeholder="$t('commons.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 16px"
|
||||
clearable
|
||||
class="main-area-input"
|
||||
/>
|
||||
<div class="tree">
|
||||
<el-tree
|
||||
ref="datasetTreeRef"
|
||||
class="de-tree"
|
||||
:current-node-key="checkedTable ? checkedTable.id : ''"
|
||||
:default-expanded-keys="expandedArray"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
:expand-on-click-node="true"
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span
|
||||
v-if="data.modelInnerType === 'group'"
|
||||
slot-scope="{ data }"
|
||||
class="custom-tree-node"
|
||||
>
|
||||
<span style="display: flex; flex: 1; width: 0">
|
||||
<span v-if="data.modelInnerType === 'group'">
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else slot-scope="{ data }" class="custom-tree-node-list">
|
||||
<span :id="data.id" style="display: flex; flex: 1; width: 0">
|
||||
<span>
|
||||
<svg-icon
|
||||
:icon-class="`ds-${data.modelInnerType}`"
|
||||
:class="`ds-icon-${data.modelInnerType}`"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryAuthModel } from '@/api/authModel/authModel'
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'DatasetGroupSelectorTree',
|
||||
props: {
|
||||
fixHeight: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
customType: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
mode: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: -1
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
unionData: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
checkedList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
table: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
showMode: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
privileges: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'use'
|
||||
},
|
||||
clearEmptyDir: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
checkedTable: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchPids: [], // 查询命中的pid
|
||||
filterText: '',
|
||||
searchType: 'all',
|
||||
searchMap: {
|
||||
all: this.$t('commons.all'),
|
||||
folder: this.$t('commons.folder')
|
||||
},
|
||||
sceneMode: false,
|
||||
search: '',
|
||||
data: [],
|
||||
tableData: [],
|
||||
tables: [],
|
||||
currGroup: null,
|
||||
expandedArray: [],
|
||||
groupForm: {
|
||||
name: '',
|
||||
pid: '0',
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
},
|
||||
tableForm: {
|
||||
name: '',
|
||||
sort: 'type asc,create_time desc,name asc'
|
||||
},
|
||||
dsLoading: false,
|
||||
treeProps: {
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
isLeaf: 'isLeaf',
|
||||
id: 'id',
|
||||
parentId: 'pid'
|
||||
},
|
||||
isTreeSearch: false,
|
||||
treeStyle: this.fixHeight
|
||||
? {
|
||||
height: '300px',
|
||||
overflow: 'auto'
|
||||
}
|
||||
: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
unionData: function () {
|
||||
this.unionDataChange()
|
||||
},
|
||||
table: function () {
|
||||
this.treeNode()
|
||||
},
|
||||
filterText(val) {
|
||||
this.searchPids = []
|
||||
this.$refs.datasetTreeRef.filter(val)
|
||||
},
|
||||
searchType(val) {
|
||||
this.searchPids = []
|
||||
this.$refs.datasetTreeRef.filter(this.filterText)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.treeNode()
|
||||
this.initExpand()
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
close() {
|
||||
this.editGroup = false
|
||||
this.groupForm = {
|
||||
name: '',
|
||||
pid: '0',
|
||||
level: 0,
|
||||
type: '',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
}
|
||||
},
|
||||
closeTable() {
|
||||
this.editTable = false
|
||||
this.tableForm = {
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
initExpand() {
|
||||
if (this.checkedTable && this.checkedTable.pid) {
|
||||
this.expandedArray.push(this.checkedTable.pid)
|
||||
}
|
||||
},
|
||||
treeNode(cache) {
|
||||
const modelInfo = localStorage.getItem('dataset-tree')
|
||||
const userCache = modelInfo && cache
|
||||
if (userCache) {
|
||||
this.data = JSON.parse(modelInfo)
|
||||
}
|
||||
this.customType ? this.customType.push('group') : null
|
||||
queryAuthModel(
|
||||
{
|
||||
modelType: 'dataset',
|
||||
privileges: this.privileges,
|
||||
datasetMode: this.mode,
|
||||
clearEmptyDir: this.clearEmptyDir,
|
||||
mode: this.mode < 0 ? null : this.mode,
|
||||
modelInnerTypeArray: this.customType
|
||||
},
|
||||
!userCache
|
||||
).then((res) => {
|
||||
if (cache) {
|
||||
localStorage.setItem('dataset-tree', JSON.stringify(res.data))
|
||||
}
|
||||
if (!userCache) {
|
||||
this.data = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
nodeClick(data, node) {
|
||||
if (data.modelInnerType !== 'group') {
|
||||
this.sceneClick(data, node)
|
||||
}
|
||||
if (node.expanded) {
|
||||
this.expandedArray.push(data.id)
|
||||
} else {
|
||||
const index = this.expandedArray.indexOf(data.id)
|
||||
if (index > -1) {
|
||||
this.expandedArray.splice(index, 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
back() {
|
||||
this.sceneMode = false
|
||||
},
|
||||
sceneClick(data, node) {
|
||||
if (data.disabled) {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: this.$t('dataset.invalid_dataset'),
|
||||
showClose: true
|
||||
})
|
||||
return
|
||||
}
|
||||
// check mode=1的数据集是否创建doris表
|
||||
if (data.mode === 1 && !this.showMode) {
|
||||
post(
|
||||
'/dataset/table/checkDorisTableIsExists/' + data.id,
|
||||
{},
|
||||
false
|
||||
).then((response) => {
|
||||
if (response.data) {
|
||||
this.$nextTick(function () {
|
||||
this.$emit('getTable', data)
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: this.$t('dataset.invalid_table_check'),
|
||||
showClose: true
|
||||
})
|
||||
this.$emit('getTable', {})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$emit('getTable', data)
|
||||
}
|
||||
},
|
||||
unionDataChange() {
|
||||
if (!this.sceneMode) {
|
||||
return
|
||||
}
|
||||
if (!this.checkedList || this.checkedList.length === 0) {
|
||||
this.tableData.forEach((ele) => {
|
||||
const span = document.getElementById(ele.id).parentNode
|
||||
const div1 = span.parentNode
|
||||
const div2 = div1.parentNode
|
||||
span.style.removeProperty('color')
|
||||
div1.style.removeProperty('cursor')
|
||||
div2.style.removeProperty('pointer-events')
|
||||
})
|
||||
return
|
||||
}
|
||||
const tableList = this.tableData.map((ele) => {
|
||||
return ele.id
|
||||
})
|
||||
const unionList = this.unionData.map((ele) => {
|
||||
return ele.targetTableId
|
||||
})
|
||||
unionList.push(this.checkedList[0].tableId)
|
||||
const notUnionList = tableList
|
||||
.concat(unionList)
|
||||
.filter((v) => tableList.includes(v) && !unionList.includes(v))
|
||||
notUnionList.forEach((ele) => {
|
||||
const span = document.getElementById(ele).parentNode
|
||||
const div1 = span.parentNode
|
||||
const div2 = div1.parentNode
|
||||
span.style.setProperty('color', '#c0c4cc')
|
||||
div1.style.setProperty('cursor', 'not-allowed')
|
||||
div2.style.setProperty('pointer-events', 'none')
|
||||
})
|
||||
},
|
||||
nodeExpand(data) {
|
||||
if (data.id) {
|
||||
this.expandedArray.push(data.id)
|
||||
}
|
||||
},
|
||||
nodeCollapse(data) {
|
||||
if (data.id) {
|
||||
this.expandedArray.splice(this.expandedArray.indexOf(data.id), 1)
|
||||
}
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
if (this.searchType === 'folder') {
|
||||
if (
|
||||
data.modelInnerType === 'group' &&
|
||||
data.label.indexOf(value) !== -1
|
||||
) {
|
||||
this.searchPids.push(data.id)
|
||||
return true
|
||||
}
|
||||
if (this.searchPids.indexOf(data.pid) !== -1) {
|
||||
if (data.modelInnerType === 'group') {
|
||||
this.searchPids.push(data.id)
|
||||
}
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return data.label.indexOf(value) !== -1
|
||||
}
|
||||
return false
|
||||
},
|
||||
searchTypeClick(searchTypeInfo) {
|
||||
this.searchType = searchTypeInfo
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.search-input {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.tree-list ::v-deep .el-tree-node__expand-icon.is-leaf {
|
||||
display: none;
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.custom-tree-node-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
.form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.title-css {
|
||||
height: 26px;
|
||||
}
|
||||
.title-text {
|
||||
line-height: 26px;
|
||||
}
|
||||
.scene-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.scene-title-name {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tree-style {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.ds-move-tree {
|
||||
height: 100%;
|
||||
.tree {
|
||||
height: calc(100% - 115px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +1,28 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-form ref="form" :model="fieldForm" size="mini" class="row-style">
|
||||
<el-form-item>
|
||||
<span style="width: 60px;font-size: 12px">{{ $t('dataset.field_name') }}</span>
|
||||
<el-input v-model="fieldForm.name" size="mini" :placeholder="$t('dataset.input_name')" />
|
||||
<div class="calcu-feild">
|
||||
<el-form ref="form" :model="fieldForm" class="de-form-item">
|
||||
<el-form-item :label="$t('dataset.field_name')">
|
||||
<el-input
|
||||
v-model="fieldForm.name"
|
||||
size="small"
|
||||
:placeholder="$t('dataset.input_name')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row style="height: 420px;">
|
||||
<el-col :span="14" style="height: 100%">
|
||||
<div class="calcu-cont" style="height: 544px">
|
||||
<div style="flex: 1">
|
||||
<el-row>
|
||||
<el-row>
|
||||
<span>
|
||||
<span class="mb8">
|
||||
{{ $t('dataset.field_exp') }}
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
表达式语法请遵循该数据源对应的数据库语法。
|
||||
<br>
|
||||
<br />
|
||||
数据集中不支持聚合运算。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
<i class="el-icon-info" style="cursor: pointer" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<codemirror
|
||||
@ -32,149 +35,196 @@
|
||||
@input="onCmCodeChange"
|
||||
/>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 10px;">
|
||||
<el-form ref="form" :model="fieldForm" size="mini" class="row-style">
|
||||
<el-form-item>
|
||||
<span style="width: 80px;font-size: 12px">{{ $t('dataset.data_type') }}</span>
|
||||
<el-radio-group v-model="fieldForm.groupType" size="mini">
|
||||
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
|
||||
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-row style="margin-top: 28px">
|
||||
<el-form ref="form" :model="fieldForm" class="de-form-item">
|
||||
<el-form-item :label="$t('dataset.data_type')">
|
||||
<el-radio v-model="fieldForm.groupType" label="d">{{
|
||||
$t('chart.dimension')
|
||||
}}</el-radio>
|
||||
<el-radio v-model="fieldForm.groupType" label="q">{{
|
||||
$t('chart.quota')
|
||||
}}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<span style="width: 80px;font-size: 12px">{{ $t('dataset.field_type') }}</span>
|
||||
<el-select v-model="fieldForm.deType" size="mini">
|
||||
<el-option
|
||||
v-for="item in fields"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<span style="float: left">
|
||||
<svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
|
||||
</span>
|
||||
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-form-item :label="$t('dataset.field_type')">
|
||||
<el-radio
|
||||
v-for="item in fields"
|
||||
:key="item.value"
|
||||
v-model="fieldForm.deType"
|
||||
:label="item.value"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="10" style="height: 100%;border-left: 1px solid #E6E6E6;">
|
||||
<el-col :span="12" style="height: 100%" class="padding-lr">
|
||||
<span>
|
||||
{{ $t('dataset.click_ref_field') }}
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
引用字段以 "[" 开始， "]" 结束
|
||||
<br>
|
||||
请勿修改引用内容，否则将引用失败
|
||||
<br>
|
||||
若输入与引用字段相同格式的内容，将被当作引用字段处理
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input
|
||||
v-model="searchField"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
<div class="field-height">
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
<draggable
|
||||
v-model="dimensionData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
class="drag-list"
|
||||
:disabled="true"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name" @click="insertFieldToCodeMirror('['+item.name+']')">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="field-height">
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
<draggable
|
||||
v-model="quotaData"
|
||||
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
|
||||
animation="300"
|
||||
class="drag-list"
|
||||
:disabled="true"
|
||||
>
|
||||
<transition-group>
|
||||
<span v-for="item in quotaData" :key="item.id" class="item-quota" :title="item.name" @click="insertFieldToCodeMirror('['+item.name+']')">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<span>{{ item.name }}</span>
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%" class="padding-lr">
|
||||
<span>
|
||||
{{ $t('dataset.click_ref_function') }}
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
使用数据集对应数据库类型所支持的函数，语法同对应数据库
|
||||
<br>
|
||||
如日期格式化：MySQL使用DATE_FORMAT(date,format)；Oracle使用TO_DATE(X,[,fmt])
|
||||
<br>
|
||||
非直连模式数据集，使用Doris数据库函数，可参考Doris官网 https://doris.apache.org/zh-CN/
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input
|
||||
v-model="searchFunction"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
<el-row class="function-height">
|
||||
<el-popover
|
||||
v-for="(item,index) in functionData"
|
||||
:key="index"
|
||||
class="function-pop"
|
||||
placement="right"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
:open-delay="500"
|
||||
>
|
||||
<p class="pop-title">{{ item.name }}</p>
|
||||
<p class="pop-info">{{ item.func }}</p>
|
||||
<p class="pop-info">{{ item.desc }}</p>
|
||||
<span slot="reference" class="function-style" @click="insertParamToCodeMirror(item.func)">{{ item.func }}</span>
|
||||
</el-popover>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<div class="dialog-button">
|
||||
<el-button size="mini" @click="closeCalcField">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button :disabled="!fieldForm.name || !fieldForm.originName" :loading="loading" type="primary" size="mini" @click="saveCalcField">{{ $t('dataset.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<div class="padding-lr">
|
||||
<span class="mb8">
|
||||
{{ $t('dataset.click_ref_field') }}
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
引用字段以 "[" 开始， "]" 结束
|
||||
<br />
|
||||
请勿修改引用内容，否则将引用失败
|
||||
<br />
|
||||
若输入与引用字段相同格式的内容，将被当作引用字段处理
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input
|
||||
v-model="searchField"
|
||||
size="small"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 12px"
|
||||
clearable
|
||||
/>
|
||||
<div class="field-height">
|
||||
<span>{{ $t('chart.dimension') }}</span>
|
||||
<draggable
|
||||
v-model="dimensionData"
|
||||
:options="{ group: { name: 'drag', pull: 'clone' }, sort: true }"
|
||||
animation="300"
|
||||
class="drag-list"
|
||||
:disabled="true"
|
||||
>
|
||||
<transition-group>
|
||||
<span
|
||||
v-for="item in dimensionData"
|
||||
:key="item.id"
|
||||
class="item-dimension"
|
||||
:title="item.name"
|
||||
@click="insertFieldToCodeMirror('[' + item.name + ']')"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
<div class="field-height">
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
<draggable
|
||||
v-model="quotaData"
|
||||
:options="{ group: { name: 'drag', pull: 'clone' }, sort: true }"
|
||||
animation="300"
|
||||
class="drag-list"
|
||||
:disabled="true"
|
||||
>
|
||||
<transition-group>
|
||||
<span
|
||||
v-for="item in quotaData"
|
||||
:key="item.id"
|
||||
class="item-quota"
|
||||
:title="item.name"
|
||||
@click="insertFieldToCodeMirror('[' + item.name + ']')"
|
||||
>
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="item.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
<span>{{ item.name }}</span>
|
||||
</span>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="padding-lr">
|
||||
<span class="mb8">
|
||||
{{ $t('dataset.click_ref_function') }}
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
使用数据集对应数据库类型所支持的函数，语法同对应数据库
|
||||
<br />
|
||||
如日期格式化：MySQL使用DATE_FORMAT(date,format)；Oracle使用TO_DATE(X,[,fmt])
|
||||
<br />
|
||||
非直连模式数据集，使用Doris数据库函数，可参考Doris官网
|
||||
https://doris.apache.org/zh-CN/
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input
|
||||
v-model="searchFunction"
|
||||
size="small"
|
||||
style="margin-bottom: 12px"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
<el-row class="function-height">
|
||||
<el-popover
|
||||
v-for="(item, index) in functionData"
|
||||
:key="index"
|
||||
class="function-pop"
|
||||
placement="right"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
:open-delay="500"
|
||||
>
|
||||
<p class="pop-title">{{ item.name }}</p>
|
||||
<p class="pop-info">{{ item.func }}</p>
|
||||
<p class="pop-info">{{ item.desc }}</p>
|
||||
<span
|
||||
slot="reference"
|
||||
class="function-style"
|
||||
@click="insertParamToCodeMirror(item.func)"
|
||||
>{{ item.func }}</span
|
||||
>
|
||||
</el-popover>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="de-foot">
|
||||
<deBtn secondary @click="closeCalcField">{{
|
||||
$t('dataset.cancel')
|
||||
}}</deBtn>
|
||||
<deBtn
|
||||
:disabled="!fieldForm.name || !fieldForm.originName"
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
@click="saveCalcField"
|
||||
>{{ $t('dataset.confirm') }}</deBtn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -231,7 +281,9 @@ export default {
|
||||
originName: '',
|
||||
tableId: this.param.id,
|
||||
checked: 1,
|
||||
columnIndex: this.tableFields.dimensionList.length + this.tableFields.quotaList.length,
|
||||
columnIndex:
|
||||
this.tableFields.dimensionList.length +
|
||||
this.tableFields.quotaList.length,
|
||||
size: 0,
|
||||
extField: 2
|
||||
},
|
||||
@ -242,7 +294,8 @@ export default {
|
||||
line: true,
|
||||
mode: 'text/x-sql',
|
||||
theme: 'solarized',
|
||||
hintOptions: { // 自定义提示选项
|
||||
hintOptions: {
|
||||
// 自定义提示选项
|
||||
completeSingle: false // 当匹配只有一项的时候是否自动补全
|
||||
}
|
||||
},
|
||||
@ -250,7 +303,11 @@ export default {
|
||||
{ label: this.$t('dataset.text'), value: 0 },
|
||||
{ label: this.$t('dataset.time'), value: 1 },
|
||||
{ label: this.$t('dataset.value'), value: 2 },
|
||||
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
|
||||
{
|
||||
label:
|
||||
this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
|
||||
value: 3
|
||||
},
|
||||
{ label: this.$t('dataset.location'), value: 5 }
|
||||
],
|
||||
functions: [],
|
||||
@ -269,31 +326,65 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'param': function() {
|
||||
param: function () {
|
||||
this.initFunctions()
|
||||
},
|
||||
'field': {
|
||||
handler: function() {
|
||||
field: {
|
||||
handler: function () {
|
||||
this.initField()
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'tableFields': function() {
|
||||
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)).filter(ele => ele.extField === 0)
|
||||
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList)).filter(ele => ele.extField === 0)
|
||||
tableFields: function () {
|
||||
this.dimensionData = JSON.parse(
|
||||
JSON.stringify(this.tableFields.dimensionList)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
this.quotaData = JSON.parse(
|
||||
JSON.stringify(this.tableFields.quotaList)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
},
|
||||
'searchField': function(val) {
|
||||
searchField: function (val) {
|
||||
if (val && val !== '') {
|
||||
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList.filter(ele => ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) && ele.extField === 0)))
|
||||
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList.filter(ele => ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) && ele.extField === 0)))
|
||||
this.dimensionData = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.tableFields.dimensionList.filter(
|
||||
(ele) =>
|
||||
ele.name
|
||||
.toLocaleLowerCase()
|
||||
.includes(val.toLocaleLowerCase()) && ele.extField === 0
|
||||
)
|
||||
)
|
||||
)
|
||||
this.quotaData = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.tableFields.quotaList.filter(
|
||||
(ele) =>
|
||||
ele.name
|
||||
.toLocaleLowerCase()
|
||||
.includes(val.toLocaleLowerCase()) && ele.extField === 0
|
||||
)
|
||||
)
|
||||
)
|
||||
} else {
|
||||
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)).filter(ele => ele.extField === 0)
|
||||
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList)).filter(ele => ele.extField === 0)
|
||||
this.dimensionData = JSON.parse(
|
||||
JSON.stringify(this.tableFields.dimensionList)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
this.quotaData = JSON.parse(
|
||||
JSON.stringify(this.tableFields.quotaList)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
}
|
||||
},
|
||||
'searchFunction': function(val) {
|
||||
searchFunction: function (val) {
|
||||
if (val && val !== '') {
|
||||
this.functionData = JSON.parse(JSON.stringify(this.functions.filter(ele => { return ele.func.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
|
||||
this.functionData = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.functions.filter((ele) => {
|
||||
return ele.func
|
||||
.toLocaleLowerCase()
|
||||
.includes(val.toLocaleLowerCase())
|
||||
})
|
||||
)
|
||||
)
|
||||
} else {
|
||||
this.functionData = JSON.parse(JSON.stringify(this.functions))
|
||||
}
|
||||
@ -305,16 +396,19 @@ export default {
|
||||
this.$refs.myCm.codemirror.showHint()
|
||||
})
|
||||
this.initFunctions()
|
||||
this.dimensionData = JSON.parse(JSON.stringify(this.tableFields.dimensionList)).filter(ele => ele.extField === 0)
|
||||
this.quotaData = JSON.parse(JSON.stringify(this.tableFields.quotaList)).filter(ele => ele.extField === 0)
|
||||
this.dimensionData = JSON.parse(
|
||||
JSON.stringify(this.tableFields.dimensionList)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
this.quotaData = JSON.parse(
|
||||
JSON.stringify(this.tableFields.quotaList)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
this.initField()
|
||||
},
|
||||
methods: {
|
||||
onCmReady(cm) {
|
||||
this.codemirror.setSize('-webkit-fill-available', 'auto')
|
||||
},
|
||||
onCmFocus(cm) {
|
||||
},
|
||||
onCmFocus(cm) {},
|
||||
onCmCodeChange(newCode) {
|
||||
this.fieldForm.originName = newCode
|
||||
},
|
||||
@ -331,21 +425,32 @@ export default {
|
||||
pos2.line = pos1.line
|
||||
pos2.ch = pos1.ch
|
||||
this.$refs.myCm.codemirror.replaceRange(param, pos2)
|
||||
this.$refs.myCm.codemirror.markText(pos2, { line: pos2.line, ch: param.length + pos2.ch }, { atomic: true, selectRight: true })
|
||||
this.$refs.myCm.codemirror.markText(
|
||||
pos2,
|
||||
{ line: pos2.line, ch: param.length + pos2.ch },
|
||||
{ atomic: true, selectRight: true }
|
||||
)
|
||||
},
|
||||
|
||||
initFunctions() {
|
||||
post('/dataset/function/listByTableId/' + this.param.id, null).then(response => {
|
||||
this.functions = response.data
|
||||
this.functionData = JSON.parse(JSON.stringify(this.functions))
|
||||
})
|
||||
post('/dataset/function/listByTableId/' + this.param.id, null).then(
|
||||
(response) => {
|
||||
this.functions = response.data
|
||||
this.functionData = JSON.parse(JSON.stringify(this.functions))
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
initField() {
|
||||
if (this.field.id) {
|
||||
this.fieldForm = JSON.parse(JSON.stringify(this.field))
|
||||
this.name2Auto = []
|
||||
this.fieldForm.originName = this.setNameIdTrans('id', 'name', this.fieldForm.originName, this.name2Auto)
|
||||
this.fieldForm.originName = this.setNameIdTrans(
|
||||
'id',
|
||||
'name',
|
||||
this.fieldForm.originName,
|
||||
this.name2Auto
|
||||
)
|
||||
setTimeout(() => {
|
||||
this.matchToAuto()
|
||||
}, 500)
|
||||
@ -355,11 +460,18 @@ export default {
|
||||
},
|
||||
matchToAuto() {
|
||||
if (!this.name2Auto.length) return
|
||||
this.name2Auto.forEach(ele => {
|
||||
const search = this.$refs.myCm.codemirror.getSearchCursor(ele, { line: 0, ch: 0 })
|
||||
this.name2Auto.forEach((ele) => {
|
||||
const search = this.$refs.myCm.codemirror.getSearchCursor(ele, {
|
||||
line: 0,
|
||||
ch: 0
|
||||
})
|
||||
if (search.find()) {
|
||||
const { from, to } = search.pos
|
||||
this.$refs.myCm.codemirror.markText({ line: from.line, ch: from.ch - 1 }, { line: to.line, ch: to.ch + 1 }, { atomic: true, selectRight: true })
|
||||
this.$refs.myCm.codemirror.markText(
|
||||
{ line: from.line, ch: from.ch - 1 },
|
||||
{ line: to.line, ch: to.ch + 1 },
|
||||
{ atomic: true, selectRight: true }
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -369,13 +481,16 @@ export default {
|
||||
},
|
||||
setNameIdTrans(from, to, originName, name2Auto) {
|
||||
let name2Id = originName
|
||||
const nameIdMap = [...this.dimensionData, ...this.quotaData].reduce((pre, next) => {
|
||||
pre[next[from]] = next[to]
|
||||
return pre
|
||||
}, {})
|
||||
const nameIdMap = [...this.dimensionData, ...this.quotaData].reduce(
|
||||
(pre, next) => {
|
||||
pre[next[from]] = next[to]
|
||||
return pre
|
||||
},
|
||||
{}
|
||||
)
|
||||
const on = originName.match(/\[(.+?)\]/g)
|
||||
if (on) {
|
||||
on.forEach(itm => {
|
||||
on.forEach((itm) => {
|
||||
const ele = itm.slice(1, -1)
|
||||
if (name2Auto) {
|
||||
name2Auto.push(nameIdMap[ele])
|
||||
@ -396,16 +511,23 @@ export default {
|
||||
this.fieldForm.type = deType
|
||||
this.fieldForm.deExtractType = deType
|
||||
this.fieldForm.tableId = this.param.id
|
||||
this.fieldForm.columnIndex = this.tableFields.dimensionList.length + this.tableFields.quotaList.length
|
||||
this.fieldForm.columnIndex =
|
||||
this.tableFields.dimensionList.length +
|
||||
this.tableFields.quotaList.length
|
||||
}
|
||||
this.loading = true
|
||||
post('/dataset/field/save', { ...this.fieldForm, originName: this.setNameIdTrans('name', 'id', originName) }).then(response => {
|
||||
localStorage.setItem('reloadDsData', 'true')
|
||||
this.closeCalcField()
|
||||
this.loading = false
|
||||
}).catch(res => {
|
||||
this.loading = false
|
||||
post('/dataset/field/save', {
|
||||
...this.fieldForm,
|
||||
originName: this.setNameIdTrans('name', 'id', originName)
|
||||
})
|
||||
.then((response) => {
|
||||
localStorage.setItem('reloadDsData', 'true')
|
||||
this.closeCalcField()
|
||||
this.loading = false
|
||||
})
|
||||
.catch((res) => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
resetField() {
|
||||
@ -417,7 +539,9 @@ export default {
|
||||
originName: '',
|
||||
tableId: this.param.id,
|
||||
checked: 1,
|
||||
columnIndex: this.tableFields.dimensionList.length + this.tableFields.quotaList.length,
|
||||
columnIndex:
|
||||
this.tableFields.dimensionList.length +
|
||||
this.tableFields.quotaList.length,
|
||||
size: 0,
|
||||
extField: 2
|
||||
}
|
||||
@ -431,165 +555,163 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-style ::v-deep .el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
.row-style ::v-deep .el-form-item--mini.el-form-item{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.row-style ::v-deep .el-form-item__content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
.padding-lr {
|
||||
height: calc(100% - 80px);
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 12px;
|
||||
width: 214px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.field-height {
|
||||
height: calc(50% - 25px);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.drag-list {
|
||||
height: calc(100% - 26px);
|
||||
overflow: auto;
|
||||
}
|
||||
.item-dimension {
|
||||
padding: 3px 8px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
/*background-color: rgba(35,46,64,.05);*/
|
||||
background-color: white;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.codemirror {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
.codemirror ::v-deep .CodeMirror-scroll {
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
.blackTheme .item-dimension {
|
||||
border: solid 1px;
|
||||
border-color: #495865;
|
||||
color: #f2f6fc;
|
||||
background-color: var(--MainBG);
|
||||
}
|
||||
|
||||
.padding-lr {
|
||||
padding: 0 4px;
|
||||
}
|
||||
.field-height{
|
||||
height: calc(50% - 25px);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.drag-list {
|
||||
height: calc(100% - 26px);
|
||||
overflow:auto;
|
||||
}
|
||||
.item-dimension {
|
||||
padding: 2px 10px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
/*background-color: rgba(35,46,64,.05);*/
|
||||
background-color: white;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.item-dimension + .item-dimension {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.blackTheme .item-dimension {
|
||||
border: solid 1px ;
|
||||
border-color: #495865;
|
||||
color: #F2F6FC;
|
||||
background-color: var(--MainBG);
|
||||
}
|
||||
.item-dimension:hover {
|
||||
border-color: var(--primary, #3370ff);
|
||||
background: #e8f4ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-dimension + .item-dimension {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.blackTheme .item-dimension:hover {
|
||||
/* color: var(--Main); */
|
||||
background: var(--ContentBG);
|
||||
/* cursor: pointer; */
|
||||
}
|
||||
|
||||
.item-dimension:hover {
|
||||
color: #1890ff;
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-quota {
|
||||
padding: 3px 8px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
/*background-color: rgba(35,46,64,.05);*/
|
||||
background-color: white;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.blackTheme .item-dimension:hover {
|
||||
/* color: var(--Main); */
|
||||
background: var(--ContentBG);
|
||||
/* cursor: pointer; */
|
||||
}
|
||||
.blackTheme .item-quota {
|
||||
border: solid 1px;
|
||||
border-color: #495865;
|
||||
color: #f2f6fc;
|
||||
background-color: var(--MainBG);
|
||||
}
|
||||
|
||||
.item-quota {
|
||||
padding: 2px 10px;
|
||||
margin: 2px 2px 0 2px;
|
||||
border: solid 1px #eee;
|
||||
text-align: left;
|
||||
color: #606266;
|
||||
/*background-color: rgba(35,46,64,.05);*/
|
||||
background-color: white;
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.item-quota + .item-quota {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.blackTheme .item-quota {
|
||||
.item-quota:hover {
|
||||
background: #f0f9eb;
|
||||
border-color: #b2d3a3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
border: solid 1px ;
|
||||
border-color: #495865;
|
||||
color: #F2F6FC;
|
||||
background-color: var(--MainBG);
|
||||
.blackTheme .item-quota:hover {
|
||||
background: var(--ContentBG);
|
||||
}
|
||||
.function-style {
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
display: block;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
margin: 4px 0;
|
||||
word-break: break-word;
|
||||
border-radius: 2px;
|
||||
border: solid 1px #eee;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-quota + .item-quota {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.item-quota:hover {
|
||||
color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
border-color: #b2d3a3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.blackTheme .item-quota:hover {
|
||||
background: var(--ContentBG);
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.function-style{
|
||||
color: #0a7be0;
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
margin: 4px 0;
|
||||
word-break: break-word;
|
||||
border: solid 1px #eee;
|
||||
}
|
||||
|
||||
.blackTheme .function-style {
|
||||
border: solid 1px ;
|
||||
border-color: #495865;
|
||||
color: #F2F6FC;
|
||||
background-color: var(--MainBG);
|
||||
}
|
||||
.function-style:hover {
|
||||
background: #e8f4ff;
|
||||
border-color: #a3d3ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.blackTheme .function-style:hover {
|
||||
color: #1890ff;
|
||||
background: var(--ContentBG);
|
||||
}
|
||||
.function-height{
|
||||
height: calc(100% - 50px);
|
||||
overflow: auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.function-pop ::v-deep .el-popover{
|
||||
padding: 6px!important;
|
||||
}
|
||||
.pop-title{
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.pop-info{
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.dialog-button{
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.blackTheme .function-style {
|
||||
border: solid 1px;
|
||||
border-color: #495865;
|
||||
color: #f2f6fc;
|
||||
background-color: var(--MainBG);
|
||||
}
|
||||
.function-style:hover {
|
||||
border-color: var(--primary, #3370ff);
|
||||
cursor: pointer;
|
||||
}
|
||||
.blackTheme .function-style:hover {
|
||||
background: var(--ContentBG);
|
||||
}
|
||||
.function-height {
|
||||
height: calc(100% - 50px);
|
||||
overflow: auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.function-pop ::v-deep .el-popover {
|
||||
padding: 6px !important;
|
||||
}
|
||||
.pop-title {
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.pop-info {
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.calcu-feild {
|
||||
.calcu-cont {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.codemirror {
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border: 1px solid #bbbfc4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.codemirror .CodeMirror-scroll {
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,43 +1,7 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-col style="width: 300px;">
|
||||
<el-form ref="form" :model="form" size="mini" class="row-style">
|
||||
<el-form-item>
|
||||
<span class="title-text" style="width: 100px;">{{ $t('dataset.showRow') }}</span>
|
||||
<el-input v-model="form.row" class="main-area-input">
|
||||
<el-button slot="append" size="mini" icon="el-icon-search" @click="reSearch" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<ux-grid
|
||||
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.id"
|
||||
min-width="200px"
|
||||
:field="field.dataeaseName"
|
||||
:resizable="true"
|
||||
>
|
||||
<template slot="header">
|
||||
<svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<span>{{ field.name }}</span>
|
||||
</template>
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
<el-row style="margin-top: 4px;">
|
||||
<span v-if="table.type === 'excel' || table.type === 'custom' || table.type === 'union'" class="table-count">
|
||||
<div class="table-count">
|
||||
<span v-if="['excel', 'custom', 'union'].includes(table.type)">
|
||||
<span v-if="page.total <= currentPage.show">
|
||||
{{ $t('dataset.preview_total') }}
|
||||
<span class="span-number">{{ page.total }}</span>
|
||||
@ -52,22 +16,73 @@
|
||||
{{ $t('dataset.preview_item') }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="table.type === 'db' || table.type === 'sql'" class="table-count">
|
||||
<span v-if="['db', 'sql'].includes(table.type)">
|
||||
{{ $t('dataset.preview_show') }}
|
||||
<span class="span-number">{{ page.total }}</span>
|
||||
{{ $t('dataset.preview_item') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
v-show="false"
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[parseInt(form.row)]"
|
||||
:page-size="parseInt(form.row)"
|
||||
:pager-count="5"
|
||||
layout="sizes, prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
@current-change="pageChange"
|
||||
/>
|
||||
</el-row>
|
||||
<span class="title-text" style="width: 100px"
|
||||
>{{ $t('deDataset.display') }} {{ form.row }}
|
||||
{{ $t('deDataset.that_s_ok') }}</span
|
||||
>
|
||||
<el-popover
|
||||
popper-class="de-set-count de-card-dropdown"
|
||||
placement="right-start"
|
||||
width="306"
|
||||
ref="setCount"
|
||||
trigger="click"
|
||||
>
|
||||
{{ $t('deDataset.show_rows') }}
|
||||
<el-input size="small" v-model="rowNum"> </el-input>
|
||||
<div class="foot">
|
||||
<deBtn @click="cancel" secondary>{{ $t('commons.cancel') }} </deBtn>
|
||||
<deBtn type="primary" @click="searchRow">
|
||||
{{ $t('commons.confirm') }}
|
||||
</deBtn>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-edit"></i>
|
||||
</el-popover>
|
||||
</div>
|
||||
<ux-grid
|
||||
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.id"
|
||||
min-width="200px"
|
||||
:field="field.dataeaseName"
|
||||
:resizable="true"
|
||||
>
|
||||
<template slot="header">
|
||||
<svg-icon
|
||||
v-if="field.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 2 || field.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
<svg-icon
|
||||
v-if="field.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
<span>{{ field.name }}</span>
|
||||
</template>
|
||||
</ux-table-column>
|
||||
</ux-grid>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
@ -103,6 +118,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
height: 500,
|
||||
rowNum: parseInt(this.form.row),
|
||||
currentPage: {
|
||||
page: 1,
|
||||
pageSize: parseInt(this.form.row),
|
||||
@ -110,8 +126,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
const datas = this.data
|
||||
@ -129,23 +143,32 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
searchRow() {
|
||||
this.form.row = this.rowNum
|
||||
this.reSearch()
|
||||
},
|
||||
init() {
|
||||
this.calHeight()
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.setCount.doClose()
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
|
||||
that.height = currentHeight - 215
|
||||
}, 10)
|
||||
},
|
||||
reSearch() {
|
||||
if (!this.form.row ||
|
||||
this.form.row === '' ||
|
||||
this.form.row.length > 4 ||
|
||||
isNaN(Number(this.form.row)) ||
|
||||
String(this.form.row).includes('.') ||
|
||||
parseInt(this.form.row) < 1) {
|
||||
if (
|
||||
!this.form.row ||
|
||||
this.form.row === '' ||
|
||||
this.form.row.length > 4 ||
|
||||
isNaN(Number(this.form.row)) ||
|
||||
String(this.form.row).includes('.') ||
|
||||
parseInt(this.form.row) < 1
|
||||
) {
|
||||
this.$message({
|
||||
message: this.$t('dataset.pls_input_less_5'),
|
||||
type: 'error',
|
||||
@ -165,29 +188,35 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.row-style ::v-deep .el-form-item__label{
|
||||
font-size: 12px;
|
||||
}
|
||||
.row-style ::v-deep .el-form-item--mini.el-form-item{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.row-style ::v-deep .el-form-item__content{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 250px;
|
||||
}
|
||||
.el-pagination{
|
||||
float: right;
|
||||
}
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.span-number{
|
||||
color: #0a7be0;
|
||||
}
|
||||
.table-count{
|
||||
color: #606266;
|
||||
<style lang="scss" scoped>
|
||||
.table-count {
|
||||
color: var(--deTextSecondary, #606266);
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin: 4px 0;
|
||||
.title-text {
|
||||
margin: 0 5px 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.de-set-count {
|
||||
padding: 20px 24px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
text-align: left;
|
||||
|
||||
.el-input {
|
||||
margin: 8px 0 20px 0;
|
||||
}
|
||||
|
||||
.de-button {
|
||||
min-width: 48px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" icon="el-icon-circle-plus-outline" @click="showUnionEdit">{{ $t('dataset.add_union') }}</el-button>
|
||||
<el-button
|
||||
v-if="hasDataPermission('manage', param.privileges)"
|
||||
size="mini"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
@click="showUnionEdit"
|
||||
>{{ $t('dataset.add_union') }}</el-button
|
||||
>
|
||||
<el-row>
|
||||
<el-table
|
||||
size="mini"
|
||||
:data="unionData"
|
||||
:height="height"
|
||||
border
|
||||
style="width: 100%;margin-top: 10px;"
|
||||
style="width: 100%; margin-top: 10px"
|
||||
>
|
||||
<el-table-column
|
||||
prop="sourceTableName"
|
||||
@ -22,11 +28,19 @@
|
||||
:label="$t('dataset.union_relation')"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="font-size: 12px;">
|
||||
<span v-if="scope.row.sourceUnionRelation === '1:N'">{{ $t('dataset.left_join') }}</span>
|
||||
<span v-if="scope.row.sourceUnionRelation === 'N:1'">{{ $t('dataset.right_join') }}</span>
|
||||
<span v-if="scope.row.sourceUnionRelation === '1:1'">{{ $t('dataset.inner_join') }}</span>
|
||||
<span v-if="scope.row.sourceUnionRelation === 'N:N'">{{ $t('dataset.full_join') }}</span>
|
||||
<span style="font-size: 12px">
|
||||
<span v-if="scope.row.sourceUnionRelation === '1:N'">{{
|
||||
$t('dataset.left_join')
|
||||
}}</span>
|
||||
<span v-if="scope.row.sourceUnionRelation === 'N:1'">{{
|
||||
$t('dataset.right_join')
|
||||
}}</span>
|
||||
<span v-if="scope.row.sourceUnionRelation === '1:1'">{{
|
||||
$t('dataset.inner_join')
|
||||
}}</span>
|
||||
<span v-if="scope.row.sourceUnionRelation === 'N:N'">{{
|
||||
$t('dataset.full_join')
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -38,13 +52,22 @@
|
||||
prop="targetTableFieldName"
|
||||
:label="$t('dataset.target_field')"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
:label="$t('dataset.operate')"
|
||||
>
|
||||
<el-table-column align="left" :label="$t('dataset.operate')">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="hasDataPermission('manage',param.privileges)" type="text" size="mini" @click="edit(scope.row)">{{ $t('dataset.edit') }}</el-button>
|
||||
<el-button v-if="hasDataPermission('manage',param.privileges)" type="text" size="mini" @click="deleteUnion(scope.row)">{{ $t('dataset.delete') }}</el-button>
|
||||
<el-button
|
||||
v-if="hasDataPermission('manage', param.privileges)"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="edit(scope.row)"
|
||||
>{{ $t('dataset.edit') }}</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="hasDataPermission('manage', param.privileges)"
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="deleteUnion(scope.row)"
|
||||
>{{ $t('dataset.delete') }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -58,10 +81,18 @@
|
||||
width="600px"
|
||||
class="dialog-css"
|
||||
>
|
||||
<el-row style="display: flex;align-items: center;justify-content: center;">
|
||||
<el-row
|
||||
style="display: flex; align-items: center; justify-content: center"
|
||||
>
|
||||
<el-col :span="6">
|
||||
<p class="table-name-css" :title="table.name">{{ table.name }}</p>
|
||||
<el-select v-model="union.sourceTableFieldId" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini">
|
||||
<el-select
|
||||
v-model="union.sourceTableFieldId"
|
||||
:placeholder="$t('dataset.pls_slc_union_field')"
|
||||
filterable
|
||||
clearable
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in sourceFieldOption"
|
||||
:key="item.id"
|
||||
@ -70,16 +101,32 @@
|
||||
>
|
||||
<span>
|
||||
<span v-if="item.deType === 0">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 1">
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 2 || item.deType === 3">
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 5">
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
@ -90,10 +137,20 @@
|
||||
</el-col>
|
||||
|
||||
<el-col :span="6">
|
||||
<el-radio-group v-model="union.sourceUnionRelation" size="mini" style="display: block;width: 100%;text-align: center;">
|
||||
<el-radio class="union-relation-css" label="1:N">{{ $t('dataset.left_join') }}</el-radio>
|
||||
<el-radio class="union-relation-css" label="N:1">{{ $t('dataset.right_join') }}</el-radio>
|
||||
<el-radio class="union-relation-css" label="1:1">{{ $t('dataset.inner_join') }}</el-radio>
|
||||
<el-radio-group
|
||||
v-model="union.sourceUnionRelation"
|
||||
size="mini"
|
||||
style="display: block; width: 100%; text-align: center"
|
||||
>
|
||||
<el-radio class="union-relation-css" label="1:N">{{
|
||||
$t('dataset.left_join')
|
||||
}}</el-radio>
|
||||
<el-radio class="union-relation-css" label="N:1">{{
|
||||
$t('dataset.right_join')
|
||||
}}</el-radio>
|
||||
<el-radio class="union-relation-css" label="1:1">{{
|
||||
$t('dataset.inner_join')
|
||||
}}</el-radio>
|
||||
<!-- <el-radio class="union-relation-css" label="N:N">{{ $t('dataset.full_join') }}</el-radio>-->
|
||||
</el-radio-group>
|
||||
</el-col>
|
||||
@ -105,13 +162,31 @@
|
||||
width="500"
|
||||
trigger="click"
|
||||
>
|
||||
<dataset-group-selector-tree :fix-height="true" show-mode="union" :table="table" :custom-type="customType" :mode="table.mode" @getTable="getTable" />
|
||||
<el-button slot="reference" size="mini" style="width: 100%;">
|
||||
<p class="table-name-css" :title="targetTable.name || $t('dataset.pls_slc_union_table')">{{ targetTable.name || $t('dataset.pls_slc_union_table') }}</p>
|
||||
<dataset-group-selector-tree
|
||||
:fix-height="true"
|
||||
show-mode="union"
|
||||
:table="table"
|
||||
:custom-type="customType"
|
||||
:mode="table.mode"
|
||||
@getTable="getTable"
|
||||
/>
|
||||
<el-button slot="reference" size="mini" style="width: 100%">
|
||||
<p
|
||||
class="table-name-css"
|
||||
:title="targetTable.name || $t('dataset.pls_slc_union_table')"
|
||||
>
|
||||
{{ targetTable.name || $t('dataset.pls_slc_union_table') }}
|
||||
</p>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-select v-model="union.targetTableFieldId" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini">
|
||||
<el-select
|
||||
v-model="union.targetTableFieldId"
|
||||
:placeholder="$t('dataset.pls_slc_union_field')"
|
||||
filterable
|
||||
clearable
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in targetFieldOption"
|
||||
:key="item.id"
|
||||
@ -120,16 +195,32 @@
|
||||
>
|
||||
<span>
|
||||
<span v-if="item.deType === 0">
|
||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 0"
|
||||
icon-class="field_text"
|
||||
class="field-icon-text"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 1">
|
||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 1"
|
||||
icon-class="field_time"
|
||||
class="field-icon-time"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 2 || item.deType === 3">
|
||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 2 || item.deType === 3"
|
||||
icon-class="field_value"
|
||||
class="field-icon-value"
|
||||
/>
|
||||
</span>
|
||||
<span v-if="item.deType === 5">
|
||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
<svg-icon
|
||||
v-if="item.deType === 5"
|
||||
icon-class="field_location"
|
||||
class="field-icon-location"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
@ -141,8 +232,12 @@
|
||||
</el-row>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeUnion">{{ $t('dataset.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveUnion">{{ $t('dataset.confirm') }}</el-button>
|
||||
<el-button size="mini" @click="closeUnion">{{
|
||||
$t('dataset.cancel')
|
||||
}}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveUnion">{{
|
||||
$t('dataset.confirm')
|
||||
}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
@ -186,7 +281,7 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'table': function() {
|
||||
table: function () {
|
||||
this.initUnion()
|
||||
}
|
||||
},
|
||||
@ -197,7 +292,7 @@ export default {
|
||||
methods: {
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
|
||||
}, 10)
|
||||
@ -209,9 +304,11 @@ export default {
|
||||
} else {
|
||||
this.customType = ['db', 'sql', 'excel', 'api']
|
||||
}
|
||||
post('dataset/union/listByTableId/' + this.table.id, {}).then(response => {
|
||||
this.unionData = response.data
|
||||
})
|
||||
post('dataset/union/listByTableId/' + this.table.id, {}).then(
|
||||
(response) => {
|
||||
this.unionData = response.data
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
@ -220,8 +317,10 @@ export default {
|
||||
// post('/dataset/table/checkDorisTableIsExists/' + this.table.id, {}, true).then(response => {
|
||||
// if (response.data) {
|
||||
this.union.sourceTableId = this.table.id
|
||||
fieldList(this.table.id).then(response => {
|
||||
this.sourceFieldOption = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
fieldList(this.table.id).then((response) => {
|
||||
this.sourceFieldOption = JSON.parse(
|
||||
JSON.stringify(response.data)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
})
|
||||
this.editUnion = true
|
||||
// } else {
|
||||
@ -234,7 +333,12 @@ export default {
|
||||
// })
|
||||
},
|
||||
saveUnion() {
|
||||
if (!this.union.sourceTableFieldId || !this.union.sourceUnionRelation || !this.union.targetTableId || !this.union.targetTableFieldId) {
|
||||
if (
|
||||
!this.union.sourceTableFieldId ||
|
||||
!this.union.sourceUnionRelation ||
|
||||
!this.union.targetTableId ||
|
||||
!this.union.targetTableFieldId
|
||||
) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: this.$t('dataset.pls_setting_union_success'),
|
||||
@ -242,8 +346,11 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
this.union.targetUnionRelation = this.union.sourceUnionRelation.split('').reverse().join('')
|
||||
post('dataset/union/save', this.union).then(response => {
|
||||
this.union.targetUnionRelation = this.union.sourceUnionRelation
|
||||
.split('')
|
||||
.reverse()
|
||||
.join('')
|
||||
post('dataset/union/save', this.union).then((response) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('dataset.save_success'),
|
||||
@ -274,18 +381,22 @@ export default {
|
||||
edit(item) {
|
||||
this.union = JSON.parse(JSON.stringify(item))
|
||||
this.targetTable.name = this.union.targetTableName
|
||||
fieldList(this.union.targetTableId).then(response => {
|
||||
fieldList(this.union.targetTableId).then((response) => {
|
||||
this.targetFieldOption = response.data
|
||||
this.showUnionEdit()
|
||||
})
|
||||
},
|
||||
deleteUnion(item) {
|
||||
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
|
||||
confirmButtonText: this.$t('dataset.confirm'),
|
||||
cancelButtonText: this.$t('dataset.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
post('dataset/union/delete', item).then(response => {
|
||||
this.$confirm(
|
||||
this.$t('dataset.confirm_delete'),
|
||||
this.$t('dataset.tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('dataset.confirm'),
|
||||
cancelButtonText: this.$t('dataset.cancel'),
|
||||
type: 'warning'
|
||||
}
|
||||
).then(() => {
|
||||
post('dataset/union/delete', item).then((response) => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: this.$t('dataset.delete_success'),
|
||||
@ -317,8 +428,10 @@ export default {
|
||||
this.targetTable = param
|
||||
this.union.targetTableId = param.id
|
||||
this.union.targetTableFieldId = ''
|
||||
fieldList(param.id).then(response => {
|
||||
this.targetFieldOption = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
|
||||
fieldList(param.id).then((response) => {
|
||||
this.targetFieldOption = JSON.parse(
|
||||
JSON.stringify(response.data)
|
||||
).filter((ele) => ele.extField === 0)
|
||||
})
|
||||
this.$refs['targetTable'].doClose()
|
||||
}
|
||||
@ -327,25 +440,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-name-css{
|
||||
margin: 4px 2px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.union-relation-css{
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.table-name-css {
|
||||
margin: 4px 2px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.union-relation-css {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.dialog-css ::v-deep .el-dialog__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,61 +1,82 @@
|
||||
<template>
|
||||
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
|
||||
<el-row style="height: 26px;">
|
||||
<span class="title-text" style="line-height: 26px;">
|
||||
{{ table.name }}
|
||||
</span>
|
||||
<span v-if="sycnStatus === 'Underway'" class="blue-color" style="line-height: 26px;">
|
||||
{{ $t('dataset.dataset_sync') }}
|
||||
</span>
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
width="400"
|
||||
trigger="click"
|
||||
@show="showTab"
|
||||
@hide="hideTab"
|
||||
<div class="view-table">
|
||||
<el-row>
|
||||
<el-col class="de-dataset-name" :span="16">
|
||||
<span class="title-text" style="line-height: 26px">
|
||||
{{ table.name }}
|
||||
</span>
|
||||
<span v-if="table.mode === 0" class="de-tag primary">{{
|
||||
$t('dataset.direct_connect')
|
||||
}}</span>
|
||||
<span v-if="table.mode === 1" class="de-tag warning">{{
|
||||
$t('dataset.sync_data')
|
||||
}}</span>
|
||||
<span
|
||||
v-if="sycnStatus === 'Underway'"
|
||||
class="blue-color"
|
||||
style="line-height: 26px"
|
||||
>
|
||||
{{ $t('dataset.dataset_sync') }}
|
||||
</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<span class="create-by">{{ $t('dataset.create_by') }}</span>
|
||||
<span class="create-by">:{{ table.createBy }}</span>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="420"
|
||||
trigger="hover"
|
||||
@show="showTab"
|
||||
@hide="hideTab"
|
||||
>
|
||||
<dataset-detail
|
||||
type="dataset"
|
||||
:data="table"
|
||||
:tab-status="tabStatus"
|
||||
/>
|
||||
<i slot="reference" class="el-icon-warning-outline detail" />
|
||||
</el-popover>
|
||||
</el-col>
|
||||
<el-col
|
||||
v-if="hasDataPermission('manage', param.privileges)"
|
||||
style="text-align: right"
|
||||
:span="8"
|
||||
>
|
||||
<dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
|
||||
<!-- <svg-icon slot="reference" class="title-text" icon-class="more_v" style="cursor: pointer;" />-->
|
||||
<i
|
||||
slot="reference"
|
||||
class="el-icon-warning icon-class"
|
||||
style="margin-left: 4px;cursor: pointer;font-size: 14px;"
|
||||
/>
|
||||
</el-popover>
|
||||
<el-row v-if="hasDataPermission('manage',param.privileges)" style="float: right">
|
||||
<el-dropdown
|
||||
v-if="table.type ==='excel'"
|
||||
style="margin-right: 10px;"
|
||||
v-if="table.type === 'excel'"
|
||||
size="small"
|
||||
trigger="click"
|
||||
@command="clickEditExcel"
|
||||
placement="bottom-end"
|
||||
@command="(type) => clickEditExcel(type)"
|
||||
>
|
||||
<el-button size="mini">
|
||||
<deBtn type="primary">
|
||||
{{ $t('dataset.edit_excel') }}
|
||||
</el-button>
|
||||
</deBtn>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="beforeEditExcel('0')">
|
||||
{{ $t('dataset.excel_replace') }}
|
||||
<el-dropdown-item command="0">
|
||||
<svg-icon icon-class="icon_add-entry_outlined"> </svg-icon>
|
||||
{{ $t('dataset.excel_replace') + $t('chart.chart_data') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeEditExcel('1')">
|
||||
{{ $t('dataset.excel_add') }}
|
||||
<el-dropdown-item command="1">
|
||||
<svg-icon icon-class="icon_doc-replace_outlined"> </svg-icon>
|
||||
{{ $t('dataset.excel_add') + $t('chart.chart_data') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button v-if="table.type ==='custom'" size="mini" @click="editCustom">
|
||||
{{ $t('dataset.edit_custom_table') }}
|
||||
</el-button>
|
||||
<el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
|
||||
{{ $t('dataset.edit_sql') }}
|
||||
</el-button>
|
||||
<el-button v-if="table.type ==='union'" size="mini" @click="editUnion">
|
||||
{{ $t('dataset.edit_union') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<deBtn
|
||||
type="primary"
|
||||
v-if="['sql', 'union'].includes(table.type)"
|
||||
@click="editDataset(table.type)"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
table.type === 'union' ? 'dataset.edit_union' : 'dataset.edit_sql'
|
||||
)
|
||||
}}
|
||||
</deBtn>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
|
||||
<el-tabs v-model="tabActive" @tab-click="tabClick">
|
||||
<el-tabs class="de-tabs" v-model="tabActive" @tab-click="tabClick">
|
||||
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
|
||||
<tab-data-preview
|
||||
:param="param"
|
||||
@ -67,66 +88,82 @@
|
||||
@reSearch="reSearch"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('dataset.field_manage')" :lazy="true" name="fieldEdit">
|
||||
<field-edit v-if="tabActive === 'fieldEdit'" :param="param" :table="table" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="!hideCustomDs && table.type !== 'union' && table.type !== 'custom' && !(table.type === 'sql' && table.mode === 0)"
|
||||
:label="$t('dataset.join_view')"
|
||||
name="joinView"
|
||||
:label="$t('dataset.field_manage')"
|
||||
:lazy="true"
|
||||
name="fieldEdit"
|
||||
>
|
||||
<union-view :param="param" :table="table" />
|
||||
<field-edit
|
||||
v-if="tabActive === 'fieldEdit'"
|
||||
:param="param"
|
||||
:table="table"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="table.mode === 1 && (table.type === 'excel' || table.type === 'db' || table.type === 'sql' || table.type === 'api')"
|
||||
v-if="
|
||||
table.mode === 1 &&
|
||||
(table.type === 'excel' ||
|
||||
table.type === 'db' ||
|
||||
table.type === 'sql' ||
|
||||
table.type === 'api')
|
||||
"
|
||||
:label="$t('dataset.update_info')"
|
||||
name="updateInfo"
|
||||
>
|
||||
<update-info v-if="tabActive=='updateInfo'" :param="param" :table="table" />
|
||||
<update-info
|
||||
v-if="tabActive == 'updateInfo'"
|
||||
:param="param"
|
||||
:table="table"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="isPluginLoaded && hasDataPermission('manage',param.privileges)"
|
||||
v-if="isPluginLoaded && hasDataPermission('manage', param.privileges)"
|
||||
:lazy="true"
|
||||
:label="$t('dataset.row_permissions')"
|
||||
name="rowPermissions"
|
||||
>
|
||||
<plugin-com
|
||||
v-if="isPluginLoaded && tabActive=='rowPermissions'"
|
||||
v-if="isPluginLoaded && tabActive == 'rowPermissions'"
|
||||
ref="RowPermissions"
|
||||
component-name="RowPermissions"
|
||||
:obj="table"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="isPluginLoaded && hasDataPermission('manage',param.privileges)"
|
||||
v-if="isPluginLoaded && hasDataPermission('manage', param.privileges)"
|
||||
:lazy="true"
|
||||
:label="$t('dataset.column_permissions')"
|
||||
name="columnPermissions"
|
||||
>
|
||||
<plugin-com
|
||||
v-if="isPluginLoaded && tabActive=='columnPermissions'"
|
||||
v-if="isPluginLoaded && tabActive == 'columnPermissions'"
|
||||
ref="ColumnPermissions"
|
||||
component-name="ColumnPermissions"
|
||||
:obj="table"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import TabDataPreview from './TabDataPreview'
|
||||
import UpdateInfo from './UpdateInfo'
|
||||
import DatasetChartDetail from '../common/DatasetChartDetail'
|
||||
import UnionView from './UnionView'
|
||||
import DatasetDetail from '../common/DatasetDetail'
|
||||
import FieldEdit from './FieldEdit'
|
||||
import { pluginLoaded } from '@/api/user'
|
||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
|
||||
export default {
|
||||
name: 'ViewTable',
|
||||
components: { FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview, PluginCom },
|
||||
components: {
|
||||
FieldEdit,
|
||||
DatasetDetail,
|
||||
UpdateInfo,
|
||||
TabDataPreview,
|
||||
PluginCom
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
@ -156,25 +193,25 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hideCustomDs: function() {
|
||||
hideCustomDs: function () {
|
||||
return this.$store.getters.hideCustomDs
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'param': function() {
|
||||
param: function () {
|
||||
this.tabActive = 'dataPreview'
|
||||
this.initTable(this.param.id)
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
pluginLoaded().then(res => {
|
||||
pluginLoaded().then((res) => {
|
||||
this.isPluginLoaded = res.success && res.data
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.taskLogTimer = setInterval(() => {
|
||||
if (this.sycnStatus !== 'Underway') {
|
||||
return;
|
||||
return
|
||||
}
|
||||
if (!this.lastRequestComplete) {
|
||||
return
|
||||
@ -197,66 +234,60 @@ export default {
|
||||
if (id !== null) {
|
||||
this.fields = []
|
||||
this.data = []
|
||||
post('/dataset/table/getWithPermission/' + id, null).then(response => {
|
||||
this.table = response.data
|
||||
this.initPreviewData(this.page)
|
||||
}).catch(res => {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
})
|
||||
post('/dataset/table/getWithPermission/' + id, null)
|
||||
.then((response) => {
|
||||
this.table = response.data
|
||||
this.initPreviewData(this.page)
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$emit('switchComponent', { name: '' })
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
initPreviewData(page) {
|
||||
if (this.table.id) {
|
||||
this.table.row = this.tableViewRowForm.row
|
||||
post('/dataset/table/getPreviewData/' + page.page + '/' + page.pageSize, this.table, true, 30000).then(response => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
this.page = response.data.page
|
||||
this.sycnStatus = response.data.sycnStatus
|
||||
if (response.data.status === 'warnning') {
|
||||
this.$warning(response.data.msg, 3000)
|
||||
}
|
||||
if (response.data.status === 'error') {
|
||||
this.$error(response.data.msg, 3000)
|
||||
}
|
||||
this.lastRequestComplete = true
|
||||
}).catch(response => {
|
||||
this.lastRequestComplete = true
|
||||
this.fields = []
|
||||
this.data = []
|
||||
this.page = {
|
||||
page: 1,
|
||||
pageSize: 1000,
|
||||
show: 0
|
||||
}
|
||||
})
|
||||
post(
|
||||
'/dataset/table/getPreviewData/' + page.page + '/' + page.pageSize,
|
||||
this.table,
|
||||
true,
|
||||
30000
|
||||
)
|
||||
.then((response) => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
this.page = response.data.page
|
||||
this.sycnStatus = response.data.sycnStatus
|
||||
if (response.data.status === 'warnning') {
|
||||
this.$warning(response.data.msg, 3000)
|
||||
}
|
||||
if (response.data.status === 'error') {
|
||||
this.$error(response.data.msg, 3000)
|
||||
}
|
||||
this.lastRequestComplete = true
|
||||
})
|
||||
.catch((response) => {
|
||||
this.lastRequestComplete = true
|
||||
this.fields = []
|
||||
this.data = []
|
||||
this.page = {
|
||||
page: 1,
|
||||
pageSize: 1000,
|
||||
show: 0
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
edit() {
|
||||
this.$emit('switchComponent', { name: 'FieldEdit', param: { table: this.table }})
|
||||
},
|
||||
|
||||
editSql() {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'AddSQL',
|
||||
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
|
||||
editDataset(datasetType) {
|
||||
this.$router.push({
|
||||
path: '/dataset-form',
|
||||
query: {
|
||||
datasetType,
|
||||
id: this.table.id
|
||||
}
|
||||
})
|
||||
},
|
||||
editCustom() {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'AddCustom',
|
||||
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
|
||||
})
|
||||
},
|
||||
editUnion() {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'AddUnion',
|
||||
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
|
||||
})
|
||||
},
|
||||
|
||||
reSearch(val) {
|
||||
this.tableViewRowForm = val.form
|
||||
this.initPreviewData(val.page)
|
||||
@ -268,28 +299,15 @@ export default {
|
||||
hideTab() {
|
||||
this.tabStatus = false
|
||||
},
|
||||
|
||||
clickEditExcel(param) {
|
||||
switch (param.type) {
|
||||
case '0':
|
||||
this.$emit('switchComponent', {
|
||||
name: 'AddExcel',
|
||||
param: { id: this.table.sceneId, tableId: this.table.id, editType: 0, table: this.table }
|
||||
})
|
||||
break
|
||||
case '1':
|
||||
this.$emit('switchComponent', {
|
||||
name: 'AddExcel',
|
||||
param: { id: this.table.sceneId, tableId: this.table.id, editType: 1, table: this.table }
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
beforeEditExcel(type) {
|
||||
return {
|
||||
'type': type
|
||||
}
|
||||
clickEditExcel(type) {
|
||||
this.$router.push({
|
||||
path: '/dataset-form',
|
||||
query: {
|
||||
datasetType: 'excel',
|
||||
id: this.table.id,
|
||||
editType: type
|
||||
}
|
||||
})
|
||||
},
|
||||
msg2Current(sourceParam) {
|
||||
this.tabActive = 'updateInfo'
|
||||
@ -318,14 +336,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.icon-class {
|
||||
color: #6c6c6c;
|
||||
}
|
||||
@ -334,3 +344,59 @@ export default {
|
||||
color: #cccccc;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.view-table {
|
||||
padding: 10px 9px;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.de-dataset-name {
|
||||
display: flex;
|
||||
font-family: PingFang SC;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
|
||||
.de-tag {
|
||||
padding: 0 6px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--deWarning, #ff8800);
|
||||
background: rgba(255, 136, 0, 0.2);
|
||||
}
|
||||
|
||||
.primary {
|
||||
color: var(--primary, #3370ff);
|
||||
background: rgba(51, 112, 255, 0.2);
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 0 16px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.create-by {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--deTextSecondary, #606266);
|
||||
}
|
||||
|
||||
.detail {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
color: var(--deTextSecondary, #606266);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
21
frontend/src/views/dataset/data/noSelect.vue
Normal file
21
frontend/src/views/dataset/data/noSelect.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<el-col style="height: 100%">
|
||||
<el-empty
|
||||
style="padding-top: 212px"
|
||||
:image-size="125"
|
||||
:image="errImg"
|
||||
:description="$t('deDataset.on_the_left')"
|
||||
></el-empty>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataHome',
|
||||
data() {
|
||||
return {
|
||||
errImg: require('@/assets/None_Select_ds.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,17 +1,435 @@
|
||||
<template>
|
||||
<div>this is dataset form</div>
|
||||
<div class="de-dataset-form">
|
||||
<div class="top" v-if="table.id && !createDataset">
|
||||
<span class="name">
|
||||
<i @click="back" class="el-icon-arrow-left"></i>
|
||||
<svg-icon
|
||||
style="margin: 0 9.5px 0 16.2px"
|
||||
:icon-class="`de-${datasetType}-new`"
|
||||
/>
|
||||
<template v-if="showInput">
|
||||
<el-input @blur="nameBlur" v-model="table.name"></el-input>
|
||||
<div v-if="nameExsit" style="left: 55px" class="el-form-item__error">
|
||||
{{ $t('deDataset.already_exists') }}
|
||||
</div>
|
||||
</template>
|
||||
<span
|
||||
:class="[{ 'show-point': ['sql', 'union'].includes(datasetType) }]"
|
||||
v-else
|
||||
@click="handleClick"
|
||||
>{{ datasetName }}</span
|
||||
>
|
||||
</span>
|
||||
<span class="oprate">
|
||||
<span
|
||||
class="table-num"
|
||||
v-if="['db', 'excel', 'api'].includes(datasetType)"
|
||||
>{{ $t('deDataset.selected') }} {{ tableNum }}
|
||||
{{ $t('deDataset.zhang_biao') }}</span
|
||||
>
|
||||
<deBtn @click="datasetSave" type="primary">{{
|
||||
$t('commons.save')
|
||||
}}</deBtn>
|
||||
</span>
|
||||
</div>
|
||||
<div class="container">
|
||||
<component
|
||||
@setTableNum="(val) => (tableNum = val)"
|
||||
v-if="table.name || !createDataset"
|
||||
:param="table"
|
||||
:is="component"
|
||||
ref="addDataset"
|
||||
:nameList="nameList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
class="de-dialog-form"
|
||||
:visible.sync="createDataset"
|
||||
width="600px"
|
||||
v-loading="loading"
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<el-form
|
||||
ref="datasetForm"
|
||||
class="de-form-item"
|
||||
:model="datasetForm"
|
||||
:rules="datasetFormRules"
|
||||
>
|
||||
<el-form-item
|
||||
v-if="datasetFormRules.name"
|
||||
:label="$t('dataset.name')"
|
||||
prop="name"
|
||||
>
|
||||
<el-input v-model="datasetForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('deDataset.folder')" prop="id">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
popper-class="user-popper dataset-filed"
|
||||
width="552"
|
||||
trigger="click"
|
||||
>
|
||||
<el-tree
|
||||
:data="tData"
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
class="de-tree"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ data }" class="custom-tree-node-dataset">
|
||||
<span v-if="data.type === 'group'">
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
:title="data.name"
|
||||
>{{ data.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-tree>
|
||||
<el-select
|
||||
v-model="datasetForm.id"
|
||||
slot="reference"
|
||||
filterable
|
||||
popper-class="tree-select-dataset"
|
||||
style="width: 100%"
|
||||
:filter-method="filterMethod"
|
||||
:placeholder="$t('commons.please_select')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectDatasets"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<deBtn secondary @click="close">{{ $t('dataset.cancel') }}</deBtn>
|
||||
<deBtn type="primary" @click="saveDataset"
|
||||
>{{ $t('dataset.confirm') }}
|
||||
</deBtn>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddDB from './add/AddDB'
|
||||
import AddApi from './add/AddApi'
|
||||
import AddSQL from './add/AddSQL'
|
||||
import AddExcel from './add/AddExcel'
|
||||
import AddUnion from '@/views/dataset/add/AddUnion'
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import { groupTree } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'DatasetForm',
|
||||
components: { AddDB, AddSQL, AddExcel, AddApi, AddUnion },
|
||||
data() {
|
||||
return {
|
||||
|
||||
sceneId: '',
|
||||
originName: '',
|
||||
tableNum: 0,
|
||||
showInput: false,
|
||||
editType: '',
|
||||
loading: false,
|
||||
selectDatasets: [],
|
||||
tData: [],
|
||||
filterText: '',
|
||||
dialogTitle: '',
|
||||
createDataset: false,
|
||||
datasetType: '',
|
||||
component: '',
|
||||
table: {},
|
||||
nameExsit: false,
|
||||
nameList: [],
|
||||
datasetForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
sceneName: ''
|
||||
},
|
||||
datasetFormRules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('commons.input_content'),
|
||||
trigger: 'change'
|
||||
},
|
||||
{
|
||||
max: 50,
|
||||
message: this.$t('commons.char_can_not_more_50'),
|
||||
trigger: 'change'
|
||||
},
|
||||
{ required: true, trigger: 'blur', validator: this.nameValidator }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
computed: {
|
||||
datasetName() {
|
||||
if (+this.editType === 0) {
|
||||
return this.$t('dataset.excel_replace') + this.$t('chart.chart_data')
|
||||
}
|
||||
|
||||
if (+this.editType === 1) {
|
||||
return this.$t('dataset.excel_add') + this.$t('chart.chart_data')
|
||||
}
|
||||
return this.table.name || this.dialogTitle
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const { datasetType, sceneId, id, editType } = this.$route.query
|
||||
this.datasetType = datasetType
|
||||
this.editType = editType
|
||||
this.sceneId = sceneId
|
||||
if (id) {
|
||||
this.initTable(id)
|
||||
} else {
|
||||
this.tree(sceneId)
|
||||
this.createDataset = true
|
||||
}
|
||||
this.switchComponent(datasetType)
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.$router.back()
|
||||
},
|
||||
nameBlur() {
|
||||
this.nameExsitValidator()
|
||||
this.showInput = this.nameExsit
|
||||
},
|
||||
getDatasetNameFromGroup(sceneId) {
|
||||
post(`/dataset/table/getDatasetNameFromGroup/${sceneId}`, null).then(
|
||||
(res) => {
|
||||
this.nameList = res.data
|
||||
}
|
||||
)
|
||||
},
|
||||
datasetSave() {
|
||||
if (['sql', 'union'].includes(this.datasetType)) {
|
||||
this.nameExsitValidator()
|
||||
if (this.nameExsit) {
|
||||
return
|
||||
}
|
||||
}
|
||||
this.$refs.addDataset.save()
|
||||
},
|
||||
handleClick() {
|
||||
if (['sql', 'union'].includes(this.datasetType)) {
|
||||
this.showInput = true
|
||||
}
|
||||
},
|
||||
nodeClick({ id, label }) {
|
||||
this.selectDatasets = [
|
||||
{
|
||||
id,
|
||||
label
|
||||
}
|
||||
]
|
||||
this.$nextTick(() => {
|
||||
this.datasetForm.id = id
|
||||
})
|
||||
this.getDatasetNameFromGroup(id)
|
||||
},
|
||||
tree(sceneId) {
|
||||
this.loading = true
|
||||
groupTree({
|
||||
name: '',
|
||||
pid: '0',
|
||||
level: 0,
|
||||
type: 'group',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
}).then((res) => {
|
||||
this.tData = res.data
|
||||
if (sceneId) {
|
||||
this.dfsTree(res.data, sceneId)
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
dfsTree(arr, sceneId) {
|
||||
arr.some((ele) => {
|
||||
if (sceneId === ele.id) {
|
||||
this.nodeClick(ele)
|
||||
} else if (ele.children?.length) {
|
||||
this.dfsTree(ele.children, sceneId)
|
||||
}
|
||||
return false
|
||||
})
|
||||
},
|
||||
filterMethod(val) {
|
||||
if (!val) this.$refs.tree.filter(val)
|
||||
this.$refs.tree.filter(val)
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
beforeClose() {
|
||||
this.close()
|
||||
},
|
||||
nameRepeat(value) {
|
||||
if (!this.nameList || this.nameList.length === 0) {
|
||||
return false
|
||||
}
|
||||
return this.nameList.some((name) => name === value)
|
||||
},
|
||||
nameValidator(rule, value, callback) {
|
||||
if (this.nameRepeat(value)) {
|
||||
callback(new Error(this.$t('deDataset.already_exists')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
nameExsitValidator() {
|
||||
if (!this.nameList || this.nameList.length === 0) {
|
||||
this.nameExsit = false
|
||||
return
|
||||
}
|
||||
this.nameExsit = this.nameList.some(
|
||||
(name) => name === this.table.name && name !== this.originName
|
||||
)
|
||||
},
|
||||
close() {
|
||||
this.$router.back()
|
||||
},
|
||||
saveDataset() {
|
||||
this.$refs.datasetForm.validate((result) => {
|
||||
if (result) {
|
||||
const { name, id } = this.datasetForm
|
||||
this.table = {
|
||||
id,
|
||||
name
|
||||
}
|
||||
this.createDataset = false
|
||||
this.getDatasetNameFromGroup(id)
|
||||
}
|
||||
})
|
||||
},
|
||||
initTable(id) {
|
||||
post('/dataset/table/getWithPermission/' + id, null)
|
||||
.then((response) => {
|
||||
const { sceneId: id, id: tableId, name } = response.data || {}
|
||||
this.table = {
|
||||
id,
|
||||
tableId,
|
||||
table: response.data,
|
||||
name
|
||||
}
|
||||
this.getDatasetNameFromGroup(id)
|
||||
this.originName = name
|
||||
if (this.datasetType === 'excel') {
|
||||
this.table.editType = +this.editType
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
switchComponent(c) {
|
||||
let type = ''
|
||||
if (['db', 'excel', 'api'].includes(c)) {
|
||||
this.datasetFormRules = {}
|
||||
}
|
||||
switch (c) {
|
||||
case 'db':
|
||||
type = 'deDataset.database'
|
||||
this.component = AddDB
|
||||
break
|
||||
case 'sql':
|
||||
type = 'SQL'
|
||||
this.component = AddSQL
|
||||
break
|
||||
case 'excel':
|
||||
type = 'EXCEL'
|
||||
this.component = AddExcel
|
||||
break
|
||||
case 'union':
|
||||
type = 'dataset.union'
|
||||
this.component = AddUnion
|
||||
break
|
||||
case 'api':
|
||||
type = 'API'
|
||||
this.component = AddApi
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.dialogTitle =
|
||||
this.$t('commons.create') + this.$t(type) + this.$t('auth.datasetAuth')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.de-dataset-form {
|
||||
.top {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
|
||||
|
||||
.show-point {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
|
||||
.el-input {
|
||||
min-width: 96px;
|
||||
.el-input__inner {
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.oprate {
|
||||
.table-num {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-right: 16px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
}
|
||||
|
||||
.dataset-filed {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tree-select-dataset {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
|
||||
<el-tree
|
||||
:data="tData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" :class="treeClass(data,node)">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
<span v-if="data.type === 'scene'">
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { groupTree } from '@/api/dataset/dataset'
|
||||
|
||||
export default {
|
||||
name: 'DsMoveSelector',
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tData: [],
|
||||
currGroup: '',
|
||||
groupForm: {
|
||||
name: '',
|
||||
pid: '0',
|
||||
level: 0,
|
||||
type: 'group',
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
},
|
||||
targetGroup: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'item': function() {
|
||||
this.tree(this.groupForm)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tree(this.groupForm)
|
||||
},
|
||||
methods: {
|
||||
tree(group) {
|
||||
groupTree(group).then(res => {
|
||||
this.tData = res.data
|
||||
})
|
||||
},
|
||||
nodeClick(data, node) {
|
||||
this.targetGroup = data
|
||||
this.$emit('targetDs', data)
|
||||
},
|
||||
treeClass(data, node) {
|
||||
if (data.id === this.item.id) {
|
||||
node.visible = false
|
||||
}
|
||||
return 'custom-tree-node'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right:8px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,22 +1,43 @@
|
||||
<template>
|
||||
<el-col style="height: 400px;overflow-y: auto;margin-bottom: 10px;">
|
||||
<el-tree
|
||||
:data="tData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" :class="treeClass(data,node)">
|
||||
<span style="display: flex;flex: 1;width: 0;">
|
||||
<span v-if="data.type === 'scene'">
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
<div class="ds-move-tree">
|
||||
<el-input
|
||||
:placeholder="$t('deDataset.search_by_name')"
|
||||
clearable
|
||||
style="margin-bottom: 16px"
|
||||
size="small"
|
||||
v-model="filterText"
|
||||
/>
|
||||
<div class="tree">
|
||||
<el-tree
|
||||
:data="tData"
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
class="de-tree"
|
||||
:expand-on-click-node="false"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" :class="treeClass(data, node)">
|
||||
<span style="display: flex; flex: 1; width: 0">
|
||||
<span v-if="data.type === 'group'">
|
||||
<svg-icon icon-class="scene" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span
|
||||
style="
|
||||
margin-left: 6px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
v-html="highlights(data.name)"
|
||||
:title="data.name"
|
||||
></span>
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="data.name">{{ data.name }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-col>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -28,11 +49,16 @@ export default {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
moveDir: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tData: [],
|
||||
filterText: '',
|
||||
currGroup: '',
|
||||
groupForm: {
|
||||
name: '',
|
||||
@ -46,8 +72,11 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'item': function() {
|
||||
item: function () {
|
||||
this.tree(this.groupForm)
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -55,17 +84,35 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
tree(group) {
|
||||
groupTree(group).then(res => {
|
||||
this.tData = [{
|
||||
id: '0',
|
||||
name: this.$t('dataset.dataset_group'),
|
||||
pid: '0',
|
||||
privileges: 'grant,manage,use',
|
||||
type: 'group',
|
||||
children: res.data
|
||||
}]
|
||||
groupTree(group).then((res) => {
|
||||
if (this.moveDir) {
|
||||
this.tData = [
|
||||
{
|
||||
id: '0',
|
||||
name: this.$t('dataset.dataset_group'),
|
||||
pid: '0',
|
||||
privileges: 'grant,manage,use',
|
||||
type: 'group',
|
||||
children: res.data
|
||||
}
|
||||
]
|
||||
return
|
||||
}
|
||||
this.tData = res.data
|
||||
})
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
// 高亮显示搜索内容
|
||||
highlights(name) {
|
||||
if (!this.filterText) return name
|
||||
const replaceReg = new RegExp(this.filterText, 'g') // 匹配关键字正则
|
||||
const replaceString =
|
||||
'<span class="select-tree-keywords">' + this.filterText + '</span>' // 高亮替换v-html值
|
||||
return name.replace(replaceReg, replaceString)
|
||||
},
|
||||
nodeClick(data, node) {
|
||||
this.targetGroup = data
|
||||
this.$emit('targetGroup', data)
|
||||
@ -81,12 +128,24 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right:8px;
|
||||
}
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.ds-move-tree {
|
||||
height: 100%;
|
||||
.tree {
|
||||
height: calc(100% - 115px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.select-tree-keywords {
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
|
||||
<de-container
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<de-aside-container type="dataset">
|
||||
<group :save-status="saveStatus" @switchComponent="switchComponent" />
|
||||
</de-aside-container>
|
||||
|
||||
<de-main-container>
|
||||
<component :is="component" ref="dynamic_component" :param="param" @switchComponent="switchComponent" @saveSuccess="saveSuccess" />
|
||||
<component
|
||||
:is="component"
|
||||
ref="dynamic_component"
|
||||
:param="param"
|
||||
@switchComponent="switchComponent"
|
||||
@saveSuccess="saveSuccess"
|
||||
/>
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</template>
|
||||
@ -17,23 +24,24 @@ import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import Group from './group/Group'
|
||||
|
||||
import DataHome from './data/DataHome'
|
||||
import noSelect from './data/noSelect'
|
||||
import ViewTable from './data/ViewTable'
|
||||
import AddDB from './add/AddDB'
|
||||
import AddApi from './add/AddApi'
|
||||
import AddSQL from './add/AddSQL'
|
||||
import AddExcel from './add/AddExcel'
|
||||
import AddCustom from './add/AddCustom'
|
||||
import AddUnion from '@/views/dataset/add/AddUnion'
|
||||
import FieldEdit from './data/FieldEdit'
|
||||
import { removeClass } from '@/utils'
|
||||
import { checkCustomDs } from '@/api/dataset/dataset'
|
||||
export default {
|
||||
name: 'DataSet',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom, AddApi },
|
||||
components: {
|
||||
DeMainContainer,
|
||||
DeContainer,
|
||||
DeAsideContainer,
|
||||
Group,
|
||||
noSelect,
|
||||
ViewTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
component: DataHome,
|
||||
component: noSelect,
|
||||
param: {},
|
||||
saveStatus: null
|
||||
}
|
||||
@ -50,7 +58,7 @@ export default {
|
||||
methods: {
|
||||
initDs() {
|
||||
localStorage.setItem('reloadDsData', 'false')
|
||||
checkCustomDs().then(res => {
|
||||
checkCustomDs().then((res) => {
|
||||
this.$store.dispatch('dataset/setHideCustomDs', res.data)
|
||||
})
|
||||
},
|
||||
@ -60,29 +68,12 @@ export default {
|
||||
case 'ViewTable':
|
||||
this.component = ViewTable
|
||||
break
|
||||
case 'AddDB':
|
||||
this.component = AddDB
|
||||
break
|
||||
case 'AddSQL':
|
||||
this.component = AddSQL
|
||||
break
|
||||
case 'AddExcel':
|
||||
this.component = AddExcel
|
||||
break
|
||||
case 'AddCustom':
|
||||
this.component = AddCustom
|
||||
break
|
||||
case 'AddUnion':
|
||||
this.component = AddUnion
|
||||
break
|
||||
case 'FieldEdit':
|
||||
this.component = FieldEdit
|
||||
break
|
||||
case 'AddApi':
|
||||
this.component = AddApi
|
||||
break
|
||||
default:
|
||||
this.component = DataHome
|
||||
this.component = noSelect
|
||||
break
|
||||
}
|
||||
},
|
||||
@ -95,14 +86,19 @@ export default {
|
||||
if (routerParam !== null && routerParam.msgNotification) {
|
||||
const panelShareTypeIds = [4, 5, 6]
|
||||
// 说明是从消息通知跳转过来的
|
||||
if (panelShareTypeIds.includes(routerParam.msgType)) { // 是数据集同步
|
||||
if (panelShareTypeIds.includes(routerParam.msgType)) {
|
||||
// 是数据集同步
|
||||
if (routerParam.sourceParam) {
|
||||
try {
|
||||
const msgParam = JSON.parse(routerParam.sourceParam)
|
||||
this.param = msgParam.tableId
|
||||
this.component = ViewTable
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dynamic_component && this.$refs.dynamic_component.msg2Current && this.$refs.dynamic_component.msg2Current(routerParam.sourceParam)
|
||||
this.$refs.dynamic_component &&
|
||||
this.$refs.dynamic_component.msg2Current &&
|
||||
this.$refs.dynamic_component.msg2Current(
|
||||
routerParam.sourceParam
|
||||
)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
@ -116,16 +112,15 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0 0;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 10px 15px 0 15px;
|
||||
}
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0 0;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 10px 15px 0 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-row class="ds-from-main">
|
||||
<DsForm :params="dsParams" v-if="applyNewVisible" :t-data="this.tData" :ds-types="dsTypes" :opt-type="'appApply'" :attach-params="attachParams"></DsForm>
|
||||
<DsAppForm :params="dsParams" v-if="applyNewVisible" :t-data="this.tData" :ds-types="dsTypes" :opt-type="'appApply'" :attach-params="attachParams"></DsAppForm>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
@ -62,11 +62,11 @@ import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
|
||||
import TemplateMarketPreviewItem from '@/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem'
|
||||
import AppTemplateLog from "@/views/panel/appTemplateMarket/log";
|
||||
import {listDatasourceType} from "@/api/system/datasource";
|
||||
import DsForm from "@/views/system/datasource/DsForm";
|
||||
import DsAppForm from "@/views/system/datasource/DsAppForm";
|
||||
|
||||
export default {
|
||||
name: 'MarketPreview',
|
||||
components: {DsForm, AppTemplateLog, TemplateMarketPreviewItem },
|
||||
components: {DsAppForm, AppTemplateLog, TemplateMarketPreviewItem },
|
||||
props: {
|
||||
previewId: {
|
||||
type: String,
|
||||
|
||||
372
frontend/src/views/system/datasource/DriverFormDetail.vue
Normal file
372
frontend/src/views/system/datasource/DriverFormDetail.vue
Normal file
@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<div class="driver-detail">
|
||||
<p class="name">
|
||||
{{ driverForm.name }}
|
||||
</p>
|
||||
<p class="descript">
|
||||
{{ driverForm.desc }}
|
||||
</p>
|
||||
<div class="de-row-rules">
|
||||
<span>{{ $t('datasource.driver_file') }}</span>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="driverForm"
|
||||
:model="driverForm"
|
||||
:rules="rule"
|
||||
size="small"
|
||||
class="de-form-item"
|
||||
label-width="180px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item :label="$t('driver.driver')" prop="driverClass">
|
||||
<el-input
|
||||
style="width: 600px"
|
||||
v-model="driverForm.driverClass"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-upload
|
||||
:action="baseUrl + 'driver/file/upload'"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:file-list="fileList"
|
||||
:data="params"
|
||||
accept=".jar"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadFail"
|
||||
name="file"
|
||||
:headers="headers"
|
||||
>
|
||||
<deBtn
|
||||
icon="el-icon-upload2"
|
||||
secondary
|
||||
:loading="uploading"
|
||||
:disabled="uploading"
|
||||
>
|
||||
{{ uploading ? $t('dataset.uploading') : $t('dataset.upload_file') }}
|
||||
</deBtn>
|
||||
</el-upload>
|
||||
<p class="tips">
|
||||
{{ $t('datasource.can_be_uploaded') }}
|
||||
</p>
|
||||
<div class="jar-cont">
|
||||
<div v-for="jar in driverFiles" :key="jar.id" class="jar-info">
|
||||
<img :src="imgUrl" alt="" />
|
||||
<p class="name-descript">
|
||||
<span class="jar-name">
|
||||
{{ jar.fileName }}
|
||||
</span>
|
||||
<span class="jar-descript">
|
||||
{{ jar.fileName }}
|
||||
</span>
|
||||
</p>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('commons.delete')"
|
||||
placement="top"
|
||||
>
|
||||
<i @click="deleteDriverFile(jar)" class="el-icon-delete"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="de-foot">
|
||||
<deBtn type="primary" @click="save">{{ $t('commons.save') }}</deBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import i18n from '@/lang/index'
|
||||
import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
|
||||
import DsConfiguration from '@/views/system/datasource/DsConfiguration'
|
||||
import {
|
||||
deleteDriverFile,
|
||||
listDriverDetails,
|
||||
updateDriver
|
||||
} from '@/api/system/datasource'
|
||||
import { $alert } from '@/utils/message'
|
||||
import store from '@/store'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
const token = getToken()
|
||||
|
||||
export default {
|
||||
name: 'DriverForm',
|
||||
components: {
|
||||
DsConfiguration,
|
||||
ApiHttpRequestForm
|
||||
},
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
tData: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
dsTypes: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
imgUrl: require('@/assets/FileType.png'),
|
||||
driverForm: {
|
||||
id: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
type: '',
|
||||
driverClass: ''
|
||||
},
|
||||
datasourceType: {},
|
||||
driverClassList: [],
|
||||
rule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t('datasource.input_name'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 2,
|
||||
max: 50,
|
||||
message: i18n.t('datasource.input_limit_2_25', [2, 25]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
desc: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t('datasource.input_name'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
min: 2,
|
||||
max: 200,
|
||||
message: i18n.t('datasource.input_limit_2_25', [2, 25]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_choose_type'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
driverClass: [
|
||||
{
|
||||
required: true,
|
||||
message: i18n.t('driver.please_set_driverClass'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
canEdit: false,
|
||||
driverFiles: [],
|
||||
uploading: false,
|
||||
baseUrl: process.env.VUE_APP_BASE_API,
|
||||
headers: {
|
||||
Authorization: token,
|
||||
'Accept-Language': i18n.locale.replace('_', '-')
|
||||
},
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const row = this.params
|
||||
this.driverForm = JSON.parse(JSON.stringify(row))
|
||||
this.disabled =
|
||||
this.params &&
|
||||
this.params.id &&
|
||||
this.params.showModel &&
|
||||
this.params.showModel === 'show' &&
|
||||
!this.canEdit
|
||||
this.listDriverDetails()
|
||||
},
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
this.uploading = true
|
||||
},
|
||||
uploadSuccess(response, file, fileList) {
|
||||
this.uploading = false
|
||||
this.listDriverDetails()
|
||||
},
|
||||
uploadFail(response, file, fileList) {
|
||||
let myError = response.toString()
|
||||
myError = myError.replace('Error: ', '')
|
||||
if (myError.indexOf('AuthenticationException') >= 0) {
|
||||
const message = i18n.t('login.tokenError')
|
||||
$alert(
|
||||
message,
|
||||
() => {
|
||||
store.dispatch('user/logout').then(() => {
|
||||
location.reload()
|
||||
})
|
||||
},
|
||||
{
|
||||
confirmButtonText: i18n.t('login.re_login'),
|
||||
showClose: false
|
||||
}
|
||||
)
|
||||
return
|
||||
}
|
||||
const errorMessage = JSON.parse(myError).message
|
||||
this.uploading = false
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: errorMessage,
|
||||
showClose: true
|
||||
})
|
||||
},
|
||||
deleteDriverFile(row) {
|
||||
deleteDriverFile(row).then((res) => {
|
||||
this.$success(this.$t('commons.delete_success'))
|
||||
this.listDriverDetails()
|
||||
})
|
||||
},
|
||||
listDriverDetails() {
|
||||
listDriverDetails(this.driverForm.id).then((res) => {
|
||||
this.driverFiles = res.data
|
||||
this.driverClassList = []
|
||||
this.driverFiles.forEach((driverFile) => {
|
||||
this.driverClassList = this.driverClassList.concat(
|
||||
driverFile.driverClass.split(',')
|
||||
)
|
||||
})
|
||||
})
|
||||
},
|
||||
changeEdit() {
|
||||
this.canEdit = true
|
||||
this.formType = 'modify'
|
||||
this.disabled =
|
||||
this.params &&
|
||||
this.params.id &&
|
||||
this.params.showModel &&
|
||||
this.params.showModel === 'show' &&
|
||||
!this.canEdit
|
||||
},
|
||||
save() {
|
||||
this.$refs.driverForm.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
updateDriver(this.driverForm).then((res) => {
|
||||
this.$success(i18n.t('commons.success'))
|
||||
this.canEdit = false
|
||||
})
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.$refs.dsForm.resetFields()
|
||||
},
|
||||
backToList() {
|
||||
this.$emit('switch-component', {})
|
||||
},
|
||||
refreshType(form) {
|
||||
this.$emit('refresh-type', DsForm)
|
||||
},
|
||||
handleClick(tab, event) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.driver-detail {
|
||||
font-family: PingFang SC;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
|
||||
.descript {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
margin-top: 4px;
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 2px 0 8px 0;
|
||||
color: var(----deTextPlaceholder, #8f959e);
|
||||
}
|
||||
|
||||
.jar-cont {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
|
||||
.jar-info {
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
margin: 0 12px 12px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 340px;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
border: 1px solid var(--primary, #3370ff);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 42px;
|
||||
width: 40px;
|
||||
}
|
||||
.name-descript {
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.jar-descript {
|
||||
font-size: 14px;
|
||||
color: var(--deTextPlaceholder, #8f959e);
|
||||
}
|
||||
|
||||
.jar-name {
|
||||
font-size: 12px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-delete {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 13.3px;
|
||||
color: var(--deTextPlaceholder, #8f959e);
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 17px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
860
frontend/src/views/system/datasource/DsAppForm.vue
Normal file
860
frontend/src/views/system/datasource/DsAppForm.vue
Normal file
@ -0,0 +1,860 @@
|
||||
<template>
|
||||
<layout-content :header="headName">
|
||||
<template v-if="!optType" v-slot:header>
|
||||
<el-icon name="back" class="back-button" @click.native="backToList" />
|
||||
{{
|
||||
params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType == 'add' ? $t('datasource.create') : $t('datasource.modify')
|
||||
}}
|
||||
</template>
|
||||
<template v-if="optType==='appApply'">
|
||||
<span>模板信息</span>
|
||||
</template>
|
||||
<div v-if="optType==='appApply'">
|
||||
<el-form
|
||||
ref="attachParamsForm"
|
||||
:model="attachForm"
|
||||
:rules="rule"
|
||||
size="small"
|
||||
label-width="180px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item :label="'仪表板位置'" prop="panelId">
|
||||
<treeselect
|
||||
v-model="attachForm.panelId"
|
||||
:clearable="false"
|
||||
:options="panelGroupList"
|
||||
:normalizer="normalizer"
|
||||
:placeholder="$t('chart.select_group')"
|
||||
:no-children-text="$t('commons.treeselect.no_children_text')"
|
||||
:no-options-text="$t('commons.treeselect.no_options_text')"
|
||||
:no-results-text="$t('commons.treeselect.no_results_text')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="'仪表板名称'" prop="panelName">
|
||||
<el-input v-model="attachForm.panelName" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="'数据集位置'" prop="desc">
|
||||
<treeselect
|
||||
v-model="attachForm.datasetGroupId"
|
||||
:clearable="false"
|
||||
:options="datasetGroupList"
|
||||
:normalizer="normalizer"
|
||||
:placeholder="$t('chart.select_group')"
|
||||
:no-children-text="$t('commons.treeselect.no_children_text')"
|
||||
:no-options-text="$t('commons.treeselect.no_options_text')"
|
||||
:no-results-text="$t('commons.treeselect.no_results_text')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="'数据集分组名称'" prop="datasetGroupName">
|
||||
<el-input v-model="attachForm.datasetGroupName" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template v-if="optType==='appApply'">
|
||||
<span>数据源信息</span>
|
||||
</template>
|
||||
<div>
|
||||
<el-form
|
||||
ref="dsForm"
|
||||
:model="form"
|
||||
:rules="rule"
|
||||
size="small"
|
||||
:disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"
|
||||
label-width="180px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.description')" prop="desc">
|
||||
<el-input v-model="form.desc" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.type')" prop="type">
|
||||
<el-select
|
||||
v-model="form.type"
|
||||
:placeholder="$t('datasource.please_choose_type')"
|
||||
class="select-width"
|
||||
style="width: 100%"
|
||||
:disabled="formType=='modify' || (formType==='add' && params && !!params.type)"
|
||||
filterable
|
||||
@change="changeType()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dsTypes"
|
||||
:key="item.type"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
|
||||
<el-select
|
||||
v-model="form.configuration.customDriver"
|
||||
:placeholder="$t('driver.please_choose_driver')"
|
||||
class="select-width"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in driverList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:disabled="!item.driverClass"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<ds-configuration v-if="!datasourceType.isPlugin" ref="dsConfig" :datasource-type="datasourceType" :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit" />
|
||||
<plugin-com v-if="datasourceType.isPlugin" ref="pluginDsConfig" :component-name="datasourceType.type" :obj="{form, disabled }" />
|
||||
|
||||
</el-form>
|
||||
|
||||
<div v-if="canEdit" slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
||||
@click="validaDatasource"
|
||||
>{{ $t('commons.validate') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
||||
type="primary"
|
||||
@click="save"
|
||||
>{{ $t('commons.save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-else slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
||||
@click="validaDatasource"
|
||||
>{{ $t('commons.validate') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
||||
type="primary"
|
||||
@click="changeEdit"
|
||||
>{{ $t('commons.edit') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import {
|
||||
addDs,
|
||||
editDs,
|
||||
getSchema,
|
||||
validateDs,
|
||||
validateDsById,
|
||||
checkApiDatasource,
|
||||
listDriverByType
|
||||
} from '@/api/system/datasource'
|
||||
import { $confirm } from '@/utils/message'
|
||||
import i18n from '@/lang/index'
|
||||
import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
|
||||
import DsConfiguration from '@/views/system/datasource/DsConfiguration'
|
||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import {groupTree,appApply} from "@/api/panel/panel";
|
||||
import { dsGroupTree } from '@/api/dataset/dataset'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
export default {
|
||||
name: 'DsForm',
|
||||
components: {
|
||||
DsConfiguration,
|
||||
LayoutContent,
|
||||
ApiHttpRequestForm,
|
||||
PluginCom
|
||||
},
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
tData: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
dsTypes: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
attachParams: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
optType:{
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
attachRule: {
|
||||
datasetGroupId: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }],
|
||||
panelId: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }]
|
||||
},
|
||||
panelGroupList: [],
|
||||
datasetGroupList: [],
|
||||
attachForm:{
|
||||
appTemplateId:'',
|
||||
panelId:'',
|
||||
panelName:'',
|
||||
datasetGroupId:'0',
|
||||
datasetGroupName: ''
|
||||
},
|
||||
form: {
|
||||
configuration: {
|
||||
initialPoolSize: 5,
|
||||
extraParams: '',
|
||||
minPoolSize: 5,
|
||||
maxPoolSize: 50,
|
||||
maxIdleTime: 30,
|
||||
acquireIncrement: 5,
|
||||
idleConnectionTestPeriod: 5,
|
||||
connectTimeout: 5,
|
||||
customDriver: 'default',
|
||||
queryTimeout: 30
|
||||
},
|
||||
apiConfiguration: []
|
||||
},
|
||||
datasourceType: {},
|
||||
rule: {
|
||||
name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
|
||||
{ min: 2, max: 25, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
|
||||
desc: [{ min: 2, max: 50, message: i18n.t('datasource.input_limit_2_50'), trigger: 'blur' }],
|
||||
type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }],
|
||||
'configuration.dataBase': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_data_base'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.connectionType': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_select_oracle_type'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.username': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_user_name'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.password': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_password'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.host': [{ required: true, message: i18n.t('datasource.please_input_host'), trigger: 'blur' }],
|
||||
'configuration.url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
|
||||
'configuration.port': [{ required: true, message: i18n.t('datasource.please_input_port'), trigger: 'blur' }],
|
||||
'configuration.initialPoolSize': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_initial_pool_size'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.minPoolSize': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_min_pool_size'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.maxPoolSize': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_max_pool_size'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.maxIdleTime': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_max_idle_time'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.acquireIncrement': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_acquire_increment'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.connectTimeout': [{
|
||||
required: true,
|
||||
message: i18n.t('datasource.please_input_connect_timeout'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
|
||||
'dataPath': [{ required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur' }]
|
||||
},
|
||||
schemas: [],
|
||||
canEdit: false,
|
||||
originConfiguration: {},
|
||||
edit_api_item: false,
|
||||
add_api_item: true,
|
||||
active: 0,
|
||||
defaultApiItem: {
|
||||
name: '',
|
||||
url: '',
|
||||
method: 'GET',
|
||||
request: {
|
||||
headers: [{}],
|
||||
body: {
|
||||
'type': '',
|
||||
'raw': '',
|
||||
'kvs': []
|
||||
}
|
||||
},
|
||||
fields: []
|
||||
},
|
||||
apiItem: {
|
||||
status: '',
|
||||
name: '',
|
||||
url: '',
|
||||
method: 'GET',
|
||||
dataPath: '',
|
||||
request: {
|
||||
headers: [],
|
||||
body: {
|
||||
'type': '',
|
||||
'raw': '',
|
||||
'kvs': []
|
||||
},
|
||||
authManager: {}
|
||||
},
|
||||
fields: []
|
||||
},
|
||||
reqOptions: [{ id: 'GET', label: 'GET' }, { id: 'POST', label: 'POST' }],
|
||||
loading: false,
|
||||
responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
|
||||
api_table_title: '',
|
||||
api_step2_active_name: 'first',
|
||||
fieldTypes: [
|
||||
{ label: this.$t('dataset.text'), value: 0 },
|
||||
{ label: this.$t('dataset.time'), value: 1 },
|
||||
{ label: this.$t('dataset.value'), value: 2 },
|
||||
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
|
||||
{ label: this.$t('dataset.location'), value: 5 }
|
||||
],
|
||||
height: 500,
|
||||
disabledNext: false,
|
||||
driverList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
headName() {
|
||||
if(this.optType==='appApply'){
|
||||
return ''
|
||||
}else if(this.formType==='add'){
|
||||
return this.$t('datasource.create')
|
||||
}else{
|
||||
return this.$t('datasource.modify')
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.params && this.params.id) {
|
||||
const row = this.params
|
||||
this.edit(row)
|
||||
this.changeType(true)
|
||||
} else {
|
||||
this.create()
|
||||
if (this.params && this.params.type) {
|
||||
this.setType()
|
||||
this.changeType()
|
||||
}
|
||||
}
|
||||
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
|
||||
},
|
||||
mounted() {
|
||||
if(this.optType==='appApply'){
|
||||
this.getPanelGroupTree()
|
||||
this.getDatasetGroupTree()
|
||||
this.attachForm.appTemplateId = this.attachParams.appTemplateId
|
||||
this.attachForm.panelName = this.attachParams.name
|
||||
this.attachForm.datasetGroupName = this.attachParams.name
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
normalizer(node) {
|
||||
// 去掉children=null的属性
|
||||
if (node.children === null || node.children === 'null') {
|
||||
delete node.children
|
||||
}
|
||||
},
|
||||
getDatasetGroupTree() {
|
||||
dsGroupTree({nodeType: 'group',}).then(res => {
|
||||
this.datasetGroupList = [{
|
||||
id: '0',
|
||||
name: this.$t('dataset.dataset_group'),
|
||||
label: this.$t('dataset.dataset_group'),
|
||||
pid: '0',
|
||||
privileges: 'grant,manage,use',
|
||||
type: 'group',
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
},
|
||||
getPanelGroupTree() {
|
||||
groupTree({ nodeType: 'folder' }).then(res => {
|
||||
this.panelGroupList = res.data
|
||||
if(this.panelGroupList && this.panelGroupList.length>0){
|
||||
this.attachForm.panelId =this.panelGroupList[0].id
|
||||
}
|
||||
})
|
||||
},
|
||||
setType() {
|
||||
this.form.type = this.params.type
|
||||
this.form.configuration = {
|
||||
initialPoolSize: 5,
|
||||
extraParams: '',
|
||||
minPoolSize: 5,
|
||||
maxPoolSize: 50,
|
||||
maxIdleTime: 30,
|
||||
acquireIncrement: 5,
|
||||
idleConnectionTestPeriod: 5,
|
||||
connectTimeout: 5,
|
||||
customDriver: 'default',
|
||||
queryTimeout: 30
|
||||
}
|
||||
},
|
||||
changeEdit() {
|
||||
this.canEdit = true
|
||||
this.formType = 'modify'
|
||||
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
|
||||
},
|
||||
create() {
|
||||
this.formType = 'add'
|
||||
this.canEdit = true
|
||||
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
|
||||
},
|
||||
edit(row) {
|
||||
this.formType = 'modify'
|
||||
this.form = JSON.parse(JSON.stringify(row))
|
||||
if (row.type === 'api') {
|
||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.apiConfiguration))
|
||||
this.originConfiguration.forEach(item => {
|
||||
delete item.status
|
||||
})
|
||||
this.originConfiguration = JSON.stringify(this.originConfiguration)
|
||||
} else {
|
||||
this.form.configuration = JSON.parse(this.form.configuration)
|
||||
this.originConfiguration = JSON.stringify(this.form.configuration)
|
||||
}
|
||||
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
|
||||
},
|
||||
reset() {
|
||||
this.$refs.dsForm.resetFields()
|
||||
},
|
||||
save() {
|
||||
if (!this.form.configuration.schema && (this.form.type === 'oracle' || this.form.type === 'sqlServer' || this.form.type === 'pg' || this.form.type === 'redshift' || this.form.type === 'db2')) {
|
||||
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
||||
return
|
||||
}
|
||||
if (this.form.type !== 'es' && this.form.type !== 'api' && this.form.configuration.port <= 0) {
|
||||
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
||||
return
|
||||
}
|
||||
if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0) {
|
||||
this.$message.error(i18n.t('datasource.no_less_then_0'))
|
||||
return
|
||||
}
|
||||
let repeat = false
|
||||
const repeatDsName = []
|
||||
if(!this.datasourceType.isPlugin){
|
||||
this.tData.forEach(item => {
|
||||
if (item.id === this.form.type) {
|
||||
item.children.forEach(child => {
|
||||
if (this.formType === 'modify' && child.id === this.form.id) {
|
||||
return
|
||||
}
|
||||
const configuration = JSON.parse(child.configuration)
|
||||
if (!configuration) {
|
||||
return
|
||||
}
|
||||
switch (this.form.type) {
|
||||
case 'mysql':
|
||||
case 'TiDB':
|
||||
case 'StarRocks':
|
||||
case 'hive':
|
||||
case 'mariadb':
|
||||
case 'ds_doris':
|
||||
case 'ck':
|
||||
case 'mongo':
|
||||
case 'mariadb':
|
||||
case 'impala':
|
||||
if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
|
||||
repeat = true
|
||||
repeatDsName.push(child.name)
|
||||
}
|
||||
break
|
||||
case 'pg':
|
||||
case 'sqlServer':
|
||||
case 'redshift':
|
||||
case 'oracle':
|
||||
case 'db2':
|
||||
if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port && configuration.schema == this.form.configuration.schema) {
|
||||
repeatDsName.push(child.name)
|
||||
repeat = true
|
||||
}
|
||||
break
|
||||
case 'es':
|
||||
if (configuration.url == this.form.configuration.url) {
|
||||
repeatDsName.push(child.name)
|
||||
repeat = true
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}else {
|
||||
if( this.datasourceType.isJdbc){
|
||||
this.tData.forEach(item => {
|
||||
if (item.id === this.form.type) {
|
||||
item.children.forEach(child => {
|
||||
if (this.formType === 'modify' && child.id === this.form.id) {
|
||||
return
|
||||
}
|
||||
const configuration = JSON.parse(child.configuration)
|
||||
if (!configuration) {
|
||||
return
|
||||
}
|
||||
if(configuration.schema != null){
|
||||
if (configuration.schema == this.form.configuration.schema && configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
|
||||
repeat = true
|
||||
repeatDsName.push(child.name)
|
||||
}
|
||||
}else {
|
||||
if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
|
||||
repeat = true
|
||||
repeatDsName.push(child.name)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
let status = null
|
||||
if (this.datasourceType.isPlugin) {
|
||||
status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
|
||||
} else {
|
||||
this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
|
||||
status = valid
|
||||
})
|
||||
}
|
||||
if (!status) {
|
||||
return
|
||||
}
|
||||
if(this.optType==='appApply'){
|
||||
this.$refs.attachParamsForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
this.$refs.dsForm.validate(valid => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
const method = this.formType === 'add' ? addDs : editDs
|
||||
const form = JSON.parse(JSON.stringify(this.form))
|
||||
if (form.type === 'api') {
|
||||
if (this.form.apiConfiguration.length < 1) {
|
||||
this.$message.error(i18n.t('datasource.api_table_not_empty'))
|
||||
return
|
||||
}
|
||||
form.apiConfiguration.forEach(item => {
|
||||
delete item.status
|
||||
})
|
||||
form.configuration = JSON.stringify(form.apiConfiguration)
|
||||
} else {
|
||||
form.configuration = JSON.stringify(form.configuration)
|
||||
}
|
||||
if(this.optType==='appApply'){
|
||||
const appApplyForm = {
|
||||
...this.attachForm,
|
||||
datasourceList:[deepCopy(form)]
|
||||
}
|
||||
appApply(appApplyForm).then(res => {
|
||||
this.$success(i18n.t('commons.save_success'))
|
||||
this.$router.push({ name: 'panel', params: res.data })
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.formType === 'modify' && this.originConfiguration !== form.configuration) {
|
||||
if (repeat) {
|
||||
$confirm(i18n.t('datasource.repeat_datasource_msg') + '[' + repeatDsName.join(',') + '], ' + i18n.t('datasource.confirm_save'), () => {
|
||||
$confirm(i18n.t('datasource.edit_datasource_msg'), () => {
|
||||
this.method(method, form)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
$confirm(i18n.t('datasource.edit_datasource_msg'), () => {
|
||||
this.method(method, form)
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
if (repeat) {
|
||||
$confirm(i18n.t('datasource.repeat_datasource_msg') + '[' + repeatDsName.join(',') + '], ' + i18n.t('datasource.confirm_save'), () => {
|
||||
this.method(method, form)
|
||||
})
|
||||
} else {
|
||||
this.method(method, form)
|
||||
}
|
||||
})
|
||||
},
|
||||
method(method, form) {
|
||||
method(form).then(res => {
|
||||
this.$success(i18n.t('commons.save_success'))
|
||||
this.refreshType(form)
|
||||
this.backToList()
|
||||
})
|
||||
},
|
||||
getSchema() {
|
||||
this.$refs.dsForm.validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.configuration = JSON.stringify(data.configuration)
|
||||
getSchema(data).then(res => {
|
||||
this.schemas = res.data
|
||||
this.$success(i18n.t('commons.success'))
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
validaDatasource() {
|
||||
if (!this.form.configuration.schema && this.form.type === 'oracle') {
|
||||
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
||||
return
|
||||
}
|
||||
if (this.form.type !== 'es' && this.form.type !== 'api' && this.form.configuration.port <= 0) {
|
||||
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
||||
return
|
||||
}
|
||||
let status = null
|
||||
if (this.datasourceType.isPlugin) {
|
||||
status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
|
||||
} else {
|
||||
this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
|
||||
status = valid
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
if (!status) {
|
||||
return
|
||||
}
|
||||
this.$refs.dsForm.validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
if (data.type === 'api') {
|
||||
data.configuration = JSON.stringify(data.apiConfiguration)
|
||||
} else {
|
||||
data.configuration = JSON.stringify(data.configuration)
|
||||
}
|
||||
if (data.showModel === 'show' && !this.canEdit) {
|
||||
validateDsById(data.id).then(res => {
|
||||
if (res.success) {
|
||||
this.$success(i18n.t('datasource.validate_success'))
|
||||
} else {
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message)
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + '......')
|
||||
}
|
||||
}
|
||||
this.refreshType(data)
|
||||
})
|
||||
} else {
|
||||
validateDs(data).then(res => {
|
||||
if (res.success) {
|
||||
this.$success(i18n.t('datasource.validate_success'))
|
||||
} else {
|
||||
if (data.type === 'api') {
|
||||
this.form.apiConfiguration = res.data.apiConfiguration
|
||||
}
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message)
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + '......')
|
||||
}
|
||||
}
|
||||
}).catch(res => {
|
||||
this.$error(res.message)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeType(init) {
|
||||
for (let i = 0; i < this.dsTypes.length; i++) {
|
||||
if (this.dsTypes[i].type === this.form.type) {
|
||||
if (this.form.type !== 'api' && !init) {
|
||||
this.form.configuration.extraParams = this.dsTypes[i].extraParams
|
||||
this.form.configuration.customDriver = 'default'
|
||||
}
|
||||
this.datasourceType = this.dsTypes[i]
|
||||
if (this.datasourceType.isJdbc) {
|
||||
listDriverByType(this.datasourceType.type).then(res => {
|
||||
this.driverList = []
|
||||
this.driverList.push({ id: 'default', name: 'Default', driverClass: 'Default' })
|
||||
this.driverList = this.driverList.concat(res.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
backToList() {
|
||||
this.$emit('switch-component', {})
|
||||
},
|
||||
refreshType(form) {
|
||||
this.$emit('refresh-type', form)
|
||||
},
|
||||
next() {
|
||||
if (this.active === 1) {
|
||||
let hasRepeatName = false
|
||||
if (this.add_api_item) {
|
||||
this.form.apiConfiguration.forEach(item => {
|
||||
if (item.name === this.apiItem.name) {
|
||||
hasRepeatName = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const index = this.form.apiConfiguration.indexOf(this.apiItem)
|
||||
for (let i = 0; i < this.form.apiConfiguration.length; i++) {
|
||||
if (i !== index && this.form.apiConfiguration[i].name === this.apiItem.name) {
|
||||
hasRepeatName = true
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasRepeatName) {
|
||||
this.$message.error(i18n.t('datasource.has_repeat_name'))
|
||||
return
|
||||
}
|
||||
this.$refs.apiItem.validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.apiItem))
|
||||
data.request = JSON.stringify(data.request)
|
||||
this.loading = true
|
||||
this.disabledNext = true
|
||||
checkApiDatasource(data).then(res => {
|
||||
this.loading = false
|
||||
this.disabledNext = false
|
||||
this.apiItem.status = 'Success'
|
||||
this.$success(i18n.t('commons.success'))
|
||||
this.active++
|
||||
this.apiItem.fields = res.data.fields
|
||||
this.$refs.plxTable.reloadData(res.data.datas)
|
||||
}).catch(res => {
|
||||
this.loading = false
|
||||
this.disabledNext = false
|
||||
})
|
||||
} else {
|
||||
this.apiItem.fields = []
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
before() {
|
||||
this.active--
|
||||
},
|
||||
closeEditItem() {
|
||||
this.active = 0
|
||||
this.edit_api_item = false
|
||||
},
|
||||
saveItem() {
|
||||
this.active = 0
|
||||
this.edit_api_item = false
|
||||
if (this.add_api_item) {
|
||||
this.form.apiConfiguration.push(this.apiItem)
|
||||
}
|
||||
},
|
||||
addApiItem(item) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.apiItem.clearValidate()
|
||||
})
|
||||
if (item) {
|
||||
this.add_api_item = false
|
||||
this.api_table_title = this.$t('datasource.edit_api_table')
|
||||
this.apiItem = item
|
||||
} else {
|
||||
this.add_api_item = true
|
||||
this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
|
||||
this.api_table_title = this.$t('datasource.add_api_table')
|
||||
}
|
||||
this.active = 1
|
||||
this.edit_api_item = true
|
||||
},
|
||||
deleteItem(item) {
|
||||
this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(item), 1)
|
||||
},
|
||||
validateApi(item) {
|
||||
if (undefined) {
|
||||
} else {
|
||||
this.$refs.apiItem.validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.apiItem))
|
||||
data.request = JSON.stringify(data.request)
|
||||
this.loading = true
|
||||
checkApiDatasource(data).then(res => {
|
||||
this.loading = false
|
||||
this.$success(i18n.t('commons.success'))
|
||||
this.apiItem.fields = res.data.fields
|
||||
this.$refs.plxTable.reloadData(res.data.datas)
|
||||
}).catch(res => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/* .el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
} */
|
||||
.ms-http-input {
|
||||
width: 500px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tip {
|
||||
padding: 3px 5px;
|
||||
font-size: 16px;
|
||||
border-radius: 0;
|
||||
border-left: 4px solid #409EFF;
|
||||
margin: 5px 5px 10px 5px;
|
||||
}
|
||||
.el-select ::v-deep input {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.el-select ::v-deep .el-input__suffix {
|
||||
right: 0;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__header {
|
||||
padding: 10px 20px 0px;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 10px 20px 10px;
|
||||
}
|
||||
.dialog-footer ::v-deep .el-dialog__footer {
|
||||
padding: 10px 10px 10px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,31 @@
|
||||
<template>
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<de-aside-container style="padding: 0 0;" type="datasource">
|
||||
<ds-tree ref="dsTree" :datasource="datasource" @switch-main="switchMain" />
|
||||
<div
|
||||
class="de-ds-container"
|
||||
:class="[{ 'is-driver-mgm': currentMgm === 'driverMgm' }]"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<div v-if="currentMgm === 'driverMgm'" class="dsr-route-title">
|
||||
<div>
|
||||
<i class="el-icon-arrow-left back-button" @click="jump" />
|
||||
<span>{{ $t('driver.mgm') }}</span>
|
||||
</div>
|
||||
<deBtn type="primary" @click="addDriver" icon="el-icon-plus"
|
||||
>{{ $t("driver.add") }}
|
||||
</deBtn>
|
||||
</div>
|
||||
<de-aside-container
|
||||
style="padding: 0 0"
|
||||
type="datasource"
|
||||
>
|
||||
<ds-tree
|
||||
@switch-mgm="switchMgm"
|
||||
ref="dsTree"
|
||||
:datasource="datasource"
|
||||
@switch-main="switchMain"
|
||||
/>
|
||||
</de-aside-container>
|
||||
<de-main-container>
|
||||
<de-main-container
|
||||
>
|
||||
<component
|
||||
:is="component"
|
||||
v-if="!!component"
|
||||
@ -13,75 +35,104 @@
|
||||
@refresh-type="refreshType"
|
||||
@switch-component="switchMain"
|
||||
/>
|
||||
<el-empty v-else :image-size="125" :description="$t(`datasource.${swTips}`)" :image="image"></el-empty>
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import DsTree from './DsTree'
|
||||
import DsForm from './DsForm'
|
||||
import DriverForm from "./DriverForm";
|
||||
import DataHome from './DataHome'
|
||||
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',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome },
|
||||
name: "DsMain",
|
||||
components: { DeMainContainer, DeAsideContainer, DsTree },
|
||||
data() {
|
||||
return {
|
||||
component: DataHome,
|
||||
image: require('@/assets/None_Select_ds.png'),
|
||||
component: '',
|
||||
datasource: {},
|
||||
param: null,
|
||||
tData: null,
|
||||
dsTypes: []
|
||||
}
|
||||
currentMgm: "dsMgm",
|
||||
dsTypes: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
mounted() {
|
||||
// this.clear()
|
||||
computed: {
|
||||
swTips() {
|
||||
return this.currentMgm === 'driverMgm' ? 'on_the_left' : 'on_the_left';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump() {
|
||||
this.$refs.dsTree.dsMgm();
|
||||
this.switchMgm('dsMgm');
|
||||
},
|
||||
switchMgm(type) {
|
||||
this.currentMgm = type;
|
||||
},
|
||||
addDriver() {
|
||||
this.$refs.dsTree.addDriver();
|
||||
},
|
||||
// 切换main区内容
|
||||
switchMain(param) {
|
||||
const { component, componentParam, tData, dsTypes} = param
|
||||
this.component = DataHome
|
||||
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 "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 = DataHome
|
||||
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>
|
||||
<style scoped lang="scss">
|
||||
.de-ds-container {
|
||||
height: 100%;
|
||||
// height: calc(100vh - 56px);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.el-empty {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0px;
|
||||
@ -89,8 +140,30 @@ export default {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0px;
|
||||
.dsr-route-title {
|
||||
width: 100%;
|
||||
margin: -2px 0 22px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.is-driver-mgm {
|
||||
background-color: var(--MainBG, #f5f6f7);
|
||||
padding: 24px;
|
||||
.ms-aside-container,
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 170px);
|
||||
background-color: var(--ContentBG, #ffffff);
|
||||
|
||||
.tree-style {
|
||||
padding-top: 24px;
|
||||
}
|
||||
}
|
||||
.ms-main-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 24px 0 70px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
216
frontend/src/views/system/datasource/dsTable.vue
Normal file
216
frontend/src/views/system/datasource/dsTable.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="ds-table de-serach-table">
|
||||
<el-row class="top-operate">
|
||||
<el-col :span="10">
|
||||
<span class="table-name">{{ params.name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="14" class="right-user">
|
||||
<el-input
|
||||
:placeholder="$t('system_parameter_setting.search_keywords')"
|
||||
prefix-icon="el-icon-search"
|
||||
class="name-email-search"
|
||||
size="small"
|
||||
clearable
|
||||
ref="search"
|
||||
v-model="nikeName"
|
||||
@blur="initSearch"
|
||||
@clear="initSearch"
|
||||
>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="table-container">
|
||||
<grid-table
|
||||
v-loading="loading"
|
||||
:tableData="tableData"
|
||||
:columns="[]"
|
||||
:pagination="paginationConfig"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column
|
||||
key="name"
|
||||
prop="name"
|
||||
:label="$t('datasource.table_name')"
|
||||
/>
|
||||
<el-table-column
|
||||
slot="__operation"
|
||||
:label="$t('commons.operating')"
|
||||
key="__operation"
|
||||
fixed="right"
|
||||
width="168"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="createtDataset(scope.row)"
|
||||
class="text-btn mar3 mar6"
|
||||
type="text"
|
||||
>{{ $t("datasource.create_dataset") }}</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="selectDataset(scope.row)"
|
||||
class="text-btn"
|
||||
type="text"
|
||||
>{{ $t("dataset.detail") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</grid-table>
|
||||
</div>
|
||||
<el-drawer
|
||||
:title="$t('dataset.detail')"
|
||||
:visible.sync="userDrawer"
|
||||
custom-class="user-drawer-task ds-table-drawer"
|
||||
size="840px"
|
||||
v-closePress
|
||||
direction="rtl"
|
||||
>
|
||||
<el-row style="margin-top: 12px" :gutter="24">
|
||||
<el-col :span="12">
|
||||
<p class="table-name">
|
||||
{{ $t("datasource.table_name") }}
|
||||
</p>
|
||||
<p class="table-value">
|
||||
{{ dsTableDetail.name }}
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p class="table-name">
|
||||
{{ $t("datasource.table_description") }}
|
||||
</p>
|
||||
<p class="table-value">
|
||||
{{ 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-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userDrawer: false,
|
||||
dsTableDetail: {},
|
||||
nikeName: "",
|
||||
loading: false,
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
dsTableData: [{date: 1}],
|
||||
tableData: [{ name: 1 }],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.initSearch();
|
||||
},
|
||||
methods: {
|
||||
createtDataset(row) {},
|
||||
selectDataset(row) {
|
||||
this.dsTableDetail = row;
|
||||
this.userDrawer = true;
|
||||
},
|
||||
handleSizeChange(pageSize) {
|
||||
this.paginationConfig.currentPage = 1;
|
||||
this.paginationConfig.pageSize = pageSize;
|
||||
this.search();
|
||||
},
|
||||
handleCurrentChange(currentPage) {
|
||||
this.paginationConfig.currentPage = currentPage;
|
||||
this.search();
|
||||
},
|
||||
initSearch() {
|
||||
this.handleCurrentChange(1);
|
||||
},
|
||||
search() {
|
||||
this.loading = true;
|
||||
const param = {
|
||||
conditions: [],
|
||||
};
|
||||
if (this.nikeName) {
|
||||
param.conditions.push({
|
||||
field: `dataset_table_task.name`,
|
||||
operator: "like",
|
||||
value: this.nikeName,
|
||||
});
|
||||
}
|
||||
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;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ds-table-drawer {
|
||||
.table-value,
|
||||
.table-name {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
.table-name {
|
||||
color: var(--deTextSecondary, #646a73);
|
||||
}
|
||||
.table-value {
|
||||
margin: 4px 0 24px 0;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
}
|
||||
.ds-table {
|
||||
height: 100%;
|
||||
padding: 10px 14px;
|
||||
box-sizing: border-box;
|
||||
.table-name {
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.el-table__fixed-right::before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
frontend/src/views/system/datasource/form.vue
Normal file
13
frontend/src/views/system/datasource/form.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="de-ds-form">123</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,60 +1,61 @@
|
||||
<template>
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<de-main-container>
|
||||
<ds-main ref="dsMain" />
|
||||
</de-main-container>
|
||||
<de-container
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<ds-main ref="dsMain" />
|
||||
</de-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DsMain from './DsMain'
|
||||
import bus from '@/utils/bus'
|
||||
import DeContainer from "@/components/dataease/DeContainer";
|
||||
import DsMain from "./DsMain";
|
||||
import bus from "@/utils/bus";
|
||||
|
||||
export default {
|
||||
name: 'Panel',
|
||||
components: { DeMainContainer, DeContainer, DsMain },
|
||||
name: "Panel",
|
||||
components: { DeContainer, DsMain },
|
||||
data() {
|
||||
return {
|
||||
component: DsMain,
|
||||
componentName: 'DsMain',
|
||||
param: {}
|
||||
}
|
||||
componentName: "DsMain",
|
||||
param: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
bus.$on('to-msg-ds', this.toMsgDs)
|
||||
bus.$on("to-msg-ds", this.toMsgDs);
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('to-msg-ds', this.toMsgDs)
|
||||
bus.$off("to-msg-ds", this.toMsgDs);
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('app/toggleSideBarHide', true)
|
||||
const routerParam = this.$router.currentRoute.params
|
||||
this.toMsgDs(routerParam)
|
||||
this.$store.dispatch("app/toggleSideBarHide", true);
|
||||
const routerParam = this.$router.currentRoute.params;
|
||||
this.toMsgDs(routerParam);
|
||||
},
|
||||
methods: {
|
||||
toMsgDs(routerParam) {
|
||||
if (routerParam !== null && routerParam.msgNotification) {
|
||||
const panelShareTypeIds = [7, 8]
|
||||
const panelShareTypeIds = [7, 8];
|
||||
// 说明是从消息通知跳转过来的
|
||||
if (panelShareTypeIds.includes(routerParam.msgType)) { // 是数据集同步
|
||||
if (panelShareTypeIds.includes(routerParam.msgType)) {
|
||||
// 是数据集同步
|
||||
if (routerParam.sourceParam) {
|
||||
try {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dsMain && this.$refs.dsMain.msg2Current && this.$refs.dsMain.msg2Current(routerParam.sourceParam)
|
||||
})
|
||||
this.$refs.dsMain &&
|
||||
this.$refs.dsMain.msg2Current &&
|
||||
this.$refs.dsMain.msg2Current(routerParam.sourceParam);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user