feat: space组件处理

src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue

@@ -8,7 +8,7 @@
     <div class="filter-row">
       <div class="filter-row-item">
         <span class="label">内容稿件标题</span>
-        <a-space size="medium">
+        <Space size="medium">
           <Input
             v-model:value="query.title"
             class="!w-240px"
@@ -21,11 +21,11 @@
               <icon-search />
             </template>
           </Input>
-        </a-space>
+        </Space>
       </div>
       <div class="filter-row-item">
         <span class="label">序号</span>
-        <a-space size="medium">
+        <Space size="medium">
           <Input
             v-model:value="query.uid"
             class="!w-160px"
@@ -38,7 +38,7 @@
               <icon-search />
             </template>
           </Input>
-        </a-space>
+        </Space>
       </div>
       <div class="filter-row-item" v-if="query.audit_status === AuditStatus.Pending">
         <span class="label">上传时间</span>
@@ -99,7 +99,7 @@
 </template>
 
 <script setup>
-import { Button, Input, Select } from 'ant-design-vue';
+import { Button, Input, Select, Space } from 'ant-design-vue';
 const { Option } = Select;
 import { defineEmits, defineProps } from 'vue';
 import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';

src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue

@@ -1,140 +1,123 @@
 <template>
-  <a-table
+  <Table
     ref="tableRef"
-    :data="dataSource"
-    row-key="id"
-    column-resizable
+    :dataSource="dataSource"
+    rowKey="id"
     :pagination="false"
     :scroll="{ x: '100%' }"
     class="flex-1 manuscript-table w-100%"
     bordered
-    :row-selection="rowSelection"
-    :selected-row-keys="selectedRowKeys"
-    @sorter-change="handleSorterChange"
-    @select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
-    @select-all="(check) => emits('selectAll', check)"
+    :rowSelection="rowSelection"
+    :showSorterTooltip="false"
+    @change="handleTableChange"
   >
-    <template #empty>
+    <template #emptyText>
       <NoData text="暂无稿件" />
     </template>
-    <template #columns>
-      <a-table-column
-        v-for="column in tableColumns"
-        :key="column.dataIndex"
-        :data-index="column.dataIndex"
-        :fixed="column.fixed"
-        :width="column.width"
-        :min-width="column.minWidth"
-        :sortable="column.sortable"
-        :align="column.align"
-        ellipsis
-        tooltip
-      >
-        <template #title>
-          <div class="flex items-center">
-            <span class="cts mr-4px">{{ column.title }}</span>
-            <Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
-              <icon-question-circle class="tooltip-icon color-#737478" size="16" />
-            </Tooltip>
-          </div>
-        </template>
+    <Column
+      v-for="column in tableColumns"
+      :key="column.dataIndex"
+      :dataIndex="column.dataIndex"
+      :fixed="column.fixed"
+      :width="column.width"
+      :minWidth="column.minWidth"
+      :sorter="column.sortable"
+      :align="column.align"
+      :ellipsis="true"
+    >
+      <template #title>
+        <div class="flex items-center">
+          <span class="cts mr-4px">{{ column.title }}</span>
+          <Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
+            <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+          </Tooltip>
+        </div>
+      </template>
 
-        <template v-if="column.dataIndex === 'customer_opinion'" #cell="{ record }">
-          <p
-            class="h-28px px-8px flex items-center rounded-2px w-fit"
-            :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
-          >
-            <span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
-              getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
-            }}</span>
-          </p>
-        </template>
-        <template v-else-if="column.dataIndex === 'platform'" #cell="{ record }">
-          <template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
-          <img
-            v-else
-            width="24"
-            height="24"
-            class="rounded-4px"
-            :src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
-          />
-        </template>
-        <template v-else-if="column.dataIndex === 'compliance_level'" #cell="{ record }">
-          <span class="cts num !color-#6D4CFE">{{
-            record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
-          }}</span>
-        </template>
-        <template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
-          <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
-        </template>
-        <template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
-          <div class="flex items-center">
-            <img
-              :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
-              width="16"
-              height="16"
-              class="mr-4px"
-            />
-            <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
-              record.type === EnumManuscriptType.Image ? '图文' : '视频'
-            }}</span>
-          </div>
-        </template>
-        <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
-          {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
-        </template>
-        <template
-          #cell="{ record }"
-          v-else-if="
-            ['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)
-          "
+      <template v-if="column.dataIndex === 'customer_opinion'" #customRender="{ record }">
+        <p
+          class="h-28px px-8px flex items-center rounded-2px w-fit"
+          :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
         >
-          <span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
-        </template>
-        <template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
-          <HoverImagePreview :src="record.cover">
-            <a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover">
-              <template #error>
-                <img :src="icon4" class="w-full h-full" />
-              </template>
-            </a-image>
-          </HoverImagePreview>
-        </template>
-        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <div class="flex items-center">
-            <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
-            <Button
-              type="primary"
-              ghost
-              size="small"
-              @click="onShare(record)"
-              v-if="audit_status === AuditStatus.Passed"
-              >分享</Button
-            >
-            <Button
-              type="primary"
-              ghost
-              size="small"
-              @click="onCheck(record)"
-              v-else-if="audit_status === AuditStatus.Pending"
-              >审核</Button
-            >
-            <Button type="primary" ghost size="small" @click="onScan(record)" v-else>查看</Button>
-          </div>
-        </template>
-        <template v-else #cell="{ record }">
-          {{ formatTableField(column, record, true) }}
-        </template>
-      </a-table-column>
-    </template>
-  </a-table>
+          <span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
+            getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
+          }}</span>
+        </p>
+      </template>
+      <template v-else-if="column.dataIndex === 'platform'" #customRender="{ record }">
+        <template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
+        <img
+          v-else
+          width="24"
+          height="24"
+          class="rounded-4px"
+          :src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
+        />
+      </template>
+      <template v-else-if="column.dataIndex === 'compliance_level'" #customRender="{ record }">
+        <span class="cts num !color-#6D4CFE">{{
+          record.ai_review?.compliance_level ? `${record.ai_review?.compliance_level}%` : '-'
+        }}</span>
+      </template>
+      <template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
+        <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
+      </template>
+      <template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
+        <div class="flex items-center">
+          <img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
+          <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
+            record.type === EnumManuscriptType.Image ? '图文' : '视频'
+          }}</span>
+        </div>
+      </template>
+      <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
+        {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
+      </template>
+      <template
+        #customRender="{ record }"
+        v-else-if="['created_at', 'last_modified_at', 'audit_started_at', 'audit_passed_at'].includes(column.dataIndex)"
+      >
+        <span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
+      </template>
+      <template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
+        <HoverImagePreview :src="record.cover">
+          <Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
+            <template #error>
+              <img :src="icon4" class="w-full h-full" />
+            </template>
+          </Image>
+        </HoverImagePreview>
+      </template>
+      <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
+        <div class="flex items-center">
+          <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
+          <Button type="primary" ghost size="small" @click="onShare(record)" v-if="audit_status === AuditStatus.Passed"
+            >分享</Button
+          >
+          <Button
+            type="primary"
+            ghost
+            size="small"
+            @click="onCheck(record)"
+            v-else-if="audit_status === AuditStatus.Pending"
+            >审核</Button
+          >
+          <Button type="primary" ghost size="small" @click="onScan(record)" v-else>查看</Button>
+        </div>
+      </template>
+      <template v-else #customRender="{ record }">
+        {{ formatTableField(column, record, true) }}
+      </template>
+    </Column>
+  </Table>
 
   <ShareModal ref="shareModalRef" />
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { Button, Tooltip } from 'ant-design-vue';
+import { Button, Tooltip, Table, Image } from 'ant-design-vue';
+const { Column } = Table;
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import { patchWorkAuditsAudit } from '@/api/all/generationWorkshop';
@@ -183,8 +166,25 @@ const props = defineProps({
 const tableRef = ref(null);
 const shareModalRef = ref(null);
 
-const handleSorterChange = (column, order) => {
-  emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+const handleTableChange = (pagination, filters, sorter) => {
+  if (sorter && sorter.field) {
+    emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
+  }
+};
+
+const rowSelection = {
+  selectedRowKeys: computed(() => props.selectedRowKeys),
+  onSelect: (record, selected, selectedRows, nativeEvent) => {
+    emits(
+      'select',
+      selectedRows.map((row) => row.id),
+      record.id,
+      record,
+    );
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    emits('selectAll', selected);
+  },
 };
 const onDelete = (item) => {
   emits('delete', item);

src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue

@@ -1,115 +1,111 @@
 <template>
-  <a-table
+  <Table
     ref="tableRef"
-    :data="dataSource"
-    row-key="id"
-    column-resizable
+    :dataSource="dataSource"
+    rowKey="id"
     :pagination="false"
     :scroll="{ x: '100%' }"
     class="manuscript-table w-100% flex-1"
     bordered
-    @sorter-change="handleSorterChange"
+    :showSorterTooltip="false"
+    @change="handleTableChange"
   >
-    <template #empty>
+    <template #emptyText>
       <NoData text="暂无稿件" />
     </template>
-    <template #columns>
-      <a-table-column
-        v-for="column in TABLE_COLUMNS"
-        :key="column.dataIndex"
-        :data-index="column.dataIndex"
-        :fixed="column.fixed"
-        :width="column.width"
-        :min-width="column.minWidth"
-        :sortable="column.sortable"
-        :align="column.align"
-        ellipsis
-        tooltip
-      >
-        <template #title>
-          <div class="flex items-center">
-            <span class="cts mr-4px">{{ column.title }}</span>
-            <Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
-              <icon-question-circle class="tooltip-icon color-#737478" size="16" />
-            </Tooltip>
-          </div>
-        </template>
+    <Column
+      v-for="column in TABLE_COLUMNS"
+      :key="column.dataIndex"
+      :dataIndex="column.dataIndex"
+      :fixed="column.fixed"
+      :width="column.width"
+      :minWidth="column.minWidth"
+      :sorter="column.sortable"
+      :align="column.align"
+      :ellipsis="true"
+    >
+      <template #title>
+        <div class="flex items-center">
+          <span class="cts mr-4px">{{ column.title }}</span>
+          <Tooltip v-if="column.tooltip" :title="column.tooltip" placement="top">
+            <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+          </Tooltip>
+        </div>
+      </template>
 
-        <template v-if="column.dataIndex === 'create_at'" #cell="{ record }">
-          {{ exactFormatTime(record.create_at) }}
-        </template>
-        <template v-else-if="column.dataIndex === 'customer_opinion'" #cell="{ record }">
-          <p
-            class="h-28px px-8px flex items-center rounded-2px w-fit"
-            :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
-          >
-            <span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
-              getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
-            }}</span>
-          </p>
-        </template>
-        <template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
-          <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
-        </template>
-        <template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }">
-          <div
-            class="flex items-center w-fit h-28px px-8px rounded-2px"
-            :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
-          >
-            <span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
-              getStatusInfo(record.audit_status).name
-            }}</span>
-          </div>
-        </template>
-        <template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
-          <div class="flex items-center">
-            <img
-              :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
-              width="16"
-              height="16"
-              class="mr-4px"
-            />
-            <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
-              record.type === EnumManuscriptType.Image ? '图文' : '视频'
-            }}</span>
-          </div>
-        </template>
-        <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
-          {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
-        </template>
-        <template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #cell="{ record }">
-          {{ exactFormatTime(record[column.dataIndex]) }}
-        </template>
-        <template v-else-if="column.dataIndex === 'cover'" #cell="{ record }">
-          <HoverImagePreview :src="record.cover">
-            <a-image :width="64" :height="64" :src="record.cover" class="!rounded-6px" fit="cover">
-              <template #error>
-                <img :src="icon4" class="w-full h-full" />
-              </template>
-            </a-image>
-          </HoverImagePreview>
-        </template>
-        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <div class="flex items-center">
-            <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
-            <Button type="primary" ghost size="small" class="mr-8px" @click="onEdit(record)">编辑</Button>
-            <Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
-          </div>
-        </template>
-        <template v-else #cell="{ record }">
-          {{ formatTableField(column, record, true) }}
-        </template>
-      </a-table-column>
-    </template>
-  </a-table>
+      <template v-if="column.dataIndex === 'create_at'" #customRender="{ record }">
+        {{ exactFormatTime(record.create_at) }}
+      </template>
+      <template v-else-if="column.dataIndex === 'customer_opinion'" #customRender="{ record }">
+        <p
+          class="h-28px px-8px flex items-center rounded-2px w-fit"
+          :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
+        >
+          <span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
+            getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
+          }}</span>
+        </p>
+      </template>
+      <template v-else-if="column.dataIndex === 'title'" #customRender="{ record }">
+        <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
+      </template>
+      <template v-else-if="column.dataIndex === 'audit_status'" #customRender="{ record }">
+        <div
+          class="flex items-center w-fit h-28px px-8px rounded-2px"
+          :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
+        >
+          <span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
+            getStatusInfo(record.audit_status).name
+          }}</span>
+        </div>
+      </template>
+      <template v-else-if="column.dataIndex === 'type'" #customRender="{ record }">
+        <div class="flex items-center">
+          <img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
+          <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
+            record.type === EnumManuscriptType.Image ? '图文' : '视频'
+          }}</span>
+        </div>
+      </template>
+      <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #customRender="{ record }">
+        {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
+      </template>
+      <template v-else-if="['created_at', 'last_modified_at'].includes(column.dataIndex)" #customRender="{ record }">
+        {{ exactFormatTime(record[column.dataIndex]) }}
+      </template>
+      <template v-else-if="column.dataIndex === 'cover'" #customRender="{ record }">
+        <HoverImagePreview :src="record.cover">
+          <Image :width="64" :height="64" :src="record.cover" class="!rounded-6px" :preview="false">
+            <template #error>
+              <img :src="icon4" class="w-full h-full" />
+            </template>
+          </Image>
+        </HoverImagePreview>
+      </template>
+      <template v-else-if="column.dataIndex === 'operation'" #customRender="{ record }">
+        <div class="flex items-center">
+          <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
+          <Button type="primary" ghost size="small" class="mr-8px" @click="onEdit(record)">编辑</Button>
+          <Button type="primary" ghost size="small" @click="onDetail(record)">详情</Button>
+        </div>
+      </template>
+      <template v-else #customRender="{ record }">
+        {{ formatTableField(column, record, true) }}
+      </template>
+    </Column>
+  </Table>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { Button, Tooltip } from 'ant-design-vue';
+import { Button, Tooltip, Table, Image } from 'ant-design-vue';
+const { Column } = Table;
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
-import { CHECK_STATUS, EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
+import {
+  CHECK_STATUS,
+  EnumManuscriptType,
+} from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import { CUSTOMER_OPINION } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
 
 import TextOverTips from '@/components/text-over-tips';
@@ -132,8 +128,10 @@ const props = defineProps({
 
 const tableRef = ref(null);
 
-const handleSorterChange = (column, order) => {
-  emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+const handleTableChange = (pagination, filters, sorter) => {
+  if (sorter && sorter.field) {
+    emits('sorterChange', sorter.field, sorter.order === 'ascend' ? 'asc' : 'desc');
+  }
 };
 const onDelete = (item) => {
   emits('delete', item);