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">
            <span class="index">{{ index + 1 }}</span>
            <span class="name">{{ item.name }}</span>
            <span class="type">{{ item.type }}</span>
            <span class="unit">
              <el-input-number v-model="item.selectedNum" min="1"></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>
            </span>
            <span class="price">￥{{item.selectedPrice || '0' }}元</span>
            <span class="delete">
                <el-button @click="deleteItem(item.id)">
                  <el-icon><CircleClose/></el-icon>
                </el-button>
            </span>
          </li>
        </ul>
      </div>
      <div class="search">
        <div class="search-input">
          <SearchInput
              :request-api="itemSearchApi"
              :show-config="itemShowConfig"
              @selectedCallBack="itemSelect"
              :placeholder="'请输入药材名称'"
              :disabled="disabled"
          >
          </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} 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)
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">
.content {
  display: flex;
  flex-direction: column;

  .list {
    flex: 1;
    min-height: 0;

    .item {
      height: 64px;
      border-top: 1px solid #EAEAEC;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .index {
        height: 100%;
        width: 50px;
        text-align: center;
        line-height: 64px;
        border-right: 1px solid #EAEAEC;
      }

      .name {
        flex: 1;
        margin-left: 10px;
        border-right: 1px solid #EAEAEC;
        height: 100%;
        line-height: 64px;
      }

      .type {
        flex: 1;
        margin-left: 10px;
        border-right: 1px solid #EAEAEC;
        height: 100%;
        line-height: 64px;
      }

      .unit {
        flex: 1;
        margin-left: 10px;
        border-right: 1px solid #EAEAEC;
        height: 100%;
        line-height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .price {
        height: 100%;
        width: 200px;
        line-height: 64px;
        border-right: 1px solid #EAEAEC;
        text-align: center;
      }

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

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

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