齐套率报表两个弹框

src/views/reportForms/full-rate-table.vue

@@ -128,12 +128,17 @@
         :row-key="record => record.id"
         :scroll="{ x: 1500 }"
       >
+      <!-- 操作 -->
+        <span slot="operationSlot" slot-scope="text, record">
+          <a-button type="primary" @click="lineDetail">明细</a-button>
+        </span>
       </a-table>
     </a-card>
     <!-- 维护邮件发送通知 :father="cc"-->
     <emailMsg-modal ref="emailMsgModal"></emailMsg-modal>
     <monthChart-modal ref="monthChartModal"></monthChart-modal>
     <departmentChart-modal ref="departmentChartModal"></departmentChart-modal>
+    <Detail ref="detail"></Detail>
   </div>
 </template>
 
@@ -145,11 +150,11 @@ import moment from 'moment'
 import emailMsgModal from '@views/reportForms/full-rate-table/emailMsgModal.vue'
 import monthChartModal from '@views/reportForms/full-rate-table/monthChartModal.vue'
 import departmentChartModal from '@views/reportForms/full-rate-table/departmentChartModal.vue'
-
+import Detail from '@views/reportForms/full-rate-table/detail.vue'
 export default {
   name: 'Fullratetable', // 齐套率报表
   mixins: [JeecgListMixin],
-  components: { JEllipsis, moment, emailMsgModal, monthChartModal, departmentChartModal },
+  components: { JEllipsis, moment, emailMsgModal, monthChartModal, departmentChartModal,Detail },
 
   data() {
     let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
@@ -330,6 +335,14 @@ export default {
           width: 90,
           fixed: 'right',
           className: 'replacecolor'
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          width: 90,
+          fixed: 'right',
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'operationSlot' },
         }
       ],
       fullrateData: [
@@ -413,6 +426,9 @@ export default {
       this.queryParam = {}
       // this.getAnnList()
     },
+    lineDetail(){
+      this.$refs.detail.detailModVis = true
+    },
 
     // 选中行
     // onSelectChange(keys, rows) {

src/views/reportForms/full-rate-table/detail.vue

@@ -0,0 +1,148 @@
+<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">
+            <a @click="sonFullSetRate">{{ 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 SubcomponentRate from '@views/reportForms/full-rate-table/subcomponent-rate.vue'
+export default {
+  name: 'Detail', // 明细 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis,JsonExcel,SubcomponentRate },
+  data() {
+    return {      
+      // 表头
+      detailColumns: [
+        {
+          title: '计划到货日期',
+          dataIndex: 'data',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '小po',
+          dataIndex: 'po',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '存货名称',
+          dataIndex: 'chun',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '存货编码',
+          dataIndex: 'chunma',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '颜色',
+          dataIndex: 'color',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '交期',
+          dataIndex: 'jiaoqi',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '订单数量',
+          dataIndex: 'quantity',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '齐套率',
+          dataIndex: 'iquantity',
+          width: 80,
+          className: 'replacecolor',
+          scopedSlots: { customRender: 'fullSetRate' }
+        },
+        {
+          title: '累计入库数量',
+          dataIndex: 'iquantityadd',
+          width: 80,
+          className: 'replacecolor',
+        }
+      ],
+      detailData: [
+      ],
+      loading: false, // 表格加载
+      confirmLoading: false,
+      detailModVis: false,
+    }
+  },
+ 
+  methods: {
+      backDetailTable(){
+          this.detailModVis = false
+      },
+      sonFullSetRate(){
+         this.$refs.SubcomponentRate.SubcomponentModVis = true
+      }
+ }
+}
+</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>

src/views/reportForms/full-rate-table/subcomponent-rate.vue

@@ -0,0 +1,131 @@
+<template>
+  <a-modal
+    title="子件齐套率"
+    v-model="SubcomponentModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+
+      <!-- table -->
+      <div>
+        <a-table
+          ref="tableRef"
+          :loading="loading"
+           bordered
+          :columns="SubcomponentRateCloumns"
+          :data-source="SubcomponentRateData"
+          :pagination="false"
+          :scroll="{ y: 500,x:1500 }"
+          :footer="showTotal"
+        >
+        </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>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+export default {
+  name: 'SubcomponentRate', // 明细 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis},
+  data() {
+    return {      
+      // 表头
+      SubcomponentRateCloumns: [
+        {
+          title: '标准用量',
+          dataIndex: 'data',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '应领数据合计',
+          dataIndex: 'po',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '已领数据合计',
+          dataIndex: 'chun',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '颜色',
+          dataIndex: 'chunma',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '克重',
+          dataIndex: 'color',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '尺码',
+          dataIndex: 'jiaoqi',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '门幅',
+          dataIndex: 'quantity',
+          width: 80,
+          className: 'replacecolor',
+        },
+        {
+          title: '齐套率',
+          dataIndex: 'iquantity',
+          width: 80,
+          className: 'replacecolor',
+        },
+      ],
+      SubcomponentRateData: [
+      ],
+      loading: false, // 表格加载
+      confirmLoading: false,
+      SubcomponentModVis: false,
+    }
+  },
+ 
+  methods: {
+      backDetailTable(){
+          this.SubcomponentModVis = false
+      }
+ }
+}
+</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>