feat: 安全责任反馈

src/router/routers/production-safety-router/responsibility-implementation.ts

@@ -71,6 +71,21 @@ const responsibilityImplementationRoutes: RouteComponent[] = [{
           noCache: false,
         }
       },
+      // 安全责任书详情反馈
+      {
+        id: 90004,
+        parentId: 9001,
+        name: 'responsibilityFeedback',
+        path: 'responsibility-feedback',
+        component: '/production-safety/implement-safety-duty/responsibility-feedback',
+        meta: {
+          title: '安全责任书详情反馈',
+          icon: 'OverviewIcon',
+          isRoot: false,
+          hidden: false,
+          noCache: false,
+        }
+      },
       // {
       //   id: 90004,
       //   parentId: 9001,

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

@@ -0,0 +1,331 @@
+<template>
+  <div class="safety-platform-container">
+    <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>
+            <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">
+                        <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>
+          </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.signsUpload" :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>
+          </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">
+                        <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>
+          </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, nextTick, reactive, shallowRef } from 'vue';
+  import dayjs from 'dayjs';
+  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';
+  import RefuseReason from './components/RefuseReason.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 formData = reactive<any>({
+    departmentName: '',
+    createdByName: '',
+    createdAt: '',
+    attachment: [],
+    feedback: [],
+    signsUpload: [],
+    responsibilityName: '',
+    statusName: '',
+    signedQuantity: 0,
+    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) => {
+    if (url) {
+      previewOnlineRef.value?.open(url, type);
+    }
+  };
+
+  const handleUploadSuccess = (fileList) => {
+    formData.attachment = fileList;
+    formRef.value.validateField('attachment');
+  };
+
+  const handleReviewFailedSubmit = (formData) => {
+    reviewFeedBackRef.value.submitLoading = true;
+    safetyResponsibilityAdminApprove({
+      approveType: 0,
+      refuseReason: formData.refuseReason,
+      id: route.query.id,
+    })
+      .then(() => {
+        reviewFeedBackRef.value.dialogHide();
+        ElMessage.success('提交成功');
+      })
+      .finally(() => {
+        reviewFeedBackRef.value.submitLoading = false;
+      });
+  };
+  const handleReviewApproved = () => {
+    submiting.value = true;
+    safetyResponsibilityAdminApprove({
+      approveType: 1,
+      refuseReason: null,
+      id: route.query.id,
+    })
+      .then(() => {
+        ElMessage.success('审核成功');
+        router.push({
+          name: 'responsibilityAgreeManage',
+        });
+      })
+      .finally(() => {
+        submiting.value = false;
+      });
+  };
+
+  const handleQueryDetail = () => {
+    safetyResponsibilityDeptQueryDetail({
+      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);
+    });
+  };
+
+  const handleReviewFailed = () => {
+    reviewFeedBackRef.value.dialogShow();
+  };
+
+  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 *;
+  h4 {
+    margin-bottom: 10px;
+  }
+  .detail-content {
+    display: flex;
+    gap: 30px;
+    margin: 10px 0;
+    font-size: 14px;
+  }
+  .detail-ct {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgb(220, 223, 230);
+    font-size: 14px;
+    margin-bottom: 25px;
+    .row {
+      display: flex;
+
+      border-bottom: 1px solid rgb(220, 223, 230);
+    }
+    .row:last-child {
+      border-bottom: none;
+    }
+    .col {
+      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);
+      }
+
+      .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:nth-child(2) {
+        border-right: 0;
+      }
+    }
+    .col:nth-child(2) .label {
+      border-left: 1px solid rgb(220, 223, 230);
+    }
+  }
+  // :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>