<style>
  .menuDiv {
    padding: 20px;
  }

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

  .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">
      <button type="button" class="normalBtn" @click="menuDialog=true,resetMsg()">新增</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="新增菜单" :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: 20
        },
        dataList: [],
        addMsg: {
          MenuName: '',
          MenuUrl: '',
          MenuLevel: 1,
          ParentId: 0,
          IconClass: '',
          Status: 0,
          SortNum: 0,
        },
        parentList:[],
        menurules: {
          MenuName: [{
            required: true,
            message: '请填写菜单名称。',
            trigger: 'blur'
          }],
        //   MenuUrl: [{
        //     required: true,
        //     message: '请填写菜单链接。',
        //     trigger: 'blur'
        //   }]
        }
      };
    },
    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.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>
