119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<template>
|
|
<a-badge-ribbon color="volcano">
|
|
<template #text>
|
|
<a-space>
|
|
<icon-font type="icon-copy" @click.stop="onCopy" />
|
|
<icon-font type="icon-delete" style="color: #fff" @click.stop="onDelete" />
|
|
</a-space>
|
|
</template>
|
|
<div
|
|
:style="{ '--ant-primary-color': token.colorPrimaryBorder }"
|
|
:class="`list-group-item list-group-item-masked designer-item ${
|
|
selected?.uuid === item.uuid ? 'designer-item-active' : ''
|
|
}`"
|
|
@click.stop="onClick"
|
|
>
|
|
<form-item-render v-if="item.formItem?.group === 'form'" :item="item.formItem" :disabled="true" />
|
|
<auxiliary-item-render
|
|
v-else-if="item.formItem?.group === 'auxiliary'"
|
|
:item="item.formItem"
|
|
></auxiliary-item-render>
|
|
<row-component-item
|
|
v-else-if="item.formItem.group === 'layout' && item.formItem.type === FormItemTypeEnum.ROW"
|
|
:data-id="item.uuid"
|
|
:item="XEUtils.assign(item.formItem, { children: item.children?.map((item) => item.formItem) })"
|
|
>
|
|
<template v-if="item.children">
|
|
<col-component-item
|
|
v-for="(c, index) in item.children"
|
|
:key="index"
|
|
:item="c"
|
|
:components="components"
|
|
:style="{
|
|
borderStyle: selected && selected.uuid === c.uuid ? 'solid' : 'dashed',
|
|
borderWidth: selected && selected.uuid === c.uuid ? '2px' : '1px',
|
|
borderColor: token.colorPrimaryBorder,
|
|
}"
|
|
:selected="selected"
|
|
@click.stop="emit('selected', c)"
|
|
@selected-change="(_c?: FormDesignerItem) => emit('selected', _c)"
|
|
></col-component-item>
|
|
</template>
|
|
</row-component-item>
|
|
</div>
|
|
</a-badge-ribbon>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { PropType } from 'vue'
|
|
import { FormDesignerItem } from '../form-designer-types'
|
|
import { theme } from 'ant-design-vue'
|
|
import { FormItemTypeEnum } from '@/components/form-render/form-render-types'
|
|
import XEUtils from 'xe-utils'
|
|
const { useToken } = theme
|
|
const { token } = useToken()
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object as PropType<FormDesignerItem>,
|
|
required: true,
|
|
},
|
|
selected: {
|
|
type: Object as PropType<FormDesignerItem>,
|
|
required: false,
|
|
default: () => null,
|
|
},
|
|
components: {
|
|
type: Array as PropType<Array<FormDesignerItem>>,
|
|
required: false,
|
|
default: () => [],
|
|
},
|
|
})
|
|
const { item, selected, components } = toRefs(props)
|
|
|
|
watch(
|
|
selected,
|
|
(v) => {
|
|
if (v && item.value.uuid !== v.uuid && v.formItem.type === FormItemTypeEnum.COL) {
|
|
//嵌套的列
|
|
if (item.value.children) {
|
|
const index = item.value.children?.findIndex((i) => i.uuid === v.uuid)
|
|
item.value.children.splice(index, 1, v)
|
|
}
|
|
}
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
const emit = defineEmits<{
|
|
selected: [itemConfig?: FormDesignerItem]
|
|
copy: [itemConfig: FormDesignerItem]
|
|
delete: [itemConfig: FormDesignerItem]
|
|
}>()
|
|
|
|
const onClick = () => {
|
|
emit('selected', item.value)
|
|
}
|
|
const onCopy = () => {
|
|
emit('copy', item.value)
|
|
}
|
|
const onDelete = () => {
|
|
emit('delete', item.value)
|
|
}
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.designer-item {
|
|
padding: 10px 50px 10px 10px;
|
|
cursor: pointer;
|
|
border: 1px dashed var(--ant-primary-color);
|
|
}
|
|
|
|
.designer-item-active {
|
|
border: 2px solid var(--ant-primary-color);
|
|
}
|
|
|
|
.list-group-item-masked {
|
|
z-index: 3000;
|
|
background: rgb(238 236 236 / 30%);
|
|
}
|
|
</style>
|