feat: 安全责任落实模块开发

package.json

@@ -37,6 +37,7 @@
     "@vue-office/pptx": "1.0.1",
     "@vueuse/core": "14.0.0",
     "@vueuse/router": "10.6.1",
+    "@wangeditor/editor": "^5.1.12",
     "@wangeditor/editor-for-vue": "5.1.12",
     "animate.css": "4.1.1",
     "axios": "0.27.2",
@@ -75,7 +76,7 @@
   "devDependencies": {
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
-    "@types/crypto-js":"4.2.0",
+    "@types/crypto-js": "4.2.0",
     "@types/element-resize-detector": "1.1.3",
     "@types/intro.js": "3.0.2",
     "@types/lodash-es": "4.17.6",

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

@@ -1,10 +1,42 @@
 import { http } from '@/utils/http/axios';
 import type { QueryPageRequest, QueryPageResponse } from '@/types/basic-query';
 
-export function getPersonOverview() {
+export function safetyResponsibilityAdminqueryPage(params) {
   return http.request({
-    url: '/overview/queryOverviewVisitorStatistics',
-    method: 'get',
+    url: '/safetyResponsibility/admin/queryPage',
+    method: 'post',
+    params
+  });
+}
+
+
+export function safetyResponsibilityAdminDelete(params) {
+  return http.request({
+    url: '/safetyResponsibility/admin/delete',
+    method: 'delete',
+    params
+  });
+}
+
+export function safetyResponsibilitySaveSafetyResponsibility(params) {
+  return http.request({
+    url: '/safetyResponsibility/admin/saveSafetyResponsibility',
+    method: 'post',
+    params
+  });
+}
+export function safetyResponsibilityUpdateSafetyResponsibility(params) {
+  return http.request({
+    url: '/safetyResponsibility/admin/updateSafetyResponsibility',
+    method: 'put',
+    params
   });
 }
 
+export function safetyResponsibilityAdminQueryDetail(params) {
+  return http.request({
+    url: '/safetyResponsibility/admin/queryDetail',
+    method: 'get',
+    params
+  });
+}

src/router/routers/production-safety.ts

@@ -58,7 +58,7 @@ const productionSafetyRoutes = {
       {
         id: 90002,
         parentId: 9001,
-        name: 'eidtResponsibilityAgree',
+        name: 'editResponsibilityAgree',
         path: 'edit-responsibility-agree',
         component: '/production-safety/implement-safety-duty/edit-responsibility-agree',
         meta: {

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

@@ -1,4 +1,307 @@
 <template>
-  <div>create agree </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      {{ $route?.meta?.title }}
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" label-width="auto" :model="formValue" :rules="rules">
+        <el-form-item label="责任书名称" prop="responsibilityName">
+          <el-input
+            v-model="formValue.responsibilityName"
+            size="large"
+            placeholder="搜索安全责任书名称"
+            style="width: 50%"
+          />
+        </el-form-item>
+        <el-form-item label="所属部门" prop="departmentName">
+          <el-select v-model="formValue.departmentName" size="large" placeholder="所属部门" style="width: 50%">
+            <el-option value="院领导">院领导</el-option>
+            <el-option value="部门">部门</el-option>
+            <el-option value="科室">科室</el-option>
+            <el-option value="员工">员工</el-option>
+            <el-option value="常驻供应商">常驻供应商</el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上传附件责任书文档" prop="attachment">
+          <UploadFiles
+            label="上传附件"
+            :maxCount="1"
+            @uploadSuccess="handleUploadSuccess"
+            :fileList="formValue.attachment"
+          />
+        </el-form-item>
+
+        <el-form-item label="责任书内容" prop="content">
+          <div class="editor-container">
+            <Toolbar style="border-bottom: 1px solid #dcdfe6" :editor="editorRef" />
+            <Editor
+              style="height: 300px; overflow-y: auto"
+              v-model="formValue.content"
+              mode="default"
+              :default-config="editorConfig"
+              @on-created="handleCreated"
+              @on-change="handleEditorChange"
+            />
+          </div>
+        </el-form-item>
+        <el-form-item label=" ">
+          <el-checkbox v-model="formValue.executeObject" label="创建下发执行对象" @change="handleExecuteObjectChange" />
+        </el-form-item>
+        <template v-if="Boolean(formValue.executeObject)">
+          <el-form-item label="下发分组名称" prop="userGroupId">
+            <el-select v-model="formValue.userGroupId" multiple size="large" placeholder="分组名称" style="width: 50%">
+              <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="计划开始日期" prop="planStartTime">
+            <el-date-picker
+              v-model="formValue.planStartTime"
+              size="large"
+              placeholder="请选择日期"
+              style="width: 50%"
+            />
+          </el-form-item>
+
+          <el-form-item label="计划结束日期" prop="planEndTime">
+            <el-date-picker v-model="formValue.planEndTime" size="large" placeholder="请选择日期" style="width: 50%" />
+          </el-form-item>
+          <el-form-item label="是否推送" prop="isUrgent">
+            <el-radio-group v-model="formValue.isUrgent">
+              <el-radio :value="1">是</el-radio>
+              <el-radio :value="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </template>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'responsibilityAgreeManage' })">返回</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submiting">提交</el-button>
+    </footer>
+  </div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { onMounted, ref, nextTick, reactive, shallowRef } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import '@wangeditor/editor/dist/css/style.css';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
+  import { queryUserGroupPage } from '@/api/system/person-group';
+  import { safetyResponsibilitySaveSafetyResponsibility } from '@/api/production-safety/responsibility-implementation';
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const editorRef = shallowRef();
+  const submiting = ref(false);
+  const editorConfig = {
+    placeholder: '请输入...',
+  };
+  const groupList = ref<any>([]);
+  const formValue = reactive({
+    responsibilityName: '',
+    departmentName: '',
+    userGroupId: [],
+    planStartTime: null,
+    planEndTime: null,
+    isUrgent: null,
+    executeObject: 0,
+    content: '<p></p>',
+    attachment: [],
+  });
+
+  const rules = reactive({
+    responsibilityName: [
+      {
+        required: true,
+        message: '责任书名称不能为空',
+        trigger: 'change',
+      },
+    ],
+    departmentName: [
+      {
+        required: true,
+        message: '请选择部门',
+        trigger: 'change',
+      },
+    ],
+    attachment: [
+      {
+        required: true,
+        message: '请上传附件',
+      },
+    ],
+    userGroupId: [
+      {
+        required: true,
+        message: '请选择分组',
+        trigger: 'change',
+      },
+    ],
+    content: [
+      {
+        required: true,
+        message: '请输入责任书内容',
+      },
+      {
+        validator: (rule, value, callback) => {
+          const text = (value || '').replace(/<[^>]+>/g, '').trim();
+          callback(text ? undefined : new Error('责任书内容不能为空'));
+        },
+        trigger: 'change',
+      },
+    ],
+    planStartTime: [
+      {
+        required: true,
+        message: '请选择计划开始时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planEndTime) {
+            if (dayjs(value).isAfter(formValue.planEndTime)) {
+              callback(new Error('开始日期不能大于结束日期'));
+              return;
+            }
+          }
+          callback();
+        },
+      },
+    ],
+    planEndTime: [
+      {
+        required: true,
+        message: '请选择计划结束时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planStartTime) {
+            if (dayjs(value).isBefore(formValue.planStartTime)) {
+              callback(new Error('结束日期不能小于开始日期'));
+              return;
+            }
+          }
+          callback();
+        },
+      },
+    ],
+    isUrgent: [
+      {
+        required: true,
+        message: '请选择是否推送',
+        trigger: 'change',
+      },
+    ],
+  });
+
+  const handleCreated = (value) => {
+    editorRef.value = value;
+  };
+
+  const handleEditorChange = (editor) => {
+    formValue.content = editor.getHtml();
+    if (!formValue.content.replace(/<[^>]+>/g, '').trim()) {
+      return;
+    }
+    nextTick(() => {
+      formRef.value?.validateField('content');
+    });
+  };
+
+  const handleQueryUserGroupPage = () => {
+    queryUserGroupPage({
+      pageNumber: 1,
+      pageSize: 500,
+    }).then((res) => {
+      groupList.value = res.records;
+    });
+  };
+
+  const handleUploadSuccess = (fileList) => {
+    formValue.attachment = fileList;
+    formRef.value.validateField('attachment');
+  };
+  const handleExecuteObjectChange = (value) => {
+    if (!value) {
+      Object.assign(formValue, {
+        userGroupId: [],
+        planStartTime: null,
+        planEndTime: null,
+        isUrgent: null,
+      });
+    }
+  };
+  const handleSubmit = () => {
+    formRef.value?.validate((valid) => {
+      if (valid) {
+        submiting.value = true;
+        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),
+          executeObject: Number(formValue.executeObject),
+          userGroupId: formValue.userGroupId.join(','),
+        })
+          .then((res) => {
+            ElMessage.success('创建成功!');
+            router.push({
+              name: 'responsibilityAgreeManage',
+            });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      } else {
+      }
+    });
+  };
+  onMounted(() => {
+    handleQueryUserGroupPage();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
+  .editor-container {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    // :deep(.w-e-text-container) {
+    //   min-height: 400px;
+    //   overflow-y: auto;
+    // }
+  }
+  // :deep(.breadcrumb .title) {
+  //   margin-left: 0;
+  // }
+
+  // .main {
+  //   display: flex;
+  //   flex-direction: column;
+  //   padding: 20px;
+  //   flex: 1;
+  //   overflow: hidden;
+  //   background-color: #fff;
+  // }
+  // .button-content {
+  //   margin-bottom: 20px;
+  // }
+
+  // .page-content {
+  //   display: flex;
+  //   justify-content: flex-end;
+  // }
+  // // :deep(.el-form) {
+  // //   flex: 1;
+  // //   overflow: hidden;
+  // //   overflow-y: auto;
+  // // }
+</style>

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

@@ -1,4 +1,328 @@
 <template>
-  <div>edit agree </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      {{ $route?.meta?.title }}
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" label-width="auto" :model="formValue" :rules="rules">
+        <el-form-item label="责任书名称" prop="responsibilityName">
+          <el-input
+            v-model="formValue.responsibilityName"
+            size="large"
+            placeholder="搜索安全责任书名称"
+            style="width: 50%"
+          />
+        </el-form-item>
+        <el-form-item label="所属部门" prop="departmentName">
+          <el-select v-model="formValue.departmentName" size="large" placeholder="所属部门" style="width: 50%">
+            <el-option value="院领导">院领导</el-option>
+            <el-option value="部门">部门</el-option>
+            <el-option value="科室">科室</el-option>
+            <el-option value="员工">员工</el-option>
+            <el-option value="常驻供应商">常驻供应商</el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上传附件责任书文档" prop="attachment">
+          <UploadFiles
+            label="上传附件"
+            :maxCount="1"
+            @uploadSuccess="handleUploadSuccess"
+            :fileList="formValue.attachment"
+          />
+        </el-form-item>
+
+        <el-form-item label="责任书内容" prop="content">
+          <div class="editor-container">
+            <Toolbar style="border-bottom: 1px solid #dcdfe6" :editor="editorRef" />
+            <Editor
+              style="height: 300px; overflow-y: auto"
+              v-model="formValue.content"
+              mode="default"
+              :default-config="editorConfig"
+              @on-created="handleCreated"
+              @on-change="handleEditorChange"
+            />
+          </div>
+        </el-form-item>
+        <el-form-item label=" ">
+          <el-checkbox v-model="formValue.executeObject" label="创建下发执行对象" @change="handleExecuteObjectChange" />
+        </el-form-item>
+        <template v-if="Boolean(formValue.executeObject)">
+          <el-form-item label="下发分组名称" prop="userGroupId">
+            <el-select v-model="formValue.userGroupId" multiple size="large" placeholder="分组名称" style="width: 50%">
+              <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="计划开始日期" prop="planStartTime">
+            <el-date-picker
+              v-model="formValue.planStartTime"
+              size="large"
+              placeholder="请选择日期"
+              style="width: 50%"
+            />
+          </el-form-item>
+
+          <el-form-item label="计划结束日期" prop="planEndTime">
+            <el-date-picker v-model="formValue.planEndTime" size="large" placeholder="请选择日期" style="width: 50%" />
+          </el-form-item>
+          <el-form-item label="是否推送" prop="isUrgent">
+            <el-radio-group v-model="formValue.isUrgent">
+              <el-radio :value="1">是</el-radio>
+              <el-radio :value="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </template>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'responsibilityAgreeManage' })">返回</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submiting">提交</el-button>
+    </footer>
+  </div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { onMounted, ref, nextTick, reactive, shallowRef } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import '@wangeditor/editor/dist/css/style.css';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
+  import { queryUserGroupPage } from '@/api/system/person-group';
+  import {
+    safetyResponsibilityUpdateSafetyResponsibility,
+    safetyResponsibilityAdminQueryDetail,
+  } from '@/api/production-safety/responsibility-implementation';
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const editorRef = shallowRef();
+  const submiting = ref(false);
+  const editorConfig = {
+    placeholder: '请输入...',
+  };
+  const groupList = ref<any>([]);
+  const formValue = reactive({
+    responsibilityName: '',
+    departmentName: '',
+    userGroupId: [],
+    planStartTime: null,
+    planEndTime: null,
+    isUrgent: null,
+    executeObject: 0,
+    content: '<p></p>',
+    attachment: [],
+  });
+
+  const rules = reactive({
+    responsibilityName: [
+      {
+        required: true,
+        message: '责任书名称不能为空',
+        trigger: 'change',
+      },
+    ],
+    departmentName: [
+      {
+        required: true,
+        message: '请选择部门',
+        trigger: 'change',
+      },
+    ],
+    attachment: [
+      {
+        required: true,
+        message: '请上传附件',
+      },
+    ],
+    userGroupId: [
+      {
+        required: true,
+        message: '请选择分组',
+        trigger: 'change',
+      },
+    ],
+    content: [
+      {
+        required: true,
+        message: '请输入责任书内容',
+      },
+      {
+        validator: (rule, value, callback) => {
+          const text = (value || '').replace(/<[^>]+>/g, '').trim();
+          callback(text ? undefined : new Error('责任书内容不能为空'));
+        },
+        trigger: 'change',
+      },
+    ],
+    planStartTime: [
+      {
+        required: true,
+        message: '请选择计划开始时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planEndTime) {
+            if (dayjs(value).isAfter(formValue.planEndTime)) {
+              callback(new Error('开始日期不能大于结束日期'));
+              return;
+            }
+          }
+          callback();
+        },
+      },
+    ],
+    planEndTime: [
+      {
+        required: true,
+        message: '请选择计划结束时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planStartTime) {
+            if (dayjs(value).isBefore(formValue.planStartTime)) {
+              callback(new Error('结束日期不能小于开始日期'));
+              return;
+            }
+          }
+          callback();
+        },
+      },
+    ],
+    isUrgent: [
+      {
+        required: true,
+        message: '请选择是否推送',
+        trigger: 'change',
+      },
+    ],
+  });
+
+  const handleCreated = (value) => {
+    editorRef.value = value;
+  };
+
+  const handleEditorChange = (editor) => {
+    formValue.content = editor.getHtml();
+    if (!formValue.content.replace(/<[^>]+>/g, '').trim()) {
+      return;
+    }
+    nextTick(() => {
+      formRef.value?.validateField('content');
+    });
+  };
+
+  const handleQueryUserGroupPage = () => {
+    queryUserGroupPage({
+      pageNumber: 1,
+      pageSize: 500,
+    }).then((res) => {
+      groupList.value = res.records;
+    });
+  };
+
+  const handleUploadSuccess = (fileList) => {
+    formValue.attachment = fileList;
+    formRef.value.validateField('attachment');
+  };
+  const handleExecuteObjectChange = (value) => {
+    if (!value) {
+      Object.assign(formValue, {
+        userGroupId: [],
+        planStartTime: null,
+        planEndTime: null,
+        isUrgent: null,
+      });
+    }
+  };
+  const handleSubmit = () => {
+    formRef.value?.validate((valid) => {
+      if (valid) {
+        submiting.value = true;
+        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),
+          executeObject: Number(formValue.executeObject),
+          userGroupId: formValue.userGroupId.join(','),
+        })
+          .then((res) => {
+            ElMessage.success('编辑成功!');
+            router.push({
+              name: 'responsibilityAgreeManage',
+            });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      } else {
+      }
+    });
+  };
+  const handleSafetyResponsibilityAdminQueryDetail = () => {
+    safetyResponsibilityAdminQueryDetail({
+      id: route.query.id,
+    }).then((res) => {
+      console.log(res);
+      Object.assign(formValue, {
+        responsibilityName: res.responsibilityName,
+        departmentName: res.departmentName,
+        userGroupId: res.userGroupId ? res.userGroupId.split(',').map((el) => Number(el)) : [],
+        planStartTime: dayjs(res.planStartTime),
+        planEndTime: dayjs(res.planEndTime),
+        isUrgent: res.isUrgent,
+        executeObject: Boolean(res.executeObject),
+        content: res.content,
+        attachment: res.attachment ? JSON.parse(res.attachment) : [],
+      });
+    });
+  };
+  onMounted(async () => {
+    await handleQueryUserGroupPage();
+    handleSafetyResponsibilityAdminQueryDetail();
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '@/styles/page-details-layout.scss' as *;
+  .editor-container {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 20px;
+    overflow: hidden;
+
+    // :deep(.w-e-text-container) {
+    //   min-height: 400px;
+    //   overflow-y: auto;
+    // }
+  }
+  // :deep(.breadcrumb .title) {
+  //   margin-left: 0;
+  // }
+
+  // .main {
+  //   display: flex;
+  //   flex-direction: column;
+  //   padding: 20px;
+  //   flex: 1;
+  //   overflow: hidden;
+  //   background-color: #fff;
+  // }
+  // .button-content {
+  //   margin-bottom: 20px;
+  // }
+
+  // .page-content {
+  //   display: flex;
+  //   justify-content: flex-end;
+  // }
+  // // :deep(.el-form) {
+  // //   flex: 1;
+  // //   overflow: hidden;
+  // //   overflow-y: auto;
+  // // }
+</style>

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

@@ -1,84 +1,261 @@
 <template>
-  <VerticalFlexLayout>
-    <template #static>
-      <Breadcrumb />
-    </template>
-    <div class="main">
-      <el-tabs>
-        <el-tab-pane label="全部" name="first" />
-        <el-tab-pane label="院领导" name="first" />
-        <el-tab-pane label="部门" name="first" />
-        <el-tab-pane label="科室" name="first" />
-        <el-tab-pane label="员工" name="first" />
-        <el-tab-pane label="常驻供应商" name="first" />
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 安全责任书管理 </div>
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="全部" name="" />
+        <el-tab-pane label="院领导" name="院领导" />
+        <el-tab-pane label="部门" name="部门" />
+        <el-tab-pane label="科室" name="科室" />
+        <el-tab-pane label="员工" name="员工" />
+        <el-tab-pane label="常驻供应商" name="常驻供应商" />
       </el-tabs>
-      <el-form :inline="true">
-        <el-form-item>
-          <el-input placeholder="搜索安全责任书名称" style="width: 170px" />
-        </el-form-item>
-        <el-form-item>
-          <el-select placeholder="状态" style="width: 170px" />
-        </el-form-item>
-        <el-form-item>
-          <el-select placeholder="所属部门" style="width: 170px" />
-        </el-form-item>
-        <el-form-item>
-          <el-date-picker placeholder="计划日期范围" style="width: 170px" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary">查询</el-button>
-          <el-button>重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="button-content">
-        <el-button type="primary">添加</el-button>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="安全责任书">
+            <el-input
+              v-model="queryParams.queryParam.responsibilityName"
+              placeholder="搜索安全责任书名称"
+              style="width: 170px"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <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 v-if="activeTab" label="所属部门">
+            <el-select
+              v-model="queryParams.queryParam.departmentName"
+              clearable
+              placeholder="所属部门"
+              style="width: 170px"
+            >
+              <el-option value="院领导">院领导</el-option>
+              <el-option value="部门">部门</el-option>
+              <el-option value="科室">科室</el-option>
+              <el-option value="员工">员工</el-option>
+              <el-option value="常驻供应商">常驻供应商</el-option>
+            </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="
+              $router.push({
+                name: 'createResponsibilityAgree',
+              })
+            "
+            >添加
+          </el-button>
+          <el-button type="primary" @click="handleSafetyResponsibilityAdminqueryPage">查询</el-button>
+          <el-button @click="handleRestParams">重置</el-button>
+        </div>
       </div>
+
       <div class="table-content">
-        <el-table>
-          <el-table-column type="selection" width="55" />
-          <el-table-column label="责任书名称" width="180" />
-          <el-table-column label="状态" width="100" />
-          <el-table-column label="所属部门" width="180" />
-          <el-table-column label="下发数" width="120" />
-          <el-table-column label="签署人数" width="120" />
-          <el-table-column label="签署比例" width="120" />
-          <el-table-column label="分组名称" width="150" />
-          <el-table-column label="计划完成时间" width="150" />
-          <el-table-column fixed="right" min-width="200" label="操作">
+        <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" />
+          <el-table-column label="下发数" prop="issuedQuantity" width="120" />
+          <el-table-column label="签署人数" prop="signedQuantity" width="120" />
+          <el-table-column label="签署比例" prop="signedRatio" width="120" />
+          <el-table-column label="分组名称" prop="userGroupName" width="150" />
+          <el-table-column label="计划完成时间" prop="planEndTime" width="150" />
+          <el-table-column fixed="right" min-width="300" label="操作">
             <template #default="scope">
-              <el-button type="primary" link>编辑</el-button>
-              <el-button type="primary" link>删除</el-button>
+              <el-button
+                v-if="scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 3"
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'editResponsibilityAgree',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+              >
+                编辑
+              </el-button>
+              <el-button v-if="scope.row.status === 4">审核</el-button>
+              <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-button
+                v-if="
+                  scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 3 || scope.row.status === 4
+                "
+                type="primary"
+                link
+                >下发
+              </el-button>
+              <el-button v-if="scope.row.status === 4" type="primary" link>作废</el-button>
               <el-button type="primary" link>下发对象</el-button>
-              <el-button type="primary" link>下发</el-button>
-              <el-button type="primary" link>下载</el-button>
-              <el-button type="primary" link>作废</el-button>
+
+              <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
             </template>
           </el-table-column>
         </el-table>
       </div>
-      <div class="page-content"> sdfsd </div>
-    </div>
-  </VerticalFlexLayout>
+      <div class="page-content">
+        <el-pagination
+          :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>
-  import Breadcrumb from '@/components/Breadcrumb.vue';
-  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
+  import { onMounted, ref, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
+    safetyResponsibilityAdminqueryPage,
+    safetyResponsibilityAdminDelete,
+  } from '@/api/production-safety/responsibility-implementation';
+  const router = useRouter();
+  const activeTab = ref('');
+  const queryParams = reactive<any>({
+    pageNumber: 1,
+    pageSize: 10,
+    queryParam: {
+      responsibilityName: '',
+      departmentName: '',
+      status: '',
+      date: '',
+      responsibilityPersonId: '',
+    },
+  });
+
+  const tableData = reactive({
+    data: [],
+    total: 0,
+  });
+  const handleSizeChange = () => {};
+  const handleCurrentChange = () => {};
+  const handleDownloadLink = (scope) => {
+    window.location.href = scope.row.attachment;
+  };
+  const handleConfirmDeleteRow = (scope) => {
+    safetyResponsibilityAdminDelete({
+      id: scope.row.id,
+    }).then(() => {
+      ElMessage.success('删除成功!');
+    });
+  };
+  const handleSafetyResponsibilityAdminqueryPage = () => {
+    safetyResponsibilityAdminqueryPage({
+      ...queryParams,
+      queryParam: {
+        ...queryParams.queryParam,
+        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.records;
+      tableData.total = res.totalPage;
+    });
+  };
+  const handleRestParams = () => {
+    Object.assign(queryParams, {
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        responsibilityName: '',
+        departmentName: '',
+        status: '',
+        date: '',
+        responsibilityPersonId: '',
+      },
+    });
+    handleSafetyResponsibilityAdminqueryPage();
+  };
+
+  onMounted(() => {
+    handleSafetyResponsibilityAdminqueryPage();
+  });
 </script>
 
-<style lang="css" scoped>
+<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;
   }
-  .main {
+
+  :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;
-    padding: 20px;
-    flex: 1;
-    overflow: hidden;
   }
+  .search-form {
+    min-width: 800px;
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
   .button-content {
     margin-bottom: 20px;
   }

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

@@ -1,4 +1,255 @@
 <template>
-  <div>review agree </div>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> 审核安全责任书 </div>
+      <el-tabs v-model="activeTab">
+        <el-tab-pane label="待审核" name="" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div class="search-form">
+        <el-form :inline="true">
+          <el-form-item label="安全责任书">
+            <el-input
+              v-model="queryParams.queryParam.responsibilityName"
+              placeholder="搜索安全责任书名称"
+              style="width: 170px"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <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 v-if="activeTab" label="所属部门">
+            <el-select
+              v-model="queryParams.queryParam.departmentName"
+              clearable
+              placeholder="所属部门"
+              style="width: 170px"
+            >
+              <el-option value="院领导">院领导</el-option>
+              <el-option value="部门">部门</el-option>
+              <el-option value="科室">科室</el-option>
+              <el-option value="员工">员工</el-option>
+              <el-option value="常驻供应商">常驻供应商</el-option>
+            </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="handleSafetyResponsibilityAdminqueryPage">查询</el-button>
+          <el-button @click="handleRestParams">重置</el-button>
+        </div>
+      </div>
+
+      <div class="button-content">
+        <el-button
+          type="primary"
+          @click="
+            $router.push({
+              name: 'createResponsibilityAgree',
+            })
+          "
+          >添加</el-button
+        >
+      </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" />
+          <el-table-column label="分组名称" prop="userGroupName" width="150" />
+          <el-table-column label="计划结束时间" prop="planEndTime" width="150" />
+          <el-table-column fixed="right" min-width="300" label="操作">
+            <template #default="scope">
+              <el-button
+                v-if="scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 3"
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'editResponsibilityAgree',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+              >
+                编辑
+              </el-button>
+
+              <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-button
+                v-if="
+                  scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 3 || scope.row.status === 4
+                "
+                type="primary"
+                link
+                >下发
+              </el-button>
+              <el-button v-if="scope.row.status === 4" type="primary" link>作废</el-button>
+              <el-button type="primary" link>下发对象</el-button>
+
+              <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="page-content">
+        <el-pagination
+          :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 } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
+    safetyResponsibilityAdminqueryPage,
+    safetyResponsibilityAdminDelete,
+  } from '@/api/production-safety/responsibility-implementation';
+  const router = useRouter();
+  const activeTab = ref('');
+  const queryParams = reactive<any>({
+    pageNumber: 1,
+    pageSize: 10,
+    queryParam: {
+      responsibilityName: '',
+      departmentName: '',
+      status: '',
+      date: '',
+      responsibilityPersonId: '',
+    },
+  });
+
+  const tableData = reactive({
+    data: [],
+    total: 0,
+  });
+  const handleSizeChange = () => {};
+  const handleCurrentChange = () => {};
+  const handleDownloadLink = (scope) => {
+    window.location.href = scope.row.attachment;
+  };
+  const handleConfirmDeleteRow = (scope) => {
+    safetyResponsibilityAdminDelete({
+      id: scope.row.id,
+    }).then(() => {
+      ElMessage.success('删除成功!');
+    });
+  };
+  const handleSafetyResponsibilityAdminqueryPage = () => {
+    safetyResponsibilityAdminqueryPage({
+      ...queryParams,
+      queryParam: {
+        ...queryParams.queryParam,
+        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.records;
+      tableData.total = res.totalPage;
+    });
+  };
+  const handleRestParams = () => {
+    Object.assign(queryParams, {
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        responsibilityName: '',
+        departmentName: '',
+        status: '',
+        date: '',
+        responsibilityPersonId: '',
+      },
+    });
+    handleSafetyResponsibilityAdminqueryPage();
+  };
+
+  onMounted(() => {
+    handleSafetyResponsibilityAdminqueryPage();
+  });
+</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;
+  }
+  :deep(main) {
+    display: flex;
+    flex-direction: column;
+  }
+  .search-form {
+    min-width: 800px;
+    display: flex;
+    justify-content: space-between;
+    align-items: self-end;
+  }
+
+  .button-content {
+    margin-bottom: 20px;
+  }
+  .table-content {
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .page-content {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>