supply-front/src/views/setting/menu.vue

<template>
  <div class="app-container">
    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add')">添加菜单</el-button>
        </div>
        <div class="fr">
          <!-- <el-input placeholder="请输入菜单名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
            <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
          </el-input> -->
        </div>
      </div>

      <div class="table">
        <el-table :data="dataList" row-key="moduleId" border default-expand-all :tree-props="{children: 'children'}">
          <el-table-column prop="moduleName" label="菜单名称" min-width="150"></el-table-column>
          <el-table-column prop="url" label="菜单URL" min-width="150"></el-table-column>
          <el-table-column align="center" prop="icon" label="菜单图标">
            <template slot-scope="scope">
              <i :class="scope.row.icon" style="font-size: 18px"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>

          <el-table-column align="right" label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="addOrEditChild('add', scope.row.moduleId)"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1" @click="addOrEditParent('edit', scope.row.moduleId)"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level > 1" @click="addOrEditChild('edit', scope.row.moduleId)"></el-button>
              <el-popconfirm style="margin-left: 10px;" title="确定删除吗？" @onConfirm="handleDelete(scope.row.moduleId)" >
                <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增编辑 一级菜单 -->
    <el-dialog :title="addParentFormType == 'add' ? '添加一级菜单':'编辑一级菜单'" :visible.sync="addParentFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
        <el-form-item label="一级菜单" prop="oneMenu">
          <el-input type="text" placeholder="请输入一级菜单名称" v-model="addParentForm.oneMenu" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="CODE" prop="code">
          <el-input placeholder="请输入CODE" v-model="addParentForm.code"></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input placeholder="请输入URL" v-model="addParentForm.url"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <div class="iconInput">
            <div class="icon" v-if="addParentForm.icon"><i :class="addParentForm.icon"></i></div>
            <el-input placeholder="请选择图标" v-model="addParentForm.icon"></el-input>
            <el-button type="primary" @click="toChooseIcon(1)">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input placeholder="请输入排序" v-model.number="addParentForm.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddParentForm">取 消</el-button>
        <el-button type="primary" @click="submitAddParentForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增编辑 二级菜单 -->
    <el-dialog :title="addChildFormType == 'add' ? '添加二级菜单':'编辑二级菜单'" :visible.sync="addChildFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
      <el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
        <el-form-item label="上级菜单" prop="oneMenu">
          <!-- <el-select v-model="addChildForm.oneMenu" placeholder="请选择一级菜单" style="width: 100%">
            <el-option :label="item.moduleName" :value="item.moduleId" v-for="(item, index) in dataList" :key="index"></el-option>
          </el-select> -->
          <el-cascader
            style="width: 100%"
            :options="dataList"
            :props="{ checkStrictly: true, value: 'moduleId', label: 'moduleName' }"
            v-model="addChildForm.oneMenu"
            filterable
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="二级菜单" prop="twoMenu">
          <el-input type="text" placeholder="请输入二级菜单名称" v-model="addChildForm.twoMenu" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="CODE" prop="code">
          <el-input placeholder="请输入CODE" v-model="addChildForm.code"></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input placeholder="请输入URL" v-model="addChildForm.url"></el-input>
        </el-form-item>
        <el-form-item label="全URL" prop="fullUrl">
          <el-input placeholder="请输入全URL" v-model="addChildForm.fullUrl" :disabled="!isAdmin"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <div class="iconInput">
            <div class="icon" v-if="addChildForm.icon"><i :class="addChildForm.icon"></i></div>
            <el-input placeholder="请选择图标" v-model="addChildForm.icon"></el-input>
            <el-button type="primary" @click="toChooseIcon(2)">选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input placeholder="请输入排序" v-model.number="addChildForm.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddChildForm">取 消</el-button>
        <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择图标 -->
    <el-dialog title="选择图标" :visible.sync="isChooseIconDialog" :show-close="true" width="600px" :close-on-click-modal="false">
      <div class="iconList">
        <div class="item" v-for="(item, index) in iconList" :key="index" @click="chooseIcon(item.value)">
          <i :class="item.value"></i>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { getMenuList, addMenu, editMenu, deleteMenu, getMenuDetail } from '@/api/setting'

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: {'x-token': getToken()},

      dataList: [], // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        keyword: '', // 关键词
      },

      editParentId:  null,
      addParentFormType: 'add',
      addParentFormVisible: false,
      addParentForm: {
        oneMenu: '',
        code: '',
        url: '',
        icon: '',
        sort: 0,
      },
      addParentFormRules: {
        oneMenu: [
          { required: true, message: '请填写一级菜单名称', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请填写菜单CODE', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请填写菜单URL', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请选择图标', trigger: 'blur' }
        ]
      },

      editChildId:  null,
      addChildFormType: 'add',
      addChildFormVisible: false,
      addChildForm: {
        oneMenu: '',
        twoMenu: '',
        code: '',
        url: '',
        fullUrl: '',
        icon: '',
        sort: 0,
      },
      addChildFormRules: {
        oneMenu: [
          { required: true, message: '请选择一级菜单', trigger: 'change' }
        ],
        twoMenu: [
          { required: true, message: '请填写二级菜单', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写菜单CODE', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请填写菜单URL', trigger: 'blur' }
        ],
        // icon: [
        //   { required: true, message: '请选择图标', trigger: 'blur' }
        // ]
      },

      isChooseIconDialog: false,
      iconList:[
        {label:"el-icon-delete-solid",value:"el-icon-delete-solid"},
        {label:"el-icon-s-tools",value:"el-icon-s-tools"},
        {label:"el-icon-user-solid",value:"el-icon-user-solid"},
        {label:"el-icon-phone",value:"el-icon-phone"},
        {label:"el-icon-more",value:"el-icon-more"},
        {label:"el-icon-star-on",value:"el-icon-star-on"},
        {label:"el-icon-s-goods",value:"el-icon-s-goods"},
        {label:"el-icon-warning",value:"el-icon-warning"},
        {label:"el-icon-question",value:"el-icon-question"},
        {label:"el-icon-info",value:"el-icon-info"},
        {label:"el-icon-remove",value:"el-icon-remove"},
        {label:"el-icon-circle-plus",value:"el-icon-circle-plus"},
        {label:"el-icon-success",value:"el-icon-success"},
        {label:"el-icon-error",value:"el-icon-error"},
        {label:"el-icon-zoom-in",value:"el-icon-zoom-in"},
        {label:"el-icon-zoom-out",value:"el-icon-zoom-out"},
        {label:"el-icon-remove-outline",value:"el-icon-remove-outline"},
        {label:"el-icon-circle-plus-outline",value:"el-icon-circle-plus-outline"},
        {label:"el-icon-circle-check",value:"el-icon-circle-check"},
        {label:"el-icon-circle-close",value:"el-icon-circle-close"},
        {label:"el-icon-s-help",value:"el-icon-s-help"},
        {label:"el-icon-help",value:"el-icon-help"},
        {label:"el-icon-minus",value:"el-icon-minus"},
        {label:"el-icon-plus",value:"el-icon-plus"},
        {label:"el-icon-check",value:"el-icon-check"},
        {label:"el-icon-close",value:"el-icon-close"},
        {label:"el-icon-platform-eleme",value:"el-icon-platform-eleme"},
        {label:"el-icon-eleme",value:"el-icon-eleme"},
        {label:"el-icon-delete-solid",value:"el-icon-delete-solid"},
        {label:"el-icon-delete",value:"el-icon-delete"},
        {label:"el-icon-s-tools",value:"el-icon-s-tools"},
        {label:"el-icon-setting",value:"el-icon-setting"},
        {label:"el-icon-user-solid",value:"el-icon-user-solid"},
        {label:"el-icon-user",value:"el-icon-user"},
        {label:"el-icon-phone",value:"el-icon-phone"},
        {label:"el-icon-phone-outline",value:"el-icon-phone-outline"},
        {label:"el-icon-more",value:"el-icon-more"},
        {label:"el-icon-more-outline",value:"el-icon-more-outline"},
        {label:"el-icon-star-on",value:"el-icon-star-on"},
        {label:"el-icon-star-off",value:"el-icon-star-off"},
        {label:"el-icon-s-goods",value:"el-icon-s-goods"},
        {label:"el-icon-goods",value:"el-icon-goods"},
        {label:"el-icon-warning",value:"el-icon-warning"},
        {label:"el-icon-warning-outline",value:"el-icon-warning-outline"},
        {label:"el-icon-question",value:"el-icon-question"},
        {label:"el-icon-info",value:"el-icon-info"},
        {label:"el-icon-remove",value:"el-icon-remove"},
        {label:"el-icon-circle-plus",value:"el-icon-circle-plus"},
        {label:"el-icon-success",value:"el-icon-success"},
        {label:"el-icon-error",value:"el-icon-error"},
        {label:"el-icon-zoom-in",value:"el-icon-zoom-in"},
        {label:"el-icon-zoom-out",value:"el-icon-zoom-out"},
        {label:"el-icon-remove-outline",value:"el-icon-remove-outline"},
        {label:"el-icon-circle-plus-outline",value:"el-icon-circle-plus-outline"},
        {label:"el-icon-circle-check",value:"el-icon-circle-check"},
        {label:"el-icon-circle-close",value:"el-icon-circle-close"},
        {label:"el-icon-s-help",value:"el-icon-s-help"},
        {label:"el-icon-help",value:"el-icon-help"},
        {label:"el-icon-minus",value:"el-icon-minus"},
        {label:"el-icon-plus",value:"el-icon-plus"},
        {label:"el-icon-check",value:"el-icon-check"},
        {label:"el-icon-close",value:"el-icon-close"},
        {label:"el-icon-picture",value:"el-icon-picture"},
        {label:"el-icon-picture-outline",value:"el-icon-picture-outline"},
        {label:"el-icon-picture-outline-round",value:"el-icon-picture-outline-round"},
        {label:"el-icon-upload",value:"el-icon-upload"},
        {label:"el-icon-upload2",value:"el-icon-upload2"},
        {label:"el-icon-download",value:"el-icon-download"},
        {label:"el-icon-camera-solid",value:"el-icon-camera-solid"},
        {label:"el-icon-camera",value:"el-icon-camera"},
        {label:"el-icon-video-camera-solid",value:"el-icon-video-camera-solid"},
        {label:"el-icon-video-camera",value:"el-icon-video-camera"},
        {label:"el-icon-message-solid",value:"el-icon-message-solid"},
        {label:"el-icon-bell",value:"el-icon-bell"},
        {label:"el-icon-s-cooperation",value:"el-icon-s-cooperation"},
        {label:"el-icon-s-order",value:"el-icon-s-order"},
        {label:"el-icon-s-platform",value:"el-icon-s-platform"},
        {label:"el-icon-s-fold",value:"el-icon-s-fold"},
        {label:"el-icon-s-unfold",value:"el-icon-s-unfold"},
        {label:"el-icon-s-operation",value:"el-icon-s-operation"},
        {label:"el-icon-s-promotion",value:"el-icon-s-promotion"},
        {label:"el-icon-s-home",value:"el-icon-s-home"},
        {label:"el-icon-s-release",value:"el-icon-s-release"},
        {label:"el-icon-s-ticket",value:"el-icon-s-ticket"},
        {label:"el-icon-s-management",value:"el-icon-s-management"},
        {label:"el-icon-s-open",value:"el-icon-s-open"},
        {label:"el-icon-s-shop",value:"el-icon-s-shop"},
        {label:"el-icon-s-marketing",value:"el-icon-s-marketing"},
        {label:"el-icon-s-flag",value:"el-icon-s-flag"},
        {label:"el-icon-s-comment",value:"el-icon-s-comment"},
        {label:"el-icon-s-finance",value:"el-icon-s-finance"},
        {label:"el-icon-s-claim",value:"el-icon-s-claim"},
        {label:"el-icon-s-custom",value:"el-icon-s-custom"},
        {label:"el-icon-s-opportunity",value:"el-icon-s-opportunity"},
        {label:"el-icon-s-data",value:"el-icon-s-data"},
        {label:"el-icon-s-check",value:"el-icon-s-check"},
        {label:"el-icon-s-grid",value:"el-icon-s-grid"},
        {label:"el-icon-menu",value:"el-icon-menu"},
        {label:"el-icon-share",value:"el-icon-share"},
        {label:"el-icon-d-caret",value:"el-icon-d-caret"},
        {label:"el-icon-caret-left",value:"el-icon-caret-left"},
        {label:"el-icon-caret-right",value:"el-icon-caret-right"},
        {label:"el-icon-caret-bottom",value:"el-icon-caret-bottom"},
        {label:"el-icon-caret-top",value:"el-icon-caret-top"},
        {label:"el-icon-bottom-left",value:"el-icon-bottom-left"},
        {label:"el-icon-bottom-right",value:"el-icon-bottom-right"},
        {label:"el-icon-back",value:"el-icon-back"},
        {label:"el-icon-right",value:"el-icon-right"},
        {label:"el-icon-bottom",value:"el-icon-bottom"},
        {label:"el-icon-top",value:"el-icon-top"},
        {label:"el-icon-top-left",value:"el-icon-top-left"},
        {label:"el-icon-top-right",value:"el-icon-top-right"},
        {label:"el-icon-arrow-left",value:"el-icon-arrow-left"},
        {label:"el-icon-arrow-right",value:"el-icon-arrow-right"},
        {label:"el-icon-arrow-down",value:"el-icon-arrow-down"},
        {label:"el-icon-arrow-up",value:"el-icon-arrow-up"},
        {label:"el-icon-d-arrow-left",value:"el-icon-d-arrow-left"},
        {label:"el-icon-d-arrow-right",value:"el-icon-d-arrow-right"},
        {label:"el-icon-video-pause",value:"el-icon-video-pause"},
        {label:"el-icon-video-play",value:"el-icon-video-play"},
        {label:"el-icon-refresh",value:"el-icon-refresh"},
        {label:"el-icon-refresh-right",value:"el-icon-refresh-right"},
        {label:"el-icon-refresh-left",value:"el-icon-refresh-left"},
        {label:"el-icon-finished",value:"el-icon-finished"},
        {label:"el-icon-sort",value:"el-icon-sort"},
        {label:"el-icon-sort-up",value:"el-icon-sort-up"},
        {label:"el-icon-sort-down",value:"el-icon-sort-down"},
        {label:"el-icon-rank",value:"el-icon-rank"},
        {label:"el-icon-loading",value:"el-icon-loading"},
        {label:"el-icon-view",value:"el-icon-view"},
        {label:"el-icon-c-scale-to-original",value:"el-icon-c-scale-to-original"},
        {label:"el-icon-date",value:"el-icon-date"},
        {label:"el-icon-edit",value:"el-icon-edit"},
        {label:"el-icon-edit-outline",value:"el-icon-edit-outline"},
        {label:"el-icon-folder",value:"el-icon-folder"},
        {label:"el-icon-folder-opened",value:"el-icon-folder-opened"},
        {label:"el-icon-folder-add",value:"el-icon-folder-add"},
        {label:"el-icon-folder-remove",value:"el-icon-folder-remove"},
        {label:"el-icon-folder-delete",value:"el-icon-folder-delete"},
        {label:"el-icon-folder-checked",value:"el-icon-folder-checked"},
        {label:"el-icon-tickets",value:"el-icon-tickets"},
        {label:"el-icon-document-remove",value:"el-icon-document-remove"},
        {label:"el-icon-document-delete",value:"el-icon-document-delete"},
        {label:"el-icon-document-copy",value:"el-icon-document-copy"},
        {label:"el-icon-document-checked",value:"el-icon-document-checked"},
        {label:"el-icon-document",value:"el-icon-document"},
        {label:"el-icon-document-add",value:"el-icon-document-add"},
        {label:"el-icon-printer",value:"el-icon-printer"},
        {label:"el-icon-paperclip",value:"el-icon-paperclip"},
        {label:"el-icon-takeaway-box",value:"el-icon-takeaway-box"},
        {label:"el-icon-search",value:"el-icon-search"},
        {label:"el-icon-monitor",value:"el-icon-monitor"},
        {label:"el-icon-attract",value:"el-icon-attract"},
        {label:"el-icon-mobile",value:"el-icon-mobile"},
        {label:"el-icon-scissors",value:"el-icon-scissors"},
        {label:"el-icon-umbrella",value:"el-icon-umbrella"},
        {label:"el-icon-headset",value:"el-icon-headset"},
        {label:"el-icon-brush",value:"el-icon-brush"},
        {label:"el-icon-mouse",value:"el-icon-mouse"},
        {label:"el-icon-coordinate",value:"el-icon-coordinate"},
        {label:"el-icon-magic-stick",value:"el-icon-magic-stick"},
        {label:"el-icon-reading",value:"el-icon-reading"},
        {label:"el-icon-data-line",value:"el-icon-data-line"},
        {label:"el-icon-data-board",value:"el-icon-data-board"},
        {label:"el-icon-pie-chart",value:"el-icon-pie-chart"},
        {label:"el-icon-data-analysis",value:"el-icon-data-analysis"},
        {label:"el-icon-collection-tag",value:"el-icon-collection-tag"},
        {label:"el-icon-film",value:"el-icon-film"},
        {label:"el-icon-suitcase",value:"el-icon-suitcase"},
        {label:"el-icon-suitcase-1",value:"el-icon-suitcase-1"},
        {label:"el-icon-receiving",value:"el-icon-receiving"},
        {label:"el-icon-collection",value:"el-icon-collection"},
        {label:"el-icon-files",value:"el-icon-files"},
        {label:"el-icon-notebook-1",value:"el-icon-notebook-1"},
        {label:"el-icon-notebook-2",value:"el-icon-notebook-2"},
        {label:"el-icon-toilet-paper",value:"el-icon-toilet-paper"},
        {label:"el-icon-office-building",value:"el-icon-office-building"},
        {label:"el-icon-school",value:"el-icon-school"},
        {label:"el-icon-table-lamp",value:"el-icon-table-lamp"},
        {label:"el-icon-house",value:"el-icon-house"},
        {label:"el-icon-no-smoking",value:"el-icon-no-smoking"},
        {label:"el-icon-smoking",value:"el-icon-smoking"},
        {label:"el-icon-shopping-cart-full",value:"el-icon-shopping-cart-full"},
        {label:"el-icon-shopping-cart-1",value:"el-icon-shopping-cart-1"},
        {label:"el-icon-shopping-cart-2",value:"el-icon-shopping-cart-2"},
        {label:"el-icon-shopping-bag-1",value:"el-icon-shopping-bag-1"},
        {label:"el-icon-shopping-bag-2",value:"el-icon-shopping-bag-2"},
        {label:"el-icon-sold-out",value:"el-icon-sold-out"},
        {label:"el-icon-sell",value:"el-icon-sell"},
        {label:"el-icon-present",value:"el-icon-present"},
        {label:"el-icon-box",value:"el-icon-box"},
        {label:"el-icon-bank-card",value:"el-icon-bank-card"},
        {label:"el-icon-money",value:"el-icon-money"},
        {label:"el-icon-coin",value:"el-icon-coin"},
        {label:"el-icon-wallet",value:"el-icon-wallet"},
        {label:"el-icon-discount",value:"el-icon-discount"},
        {label:"el-icon-price-tag",value:"el-icon-price-tag"},
        {label:"el-icon-news",value:"el-icon-news"},
        {label:"el-icon-guide",value:"el-icon-guide"},
        {label:"el-icon-male",value:"el-icon-male"},
        {label:"el-icon-female",value:"el-icon-female"},
        {label:"el-icon-thumb",value:"el-icon-thumb"},
        {label:"el-icon-cpu",value:"el-icon-cpu"},
        {label:"el-icon-link",value:"el-icon-link"},
        {label:"el-icon-connection",value:"el-icon-connection"},
        {label:"el-icon-open",value:"el-icon-open"},
        {label:"el-icon-turn-off",value:"el-icon-turn-off"},
        {label:"el-icon-set-up",value:"el-icon-set-up"},
        {label:"el-icon-chat-round",value:"el-icon-chat-round"},
        {label:"el-icon-chat-line-round",value:"el-icon-chat-line-round"},
        {label:"el-icon-chat-square",value:"el-icon-chat-square"},
        {label:"el-icon-chat-dot-round",value:"el-icon-chat-dot-round"},
        {label:"el-icon-chat-dot-square",value:"el-icon-chat-dot-square"},
        {label:"el-icon-chat-line-square",value:"el-icon-chat-line-square"},
        {label:"el-icon-message",value:"el-icon-message"},
        {label:"el-icon-postcard",value:"el-icon-postcard"},
        {label:"el-icon-position",value:"el-icon-position"},
        {label:"el-icon-turn-off-microphone",value:"el-icon-turn-off-microphone"},
        {label:"el-icon-microphone",value:"el-icon-microphone"},
        {label:"el-icon-close-notification",value:"el-icon-close-notification"},
        {label:"el-icon-bangzhu",value:"el-icon-bangzhu"},
        {label:"el-icon-time",value:"el-icon-time"},
        {label:"el-icon-odometer",value:"el-icon-odometer"},
        {label:"el-icon-crop",value:"el-icon-crop"},
        {label:"el-icon-aim",value:"el-icon-aim"},
        {label:"el-icon-switch-button",value:"el-icon-switch-button"},
        {label:"el-icon-full-screen",value:"el-icon-full-screen"},
        {label:"el-icon-copy-document",value:"el-icon-copy-document"},
        {label:"el-icon-mic",value:"el-icon-mic"},
        {label:"el-icon-stopwatch",value:"el-icon-stopwatch"},
        {label:"el-icon-medal-1",value:"el-icon-medal-1"},
        {label:"el-icon-medal",value:"el-icon-medal"},
        {label:"el-icon-trophy",value:"el-icon-trophy"},
        {label:"el-icon-trophy-1",value:"el-icon-trophy-1"},
        {label:"el-icon-first-aid-kit",value:"el-icon-first-aid-kit"},
        {label:"el-icon-discover",value:"el-icon-discover"},
        {label:"el-icon-place",value:"el-icon-place"},
        {label:"el-icon-location",value:"el-icon-location"},
        {label:"el-icon-location-outline",value:"el-icon-location-outline"},
        {label:"el-icon-location-information",value:"el-icon-location-information"},
        {label:"el-icon-add-location",value:"el-icon-add-location"},
        {label:"el-icon-delete-location",value:"el-icon-delete-location"},
        {label:"el-icon-map-location",value:"el-icon-map-location"},
        {label:"el-icon-alarm-clock",value:"el-icon-alarm-clock"},
        {label:"el-icon-timer",value:"el-icon-timer"},
        {label:"el-icon-watch-1",value:"el-icon-watch-1"},
        {label:"el-icon-watch",value:"el-icon-watch"},
        {label:"el-icon-lock",value:"el-icon-lock"},
        {label:"el-icon-unlock",value:"el-icon-unlock"},
        {label:"el-icon-key",value:"el-icon-key"},
        {label:"el-icon-service",value:"el-icon-service"},
        {label:"el-icon-mobile-phone",value:"el-icon-mobile-phone"},
        {label:"el-icon-bicycle",value:"el-icon-bicycle"},
        {label:"el-icon-truck",value:"el-icon-truck"},
        {label:"el-icon-ship",value:"el-icon-ship"},
        {label:"el-icon-basketball",value:"el-icon-basketball"},
        {label:"el-icon-football",value:"el-icon-football"},
        {label:"el-icon-soccer",value:"el-icon-soccer"},
        {label:"el-icon-baseball",value:"el-icon-baseball"},
        {label:"el-icon-wind-power",value:"el-icon-wind-power"},
        {label:"el-icon-light-rain",value:"el-icon-light-rain"},
        {label:"el-icon-lightning",value:"el-icon-lightning"},
        {label:"el-icon-heavy-rain",value:"el-icon-heavy-rain"},
        {label:"el-icon-sunrise",value:"el-icon-sunrise"},
        {label:"el-icon-sunrise-1",value:"el-icon-sunrise-1"},
        {label:"el-icon-sunset",value:"el-icon-sunset"},
        {label:"el-icon-sunny",value:"el-icon-sunny"},
        {label:"el-icon-cloudy",value:"el-icon-cloudy"},
        {label:"el-icon-partly-cloudy",value:"el-icon-partly-cloudy"},
        {label:"el-icon-cloudy-and-sunny",value:"el-icon-cloudy-and-sunny"},
        {label:"el-icon-moon",value:"el-icon-moon"},
        {label:"el-icon-moon-night",value:"el-icon-moon-night"},
        {label:"el-icon-dish",value:"el-icon-dish"},
        {label:"el-icon-dish-1",value:"el-icon-dish-1"},
        {label:"el-icon-food",value:"el-icon-food"},
        {label:"el-icon-chicken",value:"el-icon-chicken"},
        {label:"el-icon-fork-spoon",value:"el-icon-fork-spoon"},
        {label:"el-icon-knife-fork",value:"el-icon-knife-fork"},
        {label:"el-icon-burger",value:"el-icon-burger"},
        {label:"el-icon-tableware",value:"el-icon-tableware"},
        {label:"el-icon-sugar",value:"el-icon-sugar"},
        {label:"el-icon-dessert",value:"el-icon-dessert"},
        {label:"el-icon-ice-cream",value:"el-icon-ice-cream"},
        {label:"el-icon-hot-water",value:"el-icon-hot-water"},
        {label:"el-icon-water-cup",value:"el-icon-water-cup"},
        {label:"el-icon-coffee-cup",value:"el-icon-coffee-cup"},
        {label:"el-icon-cold-drink",value:"el-icon-cold-drink"},
        {label:"el-icon-goblet",value:"el-icon-goblet"},
        {label:"el-icon-goblet-full",value:"el-icon-goblet-full"},
        {label:"el-icon-goblet-square",value:"el-icon-goblet-square"},
        {label:"el-icon-goblet-square-full",value:"el-icon-goblet-square-full"},
        {label:"el-icon-refrigerator",value:"el-icon-refrigerator"},
        {label:"el-icon-grape",value:"el-icon-grape"},
        {label:"el-icon-watermelon",value:"el-icon-watermelon"},
        {label:"el-icon-cherry",value:"el-icon-cherry"},
        {label:"el-icon-apple",value:"el-icon-apple"},
        {label:"el-icon-pear",value:"el-icon-pear"},
        {label:"el-icon-orange",value:"el-icon-orange"},
        {label:"el-icon-coffee",value:"el-icon-coffee"},
        {label:"el-icon-ice-tea",value:"el-icon-ice-tea"},
        {label:"el-icon-ice-drink",value:"el-icon-ice-drink"},
        {label:"el-icon-milk-tea",value:"el-icon-milk-tea"},
        {label:"el-icon-potato-strips",value:"el-icon-potato-strips"},
        {label:"el-icon-lollipop",value:"el-icon-lollipop"},
        {label:"el-icon-ice-cream-square",value:"el-icon-ice-cream-square"},
        {label:"el-icon-ice-cream-round",value:"el-icon-ice-cream-round"},
      ],
      chooseIconType: null,
    }
  },
  computed: {
    ...mapGetters([
      'userid', 
      'name'
    ]),
    isAdmin() {
      let type = JSON.parse(localStorage.getItem("supply_user")).type;
      return type === 2;
    }
  },
  created() {
    this.getList();
  },
  methods: {

    getList() {
      this.listLoading = true;
      getMenuList({
        adminUserId: this.userid,
        flag: 'menu',
      }).then(res => {
        this.dataList = res.data;
      })
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 打开 新增编辑 一级菜单
    addOrEditParent(type, cid) {
      this.addParentFormType = type;
      this.addParentFormVisible = true;
      if(type == 'edit') {
        this.editParentId = cid;
        getMenuDetail({moduleId: cid}).then(res => {
          this.addParentForm = {
            oneMenu: res.data.moduleName,
            code: res.data.code,
            url: res.data.url,
            icon: res.data.icon,
            sort: res.data.sortNum
          }
        })
      }
    },

    // 取消 新增编辑 一级菜单
    cancelAddParentForm(){
      this.addParentFormVisible = false;
      this.$refs.addParentForm.resetFields();
    },

    // 提交 一级菜单
    submitAddParentForm() {
      this.$refs.addParentForm.validate((valid) => {
        if (valid) {
          let params = {
            moduleName: this.addParentForm.oneMenu,
            code: this.addParentForm.code,
            url: this.addParentForm.url,
            icon: this.addParentForm.icon,
            sortNum: this.addParentForm.sort,
            parentId: 0,
          }
          if(this.addParentFormType == 'edit') {
            params.moduleId = this.editParentId;
            editMenu(params).then(res => {
              this.cancelAddParentForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          }else {
            params.type = 2;
            addMenu(params).then(res => {
              this.cancelAddParentForm();
              this.getList();
              this.$successMsg('添加成功');
            })
          }
        }
      })
    },

    // 打开 新增编辑 二级菜单
    addOrEditChild(type, cid) {
      this.addChildFormType = type;
      this.addChildFormVisible = true;
      
      if(type == 'add') {
        this.addChildForm.oneMenu = cid;
      }

      if(type == 'edit') {
        this.editChildId = cid;
        getMenuDetail({moduleId: cid}).then(res => {
          this.addChildForm = {
            oneMenu: res.data.parentId,
            twoMenu: res.data.moduleName,
            code: res.data.code,
            url: res.data.url,
            fullUrl: res.data.fullUrl,
            icon: res.data.icon,
            sort: res.data.sortNum
          }
        })
      }
    },

    // 取消 新增编辑 二级菜单
    cancelAddChildForm(){
      this.addChildFormVisible = false;
      this.$refs.addChildForm.resetFields();
    },

    // 提交 二级菜单
    submitAddChildForm() {
      this.$refs.addChildForm.validate((valid) => {
        if (valid) {
          let params = {}
          let parentId = null;
          if(this.addChildForm.oneMenu instanceof Array) {
            parentId = this.addChildForm.oneMenu[this.addChildForm.oneMenu.length - 1];
          }else {
            parentId = this.addChildForm.oneMenu;
          }
          if(this.addChildFormType == 'edit') {
            params = {
              parentId,
              moduleId: this.editChildId,
              moduleName: this.addChildForm.twoMenu,
              code: this.addChildForm.code,
              url: this.addChildForm.url,
              fullUrl: this.addChildForm.fullUrl,
              icon: this.addChildForm.icon,
              sortNum: this.addChildForm.sort
            }
            editMenu(params).then(res => {
              this.cancelAddChildForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          }else {
            params = {
              parentId,
              moduleName: this.addChildForm.twoMenu,
              code: this.addChildForm.code,
              url: this.addChildForm.url,
              icon: this.addChildForm.icon,
              sortNum: this.addChildForm.sort,
              type: 2
            }
            addMenu(params).then(res => {
              this.cancelAddChildForm();
              this.getList();
              this.$successMsg('添加成功');
            })
          }
        }
      })
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteMenu({id: id}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    // 去选择图标
    toChooseIcon(type) {
      this.chooseIconType = type;
      this.isChooseIconDialog = true;
    },

    // 选择图标
    chooseIcon(value) {
      if(this.chooseIconType === 1) {
        this.addParentForm.icon = value;
      }else if(this.chooseIconType > 1) {
        this.addChildForm.icon = value;
      }
      this.isChooseIconDialog = false;
    },

  }

}

</script>

<style scoped lang="scss">
  .iconList {
    display: flex;
    flex-wrap: wrap;
    max-height: 40vh;
    overflow-y: scroll;
    .item {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      i {
        font-size: 18px;
      }
      &:hover {
        background: #f5f5f5;
        i {
          color: #409EFF;
        }
      }
    }
  }
  .iconInput {
    display: flex;
    .icon {
      margin-right: 10px;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #606266;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      flex-shrink: 0;
      i {
        font-size: 18px;
      }
    }
    input {
      flex: 1;
    }
    button {
      margin-left: 10px;
    }
  }
</style>

<style lang="scss">
  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff !important;
    font-size: 60px;
  }
  .el-table__row.expanded {
    background: #f5f5f5;
  }

  th {
    text-align: center !important;
  }
</style>