From 8a06fd26565b24603aa265db6715b5e246b831bd Mon Sep 17 00:00:00 2001 From: hailin <1356886193@qq.com> Date: 星期一, 24 七月 2023 08:47:23 +0800 Subject: [PATCH] 检验的第一次提交 --- src/views/rawMaterials/reportForInspection/index.vue | 322 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 320 insertions(+), 2 deletions(-) diff --git a/src/views/rawMaterials/reportForInspection/index.vue b/src/views/rawMaterials/reportForInspection/index.vue index 99c7493..62ec587 100644 --- a/src/views/rawMaterials/reportForInspection/index.vue +++ b/src/views/rawMaterials/reportForInspection/index.vue @@ -1,13 +1,331 @@ <template> - <div>home</div> + <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-dropdown> + <span class="retrieval"> + 楂樼骇妫�绱�<i class="el-icon-arrow-down el-icon--right" /> + </span> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item>榛勯噾绯�</el-dropdown-item> + <el-dropdown-item>鐙瓙澶�</el-dropdown-item> + <el-dropdown-item>铻鸿洺绮�</el-dropdown-item> + <el-dropdown-item disabled>鍙岀毊濂�</el-dropdown-item> + <el-dropdown-item divided>铓典粩鐓�</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + </el-form> + <el-form class="rightBtn"> + <el-form-item class="getDataBtn"> + <el-button type="primary" icon="el-icon-download" plain>鑾峰彇ERP鏁版嵁</el-button> + </el-form-item> + <el-form-item class="createBtn"> + <el-button type="primary" icon="el-icon-plus" @click="checkTypeVisible = true">鏂板妫�楠屽崟</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 + prop="applicationOrdernumber" + label="鐢宠鍗曞彿" + min-width="200" + /> + <el-table-column + prop="typeofInspection" + label="妫�楠岀被鍨�" + min-width="200" + /> + <el-table-column + prop="objectofInspection" + label="妫�楠屽璞�" + min-width="200" + /> + <el-table-column + prop="palceofObject" + label="瀵硅薄浣嶇疆" + min-width="200" + /> + <el-table-column + prop="name" + label="瀵硅薄鍚嶇О" + min-width="200" + /> + <el-table-column + prop="date" + label="鐧昏鏃ユ湡" + min-width="200" + /> + <el-table-column + prop="registrant" + label="鐧昏浜�" + min-width="200" + /> + <el-table-column + prop="applicationTime" + label="鐢宠鏃堕棿" + min-width="200" + /> + <el-table-column + label="鎿嶄綔" + min-width="200" + 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> + </template> + </el-table-column> + </el-table> + <!-- 鍒嗛〉鍣� --> + <div> + <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 class="checkType"> + <el-dialog + title="鏂板妫�楠屽崟" + :visible.sync="checkTypeVisible" + width="40%" + > + <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> + <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> <script> export default { - + data() { + return { + showDetail: false, + searchData: { + keyword: '' + }, + inspectionTable: [{ + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + }], + currentPage: 1, + total: 20, // 鎬绘潯鏁� + pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁� + 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` + // }, + updated() { + if (this.$route.name === 'ForInspectionDetail') this.showDetail = true + }, + methods: { + 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; + 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: 0px; + margin-right: 0px; + 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: 10px 0; + } + } + } </style> -- Gitblit v1.9.3