企业路由
parent
1964f57010
commit
6c4f0bb95f
|
|
@ -5,7 +5,7 @@
|
|||
"author": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.112",
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.69 --open",
|
||||
"start": "npm run dev",
|
||||
"unit": "jest --config test/unit/jest.conf.js --coverage",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||
},
|
||||
"dependencies": {
|
||||
"@icon-park/vue": "^1.4.2",
|
||||
"@riophae/vue-treeselect": "^0.4.0",
|
||||
"axios": "^0.21.1",
|
||||
"default-passive-events": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -45,6 +45,9 @@ Vue.use(BaiduMap, {
|
|||
ak: 'OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr'
|
||||
})
|
||||
|
||||
import { install } from '@icon-park/vue/es/all'
|
||||
install(Vue, 'icon')
|
||||
|
||||
import Print from 'vue-print-nb'// 打印
|
||||
Vue.use(Print) // 注册
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,360 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-document-add" @click="handleCreate(0)">新增组</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" @click="handleUpdate()">修改组</el-button>
|
||||
<el-button v-if="ROLE_ID!=1" type="primary" icon="el-icon-delete" @click="handleDelete()">删除组</el-button>
|
||||
<el-button type="primary" icon="el-icon-collection-tag" @click="handleTree('routeqx',activeTab)">账号菜单权限</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="role in roleList" :name="role.role_ID" :key="role.role_ID" :label="role.role_NAME">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="roleList_z"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
border
|
||||
fit
|
||||
highlight-current-row>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="role_NAME" label="角色" width="180" />
|
||||
<el-table-column prop="rnumber" label="编码" />
|
||||
<el-table-column label="增" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-document-add" circle @click="handleTree('routeqxButton',row.role_ID,'add_qx')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="删" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-delete" circle @click="handleTree('routeqxButton',row.role_ID,'del_qx')"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="改" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-edit" circle @click="handleTree('routeqxButton',row.role_ID,'edit_qx')"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-view" circle @click="handleTree('routeqxButton',row.role_ID,'cha_qx')"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="290">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" icon="el-icon-collection-tag" size="mini" @click="handleTree('routeqx',scope.row.role_ID)">权限</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.role_ID, scope.row.role_NAME)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleCreate(activeTab)">新增</el-button>
|
||||
</div>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRoleList" />
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormVisible" :title="dialogType==='edit'?'编辑角色':'新增角色'" width="600px">
|
||||
<el-form ref="roleForm" :model="form" :rules="formRules" label-width="120px" style="width: 500px;">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off" placeholder="这里输入名称..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number :min="0" v-model="form.sort" style="width: 100%;" controls-position="right" autocomplete="off" placeholder="这里输入排序..." />
|
||||
</el-form-item>
|
||||
<!-- v-if="!isEditGroup" -->
|
||||
<el-form-item :label="insertLabel">
|
||||
<el-radio-group v-model="form.isMain">
|
||||
<el-radio :label="'1'">是</el-radio>
|
||||
<el-radio :label="'0'">否</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmRole">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormTree" title="授权权限" width="500px">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="ROUTE_ID"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormTree = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmTree">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
export default {
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
activeTab: '1',
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
total: 0,
|
||||
roleList: [], // list 列出组(页面横向排列的一级组)
|
||||
roleList_z: [], // list 列出此组下架角色
|
||||
pd: [], // map
|
||||
ROLE_ID: '1', // 角色ID
|
||||
dialogFormVisible: false,
|
||||
dialogType: 'add',
|
||||
dialogFormTree: false,
|
||||
isEditGroup: true,
|
||||
insertLabel: '是否主角色',
|
||||
form: {
|
||||
id: '',
|
||||
parent_id: '',
|
||||
name: '',
|
||||
sort: 0,
|
||||
isMain: '0'
|
||||
},
|
||||
formRules: {
|
||||
name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'blur' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
],
|
||||
sort: [
|
||||
{ required: true, message: '排序不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
treeData: [],
|
||||
confirmTreeForm: {
|
||||
url: '',
|
||||
id: '',
|
||||
msg: ''
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'PARENT_NAME'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRoleList(this.ROLE_ID)
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
this.ROLE_ID = tab.name
|
||||
this.roleList_z = []
|
||||
this.listQuery.page = 1
|
||||
this.getRoleList(this.ROLE_ID)
|
||||
},
|
||||
getRoleList(ROLE_ID) {
|
||||
this.listLoading = true
|
||||
this.ROLE_ID = ROLE_ID
|
||||
requestFN(
|
||||
'/role/list',
|
||||
{
|
||||
ROLE_ID: ROLE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.activeTab = ROLE_ID
|
||||
this.roleList = data.roleList
|
||||
this.roleList_z = data.roleList_z.filter((item, index) => index < this.listQuery.limit * this.listQuery.page && index >= this.listQuery.limit * (this.listQuery.page - 1))
|
||||
this.total = data.roleList_z.length
|
||||
this.pd = data.pd
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleCreate(parentId) {
|
||||
this.dialogType = 'add'
|
||||
if (parentId == 0) {
|
||||
this.isEditGroup = true
|
||||
this.insertLabel = '是否主角色组'
|
||||
} else {
|
||||
this.isEditGroup = false
|
||||
this.insertLabel = '是否主角色'
|
||||
}
|
||||
this.form.name = ''
|
||||
this.form.sort = ''
|
||||
this.form.isMain = '0'
|
||||
this.form.parent_id = parentId
|
||||
this.$refs.roleForm && this.$refs.roleForm.clearValidate()
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleUpdate(role) {
|
||||
this.$refs.roleForm && this.$refs.roleForm.clearValidate()
|
||||
this.dialogType = 'edit'
|
||||
if (role && role.role_ID) {
|
||||
this.isEditGroup = false
|
||||
this.form.id = role.role_ID
|
||||
this.form.parent_id = role.parent_ID
|
||||
this.form.name = role.role_NAME
|
||||
this.form.isMain = role.ismain
|
||||
this.form.sort = role.sort
|
||||
} else {
|
||||
for (const role of this.roleList) {
|
||||
if (role.role_ID === this.activeTab) {
|
||||
this.isEditGroup = true
|
||||
this.form.id = role.role_ID
|
||||
this.form.name = role.role_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleDelete(roleId, roleName) {
|
||||
if (roleId) {
|
||||
this.form.id = roleId
|
||||
this.form.name = roleName
|
||||
} else {
|
||||
for (let i = 0; i < this.roleList.length; i++) {
|
||||
if (this.roleList[i].role_ID === this.activeTab) {
|
||||
this.form.id = this.roleList[i].role_ID
|
||||
this.form.name = this.roleList[i].role_NAME
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$confirm('确定要删除[' + this.form.name + ']吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/role/delete',
|
||||
{
|
||||
ROLE_ID: this.form.id
|
||||
}
|
||||
).then(() => {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.listLoading = false
|
||||
this.roleList = []
|
||||
this.roleList_z = []
|
||||
this.listQuery.page = 1
|
||||
this.getRoleList('1')
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
handleTree(url, roldId, msg) {
|
||||
if (url === 'routeqx') {
|
||||
this.confirmTreeForm.str = 'saveRouteqx'
|
||||
} else {
|
||||
this.confirmTreeForm.str = 'saveRouteqxButton'
|
||||
}
|
||||
this.confirmTreeForm.id = roldId
|
||||
this.confirmTreeForm.msg = msg || ''
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/role/' + url,
|
||||
{
|
||||
ROLE_ID: roldId,
|
||||
msg: msg
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.treeData = data.routeList
|
||||
this.dialogFormTree = true
|
||||
this.$nextTick(() => {
|
||||
var checkedMenuIds = []
|
||||
this.getCheckNode(this.treeData, checkedMenuIds)
|
||||
this.$refs.tree.setCheckedKeys(checkedMenuIds) // 设置目前勾选的节点
|
||||
})
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
confirmRole() {
|
||||
this.$refs.roleForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/role/' + this.dialogType,
|
||||
{
|
||||
ROLE_ID: this.form.id,
|
||||
ROLE_NAME: this.form.name,
|
||||
PARENT_ID: this.form.parent_id,
|
||||
SORT: this.form.sort,
|
||||
ISMAIN: this.form.isMain
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message({
|
||||
message: '设置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.listLoading = false
|
||||
this.dialogFormVisible = false
|
||||
this.roleList = []
|
||||
this.roleList_z = []
|
||||
this.listQuery.page = 1
|
||||
this.getRoleList(this.form.parent_id)
|
||||
// if (data.pd.PARENT_ID === '0') {
|
||||
//
|
||||
// } else {
|
||||
// this.getRoleList(this.form.parent_id)
|
||||
// }
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmTree() {
|
||||
this.listLoading = true
|
||||
console.log('this.$refs.tree.getCheckedKeys() -> ' + this.$refs.tree.getCheckedKeys())
|
||||
console.log('this.$refs.tree.getHalfCheckedKeys() -> ' + this.$refs.tree.getHalfCheckedKeys())
|
||||
const ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
|
||||
requestFN(
|
||||
'/role/' + this.confirmTreeForm.str,
|
||||
{
|
||||
ROLE_ID: this.confirmTreeForm.id,
|
||||
routeIds: ids.join(','),
|
||||
msg: this.confirmTreeForm.msg
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message({
|
||||
message: '设置成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.listLoading = false
|
||||
this.dialogFormTree = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getCheckNode(routeList, checkedMenuIds) {
|
||||
if (routeList != null && routeList.length > 0) {
|
||||
for (let i = 0; i < routeList.length; i++) {
|
||||
const menu = routeList[i]
|
||||
if ((menu.children == null || menu.children.length === 0) && menu.checked.toString() === 'true') {
|
||||
checkedMenuIds.push(menu.ROUTE_ID)
|
||||
}
|
||||
if (menu.children != null && menu.children.length > 0) {
|
||||
this.getCheckNode(menu.children, checkedMenuIds)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,310 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-document-add" @click="handleCreate(0)">新增组</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" @click="handleUpdate()">修改组</el-button>
|
||||
<el-button v-if="ROLE_ID!=1" type="primary" icon="el-icon-delete" @click="handleDelete()">删除组</el-button>
|
||||
<el-button type="primary" icon="el-icon-collection-tag" @click="handleTree('routeqx',activeTab)">账号菜单权限</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="role in roleList" :name="role.role_ID" :key="role.role_ID" :label="role.role_NAME">
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="roleList_z"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
border
|
||||
fit
|
||||
highlight-current-row>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="role_NAME" label="角色" width="180" />
|
||||
<el-table-column prop="rnumber" label="编码" />
|
||||
<el-table-column label="增" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-document-add" circle @click="handleTree('b4Button',row.role_ID,'add_qx')" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="删" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-delete" circle @click="handleTree('b4Button',row.role_ID,'del_qx')"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="改" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-edit" circle @click="handleTree('b4Button',row.role_ID,'edit_qx')"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查" align="center" width="60">
|
||||
<template slot-scope="{row}">
|
||||
<el-button icon="el-icon-view" circle @click="handleTree('b4Button',row.role_ID,'cha_qx')"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="290">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" icon="el-icon-collection-tag" size="mini" @click="handleTree('routeqx',scope.row.role_ID)">权限</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row.role_ID, scope.row.role_NAME)">编辑</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.role_ID, scope.row.role_NAME)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleCreate(activeTab)">新增</el-button>
|
||||
</div>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRoleList" />
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormVisible" :title="dialogType==='edit'?'修改组':'新增组'" width="600px">
|
||||
<el-form ref="roleForm" :model="form" :rules="formRules" label-width="120px" style="width: 500px;">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off" placeholder="这里输入名称..." />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmRole">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormTree" title="授权'新增'权限" width="500px">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="ROUTE_ID"/>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormTree = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirmTree">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
export default {
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
activeTab: '1',
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
total: 0,
|
||||
roleList: [], // list 列出组(页面横向排列的一级组)
|
||||
roleList_z: [], // list 列出此组下架角色
|
||||
pd: [], // map
|
||||
ROLE_ID: '1', // 角色ID
|
||||
dialogFormVisible: false,
|
||||
dialogType: 'add',
|
||||
dialogFormTree: false,
|
||||
form: {
|
||||
id: '',
|
||||
parent_id: '',
|
||||
name: ''
|
||||
},
|
||||
formRules: {
|
||||
name: [
|
||||
{ required: true, message: '名不能为空', trigger: 'change' },
|
||||
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
treeData: [],
|
||||
confirmTreeForm: {
|
||||
url: '',
|
||||
id: '',
|
||||
msg: ''
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRoleList(this.ROLE_ID)
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
this.ROLE_ID = tab.name
|
||||
this.roleList_z = []
|
||||
this.listQuery.page = 1
|
||||
this.getRoleList(this.ROLE_ID)
|
||||
},
|
||||
getRoleList(ROLE_ID) {
|
||||
this.listLoading = true
|
||||
this.ROLE_ID = ROLE_ID
|
||||
requestFN(
|
||||
'/role/list',
|
||||
{
|
||||
ROLE_ID: ROLE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.activeTab = ROLE_ID
|
||||
this.roleList = data.roleList
|
||||
this.roleList_z = data.roleList_z.filter((item, index) => index < this.listQuery.limit * this.listQuery.page && index >= this.listQuery.limit * (this.listQuery.page - 1))
|
||||
this.total = data.roleList_z.length
|
||||
this.pd = data.pd
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleCreate(parentId) {
|
||||
this.dialogType = 'add'
|
||||
this.form.name = ''
|
||||
this.form.parent_id = parentId
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleUpdate(roleId, roleName) {
|
||||
this.dialogType = 'edit'
|
||||
if (roleId) {
|
||||
this.form.id = roleId
|
||||
this.form.name = roleName
|
||||
} else {
|
||||
for (const role of this.roleList) {
|
||||
if (role.role_ID === this.activeTab) {
|
||||
this.form.id = role.role_ID
|
||||
this.form.name = role.role_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleDelete(roleId, roleName) {
|
||||
if (roleId) {
|
||||
this.form.id = roleId
|
||||
this.form.name = roleName
|
||||
} else {
|
||||
for (const role of this.roleList) {
|
||||
if (role.role_ID === this.activeTab) {
|
||||
this.form.id = role.role_ID
|
||||
this.form.name = role.role_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$confirm('确定要删除[' + this.form.name + ']吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/role/delete',
|
||||
{
|
||||
ROLE_ID: this.form.id
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.roleList = []
|
||||
this.roleList_z = []
|
||||
this.listQuery.page = 1
|
||||
this.getRoleList('1')
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
handleTree(url, roldId, msg) {
|
||||
if (url === 'routeqx') {
|
||||
this.confirmTreeForm.str = 'saveRouteqx'
|
||||
} else {
|
||||
this.confirmTreeForm.str = 'saveB4Button'
|
||||
}
|
||||
this.confirmTreeForm.id = roldId
|
||||
this.confirmTreeForm.msg = msg || ''
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/role/' + url,
|
||||
{
|
||||
ROLE_ID: roldId,
|
||||
msg: msg
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.treeData = data.routeList
|
||||
this.dialogFormTree = true
|
||||
this.$nextTick(() => {
|
||||
var checkedMenuIds = []
|
||||
this.getCheckNode(this.treeData, checkedMenuIds)
|
||||
this.$refs.tree.setCheckedKeys(checkedMenuIds) // 设置目前勾选的节点
|
||||
})
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
confirmRole() {
|
||||
this.$refs.roleForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/role/' + this.dialogType,
|
||||
{
|
||||
ROLE_ID: this.form.id,
|
||||
ROLE_NAME: this.form.name,
|
||||
PARENT_ID: this.form.parent_id
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.dialogFormVisible = false
|
||||
this.roleList = []
|
||||
this.roleList_z = []
|
||||
this.listQuery.page = 1
|
||||
this.getRoleList(this.form.parent_id)
|
||||
// if (data.pd.PARENT_ID === '0') {
|
||||
//
|
||||
// } else {
|
||||
// this.getRoleList(this.form.parent_id)
|
||||
// }
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmTree() {
|
||||
this.listLoading = true
|
||||
const ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
|
||||
requestFN(
|
||||
'/role/' + this.confirmTreeForm.str,
|
||||
{
|
||||
ROLE_ID: this.confirmTreeForm.id,
|
||||
routeIds: ids.join(','),
|
||||
msg: this.confirmTreeForm.msg
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.dialogFormTree = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getCheckNode(routeList, checkedMenuIds) {
|
||||
if (routeList != null && routeList.length > 0) {
|
||||
for (let i = 0; i < routeList.length; i++) {
|
||||
const menu = routeList[i]
|
||||
if ((menu.children == null || menu.children.length === 0) && menu.checked.toString() === 'true') {
|
||||
checkedMenuIds.push(menu.ROUTE_ID)
|
||||
}
|
||||
if (menu.children != null && menu.children.length > 0) {
|
||||
this.getCheckNode(menu.children, checkedMenuIds)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;"/>
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
tooltip-effect="dark"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
:reserve-selection="true"
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center"/>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="NAME" label="名称" />
|
||||
<el-table-column prop="SHIRO_KEY" label="权限标识" />
|
||||
<el-table-column prop="BZ" label="备注" />
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-show="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-show="del" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.FHBUTTON_ID, row.NAME)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||||
<el-button type="info" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
|
||||
<!-- <el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="batchDel">删除</el-button>-->
|
||||
</div>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='edit'?'修改':'新增'" width="600px">
|
||||
<el-form ref="form" :rules="rules" :model="pd" label-width="110px" style="width: 500px;">
|
||||
<el-form-item label="按钮名称" prop="NAME">
|
||||
<el-input v-model="pd.NAME" placeholder="这里输入按钮名称..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限标识" prop="SHIRO_KEY">
|
||||
<el-input v-model="pd.SHIRO_KEY" placeholder="这里输入权限标识..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注说明">
|
||||
<el-input v-model="pd.BZ" placeholder="这里输入备注说明..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签代码">
|
||||
<el-input v-model="code" :autosize="{ minRows: 4}" type="textarea" disabled/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormEdit = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listLoading: true,
|
||||
add: false,
|
||||
del: false,
|
||||
edit: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
varList: [],
|
||||
pd: [],
|
||||
multipleSelectionAll: [], // 所有选中的数据包含跨页数据
|
||||
multipleSelection: [], // 当前页选中的数据
|
||||
dialogFormEdit: false,
|
||||
dialogType: 'add',
|
||||
rules: {
|
||||
NAME: [{ required: true, message: '按钮名称不能为空', trigger: 'blur' }],
|
||||
SHIRO_KEY: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
|
||||
},
|
||||
MENU_ID: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
code: {
|
||||
get() {
|
||||
if (this.pd.SHIRO_KEY) {
|
||||
return '<a v-show="' + this.pd.SHIRO_KEY + '" class="btn btn-light btn-sm">按钮</a>'
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
set(val) {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.MENU_ID = this.$parent.MENU_ID
|
||||
this.getList(this.ROLE_ID)
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
getRowKey(row) {
|
||||
return row.FHBUTTON_ID
|
||||
},
|
||||
handleAdd() {
|
||||
this.dialogType = 'add'
|
||||
this.pd = {}
|
||||
this.code = ''
|
||||
this.dialogFormEdit = true
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'list'
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.dialogType = 'edit'
|
||||
this.pd = Object.assign({}, row)
|
||||
this.dialogFormEdit = true
|
||||
},
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fhbutton/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
MENU_ID: this.MENU_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
this.pd = data.pd
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fhbutton/' + this.dialogType,
|
||||
{
|
||||
FHBUTTON_ID: this.pd.FHBUTTON_ID,
|
||||
NAME: this.pd.NAME,
|
||||
SHIRO_KEY: this.pd.SHIRO_KEY,
|
||||
BZ: this.pd.BZ,
|
||||
MENU_ID: this.MENU_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.dialogFormEdit = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id, name) {
|
||||
this.$confirm('确定要删除[' + name + ']吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fhbutton/delete',
|
||||
{
|
||||
FHBUTTON_ID: id
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.FHBUTTON_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/fhbutton/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'fhbutton:add,fhbutton:del,fhbutton:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.fhbuttonfhadminadd
|
||||
this.del = data.fhbuttonfhadmindel
|
||||
this.edit = data.fhbuttonfhadminedit
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,592 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<div class="filter-row">
|
||||
<el-button type="primary" class="mb" @click="fnAddRouter({}, '新增一级菜单')">
|
||||
新增一级菜单
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="ROUTE_ID"
|
||||
tooltip-effect="dark"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column label="名称" prop="meta.title" />
|
||||
<el-table-column label="路由地址" prop="path" show-overflow-tooltip />
|
||||
<el-table-column label="文件位置" show-overflow-tooltip>
|
||||
<template slot-scope="{row}">
|
||||
{{
|
||||
row.component === "children"
|
||||
? "/src/components/children/index.vue"
|
||||
: "/src/views/" + row.component + ".vue"
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="序号" prop="ROUTE_ORDER" width="50" />
|
||||
<el-table-column label="是否显示在菜单">
|
||||
<template slot-scope="{row}">
|
||||
{{
|
||||
row.meta && row.meta.isMenu !== false && !row.meta.activeMenu && row.path
|
||||
? "是"
|
||||
: "否"
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="400">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-if="row.meta && row.meta.isMenu !== false && !row.meta.activeMenu && row.path" type="success" icon="el-icon-picture-outline-round" size="mini" @click="handleEditIcon(row.ROUTE_ID)">图标</el-button>
|
||||
<el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="fnAddRouter(row, '编辑')">编辑</el-button>
|
||||
<el-button v-if="row.component === 'children'" type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="fnAddRouter(row, '新增下级')">新增下级</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.ROUTE_ID, row.meta.title)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="60%"
|
||||
@close="dialog.visible = false">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="dialog.form"
|
||||
:rules="dialog.rules"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item label="上级菜单" prop="parentMenuId">
|
||||
{{ dialog.form.parentName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="title">
|
||||
<el-input v-model="dialog.form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路由地址(从/开始)" prop="path">
|
||||
<el-input v-model="dialog.form.path" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="路由重定向地址(重定向到哪一个路由，子级路由第一个的路由地址，（没有子级路由不需要填写）)"
|
||||
prop="redirect"
|
||||
>
|
||||
<el-input v-model="dialog.form.redirect" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="文件位置(路由对应的组件位置（必填，views下的文件，views和.vue不需要填写，如果是children只需要填写children）)"
|
||||
prop="component"
|
||||
>
|
||||
<el-input v-model="dialog.form.component" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="model(归类到头部导航哪一级中（一级路由需要填写）)"
|
||||
prop="model"
|
||||
>
|
||||
<el-select v-model="dialog.form.model" clearable>
|
||||
<el-option
|
||||
v-for="item in MENU"
|
||||
:key="item.model"
|
||||
:label="item.title"
|
||||
:value="item.model"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限标识" prop="permissionId">
|
||||
<el-input v-model="dialog.form.permissionId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="序号" prop="index">
|
||||
<el-input v-model.number="dialog.form.index" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="选中的菜单(当前路由选中状态是哪个导航（只有当父级路由或祖先级路由’当前菜单是否显示子菜单为否‘时需要填写，设置‘当前菜单是否显示子菜单为否’的路由地址）)"
|
||||
prop="activeMenu"
|
||||
>
|
||||
<el-input v-model="dialog.form.activeMenu" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示当前菜单" prop="isMenu">
|
||||
<el-select v-model="dialog.form.isMenu">
|
||||
<el-option :value="true" label="是" />
|
||||
<el-option :value="false" label="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否需要登录才可以访问" prop="isLogin">
|
||||
<el-select v-model="dialog.form.isLogin">
|
||||
<el-option :value="true" label="是" />
|
||||
<el-option :value="false" label="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前页是否显示在面包屑中" prop="breadcrumb">
|
||||
<el-select v-model="dialog.form.breadcrumb">
|
||||
<el-option :value="true" label="是" />
|
||||
<el-option :value="false" label="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前页是否显示面包屑" prop="isBreadcrumb">
|
||||
<el-select v-model="dialog.form.isBreadcrumb">
|
||||
<el-option :value="true" label="是" />
|
||||
<el-option :value="false" label="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="当前菜单是否显示子菜单(菜单有增删改查等等子路由的情况下需要勾选为否)"
|
||||
prop="isSubMenu"
|
||||
>
|
||||
<el-select v-model="dialog.form.isSubMenu">
|
||||
<el-option :value="true" label="是" />
|
||||
<el-option :value="false" label="否" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialog.visible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="iconDialog.visible"
|
||||
:close-on-click-modal="false"
|
||||
title="设置图标"
|
||||
width="40%"
|
||||
@close="iconDialog.visible = false">
|
||||
<div>
|
||||
<a href="https://iconpark.oceanengine.com/official" target="_blank">
|
||||
点击此处
|
||||
</a>
|
||||
查看所有图标
|
||||
</div>
|
||||
<div class="mt">
|
||||
<el-form label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="图标名称">
|
||||
<el-input v-model="iconDialog.KEYWORDS" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button type="primary" @click="fnSearchIcon">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="icon_container">
|
||||
<div v-for="(item, index) in iconDialog.svgList" :key="index">
|
||||
<el-tooltip :content="item.title">
|
||||
<div
|
||||
:class="{ active: iconDialog.iconIndex === index }"
|
||||
class="item"
|
||||
@click="iconDialog.iconIndex = index"
|
||||
>
|
||||
<component
|
||||
:is="'icon-' + item.name"
|
||||
:stroke-width="3"
|
||||
theme="filled"
|
||||
fill="#a5b2c2"
|
||||
size="38"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt flex-end">
|
||||
<pagination
|
||||
:total="iconDialog.pagination.total"
|
||||
:page.sync="iconDialog.pagination.currentPage"
|
||||
:limit.sync="iconDialog.pagination.pageSize"
|
||||
small
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@pagination="fnSearchIcon" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="confirmIcon">保存</el-button>
|
||||
<el-button @click="iconDialog.visible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import icons from '@icon-park/vue/icons.json'
|
||||
import { requestFN } from '@/utils/request'
|
||||
|
||||
export default {
|
||||
name: 'Icons',
|
||||
components: { Pagination },
|
||||
data() {
|
||||
return {
|
||||
activeName: '1',
|
||||
listLoading: false, // 加载状态
|
||||
radio: 1,
|
||||
dialogType: 'add',
|
||||
// 列表
|
||||
varList: [], // list
|
||||
ROUTE_ID: '0', // 主键ID
|
||||
add: false,
|
||||
del: false,
|
||||
edit: false,
|
||||
MENU: [
|
||||
{ title: '双重预防', model: 'prevention' },
|
||||
{ title: '教育培训', model: 'educationAndTraining' },
|
||||
{ title: '高危作业管理', model: 'highRisk' },
|
||||
{ title: '监测预警', model: 'monitor' },
|
||||
{ title: '综合管理', model: 'comprehensive' }
|
||||
],
|
||||
dialog: {
|
||||
visible: false,
|
||||
title: '',
|
||||
form: {
|
||||
parentMenuId: '',
|
||||
parentName: '',
|
||||
parentIdS: '',
|
||||
title: '',
|
||||
path: '',
|
||||
redirect: '',
|
||||
component: '',
|
||||
model: '',
|
||||
permissionId: '',
|
||||
index: '',
|
||||
activeMenu: '',
|
||||
menuId: '',
|
||||
isMenu: true,
|
||||
isLogin: true,
|
||||
breadcrumb: true,
|
||||
isBreadcrumb: true,
|
||||
isSubMenu: true
|
||||
},
|
||||
rules: {
|
||||
component: [
|
||||
{ required: true, message: '请输入文件位置', trigger: 'blur' }
|
||||
],
|
||||
index: [
|
||||
{ required: true, message: '请输入序号', trigger: 'blur' },
|
||||
{ type: 'number', message: '序号必须是数字', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
iconDialog: {
|
||||
visible: false,
|
||||
svgList: [],
|
||||
pagination: {
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
total: icons.length
|
||||
},
|
||||
iconIndex: '',
|
||||
menuId: '',
|
||||
KEYWORDS: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList(this.ROUTE_ID)
|
||||
this.fnInitIcon()
|
||||
},
|
||||
methods: {
|
||||
indexMethod(index) {
|
||||
return index + 1
|
||||
},
|
||||
handleNodeClick(node, data, value) {
|
||||
this.handleEdit(node.id)
|
||||
},
|
||||
fnAddRouter(row, type) {
|
||||
this.resetForm()
|
||||
this.dialogType = 'add'
|
||||
if (type === '编辑') {
|
||||
this.dialog.form = {
|
||||
menuId: row.ROUTE_ID,
|
||||
index: +row.ROUTE_ORDER,
|
||||
permissionId: row.SHIRO_KEY,
|
||||
path: row.path,
|
||||
redirect: row.REDIRECT,
|
||||
component: row.component,
|
||||
parentMenuId: row.PARENT_ID,
|
||||
parentName: row.PARENT_NAME,
|
||||
parentIdS: row.PARENT_IDS,
|
||||
title: row.meta.title,
|
||||
model: row.meta.model,
|
||||
activeMenu: row.meta.activeMenu,
|
||||
isMenu: row.meta.isMenu,
|
||||
isLogin: row.meta.isLogin,
|
||||
breadcrumb: row.meta.breadcrumb,
|
||||
isBreadcrumb: row.meta.isBreadcrumb,
|
||||
isSubMenu: row.meta.isSubMenu
|
||||
}
|
||||
} else if (type === '新增下级') {
|
||||
this.dialog.form.parentMenuId = row.ROUTE_ID
|
||||
this.dialog.form.parentName = row.meta.title
|
||||
this.dialog.form.parentIdS = (this.isEmpty(row.PARENT_IDS) ? ',' : row.PARENT_IDS) + row.ROUTE_ID + ','
|
||||
if (row.meta.isSubMenu === false) this.dialog.form.activeMenu = row.path
|
||||
else this.dialog.form.activeMenu = row.meta.activeMenu || ''
|
||||
if (row.children) {
|
||||
this.dialog.form.index = row.children.length + 1
|
||||
} else {
|
||||
this.dialog.form.index = 1
|
||||
}
|
||||
} else {
|
||||
this.dialog.form.parentMenuId = row.PARENT_ID === '0' ? '' : row.PARENT_ID
|
||||
this.dialog.form.parentName = '（无）'
|
||||
this.dialog.form.parentIdS = ''
|
||||
this.dialog.form.index = this.varList.length + 1
|
||||
}
|
||||
this.dialog.visible = true
|
||||
this.dialog.title = type
|
||||
},
|
||||
isEmpty(value) {
|
||||
return (
|
||||
value === undefined ||
|
||||
value === null ||
|
||||
(typeof value === 'object' && Object.keys(value).length === 0) ||
|
||||
(typeof value === 'string' && value.trim().length === 0)
|
||||
)
|
||||
},
|
||||
handleEdit(ROUTE_ID) {
|
||||
this.resetForm()
|
||||
this.dialogType = 'edit'
|
||||
requestFN(
|
||||
'/route/toEdit',
|
||||
{
|
||||
ROUTE_ID: ROUTE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.dialog.form = data.pd // copy obj
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
this.dialog.visible = true
|
||||
},
|
||||
|
||||
buttonList(ROUTE_ID) {
|
||||
this.$parent.ROUTE_ID = ROUTE_ID
|
||||
this.$parent.activeName = 'button'
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.formRef.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
console.log(this.dialog.form)
|
||||
const meta = {
|
||||
title: this.dialog.form.title,
|
||||
model: this.dialog.form.model,
|
||||
activeMenu: this.dialog.form.activeMenu,
|
||||
isMenu: this.dialog.form.isMenu,
|
||||
isLogin: this.dialog.form.isLogin,
|
||||
breadcrumb: this.dialog.form.breadcrumb,
|
||||
isBreadcrumb: this.dialog.form.isBreadcrumb,
|
||||
isSubMenu: this.dialog.form.isSubMenu
|
||||
}
|
||||
const params = {
|
||||
NAME: this.dialog.form.title,
|
||||
PATH: this.dialog.form.path,
|
||||
PARENT_ID: this.dialog.form.parentMenuId || '0',
|
||||
PARENT_IDS: this.dialog.form.parentIdS,
|
||||
ROUTE_ORDER: this.dialog.form.index,
|
||||
COMPONENT: this.dialog.form.component,
|
||||
SHIRO_KEY: this.dialog.form.permissionId,
|
||||
REDIRECT: this.dialog.form.redirect,
|
||||
ROUTE_STATE: this.dialog.form.isMenu ? 1 : 0,
|
||||
SHOW_MODEL: this.dialog.form.model,
|
||||
META: JSON.stringify(meta)
|
||||
}
|
||||
requestFN(
|
||||
'/route/' + this.dialogType,
|
||||
{
|
||||
...params,
|
||||
ROUTE_ID: this.dialog.form.ROUTE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.listLoading = false
|
||||
this.dialog.visible = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id, name) {
|
||||
this.$confirm('确定要删除[' + name + ']吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/route/delete',
|
||||
{
|
||||
ROUTE_ID: id
|
||||
}
|
||||
).then(() => {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.listLoading = false
|
||||
this.getList(this.ROUTE_ID)
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
fnInitIcon() {
|
||||
this.iconDialog.pagination = {
|
||||
currentPage: 1,
|
||||
pageSize: 50,
|
||||
total: icons.length
|
||||
}
|
||||
this.iconDialog.svgList = this.paging(
|
||||
icons,
|
||||
this.iconDialog.pagination.currentPage,
|
||||
this.iconDialog.pagination.pageSize
|
||||
)
|
||||
console.log(this.iconDialog.svgList)
|
||||
},
|
||||
fnSearchIcon() {
|
||||
const { KEYWORDS } = this.iconDialog
|
||||
const filterIcons = icons.filter(
|
||||
(item) =>
|
||||
item.name.indexOf(KEYWORDS) !== -1 || item.title.indexOf(KEYWORDS) !== -1
|
||||
)
|
||||
this.iconDialog.svgList = this.paging(
|
||||
filterIcons,
|
||||
this.iconDialog.pagination.currentPage,
|
||||
this.iconDialog.pagination.pageSize
|
||||
)
|
||||
this.iconDialog.pagination.total = filterIcons.length
|
||||
},
|
||||
paging(list, currentPage, pageSize) {
|
||||
return list.filter((item, index) => {
|
||||
return (
|
||||
index < +currentPage * +pageSize &&
|
||||
index >= (+currentPage - 1) * +pageSize
|
||||
)
|
||||
})
|
||||
},
|
||||
|
||||
handleEditIcon(ROUTE_ID) {
|
||||
this.iconDialog.visible = true
|
||||
this.iconDialog.iconIndex = ''
|
||||
this.ROUTE_ID = ROUTE_ID
|
||||
},
|
||||
confirmIcon() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/route/icon',
|
||||
{
|
||||
ROUTE_ID: this.ROUTE_ID,
|
||||
ICON: this.iconDialog.iconIndex
|
||||
? this.iconDialog.svgList[this.iconDialog.iconIndex].name
|
||||
: ''
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.iconDialog.visible = false
|
||||
this.getList(this.ROUTE_ID)
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`
|
||||
},
|
||||
getList(ROUTE_ID) {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
this.ROUTE_ID = ROUTE_ID
|
||||
requestFN(
|
||||
'/route/treeAll',
|
||||
{
|
||||
ROUTE_ID: this.ROUTE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.menuList
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog.form = {
|
||||
parentMenuId: '',
|
||||
parentName: '',
|
||||
parentIdS: '',
|
||||
title: '',
|
||||
path: '',
|
||||
redirect: '',
|
||||
component: '',
|
||||
model: '',
|
||||
permissionId: '',
|
||||
index: '',
|
||||
activeMenu: '',
|
||||
menuId: '',
|
||||
isMenu: true,
|
||||
isLogin: true,
|
||||
breadcrumb: true,
|
||||
isBreadcrumb: true,
|
||||
isSubMenu: true
|
||||
}
|
||||
},
|
||||
hasButton: function() {
|
||||
var keys = 'menu:add,menu:del,menu:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.menufhadminadd
|
||||
this.del = data.menufhadmindel
|
||||
this.edit = data.menufhadminedit
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icon_container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
flex-basis: calc(5% - 10px);
|
||||
border: 1px solid #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
margin-right: 13px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(10n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
border: 1px solid #79bbff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<List v-show="activeName=='list'" />
|
||||
<Button v-if="activeName=='button'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import button from './components/button'
|
||||
import list from './components/list'
|
||||
export default {
|
||||
components: {
|
||||
Button: button,
|
||||
List: list
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'list',
|
||||
MENU_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
const req = require.context('../../../icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const svgIcons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default svgIcons
|
||||
Loading…
Reference in New Issue