救援资源管理：优化救援人员单位界面、搭建救助站首页、新增、修改、查看界面和调试界面

src/api/comprehensiveGuarantee/reliefResourceManagement/rescueStation.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request';
+export function getStations(params) {
+  return request({
+    url: '/api/resource_provison/emergency/rescue_stations/',
+    method: 'get',
+    params: params
+  });
+}
+export function getStation(id) {
+  return request({
+    url: `/api/resource_provison/emergency/rescue_stations/${id}`,
+    method: 'get'
+  });
+}
+export function uploadStation(id, station) {
+  return request({
+    url: '/api/resource_provison/emergency/rescue_stations/' + id,
+    method: 'put',
+    data: station
+  });
+}
+export function addStation(stations) {
+  return request({
+    url: '/api/resource_provison/emergency/rescue_stations/',
+    method: 'post',
+    data: stations
+  });
+}

src/views/comprehensiveGuarantee/reliefResourceManagement/reliefTalents.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div v-show="!reliefTalentsAddState.show && !reliefTalentsEditState.show && !reliefTalentsViewState.show">
-      <h1>物资储备管理</h1>
+      <h1>救援人才管理</h1>
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button type="primary" icon="Plus" @click="handleAdd">录入</el-button>
@@ -17,7 +17,7 @@
             {{ (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="name" fixed="left" />
         <el-table-column label="联系电话" align="center" prop="contact_number" />
         <el-table-column label="性别" align="center" prop="gender" />
         <el-table-column label="现在地址" align="center" prop="current_address" />

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStation.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="app-container">
+    <div v-show="!rescueStationAddState.show && !rescueStationEditState.show && !rescueStationViewState.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="id" align="center" prop="id" fixed="left" />
+        <el-table-column label="名称" align="center" prop="name" fixed="left" />
+        <el-table-column label="类型" align="center" prop="type" />
+        <el-table-column label="所属区县" align="center" prop="county" />
+        <el-table-column label="所属镇街" align="center" prop="town" />
+        <el-table-column label="地址" align="center" prop="address" />
+        <el-table-column label="联系人" align="center" prop="contacts" />
+        <el-table-column label="联系电话" align="center" prop="phone" />
+        <el-table-column label="开放时间" align="center" prop="open_time" />
+        <el-table-column label="更新时间" align="center" prop="update_time" />
+        <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>
+    <RescueStationAdd v-if="rescueStationAddState.show" @close="handleCancel" @refresh="fetchStationData" />
+    <RescueStationEdit v-if="rescueStationEditState.show" :event-id="rescueStationEditState.eventId" @close="handleCancel" @refresh="fetchStationData" />
+    <RescueStationView v-if="rescueStationViewState.show" :event-id="rescueStationViewState.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 { getStations } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueStation';
+import Pagination from '@/components/Pagination/index.vue';
+import RescueStationAdd from './rescueStationAdd.vue';
+import RescueStationEdit from './rescueStationEdit.vue';
+import RescueStationView from './rescueStationView.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: '',
+  county: '',
+  town: '',
+  address: '',
+  contacts: '',
+  phone: '',
+  open_time: '',
+  update_time: '',
+  id: ''
+});
+
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10
+  }
+});
+
+const { queryParams, form } = toRefs(data);
+
+const fetchStationData = async () => {
+  try {
+    loading.value = true;
+    const response = await getStations(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 rescueStationViewState = reactive({
+  show: false,
+  eventId: ''
+});
+
+let rescueStationEditState = reactive({
+  show: false,
+  eventId: ''
+});
+let rescueStationAddState = reactive({
+  show: false
+});
+const handleAdd = () => {
+  rescueStationAddState.show = true;
+};
+
+const handleView = (row: any) => {
+  rescueStationViewState.eventId = row.id;
+  rescueStationViewState.show = true;
+};
+
+const handleUpdate = (row: any) => {
+  rescueStationEditState.eventId = row.id;
+  rescueStationEditState.show = true;
+};
+
+const handleCancel = () => {
+  rescueStationViewState.show = false;
+  rescueStationEditState.show = false;
+  rescueStationAddState.show = false;
+};
+
+onMounted(() => {
+  fetchStationData();
+});
+</script>
+
+<style scoped>
+.app-container {
+  overflow-x: auto; /* 当内容溢出时允许水平滚动 */
+}
+</style>

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStationAdd.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">新建救援单位</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" label-width="auto">
+          <el-form-item label="名称：" prop="name">
+            <el-input v-model="formData.name" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="类型：" prop="type">
+            <el-input v-model="formData.type" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="所属区县：" prop="county">
+            <el-input v-model="formData.county" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="所属镇街：" prop="town">
+            <el-input v-model="formData.town" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="地址：" prop="address">
+            <el-input v-model="formData.address" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="联系人：" prop="contacts">
+            <el-input v-model="formData.contacts" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="联系电话：" prop="phone">
+            <el-input v-model="formData.phone" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="开放时间：" prop="open_time">
+            <el-input v-model="formData.open_time" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="更新时间：" prop="update_time">
+            <el-input v-model="formData.update_time" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { addStation } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueStation';
+
+const emits = defineEmits(['close']);
+
+const formData = ref({
+  name: '',
+  type: '',
+  county: '',
+  town: '',
+  address: '',
+  contacts: '',
+  phone: '',
+  open_time: '',
+  update_time: '',
+  id: ''
+});
+
+const rules = ref({
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
+  county: [{ required: true, message: '所属区县不能为空', trigger: 'blur' }],
+  town: [{ required: true, message: '所属镇街不能为空', trigger: 'blur' }],
+  address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
+  contacts: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
+  open_time: [{ required: true, message: '开放时间不能为空', trigger: 'blur' }],
+  update_time: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }]
+});
+
+const form = ref(null); // 定义 form 变量
+
+const closeDialog = () => {
+  emits('close');
+};
+
+const router = useRouter();
+
+// 提交表单
+const submitForm = async () => {
+  try {
+    await form.value.validate();
+    const payload = {
+      stations: [formData.value]
+    };
+    const response = await addStation(payload);
+    if (response.code === 200) {
+      ElMessage.success('提交成功');
+      closeDialog();
+      emits('refresh');
+    } else {
+      ElMessage.error(response.msg || '提交失败，请稍后再试');
+    }
+  } catch (error) {
+    ElMessage.error('表单验证失败，请检查输入');
+  }
+};
+</script>
+
+<style scoped></style>

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStationEdit.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">编辑</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" label-width="auto">
+          <el-form-item label="名称：" prop="name">
+            <el-input v-model="formData.name" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="类型：" prop="type">
+            <el-input v-model="formData.type" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="所属区县：" prop="county">
+            <el-input v-model="formData.county" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="所属镇街：" prop="town">
+            <el-input v-model="formData.town" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="地址：" prop="address">
+            <el-input v-model="formData.address" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="联系人：" prop="contacts">
+            <el-input v-model="formData.contacts" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="联系电话：" prop="phone">
+            <el-input v-model="formData.phone" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="开放时间：" prop="open_time">
+            <el-input v-model="formData.open_time" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="更新时间：" prop="update_time">
+            <el-input v-model="formData.update_time" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button type="primary" @click="submitForm">确定</el-button>
+          <el-button @click="closeDialog">取消</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getStation, uploadStation } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueStation';
+
+const emits = defineEmits(['close']);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+
+const formData = ref({
+  name: '',
+  type: '',
+  county: '',
+  town: '',
+  address: '',
+  contacts: '',
+  phone: '',
+  open_time: '',
+  update_time: '',
+  id: ''
+});
+
+const closeDialog = () => {
+  emits('close');
+};
+
+const fetchUnitData = async () => {
+  const response = await getStation(props.eventId);
+  if (response.code === 200) {
+    formData.value = response.station;
+  } else {
+    ElMessage.error('未找到相关数据');
+  }
+};
+const submitForm = async () => {
+  // 假设表单已经通过验证
+  const response = await uploadStation(props.eventId, formData.value);
+  if (response.code === 200) {
+    ElMessage.success('提交成功');
+    closeDialog();
+    emits('refresh');
+  } else {
+    ElMessage.error(response.msg);
+  }
+};
+onMounted(() => {
+  fetchUnitData();
+});
+</script>
+
+<style scoped></style>

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStationView.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">查看详情</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="form" :model="formData" label-width="auto">
+          <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="type">
+            <el-input v-model="formData.type" 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="town">
+            <el-input v-model="formData.town" 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="contacts">
+            <el-input v-model="formData.contacts" 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="open_time">
+            <el-input v-model="formData.open_time" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="更新时间：" prop="update_time">
+            <el-input v-model="formData.update_time" style="width: 468px !important" disabled />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button type="primary" @click="closeDialog">返回</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { getStation } from '@/api/comprehensiveGuarantee/reliefResourceManagement/rescueStation';
+
+const emits = defineEmits(['close']);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+
+const formData = ref({
+  name: '',
+  type: '',
+  county: '',
+  town: '',
+  address: '',
+  contacts: '',
+  phone: '',
+  open_time: '',
+  update_time: '',
+  id: ''
+});
+
+const closeDialog = () => {
+  emits('close');
+};
+
+const fetchStationData = async () => {
+  const response = await getStation(props.eventId);
+  if (response.code === 200) {
+    formData.value = response.station;
+  } else {
+    ElMessage.error('未找到相关数据');
+  }
+};
+onMounted(() => {
+  fetchStationData();
+});
+</script>
+
+<style scoped></style>

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueUnit.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div v-show="!rescueUnitAddState.show && !rescueUnitEditState.show && !rescueUnitViewState.show">
-      <h1>物资储备管理</h1>
+      <h1>救援人员单位管理</h1>
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button type="primary" icon="Plus" @click="handleAdd">录入</el-button>
@@ -17,13 +17,15 @@
             {{ (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="name" fixed="left" />
         <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="longitude" />
+        <el-table-column label="维度" align="center" prop="latitude" />
         <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">
@@ -74,6 +76,8 @@ const initFormData = reactive({
   address: '',
   responsible_office: '',
   team_size: '',
+  longitude: '',
+  latitude: '',
   competent_organization: ''
 });
 

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueUnitAdd.vue

@@ -27,6 +27,12 @@
           <el-form-item label="地址：" prop="address">
             <el-input v-model="formData.address" style="width: 468px !important" />
           </el-form-item>
+          <el-form-item label="经度：" prop="longitude">
+            <el-input v-model="formData.longitude" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="维度：" prop="latitude">
+            <el-input v-model="formData.latitude" style="width: 468px !important" />
+          </el-form-item>
           <el-form-item label="主管单位：" prop="competent_organization">
             <el-input v-model="formData.competent_organization" style="width: 468px !important" />
           </el-form-item>
@@ -56,6 +62,8 @@ const formData = ref({
   address: '',
   responsible_office: '',
   team_size: '',
+  longitude: '',
+  latitude: '',
   competent_organization: ''
 });
 
@@ -67,6 +75,8 @@ const rules = ref({
   address: [{ required: true, message: '负责人职务不能为空', trigger: 'blur' }],
   responsible_office: [{ required: true, message: '队伍人数不能为空', trigger: 'blur' }],
   team_size: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
+  longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
+  latitude: [{ required: true, message: '维度不能为空', trigger: 'blur' }],
   competent_organization: [{ required: true, message: '主管单位不能为空', trigger: 'blur' }]
 });
 

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueUnitEdit.vue

@@ -27,6 +27,12 @@
           <el-form-item label="地址：" prop="address">
             <el-input v-model="formData.address" style="width: 468px !important" />
           </el-form-item>
+          <el-form-item label="经度：" prop="longitude">
+            <el-input v-model="formData.longitude" style="width: 468px !important" />
+          </el-form-item>
+          <el-form-item label="维度：" prop="latitude">
+            <el-input v-model="formData.latitude" style="width: 468px !important" />
+          </el-form-item>
           <el-form-item label="主管单位：" prop="competent_organization">
             <el-input v-model="formData.competent_organization" style="width: 468px !important" />
           </el-form-item>
@@ -58,6 +64,8 @@ const formData = ref({
   address: '',
   responsible_office: '',
   team_size: '',
+  longitude: '',
+  latitude: '',
   competent_organization: ''
 });
 

src/views/comprehensiveGuarantee/reliefResourceManagement/rescueUnitView.vue

@@ -27,6 +27,12 @@
           <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="longitude">
+            <el-input v-model="formData.longitude" style="width: 468px !important" disabled />
+          </el-form-item>
+          <el-form-item label="维度：" prop="latitude">
+            <el-input v-model="formData.latitude" style="width: 468px !important" disabled />
+          </el-form-item>
           <el-form-item label="主管单位：" prop="competent_organization">
             <el-input v-model="formData.competent_organization" style="width: 468px !important" disabled />
           </el-form-item>
@@ -57,6 +63,8 @@ const formData = ref({
   address: '',
   responsible_office: '',
   team_size: '',
+  longitude: '',
+  latitude: '',
   competent_organization: ''
 });