页面添加

surprise

2024-04-28 83ff2ebbb1d61c2cd7762df33f61ff0418b2b1c9

 src/views/maintenance/menuSettings.vue

@@ -10,200 +10,155 @@
    <div class="cataLogContent">
      <div class="left_Tree subpage_Div">
        <div style="width:auto">
          <el-tree
            ref="tree"
            :props="defaultProps"
            node-key="id"
            highlight-current
            :data="menuList"
            :expand-on-click-node="false"
            :default-expand-all="true"
            @node-click="handleNodeClick"
          >
          <el-tree ref="tree"
                   :props="defaultProps"
                   node-key="id"
                   highlight-current
                   :data="menuList"
                   :expand-on-click-node="false"
                   :default-expand-all="true"
                   @node-click="handleNodeClick">
          </el-tree>
        </div>
      </div>
      <div class="right_menu subpage_Div">
        <div style="display:flex;justify-content:right;align-items: center;padding-bottom: 14px">
          <el-breadcrumb separator="/" style="display: none">
          <el-breadcrumb separator="/"
                         style="display: none">
            <el-breadcrumb-item :to="{ path: '/' }">{{
            $t('dataManage.dictionaryManageObj.particulars')
          }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div>
            <el-button
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setNewNode(1)"
              type="success"
              icon="el-icon-plus"
              size="small"
            >{{$t('operatManage.menuSetObj.insert')}}</el-button>
            <el-button
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setNewNode(2)"
              type="success"
              icon="el-icon-plus"
              size="small"
            >{{$t('operatManage.menuSetObj.subInsert')}}</el-button>
            <el-button
              v-if="menuStatus.delete"
              @click="setDelNode()"
              :disabled="itemdetail.pid == null ? true : false"
              type="danger"
              icon="el-icon-delete"
              size="small"
            >{{$t('operatManage.menuSetObj.delete')}}</el-button>
            <el-button
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setEditNode(1)"
              type="info"
              icon="el-icon-top"
              size="small"
            >{{$t('operatManage.menuSetObj.moveUp')}}</el-button>
            <el-button
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
              @click="setEditNode(2)"
              type="info"
              icon="el-icon-bottom"
              size="small"
            >{{$t('operatManage.menuSetObj.moveDown')}}</el-button>
            <el-button :disabled="itemdetail.pid == null ? true : false"
                       @click="setNewNode(1)"
                       type="success"
                       icon="el-icon-plus"
                       size="small">{{$t('operatManage.menuSetObj.insert')}}</el-button>
            <el-button :disabled="itemdetail.pid == null ? true : false"
                       @click="setNewNode(2)"
                       type="success"
                       icon="el-icon-plus"
                       size="small">{{$t('operatManage.menuSetObj.subInsert')}}</el-button>
            <el-button @click="setDelNode()"
                       :disabled="itemdetail.pid == null ? true : false"
                       type="danger"
                       icon="el-icon-delete"
                       size="small">{{$t('operatManage.menuSetObj.delete')}}</el-button>
            <el-button :disabled="itemdetail.pid == null ? true : false"
                       @click="setEditNode(1)"
                       type="info"
                       icon="el-icon-top"
                       size="small">{{$t('operatManage.menuSetObj.moveUp')}}</el-button>
            <el-button :disabled="itemdetail.pid == null ? true : false"
                       @click="setEditNode(2)"
                       type="info"
                       icon="el-icon-bottom"
                       size="small">{{$t('operatManage.menuSetObj.moveDown')}}</el-button>
          </div>

        </div>
        <div class="dividing-line"></div>
<!--        <el-divider />-->
        <!--        <el-divider />-->
        <div class="form_box">
          <el-form
            :model="itemdetail"
            ref="itemdetail"
            :rules="rules"
            label-width="130px"
          >
            <el-form-item
              prop="enName"
              :label="$t('operatManage.menuSetObj.enName')"
              :label-width="formLabelWidth"
            >
              <el-input
                clear="el_input"
                v-model="itemdetail.enName"
                :placeholder="$t('operatManage.menuSetObj.enNameHolder')"
                autocomplete="off"
              ></el-input>
          <el-form :model="itemdetail"
                   ref="itemdetail"
                   :rules="rules"
                   label-width="130px">
            <el-form-item prop="enName"
                          :label="$t('operatManage.menuSetObj.enName')"
                          :label-width="formLabelWidth">
              <el-input clear="el_input"
                        v-model="itemdetail.enName"
                        :placeholder="$t('operatManage.menuSetObj.enNameHolder')"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              prop="cnName"
              :label="$t('operatManage.menuSetObj.cnName')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.cnName"
                :placeholder="$t('operatManage.menuSetObj.cnNameHolder')"
                autocomplete="off"
              ></el-input>
            <el-form-item prop="cnName"
                          :label="$t('operatManage.menuSetObj.cnName')"
                          :label-width="formLabelWidth">
              <el-input v-model="itemdetail.cnName"
                        :placeholder="$t('operatManage.menuSetObj.cnNameHolder')"
                        autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item-->
<!--              :label="$t('operatManage.menuSetObj.icon')"-->
<!--              :label-width="formLabelWidth"-->
<!--            >-->
<!--              <el-input-->
<!--                v-model="itemdetail.icon"-->
<!--                :placeholder="$t('operatManage.menuSetObj.iconHolder')"-->
<!--                autocomplete="off"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
            <el-form-item
              prop="isShow"
              :label="$t('operatManage.menuSetObj.isShow')"
              :label-width="formLabelWidth"
            >
              <el-select
                style="width: 400px"
                :popper-append-to-body="false"
                v-model="itemdetail.isShow"
                :placeholder="$t('operatManage.menuSetObj.show')"
              >
                <el-option :label="$t('operatManage.menuSetObj.hiddeen')" value="0" />
                <el-option :label="$t('operatManage.menuSetObj.isshow')" value="1" />
<!--                <el-option-->
<!--                  v-for="item in options1"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                >-->
<!--                </el-option>-->
            <!--            <el-form-item-->
            <!--              :label="$t('operatManage.menuSetObj.icon')"-->
            <!--              :label-width="formLabelWidth"-->
            <!--            >-->
            <!--              <el-input-->
            <!--                v-model="itemdetail.icon"-->
            <!--                :placeholder="$t('operatManage.menuSetObj.iconHolder')"-->
            <!--                autocomplete="off"-->
            <!--              ></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item prop="isShow"
                          :label="$t('operatManage.menuSetObj.isShow')"
                          :label-width="formLabelWidth">
              <el-select style="width: 400px"
                         :popper-append-to-body="false"
                         v-model="itemdetail.isShow"
                         :placeholder="$t('operatManage.menuSetObj.show')">
                <el-option :label="$t('operatManage.menuSetObj.hiddeen')"
                           value="0" />
                <el-option :label="$t('operatManage.menuSetObj.isshow')"
                           value="1" />
                <!--                <el-option-->
                <!--                  v-for="item in options1"-->
                <!--                  :key="item.value"-->
                <!--                  :label="item.label"-->
                <!--                  :value="item.value"-->
                <!--                >-->
                <!--                </el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.menuUrl')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.url"
                :placeholder="$t('operatManage.menuSetObj.menuUrlHolder')"
                autocomplete="off"
              ></el-input>
            <el-form-item :label="$t('operatManage.menuSetObj.menuUrl')"
                          :label-width="formLabelWidth">
              <el-input v-model="itemdetail.url"
                        :placeholder="$t('operatManage.menuSetObj.menuUrlHolder')"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.authorize')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.perms"
                :placeholder="$t('operatManage.menuSetObj.permsHolder')"
                autocomplete="off"
              ></el-input>
            <el-form-item :label="$t('operatManage.menuSetObj.authorize')"
                          :label-width="formLabelWidth">
              <el-input v-model="itemdetail.perms"
                        :placeholder="$t('operatManage.menuSetObj.permsHolder')"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.type')"
              prop="type"
              :label-width="formLabelWidth"
            >
              <el-select
                style="width: 400px"
                :popper-append-to-body="false"
                v-model="itemdetail.type"
                :placeholder="$t('operatManage.menuSetObj.typeHolder')"
              >
                <el-option :label="$t('operatManage.menuSetObj.rootpath')" value="0" />
                <el-option :label="$t('operatManage.menuSetObj.menu')" value="1" />
                <el-option :label="$t('operatManage.menuSetObj.button')" value="2" />
<!--                <el-option-->
<!--                  v-for="item in options2"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                >-->
<!--                </el-option>-->
            <el-form-item :label="$t('operatManage.menuSetObj.type')"
                          prop="type"
                          :label-width="formLabelWidth">
              <el-select style="width: 400px"
                         :popper-append-to-body="false"
                         v-model="itemdetail.type"
                         :placeholder="$t('operatManage.menuSetObj.typeHolder')">
                <el-option :label="$t('operatManage.menuSetObj.rootpath')"
                           value="0" />
                <el-option :label="$t('operatManage.menuSetObj.menu')"
                           value="1" />
                <el-option :label="$t('operatManage.menuSetObj.button')"
                           value="2" />
                <!--                <el-option-->
                <!--                  v-for="item in options2"-->
                <!--                  :key="item.value"-->
                <!--                  :label="item.label"-->
                <!--                  :value="item.value"-->
                <!--                >-->
                <!--                </el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.bak')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.bak"
                autocomplete="off"
                :placeholder="$t('operatManage.menuSetObj.bakHolder')"
              ></el-input>
            <el-form-item :label="$t('operatManage.menuSetObj.bak')"
                          :label-width="formLabelWidth">
              <el-input v-model="itemdetail.bak"
                        autocomplete="off"
                        :placeholder="$t('operatManage.menuSetObj.bakHolder')"></el-input>
            </el-form-item>
            <div v-if="menuStatus.update">
            <div>
              <el-form-item>
                <el-button
                    size="small"
                    type="primary"
                    @click="updMenu('itemdetail')"
                >{{ $t('common.confirm') }}</el-button>
                <el-button
                    size="small"
                    type="info"
                    @click="reset('itemdetail')"
                >{{
                <el-button size="small"
                           type="primary"
                           @click="updMenu('itemdetail')">{{ $t('common.confirm') }}</el-button>
                <el-button size="small"
                           type="info"
                           @click="reset('itemdetail')">{{
                    $t('common.cancel')
                  }}</el-button>
              </el-form-item>
@@ -214,140 +169,96 @@
      </div>
    </div>

    <el-dialog
      :title="$t('common.append')"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
        <div style="height: 500px; overflow: auto">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item
          prop="enName"
          :label="$t('operatManage.menuSetObj.enName')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.enName"
            autocomplete="off"
            style="width:85%"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.enName')"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="cnName"
          :label="$t('operatManage.menuSetObj.cnName')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.cnName"
            autocomplete="off"
            style="width:85%"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.cnName')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.menuSetObj.icon')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.icon"
            autocomplete="off"
            style="width:85%"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.icon')"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="isShow"
          :label="$t('operatManage.menuSetObj.isShow')"
          :label-width="formLabelWidth"
        >
          <el-select
            :popper-append-to-body="false"
            style="width:85%"
            v-model="ruleForm.isShow"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.isShow')"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.menuSetObj.menuUrl')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.url"
            autocomplete="off"
            style="width:85%"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.menuUrl')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.menuSetObj.authorize')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.perms"
            autocomplete="off"
            style="width:85%"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.authorize')"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.menuSetObj.type')"
          prop="type"
          :label-width="formLabelWidth"
        >
          <el-select
            :popper-append-to-body="false"
            style="width:85%"
            v-model="ruleForm.type"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.type')"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.menuSetObj.bak')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.bak"
            autocomplete="off"
            style="width:85%"
            :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.bak')"
          ></el-input>
        </el-form-item>
      </el-form>
       </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
    <el-dialog :title="$t('common.append')"
               :visible.sync="dialogFormVisible"
               :before-close="handleClose">
      <div style="height: 500px; overflow: auto">
        <el-form :model="ruleForm"
                 ref="ruleForm"
                 :rules="rules"
                 label-position="top">
          <el-form-item prop="enName"
                        :label="$t('operatManage.menuSetObj.enName')"
                        :label-width="formLabelWidth">
            <el-input v-model="ruleForm.enName"
                      autocomplete="off"
                      style="width:85%"
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.enName')"></el-input>
          </el-form-item>
          <el-form-item prop="cnName"
                        :label="$t('operatManage.menuSetObj.cnName')"
                        :label-width="formLabelWidth">
            <el-input v-model="ruleForm.cnName"
                      autocomplete="off"
                      style="width:85%"
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.cnName')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('operatManage.menuSetObj.icon')"
                        :label-width="formLabelWidth">
            <el-input v-model="ruleForm.icon"
                      autocomplete="off"
                      style="width:85%"
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.icon')"></el-input>
          </el-form-item>
          <el-form-item prop="isShow"
                        :label="$t('operatManage.menuSetObj.isShow')"
                        :label-width="formLabelWidth">
            <el-select :popper-append-to-body="false"
                       style="width:85%"
                       v-model="ruleForm.isShow"
                       :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.isShow')">
              <el-option v-for="item in options1"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.menuSetObj.menuUrl')"
                        :label-width="formLabelWidth">
            <el-input v-model="ruleForm.url"
                      autocomplete="off"
                      style="width:85%"
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.menuUrl')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('operatManage.menuSetObj.authorize')"
                        :label-width="formLabelWidth">
            <el-input v-model="ruleForm.perms"
                      autocomplete="off"
                      style="width:85%"
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.authorize')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('operatManage.menuSetObj.type')"
                        prop="type"
                        :label-width="formLabelWidth">
            <el-select :popper-append-to-body="false"
                       style="width:85%"
                       v-model="ruleForm.type"
                       :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.type')">
              <el-option v-for="item in options2"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operatManage.menuSetObj.bak')"
                        :label-width="formLabelWidth">
            <el-input v-model="ruleForm.bak"
                      autocomplete="off"
                      style="width:85%"
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.bak')"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          style="background: #409eff; color: white; border: 1px solid #409eff"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >{{ $t('common.confirm') }}</el-button>
        <el-button style="background: #409eff; color: white; border: 1px solid #409eff"
                   @click="submitForm('ruleForm')"
                   v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
@@ -369,7 +280,7 @@
  components: {
    MyBread,
  },
  data() {
  data () {
    return {
      menuStatus: {
        delete: false,
@@ -413,12 +324,12 @@
        type: null,
        bak: '',
      },
      rules :  {
      rules: {
        enName: [
          { required: true, message: this.$t('operatManage.menuSetObj.enNameHolder'), trigger: 'blur' },
          { required: true,message: this.$t('operatManage.menuSetObj.enNameHolder'),trigger: 'blur' },
        ],
        cnName: [
          { required: true, message: this.$t('operatManage.menuSetObj.cnNameHolder'), trigger: 'blur' },
          { required: true,message: this.$t('operatManage.menuSetObj.cnNameHolder'),trigger: 'blur' },
        ],

        isShow: [
@@ -439,27 +350,27 @@
      options1: [
        {
          value: 0,
          label:this.$t('operatManage.menuSetObj.hiddeen')
          label: this.$t('operatManage.menuSetObj.hiddeen')
        },
        {
          value: 1,
          label:this.$t('operatManage.menuSetObj.isshow')
          label: this.$t('operatManage.menuSetObj.isshow')
        },
      ],
      options2: [
        {
          value: 0,
          label:this.$t('operatManage.menuSetObj.rootpath')
          label: this.$t('operatManage.menuSetObj.rootpath')
          // label: '根目录',
        },
        {
          value: 1,
          label:this.$t('operatManage.menuSetObj.menu')
          label: this.$t('operatManage.menuSetObj.menu')
          // label: '菜单',
        },
        {
          value: 2,
          label:this.$t('operatManage.menuSetObj.button')
          label: this.$t('operatManage.menuSetObj.button')
          // label: '按钮',
        },
      ],
@@ -467,17 +378,17 @@
    };
  },
  methods: {
    getMenuTree() {
    getMenuTree () {
      //获取目录树最大ID，新建节点使用
      // queryMaxId().then((res) => {
      //   this.id = res.data;
      // });
      queryMenuAll().then((res) => {
        if (res.code == 200) {
          this.menuList = this.treeData(res.result);
          this.oriData = res.result;
          this.newData = res.result;
          if (this.itemdetail.id != null) {
        if(res.code==200) {
          this.menuList=this.treeData(res.result);
          this.oriData=res.result;
          this.newData=res.result;
          if(this.itemdetail.id!=null) {
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.itemdetail.id);
            });
@@ -490,44 +401,44 @@
        }
      });
    },
    treeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
    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 == 0; // 返回一级菜单
        let branchArr=cloneData.filter((child) => father.id==child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length>0? (father.children=branchArr):''; // 给父级添加一个children属性，并赋值
        return father.pid==0; // 返回一级菜单
      });
    },

    setEditNode(res) {
      let node = this.$refs.tree.getCurrentNode();
      let pchildNodes = this.$refs.tree.getNode(node.id).parent.childNodes;
      let currentId = {};
      for (let i = 0; i < pchildNodes.length; i++) {
        if (pchildNodes[i].data.id == node.id) {
          currentId = i;
    setEditNode (res) {
      let node=this.$refs.tree.getCurrentNode();
      let pchildNodes=this.$refs.tree.getNode(node.id).parent.childNodes;
      let currentId={};
      for(let i=0;i<pchildNodes.length;i++) {
        if(pchildNodes[i].data.id==node.id) {
          currentId=i;
        }
      }
      switch (res) {
      switch(res) {
        case 1://向上移动
          if (currentId != 0) {
            const tempChildrenNodex1 = pchildNodes[currentId - 1];
            const tempChildrenNodex2 = pchildNodes[currentId];
            tempChildrenNodex2.orderNum = pchildNodes[currentId - 1].data.orderNum;
            tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum
            var arr = [];
          if(currentId!=0) {
            const tempChildrenNodex1=pchildNodes[currentId-1];
            const tempChildrenNodex2=pchildNodes[currentId];
            tempChildrenNodex2.orderNum=pchildNodes[currentId-1].data.orderNum;
            tempChildrenNodex1.orderNum=pchildNodes[currentId].data.orderNum
            var arr=[];
            this.oriData.filter(res => {
              if (res.id == tempChildrenNodex2.data.id) {
                res.orderNum = tempChildrenNodex2.orderNum;
              if(res.id==tempChildrenNodex2.data.id) {
                res.orderNum=tempChildrenNodex2.orderNum;
                arr.push(res)
              } else if (res.id == tempChildrenNodex1.data.id) {
                res.orderNum = tempChildrenNodex1.orderNum;
              } else if(res.id==tempChildrenNodex1.data.id) {
                res.orderNum=tempChildrenNodex1.orderNum;
                arr.push(res)
              }

            })
            this.newData = arr;
            this.newData=arr;
            this.sendChange();
          } else {
            this.$message({
@@ -537,22 +448,22 @@
          }
          break;
        case 2://向下移动
          if (currentId < (pchildNodes.length - 1)) {
            const tempChildrenNodex1 = pchildNodes[currentId + 1];
            const tempChildrenNodex2 = pchildNodes[currentId];
            tempChildrenNodex2.orderNum = pchildNodes[currentId + 1].data.orderNum;
            tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum;
            var arr = [];
          if(currentId<(pchildNodes.length-1)) {
            const tempChildrenNodex1=pchildNodes[currentId+1];
            const tempChildrenNodex2=pchildNodes[currentId];
            tempChildrenNodex2.orderNum=pchildNodes[currentId+1].data.orderNum;
            tempChildrenNodex1.orderNum=pchildNodes[currentId].data.orderNum;
            var arr=[];
            this.oriData.filter(res => {
              if (res.id == tempChildrenNodex2.data.id) {
                res.orderNum = tempChildrenNodex2.orderNum;
              if(res.id==tempChildrenNodex2.data.id) {
                res.orderNum=tempChildrenNodex2.orderNum;
                arr.push(res)
              } else if (res.id == tempChildrenNodex1.data.id) {
                res.orderNum = tempChildrenNodex1.orderNum;
              } else if(res.id==tempChildrenNodex1.data.id) {
                res.orderNum=tempChildrenNodex1.orderNum;
                arr.push(res)
              }
            })
            this.newData = arr;
            this.newData=arr;
            this.sendChange();
          } else {
            this.$message({
@@ -565,36 +476,36 @@

      }
    },
    setDelNode() {
      this.remove(this.newNode, this.itemdetail)
    setDelNode () {
      this.remove(this.newNode,this.itemdetail)
    },
    setNewNode(res) {
      var id, lever, orderNum;
      if (res == 1) {//新增同级
        id = this.itemdetail.pid;
        orderNum = this.getMaxOrderNum(this.newNode.parent.childNodes)
    setNewNode (res) {
      var id,lever,orderNum;
      if(res==1) {//新增同级
        id=this.itemdetail.pid;
        orderNum=this.getMaxOrderNum(this.newNode.parent.childNodes)

        lever = this.itemdetail.level;
      } else if (res == 2) {//新增子级
        id = this.itemdetail.id;
        orderNum = this.getMaxOrderNum(this.newNode.childNodes)
        lever=this.itemdetail.level;
      } else if(res==2) {//新增子级
        id=this.itemdetail.id;
        orderNum=this.getMaxOrderNum(this.newNode.childNodes)

        lever = this.itemdetail.level + 1;
        lever=this.itemdetail.level+1;
      }

      this.ruleForm.pid = id;
      this.ruleForm.level = lever;
      this.ruleForm.orderNum = orderNum
      this.dialogFormVisible = true;
      this.ruleForm.pid=id;
      this.ruleForm.level=lever;
      this.ruleForm.orderNum=orderNum
      this.dialogFormVisible=true;
    },
    getMaxOrderNum(res) {
      var val = -100;
      for (var i in res) {
        if (res[i].data.orderNum > val) {
          val = res[i].data.orderNum
    getMaxOrderNum (res) {
      var val=-100;
      for(var i in res) {
        if(res[i].data.orderNum>val) {
          val=res[i].data.orderNum
        }
      }
      val = val + 1;
      val=val+1;
      return val;
    },

@@ -603,49 +514,49 @@



    append(node, data) {
      this.dialogFormVisible = true;
      this.ruleForm.pid = data.id;
      this.ruleForm.orderNum = node.childNodes.length + 1;
      this.ruleForm.level = data.level + 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;
    },
    resetForm(formName) {
    resetForm (formName) {
      this.$confirm("关闭后无法保存，是否关闭?")
        .then((_) => {
          this.dialogFormVisible = false;
          this.dialogFormVisible=false;
          this.$nextTick(() => {
            this.$refs[formName].resetFields();
            this.ruleForm = {};
            this.ruleForm={};
          });
        })
        .catch((_) => { });
    },
    submitForm(formName) {
    submitForm (formName) {
      this.$nextTick(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
          if(valid) {
            this.fullscreenLoading=true;
            insertMenu(this.ruleForm)
              .then((res) => {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                  this.fullscreenLoading=false;
                  if(res.code==200) {
                    this.$message({
                      message: '添加成功',
                      type: 'success',
                    });
                    this.getMenuTree();
                    this.itemdetail = {};
                    this.ruleForm = {};
                    this.dialogFormVisible = false;
                    this.itemdetail={};
                    this.ruleForm={};
                    this.dialogFormVisible=false;
                    this.$refs[formName].resetFields();
                  }
                }, 500);
                },500);
              })
              .catch((res) => {
                this.itemdetail = {};
                this.itemdetail={};
                this.$message.error('添加失败');
                this.fullscreenLoading = false;
                this.fullscreenLoading=false;
                console.log(res);
              });
          } else {
@@ -655,40 +566,40 @@
        });
      });
    },
    remove(node, data) {
      this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
    remove (node,data) {
      this.$confirm('此操作将删除该节点, 是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //兄弟重新排序
          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;
          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
          this.delChildIDs.push(data.id); //要删除的全部ID
          let delIDs = this.delChildIDs;
          let delIDs=this.delChildIDs;
          Promise.all([
            deleteMenu({ ids: delIDs.toString() }),
            updateMenuTrees(children),
          ])
            .then((res) => {
              if (res[0].code == 200 && res[1].code == 200) {
              if(res[0].code==200&&res[1].code==200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getMenuTree();
                this.itemdetail = {};
              } else if (res[0].code == 200) {
                this.itemdetail={};
              } else if(res[0].code==200) {
                this.getMenuTree();
                this.$message.error('删除成功，位置调整失败');
              } else if (res[1].code == 200) {
              } else if(res[1].code==200) {
                this.getMenuTree();
                this.$message.error('删除失败,位置调整成功');
              } else {
@@ -703,14 +614,14 @@
            });

          //重置要删除的子ID
          this.delChildIDs = [];
          this.delChildIDs=[];
        })
        .catch(() => {
          this.$message('已取消删除');
        });
    },
    traverseArr(obj) {
      if (obj.children) {
    traverseArr (obj) {
      if(obj.children) {
        return obj.children.forEach((item) => {
          // console.log(item.id + "---" + item.name);
          // this.delChildID += "id=" + item.id + "&";
@@ -720,55 +631,55 @@
      }
      return;
    },
    flaten(arr) {
      return arr.reduce((p, v, i) => {
        for (let i = 0; i < p.length; i++) {
          if (p[i].children) {
    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);
      }, []);
        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重新赋值
    handleDragStart (node,ev) {
      this.old_dirDat=JSON.parse(JSON.stringify(this.menuList)); //将备份的dir重新赋值
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      this.$confirm('此操作将保存目录更改, 是否继续?', '提示', {
    handleDrop (draggingNode,dropNode,dropType,ev) {
      this.$confirm('此操作将保存目录更改, 是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //父节点
          let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
          let data=dropType!='inner'? dropNode.parent.data:dropNode.data;
          // 父节点中全部子节点
          let nodeData =
            dropNode.level == 1 && dropType != 'inner' ? data : data.children;
          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;
          nodeData.forEach((item,i) => {
            if(dropType!='inner') {
              if(draggingNode.data.pid===dropNode.data.pid) {
                item.pid=item.pid;
              } else {
                item.pid = dropNode.data.pid;
                item.pid=dropNode.data.pid;
              }
            } else {
              item.pid = data.id;
              item.pid=data.id;
            }
            item.orderNum = i + 1;
            item.orderNum=i+1;
          });
          // console.log(nodeData);
          //更新原始整体数据
          let arr = [];
          let arr=[];
          this.oriData.forEach((e) => {
            nodeData.forEach((item) => {
              if (item.id === e.id) e = item;
              if(item.id===e.id) e=item;
            });
            arr.push(e);
          });
          this.newData = arr;
          this.newData=arr;
          this.sendChange();
        })
        .catch(() => {
@@ -776,18 +687,18 @@
            type: 'info',
            message: '已取消更改',
          });
          this.menuList = this.old_dirDat; //将备份的dir重新赋值
          this.menuList=this.old_dirDat; //将备份的dir重新赋值
        });
    },
    sendChange() {
    sendChange () {
      this.newData.forEach((item) => {
        if (item.pid == 0) {
          item.type = 0;
        if(item.pid==0) {
          item.type=0;
        }
      });
      updateMenuTrees(this.newData)
        .then((res) => {
          if (res.code == 200) {
          if(res.code==200) {
            this.getMenuTree();
            return;
          } else {
@@ -798,34 +709,34 @@
          this.$message.error('调整失败，请重试！');
        });
    },
    handleNodeClick(data, node) {
      this.newNode = node;
      this.backUpData = JSON.stringify(data);
      this.itemdetail = JSON.parse(JSON.stringify(data));
      this.itemdetail.isShow = this.itemdetail.isShow.toString();
      this.itemdetail.type = this.itemdetail.type.toString();
    handleNodeClick (data,node) {
      this.newNode=node;
      this.backUpData=JSON.stringify(data);
      this.itemdetail=JSON.parse(JSON.stringify(data));
      this.itemdetail.isShow=this.itemdetail.isShow.toString();
      this.itemdetail.type=this.itemdetail.type.toString();
    },
    updMenu(formName) {
    updMenu (formName) {
      this.$nextTick(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.fullscreenLoading = true;
          if(valid) {
            this.fullscreenLoading=true;
            updateMenuTree(this.itemdetail)
              .then((res) => {
                setTimeout(() => {
                  this.fullscreenLoading = false;
                  if (res.code == 200) {
                  this.fullscreenLoading=false;
                  if(res.code==200) {
                    this.$router.go(0);
                    this.getMenuTree();
                    this.itemdetail = {};
                    this.dialogFormVisible = false;
                    this.itemdetail={};
                    this.dialogFormVisible=false;
                    this.$refs[formName].resetFields();
                  }
                }, 500);
                },500);
              })
              .catch((res) => {
                this.$message.error('调整失败，请重试！');
                this.fullscreenLoading = false;
                this.fullscreenLoading=false;
              });
          } else {
            return false;
@@ -833,56 +744,56 @@
        });
      });
    },
    reset(formName) {
    reset (formName) {
      this.$refs[formName].resetFields();
      if (this.backUpData != '') {
        this.itemdetail = JSON.parse(this.backUpData);
      if(this.backUpData!='') {
        this.itemdetail=JSON.parse(this.backUpData);
      }
    },
    showPermsMenu(res) {
    showPermsMenu (res) {

      switch (res.tag) {
      switch(res.tag) {
        case '/delete':
          this.menuStatus.delete = true;
          this.menuStatus.delete=true;
          break;
        case '/insert':
          this.menuStatus.insert = true;
          this.menuStatus.insert=true;
          break;
        case '/update':
          this.menuStatus.update = true;
          this.menuStatus.update=true;
          break;
      }
    },
    getPerms() {
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;
    getPerms () {
      var val=this.$store.state.currentPerms;
      var permsEntity=this.$store.state.permsEntity;

      if (permsEntity.length == 0) {
      if(permsEntity.length==0) {
        getPerms().then((res) => {
          if (res.code == 200) {
            permsEntity = res.result;
          if(res.code==200) {
            permsEntity=res.result;
          }
        });
      }
      for (var i = 0; i < permsEntity.length; i++) {
        if (permsEntity[i].perms == val) {
      for(var i=0;i<permsEntity.length;i++) {
        if(permsEntity[i].perms==val) {
          this.showPermsMenu(permsEntity[i]);
        }
      }
    },
    handleClose() {
    handleClose () {
      this.$confirm("关闭后无法保存，是否关闭?")
        .then((_) => {
          this.dialogFormVisible = false
          this.dialogFormVisible=false
        })
        .catch((_) => { });
    },
  },
  mounted() {
  mounted () {
    this.getMenuTree();
    this.getPerms();
  },
  created() { },
  created () { },
};
</script>
<style lang="less" scoped>
@@ -903,7 +814,7 @@
      border-radius: 5px;
      padding: 1%;
      overflow-y: auto;
      border-right: 1px solid  #dcdfe6;
      border-right: 1px solid #dcdfe6;
    }
    .right_menu {
      width: 80%;
@@ -922,8 +833,7 @@
    }
  }
}
.btnBox{

.btnBox {
  position: absolute;
  bottom: 0;
  right: 0;