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

<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-tabs>
    </header>
    <main class="safety-platform-container__main">
      <div class="search-form">
        <el-form :inline="true">
          <el-form-item label="安全责任书">
            <el-input
              v-model="queryParams.queryParam.responsibilityName"
              placeholder="搜索安全责任书名称"
              style="width: 170px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
              <el-option :value="1" label="未下发" />
              <el-option :value="2" label="待签署" />
              <el-option :value="3" label="待反馈材料" />
              <el-option :value="4" label="待审核" />
              <el-option :value="5" label="已完成" />
              <el-option :value="6" label="已作废" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="activeTab" label="类别名称">
            <el-select
              v-model="queryParams.queryParam.departmentName"
              clearable
              placeholder="类别名称"
              style="width: 170px"
            >
              <el-option value="院领导">院领导</el-option>
              <el-option value="所/中心/职能部门/直属研究部/分公司">所/中心/职能部门/直属研究部/分公司</el-option>
              <el-option value="所/中心级部门">所/中心级部门</el-option>
              <el-option value="科室">科室</el-option>
              <el-option value="员工">员工</el-option>
              <el-option value="常驻供应商">常驻供应商</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划日期">
            <el-date-picker
              v-model="queryParams.queryParam.date"
              clearable
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 230px"
            />
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="handleSafetyResponsibilityAdminqueryPage">查询</el-button>
          <el-button @click="handleRestParams">重置</el-button>
        </div>
      </div>

      <div class="button-content">
        <el-button
          type="primary"
          @click="
            $router.push({
              name: 'createResponsibilityAgree',
            })
          "
          >添加</el-button
        >
      </div>
      <div class="table-content">
        <el-table :data="tableData.data">
          <el-table-column fixed="left" type="selection" width="60" />
          <el-table-column label="责任书名称" prop="responsibilityName" width="180" />
          <el-table-column label="状态" prop="statusName" width="100" />
          <el-table-column label="类别名称" prop="departmentName" width="180" />
          <el-table-column label="分组名称" prop="userGroupName" width="150" />
          <el-table-column label="计划结束时间" prop="planEndTime" width="150" />
          <el-table-column fixed="right" min-width="300" label="操作">
            <template #default="scope">
              <el-button
                v-if="scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 3"
                type="primary"
                link
                @click="
                  $router.push({
                    name: 'editResponsibilityAgree',
                    query: {
                      id: scope.row.id,
                    },
                  })
                "
              >
                编辑
              </el-button>

              <el-popconfirm
                v-if="scope.row.status === 1 || scope.row.status === 6"
                title="确定要删除吗?"
                @confirm="handleConfirmDeleteRow(scope)"
              >
                <template #reference>
                  <el-button type="primary" link>删除</el-button>
                </template>
              </el-popconfirm>
              <el-button
                v-if="
                  scope.row.status === 1 || scope.row.status === 2 || scope.row.status === 3 || scope.row.status === 4
                "
                type="primary"
                link
                >下发
              </el-button>
              <el-button v-if="scope.row.status === 4" type="primary" link>作废</el-button>
              <el-button type="primary" link>下发对象</el-button>

              <el-button type="primary" link @click="handleDownloadLink(scope)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-content">
        <el-pagination
          :current-page="queryParams.pageNumber"
          :page-size="queryParams.pageSize"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, reactive } from 'vue';
  import dayjs from 'dayjs';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import {
    safetyResponsibilityAdminqueryPage,
    safetyResponsibilityAdminDelete,
  } from '@/api/production-safety/responsibility-implementation';
  const router = useRouter();
  const activeTab = ref('');
  const queryParams = reactive<any>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {
      responsibilityName: '',
      departmentName: '',
      status: '',
      date: '',
      responsibilityPersonId: '',
    },
  });

  const tableData = reactive({
    data: [],
    total: 0,
  });
  const handleSizeChange = () => {};
  const handleCurrentChange = () => {};
  const handleDownloadLink = (scope) => {
    window.location.href = scope.row.attachment;
  };
  const handleConfirmDeleteRow = (scope) => {
    safetyResponsibilityAdminDelete({
      id: scope.row.id,
    }).then(() => {
      ElMessage.success('删除成功!');
    });
  };
  const handleSafetyResponsibilityAdminqueryPage = () => {
    safetyResponsibilityAdminqueryPage({
      ...queryParams,
      queryParam: {
        ...queryParams.queryParam,
        startTime: queryParams.queryParam.date?.[0]
          ? dayjs(queryParams.queryParam.date?.[0]).format('YYYY-MM-DD')
          : undefined,
        endTime: queryParams.queryParam.date?.[1]
          ? dayjs(queryParams.queryParam.date?.[1]).format('YYYY-MM-DD')
          : undefined,
      },
    }).then((res) => {
      tableData.data = res.records;
      tableData.total = res.totalPage;
    });
  };
  const handleRestParams = () => {
    Object.assign(queryParams, {
      pageNumber: 1,
      pageSize: 10,
      queryParam: {
        responsibilityName: '',
        departmentName: '',
        status: '',
        date: '',
        responsibilityPersonId: '',
      },
    });
    handleSafetyResponsibilityAdminqueryPage();
  };

  onMounted(() => {
    handleSafetyResponsibilityAdminqueryPage();
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  .safety-platform-container__header {
    padding-bottom: 0 !important;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px !important;
  }
  :deep(.flexContent) {
    display: flex;
  }
  :deep(.breadcrumb .title) {
    margin-left: 0;
  }
  :deep(.el-form) {
    flex: 1;
  }
  :deep(main) {
    display: flex;
    flex-direction: column;
  }
  .search-form {
    min-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: self-end;
  }

  .button-content {
    margin-bottom: 20px;
  }
  .table-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
  .page-content {
    display: flex;
    justify-content: flex-end;
  }
</style>