|
|
@@ -1,172 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="layout_container layout-horizontal">
|
|
|
- <div
|
|
|
- style="width: 300px; margin-right: 10px"
|
|
|
- class="layout_container layout_el-table"
|
|
|
- >
|
|
|
- <el-input
|
|
|
- v-model="deptName"
|
|
|
- placeholder="科室名称过滤"
|
|
|
- clearable
|
|
|
- prefix-icon="Search"
|
|
|
- ></el-input>
|
|
|
- <el-table
|
|
|
- :data="filterDepts"
|
|
|
- stripe
|
|
|
- highlight-current-row
|
|
|
- @row-click="queryTemplates"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="deptName"
|
|
|
- label="科室名称"
|
|
|
- width="300"
|
|
|
- ></el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="layout_main layout_card">
|
|
|
- <div class="layout_container layout-horizontal">
|
|
|
- <aside class="layout_el-table">
|
|
|
- <h3>套餐列表</h3>
|
|
|
- <el-table
|
|
|
- :data="deptTemplates"
|
|
|
- stripe
|
|
|
- highlight-current-row
|
|
|
- @row-click="handleClickTemplate"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="套餐名称"
|
|
|
- width="120"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="tcFee"
|
|
|
- label="套餐价格"
|
|
|
- width="80"
|
|
|
- ></el-table-column>
|
|
|
- </el-table>
|
|
|
- </aside>
|
|
|
- <div
|
|
|
- class="layout_main"
|
|
|
- style="display: flex; justify-content: center; align-items: center"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <img
|
|
|
- style="width: 240px; height: 240px"
|
|
|
- :src="currentThumbPath"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <el-upload
|
|
|
- ref="upload"
|
|
|
- :action="uploadTemplateThumbUrl"
|
|
|
- :limit="1"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :auto-upload="false"
|
|
|
- :data="thumb"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :on-change="handleSelectPic"
|
|
|
- :on-success="onUploadComplete"
|
|
|
- :on-error="onUploadComplete"
|
|
|
- >
|
|
|
- <template #trigger>
|
|
|
- <el-button type="primary">选择图片</el-button>
|
|
|
- </template>
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
- <el-button type="success" @click="submitUpload">
|
|
|
- 上传到服务器
|
|
|
- </el-button>
|
|
|
- <template #tip>
|
|
|
- <div class="el-upload__tip">
|
|
|
- 请选择小于 1Mb 的 jpg/png 格式的图片。
|
|
|
- </div>
|
|
|
- <div class="el-upload__tip text-red">
|
|
|
- 限制选择一张，新选择的图片会覆盖旧图片。
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import { ElMessage, genFileId } from "element-plus";
|
|
|
-import {
|
|
|
- queryAllDepartment,
|
|
|
- queryTcByDepartment,
|
|
|
-} from "@/api/outpatient/tc-template";
|
|
|
-import env from "@/utils/setting";
|
|
|
-
|
|
|
-const uploadTemplateThumbUrl = env.VITE_UPLOAD_TEMPLATE_THUMB;
|
|
|
-
|
|
|
-const deptName = ref("");
|
|
|
-const allDepts = ref([]);
|
|
|
-const filterDepts = computed(() => {
|
|
|
- return allDepts.value.filter(item => {
|
|
|
- return item.deptName.indexOf(deptName.value) !== -1;
|
|
|
- });
|
|
|
-});
|
|
|
-
|
|
|
-const deptTemplates = ref([]);
|
|
|
-
|
|
|
-const queryTemplates = row => {
|
|
|
- queryTcByDepartment(row).then(res => {
|
|
|
- deptTemplates.value = res;
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const currentThumbPath = ref("");
|
|
|
-const handleClickTemplate = row => {
|
|
|
- currentThumbPath.value = row.thumbPath;
|
|
|
- thumb.value.templateId = row.templateId;
|
|
|
-};
|
|
|
-
|
|
|
-const thumb = ref({
|
|
|
- templateId: null,
|
|
|
-});
|
|
|
-const upload = ref(null);
|
|
|
-
|
|
|
-const handleSelectPic = (uploadFile, uploadFiles) => {
|
|
|
- currentThumbPath.value = URL.createObjectURL(uploadFile.raw);
|
|
|
-};
|
|
|
-
|
|
|
-const beforeAvatarUpload = rawFile => {
|
|
|
- if (thumb.value.templateId === null) {
|
|
|
- ElMessage.error("请先选择套餐！");
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
|
|
|
- ElMessage.error("请选择jpg/png格式的图片！");
|
|
|
- return false;
|
|
|
- } else if (rawFile.size / 1024 / 1024 > 1) {
|
|
|
- ElMessage.error("图片大小不能超过 1MB！");
|
|
|
- return false;
|
|
|
- }
|
|
|
- return true;
|
|
|
-};
|
|
|
-
|
|
|
-const handleExceed = files => {
|
|
|
- upload.value.clearFiles();
|
|
|
- const file = files[0];
|
|
|
- file.uid = genFileId();
|
|
|
- upload.value.handleStart(file);
|
|
|
-};
|
|
|
-
|
|
|
-const submitUpload = () => {
|
|
|
- upload.value.submit();
|
|
|
-};
|
|
|
-
|
|
|
-const onUploadComplete = res => {
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("上传成功。");
|
|
|
- } else {
|
|
|
- ElMessage.error(res);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- queryAllDepartment().then(res => {
|
|
|
- allDepts.value = res;
|
|
|
- });
|
|
|
-});
|
|
|
-</script>
|
