|
|
@@ -0,0 +1,343 @@
|
|
|
+<template>
|
|
|
+ <Dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="itemTitle"
|
|
|
+ width="70%"
|
|
|
+ class="form-tag-dialog life-care-plan-form"
|
|
|
+ @close="handleClosed"
|
|
|
+ scroll
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="dataForm"
|
|
|
+ :rules="dataRule"
|
|
|
+ label-width="80px"
|
|
|
+ :toggleType="isDetail"
|
|
|
+ >
|
|
|
+ <div class="info-title">基本信息</div>
|
|
|
+ <div class="info-wrap">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" :xs="24">
|
|
|
+ <el-form-item label="长者姓名" prop="elderId">
|
|
|
+ <SelectElder
|
|
|
+ v-model="dataForm.elderId"
|
|
|
+ @elder="handleElder"
|
|
|
+ :style="[{ width: dataForm.id ? '30%' : '100%' }]"
|
|
|
+ :toggleType="!!dataForm.id"
|
|
|
+ />
|
|
|
+ <span v-show="dataForm.id">
|
|
|
+ {{ dataForm.bedName }} {{ dataForm.nurseLevelName }}
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" :xs="24">
|
|
|
+ <el-form-item label="床位号" prop="bedName">
|
|
|
+ <el-input v-if="!isDetail" v-model="dataForm.bedName" disabled/>
|
|
|
+ <el-text v-else>{{dataForm.bedName}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12" :xs="24">
|
|
|
+ <el-form-item label="护理等级" prop="nurseLevelName">
|
|
|
+ <el-input v-if="!isDetail" v-model="dataForm. nurseLevelName" disabled/>
|
|
|
+ <el-text v-else>{{dataForm.nurseLevelName}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" :xs="24">
|
|
|
+ <el-form-item label="生效日期" prop="effectiveDate">
|
|
|
+ <TgDatePicker v-model="dataForm.effectiveDate" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="info-title">护理项目</div>
|
|
|
+ <span v-show="dataForm.elderId">
|
|
|
+ <el-button type="primary" class="left" @click="handleAdd" v-if="!isDetail">
|
|
|
+ <Icon icon="ep:zoom-in" class="mr-5px" />添加项目
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="info-wrap">
|
|
|
+ <el-row>
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="24"
|
|
|
+ :md="24"
|
|
|
+ :lg="24"
|
|
|
+ class="mb5"
|
|
|
+ v-for="(p, i) in dataForm.items"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <div class="border item-row">
|
|
|
+ <div class="item-left">
|
|
|
+ <el-checkbox
|
|
|
+ :label="p.nurseItemName"
|
|
|
+ v-model="p.checked"
|
|
|
+ @change="(arg) => handleChangeCheckBox(arg, p)"
|
|
|
+ v-if="!isDetail"
|
|
|
+ />
|
|
|
+ <div v-else class="itemName">{{ p.nurseItemName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="handleClosed">取消</el-button>
|
|
|
+ <el-button v-loading="formLoading" type="primary" @click="submitForm" v-if="!isDetail"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
+ <lifeItem ref="itemRef" @success="getItemList" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ createNursingPlan,
|
|
|
+ updateNursingPlan,
|
|
|
+ getNursingPlanById,
|
|
|
+ findNurseItemListByName
|
|
|
+} from '@/api/elderly/nursing'
|
|
|
+import lifeItem from './life-item-dialog.vue'
|
|
|
+import { planType } from '../types'
|
|
|
+
|
|
|
+defineOptions({ name: 'LifeCarePlanForm' })
|
|
|
+
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const state = reactive<planType>({
|
|
|
+ dataForm: {
|
|
|
+ id: '',
|
|
|
+ elderId: '',
|
|
|
+ elderName: '',
|
|
|
+ bedName: '',
|
|
|
+ nurseLevelName: '',
|
|
|
+ effectiveDate: '',
|
|
|
+ items: [],
|
|
|
+ extraItems: [],
|
|
|
+ },
|
|
|
+ dataRule: {
|
|
|
+ elderId: [{ required: true, message: '长者姓名不能为空', trigger: 'blur' }],
|
|
|
+ effectiveDate: [{ required: true, message: '生效日期不能为空', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+})
|
|
|
+const { dataForm, dataRule } = toRefs(state)
|
|
|
+const resetFormField = reactive({ ...dataForm.value })
|
|
|
+const route = useRoute()
|
|
|
+const formLoading = ref(false)
|
|
|
+const isDetail = ref(false)
|
|
|
+
|
|
|
+// 弹窗标题
|
|
|
+const itemTitle = computed(() => {
|
|
|
+ return isDetail.value ? '详情' : !dataForm.value.id ? '新增' : '修改'
|
|
|
+})
|
|
|
+
|
|
|
+/** 打开弹窗 */
|
|
|
+const open = async (id, detail) => {
|
|
|
+ dataForm.value.id=''
|
|
|
+ dialogVisible.value = true
|
|
|
+ isDetail.value = detail
|
|
|
+ if (id) {
|
|
|
+ const res = await getNursingPlanById(id)
|
|
|
+ // 默认勾选护理项目
|
|
|
+ res.items.map((item) => {
|
|
|
+ item.checked = true
|
|
|
+ })
|
|
|
+ res.extraItems.map((item) => {
|
|
|
+ item.checked = true
|
|
|
+ })
|
|
|
+ // 匹配额外项目价格
|
|
|
+ dataForm.value = res
|
|
|
+ await formatExtraItem()
|
|
|
+ dataForm.value.items = res.items?.length > 0 ? res.items : res.extraItems
|
|
|
+ console.log('dataForm.value', dataForm.value)
|
|
|
+ }
|
|
|
+}
|
|
|
+defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
|
|
+
|
|
|
+const formatExtraItem = async () => {
|
|
|
+ if (dataForm.value.extraItems.length) {
|
|
|
+ const res = await findNurseItemListByName({
|
|
|
+ categoryTypeName: '生活护理',
|
|
|
+ nurseItemName: ''
|
|
|
+ })
|
|
|
+ dataForm.value.extraItems.map((e) => {
|
|
|
+ res.map((r) => {
|
|
|
+ if (e.nurseItemId == r.id) {
|
|
|
+ e.price = r.price
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const handleClosed = () => {
|
|
|
+ dataForm.value = {...resetFormField}
|
|
|
+ dialogVisible.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const itemRef = ref()
|
|
|
+const handleAdd = () => {
|
|
|
+ itemRef.value.open(dataForm.value.items)
|
|
|
+}
|
|
|
+
|
|
|
+const getItemList = (val) => {
|
|
|
+ // 添加的内容放到护理项目中
|
|
|
+ val.map((item) => {
|
|
|
+ dataForm.value.items.push({
|
|
|
+ nurseItemId: item.id,
|
|
|
+ nurseItemName: item.itemName,
|
|
|
+ frequency: 1,
|
|
|
+ frequencyUnit: item.frequency,
|
|
|
+ operatingMode: item.operatingMode,
|
|
|
+ checked: true,
|
|
|
+ price: item.price,
|
|
|
+ isExtra: item.type == 1 ? 1 : 0,
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 选择长者
|
|
|
+const handleElder = async (item) => {
|
|
|
+ dataForm.value.elderName = item.elderName
|
|
|
+ dataForm.value.bedName = item.bedName
|
|
|
+ dataForm.value.nurseLevelName = item.nurseLevelName
|
|
|
+}
|
|
|
+
|
|
|
+const handleChangeCheckBox = (val, item) => {
|
|
|
+ if (!val) {
|
|
|
+ const index = dataForm.value.items.findIndex((p) => item.nurseItemId == p.nurseItemId)
|
|
|
+ dataForm.value.items.splice(index, 1)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const formRef = ref()
|
|
|
+const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
|
|
+const submitForm = async () => {
|
|
|
+ // 校验表单
|
|
|
+ if (!formRef.value) return
|
|
|
+ const valid = await formRef.value.validate()
|
|
|
+ if (!valid) return
|
|
|
+
|
|
|
+
|
|
|
+ try {
|
|
|
+ formLoading.value = true
|
|
|
+ const params = {
|
|
|
+ type: route.path.indexOf('medical-care-plan') > -1 ? 2 : 1, // 2:医疗护理 1 生活护理,
|
|
|
+ ...dataForm.value,
|
|
|
+ }
|
|
|
+ const res = params.id
|
|
|
+ ? await updateNursingPlan(params)
|
|
|
+ : await createNursingPlan(params)
|
|
|
+ if (res) {
|
|
|
+ message.success(t('common.updateSuccess'))
|
|
|
+ handleClosed()
|
|
|
+ // 发送操作成功的事件
|
|
|
+ emit('success')
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.life-care-plan-form {
|
|
|
+ .sInput {
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid #999;
|
|
|
+ outline: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .itemName {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ // .border {
|
|
|
+ // padding: 1px 11px;
|
|
|
+ // box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
|
|
|
+ // border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
|
+ // }
|
|
|
+ .item-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .item-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 32px;
|
|
|
+ padding: 1px 11px;
|
|
|
+ flex: 1;
|
|
|
+ box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
|
|
|
+ border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
|
+ }
|
|
|
+ .item-meta {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .item-time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .time-label {
|
|
|
+ white-space: nowrap;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ }
|
|
|
+ .detail-time {
|
|
|
+ color: var(--el-text-color-regular);
|
|
|
+ }
|
|
|
+ .border-warning {
|
|
|
+ border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
|
+ box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-color-warning)) inset;
|
|
|
+ }
|
|
|
+ .warning {
|
|
|
+ background-color: var(--el-color-warning-light-9);
|
|
|
+ border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
|
+ box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-color-warning)) inset;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ position: absolute;
|
|
|
+ left: 150px;
|
|
|
+ top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown-link {
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.life-care-plan-form {
|
|
|
+ .extra {
|
|
|
+ .el-select__wrapper {
|
|
|
+ box-shadow: 0 0 0 1px var(--el-color-warning) inset;
|
|
|
+ background-color: var(--el-color-warning-light-9);
|
|
|
+ }
|
|
|
+ .el-input-number {
|
|
|
+ .el-input__wrapper {
|
|
|
+ box-shadow: 0 0 0 1px var(--el-color-warning) inset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|