1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
<a-drawer
title="数据权限规则"
:width="drawerWidth"
@close="onClose"
:visible="visible">
<!-- 抽屉内容的border -->
<div
:style="{
padding:'10px',
border: '1px solid #e9e9e9',
background: '#fff',
}">
<div class="table-page-search-wrapper">
<a-form @keyup.enter.native="searchQuery">
<a-row :gutter="12">
<a-col :md="8" :sm="8">
<a-form-item label="规则名称" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
<a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
</a-form-item>
</a-col>
<a-col :md="8" :sm="8">
<a-form-item label="规则值" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}">
<a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
</a-form-item>
</a-col>
<a-col :md="7" :sm="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
谭毅彬
authored
about a year ago
30
31
<a-button type="primary" @click="searchQuery" icon="search">{{ $t('button.search') }}</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('button.reset') }}</a-button>
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
</span>
</a-col>
</a-row>
<a-row>
<a-col :md="24" :sm="24">
<a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus">添加</a-button>
</a-col>
</a-row>
</a-form>
<a-table
ref="table"
rowKey="id"
size="middle"
:columns="columns"
:dataSource="dataSource"
:loading="loading"
:rowClassName="getRowClassname">
谭毅彬
authored
about a year ago
50
<template slot="ruleValueText" slot-scope="text">
51
52
53
54
<j-ellipsis :value="text" :length="15"></j-ellipsis>
</template>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">
谭毅彬
authored
about a year ago
55
<a-icon type="edit"/>{{$t('button.edit')}}</a>
56
<a-divider type="vertical"/>
谭毅彬
authored
about a year ago
57
58
<a-popconfirm :title="$t('button.deletingIt')" @confirm="() => handleDelete(record.id)">
<a>{{$t('button.delete')}}</a>
59
60
61
62
63
64
65
66
67
68
</a-popconfirm>
</span>
</a-table>
</div>
</div>
<permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
</a-drawer>
</template>
<script>
69
70
71
import {getPermissionRuleList, queryPermissionRule} from '@/api/api'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import PermissionDataRuleModal from './modules/PermissionDataRuleModal'
72
73
74
75
76
77
78
79
80
81
82
export default {
name: 'PermissionDataRuleList',
mixins: [JeecgListMixin],
components: {
PermissionDataRuleModal
},
data() {
return {
queryParam: {},
drawerWidth: 650,
谭毅彬
authored
about a year ago
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
columns: [
{
title: '规则名称',
dataIndex: 'ruleName',
key: 'ruleName',
width: 150,
},
{
title: '规则字段',
dataIndex: 'ruleColumn',
key: 'ruleColumn',
width: 150,
},
{
title: '规则值',
dataIndex: 'ruleValue',
key: 'ruleValue',
width: 150,
scopedSlots: {customRender: "ruleValueText"}
},
{
title: this.$t('system.options'),
dataIndex: 'action',
scopedSlots: {customRender: 'action'},
align: 'center'
}
],
110
111
112
113
114
115
116
117
permId: '',
visible: false,
form: this.$form.createForm(this),
loading: false,
url: {
list: "/sys/permission/getPermRuleListByPermId",
delete: "/sys/permission/deletePermissionRule",
},
118
}
119
120
121
122
123
124
125
126
127
},
created() {
this.resetScreenSize()
},
methods: {
loadData() {
//20190908 scott for: 首次进入菜单列表的时候,不加载权限列表
if (!this.permId) {
return
128
}
129
130
131
132
133
134
135
136
let that = this
this.dataSource = []
var params = this.getQueryParams()//查询条件
getPermissionRuleList(params).then((res) => {
if (res.success) {
that.dataSource = res.result
}
})
137
},
138
139
140
141
142
143
144
145
146
edit(record) {
if (record.id) {
this.visible = true
this.permId = record.id
}
this.queryParam = {}
this.queryParam.permissionId = record.id
this.visible = true
this.loadData()
147
148
this.resetScreenSize()
},
149
150
addPermissionRule() {
this.$refs.modalForm.add(this.permId)
谭毅彬
authored
about a year ago
151
this.$refs.modalForm.title = this.$t('button.new')
152
153
154
155
156
157
158
},
searchQuery() {
var params = this.getQueryParams();
params.permissionId = this.permId;
queryPermissionRule(params).then((res) => {
if (res.success) {
this.dataSource = res.result
159
}
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
})
},
searchReset() {
this.queryParam = {}
this.queryParam.permissionId = this.permId
this.loadData(1);
},
onClose() {
this.visible = false
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize() {
let screenWidth = document.body.clientWidth
if (screenWidth < 500) {
this.drawerWidth = screenWidth
} else {
this.drawerWidth = 650
}
},
getRowClassname(record) {
if (record.status != 1) {
return "data-rule-invalid"
182
183
184
}
}
}
185
}
186
187
188
</script>
<style>
189
190
191
192
.data-rule-invalid {
background: #f4f4f4;
color: #bababa;
}
193
</style>