<style>
 
  .menuDiv .query-box {
    width: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid #ccc;
    position: relative;
  }

  .menuDiv .normalBtn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
    margin-left: 10px;
    outline: none;
  }

</style>
<template>
  <div class="menuDiv">
    <div class="query-box">
      名称： <el-input type="text" style="width:234px;" size="small" v-model="msg.MenuName" clearable 
       @keyup.enter.native="msg.pageIndex=1,getPageList()" @clear="msg.pageIndex=1,getPageList()"></el-input>
      等级： <el-select style="width:234px;" size="small" v-model="msg.MenuLevel" @change="msg.pageIndex=1,getPageList()">
        <el-option label="全部" :key="0" :value="0"></el-option>
        <el-option label="一级" :key="1" :value="1"></el-option>
        <el-option label="二级" :key="2" :value="2"></el-option>
        <el-option label="三级" :key="3" :value="3"></el-option>
      </el-select>
      <button type="button" class="normalBtn" @click="menuTitle='新增菜单',menuDialog=true,resetMsg()">新增</button>
      <button type="button" class="normalBtn" @click="CommonJump('sysmenu',{})">设置商城菜单</button>
    </div>
    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>菜单编号</th>
        <th>菜单名称</th>
        <th>菜单链接</th>
        <th>菜单等级</th>
        <th>父级菜单编号</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td>{{item.MenuId}}</td>
        <td>{{item.MenuName}}</td>
        <td>{{item.MenuUrl}}</td>
        <td>{{item.MenuLevel}}</td>
        <td>{{item.ParentId}}</td>
        <td>{{item.StatusStr}}</td>
        <td>
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
            <el-button type="primary" icon="el-icon-edit" @click="getMenu(item.MenuId)" circle style="padding:6px;">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button v-if="item.Status==0" type="danger" icon="el-icon-delete" @click="delMenu(item.MenuId)" circle
              style="padding:6px;"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="恢复" placement="top-start">
            <el-button v-if="item.Status==1" type="primary" icon="iconfont icon-icon_huifu"
              @click="recoverMenu(item.MenuId)" circle style="padding:5px;"></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      v-if="dataList.length>0" layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>

    <!-- 新增菜单 -->
    <el-dialog :title="menuTitle" :visible.sync="menuDialog" width="500px">
      <el-form :model="addMsg" :rules="menurules" ref="addMsg" label-width="150px">
        <el-form-item label="菜单名称" prop="MenuName">
          <el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.MenuName"></el-input>
        </el-form-item>
        <el-form-item label="菜单连接" prop="MenuUrl">
          <el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.MenuUrl"></el-input>
        </el-form-item>
        <el-form-item label="菜单等级" prop="MenuLevel">
          <el-select style="width:234px;" size="small" v-model="addMsg.MenuLevel"
            @change="getChildMenuList(addMsg.MenuLevel)">
            <el-option label="一级" :key="1" :value="1"></el-option>
            <el-option label="二级" :key="2" :value="2"></el-option>
            <el-option label="三级" :key="3" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级菜单编号" v-if="addMsg.MenuLevel!=1" prop="ParentId">
          <el-select style="width:234px;" size="small" v-model="addMsg.ParentId">
            <el-option v-for="item in parentList" :key="item.MenuId" :label="item.MenuName" :value="item.MenuId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标" prop="IconClass">
          <el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.IconClass"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="text" style="width:234px" @keyup.native="checkInteger(addMsg,'SortNum')" size="small"
            maxlength="25" v-model="addMsg.SortNum"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="menuDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('addMsg')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        menuDialog: false,
        currentPage: 1,
        total: 0,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          MenuLevel: 0,
          MenuName: "", //菜单名称
        },
        dataList: [],
        addMsg: {
          MenuName: '',
          MenuUrl: '',
          MenuLevel: 1,
          ParentId: 0,
          IconClass: '',
          Status: 0,
          SortNum: 0,
        },
        parentList: [],
        menurules: {
          MenuName: [{
            required: true,
            message: '请填写菜单名称。',
            trigger: 'blur'
          }],
        },
        menuTitle:"新增菜单",
      };
    },
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getPageList();
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addMenu();
          } else {
            return false;
          }
        });
      },
      //重置菜单
      resetMsg() {
        let msg = {
          MenuName: '',
          MenuUrl: '',
          MenuLevel: 1,
          ParentId: 0,
          IconClass: '',
          Status: 0,
          SortNum: 0,
        }
        this.addMsg = msg;
      },
      //获取分页数据
      getPageList() {
        this.apipost("/api/Tenant/GetMenuPage", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //添加修改菜单
      addMenu() {
        this.apipost("/api/Tenant/SetMenu", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.getPageList();
            this.menuDialog = false;
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //根据编号获取菜单
      getMenu(Id) {
        this.apipost("/api/Tenant/GetMenu", {
          MenuId: Id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            this.menuDialog = true;
            this.menuTitle='修改菜单',
            this.getChildMenuList(this.addMsg.MenuLevel);
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //删除菜单
      delMenu(Id) {
        var that = this;
        that.Confirm("是否删除?", function () {
          that.apipost("/api/Tenant/SetMenuStatus", {
            MenuId: Id,
            Status: 1
          }, res => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getPageList();
            } else {
              that.Info(res.data.message);
            }
          })
        });
      },
      //恢复菜单
      recoverMenu(Id) {
        this.apipost("/api/Tenant/SetMenuStatus", {
          MenuId: Id,
          Status: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getPageList();
          } else {
            this.Info(res.data.message);
          }
        })
      },
      //获取父级菜单编号
      getChildMenuList(MenuLevel) {
        this.parentList = [];
        this.apipost("/api/Tenant/GetMenuChildList", {
          MenuLevel: MenuLevel - 1,
        }, res => {
          if (res.data.resultCode == 1) {
            this.parentList = res.data.data;
          } else {
            this.Info(res.data.message);
          }
        })
      },
    },
    mounted() {
      this.getPageList();
      this.getChildMenuList(1);
    }
  };

</script>
