275 lines
8.4 KiB
Vue
275 lines
8.4 KiB
Vue
<template>
|
|
<div class="header">
|
|
<el-button type="primary" round class="btn" @click="open_search" v-if="_type!=0">一键建档</el-button>
|
|
</div>
|
|
<div class="body">
|
|
<el-form style="width: 100%" label-width="auto">
|
|
<el-descriptions title="核心信息" border>
|
|
<el-descriptions-item label="名称">
|
|
<el-input v-model="edit_data.name"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="条形码">
|
|
<el-input v-model="edit_data.barcode"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="进价参考">
|
|
<el-input v-model="edit_data.purchaseUnitPrice">
|
|
<template #append>元</template>
|
|
</el-input>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="销售单价">
|
|
<el-input v-model="edit_data.unitPrice" type="number">
|
|
<template #append>元</template>
|
|
</el-input>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="产品分类" style="display: flex">
|
|
<el-select v-model="edit_data.cateId" placeholder="请选择" style="width: 70%">
|
|
<el-option
|
|
v-for="item in cate_list"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
|
|
</el-select>
|
|
<el-button @click="showCateEdit(true)">
|
|
<el-icon>
|
|
<Setting/>
|
|
</el-icon>
|
|
</el-button>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="医保编码">
|
|
<el-input v-model="edit_data.hilistCode" disabled/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="生产企业">
|
|
<el-input v-model="edit_data.producer"/>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions title="完善信息" border style="margin-top: 20px">
|
|
<el-descriptions-item label="国药准字">
|
|
<el-input v-model="edit_data.approvalCode"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="保质期">
|
|
<el-input v-model="edit_data.expiryTime" type="number">
|
|
<template #append>月</template>
|
|
</el-input>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="注册剂型">
|
|
<el-input v-model="edit_data.extra.regType" class="input"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="最小制剂单位">
|
|
<el-input v-model="edit_data.minPreparationUnit" class="input"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="最小包装单位">
|
|
<el-input v-model="edit_data.minPackagingUnit" class="input"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="最小包装数量">
|
|
<el-input v-model="edit_data.minPackagingNumber" type="number" class="input"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="药品标识码">
|
|
<el-popover
|
|
:visible="showPopover"
|
|
placement="bottom"
|
|
:width="200"
|
|
id="code-pop"
|
|
class="code-popo"
|
|
>
|
|
<div style="color: #6c6b6b;font-size: 12px">已关联({{ idCodeList ? idCodeList.length : 0 }})</div>
|
|
<Divider/>
|
|
<div class="item">
|
|
<div v-for="(item,index) in idCodeList" :key="index">
|
|
<div class="remove">
|
|
<el-icon @click="removeIdCode(item)" id="code-remove">
|
|
<Close/>
|
|
</el-icon>
|
|
</div>
|
|
<div style="width: 70%" class="text">
|
|
{{ item }}
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<template #reference>
|
|
<el-input v-model="idCode" id="code-input" @keydown.enter="addIdCode"
|
|
@click="clickIdCodeInput"></el-input>
|
|
</template>
|
|
</el-popover>
|
|
</el-descriptions-item>
|
|
|
|
<el-descriptions-item label="备注">
|
|
<el-input v-model="edit_data.remark" class="input"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="标签">
|
|
<el-input-tag
|
|
draggable
|
|
v-model="edit_data.tags"
|
|
class="input"
|
|
>
|
|
</el-input-tag>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-form>
|
|
</div>
|
|
<!-- 新增关闭按钮 -->
|
|
<div class="footer">
|
|
<el-button @click="save" type="primary">保存</el-button>
|
|
<el-button @click="exit" type="primary">关闭</el-button>
|
|
</div>
|
|
<Mask :width="800" :height="600" :is-show="show_search" >
|
|
<Search ref="searchRef" v-model="edit_data" @close="show_search = false"/>
|
|
</Mask>
|
|
<Mask :width="400" :height="600" :is-show="show_cate">
|
|
<Cate :type="_type" @close="cateCloseCallBack"/>
|
|
</Mask>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
.btn {
|
|
display: block;
|
|
width: 200px;
|
|
height: 40px;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.item{
|
|
margin-top: 5px;
|
|
.text{
|
|
font-weight: bold;
|
|
}
|
|
.remove {
|
|
font-size: 16px;
|
|
position: absolute;
|
|
right: 15px;
|
|
&:hover {
|
|
color: #2e7eb3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: relative;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
<script setup lang="ts">
|
|
|
|
import {nextTick, onMounted, onUnmounted, ref} from "vue";
|
|
import Mask from "@/components/common/Mask.vue";
|
|
import Search from "@/components/inventory/goods/Search.vue";
|
|
import {post} from "@/utils/request.ts";
|
|
import Cate from "@/components/inventory/goods/Cate.vue";
|
|
import {ElMessage} from "element-plus";
|
|
import Divider from "@/components/Divider.vue";
|
|
|
|
let show_search = ref(false);
|
|
let _type = ref(0);
|
|
let show_cate = ref(false)
|
|
|
|
const emit = defineEmits(['close'])
|
|
let edit_data: any = ref({extra: {}});
|
|
const idCode = ref("");
|
|
const showPopover = ref(false);
|
|
const idCodeList = ref<string[]>([]);
|
|
const addIdCode = () => {
|
|
let index = idCodeList.value.indexOf(idCode.value);
|
|
if (index != -1) {
|
|
ElMessage({
|
|
message: '编码已存在',
|
|
type: 'warning',
|
|
plain: true,
|
|
})
|
|
return
|
|
}
|
|
if (idCode.value.length < 7 && (_type.value == 1301 || _type.value == 1302)) {
|
|
ElMessage({
|
|
message: '最少7位',
|
|
type: 'warning',
|
|
plain: true,
|
|
})
|
|
return
|
|
}
|
|
if (idCode.value.length > 7 && (_type.value == 1301 || _type.value == 1302)) {
|
|
idCode.value = idCode.value.substring(0, 7);
|
|
}
|
|
idCodeList.value.push(idCode.value);
|
|
idCode.value = "";
|
|
showPopover.value = true;
|
|
|
|
}
|
|
const removeIdCode = (item: string) => {
|
|
let index = idCodeList.value.indexOf(item);
|
|
if (index != -1) {
|
|
idCodeList.value.splice(index, 1)
|
|
}
|
|
showPopover.value = idCodeList.value.length > 0;
|
|
}
|
|
const init = (type: number, id: number) => {
|
|
_type.value = type;
|
|
if (id != null && id != 0) {
|
|
post("goods/goods/get", {id: id}).then((res: any) => {
|
|
edit_data.value = res;
|
|
edit_data.value.tags = edit_data.value.tags ? edit_data.value.tags.split(",") : null;
|
|
idCodeList.value = edit_data.value.idCode ? edit_data.value.idCode.split(",") : [];
|
|
idCode.value = idCodeList.value.length > 0 ? idCodeList.value.length + "项" : "";
|
|
})
|
|
}
|
|
getCateList()
|
|
document.addEventListener("click", handleClickOutside);
|
|
|
|
};
|
|
defineExpose({init});
|
|
const searchRef = ref<InstanceType<typeof Search>>();
|
|
let open_search = () => {
|
|
show_search.value = true;
|
|
nextTick(() => {
|
|
searchRef.value?.init(_type.value);
|
|
});
|
|
}
|
|
let save = () => {
|
|
const data = JSON.parse(JSON.stringify(edit_data.value));
|
|
data.tags = data.tags ? data.tags.join(",") : null;
|
|
data.idCode = idCodeList.value.join(",");
|
|
data.type = _type.value;
|
|
post("goods/goods/save", data).then((res: any) => {
|
|
exit()
|
|
})
|
|
}
|
|
//获取分类列表
|
|
const cate_list: any = ref([]);
|
|
const getCateList = () => {
|
|
post("goods/cate/list", {type: _type.value}).then((res: any) => {
|
|
cate_list.value = res
|
|
})
|
|
}
|
|
const showCateEdit = (is_show: boolean) => {
|
|
show_cate.value = is_show
|
|
}
|
|
const cateCloseCallBack = () => {
|
|
show_cate.value = false
|
|
getCateList()
|
|
}
|
|
let exit = () => {
|
|
document.addEventListener("click", handleClickOutside);
|
|
emit('close');
|
|
}
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const target = event.target as HTMLElement;
|
|
if (!target.closest('#code-pop') && !target.closest('#code-input') && !target.closest('#code-remove')) {
|
|
showPopover.value = false;
|
|
idCode.value = idCodeList.value.length > 0 ? idCodeList.value.length + "项" : "";
|
|
}
|
|
}
|
|
const clickIdCodeInput = () => {
|
|
showPopover.value = true
|
|
idCode.value = ""
|
|
}
|
|
</script>
|
|
|
|
|