
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HDrpManagement/logisticcom/modules',
        edit:'HDrpManagement/logisticcom/modules'
      }"
      tableName="logisticcomTable" 
      idName="sa_logiscompid" 
      :apiId="{query:20221121135804,del:20221121140004}">
      <div slot="custom"></div>
      <template v-slot:tbList="scope">
        <div>
          <div v-if="scope.data.column.columnname === 'isused'">
            <el-switch
              v-model="scope.data.column.data.isused"
              :active-value="1"
              :inactive-value="0"
              @change="onChange(scope.data.column.data.sa_logiscompid)">
            </el-switch>
          </div>
          <p v-else>
            {{scope.data.column.data[[scope.data.column.columnname]]}}
          </p>
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <edit :data="scope.data.data" @onSuccess="onSuccess"></edit>
      </template>
    </basicLayout>
  </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 edit from './modules/edit.vue'
export default {
  components:{
    edit
  },
  data () {
    return {
      options:[]
    }
  },
  methods:{
    async onChange (id) {
      const res = await this.$api.requested({
        "id": "20221121135904",
        "content": {
            "sa_logiscompid":id
        }
      })
      this.tool.showMessage(res,()=>{
        this.$refs['basicLayout'].listData()
      })
    },
    onSuccess(){
      this.$refs['basicLayout'].listData()
    }
  }
}

</script>
<style>
</style>