<!--
  @description: 系统设置->接口权限
  @author: change by zhangfan
  @routerPath: /sysetemSettings/apiManageList
  @date:  2020/5/13-13:05
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />接口权限
    </div>
    <!--查询-->
    <section class="crud_menu_title p0-16 clearfix">
      <span class="icon-line fl">查询条件</span>
    </section>
    <div class="p0-16 clearfix SearchContent" style="margin-top: 30px">
      <div class="SearchContent_leftInput fl">
        <el-form :model="listQuery" inline style="min-width:500px">
          <el-form-item label="菜单名称">
            <el-input
              v-model="listQuery.roleName"
              style="width:268px"
              class="filter-item"
              placeholder="请输菜单名称"
            />
          </el-form-item>
          <el-form-item label="菜单编号">
            <el-input
              v-model="listQuery.roleOtherName"
              style="width:268px"
              class="filter-item"
              placeholder="请输入菜单编号"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-button type="primary" @click="getTreeDataSearch">
          搜索
        </el-button>
        <el-button plain type="info" @click="resetForm('listQuery')">
          重置
        </el-button>
      </div>
    </div>
    <!--查询结果  表格-->
    <section class="crud_menu_title p0-16 clearfix">
      <span class="icon-line fl">查询结果</span>
    </section>
    <div style="margin-left: 18px">
      <el-button plain type="danger" @click="batchDeleteData">
        <i class="el-icon-delete" /> 删除
      </el-button>
    </div>
    <div class="main" style="margin-top: 20px">
      <el-table
        ref="smallTable"
        :load="load"
        :data="tableData"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

        style="width: 100%"
        row-key="id"
        lazy
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="interfaceName"
          label="菜单名称"
          width="180"
        />
        <el-table-column
          prop="interfacePath"
          label="路由地址"
          width="180"
        />
        <el-table-column
          prop="name"
          label="菜单图标"
          width="180"
        />
        <el-table-column
          prop="name"
          label="菜单编号"
          width="180"
        />
        <el-table-column
          prop="address"
          label="菜单别名"
        />
        <el-table-column
          prop="interfaceSort"
          label="菜单排序"
        />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="goDetailDialog(scope.row)">
              [查看]
            </el-link>
            <el-link type="primary" @click="deleteData(scope.row)">
              [删除]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--查看-->
    <apiManageDetailDialog :dialog-data="apiManageDetailDialog" :detail-id="detailId" />
  </div>
</template>

<script>
import { getAuthfaceTree, authInterfaceBySearch, authInterRemove } from '@api/common/roleManage'
import apiManageDetailDialog from './apiManage-detailDialog' // 查看弹窗
export default {
  name: 'ApiManageList',
  components: {
    apiManageDetailDialog
  },
  data() {
    return {
      listQuery: {
        // 搜索参数
        roleName: '', // 菜单名称
        roleOtherName: '', // 菜单编号
        page: 1, // 当前页
        pageSize: 10 // 每页显示的个数
      },
      //  查看弹窗
      apiManageDetailDialog: {
        dialog: false
      },
      paginationData: {
        pageNo: 1, // 当前页
        pageSize: 10, // 每页显示的个数
        total: 0 // 总记录条数
      },
      tableData: [], // 接口列表数据
      detailId: '', // 传给弹窗的Id
      multipleSelection: [] // 勾选的数据
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    // 勾选表格前面的复选框
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取接口的列表数据
    getTreeData() {
      const params = {
        'interfaceName': '',
        'parentInterfacePath': ''
      }
      getAuthfaceTree(params).then(res => {
        this.tableData = res.data
        this.tableData.filter(item => {
          if (item.existLeaf === true) {
            item.hasChildren = true // 判断是否有子节点的标识,element table特有的标识
          }
        })
      }).catch(() => {
      })
    },
    // 根据搜索查询列表
    getTreeDataSearch() {
      const params = {
        'interfaceName': this.listQuery.roleName, // 菜单名称
        'parentInterfacePath': this.listQuery.roleOtherName // 菜单编号
      }
      authInterfaceBySearch(params).then(res => {
        this.tableData = res.data
      }).catch(() => {
      })
    },
    // 加载子节点数据
    load(tree, treeNode, resolve) { // 开展子节点
      const params = {
        'interfaceName': '',
        'parentInterfacePath': tree.interfacePath
      }
      getAuthfaceTree(params).then(res => {
        res.data.filter(item => {
          if (item.existLeaf === true) {
            item.hasChildren = true // 判断是否有子节点
          }
        })
        resolve(res.data)
      }).catch(() => {
      })
    },
    // 单条数据删除
    deleteData(item) {
      console.log(item.id)
      const params = {
        'ids': item.id,
        'type': '0'
      }
      authInterRemove(params).then(res => {
        if (res.header.ret === '0') {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.getTreeData()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 批量删除
    batchDeleteData() {
      if (this.multipleSelection.length === 0) { // 判断是否有勾选数据
        this.$message({ // 若没有勾选加一个提示
          message: '请选择要删除的数据',
          type: 'warning'
        })
      } else {
        const IdArray = []
        this.multipleSelection.filter(item => {
          IdArray.push(item.id) // 删除勾选的数据添加到数组里面传给后端
        })
        const params = {
          'ids': IdArray.join(','),
          'type': '0'
        }
        authInterRemove(params).then(res => {
          if (res.header.ret === '0') {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            this.getTreeData()
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    // 去查看弹窗
    goDetailDialog(item) {
      this.detailId = item.id // 传给查看弹窗的id
      this.apiManageDetailDialog.dialog = true // 打开查看弹窗
    },
    // 重置
    resetForm() {
      Object.keys(this.listQuery).forEach(val => {
        this.listQuery[val] = '' // 参数置空
      })
      this.listQuery.pageNo = 1 // 当前页
      this.listQuery.pageSize = 10 // 每页显示的个数
      this.getTreeData()
    }
  }
}
</script>

<style scoped>
</style>

