From d7e4b63134fbb434ef382453ed8d3ef4cf378808 Mon Sep 17 00:00:00 2001 From: zhangyanpeng <bob.zhang@highdatas.com> Date: 星期三, 22 四月 2020 19:19:42 +0800 Subject: [PATCH] 界面调整 --- src/views/list.vue | 121 +++++++++++++++++++++++++++++---------- 1 files changed, 89 insertions(+), 32 deletions(-) diff --git a/src/views/list.vue b/src/views/list.vue index 3c89d4c..397bf70 100644 --- a/src/views/list.vue +++ b/src/views/list.vue @@ -4,8 +4,8 @@ <div class="btn-line"> <el-button type="primary" @click="addProject">鏂板缓椤圭洰</el-button> - <el-button type="primary" @click="editProject">缂栬緫椤圭洰</el-button> - <el-button type="primary" @click="onSubmit">鏌ョ湅璇︽儏</el-button> + <el-button type="primary" v-if="editShow" @click="editProject">缂栬緫椤圭洰</el-button> + <el-button type="primary" @click="showDetail">鏌ョ湅璇︽儏</el-button> </div> @@ -44,77 +44,121 @@ </div> <el-table highlight-current-row + ref="data_table" @current-change="tableChange" v-loading="loading_table" - align="center" - max-height="280" - :data="tableData" style="width: 100%; " :row-class-name="tableRowClassName"> - <el-table-column prop="name" label="椤圭洰鍚嶇О" > + size="small" + :data="tableData" + header-cell-style="width: 100%; text-align: center;" + :row-class-name="tableRowClassName"> + <el-table-column type="index" width="50"> </el-table-column> + <el-table-column prop="name" label="椤圭洰鍚嶇О" width="120" show-overflow-tooltip> </el-table-column> - <el-table-column prop="status" label="褰撳墠鐘舵��" :formatter="status_"> + <el-table-column prop="status" label="褰撳墠鐘舵��" width="100" align="center" :formatter="status_"> </el-table-column> - <el-table-column prop="reseachType" label="鐮旂┒绫诲瀷" > + <el-table-column prop="reseachType" label="鐮旂┒绫诲瀷" width="130"> </el-table-column> - <el-table-column prop="totalCnt" label="鏈嶅姟椤圭洰鏁�" > + <el-table-column prop="totalCnt" label="鏈嶅姟椤圭洰鏁�" width="100" align="center"> </el-table-column> - <el-table-column prop="finishCnt" label="宸插畬鎴愰」鐩�" > + <el-table-column prop="finishCnt" label="宸插畬鎴愰」鐩�" width="100" align="center"> </el-table-column> - <el-table-column prop="delayCnt" label="寤舵湡椤圭洰" > + <el-table-column prop="delayCnt" label="寤舵湡椤圭洰" width="100" align="center"> </el-table-column> - <el-table-column prop="startTime" label="寮�濮嬫椂闂�" :formatter="dateFormat_"> + <el-table-column prop="startTime" label="寮�濮嬫椂闂�" width="100" align="center" :formatter="dateFormat_"> </el-table-column> - <el-table-column prop="endTime" label="缁撴潫鏃堕棿" :formatter="dateFormat_" > + <el-table-column prop="endTime" label="缁撴潫鏃堕棿" width="100" align="center" :formatter="dateFormat_" > </el-table-column> - <el-table-column prop="desp" label="椤圭洰鎻忚堪"> - </el-table-column> + <el-table-column prop="desp" label="椤圭洰鎻忚堪" show-overflow-tooltip></el-table-column> </el-table> - <el-pagination - @current-change="handleCurrentChange" - background :current-page="pagenum" :page-sizes="[15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" - :total="total"> - </el-pagination> + <div style="text-align: right; background-color: #fff;"> + <el-pagination + @current-change="handleCurrentChange" + background :current-page="pagenum" :page-sizes="[15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" + :total="total"> + </el-pagination> + </div> - <el-dialog @close="Cancel" width="70%" top="50px" :visible.sync="dialog_1" append-to-body> + <el-dialog v-if="dialog_1" @close="Cancel" width="70%" top="50px" :visible.sync="dialog_1" append-to-body> <newProject @closeNewProject="closeNewProject" v-bind:rowData="rowData" ref="newProject_"></newProject> + </el-dialog> + <el-dialog v-if="dialog_2" @close="Cancel2" width="70%" top="50px" :visible.sync="dialog_2" append-to-body> + <prodetail @closeNewProject="closeDetail" v-bind:rowData="detailData" ref="newProject2_"></prodetail> </el-dialog> </div> </template> <script> import newProject from '../components/popup/newProject.vue' + import prodetail from '../components/popup/prodetail.vue' export default { components: { - newProject + newProject, + prodetail }, data() { return { - rowData:undefined, + editShow: true, + loading_table: false, query: "", + rowData:undefined, + detailData:undefined, dialog_1: false, + dialog_2: false, pagenum: 1, pagesize: 15, total: 0, selected: undefined, labelPosition: "left", tableData: [], + userId:"", + assign:undefined, formInline: { user: '', region: '' - } + }, } }, mounted() { //缁勪欢閰嶇疆鍚庯紝椤甸潰鏄剧ず鍓嶃�傜敤浜庡姞杞芥暟鎹� this.getData(); + this.userId = localStorage.getItem('userId'); + this.assign = localStorage.getItem('assign'); }, methods: { Cancel() { - this.$refs.newProject_.Cancel(); + this.dialog_1 = false; + this.query_(); + }, + Cancel2() { + this.dialog_2 = false; + this.closeDetail(); + }, + closeDetail() { + this.detailData = undefined; + }, + showDetail() { + if(!this.selected){ + + this.$message({message:'璇烽�変腑涓�鏉℃湭鍚姩鐨勯」鐩�', type: 'warning'}); + return; + } + this.dialog_2 = true; }, tableChange(val) { + if (!val) { + val = {}; + } this.selected = val; + this.detailData = val; + // this.editShow = true; + if (this.selected.userId == this.userId) { + this.editShow = true; + }else { + this.editShow = false; + } + }, handleCurrentChange(pageno) { this.pagenum = pageno; @@ -131,10 +175,13 @@ this.loading_table = true; let pageno = this.pagenum; let url = "/api/scheme/page/" + pageno; + let params = { pageSize: this.pagesize }; - + if(this.assign) { + params.userId = this.userId; + } if(query){ params.name = query.name; params.status = query.status; @@ -144,12 +191,18 @@ params }) .then(data_ => { - console.log(data_); + // console.log(data_); + let clientHeight = document.documentElement.clientHeight; + let tableHeight_ = clientHeight - 60 - 20 - 60 - 62 - 48 - 48 - 20; + this.$refs.data_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['height'] = tableHeight_ - 10 + "px";// - header_height + this.$refs.data_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['min-height'] = tableHeight_ - 10 + "px"; + this.$refs.data_table.$el.getElementsByClassName('el-table__body-wrapper')[0].style['overflow'] = "overlay"; + this.tableData = data_.data.data.records; //缁檛ableData璧嬪�� this.total = data_.data.data.total; this.loading_table = false; }).catch(error => { - console.log(error); + // console.log(error); }) }, tableRowClassName(row, rowIndex) { @@ -165,6 +218,7 @@ }, dateFormat_(row, colum, val ,index) { return this.$moment(val).format('YYYY-MM-DD'); + }, status_(row, colum, val ,index) { if(val == "working") { @@ -186,17 +240,19 @@ }, addProject() { this.dialog_1 = true; - + this.rowData = {}; }, editProject() { - if(!this.selected || this.selected.status != "edit"){ + if(!this.selected || this.selected.status == "finish"){ - this.$message({message:'璇烽�変腑涓�鏉℃湭鍚姩鐨勯」鐩�', type: 'warning'}); + this.$message({message:'璇烽�変腑涓�鏉℃湭瀹屾垚鐨勯」鐩�', type: 'warning'}); }else { this.rowData = { id:this.selected.id, desp:this.selected.desp, name: this.selected.name, + beginDate: this.selected.beginDate, + endDate: this.selected.endDate, objective:this.selected.reseachType, items:[this.$moment(this.selected.startTime).format('YYYY-MM-DD'),this.$moment(this.selected.endTime).format('YYYY-MM-DD')] } @@ -205,7 +261,8 @@ },closeNewProject() { - this.dialog_1 = false + this.dialog_1 = false; + query_(); }, } -- Gitblit v1.8.0