From 47b1279cb06942f79d1a19fc307b6b983ff87b04 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 18 Dec 2024 17:56:49 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E9=9B=86):=20=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=BE=E7=BD=AE=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/svg/icon_preferences_outlined.svg  |   3 +
 .../visualized/data/dataset/form/AddSql.vue   | 226 +++++++++++++++++-
 2 files changed, 226 insertions(+), 3 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/icon_preferences_outlined.svg

diff --git a/core/core-frontend/src/assets/svg/icon_preferences_outlined.svg b/core/core-frontend/src/assets/svg/icon_preferences_outlined.svg
new file mode 100644
index 0000000000..4ea7279e4b
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_preferences_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33325 3.66665C1.33325 2.37798 2.37792 1.33331 3.66659 1.33331C4.72358 1.33331 5.61644 2.03615 5.90329 2.99998H14.3333C14.5173 2.99998 14.6666 3.14922 14.6666 3.33331V3.99998C14.6666 4.18407 14.5173 4.33331 14.3333 4.33331H5.90329C5.61644 5.29714 4.72358 5.99998 3.66659 5.99998C2.37792 5.99998 1.33325 4.9553 1.33325 3.66665ZM1.66659 8.66665C1.48249 8.66665 1.33325 8.51741 1.33325 8.33331V7.66665C1.33325 7.48255 1.48249 7.33331 1.66659 7.33331H5.76321C6.05007 6.36949 6.94292 5.66665 7.99992 5.66665C9.05692 5.66665 9.94977 6.36949 10.2366 7.33331H14.3333C14.5173 7.33331 14.6666 7.48255 14.6666 7.66665V8.33331C14.6666 8.51741 14.5173 8.66665 14.3333 8.66665H10.2366C9.94977 9.63047 9.05692 10.3333 7.99992 10.3333C6.94292 10.3333 6.05007 9.63047 5.76321 8.66665H1.66659ZM7.99992 8.99998C8.5522 8.99998 8.99992 8.55226 8.99992 7.99998C8.99992 7.4477 8.5522 6.99998 7.99992 6.99998C7.44764 6.99998 6.99992 7.4477 6.99992 7.99998C6.99992 8.55226 7.44764 8.99998 7.99992 8.99998ZM1.66659 13C1.48249 13 1.33325 12.8507 1.33325 12.6666V12C1.33325 11.8159 1.48249 11.6666 1.66659 11.6666H10.0965C10.3834 10.7028 11.2763 9.99998 12.3333 9.99998C13.6219 9.99998 14.6666 11.0447 14.6666 12.3333C14.6666 13.622 13.6219 14.6666 12.3333 14.6666C11.2763 14.6666 10.3834 13.9638 10.0965 13H1.66659ZM12.3333 11.3333C11.781 11.3333 11.3333 11.781 11.3333 12.3333C11.3333 12.8856 11.781 13.3333 12.3333 13.3333C12.8855 13.3333 13.3333 12.8856 13.3333 12.3333C13.3333 11.781 12.8855 11.3333 12.3333 11.3333ZM3.66659 4.66665C4.21886 4.66665 4.66659 4.21892 4.66659 3.66665C4.66659 3.11436 4.21886 2.66665 3.66659 2.66665C3.1143 2.66665 2.66659 3.11436 2.66659 3.66665C2.66659 4.21892 3.1143 4.66665 3.66659 4.66665Z" />
+</svg>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 01f2582350..51c9ace085 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -1,6 +1,7 @@
 <script lang="tsx" setup>
 import referencePlay from '@/assets/svg/reference-play.svg'
 import referenceSetting1 from '@/assets/svg/reference-setting.svg'
+import icon_preferences_outlined from '@/assets/svg/icon_preferences_outlined.svg'
 import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
@@ -12,6 +13,7 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import icon_textBox_outlined from '@/assets/svg/icon_text-box_outlined.svg'
 import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
 import icon_playRound_outlined from '@/assets/svg/icon_play-round_outlined.svg'
+import { searchVariableApi } from '@/api/variable'
 import {
   ref,
   reactive,
@@ -21,6 +23,7 @@ import {
   watch,
   onBeforeUnmount,
   shallowRef,
+  computed,
   h
 } from 'vue'
 import { debounce } from 'lodash-es'
@@ -133,9 +136,67 @@ const referenceSetting = () => {
   showVariableMgm.value = true
   parseVariable()
 }
+const fieldFormList = ref([])
 
-onMounted(() => {
+const builtInList = ref([
+  {
+    id: 8,
+    name: t('system.account')
+  },
+  {
+    id: 17,
+    name: t('datasource.user_name')
+  },
+  {
+    id: 9,
+    name: t('commons.email')
+  }
+])
+
+const fieldFormListComputed = computed(() => {
+  return fieldFormList.value.filter(ele =>
+    ele.name.toLowerCase().includes(searchField.value.toLowerCase())
+  )
+})
+const showSysParams = ref(false)
+const searchField = ref('')
+const sysParams = () => {
+  showSysParams.value = true
+}
+
+const insertFieldToCodeMirror = (value: string) => {
+  codeCom.value.dispatch({
+    changes: { from: codeCom.value.viewState.state.selection.ranges[0].from, insert: value },
+    selection: { anchor: codeCom.value.viewState.state.selection.ranges[0].from }
+  })
+}
+
+const setNameIdTrans = (from, to, originName, name2Auto?: string[]) => {
+  let name2Id = originName
+  const nameIdMap = [...builtInList.value, ...fieldFormList.value].reduce((pre, next) => {
+    pre[next[from]] = next[to]
+    return pre
+  }, {})
+  const on = originName.match(/\[(.+?)\]/g)
+  if (on) {
+    on.forEach(itm => {
+      const ele = itm.slice(1, -1)
+      if (name2Auto) {
+        name2Auto.push(nameIdMap[ele])
+      }
+      name2Id = name2Id.replace(`[${ele}]`, `[${nameIdMap[ele]}]`)
+    })
+  }
+  return name2Id
+}
+const handleSearchVariableApi = async () => {
+  return searchVariableApi({}).then(res => {
+    fieldFormList.value = res?.data || []
+  })
+}
+onMounted(async () => {
   dsChange(sqlNode.value.datasourceId)
+  await handleSearchVariableApi()
   codeCom.value = myCm.value.codeComInit(Base64.decode(sqlNode.value.sql), true)
 })
 
@@ -256,6 +317,7 @@ const save = (cb?: () => void) => {
 
   parseVariable()
   sql = codeCom.value.state.doc.toString()
+  sql = setNameIdTrans('name', 'id', sql)
   sqlNode.value.changeFlag = true
   if (!sql.trim()) {
     ElMessage.error(t('data_set.cannot_be_empty_de'))
@@ -455,6 +517,14 @@ const mousedownDrag = () => {
         </template>
         {{ t('data_set.parameter_settings') }}
       </el-button>
+      <el-button @click="sysParams" class="system-text_bg" text>
+        <template #icon>
+          <el-icon>
+            <Icon><icon_preferences_outlined class="svg-icon" /></Icon>
+          </el-icon>
+        </template>
+        {{ t('auth.sysParams') }}
+      </el-button>
       <el-button :disabled="!changeFlagCode" @click="save(() => {})" type="primary">
         {{ t('data_set.save') }}</el-button
       >
@@ -660,12 +730,22 @@ const mousedownDrag = () => {
         </FixedSizeList>
       </div>
     </div>
-    <div class="sql-code-right" :style="{ width: `calc(100% - ${showLeft ? LeftWidth : 0}px)` }">
+    <div
+      class="sql-code-right"
+      :class="showSysParams && 'p280'"
+      :style="{ width: `calc(100% - ${showLeft ? LeftWidth : 0}px)` }"
+    >
       <code-mirror
         @change="changeFlagCode = true"
         :height="`${dragHeight}px`"
         dom-id="sql-editor"
         ref="myCm"
+        :quotaMap="fieldFormList.filter(ele => [2, 3].includes(ele.deType)).map(ele => ele.name)"
+        :dimensionMap="
+          builtInList
+            .concat(fieldFormList.filter(ele => ![2, 3].includes(ele.deType)))
+            .map(ele => ele.name)
+        "
       ></code-mirror>
       <div class="sql-result" :style="{ height: `calc(100% - ${dragHeight}px)` }">
         <div class="sql-title">
@@ -760,6 +840,62 @@ const mousedownDrag = () => {
           </grid-table>
         </div>
       </div>
+      <div v-if="showSysParams" class="handle-system">
+        <div class="handle-system_title">
+          {{ t('auth.sysParams') }}
+          <el-icon class="hover-icon" @click="showSysParams = false">
+            <Icon name="icon_close_outlined"><icon_close_outlined class="svg-icon" /></Icon>
+          </el-icon>
+        </div>
+        <div class="handle-system_list">
+          <el-input
+            style="width: 100%; margin-bottom: 16px"
+            v-model="searchField"
+            :placeholder="t('dataset.edit_search')"
+            clearable
+          >
+            <template #prefix>
+              <el-icon>
+                <Icon><icon_searchOutline_outlined class="svg-icon" /></Icon>
+              </el-icon>
+            </template>
+          </el-input>
+          <div class="system-list">
+            <div class="built-in">
+              {{ t('system.system_built_in_variable') }}
+            </div>
+            <div
+              class="variable-item"
+              @click="insertFieldToCodeMirror(`[${fieldForm.name}]`)"
+              v-for="fieldForm in builtInList"
+              :key="fieldForm.id"
+            >
+              {{ fieldForm.name }}
+            </div>
+            <div class="built-in" style="margin-top: 16px">
+              {{ t('system.custom_variable') }}
+            </div>
+            <div
+              class="variable-item flex-align-center"
+              v-for="fieldForm in fieldFormListComputed"
+              :key="fieldForm.id"
+              @click="insertFieldToCodeMirror(`[${fieldForm.name}]`)"
+              :class="[2, 3].includes(fieldForm.deType) && 'with-type'"
+            >
+              <el-icon>
+                <Icon
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[fieldForm.deType]}`"
+                    :is="iconFieldMap[fieldType[fieldForm.deType]]"
+                  ></component
+                ></Icon>
+              </el-icon>
+              <span :title="fieldForm.name">{{ fieldForm.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <el-drawer
@@ -1078,6 +1214,7 @@ const mousedownDrag = () => {
   .sql-code-right {
     float: right;
     height: calc(100vh - 156px);
+    position: relative;
     .sql-result {
       font-family: var(--de-custom_font, 'PingFang');
       font-size: 14px;
@@ -1185,6 +1322,82 @@ const mousedownDrag = () => {
       }
     }
 
+    &.p280 {
+      padding-right: 280px;
+    }
+
+    .handle-system {
+      height: 100%;
+      width: 280px;
+      border-left: 1px solid #1f232926;
+      position: absolute;
+      right: 0;
+      top: 0;
+      overflow-y: auto;
+      .handle-system_title {
+        padding: 16px;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 54px;
+      }
+
+      .handle-system_list {
+        padding: 16px;
+        border-top: 1px solid #1f232926;
+
+        .system-list {
+          height: calc(100vh - 300px);
+          overflow-y: auto;
+
+          .built-in {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+          }
+
+          .variable-item {
+            cursor: pointer;
+            padding: 1px 8px;
+            border: solid 1px #dee0e3;
+            margin-bottom: 8px;
+            background-color: white;
+            color: #1f2329;
+
+            .ed-icon {
+              font-size: 16px;
+              margin-right: 4px;
+            }
+            height: 28px;
+            margin-top: 4px;
+            word-break: break-all;
+            border-radius: 4px;
+
+            .icon-right {
+              display: none;
+              margin-left: auto;
+              align-items: center;
+              .ed-icon {
+                margin: 0 0 0 6px;
+              }
+            }
+            &:hover {
+              border-color: var(--ed-color-primary, #3370ff);
+              background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+            }
+          }
+
+          .with-type:hover {
+            background: rgba(4, 180, 156, 0.1);
+            border-color: #04b49c;
+          }
+        }
+      }
+    }
+
     .table-container {
       height: calc(100% - 46px);
       padding: 16px 24px;
@@ -1228,9 +1441,16 @@ const mousedownDrag = () => {
       margin: 0 10px 0 16px;
     }
 
-    .is-text:hover {
+    .is-text:not(.system-text_bg):hover {
       background: rgba(31, 35, 41, 0.1);
     }
+
+    .system-text_bg {
+      color: #1f2329;
+      &:hover {
+        color: #3370ff;
+      }
+    }
   }
 }
 .icon-color {