项目

src/api/modules/project/formula.js

@@ -0,0 +1,32 @@
+import { HcApi } from '../../request/index'
+
+export default {
+    async getTypeMap(form) {
+        return HcApi({
+            url: '/api/blade-manager/fb/getTypeMap',
+            method: 'get',
+            params: form,
+        })
+    },
+    async detail(form) {
+        return HcApi({
+            url: '/api/blade-manager/formula/detail',
+            method: 'get',
+            params: form,
+        })
+    },
+    async save(form) {
+        return HcApi({
+            url: '/api/blade-manager/formula/save',
+            method: 'post',
+            data: form,
+        })
+    },
+    async update(form) {
+        return HcApi({
+            url: '/api/blade-manager/formula/update',
+            method: 'post',
+            data: form,
+        })
+    },
+}

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

@@ -1,6 +1,30 @@
 <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 hc-flex mb-14px">
+                <div class="retain hc-flex w-194px">
+                    <el-checkbox v-model="isRetain" size="large" />
+                    <span class="ml-5px text-14px">保留</span>
+                    <div class="relative ml-5px w-110px">
+                        <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 w-155px">
+                    <el-button>允许偏差值范围</el-button>
+                </div>
+                <div class="menu flex-1">
+                    <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>
+                </div>
+                <div class="hand w-100px">
+                    <el-button>手写模式</el-button>
+                </div>
+            </div>
             1111
             <template #action>
                 <el-button @click="drawerClose">取消</el-button>
@@ -12,7 +36,8 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { getObjValue } from 'js-fast-way'
+import { deepClone, getObjValue } from 'js-fast-way'
+import mainApi from '~api/project/formula'
 
 const props = defineProps({
     data: {
@@ -40,11 +65,50 @@ watch(isShow, (val) => {
     if (val) getDataApi()
 })
 
+//基础变量
+const operatorReg = /^\+|-|\*|%/ //加减乘除
+const startFCRegExp = /^FC\.([a-zA-Z\d]+)\(/ //匹配开始的FC.xxx(
+
 //获取数据
 const getDataApi = async () => {
     console.log(dataInfo.value)
+    getTypeMapApi()
+}
+
+//保留位数
+const isRetain = ref(false)
+const retainNum = ref(2)
+
+//获取顶部菜单数据
+const formulaMenuIndex = ref(null)
+const formulaMenuList = ref({})
+const formulaMenuMap = ref({})
+const getTypeMapApi = async () => {
+    const { data } = await mainApi.getTypeMap()
+    const res = getObjValue(data)
+    formulaMenuList.value = deepClone(res)
+    //生成map，方便查找
+    for (let key in res) {
+        if (typeof(res[key]) === 'object') {
+            res[key].forEach((formula)=>{
+                formula.template = JSON.parse(formula.template)
+                if (operatorReg.test(formula.template.ft)) {
+                    formulaMenuMap.value[formula.template.ft] = formula
+                } else if (startFCRegExp.test(formula.template.ft)) {
+                    let regRes = formula.template.ft.match(startFCRegExp)
+                    formulaMenuMap.value[regRes[0]] = formula
+                }
+            })
+        }
+    }
 }
 
+//菜单被选择
+const handleFormulaMenu = (index, path) => {
+    console.log(index, path)
+}
+
+
 //保存
 const submitLoading = ref(false)
 const submitClick = async () => {
@@ -61,5 +125,35 @@ const drawerClose = () => {
 <style lang="scss">
 .el-overlay .el-drawer.hc-project-list-edit-formula-drawer {
     background-color: #F1F5F8;
+    .hc-formula-card-box {
+        border: 1px dashed #bbbbbb;
+        border-radius: 6px;
+        padding: 8px 12px;
+        .retain {
+            padding-right: 12px;
+            border-right: 1px dashed #bbbbbb;
+        }
+        .range {
+            position: relative;
+            padding: 0 12px;
+            border-right: 1px dashed #bbbbbb;
+        }
+        .menu {
+            position: relative;
+            padding: 0 12px;
+            border-right: 1px dashed #bbbbbb;
+            .el-menu {
+                --el-menu-text-color: #838383;
+                --el-menu-item-height: 36px;
+                --el-menu-horizontal-height: 36px;
+                --el-menu-base-level-padding: 14px;
+                border-bottom: 0;
+            }
+        }
+        .hand {
+            position: relative;
+            padding-left: 12px;
+        }
+    }
 }
 </style>