fix: 物资管理物资报废新增部分

src/api/emergency-supplier/index.ts

@@ -127,11 +127,16 @@ export const saveInventoryTask = (taskName: string, endTime: string) => {
 /**
  * 物资报废
  */
-export const discardEmergencySupply = (supplyId: number, quantity: number) => {
+export const discardEmergencySupply = (data: {
+  supplyId: number;
+  quantity: number;
+  scrapReason: string;
+  scrapImage: string;
+}) => {
   return http.request({
     url: '/emergencySupplies/scrapEmergencySupplies',
     method: 'post',
-    data: { supplyId, quantity },
+    data,
   });
 };
 /**

src/types/emergency-supplier/index.ts

@@ -57,6 +57,8 @@ export interface ExportDiscardForm {
 }
 export interface DiscardSuppliesForm {
   quantity: number | null;
+  scrapReason: string;
+  scrapImage: string;
 }
 
 export interface AddEmergencyItemForm
@@ -93,6 +95,8 @@ export interface ChangeRecordListRes {
   afterQuantity: number;
   operatorName: string;
   updatedAt: string;
+  scrapReason: string;
+  scrapImage?: string;
 }
 
 export interface InventoryTaskListRes {

src/views/emergency/emergency-supplies/src/components/ChangeRecord.vue

@@ -8,7 +8,33 @@
         <span v-if="scope.row.changeQuantity > 0">+</span>
         <span>{{ scope.row.changeQuantity }}</span>
       </template>
+      <template #action="scope">
+        <ActionButton text="报废详情" @click="handleViewDetail(scope.row)" />
+      </template>
     </BasicTable>
+    <el-drawer title="报废详情" v-model="drawerVisible" size="40%" :close-on-click-modal="true" :show-close="true">
+      <div class="drawer-body">
+        <div class="drawer-item">
+          <span class="drawer-item-label">报废理由：</span>
+          <span>{{ record?.scrapReason }}</span>
+        </div>
+        <div v-if="uploadedImages.length > 0" class="drawer-item">
+          <span class="drawer-item-label">报废照片：</span>
+          <div class="image-container">
+            <div v-for="(image, index) in uploadedImages" :key="image" class="image-preview">
+              <el-image
+                :src="image"
+                style="width: 100px; height: 100px"
+                :preview-src-list="uploadedImages"
+                show-progress
+                :initial-index="index"
+                fit="cover"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -20,6 +46,8 @@
   import { ChangeRecordListRes } from '@/types/emergency-supplier';
   import { getSupplyChangeRecord } from '@/api/emergency-supplier';
   import { CHANGE_TYPE_MAP } from '../constant';
+  import ActionButton from '@/components/ActionButton.vue';
+  import { unformatImage } from '@/components/UploadImages/utils';
 
   const { tableConfig } = useTableConfig(CHANGE_RECORD_TABLE_COLUMNS, CHANGE_RECORD_TABLE_OPTIONS, false);
   const props = defineProps<{
@@ -32,6 +60,17 @@
     tableData.value = res;
     tableConfig.loading = false;
   };
+
+  const uploadedImages = ref<string[]>([]);
+
+  const drawerVisible = ref(false);
+  const record = ref<ChangeRecordListRes>();
+  const handleViewDetail = (row: ChangeRecordListRes) => {
+    record.value = row;
+    uploadedImages.value = unformatImage(row.scrapImage) || [];
+
+    drawerVisible.value = true;
+  };
   onMounted(() => {
     getChangeRecord();
   });
@@ -39,4 +78,21 @@
 
 <style lang="scss" scoped>
   @use '../styles/info.scss' as *;
+  .drawer-item {
+    margin-bottom: 20px;
+  }
+  .drawer-item-label {
+    color: rgba(0, 0, 0, 0.88);
+  }
+  .image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    width: 100%;
+  }
+  .image-preview {
+    width: 100px;
+    height: 100px;
+    border-radius: 4px;
+  }
 </style>

src/views/emergency/emergency-supplies/src/components/DiscardSupplies.vue

@@ -11,9 +11,16 @@
         <template #quantity>
           <el-input v-model.number="ruleFormData.quantity" placeholder="请输入报废数量" type="number" min="1" step="1">
           </el-input>
+          <div>最多可报废数量：{{ supply?.currentQuantity }}</div>
+        </template>
+        <template #scrapReason>
+          <el-input v-model="ruleFormData.scrapReason" placeholder="请输入报废理由" type="textarea" rows="3">
+          </el-input>
+        </template>
+        <template #scrapImage>
+          <UploadImages :maxCount="9" ref="uploadImagesRef" @uploadSuccess="handleUploadSuccess" />
         </template>
       </BasicForm>
-      <div class="discard-note">最多可报废数量：{{ supply?.currentQuantity }}</div>
     </template>
     <template #footer>
       <el-button type="primary" @click="handleSumbit">提交</el-button>
@@ -27,10 +34,17 @@
   import { ElMessage } from 'element-plus';
   import BasicDialog from '@/components/BasicDialog.vue';
   import BasicForm from '@/components/BasicForm.vue';
+  import UploadImages from '@/components/UploadImages/UploadImages.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { DiscardSuppliesForm, EmergencySupplyListResponse } from '@/types/emergency-supplier';
   import { discardEmergencySupply } from '@/api/emergency-supplier';
-  import { SUPPLIES_DISCARD_FROM_CONFIG, SUPPLIES_DISCARD_FROM_DATA, SUPPLIES_DISCARD_FROM_RULES } from '../config';
+  import {
+    SUPPLIES_DISCARD_FROM_CONFIG,
+    SUPPLIES_DISCARD_FROM_DATA,
+    SUPPLIES_DISCARD_FROM_RULES,
+  } from '../config/form';
+  import { formatImageList } from '@/components/UploadImages/utils';
+  import type { ImageItem } from '@/types/disaster-control';
 
   const emit = defineEmits<{
     (e: 'refreshList'): void;
@@ -38,6 +52,7 @@
 
   const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
+  const uploadImagesRef = ref<InstanceType<typeof UploadImages>>();
   const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<DiscardSuppliesForm>(
     SUPPLIES_DISCARD_FROM_CONFIG,
     SUPPLIES_DISCARD_FROM_DATA,
@@ -49,6 +64,7 @@
   const openDialog = (item: EmergencySupplyListResponse) => {
     supply.value = item;
     basicDialogRef.value?.openDialog();
+    uploadImagesRef.value?.removeAllImages();
     (formRules.quantity as Array<any>).push({
       validator: (_rule, value, callback) => {
         if (!supply.value) {
@@ -68,12 +84,28 @@
       trigger: 'blur',
     });
   };
+
+  const scrapImage = ref<ImageItem[]>([]);
+  const handleUploadSuccess = (files: ImageItem[]) => {
+    scrapImage.value = files;
+  };
+
   const handleSumbit = async () => {
     const validate = await basicFormRef.value?.validateForm();
     if (!validate) return;
     if (!supply.value) return;
     try {
-      await discardEmergencySupply(supply.value.id, ruleFormData.quantity!);
+      const scrapImageString = await formatImageList(scrapImage.value);
+      if (scrapImageString) {
+        ruleFormData.scrapImage = JSON.stringify(scrapImageString as string[]);
+      }
+      const query = {
+        supplyId: supply.value.id,
+        quantity: ruleFormData.quantity as number,
+        scrapReason: ruleFormData.scrapReason,
+        scrapImage: ruleFormData.scrapImage,
+      };
+      await discardEmergencySupply(query);
       ElMessage.success('物资报废成功');
       emit('refreshList');
       basicDialogRef.value?.closeDialog();
@@ -88,9 +120,3 @@
     openDialog,
   });
 </script>
-
-<style scoped lang="scss">
-  .discard-note {
-    padding-left: 80px;
-  }
-</style>

src/views/emergency/emergency-supplies/src/config/form.ts

@@ -316,16 +316,29 @@ export const SUPPLIES_DISCARD_FROM_CONFIG: FormConfig[] = [
     prop: 'quantity',
     slot: 'quantity',
   },
+  {
+    label: '报废理由：',
+    prop: 'scrapReason',
+    slot: 'scrapReason',
+  },
+  {
+    label: '报废照片：',
+    prop: 'scrapImage',
+    slot: 'scrapImage',
+  },
 ];
 
 // 物资报废单数据
 export const SUPPLIES_DISCARD_FROM_DATA = {
   quantity: null,
+  scrapReason: '',
+  scrapImage: '',
 };
 
 // 物资报废单规则
 export const SUPPLIES_DISCARD_FROM_RULES = {
   quantity: [{ required: true, message: '请输入报废数量', trigger: 'blur' }],
+  scrapReason: [{ required: true, message: '请输入报废理由', trigger: 'blur' }],
 };
 
 // 物资申领计划表单配置

src/views/emergency/emergency-supplies/src/config/table.ts

@@ -150,6 +150,14 @@ export const CHANGE_RECORD_TABLE_COLUMNS: TableColumnProps[] = [
     label: '变更时间',
     prop: 'updatedAt',
   },
+  {
+    label: '操作',
+    prop: 'action',
+    slot: 'action',
+    align: 'center',
+    fixed: 'right',
+    width: '120px',
+  },
 ];
 
 export const CHANGE_RECORD_TABLE_OPTIONS = {