riku
2024-10-17 971c7c5993ff475157b0c9ed137998fd39f6c548
src/views/fysp/task/TaskManage.vue
@@ -1,9 +1,8 @@
<template>
  <BaseContentLayout>
    <template #header>
      <FYSearchBar @search="search">
      <!-- <FYSearchBar @search="search">
        <template #options>
          <!-- 区县 -->
          <FYOptionLocation
            :allOption="true"
            :level="3"
@@ -11,13 +10,14 @@
            v-model:value="formSearch.locations"
          ></FYOptionLocation>
        </template>
        <!-- <template #buttons>
          <slot name="buttons"></slot>
        </template> -->
      </FYSearchBar>
      </FYSearchBar> -->
    </template>
    <template #aside>
      <SideList :items="tasks" :loading="sideLoading" @item-click="chooseTask"></SideList>
      <SideList
        :items="tasks"
        :loading="sideLoading"
        @item-click="chooseTask"
      ></SideList>
    </template>
    <template #main>
      <ToolBar
@@ -31,32 +31,109 @@
        class="el-scrollbar"
        v-loading="mainLoading"
      >
        <div><el-text>监管计划</el-text></div>
        <el-row justify="space-between">
          <!-- <div><el-text>监管计划</el-text></div>
          <el-button type="warning" size="small" @click="editPlan"
            >计划调整</el-button
          > -->
          <el-tabs model-value="first">
            <el-tab-pane label="监管计划" name="first">
              <el-row>
                <el-col :span="curSubTaskList.length > 0 ? 16 : 24">
                  <CompMonitorPlan
                    :task="curTask.data"
                    @date-change="onDateChange"
                  ></CompMonitorPlan>
                </el-col>
                <el-col v-if="curSubTaskList.length > 0" :span="8">
                  <CompSubTaskList :data="curSubTaskList" height="56vh"></CompSubTaskList>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="监管地图" name="second">
              <CompTaskMap></CompTaskMap>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <el-divider></el-divider>
        <el-button type="primary" size="small" @click="editTask">场景调整</el-button>
        <div><el-text>监管场景</el-text></div>
        <el-row justify="space-between">
          <div><el-text>监管场景</el-text></div>
          <el-button type="warning" size="small" @click="editTask"
            >场景调整</el-button
          >
        </el-row>
        <CompMonitorObj :data="curMonitorObjList"></CompMonitorObj>
        <!-- <div><el-text>监管场景</el-text></div>
        <div>
          <el-space wrap>
            <ItemMonitorObj
              v-for="item in curMonitorObjList"
              :key="item.movid"
              :item="item"
            ></ItemMonitorObj>
          </el-space>
        </div> -->
      </el-scrollbar>
      <el-empty v-else description="暂无记录" v-loading="mainLoading" />
      <div v-else>
        <el-empty description="暂无记录" v-loading="mainLoading" />
        <el-row v-if="!mainLoading" justify="center">
          <el-button
            type="primary"
            size="default"
            @click="navToTaskCreate(curTask.data)"
            >添加监管场景</el-button
          >
        </el-row>
      </div>
    </template>
  </BaseContentLayout>
  <el-drawer
    v-model="subTaskDrawer"
    title="日计划管理"
    direction="btt"
    size="96%"
    destroy-on-close
  >
    <CompDayTask
      :day-task="curDayTask"
      :mObjList="curMonitorObjList"
    ></CompDayTask>
  </el-drawer>
  <el-dialog
    v-model="topTaskAddVisible"
    width="600"
    title="一键创建总任务"
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <CompTaskEdit
      @submit="navToTaskCreate"
      @cancel="topTaskAddVisible = false"
    ></CompTaskEdit>
  </el-dialog>
</template>
<script>
import taskApi from '@/api/fysp/taskApi';
import CompMonitorObj from './components/CompMonitorObj.vue';
import CompMonitorPlan from './components/CompMonitorPlan.vue';
import CompDayTask from './components/CompDayTask.vue';
import CompTaskMap from './components/CompTaskMap.vue';
import CompTaskEdit from './components/CompTaskEdit.vue';
import CompSubTaskList from './components/CompSubTaskList.vue';
export default {
  components: { CompMonitorObj },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` !
    // 因为当守卫执行时,组件实例还没被创建!
    next((vm) => {
      if (from.name == 'monitorObjEdit' && vm.task) {
        vm.chooseTask(vm.task);
      } else if (from.name == 'monitorTaskCreate') {
        vm.search();
      }
    });
  },
  components: {
    CompMonitorObj,
    CompMonitorPlan,
    CompDayTask,
    CompTaskMap,
    CompTaskEdit,
    CompSubTaskList
  },
  data() {
    return {
      formSearch: {
@@ -73,19 +150,32 @@
      tasks: [],
      // 当前任务的监管对象
      curMonitorObjList: [],
      // 当前任务的展示中的监管对象
      showMonitorObjList: [],
      //当前选中的任务
      curTask: {},
      //操作按钮
      buttons: [
        {
          name: '计划调整',
          color: 'success'
        },
        {
          name: '场景调整',
          color: 'warning'
          name: '一键创建总任务',
          color: 'success',
          click: () => {
            this.topTaskAddVisible = true;
          }
        }
      ]
        // {
        //   name: '场景调整',
        //   color: 'warning'
        // }
      ],
      // 子任务编辑弹出框
      subTaskDrawer: false,
      // 当前选择的日任务
      curDayTask: {},
      // 当前选择的日任务下的子任务
      curSubTaskList: [],
      // 总任务新增弹出框
      topTaskAddVisible: false
    };
  },
  computed: {
@@ -141,6 +231,7 @@
      return type;
    },
    chooseTask(task) {
      this.task = task;
      this.sideLoading = false;
      this.mainLoading = true;
      taskApi
@@ -161,6 +252,31 @@
          task: encodeURIComponent(JSON.stringify(this.curTask.data))
        }
      });
    },
    editPlan() {
      this.$router.push({
        name: 'monitorPlanEdit',
        query: {
          data: encodeURIComponent(JSON.stringify(this.curMonitorObjList)),
          task: encodeURIComponent(JSON.stringify(this.curTask.data))
        }
      });
    },
    onDateChange(dayTask) {
      // this.subTaskDrawer = true;
      this.curDayTask = dayTask;
      taskApi.fetchSubtaskByDayTask(dayTask.guid).then((res) => {
        this.curSubTaskList = res;
      });
    },
    navToTaskCreate(value) {
      this.topTaskAddVisible = false;
      this.$router.push({
        name: 'monitorTaskCreate',
        query: {
          task: encodeURIComponent(JSON.stringify(value))
        }
      });
    }
  },
  mounted() {
@@ -177,6 +293,6 @@
}
.el-scrollbar {
  height: calc((100vh - 60px * 2 - 20px * 2 - var(--height-toolbar)));
  height: calc((100vh - 60px - 20px * 2 - var(--height-toolbar)));
}
</style>