safetyEducationExamination/src/views/safetyEducationExaminationNew/publicConfiguration/basicConfiguration/specialtyConfiguration.vue

<!--专业类别-->
<template>
  <div class="page-container basicConfiguration-specialtyConfiguration">
    <div class="top-box">
      <el-form class="add-form-box" :model="newData" ref="form" label-width="">
        <el-form-item label="" prop="disciplineName">
          <div style="display: flex">
            <el-input v-model="newData.disciplineName" placeholder="输入考试类型名称" maxLength="20" style="width:500px;"></el-input>
            <p class="form-button" @click="addButton()">+ 添加</p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <p class="title-p">专业类别名称</p>
    <div class="bottom-box scrollbar-box">
      <div class="for-box" v-for="(item,index) in dataList" :key="index">
        <div class="input-box" v-if="editorIndex === index">
          <el-input v-model="item.disciplineName" placeholder="输入考试类型名称"
                    maxLength="20" style="flex:1;margin:10px 0 10px 5px;"></el-input>
          <p @click="confirmButton()">确定</p>
        </div>
        <div class="text-box" v-else>
          <p>{{item.disciplineName}}</p>
          <p @click="editorButton(index)">修改</p>
          <p @click="delButton(index)">删除</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import { examElDisciplineTypeList,examElDisciplineTypeBatchSave } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'specialtyConfiguration',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{
          disciplineName:'',
        },
        dataList:[],
        editorIndex:null,
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      initialize(){
        examElDisciplineTypeList({}).then(response => {
          this.$set(this,'dataList',response.data);
        });
      },
      //修改按钮
      editorButton(index){
        this.$set(this,'editorIndex',index);
      },
      //确定
      confirmButton(){
        if(!this.dataList[this.editorIndex].disciplineName){
          this.msgError('输入考试类型名称')
          return
        }
        this.$set(this,'editorIndex',null);
      },
      delButton(index){
        this.dataList.splice(index,1)
      },
      addButton(){
        if(!this.newData.disciplineName){
          this.msgError('输入考试类型名称')
          return
        }
        this.dataList.push({
          disciplineName:this.newData.disciplineName
        })
        this.$set(this.newData,'disciplineName','');
      },
      //重置
      resetButton(){
        let self = this;
        this.$confirm('确认重置?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          this.initialize();
        }).catch(() => {});
      },
      //提交
      submitButton(){
        let self = this;
        if(this.editorIndex!=null){
          this.msgError('请确认考试类型名称')
          return
        }
        this.$confirm('确认提交?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          let list = [];
          for(let i=0;i<self.dataList.length;i++){
            let obj = {
              id:self.dataList[i].id?self.dataList[i].id:'',
              disciplineName:self.dataList[i].disciplineName,
            }
            list.push(obj);
          }
          examElDisciplineTypeBatchSave(list).then(response => {
            self.msgSuccess(response.message);
            self.initialize();
          });
        }).catch(() => {});
      },
    },
  }
</script>

<style scoped lang="scss">
  .basicConfiguration-specialtyConfiguration{
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: hidden;
    .top-box{
      height:60px;
      margin:20px 0 0 40px;
      .form-button{
        height:40px;
        line-height:38px;
        margin:0 0 0 10px;
        padding:0 20px;
        border-radius:4px;
        background-color: #0183fa;
        border:1px solid #0183fa;
        color:#fff;
        cursor: pointer;
      }
    }
    .title-p{
      width:600px;
      line-height:60px;
      //background-color: #dedede;
      border-bottom:1px solid #dedede;
      margin-left:40px;
      padding-left:20px;
      font-weight:600;
    }
    .bottom-box{
      flex:1;
      padding:0 20px 0 20px;
      .for-box{
        width:600px;
        border-bottom:1px solid #dedede;
        padding:0 20px 0 0;
        margin-left:20px;
        .text-box{
          display: flex;
          p{
            font-size:14px;
          }
          p:nth-child(1){
            flex:1;
            line-height:60px;
            font-weight:600;
            margin-left:20px;
          }
          p:nth-child(2){
            height:40px;
            line-height:38px;
            margin:10px 0 0 10px;
            padding:0 20px;
            border-radius:4px;
            background-color: #0183fa;
            border:1px solid #0183fa;
            color:#fff;
            cursor: pointer;
          }
          p:nth-child(3){
            height:40px;
            line-height:38px;
            margin:10px 0 0 10px;
            padding:0 20px;
            border-radius:4px;
            background-color: #fff;
            border:1px solid #999;
            color:#999;
            cursor: pointer;
          }
        }
        .input-box{
          display: flex;
          p{
            font-size:14px;
          }
          p:nth-child(1){
            flex:1;
            line-height:60px;
          }
          p:nth-child(2){
            height:40px;
            line-height:38px;
            margin:10px 0 0 10px;
            padding:0 20px;
            border-radius:4px;
            background-color: #FF6666;
            border:1px solid #FF6666;
            color:#fff;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>