X-web/src/views/modules/trace/order-list.vue

<!-- 订单 -->
<template>
  <div class="order-list" >
    <div class="my-title" v-if="!detailVisible">订单追溯</div>
    <div v-show="!detailVisible">
      <template>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderCode"
          header-align="center"
          align="center"
          min-width="180"
          :show-tooltip-when-overflow="true"
          label="订单编码">
        </el-table-column>
        <el-table-column
          prop="customerName"
          header-align="center"
          align="center"
          min-width="180"
          :show-overflow-tooltip="true"
          label="客户名称">
        </el-table-column>
        <el-table-column
          prop="cusOrderCode"
          header-align="center"
          align="center"
          min-width="120"
          :show-tooltip-when-overflow="true"
          label="客户订单编号">
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          min-width="160"
          label="下单时间">
        </el-table-column>
        <el-table-column
          prop="contactDate"
          header-align="center"
          align="center"
          min-width="160"
          label="合同交期">
        </el-table-column>
        <!-- <el-table-column
          prop="-"
          header-align="center"
          align="center"
          :formatter="formatState"
          label="审批状态">
        </el-table-column> -->
        <el-table-column
          prop="-"
          header-align="center"
          align="center"
          :formatter="formatOrderState"
          label="当前状态">
        </el-table-column>
        <el-table-column
          prop="notes"
          header-align="center"
          align="center"
          min-width="180"
          :show-overflow-tooltip="true"
          label="备注">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" v-if="isAuth('trace:search:order:detail')" size="small" @click="detailHandle(scope.row.orderId)">查看</el-button>
<!--            <el-button v-if="isAuth('order:ctl:deliver') && Number(scope.row.orderState) === 3" type="text" size="small" @click="deliverHandle(scope.row.orderId)">发货</el-button>-->
<!--            <el-button v-if="isAuth('order:ctl:arrived') && Number(scope.row.orderState) === 4 " type="text" size="small" @click="arrivedHandle(scope.row)">送达</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">返回</el-button>
      </span>
    </template>
    </div>
    
    <!-- 弹窗, 新增 / 修改 -->
    <detail v-if="detailVisible" ref="detail" @onChose="onChildClose"/>
  </div>
</template>

<script>
  import Detail from './order-detail'
  import { getOrderByCode } from '@/api/trace'
  export default {
    name: 'order-list',
    components: {
      Detail
    },
    props: {
      // 默认第一页的数据
      defaultList: {
        type: Array,
        default: []
      },
      // 订单编码
      orderCode: {
        type: String,
        default: ''
      },
      defaultTotalPage: {
        type: [Number, String],
        default: 0
      }
    },
    created () {
    },
    data () {
      return {
        detailVisible: false,
        arrivedVisible: false,
        dataList: this.defaultList,
        pageIndex: 1,
        pageSize: 10,
        totalPage: Number(this.defaultTotalPage),
        dataListLoading: false,
        dataListSelections: [],
        optionsOrderState: [
          {
            code: '1', value: '未开始'
          },
          {
            code: '2', value: '进行中'
          },
          {
            code: '3', value: '已完成'
          },
          {
            code: '4', value: '已发货'
          },
          {
            code: '5', value: '已送达'
          }
        ],
        optionsCustomer: []
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      onChildClose () {
        this.detailVisible = false
      },
      // 查询
      queryData () {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params = {
          'current': this.pageIndex,
          'size': this.pageSize,
          'orderCode': this.orderCode
        }
        console.log(params)
        getOrderByCode(params).then(({data}) => {
          if (data && data.code === '200') {
            this.dataList = data.data.records
            this.totalPage = Number(data.data.total)
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 转换属性“订单状态”
      formatOrderState (row) {
        if (!row.orderState) return ''
        const item1 = this.optionsOrderState.find((item) => item.code === row.orderState.toString())
        return item1 ? item1.value : ''
      },
      // 详情
      detailHandle (id) {
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.detail.init(id)
        })
      }
    }
  }
</script>

<style scoped>

</style>