目录管理添加批量添加

Surpriseplus

2023-02-07 6c086fae275e7f3579654e374cadb85e7e054949

 src/views/datamanage/catalogueManage.vue

@@ -30,46 +30,84 @@
          }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div>
            <el-button
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setEditNode(1)"
              type="info"
              icon="el-icon-top"
              size="small"
            >向上移动</el-button>
            <el-button
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setEditNode(2)"
              type="info"
              icon="el-icon-bottom"
              size="small"
            >向下移动</el-button>
            <el-button
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setNewNode(1)"
              type="success"
              icon="el-icon-plus"
              size="small"
            >新增同级</el-button>
            <el-button
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setNewNode(2)"
              type="success"
              icon="el-icon-plus"
              size="small"
            >新增子级</el-button>
            <el-button
              v-if="menuStatus.delete"
              @click="setDelNode()"
              :disabled="itemdetail.pid == null ? true : false"
              type="danger"
              icon="el-icon-delete"
              size="small"
            >删除</el-button>

            <div class="menuTop">
              <el-form
                :inline="true"
                class="demo-form-inline"
              >
                <el-form-item>

                  <el-upload
                    action
                    accept=".xlsx, .xls"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="handleChange"
                    :file-list="fileList"
                  >
                    <el-button
                      type="info"
                      icon="el-icon-plus"
                      size="small"
                    >上传文件</el-button>
                  </el-upload>

                </el-form-item>
                <el-form-item>
                  <el-button
                    v-if="menuStatus.update"
                    :disabled="itemdetail.pid == null ? true : false"
                    @click="setEditNode(1)"
                    type="info"
                    icon="el-icon-top"
                    size="small"
                  >向上移动</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    v-if="menuStatus.update"
                    :disabled="itemdetail.pid == null ? true : false"
                    @click="setEditNode(2)"
                    type="info"
                    icon="el-icon-bottom"
                    size="small"
                  >向下移动</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    v-if="menuStatus.insert"
                    :disabled="itemdetail.pid == null ? true : false"
                    @click="setNewNode(1)"
                    type="success"
                    icon="el-icon-plus"
                    size="small"
                  >新增同级</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    v-if="menuStatus.insert"
                    :disabled="itemdetail.pid == null ? true : false"
                    @click="setNewNode(2)"
                    type="success"
                    icon="el-icon-plus"
                    size="small"
                  >新增子级</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    v-if="menuStatus.delete"
                    @click="setDelNode()"
                    :disabled="itemdetail.pid == null ? true : false"
                    type="danger"
                    icon="el-icon-delete"
                    size="small"
                  >删除</el-button>
                </el-form-item>

              </el-form>
            </div>

          </div>
        </div>
        <el-divider />
@@ -207,7 +245,9 @@
  deleteDir,
  getPerms,
} from '../../api/api';
import * as XSLX from 'xlsx';
import MyBread from '../../components/MyBread.vue';
import clone from '@turf/clone';
export default {
  name: 'catalogueManage',
  components: {
@@ -256,9 +296,129 @@
      },
      newNode: null,
      expandData: [],
      fileList: [],
      file: null,
      tableData: [],
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.file = file;
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; //这一步，是 展示最后一次选择文件;
        this.handle();
      }
    },
    async handle() {
      let file = this.file?.raw;
      if (!this.file) {
        console.log("文件打开失败");
        return;
      } else {
        const reader = new FileReader();
        let that = this;
        reader.readAsArrayBuffer(file);
        reader.onload = function () {
          const buffer = reader.result;
          const bytes = new Uint8Array(buffer);
          const length = bytes.byteLength;
          let binary = "";
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          const XLSX = require("xlsx");
          const wb = XLSX.read(binary, {
            type: "binary"
          });
          const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { defval: null }); // 默认第一行下为空也能解析出第一四行
          var data = [...outdata];
          const arr = [];
          data.map(v => {
            const obj = {};
            obj.name = v.name;
            obj.pname = v.pname;
            obj.descr = v.explain;
            obj.bak = v.bak;
            obj.orderNum = null;
            obj.pid = null;
            arr.push(obj);
          });
          that.tableData = arr
          that.setInsertData(that.tableData)
        }
      }
    },
    setInsertData(res) {
      var list = this.excelData(res);

      if (list.length != 0) {
        if (list[0].pname != null) {
          return this.$message.error('上传数据错误，第一条数据不为空');
        }

        this.getAllNodeId(list)
      }
    },
    async getAllNodeId(res) {
      for (let i = 0; i < res.length; i++) {

        var val = res[i];

        if (val.pname == null) {
          val.orderNum = this.dirList[this.dirList.length - 1].orderNum + 1;
          val.pid = 0;
        } else {
          this.tableData.filter((child) => {
            if (child.name == val.pname) {

              val.pid = child.id;
              val.orderNum = i + 1;
            }
          })
        }

        const data = await insertDir(val);
        if (data.code != 200) {

        }
        this.tableData.filter((child) => {
          if (child.name == val.name && child.pname == val.pname) {
            child.id = data.result;
          }
        })
        this.itemaName = data.result;
        this.getDirTree();



        if (res[i].children) {
          this.getAllNodeId(res[i].children)
        }
      }
    },
    excelData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.name == child.pname); // 对比ID，分别上下级菜单，并返回数据

        branchArr.length > 0 ? (father.children = branchArr) : ''; // 给父级添加一个children属性，并赋值
        // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pname == null; // 返回一级菜单
      });
    },
    readFile(file) {
      //文件读取
      return new Promise(resolve => {
        let reader = new FileReader();
        reader.readAsBinaryString(file); //以二进制的方式读取
        reader.onload = ev => {
          resolve(ev.target.result);
        };
      });
    },

    // 请求目录树
    getDirTree() {
      //获取目录树最大ID，新建节点使用
@@ -461,8 +621,8 @@
      });
    },
    remove(node, data) {
      this.itemaName =node.parent.data.id;
 
      this.itemaName = node.parent.data.id;

      this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
@@ -505,7 +665,6 @@
              this.$message.error('删除失败');
              this.itemdetail = {};
            });

          //重置要删除的子ID
          this.delChildIDs = [];
        })
@@ -673,7 +832,7 @@
      }
      for (var i = 0; i < permsEntity.length; i++) {
        if (val === permsEntity[i].perms) {
          console.log(i, permsEntity[i])

          this.showPermsMenu(permsEntity[i]);
        }
      }
@@ -708,6 +867,11 @@
      height: 91%;
      border-radius: 5px;
      padding: 1%;
      .menuTop {
        /deep/ .el-form-item {
          margin-bottom: 0px;
        }
      }
    }
  }
}