From 1b115edabec18e999da597505b65e5de0f38f99e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 16 Mar 2026 23:37:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(credit):=20=E6=B7=BB=E5=8A=A0=E5=B0=8F?=
 =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=AE=A2=E6=88=B7=E7=94=A8=E6=88=B7=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在模型中增加昵称、头像、手机号字段
- 实现用户信息表格列，展示头像、昵称和手机号
- 添加用户信息样式布局
- 更新导出数据配置，包含新的用户信息字段
- 调整表格列宽度和对齐方式以优化显示效果
---
 .../credit/creditMpCustomer/model/index.ts    |   6 +
 src/views/credit/creditMpCustomer/index.vue   | 723 ++++++++++--------
 2 files changed, 397 insertions(+), 332 deletions(-)

diff --git a/src/api/credit/creditMpCustomer/model/index.ts b/src/api/credit/creditMpCustomer/model/index.ts
index 7bedbc8..915d366 100644
--- a/src/api/credit/creditMpCustomer/model/index.ts
+++ b/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;
   // 创建时间
diff --git a/src/views/credit/creditMpCustomer/index.vue b/src/views/credit/creditMpCustomer/index.vue
index dd347cb..bd4055f 100644
--- a/src/views/credit/creditMpCustomer/index.vue
+++ b/src/views/credit/creditMpCustomer/index.vue
@@ -1,362 +1,421 @@
 <template>
   <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
-      <a-card :bordered="false" :body-style="{ padding: '16px' }">
-        <ele-pro-table
-          ref="tableRef"
-          row-key="id"
-          :columns="columns"
-          :datasource="datasource"
-          :customRow="customRow"
-          v-model:selection="selection"
-          tool-class="ele-toolbar-form"
-          class="sys-org-table"
-        >
-          <template #toolbar>
-            <search
-              @search="reload"
-              :selection="selection"
-              @add="openEdit"
-              @remove="removeBatch"
-              @batchMove="openMove"
-              @exportData="exportData"
-            />
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        v-model:selection="selection"
+        tool-class="ele-toolbar-form"
+        class="sys-org-table"
+      >
+        <template #toolbar>
+          <search
+            @search="reload"
+            :selection="selection"
+            @add="openEdit"
+            @remove="removeBatch"
+            @batchMove="openMove"
+            @exportData="exportData"
+          />
+        </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 #bodyCell="{ column, record }">
-            <template v-if="column.key === 'image'">
-              <a-image :src="record.image" :width="50" />
-            </template>
-            <template v-if="column.key === 'status'">
-              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
-              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
-            </template>
-            <template v-if="column.key === 'action'">
-              <a-space>
-                <a @click="openEdit(record)">修改</a>
-                <a-divider type="vertical" />
-                <a-popconfirm
-                  title="确定要删除此记录吗？"
-                  @confirm="remove(record)"
-                >
-                  <a class="ele-text-danger">删除</a>
-                </a-popconfirm>
-              </a-space>
-            </template>
+          <template v-if="column.key === 'image'">
+            <a-image :src="record.image" :width="50"/>
           </template>
-        </ele-pro-table>
-      </a-card>
+          <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>
+            <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+          </template>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical"/>
+              <a-popconfirm
+                title="确定要删除此记录吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </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 {
-    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 {
-    pageCreditMpCustomer,
-    listCreditMpCustomer,
-    removeCreditMpCustomer,
-    removeBatchCreditMpCustomer
-  } from '@/api/credit/creditMpCustomer';
-  import type { CreditMpCustomer, CreditMpCustomerParam } from '@/api/credit/creditMpCustomer/model';
-  import { exportCreditData } from '../utils/export';
+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 {
+  pageCreditMpCustomer,
+  listCreditMpCustomer,
+  removeCreditMpCustomer,
+  removeBatchCreditMpCustomer
+} 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)};
+  if (filters) {
+    (params as any).status = filters.status;
+  }
+  return pageCreditMpCustomer({
+    ...params,
+    ...orders,
     page,
-    limit,
-    where = {},
-    orders,
-    filters
-  }) => {
-    const params: CreditMpCustomerParam = { ...(where as CreditMpCustomerParam) };
-    if (filters) {
-      (params as any).status = filters.status;
-    }
-    return pageCreditMpCustomer({
-      ...params,
-      ...orders,
-      page,
-      limit
-    });
-  };
-
-  // 完整的列配置（包含所有字段）
-  const allColumns = ref<ColumnItem[]>([
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      width: 90,
-    },
-    {
-      title: '拖欠方',
-      dataIndex: 'toUser',
-      key: 'toUser'
-    },
-    {
-      title: '拖欠金额',
-      dataIndex: 'price',
-      key: 'price'
-    },
-    {
-      title: '拖欠年数',
-      dataIndex: 'years',
-      key: 'years'
-    },
-    // {
-    //   title: '链接',
-    //   dataIndex: 'url',
-    //   key: 'url',
-    //   ellipsis: true
-    // },
-    // {
-    //   title: '状态',
-    //   dataIndex: 'statusTxt',
-    //   key: 'statusTxt'
-    // },
-    // {
-    //   title: '所在省份',
-    //   dataIndex: 'province',
-    //   key: 'province',
-    //   ellipsis: true
-    // },
-    {
-      title: '所在城市',
-      dataIndex: 'city',
-      key: 'city',
-      ellipsis: true
-    },
-    // {
-    //   title: '所在辖区',
-    //   dataIndex: 'region',
-    //   key: 'region',
-    //   ellipsis: true
-    // },
-    {
-      title: '附件',
-      dataIndex: 'files',
-      key: 'files',
-      ellipsis: true
-    },
-    // {
-    //   title: '是否有数据',
-    //   dataIndex: 'hasData',
-    //   key: 'hasData',
-    //   width: 120
-    // },
-    // {
-    //   title: '备注',
-    //   dataIndex: 'comments',
-    //   key: 'comments',
-    //   ellipsis: true
-    // },
-    // {
-    //   title: '是否推荐',
-    //   dataIndex: 'recommend',
-    //   key: 'recommend',
-    //   width: 120
-    // },
-
-    {
-      title: '排序',
-      dataIndex: 'sortNumber',
-      key: 'sortNumber',
-      width: 120
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      width: 120
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      width: 200,
-      align: 'center',
-      sorter: true,
-      ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 180,
-      fixed: 'right',
-      align: 'center',
-      hideInSetting: true
-    }
-  ]);
-
-  // 默认显示的核心列（最多5个主要字段）
-  const defaultVisibleColumns = [
-    'id',
-    'toUser',
-    'price',
-    'years',
-    'city',
-    // 'status',
-    'createTime',
-    'action'
-  ];
-
-  // 根据默认可见列过滤显示的列
-  const columns = computed(() => {
-    return allColumns.value.filter(col =>
-      defaultVisibleColumns.includes(col.dataIndex) || col.key === 'action'
-    );
+    limit
   });
+};
 
-  /* 搜索 */
-  const reload = (where?: CreditMpCustomerParam) => {
-    if (where && Object.prototype.hasOwnProperty.call(where, 'keywords')) {
-      searchText.value = where.keywords ?? '';
-    }
-    const targetWhere = where ?? { keywords: searchText.value || undefined };
-    selection.value = [];
-    tableRef?.value?.reload({ where: targetWhere });
-  };
+// 完整的列配置（包含所有字段）
+const allColumns = ref<ColumnItem[]>([
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    width: 90,
+  },
+  {
+    title: '用户信息',
+    dataIndex: 'userInfo',
+    key: 'userInfo',
+    width: 300,
+  },
+  {
+    title: '拖欠方',
+    dataIndex: 'toUser',
+    key: 'toUser'
+  },
+  {
+    title: '拖欠金额',
+    dataIndex: 'price',
+    key: 'price',
+    width: 120,
+    align: 'center',
+    customRender: ({ text }) => '￥' + text
+  },
+  {
+    title: '拖欠年数',
+    dataIndex: 'years',
+    key: 'years',
+    align: 'center'
+  },
+  // {
+  //   title: '链接',
+  //   dataIndex: 'url',
+  //   key: 'url',
+  //   ellipsis: true
+  // },
+  // {
+  //   title: '状态',
+  //   dataIndex: 'statusTxt',
+  //   key: 'statusTxt'
+  // },
+  // {
+  //   title: '所在省份',
+  //   dataIndex: 'province',
+  //   key: 'province',
+  //   ellipsis: true
+  // },
+  {
+    title: '所在城市',
+    dataIndex: 'city',
+    key: 'city',
+    align: 'center'
+  },
+  // {
+  //   title: '所在辖区',
+  //   dataIndex: 'region',
+  //   key: 'region',
+  //   ellipsis: true
+  // },
+  {
+    title: '附件',
+    dataIndex: 'files',
+    key: 'files',
+    align: 'center'
+  },
+  // {
+  //   title: '是否有数据',
+  //   dataIndex: 'hasData',
+  //   key: 'hasData',
+  //   width: 120
+  // },
+  // {
+  //   title: '备注',
+  //   dataIndex: 'comments',
+  //   key: 'comments',
+  //   ellipsis: true
+  // },
+  // {
+  //   title: '是否推荐',
+  //   dataIndex: 'recommend',
+  //   key: 'recommend',
+  //   width: 120
+  // },
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: CreditMpCustomer) => {
-    current.value = row ?? null;
-    showEdit.value = true;
-  };
+  {
+    title: '排序',
+    dataIndex: 'sortNumber',
+    key: 'sortNumber',
+    width: 120
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    key: 'status',
+    width: 120
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 200,
+    align: 'center',
+    sorter: true,
+    ellipsis: true,
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 180,
+    fixed: 'right',
+    align: 'center',
+    hideInSetting: true
+  }
+]);
 
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
-    showMove.value = true;
-  };
+// 默认显示的核心列（最多5个主要字段）
+const defaultVisibleColumns = [
+  'id',
+  'userInfo',
+  'toUser',
+  'price',
+  'years',
+  'city',
+  'files',
+  // 'status',
+  'createTime',
+  'action'
+];
 
-  /* 导出 */
-  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' }
-      ],
-      fetchData: () =>
-        listCreditMpCustomer({
-          keywords: searchText.value || undefined
-        })
-    });
-  };
+// 根据默认可见列过滤显示的列
+const columns = computed(() => {
+  return allColumns.value.filter(col =>
+    defaultVisibleColumns.includes(col.dataIndex) || col.key === 'action'
+  );
+});
 
-  /* 删除单个 */
-  const remove = (row: CreditMpCustomer) => {
-    const hide = message.loading('请求中..', 0);
-    removeCreditMpCustomer(row.id)
-      .then((msg) => {
-        hide();
-        message.success(msg);
-        reload();
+/* 搜索 */
+const reload = (where?: CreditMpCustomerParam) => {
+  if (where && Object.prototype.hasOwnProperty.call(where, 'keywords')) {
+    searchText.value = where.keywords ?? '';
+  }
+  const targetWhere = where ?? {keywords: searchText.value || undefined};
+  selection.value = [];
+  tableRef?.value?.reload({where: targetWhere});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: CreditMpCustomer) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+/* 导出 */
+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'}
+    ],
+    fetchData: () =>
+      listCreditMpCustomer({
+        keywords: searchText.value || undefined
       })
-      .catch((e) => {
-        hide();
-        message.error(e.message);
-      });
-  };
+  });
+};
 
-  /* 批量删除 */
-  const removeBatch = () => {
-    if (!selection.value.length) {
-      message.error('请至少选择一条数据');
-      return;
-    }
-    Modal.confirm({
-      title: '提示',
-      content: '确定要删除选中的记录吗?',
-      icon: createVNode(ExclamationCircleOutlined),
-      maskClosable: true,
-      onOk: () => {
-        const hide = message.loading('请求中..', 0);
-        removeBatchCreditMpCustomer(selection.value.map((d) => d.id))
-          .then((msg) => {
-            hide();
-            message.success(msg);
-            reload();
-          })
-          .catch((e) => {
-            hide();
-            message.error(e.message);
-          });
-      }
+/* 删除单个 */
+const remove = (row: CreditMpCustomer) => {
+  const hide = message.loading('请求中..', 0);
+  removeCreditMpCustomer(row.id)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
     });
-  };
+};
 
-  /* 查询 */
-  const query = () => {
-    loading.value = true;
-  };
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchCreditMpCustomer(selection.value.map((d) => d.id))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
+    }
+  });
+};
 
-  /* 自定义行属性 */
-  const customRow = (record: CreditMpCustomer) => {
-    return {
-      // 行点击事件
-      onClick: () => {
-        // console.log(record);
-      },
-      // 行双击事件
-      onDblclick: () => {
-        openEdit(record);
-      }
-    };
+/* 查询 */
+const query = () => {
+  loading.value = true;
+};
+
+/* 自定义行属性 */
+const customRow = (record: CreditMpCustomer) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
+    }
   };
-  query();
+};
+query();
 </script>
 
 <script lang="ts">
-  export default {
-    name: 'CreditMpCustomer'
-  };
+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>