mky-vent-5/src/views/vent/performance/comment/fileModal.vue

<template>
  <div class="title">目录类型 : </div>
  <div class="content">
    <template v-for="(tag, index) in state.tags" :key="tag">
      <a-tag :closable="index !== 0" @close="handleClose(tag)">
        {{ tag }}
      </a-tag>
    </template>
    <a-input
      v-if="state.inputVisible"
      ref="inputRef"
      v-model:value="state.inputValue"
      type="text"
      size="small"
      :style="{ width: '78px' }"
      @blur="handleInputConfirm"
      @keyup.enter="handleInputConfirm"
    />
    <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
      <plus-outlined />
      新增目录
    </a-tag>
  </div>
  <div class="footer">
    <a-button style="margin-right: 10px" type="primary" @click="handleSubmit">保存</a-button>
    <a-button type="primary" @click="handleSubmit">取消</a-button>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, toRefs, nextTick, inject, watch } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { createFile, deleteById } from '../fileDetail/fileDetail.api';
  components: {
    PlusOutlined;
  }
  //左侧树列表数据
  const treeData = inject('treeData') as any;
  //编辑菜单-新增or删除
  let flag = ref(true) as any;
  //编辑菜单-被删除元素ID
  let delId = ref(0) as any;
  // 声明Emits
  const emit = defineEmits(['saveOrUpdate']);
  const inputRef = ref();
  const state = reactive<any>({
    tags: [],
    inputVisible: false,
    inputValue: '',
  });
  const handleClose = (removedTag: string) => {
    flag.value = false; //编辑菜单-删除
    const tags = state.tags.filter((tag) => tag !== removedTag);
    //获取被删除元素ID
    delId.value = treeData[0].children.filter((el) => el.title === removedTag)[0].id;
    console.log(tags);
    state.tags = tags;
  };
  const showInput = () => {
    flag.value = true; //编辑菜单-新增
    state.inputVisible = true;
    nextTick(() => {
      inputRef.value.focus();
    });
  };
  const handleInputConfirm = () => {
    const inputValue = state.inputValue;
    let tags = state.tags;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [...tags, inputValue];
    }
    console.log(tags);
    Object.assign(state, {
      tags,
      inputVisible: false,
      inputValue: '',
    });
  };
  //新增

  //删除
  //表单提交事件
  async function handleSubmit(v) {
    try {
      if (flag.value) {
        //编辑菜单-新增保存
        console.log('编辑菜单-新增');
      } else {
        //编辑菜单-删除保存
        console.log('编辑菜单-删除');
      }
      emit('saveOrUpdate', false);
    } finally {
      // setModalProps({ confirmLoading: false });
    }
  }
  watch(
    treeData,
    (newV) => {
      console.log(newV, 'new111');
      let editMenuList = [] as any;
      newV[0].children.forEach((el) => {
        editMenuList.push(el.title);
      });
      state.tags = [...editMenuList];
    },
    { immediate: true }
  );
</script>

<style lang="less" scoped>
  .title {
    margin-bottom: 10px;
  }
  .footer {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  ::v-deep .zxm-tag {
    margin-bottom: 10px;
    border-color: #3ad8ff77;
    background-color: #ffffff00 !important;
    color: #fff;
  }
  ::v-deep .zxm-tag-close-icon {
    color: #fff;
  }
</style>