物资调度管理的列表接口、查看详情界面及接口调试

src/api/comprehensiveGuarantee/materialReserveManagement/materialsDistribution.ts

@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+// 查询
+export function getDispatchtList(params?: any) {
+  return request({
+    url: '/api/resource_provison/material/dispatch/list',
+    method: 'get',
+    params: params
+  });
+}
+// 详情
+export function getDispatchInfo(id) {
+  return request({
+    url: '/api/resource_provison/material/dispatch/info/' + id,
+    method: 'get'
+  });
+}
+// 新增
+export function createDispatch(data) {
+  return request({
+    url: '/api/resource_provison/material/dispatch/create',
+    method: 'post',
+    data: data
+  });
+}

src/types/components.d.ts

@@ -24,24 +24,14 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -51,45 +41,28 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
-    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -102,7 +75,6 @@ declare module 'vue' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/comprehensiveGuarantee/materialReserves/materialsDistribution.vue

@@ -15,11 +15,11 @@
             {{ (queryParams.page - 1) * queryParams.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="调度目的" align="center" prop="dispatching_purpose" />
+        <el-table-column label="调度目的" align="center" prop="dispatch_purpose" />
         <el-table-column label="调度日期" align="center" prop="dispatch_date" />
-        <el-table-column label="申报单位" align="center" prop="application_unit" />
-        <el-table-column label="申请人" align="center" prop="declarant" />
-        <el-table-column label="审批情况" align="center" prop="approval_status" />
+        <el-table-column label="申报单位" align="center" prop="dispatch_unit_name" />
+        <el-table-column label="申请人" align="center" prop="dispatch_person_name" />
+        <el-table-column label="审批情况" align="center" prop="dispatch_status" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
           <template #default="scope">
             <el-text class="common-btn-text-primary" @click="handleView(scope.row)">详情</el-text>
@@ -35,7 +35,7 @@
         @pagination="fetchWorkrData"
       />
     </div>
-    <MaterialsDistributionView v-if="materialsDistributionViewState.show" :event-id="materialsDistributionViewState.eventId" @close="handleCancel" />
+    <MaterialsDistributionView v-if="materialsDistributionViewState.show" :id="materialsDistributionViewState.id" @close="handleCancel" />
     <MaterialsDistributionAdd v-if="materialsDistributionAddState.show" @close="handleCancel" />
   </div>
 </template>
@@ -46,7 +46,8 @@ import { ElTable, ElTableColumn, ElButton, ElText } from 'element-plus';
 import { ComponentInternalInstance, getCurrentInstance } from 'vue';
 import Pagination from '@/components/Pagination/index.vue'; // 假设这是分页组件的路径
 import MaterialsDistributionView from './materialsDistributionView.vue'; // 查看详情组件
-import MaterialsDistributionAdd from './materialsDistributionAdd.vue'; // 编辑组件
+import MaterialsDistributionAdd from './materialsDistributionAdd.vue';
+import { getDispatchtList } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDistribution'; // 编辑组件
 const loading = ref(true);
 const showSearch = ref(true);
 const multiple = ref(true);
@@ -59,11 +60,13 @@ const selectedRow = ref<any | null>(null);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const initFormData = reactive({
-  dispatching_purpose: '',
+  dispatch_purpose: '',
   dispatch_date: '',
-  application_unit: '',
-  declarant: '',
-  approval_status: ''
+  dispatch_unit: '',
+  dispatch_unit_name: '',
+  dispatch_person_name: '',
+  dispatch_person: '',
+  dispatch_status: ''
 });
 
 const data = reactive({
@@ -75,39 +78,26 @@ const data = reactive({
 });
 
 const { queryParams, form } = toRefs(data);
-const mockData = [
-  {
-    id: 1,
-    dispatch_date: '2024-10-29 12:23:00',
-    dispatching_purpose: '应对高州泰利台风前置',
-    application_unit: '茂名市应急管理局',
-    declarant: 'XX',
-    approval_status: '未审批'
-  },
-  {
-    id: 2,
-    dispatch_date: '2024-10-30 12:23:00',
-    dispatching_purpose: '应对电白泰利台风前置',
-    application_unit: '茂名市应急管理局',
-    declarant: 'XX',
-    approval_status: '审批通过'
-  },
-  {
-    id: 3,
-    dispatch_date: '2024-10-31 12:23:00',
-    dispatching_purpose: '应对茂南泰利台风前置',
-    application_unit: '茂名市应急管理局',
-    declarant: 'XX',
-    approval_status: '审批不通过'
-  }
-];
 
+const statusMap = {
+  '1': '未审批',
+  '2': '审批通过',
+  '3': '审批不通过'
+};
 const fetchWorkrData = () => {
   loading.value = true;
-  tableData.value = mockData;
-  total.value = mockData.length;
-
-  loading.value = false;
+  getDispatchtList(queryParams.value)
+    .then((res) => {
+      const transformedData = res.data.map(item => ({
+        ...item,
+        dispatch_status: statusMap[item.dispatch_status] || '未知状态'
+      }));
+      tableData.value = transformedData;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 
 const handleQuery = () => {
@@ -122,24 +112,24 @@ const resetQuery = () => {
 
 let materialsDistributionViewState = reactive({
   show: false,
-  eventId: ''
+  id: ''
 });
 
 let materialsDistributionAddState = reactive({
   show: false,
-  eventId: ''
+  id: ''
 });
 
 const handleAdd = () => {
   materialsDistributionAddState.show = true;
 };
 const handleView = (row: any) => {
-  materialsDistributionViewState.eventId = row.id;
+  materialsDistributionViewState.id = row.id;
   materialsDistributionViewState.show = true;
 };
 
 const handleUpdate = (row: any) => {
-  materialsDistributionAddState.eventId = row.id;
+  materialsDistributionAddState.id = row.id;
   materialsDistributionAddState.show = true;
 };
 

src/views/comprehensiveGuarantee/materialReserves/materialsDistributionAdd.vue

@@ -1,77 +1,81 @@
 <template>
-  <div class="app-container p-2">
-    <el-row :gutter="20">
-      <el-col :span="6">
-        <h2>新增</h2>
-      </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="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 class="common-dialog">
+    <div class="common-dialog-content">
+      <el-row :gutter="20">
+        <div class="common-dialog-title-box">
+          <i class="common-dialog-title-icon" />
+          <div>新增物资调度</div>
+        </div>
+        <el-col :lg="24" :xs="24">
+          <div class="common-dialog-box">
+            <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="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>
+          </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-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>
   </div>
 </template>
 
 <script setup lang="ts">
-
 const props = defineProps({
   eventId: String
 });

src/views/comprehensiveGuarantee/materialReserves/materialsDistributionView.vue

@@ -2,49 +2,57 @@
   <div class="common-dialog">
     <div class="common-dialog-content">
       <div class="common-dialog-title-box">
-        <h3 class="common-dialog-title">查看详情</h3>
+        <i class="common-dialog-title-icon" />
+        <div>物资调度详情</div>
       </div>
       <div class="common-dialog-box">
-        <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
-          <el-form-item label="姓名：" prop="name">
-            <el-input v-model="formData.name" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="所属区县：" prop="county">
-            <el-input v-model="formData.county" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="专家类型：" prop="expert_type">
-            <el-input v-model="formData.expert_type" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="职位：" prop="position">
-            <el-input v-model="formData.position" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="单位：" prop="unit">
-            <el-input v-model="formData.unit" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="联系电话：" prop="phone">
-            <el-input v-model="formData.phone" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="现在地址：" prop="address">
-            <el-input v-model="formData.address" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="状态：" prop="status">
-            <el-input v-model="formData.status" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="擅长事故类型：" prop="accident_type">
-            <el-input v-model="formData.accident_type" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="救援经历：" prop="rescue_experience">
-            <el-input v-model="formData.rescue_experience" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="出生日期：" prop="birthdate">
-            <el-input v-model="formData.birthdate" style="width: 468px !important" disabled />
-          </el-form-item>
-          <el-form-item label="工作日期：" prop="work_date">
-            <el-input v-model="formData.work_date" style="width: 468px !important" disabled />
-          </el-form-item>
-        </el-form>
-        <div class="common-dialog-footer">
-          <el-button type="primary" @click="closeDialog">返回</el-button>
+        <el-row :gutter="24" style="width: 100%">
+          <el-col :span="12">
+            <div class="text-box">
+              <div class="text1">调度目的：</div>
+              <div v-show="!!detailData.dispatch_purpose" class="text2">{{ detailData.dispatch_purpose }}</div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="text-box">
+              <div class="text1">调度日期：</div>
+              <div v-show="!!detailData.dispatch_date" class="text2">{{ detailData.dispatch_date }}</div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24" style="width: 100%">
+          <el-col :span="12">
+            <div class="text-box">
+              <div class="text1">申报单位：</div>
+              <div v-show="!!detailData.dispatch_unit_name" class="text2">{{ detailData.dispatch_unit_name }}</div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="text-box">
+              <div class="text1">申请人：</div>
+              <div v-show="!!detailData.dispatch_person_name" class="text2">{{ detailData.dispatch_person_name }}</div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-table :data="detailData.detail" border :height="height">
+          <el-table-column label="序号" width="80" align="center">
+            <template #default="{ $index }">
+              <span>{{ $index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="仓库" prop="warehouse_name" align="center" />
+          <el-table-column label="物资类型" prop="material_type" align="center" />
+          <el-table-column label="物资代码" prop="material_code" align="center" />
+          <el-table-column label="物资名称" prop="material_name" align="center" />
+          <el-table-column label="物资数量（件）" prop="material_quantity" align="center" />
+          <el-table-column label="物资用途" prop="material_purpose" align="center" />
+        </el-table>
+        <div class="common-dialog-footer" style="margin-top: 18px">
+          <el-row :span="24" :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button type="primary" @click="handleReturn">返回</el-button>
+            </el-col>
+          </el-row>
         </div>
       </div>
     </div>
@@ -52,32 +60,62 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { getDispatchInfo } from '@/api/comprehensiveGuarantee/materialReserveManagement/materialsDistribution';
 
-const emits = defineEmits(['close']);
-const props = defineProps<{
-  eventId: string | number;
-}>();
+const props = defineProps({
+  id: String
+});
 
-// 模拟的数据
-const formData = ref({
-  name: '张三',
-  county: '朝阳区',
-  expert_type: '安全工程',
-  position: '高级工程师',
-  unit: '北京市应急管理局',
-  phone: '13800138000',
-  address: '北京市朝阳区XX路XX号',
-  status: '在职',
-  accident_type: '火灾、爆炸',
-  rescue_experience: '参与过多次重大事故救援，经验丰富。',
-  birthdate: '1975-05-20',
-  work_date: '2000-01-01'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const emits = defineEmits(['close']);
+let detailData = reactive({
+  dispatch_date: '',
+  dispatch_purpose: '',
+  dispatch_unit_name: '',
+  dispatch_person_name: '',
+  dispatch_status: '',
+  detail: []
 });
 
-const closeDialog = () => {
+const handleReturn = () => {
   emits('close');
 };
+
+let height = ref(300);
+// 计算表格高度
+const calcHeight = () => {
+  const el = document.getElementsByClassName('common-dialog-content')[0];
+  height.value = el && el.clientHeight - 173 > 400 ? el.clientHeight - 173 : 300;
+};
+onMounted(() => {
+  getDispatchInfo(props.id).then((res) => {
+    detailData.dispatch_date = res.data.dispatch_date;
+    detailData.dispatch_purpose = res.data.dispatch_purpose;
+    detailData.dispatch_unit_name = res.data.dispatch_unit_name;
+    detailData.dispatch_person_name = res.data.dispatch_person_name;
+    detailData.dispatch_status = res.data.dispatch_status;
+    detailData.detail = res.data.detail;
+  });
+  calcHeight();
+  window.addEventListener('resize', calcHeight);
+});
+onUnmounted(() => {
+  window.removeEventListener('resize', calcHeight);
+});
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.text-box {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+  color: rgba(0, 0, 0, 0.85);
+  .text1 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .text2 {
+    font-size: 18px;
+  }
+}
+</style>