health.admin/src/components/ReportAnalysisCountEdit.vue

<script setup lang="ts">
import type { PatientModel }                                            from '@/model';
import { patientAnalysisCountMethod, updatePatientAnalysisCountMethod } from '@/request/api/patient.api';
import { useRequest, useWatcher }                                       from 'alova/client';
import { message as Message }                                           from 'ant-design-vue/es/components';


const props = defineProps<{
  patient: Partial<PatientModel>;
}>();
const emits = defineEmits<{
  destroy: [];
}>();

const patientId = computed(() => props.patient?.id);
const model = reactive({
  total: 0,
  count: 0,
})
const { loading } = useWatcher(
  () => patientAnalysisCountMethod(patientId.value!),
  [ () => props.patient?.id ],
  {
    initialData: {}, immediate: true,
    middleware: (_, next) => { if ( patientId.value ) next(); },
  },
).onSuccess(({data})=>{
  model.total = data.total;
  model.count = data.count;
});
const { loading: updating, send: updata } = useRequest(
  () => updatePatientAnalysisCountMethod(patientId.value!, model.count),
  { immediate: false },
).onSuccess(() => {
  Message.success(`充值成功`);
  emits('destroy');
});
</script>
<template>
  <div id="page-container-scroller" class="page-container flex flex-col">
    <a-spin :spinning="loading">
      <a-descriptions bordered :column="1">
        <a-descriptions-item label="姓名">{{ props.patient.name }}</a-descriptions-item>
        <a-descriptions-item label="健康分析次数">
          <a-form
            ref="formRef" :model="model" :label-col="{span: 12}"
            @finish="updata()"
          >
            <a-form-item label="已用次数">{{ model.total }}</a-form-item>
            <a-form-item label="剩余次数" name="count" :rules="[{ required: true, message: '请输入剩余次数' }]">
              <a-input-number :min="0" :max="100" v-model:value="model.count" />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" html-type="submit" :loading="updating">保存</a-button>
                <a-button type="default" @click="emits('destroy')">取消</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </div>
</template>
<style scoped lang="scss">
@import "@/themes/report-card";
</style>