<template>
|
<el-row gutter="20">
|
<el-col :span="16">
|
<div>
|
<el-text>监管场景</el-text>
|
</div>
|
<el-divider />
|
<CompSubTaskSelect
|
:data="seletedSceneList"
|
:dayTask="dayTask"
|
@delete="deleteScene"
|
></CompSubTaskSelect>
|
<div>
|
<!-- <el-scrollbar height="50vh"> -->
|
<CompMonitorObj :data="curMonitorObjList" height="50vh">
|
<template #default="{ item }">
|
<el-button
|
v-if="item.select"
|
size="small"
|
type="info"
|
plain
|
disabled
|
icon="select"
|
>选择</el-button
|
>
|
<el-button
|
v-else
|
size="small"
|
type="primary"
|
plain
|
@click="selectScene(item)"
|
>选择</el-button
|
>
|
</template>
|
</CompMonitorObj>
|
<!-- </el-scrollbar> -->
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<el-row justify="space-between">
|
<el-text>单日计划</el-text>
|
<el-button type="success" size="small" @click="editTask"
|
>新增</el-button
|
>
|
</el-row>
|
<el-divider />
|
<div>
|
<el-scrollbar :height="height">
|
<ItemSubTask
|
v-for="stask in curSubTaskList"
|
:key="stask.guid"
|
:item="stask"
|
>
|
<template #default="{ item }">
|
<el-button type="danger" size="small" @click="editTask"
|
>移除</el-button
|
>
|
</template>
|
</ItemSubTask>
|
</el-scrollbar>
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
import { ref, watch, onMounted } from 'vue';
|
import { useCloned } from '@vueuse/core';
|
import { useRoute, useRouter } from 'vue-router';
|
import taskApi from '@/api/fysp/taskApi';
|
import TaskProxy from '../TaskProxy';
|
|
import CompMonitorObj from './CompMonitorObj.vue';
|
import CompSubTaskSelect from './CompSubTaskSelect.vue';
|
|
const route = useRoute();
|
|
const props = defineProps({
|
// 日任务
|
dayTask: Object,
|
mObjList: Array
|
});
|
|
/*************************** 数据初始化 ************************************/
|
// 巡查子任务集合
|
const curMonitorObjList = ref([]);
|
const curSubTaskList = ref([]);
|
const height = ref('70vh');
|
|
// 监听日任务变化
|
watch(
|
() => props.dayTask,
|
(nV) => {
|
onDayTaskChange(nV);
|
},
|
{ immediate: true }
|
);
|
|
// 监听监管场景变化
|
watch(
|
() => props.mObjList,
|
(nV, oV) => {
|
if (nV != oV) {
|
curMonitorObjList.value = useCloned(nV).cloned.value;
|
}
|
},
|
{ immediate: true }
|
);
|
|
// 根据日任务获取对应子任务
|
function onDayTaskChange(dayTask) {
|
if (dayTask) {
|
fetchSubTask(dayTask.guid);
|
} else {
|
curSubTaskList.value = [];
|
}
|
}
|
|
// 获取巡查子任务
|
function fetchSubTask(dayTaskId) {
|
taskApi.fetchSubtaskByDayTask(dayTaskId).then((res) => {
|
curSubTaskList.value = res;
|
});
|
}
|
|
/*************************** 添加子任务 ************************************/
|
|
// 所选场景
|
const seletedSceneList = ref([]);
|
// 选择任务场景
|
function selectScene(item) {
|
item.select = true;
|
seletedSceneList.value.push(item);
|
}
|
// 移除任务场景
|
function deleteScene(item) {
|
item.select = false;
|
const index = seletedSceneList.value.indexOf(item);
|
seletedSceneList.value.splice(index, 1);
|
}
|
</script>
|
<style scoped></style>
|
