一、需求,看下图:
列表的值是通过打开弹框,添加题库中的题目得来,最后显示:
二、查询题库返回的json:
[
{
"id": "1",
"creatorId": "111111112",
"modifyId": "0",
"createDate": 1618223318000,
"modifyDate": 1620982753000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "\r\n在召唤指令控制中,轿内优先的原则是指轿厢在起动前,轿内的选层指令应优先于层站召唤的指令。",
"itemType": 1,
"aclId": null,
"remark": null,
"teItemOptionsDTOList": [
{
"id": "1",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618223427000,
"modifyDate": 1620982753000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "1",
"layerSeq": 1,
"optionTitle": "这是错",
"keyFlag": 0,
"remark": null
},
{
"id": "2",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618223473000,
"modifyDate": 1620982753000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "1",
"layerSeq": 1,
"optionTitle": "错误",
"keyFlag": 1,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "2",
"creatorId": "111111112",
"modifyId": "0",
"createDate": 1618309656000,
"modifyDate": 1620982138000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "发生电梯电击事故的原因主要有( )。",
"itemType": 3,
"aclId": null,
"remark": null,
"teItemOptionsDTOList": [
{
"id": "5",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618309819000,
"modifyDate": 1620982138000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "2",
"layerSeq": 1,
"optionTitle": "A.电气设备金属外壳未接地或接地不良",
"keyFlag": 0,
"remark": null
},
{
"id": "6",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618309881000,
"modifyDate": 1620982138000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "2",
"layerSeq": 1,
"optionTitle": "B.电线、电缆绝缘保护层破损",
"keyFlag": 1,
"remark": null
},
{
"id": "7",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618309916000,
"modifyDate": 1620982138000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "2",
"layerSeq": 1,
"optionTitle": "C.作业人员违反操作规程带电作业",
"keyFlag": 1,
"remark": null
},
{
"id": "8",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618309956000,
"modifyDate": 1620982138000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "2",
"layerSeq": 1,
"optionTitle": "D.铆钉",
"keyFlag": 1,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "3",
"creatorId": "111111112",
"modifyId": "0",
"createDate": 1618309695000,
"modifyDate": 1620702277000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "电梯电动机和减速箱之间的联接方式一般采用( )连接。",
"itemType": 2,
"aclId": null,
"remark": null,
"teItemOptionsDTOList": [
{
"id": "3",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618309744000,
"modifyDate": 1620702277000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "3",
"layerSeq": 1,
"optionTitle": "\r\nA.联轴器",
"keyFlag": 1,
"remark": null
},
{
"id": "4",
"creatorId": "1111111",
"modifyId": "0",
"createDate": 1618309780000,
"modifyDate": 1620702277000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "1111111",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "3",
"layerSeq": 1,
"optionTitle": "B.特殊材料粘接",
"keyFlag": 0,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "40282f8178d006ee0178d0075c3c0000",
"creatorId": "10000",
"modifyId": "0",
"createDate": 1618397847000,
"modifyDate": 1620981797000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "的点点滴滴",
"itemType": 1,
"aclId": "402881c179224cea01794650731e00dc,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
"remark": null,
"teItemOptionsDTOList": [
{
"id": "40282f8178d006ee0178d0075c980002",
"creatorId": "10000",
"modifyId": "0",
"createDate": 1618397847000,
"modifyDate": 1620981797000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d006ee0178d0075c3c0000",
"layerSeq": 1,
"optionTitle": "正确",
"keyFlag": 1,
"remark": null
},
{
"id": "40282f8178d006ee0178d0075cc00004",
"creatorId": "10000",
"modifyId": "0",
"createDate": 1618397847000,
"modifyDate": 1620981798000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d006ee0178d0075c3c0000",
"layerSeq": 2,
"optionTitle": "错误",
"keyFlag": 0,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "40282f8178d006ee0178d00828d60006",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618397899000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "测试新增试题111",
"itemType": 1,
"aclId": null,
"remark": null,
"teItemOptionsDTOList": [
{
"id": "40282f8178d006ee0178d00829110008",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618397899000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d006ee0178d00828d60006",
"layerSeq": 1,
"optionTitle": "正确",
"keyFlag": 0,
"remark": null
},
{
"id": "40282f8178d006ee0178d0082934000a",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618397899000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d006ee0178d00828d60006",
"layerSeq": 2,
"optionTitle": "错误",
"keyFlag": 1,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "40282f8178d32bb60178d33338620000",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618451053000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "新增判断题",
"itemType": 1,
"aclId": null,
"remark": null,
"teItemOptionsDTOList": [
{
"id": "40282f8178d32bb60178d33338e70002",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618451053000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d32bb60178d33338620000",
"layerSeq": 1,
"optionTitle": "正确",
"keyFlag": 1,
"remark": null
},
{
"id": "40282f8178d32bb60178d333394f0004",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618451053000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d32bb60178d33338620000",
"layerSeq": 2,
"optionTitle": "错误",
"keyFlag": 0,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "40282f8178d49b4e0178d4a7a7f40000",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618475461000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "测试新增判断题1",
"itemType": 1,
"aclId": null,
"remark": null,
"teItemOptionsDTOList": [
{
"id": "40282f8178d49b4e0178d4a7a8560002",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618475461000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d49b4e0178d4a7a7f40000",
"layerSeq": 1,
"optionTitle": "正确",
"keyFlag": 1,
"remark": null
},
{
"id": "40282f8178d49b4e0178d4a7a8ec0004",
"creatorId": "10000",
"modifyId": null,
"createDate": 1618475461000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "40282f8178d49b4e0178d4a7a7f40000",
"layerSeq": 2,
"optionTitle": "错误",
"keyFlag": 0,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "402881ac7968868e01796a1a2e180000",
"creatorId": "0",
"modifyId": null,
"createDate": 1620982771000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "1111",
"itemType": 2,
"aclId": "COM001USER000002,COM001USER000001,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
"remark": null,
"teItemOptionsDTOList": [
{
"id": "402881ac7968868e01796a1a2eaf0001",
"creatorId": "0",
"modifyId": null,
"createDate": 1620982771000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "402881ac7968868e01796a1a2e180000",
"layerSeq": 1,
"optionTitle": "a.1",
"keyFlag": 1,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "402881c17969082201796a1490af0046",
"creatorId": "0",
"modifyId": "0",
"createDate": 1620982403000,
"modifyDate": 1620982857000,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "123132",
"itemType": 2,
"aclId": "COM001USER000002,COM001USER000001,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
"remark": null,
"teItemOptionsDTOList": [
{
"id": "402881c17969082201796a1b7bc80057",
"creatorId": "0",
"modifyId": null,
"createDate": 1620982857000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "402881c17969082201796a1490af0046",
"layerSeq": 1,
"optionTitle": "2",
"keyFlag": 1,
"remark": null
}
],
"optionsIds": null,
"score": "1"
},
{
"id": "402881c17969082201796a1af9ad004f",
"creatorId": "0",
"modifyId": null,
"createDate": 1620982823000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemTitle": "1",
"itemType": 1,
"aclId": "COM001USER000002,COM001USER000001,402881c1791124c101791142b1220005,402881c1791124c101791232da5801c1,402881c179224cea0179405ec61600d4,COM001USER000000,COM001USER000004",
"remark": null,
"teItemOptionsDTOList": [
{
"id": "402881c17969082201796a1af9b70051",
"creatorId": "0",
"modifyId": null,
"createDate": 1620982823000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "402881c17969082201796a1af9ad004f",
"layerSeq": 1,
"optionTitle": "正确",
"keyFlag": 0,
"remark": null
},
{
"id": "402881c17969082201796a1af9be0053",
"creatorId": "0",
"modifyId": null,
"createDate": 1620982823000,
"modifyDate": null,
"status": 0,
"state": null,
"creator": null,
"businessCode": null,
"creatorDept": null,
"creatorDeptId": null,
"creatorDeptPath": null,
"companyId": "COM001",
"companyName": null,
"exendsSql": null,
"pageIsOptional": null,
"pageHandleStatus": null,
"itemId": "402881c17969082201796a1af9ad004f",
"layerSeq": 2,
"optionTitle": "错误",
"keyFlag": 1,
"remark": null
}
],
"optionsIds": null,
"score": "1"
}
]
开始的时候返回的json中没有score字段,后来因为需要给加上去的
三、废话不多说,直接把vue的代码全贴出来,记录一下踩的坑:
<template>
<div class="base-form">
<el-form :inline="true" :model="assessForm" ref="rulesForm" :rules="assessRules">
<el-form-item label="考核名称:" prop="paperTitle" autocomplete="off" required>
<el-input v-model="assessForm.paperTitle"></el-input>
</el-form-item>
<el-form-item label="考核时长(min):" prop="testTime" autocomplete="off" required>
<el-input v-model.number="assessForm.testTime"></el-input>
</el-form-item>
<el-form-item label="合格分数线:" prop="qualifiedScore" autocomplete="off" required>
<el-input v-model.number="assessForm.qualifiedScore"></el-input>
</el-form-item>
<el-form-item label="状态:" prop="itemType" autocomplete="off" required>
<el-select v-model="assessForm.itemType">
<el-option v-for="status in assessTypeList" :key="status.value" :value="status.value" :label="status.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="每题默认分数:">
<el-input v-model="assessForm.score" @input="scoreChange"></el-input>
</el-form-item>
</el-form>
<!-- 弹出添加题目的弹框开始 -->
<el-dialog title="选择题目" :visible.sync="dialogTableVisible" width="80%" :close-on-click-modal="false" @close="closeDialog">
<div class="baseList">
<div class="searchModule">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="考核名称:">
<el-input v-model="searchForm.itemTitle"></el-input>
</el-form-item>
<el-form-item label="状态:">
<el-select v-model="searchForm.itemType">
<el-option v-for="status in itemTypeList" :key="status.value" :value="status.value" :label="status.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="评分:">
<div class="inline-item">
<el-input v-model="searchForm.accuracyStart"></el-input>
<span>~</span>
<el-input v-model="searchForm.accuracyEnd"></el-input>
</div>
</el-form-item>
</el-form>
<div class="search-btns">
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
</div>
</div>
<div class="tableModule">
<el-table :data="questionsList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="itemTitle" label="题目" align="center"></el-table-column>
<el-table-column prop="itemType" label="类型" :formatter="itemTypeFormatter" align="center"></el-table-column>
<el-table-column label="选项">
<template slot-scope="scope">
<!--eslint-disable-next-line-->
<span v-for="itemOptions in scope.row.teItemOptionsDTOList">
{{ itemOptions.optionTitle }};
</span>
</template>
</el-table-column>
<el-table-column prop="time" label="答案">
<template slot-scope="scope">
<!--eslint-disable-next-line-->
<span v-for="itemOptions in scope.row.teItemOptionsDTOList">
<span v-if="itemOptions.keyFlag==1"> {{ itemOptions.optionTitle }} </span>
</span>
</template>
</el-table-column>
<el-table-column prop="people" label="正确率" align="center"></el-table-column>
</el-table>
<pagination ref="page" @handleList="get"></pagination>
</div>
<el-button type="primary" @click="saveQuestions">确定</el-button>
<el-button @click="cencle">取消</el-button>
</div>
</el-dialog>
<!-- 弹出添加题目的弹框结束 -->
<div class="base-form-item">
<label class="require">考核题目:</label>
<el-button type="primary" @click="addQuestions">添加</el-button>
<div class="item-bottom">
<el-table border :data="assessList" show-summary :summary-method="getSummaries">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="itemTitle" label="题目"></el-table-column>
<el-table-column prop="itemType" label="类型" :formatter="itemTypeFormatter" align="center"></el-table-column>
<el-table-column prop="score" label="分数" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.score"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button type="text" @click="delQuestions(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<pagination ref="page" @handleList="get" v-show="false"></pagination>
<div class="base-form-btns">
<el-button type="primary" @click="save('rulesForm')">提交</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
// 校验考核时长
var checkTime = (rule, value, callback) => {
console.log(rule)
if (!value) {
return callback(new Error('考核时长不能为0或为空!'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if(value >180){
callback(new Error('必须输入小于或等于180的值!'));
}else {
callback();
}
}
}, 1000);
};
// 校验考核名称
var checkPaperTitle = (rule, value, callback) => {
if (value === '') {
callback(new Error('考核名称不能为空!'));
}else {
callback()
}
};
// 校验合格分数线
var checkQualifiedScore = (rule, value, callback) => {
console.log(rule)
if (!value) {
return callback(new Error('合格分数线不能为0或为空!'));
}else {
callback()
}
};
return {
questionsList: [],
assessList: [],
multipleSelection: [],
assessForm: {
paperTitle: '',
testTime: '',
qualifiedScore: '',
testStatus: '',
score: '',
},
score: '',
// 分数合计
qualifiedScore: '',
searchForm: {
itemTitle: '',
itemType: '',
accuracyStart: '',
accuracyEnd: '',
},
// 校验表单
assessRules: {
paperTitle:[
{ validator: checkPaperTitle, trigger: 'blur' }
],
testTime:[
{ validator: checkTime, trigger: 'blur' }
],
qualifiedScore:[
{ validator: checkQualifiedScore, trigger: 'blur' }
],
itemType: [
{ required: true, message: '请选择状态', trigger: 'change' }
],
},
// 题目类型:1判断、2单选、3多选
itemTypeList: [{
value: '1',
label: '判断'
},{
value: '2',
label: '单选'
},{
value: '3',
label: '多选'
}],
assessTypeList: [
{
value: '1',
label: '上架'
},
{
value: '0',
label: '下架'
},
],
// 控制添加题目的弹框
dialogTableVisible: false,
}
},
mounted(){
this.get();
},
methods: {
// 监听默认分数的变化
scoreChange(){
this.score = this.assessForm.score
this.multipleSelection.forEach(m => {
m.score = this.score
})
console.log(JSON.stringify(this.multipleSelection))
this.assessList = this.multipleSelection
},
// 提交
save(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 添加题库中的题目
addQuestions(){
// 弹框
this.dialogTableVisible = true
},
get() {
const paginationInfo = this.$refs.page.getPaginationInfo()
this.$post('/teItemBank/list', {
pageNumber: paginationInfo.currentPage,
pageSize: paginationInfo.pageSize,
rowCount: paginationInfo.totalCount,
parameters: Object.assign(this.searchForm)
}).then(data => {
console.log(data)
this.questionsList = data.object.list
this.$refs.page.setTotalCount(data.object.rowCount)
})
},
search() {
this.$refs.page.initPageNumber()
this.get()
},
reset() {
this.searchForm = this.$options.data().searchForm
this.$refs.chooseOrg.clearChooseOrg()
},
// 添加题库时选中的题目
handleSelectionChange(val){
this.multipleSelection = val
},
// 添加题目确定按钮
saveQuestions(){
if(this.multipleSelection.length == 0){
this.$message.error("请至少选择一个题目!")
return;
}
this.dialogTableVisible = false
this.assessList = this.multipleSelection;
},
cencle(){
this.dialogTableVisible = false
this.reset()
},
// 关闭dialog弹框时回调
closeDialog(){
this.reset()
},
// 题目类型显示
itemTypeFormatter(row){
if (row.itemType == 1) {
return "判断";
} else if(row.itemType == 2){
return "单选";
}else if(row.itemType == 3){
return "多选";
}
},
// 自定义合计分数的方法
getSummaries (param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
} else if (index === 3) { // 需要合计的列
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
} else {
sums[index] = 'N/A'
}
} else {
sums[index] = '--'
}
})
this.qualifiedScore = sums
return sums
},
// 删除题目
delQuestions(index){
this.assessList.splice(index,1);
},
}
}
</script>
<style lang="scss" scoped>
@import '@/css/baseForm.scss';
</style>
四、实现思路:
点增加按钮时,弹出题库的弹框,选出需要的题目,选中的值与mutipleSelection绑定,关闭弹框时把值赋给assessList,当输入框的值改变时,把mutipleSelection中的score的值给assessList就可以了;
1、定义mutipleSelection、assessList两个数组
2、遍历assessList:
3、不懂的请看完整的代码,我是个后端的,让我写前端的代码,还告诉我前后端分离!!!