项目

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

@@ -1,5 +1,8 @@
 .el-overlay .el-drawer.hc-project-list-edit-formula-drawer {
     background-color: #F1F5F8;
+    .hc-project-list-edit-formula-card {
+        position: relative;
+    }
     .border-dashed-card {
         border: 1px dashed #bbbbbb;
         border-radius: 6px;
@@ -50,4 +53,11 @@
             }
         }
     }
+    .hc-formula-reset-fun {
+        position: relative;
+    }
+    //没有滚动条，拉满
+    .hc-project-list-edit-formula-card.is-no-scroll {
+
+    }
 }

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

@@ -1,47 +1,52 @@
 <template>
     <hc-drawer v-model="isShow" ui="hc-project-list-edit-formula-drawer" to-id="hc-layout-box" is-close @close="drawerClose">
-        <hc-card is-action-btn>
-            <div class="hc-formula-card-box border-dashed-card hc-flex mb-14px h-58px">
-                <div class="retain hc-flex h-full w-174px">
-                    <el-checkbox v-model="isRetain" size="large" />
-                    <span class="ml-5px text-14px">保留</span>
-                    <div class="relative ml-5px w-90px">
-                        <el-input-number v-model="retainNum" block :step="1" :min="0" :max="5" :disabled="!isRetain" controls-position="right" />
+        <hc-card is-action-btn :scrollbar="isScrollBar">
+            <div class="hc-project-list-edit-formula-card" :class="isScrollBar ? '' : 'is-no-scroll'">
+                <div class="hc-formula-card-box border-dashed-card hc-flex mb-14px h-58px">
+                    <div class="retain hc-flex h-full w-174px">
+                        <el-checkbox v-model="isRetain" size="large" />
+                        <span class="ml-5px text-14px">保留</span>
+                        <div class="relative ml-5px w-90px">
+                            <el-input-number v-model="retainNum" block :step="1" :min="0" :max="5" :disabled="!isRetain" controls-position="right" />
+                        </div>
+                        <span class="ml-5px text-14px">位</span>
+                    </div>
+                    <div class="range hc-flex h-full w-155px">
+                        <el-button :type="deviationRangeShow ? 'primary' : ''" @click="setDeviationRange">允许偏差值范围</el-button>
+                    </div>
+                    <div class="menu h-full flex-1">
+                        <hc-body padding="0">
+                            <el-menu :default-active="formulaMenuIndex" mode="horizontal" @select="handleFormulaMenu">
+                                <el-sub-menu v-for="(arr, key, index) in formulaMenuList" :key="key" :index="key">
+                                    <template #title>{{ key }}</template>
+                                    <el-menu-item v-for="(item, i) in arr" :key="i" :index="`${index + 1}-${i + 1}`">{{ item?.name }}</el-menu-item>
+                                </el-sub-menu>
+                            </el-menu>
+                        </hc-body>
+                    </div>
+                    <div class="hand hc-flex h-full w-100px">
+                        <el-button>手写模式</el-button>
                     </div>
-                    <span class="ml-5px text-14px">位</span>
-                </div>
-                <div class="range hc-flex h-full w-155px">
-                    <el-button :type="deviationRangeShow ? 'primary' : ''" @click="setDeviationRange">允许偏差值范围</el-button>
-                </div>
-                <div class="menu h-full flex-1">
-                    <hc-body padding="0">
-                        <el-menu :default-active="formulaMenuIndex" mode="horizontal" @select="handleFormulaMenu">
-                            <el-sub-menu v-for="(arr, key, index) in formulaMenuList" :key="key" :index="key">
-                                <template #title>{{ key }}</template>
-                                <el-menu-item v-for="(item, i) in arr" :key="i" :index="`${index + 1}-${i + 1}`">{{ item?.name }}</el-menu-item>
-                            </el-sub-menu>
-                        </el-menu>
-                    </hc-body>
-                </div>
-                <div class="hand hc-flex h-full w-100px">
-                    <el-button>手写模式</el-button>
                 </div>
-            </div>
-            <div class="hc-formula-card-math border-dashed-card mb-14px">
-                <div class="header hc-flex">
-                    <div class="name flex-1 text-14px">函数公式.</div>
-                    <div class="extra relative ml-24px">
-                        <el-button type="info" size="small">重置函数</el-button>
+                <div class="hc-formula-card-math border-dashed-card mb-14px">
+                    <div class="header hc-flex">
+                        <div class="name flex-1 text-14px">函数公式.</div>
+                        <div class="extra relative ml-24px">
+                            <el-button :type="isResetFun ? 'primary' : 'info'" size="small" @click="resetFunClick">重置函数</el-button>
+                        </div>
+                    </div>
+                    <div class="body relative">
+                        <template v-for="(item, index) in resultFormula" :key="index">
+                            <span class="element-class text-26px" :class="item.selected ? 'is-cur' : ''" @click="resultFormulaItem(item, index)">{{ item.name }}</span>
+                        </template>
+                        <span class="ml-10px mr-10px text-26px">=</span>
                     </div>
                 </div>
-                <div class="body relative">
-                    <template v-for="(item, index) in resultFormula" :key="index">
-                        <span class="element-class text-26px" :class="item.selected ? 'is-cur' : ''" @click="resultFormulaItem(item, index)">{{ item.name }}</span>
-                    </template>
-                    <span class="ml-10px mr-10px text-26px">=</span>
+                <!-- 重置函数 -->
+                <div class="hc-formula-reset-fun border-dashed-card">
+                    1111
                 </div>
             </div>
-            1111
             <template #action>
                 <el-button @click="drawerClose">取消</el-button>
                 <el-button type="primary" :loading="submitLoading" @click="submitClick">保存</el-button>
@@ -85,6 +90,7 @@ watch(isShow, (val) => {
 //基础变量
 const operatorReg = /^\+|-|\*|%/ //加减乘除
 const startFCRegExp = /^FC\.([a-zA-Z\d]+)\(/ //匹配开始的FC.xxx(
+const isScrollBar = ref(false)
 
 //获取数据
 const getDataApi = async () => {
@@ -156,6 +162,13 @@ const resultFormulaItem = (item, index) => {
     console.log(item, index)
 }
 
+//是否重置函数
+const isResetFun = ref(false)
+const resetFunClick = () => {
+    isResetFun.value = !isResetFun.value
+    isScrollBar.value = !isResetFun.value
+}
+
 
 //保存
 const submitLoading = ref(false)