1. 完成总任务的管理模块（单日任务的管理未完成）

riku

2024-10-17 971c7c5993ff475157b0c9ed137998fd39f6c548

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

@@ -1,17 +1,40 @@
<template>
  <div>
    <el-segmented :model-value="tabName" :options="tabs" @change="tabChange" />
  <div class="monitor-obj-wrapper">
    <el-affix v-if="affix" :offset="60" target=".monitor-obj-wrapper">
      <div>
        <el-segmented
          :model-value="activeName"
          :options="activeTabs"
          @change="tabChange"
        />
      </div>
    </el-affix>
    <div v-else>
      <el-segmented
        :model-value="activeName"
        :options="activeTabs"
        @change="tabChange"
      />
    </div>
    <el-scrollbar :height="height">
      <el-space wrap>
        <ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj">
          <template #default="{ item }">
            <slot :item="item">
              <el-button
                v-if="showBtn"
                size="small"
                plain
                :type="btnType"
                @click="itemClick(item)"
                >{{ btnName }}</el-button
              >
            </slot>
          </template>
        </ItemMonitorObj>
      </el-space>
    </el-scrollbar>
  </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>
@@ -26,12 +49,24 @@
      type: String,
      default: defaultTabName
    },
    tabOptions: Array,
    showData: Array,
    // 是否添加默认的全部选项
    allOption: Boolean,
    showDelete: Boolean
    showBtn: Boolean,
    btnName: {
      type: String,
      default: '移除'
    },
    btnType: {
      type: String,
      default: 'danger'
    },
    // 头部选项是否吸顶
    affix: Boolean,
    height: String
  },
  emits: ['update:tabName', 'update:showData', 'deleteItem'],
  emits: ['update:tabName', 'update:showData', 'itemClick'],
  data() {
    return {
      activeName: defaultTabName,
@@ -41,11 +76,20 @@
  computed: {
    activeData() {
      const list = this.data.filter((v) => {
        // return this.activeName == defaultTabName || v.sceneType == this.activeName;
        return this.tabName == defaultTabName || v.sceneType == this.tabName;
        return (
          this.activeName == defaultTabName || v.sceneType == this.activeName
        );
        // return this.tabName == defaultTabName || v.sceneType == this.tabName;
      });
      this.$emit('update:showData', list);
      return list;
    },
    activeTabs() {
      if (this.tabOptions) {
        return this.tabOptions;
      } else {
        return this.tabs;
      }
    }
  },
  watch: {
@@ -60,11 +104,16 @@
    tabs: {
      handler(nV, oV) {
        if (nV != oV && nV.length > 0) {
          // this.activeName = nV[0];
          this.tabChange(nV);
          this.activeName = nV[0];
          this.tabChange(nV[0]);
        }
      },
      immediate: true
    },
    tabName(nV, oV) {
      if (nV != oV) {
        this.activeName = nV;
      }
    }
  },
  methods: {
@@ -73,13 +122,14 @@
      dataList.forEach((d) => {
        if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
      });
      this.tabs = list;
      this.tabs = list.sort();
    },
    tabChange(tabName) {
      this.activeName = tabName;
      this.$emit('update:tabName', tabName);
    },
    deleteMov(item) {
      this.$emit('deleteItem', item);
    itemClick(item) {
      this.$emit('itemClick', item);
    }
  }
};