xt-front/src/views/biz/management/complication/index.vue

<template>
  <div class="m-4">
    <div>
      <XTTitle title="并发症维护" />
      <div style="margin-top: 16px">
        <Row>
          <Col :span="6">
            <Card>
              <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="18">
            <Card :title="detailName">
              <template #extra>
                <Button shape="circle" v-auth="['bizSys:complication:edit']" @click="handleEditInfo"
                  ><Icon icon="icon-xt-details_edit_default|iconfont" :size="14"
                /></Button>
                <Button
                  shape="circle"
                  v-auth="['bizSys:complication:remove']"
                  @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"
                class="note-card"
                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 === '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>
      </div>
    </div>
    <ComplicationFormModal
      @register="registerComplicationModal"
      @success="handleComplicationSuccess"
    />
    <NoteFormModal @register="registerNoteModal" @success="handleAddNoteSuccess" />
  </div>
</template>

<script lang="ts" setup>
  import { Card, Row, Col, List, Input, Button } from 'ant-design-vue';

  import { XTTitle } from '/@/components/XTTitle/index';
  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,
    striped: 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,
    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,
      page: { current: 1, size: 999 },
      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>
  ::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;
  }

  ::v-deep(.ant-btn-link) {
    color: rgb(61 65 85 / 100%);
  }

  ::v-deep(.ant-card) {
    height: 800px;
    overflow: auto;
  }

  ::v-deep(.ant-table-body) {
    height: 460px !important;
  }

  .note-card {
    border: 0;
    height: 520px !important;

    ::v-deep(.ant-card-body) {
      height: 500px;
    }
  }

  ::v-deep(.ant-table-tbody > tr > td) {
    text-align: left !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-left: 0 !important;
  }

  ::v-deep(.fan-basic-table .ant-table-wrapper table) {
    border: 0 !important;
  }

  ::v-deep(.ant-table-thead > tr > th) {
    text-align: left !important;
    color: #818694;
  }

  ::v-deep(.fan-basic-table-action.center) {
    justify-content: left !important;
  }
</style>