Commit df952b01 authored by shangtx's avatar shangtx

feat: 角色管理

parent b7035df8
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
</a-col> </a-col>
<a-col :span="23"> <a-col :span="23">
<a-form-item label="服务详情"> <a-form-item label="服务详情">
<RichText ref="RichText" :height="700" /> <RichText ref="RichText" :height="900" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
......
...@@ -3,40 +3,58 @@ ...@@ -3,40 +3,58 @@
<a-form @submit="handleSubmit" :form="form" class="cust-detail-form"> <a-form @submit="handleSubmit" :form="form" class="cust-detail-form">
<header-tool-bar> <header-tool-bar>
<span class="cust-title" slot="title"> <span class="cust-title" slot="title">
<a-icon type="hdd"/>角色管理明细 <a-icon type="hdd" />角色管理明细
</span> </span>
<a-button-group slot="extra"> <a-button-group slot="extra">
<a-button type='primary' htmlType='submit'>保存</a-button> <a-button type="primary" htmlType="submit">保存</a-button>
<a-button type="primary" @click="back" ghost>返回</a-button> <a-button type="primary" @click="back" ghost>返回</a-button>
</a-button-group> </a-button-group>
</header-tool-bar> </header-tool-bar>
<a-card title="基础数据" class="cust-normal-card"> <a-card title="基础数据" class="cust-normal-card">
<a-row> <a-row>
<a-col :span="6"> <a-col :span="6">
<a-form-item <a-form-item v-bind="formItemLayout" label="编号">
v-bind="formItemLayout"
label='编号'>
<a-input <a-input
v-decorator="['sysRole.code', {initialValue:sysRole.code, rules: [{ required: true, message: '请输入编号' }]}]"/> v-decorator="[
'sysRole.code',
{
initialValue: sysRole.code,
rules: [{ required: true, message: '请输入编号' }]
}
]"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-form-item <a-form-item v-bind="formItemLayout" label="名称">
v-bind="formItemLayout"
label='名称'>
<a-input <a-input
v-decorator="['sysRole.name', {initialValue:sysRole.name,rules: [{ required: true, message: '请输入名称' }]}]"/> v-decorator="[
'sysRole.name',
{
initialValue: sysRole.name,
rules: [{ required: true, message: '请输入名称' }]
}
]"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"> <a-col :span="6">
<a-form-item <a-form-item v-bind="formItemLayout" label="状态">
v-bind="formItemLayout"
label='状态'>
<a-select <a-select
:disabled="this.id==1" :disabled="this.id == 1"
v-decorator="['sysRole.available', {initialValue:sysRole.available,rules: [{ required: true, message: '请选择状态' }]}]" v-decorator="[
'sysRole.available',
{
initialValue: sysRole.available,
rules: [{ required: true, message: '请选择状态' }]
}
]"
> >
<a-select-option v-for="item in typeList" :key="item.id" :value="item.valueInt">{{item.name}} <a-select-option
v-for="item in typeList"
:key="item.id"
:value="item.valueInt"
>{{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
...@@ -44,12 +62,17 @@ ...@@ -44,12 +62,17 @@
</a-row> </a-row>
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<a-form-item <a-form-item v-bind="formmarkItemLayout" label="备注">
v-bind="formmarkItemLayout"
label='备注'>
<a-textarea <a-textarea
:autoSize="{ minRows: 2, maxRows: 6 }" :autoSize="{ minRows: 2, maxRows: 6 }"
v-decorator="['sysRole.remark', {initialValue:sysRole.remark,rules: [{ required: true, message: '请输入备注' }]}]"/> v-decorator="[
'sysRole.remark',
{
initialValue: sysRole.remark,
rules: [{ required: true, message: '请输入备注' }]
}
]"
/>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
...@@ -63,11 +86,23 @@ ...@@ -63,11 +86,23 @@
:pagination="false" :pagination="false"
:defaultExpandAllRows="true" :defaultExpandAllRows="true"
class="cust-card-table" class="cust-card-table"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect,onSelect:rowSelect,onSelectAll:rowSelectAll}" :scroll="{ y: $store.getters.size[1] - 450 }"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: updateSelect,
onSelect: rowSelect,
onSelectAll: rowSelectAll
}"
bordered bordered
> >
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a-checkbox v-for="item in record.sysBusinessOperateList" :key="item.id" :checked="item.selected" @change="onChange(item,record)">{{item.name}}</a-checkbox> <a-checkbox
v-for="item in record.sysBusinessOperateList"
:key="item.id"
:checked="item.selected"
@change="onChange(item, record)"
>{{ item.name }}</a-checkbox
>
</span> </span>
</a-table> </a-table>
</a-card> </a-card>
...@@ -76,209 +111,233 @@ ...@@ -76,209 +111,233 @@
</template> </template>
<script> <script>
import HeaderToolBar from '@/components/page/HeaderToolBar' import HeaderToolBar from '@/components/page/HeaderToolBar'
import {getDetail, save} from '@/api/system/sysRole' import { getDetail, save } from '@/api/system/sysRole'
let listPathName = 'sysrolelist'; let listPathName = 'sysRoleList'
const columns = [ const columns = [
{title: '业务名称', width: 300, dataIndex: 'name'}, { title: '业务名称', width: 300, dataIndex: 'name' },
{title: '操作', key: 'operation', dataIndex: 'sysBusinessOperateList', scopedSlots: {customRender: 'action'}} {
] title: '操作',
key: 'operation',
dataIndex: 'sysBusinessOperateList',
scopedSlots: { customRender: 'action' }
}
]
export default { export default {
name: "SysRoleDetail", name: 'SysRoleDetail',
components: {HeaderToolBar}, components: { HeaderToolBar },
data() { data() {
return { return {
id: 0, id: 0,
checkedList: [], checkedList: [],
form: this.$form.createForm(this), form: this.$form.createForm(this),
sysRole: {}, sysRole: {},
itemList: [], itemList: [],
saveOperatedList: [], saveOperatedList: [],
typeList: [], typeList: [],
columns: columns, columns: columns,
currentEditDate: {}, currentEditDate: {},
selectedRowKeys: [], selectedRowKeys: [],
formItemLayout: { formItemLayout: {
labelCol: { labelCol: {
sm: {span: 8}, sm: { span: 8 }
},
wrapperCol: {
sm: {span: 16},
},
}, },
formmarkItemLayout: { wrapperCol: {
labelCol: { sm: { span: 16 }
sm: {span: 2}, }
}, },
wrapperCol: { formmarkItemLayout: {
sm: {span: 22}, labelCol: {
}, sm: { span: 2 }
},
wrapperCol: {
sm: { span: 22 }
} }
} }
}
},
activated() {
this.form.resetFields()
this.selectedRowKeys = []
this.initData()
},
deactivated() {
this.itemList = []
},
methods: {
onChange(item, record) {
item.selected = !item.selected
if (item.selected == true) {
if (
record.sysBusinessOperateList.filter((opt) => opt.selected != true)
.length == 0
) {
this.selectedRowKeys.push(item.businessId)
}
} else {
this.selectedRowKeys = this.selectedRowKeys.filter(
(key) => key != record.id
)
}
}, },
activated() { initData() {
this.form.resetFields() this.id = this.$route.query.id || 0
this.selectedRowKeys = [] getDetail(this.id).then((resp) => {
this.initData() if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
}, this.sysRole = resp.data.sysRole
deactivated() { this.sysRole.available = this.sysRole.available ? 1 : 0
this.itemList = [] this.itemList = []
}, if (resp.data.sysBusinessTreeList) {
methods: { this.itemList = resp.data.sysBusinessTreeList[0].children
onChange(item, record) {
item.selected = !item.selected
if (item.selected == true) {
if (record.sysBusinessOperateList.filter(opt => opt.selected != true).length == 0) {
this.selectedRowKeys.push(item.businessId)
} }
this.checkChildren(this.itemList)
this.checkSelectRow(this.itemList)
this.typeList = resp.data.codeMap[SYS_CONST.CODE.SYS_AVAILABLE_STATUS]
}
})
},
checkChildren(list) {
list.map((m) => {
if (m.children.length == 0) {
m.children = null
} else { } else {
this.selectedRowKeys = this.selectedRowKeys.filter(key => key != record.id) this.checkChildren(m.children)
} }
}, })
initData() { },
this.id = this.$route.query.id || 0 checkSelectRow(businessList) {
getDetail(this.id).then(resp => { let count = 0
if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) { businessList.map((m) => {
this.sysRole = resp.data.sysRole if (
this.sysRole.available = this.sysRole.available?1:0 m.children == null &&
this.itemList = [] m.sysBusinessOperateList.filter((opt) => opt.selected != true)
if (resp.data.sysBusinessTreeList) { .length == 0
this.itemList = resp.data.sysBusinessTreeList[0].children ) {
} this.selectedRowKeys.push(m.id)
this.checkChildren(this.itemList) count++
this.checkSelectRow(this.itemList) }
if (m.children != null) {
this.typeList = resp.data.codeMap[SYS_CONST.CODE.SYS_AVAILABLE_STATUS] let checkedCount = this.checkSelectRow(m.children)
} if (checkedCount === m.children.length) {
})
},
checkChildren(list){
list.map(m=>{
if (m.children.length==0) {
m.children = null
}else {
this.checkChildren(m.children)
}
})
},
checkSelectRow(businessList) {
let count = 0;
businessList.map(m => {
if (m.children == null && m.sysBusinessOperateList.filter(opt => opt.selected != true).length == 0) {
this.selectedRowKeys.push(m.id) this.selectedRowKeys.push(m.id)
count++; count++
} }
if (m.children != null) {
let checkedCount = this.checkSelectRow(m.children);
if (checkedCount === m.children.length){
this.selectedRowKeys.push(m.id);
count++;
}
}
})
return count;
},
handleSubmit(e) {
e.preventDefault();
this.getSelectedOperate();
if (this.saveOperatedList.length == 0) {
this.$notification.error({message: '系统提示', description: "请至少勾选一个业务操作", duration: 4,});
return
} }
this.form.validateFieldsAndScroll((err, values) => { })
if (!err) { return count
let saveData = { },
sysRole: this.$valueCopy(this.sysRole, values.sysRole), handleSubmit(e) {
saveOperatedList: this.saveOperatedList e.preventDefault()
} this.getSelectedOperate()
save(saveData).then(resp => { if (this.saveOperatedList.length == 0) {
if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) { this.$notification.error({
this.$notification.success({message: '系统提示', description: "保存成功", duration: 4,}); message: '系统提示',
this.$router.push({name: listPathName, query: {isModify: this.id != 0}}) description: '请至少勾选一个业务操作',
} duration: 4
})
}
})
},
updateSelect(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys
},
rowSelect(record, selected) {
let curList = this.getCurList(record.id, this.itemList);
curList.map(m => {
if (m.id == record.id) {
m.sysBusinessOperateList.map(o => {
o.selected = selected
})
if (m.children != null) {
this.selectOperateByBusiness(m.children, selected)
}
}
}) })
}, return
getCurList(curId, parantList) { }
let curList = [] this.form.validateFieldsAndScroll((err, values) => {
for (let i = 0; i < parantList.length; i++) { if (!err) {
let item = parantList[i] let saveData = {
if (item.id == curId) { sysRole: this.$valueCopy(this.sysRole, values.sysRole),
curList = parantList saveOperatedList: this.saveOperatedList
} else if (item.children != null) {
curList = this.getCurList(curId, item.children)
}
if (curList.length > 0) {
break;
} }
save(saveData).then((resp) => {
if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
this.$notification.success({
message: '系统提示',
description: '保存成功',
duration: 4
})
this.$router.push({
name: listPathName,
query: { isModify: this.id != 0 }
})
}
})
} }
return curList; })
}, },
selectOperateByBusiness(businessList, selected) { updateSelect(selectedRowKeys) {
businessList.map(m => { this.selectedRowKeys = selectedRowKeys
if (selected) { },
this.selectedRowKeys.push(m.id) rowSelect(record, selected) {
} else { let curList = this.getCurList(record.id, this.itemList)
this.selectedRowKeys = this.selectedRowKeys.filter(s => s != m.id) curList.map((m) => {
} if (m.id == record.id) {
m.sysBusinessOperateList.map(o => { m.sysBusinessOperateList.map((o) => {
o.selected = selected o.selected = selected
}) })
if (m.children != null) { if (m.children != null) {
this.selectOperateByBusiness(m.children, selected) this.selectOperateByBusiness(m.children, selected)
} }
}) }
}, })
rowSelectAll(selected) { },
this.selectOperateByBusiness(this.itemList, selected) getCurList(curId, parantList) {
}, let curList = []
back() { for (let i = 0; i < parantList.length; i++) {
this.$router.push({name: listPathName}) let item = parantList[i]
}, if (item.id == curId) {
modifyItem(type, item) { curList = parantList
if (type == SYS_CONST.OPT_TYPE.ADD) { } else if (item.children != null) {
this.itemList.push(item) curList = this.getCurList(curId, item.children)
}
if (curList.length > 0) {
break
}
}
return curList
},
selectOperateByBusiness(businessList, selected) {
businessList.map((m) => {
if (selected) {
this.selectedRowKeys.push(m.id)
} else { } else {
this.$valueCopy(this.currentEditDate, item) this.selectedRowKeys = this.selectedRowKeys.filter((s) => s != m.id)
} }
}, m.sysBusinessOperateList.map((o) => {
getSelectedOperate() { o.selected = selected
this.saveOperatedList = []
this.getSaveOperateByList(this.itemList)
},
getSaveOperateByList(businessList) {
businessList.map(m => {
m.sysBusinessOperateList.map(o => {
if (o.selected == true) {
this.saveOperatedList.push(o.id);
}
})
if (m.children != null) {
this.getSaveOperateByList(m.children)
}
}) })
if (m.children != null) {
this.selectOperateByBusiness(m.children, selected)
}
})
},
rowSelectAll(selected) {
this.selectOperateByBusiness(this.itemList, selected)
},
back() {
this.$router.push({ name: listPathName })
},
modifyItem(type, item) {
if (type == SYS_CONST.OPT_TYPE.ADD) {
this.itemList.push(item)
} else {
this.$valueCopy(this.currentEditDate, item)
} }
},
getSelectedOperate() {
this.saveOperatedList = []
this.getSaveOperateByList(this.itemList)
},
getSaveOperateByList(businessList) {
businessList.map((m) => {
m.sysBusinessOperateList.map((o) => {
if (o.selected == true) {
this.saveOperatedList.push(o.id)
}
})
if (m.children != null) {
this.getSaveOperateByList(m.children)
}
})
} }
}; }
}
</script> </script>
...@@ -75,7 +75,6 @@ ...@@ -75,7 +75,6 @@
</span> </span>
<span slot="tags" slot-scope="text, record"> <span slot="tags" slot-scope="text, record">
<a-switch <a-switch
:disabled="record.id==1"
checkedChildren="启用" checkedChildren="启用"
unCheckedChildren="禁用" unCheckedChildren="禁用"
@click="setStatus(record)" @click="setStatus(record)"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment