web/src/components/outpatient/PharmaceuticalConsumables.vue

<template>
  <Panel :title="'药品耗材'">
    <div class="content">
      <div class="list">
        <ul>
          <li class="item" v-for="(item, index) in list" :key="index">
            <div class="index">{{ index + 1 }}</div>
            <div class="name">
              <el-popover
                  placement="top-start"
                  trigger="hover"
                  width="200px"
              >
                <template #reference>
                  {{ item.name }}
                </template>

                <div>
                  {{item.hilistCode}}
                </div>
              </el-popover>
              </div>
            <div class="price">￥{{item.selectedPrice || '0' }}</div>
            <div class="unit">
              <div class="unit-content">
                <el-input-number v-model="item.selectedNum" min="1" size="small"></el-input-number>
                <el-dropdown>
                  <span style="line-height: 30px;margin-left: 10px">{{ item.selectedUnit }}</span>
                  <template #dropdown>
                    <el-dropdown-menu v-if="item.trdnFlag == 1">
                      <el-dropdown-item @click="selectUnit(item,item.packagingUnit)">{{ item.packagingUnit }}
                      </el-dropdown-item>
                      <el-dropdown-item @click="selectUnit(item,item.minPackagingUnit)">{{ item.minPackagingUnit }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div class="sub-price">￥{{ item.unitPrice*item.selectedNum }}</div>
            <div class="delete">
              <div @click="deleteItem(item.id)" class="delete-btn">
                <el-icon>
                  <Close />
                </el-icon>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="search">
        <div class="search-input">
          <SearchInput
              :request-api="itemSearchApi"
              :show-config="itemShowConfig"
              @selectedCallBack="itemSelect"
              :placeholder="'请输入药材名称'"
              :disabled="disabled"
              @focus="focus"
          >
          </SearchInput>
        </div>
        <span style="margin-right: 24px">
          ￥{{ sumPrice}}
        </span>
      </div>
    </div>
  </Panel>
</template>
<script setup lang="ts">
import Panel from "@/components/common/Panel.vue";
import SearchInput from "@/components/SearchInput.vue";
import {CircleClose, Close} from "@element-plus/icons-vue";
import {watch, ref, computed} from "vue";

const props = defineProps({
  status: {
    type: Number,
    default: 0
  }
})
const disabled=computed(()=>{
  if(props.status === 1){
    return true
  }
})
const itemSearchApi = "goods/goods/search";
const itemShowConfig = [
  {
    label: "项目名称",
    prop: "name",
  },
  {
    label: "项目类型",
    prop: "type",
  },
  {
    label: "售价",
    prop: "unitPrice",
  },
]
const itemSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.packagingUnit
  row.selectedPrice = row.unitPrice
  list.value.push(row)
}
const deleteItem = (id: any) => {
  list.value = list.value.filter((item) => item.id !== id);
};
const list = defineModel<any[]>({default: () => []});


const selectUnit = (item: any, unit: any) => {
  item.selectedUnit = unit;
  if (unit == item.packagingUnit) {
    item.selectedPrice = item.unitPrice
    return
  }
  if (unit == item.minPackagingUnit) {
    item.selectedPrice = item.disassemblyPrice
  }
}
const sumPrice = ref(0)
const emit = defineEmits(['focus'])
const focus=(e:any)=>{
 emit('focus',e)
}
watch(()=>list.value, (newList) => {
  sumPrice.value = newList.reduce((total, item) => {
    return total + (item.selectedNum || 0) * (item.selectedPrice || 0);
  }, 0);
}, {deep: true})
</script>

<style scoped lang="scss">
@use "@/assets/scss/base";
.content {
  display: flex;
  flex-direction: column;

  .list {
    flex: 1;
    min-height: 0;
    .item {
      height: 30px;
      border-top: 1px solid #EAEAEC;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;

      .index {
        height: 100%;
        width: 50px;
        text-align: center;
        line-height: 30px;
      }

      .name {
        flex: 1;
        margin-left: 10px;
        height: 100%;
        line-height: 30px;
      }

      .code {
        flex: 1;
        margin-left: 10px;
        height: 100%;
        line-height: 30px;
      }

      .price {
        height: 100%;
        width: 100px;
        text-align: center;
        line-height: 30px;
      }

      .unit {
        height: 100%;
        width: 180px;
        margin-left: 10px;
        line-height: 30px;
        .unit-content{
          display: flex;
          align-items: center;
        }

      }
      .sub-price{
        height: 100%;
        line-height: 30px;
      }

      .delete {
        height: 100%;
        width: 100px;
        text-align: center;
        line-height: 30px;
        .delete-btn{
          cursor: pointer;
          &:hover{
            color: base.$primary-color;
          }
        }
      }
    }
  }

  .search {
    height: 64px;
    border-top: 1px solid #EAEAEC;
    display: flex;
    align-items: center;

    .search-input {
      height: 100%;
      flex: 1;
    }
  }
}
</style>