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

chore: update

上级 8ad8de5c
......@@ -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;
}
<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>
<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>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论