WorkloadApp/pages/Project/detail.vue

<template>
  <view class="page">
    <view class="content">
      <view class="head"> <view class="title"> 项目详情 </view></view>
      <view class="main">
        <view class="list">
          <view class="detail">
            <span class="subTitle">项目名称:</span>
            <span class="detailContent">{{ currentProject.project_name }}</span>
          </view>
          <view class="detail" v-if="currentProject.TypeInfo">
            <span class="subTitle">项目类别:</span>
            <span class="detailContent">{{
              currentProject.TypeInfo.name
            }}</span>
          </view>
          <view class="detail">
            <span class="subTitle">流程:</span>
            <span class="detailContent">{{
              currentProject.FlowInfo.name
            }}</span>
          </view>
          <view v-if="currentProject.type_id != 7">
            <view class="detail" v-if="currentProject.IndustryInfo">
              <span class="subTitle">行业名称:</span>
              <span class="detailContent">
                {{ currentProject.IndustryInfo.name }}
              </span>
            </view>
            <view class="detail" v-if="currentProject.location">
              <span class="subTitle">项目地区:</span>
              <span class="detailContent">
                {{
                  `${currentProject.location}(${currentProject.location_code})`
                }}
              </span>
            </view>
            <view class="detail" v-if="currentProject.name">
              <span class="subTitle">项目简称:</span>
              <span class="detailContent">{{ currentProject.name }}</span>
            </view>
            <view class="detail" v-if="currentProject.version">
              <span class="subTitle">项目批次:</span>
              <span class="detailContent">{{ currentProject.version }}期</span>
            </view>
          </view>
          <view class="detail">
            <span class="subTitle">状态:</span>
            <span class="detailContent">
              {{ status[currentProject.project_status] }}
            </span>
          </view>
          <view class="detail">
            <span class="subTitle">节点:</span>
            <span class="detailContent">
              {{ `${currentProject.NodeInfo.node}(` }}
              <span v-if="currentProject.audit_status == 0">待提交</span>
              <span
                v-if="currentProject.audit_status == 1"
                :style="{ color: '#1890ff' }"
              >
                审核中
              </span>
              <span
                v-if="currentProject.audit_status == 2"
                :style="{ color: '#f5222d' }"
              >
                审核拒绝
              </span>
              <span
                v-if="currentProject.audit_status == 3"
                :style="{ color: '#a0d911' }"
              >
                审核通过
              </span>
              <span>)</span>
            </span>
          </view>
          <view class="detail" v-if="currentProject.audit_status == 2">
            <span class="subTitle">拒绝原因:</span>
            <span class="detailContent">
              {{ currentProject.audit_comment }}
            </span>
          </view>
          <view class="detail" v-if="currentProject.AuthorUser">
            <span class="subTitle">售前项目经理:</span>
            <span class="detailContent">{{
              currentProject.AuthorUser.CName
            }}</span>
          </view>
          <view class="detail" v-if="currentProject.AuthorDepInfo">
            <span class="subTitle">所属部门:</span>
            <span class="detailContent">
              {{ currentProject.AuthorDepInfo.Name }}
            </span>
          </view>
          <view class="detail">
            <span class="subTitle">项目编号:</span>
            <span class="detailContent">
              {{ currentProject.project_full_code }}
            </span>
          </view>

          <view class="authDetail" :style="authStyle">
            <view class="authTitle">审核详情:</view>
            <view>
              <uni-steps
                :options="nodeList.list"
                :active="nodeList.currentIndex"
                direction="column"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="footer" :style="editStyle" v-show="canEdit">
      <view class="footer_text" @click="showEdit"> 操作 </view>
      <edit
        ref="footer"
        :project="currentProject"
        :user="user"
        :auth="auth"
        :flowList="flowList"
        :depRole="depRole"
        :isDetail="true"
        @canEdit="canEdit = $event"
      />
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { queryFlow, queryUserDetail } from "@/services/project";
import edit from "./edit.vue";
export default {
  components: {
    edit,
  },
  data() {
    return {
      auth: false,
      canEdit: false,
      status: ["售前", "转执行", "转运营", "转质保"],
      flowList: [],
      depRole: [],
      user: {},
      editClick: false,
      editStyle: {
        top: "calc(100vh - 50px)",
      },
      authStyle: {
        "margin-bottom": "60px",
      },
    };
  },
  computed: {
    ...mapState(["currentProject", "depUserTree"]),
    nodeList() {
      if (!this.flowList) return [];
      let flowInfo = this.flowList.find(
        (item) => item.id == this.currentProject.flow_id
      );
      if (!flowInfo) return [];
      let currentIndex = flowInfo.Nodes.findIndex(
        (item) => item.id == this.currentProject.node_id
      );
      return {
        currentIndex,
        list: flowInfo.Nodes.map((item) => ({
          title: item.node,
          desc: `审批人：${this.getAudits(item)}`,
        })),
      };
    },
  },
  onLoad(options) {
    this.auth = Boolean(options.auth);
    this.init();
  },
  methods: {
    async init() {
      this.user = uni.getStorageSync("user");
      let res;
      res = await queryFlow();
      this.flowList = res.data;
      res = await queryUserDetail(this.user);
      let depId = this.user.DepId;
      let dep = res.data.Dep.find((item) => item.ID == depId);
      this.depRole = dep.Role;
    },
    getAudits(nodeInfo) {
      switch (nodeInfo.id) {
        case 11:
          return "执行项目经理";
        case 12:
          return "运营经理";
        case 13:
          return "执行项目经理";
        case 14:
          return "质保经理";
        default:
          return (nodeInfo.NodeAudits || [])
            .map((item) => item.AuthorRoleInfo.Name)
            .join("，");
      }
    },
    showEdit() {
      this.editClick = !this.editClick;
      this.editStyle.top = this.editClick
        ? `calc(100vh - 50px - ${this.$refs.footer.$el.clientHeight}px)`
        : "calc(100vh - 50px)";
      this.authStyle["margin-bottom"] = this.editClick
        ? `calc(60px + ${this.$refs.footer.$el.clientHeight}px)`
        : "60px";
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.main {
  width: 100%;
}
.head {
  width: calc(100% - 60rpx);
  padding: 40rpx;
  position: fixed;
  background: url("~@/static/app-plus/menu-title-bg.png") no-repeat center;
  background-size: 100% 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font: 18px bold;
    color: #fff;
  }
}
.list {
  margin: 0 5%;
  padding-top: 130rpx;
}
.detail {
  width: 100%;
  padding: 20rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-items: space-between;
  .subTitle {
    width: 40%;
  }
  .detailContent {
    text-align: end;
    width: 60%;
  }
}
.authDetail {
  width: 100%;
  font-size: 28rpx;
  transition: margin-bottom 0.5s;
  .authTitle {
    padding: 10rpx 0;
    margin: 10rpx 0;
  }
}
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  transition: top 0.5s;
}
.footer_text {
  text-align: center;
  line-height: 50px;
  color: white;
  display: block;
  font-size: 18px;
  background: #5b78bf;
  flex: 0 0 auto;
}
::v-deep {
  .card-wrapper {
    padding: 10rpx 0;
    background: #fff;
  }
}
</style>