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="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";
export default {
  data() {
    return {
      auth: false,
      status: ["售前", "转执行", "转运营", "转质保"],
    };
  },
  computed: {
    ...mapState(["currentProject"]),
  },
  onLoad(options) {
    this.auth = Boolean(options.auth);
  },
  methods: {
    canAuth() {
      return this.auth;
    },
    onHandleAudit(value) {
      if (value) console.log("审核通过");
      else console.log("审核拒绝");
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}
.title {
  width: 100%;
  padding: 0 20px 20px 20px;
  background: #f8f8f8;
  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%;
  }
}

.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>