feat: 安全责任书相关功能开发

src/api/production-safety/responsibility-implementation/index.ts

@@ -10,11 +10,10 @@ export function safetyResponsibilityAdminqueryPage(params) {
 }
 
 
-export function safetyResponsibilityAdminDelete(params) {
+export function safetyResponsibilityAdminDelete(id) {
   return http.request({
-    url: '/safetyResponsibility/admin/delete',
+    url: `/safetyResponsibility/admin/delete?id=${id}`,
     method: 'delete',
-    params
   });
 }
 
@@ -39,4 +38,47 @@ export function safetyResponsibilityAdminQueryDetail(params) {
     method: 'get',
     params
   });
+}
+
+export function safetyResponsibilityAdminScrap(id) {
+  return http.request({
+    url: `/safetyResponsibility/admin/scrap?id=${id}`,
+    method: 'put',
+  });
+}
+
+export function safetyResponsibilityAdminQueryIssuedObject(params) {
+  return http.request({
+    url: '/safetyResponsibility/admin/queryIssuedObject',
+    method: 'post',
+    params
+  });
+}
+
+export function safetyResponsibilityAdminExportIssuedObject(params) {
+  return http.request({
+    url: '/safetyResponsibility/admin/exportIssuedObject',
+    method: 'post',
+    params,
+    responseType: 'blob',
+  }, {
+    isTransformResponse: false,
+  });
+}
+
+
+export function safetyResponsibilityAdminDeleteIssuedObject(id) {
+  return http.request({
+    url: `/safetyResponsibility/admin/deleteIssuedObject?id=${id}`,
+    method: 'delete',
+  });
+}
+
+
+export function safetyResponsibilityAdminIssuedSafety(params) {
+  return http.request({
+    url: `/safetyResponsibility/admin/issuedSafety`,
+    method: 'post',
+    params
+  });
 }

src/router/routers/production-safety.ts

@@ -83,20 +83,20 @@ const productionSafetyRoutes = {
           noCache: false,
         }
       },
-      {
-        id: 90004,
-        parentId: 9001,
-        name: 'reviewResponsibilityAgree',
-        path: 'review-responsibility-agree',
-        component: '/production-safety/implement-safety-duty/review-responsibility-agree',
-        meta: {
-          title: '审核安全责任书',
-          icon: 'OverviewIcon',
-          isRoot: false,
-          hidden: false,
-          noCache: false,
-        }
-      },
+      // {
+      //   id: 90004,
+      //   parentId: 9001,
+      //   name: 'reviewResponsibilityAgree',
+      //   path: 'review-responsibility-agree',
+      //   component: '/production-safety/implement-safety-duty/review-responsibility-agree',
+      //   meta: {
+      //     title: '审核安全责任书',
+      //     icon: 'OverviewIcon',
+      //     isRoot: false,
+      //     hidden: false,
+      //     noCache: false,
+      //   }
+      // },
       {
         id: 90005,
         parentId: 9001,

src/views/production-safety/implement-safety-duty/components/IssueSafetyResponsibility.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-dialog v-model="showDialog" title="下发安全责任书" width="700" class="add-team-dialog" @close="clearData">
+    <el-form label-width="auto" :model="formData" ref="ruleFormRef" :rules="rules">
+      <el-form-item label="责任书名称">
+        <el-input :value="currentRowData.responsibilityName" size="large" disabled />
+      </el-form-item>
+      <el-form-item label="类别">
+        <el-input :value="currentRowData.departmentName" size="large" disabled />
+      </el-form-item>
+      <el-form-item prop="userGroupId" label="下发分组名称">
+        <el-select multiple size="large" v-model="formData.userGroupId" placeholder="下发分组名称">
+          <el-option v-for="group in groupList" :key="group.id" :label="group.name" :value="group.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="planStartTime" label="计划开始日期">
+        <el-date-picker size="large" style="width: 100%" v-model="formData.planStartTime" placeholder="计划开始日期" />
+      </el-form-item>
+      <el-form-item prop="planEndTime" label="计划结束日期">
+        <el-date-picker style="width: 100%" size="large" v-model="formData.planEndTime" placeholder="计划结束日期" />
+      </el-form-item>
+      <el-form-item prop="teamName" label="是否推送">
+        <el-radio-group v-model="formData.isUrgent">
+          <el-radio :value="1">是</el-radio>
+          <el-radio :value="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading"> 保存 </el-button>
+        <el-button @click="showDialog = false">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import dayjs from 'dayjs';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const props = defineProps<{
+    groupList: any[];
+    currentRowData: { [key: string]: any };
+  }>();
+  const emit = defineEmits<{ (e: 'emit-team-name', teamName: string) }>();
+  const submitLoading = ref(false);
+  const showDialog = ref(false);
+  const formData = reactive<any>({
+    userGroupId: '',
+    planStartTime: null,
+    planEndTime: null,
+    isUrgent: 0,
+  });
+  const ruleFormRef = ref<FormInstance>();
+  const rules = ref({
+    userGroupId: [{ required: true, message: '请选择下发分组' }],
+    planStartTime: [
+      { required: true, message: '请选择计划开始日期' },
+      {
+        validator: (rule, value) => {
+          return new Promise((resolve, reject) => {
+            if (value && formData.planStartTime) {
+              if (dayjs(value).isAfter(formData.planEndTime)) {
+                reject(new Error('开始日期不能大于结束日期'));
+                return;
+              }
+            }
+            resolve(true);
+          });
+        },
+      },
+    ],
+    planEndTime: [
+      { required: true, message: '请选择计划结束日期' },
+      {
+        validator: (rule, value) => {
+          return new Promise((resolve, reject) => {
+            if (value && formData.planStartTime) {
+              if (dayjs(value).isBefore(formData.planStartTime)) {
+                reject(new Error('结束日期不能小于开始日期'));
+                return;
+              }
+            }
+            resolve(true);
+          });
+        },
+      },
+    ],
+  });
+
+  function dialogShow() {
+    showDialog.value = true;
+  }
+  function dialogHide() {
+    showDialog.value = false;
+  }
+  function clearData() {
+    ruleFormRef.value?.resetFields();
+    Object.assign(formData, {
+      userGroupId: '',
+      planStartTime: null,
+      planEndTime: null,
+      isUrgent: 0,
+    });
+  }
+
+  async function submitForm() {
+    await ruleFormRef.value!.validate((valid) => {
+      if (valid) {
+        emit('submit', formData);
+        // showDialog.value = false;
+      }
+    });
+  }
+
+  defineExpose({
+    submitLoading,
+    dialogShow,
+    dialogHide,
+  });
+</script>
+
+<style scoped lang="scss"></style>
+<style>
+  .add-team-dialog {
+    min-height: 0;
+  }
+</style>

src/views/production-safety/implement-safety-duty/create-responsibility-agree.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="safety-platform-container">
     <header class="safety-platform-container__header">
-      {{ $route?.meta?.title }}
+      <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        {{ $route?.meta?.title }}
+      </div>
     </header>
     <main class="safety-platform-container__main">
       <el-form ref="formRef" label-width="auto" :model="formValue" :rules="rules">
@@ -90,6 +93,8 @@
   import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
   import { queryUserGroupPage } from '@/api/system/person-group';
   import { safetyResponsibilitySaveSafetyResponsibility } from '@/api/production-safety/responsibility-implementation';
+  import { formatAttachmentList } from '@/components/UploadFiles/utils';
+
   const router = useRouter();
   const route = useRoute();
   const formRef = ref<any>(null);
@@ -235,14 +240,15 @@
     }
   };
   const handleSubmit = () => {
-    formRef.value?.validate((valid) => {
+    formRef.value?.validate(async (valid) => {
       if (valid) {
         submiting.value = true;
+        const attachment = await formatAttachmentList(formValue.attachment);
         safetyResponsibilitySaveSafetyResponsibility({
           ...formValue,
           planStartTime: formValue.planStartTime ? dayjs(formValue.planStartTime).format('YYYY-MM-DD') : null,
           planEndTime: formValue.planEndTime ? dayjs(formValue.planEndTime).format('YYYY-MM-DD') : null,
-          attachment: JSON.stringify(formValue.attachment),
+          attachment: JSON.stringify(attachment),
           executeObject: Number(formValue.executeObject),
           userGroupId: formValue.userGroupId.join(','),
         })

src/views/production-safety/implement-safety-duty/edit-responsibility-agree.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="safety-platform-container">
     <header class="safety-platform-container__header">
-      {{ $route?.meta?.title }}
+      <div class="breadcrumb-title"> <BreadcrumbBack /> {{ $route?.meta?.title }} </div>
     </header>
     <main class="safety-platform-container__main">
       <el-form ref="formRef" label-width="auto" :model="formValue" :rules="rules">
@@ -93,6 +93,8 @@
     safetyResponsibilityUpdateSafetyResponsibility,
     safetyResponsibilityAdminQueryDetail,
   } from '@/api/production-safety/responsibility-implementation';
+  import { formatAttachmentList } from '@/components/UploadFiles/utils';
+
   const router = useRouter();
   const route = useRoute();
   const formRef = ref<any>(null);
@@ -238,15 +240,17 @@
     }
   };
   const handleSubmit = () => {
-    formRef.value?.validate((valid) => {
+    formRef.value?.validate(async (valid) => {
       if (valid) {
         submiting.value = true;
+        const attachment = await formatAttachmentList(formValue.attachment);
+        console.log('at:', attachment);
         safetyResponsibilityUpdateSafetyResponsibility({
           ...formValue,
           id: Number(route.query.id),
           planStartTime: formValue.planStartTime ? dayjs(formValue.planStartTime).format('YYYY-MM-DD') : null,
           planEndTime: formValue.planEndTime ? dayjs(formValue.planEndTime).format('YYYY-MM-DD') : null,
-          attachment: JSON.stringify(formValue.attachment),
+          attachment: JSON.stringify(attachment),
           executeObject: Number(formValue.executeObject),
           userGroupId: formValue.userGroupId.join(','),
         })

src/views/production-safety/implement-safety-duty/responsibility-agree-manage.vue

@@ -67,14 +67,13 @@
             "
             >添加
           </el-button>
-          <el-button type="primary" @click="handleSafetyResponsibilityAdminqueryPage">查询</el-button>
+          <el-button type="primary" @click="queryTableList">查询</el-button>
           <el-button @click="handleRestParams">重置</el-button>
         </div>
       </div>
 
       <div class="table-content">
         <el-table :data="tableData.data">
-          <el-table-column fixed="left" type="selection" width="60" />
           <el-table-column label="责任书名称" prop="responsibilityName" width="180" />
           <el-table-column label="状态" prop="statusName" width="100" />
           <el-table-column label="所属部门" prop="departmentName" width="180" />
@@ -116,18 +115,36 @@
                 "
                 type="primary"
                 link
+                @click="handleIssueSafetyResponsibility(scope)"
                 >下发
               </el-button>
-              <el-button v-if="scope.row.status === 4" type="primary" link>作废</el-button>
-              <el-button type="primary" link>下发对象</el-button>
+              <!-- <el-popconfirm v-if="scope.row.status === 4">
+                <el-button type="primary" link @click="handleScrap">作废</el-button>
+              </el-popconfirm> -->
+
+              <el-button
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'viewRecipients',
+                    query: {
+                      id: scope.row.id,
+                      status: scope.row.status,
+                    },
+                  })
+                "
+                >下发对象</el-button
+              >
 
               <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>
-      <div class="page-content">
+      <div class="pagination-container" v-if="tableData.total > 0">
         <el-pagination
+          background
           :current-page="queryParams.pageNumber"
           :page-size="queryParams.pageSize"
           :total="tableData.total"
@@ -137,6 +154,12 @@
       </div>
     </main>
   </div>
+  <IssueSafetyResponsibility
+    :groupList="groupList"
+    :currentRowData="currentRowData"
+    ref="issueSafetyResponsibilityRef"
+    @submit="handleSubmit"
+  />
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, reactive } from 'vue';
@@ -146,9 +169,20 @@
   import {
     safetyResponsibilityAdminqueryPage,
     safetyResponsibilityAdminDelete,
+    safetyResponsibilityAdminIssuedSafety,
   } from '@/api/production-safety/responsibility-implementation';
+  import { omit } from 'lodash-es';
+  import { queryUserGroupPage } from '@/api/system/person-group';
+
+  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
+  import { unformatAttachment } from '@/components/UploadFiles/utils';
+  import { downloadFile } from '@/views/disaster/utils';
+  import IssueSafetyResponsibility from './components/IssueSafetyResponsibility.vue';
   const router = useRouter();
+  const issueSafetyResponsibilityRef = ref<any>(null);
+  const currentRowData = ref<any>(null);
   const activeTab = ref('');
+  const groupList = ref<any[]>([]);
   const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
@@ -165,23 +199,44 @@
     data: [],
     total: 0,
   });
-  const handleSizeChange = () => {};
-  const handleCurrentChange = () => {};
+
+  const handleQueryUserGroupPage = () => {
+    queryUserGroupPage({
+      pageNumber: 1,
+      pageSize: 500,
+    }).then((res) => {
+      groupList.value = res.records;
+    });
+  };
+
+  const handleIssueSafetyResponsibility = (scope) => {
+    currentRowData.value = scope.row;
+    issueSafetyResponsibilityRef.value.dialogShow();
+  };
+
+  const handleSizeChange = (value) => {};
+  const handleCurrentChange = (value) => {
+    queryParams.pageNumber = value;
+    queryTableList();
+  };
+
   const handleDownloadLink = (scope) => {
-    window.location.href = scope.row.attachment;
+    const attachment = unformatAttachment(scope.row.attachment);
+    attachment?.forEach((item: any) => {
+      downloadFile(item.fileUrl, item.fileName);
+    });
   };
   const handleConfirmDeleteRow = (scope) => {
-    safetyResponsibilityAdminDelete({
-      id: scope.row.id,
-    }).then(() => {
+    safetyResponsibilityAdminDelete(scope.row.id).then(() => {
       ElMessage.success('删除成功!');
+      queryTableList();
     });
   };
-  const handleSafetyResponsibilityAdminqueryPage = () => {
+  const queryTableList = () => {
     safetyResponsibilityAdminqueryPage({
       ...queryParams,
       queryParam: {
-        ...queryParams.queryParam,
+        ...omit(queryParams.queryParam, 'date'),
         startTime: queryParams.queryParam.date?.[0]
           ? dayjs(queryParams.queryParam.date?.[0]).format('YYYY-MM-DD')
           : undefined,
@@ -191,7 +246,7 @@
       },
     }).then((res) => {
       tableData.data = res.records;
-      tableData.total = res.totalPage;
+      tableData.total = res.totalRow;
     });
   };
   const handleRestParams = () => {
@@ -206,11 +261,31 @@
         responsibilityPersonId: '',
       },
     });
-    handleSafetyResponsibilityAdminqueryPage();
+    queryTableList();
+  };
+
+  const handleSubmit = (formData) => {
+    issueSafetyResponsibilityRef.value.submitLoading = true;
+    safetyResponsibilityAdminIssuedSafety({
+      ...formData,
+      userGroupId: formData.userGroupId.join(','),
+      planStartTime: dayjs(formData.planStartTime).format('YYYY-MM-DD'),
+      planEndTime: dayjs(formData.planEndTime).format('YYYY-MM-DD'),
+      id: currentRowData.value.id,
+    })
+      .then(() => {
+        queryTableList();
+        issueSafetyResponsibilityRef.value.dialogHide();
+        currentRowData.value = {};
+      })
+      .finally(() => {
+        issueSafetyResponsibilityRef.value.submitLoading = false;
+      });
   };
 
-  onMounted(() => {
-    handleSafetyResponsibilityAdminqueryPage();
+  onMounted(async () => {
+    await handleQueryUserGroupPage();
+    queryTableList();
   });
 </script>
 

src/views/production-safety/implement-safety-duty/view-recipients.vue

@@ -1,4 +1,318 @@
 <template>
-  <div>view recipients </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> <BreadcrumbBack /> 查看下发对象 </div>
+      <div class="detail-content">
+        <span>类别名称：{{ detailData?.departmentName }} </span>
+        <span>创建人：{{ detailData?.createdByName }} </span>
+        <span>创建时间：{{ detailData?.createdAt }} </span>
+      </div>
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="全部" name="" />
+        <el-tab-pane label="待签署" name="2" />
+        <el-tab-pane label="待反馈材料" name="3" />
+        <el-tab-pane label="待审核" name="4" />
+        <el-tab-pane label="已完成" name="5" />
+        <el-tab-pane label="已作废" name="6" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="状态" v-if="activeTab">
+            <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
+              <el-option :value="1" label="未下发" />
+              <el-option :value="2" label="待签署" />
+              <el-option :value="3" label="待反馈材料" />
+              <el-option :value="4" label="待审核" />
+              <el-option :value="5" label="已完成" />
+              <el-option :value="6" label="已作废" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属部门">
+            <el-select v-model="queryParams.queryParam.userGroupId" placeholder="分组名称" style="width: 170px">
+              <el-option v-for="group in groupList" :key="group.id" :label="group.name" :value="group.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="计划日期">
+            <el-date-picker
+              v-model="queryParams.queryParam.date"
+              clearable
+              type="daterange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              style="width: 230px"
+            />
+          </el-form-item>
+        </el-form>
+
+        <div>
+          <el-button type="primary" @click="handleExport">导出 </el-button>
+          <el-button type="primary" @click="queryTableList">查询</el-button>
+          <el-button @click="handleRestParams">重置</el-button>
+        </div>
+      </div>
+
+      <div class="table-content">
+        <el-table :data="tableData.data">
+          <el-table-column label="责任书名称" prop="responsibilityName" width="180" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column label="所属部门" prop="departmentName" />
+
+          <el-table-column label="分组名称" prop="userGroupName" />
+          <el-table-column label="计划完成时间" prop="planEndTime" />
+          <el-table-column fixed="right" width="200" label="操作">
+            <template #default="scope">
+              <el-popconfirm
+                v-if="scope.row.status === 1 || scope.row.status === 6"
+                title="确定要删除吗?"
+                @confirm="handleConfirmDeleteRow(scope)"
+              >
+                <template #reference>
+                  <el-button type="primary" link>删除</el-button>
+                </template>
+              </el-popconfirm>
+              <el-popconfirm v-if="scope.row.status === 6">
+                <el-button type="primary" link @click="handleScrap(scope)">作废</el-button>
+              </el-popconfirm>
+              <el-button
+                v-if="scope.row.status === 4"
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'agreeDocumentReview',
+                  })
+                "
+                >审核</el-button
+              >
+              <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container">
+        <el-pagination
+          background
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { onMounted, ref, reactive, watch } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import { useRouter, useRoute } from 'vue-router';
+  import { omit } from 'lodash-es';
+
+  import { queryUserGroupPage } from '@/api/system/person-group';
+  import {
+    safetyResponsibilityAdminQueryIssuedObject,
+    safetyResponsibilityAdminExportIssuedObject,
+    safetyResponsibilityAdminDeleteIssuedObject,
+    safetyResponsibilityAdminScrap,
+  } from '@/api/production-safety/responsibility-implementation';
+  import { downloadByData } from '@/utils/file/download';
+  import { unformatAttachment } from '@/components/UploadFiles/utils';
+  import { downloadFile } from '@/views/disaster/utils';
+
+  const router = useRouter();
+  const route = useRoute();
+  const activeTab = ref<any>('');
+  const groupList = ref<any>([]);
+
+  const queryParams = reactive<any>({
+    pageNumber: 1,
+    pageSize: 10,
+    queryParam: {
+      adminId: route.query.id,
+      status: '',
+      date: '',
+      userGroupId: '',
+    },
+  });
+
+  const detailData = reactive({
+    createdAt: '',
+    createdByName: '',
+    departmentName: '',
+    responsibilityName: '',
+  });
+
+  const tableData = reactive({
+    data: [],
+    total: 0,
+  });
+
+  const handleQueryUserGroupPage = () => {
+    queryUserGroupPage({
+      pageNumber: 1,
+      pageSize: 500,
+    }).then((res) => {
+      groupList.value = res.records;
+    });
+  };
+
+  const handleSizeChange = () => {};
+  const handleCurrentChange = () => {};
+  const handleDownloadLink = (scope) => {
+    const attachment = unformatAttachment(scope.row.attachment);
+    attachment?.forEach((item: any) => {
+      downloadFile(item.fileUrl, item.fileName);
+    });
+  };
+
+  const handleScrap = (scope) => {
+    safetyResponsibilityAdminScrap(scope.row.id).then(() => {
+      ElMessage.success('作废成功');
+      queryTableList();
+    });
+  };
+
+  const handleExport = () => {
+    safetyResponsibilityAdminExportIssuedObject({
+      ...omit(queryParams.queryParam, 'date'),
+      adminId: Number(queryParams.queryParam.adminId),
+      startTime: queryParams.queryParam.date?.[0]
+        ? dayjs(queryParams.queryParam.date?.[0]).format('YYYY-MM-DD')
+        : undefined,
+      endTime: queryParams.queryParam.date?.[1]
+        ? dayjs(queryParams.queryParam.date?.[1]).format('YYYY-MM-DD')
+        : undefined,
+    }).then((res) => {
+      if (!res) {
+        throw new Error('下载文件失败');
+      }
+      downloadByData(res, `${Date.now()}.xlsx`);
+      ElMessage.success('导出文件成功');
+    });
+  };
+  const handleConfirmDeleteRow = (scope) => {
+    safetyResponsibilityAdminDeleteIssuedObject(scope.row.id).then(() => {
+      ElMessage.success('删除成功!');
+      queryTableList();
+    });
+  };
+  const queryTableList = () => {
+    safetyResponsibilityAdminQueryIssuedObject({
+      ...queryParams,
+      queryParam: {
+        ...omit(queryParams.queryParam, 'date'),
+        adminId: queryParams.queryParam.adminId,
+        startTime: queryParams.queryParam.date?.[0]
+          ? dayjs(queryParams.queryParam.date?.[0]).format('YYYY-MM-DD')
+          : undefined,
+        endTime: queryParams.queryParam.date?.[1]
+          ? dayjs(queryParams.queryParam.date?.[1]).format('YYYY-MM-DD')
+          : undefined,
+      },
+    }).then((res) => {
+      tableData.data = res.pages.records;
+      tableData.total = res.pages.totalPage;
+      Object.keys(detailData).forEach((item) => {
+        if (item in res) {
+          detailData[item] = res[item];
+        }
+      });
+      console.log(detailData);
+    });
+  };
+  const handleRestParams = () => {
+    Object.assign(queryParams, {
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        status: '',
+        date: '',
+        userGroupId: '',
+      },
+    });
+    queryTableList();
+  };
+
+  watch(route.query, (a, b) => {
+    console.log('a:', a, b);
+    //
+  });
+
+  onMounted(async () => {
+    activeTab.value = route.query.status;
+    Object.assign(queryParams, {
+      queryParam: {
+        ...queryParams.queryParam,
+        status: Number(activeTab.value),
+      },
+    });
+    await handleQueryUserGroupPage();
+
+    queryTableList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .safety-platform-container__header {
+    padding-bottom: 0 !important;
+  }
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+  :deep(.el-tabs__item) {
+    font-size: 14px !important;
+  }
+  :deep(.flexContent) {
+    display: flex;
+  }
+  :deep(.breadcrumb .title) {
+    margin-left: 0;
+  }
+
+  :deep(.el-form) {
+    flex: 1;
+    display: flex;
+    row-gap: 15px;
+    flex-wrap: wrap;
+  }
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+  :deep(main) {
+    display: flex;
+    flex-direction: column;
+  }
+  .detail-content {
+    display: flex;
+    gap: 30px;
+    font-size: 14px;
+  }
+  .search-form {
+    min-width: 800px;
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .button-content {
+    margin-bottom: 20px;
+  }
+  .table-content {
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .page-content {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>