fix:优化代码格式

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

@@ -1,89 +1,95 @@
 <template>
-    <div class="safety-platform-container">
-        <el-alert v-if="showAlertBar" :title="formData?.rejection" type="warning" />
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
-            <div class="detail-content">
-                <span>类别名称：{{ formData?.departmentName }} </span>
-                <span>创建人：{{ formData?.createdByName }} </span>
-                <span>创建时间：{{ formData?.createdAt }} </span>
+  <div class="safety-platform-container">
+    <el-alert v-if="showAlertBar" :title="formData?.rejection" type="warning" />
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
+      <div class="detail-content">
+        <span>类别名称：{{ formData?.departmentName }} </span>
+        <span>创建人：{{ formData?.createdByName }} </span>
+        <span>创建时间：{{ formData?.createdAt }} </span>
+      </div>
+    </header>
+
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">
+        <h4>基本信息</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">责任书名称：</div>
+              <div class="value">{{ formData.responsibilityName }}</div>
             </div>
-        </header>
-
-        <main class="safety-platform-container__main">
-            <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">
-                <h4>基本信息</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">责任书名称：</div>
-                            <div class="value">{{ formData.responsibilityName }}</div>
-                        </div>
-                        <div class="col">
-                            <div class="label">状态：</div>
-                            <div class="value">{{ formData.statusName }}</div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">签署人数：</div>
-                            <div class="value">{{ formData.signedQuantity }}</div>
-                        </div>
-                        <!-- <div class="col">
+            <div class="col">
+              <div class="label">状态：</div>
+              <div class="value">{{ formData.statusName }}</div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="label">签署人数：</div>
+              <div class="value">{{ formData.signedQuantity }}</div>
+            </div>
+            <!-- <div class="col">
               <div class="label">下发对象：</div>
               <div class="value">{{ formData.userGroupName }}</div>
             </div> -->
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">计划开始日期：</div>
-                            <div class="value">{{ formData.planStartTime }}</div>
-                        </div>
-                        <div class="col">
-                            <div class="label">计划结束日期：</div>
-                            <div class="value">{{ formData.planEndTime }}</div>
-                        </div>
-                    </div>
-                </div>
-                <h4>责任书内容</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">责任书文档：</div>
-                            <div class="value value-s1">
-                                <div class="file-list">
-                                    <div class="file-item" v-for="item in formData.attachment" :key="item.fileId">
-                                        <span class="file-item--name">{{ item.fileName }}</span>
-                                        <div class="file-item--footer">
-                                            <!-- <div class="info">
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="label">计划开始日期：</div>
+              <div class="value">{{ formData.planStartTime }}</div>
+            </div>
+            <div class="col">
+              <div class="label">计划结束日期：</div>
+              <div class="value">{{ formData.planEndTime }}</div>
+            </div>
+          </div>
+        </div>
+        <h4>责任书内容</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">责任书文档：</div>
+              <div class="value value-s1">
+                <div class="file-list">
+                  <div class="file-item" v-for="item in formData.attachment" :key="item.fileId">
+                    <span class="file-item--name">{{ item.fileName }}</span>
+                    <div class="file-item--footer">
+                      <!-- <div class="info">
                         <span>{{ item.fileSize }}</span>
                       </div> -->
-                                            <el-button link type="primary"
-                                                @click="previewOnline(item.fileUrl, item.fileType)">预览</el-button>
-                                            <el-button link type="primary"
-                                                @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</el-button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                      <el-button link type="primary" @click="previewOnline(item.fileUrl, item.fileType)"
+                        >预览</el-button
+                      >
+                      <el-button link type="primary" @click.stop="downloadFile(item.fileUrl, item.fileName)"
+                        >下载</el-button
+                      >
                     </div>
+                  </div>
                 </div>
-                <template v-if="signRecords.level1.length">
-                    <h4 v-if="currentDepartmentKey === 'A'"> 副院长签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'B'"> 负责人签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'C'"> 负责人签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'D'"> 科室负责人签署 </h4>
-                    <div class="detail-ct">
-                        <div class="row" v-for="item in signRecords.level1" :key="item.id">
-                            <div class="col">
-                                <div class="label">签名：</div>
-                                <div class="value value-s1">
-                                    <el-form-item>
-                                        <UploadFiles disabled label="上传文件" :fileList="item.attachment"
-                                            @upload-success="(fileList) => handleUploadSignsUploadSuccess(item, fileList)" />
-                                    </el-form-item>
-                                    <!-- <div class="file-list">
+              </div>
+            </div>
+          </div>
+        </div>
+        <template v-if="signRecords.level1.length">
+          <h4 v-if="currentDepartmentKey === 'A'"> 副院长签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'B'"> 负责人签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'C'"> 负责人签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'D'"> 科室负责人签署 </h4>
+          <div class="detail-ct">
+            <div class="row" v-for="item in signRecords.level1" :key="item.id">
+              <div class="col">
+                <div class="label">签名：</div>
+                <div class="value value-s1">
+                  <el-form-item>
+                    <UploadFiles
+                      disabled
+                      label="上传文件"
+                      :fileList="item.attachment"
+                      @upload-success="(fileList) => handleUploadSignsUploadSuccess(item, fileList)"
+                    />
+                  </el-form-item>
+                  <!-- <div class="file-list">
                     <div class="file-item" v-for="file in item.attachment" :key="file.fileId">
                       <span class="file-item--name">{{ file.fileName }}</span>
                       <div class="file-item--footer">
@@ -96,26 +102,30 @@
                       </div>
                     </div>
                   </div> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template v-if="signRecords.level2.length">
-                    <h4 v-if="currentDepartmentKey === 'A'"> 党委书记签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'B'"> 党委书记签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'C'"> 党委书记签署</h4>
-                    <h4 v-if="currentDepartmentKey === 'D'"> 部门负责人签署 </h4>
-                    <div class="detail-ct">
-                        <div class="row" v-for="item in signRecords.level2" :key="item.id">
-                            <div class="col">
-                                <div class="label">签名：</div>
-                                <div class="value value-s1">
-                                    <el-form-item>
-                                        <UploadFiles disabled label="上传文件" :fileList="item.attachment"
-                                            @upload-success="(fileList) => handleUploadSignsUploadSuccess(item, fileList)" />
-                                    </el-form-item>
-                                    <!-- <div class="file-list">
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-if="signRecords.level2.length">
+          <h4 v-if="currentDepartmentKey === 'A'"> 党委书记签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'B'"> 党委书记签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'C'"> 党委书记签署</h4>
+          <h4 v-if="currentDepartmentKey === 'D'"> 部门负责人签署 </h4>
+          <div class="detail-ct">
+            <div class="row" v-for="item in signRecords.level2" :key="item.id">
+              <div class="col">
+                <div class="label">签名：</div>
+                <div class="value value-s1">
+                  <el-form-item>
+                    <UploadFiles
+                      disabled
+                      label="上传文件"
+                      :fileList="item.attachment"
+                      @upload-success="(fileList) => handleUploadSignsUploadSuccess(item, fileList)"
+                    />
+                  </el-form-item>
+                  <!-- <div class="file-list">
                     <div class="file-item" v-for="file in item.attachment" :key="file.fileId">
                       <span class="file-item--name">{{ file.fileName }}</span>
                       <div class="file-item--footer">
@@ -128,25 +138,29 @@
                       </div>
                     </div>
                   </div> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template v-if="signRecords.level3.length">
-                    <h4 v-if="currentDepartmentKey === 'A'"> 院长签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'B'"> 院长签署 </h4>
-                    <h4 v-if="currentDepartmentKey === 'C'"> 所长签署 </h4>
-                    <div class="detail-ct">
-                        <div class="row" v-for="item in signRecords.level3" :key="item.id">
-                            <div class="col">
-                                <div class="label">签名：</div>
-                                <div class="value value-s1">
-                                    <el-form-item>
-                                        <UploadFiles disabled label="上传文件" :fileList="item.attachment"
-                                            @upload-success="(fileList) => handleUploadSignsUploadSuccess(item, fileList)" />
-                                    </el-form-item>
-                                    <!-- <div class="file-list">
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-if="signRecords.level3.length">
+          <h4 v-if="currentDepartmentKey === 'A'"> 院长签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'B'"> 院长签署 </h4>
+          <h4 v-if="currentDepartmentKey === 'C'"> 所长签署 </h4>
+          <div class="detail-ct">
+            <div class="row" v-for="item in signRecords.level3" :key="item.id">
+              <div class="col">
+                <div class="label">签名：</div>
+                <div class="value value-s1">
+                  <el-form-item>
+                    <UploadFiles
+                      disabled
+                      label="上传文件"
+                      :fileList="item.attachment"
+                      @upload-success="(fileList) => handleUploadSignsUploadSuccess(item, fileList)"
+                    />
+                  </el-form-item>
+                  <!-- <div class="file-list">
                     <div class="file-item" v-for="file in item.attachment" :key="file.fileId">
                       <span class="file-item--name">{{ file.fileName }}</span>
                       <div class="file-item--footer">
@@ -159,75 +173,79 @@
                       </div>
                     </div>
                   </div> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <h4>材料上传</h4>
-
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">上传附件：</div>
-                            <div class="value value-s1">
-                                <el-form-item prop="feedback">
-                                    <UploadFiles label="上传附件"
-                                        disabled
-                                        @upload-success="(fileList) => handleUploadSuccess('feedback', fileList)"
-                                        :fileList="formData.feedback" />
-                                </el-form-item>
-                                <div class="file-list" v-if="formData.feedback?.length">
-                                    <div class="file-item" v-for="item in formData.feedback" :key="item.fileId">
-                                        <span class="file-item--name">{{ item.fileName }}</span>
-                                        <div class="file-item--footer">
-                                            <el-button link type="primary"
-                                                @click="previewOnline(item.fileUrl, item.fileType)">预览</el-button>
-                                            <el-button link type="primary"
-                                                @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</el-button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <h4>材料上传</h4>
+
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">上传附件：</div>
+              <div class="value value-s1">
+                <el-form-item prop="feedback">
+                  <UploadFiles
+                    label="上传附件"
+                    disabled
+                    @upload-success="(fileList) => handleUploadSuccess('feedback', fileList)"
+                    :fileList="formData.feedback"
+                  />
+                </el-form-item>
+                <div class="file-list" v-if="formData.feedback?.length">
+                  <div class="file-item" v-for="item in formData.feedback" :key="item.fileId">
+                    <span class="file-item--name">{{ item.fileName }}</span>
+                    <div class="file-item--footer">
+                      <el-button link type="primary" @click="previewOnline(item.fileUrl, item.fileType)"
+                        >预览</el-button
+                      >
+                      <el-button link type="primary" @click.stop="downloadFile(item.fileUrl, item.fileName)"
+                        >下载</el-button
+                      >
                     </div>
+                  </div>
                 </div>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button @click="$router.push({ name: 'responsibilityAgreeManage' })">返回</el-button>
-            <el-button type="primary" @click="handleReviewFailed">审核不通过</el-button>
-            <el-button type="primary" @click="handleReviewApproved" :loading="submiting">审核通过</el-button>
-        </footer>
-    </div>
-    <PreviewOnline ref="previewOnlineRef" />
-    <RefuseReason ref="reviewFeedBackRef" @submit="handleReviewFailedSubmit" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'responsibilityAgreeManage' })">返回</el-button>
+      <el-button type="primary" @click="handleReviewFailed">审核不通过</el-button>
+      <el-button type="primary" @click="handleReviewApproved" :loading="submiting">审核通过</el-button>
+    </footer>
+  </div>
+  <PreviewOnline ref="previewOnlineRef" />
+  <RefuseReason ref="reviewFeedBackRef" @submit="handleReviewFailedSubmit" />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, computed, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import '@wangeditor/editor/dist/css/style.css';
-import { useRouter, useRoute } from 'vue-router';
-import { downloadFile } from '@/views/disaster/utils';
-
-import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
-import {
+  import { onMounted, ref, computed, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import '@wangeditor/editor/dist/css/style.css';
+  import { useRouter, useRoute } from 'vue-router';
+  import { downloadFile } from '@/views/disaster/utils';
+
+  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
+  import {
     safetyResponsibilityDeptQueryDetail,
     safetyResponsibilityAdminApprove,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-import RefuseReason from './components/RefuseReason.vue';
+  import RefuseReason from './components/RefuseReason.vue';
 
-import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';
-import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
-import { s } from 'vite/dist/node/types.d-jgA8ss1A';
+  import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  import { s } from 'vite/dist/node/types.d-jgA8ss1A';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
-const reviewFeedBackRef = ref<any>();
-const formData = reactive<any>({
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
+  const reviewFeedBackRef = ref<any>();
+  const formData = reactive<any>({
     departmentName: '',
     createdByName: '',
     createdAt: '',
@@ -243,147 +261,147 @@ const formData = reactive<any>({
     rejection: '',
     signRecords: [],
     status: null,
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     signsUpload: [
-        {
-            required: true,
-            message: '请上传签署材料',
-        },
+      {
+        required: true,
+        message: '请上传签署材料',
+      },
     ],
-});
+  });
 
-const signRecords = computed(() => {
+  const signRecords = computed(() => {
     return {
-        level1: formData.signRecords.filter((item) => item.signLevel === 1),
-        level2: formData.signRecords.filter((item) => item.signLevel === 2),
-        level3: formData.signRecords.filter((item) => item.signLevel === 3),
+      level1: formData.signRecords.filter((item) => item.signLevel === 1),
+      level2: formData.signRecords.filter((item) => item.signLevel === 2),
+      level3: formData.signRecords.filter((item) => item.signLevel === 3),
     };
-});
+  });
 
-const currentDepartmentKey = computed(() => {
+  const currentDepartmentKey = computed(() => {
     switch (formData.departmentName.trim()) {
-        case '院领导':
-            return 'A';
-        case '所/中心/职能部门/直属研究部/分公司':
-            return 'B';
-        case '所/中心级部门':
-            return 'C';
-        case '科室':
-            return 'D';
-        case '员工':
-        case '常驻供应商':
-            return 'E';
-        default:
-            return '';
+      case '院领导':
+        return 'A';
+      case '所/中心/职能部门/直属研究部/分公司':
+        return 'B';
+      case '所/中心级部门':
+        return 'C';
+      case '科室':
+        return 'D';
+      case '员工':
+      case '常驻供应商':
+        return 'E';
+      default:
+        return '';
     }
-});
+  });
 
-const showAlertBar = computed(() => {
+  const showAlertBar = computed(() => {
     if (!formData.rejection) {
-        return false;
+      return false;
     }
     return formData.status === 2 && formData.rejection !== null;
-});
-const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
-const previewOnline = (url: string | undefined, type) => {
+  });
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const previewOnline = (url: string | undefined, type) => {
     if (url) {
-        previewOnlineRef.value?.open(url, type);
+      previewOnlineRef.value?.open(url, type);
     }
-};
-const handleUploadSignsUploadSuccess = (item, fileList) => {
+  };
+  const handleUploadSignsUploadSuccess = (item, fileList) => {
     item.attachment = fileList;
     formData.signRecords = [...signRecords.value.level1, ...signRecords.value.level2, ...signRecords.value.level3];
-};
+  };
 
-const handleUploadSuccess = (prop: string, fileList: any[]) => {
+  const handleUploadSuccess = (prop: string, fileList: any[]) => {
     formData[prop] = fileList;
     formRef.value.validateField(prop);
-};
-const handleReviewApproved = () => {
+  };
+  const handleReviewApproved = () => {
     submiting.value = true;
     safetyResponsibilityAdminApprove({
-        approveType: 1,
-        refuseReason: null,
-        id: route.query.id,
+      approveType: 1,
+      refuseReason: null,
+      id: route.query.id,
     })
-        .then(() => {
-            ElMessage.success('审核成功');
-            router.push({
-                name: 'responsibilityAgreeManage',
-            });
-        })
-        .finally(() => {
-            submiting.value = false;
+      .then(() => {
+        ElMessage.success('审核成功');
+        router.push({
+          name: 'responsibilityAgreeManage',
         });
-};
-const handleQueryDetail = () => {
+      })
+      .finally(() => {
+        submiting.value = false;
+      });
+  };
+  const handleQueryDetail = () => {
     safetyResponsibilityDeptQueryDetail({
-        id: route.query.id,
+      id: route.query.id,
     }).then((res) => {
-        Object.keys(formData).forEach((name) => {
-            if (name in res) {
-                Object.assign(formData, {
-                    [name]: res[name],
-                    status: res.status,
-                    attachment: unformatAttachment(res.attachment),
-                    signsUpload: unformatAttachment(res.signsUpload),
-                    feedback: unformatAttachment(res.feedback),
-                    signRecords: res.signRecords?.map((item) => ({
-                        ...item,
-                        attachment: unformatAttachment(item.attachment),
-                    })),
-                });
-            }
-        });
+      Object.keys(formData).forEach((name) => {
+        if (name in res) {
+          Object.assign(formData, {
+            [name]: res[name],
+            status: res.status,
+            attachment: unformatAttachment(res.attachment),
+            signsUpload: unformatAttachment(res.signsUpload),
+            feedback: unformatAttachment(res.feedback),
+            signRecords: res.signRecords?.map((item) => ({
+              ...item,
+              attachment: unformatAttachment(item.attachment),
+            })),
+          });
+        }
+      });
     });
-};
-const handleReviewFailed = () => {
+  };
+  const handleReviewFailed = () => {
     reviewFeedBackRef.value.dialogShow();
-};
+  };
 
-const handleReviewFailedSubmit = (formData) => {
+  const handleReviewFailedSubmit = (formData) => {
     reviewFeedBackRef.value.submitLoading = true;
     safetyResponsibilityAdminApprove({
-        approveType: 0,
-        refuseReason: formData.refuseReason,
-        id: route.query.id,
+      approveType: 0,
+      refuseReason: formData.refuseReason,
+      id: route.query.id,
     })
-        .then(() => {
-            reviewFeedBackRef.value.dialogHide();
-            ElMessage.success('提交成功');
-            router.push({
-                name: 'responsibilityAgreeManage',
-            });
-        })
-        .finally(() => {
-            reviewFeedBackRef.value.submitLoading = false;
+      .then(() => {
+        reviewFeedBackRef.value.dialogHide();
+        ElMessage.success('提交成功');
+        router.push({
+          name: 'responsibilityAgreeManage',
         });
-};
+      })
+      .finally(() => {
+        reviewFeedBackRef.value.submitLoading = false;
+      });
+  };
 
-onMounted(() => {
+  onMounted(() => {
     handleQueryDetail();
-});
+  });
 </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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-h4 {
+  h4 {
     margin-bottom: 10px;
-}
+  }
 
-.detail-content {
+  .detail-content {
     display: flex;
     gap: 30px;
     margin: 10px 0;
     font-size: 14px;
-}
+  }
 
-.detail-ct {
+  .detail-ct {
     display: flex;
     flex-direction: column;
     border: 1px solid rgb(220, 223, 230);
@@ -391,126 +409,126 @@ h4 {
     margin-bottom: 25px;
 
     .row {
-        display: flex;
+      display: flex;
 
-        border-bottom: 1px solid rgb(220, 223, 230);
+      border-bottom: 1px solid rgb(220, 223, 230);
     }
 
     .row:last-child {
-        border-bottom: none;
+      border-bottom: none;
     }
 
     .col {
+      display: flex;
+      flex: 1;
+      min-height: 40px;
+      align-items: stretch;
+
+      .label {
         display: flex;
-        flex: 1;
-        min-height: 40px;
-        align-items: stretch;
-
-        .label {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            width: 160px;
-            background-color: rgb(245, 247, 250);
-            border-right: 1px solid rgb(220, 223, 230);
-        }
+        align-items: center;
+        justify-content: flex-end;
+        width: 160px;
+        background-color: rgb(245, 247, 250);
+        border-right: 1px solid rgb(220, 223, 230);
+      }
 
-        .value {
-            display: flex;
-            justify-content: space-between;
-            flex: 1;
-            padding: 10px 20px;
-            align-items: center;
-            border-right: 1px solid rgb(220, 223, 230);
-        }
+      .value {
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        padding: 10px 20px;
+        align-items: center;
+        border-right: 1px solid rgb(220, 223, 230);
+      }
 
-        .value-s1 {
-            min-height: 60px;
-        }
+      .value-s1 {
+        min-height: 60px;
+      }
 
-        .value:nth-child(2) {
-            border-right: 0;
-        }
+      .value:nth-child(2) {
+        border-right: 0;
+      }
     }
 
     .col:nth-child(2) .label {
-        border-left: 1px solid rgb(220, 223, 230);
+      border-left: 1px solid rgb(220, 223, 230);
     }
-}
+  }
 
-.table {
+  .table {
     display: flex;
     align-items: stretch;
     border: 1px solid rgb(220, 223, 230);
     border-width: 1px 1px 0 1px;
-}
+  }
 
-.table .value {
+  .table .value {
     display: flex;
     align-items: center;
     // (:deep).el-form-item {
     //   margin-bottom: 0;
     // }
-}
+  }
 
-.table .label {
+  .table .label {
     display: flex;
     align-items: center;
     border-right: 1px solid rgb(220, 223, 230);
     background-color: rgb(245, 247, 250);
-}
-.file-list {
+  }
+  .file-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
 
     .file-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px;
+      // border: 1px solid rgb(220, 223, 230);
+
+      .file-item--name {
+        font-size: 14px;
+        color: #606266;
+      }
+
+      .file-item--footer {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        padding: 10px;
-        // border: 1px solid rgb(220, 223, 230);
-
-        .file-item--name {
-            font-size: 14px;
-            color: #606266;
-        }
-
-        .file-item--footer {
-            display: flex;
-            align-items: center;
-            gap: 10px;
+        gap: 10px;
 
-            .info {
-                font-size: 12px;
-                color: #9099a4;
-            }
+        .info {
+          font-size: 12px;
+          color: #9099a4;
         }
+      }
     }
-}
-// :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;
-// // }
+  }
+  // :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-notice-manage-admin/components/NotifySend.vue

@@ -1,88 +1,102 @@
 <template>
-    <el-dialog :model-value="props.modelValue" @update:model-value="$emit('update:modelValue', $event)" title="安全责任通知发送"
-        width="800" @close="clearData">
-        <el-tabs v-model="activeTab">
-            <el-tab-pane :disabled="activeTab !== 1" label="公共区域" :name="1" />
-            <el-tab-pane :disabled="activeTab !== 2" label="非公共区域" :name="2" />
-        </el-tabs>
-        <div class="main">
-            <el-form ref="formRef" :rules="rules" :model="formValue">
-                <el-form-item label="计划开始日期" prop="planStartTime">
-                    <el-date-picker v-model="formValue.planStartTime" placeholder="请选择日期" style="width: 200px" />
-                </el-form-item>
-
-                <el-form-item label="计划结束日期" prop="planEndTime">
-                    <el-date-picker v-model="formValue.planEndTime" placeholder="请选择日期" style="width: 200px" />
-                </el-form-item>
-                <el-form-item label="通知区域" prop="safetyAreaData">
-                    <el-button @click="handleAddArea" type="primary">添加</el-button>
-                </el-form-item>
-                <el-table :data="currentTableData" v-if="formValue.safetyAreaData.length"
-                    style="width: 100%; margin: 20px 0 0">
-                    <!-- <el-table-column type="index" label="序号" width="80" /> -->
-                    <el-table-column label="楼宇/区域" v-if="formValue.type === 1" prop="buildingArea" width="180" />
-                    <el-table-column label="楼层/房号" v-if="formValue.type === 1" prop="floorRoomNo" width="180" />
-                    <el-table-column label="名称/功能" v-if="formValue.type === 1" prop="nameFunction" width="120" />
-
-                    <el-table-column v-if="formValue.type === 2" label="楼号" prop="buildingNo" width="100" />
-                    <el-table-column v-if="formValue.type === 2" label="楼层" prop="buildingArea" width="100" />
-                    <el-table-column v-if="formValue.type === 2" label="房间/区域" prop="floorRoomNo" width="180" />
-                    <el-table-column v-if="formValue.type === 2" label="功能名称" prop="nameFunction" width="120" />
-
-                    <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
-                    <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
-                    <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
-                    <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
-                    <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
-                    <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                    <el-table-column label="操作" width="100" fixed="right">
-                        <template #default="scope">
-                            <el-button type="text" size="small" @click="handleDeleteArea(scope)">删除</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <div class="pagination-container" v-if="formValue.safetyAreaData.length">
-                    <el-pagination background :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize"
-                        :total="formValue.safetyAreaData.length" @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange" />
-                </div>
-            </el-form>
+  <el-dialog
+    :model-value="props.modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    title="安全责任通知发送"
+    width="800"
+    @close="clearData"
+  >
+    <el-tabs v-model="activeTab">
+      <el-tab-pane :disabled="activeTab !== 1" label="公共区域" :name="1" />
+      <el-tab-pane :disabled="activeTab !== 2" label="非公共区域" :name="2" />
+    </el-tabs>
+    <div class="main">
+      <el-form ref="formRef" :rules="rules" :model="formValue">
+        <el-form-item label="计划开始日期" prop="planStartTime">
+          <el-date-picker v-model="formValue.planStartTime" placeholder="请选择日期" style="width: 200px" />
+        </el-form-item>
+
+        <el-form-item label="计划结束日期" prop="planEndTime">
+          <el-date-picker v-model="formValue.planEndTime" placeholder="请选择日期" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="通知区域" prop="safetyAreaData">
+          <el-button @click="handleAddArea" type="primary">添加</el-button>
+        </el-form-item>
+        <el-table :data="currentTableData" v-if="formValue.safetyAreaData.length" style="width: 100%; margin: 20px 0 0">
+          <!-- <el-table-column type="index" label="序号" width="80" /> -->
+          <el-table-column label="楼宇/区域" v-if="formValue.type === 1" prop="buildingArea" width="180" />
+          <el-table-column label="楼层/房号" v-if="formValue.type === 1" prop="floorRoomNo" width="180" />
+          <el-table-column label="名称/功能" v-if="formValue.type === 1" prop="nameFunction" width="120" />
+
+          <el-table-column v-if="formValue.type === 2" label="楼号" prop="buildingNo" width="100" />
+          <el-table-column v-if="formValue.type === 2" label="楼层" prop="buildingArea" width="100" />
+          <el-table-column v-if="formValue.type === 2" label="房间/区域" prop="floorRoomNo" width="180" />
+          <el-table-column v-if="formValue.type === 2" label="功能名称" prop="nameFunction" width="120" />
+
+          <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
+          <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
+          <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
+          <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
+          <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
+          <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <el-table-column label="操作" width="100" fixed="right">
+            <template #default="scope">
+              <el-button type="text" size="small" @click="handleDeleteArea(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-container" v-if="formValue.safetyAreaData.length">
+          <el-pagination
+            background
+            :current-page="queryParams.pageNumber"
+            :page-size="queryParams.pageSize"
+            :total="formValue.safetyAreaData.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
         </div>
-        <SelectNotifyArea v-if="selectNotifyAreaOpen" v-model.visible="selectNotifyAreaOpen" :type="activeTab"
-            :append-to-body="true" @submit="handleSelectionTableData" />
-
-        <template #footer>
-            <div>
-                <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
-                <el-button @click="handleCancel">取消</el-button>
-            </div>
-        </template>
-    </el-dialog>
+      </el-form>
+    </div>
+    <SelectNotifyArea
+      v-if="selectNotifyAreaOpen"
+      v-model.visible="selectNotifyAreaOpen"
+      :type="activeTab"
+      :append-to-body="true"
+      @submit="handleSelectionTableData"
+    />
+
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue';
-import { ElButton } from 'element-plus';
-import SelectNotifyArea from './SelectNotifyArea.vue';
-import { uniqBy, omit } from 'lodash-es';
-import dayjs from 'dayjs';
-import { safetyNoticeAdminIssuedNotice } from '@/api/production-safety/responsibility-implementation';
-
-const props = defineProps<{
+  import { ref, reactive, onMounted, watch } from 'vue';
+  import { ElButton } from 'element-plus';
+  import SelectNotifyArea from './SelectNotifyArea.vue';
+  import { uniqBy, omit } from 'lodash-es';
+  import dayjs from 'dayjs';
+  import { safetyNoticeAdminIssuedNotice } from '@/api/production-safety/responsibility-implementation';
+
+  const props = defineProps<{
     type: number;
     modelValue: boolean;
-}>();
+  }>();
 
-const formRef = ref<any>(null);
-const emit = defineEmits(['close', 'submit', 'update:modelValue']);
-const submitLoading = ref(false);
-const activeTab = ref(props.type);
-const selectionList = ref([]);
-const selectNotifyAreaOpen = ref(false);
-const currentTableData = ref([]);
+  const formRef = ref<any>(null);
+  const emit = defineEmits(['close', 'submit', 'update:modelValue']);
+  const submitLoading = ref(false);
+  const activeTab = ref(props.type);
+  const selectionList = ref([]);
+  const selectNotifyAreaOpen = ref(false);
+  const currentTableData = ref([]);
 
-const queryParams = reactive<any>({
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 3,
     // queryParam: {
@@ -90,165 +104,165 @@ const queryParams = reactive<any>({
     //   planStartTime: null,
     //   planEndTime: null,
     // },
-});
-const formValue = reactive({
+  });
+  const formValue = reactive({
     type: props.type,
     safetyAreaData: [], // 区域分组,多个用，分隔
     planStartTime: null, // 计划开始日期
     planEndTime: null, // 计划结束日期
-});
+  });
 
-const tableData = reactive<any>({
+  const tableData = reactive<any>({
     data: [],
     total: 0,
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     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();
-            },
+      {
+        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();
-            },
+      {
+        required: true,
+        message: '请选择计划结束时间',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value && formValue.planStartTime) {
+            if (dayjs(value).isBefore(formValue.planStartTime)) {
+              callback(new Error('结束日期不能小于开始日期'));
+              return;
+            }
+          }
+          callback();
         },
+      },
     ],
     safetyAreaData: [
-        {
-            required: true,
-            message: '请选择区域',
-            trigger: 'change',
-        },
-        {
-            validator: (rule, value, callback) => {
-                if (value.length === 0) {
-                    callback(new Error('区域不能为空'));
-                }
-                callback();
-            },
+      {
+        required: true,
+        message: '请选择区域',
+        trigger: 'change',
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value.length === 0) {
+            callback(new Error('区域不能为空'));
+          }
+          callback();
         },
+      },
     ],
-});
+  });
 
-function dialogShow() { }
-function dialogHide() {
+  function dialogShow() {}
+  function dialogHide() {
     emit('close');
-}
-function clearData() { }
+  }
+  function clearData() {}
 
-function submitForm() {
+  function submitForm() {
     formRef.value.validate((valid) => {
-        if (!valid) {
-            return;
-        }
-        emit('submit', formValue, submitLoading);
-        // emit('update:modelValue', false);
+      if (!valid) {
+        return;
+      }
+      emit('submit', formValue, submitLoading);
+      // emit('update:modelValue', false);
     });
-}
+  }
 
-const handleDeleteArea = (scope) => {
+  const handleDeleteArea = (scope) => {
     formValue.safetyAreaData = formValue.safetyAreaData.filter((item: any) => item.id !== scope.row.id);
     const totalPages = Math.ceil(formValue.safetyAreaData.length / queryParams.pageSize);
     if (queryParams.pageNumber > totalPages) {
-        queryParams.pageNumber = totalPages || 1;
+      queryParams.pageNumber = totalPages || 1;
     }
     displayData(queryParams.pageNumber);
-};
-const displayData = (page = 1) => {
+  };
+  const displayData = (page = 1) => {
     const start = (page - 1) * queryParams.pageSize;
     const end = start + queryParams.pageSize;
     currentTableData.value = formValue.safetyAreaData.slice(start, end);
-};
-const handleCurrentChange = (page: number) => {
+  };
+  const handleCurrentChange = (page: number) => {
     queryParams.pageNumber = page;
     displayData(page);
-};
+  };
 
-const handleSizeChange = (size: number) => {
+  const handleSizeChange = (size: number) => {
     queryParams.pageSize = size;
-};
+  };
 
-const handleSelectionTableData = (data) => {
+  const handleSelectionTableData = (data) => {
     tableData.total = data.length;
     tableData.data = [...tableData.data, ...data];
     Object.assign(formValue, {
-        safetyAreaData: uniqBy(tableData.data, 'id'),
+      safetyAreaData: uniqBy(tableData.data, 'id'),
     });
     formRef.value?.validateField('safetyAreaData');
     displayData();
-};
-const handleAddArea = () => {
+  };
+  const handleAddArea = () => {
     selectNotifyAreaOpen.value = true;
-};
+  };
 
-const handleCloseAreaDialog = () => {
+  const handleCloseAreaDialog = () => {
     selectNotifyAreaOpen.value = false;
-};
+  };
 
-const handleCancel = () => {
+  const handleCancel = () => {
     selectionList.value = [];
     emit('update:modelValue', false);
-};
+  };
 
-watch(
+  watch(
     () => props.type,
     (a, b) => {
-        activeTab.value = a;
+      activeTab.value = a;
     },
-);
+  );
 
-defineExpose({
+  defineExpose({
     submitLoading,
     dialogShow,
     dialogHide,
-});
+  });
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/page-details-layout.scss' as *;
-@use '@/styles/page-main-layout.scss' as *;
-@use '@/styles/basic-table-action.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-.main {
+  .main {
     display: flex;
     flex-direction: column;
     max-height: 400px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/components/SelectNotifyArea.vue

@@ -1,16 +1,22 @@
 <template>
-    <el-dialog :model-value="props.modelValue" :append-to-body="appendToBody"
-        @update:model-value="$emit('update:modelValue', $event)" title="安全责任通知区域选择" width="800" @close="clearData">
-        <el-tabs v-model="activeTab">
-            <el-tab-pane :disabled="activeTab !== 1" label="公共区域" :name="1" />
-            <el-tab-pane :disabled="activeTab !== 2" label="非公共区域" :name="2" />
-        </el-tabs>
-        <div class="main">
-            <el-form :inline="true">
-                <el-form-item>
-                    <el-input v-model="queryParams.queryParam.nameFunction" placeholder="搜索功能名称" />
-                </el-form-item>
-                <!-- <el-form-item>
+  <el-dialog
+    :model-value="props.modelValue"
+    :append-to-body="appendToBody"
+    @update:model-value="$emit('update:modelValue', $event)"
+    title="安全责任通知区域选择"
+    width="800"
+    @close="clearData"
+  >
+    <el-tabs v-model="activeTab">
+      <el-tab-pane :disabled="activeTab !== 1" label="公共区域" :name="1" />
+      <el-tab-pane :disabled="activeTab !== 2" label="非公共区域" :name="2" />
+    </el-tabs>
+    <div class="main">
+      <el-form :inline="true">
+        <el-form-item>
+          <el-input v-model="queryParams.queryParam.nameFunction" placeholder="搜索功能名称" />
+        </el-form-item>
+        <!-- <el-form-item>
           <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
             <el-option :value="1" label="未下发" />
             <el-option :value="2" label="待反馈" />
@@ -19,169 +25,183 @@
             <el-option :value="5" label="已作废" />
           </el-select>
         </el-form-item> -->
-                <el-form-item>
-                    <el-button @click="queryTableList" type="primary">查询</el-button>
-                </el-form-item>
-            </el-form>
-            <div class="table-content">
-                <el-table row-key="id" :data="tableData.data" @selection-change="handleSelectionChange"
-                    v-if="queryParams.queryParam.type === 1">
-                    <el-table-column type="selection" :reserve-selection="true" width="55" />
+        <el-form-item>
+          <el-button @click="queryTableList" type="primary">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="table-content">
+        <el-table
+          row-key="id"
+          :data="tableData.data"
+          @selection-change="handleSelectionChange"
+          v-if="queryParams.queryParam.type === 1"
+        >
+          <el-table-column type="selection" :reserve-selection="true" width="55" />
 
-                    <el-table-column type="index" label="序号" width="80" />
-                    <el-table-column label="楼宇/区域" prop="buildingArea" width="180" />
-                    <el-table-column label="楼层/房号" prop="floorRoomNo" width="180" />
-                    <el-table-column label="名称/功能" prop="nameFunction" width="120" />
-                    <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
-                    <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
-                    <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
-                    <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
-                    <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
-                    <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                </el-table>
-                <el-table row-key="id" :data="tableData.data" @selection-change="handleSelectionChange"
-                    v-if="queryParams.queryParam.type === 2">
-                    <el-table-column type="selection" :reserve-selection="true" width="55" />
-                    <el-table-column type="index" label="序号" width="80" />
-                    <el-table-column label="楼号" prop="buildingNo" width="180" />
-                    <el-table-column label="楼层" prop="buildingArea" width="100" />
-                    <el-table-column label="房间/区域" prop="floorRoomNo" width="180" />
-                    <el-table-column label="功能名称" prop="nameFunction" width="120" />
-                    <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
-                    <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
-                    <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
-                    <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
-                    <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
-                    <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
-                    <el-table-column label="变更原因" prop="changeReason" width="170" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                </el-table>
-            </div>
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="楼宇/区域" prop="buildingArea" width="180" />
+          <el-table-column label="楼层/房号" prop="floorRoomNo" width="180" />
+          <el-table-column label="名称/功能" prop="nameFunction" width="120" />
+          <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
+          <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
+          <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
+          <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
+          <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
+          <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+        </el-table>
+        <el-table
+          row-key="id"
+          :data="tableData.data"
+          @selection-change="handleSelectionChange"
+          v-if="queryParams.queryParam.type === 2"
+        >
+          <el-table-column type="selection" :reserve-selection="true" width="55" />
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="楼号" prop="buildingNo" width="180" />
+          <el-table-column label="楼层" prop="buildingArea" width="100" />
+          <el-table-column label="房间/区域" prop="floorRoomNo" width="180" />
+          <el-table-column label="功能名称" prop="nameFunction" width="120" />
+          <el-table-column label="安全责任所/中心" prop="safetyResponsibleCenter" width="200" />
+          <el-table-column label="安全责任所/中心负责人" prop="safetyCenterManagerName" width="200" />
+          <el-table-column label="安全责任部门" prop="safetyResponsibleDepartment" width="180" />
+          <el-table-column label="安全责任部门负责人" prop="safetyDepartmentManagerName" width="180" />
+          <el-table-column label="安全具体责任人" prop="safetySpecificPersonName" width="180" />
+          <el-table-column label="安全具体责任人联系方式" prop="safetyPersonContact" width="230" />
+          <el-table-column label="变更原因" prop="changeReason" width="170" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+        </el-table>
+      </div>
 
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize"
-                    :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-            </div>
-        </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
 
-        <template #footer>
-            <div>
-                <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
-                <el-button @click="handleCancel">取消</el-button>
-            </div>
-        </template>
-    </el-dialog>
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading"> 确定 </el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from 'vue';
-import { areaCheckListQueryPage } from '@/api/production-safety/responsibility-implementation';
+  import { ref, reactive, onMounted, watch } from 'vue';
+  import { areaCheckListQueryPage } from '@/api/production-safety/responsibility-implementation';
 
-const props = defineProps<{
+  const props = defineProps<{
     type: number;
     modelValue: boolean;
     appendToBody?: boolean;
-}>();
-const emit = defineEmits(['close', 'submit', 'update:modelValue']);
-const submitLoading = ref(false);
-const activeTab = ref(props.type);
-const selectionList = ref([]);
-const queryParams = reactive<any>({
+  }>();
+  const emit = defineEmits(['close', 'submit', 'update:modelValue']);
+  const submitLoading = ref(false);
+  const activeTab = ref(props.type);
+  const selectionList = ref([]);
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        type: activeTab.value,
-        nameFunction: '',
-        status: 1,
-        responsibilityPersonId: '',
+      type: activeTab.value,
+      nameFunction: '',
+      status: 1,
+      responsibilityPersonId: '',
     },
-});
-const tableData = reactive({
+  });
+  const tableData = reactive({
     data: [],
     total: 0,
-});
+  });
 
-function dialogShow() { }
-function dialogHide() {
+  function dialogShow() {}
+  function dialogHide() {
     emit('close');
-}
-function clearData() { }
+  }
+  function clearData() {}
 
-function submitForm() {
+  function submitForm() {
     emit('submit', selectionList.value);
     emit('update:modelValue', false);
-}
-const handleSelectionChange = (val: []) => {
+  }
+  const handleSelectionChange = (val: []) => {
     selectionList.value = val;
     console.log(selectionList.value);
-};
+  };
 
-const queryTableList = () => {
+  const queryTableList = () => {
     console.log(queryParams.queryParam.type);
     areaCheckListQueryPage(queryParams).then((res) => {
-        tableData.data = res.records;
-        tableData.total = res.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
+  };
 
-const handleCancel = () => {
+  const handleCancel = () => {
     selectionList.value = [];
     emit('update:modelValue', false);
-};
-const handleSizeChange = (value) => { };
-const handleCurrentChange = (value) => {
+  };
+  const handleSizeChange = (value) => {};
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
-watch(
+  };
+  watch(
     () => props.type,
     (a, b) => {
-        activeTab.value = a;
+      activeTab.value = a;
     },
-);
-watch(
+  );
+  watch(
     () => activeTab.value,
     (a, b) => {
-        Object.assign(queryParams, {
-            queryParam: {
-                ...queryParams.queryParam,
-                type: a,
-            },
-        });
-        queryTableList();
+      Object.assign(queryParams, {
+        queryParam: {
+          ...queryParams.queryParam,
+          type: a,
+        },
+      });
+      queryTableList();
     },
-);
+  );
 
-onMounted(() => {
+  onMounted(() => {
     queryTableList();
-});
+  });
 
-defineExpose({
+  defineExpose({
     submitLoading,
     dialogShow,
     dialogHide,
-});
+  });
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/page-details-layout.scss' as *;
-@use '@/styles/page-main-layout.scss' as *;
-@use '@/styles/basic-table-action.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-.main {
+  .main {
     display: flex;
     flex-direction: column;
     max-height: 400px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/list.vue

@@ -1,380 +1,432 @@
 <template>
-    <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="1" />
-                <el-tab-pane label="非公共区域" :name="2" />
-            </el-tabs>
-        </header>
-        <main class="safety-platform-container__main">
-            <div style="margin-bottom: 20px"><el-button type="primary" @click="
-                $router.push({
-                    name: 'responsibilityNoticeAdd:admin',
-                    query: {
-                        areaType: activeTab,
-                    },
-                })
-                ">添加
-                </el-button></div>
-            <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-select>
-                    </el-form-item>
-                    <el-form-item label="区域类型" v-if="activeTab === ''">
-                        <el-select v-model="queryParams.queryParam.type" clearable placeholder="选择区域类型"
-                            style="width: 170px">
-                            <el-option :value="1" label="公共区域" />
-                            <el-option :value="2" label="非公共区域" />
-                        </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="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="safetyAreaName" 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="attachment" width="250">
-                        <template #default="scope">
-                            <!-- <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-tab-pane label="公共区域" :name="1" />
+        <el-tab-pane label="非公共区域" :name="2" />
+      </el-tabs>
+    </header>
+    <main class="safety-platform-container__main">
+      <div style="margin-bottom: 20px"
+        ><el-button
+          type="primary"
+          @click="
+            $router.push({
+              name: 'responsibilityNoticeAdd:admin',
+              query: {
+                areaType: activeTab,
+              },
+            })
+          "
+          >添加
+        </el-button></div
+      >
+      <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-select>
+          </el-form-item>
+          <el-form-item label="区域类型" v-if="activeTab === ''">
+            <el-select v-model="queryParams.queryParam.type" clearable placeholder="选择区域类型" style="width: 170px">
+              <el-option :value="1" label="公共区域" />
+              <el-option :value="2" label="非公共区域" />
+            </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="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="safetyAreaName" 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="attachment" width="250">
+            <template #default="scope">
+              <!-- <div
                 class="file-container--div"
                 v-for="item in unformatAttachment(scope.row.attachment)"
                 :key="item.fileId"
               >
                 <span class="file-container--div__name">{{ item.fileName }}</span>
               </div> -->
-                            <div class="file-container--div" v-for="item in unformatAttachment(scope.row.attachment)"
-                                :key="item.fileId">
-                                <img class="file-container--div__icon"
-                                    @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
-                                    :src="FILE_TYPE_ICON[item.fileType]" style="width:28px" />
-                                <span class="file-container--div__name"
-                                    @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)">{{
-                                        item.fileName }}</span>
-                                <img class="file-container--div__download" :src="DownloadIcon"
-                                    @click="downloadFile(item.fileUrl, item.fileName)" />
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="计划完成时间" prop="planEndTime" width="150" />
-                    <el-table-column fixed="right" min-width="240" label="操作">
-                        <template #default="scope">
-                            <el-button link type="primary" @click="
-                                $router.push({
-                                    name: 'responsibilityNoticeEdit:admin',
-                                    query: {
-                                        areaType: activeTab,
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">编辑</el-button>
-                            <el-button link type="primary" v-if="scope.row.status !== 1" @click="
-                                $router.push({
-                                    name: 'responsibilityNoticeView:admin',
-                                    query: {
-                                        areaType: activeTab,
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">通知对象</el-button>
-                            <el-button v-if="scope.row.status === 1" link type="primary"
-                                @click="handleSend(scope)">发送</el-button>
-                            <el-button type="primary" link v-if="scope.row.status === 3" @click="
-                                $router.push({
-                                    name: 'responsibilityNoticeView:admin',
-                                    query: { id: scope.row.id, status: scope.row.status },
-                                })
-                                ">审核</el-button>
-
-                            <el-popconfirm title="确定要删除吗?" v-if="scope.row.status === 1"
-                                @confirm="handleConfirmDeleteRow(scope)">
-                                <template #reference>
-                                    <el-button type="primary" link>删除</el-button>
-                                </template>
-                            </el-popconfirm>
-                            <!-- <el-button type="primary" link @click="handleScrap(scope)">作废</el-button> -->
-                            <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
-    <NotifySend v-if="notifySendOpen" :type="currentRow.type" v-model.visible="notifySendOpen"
-        @submit="handleNotifySend" />
-    <PreviewOnline ref="previewOnlineRef" />
+              <div
+                class="file-container--div"
+                v-for="item in unformatAttachment(scope.row.attachment)"
+                :key="item.fileId"
+              >
+                <img
+                  class="file-container--div__icon"
+                  @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
+                  :src="FILE_TYPE_ICON[item.fileType]"
+                  style="width: 28px"
+                />
+                <span
+                  class="file-container--div__name"
+                  @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
+                  >{{ item.fileName }}</span
+                >
+                <img
+                  class="file-container--div__download"
+                  :src="DownloadIcon"
+                  @click="downloadFile(item.fileUrl, item.fileName)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="计划完成时间" prop="planEndTime" width="150" />
+          <el-table-column fixed="right" min-width="240" label="操作">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="
+                  $router.push({
+                    name: 'responsibilityNoticeEdit:admin',
+                    query: {
+                      areaType: activeTab,
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >编辑</el-button
+              >
+              <el-button
+                link
+                type="primary"
+                v-if="scope.row.status !== 1"
+                @click="
+                  $router.push({
+                    name: 'responsibilityNoticeView:admin',
+                    query: {
+                      areaType: activeTab,
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >通知对象</el-button
+              >
+              <el-button v-if="scope.row.status === 1" link type="primary" @click="handleSend(scope)">发送</el-button>
+              <el-button
+                type="primary"
+                link
+                v-if="scope.row.status === 3"
+                @click="
+                  $router.push({
+                    name: 'responsibilityNoticeView:admin',
+                    query: { id: scope.row.id, status: scope.row.status },
+                  })
+                "
+                >审核</el-button
+              >
+
+              <el-popconfirm
+                title="确定要删除吗?"
+                v-if="scope.row.status === 1"
+                @confirm="handleConfirmDeleteRow(scope)"
+              >
+                <template #reference>
+                  <el-button type="primary" link>删除</el-button>
+                </template>
+              </el-popconfirm>
+              <!-- <el-button type="primary" link @click="handleScrap(scope)">作废</el-button> -->
+              <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
+  <NotifySend
+    v-if="notifySendOpen"
+    :type="currentRow.type"
+    v-model.visible="notifySendOpen"
+    @submit="handleNotifySend"
+  />
+  <PreviewOnline ref="previewOnlineRef" />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, reactive, watch } from 'vue';
-import dayjs from 'dayjs';
-import { ElMessage } from 'element-plus';
-import { useRouter } from 'vue-router';
-import {
+  import { onMounted, ref, reactive, watch } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import {
     safetyNoticeAdminQueryPage,
     safetyNoticeAdminDelete,
     safetyNoticeAdminIssuedNotice,
-} from '@/api/production-safety/responsibility-implementation';
-import { omit } from 'lodash-es';
-import { queryUserGroupPage } from '@/api/system/person-group';
-
-import { unformatAttachment } from '@/components/UploadFiles/utils';
-import { downloadFile } from '@/views/disaster/utils';
-import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
-import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
-import DownloadIcon from '@/views/disaster/disaster-control/src/svg/download.svg';
-
-import NotifySend from './components/NotifySend.vue';
-
-const router = useRouter();
-const activeTab = ref<any>('');
-const groupList = ref<any[]>([]);
-const currentRow = ref<any>(null);
-const queryParams = reactive<any>({
+  } from '@/api/production-safety/responsibility-implementation';
+  import { omit } from 'lodash-es';
+  import { queryUserGroupPage } from '@/api/system/person-group';
+
+  import { unformatAttachment } from '@/components/UploadFiles/utils';
+  import { downloadFile } from '@/views/disaster/utils';
+  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  import DownloadIcon from '@/views/disaster/disaster-control/src/svg/download.svg';
+
+  import NotifySend from './components/NotifySend.vue';
+
+  const router = useRouter();
+  const activeTab = ref<any>('');
+  const groupList = ref<any[]>([]);
+  const currentRow = ref<any>(null);
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        responsibilityName: '',
-        status: '',
-        date: '',
-        type: '',
+      responsibilityName: '',
+      status: '',
+      date: '',
+      type: '',
     },
-});
-const notifySendOpen = ref(false);
+  });
+  const notifySendOpen = ref(false);
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
+  });
 
-watch(
+  watch(
     () => activeTab.value,
     (a) => {
-        Object.assign(queryParams, {
-            queryParam: {
-                ...queryParams.queryParam,
-                type: a,
-            },
-        });
-        queryTableList();
+      Object.assign(queryParams, {
+        queryParam: {
+          ...queryParams.queryParam,
+          type: a,
+        },
+      });
+      queryTableList();
     },
-);
+  );
 
-// 预览
-const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
-const previewOnline = (url: string | undefined, type: keyof typeof FILE_TYPE_ICON) => {
+  // 预览
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const previewOnline = (url: string | undefined, type: keyof typeof FILE_TYPE_ICON) => {
     if (url) {
-        previewOnlineRef.value?.open(url, type);
+      previewOnlineRef.value?.open(url, type);
     }
-};
+  };
 
-const handleSend = (scope) => {
+  const handleSend = (scope) => {
     notifySendOpen.value = true;
     currentRow.value = scope.row;
-};
+  };
 
-const handleNotifySend = (formValue, submitLoading) => {
+  const handleNotifySend = (formValue, submitLoading) => {
     submitLoading.value = true;
     safetyNoticeAdminIssuedNotice({
-        id: currentRow.value.id,
-        safetyAreaId: formValue.safetyAreaData.map((item: any) => item.id).join(','),
-        planStartTime: dayjs(formValue.planStartTime).format('YYYY-MM-DD'),
-        planEndTime: dayjs(formValue.planEndTime).format('YYYY-MM-DD'),
+      id: currentRow.value.id,
+      safetyAreaId: formValue.safetyAreaData.map((item: any) => item.id).join(','),
+      planStartTime: dayjs(formValue.planStartTime).format('YYYY-MM-DD'),
+      planEndTime: dayjs(formValue.planEndTime).format('YYYY-MM-DD'),
     })
-        .then(() => {
-            notifySendOpen.value = false;
-            currentRow.value = null;
-            ElMessage.success('发送成功');
-            queryTableList();
-        })
-        .finally(() => {
-            submitLoading.value = false;
-        });
-};
-
-const handleQueryUserGroupPage = () => {
+      .then(() => {
+        notifySendOpen.value = false;
+        currentRow.value = null;
+        ElMessage.success('发送成功');
+        queryTableList();
+      })
+      .finally(() => {
+        submitLoading.value = false;
+      });
+  };
+
+  const handleQueryUserGroupPage = () => {
     queryUserGroupPage({
-        pageNumber: 1,
-        pageSize: 500,
+      pageNumber: 1,
+      pageSize: 500,
     }).then((res) => {
-        groupList.value = res.records;
+      groupList.value = res.records;
     });
-};
+  };
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
+  };
 
-const handleDownloadLink = (scope) => {
+  const handleDownloadLink = (scope) => {
     const attachment = unformatAttachment(scope.row.attachment);
     attachment?.forEach((item: any) => {
-        downloadFile(item.fileUrl, item.fileName);
+      downloadFile(item.fileUrl, item.fileName);
     });
-};
-const handleConfirmDeleteRow = (scope) => {
+  };
+  const handleConfirmDeleteRow = (scope) => {
     safetyNoticeAdminDelete(scope.row.id).then(() => {
-        ElMessage.success('删除成功!');
-        queryTableList();
+      ElMessage.success('删除成功!');
+      queryTableList();
     });
-};
-const queryTableList = () => {
+  };
+  const queryTableList = () => {
     console.log(queryParams.queryParam.type);
     safetyNoticeAdminQueryPage({
-        ...queryParams,
-        queryParam: {
-            ...omit(queryParams.queryParam, 'date'),
-            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,
-        },
+      ...queryParams,
+      queryParam: {
+        ...omit(queryParams.queryParam, 'date'),
+        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.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     activeTab.value = '';
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            responsibilityName: '',
-            status: '',
-            date: '',
-            type: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        responsibilityName: '',
+        status: '',
+        date: '',
+        type: '',
+      },
     });
     queryTableList();
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     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 *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-:deep(.el-tabs__header) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.file-container--div {
+  .file-container--div {
     display: flex;
     align-items: center;
     gap: 10px;
 
     .file-container--div__name {
-        min-width: 0;
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+      min-width: 0;
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     img {
-        cursor: pointer;
+      cursor: pointer;
     }
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/notice-view.vue

@@ -1,27 +1,27 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title">
-                <BreadcrumbBack />
-                {{ detailData?.responsibilityName }}
-            </div>
-            <div class="detail-content">
-                <span>类别名称：{{ detailData?.safetyAreaTypeName }} </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-tabs>
-        </header>
-        <main class="safety-platform-container__main">
-            <div class="search-form">
-                <el-form :inline="true">
-                    <!-- <el-form-item label="状态" v-if="activeTab">
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title">
+        <BreadcrumbBack />
+        {{ detailData?.responsibilityName }}
+      </div>
+      <div class="detail-content">
+        <span>类别名称：{{ detailData?.safetyAreaTypeName }} </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-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="待签署" />
@@ -31,314 +31,332 @@
               <el-option :value="6" label="已作废" />
             </el-select>
           </el-form-item> -->
-                    <el-form-item label="区域类型">
-                        <el-select v-model="queryParams.queryParam.type" clearable placeholder="选择区域类型"
-                            style="width: 170px">
-                            <el-option :value="1" label="公共区域" />
-                            <el-option :value="2" 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="safetyAreaTypeName" />
-
-                    <el-table-column label="通知区域" prop="safetyAreaName" />
-                    <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 === 3" type="primary" link @click="
-                                $router.push({
-                                    name: 'responsibilityNoticeReview:admin',
-                                    query: { id: scope.row.id },
-                                })
-                                ">审核
-                            </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 layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
+          <el-form-item label="区域类型">
+            <el-select v-model="queryParams.queryParam.type" clearable placeholder="选择区域类型" style="width: 170px">
+              <el-option :value="1" label="公共区域" />
+              <el-option :value="2" 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="safetyAreaTypeName" />
+
+          <el-table-column label="通知区域" prop="safetyAreaName" />
+          <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 === 3"
+                type="primary"
+                link
+                @click="
+                  $router.push({
+                    name: 'responsibilityNoticeReview:admin',
+                    query: { id: scope.row.id },
+                  })
+                "
+                >审核
+              </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
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
 </template>
 <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 {
+  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 {
     safetyNoticeAdminQueryIssuedObject,
     safetyNoticeAdminExportIssuedObject,
     safetyResponsibilityAdminDeleteIssuedObject,
     safetyNoticeAdminScrap,
-} from '@/api/production-safety/responsibility-implementation';
-import { downloadByData } from '@/utils/file/download';
-import { unformatAttachment } from '@/components/UploadFiles/utils';
-import { downloadFile } from '@/views/disaster/utils';
+  } 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 router = useRouter();
+  const route = useRoute();
+  const activeTab = ref<any>('');
+  const groupList = ref<any>([]);
 
-const queryParams = reactive<any>({
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        adminId: route.query.id,
-        status: '',
-        date: '',
-        type: route.query.type || '',
+      adminId: route.query.id,
+      status: '',
+      date: '',
+      type: route.query.type || '',
     },
-});
+  });
 
-const detailData = reactive({
+  const detailData = reactive({
     createdAt: '',
     createdByName: '',
     safetyAreaTypeName: '',
     responsibilityName: '',
-});
+  });
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
+  });
 
-const handleQueryUserGroupPage = () => {
+  const handleQueryUserGroupPage = () => {
     queryUserGroupPage({
-        pageNumber: 1,
-        pageSize: 500,
+      pageNumber: 1,
+      pageSize: 500,
     }).then((res) => {
-        groupList.value = res.records;
+      groupList.value = res.records;
     });
-};
+  };
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
-const handleDownloadLink = (scope) => {
+  };
+  const handleDownloadLink = (scope) => {
     const attachment = unformatAttachment(scope.row.attachment);
     attachment?.forEach((item: any) => {
-        downloadFile(item.fileUrl, item.fileName);
+      downloadFile(item.fileUrl, item.fileName);
     });
-};
+  };
 
-const handleScrap = (scope) => {
+  const handleScrap = (scope) => {
     safetyNoticeAdminScrap(scope.row.id).then(() => {
-        ElMessage.success('作废成功');
-        queryTableList();
+      ElMessage.success('作废成功');
+      queryTableList();
     });
-};
+  };
 
-const handleExport = () => {
+  const handleExport = () => {
     safetyNoticeAdminExportIssuedObject({
-        ...queryParams,
-        queryParam: {
-            ...omit(queryParams.queryParam, 'date'),
-            adminId: Number(queryParams.queryParam.adminId),
-            status: queryParams.queryParam.status,
-            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,
-        },
+      ...queryParams,
+      queryParam: {
+        ...omit(queryParams.queryParam, 'date'),
+        adminId: Number(queryParams.queryParam.adminId),
+        status: queryParams.queryParam.status,
+        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('导出文件成功');
+      if (!res) {
+        throw new Error('下载文件失败');
+      }
+      downloadByData(res, `${Date.now()}.xlsx`);
+      ElMessage.success('导出文件成功');
     });
-};
-const handleConfirmDeleteRow = (scope) => {
+  };
+  const handleConfirmDeleteRow = (scope) => {
     safetyResponsibilityAdminDeleteIssuedObject(scope.row.id).then(() => {
-        ElMessage.success('删除成功!');
-        queryTableList();
+      ElMessage.success('删除成功!');
+      queryTableList();
     });
-};
-const queryTableList = () => {
+  };
+  const queryTableList = () => {
     safetyNoticeAdminQueryIssuedObject({
-        ...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,
-        },
+      ...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.totalRow;
-        Object.keys(detailData).forEach((item) => {
-            if (item in res) {
-                detailData[item] = res[item];
-            }
-        });
-        console.log(detailData);
+      tableData.data = res.pages.records;
+      tableData.total = res.pages.totalRow;
+      Object.keys(detailData).forEach((item) => {
+        if (item in res) {
+          detailData[item] = res[item];
+        }
+      });
+      console.log(detailData);
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            ...queryParams.queryParam,
-            status: '',
-            date: '',
-            userGroupId: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        ...queryParams.queryParam,
+        status: '',
+        date: '',
+        userGroupId: '',
+      },
     });
     queryTableList();
-};
+  };
 
-watch(
+  watch(
     () => activeTab.value,
     (a) => {
-        queryParams.queryParam.status = a ? Number(a) : '';
-        queryTableList();
-        //
+      queryParams.queryParam.status = a ? Number(a) : '';
+      queryTableList();
+      //
     },
-);
+  );
 
-onMounted(async () => {
+  onMounted(async () => {
     activeTab.value = route.query.status;
     Object.assign(queryParams, {
-        queryParam: {
-            ...queryParams.queryParam,
-            status: Number(activeTab.value),
-        },
+      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 *;
+  @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 {
+  .safety-platform-container__header {
     padding-bottom: 0 !important;
-}
+  }
 
-:deep(.el-tabs__header) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.detail-content {
+  .detail-content {
     display: flex;
     gap: 30px;
     margin: 10px 0;
     font-size: 14px;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-admin/review.vue

@@ -1,27 +1,27 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="detail-content">
-                <span>类型：{{ formData?.departmentName }} </span>
-                <span>创建人：{{ formData?.createdByName }} </span>
-                <span>创建时间：{{ formData?.createdAt }} </span>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <div class="detail-content">
+        <span>类型：{{ formData?.departmentName }} </span>
+        <span>创建人：{{ formData?.createdByName }} </span>
+        <span>创建时间：{{ formData?.createdAt }} </span>
+      </div>
+    </header>
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">
+        <h4>基本信息</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">责任通知名称：</div>
+              <div class="value">{{ formData.responsibilityName }}</div>
             </div>
-        </header>
-        <main class="safety-platform-container__main">
-            <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">
-                <h4>基本信息</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">责任通知名称：</div>
-                            <div class="value">{{ formData.responsibilityName }}</div>
-                        </div>
-                        <div class="col">
-                            <div class="label">状态：</div>
-                            <div class="value">{{ formData.statusName }}</div>
-                        </div>
-                    </div>
-                    <!-- <div class="row">
+            <div class="col">
+              <div class="label">状态：</div>
+              <div class="value">{{ formData.statusName }}</div>
+            </div>
+          </div>
+          <!-- <div class="row">
                         <div class="col">
                             <div class="label">签署人数：</div>
                             <div class="value">{{ formData.signedQuantity }}</div>
@@ -31,103 +31,107 @@
                             <div class="value">{{ formData.userGroupName }}</div>
                         </div>
                     </div> -->
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">计划开始日期：</div>
-                            <div class="value">{{ formData.planStartTime }}</div>
-                        </div>
-                        <div class="col">
-                            <div class="label">计划结束日期：</div>
-                            <div class="value">{{ formData.planEndTime }}</div>
-                        </div>
-                    </div>
-                </div>
-                <h4>责任通知内容</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">责任通知文档：</div>
-                            <div class="value value-s1">
-                                <div class="file-list">
-                                    <div class="file-item" v-for="item in formData.attachment" :key="item.fileId">
-                                        <span class="file-item--name">{{ item.fileName }}</span>
-                                        <div class="file-item--footer">
-                                            <!-- <div class="info">
+          <div class="row">
+            <div class="col">
+              <div class="label">计划开始日期：</div>
+              <div class="value">{{ formData.planStartTime }}</div>
+            </div>
+            <div class="col">
+              <div class="label">计划结束日期：</div>
+              <div class="value">{{ formData.planEndTime }}</div>
+            </div>
+          </div>
+        </div>
+        <h4>责任通知内容</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">责任通知文档：</div>
+              <div class="value value-s1">
+                <div class="file-list">
+                  <div class="file-item" v-for="item in formData.attachment" :key="item.fileId">
+                    <span class="file-item--name">{{ item.fileName }}</span>
+                    <div class="file-item--footer">
+                      <!-- <div class="info">
                         <span>{{ item.fileSize }}</span>
                       </div> -->
-                                            <el-button link type="primary"
-                                                @click="previewOnline(item.fileUrl, item.fileType)">预览</el-button>
-                                            <el-button link type="primary"
-                                                @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</el-button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                      <el-button link type="primary" @click="previewOnline(item.fileUrl, item.fileType)"
+                        >预览</el-button
+                      >
+                      <el-button link type="primary" @click.stop="downloadFile(item.fileUrl, item.fileName)"
+                        >下载</el-button
+                      >
                     </div>
+                  </div>
                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
 
-                <h4>材料上传</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">上传附件：</div>
-                            <div class="value value-s1">
-                                <div class="file-list">
-                                    <div class="file-item" v-for="item in formData.feedback" :key="item.fileId">
-                                        <span class="file-item--name">{{ item.fileName }}</span>
-                                        <div class="file-item--footer">
-                                            <!-- <div class="info">
+        <h4>材料上传</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">上传附件：</div>
+              <div class="value value-s1">
+                <div class="file-list">
+                  <div class="file-item" v-for="item in formData.feedback" :key="item.fileId">
+                    <span class="file-item--name">{{ item.fileName }}</span>
+                    <div class="file-item--footer">
+                      <!-- <div class="info">
                         <span>{{ item.fileSize }}</span>
                       </div> -->
-                                            <el-button link type="primary"
-                                                @click="previewOnline(item.fileUrl, item.fileType)">预览</el-button>
-                                            <el-button link type="primary"
-                                                @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</el-button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                      <el-button link type="primary" @click="previewOnline(item.fileUrl, item.fileType)"
+                        >预览</el-button
+                      >
+                      <el-button link type="primary" @click.stop="downloadFile(item.fileUrl, item.fileName)"
+                        >下载</el-button
+                      >
                     </div>
+                  </div>
                 </div>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button @click="$router.push({ name: 'responsibilityNoticeManage:admin' })">返回</el-button>
-            <el-button type="primary" @click="handleReviewFailed">审核不通过</el-button>
-            <el-button type="primary" @click="handleReviewApproved" :loading="submiting">审核通过</el-button>
-        </footer>
-    </div>
-    <PreviewOnline ref="previewOnlineRef" />
-    <RefuseReason ref="reviewFeedBackRef" @submit="handleReviewFailedSubmit" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'responsibilityNoticeManage:admin' })">返回</el-button>
+      <el-button type="primary" @click="handleReviewFailed">审核不通过</el-button>
+      <el-button type="primary" @click="handleReviewApproved" :loading="submiting">审核通过</el-button>
+    </footer>
+  </div>
+  <PreviewOnline ref="previewOnlineRef" />
+  <RefuseReason ref="reviewFeedBackRef" @submit="handleReviewFailedSubmit" />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, nextTick, reactive, shallowRef } from 'vue';
-import { ElMessage } from 'element-plus';
-import '@wangeditor/editor/dist/css/style.css';
-import { useRouter, useRoute } from 'vue-router';
-import { downloadFile } from '@/views/disaster/utils';
+  import { onMounted, ref, nextTick, reactive, shallowRef } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import '@wangeditor/editor/dist/css/style.css';
+  import { useRouter, useRoute } from 'vue-router';
+  import { downloadFile } from '@/views/disaster/utils';
 
-// import {
-//     safetyNoticeAdminQueryDetail,
-//     safetyNoticeAdminApprove,
-// } from '@/api/production-safety/responsibility-implementation';
-import {
+  // import {
+  //     safetyNoticeAdminQueryDetail,
+  //     safetyNoticeAdminApprove,
+  // } from '@/api/production-safety/responsibility-implementation';
+  import {
     safetyNoticeAdminApprove,
     safetyNoticeDeptQueryDetail,
-} from '@/api/production-safety/responsibility-implementation';
-import RefuseReason from '../components/RefuseReason.vue';
+  } from '@/api/production-safety/responsibility-implementation';
+  import RefuseReason from '../components/RefuseReason.vue';
 
-import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';
-import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-const formData = reactive<any>({
+  const formData = reactive<any>({
     safetyAreaName: '',
     departmentName: '',
     createdByName: '',
@@ -141,100 +145,99 @@ const formData = reactive<any>({
     userGroupName: '',
     planStartTime: null,
     planEndTime: null,
-});
+  });
 
-const rules = reactive({});
-const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
-const reviewFeedBackRef = ref<any>(null);
-const previewOnline = (url: string | undefined, type) => {
+  const rules = reactive({});
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const reviewFeedBackRef = ref<any>(null);
+  const previewOnline = (url: string | undefined, type) => {
     if (url) {
-        previewOnlineRef.value?.open(url, type);
+      previewOnlineRef.value?.open(url, type);
     }
-};
+  };
 
-const handleUploadSuccess = (fileList) => {
+  const handleUploadSuccess = (fileList) => {
     formData.attachment = fileList;
     formRef.value.validateField('attachment');
-};
+  };
 
-const handleReviewFailedSubmit = (formData) => {
+  const handleReviewFailedSubmit = (formData) => {
     reviewFeedBackRef.value.submitLoading = true;
     safetyNoticeAdminApprove({
-        approveType: 0,
-        refuseReason: formData.refuseReason,
-        id: route.query.id,
+      approveType: 0,
+      refuseReason: formData.refuseReason,
+      id: route.query.id,
     })
-        .then(() => {
-            reviewFeedBackRef.value.dialogHide();
-            ElMessage.success('提交成功');
-        })
-        .finally(() => {
-            reviewFeedBackRef.value.submitLoading = false;
-        });
-};
-const handleReviewApproved = () => {
+      .then(() => {
+        reviewFeedBackRef.value.dialogHide();
+        ElMessage.success('提交成功');
+      })
+      .finally(() => {
+        reviewFeedBackRef.value.submitLoading = false;
+      });
+  };
+  const handleReviewApproved = () => {
     submiting.value = true;
     safetyNoticeAdminApprove({
-        approveType: 1,
-        refuseReason: null,
-        id: route.query.id,
+      approveType: 1,
+      refuseReason: null,
+      id: route.query.id,
     })
-        .then(() => {
-            ElMessage.success('审核成功');
-            router.push({
-                name: 'responsibilityNoticeManage:admin',
-            });
-        })
-        .finally(() => {
-            submiting.value = false;
+      .then(() => {
+        ElMessage.success('审核成功');
+        router.push({
+          name: 'responsibilityNoticeManage:admin',
         });
-};
+      })
+      .finally(() => {
+        submiting.value = false;
+      });
+  };
 
-const handleQueryDetail = () => {
+  const handleQueryDetail = () => {
     safetyNoticeDeptQueryDetail({
-        id: route.query.id,
+      id: route.query.id,
     }).then((res) => {
-        Object.keys(formData).forEach((name) => {
-            if (name in res) {
-                Object.assign(formData, {
-                    [name]: res[name],
-                    attachment: unformatAttachment(res.attachment),
-                    signsUpload: unformatAttachment(res.signsUpload),
-                    feedback: unformatAttachment(res.feedback),
-                });
-            }
-        });
-        console.log(formData);
+      Object.keys(formData).forEach((name) => {
+        if (name in res) {
+          Object.assign(formData, {
+            [name]: res[name],
+            attachment: unformatAttachment(res.attachment),
+            signsUpload: unformatAttachment(res.signsUpload),
+            feedback: unformatAttachment(res.feedback),
+          });
+        }
+      });
+      console.log(formData);
     });
-};
+  };
 
-const handleReviewFailed = () => {
+  const handleReviewFailed = () => {
     reviewFeedBackRef.value.dialogShow();
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     handleQueryDetail();
-});
+  });
 </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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-h4 {
+  h4 {
     margin-bottom: 10px;
-}
+  }
 
-.detail-content {
+  .detail-content {
     display: flex;
     gap: 30px;
     margin: 10px 0;
     font-size: 14px;
-}
-
+  }
 
-.detail-ct {
+  .detail-ct {
     display: flex;
     flex-direction: column;
     border: 1px solid rgb(220, 223, 230);
@@ -242,49 +245,49 @@ h4 {
     margin-bottom: 25px;
 
     .row {
-        display: flex;
+      display: flex;
 
-        border-bottom: 1px solid rgb(220, 223, 230);
+      border-bottom: 1px solid rgb(220, 223, 230);
     }
 
     .row:last-child {
-        border-bottom: none;
+      border-bottom: none;
     }
 
     .col {
-        display: flex;
-        flex: 1;
-        min-height: 40px;
-        align-items: stretch;
+      display: flex;
+      flex: 1;
+      min-height: 40px;
+      align-items: stretch;
 
-        .label {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            width: 160px;
-            background-color: rgb(245, 247, 250);
-            border-right: 1px solid rgb(220, 223, 230);
-        }
+      .label {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 160px;
+        background-color: rgb(245, 247, 250);
+        border-right: 1px solid rgb(220, 223, 230);
+      }
 
-        .value {
-            display: flex;
-            flex: 1;
-            padding-left: 20px;
-            align-items: center;
-            border-right: 1px solid rgb(220, 223, 230);
-        }
+      .value {
+        display: flex;
+        flex: 1;
+        padding-left: 20px;
+        align-items: center;
+        border-right: 1px solid rgb(220, 223, 230);
+      }
 
-        .value-s1 {
-            min-height: 60px;
-        }
+      .value-s1 {
+        min-height: 60px;
+      }
 
-        .value:nth-child(2) {
-            border-right: 0;
-        }
+      .value:nth-child(2) {
+        border-right: 0;
+      }
     }
 
     .col:nth-child(2) .label {
-        border-left: 1px solid rgb(220, 223, 230);
+      border-left: 1px solid rgb(220, 223, 230);
     }
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-dept/feedback.vue

@@ -1,32 +1,32 @@
 <template>
-    <div class="safety-platform-container">
-        <el-alert v-if="showAlertBar" :title="formData?.rejection" type="warning" />
-        <!-- <div class="hint">您提交的反馈材料审核不通过，请尽快查看并修改，再次提交进行审核，谢谢！{{ formData?.rejection }}</div> -->
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
-            <div class="detail-content">
-                <span>类型：{{ formData?.departmentName }} </span>
-                <span>创建人：{{ formData?.createdByName }} </span>
-                <span>创建时间：{{ formData?.createdAt }} </span>
-            </div>
-        </header>
+  <div class="safety-platform-container">
+    <el-alert v-if="showAlertBar" :title="formData?.rejection" type="warning" />
+    <!-- <div class="hint">您提交的反馈材料审核不通过，请尽快查看并修改，再次提交进行审核，谢谢！{{ formData?.rejection }}</div> -->
+    <header class="safety-platform-container__header">
+      <div class="breadcrumb-title"> {{ formData?.responsibilityName }} </div>
+      <div class="detail-content">
+        <span>类型：{{ formData?.departmentName }} </span>
+        <span>创建人：{{ formData?.createdByName }} </span>
+        <span>创建时间：{{ formData?.createdAt }} </span>
+      </div>
+    </header>
 
-        <!-- v-if="showAlertBar" -->
-        <main class="safety-platform-container__main">
-            <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">
-                <h4>基本信息</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">责任通知名称：</div>
-                            <div class="value">{{ formData.responsibilityName }}</div>
-                        </div>
-                        <div class="col">
-                            <div class="label">状态：</div>
-                            <div class="value">{{ formData.statusName }}</div>
-                        </div>
-                    </div>
-                    <!-- <div class="row">
+    <!-- v-if="showAlertBar" -->
+    <main class="safety-platform-container__main">
+      <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">
+        <h4>基本信息</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">责任通知名称：</div>
+              <div class="value">{{ formData.responsibilityName }}</div>
+            </div>
+            <div class="col">
+              <div class="label">状态：</div>
+              <div class="value">{{ formData.statusName }}</div>
+            </div>
+          </div>
+          <!-- <div class="row">
                         <div class="col">
                             <div class="label">发送人数：</div>
                             <div class="value">{{ formData.signedQuantity }}</div>
@@ -36,55 +36,60 @@
                             <div class="value">{{ formData.userGroupName }}</div>
                         </div>
                     </div> -->
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">计划开始日期：</div>
-                            <div class="value">{{ formData.planStartTime }}</div>
-                        </div>
-                        <div class="col">
-                            <div class="label">计划结束日期：</div>
-                            <div class="value">{{ formData.planEndTime }}</div>
-                        </div>
-                    </div>
-                </div>
-                <h4>责任通知内容</h4>
-                <div class="detail-ct">
-                    <div class="row">
-                        <div class="col">
-                            <div class="label">责任通知文档：</div>
-                            <div class="value value-s1">
-                                <div class="file-list">
-                                    <div class="file-item" v-for="item in formData.attachment" :key="item.fileId">
-                                        <span class="file-item--name">{{ item.fileName }}</span>
-                                        <div class="file-item--footer">
-                                            <!-- <div class="info">
+          <div class="row">
+            <div class="col">
+              <div class="label">计划开始日期：</div>
+              <div class="value">{{ formData.planStartTime }}</div>
+            </div>
+            <div class="col">
+              <div class="label">计划结束日期：</div>
+              <div class="value">{{ formData.planEndTime }}</div>
+            </div>
+          </div>
+        </div>
+        <h4>责任通知内容</h4>
+        <div class="detail-ct">
+          <div class="row">
+            <div class="col">
+              <div class="label">责任通知文档：</div>
+              <div class="value value-s1">
+                <div class="file-list">
+                  <div class="file-item" v-for="item in formData.attachment" :key="item.fileId">
+                    <span class="file-item--name">{{ item.fileName }}</span>
+                    <div class="file-item--footer">
+                      <!-- <div class="info">
                         <span>{{ item.fileSize }}</span>
                       </div> -->
-                                            <el-button link type="primary"
-                                                @click="previewOnline(item.fileUrl, item.fileType)">预览</el-button>
-                                            <el-button link type="primary"
-                                                @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</el-button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                      <el-button link type="primary" @click="previewOnline(item.fileUrl, item.fileType)"
+                        >预览</el-button
+                      >
+                      <el-button link type="primary" @click.stop="downloadFile(item.fileUrl, item.fileName)"
+                        >下载</el-button
+                      >
                     </div>
+                  </div>
                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
 
-                <template v-if="isSignsUpload">
-                    <h4>签署材料上传</h4>
+        <template v-if="isSignsUpload">
+          <h4>签署材料上传</h4>
 
-                    <div class="detail-ct">
-                        <div class="row">
-                            <div class="col">
-                                <div class="label">上传附件：</div>
-                                <div class="value value-s1">
-                                    <el-form-item prop="signsUpload">
-                                        <UploadFiles label="上传附件" @uploadSuccess="handleUploadSignsUploadSuccess"
-                                            :fileList="formData.signsUpload" />
-                                    </el-form-item>
-                                    <!-- <div class="file-list" v-if="formData.signsUpload.length">
+          <div class="detail-ct">
+            <div class="row">
+              <div class="col">
+                <div class="label">上传附件：</div>
+                <div class="value value-s1">
+                  <el-form-item prop="signsUpload">
+                    <UploadFiles
+                      label="上传附件"
+                      @uploadSuccess="handleUploadSignsUploadSuccess"
+                      :fileList="formData.signsUpload"
+                    />
+                  </el-form-item>
+                  <!-- <div class="file-list" v-if="formData.signsUpload.length">
                   <div class="file-item" v-for="item in formData.signsUpload" :key="item.fileId">
                     <span class="file-item--name">{{ item.fileName }}</span>
                     <div class="file-item--footer">
@@ -97,23 +102,26 @@
                     </div>
                   </div>
                 </div> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-                <template v-else>
-                    <h4>材料上传</h4>
-                    <div class="detail-ct">
-                        <div class="row">
-                            <div class="col">
-                                <div class="label">上传附件：</div>
-                                <div class="value value-s1">
-                                    <el-form-item prop="feedback">
-                                        <UploadFiles label="上传附件" @uploadSuccess="handleUploadFeedbackUploadSuccess"
-                                            :fileList="formData.feedback" />
-                                    </el-form-item>
-                                    <!-- <div class="file-list" v-if="formData.signsUpload.length">
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <h4>材料上传</h4>
+          <div class="detail-ct">
+            <div class="row">
+              <div class="col">
+                <div class="label">上传附件：</div>
+                <div class="value value-s1">
+                  <el-form-item prop="feedback">
+                    <UploadFiles
+                      label="上传附件"
+                      @uploadSuccess="handleUploadFeedbackUploadSuccess"
+                      :fileList="formData.feedback"
+                    />
+                  </el-form-item>
+                  <!-- <div class="file-list" v-if="formData.signsUpload.length">
                   <div class="file-item" v-for="item in formData.signsUpload" :key="item.fileId">
                     <span class="file-item--name">{{ item.fileName }}</span>
                     <div class="file-item--footer">
@@ -126,42 +134,42 @@
                     </div>
                   </div>
                 </div> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </el-form>
-        </main>
-        <footer class="safety-platform-container__footer">
-            <el-button @click="$router.push({ name: 'responsibilityNoticeManage' })">返回</el-button>
-            <el-button type="primary" @click="handleSubmit" :loading="submiting">提交</el-button>
-        </footer>
-    </div>
-    <PreviewOnline ref="previewOnlineRef" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-form>
+    </main>
+    <footer class="safety-platform-container__footer">
+      <el-button @click="$router.push({ name: 'responsibilityNoticeManage' })">返回</el-button>
+      <el-button type="primary" @click="handleSubmit" :loading="submiting">提交</el-button>
+    </footer>
+  </div>
+  <PreviewOnline ref="previewOnlineRef" />
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, computed, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import '@wangeditor/editor/dist/css/style.css';
-import { useRouter, useRoute } from 'vue-router';
-import { downloadFile } from '@/views/disaster/utils';
+  import { onMounted, ref, computed, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import '@wangeditor/editor/dist/css/style.css';
+  import { useRouter, useRoute } from 'vue-router';
+  import { downloadFile } from '@/views/disaster/utils';
 
-import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
-import {
+  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
+  import {
     safetyNoticeDeptQueryDetail,
     safetyNoticeDeptFeedback,
-} from '@/api/production-safety/responsibility-implementation';
+  } from '@/api/production-safety/responsibility-implementation';
 
-import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';
-import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
+  import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';
+  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
 
-const router = useRouter();
-const route = useRoute();
-const formRef = ref<any>(null);
-const submiting = ref(false);
+  const router = useRouter();
+  const route = useRoute();
+  const formRef = ref<any>(null);
+  const submiting = ref(false);
 
-const formData = reactive<any>({
+  const formData = reactive<any>({
     departmentName: '',
     createdByName: '',
     createdAt: '',
@@ -176,121 +184,121 @@ const formData = reactive<any>({
     planEndTime: null,
     rejection: '',
     status: null,
-});
+  });
 
-const rules = reactive({
+  const rules = reactive({
     signsUpload: [
-        {
-            required: true,
-            message: '请上传签署材料',
-        },
+      {
+        required: true,
+        message: '请上传签署材料',
+      },
     ],
-});
-const showAlertBar = computed(() => {
+  });
+  const showAlertBar = computed(() => {
     if (!formData.rejection) {
-        return false;
+      return false;
     }
     return formData.status === 2 && formData.rejection != null;
-});
-const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
-const isSignsUpload = computed(() => route.query.status === '2');
+  });
+  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
+  const isSignsUpload = computed(() => route.query.status === '2');
 
-const previewOnline = (url: string | undefined, type) => {
+  const previewOnline = (url: string | undefined, type) => {
     if (url) {
-        previewOnlineRef.value?.open(url, type);
+      previewOnlineRef.value?.open(url, type);
     }
-};
-const handleSubmit = () => {
+  };
+  const handleSubmit = () => {
     let signsUpload: any[] = [];
     let feedback: any[] = [];
 
     formRef.value?.validate(async (valid) => {
-        if (valid) {
-            submiting.value = true;
-            if (isSignsUpload.value) {
-                signsUpload = await formatAttachmentList(formData.signsUpload);
-            } else {
-                feedback = await formatAttachmentList(formData.feedback);
-            }
-            const params = {
-                id: route.query.id,
-                updateType: isSignsUpload.value ? 0 : 1,
-                signsUpload: isSignsUpload.value ? JSON.stringify(signsUpload) : undefined,
-                feedback: !isSignsUpload.value ? JSON.stringify(feedback) : undefined,
-            };
-            safetyNoticeDeptFeedback(params)
-                .then(() => {
-                    router.push({
-                        name: 'responsibilityNoticeManage',
-                    });
-                })
-                .finally(() => {
-                    submiting.value = false;
-                });
+      if (valid) {
+        submiting.value = true;
+        if (isSignsUpload.value) {
+          signsUpload = await formatAttachmentList(formData.signsUpload);
+        } else {
+          feedback = await formatAttachmentList(formData.feedback);
         }
+        const params = {
+          id: route.query.id,
+          updateType: isSignsUpload.value ? 0 : 1,
+          signsUpload: isSignsUpload.value ? JSON.stringify(signsUpload) : undefined,
+          feedback: !isSignsUpload.value ? JSON.stringify(feedback) : undefined,
+        };
+        safetyNoticeDeptFeedback(params)
+          .then(() => {
+            router.push({
+              name: 'responsibilityNoticeManage',
+            });
+          })
+          .finally(() => {
+            submiting.value = false;
+          });
+      }
     });
-};
+  };
 
-const handleUploadSignsUploadSuccess = (fileList) => {
+  const handleUploadSignsUploadSuccess = (fileList) => {
     formData.signsUpload = fileList;
     formRef.value.validateField('signsUpload');
-};
+  };
 
-const handleUploadFeedbackUploadSuccess = (fileList) => {
+  const handleUploadFeedbackUploadSuccess = (fileList) => {
     formData.feedback = fileList;
     formRef.value.validateField('feedback');
-};
+  };
 
-const handleQueryDetail = () => {
+  const handleQueryDetail = () => {
     safetyNoticeDeptQueryDetail({
-        id: route.query.id,
+      id: route.query.id,
     }).then((res) => {
-        Object.keys(formData).forEach((name) => {
-            if (name in res) {
-                Object.assign(formData, {
-                    [name]: res[name],
-                    status: res.status,
-                    attachment: unformatAttachment(res.attachment),
-                    signsUpload: unformatAttachment(res.signsUpload),
-                    feedback: unformatAttachment(res.feedback),
-                });
-            }
-        });
-        console.log(formData);
+      Object.keys(formData).forEach((name) => {
+        if (name in res) {
+          Object.assign(formData, {
+            [name]: res[name],
+            status: res.status,
+            attachment: unformatAttachment(res.attachment),
+            signsUpload: unformatAttachment(res.signsUpload),
+            feedback: unformatAttachment(res.feedback),
+          });
+        }
+      });
+      console.log(formData);
     });
-};
+  };
 
-onMounted(() => {
+  onMounted(() => {
     handleQueryDetail();
-});
+  });
 </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 *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-h4 {
+  h4 {
     margin-bottom: 10px;
-}
+  }
 
-.detail-content {
+  .detail-content {
     display: flex;
     gap: 30px;
     margin: 10px 0;
     font-size: 14px;
-}
+  }
 
-.hint {
+  .hint {
     margin-bottom: 10px;
     padding: 10px;
     background-color: rgb(255, 241, 241);
     color: rgb(255, 87, 87);
     border: 1px solid rgb(255, 87, 87);
     border-radius: 4px;
-}
+  }
 
-.detail-ct {
+  .detail-ct {
     display: flex;
     flex-direction: column;
     border: 1px solid rgb(220, 223, 230);
@@ -298,50 +306,50 @@ h4 {
     margin-bottom: 25px;
 
     .row {
-        display: flex;
+      display: flex;
 
-        border-bottom: 1px solid rgb(220, 223, 230);
+      border-bottom: 1px solid rgb(220, 223, 230);
     }
 
     .row:last-child {
-        border-bottom: none;
+      border-bottom: none;
     }
 
     .col {
-        display: flex;
-        flex: 1;
-        min-height: 40px;
-        align-items: stretch;
+      display: flex;
+      flex: 1;
+      min-height: 40px;
+      align-items: stretch;
 
-        .label {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            width: 160px;
-            background-color: rgb(245, 247, 250);
-            border-right: 1px solid rgb(220, 223, 230);
-        }
+      .label {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 160px;
+        background-color: rgb(245, 247, 250);
+        border-right: 1px solid rgb(220, 223, 230);
+      }
 
-        .value {
-            display: flex;
-            justify-content: space-between;
-            flex: 1;
-            padding: 10px 20px;
-            align-items: center;
-            border-right: 1px solid rgb(220, 223, 230);
-        }
+      .value {
+        display: flex;
+        justify-content: space-between;
+        flex: 1;
+        padding: 10px 20px;
+        align-items: center;
+        border-right: 1px solid rgb(220, 223, 230);
+      }
 
-        .value-s1 {
-            min-height: 60px;
-        }
+      .value-s1 {
+        min-height: 60px;
+      }
 
-        .value:nth-child(2) {
-            border-right: 0;
-        }
+      .value:nth-child(2) {
+        border-right: 0;
+      }
     }
 
     .col:nth-child(2) .label {
-        border-left: 1px solid rgb(220, 223, 230);
+      border-left: 1px solid rgb(220, 223, 230);
     }
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/responsibility-notice-manage-dept/list.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="safety-platform-container">
-        <header class="safety-platform-container__header">
-            <div class="breadcrumb-title"> 安全责任通知管理 (部门侧)</div>
-            <!-- <el-tabs v-model="activeTab">
+  <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="部门" />
@@ -10,229 +10,253 @@
         <el-tab-pane label="员工" name="员工" />
         <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-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="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" />
-                    <el-table-column label="状态" prop="statusName" width="100" />
-                    <!-- <el-table-column label="类型" prop="safetyAreaName" width="130" /> -->
-                    <!-- <el-table-column label="下发数" prop="issuedQuantity" width="120" />
+    </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-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="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" />
+          <el-table-column label="状态" prop="statusName" width="100" />
+          <!-- <el-table-column label="类型" prop="safetyAreaName" width="130" /> -->
+          <!-- <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="responsibilityPersonName" /> -->
-                    <el-table-column label="计划开始时间" prop="planStartTime" />
-                    <el-table-column label="计划完成时间" prop="planEndTime" />
-                    <el-table-column fixed="right" label="操作">
-                        <template #default="scope">
-                            <el-button type="primary" v-if="scope.row.status === 2" link @click="
-                                $router.push({
-                                    name: 'responsibilityNoticeFeedback',
-                                    query: {
-                                        id: scope.row.id,
-                                    },
-                                })
-                                ">反馈</el-button>
-                            <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="pagination-container" v-if="tableData.total > 0">
-                <el-pagination background layout="prev, pager, next, jumper,sizes, total"
-                    :current-page="queryParams.pageNumber" :page-size="queryParams.pageSize" :total="tableData.total"
-                    :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" />
-            </div>
-        </main>
-    </div>
+          <!-- <el-table-column label="安全责任人" prop="responsibilityPersonName" /> -->
+          <el-table-column label="计划开始时间" prop="planStartTime" />
+          <el-table-column label="计划完成时间" prop="planEndTime" />
+          <el-table-column fixed="right" label="操作">
+            <template #default="scope">
+              <el-button
+                type="primary"
+                v-if="scope.row.status === 2"
+                link
+                @click="
+                  $router.push({
+                    name: 'responsibilityNoticeFeedback',
+                    query: {
+                      id: scope.row.id,
+                    },
+                  })
+                "
+                >反馈</el-button
+              >
+              <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container" v-if="tableData.total > 0">
+        <el-pagination
+          background
+          layout="prev, pager, next, jumper,sizes, total"
+          :current-page="queryParams.pageNumber"
+          :page-size="queryParams.pageSize"
+          :total="tableData.total"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </main>
+  </div>
 </template>
 <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 { safetyNoticeDeptQueryPage } from '@/api/production-safety/responsibility-implementation';
-import { omit } from 'lodash-es';
-
-import { unformatAttachment } from '@/components/UploadFiles/utils';
-import { downloadFile } from '@/views/disaster/utils';
-import { useUserInfoHook } from '@/views/disaster/hooks';
-
-const { id } = useUserInfoHook();
-const router = useRouter();
-const activeTab = ref('');
-const groupList = ref<any[]>([]);
-const queryParams = reactive<any>({
+  import { onMounted, ref, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  import { safetyNoticeDeptQueryPage } from '@/api/production-safety/responsibility-implementation';
+  import { omit } from 'lodash-es';
+
+  import { unformatAttachment } from '@/components/UploadFiles/utils';
+  import { downloadFile } from '@/views/disaster/utils';
+  import { useUserInfoHook } from '@/views/disaster/hooks';
+
+  const { id } = useUserInfoHook();
+  const router = useRouter();
+  const activeTab = ref('');
+  const groupList = ref<any[]>([]);
+  const queryParams = reactive<any>({
     pageNumber: 1,
     pageSize: 10,
     queryParam: {
-        responsibilityName: '',
-        status: '',
-        date: '',
-        responsibilityPersonId: id,
+      responsibilityName: '',
+      status: '',
+      date: '',
+      responsibilityPersonId: id,
     },
-});
+  });
 
-const tableData = reactive({
+  const tableData = reactive({
     data: [],
     total: 0,
-});
+  });
 
-const handleSizeChange = (value) => {
+  const handleSizeChange = (value) => {
     queryParams.pageSize = value;
     queryTableList();
-};
-const handleCurrentChange = (value) => {
+  };
+  const handleCurrentChange = (value) => {
     queryParams.pageNumber = value;
     queryTableList();
-};
+  };
 
-const handleDownloadLink = (scope) => {
+  const handleDownloadLink = (scope) => {
     const attachment = unformatAttachment(scope.row.attachment);
     attachment?.forEach((item: any) => {
-        downloadFile(item.fileUrl, item.fileName);
+      downloadFile(item.fileUrl, item.fileName);
     });
-};
+  };
 
-const queryTableList = () => {
+  const queryTableList = () => {
     safetyNoticeDeptQueryPage({
-        ...queryParams,
-        queryParam: {
-            ...omit(queryParams.queryParam, 'date'),
-            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,
-        },
+      ...queryParams,
+      queryParam: {
+        ...omit(queryParams.queryParam, 'date'),
+        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.totalRow;
+      tableData.data = res.records;
+      tableData.total = res.totalRow;
     });
-};
-const handleRestParams = () => {
+  };
+  const handleRestParams = () => {
     Object.assign(queryParams, {
-        pageNumber: 1,
-        pageSize: 10,
-        queryParam: {
-            responsibilityName: '',
-            status: '',
-            date: '',
-            responsibilityPersonId: '',
-        },
+      pageNumber: 1,
+      pageSize: 10,
+      queryParam: {
+        responsibilityName: '',
+        status: '',
+        date: '',
+        responsibilityPersonId: '',
+      },
     });
     queryTableList();
-};
+  };
 
-onMounted(async () => {
+  onMounted(async () => {
     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 *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
+  @use '@/styles/basic-table-action.scss' as *;
 
-:deep(.el-tabs__header) {
+  :deep(.el-tabs__header) {
     margin: 0;
-}
+  }
 
-:deep(.el-tabs__item) {
+  :deep(.el-tabs__item) {
     font-size: 14px !important;
-}
+  }
 
-:deep(.flexContent) {
+  :deep(.flexContent) {
     display: flex;
-}
+  }
 
-:deep(.breadcrumb .title) {
+  :deep(.breadcrumb .title) {
     margin-left: 0;
-}
+  }
 
-:deep(.el-form) {
+  :deep(.el-form) {
     flex: 1;
     display: flex;
     row-gap: 15px;
     flex-wrap: wrap;
-}
+  }
 
-:deep(.el-form-item) {
+  :deep(.el-form-item) {
     margin-bottom: 0;
-}
+  }
 
-:deep(main) {
+  :deep(main) {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.search-form {
+  .search-form {
     min-width: 800px;
     display: flex;
 
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 20px;
-}
+  }
 
-.button-content {
+  .button-content {
     margin-bottom: 20px;
-}
+  }
 
-.table-content {
+  .table-content {
     flex: 1;
     overflow: hidden;
     overflow-y: auto;
-}
+  }
 
-.page-content {
+  .page-content {
     display: flex;
     justify-content: flex-end;
-}
+  }
 
-.pagination-container {
+  .pagination-container {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
-}
+  }
 </style>

src/views/production-safety/implement-safety-duty/sign-agree-dept.vue

@@ -13,7 +13,6 @@
         <span>创建时间：{{ formData?.createdAt }} </span>
       </div>
     </header>
-    
 
     <main class="safety-platform-container__main">
       <el-form ref="formRef" label-width="auto" :model="formData" :rules="rules">

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

@@ -74,7 +74,7 @@
                   <el-button type="primary" link>删除</el-button>
                 </template>
               </el-popconfirm>
-              <el-popconfirm  title="确定要作废吗?" v-if="scope.row.status !== 6" >
+              <el-popconfirm title="确定要作废吗?" v-if="scope.row.status !== 6">
                 <template #reference>
                   <el-button type="primary" link @click="handleScrap(scope)">作废</el-button>
                 </template>