公式

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

@@ -124,6 +124,10 @@
                     cursor: pointer;
                     padding: 0 3px;
                     user-select: none;
+                    font-size: 14px;
+                    &.is-Operator, &.is-Brackets {
+                        font-size: 16px;
+                    }
                     &.is-cur {
                         color: #f0720a;
                     }

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

@@ -107,9 +107,9 @@
                                     </div>
                                 </div>
                                 <div class="input-box">
-                                    <draggable v-model="selectEleFormula" item-key="id">
-                                        <template v-for="(item, index) in selectEleFormula" :key="item.id">
-                                            <span class="element-class text-14px" :class="item.selected ? 'is-cur' : ''" @click="selectEleFormulaItem(item, index)">{{ item.name }}</span>
+                                    <draggable v-model="selectEleFormula" item-key="index">
+                                        <template #item="{ element }">
+                                            <span class="element-class" :class="[`is-${element.type}`, element.selected ? 'is-cur' : '']" @click="selectEleFormulaItem(element)">{{ element.name }}</span>
                                         </template>
                                     </draggable>
                                 </div>
@@ -129,8 +129,12 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue'
 import { useClick } from 'hc-vue3-ui'
+import { ElMessageBox } from 'element-plus'
+import {
+    arrIndex, deepClone, getArrValue,
+    getObjValue, getRandom, isNullES,
+} from 'js-fast-way'
 import draggable from 'vuedraggable'
-import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import mainApi from '~api/project/formula'
 import eleApi from '~api/project/element'
 import treeApi from '~api/wbs/tree'
@@ -163,6 +167,7 @@ watch(isShow, (val) => {
 })
 
 //基础变量
+const symbolReg = /(\+|-|\*|\/)（.+）/ //加减乘除
 const operatorReg = /^\+|-|\*|%/ //加减乘除
 const startFCRegExp = /^FC\.([a-zA-Z\d]+)\(/ //匹配开始的FC.xxx(
 const isScrollBar = ref(true)
@@ -185,9 +190,9 @@ const setDeviationRange = () => {
 }
 
 //获取顶部菜单数据
+const formulaMenuMap = ref({})
 const formulaMenuIndex = ref(null)
 const formulaMenuList = ref({})
-const formulaMenuMap = ref({})
 const getTypeMapApi = async () => {
     const { data } = await mainApi.getTypeMap()
     const res = getObjValue(data)
@@ -350,7 +355,6 @@ const resetFunEleTagClick = (item) => {
         return
     }
     if (arr.length === 0 || ['Operator', 'Brackets'].includes(type) || name === '(') {
-        //元素
         if (!isNullES(item.tableElementKey)) {
             selectEleFormula.value.push({
                 type: 'Element',
@@ -358,6 +362,7 @@ const resetFunEleTagClick = (item) => {
                 id: item.id,
                 selected: false,
                 tableElementKey: item.tableElementKey,
+                index: getRandom(5),
                 children: [],
             })
         }
@@ -366,40 +371,128 @@ const resetFunEleTagClick = (item) => {
     }
 }
 
-//重置函数 输入值
-const resetFunText = () => {
+//输入弹窗
+const promptMessageBox = async () => {
+    return new Promise(resolve => {
+        ElMessageBox.prompt('', '请输入值', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            inputErrorMessage: '请输入内容',
+            inputValidator: (value) => {
+                return !isNullES(value)
+            },
+        }).then(({ value }) => {
+            resolve(value)
+        }).catch(() => {
+            resolve()
+        })
+    })
+}
 
+//重置函数 输入值
+const resetFunText = async () => {
+    const val = await promptMessageBox()
+    if (isNullES(val)) return
+    const arr = selectEleFormula.value
+    if (arr.length > 0) {
+        let { type, name } = getObjValue(arr[arr.length - 1])
+        if (type === 'Element') {
+            window?.$message.warning('输入值无法连续出现在元素后面')
+            return
+        }
+        if (type === 'Text') {
+            window?.$message.warning('输入值无法连续出现在输入值后面')
+            return
+        }
+        if (type === 'Brackets' && name === ')') {
+            window?.$message.warning('输入值无法连续出现在右括号后面')
+            return
+        }
+    }
+    selectEleFormula.value.push({
+        type: 'Text',
+        name: val,
+        selected: false,
+        index: getRandom(5),
+    })
 }
 
 //重置函数 括号
 const resetFunBrackets = (val) => {
-    console.log(val)
+    selectEleFormula.value.push({
+        type: 'Brackets',
+        name: val,
+        selected: false,
+        index: getRandom(5),
+    })
 }
 
 //重置函数 运算符
 const resetFunOperator = (val) => {
-    console.log(val)
+    const arr = selectEleFormula.value, map = formulaMenuMap.value
+    if (arr.length <= 0) {
+        window?.$message.warning('公式开头不能是运算符号')
+        return
+    }
+    let { type, name } = getObjValue(arr[arr.length - 1])
+    if (type === 'Operator') {
+        window?.$message.warning('运算符号无法连续出现在运算符号后面')
+        return
+    }
+    if (type === 'Brackets' && name === '(') {
+        window?.$message.warning('运算符号无法连续出现在左括号后面')
+        return
+    }
+    const obj = getObjValue(map[val])
+    selectEleFormula.value.push({
+        type: 'Operator',
+        name: symbolReg.exec(obj.name)[1],
+        selected: false,
+        template: obj.template,
+        index: getRandom(5),
+    })
 }
 
 //重置函数 删除
 const resetFunDel = () => {
-
+    const arr = deepClone(selectEleFormula.value)
+    if (arr.length <= 0) {
+        window?.$message.warning('请先添加相关元素')
+        return
+    }
+    const index = arrIndex(arr, 'selected', true)
+    if (index !== -1) {
+        arr.splice(index, 1)
+        selectEleFormula.value = arr
+    } else {
+        arr.splice(arr.length - 1, 1)
+        selectEleFormula.value = arr
+    }
 }
 
 //重置函数 清空
 const resetFunClear = () => {
-
+    selectEleFormula.value = []
 }
 
 //被点击
-const selectEleFormulaItem = (item, index) => {
-    item.selected = !item.selected
+const selectEleFormulaItem = (item) => {
+    const arr = selectEleFormula.value
+    for (let i = 0; i < arr.length; i++) {
+        if (item.index === arr[i].index) {
+            arr[i].selected = !arr[i].selected
+        } else {
+            arr[i].selected = false
+        }
+    }
+    selectEleFormula.value = arr
 }
 
 //保存
 const submitLoading = ref(false)
 const submitClick = async () => {
-
+    const arr = selectEleFormula.value
+    console.log(arr)
 }
 
 //关闭抽屉
@@ -407,6 +500,7 @@ const drawerClose = () => {
     isShow.value = false
     isResetFun.value = false
     isScrollBar.value = true
+    selectEleFormula.value = []
     emit('close')
 }
 </script>