feat: Nuclide Library增加排序功能

src/views/spectrumAnalysis/components/Modals/NuclideLibraryModal.vue

@@ -78,6 +78,7 @@
               :dataSource="nuclLinesLibs"
               :pagination="false"
               :scroll="{ y: 330 }"
+              @change="handleTableChange"
             >
               <template slot="keyLine" slot-scope="text">
                 <span v-if="text == 1" class="green-check-mark"> </span>
@@ -133,54 +134,6 @@ const daughterColumns = [
   },
 ]
 
-// 主体表格配置
-const mainColumns = [
-  {
-    title: 'Id',
-    width: 80,
-    customRender: (_, __, index) => {
-      return index + 1
-    },
-  },
-  {
-    title: 'Full Name',
-    dataIndex: 'fullName',
-  },
-  {
-    title: 'Energy(keV)',
-    dataIndex: 'energy',
-    width: 100,
-    customRender: (text) => Number(text).toFixed(3),
-  },
-  {
-    title: 'Energy Uncert(%)',
-    dataIndex: 'energyUncert',
-    width: 120,
-    customRender: (text) => Number(text).toFixed(6),
-  },
-  {
-    title: 'Yield',
-    dataIndex: 'yield',
-    width: 80,
-    customRender: (text) => Number(text).toFixed(3),
-  },
-  {
-    title: 'Yield Uncert(%)',
-    dataIndex: 'yieldUncert',
-    width: 120,
-    customRender: (text) => Number(text).toFixed(3),
-  },
-  {
-    title: 'KeyLine',
-    dataIndex: 'keyFlag',
-    width: 100,
-    align: 'center',
-    scopedSlots: {
-      customRender: 'keyLine',
-    },
-  },
-]
-
 export default {
   mixins: [ModalMixin, SampleDataMixin],
   components: {
@@ -188,7 +141,6 @@ export default {
   },
   data() {
     this.daughterColumns = daughterColumns
-    this.mainColumns = mainColumns
     return {
       isLoading: false,
       nuclideList: [],
@@ -200,6 +152,7 @@ export default {
 
       selectedNuclide: {}, // 当前选中的Nuclide
       selectedParent: {}, // 当前选中的Parent
+      sortedInfo: null, // 控制筛选
     }
   },
   methods: {
@@ -253,6 +206,7 @@ export default {
         editEnergy: '',
         nuclideName: '',
       }
+      this.sortedInfo = null
       this.getInfo(true)
       window.addEventListener('keyup', this.handleKeyUp)
     },
@@ -327,6 +281,74 @@ export default {
       this.model.nuclideName = item
       this.getInfo()
     },
+
+    // 主表格变化
+    handleTableChange(_, __, sorter) {
+      this.sortedInfo = sorter
+    },
+  },
+  computed: {
+    // 主体表格配置
+    mainColumns() {
+      const sortedInfo = this.sortedInfo || {}
+
+      const mainColumns = [
+        {
+          title: 'Id',
+          width: 50,
+          customRender: (_, __, index) => {
+            return index + 1
+          },
+        },
+        {
+          title: 'Full Name',
+          dataIndex: 'fullName',
+        },
+        {
+          title: 'Energy(keV)',
+          dataIndex: 'energy',
+          width: 110,
+          customRender: (text) => Number(text).toFixed(3),
+          sorter: (a, b) => a.energy - b.energy,
+          sortOrder: sortedInfo.columnKey === 'energy' && sortedInfo.order,
+        },
+        {
+          title: 'Energy Uncert(%)',
+          dataIndex: 'energyUncert',
+          width: 140,
+          customRender: (text) => Number(text).toFixed(6),
+          sorter: (a, b) => a.energyUncert - b.energyUncert,
+          sortOrder: sortedInfo.columnKey === 'energyUncert' && sortedInfo.order,
+        },
+        {
+          title: 'Yield',
+          dataIndex: 'yield',
+          width: 80,
+          customRender: (text) => Number(text).toFixed(3),
+          sorter: (a, b) => a.yield - b.yield,
+          sortOrder: sortedInfo.columnKey === 'yield' && sortedInfo.order,
+        },
+        {
+          title: 'Yield Uncert(%)',
+          dataIndex: 'yieldUncert',
+          width: 130,
+          customRender: (text) => Number(text).toFixed(3),
+          sorter: (a, b) => a.yieldUncert - b.yieldUncert,
+          sortOrder: sortedInfo.columnKey === 'yieldUncert' && sortedInfo.order,
+        },
+        {
+          title: 'KeyLine',
+          dataIndex: 'keyFlag',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'keyLine',
+          },
+        },
+      ]
+
+      return mainColumns
+    },
   },
 }
 </script>

src/views/spectrumAnalysis/components/Modals/SelfStation/SelfStationNuclideLibraryModal.vue

@@ -78,6 +78,7 @@
               :dataSource="nuclLinesLibs"
               :pagination="false"
               :scroll="{ y: 330 }"
+              @change="handleTableChange"
             >
               <template slot="keyLine" slot-scope="text">
                 <span v-if="text == 1" class="green-check-mark"> </span>
@@ -132,54 +133,6 @@ const daughterColumns = [
   },
 ]
 
-// 主体表格配置
-const mainColumns = [
-  {
-    title: 'Id',
-    width: 80,
-    customRender: (_, __, index) => {
-      return index + 1
-    },
-  },
-  {
-    title: 'Full Name',
-    dataIndex: 'fullName',
-  },
-  {
-    title: 'Energy(keV)',
-    dataIndex: 'energy',
-    width: 100,
-    customRender: (text) => Number(text).toFixed(3),
-  },
-  {
-    title: 'Energy Uncert(%)',
-    dataIndex: 'energyUncert',
-    width: 120,
-    customRender: (text) => Number(text).toFixed(6),
-  },
-  {
-    title: 'Yield',
-    dataIndex: 'yield',
-    width: 80,
-    customRender: (text) => Number(text).toFixed(3),
-  },
-  {
-    title: 'Yield Uncert(%)',
-    dataIndex: 'yieldUncert',
-    width: 120,
-    customRender: (text) => Number(text).toFixed(3),
-  },
-  {
-    title: 'KeyLine',
-    dataIndex: 'keyFlag',
-    width: 100,
-    align: 'center',
-    scopedSlots: {
-      customRender: 'keyLine',
-    },
-  },
-]
-
 export default {
   mixins: [SampleDataMixin],
   components: {
@@ -187,7 +140,6 @@ export default {
   },
   data() {
     this.daughterColumns = daughterColumns
-    this.mainColumns = mainColumns
     return {
       visible: false,
       isLoading: false,
@@ -200,6 +152,7 @@ export default {
 
       selectedNuclide: {}, // 当前选中的Nuclide
       selectedParent: {}, // 当前选中的Parent
+      sortedInfo: null, // 控制筛选
     }
   },
   methods: {
@@ -253,6 +206,7 @@ export default {
         editEnergy: '',
         nuclideName: '',
       }
+      this.sortedInfo = null
       this.getInfo(true)
       this.visible = true
       window.addEventListener('keyup', this.handleKeyUp)
@@ -328,6 +282,74 @@ export default {
       this.model.nuclideName = item
       this.getInfo()
     },
+
+    // 主表格变化
+    handleTableChange(_, __, sorter) {
+      this.sortedInfo = sorter
+    },
+  },
+  computed: {
+    // 主体表格配置
+    mainColumns() {
+      const sortedInfo = this.sortedInfo || {}
+
+      const mainColumns = [
+        {
+          title: 'Id',
+          width: 50,
+          customRender: (_, __, index) => {
+            return index + 1
+          },
+        },
+        {
+          title: 'Full Name',
+          dataIndex: 'fullName',
+        },
+        {
+          title: 'Energy(keV)',
+          dataIndex: 'energy',
+          width: 110,
+          customRender: (text) => Number(text).toFixed(3),
+          sorter: (a, b) => a.energy - b.energy,
+          sortOrder: sortedInfo.columnKey === 'energy' && sortedInfo.order,
+        },
+        {
+          title: 'Energy Uncert(%)',
+          dataIndex: 'energyUncert',
+          width: 140,
+          customRender: (text) => Number(text).toFixed(6),
+          sorter: (a, b) => a.energyUncert - b.energyUncert,
+          sortOrder: sortedInfo.columnKey === 'energyUncert' && sortedInfo.order,
+        },
+        {
+          title: 'Yield',
+          dataIndex: 'yield',
+          width: 80,
+          customRender: (text) => Number(text).toFixed(3),
+          sorter: (a, b) => a.yield - b.yield,
+          sortOrder: sortedInfo.columnKey === 'yield' && sortedInfo.order,
+        },
+        {
+          title: 'Yield Uncert(%)',
+          dataIndex: 'yieldUncert',
+          width: 130,
+          customRender: (text) => Number(text).toFixed(3),
+          sorter: (a, b) => a.yieldUncert - b.yieldUncert,
+          sortOrder: sortedInfo.columnKey === 'yieldUncert' && sortedInfo.order,
+        },
+        {
+          title: 'KeyLine',
+          dataIndex: 'keyFlag',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'keyLine',
+          },
+        },
+      ]
+
+      return mainColumns
+    },
   },
 }
 </script>