公式优化

src/views/rulesManagement/releaseRules/components/permitAdd.vue

@@ -282,11 +282,11 @@
                 v-model="row._paramSelect"
                 placeholder="选择参数"
                 size="mini"
-                style="width: 160px; margin-right: 8px"
+                style="width: 100px; margin-right: 8px; flex-shrink: 0"
                 @change="paramSelectChange($event, row)"
               >
                 <el-option
-                  v-for="item in getSelectOptionsByDetails()"
+                  v-for="item in getSelectOptionsByDetails(row.statisticsType)"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -298,7 +298,7 @@
                 v-model="row._opSelect"
                 placeholder="选择符号"
                 size="mini"
-                style="width: 120px"
+                style="width: 100px; flex-shrink: 0"
                 @change="opSelectChange($event, row)"
               >
                 <el-option
@@ -308,6 +308,19 @@
                   :value="op"
                 />
               </el-select>
+
+              <!-- 替换或者追加 -->
+              <el-select
+                v-if="row.activeIndex != undefined"
+                v-model="row._replaceOrAppend"
+                placeholder="选择"
+                size="mini"
+                style="width: 80px; margin-left: 8px; flex-shrink: 0"
+                @change="$set(row, '_replaceOrAppend', $event)"
+              >
+                <el-option label="追加" value="append" />
+                <el-option label="替换" value="replace" />
+              </el-select>
             </div>
 
             <!-- 已组装公式标签展示 -->
@@ -320,6 +333,8 @@
                 :key="index"
                 size="mini"
                 closable
+                :type="row.activeIndex === index ? 'primary' : 'info'"
+                @click="formulaPartsTagClick(index, row)"
                 @close="tagItemDelete(index, row)"
               >
                 {{ p }}
@@ -331,6 +346,7 @@
               v-if="row.formulaParts && row.formulaParts.length"
               :value="row.formulaParts.join('')"
               size="mini"
+              type="textarea"
               disabled
               placeholder="公式"
               style="margin-top: 6px"
@@ -578,7 +594,7 @@
             label: '计算公式',
             align: 'center',
             slot: 'formula',
-            minWidth: 220
+            minWidth: 300
           },
           {
             prop: 'defaultValue',
@@ -721,7 +737,7 @@
     data() {
       const formDateBase = {
         id: null,
-        classify: '10',
+        classify: null,
         deviceId: null,
         deviceName: '',
         frequencyUnit: 2,
@@ -1235,6 +1251,11 @@
           'yyyy-MM-dd HH:mm:ss'
         );
 
+        // details 根据下标添加 sortNum
+        body.details = body.details.map((item, index) => {
+          return { ...item, sortNum: index + 1 };
+        });
+
         return body;
       },
       // startDate 启用日期要大于当前时间
@@ -1476,9 +1497,11 @@
         }
       },
       // 基于详情返回selectOptions
-      getSelectOptionsByDetails() {
+      getSelectOptionsByDetails(statisticsType) {
         const paramTypeOptions = [];
-        for (const detail of this.formData.details) {
+        for (const detail of this.formData.details.filter(
+          (i) => i.statisticsType == statisticsType
+        )) {
           if (detail.paramType != 9 || !detail.paramType) {
             paramTypeOptions.push({
               value: detail.paramValue,
@@ -1491,20 +1514,57 @@
       paramSelectChange(val, row) {
         if (!val) return;
         row.formulaParts = row.formulaParts || [];
-        row.formulaParts.push(val);
+        if (row.activeIndex != undefined) {
+          if (!row._replaceOrAppend || row._replaceOrAppend === 'replace') {
+            row.formulaParts.splice(row.activeIndex, 1, val);
+          } else if (row._replaceOrAppend === 'append') {
+            row.formulaParts.splice(row.activeIndex + 1, 0, val);
+            // 追加后activeIndex后移一位
+            this.$set(row, 'activeIndex', row.activeIndex + 1);
+          }
+          // row.activeIndex = undefined;
+        } else {
+          row.formulaParts.push(val);
+        }
         row.formula = row.formulaParts.map((p) => `[${p}]`).join('');
         row._paramSelect = null;
       },
       opSelectChange(val, row) {
         if (!val) return;
         row.formulaParts = row.formulaParts || [];
-        row.formulaParts.push(val);
+        if (row.activeIndex != undefined) {
+          if (!row._replaceOrAppend || row._replaceOrAppend === 'replace') {
+            row.formulaParts.splice(row.activeIndex, 1, val);
+          } else if (row._replaceOrAppend === 'append') {
+            row.formulaParts.splice(row.activeIndex + 1, 0, val);
+            // 追加后activeIndex后移一位
+            this.$set(row, 'activeIndex', row.activeIndex + 1);
+          }
+          // row.activeIndex = undefined;
+        } else {
+          row.formulaParts.push(val);
+        }
         row.formula = row.formulaParts.map((p) => `[${p}]`).join('');
         row._opSelect = null;
       },
       tagItemDelete(index, row) {
+        if (this.type == 'detail') return;
         row.formulaParts.splice(index, 1);
         row.formula = row.formulaParts.map((p) => `[${p}]`).join('');
+      },
+      formulaPartsTagClick(index, row) {
+        if (this.type == 'detail') return;
+
+        if (!row._replaceOrAppend) {
+          // 默认追加
+          row._replaceOrAppend = 'append';
+        }
+
+        if (row.activeIndex && row.activeIndex === index) {
+          this.$set(row, 'activeIndex', undefined);
+        } else {
+          this.$set(row, 'activeIndex', index);
+        }
       }
     }
   };
@@ -1551,6 +1611,7 @@
     .formula-builder__selects {
       margin-bottom: 6px;
       display: flex;
+      flex-shrink: 0;
     }
   }
 </style>