sen-yu-new-web/src/views/shipment-details/detailsShipDetDrawer.vue

<template>
  <!-- 详情 发运明细 -->
  <div id="detailsShipDetDrawer">
    <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="documentNo">
                  {{ detailsShipDet.documentNo }}
                </a-form-model-item>
              </a-col>

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

              <a-col :md="6" :sm="8">
                <a-form-model-item label="客户" prop="customer" :title="detailsShipDet.customer">
                  {{ detailsShipDet.customer | ellipsis}}
                </a-form-model-item>
              </a-col>

              <!-- <a-col :md="6" :sm="8">
                <a-form-model-item label="订单类型" prop="orderType">
                  {{ detailsShipDet.orderType }}
                </a-form-model-item>
              </a-col>


              <! -- U8系统适用 -->
              <!-- <a-col :md="12" :sm="12">
                <a-form-model-item label="备注" prop="memo">
                  {{ detailsShipDet.memo }}
                </a-form-model-item>
              </a-col> -->
            </a-row>
          </a-form-model>
        </div>
      </a-card>

      <!-- 子表 :model="form" -->
      <a-card :bordered="true" style="margin:10px 0">
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="formRef">
            <a-table
              bordered
              rowKey="id"
              size="middle"
              :columns="columns"
              :data-source="syShippingDetailsItemList"
              :loading="loading"
              :pagination="ipagination"
              :scroll="{x: 1500 ,y:500 }"
              @change="handleTableChange"
            >
            </a-table>
          </a-form-model>
        </a-spin>
      </a-card>
    </a-drawer>
  </div>
</template>

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

export default {
  name: 'DetailsShipDetDrawer', // 详情 发运明细 抽屉
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment },
  data() {
    // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      id: '',
      detailsShipDet: [], // 主表信息
      // 表头
      columns: [
          {
          title: '账套',
          dataIndex: 'account',
          width: 80,
          // fixed: 'left',
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '订单号',
          dataIndex: 'orderNumber',
          width: 160,
          // fixed: 'left',
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '款号',
          dataIndex: 'itemNumber',
          // fixed: 'left',
          width: 90,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '小po',
          dataIndex: 'smallPo',
          width: 100,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: 'Pack Id',
          dataIndex: 'packId',
          width: 100,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 120,
          className: 'replacecolor',
          ellipsis: true,
        },
         {
          title: '存货编码',
          dataIndex: 'inventoryCode',
          width: 120,
          className: 'replacecolor',
          ellipsis: true,
        },
         {
          title: '存货名称',
          dataIndex: 'inventoryName',
          width: 160,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '颜色',
          dataIndex: 'colour',
          width: 100,
          className: 'replacecolor',
          ellipsis: true,
        },
         {
          title: '尺码',
          dataIndex: 'size',
          width: 100,
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '配码规格',
          dataIndex: 'codingRules',
          width: 120,
          className: 'replacecolor',
          ellipsis: true,
        },


        {
          title: '订单数量',
          dataIndex: 'orderQuantity',
          width: 80,
          className: 'replacecolor',
          ellipsis: true,
        },
      
        {
          title: '发货数量',
          dataIndex: 'shipmentQuantity',
          scopedSlots: { customRender: 'shipmentQuantity' },
          width: 80,
          ellipsis: true,
        },

      ],

      syShippingDetailsItemList: [], // 子表信息
      visible: false,
      confirmLoading: false,
      dateFormat: 'YYYY-MM-DD'
    }
  },
  created() {},

  methods: {
    onClose() {
      this.$emit('close')
      this.visible = false
    }
  }
}
</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>