feat: 全选样式修改

src/views/final/comp/CustomTabelModal.vue

@@ -198,13 +198,27 @@ const selectIds = ref<string[]>([]);
 
 function onCheckAllChange(value) {
   const ids: string[] = [];
-
   for (const item of offList.value) {
     if (!item.fix) {
       item.checked = value;
       ids.push(item.id);
     }
   }
+  if (value) {
+    offList.value.map((v) => {
+      if (!v.checked) {
+        onList.value.push(v);
+      }
+    });
+  } else {
+    onList.value = [];
+    fixLeftList.value = [];
+    offList.value.map((v) => {
+      if (v.fix) {
+        fixLeftList.value.push(v);
+      }
+    });
+  }
   selectIds.value = value ? ids : [];
 }
 
@@ -310,6 +324,20 @@ function removeHandler(id: string, type: "fix" | "unfix") {
     fixLeftList.value[index].checked = false;
   }
 }
+
+const indeterminate = computed(() => {
+  let baseNum = 0;
+  offList.value.map((v) => {
+    if (v.fix) {
+      baseNum += 1;
+    }
+  });
+  return (
+    onList.value.length + fixLeftList.value.length - baseNum > 0 &&
+    offList.value.length - baseNum >
+      onList.value.length + fixLeftList.value.length - baseNum
+  );
+});
 </script>
 
 <template>
@@ -344,11 +372,12 @@ function removeHandler(id: string, type: "fix" | "unfix") {
                   </template>
                 </n-input>
                 <div class="draggable-ul left-wrap">
-                  <div class="draggable-li">
+                  <div class="draggable-li" :class="{ checkAll: indeterminate }">
                     <n-checkbox
                       v-model:checked="checkAll"
                       label="全部"
                       @update:checked="onCheckAllChange"
+                      :indeterminate="indeterminate"
                     />
                   </div>
                   <div class="content">
@@ -380,7 +409,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
               :bordered="false"
             >
               <template #header-extra>
-                <span class="textbtnStyle" @click="clearDragSource">清空</span>
+                <span class="textbtnStyle" @click="clearDragSource">恢复默认</span>
               </template>
               <div>
                 <n-input placeholder="搜索关键字">
@@ -402,7 +431,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
                       :class="{ fix: item.fix }"
                       class="cursor-move draggable-item"
                     >
-                      <SvgIcon name="drag" size="24" />
+                      <SvgIcon name="drag" size="14" color="#666666" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
                         v-if="!item.fix"
@@ -426,7 +455,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
                       :class="{ fix: item.fix }"
                       class="cursor-move draggable-item"
                     >
-                      <SvgIcon name="drag" size="24" />
+                      <SvgIcon name="drag" size="14" color="#666666" />
                       <span class="ml-2">{{ item.name }}</span>
                       <SvgIcon
                         v-if="!item.fix"
@@ -446,7 +475,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
 
       <template #footer>
         <div class="wrapper-footer">
-          <n-button type="info" @click="handleSumbit"> 确认 </n-button>
+          <n-button type="info" @click="handleSumbit"> 确定 </n-button>
           <n-button secondary style="margin-left: 15px" @click="closeModal">
             取消
           </n-button>
@@ -483,7 +512,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
     position: relative;
     color: #333333;
     font-size: 14px;
-    background: #F8F8F8;
+    background: #f8f8f8;
 
     &:before {
       background-color: #1980ff;
@@ -513,7 +542,8 @@ function removeHandler(id: string, type: "fix" | "unfix") {
 
 .textbtnStyle {
   cursor: pointer;
-  color: #1980ff;
+  color: #507AFD;
+  
 }
 
 .drag-wrapper {
@@ -544,7 +574,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
     color: #333;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid #e8e8e8;
+    // border-bottom: 1px solid #e8e8e8;
   }
 
   .disable-check {
@@ -571,10 +601,24 @@ function removeHandler(id: string, type: "fix" | "unfix") {
 ::v-deep(.n-button--info-type) {
   background: #507afd !important;
 }
-.left-wrap{
+.left-wrap {
   border: 1px solid #cbd3de;
 }
 // ::v-deep(.n-card__content){
 //   padding: 20px 24px  0 24px !important;
 // }
+::v-deep(.checkAll .n-checkbox.n-checkbox--indeterminate .n-checkbox-box) {
+  background: none;
+  border: none;
+}
+::v-deep(.checkAll .n-checkbox-box__border) {
+  border: 1px solid #e8e8e8 !important;
+}
+::v-deep(.checkAll .n-checkbox-icon) {
+  border: 3px solid #fff;
+  background: #1980ff;
+}
+::v-deep(.checkAll .n-checkbox-icon svg) {
+  display: none !important;
+}
 </style>

src/views/final/comp/RepeatTaskTableModal.vue

@@ -138,7 +138,7 @@ async function query(page: number, pageSize: number) {
     currPage: 1,
     sortname: "",
   });
-  const { data, pageCount } = result;
+  const { data, pageCount,totalCount } = result;
   total.value = totalCount;
   tableData.value = data;
   pagination.page = page;

src/views/home/aside/comp/modals/CustomFilterModal.vue

@@ -305,7 +305,7 @@ onMounted(() => {
               :bordered="false"
             >
               <div class="input_wrap">
-                <n-input placeholder="搜索关键词" @input="leftInputHandler">
+                <n-input placeholder="关键词搜索" @input="leftInputHandler">
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1-color999" />
                   </template>
@@ -341,7 +341,7 @@ onMounted(() => {
                 <span class="textbtnStyle" @click="clearDragSource">清空</span>
               </template>
               <div class="input_wrap">
-                <n-input placeholder="搜索关键词" @input="rightInputHandler">
+                <n-input placeholder="关键词搜索" @input="rightInputHandler">
                   <template #suffix>
                     <SvgIcon size="14px" name="magnifying-1-color999" />
                   </template>