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

riku

2024-10-11 da5e23f61994f5e0a0da75e992cc796a841e953b

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

@@ -1,25 +1,17 @@
<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> -->
      <el-space wrap>
        <ItemMonitorObj v-for="obj in item.children" :key="obj.movid" :item="obj">
          <template #default="{ item }">
            <!-- <slot :item="item"></slot> -->
            <el-button v-if="showDelete" size="small" type="danger" @click="deleteMov(item)"
              >移除</el-button
            >
          </template>
        </ItemMonitorObj>
      </el-space>
      <!-- </div> -->
    </el-tab-pane>
  </el-tabs>
  <div>
    <el-segmented :model-value="tabName" :options="tabs" @change="tabChange" />
  </div>
  <el-space wrap>
    <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)"
          >移除</el-button
        >
      </template>
    </ItemMonitorObj>
  </el-space>
</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);
    }
  }
};