WorkloadApp/pages/Project/detail.vue

<template>
  <view class="content">
    <view class="title"> 项目详情 </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>

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

      <edit
        :project="currentProject"
        :user="user"
        :auth="auth"
        :flowList="flowList"
        :depRole="depRole"
        :isDetail="true"
      />
    </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,
      status: ["售前", "转执行", "转运营", "转质保"],
      flowList: [],
      depRole: [],
      user: {},
    };
  },
  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("，");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.main {
  width: 100%;
  padding-bottom: 60px;
}
.title {
  width: 100%;
  padding: 0 20px 20px 20px;
  font: 24px bold;
}
.list {
  margin: 0 10% 20px 10%;
}
.detail {
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  display: flex;
  justify-items: space-between;
  .subTitle {
    width: 40%;
  }
  .detailContent {
    width: 60%;
  }
}
.select {
  width: 100%;
  height: 72rpx;
  line-height: 70rpx;
  border: 1px solid #666;
  padding-left: 20rpx;
}
::v-deep {
  .uni-steps__column-title {
    font-size: 18px;
    line-height: 24px;
  }
  .uni-steps__column-desc {
    font-size: 14px;
    line-height: 18px;
  }
}

.editBtns {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 5%;
  .edit {
    width: 30%;
    margin-bottom: 20px;
    font-size: 16px;
    text-align: center;
  }
}

.group {
  width: 100%;
  display: flex;
  position: fixed;
  flex-wrap: wrap;
  justify-content: flex-start;
  bottom: 0;
  left: 0;
  .commit {
    width: 50%;
    border-radius: 0;
    margin: inherit;
  }
}

.depSelect {
  width: 200px;
}
</style>