重构 step 类页面，调配 & 复核

src/api/pda.api.ts

@@ -92,6 +92,24 @@ export function setDataMethod(url: string, data: ResponseData) {
   return requestMethodFactory(PharmacyHttpClient.Post(url, data));
 }
 
+/**
+ * 调配节点保存
+ * @param data
+ */
+export function setDeployDataMethod (data: Record<string, any>) {
+  return requestMethodFactory(PharmacyHttpClient.Post('/file/saveCoreFile', data));
+}
+
+/**
+ * 调配复核节点保存
+ * @param data
+ */
+export function setDeployRecheckDataMethod (data: Record<string, any>) {
+  return requestMethodFactory(
+    PharmacyHttpClient.Post('/prescription/prescriptionCore/reviewPrescription', data)
+  );
+}
+
 export function getSoakDataMethod(id: string) {
   return PharmacyHttpClient.Get<SoakModel, ResponseData>(`/web/pda/steep/${id}`, { transform: fromSoakModel });
 }

src/components/StepDetailComponent.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import { useForm } from 'alova/client';
-import { setDataMethod } from '@/api/pda.api.ts';
-import { uploadMethod } from '@/api/file.api.ts';
-import type { ToRef } from 'vue';
-import { showSuccessToast, type UploaderAfterRead, type UploaderFileListItem } from 'vant';
-import { useAccountStore, useStepStore } from '@/stores';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import Big from 'big.js';
-
-const { title } = defineProps<{ title: string }>();
-const emits = defineEmits<{ back: [delta?: number] }>();
-const route = useRoute();
-const mode = toRef(route.params, 'mode') as ToRef<'deploy' | 'deploy-recheck'>;
-
-const storeStore = useStepStore();
-const accountStore = useAccountStore();
-
-const files = ref<UploaderFileListItem[]>([]);
-const {
-  loading: submitting,
-  form: model,
-  send: submit,
-} = useForm(
-  (model) => {
-    const data = Object.assign(
-      {
-        urls: files.value.filter((file) => file.status === 'done').map((file) => file.url),
-        coreId: storeStore.dataset?.id,
-        preNo: storeStore.dataset?.no,
-        userId: accountStore.account?.id,
-      },
-      model,
-    );
-    switch (mode.value) {
-      case 'deploy':
-        Reflect.deleteProperty(data, 'weight');
-        return setDataMethod('/file/saveCoreFile', data);
-      case 'deploy-recheck':
-        return setDataMethod('/prescription/prescriptionCore/reviewPrescription', data);
-    }
-  },
-  {
-    initialForm: {
-      comments: '',
-      weight: '',
-    },
-  },
-).onSuccess(() => {
-  showSuccessToast(`操作成功`);
-  emits('back', -1);
-});
-
-const afterRead: UploaderAfterRead = async (listItem) => {
-  if (listItem && !Array.isArray(listItem)) listItem = [listItem];
-  for (const item of listItem) {
-    if (!item?.file) continue;
-    item.status = 'uploading';
-    item.message = '上传中...';
-    try {
-      item.url = await uploadMethod(item.file!);
-      item.status = 'done';
-    } catch (e) {
-      console.error('上传文件-->失败', e);
-      item.status = 'failed';
-    }
-  }
-};
-
-const remarkLabel = computed(() => title.replace('管理', '备注'));
-const buttonText = computed(() => title.replace('管理', '节点上传'));
-
-const update = () => {
-  if (mode.value === 'deploy-recheck') {
-    const {
-      medicines,
-      prescription: { count },
-    } = storeStore.dataset!;
-    const weight = medicines.reduce((total, medicine) => total.plus(Big(medicine.dosage || 0)), Big(0));
-    model.value.weight = weight.times(Big(count)).toString();
-  }
-};
-onBeforeMount(() => update());
-onBeforeRouteUpdate(() => update());
-</script>
-
-<template>
-  <div>
-    <van-cell-group>
-      <van-form required="auto">
-        <template v-if="mode === 'deploy-recheck'">
-          <van-field v-model="model.weight" type="number" label="复核重量" placeholder="请输入重量" />
-        </template>
-        <van-field label="拍照上传">
-          <template #input>
-            <van-uploader v-model="files" :after-read="afterRead" />
-          </template>
-        </van-field>
-        <van-field v-model="model.comments" rows="2" autosize :label="remarkLabel" type="textarea" placeholder="请输入备注" />
-        <div class="my-4 px-4">
-          <van-button type="primary" block :loading="submitting" @click="submit()">{{ buttonText }} </van-button>
-        </div>
-      </van-form>
-    </van-cell-group>
-  </div>
-</template>
-
-<style scoped lang="scss"></style>

src/module/step/StepDeploy.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useForm } from 'alova/client';
+import { setDeployDataMethod } from '@/api/pda.api.ts';
+import { showSuccessToast } from 'vant';
+import { useAccountStore, useStepStore } from '@/stores';
+
+const emits = defineEmits<{ back: [delta?: number] }>();
+
+const accountStore = useAccountStore();
+const storeStore = useStepStore();
+
+const {
+  loading: submitting,
+  form: model,
+  send,
+} = useForm(
+  (model, picture) => {
+    const data = Object.assign(
+      {
+        urls: picture,
+        coreId: storeStore.dataset?.id,
+        preNo: storeStore.dataset?.no,
+        userId: accountStore.account?.id,
+      },
+      model,
+    );
+    return setDeployDataMethod(data);
+  },
+  { immediate: false, initialForm: { comments: '' } },
+).onSuccess(() => {
+  showSuccessToast(`操作成功`);
+  emits('back');
+});
+</script>
+
+<template>
+  <slot name="uploader" :disabled="submitting"></slot>
+  <van-field v-model="model.comments" :readonly="submitting" rows="2" autosize label="调配备注" type="textarea" placeholder="请输入备注" />
+  <slot name="submit" title="调配节点上传" :submitting="submitting" :submit="send"></slot>
+</template>
+
+<style scoped lang="scss"></style>

src/module/step/StepDeployRecheck.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useForm } from 'alova/client';
+import { setDeployRecheckDataMethod } from '@/api/pda.api.ts';
+import { showNotify, showSuccessToast } from 'vant';
+import { useAccountStore, useStepStore } from '@/stores';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import Big from 'big.js';
+
+const emits = defineEmits<{ back: [delta?: number] }>();
+
+const accountStore = useAccountStore();
+const storeStore = useStepStore();
+
+const {
+  loading: submitting,
+  form: model,
+  send,
+} = useForm(
+  (model, picture) => {
+    const data = Object.assign(
+      {
+        urls: picture,
+        coreId: storeStore.dataset?.id,
+        preNo: storeStore.dataset?.no,
+        userId: accountStore.account?.id,
+      },
+      model,
+    );
+    return setDeployRecheckDataMethod(data);
+  },
+  { immediate: false, initialForm: { comments: '', weight: '' } },
+).onSuccess(() => {
+  showSuccessToast(`操作成功`);
+  emits('back');
+});
+
+const update = () => {
+  const {
+    medicines,
+    prescription: { count },
+  } = storeStore.dataset!;
+  const weight = medicines.reduce((total, medicine) => total.plus(Big(medicine.dosage || 0)), Big(0));
+  model.value.weight = weight.times(Big(count)).toString();
+};
+onBeforeMount(() => update());
+onBeforeRouteUpdate(() => update());
+
+function submit(picture: string[]) {
+  let message = '';
+  if (!+model.value.weight) {
+    message = '请输入复核重量';
+  }
+  if (message) {
+    showNotify({ message, type: 'warning' });
+  } else {
+    send(picture);
+  }
+}
+</script>
+
+<template>
+  <van-field class="suffix" v-model="model.weight" :readonly="submitting" type="number" label="复核重量" placeholder="请输入重量">
+    <template #extra>
+      <div v-if="model.weight">g</div>
+    </template>
+  </van-field>
+  <slot name="uploader" :disabled="submitting"></slot>
+  <van-field v-model="model.comments" :readonly="submitting" rows="2" autosize label="调配复核备注" type="textarea" placeholder="请输入备注" />
+  <slot name="submit" title="调配复核节点上传" :submitting="submitting" :submit="submit"></slot>
+</template>
+
+<style scoped lang="scss">
+.van-field.suffix {
+  :deep(.van-field__value) {
+    flex: none;
+    width: min-content;
+    min-width: 80px;
+
+    input {
+      text-align: center;
+    }
+  }
+}
+</style>

src/module/step/StepSoak.vue

@@ -51,12 +51,33 @@ defineExpose({
 </script>
 
 <template>
-  <van-field v-model="model.soakingWaterValue" :readonly="submitting" type="digit" label="浸泡水量" placeholder="请输入浸泡水量" />
-  <van-field v-model="model.soakingTime" :readonly="submitting || soakingTimeFieldReadonly" type="digit" label="浸泡时间" placeholder="请输入浸泡时间" />
+  <van-field class="suffix" v-model="model.soakingWaterValue" :readonly="submitting" type="digit" label="浸泡水量" placeholder="请输入浸泡水量">
+    <template #extra>
+      <div v-if="model.soakingWaterValue">ml</div>
+    </template>
+  </van-field>
+  <van-field class="suffix" v-model="model.soakingTime" :readonly="submitting || soakingTimeFieldReadonly" type="digit" label="浸泡时间" placeholder="请输入浸泡时间">
+    <template #extra>
+      <div v-if="model.soakingTime">min</div>
+    </template>
+  </van-field>
   <slot name="scanner" title="扫描桶号" :disabled="submitting"></slot>
   <slot name="uploader" :disabled="submitting"></slot>
   <van-field v-model="model.soakingNote" :readonly="submitting" rows="2" autosize label="浸泡备注" type="textarea" placeholder="请输入备注" />
   <slot name="submit" title="浸泡节点上传" :submitting="submitting" :submit="submit"></slot>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.van-field.suffix {
+  :deep(.van-field__value) {
+    flex: none;
+    width: min-content;
+    min-width: 80px;
+
+    input {
+      text-align: center;
+      }
+    }
+  }
+</style>
+