diantou/src_product/iam/audit/work/iam-audit-work.vue

<template>
  <a-layout :class="$style.page">
    <a-layout-header :class="$style.header">
      <span :class="$style.headerTitle" :title="projectName">{{ projectName }}</span>
      <a-menu
        v-if="loadShow"
        mode="horizontal"
        :default-selected-keys="['12']"
        :style="{
          lineHeight: '64px',
          background: 'transparent',
          color: '#FFFFFF',
        }"
        @click="menuClick"
      >
        <!-- <a-menu-item key="1"> 项目作业</a-menu-item> -->
        <!-- <a-menu-item key="2"> 项目管理</a-menu-item>-->
        <a-menu-item key="12"> 项目基本信息</a-menu-item>
        <a-menu-item key="8"> 远程审计</a-menu-item>
        <!-- <a-menu-item key="9"> 审计通知书</a-menu-item> -->
        <a-menu-item key="10"> 审计报告</a-menu-item>
        <a-menu-item v-if="currentUserType.indexOf('04') > -1" key="11"> 项目考评</a-menu-item>
        <a-menu-item key="4"> 项目成员</a-menu-item>
        <a-menu-item v-if="hasLeaderAuthority()" key="5"> 项目变更</a-menu-item>
        <!-- <a-menu-item v-if="hasLeaderAuthority()" key="6"> 项目节点</a-menu-item>
        <a-menu-item key="7"> 项目费用</a-menu-item> -->
      </a-menu>
      <!-- <div>
        <a-icon type="close" :class="$style.closeBtn" @click="close"></a-icon>
      </div> -->
    </a-layout-header>
    <a-layout
      v-if="!iframeTag"
      :style="menuId !== '3' ? 'padding:20px;background: #fff;' : 'background: #fff;'"
      class="sd-has-table"
    >
      <!--      <iframe ref="mainfrm" :class="$style.rightfrm" frameborder="0"></iframe>-->
      <router-view></router-view>
    </a-layout>
    <a-layout v-if="iframeTag" style="padding:20px 20px 20px 0">
      <a-layout-sider
        theme="light"
        width="200"
        :class="[
          fold ? $style.leftSiderHidden : null,
          $style.leftSider,
          { [$style.leftOver]: !fold },
        ]"
        style="padding:0;background: #fff;"
      >
        <div :class="$style.siderContent">
          <div :class="$style.siderTitleDivFirst">
            <div :class="$style.siderTitle">
              <a-icon type="file-done" style="color:#7c7c7c" />
              准备阶段
            </div>
          </div>
          <a-spin :spinning="spinning">
            <a-timeline :class="[spinning ? $style.timeline : '']">
              <div
                v-for="node in preparaNodes"
                :key="node.id"
                :class="[
                  $style.siderUlDiv,
                  { checked: checkedId === node.nodePeriod + '-' + node.id },
                ]"
                @click="setChecked(node.nodePeriod + '-' + node.id, node.nodeUrl, 1)"
              >
                <a-timeline-item :class="$style.siderLi">{{ node.nodeName }}</a-timeline-item>
              </div>
            </a-timeline>
          </a-spin>
        </div>
        <div :class="$style.siderContent">
          <div :class="$style.siderTitleDiv">
            <div :class="$style.siderTitle">
              <a-icon type="profile" style="color:#7c7c7c" />
              实施阶段
              <a-icon
                v-show="projectStage === 1 && showChangeStatus"
                type="swap"
                :class="$style.changeStatus"
                @click="changeStatus('effect')"
              />
            </div>
          </div>
          <a-spin :spinning="spinning">
            <a-timeline :class="[spinning ? $style.timeline : '']">
              <div
                v-for="node in effectNodes"
                :key="node.id"
                :class="[
                  $style.siderUlDiv,
                  { checked: checkedId === node.nodePeriod + '-' + node.id },
                  projectStage < 2 ? $style.nodeReadonly : null,
                ]"
                @click="setChecked(node.nodePeriod + '-' + node.id, node.nodeUrl, 2)"
              >
                <a-timeline-item :class="$style.siderLi">{{ node.nodeName }}</a-timeline-item>
              </div>
            </a-timeline>
          </a-spin>
        </div>
        <div :class="$style.siderContent">
          <div :class="$style.siderTitleDiv">
            <div :class="$style.siderTitle">
              <a-icon type="file-text" style="color:#7c7c7c" />
              报告阶段
              <a-icon
                v-show="projectStage === 2 && showChangeStatus"
                type="swap"
                :class="$style.changeStatus"
                @click="changeStatus('report')"
              />
            </div>
          </div>
          <a-spin :spinning="spinning">
            <a-timeline>
              <div
                v-for="node in reportNodes"
                :key="node.id"
                :class="[
                  $style.siderUlDiv,
                  { checked: checkedId === node.nodePeriod + '-' + node.id },
                  projectStage < 3 ? $style.nodeReadonly : null,
                ]"
                @click="setChecked(node.nodePeriod + '-' + node.id, node.nodeUrl, 3)"
              >
                <a-timeline-item :class="$style.siderLi">{{ node.nodeName }}</a-timeline-item>
              </div>
            </a-timeline>
          </a-spin>
        </div>
      </a-layout-sider>
      <a-layout-sider width="20" style="background: #f0f2f5">
        <a-button type="primary" :class="$style.fold" @click="foldClick">
          <a-icon :type="fold ? 'right' : 'left'" />
        </a-button>
      </a-layout-sider>
      <a-layout style="padding:20px;background: #fff;" class="sd-has-table">
        <!-- <iframe ref="rightfrm" :class="$style.rightfrm" frameborder="0"></iframe> -->
        <router-view name="rightfrm"></router-view>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import { Message } from 'ant-design-vue'
import { getUserInfo } from '@/common/store-mixin'
import axios from '@/common/services/axios-instance'
import axiosll from 'axios'
import { Modal } from '@/common/one-ui'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import components from './_import-components/iam-audit-work-import'

export default {
  name: 'IamAuditWork',
  metaInfo: {
    title: '审计作业',
  },
  components: {
    ...components,
  },
  mixins: [],
  data() {
    return {
      menuId: '',
      fold: false,
      spinning: true, // 左侧节点加载状态
      iframeTag: false, // 左侧节点导航默认隐藏
      projectId: '',
      projectStatus: '',
      checkedId: '', // 默认选中节点id
      preparaNodes: [], // 准备阶段节点
      effectNodes: [], // 实施阶段节点
      reportNodes: [], // 报告阶段节点
      projectStage: 1, // 项目阶段1准备2实施3报告
      projectName: '', // 项目名称,
      currentUserType: [], // 当前登录人所在项目角色
      loadShow: false,
      showChangeStatus: false, // 切换阶段按钮显示
    }
  },
  created() {
    const projectId = this.$route.query.projectId
  },
  mounted() {
    const projectId = this.$route.query.projectId
    if (projectId) {
      this.projectId = projectId
    }
    axios({
      url: `api/xcoa-mobile/v1/iamauditproject/checkProjectIsStart?id=` + projectId,
    }).then((res2) => {
      if (res2.data === false) {
        Modal.warning({
          content: '该项目作业未启动',
          onOk() {
            window.close()
          },
          okText: '确认',
        })
      } else {
        axiosll
          .all([
            axios({
              url: `api/xcoa-mobile/v1/iam-statistics/getCurrUserRead?projectId=` + projectId,
            }),
            axios({
              url: `api/xcoa-mobile/v1/iamauditproject/getProjectInfoById?id=` + projectId,
            }),
          ])
          //   .then((res) => {
          //     console.log(res)
          //   })
          // axios({
          //   url: `api/xcoa-mobile/v1/iam-statistics/getCurrUserRead?projectId=` + projectId,
          // })
          .then((res) => {
            const res0 = res[1]
            const res1 = res[0]
            const readAuthorityCodes = res0.data.readAuthorityCodes
            const hasRead =
              readAuthorityCodes != null && readAuthorityCodes.indexOf(getUserInfo().account) > -1
            if (res1.data === false && !hasRead) {
              Modal.warning({
                content: '您没有查看此项目的权限',
                onOk() {
                  window.close()
                },
                okText: '确认',
              })
            } else {
              axios({
                url: `api/xcoa-mobile/v1/iamauditproject/getProjectInfoById?id=` + projectId,
              }).then((res) => {
                // 如果未启动，则直接关闭
                if (res.data.itemStatus === '06') {
                  Modal.warning({
                    content: '该项目已取消',
                    onOk() {
                      window.close()
                    },
                    okText: '确认',
                  })
                  return
                }
                this.projectName = res.data.projectTitle // 项目名称赋值
                this.projectStatus = res.data.itemStatus // 项目名称赋值
                if (res.data.projectStage === 'profile') {
                  this.projectStage = 2
                } else if (res.data.projectStage === 'file-text') {
                  this.projectStage = 3
                }
                const userList = res.data?.iamProjectUserList
                if (userList) {
                  this.currentUserType = userList.map((item) => {
                    if (item.userAccount === getUserInfo().account) {
                      return item.userType
                    } else {
                      return false
                    }
                  })
                }

                this.loadShow = true
                // 基本信息 gaoyr 20230919 改为默认基本信息
                this.$router.push(
                  '/audit-work/audit-project-detail?record=' +
                    this.projectId +
                    '&projectId=' +
                    this.projectId
                )
              })

              // // 获取当前项目的项目节点信息
              // axios({
              //   url: `api/xcoa-mobile/v1/iamworknode/getPorjectWorkNodeInfo`,
              //   params: {
              //     projectId: projectId,
              //   },
              // }).then((res) => {
              //   // 先将准备、实施、报告阶段进行区分
              //   res.data.forEach((item, index) => {
              //     if (index === 0) {
              //       this.checkedId = item.nodePeriod + '-' + item.id
              //     }
              //     if (item.nodePeriod === 'file-done') {
              //       this.preparaNodes.push(item)
              //     } else if (item.nodePeriod === 'profile') {
              //       this.effectNodes.push(item)
              //     } else if (item.nodePeriod === 'file-text') {
              //       this.reportNodes.push(item)
              //     }
              //   })
              //   this.spinning = !this.spinning

              //   const worktype = this.$route.query.worktype
              //   const nodeurl = this.$route.query.nodeurl
              //   if (worktype && nodeurl) {
              //     this.checkedId = worktype
              //     this.$router.push('/audit-work/' + nodeurl + '?projectId=' + this.projectId)
              //   } else {
              //     this.$router.push(
              //       '/audit-work/' + this.preparaNodes[0].nodeUrl + '?projectId=' + this.projectId
              //     )
              //   }
              // })
              // 获取当前项目组长及副组长
              axios({
                url: `api/xcoa-mobile/v1/page/wp/audit/project/iamAuditProject`,
                params: {
                  id: projectId,
                },
              }).then((res) => {
                // 找到组长及副组长
                const userListJson = res.data.pageFormData.pageFieldInfos.find((item) => {
                  return item.name === 'iamProjectUserList'
                })
                const userList = JSON.parse(userListJson.value)
                userList.forEach((item) => {
                  if ((item.userType === '01') | (item.userType === '05')) {
                    if (item.userAccount === getUserInfo().account) {
                      this.showChangeStatus = true
                    }
                  }
                })
              })
            }
          })
      }
    })
  },
  destroyed() {
    window.removeEventListener('hasLeaderAuthority', this.hasLeaderAuthority)
  },
  methods: {
    // 隐藏左侧节点
    foldClick() {
      this.fold = !this.fold
    },
    // 是否拥有项目组长和项目副组长的权限
    hasLeaderAuthority() {
      if (this.currentUserType.indexOf('01') > -1 || this.currentUserType.indexOf('05') > -1) {
        return true
      }
      return false
    },
    // 切换阶段功能
    changeStatus(status) {
      const _this = this
      const projectId = this.projectId
      let msgText = ''
      let projectStage = ''
      if (status === 'effect') {
        msgText = '是否切换至实施阶段'
        projectStage = 'profile'
      } else {
        msgText = '是否切换至报告阶段'
        projectStage = 'file-text'
      }
      Modal.confirm({
        content: msgText,
        onOk() {
          axios({
            url: `api/xcoa-mobile/v1/iamauditproject/changePorjectPhase?projectId=${projectId}&projectStage=${projectStage}`,
            method: 'post',
          }).then((res) => {
            Message.success('阶段切换成功', 1)
            if (projectStage === 'profile') {
              _this.projectStage = 2
            } else if (projectStage === 'file-text') {
              _this.projectStage = 3
            }
          })
        },
        cancelText: '取消',
        okText: '确认',
        onCancel() {},
      })
    },
    setChecked(val, url, stage) {
      // 如果点击的阶段大于当前阶段，则不能点击
      if (stage > this.projectStage) {
        return
      }
      url = url + '?projectId=' + this.projectId
      this.checkedId = val
      // this.$refs.rightfrm.src = url
      this.$router.push('/audit-work/' + url)
    },
    close() {
      crossWindowWatcher.notifyChange(true)
      window.close()
    },
    menuClick(val) {
      this.menuId = val.key
      if (val.key === '1') {
        // 项目作业
        this.iframeTag = true
        setTimeout(() => {
          // 调整左侧节点选中状态
          this.checkedId = this.preparaNodes[0].nodePeriod + '-' + this.preparaNodes[0].id
          // 修改跳转路由
          this.$router.push(
            '/audit-work/' + this.preparaNodes[0].nodeUrl + '?projectId=' + this.projectId
          )
        }, 0)
      }
      if (val.key === '2') {
        // 项目管理
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-projectmanage-list?projectId=' +
              this.projectId +
              '&currentUserType=' +
              this.currentUserType +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '3') {
        // 项目概况
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-projectoverview-form?projectId=' + this.projectId // 新页面要打开的路由地址
          )
        }, 0)
      }
      if (val.key === '4') {
        // 项目成员
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-projectuser-list?projectId=' +
              this.projectId +
              '&currentUserType=' +
              this.currentUserType +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '5') {
        // 项目变更
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-projectchange-form?projectId=' +
              this.projectId +
              '&projectStatus=' +
              this.projectStatus // 新页面要打开的路由地址
          )
        }, 0)
      }
      if (val.key === '6') {
        // 项目节点
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-projectnode-form?projectId=' +
              this.projectId +
              '&projectStatus=' +
              this.projectStatus // 新页面要打开的路由地址
          )
        }, 0)
      }
      if (val.key === '7') {
        // 项目费用
        this.iframeTag = false
        setTimeout(() => {
          // this.$refs.mainfrm.src = '#/audit-projectcost-list?projectId=' + this.projectId
          this.$router.push(
            '/audit-work/audit-projectcost-list?projectId=' +
              this.projectId +
              '&currentUserType=' +
              this.currentUserType +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '8') {
        // 远程审计
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/xm-audit-preparation-list?projectId=' +
              this.projectId +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '9') {
        // 审计通知书
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/xm-audit-notice-list?projectId=' +
              this.projectId +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '10') {
        // 审计项目成果
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/xm-audit-report-list?projectId=' +
              this.projectId +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '11') {
        // 项目考评
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-projectscore-form?projectId=' +
              this.projectId +
              '&projectStatus=' +
              this.projectStatus
          )
        }, 0)
      }
      if (val.key === '12') {
        // 项目基本信息
        this.iframeTag = false
        setTimeout(() => {
          this.$router.push(
            '/audit-work/audit-project-detail?record=' +
              this.projectId +
              '&projectId=' +
              this.projectId
          )
        }, 0)
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.fold {
  position: absolute;
  top: calc(50% - 30px);
  right: 5px;
  z-index: 2;
  width: 15px;
  height: 75px;
  padding: 0;
  border-radius: 0 10px 10px 0;
}

.audit-table {
  :global(.sd-readonly) {
    margin-bottom: 24px;
  }
}

.close-btn {
  font-size: 15px;
  color: #ffffff;
  position: absolute;
  right: 15px;
  top: 25px;
  cursor: pointer;
}

$link-icon-size: 22px;
$line-height-theme: 66px;
$theme-check: #fff;
$icon-size: 15px;

.page {
  // 表格样式
  :global(div.sd-has-table) {
    :global(.ant-table-wrapper) {
      margin-top: -8px;
    }

    :global(.ant-card-body) {
      padding: 0;

      :global(.ant-table-wrapper) {
        margin-top: -8px;
      }
    }
  }

  :global(.sd-has-table) {
    :global(.ant-table-wrapper) {
      margin-top: -8px;
    }
  }

  height: 100%;

  .left-sider {
    overflow: hidden;
    white-space: nowrap;

    :global(.ant-layout-sider-children) {
      overflow: auto;
    }
  }

  .left-sider-hidden {
    flex: 0 0 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    padding: 0px;
    background: rgb(255, 255, 255);

    :global(.ant-layout-sider-children) {
      overflow: hidden;
    }
  }
  .left-over {
    margin-left: 20px;
  }

  .trigger {
    display: inline-block;
    padding: 0 15px;
    vertical-align: top;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: $text-color-inverse;
    }
  }

  aside {
    overflow: auto;
  }

  :global(.sd-frame-main) {
    height: 100%;
    padding: $padding-lg;
    overflow: auto;
  }

  :global(sd-readonly) {
    margin-bottom: 24px;
  }
  :global(.ant-menu-horizontal) {
    border-bottom: none;
  }
  :global(.header_audit-form-top-banner_product > div) {
    display: none;
  }
}

.title {
  display: inline-block;
  margin-left: -35px;
  font-weight: 600;
  line-height: inherit;
  text-align: center;
  vertical-align: top;

  > i {
    // 固定大小的logo
    /* stylelint-disable-next-line */
    font-size: 20px;
    transform: scale(10);
  }
}

// 主内容区的Card白色背景要占满
:global .sd-frame-main > .ant-card {
  min-height: 100%;
}

.header {
  background: linear-gradient(to right, #254a7f, #1b365d);
  height: 64px;
  line-height: 64px;
  padding: 0 20px 0 20px;

  :global .ant-menu {
    float: right;
  }

  :global(.ant-menu-item-selected) {
    color: #ffffff;
    background: #254a7f;
    border-bottom: 2px solid #ed2c2c !important;
    top: 0;
  }

  :global(.ant-menu-item) {
    // border-bottom: 2px solid #ffffff;
    // border-bottom: 0 !important;
    top: 0;
  }

  :global(.ant-menu-item-active) {
    color: #ffffff !important;
    background: #254a7f !important;
    border-bottom: 0 !important;
    top: 0;
  }

  .header-title {
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    display: inline-block;
    // width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.header > div:last-child {
  width: calc(100% - 200px);
}

.links {
  display: flex;
  align-items: center;
  margin: 0 $link-icon-size / 2;

  li:global(.ant-menu-item) {
    padding: 0;
  }

  i:global(.anticon) {
    padding: 0 $link-icon-size / 2;
    margin: 0;
    font-size: $link-icon-size;
    line-height: $layout-header-height;
    vertical-align: middle;

    &:hover {
      // 悬浮的颜色，与主题无关
      /* stylelint-disable-next-line */
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}

.tools {
  display: flex;
  float: right;
}

.headerbadge {
  bottom: $line-height-theme / 6;
  left: -$link-icon-size / 2 - 5;
}

.sider-content {
  padding: 0 0;

  .sider-title {
    position: relative;
    margin-left: 23px;

    i {
      color: #1890ff;
      position: absolute;
      font-size: 18px;
      left: -27px;
      top: 3px;
    }

    font-weight: bold;
  }

  .sider-li {
    :global(.ant-timeline-item-content) {
      margin: 0 0 0 15px;
    }

    :global(.ant-timeline-item-head-blue) {
      color: #9f9f9f;
      border-color: #9f9f9f;
      background-color: #9f9f9f;
      top: 4px;
      left: 3px;
      width: 3px;
      height: 3px;
    }

    :global(.ant-timeline-item-tail) {
      height: calc(100% - -18px);
      border-left: 2px solid #f5f5f5;
      display: none;
    }
  }

  .sider-title-div-first {
    padding: 10px 0 10px 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e8e8e8;
  }

  .sider-title-div {
    padding: 10px 0 10px 20px;
    margin-bottom: 10px;
    border-top: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
  }

  ul {
    margin-left: 0;
    padding-bottom: 5px;
  }

  .sider-ul-div {
    padding: 13px 0px 0px 12px;
    width: 100%;
    margin: 3px auto;
    border-radius: 0px;
    cursor: pointer;

    :global(.ant-timeline-item) {
      padding: 0;
      margin-left: 3px;
    }
  }

  .node-readonly {
    cursor: normal;
    color: #b6b6b6;
  }

  :global(.checked) {
    background: linear-gradient(to right, #13c2c2, #2db7f5);
    color: #fff;

    :global(.ant-timeline-item-head-blue) {
      background-color: #ffffff;
      border-color: #ffffff !important;
      top: 4px;
      left: 3px;
      width: 3px;
      height: 3px;
    }
  }

  :global(.ant-timeline-item-last .ant-timeline-item-tail) {
    display: none;
  }

  .timeline {
    min-height: 150px;
  }
}

:global(.ant-tabs) {
  overflow-y: auto;
}

.rightfrm {
  height: 100%;
  width: 100%;
}

.change-status {
  margin-left: 150px;
  font-size: 20px !important;
  color: #28baeb !important;
  cursor: pointer;
}
</style>