1

lxl

2022-10-12 1494c7949d90e1e8407b71606947dc8d9cb60778

 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>
      <My-bread :list="['运维管理', '单位管理']"></My-bread>
      <el-button class="saveBtn" type="primary" size="mini" @click="sendChange"
        >保存</el-button
      >
      <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"
      >
      </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')">
            <el-input
              v-model="formInline.user"
              :placeholder="$t('userManage.orgManageObj.companyName')"
            ></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>
          <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>
        <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-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 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>
    <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')">
    <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.username')"
              v-model="itemdetail.contact"
              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.fax" 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-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="formInline.user"
              :placeholder="$t('userManage.orgManageObj.name')"
              v-model="itemdetail.website"
              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.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>
        <el-table
          ref="multipleTable"
          :data="tableData1"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      </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-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-input v-model="ruleForm.name" autocomplete="off"></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 label="目录说明" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.descr" autocomplete="off"></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);
      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.depList = this.old_depData; //将备份的dir重新赋值
        });
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === "二级 3-1") {
        return type !== "inner";
      } else {
        return true;
      }
    sendChange() {
      updateDepTrees(this.newData)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "更新成功!",
            });
          }
        })
        .catch(() => {
          alert("修改失败，请重试！");
        });
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    handleNodeClick(data) {
      // console.log(data);
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    updDep() {
      updateDepTree(this.itemdetail).then((res) => {
        console.log(res);
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    reset() {
      this.itemdetail = JSON.parse(this.backUpData);
    },
    handleCheckChange() {},
  },
  created() {
   
  mounted() {
    this.getMenuTree();
  },
  mounted(){
    
    //  this.$nextTick(() => {
    // console.log($t('operatManage.operationLogObj.add'))
    // });
  }
};
</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;
    .el-tree {
      background: transparent;
      /deep/ .el-tree-node__label {
        font-size: 18px;
      }
      /deep/ .el-tree-node {
        padding-top: 10px;
        padding-bottom: 10px;
    .saveBtn {
      position: absolute;
      left: 250px;
      top: 23px;
    }
    .menuTreeBox {
      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;
          }
        }
      }
    }
  }
  .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;
      }
      .btnBox {
        margin: 0 270px 20px;
        width: 200px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>