完成地图制作任务功能初版

riku

5 天以前 f19e5267cc23b1c714dc746239864f33ed715dd9

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

@@ -1,35 +1,97 @@
<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
        v-model="seletedSceneList"
        :dayTask="dayTask"
        @submit="createSubtasks"
      ></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">
      <CompSubTaskList
        v-model="curSubTaskList"
        :height="height"
        :date="dayTask.date"
        @submit="deleteSubtasks"
      ></CompSubTaskList>
    </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 { ref, watch, onMounted, inject } from 'vue';
import { useCloned } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import taskApi from '@/api/fysp/taskApi';
import subtaskApi from '@/api/fysp/subtaskApi';
import TaskProxy from '../TaskProxy';

import CompMonitorObj from './CompMonitorObj.vue';
import CompSubTaskSelect from './CompSubTaskSelect.vue';
import CompSubTaskList from './CompSubTaskList.vue';
import dayjs from 'dayjs';

const route = useRoute();

const props = defineProps({
  // 日任务
  dayTask: Object
  dayTask: Object,
  mObjList: Array
});

const emit = defineEmits(['submit']);

/*************************** 数据初始化 ************************************/
// 巡查子任务集合
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 +111,35 @@
    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);
// }

function createSubtasks() {
  seletedSceneList.value = [];
  fetchSubTask(props.dayTask.guid);
  ElMessage({
    message: '巡查任务添加成功',
    type: 'success'
  });
  emit('submit');
}

function deleteSubtasks() {
  emit('submit');
}
</script>
<style scoped></style>