cd-work-flow-web/src/views/oa/modules/SyCarryDetailModal.vue

<template>
<div class="reply" ref = "replyModal">
  <a-modal
    title="详情"
    width="85%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :getContainer ='()=>$refs.replyModal'
    @cancel="handleCancel"
   >
   <template slot="footer">
      <!-- <a-upload  name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"   @change="handleImportExcel" :customRequest="implementImport" >
        <a-button  type="primary">导入</a-button>
      </a-upload> -->
      <a-button @click="handleCancel" style="margin-left: 8px;">关闭</a-button>
      <a-button @click="handlePrint" style="margin-left: 8px;">打印</a-button>
    </template>
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" ref="form" :model="formState" :rules="validatorRules">
          <a-row :gutter="24">
            <!-- <a-col :md="8" :sm="8">
              <a-form-model-item label="编号" prop="code">
                <a-input   placeholder="请输入"  v-model="formState.code" readOnly/>
              </a-form-model-item>
            </a-col> -->
            <a-col :md="6" :sm="8">
              <a-form-model-item label="名称"  prop="userId">
                <a-input placeholder="请输入名称" v-model="formState.name" readOnly/>
              </a-form-model-item>
           </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="合计"  prop="code">
                 <a-input placeholder="请输入" v-model="formState.totalNum" disabled="false"/>
               </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="8">
              <a-form-model-item label="合计大写"  prop="code">
                 <a-input placeholder="请输入" v-model="formState.totalText" disabled="false"/>
               </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
          <a-col :md="24" :sm="8">
              <a-form-model-item label="备注"  prop="code">
                 <a-input placeholder="请输入" v-model="formState.remarks" readOnly/>
               </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
              <a-col :md="24" :sm="8"> 
               <a-form-model-item label="账户信息"  class="nresume" style="height:100px !important">
                 <a-input type="textarea" placeholder="请输入" v-model="formState.demo" readOnly/>
               </a-form-model-item>
              </a-col>
            </a-row>
      </a-form-model>
      <!-- 主表单区域 -->
      <!-- <a-form :model="form">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="编号">
              <a-input placeholder="请输入编号" v-decorator="['code', {}]"/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="名称">
              <a-input placeholder="请输入名称" v-decorator="['name', {}]"/>
            </a-form-item>
            <a-form-item label="合计" :labelCol="labelCol"  :wrapperCol="wrapperCol" >
                 <a-input placeholder="请输入" v-decorator="['total_num', {}] "/>
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              class="nresume" style="height:100px !important"
              label="备注">
              <a-input type="textarea" placeholder="请输入备注" v-decorator="['demo', {}]"/>
            </a-form-item>
      </a-form> -->

      <!-- 子表单区域 -->
      
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="搬运工对账单" :key="refKeys[0]" :forceRender="true">
          <!-- <a-button type="primary"  @click="addList">增行</a-button> -->
          <div id="fabricLossTable">
        <a-table
        bordered
        :columns="syCarryBTable.columns"
        :data-source="syCarryBTable.dataSource"
        :loading="syCarryBTable.loading"
        :scroll="{x: 2000, y:220}"
        :pagination="false"
      >
      <div :title="record.containerNo" :style="{maxWidth: '250px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" slot="containerNo" slot-scope="text, record">
        {{record.containerNo}}
      </div>
        <!-- 操作 -->
         <span slot="option" slot-scope="text, record, index">
           <a-popconfirm title="确定签字?" @confirm="handelAutograph(record)" okText="确定" cancelText="取消">
            <a href="">签名</a>
           </a-popconfirm>
          </span>
        </a-table>
        </div>
        
          <!-- <j-editable-table
            :ref="refKeys[0]"
            :loading="syCarryBTable.loading"
            :columns="syCarryBTable.columns"
            :dataSource="syCarryBTable.dataSource"
            :maxHeight="300"
            :minWidth="2000"
            :rowNumber="false"
            :rowSelection="true"
            :actionButton="true">
           <template v-slot:action="props">
            <a @click="handleAutograph(props)">签名</a>
           </template> -->
           <!-- <template v-slot:jhyName="props">
            <a-select @change='changeJhy(props)' >
                  <a-select-option
                     v-for="(item,index) in jhyNameOption"
                     :key="index"
                     :value="item.value">
                     {{item.label}}
                  </a-select-option>
                   </a-select>
           </template> -->
          <!-- </j-editable-table> -->

        </a-tab-pane>
      </a-tabs>

    </div>
  </a-modal>
</div>
</template>
<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import { getAction } from '@/api/manage'
   import {fileDetail} from '@api/oa/cd-sy-carry'
   import JEllipsis from '@/components/jeecg/JEllipsis'

  export default {
    name: 'SyCarryDetailModa',
    mixins: [JEditableTableMixin],
    components: {
        moment,
        JEllipsis
    },
    data() {
      let ellipsis = (v, l) => <j-ellipsis value={v} length={l} /> // 省略
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
        },
        formState:{},
        refKeys: ['syCarryB', ],
        activeKey: 'syCarryB',
        jhyNameOption:[],
        dateFormat: 'YYYY-MM-DD',
        zhuId:'',
        // 搬运装卸费用-搬运工对账单-子表
        syCarryBTable: {
          loading: false,
          dataSource: [],
          columns: [
          {
            title: '日期',
            align: "center",
            dataIndex: 'orderDate',
            width: 150,
            ellipsis: true,
          },
          {
            title: '入库单号/发票号',
            align: "center",
            dataIndex: 'invoiceNo',
            width: 140,
            ellipsis: true,
          },
          {
            title: '外销发票号',
            dataIndex: 'saleInvoiceNo',
            width: 140,
             ellipsis: true,
             scopedSlots: { customRender: 'saleInvoiceNo' },
             className: 'replacecolor',
            // slots:{title:'invoiceNoTitle'}
           },
           {
            title: '总件数',
            dataIndex: 'allNum',
            width:  120,
            ellipsis: true,
             className: 'replacecolor',
           },
           {
            title: '柜子数量',
            dataIndex: 'cabinets',
             width:  120,
             ellipsis: true,
             className: 'replacecolor'
           },
           {
            title: '明细',
            dataIndex: 'detailedNum',
             width:  120,
             ellipsis: true,
             className: 'replacecolor',
            //  slots:{title:'detailedNumTitle'}
           },
           {
            title: '衣架/吨数',
            dataIndex: 'coatHanger',
           width:120,
             ellipsis: true,
             className: 'replacecolor'
           },
           {
            title: '集装箱号',
            dataIndex: 'containerNo',
             width: 290,
             className: 'replacecolor',
            //  customRender: (t) => ellipsis(t,30),
            scopedSlots: { customRender: 'containerNo' },
           },
           {
             title: '单价',
             dataIndex: 'price',
             width: 100,
             ellipsis: true,
             className: 'replacecolor',
           },
             {
            title: '总价',
            dataIndex: 'totalPrice',
            width: 100,
             ellipsis: true,
             className: 'replacecolor',
           },
          
           {
            title: '原因',
            dataIndex: 'reason',
            width: 180,
             ellipsis: true,
             className: 'replacecolor',
           },
           {
            title: '备注',
            dataIndex: 'demo',
             width: 180,
             ellipsis: true,
             className: 'replacecolor'
           } ,
           {
            title: '计划员',
            dataIndex: 'jhyNameData',
             width: 240,
             fixed:'right',
             ellipsis: true,
             className: 'replacecolor',
           },
           {
            title: '签名',
            dataIndex: 'jhyName',
            width: 100,
            fixed:'right',
             ellipsis: true,
             className: 'replacecolor'
           },
           {
            title: '操作',
            dataIndex: 'option',
             width: 100,
             ellipsis: true,
             fixed:'right',
             scopedSlots: { customRender: 'option' },
             className: 'replacecolor'
           }                     
          ]
        },
        url: {
          add: "/oa/syCarry/add",
          edit: "/oa/syCarry/edit",
          syCarryB: {
            list: '/oa/syCarry/querySyCarryBByMainId'
          },
        }
      }
    },
    created(){
    },
    methods: {
      // 获取表头信息
      getHeaderList(id){
        this.zhuId = id
        getAction('/oa/syCarry/queryById', {id:id}).then((res) => {
          if(res.success){
            var zhuId = '' //主表id
             this.formState=res.result //详情
             zhuId = res.result.id
             this.getTable(zhuId)
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getTable(id){
        getAction('/oa/syCarry/querySyCarryBByMainId', {id:id}).then((res) => {
          if(res.success){
              res.result.map(item =>{
              if(item.orderDate !==''&& item.orderDate){
                item.orderDate = moment(item.orderDate).format('YYYY-MM-DD')
              }
            })
            this.syCarryBTable.dataSource = res.result
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      handelAutograph(record){
         getAction('/oa/syCarry/signPlan', {id:record.id}).then((res) => {
          if(res.success){
            this.getHeaderList(this.zhuId)
            this.$message.success('签名成功');
          }else{
            this.$message.warning(res.message)
          }
        })
        // if(record.jhyNameData == this.$store.getters.nickname){
        //   record.jhyName = record.jhyNameData
        // }else{
        //    this.$message.error('不可签名');
        // }
        
      },
        // 导入
    implementImport(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      fileDetail(formData).then(res => {
        // this.loading = false
        if (res.success) {
          // this.visible = true
          this.message = res.message.split('；').filter((element) => {
             return element !== ""; 
          });
          this.file = file
          this.$message.success('导入成功')
        }else{
          this.$message.error(res.message);
        }
      })
      },
       //关闭
      handleCancel(){
        this.syCarryBTable.dataSource=[]
        this.formState = {}
        this.visible = false
        this.zhuId = ''
        this.$emit('close')
      },
       randomNumber() {
          return parseInt(Math.random() * 101);
        },

         tableNumber(n, m,win) {
          win.document.write("<table>");
          for (var j = 1; j <= n; j++) {
            win.document.write("<tr>");
            for (var i = 1; i <= m; i++) {
              win.document.write("<td>" + this.randomNumber() + "</td>");
            }
            win.document.write("</tr>");
            win.document.write("</table>");
        }
          },
          
      handlePrint(){
        const cloumn = this.syCarryBTable.columns
        var data = [...this.syCarryBTable.dataSource]
        var obj = {
          orderDate:'合计',
          invoiceNo:'',
          saleInvoiceNo:'',
          allNum:'',
          cabinets:'',
          detailedNum:'合计大写',
          totalPrice:'',
          coatHanger:'',
          price:'',
          reason:'',
          demo:'',
          jhyName:'',
          containerNo:this.formState.totalText,
          jhyNameData:this.formState.totalNum

        }
        //增加合计行
        data.push(obj)
        data.splice(0,0,obj)
        const win = window.open();
        win.document.write("<span class='work'>");
        win.document.write(this.formState.demo);
        win.document.write("</span>");
        win.document.write("<h1>");
        win.document.write('宁波马菲羊纺织科技有限公司名称');
        win.document.write("</h1>");
        win.document.write("<h2>");
        win.document.write(this.formState.name);
        win.document.write("</h2>");
        // 给table头
        win.document.write("<table>");
        for (var i = 0; i <data.length ; i++) { //外层循环 作用行
          // 给表的行rows 头
          if(i==0){
            win.document.write("<tr>");
            for (var j = 0; j < cloumn.length; j++) { //内层循环 作用列
              // 给表的列columns 头
              if(j !== cloumn.length-1){
                if(cloumn[j].title == '集装箱号'){
                  win.document.write("<td style='width:15%'>");  
                  }else{ 
                    win.document.write("<td>");
                  }
                win.document.write(cloumn[j].title);
                // 给表的列columns 尾
                win.document.write("</td>");
                  }
                }
          }else{
            for (var j = 0; j < cloumn.length-1; j++) { //内层循环 作用列
              var cc = cloumn[j].dataIndex
              var dd = data[i][cc] ?data[i][cc]:''
              win.document.write("<td>");
              win.document.write(dd);
              // 给表的列columns 尾
              win.document.write("</td>"); 
            }  
          }
              
          // 给表的行rows 尾
          win.document.write("</tr>");
        }
        // 给table尾
        win.document.write("</table>");
        win.document.write("<span class='workFooter'>");
        var remarks = this.formState.remarks?this.formState.remarks:''
        win.document.write('备注：'+remarks);
        win.document.write("</span>");
        win.document.write("<div class='workFooter1'>");
        win.document.write('审批：');
        win.document.write("</div>");
        const style = '<style>\n'
         +'.noprint{display:none}'
         + 'table{width: 100% !important;border-collapse: collapse;border-spacing: 0;overflow-x:hidden;}\n'
         + 'th,td{width:5%;border: 1px solid;text-align: center;word-break: break-all;}\n'
         + 'h1{text-align: center}\n'
         + 'h2{text-align: center}\n'
         + '.work{display: block;text-align: center}\n'
         + '.workFooter{display: block;margin-top: 2%;}\n'
         + '.workFooter1{width: 10%;float: right;margin-top: 2%;}\n'
        //  +'@media print{@page {size:landscape}}'
         + '</style>';
        win.document.write(style);
        win.focus();
        win.print();
        win.close();
      }
    }
  }
</script>

<style scoped lang="less">
/deep/ .nresume .ant-input{
  height: 100px !important;
}
/deep/ .td{
  text-align:center;
}
// /deep/.ant-form-item{
//     width: 31%;
// }
// /deep/.ant-form-horizontal{
//     display: flex;
//     width: 100%;
//     flex-wrap: wrap;
// }
// .nresume{
//   width: 100% !important;
// }
// /deep/ .nresume .ant-form-item-label{
//   width: 3% !important;
// }
// /deep/ .nresume .ant-form-item-control-wrapper{
//   width: 85% !important;
// }
// /deep/ .nresume .ant-input{
//   height: 100px !important;
// }
// /deep/ .ant-col-sm-6{
//   width: 10%;
// }
/deep/ .ant-select{
  width: 100%;
}
/deep/ .input-table .thead .td{
  text-align: center;
}
/deep/ .input-table .tbody .td{
  text-align: center;
}
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
/deep/.ant-table-tbody>tr>td{
  white-space: break-spaces;
}
/deep/ .ant-calendar-picker{
  width: 113px !important;
}
/deep/ .ant-table-fixed-left table,.ant-table-fixed-right table{ 
  width: min-content;
}
/deep/ .ant-table-fixed-left table,.ant-table-fixed-right table{
  width: min-content;
}
/deep/ .ant-table-tbody .ant-table-row td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}
/deep/ .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 7px 16px;
}
/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
    width: 118px;
}

</style>