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">
                  {{ detailsShipDet.customer }}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="预发货日期" prop="preDeliveryDate">
                  {{ detailsShipDet.preDeliveryDate }}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="预完工日期" prop="preCompletionDate">
                  {{ detailsShipDet.preCompletionDate }}
                </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>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="成衣工厂" prop="garmentFactory">
                  {{ detailsShipDet.garmentFactory }}
                </a-form-model-item>
              </a-col>

              <a-col :md="6" :sm="8">
                <a-form-model-item label="整单合计" prop="wholeOrderTotal">
                  {{ detailsShipDet.wholeOrderTotal }}
                </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 }"
              @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'
        },
        {
          title: '订单号',
          dataIndex: 'orderNumber',
          width: 120,
          fixed: 'left',
          className: 'replacecolor'
        },
        {
          title: '款号',
          dataIndex: 'itemNumber',
          scopedSlots: { customRender: 'itemNumber' },
          fixed: 'left',
          width: 180,
          className: 'replacecolor'
        },

        // {
        //   title: '创建时间',
        //   dataIndex: 'createTime',
        //   align: 'center',
        //   sorter: true,
        //   customRender: text => {
        //     return moment(text).format('YYYY-MM-DD')
        //   }
        // },
        {
          title: '订单日期',
          dataIndex: 'orderDate',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '业务类型',
          dataIndex: 'businessTypeText',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '订单主表ID',
          dataIndex: 'syOrderDataId',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '客户订单',
          dataIndex: 'customerOrder',
          width: 120,

          className: 'replacecolor'
        },
        {
          title: '小po',
          dataIndex: 'smallPo',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: 'Pack Id',
          dataIndex: 'packId',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '采购/委外订单号',
          dataIndex: 'purOrSubOrder',
          scopedSlots: { customRender: 'purOrSubOrder' },
          // fixed: 'left',
          width: 180,
          className: 'replacecolor'
        },
        {
          title: ' 报关单价',
          dataIndex: 'customsDeclarationUnitPrice',
          scopedSlots: { customRender: 'customsDeclarationUnitPrice' },
          // fixed: 'left',
          width: 180,
          className: 'replacecolor'
        },

        {
          title: '订单数量',
          dataIndex: 'orderQuantity',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '订单剩余数量',
          dataIndex: 'orderRemainingQuantity',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '发货数量',
          dataIndex: 'shipmentQuantity',
          scopedSlots: { customRender: 'shipmentQuantity' },
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '套装件数',
          dataIndex: 'numberOfSets',
          scopedSlots: { customRender: 'numberOfSets' },
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '是否TC功能',
          dataIndex: 'isTC',
          width: 90,
          scopedSlots: { customRender: 'isTC' },
          className: 'replacecolor'
        },
        {
          title: '物料成分',
          dataIndex: 'materialComposition',
          scopedSlots: { customRender: 'materialComposition' },
          width: 140,
          className: 'replacecolor'
        },

        {
          title: '销售类型',
          dataIndex: 'salesTypeText',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '客户简称',
          dataIndex: 'customerAbbreviation',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '汇率',
          dataIndex: 'exchangeRate',
          width: 120,
          className: 'replacecolor'
        },
        // {
        //   title: '整单（合计）',
        //   dataIndex: 'wholeOrderTotal',
        //   width: 120,
        //   className: 'replacecolor'
        // },
        {
          title: '销售部门',
          dataIndex: 'salesDepartment',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '业务员',
          dataIndex: 'salesman',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '币种',
          dataIndex: 'currencyText',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '品牌方',
          dataIndex: 'brandSide',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '第三方',
          dataIndex: 'thirdParty',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '定金比例(%)',
          dataIndex: 'depositRatio',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '定金',
          dataIndex: 'deposit',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '协同路线',
          dataIndex: 'collaborativeRoute',
          width: 120,
          className: 'replacecolor'
        },

        {
          title: '单价(销售)',
          dataIndex: 'salesUnitPrice',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '工厂单价',
          dataIndex: 'factoryUnitPrice',
          width: 120,
          scopedSlots: { customRender: 'factoryUnitPrice' },
          className: 'replacecolor'
        },
        {
          title: '付款条件',
          dataIndex: 'termOfPayment',
          width: 160,
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        {
          title: '最终客户',
          dataIndex: 'endCustomer',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '订单备注',
          dataIndex: 'orderRemarks',
          width: 160,
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },

        {
          title: '申报要素',
          dataIndex: 'declarationElements',
          width: 160,
          scopedSlots: { customRender: 'declarationElements' },
          className: 'replacecolor'
        },

        {
          title: '价格备注',
          dataIndex: 'priceRemarks',
          width: 160,
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        {
          title: '订单变更说明',
          dataIndex: 'orderChangeDescription',
          width: 160,
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        {
          title: '订单子表ID',
          dataIndex: 'syOrderDataItemId',
          width: 160,
          className: 'replacecolor'
        },

        {
          title: '处理方式',
          dataIndex: 'treatmentMethod',
          width: 160,
          scopedSlots: { customRender: 'treatmentMethod' },
          className: 'replacecolor'
        },
        {
          title: '是否手册纱',
          dataIndex: 'manualYarnFlag',
          width: 100,
          scopedSlots: { customRender: 'manualYarnFlag' },
          className: 'replacecolor'
        },
        {
          title: '手册纱单价',
          dataIndex: 'manualYarnUnitPrice',
          width: 160,
          scopedSlots: { customRender: 'manualYarnUnitPrice' },
          className: 'replacecolor'
        },
        {
          title: '手册纱占比',
          dataIndex: 'manualYarnProportion',
          width: 120,
          scopedSlots: { customRender: 'manualYarnProportion' },
          className: 'replacecolor'
        }
      ],

      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>