前端-投资

ruoyi-ui/src/assets/styles/public.scss

@@ -73,6 +73,10 @@
   align-items: center;
   justify-content: flex-end;
 }
+.public-flex-col-end {
+  display: flex;
+  align-items: flex-end;
+}
 
 .public-flex-column {
   display: flex;

ruoyi-ui/src/router/index.js

@@ -75,44 +75,50 @@ export const constantRoutes = [
     children: [
       {
         path: 'pool/index',
-        component: () => import('@/views/invest/pool/index.vue'),
+        component: () => import('@/views/invest/pool/index'),
         name: 'investPoolIndex',
       },
       {
         path: "pool/add",
         name: 'investPoolAdd',
-        component: () => import('@/views/invest/pool/add.vue'),
+        component: () => import('@/views/invest/pool/add'),
         meta: { title: '项目' }
       },
+      {
+        path: 'pool/detail',
+        component: () => import('@/views/invest/pool/detail'),
+        name: 'investPoolDetail',
+        meta: { title: '项目详情' }
+      },
       {
         path: "record/index",
         name: 'investRecordIndex',
-        component: () => import('@/views/invest/record/index.vue')
+        component: () => import('@/views/invest/record/index')
       },
       {
         path: "channel/index",
         name: 'investChannelIndex',
-        component: () => import('@/views/invest/channel/index.vue')
+        component: () => import('@/views/invest/channel/index')
       },
       {
         path: "contacts/index",
         name: 'investContactsIndex',
-        component: () => import('@/views/invest/contacts/index.vue')
+        component: () => import('@/views/invest/contacts/index')
       },
       {
         path: "company/index",
         name: 'investCompanyctsIndex',
-        component: () => import('@/views/invest/company/index.vue')
+        component: () => import('@/views/invest/company/index')
       },
       {
         path: "meeting/index",
         name: 'investMeetingmpanyctsIndex',
-        component: () => import('@/views/invest/meeting/index.vue')
+        component: () => import('@/views/invest/meeting/index')
       },
       {
         path: "meeting/mark",
         name: 'investMeetingmpanyctsMark',
-        component: () => import('@/views/invest/meeting/mark.vue'),
+        component: () => import('@/views/invest/meeting/mark'),
         meta: { title: '会议' }
       },
       {

ruoyi-ui/src/views/invest/components/poolForm.vue

@@ -0,0 +1,537 @@
+<template>
+  <div :class="type === '2' ? 'poolAdd poolDetail' : 'poolAdd'">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="type === '2' ? rules1 : rules"
+      label-width="140px"
+    >
+      <h3>项目基础信息</h3>
+      <el-divider></el-divider>
+      <el-form-item label="项目名称" prop="porjectName">
+        <el-input v-model="form.porjectName" placeholder="请输入项目名称" />
+      </el-form-item>
+      <el-form-item label="渠道" prop="channel">
+        <el-input v-model="form.channel" placeholder="请输入渠道" />
+      </el-form-item>
+      <el-form-item label="初次接触日期" prop="contactDate">
+        <el-date-picker
+          clearable
+          v-model="form.contactDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择初次接触日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="所属组别" prop="porjectGroup">
+        <el-select v-model="form.porjectGroup" placeholder="请选择所属组别">
+          <el-option
+            v-for="dict in dict.type.porject_group"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属行业" prop="industryGroup">
+        <el-select v-model="form.industryGroup" placeholder="请选择所属行业">
+          <el-option
+            v-for="dict in dict.type.porject_group"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="投资负责人" prop="investHead">
+        <el-input v-model="form.investHead" placeholder="请输入投资负责人" />
+      </el-form-item>
+
+      <el-form-item
+        label="项目情况描述"
+        prop="description"
+        class="special-el-form-item"
+      >
+        <el-input
+          rows="4"
+          type="textarea"
+          v-model="form.description"
+          placeholder="请输入项目情况描述"
+        />
+      </el-form-item>
+      <h3>项目公司信息</h3>
+      <el-divider></el-divider>
+      <el-form-item label="公司名称" prop="companyName">
+        <el-input v-model="form.companyName" placeholder="请输入公司名称" />
+      </el-form-item>
+      <el-form-item label="统一社会信用代码" prop="companyCode">
+        <el-input
+          v-model="form.companyCode"
+          placeholder="请输入企业统一社会信用代码"
+        />
+      </el-form-item>
+      <el-form-item label="营业开始时间" prop="startTime">
+        <el-date-picker
+          clearable
+          v-model="form.startTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择营业开始时间"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="营业结束时间" prop="endTime">
+        <el-date-picker
+          clearable
+          v-model="form.endTime"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择营业结束时间"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="注册资本" prop="registeredCapital">
+        <el-input
+          v-model="form.registeredCapital"
+          placeholder="请输入注册资本"
+        />
+      </el-form-item>
+      <el-form-item label="注册地址" prop="registeredAddress">
+        <el-input
+          v-model="form.registeredAddress"
+          placeholder="请输入注册地址"
+        />
+      </el-form-item>
+      <el-form-item label="实缴资本" prop="paidCapital">
+        <el-input v-model="form.paidCapital" placeholder="请输入实缴资本" />
+      </el-form-item>
+      <el-form-item label="办公地址" prop="businessAddress">
+        <el-input v-model="form.businessAddress" placeholder="请输入办公地址" />
+      </el-form-item>
+      <el-form-item label="实控人" prop="actualBod">
+        <el-input v-model="form.actualBod" placeholder="请输入实控人" />
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入联系电话" />
+      </el-form-item>
+      <el-form-item label="所属类型" prop="type">
+        <el-input v-model="form.type" placeholder="请输入所属类型" />
+      </el-form-item>
+      <el-form-item label="附件" prop="file">
+        <el-upload
+          class="upload-demo"
+          action=""
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          :before-remove="beforeRemove"
+          multiple
+          :file-list="fileList"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+        </el-upload>
+      </el-form-item>
+      <h3>项目公司联系人信息</h3>
+      <el-divider></el-divider>
+      <el-form-item label="联系人姓名" prop="name">
+        <el-input v-model="form.name" placeholder="请输入联系人姓名" />
+      </el-form-item>
+      <el-form-item label="职位" prop="position">
+        <el-input v-model="form.position" placeholder="请输入职位" />
+      </el-form-item>
+      <el-form-item label="联系电话/微信" prop="contact">
+        <el-input v-model="form.contact" placeholder="请输入联系电话/微信" />
+      </el-form-item>
+      <h3>项目融资信息</h3>
+      <el-divider></el-divider>
+      <el-form-item label="项目融资阶段" prop="financingStage">
+        <el-input
+          v-model="form.financingStage"
+          placeholder="请输入项目融资阶段"
+        />
+      </el-form-item>
+      <el-form-item label="预期融资金额(万元)" prop="financingMoney">
+        <el-input
+          v-model="form.financingMoney"
+          placeholder="请输入预期融资金额"
+        />
+      </el-form-item>
+      <el-form-item label="投前估值(万元)" prop="investValuation">
+        <el-input v-model="form.investValuation" placeholder="请输入投前估值" />
+      </el-form-item>
+      <el-form-item label="预计投资金额(万元)" prop="investMoney">
+        <el-input v-model="form.investMoney" placeholder="请输入预计投资金额" />
+      </el-form-item>
+      <el-form-item label="投资价值" prop="investWorth">
+        <el-input v-model="form.investWorth" placeholder="请输入投资价值" />
+      </el-form-item>
+      <el-form-item
+        label="历史融资"
+        prop="previousFinancing"
+        class="special-el-form-item"
+      >
+        <el-input
+          rows="4"
+          type="textarea"
+          v-model="form.previousFinancing"
+          placeholder="请输入历史融资"
+        />
+      </el-form-item>
+      <el-form-item
+        label="融资条件"
+        prop="financingCondition"
+        class="special-el-form-item"
+      >
+        <el-input
+          rows="4"
+          type="textarea"
+          v-model="form.financingCondition"
+          placeholder="请输入融资条件"
+        />
+      </el-form-item>
+      <el-form-item
+        label="投资亮点"
+        prop="investSparkle"
+        class="special-el-form-item"
+      >
+        <el-input
+          rows="4"
+          type="textarea"
+          v-model="form.investSparkle"
+          placeholder="请输入投资亮点"
+        />
+      </el-form-item>
+
+      <el-form-item
+        label="股权架构"
+        prop="shareholding"
+        class="special-el-form-item"
+      >
+        <el-input
+          rows="4"
+          type="textarea"
+          v-model="form.shareholding"
+          placeholder="请输入股权架构"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="mark" class="special-el-form-item">
+        <el-input
+          :readonly="type === '2' ? true : false"
+          rows="4"
+          type="textarea"
+          v-model="form.mark"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+      <el-form-item class="btnList" v-if="type === '1'">
+        <el-button @click="goBack">返 回</el-button>
+        <el-button type="primary" @click="submitForm">提 交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import {
+  listPool,
+  getPool,
+  delPool,
+  addPool,
+  updatePool,
+} from "@/api/invest/pool";
+
+export default {
+  props: {
+    id: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "1", //1可编辑  2不可编辑
+    },
+  },
+  dicts: ["porject_group"],
+  data() {
+    return {
+      title: "新增项目",
+      fileList: [],
+      // 表单参数
+      form: {
+        id: null,
+        porjectName: null,
+        porjectGroup: null,
+        recordDate: null,
+        porjectCode: null,
+        channel: null,
+        contactDate: null,
+        projectDate: null,
+        decisionDate: null,
+        industry: null,
+        companyName: null,
+        companyCode: null,
+        startTime: null,
+        endTime: null,
+        registeredCapital: null,
+        registeredAddress: null,
+        paidCapital: null,
+
+        name: null,
+        position: null,
+        contact: null,
+
+        businessAddress: null,
+        actualBod: null,
+        description: null,
+        projectContacts: null,
+        investHead: null,
+        previousFinancing: null,
+        financingStage: null,
+        financingCondition: null,
+        financingMoney: null,
+        financingDate: null,
+        investSparkle: null,
+        investValuation: null,
+        investMoney: null,
+        investType: null,
+        investPloy: null,
+        investWorth: null,
+        shareholding: null,
+        projectStage: null,
+        projectState: null,
+        mark: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+      },
+      // 表单校验
+      rules1: {},
+      rules: {
+        porjectName: [{ required: true, trigger: "blur", message: "请输入" }],
+        channel: [{ required: true, trigger: "blur", message: "请输入" }],
+        contactDate: [{ required: true, trigger: "blur", message: "请输入" }],
+        porjectGroup: [
+          { required: true, trigger: "change", message: "请选择" },
+        ],
+        industryGroup: [
+          { required: true, trigger: "change", message: "请选择" },
+        ],
+        investHead: [{ required: true, trigger: "blur", message: "请输入" }],
+        // description: [{ required: true, trigger: "blur", message: "请输入" }],
+        companyName: [{ required: true, trigger: "blur", message: "请输入" }],
+        companyCode: [{ required: true, trigger: "blur", message: "请输入" }],
+        startTime: [{ required: true, trigger: "blur", message: "请选择" }],
+        endTime: [{ required: true, trigger: "blur", message: "请选择" }],
+        registeredCapital: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        registeredAddress: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        paidCapital: [{ required: true, trigger: "blur", message: "请输入" }],
+        businessAddress: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        actualBod: [{ required: true, trigger: "blur", message: "请输入" }],
+        phone: [
+          { required: true, trigger: "blur", message: "请输入手机号" },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: "请输入正确的手机号",
+            trigger: "blur",
+          },
+        ],
+        type: [{ required: true, trigger: "blur", message: "请输入" }],
+        // file: [{ required: true, trigger: "blur", message: "请输入" }],
+        name: [{ required: true, trigger: "blur", message: "请输入" }],
+        position: [{ required: true, trigger: "blur", message: "请输入" }],
+        contact: [{ required: true, trigger: "blur", message: "请输入" }],
+        financingStage: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        financingMoney: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        investValuation: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        investMoney: [{ required: true, trigger: "blur", message: "请输入" }],
+        investWorth: [{ required: true, trigger: "blur", message: "请输入" }],
+        // previousFinancing: [{ required: true, trigger: "blur", message: "请输入" }],
+        financingCondition: [
+          { required: true, trigger: "blur", message: "请输入" },
+        ],
+        investSparkle: [{ required: true, trigger: "blur", message: "请输入" }],
+        shareholding: [{ required: true, trigger: "blur", message: "请输入" }],
+        // mark: [{ required: true, trigger: "blur", message: "请输入" }]
+      },
+    };
+  },
+  mounted() {
+    console.log("------mounted------");
+    if (this.id) {
+      this.getPoolDetail(this.id);
+    } else {
+      this.reset();
+    }
+  },
+  methods: {
+    getPoolDetail(id) {
+      getPool(id).then((response) => {
+        this.form = response.data;
+      });
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    /** 提交按钮 */
+    submitForm() {
+      let that = this;
+      this.$refs["form"].validate((valid, rules) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updatePool(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPool(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              setTimeout(() => {
+                that.goBack();
+              }, 1500);
+              // this.open = false;
+              // this.getList();
+            });
+          }
+        } else {
+          for (var ruleName in rules) {
+            let _rule = rules[ruleName];
+            let message = _rule[0].message;
+            this.$message.warning(message, 1);
+            break;
+          }
+          //验证不通过回滚到不通过的第一个位置
+          this.$nextTick(() => {
+            let isError = document.getElementsByClassName("is-error");
+            isError[0].scrollIntoView({
+              block: "center",
+              behavior: "smooth",
+            });
+          });
+        }
+      });
+    },
+    goBack() {
+      this.$router.go(-1);
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        porjectName: null,
+        porjectGroup: null,
+        recordDate: null,
+        porjectCode: null,
+        channel: null,
+        contactDate: null,
+        projectDate: null,
+        decisionDate: null,
+        industry: null,
+        companyName: null,
+        companyCode: null,
+        startTime: null,
+        endTime: null,
+        registeredCapital: null,
+        registeredAddress: null,
+        paidCapital: null,
+
+        name: null,
+        position: null,
+        contact: null,
+
+        businessAddress: null,
+        actualBod: null,
+        description: null,
+        projectContacts: null,
+        investHead: null,
+        previousFinancing: null,
+        financingStage: null,
+        financingCondition: null,
+        financingMoney: null,
+        financingDate: null,
+        investSparkle: null,
+        investValuation: null,
+        investMoney: null,
+        investType: null,
+        investPloy: null,
+        investWorth: null,
+        shareholding: null,
+        projectStage: null,
+        projectState: null,
+        mark: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+      };
+      this.resetForm("form");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.poolAdd {
+  h2 {
+    margin-left: 30px;
+  }
+  .el-form {
+    margin-left: 30px;
+    display: flex;
+    flex-flow: wrap;
+    width: 95%;
+    h3 {
+      width: 100%;
+      margin-bottom: -10px;
+      font-weight: bold;
+    }
+    .el-form-item {
+      width: 50%;
+    }
+    .special-el-form-item {
+      width: 100% !important;
+    }
+    .el-date-editor.el-input,
+    .el-select {
+      width: 100%;
+    }
+    .btnList {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding-bottom: 40px;
+    }
+  }
+}
+.poolDetail {
+  position: relative;
+  cursor: not-allowed;
+}
+.poolDetail::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 120%;
+}
+</style>

ruoyi-ui/src/views/invest/pool/add.vue

@@ -1,154 +1,48 @@
 <template>
-  <div>
-    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-      <el-form-item label="项目名称" prop="porjectName">
-        <el-input v-model="form.porjectName" placeholder="请输入项目名称" />
-      </el-form-item>
-      <el-form-item label="所属组别" prop="porjectGroup">
-        <el-select v-model="form.porjectGroup" placeholder="请选择所属组别">
-          <el-option
-            v-for="dict in dict.type.porject_group"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="录入日期" prop="recordDate">
-        <el-date-picker
-          clearable
-          v-model="form.recordDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择录入日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="项目编号" prop="porjectCode">
-        <el-input v-model="form.porjectCode" placeholder="请输入项目编号" />
-      </el-form-item>
-      <el-form-item label="渠道" prop="channel">
-        <el-input v-model="form.channel" placeholder="请输入渠道" />
-      </el-form-item>
-      <el-form-item label="初次接触日期" prop="contactDate">
-        <el-date-picker
-          clearable
-          v-model="form.contactDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择初次接触日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="立项通过日期" prop="projectDate">
-        <el-date-picker
-          clearable
-          v-model="form.projectDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择立项通过日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="投决通过日期" prop="decisionDate">
-        <el-date-picker
-          clearable
-          v-model="form.decisionDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择投决通过日期"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="项目所属公司" prop="company">
-        <el-input v-model="form.company" placeholder="请输入项目所属公司" />
-      </el-form-item>
-      <el-form-item label="项目情况描述" prop="description">
-        <el-input v-model="form.description" placeholder="请输入项目情况描述" />
-      </el-form-item>
-      <el-form-item label="项目联系人" prop="projectContacts">
-        <el-input
-          v-model="form.projectContacts"
-          placeholder="请输入项目联系人"
-        />
-      </el-form-item>
-      <el-form-item label="投资负责人" prop="investHead">
-        <el-input v-model="form.investHead" placeholder="请输入投资负责人" />
-      </el-form-item>
-      <el-form-item label="历次融资" prop="previousFinancing">
-        <el-input
-          v-model="form.previousFinancing"
-          placeholder="请输入历次融资"
-        />
-      </el-form-item>
-      <el-form-item label="项目融资阶段" prop="financingStage">
-        <el-input
-          v-model="form.financingStage"
-          placeholder="请输入项目融资阶段"
-        />
-      </el-form-item>
-      <el-form-item label="融资条件" prop="financingCondition">
-        <el-input
-          v-model="form.financingCondition"
-          placeholder="请输入融资条件"
-        />
-      </el-form-item>
-      <el-form-item label="预期融资金额" prop="financingMoney">
-        <el-input
-          v-model="form.financingMoney"
-          placeholder="请输入预期融资金额"
-        />
-      </el-form-item>
-      <el-form-item label="预期融资时间" prop="financingDate">
-        <el-date-picker
-          clearable
-          v-model="form.financingDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择预期融资时间"
-        >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="投资亮点" prop="investSparkle">
-        <el-input v-model="form.investSparkle" placeholder="请输入投资亮点" />
-      </el-form-item>
-      <el-form-item label="投前估值" prop="investValuation">
-        <el-input v-model="form.investValuation" placeholder="请输入投前估值" />
-      </el-form-item>
-      <el-form-item label="预计投资金额" prop="investMoney">
-        <el-input v-model="form.investMoney" placeholder="请输入预计投资金额" />
-      </el-form-item>
-      <el-form-item label="投资价值" prop="investWorth">
-        <el-input v-model="form.investWorth" placeholder="请输入投资价值" />
-      </el-form-item>
-      <el-form-item label="股权架构" prop="shareholding">
-        <el-input v-model="form.shareholding" placeholder="请输入股权架构" />
-      </el-form-item>
-      <el-form-item label="备注" prop="mark">
-        <el-input v-model="form.mark" placeholder="请输入备注" />
-      </el-form-item>
-      <el-form-item label="状态" prop="delFlag">
-        <el-input v-model="form.delFlag" placeholder="请输入状态" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </el-form-item>
-    </el-form>
+  <div class="poolAdd">
+    <h2>{{ title }}</h2>
+    <poolForm :type="type" :id="id"></poolForm>
   </div>
 </template>
 <script>
+import poolForm from "../components/poolForm";
+import {
+  listPool,
+  getPool,
+  delPool,
+  addPool,
+  updatePool,
+} from "@/api/invest/pool";
+
 export default {
-  name:"investPoolAdd",
-  dicts: ['porject_group'],
+  name: "investPoolAdd",
+  dicts: ["porject_group"],
+  components: { poolForm },
   data() {
     return {
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      }
+      type: "1",
+      id: "",
+      title: "新增项目",
     };
   },
+  activated() {
+    this.type = "1";
+    if (this.$route.query.id) {
+      this.id = this.$route.query.id;
+      this.title = "修改项目";
+    } else {
+      this.reset();
+      this.id = null;
+      this.title = "新增项目";
+    }
+  },
+  methods: {},
 };
-</script>
+</script>
+<style lang="scss" scoped>
+.poolAdd {
+  h2 {
+    margin-left: 30px;
+  }
+}
+</style>

ruoyi-ui/src/views/invest/pool/detail.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="detailWrapper">
+    <section class="section1 public-flex-col-end">
+      <div class="public-margin-r-20">
+        <h4>投资项目</h4>
+        <p>{{ detailInfo.porjectName }}</p>
+      </div>
+      <div>
+        <el-button type="primary" icon="el-icon-upload2">上传资料</el-button>
+        <el-button type="primary" icon="el-icon-upload2">上传合同</el-button>
+        <el-button type="primary" icon="el-icon-plus">跟进记录</el-button>
+        <el-button type="primary" icon="el-icon-plus">会议记录</el-button>
+      </div>
+    </section>
+    <el-divider></el-divider>
+    <section>
+      <el-steps
+        :space="200"
+        :active="1"
+        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.porjectName }}</p>
+        </div>
+        <div class="public-flex-center-column">
+          <div>渠道</div>
+          <p>{{ detailInfo.channel }}</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-tabs>
+      <section class="public-padded-20">
+        <div v-show="activeName === '0'">
+          <el-timeline :reverse="false">
+            <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :timestamp="activity.timestamp"
+            >
+              {{ activity.content }}
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+        <div v-show="activeName === '1'">
+          <poolForm :type="type" :id="id"></poolForm>
+        </div>
+        <div v-show="activeName === '2'">3</div>
+        <div v-show="activeName === '3'">4</div>
+        <div v-show="activeName === '4'">5</div>
+        <div v-show="activeName === '5'">6</div>
+        <div v-show="activeName === '6'">7</div>
+        <div v-show="activeName === '7'">8</div>
+        <div v-show="activeName === '8'">9</div>
+      </section>
+    </section>
+  </div>
+</template>
+<script>
+import poolForm from "../components/poolForm";
+import { getPool } from "@/api/invest/pool";
+export default {
+  name: "investPoolDetail",
+  components: { poolForm },
+  data() {
+    return {
+      type: "2",
+      id: "",
+      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();
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    getDetail() {
+      getPool(this.id).then((response) => {
+        this.detailInfo = response.data;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.detailWrapper {
+  padding: 20px 0;
+  width: 92%;
+  margin: 0 auto;
+  .section1 {
+    p {
+      font-size: 28px;
+      font-weight: bold;
+      margin: 0;
+    }
+  }
+  .basicsInfo {
+    font-size: 14px;
+    background: #f1f1f1;
+    margin-top: -24px;
+    width: 70%;
+    padding: 30px 20px 10px;
+    div {
+      color: #7e7d7d;
+    }
+    p {
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+    }
+  }
+  .section3 {
+    margin-top: 40px;
+  }
+}
+</style>

ruoyi-ui/src/views/invest/pool/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="120px"
+    >
       <el-form-item label="项目名称" prop="porjectName">
         <el-input
           v-model="queryParams.porjectName"
@@ -10,7 +17,11 @@
         />
       </el-form-item>
       <el-form-item label="所属组别" prop="porjectGroup">
-        <el-select v-model="queryParams.porjectGroup" placeholder="请选择所属组别" clearable>
+        <el-select
+          v-model="queryParams.porjectGroup"
+          placeholder="请选择所属组别"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.porject_group"
             :key="dict.value"
@@ -36,27 +47,33 @@
         />
       </el-form-item>
       <el-form-item label="初次接触日期" prop="contactDate">
-        <el-date-picker clearable
+        <el-date-picker
+          clearable
           v-model="queryParams.contactDate"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="请选择初次接触日期">
+          placeholder="请选择初次接触日期"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="立项通过日期" prop="projectDate">
-        <el-date-picker clearable
+        <el-date-picker
+          clearable
           v-model="queryParams.projectDate"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="请选择立项通过日期">
+          placeholder="请选择立项通过日期"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="投决通过日期" prop="decisionDate">
-        <el-date-picker clearable
+        <el-date-picker
+          clearable
           v-model="queryParams.decisionDate"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="请选择投决通过日期">
+          placeholder="请选择投决通过日期"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="项目所属公司" prop="company">
@@ -108,11 +125,13 @@
         />
       </el-form-item>
       <el-form-item label="预期融资时间" prop="financingDate">
-        <el-date-picker clearable
+        <el-date-picker
+          clearable
           v-model="queryParams.financingDate"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="请选择预期融资时间">
+          placeholder="请选择预期融资时间"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="投前估值" prop="investValuation">
@@ -140,8 +159,16 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -154,7 +181,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['invest:pool:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -165,18 +193,20 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['invest:pool:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
+          icon="el-icon-switch-button"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['invest:pool:remove']"
-        >删除</el-button>
+          >终止</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -186,47 +216,94 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['invest:pool:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="poolList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="poolList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键id" align="center" prop="id" />
       <el-table-column label="项目名称" align="center" prop="porjectName" />
       <el-table-column label="所属组别" align="center" prop="porjectGroup">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.porject_group" :value="scope.row.porjectGroup"/>
+          <dict-tag
+            :options="dict.type.porject_group"
+            :value="scope.row.porjectGroup"
+          />
         </template>
       </el-table-column>
       <el-table-column label="项目编号" align="center" prop="porjectCode" />
       <el-table-column label="渠道" align="center" prop="channel" />
-      <el-table-column label="初次接触日期" align="center" prop="contactDate" width="180">
+      <el-table-column
+        label="初次接触日期"
+        align="center"
+        prop="contactDate"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.contactDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.contactDate, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="立项通过日期" align="center" prop="projectDate" width="180">
+      <el-table-column
+        label="立项通过日期"
+        align="center"
+        prop="projectDate"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.projectDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.projectDate, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="投决通过日期" align="center" prop="decisionDate" width="180">
+      <el-table-column
+        label="投决通过日期"
+        align="center"
+        prop="decisionDate"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.decisionDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.decisionDate, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="项目所属行业" align="center" prop="industry" />
       <el-table-column label="项目所属公司" align="center" prop="company" />
-      <el-table-column label="项目联系人" align="center" prop="projectContacts" />
+      <el-table-column
+        label="项目联系人"
+        align="center"
+        prop="projectContacts"
+      />
       <el-table-column label="投资负责人" align="center" prop="investHead" />
-      <el-table-column label="历次融资" align="center" prop="previousFinancing" />
-      <el-table-column label="项目融资阶段" align="center" prop="financingStage" />
-      <el-table-column label="预期融资金额" align="center" prop="financingMoney" />
-      <el-table-column label="预期融资时间" align="center" prop="financingDate" width="180">
+      <el-table-column
+        label="历次融资"
+        align="center"
+        prop="previousFinancing"
+      />
+      <el-table-column
+        label="项目融资阶段"
+        align="center"
+        prop="financingStage"
+      />
+      <el-table-column
+        label="预期融资金额"
+        align="center"
+        prop="financingMoney"
+      />
+      <el-table-column
+        label="预期融资时间"
+        align="center"
+        prop="financingDate"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.financingDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.financingDate, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="投前估值" align="center" prop="investValuation" />
@@ -236,28 +313,52 @@
       <el-table-column label="投资价值" align="center" prop="investWorth" />
       <el-table-column label="项目阶段" align="center" prop="projectStage" />
       <el-table-column label="项目状态" align="center" prop="projectState" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        width="300"
+        fixed="right"
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+
+      >
         <template slot-scope="scope">
+            <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-search"
+            @click="handleDetail(scope.row)"
+            v-hasPermi="['invest:pool:query']"
+            >查看</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['invest:pool:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
+            <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-setting"
+            @click="handleBusinessUpdate(scope.row)"
+            >设置业务节点</el-button
+          >
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="el-icon-switch-button"
             @click="handleDelete(scope.row)"
             v-hasPermi="['invest:pool:remove']"
-          >删除</el-button>
+            >终止</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -381,15 +482,21 @@
 </template>
 
 <script>
-import { listPool, getPool, delPool, addPool, updatePool } from "@/api/invest/pool";
+import {
+  listPool,
+  getPool,
+  delPool,
+  addPool,
+  updatePool,
+} from "@/api/invest/pool";
 
 export default {
   name: "Pool",
-  dicts: ['porject_group'],
+  dicts: ["porject_group"],
   data() {
     return {
       // 遮罩层
-      loading: true,
+      loading: false,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -435,14 +542,19 @@ export default {
       },
     };
   },
+  // activated() {
+  //   console.log("=======activated===");
+  //   this.getList();
+  // },
   created() {
     this.getList();
   },
   methods: {
     /** 查询项目池列表 */
     getList() {
+      console.log("getList===");
       this.loading = true;
-      listPool(this.queryParams).then(response => {
+      listPool(this.queryParams).then((response) => {
         this.poolList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -489,7 +601,7 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
       this.resetForm("form");
     },
@@ -505,64 +617,61 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
       // this.reset();
       // this.open = true;
       // this.title = "添加项目池";
-      
-      this.$router.push({ path: '/invest/pool/add',query: { id: 1 }})
+      this.$router.push({ path: "/invest/pool/add" });
+    },
+    handleDetail(row){
+      const id = row.id || this.ids; 
+      this.$router.push({ path: "/invest/pool/detail", query: { id: id } });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getPool(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改项目池";
-      });
+      const id = row.id || this.ids;
+      this.$router.push({ path: "/invest/pool/add", query: { id: id } });
+      // this.reset();
+      // getPool(id).then((response) => {
+      //   this.form = response.data;
+      //   this.open = true;
+      //   this.title = "修改项目池";
+      // });
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updatePool(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPool(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+    // 修改业务节点
+    handleBusinessUpdate(row){
+      const ids = row.id || this.ids;
+
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除项目池编号为"' + ids + '"的数据项？').then(function() {
-        return delPool(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否终止项目池编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delPool(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('invest/pool/export', {
-        ...this.queryParams
-      }, `pool_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "invest/pool/export",
+        {
+          ...this.queryParams,
+        },
+        `pool_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>