分页+染损接口+发运明细

src/field/reportForms/dyeLossTable.md

@@ -2,33 +2,21 @@
 
 ---
 
-## 查询条件
 
-code    订单号
+ccode    订单号
 orderType   订单类型
 venName   供应商
 planLotNumber   计划单号
 csocode   销售订单号
 
----
 
-## table
 
-cInvCode 物料编码
-cInvName 物料名称
+cinvCode 物料编码
+cinvName 物料名称
 color 颜色
-cVenName 供应商
-cCode 订单号
-iQuantity 订单数量
-iQuantity2 采购入库数
-iQuantity3 材料出库数
-iMSQuantity 核销数量
+cvenName 供应商
+iquantity 订单数量
+iquantity2 采购入库数
+iquantity3 材料出库数
+imsquantity 核销数量
 dyeLossRate 染损
-
-# 合计数据 （是否后端给出合计数量，前端只负责显示 or 前端计算返回的数据的合计数）
-
-？？？？？ 订单数量合计
-？？？？？ 采购入库数合计
-？？？？？ 材料出库合计
-？？？？？ 核销数量合计
-？？？？？ 染损合计

src/main.js

@@ -7,7 +7,7 @@ import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
 import { VueAxios } from '@/utils/request'
-import * as echarts from 'echarts'
+// import * as echarts from 'echarts'
 
 import Antd, { version } from 'ant-design-vue'
 import Viser from 'viser-vue'
@@ -64,7 +64,7 @@ Vue.use(preview)
 Vue.use(vueBus)
 Vue.use(JeecgComponents)
 Vue.use(VueAreaLinkage)
-Vue.prototype.$echarts = echarts // 全局echarts
+// Vue.prototype.$echarts = echarts // 全局echarts
 Vue.config.productionTip = false
 
 SSO.init(() => {

src/views/dashboard/IndexChart.vue

@@ -102,6 +102,7 @@
     <a-row>
       <a-col :span="24">
         <a-card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '24px' }">
+          <!-- 图标提示文字 -->
           <a-row>
             <a-col :span="6">
               <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
@@ -128,6 +129,7 @@
               </a-spin>
             </a-col>
           </a-row>
+          <!-- 折线图 -->
           <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
         </a-card>
       </a-col>

src/views/reportForms/dye-loss-table.vue

@@ -65,7 +65,7 @@
         <a-button type="primary" icon="download" @click="handleExportXls('染损报表')">导出</a-button>
       </div>
 
-      <!-- 子表合计 table rowKey="id" :scroll="{ x: 1500 }" -->
+      <!-- 子表合计 table rowKey="id" :scroll="{ x: 1500 }"   :pagination="ipagination"-->
       <div>
         <a-table
           bordered
@@ -74,7 +74,7 @@
           :columns="dyeLossRateColumns"
           :data-source="dyeLossRateData"
           :loading="loading"
-          :pagination="ipagination"
+          :pagination="pagination"
           @change="handleTableChange"
           ref="table"
           :footer="totalFooterShow"
@@ -86,12 +86,13 @@
     <!-- 引入 echarts -->
     <a-card :bordered="false">
       <div class="chart">
-        <div class="someoneLossChart" v-if="queryParam.cVenName">
+        <div class="someoneLossChart" v-if="queryParam.venName">
+          <!-- :fatherList="dyeLossRateData" -->
           <someoneLossChart />
         </div>
 
         <div v-else class="allLossChart">
-          <allLossChart />
+          <allLossChart :fatherList="dyeLossRateData" />
         </div>
       </div>
     </a-card>
@@ -121,222 +122,112 @@ export default {
     return {
       // 表头
       dyeLossRateColumns: [
-        // {
-        //   title: '序号',
-        //   width: 60,
-        //   dataIndex: 'index',
-        //   customRender: (text, record, index) => `${index + 1}`,
-        //   className: 'replacecolor'
-        // },
         {
           title: '物料编码',
           width: 120,
-          dataIndex: 'cInvCode',
+          dataIndex: 'cinvCode',
           className: 'replacecolor'
         },
 
         {
           title: '物料名称',
           width: 160,
-          dataIndex: 'cInvName',
+          dataIndex: 'cinvName',
           className: 'replacecolor'
         },
         { title: '颜色', width: 160, dataIndex: 'color', customRender: t => ellipsis(t), className: 'replacecolor' },
-        { title: '供应商', width: 120, dataIndex: 'cVenName', className: 'replacecolor' },
+        { title: '供应商', width: 120, dataIndex: 'cvenName', className: 'replacecolor' },
         {
           title: '订单号',
           width: 160,
-          dataIndex: 'cCode',
+          dataIndex: 'ccode',
           className: 'replacecolor'
-          // customRender: function(text) {
-          //   if (text == '1') {
-          //     return '销售类型1'
-          //   }
-          //   if (text == '2') {
-          //     return '销售类型2'
-          //   }
-          //   if (text == '3') {
-          //     return '销售类型3'
-          //   }
-          //   if (text == '4') {
-          //     return '销售类型4'
-          //   }
-          // }
         },
-        { title: '订单数量', width: 100, dataIndex: 'iQuantity', className: 'replacecolor' },
-        { title: '采购入库数', width: 100, dataIndex: 'iQuantity2', className: 'replacecolor' },
-        { title: '材料出库数', width: 100, dataIndex: 'iQuantity3', className: 'replacecolor' },
-        { title: '核销数量', width: 100, dataIndex: 'iMSQuantity', className: 'replacecolor' },
+        { title: '订单数量', width: 100, dataIndex: 'iquantity', className: 'replacecolor' },
+        { title: '采购入库数', width: 100, dataIndex: 'iquantity2', className: 'replacecolor' },
+        { title: '材料出库数', width: 100, dataIndex: 'iquantity3', className: 'replacecolor' },
+        { title: '核销数量', width: 100, dataIndex: 'imsquantity', className: 'replacecolor' },
         { title: '染损', width: 120, dataIndex: 'dyeLossRate', className: 'replacecolor' }
       ],
-      dyeLossRateData: [
-        // {
-        //   cInvCode: '3801000890',
-        //   cInvName: '女装印花袋鼠袋拉毛绒布带帽衫',
-        //   color: '女装印花袋鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '20',
-        //   iQuantity2: '20',
-        //   iQuantity3: '20',
-        //   iMSQuantity: '20',
-        //   dyeLossRate: '4.32%'
-        // },
-        // {
-        //   cInvCode: '1901034590',
-        //   cInvName: '鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '30',
-        //   iQuantity2: '30',
-        //   iQuantity3: '30',
-        //   iMSQuantity: '30',
-        //   dyeLossRate: '31.34%'
-        // },
-        // {
-        //   cInvCode: '3801000890',
-        //   cInvName: '女装印花袋鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '20',
-        //   iQuantity2: '20',
-        //   iQuantity3: '20',
-        //   iMSQuantity: '20',
-        //   dyeLossRate: '4.32%'
-        // },
-        // {
-        //   cInvCode: '1901034590',
-        //   cInvName: '鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '30',
-        //   iQuantity2: '30',
-        //   iQuantity3: '30',
-        //   iMSQuantity: '30',
-        //   dyeLossRate: '31.34%'
-        // },
-        // {
-        //   cInvCode: '3801000890',
-        //   cInvName: '女装印花袋鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '20',
-        //   iQuantity2: '20',
-        //   iQuantity3: '20',
-        //   iMSQuantity: '20',
-        //   dyeLossRate: '4.32%'
-        // },
-        // {
-        //   cInvCode: '1901034590',
-        //   cInvName: '1',
-        //   iQuantity: '30',
-        //   color: 'red',
-        //   cVenName: 'uuuuu',
-        //   cCode: 'TT765',
-        //   iQuantity2: '3',
-        //   iQuantity3: '22',
-        //   iMSQuantity: '30',
-        //   dyeLossRate: '1%'
-        // },
-        // {
-        //   cInvCode: '3801000890',
-        //   cInvName: '2',
-        //   iQuantity: '20',
-        //   iQuantity2: '2',
-        //   iQuantity3: '11',
-        //   color: 'orange',
-        //   cVenName: 'RRRR',
-        //   cCode: 'YY78',
-        //   iMSQuantity: '20',
-        //   dyeLossRate: '2%'
-        // },
-        // {
-        //   cInvCode: '1901034590',
-        //   cInvName: '3',
-        //   iQuantity: '30',
-        //   iQuantity2: '3',
-        //   color: 'gray',
-        //   cVenName: 'AAAA',
-        //   cCode: 'AA78',
-        //   iQuantity3: '10',
-        //   iMSQuantity: '30',
-        //   dyeLossRate: '3%'
-        // }
-        // {
-        //   cInvCode: '3801000890',
-        //   cInvName: '女装印花袋鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '20',
-        //   iQuantity2: '20',
-        //   iQuantity3: '20',
-        //   iMSQuantity: '20',
-        //   dyeLossRate: '4.32%'
-        // },
-        // {
-        //   cInvCode: '1901034590',
-        //   cInvName: '鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '30',
-        //   iQuantity2: '30',
-        //   iQuantity3: '30',
-        //   iMSQuantity: '30',
-        //   dyeLossRate: '31.34%'
-        // },
-        // {
-        //   cInvCode: '3801000890',
-        //   cInvName: '女装印花袋鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '20',
-        //   iQuantity2: '20',
-        //   iQuantity3: '20',
-        //   iMSQuantity: '20',
-        //   dyeLossRate: '4.32%'
-        // },
-        // {
-        //   cInvCode: '1901034590',
-        //   cInvName: '鼠袋拉毛绒布带帽衫',
-        //   iQuantity: '30',
-        //   iQuantity2: '30',
-        //   iQuantity3: '30',
-        //   iMSQuantity: '30',
-        //   dyeLossRate: '31.34%'
-        // }
-      ],
+      dyeLossRateData: [], //染损数据
       loading: false, // 表格加载
 
       queryParam: {
         code: '', //订单号
         orderType: '', //订单类型
-        venName: '', //供应商
+        cvenName: '', //供应商
         planLotNumber: '', //计划单号
         csocode: '', //销售订单号
-        pageNo: '', // 初始页
-        pageSize: '-1' // 为了显示数据总计数
+        pageNo: '1' // 初始页
+        // pageSize: '10' // 为了显示数据总计数
       },
       // 分页
       pagination: {
-        total: '',
+        total: 0,
         current: 0,
         pageSize: 0
-      }
+      },
+      cvenNameArr: [], //供应商数组 chart
+      cinvNameArr: [], //物料名称数组chart
+      colorArr: [] //颜色数组chart
     }
   },
 
+  // html渲染出来后，操作dom
+  mounted() {
+    this.cancelLoading()
+    this.initEcharts()
+  },
+
   created() {
-    this.getdyeLossList() // 渲染 染损列表
-    console.log('000')
+    // setTimeout(() => {
+    //   this.loading = !this.loading
+    // }, 1000)
+    this.getdyeLossList()
+    //   // console.log('000')
   },
 
   methods: {
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    },
     // 分页查询 染损列表
     getdyeLossList() {
       this.$nextTick(() => {
         console.log('111')
         dyeLossList(this.queryParam).then(res => {
-          console.log('2222')
-          console.log(res.result);
+          console.log('查询接口调成')
+          console.log(res.result)
           if (res.success) {
             console.log('333')
             this.dyeLossRateData = res.result.records
             console.log('染损列表', this.dyeLossRateData)
+            console.log('染损列表cvenName', this.dyeLossRateData.cinvCode)
             // 分页信息赋值
             this.pagination = {
               total: res.result.total,
               current: res.result.current,
               pageSize: res.result.size
             }
+            console.log('this.pagination:', this.pagination)
+            console.log('res.result.total', res.result.total)
           }
         })
       })
     },
-
+    // 分页、排序、筛选变化时触发
+    handleTableChange(pagination, filters, sorter) {
+      console.log('当前页信息>>>>', pagination)
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field
+        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
+      }
+      this.queryParam.pageNo = pagination.current
+      console.log('this.queryParam.pageNo', this.queryParam.pageNo)
+      this.getdyeLossList()
+    },
     // 查询按钮
     searchQuery() {
       this.getdyeLossList() // 渲染染损列表
@@ -346,11 +237,6 @@ export default {
       this.getdyeLossList()
     },
 
-    handleTableChange() {
-      console.log('??这是啥')
-      this.$message.error('已取消选择')
-    },
-
     // 获取导出信息
     // async getInfoXls(fileName) {},
     // 导出
@@ -360,11 +246,9 @@ export default {
       const params = this.queryParam
       console.log('导出参数', params)
     },
-    // 合计行 TODO: 怎么合计数值 及 table 单元格合并
+    // 合计行 TODO: table 单元格合并
     totalFooterShow(data) {
-      // 后端传递的合计的数据
-      console.log('染损报表----合计行')
-      // console.log('data', data)
+      console.log('需合计数据(合计行)data', data)
       return (
         <a-table
           rowKey={Math.random}
@@ -385,30 +269,30 @@ export default {
         summary[attr] = '合计'
       }
       let iQuantityNum = 0 //订单数量 合计
-      this.dyeLossRateData.forEach(({ iQuantity }) => {
-        iQuantityNum = parseInt(iQuantityNum) + parseInt(iQuantity)
+      this.dyeLossRateData.forEach(({ iquantity }) => {
+        iQuantityNum = parseInt(iQuantityNum) + parseInt(iquantity)
       })
-      summary['iQuantity'] = iQuantityNum
+      summary['iquantity'] = iQuantityNum
 
       let iQuantity2Num = 0 //采购入库数 合计
-      this.dyeLossRateData.forEach(({ iQuantity2 }) => {
-        iQuantity2Num = parseInt(iQuantity2Num) + parseInt(iQuantity2)
+      this.dyeLossRateData.forEach(({ iquantity2 }) => {
+        iQuantity2Num = parseInt(iQuantity2Num) + parseInt(iquantity2)
       })
-      summary['iQuantity2'] = iQuantity2Num
+      summary['iquantity2'] = iQuantity2Num
 
       let iQuantity3Num = 0 //材料出库数 合计
-      this.dyeLossRateData.forEach(({ iQuantity3 }) => {
-        iQuantity3Num = parseInt(iQuantity3Num) + parseInt(iQuantity3)
+      this.dyeLossRateData.forEach(({ iquantity3 }) => {
+        iQuantity3Num = parseInt(iQuantity3Num) + parseInt(iquantity3)
       })
-      summary['iQuantity3'] = iQuantity3Num
+      summary['iquantity3'] = iQuantity3Num
 
       let iMSQuantityNum = 0 //核销数量 合计
-      this.dyeLossRateData.forEach(({ iMSQuantity }) => {
-        iMSQuantityNum = parseInt(iMSQuantityNum) + parseInt(iMSQuantity)
+      this.dyeLossRateData.forEach(({ imsquantity }) => {
+        iMSQuantityNum = parseInt(iMSQuantityNum) + parseInt(imsquantity)
       })
-      summary['iMSQuantity'] = iMSQuantityNum
+      summary['imsquantity'] = iMSQuantityNum
 
-      let dyeLossRateNum = 0 //染损
+      let dyeLossRateNum = 0 //染损合计
       this.dyeLossRateData.forEach(({ dyeLossRate }) => {
         dyeLossRateNum = parseInt(dyeLossRateNum) + parseInt(dyeLossRate)
       })

src/views/reportForms/dye-loss-table/allLossChart.vue

@@ -1,55 +1,108 @@
 <template>
-  <!-- 染损报表 未筛选供应商 -->
-  <div id="allLossChart" :style="{ width: '100%', height: '600px' }"></div>
+  <!-- 染损报表 未筛选供应商ref="chart" -->
+  <div id="allLossChart" :style="{ width: '100%', height: '600px' }" ref="container"></div>
 </template>
 
 <script>
 import * as echarts from 'echarts' //必须有
+// import echarts from '@views/reportForms/echarts'; 按需引入
 export default {
-  name: 'AllLossChart', // 未筛选供应商，所有供应商染损分析图
+  name: 'AllLossChart', // 所有供应商染损分析图
   data() {
     return {}
   },
+  props: {
+    fatherList: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   mounted() {
     this.initEcharts()
   },
   methods: {
     initEcharts() {
+      // 初始化 深色 ,'dark'
+       const myChart = echarts.init(this.$refs.container);
+      // const myChart = echarts.init(document.getElementById('allLossChart'))
+      // 配置
       const option = {
         title: {
-          text: '所有供应商物料染损统计图'
+          text: '所有供应商物料染损统计图',
+          textStyle: {
+            color: '#5470c6'
+          }
         },
         tooltip: {},
         legend: {
-          data: ['损耗']
+          data: ['染损']
         },
         xAxis: {
           type: 'category',
+          // data: this.fatherList.cvenName
           data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
         },
         yAxis: {
           type: 'value',
-          name:'(%)'
+          name: '(%)'
         },
         series: [
           {
-            name: '损耗',
-            type: 'line', 
+            name: '染损',
+            type: 'line',
             smooth: true,
-            data: [5, 20, 36, 10, 10, 20]
+            data: [5, 20, 36, 10, 10, 20],
+            // data: this.fatherList.dyeLossRate
+            //数据源
+            data:dataSources 
           }
         ]
       }
-      //深色 ,'dark'
-      const myChart = echarts.init(document.getElementById('allLossChart')) // 图标初始化
-      myChart.setOption(option) // 渲染页面
-
-      //随着屏幕大小调节图表
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
+      // 渲染
+      myChart.setOption(option)
     }
   }
+  // 监视数据变化
+  // watch: {
+  //   fatherList: {
+  //     handler(newData) {
+  //       const myChart = echarts.init(this.$ref.chart)
+  //       this.option = {
+  //         // 工具提示
+  //         title: {
+  //           text: '所供应商物料染损统计图'
+  //         },
+  //         tooltip: {},
+  //         legend: {
+  //           data: ['染损']
+  //         },
+  //         xAxis: {
+  //           type: 'category',
+  //           data: newData.cvenName
+  //           // data: this.fatherList.cvenName
+  //           // data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
+  //         },
+  //         yAxis: {
+  //           type: 'value',
+  //           name: '(%)'
+  //         },
+  //         series: [
+  //           {
+  //             name: '损耗',
+  //             type: 'line',
+  //             smooth: true,
+  //             data: newData.dyeLossRate
+  //             // data: [5, 20, 36, 10, 10, 20]
+  //             // data: this.fatherList.dyeLossRate
+  //           }
+  //         ]
+  //       }
+  //        myChart.setOption(option) // 渲染页面
+  //     },
+  //     immediate: true, // 立即监视
+  //     deep: true
+  //   }
+  // }
 }
 </script>
 

src/views/reportForms/dye-loss-table/someoneLossChart.vue

@@ -25,7 +25,7 @@ export default {
           data: ['损耗']
         },
         xAxis: {
-          data: ['物料**', '物料**', '物料**', '物料**', '物料**', '物料**', '物料**']
+          data: this.list.oooo
         },
         yAxis: {
           type: 'value',

src/views/reportForms/dye-loss-table/testedit.vue

@@ -0,0 +1,142 @@
+<template>
+  <!-- 染损报表 未筛选供应商 ref="chart" -->
+  <div id="myChart" :style="{ width: '100%', height: '600px' }"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts' //必须有
+export default {
+  name: 'AllLossChart', // 未筛选供应商，所有供应商染损分析图
+  data() {
+    return {
+      // cvenName: [], //供应商
+      // dyeLossRate: [] //染损
+    }
+  },
+  props: {
+    // fatherList: {
+    //   type: Object,
+    //   default: () => ({})
+    // }
+  },
+  mounted() {
+    this.drawChart()
+  },
+
+  methods: {
+    drawChart() {
+      // const myChart = echarts.init(this.$ref.chart)
+      const myChart = echarts.init(document.getElementById('myChart')) // 初始化
+      // 指定图标的配置项和数据
+      this.option = {
+        // 工具提示
+        title: {
+          text: '所有供应商物料染损统计图'
+        },
+        tooltip: {},
+        legend: {
+          data: ['染损']
+        },
+        xAxis: {
+          type: 'category',
+          // data: this.fatherList.cvenName
+          data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
+        },
+        yAxis: {
+          type: 'value',
+          name: '(%)'
+        },
+        series: [
+          {
+            name: '损耗',
+            type: 'line',
+            smooth: true,
+            data: [5, 20, 36, 10, 10, 20]
+            // data: this.fatherList.dyeLossRate
+          }
+        ]
+      }
+      // 深色, 'dark'
+
+      // const myChart = echarts.init(this.$ref.chart) // 初始化
+      myChart.setOption(option) // 渲染页面
+
+      //随着屏幕大小调节图表
+      // window.addEventListener('resize', () => {
+      //   myChart.resize()
+      // })
+    }
+  }
+  // 监视数据变化
+  // watch: {
+  //   fatherList: {
+  //     handler(newData) {
+  //       const myChart = echarts.init(this.$ref.chart)
+  // this.option = {
+  //   // 工具提示
+  //   title: {
+  //     text: '所有供应商物料染损统计图'
+  //   },
+  //   tooltip: {},
+  //   legend: {
+  //     data: ['染损']
+  //   },
+  //   xAxis: {
+  //     type: 'category',
+  //     data: newData.cvenName
+  //     // data: this.fatherList.cvenName
+  //     // data: ['FASHIONTEX', 'HARMONY', 'MAO XING YUAN', 'RongSen', 'SLJ', 'TIMBERMET', '国运森']
+  //   },
+  //   yAxis: {
+  //     type: 'value',
+  //     name: '(%)'
+  //   },
+  //   series: [
+  //     {
+  //       name: '损耗',
+  //       type: 'line',
+  //       smooth: true,
+  //       data: newData.dyeLossRate
+  //       // data: [5, 20, 36, 10, 10, 20]
+  //       // data: this.fatherList.dyeLossRate
+  //     }
+  //   ]
+  // }
+  //   },
+  //   immediate: true, // 立即监视
+  //   deep: 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/ th.replacecolor {
+//   background-color: #ccc;
+// }
+
+/deep/ .ant-table-footer .ant-table.body {
+  // overflow: hidden !important;
+}
+/deep/ .ant-table.ant-table-bordered .ant-table-footer {
+  border: none;
+  padding: 0;
+}
+#myChart {
+  h6 {
+    font-size: 16px;
+    font-weight: 700;
+  }
+}
+</style>

src/views/reportForms/echarts.js

@@ -0,0 +1,14 @@
+// 按需导入echarts图表
+import echarts from 'echarts/lib/echarts';
+// 再引入你需要使用的图表类型，标题，提示信息等
+import 'echarts/lib/chart/bar';   // 导入柱状图
+import 'echarts/lib/chart/line';  // 导入折线图
+import 'echarts/lib/chart/pie';  // 导入饼状图
+
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend'; // 导入
+import 'echarts/lib/component/tooltip'; //导入提示
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/legendScroll';// 图例翻译滚动
+
+export default echarts;

src/views/shipment-details/addShipDetDrawer.vue

@@ -61,35 +61,35 @@
                 </a-form-model-item>
               </a-col>
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="pack id" prop="packId">
                   <a-input placeholder="请输入pack id" v-model="addShipDet.packId"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="分销点" prop="distributionPoint">
                   <a-input placeholder="请输入分销点" v-model="addShipDet.distributionPoint"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="数量" prop="todo">
                   <a-input placeholder="合计" v-model="addShipDet.todo"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="单价" prop="salesUnitPrice">
                   <a-input placeholder="销售" v-model="addShipDet.salesUnitPrice"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="采购/委外订单号" prop="purOrSubOrder">
                   <a-input placeholder="请输入采购/委外订单号" v-model="addShipDet.purOrSubOrder"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="订单类型" prop="orderType">
@@ -97,25 +97,25 @@
                 </a-form-model-item>
               </a-col>
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="工厂单价" prop="factoryUnitPrice">
                   <a-input placeholder="采购/委外单价" v-model="addShipDet.factoryUnitPrice"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
               <a-col :md="6" :sm="8">
-                <a-form-model-item label="申报要素" prop="declarationElements">
-                  <a-input placeholder="单证维护" v-model="addShipDet.declarationElements"></a-input>
+                <a-form-model-item label="HScode" prop="hsCode">
+                  <a-input placeholder="HScode" v-model="addShipDet.hsCode"></a-input>
                 </a-form-model-item>
               </a-col>
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="套装件数" prop="numberOfSets">
                   <a-input placeholder="存货自定义项" v-model="addShipDet.numberOfSets"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="中文品名" prop="chineseName">
                   <a-input placeholder="请输入中文品名" v-model="addShipDet.chineseName"></a-input>
                 </a-form-model-item>
@@ -125,7 +125,7 @@
                 <a-form-model-item label="英文品名" prop="englishName">
                   <a-input placeholder="请输入英文品名" v-model="addShipDet.englishName"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
               <a-col :md="6" :sm="8">
                 <a-form-model-item label="成衣工厂" prop="garmentFactory">
@@ -133,11 +133,11 @@
                 </a-form-model-item>
               </a-col>
 
-              <a-col :md="6" :sm="8">
+              <!-- <a-col :md="6" :sm="8">
                 <a-form-model-item label="报关单价" prop="customsDeclarationUnitPrice">
                   <a-input placeholder="请输入报关单价" v-model="addShipDet.customsDeclarationUnitPrice"></a-input>
                 </a-form-model-item>
-              </a-col>
+              </a-col> -->
 
               <!-- U8系统适用 -->
               <a-col :md="12" :sm="12">
@@ -181,7 +181,7 @@
               <!-- 发货数量 :rules="rules.shipQuantity"-->
               <template slot="shipQuantity" slot-scope="text, record, index">
                 <a-form-model-item prop="shipmentQuantity">
-                  <a-input style="width:100%" type="text" v-model="record.shipQuantity" />
+                  <a-input style="width:100%" type="text" v-model="record.shipmentQuantity" />
                 </a-form-model-item>
               </template>
 
@@ -189,7 +189,7 @@
               <!-- isTc ' 是否 tc 功能 0 否 1 是', -->
               <template slot="isTC" slot-scope="text, record, index">
                 <a-form-model-item prop="isTc">
-                  <a-select v-model="record.isTC">
+                  <a-select v-model="record.isTc">
                     <a-select-option value="">请选择</a-select-option>
                     <a-select-option :value="1">是</a-select-option>
                     <a-select-option :value="0">否</a-select-option>
@@ -203,6 +203,52 @@
                   <a-input style="width:100%" type="text" v-model="record.materialComposition" />
                 </a-form-model-item>
               </template>
+              
+              <!-- 采购/委外订单号 :rules="rules.purOrSubOrder"-->
+              <template slot="purOrSubOrder" slot-scope="text, record, index">
+                <a-form-model-item prop="purOrSubOrder">
+                  <a-input style="width:100%" type="text" v-model="record.purOrSubOrder" />
+                </a-form-model-item>
+              </template>
+              
+               <!-- 报关单价 :rules="rules.customsDeclarationUnitPrice"-->
+              <template slot="customsDeclarationUnitPrice" slot-scope="text, record, index">
+                <a-form-model-item prop="customsDeclarationUnitPrice">
+                  <a-input style="width:100%" type="text" v-model="record.customsDeclarationUnitPrice" />
+                </a-form-model-item>
+              </template>
+               <!-- 套装件数 :rules="rules.numberOfSets"-->
+               <template slot="numberOfSets" slot-scope="text, record, index">
+                <a-form-model-item prop="numberOfSets">
+                  <a-input style="width:100%" type="text" v-model="record.numberOfSets" />
+                </a-form-model-item>
+              </template>
+              
+              <!-- 工厂单价 :rules="rules.factoryUnitPrice"-->
+               <template slot="factoryUnitPrice" slot-scope="text, record, index">
+                <a-form-model-item prop="factoryUnitPrice">
+                  <a-input style="width:100%" type="text" v-model="record.factoryUnitPrice" />
+                </a-form-model-item>
+              </template>
+              
+                <!-- 申报要素 :rules="rules.declarationElements"-->
+               <template slot="declarationElements" slot-scope="text, record, index">
+                <a-form-model-item prop="declarationElements">
+                  <a-input style="width:100%" type="text" v-model="record.declarationElements" />
+                </a-form-model-item>
+              </template>
+                <!-- 中文品名 :rules="rules.chineseName"-->
+               <template slot="chineseName" slot-scope="text, record, index">
+                <a-form-model-item prop="chineseName">
+                  <a-input style="width:100%" type="text" v-model="record.chineseName" />
+                </a-form-model-item>
+              </template>
+                <!-- 英文品名 :rules="rules.englishName"-->
+               <template slot="englishName" slot-scope="text, record, index">
+                <a-form-model-item prop="englishName">
+                  <a-input style="width:100%" type="text" v-model="record.englishName" />
+                </a-form-model-item>
+              </template>
 
               <!-- 操作 -->
               <template slot="operationSlot" slot-scope="text, record, index">
@@ -335,8 +381,31 @@ export default {
           className: 'replacecolor'
         },
         {
-          title: '订单数据',
-          dataIndex: 'orderDate',
+          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'
         },
@@ -354,6 +423,14 @@ export default {
           width: 120,
           className: 'replacecolor'
         },
+        
+         {
+          title: '套装件数',
+          dataIndex: 'numberOfSets',
+          scopedSlots: { customRender: 'numberOfSets' },
+          width: 120,
+          className: 'replacecolor'
+        },
         {
           title: '是否TC功能',
           dataIndex: 'isTC',
@@ -393,12 +470,12 @@ export default {
           width: 120,
           className: 'replacecolor'
         },
-        {
-          title: '整单合计',
-          dataIndex: 'wholeOrderTotal',
-          width: 120,
-          className: 'replacecolor'
-        },
+        // {
+        //   title: '数量（合计）',
+        //   dataIndex: 'wholeOrderTotal',
+        //   width: 120,
+        //   className: 'replacecolor'
+        // },
 
         {
           title: '销售部门',
@@ -450,6 +527,19 @@ export default {
           className: 'replacecolor'
         },
 
+        {
+          title: '单价(销售)',
+          dataIndex: 'salesUnitPrice',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '工厂单价',
+          dataIndex: 'factoryUnitPrice',
+          width: 120,
+          scopedSlots: { customRender: 'factoryUnitPrice' },
+          className: 'replacecolor'
+        },
         {
           title: '付款条件',
           dataIndex: 'termOfPayment',
@@ -471,6 +561,28 @@ export default {
           className: 'replacecolor'
         },
 
+        {
+          title: '申报要素',
+          dataIndex: 'declarationElements',
+          width: 160,
+          scopedSlots: { customRender: 'declarationElements' },
+          className: 'replacecolor'
+        },
+         {
+          title: '中文品名',
+          dataIndex: 'chineseName',
+          width: 160,
+          scopedSlots: { customRender: 'chineseName' },
+          className: 'replacecolor'
+        },
+        
+        {
+          title: '英文品名',
+          dataIndex: 'englishName',
+          width: 160,
+          scopedSlots: { customRender: 'englishName' },
+          className: 'replacecolor'
+        },
         {
           title: '价格备注',
           dataIndex: 'priceRemarks',
@@ -518,6 +630,11 @@ export default {
   methods: {
     getSon(val) {
       console.log('勾选订单数据', val)
+     for(var i in val) {
+       val[i]['orderQuantity'] = val[i].quantity;
+       val[i]['orderRemainingQuantity'] = val[i].surplusNum;
+       val[i]['salesUnitPrice'] = val[i].unitPriceIncludingTax;
+     }
       this.msgFormSon = val
       this.syShippingDetailsItemList = this.msgFormSon
       console.log('新增页 子表信息', this.syShippingDetailsItemList)
@@ -537,19 +654,20 @@ export default {
       newObj.preDeliveryDate = this.addShipDet.preDeliveryDate.format('YYYY-MM-DD') // 预发货日期
       newObj.preCompletionDate = this.addShipDet.preCompletionDate.format('YYYY-MM-DD') // 预完工日期
       // 2022-06-10 增加的字段
-      newObj.packId = this.addShipDet.packId
-      newObj.distributionPoint = this.addShipDet.distributionPoint
-      newObj.todo = this.addShipDet.todo //数量（合计）
-      newObj.salesUnitPrice = this.addShipDet.salesUnitPrice
-      newObj.purOrSubOrder = this.addShipDet.purOrSubOrder
-      newObj.orderType = this.addShipDet.orderType
-      newObj.factoryUnitPrice = this.addShipDet.factoryUnitPrice
-      newObj.declarationElements = this.addShipDet.declarationElements
-      newObj.numberOfSets = this.addShipDet.numberOfSets
-      newObj.chineseName = this.addShipDet.chineseName
-      newObj.englishName = this.addShipDet.englishName
-      newObj.garmentFactory = this.addShipDet.garmentFactory
-      newObj.customsDeclarationUnitPrice = this.addShipDet.customsDeclarationUnitPrice
+      // newObj.packId = this.addShipDet.packId
+      // newObj.distributionPoint = this.addShipDet.distributionPoint
+      // newObj.todo = this.addShipDet.todo //数量（合计）
+      // newObj.salesUnitPrice = this.addShipDet.salesUnitPrice
+      // newObj.purOrSubOrder = this.addShipDet.purOrSubOrder
+       newObj.orderType = this.addShipDet.orderType
+      // newObj.factoryUnitPrice = this.addShipDet.factoryUnitPrice
+      // newObj.declarationElements = this.addShipDet.declarationElements
+      // newObj.numberOfSets = this.addShipDet.numberOfSets
+      // newObj.chineseName = this.addShipDet.chineseName
+      // newObj.englishName = this.addShipDet.englishName
+       newObj.garmentFactory = this.addShipDet.garmentFactory
+       newObj.hsCode = this.addShipDet.hsCode
+      // newObj.customsDeclarationUnitPrice = this.addShipDet.customsDeclarationUnitPrice
 
       newObj.memo = this.addShipDet.memo // U8系统适用
       newObj.syShippingDetailsItemList = this.syShippingDetailsItemList // 子表信息赋值
@@ -673,6 +791,6 @@ export default {
 
 // 子表下拉显示
 /deep/ .ant-card-body {
-  margin-bottom: 50px;
+  margin-bottom: 10px;
 }
 </style>

src/views/shipment-details/referOrderDataModal.vue

@@ -170,7 +170,19 @@ export default {
           width: 100,
           className: 'replacecolor'
         },
+        {
+          title: '订单剩余数量',
+          dataIndex: 'surplusNum',
+          width: 100,
+          className: 'replacecolor'
+        },
 
+        {
+          title: '含税单价',
+          dataIndex: 'unitPriceIncludingTax',
+          width: 100,
+          className: 'replacecolor'
+        },
         {
           title: '业务类型',
           dataIndex: 'businessTypeText',