增加角色列

src/views/user/UserList.vue

@@ -14,6 +14,17 @@
         row-key="userid"
       >
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'roles'">
+            <a-space>
+              <a-tag 
+                v-for="role in record.roles" 
+                :key="role"
+                :color="getRoleColor(role)"
+              >
+                {{ getRoleName(role) }}
+              </a-tag>
+            </a-space>
+          </template>
           <template v-if="column.key === 'phone'">
             {{ formatPhone(record.phone) }}
           </template>
@@ -28,13 +39,14 @@
 
 <script>
 import { defineComponent, ref, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { message, Tag } from 'ant-design-vue'
 import { getUserList } from '@/api/user'
 import PageContainer from '@/components/PageContainer.vue'
 
 export default defineComponent({
   components: {
-    PageContainer
+    PageContainer,
+    ATag: Tag
   },
   setup() {
     const loading = ref(false)
@@ -66,6 +78,12 @@ export default defineComponent({
         key: 'phone',
         width: 120,
       },
+      {
+        title: '角色',
+        dataIndex: 'roles',
+        key: 'roles',
+        width: 200,
+      },
       {
         title: '用户编号',
         dataIndex: 'user_code',
@@ -124,6 +142,29 @@ export default defineComponent({
       fetchData()
     }
 
+    // 添加角色名称映射函数
+    const getRoleName = (role) => {
+      const roleMap = {
+        'admin': '管理员',
+        'user': '普通用户',
+        'merchant': '商家',
+        'deliveryman': '配送员'
+      }
+      return roleMap[role] || role
+    }
+
+    // 添加角色颜色映射函数
+    const getRoleColor = (role) => {
+      const colorMap = {
+        'admin': 'red',
+        'user': 'blue',
+        'merchant': 'orange',
+        'operator': 'green',
+        'delivery': 'purple'
+      }
+      return colorMap[role] || 'default'
+    }
+
     onMounted(() => {
       fetchData()
     })
@@ -134,7 +175,9 @@ export default defineComponent({
       tableData,
       pagination,
       handleTableChange,
-      formatPhone
+      formatPhone,
+      getRoleName,
+      getRoleColor
     }
   }
 })
@@ -159,4 +202,8 @@ export default defineComponent({
 .user-list {
   /* 保留其他必要样式 */
 }
+
+:deep(.ant-tag) {
+  margin: 2px;
+}
 </style>