修改ui、添加分页

src/components/common/consultation.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div class="data">
+    <!-- <div class="data">
        <div>
            <div class="totallist">暂无</div>
            <div class="statelist">全部</div>
@@ -27,7 +27,7 @@
            <div class="totallist">暂无</div>
            <div class="statelist">全部</div>
        </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -79,13 +79,11 @@ export default {
 
 <style lang="scss" scoped>
 .consultationlist {
-  padding: 25px 40px 25px 40px;
-  width: 488px;
-  height: 164px;
+  padding: 25px;
+  width: 100%;
+
   background: #ffffff;
   border-radius: 18px;
-  margin-left: 14px;
-  margin-top: 20px;
   .list {
     display: flex;
     justify-content: space-between;
@@ -99,6 +97,7 @@ export default {
       display: flex;
       justify-content: space-evenly;
        align-items: center;
+       cursor: pointer;
       .handle {
         font-size: 14px;
         font-family: PingFangSC-Regular, PingFang SC;

src/store/module/socket.js

@@ -40,8 +40,9 @@ export default {
       });
       state.socketClient.on("diagnose_push_event", (socket) => {
         console.log('diagnose_push_event---', socket);
-        const {list, countRespList} = socket;
+        const {list,allSize,countRespList} = socket;
         store.commit('updateCurrentDiagList', list);
+        store.commit('updateAllSize', allSize);
         store.commit('updateCurrentCalList', countRespList);
       });
       state.socketClient.on("diagnose_call_push_event", (socket) => {

src/store/mutations/index.js

@@ -3,6 +3,9 @@ export default {
   updateCurrentDiagList(state, obj) {
     state.currentDiagList = obj;
   },
+  updateAllSize(state,allSize){
+    state.allSize = allSize;
+  },
   // 改变原数据
   changeRawCurrentCalList(state,obj){
     // console.log("obj",obj)

src/store/state.js

@@ -2,6 +2,7 @@
 
 export default {
   currentDiagList:[],
+  allSize:0,
   currentCalList:{},
   RawCurrentCalList:[],
   currentChat: {},

src/views/IM/diagnosis-admin/administrators.vue

@@ -4,7 +4,7 @@
     <div class="header">
       <!-- 面包屑 -->
       <el-breadcrumb separator="/">
-        <el-breadcrumb-item >首页</el-breadcrumb-item>
+        <el-breadcrumb-item>首页</el-breadcrumb-item>
         <el-breadcrumb-item>我的工作台</el-breadcrumb-item>
       </el-breadcrumb>
       <el-row style="margin-top: 30px">
@@ -21,70 +21,26 @@
                 >
                 </el-date-picker>
               </el-col>
-              <el-col :span="12" style="margin-lfet: 10px">
-                <div style="margin-left: 10px">
-                  <div class="total">3519</div>
-                  <div class="state">全部</div>
-                </div>
-              </el-col>
-            </el-row>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div>
-            <el-row type="flex" justify="space-between">
-              <el-col :span="8">
-                <div>
-                  <div class="total">3519</div>
-                  <div class="state">全部</div>
-                </div>
-              </el-col>
-              <el-col :span="8">
-                <div>
-                  <div class="total aa">3519</div>
-                  <div class="state">全部</div>
-                </div>
-              </el-col>
-              <el-col :span="8">
-                <div>
-                  <div class="total">3519</div>
-                  <div class="state">全部</div>
-                </div>
-              </el-col>
-              <el-col :span="8">
-                <div>
-                  <div class="total">3519</div>
-                  <div class="state">全部</div>
-                </div>
-              </el-col>
             </el-row>
           </div>
         </el-col>
       </el-row>
     </div>
     <!-- 问诊列表 -->
-    <div class="box">
-      <div class="row" v-for="(item, index ) in operatorslist" :key="index">
-        <consultationlist :workbenchAdminDate="workbenchAdminDate" :operatorsItem="item"></consultationlist>
+    <div class="consultation-container">
+      <div class="consultation-content">
+        <div
+          class="consultation-li"
+          v-for="(item, index) in operatorslist"
+          :key="index"
+        >
+          <consultationlist
+            :workbenchAdminDate="workbenchAdminDate"
+            :operatorsItem="item"
+          ></consultationlist>
+        </div>
       </div>
     </div>
-    <!-- 底部 -->
-<!--    <div class="footer">-->
-<!--      &lt;!&ndash; 分页 &ndash;&gt;-->
-<!--      <el-row type="flex" justify="end">-->
-<!--        <el-pagination-->
-<!--          background-->
-<!--          @size-change="handleSizeChange"-->
-<!--          @current-change="handleCurrentChange"-->
-<!--          :current-page="currentPage"-->
-<!--          :page-sizes="[100, 200, 300, 400]"-->
-<!--          :page-size="100"-->
-<!--          layout="total, sizes, prev, pager, next"-->
-<!--          :total="400"-->
-<!--        >-->
-<!--        </el-pagination>-->
-<!--      </el-row>-->
-<!--    </div>-->
   </div>
 </template>
 
@@ -95,7 +51,9 @@ export default {
     consultationlist,
   },
   data() {
-    const d = localStorage.getItem('workbenchAdminDate') || new Date().format('yyyy-MM-dd');
+    const d =
+      localStorage.getItem("workbenchAdminDate") ||
+      new Date().format("yyyy-MM-dd");
     return {
       workbenchAdminDate: d,
       operatorslist: [],
@@ -104,27 +62,26 @@ export default {
   created() {
     this.init();
   },
-  watch:{
-  },
+  watch: {},
   methods: {
-    init () {
+    init() {
       this.GET("/diagnose/match/list").then(({ code, data }) => {
         if (code == "000000") {
           this.operatorslist = data;
         }
       });
-
-    }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .administrators {
+  height: calc(100% - 76px);
   .header {
-    padding: 40px 32px 0 32px;
+    padding: 30px;
     width: 100%;
-    height: 181px;
+
     background: #ffffff;
     .el-input__inner {
       width: 173px;
@@ -167,19 +124,23 @@ export default {
     line-height: 20px;
     margin: 0 auto;
   }
-  .aa {
-    color: #449284;
-  }
-  .box {
-    display: flex;
-    width: 100%;
-    flex-flow: row wrap;
-    align-content: flex-start;
-    min-height: 600px;
-    max-height: 700px;
+  .consultation-container {
     overflow-y: scroll;
-    .row {
-      flex: 0 0 50%;
+   height: calc(100% - 154px);
+    width: 100%;
+    padding: 20px;
+    .consultation-content {
+       display: flex;
+      flex-wrap: wrap;
+
+      justify-content: space-between;
+
+      overflow: hidden;
+      .consultation-li {
+        min-width: 488px;
+        width: 49%;
+        margin-bottom: 20px;
+      }
     }
   }
   .footer {

src/views/IM/diagnosis-admin/workbench.vue

 <template>
-  <div class="diagnosis-list-content">
-    <div class="select-content screenSet content-top">
+  <div class="workbench-container">
+    <div class="select-content">
       <div class="title">我的工作台</div>
       <!-- 时间 -->
-      <el-row type="flex" justify="center">
-        <div id="picker">
-          <div class="block">
+      <div class="search-box">
+
+          <div class="search-item">
             <el-date-picker
               @change="changeDatetime"
               v-model="searchParam.dateTime"
               type="date"
+              size="small"
               clear-icon="el-input-icon"
               :clearable="false"
             >
             </el-date-picker>
           </div>
+
+        <div class="search-item">
+          <el-input
+          size="small"
+          class="input-item"
+            v-model="searchParam.checkvalue"
+            placeholder="输入问诊单号/医生姓名"
+          ></el-input>
         </div>
-      </el-row>
+        <div>
+          <el-button type="primary" size="small" @click="search()"
+            >搜索</el-button
+          >
+        </div>
+      </div>
       <!-- tab栏 -->
       <el-radio-group
         @change="tabChange"
@@ -34,17 +48,17 @@
         <!--    <el-radio-button label="1">待处理({{currentCalList}})</el-radio-button>-->
       </el-radio-group>
     </div>
-    <div class="select-content screenSet">
-      <div class="forbox">
+    <div class="workbench-content">
+      <div class="workbench-li" >
         <div
-          class="for"
+          class="workbench"
           v-for="(item, index) in currentDiagList"
-          :key="'for' + index"
+          :key="index"
         >
           <inquiryList-component :item="item"></inquiryList-component>
         </div>
       </div>
-      <el-row type="flex" justify="end">
+      <div class="pagination-container">
         <el-pagination
           background
           @size-change="handleSizeChange"
@@ -53,11 +67,13 @@
           :page-sizes="[6, 12, 18, 24]"
           :page-size="searchParam.pageSize"
           layout="prev, pager, next, sizes, jumper"
-          :total="totalRows"
+          :total="allSize"
         >
         </el-pagination>
-      </el-row>
+
     </div>
+    </div>
+
   </div>
 </template>
 
@@ -72,6 +88,7 @@ export default {
   },
   computed: {
     ...mapState({
+      allSize:'allSize',
       currentDiagList: "currentDiagList",
       currentCalList: "currentCalList",
       soketQuest: "soketQuest",
@@ -105,10 +122,11 @@ export default {
     return {
       tabPosition: "1",
       showChat: true,
-      totalRows: 40,
+      totalRows: 0,
       loading: false,
       searchParam: {
         dateTime: d,
+        checkvalue: "", // 模拟值后去
         operateUserId: id,
         returnStatus: 1,
         pageSize: 1,
@@ -157,8 +175,11 @@ export default {
       const s = this.searchParam;
       s.dateTime = val.format("yyyy-MM-dd");
       this.searchParam = s;
+    },
+    search() {
       this.inquirySearch("clear");
     },
+
     handleSizeChange(val) {
       const s = this.searchParam;
       s.pageSize = val;
@@ -254,24 +275,25 @@ export default {
     }
   }
 }
-.forbox {
-  display: flex;
-  justify-content: space-between;
-  // justify-content: space-between;
-  .for {
-    max-width: 50%;
-    display: flex;
-  }
-}
-.diagnosis-list-content {
+
+.workbench-container {
   .select-content {
-    margin-bottom: 10px;
-    padding: 10px;
+    padding:0 20px;
     background: #fff;
     overflow: hidden !important;
-    &.content-top {
-      padding-bottom: 0;
+    .search-box {
+      display: flex;
+      justify-content: flex-start;
+      width: 250px;
+      margin: 20px 0;
+      .search-item{
+        margin-right: 20px;
+        .input-item{
+          width: 333px;
+        }
+      }
     }
+
     .title {
       height: 50px;
       display: flex;
@@ -285,16 +307,31 @@ export default {
       }
     }
   }
-}
-.el-row {
-  margin-bottom: 20px;
-  &:last-child {
-    margin-bottom: 0;
+  .workbench-content{
+    padding: 20px;
+    .workbench-li {
+      display: flex;
+      justify-content: space-between;
+
+
+      .workbench {
+        max-width: 50%;
+        display: flex;
+      }
+    }
+    .pagination-container{
+      background-color: #fff;
+      height: 71px;
+      background: #FFFFFF;
+      border-radius: 18px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 10px;
+    }
   }
 }
-.el-col {
-  border-radius: 4px;
-}
+
 .bg-purple-dark {
   background: #99a9bf;
 }
@@ -317,8 +354,8 @@ export default {
   background-color: #f9fafc;
 }
 @media screen and (min-width: 1900px) {
-  .forbox {
-    .for {
+  .workbench-li {
+    .workbench {
       width: 30%;
     }
   }