Merge branch 'feature/hcd-ui' into 'develop'

Feature/hcd ui

See merge request !60

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

 <template>
   <div class="diagnosis-list-content">
-    <div class="select-content screenSet">
+    <div class="select-content screenSet content-top">
       <div class="title">我的工作台</div>
-    </div>
-      <div class="select-content screenSet">
       <!-- 时间 -->
-        <el-row type="flex" justify="center" >
+      <el-row type="flex" justify="center">
         <div id="picker">
           <div class="block">
             <el-date-picker
@@ -13,20 +11,36 @@
               v-model="searchParam.dateTime"
               type="date"
               clear-icon="el-input-icon"
-            :clearable='false'>
+              :clearable="false"
+            >
             </el-date-picker>
           </div>
         </div>
       </el-row>
       <!-- tab栏 -->
-      <el-radio-group  @change="tabChange" v-model="tabPosition" style="margin-bottom: 30px;">
-        <el-radio-button  v-for="(item, index) in currentCalList" :key="'for'+index" :label="item.status">
-         {{item.statusStr}}({{item.count}})
+      <el-radio-group
+        @change="tabChange"
+        v-model="tabPosition"
+        class="workbench-tab"
+      >
+        <el-radio-button
+          v-for="(item, index) in currentCalList"
+          :key="'for' + index"
+          :label="item.status"
+        >
+          {{ item.statusStr }}({{ item.count }})
+          <i class="circle-red"></i>
         </el-radio-button>
-<!--        <el-radio-button label="1">待处理({{currentCalList}})</el-radio-button>-->
+        <!--    <el-radio-button label="1">待处理({{currentCalList}})</el-radio-button>-->
       </el-radio-group>
+    </div>
+    <div class="select-content screenSet">
       <div class="forbox">
-        <div class="for" v-for="(item, index) in currentDiagList" :key="'for'+index">
+        <div
+          class="for"
+          v-for="(item, index) in currentDiagList"
+          :key="'for' + index"
+        >
           <inquiryList-component :item="item"></inquiryList-component>
         </div>
       </div>
@@ -39,7 +53,8 @@
           :page-sizes="[6, 12, 18, 24]"
           :page-size="searchParam.pageSize"
           layout="prev, pager, next, sizes, jumper"
-        :total="totalRows">
+          :total="totalRows"
+        >
         </el-pagination>
       </el-row>
     </div>
@@ -48,29 +63,30 @@
 
 <script>
 import { mapState } from "vuex";
-import storejs from 'storejs';
-import InquiryListComponent from '../../../components/common/inquirylist.vue';
+import storejs from "storejs";
+import InquiryListComponent from "../../../components/common/inquirylist.vue";
 import store from "../../../store";
 
 export default {
   components: {
-    InquiryListComponent
+    InquiryListComponent,
   },
-  computed:{
+  computed: {
     ...mapState({
-      currentDiagList: 'currentDiagList',
-      currentCalList: 'currentCalList',
-      soketQuest:'soketQuest',
-      isSuperAdmin: 'isSuperAdmin'
+      currentDiagList: "currentDiagList",
+      currentCalList: "currentCalList",
+      soketQuest: "soketQuest",
+      isSuperAdmin: "isSuperAdmin",
     }),
   },
   watch: {
-    isSuperAdmin(newdata,olddata){
-      if(newdata !==olddata && newdata.userID){
-        const s =  storejs.get('soketQuest');
-        const d = s ? s.dateTime : new Date().format('yyyy-MM-dd');
-        console.log('---s', s, this.isSuperAdmin);
-        let id = s && s.operateUserId ? s.operateUserId : this.isSuperAdmin.userID;
+    isSuperAdmin(newdata, olddata) {
+      if (newdata !== olddata && newdata.userID) {
+        const s = storejs.get("soketQuest");
+        const d = s ? s.dateTime : new Date().format("yyyy-MM-dd");
+        console.log("---s", s, this.isSuperAdmin);
+        let id =
+          s && s.operateUserId ? s.operateUserId : this.isSuperAdmin.userID;
         const p = {
           dateTime: d,
           operateUserId: id,
@@ -79,95 +95,93 @@ export default {
           returnStatus: s ? s.returnStatus : 1,
         };
         this.searchParam = p;
-        this.inquirySearch()
-      }
+        this.inquirySearch();
       }
     },
-   data(){
-    const s = storejs.get('soketQuest');
-     const d = s ? s.dateTime : new Date().format('yyyy-MM-dd');
+  },
+  data() {
+    const s = storejs.get("soketQuest");
+    const d = s ? s.dateTime : new Date().format("yyyy-MM-dd");
     return {
-       tabPosition:"1",
+      tabPosition: "1",
       showChat: true,
-       totalRows:40,
-       loading:false,
+      totalRows: 40,
+      loading: false,
       searchParam: {
         dateTime: d,
-        operateUserId: '',
+        operateUserId: "",
         returnStatus: 1,
         pageSize: 1,
         pageNo: 1,
       },
       testlistdata: [
         {
-            "appointBeginTime": "2021-07-29T05:28:57.396Z",
-            "appointEndTime": "2021-07-29T05:28:57.396Z",
-            "department": "内科",
-            "departmentId": 3876,
-            "diagnoseLogId": 38,
-            "diagnoseType": 1,
-            "doctorCallKfStatus": 1,
-            "doctorCallTime": "",
-            "doctorId": 0,
-            "doctorMobile": "16789987665",
-            "doctorName": "孙思邈",
-            "doctorTrtcEntryStatus": 1,
-            "imStatus": 0,
-            "imTeamId": "3854284100",
-            "returnStatus": 1,
-            "roomId": "string",
-            "sort": 0,
-            "status": 0,
-            "userCallKfStatus": 0,
-            "userCallTime": "",
-            "userId": 0,
-            "userMobile": "12343123233",
-            "userName": "孙思邈",
-            "userTrtcEntryStatus": 0
-          }
-        ]
-     }
+          appointBeginTime: "2021-07-29T05:28:57.396Z",
+          appointEndTime: "2021-07-29T05:28:57.396Z",
+          department: "内科",
+          departmentId: 3876,
+          diagnoseLogId: 38,
+          diagnoseType: 1,
+          doctorCallKfStatus: 1,
+          doctorCallTime: "",
+          doctorId: 0,
+          doctorMobile: "16789987665",
+          doctorName: "孙思邈",
+          doctorTrtcEntryStatus: 1,
+          imStatus: 0,
+          imTeamId: "3854284100",
+          returnStatus: 1,
+          roomId: "string",
+          sort: 0,
+          status: 0,
+          userCallKfStatus: 0,
+          userCallTime: "",
+          userId: 0,
+          userMobile: "12343123233",
+          userName: "孙思邈",
+          userTrtcEntryStatus: 0,
         },
-   created(){
-
+      ],
+    };
   },
-   methods:{
-     tabChange (val) {
+  created() {},
+  methods: {
+    tabChange(val) {
       const s = this.searchParam;
       s.returnStatus = val;
       this.searchParam = s;
-       this.inquirySearch()
+      this.inquirySearch();
     },
-     changeDatetime (val) {
+    changeDatetime(val) {
       const s = this.searchParam;
-       s.dateTime = val.format('yyyy-MM-dd');
+      s.dateTime = val.format("yyyy-MM-dd");
       this.searchParam = s;
-       this.inquirySearch()
+      this.inquirySearch();
     },
-     handleSizeChange (val) {
+    handleSizeChange(val) {
       const s = this.searchParam;
       s.pageSize = val;
       this.searchParam = s;
     },
-     handleCurrentChange (val) {
+    handleCurrentChange(val) {
       const s = this.searchParam;
       s.pageNo = val;
       this.searchParam = s;
-       this.inquirySearch()
+      this.inquirySearch();
     },
     inquirySearch() {
       const p = this.searchParam;
-       this.POST('/diagnose/socket/condition/update', p).then(res=>{
-         if(res.code == '000000'){
-           this.$store.commit('updateSoketQuest', p)
-         }else{
+      this.POST("/diagnose/socket/condition/update", p).then((res) => {
+        if (res.code == "000000") {
+          this.$store.commit("updateSoketQuest", p);
+        } else {
           this.$message({
             message: res.message,
             type: "warning",
-             duration:1000
+            duration: 1000,
           });
         }
-       })
+      });
       // 测试代码
       // const l = this.currentDiagList;
       // l.push(...this.testlistdata);
@@ -175,42 +189,82 @@ export default {
       // this.$store.commit('socket/SET_NOTIFY', ...this.testlistdata);
     },
   },
-}
+};
 </script>
-<style lang='scss' scoped>
+<style lang='scss'>
+.workbench-tab {
+  .el-radio-button__inner {
+    border: none;
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      right: 0;
+      height: 2px;
+      background: #fff;
+      width: 20px;
+      transform: translateX(-50%);
+    }
+    .circle-red {
+      display: block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: red;
+      right: 15px;
+      top: 7px;
+    }
+  }
+  .el-radio-button:first-child .el-radio-button__inner {
+    border: none;
+  }
+  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    background-color: #fff;
+    color: #0d9078;
+    box-shadow: none;
+    font-weight: 500;
+    &::after {
+      background: #0d9078;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
 ::v-deep {
-    .el-date-editor{
-        .el-input__inner{
-            background:red;
+  .el-date-editor {
+    .el-input__inner {
+      background: red;
     }
   }
 }
-
-
-.forbox{
+.forbox {
   display: flex;
   justify-content: space-between;
   // justify-content: space-between;
-  .for{
+  .for {
     max-width: 50%;
     display: flex;
   }
 }
-</style>
-<style lang="scss" scoped>
 .diagnosis-list-content {
   .select-content {
     margin-bottom: 10px;
     padding: 10px;
     background: #fff;
     overflow: hidden !important;
+    &.content-top {
+      padding-bottom: 0;
+    }
     .title {
       height: 50px;
       display: flex;
       justify-content: flex-start;
       align-items: center;
     }
-    .radio{
+    .radio {
       border-bottom: 1px solid #ccc;
       .el-radio-group {
         margin-bottom: -1px !important;
@@ -218,42 +272,41 @@ export default {
     }
   }
 }
-  .el-row {
+.el-row {
   margin-bottom: 20px;
   &:last-child {
     margin-bottom: 0;
   }
-  }
-  .el-col {
+}
+.el-col {
   border-radius: 4px;
-  }
-  .bg-purple-dark {
+}
+.bg-purple-dark {
   background: #99a9bf;
-  }
-  .bg-purple {
+}
+.bg-purple {
   background: #d3dce6;
-  }
-  .bg-purple-light {
+}
+.bg-purple-light {
   background: #e5e9f2;
-  }
-  .grid-content {
+}
+.grid-content {
   border-radius: 4px;
   min-height: 45px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   font-size: 16px;
-    }
-  .row-bg {
+}
+.row-bg {
   padding: 10px 0;
   background-color: #f9fafc;
-  }
-@media screen and (min-width:1900px){
-  .forbox{
+}
+@media screen and (min-width: 1900px) {
+  .forbox {
     .for {
       width: 30%;
     }
   }
 }
-
 </style>