成品检验静态页面

yuyu

2023-08-02 4935da798824442f2e14815376a9153840ed1541

成品检验静态页面

 src/components/view/finishedProductInspection.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,427 @@
<template>
  <div class="content-main">
    <div v-if="!showAddPage" class="rawPage">
        <div class="title">
      <el-row>
        <el-col :span="12">成品检验</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button @click="handleAddNew" type="primary" icon="el-icon-plus" style="background: #004EA2; ">新增</el-button>
          <el-button icon="el-icon-delete">删除</el-button>
          <el-button icon="el-icon-download">导出</el-button>
        </el-col>
      </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>
          </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>
    </div>
    <div class="content-body">
        <div class="inspectionTable">
            <el-table
                ref="inspectionTable"
                :height="500"
                :max-height="500"
                :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
                    prop="number"
                    label="订单号"
                    min-width="100"
                />
                <el-table-column
                    prop="username"
                    label="客户名称"
                    min-width="100"
                />
                <el-table-column
                    prop="projectname"
                    label="工程名称"
                    min-width="100"
                />
                <el-table-column
                    prop="tracenumber"
                    label="质量追溯号"
                    min-width="108"
                />
                <el-table-column
                    prop="code"
                    label="产品编码"
                    min-width="100"
                />
                <el-table-column
                    prop="class"
                    label="产品大类"
                    min-width="72"
                />
                <el-table-column
                    prop="specificationmodel"
                    label="规格型号"
                    min-width="110"
                />
                <el-table-column
                    prop="unit"
                    label="单位"
                    min-width="32"
                />
                <el-table-column
                    prop="quantity"
                    label="数量"
                    min-width="32"
                />
                <el-table-column
                    prop="machine"
                    label="机台"
                    min-width="44"
                />
                <el-table-column
                    prop="group"
                    label="班组"
                    min-width="38"
                />
                <el-table-column
                    prop="worker"
                    label="主机工"
                    min-width="50"
                />
                <el-table-column
                    prop="date"
                    label="检验日期"
                    min-width="80"
                />
                <el-table-column
                    prop="result"
                    label="检测结果"
                    min-width="30"
                />
                <el-table-column
                    label="操作"
                    min-width="100"
                >
                    <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-button type="text" size="small">打印</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- åˆ†é¡µå™¨ -->
        <div class="pagination">
            <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.inspectionTable.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
    </div>
    </div>
    <div v-if="showAddPage">
        <!-- æ–°å¢žé¡µé¢ -->
        <div class="newPage">
            <div class="addInspection">
                <el-row class="header">
                    <el-col :span="12">新增成品检验单</el-col>
                    <el-col :span="12" style="text-align: right;">
                        <!-- ç‚¹å‡»è¿”回，当前页面值为false -->
                    <el-button @click="showAddPage = false" type="primary" 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" >
                    <div class="formwrapper">
                        <el-row :gutter="450">
                        <el-col :span="5">
                        <el-form-item label="订单号：">
                            <el-input style="width: 180px;" v-model="addInspectionform.number" placeholder="请输入订单号" autocomplete="off" />  
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="客户名称：">
                            <el-input style="width: 180px;" v-model="addInspectionform.username" placeholder="请输入客户名称" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="工程名称：">
                            <el-input style="width: 180px;" v-model="addInspectionform.projectname" placeholder="请输入工程名称" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                        <el-col :span="5">
                        <el-form-item label="质量追溯号：" >
                            <el-input style="width: 180px;" v-model="addInspectionform.tracenumber" placeholder="请输入追溯号" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="产品编码：">
                            <el-input style="width: 180px;" v-model="addInspectionform.code" placeholder="请输入产品编码" autocomplete="off" />                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="产品名称：">
                            <el-select 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-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.specificationmodel" 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.unit" 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-input style="width: 180px;" v-model="addInspectionform.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-col>
                    </el-row>
                    </div>
                </el-form>
            </div>
            <div class="inspectionProject">
                <span>检验项目</span>
                <el-table :data="inspectionItems" style="width: 100%">
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column prop="project" label="项目"></el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                    <el-table-column prop="standardVal" label="标准值"></el-table-column>
                    <el-table-column prop="controlVal" label="内测值"></el-table-column>
                    <el-table-column prop="detectionVal" label="检验值"></el-table-column>
                    <el-table-column prop="device" label="试验设备">
                        <template slot-scope="scope">
                        {{ scope.row.device }}
                        <el-select v-model="scope.row.device" size="small" slot="append" style="width: 100px;">
                            <el-option value="选项1"></el-option>
                            <el-option value="选项2"></el-option>
                        </el-select>
                    </template>
                    </el-table-column>
                    <el-table-column prop="conclusion" label="结论"></el-table-column>
                </el-table>
            </div>
            <div class="inspectionResult">
                <span>检测结果</span>
                <el-table :data="inspectionResultForm" style="width: 100%">
                    <el-table-column prop="id" label="物料编号"></el-table-column>
                    <el-table-column prop="name" label="物料名称"></el-table-column>
                    <el-table-column prop="inspecter" label="检验员"></el-table-column>
                    <el-table-column prop="conclusion" label="检验结论"></el-table-column>
                    <el-table-column prop="operation" label="上报"></el-table-column>
                </el-table>
            </div>
        </div>

    </div>
  </div>
</template>


<script>
export default {
    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, 
            showAddPage: false,
            addInspectionform: [{
                number: '',
                username: '',
                projectname: '',
                tracenumber: '',
                code: '',
                class: '',
                specificationmodel: '',
                unit: '',
                quantity: '',
                group: '',
                worker: '',
                machine: ''
            }],
            inspectionItems:[{
                project:'布隆迪',
                unit:'吨',
                standardVal: '8219384314',
                controlVal:'9823401',
                detectionVal:'11111',
                device:'',
                conclusion:'合格'
            }],
            inspectionResultForm:[{
                id:'',
                name:'',
                inspecter:'',
                conclusion:'',
                operation:''
            }]
        }
    },
    methods:{
        // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
        handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`)
        this.currentPage = 1
        this.pageSize = val
        },
        // å½“前页改变时触发 è·³è½¬å…¶ä»–页
        handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
        },
        handleAddNew(){
            this.showAddPage=true
        }
    }

}
</script>

<style>
.title{
    padding: 12px;

}
.nav{
    display: flex;
    padding: 12px 12px;
    align-items: center;
    background-color: #fff;
}
.nav *{
    font-size: 14px;
}
.content-body{
    background-color: #fff;
}
.inspectionTable{
    padding: 20px 20px;
}
.pagination{
    float: right;
    margin-right: 20px;
}
.newPage{
    height: 100px;
}
.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: 20px 12px;
}
.inspectionResult span{
    display: block;
    padding: 5px 0px;
}
.inspectionResult .el-table{
    background-color: #fff;
    padding: 20px 12px;
}
</style>

 src/main.js

@@ -20,7 +20,7 @@
Vue.use(qs);
Vue.use(api);

const javaApi = 'http://localhost:8001/'
const javaApi = 'http://192.168.110.167:8001/'

axios.defaults.baseURL = javaApi
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

 src/router/index.js

@@ -18,7 +18,8 @@
  routes: [{
    path: "/",
    component: Index
  }, {
  }, 
  {
    path: "/enter",
    component: () => import("../view/enter.vue")
  }]

 src/view/index.vue

@@ -307,7 +307,7 @@
            k: 6,
            v: "成品检验",
            i: "font icon-shouye",
            u: ""
            u: "finishedProductInspection"
          }, {
            k: 7,
            v: "不合格品管理",