1.提交修改，门店用户加入分配角色 查询角色 门店

src/views/ydoyun/storeuser/index.vue

@@ -43,6 +43,31 @@
               class="!w-240px"
             />
           </el-form-item>
+          <el-form-item label="门店名称" prop="storeName">
+            <el-input
+              v-model="queryParams.storeName"
+              placeholder="请输入门店名称"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="角色" prop="roleId">
+            <el-select
+              v-model="queryParams.roleId"
+              placeholder="请选择角色"
+              clearable
+              filterable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
           <el-form-item label="创建时间" prop="createTime">
             <el-date-picker
               v-model="queryParams.createTime"
@@ -82,24 +107,77 @@
             >
               <Icon icon="ep:delete" />批量删除
             </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['ydoyun:store-user:export']"
+            >
+              <Icon icon="ep:download" />导出
+            </el-button>
           </el-form-item>
         </el-form>
       </ContentWrap>
       <ContentWrap>
         <el-table v-loading="loading" :data="list" @selection-change="handleRowCheckboxChange">
           <el-table-column type="selection" width="55" />
-          <el-table-column
-            label="用户名称"
-            align="center"
-            prop="username"
-            :show-overflow-tooltip="true"
-          />
           <el-table-column
             label="用户昵称"
             align="center"
             prop="nickname"
+            min-width="100"
+            width="130"
             :show-overflow-tooltip="true"
           />
+          <el-table-column label="用户名称" align="center" min-width="120" width="150">
+            <template #default="{ row }">
+              <div class="flex items-center justify-center gap-1 px-1">
+                <template v-if="row.username?.trim()">
+                  <span class="min-w-0 truncate text-sm">{{ row.username }}</span>
+                  <el-button
+                    link
+                    type="primary"
+                    class="!shrink-0 !p-0"
+                    title="复制"
+                    @click.stop="copyUsername(row.username)"
+                  >
+                    <Icon icon="ep:document-copy" />
+                  </el-button>
+                </template>
+                <span v-else class="text-[var(--el-text-color-placeholder)]">—</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="门店名称"
+            align="center"
+            prop="storeName"
+            min-width="120"
+            width="160"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="角色" align="center" min-width="220">
+            <template #default="{ row }">
+              <div class="flex flex-wrap items-center justify-center gap-1 px-1">
+                <span v-if="!row.roleNames?.trim()" class="text-[var(--el-text-color-placeholder)]"
+                  >—</span
+                >
+                <template v-else>
+                  <el-tag
+                    v-for="(name, idx) in splitRoleNames(row.roleNames)"
+                    :key="idx"
+                    size="small"
+                    :type="roleTagType(idx)"
+                    effect="dark"
+                    class="!m-0"
+                  >
+                    {{ name }}
+                  </el-tag>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
           <el-table-column
             label="创建时间"
@@ -108,9 +186,9 @@
             :formatter="dateFormatter"
             width="180"
           />
-          <el-table-column label="操作" align="center" width="160">
+          <el-table-column label="操作" align="center" width="280">
             <template #default="scope">
-              <div class="flex items-center justify-center">
+              <div class="flex flex-wrap items-center justify-center gap-x-1">
                 <el-button
                   type="primary"
                   link
@@ -119,9 +197,17 @@
                 >
                   <Icon icon="ep:edit" />修改
                 </el-button>
+                <el-button
+                  type="primary"
+                  link
+                  @click="handleResetPwd(scope.row)"
+                  v-hasPermi="['ydoyun:store-user:update-password']"
+                >
+                  <Icon icon="ep:key" />重置密码
+                </el-button>
                 <el-dropdown
                   @command="(command) => handleCommand(command, scope.row)"
-                  v-hasPermi="['ydoyun:store-user:delete', 'ydoyun:store-user:update-password']"
+                  v-hasPermi="['ydoyun:store-user:delete', 'system:permission:assign-user-role']"
                 >
                   <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
                   <template #dropdown>
@@ -133,10 +219,10 @@
                         <Icon icon="ep:delete" />删除
                       </el-dropdown-item>
                       <el-dropdown-item
-                        command="handleResetPwd"
-                        v-if="checkPermi(['ydoyun:store-user:update-password'])"
+                        command="handleRole"
+                        v-if="checkPermi(['system:permission:assign-user-role'])"
                       >
-                        <Icon icon="ep:key" />重置密码
+                        <Icon icon="ep:circle-check" />分配角色
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </template>
@@ -157,19 +243,55 @@
 
   <!-- 添加或修改门店-用户绑定对话框 -->
   <StoreUserForm ref="formRef" @success="getList" />
+  <!-- 分配角色（与系统用户一致，使用系统用户编号 userId） -->
+  <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
 </template>
 <script lang="ts" setup>
 import { checkPermi } from '@/utils/permission'
 import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
 import { StoreUser, StoreUserApi } from '@/api/ydoyun/storeuser'
+import * as UserApi from '@/api/system/user'
+import * as RoleApi from '@/api/system/role'
 import StoreTree from '@/views/ydoyun/store/StoreTree.vue'
 import StoreUserForm from './StoreUserForm.vue'
+import UserAssignRoleForm from '@/views/system/user/UserAssignRoleForm.vue'
 
 defineOptions({ name: 'StoreUser' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+/** 角色名称字符串拆成列表（后端用顿号拼接） */
+const splitRoleNames = (roleNames: string | undefined) => {
+  if (!roleNames?.trim()) {
+    return []
+  }
+  return roleNames
+    .split(/[、,，]/)
+    .map((s) => s.trim())
+    .filter(Boolean)
+}
+
+/** 角色标签按序使用不同主题色 */
+const ROLE_TAG_TYPES = ['primary', 'success', 'warning', 'danger', 'info'] as const
+const roleTagType = (index: number) => ROLE_TAG_TYPES[index % ROLE_TAG_TYPES.length]
+
+/** 点击用户名称复制到剪贴板 */
+const copyUsername = async (text: string | undefined) => {
+  const s = text?.trim()
+  if (!s) {
+    message.warning('无可复制内容')
+    return
+  }
+  try {
+    await navigator.clipboard.writeText(s)
+    message.success('已复制到剪贴板')
+  } catch {
+    message.error('复制失败')
+  }
+}
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数
@@ -181,12 +303,29 @@ const queryParams = reactive({
   createTime: [], // 创建时间
   username: undefined, // 用户名称
   nickname: undefined, // 用户昵称
-  mobile: undefined // 手机号码
+  mobile: undefined, // 手机号码
+  storeName: undefined as string | undefined, // 门店名称（模糊）
+  roleId: undefined as number | undefined // 按角色筛选
 })
+const roleOptions = ref<RoleApi.RoleVO[]>([])
 const queryFormRef = ref() // 搜索的表单
 const storeTreeRef = ref() // StoreTree组件引用
 const currentStoreId = ref<number | undefined>(undefined) // 当前选中的门店ID
 const e3SyncLoading = ref(false) // E3同步加载状态
+const exportLoading = ref(false)
+
+/** 导出 Excel（与当前查询条件一致，不含密码） */
+const handleExport = async () => {
+  try {
+    await message.exportConfirm()
+    exportLoading.value = true
+    const data = await StoreUserApi.exportStoreUser(queryParams)
+    download.excel(data, '门店-用户绑定.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
 
 /** 查询列表 */
 const getList = async () => {
@@ -208,6 +347,10 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
+  queryParams.storeId = undefined
+  queryParams.storeName = undefined
+  currentStoreId.value = undefined
+  storeTreeRef.value?.clearStoreSelection?.()
   queryFormRef.value?.resetFields()
   handleQuery()
 }
@@ -286,8 +429,8 @@ const handleCommand = (command: string, row: StoreUser) => {
     case 'handleDelete':
       handleDelete(row.id!)
       break
-    case 'handleResetPwd':
-      handleResetPwd(row)
+    case 'handleRole':
+      handleRole(row)
       break
     default:
       break
@@ -345,8 +488,24 @@ const handleResetPwd = async (row: StoreUser) => {
   } catch {}
 }
 
+/** 分配角色（与系统用户同一套账号，open 需传系统用户 id） */
+const assignRoleFormRef = ref()
+const handleRole = (row: StoreUser) => {
+  if (!row.userId) {
+    message.warning('用户ID不存在')
+    return
+  }
+  const payload: UserApi.UserVO = {
+    id: row.userId,
+    username: row.username,
+    nickname: row.nickname
+  } as UserApi.UserVO
+  assignRoleFormRef.value.open(payload)
+}
+
 /** 初始化 */
-onMounted(() => {
+onMounted(async () => {
+  roleOptions.value = await RoleApi.getSimpleRoleList()
   getList()
 })
 </script>