|
|
@@ -1,300 +1,255 @@
|
|
|
-<template>
|
|
|
- <d2-container>
|
|
|
- <template slot="header">
|
|
|
- <el-form :inline="true"
|
|
|
- :model="searchForm"
|
|
|
- ref="searchForm"
|
|
|
- size="mini"
|
|
|
- style="height: 25px; margin-top: -7px;text-align:right;">
|
|
|
- <el-form-item label="部门名称"
|
|
|
- prop="Realname">
|
|
|
- <el-input v-model="searchForm.name"
|
|
|
- placeholder="部门名称"
|
|
|
- style="width: 140px;" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary"
|
|
|
- size="mini"
|
|
|
- style="margin-left:10px"
|
|
|
- @click="handleSearch">
|
|
|
- <d2-icon name="search" /> 查询
|
|
|
- </el-button>
|
|
|
- <el-button @click="handleSearchFormReset"
|
|
|
- type="primary"
|
|
|
- size="mini">
|
|
|
- <d2-icon name="refresh" /> 重置
|
|
|
- </el-button>
|
|
|
- <el-button type="primary"
|
|
|
- size="mini"
|
|
|
- icon="el-icon-circle-plus"
|
|
|
- @click="add">
|
|
|
- 新增
|
|
|
- </el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- <ag-grid-vue class="table ag-theme-balham" style="width: 100%; height: 100%;"
|
|
|
- id="myGrid"
|
|
|
- :gridOptions="gridOptions"
|
|
|
- :gridReady="onGridReady"
|
|
|
- :rowData="rowData"
|
|
|
- :columnDefs="columnDefs"
|
|
|
- :defaultColDef="defaultColDef"
|
|
|
- :autoGroupColumnDef="autoGroupColumnDef"
|
|
|
- :treeData="true"
|
|
|
- :animateRows="true"
|
|
|
- :groupDefaultExpanded="groupDefaultExpanded"
|
|
|
- :getDataPath="getDataPath"
|
|
|
- :modules="modules"
|
|
|
- >
|
|
|
- </ag-grid-vue>
|
|
|
- <template slot="footer">
|
|
|
- <el-pagination style="margin: -10px;"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="page.current"
|
|
|
- :page-size="page.size"
|
|
|
- :total="page.total"
|
|
|
- :page-sizes="[10, 20]"
|
|
|
- layout="total, sizes, prev, pager, next, jumper">
|
|
|
- </el-pagination>
|
|
|
- </template>
|
|
|
- <edit-form :id="roleID"
|
|
|
- v-model="editFormVisible"
|
|
|
- @submit="doRefresh" />
|
|
|
- </d2-container>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import command from './components/command'
|
|
|
-import orgApi from '@/api/sysadmin/orgnize'
|
|
|
-import editForm from './editForm'
|
|
|
-import { AllModules } from '@ag-grid-enterprise/all-modules'
|
|
|
-import { AgGridVue } from 'ag-grid-vue'
|
|
|
-import 'ag-grid-community/dist/styles/ag-grid.css'
|
|
|
-import 'ag-grid-community/dist/styles/ag-theme-balham.css'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'orgnize',
|
|
|
- components: { AgGridVue, editForm },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- // ag-grid相关变量
|
|
|
- gridOptions: null,
|
|
|
- gridApi: null,
|
|
|
- columnApi: null,
|
|
|
- rowData: null,
|
|
|
- columnDefs: null,
|
|
|
- defaultColDef: null,
|
|
|
- autoGroupColumnDef: null,
|
|
|
- groupDefaultExpanded: null,
|
|
|
- getDataPath: null,
|
|
|
- modules: AllModules,
|
|
|
-
|
|
|
- page: {
|
|
|
- current: 1,
|
|
|
- size: 10,
|
|
|
- total: 1
|
|
|
- },
|
|
|
-
|
|
|
- roleID: -1,
|
|
|
- roleRealname: '',
|
|
|
- searchForm: {
|
|
|
- name: ''
|
|
|
- // code: ''
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- multipleSelection: [],
|
|
|
- roleselectOptions: [],
|
|
|
- sort: {
|
|
|
- prop: '',
|
|
|
- order: ''
|
|
|
- },
|
|
|
- editFormVisible: false,
|
|
|
- orgDialogVisible: false,
|
|
|
- dialogVisible: false,
|
|
|
- permissionDialogVisible: false,
|
|
|
- roleUserDialogVisible: false,
|
|
|
- containerDialogVisible: false
|
|
|
- }
|
|
|
- },
|
|
|
- beforeMount () {
|
|
|
- this.gridOptions = {
|
|
|
- rowHeight: 32 // 设置行高为32px
|
|
|
- // 缺省列属性
|
|
|
- // defaultColDef: {
|
|
|
- // width: 200,
|
|
|
- // resizable: true
|
|
|
- // }
|
|
|
- }
|
|
|
- this.columnDefs = [
|
|
|
- { headerName: '部门经理', field: 'manager' },
|
|
|
- { headerName: '部门电话', field: 'inner_phone' },
|
|
|
- { headerName: '操作', field: 'operation', width: 100, 'pinned': 'right', cellRendererFramework: command }
|
|
|
- ]
|
|
|
- this.defaultColDef = { flex: 1 }
|
|
|
- this.autoGroupColumnDef = {
|
|
|
- headerName: '部门名称',
|
|
|
- field: 'full_name',
|
|
|
- minWidth: 300,
|
|
|
- cellRendererParams: { suppressCount: true }
|
|
|
- }
|
|
|
- this.groupDefaultExpanded = -1
|
|
|
- this.getDataPath = data => {
|
|
|
- return data.paths.split('/')
|
|
|
- }
|
|
|
- },
|
|
|
- created () {
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- this.gridOptions.context = { page: this }
|
|
|
-
|
|
|
- this.gridApi = this.gridOptions.api
|
|
|
- this.gridColumnApi = this.gridOptions.columnApi
|
|
|
- this.doRefresh()
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- // 表格就绪后后执行
|
|
|
- onGridReady (params) {
|
|
|
- // 调整表格列宽大小自适应
|
|
|
- this.gridApi.sizeColumnsToFit()
|
|
|
- },
|
|
|
- // 执行刷新(获取数据)
|
|
|
- doRefresh () {
|
|
|
- let _this = this
|
|
|
- let query = {
|
|
|
- size: this.page.size,
|
|
|
- current: this.page.current,
|
|
|
- fullname: this.searchForm.name
|
|
|
- }
|
|
|
- orgApi.getList(query)
|
|
|
- .then(res => {
|
|
|
- console.log(res)
|
|
|
- _this.rowData = res.records
|
|
|
- // _this.page.current = res.current
|
|
|
- // _this.page.size = res.size
|
|
|
- _this.page.total = res.total
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.error(err)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 分页-改变分页大小
|
|
|
- handleSizeChange (value) {
|
|
|
- this.page.size = value
|
|
|
- this.page.current = 1
|
|
|
- this.doRefresh()
|
|
|
- },
|
|
|
- // 分页-改变当前页
|
|
|
- handleCurrentChange (value) {
|
|
|
- this.page.current = value
|
|
|
- this.doRefresh()
|
|
|
- },
|
|
|
-
|
|
|
- // 处理编辑
|
|
|
- handleEdit (id) {
|
|
|
- this.roleID = id
|
|
|
- this.editFormVisible = true
|
|
|
- },
|
|
|
-
|
|
|
- // 处理编辑
|
|
|
- handleOpenEditForm ({ index, row }) {
|
|
|
- this.roleID = row.id
|
|
|
- this.editFormVisible = true
|
|
|
- },
|
|
|
- // 处理删除
|
|
|
- handleDelete (id) {
|
|
|
- const params = {
|
|
|
- id: id
|
|
|
- }
|
|
|
- orgApi.delete(params).then((res) => {
|
|
|
- console.log(res)
|
|
|
- this.doRefresh()
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- handleOpenOrgDialog ({ index, row }) {
|
|
|
- this.roleID = row.id
|
|
|
- this.orgDialogVisible = true
|
|
|
- },
|
|
|
- handleOpenPermissionDialog ({ index, row }) {
|
|
|
- this.roleID = row.id
|
|
|
- this.roleRealname = row.realname
|
|
|
- this.permissionDialogVisible = true
|
|
|
- },
|
|
|
- handleOpenRoleUserDialog ({ index, row }) {
|
|
|
- this.roleID = row.id
|
|
|
- this.roleRealname = row.realname
|
|
|
- this.roleUserDialogVisible = !this.roleUserDialogVisible
|
|
|
- },
|
|
|
- // 查询
|
|
|
- handleSearch () {
|
|
|
- this.currentPage = 1
|
|
|
- this.doRefresh()
|
|
|
- },
|
|
|
- // 重置
|
|
|
- handleSearchFormReset () {
|
|
|
- this.searchForm.name = ''
|
|
|
- this.doRefresh()
|
|
|
- },
|
|
|
-
|
|
|
- // todo 未整理此部分
|
|
|
- batchDel () {
|
|
|
- this.$confirm('确认删除？', '确认信息', {
|
|
|
- distinguishCancelAndClose: true,
|
|
|
- confirmButtonText: '删除',
|
|
|
- cancelButtonText: '取消'
|
|
|
- }).then(() => {
|
|
|
- this.roleselectOptions = []
|
|
|
- for (let i = 0; i < this.multipleSelection.length; i++) {
|
|
|
- this.roleselectOptions.push(this.multipleSelection[i].Id)
|
|
|
- }
|
|
|
- let roleidlist = this.roleselectOptions.join(',')
|
|
|
- let roleidsliststring = roleidlist.toString()
|
|
|
- // console.log(JSON.stringify(this.multipleSelection.map(s => s.Id)))
|
|
|
- orgApi.delRoles({
|
|
|
- ids: roleidsliststring
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.initData()
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- add () {
|
|
|
- this.role = {}
|
|
|
- this.roleID = 0
|
|
|
- this.editFormVisible = true
|
|
|
- },
|
|
|
-
|
|
|
- // 处理列表选择
|
|
|
- handleSelectionChange (selection) {
|
|
|
- this.multipleSelection = selection
|
|
|
- },
|
|
|
- handleSortChange (val) {
|
|
|
- this.sort.prop = val.prop
|
|
|
- this.sort.order = val.order
|
|
|
- this.initData()
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-
|
|
|
-.el-pagination {
|
|
|
- margin: 1rem 0 2rem;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-
|
|
|
-.plab {
|
|
|
- font-size: 13px;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.rowequippower .el-checkbox {
|
|
|
- margin-left: 1px;
|
|
|
- padding: 5px 10px 0 0;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <d2-container>
|
|
|
+ <template slot="header">
|
|
|
+ <el-form :inline="true"
|
|
|
+ :model="searchForm"
|
|
|
+ ref="searchForm"
|
|
|
+ size="mini"
|
|
|
+ style="height: 25px; margin-top: -7px;text-align:right;">
|
|
|
+ <el-form-item label="部门名称"
|
|
|
+ prop="Realname">
|
|
|
+ <el-input v-model="searchForm.name"
|
|
|
+ placeholder="部门名称"
|
|
|
+ style="width: 140px;" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary"
|
|
|
+ size="mini"
|
|
|
+ style="margin-left:10px"
|
|
|
+ @click="handleSearch">
|
|
|
+ <d2-icon name="search" /> 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleSearchFormReset"
|
|
|
+ type="primary"
|
|
|
+ size="mini">
|
|
|
+ <d2-icon name="refresh" /> 重置
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary"
|
|
|
+ size="mini"
|
|
|
+ icon="el-icon-circle-plus"
|
|
|
+ @click="add">
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </template>
|
|
|
+ <ag-grid-vue class="table ag-theme-balham" style="width: 100%; height: 100%;"
|
|
|
+ id="myGrid"
|
|
|
+ :gridOptions="gridOptions"
|
|
|
+ :gridReady="onGridReady"
|
|
|
+ :rowData="rowData"
|
|
|
+ :columnDefs="columnDefs"
|
|
|
+ :defaultColDef="defaultColDef"
|
|
|
+ :autoGroupColumnDef="autoGroupColumnDef"
|
|
|
+ :treeData="true"
|
|
|
+ :animateRows="true"
|
|
|
+ :groupDefaultExpanded="groupDefaultExpanded"
|
|
|
+ :getDataPath="getDataPath"
|
|
|
+ :modules="modules"
|
|
|
+ >
|
|
|
+ </ag-grid-vue>
|
|
|
+ <template slot="footer">
|
|
|
+ <el-pagination style="margin: -10px;"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="page.current"
|
|
|
+ :page-size="page.size"
|
|
|
+ :total="page.total"
|
|
|
+ :page-sizes="[10, 20]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper">
|
|
|
+ </el-pagination>
|
|
|
+ </template>
|
|
|
+ <edit-form :id="roleID"
|
|
|
+ v-model="editFormVisible"
|
|
|
+ @submit="doRefresh" />
|
|
|
+ </d2-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import command from './components/command'
|
|
|
+import orgApi from '@/api/sysadmin/orgnize'
|
|
|
+import editForm from './editForm'
|
|
|
+import { AllModules } from '@ag-grid-enterprise/all-modules'
|
|
|
+import { AgGridVue } from 'ag-grid-vue'
|
|
|
+import 'ag-grid-community/dist/styles/ag-grid.css'
|
|
|
+import 'ag-grid-community/dist/styles/ag-theme-balham.css'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'orgnize',
|
|
|
+ components: { AgGridVue, editForm },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // ag-grid相关变量
|
|
|
+ gridOptions: null,
|
|
|
+ gridApi: null,
|
|
|
+ columnApi: null,
|
|
|
+ rowData: null,
|
|
|
+ columnDefs: null,
|
|
|
+ defaultColDef: null,
|
|
|
+ autoGroupColumnDef: null,
|
|
|
+ groupDefaultExpanded: null,
|
|
|
+ getDataPath: null,
|
|
|
+ modules: AllModules,
|
|
|
+
|
|
|
+ page: {
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ total: 1
|
|
|
+ },
|
|
|
+
|
|
|
+ roleID: -1,
|
|
|
+ roleRealname: '',
|
|
|
+ searchForm: {
|
|
|
+ name: ''
|
|
|
+ // code: ''
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ multipleSelection: [],
|
|
|
+ roleselectOptions: [],
|
|
|
+ sort: {
|
|
|
+ prop: '',
|
|
|
+ order: ''
|
|
|
+ },
|
|
|
+ editFormVisible: false,
|
|
|
+ orgDialogVisible: false,
|
|
|
+ dialogVisible: false,
|
|
|
+ permissionDialogVisible: false,
|
|
|
+ roleUserDialogVisible: false,
|
|
|
+ containerDialogVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeMount () {
|
|
|
+ this.gridOptions = {
|
|
|
+ rowHeight: 32 // 设置行高为32px
|
|
|
+ // 缺省列属性
|
|
|
+ // defaultColDef: {
|
|
|
+ // width: 200,
|
|
|
+ // resizable: true
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ this.columnDefs = [
|
|
|
+ { headerName: '部门经理', field: 'manager' },
|
|
|
+ { headerName: '部门电话', field: 'inner_phone' },
|
|
|
+ { headerName: '操作', field: 'operation', width: 100, 'pinned': 'right', cellRendererFramework: command }
|
|
|
+ ]
|
|
|
+ this.defaultColDef = { flex: 1 }
|
|
|
+ this.autoGroupColumnDef = {
|
|
|
+ headerName: '部门名称',
|
|
|
+ field: 'full_name',
|
|
|
+ minWidth: 300,
|
|
|
+ cellRendererParams: { suppressCount: true }
|
|
|
+ }
|
|
|
+ this.groupDefaultExpanded = -1
|
|
|
+ this.getDataPath = data => {
|
|
|
+ return data.paths.split('/')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.gridOptions.context = { page: this }
|
|
|
+
|
|
|
+ this.gridApi = this.gridOptions.api
|
|
|
+ this.gridColumnApi = this.gridOptions.columnApi
|
|
|
+ this.doRefresh()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ // 表格就绪后后执行
|
|
|
+ onGridReady (params) {
|
|
|
+ // 调整表格列宽大小自适应
|
|
|
+ this.gridApi.sizeColumnsToFit()
|
|
|
+ },
|
|
|
+ // 执行刷新(获取数据)
|
|
|
+ doRefresh () {
|
|
|
+ let _this = this
|
|
|
+ let query = {
|
|
|
+ size: this.page.size,
|
|
|
+ current: this.page.current,
|
|
|
+ fullname: this.searchForm.name
|
|
|
+ }
|
|
|
+ orgApi.getList(query)
|
|
|
+ .then(res => {
|
|
|
+ _this.rowData = res.records ? res.records : []
|
|
|
+ // _this.page.current = res.current
|
|
|
+ // _this.page.size = res.size
|
|
|
+ _this.page.total = res.total
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.error(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分页-改变分页大小
|
|
|
+ handleSizeChange (value) {
|
|
|
+ this.page.size = value
|
|
|
+ this.page.current = 1
|
|
|
+ this.doRefresh()
|
|
|
+ },
|
|
|
+ // 分页-改变当前页
|
|
|
+ handleCurrentChange (value) {
|
|
|
+ this.page.current = value
|
|
|
+ this.doRefresh()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理编辑
|
|
|
+ handleEdit (id) {
|
|
|
+ this.roleID = id
|
|
|
+ this.editFormVisible = true
|
|
|
+ },
|
|
|
+ // 处理删除
|
|
|
+ handleDelete (id) {
|
|
|
+ const params = {
|
|
|
+ id: id
|
|
|
+ }
|
|
|
+ orgApi.delete(params).then((res) => {
|
|
|
+ this.doRefresh()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查询
|
|
|
+ handleSearch () {
|
|
|
+ this.currentPage = 1
|
|
|
+ this.doRefresh()
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ handleSearchFormReset () {
|
|
|
+ this.searchForm.name = ''
|
|
|
+ this.doRefresh()
|
|
|
+ },
|
|
|
+ add () {
|
|
|
+ let _this = this
|
|
|
+ _this.roleID = -1
|
|
|
+ this.role = {}
|
|
|
+ this.editFormVisible = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理列表选择
|
|
|
+ handleSelectionChange (selection) {
|
|
|
+ this.multipleSelection = selection
|
|
|
+ },
|
|
|
+ handleSortChange (val) {
|
|
|
+ this.sort.prop = val.prop
|
|
|
+ this.sort.order = val.order
|
|
|
+ this.initData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+.el-pagination {
|
|
|
+ margin: 1rem 0 2rem;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.plab {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.rowequippower .el-checkbox {
|
|
|
+ margin-left: 1px;
|
|
|
+ padding: 5px 10px 0 0;
|
|
|
+}
|
|
|
+</style>
|
liuyang