1

Surpriseplus

2022-11-18 462782f4b2ce653e84260ca586a58c8627c4ac9c

 src/views/maintenance/menuSettings.vue

@@ -1,7 +1,12 @@
<template>
  <div class="menuSettings_box">
    <div class="menuSettings_tree">
      <My-bread :list="['系统管理', '菜单设置']"></My-bread>
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
          `${$t('operatManage.menuSettings')}`,
        ]"
      ></My-bread>
      <el-divider />
    </div>
    <div class="left_Tree">
@@ -48,14 +53,16 @@
    <div class="right_menu">
      <el-card class="el-card-define">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">详细信息</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">{{
            $t('dataManage.dictionaryManageObj.particulars')
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider />
        <div class="form_box">
          <el-form :model="itemdetail" ref="itemdetail" :rules="rules">
            <el-form-item
              prop="enName"
              label="英文名称"
              :label="$t('operatManage.menuSetObj.enName')"
              :label-width="formLabelWidth"
            >
              <el-input
@@ -66,7 +73,7 @@
            </el-form-item>
            <el-form-item
              prop="cnName"
              label="中文名称"
              :label="$t('operatManage.menuSetObj.cnName')"
              :label-width="formLabelWidth"
            >
              <el-input
@@ -74,12 +81,15 @@
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth">
            <el-form-item
              :label="$t('operatManage.menuSetObj.icon')"
              :label-width="formLabelWidth"
            >
              <el-input v-model="itemdetail.icon" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              prop="isShow"
              label="是否显示"
              :label="$t('operatManage.menuSetObj.isShow')"
              :label-width="formLabelWidth"
            >
              <el-select
@@ -96,24 +106,30 @@
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单Url" :label-width="formLabelWidth">
            <el-form-item
              :label="$t('operatManage.menuSetObj.menuUrl')"
              :label-width="formLabelWidth"
            >
              <el-input v-model="itemdetail.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="授权" :label-width="formLabelWidth">
            <el-form-item
              :label="$t('operatManage.menuSetObj.authorize')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.perms"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="类型"
              :label="$t('operatManage.menuSetObj.type')"
              prop="type"
              :label-width="formLabelWidth"
            >
              <el-select
                style="width: 400px"
                v-model="itemdetail.type"
                placeholder="请选择类型"
                :placeholder="$t('common.choose')"
              >
                <el-option
                  v-for="item in options2"
@@ -124,49 +140,55 @@
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
            <el-form-item
              :label="$t('operatManage.menuSetObj.bak')"
              :label-width="formLabelWidth"
            >
              <el-input v-model="itemdetail.bak" autocomplete="off"></el-input>
            </el-form-item>
            <div class="btnBox" v-if="menuStatus.update">
              <el-button
                class="el-button-sure"
                type="primary"
                style="
                  background: #409eff;
                  color: white;
                  border: 1px solid #409eff;
                "
                @click="updMenu('itemdetail')"
                >保存</el-button
                >{{ $t('common.confirm') }}</el-button
              >
              <el-button
                class="el-button-remove"
                type="primary"
                @click="reset('itemdetail')"
                >取消</el-button
              >
              <el-button @click="reset('itemdetail')">{{
                $t('common.cancel')
              }}</el-button>
            </div>
          </el-form>
        </div>
      </el-card>
    </div>
    <el-dialog title="新增子菜单" :visible.sync="dialogFormVisible">
    <el-dialog :title="$t('common.append')" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-form-item
          prop="enName"
          label="英文名称"
          :label="$t('operatManage.menuSetObj.enName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.enName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="cnName"
          label="中文名称"
          :label="$t('operatManage.menuSetObj.cnName')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.cnName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('operatManage.menuSetObj.icon')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.icon" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="isShow"
          label="是否显示"
          :label="$t('operatManage.menuSetObj.isShow')"
          :label-width="formLabelWidth"
        >
          <el-select v-model="ruleForm.isShow" placeholder="">
@@ -179,14 +201,24 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单Url" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('operatManage.menuSetObj.menuUrl')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="授权" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('operatManage.menuSetObj.authorize')"
          :label-width="formLabelWidth"
        >
          <el-input v-model="ruleForm.perms" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
          <el-select v-model="ruleForm.type" placeholder="请选择类型">
        <el-form-item
          :label="$t('operatManage.menuSetObj.type')"
          prop="type"
          :label-width="formLabelWidth"
        >
          <el-select v-model="ruleForm.type" :placeholder="$t('common.choose')">
            <el-option
              v-for="item in options2"
              :key="item.value"
@@ -196,20 +228,22 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
        <el-form-item
          :label="$t('operatManage.menuSetObj.bak')"
          :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 class="el-button-sure" @click="resetForm('ruleForm')"
          >取消</el-button
        >
        <el-button @click="resetForm('ruleForm')">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          class="el-button-remove"
          type="primary"
          style="background: #409eff; color: white; border: 1px solid #409eff"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
          >{{ $t('common.confirm') }}</el-button
        >
      </div>
    </el-dialog>
@@ -225,6 +259,7 @@
  queryMaxId,
  insertMenu,
  deleteMenu,
  getPerms,
} from '../../api/api';
export default {
  //import引入的组件需要注入到对象中才能使用
@@ -599,9 +634,17 @@
  },
  created() {
    var val = this.$store.state.currentPerms;

    if (!val) {
      val = '/menu';
    }
    var permsEntity = this.$store.state.permsEntity;

    if (permsEntity.length == 0) {
      getPerms().then((res) => {
        if (res.code == 200) {
          permsEntity = res.result;
        }
      });
    }
    for (var i = 0; i < permsEntity.length; i++) {
      if (permsEntity[i].perms == val) {
        this.showPermsMenu(permsEntity[i]);
@@ -693,23 +736,7 @@
  /deep/.el-form-item__label {
    color: white;
  }
  .el-button-sure {
    width: 116px;
    height: 40px;
    background: linear-gradient(180deg, #002992, #080472);
    border: 1px solid #000000;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
    border-radius: 3px;
  }
  .el-button-remove {
    width: 116px;
    height: 40px;
    background: linear-gradient(180deg, #002992, #080472);
    border: 1px solid #000000;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
    opacity: 0.5;
    border-radius: 3px;
  }

  /*里面的代码可以根据自己需求去进行更改*/
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {