From 971c7c5993ff475157b0c9ed137998fd39f6c548 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 17 十月 2024 17:17:33 +0800
Subject: [PATCH] 1. 完成总任务的管理模块（单日任务的管理未完成）

---
 src/views/fysp/task/components/CompMonitorObj.vue |  141 +++++++++++++++++++++++++++++++---------------
 1 files changed, 94 insertions(+), 47 deletions(-)

diff --git a/src/views/fysp/task/components/CompMonitorObj.vue b/src/views/fysp/task/components/CompMonitorObj.vue
index 804274d..0047d9f 100644
--- a/src/views/fysp/task/components/CompMonitorObj.vue
+++ b/src/views/fysp/task/components/CompMonitorObj.vue
@@ -1,25 +1,40 @@
 <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 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 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)"
-              >绉婚櫎</el-button
-            >
+            <slot :item="item">
+              <el-button
+                v-if="showBtn"
+                size="small"
+                plain
+                :type="btnType"
+                @click="itemClick(item)"
+                >{{ btnName }}</el-button
+              >
+            </slot>
           </template>
         </ItemMonitorObj>
       </el-space>
-      <!-- </div> -->
-    </el-tab-pane>
-  </el-tabs>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script>
@@ -30,59 +45,91 @@
       type: Array,
       default: () => []
     },
+    tabName: {
+      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: ['tabChange'],
+  emits: ['update:tabName', 'update:showData', 'itemClick'],
   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;
+    },
+    activeTabs() {
+      if (this.tabOptions) {
+        return this.tabOptions;
+      } else {
+        return this.tabs;
+      }
     }
   },
   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[0]);
+        }
+      },
+      immediate: true
+    },
+    tabName(nV, oV) {
+      if (nV != oV) {
+        this.activeName = nV;
+      }
     }
   },
   methods: {
-    tabChange(tabName) {
-      this.$emit('tabChange', tabName);
-    },
-    deleteMov(item) {
-      const tab = this.tabDataList.find((v) => {
-        return v.title == this.activeName;
+    getTabs(dataList) {
+      const list = [];
+      dataList.forEach((d) => {
+        if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
       });
-      const i = tab.children.indexOf(item);
-      tab.children.splice(i, 1);
+      this.tabs = list.sort();
+    },
+    tabChange(tabName) {
+      this.activeName = tabName;
+      this.$emit('update:tabName', tabName);
+    },
+    itemClick(item) {
+      this.$emit('itemClick', item);
     }
   }
 };

--
Gitblit v1.9.3