
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HManagement/roleManage/modules'
      }"
      tableName="roleTable" 
      idName="roleid" 
      :apiId="{query:20221101131902,del:20221101132002}"
      :options="options"
      :detailPath="{
        path:'/roleDetail'
      }">
      <div slot="custom">
        <div class="label_center">
          <p class="search__label">用户类型:</p>
          <el-select
            class="inline-16"
            size="small"
            v-model="type"
            placeholder="请选择"
            @change="handleSelectChange"
            clearable
          >
            <el-option
              v-for="item in select"
              :label="item.remarks"
              :value="item.value"
              :key="item.index"
            ></el-option>
          </el-select>
        </div>
        
      </div>
      <template v-slot:tbList="scope">
        <p> {{scope.data.column.data[[scope.data.column.columnname]]}}</p>
      </template>
    </basicLayout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options:[],
      select:[],
      type:''
    }
  },
  watch: {
    $route(val) {
      if(val.path == '/role_manage') {
        this.$refs.basicLayout.listData()
      }
    }
  },
  components:{
  },
  methods:{
    onSuccess () {
      this.$refs.basicLayout.listData()
    },
    async usertype() {
      let param = {
        "classname": "sysmanage.develop.optiontype.optiontype",
        "method": "optiontypeselect",
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "typename": "usertype",
          "parameter": {
          }
        }
      };
      const res = await this.$api.requested(param);
      this.select = res.data;
    },
    handleSelectChange() {
      this.$refs['basicLayout'].param.content.where.usertype = this.type
       this.$refs['basicLayout'].param.content.pageNumber = 1
      this.$refs['basicLayout'].listData()
    },
  },
  mounted () {
    this.usertype()
  }
}

</script>
<style>
</style>