Merge branch 'lsf-topTask'

riku

2024-10-18 c7bd6db3190ff5c4b55d004db0b9fa944604925f

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,141 @@
<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>