spfm-market-front/src/pages/main/file/flieList.vue

<template>
  <div class="container">
    <div class="container-box">
      <toolList :tooltit="tooltit"></toolList>
      <div class="main-box">
        <div class="inner-left" style="overflow: hidden">
          <div class="button-list">
            <el-button size="medium" type="" @click="addMenu">
              添加子目录</el-button
            >
            <el-button size="medium" type="" @click="delMenu"> 删除 </el-button>
            <el-dropdown
              @command="treeAction"
              trigger="click"
              style="margin-left: 10px"
            >
              <el-button type="" plain size="medium"> 操作 </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="1">全部展开</el-dropdown-item>
                <el-dropdown-item :command="2">全部关闭</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-alert type="warning" :closable="false">
            <template slot="title">
              {{
                actionName
                  ? "当前选择节点名称：" + actionName
                  : "当前无选择节点"
              }}
              <span v-show="actionName" class="clearStyle" @click="clearClick"
                >取消选择</span
              >
            </template>
          </el-alert>
          <div style="margin: 10px 0">
            <el-input
              size="medium"
              placeholder="请输入内容"
              v-model="filterText"
              class="input-with-select"
              clearable
              @change="
                () => {
                  if (!filterText) {
                    searchMenu();
                  }
                }
              "
            >
              <el-button
                slot="append"
                @click="searchMenu"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </div>
          <div
            style="
              height: calc(100% - 160px);
              overflow-y: auto;
              margin-top: 20px;
            "
          >
            <el-tree
              ref="catalogTree"
              :expand-on-click-node="true"
              :auto-expand-parent="true"
              :default-expand-all="true"
              :props="defaultProps"
              :data="menuList"
              @node-click="nodeClick"
              :filter-node-method="filterNode"
              node-key="id"
            >
              <span class="custom-tree-node" slot-scope="{ node }">
                <span>
                  <span style="color: #009cff" class=""></span>
                  <span
                    :style="
                      node.data.hasOwnProperty('parent')
                        ? 'font-size:14px;padding-left:5px'
                        : 'font-size:12px;padding-left:5px'
                    "
                    >{{ node.data.title }}</span
                  >
                </span>
              </span>
            </el-tree>
          </div>
          <div class="tree-action"></div>
        </div>
        <div class="inner-right">
          <div style="margin-bottom: 10px">
            <el-button
              v-show="actionName"
              class="btn-check"
              size="medium"
              @click="addFile"
            >
              上传附件
            </el-button>
            <el-button v-show="idList && idList.length > 0" @click="moreDown"
              >批量下载</el-button
            >
          </div>
          <div class="tabbox">
            <el-table
              height="calc(100% - 10px)"
              class="com-table"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              border
              size="small"
              style="width: 100%"
              v-loading="loading"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="title"
                width="180"
                show-overflow-tooltip
                label="材料名称"
              >
              </el-table-column>
              <el-table-column label="会议名称">
                <template slot-scope="scope">
                  <span class="">{{ scope.row.meeting }}</span>
                </template>
              </el-table-column>
              <el-table-column label="材料背景">
                <template slot-scope="scope">
                  <span class="">{{ scope.row.titleBg }}</span>
                </template>
              </el-table-column>
              <el-table-column label="文件名称" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span class="">{{ scope.row.fileName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                show-overflow-tooltip
                label="发布时间"
                width="140"
              />
              <el-table-column label="操作" width="150px" align="center">
                <template slot-scope="scope">
                  <el-button
                    class="font-btn"
                    size="mini"
                    type="text"
                    plain
                    @click="downLoad(scope.row)"
                    >下载
                  </el-button>
                  <el-button
                    class="font-btn"
                    size="mini"
                    type="text"
                    plain
                    @click="deleteOne(scope.row)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pageBox"
              @current-change="currchange"
              layout="prev, pager, next"
              background
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="p-new-box"
      size="50%"
      title="新增目录"
      :append-to-body="true"
      :visible.sync="addDialogStatus"
      :close-on-click-modal="false"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 90%; margin: 30px auto"
      >
        <el-form-item label="目录名称:" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <!--  目录不设置权限
        <el-form-item label="查看权限:" prop="text">
          <el-radio-group v-model="formData.auth">
            <el-radio label="3">二级经理可见</el-radio>
            <el-radio label="2">三级经理可见</el-radio>
            <el-radio label="1">普通员工可见</el-radio>
          </el-radio-group>
        </el-form-item>
         -->
        <el-form-item
          prop="parentId"
          v-if="actionName != 'add'"
          label="父级编码:"
        >
          <el-input
            disabled
            v-model="formData.parentId"
            placeholder="请输入父级编码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="父级名称:"
          v-if="actionName != 'add'"
          prop="parentName"
        >
          <el-input
            disabled
            v-model="formData.parentName"
            readonly
            placeholder="请输入父级名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作人:" prop="createName">
          <el-input
            v-model="formData.createName"
            disabled
            placeholder="请输入操作人"
          ></el-input>
        </el-form-item>
        <div class="drawer-footer" style="text-align: right">
          <el-button
            type="primary"
            size="medium"
            @click="submitForm('ruleForm')"
            >{{ subType }}</el-button
          >
          <el-button
            style="margin-right: 40px"
            size="medium"
            @click="resetForm('ruleForm')"
            >取消</el-button
          >
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      class="p-new-box"
      size="50%"
      :title="titname + '文件'"
      :append-to-body="true"
      :before-close="closedia"
      :visible.sync="dialogStatus"
      :close-on-click-modal="false"
    >
      <div v-loading="loadinged">
        <el-form
          v-if="titname != '查看'"
          :model="infolist"
          ref="infolist"
          :rules="filerules"
        >
          <el-form-item prop="title" class="info-line online">
            <span>材料名称:</span>
            <el-input v-model="infolist.title" placeholder="请输入材料名称">
            </el-input>
          </el-form-item>
          <el-form-item class="info-line online radviv" prop="text">
            <span>查看权限:</span>
            <el-radio-group v-model="infolist.auth">
              <el-radio label="2">二级经理可见</el-radio>
              <el-radio label="3">三级经理可见</el-radio>
              <el-radio label="1">普通员工可见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="meeting" class="info-line online">
            <span>会议名称:</span>
            <el-input v-model="infolist.meeting" placeholder="请输入会议名称">
            </el-input>
          </el-form-item>
          <el-form-item class="info-line online" prop="titleBg">
            <span>材料背景:</span>
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入材料背景"
              style="width: calc(100%-100px)"
              v-model="infolist.titleBg"
            ></el-input>
          </el-form-item>
          <div class="info-line online">
            <span>附件:</span>
            <myUpload
              @uploadBack="uploadBack"
              :fileInfo="fileInfo"
              :fileList="fileInfo.fileList"
              style="width: 30% !important"
            >
            </myUpload>
          </div>
        </el-form>
        <div class="drawer-footer" style="text-align: right">
          <el-button size="medium" type="primary" @click="dialogCli(1)"
            >保 存</el-button
          >
          <el-button size="medium" @click="dialogCli(2)">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import toolList from "../../../components/toolList";
import myUpload from "../../../components/upload";
export default {
  components: {
    toolList,
    myUpload,
  },
  data() {
    return {
      loadinged: false,
      addDialogStatus: false,
      tooltit: "文件共享管理",
      loading: false,
      defaultExpand: true,
      functionCode: "",
      filterText: "", // tree搜索value
      actionName: "", // 当前选择节点名称
      menuList: [], // tree数据源
      checkedMenu: [], // 选中节点的functionCode
      checkedNodes: [], // 选中节点的node值
      roleData: "", // 某一条数据
      tableData: [], // 表格数据源
      infolist: {
        isFile: "1",
        title: "", // 材料名称
        meeting: "", // 会议名称
        titleBg: "", // 材料背景
        auth: "1", // 查看权限
        mkFileShareAttachList: [], // 附件数据
        parentId: "",
      }, // 提交表单数据源
      formData: {
        id: "",
        title: "",
        createName: JSON.parse(sessionStorage.userInfo).loginName,
        createId: JSON.parse(sessionStorage.userInfo).loginNo,
        orgName: JSON.parse(sessionStorage.userInfo).groupName,
        orgId: JSON.parse(sessionStorage.userInfo).groupId,
        parentId: "",
        parentName: "",
        isFile: "0",
        auth: "1",
      },
      defaultProps: {
        children: "childDept",
        label: "title",
      },
      filerules: {
        title: [
          {
            required: true,
            message: "请输入材料名称",
            trigger: "change",
          },
        ],
        meeting: [
          {
            required: true,
            message: "请输入会议名称",
            trigger: "change",
          },
        ],
        titleBg: [
          {
            required: true,
            message: "请输入材料背景",
            trigger: "change",
          },
        ],
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "change",
          },
        ],
        parentId: [
          {
            required: false,
            message: "请选择父级编码",
            trigger: "change",
          },
        ],
      },
      subType: "",
      total: 0,
      pageSize: 1,
      params: {
        isFile: "1",
        id: "",
      },
      fileInfo: {
        type: "bt1n",
        typename: "上传文件",
        limit: 5,
        url: "/market/cmkFileShare/upload",
        fileList: [],
      },
      titname: "新增",
      dialogStatus: false,
      attList: [],
      idList: [],
    };
  },

  methods: {
    clearClick() {
      this.actionName = "";
      this.params.id = "";
      this.getList(this.params, this.pageSize);
    },
    moreDown() {
      let arr = [];
      this.idList.forEach((item) => {
        arr.push({
          id: item.fileCode,
          fileName: item.fileName,
        });
      });
      this.$http({
        url: "/market/cmkFileShare/downAllFile",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: { mkFileShareAttachList: arr },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(
            blob,
            new Date().getTime().toString() + ".zip"
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = new Date().getTime().toString() + ".zip";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
      // this.idList.forEach((item) => {
      //   this.$http({
      //     url: "/market/cmkFileShare/downFile",
      //     method: "post",
      //     headers: {
      //       "Content-Type": "application/json",
      //     },
      //     responseType: "blob",
      //     data: { id: item.fileCode, fileName: item.fileName },
      //   }).then((response) => {
      //     if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      //       let blob = new Blob([response.data], {
      //         type: "application/vnd.ms-excel",
      //       });
      //       window.navigator.msSaveOrOpenBlob(blob, item.fileName);
      //     } else {
      //       /* 火狐谷歌的文件下载方式 */
      //       var blob = new Blob([response.data]);
      //       var downloadElement = document.createElement("a");
      //       var href = window.URL.createObjectURL(blob);
      //       downloadElement.href = href;
      //       downloadElement.download = item.fileName;
      //       document.body.appendChild(downloadElement);
      //       downloadElement.click();
      //       document.body.removeChild(downloadElement);
      //       window.URL.revokeObjectURL(href);
      //     }
      //   });
      // });
    },
    handleSelectionChange(val) {
      this.idList = val;
    },
    // 附件下载
    downLoad(fileData) {
      this.$http({
        url: "/market/cmkFileShare/downFile",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: { id: fileData.fileCode, fileName: fileData.fileName },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(blob, fileData.fileName);
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = fileData.fileName;
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    // 新增附件
    addFile() {
      this.titname = "新增";
      this.dialogStatus = true;
    },
    // 上传回调
    uploadBack(v) {
      this.attList = v;
    },
    // 关闭弹窗
    closedia() {
      this.infolist = {};
      this.dialogStatus = false;
      this.fileInfo.fileList = [];
      this.getList(this.params, this.pageSize);
    },
    //添加 修改
    dialogCli(v) {
      this.fileInfo.fileList = [];
      if (v === 2) {
        this.dialogStatus = false;
        this.getList(this.params, this.pageSize);
        return;
      }
      this.$refs.infolist.validate((valid) => {
        if (valid) {
          let attList = [];
          for (let i = 0; i < this.attList.length; i++) {
            attList.push({
              id: this.attList[i].id,
              fileName: this.attList[i].fileName,
            });
          }
          this.infolist.mkFileShareAttachList = attList;
          this.infolist.isFile = "1";
          this.loadinged = true;
          this.$http({
            url: "/market/cmkFileShare/add",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: this.infolist,
          }).then((res) => {
            this.loadinged = false;
            if (res.data.result === 1) {
              this.$message({
                message: res.data.desc,
                type: "error",
              });
            } else {
              this.$message({
                message: "成功",
                type: "success",
              });
              this.fileInfo.fileList = [];
              this.infolist = {};
              this.dialogStatus = false;
              this.getList(this.params, this.pageSize);
            }
          });
        }
      });
    },

    // 新增目录-表单提交
    async submitForm(formName) {
      let valid = await this.$refs[formName].validate().catch((err) => err);
      if (valid) {
        this.$http({
          url:
            this.subType == "保存"
              ? "/market/cmkFileShare/add"
              : "/satisfy/qacatalog/update",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: this.formData,
        }).then((res) => {
          if (res.data.result == 0) {
            this.$message({
              type: "success",
              message: res.data.desc,
            });
            this.actionName = "";
            this.getData();
            this.addDialogStatus = false;
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "新增失败",
        });
        this.addDialogStatus = false;
        return false;
      }
    },
    // 取消新增目录
    resetForm(formName) {
      this.actionName = "";
      this.$refs[formName].resetFields();
      this.addDialogStatus = false;
    },
    // 新增目录
    addMenu() {
      if (!this.actionName) {
        this.$message("请先点击选中要增加菜单的位置");
      } else {
        this.addDialogStatus = true;
        this.subType = "保存";
        this.formData.parentId = this.formData.id;
        this.formData.parentName = this.formData.title;
        this.formData.title = "";
        this.formData.id = "";
      }
    },
    // 树展开\折叠
    treeAction(val) {
      val == 1 ? (this.defaultExpand = true) : (this.defaultExpand = false);
      for (
        let i = 0;
        i < this.$refs.catalogTree.store._getAllNodes().length;
        i++
      ) {
        this.$refs.catalogTree.store._getAllNodes()[i].expanded =
          this.defaultExpand;
      }
    },
    deleteOne(val) {
      this.$confirm("即将删除此条数据, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.pageSize = 1;
          this.$http({
            url: "/market/cmkFileShare/del",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: {
              id: val.id,
              isFile: "1",
              createId: val.createId,
              createName: val.createName,
            },
          }).then((res) => {
            if (res.data.result == 0) {
              this.$notify({
                title: "成功",
                message: res.data.desc,
                type: "success",
              });
              this.getList(this.params, this.pageSize);
            }else if(res.data.result == 1) {
              this.$notify({
                title: "失败",
                message: res.data.desc,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
    // 删除目录
    delMenu() {
      if (!this.formData.id) {
        this.$message("请先点击选中要删除的菜单");
      } else {
        this.$confirm("即将删除此条数据, 是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http({
              url: "/market/cmkFileShare/del",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                id: this.formData.id,
                isFile: "0",
                createId: this.formData.createId,
                createName: this.formData.createName,
              },
            }).then((res) => {
              if (res.data.result == 0) {
                this.$notify({
                  title: "成功",
                  message: res.data.desc,
                  type: "success",
                });
                this.actionName = "";
                this.getData();
              }else if(res.data.result == 1) {
              this.$notify({
                title: "失败",
                message: res.data.desc,
                type: "error",
              });
            }
            });
          })
          .catch(() => {});
      }
    },
    // 搜索按钮事件
    searchMenu() {
      this.$refs.catalogTree.filter(this.filterText);
    },
    // tree过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    // 点击树节点事件
    nodeClick(a, b) {
      let nodeData = JSON.parse(JSON.stringify(b.data));
      this.formData.title = nodeData.title;
      this.formData.parentId = nodeData.parentId;
      this.formData.parentName = nodeData.parentName;
      this.formData.id = nodeData.id;
      delete Object["children"];
      this.actionName = nodeData.title;
      this.subType = "修改";
      this.params.type = "";
      this.params.title = "";
      this.params.collection = "";
      this.params.catalogId = nodeData.id;
      this.params.id = nodeData.id;
      this.infolist.parentId = nodeData.id;
      this.getList(this.params, this.pageSize);
    },
    // 获取目录
    getData() {
      this.$http({
        url: "/market/cmkFileShare/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { isFile: "0" },
      }).then((res) => {
        if (res.data && res.data.length > 0) {
          this.menuList = res.data;
        }
      });
    },
    toTreeData(data) {
      var pos = {};
      var tree = [];
      var i = 0;
      while (data.length != 0) {
        if (data[i].parentId == 0) {
          tree.push({
            id: data[i].id,
            title: data[i].title,
            children: [],
          });
          pos[data[i].id] = [tree.length - 1];
          data.splice(i, 1);
          i--;
        } else {
          var posArr = pos[data[i].parentId];
          if (posArr != undefined) {
            var obj = tree[posArr[0]];
            for (var j = 1; j < posArr.length; j++) {
              obj = obj.children[posArr[j]];
            }
            obj.children.push({
              id: data[i].id,
              title: data[i].title,
              children: [],
            });
            pos[data[i].id] = posArr.concat([obj.children.length - 1]);
            data.splice(i, 1);
            i--;
          }
        }
        i++;
        if (i > data.length - 1) {
          i = 0;
        }
      }
      return tree;
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.pageSize = n;
      this.loading = true;
      this.tableData = [];
      this.$http({
        url: "/market/cmkFileShare/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        if (res.data.data && res.data.data.length > 0) {
          let arr = res.data.data;
          arr.forEach((item) => {
            Object.keys(item).forEach((val) => {
              if (item[val] == null) {
                item[val] = "- -";
              }
            });
          });
          this.tableData = arr;
        } else {
          this.tableData = res.data.data;
        }
        this.total = res.data.totalRecord;
        this.loading = false;
      });
    },
  },
  mounted() {
    this.getData();
    this.getList(this.params, this.pageSize);
  },
};
</script>
<style scoped lang="scss">
.radviv div {
  width: 80% !important;
}
.pageBox {
  text-align: right;
  margin-top: 10px;
}

.info-line {
  width: 100%;
  display: block;
  // padding-left: 20px;

  div {
    width: 50%;
    display: inline-block;
  }

  span {
    width: 100px;
    display: inline-block;
    text-align: right;
    font-weight: bold;
    font-size: 14px;
    padding-right: 15px;

    i {
      color: red;
      display: inline-block;
      padding-right: 5px;
    }
  }

  .el-select,
  .el-input {
    width: calc(100% - 100px);
  }

  .tree {
    width: calc(100% - 100px);
  }
}

.online {
  width: 100%;

  .el-select {
    width: calc(100% - 100px);
  }

  span {
    vertical-align: top;
  }

  .el-textarea {
    width: calc(100% - 100px);
  }
}
</style>

<style lang="scss" scoped>
.container {
  background-color: #f0f2f5;
  .clearStyle {
    cursor: pointer;
    color: #0b82ff;
  }
  .el-col {
    background-color: white;
    padding: 0 20px;
  }

  .container-box {
    padding: 0;
    margin-top: 0;
    height: 100%;
    background-color: white;
    padding: 20px;
  }

  .main-box {
    overflow: hidden;
    display: flex;
    background-color: white;
    padding: 20px 0;

    > div {
      background-color: white;
    }

    .inner-left {
      width: 30%;
      padding: 0 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      height: calc(100vh - 220px);

      // .canel-style {
      // 	color: #1890ff;
      // 	cursor: pointer;
      // 	padding-left: 10px;
      // }
    }

    .inner-right {
      width: 68%;
      margin-left: 2%;
      overflow-y: auto;
      //   border-left: 1px solid #ddd;
      height: calc(100vh - 220px);
    }
  }
}

.button-list {
  padding: 30px 0 10px 0;
  display: flex;
  //   justify-content: space-between;
}

.choice-style {
  background: rgb(255, 255, 255);
}

.tree-action {
  bottom: 0;
  width: 100%;
  // border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.tree-line {
  // .el-tree-node__content {
  //   padding-left: 0 !important;
  // }

  .el-tree-node__expand-icon.is-leaf {
    display: none !important;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }

  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -17px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 20px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }

  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;

    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
</style>