zhgdyun/src/views/projectFront/examSystem2/noticeManagement/noticeManagement.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form :inline="true" :model="noticeForm" label-width="100px" class="demo-form-inline">
        <el-form-item prop="noticeSwitch">
          <div style="padding: 0 0px 0 0;display: flex;align-items: center">
            <span style="padding: 0 10px 0 0;">是否开启通知提醒</span>
            <el-switch v-model="noticeForm.enable" :disabled="isDisabled2" @change="disabledFn2" active-color="green" inactive-color="black" :active-value="1" :inactive-value="0"></el-switch>
          </div>
        </el-form-item>
        <el-form-item label="培训前" prop="examTimeNumber" :rules="[
          
          { type: 'number', message: '必须为数字值', trigger: 'change'}] ">
          <div style="width: 80px">
            <el-input v-model.number="noticeForm.examNum" size="medium" :disabled="isDisabled" @blur="disabledFn" autocomplete="off"></el-input>
          </div>
        </el-form-item>
        <el-form-item>天</el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="submitNoticeForm('noticeForm')">保 存</el-button>
          <el-button type="primary" size="medium" plain @click="editNotice">编 辑</el-button>
        </el-form-item>
        
      </el-form>
      <!-- <el-button type="primary" size="medium" @click="add">新增</el-button> -->
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="tableData">
        <el-table-column prop="workerName" align="center" label="姓名" width="180"></el-table-column>
        <!-- <el-table-column prop="noticeWay" align="center" label="提醒方式"></el-table-column> -->
        <el-table-column prop="content" align="center" label="提醒事件"></el-table-column>
        <el-table-column prop="createTime" align="center" label="时间" width="180"></el-table-column>
        <el-table-column width="240" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" style="color:#ec4b52" class="delete-btn" icon="el-icon-delete" @click.native.stop="remove(scope.row) ">
              <span style="color:black">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange" :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize" layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background>
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  addConfigApi,queryBySnConfigApi,editConfigApi,getNoticePageApi,delNoticeApi
} from '@/assets/js/api/examSystem/examSystem'


export default {
  mounted() {},
  created() {
    this.getConfig()
    console.log('👇')
    this.getNoticePage()
    console.log(this.$store.state.UPLOADURL)
  },
  data() {
    return {
      // noticeForm: {
      //   noticeSwitch: '1',
      //   examTimeNumber: 0,
      //   examTimeType: '3',
      //   studyTimeNumber: 0,
      //   studyTimeType: '3',
      // },
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      tableData: [],
      isDisabled:true,
      isDisabled2:true,
      noticeForm:{
        enable: '',
        examNum: '',
        examType: ''
      },
    }
  },
  methods: {
    getConfig() {
      queryBySnConfigApi({
        // pageNo: this.pagInfo.pageNo,
        // pageSize: this.pagInfo.pageSize,
        sn: this.$store.state.projectSn,
      }).then((res) => {
        if (res.success) {
          console.log(res,'config-result');
          this.noticeForm = res.result
        }
      })
    },
    getNoticePage() {
      getNoticePageApi({
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        projectSn: this.$store.state.projectSn,
      }).then((result) => {
        if (result.success) {
          console.log(result,'page');
          this.tableData = result.result.records
          this.pagInfo.total = result.result.total
        }
      })
    },
    remove(obj){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // alert('还未对接口')
          delNoticeApi({ id: obj.id }).then((res) => {
            if (res.success) {
              this.getNoticePage()
              this.$message.success('删除成功')
            } else {
              this.$message({
                type: 'error',
                message: res.message,
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    disabledFn(){
      this.isDisabled = true
    },
    editNotice(){
      this.isDisabled = false
      this.isDisabled2 = false
    },
    disabledFn2(){
      this.submitNoticeForm()
      this.isDisabled2 = true
    },
    submitNoticeForm(noticeForm) {
      // this.$refs[this.noticeForm].validate((valid) => {
      //   if (valid) {
          editConfigApi({
            id:this.noticeForm.id,
            enable:this.noticeForm.enable,
            examNum:this.noticeForm.examNum,
            examType:this.noticeForm.examType,
            projectSn: this.$store.state.projectSn,
          }).then(result => {
              if (result.success) {
                  console.log('信息编辑成功', result);
                  this.$message.success(result.message);
              }
          })
        // } else {
        //   alert('error submit!!')
        //   return false
        // }
      // })
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val
      this.getNoticePage()
      
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val
      this.getNoticePage()
    },
    refresh() {
      this.pagInfo.pageNo = 1 //页数
      this.pagInfo.pageSize = 10 //条数
      this.getNoticePage()
    },
  },
}
</script>
<style lang="less" scoped>
.tables2 {
  min-height: auto;
}
.textStyle {
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tableBtns {
  display: flex;
  justify-content: center;
  align-item: center;
}
</style>