1. 新增巡查计划功能（待完成）； 2. 完成任务的各场景下的分别移除和添加；

riku

2024-10-12 d8eda80eaf2f328ed43dc4f5c783b7dee5a4092c

 src/views/fysp/task/MonitorObjEdit.vue

@@ -1,45 +1,66 @@
<template>
  <el-page-header @back="$router.back()" class="page-header">
    <template #content>
      <span> 总任务编辑 </span>
    </template>
  </el-page-header>
  <el-divider />
  <el-affix :offset="60">
    <div class="page-header">
      <el-page-header @back="goBack">
        <template #content>
          <span> 总任务编辑 </span>
        </template>
        <template #extra>
          <div>
            <el-button type="primary" :disabled="!isEdit" :loading="saveLoading" @click="saveEdit"
              >保存修改</el-button
            >
          </div>
        </template>
      </el-page-header>
      <el-divider />
    </div>
  </el-affix>
  <el-row gutter="20">
    <el-col :span="16">
      <div>
        <el-text>已选场景</el-text>
      </div>
      <el-divider />
      <CompMonitorObj :data="curMonitorObjList" @tab-change="changeSceneType" :showDelete="true">
        <!-- <template #default="{ item }">
          <el-button size="small" type="danger" @click="deleteMov(item)">移除</el-button>
        </template> -->
      <CompMonitorObj
        :data="curMonitorObjList"
        show-btn
        v-model:tabName="curSceneType"
        v-model:showData="showMonitorObjList"
        :tabOptions="sceneTypeOptions"
        @item-click="deleteMov"
      >
      </CompMonitorObj>
    </el-col>
    <el-col :span="8">
      <div>
        <el-text>可选场景</el-text>
      </div>
      <el-divider />
      <FYInfoSearch
        label=""
        placeholder="请输入场景名称关键字"
        :data="showSceneList"
        :on-search="searchScene"
        :total="total"
        scroll-height="70vh"
        :page-show="false"
      >
        <template #default="{ row, click }">
          <ItemScene :item="row">
            <el-button-group>
              <el-button size="small" type="primary" @click="insertDialog = true">插入</el-button>
              <el-button size="small" type="primary" @click="addDialog = true">新增</el-button>
            </el-button-group>
          </ItemScene>
        </template>
      </FYInfoSearch>
      <el-affix :offset="140">
        <div>
          <el-text>可选场景</el-text>
        </div>
        <el-divider />
        <div>
          <el-segmented v-model="curSceneType" :options="sceneTypeOptions" />
        </div>
        <FYInfoSearch
          placeholder="请输入场景名称关键字"
          :data="showSceneList"
          :on-search="searchScene"
          :total="total"
          scroll-height="70vh"
          :page-show="false"
        >
          <template #default="{ row }">
            <ItemScene :item="row">
              <el-button-group>
                <el-button size="small" type="primary" @click="openInsertDialog(row)"
                  >插入</el-button
                >
                <el-button size="small" type="primary" @click="openAddDialog(row)">新增</el-button>
              </el-button-group>
            </ItemScene>
          </template>
        </FYInfoSearch>
      </el-affix>
    </el-col>
  </el-row>

@@ -51,7 +72,7 @@
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="insertDialog = false">取消</el-button>
        <el-button type="primary" @click="insertDialog = false"> 确认 </el-button>
        <el-button :disabled="!selectedIndex" type="primary" @click="insertMov"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
@@ -60,7 +81,7 @@
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addDialog = false"> 确认 </el-button>
        <el-button type="primary" @click="addMov"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
@@ -69,27 +90,48 @@
<script>
import CompMonitorObj from './components/CompMonitorObj.vue';
import svUserApi from '@/api/fysp/userApi';
import taskApi from '@/api/fysp/taskApi';
import sceneApi from '@/api/fysp/sceneApi';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';

export default {
  async beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    // return this.routerChangeCheck();
  },
  components: { CompMonitorObj },
  props: {},
  data() {
    return {
      // 监管场景
      curMonitorObjList: [],
      // 当前筛选的场景类型
      curSceneType: undefined,
      showMonitorObjList: [],

      // 行政区划
      area: {},
      // 所有场景
      sceneList: [],
      total: 0,

      // 当前筛选的场景类型
      curSceneType: undefined,

      // 插入弹出框
      insertDialog: false,
      // 插入或新增的编号
      selectedIndex: undefined,
      addDialog: false
      // 插入或新增的场景
      selectedScene: undefined,
      // 监管次数
      monitorTimes: 1,
      // 新增弹出框
      addDialog: false,
      // 新增的监管场景
      insertObj: [],
      // 更新的监管场景
      updateObj: [],
      // 删除的监管场景
      deleteObj: []
    };
  },
  computed: {
@@ -102,10 +144,12 @@
        return index == -1 && v.type == this.curSceneType;
      });
    },
    showMonitorObjList() {
      return this.curMonitorObjList.filter((v) => {
        return v.sceneType == this.curSceneType;
    sceneTypeOptions() {
      const list = [];
      this.sceneList.forEach((d) => {
        if (list.indexOf(d.type) == -1) list.push(d.type);
      });
      return list;
    },
    // 当前场景类型下的可插入编号
    valibleIndex() {
@@ -119,6 +163,9 @@
        }
        index++;
      });
      if (indexList.length == 0) {
        indexList.push(1);
      }
      return indexList;
    },
    lastIndex() {
@@ -126,8 +173,11 @@
      if (len > 0) {
        return this.showMonitorObjList[len - 1].displayid + 1;
      } else {
        return undefined;
        return 1;
      }
    },
    isEdit() {
      return this.insertObj.length > 0 || this.deleteObj.length > 0 || this.updateObj.length > 0;
    }
  },
  methods: {
@@ -143,19 +193,151 @@
        }
      });
    },
    changeSceneType(tabName) {
      this.curSceneType = tabName;
    },
    deleteMov(item) {
      if (item.extension1) {
        ElMessage({
          message: '已监管场景无法移除',
          type: 'error'
        });
        return;
      }
      const i = this.curMonitorObjList.indexOf(item);
      this.curMonitorObjList.splice(i, 1);
      const i1 = this.insertObj.indexOf(item);
      this.insertObj.splice(i1, 1);
      const i2 = this.updateObj.indexOf(item);
      this.updateObj.splice(i2, 1);

      this.deleteObj.push(item);
    },
    insertMov() {},
    addMov() {}
    openInsertDialog(item) {
      this.insertDialog = true;
      this.selectedScene = item;
      this.monitorTimes = 1;
    },
    openAddDialog(item) {
      this.addDialog = true;
      this.selectedScene = item;
      this.monitorTimes = 1;
    },
    insertMov() {
      // 1. 创建新场景
      let mov = this.createMov(this.selectedIndex, this.selectedScene);
      // 2. 查找第一个编号大于插入编号的值，将新监管对象插入其之前
      const insertAtIndex = this.curMonitorObjList.findIndex((v) => {
        return v.displayid > this.selectedIndex;
      });
      this.curMonitorObjList.splice(insertAtIndex, 0, mov);
      this.selectedIndex = undefined;
      this.insertDialog = false;
    },
    addMov() {
      // 1. 创建新场景
      let mov = this.createMov(this.lastIndex, this.selectedScene);
      // 2. 添加至末尾
      this.curMonitorObjList.push(mov);
      this.addDialog = false;
    },
    // 创建一个新的监管对象
    createMov(displayid, scene) {
      // 1. 查找该场景是否之前已被删除
      const index = this.deleteObj.findIndex((v) => {
        return v.sguid == scene.guid;
      });
      let mov;
      // 2. 若是全新的场景，则新生成一个监管对象，否则只更新编号
      if (index == -1) {
        mov = {
          tid: this.task.tguid,
          sguid: scene.guid,
          sensename: scene.name,
          tasktypeid: 1,
          tasktype: '巡查',
          monitornum: this.monitorTimes,
          displayid: displayid,
          sceneTypeId: scene.typeid,
          sceneType: scene.type
        };
        this.insertObj.push(mov);
      } else {
        mov = this.deleteObj[index];
        mov.displayid = displayid;
        this.updateObj.push(mov);
        this.deleteObj.splice(index, 1);
      }
      return mov;
    },
    // 保存修改
    saveEdit() {
      // this.saveLoading = true;
      if (this.insertObj.length > 0) {
        const p1 = taskApi.addMonitorObject(this.insertObj).then((res) => {
          ElNotification({
            title: `巡查任务修改成功`,
            message: `新增场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.insertObj = [];
        });
      }
      if (this.updateObj.length > 0) {
        const p2 = taskApi.updateMonitorObject(this.updateObj).then((res) => {
          ElNotification({
            title: `巡查任务修改成功`,
            message: `更新场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.updateObj = [];
        });
      }
      if (this.deleteObj.length > 0) {
        const p3 = taskApi.deleteMonitorObject(this.deleteObj).then((res) => {
          ElNotification({
            title: `巡查任务修改成功`,
            message: `删除场景${res}个`,
            type: 'success',
            position: 'bottom-left'
          });
          this.deleteObj = [];
        });
      }
      // return Promise.all([p1, p2, p3]).finally(() => {
      //   this.saveLoading = false;
      // });
    },
    async goBack() {
      // const answer = await this.routerChangeCheck()
      // if (answer) {
      //   this.$router.back();
      // }
      this.$router.back();
    },
    async routerChangeCheck() {
      if (this.isEdit) {
        const answer = await ElMessageBox.confirm('是否放弃已修改的总任务？', '取消总任务修改', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return true;
          })
          .catch(() => {
            return false;
          });
        return answer;
      }
      return true;
    }
  },
  mounted() {
    // 监管场景信息
    this.curMonitorObjList = JSON.parse(decodeURIComponent(this.$route.query.data));
    // 根据总任务获取行政区划信息
    const task = JSON.parse(decodeURIComponent(this.$route.query.task));
    this.task = task;
    this.area = {
      provincecode: task.provincecode,
      provincename: task.provincename,
@@ -172,4 +354,8 @@
};
</script>

<style scoped></style>
<style scoped>
.page-header {
  background-color: #fff;
}
</style>