项目开发（质检督查）

文章目录

前端
- 1. 前端三张表格展示不同的类型的数据，数据在数据库一张表中
- 2. 需要使用一个前端数组把所有的表格数据进行一次性的更新，数组里面包含多个对象
后端
1. 接收可以使用集合，也可以使用数组

前端

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

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

<template><!-- 质检督查维护  --><div class="fillcontain"><div class="contain"><!-- 操作按钮 --><h2 class="title">质检规则设置</h2>自动分配周期<el-selectv-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-tableref="multipleTable":data="dataList"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><template slot-scop="scope"> </template><el-table-columnprop="rulid"label="序号"show-overflow-tooltipwidth="140"disabled><template slot-scope="scope"><span>{{ scope.row.rulid || "--" }}</span></template></el-table-column><el-table-columnprop="ruldes"label="规则描述"show-overflow-tooltipwidth="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-inputv-model.number="dataList[scope.$index].rulcon"precision="2"type="number"><templatev-if="dataList[scope.$index].ruldes.includes('比例')"slot="append">%</template><template slot="append" v-else>件</template></el-input></template></el-table-column><el-table-columnprop="isvalide"label="是否有效"show-overflow-tooltipwidth="200"><template slot-scope="scope"><el-switchv-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-inputoninput ="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-tableref="multipleTable":data="dataList1"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><template slot-scop="scope"> </template><el-table-columnprop="rulid"label="序号"show-overflow-tooltipwidth="140"disabled><template slot-scope="scope"><span>{{ scope.row.rulid || "--" }}</span></template></el-table-column><el-table-columnprop="ruldes"label="规则描述"show-overflow-tooltipwidth="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-inputtype="number"v-model.number="dataList1[scope.$index].rulcon"placeholder="输入"><templatev-if="dataList1[scope.$index].ruldes.includes('比例')"slot="append">%</template><template slot="append" v-else>件</template></el-input></template></el-table-column><el-table-columnprop="isvalide"label="是否有效"show-overflow-tooltipwidth="200"><template slot-scope="scope"><el-switchv-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-inputoninput ="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-columnprop="rulid"label="序号"show-overflow-tooltipwidth="140"disabled><template slot-scope="scope"><span>{{ scope.row.rulid || "--" }}</span></template></el-table-column><el-table-columnprop="ruldes"label="规则描述"show-overflow-tooltipwidth="220"><template slot-scope="scope"><span>{{ scope.row.ruldes || "--" }} </span></template></el-table-column><!--  //给行添加鼠标点击事件 --><el-table-columnprop="rulcon" label="规则条件" width="300"><template slot-scope="scope"><el-select clearablev-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"> <templateslot="append">%</template></el-input></template></el-table-column><el-table-columnprop="isvalide"label="是否有效"show-overflow-tooltipwidth="200"><template slot-scope="scope"><el-switchv-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){   // 联动框先设置为falseitem.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 @ResponseBodyObjectRestResponse addOrUpdateBenefitgroup(@RequestBody List<InspectorUpholdDTO> dto) {}

项目开发（质检督查）相关推荐

用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
《团队项目开发之三对一维环形数组的求解》
<团队项目开发之三对一维环形数组的求解> 设计思想:通过把数组的长度扩大为原来的一倍,相当于新数组是由对原来的数组重复了一遍后而组成的,这样保证了数组以环状的形式,按照数组中每个数字的位序 ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
《用于物联网的Arduino项目开发：实用案例解析》—— 3.4 小结
本节书摘来自华章出版社<用于物联网的Arduino项目开发:实用案例解析>一书中的第3章,第3.4节,作者［美］安德尔·杰韦德(Adeel Javed),更多章节内容可以访问云栖社区&q ...
项目开发神器VsCode配置指南！（含C++、Python、Java环境配置）
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货作者:吴忠强,东北大学,Datawhale成员本篇文章虽然是VsCod ...
AngryTask - 基于伪 scrum 的个人项目开发产品
关于去年年末的时候同事分享了一下 scrum 工作模型, 以后公司按照这种方式来执行产品开发. 联想自己在阿里的两年的工作方式和大学课程讲述的项目协同敏捷开发的一些知识. 所以本文想就开发工作流模型 ...
深入体验c语言项目开发光盘,深入体验C语言项目开发
c语言是当今使用最为频繁的编程语言之一,一直在开发领域占据重要的地位.<深入体验C语言项目开发>通过10个综合实例的实现过程,详细讲解了c语言在实践项目中的综合运用过程.这些项目从作者的学 ...
python django web典型模块开发实战下载_Django实战 Python Web典型模块与项目开发
本书结合样例,介绍 Django 的基础知识.主要模块的开发以及权限管理等高级内容,并且通过图书管理系统.博客系统.车费管理系统 3 个项目的开发实战,使读者既能掌握 Django 的重要开发技术,又 ...
.NET项目开发的几个非常重要的项目设置
在开发.NET项目的时候,包括Winform项目和Web方面的项目,编译和部署的时候,都需要考虑到是32位的X86方式,还是64位的方式,有时候还需要进行调试,如果没有合理设置好这些关系,还可能出现无 ...

项目开发（质检督查）

文章目录

前端

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

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

后端

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

项目开发（质检督查）相关推荐

最新文章

热门文章