vue组件传值以及el-table分页数据+回显+勾选状态+记录数据
vue组件传值以及el-table分页数据+回显+勾选状态+记录数据
·
父传子:
// 父组件:
// 我们可以通过 ref 来给子组件传递
<TheStateOfNew ref="thestateofnew" @submit="handleOk" />
// 引入
import TheStateOfNew from './component/TheStateOfNew'
// 挂载
components:{
TheStateOfNew
}
// 触发
methods: {
add () {
this.$refs.thestateofnew.show(this.flag = 'country',this.name = 'compile',this.id = selectRadio[0].id)
}
}
// 子组件
data() {
return {
flag: '',
name: '',
id: '',
}
}
methods: {
show (flag,name,id) {
this.flag = flag
this.name = name
this.id = id
}
}
子传父:
// 子组件(NewDialog) 通过$emit进行传参
methods: {
confirm() {
// getChecked(方法) this.totalMultipleSelection(向父组件传递的值)
this.$emit("getChecked", this.totalMultipleSelection);
}
}
// 父组件
<NewDialog ref="choose" @getChecked="getChecked" />
methods: {
getChecked(val) {
// 下面就可以使用了
let name = "";
val.map((item) => {
name += item.orgName + ",";
});
this.ruleForm = {
...this.ruleForm,
evaluationOrgName:name,
evaluationOrgIdArray:val
}
}
}表格选中回显:
父组件完整代码:
<!-- 质评任务国家级/省级---新增/编辑 -->
<template>
<el-dialog :title="title" :visible.sync="dialogVisible" width="90%" @close="handleClose">
<div>
<div>
<div v-if="this.name != 'compile' ">
<div v-if="this.flag === 'country' " class="container-header">新增国家级确证实验室质控任务</div>
<div v-if="this.flag === 'province' " class="container-header">新增省级确证实验室质控任务</div>
<!-- <div style="font-size:30px;cursor:pointer;" @click="go">×</div>-->
</div>
<div v-if="this.name == 'compile' ">
<div v-if="this.flag === 'country' " class="container-header">编辑国家级确证实验室质控任务</div>
<div v-if="this.flag === 'province' " class="container-header">编辑省级确证实验室质控任务</div>
<!-- <div style="font-size:30px;cursor:pointer;" @click="go">×</div>-->
</div>
<div class="container-form">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
<el-form-item label="任务标题" prop="title">
<el-input v-model="ruleForm.title" placeholder="请输入任务标题"></el-input>
</el-form-item>
<el-form-item label="考评时间" prop="kpsj">
<el-date-picker v-model="ruleForm.kpsj" type="daterange" range-separator="至"
start-placeholder="请选择考评开始时间" end-placeholder="请选择考评结束时间"
style="width: 100%" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="样品发放时间" prop="ypffsj">
<el-date-picker v-model="ruleForm.ypffsj" type="daterange" range-separator="至"
start-placeholder="请选择样品发放时间" end-placeholder="请选择样品发放时间"
style="width: 100%" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="上报截止时间" prop="reportEndTime">
<el-date-picker
v-model="ruleForm.reportEndTime" type="datetime" placeholder="请选择任务上报截止时间(年月日)"
style="width: 100%" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptions">
</el-date-picker>
<!-- <el-date-picker
v-model="ruleForm.reportEndTime" type="date" placeholder="请选择任务上报截止时间(年月日)"
style="width: 100%" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
</el-date-picker>-->
</el-form-item>
<div v-if="this.flag === 'province' ">
<el-form-item label="梅毒考核指标" prop="khypbh1">
<div style="font-size:14px;color: #6e6d8f;"><span style="margin: 0 20px;">梅毒非特异性抗体</span>梅毒特异性抗体</div>
<el-input v-model="ruleForm.khypbh1" @change="add" placeholder="请输入考核样品编号"></el-input>
</el-form-item>
<el-form-item label="" prop="khypbh2">
<el-input v-model="ruleForm.khypbh2" @change="add" placeholder="请输入考核样品编号"></el-input>
</el-form-item>
<el-form-item label="" prop="khypbh3">
<el-input v-model="ruleForm.khypbh3" @change="add" placeholder="请输入考核样品编号"></el-input>
</el-form-item>
<el-form-item label="" prop="khypbh4">
<el-input v-model="ruleForm.khypbh4" @change="add" placeholder="请输入考核样品编号"></el-input>
</el-form-item>
<el-form-item label="" prop="khypbh5">
<el-input v-model="ruleForm.khypbh5" @change="add" placeholder="请输入考核样品编号"></el-input>
</el-form-item>
</div>
<div v-if="this.flag === 'province' ">
<el-form-item label="梅毒考核正确值">
<div class="jczb-title" style="margin-top: 4px;">梅毒非特异性抗体</div>
<div class="table-container" style="margin: 0;">
<el-table :data="syphilisTableData1" style="width: 98%;" stripe>
<el-table-column :label="h1" align="center">
<el-table-column label="定性(+/-)" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh1.dx" @change="empty(1)" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="定量(滴度1:n）" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select :disabled="scope.row.khypbh1.dx == '' " v-model="scope.row.khypbh1.dl" multiple placeholder="请选择">
<div v-show="scope.row.khypbh1.dx == '0' ">
<el-option label="1:2" value="0"></el-option>
<el-option label="1:4" value="1"></el-option>
<el-option label="1:8" value="2"></el-option>
<el-option label="1:16" value="3"></el-option>
<el-option label="1:32" value="4"></el-option>
<el-option label="1:64" value="5"></el-option>
</div>
<div v-show="scope.row.khypbh1.dx == '1' ">
<el-option label="/" value="6"></el-option>
</div>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<el-table-column :label="h2" align="center">
<el-table-column label="定性(+/-)" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh2.dx" @change="empty(2)" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="定量(滴度1:n）" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select :disabled="scope.row.khypbh2.dx == '' " v-model="scope.row.khypbh2.dl" multiple placeholder="请选择">
<div v-show="scope.row.khypbh2.dx == '0' ">
<el-option label="1:2" value="0"></el-option>
<el-option label="1:4" value="1"></el-option>
<el-option label="1:8" value="2"></el-option>
<el-option label="1:16" value="3"></el-option>
<el-option label="1:32" value="4"></el-option>
<el-option label="1:64" value="5"></el-option>
</div>
<div v-show="scope.row.khypbh2.dx == '1' ">
<el-option label="/" value="6"></el-option>
</div>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<el-table-column :label="h3" align="center">
<el-table-column label="定性(+/-)" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh3.dx" @change="empty(3)" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="定量(滴度1:n）" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select :disabled="scope.row.khypbh3.dx == '' " v-model="scope.row.khypbh3.dl" multiple placeholder="请选择">
<div v-show="scope.row.khypbh3.dx == '0' ">
<el-option label="1:2" value="0"></el-option>
<el-option label="1:4" value="1"></el-option>
<el-option label="1:8" value="2"></el-option>
<el-option label="1:16" value="3"></el-option>
<el-option label="1:32" value="4"></el-option>
<el-option label="1:64" value="5"></el-option>
</div>
<div v-show="scope.row.khypbh3.dx == '1' ">
<el-option label="/" value="6"></el-option>
</div>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<el-table-column :label="h4" align="center">
<el-table-column label="定性(+/-)" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh4.dx" @change="empty(4)" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="定量(滴度1:n）" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select :disabled="scope.row.khypbh4.dx == '' " v-model="scope.row.khypbh4.dl" multiple placeholder="请选择">
<div v-show="scope.row.khypbh4.dx == '0' ">
<el-option label="1:2" value="0"></el-option>
<el-option label="1:4" value="1"></el-option>
<el-option label="1:8" value="2"></el-option>
<el-option label="1:16" value="3"></el-option>
<el-option label="1:32" value="4"></el-option>
<el-option label="1:64" value="5"></el-option>
</div>
<div v-show="scope.row.khypbh4.dx == '1' ">
<el-option label="/" value="6"></el-option>
</div>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<el-table-column :label="h5" align="center">
<el-table-column label="定性(+/-)" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh5.dx" @change="empty(5)" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="定量(滴度1:n）" width="120" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select :disabled="scope.row.khypbh5.dx == '' " v-model="scope.row.khypbh5.dl" multiple placeholder="请选择">
<div v-show="scope.row.khypbh5.dx == '0' ">
<el-option label="1:2" value="0"></el-option>
<el-option label="1:4" value="1"></el-option>
<el-option label="1:8" value="2"></el-option>
<el-option label="1:16" value="3"></el-option>
<el-option label="1:32" value="4"></el-option>
<el-option label="1:64" value="5"></el-option>
</div>
<div v-show="scope.row.khypbh5.dx == '1' ">
<el-option label="/" value="6"></el-option>
</div>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<div class="jczb-title">梅毒特异性抗体</div>
<div class="table-container" style="margin: 0;">
<el-table :data="syphilisTableData2" style="width: 98%;" key="111">
<el-table-column :label="h1" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh1" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="h2" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh2" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="h3" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh3" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="h4" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh4" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column :label="h5" align="center">
<template slot-scope="scope">
<el-form-item>
<el-select v-model="scope.row.khypbh5" placeholder="请选择">
<el-option label="+" value="0"></el-option>
<el-option label="-" value="1"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</div>
<el-form-item label="注意事项" prop="remarks">
<el-input type="textarea" v-model="ruleForm.remarks" placeholder="请输入注意事项"></el-input>
</el-form-item>
<el-form-item label="上传附件" required>
<!-- 国家级 -->
<div v-if="this.flag === 'country' ">
<!-- :businessType="11"-->
<MulitiUpload
:btnTip="rectifyTip"
:bottomText="bottomText"
:maxCount="1"
v-model="ruleForm.infoNineFile">
</MulitiUpload>
</div>
<!-- 省级 -->
<div v-if="this.flag === 'province' ">
<MulitiUpload
:btnTip="rectifyTip"
:bottomText="bottomText"
:maxCount="1"
v-model="ruleForm.infoNineFile1">
</MulitiUpload>
</div>
</el-form-item>
<div style="display: flex;">
<el-form-item label="联系人员" prop="contactPersonName">
<el-select v-model="ruleForm.contactPersonName" placeholder="请选择联系人员" style="width: 100%;" @change="personChange">
<el-option v-for="(item, index) in arrPerson" :key="index" :label="item.personName" :value="item.accountId"></el-option>
</el-select>
</el-form-item>
<div style="margin:5px 0 0 50px;font-size:14px;color:#5f6266;">注释：联系人下拉选择时只显示实验室人员下的联系人</div>
</div>
<el-form-item label="联系电话" prop="contactPhone">
<el-input disabled v-model="ruleForm.contactPhone" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="考评对象单位">
<el-tooltip
class="item"
effect="dark"
:content="ruleForm.evaluationOrgName"
placement="top-start"
:disabled="ruleForm.evaluationOrgName === ''"
>
<el-button v-on:click.native="getUnit" class="orgname">{{ruleForm.evaluationOrgName === '' ? '请选择考评对象单位' : ruleForm.evaluationOrgName}}</el-button>
</el-tooltip>
</el-form-item>
<!-- <el-form-item label="考评对象单位" required>
<el-tooltip class="item" effect="dark" :content="this.cross" placement="top-start">
<el-button v-on:click.native="getUnit" class="orgname">{{this.cross == '' ? '请选择考评对象单位' : this.cross}}</el-button>
</el-tooltip>
</el-form-item>-->
<!-- <el-form-item>
<div style="margin: 0 35%;">
<el-button type="primary" @click="submitForm('ruleForm',false)" style="width: 80px;">暂存</el-button>
<el-button type="primary" @click="submitForm('ruleForm',true)">确定发布</el-button>
</div>
</el-form-item>-->
</el-form>
</div>
<div style="text-align: center;">
<el-button type="primary" @click="submitForm('ruleForm',false)" style="width: 80px;">暂存</el-button>
<el-button type="primary" @click="submitForm('ruleForm',true)">确定发布</el-button>
</div>
<!-- 考评对象单位弹框 -->
<NewDialog
ref="choose"
@getChecked="getChecked"
:evaluationOrgIdArray="ruleForm.evaluationOrgIdArray"
v-if="showChoose"
/>
</div>
</div>
</el-dialog>
</template>
<script>
import MulitiUpload from '../../../common/mulitiUpload.vue'
import API from "../../../../api/qeTask";
import COMMON from "../../../../api/common";
import commom from "../../../../api/common";
import func from "../../laboratoryAccept/function";
import NewDialog from "./NewDialog.vue"
export default {
data() {
return {
flag: '',
name: '',
id: '',
title:'',
/*flag: this.$route.query.flag,
name: this.$route.query.name,
id: this.$route.query.id,*/
ruleForm: {
title: '',
kpsj: [], // 考评时间
ypffsj: [], // 样品发放时间
reportEndTime: '', // 截止时间
khypbh1: '',
khypbh2: '',
khypbh3: '',
khypbh4: '',
khypbh5: '',
remarks: '',
infoNineFile: [], // 国家
infoNineFile1: [], // 省
contactPersonName: '',
contactPhone: '',
evaluationOrgName :'',
evaluationOrgIdArray: [],
totalMultipleSelection: [],
},
showChoose: false,
// 梅毒考核参考正确值
// 非特异型
syphilisTableData1: [
{
khypbh1: {
dx: "",
dl: [],
},
khypbh2: {
dx: "",
dl: [],
},
khypbh3: {
dx: "",
dl: [],
},
khypbh4: {
dx: "",
dl: [],
},
khypbh5: {
dx: "",
dl: [],
},
},
],
// 特异型
syphilisTableData2: [
{
khypbh1: "",
khypbh2: "",
khypbh3: "",
khypbh4: "",
khypbh5: "",
},
],
detailForm: {
sampleCode: ["", "", "", "", ""],
},
rectifyTip: '上传',
bottomText: '',
rules: {
title: [
{ required: true, message: '请输入任务标题', trigger: 'blur' },
],
kpsj: [
{ required: true, message: '请选择考评时间', trigger: 'change' }
],
ypffsj: [
{ required: true, message: '请选择样品发放时间', trigger: 'change' }
],
reportEndTime: [
{ required: true, message: '请选择上报截止时间', trigger: 'change' }
],
remarks: [
{ required: true, message: '请输入注意事项', trigger: 'blur' }
],
contactPersonName: [
{ required: true, message: '请选择人员姓名', trigger: 'change' }
],
contactPhone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
],
evaluationOrgName: [
{ required: true, message: '请选择考评对象单位', trigger: 'change' }
],
},
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
},
},
dialogVisible: false,
// 考评对象单位弹框
form: {
orgName: '',
region: '',
},
options: [],
// 考评对象单位表格
tableData: [],
// 联系人员
arrPerson: [],
// 联系人id
contactPersonId : '',
// 分页
pageSize: 15,
pageNum: 1,
pageTotal: 0,
currentPage: 1,
// 多选的数据
selectRadio : [],
cross: '',
multipleSelection: [],
h1:'',
h2:'',
h3:'',
h4:'',
h5:''
}
},
components: { MulitiUpload,NewDialog },
mounted() {
this.getOrgUserData();
this.getDictList();
this.redact();
},
methods: {
show (flag,name,id) {
this.flag = flag
this.name = name
this.id = id
this.redact(id);
if(name == 'compile') {
this.title = '编辑'
}else {
this.title = '新增'
}
this.dialogVisible = true
},
handleClose() {
this.$refs["ruleForm"].resetFields();
this.ruleForm = {
evaluationOrgName: "",
evaluationOrgIdArray: [],
totalMultipleSelection: [],
infoNineFile: [],
infoNineFile1: [],
}
this.dialogVisible = false
this.$emit('submit')
},
add () {
this.h1 = this.ruleForm.khypbh1
this.h2 = this.ruleForm.khypbh2
this.h3 = this.ruleForm.khypbh3
this.h4 = this.ruleForm.khypbh4
this.h5 = this.ruleForm.khypbh5
},
// 返回
go () {
// window.history.go(-1);
this.$router.push({path:'/qzzprw',query:{flags:this.flag}});
},
empty(val) {
switch (val) {
case 1:
this.syphilisTableData1[0].khypbh1.dl = ''
break;
case 2:
this.syphilisTableData1[0].khypbh2.dl = ''
break;
case 3:
this.syphilisTableData1[0].khypbh3.dl = ''
break;
case 4:
this.syphilisTableData1[0].khypbh4.dl = ''
break;
case 5:
this.syphilisTableData1[0].khypbh5.dl = ''
break;
}
},
// 获取当前用户单位下的所有人员列表
getOrgUserData() {
API.getOrgUsersList().then((res) => {
if(func.parseRespondResult(res)) {
this.arrPerson = res.data;
}
});
/*COMMON.getOrgUsers().then((res) => {
if(res.code === 200) {
this.arrPerson = res.data;
}else {
this.$message({
type: "error",
message: res.message,
duration: 1500,
});
}
})*/
},
// 获取考评对象单位列表
/*getluationData() {
let params = {
pageSize: this.pageSize,
pageNum: this.pageNum,
orgLevel: this.form.region, // 机构等级
orgName: this.form.orgName, // 机构名称
abilityType: '3'
}
API.getOrgTree(params).then((res)=>{
this.tableData = res.data.records
this.pageTotal = res.data.total
})
},*/
// 考评对象单位机构等级
getDictList(){
commom.getJsonZd("ORG_LEVEL").then((res)=>{
this.options = res.data;
})
},
// 联系人员切换事件(回填电话)
personChange(val) {
this.contactPersonId = val;
const obj = this.arrPerson.filter((item) => {
// 这里的 item.accountId 跟上面的 :value="item.accountId" 是一致的
return item.accountId === val;
})
this.ruleForm.contactPersonName = obj[0].personName;
this.ruleForm.contactPhone = obj[0].tel;
},
// 暂存/确定发布
submitForm(formName,value) {
let vm = this;
this.$refs[formName].validate((valid) => {
// 考评对象单位不能为空
if(this.ruleForm.evaluationOrgName !== '') {
// 是否等于编辑==>compile 不等于就新增
if(this.name == 'compile') {
// 编辑
let sampleCodeList = [
vm.ruleForm.khypbh1,
vm.ruleForm.khypbh2,
vm.ruleForm.khypbh3,
vm.ruleForm.khypbh4,
vm.ruleForm.khypbh5,
];
let params = {
title: vm.ruleForm.title,
evaluationStartTime: vm.ruleForm.kpsj[0],
evaluationEndTime: vm.ruleForm.kpsj[1],
sampleDistributionStartTime: vm.ruleForm.ypffsj[0],
sampleDistributionEndTime: vm.ruleForm.ypffsj[1],
reportEndTime: vm.ruleForm.reportEndTime,
sampleCode: JSON.stringify(sampleCodeList), // 编号
// 考核正确值
correctValue: [
{
evaluateType: 5, // 梅毒非特异型
data:[
{
sampleCode: vm.ruleForm.khypbh1,
dx: vm.syphilisTableData1[0].khypbh1.dx,
dl: vm.syphilisTableData1[0].khypbh1.dl,
},
{
sampleCode: vm.ruleForm.khypbh2,
dx: vm.syphilisTableData1[0].khypbh2.dx,
dl: vm.syphilisTableData1[0].khypbh2.dl,
},
{
sampleCode: vm.ruleForm.khypbh3,
dx: vm.syphilisTableData1[0].khypbh3.dx,
dl: vm.syphilisTableData1[0].khypbh3.dl,
},
{
sampleCode: vm.ruleForm.khypbh4,
dx: vm.syphilisTableData1[0].khypbh4.dx,
dl: vm.syphilisTableData1[0].khypbh4.dl,
},
{
sampleCode: vm.ruleForm.khypbh5,
dx: vm.syphilisTableData1[0].khypbh5.dx,
dl: vm.syphilisTableData1[0].khypbh5.dl,
},
]
},
{
evaluateType: 6, // 梅毒特异型
data: [
{
sampleCode: vm.ruleForm.khypbh1,
value: vm.syphilisTableData2[0].khypbh1,
},
{
sampleCode: vm.ruleForm.khypbh2,
value: vm.syphilisTableData2[0].khypbh2,
},
{
sampleCode: vm.ruleForm.khypbh3,
value: vm.syphilisTableData2[0].khypbh3,
},
{
sampleCode: vm.ruleForm.khypbh4,
value: vm.syphilisTableData2[0].khypbh4,
},
{
sampleCode: vm.ruleForm.khypbh5,
value: vm.syphilisTableData2[0].khypbh5,
},
]
}
],
remarks: vm.ruleForm.remarks, // 注意事项
contactPersonId: this.contactPersonId, // 联系人id
contactPersonName: vm.ruleForm.contactPersonName,
contactPhone: vm.ruleForm.contactPhone,
evaluationOrg: JSON.stringify(this.ruleForm.evaluationOrgIdArray), // 考评对象单位
// evaluationOrg: JSON.stringify(this.ruleForm.totalMultipleSelection), // 考评对象单位
id: this.id // 主键id
}
if (value) {
// 发布
params.publishFlag = true
}else {
// 暂存
params.publishFlag = false
}
if (this.flag == 'country') { // 国家
params.taskType = 0
params.files = vm.ruleForm.infoNineFile
}else { // 省级
params.taskType = 1
params.files = vm.ruleForm.infoNineFile1
}
API.update(params).then((res) => {
if (res.code == 200) {
if(value){
vm.$message({
type: "success",
message: "发布成功",
duration: 1000,
});
this.$emit("submit");
this.handleClose()
}else {
vm.$message({
type: "success",
message: "暂存成功",
duration: 1000,
});
this.$emit("submit");
this.handleClose()
}
} else {
vm.$message({
type: "error",
message: res.message,
duration: 1500,
});
}
});
// this.$router.push({path: "/qzzprw"})
}else {
// 新增
if (valid) {
let sampleCodeList = [
vm.ruleForm.khypbh1,
vm.ruleForm.khypbh2,
vm.ruleForm.khypbh3,
vm.ruleForm.khypbh4,
vm.ruleForm.khypbh5,
];
let params = {
title: vm.ruleForm.title,
evaluationStartTime: vm.ruleForm.kpsj[0],
evaluationEndTime: vm.ruleForm.kpsj[1],
sampleDistributionStartTime: vm.ruleForm.ypffsj[0],
sampleDistributionEndTime: vm.ruleForm.ypffsj[1],
reportEndTime: vm.ruleForm.reportEndTime,
sampleCode: JSON.stringify(sampleCodeList), // 编号
// 考核正确值
correctValue: [
{
evaluateType: 5, // 梅毒非特异型
data:[
{
sampleCode: vm.ruleForm.khypbh1,
dx: vm.syphilisTableData1[0].khypbh1.dx,
dl: vm.syphilisTableData1[0].khypbh1.dl,
},
{
sampleCode: vm.ruleForm.khypbh2,
dx: vm.syphilisTableData1[0].khypbh2.dx,
dl: vm.syphilisTableData1[0].khypbh2.dl,
},
{
sampleCode: vm.ruleForm.khypbh3,
dx: vm.syphilisTableData1[0].khypbh3.dx,
dl: vm.syphilisTableData1[0].khypbh3.dl,
},
{
sampleCode: vm.ruleForm.khypbh4,
dx: vm.syphilisTableData1[0].khypbh4.dx,
dl: vm.syphilisTableData1[0].khypbh4.dl,
},
{
sampleCode: vm.ruleForm.khypbh5,
dx: vm.syphilisTableData1[0].khypbh5.dx,
dl: vm.syphilisTableData1[0].khypbh5.dl,
},
]
},
{
evaluateType: 6, // 梅毒特异型
data: [
{
sampleCode: vm.ruleForm.khypbh1,
value: vm.syphilisTableData2[0].khypbh1,
},
{
sampleCode: vm.ruleForm.khypbh2,
value: vm.syphilisTableData2[0].khypbh2,
},
{
sampleCode: vm.ruleForm.khypbh3,
value: vm.syphilisTableData2[0].khypbh3,
},
{
sampleCode: vm.ruleForm.khypbh4,
value: vm.syphilisTableData2[0].khypbh4,
},
{
sampleCode: vm.ruleForm.khypbh5,
value: vm.syphilisTableData2[0].khypbh5,
},
]
}
],
remarks: vm.ruleForm.remarks, // 注意事项
contactPersonId: this.contactPersonId, // 联系人id
contactPersonName: vm.ruleForm.contactPersonName,
contactPhone: vm.ruleForm.contactPhone,
evaluationOrg: JSON.stringify(this.ruleForm.evaluationOrgIdArray) // 考评对象单位
// evaluationOrg: JSON.stringify(this.ruleForm.evaluationOrgIdArray) // 考评对象单位
}
if (value) {
// 发布
params.publishFlag = true
}else {
// 暂存
params.publishFlag = false
}
if (this.flag == 'country') { // 国家
params.taskType = 0
params.files = vm.ruleForm.infoNineFile
}else { // 省级
params.taskType = 1
params.files = vm.ruleForm.infoNineFile1
}
API.add(params).then((res) => {
if (res.code == 200) {
if(value) {
vm.$message({
type: "success",
message: "发布成功",
duration: 1000,
});
this.$emit("submit");
this.handleClose()
}else {
vm.$message({
type: "success",
message: "暂存成功",
duration: 1000,
});
this.$emit("submit");
this.handleClose()
}
} else {
vm.$message({
type: "error",
message: res.message,
duration: 1500,
});
}
});
// this.$router.push({path: "/qzzprw"})
} else {
return false;
}
}
}else {
this.$message({
message: '考评对象单位不能为空!',
type: 'error'
});
}
});
},
// 编辑回显数据
redact() {
// 是否为==>compile--编辑
if(this.name == 'compile') {
if(this.flag == 'country'){
// 国家
API.view(this.id).then((res) => {
// 联系人员id
this.contactPersonId = res.data.contactPersonId
this.ruleForm = {
title: res.data.title,
kpsj: [res.data.evaluationStartTime,res.data.evaluationEndTime],
ypffsj: [res.data.sampleDistributionStartTime,res.data.sampleDistributionEndTime],
reportEndTime: res.data.reportEndTime,
remarks: res.data.remarks,
infoNineFile: res.data.files,
contactPersonName: res.data.contactPersonName,
contactPhone: res.data.contactPhone,
}
this.ruleForm.evaluationOrgIdArray = res.data.evaluationOrgInfo
// this.ruleForm.totalMultipleSelection = res.data.evaluationOrgInfo
this.ruleForm.evaluationOrgName = res.data.evaluationOrgName
})
}else {
// 省级
API.view(this.id).then((res) => {
this.h1 = res.data.sampleCode[0]
this.h2 = res.data.sampleCode[1]
this.h3 = res.data.sampleCode[2]
this.h4 = res.data.sampleCode[3]
this.h5 = res.data.sampleCode[4]
// 联系人员id
this.contactPersonId = res.data.contactPersonId
this.ruleForm = {
title:res.data.title,
kpsj:[res.data.evaluationStartTime,res.data.evaluationEndTime],
ypffsj:[res.data.sampleDistributionStartTime,res.data.sampleDistributionEndTime],
reportEndTime: res.data.reportEndTime,
khypbh1: res.data.sampleCode[0],
khypbh2: res.data.sampleCode[1],
khypbh3: res.data.sampleCode[2],
khypbh4: res.data.sampleCode[3],
khypbh5: res.data.sampleCode[4],
remarks: res.data.remarks,
infoNineFile1: res.data.files,
contactPersonName: res.data.contactPersonName,
contactPhone: res.data.contactPhone,
}
this.syphilisTableData1 = [
{
khypbh1: {
dx: res.data.correctValue[0].data[0].dx,
dl: res.data.correctValue[0].data[0].dl,
},
khypbh2: {
dx: res.data.correctValue[0].data[1].dx,
dl: res.data.correctValue[0].data[1].dl,
},
khypbh3: {
dx: res.data.correctValue[0].data[2].dx,
dl: res.data.correctValue[0].data[2].dl,
},
khypbh4: {
dx: res.data.correctValue[0].data[3].dx,
dl: res.data.correctValue[0].data[3].dl,
},
khypbh5: {
dx: res.data.correctValue[0].data[4].dx,
dl: res.data.correctValue[0].data[4].dl,
},
}
]
this.syphilisTableData2 = [
{
khypbh1: res.data.correctValue[1].data[0].value,
khypbh2: res.data.correctValue[1].data[1].value,
khypbh3: res.data.correctValue[1].data[2].value,
khypbh4: res.data.correctValue[1].data[3].value,
khypbh5: res.data.correctValue[1].data[4].value,
},
]
this.ruleForm.evaluationOrgIdArray = res.data.evaluationOrgInfo
// this.ruleForm.totalMultipleSelection = res.data.evaluationOrgInfo
this.ruleForm.evaluationOrgName = res.data.evaluationOrgName
})
}
}else {
return false
}
},
getUnit() {
this.showChoose = true;
this.$nextTick(() => {
this.$refs.choose.chooseDialog = true;
this.$refs.choose.init();
});
},
// 获取子组件传过来的参数
getChecked(val) {
let name = "";
// this.ruleForm.evaluationOrgIdArray = [];
val.map((item) => {
name += item.orgName + ",";
});
this.ruleForm = {
...this.ruleForm,
evaluationOrgName:name,
evaluationOrgIdArray:val
}
},
// 查询
onSearch() {
this.pageNum = 1;
// this.getluationData();
},
// 重置
onReset() {
this.pageNum = 1;
this.pageSize = 15;
this.form = {
orgName: "",
region: "",
};
// 选中的数据
// this.selectRadio = [];
// this.getluationData();
},
// 考评对象单位分页 pageSize 改变时会触发
handleSizeChange(val) {
this.pageSize = val;
// this.getluationData();
},
// 考评对象单位分页 currentPage 改变时会触发
handlePageNumChange(val) {
this.currentPage = val;
this.pageNum = val;
// this.getluationData();
},
}
}
</script>
<style lang="scss" scoped>
.container-header {
text-align: center;
margin-bottom: 16px;
font-size: 16px;
}
.container-form {
overflow-y:scroll;
overflow-x:hidden;
width: 98%;
height: 400px;
}
.orgname {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.btn-div /deep/ .el-button {
font-size: 14px;
color: #ffffff;
background: #1966ff;
border-radius: 4px;
padding: 8px 14px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 4px;
height: 16px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(5, 5, 5, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
.jczb-title {
font-size: 14px;
color: #0067ff;
text-align: center;
width: 128px;
height: 24px;
line-height: 24px;
background: rgba(0, 103, 255, 0.2);
margin-bottom: 12px;
margin-top: 20px;
}
</style>
子组件完整代码:
<!-- 新增-考评单位弹框 -->
<template>
<el-dialog title="选择质评单位" :visible.sync="chooseDialog" width="70%" top="5%" ref="detailDialog" @close="chooseDialog=false" :append-to-body="true">
<div class="dialog-div" style="max-height:30rem">
<el-form style="margin-top: 20px;" ref="ruleForm" :model="searchForm" label-width="120px" :inline="true">
<el-form-item label="单位名称">
<el-input style="width: 150px;" v-model="searchForm.orgName" placeholder="请输入单位名称"></el-input>
</el-form-item>
<el-form-item label="机构等级">
<el-select style="width: 150px;" v-model="searchForm.orgLevel" placeholder="请选择">
<el-option v-for="(item,index) in orgLevelList" :key="index" :label="item.dictValue" :value="item.dictKey"></el-option>
</el-select>
</el-form-item>
<el-form-item style="text-align: right">
<el-button type="primary" @click="onSearch" class="search-btn">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<div class="table-container">
<!-- @selection-change是多选全选的事件 @select是单选事件(点击复选框的方法，可以只选一行) -->
<el-table :data="tableData" ref="multipleTable" @selection-change="selectAll" @select="select">
<el-table-column type="selection" align="center" min-width="2%"></el-table-column>
<el-table-column prop="orgName" label="组织机构名称" min-width="20%" show-overflow-tooltip></el-table-column>
</el-table>
<div class="page-container">
<el-pagination background @size-change="handleSizeChange" layout="total,sizes, prev, pager, next, jumper" :page-sizes="[10, 30, 50, 100]" :current-page="currentPage" @current-change="handlePageNumChange" :page-size="searchForm.pageSize" :total="pageTotal">
</el-pagination>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import commom from "../../../../../src/api/common"
import func from "../../../../../src/components/page/laboratoryAccept/function";
export default {
data() {
return {
pageTotal: 0,
searchForm: {
pageSize: 10,
pageNum: 1,
orgName: undefined,
orgLevel: undefined,
// abilityType:'3'
},
areaName: '',
chooseDialog: false,
cityList: [],
optionProps: {
value: "itemId",
label: "itemName",
children: "child",
},
tableData: [],
multipleSelection: [],
currentPage: 1,
abilityList: [],
totalMultipleSelection: [],
orgLevelList: [],
orgCategoryList: [],
orgTypeList: [],
};
},
mounted() {
this.getArea();
this.getDictList();
},
props: {
evaluationOrgIdArray: {
type:Array,
default:()=>[]
},
},
watch: {
evaluationOrgIdArray: {
handler: function (val) {
this.init();
},
deep: true,
},
},
methods: {
//获取检测能力字典值
async getDictList() {
try {
const res = await Promise.all([
commom.getJsonZd("ORG_LEVEL"),
commom.getJsonZd("ORG_CATEGORY"),
commom.getJsonZd("ORG_TYPE"),
commom.getJsonZd("ORG_POWER"),
]);
this.orgLevelList = func.parseRespondResult(res[0]) && res[0].data;
this.orgCategoryList = func.parseRespondResult(res[1]) && res[1].data;
this.orgTypeList = func.parseRespondResult(res[2]) && res[2].data;
this.abilityList = func.parseRespondResult(res[3]) && res[3].data;
} finally {
}
},
//选中回显
showSelection() {
let selectData = [];
this.tableData.forEach((item) => {
this.totalMultipleSelection.forEach((value) => {
if (item.orgId === value.orgId) {
selectData.push(item);
}
});
});
this.$nextTick(() => {
if (selectData.length > 0) {
selectData.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
}
});
},
init() {
this.totalMultipleSelection = [];
this.searchForm.pageNum = 1;
this.searchForm.pageSize = 10;
this.currentPage = 1;
this.totalMultipleSelection = this.evaluationOrgIdArray;
this.getList();
},
getList() {
commom.getOrgTreeData(this.searchForm).then((res) => {
if (func.parseRespondResult(res)) {
this.tableData = res.data.records;
this.pageTotal = res.data.total;
this.showSelection();
}
});
},
onSearch() {
this.currentPage = 1;
this.searchForm.pageSize = 10;
this.searchForm.pageNum = 1;
this.getList();
},
onReset() {
this.searchForm = {
pageSize: 10,
pageNum: 1,
orgName: undefined,
orgLevel: undefined,
abilityType:'3'
};
this.getList();
},
// pageSize 改变时会触发
handleSizeChange(val) {
this.searchForm.pageSize = val;
this.getList();
},
// currentPage 改变时会触发
handlePageNumChange(val) {
this.currentPage = val;
this.searchForm.pageNum = val;
this.getList();
},
//获取省市县
getArea() {
commom.getProUrAreaData().then((res) => {
if (func.parseRespondResult(res)) {
this.cityList = res.data;
}
});
},
//table列表全选
selectAll(val) {
if (val.length > 0) {
// 选中的数据深拷贝给 multipleSelection数组
this.multipleSelection = JSON.parse(JSON.stringify(val));
// concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。返回一个新数组.如果要进行concat操作的参数是数组，那么将数组中的元素提取出来，然后合并成一个新数组。
// 由于我的表格数据很多,每页只展示10条数据,我们每次都全选的话,只会选中当前页的数据,所以我们需要把每次选中的数据进行合并,这样才能保证我们选中的数据是所有的数据
this.totalMultipleSelection = this.totalMultipleSelection.concat(val);
// 去重
let obj = {};
// reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
this.totalMultipleSelection = this.totalMultipleSelection.reduce(
(cur, next) => {
// 判断对象中是否存在next的id，如果不存在则赋值给对象，并返回当前cur
// 如果存在则不操作cur，直接返回cur
//这里的&&是为了防止push返回的是数组的长度
//这里的obj[next.orgId]是为了防止重复的数据
obj[next.orgId] ? "" : (obj[next.orgId] = true && cur.push(next));
return cur;
},
[]
);
} else {
this.multipleSelection = JSON.parse(JSON.stringify(this.tableData));
var set = this.multipleSelection.map((item) => {//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
return item.orgId;
});
var resArr = this.totalMultipleSelection.filter(//filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
(item) => !set.includes(item.orgId)
);
this.totalMultipleSelection = resArr;
}
},
//table列表单选
select(val, row) {
const selected = this.totalMultipleSelection.some(//some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
(item) => item.orgId === row.orgId
);
if (!selected) {//如果没有选中
this.totalMultipleSelection.push(row);//把当前选中的数据添加到totalMultipleSelection数组中
} else {
var finalArr = this.totalMultipleSelection.filter((item) => {//filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
return item.orgId !== row.orgId;//如果选中的数据在totalMultipleSelection数组中存在,则把它从totalMultipleSelection数组中删除
});
this.totalMultipleSelection = finalArr;
}
},
//取消弹窗
cancel() {
this.chooseDialog = false;
},
confirm() {
this.$emit("getChecked", this.totalMultipleSelection);
this.chooseDialog = false;
},
},
};
</script>
部分讲解:
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)