1. 任务调整模块，任务编辑功能（待完成）

riku

2024-10-11 da5e23f61994f5e0a0da75e992cc796a841e953b

1. 任务调整模块，任务编辑功能（待完成）

 src/App.vue

@@ -19,17 +19,17 @@
          <el-scrollbar>
            <div class="el-main__content">
              <Content></Content>
              <el-backtop
              <!-- <el-backtop
                target=".el-main .el-scrollbar__wrap"
                :right="40"
                :bottom="100"
                style="width: 120px"
                style="width: 120px;z-index: 1000;"
              >
                <div class="back-top">
                  <el-icon><ArrowUpBold /></el-icon>
                  <span style="">返回顶部</span>
                </div>
              </el-backtop>
              </el-backtop> -->
            </div>
          </el-scrollbar>
        </el-main>

 src/api/fysp/taskApi.js

@@ -16,6 +16,31 @@
  },

  /**
   * 添加监管对象
   */
  addMonitorObject(objList) {
    return $fysp.put(`monitorobjectversion/addlist`, objList).then((res) => res.data);
  },

  /**
   * 更新监管对象
   */
  updateMonitorObject(objList) {
    return $fysp.post(`monitorobjectversion/uplist`, objList).then((res) => res.data);
  },

  /**
   * 删除监管对象
   */
  deleteMonitorObject(objList) {
    return $fysp({
      method: 'delete',
      url: 'monitorobjectversion/deleteList',
      data: objList
    }).then((res) => res.data);
  },

  /**
   * 查询总任务
   * @param {Object} param
   * @returns

 src/components.d.ts

@@ -13,6 +13,7 @@
    CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default']
    Content: typeof import('./components/core/Content.vue')['default']
    copy: typeof import('./components/list-item/ItemScene copy.vue')['default']
    ElAffix: typeof import('element-plus/es')['ElAffix']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElAvatar: typeof import('element-plus/es')['ElAvatar']
    ElBacktop: typeof import('element-plus/es')['ElBacktop']
@@ -54,6 +55,7 @@
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSegmented: typeof import('element-plus/es')['ElSegmented']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElStep: typeof import('element-plus/es')['ElStep']

 src/components/list-item/ItemMonitorObj.vue

@@ -14,7 +14,10 @@
          {{ item.sceneType }}
        </el-tag>
        <el-tag type="info" effect="plain" size="small">
          计划监管次数：{{ item.monitornum }}
          计划监管：{{ item.monitornum }}
        </el-tag>
        <el-tag type="info" effect="plain" size="small">
          已监管：{{ item.extension1 ? item.extension1 : '0' }}
        </el-tag>
      </el-space>
      <slot :item="item"></slot>

 src/router/index.js

@@ -64,7 +64,7 @@
    name: 'taskmanage',
    path: '/fysp/task/manage',
    component: () => import('@/views/fysp/task/TaskManage.vue'),
    meta: { keepAlive: false }
    meta: { keepAlive: true }
  },
  {
    //监管任务场景编辑

 src/views/fysp/task/MonitorObjEdit.vue

@@ -1,27 +1,45 @@
<template>
  <el-page-header @back="$router.back()" class="page-header">
  <el-affix :offset="60">
    <div class="page-header">
      <el-page-header @back="$router.back()">
    <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-delete
        v-model:tabName="curSceneType"
        v-model:showData="showMonitorObjList"
        @delete-item="deleteMov"
      >
      </CompMonitorObj>
    </el-col>
    <el-col :span="8">
      <el-affix :offset="140">
      <div>
        <el-text>可选场景</el-text>
      </div>
      <el-divider />
        <div>
          <el-segmented v-model="curSceneType" :options="sceneTypeOptions" />
        </div>
      <FYInfoSearch
        label=""
        placeholder="请输入场景名称关键字"
@@ -31,15 +49,18 @@
        scroll-height="70vh"
        :page-show="false"
      >
        <template #default="{ row, click }">
          <template #default="{ row }">
          <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 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,7 +90,9 @@
<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 } from 'element-plus';

export default {
  components: { CompMonitorObj },
@@ -78,18 +101,33 @@
    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 +140,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 +159,9 @@
        }
        index++;
      });
      if (indexList.length == 0) {
        indexList.push(1);
      }
      return indexList;
    },
    lastIndex() {
@@ -126,8 +169,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 +189,127 @@
        }
      });
    },
    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;
      // });
    }
  },
  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 +326,8 @@
};
</script>

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

 src/views/fysp/task/TaskManage.vue

@@ -35,7 +35,7 @@
        <el-divider></el-divider>
        <el-button type="primary" size="small" @click="editTask">场景调整</el-button>
        <div><el-text>监管场景</el-text></div>
        <CompMonitorObj :data="curMonitorObjList"></CompMonitorObj>
        <CompMonitorObj :data="curMonitorObjList" v-model:showData="showMonitorObjList"></CompMonitorObj>
        <!-- <div><el-text>监管场景</el-text></div>
        <div>
          <el-space wrap>
@@ -73,6 +73,8 @@
      tasks: [],
      // 当前任务的监管对象
      curMonitorObjList: [],
      // 当前任务的展示中的监管对象
      showMonitorObjList: [],
      //当前选中的任务
      curTask: {},
      //操作按钮

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

@@ -1,14 +1,9 @@
<template>
  <el-tabs v-model="activeName" type="border-card" @tab-change="tabChange">
    <el-tab-pane
      v-for="item in tabDataList"
      :key="item.title"
      :label="item.title"
      :name="item.title"
    >
      <!-- <div> -->
  <div>
    <el-segmented :model-value="tabName" :options="tabs" @change="tabChange" />
  </div>
      <el-space wrap>
        <ItemMonitorObj v-for="obj in item.children" :key="obj.movid" :item="obj">
    <ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj">
          <template #default="{ item }">
            <!-- <slot :item="item"></slot> -->
            <el-button v-if="showDelete" size="small" type="danger" @click="deleteMov(item)"
@@ -17,9 +12,6 @@
          </template>
        </ItemMonitorObj>
      </el-space>
      <!-- </div> -->
    </el-tab-pane>
  </el-tabs>
</template>

<script>
@@ -30,59 +22,64 @@
      type: Array,
      default: () => []
    },
    tabName: {
      type: String,
      default: defaultTabName
    },
    showData: Array,
    // 是否添加默认的全部选项
    allOption: Boolean,
    showDelete: Boolean
  },
  emits: ['tabChange'],
  emits: ['update:tabName', 'update:showData', 'deleteItem'],
  data() {
    return {
      activeName: defaultTabName
      activeName: defaultTabName,
      tabs: []
    };
  },
  computed: {
    tabDataList() {
      const itemMap = new Map();
      this.data.forEach((t) => {
        itemMap.has(t.sceneType) ? itemMap.get(t.sceneType).push(t) : itemMap.set(t.sceneType, [t]);
    activeData() {
      const list = this.data.filter((v) => {
        // return this.activeName == defaultTabName || v.sceneType == this.activeName;
        return this.tabName == defaultTabName || v.sceneType == this.tabName;
      });
      const list = [];
      if (this.allOption) {
        list.push({
          title: defaultTabName,
          children: this.data
        });
      }
      for (const [key, value] of itemMap) {
        list.push({
          title: key,
          children: value
        });
      }
      this.$emit('update:showData', list);
      return list;
    }
  },
  watch: {
    tabDataList: {
    data: {
      handler(nV, oV) {
        if (nV != oV && nV.length > 0) {
          this.activeName = nV[0].title;
          this.tabChange(this.activeName);
          this.getTabs(nV);
        }
      },
      immediate: true
    },
    tabs: {
      handler(nV, oV) {
        if (nV != oV && nV.length > 0) {
          // this.activeName = nV[0];
          this.tabChange(nV);
        }
      },
      immediate: true
    }
  },
  methods: {
    getTabs(dataList) {
      const list = [];
      dataList.forEach((d) => {
        if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
      });
      this.tabs = list;
    },
    tabChange(tabName) {
      this.$emit('tabChange', tabName);
      this.$emit('update:tabName', tabName);
    },
    deleteMov(item) {
      const tab = this.tabDataList.find((v) => {
        return v.title == this.activeName;
      });
      const i = tab.children.indexOf(item);
      tab.children.splice(i, 1);
      this.$emit('deleteItem', item);
    }
  }
};