From 2260184afb85c80eabce02da190f9f07ee660ab3 Mon Sep 17 00:00:00 2001
From: yuyu <1981343953@qq.com>
Date: 星期二, 08 八月 2023 14:35:57 +0800
Subject: [PATCH] 委托检验、原材料报检和检验申请页面
---
src/views/experiment/inspectionApplication/index.vue | 527 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 525 insertions(+), 2 deletions(-)
diff --git a/src/views/experiment/inspectionApplication/index.vue b/src/views/experiment/inspectionApplication/index.vue
index e3a2d0e..7303bda 100644
--- a/src/views/experiment/inspectionApplication/index.vue
+++ b/src/views/experiment/inspectionApplication/index.vue
@@ -1,5 +1,528 @@
<template>
<div>
- 妫�楠岀敵璇�
+ <template v-if="!showDetail">
+ <div class="content-main">
+ <div class="top-bar">
+ <el-form ref="form" :inline="true" :model="searchData">
+ <el-form-item>
+ <el-input
+ v-model="searchData.keyword"
+ class="input-form"
+ placeholder="璇疯緭鍏ョ敵璇峰崟鍙�/妫�楠屽璞�/瀵硅薄浣嶇疆/瀵硅薄鍚嶇О"
+ >
+ <i slot="prefix" class="el-input__icon el-icon-search" />
+ </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary">鏌ヨ</el-button>
+ <el-button type="primary" plain>閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ <el-form class="rightBtn">
+ <el-form-item class="createBtn">
+ <el-button type="primary" icon="el-icon-document-add" @click="checkTypeVisible = true" style="background-color: rgb(1, 102, 226);">鏂板妫�楠屽崟</el-button>
+ </el-form-item>
+ <el-form-item class="getDataBtn">
+ <el-button type="primary" icon="el-icon-download" style="background-color: rgb(1, 102, 226);">瀵煎嚭妫�楠屽崟</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="library-table">
+ <div class="table-header">
+ <div class="search-bar">
+ <el-radio-group v-model="radioValue">
+ <el-radio-button label="鍏ㄩ儴" />
+ <el-radio-button label="寰呮彁浜�" />
+ <el-radio-button label="宸叉彁浜�" />
+ <el-radio-button label="宸蹭綔搴�" />
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="table-box">
+ <el-table
+ ref="inspectionTable"
+ :max-height="800"
+ :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"
+ min-width="30px"
+ />
+ <el-table-column
+ prop="applicationnum"
+ label="鐢宠鍗曞彿"
+ min-width="100px"
+ />
+ <el-table-column
+ prop="checktype"
+ label="妫�楠岀被鍨�"
+ min-width="80px"
+ />
+ <el-table-column
+ prop="checkstate"
+ label="妫�楠岀姸鎬�"
+ min-width="70px">
+ <template slot-scope="scope">
+ <div v-if="scope.row.checkstate === '1'">
+ <span style="color: green;">宸叉娴�</span>
+ </div>
+ <div v-else>
+ <span style="color: red;">鏈娴�</span>
+ </div>
+
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="deliverydate"
+ label="鏉ユ枡鏃ユ湡"
+ min-width="100px"
+ />
+ <el-table-column
+ prop="provider"
+ label="渚涘簲鍟嗗悕绉�"
+ min-width="150px"
+ />
+ <el-table-column
+ prop="rawcode"
+ label="鍘熸潗鏂欑紪鐮�"
+ min-width="120px"
+ />
+ <el-table-column
+ prop="rawname"
+ label="鍘熸潗鏂欏悕绉�"
+ min-width="80px"
+ />
+ <el-table-column
+ prop="modelandspecification"
+ label="瑙勬牸鍨嬪彿"
+ min-width="160px"
+ />
+ <el-table-column
+ prop="unit"
+ label="鍗曚綅"
+ min-width="50px"
+ />
+ <el-table-column
+ prop="amount"
+ label="鏁伴噺"
+ min-width="50px"
+ />
+ <el-table-column
+ prop="registrationdate"
+ label="鐧昏鏃ユ湡"
+ min-width="80px"
+ />
+ <el-table-column
+ prop="registrator"
+ label="鐧昏浜�"
+ min-width="80px"
+ />
+ <el-table-column
+ prop="qualified"
+ label="妫�楠岀姸鎬�"
+ min-width="80px">
+ <template slot-scope="scope">
+ <div v-if="scope.row.qualified === null">
+ <span></span>
+ </div>
+ <div v-else>
+ <el-tag :type="scope.row.qualified === '0' ? 'success' : 'danger'"
+ disable-transitions
+ >{{ scope.row.qualified === '0' ? '鍚堟牸' : '涓嶅悎鏍�' }}</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="applier"
+ label="鐢宠浜�"
+ min-width="80px"
+ />
+ <el-table-column
+ prop="checker"
+ label="妫�楠屼汉"
+ min-width="80px"
+ />
+ <el-table-column
+ prop="checktime"
+ label="妫�楠屾棩鏈�"
+ min-width="80px"
+ />
+ <el-table-column
+ label="鎿嶄綔"
+ min-width="150"
+ fixed="right"
+ >
+ <template slot-scope="scope">
+ <el-button type="text" size="small" @click="handleClick(scope.row)">鏌ョ湅</el-button>
+ <el-button type="text" size="small" >鎻愪氦</el-button>
+ <el-button type="text" size="small" >浣滃簾</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 鍒嗛〉鍣� -->
+ <div>
+ <el-pagination
+ class="pagination"
+ :current-page="currentPage"
+ :page-sizes="[100, 200, 300, 400]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="total"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="checkType">
+ <el-dialog
+ title="鏂板妫�楠屽崟"
+ :visible.sync="checkTypeVisible"
+ width="50%"
+ >
+ <div class="check-box">
+ <el-radio-group v-model="type">
+ <el-radio :label="0" border>鍘熸潗鏂欐楠�</el-radio>
+ <el-radio :label="1" border>鍗婃垚鍝佹楠�</el-radio>
+ <el-radio :label="2" border>鎴愬搧妫�楠�</el-radio>
+ </el-radio-group>
+ </div>
+ <el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="top" label-width="200px" size="mini">
+ <el-row :gutter="100">
+ <el-col :span="10">
+ <el-form-item label="鏉ユ枡鏃ユ湡锛�">
+ <el-input style="width: 300px" type="text" :value="infoForm.deliverydate" placeholder="璇疯緭鍏ユ潵鏂欐棩鏈�" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="10">
+ <el-form-item label="渚涘簲鍟嗗悕绉帮細">
+ <el-input style="width: 300px" type="text" :value="infoForm.name" placeholder="璇疯緭鍏ヤ緵搴斿晢鍚嶇О" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="100">
+ <el-col :span="10">
+ <el-form-item label="鍘熸潗鏂欑紪鐮侊細">
+ <el-input style="width: 300px" type="text" :value="infoForm.code" placeholder="璇疯緭鍏ュ師鏉愭枡缂栫爜" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="10">
+ <el-form-item label="鍘熸潗鏂欏悕绉帮細">
+ <el-input style="width: 300px" type="text" :value="infoForm.name" placeholder="璇疯緭鍏ュ師鏉愭枡鍚嶇О" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="100">
+ <el-col :span="10">
+ <el-form-item label="瑙勬牸鍨嬪彿锛�">
+ <el-input style="width: 300px" type="text" :value="infoForm.modelandspecification" placeholder="璇疯緭鍏ヨ鏍煎瀷鍙�" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="10">
+ <el-form-item label="鍗曚綅锛�">
+ <el-input style="width: 300px" type="text" :value="infoForm.unit" placeholder="璇疯緭鍏ュ崟浣�" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="100">
+ <el-col :span="10">
+ <el-form-item label="鏁伴噺锛�">
+ <el-input style="width: 300px" type="text" :value="infoForm.amount" placeholder="璇疯緭鍏ユ暟閲�" autocomplete="off" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="10">
+ <el-form-item label="妫�楠屾椂闂达細">
+ <el-date-picker
+ v-model="infoForm.checkdate"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ style="width: 300px;">
+ </el-date-picker>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="checkTypeVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="goToForInspectionDetail">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </div>
+ </div>
+ </template>
+ <template v-else>
+ <router-view />
+ </template>
</div>
-</template>
+ </template>
+
+ <script>
+ import { getInspectionList } from '@/api/rawMaterials/reportForInspection'
+ export default {
+ data() {
+ return {
+ showDetail: false,
+ searchData: {
+ keyword: ''
+ },
+ inspectionTable: [{
+ applicationnum: 'QC22-09155',
+ checktype: '鍘熸潗鏂欐楠�',
+ checkstate: '1',
+ deliverydate: '2023-07-31',
+ provider: '鍥界綉灞变笢鐪佺數鍔涙湁闄愬叕鍙�',
+ rawcode: '1010010090124',
+ rawname: '閾濆寘閽㈢粸绾�',
+ modelandspecification: 'JLHA1/G1A-185/30-27/7',
+ unit: 'ml/kg',
+ amount: '1999',
+ registrationdate: '2022-09-23',
+ registrator: '鏉庡皬榫�',
+ qualified: '0',
+ applier: '鏉庡皬榫�',
+ checker: '鏉庡皬榫�',
+ checktime: '2023-12-09'
+ },{
+ applicationnum: 'QC22-09155',
+ checktype: '鍘熸潗鏂欐楠�',
+ checkstate: '1',
+ deliverydate: '2023-07-31',
+ provider: '鍥界綉灞变笢鐪佺數鍔涙湁闄愬叕鍙�',
+ rawcode: '1010010090124',
+ rawname: '閾濆寘閽㈢粸绾�',
+ modelandspecification: 'JLHA1/G1A-185/30-27/7',
+ unit: 'ml/kg',
+ amount: '1999',
+ registrationdate: '2022-09-23',
+ registrator: '鏉庡皬榫�',
+ qualified: '0',
+ applier: '鏉庡皬榫�',
+ checker: '鏉庡皬榫�',
+ checktime: '2023-12-09'
+ },{
+ applicationnum: 'QC22-09155',
+ checktype: '鍘熸潗鏂欐楠�',
+ checkstate: '0',
+ deliverydate: '2023-07-31',
+ provider: '鍥界綉灞变笢鐪佺數鍔涙湁闄愬叕鍙�',
+ rawcode: '1010010090124',
+ rawname: '閾濆寘閽㈢粸绾�',
+ modelandspecification: 'JLHA1/G1A-185/30-27/7',
+ unit: 'ml/kg',
+ amount: '1999',
+ registrationdate: '2022-09-23',
+ registrator: '鏉庡皬榫�',
+ qualified: null,
+ applier: '鏉庡皬榫�',
+ checker: '鏉庡皬榫�',
+ checktime: '2023-12-09'
+ },{
+ applicationnum: 'QC22-09155',
+ checktype: '鍘熸潗鏂欐楠�',
+ checkstate: '1',
+ deliverydate: '2023-07-31',
+ provider: '鍥界綉灞变笢鐪佺數鍔涙湁闄愬叕鍙�',
+ rawcode: '1010010090124',
+ rawname: '閾濆寘閽㈢粸绾�',
+ modelandspecification: 'JLHA1/G1A-185/30-27/7',
+ unit: 'ml/kg',
+ amount: '1999',
+ registrationdate: '2022-09-23',
+ registrator: '鏉庡皬榫�',
+ qualified: '1',
+ applier: '鏉庡皬榫�',
+ checker: '鏉庡皬榫�',
+ checktime: '2023-12-09'
+ }],
+ infoForm:{
+ deliverydate: '',
+ provider: '',
+ code: '',
+ name: '',
+ modelandspecification: '',
+ unit: '',
+ amount: '',
+ checkdate: ''
+ },
+ currentPage: 1,
+ total: 20, // 鎬绘潯鏁�
+ pageSize: 10, // 姣忛〉鐨勬暟鎹潯鏁�
+ radioValue: '鍏ㄩ儴',
+ checkTypeVisible: false,
+ type: 0
+ }
+ },
+ watch: {
+ $route: {
+ handler(val, oldval) {
+ console.log(val)// 鏂拌矾鐢变俊鎭�
+ console.log(oldval)// 鑰佽矾鐢变俊鎭�
+ },
+ // 娣卞害瑙傚療鐩戝惉
+ deep: true
+ }
+ },
+ // beforeRouteEnter(to, from, next) {
+ // console.log(to, from)
+ // next()
+ // // 鍦ㄦ覆鏌撹缁勪欢鐨勫搴旇矾鐢辫 confirm 鍓嶈皟鐢�
+ // // 涓嶏紒鑳斤紒鑾峰彇缁勪欢瀹炰緥 `this`
+ // // 鍥犱负褰撻挬瀛愭墽琛屽墠锛岀粍浠跺疄渚嬭繕娌¤鍒涘缓
+ // },
+ // beforeRouteUpdate(to, from, next) {
+ // console.log(to, from)
+ // if (to.name === 'ForInspectionDetail') this.showDetail = true
+ // this.$nextTick(() => {
+ // console.log(1)
+ // this.showDetail = true
+ // })
+ // next()
+ // // 鍦ㄥ綋鍓嶈矾鐢辨敼鍙橈紝浣嗘槸璇ョ粍浠惰澶嶇敤鏃惰皟鐢�
+ // // 涓句緥鏉ヨ锛屽浜庝竴涓甫鏈夊姩鎬佸弬鏁扮殑璺緞 /foo/:id锛屽湪 /foo/1 鍜� /foo/2 涔嬮棿璺宠浆鐨勬椂鍊欙紝
+ // // 鐢变簬浼氭覆鏌撳悓鏍风殑 Foo 缁勪欢锛屽洜姝ょ粍浠跺疄渚嬩細琚鐢ㄣ�傝�岃繖涓挬瀛愬氨浼氬湪杩欎釜鎯呭喌涓嬭璋冪敤銆�
+ // // 鍙互璁块棶缁勪欢瀹炰緥 `this`
+ // },
+ created() {
+ this.getInspectionTableData()
+ },
+ updated() {
+ if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
+ },
+ methods: {
+ async getInspectionTableData() {
+ const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
+ // this.inspectionTable = data
+ console.log(res)
+ },
+ goToForInspectionDetail() {
+ this.$router.push('/rawMaterials/reportForInspection/forInspectionDetail')
+ },
+ handleClick(row) {
+ console.log(row)
+ },
+ // 姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣
+ handleSizeChange(val) {
+ console.log(`姣忛〉 ${val} 鏉)
+ this.currentPage = 1
+ this.pageSize = val
+ },
+ // 褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤�
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`)
+ this.currentPage = val
+ }
+ }
+ }
+ </script>
+
+ <style lang="scss" scoped>
+ .checkType{
+ .check-box{
+ .el-radio-group{
+ display: flex;
+ justify-content: space-around;
+ .el-radio{
+ // display: flex;
+ // align-items: center;
+ &.is-checked{
+ background: #ecf5ff;
+ border-color: #b3d8ff;
+ ::v-deep .el-radio__label{
+ color: #333 !important;
+
+ }
+ }
+ height: auto;
+ font-size: 22px !important;
+ padding: 20px 40px !important;
+ ::v-deep .el-radio__label{
+ font-size: 22px !important;
+ padding-left: 0px !important;
+ }
+ ::v-deep .el-radio__input{
+ display: none !important;
+ }
+ }
+ }
+ }
+ }
+ .content-main{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ .top-bar{
+ margin: -25px -15px;
+ background: #fff;
+ display: flex;
+ justify-content: space-between;
+ padding: 5px 24px 0px 24px;
+ }
+ .input-form{
+ width: 500px;
+ }
+ .retrieval{
+ float: right;
+ font-size: 14px;
+ color: rgb(0, 120, 255);
+ line-height: 40px;
+ }
+ .rightBtn {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .getDataBtn, .createBtn {
+ margin-left: 10px; /* Optional: Add some space between the buttons */
+ }
+ .library-table{
+ background-color: #fff;
+ flex: 1;
+ max-width: 100%;
+ margin-left: -15px;
+ margin-right: -15px;
+ margin-top: 50px;
+ display: flex;
+ flex-direction: column;
+ .table-header{
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ .el-form-item{
+ margin-bottom: 30px !important;
+ }
+ }
+ .table-box{
+ padding: 0px 20px;
+ margin-top: 20px;
+ flex: 1;
+ background: #fff;
+ // padding: 20px 20px 10px 20px;
+ display: flex;
+ flex-direction: column;
+ .el-table {
+ flex: 1;
+ }
+ >div:nth-child(2){
+ display: flex;
+ justify-content: end;
+ margin: 20px 0;
+ margin-top: 30px;
+ }
+ }
+ }
+.infoForm{
+ margin-top: 30px;
+ margin-left: 50px;
+ .el-row{
+ margin-bottom: 10px;
+ }
+}
+ </style>
+
\ No newline at end of file
--
Gitblit v1.9.3