安全考核界面迁移

叶松

2023-11-16 c97a7463b25c98384ab265f33b0176970d246a86

安全考核界面迁移

 web/src/views/SecureManage/NipCheck/ExamineRecord.vue

对比新文件
@@ -0,0 +1,250 @@
<template>
  <div class="main tabs_main back_main">
    <div class="back_item">
      <el-button icon="el-icon-back" @click="$emit('update:recordShow', false)">返回</el-button>
    </div>
    <div class="main_info">
      <div
        class="main_info_item"
        v-for="item in recordInfoList"
        :key="item.id">
        <span>{{item.materialName}}</span>
        <span class="main_info_item--value">{{statisticInfo[item.materialValue]}}</span>
      </div>
    </div>
    <div class="main_header" style="margin-top: 0">
      <div class="header_item">
        <span class="header_label">考核结果：</span>
        <el-select v-model="examResult" clearable placeholder="请选择考核结果">
          <el-option
            v-for="item in resultData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">班组：</span>
        <el-select v-model="groupId" clearable placeholder="请选择班组">
          <el-option
            v-for="item in groupData"
            :key="item.groupId"
            :label="item.groupName"
            :value="item.groupId">
          </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">考核时间：</span>
        <el-date-picker 
          v-model="timeDate" 
          type="daterange" 
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="header_item">
        <el-button icon="el-icon-search" @click="searchExamineRecordList(true)">查询</el-button>
      </div>
    </div>
    <div class="main_content">
      <el-table
        v-loading="loading"
        :data="examineRecordList"
        height="100%">
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="examName" label="考核名称" width="180" align="center"></el-table-column>
        <el-table-column prop="realName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="groupName" label="班组" align="center"></el-table-column>
        <el-table-column prop="startTime" label="考核时间" align="center"></el-table-column>
        <el-table-column prop="useTime" label="用时" align="center"></el-table-column>
        <el-table-column prop="score" label="考核成绩" align="center"></el-table-column>
        <el-table-column label="考核结果" align="center">
          <template #default="{ row }">
            <span>{{row.pass === 1 ? '合格' : row.pass === 0 ? '不合格' : ''}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main_footer">
      <el-pagination
        background
        @current-change="changePageNum"
        @size-change="changePageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { buttonPinia } from '../../../pinia';
  export default {
    name: 'ExamineRecord',
    props: {
      examineId: String,
      recordShow: Boolean
    },
    data() {
      return {
        recordInfoList: [{
          id: 1,
          materialName: '应考人数',
          materialValue: 'planExamUser'
        },{
          id: 2,
          materialName: '实考人数',
          materialValue: 'totalExamUser'
        },{
          id: 3,
          materialName: '缺考人数',
          materialValue: 'noExamUser'
        },{
          id: 4,
          materialName: '合格人数',
          materialValue: 'passExamUser'
        },{
          id: 5,
          materialName: '不合格人数',
          materialValue: 'noPassExanUser'
        }], // 页头信息
        statisticInfo: {}, // 统计信息
        examResult: '',
        resultData: [{
          value: 0,
          label: '不合格'
        },{
          value: 1,
          label: '合格'
        }], // 考核结果
        departId: '',
        groupId: '',
        groupData: [],
        timeDate: '',
        loading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        examineRecordList: []
      }
    },
    mounted() {
      this.getExamRecordStatistical();
      this.getAllDepartmentData();
      this.searchExamineRecordList(true);
    },
    methods: {
      // 获取部门班组信息
      async getAllDepartmentData() {
        const { data } = await this.$api.Personnerl.GETDEPARTMENTDATA();
        const groupData = data.map(item => item.groups);
        this.groupData = groupData.flat(Infinity);
      },
      // 查询考核记录统计
      async getExamRecordStatistical() {
        const { data } = await this.$api.Safety.getExamRecordStatistical({
          examId: this.examineId
        })
        this.statisticInfo = data;
      },
      // 查询记录信息
      searchExamineRecordList(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        this.loading = true;
        this.examineRecordList = [];
        this.$api.Safety.searchSafetyCheckRecord({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          examId: this.examineId,
          examResult: this.examResult,
          departId: this.departId,
          groupId: this.groupId,
          startTime: this.timeDate ? this.timeDate[0] + ' 00:00:00' : '',
          endTime: this.timeDate ? this.timeDate[1] + ' 23:59:59' : ''
        }).then((res) => {
          if(res.success) {
            this.total = res.data.total;
            this.examineRecordList = res.data.list;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      // 切换页码
      changePageNum(page) {
        this.pageNum = page;
        this.searchExamineRecordList();
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
        this.searchExamineRecordList();
      },
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '@/style/layout-main.scss';

.back_main {
  background: none !important;
}

.back_item {
  display: flex;
  justify-content: flex-end;
}

.main_info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 10px 10px;

  .main_info_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% / 8);
    height: 80px;
    color: #FFFFFF;
    background: url('../../../assets/stir_img.png')no-repeat;
    background-size: 100% 100%;

    &:first-child {
      margin-left: 0 !important;
    }

    &:nth-child(odd) {
      margin: 0 20px;
    }

    .main_info_item--value {
      padding-top: 2px;
      color: #18F6F8;
      font-size: 18px;
    }
  }
}
</style>

 web/src/views/SecureManage/NipCheck/SafeExam.vue

@@ -1,3 +1,346 @@
<template>
    <div>安全考核</div>
</template>
  <div class="main tabs_main" v-if="!recordShow">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">考核名称：</span>
        <el-input v-model="examineName" clearable placeholder="请输入考核名称"></el-input>
      </div>
      <div class="header_item">
        <span class="header_label">时间范围：</span>
        <el-date-picker 
          v-model="timeData" 
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="header_item">
        <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchSafetyExamineList(true)">查询</el-button>
        <el-button class="search_btn" v-if="showButton('insert')" icon="el-icon-plus" @click="propInsert()">新增</el-button>
      </div>
    </div>
    <div class="main_content">
      <el-table
        v-loading="loading"
        :data="examineList"
        height="100%">
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="examName" label="考核名称" width="180" align="center"></el-table-column>
        <el-table-column prop="examDate" label="考核日期" align="center"></el-table-column>
        <el-table-column prop="userCount" label="人数" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propUpdate(row)">修改</el-button>
            <el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteInfo(row)">删除</el-button>
            <el-button class="table_btn" size="mini" v-if="showButton('delete')" @click="propRecord(row)">记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main_footer">
      <el-pagination
        background
        @current-change="changePageNum"
        @size-change="changePageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 新增考核 修改考核信息 -->
    <el-dialog
      class="prop_dialog"
      :title="asyncTitle ? '新增安全考核' : '修改安全考核信息'"
      :visible.sync="asyncExamine"
      width="35%">
      <el-form ref="form" :model="formExamine" :rules="rulesExamine" label-width="auto" class="rule_form">
        <el-form-item label="考核名称：" prop="examName">
          <el-input v-model="formExamine.examName" clearable placeholder="请输入考核名称"></el-input>
        </el-form-item>
        <el-form-item label="考题数量：" prop="questionCount">
          <el-input-number 
            v-model="formExamine.questionCount"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入考题数量">
          </el-input-number>
        </el-form-item>
        <el-form-item label="合格分数：" prop="qualifiedScore">
          <el-input-number 
            v-model="formExamine.qualifiedScore" 
            :controls="false"
            :min="0"
            placeholder="请输入合格分数">
          </el-input-number>
        </el-form-item>
        <el-form-item label="考核日期：" prop="examDate">
          <el-date-picker
            v-model="formExamine.examDate"
            type="date"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型：" prop="examType">
          <el-select v-model="formExamine.examType" clearable placeholder="请选择类型" @change="getSecureTrainPull">
            <el-option
              v-for="item in typeData"
              :key="item.dictId"
              :label="item.dictName"
              :value="item.dictId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型名称：" prop="trainId">
          <el-select v-model="formExamine.trainId" clearable placeholder="请选择类型名称">
            <el-option
              v-for="item in typeNameData"
              :key="item.secureId"
              :label="item.secureName"
              :value="item.secureId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="asyncExamine = false">取 消</el-button>
        <el-button class="submit_btn" @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
  <examine-record v-else :examine-id.sync="examineId" :record-show.sync="recordShow"></examine-record>
</template>

<script>
import { buttonPinia } from '../../../pinia';
import { throttle } from '../../../plugins/public';
import ExamineRecord from './ExamineRecord.vue';
  export default {
    components: {
      ExamineRecord
    },
    data() {
      return {
        examineName: '',
        timeData: '',
        loading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        examineList: [],
        asyncTitle: true, // true 新增  false 修改
        asyncExamine: false, // 弹窗
        formExamine: {}, // 表单信息
        rulesExamine: {
          examName: [{
            required: true,
            message: '请输入考核名称',
            trigger: 'blur'
          }],
          questionCount: [{
            required: true,
            message: '请输入考题数量',
            trigger: 'blur'
          }],
          qualifiedScore: [{
            required: true,
            message: '请输入合格分数',
            trigger: 'blur'
          }],
          examDate: [{
            required: true,
            message: '请选择考试日期',
            trigger: ['blur', 'change']
          }],
          examType: [{
            required: true,
            message: '请选择类型',
            trigger: ['blur', 'change']
          }],
          trainId: [{
            required: true,
            message: '请选择类型名称',
            trigger: ['blur', 'change']
          }]
        }, // 表单验证
        typeData: [], // 类型信息
        typeNameData: [], // 类型名称信息
        recordShow: false, // 记录
        examineId: '',
      }
    },
    mounted() {
      this.searchSafetyExamineList(true);
    }, 
    methods: {
      // 获取类型信息
      async getExamineTypeData() {
        const { data } = await this.$api.Dictionary.searchDictionary({
          dictType: 'train_type',
          pageNum: 1,
          pageSize: 100000
        });
        this.typeData = data.list;
      },
      // 查询安全考核信息
      searchSafetyExamineList(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        this.loading = true;
        this.examineList = [];
        this.$api.Safety.searchSafetyExamineList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          examName: this.examineName,
          startDay: this.timeData ? this.timeData[0] : '',
          endDay: this.timeData ? this.timeData[1] : ''
        }).then((res) => {
          if(res.success) {
            this.total = res.data.total;
            this.examineList = res.data.list;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      // 打开添加信息
      propInsert() {
        this.asyncTitle = true;
        this.asyncExamine = true;
      },
      // 打开修改信息
      propUpdate(row) {
        this.$api.Safety.getAllSecureTrainPull({
          secureType: row.examType
        }).then((res) => {
          this.typeNameData = res.data;
        })
        this.$set(this.formExamine, 'examId', row.examId);
        this.$set(this.formExamine, 'examName', row.examName);
        this.$set(this.formExamine, 'questionCount', row.questionCount);
        this.$set(this.formExamine, 'qualifiedScore', row.qualifiedScore);
        this.$set(this.formExamine, 'examDate', row.examDate);
        this.$set(this.formExamine, 'examType', row.examType);
        this.$set(this.formExamine, 'trainId', row.trainId);
        this.asyncTitle = false;
        this.asyncExamine = true;
      },
      // 打开记录信息
      propRecord(row) {
        this.examineId = row.examId;
        this.recordShow = true;
      },
      // 删除考核信息
      deleteInfo(row) {
        this.$confirm("该操作将删除该考核信息，是否继续删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
       })
       .then(() => {
         this.$api.Safety.deleteSafetyExamineInfo({
          examId: row.examId
        }).then(res => {
          if(res.success) {
            this.searchSafetyExamineList(true);
            this.$message.success("删除成功！");
          } else {
            this.$message.warning(res.statusMsg);
          }
        })
       })
       .catch(() => {
         this.$message.warning("您已取消");
       })
      },
      // 提交添加信息
      submitInsertForm: throttle(function () {
        this.$refs.form.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.formExamine);
            this.$api.Safety.insertSafetyExamineInfo(params).then((res) => {
              if(res.success) {
                this.asyncExamine = false;
                this.searchSafetyExamineList(true);
                this.$message.success('添加成功!');
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 提交修改信息
      submitUpdateForm: throttle(function() {
        this.$refs.form.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.formExamine);
            this.$api.Safety.insertSafetyExamineInfo(params).then((res) => {
              if(res.success) {
                this.asyncExamine = false;
                this.searchSafetyExamineList(true);
                this.$message.success('修改成功!');
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 根据类型获取类型名称信息
      getSecureTrainPull(data) {
        this.typeNameData = [];
        if(data) {
          this.$api.Safety.getAllSecureTrainPull({
            secureType: data
          }).then((res) => {
            this.typeNameData = res.data;
          })
        } else {
          this.$set(this.formExamine, 'trainId', '');
        }
      },
      // 切换页码
      changePageNum(page) {
        this.pageNum = page;
        this.searchSafetyExamineList();
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
        this.searchSafetyExamineList();
      },
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      }
    },
    watch: {
      asyncExamine(bol) {
        if(bol) {
          this.getExamineTypeData();
        } else {
          this.formExamine = {};
          this.$refs.form.resetFields();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '@/style/layout-main.scss';
</style>