|
|
@@ -2,8 +2,8 @@
|
|
|
<el-drawer
|
|
|
v-model="showDrawer"
|
|
|
direction="rtl"
|
|
|
- title="添加需求物资"
|
|
|
- size="50%"
|
|
|
+ :title="isEditMode ? '编辑需求物资' : '添加需求物资'"
|
|
|
+ size="35%"
|
|
|
:close-on-click-modal="false"
|
|
|
destroy-on-close
|
|
|
>
|
|
|
@@ -35,12 +35,12 @@
|
|
|
<el-input v-model.number="formData.info.unitPrice" placeholder="请输入单价" type="number" min="0" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="小计:" prop="info.subtotal">
|
|
|
- <el-input v-model="formData.info.subtotal" placeholder="请输入小计" type="textarea" rows: 3, />
|
|
|
+ <el-input v-model="formData.info.subtotal" placeholder="请输入小计" type="textarea" :rows="3" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="需求详情:" v-if="deptTree">
|
|
|
<AddSuppliesSubForm
|
|
|
ref="subFormRef"
|
|
|
- v-for="(item, index) in formData.detailList"
|
|
|
+ v-for="item in formData.detailList"
|
|
|
:key="item.id"
|
|
|
:init-data="item"
|
|
|
:dept-tree="deptTree"
|
|
|
@@ -65,8 +65,12 @@
|
|
|
<script setup lang="ts">
|
|
|
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 type {
|
|
|
+ AddSupplyRequestForm,
|
|
|
+ AddSupplyRequestSubForm,
|
|
|
+ SupplyRequestDetailItem,
|
|
|
+ } from '@/types/emergency-supplier';
|
|
|
+ import { createSupplyRequestDetail, getSupplyNameList, updateSupplyRequestDetail } from '@/api/emergency-supplier';
|
|
|
import AddSuppliesSubForm from './AddSuppliesSubForm.vue';
|
|
|
|
|
|
import type { DeptTree } from '@/types/dept/type';
|
|
|
@@ -80,6 +84,8 @@
|
|
|
const subFormRefs = useTemplateRef('subFormRef');
|
|
|
|
|
|
const showDrawer = ref(false);
|
|
|
+ const isEditMode = ref(false);
|
|
|
+ const editInfoId = ref<number | null>(null);
|
|
|
|
|
|
const lastDetailId = ref(0);
|
|
|
|
|
|
@@ -120,20 +126,69 @@
|
|
|
id: lastDetailId.value,
|
|
|
},
|
|
|
];
|
|
|
+ isEditMode.value = false;
|
|
|
+ editInfoId.value = null;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 初始化编辑数据
|
|
|
+ const initEditData = (editData: SupplyRequestDetailItem) => {
|
|
|
+ isEditMode.value = true;
|
|
|
+ editInfoId.value = editData.info.id;
|
|
|
+
|
|
|
+ // 设置 info 数据
|
|
|
+ formData.info = {
|
|
|
+ id: editData.info.id,
|
|
|
+ supplyName: editData.info.supplyName,
|
|
|
+ specs: editData.info.specs,
|
|
|
+ unitPrice: editData.info.unitPrice,
|
|
|
+ subtotal: editData.info.subtotal,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置 detailList 数据(编辑时不需要保留 id,使用负数作为临时 id)
|
|
|
+ formData.detailList = editData.detailList.map((detail, index) => {
|
|
|
+ return {
|
|
|
+ id: -(index + 1), // 使用负数作为临时 id
|
|
|
+ deptId: detail.deptId,
|
|
|
+ deptName: detail.deptName,
|
|
|
+ quantity: detail.quantity,
|
|
|
+ sizeDetail: detail.sizeDetail,
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新 lastDetailId,确保新增项的 id 不会冲突
|
|
|
+ if (formData.detailList.length > 0) {
|
|
|
+ lastDetailId.value = formData.detailList.length;
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 打开需求列表&数据初始化
|
|
|
- const openDrawer = () => {
|
|
|
- // 创建时清理为初始化 TODO 编辑时通过参数进行初始化
|
|
|
- clearFormData();
|
|
|
+ const openDrawer = async (editData?: SupplyRequestDetailItem) => {
|
|
|
+ // 先打开 drawer,再加载数据
|
|
|
showDrawer.value = true;
|
|
|
+
|
|
|
+ // 如果是编辑模式,初始化编辑数据
|
|
|
+ if (editData) {
|
|
|
+ initEditData(editData);
|
|
|
+ } else {
|
|
|
+ // 创建时清理为初始化
|
|
|
+ clearFormData();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重新加载数据,确保数据是最新的
|
|
|
+ try {
|
|
|
+ await Promise.all([getSuppliesNameList(), getDeptTreeData()]);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载数据失败:', error);
|
|
|
+ // 即使数据加载失败,drawer 也应该保持打开状态
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 表单需求详情加一项
|
|
|
const addDetail = () => {
|
|
|
lastDetailId.value += 1;
|
|
|
+ // 使用负数作为新项的 id,避免与已存在的记录 id 冲突
|
|
|
formData.detailList.push({
|
|
|
- id: lastDetailId.value,
|
|
|
+ id: -lastDetailId.value,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
@@ -167,6 +222,7 @@
|
|
|
return {
|
|
|
info: { ...formData.info, planId },
|
|
|
detailList: formData.detailList.map((item) => {
|
|
|
+ // 编辑时不需要保留 detailList 的 id,只保留 info 的 id
|
|
|
return {
|
|
|
deptId: item.deptId,
|
|
|
deptName: item.deptName,
|
|
|
@@ -177,18 +233,31 @@
|
|
|
};
|
|
|
};
|
|
|
|
|
|
+ interface Emits {
|
|
|
+ (e: 'success'): void;
|
|
|
+ }
|
|
|
+
|
|
|
+ const emit = defineEmits<Emits>();
|
|
|
+
|
|
|
// 提交表单
|
|
|
const handleSubmit = async () => {
|
|
|
const res = await formValidate();
|
|
|
if (!res) return;
|
|
|
const data = getFormData();
|
|
|
- // console.log(data);
|
|
|
try {
|
|
|
- await createSupplyRequestDetail(data);
|
|
|
- ElMessage.success('提交成功');
|
|
|
+ if (isEditMode.value && editInfoId.value) {
|
|
|
+ // 编辑模式
|
|
|
+ await updateSupplyRequestDetail(data);
|
|
|
+ ElMessage.success('编辑成功');
|
|
|
+ } else {
|
|
|
+ // 创建模式
|
|
|
+ await createSupplyRequestDetail(data);
|
|
|
+ ElMessage.success('提交成功');
|
|
|
+ }
|
|
|
showDrawer.value = false;
|
|
|
+ emit('success');
|
|
|
} catch (error) {
|
|
|
- ElMessage.error('提交失败');
|
|
|
+ ElMessage.error(isEditMode.value ? '编辑失败' : '提交失败');
|
|
|
}
|
|
|
};
|
|
|
|