web/src/components/common/goods/GoodsDetail.vue

<template>
  <panel title="药品耗材">
    <el-table v-if="goodsDetail.length>0" :data="goodsDetail" max-height="150" style="width: 100%">
      <el-table-column prop="name" label="名称">
        <template #default="scope">
          <el-popover
              placement="top-start"
              trigger="hover"
              width="500"
              @show="getHilistInfo(scope.row)"
              @hide="colosInfo"

          >
            <template #reference>
              {{ scope.row.name }}
            </template>

            <div class="detail">
              <div style="display: flex;justify-content: space-between">
                <div style="font-size: 18px;font-weight: 500;color: #000">{{
                    hilistInfo.name
                  }}[{{ hilistInfo.json?.category || '-' }}]
                </div>
                <div>￥{{ scope.row.selectedPrice }}/{{ scope.row.selectedUnit }}</div>
              </div>
              <div style="display: flex;justify-content: space-between">
                <div>规格:{{ hilistInfo.json?.dosage_specifications || '-' }}</div>
                <div>生产厂商:{{ hilistInfo.json?.producer || '-' }}</div>
                <div>限价:{{ hilistInfo.json?.stock || '0' }}</div>
              </div>
              <div style="display: flex;justify-content: space-between">
                <div>批准文号:{{ hilistInfo.json?.approval_number || '-' }}</div>
                <div>本位码:{{ hilistInfo.json?.standard_code || '-' }}</div>
              </div>
              <div style="display: flex;justify-content: space-between">
                <div>限价:{{ hilistInfo.hilistPricUplmtAmt ? hilistInfo.hilistPricUplmtAmt : '无' }}</div>
                <div>限价类型:{{ hilistInfo.hilistLmtpricType ? hilistInfo.hilistLmtpricType : '无' }}</div>
              </div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="selectedPrice" label="单价">
        <template #default="scope">
          ￥{{ scope.row.selectedPrice }}
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量">
        <template #default="scope">
          <div v-if="props.status">
            <el-input-number v-model="scope.row.selectedNum" :min="0" @change="handleNumChange"
                             size="small"></el-input-number>
            <el-dropdown>
              <span style="line-height: 30px;margin-left: 10px">{{ scope.row.selectedUnit }}</span>
              <template #dropdown>
                <el-dropdown-menu v-if="scope.row.trdnFlag == 1">
                  <el-dropdown-item @click="selectUnit(scope.row,scope.row.packagingUnit)">{{ scope.row.packagingUnit }}
                  </el-dropdown-item>
                  <el-dropdown-item @click="selectUnit(scope.row,scope.row.minPackagingUnit)">
                    {{ scope.row.minPackagingUnit }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div v-else>
            <div>{{ scope.row.selectedNum }} {{ scope.row.selectedUnit }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template #default="scope">
          ￥{{ scope.row.selectedNum * scope.row.selectedPrice }}
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="props.status">
        <template #default="scope">
          <el-button type="danger" link @click="delGoods(scope.row)">X</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <div class="search">
        <SearchInput
            :request-api="goodsSearchApi"
            :show-config="goodsShowConfig"
            :placeholder="'请输入药名或者拼音码'"
            @selectedCallBack="goodsSelect"
            v-if="status"
            @focus="focus"
        ></SearchInput>
      </div>
      <span>合计：￥{{ getTotalPrice() }}</span>
    </div>
  </panel>
</template>
<script setup lang="ts">
import SearchInput from "@/components/SearchInput.vue";
import Panel from "@/components/common/Panel.vue";
import {ref} from "vue";
import {post} from "@/utils/request.ts";
import {ElMessage} from "element-plus";

const props = defineProps({
  status: {
    type: Boolean,
    default: 0
  }
})
const goodsDetail = defineModel<any>();
const delGoods = (item: any) => {
  goodsDetail.value = goodsDetail.value.filter((i: any) => i.id != item.id)
}

const goodsSearchApi = "goods/goods/search";
const goodsShowConfig = [
  {
    label: "项目名称",
    prop: "name",
  },
  {
    label: "项目类型",
    prop: "type",
  },
  {
    label: "售价",
    prop: "unitPrice",
  },
]
const goodsSelect = (row: any) => {
  row.selectedNum = 1
  row.selectedUnit = row.packagingUnit
  row.selectedPrice = row.unitPrice
  if (goodsDetail.value.find((i: any) => i.id == row.id)) {
    ElMessage.warning("数据已存在,只能加数量")
    return
  }
  goodsDetail.value.push(row)
  emit('totalPriceChange')
}
const selectUnit = (item: any, unit: any) => {
  item.selectedUnit = unit;
  if (unit == item.packagingUnit) {
    item.selectedPrice = item.unitPrice
  } else if (unit == item.minPackagingUnit) {
    item.selectedPrice = item.disassemblyPrice
  }
  emit('totalPriceChange')

}
const emit = defineEmits(["totalPriceChange", 'focus'])
const handleNumChange = () => {
  emit('totalPriceChange')
}
const getTotalPrice = () => {
  let totalPrice = 0;
  if (goodsDetail.value) {
    goodsDetail.value.forEach((item: any) => {
      totalPrice += item.selectedNum * item.selectedPrice
    })
  }

  return totalPrice;
}
const focus = (e: any) => {
  emit('focus', e)
}
const hilistInfo = ref<any>({})
const getHilistInfo = (item: any) => {
  if (item.hilistCode) {
    post("social/directory/getByCode", {code: item.hilistCode}).then((res: any) => {
      hilistInfo.value = res
    })
  }
}
const colosInfo = () => {
  hilistInfo.value = {}
}
</script>
<style scoped lang="scss">
:deep(.el-table__cell) {
  padding: 0 4px;
}

.bottom {
  text-align: right;
  border-top: 1px solid #EAEAEC;
  display: flex;

  .search {
    flex: 1;
  }
}
</style>