<script lang="ts" setup>
|
import custom_sort from '@/assets/svg/custom_sort.svg'
|
import dvRename from '@/assets/svg/dv-rename.svg'
|
import icon_calendar_outlined from '@/assets/svg/icon_calendar_outlined.svg'
|
import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
|
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
|
import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
|
import icon_local_outlined from '@/assets/svg/icon_local_outlined.svg'
|
import icon_number_outlined from '@/assets/svg/icon_number_outlined.svg'
|
import icon_url_outlined from '@/assets/svg/icon_url_outlined.svg'
|
import icon_switch_outlined from '@/assets/svg/icon_switch_outlined.svg'
|
import icon_text_outlined from '@/assets/svg/icon_text_outlined.svg'
|
import more_v from '@/assets/svg/more_v.svg'
|
import { ref, computed, nextTick } from 'vue'
|
import { ElCascaderPanel } from 'element-plus-secondary'
|
import { timeTypes } from './util'
|
import { fieldType } from '@/utils/attr'
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
export interface Menu {
|
svgName: string
|
label?: string
|
command: string
|
divided?: boolean
|
}
|
const { t } = useI18n()
|
|
const props = defineProps({
|
extField: {
|
type: Number,
|
default: 0
|
},
|
showTime: {
|
type: Boolean,
|
default: false
|
},
|
transType: {
|
type: String,
|
default: ''
|
}
|
})
|
const timeTypesChildren = timeTypes.map(ele => {
|
return {
|
label: ele === 'custom' ? t('data_set.customize') : ele,
|
value: ele
|
}
|
})
|
|
const options = computed(() => {
|
const optionArr = [
|
{
|
label: props.transType,
|
value: 'translate',
|
icon: icon_switch_outlined
|
},
|
{
|
label: t('data_set.change_field_type'),
|
value: 'translateType',
|
icon: custom_sort,
|
children: [
|
{
|
label: t('data_set.text'),
|
icon: icon_text_outlined,
|
value: 'text'
|
},
|
{
|
label: t('data_set.time'),
|
icon: icon_calendar_outlined,
|
value: 'time',
|
children: props.showTime ? timeTypesChildren : []
|
},
|
{
|
label: t('data_set.geographical_location'),
|
icon: icon_local_outlined,
|
value: 'location'
|
},
|
{
|
label: t('data_set.numerical_value'),
|
icon: icon_number_outlined,
|
value: 'value'
|
},
|
{
|
label: t('data_set.numeric_value_decimal'),
|
icon: icon_number_outlined,
|
value: 'float'
|
},
|
{
|
label: 'URL',
|
icon: icon_url_outlined,
|
value: 'url'
|
}
|
]
|
},
|
{
|
label: t('data_set.edit'),
|
value: 'editor',
|
icon: icon_edit_outlined
|
},
|
{
|
label: t('data_set.rename'),
|
value: 'rename',
|
icon: dvRename
|
},
|
{
|
label: t('data_set.copy'),
|
value: 'copy',
|
icon: icon_copy_outlined
|
},
|
{
|
label: t('data_set.delete'),
|
value: 'delete',
|
icon: icon_deleteTrash_outlined
|
}
|
]
|
if (![2, 3].includes(props.extField)) {
|
optionArr.splice(2, 1)
|
}
|
|
if ([3].includes(props.extField)) {
|
optionArr.splice(0, 1)
|
optionArr.splice(0, 1)
|
}
|
return optionArr
|
})
|
const deTypeArr = ref([])
|
const popover = ref()
|
const level = ref(1)
|
const cascaderPanel = ref()
|
const handleExpand = val => {
|
level.value = val.left + 1
|
}
|
const emit = defineEmits(['handleCommand'])
|
const handleCommand = () => {
|
const [translate, fieldType, timeType] = deTypeArr.value
|
popover.value.hide()
|
emit('handleCommand', timeType || fieldType || translate)
|
nextTick(() => {
|
deTypeArr.value = []
|
})
|
}
|
const handleChange = () => {
|
handleCommand()
|
}
|
</script>
|
|
<template>
|
<el-popover
|
:popper-class="
|
options.length === 6
|
? 'menu-more_popper_one menu-more_popper_six'
|
: extField === 3
|
? 'menu-more_popper_one menu-more_popper_three'
|
: 'menu-more_popper_one'
|
"
|
:persistent="false"
|
ref="popover"
|
placement="right"
|
:width="level * 175"
|
trigger="click"
|
>
|
<template #reference>
|
<el-icon class="menu-more">
|
<Icon name="more_v"><more_v class="svg-icon" /></Icon>
|
</el-icon>
|
</template>
|
<ElCascaderPanel
|
v-model="deTypeArr"
|
@expand-change="handleExpand"
|
ref="cascaderPanel"
|
:border="false"
|
:options="options"
|
@change="handleChange"
|
>
|
<template #default="{ data }">
|
<div class="flex-align-center icon">
|
<el-icon v-if="data.icon">
|
<Icon
|
><component
|
class="svg-icon"
|
:class="
|
['text', 'location', 'value', 'float', 'time', 'url'].includes(data.value) &&
|
`field-icon-${fieldType[['float', 'value'].includes(data.value) ? 2 : 0]}`
|
"
|
:is="data.icon"
|
></component
|
></Icon>
|
</el-icon>
|
<span>
|
{{ data.label }}
|
</span>
|
</div>
|
</template>
|
</ElCascaderPanel>
|
</el-popover>
|
</template>
|
<style lang="less" scoped>
|
.menu-more {
|
cursor: pointer;
|
height: 24px;
|
width: 24px;
|
border-radius: 4px;
|
font-size: 16px;
|
&:hover {
|
background: rgba(31, 35, 41, 0.1);
|
}
|
}
|
</style>
|
|
<style lang="less">
|
.menu-more_popper_six > :first-child > :first-child > :first-child {
|
height: 210px;
|
}
|
|
.menu-more_popper_three > :first-child > :first-child > :first-child {
|
height: 145px;
|
}
|
.menu-more_popper_one {
|
padding: 0 !important;
|
background: transparent !important;
|
box-shadow: none !important;
|
border: none !important;
|
|
.ed-cascader-node.in-active-path {
|
color: #1f2329;
|
font-weight: 400;
|
}
|
.ed-cascader-panel {
|
.ed-cascader-menu {
|
border-radius: 4px;
|
border: 1px solid #dee0e3;
|
background: #fff;
|
box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
|
border-right: none;
|
&:nth-child(2) {
|
> div {
|
height: 210px;
|
}
|
}
|
&:nth-child(3) {
|
margin-top: 64px;
|
}
|
.arrow-right {
|
position: absolute;
|
top: 50%;
|
right: 11px;
|
transform: translateY(-50%);
|
}
|
}
|
}
|
}
|
</style>
|
