web/src/components/charge/ChargeQueue.vue

<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)">
                <span>
                  <img v-if="item.patinetGender=='男'" class="avatar" src="/static/images/outpatient/man.png"
                       alt="头像"/>
                  <img v-if="item.patinetGender=='女'" class="avatar" src="/static/images/outpatient/women.png"
                       alt="头像"/>
                </span>
            <span class="item_name">{{ item.patientName }}</span>
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="formatTime(item.createDatetime)||'-'"
                placement="bottom-start"
            >
              <span class="item_time">
                {{ formatTime(item.createDatetime) || '-' }}
              </span>
            </el-tooltip>
            <span>01-01</span>
          </li>
        </ul>
      </el-scrollbar>

    </div>
  </div>


</template>
<script setup lang="ts">
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) => {
  curItem.value = item
  emit('clickItem', item);
}

const orderList = ref<any>([]);
const query = ref({
  pageSize: 20,
  pageNum: 1,
  keyword: ""
})
const addChargeOrder = () => {
  const newOrder = {
    id:-1,
    patientName :"匿名患者",
    payType : -1,
  }
  if (orderList.value[0]?.id == -1){
    return
  }
  orderList.value.unshift(newOrder)
  clickFirst()
}
const clickFirst = () => {
  clickItem(orderList.value[0])
}
const getOrderList = () => {
  post("medical/record/getChargeQueue", {query: query.value}).then(
      (res: any) => {
        orderList.value = res.list
        clickFirst()
      }
  )
}
const delDraft = () =>{
  orderList.value.shift();
  clickFirst()
}
defineExpose({delDraft})
onMounted(()=>{
  getOrderList()
})

</script>
<style scoped lang="scss">
.container{
  display: flex;
  flex-direction: column; // 确保子元素垂直排列
  width: 100%;
  .search{
    height: 25px;
    width: 100%;
    display: flex;
    margin: 0;
    padding: 0;
  }
  .list {
    display: flex;
    min-height: 0;
    flex-direction: column;
    width: 100%;

    .list-title {
      height: 48px;
      background: #F5FAFF;
      padding: 0 27px;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 14px;
      color: rgba(34, 42, 57, 0.8);
      font-style: normal;

      span {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    ul {
      flex: 1;
      min-height: 0;

      .list-item {
        height: 48px;
        display: flex;
        align-items: center;
        padding: 0 18px;
        font-weight: 400;
        font-size: 14px;
        color: rgba(34, 42, 57, 0.7);
        font-style: normal;
        cursor: pointer;

        span {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          .avatar {
            width: 26px;
            height: 26px;
          }
        }

        &:hover {
          background: rgba(#4D6DE4, 0.1);
        }

        .item_name {
          flex: 1.5;
          white-space: nowrap; // 防止文本换行
          overflow: hidden; // 隐藏溢出的文本
          text-overflow: ellipsis; // 显示省略号
        }

        .item_time {
          flex: 2;
          white-space: nowrap; // 防止文本换行
          overflow: hidden; // 隐藏溢出的文本
          text-overflow: ellipsis; // 显示省略号
        }

      }

      .active {
        color: #fff;
        background: #4D6DE4;

        &:hover {
          background: #4D6DE4;
        }
      }
    }
  }
}
</style>