health.admin/src/components/ViewsEvaluation.vue

<script setup lang="ts">
import Swiper from '@/components/Swiper.vue';
import type { TagModel, PlanModel } from '@/model/system.model';
import { tagEditMethod, tagMethod, tagsSearchMethod } from '@/request/api/system.api';
import { useRequest } from 'alova/client';
import { type VxeFormListeners, type VxeFormProps, type VxeGridProps, VxeUI } from 'vxe-table';
import { statusLabel } from '@/model/options';

type FormModel = Partial<TagModel>;
type FollowModel = Partial<PlanModel>;

const defaultModel = {};

const props = defineProps<{ data: FormModel }>();
// const plain = defineProps<{ data: FollowModel }>();
const emits = defineEmits<{
  submit: [data?: TagModel];
}>();

const { loading, send: load } = useRequest(tagMethod, {
  immediate: false,
  initialData: props.data ?? defaultModel,
}).onSuccess(({ data }) => {
  formProps.data = { ...data };
});
const { loading: submitting, send: submit } = useRequest(tagEditMethod, {
  immediate: false,
}).onSuccess(({ data }) => {
  emits('submit');
});

const gridOptions = reactive<VxeGridProps<FormModel>>({
  border: true,
  showOverflow: true,
  width: window.innerWidth - 256,
  // height: 800,
  showHeader: false,
  columns: [{ field: 'title', title: '-' }],
  data: [
    { title: '日期', key: 'date', col0: '-' },
    { title: '好转', key: 'k1' },
    { title: '恶化', key: 'k2' },
    { title: '面', key: 'face' },
  ],
});

function load2(data = []) {
  const columns = gridOptions.columns;
  const rows = gridOptions.data;
  let col = columns.length;
  for (const item of data) {
    const field = `col${col}`;
    columns.push({
      field,
      title: `标题${col}`,
      slots: { default: 'cell' },
    });
    col++;
    for (let r = 0; r < rows.length; r++) {
      rows[r][field] = item[rows[r].key];
    }
  }
}

load2(
  Array.from({ length: 4 }, (_, i) => ({
    date: `2025/01/0${i}`,
    k1: `第${i + 1}项，col2字段`,
    k2: `第${i + 1}项，col3字段`,
    face: `https://vxeui.com/resource/img/fj577.jpg`,
  }))
);

onBeforeMount(() => {
  if (props.data?.tagId) load(props.data);
});
const value = ref<number>(1);
const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
});
function cellClickEvent({ row, column }, model?: TagModel) {
  console.log(row, column, row.title, row.title === '面', 'row===');
  if (row.title === '面') {
    // 判断当表头等于姓名字段时执行一个方法
    VxeUI.modal.open({
      escClosable: true,
      destroyOnClose: true,
      id: `swiper`,
      remember: true,
      storage: true,
      width: window.innerWidth - 256,
      slots: {
        default() {
          return h(Swiper, <any>{
            data: model,
            onSubmit(data: TagModel) {
              refresh(page.value);
              VxeUI.modal.close(`swiper`);
            },
          });
        },
      },
    });
  }
}
</script>
<template>
  <div>
    <div class="flex font-bold border-1 border-gray border-solid pt-1 pb-1">
      <div class="border-r border-r-2 border-r-gray border-r-solid pr-3 flex">
        <div class="mr-2">基本信息</div>
        <div class="mr-2">2024.09.29</div>
        孙明 男 28岁
      </div>
      <div class="border-r border-r-2 border-r-gray border-r-solid pr-3 pl-3">诊断：心火旺盛</div>
      <div class="pl-3">症状：难以入眠、头晕、心慌、麦轩、小便黄</div>
    </div>

    <vxe-grid class="reverse-table" v-bind="gridOptions" @cell-click="cellClickEvent">
      <template #cell="{ row, rowIndex, column }">
        <!--        {{row}}-{{rowIndex}}-->
        <a-image v-if="rowIndex === 3" :src="row[column.field]"></a-image>
        <template v-else>{{ row[column.field] }}</template>
      </template>

      <template #right>
        <div class="pl-6 pr-4">
          <div style="width: 160px" class="border-1 border-gray font-bold mt-2 mb-3 text-sm">随访结果评估</div>
          <div style="width: 160px" class="border-1 border-gray font-bold mt-2 mb-3">疾病转归</div>
          <div class="mb-8 indent-6">好转</div>
          <div class="font-bold mt-2 mb-1">备注:</div>
          <p class="indent-6 w-30 text-pretty">可正常入眠，舌和耳边均有好转，但睡眠还易夜醒</p>
          <div class="font-bold mb-4 mt-15">下一步处置</div>
          <div class="indent-6 font-bold">复诊</div>
          <div class="mt-10 flex justify-end flex-col items-center">
            <div>智医生</div>
            <div>2024.10.05</div>
          </div>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>
<style scoped lang="scss"></style>