提交 1fe79ec4 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

feat: 系统管理列表使用fit2cloud-ui

上级 bab168f8
...@@ -3,7 +3,8 @@ import request from '@/utils/request' ...@@ -3,7 +3,8 @@ import request from '@/utils/request'
export function getDeptTree(pid) { export function getDeptTree(pid) {
return request({ return request({
url: 'api/dept/childNodes/' + pid, url: 'api/dept/childNodes/' + pid,
method: 'post' method: 'post',
loading: true
}) })
} }
......
...@@ -3,7 +3,8 @@ import request from '@/utils/request' ...@@ -3,7 +3,8 @@ import request from '@/utils/request'
export function getMenusTree(pid) { export function getMenusTree(pid) {
return request({ return request({
url: 'api/menu/childNodes/' + pid, url: 'api/menu/childNodes/' + pid,
method: 'post' method: 'post',
loading: true
}) })
} }
......
...@@ -3,7 +3,8 @@ import request from '@/utils/request' ...@@ -3,7 +3,8 @@ import request from '@/utils/request'
export function allRoles() { export function allRoles() {
return request({ return request({
url: '/api/role/all', url: '/api/role/all',
method: 'post' method: 'post',
loading: true
}) })
} }
...@@ -11,7 +12,8 @@ export function roleGrid(pageIndex, pageSize, data) { ...@@ -11,7 +12,8 @@ export function roleGrid(pageIndex, pageSize, data) {
return request({ return request({
url: '/api/role/roleGrid/' + pageIndex + '/' + pageSize, url: '/api/role/roleGrid/' + pageIndex + '/' + pageSize,
method: 'post', method: 'post',
data data,
loading: true
}) })
} }
......
...@@ -448,7 +448,8 @@ export default { ...@@ -448,7 +448,8 @@ export default {
menu: { menu: {
create: '创建菜单', create: '创建菜单',
modify: '修改菜单', modify: '修改菜单',
delete: '删除菜单' delete: '删除菜单',
delete_confirm: '确定删除菜单吗'
}, },
organization: { organization: {
create: '创建组织', create: '创建组织',
......
...@@ -115,8 +115,8 @@ ...@@ -115,8 +115,8 @@
<span <span
class="item-axis" class="item-axis"
> >
{{ item.name }}<i class="el-icon-arrow-down el-icon--right"/> {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
<span/> <span />
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline"> <el-dropdown-item icon="el-icon-edit-outline">
item1 item1
...@@ -147,13 +147,13 @@ ...@@ -147,13 +147,13 @@
<span <span
class="item-axis" class="item-axis"
> >
{{ item.name }}<i class="el-icon-arrow-down el-icon--right"/> {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
<span/> <span />
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline"> <el-dropdown-item icon="el-icon-edit-outline">
<el-dropdown placement="right-start" size="mini"> <el-dropdown placement="right-start" size="mini">
<span class="el-dropdown-link"> <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> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>sub1</el-dropdown-item> <el-dropdown-item>sub1</el-dropdown-item>
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
</el-row> </el-row>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;"> <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> </div>
</el-row> </el-row>
</el-col> </el-col>
......
<template> <template>
<div v-loading="result.loading"> <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<el-card class="table-card"> <complex-table
<template v-slot:header> ref="table"
<ms-table-header :data="tableData"
:permission="permission" lazy
:condition.sync="condition" :load="initTableData"
:create-tip="$t('organization.create')" :columns="columns"
:title="$t('commons.organization')" :buttons="buttons"
@search="initTableData" :header="header"
@create="create" :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> </template>
<!-- system menu organization table-->
<el-table <!-- <el-table-column type="selection" fix /> -->
ref="table" <el-table-column label="名称" prop="name" />
border <el-table-column label="下属组织数" prop="subCount" />
class="adjust-table" <el-table-column label="状态" align="center" prop="enabled">
:data="tableData" <template slot-scope="scope">
lazy <el-switch
:load="initTableData" v-model="scope.row.enabled"
style="width: 100%" :disabled="scope.row.id === 1"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" active-color="#409EFF"
row-key="deptId" inactive-color="#F56C6C"
> @change="changeEnabled(scope.row, scope.row.enabled,)"
<!-- <el-table-column :selectable="checkboxT" type="selection" width="55" /> --> />
<el-table-column label="名称" prop="name" /> </template>
<el-table-column label="下属部门数" prop="subCount" /> </el-table-column>
<el-table-column label="状态" align="center" prop="enabled"> <el-table-column prop="createTime" label="创建日期">
<template slot-scope="scope"> <template v-slot:default="scope">
<el-switch <span>{{ scope.row.createTime | timestampFormatDate }}</span>
v-model="scope.row.enabled" </template>
:disabled="scope.row.id === 1" </el-table-column>
active-color="#409EFF"
inactive-color="#F56C6C" <fu-table-operations :buttons="buttons" label="操作" fix />
@change="changeEnabled(scope.row, scope.row.enabled,)" </complex-table>
/>
</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-card>
<!-- add organization form --> <!-- add organization form -->
<el-dialog <el-dialog
...@@ -64,10 +53,10 @@ ...@@ -64,10 +53,10 @@
> >
<el-form ref="createOrganization" inline :model="form" :rules="rule" size="small" label-width="80px"> <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-input v-model="form.name" style="width: 370px;" />
</el-form-item> </el-form-item>
<el-form-item label="部门排序" prop="deptSort"> <el-form-item label="组织排序" prop="deptSort">
<el-input-number <el-input-number
v-model.number="form.deptSort" v-model.number="form.deptSort"
:min="0" :min="0"
...@@ -77,7 +66,7 @@ ...@@ -77,7 +66,7 @@
/> />
</el-form-item> </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-group v-model="form.top" style="width: 140px">
<el-radio :label="true"></el-radio> <el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio> <el-radio :label="false"></el-radio>
...@@ -92,7 +81,7 @@ ...@@ -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-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>
<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 <treeselect
v-model="form.pid" v-model="form.pid"
:auto-load-root-options="false" :auto-load-root-options="false"
...@@ -103,44 +92,31 @@ ...@@ -103,44 +92,31 @@
/> />
</el-form-item> </el-form-item>
</el-form> </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>
</el-dialog>
<ms-delete-confirm ref="deleteConfirm" :title="$t('organization.delete')" @delete="_handleDelete" /> <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>
</div> </layout-content>
</template> </template>
<script> <script>
import LayoutContent from '@/components/business/LayoutContent'
import ComplexTable from '@/components/business/complex-table'
import Treeselect from '@riophae/vue-treeselect' import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect' 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' import { getDeptTree, addDept, editDept, delDept } from '@/api/system/dept'
export default { export default {
name: 'MsOrganization', name: 'MsOrganization',
components: { components: {
MsDeleteConfirm, LayoutContent,
MsTableHeader, ComplexTable,
MsTableOperator,
MsDialogFooter,
Treeselect Treeselect
}, },
data() { data() {
...@@ -173,6 +149,28 @@ export default { ...@@ -173,6 +149,28 @@ export default {
add: ['dept:add'], add: ['dept:add'],
edit: ['dept:edit'], edit: ['dept:edit'],
del: ['dept:del'] 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 { ...@@ -184,7 +182,6 @@ export default {
create() { create() {
this.dialogOrgAddVisible = true this.dialogOrgAddVisible = true
this.formType = 'add' this.formType = 'add'
listenGoBack(this.closeFunc)
}, },
search(condition) { search(condition) {
console.log(condition) console.log(condition)
...@@ -196,7 +193,6 @@ export default { ...@@ -196,7 +193,6 @@ export default {
this.oldPid = row.pid this.oldPid = row.pid
this.form = Object.assign({}, row) this.form = Object.assign({}, row)
this.treeByRow(row) this.treeByRow(row)
listenGoBack(this.closeFunc)
}, },
treeByRow(row) { treeByRow(row) {
...@@ -242,7 +238,7 @@ export default { ...@@ -242,7 +238,7 @@ export default {
initTableData(row, treeNode, resolve) { initTableData(row, treeNode, resolve) {
const _self = this const _self = this
const pid = row ? row.deptId : '0' const pid = (row && row.deptId) ? row.deptId : '0'
getDeptTree(pid).then(response => { getDeptTree(pid).then(response => {
let data = response.data let data = response.data
data = data.map(obj => { data = data.map(obj => {
...@@ -268,7 +264,6 @@ export default { ...@@ -268,7 +264,6 @@ export default {
this.form = {} this.form = {}
this.oldPid = null this.oldPid = null
this.depts = null this.depts = null
removeGoBackListener(this.closeFunc)
this.dialogOrgAddVisible = false this.dialogOrgAddVisible = false
}, },
...@@ -312,7 +307,7 @@ export default { ...@@ -312,7 +307,7 @@ export default {
}, },
// 改变状态 // 改变状态
changeEnabled(data, val) { changeEnabled(data, val) {
this.$confirm('此操作将 "停用" ' + data.name + '部门, 是否继续?', '提示', { this.$confirm('此操作将 "停用" ' + data.name + '组织, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
...@@ -353,9 +348,7 @@ export default { ...@@ -353,9 +348,7 @@ export default {
} }
}) })
}, },
handleDelete(organization) {
this.$refs.deleteConfirm.open(organization)
},
_handleDelete(organization) { _handleDelete(organization) {
this.$confirm(this.$t('organization.delete_confirm'), '', { this.$confirm(this.$t('organization.delete_confirm'), '', {
confirmButtonText: this.$t('commons.confirm'), confirmButtonText: this.$t('commons.confirm'),
...@@ -407,7 +400,6 @@ export default { ...@@ -407,7 +400,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
@import "~@/metersphere/common/css/index.css";
.member-size { .member-size {
text-decoration: underline; text-decoration: underline;
} }
......
<template> <template>
<div v-loading="result.loading" style="height: 100%"> <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<el-container style="width: 100%; height: 100%;border: 1px solid #eee"> <!-- <div v-loading="result.loading" style="height: 100%"> -->
<el-aside width="70%" style="border: 1px solid #eee"> <el-container style="width: 100%; height: 100%;">
<el-card class="table-card"> <el-aside width="70%">
<template v-slot:header> <complex-table
<ms-table-header :permission="permission" :condition.sync="condition" :create-tip="$t('role.add')" :title="$t('commons.role')" @search="search" @create="create" /> 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> </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="name" label="名称" />
<el-table-column prop="code" label="代码" /> <el-table-column prop="code" label="代码" />
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期"> <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期">
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.createTime | timestampFormatDate }}</span> <span>{{ scope.row.createTime | timestampFormatDate }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$t('commons.operating')"> <fu-table-operations :buttons="buttons" label="操作" fix />
<template v-slot:default="scope"> </complex-table>
<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-aside> </el-aside>
<el-main style=""> <el-main style="padding: 8px 20px;">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="菜单授权" name="first"> <el-tab-pane label="菜单授权" name="first">
<el-tree <el-tree
...@@ -67,52 +70,31 @@ ...@@ -67,52 +70,31 @@
<el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" /> <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer">
<template v-slot:footer> <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
<ms-dialog-footer <el-button type="primary" @click="saveRole('roleForm')">确认</el-button>
@cancel="dialogVisible = false" </div>
@confirm="saveRole('roleForm')"
/>
</template>
</el-dialog> </el-dialog>
</div> </layout-content>
</template> </template>
<script> <script>
import MsTablePagination from '@/metersphere/common/pagination/TablePagination'
import MsTableHeader from '@/metersphere/common/components/MsTableHeader' import LayoutContent from '@/components/business/LayoutContent'
import MsTableOperator from '@/metersphere/common/components/MsTableOperator' import ComplexTable from '@/components/business/complex-table'
import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
import {
listenGoBack,
removeGoBackListener
} from '@/metersphere/common/js/utils'
import { addRole, editRole, delRole, roleGrid, addRoleMenus, menuIds } from '@/api/system/role' import { addRole, editRole, delRole, roleGrid, addRoleMenus, menuIds } from '@/api/system/role'
import { getMenusTree, getChild } from '@/api/system/menu' import { getMenusTree, getChild } from '@/api/system/menu'
export default { export default {
name: 'Role', name: 'Role',
components: { components: {
MsTablePagination, LayoutContent,
MsTableHeader, ComplexTable
MsTableOperator,
MsDialogFooter
}, },
data() { data() {
return { 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: [], tableData: [],
menus: [], menus: [],
menuIds: [], menuIds: [],
...@@ -131,6 +113,39 @@ export default { ...@@ -131,6 +113,39 @@ export default {
add: ['role:add'], add: ['role:add'],
edit: ['role:edit'], edit: ['role:edit'],
del: ['role:del'] 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 { ...@@ -148,10 +163,9 @@ export default {
this.form = {} this.form = {}
this.formType = 'add' this.formType = 'add'
this.dialogVisible = true this.dialogVisible = true
listenGoBack(this.closeFunc)
}, },
search() { search() {
roleGrid(this.currentPage, this.pageSize, this.condition).then(response => { roleGrid(this.paginationConfig.currentPage, this.paginationConfig.pageSize, {}).then(response => {
const data = response.data const data = response.data
this.total = data.itemCount this.total = data.itemCount
this.tableData = data.listObject this.tableData = data.listObject
...@@ -162,7 +176,6 @@ export default { ...@@ -162,7 +176,6 @@ export default {
this.formType = 'modify' this.formType = 'modify'
this.dialogVisible = true this.dialogVisible = true
this.form = Object.assign({}, row) this.form = Object.assign({}, row)
listenGoBack(this.closeFunc)
}, },
saveRole(roleForm) { saveRole(roleForm) {
...@@ -182,7 +195,6 @@ export default { ...@@ -182,7 +195,6 @@ export default {
closeFunc() { closeFunc() {
this.dialogVisible = false this.dialogVisible = false
removeGoBackListener(this.closeFunc)
}, },
getMenuDatas(node, resolve) { getMenuDatas(node, resolve) {
...@@ -272,5 +284,4 @@ export default { ...@@ -272,5 +284,4 @@ export default {
</script> </script>
<style scoped> <style scoped>
@import "~@/metersphere/common/css/index.css";
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论