项目开发（质检督查）

前端

1. 前端三张表格展示不同的类型的数据，数据在数据库一张表中

2. 需要使用一个前端数组把所有的表格数据进行一次性的更新，数组里面包含多个对象

<template>
  <!-- 质检督查维护  -->
  <div class="fillcontain">
    <div class="contain">
      <!-- 操作按钮 -->

      <h2 class="title">质检规则设置</h2>
      自动分配周期
      <el-select
        v-model="dataList[0].autallcyc"
        placeholder="请选择"
        style="width:300px"
      >
        <el-option label="停止" value="0"></el-option>
        <el-option label="1分钟" value="1"></el-option>
        <el-option label="2分钟" value="2"></el-option>
        <el-option label="3分钟" value="3"></el-option>
        <el-option label="4分钟" value="4"></el-option>
        <el-option label="5分钟" value="5"></el-option>
        <el-option label="6分钟" value="6"></el-option>
        <el-option label="7分钟" value="7"></el-option>
        <el-option label="8分钟" value="8"></el-option>
        <el-option label="9分钟" value="9"></el-option>
        <el-option label="10分钟" value="10"></el-option>
      </el-select>

     
      <div  class="save_button">
        <el-button type="danger" @click="saveHandle(dataList)" size="small">保存</el-button>
        <el-button @click="cancelHandle(dataList)" size="small">取消</el-button>
      </div>

      <!-- 查询结果列表 -->
      <div class="table_container">
        <el-table
          ref="multipleTable"
          :data="dataList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <template slot-scop="scope"> </template>

          <el-table-column
            prop="rulid"
            label="序号"
            show-overflow-tooltip
            width="140"
            disabled
          >
            <template slot-scope="scope">
              <span>{{ scope.row.rulid || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="ruldes"
            label="规则描述"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.ruldes || "--" }} </span>
            </template>
          </el-table-column>

          <el-table-column width="260" prop="rulcon" label="规则条件">
            <template slot-scope="scope">
              <el-input
                
                v-model.number="dataList[scope.$index].rulcon"
                precision="2"
                
                type="number"
              >
                <template
                    v-if="dataList[scope.$index].ruldes.includes('比例')"
                  slot="append"
                  >%</template
                >

                <template slot="append" v-else>件</template>
              </el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="isvalide"
            label="是否有效"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="dataList[scope.$index].isvalide"
               
              
                active-color="#13ce66"
                inactive-color="#ff4949"

                active-text="有效"
                inactive-text="无效"
                active-value="1"
                inactive-value="0"
                @change="change(scope.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="perId"  label="外包商/人员ID">
          <!-- oninput ="value=value.replace(/[^0-9.,^a-zA-Z]/g,'')" -->
            <template slot-scope="scope">
              <el-input
                oninput ="value=value.replace(/[^0-9.,^a-zA-Z]/g,'')"
                v-model="dataList[scope.$index].perid"
                placeholder="请输入外包商,以英文逗号分隔;例如:（user1,user2）"
                @click="peridChange(scope.$index)"
               
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--  日常督查规则保存-->
      <h2 class="title">日常督查规则设置</h2>

      <div  class="save_button">
        <el-button type="danger" @click="saveHandle(dataList1)" size="small">保存</el-button>
        <el-button @click="cancelHandle(dataList1)" size="small">取消</el-button>
      </div>

      <!-- 查询结果列表 -->
      <div class="table_container">
        <el-table
          ref="multipleTable"
          :data="dataList1"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <template slot-scop="scope"> </template>

          <el-table-column
            prop="rulid"
            label="序号"
            show-overflow-tooltip
            width="140"
            disabled
          >
            <template slot-scope="scope">
              <span>{{ scope.row.rulid || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="ruldes"
            label="规则描述"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.ruldes || "--" }} </span>
            </template>
          </el-table-column>

          <el-table-column width="260" prop="rulcon" label="规则条件">
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model.number="dataList1[scope.$index].rulcon"
                placeholder="输入"
                
              >
                <template
                  v-if="dataList1[scope.$index].ruldes.includes('比例')"
                  slot="append"
                  >%</template
                >

                <template slot="append" v-else>件</template>
              </el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="isvalide"
            label="是否有效"
            show-overflow-tooltip
            width="200"
            
          >
            <template slot-scope="scope">
              <el-switch
                v-model="dataList1[scope.$index].isvalide"
                active-text="有效"
                inactive-text="无效"
                active-color="#13ce66"
                inactive-color="#ff4949"
                on-value="1"
                off-value="0"
               active-value="1"
                inactive-value="0"
                 @change="change(scope.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="perid" label="外包商/人员ID">
        
            <template slot-scope="scope">
      <span v-if="dataList1[scope.$index].rulid>2">
         <el-input
         oninput ="value=value.replace(/[^0-9.,^a-zA-Z]/g,'')"
                v-model="dataList1[scope.$index].perid"
                @change="setFixedTel(scope.row)"
                placeholder="请输入外包商,以英文逗号分隔;例如:（user1,user2）"
              ></el-input>

      </span>
             
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 季度督查规则保存 -->

      <h2 class="title">季度督查规则设置</h2>
      <div class="save_button">
        <el-button type="danger" @click="saveHandle(dataList2)" size="small">保存</el-button>
        <el-button @click="cancelHandle(dataList2)" size="small">取消</el-button>
      </div>

      <!-- 查询结果列表 -->
      <div class="table_container">
        <el-table
         @row-click="selectRow"
          ref="multipleTable"
          :data="dataList2"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <template slot-scop="scope"> </template>

          <el-table-column
            prop="rulid"
            label="序号"
            show-overflow-tooltip
            width="140"
            disabled
          >
            <template slot-scope="scope">
              <span>{{ scope.row.rulid || "--" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="ruldes"
            label="规则描述"
            show-overflow-tooltip
            width="220"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.ruldes || "--" }} </span>
            </template>
          </el-table-column>

          <!--  //给行添加鼠标点击事件 -->
          <el-table-column
        
           prop="rulcon" label="规则条件" width="300">
            <template slot-scope="scope">
              <el-select clearable
                v-model="dataList2[scope.$index].rulcon"
                @change="changeByCustom(scope.row)"
                style="width: 140px;"
              >
            <el-option label="重叠5%" value="1"></el-option>
            <el-option label="不重叠" value="2"></el-option>
            <el-option label="自定义比例" value="3" ></el-option>
            
              </el-select>

                <el-input 
                style="width: 160px;"  v-if="scope.row.isShow" v-model="dataList2[scope.$index].ruldata"> 
                 
                   <template
                  
                  slot="append"
                  >%</template
                >

               
               </el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="isvalide"
            label="是否有效"
            show-overflow-tooltip
            width="200"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="dataList2[scope.$index].isvalide"
                active-text="有效"
                inactive-text="无效"
                active-color="#13ce66"
                inactive-color="#ff4949"
                on-value="1"
                off-value="0"
               
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--  -->
    </div>
  </div>
</template>


<script>
import {
  pageListApi,
  delpageListApi,
  addpageListApi,
  canCelListApi
} from "@/api/sysSetting/othermian/inspectorUphold";
import transformation from "@/utils/transformation/othermaintenance";
import maintainCondition from "@/api/maintainCondition";
 var j=1;
export default {
  data() {
    return {
      // options: [
      //   {
      //     value: "停止",
      //     label: "停止",
      //   },
      //   {
      //     value: "1",
      //     label: "1分钟",
      //   },
      //   {
      //     value: "2",
      //     label: "2分钟",
      //   },
      //   {
      //     value: "3",
      //     label: "3分钟",
      //   },
      //   {
      //     value: "4",
      //     label: "4分钟",
      //   },
      //   {
      //     value: "5",
      //     label: "5分钟",
      //   },
      //   {
      //     value: "6",
      //     label: "6分钟",
      //   },
      //   {
      //     value: "7",
      //     label: "7分钟",
      //   },
      //   {
      //     value: "8",
      //     label: "8分钟",
      //   },
      //   {
      //     value: "9",
      //     label: "9分钟",
      //   },
      //   {
      //     value: "10",
      //     label: "10分钟",
      //   },
      // ],

      options1: [
        {
          value: "不重叠",
          label: "不重叠",
        },
        {
          value: "重叠",
          label: "重叠",
        },
        {
          value: "自定义比例",
          label: "自定义比例",
        },
      ],
      // 列表数据
      dataList: [],
      linkvalue:"",
      test:"",

      value5: [],

      options: [],
      dataList: [],
      dataList1: [],
      dataList2: [],

      orderList: [],

      rulnum:"",

      page: {
        pageIndex: 1,
        pageSize: 4,
        totalPage: 0,
      },
    };
  },

  created() {
  
    
    this.getDataList(); 

    
  },

  methods: {
    // 规则互斥条件判断
change(val){
    if(this.dataList[1].isvalide==1 && this.dataList[0].isvalide==1){
        this.dataList[val].isvalide=0;
        this.$message({
           message: "规则互斥，不可以同时设置为有效",
           type: "warning",
            showClose: true,
         });
          return;
      }

        if(this.dataList[2].isvalide==1 && this.dataList[3].isvalide==1){
        this.dataList[val].isvalide=0;
        this.$message({
           message: "规则互斥，不可以同时设置为有效",
           type: "warning",
            showClose: true,
         });
         return;
      }


     if(this.dataList1[1].isvalide==1 && this.dataList1[0].isvalide==1){
        this.dataList1[val].isvalide=0;
        this.$message({
           message: "规则互斥，不可以同时设置为有效",
           type: "warning",
            showClose: true,
         });
          return;
      }

        if(this.dataList1[2].isvalide==1 && this.dataList1[3].isvalide==1){
        this.dataList1[val].isvalide=0;
        this.$message({
           message: "规则互斥，不可以同时设置为有效",
           type: "warning",
            showClose: true,
         });
         return;
      }

  
    
  console.log(val,"val---------");
},
 
 
    // 行鼠标点击事件
    selectRow(row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event.isTrusted);
      // this.name = row.name;
    },

    changeByCustom(row){
    


     
     
      this.dataList2.forEach(item =>{
        
// 判断一下选中的是哪一行
        if(item.rulid == row.rulid){   
          // 联动框先设置为false
          item.isShow = false;
          // 如果选中的联动的值是3，不是置为true;
          if(item.rulcon == 3){
        item.isShow = true

          }
          
        }

      });
      console.info(row,"row----------------");
      

    },
  
    // 获取数据列表
    getDataList(query) {
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      

      this.dataList = [];
      pageListApi()
        .then((res) => {
          let dataList = res.data;
         
    

          this.dataList = dataList.filter(function (type) {


            return type.type == "1";
          });
          console.log(dataList, "dataList");
          this.dataList1 = dataList.filter(function (type) {
            return type.type == "2";
          });

          this.dataList2 = dataList.filter(function (type) {
            return type.type == "3";
          });
          this.dataList2.forEach((item)=>{
            this.$set(item,'isShow',false)
            if(item.rulcon==3){
              item.isShow = true;
            }
          })

          // this.$set(this, "dataList", dataList);

          this.$store.dispatch("loading/CHANGE_LOADING", false);
        })
        .catch(() => {});
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
juge(newList){
  
  let nary= newList.sort();
  console.log(nary,"nary--------------")
 j=1; 
  for(let i = 0;i<nary.length;i++){

    if(nary[i]==nary[i+1]){

       this.$message({
            message: "互斥外包商id输入重复,或者你的本行的外包商id输入重复",
            type: "error",
            showClose: true,
            duration:7000
          });
          j = 0;
    }
  }

},

   

    // 保存
    saveHandle(dataList) {
      console.log(dataList,"dataList");
// 规则进行校验
        this.change();
// 外包商id重复校验
  //  季度规则设置直接进行更新
   if(dataList[0].type=="3"){

     if(dataList[0].ruldata>100 || dataList[1].ruldata>100){
       dataList[0].ruldata = 100;

        this.$message({
            message: "你的自定义比例不可以大于100%",
            type: "error",
            showClose: true,
          });

          return;

     }

   addpageListApi(dataList).then((res) => {
        if (res.resultCode === 0) {
          this.getDataList();
          this.$message({
            message: res.resultMsg,
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.resultMsg,
            type: "warning",
            showClose: true,
          });
        }
      }); 

      return;


   }

   else{
       var  perid0 = dataList[0].perid.split(",");

      var  perid1 = dataList[1].perid.split(","); 
      var  perid2 = dataList[2].perid.split(",");

      var  perid3 = dataList[3].perid.split(",");

      if(dataList[0].perid==null || dataList[0].perid==''||
      dataList[1].perid==null || dataList[1].perid==''
      ){
    j=1;

      }
  else{
     perid0.map( res => perid1.push ( res ) );
      console.log(perid1,"perid1---------------");
      this.juge(perid1);
      if(j==0){
       
       return;
      }
  }


  if(dataList[2].perid==null || dataList[2].perid==''||
      dataList[3].perid==null || dataList[3].perid==''){


        j=1;
      }else{

  
      console.log(j,"j--------------");

    
       perid2.map( res => perid3.push ( res ) );
      console.log(perid3,"perid3---------------");

        this.juge(perid3);
         console.log(j,"j--------------");
      if(j==0){
        return;
      }

      }

   


      


   

  
      // console.log(dataList);
      dataList.forEach((v) => {
        let reg = RegExp(/，/);
        let reg1 = new RegExp(/^\d+$/);
         let reg2 = new RegExp(/^\w+$/);
        
      
         reg2.test(v.perid)==false

            // 规则条件的核验
        if(v.ruldes.includes('比例')==true){
          if(v.rulcon<0.00 || v.rulcon>100.00){

            this.$message({
            message: "规则条件百分比输入不合法",
            type: "warning",
            showClose: true,
          });
          
          throw new Error("规则条件百分比输入不合法");


          } 
         
        }
        if(v.ruldes.includes('件数')){
      if(!reg1.test(v.rulcon)){
            this.$message({
            message: "件数的抽查必须是整数",
            type: "warning",
            showClose: true,
          });
          throw new Error("件数的抽查必须是整数");
}

        }
  
        // 人员Id的校验
        if (reg.test(v.perid) == true ) {
          this.$message({
            message: "质检规则保存外包商/人员ID请输入英文状态下的“,”",
            type: "warning",
            showClose: true,
          });    
          throw new Error("质检规则保存外包商/人员ID请输入英文状态下的“,”");
        }
        if (reg2.test(v.perid) == false && reg.test(v.perid) == true  ) {
          this.$message({
            message: "请输入英文字母和数字组成的人员ID",
            type: "warning",
            showClose: true,
          });
          throw new Error("请输入英文字母和数字组成的人员ID");
        }
        if(v.isvalide==false){
          v.isvalide="0";
        }else{
          v.isvalide="1";
        }

    
      
      });

       addpageListApi(dataList).then((res) => {
        if (res.resultCode === 0) {
          this.getDataList();
          this.$message({
            message: res.resultMsg,
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.resultMsg,
            type: "warning",
            showClose: true,
          });
        }
      }); 

   }
   
 

 
    

    
      
    },
    cancelHandle(dataList){
      let dataList1=dataList;
            canCelListApi(dataList1).then((res) => {
        if (res.resultCode === 0) {
          this.getDataList();
          this.$message({
            message: res.resultMsg,
            type: "success",
            showClose: true,
          });
        } else {
          this.$message({
            message: res.resultMsg,
            type: "warning",
            showClose: true,
          });
        }
      });

    }

    
  },
};
</script>
<style lang="less" scoped>
.save_button{
  margin-top: 20px; 
  display: inline; 
  margin-left: 1000px
}
.el-table th > .cell {
    font-weight: normal!important;
    color: #ffff !important;
}
.cell{
 font-size: 18px;
}
// 表头
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 50px;
  background-color: #F56C6C !important;
  color: white !important;
  font-weight: 500;
  font-size: 18px !important;
}

.title {
  margin-top: 10px;
  font-size: 16px !important;
}

.table_container .el-table__body-wrapper {
  overflow-x: auto !important;
}

.dialog .el-dialog__body {
  border-top: 1px solid #eeeeee;
}

.dialog .el-button.is-active,
.dialog .el-button.is-plain:active,
.dialog .el-button.is-plain:hover {
  border-color: #f56c6c !important;
  color: #f56c6c !important;
}

// 排序按钮样式
.checkListBox {
  border: 1px solid #eee;
  padding: 0px;
  margin-right: 30px;
  height: 300px;
  overflow-y: auto;
  text-align: center;

  // .el-checkbox {
  //   display: block;
  //   margin-bottom: 10px;
  //   width: 100%;
  // }
  .option {
    padding-top: 20px;
    height: 38px !important;
    border-bottom: 1px solid #eee;
  }
}

//实现表格头数据换行
// .el-table__header .cell {
//   white-space: pre-line !important;//保留换行符
// }

// 列表文字居中
// .el-table td,
// .el-table th {
//   text-align: center;
// }

// 消息提示样式
// .el-message--success {
//   background-color: #f0f9eb !important;
//   border-color: #e4ffd6 !important;
// }

// .el-message__content {
//   color: #90c973 !important;
// }

// .el-icon-success {
//   color: #6cad4c !important;
// }

// 新增按钮input文字居中
.el-input__inner {
  text-align: left;
}


// 排序方式样式调整
.el-select .el-input--suffix .el-input__inner {
  background: #f5f7fa !important;
}



// 开关调节
 .el-switch__label {
    position: absolute;
    display: none;
    color: rgb(12, 4, 4) !important;
  }
  /*打开时文字位置设置*/
  .el-switch__label--right {
    z-index: 1;
   right: -3px;
 }
 /*关闭时文字位置设置*/
  .el-switch__label--left {
   z-index: 1;
   left: 19px;
 }
 /*显示文字*/
  .el-switch__label.is-active {
   display: block;
 }
.el-switch .el-switch__core,
.el-switch .el-switch__label {
   width: 50px !important;
 }

</style>

后端

1. 接收可以使用集合，也可以使用数组

code:

@ApiOperation("保存--质检督查维护")
    @PostMapping(value = "/addOrUpdateBenefitgroup")
    public @ResponseBody
    ObjectRestResponse addOrUpdateBenefitgroup(@RequestBody List<InspectorUpholdDTO> dto) {

}