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

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

上级 bab168f8
......@@ -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>
......
<template>
<div v-loading="result.loading">
<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"
/>
<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="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-card>
<!-- <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>
<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>
</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>
<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;
}
......
<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>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论