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

<template>
<div class="reply" ref = "replyModal">
  <a-modal
    title="详情"
    width="85%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    :getContainer ='()=>$refs.replyModal'
    @ok="handleOk"
    @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="8" :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="8" :sm="8">
              <a-form-model-item label="合计"  prop="code">
                 <a-input placeholder="请输入" v-model="formState.totalNum" 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-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="棉纱" :key="refKeys[0]" :forceRender="true">
          <a-table
           bordered
           :columns="syCottonYarnBTable.columns"
           :data-source="syCottonYarnBTable.dataSource"
           :loading="syCottonYarnBTable.loading"
           :scroll="{x: 1800,y:300 }"
           :pagination="false"
          >
         <!-- 操作 -->
          <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="syCottonYarnBTable.loading"
            :columns="syCottonYarnBTable.columns"
            :dataSource="syCottonYarnBTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/> -->
        </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 { putAction,postAction,getAction } from '@/api/manage'
   import {fileDetail} from '@api/oa/cd-sy-cotton'

  export default {
    name: 'SyCottonYarnDetailModal',
    mixins: [JEditableTableMixin],
    data() {
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
        },
        refKeys: ['syCottonYarnB', ],
        activeKey: 'syCottonYarnB',
        formState:{},
        zhuId:'',
        // 搬运装卸费用-棉纱-子表
        syCottonYarnBTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
            title: '日期',
            align: "center",
            dataIndex: 'orderDate',
            width: '9%',
            // scopedSlots: { customRender: 'orderDate' },
          },
          {
            title: '入库单号',
            align: "center",
            dataIndex: 'receiptNo',
            width: '9%',
            // scopedSlots: { customRender: 'receiptNo' },
          },
          {
            title: '吨数',
            align: "center",
            dataIndex: 'tonnage',
            width: '9%',
            // scopedSlots: { customRender: 'tonnage' },
          },
          {
            title: '柜子数量',
            align: "center",
            dataIndex: 'cabinets',
            width: '9%',
            // scopedSlots: { customRender: 'cabinets' },
          },
          {
            title: '每吨纱价格',
            align: "center",
            dataIndex: 'price',
            width: '9%',
            // scopedSlots: { customRender: 'price' },
          },
           {
            title: '集装箱号',
            align: "center",
            dataIndex: 'containerNo',
            width: '9%',
            // scopedSlots: { customRender: 'containerNo' },
          },
          {
            title: '原因',
            align: "center",
            dataIndex: 'reason',
            width: '9%',
            // scopedSlots: { customRender: 'reason' },
          },
          {
            title: '总价',
            align: "center",
            dataIndex: 'totalPrice',
            width: '9%',
            // scopedSlots: { customRender: 'totalPrice' },
          },
          {
            title: '签字',
            align: "center",
            dataIndex: 'jhyName',
            width: '9%',
            // scopedSlots: { customRender: 'jhyName' },
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'demo',
            width: '9%',
            // scopedSlots: { customRender: 'demo' },
          },
           {
            title: '操作',
            dataIndex: 'option',
             width: '9%',
             ellipsis: true,
             scopedSlots: { customRender: 'option' },
             className: 'replacecolor'
           }   
          ]
        },
        url: {
          add: "/oa/syCottonYarn/add",
          edit: "/oa/syCottonYarn/edit",
          syCottonYarnB: {
            list: '/oa/syCottonYarn/querySyCottonYarnBByMainId'
          },
        }
      }
    },
    methods: {
       // 获取表头信息
      getHeaderList(id){
        this.zhuId = id
        getAction('/oa/syCottonYarn/queryById', {id:id}).then((res) => {
          if(res.success){
            var zhuId
             this.formState=res.result //详情
             zhuId = res.result.id
             this.getTable(zhuId)
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      getTable(id){
        getAction('/oa/syCottonYarn/querySyCottonYarnBByMainId', {id:id}).then((res) => {
          if(res.success){
              res.result.map(item =>{
              if(item.orderDate !==''&& item.orderDate){
                item.orderDate = moment(item.orderDate)
              }
            })
            this.syCottonYarnBTable.dataSource = res.result
          }else{
            this.$message.warning(res.message)
          }
        })
      },
      handelAutograph(record){
           getAction('/oa/syCottonYarn/signPlan', {id:record.id}).then((res) => {
          if(res.success){
            this.getHeaderList(this.zhuId)
            this.$message.success('签名成功');
          }else{
            this.$message.warning(res.message)
          }
        })
        
      },
       // 导入
    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.syCottonYarnBTable.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-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}

</style>