基于antd-vue二次封装成自己想要的业务——加强篇

之前写过这个，有地址
https://blog.csdn.net/weixin_44191425/article/details/119740500?spm=1001.2014.3001.5501

现在只是为了更优化丰富一下，然后修复了一些bug

结合之前的和现在的看，会更明白。

基于之前封装的组件，优化了一些bug，比如说编辑和新增的时候做了其他操作，新增的输入框和编辑框要恢复到之前的状态。

<template>
  <div>
    <a-tree
      v-if="treeData.length > 0"
      :tree-data="treeData"
      block-node
      default-expand-all
      style="margin-top:65px;"
    >
      <icon slot="switcherIcon" name="down"></icon>
      <template slot="custom" slot-scope="item">
        <!-- 如果是新增-->
        <span v-if="item.isNewItem">
          <input
            type="text"
            class="editInput"
            :maxlength="30"
            v-model="item.name"
            placeholder="请输入部门名称"
          />
          <span
            class="tree-save_icon edit-require_icon"
            @click="submitAddFun(item)"
          >
            <a-icon type="check-circle" />
          </span>
          <span
            class="tree-cancle_icon edit-require_icon"
            @click="cancelAddFun(item)"
          >
            <a-icon type="close-circle" />
          </span>
          
        </span>
        <!-- 不是新增 -->
        <div v-else>
          <!-- 编辑时展示输入框 -->
          <div v-if="item.isEdit">
            <input
              type="text"
              v-model="item.title"
              :maxlength="30"
              class="editInput"
            />
            <span
              class="tree-save_icon edit-require_icon"
              @click="submitEdit(item)"
            >
              <a-icon type="check-circle" />
            </span>
            <span
              class="tree-cancle_icon edit-require_icon"
              @click="cancelEdit(item.id, false)"
            >
              <a-icon type="close-circle" />
            </span>
            
          </div>
          <!-- 否则展示原来的节点信息 -->
          <div v-else>
            <!-- <a-popover placement="topLeft"> -->
              <!-- <template slot="content">
                <p>{
   {
    item.title }}</p>
              </template> -->
            <span class="node-title" @click="selectNode(item)" >{
   {
   
              item.title
            }}</span>
          <!-- </a-popover> -->
            <!-- 删除按钮 -->
            <a-popconfirm
              class="delete-box"
              placement="topRight"
              ok-text="确定"
              cancel-text="取消"
              overlayClassName="staff-delete-pop"
              @confirm="deleteNode(item)"
              v-show="item.isShowDelete"
            >
              <template slot="title">
                删除{
   {
   
                  item.title
                }}后，该部门下的所有员工将被删除，且已存在的演练数据也将去除，确定删除
                ？

              </template>
              <a-tooltip