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

<template>
    <div id="manualModal">
      <a-modal
        title="手工匹配订单"
        v-model="manualModVis"
        :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="账套">
                  <j-search-select-tag
                  placeholder="请选择账套"
                  v-model="queryParam.account"
                  dict="view_account,account,account">
                </j-search-select-tag>
                </a-form-item>
              </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="销售订单号">
                <a-input placeholder="请输入销售订单号" v-model="queryParam.orderNumber"></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="manualColumns"
                :data-source="manualData"
                :scroll="{x: 1500,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>
          </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>
      <subcontract-order-modal ref="subcontractOrderModal" @close="closeBack"></subcontract-order-modal>
    </div>
  </template>
  
  <script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import moment from 'moment'
  import { syDeclarationElementsAdd,queryLatelyDeclarationElements } from '@api/document/shipmentList'
  import {Dictionaries} from '@api/document/book.js'
  import {salesOrder,submitSalesOrder} from '@api/document/order'
  import subcontractOrderModal from '@views/order/subcontractOrderModal.vue'
  
  export default {
    name: 'manualModal', // 报关要素
    mixins: [JeecgListMixin],
    components: { JEllipsis, moment,subcontractOrderModal },
  
    data() {
      let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
  
      return {
        queryParam:{},
        manualModVis:false,
        confirmLoading: false,
        manualData:[ ],
        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
        },
        {
          title: '操作',
          width: 120,
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operationSlot' },
          className: 'replacecolor',
          ellipsis: true
        },
        ],
        pagination:''
      }
    },
    // 接收父组件 方法
    props: {},
  
    created() {  

    },
    methods: {
        //获取数据
        getData(){
      var that = this;
      this.confirmLoading = true
      this.$nextTick(() => {
        salesOrder(this.queryParam).then(res => {
          this.confirmLoading = false
          if (res.success) {
            that.manualData = res.result.records;
            that.manualData.map(item=>{
              item.selectStatus = '0'
            })
            that.pagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }else{
              that.$message.error(res.message);
          }
          
        })
      })
        },
        //查询 
        searchQuery(){
          if(this.queryParam.account == '' || !this.queryParam.account){
             this.$message.error('请选择账套')
          }else if(this.queryParam.orderNumber == '' || !this.queryParam.orderNumber){
            this.$message.error('请选择销售订单号')
          }else{

            this.getData()
          }
        },
        //重置
        searchReset(){
          this.queryParam ={}
          this.manualData =[]
        },
        //返回
        handleCancel(){
           this.close()
        },
        //保存
        addSave(){
          var newObj =[]
          this.manualData.map(item=>{
            if(!item.selectStatus){newObj.push(item)}
          })
          submitSalesOrder(newObj).then(res => {
          if (res.success) {
            this.$message.success('保存成功')
            this.close()
          }else{
              this.$message.error(res.message);
         }
          
        })
        },
        //关联委外
        handleExportXls(record){
           this.$refs.subcontractOrderModal.subcontractOrderModVis = true
           this.$refs.subcontractOrderModal.fatherList = record
        },
        //删行
        handleDelete(record,index){
          this.manualData.splice(index, 1);
        },
        //关闭弹窗
        close(){
          this.queryParam ={}
          this.manualData =[]
          this.manualModVis = false
        },
         // 分页变化时触发
         handleTableChange(pagination, filters, sorter) {
             this.queryParam.pageNo = pagination.current
              this.getData()
          },
        //委外订单弹窗关闭后
        closeBack(data,obj){
           this.manualData.map(item=>{
             if(item.irowNo == data.irowNo){
               item.ccode = obj.ccode
               item.ivouchRowNo = obj.ivouchRowNo
               delete item.selectStatus
             }
           })
        }
    },
  
    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>