
<template>
  <div>
    <basicLayout 
      ref="basicLayout"
      tableName="orderTable" 
      idName="sa_orderid" 
      :apiId="{query:20221111145202,del:20221108152102}"
      :options="options"
      :oldFormPath="{add:'SDrpManagement/salerOrder/modules'}"
      :detailPath="{
        path:'/saler_orderDetails'
      }">
      <template #custom>
        <div class="mt-10">
          <p class="search__label">订单状态:</p>
          <el-select v-model="status" clearable style="margin-right:10px" size="small" placeholder="请选择订单状态" @change="$refs.basicLayout.param.content.pageNumber = 1 ;$refs.basicLayout.param.content.where.status = status;$refs.basicLayout.listData()">
            <el-option value="新建" label="新建"></el-option>
            <el-option value="提交" label="提交"></el-option>
            <el-option value="审核" label="审核"></el-option>
            <el-option value="交期待确认" label="交期待确认"></el-option>
            <el-option value="交期确认" label="交期确认"></el-option>
            <el-option value="关闭" label="关闭"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">订单类型:</p>
          <el-select v-model="type" clearable style="margin-right:10px" size="small" placeholder="请选择订单类型" @change="$refs.basicLayout.param.content.pageNumber = 1 ;$refs.basicLayout.param.content.where.type = type;$refs.basicLayout.listData()">
            <el-option value="标准订单" label="标准订单"></el-option>
            <el-option value="项目订单" label="项目订单"></el-option>
<!--            <el-option value="促销订单" label="促销订单"></el-option>-->
            <el-option value="工具订单" label="工具订单"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">核销状态:</p>
          <el-select 
            v-model="writeoffstatus" 
            clearable style="margin-right:10px" 
            size="small" placeholder="请选择核销状态" @change="$refs.basicLayout.param.content.pageNumber = 1 ;$refs.basicLayout.param.content.where.writeoffstatus = writeoffstatus;$refs.basicLayout.listData()">
            <el-option label="已核销" value="已核销"></el-option>
            <el-option label="部分核销" value="部分核销"></el-option>
            <el-option label="未核销" value="未核销"></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <p class="search__label">开票状态:</p>
          <el-select 
            v-model="invoicestatus" 
            clearable style="margin-right:10px" 
            size="small" placeholder="请选择状态" @change="$refs.basicLayout.param.content.pageNumber = 1 ;$refs.basicLayout.param.content.where.invoicestatus = invoicestatus;$refs.basicLayout.listData()">
            <el-option label="已开票" value="已开票"></el-option>
            <el-option label="部分开票" value="部分开票"></el-option>
            <el-option label="未开票" value="未开票"></el-option>
          </el-select>
        </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:#e09a1a" v-if="scope.data.column.data[[scope.data.column.columnname]] == '交期待确认'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#3874f6" 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-if="scope.data.column.data[[scope.data.column.columnname]] == '审核'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span style="color:#b2c0ea" v-else-if="scope.data.column.data[[scope.data.column.columnname]] == '关闭'">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else-if="scope.data.column.columnname == 'amount'">
          {{ tool.formatAmount(scope.data.column.data.amount,2) }}
        </div>
        <!-- <div v-else-if="scope.data.column.columnname == 'tradefield'">
          {{ scope.data.column.data.tradefield }}
        </div> -->
        
        <div v-else-if="scope.data.column.columnname == 'defaultamount'">
          {{ tool.formatAmount(scope.data.column.data.defaultamount,2) }}
        </div>
        <div v-else-if="scope.data.column.columnname=='address'">
          {{`${scope.data.column.data.province}-${scope.data.column.data.city}-${scope.data.column.data.county}-${scope.data.column.data.address}`}}
        </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:[],
      status:'',
      type:'',
      writeoffstatus:'',
      invoicestatus:'',
      dateSelect:[]
      
    }
  },
  methods:{
    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()
    }
  }
}

</script>
<style>
</style>