|
@@ -0,0 +1,148 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div v-show="!rescueUnitAddState.show && !rescueUnitEditState.show && !rescueUnitViewState.show">
|
|
|
+ <h1>物资储备管理</h1>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" icon="Plus" @click="handleAdd">录入</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" icon="Plus" @click="handleAdds">批量导入</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <el-table ref="multipleTable" v-loading="loading" :data="tableData" style="width: 100%" :max-height="400">
|
|
|
+ <el-table-column label="序号" align="center" width="55" fixed="left">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ (queryParams.page - 1) * queryParams.pageSize + scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="救援人员单位" align="center" prop="name" />
|
|
|
+ <el-table-column label="类型" align="center" prop="type" />
|
|
|
+ <el-table-column label="负责人" align="center" prop="responsible_person" />
|
|
|
+ <el-table-column label="联系电话" align="center" prop="contact_number" />
|
|
|
+ <el-table-column label="负责人职务" align="center" prop="responsible_office" />
|
|
|
+ <el-table-column label="队伍人数" align="center" prop="team_size" />
|
|
|
+ <el-table-column label="地址" align="center" prop="address" />
|
|
|
+ <el-table-column label="主管单位" align="center" prop="competent_organization" />
|
|
|
+ <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>
|
|
|
+ <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ v-model:page="queryParams.page"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @pagination="fetchUnitData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <RescueUnitAdd v-if="rescueUnitAddState.show" @close="handleCancel" @refresh="fetchUnitData" />
|
|
|
+ <RescueUnitEdit v-if="rescueUnitEditState.show" :event-id="rescueUnitEditState.eventId" @close="handleCancel" @refresh="fetchUnitData" />
|
|
|
+ <RescueUnitView v-if="rescueUnitViewState.show" :event-id="rescueUnitViewState.eventId" @close="handleCancel" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { onMounted, reactive, ref, toRefs } from 'vue';
|
|
|
+import { ElTable, ElTableColumn, ElButton, ElText } from 'element-plus';
|
|
|
+import { ComponentInternalInstance, getCurrentInstance } from 'vue';
|
|
|
+import { getUnits } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueUnit';
|
|
|
+import Pagination from '@/components/Pagination/index.vue';
|
|
|
+import RescueUnitAdd from './rescueUnitAdd.vue';
|
|
|
+import RescueUnitEdit from './rescueUnitEdit.vue';
|
|
|
+import RescueUnitView from './rescueUnitView.vue';
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const ids = ref<Array<number | string>>([]);
|
|
|
+const single = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const tableData = ref<any[]>([]);
|
|
|
+const selectedRow = ref<any | null>(null);
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+
|
|
|
+const initFormData = reactive({
|
|
|
+ name: '',
|
|
|
+ type: '',
|
|
|
+ contact_number: '',
|
|
|
+ responsible_person: '',
|
|
|
+ address: '',
|
|
|
+ responsible_office: '',
|
|
|
+ team_size: '',
|
|
|
+ competent_organization: ''
|
|
|
+});
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const { queryParams, form } = toRefs(data);
|
|
|
+
|
|
|
+const fetchUnitData = async () => {
|
|
|
+ try {
|
|
|
+ loading.value = true;
|
|
|
+ const response = await getUnits(queryParams.value);
|
|
|
+ if (response.code === 200) {
|
|
|
+ tableData.value = response.data;
|
|
|
+ total.value = response.data.length;
|
|
|
+ } else {
|
|
|
+ console.error('获取数据失败:', response.msg);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('请求数据时发生错误:', error);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+let rescueUnitViewState = reactive({
|
|
|
+ show: false,
|
|
|
+ eventId: ''
|
|
|
+});
|
|
|
+
|
|
|
+let rescueUnitEditState = reactive({
|
|
|
+ show: false,
|
|
|
+ eventId: ''
|
|
|
+});
|
|
|
+let rescueUnitAddState = reactive({
|
|
|
+ show: false
|
|
|
+});
|
|
|
+const handleAdd = () => {
|
|
|
+ rescueUnitAddState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleView = (row: any) => {
|
|
|
+ rescueUnitViewState.eventId = row.id;
|
|
|
+ rescueUnitViewState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleUpdate = (row: any) => {
|
|
|
+ rescueUnitEditState.eventId = row.id;
|
|
|
+ rescueUnitEditState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ rescueUnitViewState.show = false;
|
|
|
+ rescueUnitEditState.show = false;
|
|
|
+ rescueUnitAddState.show = false;
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ fetchUnitData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.app-container {
|
|
|
+ overflow-x: auto; /* 当内容溢出时允许水平滚动 */
|
|
|
+}
|
|
|
+</style>
|