122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
<template>
|
|
<div class="row items-center">
|
|
<div v-if="state.treeData.edit">
|
|
<n-input v-model:value="state.editTitle"
|
|
style="width:120px" />
|
|
</div>
|
|
|
|
<n-popover trigger="hover"
|
|
v-else>
|
|
<template #trigger>
|
|
<div style="width:120px"
|
|
class="fl-px-sm sf-text-ellipsis">{{ state.treeData.title }}</div>
|
|
</template>
|
|
<div>{{ state.treeData.title }}</div>
|
|
</n-popover>
|
|
<n-icon :component="CreateOutline"
|
|
class="fl-ml-sm"
|
|
size="20"
|
|
v-if="config?.actions.includes('edit')&&!state.treeData.edit"
|
|
@click.stop="handleTreeEdit(state.treeData)" />
|
|
<n-icon :component="Remove"
|
|
size="20"
|
|
v-if="config?.actions.includes('subtraction')&&!state.treeData.edit&&visibleFormItem(config.subtractionShow, state.treeData)"
|
|
class="fl-ml-sm"
|
|
@click.stop="handleTreeSubtraction(state.treeData)" />
|
|
<n-icon :component="Add"
|
|
size="20"
|
|
v-if="config?.actions.includes('add')&&!state.treeData.edit&&visibleFormItem(config.addShow, state.treeData)"
|
|
class="fl-ml-sm"
|
|
@click.stop="handleTreeAdd(state.treeData)" />
|
|
<drag-outlined v-if="config?.actions.includes('move')&&!state.treeData.edit&&visibleFormItem(config.moveShow, state.treeData)"
|
|
class="fl-ml-sm"
|
|
@click.stop="handleTreeMove(state.treeData)" />
|
|
|
|
<!-- <n-icon :component="MoveOutline"
|
|
size="20"
|
|
v-if="config?.actions.includes('move')&&!state.treeData.edit&&visibleFormItem(config.moveShow, state.treeData)"
|
|
class="fl-ml-sm"
|
|
@click.stop="handleTreeMove(state.treeData)" /> -->
|
|
|
|
<n-icon :component="Checkmark"
|
|
size="20"
|
|
v-if="state.treeData.edit"
|
|
class="fl-ml-sm"
|
|
@click.stop="handleTreeSave(state.treeData)" />
|
|
<n-icon :component="Close"
|
|
size="20"
|
|
v-if="state.treeData.edit"
|
|
class="fl-ml-md"
|
|
@click.stop="handleTreeNotSave(state.treeData)" />
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
onBeforeMount,
|
|
onMounted,
|
|
watch,
|
|
reactive
|
|
} from "vue";
|
|
import {
|
|
visibleFormItem,
|
|
} from "@/utils/helper/form";
|
|
import {
|
|
UpOutlined,
|
|
DownOutlined,
|
|
CloseCircleOutlined,
|
|
PlusOutlined,
|
|
DragOutlined,
|
|
} from "@ant-design/icons-vue";
|
|
import { Add, Checkmark, Close, CreateOutline, Remove, MoveOutline } from "@vicons/ionicons5";
|
|
import { NPopover, NInput, NIcon } from "naive-ui";
|
|
let props = defineProps({
|
|
dataRef: Object,
|
|
checked: Boolean,
|
|
config: Object,
|
|
clickKey: [String, Number]
|
|
})
|
|
const state = reactive({
|
|
expandedKeys: [],
|
|
editTitle: '',
|
|
treeData: [],
|
|
});
|
|
onBeforeMount(() => {
|
|
state.treeData = props.dataRef.option
|
|
})
|
|
watch(() => props.dataRef.option, (val) => {
|
|
state.treeData = props.dataRef.option
|
|
}, { deep: true })
|
|
|
|
onMounted(() => {
|
|
})
|
|
const emit = defineEmits(["triggerTreeAction", "triggerTreeClick"]);
|
|
|
|
// const myComponentRef = ref(null);
|
|
const handleTreeEdit = () => {
|
|
state.editTitle = state.treeData.title
|
|
state.treeData.edit = true
|
|
// myComponentRef.value.$forceUpdate();
|
|
}
|
|
const handleTreeAdd = () => {
|
|
emit('triggerTreeAction', { type: 'add', val: state.treeData })
|
|
}
|
|
const handleTreeMove = () => {
|
|
emit('triggerTreeAction', { type: 'move', val: state.treeData })
|
|
}
|
|
|
|
const handleTreeSubtraction = () => {
|
|
emit('triggerTreeAction', { type: 'subtraction', val: state.treeData })
|
|
}
|
|
const handleTreeSave = () => {
|
|
state.treeData.title = state.editTitle
|
|
emit('triggerTreeAction', { type: 'save', val: state.treeData })
|
|
}
|
|
const handleTreeNotSave = () => {
|
|
state.editTitle = ''
|
|
emit('triggerTreeAction', { type: 'cancel', val: state.treeData })
|
|
}
|
|
</script>
|
|
|