|
@@ -14,43 +14,69 @@
|
|
|
<span>{{ $index + 1 }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
+ <el-table-column label="仓库名称" prop="warehouse_id">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-select v-model="row.warehouse_id" placeholder="请选择仓库">
|
|
|
+ <el-option
|
|
|
+ v-for="item in warehouseOptions"
|
|
|
+ :key="item.warehouse_id"
|
|
|
+ :label="item.warehouse_name"
|
|
|
+ :value="item.warehouse_id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="物资类型" prop="materialType">
|
|
|
<template #default="{ row, $index }">
|
|
|
- <span
|
|
|
- class="editable-span"
|
|
|
- contenteditable="true"
|
|
|
- @blur="saveEdit($index, 'materialType', $event.target.innerText)"
|
|
|
- v-text="row.materialType"
|
|
|
- ></span>
|
|
|
+ <el-select v-model="row.materialType" placeholder="请选择物资类型">
|
|
|
+ <el-option
|
|
|
+ v-for="item in materialTypeOptions"
|
|
|
+ :key="item.material_type_id"
|
|
|
+ :label="item.material_type_name"
|
|
|
+ :value="item.material_type_name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="物资名称" prop="materialName">
|
|
|
+ <el-table-column label="物资名称" prop="materialCode">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-select v-model="row.materialCode" placeholder="请选择物资">
|
|
|
+ <el-option
|
|
|
+ v-for="item in materialOptions"
|
|
|
+ :key="item.material_id"
|
|
|
+ :label="item.material_name"
|
|
|
+ :value="item.material_id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="物资数量(件)" prop="quantity">
|
|
|
<template #default="{ row, $index }">
|
|
|
<span
|
|
|
class="editable-span"
|
|
|
contenteditable="true"
|
|
|
- @blur="saveEdit($index, 'materialName', $event.target.innerText)"
|
|
|
- v-text="row.materialName"
|
|
|
+ @blur="saveEdit($index, 'quantity', $event.target.innerText)"
|
|
|
+ v-text="row.quantity || ''"
|
|
|
></span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="物资数量(件)" prop="quantity">
|
|
|
+ <el-table-column label="物资用途" prop="material_purpose">
|
|
|
<template #default="{ row, $index }">
|
|
|
<span
|
|
|
class="editable-span"
|
|
|
contenteditable="true"
|
|
|
- @blur="saveEdit($index, 'quantity', $event.target.innerText)"
|
|
|
- v-text="row.quantity"
|
|
|
+ @blur="saveEdit($index, 'material_purpose', $event.target.innerText)"
|
|
|
+ v-text="row.material_purpose || ''"
|
|
|
></span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="物资用途" prop="purpose">
|
|
|
+ <el-table-column label="调度目的" prop="dispatch_purpose">
|
|
|
<template #default="{ row, $index }">
|
|
|
<span
|
|
|
class="editable-span"
|
|
|
contenteditable="true"
|
|
|
- @blur="saveEdit($index, 'purpose', $event.target.innerText)"
|
|
|
- v-text="row.purpose"
|
|
|
+ @blur="saveEdit($index, 'dispatch_purpose', $event.target.innerText)"
|
|
|
+ v-text="row.dispatch_purpose || ''"
|
|
|
></span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -58,7 +84,7 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<div class="common-dialog-footer" style="width: 100%; justify-content: center; display: flex">
|
|
|
- <el-row :span="24" :gutter="10" class="mb8">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
<el-col :span="1.5">
|
|
|
<el-button type="primary" @click="handleAddRow">新增一项</el-button>
|
|
|
</el-col>
|
|
@@ -76,6 +102,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { getMaterialList, createDispatch } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDistribution'; // 确保路径和导入语句是正确的
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
eventId: String
|
|
|
});
|
|
@@ -83,48 +112,121 @@ const props = defineProps({
|
|
|
const emits = defineEmits(['close']);
|
|
|
|
|
|
const tableData = ref<any[]>([]);
|
|
|
+const warehouseOptions = ref<{ warehouse_id: string; warehouse_name: string }[]>([]);
|
|
|
+const materialOptions = ref<{ material_id: number; material_name: string }[]>([]);
|
|
|
+const materialTypeOptions = ref<{ material_type_id: string; material_type_name: string }[]>([]);
|
|
|
|
|
|
-const loadFromLocalStorage = () => {
|
|
|
- const storedData = localStorage.getItem('tableData');
|
|
|
- if (storedData) {
|
|
|
- tableData.value = JSON.parse(storedData);
|
|
|
- } else {
|
|
|
- tableData.value = [
|
|
|
- { materialType: '三防物资', materialName: '雨衣', quantity: '100', purpose: '高州泰利台风前置' },
|
|
|
- { materialType: '三防物资', materialName: '水鞋', quantity: '10', purpose: '高州泰利台风前置' },
|
|
|
- { materialType: '三防物资', materialName: '雨伞', quantity: '50', purpose: '高州泰利台风前置' }
|
|
|
- ];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
+// 添加默认行
|
|
|
const addDefaultRow = () => {
|
|
|
const newRow = {
|
|
|
+ warehouse_id: '',
|
|
|
+ materialTypeId: '',
|
|
|
materialType: '',
|
|
|
- materialName: '',
|
|
|
+ materialCode: '',
|
|
|
quantity: '',
|
|
|
- purpose: ''
|
|
|
+ material_purpose: '',
|
|
|
+ dispatch_purpose: ''
|
|
|
};
|
|
|
tableData.value.push(newRow);
|
|
|
};
|
|
|
|
|
|
+// 获取仓库、物资和物资类型列表
|
|
|
+const fetchMaterialList = async () => {
|
|
|
+ try {
|
|
|
+ const response = await getMaterialList();
|
|
|
+ if (response.code === 200) {
|
|
|
+ // 去重逻辑
|
|
|
+ const uniqueWarehouseOptions = Array.from(new Set(response.data.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
|
|
|
+ warehouseOptions.value = uniqueWarehouseOptions.map((item) => ({
|
|
|
+ warehouse_id: item.warehouse_id,
|
|
|
+ warehouse_name: item.warehouse_name
|
|
|
+ }));
|
|
|
+
|
|
|
+ const uniqueMaterialTypeOptions = Array.from(new Set(response.data.map(item => JSON.stringify({material_type_id: item.material_type_id, material_type_name: item.material_type_name})))).map(item => JSON.parse(item));
|
|
|
+ materialTypeOptions.value = uniqueMaterialTypeOptions.map((item) => ({
|
|
|
+ material_type_id: item.material_type_id,
|
|
|
+ material_type_name: item.material_type_name
|
|
|
+ }));
|
|
|
+
|
|
|
+ const uniqueMaterialOptions = Array.from(new Set(response.data.map(item => JSON.stringify({material_id: item.material_id, material_name: item.material_name})))).map(item => JSON.parse(item));
|
|
|
+ materialOptions.value = uniqueMaterialOptions.map((item) => ({
|
|
|
+ material_id: item.material_id,
|
|
|
+ material_name: item.material_name
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取仓库和物资列表失败:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 保存编辑内容到本地存储
|
|
|
const saveEdit = (index: number, key: string, value: string) => {
|
|
|
tableData.value[index][key] = value;
|
|
|
localStorage.setItem('tableData', JSON.stringify(tableData.value));
|
|
|
};
|
|
|
|
|
|
+// 处理添加新行
|
|
|
const handleAddRow = () => addDefaultRow();
|
|
|
|
|
|
+// 处理返回
|
|
|
const handleReturn = () => {
|
|
|
emits('close');
|
|
|
};
|
|
|
|
|
|
-const handleSave = () => {
|
|
|
- // 这里可以添加保存到服务器的逻辑
|
|
|
- console.log('数据已保存:', tableData.value);
|
|
|
+// 方法:转换表格数据为后端期望的格式
|
|
|
+const transformTableData = (): any => {
|
|
|
+ return {
|
|
|
+ dispatch_purpose: tableData.value[0].dispatch_purpose || '', // 根据实际业务逻辑填写或从其他地方获取
|
|
|
+ detail: tableData.value.map((row, index) => ({
|
|
|
+ serial_number: (index + 1).toString(),
|
|
|
+ warehouse_id: row.warehouse_id || null,
|
|
|
+ material_type_id: row.materialTypeId || null,
|
|
|
+ material_type: row.materialType || null,
|
|
|
+ material_code: row.materialCode || null,
|
|
|
+ material_quantity: parseInt(row.quantity, 10),
|
|
|
+ material_purpose: row.material_purpose || null
|
|
|
+ }))
|
|
|
+ };
|
|
|
};
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- loadFromLocalStorage();
|
|
|
+// 方法:处理保存操作
|
|
|
+const handleSave = async () => {
|
|
|
+ console.log('Handle Save Called'); // 调试信息
|
|
|
+
|
|
|
+ const requestData = transformTableData();
|
|
|
+
|
|
|
+ // 验证必填字段
|
|
|
+ if (!validateRequiredFields(requestData)) {
|
|
|
+ console.error('Validation failed');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ console.log('Request Data:', requestData); // 打印请求数据
|
|
|
+ const response = await createDispatch(requestData);
|
|
|
+ console.log('Dispatch created successfully:', response);
|
|
|
+ // 可选:关闭对话框或其他操作
|
|
|
+ emits('close'); // 如果需要的话
|
|
|
+ emits('refresh');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('物资调度创建失败:', error);
|
|
|
+
|
|
|
+ // 提示用户关于具体的错误信息,比如哪个字段为空
|
|
|
+ if (error.response && error.response.data.detail) {
|
|
|
+ alert(error.response.data.detail); // 或者使用更友好的方式展示给用户
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+// 示例验证函数实现
|
|
|
+const validateRequiredFields = (requestData) => {
|
|
|
+ if (!requestData.detail.every(item => item.warehouse_id && item.material_code && item.material_quantity > 0)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+};
|
|
|
+onMounted(async () => {
|
|
|
+ await fetchMaterialList();
|
|
|
+ addDefaultRow();
|
|
|
});
|
|
|
</script>
|
|
|
|