回退print.vue页面

src/views/elderly/nursing/life-care-plan/Print.vue

@@ -0,0 +1,255 @@
+<template>
+  <Dialog v-model="dialogVisible" title="打印" width="70%" @close="handleClosed">
+    <div class="life-care-print" id="printArea">
+      <div class="title">{{ tenantName }}</div>
+      <div class="desc">护理信息</div>
+      <el-row :gutter="20">
+        <el-col :span="8" class="pb4">长者姓名：{{ dataForm.elderName }}</el-col>
+        <el-col :span="8" class="pb4"
+          >性别：{{ getDictLabel(DICT_TYPE.SYSTEM_USER_SEX, dataForm.elderSex) }}</el-col
+        >
+        <el-col :span="8" class="pb4">床位号：{{ dataForm.bedName }}</el-col>
+        <el-col :span="8" class="pb4">饮食类型：{{ dataForm.dietaryType }}</el-col>
+        <el-col :span="8" class="pb4">饮食方式：{{ dataForm.diet }}</el-col>
+        <el-col :span="8" class="pb4">饮食禁忌：{{ dataForm.dietaryTaboo }}</el-col>
+        <el-col class="pb4">风险防范：{{ dataForm.riskPrevention }}</el-col>
+        <el-col class="pb4">照护特点：{{ dataForm.nursingCharacteristics }}</el-col>
+      </el-row>
+      <p class="content-title">生活护理</p>
+      <el-row :gutter="30">
+        <el-col
+          :xs="24"
+          :sm="24"
+          :md="24"
+          :lg="12"
+          class="mb5"
+          v-for="(p, i) in dataForm.items"
+          :key="i"
+        >
+          <el-row>
+            <el-col :span="8">
+              <div :class="['itemName', { warning: p.isExtra }]">
+                <span>{{ p.nurseItemName }}</span>
+              </div>
+            </el-col>
+            <el-col :span="4">
+              <TgInputNumber
+                placeholder="请输入频次"
+                v-model="p.frequencyUnit"
+                :class="['itemName', { warning: p.isExtra }]"
+              />
+            </el-col>
+            <el-col :span="6">
+              <TgSelect
+                placeholder="请选择频次单位"
+                v-model="p.frequency"
+                :list="getDictOptions(DICT_TYPE.NURSING_FREQUENCY_TYPE)"
+                :class="['itemName', { warning: p.isExtra }]"
+              >
+                <el-option
+                  v-for="(dict, d) in getIntDictOptions(DICT_TYPE.NURSING_FREQUENCY_TYPE)"
+                  :key="d"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </TgSelect>
+            </el-col>
+            <el-col :span="6">
+              <TgSelect
+                placeholder="请选择操作方式"
+                v-model="p.operatingMode"
+                :list="getDictOptions(DICT_TYPE.NURSING_OPERATING)"
+                :class="['itemName', { warning: p.isExtra }]"
+              >
+                <el-option
+                  v-for="(dict, d) in getStrDictOptions(DICT_TYPE.NURSING_OPERATING)"
+                  :key="d"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </TgSelect>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <p class="content-title">医疗护理</p>
+      <el-row :gutter="30">
+        <el-col
+          :xs="24"
+          :sm="24"
+          :md="24"
+          :lg="12"
+          class="mb5"
+          v-for="(p, i) in dataForm.medicalItem"
+          :key="i"
+        >
+          <el-row>
+            <el-col :span="8">
+              <div :class="['itemName', { warning: p.isExtra }]">
+                <span>{{ p.nurseItemName }}</span>
+              </div>
+            </el-col>
+            <el-col :span="4">
+              <TgInputNumber
+                placeholder="请输入频次"
+                v-model="p.frequencyUnit"
+                :class="['itemName', { warning: p.isExtra }]"
+              />
+            </el-col>
+            <el-col :span="6">
+              <TgSelect
+                placeholder="请选择频次单位"
+                v-model="p.frequency"
+                :list="getDictOptions(DICT_TYPE.NURSING_FREQUENCY_TYPE)"
+                :class="['itemName', { warning: p.isExtra }]"
+              >
+                <el-option
+                  v-for="(dict, d) in getIntDictOptions(DICT_TYPE.NURSING_FREQUENCY_TYPE)"
+                  :key="d"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </TgSelect>
+            </el-col>
+            <el-col :span="6">
+              <TgSelect
+                placeholder="请选择操作方式"
+                v-model="p.operatingMode"
+                :list="getDictOptions(DICT_TYPE.NURSING_OPERATING)"
+                :class="['itemName', { warning: p.isExtra }]"
+              >
+                <el-option
+                  v-for="(dict, d) in getStrDictOptions(DICT_TYPE.NURSING_OPERATING)"
+                  :key="d"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </TgSelect>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+    <template #footer>
+      <el-button @click="handleClosed">关闭</el-button>
+      <el-button v-print="print" type="primary">打印</el-button>
+    </template>
+
+    <Print ref="printRef" />
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { useUserStore } from '@/store/modules/user'
+import {
+  DICT_TYPE,
+  getDictLabel,
+  getDictOptions,
+  getStrDictOptions,
+  getIntDictOptions
+} from '@/utils/dict'
+import Print from './Print.vue'
+defineOptions({ name: 'lifeCarePlanPrint' })
+const tenantName = useUserStore().getTenantName // 当前登录的编号
+const dialogVisible = ref(false)
+const state = reactive<{
+  dataForm: {
+    elderName?: string
+    elderSex?: number
+    bedName?: string
+    dietaryType?: string
+    diet?: string
+    riskPrevention?: string
+    dietaryTaboo?: string
+    nursingCharacteristics?: string
+    medicalItem?: {
+      isExtra: number
+      nurseItemName: string
+      frequencyUnit: string
+      frequency: string
+      operatingMode: string
+    }[]
+    items?: {
+      isExtra: number
+      nurseItemName: string
+      frequencyUnit: string
+      frequency: string
+      operatingMode: string
+    }[]
+  }
+}>({
+  dataForm: {}
+})
+const { dataForm } = toRefs(state)
+const resetFormField =  reactive({ ...dataForm.value })
+
+/** 打开弹窗 */
+const open = async (item) => {
+  dialogVisible.value = true
+  dataForm.value = item
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const handleClosed = () => {
+  dataForm.value = {...resetFormField}
+  dialogVisible.value = false
+}
+
+// 打印
+const print = {
+  id: 'printArea',
+  extraCss: '',
+  popTitle: '', // 打印配置页上方的标题
+  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+  preview: false, // 是否启动预览模式，默认是false
+  previewTitle: '对账单预览', // 打印预览的标题
+  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
+  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
+  previewBeforeOpenCallback() {
+    console.log('正在加载预览窗口！')
+  }, // 预览窗口打开之前的callback
+  previewOpenCallback() {
+    console.log('已经加载完预览窗口，预览打开了！')
+  }, // 预览窗口打开时的callback
+  beforeOpenCallback() {
+    console.log('开始打印之前！')
+  }, // 开始打印之前的callback
+  openCallback() {
+    console.log('执行打印了！')
+  }, // 调用打印时的callback
+  closeCallback() {
+    console.log('关闭了打印工具！')
+  }, // 关闭打印的callback(无法区分确认or取消)
+  clickMounted() {
+    console.log('点击v-print绑定的按钮了！')
+  },
+  standard: ''
+}
+</script>
+<style lang="scss" scoped>
+.life-care-print {
+  .title {
+    text-align: center;
+    font-size: 22px;
+    font-weight: bolder;
+    margin: 15px 0;
+  }
+  .desc {
+    font-size: 18px;
+    text-align: center;
+    margin: 10px 0;
+  }
+  .content-title {
+    font-size: 15px;
+  }
+  .itemName {
+    line-height: 30px;
+    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));
+  }
+  .warning {
+    box-shadow: 0 0 0 1px var(--el-color-warning) inset;
+    background-color: var(--el-color-warning-light-9);
+  }
+}
+</style>