From 9812c461ab8ebacb4f208222f0acdedfb04edf82 Mon Sep 17 00:00:00 2001
From: renpy <peiyu_ren@163.com>
Date: Thu, 31 Aug 2023 19:36:06 +0800
Subject: [PATCH] =?UTF-8?q?RLR=E5=BC=B9=E7=AA=97=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BC=96=E8=BE=91=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RLRModal/components/EditableCell.vue      |  50 +++++
 .../Modals/RLRModal/components/PeakFit.vue    |  48 +++--
 .../components/TableWithOperators.vue         | 184 ++++++++++++++----
 .../components/Modals/RLRModal/index.vue      |  29 ++-
 4 files changed, 244 insertions(+), 67 deletions(-)
 create mode 100644 src/views/spectrumAnalysis/components/Modals/RLRModal/components/EditableCell.vue

diff --git a/src/views/spectrumAnalysis/components/Modals/RLRModal/components/EditableCell.vue b/src/views/spectrumAnalysis/components/Modals/RLRModal/components/EditableCell.vue
new file mode 100644
index 0000000..f8bed6f
--- /dev/null
+++ b/src/views/spectrumAnalysis/components/Modals/RLRModal/components/EditableCell.vue
@@ -0,0 +1,50 @@
+<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" @click="handleCellClick">
+      {{ value || ' ' }}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+    text: String,
+    },
+    data() {
+      return {
+        value: this.text,
+        editable: false,
+      };
+  },
+    methods: {
+      handleCellClick() {
+        console.log("点击单元格");
+        this.editable = true
+        this.$nextTick(() => {
+          this.$refs.myInput.focus()
+          this.$refs.myInput.select()
+        })
+      },
+      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;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/spectrumAnalysis/components/Modals/RLRModal/components/PeakFit.vue b/src/views/spectrumAnalysis/components/Modals/RLRModal/components/PeakFit.vue
index 6caa81f..ee9b9aa 100644
--- a/src/views/spectrumAnalysis/components/Modals/RLRModal/components/PeakFit.vue
+++ b/src/views/spectrumAnalysis/components/Modals/RLRModal/components/PeakFit.vue
@@ -10,48 +10,56 @@ const columns = [
   {
     title: 'Index',
     dataIndex: 'key',
-    align: 'center',
+    align: 'left',
     customRender: (text,record,index) => `${index+1}`,//此处为重点
   },
   {
     title: 'Energy(keV)',
     dataIndex: 'energy',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'energy' }
   },
   {
     title: 'Energy_err(%)',
     dataIndex: 'energyErr',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'energyErr' },
   },
   {
     title: 'Net Area',
     dataIndex: 'netArea',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'netArea' },
   },
   {
     title: 'Area_err(%)',
     dataIndex: 'areaErr',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'areaErr' },
   },
   {
     title: 'NetCountRate',
     dataIndex: 'netCountRate',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'netCountRate' },
   },
   {
     title: 'NCRate_err(%)',
     dataIndex: 'ncRateErr',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'ncRateErr' },
   },
   {
     title: 'LC',
     dataIndex: 'lc',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'lc' },
   },
   {
     title: 'Significance',
     dataIndex: 'significance',
-    align: 'center'
+    align: 'left',
+    scopedSlots: { customRender: 'significance' },
   }
 ]
 
@@ -60,28 +68,16 @@ export default {
     TableWithOperators
   },
   props: {
-    allData: {
-      type: Object,
-      default: ()=>{}
+    tableData: {
+      type: Array,
+      default: ()=>[]
     },
   },
-  watch: {
-    allData: {
-      handler(val) {
-        console.log(val);
-      },
-      deep: true,
-      immediate:true
-    }
-  },
   data() {
     this.columns = columns
     return {
-      list: []
+      list: this.tableData
     }
-  },
-  mounted () {
-    this.list = this.allData.peakFit
-  },
+  }
 }
 </script>
diff --git a/src/views/spectrumAnalysis/components/Modals/RLRModal/components/TableWithOperators.vue b/src/views/spectrumAnalysis/components/Modals/RLRModal/components/TableWithOperators.vue
index 2b9943d..418d3f9 100644
--- a/src/views/spectrumAnalysis/components/Modals/RLRModal/components/TableWithOperators.vue
+++ b/src/views/spectrumAnalysis/components/Modals/RLRModal/components/TableWithOperators.vue
@@ -1,57 +1,34 @@
 <template>
   <div>
     <div class="operators">
-      <a-button type="primary">Insert Before</a-button>
-      <a-button type="primary">Insert After</a-button>
-      <a-button type="primary">Delete</a-button>
+      <a-button type="primary" @click="insertBefore">Insert Before</a-button>
+      <a-button type="primary" @click="insertAfter">Insert After</a-button>
+      <a-button type="primary" @click="handleDelete">Delete</a-button>
     </div>
     <a-table
       size="small"
-      :class="list.length ? 'has-data' : ''"
+      rowKey="id"
+      :class="dataSource.length ? 'has-data' : ''"
       :columns="columns"
-      :dataSource="list"
+      :dataSource="dataSource"
       :pagination="false"
       :scroll="{ y: 470 }"
+      :customRow="customRow"
     >
-  </a-table>
+      <template v-for="col in columns" :slot="col.dataIndex" slot-scope="text, record">
+        <editable-cell :text="text" :key="col.id" @change="onCellChange(record.id, col.dataIndex, $event)" />
+      </template>
+    </a-table>
   </div>
 </template>
 
 <script>
-const columns = [
-  {
-    title: 'Nuclide1',
-    dataIndex: 'nuclide1',
-    align: 'center'
-  },
-  {
-    title: 'Nuclide2',
-    dataIndex: 'nuclide2',
-    align: 'center'
-  },
-  {
-    title: 'Ratio',
-    dataIndex: 'ratio',
-    align: 'center'
-  },
-  {
-    title: 'Ratio_err(%)',
-    dataIndex: 'ratioErr',
-    align: 'center'
-  },
-  {
-    title: 'Reference Time',
-    dataIndex: 'referenceTime',
-    align: 'center'
-  },
-  {
-    title: 'Zero Time',
-    dataIndex: 'zeroTime',
-    align: 'center'
-  }
-]
+import EditableCell from './EditableCell.vue';
 
 export default {
+  components: {
+    EditableCell,
+  },
   props: {
     columns: {
       type: Array,
@@ -61,7 +38,136 @@ export default {
       type: Array,
       required: true
     }
-  }
+  },
+  data() {
+    return {
+      selectedKey: "",
+      dataSource: this.list,
+      isEmpty:false
+    }
+  },
+  mounted() {
+    this.dataSource.forEach((item, index) => {
+      item.id = this.guid()
+    })
+    this.initList()
+  },
+  methods: {
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0,
+            v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    },
+    // 实现单击选中/反选功能
+    customRow(record, index) {
+      const that = this;
+      return {
+        class: that.selectedKey==record.id ? 'ant-table-row-selected' : '',
+        on: {
+          click: () => {
+            console.log("选中行",record.id);
+            that.selectedKey = record.id
+          }
+        }
+      }
+    },
+    initList() {
+      let arr = []
+      let keys = 0
+      this.dataSource.forEach((item,index) => {
+        let num = 0
+        keys=Object.keys(item).length
+        Object.keys(item).forEach(key => {
+          if (item[key]!=="") {
+            num++
+          }
+        })
+        arr[index] = num
+      })
+      let idx = arr.findIndex(cont => {
+        return cont!==keys
+      })
+      if (idx>-1) {
+        this.isEmpty = true
+      } else {
+        this.isEmpty = false
+      }
+      sessionStorage.setItem("isCellEmpty",this.isEmpty)
+    },
+    insertBefore() {
+      this.initList()
+      if (this.isEmpty) {
+        this.$message.warning("Please finishi ti edit new inserted row first.")
+      } else {
+        let obj = {
+          id: this.guid(),
+          energy: "",
+          energyErr: "",
+          netArea: "",
+          areaErr: "",
+          netCountRate: "",
+          ncRateErr: "",
+          lc: "",
+          significance: ""
+        }
+        if (this.selectedKey) {
+          let idx = this.dataSource.findIndex(item => {
+            return item.id === this.selectedKey
+          })
+          this.dataSource.splice(idx, 0, obj)
+        } else {
+          this.dataSource.unshift(obj)
+        }
+        sessionStorage.setItem("isCellEmpty",true)
+        this.selectedKey = obj.id
+      }
+    },
+    insertAfter() {
+      if (this.isEmpty) {
+        this.$message.warning("Please finishi ti edit new inserted row first.")
+      } else { 
+        let obj = {
+          id:this.guid(),
+          energy: "",
+          energyErr: "",
+          netArea: "",
+          areaErr: "",
+          netCountRate: "",
+          ncRateErr: "",
+          lc: "",
+          significance: ""
+        }
+        if (this.selectedKey) {
+          let idx = this.dataSource.findIndex(item => {
+            return item.id === this.selectedKey
+          })
+          this.dataSource.splice(idx+1, 0, obj)
+        } else {
+          this.dataSource.push(obj)
+        }
+        sessionStorage.setItem("isCellEmpty",true)
+        this.selectedKey = obj.id
+      }
+    },
+    handleDelete() {
+      let idx = this.list.findIndex(item => {
+        return item.id === this.selectedKey
+      })
+      console.log(idx);
+      this.dataSource.splice(idx,1)
+    },
+    onCellChange(id, dataIndex, value) {
+      const dataSource = [...this.dataSource];
+      const target = dataSource.find(item => item.id === id);
+      if (target) {
+        target[dataIndex] = value;
+        this.dataSource = dataSource;
+      }
+      this.initList()
+    }
+  },
 }
 </script>
 
diff --git a/src/views/spectrumAnalysis/components/Modals/RLRModal/index.vue b/src/views/spectrumAnalysis/components/Modals/RLRModal/index.vue
index e7e80c9..61c6033 100644
--- a/src/views/spectrumAnalysis/components/Modals/RLRModal/index.vue
+++ b/src/views/spectrumAnalysis/components/Modals/RLRModal/index.vue
@@ -8,7 +8,7 @@
             :class="activeKey == index ? 'active' : ''"
             v-for="(tab, index) in tabs"
             :key="index"
-            @click="activeKey = index"
+            @click="handleChangeView(index)"
           >
             {{ tab }}
           </div>
@@ -35,7 +35,7 @@
               <peaks-method :allData="allInfo" />
             </template>
             <template v-if="activeKey == 6">
-              <peak-fit :allData="allInfo" />
+              <peak-fit :tableData="allInfo.peakFit" />
             </template>
             <template v-if="activeKey == 7">
               <g-analysis-methods :allData="allInfo" />
@@ -68,6 +68,12 @@
         </div>
       </div>
     </a-spin>
+    <div slot="custom-footer" style="text-align: center;">
+      <a-space :size="20">
+        <a-button type="primary" @click="handleSave">Save</a-button>
+        <a-button @click="visible = false">Cancel</a-button>
+      </a-space>
+    </div>
   </custom-modal>
 </template>
 
@@ -143,7 +149,26 @@ export default {
       allInfo: {}
     }
   },
+  mounted () {
+    sessionStorage.setItem("isCellEmpty",false);
+  },
   methods: {
+    handleSave() {
+      let val = sessionStorage.getItem("isCellEmpty")
+      if (val=="false") {
+        this.visible = false
+      } else {
+        this.$message.warning("Please finishi ti edit new inserted row first.")
+      }
+    },
+    handleChangeView(index) {
+      let val = sessionStorage.getItem("isCellEmpty")
+      if (val=="false") {
+        this.activeKey = index
+      } else {
+        this.$message.warning("Please finishi ti edit new inserted row first.")
+      }
+    },
     beforeModalOpen() {
       this.activeKey = 0
       this.getGammaViewRLR();