ssti-CollegeManage/src/views/commission/components/projectBook.vue

<template>
  <div class="pBookBox">
    <!-- 项目申报书 -->
    <table border="1" cellspacing="0">
      <div class="onePage">
        <div class="titSchool">深圳技师学院</div>
        <div class="title">二级学院特色创客空间建设项目立项申报书</div>
        <div class="dateCss">申请日期：</div>
      </div>

      <tr>
        <td colspan="2" class="bold"><span>*</span>项目名称</td>
        <td colspan="2">{{ bookData.title }}</td>
        <td colspan="2" class="bold"><span>*</span>所在学院</td>
        <td colspan="2">{{ bookData.name }}</td>
      </tr>
      <tr>
        <td rowspan="2" class="bold"><span>*</span>项目状态</td>
        <td>
          {{
            bookData.typeName == "00a3aa2f-f51e-11ed-a3f6-509a4c5b67cf"
              ? "√"
              : "□"
          }}已建设
        </td>
        <td colspan="6">
          指二级学院已获得政府或学校资助( 例:设计学院、信通学院、珠宝学院
          )，已有双创空间(
          创客实践室场地、设备设施并已投入运营，需对空间环境优化、规章制度建设、小型设施设备添置、创客项目物料增补，需拓展创客项目培训、辅导，创客讲座、沙龙、论坛，创客路演、竞赛、集市及成果参评、参展等方面的工作而提出的资助申请。
        </td>
      </tr>
      <tr>
        <td>
          {{
            bookData.typeName == "04692ef6-f51e-11ed-a3f6-509a4c5b67cf"
              ? "√"
              : "□"
          }}
          待建设
        </td>
        <td colspan="6">
          指二级学院拟立项开展学院特色创客空间建设项目，需进行项目前期调研论证、场馆规划、空间图纸设计设备选型等方面的工作而进行的资助申请。
        </td>
      </tr>

      <tr>
        <td colspan="2" class="bold"><span>*</span>项目起始时间</td>
        <td colspan="2">{{ bookData.begin_at }}</td>
        <td colspan="2" class="bold"><span>*</span>计划完成时间</td>
        <td colspan="2">{{ bookData.plannedEnd_at }}</td>
      </tr>
      <tr>
        <td colspan="2" class="bold"><span>*</span>项目负责人</td>
        <td colspan="2">{{ bookData.pro_leader }}</td>
        <td colspan="2" class="bold"><span>*</span>学院牵头领导</td>
        <td colspan="2">{{ bookData.lead_leader }}</td>
      </tr>
      <tr>
        <td
          colspan="8"
          style="height: 200px; box-sizing: border-box; padding-bottom: 40px"
        >
          <div class="addMessage">
            <p class="bold">部门意见：</p>
            <el-button type="primary" @click="openQp">签批</el-button>
          </div>
          <div class="flexBox">
            <div style="padding-top: 10px;">项目简介：</div>
            <el-input
              type="textarea"
              :autosize="{ minRows: 6 }"
              v-model="bookData.brief"
              disabled
              class="disCss"
            >
            </el-input>
          </div>
          <div class="flexBox">
            <div>总经费：</div>
            <div>{{ bookData.fund }} 元</div>
          </div>
          <p style="position: absolute; right: 30px; bottom: 20px">
            {{ $store.state.userInfo.bm }} {{ $store.state.userInfo.username }}
            {{ bookData.createAt }}
          </p>
        </td>
      </tr>
      <tr>
        <td colspan="8">
          <p class="bold">部门意见：</p>
          <div v-for="(item, index) in qpList" :key="index" class="qpItem">
            <div>{{ item.text }}</div>
            <div>{{ item.bm }} {{ item.username }} {{ item.time }}</div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="display: none" v-for="i in 8" :key="i"></td>
      </tr>
    </table>
    <div class="flowPath">
      <div class="flowItem" v-if="showType < 3">
        <div></div>
        <div>评审委员会意见</div>
      </div>
      <div class="flowItem" v-if="showType < 2">
        <div></div>
        <div>所在学院部门</div>
      </div>
      <div class="flowItem" v-if="showType < 1">
        <div></div>
        <div>所在学院领导审核</div>
      </div>
      <div class="flowItem" v-if="showType < 0">
        <div></div>
        <div>创新创业综合审核-初审</div>
      </div>
      <!-- <div class="flowItem">
        <div></div>
        <div style="font-weight: unset">
          {{ $store.state.userInfo.bm ? $store.state.userInfo.bm + "-" : ""
          }}<span style="font-weight: bold"
            >{{ $store.state.userInfo.username }}经办人发起</span
          >
        </div>
      </div> -->
      <div class="flowItem1" v-for="(qp, qpIndex) in qpList" :key="qpIndex">
        <div></div>
        <div class="flowNavBox">
          <div class="flowTop">
            <div class="flowTime">{{ qp.lcTime }}</div>
            <div class="flowPeople">{{ qp.bm }}{{ qp.username }}</div>
          </div>
          <div class="flowBottom">
            <div class="flowText" v-if="qp.isAgree == 1">
              {{
                qp.type == 0
                  ? "部门领导"
                  : qp.type == 1
                  ? "创新创业学院"
                  : qp.type == 2
                  ? "学术委员会"
                  : "科研办"
              }}审核，拟同意。
            </div>
            <div class="flowText" v-else>{{ qp.bm }}审核，不同意。</div>
            <div class="flowReason" v-if="qp.isAgree == 2">{{ qp.text }}</div>
          </div>
        </div>
      </div>
      <div class="flowItem1">
        <div></div>
        <div class="flowNavBox">
          <div class="flowTop">
            <div class="flowTime">{{ bookData.lcCreateAt }}</div>
            <div class="flowPeople">
              {{ $store.state.userInfo.bm ? $store.state.userInfo.bm + "-" : ""
              }}{{ $store.state.userInfo.username }}
            </div>
          </div>
          <div class="flowBottom">
            <div class="flowText">经办人发起</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="签批意见"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="700px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="qpBox">
        <div class="topBox">
          <div @click="typeBtn(1)" class="topItem">
            <div :class="ttype == 1 ? 'isYuan' : 'yuan'"></div>
            <div>加入常用语</div>
          </div>
          <div @click="typeBtn(2)" class="topItem">
            <div :class="ttype == 2 ? 'isYuan' : 'yuan'"></div>
            <div>保存</div>
          </div>
          <div @click="typeBtn(3)" class="topItem">
            <div :class="ttype == 3 ? 'isYuan' : 'yuan'"></div>
            <div>删除</div>
          </div>
        </div>
        <div class="qpPeople">
          <div>签批人:</div>
          <div>
            <el-input
              v-model="$store.state.userInfo.username"
              disabled
            ></el-input>
          </div>
        </div>
        <div class="qpMessage">
          <div class="qpLeft">
            <textarea
              rows="15"
              class="qpTextArea"
              cols
              v-model="qpMessage"
            ></textarea>
          </div>
          <div class="qpRight">
            <div class="perPh">
              <div>个人常用语</div>
              <el-select
                v-model="phrases"
                placeholder=""
                clearable
                @change="getQpMessage(phrases)"
              >
                <el-option
                  v-for="(item, index) in phList"
                  :key="index"
                  :label="item.text"
                  :value="item.text"
                ></el-option>
              </el-select>
            </div>
            <div class="coPh">
              <div>公共常用语</div>
              <div @click="setQpMessage(1, '审核，拟同意。')" class="phItem">
                <div :class="phType == 1 ? 'isYuan' : 'yuan'"></div>
                <div>审核，拟同意。</div>
              </div>
              <div @click="setQpMessage(2, '审核，不同意。')" class="phItem">
                <div :class="phType == 2 ? 'isYuan' : 'yuan'"></div>
                <div>审核，不同意。</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ttt: "",
      bookData: {},
      dialogVisible: false,
      ttype: 0,
      phType: 0,
      qpMessage: "",
      phrases: "",
      phList: [],
      qpList: [],
      showType: -1,
    };
  },
  methods: {
    getData() {
      this.ajax
        .get(this.$store.state.api + "/getProjectBookData", {
          uid: this.$store.state.userInfo.userid,
          pid: this.$route.query["pid"],
        })
        .then((res) => {
          let data = res.data[0][0];
          this.bookData = data;
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPh() {
      let param = {
        uid: this.$store.state.userInfo.userid,
      };
      // return console.log(param);
      // console.log(param)
      this.ajax.get(this.$store.state.api + "/selectPhrases", param).then(
        (res) => {
          let data = res.data;
          if (data[0].length > 8) {
            this.phList = data[0].slice(0, 8);
          } else {
            this.phList = data[0];
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    addPh() {
      if (this.qpMessage == "") {
        this.$message.error("请添加签批意见！");
        return;
      }
      let param = {
        uid: this.$store.state.userInfo.userid,
        t: this.qpMessage,
      };
      // return console.log(param);
      // console.log(param)
      this.ajax.get(this.$store.state.api + "/insertPhrases", param).then(
        (res) => {
          this.$message.success("加入成功");
          this.getPh();
        },
        (err) => {
          console.log(err);
        }
      );
    },
    handleClose(done) {
      done();
      this.clear();
    },
    clear() {
      this.ttype = 0;
      this.qpMessage = "";
      this.phrases = "";
      this.phType = 0;
    },
    typeBtn(t) {
      this.ttype = t;
      if (t == 1) {
        this.addPh();
      } else if (t == 2) {
        if (this.phType == 0) {
          this.$message.error("请选择公共常用语是否同意！");
          return;
        } else {
          this.addSign();
        }
      } else if (t == 3) {
        this.qpMessage = "";
      }
    },
    setQpMessage(t, n) {
      this.phType = t;
      this.qpMessage = n;
    },
    getQpMessage(n) {
      this.qpMessage = n;
    },
    openQp() {
      this.dialogVisible = true;
      this.ttype = 0;
      this.qpMessage = "";
      this.phType = 0;
      this.phrases = "";
    },
    addSign() {
      if (this.qpMessage == "") {
        this.$message.error("请添加签批意见！");
        return;
      }
      let param = {
        pid: this.$route.query["pid"],
        uid: this.$store.state.userInfo.userid,
        t: this.qpMessage,
        a: this.phType,
        type: this.$store.state.userInfo.type,
      };
      this.ajax.post(this.$store.state.api + "/insertSign", param).then(
        (res) => {
          // console.log(res);
          this.$message.success("签批成功");
          this.getSign();
          this.sendTask();
          this.dialogVisible = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getSign() {
      let param = {
        pid: this.$route.query["pid"],
        uid: this.$store.state.userInfo.userid,
      };
      // return console.log(param);
      // console.log(param)
      this.ajax.get(this.$store.state.api + "/selectSign", param).then(
        (res) => {
          this.qpList = res.data[0];
          this.showType = Math.max(...res.data[0].map((obj) => obj.type));
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getNowTimeByNumber() {
      const now = new Date();

      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");

      return `${year}${month}${day}`;
    },
    getRamDom2() {
      const min = 1;
      const max = 99;
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      return String(randomNumber).padStart(2, "0");
    },
    getRamDom4() {
      const min = 1;
      const max = 9999;
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      return String(randomNumber).padStart(4, "0");
    },
    getRamDom7() {
      const min = 1;
      const max = 9999999;
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      return String(randomNumber).padStart(7, "0");
    },
    getRamDom10() {
      const min = 1;
      const max = 9999999999;
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      return String(randomNumber).padStart(10, "0");
    },
    getRamDom16() {
      const min = 1;
      const max = 9999999999999999;
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      return String(randomNumber).padStart(16, "0");
    },
    getNowTime() {
      const date = new Date();

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hour = String(date.getHours()).padStart(2, "0");
      const minute = String(date.getMinutes()).padStart(2, "0");
      const second = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    sendTask() {
      var tType =
        this.$store.state.userInfo.type == 1
          ? "老师"
          : this.$store.state.userInfo.type == 2
          ? "学生"
          : this.$store.state.userInfo.type == 3
          ? "二级学院领导"
          : this.$store.state.userInfo.type == 4
          ? "院长"
          : this.$store.state.userInfo.type == 5
          ? "学术委员会"
          : this.$store.state.userInfo.type == 6
          ? "科研办"
          : "管理员";
      var nid =
        "SC" +
        this.getNowTimeByNumber() +
        this.getRamDom4() +
        this.getRamDom2();
      let param = [
        {
          taskInfo: JSON.stringify({
            inserttasks: [
              {
                app_id: this.getRamDom16(),
                assignments: [
                  {
                    assign_dept: this.$store.state.userInfo.bm,
                    assign_id: this.$store.state.userInfo.userid,
                    assign_name: this.$store.state.userInfo.username,
                  },
                ],
                biz_domain: this.$store.state.userInfo.bm,
                biz_key: "bizkey_" + this.getRamDom7(),
                created_by_depts: this.$store.state.userInfo.bm,
                created_by_ids: this.$store.state.userInfo.userid,
                created_by_names: this.$store.state.userInfo.username,
                created_on: this.getNowTime(),
                form_url: "",
                form_url_view: "",
                node_id: nid,
                node_name: tType + "审核",
                priority: 0,
                process_delete_flag: 0,
                process_id: "SC_leave_" + this.getRamDom10(),
                process_instance_form_view: "",
                process_instance_id:
                  "SC" + this.getNowTimeByNumber() + this.getRamDom4(),
                process_instance_image_url: "",
                process_instance_initiator: this.$store.state.userInfo.username,
                process_instance_initiator_dp: this.$store.state.userInfo.bm,
                process_instance_initiator_id: "ampadmin",
                process_instance_start_date: this.getNowTime(),
                process_instance_status: "RUNNING",
                process_instance_subject:
                  "代办公文流程：" + this.$store.state.userInfo.username,
                process_name: "代办公文流程：",
                process_version: "1.0",
                status: "ACTIVE",
                subject:
                  this.$store.state.userInfo.username +
                  "_发起代办公文流程-" +
                  this.bookData.title,
                task_delete_flag: 0,
                task_id: nid,
              },
            ],
            updatetasks: [],
          }),
        },
      ];
      this.ajax.post(this.$store.state.api + "/getTest", param).then(
        (res) => {
          console.log(res);
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },

  mounted() {
    this.getData();
    this.getPh();
    this.getSign();
  },
};
</script>

<style lang="less" scoped>
.pBookBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  table {
    position: relative;
    color: black;
    width: 1350px;
    margin: 0 auto;
    margin-top: 250px;
    margin-bottom: 100px;
    font-size: 16px;
    font-family: \5b8b\4f53;
    .onePage {
      height: 300px;
      width: 100%;
      position: absolute;
      text-align: center;
      top: -180px;
      .titSchool {
        font-weight: 600;
        font-size: 35px;
        margin-bottom: 30px;
        font-family: \9ed1\4f53;
        letter-spacing: 10px;
      }
      .title {
        // font-weight: 600;
        font-size: 32px;
        margin-bottom: 30px;
        font-family: \9ed1\4f53;
        letter-spacing: 5px;
        color: #333333;
      }
      .dateCss {
        text-align: right;
        font-size: 18px;
        width: 90%;
        font-weight: 600;
        font-family: \9ed1\4f53;
        // margin-bottom: 100px;
        letter-spacing: 5px;
        color: #333333;
      }
    }
    tr {
      width: 100%;
    }
    tr td {
      height: 60px;
      width: 10%;
      text-align: center;
      box-sizing: border-box;
      padding: 10px;
      position: relative;
      span {
        color: red;
      }
      p {
        text-align: left;
      }
      :deep(.el-textarea__inner) {
        border: none;
        resize: none;
        font-size: 18px;
      }
      .addMessage {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        /deep/.el-button {
          width: 80px;
          height: 30px;
          padding: 0;
        }
      }
      .flexBox {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        > div:nth-child(1) {
          min-width: 85px;
          font-weight: 600;
        }
      }
      .disCss {
        /deep/.el-textarea__inner {
          background: #fff;
          color: #000;
          cursor: auto;
        }
      }
    }
    .bold {
      font-weight: 600;
    }
    .qpItem {
      min-height: 100px;
      box-sizing: border-box;
      padding-bottom: 20px;
      position: relative;
      > div:first-child {
        text-align: left;
        padding: 5px 15px;
        min-height: 172px;
        height: 172px;
      }
      > div:last-child {
        position: absolute;
        right: 30px;
        bottom: 20px;
      }
    }
  }
  .flowPath {
    position: relative;
    height: 100%;
    margin-left: 20px;
    max-width: 220px;
    .flowItem {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      min-height: 60px;
      max-height: 100px;
      padding-bottom: 15px;
      box-sizing: border-box;
      > div:first-child {
        min-width: 20px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fc0;
        z-index: 99;
      }
      > div:last-child {
        padding-left: 15px;
        font-weight: bold;
      }
    }
    .flowItem1 {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      min-height: 60px;
      padding-bottom: 15px;
      box-sizing: border-box;
      > div:first-child {
        width: 20px;
        min-width: 20px;
        height: 20px;
        background-image: url("../../../assets/img/right.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 99;
      }
      .flowNavBox {
        font-weight: unset;
        padding-left: 15px;
        .flowTop {
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: flex-start;
          font-size: 14px;
          margin-bottom: 10px;
          .flowTime {
            margin-bottom: 5px;
          }
        }
        .flowBottom {
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: flex-start;
          .flowText {
            font-weight: bold;
          }
        }
      }
    }
  }
  .flowPath::before {
    position: absolute;
    content: "";
    width: 2px;
    height: calc(100% - 105px);
    background: #848484;
    left: 9px;
    top: 10px;
    display: block;
    z-index: 1;
  }
}
.dialog_diy {
  /deep/.el-dialog__header {
    background: #32455b !important;
    padding: 15px 20px;
  }
  /deep/.el-dialog__title {
    color: #fff;
  }
  /deep/.el-dialog__headerbtn {
    top: 19px;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
  }
  /deep/.el-dialog__body,
  .el-dialog__footer {
    background: #f2f2f2;
    padding: 0;
  }
  .qpBox {
    .topBox {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      width: 100%;
      padding: 15px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #999;
      .topItem {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        cursor: pointer;
        height: 20px;
        margin-right: 15px;
        .yuan,
        .isYuan {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #f2f2f2;
          border: 1px solid #000;
          margin-right: 5px;
        }
        .isYuan {
          background: #000 !important;
        }
      }
    }
    .qpPeople {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #999;
      box-sizing: border-box;
      > div:nth-child(1) {
        margin-right: 10px;
      }
      /deep/.el-input__inner {
        border: 1px solid #000;
        width: 150px;
        outline: none;
        color: #000;
        background: #fff;
      }
    }
    .qpMessage {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      width: 100%;
      padding: 15px 20px;
      .qpLeft {
        /deep/.qpTextArea {
          width: 250px;
          resize: none;
        }
      }
      .qpRight {
        margin-left: 20px;
        .perPh {
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: flex-start;
          /deep/.el-input__inner {
            height: 30px;
            margin: 10px 0;
          }
        }
        .coPh {
          .phItem {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            cursor: pointer;
            height: 20px;
            margin-right: 15px;
            .yuan,
            .isYuan {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background: #f2f2f2;
              border: 1px solid #000;
              margin-right: 5px;
            }
            .isYuan {
              background: #000 !important;
            }
          }
        }
      }
    }
  }
}
</style>