feat: 添加需求物资接口联调

src/api/emergency-supplier/index.ts

@@ -14,6 +14,7 @@ import type {
   SupplyRequestListItem,
   SupplyRequestDetailItem,
   ReceiveSupplyRequestDetailForm,
+  AddSupplyQuery,
 } from '@/types/emergency-supplier';
 
 /**
@@ -210,7 +211,7 @@ export const getSupplyRequestDetail = (planId: number) => {
 /**
  * 创建需求物资
  */
-export const createSupplyRequestDetail = (data: SupplyRequestDetailItem) => {
+export const createSupplyRequestDetail = (data: AddSupplyQuery) => {
   return http.request({
     url: '/emergencySupplies/saveRequestSupply',
     method: 'post',
@@ -220,7 +221,7 @@ export const createSupplyRequestDetail = (data: SupplyRequestDetailItem) => {
 /**
  * 编辑需求物资
  */
-export const updateSupplyRequestDetail = (data: SupplyRequestDetailItem) => {
+export const updateSupplyRequestDetail = (data: AddSupplyQuery) => {
   return http.request({
     url: '/emergencySupplies/updateRequestSupply',
     method: 'put',
@@ -261,3 +262,12 @@ export const exportSupplyRequestRecord = (planId: number) => {
     },
   );
 };
+/**
+ * 获取物资名称列表
+ */
+export const getSupplyNameList = (planId: number) => {
+  return http.request<string[]>({
+    url: `/emergencySupplies/queryEmergencySuppliesNameList?planId=${planId}`,
+    method: 'get',
+  });
+};

src/types/emergency-supplier/index.ts

@@ -184,11 +184,16 @@ export interface ReceiveSupplyRequestDetailForm {
   planId: number; // 申领计划ID
 }
 
+// 添加需求物资单个部门表单
 export type AddSupplyRequestSubForm = Pick<SupplyRequestDetailList, 'id'> &
   Partial<Omit<SupplyRequestDetailList, 'id'>>;
-
+// 添加需求物资表单
 export interface AddSupplyRequestForm {
   info: Partial<SupplyRequestDetailInfo>;
   detailList: AddSupplyRequestSubForm[];
 }
-export interface UpdateSupplyRequestForm extends SupplyRequestDetailItem {}
+// 添加需求物资接口查询参数
+export interface AddSupplyQuery {
+  info: Partial<SupplyRequestDetailInfo>;
+  detailList: Partial<AddSupplyRequestSubForm>[];
+}

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

@@ -13,7 +13,9 @@
         prop="info.supplyName"
         :rules="[{ required: true, message: '请输入物资名称', trigger: 'blur' }]"
       >
-        <el-input v-model="formData.info.supplyName" placeholder="请输入物资名称" />
+        <el-select v-model="formData.info.supplyName" placeholder="请输入物资名称">
+          <el-option v-for="item in SuppliesNameList" :key="item" :value="item" />
+        </el-select>
       </el-form-item>
       <el-form-item
         label="规格："
@@ -25,7 +27,10 @@
       <el-form-item
         label="单价（元）："
         prop="info.unitPrice"
-        :rules="[{ required: true, message: '请输入单价', trigger: 'blur' }]"
+        :rules="[
+          { required: true, message: '请输入单价', trigger: 'blur' },
+          { validator: validateFormNumber, trigger: 'blur' },
+        ]"
       >
         <el-input v-model.number="formData.info.unitPrice" placeholder="请输入单价" type="number" min="0" />
       </el-form-item>
@@ -39,6 +44,8 @@
           :key="item.id"
           :init-data="item"
           :dept-tree="deptTree"
+          :dept-selected="deptSelected"
+          @update-sub-form="onUpdateSubForm"
           @close-sub-form="onCloseSubForm(item.id)"
         />
       </el-form-item>
@@ -56,13 +63,18 @@
 </template>
 
 <script setup lang="ts">
-  import { ElDrawer, ElForm, ElMessage } from 'element-plus';
-  import { ref, reactive, onMounted, useTemplateRef } from 'vue';
-  import type { AddSupplyRequestForm, SupplyRequestDetailList } from '@/types/emergency-supplier';
+  import { ElDrawer, ElForm, ElInput, ElSelect, ElMessage } from 'element-plus';
+  import { ref, reactive, onMounted, useTemplateRef, computed } from 'vue';
+  import type { AddSupplyRequestForm, AddSupplyRequestSubForm } from '@/types/emergency-supplier';
+  import { createSupplyRequestDetail, getSupplyNameList } from '@/api/emergency-supplier';
   import AddSuppliesSubForm from './AddSuppliesSubForm.vue';
 
   import type { DeptTree } from '@/types/dept/type';
   import { getAllDepartments } from '@/api/auth/dept';
+  import { useRoute } from 'vue-router';
+
+  const route = useRoute();
+  const planId = Number(route.params.id);
 
   const formRef = ref<InstanceType<typeof ElForm>>();
   const subFormRefs = useTemplateRef('subFormRef');
@@ -71,6 +83,13 @@
 
   const lastDetailId = ref(0);
 
+  // 获取物资名称
+  const SuppliesNameList = ref<string[]>();
+  const getSuppliesNameList = async () => {
+    const res = await getSupplyNameList(planId);
+    SuppliesNameList.value = res;
+  };
+
   // 获取部门树
   const deptTree = ref<DeptTree[]>();
   const getDeptTreeData = async () => {
@@ -87,6 +106,10 @@
       },
     ],
   });
+  // 表单中已选择的部门id
+  const deptSelected = computed(() => {
+    return formData.detailList.map((item) => item.deptId).filter((item) => item !== undefined);
+  });
 
   // 清理表单数据
   const clearFormData = () => {
@@ -101,7 +124,7 @@
 
   // 打开需求列表&数据初始化
   const openDrawer = () => {
-    // 创建时清理为初始化
+    // 创建时清理为初始化 TODO 编辑时通过参数进行初始化
     clearFormData();
     showDrawer.value = true;
   };
@@ -123,6 +146,13 @@
     formData.detailList = formData.detailList.filter((item) => item.id !== id);
   };
 
+  // 更新一项需求详情
+  const onUpdateSubForm = (data: AddSupplyRequestSubForm) => {
+    const detail = formData.detailList.find((item) => item.id === data.id);
+    if (!detail) return;
+    Object.assign(detail, data);
+  };
+
   // 表单校验
   const formValidate = async () => {
     if (!formRef.value) return;
@@ -133,13 +163,45 @@
     return await formRef.value.validate();
   };
 
+  const getFormData = () => {
+    return {
+      info: { ...formData.info, planId },
+      detailList: formData.detailList.map((item) => {
+        return {
+          deptId: item.deptId,
+          deptName: item.deptName,
+          quantity: item.quantity,
+          sizeDetail: item.sizeDetail,
+        };
+      }),
+    };
+  };
+
   // 提交表单
   const handleSubmit = async () => {
     const res = await formValidate();
     if (!res) return;
+    const data = getFormData();
+    // console.log(data);
+    try {
+      await createSupplyRequestDetail(data);
+      ElMessage.success('提交成功');
+      showDrawer.value = false;
+    } catch (error) {
+      ElMessage.error('提交失败');
+    }
+  };
+
+  const validateFormNumber = (rule: any, value: number, callback: any) => {
+    if (value < 0) {
+      callback(new Error('输入不能小于0'));
+    } else {
+      callback();
+    }
   };
 
   onMounted(() => {
+    getSuppliesNameList();
     getDeptTreeData();
   });
 

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

@@ -24,19 +24,32 @@
       <el-form-item
         label="数量："
         prop="quantity"
-        :rules="[{ required: true, message: '请输入数量', trigger: 'blur' }]"
+        :rules="[
+          { required: true, message: '请输入数量', trigger: 'blur' },
+          { validator: validateFormNumber, trigger: 'blur' },
+        ]"
       >
-        <el-input v-model.number="subFormData.quantity" placeholder="请输入数量" type="number" min="0" />
+        <el-input
+          v-model.number="subFormData.quantity"
+          placeholder="请输入数量"
+          type="number"
+          min="0"
+          @change="emits('updateSubForm', subFormData)"
+        />
       </el-form-item>
       <el-form-item label="尺寸明细：" prop="sizeDetail">
-        <el-input v-model="subFormData.sizeDetail" placeholder="请输入尺寸明细" />
+        <el-input
+          v-model="subFormData.sizeDetail"
+          placeholder="请输入尺寸明细"
+          @change="emits('updateSubForm', subFormData)"
+        />
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ElForm } from 'element-plus';
+  import { ElForm, ElMessage } from 'element-plus';
   import { ref } from 'vue';
   import type { AddSupplyRequestSubForm } from '@/types/emergency-supplier';
   import type { DeptTree } from '@/types/dept/type';
@@ -44,10 +57,12 @@
   const props = defineProps<{
     initData: AddSupplyRequestSubForm;
     deptTree: DeptTree[];
+    deptSelected: number[];
   }>();
 
   const emits = defineEmits<{
     (e: 'closeSubForm'): void;
+    (e: 'updateSubForm', data: AddSupplyRequestSubForm): void;
   }>();
 
   const cascaderRef = ref();
@@ -60,7 +75,17 @@
   };
   const handleChangeDept = () => {
     const deptInfo = cascaderRef.value?.getCheckedNodes();
-    subFormData.value.deptName = deptInfo[0].label;
+    if (!deptInfo || !deptInfo[0]) return;
+
+    const deptId = deptInfo[0].value;
+    subFormRef.value?.clearValidate();
+    if (props.deptSelected.some((item) => item === deptId)) {
+      ElMessage.warning('需求部门不能重复');
+      cascaderRef.value.cascaderPanelRef.clearCheckedNodes();
+    } else {
+      emits('updateSubForm', subFormData.value);
+      subFormData.value.deptName = deptInfo[0].label;
+    }
   };
 
   const subFormRef = ref<InstanceType<typeof ElForm>>();
@@ -74,6 +99,15 @@
     });
   };
 
+  const validateFormNumber = (rule: any, value: number, callback: any) => {
+    if (!Number.isInteger(value)) return callback(new Error('请输入正整数'));
+    if (value < 0) {
+      callback(new Error('输入不能小于0'));
+    } else {
+      callback();
+    }
+  };
+
   defineExpose({
     subFormValidate,
   });