ssti-CollegeManage/src/views/projectManage/ProjectManagement.vue

<template>
  <!-- 项目管理页面 -->
  <div class="ProjectManagement" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">项目管理</div>
    </div>
    <hr />

    <!-- 搜索栏开始 -->
    <div class="selectInp">
      <div class="manageSelects">
        <div class="selectsBlock">
          <span class="selectLabel">项目筛选</span>
          <el-select
            v-model="selectInp.filter"
            @change="getData"
            placeholder="我的项目"
          >
            <el-option label="所有项目" value=""></el-option>
            <el-option
              v-for="item in options.projectFilter"
              :key="item.courseId"
              :label="item.title"
              :value="item.courseId"
            >
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <span class="selectLabel">部门</span>
          <el-select
            v-model="selectInp.department"
            @change="getData"
            placeholder="请选择"
          >
            <el-option label="所有部门" value=""></el-option>
            <el-option
              v-for="item in options.department"
              :key="item.classid"
              :label="item.name"
              :value="item.classid"
            >
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <span class="selectLabel">分类</span>
          <el-select
            v-model="selectInp.sort"
            @change="getData"
            placeholder="请选择"
          >
            <el-option label="所有分类" value=""></el-option>
            <el-option
              v-for="item in options.sort"
              :key="item.typeid"
              :label="item.name"
              :value="item.typeid"
            >
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <span class="selectLabel">结题状态</span>
          <el-select
            v-model="selectInp.state"
            @change="getData"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options.state"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <span class="selectLabel">负责人</span>
          <el-select
            v-model="selectInp.leader"
            @change="getData"
            placeholder="请选择"
          >
            <el-option label="所有负责人" value=""></el-option>
            <el-option
              v-for="(item, index) in options.person"
              :key="index"
              :label="item.pro_leader"
              :value="item.pro_leader"
            >
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <span class="selectLabel">年份</span>
          <el-select
            v-model="selectInp.year"
            @change="getData"
            placeholder="请选择"
          >
            <el-option label="所有年份" value=""></el-option>
            <el-option
              v-for="(item, index) in options.yearData"
              :key="index"
              :label="item.time + '年'"
              :value="item.time"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- <div class="ProjectManagementQuery" style="bottom: 0">
        <el-button type="primary" class="btn" size="mini" @click="openShare"
          >分配项目</el-button
        >
      </div> -->
      <div class="ProjectManagementQuery">
        <el-input
          v-model="selectText"
          placeholder="请输入项目名称/编号"
        ></el-input>
        <el-button type="primary" class="btn" size="mini" @click="getData"
          >查询</el-button
        >
      </div>
    </div>
    <!-- 搜索栏结束 -->

    <!-- 表格开始 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="items"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2', color: '#000' }"
      >
        <el-table-column
          prop="ProjectNo"
          label="项目编号"
          align="center"
          min-width="9%"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="项目名称"
          align="center"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="pro_leader"
          align="center"
          label="项目负责人"
          min-width="9%"
        >
        </el-table-column>

        <el-table-column
          prop="dName"
          align="center"
          label="所在部门"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="tName"
          align="center"
          label="分类"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="fund"
          label="预算(万)"
          align="center"
          min-width="8%"
        >
          <template #default="scope">
            <div>
              {{ scope.row.fund / 10000 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          label="开始时间"
          min-width="9%"
        >
          <template #default="scope">
            <div>
              {{ scope.row.startTime.split(" ")[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="联系电话"
          min-width="10%"
        >
          <template #default="scope">
            <div>
              {{
                scope.row.phone != null || scope.row.phone == ""
                  ? scope.row.phone
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
          min-width="6%"
        >
          <template #default="scope">
            <div>
              <!-- {{scope.row.name + (scope.row.status==0?"":"(已屏蔽)")}} -->
              <!-- {{ (scope.row.isupload==0?"未审核": scope.row.data==1?"正在审核":"已审核")  }} -->

              <span v-if="scope.row.isupload == 0">未审核</span>
              <span v-if="scope.row.isupload == 1">审核中</span>
              <span v-if="scope.row.isupload == 2">进行中</span>
              <span v-if="scope.row.isupload == 3">待结项</span>
              <span v-if="scope.row.isupload == 4">已结项</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          width="300"
          align="center"
          label="操作"
        >
          <template #default="scope">
            <div class="operations">
              <el-button
                type="primary"
                @click="scheduleDetail(scope.row.courseId, scope.row.typeid)"
                size="mini"
                >项目详情</el-button
              >
              <!-- <el-button
                type="primary"
                @click="fundStatus(scope.row.courseId)"
                size="mini"
                >资金情况</el-button
              > -->
              <el-button
                type="primary"
                v-show="false"
                @click="jump(scope.row.courseId)"
                size="mini"
                >提交结项测试测试</el-button
              >
              <el-button
                type="primary"
                v-show="scope.row.isupload == 2"
                @click="finish(scope.row)"
                size="mini"
                >提交结项</el-button
              >
              <el-button
                type="primary"
                v-show="scope.row.isupload == 3"
                @click="amendFinish(scope.row)"
                size="mini"
                >修改结项</el-button
              >
              <el-button
                type="primary"
                v-show="scope.row.isupload == 4"
                disabled
                class="disa"
                size="mini"
                >已结项</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->

    <!-- 提示哪些活动没有完成开始 -->
    <el-dialog
      title="提示"
      :visible.sync="NoReportActivity"
      width="600px"
      class="endDialog"
    >
      <div class="deleteContent">"{{ tit }}"项目</div>
      <div
        class="download checkActivity"
        v-show="checkActivityFinishData.length > 0"
      >
        <span style="color: black">未完结活动:</span
        ><span v-for="(item, index) in checkActivityFinishData" :key="index">{{
          item.title
        }}</span>
      </div>
      <div
        class="download checkActivity"
        v-show="checkFundFinishData.length > 0"
      >
        <span style="color: black">未完结资金:</span>
        <span
          style="cursor: pointer"
          @click="fundDetail(item.id, item.title, item.pid)"
          v-for="(item, index) in checkFundFinishData"
          :key="index"
          >{{ item.title }}/{{ item.applyfund - item.actualuse }}（元）</span
        >
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: center"
      >
        <!-- <el-button type="primary" @click="init" class="AllDialogBtn">确认</el-button> -->
        <el-button @click="NoReportActivity = false" class="AllDialogBtn"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 提示哪些活动没有完成结束 -->

    <!-- 分配项目给老师 -->
    <el-dialog
      title="提示"
      :visible.sync="shareDialog"
      width="600px"
      class="endDialog1"
    >
      <div>
        <el-select v-model="project" placeholder="请选择项目">
          <el-option
            v-for="item in allProject"
            :key="item.courseId"
            :label="item.title"
            :value="item.courseId"
          ></el-option>
        </el-select>
      </div>

      <el-input
        style="width: 50%; margin: 10px 0 0 0"
        v-model="un"
        @change="getPeople"
        placeholder="请输入姓名"
      ></el-input>

      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        style="padding: 15px 0 0 15px"
        >全选</el-checkbox
      >
      <el-checkbox-group
        v-loading="caseLoading"
        v-model="checkboxList"
        style="height: 400px; overflow: auto; padding: 0 0 0 15px"
        v-if="people.length"
        @change="handleCheckedAnliChange"
      >
        <el-checkbox
          v-for="item in people"
          :key="item.userid"
          :label="item.userid"
        >
          <div class="t_j_box">
            <el-tooltip
              placement="top"
              :content="item.username ? item.username : '暂无姓名'"
            >
              <span>{{ item.username ? item.username : "暂无姓名" }}</span>
            </el-tooltip>
          </div>
        </el-checkbox>
      </el-checkbox-group>
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: center"
      >
        <el-button
          type="primary"
          @click="setUseridInProject"
          class="AllDialogBtn"
          >确认</el-button
        >
        <el-button @click="shareDialog = false" class="AllDialogBtn"
          >取消</el-button
        >
      </div>
    </el-dialog>

    <!-- 结项书开始 -->
    <el-dialog title="结项书" :visible.sync="endDialog" class="endDialogBlock">
      <!-- <div class="deleteContent">"{{ tit }}"项目，是否确定完结？</div>
      <div class="download checkActivity" v-show="checkFundEndData.length>0">
            <span style="color: black;">剩余资金:</span>
      </div>
      <div class="deleteContent1">活动完结报告</div>
        <div class="download" v-for="item in file" :key="item.fid">
            <span>{{ item.fileName }}</span>
            <div class="downloadBtn">
              <el-button type="primary" @click="checkDelFile(item.url)" size="mini">删除文件</el-button>
            </div>
        </div>
        <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
      <div class="addMoneyBtn" style="margin-left: 0;">
          <div class="jia">+</div>添加
          <div id="upFile">
            <beUpload @getFile="getFile" :navName="'上传文件'" :accept="accept" :progress="progress"> </beUpload>
          </div>
      </div> -->

      <Closingstatement
        ref="finalClo"
        :myArrayProp2.sync="myArrayProp"
        :iid="iid"
        :isDownPdf="isDownPdf"
      ></Closingstatement>

      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex; justify-content: center"
      >
        <el-button type="primary" @click="ending" class="AllDialogBtn"
          >确认</el-button
        >
        <el-button type="primary" @click="getWord" class="AllDialogBtn"
          >下载表格</el-button
        >
        <el-button @click="endDialog = false" class="AllDialogBtn"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 结项书结束 -->

    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="table.currentPage"
      :page-size="table.packageSize"
      layout=" prev, pager, next"
      background
      class="paginations"
      :total="table.total"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import beUpload from "../../components/tool/beUpload";
import Closingstatement from "./components/Closingstatement.vue";
//下载pdf
import { downloadPDF } from "@/components/tool/pdf";
export default {
  components: { beUpload, Closingstatement },
  data() {
    return {
      isDownPdf: false,
      accept: "*",
      iid: "",
      selectText: "", //文字搜素框数据
      endDialog: false,
      DelFileDialog: false,
      NoReportActivity: false,
      loading: false,
      tit: "", //完结框项目名称
      items: [], //项目列表数据
      allProject: [],
      table: {
        // 分页数据
        total: 0,
        packageSize: 10,
        currentPage: 1,
      },
      progress: {
        //进度条
        value: 0,
        show: false,
      },
      DelFileData: {
        fid: "",
        fileName: "",
      },
      options: {
        //头部搜索框下拉框数据
        projectFilter: [], //项目筛选
        department: [], //部门
        sort: [], //分类
        person: [], //负责人
        state: [
          //状态
          {
            value: "",
            label: "全部",
          },
          {
            value: 2,
            label: "进行中",
          },
          {
            value: 3,
            label: "待结题",
          },
          {
            value: 4,
            label: "已结题",
          },
        ],
        yearData: [],
      },
      selectInp: {
        //select选定所显示的值
        filter: "", //不要带引号，select框是根据id来选择下面数据的
        department: "",
        sort: "",
        state: "",
        leader: "",
        year: new Date().getFullYear().toString(),
      },
      file: [],
      checkActivityFinishData: [], //未完成活动
      checkFundFinishData: [], //未完成资金
      // checkFundEndData:[],
      submitData: {
        //结项书要填写的数据
        brief: "",
        plan: "",
        technology: "",
        business: "",
        innovate: "",
        resultAccessory: [],
        firmAccessory: [],
        competitionAccessory: [],
        exchangeAccessory: [],
        conversionAccessory: [],
        talentsAccessory: [],
        targetPlan: "",
        realityResult: "",
        socialValue: "",
        taskAccessory: [],
      },
      myArrayProp: [], //结项书-后端获取的数据
      shareDialog: false,
      project: "",
      caseLoading: false,
      checkboxList: [],
      checkboxIdList: [],
      people: [],
      isIndeterminate: false,
      checkAll: false,
      un: "",
      // amendFinishArrayProp:[]  //结项书-后端获取的修改结项数据
    };
  },
  methods: {
    handleCheckAllChange(val) {
      if (this.checkboxIdList.length == 0) {
        for (var i = 0; i < this.people.length; i++) {
          this.checkboxIdList.push(this.people[i].userid);
        }
      }
      this.checkboxList = val ? this.checkboxIdList : [];
      this.isIndeterminate = false;
    },
    handleCheckedAnliChange(value) {
      let checkedCount = this.checkboxList.length;
      this.checkAll = checkedCount === this.people.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.people.length;
    },
    fundDetail(val, tit, pid) {
      //跳转到未完结资金那里去
      // console.log(val);
      // window.open(`/#/makerfundDetails?Id=${val}`)
      this.$router.push(`/makerfundDetails?Id=${val}&tit=${tit}&paid=${pid}`);
    },
    ProgressFormat(value) {
      //进度条
      return value == 100 ? "100%" : `${value}%`;
    },
    checkDelFile(url) {
      //删除文件
      this.file = this.file.filter((item) => item.url != url);
    },
    getFile(val) {
      //上传文件
      this.file.push(val);
      // console.log(this.file);
      this.progress.show = false;
    },

    ending() {
      //结项书提交
      //  return console.log(this.myArrayProp[0]);

      this.ajax
        .post(this.$store.state.api + "/updateClosingstatementData", {
          uid: this.$store.state.userInfo.userid,
          cid: this.iid,
          submitData: JSON.stringify(
            this.myArrayProp[0]["ClosingstatementData"]
          ),
          state: 3,
        })
        .then(
          (res) => {
            console.log(res);
            if (res.data == 1) {
              this.$message.success("提交成功");
              this.endDialog = false;
              this.progress.show = false;
            } else {
              this.$message.error("提交失败");
            }
            this.getData();
          },
          (err) => {
            console.log(err);
          }
        );

      this.endDialog = false;
    },
    scheduleDetail(val, tid) {
      //进度详情
      this.$router.push(`/ProjectManagementMain?Id=${tid}&pid=${val}`);
    },
    fundStatus(Id) {
      //资金情况
      // localStorage.setItem('pid',JSON.stringify(Id))
      this.$router.push(`/ProjectManagementFundDetail?pid=${Id}`);
    },

    finish(val) {
      this.myArrayProp = [];
      //结项对话框显示
      this.iid = val.courseId; // 提交结项时候的用

      this.checkActivityFinishData = []; //未完成项目
      this.checkFundFinishData = []; //未完成资金
      // this.checkFundEndData=[];
      this.ajax
        .get(this.$store.state.api + "/GetActivityNoReportByPId", {
          uid: this.$store.state.userInfo.userid,
          pid: val.courseId,
        })
        .then((res) => {
          if (res.data[0].length > 0 || res.data[1].length > 0) {
            this.checkActivityFinishData = res.data[0];
            if (res.data[1].length > 0) {
              let acsum = 0;
              let apsum = 0;
              res.data[1].forEach((e) => {
                e.applyfund = JSON.parse(e.applyfund);
                for (let k in e.applyfund) {
                  acsum += e.applyfund[k] * 1;
                }
                e.applyfund = acsum;
              });

              res.data[1].forEach((e) => {
                if (e.actualuse != null) {
                  e.actualuse = JSON.parse(e.actualuse);
                  for (let k in e.actualuse) {
                    apsum += e.actualuse[k] * 1;
                  }
                  e.actualuse = apsum;
                }
              });
            }
            this.checkFundFinishData = res.data[1];
            this.tit = val.title;
            this.NoReportActivity = true;
          } else {
            // this.myArrayProp=[]

            this.iid = val.courseId;

            //提交结项书版本
            this.ajax
              .get(this.$store.state.api + "/getClosingstatementData", {
                uid: this.$store.state.userInfo.userid,
                pid: val.courseId,
              })
              .then((res) => {
                let num = 0;
                res.data[1].forEach((i) => {
                  //计算出已经使用过的金钱
                  // console.log(i);
                  i["actualuse"] = JSON.parse(i["actualuse"]);
                  for (let key in i["actualuse"]) {
                    if (i["actualuse"][key]) {
                      num = i["actualuse"][key] * 1 + num;
                    }
                  }
                });
                console.log(num);

                let data = res.data[0];

                data[0].course_student = JSON.parse(data[0].course_student);
                data[0].course_teacher = JSON.parse(data[0].course_teacher);
                if (data[0].multiSelectProject != null) {
                  data[0].multiSelectProject = JSON.parse(
                    data[0].multiSelectProject
                  );
                }

                data[0].money = JSON.parse(data[0].money);
                data[0].ClosingstatementData = data[0].ClosingstatementData
                  ? JSON.parse(data[0].ClosingstatementData)
                  : this.submitData;

                this.myArrayProp = data;
                this.myArrayProp[0].actualuse = num; //添加已经使用过的经费

                console.log(this.myArrayProp);
                // window.open(`/Closingstatement1?iid=${val.courseId}`);
                this.endDialog = true;
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    amendFinish(val) {
      //修改结项按钮（获取结项时提交的文件）

      //#region 上传文件版本结项
      // this.checkFundEndData=[];
      // this.ajax.post(this.$store.state.api+"/UpdateAmendFinish",{
      //   uid:this.$store.state.userInfo.userid,
      //   pid:val
      // }).then(res=>{
      //   console.log(res);
      //   console.log(res.data);
      //   if (res.data[0].length>0) {
      //       let data=JSON.parse(res.data[0][0].endFile)
      //       this.file=data;
      //   }
      //   // let data=JSON.parse(res.data[0][0].endFile)
      //   this.tit=tit;
      // this.endDialog=true;
      // this.ClosingstatementData=val
      //   // console.log(this.file);
      // }).catch(err=>{
      //   console.log(err)
      // })
      //#endregion
      this.myArrayProp = [];
      this.submitData = {
        brief: "",
        plan: "",
        technology: "",
        business: "",
        innovate: "",
        resultAccessory: [],
        firmAccessory: [],
        competitionAccessory: [],
        exchangeAccessory: [],
        conversionAccessory: [],
        talentsAccessory: [],
        targetPlan: "",
        realityResult: "",
        socialValue: "",
        taskAccessory: [],
      };
      this.iid = val.courseId;

      //
      this.ajax
        .get(this.$store.state.api + "/selectAmendFinish", {
          uid: this.$store.state.userInfo.userid,
          pid: val.courseId,
        })
        .then((res) => {
          // return console.log(res);

          let num = 0;
          res.data[1].forEach((i) => {
            //计算出已经使用过的金钱
            // console.log(i);
            i["actualuse"] = JSON.parse(i["actualuse"]);
            for (let key in i["actualuse"]) {
              if (i["actualuse"][key]) {
                num = i["actualuse"][key] * 1 + num;
              }
            }
          });
          console.log(num);

          let data = res.data[0];
          data[0].course_student = JSON.parse(data[0].course_student);
          data[0].course_teacher = JSON.parse(data[0].course_teacher);
          data[0].multiSelectProject = JSON.parse(data[0].multiSelectProject);
          data[0].ClosingstatementData = JSON.parse(
            data[0].ClosingstatementData
          );
          data[0].money = JSON.parse(data[0].money);
          // data[0].multiSelectProject=JSON.parse(data[0].multiSelectProject)

          this.myArrayProp = data;
          this.myArrayProp[0].actualuse = num; //添加已经使用过的经费

          console.log(this.myArrayProp);
          this.endDialog = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCurrentChange(val) {
      //当页数发生改变的时候调用获取列表数据请求
      // console.log(`当前页: ${val}`);
      this.table.currentPage = val;
      this.getData();
    },
    openShare() {
      this.shareDialog = true;
      this.getPeople();
      this.getAllProject();
    },
    getPeople() {
      this.caseLoading = true;
      this.ajax
        .post(this.$store.state.api + "/selectAllUser", {
          n: this.un,
        })
        .then(
          (res) => {
            this.people = res.data[0];
            this.caseLoading = false;
          },
          (err) => {
            this.caseLoading = false;
            console.log(err);
          }
        );
    },
    setUseridInProject() {
      this.ajax
        .post(this.$store.state.api + "/updateProjectLookTeacher", {
          cid: this.project,
          look: this.checkboxList.join(","),
        })
        .then(
          (res) => {
            this.$message.success("分配成功");
            this.shareDialog = false;
          },
          (err) => {
            console.log(err);
          }
        );
    },
    getAllProject() {
      this.ajax.get(this.$store.state.api + "/selectAllProjectByAdmin").then(
        (res) => {
          this.allProject = res.data[0];
        },
        (err) => {
          console.log(err);
        }
      );
    },
    getData() {
      //获取渲染数据
      this.loading = true;
      let param = {
        uid: this.$store.state.userInfo.userid, //当前账号id
        pid: this.selectInp.filter, //筛选
        did: this.selectInp.department, //部门
        tid: this.selectInp.sort, //分类
        leader: this.selectInp.leader, //负责人
        endState: this.selectInp.state,
        year: this.selectInp.year, //年份
        textInp: this.selectText,
        page: this.table.currentPage, //当前页
        lim: this.table.packageSize, //限制获取几条数据
      };
      // console.log(param);
      this.ajax
        .get(this.$store.state.api + "/SelectAllProjectManagement", param)
        .then(
          (res) => {
            let data = res.data;
            // console.log(data)
            if (
              data[0].length == 0 &&
              data[5][0]["total"] != 0 &&
              this.table.currentPage != 1
            ) {
              this.table.currentPage = 1;
              return this.getData();
            }
            let a = this.options;
            this.items = data[0];
            a.projectFilter = data[1];
            a.department = data[2];
            a.sort = data[3];
            a.person = data[4];
            a.yearData = data[6];
            if (
              a.yearData.filter(
                (item) => item["time"] == new Date().getFullYear().toString()
              ).length == 0
            ) {
              a.yearData.push({ time: new Date().getFullYear().toString() });
            }
            this.table.total = data[5][0].total;
            this.loading = false;
          },
          (err) => {
            console.log(err);
          }
        );
    },
    jump(id){
      window.open(`/Closingstatement1?iid=${id}`);
    },
    getWord() {
      // let tableBox = this.$refs.finalClo.$refs.tableBox;
      // let tableBox2 = this.$refs.finalClo.$refs.tableBox2;
      // // let tableInnerHtml = "";
      // let tableInnerHtml2 = "";
      // let div = document.createElement("div");
      // div.className = "divCss";
      // let table = document.createElement("table");
      // table.className = "tableCss";
      // table.border = "1";
      // table.setAttribute('cellspacing', '0');
      // div.appendChild(table)
      // let num = 0;
      // for (var i = 0; i < tableBox.children.length; i++) {
      //   let child = tableBox.children[i];
      //   let childHeight = child.offsetHeight;
      //   if (childHeight < 1500 && num + childHeight < 1500) {
      //     // tableInnerHtml2 += child.innerHTML;
      //     table.appendChild(child.cloneNode(true));
      //     num += childHeight;
      //   } else if (childHeight < 1800 && num + childHeight > 1800) {
      //     num = childHeight;
      //     tableBox2.appendChild(div);
      //     div = document.createElement("div");
      //     div.className = "divCss";
      //     table = document.createElement("table");
      //     table.className = "tableCss";
      //     table.border = "1";
      //     table.setAttribute('cellspacing', '0');
      //     div.appendChild(table)
      //     table.appendChild(child.cloneNode(true));
      //   } else if (childHeight > 1800) {
      //     num = childHeight;
      //     tableBox2.appendChild(div);
      //     div = document.createElement("div");
      //     div.className = "divCss";
      //     table = document.createElement("table");
      //     table.className = "tableCss";
      //     table.border = "1";
      //     table.setAttribute('cellspacing', '0');
      //     div.appendChild(table)
      //     table.appendChild(child.cloneNode(true));
      //   } else {
      //     num = childHeight;
      //     tableBox2.appendChild(div);
      //     div = document.createElement("div");
      //     div.className = "divCss";
      //     table = document.createElement("table");
      //     table.className = "tableCss";
      //     table.border = "1";
      //     table.setAttribute('cellspacing', '0');
      //     div.appendChild(table)
      //     table.appendChild(child.cloneNode(true));
      //   }
      // }
      // tableBox2.innerHTML = tableInnerHtml;
      this.isDownPdf = true;
      this.$forceUpdate();
      setTimeout(() => {
        downloadPDF(
          this.$refs.finalClo.$refs.downPDF,
          this.myArrayProp[0].title + "申报书"
        );
        setTimeout(() => {
          this.isDownPdf = false;
          this.$forceUpdate();
        }, 500);
      }, 500);
    },
  },

  mounted() {
    this.getData(); //页面加载完成后自动获取渲染数据
  },
};
</script>

<style lang="less">
.ProjectManagement {
  // .pagination{
  //   float: right;
  //   margin: 0px 85px 10px;
  // }
  // .projectBlock{   //循环列表大框
  //   width: 100%;
  //   // height: 560px;
  //   display: flex;
  //   flex-wrap: wrap;
  //   overflow:auto;
  //   .classBlock{   //每个独立小框
  //       flex-shrink: 0;
  //       overflow: hidden;
  //       position: relative;
  //       margin-right: 20px;
  //       margin-bottom: 5px;
  //       width: 250px;
  //       height: 300px;
  //       background-color: rgb(255, 255, 255);
  //       // box-shadow: 1px 2px 3px #ccc;
  //       border: 1px solid #ccc;
  //       border-radius: 5px;
  //       display: flex;
  //       flex-direction: column;
  //       .projectBlockPosition{    //完成状态
  //         border-radius: 30px;
  //         position: absolute;
  //         top: 5px;
  //         left: 5px;
  //         width: 80px;
  //         height: 30px;
  //         display: flex;
  //         justify-content: center;
  //         align-items: center;
  //         background: #000;
  //         opacity: 0.7;
  //         font-size: 16px;
  //         color:#fff;
  //         // font-size: 14px;
  //       }
  //       img{
  //         width: 100%;
  //         height: 140px;
  //         object-fit: cover;
  //       }

  //       .classBlock1{   //中间栏
  //         margin-bottom: 10px;
  //         margin-top: 0px;
  //         box-sizing: border-box;
  //         padding: 0 5px;
  //         flex: 1;
  //         display: flex;
  //         flex-direction: column;
  //         justify-content: space-around;
  //         .classBlock2{   //项目名称
  //           margin-left: 5px;
  //           margin-bottom: 4px;
  //           margin-top: 4px;
  //           text-align: left;
  //           font-size: 16px;
  //         }
  //         .classBlock3{   //学校、姓名
  //           box-sizing: border-box;
  //           padding: 0 5px;
  //           font-size: 14px;
  //           width: 100%;
  //           // margin-top: 10px;
  //           display: flex;
  //           flex-wrap: wrap;
  //           color: #adacac;
  //           margin: 10px 0 0;
  //         }
  //         .classBlock4{  //博客、编号
  //           margin-top: 4px;
  //         }
  //       }

  //       .classBlockBtn{  //按钮栏
  //         box-sizing: border-box;
  //         padding:0 6px;
  //         display: flex;
  //         flex: 1;
  //         width: 100%;
  //         max-height: 40px;
  //         justify-content: space-around;
  //         align-items: center;
  //         background-color:#F5F4F4 ;
  //         span{
  //           font-size: 14px;
  //           color: black;
  //           transition: .1s;
  //           cursor: pointer;
  //           &:hover{
  //             color: #79a2ff;
  //           }
  //         }

  //         .bt1{
  //           width: 100px;
  //           height: 35px;
  //           font-size: 14px;
  //         }
  //       }
  //   }
  // }

  .endDialog {
    //结项对话框的
    .el-dialog__header {
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      background: #32455b;
    }
    .el-dialog__title {
      color: rgb(246, 247, 246);
      display: flex;
      font-size: 18px;
      position: relative;
      top: -2px;
      justify-content: center;
    }
    .el-dialog {
      width: 600px;
      border-radius: 5px;
      overflow: hidden;
    }
    .el-dialog__body {
      box-sizing: border-box;
      // padding: 30px 20px 0 20px;
      padding: 0;
    }
    .deleteContent {
      width: 100%;
      font-size: 22px;
      color: #000;
      box-sizing: border-box;
      // padding: 0 20px;
      display: flex;
      justify-content: center;
    }
    .deleteContent1 {
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
      color: #000;
      margin-top: 30px;
    }
    .download {
      margin: 10px 0 20px;
      width: 100%;
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      color: #5391fd;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // background: #ccc;
    }

    .addDialogLogo {
      width: 60px;
      height: 30px;
      display: flex;
      justify-content: center;
      line-height: 30px;
      border-radius: 5px;
      background: #f2f2f2;
      position: absolute;
      left: 20px;
      top: 15px;
    }
  }

  .endDialog1 {
    .el-dialog__body {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
    }
  }

  .endDialogBlock {
    //结项书弹框样式
    .el-dialog__header {
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      background: #32455b;
    }
    .el-dialog__title {
      color: rgb(246, 247, 246);
      display: flex;
      font-size: 18px;
      position: relative;
      top: -2px;
      justify-content: center;
    }
    .el-dialog {
      width: 1300px;
      border-radius: 5px;
      overflow: hidden;
    }
    .el-dialog__body {
      box-sizing: border-box;
      // padding: 30px 20px 0 20px;
      padding: 0;
    }
    .addDialogLogo {
      width: 60px;
      height: 30px;
      display: flex;
      justify-content: center;
      line-height: 30px;
      border-radius: 5px;
      background: #f2f2f2;
      position: absolute;
      left: 20px;
      top: 15px;
    }
  }
}
.checkActivity {
  // float:left;
  display: flex;
  justify-content: flex-start !important;
  span {
    margin: 10px 20px;
  }
}
</style>