·<!--
  @description: 按钮管理-按钮管理列表
  @author:ysg/gmy
  @routerPath: /systemManagement/buttonMgmt-list
  @date:  2020/12/11 19:21
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form="searchForm"
      :menu="true"
      search-label-width="80px"
      :page-flag="false"
      @on-load="getButtonList"
    >
      <template v-slot:header>
        按钮管理列表
      </template>
      <template v-slot:search="search">
        <el-form-item label="按钮名称">
          <el-input
            v-model.trim="searchForm.name"
            style="width:220px"
            placeholder="请输入按钮名称"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <el-button type="primary" @click="editButton('','add')">
          新 增
        </el-button>
        <el-button @click="handleExpand()">
          全部{{ isExpand?'收起':'展开' }}
        </el-button>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
          row-key="id"
          :default-expand-all="isExpand"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          size="small"
        >
          <!-- 名称 -->
          <el-table-column header-align="center" label="名称" min-width="230">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <!-- 编码 -->
          <el-table-column header-align="center" align="center" label="编码" min-width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <!-- 是否可用 01是 00否 -->
          <el-table-column header-align="center" align="center" label="是否可用" min-width="100">
            <template slot-scope="scope">
              <span>{{ filterDictText(isEnabledList, scope.row.status) }}</span>
            </template>
          </el-table-column>
          <!-- 备注 -->
          <el-table-column header-align="center" align="left" prop="buttonRemark" label="备注" min-width="230" />
          <!-- 操作 -->
          <el-table-column
            label="操作"
            min-width="130"
            align="center"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click.stop="editButton(scope.row,'rowAdd')"
              >
                [新增子级]
              </el-link>
              <el-link
                type="primary"
                @click.stop="editButton(scope.row,'edit')"
              >
                [编辑]
              </el-link>
              <el-link
                type="primary"
                @click.stop="deleteButton(scope.row,scope.$index)"
              >
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <!--新增/编辑按钮弹框-->
    <add-addbuttonMgmt ref="addButton" :button-list="tableData" />
  </div>
</template>

<script>
/* 接口 */
import {
  queryButtonList, // 查询按钮数据
  deleteButtonById // 删除按钮
} from '@/api/common/buttonMgmt'
/* 公共方法*/
import { filterDictText } from '@/assets/js/utils' // 常用方法
/* 混入-字典信息 */
import { buttonMgmtGrounpMixin } from './mixins/buttonMgmtGrounpMixin' // 按钮管理字典信息
/* 组件 */
import addbuttonMgmtDialog from './buttonMgmt-dialog' // 新增/编辑按钮弹框
export default {
  name: 'ButtonMgmtList',
  components: {
    'add-addbuttonMgmt': addbuttonMgmtDialog // 新增/编辑按钮弹框
  },
  mixins: [buttonMgmtGrounpMixin],
  data() {
    return {
      loading: false, // loading
      isExpand: false, // 是否展开树 false 否 true 是
      tableData: [], // 按钮数据
      // 搜索参数
      searchForm: {
        name: '' // 按钮名称
      }
    }
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 是否展开table(展开与折叠切换)
    handleExpand() {
      this.isExpand = !this.isExpand
      this.$nextTick(() => {
        this.forArr(this.tableData, this.isExpand)
      })
    },
    // 遍历
    forArr(arr, isExpand) {
      this.isExpand = isExpand
      arr.forEach(i => {
        // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        this.$refs.smallTable.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
    /*
    *  获取按钮数据
    *  @params {name: 按钮名称}
    */
    getButtonList(params) {
      this.loading = true
      queryButtonList(params).then(response => {
        this.loading = false
        this.tableData = response.data // 获取按钮数据
        this.forArr(this.tableData, false)
      }).catch(() => {
        this.loading = false
      })
    },
    /*
    * 打开新增按钮/编辑按钮弹框
    * @params row: 按钮行信息  type: add ||rowAdd 新增 edit 编辑
    */
    editButton(row, type) {
      this.$refs.addButton.open({
        type: type,
        row: row
      })
    },
    /*
    * 删除事件
    * @params row: 按钮行信息
    */
    deleteButton(row, index) {
      this.$confirm('确认要删除按钮吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        // 判断是否存在下一级菜单存在则不允许删除
        if (row.children && row.children.length > 0) {
          this.$message.warning({ message: '请先删除下级菜单' })
        } else {
          const data = {
            id: row.id // 按钮主键id
          }
          // 删除方法
          deleteButtonById(data).then(() => {
            this.$message.success({ message: '删除成功' })
            this.$refs.tableCrud.onSearchChange() // 查询按钮数据
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
