数据管理

src/components/DataImport/index.vue

@@ -4,9 +4,9 @@
       <div class="title">操作说明：</div>
       <div class="step-container">
         <el-steps direction="vertical">
-          <el-step status="process" title="首先点击“模板下载，下载录入模板”" />
-          <el-step status="process" :title="'在模板空白处中填写' + stepsText" />
-          <el-step status="process" title="通过点击“浏览，选择导入文件，点击“导入”按钮，完成导入" />
+          <el-step status="process" title="首先点击“模板下载，下载录入模板”。" />
+          <el-step status="process" :title="'在模板空白处中填写' + stepsText + '。'" />
+          <el-step status="process" title="通过点击“导入按钮，浏览选择导入文件”，完成导入。" />
           <el-step
             status="process"
             :title="'导入成功，对于系统中没有的' + stepsText + '，进行新增操作对于原本系统已存在的' + stepsText + '，进行信息合并操作。'"

src/utils/olMap/olMap.ts

@@ -934,7 +934,7 @@ export class olMap {
     if (!this.vectorLayer) return;
     this.vectorLayer.getSource().clear();
   }
-  clearMarker2(name) {
+  clearMarker2(name = 'point') {
     // 新增图层
     if (!this.plotLayers[name]) {
       this.plotLayers[name] = new VectorLayer({

src/views/dataManagement/AddDataManagement.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <h3 class="common-dialog-title">{{ detailId ? '修改数据' : '新建数据' }}</h3>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto">
+          <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label + '：'" :prop="item.prop">
+            <el-input v-model="formData[item.prop]" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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(formRef)">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  dataType: String,
+  detailId: String
+});
+const emits = defineEmits(['onCancel', 'onConfirm']);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const formRef = ref(null);
+const formItem = ref([]);
+const formData = ref({});
+const rules = ref({});
+
+const closeDialog = () => {
+  emits('onCancel');
+};
+
+// 获取表单元素
+const getFormConfig = () => {
+  const data =
+    props.dataType === '1'
+      ? [
+          { label: '工程名称', prop: 'name', required: true },
+          { label: '建设单位', prop: 'unit', required: true },
+          { label: '人防专业监理工程师', prop: 'engineer' },
+          { label: '建设地点', prop: 'location' },
+          { label: '操作方式', prop: 'operation', required: true },
+          { label: '应建人防地下室面积(㎡)', prop: 'plannedArea' },
+          { label: '实建人防地下室面积(㎡)', prop: 'actualArea' },
+          { label: '更新时间', prop: 'updateTime' }
+        ]
+      : [
+          { label: '姓名', prop: 'name', required: true },
+          { label: '所属区域', prop: 'area', required: true },
+          { label: '单位', prop: 'company' },
+          { label: '职位', prop: 'official' },
+          { label: '联系电话', prop: 'phone' },
+          { label: '专家类型', prop: 'type', required: true }
+        ];
+  createRules(data);
+  if (props.detailId) {
+    const formObj = {};
+    data.forEach((item) => {
+      formObj[item.prop] = '';
+    });
+    formData.value = formObj;
+  }
+  formItem.value = data;
+};
+
+// 获取表单详情
+const getFormData = () => {
+  if (props.dataType === '1') {
+    if (props.detailId === '1') {
+      formData.value = {
+        id: '1',
+        name: '光华北路人防工程',
+        unit: '茂名市应急管理局',
+        maintainUnit: '茂名市应急管理局',
+        engineer: '',
+        location: '茂名市茂南区光华北路668号',
+        operation: '',
+        plannedArea: 122,
+        actualArea: 123,
+        updateTime: '2023-12-12 12:13'
+      };
+    } else if (props.detailId === '2') {
+      formData.value = {
+        id: '2',
+        name: '光华北路人防工程2',
+        unit: '茂名市应急管理局',
+        maintainUnit: '茂名市应急管理局',
+        engineer: '',
+        location: '茂名市茂南区光华北路668号',
+        operation: '',
+        plannedArea: 122,
+        actualArea: 123,
+        updateTime: '2023-12-12 12:13'
+      };
+    } else if (props.detailId === '3') {
+      formData.value = {
+        id: '3',
+        name: '光华北路人防工程3',
+        unit: '茂名市应急管理局',
+        maintainUnit: '茂名市应急管理局',
+        engineer: '',
+        location: '茂名市茂南区光华北路668号',
+        operation: '',
+        plannedArea: 122,
+        actualArea: 123,
+        updateTime: '2023-12-12 12:13'
+      };
+    }
+  } else {
+    formData.value = {
+      id: '1',
+      name: '陈洋',
+      area: '高州市',
+      company: '高州市明洋化工有限公司',
+      official: '工程师',
+      phone: '13509917455',
+      type: '森林火灾'
+    };
+  }
+};
+
+// 生成表单校验规则
+const createRules = (data) => {
+  const newRules = {};
+  data.forEach((item) => {
+    if (item.required) {
+      newRules[item.prop] = [{ required: true, message: item.label + '不能为空', trigger: 'blur' }];
+    }
+  });
+  rules.value = newRules;
+};
+
+// 提交表单
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      emits('onConfirm');
+      proxy?.$modal.msgSuccess(!props.detailId ? '新增成功' : '修改成功');
+    }
+  });
+};
+
+onMounted(() => {
+  if (props.dataType) {
+    getFormConfig();
+  }
+  // 修改获取详情
+  if (props.detailId) {
+    getFormData();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-textarea__inner) {
+  resize: none !important;
+}
+</style>

src/views/dataManagement/ViewDataManagement.vue

@@ -0,0 +1,152 @@
+<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="formRef" :model="formData" label-width="auto">
+          <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label + '：'" :prop="item.prop">
+            <el-input v-model="formData[item.prop]" class="custom-disabled" type="textarea" autosize disabled style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button type="primary" @click="closeDialog">取消</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  dataType: String,
+  detailId: String
+});
+const emits = defineEmits(['onCancel']);
+
+const formRef = ref(null);
+const formItem = ref([]);
+const formData = ref({});
+
+const closeDialog = () => {
+  emits('onCancel');
+};
+
+// 获取表单元素
+const getFormConfig = () => {
+  const data =
+    props.dataType === '1'
+      ? [
+          { label: '工程名称', prop: 'name', required: true },
+          { label: '建设单位', prop: 'unit', required: true },
+          { label: '人防专业监理工程师', prop: 'engineer' },
+          { label: '建设地点', prop: 'location' },
+          { label: '操作方式', prop: 'operation', required: true },
+          { label: '应建人防地下室面积(㎡)', prop: 'plannedArea' },
+          { label: '实建人防地下室面积(㎡)', prop: 'actualArea' },
+          { label: '更新时间', prop: 'updateTime' }
+        ]
+      : [
+          { label: '姓名', prop: 'name', required: true },
+          { label: '所属区域', prop: 'area', required: true },
+          { label: '单位', prop: 'company' },
+          { label: '职位', prop: 'official' },
+          { label: '联系电话', prop: 'phone' },
+          { label: '专家类型', prop: 'type', required: true }
+        ];
+  if (props.detailId) {
+    const formObj = {};
+    data.forEach((item) => {
+      formObj[item.prop] = '';
+    });
+    formData.value = formObj;
+  }
+  formItem.value = data;
+};
+
+// 获取表单详情
+const getFormData = () => {
+  if (props.dataType === '1') {
+    if (props.detailId === '1') {
+      formData.value = {
+        id: '1',
+        name: '光华北路人防工程',
+        unit: '茂名市应急管理局',
+        maintainUnit: '茂名市应急管理局',
+        engineer: '',
+        location: '茂名市茂南区光华北路668号',
+        operation: '',
+        plannedArea: 122,
+        actualArea: 123,
+        updateTime: '2023-12-12 12:13'
+      };
+    } else if (props.detailId === '2') {
+      formData.value = {
+        id: '2',
+        name: '光华北路人防工程2',
+        unit: '茂名市应急管理局',
+        maintainUnit: '茂名市应急管理局',
+        engineer: '',
+        location: '茂名市茂南区光华北路668号',
+        operation: '',
+        plannedArea: 122,
+        actualArea: 123,
+        updateTime: '2023-12-12 12:13'
+      };
+    } else if (props.detailId === '3') {
+      formData.value = {
+        id: '3',
+        name: '光华北路人防工程3',
+        unit: '茂名市应急管理局',
+        maintainUnit: '茂名市应急管理局',
+        engineer: '',
+        location: '茂名市茂南区光华北路668号',
+        operation: '',
+        plannedArea: 122,
+        actualArea: 123,
+        updateTime: '2023-12-12 12:13'
+      };
+    }
+  } else {
+    formData.value = {
+      id: '1',
+      name: '陈洋',
+      area: '高州市',
+      company: '高州市明洋化工有限公司',
+      official: '工程师',
+      phone: '13509917455',
+      type: '森林火灾'
+    };
+  }
+};
+
+onMounted(() => {
+  if (props.dataType) {
+    getFormConfig();
+  }
+  // 修改获取详情
+  if (props.detailId) {
+    getFormData();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-disabled {
+  :deep(.el-select__wrapper.is-disabled),
+  :deep(.el-input__wrapper),
+  :deep(.el-textarea__inner) {
+    background-color: #ffffff !important;
+  }
+  :deep(.el-select__wrapper.is-disabled .el-select__selected-item),
+  :deep(.el-input__inner),
+  :deep(.el-textarea__inner) {
+    color: rgba(0, 0, 0, 0.85) !important;
+    -webkit-text-fill-color: rgba(0, 0, 0, 0.85) !important;
+  }
+  :deep(.el-textarea__inner) {
+    resize: none !important;
+  }
+}
+</style>

src/views/dataManagement/dataManagementADD.vue

@@ -1,108 +0,0 @@
-<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" :rules="rules" 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="unit">
-            <el-input v-model="formData.unit" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="维护单位：" prop="maintainUnit">
-            <el-input v-model="formData.maintainUnit" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="人防专业监理工程师：" prop="engineer">
-            <el-input v-model="formData.engineer" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="建设地点：" prop="location">
-            <el-input v-model="formData.location" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="操作方式：" prop="operation">
-            <el-input v-model="formData.operation" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="应建人防地下室面积（㎡）：" prop="plannedArea">
-            <el-input v-model="formData.plannedArea" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="实建人防地下室面积（㎡）：" prop="actualArea">
-            <el-input v-model="formData.actualArea" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="更新时间：" prop="updateTime">
-            <el-input v-model="formData.updateTime" 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 { addPersonnel } from '@/api/dataManagement/dataManagement';
-import { ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-
-const emits = defineEmits(['close']);
-
-const formData = ref({
-  id: '',
-  name: '',
-  unit: '',
-  maintainUnit: '',
-  engineer: '',
-  location: '',
-  operation: '',
-  plannedArea: '',
-  actualArea: '',
-  updateTime: ''
-});
-
-const rules = ref({
-  name: [{ required: true, message: '工程名称不能为空', trigger: 'blur' }],
-  unit: [{ required: true, message: '建设单位不能为空', trigger: 'blur' }],
-  maintainUnit: [{ required: true, message: '维护单位不能为空', trigger: 'blur' }],
-  engineer: [{ required: true, message: '人防专业监理工程师不能为空', trigger: 'blur' }],
-  location: [{ required: true, message: '建设地点不能为空', trigger: 'blur' }],
-  operation: [{ required: true, message: '操作方式不能为空', trigger: 'blur' }],
-  plannedArea: [{ required: true, message: '应建人防地下室面积不能为空', trigger: 'blur' }],
-  actualArea: [{ required: true, message: '实建人防地下室面积不能为空', trigger: 'blur' }],
-  updateTime: [{ 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 = {
-      personnel_list: [formData.value]
-    };
-    const response = await addPersonnel(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/dataManagement/dataManagementEdit.vue

@@ -1,97 +0,0 @@
-<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" :rules="rules" 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="unit">
-            <el-input v-model="formData.unit" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="维护单位：" prop="maintainUnit">
-            <el-input v-model="formData.maintainUnit" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="人防专业监理工程师：" prop="engineer">
-            <el-input v-model="formData.engineer" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="建设地点：" prop="location">
-            <el-input v-model="formData.location" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="操作方式：" prop="operation">
-            <el-input v-model="formData.operation" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="应建人防地下室面积（㎡）：" prop="plannedArea">
-            <el-input v-model="formData.plannedArea" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="实建人防地下室面积（㎡）：" prop="actualArea">
-            <el-input v-model="formData.actualArea" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="更新时间：" prop="updateTime">
-            <el-input v-model="formData.updateTime" 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 { getPersonnel2, uploadPersonnel } from '@/api/dataManagement/dataManagement';
-
-const emits = defineEmits(['close']);
-const props = defineProps<{
-  eventId: string | number;
-}>();
-
-const formData = ref({
-  id: 1,
-  name: '光华北路人防工程',
-  unit: '茂名市应急管理局',
-  maintainUnit: '茂名市应急管理局',
-  engineer: '',
-  location: '茂名市茂南区光华北路668号',
-  operation: '',
-  plannedArea: 122,
-  actualArea: 123,
-  updateTime: '2023/12/12 12:13'
-});
-
-const closeDialog = () => {
-  emits('close');
-};
-
-// const fetchPersonnelData = async () => {
-//   const response = await getPersonnel2(props.eventId);
-//   if (response.code === 200) {
-//     formData.value = response.personnel;
-//   } else {
-//     ElMessage.error('未找到相关数据');
-//   }
-// };
-const submitForm = async () => {
-  // 假设表单已经通过验证
-  const response = await uploadPersonnel(props.eventId, formData.value);
-  if (response.code === 200) {
-    ElMessage.success('提交成功');
-    closeDialog();
-    emits('refresh');
-  } else {
-    ElMessage.error(response.msg);
-  }
-};
-// onMounted(() => {
-//   fetchPersonnelData();
-// });
-</script>
-
-<style scoped></style>

src/views/dataManagement/dataManagementView.vue

@@ -1,85 +0,0 @@
-<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" :rules="rules" 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="unit">
-            <el-input v-model="formData.unit" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="维护单位：" prop="maintainUnit">
-            <el-input v-model="formData.maintainUnit" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="人防专业监理工程师：" prop="engineer">
-            <el-input v-model="formData.engineer" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="建设地点：" prop="location">
-            <el-input v-model="formData.location" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="操作方式：" prop="operation">
-            <el-input v-model="formData.operation" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="应建人防地下室面积（㎡）：" prop="plannedArea">
-            <el-input v-model="formData.plannedArea" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="实建人防地下室面积（㎡）：" prop="actualArea">
-            <el-input v-model="formData.actualArea" style="width: 468px !important" />
-          </el-form-item>
-          <el-form-item label="更新时间：" prop="updateTime">
-            <el-input v-model="formData.updateTime" style="width: 468px !important" />
-          </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 { getPersonnel2 } from '@/api/dataManagement/dataManagement';
-
-const emits = defineEmits(['close']);
-const props = defineProps<{
-  eventId: string | number;
-}>();
-
-const formData = ref({
-  id: 1,
-  name: '光华北路人防工程',
-  unit: '茂名市应急管理局',
-  maintainUnit: '茂名市应急管理局',
-  engineer: '',
-  location: '茂名市茂南区光华北路668号',
-  operation: '',
-  plannedArea: 122,
-  actualArea: 123,
-  updateTime: '2023/12/12 12:13'
-});
-
-const closeDialog = () => {
-  emits('close');
-};
-
-// const fetchPersonnelData = async () => {
-//   const response = await getPersonnel2(props.eventId);
-//   if (response.code === 200) {
-//     formData.value = response.personnel;
-//   } else {
-//     ElMessage.error('未找到相关数据');
-//   }
-// };
-// onMounted(() => {
-//   fetchPersonnelData();
-// });
-</script>
-
-<style scoped></style>

src/views/dataManagement/index.vue

@@ -1,43 +1,29 @@
 <template>
   <div class="container">
-    <div v-show="!dataManagementAddState.show && !dataManagementEditState.show && !dataManagementViewState.show" class="search-bar">
-      <h1>数据管理</h1>
-      <transition name="fade">
-        <div v-show="showSearch" class="mb-[10px]">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="选择数据：" prop="planType" label-width="auto">
-              <div class="flex" style="align-items: center; justify-content: flex-start;">
-                <el-select v-model="queryParams.search" placeholder="选择数据" clearable>
-                  <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-                <div class="info" style="margin-left: 20px">
-                  <span>数据更新：{{ dataUpdateTime }}</span>
-                  <span class="spacer">数源单位：{{ dataSourceUnit }}</span>
-                </div>
+    <div v-show="!dataManagementAddState.show && !dataManagementViewState.show" class="search-bar">
+      <div class="mb-[10px]">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="选择数据：" prop="planType" label-width="auto">
+            <div class="flex" style="align-items: center; justify-content: flex-start">
+              <el-select v-model="queryParams.dataType" placeholder="选择数据" @change="onDataTypeChange">
+                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+              <div class="info">
+                <span>数据更新：{{ dataUpdateTime }}</span>
+                <span class="spacer">数源单位：{{ dataSourceUnit }}</span>
               </div>
-            </el-form-item>
-          </el-form>
-        </div>
-      </transition>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
       <el-form-item>
         <el-button type="primary" icon="Plus" @click="handleAdd">录入</el-button>
-        <input ref="excelFileInput" type="file" style="display: none" accept=".xlsx, .xls" @change="handleExcelUpload" />
-        <el-button class="spacer" plain icon="Upload" @click="triggerExcelUpload">批量导入</el-button>
+        <el-button plain icon="Upload" @click="openImportDialog">批量导入</el-button>
       </el-form-item>
     </div>
-    <el-table :data="tableData" style="width: 100%">
-      <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column prop="id" label="序号" width="50"></el-table-column>
-      <el-table-column prop="name" label="工程名称"></el-table-column>
-      <el-table-column prop="unit" label="建设单位"></el-table-column>
-      <el-table-column prop="maintainUnit" label="维护单位"></el-table-column>
-      <el-table-column prop="engineer" label="人防专业监理工程师"></el-table-column>
-      <el-table-column prop="location" label="建设地点"></el-table-column>
-      <el-table-column prop="operation" label="操作方式"></el-table-column>
-      <el-table-column prop="plannedArea" label="应建人防地下室面积（㎡）"></el-table-column>
-      <el-table-column prop="actualArea" label="实建人防地下室面积（㎡）"></el-table-column>
-      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
-      <el-table-column label="操作" align="center" width="150px" class-name="small-padding fixed-width">
+    <el-table v-loading="loading" :data="tableData">
+      <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.prop" :label="item.label" :fixed="item.fixed" min-width="80" />
+      <el-table-column label="操作" align="center" width="150px" fixed="right">
         <template #default="scope">
           <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
           <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="handleUpdate(scope.row)">修改</el-text>
@@ -45,165 +31,225 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="pagination">
-      <el-pagination
-        background
-        layout="prev, pager, next, jumper"
-        :total="total"
-        :page-size="pageSize"
-        :class="paginationRight"
-        @current-change="handlePageChange"
-      ></el-pagination>
-    </div>
-    <DataManagementAdd v-if="dataManagementAddState.show" @close="handleCancel" @refresh="tableData" />
-    <DataManagementEdit v-if="dataManagementEditState.show" :event-id="dataManagementEditState.eventId" @close="handleCancel" @refresh="tableData" />
-    <DataManagementView v-if="dataManagementViewState.show" :event-id="dataManagementViewState.eventId" @close="handleCancel" />
+    <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    <AddDataManagement
+      v-if="dataManagementAddState.show"
+      :dataType="queryParams.dataType"
+      :detailId="dataManagementAddState.id"
+      @onCancel="handleCancel"
+      @onConfirm="onConfirm"
+    />
+    <ViewDataManagement
+      v-if="dataManagementViewState.show"
+      :dataType="queryParams.dataType"
+      :detailId="dataManagementViewState.id"
+      @onCancel="handleCancel"
+    />
+    <DataImport v-model="showImportDialog" :url="importUrl" :file-name="importUrl" :steps-text="fileName" />
   </div>
 </template>
 
-<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
-import { ElFormItem } from 'element-plus';
-import DataManagementView from '@/views/dataManagement/dataManagementView.vue';
-import DataManagementAdd from '@/views/dataManagement/dataManagementADD.vue';
-import DataManagementEdit from '@/views/dataManagement/dataManagementEdit.vue';
+<script lang="ts" setup>
+import ViewDataManagement from './ViewDataManagement.vue';
+import AddDataManagement from './AddDataManagement.vue';
 
-const queryParams = ref({
-  search: ''
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const queryParams = reactive({
+  dataType: '',
+  page: 1,
+  pageSize: 10
 });
+let loading = ref(false);
+const total = ref(0); // 总条目数
+const type = ref([]);
 
-const type = [{ value: '1', label: '在建工地' }];
-const showSearch = ref(true);
-const excelFileInput = ref(null);
+const tableHeader = ref([]);
+// 表格数据
+const tableData = ref([]);
+const dataUpdateTime = ref('');
+const dataSourceUnit = ref('');
 
-const triggerExcelUpload = () => {
-  // 触发文件输入的点击事件
-  excelFileInput.value.click();
-};
-
-const tableData = ref([
-  {
-    id: 1,
-    name: '光华北路人防工程',
-    unit: '茂名市应急管理局',
-    maintainUnit: '茂名市应急管理局',
-    engineer: '',
-    location: '茂名市茂南区光华北路668号',
-    operation: '',
-    plannedArea: 122,
-    actualArea: 123,
-    updateTime: '2023-12-12 12:13'
-  },
-  {
-    id: 2,
-    name: '光华北路人防工程2',
-    unit: '茂名市应急管理局',
-    maintainUnit: '茂名市应急管理局',
-    engineer: '',
-    location: '茂名市茂南区光华北路668号',
-    operation: '',
-    plannedArea: 122,
-    actualArea: 123,
-    updateTime: '2023-12-12 12:13'
-  },
-  {
-    id: 3,
-    name: '光华北路人防工程3',
-    unit: '茂名市应急管理局',
-    maintainUnit: '茂名市应急管理局',
-    engineer: '',
-    location: '茂名市茂南区光华北路668号',
-    operation: '',
-    plannedArea: 122,
-    actualArea: 123,
-    updateTime: '2023-12-12 12:13'
-  }
-]);
-
-const total = ref(30); // 总条目数
-const pageSize = ref(10); // 每页显示条目数
-
-const dataUpdateTime = ref('2023-12-12 12:13');
-const dataSourceUnit = ref('茂名市应急管理局');
-
-const handleExcelUpload = (event) => {
-  const files = event.target.files;
-  if (files.length) {
-    const file = files[0];
-    // 这里可以添加前端的文件验证逻辑，比如文件类型和大小
-
-    // 假设有一个后端API处理Excel文件上传
-    const formData = new FormData();
-    formData.append('file', file);
-
-    // 发送请求到后端API
-    fetch('YOUR_BACKEND_API_URL', {
-      // 替换为你的后端API URL
-      method: 'POST',
-      body: formData
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log('文件上传成功', data);
-        // 处理上传成功的逻辑
-      })
-      .catch((error) => {
-        console.error('文件上传失败', error);
-        // 处理上传失败的逻辑
-      });
-  }
-};
+let showImportDialog = ref(false);
+let importUrl = ref('');
+let fileName = ref('');
 
 let dataManagementViewState = reactive({
   show: false,
-  eventId: ''
+  id: ''
 });
 
-let dataManagementEditState = reactive({
-  show: false,
-  eventId: ''
-});
 let dataManagementAddState = reactive({
-  show: false
+  show: false,
+  id: ''
 });
+
+// 打开新增
 const handleAdd = () => {
+  dataManagementAddState.id = '';
   dataManagementAddState.show = true;
 };
-
+// 打开详情
 const handleView = (row: any) => {
-  dataManagementViewState.eventId = row.id;
+  dataManagementViewState.id = row.id;
   dataManagementViewState.show = true;
 };
-
+// 打开修改
 const handleUpdate = (row: any) => {
-  dataManagementEditState.eventId = row.id;
-  dataManagementEditState.show = true;
+  dataManagementAddState.id = row.id;
+  dataManagementAddState.show = true;
 };
-
+// 关闭
 const handleCancel = () => {
   dataManagementViewState.show = false;
-  dataManagementEditState.show = false;
   dataManagementAddState.show = false;
 };
 
-onMounted(() => {
-  loadData();
-});
-
-const loadData = () => {
-  // 实现数据加载逻辑
+const onConfirm = () => {
+  handleCancel();
+  queryParams.page = 1;
+  getList();
 };
-
+// 删除
 const removeItem = (item) => {
-  const index = tableData.value.findIndex((row) => row.id === item.id);
+  proxy?.$modal.confirm('是否确认删除选择的数据项？').then(() => {
+    const index = tableData.value.findIndex((row) => row.id === item.id);
+    if (index !== -1) {
+      tableData.value.splice(index, 1);
+    }
+    proxy?.$modal.msgSuccess('删除成功');
+  });
+};
+
+// 数据选择变化
+const onDataTypeChange = () => {
+  const index = type.value.findIndex((row) => row.value === queryParams.dataType);
   if (index !== -1) {
-    tableData.value.splice(index, 1);
+    importUrl.value = type.value[index].label + '.xlsx';
+    fileName.value = type.value[index].label;
   }
+  queryParams.page = 1;
+  getList();
 };
 
-const handlePageChange = (page) => {
-  console.log('当前页码', page);
+// 获取表格数据
+const getList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    if (queryParams.dataType === '1') {
+      const tempTableHeader = [
+        { label: 'ID', prop: 'id' },
+        { label: '工程名称', prop: 'name' },
+        { label: '建设单位', prop: 'unit' },
+        { label: '人防专业监理工程师', prop: 'engineer' },
+        { label: '建设地点', prop: 'location' },
+        { label: '操作方式', prop: 'operation' },
+        { label: '应建人防地下室面积(㎡)', prop: 'plannedArea' },
+        { label: '实建人防地下室面积(㎡)', prop: 'actualArea' },
+        { label: '更新时间', prop: 'updateTime' }
+      ];
+      for (let i = 0; i < tempTableHeader.length; i++) {
+        if (tempTableHeader[i].prop === 'id') {
+          tempTableHeader[i].fixed = true;
+          break;
+        }
+      }
+      tableHeader.value = tempTableHeader;
+      tableData.value = [
+        {
+          id: '1',
+          name: '光华北路人防工程',
+          unit: '茂名市应急管理局',
+          maintainUnit: '茂名市应急管理局',
+          engineer: '',
+          location: '茂名市茂南区光华北路668号',
+          operation: '',
+          plannedArea: 122,
+          actualArea: 123,
+          updateTime: '2023-12-12 12:13'
+        },
+        {
+          id: '2',
+          name: '光华北路人防工程2',
+          unit: '茂名市应急管理局',
+          maintainUnit: '茂名市应急管理局',
+          engineer: '',
+          location: '茂名市茂南区光华北路668号',
+          operation: '',
+          plannedArea: 122,
+          actualArea: 123,
+          updateTime: '2023-12-12 12:13'
+        },
+        {
+          id: '3',
+          name: '光华北路人防工程3',
+          unit: '茂名市应急管理局',
+          maintainUnit: '茂名市应急管理局',
+          engineer: '',
+          location: '茂名市茂南区光华北路668号',
+          operation: '',
+          plannedArea: 122,
+          actualArea: 123,
+          updateTime: '2023-12-12 12:13'
+        }
+      ];
+      total.value = 3;
+    } else {
+      const tempTableHeader = [
+        { label: 'ID', prop: 'id' },
+        { label: '姓名', prop: 'name' },
+        { label: '所属区域', prop: 'area' },
+        { label: '单位', prop: 'company' },
+        { label: '职位', prop: 'official' },
+        { label: '联系电话', prop: 'phone' },
+        { label: '专家类型', prop: 'type' }
+      ];
+      for (let i = 0; i < tempTableHeader.length; i++) {
+        if (tempTableHeader[i].prop === 'id') {
+          tempTableHeader[i].fixed = true;
+          break;
+        }
+      }
+      tableHeader.value = tempTableHeader;
+      tableData.value = [
+        {
+          id: '1',
+          name: '陈洋',
+          area: '高州市',
+          company: '高州市明洋化工有限公司',
+          official: '工程师',
+          phone: '13509917455',
+          type: '森林火灾'
+        }
+      ];
+      total.value = 1;
+    }
+    dataUpdateTime.value = '2023-12-12 12:13';
+    dataSourceUnit.value = '茂名市应急管理局';
+    loading.value = false;
+  }, 500);
 };
+// 加载数据
+const loadData = () => {
+  // 实现数据加载逻辑
+  // 需要先获取选项，根据第一个选项获取tableData和导入配置
+  type.value = [
+    { label: '在建工地', value: '1' },
+    { label: '应急管理专家', value: '2' }
+  ];
+  importUrl.value = type.value[0].label + '.xlsx';
+  fileName.value = type.value[0].label;
+  queryParams.dataType = type.value[0].value;
+  getList();
+};
+
+// 打开批量导入弹窗
+const openImportDialog = () => {
+  showImportDialog.value = true;
+};
+
+onMounted(() => {
+  loadData();
+});
 </script>
 
 <style scoped>
@@ -219,15 +265,10 @@ const handlePageChange = (page) => {
   margin-bottom: 20px;
 }
 
-.pagination {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
-
 .info {
   display: flex;
   align-items: center;
+  margin-left: 20px;
 }
 
 .spacer {

src/views/setting/PreventionResponsible/index.vue

@@ -95,7 +95,6 @@
           </el-col>
         </el-row>
       </div>
-      <DataImport v-model="uploadShow" url="9b6a6246-d6de-11ef-bfa9-fa163e4bf12e.xlsx" file-name="责任人信息批量导入模板.xlsx" steps-text="责任人信息" />
       <DataImportDetail v-model="showUploadDetails" v-if="showUploadDetails" />
       <detail v-if="detailState.show" :id="detailState.id" @close="handledetailClose"></detail>
       <add v-if="addState.show" @close="handleAddClose" @refresh="getList"></add>