From 1aeff8b542a22d6c6a2efbac87704bca554afee8 Mon Sep 17 00:00:00 2001 From: Goldennfish <1981343953@qq.com> Date: 星期二, 18 七月 2023 09:46:21 +0800 Subject: [PATCH] 提交我的信息和原材料报检页面 --- src/views/rawMaterials/reportForInspection/index.vue | 278 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 276 insertions(+), 2 deletions(-) diff --git a/src/views/rawMaterials/reportForInspection/index.vue b/src/views/rawMaterials/reportForInspection/index.vue index 99c7493..e8c9abe 100644 --- a/src/views/rawMaterials/reportForInspection/index.vue +++ b/src/views/rawMaterials/reportForInspection/index.vue @@ -1,13 +1,287 @@ <template> - <div>home</div> + <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">鏂板妫�楠屽崟</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="true" + > + <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> </template> <script> export default { - + data() { + return { + searchData: { + keyword: '' + }, + inspectionTable: [{ + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + }, + { + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + }, + { + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + }, + { + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + }, + { + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + }, + { + applicationOrdernumber: 'QC22-09155', + typeofInspection: '閲囪喘鍏ュ簱', + objectofInspection: 'MI202207032-1', + palceofObject: '---', + name: '杩欐槸涓�鏉℃祴璇曟暟鎹�', + date: '2022-09-23', + registrant: '绠$悊鍛�', + applicationTime: '111' + } + ], + currentPage: 1, + total: 20, // 鎬绘潯鏁� + pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁� + radioValue: '鍏ㄩ儴' + } + }, + methods: { + 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> + .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