ssti-CollegeManage/src/views/fundManage/makerfund.vue

<template>
  <!-- 创客资金管理 -->
  <div class="makerfund" 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 filterSelects"
              :key="item.aid == null ? item.pid : item.aid"
              :label="item.atit == null ? item.ptit : item.atit"
              :value="item.aid == null ? item.pid : item.aid"
            >
            </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 departmentSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

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

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

        <div class="selectsBlock">
          <div class="selectLabel">状态</div>
          <el-select
            v-model="selectInp.status"
            @change="getData"
            placeholder="请选择"
          >
            <el-option label="所有状态" value=""></el-option>
            <el-option
              v-for="item in statusSelects"
              :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>
			<span style="font-size: 12px;">共  {{ table.total }} 条</span>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2', color: '#000' }"
      >
        <el-table-column prop="fNo" label="资金编号" align="center">
        </el-table-column>

        <el-table-column label="项目(活动)名称" align="center">
          <template #default="scope">
            <div>
              <span>
                <span v-if="scope.row.ptit">{{ scope.row.ptit }}</span>
                <span v-if="scope.row.atit">{{ scope.row.atit }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="负责人">
          <template #default="scope">
            <div>
              <span>
                <span v-if="scope.row.ppl">{{ scope.row.ppl }}</span>
                <span v-if="scope.row.apl">{{ scope.row.apl }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="项目类型">
          <template #default="scope">
            <div>
              <span v-if="scope.row.type == 0">创客空间</span>
              <span v-if="scope.row.type == 1">学生创客</span>
              <span v-if="scope.row.type == 2">活动创客</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="applyfund" align="center" label="申请经费(元)">
        </el-table-column>
        <el-table-column prop="actualuse" align="center" label="实际使用(元)">
          <template #default="scope">
            <div>
              <span>{{
                scope.row.actualuse == null ? "" : scope.row.actualuse
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="所在部门">
        </el-table-column>
        <el-table-column prop="status" align="center" label="状态">
          <template #default="scope">
            <div>
              <span v-if="scope.row.state == 0">未审核</span>
              <span v-if="scope.row.state == 1">待审核</span>
              <span v-if="scope.row.state == 2">已审核</span>
              <span v-if="scope.row.state == 3">已报销</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="time" align="center" label="申请时间">
          <template #default="scope">
            <div>
              {{ scope.row.time.split(" ")[0] }}<br />{{
                scope.row.time.split(" ")[1]
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          align="center"
          width="380"
          label="操作"
        >
          <template #default="scope">
            <div class="operations">
              <el-button
                type="primary"
                size="mini"
                @click="
                  details(
                    scope.row.fid,
                    scope.row.atit,
                    scope.row.ptit,
                    scope.row.paid
                  )
                "
                >查看详情</el-button
              >

              <el-button
                type="primary"
                v-if="scope.row.state == 0"
                size="mini"
                @click="Audit(scope.row, 0)"
                >提交</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.state == 1"
                class="disa"
                size="mini"
                >已提交</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.state != 1 && scope.row.state != 0"
                class="disa"
                size="mini"
                >已提交</el-button
              >

              <!-- <el-button type="primary"  v-if="scope.row.state==2" class="disa" size="mini">已审核</el-button> -->

              <el-button
                type="primary"
                v-if="scope.row.state == 0 && $store.state.userInfo.type == 0"
                class="disa"
                size="mini"
                >审核</el-button
              >
              <el-button
                type="primary"
                @click="Audit(scope.row, 1)"
                v-if="scope.row.state == 1 && $store.state.userInfo.type == 0"
                size="mini"
                >审核</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.state == 2 && $store.state.userInfo.type == 0"
                class="disa"
                size="mini"
                >已审核</el-button
              >
              <el-button
                type="primary"
                v-if="scope.row.state == 3 && $store.state.userInfo.type == 0"
                class="disa"
                size="mini"
                >已审核</el-button
              >

              <el-button
                v-if="scope.row.state == 0"
                class="disa"
                type="primary"
                size="mini"
                >完结</el-button
              >
              <el-button
                v-if="scope.row.state == 1"
                class="disa"
                type="primary"
                size="mini"
                >完结</el-button
              >
              <el-button
                v-if="scope.row.state == 2"
                @click="endDialogShow(scope.row.fid)"
                type="primary"
                size="mini"
                >完结</el-button
              >
              <el-button
                v-if="scope.row.state == 3"
                class="disa"
                type="primary"
                size="mini"
                >已报销</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"
      width="750px"
      class="pageSubmitData"
      :before-close="init"
    >
      <div class="diaTit1" style="margin-top: 0">
        <div class="spans">项目名称:</div>
        <div style="margin-right: 30px; color: #adadad">
          {{ ProjectFundData.ptit }}
        </div>
        <div class="spans">项目负责人:</div>
        <div style="color: #adadad">{{ ProjectFundData.ppl }}</div>
      </div>

      <div class="diaTit1">
        <div class="spans1">所在部门</div>
        <div class="inp">
          <el-input
            v-model="ProjectFundData.name"
            disabled
            placeholder="信通学院"
          ></el-input>
        </div>
      </div>

      <div class="diaTit1">
        <div class="spans1">使用经费</div>
        <div class="inp">
          <el-input v-model="ProjectFundData.actualuse" disabled></el-input>
        </div>
      </div>

      <div class="diaTit1">
        <div class="spans1">联系电话</div>
        <div class="inp">
          <el-input v-model="ProjectFundData.phone" disabled></el-input>
        </div>
      </div>

      <div class="diaTit1">
        <div class="spans1">项目类型</div>
        <div class="inp">
          <el-select
            style="width: 100%"
            v-model="ProjectFundData.type"
            disabled
            placeholder="个人创客"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <!-- <div style="display: flex;">
          <div class="diaTit5" style="display: flex;">
            <div class="spans1">预算</div>
            <div>
              <el-input v-model="ProjectFundData.fund" placeholder="6000"></el-input>
            </div>
          </div>

          <div class="diaTit5">
            <div class="spans1">已支付</div>
            <div>
              <el-input v-model="ProjectFundData.usedFund" disabled placeholder="-"></el-input>
            </div>
          </div>
          <div class="diaTit5">
            <div class="spans1">余额</div>
            <div>
              <el-input :value="ProjectFundData.fund - ProjectFundData.usedFund" placeholder="6000"></el-input>
            </div>
          </div>
        </div> -->

      <!-- <div class="diaTit1" v-if="isManager==1">
          <div class="spans1" style="position: relative;top:-20px">驳回意见</div>
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            style="width: 100%;"
            placeholder="请输入修改建议等..."
            v-model="textarea">
          </el-input>
        </div> -->

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="auditPass(1)"
          v-if="isManager == 0"
          class="AllDialogBtn"
          >提交</el-button
        >

        <el-button
          type="primary"
          @click="auditPass(2)"
          v-if="isManager == 1"
          class="AllDialogBtn"
          >通过</el-button
        >
        <el-button
          type="primary"
          v-if="isManager == 1"
          @click="auditPass(0)"
          class="AllDialogBtn"
          >撤回</el-button
        >

        <el-button @click="dialogVisible = false" class="AllDialogBtn"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 审核对话框结束 -->

    <!-- 完结对话框开始 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible1"
      width="600px"
      class="pageSubmitData"
    >
      <div class="deleteContent">确定完结?</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmEnd" class="AllDialogBtn"
          >确认</el-button
        >
        <el-button @click="dialogVisible1 = false" class="AllDialogBtn"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <!-- 完结对话框结束-->
  </div>
</template>

<script>
// import downloadFile from '@/components/tool/downloadFile.js';
// import getExcel from "@/components/tool/getExcel";

export default {
  data() {
    return {
      selectInp: {
        //搜索下拉框的值
        filter: "",
        department: "",
        type: "",
        leader: "",
        status: "",
      },
      loading: false,
      ProjectFundData: {},
      projectFundState: "",
      isManager: "", //审核与驳回框的区别
      dialogVisible1: false,
      dialogVisible: false, //立即审核
      revocation: false, //撤回
      createFromDialog: false, //生成表单

      projectFilter: [], //项目名称

      textarea: "", //立项审核事由
      input: "",
      value: "",
      options: [
        { value: 0, label: "空间创客" },
        { value: 1, label: "学生创客" },
        { value: 2, label: "活动创客" },
      ],
      status: "",
      table: {
        // 分页数据
        total: 0,
        packageSize: 8,
        currentPage: 1,
      },
      filterSelects: [],
      departmentSelect: [],
      typeSelects: [
        {
          value: 0,
          label: "空间创客",
        },
        {
          value: 1,
          label: "学生创客",
        },
        {
          value: 2,
          label: "活动创客",
        },
      ],
      leaderSelects: [],
      statusSelects: [
        {
          value: 0,
          label: "未审核",
        },
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "待报销",
        },
        {
          value: 3,
          label: "已报销",
        },
      ],
      tableData: [], //列表
    };
  },
  methods: {
    Audit(val, num) {
      //显示审核对话框  num  0申请人提交对话框  1  管理员审核对话框
      console.log(val);
      if (num == 0) {
        if (val.actualuse == 0) {
          //申请人对话框,但没有填写实际使用，直接跳转到查看详情页面
          if (val.atit != null) {
            return this.$router.push(
              `/makerfundDetails?Id=${val.fid}&tit=${val.atit}&paid=${val.paid}`
            );
          } else {
            this.$router.push(
              `/makerfundDetails?Id=${val.fid}&tit=${val.ptit}&paid=${val.paid}`
            );
          }
          // this.$router.push(`/makerfundDetails?Id=${val.fid}&tit=${val.title}&aid=${val.acId}`)
          return this.$message.error("请填写实际使用金额");
        }
      }
      // return

      this.isManager = num;
      this.ProjectFundData = val;
      this.dialogVisible = true;
    },
    auditPass(val) {
      //审核通过
      // console.log(111);
      let param = {
        uid: this.$store.state.userInfo.userid,
        fid: this.ProjectFundData.fid,
        status: val,
      };
      this.ajax
        .post(this.$store.state.api + "/UpdateMakerFundState", param)
        .then(
          (res) => {
            // console.log(res);
            this.dialogVisible = false;
            if (res.data) {
              if (val == 0) {
                this.$message.success("已撤回");
              } else if (val == 1) {
                this.$message.success("提交成功");
              } else {
                this.$message.success("已通过");
              }
              this.getData();
            } else {
              this.$message.error("审核失败");
            }
          },
          (err) => {
            console.log(err);
          }
        );
    },
    endDialogShow(val) {
      //完结对话框显示
      this.dialogVisible1 = true;
      this.projectFundState = val;
      // console.log(val);
    },
    confirmEnd() {
      //确定完结
      let param = {
        uid: this.$store.state.userInfo.userid,
        fid: this.projectFundState,
        status: 3,
      };
      // console.log(param);
      this.ajax
        .post(this.$store.state.api + "/UpdateMakerFundState", param)
        .then(
          (res) => {
            // console.log(res);
            this.dialogVisible1 = false;
            if (res.data) {
              this.$message.success("完结成功");
              this.getData();
            } else {
              this.$message.error("完结失败");
            }
          },
          (err) => {
            console.log(err);
          }
        );
    },

    handleCurrentChange(val) {
      //当页数发生改变的时候调用获取列表数据请求
      // console.log(`当前页: ${val}`);
      this.table.currentPage = val;
      this.getData();
    },
    getData() {
			if(this.loading)return;
      this.loading = true;
      let param = {
        uid: this.$store.state.userInfo.userid,
        filter: this.selectInp.filter,
        department: this.selectInp.department,
        type: this.selectInp.type,
        leader: this.selectInp.leader,
        status: this.selectInp.status,
        inp: this.input,
        page: this.table.currentPage,
        lim: this.table.packageSize,
      };
      console.log(param);
      this.ajax.get(this.$store.state.api + "/selectAllFundApply", param).then(
        (res) => {
          console.log(res);
          let data = res.data;
          console.log(data);

          // return this.loading = false;
          let AllFund = 0;
          // if (data[0].length==0 && data[4][0]['total'] != 0) {
          //   this.table.currentPage=1
          //   this.getData()
          // }
          // console.log(data[0][0]['applyfund']);
          // data[0][0]['applyfund'].fo
          if (data[0].length > 0) {
            data[0].forEach((e) => {
              e.applyfund = JSON.parse(e.applyfund);
              for (let i in e.applyfund) {
                AllFund += e.applyfund[i] * 1;
              }
              e.applyfund = AllFund;
              AllFund = 0;
            });

            data[0].forEach((e) => {
              e.actualuse = JSON.parse(e.actualuse);
              for (let i in e.actualuse) {
                AllFund += e.actualuse[i] * 1;
              }
              e.actualuse = AllFund;
              AllFund = 0;
            });

            // console.log(data[0]);

            this.tableData = data[0];
            this.filterSelects = data[1];
            this.departmentSelect = data[2];
            this.leaderSelects = data[3];
            this.table.total = data[0][0].num;
          }

          this.loading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },

    init() {
      this.dialogVisible = false;
      this.createFromDialog = false;
    },
    details(Id, at, pt, paid) {
      //跳转详情页面
      // return console.log(Id,at,pt,paid);
      if (at != null) {
        return this.$router.push(
          `/makerfundDetails?Id=${Id}&tit=${at}&paid=${paid}`
        );
      } else {
        console.log(111);
        this.$router.push(`/makerfundDetails?Id=${Id}&tit=${pt}&paid=${paid}`);
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.makerfund {
  // :deep(.el-table--scrollable-x .el-table__body-wrapper){
  //   overflow-x: none;
  // }
  // .el-dialog{
  //   border-radius: 5px;
  //   overflow: hidden;
  // }

  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .dialog {
    //审核
    .el-dialog__header {
      background: #32455b;
    }
    .addDialogLogo {
      width: 60px;
      height: 30px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      line-height: 30px;
      background: #f2f2f2;
      position: absolute;
      left: 20px;
      top: 15px;
    }
    .el-dialog__title {
      color: #fff;
      display: flex;
      justify-content: center;
      font-size: 18px;
      position: relative;
      top: -2px;
    }
    .diaBtn {
      //dialog按钮
      font-size: 16px;
    }
    .el-dialog__body {
      padding: 30px 0px 30px 50px;
    }
    .diaTit {
      width: 100%;
      display: flex;
      font-size: 16px;
      // margin-right: 20px;
      justify-content: flex-start;
    }
    .diaTit1 {
      display: flex;
      margin-top: 20px;
      font-size: 16px;
      width: 91%;
      .spans {
        font-size: 16px;
        color: #000;
        box-sizing: border-box;
        padding-right: 10px;
      }
    }

    .spans1 {
      color: #000;
      min-width: 70px;
      margin-right: 5px;
      display: inline-block;
      text-align: justify;
      text-justify: distribute-all-lines;
      text-align-last: justify;
      transform: translate(0, 22%);
      padding-right: 15px;
    }
    // .el-input__inner{
    //   width: 300px;
    // }
    .diaTit5 {
      display: flex;
      margin-right: 15px;
      .el-input__inner {
        width: 100px;
      }
    }
  }
}
</style>