WorkloadApp/pages/Project/detail.vue

<template>
  <view class="content">
    <view class="title"> 项目详情 </view>
    <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" v-if="currentProject.IndustryInfo">
        <span class="subTitle">行业名称:</span>
        <span class="detailContent">
          {{ currentProject.IndustryInfo.name }}
        </span>
      </view>
      <view class="detail">
        <span class="subTitle">流程:</span>
        <span class="detailContent">{{ currentProject.FlowInfo.name }}</span>
      </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.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 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>

    <uni-card title="操作">
      <view class="editBtns" slot="actions">
        <view class="edit" v-if="canEdit(0)">编辑</view>
        <view class="edit" v-if="canEdit(0)">删除</view>
        <view class="edit" v-if="canEdit(0)">提交审核</view>
        <view class="edit" v-if="canEdit(1)">成员管理</view>
        <view class="edit" v-if="canEdit(2)">转执行</view>
        <view class="edit" v-if="canEdit(3)">转质保</view>
        <view class="edit" v-if="canEdit(3)">转运营</view>
      </view>
    </uni-card>

    <view class="group">
      <button v-if="canAuth()" @click="onHandleAudit(0)" class="commit">
        审核拒绝
      </button>
      <button
        v-if="canAuth()"
        @click="onHandleAudit(1)"
        type="primary"
        class="commit"
      >
        审核通过
      </button>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { queryFlow } from "@/services/project";
export default {
  data() {
    return {
      auth: false,
      status: ["售前", "转执行", "转运营", "转质保"],
      flowList: [],
    };
  },
  computed: {
    ...mapState(["currentProject"]),
    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() {
      let res;
      res = await queryFlow();
      this.flowList = res.data;
    },
    canAuth() {
      return this.auth;
    },
    onHandleAudit(value) {
      if (value) console.log("审核通过");
      else console.log("审核拒绝");
    },
    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("，");
      }
    },
    canEdit(index) {
      const user = uni.getStorageSync("user");
      let {
        audit_status,
        project_status,
        author,
        LeaderId,
        opt_manager_id,
        wty_manager_id,
      } = this.currentProject;
      //audit_status: 0未提审1审核中2审核拒绝3审核通过
      //project_status: 0售前1执行2转运营3转质保
      switch (index) {
        //编辑删除提审
        case 0:
          //售前阶段，未提审/审核被拒，创建人/管理员
          return (
            project_status == 0 &&
            (audit_status == 0 || audit_status == 2) &&
            (user.ID == author || user.IsSuper)
          );
        //成员管理
        case 1:
          //售前/执行/运营/质保，审核通过，项目经理/管理员
          let manager;
          switch (project_status) {
            case 0:
              manager = author;
              break;
            case 1:
              manager = LeaderId;
              break;
            case 2:
              manager = opt_manager_id;
              break;
            case 3:
              manager = wty_manager_id;
              break;
          }
          return audit_status == 3 && (user.ID == manager || user.IsSuper);
        //转执行
        case 2:
          //售前，审核通过，售前经理/管理员
          return (
            project_status == 0 &&
            audit_status == 3 &&
            (user.ID == author || user.IsSuper)
          );
        //转质保运营
        case 3:
          //执行，审核通过，执行经理/管理员
          return (
            project_status == 1 &&
            audit_status == 3 &&
            (user.ID == LeaderId || user.IsSuper)
          );
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.title {
  width: 100%;
  padding: 0 20px 20px 20px;
  font: 24px bold;
}
.list {
  margin: 0 10% 20px 10%;
  width: 100%;
}
.detail {
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  display: flex;
  justify-items: space-between;
  .subTitle {
    width: 30%;
  }
  .detailContent {
    width: 70%;
  }
}
::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;
  }
}
</style>