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

<template>
  <!-- 【单证】  订单数据 详情 -->
  <a-drawer
    title="详情"
    width="89%"
    placement="right"
    :closable="true"
    :visible="visible"
    @close="onClose">
    <!--主表信息 -->
    <a-card :bordered="true">
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="form">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="订单号" prop="orderNumber">
                {{ orderDetail.orderNumber }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="订单日期" prop="orderDate">
                {{ orderDetail.orderDate }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="业务类型" prop="businessTypeValue">
                {{ orderDetail.businessTypeValue }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="销售类型" prop="salesTypeText">
                {{ orderDetail.salesTypeText }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="客户简称" prop="customerAbbreviation">
                {{orderDetail.customerAbbreviation }}  
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="客户名称" prop="customerName">
                {{ orderDetail.customerName }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="汇率" prop="exchangeRate">
                {{ orderDetail.exchangeRate }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="销售部门" prop="salesDepartment">
                {{ orderDetail.salesDepartment }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="业务员" prop="salesman">
                {{ orderDetail.salesman }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="币种" prop="currencyText">
                {{ orderDetail.currencyText }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="品牌方" prop="brandSide">
                {{ orderDetail.brandSide }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="第三方" prop="thirdParty">
                {{ orderDetail.thirdParty }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="定金比例(%)" prop="depositRatio">
                {{ orderDetail.depositRatio }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="定金" prop="deposit">
                {{ orderDetail.deposit }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="协同路线" prop="collaborativeRoute">
                {{ orderDetail.collaborativeRoute }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="订单备注" prop="orderRemarks">
                {{ orderDetail.orderRemarks }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="价格备注" prop="priceRemarks">
                {{ orderDetail.priceRemarks }}
              </a-form-model-item>
            </a-col>
            <!-- TODO:缺少该字段 -->
            <a-col :md="6" :sm="8">
              <a-form-model-item label="客户订单号" prop="customerOrderNum">
                {{ orderDetail.customerOrderNumber }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="整单合计" prop="wholeOrderTotal">
                {{ orderDetail.wholeOrderTotal }}
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="最终客户" prop="endCustomer">
                {{ orderDetail.endCustomer }}
              </a-form-model-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-model-item label="付款条件" prop="termOfPayment">
                {{ orderDetail.termOfPayment }}
              </a-form-model-item>
            </a-col>

            <a-col :md="18" :sm="12">
              <a-form-model-item label="订单变更说明" prop="orderChangeDescription">
                {{ orderDetail.orderChangeDescription }}
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>

    <!-- 子表  -->
    <a-card :bordered="true" style="margin:10px 0">
      <a-table
        bordered
        :columns="childColumns"
        :data-source="childData"
        :pagination="pagination"
        :loading="loading"
        :scroll="{ x: 1500 }"
        @change="handleTableChange"
      >
      </a-table>
    </a-card>
  </a-drawer>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import { orderByNum } from '@api/document/order'

export default {
  name: 'OrderDetailDrawer',
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment },
  data() {
    // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      orderDetail: [], // 主表信息
      childColumns: [
        { title: '款号', width: 100, dataIndex: 'itemNumber', fixed: 'left', className: 'replacecolor',ellipsis: true },
        {
          title: '预发货日期',
          width: 120,
          dataIndex: 'preDeliveryDate',
          fixed: 'left',
          customRender: text => {
            return moment(text).format('YYYY-MM-DD')
          },
          className: 'replacecolor'
        },
        {
          title: '预完工日期',
          width: 120,
          dataIndex: 'preCompletionDate',
          customRender: text => {
            return moment(text).format('YYYY-MM-DD')
          },
          className: 'replacecolor'
        },
        { title: 'Pack Id', width: 120, dataIndex: 'packId', className: 'replacecolor' ,ellipsis: true},
        { title: '小po', width: 120, dataIndex: 'smallPo', className: 'replacecolor' ,ellipsis: true},
        { title: '分销点', width: 150, dataIndex: 'distributionPoint', className: 'replacecolor',ellipsis: true },
        { title: '存货编码', width: 120, dataIndex: 'inventoryCode', className: 'replacecolor',ellipsis: true },
        { title: '存货名称', width: 320, dataIndex: 'inventoryName', align: 'left', className: 'replacecolor',ellipsis: true },
        { title: '规格型号', width: 100, dataIndex: 'specificationAndModel', className: 'replacecolor',ellipsis: true },
        { title: '颜色', width: 160, dataIndex: 'colour', className: 'replacecolor',ellipsis: true },
        // { title: '尺码', width: 100, dataIndex: 'size', className: 'replacecolor' },
        { title: '配码规则', width: 160, dataIndex: 'codingRules', className: 'replacecolor',ellipsis: true },
        { title: '光坯毛门幅CM', width: 140, dataIndex: 'guangpeiGateWidth', className: 'replacecolor',ellipsis: true },
        { title: '箱数', width: 100, dataIndex: 'boxNumber', className: 'replacecolor',ellipsis: true },
        { title: '数量', width: 100, dataIndex: 'quantity', className: 'replacecolor',ellipsis: true },
        { title: '主计量', width: 100, dataIndex: 'masterMetering', className: 'replacecolor',ellipsis: true},
        { title: '含税单价', width: 100, dataIndex: 'unitPriceIncludingTax', className: 'replacecolor',ellipsis: true },
        { title: '价税合计', width: 100, dataIndex: 'totalPriceAndTax', className: 'replacecolor',ellipsis: true },
        { title: '税率(%)', width: 100, dataIndex: 'taxRate', className: 'replacecolor',ellipsis: true },
        {
          title: '备注',
          width: 150,
          dataIndex: 'remarks',
          // customRender: t => ellipsis(t),
          className: 'replacecolor',
          scopedSlots: { customRender: 'remarks' },
          ellipsis: true
        },
        { title: '行关闭人', width: 100, dataIndex: 'bankClosedBy', className: 'replacecolor',ellipsis: true }
      ],
      childData: [], // 子表数据

      loading: false, // 表格加载
      pagination: {
        pageNo: ''
        // total: '',
        // current: '',
        // pageSize: ''
      },
      visible: false, // 抽屉
      dateFormat: 'YYYY-MM-DD',
      record: {} // 点击的订单对象
    }
  },
  created() {
    this.getOrderChild()
  },
  methods: {
    // 子表信息获取
    getOrderChild() {
      this.$nextTick(() => {
        console.log('详情拿到订单号', this.record.id)
        orderByNum({ syOrderDataId: this.record.id, pageNo: this.pagination.pageNo }).then(res => {
          if (res.success) {
            // 子表信息赋值
            this.childData = res.result.records
            this.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }
        })
      })
    },

    onClose() {
      this.visible = false
    },

    handleTableChange(pagination, filters, sorter) {
      this.pagination.pageNo = pagination.current
      this.getOrderChild()
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.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;
// }

// 抽屉里的card样式
/deep/ .ant-drawer-content {
  background-color: #f0f2f5;
}
/deep/ .ant-drawer-body {
  padding: 10px;
}

// 回显label文字
/deep/.ant-form-item-label > label {
  font-weight: 700;
}
</style>