|
|
@@ -0,0 +1,368 @@
|
|
|
+<template>
|
|
|
+ <Card title="并发症维护" type="inner" class="main-card" size="default">
|
|
|
+ <Row>
|
|
|
+ <Col :span="6">
|
|
|
+ <Card style="height: 600px">
|
|
|
+ <Input
|
|
|
+ v-model:value="searchName"
|
|
|
+ placeholder="请输入并发症名称"
|
|
|
+ style="width: 70%; margin-bottom: 10px"
|
|
|
+ @change="handleSearch"
|
|
|
+ >
|
|
|
+ <template #prefix> <Icon icon="icon-search|iconfont" :size="14" /></template>
|
|
|
+ </Input>
|
|
|
+ <a-dropdown-button size="small">
|
|
|
+ <template #overlay>
|
|
|
+ <a-menu @click="handleMenuClick">
|
|
|
+ <a-menu-item key="1">添加并发症</a-menu-item>
|
|
|
+ <a-menu-item key="2">批量导入</a-menu-item>
|
|
|
+ <a-menu-item key="3">批量导出</a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </template>
|
|
|
+ </a-dropdown-button>
|
|
|
+ <List item-layout="horizontal" :data-source="complicationList">
|
|
|
+ <template #renderItem="{ item, index }">
|
|
|
+ <ListItem
|
|
|
+ @click="handleDetail(item, index)"
|
|
|
+ :key="index"
|
|
|
+ :class="{ actives: classIndex === index }"
|
|
|
+ >
|
|
|
+ <ListItemMeta>
|
|
|
+ <template #title>
|
|
|
+ {{ item.name }}
|
|
|
+ </template>
|
|
|
+ </ListItemMeta>
|
|
|
+ </ListItem>
|
|
|
+ </template>
|
|
|
+ </List>
|
|
|
+ </Card></Col
|
|
|
+ >
|
|
|
+ <Col :span="1" />
|
|
|
+ <Col :span="17">
|
|
|
+ <Card :title="detailName">
|
|
|
+ <template #extra>
|
|
|
+ <Button shape="circle" v-auth="['bizSys:wardInfo:add']" @click="handleEditInfo"
|
|
|
+ ><Icon icon="icon-xt-details_edit_default|iconfont" :size="14"
|
|
|
+ /></Button>
|
|
|
+ <Button
|
|
|
+ shape="circle"
|
|
|
+ v-auth="['bizSys:wardInfo:add']"
|
|
|
+ @click="handleDel(detailForm.id)"
|
|
|
+ style="margin-left: 20px"
|
|
|
+ ><Icon icon="icon-xt-details_delete_default|iconfont" :size="14"
|
|
|
+ /></Button>
|
|
|
+ </template>
|
|
|
+ <div class="mx-3 my-2">
|
|
|
+ <DescCard :showHead="false" type="touxi" :data="detailFromData" />
|
|
|
+ </div>
|
|
|
+ <Card
|
|
|
+ title="说明模板"
|
|
|
+ size="small"
|
|
|
+ style="border: 0"
|
|
|
+ headStyle="background: #FFFFFF;border: 0px;font-size: 14px !important;"
|
|
|
+ >
|
|
|
+ <template #extra
|
|
|
+ ><Button shape="circle" v-auth="['bizSys:wardInfo:add']" @click="handleAddNote"
|
|
|
+ ><Icon icon="icon-plus|iconfont" :size="14" /></Button
|
|
|
+ ></template>
|
|
|
+ <BasicTable @register="registerTable">
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <!-- <template v-if="column.key === 'disable'">
|
|
|
+ <Tag :color="formatDictColor(disableOptions, record.disable)">
|
|
|
+ {{ formatDictValue(disableOptions, record.disable) }}
|
|
|
+ </Tag>
|
|
|
+ </template> -->
|
|
|
+ <template v-if="column.key === 'action'">
|
|
|
+ <TableAction
|
|
|
+ :actions="[
|
|
|
+ {
|
|
|
+ auth: 'bizSys:complicationExplain:edit',
|
|
|
+ icon: 'icon-xt-details_edit_default|iconfont',
|
|
|
+ tooltip: '编辑',
|
|
|
+ onClick: handleEditNote.bind(null, record),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ auth: 'bizSys:complicationExplain:remove',
|
|
|
+ icon: 'icon-xt-details_delete_default|iconfont',
|
|
|
+ tooltip: '删除',
|
|
|
+ popConfirm: {
|
|
|
+ title: '是否删除此说明模板',
|
|
|
+ placement: 'left',
|
|
|
+ confirm: handleDelNote.bind(null, record),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </Card>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Card>
|
|
|
+ <ComplicationFormModal
|
|
|
+ @register="registerComplicationModal"
|
|
|
+ @success="handleComplicationSuccess"
|
|
|
+ />
|
|
|
+ <NoteFormModal @register="registerNoteModal" @success="handleAddNoteSuccess" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { Card, Row, Col, List, Input, Button } from 'ant-design-vue';
|
|
|
+ import Icon from '/@/components/Icon/src/Icon.vue';
|
|
|
+ import {
|
|
|
+ getComplicationList,
|
|
|
+ complicationById,
|
|
|
+ complicationDelById,
|
|
|
+ getNoteList,
|
|
|
+ complicationExplainDelById,
|
|
|
+ complicationExport,
|
|
|
+ } from '/@/api/biz/management/complication';
|
|
|
+ import { noteInfoColumns } from './data';
|
|
|
+ import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
+ import ComplicationFormModal from './complicationFormModal.vue';
|
|
|
+ import NoteFormModal from './noteFormModal.vue';
|
|
|
+ import DescCard from '/@/components/XTCard/src/DescCard.vue';
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ import { useModal } from '/@/components/Modal';
|
|
|
+ import { onBeforeMount, ref } from 'vue';
|
|
|
+ import { downloadByBase64 } from '/@/utils/file/download';
|
|
|
+ const { createConfirm, createMessage } = useMessage();
|
|
|
+ const ListItem = List.Item;
|
|
|
+ const ListItemMeta = List.Item.Meta;
|
|
|
+ const searchName = ref();
|
|
|
+ const complicationList = ref([]);
|
|
|
+ const classIndex = ref([]);
|
|
|
+ const detailName = ref('详细信息');
|
|
|
+ const detailForm = ref({
|
|
|
+ id: null,
|
|
|
+ });
|
|
|
+ const detailFromData = ref([
|
|
|
+ {
|
|
|
+ label: '并发症名',
|
|
|
+ value: '并发症名称',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '排序',
|
|
|
+ value: '1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '并发症描述',
|
|
|
+ value: '并发症描述有点长....',
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const [registerTable, { reload }] = useTable({
|
|
|
+ api: getNoteList,
|
|
|
+ rowKey: 'id',
|
|
|
+ columns: noteInfoColumns,
|
|
|
+ showIndexColumn: false,
|
|
|
+ formConfig: {
|
|
|
+ labelWidth: 120,
|
|
|
+ autoSubmitOnEnter: true,
|
|
|
+ baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
|
|
|
+ resetButtonOptions: {
|
|
|
+ preIcon: 'icon-delete|iconfont',
|
|
|
+ },
|
|
|
+ submitButtonOptions: {
|
|
|
+ preIcon: 'icon-search|iconfont',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pagination: false,
|
|
|
+ useSearchForm: false,
|
|
|
+ bordered: true,
|
|
|
+ actionColumn: {
|
|
|
+ width: 320,
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ },
|
|
|
+ beforeFetch: handleNoteBeforeFetch,
|
|
|
+ });
|
|
|
+
|
|
|
+ const [registerComplicationModal, { openModal: openComplicationModal }] = useModal();
|
|
|
+ const [registerNoteModal, { openModal: openNoteModal }] = useModal();
|
|
|
+ /**
|
|
|
+ * 页面加载前事件
|
|
|
+ */
|
|
|
+ onBeforeMount(async () => {
|
|
|
+ getDataList();
|
|
|
+ });
|
|
|
+ /**
|
|
|
+ * 获取并发症信息
|
|
|
+ */
|
|
|
+ async function getDataList(params?: object) {
|
|
|
+ const res = await getComplicationList({
|
|
|
+ ...params,
|
|
|
+ orders: [{ field: 'sort', direction: 'DESC' }],
|
|
|
+ });
|
|
|
+ complicationList.value = res.data;
|
|
|
+ if (complicationList.value && complicationList.value.length > 0) {
|
|
|
+ handleDetail(complicationList.value[0], 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 点击更多中的各个按钮触发
|
|
|
+ function handleMenuClick(e) {
|
|
|
+ if (e.key == 1) {
|
|
|
+ openComplicationModal(true, {
|
|
|
+ isUpdate: false,
|
|
|
+ });
|
|
|
+ } else if (e.key == 2) {
|
|
|
+ console.log('批量导入');
|
|
|
+ } else {
|
|
|
+ console.log('批量导出');
|
|
|
+ batchExport();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导出并发症
|
|
|
+ async function batchExport() {
|
|
|
+ const keys = [];
|
|
|
+ complicationList.value.forEach(item => {
|
|
|
+ keys.push(item.id);
|
|
|
+ });
|
|
|
+ debugger;
|
|
|
+ complicationExport(keys).then(res => {
|
|
|
+ if (res && res.fileName && res.base64) {
|
|
|
+ downloadByBase64(res.base64, res.fileName);
|
|
|
+ } else {
|
|
|
+ createMessage.error('获取导出文件失败!');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ *并发症保存/修改/删除完成后回调函数
|
|
|
+ */
|
|
|
+ function handleComplicationSuccess() {
|
|
|
+ if (searchName.value) {
|
|
|
+ handleSearch();
|
|
|
+ } else {
|
|
|
+ getDataList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 搜索并发症
|
|
|
+ */
|
|
|
+ function handleSearch() {
|
|
|
+ const searchVal = searchName.value;
|
|
|
+ getDataList({ name: searchVal });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ *点击并发症名称展示右侧详情
|
|
|
+ */
|
|
|
+ async function handleDetail(item, index) {
|
|
|
+ classIndex.value = index; // 点击的时改变点击并发症样式
|
|
|
+ if (item && item.id) {
|
|
|
+ const complication = await complicationById(item.id);
|
|
|
+ detailName.value = complication.name;
|
|
|
+ detailForm.value = complication;
|
|
|
+ detailFromData.value = [
|
|
|
+ {
|
|
|
+ label: '并发症名',
|
|
|
+ value: complication.name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '排序',
|
|
|
+ value: complication.sort,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '并发症描述',
|
|
|
+ value: complication.remark,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ reload();
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 打开编辑方法
|
|
|
+ */
|
|
|
+ function handleEditInfo() {
|
|
|
+ openComplicationModal(true, {
|
|
|
+ record: detailForm.value,
|
|
|
+ isUpdate: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 删除并发症操作
|
|
|
+ function handleDel(id) {
|
|
|
+ if (id) {
|
|
|
+ createConfirm({
|
|
|
+ iconType: 'warning',
|
|
|
+ title: '警告',
|
|
|
+ content: '是否需要删除此并发症',
|
|
|
+ onOk: async () => {
|
|
|
+ await complicationDelById([id]);
|
|
|
+ handleComplicationSuccess();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ createMessage.error('请选择要删除的并发症名称');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*******************说明模板相关方法 */
|
|
|
+ function handleAddNote() {
|
|
|
+ openNoteModal(true, {
|
|
|
+ id: detailForm.value.id,
|
|
|
+ isUpdate: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //打开说明模板编辑弹框
|
|
|
+ function handleEditNote(record) {
|
|
|
+ openNoteModal(true, {
|
|
|
+ record: record,
|
|
|
+ isUpdate: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //说明模板查询前事件
|
|
|
+ function handleNoteBeforeFetch(params) {
|
|
|
+ return {
|
|
|
+ ...params,
|
|
|
+ ids: detailForm.value.id,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 删除说明模板事件
|
|
|
+ async function handleDelNote(record) {
|
|
|
+ await complicationExplainDelById([record.id]);
|
|
|
+ createMessage.success('删除此说明模板成功');
|
|
|
+ reload();
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleAddNoteSuccess() {
|
|
|
+ reload();
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .main-card {
|
|
|
+ width: 100%;
|
|
|
+ height: 700px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.ant-btn-group-sm .ant-btn.ant-btn-icon-only) {
|
|
|
+ height: 32px !important;
|
|
|
+ width: 32px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.ant-list-item) {
|
|
|
+ border-bottom: 0 !important;
|
|
|
+ line-height: 50px;
|
|
|
+ padding-left: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actives {
|
|
|
+ background-color: rgb(246 248 250 / 100%);
|
|
|
+ border-left: 3px solid rgb(0 117 255 / 100%);
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ color: rgb(0 117 255 / 100%) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.ant-card-head-title) {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000a18;
|
|
|
+ }
|
|
|
+</style>
|