doors-windows-web/src/views/production/productionTotalOrder/modules/material.vue

<!-- 材料明细-->
<template>
    <div >
        <a-form-model ref="formRef" :model="form">
            <a-table
            ref="table"
            size="middle"
            bordered
            id='sonList'
            :columns="columns"
            rowKey="rowNo"
            :dataSource="form.dataSource"
            :pagination="false"
            :scroll="{ x: 5500, y: 300 }"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange"
            >
                <span slot="quantityTitle" class="form-table-heard">
                    主数量
                </span>
                <span slot="unQuantityTitle" class="form-table-heard">
                    辅数量
                </span>
                <span slot="inventoryCodeTitle" class="form-table-heard">
                    料品编码
                </span>
                <template slot="batch" slot-scope="text, record, index">
                    <a-form-model-item prop="batch" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.batch" ></a-input>
                    </a-form-model-item>
                </template> 
                <template slot="inventoryCode" slot-scope="text, record, index">
                    <a-form-model-item :prop="'dataSource.'+index+'.inventoryCode'" class='sonItem' :rules="rules.inventoryCode">
                        <a-input-search placeholder="请输入" v-model="record.inventoryCode" @search="onSearchInven(record)" readOnly ></a-input-search>
                    </a-form-model-item>
                </template>
                <template slot="quantity" slot-scope="text, record, index">
                    <a-form-model-item :prop="'dataSource.'+index+'.quantity'" class='sonItem' :rules="rules.quantity">
                        <a-input placeholder="请输入" v-model="record.quantity"  @blur="changeQuantity(record)" @change="getUnQuan(record)"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="unQuantity" slot-scope="text, record, index">
                    <a-form-model-item :prop="'dataSource.'+index+'.unQuantity'" class='sonItem' :rules="rules.unQuantity">
                        <a-input placeholder="请输入" v-model="record.unQuantity"  @blur="changeUQuantity(record)" @change="getQuan(record)"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="model" slot-scope="text, record, index">
                    <a-form-model-item prop="model" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.model" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="color" slot-scope="text, record, index">
                    <a-form-model-item prop="color" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.color"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="fixedNum" slot-scope="text, record, index">
                    <a-form-model-item prop="fixedNum" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.fixedNum"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="fixedLength" slot-scope="text, record, index">
                    <a-form-model-item prop="fixedLength" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.fixedLength" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="widthHeight" slot-scope="text, record, index">
                    <a-form-model-item prop="widthHeight" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.widthHeight" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="pieces" slot-scope="text, record, index">
                    <a-form-model-item prop="pieces" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.pieces"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="remarks" slot-scope="text, record, index">
                    <a-form-model-item prop="remarks" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.remarks" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="meterWeight" slot-scope="text, record, index">
                    <a-form-model-item prop="meterWeight" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.meterWeight" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="decorationLength" slot-scope="text, record, index">
                    <a-form-model-item prop="decorationLength" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.decorationLength" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="windowNo" slot-scope="text, record, index">
                    <a-form-model-item prop="windowNo" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.windowNo" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="exclusiveZone" slot-scope="text, record, index">
                    <a-form-model-item prop="exclusiveZone" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.exclusiveZone" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="widthLength" slot-scope="text, record, index">
                    <a-form-model-item prop="widthLength" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.widthLength" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="height" slot-scope="text, record, index">
                    <a-form-model-item prop="height" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.height" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="buildingNumber" slot-scope="text, record, index">
                    <a-form-model-item prop="buildingNumber" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.buildingNumber"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="framesTang" slot-scope="text, record, index">
                    <a-form-model-item prop="framesTang" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.framesTang" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="framesCount" slot-scope="text, record, index">
                    <a-form-model-item prop="framesCount" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.framesCount" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="leafCount" slot-scope="text, record, index">
                    <a-form-model-item prop="leafCount" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.leafCount" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="semiClass" slot-scope="text, record, index">
                    <a-form-model-item prop="semiClass" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.semiClass" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="area" slot-scope="text, record, index">
                    <a-form-model-item prop="area" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.area" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="cuttingLength" slot-scope="text, record, index">
                    <a-form-model-item prop="cuttingLength" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.cuttingLength" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="cuttingLeftDown" slot-scope="text, record, index">
                    <a-form-model-item prop="cuttingLeftDown" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.cuttingLeftDown"></a-input>
                     </a-form-model-item>
                </template>
                <template slot="cuttingRightTop" slot-scope="text, record, index">
                    <a-form-model-item prop="cuttingRightTop" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.cuttingRightTop" ></a-input>
                     </a-form-model-item>
                </template>
                
                <template slot="series" slot-scope="text, record, index">
                    <a-form-model-item prop="series" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.series" ></a-input>
                     </a-form-model-item>
                </template>
                <template slot="glassNumber" slot-scope="text, record, index">
                    <a-form-model-item prop="glassNumber" class='sonItem'>
                        <a-input placeholder="请输入" v-model="record.glassNumber"></a-input>
                     </a-form-model-item>
                </template>
            </a-table>
        </a-form-model>
        <inventoryPopup ref="inventoryPopup" @okData="okDataInvent"></inventoryPopup>
    </div>
  </template>
  
  <script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import inventoryPopup from '../../Popup/inventoryPopup.vue'
  import moment from 'moment'
  export default {
    name: 'material', //  Tabs 详情
    mixins: [JeecgListMixin],
    components: {
      JEllipsis,
      moment,
      inventoryPopup
    },
    data() {
      return {
        selectedRowKeys:[],
        selectedRows:[],
        form:{
            dataSource:[],
        },
        planOrg:'',
        disableMixinCreated:'1',
        columns: [
                {
                    title: '行号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender:function (t, r, index) {
                        return parseInt(index)+1;
                    }
                },
                {
                    title: '项目编码',
                    align:"center",
                    dataIndex: 'projectCode',
                    ellipsis: true,
                },
                {
                    title: '项目名称',
                    align:"center",
                    dataIndex: 'projectName',
                    ellipsis: true,
                },
                {
                    title: '批次',
                    align:"center",
                    dataIndex: 'batch',
                    ellipsis: true,
                    scopedSlots: { customRender: 'batch' } 
                },
                {
                    // title: '料品编码',
                    align:"center",
                    dataIndex: 'inventoryCode',
                    ellipsis: true,
                    scopedSlots: { customRender: 'inventoryCode' } ,
                    slots:{title:'inventoryCodeTitle'},
                },
                {
                    title: '料品名称',
                    align:"center",
                    dataIndex: 'inventoryName',
                    ellipsis: true,
                },
                {
                    title: '料品属性',
                    align:"center",
                    dataIndex: 'attribute',
                    ellipsis: true,
                },
                {
                    title: '计量单位',
                    align:"center",
                    dataIndex: 'unit',
                    ellipsis: true,
                },
                {
                    title: '辅计量单位',
                    align:"center",
                    dataIndex: 'auxiliaryUnit',
                    ellipsis: true,
                },
                {
                    // title: '主数量',
                    align:"center",
                    dataIndex: 'quantity',
                    ellipsis: true,
                    scopedSlots: { customRender: 'quantity' } ,
                    slots:{title:'quantityTitle'},

                },
                {
                    // title: '辅数量',
                    align:"center",
                    dataIndex: 'unQuantity',
                    ellipsis: true,
                    scopedSlots: { customRender: 'unQuantity' } ,
                    slots:{title:'unQuantityTitle'},
                },
                {
                    title: '税率',
                    align:"center",
                    dataIndex: 'rate',
                    ellipsis: true,
                },
                {
                    title: '已执行辅数量',
                    align:"center",
                    dataIndex: 'unQuantityExecute',
                    ellipsis: true,
                    // scopedSlots: { customRender: 'unQuantityExecute' } 
                },
                {
                    title: '已执行主数量',
                    align:"center",
                    dataIndex: 'quantityExecute',
                    ellipsis: true,
                    // scopedSlots: { customRender: 'quantityExecute' } 
                },
                {
                    title: '规格',
                    align:"center",
                    dataIndex: 'specs',
                    ellipsis: true,
                    // scopedSlots: { customRender: 'specs' } 
                },
                {
                    title: '型号',
                    align:"center",
                    dataIndex: 'model',
                    ellipsis: true,
                    scopedSlots: { customRender: 'model' } 
                },
                {
                    title: '颜色',
                    align:"center",
                    dataIndex: 'color',
                    ellipsis: true,
                    scopedSlots: { customRender: 'color' } 

                },
                {
                    title: '支数',
                    align:"center",
                    dataIndex: 'fixedNum',
                    ellipsis: true,
                    scopedSlots: { customRender: 'fixedNum' } 

                },
                {   
                    title: '定尺',
                    align:"center",
                    dataIndex: 'fixedLength',
                    ellipsis: true,
                    scopedSlots: { customRender: 'fixedLength' } 
                },
                {
                    title: '宽/高',
                    align:"center",
                    dataIndex: 'widthHeight',
                    ellipsis: true,
                    scopedSlots: { customRender: 'widthHeight' } 
                },
                {   
                    title: '片数',
                    align:"center",
                    dataIndex: 'pieces',
                    ellipsis: true,
                    scopedSlots: { customRender: 'pieces' } 
                },
                {
                    title: '备注',
                    align:"center",
                    dataIndex: 'remarks',
                    ellipsis: true,
                    scopedSlots: { customRender: 'remarks' } 
                },
                {
                    title: '米重',
                    align:"center",
                    dataIndex: 'meterWeight',
                    ellipsis: true,
                    scopedSlots: { customRender: 'meterWeight' } 
                },
                {
                    title: '装饰面周长',
                    align:"center",
                    dataIndex: 'decorationLength',
                    ellipsis: true,
                    scopedSlots: { customRender: 'decorationLength' } 
                },
                {
                    title: '窗号',
                    align:"center",
                    dataIndex: 'windowNo',
                    ellipsis: true,
                    scopedSlots: { customRender: 'windowNo' } 
                },
                {
                    title: '专用区',
                    align:"center",
                    dataIndex: 'exclusiveZone',
                    ellipsis: true,
                    scopedSlots: { customRender: 'exclusiveZone' } 
                },
                {
                    title: '宽度/长度',
                    align:"center",
                    dataIndex: 'widthLength',
                    ellipsis: true,
                    scopedSlots: { customRender: 'widthLength' } 
                },
                {
                    title: '高度',
                    align:"center",
                    dataIndex: 'height',
                    ellipsis: true,
                    scopedSlots: { customRender: 'height' } 
                },
                {
                    title: '楼层楼号',
                    align:"center",
                    dataIndex: 'buildingNumber',
                    ellipsis: true,
                    scopedSlots: { customRender: 'buildingNumber' } 
                },
                {
                    title: '樘数(数量)',
                    align:"center",
                    dataIndex: 'framesTang',
                    ellipsis: true,
                    scopedSlots: { customRender: 'framesTang' } 
                },
                
                {
                    title: '框数量',
                    align:"center",
                    dataIndex: 'framesCount',
                    ellipsis: true,
                    scopedSlots: { customRender: 'framesCount' } 
                 },
                {
                    title: '扇数量',
                    align:"center",
                    dataIndex: 'leafCount',
                    ellipsis: true,
                    scopedSlots: { customRender: 'leafCount' } 
                },
                {
                    title: '半成品分类',
                    align:"center",
                    dataIndex: 'semiClass',
                    ellipsis: true,
                    scopedSlots: { customRender: 'semiClass' } 
                },
                {
                    title: '面积',
                    align:"center",
                    dataIndex: 'area',
                    ellipsis: true,
                    scopedSlots: { customRender: 'area' } 
                },
                {
                    title: '切割长度',
                    align:"center",
                    dataIndex: 'cuttingLength',
                    ellipsis: true,
                    scopedSlots: { customRender: 'cuttingLength' } 
                },
                {
                    title: '切割角度左下',
                    align:"center",
                    dataIndex: 'cuttingLeftDown',
                    ellipsis: true,
                    scopedSlots: { customRender: 'cuttingLeftDown' } 
                },
                {
                    title: '切割角度右上',
                    align:"center",
                    dataIndex: 'cuttingRightTop',
                    ellipsis: true,
                    scopedSlots: { customRender: 'cuttingRightTop' } 
                },
                
                {
                    title: '系列',
                    align:"center",
                    dataIndex: 'series',
                    ellipsis: true,
                    scopedSlots: { customRender: 'series' } 
                },
                {
                    title: '玻璃编号',
                    align:"center",
                    dataIndex: 'glassNumber',
                    ellipsis: true,
                    scopedSlots: { customRender: 'glassNumber' } 
                },
          ],
        rules:{
            quantity:{required:true,message:"不可为空"},
            unQuantity:{required:true,message:"不可为空"},
            inventoryCode:{required:true,message:"不可为空"},
        },
      }
    },
     props: {
      
    },
  
    created() {},
    methods: {
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectionRows;
        },
        addList(projectCode,projectName){
            this.form.dataSource.push({rowNo: this.form.dataSource.length+1,projectCode:projectCode,projectName:projectName})
        },
        delectRow(){
            if( this.selectedRowKeys.length==0){
                this.$message.warning('请勾选子表数据！')
            }else{
                this.selectedRowKeys.map(event=>{
                    this.form.dataSource =  this.form.dataSource.filter( (x)=> {return x.rowNo !== event});
                })
            }
        },
        addMaterial(){
            this.form.dataSource.push({newRow:'1'})
        },
        validateList(){
            let flag = null
            this.$refs.formRef.validate(valid =>{
                if(valid){
                    flag = true
                }else{
                    flag = false
                }
            })
            return flag
        },
        changeQuantity(record){
            if(record.quantity&&record.quantityExecute&&(Number(record.quantity)<Number(record.quantityExecute))){
                record.quantity = ''
                this.$message.warning('主数量不可小于已执行主数量！')
            }
        },
        //改变主数量计算辅数量
        getUnQuan(record){
            if(record.rate){
                var num = (Number(record.quantity)*Number(record.rate)).toFixed(2)
                this.$set(record,'unQuantity',num)
            }
        },
        //改变辅数量计算主数量
        getQuan(record){
            if(record.rate){
                var numUn = (Number(record.unQuantity)/Number(record.rate)).toFixed(2)
                this.$set(record,'quantity',numUn)
            }
        },
        changeUQuantity(record){
            if(record.unQuantity&&record.unQuantityExecute&&(Number(record.unQuantity)<Number(record.unQuantityExecute))){
                record.unQuantity = ''
                this.$message.warning('辅数量不可小于已执行辅数量！')
            }
        },
        onSearchInven(record){
            if(!this.planOrg||this.planOrg==''){
                this.$message.warning('请选择生产组织！')
            }else{
                this.$refs.inventoryPopup.visible = true
                this.$refs.inventoryPopup.getData(this.planOrg)
                this.$refs.inventoryPopup.record=record
            }
        },
        okDataInvent(data,recoerd){
            this.$set(recoerd,'inventoryCode',data.Code)
            this.$set(recoerd,'inventoryName',data.Name)
            this.$set(recoerd,'specs',data.SPECS)
            this.$set(recoerd,'unit',data.unit)
            this.$set(recoerd,'auxiliaryUnit',data.auxiliaryUnit )
            this.$set(recoerd,'attribute',data.Code1 )
            this.$set(recoerd,'inventory',data.ID )
            this.$set(recoerd,'quantity','' )
            this.$set(recoerd,'unQuantity','')
            this.$set(recoerd,'rate',data.rate)
        },
    },
  
    computed: {
      // 合计数据
      // sumInfoSource() {}
    }
  }
  </script>
  
  <style lang="less" scoped>
  /* @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;
    }
    .form-table-heard:before {
        content:'*';
        color:red
   }
   /deep/.ant-form-explain, .ant-form-split {
        display: none;
   }
  </style>