Source/UBCS-WEB/src/views/system/menu.vue

@@ -14,6 +14,7 @@
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @row-click="clickRowChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
@@ -21,11 +22,17 @@
               @tree-load="treeLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   v-if="permission.menu_delete"
                   plain
                   @click="handleDelete">删 除
          size="small"
          icon="el-icon-delete"
          v-if="permission.menu_delete"
          plain
          @click="handleDelete">删 除
        </el-button>
        <el-button type="success"
          size="small"
          icon="el-icon-connection"
          plain
          @click="cloneMenuButton">从其他菜单克隆按钮
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
@@ -45,11 +52,40 @@
        </div>
      </template>
    </avue-crud>
    <!-- 从其他菜单克隆按钮 -->
    <el-dialog title="从其他菜单克隆按钮"
        append-to-body
        :visible.sync="cloneOtherMenuButtons.cloneButtonSettingBox"
        width="1100px"
        @close="cleanCloneSelections"
        style="height: 110vh; margin-top: -10vh;">
        <avue-crud :option="cloneOtherMenuButtons.cloneOption"
          :table-loading="cloneOtherMenuButtons.cloneLoading"
          :data="cloneOtherMenuButtons.cloneData"
          ref="cloneCrud"
          @search-change="searchCloneChange"
          @search-reset="searchCloneReset"
          @selection-change="selectionCloneChange"
          @row-click="clickRowCloneChange"
          @refresh-change="refreshCloneChange"
          @on-load="cloneOnLoad"
          @tree-load="treeLoad">
          <template slot-scope="{row}" slot="source">
            <div style="text-align:center">
              <i :class="row.source"/>
            </div>
          </template>
        </avue-crud>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cloneButtonsToMenu">保 存</el-button>
          <el-button @click="cloneOtherMenuButtons.cloneButtonSettingBox = false">取 消</el-button>
        </div>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getLazyList, remove, update, add, getMenu} from "@/api/system/menu";
  import {getLazyList, remove, update, add, getMenu ,cloneMenuButton} from "@/api/system/menu";
  import {mapGetters} from "vuex";
  import iconList from "@/config/iconList";
  import func from "@/util/func";
@@ -69,7 +105,9 @@
          total: 0,
        },
        option: {
          height: "auto",
          lazy: true,
          columnBtn:false,
          tip: false,
          simplePage: true,
          searchShow: true,
@@ -82,6 +120,7 @@
          viewBtn: true,
          menuWidth: 300,
          dialogClickModal: false,
          highlightCurrentRow: true, //行选中时高亮
          column: [
            {
              label: "菜单名称",
@@ -223,6 +262,22 @@
              ]
            },
            {
              label: "路由缓存",
              prop: "keepAlive",
              type: "switch",
              dicData: [
                {
                  label: "否",
                  value: "false"
                },
                {
                  label: "是",
                  value: "true"
                }
              ],
              hide: true
            },
            {
              label: "菜单备注",
              prop: "remark",
              type: "textarea",
@@ -232,7 +287,136 @@
            }
          ]
        },
        data: []
        data: [],
        // 从其他菜单克隆按钮
        cloneOtherMenuButtons: {
          cloneButtonSettingBox: false,
          selectCloneButtons: [],
          cloneOption: {
            height: "auto",
            menu: false,
            header:false,
            addBtn: false,
            lazy: true,
            tip: false,
            simplePage: true,
            searchShow: true,
            searchMenuSpan: 6,
            dialogWidth: "60%",
            tree: true,
            border: true,
            index: true,
            selection: true,
            columnBtn: false,
            searchShowBtn: false,
            menuWidth: 300,
            dialogClickModal: false,
            highlightCurrentRow: true, //行选中时高亮
            column: [
              {
                label: "菜单名称",
                prop: "name",
                search: true,
              },
              {
                label: "路由地址",
                prop: "path",
              },
              {
                label: "上级菜单",
                prop: "parentId",
                type: "tree",
                hide: true,
                addDisabled: false,
                props: {
                  label: "title"
                },
              },
              {
                label: "菜单图标",
                prop: "source",
                type: "icon",
                slot: true,
                iconList: iconList,
              },
              {
                label: "菜单编号",
                prop: "code",
                search: true,
              },
              {
                label: "菜单类型",
                prop: "category",
                type: "radio",
                dicData: [
                  {
                    label: "菜单",
                    value: 1
                  },
                  {
                    label: "按钮",
                    value: 2
                  }
                ],
              },
              {
                label: "菜单别名",
                prop: "alias",
                search: true,
              },
              {
                label: "新窗口",
                prop: "isOpen",
                type: "radio",
                dicData: [
                  {
                    label: "否",
                    value: 1
                  },
                  {
                    label: "是",
                    value: 2
                  }
                ],
              },
              {
                label: "菜单排序",
                prop: "sort",
                type: "number",
              },
              {
                label: "路由缓存",
                prop: "keepAlive",
                type: "switch",
                dicData: [
                  {
                    label: "否",
                    value: "false"
                  },
                  {
                    label: "是",
                    value: "true"
                  }
                ],
              },
              {
                label: "菜单备注",
                prop: "remark",
                type: "textarea",
                span: 24,
                minRows: 2,
              }
            ]
          },
          cloneLoading: false,
          cloneData: [],
          cloneQuery: {},
          clonePage: {
            pageSize: 10,
            currentPage: 1,
            total: 0,
          },
        }
      };
    },
    watch: {
@@ -249,6 +433,7 @@
      },
    },
    computed: {
      // mapGetters: 辅助函数仅仅将store 中的 getter 映射到局部计算属性
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
@@ -257,6 +442,7 @@
          delBtn: this.vaildData(this.permission.menu_delete, false),
          editBtn: this.vaildData(this.permission.menu_edit, false)
        };

      },
      ids() {
        let ids = [];
@@ -267,6 +453,107 @@
      }
    },
    methods: {
      /** 从其他菜单克隆按钮 */
      cloneMenuButton(){
        if(this.selectionList.length != 1 || this.selectionList[0].category === 2){
          this.$message({
            type: "warning",
            message: "请选择一条非按钮类型的数据!"
          });
          return;
        }
        this.cloneOtherMenuButtons.cloneButtonSettingBox = true;
      },
      /** 克隆按钮到选中的菜单下 */
      cloneButtonsToMenu(){
        if(this.selectionList.length != 1){
          this.$message({
            type: "warning",
            message: "要克隆按钮的菜单信息已丢失，请重新选择!"
          });
          return;
        }
        if(this.cloneOtherMenuButtons.selectCloneButtons.length <= 0){
          this.$message({
            type: "warning",
            message: "请选择要克隆按钮数据!"
          });
          return;
        }
        this.$confirm("确定将选中的按钮克隆到【"+this.selectionList[0].name+"】菜单中?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        })
        .then(() => {
          let buttonIds = [];
          let flag = true;
          this.cloneOtherMenuButtons.selectCloneButtons.forEach(function(item) {
            if(item.category != 2){
              flag = false;
            }else {
              buttonIds.push(item.id);
            }
          });
          // 选择了非按钮类型的数据
          if(!flag){
            this.$message({
              type: "warning",
              message: "只能选择按钮类型的表格行!"
            });
            return;
          }
          // console.log(buttonIds);
          return cloneMenuButton({"menuId":this.selectionList[0].id,"buttonIds": buttonIds});
        })
        .then(res => {
          this.$message({
            type: res.data.success ? "success":"error",
            message: res.data.msg,
          });
          this.cloneOtherMenuButtons.cloneButtonSettingBox = false;
          // 数据回调进行刷新
          this.onLoad(this.page);
        });
      },
      /** 选中被克隆的按钮时触发 */
      selectionCloneChange(list) {
        this.cloneOtherMenuButtons.selectCloneButtons = list;
        this.$refs.cloneCrud.setCurrentRow(this.cloneOtherMenuButtons.selectCloneButtons[list.length-1]);
      },
      clickRowCloneChange(row){
        this.cloneOtherMenuButtons.selectCloneButtons.push(row);
        this.$refs.cloneCrud.setCurrentRow(row);
        this.$refs.cloneCrud.toggleRowSelection(row); //选中当前行
      },
      /** 关闭对话框时清空选中的列表 */
      cleanCloneSelections(){
        this.cloneOtherMenuButtons.selectCloneButtons = [];
        this.$refs.cloneCrud.toggleSelection();
      },
      cloneOnLoad(page, params = {}) {
        this.cloneOtherMenuButtons.cloneLoading = true;
        getLazyList(this.parentId, Object.assign(params, this.cloneOtherMenuButtons.cloneQuery)).then(res => {
          this.cloneOtherMenuButtons.cloneData = res.data.data;
          this.cloneOtherMenuButtons.cloneLoading = false;
        });
      },
      searchCloneChange(params, done){
        this.cloneOtherMenuButtons.cloneQuery = params;
        this.parentId = '';
        this.cloneOtherMenuButtons.clonePage.currentPage = 1;
        this.cloneOnLoad(this.cloneOtherMenuButtons.clonePage, params);
        done();
      },
      searchCloneReset(){
        this.cloneOtherMenuButtons.cloneQuery = {};
        this.parentId = 0;
        this.cloneOnLoad(this.cloneOtherMenuButtons.clonePage);
      },
      refreshCloneChange(){
        this.onLoad(this.cloneOtherMenuButtons.clonePage, this.cloneOtherMenuButtons.cloneQuery);
      },

      initData() {
        getMenuTree().then(res => {
          const column = this.findObject(this.option.column, "parentId");
@@ -303,6 +590,7 @@
            message: "操作成功!"
          });
          // 数据回调进行刷新
          this.onLoad()
          done(row);
        }, error => {
          window.console.log(error);
@@ -315,17 +603,17 @@
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            // 数据回调进行刷新
            done(row);
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
@@ -366,8 +654,15 @@
        this.onLoad(this.page, params);
        done();
      },
      clickRowChange(row){
        this.$refs.crud.toggleSelection();
        this.selectionList = row;
        this.$refs.crud.setCurrentRow(row);
        this.$refs.crud.toggleRowSelection(row); //选中当前行
      },
      selectionChange(list) {
        this.selectionList = list;
        this.$refs.crud.setCurrentRow(this.selectionList[list.length-1]);
      },
      selectionClear() {
        this.selectionList = [];