From 21301dccc0cb33bece56f1cf8d6871a5694a8a0c Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 21 Mar 2024 18:12:54 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E5=A4=9A=E9=80=89=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=80=E8=87=B4=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=AB=98?=
 =?UTF-8?q?=E7=BA=A7=E7=AD=9B=E9=80=89=E6=B5=81=E7=A8=8B=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 15 ++++++++-
 src/views/task/aside/Aside.vue | 56 ++++++++++++++++++++++------------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 04f400a..73d2274 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,4 +54,17 @@ const getThemeOverrides = computed(() => {
   </NConfigProvider>
 </template>
 
-<style lang="less"></style>
+<style lang="less">
+.n-checkbox .n-checkbox__label{
+  color: #666666 !important;
+  font-size: 14px !important;
+}
+.n-checkbox.n-checkbox--disabled .n-checkbox__label{
+  color: #c9c9c9 !important;
+  font-size: 14px !important;
+}
+.draggable-ul .draggable-li{
+  color: #666666 !important;
+  font-size: 14px !important;
+}
+</style>
diff --git a/src/views/task/aside/Aside.vue b/src/views/task/aside/Aside.vue
index 7ac8ab7..8e276a7 100644
--- a/src/views/task/aside/Aside.vue
+++ b/src/views/task/aside/Aside.vue
@@ -1,18 +1,23 @@
 <script lang="ts" setup>
 import { useTaskStore } from "@/store/modules/task";
 import { debounce } from "lodash-es";
-import { computed, onMounted, ref, unref, watch,shallowRef } from "vue";
+import { computed, onMounted, ref, unref, watch, shallowRef } from "vue";
 import CustomFieldModal from "../modal/CustomFieldModal.vue";
-import type { AsideEntity } from '@/config/aside'
+import type { AsideEntity } from "@/config/aside";
 
 import { useUser } from "@/store/modules/user";
 import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
 
 import TaskList from "./TaskList.vue";
-import AdvanceFilter from '../../home/aside/comp/AdvanceFilter.vue'
+import AdvanceFilter from "../../home/aside/comp/AdvanceFilter.vue";
 
-import emitter from '@/utils/mitt'
+import {
+  CustomFilterModalVue,
+  FilterModalVue,
+  NewFilterModalVue,
+} from "../../home/aside/comp/modals";
 
+import emitter from "@/utils/mitt";
 
 const CustomFieldModalRef = ref(null);
 const collapse = ref(false);
@@ -118,26 +123,26 @@ onMounted(() => {
 
 // 滚动容器，让key对应模块处于可视区域
 function scrollHandler(key: string) {
-  const element = document.querySelector(`#${key}`)
-  element?.scrollIntoView(true)
+  const element = document.querySelector(`#${key}`);
+  element?.scrollIntoView(true);
 }
 // 选择某个过滤配置，刷新图片墙
 function filterHandler(searchId: string) {
-  emitter.emit('filter', searchId)
+  emitter.emit("filter", searchId);
 }
 function showModal(modalRef: any) {
-  const modal = unref(modalRef)! as any
-  modal.showModal()
+  const modal = unref(modalRef)! as any;
+  modal.showModal();
 }
 // 当前显示的模块，按照数组顺序显示
-const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
-const filterModalRef = ref(null)
-const newFilterModalRef = ref(null)
-const customModalRef = ref(null)
+const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
+const filterModalRef = ref(null);
+const newFilterModalRef = ref(null);
+const customModalRef = ref(null);
 function editFilter(filter: any) {
-  const modal = unref(newFilterModalRef)! as any
-  modal.showModal()
-  modal.edit(filter)
+  const modal = unref(newFilterModalRef)! as any;
+  modal.showModal();
+  modal.edit(filter);
 }
 </script>
 
@@ -176,9 +181,13 @@ function editFilter(filter: any) {
       </div> -->
       <!-- 高级筛选 -->
       <AdvanceFilter
-          v-show="!showSearch" :type="2" @select="filterHandler" @update:search="setShowSearch(true)"
-          @show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
-        />
+        v-show="!showSearch"
+        :type="2"
+        @select="filterHandler"
+        @update:search="setShowSearch(true)"
+        @show-custom="showModal(CustomFieldModalRef)"
+        @show-filter="showModal(filterModalRef)"
+      />
 
       <div v-show="showSearch" class="warpper">
         <n-input
@@ -197,7 +206,6 @@ function editFilter(filter: any) {
           @click="setShowSearch(false)"
         />
       </div>
-    
     </div>
     <TaskList
       ref="taskListRef"
@@ -210,6 +218,14 @@ function editFilter(filter: any) {
       :reviewType="reviewType"
       @onOk="getshowFieldList"
     />
+    <!-- 过滤列表 -->
+    <FilterModalVue
+      ref="filterModalRef"
+      @edit-filter="editFilter"
+      @show-new-filter="showModal(newFilterModalRef)"
+    />
+    <!-- 新增过滤 -->
+    <NewFilterModalVue ref="newFilterModalRef" />
   </div>
 </template>
 

From 552dc36fec6558ab7bef902e0b817681b0bd3539 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Thu, 21 Mar 2024 19:47:42 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=9F=A5=E9=87=8D=E9=A1=B5?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=AE=BE=E7=BD=AE=E4=B8=BA=E5=B9=B3=E9=93=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/content/Content.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 0a5cfdd..9b6ba34 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -23,7 +23,7 @@ let _masonry: null | Masonry = null
 let _imagesload: any
 const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
-const viewMode = ref('tile')
+const viewMode = ref('masonry')
 const pagination = reactive({
   pageNo: 0,
   pageSize: 30,

From 507367c674bef127ede9c06a4171bcca33e58701 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 21 Mar 2024 21:22:58 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/final/comp/FilterModal.vue          | 340 ++++++++++--------
 src/views/final/comp/RepeatTaskTableModal.vue |  28 ++
 src/views/final/content/Content.vue           |  28 ++
 .../home/aside/comp/modals/FilterModal.vue    |  28 ++
 4 files changed, 283 insertions(+), 141 deletions(-)

diff --git a/src/views/final/comp/FilterModal.vue b/src/views/final/comp/FilterModal.vue
index 17cd96f..afbe8f1 100644
--- a/src/views/final/comp/FilterModal.vue
+++ b/src/views/final/comp/FilterModal.vue
@@ -1,255 +1,302 @@
 <script lang="ts" setup>
-import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from 'vue'
-import { NDataTable } from 'naive-ui'
-import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
-import type { SortableEvent } from 'sortablejs'
-import Sortable from 'sortablejs'
-import { debounce } from 'lodash-es'
-import Action from '@/views/home/aside/comp/Action.vue'
-import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
-import type { FilterSearchParam } from '/#/api'
-
-defineOptions({ name: 'FilterModal' })
+import {
+  defineOptions,
+  h,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  unref,
+} from "vue";
+import { NDataTable } from "naive-ui";
+import type { DataTableColumns, DataTableRowKey } from "naive-ui";
+import type { SortableEvent } from "sortablejs";
+import Sortable from "sortablejs";
+import { debounce } from "lodash-es";
+import Action from "@/views/home/aside/comp/Action.vue";
+import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
+import type { FilterSearchParam } from "/#/api";
+
+defineOptions({ name: "FilterModal" });
 
 const emit = defineEmits<{
-  (e: 'showNewFilter'): void
-  (e: 'editFilter', filter: any): void
-}>()
+  (e: "showNewFilter"): void;
+  (e: "editFilter", filter: any): void;
+}>();
 
-const show = ref(false)
+const show = ref(false);
 
 const cardStyle = {
-  'width': '800px',
-  'height': '800px',
-  '--n-padding-bottom': '10px',
-  '--n-padding-left': '10px',
-}
+  width: "800px",
+  height: "800px",
+  "--n-padding-bottom": "10px",
+  "--n-padding-left": "10px",
+};
 
 interface RowData {
-  id: string
-  searchname: string
-  createby: string
-  createtime: string
-  updateby: string
-  updatetime: string
+  id: string;
+  searchname: string;
+  createby: string;
+  createtime: string;
+  updateby: string;
+  updatetime: string;
 }
 
 const columns: DataTableColumns<RowData> = [
   {
-    type: 'selection',
+    type: "selection",
   },
   {
-    title: '操作',
-    key: 'action',
+    title: "操作",
+    key: "action",
     render(row) {
-      return h(
-        Action,
-        {
-          options: [
-            { label: '编辑', key: 1 },
-            { label: '删除', key: 2 },
-          ],
-          id: row.id,
-          select,
-        },
-      )
+      return h(Action, {
+        options: [
+          { label: "编辑", key: 1 },
+          { label: "删除", key: 2 },
+        ],
+        id: row.id,
+        select,
+      });
     },
   },
   {
-    title: '名称',
-    key: 'searchname',
+    title: "名称",
+    key: "searchname",
   },
   {
-    title: '创建者',
-    key: 'createby',
+    title: "创建者",
+    key: "createby",
   },
   {
-    title: '创建时间',
-    key: 'createtime',
+    title: "创建时间",
+    key: "createtime",
   },
   {
-    title: '更新者',
-    key: 'updateby',
+    title: "更新者",
+    key: "updateby",
   },
   {
-    title: '更新时间',
-    key: 'updatetime',
+    title: "更新时间",
+    key: "updatetime",
   },
-]
+];
 
-const loading = ref(true)
+const loading = ref(true);
 const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
-})
-const tableData = ref<Array<RowData>>([])
-const keyword = ref('')
+  showSizePicker:true,
+  pageSizes: [
+    {
+      label: "10 每页",
+      value: 10,
+    },
+    {
+      label: "15 每页",
+      value: 15,
+    },
+    {
+      label: "30 每页",
+      value: 30,
+    },
+    {
+      label: "50 每页",
+      value: 50,
+    },
+  ],
+});
+const tableData = ref<Array<RowData>>([]);
+const keyword = ref("");
 
 async function query(page: number, pageSize: number) {
-  const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
-  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1)
-  const { data, pageCount } = result
-  tableData.value = data
-  pagination.page = page
-  pagination.pageCount = pageCount
-  loading.value = false
+  const searchParam: FilterSearchParam = {
+    search_searchname: { value: keyword.value, op: "like", type: "string" },
+  };
+  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1);
+  const { data, pageCount } = result;
+  tableData.value = data;
+  pagination.page = page;
+  pagination.pageCount = pageCount;
+  loading.value = false;
 }
 
 function afterLeave() {
-  pagination.page = 1
-  pagination.pageCount = 1
-  pagination.pageSize = 10
+  pagination.page = 1;
+  pagination.pageCount = 1;
+  pagination.pageSize = 10;
 }
 
-const selectionIds = ref<DataTableRowKey[]>([])
+const selectionIds = ref<DataTableRowKey[]>([]);
 
-const rowKey = (row: RowData) => row.id
+const rowKey = (row: RowData) => row.id;
 
 function rowProps(row: RowData) {
   return {
-    'data-id': row.id,
-  }
+    "data-id": row.id,
+  };
 }
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
-  selectionIds.value = rowKeys
+  selectionIds.value = rowKeys;
 }
 
 function select(key: number) {
   switch (key) {
     case 1:
-      editSelection()
-      break
+      editSelection();
+      break;
     case 2:
-      deleteSelection()
-      break
+      deleteSelection();
+      break;
     default:
-      break
+      break;
   }
 }
 
 function editSelection() {
   // eslint-disable-next-line dot-notation
-  const $message = window['$message']
+  const $message = window["$message"];
 
   if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
-    $message.error('请选中一条过滤')
-    return
+    $message.error("请选中一条过滤");
+    return;
   }
 
-  const selectedId = selectionIds.value[0]
+  const selectedId = selectionIds.value[0];
   const selectedFilter = tableData.value.find((item: any) => {
-    return item.id === selectedId
-  })
+    return item.id === selectedId;
+  });
 
-  emit('editFilter', selectedFilter)
-  closeModal()
+  emit("editFilter", selectedFilter);
+  closeModal();
 }
 
 function deleteSelection() {
   // eslint-disable-next-line dot-notation
-  const $message = window['$message']
+  const $message = window["$message"];
 
   if (selectionIds.value.length === 0) {
-    $message.error('至少选中一条过滤')
-    return
+    $message.error("至少选中一条过滤");
+    return;
   }
 
-  deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
-    query(pagination.page, pagination.pageSize)
-  })
+  deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
+    query(pagination.page, pagination.pageSize);
+  });
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value)
-    return
+  if (loading.value) return;
+
+  const { pageSize } = pagination;
+  await query(currentPage, pageSize);
+}
+async function handlePageSizeChange(currentPageSize) {
+  if (loading.value) return;
+
+  const { page } = pagination;
+  pagination.pageSize = currentPageSize;
 
-  const { pageSize } = pagination
-  await query(currentPage, pageSize)
+  await query(page, currentPageSize);
 }
 
+
 function handleClick() {
-  emit('showNewFilter')
-  show.value = false
+  emit("showNewFilter");
+  show.value = false;
 }
 
-let sortTable: Sortable | null = null
-const tableRef = ref<InstanceType<typeof NDataTable>>()
+let sortTable: Sortable | null = null;
+const tableRef = ref<InstanceType<typeof NDataTable>>();
+
+onMounted(() => {
+  nextTick(() => {
+    console.log(tableRef.value, "tableRef");
+  });
+});
 
 async function showModal() {
-  show.value = true
+  show.value = true;
 
-  const { page, pageSize } = pagination
-  await query(page, pageSize)
+  const { page, pageSize } = pagination;
+  await query(page, pageSize);
 
   nextTick(() => {
-    if (sortTable !== null)
-      destory()
-
-    const el: HTMLDivElement = tableRef.value?.$el
-    const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
-    if (tbody)
-      sortTable = Sortable.create(tbody, { onEnd, onMove })
-  })
+    if (sortTable !== null) destory();
+
+    const el: HTMLDivElement = tableRef.value?.$el;
+    const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
+    if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
+  });
 }
-let relatedId = ''
-let insertafter = false
+let relatedId = "";
+let insertafter = false;
 
 // TODO: 有bug，需跟后端联调
 function onEnd(event: SortableEvent) {
-  const data = unref(tableData)
-  const oldElem = data[event.oldIndex!]
-  data.splice(event.oldIndex!, 1)
-  data.splice(event.newIndex!, 0, oldElem)
+  const data = unref(tableData);
+  const oldElem = data[event.oldIndex!];
+  data.splice(event.oldIndex!, 1);
+  data.splice(event.newIndex!, 0, oldElem);
 
-  const dragId = oldElem.id
+  const dragId = oldElem.id;
   const index = data.findIndex((item) => {
-    return item.id === relatedId
-  })
+    return item.id === relatedId;
+  });
 
   // 插入到元素后，索引-1；插入到元素前，索引+1
-  const order = insertafter ? index - 1 : index + 1
+  const order = insertafter ? index - 1 : index + 1;
   // console.log('dragid:', dragId, 'order:', order)
-  sort(dragId, order)
+  sort(dragId, order);
 }
 
 function onMove(evt: any) {
-  relatedId = evt.related?.dataset?.id
-  insertafter = evt.willInsertAfter
+  relatedId = evt.related?.dataset?.id;
+  insertafter = evt.willInsertAfter;
   // console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
 }
 
 function destory() {
-  sortTable && sortTable.destroy()
-  sortTable = null
+  sortTable && sortTable.destroy();
+  sortTable = null;
 }
 
 onUnmounted(() => {
-  destory()
-})
+  destory();
+});
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 defineExpose({
   showModal,
-})
+});
 
 const inputHandler = debounce((word) => {
-  keyword.value = word
-  query(1, 5)
-}, 300)
+  keyword.value = word;
+  query(1, 5);
+}, 300);
 </script>
 
 <template>
   <div>
     <n-modal
-      v-model:show="show" transform-origin="center" display-directive="if"
+      v-model:show="show"
+      transform-origin="center"
+      display-directive="if"
       @after-leave="afterLeave"
     >
-      <n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <n-card
+        :style="cardStyle"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
         <div class="wrapper">
           <span class="wrapper-title">全部筛选值</span>
           <div class="wrapper-bar">
@@ -258,7 +305,11 @@ const inputHandler = debounce((word) => {
             </div>
           </div>
           <div class="wrapper-form">
-            <n-input :style="{ width: '360px', border: '1px solid #cad2dd' }" placeholder="请输入过滤条件名称搜索" @input="inputHandler">
+            <n-input
+              :style="{ width: '360px', border: '1px solid #cad2dd' }"
+              placeholder="请输入过滤条件名称搜索"
+              @input="inputHandler"
+            >
               <template #suffix>
                 <SvgIcon size="14px" name="magnifying-1" />
               </template>
@@ -272,18 +323,25 @@ const inputHandler = debounce((word) => {
           </div>
           <div class="wrapper-table">
             <NDataTable
-              ref="tableRef" remote :row-props="rowProps as any" :columns="columns" :data="tableData" :loading="loading"
-              :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
+              ref="tableRef"
+              remote
+              :row-props="rowProps as any"
+              :columns="columns"
+              :data="tableData"
+              :loading="loading"
+              :pagination="pagination"
+              :row-key="rowKey"
+              @update:page="handlePageChange"
+@update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
+              
             />
           </div>
         </div>
         <template #footer>
           <div class="wrapper-footer">
-            <n-button type="info" @click="closeModal">
-              确认
-            </n-button>
-            <n-button secondary style="margin-left:15px" @click="closeModal">
+            <n-button type="info" @click="closeModal"> 确认 </n-button>
+            <n-button secondary style="margin-left: 15px" @click="closeModal">
               取消
             </n-button>
           </div>
@@ -316,7 +374,7 @@ const inputHandler = debounce((word) => {
 
     .n-input {
       width: 300px;
-      border: 1px solid gray
+      border: 1px solid gray;
     }
   }
 
@@ -334,7 +392,7 @@ const inputHandler = debounce((word) => {
     position: relative;
 
     &:before {
-      background-color: #1980FF;
+      background-color: #1980ff;
       content: "";
       width: 5px;
       border-radius: 2px;
diff --git a/src/views/final/comp/RepeatTaskTableModal.vue b/src/views/final/comp/RepeatTaskTableModal.vue
index 83faab4..2bda333 100644
--- a/src/views/final/comp/RepeatTaskTableModal.vue
+++ b/src/views/final/comp/RepeatTaskTableModal.vue
@@ -102,6 +102,25 @@ const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
+  showSizePicker:true,
+  pageSizes: [
+    {
+      label: "10 每页",
+      value: 10,
+    },
+    {
+      label: "15 每页",
+      value: 15,
+    },
+    {
+      label: "30 每页",
+      value: 30,
+    },
+    {
+      label: "50 每页",
+      value: 50,
+    },
+  ],
 })
 const tableData = ref<Array<RowData>>([])
 const selectionIds = ref<DataTableRowKey[]>([])
@@ -128,6 +147,14 @@ async function handlePageChange(currentPage) {
   const { pageSize } = pagination
   await query(currentPage, pageSize)
 }
+async function handlePageSizeChange(currentPageSize) {
+  if (loading.value) return;
+
+  const { page } = pagination;
+  pagination.pageSize = currentPageSize;
+
+  await query(page, currentPageSize);
+}
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
   selectionIds.value = rowKeys
@@ -217,6 +244,7 @@ query(pagination.page, pagination.pageSize)
             <NDataTable
               ref="tableRef" remote :columns="columnsRef" :scroll-x="1250" :max-height="maxHeight" :data="tableData"
               :loading="loading" :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
+@update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
             />
           </div>
diff --git a/src/views/final/content/Content.vue b/src/views/final/content/Content.vue
index 11a361f..2f7b966 100644
--- a/src/views/final/content/Content.vue
+++ b/src/views/final/content/Content.vue
@@ -369,6 +369,25 @@ const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
+  showSizePicker:true,
+  pageSizes: [
+    {
+      label: "10 每页",
+      value: 10,
+    },
+    {
+      label: "15 每页",
+      value: 15,
+    },
+    {
+      label: "30 每页",
+      value: 30,
+    },
+    {
+      label: "50 每页",
+      value: 50,
+    },
+  ],
 })
 const tableData = ref<Array<RowData>>([])
 const selectionIds = ref<DataTableRowKey[]>([])
@@ -402,6 +421,14 @@ async function handlePageChange(currentPage) {
   const { pageSize } = pagination
   await query(currentPage, pageSize)
 }
+async function handlePageSizeChange(currentPageSize) {
+  if (loading.value) return;
+
+  const { page } = pagination;
+  pagination.pageSize = currentPageSize;
+
+  await query(page, currentPageSize);
+}
 
 function handleCheck(rowKeys: DataTableRowKey[]) {
   selectionIds.value = rowKeys
@@ -785,6 +812,7 @@ async function refreshHandler(searchId?: any) {
         :pagination="pagination"
         :row-key="rowKey"
         @update:page="handlePageChange"
+@update-page-size="handlePageSizeChange"
         @update:checked-row-keys="handleCheck"
       />
     </div>
diff --git a/src/views/home/aside/comp/modals/FilterModal.vue b/src/views/home/aside/comp/modals/FilterModal.vue
index 1133223..886158d 100644
--- a/src/views/home/aside/comp/modals/FilterModal.vue
+++ b/src/views/home/aside/comp/modals/FilterModal.vue
@@ -79,6 +79,25 @@ const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
+  showSizePicker:true,
+  pageSizes: [
+    {
+      label: "10 每页",
+      value: 10,
+    },
+    {
+      label: "15 每页",
+      value: 15,
+    },
+    {
+      label: "30 每页",
+      value: 30,
+    },
+    {
+      label: "50 每页",
+      value: 50,
+    },
+  ],
 });
 const tableData = ref<Array<RowData>>([]);
 const keyword = ref("");
@@ -167,6 +186,14 @@ async function handlePageChange(currentPage) {
   await query(currentPage, pageSize);
 }
 
+async function handlePageSizeChange(currentPageSize) {
+  if (loading.value) return;
+
+  const { page } = pagination;
+  pagination.pageSize = currentPageSize;
+  await query(page, currentPageSize);
+}
+
 function handleClick() {
   emit("showNewFilter");
   show.value = false;
@@ -296,6 +323,7 @@ const inputHandler = debounce((word) => {
               :pagination="pagination"
               :row-key="rowKey"
               @update:page="handlePageChange"
+@update-page-size="handlePageSizeChange"
               @update:checked-row-keys="handleCheck"
             />
           </div>

From 716a73f2f48e1fca91fcd52fa861edeb7b865658 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Thu, 21 Mar 2024 23:52:54 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=A4=B4=E9=83=A8=E7=BB=84=E4=BB=B6=E5=8F=8A=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2Content=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/check.png             | Bin 0 -> 2775 bytes
 src/assets/images/nocheck.png           | Bin 0 -> 2793 bytes
 src/assets/images/pic.png               | Bin 0 -> 2808 bytes
 src/assets/images/status.png            | Bin 0 -> 2800 bytes
 src/assets/images/taskCount.png         | Bin 0 -> 2691 bytes
 src/assets/images/xiaojie.png           | Bin 0 -> 2795 bytes
 src/components/DataHeader/index.vue     |  98 +++++++++++++++++
 src/views/final/content/Content.vue     |   9 +-
 src/views/final/content/ListContent.vue | 139 ++++++++++++++++++++++++
 src/views/final/index.vue               |  10 +-
 src/views/worksheet/index.vue           |   6 +
 11 files changed, 260 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/check.png
 create mode 100644 src/assets/images/nocheck.png
 create mode 100644 src/assets/images/pic.png
 create mode 100644 src/assets/images/status.png
 create mode 100644 src/assets/images/taskCount.png
 create mode 100644 src/assets/images/xiaojie.png
 create mode 100644 src/components/DataHeader/index.vue
 create mode 100644 src/views/final/content/ListContent.vue

diff --git a/src/assets/images/check.png b/src/assets/images/check.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed2d902b4310f41338e76ce2a611744c647143c9
GIT binary patch
literal 2775
zcmcIlX;f3!7QSInMg^fxrFse4Vl`wSKuARsAq*818Pr<sOGttQ$Y2r$DQZAb1P4?^
z9GfEIh()pBgeWMAPg+E!s8A6_K@h?$$vG!4(c*hQTwQOywch!0?>YN?d++Z%XYYFh
zg8UiYJSIlQhA<2v{emO_AnNKxJ^iS=4?&2!d(prU8hnR_h7kY;i@tXN=>XF7q5eUn
z)uFxt)HjF*-l1VF>g++k-h~LEcUttO8$Edi`-c!j`c4fBTL-i{eOC{9+lz9F;NTE?
zH;g(o2BaQ9Jpg)5Kk6AUP%v=N4eQY0Fd8z()JJavi&bFteh`-hgqa|AC(vq<PKR1M
zpbqGlq=4gPu&WQXcR@`rid2EJ-$17ZW)%YN7I3T#G`@nNKZ48mKuR7+It11q0oU)t
zmD|CvPT$du?lz!X4`9_JxOyKrR|VsC={Ds7`CgEg541qv{2JY;18r~Ng=!G79+dwM
z2ZmAe8`#p0>Y8BW2GHA&HWh#a7eITLK_+TygU8E(U>hhX1F3nSs2V(Ofp5BDK^ctM
z0m9bn5)Oddf54X=DCZow`2cLn2i5gZkZF(xSEPa44N#g5Y97N?d%>c0TJbI*%Z6(Y
zfmPXHU=U@T0PBu`!V0+iENJV3C$7QTMtJ{E$j{KNSA+a3Fy}l>KLJjaqo=L#RVS2X
zgNt`zYbR`KMOuJL?x2j5;L$Vm;tk9#2F2CjWe40>1P_$x)R)1cWRQFq+<XYrj>7z_
z2CAUuDcoED%4*^1N+8|?D(hhFQ}p^Ry!8l%uLD190bTv*VGBHe8+7!bljV??4u-Vo
z<TcdX23Kqbjjd3$6XchHvz1`S8F081Ds#cBx1d7<Uv|Q{oj|b<@V0{b=isLjR8kGp
zS3uJ%_@V<zcZ1MmaJdFZ_UNwP2Zt|#`e*2EkD)H~*#CJr>#diDgyMcYCC~7lJvULt
z<Hre=c$9FZNa926zEV!aMFJn<5|0o{h|E_QBMMBC3&WEZMDUa1_}&8I+&TE{L}sE`
zCKf7rc%nF7qF^Ta5P1S=l#pqd8_i@Q{vM)?^C7a08@Ms2uT(C?J={D=d@7xWdwIK2
zJt^Ka`YfDAp?Z-iUSz5}i9%&kJels^_+Nu)$R-y=GsFD+|H@@p`4D52N*R+(PDn^_
zOK^9S%2$%9-rnA13XM#okqiiuVy#5UOC(7YE+Y~AgbKb~BvXo{65JS(7bRV-^dTCU
zevlxRg@k+zEK#_<7v#p5iphyQ8JX%vA&bREUGLEfWti~aG(L$|M68tw$zei;bhVr>
zG{9X(oDFC9_lb-^0~_W-xyW!Sym&t;f3;XBQ3m<>5DhzS0+E18^%A)A=u`^Ho#sg+
zQM~BUB%aX2ljI?wdwII^qrJVT!jU+i^rtZ>UY>Lhju(SXrE)k74-TE<JI`;PzdM8D
zOQ((a21yi3o`f$P$t^PG{@_dhTVJNHT*y;O<q=Y8{74mq#z>V?MT}I2`}!Jhoq@Y9
z5lIBn1jP*FHGNR+CzOlU2nGIfsThBM&P>s#IQ&=oKlls&*YhJANRf@j@*l-BVlq^u
zar&_p42zG=B$OCBNN#8qf*wJj(+<BI8XV~F>+R8WcfIZGc+=kY`c>=87cI}5pZ(d?
z`1Hx+hCk{bJ$z7izxMavYVQ5>ZuOnpRkv<dR@}H=ey!~4mCKhdmX`c_q4@l{qF>Gy
zo;iK$<cZ@2$MTQn{jC1!$l*f=5A4s~m$Nr}&+c7WJ9li~mYK0Neaq&wO&e2FR2$Z>
zOa3uwZDPWj)k=kYl}suT$H&ErVpc{A1^g%;_a8s3SpNO8@0KoE92pTFwkUMrf{@_(
z-v$K+_;dVx=doFH=lIP2hUv}l^7Np))2I}(8)??euV=V^_2u+wE<|U1>Xa{>KA${k
z;)L;^IXaB9w;Mag*2db((qi-|b2C#D0){yco4x;{%`!fX|6t5QkCj_G1r~AH7&b9K
zJ+y^0(adhf)lfTUb5m@Tdu-zg>T{FL)27X4;1vgh?B`g~o3W!N8JSM}yP%$}$}}6N
z%5ALP^BOa8{CXBewW{EL3MS9OYl}~YOU>~JJgMI`-O}_(Z0n>{Rcc<OmkA|{$Eh!j
z37MnLGKpWBiaEJ*50tn?m{~Vo6FOtLR##MGr`^%5;cl_A#b(Y?vs6DE#bkk@!Iv-_
z(=<XBgSEeRlSLXkw>@~6ojNAcp4c2bS%X>Pr=nz<(zBy@srj0%E&)9of7$5~6?lDe
z;i%wz?jl~@*OQB#*NhHsvungv=H{IlDZVE-Dy%Y#q~9nh#WLQEb`ktCKQ73+o3Pxr
zrEa>+rr*rgm2q&*o^9RFoS)yMGA~vUqG^^{*oK&t6mu1U`{EvbziWv}D%DbjaRo1T
zS*d1I?5oFSv=grfTeGlSm(zDtHxrZ-c@^8HG)%A9N;_teYaUQ^qcY*!&M51z=CT&?
zS1_vbkFFSR$G>MoVEOuaN<u3G9qSwRP75%Rsd6m8PaYRMHl|i{V``@B`As(BhgoS8
zYVunvb3V6Zv4fV0?5t+4cXYALrn}k)+7Xi38)@psT{%|DSiyB`8_#2GQhGACee}hp
z@<4k|gT}^d&%~Db%WS!K>`f;*zRn)iw0xDXZCayV7Bc-*qo&H$|4`m`+d8!eW?7K2
zcjKv$wW=*sf-KI3oLAZPWPW*G9mV;=V|nUg!Wb^a0W)FQ%~%+!tgEze$(`5bRNX+`
z=-`=ce{)Kfnu7(q^FnVVEm%wOcbL%sR5~kMBln+r>0Vu+gL!NuW^Tc*VwpP6Ze>r7
zi|3xZ6_6fQL)sY{c5CLbrA40+s8=H^Obfr`vdKhgBsTh+t7#@?_N9v_5GECA#$#3w
zqurO;G1PtETeawl!<`tasR2Ra#0%lJ%|*)KFD~LYO6R_Cis!}pQ3&S>ZEIPUPsT?#
zjd4_iV&zbX?W9u0<K>vi5&Y%gB7QYz0=IzU$J+atw(7_51xpV)RuIgl5g#_Gth4RL
zP;d&{bfz75*vd9g#WI=XT9f!f_Otqy!@@&cttGCi9p84Qv`gDjbXyX^!oK+z?YavJ

literal 0
HcmV?d00001

diff --git a/src/assets/images/nocheck.png b/src/assets/images/nocheck.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7f4540bd6ae150d6d5452ea9e9c8eb1523dbb77
GIT binary patch
literal 2793
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/pic.png b/src/assets/images/pic.png
new file mode 100644
index 0000000000000000000000000000000000000000..069f366bf1e40c542552879611c293d7d4d77424
GIT binary patch
literal 2808
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/status.png b/src/assets/images/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..f85ed1f4e27b9a14793863fdd3ce0902a1c8f6a9
GIT binary patch
literal 2800
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/taskCount.png b/src/assets/images/taskCount.png
new file mode 100644
index 0000000000000000000000000000000000000000..0610e50d1d82503071467b530d1704d4539781ae
GIT binary patch
literal 2691
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
YX#A|!cAC1p??Lj})-w;x%#c}s00^}~UH||9

literal 0
HcmV?d00001

diff --git a/src/assets/images/xiaojie.png b/src/assets/images/xiaojie.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6b4083c935b7a16fa183eee6d64f8f1f6b8c9fe
GIT binary patch
literal 2795
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
W@~QJ}=)W>Khz!+PltlOvKKc(H*EdiA

literal 0
HcmV?d00001

diff --git a/src/components/DataHeader/index.vue b/src/components/DataHeader/index.vue
new file mode 100644
index 0000000..f204574
--- /dev/null
+++ b/src/components/DataHeader/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="header_wrap">
+    <div v-for="(item, index) in data" :key="index" class="header_item">
+      <img :src="item.link" />
+      <div class="data_wrap">
+        <div class="data_title">{{ item.count }}</div>
+        <div class="data_content">{{ item.title }}</div>
+      </div>
+    </div>
+    <SvgIcon size="14px" style="cursor: pointer" name="setting"></SvgIcon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const data = [
+  {
+    link: "/src/assets/images/taskCount.png",
+    title: "任务包总数",
+    count: 6399,
+  },
+  {
+    link: "/src/assets/images/nocheck.png",
+    title: "未标记",
+    count: 6290,
+  },
+  {
+    link: "/src/assets/images/check.png",
+    title: "已标记",
+    count: 109,
+  },
+  {
+    link: "/src/assets/images/status.png",
+    title: "真",
+    count: 3290,
+  },
+  {
+    link: "/src/assets/images/status.png",
+    title: "假",
+    count: 3000,
+  },
+  {
+    link: "/src/assets/images/pic.png",
+    title: "相似度100%图",
+    count: 230,
+  },
+  {
+    link: "/src/assets/images/xiaojie.png",
+    title: "小结重复数",
+    count: 365,
+  },
+];
+</script>
+
+<style scoped lang="less">
+.header_wrap {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 30px;
+  background: #fff;
+  .header_item {
+    width: 10%;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    img{
+      width: 50px;
+      height: 50px
+    }
+    .data_wrap {
+      .data_title {
+        font-size: 20px;
+        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
+        font-weight: Bold;
+        text-align: left;
+        color: #202020;
+        line-height: 23px;
+        text-align: center;
+        white-space: nowrap;
+      }
+      .data_content {
+        opacity: 0.6;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC-Regular;
+        font-weight: Regular;
+        text-align: center;
+        color: #202020;
+        line-height: 16px;
+        text-align: center;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/final/content/Content.vue b/src/views/final/content/Content.vue
index 2f7b966..dd79c39 100644
--- a/src/views/final/content/Content.vue
+++ b/src/views/final/content/Content.vue
@@ -12,6 +12,7 @@ import {
   ref,
   unref,
   watch,
+  defineEmits
 } from 'vue'
 import { rowPropKeys } from 'naive-ui/es/legacy-grid/src/Row'
 import {
@@ -40,6 +41,12 @@ import emitter from '@/utils/mitt'
 import { formatToDateHMS } from '@/utils/dateUtil'
 import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
 
+const emit = defineEmits(['changeShow'])
+const changeContent = ()=>{
+  emit('changeShow')
+}
+
+
 const dicStore = useDictionary()
 const izstatusList = ref([])
 const reviewType = 0
@@ -744,7 +751,7 @@ async function refreshHandler(searchId?: any) {
     <div class="wrapper-header">
       <div class="wrapper-header-left">
         <span class="wrapper-header-font">任务管理列表</span>
-        <SvgIcon size="32" name="magnifying" />
+        <SvgIcon size="32" name="magnifying" @click="changeContent"/>
       </div>
       <div>
         <NButton class="xjcc" text @click="showModal(repeatModalRef)">
diff --git a/src/views/final/content/ListContent.vue b/src/views/final/content/ListContent.vue
new file mode 100644
index 0000000..9e176fe
--- /dev/null
+++ b/src/views/final/content/ListContent.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+const item = {
+  img: "/src/assets/images/test.png",
+  checked: false,
+  title: "YP4567890545",
+  date: "2023-12-19 12:09:18",
+};
+const data = ref<any[]>([]);
+
+onMounted(() => {
+  for (let i = 0; i < 10; i++) {
+    data.value.push(item as any);
+  }
+});
+</script>
+
+<template>
+  <div class="wrapper">
+    <div class="item" v-for="(item, index) in data" :key="index">
+      <div class="top">
+        <div
+          class="img"
+          :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
+        >
+          <div class="check_box"><n-checkbox size="medium" label=" " /></div>
+        </div>
+        <div class="content">
+          <div class="title">任务ID：{{ item.title }}</div>
+          <div class="date">{{ item.date }}</div>
+          <div class="tag_box">
+            <div
+              class="tag_item"
+              v-for="index in 2"
+              :key="index"
+              :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
+            >
+              待确认
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="resovle_action">通过</div>
+        <div class="reject_action">不通过</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  box-sizing: border-box;
+  margin-left: 16px;
+  width: 100%;
+  background: #fff;
+  padding: 0px 24px 24px 24px;
+  .item {
+    width: 23%;
+    border: 1px solid #ededed;
+    border-radius: 3px;
+    padding: 8px 10px;
+    margin-right: 10px;
+    .top {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      .img {
+        width: 50%;
+        height: 70px;
+        border-radius: 3px;
+        .check_box {
+          margin-left: 8px;
+        }
+      }
+      .content {
+        margin-left: 8px;
+        .title,
+        .date {
+          font-size: 11px;
+          font-family: PingFang SC, PingFang SC-Medium;
+          font-weight: Medium;
+          text-align: left;
+          color: #323233;
+          line-height: 16px;
+        }
+      }
+      .tag_box {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        .tag_item {
+          width: 31px;
+          height: 14px;
+          font-size: 10px;
+          font-family: PingFang SC, PingFang SC-Regular;
+          font-weight: Regular;
+          text-align: left;
+          //   color: #507afd;
+          line-height: 14px;
+          letter-spacing: 0.1px;
+          margin-right: 8px;
+        }
+      }
+    }
+    .bottom {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      .resovle_action {
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: Medium;
+        text-align: left;
+        color: #507afd;
+        line-height: 17px;
+      }
+      .reject_action {
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC-Medium;
+        font-weight: Medium;
+        text-align: left;
+        color: #ff4e4f;
+        line-height: 17px;
+        margin-left: 15px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/final/index.vue b/src/views/final/index.vue
index 25c07dd..9ef95fe 100644
--- a/src/views/final/index.vue
+++ b/src/views/final/index.vue
@@ -1,6 +1,12 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import Aside from './aside/Aside.vue'
 import Content from './content/Content.vue'
+import ListContent from './content/ListContent.vue'
+
+const showList = ref(false);
+
+
 </script>
 
 <template>
@@ -9,7 +15,9 @@ import Content from './content/Content.vue'
     <Aside />
 
     <!-- 内容 -->
-    <Content />
+    <Content @changeShow="showList=true" v-if="!showList"/>
+    <!-- 任务管理 -->
+    <ListContent v-else />
   </div>
 </template>
 
diff --git a/src/views/worksheet/index.vue b/src/views/worksheet/index.vue
index 25c07dd..f7891d5 100644
--- a/src/views/worksheet/index.vue
+++ b/src/views/worksheet/index.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import Aside from './aside/Aside.vue'
 import Content from './content/Content.vue'
+import DataHeader from '@/components/DataHeader/index.vue'
 </script>
 
 <template>
+  <div>
+    <div class="header">
+      <DataHeader  v-show="false"/>
+    </div>
   <div class="main">
     <!-- 侧边 -->
     <Aside />
@@ -11,6 +16,7 @@ import Content from './content/Content.vue'
     <!-- 内容 -->
     <Content />
   </div>
+</div>
 </template>
 
 <style lang="less" scoped>