王震
2023-09-15 5c76f242b20281b51d01ce2266e8beaafe8ae5a6
src/components/view/finishedProductInspection.vue
@@ -1,6 +1,6 @@
<template>
  <div class="content-main">
    <div v-if="!showAddPage" class="rawPage">
    <div v-if="!showAdd&&!showLook&&!showUp" class="rawPage">
        <div class="title">
      <el-row>
        <el-col :span="12">成品检验</el-col>
@@ -12,32 +12,22 @@
      </el-row>
    </div>
    <div class="nav">
        <span>检验结果:</span>
        <el-select v-model="inspectionResult" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
            <el-option value="选项1"></el-option>
            <el-option value="选项2"></el-option>
        <span>检测结果:</span>
        <el-select v-model="searchData.result" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
            <el-option :value="''" label="全部"></el-option>
            <el-option :value="1" label="合格"></el-option>
            <el-option :value="0" label="不合格"></el-option>
          </el-select>
          <span>检验日期:</span>
          <el-date-picker
            v-model="inspectionDate"
            type="date"
            placeholder="选择日期"
            style="margin-right: 52px">
           </el-date-picker>
          <span>检验人:</span>
          <el-select v-model="inspecter" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
            <el-option value="选项1"></el-option>
            <el-option value="选项2"></el-option>
          </el-select>
          <el-button size="mini"><span>重 置</span></el-button>
          <el-button size="mini" type="primary" style="background: #004EA2;"><span>查 询</span></el-button>
          <span>产品名称:</span>
        <el-input v-model="searchData.material" size="small" placeholder="请输入产品名称" style="width: 224px;margin-right: 52px;"></el-input>
          <el-button size="mini" @click="()=>{searchData={};getInspectionTableData()}"><span>重 置</span></el-button>
          <el-button size="mini" type="primary" @click="getInspectionTableData" style="background: #004EA2;"><span>查 询</span></el-button>
    </div>
    <div class="content-body">
        <div class="inspectionTable">
            <el-table
                ref="inspectionTable"
                :height="400"
                :max-height="400"
                height="620"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="inspectionTable"
@@ -48,37 +38,37 @@
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="number"
                    prop="order_number"
                    label="订单号"
                    min-width="100"
                />
                <el-table-column
                    prop="username"
                    prop="customer_name"
                    label="客户名称"
                    min-width="80"
                />
                <el-table-column
                    prop="projectname"
                    prop="project_name"
                    label="工程名称"
                    min-width="80"
                />
                <el-table-column
                    prop="tracenumber"
                    prop="quality_traceability"
                    label="质量追溯号"
                    min-width="108"
                />
                <el-table-column
                    prop="code"
                    prop="material_code"
                    label="产品编码"
                    min-width="100"
                />
                <el-table-column
                    prop="class"
                    prop="material"
                    label="产品大类"
                    min-width="72"
                />
                <el-table-column
                    prop="specificationmodel"
                    prop="specifications_model"
                    label="规格型号"
                    min-width="110"
                />
@@ -93,22 +83,7 @@
                    min-width="50"
                />
                <el-table-column
                    prop="machine"
                    label="机台"
                    min-width="60"
                />
                <el-table-column
                    prop="group"
                    label="班组"
                    min-width="50"
                />
                <el-table-column
                    prop="worker"
                    label="主机工"
                    min-width="60"
                />
                <el-table-column
                    prop="date"
                    prop="detectionPeriod"
                    label="检验日期"
                    min-width="80"
                />
@@ -116,14 +91,23 @@
                    prop="result"
                    label="检测结果"
                    min-width="80"
                />
                >
                <template slot-scope="scope">
                        <span style="color: #34BD66;" v-if="scope.row.result === 1">合格</span>
                        <span style="color: #E84738;" v-else-if="scope.row.result === 0">不合格</span>
                        <span v-else-if="scope.row.result === null || scope.row.result === undefined">暂未结论</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="80"
                >
                    <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-button type="text" size="small" @click="goToDetail(scope.row)">查看</el-button>
                    <el-button type="text" size="small">打印</el-button>
                    <el-button v-if="scope.row.result == null" type="text" size="small" @click="goUp(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
@@ -131,11 +115,11 @@
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            :current-page="pageParams.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageParams.countSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.inspectionTable.length"
            :total="pageParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
@@ -149,93 +133,87 @@
                    <el-col :span="12">新增成品检验单</el-col>
                    <el-col :span="12" style="text-align: right;">
                        <!-- 点击返回,当前页面值为false -->
                    <el-button @click="showAddPage = false" type="primary" size="mini" icon="el-icon-back" style="background: #004EA2; ">返回</el-button>
                    <el-button @click="()=>{showAddPage = false;showDetail = false}" type="primary" size="mini" icon="el-icon-back" style="background: #004EA2; ">返回</el-button>
                    </el-col>
                </el-row>
                <el-form :model="addInspectionform" ref="addInspectionform" class="addInspectionform" label-position="left" label-width="100px" size="mini" >
                <el-form :model="addInspectionform" ref="addInspectionform" class="addInspectionform" label-position="right" label-width="100px" size="mini" >
                    <div class="formwrapper">
                        <el-row :gutter="450">
                        <el-col :span="5">
                        <el-row>
                        <el-col  :span="7">
                        <el-form-item label="订单号:">
                            <el-input style="width: 180px;" v-model="addInspectionform.number" placeholder="请输入订单号" autocomplete="off" />
                            <el-input v-show="showDetail == false"  style="width: 180px;" v-model="addInspectionform.number" placeholder="请输入订单号" autocomplete="off" />
                            <el-input v-show="showDetail !== false"  style="width: 180px;" v-model="finishedInsInfo.order_number" placeholder="请输入订单号1" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-col  :span="7">
                        <el-form-item label="客户名称:">
                            <el-input style="width: 180px;" v-model="addInspectionform.username" placeholder="请输入客户名称" autocomplete="off" />
                            <el-input v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.username" placeholder="请输入客户名称" autocomplete="off" />
                            <el-input v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.customer_name" placeholder="请输入客户名称" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-col  :span="7">
                        <el-form-item label="工程名称:">
                            <el-input style="width: 180px;" v-model="addInspectionform.projectname" placeholder="请输入工程名称" autocomplete="off" />
                            <el-input v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.projectname" placeholder="请输入工程名称" autocomplete="off" />
                            <el-input v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.project_name" placeholder="请输入工程名称" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                        <el-col :span="5">
                    <el-row >
                        <el-col  :span="7">
                        <el-form-item label="质量追溯号:" >
                            <el-input style="width: 180px;" v-model="addInspectionform.tracenumber" placeholder="请输入追溯号" autocomplete="off" />
                            <el-input  v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.tracenumber" placeholder="请输入追溯号" autocomplete="off" />
                            <el-input  v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.quality_traceability" placeholder="请输入追溯号" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-col  :span="7">
                        <el-form-item label="产品编码:">
                            <el-input style="width: 180px;" v-model="addInspectionform.code" placeholder="请输入产品编码" autocomplete="off" />                        </el-form-item>
                            <el-input  v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.material_code" placeholder="请输入产品编码" autocomplete="off" />
                            <el-input  v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.material_code" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-col  :span="7">
                        <el-form-item label="产品名称:">
                            <el-select style="width: 180px;" v-model="addInspectionform.class" size="small" placeholder="请选择产品名称">
                            <el-select v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.class" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                            <el-input  v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.material" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                        <el-col :span="5">
                    <el-row >
                        <el-col  :span="7">
                        <el-form-item label="规格型号:" >
                            <el-select style="width: 180px;" v-model="addInspectionform.specificationmodel" size="small" placeholder="请选择规格型号">
                            <el-select v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.specificationmodel" size="small" placeholder="请选择规格型号">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                            <el-input  v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.specifications_model" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-col  :span="7">
                        <el-form-item label="单位:" >
                            <el-select style="width: 180px;" v-model="addInspectionform.unit" size="small" placeholder="请选择单位">
                            <el-select v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.unit" size="small" placeholder="请选择单位">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                            <el-input  v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.specifications_model" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-col  :span="7">
                        <el-form-item label="数量:">
                            <el-input style="width: 180px;" v-model="addInspectionform.quantity" placeholder="请输入数量" autocomplete="off" />
                            <el-input v-show="showDetail == false" style="width: 180px;" v-model="addInspectionform.quantity" placeholder="请输入数量" autocomplete="off" />
                            <el-input  v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.quantity" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                        <!-- <el-col :span="5">
                        <el-form-item label="班组:" >
                            <el-select style="width: 180px;" v-model="addInspectionform.group" size="small" placeholder="请选择班组">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>                       </el-form-item>
                        </el-col> -->
                        <el-col :span="5">
                        <el-form-item label="主机工:" >
                            <el-select style="width: 180px;" v-model="addInspectionform.worker" size="small" placeholder="请选择主机工">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="机台:" >
                            <el-select style="width: 180px;" v-model="addInspectionform.machine" size="small" placeholder="请选择产品机台">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                    <el-row >
                        <el-col  v-show="showDetail !== false" :span="7">
                            <el-form-item  label="主机工:" >
                               <el-input  style="width: 180px;" v-model="finishedInsInfo.name" placeholder="请输入产品编码" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    </div>
@@ -277,55 +255,47 @@
                    <el-table-column prop="operation" label="上报"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <div class="newPage" v-if="showAdd">
        <finishedProductInspectionAdd />
    </div>
    <div class="newPage" v-if="showLook">
        <finishedProductInspectionLook :rowInfo="rowInfo"/>
    </div>
    <div class="newPage" v-if="showUp">
        <finishedProductInspectionUp :rowInfo="rowInfo"/>
    </div>
  </div>
</template>
<script>
import finishedProductInspectionAdd from '@/components/view/finishedProductInspectionAdd'
import finishedProductInspectionUp from '@/components/view/finishedProductInspectionUp'
import finishedProductInspectionLook from '@/components/view/finishedProductInspectionLook'
export default {
    components: { finishedProductInspectionAdd,finishedProductInspectionUp, finishedProductInspectionLook},
    data(){
        return {
            inspectionResult: '',
            inspectionDate: '',
            inspecter: '',
            inspectionTable:[{
                number: '8540395029753',
                username: 'jack',
                projectname: '布隆迪',
                tracenumber: '826403164021',
                code: 'C-982164',
                class: '成品',
                specificationmodel: '8.8/15kV JLS-3.2',
                unit: '吨',
                quantity: '15',
                machine: '拉闸机',
                group: '1组',
                worker: '黄小明',
                date: '2023-08-01',
                result: '合格',
                operation: ''
            },{
                number: '2497320327652',
                username: 'rose',
                projectname: '布隆迪',
                tracenumber: '826403164021',
                code: 'C-24114',
                class: '成品',
                specificationmodel: '8.6/15kV JAD-3.2',
                unit: '吨',
                quantity: '43',
                machine: '拉闸机',
                group: '1组',
                worker: '黄小明',
                date: '2023-08-01',
                result: '合格',
                operation: ''
            }],
            currentPage: 1, // 当前页码
            pageSize: 100,
            searchData:{
                result: '',
                material: '',
            },
            // 主机工下拉框
            usernameOptions:[],
            inspectionTable:[
            ],
            rowInfo:{},
            pageParams:{
              countSize: 10, //每页数量
              pageSize: 1, // 当前页码
              total:0
            },
            showAddPage: false,
            showAdd: false,
            showLook: false,
            showUp: false,
            showDetail:false,
            addInspectionform: [{
                number: '',
                username: '',
@@ -355,8 +325,13 @@
                inspecter:'111',
                conclusion:'',
                operation:''
            }]
            }],
            finishedInsInfo:{}
        }
    },
    created() {
        this.init()
        this.getInspectionTableData()
    },
    methods:{
        // 每页条数改变时触发 选择一页显示多少行
@@ -371,7 +346,35 @@
        this.currentPage = val
        },
        handleAddNew(){
            this.showAddPage=true
            this.showAdd=true
        },
        async getInspectionTableData() {
            const {data:{row,total}} = await this.$axios.get(this.$api.url.finishedInsListPage,{params:{...this.pageParams,...this.searchData}})
            this.inspectionTable = row
            this.pageParams.total = total
        },
        goToDetail(row) {
            this.rowInfo = row
            this.showLook=true
        },
        goUp(row){
            this.rowInfo = row
            this.showUp=true
        },
        async init() {
            // const {data} = await this.$axios.get(this.$api.url.finishedInspectUser)
            // this.usernameOptions = data
        },
        comBackMain(val){
        this.showAdd=false
        this.showLook=false
        this.showUp=false
        this.init()
        this.getInspectionTableData()
        if(val){
            this.$parent.removeAllTab()
        }
        }
    }
@@ -433,4 +436,18 @@
    background-color: #fff;
    padding: 10px 12px;
}
.rawPage{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.rawPage .content-body{
    flex: 1;
}
/* .inspectionTable{
    flex: 1;
    overflow-y: scroll;
} */
</style>