pointsMall-admin/src/views/trainManage/operateTrainList.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.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" disabled clearable placeholder="审批状态" style="top: -4px; width: 200px">
        <el-option :key="item.dictValue" v-for="item in statusTypeList" :label="item.dictLabel" :value="item.dictValue">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</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" prop="title" min-width="100" label="培训主题">
      </el-table-column>
      <!-- <el-table-column align="center" prop="startTime" min-width="150" label="培训开始时间">
      </el-table-column>
      <el-table-column align="center" prop="endTime" min-width="150" label="培训结束时间">
      </el-table-column> -->
      <el-table-column align="center" prop="lecturerName" min-width="150" label="培训讲师">
      </el-table-column>
      <el-table-column align="center" min-width="80px" label="讲师积分" prop="lecturerIntegral">
      </el-table-column>
      <el-table-column align="center" min-width="120px" label="参加人积分" prop="traineeIntegral">
      </el-table-column>
     
      <el-table-column align="center" min-width="80px" label="上传人" prop="candidateName">
      </el-table-column>
      <el-table-column align="center" min-width="250px" label="部门" prop="candidateDeptName">
      </el-table-column>
      <el-table-column align="center" min-width="150px" label="日期" prop="createTime">
      </el-table-column>
      <!-- <el-table-column align="center" min-width="200px" label="培训材料">
        <template slot-scope="props">
          <div v-for="(item, index) in props.row.materialFiles" :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="200px" label="签到表照片">
        <template slot-scope="props">
          <div v-for="(item, index) in props.row.signPhotoFiles" :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="200px" label="现场照片">
        <template slot-scope="props">
          <div v-for="(item, index) in props.row.sitePhotoFiles" :key="index">
            <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="培训描述">
        <template slot-scope="props">
          <el-popover width="400" trigger="hover" :content="props.row.content">
            <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="参加人员">
        <template slot-scope="props">
          <el-popover trigger="hover">
            <el-table :data="props.row.trainees" border size="mini">
              <el-table-column min-width="200" align="center" prop="deptName" label="部门"></el-table-column>
              <el-table-column min-width="100" align="center" prop="userName" label="姓名"></el-table-column>
              <el-table-column min-width="100" align="center" prop="employeNo" label="员工号"></el-table-column>
            </el-table>
            <span style="color: #1e80ff;cursor: pointer;" slot="reference">
              {{ props.row.trainees[0].userName }}
            </span>
          </el-popover>
        </template>
      </el-table-column> -->
      <el-table-column align="center" min-width="120px" label="审核状态" prop="statusName">
        <!-- <template slot-scope="props">
          <el-popover trigger="hover">
            <el-table :data="props.row.trainLogs" border size="mini">
              <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
              <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
              <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
            </el-table>
            <span style="color: #1e80ff;cursor: pointer;" slot="reference">{{ props.row.statusName }}</span>
          </el-popover>
        </template> -->
      </el-table-column>
      <el-table-column align="center" label="操作" width="160px" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleClickView(scope.row, 'complete')">处理</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 :title="textMap[dialogStatus]" :visible.sync="dialogVisible" :close-on-click-modal="false" width="70%">
      <el-form status-icon label-position="center" label-width="100px" style="width:100%;">
        <div style="display: flex;">

          <el-form-item label="培训主题">
            <el-input disabled v-model="detailData.title"></el-input>
          </el-form-item>
          <el-form-item label="培训开始时间">
            <el-input disabled v-model="detailData.startTime"></el-input>
          </el-form-item>
          <el-form-item label="培训结束时间">
            <el-input disabled v-model="detailData.endTime"></el-input>
          </el-form-item>
        </div>

        <div style="display: flex;">
          <el-form-item label="培训讲师">
            <el-input disabled v-model="detailData.lecturerName"></el-input>
          </el-form-item>
          <el-form-item label="讲师积分">
            <el-input disabled v-model="detailData.lecturerIntegral"></el-input>
          </el-form-item>
          <el-form-item label="参加人积分">
            <el-input disabled v-model="detailData.traineeIntegral"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="上传人">
            <el-input disabled v-model="detailData.candidateName"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input disabled v-model="detailData.candidateDeptName"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-input disabled v-model="detailData.createTime"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item label="培训材料">
            <div v-for="(item, index) in detailData.materialFiles" :key="index" style="width: 192px;">
              <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
            </div>
          </el-form-item>
          <el-form-item label="签到表照片">
            <div v-for="(item, index) in detailData.signPhotoFiles" :key="index" style="width: 192px;">
              <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
            </div>
          </el-form-item>
          <el-form-item label="现场照片">
            <div v-for="(item, index) in detailData.sitePhotoFiles" :key="index" style="width: 192px;">
              <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
            </div>
          </el-form-item>
        </div>
        <h3></h3>
        <el-form-item label="培训描述">
          <el-input disabled type="textarea" v-model="detailData.content" style="width: 100%"></el-input>
        </el-form-item>
      </el-form>
      <h4>参加人员</h4>
      <el-table :data="detailData.trainees" border style="width: 100%">
        <el-table-column min-width="200" align="center" prop="deptName" label="部门"></el-table-column>
        <el-table-column min-width="100" align="center" prop="userName" label="姓名"></el-table-column>
        <el-table-column min-width="100" align="center" prop="employeNo" label="员工号"></el-table-column>
      </el-table>
      <h4>审批状态</h4>
      <el-table :data="detailData.trainLogs" border style="width: 100%">
        <el-table-column align="center" prop="auditor" label="处理人" width="180">
        </el-table-column>

        <el-table-column align="center" prop="comment" label="处理结果">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="处理时间" width="180">
        </el-table-column>
      </el-table>
      <el-form style="margin-top: 20px;" 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 type="primary" @click="complete(true)">同意</el-button>
                <el-button type="danger" @click="complete(false)">驳回</el-button>
            </div>
    </el-dialog>
  </div>
</template>
    
<style>
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.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,
  trainList,
} from "@/api/trainManage.js";
import { dataTypeList } from "@/api/public";
import waves from "@/directive/waves"; // 水波纹指令
import Tinymce from "@/components/Tinymce";

export default {
  components: { Tinymce },
  directives: { waves },
  data() {
    return {
      dataForm: {
        content: ''
      },
      dialogVisible: false,
      statusTypeList: [],
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        title: '',
        userName: '',
        status: "20",
      },
      dialogVisible: false,
      dialogStatus: '',
      textMap: {
        complete: "审批",
        view: "详情",
      },
      detailData: {},
    };
  },
  created() {


    this.getStatusTypeList();
    this.getList();
  },
  methods: {
    handleClickView(row, tag) {
      console.log(row);
      this.dialogStatus = tag;
      this.detailData = row;
      this.dialogVisible = true;
      this.id = row.id;
        this.$nextTick(() => {
            this.dataForm.content = '';
            this.$refs["dataForm"].clearValidate();
        });
    },
    checked(val){
            if(val.flag == false){
                if(!val.comment){
                    this.$alert("请输入审批内容", "提示", {
                        confirmButtonText: "确定",
                    });
                    return false;
                }
            }
           
            return true;
        },
    complete(flag) {
            const parms = {
                trainInfoId:this.id,
                comment: this.dataForm.content,
                flag:flag,
            }
            const isChecked = this.checked(parms);
            if(isChecked){
                complete(parms).then((response) => {
                    this.$notify({
                        title: "成功",
                        message: "操作成功",
                        type: "success",
                        duration: 2000,
                    });
                    this.dialogVisible = false;
                    this.getList();
                })
                .catch(() => { });
            }
            
        },
  
  
    getStatusTypeList() {
      dataTypeList({ dictType: 'train_complete_status' }).then(response => {
        this.statusTypeList = response.data.data;
      }).catch(() => { });
    },
    getList() {
      this.listLoading = true;
      trainList(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();
    },
  },
};
</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>