sen-yu-new-web/src/views/order/subcontractOrderModal.vue

<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.ivouchRowNo"
                :columns="subcontractOrderColumns"
                :data-source="subcontractOrderData"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :scroll="{x: 1200,y:300 }"
                :pagination="pagination"
                @change="handleTableChange"
              >
              <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>

              <div class="purchase-order-table" style="margin-top: 2%;margin-bottom: 1%;">
              <h6 class="table-title">销售订单信息</h6>
              <a-table
                :row-key="record => record.id"
                :loading="loading"
                :columns="manualColumns"
                :data-source="manualData"
                :scroll="{ y: 200 }"
                bordered
                :pagination="false"
              >
              </a-table>
              </div>
          </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:[ ],
        manualData:[],
        subcontractOrderColumns:[
        {
          title: '委外订单号',
          width: 100,
          dataIndex: 'ccode',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '委外订单行号',
          width: 120,
          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
        },
        ],
        manualColumns:[
        {
          title: '销售订单账套号',
          width: 110,
          dataIndex: 'account',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '销售订单号',
          width: 110,
          dataIndex: 'orderNumber',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '销售订单行信息',
          width: 110,
          dataIndex: 'irowNo',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '存货编码',
          width: 120,
          dataIndex: 'inventoryCode',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '存货名称',
          width: 190,
          dataIndex: 'inventoryName',
          className: 'replacecolor',
        },
        {
          title: '规格型号',
          width: 120,
          dataIndex: 'specificationAndModel',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '颜色',
          width: 80,
          dataIndex: 'colour',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '委外订单号',
          width: 120,
          dataIndex: 'ccode',
          className: 'replacecolor',
          ellipsis: true
        },
        {
          title: '委外订单行号',
          width: 120,
          dataIndex: 'ivouchRowNo',
          className: 'replacecolor',
          ellipsis: true
        },
        ],
        selectedRowKeys:[],
        selectedRows:[],
        fatherList:'',
        pagination:{}
      }
    },
    // 接收父组件 方法
    props: {},
  
    created() {  

    },
    methods: {
      //获取数据
      getData(){
         var that = this;
      this.confirmLoading = true
      this.$nextTick(() => {
        subcontractOrder(this.queryParam).then(res => {
          this.confirmLoading = false
          if (res.success) {
            that.subcontractOrderData = 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){
            this.$message.error('请选择委外订单号')
          }else{
            this.getData()
          }
        },
        //重置
        searchReset(){
          this.subcontractOrderData = []
          this.queryParam={}
        },
        //返回
        handleCancel(){
          this.close()
        },
        //保存
        addSave(){
          if(this.selectedRowKeys.length == 0){
            this.$message.error('请勾选数据')
          }else if(this.selectedRowKeys.length >1){
            this.$message.error('只可选择一行数据')
          }else{
            this.close()
            this.$emit('close',this.fatherList,this.selectedRows[0])
          }
        },
        //关闭弹窗
        close(){
          this.subcontractOrderModVis = false
          this.subcontractOrderData = []
          this.queryParam={}
          this.selectedRowKeys = []
          this.manualData = []
        },
        //选中行
        onSelectChange(keys,rows){
         this.selectedRowKeys = keys;
         this.selectedRows = rows;
         },
          // 分页变化时触发
         handleTableChange(pagination, filters, sorter) {
             this.queryParam.pageNo = pagination.current
              this.getData()
          },  
    },
  
    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;
  }
     /deep/.ant-table-tbody .ant-table-row td{
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  padding: 9px 16px
 }
 /deep/.ant-card-body{
  padding-top: 10px !important;
  padding-bottom: 0px !important;
  }
   /deep/ .table-page-search-wrapper .table-page-search-submitButtons{
    margin-bottom: 8px;
  }
  </style>