132 lines
2.8 KiB
Vue
132 lines
2.8 KiB
Vue
<template>
|
|
<div class="LinePatrolMain">
|
|
<div class="checkMain">
|
|
<el-checkbox-group v-model="checkList" >
|
|
<el-checkbox
|
|
v-for="(item, index) in checkItems"
|
|
:key="index"
|
|
:label="item.ToolId"
|
|
:value="{
|
|
ToolId: item.ToolId,
|
|
ToolType: item.ToolType,
|
|
ToolName: item.ToolName,
|
|
ThreeToolId: item.ThreeToolId
|
|
}"
|
|
>
|
|
{{item.ToolName}}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
<div class='settingUp'>
|
|
<div class='maintain'>
|
|
<el-button @click="handleSave">保存</el-button>
|
|
<el-button>重置</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, defineProps } from 'vue'
|
|
import { apiGetTools, SaveTools } from '@/api/index.js'
|
|
import { ElMessage } from "element-plus"
|
|
|
|
const checkList = ref([])
|
|
const checkItems = ref([]) // 新增一个ref用于存储从API获取的工具列表
|
|
|
|
const { ExamId } = defineProps(['ExamId'])
|
|
|
|
onMounted(() => {
|
|
initFour()
|
|
})
|
|
|
|
const b = {
|
|
ExamId,
|
|
Type: '巡线'
|
|
}
|
|
|
|
const initFour = async () => {
|
|
const res = await apiGetTools(b)
|
|
checkItems.value = res.data.ToolList // 将API返回的工具列表赋值给checkItems
|
|
checkList.value = res.data.ToolList.map(item => {
|
|
if (res.data.SelectToolList.includes(item.ToolId)) {
|
|
return {
|
|
ToolId: item.ToolId,
|
|
ToolType: item.ToolType,
|
|
ToolName: item.ToolName,
|
|
ThreeToolId:item.ThreeToolId
|
|
}
|
|
}
|
|
}).filter(item => item)
|
|
}
|
|
const handleSave = async () => {
|
|
console.log(checkList.value, 'handleSave--')
|
|
const res = await SaveTools({
|
|
...b,
|
|
Data: checkList.value
|
|
})
|
|
if (res.code === 0) {
|
|
ElMessage({
|
|
message: '操作成功.',
|
|
type: 'success'
|
|
})
|
|
} else {
|
|
ElMessage.error(res?.data || '操作失敗')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.LinePatrolMain{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 24px;
|
|
}
|
|
.el-checkbox__label{
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #1D2129;
|
|
line-height: 21px;
|
|
}
|
|
:deep(.el-checkbox__input.is-checked .el-checkbox__inner){
|
|
background-color: #0D867F !important;
|
|
border-color:#0D867F;
|
|
}
|
|
:deep(.el-checkbox__input.is-checked+.el-checkbox__label){
|
|
color: #1D2129 !important;
|
|
}
|
|
.el-checkbox__inner:hover{
|
|
border-color:transparent;
|
|
}
|
|
.checkMain{
|
|
height: calc(100% - 94px);
|
|
padding: 0 38px;
|
|
}
|
|
.settingUp{
|
|
width: 100%;
|
|
height: 94px;
|
|
border-top: 3px solid rgba(246, 249, 248, 1);
|
|
}
|
|
.maintain{
|
|
float: right;
|
|
margin-right: 20px;
|
|
margin-top: 42px;
|
|
.el-button {
|
|
width: 84px;
|
|
height: 32px;
|
|
border: none;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
border-radius: 2px 2px 2px 2px;
|
|
}
|
|
.el-button:nth-child(1) {
|
|
background: #0d867f;
|
|
color: #ffffff;
|
|
}
|
|
.el-button:nth-child(2) {
|
|
background: #f2f3f5;
|
|
color: #1d2129;
|
|
}
|
|
}
|
|
</style>
|