gamma模块下 analyze korsum弹窗 右侧的table改成可编辑的表格

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="editable-cell">
+    <div v-if="editable" class="editable-cell-input-wrapper">
+      <a-input ref="myInput" :value="value" @change="handleChange" @blur="handleBlur" />
+    </div>
+    <div v-else class="editable-cell-text-wrapper" @dblclick="handleCellClick">
+      {{ value || ' ' }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: Number,
+  },
+  data() {
+    return {
+      value: this.text,
+      editable: false,
+    }
+  },
+  methods: {
+    handleCellClick() {
+      this.editable = true
+      this.$nextTick(() => {
+        this.$refs.myInput.focus()
+      })
+    },
+    handleChange(e) {
+      this.value = e.target.value
+    },
+    handleBlur() {
+      this.editable = false
+      this.$emit('change', this.value)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-input {
+  padding: 0;
+}
+.editable-cell-text-wrapper {
+  min-height: 32px;
+  line-height: 32px;
+}
+</style>

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

@@ -10,8 +10,8 @@
               class="korsum-input-formula"
               :labelCol="{
                 style: {
-                  width: '110px'
+                  width: '110px',
-                }
+                },
               }"
             >
               <a-form-model-item label="Total Effi = exp(">
@@ -64,9 +64,7 @@
             <!-- 公式结束 -->
 
             <!-- 标题 -->
-            <a-button type="primary" class="korsum-input-title" @click="handleInput">
+            <a-button type="primary" class="korsum-input-title" @click="handleInput"> Input </a-button>
-              Input
-            </a-button>
             <!-- 标题结束 -->
 
             <!-- 表格开始 -->
@@ -125,7 +123,15 @@
                 :class="outputTableList.length ? 'has-data' : ''"
                 :scroll="{ y: 584 }"
                 :pagination="false"
-              ></a-table>
+              >
+                <template v-for="(col, i) in outputColumns" :slot="col.dataIndex" slot-scope="text, record, index">
+                  <edit-cell
+                    :text="parseFloat(Number(text).toPrecision(6))"
+                    :key="i"
+                    @change="onCellChange(index, col.dataIndex, $event)"
+                  />
+                </template>
+              </a-table>
             </div>
 
             <div class="korsum-output-operation">
@@ -148,58 +154,62 @@
 import ModalMixin from '@/mixins/ModalMixin'
 import TitleOverBorder from '../TitleOverBorder.vue'
 import { getAction, postAction } from '@/api/manage'
-import * as XLSX from 'xlsx';
+import * as XLSX from 'xlsx'
+import EditCell from './EditCell.vue'
 
 const columns = [
   {
     title: 'Energy',
     dataIndex: 'energy',
     scopedSlots: {
-      customRender: 'energy'
+      customRender: 'energy',
-    }
+    },
   },
   {
     title: 'Total Efficiency',
     dataIndex: 'totalEffi',
     scopedSlots: {
-      customRender: 'totalEffi'
+      customRender: 'totalEffi',
-    }
+    },
   },
   {
     title: 'Peak Efficiency',
     dataIndex: 'peakEffi',
     scopedSlots: {
-      customRender: 'peakEffi'
+      customRender: 'peakEffi',
-    }
+    },
   },
   {
     title: 'Uncertainty(%)',
     dataIndex: 'uncertain',
     scopedSlots: {
-      customRender: 'uncertain'
+      customRender: 'uncertain',
-    }
+    },
-  }
+  },
 ]
 
 const outputColumns = [
   {
     title: 'Energy',
     dataIndex: 'energy',
-    customRender: (text) =>  parseFloat(Number(text).toPrecision(6))
+    scopedSlots: { customRender: 'energy' },
+    // customRender: (text) =>  parseFloat(Number(text).toPrecision(6))
   },
   {
     title: 'Correct Factor',
     dataIndex: 'correctFactor',
-    customRender: (text) =>  parseFloat(Number(text).toPrecision(6))
+    scopedSlots: { customRender: 'correctFactor' },
+    // customRender: (text) => parseFloat(Number(text).toPrecision(6)),
   },
   {
     title: 'Uncertainty(%)',
     dataIndex: 'uncertainty',
-    customRender: (text) =>  parseFloat(Number(text).toPrecision(6))
+    scopedSlots: { customRender: 'uncertainty' },
-  }
+    // customRender: (text) => parseFloat(Number(text).toPrecision(6)),
+  },
 ]
 export default {
-  components: { TitleOverBorder },
+  components: { TitleOverBorder, EditCell },
   mixins: [ModalMixin],
   data() {
     this.columns = columns
@@ -217,7 +227,7 @@ export default {
       filterWord: '', // 筛选
 
       fileName: '', // save excel name
-      analyseData: {} // 分析结果
+      analyseData: {}, // 分析结果
     }
   },
   methods: {
@@ -245,7 +255,7 @@ export default {
         totalEf3: 0.111096,
         totalEf4: -0.003896,
         totalEf5: -0.000345,
-        totalEf6: 0.000017
+        totalEf6: 0.000017,
       }
 
       this.efficiency = {
@@ -254,7 +264,7 @@ export default {
         effciency3: 0.583265,
         effciency4: -0.065884,
         effciency5: 0.003255,
-        effciency6: -0.000059
+        effciency6: -0.000059,
       }
 
       this.getInfo()
@@ -269,9 +279,9 @@ export default {
         const { success, result, message } = await postAction('/gamma/KorSumInput', {
           ...this.totalEffi,
           ...this.efficiency,
-          energys: this.list.map(item => item.energy)
+          energys: this.list.map((item) => item.energy),
         })
-        console.log(success);
+        console.log(success)
         if (success) {
           this.list = result
         } else {
@@ -285,18 +295,18 @@ export default {
     // 分析
     async handleAnalyze() {
       console.log('%c [ 分析 ]-178', 'font-size:13px; background:pink; color:#bf2c9f;')
-        try {
+      try {
         this.isLoading = true
         const { success, result, message } = await postAction('/gamma/KorSumAnalyse', this.list)
         this.isLoading = false
         if (success) {
-          this.analyseData =  result
+          this.analyseData = result
-          console.log(result);
+          console.log(result)
         } else {
           this.$message.error(message)
         }
       } catch (error) {
-        this.isLoading = false;
+        this.isLoading = false
         console.error(error)
       }
     },
@@ -308,73 +318,84 @@ export default {
 
     // output栏点击左侧列表
     handleOutputItemClick(item) {
-      if(!this.analyseData) {
+      if (!this.analyseData) {
-        this.$message.error("Analyse Fail!")
+        this.$message.error('Analyse Fail!')
-        return false;
+        return false
       }
       this.selectedItem = item
-      this.outputTableList = [];
+      this.outputTableList = []
 
       // 根据核素名获取结果集
-      let data =  this.analyseData[this.selectedItem]
+      let data = this.analyseData[this.selectedItem]
-      if(!data || data.energy.length < 1) {
+      if (!data || data.energy.length < 1) {
-        this.$message.error("Analyse Fail!")
+        this.$message.error('Analyse Fail!')
-        return false;
+        return false
       }
-     
+
-      let result = [];
+      let result = []
-      for(let i = 0; i < data.energy.length; i++ ) {
+      for (let i = 0; i < data.energy.length; i++) {
         // 将数据进行填充并
         let obj = {
-          "energy": data.energy[i],
+          energy: data.energy[i],
-          "correctFactor" : data.factor[i],
+          correctFactor: data.factor[i],
-          "uncertainty" : (data.factor[i] - 1) / 10 * 100
+          uncertainty: ((data.factor[i] - 1) / 10) * 100,
         }
-        result.push(obj);
+        result.push(obj)
       }
-      
+
-      this.outputTableList = result;
+      this.outputTableList = result
+    },
+    onCellChange(idx, label, value) {
+      console.log(this.outputTableList)
+      console.log(value)
+      const dataSource = [...this.outputTableList]
+      const target = dataSource.find((item, index) => index == idx)
+      if (target) {
+        target[label] = value
+        this.outputTableList = dataSource
+      }
+      console.log(this.outputTableList)
     },
 
     // 导出到excel
     handleExport() {
       console.log('%c [ 导出到excel ]-246', 'font-size:13px; background:pink; color:#bf2c9f;')
       let _this = this
-        this.$confirm({
+      this.$confirm({
-          title: 'Please enter file name',
+        title: 'Please enter file name',
-          content: (h) => <a-input v-model={_this.fileName} />,
+        content: (h) => <a-input v-model={_this.fileName} />,
-          okText: 'Cancle',
+        okText: 'Cancle',
-          cancelText: 'Save',
+        cancelText: 'Save',
-          okButtonProps: { style: { backgroundColor: '#b98326', color: '#fff', borderColor: 'transparent' } },
+        okButtonProps: { style: { backgroundColor: '#b98326', color: '#fff', borderColor: 'transparent' } },
-          cancelButtonProps: { style: { color: '#fff', backgroundColor: '#31aab0', borderColor: 'transparent' } },
+        cancelButtonProps: { style: { color: '#fff', backgroundColor: '#31aab0', borderColor: 'transparent' } },
-          onOk() {
+        onOk() {
-            console.log('Cancel')
+          console.log('Cancel')
-          },
+        },
-          onCancel() {
+        onCancel() {
-            console.log(_this.fileName);
+          console.log(_this.fileName)
-            if (_this.fileName) {
+          if (_this.fileName) {
-              // saveAs(blob, `${_this.fileName}`)
+            // saveAs(blob, `${_this.fileName}`)
-              // 创建工作簿
+            // 创建工作簿
-              const workbook = XLSX.utils.book_new();
+            const workbook = XLSX.utils.book_new()
-              
+
-              // 创建工作表
+            // 创建工作表
-              const worksheet = XLSX.utils.json_to_sheet(_this.outputTableList);
+            const worksheet = XLSX.utils.json_to_sheet(_this.outputTableList)
-              
+
-              // 将工作表添加到工作簿
+            // 将工作表添加到工作簿
-              XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
-              
+
-              // 导出Excel文件
+            // 导出Excel文件
-              XLSX.writeFile(workbook, _this.fileName + ".xlsx");
+            XLSX.writeFile(workbook, _this.fileName + '.xlsx')
-            }
+          }
-          },
+        },
-        })
+      })
-    }
+    },
   },
   computed: {
     outputList() {
-      return this.nuclideList.filter(item => item.toLowerCase().includes(this.filterWord.toLowerCase()))
+      return this.nuclideList.filter((item) => item.toLowerCase().includes(this.filterWord.toLowerCase()))
-    }
+    },
-  }
+  },
 }
 </script>