页面添加

surprise

2024-04-28 83ff2ebbb1d61c2cd7762df33f61ff0418b2b1c9

 src/views/maintenance/menuSettings.vue

@@ -10,102 +10,76 @@
    <div class="cataLogContent">
      <div class="left_Tree subpage_Div">
        <div style="width:auto">
          <el-tree
            ref="tree"
          <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"
          >
                   @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"
            <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
              v-if="menuStatus.insert"
              :disabled="itemdetail.pid == null ? true : false"
                       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
              v-if="menuStatus.delete"
              @click="setDelNode()"
                       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
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
                       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
              v-if="menuStatus.update"
              :disabled="itemdetail.pid == null ? true : false"
                       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>
                       size="small">{{$t('operatManage.menuSetObj.moveDown')}}</el-button>
          </div>

        </div>
        <div class="dividing-line"></div>
<!--        <el-divider />-->
        <div class="form_box">
          <el-form
            :model="itemdetail"
          <el-form :model="itemdetail"
            ref="itemdetail"
            :rules="rules"
            label-width="130px"
          >
            <el-form-item
              prop="enName"
                   label-width="130px">
            <el-form-item prop="enName"
              :label="$t('operatManage.menuSetObj.enName')"
              :label-width="formLabelWidth"
            >
              <el-input
                clear="el_input"
                          :label-width="formLabelWidth">
              <el-input clear="el_input"
                v-model="itemdetail.enName"
                :placeholder="$t('operatManage.menuSetObj.enNameHolder')"
                autocomplete="off"
              ></el-input>
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              prop="cnName"
            <el-form-item prop="cnName"
              :label="$t('operatManage.menuSetObj.cnName')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.cnName"
                          :label-width="formLabelWidth">
              <el-input v-model="itemdetail.cnName"
                :placeholder="$t('operatManage.menuSetObj.cnNameHolder')"
                autocomplete="off"
              ></el-input>
                        autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item-->
<!--              :label="$t('operatManage.menuSetObj.icon')"-->
@@ -117,19 +91,17 @@
<!--                autocomplete="off"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
            <el-form-item
              prop="isShow"
            <el-form-item prop="isShow"
              :label="$t('operatManage.menuSetObj.isShow')"
              :label-width="formLabelWidth"
            >
              <el-select
                style="width: 400px"
                          :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" />
                         :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"-->
@@ -139,40 +111,31 @@
<!--                </el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.menuUrl')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.url"
            <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>
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.authorize')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.perms"
            <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>
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.type')"
            <el-form-item :label="$t('operatManage.menuSetObj.type')"
              prop="type"
              :label-width="formLabelWidth"
            >
              <el-select
                style="width: 400px"
                          :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" />
                         :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"-->
@@ -182,28 +145,20 @@
<!--                </el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('operatManage.menuSetObj.bak')"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="itemdetail.bak"
            <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>
                        :placeholder="$t('operatManage.menuSetObj.bakHolder')"></el-input>
            </el-form-item>
            <div v-if="menuStatus.update">
            <div>
              <el-form-item>
                <el-button
                    size="small"
                <el-button size="small"
                    type="primary"
                    @click="updMenu('itemdetail')"
                >{{ $t('common.confirm') }}</el-button>
                <el-button
                    size="small"
                           @click="updMenu('itemdetail')">{{ $t('common.confirm') }}</el-button>
                <el-button size="small"
                    type="info"
                    @click="reset('itemdetail')"
                >{{
                           @click="reset('itemdetail')">{{
                    $t('common.cancel')
                  }}</el-button>
              </el-form-item>
@@ -214,140 +169,96 @@
      </div>
    </div>

    <el-dialog
      :title="$t('common.append')"
    <el-dialog :title="$t('common.append')"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
               :before-close="handleClose">
        <div style="height: 500px; overflow: auto">
      <el-form
        :model="ruleForm"
        <el-form :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item
          prop="enName"
                 label-position="top">
          <el-form-item prop="enName"
          :label="$t('operatManage.menuSetObj.enName')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.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>
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.enName')"></el-input>
        </el-form-item>
        <el-form-item
          prop="cnName"
          <el-form-item prop="cnName"
          :label="$t('operatManage.menuSetObj.cnName')"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="ruleForm.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>
                      :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"
          <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>
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.icon')"></el-input>
        </el-form-item>
        <el-form-item
          prop="isShow"
          <el-form-item prop="isShow"
          :label="$t('operatManage.menuSetObj.isShow')"
          :label-width="formLabelWidth"
        >
          <el-select
            :popper-append-to-body="false"
                        :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"
                       :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"
            >
                         :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"
          <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>
                      :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"
          <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>
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.authorize')"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('operatManage.menuSetObj.type')"
          <el-form-item :label="$t('operatManage.menuSetObj.type')"
          prop="type"
          :label-width="formLabelWidth"
        >
          <el-select
            :popper-append-to-body="false"
                        :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"
                       :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"
            >
                         :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"
          <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>
                      :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.bak')"></el-input>
        </el-form-item>
      </el-form>
       </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
      <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"
        <el-button style="background: #409eff; color: white; border: 1px solid #409eff"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >{{ $t('common.confirm') }}</el-button>
                   v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
@@ -923,7 +834,6 @@
  }
}
.btnBox{

  position: absolute;
  bottom: 0;
  right: 0;