1

lxl

2022-10-12 1494c7949d90e1e8407b71606947dc8d9cb60778

1

 src/api/api.js

@@ -159,18 +159,7 @@
  return request.get('/sign/logout', { params: params });
}

//请求目录树数据
export function queryDirTree() {
  return service.get('/dir/selectDirAll');
}
//更新单条目录树
export function updateDirTree(params) {
  return service.post('/dir/updateDir', params);
}
//更新整体目录树
export function updateDirTrees(params) {
  return service.post('/dir/updateDirs', params);
}

//请求菜单栏数据
export function queryMenuTree() {
  return request.get('/Menu/selectMenuAll');
@@ -183,25 +172,43 @@
export function updateMenuTrees(params) {
  return request.post('/Menu/updateMenus', params);
}

//请求目录树数据
export function queryDirTree() {
  return request.get('/dir/selectDirAll');
}
//新增单条目录
export function insertDir(params) {
  return request.post('/dir/insertDir', params);
}
//删除多条目录
export function deleteDir(params) {
  return request.get('/dir/deleteDirs?' + params);
}
//更新单条目录树
export function updateDirTree(params) {
  return request.post('/dir/updateDir', params);
}
//更新整体目录树
export function updateDirTrees(params) {
  return request.post('/dir/updateDirs', params);
}


//请求单位树
export function queryDepTree() {
  return service.get('/dep/selectDepAll');
  return request.get('/dep/selectDepAll');
}
//更新单条单位数据
export function updateDepTree(params) {
  return service.post('/dep/updateDep', params);
  return request.post('/dep/updateDep', params);
}
//更新整体单位树
export function updateDepTrees(params) {
  return service.post('/dep/updateDeps', params);
  return request.post('/dep/updateDeps', params);
}

// è¯·æ±‚用户管理数据
export function queryPageUser(pageIndex, pageSize) {
  return service.get(
    '/user/selectByPageAndCount?pageIndex=' +
      pageIndex +
      '&pageSize=' +
      pageSize
  );
export function queryPageUser(params) {
  return request.get('/user/selectByPageAndCount', { params: params });
}

 src/assets/lang/en.js

@@ -18,6 +18,7 @@
    preservation: 'Preservation',
    close: 'Close',
    see: 'See',
    index: 'index',
  },
  dataManage: {
    dataManage: 'Data Manage',
@@ -368,9 +369,23 @@
      delete: 'Delete',
      apply: 'Apply',
      rejection: 'Rejection',
      companyName: 'Company name',
      depName: 'department name',
      userexport: 'Excel user export',
      userinput: 'Excel user input',
      userStatus: "User Status",
      addr: "address",
      bak: "notes",
      contact: "contact",
      edu: "education",
      email: "email",
      idcard: "idcard",
      job: "job",
      natives: "natives",
      pwd: "password",
      sex: "gender",
      status: "status",
      uname: "username",
      depid: "department",
      chineseName: 'Chinese Name [User Name]',
      affiliatedUnit: 'Affiliated unit [on-the-job]',
      mobileNumber: 'Mobile number [receive SMS]',

 src/assets/lang/zh.js

@@ -18,6 +18,8 @@
    preservation: '保存',
    close: '关闭',
    see: '查看',
    index: '序号',

  },
  dataManage: {
    dataManage: '数据管理',
@@ -370,9 +372,23 @@
      delete: '删除',
      apply: '申请',
      rejection: '拒批',
      companyName: '单位名称',
      depName: '单位名称',
      userexport: 'Excel用户导出',
      userinput: 'Excel用户导入',
      userStatus: "用户状态",
      uname: "用户名",
      pwd: "密码",
      sex: "性别",
      natives: "籍贯",
      idcard: "证件号",
      job: "工作",
      edu: "教育",
      addr: "地址",
      email: "电子邮件",
      contact: "联系方式",
      status: "状态",
      bak: "备注",
      depid: "所属部门",
      chineseName: '中文名[用户名]',
      affiliatedUnit: '所属单位[在职]',
      mobileNumber: '手机号[接收短信]',

 src/components/catalogueTree.vue

@@ -1,10 +1,5 @@
<template>
  <div class="wrap">
    <div class="bread">
      <el-breadcrumb separator="el-icon-arrow-right">
        <el-breadcrumb-item>{{ breadLabel }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="treeBox">
      <el-tree
        ref="tree"
@@ -15,12 +10,11 @@
        :default-expanded-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
        :draggable="draggable"
        @node-drag-start="handleDragStart"
        @node-click="handleNodeClick"
        @node-drop="handleDrop"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span class="btnBox" v-show="showEdit">
          <span class="btnBox">
            <el-button type="text" size="mini" @click="() => append(data)">
              <i class="el-icon-circle-plus"></i>
            </el-button>
@@ -34,10 +28,8 @@
          </span>
        </span>
      </el-tree>
      <!-- <div style="margin-left:130px;">
        <el-button @click="sendChange">保存</el-button>
      </div> -->
    </div>
    <button @click="sendChange">保存</button>
  </div>
</template>

@@ -45,25 +37,20 @@
import {
  queryDirTree,
  queryMaxId,
  updateDirTree,
  deleteDirTree,
  updateDirTrees,
  // deleteDirTree,
} from "../api/api";
export default {
  name: "catalogueTree",
  props: ["showBtn"],
  data() {
    return {
      draggable: false,
      draggable: true,
      id: null,
      showEdit: false,
      showBread: false,
      oriData: [], //原始树数据
      dirData: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      breadList: [], //面包屑数组
      breadLabel: "", //面包屑文字
      filterText: "",
      defaultProps: {
        children: "children",
        label: "name",
@@ -75,17 +62,16 @@
    // è¯·æ±‚目录树
    getDirTree() {
      //获取目录树最大ID，新建节点使用
      queryMaxId().then((res) => {
        this.id = res.data;
      });
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      // èŽ·å–目录树数据
      queryDirTree().then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.oriData = res.data;
          this.newData = res.data;
          this.dirData = this.treeData(res.data);
          // console.log(this.treeData(this.dirData));
        if (res.code == 200) {
          this.oriData = res.result;
          this.newData = res.result;
          this.dirData = this.treeData(res.result);
        } else {
          console.log("接口报错");
        }
@@ -99,7 +85,7 @@
        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.pid == -1; // è¿”回一级菜单
        return father.pid == 0; // è¿”回一级菜单
      });
    },
    append(data) {
@@ -113,7 +99,7 @@
            name: value,
            pid: data.id,
            // children: [],
            oid: data.children ? data.children.length + 1 : 1,
            orderNum: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);
@@ -123,7 +109,7 @@
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          this.sendChange();
          // this.sendChange();
        })
        .catch(() => {
          this.$message({
@@ -147,7 +133,7 @@
          for (var i in res) {
            std.push(res[i].id);
          }
          deleteDirTree(std);
          // deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: "success",
@@ -185,73 +171,39 @@
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleNodeClick(data) {
      // console.log(data);
      this.$store.commit("changeNode", data);
      this.breadList = [];
      this.getTreeNode(this.$refs.tree.getNode(data.id));
    },
    getTreeNode(node) {
      if (node && node.label) {
        this.breadList.unshift(node.label);
        this.getTreeNode(node.parent); //递归
        this.breadLabel = this.breadList.join(">");
        this.$store.commit("changeCata", this.breadLabel);
      }
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.dirData)); //将备份的dir重新赋值
    },

    handleDrop(draggingNode, dropNode, dropType, ev) {
      // console.log("被拖拽节点", draggingNode);
      // console.log("进入的节点", dropNode);
      // console.log("放置位置", dropType);
      // console.log("事件", ev);
      // if (dropType !== "inner") {
      //   // 1.修改父节点pid
      //   draggingNode.data.pid = dropNode.data.pid;
      //   dropNode.parent.childNodes.forEach((item, index) => {
      //     // 2.修改自身顺序oid
      //     item.data.oid = index + 1;
      //   });
      // }
      // // console.log(draggingNode.data.id);
      // let res = this.oriData.filter((item) => item.id == draggingNode.data.id);
      // console.log(res);
      this.$confirm("此操作将保存目录更改, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let paramData = [];
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          // çˆ¶èŠ‚点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
          let pid = "";
          //变更节点
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
              if (draggingNode.data.pid === dropNode.data.pid) {
                pid = item.pid;
                item.pid = item.pid;
              } else {
                pid = dropNode.data.pid;
                item.pid = dropNode.data.pid;
              }
            } else {
              pid = data.id;
              item.pid = data.id;
            }
            let collection = {
              id: item.id,
              name: item.name,
              pid,
              oid: i + 1,
            };
            paramData.push(collection);
            item.orderNum = i + 1;
          });
          // console.log(paramData);
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            paramData.forEach((item) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) {
                e = item;
              }
@@ -259,11 +211,6 @@
            arr.push(e);
          });
          this.newData = arr;
          this.sendChange();
          this.$message({
            type: "success",
            message: "更改成功!",
          });
        })
        .catch(() => {
          this.$message({
@@ -273,9 +220,8 @@
          this.dirData = this.old_dirDat; //将备份的dir重新赋值
        });
    },

    sendChange() {
      updateDirTree(this.newData).then((res) => {
      updateDirTrees(this.newData).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
@@ -294,15 +240,8 @@
      immediate: true,
      handler(val) {
        if (val) {
          this.showEdit = val;
          this.draggable = val;
        }
      },
    },
    showBread: {
      immediate: true,
      handler(val) {
        if (val) this.showBread = val;
      },
    },
  },

 src/components/customElMenu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
<template>
  <div class="faSub">
    <template v-for="item in menuData">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :key="item.id"
        :index="item.id + ''"
      >
        <template slot="title">{{
          $store.state.lang == "zh" ? item.cnName : item.enName
        }}</template>
        <MenuTree :menuData="item.children"></MenuTree>
      </el-submenu>
      <el-menu-item
        v-else
        :key="item.id"
        :index="item.url == null ? null : item.url + ''"
      >
        <span slot="title">{{
          $store.state.lang == "zh" ? item.cnName : item.enName
        }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  props: ["menuData"],
  name: "MenuTree",
  data() {
    return {
      name: "",
    };
  },
};
</script>
<style lang="less" scoped>
.faSub {
  /deep/ .el-submenu__title i {
    background-color: transparent !important;
    color: #fff;
  }
}
</style>

 src/components/navMenu.vue

@@ -7,144 +7,13 @@
      <div class="menu">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#3B4D6E"
          class="el-menu-vertical-demo"
          default-active="2"
          :default-active="activeIndex"
          background-color="#586884"
          text-color="#fff"
          router
          @open="handleOpen"
          @close="handleClose"
          @select="handleselect"
        >
          <el-submenu index="3" class="faSub">
            <template slot="title">
              <span>{{ $t('synthesis.synthesis') }}</span>
            </template>
            <el-menu-item index="Synthesis">{{
              $t('synthesis.synthesis')
            }}</el-menu-item>
            <el-menu-item index="Thematic">{{
              $t('synthesis.themaic')
            }}</el-menu-item>
            <el-menu-item index="Archive">{{
              $t('synthesis.archive')
            }}</el-menu-item>
          </el-submenu>
          <el-submenu index="1" class="faSub">
            <template slot="title">
              <span>{{ $t('dataManage.dataManage') }}</span>
            </template>
            <el-menu-item index="catalogueManage">{{
              $t('dataManage.catalogueManage')
            }}</el-menu-item>
            <el-menu-item index="dataUpdata">{{
              $t('dataManage.dataUpdata')
            }}</el-menu-item>
            <el-menu-item index="metadataManage">{{
              $t('dataManage.metadataManage')
            }}</el-menu-item>
            <el-menu-item index="dataLoading">{{
              $t('dataManage.dataLoading')
            }}</el-menu-item>
            <el-menu-item index="SpatialData">{{
              $t('dataManage.SpatialData')
            }}</el-menu-item>
            <el-menu-item index="versionManage">{{
              $t('dataManage.versionManage')
            }}</el-menu-item>
            <el-menu-item index="dictionaryManage">{{
              $t('dataManage.dictionaryManage')
            }}</el-menu-item>
            <el-menu-item index="styleManage">{{
              $t('dataManage.styleManage')
            }}</el-menu-item>
          </el-submenu>
          <el-submenu index="2" class="faSub">
            <template slot="title">
              <span>{{ $t('operatManage.operatManage') }}</span>
            </template>
            <el-submenu index="2-2">
              <template slot="title">{{
                $t('operatManage.systemLayout')
              }}</template>
              <el-menu-item index="menuSettings">{{
                $t('operatManage.menuSettings')
              }}</el-menu-item>
              <el-menu-item index="parameterConfiguration">{{
                $t('operatManage.parameterConfiguration')
              }}</el-menu-item>
              <el-menu-item index="rests">{{
                $t('operatManage.rests')
              }}</el-menu-item>
            </el-submenu>
            <el-menu-item index="authorityManagement">{{
              $t('operatManage.authorityManagement')
            }}</el-menu-item>
            <el-menu-item index="safetyManagement">{{
              $t('operatManage.safetyManagement')
            }}</el-menu-item>
            <el-submenu index="2-5">
              <template slot="title">{{
                $t('operatManage.operationMonitoring')
              }}</template>
              <el-menu-item index="eventlogManage">{{
                $t('operatManage.ResourceLog')
              }}</el-menu-item>
              <el-menu-item index="logLog">{{
                $t('operatManage.logLog')
              }}</el-menu-item>
              <el-menu-item index="operationLog">{{
                $t('operatManage.operationLog')
              }}</el-menu-item>
              <el-menu-item index="databaseMonitoring">{{
                $t('operatManage.databaseMonitoring')
              }}</el-menu-item>
              <el-menu-item index="systemMonitoring">{{
                $t('operatManage.systemMonitoring')
              }}</el-menu-item>
              <el-menu-item index="blackwhiteList"
                >{{ $t('operatManage.blackwhiteList') }}
              </el-menu-item>
              <el-menu-item index="tokentool">{{
                $t('operatManage.tokentool')
              }}</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="4" class="faSub">
            <template slot="title">
              <span>{{ $t('userManage.userManage') }}</span>
            </template>
            <el-menu-item index="userInfoManage">{{
              $t('userManage.userInfoManage')
            }}</el-menu-item>
            <el-menu-item index="orgManage">{{
              $t('userManage.orgManage')
            }}</el-menu-item>
            <el-menu-item index="userAuditing">{{
              $t('userManage.userAuditing')
            }}</el-menu-item>
            <el-menu-item index="roleManage">{{
              $t('userManage.roleManage')
            }}</el-menu-item>
            <el-menu-item index="groupManage">{{
              $t('userManage.groupManage')
            }}</el-menu-item>
            <el-menu-item index="authorityManage">{{
              $t('userManage.authorityManage')
            }}</el-menu-item>
            <el-menu-item index="resourceManage">{{
              $t('userManage.resManage')
            }}</el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="5" class="faSub">
            <template slot="title">数据交换</template>
            <el-menu-item index="5-1">数据分发</el-menu-item>
          </el-submenu> -->
          <!-- <el-submenu index="6" class="faSub">
            <template slot="title">服务管理</template>
            <el-menu-item index="6-1">数据服务注册开启</el-menu-item>
          </el-submenu> -->
          <customElMenu :menuData="menuList"></customElMenu>
        </el-menu>
      </div>
    </div>
@@ -165,75 +34,130 @@
</template>

<script>
import { logout } from '@/api/api';
import { removeToken, getToken } from '@/utils/auth';
import { logout } from "@/api/api";
import { removeToken, getToken } from "@/utils/auth";
import customElMenu from "../components/customElMenu.vue";
import { queryMenuTree, updateMenuTree, queryMaxId } from "../api/api";

export default {
  name: 'navMenu',
  name: "navMenu",
  //import引入的组件需要注入到对象中才能使用
  components: {
    customElMenu,
  },
  data() {
    return {
      lang: 'en',
      oriData: [], //原始树数据
      dirData: [], //el树数据
      newData: [], //拖动后数据
      lang: "zh",
      activeIndex: "/",
      menuList: [],
      editTitle: "",
      showPopover: false,
      showEditInfoWrapper: false,
      showEdit: false,
      editMenu: false,
      editCatalogue: false,
      editUnit: false,
      itemdetail: {},
      formLabelWidth: "70px",
    };
  },
  mounted() {
    this.getMenuTree();
  },
  computed: {},
  methods: {
    getMenuTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      // èŽ·å–目录树数据
      queryMenuTree().then((res) => {
        if (res.code == 200) {
          if (res.result.length != 0) {
            this.menuList = this.treeData(res.result);
          } else {
            alert("暂无菜单栏数据");
          }
        } else {
          console.log("接口报错");
        }
      });
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      // console.log(cloneData);
      if (cloneData.length != 0) {
        return cloneData.filter((father) => {
          // å¾ªçŽ¯æ‰€æœ‰é¡¹
          let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”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.pid == 1; // è¿”回一级菜单
        });
      } else {
        alert("暂无菜单栏数据");
      }
    },
    logOut() {
      this.$confirm('确认是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      this.$confirm("确认是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await logout({ token: getToken() });
          console.log(data);
          if (data.code != 200) {
            return this.$message.error('退出登录失败');
            return this.$message.error("退出登录失败");
          }
          removeToken();
          this.$router.push('/login');
          this.$router.push("/login");
          this.$message({
            message: '退出登录成功',
            type: 'success',
            message: "退出登录成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
            type: "info",
            message: "已取消",
          });
        });
    },
    handleOpen(key, keyPath) {
      if (
        keyPath[1] != 'dataLoading' &&
        keyPath[1] != '2-2' &&
        keyPath[1] != '2-5'
      )
        this.$router.push(keyPath[1]);
    },
    handleClose(key, keyPath) {
      if (
        keyPath[1] != 'dataLoading' &&
        keyPath[1] != '2-5' &&
        keyPath[1] != '2-2'
      )
        this.$router.push(keyPath[1]);
    },
    handleselect(index) {
      if (index != null) {
        this.$emit('shwoMapView', false);
      }
    },
    showChange() {
      this.$emit('shwoMapView', true);
    },
    switchLang() {
      if (this.lang == 'en') {
      //当前en
      if (this.lang == "en") {
        //语言换成zh
        this.lang = "zh";
        //菜单换为zh
        this.$store.commit("changeLang", "zh");
        //i18换成zh
        this.$i18n.locale = this.lang;
        this.lang = 'zh';
      } else {
        this.$i18n.locale = this.lang;
        this.lang = 'en';
      }
      //当前zh
      else {
        this.lang = "en";
        this.$i18n.locale = this.lang;
        this.$store.commit("changeLang", "en"); //传递点击的节点
      }
    },
    handleselect(index, indexPath) {
      if (index.indexOf("http") != -1) {
        this.$router.push("/databaseMonitoring");
        this.$store.commit("getIframe", index);
      } else if (isNaN(Number(index))) {
        this.$router.push(index);
      }
    },
  },
  watch: {
    $route() {
      this.activeIndex = this.$route.path;
    },
  },
};

 src/router/index.js

@@ -337,6 +337,7 @@
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },

    ],
  },
];

 src/store/index.js

@@ -11,10 +11,13 @@
  state: {
    catalogueName: '',
    cataNode: {},
    lang: 'zh',
    menuNode: {},
    verCateNode: {},
    verCateNodes: {},
    styleDirCateNodes: {},
    styleDepCateNodes: {},
    iframeMsg: '',
    token: getToken(),
    //请求计数
    apiCount: 0,
@@ -31,6 +34,17 @@
    changeNode(state, msg) {
      state.cataNode = msg;
    },
    changeLang(state, msg) {
      state.lang = msg;
    },
    getIframe(state, msg) {
      state.iframeMsg = msg;
    },
    changeName(state, msg) {
      state.menuNode = msg;
      // console.log(msg);

    },
    verChangeNode(state, msg) {
      state.verCateNode = msg;
    },

 src/views/datamanage/catalogueManage.vue

@@ -1,142 +1,481 @@
<template>
  <div class="pageWrapper">
    <div class="leftTree">
  <div class="cataSettings_box">
    <div class="cataSettings_tree">
      <My-bread :list="['数据管理', '目录管理']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      <el-divider />
      <div class="tree">
        <catalogueTree :showBtn="showBtn"></catalogueTree>
      <div class="cataTreeBox">
        <el-tree
          ref="tree"
          :props="defaultProps"
          node-key="id"
          :data="dirList"
          :expand-on-click-node="false"
          :default-expand-all="true"
          draggable
          @node-click="handleNodeClick"
          @node-drag-start="handleDragStart"
          @node-drag-end="handleDrop"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="btnBox">
              <el-button
                type="text"
                size="mini"
                @click="() => append(node, data)"
              >
                <i class="el-icon-circle-plus"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                <i class="el-icon-delete-solid"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="rightWrapper">
      <div class="leftTabs">
        <el-tabs type="border-card">
          <el-tab-pane label="查看">
            <el-form :model="form" :inline="true">
              <el-form-item label="目录编码">
                <el-input v-model="this.$store.state.cataNode.id" disabled />
    <div class="itemSettings">
      <div class="title_box">
        <h4>详细信息</h4>
      </div>
      <div class="form_box">
        <el-form :model="itemdetail">
          <!-- <el-form-item label="目录编码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.id" disabled />
          </el-form-item> -->
          <el-form-item label="目录名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.name" />
              </el-form-item>
              <el-form-item label="目录名称" label-width="100px">
                <el-input v-model="this.$store.state.cataNode.name" disabled />
              </el-form-item>
              <el-form-item label="目录说明">
          <el-form-item label="目录说明" :label-width="formLabelWidth">
                <el-input
                  v-model="form.desc"
              v-model="itemdetail.descr"
                  type="textarea"
                  resize="none"
                  style="height: 100%; overflow: auto"
                />
              </el-form-item>
              <el-form-item label="目录备注">
                <el-input v-model="form.notes" type="textarea" resize="none" />
          <el-form-item label="目录备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" type="textarea" resize="none" />
              </el-form-item>
              <el-form-item style="margin-left: 450px">
                <el-button type="primary" size="mini" @click="onSubmit"
                  >确定</el-button
          <div class="btnBox">
            <el-button type="primary" @click="updMenu">保存</el-button>
            <el-button type="primary" @click="reset">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
    '

    <el-dialog title="新增子目录" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item
          label="目录名称"
          prop="name"
          :label-width="formLabelWidth"
                >
                <el-button
                  style="margin-left: 50px"
                  size="mini"
                  @click="cancel"
                  >取消</el-button
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="descr"
          label="目录说明"
          :label-width="formLabelWidth"
                >
          <el-input v-model="ruleForm.descr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="bak" label="目录备注" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
        >
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryDirTree,
  queryMaxId,
  updateDirTrees,
  insertDir,
  deleteDir,
} from "../../api/api";
import MyBread from "../../components/MyBread.vue";
import catalogueTree from "../../components/catalogueTree.vue";
export default {
  name: "catalogueManage",
  components: {
    catalogueTree,
    MyBread,
  },
  data() {
    let validName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("目录名称不能为空"));
      } else {
        callback();
      }
    };
    return {
      showBtn: true,
      form: {
      defaultProps: {
        children: "children",
        label: "name",
      },
      fullscreenLoading: false,
      oriData: [], //原始树数据
      dirList: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {},
      backUpData: {},
      formLabelWidth: "170px",
      delChildIDs: "",
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        descr: "",
        bak: "",
      },
      rules: {
        name: [{ validator: validName, trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
    // è¯·æ±‚目录树
    getDirTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      // èŽ·å–目录树数据
      queryDirTree().then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.oriData = res.result;
          this.newData = res.result;
          this.dirList = this.treeData(res.result);
        } else {
          console.log("接口报错");
        }
      });
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      return cloneData.filter((father) => {
        // å¾ªçŽ¯æ‰€æœ‰é¡¹
        let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”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.pid == 0; // è¿”回一级菜单
      });
    },
    append(node, data) {
      this.dialogFormVisible = true;
      this.ruleForm.pid = data.id;
      this.ruleForm.orderNum = node.childNodes.length + 1;
      this.ruleForm.level = data.level + 1;
      // console.log(data);
      // console.log(node);
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },
    submitForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
            insertDir(this.ruleForm)
              .then((res) => {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                    this.$message({
                      message: "添加成功",
                      type: "success",
                    });
                    this.dialogFormVisible = false;
                    this.$refs[formName].resetFields();
                  }
                }, 2000);
              })
              .catch((res) => {
                console.log(res);
                this.fullscreenLoading = false;
              });
          } else {
            // alert("目录名称不能为空");
            return false;
          }
        });
      });
    },
    remove(node, data) {
      this.$confirm("此操作将删除该节点, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(node);
          // console.log(data);

          //兄弟重新排序
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          children.splice(data.orderNum - 1, 1);
          children.forEach((item, index) => {
            item.orderNum = index + 1;
          });

          this.traverseArr(data); //获取删除的子ID
          let delIDs = this.delChildIDs + "id=" + data.id; //要删除的全部ID
          console.log(delIDs);
          Promise.all([deleteDir(delIDs), updateDirTrees(children)])
            .then((res) => {
              console.log(res);
              if (res[0].code == 200 && res[1].code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            });

          //重置要删除的子ID
          this.delChildIDs = "";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    traverseArr(obj) {
      if (obj.children) {
        return obj.children.forEach((item) => {
          // console.log(item.id + "---" + item.name);
          this.delChildIDs += "id=" + item.id + "&";
          this.traverseArr(item);
        });
      }
      return;
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.dirList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm("此操作将保存目录更改, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          // çˆ¶èŠ‚点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
          //变更节点
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
              } else {
                item.pid = dropNode.data.pid;
              }
            } else {
              item.pid = data.id;
            }
            item.orderNum = i + 1;
          });
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) {
                e = item;
              }
            });
            arr.push(e);
          });
          this.newData = arr;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
          });
          this.dirList = this.old_dirDat; //将备份的dir重新赋值
        });
    },
    sendChange() {
      updateDirTrees(this.newData).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "更新成功!",
          });
        }
      });
    },
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    updMenu() {
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    cancel() {
    reset() {
      this.$message("已取消");
    },
    //  this.updateForm.name = this.$store.state.catalogueName;
  },
  mounted() {
    this.getDirTree();
  },
};
</script>

<style lang="less" scoped>
.pageWrapper {
.cataSettings_box {
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  height: 98.5%;
  margin-top: 6px;
  margin-left: 16px;
  .leftTree {
  .cataSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: #f4f8ff;
    background: rgb(240, 242, 245);
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    .breadcrumb {
      margin: 8px 0 0 24px;
    }
    hr {
      width: 304px;
      margin-top: 9px;
      background: #d3d3d3;
    }
    .tree {
      height: 90%;
    box-sizing: border-box;
      overflow: auto;
      padding-left: 5px;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .cataTreeBox {
      height: 88%;
      width: 100%;
      overflow: auto;
      .el-tree {
        background: transparent;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        /deep/ .el-tree-node {
          padding-top: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
    }
  }
  .rightWrapper {
    width: calc(100% - 350px);
      }
    }
  }
  .itemSettings {
    width: calc(100% - 344px);
    border-radius: 10px;
    background: rgb(240, 242, 245);
    margin-left: 10px;
    height: 100%;
    margin-left: 6px;
    background: #f4f8ff;
    padding: 10px;
    box-sizing: border-box;
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
      display: flex;
    border-radius: 10px;
    overflow: auto;
    .leftTabs {
      width: 99%;
      margin: 17px auto 0;
      /deep/.el-tabs--border-card {
        border-radius: 3px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
      }
      /deep/.el-tabs--border-card > .el-tabs__content {
        padding: 30px 0 0 38px;
        height: 87vh;
    .form_box {
      border: 1px solid rgb(202, 201, 204);
      border-radius: 10px;
      background: #fff;
      padding-top: 30px;
      box-sizing: border-box;
      width: 100%;
      .el-input,
      /deep/ .el-textarea {
        width: 400px;
      }
      .el-input {
        width: 467px;
      }
      /deep/ .el-textarea__inner {
        width: 1066px;
        height: 131px;
        overflow: auto;
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

 src/views/maintenance/databaseMonitoring.vue

@@ -1,12 +1,5 @@
<template>
  <div class="databaseMonitoring_box">
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.databaseMonitoring')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="table_box">
      <iframe
        id="iframe"
@@ -21,6 +14,7 @@

<script>
import MyBread from "../../components/MyBread.vue";
import { getToken } from "../../utils/auth.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -29,14 +23,23 @@
  data() {
    //这里存放数据
    return {
      sql_Url: sql_Url
      sql_Url: "",
    };
  },
  //方法集合
  methods: {
    handleSelectionChange() { },
    getUrl() {
      if (this.$store.state.iframeMsg.indexOf("Token=") != -1) {
        this.sql_Url = this.$store.state.iframeMsg + getToken();
      } else {
        this.sql_Url = this.$store.state.iframeMsg;
      }
  },
  created() { },
  },
  created() {
    this.getUrl();
  },
  mounted() { },
};
</script>

 src/views/maintenance/menuSettings.vue

@@ -2,46 +2,64 @@
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread :list="['运维管理', '菜单设置']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      <el-divider />
      <div class="menuTreeBox">
      <el-tree
        :data="data"
          ref="tree"
        :props="defaultProps"
        show-checkbox
        @check-change="handleCheckChange"
      />
          node-key="id"
          :data="menuList"
          :expand-on-click-node="false"
          :default-expand-all="true"
          draggable
          @node-click="handleNodeClick"
          @node-drag-start="handleDragStart"
          @node-drag-end="handleDrop"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="menuSettings">
      <div class="btn_box">
        <el-button type="primary">新建</el-button>
        <el-button type="primary">修改</el-button>
        <!-- <el-button class="delBtn">清除</el-button> -->
      <div class="title_box">
        <h4>详细信息</h4>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe>
          <el-table-column prop="menuname" label="菜单名称" />
          <el-table-column prop="parentmenuname" label="父菜单名称" />
          <el-table-column prop="dataBulk" label="数据数量" />
          <el-table-column prop="creationtime" label="创建时间" />
          <el-table-column prop="creationname" label="创建人" />
          <el-table-column fixed="right" label="操作" width="280">
            <template #default>
              <!-- <el-button type="primary" size="small">修改</el-button> -->
              <el-button type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10"
          >
          </el-pagination>
      <div class="form_box">
        <el-form :model="itemdetail">
          <el-form-item label="英文名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.enName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="中文名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.cnName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.icon" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否显示" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.isShow" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单Url" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="授权" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.perms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
          </el-form-item>
          <div class="btnBox">
            <el-button type="primary" @click="updMenu">保存</el-button>
            <el-button type="primary" @click="reset">取消</el-button>
        </div>
        </el-form>
      </div>
    </div>
  </div>
@@ -49,7 +67,12 @@

<script>
import MyBread from "../../components/MyBread.vue";

import {
  queryMenuTree,
  updateMenuTree,
  updateMenuTrees,
  queryMaxId,
} from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -58,169 +81,217 @@

  data() {
    return {
      currentPage4: 1,
      tableData: [
        {
          menuname: "数据质检",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "数据交换",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "数据管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "服务管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "综合展示",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "运维管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "菜单管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "用户管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "系统管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
        {
          menuname: "系统配置",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "admin",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        label: "cnName",
      },
      data: [
        {
          label: "数据质检",
      oriData: [], //原始树数据
      menuList: [], //el树数据
      old_dirDat: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {
        cnName: "",
        enName: "",
        icon: null,
        isShow: null,
        perms: null,
        url: "",
        type: null,
        bak: "",
        },
        {
          label: "数据交换",
        },
        {
          label: "数据管理",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "服务管理",
        },
        {
          label: "综合展示",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "运维管理",
          children: [
            {
              label: "Level two 3-1",
              children: [
                {
                  label: "Level three 3-1-1",
                },
              ],
            },
            {
              label: "Level two 3-2",
              children: [
                {
                  label: "Level three 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      backUpData: {},
      formLabelWidth: "170px",
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    getMenuTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryMenuTree().then((res) => {
        if (res.code == 200) {
          this.menuList = this.treeData(res.result);
          this.oriData = res.result;
          this.newData = res.result;
        } else {
          console.log("接口报错");
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      return cloneData.filter((father) => {
        // å¾ªçŽ¯æ‰€æœ‰é¡¹
        let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
        return father.pid == 1; // è¿”回一级菜单
      });
    },
    handleCheckChange() {},
    append(data) {
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          const newChild = {
            id: this.id + 1,
            name: value,
            pid: data.id,
            // children: [],
            orderNum: data.children ? data.children.length + 1 : 1,
          };
          this.id = newChild.id; //修改新的最大I
          console.log(newChild);

          if (!data.children) {
            this.$set(data, "children", []);
          }
          data.children.push(newChild);
          this.newData.push(newChild);
          // this.sendChange();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
  },
  created() {},
    remove(node, data) {
      this.$confirm("此操作将删除该节点, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex((d) => d.id === data.id);
          let res = children.splice(index, 1);
          var std = [];
          for (var i in res) {
            std.push(res[i].id);
          }
          // deleteDirTree(std);
          this.getDirTree();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleDragStart(node, ev) {
      this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm("是否调整至该位置?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          // çˆ¶èŠ‚点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
          //变更节点
          // console.log(nodeData);
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
              } else {
                item.pid = dropNode.data.pid;
              }
            } else {
              item.pid = data.id;
            }
            item.orderNum = i + 1;
          });
          console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) e = item;
            });
            arr.push(e);
          });
          this.newData = arr;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
          });
          this.menuList = this.old_dirDat; //将备份的dir重新赋值
        });
    },
    sendChange() {
      updateMenuTrees(this.newData).then((res) => {
        if (res.code == 200) {
          alert("更改完成。请及时刷新页面！");
          return;
        } else {
          alert("修改失败，请重试！");
        }
      });
    },
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    updMenu() {
      updateMenuTree(this.itemdetail).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          alert("修改完成，请及时刷新页面！");
          return;
        } else {
          alert("修改失败，请重试！");
        }
      });
    },
    reset() {
      this.itemdetail = JSON.parse(this.backUpData);
    },
  },
  mounted() {
    this.getMenuTree();
  },
};
</script>
<style lang="less" scoped>
@@ -233,6 +304,7 @@
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
@@ -240,14 +312,39 @@
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      height: 90%;
      overflow: auto;
    .el-tree {
      background: transparent;
      /deep/ .el-tree-node__label {
        font-size: 18px;
      }
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        // /deep/ .el-tree-node__label {
        //   font-size: 18px;
        // }
      /deep/ .el-tree-node {
        padding-top: 10px;
        padding-bottom: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
          }
        }
      }
    }
  }
@@ -259,7 +356,7 @@
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .btn_box {
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;
@@ -267,19 +364,22 @@
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
      .delBtn {
        margin-left: auto;
      }
    }
    .table_box {
    .form_box {
      border: 1px solid rgb(202, 201, 204);
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      padding-top: 30px;
      box-sizing: border-box;
      width: 100%;
      .el-table__body {
        width: 100% !important;
      .el-input {
        width: 400px;
      }
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

 src/views/userManage/orgManage.vue

@@ -1,388 +1,122 @@
<template>
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread
        :list="[
          `${$t('userManage.userManage')}`,
          `${$t('userManage.orgManage')}`,
        ]"
      ></My-bread>
      <el-divider />
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
      <My-bread :list="['运维管理', '单位管理']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      <el-divider />
      <div class="menuTreeBox">
        <el-tree
          ref="tree"
          :props="defaultProps"
          node-key="id"
          :data="depList"
          :expand-on-click-node="false"
          :default-expand-all="true"
          draggable
          @node-click="handleNodeClick"
          @node-drag-start="handleDragStart"
          @node-drag-end="handleDrop"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span class="btnBox">
              <el-button
                type="text"
                size="mini"
                @click="() => append(node, data)"
              >
                <i class="el-icon-circle-plus"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                <i class="el-icon-delete-solid"></i>
              </el-button>
            </span>
          </span>
      </el-tree>
    </div>
    <div class="menuSettings">
      <div class="btn_box">
        <div class="herder_box">
          {{ $t("operatManage.operationLogObj.queryRegion") }}
        </div>
        <el-form :inline="true" :model="formInline" size="small">
          <el-form-item :label="$t('userManage.orgManageObj.companyName')">
    <div class="itemSettings">
      <div class="title_box">
        <h4>详细信息</h4>
      </div>
      <div class="form_box">
        <el-form :model="itemdetail">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="简称" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.sname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="编码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="机构代码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.uncode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.addr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input
              v-model="formInline.user"
              :placeholder="$t('userManage.orgManageObj.companyName')"
              v-model="itemdetail.contact"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('userManage.orgManageObj.flatType')">
            <el-select
              v-model="formInline.region"
              :placeholder="$t('userManage.orgManageObj.flatType')"
            >
              <el-option label="全部" value="全部"></el-option>
              <el-option label="海域行政部门" value="海域行政部门"></el-option>
              <el-option label="海域监测部门" value="海域监测部门"></el-option>
              <el-option label="海监执法部门" value="海监执法部门"></el-option>
              <el-option label="技术中心" value="技术中心"></el-option>
              <el-option label="信息中心" value="信息中心"></el-option>
              <el-option label="用海单位" value="用海单位"></el-option>
            </el-select>
          <el-form-item label="传真" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.fax" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              plain
              >{{ $t("userManage.orgManageObj.inquire") }}</el-button
            >
            <el-button type="primary" icon="el-icon-delete" plain>{{
              $t("userManage.orgManageObj.delete")
            }}</el-button>
          <el-form-item label="电子邮件" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.post" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="网站地址" :label-width="formLabelWidth">
            <el-input
              v-model="itemdetail.website"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
          </el-form-item>
          <div class="btnBox">
            <el-button type="primary" @click="updDep">保存</el-button>
            <el-button type="primary" @click="reset">取消</el-button>
          </div>
        </el-form>
        <div>
          <el-button
            type="success"
            @click="outerVisible = true"
            icon="el-icon-circle-plus"
            size="small"
            >{{ $t("userManage.orgManageObj.add") }}</el-button
          >
        </div>
      </div>
      <div class="table_box">
        <el-table :data="tableData" stripe>
          <el-table-column
            type="index"
            width="80"
            :label="$t('userManage.orgManageObj.num')"
    <el-dialog title="新增子目录" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item
          label="目录名称"
          prop="name"
          :label-width="formLabelWidth"
          >
          </el-table-column>
          <el-table-column
            prop="menuname"
            :label="$t('userManage.orgManageObj.companyName')"
          />
          <el-table-column
            prop="parentmenuname"
            :label="$t('userManage.orgManageObj.flatType')"
          />
          <el-table-column
            prop="dataBulk"
            :label="$t('userManage.orgManageObj.phone')"
          />
          <el-table-column
            fixed="right"
            :label="$t('userManage.orgManageObj.operate')"
            width="280"
          >
            <template #default>
              <el-button type="warning" size="small">{{
                $t("userManage.orgManageObj.edit")
              }}</el-button>
              <el-button type="success" size="small">{{
                $t("userManage.orgManageObj.add")
              }}</el-button>
              <el-button type="danger" size="small">{{
                $t("userManage.orgManageObj.delete")
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="新增" :visible.sync="outerVisible" :modal-append-to-body="true" :append-to-body="true">
      <el-dialog
        width="30%"
        :title="dialogTitle"
        :visible.sync="innerVisible"
        append-to-body
      >
       <el-form :inline="true" :model="formInline" size="small">
          <el-form-item :label="$t('userManage.orgManageObj.username')">
            <el-input
              v-model="formInline.user"
              :placeholder="$t('userManage.orgManageObj.username')"
            ></el-input>
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>
       
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              plain
              >{{ $t("userManage.orgManageObj.inquire") }}</el-button
            >
            <el-button type="primary" icon="el-icon-delete" plain>{{
              $t("userManage.orgManageObj.delete")
            }}</el-button>
        <el-form-item label="目录说明" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.descr" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" :label="$t('userManage.orgManageObj.ChineseNameUsername')">
          </el-table-column>
          <el-table-column prop="name" :label="$t('userManage.orgManageObj.phoneNumberToTeceiveShortMessages')">
          </el-table-column>
          <el-table-column prop="address" :label="$t('userManage.orgManageObj.status')"> </el-table-column>
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10"
          >
          </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary">{{$t('userManage.orgManageObj.confirm')}}</el-button>
          <el-button @click="innerVisible = false">{{$t('userManage.orgManageObj.close')}}</el-button>
        </div>
      </el-dialog>
      <el-dialog
        width="30%"
        title="行政区划-列表"
        :visible.sync="innerVisible1"
        append-to-body
      >
       <el-form :inline="true" :model="formInline" size="small">
          <el-form-item :label="$t('userManage.orgManageObj.name')">
            <el-input
              v-model="formInline.user"
              :placeholder="$t('userManage.orgManageObj.name')"
            ></el-input>
          </el-form-item>
       
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              icon="el-icon-search"
              plain
              >{{ $t("userManage.orgManageObj.inquire") }}</el-button
            >
            <el-button type="primary" icon="el-icon-delete" plain>{{
              $t("userManage.orgManageObj.delete")
            }}</el-button>
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" :label="$t('userManage.orgManageObj.name')"> </el-table-column>
          <el-table-column prop="address" :label="$t('userManage.orgManageObj.coding')" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="address"
            :label="$t('userManage.orgManageObj.codeOfAdministrativeDivision')"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="address"
            :label="$t('userManage.orgManageObj.LevelForExaminationAndApproval')"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="address"
            :label="$t('userManage.orgManageObj.seaAreaUseClass')"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="10"
          >
          </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
           <el-button type="primary">{{$t('userManage.orgManageObj.confirm')}}</el-button>
          <el-button @click="innerVisible1 = false">{{$t('userManage.orgManageObj.close')}}</el-button>

        </div>
      </el-dialog>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
      >
        <div class="flexForm">
          <div style="width: 50%">
            <el-form-item :label="$t('userManage.orgManageObj.companyName')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.pinyinInitials')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.abbreviation')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.unitCode')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.organizationCode')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.companyAdministrator')" prop="name">
              <el-input
                v-model="ruleForm.name"
                :disabled="true"
                style="width: calc(100% - 138px)"
              ></el-input>
              <el-button
                type="primary"
                icon="el-icon-more"
                @click="innerVisible = true"
              ></el-button>
              <el-button type="danger">清除</el-button>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.phone')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </div>
          <div style="width: 50%">
            <el-form-item :label="$t('userManage.orgManageObj.picture')">
              <el-upload
                :auto-upload="false"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="request"
                :limit="1"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.flatType')" prop="region">
              <el-select
                v-model="ruleForm.region"
                placeholder=""
                style="width: 100%"
              >
                <el-option
                  label="海域行政部门"
                  value="海域行政部门"
                ></el-option>
                <el-option
                  label="海域监测部门"
                  value="海域监测部门"
                ></el-option>
                <el-option
                  label="海监执法部门"
                  value="海监执法部门"
                ></el-option>
                <el-option label="技术中心" value="技术中心"></el-option>
                <el-option label="信息中心" value="信息中心"></el-option>
                <el-option label="用海单位" value="用海单位"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('userManage.orgManageObj.division')" prop="name">
              <el-input
                v-model="ruleForm.name"
                :disabled="true"
                style="width: calc(100% - 138px)"
              ></el-input>
              <el-button
                type="primary"
                icon="el-icon-more"
                @click="innerVisible1 = true"
              ></el-button>
              <el-button type="danger">清除</el-button>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.EMail')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.fax')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('userManage.orgManageObj.postalCode')" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </div>
        </div>

        <el-form-item :label="$t('userManage.orgManageObj.website')" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('userManage.orgManageObj.cmpanyAddress')" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('userManage.orgManageObj.companyIntroduction')" prop="name">
          <el-input
            type="textarea"
            :rows="2"
            placeholder=""
            v-model="ruleForm.textarea"
          >
          </el-input>
        <el-form-item label="目录备注" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.bak" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >{{$t('userManage.orgManageObj.immediatelyCreate')}}</el-button
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">{{$t('userManage.orgManageObj.reset')}}</el-button>
      </div>
    </el-dialog>
  </div>
@@ -390,317 +124,288 @@

<script>
import MyBread from "../../components/MyBread.vue";

import {
  queryDepTree,
  updateDepTree,
  updateDepTrees,
  queryMaxId,
} from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    let validName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("目录名称不能为空"));
      } else {
        callback();
      }
    };
    return {
      dialogTitle:"用户-列表",
      tableData1: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
        },
      ],
      imageUrl: "",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 åˆ° 5 ä¸ªå­—符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      outerVisible: false,
      innerVisible: false,
      innerVisible1: false,
      formInline: {
        user: "",
        region: "",
      },
      currentPage4: 4,
      tableData: [
        {
          menuname: "数据质检",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "数据交换",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "数据管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "服务管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "综合展示",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "运维管理",
          parentmenuname: "",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "菜单管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "用户管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "系统管理",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
        {
          menuname: "系统配置",
          parentmenuname: "运维管理",
          dataBulk: "1",
          creationtime: "2022-7-20",
          creationname: "张三",
        },
      ],
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [
                {
                  id: 11,
                  label: "三级 3-2-1",
                },
                {
                  id: 12,
                  label: "三级 3-2-2",
                },
                {
                  id: 13,
                  label: "三级 3-2-3",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        label: "name",
      },
      multipleSelection: [],
      fullscreenLoading: false,
      oriData: [], //原始树数据
      depList: [], //el树数据
      old_depData: [], //el树数据(拖动前)
      newData: [], //拖动后原始数据
      itemdetail: {
        addr: "",
        bak: "",
        code: "",
        contact: "",
        email: "",
        fax: "",
        name: "",
        post: "",
        sname: "",
        uncode: "",
        website: "",
      },
      backUpData: {},
      formLabelWidth: "170px",
      deleteIDs: "",
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        name: "",
        descr: "",
        bak: "",
      },
      rules: {
        name: [{ validator: validName, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    getMenuTree() {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryDepTree().then((res) => {
        if (res.code == 200) {
          this.oriData = res.result;
          this.newData = res.result;
          this.depList = this.treeData(res.result);
        } else {
          console.log("接口报错");
        }
      });
    },
    request(param) {},
    onSubmit() {
      console.log("submit!");
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // å¯¹æºæ•°æ®æ·±åº¦å…‹éš†
      return cloneData.filter((father) => {
        // å¾ªçŽ¯æ‰€æœ‰é¡¹
        let branchArr = cloneData.filter((child) => father.id == child.pid); // å¯¹æ¯”ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // ç»™çˆ¶çº§æ·»åŠ ä¸€ä¸ªchildren属性，并赋值
        return father.pid == 1; // è¿”回一级菜单
      });
    },
    append(node, data) {
      this.dialogFormVisible = true;
      this.ruleForm.pid = data.id;
      this.ruleForm.orderNum = node.childNodes.length + 1;
      this.ruleForm.level = data.level + 1;
      // console.log(data);
      // console.log(node);
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          // console.log(this.ruleForm);
          // insertDir(this.ruleForm)
          //   .then((res) => {
          //     setTimeout(() => {
          //       this.fullscreenLoading = false;
          //       if (res.code == 200) {
          //         this.$message({
          //           message: "添加成功",
          //           type: "success",
          //         });
          //       }
          //     }, 2000);
          //   })
          //   .catch((res) => {
          //     console.log(res);
          //     this.fullscreenLoading = false;
          //   });

          // this.validCode = ""; //清空验证码输入框的内容
        } else {
          // alert("目录名称不能为空");
          return false;
        }
      });
    },
    remove(node, data) {
      this.$confirm("此操作将删除该节点, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(node);
          // console.log(data);

          const parent = node.parent;
          const children = parent.data.children || parent.data;
          children.splice(data.orderNum - 1, 1);
          children.forEach((item, index) => {
            item.orderNum = index + 1;
          });

          this.traverseArr(data);
          console.log(this.deleteIDs);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // this.dialogMessage="是否删除"
      // this.dialogFlag = 1;
      // this.dialogFrom ={
      //   node:node,
      //   val:data
      // }
      //   this.dialogVisible=true;//目录树更改弹窗
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // let res = children.splice(index, 1);
      // // console.log(res);
      // // console.log(data);
      // console.log(this.flaten(res));
    },
    traverseArr(obj) {
      if (obj.children) {
        return obj.children.forEach((item) => {
          // console.log(item.id + "---" + item.name);
          this.deleteIDs += "id=" + item.id + "&";
          this.traverseArr(item);
        });
      }
      return;
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
            delete p[i].children;
          }
        }
        return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
      }, []);
    },
    handleDragStart(node, ev) {
      console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log("tree drag end: ", dropNode && dropNode.label, dropType);
      this.old_depData = JSON.parse(JSON.stringify(this.depList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log("tree drop: ", dropNode.label, dropType);
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === "二级 3-1") {
        return type !== "inner";
      this.$confirm("此操作将保存目录更改, æ˜¯å¦ç»§ç»­?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //父节点
          let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          // çˆ¶èŠ‚点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != "inner" ? data : data.children;
          //变更节点
          // console.log(nodeData);
          nodeData.forEach((item, i) => {
            if (dropType != "inner") {
              if (draggingNode.data.pid === dropNode.data.pid) {
                item.pid = item.pid;
      } else {
        return true;
                item.pid = dropNode.data.pid;
      }
            } else {
              item.pid = data.id;
            }
            item.orderNum = i + 1;
          });
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          this.oriData.forEach((e) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) e = item;
            });
            arr.push(e);
          });
          this.newData = arr;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更改",
          });
          this.depList = this.old_depData; //将备份的dir重新赋值
        });
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    sendChange() {
      updateDepTrees(this.newData)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "更新成功!",
            });
          }
        })
        .catch(() => {
          alert("修改失败，请重试！");
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    updDep() {
      updateDepTree(this.itemdetail).then((res) => {
        console.log(res);
      });
    },
    handleCheckChange() {},
    reset() {
      this.itemdetail = JSON.parse(this.backUpData);
  },
  created() {
   
  },
  mounted(){
    
    //  this.$nextTick(() => {
    // console.log($t('operatManage.operationLogObj.add'))
    // });
  }
    this.getMenuTree();
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.menuSettings_box {
  //   background: rgb(240, 242, 245);
  border-radius: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  .menuSettings_tree {
    position: relative;
    width: 344px;
    height: 100%;
    background: rgb(240, 242, 245);
@@ -708,18 +413,41 @@
    border-radius: 10px;
    box-sizing: border-box;
    overflow: auto;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      height: 88%;
      width: 100%;
      overflow: auto;
    .el-tree {
      background: transparent;
      /deep/ .el-tree-node__label {
        font-size: 18px;
      }
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      /deep/ .el-tree-node {
        padding-top: 10px;
        padding-bottom: 10px;
          // padding-bottom: 10px;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #b9b9b9;
        }
        /deep/ .el-tree-node__content:hover {
          background-color: rgb(153, 153, 153);
        }
        .btnBox {
          margin-left: 5px;
          .el-button + .el-button {
            margin-left: 5px;
      }
    }
  }
  .menuSettings {
    }
  }
  .itemSettings {
    width: calc(100% - 344px);
    border-radius: 10px;
    background: rgb(240, 242, 245);
@@ -727,66 +455,33 @@
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    .btn_box {
    .title_box {
      background: #fff;
      padding: 10px;
      margin-bottom: 24px;

      display: flex;
      border-radius: 10px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
      .delBtn {
        margin-left: auto;
      }
      .herder_box {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
        font-size: 14px;
      }
    }
    .table_box {
    .form_box {
      border: 1px solid rgb(202, 201, 204);
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      padding-top: 30px;
      box-sizing: border-box;
      width: 100%;
      .el-table__body {
        width: 100% !important;
      .el-input,
      /deep/ .el-textarea {
        width: 400px;
      }
    }
  }
}
.avatar-uploader {
  width: 120px;
  height: 120px;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.flexForm {
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
      }
    }
  }
}
</style>

 src/views/userManage/userInfoManage.vue

@@ -9,18 +9,18 @@
    <el-divider />
    <div class="inquire">
      <el-form ref="ruleForm" :model="form" :inline="true">
        <el-form-item :label="$t('operatManage.ELM.username')" prop="username">
        <el-form-item :label="$t('operatManage.ELM.username')" prop="name">
          <el-input
            v-model="form.username"
            v-model="form.name"
            :placeholder="$t('operatManage.ELM.usernameInfo')"
          />
        </el-form-item>
        <el-form-item
        <!-- <el-form-item
          :label="$t('userManage.userInfoObj.userStatus')"
          prop="ownedSystem"
          prop="userStatus"
        >
          <el-select
            v-model="form.ownedSystem"
            v-model="form.userStatus"
            :placeholder="$t('userManage.userInfoObj.userStatus')"
          >
            <el-option :label="$t('userManage.userInfoObj.all')" value="all" />
@@ -45,13 +45,13 @@
              value="rejection"
            />
          </el-select>
        </el-form-item>
        </el-form-item> -->
        <el-form-item
          :label="$t('userManage.userInfoObj.companyName')"
          prop="requestIp"
          :label="$t('userManage.userInfoObj.depName')"
          prop="depName"
        >
          <el-input
            v-model="form.requestIp"
            v-model="form.depName"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
@@ -59,95 +59,130 @@
        <el-form-item>
          <el-button type="success" size="small" @click="showAddDialog"
            ><i class="el-icon-plus"></i>&nbsp;{{
              $t('common.append')
              $t("common.append")
            }}</el-button
          >
          <el-button type="primary" size="small">
            {{ $t('userManage.userInfoObj.userinput') }}</el-button
          >
          <el-button type="primary" size="small">
            {{ $t('userManage.userInfoObj.userexport') }}</el-button
          >
        </el-form-item>
        <el-form-item style="margin-left: 60%">
          <el-button @click="onSubmit"
          <el-button @click="onSubmit" size="mini"
            ><i class="el-icon-search"></i> &nbsp;{{
              $t('operatManage.ELM.search')
              $t("operatManage.ELM.search")
            }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('ruleForm')"
          <el-button @click="resetForm('ruleForm')" size="mini"
            ><i class="el-icon-delete"></i>&nbsp;{{
              $t('operatManage.ELM.reset')
              $t("operatManage.ELM.reset")
            }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table_box">
      <el-table :data="tableData" stripe style="width: 100%" height="99%">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        max-height="99%"
      >
        <el-table-column
          align="center"
          type="index"
          :label="$t('operatManage.ELM.index')"
          width="70px"
          :label="$t('common.index')"
          fixed
        />
        <el-table-column
          align="center"
          prop="username"
          width="220px"
          :label="$t('userManage.userInfoObj.chineseName')"
          prop="uname"
          :label="$t('userManage.userInfoObj.uname')"
          fixed
        />
        <el-table-column
          align="center"
          prop="ip"
          width="220px"
          :label="$t('userManage.userInfoObj.affiliatedUnit')"
          prop="pwd"
          :label="$t('userManage.userInfoObj.pwd')"
        />

        <el-table-column
          align="center"
          prop="ownedSystem"
          width="230px"
          :label="$t('userManage.userInfoObj.mobileNumber')"
        />
        <el-table-column
          align="center"
          prop="largeModuleName"
          :label="$t('userManage.userInfoObj.state')"
          prop="sex"
          :label="$t('userManage.userInfoObj.sex')"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.largeModuleName == '正常'" type="success">{{
              scope.row.largeModuleName
            }}</el-tag>
            <el-tag v-if="scope.row.largeModuleName == '异常'" type="danger">{{
              scope.row.largeModuleName
            }}</el-tag>
            <span v-if="scope.row.sex == 1"> ç”· </span>
            <span v-else-if="scope.row.sex == 0">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="smallModuleName"
          :label="$t('userManage.userInfoObj.post')"
          prop="natives"
          :label="$t('userManage.userInfoObj.natives')"
        />
        <el-table-column
          align="center"
          prop="resourceName"
          :label="$t('userManage.userInfoObj.addtime')"
          prop="depName"
          :label="$t('userManage.userInfoObj.depName')"
        />
        <el-table-column
          fixed="right"
          :label="$t('common.operate')"
          width="200"
          align="center"
          prop="idcard"
          :label="$t('userManage.userInfoObj.idcard')"
        /><el-table-column
          align="center"
          prop="job"
          :label="$t('userManage.userInfoObj.job')"
        />
        <el-table-column
          align="center"
          prop="edu"
          :label="$t('userManage.userInfoObj.edu')"
        />
        <el-table-column
          align="center"
          prop="addr"
          :label="$t('userManage.userInfoObj.addr')"
        />
        <el-table-column
          align="center"
          prop="email"
          :label="$t('userManage.userInfoObj.email')"
        />
        <el-table-column
          align="center"
          prop="contact"
          :label="$t('userManage.userInfoObj.contact')"
        />

        <el-table-column
          align="center"
          prop="largeModuleName"
          :label="$t('userManage.userInfoObj.status')"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
            <el-tag v-if="scope.row.status == 1" type="info">禁用</el-tag>
            <el-tag v-if="scope.row.status == 2" type="warning">删除</el-tag>
            <el-tag v-if="scope.row.status == 3">申请</el-tag>
            <el-tag v-if="scope.row.status == 4" type="danger">拒批</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="bak"
          :label="$t('userManage.userInfoObj.bak')"
        />
        <el-table-column :label="$t('common.operate')" fixed="right">
          <template #default>
            <!-- <el-button type="primary" size="small">修改</el-button> -->

            <el-button type="warning" size="small">{{
              $t('common.edit')
            <el-button type="warning" size="mini">{{
              $t("common.edit")
            }}</el-button>
            <el-button type="danger" size="small">{{
              $t('common.delete')
            <el-button type="danger" size="mini">{{
              $t("common.delete")
            }}</el-button>
          </template>
        </el-table-column>
@@ -160,424 +195,87 @@
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="9"
          :total="1"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" width="57%" >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="$t('userManage.userInfoObj.userAccount')"
          name="first"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              :label="$t('userManage.userInfoObj.username')"
              prop="name"
            >
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('userManage.userInfoObj.userpssword')"
              prop="password"
            >
              <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('userManage.userInfoObj.userstate')"
              prop="password"
            >
              <label>{{ $t('userManage.userInfoObj.toapplied') }}</label>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('userManage.userInfoObj.userInformation')"
          name="second"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="180px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.userchinesename')"
                  prop="name"
                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.username')"
                  prop="name"
                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.sex')"
                >
                  <el-radio v-model="radio" label="1">{{$t('userManage.userInfoObj.userMan')}}</el-radio>
                  <el-radio v-model="radio" label="2">{{$t('userManage.userInfoObj.userWoMan')}}</el-radio>
                </el-form-item>
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.nativePlace')"
                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div style="margin-left: 35px">
                  <div
                    style="
                      width: 205px;
                      height: 185px;
                      border: 1px solid gray;
                      margin: 5px;
                    "
                  >
                    <img />
                  </div>
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary">{{$t('common.clickupload')}}</el-button>
                    <span style="color: red"
                      >  {{$t('userManage.userInfoObj.spantitle1')}}</span
                    >
                  </el-upload>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.identityCard')"
                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.education')"

                >
                  <el-select
                    v-model="form.region1"
                    class="select"
                    :placeholder="$t('userManage.userInfoObj.pleaseSelect')"
                  >
                    <el-option :label="$t('userManage.userInfoObj.doctor')" value="a1" />
                     <el-option :label="$t('userManage.userInfoObj.master')" value="a2" />
                        <el-option :label="$t('userManage.userInfoObj.undergraduate')" value="a3" />
                           <el-option :label="$t('userManage.userInfoObj.juniorCollege')" value="a4" />
                              <el-option :label="$t('userManage.userInfoObj.other')" value="a5" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.occupation')"
                >
                  <el-select
                    v-model="form.region2"
                    class="select"
                      :placeholder="$t('userManage.userInfoObj.pleaseSelect')"
                  >
                    <el-option :label="$t('userManage.userInfoObj.assistant')"  value="b1" />
                    <el-option :label="$t('userManage.userInfoObj.intermediate')"  value="b2" />
                     <el-option :label="$t('userManage.userInfoObj.senior')"  value="b3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                ><el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.post')"

                >
                  <el-select
                    class="select"
                    v-model="form.region3"
                       :placeholder="$t('userManage.userInfoObj.pleaseSelect')"
                  >
            <el-option  :label="$t('userManage.userInfoObj.v1')"   value="c1" />
            <el-option  :label="$t('userManage.userInfoObj.fv1')"   value="c2" />
              <el-option  :label="$t('userManage.userInfoObj.v2')"   value="c3" />  <el-option  :label="$t('userManage.userInfoObj.fv2')"   value="c4" />
                <el-option  :label="$t('userManage.userInfoObj.v3')"   value="c5" />
                  <el-option  :label="$t('userManage.userInfoObj.fv3')"   value="c6" />
                    <el-option  :label="$t('userManage.userInfoObj.v4')"   value="c7" />
                      <el-option  :label="$t('userManage.userInfoObj.fv4')"   value="c8" />
                        <el-option  :label="$t('userManage.userInfoObj.v5')"   value="c9" />
                            <el-option  :label="$t('userManage.userInfoObj.fv5')"   value="c10" />
            <el-option  :label="$t('userManage.userInfoObj.v6')"   value="c11" />
              <el-option  :label="$t('userManage.userInfoObj.v7')"   value="c12" />  <el-option  :label="$t('userManage.userInfoObj.fv7')"   value="c13" />
                <el-option  :label="$t('userManage.userInfoObj.v8')"   value="c14" />
                  <el-option  :label="$t('userManage.userInfoObj.v9')"   value="c15" />
                    <el-option  :label="$t('userManage.userInfoObj.fv9')"   value="c16" />

                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
                        <el-row>
              <el-col :span="12">
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.email')"

                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  <el-form-item
                  :label="$t('userManage.userInfoObj.major')"

                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  :label="$t('userManage.userInfoObj.phoneNumber')"

                >
                  <el-input
                    v-model="ruleForm.name"
                    style="width: 225px"
                  ></el-input>
                  <el-checkbox style="margin-left: 10px" v-model="checked"
                    >{{$t('userManage.userInfoObj.receiveSMS')}}</el-checkbox
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  :label="$t('userManage.userInfoObj.officeTelephone')"

                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                   <el-form-item
                  :label="$t('userManage.userInfoObj.addressbook')"

                >
                  <el-input style="width:755px" v-model="ruleForm.name"></el-input>
                </el-form-item>
                </el-col>
              </el-form-item>
            </el-row>
             <el-row>
                <el-col :span="24">
                   <el-form-item
                  :label="$t('userManage.userInfoObj.remarks')"
                >
                  <el-input type="textarea" style="width:755px" v-model="ruleForm.name"></el-input>
                </el-form-item>
                </el-col>
              </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="24">
                   <el-form-item
                  :label="$t('userManage.userInfoObj.scanningcopy')"

                >
              <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture"
                  >
                    <el-button size="small" type="primary">{{$t('common.upload')}}</el-button>
                    <span style="color: red"
                      >  {{$t('userManage.userInfoObj.spantitle2')}}</span>
                  </el-upload>
                </el-form-item>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" @click="onSubmit">{{$t('common.preservation')}}</el-button>
      <el-button>{{$t('common.close')}}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';

import MyBread from "../../components/MyBread.vue";
import { queryPageUser } from "../../api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },

  data() {
    return {
      currentPage: 1,
      dialogTableVisible: false,
      activeName: 'first',
      ruleForm: { name: '', password: '' },
      ruleForm1: {
        name: '',
        value: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 åˆ° 5 ä¸ªå­—符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg =
                /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/;
              if (!passwordreg.test(value)) {
                callback(
                  new Error('密码必须由数字、字母、特殊字符组合,请输入8-20位')
                );
    let validName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("目录名称不能为空"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
    return {
      currentPage: 1,
      form: {
        username: '',
        ownedSystem: 'all',
        requestIp: '',
        operationType: '',
        date: '',
        username: "",
        userStatus: "all",
        requestIp: "",
      },
      tableData: [
        {
          username: '管理员',
          ip: '221.182.31.12',
          date: '2022-08-05',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
      tableData: [],
      fullscreenLoading: false,
      itemdetail: {},
      formLabelWidth: "170px",
      dialogFormVisible: false,
      ruleForm: {
        level: null,
        orderNum: null,
        pid: null,
        name: "",
        descr: "",
        bak: "",
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
      rules: {
        name: [{ validator: validName, trigger: "blur" }],
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '异常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '异常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '异常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
        {
          date: '2022-08-05',
          username: '管理员',
          ownedSystem: '',
          largeModuleName: '正常',
          smallModuleName: '资源操作日志',
          resourceName: '',
          operationType: '查询',
          ip: '221.182.31.12',
        },
      ],
    };
  },
  methods: {
    getUserInfo(params) {
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryPageUser({
        pageIndex: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
        } else {
          console.log("接口报错");
        }
      });
    },
    // getUserInfo() {
    //   //获取目录树最大ID，新建节点使用
    //   // queryMaxId().then((res) => {
    //   //   this.id = res.data;
    //   // });
    //   queryDepTree().then((res) => {
    //     if (res.status == 200) {
    //       this.depList = this.treeData(res.data.result);
    //       this.oriData = res.data.result;
    //       this.newData = res.data.result;
    //     } else {
    //       console.log("接口报错");
    //     }
    //   });
    // },

    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`);
    },
@@ -585,7 +283,7 @@
      console.log(`当前页: ${val}`);
    },
    onSubmit() {
      console.log('submit!');
      console.log("submit!");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
@@ -594,7 +292,9 @@
      this.dialogTableVisible = true;
    },
  },
  created() { },
  mounted() {
    this.getUserInfo(1, 10);
  },
};
</script>
<style>