Merge remote-tracking branch 'origin/dev' into dev

src/api/dataManagement/dataManagement.ts

@@ -0,0 +1,28 @@
+import request from '@/utils/request';
+export function getPersonnel(params) {
+  return request({
+    url: '',
+    method: 'get',
+    params: params
+  });
+}
+export function getPersonnel2(id) {
+  return request({
+    url: `${id}`,
+    method: 'get'
+  });
+}
+export function uploadPersonnel(id, personnel) {
+  return request({
+    url: '' + id,
+    method: 'put',
+    data: personnel
+  });
+}
+export function addPersonnel(personnel_list) {
+  return request({
+    url: '',
+    method: 'post',
+    data: personnel_list
+  });
+}

src/types/components.d.ts

@@ -25,11 +25,14 @@ declare module 'vue' {
     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']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     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']

src/views/dataFilling/tableDetails.vue

@@ -3,51 +3,45 @@
     <el-row :gutter="20">
       <el-col :lg="30" :xs="24" style="">
         <el-row :span="24" :gutter="10">
-          <!-- 联系人姓名 -->
           <el-col :span="6">
-            <el-form-item label="联系人姓名：" prop="table_name" label-width="auto">
+            <el-form-item label="联系人姓名：" prop="creator_name" label-width="auto">
               <div>{{ reportInfo.creator_name }}</div>
             </el-form-item>
           </el-col>
-          <!-- 联系电话 -->
           <el-col :span="6">
-            <el-form-item label="联系电话：" prop="table_phone" label-width="auto">
+            <el-form-item label="联系电话：" prop="creator_phone" label-width="auto">
               <div>{{ reportInfo.creator_phone }}</div>
             </el-form-item>
           </el-col>
-          <!-- 选择填报人 -->
           <el-col :span="6">
-            <el-form-item label="选择填报人：" prop="table_name" label-width="auto">
+            <el-form-item label="选择填报人：" prop="people_name" label-width="auto">
               <el-select v-model="selectedReporter" placeholder="请选择填报人">
                 <el-option v-for="reporter in reporters" :key="reporter.id" :label="reporter.name" :value="reporter.id" />
               </el-select>
             </el-form-item>
           </el-col>
-          <!-- 截止时间 -->
           <el-col :span="6">
             <el-form-item label="截止时间：" prop="release_time">
               <div>{{ reportInfo.end_time }}</div>
               <span class="label">前报送该表</span>
             </el-form-item>
           </el-col>
-          <!-- 操作按钮 -->
-          <!-- 表名 -->
           <el-col :span="6">
             <el-form-item label="表名：" prop="table_name" label-width="auto">
               <div>{{ reportInfo.table_name }}</div>
             </el-form-item>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" @click="handleReport()">智能识别</el-button>
+            <el-button v-if="isBeforeDeadline" type="primary" @click="handleReport()">智能识别</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" @click="handleSaveTemporarily">暂存</el-button>
+            <el-button v-if="isBeforeDeadline" type="primary" @click="handleSaveTemporarily()">暂存</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" @click="handleData">数据</el-button>
+            <el-button v-if="!isBeforeDeadline" type="primary" @click="handleData()">数据</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" @click="handleSave()">发布</el-button>
+            <el-button v-if="isBeforeDeadline" type="primary" @click="handleSave()">发布</el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="danger" @click="handleReturn()">返回</el-button>
@@ -56,18 +50,18 @@
       </el-col>
       <el-row :gutter="20" class="mb8">
         <el-col :span="1.5">
-          <el-button type="primary" @click="handleImportExcel">导入Excel文件</el-button>
+          <el-button v-if="isBeforeDeadline" type="primary" @click="handleImportExcel">导入Excel文件</el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button type="primary" @click="handleNewTemplate">空白模板</el-button>
+          <el-button v-if="isBeforeDeadline" type="primary" @click="handleNewTemplate">空白模板</el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button type="primary" @click="handleReload">重新加载</el-button>
+          <el-button v-if="isBeforeDeadline" type="primary" @click="handleReload">重新加载</el-button>
         </el-col>
       </el-row>
       <!-- 表格组件 -->
       <el-col :lg="30" :xs="24">
-        <el-table :data="tableStructure" border>
+        <el-table :data="tableData" border>
           <el-table-column v-for="header in editableHeaders" :key="header" :label="header" :prop="header">
             <template #default="{ row, $index }">
               <el-input v-model="row[header]" @blur="saveEdit($index, header, row[header])" />
@@ -80,10 +74,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { ElButton, ElCol, ElFormItem, ElInput, ElOption, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus';
 import * as XLSX from 'xlsx';
 import { fillingList } from '@/api/dataFilling/fillingManage';
+import { useRoute, useRouter } from 'vue-router';
 
 const emits = defineEmits(['close']);
 const reportInfo = ref({
@@ -98,24 +93,32 @@ const reportInfo = ref({
   period_type: '',
   creator_name: '',
   creator_id: 0,
-  creator_phone: '', // 添加 creator_phone 属性
+  creator_phone: '',
   num_reporters: 0,
   created_at: '',
   updated_at: '',
   num_reported: 0,
   num_unreported: 0
 });
-const tableStructure = ref([]); // 修改为数组
-const editableHeaders = ref([]); // 添加 editableHeaders 定义
-const field_names = ref([]); // 添加 field_names 定义
-const selectedReporter = ref(null); // 确保这个变量被定义
-const reporters = ref([]); // 确保这个数组被定义
+const tableStructure = ref([]);
+const editableHeaders = ref([]);
+const tableData = ref([]);
+const selectedReporter = ref(null);
+const reporters = ref([]);
+const route = useRoute();
+const router = useRouter();
 
 const props = defineProps({
   eventId: String
 });
 const reportId = ref(props.eventId);
 
+// 计算属性来判断是否在截止时间之前
+const isBeforeDeadline = computed(() => {
+  const deadline = new Date(reportInfo.value.end_time);
+  return new Date() < deadline;
+});
+
 watch(reportId, async (newVal) => {
   if (newVal) {
     await fetchReportDetails(newVal);
@@ -132,27 +135,32 @@ onMounted(async () => {
 const fetchReportDetails = async (reportId) => {
   try {
     const response = await fillingList(reportId);
-    console.log('接口返回的数据:', response); // 打印完整的响应数据以便调试
-    if (response.code === 200 && response.data) {
+    console.log('接口返回的数据:', response);
+    if (response.code === 200) {
       reportInfo.value = {
-        ...reportInfo.value,
-        ...response.data.report_info, // 确保 reportInfo 被更新
-        creator_phone: response.data.report_info.creator_phone // 确保 creator_phone 被更新
+        ...response.report_info
       };
-      // 假设 response.data.table_structure 是数组形式，包含列信息
-      tableStructure.value = response.data.table_structure;
-      editableHeaders.value = ['序号', ...response.data.table_structure.map((item) => item.column_name)];
+      tableStructure.value = response.table_structure;
+      editableHeaders.value = ['序号', ...response.table_structure.map((item) => item.comment)];
+      tableData.value = Array.from({ length: 10 }, (v, k) => ({
+        序号: k + 1,
+        ...response.table_structure.reduce((acc, item) => {
+          acc[item.comment] = '';
+          return acc;
+        }, {})
+      }));
     } else {
-      throw new Error(`接口返回错误，状态码：${response.code}`);
+      throw new Error(`接口返回错误，状态码：${response.code}，数据：${JSON.stringify(response)}`);
     }
   } catch (error) {
     console.error('获取报告信息失败:', error);
-    alert('获取报告信息失败: ' + error.message);
+    alert(error.message);
+    throw error;
   }
 };
 
 function saveEdit(rowIndex, header, value) {
-  field_names.value[rowIndex][header] = value;
+  tableData.value[rowIndex][header] = value;
 }
 
 const handleNewTemplate = () => {
@@ -189,7 +197,7 @@ const handleImportExcel = () => {
 };
 
 const handleReload = () => {
-  field_names.value = [];
+  tableData.value = [];
   alert('表格已清空');
 };
 
@@ -211,11 +219,11 @@ const handleSave = async () => {
     creator_name: reportInfo.value.creator_name,
     creator_id: reportInfo.value.creator_id,
     creator_phone: reportInfo.value.creator_phone, // 使用 reportInfo 中的 creator_phone
-    field_names: field_names.value,
+    field_names: tableData.value,
     user_ids: []
   };
   try {
-    const response = await fillingAdd(data); // 确保 fillingAdd 函数被定义
+    const response = await fillingList(data); // 确保 fillingAdd 函数被定义
     if (response && response.success) {
       alert('数据已成功保存');
     } else {
@@ -232,7 +240,7 @@ const handleReturn = () => {
 };
 
 const handleData = () => {
-  // 实现具体的数据处理逻辑
-  console.log('处理数据');
+  // 跳转到数据档案管理-详情页
+  router.push({ name: 'DataArchiveDetail', params: { reportId: reportInfo.value.report_id } });
 };
 </script>

src/views/dataManagement/dataManagementADD.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" :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

@@ -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" :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: '',
+  name: '',
+  unit: '',
+  maintainUnit: '',
+  engineer: '',
+  location: '',
+  operation: '',
+  plannedArea: '',
+  actualArea: '',
+  updateTime: ''
+});
+
+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

@@ -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" :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: '',
+  name: '',
+  unit: '',
+  maintainUnit: '',
+  engineer: '',
+  location: '',
+  operation: '',
+  plannedArea: '',
+  actualArea: '',
+  updateTime: ''
+});
+
+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,6 +1,7 @@
 <template>
   <div class="container">
-    <div class="search-bar">
+    <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">
@@ -23,14 +24,14 @@
         </div>
       </transition>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">录入</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="handleAdd">录入</el-button>
         <input ref="excelFileInput" type="file" style="display: none" accept=".xlsx, .xls" @change="handleExcelUpload" />
         <el-button class="spacer" type="primary" icon="el-icon-upload2" @click="triggerExcelUpload">批量导入</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="id" width="50"></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>
@@ -42,8 +43,8 @@
       <el-table-column prop="updateTime" label="更新时间"></el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="viewDetails(scope.row)">查看</el-text>
-          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="editItem(scope.row)">修改</el-text>
+          <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>
           <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="removeItem(scope.row)">删除</el-text>
         </template>
       </el-table-column>
@@ -58,12 +59,18 @@
         @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" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+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';
 
 const queryParams = ref({
   search: ''
@@ -123,10 +130,6 @@ const pageSize = ref(10); // 每页显示条目数
 const dataUpdateTime = ref('2023/12/12 12:13');
 const dataSourceUnit = ref('茂名市应急管理局');
 
-const handleQuery = () => {
-  console.log('搜索', queryParams.value);
-};
-
 const handleExcelUpload = (event) => {
   const files = event.target.files;
   if (files.length) {
@@ -155,16 +158,51 @@ const handleExcelUpload = (event) => {
   }
 };
 
-const viewDetails = (item) => {
-  console.log('查看详情', item);
+let dataManagementViewState = reactive({
+  show: false,
+  eventId: ''
+});
+
+let dataManagementEditState = reactive({
+  show: false,
+  eventId: ''
+});
+let dataManagementAddState = reactive({
+  show: false
+});
+const handleAdd = () => {
+  dataManagementAddState.show = true;
+};
+
+const handleView = (row: any) => {
+  dataManagementViewState.eventId = row.id;
+  dataManagementViewState.show = true;
 };
 
-const editItem = (item) => {
-  console.log('修改', item);
+const handleUpdate = (row: any) => {
+  dataManagementEditState.eventId = row.id;
+  dataManagementEditState.show = true;
+};
+
+const handleCancel = () => {
+  dataManagementViewState.show = false;
+  dataManagementEditState.show = false;
+  dataManagementAddState.show = false;
+};
+
+onMounted(() => {
+  loadData();
+});
+
+const loadData = () => {
+  // 实现数据加载逻辑
 };
 
 const removeItem = (item) => {
-  console.log('移除', item);
+  const index = tableData.value.findIndex((row) => row.id === item.id);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
 };
 
 const handlePageChange = (page) => {