清空单元格清除值和关联

src/views/datasheet_manage/common/customTable.js

@@ -149,7 +149,9 @@ export function getRightClickMenu(pos) {
       { label: "删除", key: "del" },
     ],
     'cell': [
+      { label: "选择指标", key: "choose-target" },
       { label: "插入指标值", key: "insert-value" },
+      { label: "清空", key: "reset" },
     ]
   }
 
@@ -203,3 +205,12 @@ export function findCellByKey(arr,key) {
   return cell
 }
 
+
+/* 清空插入单元格重置关联样式 */
+export function resetRelationStyle() {
+  let table = document.querySelector('.table');
+  table.querySelectorAll(".td-relation").forEach(el => {
+    el.classList.remove('td-relation')
+  })
+}
+

src/views/datasheet_manage/components/MixedTable.vue

@@ -83,7 +83,7 @@
 
       <!-- 右键菜单 -->
       <div class="contextMenu-wrapper" id="contextMenu-wrapper" @mouseleave="hideContextMenu">
-        <div class="item" v-for="menu in config.contextMenuOption" :key="menu.key" @click="handleContext(menu.key)">{{menu.label}}</div>
+        <div :class="['item',{'deletesty': menu.key==='reset'}]" v-for="menu in config.contextMenuOption" :key="menu.key" @click="handleContext(menu.key)">{{menu.label}}</div>
       </div>
     </template>
 
@@ -107,8 +107,8 @@ import {
   getRightClickMenu,
   checkDateFormat,
   setFocus,
-  findCellByKey
-  
+  findCellByKey,
+  resetRelationStyle
 } from "../common/customTable";
 import * as sheetInterface from "@/api/modules/sheetApi.js";
 import md5 from '@/utils/md5.js'
@@ -307,15 +307,17 @@ export default {
       cell.EdbInfoId = EdbInfoId;
 
 
-      this.checkCellRelation(e,cell)
+      this.checkCellRelation(cell)
     },
 
     /* 输入框失焦  */
     async changeVal(e, cell) {
       // 是日期格式 DataType为1
-      //是指标 DataType为2
       // 否则是3
 
+      //指标类型不做格式处理
+      if(cell.DataType===2) return
+
       const {value} = e.target;
       if(!value){ //无值重置单元格
         cell.DataType = 3;
@@ -342,11 +344,11 @@ export default {
       }
 
       //判断是否是有插入值的依赖单元格 更新值或重置关系
-      this.checkCellRelation(e,cell)
+      this.checkCellRelation(cell)
     },
 
     /* 当前单元格是否和插入值有关联 无就不管 */
-    async checkCellRelation(e,cell) {
+    async checkCellRelation(cell) {
       if(!this.insertRelationArr.length) return
 
       const key= cell.Uid;
@@ -382,7 +384,7 @@ export default {
           const res = await sheetInterface.insertData(params)
           if(res.Ret !==200) return
 
-          !res.Data && this.updateInsertCell(relation.key,true);
+          !res.Data && this.updateInsertCell(relation.key);
   
           res.Data && this.config.data.forEach(row => {
             row.forEach(cell => {
@@ -405,17 +407,15 @@ export default {
     },
 
     // 清除插入值单元格式和关联关系
-    updateInsertCell(key,initValue=false) {
+    updateInsertCell(key) {
       this.config.data.forEach(row => {
         row.forEach(cell => {
           if(cell.Uid === key) {
             cell.DataType = 3;
             cell.EdbInfoId = 0;
             cell.DataTime = '';
-            if(initValue) {
-                cell.ShowValue = '';
-                cell.Value = '';
-            }
+            cell.ShowValue = '';
+            cell.Value = '';
           }
         })
       })
@@ -471,12 +471,27 @@ export default {
         'insert-col-right': this.insertCol,
         'insert-row-up': this.insertRow,
         'insert-row-down': this.insertRow,
-        'insert-value': this.insertValue
+        'insert-value': this.insertValue,
+        'choose-target': this.selectTargetOpen,
+        'reset': this.clearCell
       }
       keyMap[key] && keyMap[key](key)
       this.hideContextMenu()
     },
 
+    /* 清除单元格内容 格式 关联关系 */
+    clearCell() {
+      if(this.selectCell.DataType===4) resetRelationStyle();
+
+      this.selectCell.DataType = 3;
+      this.selectCell.ShowValue = '';
+      this.selectCell.Value = '';
+      this.selectCell.DataTime = '';
+      this.selectCell.EdbInfoId = 0;
+
+      this.checkCellRelation(this.selectCell)
+    },
+
     /* 删除行列 */
     delColOrRow() {
       let { rindex,cindex } = this.rightClickCell;
@@ -491,7 +506,8 @@ export default {
         //删除时清除关系
         if(this.insertRelationArr.length) {
           let delCellIds = this.config.data.map(row => row[index].Uid);
-          this.insertRelationArr = this.insertRelationArr.filter(_ => !delCellIds.includes(_.key)&&!delCellIds.includes(_.relation_date.key)&&!delCellIds.includes(_.relation_edb.key))
+          
+          this.clearRelationInsertCell(delCellIds);
         }
 
         this.config.data.forEach(row => {
@@ -507,13 +523,27 @@ export default {
         if(this.insertRelationArr.length) {
           //删除时清除关系
           let delCellIds = this.config.data[index].map(cell => cell.Uid);
-          this.insertRelationArr = this.insertRelationArr.filter(_ => !delCellIds.includes(_.key)&&!delCellIds.includes(_.relation_date.key)&&!delCellIds.includes(_.relation_edb.key));
+          
+          this.clearRelationInsertCell(delCellIds);
         }
 
         this.config.data.splice(index,1)
 
       }
-      console.log(this.insertRelationArr)
+      // console.log(this.insertRelationArr)
+    },
+
+    /* 删除时清除关联关系 和删除单元格有关联的插入值单元格和 */
+    clearRelationInsertCell(delCellIds) {
+      //清除关联插入值得单元格
+      let haveRelationArr = this.insertRelationArr.filter(_ => delCellIds.includes(_.relation_date.key)||delCellIds.includes(_.relation_edb.key));
+      // console.log(haveRelationArr)
+
+      haveRelationArr.forEach(relation => {
+        !delCellIds.includes(relation)&&this.updateInsertCell(relation.key);
+      })
+
+      this.insertRelationArr = this.insertRelationArr.filter(_ => !delCellIds.includes(_.key)&&!delCellIds.includes(_.relation_date.key)&&!delCellIds.includes(_.relation_edb.key))
     },
 
     /* 插入列 */

src/views/datasheet_manage/components/selectTargetValueDia.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+
+  },
+}
+</script>
+<style scoped lang='scss'>
+
+</style>