feat: table组件替换

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

@@ -53,7 +53,7 @@
             </template>
             <template v-else-if="column.dataIndex === 'group_id'">
               <div class="flex items-center w-100%">
-                <CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
+                <CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" class="w-full" />
               </div>
             </template>
           </template>

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

@@ -47,31 +47,29 @@
 
       <!-- 分别编辑 -->
       <template v-if="editType === 'each'">
-        <a-table :data="accountTagList" :pagination="false" row-key="id" class="w-100%" column-resizable>
-          <template #columns>
-            <a-table-column title="账号名称" data-index="name" width="200">
-              <template #cell="{ record }">
-                <span>{{ record.name || '-' }}</span>
-              </template>
-            </a-table-column>
-            <a-table-column title="选择标签" data-index="tags">
-              <template #cell="{ record, rowIndex }">
-                <div class="flex items-center w-100%">
-                  <Select
-                    v-model:value="record.tags"
-                    :options="tagOptions"
-                    mode="tags"
-                    placeholder="请输入标签，回车键可直接添加..."
-                    :max-tag-count="5"
-                    style="width: 90%"
-                    @search="(val) => handleCreateTag(val, rowIndex)"
-                  />
-                  <span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
-                </div>
-              </template>
-            </a-table-column>
-          </template>
-        </a-table>
+        <Table :dataSource="accountTagList" :pagination="false" rowKey="id" class="w-100%">
+          <Table.Column title="账号名称" dataIndex="name" :width="200">
+            <template #customRender="{ record }">
+              <span>{{ record.name || '-' }}</span>
+            </template>
+          </Table.Column>
+          <Table.Column title="选择标签" dataIndex="tags">
+            <template #customRender="{ record, index }">
+              <div class="flex items-center w-100%">
+                <Select
+                  v-model:value="record.tags"
+                  :options="tagOptions"
+                  mode="tags"
+                  placeholder="请输入标签，回车键可直接添加..."
+                  :max-tag-count="5"
+                  class="!w-full"
+                  @search="(val) => handleCreateTag(val, index)"
+                />
+                <span class="tag-count ml-8px">{{ record.tags.length }}/5</span>
+              </div>
+            </template>
+          </Table.Column>
+        </Table>
       </template>
     </Form>
     <template #footer>
@@ -83,7 +81,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue';
-import { Button, Modal, Form, FormItem,Tooltip, RadioGroup, Radio, Select } from 'ant-design-vue';
+import { Button, Form, FormItem, Modal, Radio, RadioGroup, Select, Table, Tooltip } from 'ant-design-vue';
 import { fetchAccountTags, batchPutTag } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/icon-question.png';

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

@@ -32,18 +32,46 @@
       </Button>
     </div>
 
-    <a-table
-      column-resizable
-      :columns="columns"
-      :data="list"
-      row-key="id"
+    <Table
+      :dataSource="list"
+      rowKey="id"
       :loading="loading"
       :scroll="{ y: 500 }"
       class="h-500px"
       :pagination="false"
-      @sorter-change="handleSorterChange"
+      :showSorterTooltip="false"
+      @change="(pagination, filters, sorter) => {
+        if (sorter && sorter.columnKey) {
+          handleSorterChange(sorter.columnKey, sorter.order);
+        }
+      }"
     >
-      <template #empty>
+      <Table.Column title="分组名称" dataIndex="name" />
+      <Table.Column title="创建人" dataIndex="creator">
+        <template #customRender="{ record }">
+          {{ record.creator?.name || '-' }}
+        </template>
+      </Table.Column>
+      <Table.Column
+        title="创建日期"
+        dataIndex="created_at"
+        :width="160"
+        key="created_at"
+        :sorter="true"
+      >
+        <template #customRender="{ record }">
+          {{ exactFormatTime(record.created_at) }}
+        </template>
+      </Table.Column>
+      <Table.Column title="操作" :align="'center'" :width="120">
+        <template #customRender="{ record }">
+          <div class="flex items-center">
+            <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
+            <Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
+          </div>
+        </template>
+      </Table.Column>
+      <template #emptyText>
         <NoData>
           <span class="s1 mb-16px">暂无分组</span>
           <Button type="primary" class="mb-16px" size="middle" @click="openAdd"
@@ -54,13 +82,7 @@
           </Button>
         </NoData>
       </template>
-      <template #action="{ record }">
-        <div class="flex items-center">
-          <img :src="icon1" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(record)" />
-          <Button type="primary" size="small" @click="openEdit(record)">编辑</Button>
-        </div>
-      </template>
-    </a-table>
+    </Table>
     <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
       <a-pagination
         :total="pageInfo.total"
@@ -82,7 +104,7 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { Button, Modal, Input, Space } from 'ant-design-vue';
+import { Button, Input, Modal, Space, Table } from 'ant-design-vue';
 import { getAccountGroup } from '@/api/all/propertyMarketing';
 import { exactFormatTime } from '@/utils/tools';
 
@@ -117,24 +139,7 @@ const loading = ref(false);
 const query = ref(cloneDeep(INITIAL_QUERY));
 const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
 
-const columns = [
-  { title: '分组名称', dataIndex: 'name' },
-  {
-    title: '创建人',
-    dataIndex: 'creator',
-    render: ({ record }) => record.creator?.name || '-',
-  },
-  {
-    title: '创建日期',
-    dataIndex: 'created_at',
-    width: 160,
-    render: ({ record }) => exactFormatTime(record.created_at),
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
-  { title: '操作', slotName: 'action', align: 'center', width: 120 },
-];
+
 
 function open() {
   visible.value = true;