前端
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) {
}
