
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      tableName="roleMainTable" 
      idName="roleid"
      :oldFormPath="{
        add:'SManagement/user/role-manage/components'
      }"
      :apiId="{query:20221109091404,del:20221109091504}"
      :options="options"
      @listData="listData">
      <div slot="custom"></div>
      <template v-slot:tbList="scope">
        <div>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <edit class="inline-16" v-if="tool.checkAuth($route.name,'update')" :data="scope.data.data"></edit>
        <delete-btn class="inline-16" :id="scope.data.data.roleid" nameId="20221109091504" @deleteSuccess="$refs.basicLayout.listData()" nameKey="roleids" type="list"></delete-btn>
      </template>
    </basicLayout>
    <!--抽屉面板-->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="90%"
      append-to-body
      @close="closeDrawer">
      <div class="detail__panel">
        <router-view/>
      </div>
    </el-drawer>
  </div>
</template>

<script>
/**
 * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
 * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
 * @param {string} tableName 开发端配置的表格名称
 * @param {String} idName 数据主id名称
 * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
 * @param {Array} options:{label:描述,value:值} 
 */
import {mapGetters} from 'vuex'
import edit from './components/edit'
export default {
  data () {
    return {
      options:[],
      drawer:false
    }
  },
  watch: {
    $route (val) {
      if (val.path == '/role_managent') {
        this.$refs.basicLayout.listData()
      }
    },
    DrawerShow (val) {
      console.log(val);
      val ? this.drawer = true : this.drawer = false
    }
  },
  components:{
    edit,
  },
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  methods:{
    closeDrawer () {
      this.$router.push('/role_managent')
      this.$store.dispatch('DrawerShowChange',false)
    },
    onSuccess () {
      this.$refs['basicLayout'].listData()
    },
    listData(data) {
      console.log(data);
      
    }
  }
}

</script>
<style>
</style>