feat: 切换项目角色改变任务

src/components/tall/center/Global.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="global">
-    <div class="global-box" style="max-height: calc((100vh - 50px - 44px - 36px - 10px) / 5 * 4)">
-      <div v-if="roleInfo && roleInfo.name === '管理员'">
+    <div
+      class="global-box"
+      v-if="globals.length || (project.businessCode === 'ZERO' && roleInfo && roleInfo.name === '管理员')"
+      style="max-height: calc((100vh - 50px - 44px - 36px - 10px) / 5 * 4)"
+    >
+      <div class="task-card-plugin my-3" v-if="project.businessCode === 'ZERO' && roleInfo && roleInfo.name === '管理员'">
         <a-button type="primary" block @click="toWorkbench">工作台</a-button>
       </div>
 
@@ -9,8 +13,9 @@
         <div class="global-task cursor-pointer" v-for="(item, index) in globals" :key="index">
           <template v-if="item.plugins && item.plugins.length">
             <div v-for="(pluginArr, i) in item.plugins" :key="i">
-              <div class="pb-3" v-if="pluginArr.length">
+              <div class="my-3" v-if="pluginArr.length">
                 <Plugin
+                  class="task-card-plugin"
                   v-for="plugin in pluginArr"
                   :key="plugin.pluginTaskId"
                   :plugin-id="plugin.pluginId"
@@ -89,16 +94,25 @@ function toWorkbench() {}
 
 <style scoped>
 .global {
-  padding: 16px;
+  padding-bottom: 16px;
+  /* border-bottom: 1px solid #cccccc; */
 }
 
 .global-box {
-  border: 1px solid #cccccc;
-  border-radius: 10px;
-  padding: 12px 16px;
+  border-bottom: 1px solid #cccccc;
+  /* border-radius: 10px; */
+  padding: 4px 16px;
 }
 
-.global-task {
+/* .global-task {
   line-height: 38px;
+} */
+
+.task-card-plugin {
+  padding: 12px;
+  border-radius: 10px;
+  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
 }
 </style>

src/components/tall/center/Index.vue

@@ -2,8 +2,8 @@
   <div>
     <!-- 项目标题 -->
     <div class="navbar flex items-center justify-between">
-      <div class="project-name">{{ project.name }}</div>
-      <div class="project-action">
+      <div class="project-name truncate">{{ project.name }}</div>
+      <div class="project-action flex-shrink-0">
         <ReloadOutlined :style="{ fontSize: 20 + 'px' }" />
         <MoreOutlined :style="{ fontSize: 20 + 'px' }" />
       </div>
@@ -11,67 +11,22 @@
 
     <!-- 角色 -->
     <Roles />
-    <!-- <div class="role-list flex items-center">
-      <div class="role-box relative" v-for="(item, index) in roles" :key="index">
-        <div class="role-name" :class="{ mine: roleId === item.id }">{{ item.name }}</div>
-        <div class="line-box absolute flex justify-center" v-if="roleId === item.id"><div class="line"></div></div>
-      </div>
-    </div> -->
 
     <!-- 日常任务 -->
     <Global ref="globalRef" />
-    <!-- <div class="global">
-      <div class="global-box" v-if="permanents && permanents.length > 0">
-        <div class="global-task cursor-pointer" v-for="(item, index) in permanents" :key="index" @click="toGlobalDetail(item)">
-          <template v-for="v in item.plugins">
-            <template v-if="v[0].pluginId == 1">{{ item.name }}</template>
-          </template>
-        </div>
-      </div>
-    </div> -->
 
     <!-- 定期任务 -->
     <RegularTask :style="{ height: tasksHeight + 'px' }" />
-    <!-- <div class="task-list" :style="{ height: 'calc(100vh - 160px - (' + globalHeight + 'px))' }">
-      <div class="task-box" v-for="(item, index) in regularTasks" :key="index">
-        <div class="task-time flex items-center justify-between">
-          <div class="flex items-center">
-            <PlayCircleOutlined style="font-size: 23px; color: #999999" />
-            <span>{{ dayjs(item.planStart).format('D日 HH:mm') }}</span>
-          </div>
-          <div class="task-action"></div>
-        </div>
-
-        <div class="task-info">
-          <div>
-            <div class="task-card">
-              <div class="task-name cursor-pointer" @click="toDetail(item)">
-                <template v-for="v in item.plugins">
-                  <template v-if="v[0].pluginId == 1">{{ item.name }}</template>
-                </template>
-              </div>
-
-              <div class="task-con" v-if="item.sonList && item.sonList.length > 0">
-                <div v-for="(val, key) in item.sonList" :key="key">
-                  <span class="son-task-name cursor-pointer" @click.stop="toSonDetail(item, val.detailId)">{{ val.name }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div> -->
   </div>
 </template>
 
 <script setup>
-import { computed, watch, ref } from 'vue';
+import { computed, watch, ref, nextTick } from 'vue';
 import { useStore } from 'vuex';
 import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
 
 const store = useStore();
 const project = computed(() => store.state.projects.project); // 项目信息
-// const sessionTasks = sessionStorage.getItem('regularTasks'); // 定期任务缓存
 const globals = computed(() => store.getters['task/globals']); // 日常任务
 
 const globalRef = ref(null);
@@ -80,32 +35,12 @@ const clientHeight = ref(0); // 浏览器可视区域高度
 const tasksHeight = ref(null); // 定期任务高度
 
 watch(globals, () => {
-  clientHeight.value = `${document.documentElement.clientHeight}`; // 获取浏览器可视区域高度
-  globalHeight.value = globalRef.value.$el.clientHeight;
-  tasksHeight.value = clientHeight.value - 48 - 44 - 36 - globalHeight.value;
-  console.log('globalHeight', globalHeight.value, clientHeight.value, tasksHeight.value);
+  nextTick(() => {
+    clientHeight.value = `${document.documentElement.clientHeight}`; // 获取浏览器可视区域高度
+    globalHeight.value = globalRef.value.$el.clientHeight;
+    tasksHeight.value = clientHeight.value - 48 - 44 - 36 - globalHeight.value;
+  });
 });
-
-// if (sessionTasks) {
-//   const arr = JSON.parse(sessionTasks);
-//   store.commit('task/setRegularTasks', arr);
-// }
-
-// watch(project, async () => {
-//   if (project.value.id) {
-//     await getRoles(project.value.id); // 通过项目id获取角色信息
-//     await getPermanentData(roleId.value); // 根据角色查找永久的日常任务
-//     await getTasks({ roleId: roleId.value }); // 根据角色查找定期任务
-//   }
-// });
-
-// watch(refreshProjects, async () => {
-//   if (project.value.id) {
-//     await getRoles(project.value.id); // 通过项目id获取角色信息
-//     await getPermanentData(roleId.value); // 根据角色查找永久的日常任务
-//     await getTasks({ roleId: roleId.value }); // 根据角色查找定期任务
-//   }
-// });
 </script>
 
 <style scoped>

src/components/tall/center/RegularTask.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="task-list" :style="{}" style="height: 500px">
+  <div id="tasks" class="task-list">
     <div class="task-box" v-for="(item, index) in tasks" :key="index">
       <div class="task-time flex items-center justify-between">
         <div class="flex items-center">
@@ -36,7 +36,7 @@
               </template>
 
               <div v-else class="">
-                <Plugin plugin-id="1" :task="item" />
+                <Plugin class="task-card-plugin" plugin-id="1" :task="item" />
               </div>
             </div>
           </div>
@@ -59,7 +59,6 @@ import { message } from 'ant-design-vue';
 const store = useStore();
 const project = computed(() => store.state.projects.project); // 项目信息
 const roleId = computed(() => store.state.role.roleId); // 当前角色
-// const regularTasks = computed(() => store.state.task.regularTasks); // 定期任务
 const tasks = computed(() => store.state.task.tasks); // 定期任务
 const realTasks = computed(() => store.state.task.realTasks); // 真实任务
 
@@ -71,10 +70,9 @@ const timeGranularity = computed(() => store.getters['task/timeGranularity']); /
 const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式
 const downNextPage = computed(() => store.state.task.downNextPage); // 下一页
 const upNextPage = computed(() => store.state.task.upNextPage); // 下一页
-// setNextPlaceholderTasks(); // 向下加载空数据
 
 onMounted(() => {
-  window.addEventListener('scroll', handleScroll, true);
+  document.getElementById('tasks').addEventListener('scroll', handleScroll, true);
 });
 
 if (project.value && roleId.value) {
@@ -127,7 +125,6 @@ async function getTasks(query) {
   const { url } = store.state.projects.project;
   try {
     const data = await getRegularTask(params, url);
-    // store.commit('task/setRegularTasks', data);
 
     if (params.param.queryType === 0) {
       store.commit('task/setUpRealTasks', data.list);

src/components/tall/center/Roles.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="role-list flex items-center">
-    <div class="role-box relative" v-for="(item, index) in roleList" :key="index">
-      <div class="role-name" :class="{ mine: roleId === item.id }">{{ item.name }}</div>
-      <div class="line-box absolute flex justify-center" v-if="roleId === item.id"><div class="line"></div></div>
+  <div class="role-list relative" ref="roleBox">
+    <div class="role-abs absolute flex items-center" ref="roleAbs">
+      <div class="role-box relative cursor-pointer" ref="roleItem" v-for="(item, index) in roleList" :key="index" @click="changeRole(item)">
+        <div class="role-name" :class="{ mine: roleId === item.id }">{{ item.name }}</div>
+        <div class="line-box absolute flex justify-center" v-if="roleId === item.id"><div class="line"></div></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, watch } from 'vue';
+import { computed, watch, ref, onMounted, nextTick } from 'vue';
 import { useStore } from 'vuex';
 import { findShowRole } from 'apis';
 import { message } from 'ant-design-vue';
@@ -18,6 +20,10 @@ const roleId = computed(() => store.state.role.roleId); // 当前角色
 const roleList = computed(() => store.state.role.visibleRoles); // 当前项目角色列表
 const project = computed(() => store.state.projects.project); // 项目信息
 
+const roleBox = ref(null);
+const roleAbs = ref(null);
+const roleItem = ref(null);
+
 if (project.value && project.value.id) {
   getRoles(project.value.id); // 通过项目id获取角色信息
 }
@@ -28,6 +34,12 @@ watch(project, async () => {
   }
 });
 
+onMounted(() => {
+  nextTick(() => {
+    console.log('roleBox', roleBox.value.clientWidth, 'roleAbs', roleAbs.value.clientWidth);
+  });
+});
+
 /**
  * 通过项目id获取角色信息
  * @param {string} projectId
@@ -55,6 +67,19 @@ function setInitialRoleId(visibleList) {
   store.commit('role/setRoleInfo', currentRole || null);
   store.commit('role/setRoleId', currentRoleId);
 }
+
+function changeRole(item) {
+  store.commit('role/setRoleId', item.id);
+  // 清空日常任务的数据
+  store.commit('task/setPermanents', []);
+  store.commit('task/setDailyTasks', []);
+  // 清空定期任务数据
+  store.commit('task/clearTasks');
+  // 清空真实任务数据
+  store.commit('task/clearRealTasks');
+  store.commit('task/setUpNextPage', 1);
+  store.commit('task/setDownNextPage', 1);
+}
 </script>
 
 <style scoped>
@@ -73,6 +98,7 @@ function setInitialRoleId(visibleList) {
   font-size: 14px;
   line-height: 36px;
   color: #333333;
+  white-space: nowrap;
 }
 
 .role-name.mine {

src/components/tall/left/Projects.vue

@@ -164,6 +164,10 @@ function clearTasksData() {
   store.commit('task/setDailyTasks', []);
   // 清空定期任务数据
   store.commit('task/clearTasks');
+  // 清空真实任务数据
+  store.commit('task/clearRealTasks');
+  store.commit('task/setUpNextPage', 1);
+  store.commit('task/setDownNextPage', 1);
 }
 </script>
 

src/components/tall/plugin/Plugin.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script setup>
-import { computed, provide, defineProps } from 'vue';
-import { useStore } from 'vuex';
+import { provide, defineProps } from 'vue';
+// import { useStore } from 'vuex';
 import pTaskTitle from '@/plugins/p-task-title.vue';
 
 const props = defineProps({
@@ -34,10 +34,9 @@ const props = defineProps({
 provide('task', props.task);
 provide('pluginInfo', props.pluginInfo);
 
-const store = useStore();
+// const store = useStore();
 // const roleId = computed(() => store.state.role.roleId);
 // const token = computed(() => store.state.user.token);
 // const userId = computed(() => store.getters['user/userId']);
-const projectId = computed(() => store.getters['project/projectId']);
-console.log(projectId);
+// const projectId = computed(() => store.getters['project/projectId']);
 </script>

src/store/tall/task/index.js

@@ -343,6 +343,11 @@ export default {
       state.realTasks = [...arr];
     },
 
+    // 清空真实任务数据
+    clearRealTasks(state) {
+      state.realTasks = [];
+    },
+
     /**
      * 当前需要定位到的任务id
      * @param {Object} state