From 91997c0c8ecbae8a1383bd3cdfd97cabbc931135 Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Tue, 29 Aug 2023 15:38:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=B9=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=88=97=E9=80=89=E6=8B=A9=E5=99=A8=E4=B8=AD?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E9=A1=BA=E5=BA=8F=E5=8F=91=E7=94=9F=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=8C=E5=85=B6=E8=A1=A8=E6=A0=BC=E5=88=97=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E4=B8=8E=E6=95=B0=E6=8D=AE=E9=A1=BA=E5=BA=8F=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data-room-ui/package-lock.json                | 82 +++++++++----------
 .../BasicComponents/Marquee/index.vue         |  6 +-
 .../packages/BasicComponents/Tables/index.vue | 53 ++++++++++--
 .../RightSetting/DataSetting.vue              | 10 +++
 .../RightSetting/ElDragSelect.vue             | 19 +++++
 data-room-ui/vue.config.example.js            |  2 +-
 6 files changed, 118 insertions(+), 54 deletions(-)

diff --git a/data-room-ui/package-lock.json b/data-room-ui/package-lock.json
index d80ef2b2..a92d268f 100644
--- a/data-room-ui/package-lock.json
+++ b/data-room-ui/package-lock.json
@@ -3397,6 +3397,27 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
+          "integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
         "acorn-walk": {
           "version": "8.2.0",
           "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3468,6 +3489,26 @@
             "tapable": "^2.0.0"
           }
         },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3685,47 +3726,6 @@
         "lodash": "^4.17.4"
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/vue2-jest": {
       "version": "27.0.0",
       "resolved": "https://registry.npmjs.org/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz",
diff --git a/data-room-ui/packages/BasicComponents/Marquee/index.vue b/data-room-ui/packages/BasicComponents/Marquee/index.vue
index 2e9ae3d1..21dde5d4 100644
--- a/data-room-ui/packages/BasicComponents/Marquee/index.vue
+++ b/data-room-ui/packages/BasicComponents/Marquee/index.vue
@@ -87,8 +87,8 @@ import Speech from 'speak-tts'
 import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
-import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
-import _ from "lodash";
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import cloneDeep from 'lodash/cloneDeep'
 export default {
   props: {
     // 卡片的属性
@@ -238,7 +238,7 @@ export default {
       config = { ...this.config, ...config }
       this.voiceBroadcast(config)
       // 样式改变时更新主题配置
-      config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
       this.changeChartConfig(config)
       if (config.code === this.activeCode) {
         this.changeActiveItemConfig(config)
diff --git a/data-room-ui/packages/BasicComponents/Tables/index.vue b/data-room-ui/packages/BasicComponents/Tables/index.vue
index b79d30c9..218521c4 100644
--- a/data-room-ui/packages/BasicComponents/Tables/index.vue
+++ b/data-room-ui/packages/BasicComponents/Tables/index.vue
@@ -3,6 +3,9 @@
     style="width: 100%;height: 100%"
     class="bs-design-wrap "
   >
+    <!-- <span style="color: aliceblue;font-size: 40px;">
+      {{ Object.keys(columnData) }}
+    </span> -->
     <!-- :border="this.config.customize.border" -->
     <el-table
       :id="config.code"
@@ -18,17 +21,18 @@
       @row-click="rowClick"
     >
       <el-table-column
-        v-for="(col, index) in config.option.columnData"
+        v-for="(col,index) in columnData"
         :key="index"
         show-overflow-tooltip
-        :label="col.remark"
         :prop="col.alias"
+        :label="col.remark"
         align="center"
       />
     </el-table>
   </div>
 </template>
 <script>
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
@@ -49,13 +53,16 @@ export default {
   },
   data () {
     return {
-      updateKey: '',
+      updateKey: 0,
       headerCellStyleObj: {
         backgroundColor: 'transparent'
       },
       cellStyleObj: {
         backgroundColor: 'transparent'
-      }
+      },
+      columnData: {},
+      // 第一次获取
+      isInit: true
     }
   },
   computed: {
@@ -89,12 +96,30 @@ export default {
       return style
     }
   },
+  watch: {
+    activeItemConfig (val) {
+      console.dir(val)
+    }
+  },
   created () { },
   mounted () {
     this.chartInit()
+    // this.config.option?.columnData 对象的key 根据 list 对应的key 来排序
+    EventBus.$on('dragSelectChange', (val) => {
+      const sortedColumnData = {}
+      const columnData = cloneDeep(this.config.option?.columnData)
+      val.forEach((item, index) => {
+        sortedColumnData[item] = columnData[item]
+      })
+      this.columnData = sortedColumnData
+      this.updateKey = new Date().getTime()
+    })
+  },
+  beforeDestroy () {
+    EventBus.$off('dragSelectChange')
   },
   methods: {
-    // 设置表格背景颜色
+
     cellStyle ({ row, column, rowIndex, columnIndex }) {
       const bodyBackgroundColor = {
         dark: '#141414',
@@ -117,7 +142,7 @@ export default {
       }
       return style
     },
-    // 设置表格行颜色
+
     rowStyle ({ row, rowIndex }) {
       if (rowIndex % 2) {
         return {
@@ -197,18 +222,28 @@ export default {
       config.option.tableData = data?.data
       const filteredData = {}
       const columnData = data?.columnData || {}
+      const dimensionFieldList = config.dataSource.dimensionFieldList || []
       if (config.dataSource.dimensionFieldList && config.dataSource.dimensionFieldList.length > 0) {
-        Object?.keys(columnData).forEach(key => {
+        // 根据config.dataSource.dimensionFieldList 数据的顺序将表格列顺序调整，使其初始化的时候，顺序和组件配置面板中的一致
+        const sortedColumnData = {}
+        dimensionFieldList.forEach((item, index) => {
+          sortedColumnData[item] = columnData[item]
+        })
+        Object?.keys(sortedColumnData).forEach(key => {
           if (
-            config.dataSource.dimensionFieldList.includes(columnData[key].alias)
+            config.dataSource.dimensionFieldList.includes(sortedColumnData[key]?.alias)
           ) {
-            filteredData[key] = columnData[key]
+            filteredData[key] = sortedColumnData[key]
           }
         })
         config.option.columnData = filteredData
       } else {
         config.option.columnData = columnData
       }
+      if (this.isInit) {
+        this.columnData = cloneDeep(config.option.columnData)
+        this.isInit = false
+      }
       this.updateKey = new Date().getTime()
       return config
     },
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
index ec06523a..1883dc2a 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
@@ -88,6 +88,7 @@
                 clearable
                 :multiple="config.option.displayOption.dimensionField.multiple"
                 @change="dimensionFieldListChange"
+                @valuePositionChange="valuePositionChange"
               >
                 <el-option
                   v-for="(field, index) in dataSourceDataList"
@@ -805,6 +806,15 @@ export default {
       this.config.customize.columnConfig = cloneDeep(this.headerList)
       this.$store.commit('bigScreen/changeActiveItemConfig', this.config)
     },
+    valuePositionChange (value) {
+      const sortedColumnData = {}
+      const columnData = cloneDeep(this.config.option?.columnData)
+      value.forEach((item, index) => {
+        sortedColumnData[item] = columnData[item]
+      })
+      this.config.option.columnData = sortedColumnData
+      this.$store.commit('bigScreen/changeActiveItemConfig', this.config)
+    },
     changeCustomProps (value, setting) {
       this.config.setting = this.config.setting.map(item => {
         if (item.field === setting.field) {
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/ElDragSelect.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/ElDragSelect.vue
index 67694802..5f09a3bf 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/ElDragSelect.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/ElDragSelect.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import { EventBus } from 'data-room-ui/js/utils/eventBus'
 import Sortable from 'sortablejs'
 
 export default {
@@ -45,6 +46,24 @@ export default {
       }
     }
   },
+  watch: {
+    // 监听数组变化，根据上次的数据的值，判断这次拖拽后数据是否变化，如果数据位置发生变化则出发emit事件
+    selectVal: {
+      handler (newVal, oldVal) {
+        if (Array.isArray(newVal) && Array.isArray(oldVal)) {
+          if ((newVal.length === oldVal.length) && (JSON.stringify(oldVal) !== JSON.stringify(newVal))) {
+            // 告诉右侧的数据配置面板，选择器内的选项顺序发生变化，修改config的数据顺序
+            this.$emit('valuePositionChange', newVal)
+            // 告诉表格组件，表格列顺序发生变化
+            EventBus.$emit('dragSelectChange', newVal)
+          }
+        }
+      }
+    }
+  },
+  created () {
+    EventBus.$emit('dragSelectChange', this.selectVal)
+  },
   mounted () {
     this.setSort()
   },
diff --git a/data-room-ui/vue.config.example.js b/data-room-ui/vue.config.example.js
index 28da78cf..e99b730b 100644
--- a/data-room-ui/vue.config.example.js
+++ b/data-room-ui/vue.config.example.js
@@ -45,7 +45,7 @@ module.exports = {
   outputDir: 'dataRoomUi',
   assetsDir: 'static',
   lintOnSave: false,
-  productionSourceMap: true,
+  productionSourceMap: false,
   runtimeCompiler: true,
   devServer: {
     hot: true,