更新依赖

package.json

@@ -37,6 +37,7 @@
         "@iconify-json/ri": "^1.2.3",
         "@unocss/eslint-config": "^0.58.9",
         "@vitejs/plugin-vue": "^5.1.4",
+        "@vojtechlanka/vue-tags-input": "^3",
         "@vue/compiler-sfc": "^3.5.12",
         "archiver": "^7.0.1",
         "bignumber.js": "^9.1.2",

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

@@ -158,5 +158,86 @@
     //允许偏差值范围
     .hc-formula-card-range {
         position: relative;
+        .vue-tags-input .ti-input {
+            padding: 3px 4px;
+            border-radius: 4px;
+        }
+        .deviation-range-param-card {
+            position: relative;
+            border: 1px solid #c6c6c6;
+            border-radius: 3px;
+            .title-box {
+                position: relative;
+                background: #eee;
+                font-size: 16px;
+                padding: 6px 12px;
+                border-radius: 3px 3px 0 0;
+            }
+            .tag-box {
+                position: relative;
+                padding-bottom: 4px;
+                height: 40%;
+                .el-button {
+                    margin-right: 10px;
+                    margin-bottom: 10px;
+                }
+                .el-button + .el-button {
+                    margin-left: 0;
+                }
+            }
+            .action-box {
+                position: relative;
+                height: 36px;
+                padding: 0 6px;
+                background: #f5f5f5;
+                border: 1px solid #e9e9e9;
+                border-left: 0;
+                border-right: 0;
+                .left, .right {
+                    position: relative;
+                }
+                .btn {
+                    position: relative;
+                    cursor: pointer;
+                    color: #409EFF;
+                    padding: 1px 6px;
+                    border-radius: 2px;
+                    height: 22px;
+                    transition: color .2s, background-color .2s;
+                    .text {
+                        font-size: 14px;
+                    }
+                    .symbol {
+                        font-size: 12px;
+                    }
+                    i {
+                        display: inline-block;
+                        font-size: 20px;
+                    }
+                    &:hover {
+                        color: #007dfd;
+                        background: #dadadb;
+                    }
+                }
+            }
+            .input-box {
+                position: relative;
+                height: calc((100% - 40% ) - 36px);
+                padding: 8px;
+                font-size: 14px;
+                .element-class {
+                    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

@@ -140,6 +140,141 @@
                 </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>允许偏差值范围：</div>
+                        <div class="w-130px">
+                            <el-select v-model="deviationRangeSymbol" filterable clearable placeholder="请选择允许偏差值范围">
+                                <el-option label="【min,max】" value="【min,max】" />
+                                <el-option label=">" value=">" />
+                                <el-option label="<" value="<" />
+                                <el-option label="≥" value="≥" />
+                                <el-option label="≤" value="≤" />
+                            </el-select>
+                        </div>
+                        <div class="ml-50px">模式：</div>
+                        <div class="mr-50px w-100px">
+                            <el-select v-model="deviationRangeResult" filterable clearable placeholder="请选择模式">
+                                <el-option label="普通" value="1" />
+                                <el-option label="自定义" value="2" />
+                            </el-select>
+                        </div>
+                        <div v-if="deviationRangeResult === '1'" class="hc-flex mr-50px">
+                            <VueTagsInput
+                                v-if="!(deviationRangeSymbol === '<' || deviationRangeSymbol === '≤')" v-model="deviationRangeTag1" :tags="deviationRangeTags1"
+                                placeholder="输入/参数" class="mr-12px" @focus="curRangeFocusIndex = 1" @blur="deviationRangeBlur1"
+                                @before-adding-tag="rangeAddingTag"
+                            />
+                            <VueTagsInput
+                                v-if="!(deviationRangeSymbol === '>' || deviationRangeSymbol === '≥')" v-model="deviationRangeTag2" :tags="deviationRangeTags2"
+                                placeholder="输入/参数" @focus="curRangeFocusIndex = 2" @blur="deviationRangeBlur2" @before-adding-tag="rangeAddingTag"
+                            />
+                        </div>
+                        <el-button type="info">选择参数</el-button>
+                    </div>
+                    <div v-if="deviationRangeResult === '2'" class="relative mb-12px">
+                        <el-row :gutter="20">
+                            <el-col v-if="!(deviationRangeSymbol === '<' || deviationRangeSymbol === '≤')" :span="12">
+                                <div class="deviation-range-param-card">
+                                    <div class="title-box">参数1</div>
+                                    <div class="action-box hc-flex">
+                                        <div class="left hc-flex flex-1">
+                                            <div class="btn hc-flex-center" @click="resetFunText">
+                                                <span class="text">输入值</span>
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunBrackets('(')">
+                                                <span class="symbol">(</span>
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunBrackets(')')">
+                                                <span class="symbol">)</span>
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('+')">
+                                                <i class="i-ri-add-line" />
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('-')">
+                                                <i class="i-ri-subtract-line" />
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('*')">
+                                                <i class="i-ri-close-line" />
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('%')">
+                                                <hc-icon name="divide" />
+                                            </div>
+                                        </div>
+                                        <div class="right hc-flex">
+                                            <el-tooltip content="删除元素" placement="top-end">
+                                                <div class="btn hc-flex-center" @click="resetFunDel">
+                                                    <i class="i-ri-delete-back-2-line" />
+                                                </div>
+                                            </el-tooltip>
+                                            <el-tooltip content="清空所有" placement="top-end">
+                                                <div class="btn hc-flex-center" @click="resetFunClear">
+                                                    <i class="i-ri-delete-bin-3-line" />
+                                                </div>
+                                            </el-tooltip>
+                                        </div>
+                                    </div>
+                                    <div class="input-box">
+                                        <draggable v-if="selectEleFormula.length > 0" 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 v-else class="text-gray-5">请选择元素</div>
+                                    </div>
+                                </div>
+                            </el-col>
+                            <el-col v-if="!(deviationRangeSymbol === '>' || deviationRangeSymbol === '≥')" :span="12">
+                                <div class="deviation-range-param-card">
+                                    <div class="title-box">参数2</div>
+                                    <div class="action-box hc-flex">
+                                        <div class="left hc-flex flex-1">
+                                            <div class="btn hc-flex-center" @click="resetFunText">
+                                                <span class="text">输入值</span>
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunBrackets('(')">
+                                                <span class="symbol">(</span>
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunBrackets(')')">
+                                                <span class="symbol">)</span>
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('+')">
+                                                <i class="i-ri-add-line" />
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('-')">
+                                                <i class="i-ri-subtract-line" />
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('*')">
+                                                <i class="i-ri-close-line" />
+                                            </div>
+                                            <div class="btn hc-flex-center" @click="resetFunOperator('%')">
+                                                <hc-icon name="divide" />
+                                            </div>
+                                        </div>
+                                        <div class="right hc-flex">
+                                            <el-tooltip content="删除元素" placement="top-end">
+                                                <div class="btn hc-flex-center" @click="resetFunDel">
+                                                    <i class="i-ri-delete-back-2-line" />
+                                                </div>
+                                            </el-tooltip>
+                                            <el-tooltip content="清空所有" placement="top-end">
+                                                <div class="btn hc-flex-center" @click="resetFunClear">
+                                                    <i class="i-ri-delete-bin-3-line" />
+                                                </div>
+                                            </el-tooltip>
+                                        </div>
+                                    </div>
+                                    <div class="input-box">
+                                        <draggable v-if="selectEleFormula.length > 0" 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 v-else class="text-gray-5">请选择元素</div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </div>
                     允许偏差值范围
                 </div>
             </div>
@@ -159,6 +294,7 @@ import {
     getObjValue, getRandom, isNullES,
 } from 'js-fast-way'
 import { ElMessageBox } from 'element-plus'
+import { VueTagsInput } from '@vojtechlanka/vue-tags-input'
 import draggable from 'vuedraggable'
 
 //接口文件
@@ -177,7 +313,7 @@ const props = defineProps({
 })
 
 //事件
-const emit = defineEmits(['close', 'finish'])
+const emit = defineEmits(['close', 'finish', 'uncheck'])
 
 //双向绑定
 const isShow = defineModel('modelValue', {
@@ -663,22 +799,63 @@ const projectQueryClick = () => {
     console.log('原来就没做这个功能')
 }
 
+//允许偏差值范围
+const deviationRangeSymbol = ref('【min,max】')
+const deviationRangeResult = ref('1')
+
+//允许偏差值范围1
+const deviationRangeTag1 = ref('')
+const deviationRangeTags1 = ref([])
+const deviationRangeBlur1 = () => {
+    if (deviationRangeTag1.value) {
+        if (deviationRangeTag1.value && deviationRangeTags1.value[0]) {
+            emit('uncheck', deviationRangeTags1.value[0].id)
+        }
+        deviationRangeTags1.value = []
+    }
+}
+
+//允许偏差值范围2
+const deviationRangeTag2 = ref('')
+const deviationRangeTags2 = ref([])
+const deviationRangeBlur2 = () => {
+    if (deviationRangeTag2.value) {
+        if (deviationRangeTag2.value && deviationRangeTags2.value[0]) {
+            emit('uncheck', deviationRangeTags2.value[0].id)
+        }
+        deviationRangeTags2.value = []
+    }
+}
+
+//当前在哪个输入框
+const curRangeFocusIndex = ref(0)
+const rangeAddingTag = () => {
+    console.log('原来的版本就啥也没做')
+}
+
+
 //保存
 const submitLoading = ref(false)
 const submitClick = async () => {
-    //重置函数
     if (isResetFun.value) {
+        //重置函数
         setProcessFormula()
     }
 }
 
 //关闭抽屉
 const drawerClose = () => {
-    isShow.value = false
-    isResetFun.value = false
-    isScrollBar.value = true
-    selectEleFormula.value = []
-    emit('close')
+    if (isResetFun.value) {
+        //重置函数
+        isResetFun.value = false
+        isScrollBar.value = true
+    } else {
+        isShow.value = false
+        isResetFun.value = false
+        isScrollBar.value = true
+        selectEleFormula.value = []
+        emit('close')
+    }
 }
 </script>
 

vite.config.js

@@ -29,7 +29,7 @@ export default defineConfig({
             output: {
                 manualChunks(id) {
                     let libStr = `
-                    @vue,vue-router,pinia,hc-vue3-ui,js-fast-way,element-plus,
+                    @vue,vue-router,pinia,hc-vue3-ui,js-fast-way,element-plus, @vojtechlanka/vue-tags-input,
                     echarts,vuedraggable,split.js,nprogress,avue-plugin-ueditor,@smallwei/avue`
                     const libs = libStr.split(',')
                     if (id.includes('node_modules')) {

yarn.lock

@@ -1079,6 +1079,15 @@
   resolved "http://39.108.216.210:9000/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz#72b8b705cfce36b00b59af196195146e356500c4"
   integrity sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==
 
+"@vojtechlanka/vue-tags-input@^3":
+  version "3.1.1"
+  resolved "http://39.108.216.210:9000/@vojtechlanka/vue-tags-input/-/vue-tags-input-3.1.1.tgz#0fa2e4b49d44c39b1fd634d6cf0449c891c57450"
+  integrity sha512-GdREECH+k2pQCKdbHHh4/IxRXje3QQ8rXzXd9/6L1kzGYXqHlG1tbRoi1qC7enph67/g2nvGaZfpqLuuW+CX3g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    vue "3.x"
+    vuedraggable "^4.1.0"
+
 "@vue/compiler-core@3.5.12":
   version "3.5.12"
   resolved "http://39.108.216.210:9000/@vue/compiler-core/-/compiler-core-3.5.12.tgz#bd70b7dabd12b0b6f31bc53418ba3da77994c437"
@@ -3162,7 +3171,7 @@ vue-router@^4.4.5:
   dependencies:
     "@vue/devtools-api" "^6.6.4"
 
-vue@3.5.12:
+vue@3.5.12, vue@3.x:
   version "3.5.12"
   resolved "http://39.108.216.210:9000/vue/-/vue-3.5.12.tgz#e08421c601b3617ea2c9ef0413afcc747130b36c"
   integrity sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==