From ad0003ad7b070afd73d3617fdee00348e6a392c0 Mon Sep 17 00:00:00 2001
From: ChenQiuYu <chenqiuyu@jizhiweb.cn>
Date: Wed, 30 Apr 2025 10:52:02 +0800
Subject: [PATCH] dev

---
 src/components/charge/ChargeQueue.vue  | 145 +++++++++++++++++--------
 src/components/settings/ItemSearch.vue |  26 ++---
 src/views/charge/index.vue             |  36 +++---
 3 files changed, 131 insertions(+), 76 deletions(-)

diff --git a/src/components/charge/ChargeQueue.vue b/src/components/charge/ChargeQueue.vue
index 7e8ead6..9810db5 100644
--- a/src/components/charge/ChargeQueue.vue
+++ b/src/components/charge/ChargeQueue.vue
@@ -1,39 +1,52 @@
 <template>
-  <div class="container">
-    <div class="search">
-      <el-input v-model="query.keyword" placeholder="根据姓名搜索"/>
-      <el-button type="success" @click="addChargeOrder" size="small">+收费</el-button>
-    </div>
-    <div class="list">
-      <el-scrollbar>
-        <ul>
-          <li class="list-item" :class="curItem.id == item.id ? 'active' : ''" v-for="(item, index) in orderList"
-              :key="index" @click="clickItem(item)">
+  <Panel title="收费队列">
+    <template #tools>
+      <el-button type="primary" size="small">新增患者</el-button>
+    </template>
+    <template #default>
+      <div class="container">
+        <div class="tabs">
+          <span v-for="(item,index) in statusList " :key="index" :class="status == item.value ? 'tabs-item' : ''"
+                @click="tab(item)">{{ item.label }}&nbsp;{{ item.num }}
+          </span>
+        </div>
+        <div class="search">
+          <el-input v-model="query.keyword" style="height: 100%;width: 100%" placeholder="根据姓名搜索"/>
+          <!--         <el-button type="success" @click="addChargeOrder" size="small">+收费</el-button>-->
+        </div>
+        <div class="list">
+          <el-scrollbar>
+            <ul>
+              <li class="list-item" :class="curItem.id == item.id ? 'active' : ''" v-for="(item, index) in orderList"
+                  :key="index" @click="clickItem(item)">
                 <span>
-                  <img v-if="item.patientRegistration.gender=='男'" class="avatar" src="/static/images/outpatient/man.png"
+                  <img v-if="item.patientRegistration.gender=='1'" class="avatar"
+                       src="/static/images/outpatient/man.png"
                        alt="头像"/>
-                  <img v-if="item.patientRegistration.gender=='女'" class="avatar" src="/static/images/outpatient/women.png"
+                  <img v-if="item.patientRegistration.gender=='2'" class="avatar"
+                       src="/static/images/outpatient/women.png"
                        alt="头像"/>
                 </span>
-            <span class="item_name">{{ item.patientInfo.name }}</span>
-            <el-tooltip
-                class="box-item"
-                effect="dark"
-                :content="formatTime(item.patientRegistration.createDatetime)||'-'"
-                placement="bottom-start"
-            >
+                <span class="item_name">{{ item.patientInfo.name }}</span>
+                <el-tooltip
+                    class="box-item"
+                    effect="dark"
+                    :content="formatTime(item.patientRegistration.createDatetime)||'-'"
+                    placement="bottom-start"
+                >
               <span class="item_time">
                 {{ formatTime(item.patientRegistration.createDatetime) || '-' }}
               </span>
-            </el-tooltip>
-            <span :class="[item.status == 0 ?'status-active':'']">{{item.status == 0 ? '未收' : '已收'}}</span>
-          </li>
-        </ul>
-      </el-scrollbar>
-
-    </div>
-  </div>
+                </el-tooltip>
+                <span :class="[item.status == 0 ?'status-active':'']">{{ item.status == 0 ? '未收' : '已收' }}</span>
+              </li>
+            </ul>
+          </el-scrollbar>
 
+        </div>
+      </div>
+    </template>
+  </Panel>
 
 </template>
 <script setup lang="ts">
@@ -41,6 +54,7 @@ import {onMounted, ref} from "vue";
 import {post} from "@/utils/request.ts";
 import Panel from "@/components/common/Panel.vue";
 import {formatTime} from "@/utils/dateUtils.ts";
+
 const curItem = ref<any>({});
 const emit = defineEmits(['clickItem'])
 const clickItem = (item: any) => {
@@ -48,7 +62,9 @@ const clickItem = (item: any) => {
   emit('clickItem', item);
 }
 
-const orderList = ref<any>([]);
+const orderList = ref<any>([
+
+]);
 const query = ref({
   pageSize: 20,
   pageNum: 1,
@@ -56,11 +72,11 @@ const query = ref({
 })
 const addChargeOrder = () => {
   const newOrder = {
-    id:-1,
-    patientName :"匿名患者",
-    payType : -1,
+    id: -1,
+    patientName: "匿名患者",
+    payType: -1,
   }
-  if (orderList.value[0]?.id == -1){
+  if (orderList.value[0]?.id == -1) {
     return
   }
   orderList.value.unshift(newOrder)
@@ -70,35 +86,53 @@ const clickFirst = () => {
   clickItem(orderList.value[0])
 }
 const getOrderList = () => {
-  post("medical/record/getChargeQueue", {query: query.value}).then(
+  post("medical/record/getChargeQueue", {query: query.value,status:status.value}).then(
       (res: any) => {
         orderList.value = res.list
         clickFirst()
       }
   )
 }
-const delDraft = () =>{
+const delDraft = () => {
   orderList.value.shift();
   clickFirst()
 }
-defineExpose({delDraft,getOrderList})
-onMounted(()=>{
+defineExpose({delDraft, getOrderList})
+onMounted(() => {
   getOrderList()
 })
-
+const status = ref(0)
+const statusList = ref([
+  {
+    label: '待收',
+    num: 0,
+    value: 0
+  },
+  {
+    label: '已收',
+    num: 0,
+    value: 1
+  },
+])
+const tab = (item: any) => {
+  status.value = item.value
+  getOrderList()
+}
 </script>
 <style scoped lang="scss">
-.container{
+.container {
   display: flex;
   flex-direction: column; // 确保子元素垂直排列
-  width: 100%;
-  .search{
-    height: 25px;
+  width: 320px;
+
+  .search {
+    padding: 16px;
+    height: 74px;
     width: 100%;
     display: flex;
     margin: 0;
-    padding: 0;
   }
+
   .list {
     display: flex;
     min-height: 0;
@@ -172,10 +206,12 @@ onMounted(()=>{
 
 
       }
-      .status-active{
+
+      .status-active {
         font-weight: bold;
         color: #409EFF;
       }
+
       .active {
         color: #fff;
         background: #4D6DE4;
@@ -187,4 +223,27 @@ onMounted(()=>{
     }
   }
 }
+
+.tabs {
+  height: 27px;
+  border-bottom: 1px solid #EAEAEC;
+  font-weight: 500;
+  color: #999999;
+  font-style: normal;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 67px;
+
+  span {
+    width: 66px;
+    cursor: pointer;
+    text-align: center;
+  }
+
+  .tabs-item {
+    border-bottom: 2px solid #4D6DE4;
+    color: #4D6DE4;
+    padding-bottom: 10px;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/settings/ItemSearch.vue b/src/components/settings/ItemSearch.vue
index c88a64b..8332408 100644
--- a/src/components/settings/ItemSearch.vue
+++ b/src/components/settings/ItemSearch.vue
@@ -12,21 +12,19 @@
               clearable/>
           <el-button type="primary" @click="searchSocialItem">搜索</el-button>
         </div>
-        <el-scrollbar style="width: 100%;overflow: hidden">
-          <div class="search_result" style="width: 100%;padding: 0 24px">
-            <div class="result_table" style="">
-              <el-table v-loading="isloading" :data="searchResult.list"
-                        style="width: 100%"
-                        highlight-current-row
-                        @row-click="changeCurRow"
-                        :row-class-name="tableRowClassName">
-                <el-table-column prop="name" label="名称" fixed show-overflow-tooltip/>
-                <el-table-column prop="code" fixed label="医疗目录编码" show-overflow-tooltip/>
-                <el-table-column prop="unit" label="计价单位" width="180" show-overflow-tooltip/>
-              </el-table>
-            </div>
+        <div class="search_result" style="width: 100%;padding: 0 12px">
+          <div class="result_table" style="width: 100%;height: 100%;box-sizing: border-box;padding-bottom: 20px">
+            <el-table v-loading="isloading" :data="searchResult.list"
+                      style="width: 100%;height: 100%"
+                      highlight-current-row
+                      @row-click="changeCurRow"
+                      :row-class-name="tableRowClassName">
+              <el-table-column prop="name" label="名称" fixed show-overflow-tooltip/>
+              <el-table-column prop="code" fixed label="医疗目录编码" show-overflow-tooltip/>
+              <el-table-column prop="unit" label="计价单位" width="180" show-overflow-tooltip/>
+            </el-table>
           </div>
-        </el-scrollbar>
+        </div>
       </div>
     </template>
     <template #footer>
diff --git a/src/views/charge/index.vue b/src/views/charge/index.vue
index fd03174..6774fdb 100644
--- a/src/views/charge/index.vue
+++ b/src/views/charge/index.vue
@@ -1,19 +1,17 @@
 <template>
   <div class="container">
     <div class="left">
-      <Panel title="收费队列">
-        <chargeQueue @clickItem="clickItem" ref="chargeQueueRef"></ChargeQueue>
-      </Panel>
+      <chargeQueue @clickItem="clickItem" ref="chargeQueueRef"></ChargeQueue>
     </div>
     <div class="middle">
       <Panel title="零售收费">
         <template #tools>
-          <span>{{formData.totalPrice}}</span>
+          <span>{{ formData.totalPrice }}</span>
           <div v-if="formData.status == 0 ">
-            <el-button type="primary" @click="delDraft()" v-if="formData.id == -1" >删除</el-button>
-            <el-button type="primary" @click="saveAndCharge" >收费</el-button>
-            <el-button type="primary" >追溯码</el-button>
-            <el-button type="primary" >挂单</el-button>
+            <el-button type="primary" @click="delDraft()" v-if="formData.id == -1">删除</el-button>
+            <el-button type="primary" @click="saveAndCharge">收费</el-button>
+            <el-button type="primary">追溯码</el-button>
+            <el-button type="primary">挂单</el-button>
           </div>
 
         </template>
@@ -59,11 +57,11 @@
 
       </Panel>
       <Panel title="服务项目">
-        <ServiceDetail v-model="formData"  @totalPriceChange="getOrderTotalPrice"> </ServiceDetail>
+        <ServiceDetail v-model="formData" @totalPriceChange="getOrderTotalPrice"></ServiceDetail>
 
       </Panel>
       <Panel title="药品耗材">
-        <GoodsDetail v-model="formData" @totalPriceChange="getOrderTotalPrice" ></GoodsDetail>
+        <GoodsDetail v-model="formData" @totalPriceChange="getOrderTotalPrice"></GoodsDetail>
       </Panel>
     </div>
     <div class="right">
@@ -92,10 +90,10 @@ import GoodsDetail from "@/components/charge/GoodsDetail.vue";
 import DiagnosisSearchInput from "@/components/outpatient/DiagnosisSearchInput.vue";
 import Settlement from "@/components/charge/Settlement.vue";
 
-const socialCard = ref<any>({payInfo:{}})
+const socialCard = ref<any>({payInfo: {}})
 const formData = ref<any>({
-  patientInfo:{},
-  diagnosisMedicalRecord:{},
+  patientInfo: {},
+  diagnosisMedicalRecord: {},
 })
 const diagnosisKeyword = ref("")
 const chargeQueueRef = ref()
@@ -106,9 +104,9 @@ const delDraft = () => {
 }
 const settlementRef = ref()
 const saveAndCharge = () => {
-  post('charge/save', {data:formData.value}).then((res: any) => {
+  post('charge/save', {data: formData.value}).then((res: any) => {
     formData.value.code = res
-    nextTick(()=>{
+    nextTick(() => {
       settlementRef.value?.init(res)
     })
   })
@@ -137,7 +135,7 @@ const clickItem = (item: any) => {
   nextTick(() => {
     let list = JSON.parse(formData.value.diagnosisMedicalRecord.diagnosisDetail)
     let nList = formData.value.diagnosisMedicalRecord.diagnosisSummary.split(',')
-    diagnosisSearchRef.value?.init(list,nList);
+    diagnosisSearchRef.value?.init(list, nList);
   })
 }
 const dockerList = ref<any[]>([])
@@ -147,19 +145,19 @@ const getDockerList = () => {
   })
 }
 const orderCompleted = () => {
-  nextTick(()=>{
+  nextTick(() => {
     chargeQueueRef.value?.getOrderList()
   })
 }
 const orderCanceled = () => {
-  nextTick(()=>{
+  nextTick(() => {
     chargeQueueRef.value?.getOrderList()
   })
 
 }
 
 
-onMounted(()=>{
+onMounted(() => {
   getDockerList()
 })
 const getOrderTotalPrice = () => {