chat-pc/src/components/flnlayout/tree/treelabel.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>