分页列表查询委外订单

src/views/order/manualModal.vue

@@ -58,10 +58,10 @@
                 :scroll="{x: 1500,y:300 }"
                 :pagination="false"
               >
-              <span slot="operationSlot" slot-scope="text, record">
+              <span slot="operationSlot" slot-scope="text, record,index">
                      <a @click="handleExportXls(record)" style="color:green;">关联委外</a>
                      <a-divider type="vertical" />
-                     <a @click="handleExportXls(record)" style="color:red;">删行</a>
+                     <a @click="handleDelete(record,index)" style="color:red;">删行</a>
                  </span>
 
               </a-table>
@@ -90,6 +90,7 @@
           </a-button>
         </div>
       </a-modal>
+      <subcontract-order-modal ref="subcontractOrderModal"></subcontract-order-modal>
     </div>
   </template>
   
@@ -100,11 +101,12 @@
   import { syDeclarationElementsAdd,queryLatelyDeclarationElements } from '@api/document/shipmentList'
   import {Dictionaries} from '@api/document/book.js'
   import {salesOrder } from '@api/document/order'
+  import subcontractOrderModal from '@views/order/subcontractOrderModal.vue'
   
   export default {
     name: 'manualModal', // 报关要素
     mixins: [JeecgListMixin],
-    components: { JEllipsis, moment },
+    components: { JEllipsis, moment,subcontractOrderModal },
   
     data() {
       let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
@@ -118,63 +120,63 @@
         {
           title: '销售订单账套号',
           width: 140,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'account',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '销售订单号',
           width: 120,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'orderNumber',
           className: 'replacecolor',
           ellipsis: true
         },
         {
-          title: '销售订单行消息',
+          title: '销售订单行信息',
           width: 140,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'irowNo',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '存货编码',
           width: 120,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'inventoryCode',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '存货名称',
           width: 120,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'inventoryName',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '规格型号',
           width: 120,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'specificationAndModel',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '颜色',
           width: 80,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'colour',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '委外订单号',
           width: 120,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'ccode',
           className: 'replacecolor',
           ellipsis: true
         },
         {
           title: '委外订单行号',
           width: 120,
-          dataIndex: 'priceRemarks',
+          dataIndex: 'ivouchRowNo',
           className: 'replacecolor',
           ellipsis: true
         },
@@ -196,19 +198,17 @@
 
     },
     methods: {
-      //获取数据
-      getData(){
+        //获取数据
+        getData(){
       var that = this;
       // that.spinIsShow = true;
       this.loading = true
       this.$nextTick(() => {
         salesOrder(this.queryParam).then(res => {
-          debugger
           // that.spinIsShow = false;
           this.loading = false
           if (res.success) {
-            debugger
-            that.orderListData = res.result.records;
+            that.manualData = res.result.records;
             that.pagination = {
               total: res.result.total,
               current: res.result.current,
@@ -220,7 +220,7 @@
           
         })
       })
-      },
+        },
         //查询 
         searchQuery(){
           if(this.queryParam.account == '' || !this.queryParam.account){
@@ -244,6 +244,14 @@
         //保存
         addSave(){
 
+        },
+        //关联委外
+        handleExportXls(){
+           this.$refs.subcontractOrderModal.subcontractOrderModVis = true
+        },
+        //删行
+        handleDelete(record,index){
+          this.manualData.splice(index, 1);
         },
         //关闭弹窗
         close(){

src/views/order/subcontractOrderModal.vue

@@ -0,0 +1,250 @@
+<template>
+    <div id="manualModal">
+      <a-modal
+        title="手工匹配订单"
+        v-model="subcontractOrderModVis"
+        :confirmLoading="confirmLoading"
+        @cancel="handleCancel"
+        width="80%"
+        style="top:330px;left:100px;"
+      >
+        <!-- 主表信息 回显  -->
+        <a-card :bordered="false" >
+          <div class="table-page-search-wrapper">
+            <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="委外订单号">
+                <a-input placeholder="请输入委外订单号" v-model="queryParam.CCode"></a-input>
+              </a-form-item>
+            </a-col>            
+            <template v-if="toggleSearchStatus">
+            </template>
+
+            <a-col :md="6" :sm="8">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+                </a>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+          </div>
+        </a-card>
+  
+        <!-- 増行 子表 -->
+        <a-card :bordered="false" style="margin:10px 0;">
+          <!-- 子表 -->
+          <a-spin :spinning="confirmLoading">
+              <a-table
+                bordered
+                :row-key="record => record.id"
+                :columns="subcontractOrderColumns"
+                :data-source="subcontractOrderData"
+                :loading="loading"
+                :scroll="{x: 1500,y:300 }"
+                :pagination="false"
+              >
+              <span slot="operationSlot" slot-scope="text, record,index">
+                     <a @click="handleExportXls(record)" style="color:green;">关联委外</a>
+                     <a-divider type="vertical" />
+                     <a @click="handleDelete(record,index)" style="color:red;">删行</a>
+                 </span>
+
+              </a-table>
+          </a-spin>
+        </a-card>
+  
+        <!-- 页面底部保存取消 -->
+        <div
+          :style="{
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '10px 16px',
+            background: '#fff',
+            textAlign: 'right',
+            zIndex: 1
+          }"
+        >
+          <a-popconfirm title="确定放弃？" @confirm="handleCancel" okText="确定" cancelText="取消">
+            <a-button :style="{ marginRight: '8px' }">返回</a-button>
+          </a-popconfirm>
+          <a-button type="primary" @click="addSave">
+            保存
+          </a-button>
+        </div>
+      </a-modal>
+    </div>
+  </template>
+  
+  <script>
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import JEllipsis from '@/components/jeecg/JEllipsis'
+  import moment from 'moment'
+  import {subcontractOrder } from '@api/document/order'
+  
+  export default {
+    name: 'subcontractOrderModal', // 报关要素
+    mixins: [JeecgListMixin],
+    components: { JEllipsis, moment },
+  
+    data() {
+      let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
+  
+      return {
+        queryParam:{},
+        subcontractOrderModVis:false,
+        confirmLoading: false,
+        subcontractOrderData:[ ],
+        subcontractOrderColumns:[
+        {
+          title: '委外订单号',
+          width: 120,
+          dataIndex: 'CCode',
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        {
+          title: '委外订单行号',
+          width: 140,
+          dataIndex: 'IVouchRowNo',
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        {
+          title: '存货编码',
+          width: 120,
+          dataIndex: 'inventoryCode',
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        {
+          title: '存货名称',
+          width: 120,
+          dataIndex: 'inventoryName',
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        {
+          title: '规格型号',
+          width: 120,
+          dataIndex: 'specificationAndModel',
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        {
+          title: '颜色',
+          width: 80,
+          dataIndex: 'colour',
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        {
+          title: '操作',
+          width: 120,
+          dataIndex: 'operation',
+          scopedSlots: { customRender: 'operationSlot' },
+          className: 'replacecolor',
+          ellipsis: true
+        },
+        ]
+      }
+    },
+    // 接收父组件 方法
+    props: {},
+  
+    created() {  
+
+    },
+    methods: {
+      //获取数据
+      getData(){
+         var that = this;
+      // that.spinIsShow = true;
+      this.loading = true
+      this.$nextTick(() => {
+        subcontractOrder(this.queryParam).then(res => {
+            debugger
+          // that.spinIsShow = false;
+          this.loading = false
+          if (res.success) {
+              debugger
+            that.manualData = res.result.records;
+            that.pagination = {
+              total: res.result.total,
+              current: res.result.current,
+              pageSize: res.result.size
+            }
+          }else{
+              that.$message.error(res.message);
+          }
+          
+        })
+      })
+      },
+        //查询 
+        searchQuery(){
+           if(this.queryParam.CCode == '' || !this.queryParam.CCode){
+            debugger
+            this.$message.error('请选择委外订单号')
+          }else{
+            debugger
+            this.getData()
+          }
+        },
+        //重置
+        searchReset(){
+        },
+        //返回
+        handleCancel(){
+
+        },
+        //保存
+        addSave(){
+
+        },
+        //删行
+        handleDelete(record,index){
+         
+        },
+        //关闭弹窗
+        close(){
+
+        }
+    },
+  
+    computed: {}
+  }
+  </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;
+  }
+  // th.replacecolor {
+  // background-color:  #ccc;
+  // }
+  // 对话框里的card样式
+  /deep/ .ant-modal-content {
+    background-color: #f0f2f5;
+  }
+  /deep/ .ant-modal-body {
+    padding: 10px;
+  }
+  /deep/.ant-form-item{
+    margin-bottom: 0px !important;
+  }
+  </style>
+