pointsMall-admin/src/views/certManage/certList.vue

<template>
    <div class="app-container calendar-list-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="证书类型"
                v-model="listQuery.name"></el-input>
                <el-input clearable class="filter-item" style="width: 200px;" placeholder="证书名称"
                v-model="listQuery.title"></el-input>
                <el-input clearable class="filter-item" style="width: 200px;" placeholder="上传人"
                v-model="listQuery.userName"></el-input>
        <el-select v-model="listQuery.status" clearable placeholder="审批状态" style="top: -4px; width: 200px">
          <el-option :key="item.type" v-for="item in statusTypeList" :label="item.name" :value="item.type">
          </el-option>
        </el-select>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button>
      </div>
  
      <!-- 查询结果 -->
      <el-table size="small" :data="list" v-loading="listLoading"
        element-loading-text="正在查询中。。。" border fit highlight-current-row>
        <el-table-column type="index" label="序号" header-align="center" align="center">
        </el-table-column>
        <el-table-column align="center" min-width="200px" label="附件">
          <template slot-scope="props">
                <div v-for="(item, index) in props.row.files" :key="index">
                  <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
                </div>
              </template>
        </el-table-column>
        <el-table-column align="center" min-width="150px" label="证书大类" prop="typeName">
        </el-table-column>
        <el-table-column align="center" prop="categoryName" min-width="100" label="证书类型">
        </el-table-column>
        <el-table-column align="center" prop="title" min-width="100" label="证书名称">
        </el-table-column>
        <el-table-column align="center" min-width="80px" label="上传人" prop="userName">
        </el-table-column>
        <el-table-column align="center" min-width="250px" label="公司" prop="companyName">
        </el-table-column>
        <el-table-column align="center" min-width="250px" label="部门" prop="deptName">
        </el-table-column>
        <el-table-column align="center" min-width="80px" label="获得积分" prop="integral">
        </el-table-column>
        <el-table-column align="center" min-width="80px" label="审核状态" prop="statusName">
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="日期" prop="createTime">
        </el-table-column>
        <el-table-column align="center" label="操作" width="150px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status == 0?false:true" type="primary" size="small" @click="handleComplete(scope.row.id,0)">通过</el-button>
            <el-button :disabled="scope.row.status == 0?false:true" type="warning" size="small" @click="handleCreate(scope.row.id)">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <!-- 添加或修改对话框 -->
      <el-dialog :close-on-click-modal="false" title="证书审批" :visible.sync="dialogFormVisible" width="40%">
            <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
                <el-form-item label="审批内容" prop="content">
                  <el-input type="textarea" :rows="2" placeholder="请输入审批内容" v-model="dataForm.content"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleComplete(certificateId,1)">确定</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
    
  <style>
  .demo-table-expand {
    font-size: 0;
  }
  
  .demo-table-expand label {
    width: 200px;
    color: #99a9bf;
  }
  
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  </style>
    
  <script>
  import {
    complete,
    list,
  } from "@/api/certManage";
  import waves from "@/directive/waves"; // 水波纹指令
  import Tinymce from "@/components/Tinymce";
  
  export default {
    components: { Tinymce },
    directives: { waves },
    data() {
      return {
        certificateId:'',
        dialogFormVisible: false,
        dataForm: {
          content: ''
        },
        rules: {
          content: [{ required: true, message: "审批内容不能为空", trigger: "blur" }],
        },
        statusTypeList: [
          {
            type: 0,
            name: "审核中",
          },
          {
            type: 1,
            name: "通过",
          },
          {
            type: 2,
            name: "不通过",
          },
        ],
        list: [
        ],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          name:'',
          title:'',
          userName:'',
          status: "",
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      handleDownLoad(){
            window.location.href = process.env.BASE_API + '/mall-integral-obtain/export/certificate?name=' + this.listQuery.name + '&title=' + this.listQuery.title + '&userName=' + this.listQuery.userName + '&status=' + this.listQuery.status;
        },
      getList() {
        this.listLoading = true;
        list(this.listQuery)
          .then((response) => {
            this.list = response.data.data.items;
            this.total = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      },
  
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
  
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
  
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      handleCreate(id) {
        this.dialogFormVisible = true;
        this.certificateId = id;
        this.$nextTick(() => {
            this.dataForm.content = '';
            this.$refs["dataForm"].clearValidate();
        });
      },
      handleComplete(certificateId,flag){
        if(flag==1){
          this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            complete({certificateId:certificateId,flag:flag,content:this.dataForm.content}).then(() => {
                  this.dialogFormVisible = false;
                        this.$notify({
                        title: "成功",
                        message: "操作成功",
                        type: "success",
                        duration: 2000,
                    });
                        this.getList();
                    });
          }
        })  
        }else{
          complete({certificateId:certificateId,flag:flag}).then(() => {
                        this.$notify({
                        title: "成功",
                        message: "操作成功",
                        type: "success",
                        duration: 2000,
                    });
                        this.getList();
                    });
        }
        
      }
      
    },
  };
  </script>
  <style>
  .ad-avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .ad-avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  
  .ad-avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .ad-avatar {
    display: block;
  }
  </style>