Merge branch 'main' into shen

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>

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>

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 {
-import { NDataTable } from 'naive-ui'
+  defineOptions,
-import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
+  h,
-import type { SortableEvent } from 'sortablejs'
+  nextTick,
-import Sortable from 'sortablejs'
+  onMounted,
-import { debounce } from 'lodash-es'
+  onUnmounted,
-import Action from '@/views/home/aside/comp/Action.vue'
+  reactive,
-import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
+  ref,
-import type { FilterSearchParam } from '/#/api'
+  unref,
-
+} from "vue";
-defineOptions({ name: 'FilterModal' })
+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: "showNewFilter"): void;
-  (e: 'editFilter', filter: any): void
+  (e: "editFilter", filter: any): void;
-}>()
+}>();
 
-const show = ref(false)
+const show = ref(false);
 
 const cardStyle = {
-  'width': '800px',
+  width: "800px",
-  'height': '800px',
+  height: "800px",
-  '--n-padding-bottom': '10px',
+  "--n-padding-bottom": "10px",
-  '--n-padding-left': '10px',
+  "--n-padding-left": "10px",
-}
+};
 
 interface RowData {
-  id: string
+  id: string;
-  searchname: string
+  searchname: string;
-  createby: string
+  createby: string;
-  createtime: string
+  createtime: string;
-  updateby: string
+  updateby: string;
-  updatetime: string
+  updatetime: string;
 }
 
 const columns: DataTableColumns<RowData> = [
   {
-    type: 'selection',
+    type: "selection",
   },
   {
-    title: '操作',
+    title: "操作",
-    key: 'action',
+    key: "action",
     render(row) {
-      return h(
+      return h(Action, {
-        Action,
+        options: [
-        {
+          { label: "编辑", key: 1 },
-          options: [
+          { label: "删除", key: 2 },
-            { label: '编辑', key: 1 },
+        ],
-            { label: '删除', key: 2 },
+        id: row.id,
-          ],
+        select,
-          id: row.id,
+      });
-          select,
-        },
-      )
     },
   },
   {
-    title: '名称',
+    title: "名称",
-    key: 'searchname',
+    key: "searchname",
   },
   {
-    title: '创建者',
+    title: "创建者",
-    key: 'createby',
+    key: "createby",
   },
   {
-    title: '创建时间',
+    title: "创建时间",
-    key: 'createtime',
+    key: "createtime",
   },
   {
-    title: '更新者',
+    title: "更新者",
-    key: 'updateby',
+    key: "updateby",
   },
   {
-    title: '更新时间',
+    title: "更新时间",
-    key: 'updatetime',
+    key: "updatetime",
   },
-]
+];
 
-const loading = ref(true)
+const loading = ref(true);
 const pagination = reactive({
   page: 1,
   pageCount: 1,
   pageSize: 10,
-})
+  showSizePicker:true,
-const tableData = ref<Array<RowData>>([])
+  pageSizes: [
-const keyword = ref('')
+    {
+      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 searchParam: FilterSearchParam = {
-  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1)
+    search_searchname: { value: keyword.value, op: "like", type: "string" },
-  const { data, pageCount } = result
+  };
-  tableData.value = data
+  const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1);
-  pagination.page = page
+  const { data, pageCount } = result;
-  pagination.pageCount = pageCount
+  tableData.value = data;
-  loading.value = false
+  pagination.page = page;
+  pagination.pageCount = pageCount;
+  loading.value = false;
 }
 
 function afterLeave() {
-  pagination.page = 1
+  pagination.page = 1;
-  pagination.pageCount = 1
+  pagination.pageCount = 1;
-  pagination.pageSize = 10
+  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()
+      editSelection();
-      break
+      break;
     case 2:
-      deleteSelection()
+      deleteSelection();
-      break
+      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('请选中一条过滤')
+    $message.error("请选中一条过滤");
-    return
+    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)
+  emit("editFilter", selectedFilter);
-  closeModal()
+  closeModal();
 }
 
 function deleteSelection() {
   // eslint-disable-next-line dot-notation
-  const $message = window['$message']
+  const $message = window["$message"];
 
   if (selectionIds.value.length === 0) {
-    $message.error('至少选中一条过滤')
+    $message.error("至少选中一条过滤");
-    return
+    return;
   }
 
-  deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
+  deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
-    query(pagination.page, pagination.pageSize)
+    query(pagination.page, pagination.pageSize);
-  })
+  });
 }
 
 async function handlePageChange(currentPage) {
-  if (loading.value)
+  if (loading.value) return;
-    return
 
-  const { pageSize } = pagination
+  const { pageSize } = pagination;
-  await query(currentPage, pageSize)
+  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')
+  emit("showNewFilter");
-  show.value = false
+  show.value = false;
 }
 
-let sortTable: Sortable | null = null
+let sortTable: Sortable | null = null;
-const tableRef = ref<InstanceType<typeof NDataTable>>()
+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
+  const { page, pageSize } = pagination;
-  await query(page, pageSize)
+  await query(page, pageSize);
 
   nextTick(() => {
-    if (sortTable !== null)
+    if (sortTable !== null) destory();
-      destory()
+
-
+    const el: HTMLDivElement = tableRef.value?.$el;
-    const el: HTMLDivElement = tableRef.value?.$el
+    const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
-    const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
+    if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
-    if (tbody)
+  });
-      sortTable = Sortable.create(tbody, { onEnd, onMove })
-  })
 }
-let relatedId = ''
+let relatedId = "";
-let insertafter = false
+let insertafter = false;
 
 // TODO: 有bug，需跟后端联调
 function onEnd(event: SortableEvent) {
-  const data = unref(tableData)
+  const data = unref(tableData);
-  const oldElem = data[event.oldIndex!]
+  const oldElem = data[event.oldIndex!];
-  data.splice(event.oldIndex!, 1)
+  data.splice(event.oldIndex!, 1);
-  data.splice(event.newIndex!, 0, oldElem)
+  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
+  relatedId = evt.related?.dataset?.id;
-  insertafter = evt.willInsertAfter
+  insertafter = evt.willInsertAfter;
   // console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
 }
 
 function destory() {
-  sortTable && sortTable.destroy()
+  sortTable && sortTable.destroy();
-  sortTable = null
+  sortTable = null;
 }
 
 onUnmounted(() => {
-  destory()
+  destory();
-})
+});
 
 function closeModal() {
-  show.value = false
+  show.value = false;
 }
 
 defineExpose({
   showModal,
-})
+});
 
 const inputHandler = debounce((word) => {
-  keyword.value = word
+  keyword.value = word;
-  query(1, 5)
+  query(1, 5);
-}, 300)
+}, 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"
+              ref="tableRef"
-              :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
+              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 type="info" @click="closeModal"> 确认 </n-button>
-              确认
+            <n-button secondary style="margin-left: 15px" @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;

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>

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 { useRoute, useRouter } from 'vue-router'
@@ -41,6 +42,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 router = useRouter()
@@ -372,6 +379,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[]>([])
@@ -405,6 +431,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
@@ -720,7 +754,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)">
@@ -788,6 +822,7 @@ async function refreshHandler(searchId?: any) {
         :pagination="pagination"
         :row-key="rowKey"
         @update:page="handlePageChange"
+@update-page-size="handlePageSizeChange"
         @update:checked-row-keys="handleCheck"
       />
     </div>

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>

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>
 

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>

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,

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}`)
+  const element = document.querySelector(`#${key}`);
-  element?.scrollIntoView(true)
+  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
+  const modal = unref(modalRef)! as any;
-  modal.showModal()
+  modal.showModal();
 }
 // 当前显示的模块，按照数组顺序显示
-const showItems = shallowRef<{ key: string, config: AsideEntity }[]>([])
+const showItems = shallowRef<{ key: string; config: AsideEntity }[]>([]);
-const filterModalRef = ref(null)
+const filterModalRef = ref(null);
-const newFilterModalRef = ref(null)
+const newFilterModalRef = ref(null);
-const customModalRef = ref(null)
+const customModalRef = ref(null);
 function editFilter(filter: any) {
-  const modal = unref(newFilterModalRef)! as any
+  const modal = unref(newFilterModalRef)! as any;
-  modal.showModal()
+  modal.showModal();
-  modal.edit(filter)
+  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)"
+        v-show="!showSearch"
-          @show-custom="showModal(customModalRef)" @show-filter="showModal(filterModalRef)"
+        :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>
 

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>