sen-yu-new-web/src/views/reportForms/full-rate-table/detail.vue

<template>
  <a-modal
    title="明细"
    v-model="detailModVis"
    :confirmLoading="confirmLoading"
    width="90%"
    :footer="null"
  >
    <!-- tabel 加载 -->
    <a-spin :spinning="confirmLoading">

      <!-- table -->
      <div>
        <a-table
          ref="tableRef"
          :loading="loading"
           bordered
          :columns="detailColumns"
          :data-source="detailData"
          :pagination="false"
          :scroll="{ y: 500,x:1500 }"
          :footer="showTotal"
        >
        <!-- 齐套率 -->
        <span slot="fullSetRate" slot-scope="text,record">
            <a @click="sonFullSetRate(record)">{{ text }}</a>
          </span>
        </a-table>

        <!-- 导出 打印 返回  -->
        <a-row style="marginTop:20px;">
          <a-col :md="24" :sm="12">
            <span style="float: right;" class="table-operator">
              <a-button type="primary" @click="backDetailTable" icon="rollback">关闭</a-button>
            </span>
          </a-col>
        </a-row>
      </div>
    </a-spin>
    <SubcomponentRate ref="SubcomponentRate"></SubcomponentRate>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import JsonExcel from 'vue-json-excel'
import { fullRateClick } from '@api/reportForms/full-rate-table'
import SubcomponentRate from '@views/reportForms/full-rate-table/subcomponent-rate.vue'
import moment from 'moment'

export default {
  name: 'Detail', // 明细 弹框
  mixins: [JeecgListMixin],
  components: { JEllipsis,JsonExcel,SubcomponentRate,moment },
  data() {
    return {      
      // 表头
      detailColumns: [
        {
          title: '计划到货日期',
          dataIndex: 'dArriveDate',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '小po',
          dataIndex: 'smallPo',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '物料编码',
          dataIndex: 'cInvCode',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '物料名称',
          dataIndex: 'cInvName',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '颜色',
          dataIndex: 'clour',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '分销点',
          dataIndex: 'distributionPoint',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: 'packID',
          dataIndex: 'packId',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '交期',
          dataIndex: 'deliveryDate',
          width: 80,
          className: 'replacecolor',
          scopedSlots: { customRender: 'fullSetRate' },
        },
        {
          title: '委外订单数量',
          dataIndex: 'subcontractOrderQuantity',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '齐套率',
          dataIndex: 'setRate',
          width: 80,
          className: 'replacecolor',
        },
        {
          title: '累计入库数量',
          dataIndex: 'cumulativeReceiptQty',
          width: 80,
          className: 'replacecolor',
        }
      ],
      detailData: [
      ],
      loading: false, // 表格加载
      confirmLoading: false,
      detailModVis: false,
    }
  },
 
  methods: {
      moment,
      backDetailTable(){
          this.detailModVis = false
      },
      sonFullSetRate(record){
        fullRateClick({mODetailsID:record.modetailsID}).then(res => {
          if (res.success) {
            this.$refs.SubcomponentRate.SubcomponentModVis = true
            this.$refs.SubcomponentRate.SubcomponentRateData = res.result
          }else{
              that.$message.error(res.message);
          }
          
        })

      }
 }
}
</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/ .ant-table-footer .ant-table-body {
    overflow: hidden !important;
  }
// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
</style>