staff/components/PermissionSettings.vue

<template>
  <view class="permission-sheet">
    <view class="permission-sheet-header">
      <text class="permission-sheet-title">权限设置</text>
      <view class="permission-sheet-staff">{{ staff ? staff.name : '' }}</view>
    </view>
    
    <scroll-view scroll-y class="permission-list">
      <!-- 常用权限 -->
      <view class="permission-category">
        <view class="category-title">常用权限</view>
        <view class="permission-items">
          <view 
            v-for="(item, index) in commonPermissions" 
            :key="index"
            class="permission-item"
            :class="{ active: hasPermission(item.value) }"
            @click="togglePermission(item.value)"
          >
            <view class="permission-icon" :class="item.colorClass">
              <text class="iconfont" :class="item.icon"></text>
            </view>
            <view class="permission-info">
              <view class="permission-name">{{ item.label }}</view>
              <view class="permission-desc">{{ item.description }}</view>
            </view>
            <view class="permission-switch">
              <text class="ri-checkbox-circle-fill" v-if="hasPermission(item.value)"></text>
              <text class="ri-checkbox-blank-circle-line" v-else></text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 其他权限 -->
      <view class="permission-category">
        <view class="category-title">其他权限</view>
        <view class="permission-items">
          <view 
            v-for="(item, index) in otherPermissions" 
            :key="index"
            class="permission-item"
            :class="{ active: hasPermission(item.value) }"
            @click="togglePermission(item.value)"
          >
            <view class="permission-icon" :class="item.colorClass">
              <text class="iconfont" :class="item.icon"></text>
            </view>
            <view class="permission-info">
              <view class="permission-name">{{ item.label }}</view>
              <view class="permission-desc">{{ item.description }}</view>
            </view>
            <view class="permission-switch">
              <text class="ri-checkbox-circle-fill" v-if="hasPermission(item.value)"></text>
              <text class="ri-checkbox-blank-circle-line" v-else></text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <view class="permission-sheet-footer">
      <button class="btn-cancel" @click="handleCancel">取消</button>
      <button class="btn-save" @click="handleSave">保存</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const props = defineProps({
  staff: {
    type: Object,
    default: () => null
  },
  permissions: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['save', 'cancel']);

// 常用权限和其他权限
const commonPermissions = computed(() => {
  return props.permissions.filter(perm => perm.isCommon);
});

const otherPermissions = computed(() => {
  return props.permissions.filter(perm => !perm.isCommon);
});

/**
 * 检查权限是否已启用
 */
const hasPermission = (permission) => {
  if (!props.staff) return false;
  return props.staff.permissions.includes(permission);
};

/**
 * 切换权限状态
 */
const togglePermission = (permission) => {
  if (!props.staff) return;
  
  emit('toggle', permission);
  
  const index = props.staff.permissions.indexOf(permission);
  
  if (index > -1) {
    // 移除已有权限
    props.staff.permissions.splice(index, 1);
  } else {
    // 添加新权限
    props.staff.permissions.push(permission);
  }
};

/**
 * 取消操作
 */
const handleCancel = () => {
  emit('cancel');
};

/**
 * 保存操作
 */
const handleSave = () => {
  emit('save', props.staff);
};
</script>

<style lang="scss" scoped>
/* 权限设置面板 */
.permission-sheet {
  padding: 20rpx;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  
  &-header {
    padding: 20rpx 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
  
  &-title {
    font-size: 32rpx;
    font-weight: bold;
  }
  
  &-staff {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
  }
}

.permission-list {
  flex: 1;
  max-height: 50vh;
}

.permission-category {
  margin: 20rpx 0;
  
  .category-title {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 15rpx;
  }
}

.permission-items {
  border-radius: 12rpx;
  background-color: #f8f8f8;
  overflow: hidden;
}

.permission-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.active {
    background-color: rgba(66, 165, 255, 0.05);
  }
}

.permission-icon {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  
  .iconfont {
    font-size: 36rpx;
    color: #fff;
  }
  
  /* 权限图标的颜色类 */
  &.delivery-color {
    background-color: #42a5ff;
  }
  
  &.maintenance-color {
    background-color: #42a5ff;
  }
  
  &.finance-color {
    background-color: #42a5ff;
  }
  
  &.admin-color {
    background-color: #42a5ff;
  }
  
  &.general-color {
    background-color: #42a5ff;
  }
}

.permission-info {
  flex: 1;
}

.permission-name {
  font-size: 28rpx;
  font-weight: 500;
}

.permission-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.permission-switch {
  width: 50rpx;
  display: flex;
  justify-content: flex-end;
  
  .ri-checkbox-circle-fill {
    font-size: 40rpx;
    color: #42a5ff;
  }
  
  .ri-checkbox-blank-circle-line {
    font-size: 40rpx;
    color: #ddd;
  }
}

.permission-sheet-footer {
  display: flex;
  padding: 20rpx 0;
  border-top: 1px solid #f0f0f0;
  
  button {
    flex: 1;
    margin: 0 10rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    border-radius: 40rpx;
  }
  
  .btn-cancel {
    background-color: #f5f5f5;
    color: #666;
  }
  
  .btn-save {
    background-color: #42a5ff;
    background-image: linear-gradient(135deg, #42a5ff, #0070F0);
    color: #fff;
  }
}
</style>