333 lines
12 KiB
Vue
333 lines
12 KiB
Vue
<!-- 处方库 -->
|
||
<template>
|
||
<div class="prescription-library">
|
||
<el-card class="!border-none" shadow="never">
|
||
<el-form class="mb-[-16px]" :model="formData" inline>
|
||
<el-form-item class="w-[280px]" label="处方名称">
|
||
<el-input
|
||
v-model="formData.prescription_name"
|
||
placeholder="请输入处方名称"
|
||
clearable
|
||
@keyup.enter="resetPage"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item class="w-[200px]" label="是否公开">
|
||
<el-select v-model="formData.is_public" placeholder="全部" clearable>
|
||
<el-option label="全部" :value="''" />
|
||
<el-option label="仅自己可见" :value="0" />
|
||
<el-option label="所有人可见" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||
<el-button @click="resetParams">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card v-loading="pager.loading" class="mt-4 !border-none" shadow="never">
|
||
<el-button type="primary" @click="handleAdd">
|
||
<template #icon>
|
||
<icon name="el-icon-Plus" />
|
||
</template>
|
||
新增处方
|
||
</el-button>
|
||
|
||
<div class="mt-4">
|
||
<el-table :data="pager.lists" size="large">
|
||
<el-table-column label="ID" prop="id" min-width="60" />
|
||
<el-table-column label="处方名称" prop="prescription_name" min-width="200" show-overflow-tooltip />
|
||
<el-table-column label="药材数量" min-width="100">
|
||
<template #default="{ row }">
|
||
{{ row.herbs?.length || 0 }}味
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="药材明细" min-width="300" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
<span v-if="row.herbs && row.herbs.length > 0">
|
||
{{ row.herbs.map((h: any) => `${h.name} ${h.dosage}g`).join('、') }}
|
||
</span>
|
||
<span v-else class="text-gray-400">暂无药材</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否公开" min-width="120">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.is_public ? 'success' : 'info'">
|
||
{{ row.is_public ? '所有人可见' : '仅自己可见' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建人" prop="creator_name" min-width="100" />
|
||
<el-table-column label="创建时间" prop="create_time" min-width="160" />
|
||
<el-table-column label="操作" width="180" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link @click="handleView(row)">
|
||
查看
|
||
</el-button>
|
||
<el-button type="primary" link @click="handleEdit(row)">
|
||
编辑
|
||
</el-button>
|
||
<el-button type="danger" link @click="handleDelete(row.id)">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<div class="flex mt-4 justify-end">
|
||
<pagination v-model="pager" @change="getLists" />
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 新增/编辑弹窗 -->
|
||
<el-dialog
|
||
v-model="showEdit"
|
||
:title="editMode === 'add' ? '新增处方' : editMode === 'edit' ? '编辑处方' : '查看处方'"
|
||
width="800px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="editForm"
|
||
:rules="rules"
|
||
label-width="120px"
|
||
:disabled="editMode === 'view'"
|
||
>
|
||
<el-form-item label="处方名称" prop="prescription_name">
|
||
<el-input
|
||
v-model="editForm.prescription_name"
|
||
placeholder="请输入处方名称，例如：六味地黄丸、补中益气汤"
|
||
maxlength="100"
|
||
show-word-limit
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="药材配方" prop="herbs" required>
|
||
<div class="w-full">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="addHerb"
|
||
:disabled="editMode === 'view'"
|
||
>
|
||
添加药材
|
||
</el-button>
|
||
<el-table :data="editForm.herbs" class="mt-2" border>
|
||
<el-table-column label="序号" type="index" width="60" />
|
||
<el-table-column label="药材名称" min-width="200">
|
||
<template #default="{ row }">
|
||
<el-input
|
||
v-model="row.name"
|
||
placeholder="请输入药材名称"
|
||
:disabled="editMode === 'view'"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="剂量(克)" min-width="150">
|
||
<template #default="{ row }">
|
||
<el-input-number
|
||
v-model="row.dosage"
|
||
:min="0"
|
||
:precision="1"
|
||
:step="0.5"
|
||
placeholder="剂量"
|
||
class="w-full"
|
||
:disabled="editMode === 'view'"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="80" v-if="editMode !== 'view'">
|
||
<template #default="{ $index }">
|
||
<el-button
|
||
type="danger"
|
||
link
|
||
@click="removeHerb($index)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否公开" prop="is_public">
|
||
<el-switch
|
||
v-model="editForm.is_public"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
active-text="所有人可见"
|
||
inactive-text="仅自己可见"
|
||
/>
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
勾选后，所有医生都可以查看和使用此处方模板
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer v-if="editMode !== 'view'">
|
||
<el-button @click="showEdit = false">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmit" :loading="submitLoading">
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="prescriptionLibrary">
|
||
import {
|
||
prescriptionLibraryLists,
|
||
prescriptionLibraryAdd,
|
||
prescriptionLibraryEdit,
|
||
prescriptionLibraryDelete
|
||
} from '@/api/tcm'
|
||
import { usePaging } from '@/hooks/usePaging'
|
||
import feedback from '@/utils/feedback'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
prescription_name: '',
|
||
is_public: ''
|
||
})
|
||
|
||
const showEdit = ref(false)
|
||
const editMode = ref<'add' | 'edit' | 'view'>('add')
|
||
const submitLoading = ref(false)
|
||
const formRef = ref<FormInstance>()
|
||
|
||
// 编辑表单
|
||
const editForm = reactive({
|
||
id: 0,
|
||
prescription_name: '',
|
||
herbs: [] as Array<{ name: string; dosage: number }>,
|
||
is_public: 0
|
||
})
|
||
|
||
// 表单验证规则
|
||
const rules: FormRules = {
|
||
prescription_name: [
|
||
{ required: true, message: '请输入处方名称', trigger: 'blur' }
|
||
]
|
||
}
|
||
|
||
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||
fetchFun: prescriptionLibraryLists,
|
||
params: formData
|
||
})
|
||
|
||
// 添加药材
|
||
const addHerb = () => {
|
||
editForm.herbs.push({
|
||
name: '',
|
||
dosage: 0
|
||
})
|
||
}
|
||
|
||
// 删除药材
|
||
const removeHerb = (index: number) => {
|
||
editForm.herbs.splice(index, 1)
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
editForm.id = 0
|
||
editForm.prescription_name = ''
|
||
editForm.herbs = []
|
||
editForm.is_public = 0
|
||
}
|
||
|
||
// 新增处方
|
||
const handleAdd = () => {
|
||
resetForm()
|
||
editMode.value = 'add'
|
||
showEdit.value = true
|
||
}
|
||
|
||
// 查看处方
|
||
const handleView = (row: any) => {
|
||
editMode.value = 'view'
|
||
editForm.id = row.id
|
||
editForm.prescription_name = row.prescription_name || ''
|
||
editForm.herbs = row.herbs ? JSON.parse(JSON.stringify(row.herbs)) : []
|
||
editForm.is_public = row.is_public ?? 0
|
||
showEdit.value = true
|
||
}
|
||
|
||
// 编辑处方
|
||
const handleEdit = (row: any) => {
|
||
editMode.value = 'edit'
|
||
editForm.id = row.id
|
||
editForm.prescription_name = row.prescription_name || ''
|
||
editForm.herbs = row.herbs ? JSON.parse(JSON.stringify(row.herbs)) : []
|
||
editForm.is_public = row.is_public ?? 0
|
||
showEdit.value = true
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
if (!formRef.value) return
|
||
|
||
await formRef.value.validate()
|
||
|
||
// 验证药材
|
||
if (!editForm.herbs || editForm.herbs.length === 0) {
|
||
feedback.msgError('请至少添加一味药材')
|
||
return
|
||
}
|
||
|
||
for (let i = 0; i < editForm.herbs.length; i++) {
|
||
const herb = editForm.herbs[i]
|
||
if (!herb.name || !herb.name.trim()) {
|
||
feedback.msgError(`第${i + 1}味药材名称不能为空`)
|
||
return
|
||
}
|
||
if (!herb.dosage || herb.dosage <= 0) {
|
||
feedback.msgError(`第${i + 1}味药材剂量必须大于0`)
|
||
return
|
||
}
|
||
}
|
||
|
||
submitLoading.value = true
|
||
|
||
try {
|
||
const params = { ...editForm }
|
||
|
||
if (editMode.value === 'add') {
|
||
await prescriptionLibraryAdd(params)
|
||
feedback.msgSuccess('添加成功')
|
||
} else {
|
||
await prescriptionLibraryEdit(params)
|
||
feedback.msgSuccess('编辑成功')
|
||
}
|
||
|
||
showEdit.value = false
|
||
getLists()
|
||
} catch (error) {
|
||
console.error(error)
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 删除处方
|
||
const handleDelete = async (id: number) => {
|
||
await feedback.confirm('确定要删除该处方吗？')
|
||
await prescriptionLibraryDelete({ id })
|
||
feedback.msgSuccess('删除成功')
|
||
getLists()
|
||
}
|
||
|
||
onMounted(() => {
|
||
getLists()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.prescription-library {
|
||
padding: 20px;
|
||
}
|
||
</style>
|