zc

src/views/comprehensive/laboratoryManagement/record/myRecord.vue

@@ -71,15 +71,16 @@
         </el-form-item>
       </el-form>
       <el-table style="margin:20px 0 10px 0;" v-loading="loading" border :data="recordList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
-        <el-table-column label="实验室" align="left" prop="subjectName" />
-        <el-table-column label="学院" align="left" prop="deptName" />
-        <el-table-column label="进入时间" align="left" prop="inTime">
-
-        </el-table-column>
-        <el-table-column label="离开时间" align="left" prop="outTime">
-
+        <el-table-column label="实验室" align="left" prop="subjectName" show-overflow-tooltip/>
+        <el-table-column label="学院" align="left" prop="deptName" show-overflow-tooltip/>
+        <el-table-column label="进入时间" align="left" prop="inTime" show-overflow-tooltip width="220"/>
+        <el-table-column label="离开时间" align="left" prop="outTime" show-overflow-tooltip width="220"/>
+        <el-table-column label="停留时间" align="left" prop="intervalTime" show-overflow-tooltip width="220"/>
+        <el-table-column label="操作" align="left" width="210">
+          <template slot-scope="scope">
+            <p class="table-min-button" v-if="scope.row.outTime" @click="lookInfo(scope.row)">详情</p>
+          </template>
         </el-table-column>
-        <el-table-column label="停留时间" align="left" prop="intervalTime" />
       </el-table>
       <pagination
         v-show="total>0"
@@ -134,11 +135,19 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
+    <el-dialog class="record-el-dialog-max-box" :title="infoList[infoIndex].imgName" :visible.sync="infoShadeType" v-if="infoShadeType" width="1070px" height="700" append-to-body>
+      <div class="record-el-dialog-min-box scrollbar-box">
+        <img style="width:1026px;" :src="infoList[infoIndex].imgUrl">
+      </div>
+      <p class="el-icon-arrow-left left-i-button" @click="infoLeftButton"></p>
+      <p class="el-icon-arrow-right right-i-button" @click="infoRightButton"></p>
+      <p class="record-el-dialog-bottom-text">{{infoIndex+1}}/{{infoList.length}}</p>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listRecord, getRecord, delRecord, addRecord, updateRecord,myListRecord,subjectDictList } from "@/api/laboratory/record";
+import { listRecord, getRecord, delRecord, addRecord, updateRecord,myListRecord,subjectDictList,getDetial } from "@/api/laboratory/record";
 import { listDepartments } from "@/api/system/dept";
 
 import { treeselect } from "@/api/system/dept";
@@ -201,6 +210,10 @@ export default {
       //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
       selectedNum:0,
       dateRange:[],
+      //详情遮罩开关
+      infoShadeType:false,
+      infoIndex:0,
+      infoList:[],
     };
   },
   created() {
@@ -208,6 +221,28 @@ export default {
     this.getDeptList();
   },
   methods: {
+    //查看详情
+    lookInfo(row){
+      getDetial(row.id).then(response => {
+        this.$set(this,'infoIndex',0);
+        this.$set(this,'infoList',response.rows);
+        this.$set(this,'infoShadeType',true);
+      });
+    },
+    infoLeftButton(){
+      if (this.infoIndex == 0){
+        this.msgError('当前是第一张')
+      }else{
+        this.infoIndex--
+      }
+    },
+    infoRightButton(){
+      if (this.infoIndex == this.infoList.length-1){
+        this.msgError('当前是最后一张')
+      }else{
+        this.infoIndex++
+      }
+    },
     backPage(){
       this.$parent.clickPage(1);
     },