safetyEducationExamination/src/views/safetyEducationExaminationNew/personnelApproval/LabBindingApply.vue

<!-- 实验室绑定申请 -->
<template>
  <div class="app-container lab-binding-card">
    <div class="card-header">
      <span class="card-title">实验室绑定申请</span>
      <div class="header-right">
        <!-- 分组筛选按钮 -->
        <div class="table-top-button-box">
          <div>
            <p
              v-for="(btn, i) in filterData.statusBtns" :key="btn.value"
              :class="filterData.activeStatus === btn.value ? 'check-table-button' : ''"
              @click="checkButton(btn.value)"
            >{{ btn.label }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content-box">
      <el-table class="table-box" :data="dataList" border>
        <el-table-column prop="userName" label="申请人" width="80" show-overflow-tooltip/>
        <el-table-column prop="userAccount" label="学号" width="110" show-overflow-tooltip/>
        <el-table-column prop="educationName" label="用户类型" width="100" show-overflow-tooltip/>
        <el-table-column prop="deptName" label="所属学院" min-width="120" show-overflow-tooltip />
        <el-table-column prop="subName" label="申请实验室" min-width="160" show-overflow-tooltip />
        <el-table-column prop="levelName" label="分级" width="70" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="'color:'+scope.row.levelColor+';'">{{ scope.row.levelName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="分类" width="120" />
        <el-table-column prop="reason" label="进入原因" min-width="120" show-overflow-tooltip />
        <el-table-column prop="submitTime" label="提交时间" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.submitTime,"{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="approveTime" label="通过时间" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.approveTime,"{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusCode" label="状态" width="80" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="scope.row.statusCode==0?'status-txt-a':(scope.row.statusCode==1?'status-txt-b':(scope.row.statusCode==2?'status-txt-c':''))">
              {{ scope.row.statusCode==0?'待审批':(scope.row.statusCode==1?'已通过':(scope.row.statusCode==2?'已驳回':'')) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130" align="left">
          <template slot-scope="scope">
            <p class="button-color-a" v-if="scope.row.statusCode==0" @click="tableButton(1,scope.row)">通过</p>
            <p class="button-color-b" v-if="scope.row.statusCode==0" @click="tableButton(2,scope.row)">驳回</p>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.page"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
      />
    </div>
    <el-dialog class="slab-binding-card-dialog"
               :modal-append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false"
               title="驳回申请"
               :visible.sync="dialogType"
               v-if="dialogType"
               width="560px"
               append-to-body>
      <div style="min-height:60px;overflow: hidden">
        <div>
          <el-form :model="dialogData" ref="dialogForm" :rules="dialogRules">
            <el-form-item label="" prop="reason" label-width="0">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入原因"
                maxLength="100"
                resize="none"
                style="width: 520px"
                v-model="dialogData.reason">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogCancel">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    examElLabEduRelationAuditList,examElLabEduRelationAudit,
  } from "@/api/safetyEducationExaminationNew/index";
export default {
  name: 'LabBindingApply',
  data() {
    return {
      filterData: {
        activeStatus: '',
        statusBtns: [
          { label: '全部',   value: '' },
          { label: '待审批', value: '0' },
          { label: '已通过', value: '1' },
          { label: '已驳回', value: '2' },
        ]
      },
      queryParams: {
        page: 1,
        pageSize: 20,
      },
      dataList: [],
      //数据数量
      total: 0,
      dialogType:false,
      dialogData:{
        reason:'',
      },
      dialogRules:{
        reason: [
          { required: true, message: "请输入驳回原因", trigger: "blur" }
        ],
      },
      checkId:null,
    }
  },
  mounted(){
    this.getList();
  },
  methods: {
    checkButton(val){
      if(this.filterData.activeStatus != val){
        this.$set(this.filterData,'activeStatus',val);
        this.handleQuery();
      }
    },
    tableButton(val,row){
      let self = this;
      this.$set(this,'checkId',row.id);
      this.$set(this.dialogData,'reason','');
      if (val == 1){
        //通过
        this.$confirm('确认审核通过?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          self.examElLabEduRelationAudit(1)
        }).catch(() => {});
      } else {
        //驳回
        this.$set(this,'dialogType',true);
      }
    },
    //提交按钮
    dialogSubmit(){
      let self = this;
      this.$refs["dialogForm"].validate(valid => {
        if (valid) {
          self.examElLabEduRelationAudit(2)
        }
      })
    },
    examElLabEduRelationAudit(statusCode){
      let obj = {
        id:this.checkId,
        statusCode:statusCode,
        reason:this.dialogData.reason,
      }
      examElLabEduRelationAudit(obj).then(response => {
        this.msgSuccess(response.message)
        this.$set(this,'dialogType',false);
        this.getList();
      })
    },
    //关闭按钮
    dialogCancel(){
      this.$set(this,'dialogType',false);
    },
    //查询按钮
    handleQuery() {
      this.$set(this.queryParams, 'page', 1)
      this.getList()
    },
    //获取数据列表
    getList() {
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      obj.statusCode = this.filterData.activeStatus;
      examElLabEduRelationAuditList(obj).then(response => {
        this.$set(this, 'dataList', response.data.records)
        this.$set(this, 'total', response.data.total)
      })
    },
  },
}
</script>

<style scoped lang="scss">
.lab-binding-card {
  background: #fff;
  /*border-radius: 6px;*/
  padding: 20px;
  margin-bottom: 12px;
  /*box-shadow: 0 1px 4px rgba(0,0,0,0.06);*/
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .card-title {
      font-size: 16px;
      font-weight: 700;
      color: #222;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }
  .page-content-box{
    height:500px;
    padding:0;
  }

  /* 分组筛选按钮 — 与其他页面保持一致 */
  .table-top-button-box {
    display: inline-block;
    vertical-align: top;

    div {
      display: flex;

      p {
        border: 1px solid #DCDFE6;
        width: 80px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        font-size: 14px;

        &:nth-child(1) {
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        &:nth-child(2) { border-left: none; }
        &:nth-child(3) { border-left: none; border-right: none; }
        &:nth-child(4) {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        &.check-table-button {
          border: 1px solid #0183fa;
          background-color: #0183fa;
          color: #fff;
        }
      }
    }
  }
  .button-color-a{
    width:60px;
    cursor: pointer;
    margin-right:10px;
    display: inline-block;
    text-align: center;
    line-height:24px;
    border-radius:4px;
    border: 1px solid #00B176;
    color: #fff;
    background-color: #00B176;
  }
  .button-color-b{
    width:60px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    line-height:24px;
    border-radius:4px;
    border: 1px solid #E86452;
    color: #fff;
    background-color: #E86452;
  }
  .status-txt-a{
    color: #F59A48;
  }
  .status-txt-b{
    color: #00B176;
  }
  .status-txt-c{
    color: #E86452;
  }

  ::v-deep .row-reject td {
    background: #fffafa !important;
  }

  ::v-deep .el-table td {
    padding: 10px 0;
  }
}
</style>