284 lines
9.2 KiB
Vue
284 lines
9.2 KiB
Vue
<template>
|
|
<panel title="药品耗材">
|
|
<div class="panel-content" style="padding: 0 24px 24px">
|
|
<el-table v-if="goodsDetail.length>0" :data="goodsDetail" max-height="300" style="width: 100%"
|
|
:header-cell-style="{ backgroundColor: '#F5FAFF' }">
|
|
<el-table-column prop="name" label="名称" width="400" :show-overflow-tooltip="showTooltip">
|
|
<template #default="scope">
|
|
<el-popover
|
|
v-if="!showTooltip"
|
|
placement="top-start"
|
|
trigger="hover"
|
|
width="600"
|
|
@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>
|
|
<span v-else>{{ scope.row.name }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="使用方法" width="200">
|
|
<template #default="scope">
|
|
<el-popover
|
|
placement="bottom"
|
|
title=""
|
|
:width="200"
|
|
trigger="click"
|
|
>
|
|
<template #reference>
|
|
<el-input v-model="usage" placeholder="使用方法" style="width: 100px"></el-input>
|
|
</template>
|
|
<Usage :usageObj="usageObj" @clickItem="clickItem"></Usage>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="selectedPrice" label="单价" width="200">
|
|
<template #default="scope">
|
|
￥{{ scope.row.selectedPrice }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="number" label="数量" width="250">
|
|
<template #default="scope">
|
|
<div v-if="props.status">
|
|
<el-input-number v-model="scope.row.selectedNum" ref="inputRef" :min="0"
|
|
@change="handleNumChange(scope.row)"
|
|
style="margin-right: 5px" size="small"></el-input-number>
|
|
<el-dropdown v-if="scope.row.trdnFlag == 1">
|
|
<span style="line-height: 30px;margin-left: 10px;cursor: pointer">{{ scope.row.selectedUnit }}</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<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>
|
|
<span v-else style="line-height: 30px;margin-left: 10px">{{ scope.row.selectedUnit }}</span>
|
|
</div>
|
|
<div v-else>
|
|
<div>{{ scope.row.selectedNum }} {{ scope.row.selectedUnit }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="小计">
|
|
<template #default="scope">
|
|
￥{{ Math.round(scope.row.selectedNum * scope.row.selectedPrice * 100) / 100 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" v-if="props.status">
|
|
<template #default="scope">
|
|
<el-button type="danger" link @click="delGoods(scope.row)">
|
|
<el-icon style="margin-right: 3px">
|
|
<Delete/>
|
|
</el-icon>
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="bottom" v-if="!statusDisabled">
|
|
<div class="search">
|
|
<SearchInput
|
|
style="height: 100%"
|
|
:request-api="goodsSearchApi"
|
|
:show-config="goodsShowConfig"
|
|
:placeholder="'请输入药名或者拼音码'"
|
|
@selectedCallBack="goodsSelect"
|
|
:disabled="!props.status"
|
|
@focus="focus"
|
|
:width="1000"
|
|
></SearchInput>
|
|
</div>
|
|
<span v-if="status" style="padding: 10px">合计：￥{{ getTotalPrice() }}</span>
|
|
</div>
|
|
</div>
|
|
</panel>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import SearchInput from "@/components/SearchInput.vue";
|
|
import Panel from "@/components/common/Panel.vue";
|
|
import {nextTick, onMounted, ref} from "vue";
|
|
import {post} from "@/utils/request.ts";
|
|
import {ElMessage} from "element-plus";
|
|
import {Delete} from "@element-plus/icons-vue";
|
|
import Usage from "./goodsDetail/Usage.vue"
|
|
import usageObj from "@/assets/config/directory/drugMedcWayCode.json"
|
|
import {API} from "@/assets/config/API.ts";
|
|
|
|
const props = defineProps({
|
|
status: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
statusDisabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const usage = ref('')
|
|
const showTooltip = ref(false);
|
|
const goodsDetail = defineModel<any>();
|
|
const delGoods = (item: any) => {
|
|
goodsDetail.value = goodsDetail.value.filter((i: any) => i.id != item.id)
|
|
}
|
|
|
|
const goodsSearchApi = API.Goods.Base.Search;
|
|
const goodsShowConfig = [
|
|
{
|
|
label: "项目名称",
|
|
prop: "name",
|
|
},
|
|
{
|
|
label: "规格",
|
|
prop: "specifications",
|
|
},
|
|
{
|
|
label: "库存",
|
|
prop: "inventory",
|
|
},
|
|
{
|
|
label: "价格",
|
|
prop: "unitPrice",
|
|
},
|
|
{
|
|
label: "厂家",
|
|
prop: "producer",
|
|
},
|
|
{
|
|
label: "效期",
|
|
prop: "lifespan",
|
|
},
|
|
{
|
|
label: "项目等级",
|
|
prop: "category",
|
|
},
|
|
{
|
|
label: "限制条件",
|
|
prop: "limit",
|
|
}
|
|
]
|
|
const inputRef = ref<any>()
|
|
const goodsSelect = (row: any) => {
|
|
row.selectedNum = 1
|
|
row.selectedUnit = row.packagingUnit
|
|
row.selectedPrice = row.unitPrice
|
|
row.shouldNumber = 1;
|
|
row.idCode = row.idCode ? row.idCode == "" ? null : row.idCode.split(",") : null
|
|
|
|
if (goodsDetail.value.find((i: any) => i.id == row.id)) {
|
|
ElMessage.warning("数据已存在,只能加数量")
|
|
goodsDetail.value.find((i: any) => i.id == row.id).selectedNum += 1
|
|
goodsDetail.value.find((i: any) => i.id == row.id).selectedPrice = row.unitPrice
|
|
emit('totalPriceChange')
|
|
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 = (row: any) => {
|
|
//应采数量
|
|
let shouldNumber = 0;
|
|
if (row.selectedUnit == row.packagingUnit) {
|
|
shouldNumber = row.selectedNum
|
|
} else {
|
|
shouldNumber = Math.ceil(row.selectedNum / row.minPackagingNumber)
|
|
}
|
|
row.shouldNumber = shouldNumber
|
|
|
|
emit('totalPriceChange')
|
|
}
|
|
const getTotalPrice = () => {
|
|
let totalPrice = 0;
|
|
if (goodsDetail.value) {
|
|
goodsDetail.value.forEach((item: any) => {
|
|
totalPrice += item.selectedNum * item.selectedPrice
|
|
totalPrice = Math.round(totalPrice * 100) / 100
|
|
})
|
|
}
|
|
|
|
return totalPrice;
|
|
}
|
|
const focus = (e: any) => {
|
|
emit('focus', e)
|
|
}
|
|
const hilistInfo = ref<any>({})
|
|
const getHilistInfo = (item: any) => {
|
|
if (item.hilistCode != null) {
|
|
post(API.Social.Directory.GetByCode, {code: item.hilistCode}).then((res: any) => {
|
|
if (!res) {
|
|
hilistInfo.value = {}
|
|
return
|
|
}
|
|
hilistInfo.value = res
|
|
})
|
|
}
|
|
}
|
|
const colosInfo = () => {
|
|
hilistInfo.value = {}
|
|
getTotalPrice()
|
|
emit('totalPriceChange')
|
|
}
|
|
const clickItem = (value: any) => {
|
|
usage.value = value
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
:deep(.el-table__cell) {
|
|
padding: 0 4px;
|
|
height: 36px;
|
|
}
|
|
|
|
.bottom {
|
|
text-align: right;
|
|
border-top: 1px solid #EAEAEC;
|
|
display: flex;
|
|
height: 36px;
|
|
align-items: center;
|
|
|
|
.search {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |