企业路由
parent
1964f57010
commit
6c4f0bb95f
|
|
@ -5,7 +5,7 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"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",
|
"start": "npm run dev",
|
||||||
"unit": "jest --config test/unit/jest.conf.js --coverage",
|
"unit": "jest --config test/unit/jest.conf.js --coverage",
|
||||||
"e2e": "node test/e2e/runner.js",
|
"e2e": "node test/e2e/runner.js",
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@icon-park/vue": "^1.4.2",
|
||||||
"@riophae/vue-treeselect": "^0.4.0",
|
"@riophae/vue-treeselect": "^0.4.0",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"default-passive-events": "^2.0.0",
|
"default-passive-events": "^2.0.0",
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,9 @@ Vue.use(BaiduMap, {
|
||||||
ak: 'OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr'
|
ak: 'OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
import { install } from '@icon-park/vue/es/all'
|
||||||
|
install(Vue, 'icon')
|
||||||
|
|
||||||
import Print from 'vue-print-nb'// 打印
|
import Print from 'vue-print-nb'// 打印
|
||||||
Vue.use(Print) // 注册
|
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