sl-ai-ui/src/views/promptpermission/index.vue

<template>
  <div class="permission-page">
    <!-- 顶部 Tabs -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="提示词用户权限" name="user" />
      <el-tab-pane label="提示词角色权限" name="role" />
    </el-tabs>

    <!-- 搜索栏 -->
    <el-form :inline="true" class="search-form">
      <el-form-item>
        <el-input style="width: 1400px" v-model="search.keyword" placeholder="请输入用户名称、角色名称" clearable />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.role" placeholder="全部" clearable>
          <el-option label="全部角色" value="" />
          <el-option label="admin" value="admin" />
          <el-option label="editor" value="editor" />
        </el-select>
      </el-form-item>
      <el-button type="plain" @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </el-form>

    <!-- 用户表格 -->
    <el-table :data="userList" border style="width: 100%">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="type" label="类型" />
      <el-table-column label="权限数量">
        <template #default="{ row }">
          <el-tag type="success">读权限: {{ row.readpermission }}</el-tag>
          <el-tag type="warning">写权限: {{ row.writepermission }}</el-tag>
          <el-tag type="danger">管理权限: {{ row.managepermission }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleAssign(row)" type="primary">查看权限</el-button>
          <el-button size="small" >编辑权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 权限分配面板 -->
    <div v-if="showAssignPanel" class="assign-panel">
      <div class="assign-header">
        权限分配矩阵-<b>{{ currentRole.name }}对象</b>
        <div style="margin-left: auto">
        <el-switch v-model="ifDisplaysinheritedpermissions" active-text="显示继承权限" inactive-text="不显示继承权限" ></el-switch>
        </div>
      </div>
        <el-divider style="margin-top: 1px"></el-divider>
      <div style="display: flex; align-items: center; gap: 10px;">
        <el-select v-model="value" placeholder="选择分类" style="width: 150px">
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
        </el-select>
        <el-button type="plain">全选</el-button>
        <el-button type="plain">全不选</el-button>

      </div>
       <div class="inheritanceSettings">
        <span>权限继承设置</span><br/>
         <el-checkbox-group v-model="inheritanceoptions" size="large">
           <el-checkbox label="0" style="color: black">从父分类继承权限</el-checkbox>
           <el-checkbox label="1"style="color: black" >从角色继承权限</el-checkbox>
         </el-checkbox-group>
         <div style="color: #777777;font-size: small">继承的权限显示为灰色，不可直接修改，如需修改，请到源头权限处修改</div>
       </div>


      <!-- 权限树结构 -->
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <el-tree :data="props.row.children" show-checkbox node-key="id"></el-tree>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="提示词分组/名称"></el-table-column>
          <el-table-column prop="readPermission" label="读权限">
            <template #default="scope">
              <el-select v-model="scope.row.readPermission" placeholder="请选择">
                <el-option label="无权限" value="无权限"></el-option>
                <el-option label="只读" value="只读"></el-option>
                <el-option label="可编辑" value="可编辑"></el-option>
                <el-option label="管理" value="管理"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="writePermission" label="写权限">
            <template #default="scope">
              <el-select v-model="scope.row.writePermission" placeholder="请选择">
                <el-option label="无权限" value="无权限"></el-option>
                <el-option label="只读" value="只读"></el-option>
                <el-option label="可编辑" value="可编辑"></el-option>
                <el-option label="管理" value="管理"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="deletePermission" label="删除权限">
            <template #default="scope">
              <el-select v-model="scope.row.deletePermission" placeholder="请选择">
                <el-option label="无权限" value="无权限"></el-option>
                <el-option label="只读" value="只读"></el-option>
                <el-option label="可编辑" value="可编辑"></el-option>
                <el-option label="管理" value="管理"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="managePermission" label="管理权限">
            <template #default="scope">
              <el-select v-model="scope.row.managePermission" placeholder="请选择">
                <el-option label="无权限" value="无权限"></el-option>
                <el-option label="只读" value="只读"></el-option>
                <el-option label="可编辑" value="可编辑"></el-option>
                <el-option label="管理" value="管理"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const ifDisplaysinheritedpermissions=ref(false)
const inheritanceoptions=ref([])
const search = ref({
  keyword: '',
  role: ''
})
const tableData=ref([
  {
    name: '内容创作',
    readPermission: '',
    writePermission: '',
    deletePermission: '',
    managePermission: '',
    children: [
      { id: 1, label: '文章撰写' },
      { id: 2, label: '创意写作模板' }
    ]
  },{
  name: '知识问答',
    readPermission: '',
    writePermission: '',
    deletePermission: '',
    managePermission: '',
    children: [
  { id: 1, label: '文章撰写' },
  { id: 2, label: '创意写作模板' }
]
}
  // 更多行...
])
const userList = ref([
  { name: 'admin', type: '角色', readpermission: 12, writepermission: 5, managepermission: 3 },
  { name: 'editor', type: '角色', readpermission: 8, writepermission: 2, managepermission: 1 },
  { name: 'zhangan', type: '用户', readpermission: 6, writepermission: 1, managepermission: 0 },
  { name: 'test', type: '用户', readpermission: 2, writepermission: 0, managepermission: 1 }
])

const currentRole = ref({})
const showAssignPanel = ref(false)
const directAssign = ref(true)
const inheritFrom = ref('user')

const handleSearch = () => {
  // 模拟过滤
  console.log('搜索：', search.value)
}

const handleAssign = (row) => {
  currentRole.value = row
  showAssignPanel.value = true
}

// 模拟分类树结构（扁平结构简化展示）
const treeData = ref([
  {
    id: 1,
    label: '内容创作',
    view: 'manage',
    edit: 'readonly',
    write: 'readonly'
  },
  {
    id: 2,
    label: 'creative-writing-template',
    view: 'manage',
    edit: 'manage',
    write: 'manage'
  },
  {
    id: 3,
    label: '文章创意',
    view: 'readonly',
    edit: 'none',
    write: 'readonly'
  },
  {
    id: 4,
    label: '写作方法论',
    view: 'manage',
    edit: 'manage',
    write: 'manage'
  }
])

const savePermission = () => {
  console.log('保存权限:', treeData.value)
}
</script>

<style scoped>
.inheritanceSettings{
  background-color: #F5F7FA;
  margin-top: 30px;
}
.permission-page {
  padding: 20px;
}
.search-form {
  margin: 20px 0;
}
.assign-panel {
  margin-top: 30px;
  border: 1px solid #ebeef5;
  padding: 20px;
  background: #fafafa;
}
.assign-header {
  display: flex;
  font-weight: bold;
  margin-bottom: 20px;
}
.assign-body {
  margin-top: 10px;
}
.assign-footer {
  margin-top: 20px;
  text-align: right;
}
</style>