物资申报查看、编辑优化界面及补充测试数据和物资调度查看、编辑搭建页面和补充数据

src/views/comprehensiveGuarantee/materialReserves/materialsDeclaration.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div v-show="!materialsDeclarationViewState.show && !materialsDeclarationEidtState.show && !materialsDeclarationAddState.show">
+    <div v-show="!materialsDeclarationViewState.show && !materialsDistributionEditState.show && !materialsDeclarationAddState.show">
       <h1>物资储备管理</h1>
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
@@ -35,10 +35,10 @@
         @pagination="fetchWorkrData"
       />
     </div>
+    <MaterialsDeclarationView v-if="materialsDeclarationViewState.show" :event-id="materialsDeclarationViewState.eventId" @close="handleCancel" />
+    <MaterialsDistributionEdit v-if="materialsDistributionEditState.show" :event-id="materialsDistributionEditState.eventId" @close="handleCancel" />
+    <MaterialsDeclarationAdd v-if="materialsDeclarationAddState.show" @close="handleCancel" />
   </div>
-  <MaterialsDeclarationView v-if="materialsDeclarationViewState.show" :event-id="materialsDeclarationViewState.eventId" @close="handleCancel" />
-  <MaterialsDeclarationEidt v-if="materialsDeclarationEidtState.show" :event-id="materialsDeclarationEidtState.eventId" @close="handleCancel" />
-  <MaterialsDeclarationAdd v-if="materialsDeclarationAddState.show" @close="handleCancel" />
 </template>
 
 <script setup lang="ts">
@@ -47,7 +47,7 @@ import { ElTable, ElTableColumn, ElForm, ElFormItem, ElInput, ElButton, ElText }
 import { ComponentInternalInstance, getCurrentInstance } from 'vue';
 import Pagination from '@/components/Pagination/index.vue'; // 假设这是分页组件的路径
 import MaterialsDeclarationView from './materialsDeclarationView.vue'; // 查看详情组件
-import MaterialsDeclarationEidt from './materialsDeclarationEidt.vue'; // 编辑组件
+import MaterialsDistributionEdit from './materialsDistributionEdit.vue'; // 编辑组件
 import MaterialsDeclarationAdd from './materialsDeclarationAdd.vue'; // 编辑组件
 const loading = ref(true);
 const showSearch = ref(true);
@@ -83,7 +83,7 @@ const mockData = [
     declaration_date: '2024-10-29 12:23:00',
     amount_declared: 1000,
     application_unit: '茂名市应急管理局',
-    declarant: '张三',
+    declarant: 'XX',
     approval_status: '未审批'
   },
   {
@@ -91,7 +91,7 @@ const mockData = [
     declaration_date: '2024-10-30 12:23:00',
     amount_declared: 1001,
     application_unit: '茂名市应急管理局',
-    declarant: '李四',
+    declarant: 'XX',
     approval_status: '审批通过'
   },
   {
@@ -99,7 +99,7 @@ const mockData = [
     declaration_date: '2024-10-31 12:23:00',
     amount_declared: 1002,
     application_unit: '茂名市应急管理局',
-    declarant: '王五',
+    declarant: 'XX',
     approval_status: '审批不通过'
   }
 ];
@@ -127,7 +127,7 @@ let materialsDeclarationViewState = reactive({
   eventId: ''
 });
 
-let materialsDeclarationEidtState = reactive({
+let materialsDistributionEditState = reactive({
   show: false,
   eventId: ''
 });
@@ -145,13 +145,13 @@ const handleView = (row: any) => {
 };
 
 const handleUpdate = (row: any) => {
-  materialsDeclarationEidtState.eventId = row.id;
-  materialsDeclarationEidtState.show = true;
+  materialsDistributionEditState.eventId = row.id;
+  materialsDistributionEditState.show = true;
 };
 
 const handleCancel = () => {
   materialsDeclarationViewState.show = false;
-  materialsDeclarationEidtState.show = false;
+  materialsDistributionEditState.show = false;
   materialsDeclarationAddState.show = false;
 };
 

src/views/comprehensiveGuarantee/materialReserves/materialsDeclarationEidt.vue

@@ -3,7 +3,9 @@
     <el-row :gutter="20">
       <el-col :span="6">
         <h2>编辑</h2>
-        <p class="report-period">申报金额：20000.00元</p>
+        <el-form-item label="调度目的：">
+          <el-input v-model="queryParams.purpose" placeholder="请输入内容" clearable></el-input>
+        </el-form-item>
       </el-col>
       <el-col :lg="24" :xs="24">
         <el-table :data="tableData" border height="400">
@@ -42,23 +44,13 @@
               ></span>
             </template>
           </el-table-column>
-          <el-table-column label="物资单价（元）" prop="unitPrice">
+          <el-table-column label="物资用途" prop="materials">
             <template #default="{ row, $index }">
               <span
                 class="editable-span"
                 contenteditable="true"
-                @blur="saveEdit($index, 'unitPrice', $event.target.innerText)"
-                v-text="row.unitPrice"
-              ></span>
-            </template>
-          </el-table-column>
-          <el-table-column label="物资用途" prop="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, 'materials', $event.target.innerText)"
+                v-text="row.materials"
               ></span>
             </template>
           </el-table-column>
@@ -84,42 +76,42 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
-import { defineProps, defineEmits } from 'vue';
+import axios from 'axios'; // 引入axios
 
+// 定义父组件传递的属性
 const props = defineProps({
   eventId: String
 });
 
+// 定义子组件触发的事件
 const emits = defineEmits(['close']);
 
-const tableData = ref<any[]>([]);
+// 定义查询参数对象，包含调度目的
+const queryParams = ref({
+  purpose: '' // 调度目的
+});
 
-const loadFromLocalStorage = () => {
-  const storedData = localStorage.getItem('tableData');
-  if (storedData) {
-    tableData.value = JSON.parse(storedData);
-  } else {
-    tableData.value = [
-      { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
-      { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
-      { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
-    ];
-  }
-};
+// 表格数据
+const tableData = ref([
+  { materialType: '三防物资', materialName: '雨衣', quantity: '100', materials: '高州泰利台风前置' },
+  { materialType: '三防物资', materialName: '水鞋', quantity: '10', materials: '高州泰利台风前置' },
+  { materialType: '三防物资', materialName: '雨伞', quantity: '50', materials: '高州泰利台风前置' }
+]);
 
+// 添加默认行
 const addDefaultRow = () => {
   const newRow = {
     materialType: '',
     materialName: '',
     quantity: '',
-    unitPrice: '',
-    purpose: ''
+    materials: ''
   };
   tableData.value.push(newRow);
 };
 
+// 保存编辑
 const saveEdit = (index: number, key: string, value: string) => {
-  if (key === 'quantity' || key === 'unitPrice') {
+  if (key === 'quantity') {
     const numValue = parseFloat(value);
     if (isNaN(numValue)) {
       return;
@@ -127,22 +119,29 @@ const saveEdit = (index: number, key: string, value: string) => {
     value = numValue.toString();
   }
   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 handleSave = async () => {
+  try {
+    const response = await axios.post('/api/submitData', { data: tableData.value, purpose: queryParams.value.purpose });
+    console.log('数据已成功提交:', response.data);
+  } catch (error) {
+    console.error('提交数据时发生错误:', error);
+  }
 };
 
+// 页面加载完成后执行
 onMounted(() => {
-  loadFromLocalStorage();
+  // 如果需要从后端加载数据，可以在这里调用相应的API
 });
 </script>
 

src/views/comprehensiveGuarantee/materialReserves/materialsDeclarationView.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
 import { defineProps, defineEmits } from 'vue';
 
@@ -44,31 +44,18 @@ const props = defineProps({
 
 const emits = defineEmits(['close']);
 
-const tableData = ref<any[]>([]);
-const approvalStatus = ref('待审批'); // 初始状态设为待审批
+// 静态数据
+const tableData = ref([
+  { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
+  { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
+  { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
+]);
+
+const approvalStatus = ref('待审批');
 
-const loadFromLocalStorage = () => {
-  const storedData = localStorage.getItem('tableData');
-  const storedApprovalStatus = localStorage.getItem('approvalStatus');
-  if (storedData) {
-    tableData.value = JSON.parse(storedData);
-  } else {
-    tableData.value = [
-      { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
-      { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
-      { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
-    ];
-  }
-  if (storedApprovalStatus) {
-    approvalStatus.value = storedApprovalStatus;
-  }
-};
 const handleReturn = () => {
   emits('close');
 };
-onMounted(() => {
-  loadFromLocalStorage();
-});
 </script>
 
 <style scoped>

src/views/comprehensiveGuarantee/materialReserves/materialsDistribution.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div v-show="!materialsDeclarationViewState.show && !materialsDeclarationEidtState.show && !materialsDistributionAddState.show">
+    <div v-show="!materialsDistributionViewState.show && !materialsDeclarationEidtState.show && !materialsDistributionAddState.show">
       <h1>物资储备管理</h1>
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
@@ -35,10 +35,10 @@
         @pagination="fetchWorkrData"
       />
     </div>
+    <MaterialsDistributionView v-if="materialsDistributionViewState.show" :event-id="materialsDistributionViewState.eventId" @close="handleCancel" />
+    <MaterialsDeclarationEidt v-if="materialsDeclarationEidtState.show" :event-id="materialsDeclarationEidtState.eventId" @close="handleCancel" />
+    <MaterialsDistributionAdd v-if="materialsDistributionAddState.show" @close="handleCancel" />
   </div>
-  <MaterialsDeclarationView v-if="materialsDeclarationViewState.show" :event-id="materialsDeclarationViewState.eventId" @close="handleCancel" />
-  <MaterialsDeclarationEidt v-if="materialsDeclarationEidtState.show" :event-id="materialsDeclarationEidtState.eventId" @close="handleCancel" />
-  <MaterialsDistributionAdd v-if="materialsDistributionAddState.show" @close="handleCancel" />
 </template>
 
 <script setup lang="ts">
@@ -46,7 +46,7 @@ import { onMounted, reactive, ref, toRefs } from 'vue';
 import { ElTable, ElTableColumn, ElButton, ElText } from 'element-plus';
 import { ComponentInternalInstance, getCurrentInstance } from 'vue';
 import Pagination from '@/components/Pagination/index.vue'; // 假设这是分页组件的路径
-import MaterialsDeclarationView from './materialsDeclarationView.vue'; // 查看详情组件
+import MaterialsDistributionView from './materialsDistributionView.vue'; // 查看详情组件
 import MaterialsDeclarationEidt from './materialsDeclarationEidt.vue'; // 编辑组件
 import MaterialsDistributionAdd from './materialsDistributionAdd.vue'; // 编辑组件
 const loading = ref(true);
@@ -122,7 +122,7 @@ const resetQuery = () => {
   handleQuery();
 };
 
-let materialsDeclarationViewState = reactive({
+let materialsDistributionViewState = reactive({
   show: false,
   eventId: ''
 });
@@ -140,8 +140,8 @@ const handleAdd = () => {
   materialsDistributionAddState.show = true;
 };
 const handleView = (row: any) => {
-  materialsDeclarationViewState.eventId = row.id;
-  materialsDeclarationViewState.show = true;
+  materialsDistributionViewState.eventId = row.id;
+  materialsDistributionViewState.show = true;
 };
 
 const handleUpdate = (row: any) => {
@@ -150,7 +150,7 @@ const handleUpdate = (row: any) => {
 };
 
 const handleCancel = () => {
-  materialsDeclarationViewState.show = false;
+  materialsDistributionViewState.show = false;
   materialsDeclarationEidtState.show = false;
   materialsDistributionAddState.show = false;
 };

src/views/comprehensiveGuarantee/materialReserves/materialsDistributionEdit.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="app-container p-2">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <h2>编辑</h2>
+        <p class="report-period">申报金额：20000.00元</p>
+      </el-col>
+      <el-col :lg="24" :xs="24">
+        <el-table :data="tableData" border height="400">
+          <el-table-column label="序号" prop="seqNo" width="80">
+            <template #default="{ $index }">
+              <span>{{ $index + 1 }}</span>
+            </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>
+            </template>
+          </el-table-column>
+          <el-table-column label="物资名称" prop="materialName">
+            <template #default="{ row, $index }">
+              <span
+                class="editable-span"
+                contenteditable="true"
+                @blur="saveEdit($index, 'materialName', $event.target.innerText)"
+                v-text="row.materialName"
+              ></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="物资数量（件）" prop="quantity">
+            <template #default="{ row, $index }">
+              <span
+                class="editable-span"
+                contenteditable="true"
+                @blur="saveEdit($index, 'quantity', $event.target.innerText)"
+                v-text="row.quantity"
+              ></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="物资单价（元）" prop="unitPrice">
+            <template #default="{ row, $index }">
+              <span
+                class="editable-span"
+                contenteditable="true"
+                @blur="saveEdit($index, 'unitPrice', $event.target.innerText)"
+                v-text="row.unitPrice"
+              ></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="物资用途" prop="purpose">
+            <template #default="{ row, $index }">
+              <span
+                class="editable-span"
+                contenteditable="true"
+                @blur="saveEdit($index, 'purpose', $event.target.innerText)"
+                v-text="row.purpose"
+              ></span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <div class="common-dialog-footer" style="width: 100%; justify-content: center; display: flex">
+        <el-row :span="24" :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" @click="handleAddRow">新增一项</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" @click="handleSave">提交</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" @click="handleReturn">取消</el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
+import axios from 'axios'; // 引入axios
+
+const props = defineProps({
+  eventId: String
+});
+
+const emits = defineEmits(['close']);
+
+const tableData = ref([
+  { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
+  { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
+  { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
+]);
+
+const addDefaultRow = () => {
+  const newRow = {
+    materialType: '',
+    materialName: '',
+    quantity: '',
+    unitPrice: '',
+    purpose: ''
+  };
+  tableData.value.push(newRow);
+};
+
+const saveEdit = (index: number, key: string, value: string) => {
+  if (key === 'quantity' || key === 'unitPrice') {
+    const numValue = parseFloat(value);
+    if (isNaN(numValue)) {
+      return;
+    }
+    value = numValue.toString();
+  }
+  tableData.value[index][key] = value;
+};
+
+const handleAddRow = () => addDefaultRow();
+
+const handleReturn = () => {
+  emits('close');
+};
+
+const handleSave = async () => {
+  try {
+    const response = await axios.post('/api/submitData', { data: tableData.value });
+    console.log('数据已成功提交:', response.data);
+  } catch (error) {
+    console.error('提交数据时发生错误:', error);
+  }
+};
+
+onMounted(() => {
+  // 如果需要从后端加载数据，可以在这里调用相应的API
+});
+</script>
+
+<style scoped>
+.app-container {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+.report-period {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #606266;
+}
+.editable-span {
+  cursor: pointer;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.editable-span[contenteditable='true'] {
+  white-space: normal;
+  outline: none; /* 移除编辑时的焦点边框 */
+}
+.editable-span[contenteditable='true']:empty::before {
+  content: attr(data-placeholder); /* 可选：为空时显示占位符 */
+  color: #999;
+}
+.common-dialog-footer {
+  margin-top: 20px;
+}
+</style>

src/views/comprehensiveGuarantee/materialReserves/materialsDistributionView.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="app-container p-2">
+    <el-row :gutter="20">
+      <el-col :span="20">
+        <h2>详情</h2>
+        <div class="report-info">
+          <p class="report-amount">调度目的：应对高州泰利台风前置</p>
+          <p class="approval-status">审批情况：{{ approvalStatus }}</p>
+        </div>
+      </el-col>
+      <el-col :lg="24" :xs="24">
+        <el-table :data="tableData" border height="400">
+          <el-table-column label="序号" prop="seqNo" width="80">
+            <template #default="{ $index }">
+              <span>{{ $index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="物资类型" prop="materialType"></el-table-column>
+          <el-table-column label="物资名称" prop="materialName"></el-table-column>
+          <el-table-column label="物资数量（件）" prop="quantity"></el-table-column>
+          <el-table-column label="物资用途" prop="purpose"></el-table-column>
+        </el-table>
+      </el-col>
+      <div class="common-dialog-footer" style="width: 100%; justify-content: center; display: flex">
+        <el-row :span="24" :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="danger" @click="handleReturn">返回</el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  eventId: String
+});
+
+const emits = defineEmits(['close']);
+
+// 静态数据
+const tableData = ref([
+  { materialType: '三防物资', materialName: '雨衣', quantity: '100', purpose: '高州泰利台风前置' },
+  { materialType: '三防物资', materialName: '水鞋', quantity: '10', purpose: '高州泰利台风前置' },
+  { materialType: '三防物资', materialName: '雨伞', quantity: '50', purpose: '高州泰利台风前置' }
+]);
+
+const approvalStatus = ref('待审批');
+
+const handleReturn = () => {
+  emits('close');
+};
+</script>
+
+<style scoped>
+.app-container {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.report-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.report-amount,
+.approval-status {
+  font-size: 14px;
+  color: #606266;
+}
+</style>