提交 e68cd7e5 authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 8ad8de5c
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
} }
.rule-and-or { .rule-and-or {
position: relative; position: relative;
min-width: 30px; min-width: 40px;
min-height: 40px; min-height: 30px;
&::before { &::before {
content: ' '; content: ' ';
position: absolute; position: absolute;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
color: #00b2a6; color: var(--main-color);
background: #fff; background: #fff;
text-align: center; text-align: center;
border: 1px solid #d4dbe1; border: 1px solid #d4dbe1;
...@@ -31,6 +31,18 @@ ...@@ -31,6 +31,18 @@
cursor: pointer; cursor: pointer;
} }
} }
.rule-right { .rule-attr-list {
flex: 1; flex: 1;
} }
.rule-attr {
display: flex;
}
.rule-attr + .rule-attr {
margin-top: 10px;
}
.rule-attr-content {
flex: 1;
}
.rule-attr-tools {
width: 140px;
}
<script setup lang="ts"> <script setup lang="ts">
import type { UserAttrRule } from '@/types' import type { UserAttrRule } from '@/types'
import { UserFilled, Plus } from '@element-plus/icons-vue' import { UserFilled, Plus } from '@element-plus/icons-vue'
import RuleGroup from './UserRuleGroup.vue' import UserRuleGroup from './UserRuleGroup.vue'
const rule = ref<UserAttrRule>({ const rules = ref<UserAttrRule[]>([
items: [ {
{ items: [
attr_id: '属性ID', {
attr: '属性', attr_id: '属性ID',
attr_name: '属性名称', attr: '属性',
attr_type: 1, attr_name: '属性名称',
operate: '操作', attr_type: 1,
operate_name: '操作名称', operate: '操作',
value: '值' operate_name: '操作名称',
} value: '值'
], }
current_logic_operate: 'and' ],
}) current_logic_operate: 'and'
}
])
function handleChange(data: UserAttrRule) { function handleChange(data: UserAttrRule, index: number) {
rule.value = data 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> </script>
...@@ -29,7 +39,10 @@ function handleChange(data: UserAttrRule) { ...@@ -29,7 +39,10 @@ function handleChange(data: UserAttrRule) {
<el-button circle color="#006df1" :icon="UserFilled"></el-button> <el-button circle color="#006df1" :icon="UserFilled"></el-button>
用户属性满足以下条件</template 用户属性满足以下条件</template
> >
<RuleGroup :data="rule" @update="handleChange"></RuleGroup> <UserRuleGroup
<el-button text :icon="Plus">添加条件</el-button> 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> </el-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { UserAttrRule } from '@/types' import type { UserAttrRule } from '@/types'
import { Plus, CloseBold } from '@element-plus/icons-vue'
interface Props { interface Props {
data: UserAttrRule data: UserAttrRule
...@@ -21,6 +22,28 @@ function toggleOperate() { ...@@ -21,6 +22,28 @@ function toggleOperate() {
update({ ...props.data, current_logic_operate: props.data.current_logic_operate === 'or' ? 'and' : 'or' }) 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) { function update(data: UserAttrRule) {
emit('update', data) emit('update', data)
} }
...@@ -31,14 +54,20 @@ function update(data: UserAttrRule) { ...@@ -31,14 +54,20 @@ function update(data: UserAttrRule) {
<div class="rule-and-or"> <div class="rule-and-or">
<span @click="toggleOperate">{{ andOrText }}</span> <span @click="toggleOperate">{{ andOrText }}</span>
</div> </div>
<div class="rule-item-wrap"> <div class="rule-attr-list">
<div class="rule-item" v-for="item in data.items"> <div class="rule-attr" v-for="(item, index) in data.items">
<el-select> <div class="rule-attr-content">
<el-option label="1" value="1"></el-option> <el-select style="width: 120px">
</el-select> <el-option label="1" value="1"></el-option>
<el-select> </el-select>
<el-option label="1" value="1"></el-option> <el-select style="width: 120px">
</el-select> <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> </div>
</div> </div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论