feat(credit): 添加小程序客户用户信息展示功能

- 在模型中增加昵称、头像、手机号字段
- 实现用户信息表格列，展示头像、昵称和手机号
- 添加用户信息样式布局
- 更新导出数据配置，包含新的用户信息字段
- 调整表格列宽度和对齐方式以优化显示效果

src/api/credit/creditMpCustomer/model/index.ts

@@ -40,6 +40,12 @@ export interface CreditMpCustomer {
   deleted?: number;
   // 用户ID
   userId?: number;
+  // 昵称
+  nickname?: string;
+  // 头像
+  avatar?: string;
+  // 手机号
+  phone?: string;
   // 租户id
   tenantId?: number;
   // 创建时间

src/views/credit/creditMpCustomer/index.vue

@@ -22,8 +22,31 @@
           />
         </template>
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'userInfo'">
+            <div class="user-info">
+              <a-avatar :size="48" :src="record.avatar">
+                <template v-if="!record.avatar" #icon>
+                  <UserOutlined/>
+                </template>
+              </a-avatar>
+              <div class="user-details">
+                <h4 class="username">{{ record.nickname }}</h4>
+                <p class="user-phone">{{ record.phone }}</p>
+              </div>
+            </div>
+          </template>
           <template v-if="column.key === 'image'">
-              <a-image :src="record.image" :width="50" />
+            <a-image :src="record.image" :width="50"/>
+          </template>
+          <template v-if="column.key === 'files'">
+            <a-space>
+              <a-image
+                v-for="(file, index) in record.files"
+                :key="index"
+                :src="file"
+                :width="50"
+              />
+            </a-space>
           </template>
           <template v-if="column.key === 'status'">
             <a-tag v-if="record.status === 0" color="green">显示</a-tag>
@@ -32,7 +55,7 @@
           <template v-if="column.key === 'action'">
             <a-space>
               <a @click="openEdit(record)">修改</a>
-                <a-divider type="vertical" />
+              <a-divider type="vertical"/>
               <a-popconfirm
                 title="确定要删除此记录吗？"
                 @confirm="remove(record)"
@@ -46,57 +69,57 @@
     </a-card>
 
     <!-- 编辑弹窗 -->
-      <CreditMpCustomerEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    <CreditMpCustomerEdit v-model:visible="showEdit" :data="current" @done="reload"/>
   </a-page-header>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref, computed } from 'vue';
-  import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
-  import type {
+import {createVNode, ref, computed} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {ExclamationCircleOutlined, UserOutlined} from '@ant-design/icons-vue';
+import type {EleProTable} from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
+import type {
   DatasourceFunction,
   ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import Search from './components/search.vue';
-  import {getPageTitle} from '@/utils/common';
-  import CreditMpCustomerEdit from './components/creditMpCustomerEdit.vue';
-  import {
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import {getPageTitle} from '@/utils/common';
+import CreditMpCustomerEdit from './components/creditMpCustomerEdit.vue';
+import {
   pageCreditMpCustomer,
   listCreditMpCustomer,
   removeCreditMpCustomer,
   removeBatchCreditMpCustomer
-  } from '@/api/credit/creditMpCustomer';
-  import type { CreditMpCustomer, CreditMpCustomerParam } from '@/api/credit/creditMpCustomer/model';
-  import { exportCreditData } from '../utils/export';
+} from '@/api/credit/creditMpCustomer';
+import type {CreditMpCustomer, CreditMpCustomerParam} from '@/api/credit/creditMpCustomer/model';
+import {exportCreditData} from '../utils/export';
 
-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
-  // 表格选中数据
-  const selection = ref<CreditMpCustomer[]>([]);
-  // 当前编辑数据
-  const current = ref<CreditMpCustomer | null>(null);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 是否显示批量移动弹窗
-  const showMove = ref(false);
-  // 加载状态
-  const loading = ref(true);
-  // 搜索关键词
-  const searchText = ref('');
+// 表格选中数据
+const selection = ref<CreditMpCustomer[]>([]);
+// 当前编辑数据
+const current = ref<CreditMpCustomer | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
+// 搜索关键词
+const searchText = ref('');
 
-  // 表格数据源
-  const datasource: DatasourceFunction = ({
+// 表格数据源
+const datasource: DatasourceFunction = ({
                                           page,
                                           limit,
                                           where = {},
                                           orders,
                                           filters
                                         }) => {
-    const params: CreditMpCustomerParam = { ...(where as CreditMpCustomerParam) };
+  const params: CreditMpCustomerParam = {...(where as CreditMpCustomerParam)};
   if (filters) {
     (params as any).status = filters.status;
   }
@@ -106,16 +129,22 @@
     page,
     limit
   });
-  };
+};
 
-  // 完整的列配置（包含所有字段）
-  const allColumns = ref<ColumnItem[]>([
+// 完整的列配置（包含所有字段）
+const allColumns = ref<ColumnItem[]>([
   {
     title: 'ID',
     dataIndex: 'id',
     key: 'id',
     width: 90,
   },
+  {
+    title: '用户信息',
+    dataIndex: 'userInfo',
+    key: 'userInfo',
+    width: 300,
+  },
   {
     title: '拖欠方',
     dataIndex: 'toUser',
@@ -124,12 +153,16 @@
   {
     title: '拖欠金额',
     dataIndex: 'price',
-      key: 'price'
+    key: 'price',
+    width: 120,
+    align: 'center',
+    customRender: ({ text }) => '￥' + text
   },
   {
     title: '拖欠年数',
     dataIndex: 'years',
-      key: 'years'
+    key: 'years',
+    align: 'center'
   },
   // {
   //   title: '链接',
@@ -152,7 +185,7 @@
     title: '所在城市',
     dataIndex: 'city',
     key: 'city',
-      ellipsis: true
+    align: 'center'
   },
   // {
   //   title: '所在辖区',
@@ -164,7 +197,7 @@
     title: '附件',
     dataIndex: 'files',
     key: 'files',
-      ellipsis: true
+    align: 'center'
   },
   // {
   //   title: '是否有数据',
@@ -205,7 +238,7 @@
     align: 'center',
     sorter: true,
     ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
   },
   {
     title: '操作',
@@ -215,83 +248,85 @@
     align: 'center',
     hideInSetting: true
   }
-  ]);
+]);
 
-  // 默认显示的核心列（最多5个主要字段）
-  const defaultVisibleColumns = [
+// 默认显示的核心列（最多5个主要字段）
+const defaultVisibleColumns = [
   'id',
+  'userInfo',
   'toUser',
   'price',
   'years',
   'city',
+  'files',
   // 'status',
   'createTime',
   'action'
-  ];
+];
 
-  // 根据默认可见列过滤显示的列
-  const columns = computed(() => {
+// 根据默认可见列过滤显示的列
+const columns = computed(() => {
   return allColumns.value.filter(col =>
     defaultVisibleColumns.includes(col.dataIndex) || col.key === 'action'
   );
-  });
+});
 
-  /* 搜索 */
-  const reload = (where?: CreditMpCustomerParam) => {
+/* 搜索 */
+const reload = (where?: CreditMpCustomerParam) => {
   if (where && Object.prototype.hasOwnProperty.call(where, 'keywords')) {
     searchText.value = where.keywords ?? '';
   }
-    const targetWhere = where ?? { keywords: searchText.value || undefined };
+  const targetWhere = where ?? {keywords: searchText.value || undefined};
   selection.value = [];
-    tableRef?.value?.reload({ where: targetWhere });
-  };
+  tableRef?.value?.reload({where: targetWhere});
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: CreditMpCustomer) => {
+/* 打开编辑弹窗 */
+const openEdit = (row?: CreditMpCustomer) => {
   current.value = row ?? null;
   showEdit.value = true;
-  };
+};
 
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
+/* 打开批量移动弹窗 */
+const openMove = () => {
   showMove.value = true;
-  };
+};
 
-  /* 导出 */
-  const exportData = () => {
+/* 导出 */
+const exportData = () => {
   exportCreditData<CreditMpCustomer>({
     filename: '小程序端客户列表',
     includeCompanyName: false,
     columns: [
-        { title: 'ID', dataIndex: 'id' },
-        { title: '拖欠方', dataIndex: 'toUser' },
-        { title: '拖欠金额', dataIndex: 'price' },
-        { title: '拖欠年数', dataIndex: 'years' },
-        { title: '链接', dataIndex: 'url' },
-        { title: '状态', dataIndex: 'statusTxt' },
-        { title: '所在省份', dataIndex: 'province' },
-        { title: '所在城市', dataIndex: 'city' },
-        { title: '所在辖区', dataIndex: 'region' },
-        { title: '文件路径', dataIndex: 'files' },
-        { title: '是否有数据', dataIndex: 'hasData' },
-        { title: '备注', dataIndex: 'comments' },
-        { title: '是否推荐', dataIndex: 'recommend' },
-        { title: '排序(数字越小越靠前)', dataIndex: 'sortNumber' },
-        { title: '状态, 0正常, 1冻结', dataIndex: 'status' },
-        { title: '是否删除, 0否, 1是', dataIndex: 'deleted' },
-        { title: '用户ID', dataIndex: 'userId' },
-        { title: '创建时间', dataIndex: 'createTime' },
-        { title: '修改时间', dataIndex: 'updateTime' }
+      {title: 'ID', dataIndex: 'id'},
+      {title: '拖欠方', dataIndex: 'toUser'},
+      {title: '拖欠金额', dataIndex: 'price'},
+      {title: '拖欠年数', dataIndex: 'years'},
+      {title: '链接', dataIndex: 'url'},
+      {title: '状态', dataIndex: 'statusTxt'},
+      {title: '所在省份', dataIndex: 'province'},
+      {title: '所在城市', dataIndex: 'city'},
+      {title: '所在辖区', dataIndex: 'region'},
+      {title: '文件路径', dataIndex: 'files'},
+      {title: '是否有数据', dataIndex: 'hasData'},
+      {title: '备注', dataIndex: 'comments'},
+      {title: '是否推荐', dataIndex: 'recommend'},
+      {title: '排序(数字越小越靠前)', dataIndex: 'sortNumber'},
+      {title: '状态, 0正常, 1冻结', dataIndex: 'status'},
+      {title: '是否删除, 0否, 1是', dataIndex: 'deleted'},
+      {title: '用户ID', dataIndex: 'userId'},
+      {title: '创建时间', dataIndex: 'createTime'},
+      {title: '修改时间', dataIndex: 'updateTime'}
     ],
     fetchData: () =>
       listCreditMpCustomer({
         keywords: searchText.value || undefined
       })
   });
-  };
+};
 
-  /* 删除单个 */
-  const remove = (row: CreditMpCustomer) => {
+/* 删除单个 */
+const remove = (row: CreditMpCustomer) => {
   const hide = message.loading('请求中..', 0);
   removeCreditMpCustomer(row.id)
     .then((msg) => {
@@ -303,10 +338,10 @@
       hide();
       message.error(e.message);
     });
-  };
+};
 
-  /* 批量删除 */
-  const removeBatch = () => {
+/* 批量删除 */
+const removeBatch = () => {
   if (!selection.value.length) {
     message.error('请至少选择一条数据');
     return;
@@ -330,15 +365,15 @@
         });
     }
   });
-  };
+};
 
-  /* 查询 */
-  const query = () => {
+/* 查询 */
+const query = () => {
   loading.value = true;
-  };
+};
 
-  /* 自定义行属性 */
-  const customRow = (record: CreditMpCustomer) => {
+/* 自定义行属性 */
+const customRow = (record: CreditMpCustomer) => {
   return {
     // 行点击事件
     onClick: () => {
@@ -349,14 +384,38 @@
       openEdit(record);
     }
   };
-  };
-  query();
+};
+query();
 </script>
 
 <script lang="ts">
-  export default {
+export default {
   name: 'CreditMpCustomer'
-  };
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.user-info {
+  display: flex;
+  align-items: center;
+  padding: 6px;
+
+  .user-details {
+    margin-left: 6px;
+    flex: 1;
+
+    .username {
+      margin: 0;
+      color: #333;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .user-phone {
+      margin: 0;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>