ssti-CollegeManage/src/views/projectApply/projectApplication.vue

<template>
  <!-- 项目立项申请 -->
  <div class="projectApplication" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">项目立项管理</div>
    </div>
    <hr />

    <!-- 搜索框开始 -->
    <div class="selectInp">
      <div class="manageSelects">
        <div class="selectsBlock">
          <div class="selectLabel">项目筛选</div>
          <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">
          <div class="selectLabel">部门</div>
          <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">
          <div class="selectLabel">分类</div>
          <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">
          <div class="selectLabel">负责人</div>
          <el-select
            v-model="selectInp.person"
            @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">
          <div class="selectLabel">状态</div>
          <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>
      <div class="ProjectManagementQuery">
        <el-input v-model="input" placeholder="请输入项目名称/编号"></el-input>
        <el-button type="primary" class="btn" size="mini" @click="getData"
          >查询</el-button
        >
      </div>
    </div>

    <!-- 搜索框结束 -->
    <!-- 表格开始 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2', color: '#000' }"
        @selection-change="handleSelectionChange"
      >
        <!-- selection-change批量选择功能后续可能用到 -->
        <!-- 
        <el-table-column
          type="selection"
          width="25"
          >

        </el-table-column> -->
        <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="name"
          align="center"
          label="所在部门"
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="sort"
          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="createTime"
          align="center"
          label="创建时间"
          min-width="9%"
        >
          <template #default="scope">
            <div>
              {{ scope.row.createTime.split(" ")[0] }}<br />{{
                scope.row.createTime.split(" ")[1]
              }}
            </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="360"
          align="center"
          label="操作"
        >
          <template #default="scope">
            <div class="operations">
              <!-- {{ scope.row.isupload }} -->
              <el-button
                type="primary"
                size="mini"
                @click="lookDetail(scope.row.courseId, scope.row.typeid)"
                >查看详情</el-button
              >

              <el-button
                type="primary"
                v-if="scope.row.isupload == 0 && $store.state.userInfo.type!=0"
                @click="audit(scope.row, 0)"
                >提交</el-button
              >
              <!--0申请人审核 -->
              <el-button
                type="primary"
                v-if="scope.row.isupload == 1&& $store.state.userInfo.type!=0"
                class="disa"
                >已提交</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.isupload == 2&& $store.state.userInfo.type!=0"
                class="disa"
                size="mini"
                >已审核</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.isupload == 3&& $store.state.userInfo.type!=0"
                class="disa"
                size="mini"
                >待结项</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.isupload == 4&& $store.state.userInfo.type!=0"
                class="disa"
                size="mini"
                >已结项</el-button
              >

              <el-button
                v-if="scope.row.isupload == 0 && $store.state.userInfo.type==0"
                type="primary"
                class="disa"
                size="mini"
                >审核</el-button
              >
              <!--1管理员审核 -->
              <el-button
                v-if="scope.row.isupload == 1 && $store.state.userInfo.type==0"
                type="primary"
                size="mini"
                @click="audit(scope.row, 1)"
                >审核</el-button
              >
              <el-button
                v-if="scope.row.isupload == 2 && $store.state.userInfo.type==0"
                type="primary"
                class="disa"
                size="mini"
                >已审核</el-button
              >
              <el-button
                v-if="scope.row.isupload == 3&& $store.state.userInfo.type==0"
                type="primary"
                class="disa"
                size="mini"
                >待结项</el-button
              >
              <el-button
                v-if="scope.row.isupload == 4&& $store.state.userInfo.type==0"
                type="primary"
                class="disa"
                size="mini"
                >已结项</el-button
              >

              <!-- <el-button type="primary"  size="mini" @click="appTable(scope.row.typeid,scope.row.courseId)" >申请表</el-button> -->

              <el-button type="primary" v-if="$store.state.userInfo.type!=0" size="mini" @click="del(scope.row)">删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 分页 -->
    <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>
    <!-- 分页结束 -->

    <!-- 立项审核对话框开始 -->
    <el-dialog
      title="立项审核"
      :visible.sync="dialogVisible"
      class="pageSubmitData"
      width="700px"
      :before-close="init"
    >
      <div class="diaTit">
        <div class="spans">项目名称：</div>
        <div class="spanCon">{{ auditDialog.projectName }}</div>
        <div class="spans">项目负责人：</div>
        <div class="spanCon">{{ auditDialog.person }}</div>
      </div>

      <div class="diaTit1">
        <div class="spans1">所在部门</div>
        <div class="inp">
          <el-input
            disabled
            v-model="auditDialog.department"
            placeholder="所在部门"
          ></el-input>
        </div>
      </div>

      <div class="diaTit1">
        <div class="spans1">预算总经费</div>
        <div class="inp">
          <el-input
            disabled
            v-model="auditDialog.fund"
            placeholder="预算总经费"
          ></el-input>
        </div>
      </div>

      <div class="diaTit1">
        <div class="spans1">联系电话</div>
        <div class="inp">
          <el-input
            disabled
            v-model="auditDialog.tel"
            placeholder="联系电话"
          ></el-input>
        </div>
      </div>
      <!-- <div class="diaTit1" v-if="isManager == 1">
        <div class="spans1" style="position: relative; top: -24px">
          驳回意见
        </div>
        <div class="inp">
          <el-input
            type="textarea"
            :rows="5"
            resize="none"
            placeholder="请输入修改建议等..."
            v-model="rejectApplyText"
          >
          </el-input>
        </div>
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-if="isManager == 0"
          @click="ApplyPersonCommit"
          class="AllDialogBtn"
          >审核</el-button
        >
        <el-button
          type="primary"
          v-if="isManager == 1"
          @click="ManagerCommit"
          class="AllDialogBtn"
          >通过</el-button
        >
        <el-button
          type="primary"
          v-if="isManager == 1"
          @click="rejectApply"
          class="AllDialogBtn"
          >驳回</el-button
        >
        <el-button @click="init" class="AllDialogBtn">取消</el-button>
      </div>
    </el-dialog>
    <!-- 立项审核对话框结束 -->

    <!-- 删除通知开始 -->
    <el-dialog
      title="删除项目"
      :visible.sync="dialogVisible2"
      width="600px"
      class="pageSubmitData"
    >
      <div class="deleteContent">确定删除项目?</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDel" class="AllDialogBtn"
          >确认删除</el-button
        >
        <el-button @click="init" class="AllDialogBtn">取消</el-button>
      </span>
    </el-dialog>
    <!-- 删除通知结束-->
  </div>
</template>

<script>
// import {MakerSpaceWord,MakerStudentWord,getWord} from '@/components/tool/getWord.js'
// import MakerSpaceWordPreview from '@/components/MakerSpaceWordPreview.vue';
// import studentMakerProjectPreview from '@/components/studentMakerProjectPreview.vue'
export default {
  // components:{MakerSpaceWordPreview,studentMakerProjectPreview},
  data() {
    return {
      iid: "",
      loading: false,
      textarea: "",
      input: "",
      dialogVisible: false, //立项审核
      dialogVisible1: false, //立项撤回提交
      dialogVisible2: false, //删除
      WordPreview: false, //文档预览
      downloadWord: false, //申请表下载
      PreviewTid: "", //预览分类ID
      PreviewData: "", //预览数据
      rejectApplyText: "", //驳回-修改建议
      isManager: 0, //0申请人审核科-----  1管理员审核框
      // 分页数据
      table: {
        total: 0,
        packageSize: 7,
        currentPage: 1,
      },
      tableData: [], //列表数据

      selectInp: {
        // 头部搜索框的内容
        filter: "",
        department: "",
        sort: "",
        person: "",
        state: "",
      },
      options: {
        //头部搜索框下拉框数据
        projectFilter: [], //项目筛选
        department: [], //部门
        sort: [], //分类
        person: [], //负责人
        state: [
          //状态
          {
            value: "",
            label: "全部",
          },
          {
            value: 0,
            label: "未审核",
          },
          {
            value: 1,
            label: "审核中",
          },
          {
            value: 2,
            label: "进行中",
          },
          {
            value: 3,
            label: "待结项",
          },
          {
            value: 4,
            label: "已结项",
          },
        ],
      },
      auditDialog: {
        //审核对话框数据
        projectName: "",
        person: "",
        department: "",
        fund: "",
        tel: "",
        // cid:''
      },
    };
  },
  methods: {
    init() {
      this.dialogVisible = false;
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
    },
    audit(val, num) {
      //审核按钮
      this.isManager = num;
      this.iid = val; //储存id给对话框
      // if (val.isupload==0) {
      this.dialogVisible = true;
      // console.log(val);
      this.auditDialog.projectName = val.title;
      this.auditDialog.person = val.pro_leader;
      this.auditDialog.department = val.name;
      this.auditDialog.fund = val.fund;
      this.auditDialog.tel = val.phone || "-";
      // this.auditDialog.cid=courseId
      // }
    },
    appTable(tid, pid) {
      //查看申请表
      // console.log();
      if (tid == "5e21b204-c206-11ed-a4cd-509a4c5b67cf") {
        // downloadFile('/file/附件2：2023年学生创客项目申报书模板(2).docx',"2023年学生创客项目申报书模板.docx",(_b)=>this.loading = _b);
        this.ajax
          .get(this.$store.state.api + "/SelectProjectWordMakerStudent", {
            uid: this.$store.state.userInfo.userid,
            pid: pid,
          })
          .then((res) => {
            // console.log(res['data']);
            let data = res["data"];
            this.downloadWord = true;
            // this.downWord(data)
            // this.PreviewData = [res['data'][0][0],res['data'][1]];

            // return console.log(this.PreviewData);
            // this.WordPreview = true;
            // this.PreviewTid = tid;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (tid == "5f7a66d5-c206-11ed-a4cd-509a4c5b67cf") {
        this.ajax
          .get(this.$store.state.api + "/SelectProjectWordMakerSpace", {
            uid: this.$store.state.userInfo.userid,
            pid: pid,
          })
          .then((res) => {
            this.PreviewData = [res["data"][0][0], res["data"][1]];
            this.WordPreview = true;
            this.PreviewTid = tid;
            // MakerSpaceWord(res['data'][0][0],res['data'][1]);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.error("错误");
      }
    },
    downWord(data) {
      if (this.PreviewTid == "5f7a66d5-c206-11ed-a4cd-509a4c5b67cf") {
        MakerSpaceWord(this.PreviewData[0], this.PreviewData[1]);
      } else {
        getWord(data[0][0]);
      }
    },
    ManagerCommit() {
      //立项审核对话框里面的管理员通过按钮
      // console.log(this.iid);
      let param = {
        uid: this.$store.state.userInfo.userid,
        pid: this.iid.courseId,
        num: 2,
      };
      this.ajax
        // .post(this.$store.state.api+"/ApproveProject",param)
        .post(this.$store.state.api + "/updateIsupload", param)
        .then(
          (res) => {
            // console.log(res);
            this.dialogVisible = false;
            this.$message.success("提交成功");
            this.getData();
          },
          (err) => {
            console.log(err);
          }
        );
    },
    ApplyPersonCommit() {
      //申请人审核按钮
      let param = {
        uid: this.$store.state.userInfo.userid,
        pid: this.iid.courseId,
        num: 1,
      };
      this.ajax
        .post(this.$store.state.api + "/updateIsupload", param) //updateIsupload
        .then((res) => {
          this.dialogVisible = false;
          this.$message.success("已提交");
          this.getData();
        });
    },
    rejectApply() {
      //立项审核对话框里面的驳回申请
      let param = {
        uid: this.$store.state.userInfo.userid,
        pid: this.iid.courseId,
        num: 0,
      };
      this.ajax
        .post(this.$store.state.api + "/updateIsupload", param)
        .then((res) => {
          this.dialogVisible = false;
          this.$message.success("已驳回项目申请");
          this.getData();
        });
    },

    commit2(val) {
      //立项撤回对话框里面的确定撤回按钮
      this.dialogVisible1 = false;
      this.status--;
    },

    handleSelectionChange(val) {
      //批量选择功能后续可能用到
      // console.log(val);
      this.multipleSelection = val;
    },

    lookDetail(val, tid) {
      //查看详情按钮
      // localStorage.setItem("pid",JSON.stringify(val))
      this.$router.push(`/projectApplicationDetailMain?tid=${tid}&pid=${val}`);
    },
    // apply(){     //项目立项申请按钮
    //   this.$router.push('/projectApplicationApplyMain')
    // },
    getData() {
      //获取表格数据
      this.loading = true;
      let param = {
        uid: this.$store.state.userInfo.userid,
        pid: this.selectInp.filter, //筛选
        did: this.selectInp.department, //部门
        tid: this.selectInp.sort, //分类
        leader: this.selectInp.person, //负责人
        st: this.selectInp.state, //审核状态
        year: "",
        textInp: this.input,
        page: this.table.currentPage, //当前页
        lim: this.table.packageSize, //限制获取几条数据
      };
      // return console.log(param);
      // console.log(param)
      this.ajax.get(this.$store.state.api + "/SelectAllProject", param).then(
        (res) => {
          let data = res.data;
          console.log(data);
          if (data[0].length == 0 && data[5][0]["total"] != 0) {
            this.table.currentPage = 1;
            return this.getData();
          }
          let a = this.options;
          this.tableData = data[0];
          a.projectFilter = data[1];
          a.department = data[2];
          a.sort = data[3];
          a.person = data[4];
          this.table.total = data[5][0].total;
          // this.tableData.forEach(item=>{
          //   if(item['time']!=null&&item['time']!=''){
          //     item['time']=JSON.parse(item['time'])
          //   }else{
          //     item['time'] = []
          //   }
          // })
          this.loading = false;

          // console.log(this.tableData)
        },
        (err) => {
          console.log(err);
        }
      );
    },
    del(val) {
      //表格删除按钮，点击显示删除对话框
      // console.log(val);
      this.dialogVisible2 = true;
      this.iid = val; //将要删除的id进行存储供删除对话框使用
    },
    dialogDel() {
      //确定删除这个项目
      // console.log(this.iid)
      if (this.iid.userid == this.$store.state.userInfo.userid) {
        let param = {
          uid: this.$store.state.userInfo.userid,
          pid: this.iid.courseId,
        };
        this.ajax.post(this.$store.state.api + "/DeleteProject", param).then(
          (res) => {
            // console.log(res);
            if (res.data) {
              this.$message.success("删除成功");
              this.getData();
              this.dialogVisible2 = false;
              return;
            } else {
              this.$message.error("删除失败");
            }
          },
          (err) => {
            console.log(err);
          }
        );
      }
    },
    handleCurrentChange(val) {
      //当页数发生改变的时候调用获取列表数据请求
      // console.log(`当前页: ${val}`);
      this.table.currentPage = val;
      this.getData();
    },
    // getUser() {
    //   var request = new XMLHttpRequest();
    //   request.open("get", "http://10.16.30.130/sso/api", true);
    //   request.setRequestHeader(
    //     "Content-Type",
    //     "application/x-www-form-urlencoded"
    //   );
    //   request.send("");
    //   console.log(request);
    // },
  },
  watch: {
    //监视选择框的变化，实施刷新表格数据
    // options:{
    //   handler(){
    //     immediate:true
    //     deep:true
    //     this.getData()
    //   }
    // }
  },
  mounted() {
    //跳转到此页面立刻获取数据
    this.getData(); //获取表格数据
    // this.getUser();
    console.log(this.$store.state.userInfo.type);

  },
};
</script>

<style lang="less" scoped>
.projectApplication {
  // .el-table::before{
  //   height: 0;
  // }
}
</style>