增加角色的管理。

src/views/user/UserList.vue

@@ -5,6 +5,40 @@
         <h1>用户列表</h1>
       </div>
       
+      <!-- 添加筛选区域 -->
+      <div class="table-filter">
+        <a-form layout="inline">
+          <a-form-item label="用户角色">
+            <a-select
+              v-model:value="filterForm.role"
+              style="width: 200px"
+              placeholder="请选择角色"
+              allowClear
+              @change="handleFilterChange"
+            >
+              <a-select-option 
+                v-for="role in availableRoles" 
+                :key="role.value"
+                :value="role.value"
+              >
+                {{ role.label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+
+          <a-form-item>
+            <a-space>
+              <a-button type="primary" @click="handleSearch">
+                查询
+              </a-button>
+              <a-button @click="handleReset">
+                重置
+              </a-button>
+            </a-space>
+          </a-form-item>
+        </a-form>
+      </div>
+
       <a-table 
         :columns="columns" 
         :data-source="tableData" 
@@ -31,22 +65,56 @@
           <template v-if="column.key === 'points'">
             {{ record.points || 0 }}
           </template>
+          <template v-if="column.key === 'action'">
+            <a-button type="link" @click="handleEditRoles(record)">
+              修改角色
+            </a-button>
+          </template>
         </template>
       </a-table>
     </div>
+
+    <!-- 添加角色编辑模态框 -->
+    <a-modal
+      v-model:visible="roleModalVisible"
+      title="修改用户角色"
+      @ok="handleRolesSave"
+      @cancel="handleRolesCancel"
+      :confirmLoading="rolesSaving"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="用户角色">
+          <a-checkbox-group v-model:value="selectedRoles">
+            <a-checkbox 
+              v-for="role in availableRoles" 
+              :key="role.value"
+              :value="role.value"
+              :disabled="role.value === 'user'"
+            >
+              {{ role.label }}
+            </a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </page-container>
 </template>
 
 <script>
 import { defineComponent, ref, onMounted } from 'vue'
-import { message, Tag } from 'ant-design-vue'
+import { message, Tag, Modal, Checkbox, Select } from 'ant-design-vue'
 import { getUserList } from '@/api/user'
+import request from '@/utils/request'
 import PageContainer from '@/components/PageContainer.vue'
 
 export default defineComponent({
   components: {
     PageContainer,
-    ATag: Tag
+    ATag: Tag,
+    ACheckbox: Checkbox,
+    ACheckboxGroup: Checkbox.Group,
+    ASelect: Select,
+    ASelectOption: Select.Option
   },
   setup() {
     const loading = ref(false)
@@ -102,6 +170,12 @@ export default defineComponent({
         dataIndex: 'create_time',
         key: 'create_time',
         width: 180,
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 120,
+        fixed: 'right'
       }
     ]
 
@@ -111,13 +185,19 @@ export default defineComponent({
       return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
     }
 
+    // 添加筛选表单
+    const filterForm = ref({
+      role: undefined
+    })
+
     // 获取用户列表数据
     const fetchData = async () => {
       try {
         loading.value = true
         const params = {
           skip: (pagination.value.current - 1) * pagination.value.pageSize,
-          limit: pagination.value.pageSize
+          limit: pagination.value.pageSize,
+          role: filterForm.value.role // 添加角色筛选参数
         }
         
         const res = await getUserList(params)
@@ -159,12 +239,90 @@ export default defineComponent({
         'admin': 'red',
         'user': 'blue',
         'merchant': 'orange',
-        'operator': 'green',
+        'deliveryman': 'purple'
-        'delivery': 'purple'
       }
       return colorMap[role] || 'default'
     }
 
+    // 角色编辑相关状态
+    const roleModalVisible = ref(false)
+    const rolesSaving = ref(false)
+    const selectedRoles = ref([])
+    const currentUserId = ref(null)
+
+    // 可选角色列表
+    const availableRoles = [
+      { label: '普通用户', value: 'user' },
+      { label: '商家', value: 'merchant' },
+      { label: '配送员', value: 'deliveryman' }
+    ]
+
+    // 打开角色编辑模态框
+    const handleEditRoles = (record) => {
+      currentUserId.value = record.userid
+      selectedRoles.value = record.roles || ['user']
+      roleModalVisible.value = true
+    }
+
+    // 保存角色修改
+    const handleRolesSave = async () => {
+      try {
+        rolesSaving.value = true
+        
+        // 获取原有角色列表
+        const originalRoles = tableData.value.find(
+          user => user.userid === currentUserId.value
+        )?.roles || []
+        
+        // 如果原来有 admin 角色，确保保留
+        const newRoles = selectedRoles.value
+        if (originalRoles.includes('admin')) {
+          newRoles.push('admin')
+        }
+        
+        // 确保用户角色始终存在
+        if (!newRoles.includes('user')) {
+          newRoles.push('user')
+        }
+
+        await request.put(`/api/user/roles?user_id=${currentUserId.value}`, newRoles)
+        
+        message.success('角色修改成功')
+        roleModalVisible.value = false
+        fetchData() // 刷新列表
+      } catch (error) {
+        console.error('修改角色失败:', error)
+        message.error('修改角色失败')
+      } finally {
+        rolesSaving.value = false
+      }
+    }
+
+    // 取消角色修改
+    const handleRolesCancel = () => {
+      roleModalVisible.value = false
+      selectedRoles.value = []
+      currentUserId.value = null
+    }
+
+    // 处理筛选变化
+    const handleFilterChange = () => {
+      pagination.value.current = 1 // 重置页码
+    }
+
+    // 查询按钮点击
+    const handleSearch = () => {
+      pagination.value.current = 1
+      fetchData()
+    }
+
+    // 重置按钮点击
+    const handleReset = () => {
+      filterForm.value.role = undefined
+      pagination.value.current = 1
+      fetchData()
+    }
+
     onMounted(() => {
       fetchData()
     })
@@ -177,7 +335,18 @@ export default defineComponent({
       handleTableChange,
       formatPhone,
       getRoleName,
-      getRoleColor
+      getRoleColor,
+      roleModalVisible,
+      rolesSaving,
+      selectedRoles,
+      availableRoles,
+      handleEditRoles,
+      handleRolesSave,
+      handleRolesCancel,
+      filterForm,
+      handleFilterChange,
+      handleSearch,
+      handleReset
     }
   }
 })
@@ -206,4 +375,34 @@ export default defineComponent({
 :deep(.ant-tag) {
   margin: 2px;
 }
+
+:deep(.ant-checkbox-group) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+:deep(.ant-checkbox-wrapper) {
+  margin-left: 0 !important;
+}
+
+:deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
+  margin-left: 0 !important;
+}
+
+.table-filter {
+  margin-bottom: 16px;
+  padding: 16px 24px;
+  background: #fff;
+  border-radius: 2px;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+:deep(.ant-form-item:last-child) {
+  margin-right: 0;
+}
 </style>