全局公式配置页面修改

src/views/formula/edit1.vue

@@ -119,7 +119,7 @@
             </el-card>
           </el-col>
           <el-col :span="16" class="h-100p flex flex-d-c ov-hidden">
-             <div style="display:flex">
+             <!-- <div style="display:flex">
                       <el-input placeholder="请输入你想搜索的元素字段" v-model="inputele"  clearable  @clear="clearinput" >  </el-input>
                         <el-button type="primary" icon="el-icon-search"  size="small"  @click="searchChange">搜索</el-button>
                </div>
@@ -130,7 +130,7 @@
                     <div class="ele-box">
                       <span v-if="item.k">{{item.name}}</span>
                       <span v-else>{{item.eName}}</span>
-                       <!-- <span >{{item.title}}</span> -->
+                     
 
                       <el-checkbox v-model="item.checked" @change="value => eleChang(value,item)"></el-checkbox>
                     </div>
@@ -139,7 +139,7 @@
               </el-scrollbar>
             </div>
             <div class="flex jc-sb">
-              <!-- <div>定位数据位置:</div> -->
+       
               <div class="icon-box">
                 <el-link :underline="false" icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
                 <el-link :underline="false" type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline"></el-link>
@@ -148,11 +148,10 @@
                 <el-link :underline="false" type="primary" @click="addOperator('%')">÷</el-link>
               </div>
               <div>
-                <!-- <el-link :underline="false" type="primary" class="mg-r-20" @click="eleAddFormula">元素添加到公式</el-link> -->
+                
                 <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
                 <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
-                <!-- <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets('[',false)">【</el-link>
-                <el-link :underline="false" type="primary" class="mg-r-10" @click="addBrackets(']',true)">】</el-link> -->
+       
                 <el-link :underline="false" type="primary" @click="addText">输入值</el-link>
               </div>
             </div>
@@ -164,6 +163,74 @@
                 >
                 </formula-item>
               </draggable>
+            </div> -->
+            <div class="operation-box">
+              <!-- 运算符选择区域 -->
+                <div class="flex jc-sb operation-symbol-box">
+                    
+                    <div class="icon-box ">
+                        <span class="text-sm" >插入运算符:</span>
+                    
+                      <el-link type="primary" @click="addOperator('+')" icon="el-icon-circle-plus-outline" size="mini"></el-link>
+                      <el-link  type="primary" @click="addOperator('-')" icon="el-icon-remove-outline"></el-link>
+                      <el-link type="primary" @click="addOperator('*')" icon="el-icon-circle-close"></el-link>
+                      <el-link  type="primary" @click="addOperator('%')">÷</el-link>
+                       <el-link type="primary" class="mg-r-10" @click="addBrackets('(',false)">(</el-link>
+                      <el-link  type="primary" class="mg-r-10" @click="addBrackets(')',true)">)</el-link>
+                        <el-link type="primary" @click="addText">固定值</el-link>
+                    </div>
+                    <div>
+                      操作
+                    <el-link  icon="el-icon-delete" type="danger" @click="removeSelect"></el-link>
+                    </div>
+                  </div>
+      
+               <div 
+                  class="border-grey sele-ele-box1"  
+               
+                  tabindex="0"
+                  @keydown.left="handleLeftArrow"
+                  @keydown.right="handleRightArrow"
+                  @keydown.delete="handleDelete"
+                  @keydown.shift.189="addOperator('-')" 
+                  @keydown.shift.191="addOperator('/')" 
+                  @keydown.shift.57="addBrackets('(')"  
+                  @keydown.shift.48="addBrackets(')')" 
+                  @keydown.shift.187="addOperator('+')" 
+                  @keydown.shift.56="addOperator('*')" 
+                  @focus="containerFocused = true"
+                  @blur="containerFocused = false"
+                >
+                  <draggable v-model="selectEleFormula">
+                    <formula-item
+                      v-for="(item,index) in selectEleFormula" 
+                      :key="index"
+                      :item="item" 
+                      @click="obj => eleFormulaClick(obj,index)"  
+                    >
+                    </formula-item>
+                  </draggable>
+                </div>
+            
+                  <div class="flex mg-t-10" style="justify-content: space-between;width:100%;">
+                    <el-select v-model="eleTableId" @change="getTableEle" placeholder="请选择元素表1" style="width:45%"  size="small">
+                      <el-option v-if="paramDataList.length" label="选择节点参数2" value="选择节点参数"></el-option>
+                      <el-option  v-for="item in eleTableList" :key="item.id" :label="item.tableName" :value="(item.pkeyId!==null&&item.pkeyId!==-1)?item.pkeyId:item.id"></el-option>
+                    </el-select>
+
+                     <div class="text-align-c">
+                      <el-button size="small" @click="canceloperationVisible ">取消</el-button>
+                      <el-button size="small" @click="operationHandle" type="primary">保存</el-button>
+                    </div>
+                  </div>
+           
+                <div class="mg-t-10 no-mb-col flex1" >
+                  <el-scrollbar style="height: 450px">
+        
+                     <tableFormWrite :pkeyId="eleTableId" @element-selected="handleElementSelected" :initTableName="initTableName"  :selectedTableKey="selectedTableKey"  :key="1" :container-id="'excel-container-1'" ></tableFormWrite>
+                  </el-scrollbar>
+                </div>
+         
             </div>
           </el-col>
         </el-row>
@@ -507,7 +574,7 @@ import {formulaStringToArray} from "./formulaStringToArray"
 
 
 import draggable from 'vuedraggable'
-
+import tableFormWrite from "./component/table-form-write.vue";
 import {formatArrayMore,restoreArrayMore,generateResult} from './component/funComponent/multiIfElseTools'
 export default {
   components: {
@@ -526,7 +593,8 @@ export default {
     datasJoin,
     ifelse,
 
-    deviationRange
+    deviationRange,
+    tableFormWrite
   },
   props: {
     wbsid:{
@@ -688,7 +756,7 @@ export default {
       dataForm:'',
       remark:'',
       formulaDetailMap:{},//公式详情map
-
+      containerFocused:false,//公式编辑区域是否聚焦
     };
   },
   computed: {
@@ -722,6 +790,20 @@ export default {
     },
 
 
+  },
+  watch: {
+    selectEleFormula: {
+      handler() {
+        this.checkDefaultSelection();
+          this.$nextTick(() => {
+            this.$el.querySelector('.sele-ele-box1').focus();
+          });
+      },
+      deep: true
+    },
+  
+
+
   },
 
   created() {
@@ -921,6 +1003,11 @@ export default {
     operationEdit(){
       this.selectEleFormula= JSON.parse(JSON.stringify(this.processFormula));
       this.operationVisible = true;
+
+         // 确保容器获得焦点
+        this.$nextTick(() => {
+          this.$el.querySelector('.sele-ele-box1').focus();
+        });
     },
 
     eleAddFormula(){
@@ -1182,17 +1269,34 @@ export default {
     },
 
     //点选公式中的元素
-    eleFormulaClick({selected,item},index){
-      if(selected){
-        this.selectEleFormula.forEach((ele)=>{
-          ele.selected = false;
-        })
-        item.selected = true;
-        this.curSeleEleIndex = index;
-      }else{
-        this.curSeleEleIndex = -1;
+    eleFormulaClick(obj, index) {
+      // 先取消所有选中状态
+      this.selectEleFormula.forEach(item => {
+        item.selected = false;
+      });
+      
+      // 设置当前选中项
+      obj.item.selected = obj.selected;
+      this.curSeleEleIndex = index;
+      
+      // 确保容器获得焦点以接收键盘事件
+       this.$el.querySelector('.sele-ele-box1').focus();
+    // 处理类型为ELEMENT的元素，提取tableElementKey
+    console.log(obj.item,'obj.item.');
+    
+      if (obj.item.type === 'Element' && obj.item.tableElementKey) {
+        // 从类似"m_20220928142210_1575007943793836032:key_1"的格式中提取key部分
+        const keyParts = obj.item.tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
+   
+        
+      } else {
+        // 非ELEMENT类型清空选中状态
+        this.selectedTableKey = null;
       }
+      
     },
+    
 
     //取消勾选
     unCheckEleFormulac(eleId){
@@ -2039,7 +2143,107 @@ export default {
           resolve();
         })
       })
-    }
+    },
+        // 左箭头导航
+    handleLeftArrow(e) {
+      e.preventDefault(); // 阻止默认行为
+      if (this.curSeleEleIndex > 0) {
+        // 取消当前选中项
+        if (this.selectEleFormula[this.curSeleEleIndex]) {
+          this.selectEleFormula[this.curSeleEleIndex].selected = false;
+        }
+        
+        // 选中左侧项
+        this.curSeleEleIndex--;
+        this.selectEleFormula[this.curSeleEleIndex].selected = true;
+        // this.selectedTableKey = this.selectEleFormula[this.curSeleEleIndex].tableElementKey;
+         const keyParts =  this.selectEleFormula[this.curSeleEleIndex].tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
+      }
+    },
+    
+    // 右箭头导航
+    handleRightArrow(e) {
+      e.preventDefault(); // 阻止默认行为
+      if (this.curSeleEleIndex < this.selectEleFormula.length - 1) {
+        // 取消当前选中项
+        if (this.selectEleFormula[this.curSeleEleIndex]) {
+          this.selectEleFormula[this.curSeleEleIndex].selected = false;
+        }
+        
+        // 选中右侧项
+        this.curSeleEleIndex++;
+        this.selectEleFormula[this.curSeleEleIndex].selected = true;
+        // this.selectedTableKey = this.selectEleFormula[this.curSeleEleIndex].tableElementKey;
+               const keyParts =  this.selectEleFormula[this.curSeleEleIndex].tableElementKey.split('key');
+        this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
+      }
+    },
+    
+        // 处理删除操作
+    handleDelete(e) {
+      e.preventDefault();
+      
+      // 增加更严格的索引检查
+      if (
+        this.curSeleEleIndex === null || 
+        this.curSeleEleIndex === undefined ||
+        this.curSeleEleIndex < 0 || 
+        this.curSeleEleIndex >= this.selectEleFormula.length
+      ) {
+        
+        return;
+      }
+      
+      // 保存当前要删除的元素索引（避免后续操作影响）
+      const indexToDelete = this.curSeleEleIndex;
+      const itemToDelete = this.selectEleFormula[indexToDelete];
+      
+    
+      
+      // 处理元素取消勾选
+      if (itemToDelete && itemToDelete.type === 'Element') {
+        this.deleEleIndex = indexToDelete;
+        this.unCheckEleFormulac(itemToDelete.id);
+      }
+      
+      // 执行删除（只删除指定索引的1个元素）
+      const deletedItems = this.selectEleFormula.splice(indexToDelete, 1);
+      
+      
+      // 正确更新当前选中索引
+      if (this.selectEleFormula.length > 0) {
+        // 如果删除的是最后一个元素，选中前一个
+        this.curSeleEleIndex = Math.min(
+          indexToDelete, 
+          this.selectEleFormula.length - 1
+        );
+          const keyParts =  this.selectEleFormula[this.curSeleEleIndex].tableElementKey.split('key');
+            this.selectedTableKey = keyParts.length > 1 ? 'key'+keyParts[1] : null;
+        // 确保选中状态正确
+        this.selectEleFormula.forEach((item, idx) => {
+          item.selected = idx === this.curSeleEleIndex;
+        });
+      } else {
+        this.curSeleEleIndex = -1;
+        this.selectedTableKey = null;
+      }
+    },
+    checkDefaultSelection() {
+      const hasSelected = this.selectEleFormula.some(item => item.selected);
+      if (!hasSelected && this.selectEleFormula.length > 0) {
+        // 取消所有选中
+        this.selectEleFormula.forEach(item => {
+          item.selected = false;
+        });
+        
+        // 选中最后一个元素
+        const lastIndex = this.selectEleFormula.length - 1;
+        this.selectEleFormula[lastIndex].selected = true;
+        this.curSeleEleIndex = lastIndex;
+   
+      }
+    },
   },
 
 
@@ -2092,7 +2296,7 @@ export default {
 }
 
 .icon-box .el-link{
-  font-size: 24px;
+  font-size: 14px;
   margin-right: 10px;
 }
 </style>
@@ -2116,3 +2320,29 @@ export default {
         display: inline-block;
    }
 </style>
+<style scoped>
+.operation-symbol-box{
+  display: flex;
+  align-items: center;
+  border: 1px solid rgb(229, 231, 235);
+  background-color: #F9FAFB;
+  padding: 10px 10px;
+  border-radius:  5px 5px 0px 0px;
+  margin-top: 10px;
+  
+}
+.sele-ele-box1{
+  padding: 10px;
+  border: 1px solid rgb(229, 231, 235);
+  border-radius: 0px 0px 5px 5px;
+
+  height: 50px;
+}
+.text-sm{
+  font-size: 14px;
+  margin-right: 10px;
+}
+.icon-box .el-icon {
+  font-size: 12px !important; /* 更小的尺寸，按需修改 */
+}
+</style>