fix(数据集): 当编辑数据集时，修改了数据集内容后，那么自动弹出右侧的字段列表

core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue

@@ -7,9 +7,8 @@ import { ElMessage, ElMessageBox, ElIcon } from 'element-plus-secondary'
 import { Icon } from '@/components/icon-custom'
 import { getTableField } from '@/api/dataset'
 import CodeMirror from './CodeMirror.vue'
-import type { Field } from './UnionFieldList.vue'
+import type { Field, DataSource } from './util'
 import { getDatasourceList, getTables, getPreviewSql } from '@/api/dataset'
-import type { DataSource } from './index.vue'
 import GridTable from '@/components/grid-table/src/GridTable.vue'
 import { EmptyBackground } from '@/components/empty-background'
 import { timestampFormatDate, defaultValueScopeList, fieldOptions } from './util'
@@ -19,6 +18,7 @@ export interface SqlNode {
   tableName: string
   datasourceId: string
   id: string
+  changeFlag?: boolean
   variables?: Array<{
     variableName: string
     defaultValue: string
@@ -106,7 +106,7 @@ const referenceSetting = () => {
 
 onMounted(() => {
   dsChange(sqlNode.value.datasourceId)
-  codeCom.value = myCm.value.codeComInit(Base64.decode(sqlNode.value.sql))
+  codeCom.value = myCm.value.codeComInit(Base64.decode(sqlNode.value.sql), true)
 })
 
 onBeforeUnmount(() => {
@@ -211,8 +211,10 @@ getDatasource()
 const emits = defineEmits(['close', 'save'])
 
 let changeFlag = false
+const changeFlagCode = ref(false)
 const setFlag = () => {
   changeFlag = true
+  changeFlagCode.value = true
 }
 let sql = ''
 
@@ -224,6 +226,7 @@ const save = (cb?: () => void) => {
 
   parseVariable()
   sql = codeCom.value.state.doc.toString()
+  sqlNode.value.changeFlag = true
   if (!sql.trim()) {
     ElMessage.error('SQL不能为空')
     return
@@ -264,9 +267,11 @@ const handleClose = () => {
     }).then(() => {
       close()
       changeFlag = false
+      changeFlagCode.value = false
     })
   } else {
     close()
+    changeFlagCode.value = false
   }
 }
 
@@ -387,6 +392,7 @@ const parseVariable = () => {
 const saveVariable = () => {
   state.variables = JSON.parse(JSON.stringify(state.variablesTmp))
   showVariableMgm.value = false
+  changeFlagCode.value = true
   ElMessage.success('参数设置成功')
 }
 const mousedownDrag = () => {
@@ -414,7 +420,9 @@ const mousedownDrag = () => {
         </template>
         参数设置
       </el-button>
-      <el-button @click="save(() => {})" type="primary"> 保存</el-button>
+      <el-button :disabled="!changeFlagCode" @click="save(() => {})" type="primary">
+        保存</el-button
+      >
       <el-divider direction="vertical" />
       <el-icon class="hover-icon" @click="handleClose">
         <Icon name="icon_close_outlined"></Icon>
@@ -579,7 +587,12 @@ const mousedownDrag = () => {
       </div>
     </div>
     <div class="sql-code-right" :style="{ width: `calc(100% - ${showLeft ? LeftWidth : 0}px)` }">
-      <code-mirror :height="`${dragHeight}px`" dom-id="sql-editor" ref="myCm"></code-mirror>
+      <code-mirror
+        @change="changeFlagCode = true"
+        :height="`${dragHeight}px`"
+        dom-id="sql-editor"
+        ref="myCm"
+      ></code-mirror>
       <div class="sql-result" :style="{ height: `calc(100% - ${dragHeight}px)` }">
         <div class="sql-title">
           <span class="drag" @mousedown="mousedownDragH" />

core/core-frontend/src/views/visualized/data/dataset/form/CodeMirror.vue

@@ -19,6 +19,8 @@ const props = defineProps({
   dimensionMap: propTypes.arrayOf(String).def(() => [])
 })
 
+const emits = defineEmits(['change'])
+
 const codeComInit = (doc: string, sqlMode?: boolean) => {
   function _optionalChain(ops) {
     let lastAccessLHS = undefined
@@ -112,7 +114,17 @@ const codeComInit = (doc: string, sqlMode?: boolean) => {
     }
   }
   const extensionsAttach = sqlMode
-    ? [basicSetup, sql(), placeholders, keymap.of([indentWithTab])]
+    ? [
+        basicSetup,
+        sql(),
+        placeholders,
+        keymap.of([indentWithTab]),
+        EditorView.updateListener.of(v => {
+          if (v.docChanged) {
+            emits('change')
+          }
+        })
+      ]
     : [basicSetup, placeholders, keymap.of([indentWithTab])]
   return new EditorView({
     doc,

core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue

@@ -133,8 +133,14 @@ const delNode = (id, arr) => {
   })
 }
 
+const changeSqlId = ref([])
+const changedNodeId = ref([])
 const saveSqlNode = (val: SqlNode, cb) => {
-  const { tableName, id, sql, datasourceId, sqlVariableDetails = null } = val
+  const { tableName, id, sql, datasourceId, sqlVariableDetails = null, changeFlag = false } = val
+  if (changeFlag) {
+    changedNodeId.value = changedNodeId.value.filter(itx => itx.from !== id && id !== itx.to)
+    !changeSqlId.value.includes(id) && changeSqlId.value.push(id)
+  }
   if (state.visualNode) {
     Object.assign(state.visualNode, {
       info: JSON.stringify({ table: tableName, sql }),
@@ -173,6 +179,11 @@ const saveSqlNode = (val: SqlNode, cb) => {
   dfsNodeBack([obj], [id], state.nodeList)
 }
 
+const setChangeStatus = (to, from) => {
+  if (changedNodeId.value.some(ele => ele.from === from && ele.to === to)) return
+  changedNodeId.value.push({ from, to })
+}
+
 const closeSqlNode = () => {
   if (state.visualNode?.confirm) {
     nextTick(() => {
@@ -495,10 +506,26 @@ const dfsNodeShadow = (arr, { tableName, id }, position, parent) => {
 }
 
 const flatLine = (item, flatNodeList) => {
+  let sqlChangeFlag = changeSqlId.value.includes(item.id)
+  if (item.children?.length) {
+    sqlChangeFlag = item.children.some(itx => changeSqlId.value.includes(itx.id)) || sqlChangeFlag
+  }
   const from = { ...item, d: '' }
   ;(item.children || []).forEach(ele => {
+    let loaclSqlChangeFlag = true
+    changedNodeId.value.some(element => {
+      if (
+        (element.from === item.id && ele.id === element.to) ||
+        (element.from === ele.id && item.id === element.to)
+      ) {
+        loaclSqlChangeFlag = false
+        return true
+      }
+      return false
+    })
     flatNodeList.push({
       from,
+      sqlChangeFlag: loaclSqlChangeFlag && sqlChangeFlag,
       isShadow: ele.isShadow || item.isShadow,
       to: {
         ...ele
@@ -773,7 +800,8 @@ defineExpose({
   setStateBack,
   notConfirm,
   dfsNodeFieldBack,
-  initState
+  initState,
+  setChangeStatus
 })
 
 const handleActiveNode = ele => {
@@ -853,7 +881,12 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
         width="32"
         height="32"
       >
-        <div v-if="!ele.isShadow" @click="handlePathClick(ele)" class="path-union">
+        <div
+          v-if="!ele.isShadow"
+          @click="handlePathClick(ele)"
+          class="path-union"
+          :style="{ borderColor: ele.sqlChangeFlag ? '#F54A45' : '' }"
+        >
           <el-icon>
             <Icon :name="iconName[ele.to.unionType]"></Icon>
           </el-icon>

core/core-frontend/src/views/visualized/data/dataset/form/index.vue

@@ -24,7 +24,7 @@ import { useRoute, useRouter } from 'vue-router'
 import UnionEdit from './UnionEdit.vue'
 import type { FormInstance } from 'element-plus-secondary'
 import CreatDsGroup from './CreatDsGroup.vue'
-import { guid, getFieldName, timeTypes } from './util'
+import { guid, getFieldName, timeTypes, type DataSource } from './util'
 import { fieldType } from '@/utils/attr'
 import { cancelMap } from '@/config/axios/service'
 import {
@@ -41,18 +41,6 @@ import { cloneDeep, debounce } from 'lodash-es'
 interface DragEvent extends MouseEvent {
   dataTransfer: DataTransfer
 }
-export interface Position {
-  x: number
-  y: number
-}
-
-export type PointerType = 'mouse' | 'touch' | 'pen'
-
-export interface DataSource {
-  id: string
-  name: string
-  children?: DataSource[]
-}
 
 interface Field {
   fieldShortName: string
@@ -755,7 +743,8 @@ const setFieldAll = () => {
 }
 const confirmEditUnion = () => {
   const { node, parent } = fieldUnion.value
-
+  const to = node.id
+  const from = parent.id
   let unionFieldsLost = node.unionFields.some(ele => {
     const { currentField, parentField } = ele
     return !currentField || !parentField
@@ -774,6 +763,7 @@ const confirmEditUnion = () => {
   setFieldAll()
   editUnion.value = false
   addComplete()
+  datasetDrag.value.setChangeStatus(to, from)
 }
 
 const updateAllfields = () => {

core/core-frontend/src/views/visualized/data/dataset/form/util.ts

@@ -149,10 +149,17 @@ interface Field {
   id: string
 }
 
+interface DataSource {
+  id: string
+  name: string
+  children?: DataSource[]
+}
+
 export {
   NodeType,
   UnionType,
   UnionField,
+  DataSource,
   Node,
   Field,
   timestampFormatDate,