feat: 数据集 数据源优化
This commit is contained in:
dataeaseShu
parent
3513bad8b8
commit
12450afa56
@ -232,4 +232,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 |
@ -1649,7 +1649,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',
|
||||
@ -1702,7 +1701,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',
|
||||
|
||||
@ -1649,7 +1649,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: '請輸入最大連接數',
|
||||
@ -1702,7 +1701,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: '請輸入密碼打開鏈接',
|
||||
|
||||
@ -467,6 +467,59 @@ export default {
|
||||
cancel: '取 消',
|
||||
confirm: '确 定'
|
||||
},
|
||||
deDataset: {
|
||||
search_by_name: '通过名称搜索',
|
||||
new_folder: '新建文件夹',
|
||||
search_fields: '搜索字段',
|
||||
show_rows: '显示行数',
|
||||
display: '显示',
|
||||
that_s_ok: '行',
|
||||
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: '已选：',
|
||||
zhang_biao: '张表',
|
||||
no_dataset_click: '暂无数据集，点击',
|
||||
newly_build: '新建',
|
||||
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: '选择视图',
|
||||
@ -1629,7 +1682,7 @@ export default {
|
||||
oracle_sid: 'SID',
|
||||
oracle_service_name: '服务名',
|
||||
get_schema: '获取 Schema',
|
||||
schema: '数据库 Schema',
|
||||
schema: 'Schema',
|
||||
charset: '字符集',
|
||||
targetCharset: '目标字符集',
|
||||
please_choose_schema: '请选择数据库 Schema',
|
||||
@ -1649,7 +1702,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: '请输入最大连接数',
|
||||
@ -1702,7 +1754,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,214 +1,556 @@
|
||||
<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 {
|
||||
listApiDatasource,
|
||||
post,
|
||||
isKettleRunning,
|
||||
} from "@/api/dataset/dataset";
|
||||
import { engineMode } from "@/api/system/engine";
|
||||
|
||||
export default {
|
||||
name: 'AddApi',
|
||||
name: "AddApi",
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTable: '',
|
||||
showLeft: true,
|
||||
tableLoading: false,
|
||||
loading: false,
|
||||
height: 400,
|
||||
fields: [],
|
||||
fieldsData: [],
|
||||
searchTable: "",
|
||||
options: [],
|
||||
dataSource: '',
|
||||
dataSource: "",
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
mode: '1',
|
||||
syncType: 'sync_now',
|
||||
mode: "1",
|
||||
syncType: "sync_now",
|
||||
tableData: [],
|
||||
kettleRunning: false,
|
||||
engineMode: 'local',
|
||||
selectedDatasource: {}
|
||||
}
|
||||
engineMode: "local",
|
||||
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.tables = response.data
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
})
|
||||
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) {
|
||||
this.selectedDatasource = this.options[i]
|
||||
this.selectedDatasource = this.options[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
searchTable(val) {
|
||||
if (val && val !== '') {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => { return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase()) })))
|
||||
if (val && val !== "") {
|
||||
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))
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables));
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initDataSource()
|
||||
this.initDataSource();
|
||||
window.onresize = () => {
|
||||
this.calHeight();
|
||||
};
|
||||
this.calHeight();
|
||||
},
|
||||
activated() {
|
||||
this.initDataSource()
|
||||
this.initDataSource();
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
engineMode().then(res => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
this.kettleState();
|
||||
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 => {
|
||||
this.options = response.data
|
||||
})
|
||||
listApiDatasource().then((response) => {
|
||||
this.options = response.data;
|
||||
});
|
||||
},
|
||||
kettleState() {
|
||||
isKettleRunning().then(res => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
isKettleRunning().then((res) => {
|
||||
this.kettleRunning = res.data;
|
||||
});
|
||||
},
|
||||
showTableNameWithComment(t) {
|
||||
if (t.remark) {
|
||||
return `${t.name}(${t.remark})`
|
||||
return `${t.name}(${t.remark})`;
|
||||
} else {
|
||||
return `${t.name}`
|
||||
return `${t.name}`;
|
||||
}
|
||||
},
|
||||
save() {
|
||||
let ds = {}
|
||||
this.options.forEach(ele => {
|
||||
if (ele.id === this.dataSource) {
|
||||
ds = ele
|
||||
}
|
||||
})
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
const mode = this.mode
|
||||
const syncType = this.syncType
|
||||
this.checkTableList.forEach(function(name) {
|
||||
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) {
|
||||
const datasetName = this.tableData.find(
|
||||
(ele) => ele.name === name
|
||||
).datasetName;
|
||||
tables.push({
|
||||
name: ds.name + '_' + name,
|
||||
name: datasetName,
|
||||
sceneId: sceneId,
|
||||
dataSourceId: dataSourceId,
|
||||
type: 'api',
|
||||
type: "api",
|
||||
syncType: syncType,
|
||||
mode: parseInt(mode),
|
||||
info: JSON.stringify({ table: name })
|
||||
})
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$emit('saveSuccess', tables[0])
|
||||
this.cancel()
|
||||
})
|
||||
info: JSON.stringify({ table: name }),
|
||||
});
|
||||
});
|
||||
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 = []
|
||||
this.dataSource = ''
|
||||
this.tables = []
|
||||
this.checkTableList = []
|
||||
this.searchTable = "";
|
||||
this.options = [];
|
||||
this.dataSource = "";
|
||||
this.tables = [];
|
||||
this.checkTableList = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
span{
|
||||
font-size: 14px;
|
||||
}
|
||||
</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,228 +1,575 @@
|
||||
<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',
|
||||
name: "AddDB",
|
||||
mixins: [msgCfm],
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchTable: '',
|
||||
showLeft: true,
|
||||
tableLoading: false,
|
||||
loading: false,
|
||||
height: 400,
|
||||
fields: [],
|
||||
fieldsData: [],
|
||||
searchTable: "",
|
||||
options: [],
|
||||
dataSource: '',
|
||||
dataSource: "",
|
||||
tables: [],
|
||||
checkTableList: [],
|
||||
mode: '0',
|
||||
syncType: 'sync_now',
|
||||
mode: "0",
|
||||
syncType: "sync_now",
|
||||
tableData: [],
|
||||
kettleRunning: false,
|
||||
selectedDatasource: {},
|
||||
engineMode: 'local',
|
||||
disabledSync: true
|
||||
}
|
||||
engineMode: "local",
|
||||
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.tables = response.data
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables))
|
||||
})
|
||||
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) {
|
||||
this.selectedDatasource = this.options[i]
|
||||
this.mode = '0'
|
||||
if (this.engineMode === 'simple' || (!this.kettleRunning || this.selectedDatasource.calculationMode === 'DIRECT')) {
|
||||
this.disabledSync = true
|
||||
this.selectedDatasource = this.options[i];
|
||||
this.mode = "0";
|
||||
if (
|
||||
this.engineMode === "simple" ||
|
||||
!this.kettleRunning ||
|
||||
this.selectedDatasource.calculationMode === "DIRECT"
|
||||
) {
|
||||
this.disabledSync = true;
|
||||
} else {
|
||||
this.disabledSync = false
|
||||
this.disabledSync = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
searchTable(val) {
|
||||
if (val && val !== '') {
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables.filter(ele => {
|
||||
return ele.name.toLocaleLowerCase().includes(val.toLocaleLowerCase())
|
||||
})))
|
||||
if (val && val !== "") {
|
||||
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))
|
||||
this.tableData = JSON.parse(JSON.stringify(this.tables));
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initDataSource()
|
||||
this.initDataSource();
|
||||
window.onresize = () => {
|
||||
this.calHeight();
|
||||
};
|
||||
this.calHeight();
|
||||
},
|
||||
activated() {
|
||||
this.initDataSource()
|
||||
this.initDataSource();
|
||||
},
|
||||
created() {
|
||||
this.kettleState()
|
||||
engineMode().then(res => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
this.kettleState();
|
||||
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 => {
|
||||
this.kettleRunning = res.data
|
||||
})
|
||||
isKettleRunning().then((res) => {
|
||||
this.kettleRunning = res.data;
|
||||
});
|
||||
},
|
||||
showTableNameWithComment(t) {
|
||||
if (t.remark) {
|
||||
return `${t.name}(${t.remark})`
|
||||
return `${t.name}(${t.remark})`;
|
||||
} else {
|
||||
return `${t.name}`
|
||||
return `${t.name}`;
|
||||
}
|
||||
},
|
||||
save() {
|
||||
let ds = {}
|
||||
this.options.forEach(ele => {
|
||||
if (ele.id === this.dataSource) {
|
||||
ds = ele
|
||||
}
|
||||
})
|
||||
const sceneId = this.param.id
|
||||
const dataSourceId = this.dataSource
|
||||
const tables = []
|
||||
const mode = this.mode
|
||||
const syncType = this.syncType
|
||||
this.checkTableList.forEach(function (name) {
|
||||
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((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',
|
||||
type: "db",
|
||||
syncType: syncType,
|
||||
mode: parseInt(mode),
|
||||
info: JSON.stringify({table: name})
|
||||
})
|
||||
})
|
||||
post('/dataset/table/batchAdd', tables).then(response => {
|
||||
this.$emit('saveSuccess', tables[0])
|
||||
this.cancel()
|
||||
})
|
||||
info: JSON.stringify({ table: name }),
|
||||
});
|
||||
});
|
||||
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 = []
|
||||
this.dataSource = ''
|
||||
this.tables = []
|
||||
this.checkTableList = []
|
||||
this.searchTable = "";
|
||||
this.options = [];
|
||||
this.dataSource = "";
|
||||
this.tables = [];
|
||||
this.checkTableList = [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dataset-db {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
<style scoped>
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.el-input {
|
||||
width: 420px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
margin-bottom: 14px;
|
||||
margin-left: 0;
|
||||
margin-right: 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;
|
||||
}
|
||||
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
.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,485 +1,650 @@
|
||||
<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,"
|
||||
: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 { post } from "@/api/dataset/dataset";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import i18n from "@/lang";
|
||||
import { $alert, $confirm } from "@/utils/message";
|
||||
import store from "@/store";
|
||||
|
||||
const token = getToken()
|
||||
const token = getToken();
|
||||
|
||||
export default {
|
||||
name: 'AddExcel',
|
||||
name: "AddExcel",
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
default: null
|
||||
default: null,
|
||||
},
|
||||
tableId: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
editType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sheetObj: { datasetName: ' ', fields: [] },
|
||||
showLeft: true,
|
||||
errImg: require("@/assets/None_Select_ds.png"),
|
||||
sheetObj: { datasetName: " ", fields: [] },
|
||||
sheets: [],
|
||||
data: [],
|
||||
mode: '1',
|
||||
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: '',
|
||||
path: "",
|
||||
uploading: false,
|
||||
fieldOptions: [
|
||||
{ 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.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",
|
||||
},
|
||||
],
|
||||
props: {
|
||||
label: 'excelLable',
|
||||
children: 'sheets'
|
||||
label: "excelLable",
|
||||
children: "sheets",
|
||||
},
|
||||
count: 1,
|
||||
excelData: [],
|
||||
defaultExpandedKeys: [],
|
||||
defaultCheckedKeys: []
|
||||
}
|
||||
defaultCheckedKeys: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
defaultCheckedKeys(val) {
|
||||
const excelNum = this.excelData.map((ele) => ele.id);
|
||||
this.$emit(
|
||||
"setTableNum",
|
||||
val.filter((ele) => !excelNum.includes(ele)).length
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.onresize = () => {
|
||||
this.calHeight()
|
||||
}
|
||||
this.calHeight()
|
||||
this.calHeight();
|
||||
};
|
||||
this.calHeight();
|
||||
},
|
||||
created() {
|
||||
if (!this.param.tableId) {
|
||||
this.param.tableId = ''
|
||||
this.param.tableId = "";
|
||||
}
|
||||
if (!this.param.editType) {
|
||||
this.param.editType = 0
|
||||
this.param.editType = 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
if (checked) {
|
||||
this.defaultCheckedKeys.push(data.id)
|
||||
this.handleNodeClick(data)
|
||||
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
|
||||
return true;
|
||||
}
|
||||
})
|
||||
this.defaultCheckedKeys.splice(index, 1)
|
||||
});
|
||||
this.defaultCheckedKeys.splice(index, 1);
|
||||
}
|
||||
this.$emit("setTableNum", this.defaultCheckedKeys.length);
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.sheet) {
|
||||
this.sheetObj = data
|
||||
this.fields = data.fields
|
||||
this.jsonArray = data.jsonArray
|
||||
const datas = this.jsonArray
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
this.sheetObj = data;
|
||||
this.fields = data.fields;
|
||||
this.jsonArray = data.jsonArray;
|
||||
const datas = this.jsonArray;
|
||||
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) {
|
||||
for (var j = 0; j < this.excelData[i].sheets.length; j++) {
|
||||
if (this.excelData[i].sheets[j].excelId == this.sheetObj.sheetId) {
|
||||
this.excelData[i].sheets[j] = this.sheetObj
|
||||
this.excelData[i].sheets[j] = this.sheetObj;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function() {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10
|
||||
}, 10)
|
||||
const that = this;
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight;
|
||||
that.height =
|
||||
currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10;
|
||||
}, 10);
|
||||
},
|
||||
beforeUpload(file) {
|
||||
this.uploading = true
|
||||
this.uploading = true;
|
||||
},
|
||||
uploadFail(response, file, fileList) {
|
||||
let myError = response.toString()
|
||||
myError = myError.replace('Error: ', '')
|
||||
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
|
||||
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.$t('dataset.parse_error')
|
||||
const errorMessage =
|
||||
JSON.parse(myError).message + ", " + this.$t("dataset.parse_error");
|
||||
|
||||
this.path = ''
|
||||
this.fields = []
|
||||
this.sheets = []
|
||||
this.data = []
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
this.fileList = []
|
||||
this.uploading = false
|
||||
this.path = "";
|
||||
this.fields = [];
|
||||
this.sheets = [];
|
||||
this.data = [];
|
||||
const datas = this.data;
|
||||
this.$refs.plxTable.reloadData(datas);
|
||||
this.fileList = [];
|
||||
this.uploading = false;
|
||||
this.$message({
|
||||
type: 'error',
|
||||
type: "error",
|
||||
message: errorMessage,
|
||||
showClose: true
|
||||
})
|
||||
showClose: true,
|
||||
});
|
||||
},
|
||||
uploadSuccess(response, file, fileList) {
|
||||
this.uploading = false
|
||||
this.excelData.push(response.data)
|
||||
this.defaultExpandedKeys.push(response.data.id)
|
||||
this.defaultCheckedKeys.push(response.data.sheets[0].id)
|
||||
this.uploading = false;
|
||||
this.excelData.push(response.data);
|
||||
this.defaultExpandedKeys.push(response.data.id);
|
||||
this.defaultCheckedKeys.push(response.data.sheets[0].id);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys)
|
||||
})
|
||||
this.fileList = fileList
|
||||
this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
|
||||
});
|
||||
this.fileList = fileList;
|
||||
},
|
||||
|
||||
save() {
|
||||
var validate = true
|
||||
var selectedSheet = []
|
||||
var sheetFileMd5 = []
|
||||
var effectExtField = false
|
||||
var changeFiled = false
|
||||
var selectNode = this.$refs.tree.getCheckedNodes()
|
||||
var validate = true;
|
||||
var selectedSheet = [];
|
||||
var sheetFileMd5 = [];
|
||||
var effectExtField = false;
|
||||
var changeFiled = false;
|
||||
var selectNode = this.$refs.tree.getCheckedNodes();
|
||||
for (var i = 0; i < selectNode.length; i++) {
|
||||
if (selectNode[i].sheet) {
|
||||
if (!selectNode[i].datasetName || selectNode[i].datasetName === '') {
|
||||
validate = false
|
||||
if (!selectNode[i].datasetName || selectNode[i].datasetName === "") {
|
||||
validate = false;
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.pls_input_name'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
message: this.$t("dataset.pls_input_name"),
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (selectNode[i].datasetName.length > 50 && !this.param.tableId) {
|
||||
validate = false
|
||||
validate = false;
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.char_can_not_more_50'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
message: this.$t("dataset.char_can_not_more_50"),
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if(selectNode[i].effectExtField){
|
||||
effectExtField = true
|
||||
if (selectNode[i].effectExtField) {
|
||||
effectExtField = true;
|
||||
}
|
||||
if(selectNode[i].changeFiled){
|
||||
changeFiled = true
|
||||
if (selectNode[i].changeFiled) {
|
||||
changeFiled = true;
|
||||
}
|
||||
selectedSheet.push(selectNode[i])
|
||||
sheetFileMd5.push(selectNode[i].fieldsMd5)
|
||||
selectedSheet.push(selectNode[i]);
|
||||
sheetFileMd5.push(selectNode[i].fieldsMd5);
|
||||
}
|
||||
}
|
||||
if (selectedSheet.length == 0) {
|
||||
this.$message.warning(this.$t('dataset.ple_select_excel'))
|
||||
return
|
||||
this.$message.warning(this.$t("dataset.ple_select_excel"));
|
||||
return;
|
||||
}
|
||||
if (!validate) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
let table = {}
|
||||
let table = {};
|
||||
if (!this.param.tableId) {
|
||||
table = {
|
||||
id: this.param.tableId,
|
||||
sceneId: this.param.id,
|
||||
dataSourceId: null,
|
||||
type: 'excel',
|
||||
type: "excel",
|
||||
sheets: selectedSheet,
|
||||
mode: parseInt(this.mode),
|
||||
editType: 0
|
||||
}
|
||||
editType: 0,
|
||||
};
|
||||
} else {
|
||||
table = {
|
||||
id: this.param.tableId,
|
||||
name: this.param.table.name,
|
||||
sceneId: this.param.id,
|
||||
dataSourceId: null,
|
||||
type: 'excel',
|
||||
type: "excel",
|
||||
sheets: selectedSheet,
|
||||
mode: parseInt(this.mode),
|
||||
editType: this.param.editType ? this.param.editType : 0
|
||||
}
|
||||
editType: this.param.editType ? this.param.editType : 0,
|
||||
};
|
||||
}
|
||||
|
||||
if (this.param.editType === 0 && this.param.tableId && (effectExtField || changeFiled)) {
|
||||
|
||||
var msg = effectExtField ? i18n.t('dataset.task.effect_ext_field') + ', ' + i18n.t('dataset.task.excel_replace_msg') : i18n.t('dataset.task.excel_replace_msg')
|
||||
if (
|
||||
this.param.editType === 0 &&
|
||||
this.param.tableId &&
|
||||
(effectExtField || changeFiled)
|
||||
) {
|
||||
var msg = effectExtField
|
||||
? i18n.t("dataset.task.effect_ext_field") +
|
||||
", " +
|
||||
i18n.t("dataset.task.excel_replace_msg")
|
||||
: i18n.t("dataset.task.excel_replace_msg");
|
||||
$confirm(msg, () => {
|
||||
this.saveExcelData(sheetFileMd5, table)
|
||||
})
|
||||
}else {
|
||||
this.saveExcelData(sheetFileMd5, table)
|
||||
this.saveExcelData(sheetFileMd5, table);
|
||||
});
|
||||
} 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 => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
post("/dataset/table/update", table).then((response) => {
|
||||
this.$emit("saveSuccess", table);
|
||||
this.cancel();
|
||||
});
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.dataReset()
|
||||
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: '' })
|
||||
this.$emit("switchComponent", { name: "" });
|
||||
}
|
||||
},
|
||||
|
||||
dataReset() {
|
||||
this.searchTable = ''
|
||||
this.options = []
|
||||
this.dataSource = ''
|
||||
this.tables = []
|
||||
this.checkTableList = []
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
this.searchTable = "";
|
||||
this.options = [];
|
||||
this.dataSource = "";
|
||||
this.tables = [];
|
||||
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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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,11 +9,12 @@
|
||||
{{ $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">
|
||||
{{ $t('chart.select_dataset') }}
|
||||
{{ $t("chart.select_dataset") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<!--数据集关联树型结构-->
|
||||
@ -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,296 +43,398 @@
|
||||
</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 UnionEdit from '@/views/dataset/add/union/UnionEdit'
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import UnionPreview from '@/views/dataset/add/union/UnionPreview'
|
||||
import UnionNode from "@/views/dataset/add/union/UnionNode";
|
||||
import NodeItem from "@/views/dataset/add/union/NodeItem";
|
||||
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 },
|
||||
name: "AddUnion",
|
||||
components: {
|
||||
UnionPreview,
|
||||
UnionEdit,
|
||||
datasetTree,
|
||||
NodeItem,
|
||||
UnionNode,
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// mock data，结构比较复杂，需要这个结构多看看...
|
||||
datasetMock: [{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [
|
||||
{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: 'left', // left join,right join,inner join
|
||||
unionFields: [
|
||||
{
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
]
|
||||
datasetMock: [
|
||||
{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [
|
||||
{
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: "left", // left join,right join,inner join
|
||||
unionFields: [
|
||||
{
|
||||
parentField: {},
|
||||
currentField: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
allChildCount: 0,
|
||||
},
|
||||
allChildCount: 0
|
||||
}
|
||||
],
|
||||
unionToParent: {},
|
||||
allChildCount: 0
|
||||
}],
|
||||
],
|
||||
unionToParent: {},
|
||||
allChildCount: 0,
|
||||
},
|
||||
],
|
||||
// union data
|
||||
dataset: [],
|
||||
unionHeight: 298,
|
||||
// union item
|
||||
unionItem: {
|
||||
currentDs: {},
|
||||
currentDsField: [],
|
||||
childrenDs: [],
|
||||
unionToParent: {
|
||||
unionType: 'left',
|
||||
unionFields: []
|
||||
unionType: "left",
|
||||
unionFields: [],
|
||||
},
|
||||
allChildCount: 0
|
||||
allChildCount: 0,
|
||||
},
|
||||
name: '关联数据集',
|
||||
customType: ['db', 'sql', 'excel', 'api'],
|
||||
customType: ["db", "sql", "excel", "api"],
|
||||
selectDsDialog: false,
|
||||
// 弹框临时选中的数据集
|
||||
tempDs: {},
|
||||
editUnion: false,
|
||||
unionParam: {},
|
||||
showPreview: false,
|
||||
previewTable: {}
|
||||
}
|
||||
previewTable: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'param.tableId': function() {
|
||||
this.resetComponent()
|
||||
this.initTableData()
|
||||
}
|
||||
"param.tableId": function () {
|
||||
this.resetComponent();
|
||||
this.initTableData();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initTableData()
|
||||
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'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
message: this.$t("dataset.pls_input_name"),
|
||||
type: "error",
|
||||
});
|
||||
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'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
message: this.$t("dataset.char_can_not_more_50"),
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
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',
|
||||
type: "union",
|
||||
mode: this.dataset[0].currentDs.mode,
|
||||
info: '{"union":' + JSON.stringify(this.dataset) + '}'
|
||||
}
|
||||
post('/dataset/table/update', table).then(response => {
|
||||
this.$emit('saveSuccess', table)
|
||||
this.cancel()
|
||||
})
|
||||
info: '{"union":' + JSON.stringify(this.dataset) + "}",
|
||||
};
|
||||
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: '' })
|
||||
this.$emit("switchComponent", { name: "" });
|
||||
}
|
||||
},
|
||||
selectDs() {
|
||||
this.selectDsDialog = true
|
||||
this.selectDsDialog = true;
|
||||
},
|
||||
firstDs(val) {
|
||||
this.tempDs = val
|
||||
this.tempDs = val;
|
||||
},
|
||||
closeSelectDs() {
|
||||
this.selectDsDialog = false
|
||||
this.tempDs = {}
|
||||
this.selectDsDialog = false;
|
||||
this.tempDs = {};
|
||||
},
|
||||
confirmSelectDs() {
|
||||
if (this.tempDs.mode === 0 && this.tempDs.modelInnerType === 'sql') {
|
||||
if (this.tempDs.mode === 0 && this.tempDs.modelInnerType === "sql") {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.$t('dataset.sql_ds_union_error'),
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
message: this.$t("dataset.sql_ds_union_error"),
|
||||
type: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
const ds = JSON.parse(JSON.stringify(this.unionItem))
|
||||
ds.currentDs = this.tempDs
|
||||
this.dataset.push(ds)
|
||||
this.closeSelectDs()
|
||||
this.calc('union')
|
||||
const ds = JSON.parse(JSON.stringify(this.unionItem));
|
||||
ds.currentDs = this.tempDs;
|
||||
this.dataset.push(ds);
|
||||
this.closeSelectDs();
|
||||
this.calc("union");
|
||||
},
|
||||
deleteNode(index) {
|
||||
this.dataset.splice(index, 1)
|
||||
this.calc('delete')
|
||||
this.dataset.splice(index, 1);
|
||||
this.calc("delete");
|
||||
},
|
||||
calc(param) {
|
||||
if (param.type === 'union') {
|
||||
if (param.type === "union") {
|
||||
if (param.grandParentAdd) {
|
||||
this.dataset[0] && this.dataset[0].allChildCount++
|
||||
this.dataset[0] && this.dataset[0].allChildCount++;
|
||||
}
|
||||
} else if (param.type === 'delete') {
|
||||
} else if (param.type === "delete") {
|
||||
if (param.grandParentSub) {
|
||||
if (param.subCount > 1) {
|
||||
this.dataset[0] && (this.dataset[0].allChildCount -= param.subCount)
|
||||
this.dataset[0] &&
|
||||
(this.dataset[0].allChildCount -= param.subCount);
|
||||
} else {
|
||||
this.dataset[0] && this.dataset[0].allChildCount--
|
||||
this.dataset[0] && this.dataset[0].allChildCount--;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
unionConfig(param) {
|
||||
this.unionParam = param
|
||||
this.editUnion = true
|
||||
this.unionParam = param;
|
||||
this.editUnion = true;
|
||||
},
|
||||
closeEditUnion() {
|
||||
this.editUnion = false
|
||||
this.editUnion = false;
|
||||
// 添加关联的时候，如果关闭关联关系设置的界面，则删除子节点，同时向父级传递消息
|
||||
if (this.unionParam.type === 'add') {
|
||||
this.dataset[0].childrenDs.pop()
|
||||
this.calc({ type: 'delete', grandParentAdd: true, grandParentSub: true, subCount: 0 })
|
||||
if (this.unionParam.type === "add") {
|
||||
this.dataset[0].childrenDs.pop();
|
||||
this.calc({
|
||||
type: "delete",
|
||||
grandParentAdd: true,
|
||||
grandParentSub: true,
|
||||
subCount: 0,
|
||||
});
|
||||
}
|
||||
},
|
||||
confirmEditUnion() {
|
||||
// 校验关联关系与字段，必填
|
||||
if (this.checkUnion()) {
|
||||
this.editUnion = false
|
||||
this.editUnion = false;
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('dataset.union_error'),
|
||||
type: 'error',
|
||||
showClose: true
|
||||
})
|
||||
message: this.$t("dataset.union_error"),
|
||||
type: "error",
|
||||
showClose: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
cancelUnion(val) {
|
||||
this.dataset = val
|
||||
this.dataset = val;
|
||||
},
|
||||
|
||||
checkUnion() {
|
||||
const union = this.unionParam.node.unionToParent
|
||||
const union = this.unionParam.node.unionToParent;
|
||||
if (!union.unionType) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
if (!union.unionFields || union.unionFields.length < 1) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
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) {
|
||||
return false
|
||||
const ele = union.unionFields[i];
|
||||
if (
|
||||
!ele.parentField ||
|
||||
!ele.parentField.id ||
|
||||
!ele.currentField ||
|
||||
!ele.currentField.id
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true
|
||||
return true;
|
||||
},
|
||||
|
||||
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',
|
||||
type: "union",
|
||||
mode: this.dataset[0].currentDs.mode,
|
||||
info: '{"union":' + JSON.stringify(this.dataset) + '}'
|
||||
}
|
||||
this.showPreview = true
|
||||
info: '{"union":' + JSON.stringify(this.dataset) + "}",
|
||||
};
|
||||
},
|
||||
|
||||
resetComponent() {
|
||||
this.dataset = []
|
||||
this.name = '关联数据集'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dataset = [];
|
||||
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>
|
||||
|
||||
@ -29,15 +29,49 @@
|
||||
</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-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">
|
||||
@ -49,11 +83,11 @@
|
||||
</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,
|
||||
|
||||
@ -1,91 +1,128 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
|
||||
import UnionItemEdit from '@/views/dataset/add/union/UnionItemEdit'
|
||||
import { post } from "@/api/dataset/dataset";
|
||||
import UnionFieldList from "@/views/dataset/add/union/UnionFieldList";
|
||||
import UnionItemEdit from "@/views/dataset/add/union/UnionItemEdit";
|
||||
|
||||
export default {
|
||||
name: 'UnionEdit',
|
||||
name: "UnionEdit",
|
||||
components: { UnionItemEdit, UnionFieldList },
|
||||
props: {
|
||||
unionParam: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parentField: [],
|
||||
nodeField: []
|
||||
}
|
||||
nodeField: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'unionParam': function() {
|
||||
|
||||
}
|
||||
unionParam: function () {},
|
||||
},
|
||||
mounted() {
|
||||
this.getParentFieldList()
|
||||
this.getNodeFieldList()
|
||||
this.getParentFieldList();
|
||||
this.getNodeFieldList();
|
||||
},
|
||||
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
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
changeParentFields(val) {
|
||||
this.unionParam.parent.currentDsField = val
|
||||
this.unionParam.parent.currentDsField = val;
|
||||
},
|
||||
changeNodeFields(val) {
|
||||
this.unionParam.node.currentDsField = val
|
||||
}
|
||||
}
|
||||
}
|
||||
this.unionParam.node.currentDsField = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</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,176 +1,232 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UnionFieldList',
|
||||
name: "UnionFieldList",
|
||||
props: {
|
||||
fieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
node: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
isIndeterminate: false,
|
||||
checkedFields: [],
|
||||
search: '',
|
||||
fieldSearchList: []
|
||||
}
|
||||
search: "",
|
||||
fieldSearchList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
fieldList: function() {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
this.init()
|
||||
fieldList: function () {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList));
|
||||
this.init();
|
||||
},
|
||||
search: function(val) {
|
||||
if (val && val !== '') {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
|
||||
search: function (val) {
|
||||
if (val && val !== "") {
|
||||
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))
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList));
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.checkedFields = this.node.currentDsField
|
||||
this.handleCheckedCitiesChange(this.checkedFields)
|
||||
this.checkedFields = this.node.currentDsField;
|
||||
this.handleCheckedCitiesChange(this.checkedFields);
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
|
||||
this.isIndeterminate = false
|
||||
this.returnCheckedFields()
|
||||
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.returnCheckedFields()
|
||||
const checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.fieldList.length;
|
||||
this.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < this.fieldList.length;
|
||||
this.returnCheckedFields();
|
||||
},
|
||||
|
||||
returnCheckedFields() {
|
||||
this.$emit('checkedFields', this.checkedFields)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit("checkedFields", this.checkedFields);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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-last">{{ $t('dataset.operator') }}</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,20 @@
|
||||
</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 +132,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,142 +168,170 @@
|
||||
</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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UnionItemEdit',
|
||||
name: "UnionItemEdit",
|
||||
props: {
|
||||
parentFieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
nodeFieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
unionParam: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
unionOptions: [
|
||||
{ label: this.$t('dataset.left_join'), value: 'left' },
|
||||
{ label: this.$t('dataset.right_join'), value: 'right' },
|
||||
{ label: this.$t('dataset.inner_join'), value: 'inner' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
{ label: this.$t("dataset.left_join"), value: "left" },
|
||||
{ label: this.$t("dataset.right_join"), value: "right" },
|
||||
{ label: this.$t("dataset.inner_join"), value: "inner" },
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (this.unionParam.node.unionToParent.unionFields.length < 1) {
|
||||
const item = {
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
this.unionParam.node.unionToParent.unionFields.push(item)
|
||||
currentField: {},
|
||||
};
|
||||
this.unionParam.node.unionToParent.unionFields.push(item);
|
||||
}
|
||||
},
|
||||
addUnion() {
|
||||
const item = {
|
||||
parentField: {},
|
||||
currentField: {}
|
||||
}
|
||||
this.unionParam.node.unionToParent.unionFields.push(item)
|
||||
currentField: {},
|
||||
};
|
||||
this.unionParam.node.unionToParent.unionFields.push(item);
|
||||
},
|
||||
removeUnionItem(index) {
|
||||
this.unionParam.node.unionToParent.unionFields.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.unionParam.node.unionToParent.unionFields.splice(index, 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
||||
@ -36,13 +36,21 @@
|
||||
</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>
|
||||
|
||||
@ -251,7 +259,11 @@ export default {
|
||||
cursor: pointer;
|
||||
color: var(--Main,#2681ff);
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.union-dataset-drawer {
|
||||
.el-drawer__body {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,94 +1,80 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import { post } from "@/api/dataset/dataset";
|
||||
|
||||
export default {
|
||||
name: 'UnionPreview',
|
||||
name: "UnionPreview",
|
||||
props: {
|
||||
table: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
dataset: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 'auto',
|
||||
height: "auto",
|
||||
fields: [],
|
||||
data: []
|
||||
}
|
||||
data: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'table': function() {
|
||||
this.initPreview()
|
||||
}
|
||||
table: function () {
|
||||
this.initPreview();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initHeight()
|
||||
this.initPreview()
|
||||
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 => {
|
||||
this.fields = response.data.fields
|
||||
this.data = response.data.data
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
})
|
||||
post("/dataset/table/unionPreview", this.table).then((response) => {
|
||||
this.fields = response.data.fields;
|
||||
this.data = response.data.data;
|
||||
const datas = this.data;
|
||||
this.$refs.plxTable.reloadData(datas);
|
||||
});
|
||||
} else {
|
||||
this.fields = []
|
||||
this.data = []
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
this.fields = [];
|
||||
this.data = [];
|
||||
const datas = this.data;
|
||||
this.$refs.plxTable.reloadData(datas);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,23 +1,53 @@
|
||||
<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>
|
||||
<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>
|
||||
{{ $t("dataset.preview_item") }}
|
||||
</span>
|
||||
<span v-if="page.total > currentPage.show">
|
||||
{{ $t("dataset.preview_show") }}
|
||||
<span class="span-number">{{ currentPage.show }}</span>
|
||||
{{ $t("dataset.preview_item") }}
|
||||
，{{ $t("dataset.preview_total") }}
|
||||
<span class="span-number">{{ page.total }}</span>
|
||||
{{ $t("dataset.preview_item") }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="['db', 'sql'].includes(table.type)">
|
||||
{{ $t("dataset.preview_show") }}
|
||||
<span class="span-number">{{ page.total }}</span>
|
||||
{{ $t("dataset.preview_item") }}
|
||||
</span>
|
||||
<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%;"
|
||||
style="width: 100%"
|
||||
:height="height"
|
||||
:checkbox-config="{highlight: true}"
|
||||
:checkbox-config="{ highlight: true }"
|
||||
:width-resize="true"
|
||||
>
|
||||
<ux-table-column
|
||||
@ -28,166 +58,164 @@
|
||||
: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>
|
||||
<el-row style="margin-top: 4px;">
|
||||
<span v-if="table.type === 'excel' || table.type === 'custom' || table.type === 'union'" class="table-count">
|
||||
<span v-if="page.total <= currentPage.show">
|
||||
{{ $t('dataset.preview_total') }}
|
||||
<span class="span-number">{{ page.total }}</span>
|
||||
{{ $t('dataset.preview_item') }}
|
||||
</span>
|
||||
<span v-if="page.total > currentPage.show">
|
||||
{{ $t('dataset.preview_show') }}
|
||||
<span class="span-number">{{ currentPage.show }}</span>
|
||||
{{ $t('dataset.preview_item') }}
|
||||
，{{ $t('dataset.preview_total') }}
|
||||
<span class="span-number">{{ page.total }}</span>
|
||||
{{ $t('dataset.preview_item') }}
|
||||
</span>
|
||||
</span>
|
||||
<span v-if="table.type === 'db' || table.type === 'sql'" class="table-count">
|
||||
{{ $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>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabDataPreview',
|
||||
name: "TabDataPreview",
|
||||
props: {
|
||||
table: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
param: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
page: {
|
||||
type: Object,
|
||||
required: false
|
||||
}
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 500,
|
||||
rowNum: parseInt(this.form.row),
|
||||
currentPage: {
|
||||
page: 1,
|
||||
pageSize: parseInt(this.form.row),
|
||||
show: parseInt(this.form.row)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: parseInt(this.form.row),
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
const datas = this.data
|
||||
this.$refs.plxTable.reloadData(datas)
|
||||
const datas = this.data;
|
||||
this.$refs.plxTable.reloadData(datas);
|
||||
},
|
||||
page() {
|
||||
if (this.page.total < parseInt(this.form.row)) {
|
||||
this.currentPage.show = this.page.total
|
||||
this.currentPage.show = this.page.total;
|
||||
} else {
|
||||
this.currentPage.show = parseInt(this.form.row)
|
||||
this.currentPage.show = parseInt(this.form.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
searchRow() {
|
||||
this.form.row = this.rowNum;
|
||||
this.reSearch()
|
||||
},
|
||||
init() {
|
||||
this.calHeight()
|
||||
this.calHeight();
|
||||
},
|
||||
cancel() {
|
||||
this.$refs.setCount.doClose()
|
||||
},
|
||||
calHeight() {
|
||||
const that = this
|
||||
setTimeout(function() {
|
||||
const currentHeight = document.documentElement.clientHeight
|
||||
that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
|
||||
}, 10)
|
||||
const that = this;
|
||||
setTimeout(function () {
|
||||
const currentHeight = document.documentElement.clientHeight;
|
||||
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',
|
||||
showClose: true
|
||||
})
|
||||
return
|
||||
message: this.$t("dataset.pls_input_less_5"),
|
||||
type: "error",
|
||||
showClose: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.currentPage.show = parseInt(this.form.row)
|
||||
this.currentPage.pageSize = parseInt(this.form.row)
|
||||
this.currentPage.page = 1
|
||||
this.$emit('reSearch', { form: this.form, page: this.currentPage })
|
||||
this.currentPage.show = parseInt(this.form.row);
|
||||
this.currentPage.pageSize = parseInt(this.form.row);
|
||||
this.currentPage.page = 1;
|
||||
this.$emit("reSearch", { form: this.form, page: this.currentPage });
|
||||
},
|
||||
pageChange(val) {
|
||||
this.currentPage.page = val
|
||||
this.$emit('reSearch', { form: this.form, page: this.currentPage })
|
||||
}
|
||||
this.currentPage.page = val;
|
||||
this.$emit("reSearch", { form: this.form, page: this.currentPage });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<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;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
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">
|
||||
{{ $t('dataset.edit_excel') }}
|
||||
</el-button>
|
||||
<deBtn type="primary">
|
||||
{{ $t("dataset.edit_excel") }}
|
||||
</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,265 +88,254 @@
|
||||
@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 FieldEdit from './FieldEdit'
|
||||
import { pluginLoaded } from '@/api/user'
|
||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import { post } from "@/api/dataset/dataset";
|
||||
import TabDataPreview from "./TabDataPreview";
|
||||
import UpdateInfo from "./UpdateInfo";
|
||||
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 },
|
||||
name: "ViewTable",
|
||||
components: {
|
||||
FieldEdit,
|
||||
DatasetDetail,
|
||||
UpdateInfo,
|
||||
TabDataPreview,
|
||||
PluginCom,
|
||||
},
|
||||
props: {
|
||||
param: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
table: {
|
||||
name: ''
|
||||
name: "",
|
||||
},
|
||||
fields: [],
|
||||
data: [],
|
||||
sycnStatus: '',
|
||||
sycnStatus: "",
|
||||
lastRequestComplete: true,
|
||||
page: {
|
||||
page: 1,
|
||||
pageSize: 1000,
|
||||
show: 1000
|
||||
show: 1000,
|
||||
},
|
||||
tabActive: 'dataPreview',
|
||||
tabActive: "dataPreview",
|
||||
tableViewRowForm: {
|
||||
row: 1000
|
||||
row: 1000,
|
||||
},
|
||||
tabStatus: false,
|
||||
isPluginLoaded: false
|
||||
}
|
||||
isPluginLoaded: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hideCustomDs: function() {
|
||||
return this.$store.getters.hideCustomDs
|
||||
}
|
||||
hideCustomDs: function () {
|
||||
return this.$store.getters.hideCustomDs;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'param': function() {
|
||||
this.tabActive = 'dataPreview'
|
||||
this.initTable(this.param.id)
|
||||
}
|
||||
param: function () {
|
||||
this.tabActive = "dataPreview";
|
||||
this.initTable(this.param.id);
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
pluginLoaded().then(res => {
|
||||
this.isPluginLoaded = res.success && res.data
|
||||
})
|
||||
pluginLoaded().then((res) => {
|
||||
this.isPluginLoaded = res.success && res.data;
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.taskLogTimer = setInterval(() => {
|
||||
if (this.sycnStatus !== 'Underway') {
|
||||
if (this.sycnStatus !== "Underway") {
|
||||
return;
|
||||
}
|
||||
if (!this.lastRequestComplete) {
|
||||
return
|
||||
return;
|
||||
} else {
|
||||
this.lastRequestComplete = false
|
||||
this.lastRequestComplete = false;
|
||||
}
|
||||
this.initPreviewData(this.page)
|
||||
}, 5000)
|
||||
this.initPreviewData(this.page);
|
||||
}, 5000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.taskLogTimer)
|
||||
clearInterval(this.taskLogTimer);
|
||||
},
|
||||
mounted() {
|
||||
this.initTable(this.param.id)
|
||||
this.initTable(this.param.id);
|
||||
},
|
||||
methods: {
|
||||
initTable(id) {
|
||||
this.resetPage()
|
||||
this.tableViewRowForm.row = 1000
|
||||
this.resetPage();
|
||||
this.tableViewRowForm.row = 1000;
|
||||
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: '' })
|
||||
})
|
||||
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: "" });
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
}
|
||||
})
|
||||
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,
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
edit() {
|
||||
this.$emit('switchComponent', { name: 'FieldEdit', param: { table: this.table }})
|
||||
editDataset(datasetType) {
|
||||
this.$router.push({
|
||||
path: "/dataset-form",
|
||||
query: {
|
||||
datasetType,
|
||||
id: this.table.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
editSql() {
|
||||
this.$emit('switchComponent', {
|
||||
name: 'AddSQL',
|
||||
param: { id: this.table.sceneId, tableId: this.table.id, table: this.table }
|
||||
})
|
||||
},
|
||||
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)
|
||||
this.tableViewRowForm = val.form;
|
||||
this.initPreviewData(val.page);
|
||||
},
|
||||
|
||||
showTab() {
|
||||
this.tabStatus = true
|
||||
this.tabStatus = true;
|
||||
},
|
||||
hideTab() {
|
||||
this.tabStatus = false
|
||||
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'
|
||||
this.table.msgTaskId = sourceParam.taskId
|
||||
this.tabActive = "updateInfo";
|
||||
this.table.msgTaskId = sourceParam.taskId;
|
||||
},
|
||||
|
||||
resetPage() {
|
||||
this.page = {
|
||||
page: 1,
|
||||
pageSize: 1000,
|
||||
show: 1000
|
||||
}
|
||||
show: 1000,
|
||||
};
|
||||
},
|
||||
|
||||
tabClick() {
|
||||
if (this.tabActive === 'dataPreview') {
|
||||
const reload = localStorage.getItem('reloadDsData')
|
||||
if (reload === 'true') {
|
||||
localStorage.setItem('reloadDsData', 'false')
|
||||
this.initTable(this.param.id)
|
||||
if (this.tabActive === "dataPreview") {
|
||||
const reload = localStorage.getItem("reloadDsData");
|
||||
if (reload === "true") {
|
||||
localStorage.setItem("reloadDsData", "false");
|
||||
this.initTable(this.param.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</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,428 @@
|
||||
<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',
|
||||
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 },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
.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,92 +1,151 @@
|
||||
<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>
|
||||
import { groupTree } from '@/api/dataset/dataset'
|
||||
import { groupTree } from "@/api/dataset/dataset";
|
||||
|
||||
export default {
|
||||
name: 'GroupMoveSelector',
|
||||
name: "GroupMoveSelector",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
moveDir: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tData: [],
|
||||
currGroup: '',
|
||||
filterText: "",
|
||||
currGroup: "",
|
||||
groupForm: {
|
||||
name: '',
|
||||
pid: '0',
|
||||
name: "",
|
||||
pid: "0",
|
||||
level: 0,
|
||||
type: 'group',
|
||||
type: "group",
|
||||
children: [],
|
||||
sort: 'type desc,name asc'
|
||||
sort: "type desc,name asc",
|
||||
},
|
||||
targetGroup: {}
|
||||
}
|
||||
targetGroup: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'item': function() {
|
||||
this.tree(this.groupForm)
|
||||
}
|
||||
item: function () {
|
||||
this.tree(this.groupForm);
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.tree(this.groupForm)
|
||||
this.tree(this.groupForm);
|
||||
},
|
||||
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)
|
||||
this.targetGroup = data;
|
||||
this.$emit("targetGroup", data);
|
||||
},
|
||||
treeClass(data, node) {
|
||||
if (data.id === this.item.id) {
|
||||
node.visible = false
|
||||
node.visible = false;
|
||||
}
|
||||
return 'custom-tree-node'
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
|
||||
@ -17,23 +17,17 @@ 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
|
||||
}
|
||||
@ -60,29 +54,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
|
||||
}
|
||||
},
|
||||
|
||||
374
frontend/src/views/system/datasource/DriverFormDetail.vue
Normal file
374
frontend/src/views/system/datasource/DriverFormDetail.vue
Normal file
@ -0,0 +1,374 @@
|
||||
<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>
|
||||
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