367 lines
14 KiB
Vue
367 lines
14 KiB
Vue
<template>
|
|
<!-- Modal -->
|
|
<a-modal v-model:visible="modalVisible" fullscreen :title="modalTitle" title-align="start" :footer="false"
|
|
@cancel="handleClose">
|
|
<div class="titlebox">
|
|
<div class="bar"></div>
|
|
<div class="name">基本信息</div>
|
|
</div>
|
|
<a-form :model="modalForm" :rules="rules" ref="modalFormRef" :auto-label-width="true" :disabled="modalSatus=='detail'">
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="avatar" label="药品名称：">
|
|
<a-select :style="{width:'300px'}" allow-search placeholder="请选择药品名称" v-model="modalForm.product_name"
|
|
:loading="loading" @change="changeMedince" @search="handList" :disabled="modalSatus=='edit'">
|
|
<a-option size="large" style="max-width:400px" v-for="item in medinceList" :key="item.product_platform_id"
|
|
:value="item.product_platform_id" :label="item.product_name">
|
|
{{item.product_name }}
|
|
</a-option>
|
|
</a-select>
|
|
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item field="avatar" label="药品规格：">
|
|
<span v-if="modalForm.product_spec">{{modalForm.product_spec}} </span>
|
|
<span v-else>选择药品后展示</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
</a-row>
|
|
<a-row :gutter="24" >
|
|
<a-col :span="12">
|
|
<a-form-item field="idCard" label="药品编码：" >
|
|
<div class="cardNum" v-if="modalForm.product_pharmacy_code">{{modalForm.product_pharmacy_code}}</div>
|
|
<span v-else>选择药品后展示</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item field="idCard" label="药品库存：" >
|
|
<div class="box" >
|
|
|
|
<div class="cardNum" v-if="modalForm.stock || modalForm.stock===0 ">{{modalForm.stock}}</div>
|
|
<span v-else>选择药品后展示</span>
|
|
</div>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<!--<a-row :gutter="24" >
|
|
<a-col :span="12">
|
|
<a-form-item field="idCard" label="药品价格：" >
|
|
<div class="cardNum">{{modalForm.product_price}}元</div>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item field="idCard" label="药品类型：" >
|
|
<div class="box" >
|
|
<div class="cardNum">{{formatProductType(modalForm.product_type)}}</div>
|
|
</div>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row> -->
|
|
<a-row :gutter="24" >
|
|
<!-- <a-col :span="12">
|
|
<a-form-item field="idCard" label="批准文号：" >
|
|
<div class="cardNum">{{modalForm.license_number}}</div>
|
|
</a-form-item>
|
|
</a-col> -->
|
|
<a-col :span="12">
|
|
<a-form-item field="avatar" label="生产厂家：">
|
|
<span v-if="modalForm.manufacturer">{{modalForm.manufacturer}} </span>
|
|
<span v-else>选择药品后展示</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<!-- <a-row :gutter="24" >
|
|
|
|
<a-col :span="12">
|
|
<a-form-item field="idCard" label="处方平台编码：" >
|
|
<div class="cardNum">{{modalForm.product_platform_code}}</div>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-form-item field="avatar" label="创建时间：">
|
|
<span>{{modalForm.created_at}} </span>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row> -->
|
|
|
|
<a-divider />
|
|
<div class="titlebox">
|
|
<div class="bar"></div>
|
|
<div class="name">用法用量</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="packaging_unit" label="包装单位：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.packaging_unit" placeholder="请输入包装单位" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item field="single_use" label="单次服法：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.single_use" placeholder="请输入单次服法" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item field="single_unit" label="每次剂量：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.single_unit" placeholder="请输入每次剂量" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item field="frequency_use" label="使用频次：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.frequency_use" placeholder="请输入使用频次" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item field="available_days" label="用药天数：">
|
|
<a-input-number :style="{ width: '200px' }" v-model="modalForm.available_days" :min="1" placeholder="请输入用药天数" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :span="12">
|
|
<a-form-item field="product_type" label="药品类型：">
|
|
<a-select :style="{width:'200px'}" v-model="modalForm.product_type" placeholder="请选择药品类型">
|
|
<a-option :value="0">未知</a-option>
|
|
<a-option :value="1" >中成药</a-option>
|
|
<a-option :value="2">西药</a-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
<div class="titlebox" >
|
|
<div class="bar"></div>
|
|
<div class="name">药品通用名称</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="common_name" label="药品通用名称：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.common_name" placeholder="请输入药品通用名称" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
<div class="titlebox" >
|
|
<div class="bar"></div>
|
|
<div class="name">药品价格</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="product_price" label="药品价格（元）：">
|
|
<a-input-number :style="{ width: '200px' }" v-model="modalForm.product_price" :min="0" placeholder="请输入药品价格" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
<div class="titlebox" >
|
|
<div class="bar"></div>
|
|
<div class="name">批准文号</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="license_number" label="批准文号：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.license_number" placeholder="请输入批准文号" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
<div class="titlebox" >
|
|
<div class="bar"></div>
|
|
<div class="name">处方平台编码：</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="product_platform_code" label="处方平台编码：">
|
|
<a-input :style="{ width: '200px' }" v-model="modalForm.product_platform_code" placeholder="请输入处方平台编码" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
|
|
<div class="titlebox" >
|
|
<div class="bar"></div>
|
|
<div class="name">购买上限</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="prescription_num" label="购买上限：">
|
|
<a-input-number :style="{ width: '200px' }" v-model="modalForm.prescription_num" :min="1" placeholder="请输入购买上限" />
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
<div class="titlebox" >
|
|
<div class="bar"></div>
|
|
<div class="name">药品备注</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;">
|
|
<a-col :span="12">
|
|
<a-form-item field="prescription_num" label="药品备注：">
|
|
<a-textarea :auto-size="{minRows:2}" allow-clear
|
|
v-model="modalForm.product_remarks"
|
|
placeholder="请填写药品备注" :style="{ width: '400px' }"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider />
|
|
</a-form>
|
|
<div class="titlebox" v-if="modalSatus!='detail'">
|
|
<div class="bar"></div>
|
|
<div class="name">操作</div>
|
|
</div>
|
|
<a-row :gutter="24" style="margin-top: 35px;" v-if="modalSatus!='detail'">
|
|
<a-col :span="24">
|
|
<a-form-item field="" label="" no-style>
|
|
<a-space >
|
|
<a-button type="primary" v-has="'admin:sysMedinceList:onshelf'" @click="handAdd" v-if="modalSatus=='add'">上架</a-button>
|
|
<a-button type="primary" v-has="'admin:sysMedinceList:save'" @click="handEdit" v-else>保存</a-button>
|
|
<a-button type="primary" status="success" v-has="'admin:sysMedinceList:onshelfAgain'" @click="handleEditStatus(1)" v-if="modalForm.product_status==2 && modalSatus=='edit'">重新上架</a-button>
|
|
<a-button type="primary" v-has="'admin:sysMedinceList:offshelf'" status="warning" @click="handleEditStatus(2)" v-if="modalSatus=='edit' && modalForm.product_status==1">下架</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-modal>
|
|
</template>
|
|
<script setup>
|
|
import {ref,toRefs} from 'vue';
|
|
import {addSysMedince,editSysMedince,editMedinceStatus,getList,getMedinceDetail} from "@/api/medince/list";
|
|
import {formatProductType} from "@/utils/format"
|
|
import { Message } from '@arco-design/web-vue';
|
|
const props = defineProps({
|
|
// 是否显示
|
|
modalVisible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
modalTitle:{
|
|
type: String,
|
|
},
|
|
modalSatus:{
|
|
type: String
|
|
},
|
|
modalForm: {
|
|
type: Object,
|
|
},
|
|
});
|
|
const medinceList=ref([]);
|
|
const loading = ref(false);
|
|
const rules={
|
|
product_platform_id: [{ required: true, message: '请输入药品名称' }],
|
|
product_price: [{ required: true, message: '请输入药品价格' }],
|
|
product_platform_code: [{ required: true, message: '请输入处方平台编码' }],
|
|
license_number: [{ required: true, message: '请输入批准文号' }],
|
|
product_type: [{ required: true, message: '请选择药品类型' }],
|
|
common_name: [{ required: true, message: '请输入通用名称' }],
|
|
product_remarks: [{ required: true, message: '请输入药品备注' }],
|
|
packaging_unit: [{ required: true, message: '请输入包装单位' }],
|
|
single_use: [{ required: true, message: '请输入单次服法' }],
|
|
single_unit: [{ required: true, message: '请输入每次剂量' }],
|
|
frequency_use: [{ required: true, message: '请输入使用频次' }],
|
|
available_days: [{ required: true, message: '请输入用药天数' }],
|
|
prescription_num: [{ required: true, message: '请输入购买上限' }]
|
|
};
|
|
const emits = defineEmits(['familyVisibleChange','freshList']);
|
|
const {modalVisible,modalForm,modalSatus} = toRefs(props);
|
|
// Akiraka 20230210 关闭弹窗
|
|
const handleClose = () => {
|
|
emits('familyVisibleChange', false);
|
|
};
|
|
const handAdd=async()=>{
|
|
delete modalForm.value.avatar;
|
|
delete modalForm.value.product_id
|
|
modalForm.value.product_status=1;
|
|
const {code}=await addSysMedince(modalForm.value);
|
|
if(code==200){
|
|
Message.success("添加成功");
|
|
handleClose(true);
|
|
emits('freshList');
|
|
}
|
|
}
|
|
const handEdit=async()=>{
|
|
const {code}=await editSysMedince(modalForm.value.product_id,modalForm.value);
|
|
if(code==200){
|
|
Message.success("修改成功");
|
|
handleClose(true);
|
|
emits('freshList');
|
|
}
|
|
|
|
};
|
|
const handleEditStatus=async(status)=>{
|
|
const {code}=await editMedinceStatus(modalForm.value.product_id,{
|
|
product_status: status
|
|
});
|
|
if(code==200){
|
|
status==1?Message.success("上架成功"):Message.success("下架成功");
|
|
handleClose(true);
|
|
emits('freshList');
|
|
}
|
|
}
|
|
//详情
|
|
const handleDetail = async (product_platform_id) => {
|
|
const { code, data, message } = await getMedinceDetail(product_platform_id);
|
|
|
|
if (code == 200) {
|
|
Object.assign(modalForm, data);
|
|
modalForm.value.stock=data.stock;
|
|
}
|
|
};
|
|
const handList= async(value)=>{
|
|
loading.value=true;
|
|
const {code,data}=await getList({
|
|
product_name: value,
|
|
});
|
|
loading.value=false;
|
|
if(code==200){
|
|
medinceList.value=data;
|
|
}
|
|
}
|
|
const changeMedince = (value) => {
|
|
let arr = medinceList.value.filter((item) => item.product_platform_id == value);
|
|
modalForm.value.product_platform_id = arr[0].product_platform_id;
|
|
console.log(arr[0]);
|
|
modalForm.value.product_spec=arr[0].product_spec;
|
|
modalForm.value.product_pharmacy_code=arr[0].product_pharmacy_code;
|
|
modalForm.value.manufacturer=arr[0].manufacturer;
|
|
handleDetail(arr[0].product_platform_id)
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.cardNum {
|
|
width: 150px;
|
|
}
|
|
.arco-form-item-layout-horizontal:first-child,
|
|
.arco-form-item-layout-horizontal:nth-child(2) {
|
|
align-items: center;
|
|
}
|
|
.cellbox{
|
|
margin-top: 35px;
|
|
}
|
|
.cellbox .cell{
|
|
width:50%;
|
|
border-bottom:1px dashed #efefef;
|
|
margin-bottom: 20px;
|
|
}
|
|
.cellbox .cell:first-child{
|
|
border: none;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cert .arco-form-item-label-col {
|
|
flex: 0 0 8px !important;
|
|
}
|
|
|
|
</style> |