health.admin/src/widgets/PatientTagWidget.vue

<script setup lang="ts">
import type { PatientModel } from '@/model';
import { patientMark }       from '@/request/api/patient.api';
import { tagsSearchMethod }  from '@/request/api/system.api';
import { useRequest }        from 'alova/client';


const { data: tags, loading: tagsLoading } = useRequest(tagsSearchMethod, { initialData: { total: 0, data: [] } });
const { send } = useRequest((data: string[]) => patientMark(props.patient.id, data), { immediate: false });

const props = defineProps<{
  patient: Partial<PatientModel>;

  editable?: boolean;
}>();

function save({ value }) {
  console.log(value);
  send(value);
}
</script>
<template>
  <div class="card">
    <div class="card__header sticky flex justify-between items-center">
      <div class="card__title">
        <span>标签</span>
        <a-spin v-if="props.loading" size="small" style="margin-left: 4px;" />
      </div>
    </div>
    <div class="card__content">
      <vxe-select :options="tags.data" :loading="tagsLoading" :option-props="{value: 'id', label: 'name'}"
                  @change="save" multiple
      ></vxe-select>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import "@/themes/report-card";
</style>