feat: 系统管理列表使用fit2cloud-ui
This commit is contained in:
parent
bab168f83d
commit
1fe79ec4e4
@ -3,7 +3,8 @@ import request from '@/utils/request'
|
||||
export function getDeptTree(pid) {
|
||||
return request({
|
||||
url: 'api/dept/childNodes/' + pid,
|
||||
method: 'post'
|
||||
method: 'post',
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,8 @@ import request from '@/utils/request'
|
||||
export function getMenusTree(pid) {
|
||||
return request({
|
||||
url: 'api/menu/childNodes/' + pid,
|
||||
method: 'post'
|
||||
method: 'post',
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,8 @@ import request from '@/utils/request'
|
||||
export function allRoles() {
|
||||
return request({
|
||||
url: '/api/role/all',
|
||||
method: 'post'
|
||||
method: 'post',
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
||||
@ -11,7 +12,8 @@ export function roleGrid(pageIndex, pageSize, data) {
|
||||
return request({
|
||||
url: '/api/role/roleGrid/' + pageIndex + '/' + pageSize,
|
||||
method: 'post',
|
||||
data
|
||||
data,
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -448,7 +448,8 @@ export default {
|
||||
menu: {
|
||||
create: '创建菜单',
|
||||
modify: '修改菜单',
|
||||
delete: '删除菜单'
|
||||
delete: '删除菜单',
|
||||
delete_confirm: '确定删除菜单吗'
|
||||
},
|
||||
organization: {
|
||||
create: '创建组织',
|
||||
|
||||
@ -115,8 +115,8 @@
|
||||
<span
|
||||
class="item-axis"
|
||||
>
|
||||
{{ item.name }}<i class="el-icon-arrow-down el-icon--right"/>
|
||||
<span/>
|
||||
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
<span />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit-outline">
|
||||
item1
|
||||
@ -147,13 +147,13 @@
|
||||
<span
|
||||
class="item-axis"
|
||||
>
|
||||
{{ item.name }}<i class="el-icon-arrow-down el-icon--right"/>
|
||||
<span/>
|
||||
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
<span />
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit-outline">
|
||||
<el-dropdown placement="right-start" size="mini">
|
||||
<span class="el-dropdown-link">
|
||||
item3<i class="el-icon-arrow-right el-icon--right"/>
|
||||
item3<i class="el-icon-arrow-right el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>sub1</el-dropdown-item>
|
||||
@ -173,7 +173,7 @@
|
||||
</el-row>
|
||||
|
||||
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
|
||||
<div id="echart" style="width: 100%;height: 80vh;"/>
|
||||
<div id="echart" style="width: 100%;height: 80vh;" />
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
@ -1,57 +1,46 @@
|
||||
<template>
|
||||
<div v-loading="result.loading">
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
|
||||
<el-card class="table-card">
|
||||
<template v-slot:header>
|
||||
<ms-table-header
|
||||
:permission="permission"
|
||||
:condition.sync="condition"
|
||||
:create-tip="$t('organization.create')"
|
||||
:title="$t('commons.organization')"
|
||||
@search="initTableData"
|
||||
@create="create"
|
||||
/>
|
||||
<complex-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="initTableData"
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="deptId"
|
||||
@search="initTableData"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
|
||||
</template>
|
||||
<!-- system menu organization table-->
|
||||
<el-table
|
||||
ref="table"
|
||||
border
|
||||
class="adjust-table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="initTableData"
|
||||
style="width: 100%"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="deptId"
|
||||
>
|
||||
<!-- <el-table-column :selectable="checkboxT" type="selection" width="55" /> -->
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="下属部门数" prop="subCount" />
|
||||
<el-table-column label="状态" align="center" prop="enabled">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
:disabled="scope.row.id === 1"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="$t('commons.operating')">
|
||||
<template v-slot:default="scope">
|
||||
<ms-table-operator :permission="permission" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column label="名称" prop="name" />
|
||||
<el-table-column label="下属组织数" prop="subCount" />
|
||||
<el-table-column label="状态" align="center" prop="enabled">
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enabled"
|
||||
:disabled="scope.row.id === 1"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#F56C6C"
|
||||
@change="changeEnabled(scope.row, scope.row.enabled,)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-card>
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</complex-table>
|
||||
|
||||
<!-- add organization form -->
|
||||
<el-dialog
|
||||
@ -64,10 +53,10 @@
|
||||
>
|
||||
<el-form ref="createOrganization" inline :model="form" :rules="rule" size="small" label-width="80px">
|
||||
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-form-item label="组织名称" prop="name">
|
||||
<el-input v-model="form.name" style="width: 370px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门排序" prop="deptSort">
|
||||
<el-form-item label="组织排序" prop="deptSort">
|
||||
<el-input-number
|
||||
v-model.number="form.deptSort"
|
||||
:min="0"
|
||||
@ -77,7 +66,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="顶级部门" prop="top">
|
||||
<el-form-item label="顶级组织" prop="top">
|
||||
<el-radio-group v-model="form.top" style="width: 140px">
|
||||
<el-radio :label="true">是</el-radio>
|
||||
<el-radio :label="false">否</el-radio>
|
||||
@ -92,7 +81,7 @@
|
||||
|
||||
<!-- <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio> -->
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!form.top" style="margin-bottom: 0;" label="上级部门" prop="pid">
|
||||
<el-form-item v-if="!form.top" style="margin-bottom: 0;" label="上级组织" prop="pid">
|
||||
<treeselect
|
||||
v-model="form.pid"
|
||||
:auto-load-root-options="false"
|
||||
@ -103,44 +92,31 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||||
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||||
</div> -->
|
||||
<template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
@cancel="dialogOrgAddVisible = false"
|
||||
@confirm="createDept('createOrganization')"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialogOrgAddVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="createDept('createOrganization')">确认</el-button>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
<ms-delete-confirm ref="deleteConfirm" :title="$t('organization.delete')" @delete="_handleDelete" />
|
||||
|
||||
</div>
|
||||
</layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
|
||||
import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
|
||||
import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
|
||||
import {
|
||||
listenGoBack,
|
||||
removeGoBackListener
|
||||
} from '@/metersphere/common/js/utils'
|
||||
import MsDeleteConfirm from '@/metersphere/common/components/MsDeleteConfirm'
|
||||
|
||||
import { getDeptTree, addDept, editDept, delDept } from '@/api/system/dept'
|
||||
|
||||
export default {
|
||||
name: 'MsOrganization',
|
||||
components: {
|
||||
MsDeleteConfirm,
|
||||
MsTableHeader,
|
||||
MsTableOperator,
|
||||
MsDialogFooter,
|
||||
LayoutContent,
|
||||
ComplexTable,
|
||||
Treeselect
|
||||
},
|
||||
data() {
|
||||
@ -173,6 +149,28 @@ export default {
|
||||
add: ['dept:add'],
|
||||
edit: ['dept:edit'],
|
||||
del: ['dept:del']
|
||||
},
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
useQuickSearch: false,
|
||||
useComplexSearch: false,
|
||||
quickPlaceholder: '按姓名搜索',
|
||||
components: [
|
||||
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
|
||||
}
|
||||
@ -184,7 +182,6 @@ export default {
|
||||
create() {
|
||||
this.dialogOrgAddVisible = true
|
||||
this.formType = 'add'
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
search(condition) {
|
||||
console.log(condition)
|
||||
@ -196,7 +193,6 @@ export default {
|
||||
this.oldPid = row.pid
|
||||
this.form = Object.assign({}, row)
|
||||
this.treeByRow(row)
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
|
||||
treeByRow(row) {
|
||||
@ -242,7 +238,7 @@ export default {
|
||||
|
||||
initTableData(row, treeNode, resolve) {
|
||||
const _self = this
|
||||
const pid = row ? row.deptId : '0'
|
||||
const pid = (row && row.deptId) ? row.deptId : '0'
|
||||
getDeptTree(pid).then(response => {
|
||||
let data = response.data
|
||||
data = data.map(obj => {
|
||||
@ -268,7 +264,6 @@ export default {
|
||||
this.form = {}
|
||||
this.oldPid = null
|
||||
this.depts = null
|
||||
removeGoBackListener(this.closeFunc)
|
||||
this.dialogOrgAddVisible = false
|
||||
},
|
||||
|
||||
@ -312,7 +307,7 @@ export default {
|
||||
},
|
||||
// 改变状态
|
||||
changeEnabled(data, val) {
|
||||
this.$confirm('此操作将 "停用" ' + data.name + '部门, 是否继续?', '提示', {
|
||||
this.$confirm('此操作将 "停用" ' + data.name + '组织, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
@ -353,9 +348,7 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(organization) {
|
||||
this.$refs.deleteConfirm.open(organization)
|
||||
},
|
||||
|
||||
_handleDelete(organization) {
|
||||
this.$confirm(this.$t('organization.delete_confirm'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
@ -407,7 +400,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "~@/metersphere/common/css/index.css";
|
||||
.member-size {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -1,70 +1,59 @@
|
||||
<template>
|
||||
<div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
|
||||
<el-card class="table-card">
|
||||
<template v-slot:header>
|
||||
<ms-table-header
|
||||
:permission="permission"
|
||||
:condition.sync="condition"
|
||||
:create-tip="$t('menu.create')"
|
||||
:title="$t('commons.menu')"
|
||||
@search="initTableData"
|
||||
@create="create"
|
||||
/>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<complex-table
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="initTableData"
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="menuId"
|
||||
@search="initTableData"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
|
||||
</template>
|
||||
<el-table
|
||||
ref="table"
|
||||
border
|
||||
class="adjust-table"
|
||||
:data="tableData"
|
||||
lazy
|
||||
:load="initTableData"
|
||||
style="width: 100%"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
row-key="menuId"
|
||||
>
|
||||
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
|
||||
<el-table-column prop="icon" label="图标" align="center" width="60px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
<el-table-column prop="iframe" label="外链" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.iframe">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cache" label="缓存" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.cache">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="可见" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.hidden">否</span>
|
||||
<span v-else>是</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" width="160px">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
|
||||
<!-- <el-table-column prop="iframe" label="外链" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.iframe">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cache" label="缓存" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.cache">是</span>
|
||||
<span v-else>否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="hidden" label="可见" width="75px">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.hidden">否</span>
|
||||
<span v-else>是</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="createTime" label="创建日期" width="160px">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="$t('commons.operating')">
|
||||
<template v-slot:default="scope">
|
||||
<ms-table-operator :permission="permission" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-card>
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</complex-table>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
@ -97,7 +86,7 @@
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.type !== '2'" label="外链菜单" prop="iframe">
|
||||
<!-- <el-form-item v-show="form.type !== '2'" label="外链菜单" prop="iframe">
|
||||
<el-radio-group v-model="form.iframe" size="mini">
|
||||
<el-radio-button label="true">是</el-radio-button>
|
||||
<el-radio-button label="false">否</el-radio-button>
|
||||
@ -114,7 +103,7 @@
|
||||
<el-radio-button label="false">是</el-radio-button>
|
||||
<el-radio-button label="true">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item v-if="form.type !== '2'" label="菜单标题" prop="title">
|
||||
<el-input v-model="form.title" :style=" form.type === '0' ? 'width: 450px' : 'width: 179px'" placeholder="菜单标题" />
|
||||
</el-form-item>
|
||||
@ -146,43 +135,37 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template v-slot:footer>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="createMenu('menuForm')">确认</el-button>
|
||||
</div>
|
||||
<!-- <template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
@cancel="dialogVisible = false"
|
||||
@confirm="createMenu('menuForm')"
|
||||
/>
|
||||
</template>
|
||||
</template> -->
|
||||
</el-dialog>
|
||||
|
||||
<ms-delete-confirm ref="deleteConfirm" :title="$t('menu.delete')" @delete="_handleDelete" />
|
||||
|
||||
</div>
|
||||
</layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
// import { checkPermission } from '@/utils/permission'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
|
||||
import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
|
||||
import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
|
||||
import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
|
||||
import {
|
||||
listenGoBack,
|
||||
removeGoBackListener
|
||||
} from '@/metersphere/common/js/utils'
|
||||
import MsDeleteConfirm from '@/metersphere/common/components/MsDeleteConfirm'
|
||||
|
||||
import { addMenu, editMenu, delMenu, getMenusTree } from '@/api/system/menu'
|
||||
|
||||
export default {
|
||||
name: 'MsMenu',
|
||||
components: {
|
||||
MsDeleteConfirm,
|
||||
MsTableHeader,
|
||||
MsTableOperator,
|
||||
MsDialogFooter,
|
||||
ComplexTable,
|
||||
LayoutContent,
|
||||
Treeselect,
|
||||
IconSelect
|
||||
},
|
||||
@ -191,11 +174,6 @@ export default {
|
||||
menus: [],
|
||||
topMunu: { id: 0, label: '顶级类目', children: null },
|
||||
formType: 'add',
|
||||
queryPath: '/api/menu/childNodes/',
|
||||
deletePath: '/api/menu/delete',
|
||||
createPath: '/api/menu/create',
|
||||
updatePath: '/api/menu/update',
|
||||
result: {},
|
||||
dialogVisible: false,
|
||||
condition: {},
|
||||
tableData: [],
|
||||
@ -216,6 +194,41 @@ export default {
|
||||
add: ['menu:add'],
|
||||
edit: ['menu:edit'],
|
||||
del: ['menu:del']
|
||||
},
|
||||
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
useQuickSearch: false,
|
||||
useComplexSearch: false,
|
||||
quickPlaceholder: '按姓名搜索',
|
||||
components: [
|
||||
|
||||
// { field: 'name', label: '姓名', component: 'FuComplexInput' },
|
||||
|
||||
// {
|
||||
// field: 'enabled',
|
||||
// label: '状态',
|
||||
// component: 'FuComplexSelect',
|
||||
// options: [
|
||||
// { label: '启用', value: '1' },
|
||||
// { label: '禁用', value: '0' }
|
||||
// ],
|
||||
// multiple: false
|
||||
// }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
|
||||
}
|
||||
@ -229,7 +242,6 @@ export default {
|
||||
this.form = Object.assign({}, this.defaultForm)
|
||||
this.dialogVisible = true
|
||||
this.formType = 'add'
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
search(condition) {
|
||||
console.log(condition)
|
||||
@ -241,7 +253,6 @@ export default {
|
||||
this.oldPid = row.pid
|
||||
this.form = Object.assign({}, row)
|
||||
this.treeByRow(row)
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
|
||||
treeByRow(row) {
|
||||
@ -288,7 +299,7 @@ export default {
|
||||
|
||||
initTableData(row, treeNode, resolve) {
|
||||
const _self = this
|
||||
const pid = row ? row.menuId : '0'
|
||||
const pid = (row && row.menuId) ? row.menuId : '0'
|
||||
|
||||
getMenusTree(pid).then(response => {
|
||||
let data = response.data
|
||||
@ -314,7 +325,6 @@ export default {
|
||||
this.form = this.defaultForm
|
||||
this.oldPid = null
|
||||
this.menus = null
|
||||
removeGoBackListener(this.closeFunc)
|
||||
this.dialogVisible = false
|
||||
},
|
||||
|
||||
@ -374,9 +384,7 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(menu) {
|
||||
this.$refs.deleteConfirm.open(menu)
|
||||
},
|
||||
|
||||
_handleDelete(menu) {
|
||||
this.$confirm(this.$t('menu.delete_confirm'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
@ -414,7 +422,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "~@/metersphere/common/css/index.css";
|
||||
.member-size {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -1,31 +1,34 @@
|
||||
<template>
|
||||
<div v-loading="result.loading" style="height: 100%">
|
||||
<el-container style="width: 100%; height: 100%;border: 1px solid #eee">
|
||||
<el-aside width="70%" style="border: 1px solid #eee">
|
||||
<el-card class="table-card">
|
||||
<template v-slot:header>
|
||||
<ms-table-header :permission="permission" :condition.sync="condition" :create-tip="$t('role.add')" :title="$t('commons.role')" @search="search" @create="create" />
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<!-- <div v-loading="result.loading" style="height: 100%"> -->
|
||||
<el-container style="width: 100%; height: 100%;">
|
||||
<el-aside width="70%">
|
||||
<complex-table
|
||||
highlight-current-row
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
:buttons="buttons"
|
||||
:header="header"
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
@search="search"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<template #buttons>
|
||||
<fu-table-button icon="el-icon-circle-plus-outline" :label="$t('role.add')" @click="create" />
|
||||
</template>
|
||||
<el-table border highlight-current-row class="adjust-table" :data="tableData" style="width: 100%;" @row-click="rowClick">
|
||||
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="code" label="代码" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('commons.operating')">
|
||||
<template v-slot:default="scope">
|
||||
<ms-table-operator :permission="permission" @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total" />
|
||||
|
||||
</el-card>
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="code" label="代码" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
|
||||
<template v-slot:default="scope">
|
||||
<span>{{ scope.row.createTime | timestampFormatDate }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<fu-table-operations :buttons="buttons" label="操作" fix />
|
||||
</complex-table>
|
||||
</el-aside>
|
||||
<el-main style="">
|
||||
<el-main style="padding: 8px 20px;">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="菜单授权" name="first">
|
||||
<el-tree
|
||||
@ -67,52 +70,31 @@
|
||||
<el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template v-slot:footer>
|
||||
<ms-dialog-footer
|
||||
@cancel="dialogVisible = false"
|
||||
@confirm="saveRole('roleForm')"
|
||||
/>
|
||||
</template>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveRole('roleForm')">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</layout-content>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import MsTablePagination from '@/metersphere/common/pagination/TablePagination'
|
||||
import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
|
||||
import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
|
||||
import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
|
||||
import {
|
||||
listenGoBack,
|
||||
removeGoBackListener
|
||||
} from '@/metersphere/common/js/utils'
|
||||
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import { addRole, editRole, delRole, roleGrid, addRoleMenus, menuIds } from '@/api/system/role'
|
||||
|
||||
import { getMenusTree, getChild } from '@/api/system/menu'
|
||||
export default {
|
||||
name: 'Role',
|
||||
components: {
|
||||
MsTablePagination,
|
||||
MsTableHeader,
|
||||
MsTableOperator,
|
||||
MsDialogFooter
|
||||
LayoutContent,
|
||||
ComplexTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
queryPath: '/api/role/roleGrid',
|
||||
deletePath: '/api/role/delete/',
|
||||
createPath: '/api/role/create',
|
||||
updatePath: '/api/role/update',
|
||||
queryMenusPath: '/api/menu/childNodes/',
|
||||
childMenusPath: '/api/menu/childMenus/',
|
||||
saveRoleMenusPath: '/api/role/saveRolesMenus',
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
condition: {},
|
||||
|
||||
tableData: [],
|
||||
menus: [],
|
||||
menuIds: [],
|
||||
@ -131,6 +113,39 @@ export default {
|
||||
add: ['role:add'],
|
||||
edit: ['role:edit'],
|
||||
del: ['role:del']
|
||||
},
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.handleDelete
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
quickPlaceholder: '按名称搜索',
|
||||
components: [
|
||||
// { field: 'name', label: '姓名', component: 'FuComplexInput', defaultOperator: 'eq' },
|
||||
{ field: 'name', label: '名称', component: 'FuComplexInput' },
|
||||
|
||||
{
|
||||
field: 'enabled',
|
||||
label: '状态',
|
||||
component: 'FuComplexSelect',
|
||||
options: [
|
||||
{ label: '启用', value: '1' },
|
||||
{ label: '禁用', value: '0' }
|
||||
],
|
||||
multiple: false
|
||||
}
|
||||
// { field: 'deptId', label: '组织', component: conditionTable }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -148,10 +163,9 @@ export default {
|
||||
this.form = {}
|
||||
this.formType = 'add'
|
||||
this.dialogVisible = true
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
search() {
|
||||
roleGrid(this.currentPage, this.pageSize, this.condition).then(response => {
|
||||
roleGrid(this.paginationConfig.currentPage, this.paginationConfig.pageSize, {}).then(response => {
|
||||
const data = response.data
|
||||
this.total = data.itemCount
|
||||
this.tableData = data.listObject
|
||||
@ -162,7 +176,6 @@ export default {
|
||||
this.formType = 'modify'
|
||||
this.dialogVisible = true
|
||||
this.form = Object.assign({}, row)
|
||||
listenGoBack(this.closeFunc)
|
||||
},
|
||||
|
||||
saveRole(roleForm) {
|
||||
@ -182,7 +195,6 @@ export default {
|
||||
|
||||
closeFunc() {
|
||||
this.dialogVisible = false
|
||||
removeGoBackListener(this.closeFunc)
|
||||
},
|
||||
|
||||
getMenuDatas(node, resolve) {
|
||||
@ -272,5 +284,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "~@/metersphere/common/css/index.css";
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user