dev

src/components/registration/CardDefault.vue

@@ -112,13 +112,8 @@ const close = () => {
 </script>
 
 <template>
-  <div class="card-default" style="padding:24px">
+  <div class="card-default">
-    <div class="info" v-if="socialCard.data">
+    <div v-loading="loading" class="empty">
-      <div class="btn-wrapper">
-        <el-button text bg @click="close">退出医保卡</el-button>
-      </div>
-    </div>
-    <div v-loading="loading" class="empty" v-else>
       <div class="btn-wrapper">
         <div class="btn" @click="ReadSocialCard('03')" @keydown.enter.prevent tabindex="-1">医保卡</div>
         <div class="btn" @click="ReadSocialCard('01')" @keydown.enter.prevent tabindex="-1">电子凭证</div>
@@ -130,113 +125,33 @@ const close = () => {
 </template>
 
 <style scoped lang="scss">
-.card-default {
+.btn-wrapper {
-  position: relative;
+  width: 200px;
-  width: 100%;
   height: 100%;
-
+  background: #FFFFFF;
-  .insuinfo {
+  border-radius: 8px;
-    position: relative;
+  .btn {
     width: 100%;
-    box-sizing: border-box;
+    height: 46px;
-    border-radius: 5px;
+    border-bottom: 1px solid #EAEAEC;
-    padding: 10px;
+    font-weight: 500;
-    background: #EEE;
+    font-size: 16px;
-    max-height: 200px;
+    color: #4D6DE4;
-
+    font-style: normal;
-    .item {
+    display: flex;
-      position: relative;
+    align-items: center;
-      width: 100%;
+    justify-content: center;
-      height: 30px;
+    &:hover {
-      line-height: 30px;
+      background: #4D6DE4;
-      font-size: 14px;
+      color: #FFFFFF;
-      color: #666;
-      display: flex;
-      align-items: center;
-
-      .name {
-        flex: 1;
-      }
-
-      .value {
-        width: 80px;
-        text-align: right;
-      }
     }
-  }
+    :last-child {
-
+      border-bottom: none;
-  .empty {
+      border-radius:0 0 8px 8px;
-    padding: 0 24px;
-
-    .tip {
-      height: 100%;
-      background: linear-gradient(157deg, #FAFCFF 0%, #F2F5FC 100%);
-      border-radius: 8px 8px 8px 8px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      font-weight: 400;
-      font-size: 12px;
-      color: #AAAAAA;
-      line-height: 17px;
-      text-align: left;
-      font-style: normal;
-      text-transform: none;
     }
-
+    :first-child {
-    .btn-wrapper {
+      border-radius:8px 8px 0 0;
-      width: 100%;
-      height: 100%;
-
-      .btn {
-        height: 40px;
-        background: #FFFFFF;
-        border-radius: 8px;
-        cursor: pointer;
-        font-weight: bold;
-        font-size: 16px;
-        color: #4D6DE4;
-        font-style: normal;
-        line-height: 40px;
-        text-align: center;
-        padding: 0 24px;
-
-        &:hover {
-          background: #4D6DE4;
-          color: #FFFFFF;
-
-        }
-
-        &:nth-child(2n) {
-          margin: 0 8px;
-        }
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
     }
-
-  }
-
-  .top {
-    margin: 20px 0 8px 0;
-  }
-}
-
-.info {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .btn-wrapper {
-    position: relative;
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    text-align: right;
   }
 }
 </style>

src/components/registration/Edit.vue

@@ -1,109 +1,138 @@
 <template>
   <Mask :is-show="isShow" width="800" :height="500" title="挂号" @close="close" :show-footer="true">
+   <template #default>
+     <el-scrollbar>
+       <div style="padding:0 24px 24px">
+         <el-form
+             :model="edit_data"
+             label-width="auto"
+             :rules="rules"
+             ref="form"
+         >
+           <el-descriptions
+               border
+               direction="vertical"
+               label-width="100"
+               :column="4"
+               style="margin-top: 20px"
+           >
+             <!--          <el-descriptions-item label="结算方式">-->
+             <!--            <el-form-item prop="gender">-->
+             <!--              <el-radio-group v-model="edit_data.type">-->
+             <!--                <el-radio value="1">医保</el-radio>-->
+             <!--                <el-radio value="2">自费</el-radio>-->
+             <!--              </el-radio-group>-->
+             <!--            </el-form-item>-->
+             <!--          </el-descriptions-item>-->
+             <el-descriptions-item label="名称">
+               <el-form-item prop="name">
+                 <el-input v-model="edit_data.name" placeholder="请输入名称" clearable></el-input>
+               </el-form-item>
+             </el-descriptions-item>
+             <el-descriptions-item label="性别">
+               <el-form-item prop="gender">
+                 <el-radio-group v-model="edit_data.gender">
+                   <el-radio value="1">男</el-radio>
+                   <el-radio value="2">女</el-radio>
+                 </el-radio-group>
+               </el-form-item>
+             </el-descriptions-item>
+             <el-descriptions-item label="年龄">
+               <el-form-item prop="age">
+                 <el-input v-model.number="edit_data.age" placeholder="请输入年龄"></el-input>
+               </el-form-item>
+             </el-descriptions-item>
+             <el-descriptions-item label="医生">
+               <el-form-item prop="organizationDoctorId">
+                 <el-select
+                     v-model="edit_data.organizationDoctorId"
+                     placeholder="请选择医生"
+                 >
+                   <el-option
+                       v-for="item in props.doctorList"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id"
+                   >
+                   </el-option>
+                 </el-select>
+               </el-form-item>
+             </el-descriptions-item>
+             <el-descriptions-item label="证件类型">
+               <el-form-item prop="certType">
+                 <el-select v-model="edit_data.certType" placeholder="证件类型">
+                   <el-option
+                       v-for="item in certTypeList"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id"
+                   ></el-option>
+                 </el-select>
+               </el-form-item>
+             </el-descriptions-item>
+             <el-descriptions-item label="证件码">
+               <el-form-item prop="certNo">
+                 <el-input v-model="edit_data.certNo" placeholder="请输入证件码"></el-input>
+               </el-form-item>
+             </el-descriptions-item>
 
-    <div style="padding:0 24px 24px">
+             <el-descriptions-item label="手机号">
-      <el-form
+               <el-form-item prop="phone">
-          :model="edit_data"
+                 <el-input v-model="edit_data.phone" placeholder="手机号"></el-input>
-          label-width="auto"
+               </el-form-item>
-          :rules="rules"
+             </el-descriptions-item>
-          ref="form"
+             <el-descriptions-item label="就诊类型">
-      >
+               <el-form-item prop="visitType">
-        <el-descriptions
+                 <el-select v-model="edit_data.visitType" placeholder="就诊类型">
-            border
+                   <el-option label="初诊" :value="0"></el-option>
-            direction="vertical"
+                   <el-option label="复诊" :value="1"></el-option>
-            label-width="100"
+                 </el-select>
-            :column="4"
+               </el-form-item>
-            style="margin-top: 20px"
+             </el-descriptions-item>
-        >
+             <el-descriptions-item label="备注">
-          <!--          <el-descriptions-item label="结算方式">-->
+               <el-input v-model="edit_data.memo" placeholder="备注"></el-input>
-          <!--            <el-form-item prop="gender">-->
+             </el-descriptions-item>
-          <!--              <el-radio-group v-model="edit_data.type">-->
+           </el-descriptions>
-          <!--                <el-radio value="1">医保</el-radio>-->
+         </el-form>
-          <!--                <el-radio value="2">自费</el-radio>-->
+         <h5 v-if="!isShowCard" style="margin:24px 0;font-size: 16px">险种列表</h5>
-          <!--              </el-radio-group>-->
+         <el-table
-          <!--            </el-form-item>-->
+             :data="tableData"
-          <!--          </el-descriptions-item>-->
+             style="width: 100%"
-          <el-descriptions-item label="名称">
+             v-if="!isShowCard"
-            <el-form-item prop="name">
+         >
-              <el-input v-model="edit_data.name" placeholder="请输入名称" clearable></el-input>
+           <el-table-column label="险种类型" prop="insutype">
-            </el-form-item>
+             <template #default="scope">
-          </el-descriptions-item>
+               {{ getKey(insutypes,scope.row.insutype) }}
-          <el-descriptions-item label="性别">
+             </template>
-            <el-form-item prop="gender">
+           </el-table-column>
-              <el-radio-group v-model="edit_data.gender">
+           <el-table-column label="剩余余额" prop="balc">
-                <el-radio value="1">男</el-radio>
+             <template #default="scope">
-                <el-radio value="2">女</el-radio>
+               ￥{{ scope.row.balc || 0 }}
-              </el-radio-group>
+             </template>
-            </el-form-item>
+           </el-table-column>
-          </el-descriptions-item>
+         </el-table>
-          <el-descriptions-item label="年龄">
+       </div>
-            <el-form-item prop="age">
+     </el-scrollbar>
-              <el-input v-model.number="edit_data.age" placeholder="请输入年龄"></el-input>
+   </template>
-            </el-form-item>
-          </el-descriptions-item>
-          <el-descriptions-item label="医生">
-            <el-form-item prop="organizationDoctorId">
-              <el-select
-                  v-model="edit_data.organizationDoctorId"
-                  placeholder="请选择医生"
-              >
-                <el-option
-                    v-for="item in props.doctorList"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-descriptions-item>
-          <el-descriptions-item label="证件类型">
-            <el-form-item prop="certType">
-              <el-select v-model="edit_data.certType" placeholder="证件类型">
-                <el-option
-                    v-for="item in certTypeList"
-                    :key="item.id"
-                    :label="item.name"
-                    :value="item.id"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-descriptions-item>
-          <el-descriptions-item label="证件码">
-            <el-form-item prop="certNo">
-              <el-input v-model="edit_data.certNo" placeholder="请输入证件码"></el-input>
-            </el-form-item>
-          </el-descriptions-item>
 
-          <el-descriptions-item label="手机号">
-            <el-form-item prop="phone">
-              <el-input v-model="edit_data.phone" placeholder="手机号"></el-input>
-            </el-form-item>
-          </el-descriptions-item>
-          <el-descriptions-item label="就诊类型">
-            <el-form-item prop="visitType">
-              <el-select v-model="edit_data.visitType" placeholder="就诊类型">
-                <el-option label="初诊" :value="0"></el-option>
-                <el-option label="复诊" :value="1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-descriptions-item>
-          <el-descriptions-item label="备注">
-            <el-input v-model="edit_data.memo" placeholder="备注"></el-input>
-          </el-descriptions-item>
-        </el-descriptions>
-      </el-form>
-    </div>
     <template #footer>
       <div class="bottom">
-        <el-dropdown placement="top-start">
+        <el-dropdown v-if="isShowCard" placement="top-start" @show="showCardBtn" @hide="hide">
-          <el-button type="primary" v-if="!isShowCard">读卡</el-button>
+          <div class="left">
-          <el-button text v-else>已读卡</el-button>
+            <span class="btnCard" type="primary">
+              <img class="image" src="/public/static/images/registration/card.png" alt="" srcset="">进行读卡
+              <img class="image1" :src="'/public/static/images/registration/'+(showBtn?2:1)+'.png'" alt="" srcset="">
+            </span>
+          </div>
           <template #dropdown>
             <CardDefault v-model="socialCard" @socialCardUpdate="socialCardUpdate"
                          @close="deleteCard"/>
           </template>
         </el-dropdown>
+        <div class="closeBtn" v-else @click="deleteCard">
+          <img class="image" src="/public/static/images/registration/card.png" alt="" srcset="">
+          退出医保
+        </div>
         <div class="bottom-right">
           <el-button type="primary" @click="save">保存</el-button>
           <el-button @click="close">取消</el-button>
@@ -118,9 +147,11 @@
 import {onMounted, ref} from 'vue'
 import {post} from '@/utils/request.ts'
 import CardDefault from '@/components/registration/CardDefault.vue'
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
 import Mask from "@/components/common/Mask.vue";
 import psnCertTypes from "@/assets/config/directory/psnCertTypes.json"
+import {getKey} from "@/utils/discrotyUtil.ts";
+import insutypes from "@/assets/config/directory/insutypes.json"
 
 // 定义医生选项的接口
 interface Doctor {
@@ -235,22 +266,41 @@ const init = () => {
     })
   }
 }
-const isShowCard = ref<any>(false)
+const isShowCard = ref<any>(true)
+const tableData = ref<any>([])
 const socialCardUpdate = (e: any) => {
+  console.log(e, "e")
   if (e) {
-    isShowCard.value = true
+    isShowCard.value = false
     edit_data.value = e.data.baseinfo
     edit_data.value.gender = e.data.baseinfo.gend
     edit_data.value.name = e.data.baseinfo.psn_name
     edit_data.value.certType = e.data.baseinfo.psn_cert_type
     edit_data.value.certNo = e.data.baseinfo.certno
     edit_data.value.age = Math.floor(e.data.baseinfo.age)
+    tableData.value = e.data.insuinfo
+    edit_data.value.organizationDoctorId = props.doctorId
   }
 
 }
 const deleteCard = () => {
-  isShowCard.value = false
+  ElMessageBox.confirm("退出识别", "提示", {
-  edit_data.value = {}
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    callback: (action: any) => {
+      if (action == "confirm") {
+        isShowCard.value = true
+        edit_data.value = {}
+      }
+    },
+  });
+}
+const showBtn = ref(false)
+const showCardBtn = () => {
+  showBtn.value = true
+}
+const hide = () => {
+  showBtn.value = false
 }
 defineExpose({init})
 </script>
@@ -270,4 +320,62 @@ defineExpose({init})
   align-items: center;
   padding: 0 24px;
 }
+
+.btnCard {
+  width: 200px;
+  height: 48px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #4D6DE4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  font-size: 20px;
+  color: #4D6DE4;
+  font-style: normal;
+
+  .image {
+    width: 26px;
+    height: 22px;
+    margin-right: 10px;
+  }
+
+  .image1 {
+    width: 16px;
+    height: 8px;
+    margin-left: 20px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #4D6DE4;
+  }
+}
+
+.closeBtn {
+  width: 200px;
+  height: 48px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #4D6DE4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  font-size: 20px;
+  color: #4D6DE4;
+  font-style: normal;
+
+  .image {
+    width: 26px;
+    height: 22px;
+    margin-right: 10px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    border: 1px solid #4D6DE4;
+  }
+}
 </style>