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>
    </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> -->
        <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>
        
          <!-- <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')
      },
    }
  }
</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>