分类别

src/styles/orangeTheme.scss

@@ -18,6 +18,11 @@
 .el-tabs__active-bar {
   background-color: $theme-color !important;
 }
+.el-tabs__new-tab {
+  background: $theme-color !important;
+  color: #FFF !important;
+  border-color: $theme-color;
+}
 
 // 分页
 .el-pagination.is-background .el-pager li:not(.disabled) {
@@ -35,11 +40,13 @@
   border-color: $theme-color;
 }
 
+// 下拉菜单
 .el-dropdown-menu__item:not(.is-disabled):hover {
   background-color: lighten($theme-color, 38%);
   color: $theme-color;
 }
 
+
 // 定义主题颜色（仿照 Element UI）
 $orange-color: $theme-color;
 $theme-colors: (

src/views/salary/solution/salarySolution/salarySolutionRules.vue

@@ -5,14 +5,18 @@
         <el-tag color="primary">{{ itemData.title }}</el-tag>
       </el-form-item>
       <el-form-item label="类型">
-        <el-tabs v-model="editableTabsValue" type="card" editable @edit="onTabsEdit">
+        <el-tabs v-model="editableTabsValue" addable type="card" @edit="onTabsEdit">
           <el-tab-pane
             v-for="tab in editableTabs"
             :key="tab.name"
             :label="tab.label"
             :name="tab.name"
+            :closable="editableTabs.length > 1"
           >
-            <SalarySolutionRulesEdit :formula="formula"></SalarySolutionRulesEdit>
+            <div class="text-right mb-3">
+              <m-button size="small" type="orange" >编辑分类名称</m-button>
+            </div>
+            <SalarySolutionRulesEdit></SalarySolutionRulesEdit>
           </el-tab-pane>
         </el-tabs>
       </el-form-item>
@@ -36,23 +40,12 @@ export default {
   },
   data () {
     return {
-      editableTabsValue: 1,
+      editableTabsValue: '1',
+      ids: 1,
       editableTabs: [
-        { label: '分类1', name: 1, content: null }
+        { label: '分类1', name: '1', content: null }
       ],
-      formula: [
-        {
-          uuid: '1',
-          content: null
-        }
-      ],
-      // headers: [
-      //   { label: '启用', prop: 'status', width: 80 },
-      //   { label: '参数名称', prop: 'name', align: 'left' },
-      //   { label: '数值', prop: 'value' }
-      // ],
       itemData: {},
-      // options: [],
       loading: false,
       categories: [], // 所有分类
       allParams: [], // 所有参数
@@ -61,22 +54,6 @@ export default {
       paramsSelection: [] // 已选参数
     }
   },
-  computed: {
-    gridData () {
-      const _allParams = Object.values(this.paramsCategoryItems).flat()
-      if (_allParams.length === 0) {
-        return []
-      }
-      return this.paramsSelection.map(e => {
-        const item = _allParams.find(item => item.name === e)
-        return {
-          name: item.name,
-          value: item.value ?? 0,
-          category: item.category
-        }
-      })
-    }
-  },
   methods: {
     open (item) {
       this.itemData = item
@@ -97,13 +74,13 @@ export default {
           const { data: detail } = await getSolutionDetails({
             performanceSolutionId: item.performanceSolutionId
           })
-          if (!detail.calculateFormulas.length) {
-            this.formula = [
-              { uuid: '1', content: null, sort: null }
-            ]
-          } else {
-            this.formula = detail.calculateFormulas
-          }
+          // if (!detail.calculateFormulas.length) {
+          //   this.formula = [
+          //     { uuid: '1', content: null, sort: null }
+          //   ]
+          // } else {
+          //   this.formula = detail.calculateFormulas
+          // }
           this.paramsSelection = detail.calculateConfigurations.map(e => e.name)
 
           // 根据分类获取参数列表
@@ -126,6 +103,29 @@ export default {
         }
       })
     },
+    onTabsEdit (targetName, action) {
+      if (action === 'add') {
+        this.ids++
+        this.editableTabs.push(
+          { label: '分类' + this.ids, name: String(this.ids), content: null }
+        )
+      }
+      if (action === 'remove') {
+        if (this.editableTabs.length === 1) {
+          this.$message.error('至少保留一个分类')
+          return
+        }
+        const index = this.editableTabs.findIndex(tab => tab.name === targetName)
+        this.editableTabs.splice(index, 1)
+        if (index === 0) {
+          this.editableTabsValue = this.editableTabs[0].name
+          return
+        }
+        if (targetName === this.editableTabsValue) {
+          this.editableTabsValue = this.editableTabs[index - 1].name
+        }
+      }
+    },
     async onSure () {
       if (this.paramsSelection.length === 0) {
         this.$message.error('请选择参数')
@@ -151,7 +151,7 @@ export default {
           entity: {
             performanceSolutionId: this.itemData.performanceSolutionId
           },
-          calculateConfigurations: this.gridData,
+          calculateConfigurations: [],
           calculateFormulas
         })
         this.$refs.dialog.close()
@@ -160,23 +160,11 @@ export default {
       } catch (error) {
         this.$message.error(error)
       }
-    },
-    onTabsEdit (targetName, action) {
-
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-tree-node__content {
-  height: 40px;
-}
-.text-gray {
-  color: grey;
-}
-.tools {
-  display: flex;
-  justify-content: flex-end;
-}
+
 </style>

src/views/salary/solution/salarySolution/salarySolutionRulesEdit.vue

@@ -90,18 +90,15 @@
 <script>
 export default {
   name: 'salarySolutionRulesEdit',
-  props: {
-    formula: {
-      type: Array,
-      default: () => []
-    }
-  },
   data () {
     return {
       formQuery: {
         items: []
       },
-      formulaData: [],
+      formulaData: [{
+        uuid: '1',
+        content: null
+      }],
       btnList: [
         { label: '同级追加', click: this.onInsertAfter },
         { label: '插入下一级', click: this.onAppend },
@@ -109,15 +106,6 @@ export default {
       ]
     }
   },
-  watch: {
-    formula: {
-      handler (val) {
-        this.formulaData = [...val]
-      },
-      immediate: true,
-      deep: true
-    }
-  },
   methods: {
     onAdd () {
       this.formQuery.items.push({ label: null, value: 0 })
@@ -152,5 +140,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+::v-deep .el-tree-node__content {
+  height: 40px;
+}
 </style>