
<template>
  <div class="menuList app-container">
    <div class="search">
      <el-button class="add-btn" type="primary" size="small" @click="handleAdd"
        >添加</el-button
      >
    </div>

    <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="菜单名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="排序"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="请求地址"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="类型"
      align="center"
      >
    </el-table-column>
      <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" width="550px" :visible.sync="dialogFormVisible">
        <el-form label-width="130px" :model="setQuery"
        ref="setQuery"
        :rules="rules">
            <el-form-item label="菜单名称:"  prop="paperName">
                <el-input
                v-model="setQuery.paperName"
                class="item-width-300"
                ></el-input>
            </el-form-item>
             <el-form-item label="上级菜单:"  prop="paperName">
                <el-select v-model="setQuery.type" class="item-width-300" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单类型:"  prop="questionsNum">
               <el-radio-group v-model="setQuery.type">
                    <el-radio :label="1">目录</el-radio>
                    <el-radio :label="2">菜单</el-radio>
                    <el-radio :label="3">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
             <el-form-item label="请求地址:"  prop="questionsNum">
                <el-input
                type="number"
                v-model.number="setQuery.questionsNum"
                class="item-width-300"
                ></el-input>
            </el-form-item>
             <el-form-item label="显示排序:"  prop="questionsNum">
                <el-input
                type="number"
                v-model.number="setQuery.questionsNum"
                class="item-width-300"
                ></el-input>
            </el-form-item>
        </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="save">确 定</el-button>
    </div>
    </el-dialog>

  </div>
</template>
  
  <script>
export default {
  name: "menuList",
  data() {
    return {
      title:"",
      dialogFormVisible:false,
      tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      loading: false,
      options:[
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }
      ],
      setQuery: {
       type:1
      },
      rules:{}
    };
  },

  methods: {

    handleEdit(row){
        this.title = "编辑"
        this.dialogFormVisible = true
     
    },
    handleAdd(){
        this.title = "添加"
        this.dialogFormVisible = true
    },
    // 点击删除
    handleDel(id) {
       this.$confirm(`此操作将删除该数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del({menuId:id}).then(res=>{
            if(res.state == 'Success'){
               this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              this.getMenu()
            }
          })
        })
    },

  },
  created() {
  },
};
</script>
  
<style lang="scss" scoped>
.menuList {
  .search{
    justify-content: space-between;
  }
  .icon{
    width: 80px;
    height: 80px;
  }
}
</style>
  