chore: update

src/assets/styles/rule.scss

@@ -3,8 +3,8 @@
 }
 .rule-and-or {
   position: relative;
-  min-width: 30px;
-  min-height: 40px;
+  min-width: 40px;
+  min-height: 30px;
   &::before {
     content: ' ';
     position: absolute;
@@ -23,7 +23,7 @@
     width: 24px;
     height: 24px;
     line-height: 24px;
-    color: #00b2a6;
+    color: var(--main-color);
     background: #fff;
     text-align: center;
     border: 1px solid #d4dbe1;
@@ -31,6 +31,18 @@
     cursor: pointer;
   }
 }
-.rule-right {
+.rule-attr-list {
   flex: 1;
 }
+.rule-attr {
+  display: flex;
+}
+.rule-attr + .rule-attr {
+  margin-top: 10px;
+}
+.rule-attr-content {
+  flex: 1;
+}
+.rule-attr-tools {
+  width: 140px;
+}

src/components/rule/UserRule.vue

 <script setup lang="ts">
 import type { UserAttrRule } from '@/types'
 import { UserFilled, Plus } from '@element-plus/icons-vue'
-import RuleGroup from './UserRuleGroup.vue'
+import UserRuleGroup from './UserRuleGroup.vue'
 
-const rule = ref<UserAttrRule>({
-  items: [
-    {
-      attr_id: '属性ID',
-      attr: '属性',
-      attr_name: '属性名称',
-      attr_type: 1,
-      operate: '操作',
-      operate_name: '操作名称',
-      value: '值'
-    }
-  ],
-  current_logic_operate: 'and'
-})
+const rules = ref<UserAttrRule[]>([
+  {
+    items: [
+      {
+        attr_id: '属性ID',
+        attr: '属性',
+        attr_name: '属性名称',
+        attr_type: 1,
+        operate: '操作',
+        operate_name: '操作名称',
+        value: '值'
+      }
+    ],
+    current_logic_operate: 'and'
+  }
+])
 
-function handleChange(data: UserAttrRule) {
-  rule.value = data
+function handleChange(data: UserAttrRule, index: number) {
+  rules.value[index] = data
+}
+
+// 添加条件
+function handleAdd() {
+  rules.value.push({
+    items: [{ attr_id: '', attr: '', attr_name: '', attr_type: 1, operate: '', operate_name: '', value: '' }],
+    current_logic_operate: 'and'
+  })
 }
 </script>
 
@@ -29,7 +39,10 @@ function handleChange(data: UserAttrRule) {
       <el-button circle color="#006df1" :icon="UserFilled"></el-button>
       用户属性满足以下条件</template
     >
-    <RuleGroup :data="rule" @update="handleChange"></RuleGroup>
-    <el-button text :icon="Plus">添加条件</el-button>
+    <UserRuleGroup
+      v-for="(item, index) in rules"
+      :data="item"
+      @update="data => handleChange(data, index)"></UserRuleGroup>
+    <el-button text :icon="Plus" @click="handleAdd" v-if="!rules.length">添加条件</el-button>
   </el-card>
 </template>

src/components/rule/UserRuleGroup.vue

 <script setup lang="ts">
 import type { UserAttrRule } from '@/types'
+import { Plus, CloseBold } from '@element-plus/icons-vue'
 
 interface Props {
   data: UserAttrRule
@@ -21,6 +22,28 @@ function toggleOperate() {
   update({ ...props.data, current_logic_operate: props.data.current_logic_operate === 'or' ? 'and' : 'or' })
 }
 
+// 新增
+function handleAdd(index: number) {
+  const items = props.data.items.slice()
+  items.splice(index, 0, {
+    attr_id: '',
+    attr: '',
+    attr_name: '',
+    attr_type: 1,
+    operate: '',
+    operate_name: '',
+    value: ''
+  })
+  update({ ...props.data, items })
+}
+
+// 删除
+function handleRemove(index: number) {
+  const items = props.data.items.slice()
+  items.splice(index, 1)
+  update({ ...props.data, items })
+}
+
 function update(data: UserAttrRule) {
   emit('update', data)
 }
@@ -31,14 +54,20 @@ function update(data: UserAttrRule) {
     <div class="rule-and-or">
       <span @click="toggleOperate">{{ andOrText }}</span>
     </div>
-    <div class="rule-item-wrap">
-      <div class="rule-item" v-for="item in data.items">
-        <el-select>
-          <el-option label="1" value="1"></el-option>
-        </el-select>
-        <el-select>
-          <el-option label="1" value="1"></el-option>
-        </el-select>
+    <div class="rule-attr-list">
+      <div class="rule-attr" v-for="(item, index) in data.items">
+        <div class="rule-attr-content">
+          <el-select style="width: 120px">
+            <el-option label="1" value="1"></el-option>
+          </el-select>
+          <el-select style="width: 120px">
+            <el-option label="1" value="1"></el-option>
+          </el-select>
+        </div>
+        <div class="rule-attr-tools">
+          <el-button text :icon="Plus" @click="handleAdd(index)">新增</el-button>
+          <el-button text :icon="CloseBold" @click="handleRemove(index)" v-if="index"></el-button>
+        </div>
       </div>
     </div>
   </div>