From 19d8e01e11644c66222f137abd05940cbdec0bb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Sun, 6 Jun 2021 16:27:19 +0800
Subject: [PATCH] feat(table-img): support simple show mode and more props
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

改进TableImg组件，支持简单显示模式以及更多可配置的属性。
---
 .../Table/src/components/TableImg.vue         | 55 ++++++++++++++-----
 src/views/demo/table/CustomerCell.vue         | 45 +++++++++++++--
 2 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/src/components/Table/src/components/TableImg.vue b/src/components/Table/src/components/TableImg.vue
index accb187d..da14fa6b 100644
--- a/src/components/Table/src/components/TableImg.vue
+++ b/src/components/Table/src/components/TableImg.vue
@@ -1,13 +1,32 @@
 <template>
   <div
     :class="prefixCls"
-    class="flex mx-auto items-center"
+    class="flex items-center mx-auto"
     v-if="imgList && imgList.length"
     :style="getWrapStyle"
   >
-    <PreviewGroup>
-      <template v-for="img in imgList" :key="img">
-        <Image :width="size" :src="img" />
+    <Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
+      <div class="img-div">
+        <PreviewGroup>
+          <template v-for="(img, index) in imgList" :key="img">
+            <Image
+              :width="size"
+              :style="{
+                display: index === 0 ? '' : 'none !important',
+              }"
+              :src="srcPrefix + img"
+            />
+          </template>
+        </PreviewGroup>
+      </div>
+    </Badge>
+    <PreviewGroup v-else>
+      <template v-for="(img, index) in imgList" :key="img">
+        <Image
+          :width="size"
+          :style="{ 'margin-left': index === 0 ? 0 : margin }"
+          :src="srcPrefix + img"
+        />
       </template>
     </PreviewGroup>
   </div>
@@ -17,24 +36,30 @@
   import { defineComponent, computed } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  import { Image } from 'ant-design-vue';
+  import { Image, Badge } from 'ant-design-vue';
   import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'TableImage',
-    components: { Image, PreviewGroup: Image.PreviewGroup },
+    components: { Image, PreviewGroup: Image.PreviewGroup, Badge },
     props: {
       imgList: propTypes.arrayOf(propTypes.string),
       size: propTypes.number.def(40),
+      // 是否简单显示（只显示第一张图片）
+      simpleShow: propTypes.bool,
+      // 简单模式下是否显示图片数量的badge
+      showBadge: propTypes.bool.def(true),
+      // 图片间距
+      margin: propTypes.number.def(4),
+      // src前缀，将会附加在imgList中每一项之前
+      srcPrefix: propTypes.string.def(''),
     },
     setup(props) {
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          const { size } = props;
-          const s = `${size}px`;
-          return { height: s, width: s };
-        }
-      );
+      const getWrapStyle = computed((): CSSProperties => {
+        const { size } = props;
+        const s = `${size}px`;
+        return { height: s, width: s };
+      });
 
       const { prefixCls } = useDesign('basic-table-img');
       return { prefixCls, getWrapStyle };
@@ -53,5 +78,9 @@
         border-radius: 2px;
       }
     }
+
+    .img-div {
+      display: inline-grid;
+    }
   }
 </style>
diff --git a/src/views/demo/table/CustomerCell.vue b/src/views/demo/table/CustomerCell.vue
index ef87e094..869ab255 100644
--- a/src/views/demo/table/CustomerCell.vue
+++ b/src/views/demo/table/CustomerCell.vue
@@ -7,9 +7,31 @@
           {{ record.no }}
         </Tag>
       </template>
+      <template #avatar="{ record }">
+        <Avatar
+          :size="60"
+          :src="'http://api.btstu.cn/sjtx/api.php?lx=c1&format=images&id=' + record.id"
+        />
+      </template>
       <template #img>
         <TableImg
-          :imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']"
+          :size="60"
+          :simpleShow="true"
+          :imgList="[
+            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
+            'https://picsum.photos/id/66/346/216',
+            'https://picsum.photos/id/67/346/216',
+          ]"
+        />
+      </template>
+      <template #imgs>
+        <TableImg
+          :size="60"
+          :imgList="[
+            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
+            'https://picsum.photos/id/66/346/216',
+            'https://picsum.photos/id/67/346/216',
+          ]"
         />
       </template>
 
@@ -24,7 +46,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
-  import { Tag } from 'ant-design-vue';
+  import { Tag, Avatar } from 'ant-design-vue';
   import { demoListApi } from '/@/api/demo/table';
   const columns: BasicColumn[] = [
     {
@@ -32,6 +54,12 @@
       dataIndex: 'id',
       slots: { customRender: 'id' },
     },
+    {
+      title: '头像',
+      dataIndex: 'avatar',
+      width: 100,
+      slots: { customRender: 'avatar' },
+    },
     {
       title: '分类',
       dataIndex: 'category',
@@ -46,11 +74,18 @@
       width: 120,
     },
     {
-      title: '头像',
+      title: '图片列表1',
       dataIndex: 'img',
-      width: 120,
+      helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
+      width: 140,
       slots: { customRender: 'img' },
     },
+    {
+      title: '照片列表2',
+      dataIndex: 'imgs',
+      width: 160,
+      slots: { customRender: 'imgs' },
+    },
     {
       title: '地址',
       dataIndex: 'address',
@@ -70,7 +105,7 @@
     },
   ];
   export default defineComponent({
-    components: { BasicTable, TableImg, Tag },
+    components: { BasicTable, TableImg, Tag, Avatar },
     setup() {
       const [registerTable] = useTable({
         title: '自定义列内容',
-- 
GitLab