
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      :oldFormPath="{
        add:'HDrpManagement/logistics/modules'
      }"
      tableName="logisticsTable" 
      idName="sa_logisticsid" 
      :apiId="{query:20221122132804,del:20221122132904}"
      :autoQuery="false"
      :detailPath="{
        path:'/logisticsdetail'
      }">
      <template #custom>
        <div class="mt-10">
          <label  class="search__label" >订单号:</label>
          <el-input  style="width:200px;" placeholder="搜索" v-model="sonum" @keyup.native.enter="queryData" @clear="queryData" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
          </el-input>
        </div>
        <div class="mt-10">
          <label class="search__label" >单据日期:</label>
          <el-date-picker
              style="margin-right: 24px !important;"
              size="small"
              @change="selectChange"
              value-format="yyyy-MM-dd"
              v-model="dateSelect"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable>
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span style="color:#000000" v-if="scope.data.column.data[[scope.data.column.columnname]] == '新建'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#d90a0a" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '审核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#52C41A" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '收货'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
      </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:值} 
   */
  export default {
    data () {
      return {
        options:[],
        sonum:'',
        dateSelect:[]
        
      }
    },
    methods:{
      queryData () {
        this.$refs.basicLayout.param.content.pageNumber = 1
        this.$refs.basicLayout.param.content.where.sonum = this.sonum
        this.$refs.basicLayout.listData()
      },
      selectChange(){
        if (this.dateSelect !== '' && this.dateSelect !== null){
          this.$refs.basicLayout.param.content.pageNumber = 1
          this.$refs.basicLayout.param.content.where.begindate = this.dateSelect[0]
          this.$refs.basicLayout.param.content.where.enddate = this.dateSelect[1]
        }else {
          this.$refs.basicLayout.param.content.where.begindate = ''
          this.$refs.basicLayout.param.content.where.enddate = ''
        }
        this.$refs.basicLayout.listData()
      }
    },
    mounted () {
      this.queryData()
    }
  }
  
  </script>
  <style>
  </style>