feat: 投放账户分组

src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue

@@ -27,20 +27,33 @@
       </div>
     </template>
     <template v-else>
-      <a-button type="primary" class="mb-16px" size="medium" @click="openAdd"
-        ><template #icon>
-          <img :src="icon3" width="16" height="16" />
-        </template>
-        <template #default>添加新分组</template>
-      </a-button>
+      <div class="flex items-center justify-between mb-16px">
+        <div class="filter-row-item flex items-center">
+          <span class="s1 !color-#211F24 mr-12px">分组名称</span>
+          <a-space size="medium" class="w-240px">
+            <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
+              <template #prefix>
+                <icon-search />
+              </template>
+            </a-input>
+          </a-space>
+        </div>
+        <a-button type="primary" size="medium" @click="openAdd"
+          ><template #icon>
+            <img :src="icon3" width="16" height="16" />
+          </template>
+          <template #default>添加新分组</template>
+        </a-button>
+      </div>
       <a-table
         :columns="columns"
         :data="list"
         row-key="id"
         :loading="loading"
         :scroll="{ y: 500 }"
+        class="h-500px"
         :pagination="false"
-        @change="onTableChange"
+        @sorter-change="handleSorterChange"
       >
         <template #action="{ record }">
           <div class="flex items-center">
@@ -49,7 +62,7 @@
           </div>
         </template>
       </a-table>
-      <div class="pagination-box">
+      <div class="pagination-box flex justify-end">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -72,6 +85,8 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 import { getGroupList } from '@/api/all/propertyMarketing';
+import { exactFormatTime } from '@/utils/tools';
+
 import AddGroup from './add-group.vue';
 import DeleteGroup from './delete-group.vue';
 
@@ -88,7 +103,12 @@ const currentGroup = ref(null);
 
 const list = ref([]);
 const loading = ref(false);
-const pageInfo = reactive({
+const query = ref({
+  name: '',
+  column: '',
+  order: '',
+});
+const pageInfo = ref({
   page: 1,
   pageSize: 20,
   total: 0,
@@ -110,6 +130,7 @@ const columns = [
     title: '创建日期',
     dataIndex: 'created_at',
     width: 160,
+    render: ({ record }) => exactFormatTime(record.created_at),
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },
@@ -122,6 +143,17 @@ function open() {
   getData();
 }
 
+const close = () => {
+  query.value.name = '';
+  pageInfo.value.page = 1;
+  pageInfo.value.pageSize = 20;
+  pageInfo.value.total = 0;
+  query.value.column = '';
+  query.value.order = '';
+  list.value = [];
+  visible.value = false;
+};
+
 function openAdd() {
   addGroupRef.value.open();
 }
@@ -134,47 +166,43 @@ function openDelete(record) {
   deleteGroupRef.value.open(record);
 }
 
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order === 'ascend' ? 'asc' : 'desc';
+  getData();
+};
+
 async function getData() {
   try {
     loading.value = true;
-    const { page, pageSize } = pageInfo;
+    const { page, pageSize } = pageInfo.value;
     const params = {
       page,
       pageSize,
+      ...query.value,
     };
-    if (sortInfo.value.field && sortInfo.value.direction) {
-      params.orderField = sortInfo.value.field;
-      params.orderType = sortInfo.value.direction === 'ascend' ? 'asc' : 'desc';
-    }
     const { code, data } = await getGroupList(params);
     if (code === 200) {
-      list.value = data.list;
-      pageInfo.total = data.total;
+      list.value = data?.data ?? [];
+      pageInfo.value.total = data.total;
     }
   } finally {
     loading.value = false;
   }
 }
 
-const onTableChange = (pagination, filters, sorter) => {
-  if (sorter && sorter.field) {
-    sortInfo.value.field = sorter.field;
-    sortInfo.value.direction = sorter.order;
-  } else {
-    sortInfo.value.field = '';
-    sortInfo.value.direction = '';
-  }
+const reload = () => {
+  pageInfo.value.page = 1;
   getData();
 };
 
 const onPageChange = (current) => {
-  pageInfo.page = current;
+  pageInfo.value.page = current;
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.pageSize = pageSize;
-  pageInfo.page = 1;
-  getData();
+  pageInfo.value.pageSize = pageSize;
+  reload();
 };
 
 defineExpose({ open });