Add File
This commit is contained in:
249
frontend/src/views/system/permission/auth-tree/AuthTree.vue
Normal file
249
frontend/src/views/system/permission/auth-tree/AuthTree.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<script lang="ts">
|
||||
import icon_down_outlined from '@/assets/svg/arrow-down.svg'
|
||||
import icon_close_outlined_w from '@/assets/svg/icon_close_outlined_12.svg'
|
||||
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||
export default {
|
||||
name: 'LogicRelation',
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { type PropType, computed, toRefs } from 'vue'
|
||||
import FilterFiled from './FilterFiled.vue'
|
||||
import type { Item } from './FilterFiled.vue'
|
||||
export type Logic = 'or' | 'and'
|
||||
export type Relation = {
|
||||
child?: Relation[]
|
||||
logic: Logic
|
||||
x: number
|
||||
} & Item
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
relationList: {
|
||||
type: Array as PropType<Relation[]>,
|
||||
default: () => [],
|
||||
},
|
||||
x: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
logic: {
|
||||
type: String as PropType<Logic>,
|
||||
default: 'or',
|
||||
},
|
||||
})
|
||||
|
||||
const marginLeft = computed(() => {
|
||||
return {
|
||||
marginLeft: props.x ? '20px' : 0,
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits([
|
||||
'addCondReal',
|
||||
'changeAndOrDfs',
|
||||
'update:logic',
|
||||
'removeRelationList',
|
||||
'del',
|
||||
])
|
||||
|
||||
const { relationList } = toRefs(props)
|
||||
|
||||
const handleCommand = (type: any) => {
|
||||
emits('update:logic', type)
|
||||
emits('changeAndOrDfs', type)
|
||||
}
|
||||
|
||||
const removeRelationList = (index: any) => {
|
||||
relationList.value.splice(index, 1)
|
||||
}
|
||||
const addCondReal = (type: any) => {
|
||||
emits('addCondReal', type, props.logic === 'or' ? 'and' : 'or')
|
||||
}
|
||||
const add = (type: any, child: any, logic: any) => {
|
||||
child.push(
|
||||
type === 'condition'
|
||||
? {
|
||||
field_id: '',
|
||||
value: '',
|
||||
enum_value: '',
|
||||
term: '',
|
||||
filter_type: 'logic',
|
||||
name: '',
|
||||
}
|
||||
: { child: [], logic }
|
||||
)
|
||||
}
|
||||
const del = (index: any, child: any) => {
|
||||
child.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="logic" :style="marginLeft">
|
||||
<div class="logic-left">
|
||||
<div class="operate-title">
|
||||
<span v-if="x" class="mrg-title">
|
||||
{{ logic === 'or' ? 'OR' : 'AND' }}
|
||||
</span>
|
||||
<el-dropdown v-else trigger="click" @command="handleCommand">
|
||||
<span class="mrg-title">
|
||||
{{ logic === 'or' ? 'OR' : 'AND' }}
|
||||
<el-icon size="12">
|
||||
<icon_down_outlined />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="and">AND</el-dropdown-item>
|
||||
<el-dropdown-item command="or">OR</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<span v-if="x" class="operate-icon">
|
||||
<el-icon size="12" @click="emits('removeRelationList')">
|
||||
<icon_close_outlined_w />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="logic-right">
|
||||
<template v-for="(item, index) in relationList" :key="index">
|
||||
<logic-relation
|
||||
v-if="item.child"
|
||||
:x="item.x"
|
||||
:logic="item.logic"
|
||||
:relation-list="item.child"
|
||||
@del="(idx) => del(idx, item.child)"
|
||||
@add-cond-real="(type, logic) => add(type, item.child, logic)"
|
||||
@remove-relation-list="removeRelationList(index)"
|
||||
>
|
||||
</logic-relation>
|
||||
<filter-filed v-else :item="item" :index="index" @del="emits('del', index)"></filter-filed>
|
||||
</template>
|
||||
<div class="logic-right-add">
|
||||
<button class="operand-btn" @click="addCondReal('condition')">
|
||||
<el-icon style="margin-right: 4px" size="16">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
{{ t('permission.add_conditions') }}
|
||||
</button>
|
||||
<button v-if="x < 2" class="operand-btn" @click="addCondReal('relation')">
|
||||
<el-icon style="margin-right: 4px" size="16">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
{{ t('permission.add_relationships') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.logic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
.logic-left {
|
||||
box-sizing: border-box;
|
||||
width: 48px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
width: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&::after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #1f23291a;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.operate-title {
|
||||
word-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 20px;
|
||||
color: #1f2329;
|
||||
|
||||
.mrg-title {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.operate-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mrg-title {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.operate-icon {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.logic-right-add {
|
||||
display: flex;
|
||||
height: 41.4px;
|
||||
align-items: center;
|
||||
padding-left: 26px;
|
||||
|
||||
.operand-btn {
|
||||
box-sizing: border-box;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--ed-color-primary);
|
||||
background: #fff;
|
||||
border: 1px solid var(--ed-color-primary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user