Fixiaobai
2023-09-24 49f3321fa839e0ff5fb4d2de75756096a6db7b92
src/components/view/finishedProductInspection.vue
@@ -3,9 +3,10 @@
    <div v-if="!showAdd&&!showLook&&!showUp" class="rawPage">
        <div class="title">
      <el-row>
        <el-col :span="12">成品检验</el-col>
               <el-col :span="12">产品检验</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">新增</el-button>
                  <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus"
                     style="background: #004EA2; ">新增</el-button>
          <el-button icon="el-icon-delete" size="mini">删除</el-button>
          <el-button icon="el-icon-download" size="mini">导出</el-button>
        </el-col>
@@ -19,110 +20,51 @@
            <el-option :value="0" label="不合格"></el-option>
          </el-select>
          <span>产品名称:</span>
        <el-input v-model="searchData.material" size="small" placeholder="请输入产品名称" style="width: 224px;margin-right: 52px;"></el-input>
            <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>
            <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="620"
                :cell-style="{textAlign: 'center'}"
               <el-table ref="inspectionTable" 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"
                style="width: 100%"
                >
                <el-table-column
                    type="selection"
                    width="50">
                  :data="inspectionTable" style="width: 100%">
                  <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column
                    prop="order_number"
                    label="订单号"
                    min-width="100"
                />
                <el-table-column
                    prop="customer_name"
                    label="客户名称"
                    min-width="80"
                />
                <el-table-column
                    prop="project_name"
                    label="工程名称"
                    min-width="80"
                />
                <el-table-column
                    prop="quality_traceability"
                    label="质量追溯号"
                    min-width="108"
                />
                <el-table-column
                    prop="material_code"
                    label="产品编码"
                    min-width="100"
                />
                <el-table-column
                    prop="material"
                    label="产品大类"
                    min-width="72"
                />
                <el-table-column
                    prop="specifications_model"
                    label="规格型号"
                    min-width="110"
                />
                <el-table-column
                    prop="unit"
                    label="单位"
                    min-width="50"
                />
                <el-table-column
                    prop="quantity"
                    label="数量"
                    min-width="50"
                />
                <el-table-column
                    prop="detectionPeriod"
                    label="检验日期"
                    min-width="80"
                />
                <el-table-column
                    prop="result"
                    label="检测结果"
                    min-width="80"
                >
                  <el-table-column prop="order_number" label="订单号" min-width="100" />
                  <el-table-column prop="customer_name" label="客户名称" min-width="80" />
                  <el-table-column prop="project_name" label="工程名称" min-width="80" />
                  <el-table-column prop="quality_traceability" label="质量追溯号" min-width="108" />
                  <el-table-column prop="material_code" label="产品编码" min-width="100" />
                  <el-table-column prop="material" label="产品大类" min-width="72" />
                  <el-table-column prop="specifications_model" label="规格型号" min-width="110" />
                  <el-table-column prop="unit" label="单位" min-width="50" />
                  <el-table-column prop="quantity" label="数量" min-width="50" />
                  <el-table-column prop="detectionPeriod" label="检验日期" min-width="80" />
                  <el-table-column 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"
                >
                  <el-table-column label="操作" min-width="80">
                    <template slot-scope="scope">
                    <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>
                        <el-button v-if="scope.row.result == null" type="text" size="small"
                           @click="goUp(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
            :current-page="pageParams.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            :page-size="pageParams.countSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
               <el-pagination :current-page="pageParams.pageSize" :page-sizes="[10, 50, 100, 200]"
                  :page-size="pageParams.countSize" layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
    </div>
@@ -133,51 +75,65 @@
                    <el-col :span="12">新增成品检验单</el-col>
                    <el-col :span="12" style="text-align: right;">
                        <!-- 点击返回,当前页面值为false -->
                    <el-button @click="()=>{showAddPage = false;showDetail = 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="right" 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>
                        <el-col  :span="7">
                        <el-form-item label="订单号:">
                            <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-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="7">
                        <el-form-item label="客户名称:">
                            <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-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="7">
                        <el-form-item label="工程名称:">
                            <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-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 >
                        <el-col  :span="7">
                        <el-form-item label="质量追溯号:" >
                            <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-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="7">
                        <el-form-item label="产品编码:">
                            <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-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="7">
                        <el-form-item label="产品名称:">
                            <el-select v-show="showDetail == false" 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-input v-show="showDetail !== false" style="width: 180px;" v-model="finishedInsInfo.material"
                              placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
@@ -185,26 +141,32 @@
                    <el-row >
                        <el-col  :span="7">
                        <el-form-item label="规格型号:" >
                            <el-select v-show="showDetail == false" 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-input v-show="showDetail !== false" style="width: 180px;"
                              v-model="finishedInsInfo.specifications_model" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col  :span="7">
                        <el-form-item label="单位:" >
                            <el-select v-show="showDetail == false" 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-input v-show="showDetail !== false" style="width: 180px;"
                              v-model="finishedInsInfo.specifications_model" placeholder="请输入产品编码" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col  :span="7">
                        <el-form-item label="数量:">
                            <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-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>
@@ -212,7 +174,8 @@
                    <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-input style="width: 180px;" v-model="finishedInsInfo.name" placeholder="请输入产品编码"
                              autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
@@ -274,7 +237,11 @@
import finishedProductInspectionUp from '@/components/view/finishedProductInspectionUp'
import finishedProductInspectionLook from '@/components/view/finishedProductInspectionLook'
export default {
    components: { finishedProductInspectionAdd,finishedProductInspectionUp, finishedProductInspectionLook},
      components: {
         finishedProductInspectionAdd,
         finishedProductInspectionUp,
         finishedProductInspectionLook
      },
    data(){
        return {
            searchData:{
@@ -283,8 +250,7 @@
            },
            // 主机工下拉框
            usernameOptions:[],
            inspectionTable:[
            ],
            inspectionTable: [],
            rowInfo:{},
            pageParams:{
              countSize: 10, //每页数量
@@ -349,7 +315,17 @@
            this.showAdd=true
        },
        async getInspectionTableData() {
            const {data:{row,total}} = await this.$axios.get(this.$api.url.finishedInsListPage,{params:{...this.pageParams,...this.searchData}})
            const {
               data: {
                  row,
                  total
               }
            } = await this.$axios.get(this.$api.url.finishedInsListPage, {
               params: {
                  ...this.pageParams,
                  ...this.searchData
               }
            })
            this.inspectionTable = row
            this.pageParams.total = total
        },
@@ -386,68 +362,83 @@
    padding: 12px;
}
.nav{
    display: flex;
    padding: 20px 20px;
    align-items: center;
    background-color: #fff;
}
.nav *{
    font-size: 14px;
}
.content-body {
    background-color: #fff;
    overflow: hidden;
    margin-top: 12px;
}
.inspectionTable{
    padding: 20px 20px;
}
.pagination{
    float: right;
    margin-right: 20px;
}
.newPage{
    overflow: hidden;
}
.header{
    padding: 12px;
}
.addInspectionform{
    background-color: #fff;
}
.addInspectionform .formwrapper{
    padding: 20px 0px;
    margin-left: 100px;
}
.inspectionProject span{
    display: block;
    padding: 5px 0px;
}
.inspectionProject .el-table{
    background-color: #fff;
    padding: 10px 12px;
}
.inspectionResult span{
    display: block;
    padding: 5px 0px;
}
.inspectionResult .el-table{
    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>