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

<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,
  } 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';
  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',
      },
    },
    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('批量导出');
    }
  }

  /**
   *并发症保存/修改/删除完成后回调函数
   */
  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>