公式

src/styles/view/project/edit-formula.scss

@@ -247,5 +247,45 @@
                 }
             }
         }
+        .hc-formula-card-range-select {
+            .hc-div-new-card-box.hc-formula-card-range-select-left-card,
+            .hc-div-new-card-box.hc-formula-card-range-select-right-card {
+                border: 1px solid #bbbbbb;
+                border-radius: 6px;
+                .el-card.hc-card-box.hc-new-card-box {
+                    --el-card-border-radius: 6px;
+                    --el-card-bg-color: transparent;
+                    box-shadow: none;
+                }
+            }
+            .hc-div-new-card-box.hc-formula-card-range-select-left-card .el-scrollbar__bar.is-vertical {
+                right: -8px;
+            }
+            .hc-div-new-card-box.hc-formula-card-range-select-right-card .body {
+                position: relative;
+                .el-button {
+                    margin-right: 10px;
+                    margin-bottom: 10px;
+                }
+                .el-button + .el-button {
+                    margin-left: 0;
+                }
+            }
+        }
+        &.is-h {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            .hc-formula-card-range-form {
+                flex-shrink: 0;
+            }
+            .hc-formula-card-range-param {
+                flex-shrink: 0;
+            }
+            .hc-formula-card-range-select {
+                position: relative;
+                flex: 1;
+            }
+        }
     }
 }

src/views/project/list/edit-formula.vue

@@ -139,8 +139,8 @@
                     </div>
                 </div>
                 <!-- 允许偏差值范围 -->
-                <div v-if="deviationRangeShow && !isResetFun" class="border-dashed-card hc-formula-card-range mb-14px">
-                    <div class="hc-flex mb-12px text-14px">
+                <div v-if="deviationRangeShow && !isResetFun" class="border-dashed-card hc-formula-card-range mb-14px" :class="isRangeSelectEle ? 'is-h' : ''">
+                    <div class="hc-formula-card-range-form hc-flex mb-12px text-14px">
                         <div>允许偏差值范围：</div>
                         <div class="w-130px">
                             <el-select v-model="deviationRangeSymbol" filterable clearable placeholder="请选择允许偏差值范围">
@@ -170,9 +170,9 @@
                                 @before-adding-tag="rangeAddingTag"
                             />
                         </div>
-                        <el-button type="info">选择参数</el-button>
+                        <el-button :type="isRangeSelectEle ? 'primary' : 'info'" @click="deviationRangeSelectEle">选择参数</el-button>
                     </div>
-                    <div v-if="deviationRangeResult === '2'" class="relative mb-12px">
+                    <div v-if="deviationRangeResult === '2'" class="hc-formula-card-range-param relative mb-12px">
                         <el-row :gutter="20">
                             <el-col v-if="!(deviationRangeSymbol === '<' || deviationRangeSymbol === '≤')" :span="12">
                                 <div class="deviation-range-param-card" :class="curRangeFocusIndex === 3 ? 'cur' : ''" @click.capture="curRangeFocusIndex = 3">
@@ -276,7 +276,37 @@
                             </el-col>
                         </el-row>
                     </div>
-                    允许偏差值范围
+                    <div v-if="isRangeSelectEle" class="hc-formula-card-range-select relative">
+                        <hc-body split padding="0">
+                            <template #left>
+                                <hc-card class="hc-formula-card-range-select-left-card" scrollbar :loading="treeResetFunLoading">
+                                    <template #header>
+                                        <hc-search-input v-model="resetFunTree" @search="resetFunTreeSearch" />
+                                    </template>
+                                    <el-tree
+                                        v-if="isResetFunTreeLazy" ref="treeRangeSelectLazyRef" :default-expanded-keys="treeResetFunLazyExpanded" node-key="id"
+                                        :props="defaultProps" :expand-on-click-node="false" lazy highlight-current :load="treeResetFunLazyLoad"
+                                        @node-click="treeResetFunLazyClick"
+                                    />
+                                    <el-tree
+                                        v-else ref="treeRangeSelectAllRef" :data="resetFunTreeAll" :props="defaultProps" node-key="id"
+                                        :expand-on-click-node="false" @node-click="treeResetFunLazyClick"
+                                    />
+                                </hc-card>
+                            </template>
+                            <hc-card scrollbar class="hc-formula-card-range-select-right-card">
+                                <template #header>
+                                    <hc-search-input v-model="resetFunEle" placeholder="请输入你想搜索的元素字段" @search="resetFunEleSearch" />
+                                </template>
+                                <div v-loading="isResetFunEleLoading" class="body h-full">
+                                    <template v-for="(item, index) in resetFunEleData" :key="index">
+                                        <el-button v-if="item.k" type="primary" plain size="small" @click="resetFunEleTagClick(item)">{{ item.name }}</el-button>
+                                        <el-button v-else type="primary" plain size="small" @click="resetFunEleTagClick(item)">{{ item.eName }}</el-button>
+                                    </template>
+                                </div>
+                            </hc-card>
+                        </hc-body>
+                    </div>
                 </div>
             </div>
             <template #action>
@@ -475,7 +505,9 @@ const defaultProps = {
 
 //重置函数懒加载树
 const treeResetFunLazyRef = ref(null)
+const treeRangeSelectLazyRef = ref(null)
 const treeResetFunAllRef = ref(null)
+const treeRangeSelectAllRef = ref(null)
 const treeResetFunLazyExpanded = ref([])
 
 //获取重置函数懒加载树的数据
@@ -510,6 +542,7 @@ const treeResetFunLazyLoad = async (node, resolve) => {
             const paramsId = treeNode.initTableId
             if (!isNullES(paramsId)) {
                 treeResetFunLazyRef.value?.setCurrentKey(paramsId)
+                treeRangeSelectLazyRef.value?.setCurrentKey(paramsId)
             }
         } catch { /* empty */ }
         //获取节点详情
@@ -1021,6 +1054,13 @@ const rangeAddingTag = () => {
     console.log('原来的版本就啥也没做')
 }
 
+//选择参数
+const isRangeSelectEle = ref(false)
+const deviationRangeSelectEle = () => {
+    const val = !isRangeSelectEle.value
+    isRangeSelectEle.value = val
+    isScrollBar.value = !val
+}
 
 //保存
 const submitLoading = ref(false)