sen-yu-new-web/src/views/order/orderList.vue

<template>
  <!-- 【单证】 订单数据 -->
  <div id="orderList">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="订单号">
                <a-input placeholder="请输入订单号" v-model="queryParam.orderNumber"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="订单日期">
                <a-date-picker
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  v-model="queryParam.orderDate"
                  placeholder="请选择订单日期"
                  @change="onDateChange"
                ></a-date-picker>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="客户简称">
                <a-input placeholder="请输入客户简称" v-model="queryParam.customerAbbreviation"></a-input>
              </a-form-item>
            </a-col>

            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="8">
                <a-form-item label="账套">
                  <a-input placeholder="请输入账套" v-model="queryParam.account"></a-input>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-item label="发货状态">
                  <a-select placeholder="请选择发货状态" v-model="queryParam.dilivery">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="0">未发货</a-select-option>
                    <a-select-option value="1">已发货</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>

            <a-col :md="6" :sm="8">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- 操作按钮区域 -->
    <a-card :bordered="false" style="marginTop:10px;">
      <div class="table-operator">
        <a-button type="primary" @click="synchronization" icon="reload">同步</a-button>
      </div>

      <!-- 主表信息  rowKey="id"  :pagination="ipagination" -->
      <div>
        <a-table
          bordered
          :row-key="record => record.id"
          :columns="orderLIstColumns"
          :data-source="orderListData"
          :loading="loading"
          :pagination="pagination"
          :scroll="{ x: 1500 }"
          @change="handleTableChange"
        >
          <!-- 订单号 链接-->
          <span slot="orderNumber" slot-scope="text">
            <a>{{ text }}</a>
          </span>
        </a-table>
      </div>
    </a-card>
    <!-- 订单数据明细 抽屉 -->
    <orderDetail-drawer ref="orderDetailDrawer" @ok="modalFormOk"></orderDetail-drawer>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'
import OrderDetailDrawer from '@views/order/orderDetailDrawer.vue'
import { orderList, orderByNum } from '@api/document/order'

export default {
  name: 'OrderList', // 【单证】 订单数据
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, OrderDetailDrawer },

  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
    // sorter: true, table表头排序
    return {
      // 表头
      orderLIstColumns: [
        {
          title: '订单号',
          width: 140,
          dataIndex: 'orderNumber',
          fixed: 'left',
          className: 'replacecolor',
          customCell: this.showDrawer,
          scopedSlots: { customRender: 'orderNumber' }
        },

        {
          title: '订单日期',
          width: 120,
          dataIndex: 'orderDate',
          fixed: 'left',
          customRender: text => {
            return moment(text).format('YYYY-MM-DD')
          },
          className: 'replacecolor'
        },
        { title: '业务类型', width: 120, dataIndex: 'businessTypeValue', className: 'replacecolor' },
        { title: '客户订单', width: 120, dataIndex: 'customerOrderNumber', className: 'replacecolor' },
        {
          title: '销售类型',
          width: 120,
          dataIndex: 'salesTypeValue',
          className: 'replacecolor'
        },
        { title: '客户简称', width: 150, dataIndex: 'customerAbbreviation', className: 'replacecolor' },
        { title: '客户名称', width: 120, dataIndex: 'customerName', className: 'replacecolor' },
        { title: '供应商', width: 120, dataIndex: 'supplier', className: 'replacecolor' },
        { title: '汇率', width: 90, dataIndex: 'exchangeRate', className: 'replacecolor' },
        { title: '整单合计', width: 120, dataIndex: 'wholeOrderTotal', className: 'replacecolor' },
        { title: '销售部门', width: 120, dataIndex: 'salesDepartment', className: 'replacecolor' },
        { title: '业务员', width: 120, dataIndex: 'salesman', className: 'replacecolor' },
        { title: '币种', width: 120, dataIndex: 'currencyValue', className: 'replacecolor' },
        { title: '品牌方', width: 120, dataIndex: 'brandSide', className: 'replacecolor' },
        { title: '第三方', width: 120, dataIndex: 'thirdParty', className: 'replacecolor' },
        { title: '定金比例(%)', width: 120, dataIndex: 'depositRatio', className: 'replacecolor' },
        { title: '定金', width: 120, dataIndex: 'deposit', className: 'replacecolor' },
        { title: '协同路线', width: 120, dataIndex: 'collaborativeRoute', className: 'replacecolor' },
        { title: '付款条件', width: 180, dataIndex: 'termOfPayment', className: 'replacecolor' },
        { title: '最终客户', width: 120, dataIndex: 'endCustomer', className: 'replacecolor' },
        {
          title: '订单备注',
          width: 180,
          dataIndex: 'orderRemarks',
          customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'orderRemarks' }
        },
        {
          title: '价格备注',
          width: 120,
          dataIndex: 'priceRemarks',
          customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'priceRemarks' }
        },

        {
          title: '订单变更说明',
          width: 180,
          dataIndex: 'orderChangeDescription',
          fixed: 'right',
          customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'orderChangeDescription' }
        }
      ],
      orderListData: [], // 主表信息
      loading: false, // 表格加载

      // 查询条件
      queryParam: {
        orderNumber: '',
        orderDate: '',
        customerAbbreviation: '',
        account: '',
        dilivery: '',
        pageNo: '' // 初始页
      },
      // 分页
      pagination: {
        // total: '',
        // current: 0,
        // pageSize: 0
      }
    }
  },

  created() {
    this.getOrderList()
  },
  methods: {
    // 订单数据查询
    getOrderList() {
      this.$nextTick(() => {
        orderList(this.queryParam).then(res => {
          if (res.success) {
            this.orderListData = res.result.records
            console.log('订单数据列表', this.orderListData)
            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }
        })
      })
    },
    // 查询按钮
    searchQuery() {
      this.getOrderList()
      console.log('发货状态', this.queryParam.dilivery)
    },
    searchReset() {
      // console.log('>>>>重置')
      this.queryParam = {}
      this.getOrderList()
    },

    // 【订单号】 抽屉
    showDrawer(record) {
      return {
        on: {
          click: event => {
            console.log('点击的订单号', record.orderNumber)
            this.$refs.orderDetailDrawer.visible = true
            // 子表信息获取
            orderByNum({ orderNumber: record.orderNumber }).then(res => {
              if (res.success) {
                console.log('子表详情', res.result)
                // 子表信息赋值
                this.$refs.orderDetailDrawer.childData = res.result
                console.log('主表信息', record)
                this.$refs.orderDetailDrawer.orderDetail = record
              }
            })
          }
        }
      }
    },

    // 查询条件 订单日期转换成字符串并赋值
    onDateChange(value, dateString) {
      // console.log('订单日期', dateString)
      this.queryParam.orderDate = dateString
    },
    // 同步
    synchronization() {
      console.log('订单数据--同步');
    },

    // 分页变化时触发
    handleTableChange(pagination, filters, sorter) {
      console.log('分页器信息', pagination)
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.queryParam.pageNo = pagination.current
      this.getOrderList() //重新渲染
    }
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
</style>