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="max-width:200px" />
|
||
</div>
|
||
|
||
<n-popover trigger="hover"
|
||
v-else>
|
||
<template #trigger>
|
||
<div style="max-width:200px"
|
||
class="fl-px-sm sf-text-ellipsis">{{ state.treeData.title + '（' + state.treeData.staffNum + '）' }}</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>
|
||
|