RuoYi-flowable-master/ruoyi-ui/src/views/invest/pool/detail.vue

<template>
  <div class="detailWrapper">
    <section class="section1 public-flex-col-end">
      <div class="public-margin-r-20">
        <h4>投资项目</h4>
        <p class="projectNameTit">{{ detailInfo.projectName }}</p>
      </div>
      <div class="btnList">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          @click="handleTab('7', 'fileList')"
          >上传文件资料</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload2"
          @click="handleTab('8', 'contractList')"
          >上传合同</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleTab('2', 'followList')"
          >新增跟进记录</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleTab('6', 'meetingList')"
          >新增会议</el-button
        >
      </div>
    </section>
    <el-divider></el-divider>
    <section>
      <!-- :space="200" -->
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        style="margin-left: -60px"
      >
        <el-step title="项目报备"></el-step>
        <el-step title="评估考察"></el-step>
        <el-step title="项目立项"></el-step>
        <el-step title="尽调背调"></el-step>
        <el-step title="项目投决"></el-step>
        <el-step title="签约"></el-step>
        <el-step title="投后"></el-step>
      </el-steps>
      <el-divider></el-divider>
      <div class="public-flex-between basicsInfo">
        <div class="public-flex-center-column">
          <div>项目公司名称</div>
          <p>{{ detailInfo.projectName }}</p>
        </div>
        <div class="public-flex-center-column">
          <div>渠道</div>
          <p
            v-if="
              detailInfo.tProjectChannel &&
              detailInfo.tProjectChannel.channelName
            "
          >
            {{ detailInfo.tProjectChannel.channelName }}
          </p>
        </div>
        <div class="public-flex-center-column">
          <div>投资负责人</div>
          <p>{{ detailInfo.investHead }}</p>
        </div>
        <div class="public-flex-center-column">
          <div>投前估值（万元）</div>
          <p>{{ detailInfo.investValuation }}</p>
        </div>
        <div class="public-flex-center-column">
          <div>预计投资金额（万元）</div>
          <p>{{ detailInfo.investMoney }}</p>
        </div>
      </div>
    </section>
    <section class="section3">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="活动" name="0"></el-tab-pane>
        <el-tab-pane label="详细信息" name="1"></el-tab-pane>
        <el-tab-pane label="跟进记录" name="2"></el-tab-pane>
        <el-tab-pane label="立项汇总表" name="3"></el-tab-pane>
        <el-tab-pane label="尽调报告" name="4"></el-tab-pane>
        <el-tab-pane label="投决汇总表" name="5"></el-tab-pane>
        <el-tab-pane label="会议记录" name="6"></el-tab-pane>
        <el-tab-pane label="文件资料" name="7"></el-tab-pane>
        <el-tab-pane label="合同" name="8"></el-tab-pane>
        <el-tab-pane label="附件" name="9"></el-tab-pane>
      </el-tabs>
      <section>
        <div v-if="activeName === '0'">
          <el-timeline :reverse="false" class="public-padded-20">
            <el-timeline-item
              v-for="(activity, index) in activeTimeList"
              :key="index"
              :timestamp="activity.createTime"
            >
              {{ activity.createBy }}：{{ activity.stageName }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-show="activeName === '1'">
          <poolForm :type="type" :id="id"></poolForm>
        </div>
        <div v-if="activeName === '2'">
          <followList :type="'2'" ref="followList" :projectId="id"></followList>
        </div>
        <div v-if="activeName === '3'">
          <tableForm
            :formType="2"
            ref="approvalTableForm"
            :readonly="true"
          ></tableForm>
        </div>
        <div v-if="activeName === '4'">
          <!-- 尽职调查 -->
          <!-- <projectList
            :type="'2'"
            :stage="'4'"
            ref="projectList"
            :projectId="id"
          ></projectList> -->
          <!-- /:projectName="detailInfo.projectName" -->
          <dueDiligenceList
            :type="1"
            ref="dueDiligenceLists"
            :projectId="id"
          ></dueDiligenceList>
        </div>
        <div v-if="activeName === '5'">
          <tableForm
            :formType="4"
            ref="voteTableForm"
            :readonly="true"
          ></tableForm>
        </div>
        <div v-if="activeName === '6'">
          <meetingList
            :type="'2'"
            ref="meetingList"
            :projectId="id"
          ></meetingList>
        </div>
        <div v-if="activeName === '7'">
          <fileList :type="'2'" ref="fileList" :projectId="id"></fileList>
        </div>
        <div v-if="activeName === '8'">
          <contractList
            :type="'2'"
            ref="contractList"
            :projectId="id"
          ></contractList>
        </div>
        <div v-if="activeName === '9'">
          <listAllfile :projectId="id"></listAllfile>
        </div>
      </section>
    </section>
  </div>
</template>
<script>
import poolForm from "../components/poolForm";
import contractList from "../components/contractList";
import fileList from "../components/fileList";
import followList from "../components/followList";
import meetingList from "../components/meetingList";
import projectList from "../components/projectList";
import tableForm from "../components/tableForm";
import listAllfile from "../components/listAllfile";
import dueDiligenceList from "../components/dueDiligenceList";

import { getPool, listProjectPoolId } from "@/api/invest/pool";
import { listMeeting } from "@/api/invest/meeting";

export default {
  name: "investPoolDetail",
  components: {
    poolForm,
    contractList,
    fileList,
    followList,
    meetingList,
    projectList,
    tableForm,
    listAllfile,
    dueDiligenceList,
  },
  data() {
    return {
      meetingId: "0",
      activeTimeList: [],
      type: "2",
      id: "",
      active: 0,
      detailInfo: {},
      activeName: "0",
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getDetail();
    this.getListProjectPoolId();
  },
  methods: {
    // 切换tab并且打开新增
    handleTab(activeName, name) {
      this.activeName = activeName.toString();
      this.$store.commit("SET_PROJECTITEMMESSAGE", this.detailInfo);
      this.$refs[name].handleAdd(this.id);
    },
    getMettingId(type) {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        meetingType: type,
        orderByColumn: "createTime",
        isAsc: "desc",
        projectPoolId: this.id,
      };
      listMeeting(queryParams).then((response) => {
        let meetingList = response.rows;
        if (meetingList.length > 0) {
          let meetingId = meetingList[0].id;
          if (type === "LX") {
            this.$refs.approvalTableForm.initialize(meetingId);
          } else if (type === "TJ") {
            this.$refs.voteTableForm.initialize(meetingId);
          }
        }
      });
    },
    handleClick(tab, event) {
      if (this.activeName === "0") {
        this.getListProjectPoolId();
      } else if (this.activeName === "1") {
        this.getDetail();
      } else if (this.activeName === "3") {
        this.getMettingId("LX");
      } else if (this.activeName === "4") {
        setTimeout(() => {
          this.$refs.dueDiligenceLists.getProjectName(
            this.detailInfo.projectName
          );
        }, 300);
      } else if (this.activeName === "5") {
        this.getMettingId("TJ");
      }
    },
    getDetail() {
      getPool(this.id).then((response) => {
        this.detailInfo = response.data;
        this.active = parseInt(response.data.projectStage) - 1;
      });
    },

    // 根据项目ID获取项目流转记录
    getListProjectPoolId() {
      listProjectPoolId(this.id).then((response) => {
        this.activeTimeList = response.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.detailWrapper {
  padding: 20px 0;
  width: 92%;
  margin: 0 auto;
  .section1 {
    p {
      font-size: 24px;
      font-weight: bold;
      margin: 0;
    }
    > div:first-child {
      width: calc(100% - 600px);
    }
    .btnList {
      width: 600px;
    }
  }
  .basicsInfo {
    font-size: 14px;
    background: #f1f1f1;
    margin-top: -24px;
    width: 100%;
    padding: 30px 20px 10px;
    div {
      color: #7e7d7d;
    }
    p {
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
  }
  .section3 {
    margin-top: 40px;
  }
}
</style>