培训记录详情开发

.env.development

@@ -6,6 +6,7 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 VITE_APP_BASE_API = 'http://10.181.7.236:9988'
+VITE_APP_BASE_DOWNLOAD_API = '/api/file/download/'
 # VITE_APP_BASE_API = 'http://127.0.0.1:9988'
 
 # 应用访问路径 例如使用前缀 /admin/

.env.production

@@ -15,6 +15,7 @@ VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 
 # 生产环境
 VITE_APP_BASE_API = 'http://19.155.220.206:80'
+VITE_APP_BASE_DOWNLOAD_API = '/api/file/download/'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

src/api/riskPrevention/planManage.ts

@@ -40,7 +40,7 @@ export function getResponseDetail(responseId) {
 // 修改预案
 export const updateReport = (data) => {
   return request({
-    url: `/api/reports/update`,
+    url: `/api/emergency_plan/plan/update`,
     method: 'put',
     data: data
   });
@@ -64,14 +64,6 @@ export const addReport = (data) => {
   });
 };
 
-export const listDrill = (params) => {
-  return request({
-    url: '/api/emergency_plan/drill/list',
-    method: 'get',
-    params: params
-  });
-};
-
 // 新增培训记录
 export const addTraining = (data) => {
   return request({
@@ -106,3 +98,55 @@ export const deleteTraining = (data) => {
     data: data
   });
 };
+
+export const listDrill = (params) => {
+  return request({
+    url: '/api/emergency_plan/drill/list',
+    method: 'get',
+    params: params
+  });
+};
+
+// 新增演练记录
+export const addDrill = (data) => {
+  return request({
+    url: '/api/emergency_plan/drill/create',
+    method: 'post',
+    data: data
+  });
+};
+
+// 修改演练记录
+export const updateDrill = (data) => {
+  return request({
+    url: '/api/emergency_plan/drill/update',
+    method: 'put',
+    data: data
+  });
+};
+
+// 培训记录详情
+export const getDrillDetail = (drillId) => {
+  return request({
+    url: '/api/emergency_plan/drill/' + drillId,
+    method: 'get'
+  });
+};
+
+// 删除培训记录
+export const deleteDrill = (data) => {
+  return request({
+    url: '/api/emergency_plan/plan/drill/delete',
+    method: 'delete',
+    data: data
+  });
+};
+
+// 查询响应记录
+export function getResponseRecordList(params) {
+  return request({
+    url: '/api/emergency_plan/response/list',
+    method: 'get',
+    params: params
+  });
+}

src/components/FileUpload/index.vue

@@ -70,6 +70,7 @@ const number = ref(0);
 const uploadList = ref<any[]>([]);
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
 const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
 const headers = ref(globalHeaders());
 
@@ -282,7 +283,7 @@ const listToString = (list: any[], separator?: string) => {
 
 // 下载方法
 const handleDownload = (file: any) => {
-  download2('/api/file/download/' + file.url, file.name);
+  download2(baseUrl + downLoadApi + file.url, file.name);
 };
 </script>
 

src/views/riskPrevention/planManage/DrillRecord.vue

@@ -18,30 +18,45 @@
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="培训主题" align="center" prop="theme" :show-overflow-tooltip="true" />
-      <el-table-column label="培训单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
-      <el-table-column label="培训内容" align="center" prop="Content" :show-overflow-tooltip="true" />
-      <el-table-column label="参与人数" align="center" prop="peopleNum" width="120" />
-      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120" />
-      <el-table-column label="开始时间" sortable align="center" prop="startTime" width="160">
+      <el-table-column label="演练名称" align="center" prop="drillName" />
+      <el-table-column label="演练单位" align="center" prop="drillUnit" />
+      <el-table-column label="年度" align="center" prop="year" :show-overflow-tooltip="true" />
+      <el-table-column label="演练时间" align="center" prop="drillTime" width="160">
         <template #default="scope">
-          <span>{{ scope.row.startTime }}</span>
+          <span>{{ scope.row.year }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="结束时间" sortable align="center" prop="endTime" width="160">
+      <el-table-column label="演练地点" align="center" prop="drillAddress" />
+      <el-table-column label="演练方案" align="center" prop="drillProject">
         <template #default="scope">
-          <span>{{ scope.row.endTime }}</span>
+          <a :href="baseUrl + downLoadApi + scope.row.drillProject[0].url" target="_blank">
+            <el-text type="primary">{{
+              scope.row && scope.row.drillProject && scope.row.drillProject[0] ? scope.row.drillProject[0].name : ''
+            }}</el-text>
+          </a>
         </template>
       </el-table-column>
-      <el-table-column key="address" label="培训地点" align="center" prop="address" :show-overflow-tooltip="true" />
-      <el-table-column fixed="right" label="操作" width="100">
+      <el-table-column label="演练视频" align="center" prop="drillVideo">
         <template #default="scope">
-          <el-tooltip v-if="scope.row.textId !== 1" content="编辑" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip v-if="scope.row.textId !== 1" content="删除" placement="top">
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-          </el-tooltip>
+          <el-text type="primary" @click="handleShowVideo(scope.row.drillVideo)">查看</el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="演练图片" align="center" prop="drillPicture">
+        <template #default="scope">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="scope.row.url"
+            :preview-src-list="scope.row.urlList"
+            :preview-teleported="true"
+            fit="cover"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="220" align="center">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button link type="primary" icon="Download" @click="handleDownload(scope.row)">下载</el-button>
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -53,39 +68,42 @@
       @pagination="getList"
     />
   </el-card>
-  <!-- 添加或修改培训记录配置对话框 -->
+  <!-- 添加或修改演练记录配置对话框 -->
   <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
     <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="培训主题" prop="theme">
-        <el-input v-model="form.theme" placeholder="请输入培训主题" />
-      </el-form-item>
-      <el-form-item label="培训单位" prop="unitName">
-        <el-input v-model="form.unitName" placeholder="请输入培训单位" />
+      <el-form-item label="演练名称" prop="drillName">
+        <el-input v-model="form.drillName" placeholder="请输入演练名称" />
       </el-form-item>
-      <el-form-item label="培训方式" prop="trainingWay">
-        <el-select v-model="form.trainingWay" placeholder="请选择培训方式">
-          <el-option label="线上培训" value="1" />
-          <el-option label="线下培训" value="2" />
-        </el-select>
+      <el-form-item label="演练单位" prop="drillUnit">
+        <el-input v-model="form.drillUnit" placeholder="请输入演练单位" />
       </el-form-item>
-      <el-form-item label="参与人数" prop="peopleNum">
-        <el-input v-model="form.peopleNum" placeholder="请输入参与人数" />
+      <el-form-item label="年度" prop="year">
+        <el-input v-model="form.year" placeholder="请输入演练年度" />
       </el-form-item>
-      <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
+      <el-form-item label="演练时间" prop="drillTime">
+        <el-date-picker
+          v-model="form.drillTime"
+          type="datetime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          placeholder="请选择开始时间"
+          style="width: 100%"
+        />
       </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
-      </el-form-item>
-      <el-form-item label="培训地点" prop="address">
-        <el-input v-model="form.address" placeholder="请选择培训地点" readonly>
+      <el-form-item label="演练地点" prop="drillAddress">
+        <el-input v-model="form.drillAddress" placeholder="请选择演练地点" readonly>
           <template #append>
             <div style="cursor: pointer" @click="openMapDialog">地图定位</div>
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="培训内容" prop="Content">
-        <el-input v-model="form.Content" type="textarea" placeholder="请输入培训内容"></el-input>
+      <el-form-item label="演练方案" prop="drillProject">
+        <FileUpload v-model="form.drillProject" :file-type="['pdf', 'xls', 'xlsx', 'doc', 'docx']" :limit="1" />
+      </el-form-item>
+      <el-form-item label="演练视频" prop="drillVideo">
+        <FileUpload v-model="form.drillVideo" :file-type="['mp4', 'avi', 'wmv']" :limit="3" :file-size="5 * 1024" />
+      </el-form-item>
+      <el-form-item label="演练图片" prop="drillPicture">
+        <FileUpload v-model="form.drillPicture" :file-type="['jpg', 'jpeg', 'png']" :limit="12" :file-size="3" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -95,31 +113,34 @@
       </div>
     </template>
   </el-dialog>
+  <!--视频弹窗-->
+  <el-dialog v-model="showVideo" title="视频详情" width="500px" append-to-body>
+    <div v-for="(item, index) in videoList" :key="index" class="video-box">
+      <div style="font-weight: bold; font-size: 18px; margin-bottom: 10px">{{ item.name }}</div>
+      <video :src="baseUrl + downLoadApi + item.url" controls width="100%" height="100%"></video>
+    </div>
+  </el-dialog>
   <!-- 地图弹窗 -->
-  <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
+  <company-map v-model:visible="mapDialogVisible" :address="form.drillAddress" @confirm="handleMapChange"></company-map>
 </template>
 <script setup lang="ts">
-import {
-  getTrainingList,
-  addTraining,
-  updateTraining,
-  getTrainingDetail,
-  deleteTraining
-} from '@/api/riskPrevention/planManage';
+import { listDrill, addDrill, updateDrill, getDrillDetail, deleteDrill } from '@/api/riskPrevention/planManage';
 import { to } from 'await-to-js';
 import { ref } from 'vue';
-import { PlanVO } from '@/api/system/user/types';
+import { download2 } from '@/utils/request';
 
 const props = defineProps({
   id: String
 });
 
 const formRef = ref<ElFormInstance>();
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
 const ids = ref<string[]>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const selectedRow = ref<PlanVO | null>(null);
+const selectedRow = ref(null);
 const dataList = ref([]);
 const loading = ref(true);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -132,34 +153,51 @@ const queryParams = reactive({
   pageSize: 10
 });
 const form = ref({
-  trainingId: '',
-  theme: '',
-  unitName: '',
-  address: '',
+  drillId: '',
+  drillName: '',
+  drillUnit: '',
+  year: '',
+  drillTime: '',
+  drillAddress: '',
   lon: '',
   lat: '',
-  startTime: '',
-  endTime: '',
-  peopleNum: '',
-  Content: '',
-  trainingWay: ''
+  drillProject: '',
+  drillVideo: '',
+  drillPicture: ''
 });
 const rules = reactive({
-  theme: [{ required: true, message: '培训主题不能为空', trigger: 'blur' }],
-  unitName: [{ required: true, message: '培训单位不能为空', trigger: 'blur' }],
-  peopleNum: [{ required: true, message: '参与人数不能为空', trigger: 'blur' }],
-  trainingWay: [{ required: true, message: '培训方式不能为空', trigger: 'blur' }],
-  address: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }],
-  Content: [{ required: true, message: '培训内容不能为空', trigger: 'blur' }],
-  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
-  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
+  drillName: [{ required: true, message: '演练名称不能为空', trigger: 'blur' }],
+  drillUnit: [{ required: true, message: '演练单位不能为空', trigger: 'blur' }],
+  year: [{ required: true, message: '演练年度不能为空', trigger: 'blur' }],
+  drillTime: [{ required: true, message: '演练时间不能为空', trigger: 'change' }],
+  drillAddress: [{ required: true, message: '演练地点不能为空', trigger: 'blur' }],
+  drillProject: [{ required: true, message: '演练方案不能为空', trigger: 'change' }],
+  drillVideo: [{ required: true, message: '演练视频不能为空', trigger: 'change' }],
+  drillPicture: [{ required: true, message: '演练图片不能为空', trigger: 'change' }]
 });
+const showVideo = ref(false);
+const videoList = ref([]);
+
+const handleShowVideo = (row) => {
+  videoList.value = row;
+  showVideo.value = true;
+};
 
 // 获取列表数据
 const getList = () => {
   loading.value = true;
-  getTrainingList({ ...queryParams, planNum: props.id })
+  listDrill({ ...queryParams, planNum: props.id })
     .then((res) => {
+      res.data.forEach((item) => {
+        if (item.drillPicture && item.drillPicture.length > 0) {
+          let urlList = [];
+          item.drillPicture.forEach((item2) => {
+            urlList.push(baseUrl + downLoadApi + item2.url);
+          });
+          item.urlList = urlList;
+          item.url = urlList[0];
+        }
+      });
       dataList.value = res.data;
       total.value = res.total;
     })
@@ -180,23 +218,6 @@ watch(
   }
 );
 
-/** 重置操作表单 */
-const reset = () => {
-  form.value = {
-    trainingId: '',
-    theme: '',
-    unitName: '',
-    address: '',
-    lon: '',
-    lat: '',
-    startTime: '',
-    endTime: '',
-    peopleNum: '',
-    Content: '',
-    trainingWay: ''
-  };
-  formRef.value?.resetFields();
-};
 /** 取消按钮 */
 const cancel = () => {
   resetForm();
@@ -212,6 +233,19 @@ const closeDialog = () => {
 };
 
 const resetForm = () => {
+  form.value = {
+    drillId: '',
+    drillName: '',
+    drillUnit: '',
+    year: '',
+    drillTime: '',
+    drillAddress: '',
+    lon: '',
+    lat: '',
+    drillProject: '',
+    drillVideo: '',
+    drillPicture: ''
+  };
   formRef.value?.resetFields();
   formRef.value?.clearValidate();
 };
@@ -219,17 +253,17 @@ const resetForm = () => {
 const handleUpdate = async (row) => {
   if (row) {
     resetForm();
-    const res = await getTrainingDetail(row.trainingId);
+    const res = await getDrillDetail(row.drillId);
     form.value = res.data;
     visible.value = true;
-    title.value = '修改培训记录';
+    title.value = '修改演练记录';
   }
 };
 
 const handleAdd = () => {
   resetForm();
   visible.value = true;
-  title.value = '添加培训记录';
+  title.value = '添加演练记录';
 };
 
 /**提交按钮 */
@@ -238,8 +272,8 @@ const submitForm = () => {
     if (valid) {
       try {
         buttonLoading.value = true;
-        form.value.trainingId ? await updateTraining({ ...form.value, planId: props.id }) : await addTraining({ ...form.value, planId: props.id });
-        proxy?.$modal.msgSuccess(form.value.trainingId ? '修改成功' : '新增成功');
+        form.value.drillId ? await updateDrill({ ...form.value, planId: props.id }) : await addDrill({ ...form.value, planId: props.id });
+        proxy?.$modal.msgSuccess(form.value.drillId ? '修改成功' : '新增成功');
         visible.value = false;
         getList();
       } finally {
@@ -250,31 +284,59 @@ const submitForm = () => {
 };
 
 const handleSelectionChange = (selection) => {
-  ids.value = selection.map((item) => item.trainingId);
+  ids.value = selection.map((item) => item.drillId);
   selectedRow.value = selection.length === 1 ? selection[0] : null;
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
 
 const handleDelete = async (row) => {
-  const deleteIds = row && row.trainingId ? [row?.trainingId] : ids.value;
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的培训记录？') as any);
+  const deleteIds = row && row.drillId ? [row?.drillId] : ids.value;
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的演练记录？') as any);
   if (!err) {
-    await deleteTraining(deleteIds);
+    await deleteDrill(deleteIds);
     getList();
     proxy?.$modal.msgSuccess('删除成功');
   }
 };
 
+// 下载
+const handleDownload = (row) => {
+  if (row.drillProject && row.drillProject.length > 0) {
+    row.drillProject.forEach((file) => {
+      download2(baseUrl + downLoadApi + file.url, file.name);
+    });
+  }
+  if (row.drillVideo && row.drillVideo.length > 0) {
+    row.drillVideo.forEach((file) => {
+      download2(baseUrl + downLoadApi + file.url, file.name);
+    });
+  }
+  if (row.drillPicture && row.drillPicture.length > 0) {
+    row.drillPicture.forEach((file) => {
+      download2(baseUrl + downLoadApi + file.url, file.name);
+    });
+  }
+};
+
 // 地图定位
 const mapDialogVisible = ref(false);
 const openMapDialog = () => {
   mapDialogVisible.value = true;
 };
 const handleMapChange = (data) => {
-  form.value.address = data.address;
+  form.value.drillAddress = data.address;
   form.value.lon = data.lnglat[0];
   form.value.lat = data.lnglat[1];
   mapDialogVisible.value = false;
 };
 </script>
+
+<style lang="scss">
+.video-box {
+  margin-bottom: 10px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/riskPrevention/planManage/ResponseRecord.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-card shadow="hover">
+    <el-table v-loading="loading" :default-sort="{ prop: 'startTime,endTime', order: 'descending' }" :data="dataList">
+      <el-table-column label="事件名称" align="center" prop="eventName" :show-overflow-tooltip="true" />
+      <el-table-column label="事件类型" align="center" prop="eventType" :show-overflow-tooltip="true" />
+      <el-table-column label="响应单位" align="center" prop="responseUnit" :show-overflow-tooltip="true" />
+      <el-table-column label="事件地点" align="center" prop="eventAddress" width="120" />
+      <el-table-column label="响应级别" align="center" prop="responseLevel" width="120" />
+      <el-table-column label="响应开始时间" align="center" prop="responseStartTime" width="160">
+        <template #default="scope">
+          <span>{{ scope.row.responseStartTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="响应开始时间" align="center" prop="responseEndTime" width="160">
+        <template #default="scope">
+          <span>{{ scope.row.responseEndTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > queryParams.pageSize"
+      v-model:page="queryParams.page"
+      v-model:limit="queryParams.pageSize"
+      :total="total"
+      @pagination="getList"
+    />
+  </el-card>
+</template>
+<script setup lang="ts">
+import { getResponseRecordList } from '@/api/riskPrevention/planManage';
+
+import { ref } from 'vue';
+
+const props = defineProps({
+  id: String
+});
+
+const total = ref(0);
+const dataList = ref([]);
+const loading = ref(true);
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10
+});
+
+// 获取列表数据
+const getList = () => {
+  loading.value = true;
+  getResponseRecordList({ ...queryParams, planNum: props.id })
+    .then((res) => {
+      dataList.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+
+watch(
+  () => props.id,
+  () => {
+    if (props.id) {
+      getList();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>

src/views/riskPrevention/planManage/TrainingRecord.vue

@@ -22,7 +22,11 @@
       <el-table-column label="培训单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
       <el-table-column label="培训内容" align="center" prop="Content" :show-overflow-tooltip="true" />
       <el-table-column label="参与人数" align="center" prop="peopleNum" width="120" />
-      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120" />
+      <el-table-column label="培训方式" align="center" prop="trainingWay" width="120">
+        <template #default="scope">
+          <dict-tag :options="training_type" :value="scope.row.trainingWay" />
+        </template>
+      </el-table-column>
       <el-table-column label="开始时间" sortable align="center" prop="startTime" width="160">
         <template #default="scope">
           <span>{{ scope.row.startTime }}</span>
@@ -34,14 +38,10 @@
         </template>
       </el-table-column>
       <el-table-column key="address" label="培训地点" align="center" prop="address" :show-overflow-tooltip="true" />
-      <el-table-column fixed="right" label="操作" width="100">
+      <el-table-column label="操作" width="150" align="center">
         <template #default="scope">
-          <el-tooltip v-if="scope.row.textId !== 1" content="编辑" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip v-if="scope.row.textId !== 1" content="删除" placement="top">
-            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-          </el-tooltip>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -54,7 +54,7 @@
     />
   </el-card>
   <!-- 添加或修改培训记录配置对话框 -->
-  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body @close="closeDialog">
+  <el-dialog ref="formDialogRef" v-model="visible" :title="title" width="500px" append-to-body>
     <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
       <el-form-item label="培训主题" prop="theme">
         <el-input v-model="form.theme" placeholder="请输入培训主题" />
@@ -64,18 +64,17 @@
       </el-form-item>
       <el-form-item label="培训方式" prop="trainingWay">
         <el-select v-model="form.trainingWay" placeholder="请选择培训方式">
-          <el-option label="线上培训" value="1" />
-          <el-option label="线下培训" value="2" />
+          <el-option v-for="item in training_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="参与人数" prop="peopleNum">
         <el-input v-model="form.peopleNum" placeholder="请输入参与人数" />
       </el-form-item>
       <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
+        <el-date-picker v-model="form.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" style="width: 100%" />
       </el-form-item>
       <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" />
+        <el-date-picker v-model="form.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" style="width: 100%" />
       </el-form-item>
       <el-form-item label="培训地点" prop="address">
         <el-input v-model="form.address" placeholder="请选择培训地点" readonly>
@@ -108,22 +107,21 @@ import {
 } from '@/api/riskPrevention/planManage';
 import { to } from 'await-to-js';
 import { ref } from 'vue';
-import { PlanVO } from '@/api/system/user/types';
 
 const props = defineProps({
   id: String
 });
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { training_type } = toRefs<any>(proxy?.useDict('training_type'));
 const formRef = ref<ElFormInstance>();
 const ids = ref<string[]>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const selectedRow = ref<PlanVO | null>(null);
+const selectedRow = ref(null);
 const dataList = ref([]);
 const loading = ref(true);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['update:modelValue', 'getList']);
 let visible = ref(false);
 let buttonLoading = ref(false);
 let title = ref('');
@@ -180,8 +178,13 @@ watch(
   }
 );
 
-/** 重置操作表单 */
-const reset = () => {
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  visible.value = false;
+};
+
+const resetForm = () => {
   form.value = {
     trainingId: '',
     theme: '',
@@ -196,23 +199,6 @@ const reset = () => {
     trainingWay: ''
   };
   formRef.value?.resetFields();
-};
-/** 取消按钮 */
-const cancel = () => {
-  resetForm();
-  visible.value = false;
-};
-
-/**
- * 关闭用户弹窗
- */
-const closeDialog = () => {
-  emits('update:modelValue', false);
-  resetForm();
-};
-
-const resetForm = () => {
-  formRef.value?.resetFields();
   formRef.value?.clearValidate();
 };
 

src/views/riskPrevention/planManage/planList.vue

@@ -4,17 +4,20 @@
       <!-- 基础信息 -->
       <el-col :lg="30" :xs="24" style="">
         <el-form-item>
-          <el-button type="primary" icon="ArrowLeft" @click="goBack">返回上一级</el-button>
+          <div class="back-btn" @click="goBack">
+            <el-icon><Back /></el-icon>
+            返回上一级
+          </div>
         </el-form-item>
         <el-row :span="24" :gutter="10">
           <el-col :span="20" label="预案名称">
             <h2 key="planName" style="font-weight: bolder">{{ detailData.planName }}</h2>
           </el-col>
           <el-col :span="1.5">
-            <el-button v-has-permi="['system:plan:add']" type="success" plain icon="Edit" @click="planUpdate()"> 编辑 </el-button>
+            <el-button type="primary" @click="planUpdate()"> 编辑 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button v-has-permi="['system:plan:delete']" type="danger" plain icon="Delete" @click="handleDelete"> 删除预案 </el-button>
+            <el-button type="danger" @click="handleDelete"> 删除预案 </el-button>
           </el-col>
         </el-row>
         <div class="line" style="background: #e7e7e7; width: auto; height: 0.6px; position: relative"></div>
@@ -108,69 +111,7 @@
       <el-col :lg="30" :xs="24">
         <!-- 响应记录 -->
         <h3>响应记录</h3>
-<!--        <el-card shadow="hover">-->
-<!--          <el-table v-loading="loading4" @selection-change="handleSelectionChangeResponse">-->
-<!--            <el-table-column type="selection" width="50" align="center" />-->
-<!--            <el-table-column v-if="columns1[0].visible" key="eventId" label="事件编号" align="center" prop="eventId" />-->
-<!--            <el-table-column-->
-<!--              v-if="columns1[1].visible"-->
-<!--              key="eventName"-->
-<!--              label="事件名称"-->
-<!--              align="center"-->
-<!--              prop="eventName"-->
-<!--              :show-overflow-tooltip="true"-->
-<!--            />-->
-<!--            <el-table-column-->
-<!--              v-if="columns1[2].visible"-->
-<!--              key="eventType"-->
-<!--              label="事件类型"-->
-<!--              align="center"-->
-<!--              prop="eventType"-->
-<!--              :show-overflow-tooltip="true"-->
-<!--            />-->
-<!--            <el-table-column-->
-<!--              v-if="columns1[3].visible"-->
-<!--              key="responseUnit"-->
-<!--              label="响应单位"-->
-<!--              align="center"-->
-<!--              prop="responseUnit"-->
-<!--              :show-overflow-tooltip="true"-->
-<!--            />-->
-<!--            <el-table-column-->
-<!--              v-if="columns1[4].visible"-->
-<!--              key="eventAddress"-->
-<!--              label="事件地点"-->
-<!--              align="center"-->
-<!--              prop="eventAddress"-->
-<!--              :show-overflow-tooltip="true"-->
-<!--            />-->
-<!--            <el-table-column-->
-<!--              v-if="columns1[5].visible"-->
-<!--              key="responseLevel"-->
-<!--              label="响应级别"-->
-<!--              align="center"-->
-<!--              prop="responseLevel"-->
-<!--              :show-overflow-tooltip="true"-->
-<!--            />-->
-<!--            <el-table-column v-if="columns1[6].visible" label="响应开始时间" align="center" prop="responseStartTime" width="160">-->
-<!--              <template #default="scope">-->
-<!--                <span>{{ scope.row.responseStartTime }}</span>-->
-<!--              </template>-->
-<!--            </el-table-column>-->
-<!--            <el-table-column v-if="columns1[7].visible" label="响应开始时间" align="center" prop="responseEndTime" width="160">-->
-<!--              <template #default="scope">-->
-<!--                <span>{{ scope.row.responseEndTime }}</span>-->
-<!--              </template>-->
-<!--            </el-table-column>-->
-<!--          </el-table>-->
-<!--          <pagination-->
-<!--            v-show="total4 > 0"-->
-<!--            v-model:page="queryParams.pageNum"-->
-<!--            v-model:limit="queryParams.pageSize"-->
-<!--            :total="total4"-->
-<!--            @pagination="getListResponse"-->
-<!--          />-->
-<!--        </el-card>-->
+        <ResponseRecord :id="planId" />
       </el-col>
     </el-row>
     <!-- 修改弹窗 -->
@@ -214,6 +155,7 @@ import { download2 } from '@/utils/request';
 import { deletePlan, getPlanDetail, updateReport } from '@/api/riskPrevention/planManage';
 import TrainingRecord from './TrainingRecord.vue';
 import DrillRecord from './DrillRecord.vue';
+import ResponseRecord from './ResponseRecord.vue';
 
 const router = useRouter();
 
@@ -266,7 +208,7 @@ const rules = reactive({
   document: [{ required: true, message: '发文字号不能为空', trigger: 'blur' }],
   organizingUnit: [{ required: true, message: '编制单位不能为空', trigger: 'blur' }],
   publishDate: [{ required: true, message: '发布日期不能为空', trigger: 'blur' }]
-})
+});
 /** 修改预案按钮操作 */
 const planUpdate = async () => {
   resetForm();