update 负载看板项目选择更新

src/views/task/workLoad/index.vue

@@ -26,7 +26,7 @@
             multiple
             clearable
             class="mw200"
-            @change="userChangeFun"
+            @change="filterChangeFun"
             @focus="focusUserFun"
           >
             <el-option
@@ -38,7 +38,23 @@
             </el-option>
           </el-select>
         </el-form-item>
-
+        <el-form-item v-if="dimension === 'project'" label="项目名称">
+          <ProjectSelect
+            class="select-width margin-right-12"
+            v-model="filterFprmData.projectIdList"
+            multiple
+            @change="filterChangeFun"
+          />
+        </el-form-item>
+        <el-form-item v-if="dimension === 'project'" label="项目编号">
+          <ProjectSelect
+            class="select-width margin-right-12"
+            :showCodeList="true"
+            v-model="filterFprmData.projectIdList"
+            multiple
+            @change="filterChangeFun"
+          />
+        </el-form-item>
         <el-form-item label="开始时间：">
           <el-date-picker
             v-model="filterFprmData.beginTime"
@@ -81,8 +97,13 @@
       <template v-for="(item, index) in colorList" :key="index">
         <div class="color-item">
           <div :style="{ background: item }"></div>
-          <div v-if="dimension === 'person'">{{ workLevalList[index] + '个任务' }}</div>
-          <div v-else>{{ personLevelList[index] + '个任务' }}</div>
+          <!-- <el-color-picker
+            v-model="colorList[index as number]"
+            size="small"
+            @change="colorChange"
+          /> -->
+          <div v-if="dimension === 'person'">{{ workLevalList[index as number] + '个任务' }}</div>
+          <div v-else>{{ personLevelList[index as number] + '个任务' }}</div>
         </div>
       </template>
     </div>
@@ -104,6 +125,7 @@ import { getListUserWorkloadsApi } from '@/api/project/task';
 import { ElMessage } from 'element-plus';
 import DetailDia from '@/views/task/workLoad/detailDia.vue';
 import { debounce } from 'lodash-es';
+import ProjectSelect from '@/components/common/projectSelect/index.vue';
 
 const props = defineProps({
   // 维度：工作负载以人person为维度， 人力负载以项目project为维度
@@ -145,13 +167,15 @@ dayjs.extend(isoWeek);
 
 const Gantt: any = gantt;
 const ganttEvents = ref<any>([]);
-// const colorList: string[] = ['#ffffff', '#d9ecff', '#c6e2ff', '#a1cefc', '#79bbff', '#409eff']; // 格子颜色
-const colorList: string[] = [
+const colorList = ref<any>([
   'rgb(179, 225, 157)',
   'rgb(160, 207, 255)',
   'rgb(248, 227, 197)',
   'rgb(250, 182, 182)',
-]; // 格子颜色
+]);
+// const colorChange = () => {
+//   initGantt();
+// };
 const workLevalList: string[] = ['1~2', '3', '4', '≥5'];
 const personLevelList: string[] = ['1~4', '5~9', '10~14', '≥15'];
 
@@ -161,6 +185,7 @@ const visible = ref(false);
 
 const filterFprmData = reactive<any>({
   userGroupId: '',
+  projectIdList: '',
   userIds: [],
   beginTime: '',
   endTime: '',
@@ -244,6 +269,7 @@ const getWorkLoadDataFun = async () => {
     }
   } else {
     delete param.projectIdList;
+    // param.projectIdList = param.projectIdList ? param.projectIdList.split(',') : [];
   }
   const res: any = await props.api(param);
   if (res && res.code === 200) {
@@ -506,7 +532,7 @@ const initGantt = () => {
     }
     const taskCount = tasks?.length || 0;
     const colorIndex = getColorIndex(taskCount);
-    const backgroundColor = colorIndex >= 0 ? colorList[colorIndex] : '';
+    const backgroundColor = colorIndex >= 0 ? colorList.value[colorIndex] : '';
 
     return `<div class='${taskCount > 0 ? 'cell-style' : ''}' style='background:${backgroundColor};cursor:${taskCount > 0 ? 'pointer' : 'default'}' userName=${task?.userName} userId=${
       task?.userId
@@ -614,7 +640,7 @@ const refreshGanttFun = async () => {
   await getWorkLoadDataFun();
 };
 // 切换用户
-const userChangeFun = debounce(async () => {
+const filterChangeFun = debounce(async () => {
   await filterWorkLoadFun();
 }, 500);
 // 用户下拉框获取焦点
@@ -688,6 +714,9 @@ onBeforeUnmount(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  .select-width {
+    width: 200px;
+  }
   .page-filter-box {
     width: 100%;
     display: flex;

src/views/task/workerLoad/index.vue

@@ -2,13 +2,12 @@
   <div class="project-gantt">
     <workLoad
       dimension="project"
-      :filterData="filterData"
       :showTotal="true"
       :configColumns="columns"
       :api="queryProjectUserLoadsApi"
       :fieldMapFun="fieldMapFun"
     >
-      <template #filter-form>
+      <!-- <template #filter-form>
         <el-form-item label="项目名称">
           <ProjectSelect
             class="select-width margin-right-12"
@@ -24,22 +23,22 @@
             multiple
           />
         </el-form-item>
-      </template>
+      </template> -->
     </workLoad>
   </div>
 </template>
 <script setup lang="ts">
-import { reactive } from 'vue';
+// import { reactive } from 'vue';
 import workLoad from '@/views/task/workLoad/index.vue';
-import ProjectSelect from '@/components/common/projectSelect/index.vue';
+// import ProjectSelect from '@/components/common/projectSelect/index.vue';
 import { queryProjectUserLoadsApi } from '@/api/project/task';
 
-// 筛选条件：项目
-const filterData = reactive<{
-  projectIdList: string;
-}>({
-  projectIdList: '',
-});
+// // 筛选条件：项目
+// const filterData = reactive<{
+//   projectIdList: string;
+// }>({
+//   projectIdList: '',
+// });
 // 项目配置
 const columns = [
   {