Skip to content

Commit 829ef5f

Browse files
sendyasendya
committed
fix: demo role-list optimization
1 parent 6af5ada commit 829ef5f

File tree

2 files changed

+110
-75
lines changed

2 files changed

+110
-75
lines changed

‎src/views/list/RoleList.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
<a-form-item label="状态">
1313
<a-select placeholder="请选择" default-value="0">
1414
<a-select-option value="0">全部</a-select-option>
15-
<a-select-option value="1">关闭</a-select-option>
16-
<a-select-option value="2">运行中</a-select-option>
15+
<a-select-option value="1">正常</a-select-option>
16+
<a-select-option value="2">禁用</a-select-option>
1717
</a-select>
1818
</a-form-item>
1919
</a-col>
@@ -28,6 +28,7 @@
2828
</div>
2929

3030
<s-table
31+
ref="table"
3132
size="default"
3233
:columns="columns"
3334
:data="loadData"
@@ -72,7 +73,7 @@
7273
</span>
7374
</s-table>
7475

75-
<role-modal ref="modal"></role-modal>
76+
<role-modal ref="modal" @ok="handleOk"></role-modal>
7677

7778
</a-card>
7879
</template>
@@ -152,7 +153,8 @@
152153
this.visible = true
153154
},
154155
handleOk () {
155-
156+
// 新增/修改 成功时，重载列表
157+
this.$refs.table.refresh()
156158
},
157159
onChange (selectedRowKeys, selectedRows) {
158160
this.selectedRowKeys = selectedRowKeys

‎src/views/list/modules/RoleModal.vue

Lines changed: 104 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -7,76 +7,73 @@
77
@ok="handleOk"
88
@cancel="handleCancel"
99
>
10-
<a-form :form="form">
11-
12-
<a-form-item
13-
:labelCol="labelCol"
14-
:wrapperCol="wrapperCol"
15-
label='唯一识别码'
16-
hasFeedback
17-
validateStatus='success'
18-
>
19-
<a-input placeholder='唯一识别码' v-model="mdl.id" id='no' disabled="disabled"/>
20-
</a-form-item>
21-
22-
<a-form-item
23-
:labelCol="labelCol"
24-
:wrapperCol="wrapperCol"
25-
label='角色名称'
26-
hasFeedback
27-
validateStatus='success'
28-
>
29-
<a-input placeholder='起一个名字' v-model="mdl.name" id='role_name'/>
30-
</a-form-item>
31-
32-
<a-form-item
33-
:labelCol="labelCol"
34-
:wrapperCol="wrapperCol"
35-
label='状态'
36-
hasFeedback
37-
validateStatus='warning'
38-
>
39-
<a-select v-model="mdl.status">
40-
<a-select-option value='1'>正常</a-select-option>
41-
<a-select-option value='2'>禁用</a-select-option>
42-
</a-select>
43-
</a-form-item>
44-
45-
<a-form-item
46-
:labelCol="labelCol"
47-
:wrapperCol="wrapperCol"
48-
label='描述'
49-
hasFeedback
50-
>
51-
<a-textarea :rows="5" v-model="mdl.describe" placeholder="..." id='describe'/>
52-
</a-form-item>
53-
54-
<a-divider/>
55-
56-
<a-form-item
57-
:labelCol="labelCol"
58-
:wrapperCol="wrapperCol"
59-
label='拥有权限'
60-
hasFeedback
61-
>
62-
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
63-
<a-col :span="4">
64-
{{ permission.name }}：
65-
</a-col>
66-
<a-col :span="20">
67-
<a-checkbox
68-
v-if="permission.actionsOptions.length > 0"
69-
:indeterminate="permission.indeterminate"
70-
:checked="permission.checkedAll"
71-
@change="onChangeCheckAll($event, permission)">
72-
全选
73-
</a-checkbox>
74-
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
75-
</a-col>
76-
</a-row>
77-
78-
</a-form-item>
79-
</a-form>
10+
<a-spin :spinning="confirmLoading">
11+
<a-form :form="form">
12+
13+
<a-form-item
14+
:labelCol="labelCol"
15+
:wrapperCol="wrapperCol"
16+
label='唯一识别码'
17+
hasFeedback
18+
>
19+
<a-input placeholder='唯一识别码' disabled="disabled" v-decorator="[ 'id', {rules: []} ]" />
20+
</a-form-item>
21+
22+
<a-form-item
23+
:labelCol="labelCol"
24+
:wrapperCol="wrapperCol"
25+
label='角色名称'
26+
hasFeedback >
27+
<a-input placeholder='起一个名字' v-decorator="[ 'name', {rules: [{ required: true, message: '不起一个名字吗？' }] }]" />
28+
</a-form-item>
29+
30+
<a-form-item
31+
:labelCol="labelCol"
32+
:wrapperCol="wrapperCol"
33+
label='状态'
34+
hasFeedback >
35+
<a-select v-decorator="[ 'status', {rules: []} ]">
36+
<a-select-option :value="1">正常</a-select-option>
37+
<a-select-option :value="2">禁用</a-select-option>
38+
</a-select>
39+
</a-form-item>
40+
41+
<a-form-item
42+
:labelCol="labelCol"
43+
:wrapperCol="wrapperCol"
44+
label='描述'
45+
hasFeedback
46+
>
47+
<a-textarea :rows="5" placeholder="..." v-decorator="[ 'describe', { rules: [] } ]" />
48+
</a-form-item>
49+
50+
<a-divider/>
51+
52+
<a-form-item
53+
:labelCol="labelCol"
54+
:wrapperCol="wrapperCol"
55+
label='拥有权限'
56+
hasFeedback
57+
>
58+
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
59+
<a-col :span="4">
60+
{{ permission.name }}：
61+
</a-col>
62+
<a-col :span="20">
63+
<a-checkbox
64+
v-if="permission.actionsOptions.length > 0"
65+
:indeterminate="permission.indeterminate"
66+
:checked="permission.checkedAll"
67+
@change="onChangeCheckAll($event, permission)">
68+
全选
69+
</a-checkbox>
70+
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
71+
</a-col>
72+
</a-row>
73+
74+
</a-form-item>
75+
</a-form>
76+
</a-spin>
8077
</a-modal>
8178
</template>
8279

@@ -115,20 +112,56 @@
115112
this.mdl = Object.assign({}, record)
116113
this.visible = true
117114
115+
// 有权限表，处理勾选
116+
if (this.mdl.permissions && this.permissions) {
117+
// 先处理要勾选的权限结构
118+
const permissionsAction = {}
119+
this.mdl.permissions.forEach(permission => {
120+
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
121+
})
122+
// 把权限表遍历一遍，设定要勾选的权限 action
123+
this.permissions.forEach(permission => {
124+
permission.selected = permissionsAction[permission.id]
125+
})
126+
}
127+
128+
this.$nextTick(() => {
129+
this.form.setFieldsValue( _.pick(this.mdl, 'id', 'name', 'status', 'describe'))
130+
})
118131
console.log('this.mdl', this.mdl)
132+
119133
},
120134
close () {
121135
this.$emit('close')
136+
this.visible = false
122137
},
123138
handleOk () {
139+
const _this = this
140+
// 触发表单验证
124141
this.form.validateFields((err, values) => {
142+
// 验证表单没错误
125143
if (!err) {
126144
console.log('form values', values)
145+
146+
_this.confirmLoading = true
147+
// 模拟后端请求 2000 毫秒延迟
148+
new Promise((resolve) => {
149+
setTimeout(() => resolve(), 2000)
150+
}).then(() => {
151+
// Do something
152+
_this.$message.success('保存成功')
153+
_this.$emit('ok')
154+
}).catch(() => {
155+
// Do something
156+
}).finally(() => {
157+
_this.confirmLoading = false
158+
_this.close()
159+
})
127160
}
128161
})
129162
},
130163
handleCancel () {
131-
164+
this.close()
132165
},
133166
onChangeCheck (permission) {
134167
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)

0 commit comments

Comments
 (0)