安全考核迁移

叶松

2023-11-16 3beb3b001475e09c8beb8a5a107464d4abf39fbe

安全考核迁移

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

@@ -1,341 +1,28 @@
<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 class="main">
    <div class="main_tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="安全考核" name="first"></el-tab-pane>
        <el-tab-pane label="安全考题" name="second"></el-tab-pane>
      </el-tabs>
    </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>
      <component :is="activeName === 'first' ? 'SafetyExamine' : 'SafetyTopic'"></component>
    </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';
import SafetyExamine from './components/SafetyExamine.vue'; // 安全考核
import SafetyTopic from './components/SafetyTopic.vue'; // 安全考题
  export default {
    components: {
      ExamineRecord
      SafetyExamine,
      SafetyTopic
    },
    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();
        }
        activeName: 'first'
      }
    }
  }
@@ -343,4 +30,8 @@

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

/deep/.main {
  background: none;
}
</style>

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

文件名从 web/src/views/SecureManage/NipCheck/ExamineRecord.vue 修改
@@ -89,7 +89,7 @@
</template>

<script>
import { buttonPinia } from '../../../pinia';
import { buttonPinia } from '../../../../pinia';
  export default {
    name: 'ExamineRecord',
    props: {
@@ -229,7 +229,7 @@
    width: calc(100% / 8);
    height: 80px;
    color: #FFFFFF;
    background: url('../../../assets/stir_img.png')no-repeat;
    background: url('../../../../assets/stir_img.png')no-repeat;
    background-size: 100% 100%;

    &:first-child {

 web/src/views/SecureManage/NipCheck/components/SafetyExamine.vue

对比新文件
@@ -0,0 +1,346 @@
<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>

 web/src/views/SecureManage/NipCheck/components/SafetyTopic.vue

对比新文件
@@ -0,0 +1,343 @@
<template>
  <div class="main tabs_main">
    <div class="main_header">
      <div class="header_item">
        <span class="header_label">考核名称：</span>
        <el-input v-model="examName" clearable placeholder="请输入考核名称"></el-input>
      </div>
      <div class="header_item">
        <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchSafetyTopicList(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="safetyTopicList"
        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="question" label="问题" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="answers" label="答案" show-overflow-tooltip 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 }">
            <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>
          </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="asyncTopic"
      width="35%">
      <el-form ref="form" :model="formTopic" :rules="rulesTopic" label-width="auto" class="rule_form">
        <el-form-item label="考核名称：" prop="examId">
          <el-select v-model="formTopic.examId" clearable placeholder="请选择考核名称">
            <el-option
              v-for="item in typeNameData"
              :key="item.examId"
              :label="item.examName"
              :value="item.examId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题：" prop="question">
          <el-input 
            type="textarea" 
            v-model="formTopic.question"
            clearable
            placeholder="请输入问题"
            :maxlength="200"
            show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="分数：" prop="score">
          <el-input-number 
            v-model="formTopic.score"
            :controls="false"
            :min="0"
            placeholder="请输入分数">
          </el-input-number>
        </el-form-item>
        <el-form-item label="答案：" prop="answerList">
          <el-table
            :data="formTopic.answerList"
            height="240" 
            :header-cell-style="() => 'background-color: #082F57; color: #18F6F8'">
            <el-table-column label="序号" width="60" align="center">
              <template #default="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="答案" align="center">
              <template #default="{ row }">
                <el-input v-model="row.answer" clearable placeholder="请输入答案"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否为正确答案" align="center">
              <template #default="{ row }">
                <el-switch
                  v-model="row.isRight"
                  active-color="#409FFF"
                  inactive-color="#FD494B"
                  active-text="是"
                  :active-value="1"
                  inactive-text="否"
                  :inactive-value="0">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="{ $index }">
                <el-button class="table_btn" size="mini" v-if="$index + 1 === formTopic.answerList.length" @click="addDataList($index)">新增</el-button>
                <el-button class="delete_btn" size="mini" v-else @click="deleteDataList($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="asyncTopic = false">取 消</el-button>
        <el-button class="submit_btn" @click="asyncTitle ? submitInsertForm() : submitUpdateForm()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { buttonPinia } from '../../../../pinia';
import { throttle } from '../../../../plugins/public';
  export default {
    data() {
      return {
        examName: '',
        loading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        safetyTopicList: [],
        asyncTitle: true, // true 新增  false  修改
        asyncTopic: false, // 弹窗
        formTopic: {}, // 表单信息
        rulesTopic: {
          examId: [{
            required: true,
            message: '请选择考核名称',
            trigger: ['blur', 'change']
          }],
          question: [{
            required: true,
            message: '请输入问题',
            trigger: 'blur'
          }],
          score: [{
            required: true,
            message: '请输入分数',
            trigger: 'blur'
          }],
          answerList: [{
            required: true,
            message: '请填入答案信息',
            trigger: 'blur'
          }],
        }, // 表单校验信息
        typeNameData: [], // 类型名称信息
      }
    },
    mounted() {
      this.searchSafetyTopicList(true);
    },
    methods: {
      // 获取考核名称信息
      async getAllSecureTrainPull() {
        const { data } = await this.$api.Safety.searchSafetyExamineList({
            pageNum: 1,
            pageSize: 1000000,
            examName: '',
            startDay: '',
            endDay: ''
          })
        this.typeNameData = data.list;
      },
      // 查询安全考题信息
      searchSafetyTopicList(bol) {
        if(bol) {
          this.pageNum = 1;
        }
        this.loading = true;
        this.safetyTopicList = [];
        this.$api.Safety.searchSafetyTopicList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          trainName: this.examName
        }).then((res) => {
          if(res.success) {
            this.total = res.data.total;
            this.safetyTopicList = res.data.list;
          }
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        })
      },
      // 打开添加信息
      propInsert() {
        this.asyncTitle = true;
        this.asyncTopic = true;
        this.$set(this.formTopic, 'answerList', [{
          answer: '',
          isRight: 0
        }]);
      },
      // 打开修改信息
      propUpdate(row) {
        this.$api.Safety.getAnswerlIstInfo({
          queId: row.queId
        }).then((res) => {
          this.$set(this.formTopic, 'answerList', res.data.map(item => {
            return {
              answer: item.answer,
              isRight: item.isRight
            }
          }))
        })
        this.$set(this.formTopic, 'queId', row.queId);
        this.$set(this.formTopic, 'examId', row.examId);
        this.$set(this.formTopic, 'question', row.question);
        this.$set(this.formTopic, 'score', row.score);
        this.asyncTitle = false;
        this.asyncTopic = true;
      },
      // 删除考题信息
      deleteInfo(row) {
        this.$confirm("该操作将删除该考题信息，是否继续删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
       })
       .then(() => {
         this.$api.Safety.deleteSafetyTopicInfo({
          queId: row.queId
        }).then(res => {
          if(res.success) {
            this.searchSafetyTopicList(true);
            this.$message.success("删除成功！");
          } else {
            this.$message.warning(res.statusMsg);
          }
        })
       })
       .catch(() => {
         this.$message.warning("您已取消");
       })
      },
      // 新增题目信息
      addDataList(index) {
        this.$set(this.formTopic.answerList, index + 1, {
          answer: '',
          isRight: 0
        });
      }, 
      // 删除题目信息
      deleteDataList(index) {
        this.formTopic.answerList.splice(index, 1);
      },
      // 提交添加信息
      submitInsertForm: throttle(function () {
        this.$refs.form.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.formTopic);
            this.$api.Safety.insertSafetyTopicInfo(params).then((res) => {
              if(res.success) {
                this.asyncTopic = false;
                this.$message.success('添加成功!');
                this.searchSafetyTopicList(true);
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 提交修改信息
      submitUpdateForm: throttle(function() {
        this.$refs.form.validate((valid) => {
          if(valid) {
            const params = Object.assign({}, this.formTopic);
            this.$api.Safety.insertSafetyTopicInfo(params).then((res) => {
              if(res.success) {
                this.asyncTopic = false;
                this.$message.success('修改成功!');
                this.searchSafetyTopicList(true);
              } else {
                this.$message.warning(res.statusMsg);
              }
            })
          }
        })
      }, 3000),
      // 切换页码
      changePageNum(page) {
        this.pageNum = page;
        this.searchSafetyTopicList();
      },
      // 切换每页条数
      changePageSize(size) {
        this.pageSize = size;
        this.searchSafetyTopicList();
      },
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
        return pinia.$state.buttonInfo.includes(str);
      }
    },
    watch: {
      asyncTopic(bol) {
        if(bol) {
          this.getAllSecureTrainPull();
          this.getAllSecureTrainPull();
        } else {
          this.formTopic = {};
          this.$refs.form.resetFields();
        }
      }
    }
  }
</script>

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

::v-deep .el-form-item__content .el-switch {
  padding: 0 !important;
}

::v-deep .el-switch__label {
  color: #FFFFFF;
}

::v-deep .el-switch__label.is-active {
  color: #1890ff;
}
</style>