完善按钮和详情权限

src/views/product/shop/index.vue

@@ -226,39 +226,49 @@
           :title="`设置默认角色 - ${currentShop?.shop_name || ''}`"
           width="50%"
         >
-          <div v-loading="defaultRolesLoading">
-            <!-- 当前默认角色列表 -->
+          <div v-loading="defaultRolesLoading || rolesLoading">
+            <!-- 当前默认角色显示 -->
+            <div v-if="selectedRoleId" class="current-role-display">
+              <div class="current-role-label">当前默认角色</div>
+              <div class="current-role-value">
+                {{ availableRoles.find((r) => r.role_id === selectedRoleId)?.role_name || '未知角色' }}
+              </div>
+            </div>
+            <div v-else class="current-role-display no-role">
+              <div class="current-role-label">当前默认角色</div>
+              <div class="current-role-value">
+                暂未设置
+              </div>
+            </div>
+
+            <!-- 默认角色选择 -->
             <div class="default-roles-section">
               <div class="section-header">
-                <span style="color: white">当前默认角色</span>
-                <ElButton type="primary" @click="showAddRoleDialog"> 设置默认角色 </ElButton>
+                <span style="color: white">选择默认角色</span>
               </div>
-              <ElTable :data="currentDefaultRoles" border stripe style="margin-top: 12px">
-                <ElTableColumn prop="role_name" label="角色名称" width="150" />
-                <ElTableColumn prop="role_desc" label="角色描述" min-width="200" />
-                <ElTableColumn prop="status" label="状态" width="80">
-                  <template #default="{ row }">
-                    <ElTag
-                      :type="row.status === CommonStatus.ENABLED ? 'success' : 'info'"
-                      size="small"
-                    >
-                      {{ getStatusText(row.status) }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn label="操作" width="100" fixed="right">
-                  <template #default="{ row }">
-                    <ElButton type="danger" text size="small" @click="handleDeleteDefaultRole(row)">
-                      删除
-                    </ElButton>
-                  </template>
-                </ElTableColumn>
-                <template #empty>
-                  <div style="padding: 20px 0; color: #909399">
-                    暂无默认角色，请点击"设置默认角色"按钮进行配置
+              <ElSelect
+                v-model="selectedRoleId"
+                filterable
+                placeholder="请选择默认角色"
+                style="width: 100%; margin-top: 12px"
+                @change="handleRoleChange"
+                :loading="rolesLoading"
+              >
+                <ElOption
+                  v-for="role in availableRoles"
+                  :key="role.role_id"
+                  :label="role.role_name"
+                  :value="role.role_id"
+                >
+                  <div style="display: flex; gap: 8px; align-items: center">
+                    <span>{{ role.role_name }}</span>
+                    <ElTag type="success" size="small">客户角色</ElTag>
                   </div>
-                </template>
-              </ElTable>
+                </ElOption>
+              </ElSelect>
+              <div style="margin-top: 8px; color: #909399; font-size: 12px">
+                只能选择一个客户角色，选择后立即生效
+              </div>
             </div>
           </div>
           <template #footer>
@@ -267,41 +277,6 @@
             </div>
           </template>
         </ElDialog>
-
-        <!-- 设置默认角色对话框 -->
-        <ElDialog v-model="addRoleDialogVisible" title="设置默认角色" width="50%" append-to-body>
-          <div v-loading="rolesLoading">
-            <ElSelect
-              v-model="selectedRoleId"
-              filterable
-              placeholder="请选择默认角色"
-              style="width: 100%"
-            >
-              <ElOption
-                v-for="role in availableRoles"
-                :key="role.role_id"
-                :label="role.role_name"
-                :value="role.role_id"
-              >
-                <div style="display: flex; gap: 8px; align-items: center">
-                  <span>{{ role.role_name }}</span>
-                  <ElTag type="success" size="small">客户角色</ElTag>
-                </div>
-              </ElOption>
-            </ElSelect>
-            <div style="margin-top: 8px; color: #909399; font-size: 12px">
-              只能选择一个客户角色，设置后将覆盖之前的默认角色
-            </div>
-          </div>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton @click="addRoleDialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleAddDefaultRoles" :loading="addRoleLoading">
-                确定
-              </ElButton>
-            </div>
-          </template>
-        </ElDialog>
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -350,12 +325,9 @@
 
   // 默认角色管理相关状态
   const defaultRolesDialogVisible = ref(false)
-  const addRoleDialogVisible = ref(false)
   const defaultRolesLoading = ref(false)
   const rolesLoading = ref(false)
-  const addRoleLoading = ref(false)
   const currentShop = ref<ShopResponse | null>(null)
-  const currentDefaultRoles = ref<ShopRoleResponse[]>([])
   const availableRoles = ref<ShopRoleResponse[]>([])
   const selectedRoleId = ref<number | undefined>(undefined)
 
@@ -611,6 +583,7 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
+          disabled: !hasAuth('shop:modify_status'),
           'onUpdate:modelValue': (val: string | number | boolean) =>
             handleStatusChange(row, val as number)
         })
@@ -934,10 +907,12 @@
     const items: MenuItemType[] = []
 
     // 默认角色
-    items.push({
-      key: 'defaultRoles',
-      label: '默认角色'
-    })
+    if (hasAuth('shop:default_role')) {
+      items.push({
+        key: 'defaultRoles',
+        label: '默认角色'
+      })
+    }
 
     // 编辑
     if (hasAuth('shop:edit')) {
@@ -1015,16 +990,19 @@
   const showDefaultRolesDialog = async (row: ShopResponse) => {
     currentShop.value = row
     defaultRolesDialogVisible.value = true
-    await loadShopDefaultRoles(row.id)
+    await loadAvailableRoles()
+    await loadShopDefaultRole(row.id)
   }
 
-  // 加载店铺默认角色列表
-  const loadShopDefaultRoles = async (shopId: number) => {
+  // 加载店铺当前默认角色
+  const loadShopDefaultRole = async (shopId: number) => {
     defaultRolesLoading.value = true
     try {
       const res = await ShopService.getShopRoles(shopId)
       if (res.code === 0) {
-        currentDefaultRoles.value = res.data.roles || []
+        const roles = res.data.roles || []
+        // 如果已有默认角色，预选第一个
+        selectedRoleId.value = roles.length > 0 ? roles[0].role_id : undefined
       }
     } catch (error) {
       console.error('获取店铺默认角色失败:', error)
@@ -1034,15 +1012,6 @@
     }
   }
 
-  // 显示设置默认角色对话框
-  const showAddRoleDialog = async () => {
-    addRoleDialogVisible.value = true
-    // 如果已有默认角色，预选第一个
-    selectedRoleId.value =
-      currentDefaultRoles.value.length > 0 ? currentDefaultRoles.value[0].role_id : undefined
-    await loadAvailableRoles()
-  }
-
   // 加载可用角色列表（仅客户角色）
   const loadAvailableRoles = async () => {
     rolesLoading.value = true
@@ -1072,9 +1041,9 @@
     }
   }
 
-  // 设置默认角色
-  const handleAddDefaultRoles = async () => {
-    if (!selectedRoleId.value) {
+  // 处理角色变更 - 选择后立即生效
+  const handleRoleChange = async (roleId: number) => {
+    if (!roleId) {
       ElMessage.warning('请选择默认角色')
       return
     }
@@ -1084,52 +1053,23 @@
       return
     }
 
-    addRoleLoading.value = true
+    defaultRolesLoading.value = true
     try {
       // 传递数组，但只包含一个角色ID
       const res = await ShopService.assignShopRoles(currentShop.value.id, {
-        role_ids: [selectedRoleId.value]
+        role_ids: [roleId]
       })
       if (res.code === 0) {
         ElMessage.success('设置默认角色成功')
-        addRoleDialogVisible.value = false
-        // 刷新默认角色列表
-        await loadShopDefaultRoles(currentShop.value.id)
       }
     } catch (error) {
       console.error('设置默认角色失败:', error)
+      // 失败时重新加载当前默认角色
+      await loadShopDefaultRole(currentShop.value.id)
     } finally {
-      addRoleLoading.value = false
+      defaultRolesLoading.value = false
     }
   }
-
-  // 删除默认角色
-  const handleDeleteDefaultRole = (role: ShopRoleResponse) => {
-    ElMessageBox.confirm(`确定要删除默认角色 "${role.role_name}" 吗？`, '删除默认角色', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-      .then(async () => {
-        if (!currentShop.value) {
-          ElMessage.error('店铺信息异常')
-          return
-        }
-
-        try {
-          await ShopService.deleteShopRole(currentShop.value.id, role.role_id)
-          ElMessage.success('删除成功')
-          // 刷新默认角色列表
-          await loadShopDefaultRoles(currentShop.value.id)
-        } catch (error) {
-          console.error('删除默认角色失败:', error)
-          ElMessage.error('删除默认角色失败')
-        }
-      })
-      .catch(() => {
-        // 用户取消删除
-      })
-  }
 </script>
 
 <style lang="scss" scoped>
@@ -1137,6 +1077,36 @@
     // 店铺管理页面样式
   }
 
+  .current-role-display {
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 24px;
+    border: 2px solid var(--el-color-primary);
+
+    &.no-role {
+      border: 2px dashed var(--el-border-color);
+
+      .current-role-value {
+        color: var(--el-text-color-secondary);
+      }
+    }
+
+    .current-role-label {
+      font-size: 14px;
+      color: var(--el-text-color-secondary);
+      margin-bottom: 12px;
+      font-weight: 500;
+    }
+
+    .current-role-value {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-color-primary);
+      display: flex;
+      align-items: center;
+    }
+  }
+
   .default-roles-section {
     .section-header {
       display: flex;
@@ -1145,6 +1115,7 @@
       font-size: 14px;
       font-weight: 500;
       color: #303133;
+      margin-bottom: 4px;
     }
   }
 </style>