<template>
|
<div class="wrapper">
|
<el-row>
|
<FYForm
|
:inline="true"
|
label-width=""
|
:form-info="formInfo"
|
:rules="rules"
|
@submit="submit"
|
>
|
<template #form-item="{ formObj }">
|
<el-form-item label="执行人" prop="executor">
|
<el-select
|
v-model="formObj.executor"
|
multiple
|
clearable
|
collapse-tags
|
placeholder="选择执行人"
|
:max-collapse-tags="1"
|
style="width: 240px"
|
>
|
<template #header>
|
<el-checkbox
|
v-model="checkAll"
|
:indeterminate="indeterminate"
|
@change="handleCheckAll"
|
>
|
全选
|
</el-checkbox>
|
</template>
|
<el-option
|
v-for="item in executors"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</template>
|
</FYForm>
|
</el-row>
|
<div>
|
<el-scrollbar :height="scrollHeight" v-if="data.length > 0">
|
<el-space wrap>
|
<ItemMonitorObj v-for="obj in data" :key="obj.movid" :item="obj">
|
<template #default="{ item }">
|
<el-button
|
size="small"
|
type="danger"
|
plain
|
@click="deleteScene(item)"
|
>移除</el-button
|
>
|
</template>
|
</ItemMonitorObj>
|
</el-space>
|
</el-scrollbar>
|
<el-empty v-else description=" ">
|
<template #image>
|
<el-row align="middle">
|
<el-icon size="20"><WarningFilled /></el-icon>
|
<el-text size="small" type="info">未选择场景</el-text>
|
</el-row>
|
</template>
|
</el-empty>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
/**
|
* 巡查子任务创建
|
*/
|
import { ref, reactive, watch, computed, onMounted, inject } from 'vue';
|
import { ElMessageBox, ElNotification, ElMessage } from 'element-plus';
|
import taskApi from '@/api/fysp/taskApi';
|
import TaskProxy from '../TaskProxy';
|
|
// const topTask = inject('topTask');
|
|
const props = defineProps({
|
// 子任务集合
|
data: {
|
type: Array,
|
default: () => []
|
},
|
height: String,
|
// 日任务
|
dayTask: Object
|
});
|
|
const emit = defineEmits(['submit', 'delete']);
|
|
const scrollHeight = ref('14vh');
|
|
// 移除任务场景
|
function deleteScene(item) {
|
emit('delete', item);
|
}
|
|
/************************* 任务创建表单 *******************************/
|
const formInfo = ref({});
|
const rules = reactive({
|
name: [
|
{
|
required: true,
|
message: '场景名称不能为空',
|
trigger: 'blur'
|
}
|
]
|
});
|
function submit(v, success, fail) {
|
if (props.data.length == 0) {
|
// ElMessage({
|
// message: '未选择监管场景',
|
// type: 'warning'
|
// });
|
fail('未选择监管场景');
|
} else {
|
success();
|
// 将任务执行人格式化并传递
|
const param = TaskProxy.getExecutors(v.value.executor, executors.value);
|
emit('submit', param);
|
}
|
}
|
|
/************************* 任务执行人下拉选框 *******************************/
|
// onMounted(() => {
|
// getExecutors(topTask.value);
|
// });
|
|
const executors = ref([]);
|
// 是否全选
|
const checkAll = ref(false);
|
// 多选框是否中间状态
|
const indeterminate = ref(false);
|
// 全选事件
|
function handleCheckAll(val) {
|
indeterminate.value = false;
|
if (val) {
|
formInfo.value.executor = executors.value.map((_) => _.value);
|
} else {
|
formInfo.value.executor = [];
|
}
|
}
|
|
function getExecutors(t) {
|
const ids = t.executorguids.split('#');
|
const userNames = t.executorusernames.split('#');
|
const realNames = t.executorrealnames.split('#');
|
const list = [];
|
ids.forEach((e, i) => {
|
if (i < userNames.length && i < realNames.length) {
|
list.push({
|
label: realNames[i],
|
value: e,
|
data: {
|
id: e,
|
userName: userNames[i],
|
realName: realNames[i]
|
}
|
});
|
}
|
});
|
|
executors.value = list;
|
}
|
// watch(topTask, (nV, oV) => {
|
// if (nV != oV) {
|
// getExecutors(nV);
|
// }
|
// });
|
|
watch(
|
() => props.dayTask,
|
(nV, oV) => {
|
if (nV != oV) {
|
taskApi.fetchTaskById(nV.guid).then((res) => {
|
getExecutors(res);
|
});
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(
|
() => formInfo.value.executor,
|
(val) => {
|
if (val.length === 0) {
|
checkAll.value = false;
|
indeterminate.value = false;
|
} else if (val.length === executors.value.length) {
|
checkAll.value = true;
|
indeterminate.value = false;
|
} else {
|
indeterminate.value = true;
|
}
|
}
|
);
|
</script>
|
<style scoped>
|
.wrapper {
|
border-bottom: 1px solid var(--el-color-info-light-7);
|
}
|
</style>
|
