添加营销系统模块
This commit is contained in:
hedekun
259
src/views/BasicData/UserRightsManagement/index.vue
Normal file
259
src/views/BasicData/UserRightsManagement/index.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card>
|
||||
<div style="margin: 0 auto;width: 850px">
|
||||
<span>角色名称:</span>
|
||||
<el-select v-model="roleName" placeholder="请选择" size="small" style="width:200px;margin-left:10px" filterable clearable @change="getmodule">
|
||||
<el-option
|
||||
v-for="item in roleNames"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
<el-button type="primary" size="small" style="float: right" @click="openModelWin">添加模块(开发使用)</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div style="margin: 0 auto;width: 850px">
|
||||
<el-transfer
|
||||
:filter-method="filterMoudles"
|
||||
v-model="value1"
|
||||
:titles="['权限列表','角色对应权限列表']"
|
||||
:props="{key: 'value'}"
|
||||
:data="modelNames"
|
||||
filterable
|
||||
@change="roleChange"/>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-dialog :title="title" :visible.sync="dialogFormVisible" center style="min-height: 300px" width="400px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px" class="demo-ruleForm">
|
||||
<el-row>
|
||||
<el-form-item label="选择模块名称" prop="选择模块名称">
|
||||
<el-select v-model="modelName" size="mini" clearable placeholder="请选择模块名称" filterable @change="getModelData">
|
||||
<el-option
|
||||
v-for="item in modelNames"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
<div style="font-size: 12px;color: red;margin: -15px 0">选择模块名称是修改，没选择是增加</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="组件" prop="组件">
|
||||
<el-input
|
||||
v-model="form.组件"
|
||||
size="small"
|
||||
style="width:200px"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="标题" prop="标题">
|
||||
<el-input
|
||||
v-model="form.标题"
|
||||
size="small"
|
||||
style="width:200px"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="图标" prop="图标">
|
||||
<el-input
|
||||
v-model="form.图标"
|
||||
size="small"
|
||||
style="width:200px"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel('form')">取消</el-button>
|
||||
<el-button type="primary" @click="submit('form')">确定</el-button>
|
||||
<el-button v-if="show" type="danger" @click="deleteModule()">删除模块</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRole, getModule, addModule, deleteModule, getModelData, addModelData, editModelData } from '@/api/BasicData/UserRightsManagement'
|
||||
import { arrayUnique2 } from '@/utils/tool'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
modelNames: [],
|
||||
value4: [],
|
||||
value1: [],
|
||||
addnum: 0,
|
||||
deletenum: 0,
|
||||
roleName: null,
|
||||
roleNames: [],
|
||||
data1: [],
|
||||
dialogFormVisible: false,
|
||||
title: '',
|
||||
form: {
|
||||
组件: '',
|
||||
标题: '',
|
||||
图标: ''
|
||||
},
|
||||
rules: {
|
||||
组件: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
标题: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
图标: [{ required: true, message: '请输入', trigger: 'blur' }]
|
||||
},
|
||||
modelName: '',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRoleName()
|
||||
this.getAllModules()
|
||||
},
|
||||
methods: {
|
||||
getRoleName() {
|
||||
getRole().then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.roleNames.push({
|
||||
value: response.data[i].角色编号,
|
||||
label: response.data[i].角色功能
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getAllModules() {
|
||||
this.modelName = ''
|
||||
this.modelNames = []
|
||||
getModule().then(response => {
|
||||
const data = response.data
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.modelNames.push({
|
||||
value: response.data[i].主模块编号,
|
||||
label: response.data[i].标题,
|
||||
disabled: true
|
||||
})
|
||||
if (i === data.length - 1) {
|
||||
this.modelNames = arrayUnique2(this.modelNames, 'value')
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
filterMoudles(query, item) {
|
||||
return item.label.indexOf(query) > -1
|
||||
},
|
||||
getmodule() {
|
||||
this.value1 = []
|
||||
if (this.roleName) {
|
||||
for (let i = 0; i < this.modelNames.length; i++) {
|
||||
this.modelNames[i].disabled = false
|
||||
}
|
||||
getModule(1, this.roleName).then(response => {
|
||||
for (let i = 0; i < response.data.length; i++) {
|
||||
this.value1.push(parseInt(response.data[i].主模块编号))
|
||||
}
|
||||
})
|
||||
} else {
|
||||
for (let i = 0; i < this.modelNames.length; i++) {
|
||||
this.modelNames[i].disabled = true
|
||||
}
|
||||
this.value1 = []
|
||||
}
|
||||
},
|
||||
roleChange(value, direction, movedKeys) {
|
||||
for (let i = 0; i < movedKeys.length; i++) {
|
||||
if (direction === 'right') {
|
||||
this.addnum = 0
|
||||
addModule(movedKeys[i], this.roleName).then(response => {
|
||||
this.addnum = this.addnum + parseInt(response.data[0].result)
|
||||
if (this.addnum === movedKeys.length) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '分配成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.deletenum = 0
|
||||
deleteModule(movedKeys[i], this.roleName).then(response => {
|
||||
this.deletenum = this.deletenum + parseInt(response.data[0].result)
|
||||
console.log(this.deletenum, movedKeys.length)
|
||||
if (this.deletenum === movedKeys.length) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '分配成功',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 开发者
|
||||
getModelData() {
|
||||
if (typeof this.modelName === 'number') {
|
||||
getModelData(this.modelName).then(response => {
|
||||
const data = response.data[0]
|
||||
this.form.组件 = data.子组件
|
||||
this.form.标题 = data.标题
|
||||
this.form.图标 = data.图标
|
||||
})
|
||||
}
|
||||
},
|
||||
openModelWin() {
|
||||
this.dialogFormVisible = true
|
||||
this.addForm('form')
|
||||
},
|
||||
cancel() { // 取消
|
||||
this.modelName = ''
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
submit(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.dialogFormVisible = false
|
||||
if (typeof this.modelName === 'string') {
|
||||
addModelData(this.form.组件, this.form.标题, this.form.图标).then(response => {
|
||||
if (response.data[0].result === '1') {
|
||||
this.$message.success('添加成功')
|
||||
this.getAllModules()
|
||||
} else {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editModelData(this.modelName, this.form.组件, this.form.标题, this.form.图标).then(response => {
|
||||
if (response.data[0].result === '1') {
|
||||
this.$message.success('修改成功')
|
||||
this.getAllModules()
|
||||
} else {
|
||||
this.$message.error('修改失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteModule() {
|
||||
console.log(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-transfer-panel {
|
||||
width:300px;
|
||||
}
|
||||
.el-transfer-panel__body {
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
.el-transfer-panel__list {
|
||||
height: 500px;
|
||||
width: 300px;
|
||||
}
|
||||
.el-transfer-panel__list.is-filterable{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user