人员管理-单位管理功能开发

src/api/org/org.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+const orgApi = {
+  add: 'sys/org/add',
+  edit: 'sys/org/edit',
+  del: 'sys/org/del',
+  list: 'sys/org/list',
+  page: 'sys/org/pageList',
+}
+
+export function orgAdd (params) {
+  return request({
+    url: orgApi.add,
+    method: 'post',
+    data: params
+  })
+}
+export function orgEdit (params) {
+  return request({
+    url: orgApi.edit,
+    method: 'post',
+    data: params
+  })
+}
+export function orgDel (params) {
+  return request({
+    url: orgApi.del,
+    method: 'post',
+    params: params
+  })
+}
+export function orgList (params) {
+  return request({
+    url: orgApi.list,
+    method: 'get',
+    params: params
+  })
+}
+export function orgPage (params) {
+  return request({
+    url: orgApi.page,
+    method: 'get',
+    params: params
+  })
+}

src/layouts/BasicLayout.less

@@ -34,3 +34,9 @@
   }
 }
 
+.ant-layout-sider {
+	flex: 0 0 230px !important;
+	max-width: 230px !important;
+	min-width: 230px !important;
+	width: 230px !important;
+}

src/views/org/OrgForm.vue

@@ -0,0 +1,205 @@
+<template>
+  <a-modal
+    :title="modalTitle"
+    :width="900"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="formLoading">
+      <a-form :form="form">
+        
+        <a-form-item
+          style="display: none;"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          has-feedback
+        >
+          <a-input v-decorator="['id']" />
+        </a-form-item>
+        
+        <a-form-item
+          label="机构名称"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          has-feedback
+        >
+          <a-input placeholder="请输入机构名称" v-decorator="['name', {rules: [{required: true, message: '请输入机构名称！'}]}]" />
+        </a-form-item>
+
+        <a-form-item
+          label="唯一编码"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          has-feedback
+        >
+          <a-input placeholder="请输入唯一编码" v-decorator="['code', {rules: [{required: true, message: '请输入唯一编码！'}]}]" />
+        </a-form-item>
+
+        <a-form-item
+          label="上级机构"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          has-feedback
+        >
+          <a-tree-select
+            v-decorator="['pid', {rules: [{ required: true, message: '请选择上级机构！' }]}]"
+            style="width: 100%"
+            :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
+            :treeData="orgTree"
+            placeholder="请选择上级机构"
+            :replaceFields="replaceFields"
+          >
+            <span slot="title" slot-scope="{ id }">{{ id }}
+            </span>
+          </a-tree-select>
+        </a-form-item>
+
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="排序"
+        >
+          <a-input-number placeholder="请输入排序" style="width: 100%" v-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" />
+        </a-form-item>
+
+        <a-form-item
+          label="备注"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          has-feedback
+        >
+          <a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
+        </a-form-item>
+
+      </a-form>
+
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { orgAdd, orgEdit, orgList } from '@/api/org/org'
+  import { listToTree } from '@/utils/util'
+  const rootParentId = 0
+  
+  export default {
+    data () {
+      return {
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 }
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 15 }
+        },
+        orgTree: [],
+        modalTitle: "新增机构",
+        visible: false,
+        confirmLoading: false,
+        formLoading: true,
+        replaceFields: {
+          children:'children',
+          title:'name',
+          key:'id',
+          value:'id'
+        },
+        form: this.$form.createForm(this)
+      }
+    },
+    methods: {
+      // 新增初始化方法
+      add () {
+        this.visible = true
+        this.modalTitle = '新增机构'
+        this.getOrgTree()
+      },
+      // 编辑初始化方法
+      edit (record) {
+        this.visible = true
+        this.modalTitle = '编辑机构'
+        this.getOrgTree()
+        setTimeout(() => {
+          this.form.setFieldsValue(
+            {
+              id: record.id,
+              name: record.name,
+              code: record.code,
+              sort: record.sort,
+              pid: record.pid,
+              remark: record.remark
+            }
+          )
+        }, 100)
+      },
+      /**
+       * 获取机构树，并加载于表单中
+       */
+      getOrgTree () {
+        orgList().then((res) => {
+          this.formLoading = false
+          if (!res.code === 200) {
+            this.orgTree = []
+            return
+          }
+          const orgList = listToTree(res.data, [], rootParentId)
+          this.orgTree = [{
+            'id': '-1',
+            'parentId': '0',
+            'name': '顶级',
+            'value': '0',
+            'pid': '0',
+            'children': orgList
+          }]
+        })
+      },
+
+      handleSubmit () {
+        const { form: { validateFields } } = this
+        this.confirmLoading = true
+        validateFields((errors, values) => {
+          if (!errors) {
+            if (values.id) {
+              orgEdit(values).then((res) => {
+                if (res.code === 200) {
+                  this.$message.success('编辑成功')
+                  this.visible = false
+                  this.confirmLoading = false
+                  this.$emit('ok', values)
+                  this.form.resetFields()
+                } else {
+                  this.$message.error('编辑失败：' + res.message)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            } else {
+              orgAdd(values).then((res) => {
+                if (res.code === 200) {
+                  this.$message.success('新增成功')
+                  this.visible = false
+                  this.confirmLoading = false
+                  this.$emit('ok', values)
+                  this.form.resetFields()
+                } else {
+                  this.$message.error('新增失败：' + res.message)
+                }
+              }).finally((res) => {
+                this.confirmLoading = false
+              })
+            }  
+            
+          } else {
+            this.confirmLoading = false
+          }
+        })
+      },
+      handleCancel () {
+        this.form.resetFields()
+        this.visible = false
+      }
+    }
+  }
+</script>

src/views/org/OrgList.vue

@@ -0,0 +1,198 @@
+<template>
+  <a-row :gutter="24" >
+    <a-col :md="5" :sm="24" >
+      <a-card :bordered="false" :loading="treeLoading">
+        <div v-if="this.orgTree!='' ">
+          <a-tree
+            style="scroll:true"
+            :treeData="orgTree"
+            v-if="orgTree.length"
+            @select="handleClick"
+            :defaultExpandAll="true"
+            :defaultExpandedKeys="defaultExpandedKeys"
+            :replaceFields="replaceFields" />
+        </div>
+        <div v-else>
+          <a-empty :image="simpleImage" />
+        </div>
+      </a-card>
+    </a-col>
+    <a-col :md="19" :sm="24">
+      <a-card :bordered="false">
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline">
+            <a-row :gutter="48">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="机构名称" >
+                  <a-input v-model="queryParam.name" allow-clear placeholder="请输入机构名称"/>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+      </a-card>
+      <a-card :bordered="false">
+
+        <div class="table-operator">
+          <a-button @click="$refs.orgForm.add()" icon="plus" type="primary" v-if="hasPerm('sys:org:add')">新增机构</a-button>
+        </div>
+
+        <s-table
+          ref="table"
+          :columns="columns"
+          :data="loadData"
+          :rowKey="(record) => record.id"
+        >
+
+          <span slot="action" slot-scope="text, record">
+            <a v-if="hasPerm('sys:org:edit')" @click="$refs.orgForm.edit(record)">编辑</a>
+            <a-divider type="vertical" v-if="hasPerm('sys:org:edit') & hasPerm('sys:org:delete')"/>
+            <a-popconfirm v-if="hasPerm('sys:org:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+        </s-table>
+        <org-form ref="orgForm" @ok="handleOk" />
+      </a-card>
+    </a-col>
+  </a-row>
+</template>
+<script>
+  import { STable } from '@/components'
+  import { Empty } from 'ant-design-vue'
+  import { orgList, orgDel, orgPage } from '@/api/org/org'
+  import OrgForm from './OrgForm'
+  import { listToTree } from '@/utils/util'
+  const rootParentId = 0
+
+  export default {
+    components: {
+      STable,
+      OrgForm
+    },
+    data () {
+      return {
+        // 查询参数
+        queryParam: {},
+        // 表头
+        columns: [
+          {
+            title: '机构名称',
+            dataIndex: 'name'
+          },
+          {
+            title: '唯一编码',
+            dataIndex: 'code'
+          },
+          {
+            title: '排序',
+            dataIndex: 'sort'
+          },
+          {
+            title: '备注',
+            dataIndex: 'remark'
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return orgPage(Object.assign(parameter, this.queryParam)).then((res) => {
+            return res
+          })
+        },
+        orgTree: [],
+        selectedRowKeys: [],
+        selectedRows: [],
+        defaultExpandedKeys: [],
+        // 搜索的三个参数
+        expandedKeys: [],
+        searchValue: '',
+        autoExpandParent: true,
+        treeLoading: true,
+        simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
+        replaceFields: {
+          children: 'children',
+          title: 'name',
+          key: 'id',
+          value: 'id'
+        }
+      }
+    },
+    created () {
+      this.getOrgTree()
+      if (this.hasPerm('sys:org:edit') || this.hasPerm('sys:org:del')) {
+        this.columns.push({
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        })
+      }
+    },
+    methods: {
+      /**
+       * 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
+       */
+      getOrgTree () {
+        orgList(Object.assign(this.queryParam)).then(res => {
+          this.treeLoading = false
+          if (!res.code === 200 || !res.data.length) {
+            return
+          }
+          console.log(res.data)
+          this.orgTree = listToTree(res.data, [], rootParentId)
+          console.log(this.orgTree)
+          this.queryParam.parentId = this.orgTree[0].id
+          // 全部展开，上面api方法提供的不生效，先用此方法
+          for (var item of res.data) {
+            if (item.parentId === 0) {
+              this.defaultExpandedKeys.push(item.id)
+            }
+          }
+          this.$refs.table.refresh()
+        })
+      },
+      /**
+       * 删除
+       */
+      sysOrgDelete (record) {
+        orgDel({ id: record.id, deleteReason: '' }).then((res) => {
+          if (res.code === 200) {
+            this.$message.success('删除成功')
+            this.getOrgTree()
+            this.$refs.table.clearRefreshSelected()
+          } else {
+            this.$message.error('删除失败：' + res.message)
+          }
+        }).catch((err) => {
+          this.$message.error('删除错误：' + err.message)
+        })
+      },
+      handleClick (e) {
+        this.queryParam = {
+          pid: e.toString()
+        }
+        this.$refs.table.refresh(true)
+      },
+      handleOk () {
+        this.getOrgTree()
+        this.$refs.table.refresh()
+      },
+      onSelectChange (selectedRowKeys, selectedRows) {
+        this.selectedRowKeys = selectedRowKeys
+        this.selectedRows = selectedRows
+      }
+    }
+  }
+</script>
+<style lang="less">
+  .table-operator {
+    margin-bottom: 18px;
+  }
+  button {
+    margin-right: 8px;
+  }
+</style>

src/views/role/RoleList.vue

@@ -1,168 +0,0 @@
-<template>
-  <a-card :bordered="false" :style="{ height: '100%' }">
-    <a-row :gutter="24">
-      <a-col :md="4">
-        <a-list itemLayout="vertical" :dataSource="roles">
-          <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
-            <a-list-item-meta :style="{ marginBottom: '0' }">
-              <span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
-              <a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
-            </a-list-item-meta>
-          </a-list-item>
-        </a-list>
-      </a-col>
-      <a-col :md="20">
-        <div style="max-width: 800px">
-          <a-divider v-if="isMobile()" />
-          <div v-if="mdl.id">
-            <h3>角色：{{ mdl.name }}</h3>
-          </div>
-          <a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
-            <a-form-item label="唯一键">
-              <a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
-            </a-form-item>
-
-            <a-form-item label="角色名称">
-              <a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
-            </a-form-item>
-
-            <a-form-item label="状态">
-              <a-select v-decorator="[ 'status', {rules: []} ]">
-                <a-select-option :value="1">正常</a-select-option>
-                <a-select-option :value="2">禁用</a-select-option>
-              </a-select>
-            </a-form-item>
-
-            <a-form-item label="备注说明">
-              <a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
-            </a-form-item>
-
-            <a-form-item label="拥有权限">
-              <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
-                <a-col :xl="4" :lg="24">
-                  {{ permission.name }}：
-                </a-col>
-                <a-col :xl="20" :lg="24">
-                  <a-checkbox
-                    v-if="permission.actionsOptions.length > 0"
-                    :indeterminate="permission.indeterminate"
-                    :checked="permission.checkedAll"
-                    @change="onChangeCheckAll($event, permission)">
-                    全选
-                  </a-checkbox>
-                  <a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
-                </a-col>
-              </a-row>
-            </a-form-item>
-          </a-form>
-        </div>
-      </a-col>
-    </a-row>
-  </a-card>
-</template>
-
-<script>
-import pick from 'lodash.pick'
-import { getRoleList, getPermissions } from '@/api/manage'
-import { actionToObject } from '@/utils/permissions'
-import { baseMixin } from '@/store/app-mixin'
-
-export default {
-  name: 'RoleList',
-  mixins: [baseMixin],
-  components: {},
-  data () {
-    return {
-      form: this.$form.createForm(this),
-      mdl: {},
-
-      roles: [],
-      permissions: []
-    }
-  },
-  created () {
-    getRoleList().then((res) => {
-      this.roles = res.result.data
-      this.roles.push({
-        id: '-1',
-        name: '新增角色',
-        describe: '新增一个角色'
-      })
-      console.log('this.roles', this.roles)
-    })
-    this.loadPermissions()
-  },
-  methods: {
-    callback (val) {
-      console.log(val)
-    },
-
-    add () {
-      this.edit({ id: 0 })
-    },
-
-    edit (record) {
-      this.mdl = Object.assign({}, record)
-      // 有权限表，处理勾选
-      if (this.mdl.permissions && this.permissions) {
-        // 先处理要勾选的权限结构
-        const permissionsAction = {}
-        this.mdl.permissions.forEach(permission => {
-          permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
-        })
-
-        console.log('permissionsAction', permissionsAction)
-        // 把权限表遍历一遍，设定要勾选的权限 action
-        this.permissions.forEach(permission => {
-          const selected = permissionsAction[permission.id]
-          permission.selected = selected || []
-          this.onChangeCheck(permission)
-        })
-
-        console.log('this.permissions', this.permissions)
-      }
-
-      this.$nextTick(() => {
-        this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
-      })
-      console.log('this.mdl', this.mdl)
-    },
-
-    onChangeCheck (permission) {
-      permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
-      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
-    },
-    onChangeCheckAll (e, permission) {
-      console.log('permission:', permission)
-
-      Object.assign(permission, {
-        selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
-        indeterminate: false,
-        checkedAll: e.target.checked
-      })
-    },
-    loadPermissions () {
-      getPermissions().then(res => {
-        const result = res.result
-        this.permissions = result.map(permission => {
-          const options = actionToObject(permission.actionData)
-          permission.checkedAll = false
-          permission.selected = []
-          permission.indeterminate = false
-          permission.actionsOptions = options.map(option => {
-            return {
-              label: option.describe,
-              value: option.action
-            }
-          })
-          return permission
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/security/menu/MenuForm.vue

@@ -67,7 +67,6 @@
                   :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                   :treeData="menuTreeData"
                   placeholder="请选择父级菜单"
-                  treeDefaultExpandAll
                   :replaceFields="{
                     children:'children',
                     title:'name',