zc

.env.staging

@@ -1,10 +1,45 @@
 # 页面标题
 VUE_APP_TITLE = 实验室安全管理系统
 
-NODE_ENV = production
+# 生产环境配置
+ENV = 'production'
 
-# 测试环境配置
-ENV = 'staging'
+# ####################接口配置####################
 
-# 实验室安全管理系统/测试环境
-VUE_APP_BASE_API = '/stage-api'
+# 实验室安全管理系统/生产环境
+VUE_APP_BASE_API = 'lab.sxitdlc.com/appTest'
+# VUE_APP_BASE_API = '192.168.1.88/labSystem'
+
+
+# ####################文件预览地址配置####################
+
+# 文件预览
+# VUE_APP_BASE_FILE_API = '180.76.134.43:31007'
+
+VUE_APP_BASE_FILE_API = 'lab.sxitdlc.com/fileOnline'
+
+# VUE_APP_BASE_FILE_API = '192.168.1.7:8012'
+
+# ####################视频地址配置####################
+
+# 视频地址
+VUE_APP_BASE_VIDEO_API = 'lab.sxitdlc.com/appTest'
+# VUE_APP_BASE_VIDEO_API = '192.168.1.88/labSystem'
+
+
+
+# ####################MQTT配置####################
+
+# MQTT地址
+VUE_APP_BASE_MQTT_API = 'ws://180.76.134.43:1884'
+#VUE_APP_BASE_MQTT_API = 'wss://lab.sxitdlc.com/mqtt'
+#VUE_APP_BASE_MQTT_API = 'wss://lab.sxitdlc.com/nhmqtt'
+VUE_APP_BASE_MQTT_USERNAME = 'mqtt'
+VUE_APP_BASE_MQTT_PASSWORD = 'mqtt@zd1883'
+
+# #####################大屏跳转地址#####################
+
+# 校级大屏地址
+VUE_APP_BIG_SCREEN_CAMPUS_BASE_API = 'http://lab.sxitdlc.com/appTest/bigData/'
+# 院系大屏地址
+VUE_APP_BIG_SCREEN_FACULTY_BASE_API = 'http://lab.sxitdlc.com/appTest/labBigData/'

src/views/comprehensive/personnel/student/index.vue

@@ -137,9 +137,10 @@
           已选择 {{selectedNum}} 项
         </p>
         <div style="flex:5;">
-          <pagination
+          <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/comprehensive/personnel/teacher/index.vue

@@ -239,9 +239,10 @@
                 已选择 {{selectedNum}} 项
               </p>
               <div style="flex:5;">
-                <pagination
+                <pagination :page-sizes="[20, 30, 40, 50]"
                   v-show="total>0"
                   :total="total"
+                  style="margin:0;"
                   :page.sync="queryParams.pageNum"
                   :limit.sync="queryParams.pageSize"
                   @pagination="getList"

src/views/comprehensive/personnel/teacher/userList.vue

@@ -63,9 +63,10 @@
             已选择 {{selectedNum}} 项
           </p>
           <div style="flex:5;">
-            <pagination
+            <pagination :page-sizes="[20, 30, 40, 50]"
               v-show="total>0"
               :total="total"
+              style="margin:0;"
               :page.sync="queryParams.pageNum"
               :limit.sync="queryParams.pageSize"
               @pagination="getList"

src/views/comprehensive/personnel/teacher/userListOne.vue

@@ -68,9 +68,10 @@
             <!--已选择 {{selectedNum}} 项-->
           <!--</p>-->
           <div style="flex:5;">
-            <pagination
+            <pagination :page-sizes="[20, 30, 40, 50]"
               v-show="total>0"
               :total="total"
+              style="margin:0;"
               :page.sync="queryParams.pageNum"
               :limit.sync="queryParams.pageSize"
               @pagination="getList"

src/views/emergencyManagement/smartLoT/abnormal/index.vue

@@ -127,6 +127,7 @@
         <pagination :page-sizes="[20, 30, 40, 50]"
           v-show="total>0"
           :total="total"
+          style="margin:0;"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"

src/views/gasManage3_0/manage/infoRecord/abnormalRecord.vue

@@ -83,6 +83,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/infoRecord/alarmRecord.vue

@@ -78,6 +78,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/infoRecord/applyRecord.vue

@@ -71,6 +71,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/infoRecord/enterRecord.vue

@@ -74,6 +74,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/infoRecord/outRecord.vue

@@ -78,6 +78,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/infoRecord/useRecord.vue

@@ -92,6 +92,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/qualificationManage/qualificationManage.vue

@@ -72,9 +72,10 @@
           已选择 {{selectedNum}} 项
         </p>
         <div style="flex:5;">
-          <pagination
+          <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/supplierManage/supplierManage.vue

@@ -92,9 +92,10 @@
           已选择 {{selectedNum}} 项
         </p>
         <div style="flex:5;">
-          <pagination
+          <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/gasManage3_0/manage/useGasManage/useGasManage.vue

@@ -73,9 +73,10 @@
           已选择 {{selectedNum}} 项
         </p>
         <div style="flex:5;">
-          <pagination
+          <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/InventoryManagement/InventoryDetails/index.vue

@@ -33,6 +33,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/InventoryManagement/OutboundRecord/index.vue

@@ -37,6 +37,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/InventoryManagement/warehousingRecord/index.vue

@@ -18,7 +18,7 @@
         <el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>
         <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
         <el-table-column label="位置" align="center" prop="posi" width="280" show-overflow-tooltip/>
-        <el-table-column label="入库方式" align="center" prop="joinType" width="121"/>
+        <el-table-column label="称重方式" align="center" prop="joinType" width="121"/>
         <!--<el-table-column label="入库量" align="center" prop="usages" width="120"/>-->
         <el-table-column label="库存净重" align="center" prop="usages" width="120"/>
         <el-table-column label="操作人" align="center" prop="operator" width="220" show-overflow-tooltip/>
@@ -48,6 +48,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/alarmRecord/index.vue

@@ -111,6 +111,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/CabinetManagement/listPage.vue

@@ -159,7 +159,7 @@
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParamsData.pageNum = 1;
-        this.queryParamsData.pageSize = 20;
+        this.queryParamsData.pageSize = 10;
         this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
         this.getList();
       },

src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/CabinetManagement/smartLock.vue

@@ -77,6 +77,7 @@
             <pagination :page-sizes="[20, 30, 40, 50]"
               v-show="total>0"
               :total="total"
+              style="margin:0;"
               :page.sync="queryParams.pageNum"
               :limit.sync="queryParams.pageSize"
               @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/ChemicalInfo/index.vue

@@ -120,6 +120,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/ChemicalInfo/listPage.vue

@@ -216,6 +216,19 @@
       listPropsData:{},
     },
     data() {
+      const jisuan = (rule, value, callback) => {
+        // console.log("rule",rule)//field: "maxList.1.list.0.chemicalAmount"
+        // 这个index是本item的index
+        // const i = rule.field.split('.')[0].indexOf('[');
+        // const index = rule.field.split('.')[0].slice(i + 1, rule.field.split('.')[0].length - 1);
+        // // 这个itemAttrs里面有传递的参数id
+        // const itemAttrs = this.$refs[`dayBegin[${index}]`][0] ? this.$refs[`dayBegin[${index}]`][0].$attrs : null;
+        if (this.form.confirmPassword !== value) {
+          callback(new Error("两次输入的密码不一致"));
+        } else {
+          callback();
+        }
+      };
       return {
         //限制时间范围
         pickerBeginOption: {
@@ -258,7 +271,8 @@
           ],
           chemicalAmount:[
             { required: true, message: '请输入容器容量', trigger: 'blur' },
-            { required: true, message: "请输入容器容量", validator: this.spaceJudgment, trigger: "blur" }
+            { required: true, message: "请输入容器容量", validator: this.spaceJudgment, trigger: "blur" },
+            // { required: true, message: "请输入容器容量", validator: jisuan, trigger: "blur" }
           ],
           tare:[
             { required: true, message: '请输入容器自重', trigger: 'blur' },

src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/ChemicalInfo/msdsPage.vue

@@ -55,6 +55,7 @@
             <pagination :page-sizes="[20, 30, 40, 50]"
               v-show="total>0"
               :total="total"
+              style="margin:0;"
               :page.sync="queryParams.pageNum"
               :limit.sync="queryParams.pageSize"
               @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/deviceManagement/smartAlarm/index.vue

@@ -112,6 +112,7 @@
         <pagination :page-sizes="[20, 30, 40, 50]"
           v-show="total>0"
           :total="total"
+          style="margin:0;"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
           @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/deviceManagement/smartLocker/index.vue

@@ -121,6 +121,7 @@
           <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/medicUniversity-3_1/chemicalManagement/usageRecord/index.vue

@@ -1,66 +1,70 @@
 <!--使用记录-->
 <template>
   <div class="app-container usageRecord">
-    <advanced-search :searchData="searchData"></advanced-search>
-    <div class="usageRecord-min">
-      <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
-        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
-        <el-table-column label="化学品编号" align="center" prop="joinNum" width="130"/>
-        <el-table-column label="化学品名" align="center" prop="chemicalName" width="180"/>
-        <el-table-column label="CAS号" align="center" prop="casNum" width="180"/>
-        <!--<el-table-column label="形态" align="center" prop="chemicalShape" width="121"/>-->
-        <!--<el-table-column label="规格" align="center" prop="chemicalAmountUnit" width="121"/>-->
-        <el-table-column label="分类" align="center" prop="classifyName" width="181"/>
-        <!--<el-table-column label="属性" align="center" prop="classifyAttribute" width="220" show-overflow-tooltip/>-->
-        <!--<el-table-column label="标签类型" align="center" prop="labelContent" width="121"/>-->
-        <!--<el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>-->
-        <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
-        <el-table-column label="位置" align="center" prop="posi" width="300" show-overflow-tooltip/>
-        <el-table-column label="领用时间" align="center" prop="collectTime" width="170"/>
-        <el-table-column label="归还时间" align="center" prop="returnTime" width="170"/>
-        <!--<el-table-column label="归还方式" align="center" prop="returnTypeContent" width="130"/>-->
-        <el-table-column label="领用时库存" align="center" prop="collectStockNum" width="120"/>
-        <el-table-column label="领用净重" align="center" prop="collectWeigh" width="120"/>
-        <el-table-column label="损耗量" align="center" prop="lossAmount" width="120"/>
-        <el-table-column label="使用量" align="center" prop="useStockNum" width="120"/>
-        <el-table-column label="剩余库存" align="center" prop="returnStockNum" width="120"/>
-        <el-table-column label="状态" align="center" prop="useStatus" width="120">
-          <template slot-scope="scope"><span :class="scope.row.useStatus == '使用中'?'table-color-1':(scope.row.useStatus == '超时未归还'?'table-color-2':'')">{{scope.row.useStatus}}</span></template>
-        </el-table-column>
-        <el-table-column label="操作人" align="center" prop="operator" width="220" show-overflow-tooltip/>
-        <!--<el-table-column label="身份验证" align="center" prop="verify" width="220" show-overflow-tooltip>-->
+    <div class="usageRecord-page" v-if="pageType == 1">
+      <advanced-search :searchData="searchData"></advanced-search>
+      <div class="usageRecord-min">
+        <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
+          <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
+          <el-table-column label="化学品编号" align="center" prop="joinNum" width="130"/>
+          <el-table-column label="化学品名" align="center" prop="chemicalName" width="180"/>
+          <el-table-column label="CAS号" align="center" prop="casNum" width="180"/>
+          <!--<el-table-column label="形态" align="center" prop="chemicalShape" width="121"/>-->
+          <!--<el-table-column label="规格" align="center" prop="chemicalAmountUnit" width="121"/>-->
+          <el-table-column label="分类" align="center" prop="classifyName" width="181"/>
+          <!--<el-table-column label="属性" align="center" prop="classifyAttribute" width="220" show-overflow-tooltip/>-->
+          <!--<el-table-column label="标签类型" align="center" prop="labelContent" width="121"/>-->
+          <!--<el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>-->
+          <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
+          <el-table-column label="位置" align="center" prop="posi" width="300" show-overflow-tooltip/>
+          <el-table-column label="领用时间" align="center" prop="collectTime" width="170"/>
+          <el-table-column label="归还时间" align="center" prop="returnTime" width="170"/>
+          <!--<el-table-column label="归还方式" align="center" prop="returnTypeContent" width="130"/>-->
+          <el-table-column label="领用时库存" align="center" prop="collectStockNum" width="120"/>
+          <el-table-column label="领用净重" align="center" prop="collectWeigh" width="120"/>
+          <el-table-column label="损耗量" align="center" prop="lossAmount" width="120"/>
+          <el-table-column label="使用量" align="center" prop="useStockNum" width="120"/>
+          <el-table-column label="剩余库存" align="center" prop="returnStockNum" width="120"/>
+          <el-table-column label="状态" align="center" prop="useStatus" width="120">
+            <template slot-scope="scope"><span :class="scope.row.useStatus == '使用中'?'table-color-1':(scope.row.useStatus == '超时未归还'?'table-color-2':'')">{{scope.row.useStatus}}</span></template>
+          </el-table-column>
+          <el-table-column label="操作人" align="center" prop="operator" width="220" show-overflow-tooltip/>
+          <!--<el-table-column label="身份验证" align="center" prop="verify" width="220" show-overflow-tooltip>-->
           <!--<template slot-scope="scope">-->
-            <!--{{scope.row.verify?scope.row.verify:'无'}}-->
+          <!--{{scope.row.verify?scope.row.verify:'无'}}-->
           <!--</template>-->
-        <!--</el-table-column>-->
-        <el-table-column label="操作" align="center" prop="operator" width="100">
-          <template slot-scope="scope">
-            <div class="button-box">
-              <p class="table-min-button"
-                 style="margin:0!important;"
-                 @click="goPageInfo(2,scope.row)"
-              >详情</p>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="display: flex;height:32px;margin-top:15px;">
-        <!--<p style="flex:4;"></p>-->
-        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
-          <i class="el-icon-warning" style="color:#0183FA;"></i>
-          已选择 {{selectedNum}} 项
-        </p>
-        <div style="flex:5;">
-          <pagination :page-sizes="[20, 30, 40, 50]"
-            v-show="total>0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
-          />
+          <!--</el-table-column>-->
+          <el-table-column label="操作" align="center" prop="operator" width="100">
+            <template slot-scope="scope">
+              <div class="button-box">
+                <p class="table-min-button"
+                   style="margin:0!important;"
+                   @click="goPageInfo(2,scope.row)"
+                >详情</p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;height:32px;margin-top:15px;">
+          <!--<p style="flex:4;"></p>-->
+          <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
+            <i class="el-icon-warning" style="color:#0183FA;"></i>
+            已选择 {{selectedNum}} 项
+          </p>
+          <div style="flex:5;">
+            <pagination :page-sizes="[20, 30, 40, 50]"
+                        v-show="total>0"
+                        :total="total"
+                        style="margin:0;"
+                        :page.sync="queryParams.pageNum"
+                        :limit.sync="queryParams.pageSize"
+                        @pagination="getList"
+            />
+          </div>
         </div>
       </div>
     </div>
+    <info-page :infoData="infoData" v-if="pageType == 2"></info-page>
   </div>
 </template>
 
@@ -68,13 +72,16 @@
   import { classifyList,getNoauthList,getHxpUserecordList } from "@/api/medicUniversity-3_1/index";
   import { listDepartments } from "@/api/system/dept";
   import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"
+  import infoPage from "./infoPage.vue"
   export default {
     name: "usageRecord",
     components: {
-      advancedSearch
+      advancedSearch,
+      infoPage
     },
     data() {
       return {
+        pageType:1,
         searchData:{
           buttonList:[//按钮数组没有则为空
             {
@@ -199,6 +206,8 @@
         single: true,
         // 非多个禁用
         multiple: true,
+        //详情组件传参
+        infoData:{},
       };
     },
     created() {
@@ -213,8 +222,14 @@
     },
     methods: {
       //操作按钮
-      goPageInfo(type){
-
+      goPageInfo(type,row){
+        if(type == 1){
+          this.$set(this,'pageType',1);
+          this.$set(this,'infoData',{});
+        }else if(type == 2){
+          this.$set(this,'infoData',row);
+          this.$set(this,'pageType',type);
+        }
       },
       //获取属性列表
       getHxpClassifyattribute(){
@@ -372,22 +387,28 @@
     display: flex;
     flex-direction: column;
     overflow: hidden!important;
-    padding-top:20px!important;
     p{
       margin:0;
       padding:0;
     }
-    .usageRecord-min{
+    .usageRecord-page{
       flex:1;
       display: flex;
       flex-direction: column;
       overflow: hidden!important;
-      padding:0 20px 20px!important;
-      .table-color-1{
-        color:#0183FA;
-      }
-      .table-color-2{
-        color:#FF4D4D;
+      padding-top:20px!important;
+      .usageRecord-min{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden!important;
+        padding:0 20px 20px!important;
+        .table-color-1{
+          color:#0183FA;
+        }
+        .table-color-2{
+          color:#FF4D4D;
+        }
       }
     }
   }

src/views/medicUniversity-3_1/chemicalManagement/usageRecord/infoPage.vue

@@ -0,0 +1,375 @@
+<template>
+    <div class="infoPage">
+      <div class="title-box">
+        <p>使用详情</p>
+        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
+      </div>
+      <div class="infoPage-max-box">
+        <div class="infoPage-left-box scrollbar-box">
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>化学品名称：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>化学品编号：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>CAS：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>别名：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>化学品分类：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>纯度：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>形态：</p>
+            <p></p>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>属性：</p>
+            <p></p>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>标签类型：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>标签编号：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>容量规格：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>容器规格：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>过期时间：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>领用时效：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>化学品柜：</p>
+            <p></p>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>所在位置：</p>
+            <p></p>
+          </div>
+        </div>
+        <div class="infoPage-right-box scrollbar-box">
+          <p class="infoPage-right-title">当前使用状态：aaaaaaaaaaaaaa</p>
+          <div class="infoPage-right-data-box">
+            <div class="title-button-max-box">
+              <p></p>
+              <p>领用</p>
+              <p>2022-06-09 10:12:22</p>
+              <p class="inquire-button-one" @click="lockVideo">操作视频</p>
+            </div>
+            <div class="table-title-box">
+              <p>领用时净重</p>
+              <p>损耗量</p>
+              <p>领用净重</p>
+              <p>操作人</p>
+              <p>双人验证</p>
+              <p>称重方式</p>
+            </div>
+            <div class="table-list-box">
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+            </div>
+          </div>
+          <div class="infoPage-right-data-box">
+            <div class="title-button-max-box">
+              <p></p>
+              <p>归还</p>
+              <p>2022-06-09 10:12:22</p>
+              <p class="inquire-button-one" @click="lockVideo">操作视频</p>
+            </div>
+            <div class="table-title-box">
+              <p>领用时净重</p>
+              <p>损耗量</p>
+              <p>领用净重</p>
+              <p>操作人</p>
+              <p>双人验证</p>
+              <p>称重方式</p>
+            </div>
+            <div class="table-list-box">
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-dialog title="操作视频" :visible.sync="videoType" v-if="videoType"
+                 width="840px" append-to-body id="operationRecord-dialog-box">
+        <video style="width:800px;height:450px;" controls="" autoplay="" name="media" :poster="videoCover">
+          <source :src="videoData.url" type="video/mp4">
+        </video>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "infoPage",
+    props:{
+      infoData:{},
+    },
+    data(){
+      return {
+        videoType:false,
+        videoData:{},
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods: {
+      //视频按钮
+      lockVideo(type,row){
+        let obj = {
+          // type:type,
+          // url:row.unLockVideo
+        }
+        this.$set(this,'videoData',obj);
+        this.videoType = true;
+      },
+      backPage(){
+        this.$parent.goPageInfo(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .infoPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden!important;
+    p{
+      margin:0;
+    }
+    .title-box{
+      display: flex;
+      height:90px;
+      border-bottom: 1px solid #D8D8D8;
+      p:nth-child(1){
+        flex:1;
+        font-size:16px;
+        line-height:90px;
+        margin-left:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        margin:25px 25px 0 0;
+      }
+    }
+    .infoPage-max-box{
+      flex:1;
+      display: flex;
+      overflow: hidden;
+      font-weight: 500;
+      .infoPage-left-box{
+        flex:1;
+        margin:44px 22px 37px 80px;
+        padding:13px 0;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+        border-radius:10px;
+        .infoPage-left-text-box-one{
+          display: flex;
+          div{
+            flex:1;
+            display: flex;
+            p{
+              font-size:14px;
+              line-height:56px;
+            }
+            p:nth-child(1){
+              color:#333;
+              text-align: right;
+              width:116px;
+            }
+            p:nth-child(2){
+              color:#666;
+              flex:1;
+            }
+          }
+        }
+        .infoPage-left-text-box-two{
+          display: flex;
+          p{
+            font-size:14px;
+            line-height:56px;
+          }
+          p:nth-child(1){
+            color:#333;
+            text-align: right;
+            width:116px;
+          }
+          p:nth-child(2){
+            color:#666;
+            flex:1;
+          }
+        }
+      }
+      .infoPage-right-box{
+        width:839px;
+        margin:44px 80px 37px 0;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+        border-radius:10px;
+        .infoPage-right-title{
+          line-height:60px;
+          margin:0 24px;
+          font-size:16px;
+        }
+        .infoPage-right-data-box{
+          width:792px;
+          margin:0 auto;
+          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+          padding-bottom:22px;
+          border-radius:10px;
+          margin-bottom:21px;
+          .title-button-max-box{
+            width:755px;
+            margin:0 auto;
+            height:80px;
+            display: flex;
+            font-size:16px;
+            p:nth-child(1){
+              background: #0045AF;
+              width:3px;
+              height:14px;
+              margin:33px 0;
+              margin-right:12px;
+              margin-left:7px;
+            }
+            p:nth-child(2){
+              line-height:80px;
+              margin-right:27px;
+            }
+            p:nth-child(3){
+              line-height:80px;
+              flex:1;
+            }
+            p:nth-child(4){
+              width:100px;
+              line-height:40px;
+              margin:20px 10px 0 0;
+            }
+          }
+          .table-title-box{
+            width:755px;
+            height:60px;
+            background: #f5f5f5;
+            margin:0 auto;
+            display: flex;
+            p{
+              color:#333;
+              font-size:16px;
+              line-height:60px;
+            }
+            p:nth-child(1){
+              text-align: center;
+              width:130px;
+            }
+            p:nth-child(2){
+              text-align: center;
+              width:108px;
+            }
+            p:nth-child(3){
+              text-align: center;
+              width:118px;
+            }
+            p:nth-child(4){
+              text-align: center;
+              width:132px;
+            }
+            p:nth-child(5){
+              text-align: center;
+              width:136px;
+            }
+            p:nth-child(6){
+              text-align: center;
+              width:131px;
+            }
+          }
+          .table-list-box{
+            width:755px;
+            height:70px;
+            border:1px solid #e0e0e0;
+            margin:0 auto;
+            display: flex;
+            p{
+              color:#333;
+              font-size:16px;
+              line-height:70px;
+            }
+            p:nth-child(1){
+              text-align: center;
+              width:130px;
+            }
+            p:nth-child(2){
+              text-align: center;
+              width:108px;
+            }
+            p:nth-child(3){
+              text-align: center;
+              width:118px;
+            }
+            p:nth-child(4){
+              text-align: center;
+              width:132px;
+            }
+            p:nth-child(5){
+              text-align: center;
+              width:136px;
+            }
+            p:nth-child(6){
+              text-align: center;
+              width:131px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/studentViews/chemicalManagement/studentOutboundRecord/index.vue

@@ -34,9 +34,10 @@
           已选择 {{selectedNum}} 项
         </p>
         <div style="flex:5;">
-          <pagination
+          <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"

src/views/studentViews/chemicalManagement/studentUsageRecord/index.vue

@@ -1,61 +1,55 @@
 <!--使用记录-->
 <template>
   <div class="app-container usageRecord">
-    <advanced-search :searchData="searchData"></advanced-search>
-    <div class="usageRecord-min">
-      <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
-        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
-        <el-table-column label="化学品编号" align="center" prop="joinNum" width="130"/>
-        <el-table-column label="化学品名" align="center" prop="chemicalName" width="180"/>
-        <el-table-column label="CAS号" align="center" prop="casNum" width="180"/>
-        <el-table-column label="分类" align="center" prop="classifyName" width="181"/>
-        <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
-        <el-table-column label="位置" align="center" prop="posi" width="300" show-overflow-tooltip/>
-        <el-table-column label="领用时间" align="center" prop="collectTime" width="170"/>
-        <el-table-column label="归还时间" align="center" prop="returnTime" width="170"/>
-        <el-table-column label="领用时库存" align="center" prop="collectStockNum" width="120"/>
-        <el-table-column label="领用净重" align="center" prop="collectWeigh" width="120"/>
-        <el-table-column label="损耗量" align="center" prop="lossAmount" width="120"/>
-        <el-table-column label="使用量" align="center" prop="useStockNum" width="120"/>
-        <el-table-column label="剩余库存" align="center" prop="returnStockNum" width="120"/>
-        <!--<el-table-column label="形态" align="center" prop="chemicalShape" width="121"/>-->
-        <!--<el-table-column label="规格" align="center" prop="chemicalAmountUnit" width="121"/>-->
-        <!--<el-table-column label="属性" align="center" prop="classifyAttribute" width="220" show-overflow-tooltip/>-->
-        <!--<el-table-column label="标签类型" align="center" prop="labelContent" width="121"/>-->
-        <!--<el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>-->
-        <!--<el-table-column label="归还方式" align="center" prop="returnTypeContent" width="130"/>-->
-        <el-table-column label="状态" align="center" prop="useStatus" width="120">
-          <template slot-scope="scope"><span :class="scope.row.useStatus == '使用中'?'table-color-1':(scope.row.useStatus == '超时未归还'?'table-color-2':'')">{{scope.row.useStatus}}</span></template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" prop="operator" width="100">
-          <template slot-scope="scope">
-            <div class="button-box">
-              <p class="table-min-button"
-                 style="margin:0!important;"
-                 @click="goPageInfo(2,scope.row)"
-              >详情</p>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="display: flex;height:32px;margin-top:15px;">
-        <!--<p style="flex:4;"></p>-->
-        <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
-          <i class="el-icon-warning" style="color:#0183FA;"></i>
-          已选择 {{selectedNum}} 项
-        </p>
-        <div style="flex:5;">
-          <pagination
-            v-show="total>0"
-            :total="total"
-            :page-sizes="[20, 30, 40, 50]"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="getList"
-          />
-        </div>
+    <div class="usageRecord-page" v-if="pageType == 1">
+      <advanced-search :searchData="searchData"></advanced-search>
+      <div class="usageRecord-min">
+        <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
+          <!--<el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>-->
+          <el-table-column label="化学品编号" align="center" prop="joinNum" width="130"/>
+          <el-table-column label="化学品名" align="center" prop="chemicalName" width="180"/>
+          <el-table-column label="CAS号" align="center" prop="casNum" width="180"/>
+          <el-table-column label="分类" align="center" prop="classifyName" width="181"/>
+          <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
+          <el-table-column label="位置" align="center" prop="posi" width="300" show-overflow-tooltip/>
+          <el-table-column label="领用时间" align="center" prop="collectTime" width="170"/>
+          <el-table-column label="归还时间" align="center" prop="returnTime" width="170"/>
+          <el-table-column label="领用时库存" align="center" prop="collectStockNum" width="120"/>
+          <el-table-column label="领用净重" align="center" prop="collectWeigh" width="120"/>
+          <el-table-column label="损耗量" align="center" prop="lossAmount" width="120"/>
+          <el-table-column label="使用量" align="center" prop="useStockNum" width="120"/>
+          <el-table-column label="剩余库存" align="center" prop="returnStockNum" width="120"/>
+          <!--<el-table-column label="形态" align="center" prop="chemicalShape" width="121"/>-->
+          <!--<el-table-column label="规格" align="center" prop="chemicalAmountUnit" width="121"/>-->
+          <!--<el-table-column label="属性" align="center" prop="classifyAttribute" width="220" show-overflow-tooltip/>-->
+          <!--<el-table-column label="标签类型" align="center" prop="labelContent" width="121"/>-->
+          <!--<el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>-->
+          <!--<el-table-column label="归还方式" align="center" prop="returnTypeContent" width="130"/>-->
+          <el-table-column label="状态" align="center" prop="useStatus" width="120">
+            <template slot-scope="scope"><span :class="scope.row.useStatus == '使用中'?'table-color-1':(scope.row.useStatus == '超时未归还'?'table-color-2':'')">{{scope.row.useStatus}}</span></template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" prop="operator" width="100">
+            <template slot-scope="scope">
+              <div class="button-box">
+                <p class="table-min-button"
+                   style="margin:0!important;"
+                   @click="goPageInfo(2,scope.row)"
+                >详情</p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page-sizes="[20, 30, 40, 50]"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
       </div>
     </div>
+    <info-page :infoData="infoData" v-if="pageType == 2"></info-page>
   </div>
 </template>
 
@@ -63,13 +57,16 @@
   import { classifyList,getNoauthList,getHxpUserecordList } from "@/api/medicUniversity-3_1/index";
   import { listDepartments } from "@/api/system/dept";
   import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"
+  import infoPage from "./infoPage.vue"
   export default {
     name: "usageRecord",
     components: {
-      advancedSearch
+      advancedSearch,
+      infoPage
     },
     data() {
       return {
+        pageType:1,
         searchData:{
           searchList:[//搜索数组
             {
@@ -187,6 +184,8 @@
         single: true,
         // 非多个禁用
         multiple: true,
+        //详情组件传参
+        infoData:{},
       };
     },
     created() {
@@ -201,8 +200,14 @@
     },
     methods: {
       //操作按钮
-      goPageInfo(type){
-        console.log("type",type);
+      goPageInfo(type,row){
+        if(type == 1){
+          this.$set(this,'pageType',1);
+          this.$set(this,'infoData',{});
+        }else if(type == 2){
+          this.$set(this,'infoData',row);
+          this.$set(this,'pageType',type);
+        }
       },
       //获取属性列表
       getHxpClassifyattribute(){
@@ -360,22 +365,28 @@
     display: flex;
     flex-direction: column;
     overflow: hidden!important;
-    padding-top:20px!important;
     p{
       margin:0;
       padding:0;
     }
-    .usageRecord-min{
+    .usageRecord-page{
       flex:1;
       display: flex;
       flex-direction: column;
       overflow: hidden!important;
-      padding:0 20px 20px!important;
-      .table-color-1{
-        color:#0183FA;
-      }
-      .table-color-2{
-        color:#FF4D4D;
+      padding-top:20px!important;
+      .usageRecord-min{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden!important;
+        padding:0 20px 0!important;
+        .table-color-1{
+          color:#0183FA;
+        }
+        .table-color-2{
+          color:#FF4D4D;
+        }
       }
     }
   }

src/views/studentViews/chemicalManagement/studentUsageRecord/infoPage.vue

@@ -0,0 +1,375 @@
+<template>
+    <div class="infoPage">
+      <div class="title-box">
+        <p>使用详情</p>
+        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
+      </div>
+      <div class="infoPage-max-box">
+        <div class="infoPage-left-box scrollbar-box">
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>化学品名称：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>化学品编号：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>CAS：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>别名：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>化学品分类：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>纯度：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>形态：</p>
+            <p></p>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>属性：</p>
+            <p></p>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>标签类型：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>标签编号：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>容量规格：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>容器规格：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-one">
+            <div>
+              <p>过期时间：</p>
+              <p></p>
+            </div>
+            <div>
+              <p>领用时效：</p>
+              <p></p>
+            </div>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>化学品柜：</p>
+            <p></p>
+          </div>
+          <div class="infoPage-left-text-box-two">
+            <p>所在位置：</p>
+            <p></p>
+          </div>
+        </div>
+        <div class="infoPage-right-box scrollbar-box">
+          <p class="infoPage-right-title">当前使用状态：aaaaaaaaaaaaaa</p>
+          <div class="infoPage-right-data-box">
+            <div class="title-button-max-box">
+              <p></p>
+              <p>领用</p>
+              <p>2022-06-09 10:12:22</p>
+              <p class="inquire-button-one" @click="lockVideo">操作视频</p>
+            </div>
+            <div class="table-title-box">
+              <p>领用时净重</p>
+              <p>损耗量</p>
+              <p>领用净重</p>
+              <p>操作人</p>
+              <p>双人验证</p>
+              <p>称重方式</p>
+            </div>
+            <div class="table-list-box">
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+            </div>
+          </div>
+          <div class="infoPage-right-data-box">
+            <div class="title-button-max-box">
+              <p></p>
+              <p>归还</p>
+              <p>2022-06-09 10:12:22</p>
+              <p class="inquire-button-one" @click="lockVideo">操作视频</p>
+            </div>
+            <div class="table-title-box">
+              <p>领用时净重</p>
+              <p>损耗量</p>
+              <p>领用净重</p>
+              <p>操作人</p>
+              <p>双人验证</p>
+              <p>称重方式</p>
+            </div>
+            <div class="table-list-box">
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+              <p>100g</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-dialog title="操作视频" :visible.sync="videoType" v-if="videoType"
+                 width="840px" append-to-body id="operationRecord-dialog-box">
+        <video style="width:800px;height:450px;" controls="" autoplay="" name="media" :poster="videoCover">
+          <source :src="videoData.url" type="video/mp4">
+        </video>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "infoPage",
+    props:{
+      infoData:{},
+    },
+    data(){
+      return {
+        videoType:false,
+        videoData:{},
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+
+    },
+    methods: {
+      //视频按钮
+      lockVideo(type,row){
+        let obj = {
+          // type:type,
+          // url:row.unLockVideo
+        }
+        this.$set(this,'videoData',obj);
+        this.videoType = true;
+      },
+      backPage(){
+        this.$parent.goPageInfo(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .infoPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden!important;
+    p{
+      margin:0;
+    }
+    .title-box{
+      display: flex;
+      height:90px;
+      border-bottom: 1px solid #D8D8D8;
+      p:nth-child(1){
+        flex:1;
+        font-size:16px;
+        line-height:90px;
+        margin-left:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        margin:25px 25px 0 0;
+      }
+    }
+    .infoPage-max-box{
+      flex:1;
+      display: flex;
+      overflow: hidden;
+      font-weight: 500;
+      .infoPage-left-box{
+        flex:1;
+        margin:44px 22px 37px 80px;
+        padding:13px 0;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+        border-radius:10px;
+        .infoPage-left-text-box-one{
+          display: flex;
+          div{
+            flex:1;
+            display: flex;
+            p{
+              font-size:14px;
+              line-height:56px;
+            }
+            p:nth-child(1){
+              color:#333;
+              text-align: right;
+              width:116px;
+            }
+            p:nth-child(2){
+              color:#666;
+              flex:1;
+            }
+          }
+        }
+        .infoPage-left-text-box-two{
+          display: flex;
+          p{
+            font-size:14px;
+            line-height:56px;
+          }
+          p:nth-child(1){
+            color:#333;
+            text-align: right;
+            width:116px;
+          }
+          p:nth-child(2){
+            color:#666;
+            flex:1;
+          }
+        }
+      }
+      .infoPage-right-box{
+        width:839px;
+        margin:44px 80px 37px 0;
+        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+        border-radius:10px;
+        .infoPage-right-title{
+          line-height:60px;
+          margin:0 24px;
+          font-size:16px;
+        }
+        .infoPage-right-data-box{
+          width:792px;
+          margin:0 auto;
+          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+          padding-bottom:22px;
+          border-radius:10px;
+          margin-bottom:21px;
+          .title-button-max-box{
+            width:755px;
+            margin:0 auto;
+            height:80px;
+            display: flex;
+            font-size:16px;
+            p:nth-child(1){
+              background: #0045AF;
+              width:3px;
+              height:14px;
+              margin:33px 0;
+              margin-right:12px;
+              margin-left:7px;
+            }
+            p:nth-child(2){
+              line-height:80px;
+              margin-right:27px;
+            }
+            p:nth-child(3){
+              line-height:80px;
+              flex:1;
+            }
+            p:nth-child(4){
+              width:100px;
+              line-height:40px;
+              margin:20px 10px 0 0;
+            }
+          }
+          .table-title-box{
+            width:755px;
+            height:60px;
+            background: #f5f5f5;
+            margin:0 auto;
+            display: flex;
+            p{
+              color:#333;
+              font-size:16px;
+              line-height:60px;
+            }
+            p:nth-child(1){
+              text-align: center;
+              width:130px;
+            }
+            p:nth-child(2){
+              text-align: center;
+              width:108px;
+            }
+            p:nth-child(3){
+              text-align: center;
+              width:118px;
+            }
+            p:nth-child(4){
+              text-align: center;
+              width:132px;
+            }
+            p:nth-child(5){
+              text-align: center;
+              width:136px;
+            }
+            p:nth-child(6){
+              text-align: center;
+              width:131px;
+            }
+          }
+          .table-list-box{
+            width:755px;
+            height:70px;
+            border:1px solid #e0e0e0;
+            margin:0 auto;
+            display: flex;
+            p{
+              color:#333;
+              font-size:16px;
+              line-height:70px;
+            }
+            p:nth-child(1){
+              text-align: center;
+              width:130px;
+            }
+            p:nth-child(2){
+              text-align: center;
+              width:108px;
+            }
+            p:nth-child(3){
+              text-align: center;
+              width:118px;
+            }
+            p:nth-child(4){
+              text-align: center;
+              width:132px;
+            }
+            p:nth-child(5){
+              text-align: center;
+              width:136px;
+            }
+            p:nth-child(6){
+              text-align: center;
+              width:131px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/studentViews/chemicalManagement/studentWarehousingRecord/index.vue

@@ -18,7 +18,7 @@
         <el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>
         <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
         <el-table-column label="位置" align="center" prop="posi" width="280" show-overflow-tooltip/>
-        <el-table-column label="入库方式" align="center" prop="joinType" width="121"/>
+        <el-table-column label="称重方式" align="center" prop="joinType" width="121"/>
         <!--<el-table-column label="入库量" align="center" prop="usages" width="120"/>-->
         <el-table-column label="库存净重" align="center" prop="usages" width="120"/>
         <!--<el-table-column label="操作人" align="center" prop="operator" width="220" show-overflow-tooltip/>-->
@@ -45,9 +45,10 @@
           已选择 {{selectedNum}} 项
         </p>
         <div style="flex:5;">
-          <pagination
+          <pagination :page-sizes="[20, 30, 40, 50]"
             v-show="total>0"
             :total="total"
+            style="margin:0;"
             :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize"
             @pagination="getList"