1. 完成总任务的管理模块（单日任务的管理未完成）

riku

2024-10-17 971c7c5993ff475157b0c9ed137998fd39f6c548

 src/views/fysp/task/components/CompDayTask.vue

@@ -1,35 +1,107 @@
<template>
  <el-row justify="space-between">
    <el-text>单日计划</el-text>
    <el-button type="success" size="small" @click="editTask">新增</el-button>
  <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>
  <el-divider />
  <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>
</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
  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) {
    //   onDayTaskChange(nV)
    // }
    onDayTaskChange(nV)
    if (nV != oV) {
      curMonitorObjList.value = useCloned(nV).cloned.value;
    }
  },
  { immediate: true }
);
@@ -49,5 +121,21 @@
    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>