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="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: 1790,y:400 }"
              @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: '小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: 'inventoryCode',
          width: 120,
          className: 'replacecolor'
        },
        {
          title: '存货名称',
          dataIndex: 'inventoryName',
          width: 250,
          className: 'replacecolor'
        },
         {
          title: '颜色',
          dataIndex: 'colour',
          width: 160,
          customRender: t => ellipsis(t),
          className: 'replacecolor'
        },
        {
          title: '尺码',
          dataIndex: 'size',
          width: 100,
          className: 'replacecolor'
        },
        {
          title: '配码规格',
          dataIndex: 'codingRules',
          width: 180,
          className: 'replacecolor'
        },
        {
          title: '订单数量',
          dataIndex: 'orderQuantity',
          width: 120,
          className: 'replacecolor'
        },
          {
          title: '发货数量',
          dataIndex: 'shipmentQuantity',
          width: 120,
          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',
        //   customRender: text => {
        //     return moment(text).format('YYYY-MM-DD')
        //   }
        // },
        //  {
        //   title: '预发货日期',
        //   dataIndex: 'preDeliveryDate',
        //   width: 100,
        //   className: 'replacecolor',
        
        // },
        //  {
        //   title: '预完工日期',
        //   dataIndex: 'preCompletionDate',
        //   width: 100,
        //   className: 'replacecolor',
         
        // },
        // {
        //   title: '成衣工厂',
        //   dataIndex: 'garmentFactory',
        //   width: 100,
        //   className: 'replacecolor'
        // },
        // {
        //   title: '业务类型',
        //   dataIndex: 'businessTypeText',
        //   width: 120,
        //   className: 'replacecolor'
        // },
        // {
        //   title: '客户订单',
        //   dataIndex: 'customerOrder',
        //   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,
        //   className: 'replacecolor',
        //   customRender:function(value){
        //     if (value == "1")
        //       return "是";
        //     else if (value == "0")
        //       return "否";
        //     return value;
        //   }
        // },
        // {
        //   title: '物料成分',
        //   dataIndex: 'materialComposition',
        //   scopedSlots: { customRender: 'materialComposition' },
        //   width: 140,
        //   className: 'replacecolor'
        // },

        // {
        //   title: '销售类型',
        //   dataIndex: 'salesTypeText',
        //   width: 120,
        //   className: 'replacecolor'
        // },
        // {
        //   title: '客户简称',
        //   dataIndex: 'customerAbbreviation',
        //   width: 220,
        //   className: 'replacecolor'
        // },
        // {
        //   title: '客户名称',
        //   dataIndex: 'customerName',
        //   width: 300,
        //   className: 'replacecolor',
        //   customRender: t => ellipsis(t),
        // },
        // {
        //   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: 180,
        //   className: 'replacecolor'
        // },
        // {
        //   title: '第三方',
        //   dataIndex: 'thirdParty',
        //   width: 220,
        //   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: 200,
        //   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: '处理方式',
        //   dataIndex: 'treatmentMethod',
        //   width: 160,
        //   scopedSlots: { customRender: 'treatmentMethod' },
        //   className: 'replacecolor'
        // },
        // {
        //   title: '是否手册纱',
        //   dataIndex: 'manualYarnFlag',
        //   width: 100,
        //   customRender:function(value){
        //     if (value == "1")
        //       return "是";
        //     else if (value == "0")
        //       return "否";
        //     return value;
        //   },
        //   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>