RuoYi-flowable-master/ruoyi-ui/src/views/project/poolDetail.vue

<template>
  <div class="detailWrapper">
    <section class="section1 public-flex">
      <div class="public-margin-r-20">
        <h4>
          投资项目
          <span class="alreadyStop" v-if="detailInfo.delFlag === '1'"
          >已终止</span
          >
        </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
          v-if="
            user.nickName === detailInfo.investHead &&
            detailInfo.delFlag !== '1' &&
            showDueApply &&
            active == 3
          "
          type="primary"
          icon="el-icon-tickets"
          @click="handleTab('4', 'dueDiligenceList')"
          >发起尽调申请</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"
        v-if="detailInfo.projectState != '1'"
      >
        <div class="public-flex-center-column">
          <div>项目公司名称</div>
          <p
            style="width: 250px; text-align: center"
            class="yichu1"
            v-if="
              detailInfo.tProjectCompany &&
              detailInfo.tProjectCompany.companyName
            "
          >
            {{ detailInfo.tProjectCompany.companyName }}
          </p>
        </div>
        <div class="public-flex-center-column">
          <div>渠道</div>
          <p
            v-if="
              detailInfo.tProjectChannel &&
              detailInfo.tProjectChannel.channelName
            "
          >
            {{ detailInfo.tProjectChannel.channelName }}
          </p>
          <p v-else>无</p>
        </div>
        <div class="public-flex-center-column">
          <div>项目负责人</div>
          <p>{{ detailInfo.investHead }}</p>
        </div>
        <div class="public-flex-center-column" v-if="detailInfo.projectDate">
          <div>立项通过日期</div>
          <p>{{ detailInfo.projectDate }}</p>
        </div>
        <div class="public-flex-center-column" v-if="detailInfo.decisionDate">
          <div>投决通过日期</div>
          <p>{{ detailInfo.decisionDate }}</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="9"></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="2"></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'" class="public-padded-20 detail-meeting">
          <el-tabs type="border-card">
            <el-tab-pane label="项目立项申请表">
              <el-form
                v-if="formLXApply.id"
                class="special-el-form public-padded-t-20"
                ref="formLXApply"
                :model="formLXApply"
                label-width="120px"
              >
                <el-form-item
                  label="项目概况"
                  prop="projectOverview"
                  class="special-el-form-item"
                >
                  <el-input
                    rows="4"
                    type="textarea"
                    maxlength="200"
                    v-model="formLXApply.projectOverview"
                    disabled
                  />
                </el-form-item>
                <el-form-item
                  label="项目亮点"
                  prop="projectSparkle"
                  class="special-el-form-item"
                >
                  <el-input
                    rows="4"
                    type="textarea"
                    maxlength="200"
                    v-model="formLXApply.projectSparkle"
                    disabled
                  />
                </el-form-item>
                <el-form-item
                  label="立项资料"
                  prop="listFile"
                  class="special-el-form-item"
                >
                  <fileItem
                    ref="fileItemLXApply"
                    :id="formLXApply.id"
                  ></fileItem>
                </el-form-item>
                <el-form-item
                  label="通知名单"
                  prop="participants"
                  class="special-el-form-item"
                >
                  <el-input
                    rows="4"
                    type="textarea"
                    v-model="formLXApply.participants"
                    disabled
                  />
                </el-form-item>
              </el-form>
              <div
                v-else
                class="public-flex-center public-padded-20"
                style="color: #909399"
              >
                暂无数据
              </div>
            </el-tab-pane>
            <el-tab-pane label="项目立项评估评审汇总表">
              <tableForm
                :formType="2"
                ref="approvalTableForm"
                :readonly="true"
                :showBack="false"
              ></tableForm>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName === '4'">
          <!-- 尽职调查 -->
          <dueDiligenceList
            ref="dueDiligenceLists"
            :projectName="detailInfo.projectName"
            :projectId="id"
            @changeShowDueApply="changeShowDueApply"
          ></dueDiligenceList>
        </div>
        <div v-if="activeName === '5'" class="public-padded-20 detail-meeting">
          <el-tabs type="border-card">
            <el-tab-pane label="项目投决申请表">
              <el-form
                v-if="formTJApply.id"
                class="special-el-form public-padded-t-20"
                ref="formTJApply"
                :model="formTJApply"
                label-width="120px"
              >
                <el-form-item
                  label="股权/其他合作商务条款"
                  prop="provision"
                  class="special-el-form-item"
                >
                  <el-input
                    rows="4"
                    type="textarea"
                    maxlength="200"
                    v-model="formTJApply.provision"
                    disabled
                  />
                </el-form-item>
                <el-form-item
                  label="投决资料"
                  prop="listFile"
                  class="special-el-form-item"
                >
                  <fileItem
                    ref="fileItemTJApply"
                    :id="formTJApply.id"
                  ></fileItem>
                </el-form-item>
                <el-form-item
                  label="通知名单"
                  prop="participants"
                  class="special-el-form-item"
                >
                  <el-input
                    rows="4"
                    type="textarea"
                    v-model="formTJApply.participants"
                    disabled
                  />
                </el-form-item>
              </el-form>
              <div
                v-else
                class="public-flex-center public-padded-20"
                style="color: #909399"
              >
                暂无数据
              </div>
            </el-tab-pane>
            <el-tab-pane label="项目投决评估评审汇总表">
              <tableForm
                :formType="4"
                ref="voteTableForm"
                :readonly="true"
                :showBack="false"
              ></tableForm>
            </el-tab-pane>
          </el-tabs>
        </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'">
          <el-timeline
            :reverse="false"
            class="public-padded-20"
            v-if="investReviewTimeList.length > 0"
          >
            <el-timeline-item
              v-for="(item, index) in investReviewTimeList"
              :key="index"
              :timestamp="item.createTime + ' 发表评估考察意见'"
            >
              {{ item.reviewPerson }}：{{ item.context }}
            </el-timeline-item>
          </el-timeline>
          <div
            v-else
            class="public-flex-center public-padded-20"
            style="color: #909399"
          >
            暂无数据
          </div>
          <!-- 附件 -->
          <!-- <listAllfile :projectId="id"></listAllfile> -->
        </div>
      </section>
    </section>
  </div>
</template>
<script>
import poolForm from "../invest/components/poolForm";
import contractList from "../invest/components/contractList";
import fileList from "../invest/components/fileList";
import followList from "../invest/components/followList";
import meetingList from "../invest/components/meetingList";
import projectList from "../invest/components/projectList";
import tableForm from "../invest/components/tableForm";
import listAllfile from "../invest/components/listAllfile";
import dueDiligenceList from "../invest/components/dueDiligenceList";
import fileItem from "../invest/components/fileItem";

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

import { mapGetters } from "vuex";

export default {
  name: "investPoolDetail",
  components: {
    poolForm,
    contractList,
    fileList,
    followList,
    meetingList,
    projectList,
    tableForm,
    listAllfile,
    dueDiligenceList,
    fileItem,
  },
  data() {
    return {
      showDueApply: false,
      meetingId: "0",
      activeTimeList: [], //活动
      investReviewTimeList: [], //考察评估
      type: "2",
      id: "",
      active: 0,
      detailInfo: {
        projectName: "",
      },
      activeName: "0",
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],

      formLXApply: {
        id: null,
        projectPoolId: null,
        projectName: null,
        projectOverview: null,
        projectSparkle: null,
        listFile: null,
        participants: null,
        participantsId: null,
      },
      formTJApply: {
        id: null,
        projectPoolId: null,
        projectName: null,
        provision: null,
        listFile: null,
        participants: null,
        participantsId: null,
      },
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  created() {
    this.id = this.$route.query.id;
    this.getDetail();
    this.getListProjectPoolId();
    this.getDueList();
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName;
    }
  },
  methods: {
    /** 查询列表 */
    changeShowDueApply(showDueApply) {
      this.showDueApply = showDueApply === "1";
    },
    getDueList() {
      //   this.loading = true;
      let queryParams = {
        orderByColumn: "createTime",
        isAsc: "desc",
        projectPoolId: this.id,
      };
      getInvestigatelist(queryParams).then((response) => {
        let list = response.rows,
          showDueApply;
        // 如果尽调全部完成，才能显示发起尽调；
        if (list && list.length > 0) {
          showDueApply = list.every(function (item) {
            return item.status === "1";
          });
        } else {
          showDueApply = true;
        }
        this.showDueApply = showDueApply;
      });
    },
    // 切换tab并且打开新增
    // handleTab(activeName, name) {
    //   this.activeName = activeName.toString();
    //   this.$store.commit("SET_PROJECTITEMMESSAGE", this.detailInfo);
    //   setTimeout(() => {
    //     this.$refs[name].handleAdd(this.id);
    //   }, 300);
    // },
    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);
          }
        } else {
          if (type === "LX") {
            this.$refs.approvalTableForm.showNodata();
          } else if (type === "TJ") {
            this.$refs.voteTableForm.showNodata();
          }
        }
      });
    },
    handleClick(tab, event) {
      let that = this;
      if (this.activeName === "0") {
        // 活动
        this.getListProjectPoolId();
      } else if (this.activeName === "1") {
        // 项目报备
        this.getDetail();
      } else if (this.activeName === "9") {
        // 考察评估
        this.getListInvestReviewList();
      } else if (this.activeName === "3") {
        // 项目立项
        this.getMettingId("LX");
        this.getlistProjectPoolIdNewApproval();
      } else if (this.activeName === "4") {
        // 尽职背调
        setTimeout(() => {
          this.$refs.dueDiligenceLists.handleShowDetail(this.id);
        }, 300);
      } else if (this.activeName === "5") {
        // 项目投决
        this.getMettingId("TJ");
        this.getlistProjectPoolIdNewDecision();
      }
    },
    // 获取立项申请
    getlistProjectPoolIdNewApproval() {
      let that = this;
      listProjectPoolIdNewApproval(this.id).then((response) => {
        if (response && response.data) {
          that.formLXApply = response.data;
          setTimeout(() => {
            that.$refs.fileItemLXApply.handleButton();
            that.$refs.fileItemLXApply.fileList = [];
            that.$refs.fileItemLXApply.getListFileBusinessId(
              that.formLXApply.id
            );
          }, 300);
        }
      });
    },
    // 获取投决申请
    getlistProjectPoolIdNewDecision() {
      let that = this;
      listProjectPoolIdNewDecision(this.id).then((response) => {
        if (response && response.data) {
          that.formTJApply = response.data;
          setTimeout(() => {
            that.$refs.fileItemTJApply.handleButton();
            that.$refs.fileItemTJApply.fileList = [];
            that.$refs.fileItemTJApply.getListFileBusinessId(
              that.formTJApply.id
            );
          }, 300);
        }
      });
    },
    getDetail() {
      getPool(this.id).then((response) => {
        this.detailInfo = response.data;
        // 项目退出完成n
        if (response.data.projectState === "n") {
          this.active = parseInt(response.data.projectStage);
        } else {
          this.active = parseInt(response.data.projectStage) - 1;
        }
      });
    },

    // 根据项目ID获取项目流转记录---活动
    getListProjectPoolId() {
      listProjectPoolId(this.id).then((response) => {
        this.activeTimeList = response.data;
      });
    },
    // 查询评审记录列表
    getListInvestReviewList() {
      getInvestReviewList(this.id).then((response) => {
        this.investReviewTimeList = response.rows;
      });
    },
  },
};
</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% - 700px);
      width: 100%;
    }
    .btnList {
      width: 700px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .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;
  }
}
.projectNameTit {
}
.alreadyStop {
  font-weight: normal;
  font-size: 12px;
  background: #ff0000;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  margin-left: 10px;
}

</style>