|
|
@@ -0,0 +1,267 @@
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <div>
|
|
|
+ <a-form layout="horizontal">
|
|
|
+ <div :class="advanced ? null : 'fold'">
|
|
|
+ <a-row :gutter="48">
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="角色ID"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}"
|
|
|
+ >
|
|
|
+ <a-input placeholder="请输入"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="状态"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}"
|
|
|
+ >
|
|
|
+ <a-select placeholder="请选择">
|
|
|
+ <a-select-option value="1">正常</a-select-option>
|
|
|
+ <a-select-option value="2">禁用</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <span style="margin-top: 3px;">
|
|
|
+ <a-button type="primary">查询</a-button>
|
|
|
+ <a-button style="margin-left: 8px">重置</a-button>
|
|
|
+ </span>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <s-table
|
|
|
+ size="default"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ slot="expandedRowRender"
|
|
|
+ slot-scope="record"
|
|
|
+ style="margin: 0">
|
|
|
+ <a-row
|
|
|
+ :gutter="24"
|
|
|
+ :style="{ marginBottom: '12px' }">
|
|
|
+ <a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
|
|
|
+ <a-col :span="4">
|
|
|
+ <span>{{ role.permissionName }}：</span>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="20" v-if="role.actionEntitySet.length > 0">
|
|
|
+ <a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="20" v-else>-</a-col>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a @click="handleEdit(record)">编辑</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-dropdown>
|
|
|
+ <a class="ant-dropdown-link">
|
|
|
+ 更多 <a-icon type="down" />
|
|
|
+ </a>
|
|
|
+ <a-menu slot="overlay">
|
|
|
+ <a-menu-item>
|
|
|
+ <a href="javascript:;">详情</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a href="javascript:;">禁用</a>
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item>
|
|
|
+ <a href="javascript:;">删除</a>
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </a-dropdown>
|
|
|
+ </span>
|
|
|
+ </s-table>
|
|
|
+
|
|
|
+ <a-modal
|
|
|
+ title="操作"
|
|
|
+ style="top: 20px;"
|
|
|
+ :width="800"
|
|
|
+ v-model="visible"
|
|
|
+ @ok="handleOk"
|
|
|
+ >
|
|
|
+ <a-form :autoFormCreate="(form)=>{this.form = form}">
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ label='唯一识别码'
|
|
|
+ hasFeedback
|
|
|
+ validateStatus='success'
|
|
|
+ >
|
|
|
+ <a-input placeholder='唯一识别码' v-model="mdl.id" id='no' disabled="disabled" />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ label='角色名称'
|
|
|
+ hasFeedback
|
|
|
+ validateStatus='success'
|
|
|
+ >
|
|
|
+ <a-input placeholder='起一个名字' v-model="mdl.name" id='role_name' />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ label='状态'
|
|
|
+ hasFeedback
|
|
|
+ validateStatus='warning'
|
|
|
+ >
|
|
|
+ <a-select v-model="mdl.status">
|
|
|
+ <a-select-option value='1'>正常</a-select-option>
|
|
|
+ <a-select-option value='2'>禁用</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ label='描述'
|
|
|
+ hasFeedback
|
|
|
+ >
|
|
|
+ <a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id='describe'/>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <a-divider />
|
|
|
+
|
|
|
+ <a-form-item
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ label='拥有权限'
|
|
|
+ hasFeedback
|
|
|
+ >
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <template v-for="(permission, index) in mdl.permissions">
|
|
|
+ <a-col :span="4">
|
|
|
+ {{ permission.permissionName }}：
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="20">
|
|
|
+ <a-checkbox-group :options="permission.actionsOptions"/>
|
|
|
+ </a-col>
|
|
|
+ </template>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import STable from '@/components/table/'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "TableList",
|
|
|
+ components: {
|
|
|
+ STable
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
|
|
|
+
|
|
|
+ visible: false,
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 },
|
|
|
+ },
|
|
|
+ form: null,
|
|
|
+ mdl: {},
|
|
|
+
|
|
|
+ // 高级搜索 展开/关闭
|
|
|
+ advanced: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParam: {},
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '唯一识别码',
|
|
|
+ dataIndex: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '角色名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ sorter: true
|
|
|
+ }, {
|
|
|
+ title: '操作',
|
|
|
+ width: '150px',
|
|
|
+ dataIndex: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ return this.$http.get('/role', {
|
|
|
+ params: Object.assign(parameter, this.queryParam)
|
|
|
+ }).then(res => {
|
|
|
+ return res.result
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRows: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleEdit (record) {
|
|
|
+ this.mdl = Object.assign({}, record)
|
|
|
+
|
|
|
+ this.mdl.permissions.forEach(permission => {
|
|
|
+ permission.actionsOptions = permission.actionEntitySet.map(action => {
|
|
|
+ return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(this.mdl)
|
|
|
+ this.visible = true
|
|
|
+ },
|
|
|
+ handleOk () {
|
|
|
+
|
|
|
+ },
|
|
|
+ onChange (selectedRowKeys, selectedRows) {
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
+ this.selectedRows = selectedRows
|
|
|
+ },
|
|
|
+ toggleAdvanced () {
|
|
|
+ this.advanced = !this.advanced
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ /*
|
|
|
+ 'selectedRows': function (selectedRows) {
|
|
|
+ this.needTotalList = this.needTotalList.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ total: selectedRows.reduce( (sum, val) => {
|
|
|
+ return sum + val[item.dataIndex]
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ */
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
Sendya