doors-windows-web/src/views/production/materialprocurement/modules/materialProcurementDetail.vue

<template>
    <a-modal
      title="详情"
       width="95%"
      :visible="visible"
      :maskClosable="false"
      switchFullscreen
      @cancel="handleCancel"
      >
      <template slot="footer">
        <a-button  @click="handleCancel">关闭</a-button>
       </template>
      <a-card :bordered="false" class="top" style="margin-bottom:1%;margin-top:1%" :loading = 'loading'>
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="计划组织">
                            <a-input-search placeholder="请输入" v-model="form.planOrg" disabled></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col  :md="4" :sm="24">
                        <a-form-item label="单据号">
                            <a-input placeholder="请输入" v-model="form.orderCode" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="单据日期">
                            <a-date-picker showTime valueFormat="YYYY-MM-DD" format = "YYYY-MM-DD" v-model="form.orderDate" style="width:100%" disabled/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="单据状态">
                            <a-select v-model="form.state"  style='width:100%' disabled>
                                <a-select-option value='自由'> 自由</a-select-option>
                                <a-select-option value='已批准'> 已批准</a-select-option>
                                <a-select-option value='已运算'> 已运算</a-select-option>
                                <a-select-option value='已请购'> 已请购</a-select-option>
                                <a-select-option value='已关闭'> 已关闭</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="项目编码">
                            <a-input placeholder="请输入" v-model="form.projectCode" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="项目">
                            <a-input-search placeholder="请输入" v-model="form.project" disabled></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="计划部门">
                            <a-input-search placeholder="请输入" v-model="form.planDept" disabled></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="业务员">
                            <a-input-search placeholder="请输入" v-model="form.salesperson"  disabled></a-input-search>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="业务类型">
                            <a-select v-model="form.type"  style='width:100%' disabled>
                                <a-select-option value='家装'>家装</a-select-option>
                                <a-select-option value='工装'>工装</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="加工单号">
                            <a-input placeholder="请输入" v-model="form.workNo" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="改单版本">
                            <a-input placeholder="请输入" v-model="form.version" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="来源">
                            <a-input placeholder="请输入" v-model="form.sourceInfo" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="备注" :labelCol="{span: 3, offset: 2}">
                            <a-input placeholder="请输入" v-model="form.remarks" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    
                </a-row>
            </a-form>
        </div>
     </a-card>
     <a-card :bordered="false" class="three" style="margin-bottom:1%" :loading = 'loading'>
       <a-form-model ref="formRef">
        <a-table
          ref="table"
          size="middle"
          bordered
          id='sonList'
          :columns="columns"
           rowKey="rowNo"
          :dataSource="dataSource"
          :pagination="false"
          :scroll="{ x: 4500, y: 300 }"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange"
          >
        </a-table>
       </a-form-model">
    </a-card>
     <a-card :bordered="false" class="bottom" style="margin-bottom:1%">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="制单人">
                            <a-input placeholder="请输入" v-model="form1.createBy" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col  :md="4" :sm="24">
                        <a-form-item label="制单日期">
                            <a-date-picker showTime valueFormat="YYYY-MM-DD" format = "YYYY-MM-DD" v-model="form1.createTime" disabled/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="审批人">
                            <a-input placeholder="请输入" v-model="form1.reviewer" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="审批日期">
                            <a-date-picker showTime valueFormat="YYYY-MM-DD" format = "YYYY-MM-DD" v-model="form1.reviewerTime" disabled/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="最后修改人">
                            <a-input placeholder="请输入" v-model="form1.updateBy" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24">
                        <a-form-item label="最后修改时间">
                            <a-date-picker showTime valueFormat="YYYY-MM-DD" format = "YYYY-MM-DD" v-model="form1.updateTime" disabled/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
         </div>
    </a-card>
    </a-modal>
  </template>
  <script>
  
      import { FormTypes } from '@/utils/JEditableTableUtil'
      import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
      import moment from "moment"
      import { httpAction ,getAction,postAction,putAction} from '@/api/manage'
      export default {
        name: 'materialProcurementDetail',
        mixins: [JEditableTableModelMixin],
        components: {
        },
        data() {
          return {
            visible:false,
            form:{},
            form1:{},
            defaultMethod:'add',
            dataSource:[],
            loading:false,
            // ipagination:{},
            selectedRowKeys:[],
            selectedRows:[],
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender:function (t, r, index) {
                        return parseInt(index)+1;
                    }
                },
                {
                    title: '批次',
                    align:"center",
                    dataIndex: 'batch',
                    ellipsis: true,
                },
                {
                    title: '项目编码',
                    align:"center",
                    dataIndex: 'projectCode',
                    ellipsis: true,
                },
                {
                    title: '项目名称',
                    align:"center",
                    dataIndex: 'projectName',
                    ellipsis: true,
                },
                {
                    title: '存货名称',
                    align:"center",
                    dataIndex: 'inventoryName',
                    ellipsis: true,
                },
                {
                    title: '存货编码',
                    align:"center",
                    dataIndex: 'inventoryCode',
                    ellipsis: true,
                },
                {
                    title: '计量单位',
                    align:"center",
                    dataIndex: 'unit',
                    ellipsis: true,
                },
                {
                    title: '主数量',
                    align:"center",
                    dataIndex: 'quantity',
                    ellipsis: true,
                },
                {
                    title: '换算率',
                    align:"center",
                    dataIndex: 'rate',
                    ellipsis: true,
                },
                {
                    title: '辅计量单位',
                    align:"center",
                    dataIndex: 'auxiliaryUnit',
                    ellipsis: true,
                },
                {
                    title: '辅数量',
                    align:"center",
                    dataIndex: 'unQuantity',
                    ellipsis: true,
                },
                {
                    title: '规格',
                    align:"center",
                    dataIndex: 'specs',
                    ellipsis: true,
                },
                {
                    title: '型号',
                    align:"center",
                    dataIndex: 'model',
                    ellipsis: true,
                },
                {
                    title: '颜色',
                    align:"center",
                    dataIndex: 'color',
                    ellipsis: true,
                },
                {
                    title: '定尺',
                    align:"center",
                    dataIndex: 'fixedLength',
                    ellipsis: true,
                },
                {
                    title: '合金',
                    align:"center",
                    dataIndex: 'alloy',
                    ellipsis: true,
                },
                {
                    title: '标准',
                    align:"center",
                    dataIndex: 'standard',
                    ellipsis: true,
                },
                {
                    title: '窗号',
                    align:"center",
                    dataIndex: 'windowNo',
                    ellipsis: true,

                },
                {   
                    title: '米重',
                    align:"center",
                    dataIndex: 'meterWeight',
                    ellipsis: true,
                },
                {
                    title: '装饰面周长',
                    align:"center",
                    dataIndex: 'decorationLength',
                    ellipsis: true,
                },
                {   
                    title: '专用区',
                    align:"center",
                    dataIndex: 'exclusiveZone',
                    ellipsis: true,
                },
                {
                    title: '配置',
                    align:"center",
                    dataIndex: 'configuration',
                    ellipsis: true,
                },
                {
                    title: '宽度/长度',
                    align:"center",
                    dataIndex: 'widthLength',
                    ellipsis: true,
                },
                {
                    title: '高度',
                    align:"center",
                    dataIndex: 'height',
                    ellipsis: true,
                },
                {
                    title: '楼号楼层',
                    align:"center",
                    dataIndex: 'buildingNumber',
                    ellipsis: true,
                },
                {
                    title: '樘数',
                    align:"center",
                    dataIndex: 'framesTang',
                    ellipsis: true,
                },
                {
                    title: '框统计',
                    align:"center",
                    dataIndex: 'framesCount',
                    ellipsis: true,
                },
                {
                    title: '扇统计',
                    align:"center",
                    dataIndex: 'leafCount',
                    ellipsis: true,
                 },
                {
                    title: '半成品分类',
                    align:"center",
                    dataIndex: 'semiClass',
                    ellipsis: true,
                },
                {
                    title: '面积',
                    align:"center",
                    dataIndex: 'area',
                    ellipsis: true,
                },
                {
                    title: '切割长度',
                    align:"center",
                    dataIndex: 'cuttingLength',
                    ellipsis: true,
                },
                {
                    title: '切割角度左下',
                    align:"center",
                    dataIndex: 'cuttingLeftDown',
                    ellipsis: true,
                },
                {
                    title: '切割角度右上',
                    align:"center",
                    dataIndex: 'cuttingRightTop',
                    ellipsis: true,
                },
                {
                    title: '备注',
                    align:"center",
                    dataIndex: 'remarks',
                    ellipsis: true,
                },
                {
                    title: '系列',
                    align:"center",
                    dataIndex: 'series',
                    ellipsis: true,
                },
                {
                    title: '玻璃编号',
                    align:"center",
                    dataIndex: 'glassNumber',
                    ellipsis: true,
                },
          ],
          }
        },
        created() {
          
        },
        methods: {
            handleCancel(){
                this.visible=false
                this.dataSource = [] 
                this.form={}
                this.form1={}
            },
            onSelectChange(selectedRowKeys, selectionRows) {
                this.selectedRowKeys = selectedRowKeys;
                this.selectedRows = selectionRows;
            },
            //获取主表信息
            getMainData(id){
                getAction('/materialRequisition/madeMaterialRequisition/queryById',{id:id}).then(res=>{
                    if(res.success){
                       this.form=res.result
                       this.form1=res.result
                       this.getSonData(this.form.id)
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
            //获取子表信息
            getSonData(id){
                getAction('/materialRequisition/madeMaterialRequisition/querymadeMaterialRequisitionDetailByMainId',{id:id}).then(res=>{
                    if(res.success){
                       this.dataSource =res.result
                       this.dataSource.map((item,index)=>{
                        item.rowNo =index+1
                       })
                       
                    }else{
                      this.$message.error(res.message);
                    }
                })
            },
        }
      }
  </script>
  
  <style scoped lang="less">
    /* @import '~@assets/less/common.less' */
    /deep/.ant-input{
        height:29px;
    }
    /deep/.ant-select-selection--single {
        height: 29px;
    }
    /deep/.ant-select{
        font-size: 12px;
    }
    /deep/.ant-form label{
        font-size: 12px;
    }
    /deep/.table-page-search-wrapper .ant-form-inline .ant-form-item{
        margin-bottom:9px
    }
    /deep/.moddle>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }
    /deep/.top>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }
    /deep/.ant-btn{
        height:28px
    }
    /deep/.ant-modal-body{
        padding-bottom: 0px;
        padding-top: 0px;
    }
    // /deep/.ant-modal-body{
    //     background: #f0f2f5;
    // }
    /deep/.ant-modal-content{
        background: #f0f2f5;
    }
    /deep/.ant-card-body .table-operator {
        margin-bottom: 0px;
    }
    /deep/.three>.ant-card-body{
        padding-bottom:12px;
        padding-top: 12px;
    }
    /deep/.bottom>.ant-card-body{
        padding-bottom:0px;
        padding-top: 12px;
    }

    /deep/.ant-calendar-picker{
        min-width: 0px !important;  
    }
    /deep/.sonItem {
        margin-bottom:0px !important
    }
    // /deep/#sonList>.ant-spin-nested-loading>.ant-spin-container>.ant-table>.ant-table-content>.ant-table-scroll>.ant-table-body>.ant-table-fixed>.ant-table-tbody > tr > td {
    //     padding: 0px 8px !important;
    // }
  </style>