Merge branch 'feature/chw' into 'master'

Feature/chw

See merge request product/kim3-web-vue/starter-web-vue!8

src/api/organization.js

@@ -8,7 +8,12 @@ function updateJobsApi(data) {
     return putReq('/api/v1/jobs', data);
 }
 
+function getOrganizationList(data) {
+    return getReq('/api/v1/organizations', data);
+}
+
 export default {
-    add: addJobsApi,
-    update: updateJobsApi,
+    addJobs: addJobsApi,
+    updateJobs: updateJobsApi,
+    getOrganizationList: getOrganizationList,
 };

src/components/table/index.vue

 <template>
     <div>
         <div :class="$style.card" v-if="$scopedSlots.search">
-            <a-form-model layout="inline" :model="queryForm">
+            <a-form-model :model="queryForm" layout="horizontal">
+                <a-row :gutter="24">
                     <slot name="search" :query="queryForm" />
+                </a-row>
             </a-form-model>
 
             <div class="tw-text-right tw-mt-2">
@@ -56,9 +58,7 @@
                 <a-divider />
                 <a-space>
                     <a-button @click="addVisible = false">取消</a-button>
-                    <a-button type="primary" @click="submit" :loading="submitLoading">
-                        确认
-                    </a-button>
+                    <a-button type="primary" @click="submit" :loading="submitLoading"> 确认 </a-button>
                 </a-space>
             </template>
         </a-drawer>
@@ -109,6 +109,10 @@ export default {
                 flexDirection: 'column',
             },
             noFooter: false,
+            layout: {
+                labelCol: { span: 4 },
+                wrapperCol: { span: 20 },
+            },
             total: 0,
         };
     },

src/components/table/my_item.vue

+<template>
+    <a-col v-bind="span">
+        <a-form-model-item v-bind="layout">
+            <slot />
+        </a-form-model-item>
+    </a-col>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            span: { xs: 24, sm: 24, lg: 12, xl: 6 },
+            layout: { labelCol: { span: 5 }, wrapperCol: { span: 19 }, ...this.$attrs },
+        };
+    },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/pages/system/view/organization/components/OrganizationTree.vue

+<template>
+    <div>
+        <a-tree-select
+            :value="value"
+            show-search
+            style="width: 100%"
+            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+            placeholder="Please select"
+            :tree-data="treeData"
+            allow-clear
+            tree-default-expand-all
+            :replaceFields="replaceFields"
+            v-on="$listeners"
+        >
+        </a-tree-select>
+    </div>
+</template>
+
+<script>
+import api from '@/api/organization';
+import { arrayToTree } from '@/utils';
+export default {
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: [Object, Array],
+        showMenu: Boolean,
+    },
+    data() {
+        return {
+            treeData: [],
+            replaceFields: {
+                title: 'orgName',
+                key: 'orgId',
+                value: 'orgId',
+            },
+        };
+    },
+    async mounted() {
+        this.rawData = await api.getOrganizationList();
+        const newArr = new arrayToTree({
+            data: this.rawData,
+            rootValue: 0,
+            parentKey: 'parentOrgId',
+            key: 'orgId',
+        }).treeData;
+        this.treeData = [...newArr];
+    },
+};
+</script>

src/pages/system/view/organization/jobmanagement/index.js

-import JobManagement from './JobManagement';
-
-export default JobManagement;

src/pages/system/view/organization/jobmanagement/form.vue → src/pages/system/view/organization/jobsmanagement/form.vue

@@ -26,10 +26,10 @@ export default {
     },
     methods: {
         add() {
-            return JobsApi.add({ ...this.form });
+            return JobsApi.addJobs({ ...this.form });
         },
         edit() {
-            return JobsApi.update({ ...this.form });
+            return JobsApi.updateJobs({ ...this.form });
         },
     },
 };

src/pages/system/view/organization/jobsmanagement/index.js

+import Jobs from './Jobs';
+
+export default Jobs;

src/pages/system/view/organization/usermanagement/User.vue

+<template>
+    <my-table url="/api/v1/users" rowKey="userId" :addBtn="addBtn" ref="table">
+        <template #drawer>
+            <Form ref="form" />
+        </template>
+        <template #search="{ query }">
+            <MyFormModelItem label="归属部门">
+                <OrganizationTree v-model="query.orgId" />
+            </MyFormModelItem>
+            <MyFormModelItem label="账号">
+                <a-input placeholder="Basic usage" v-model="query.loginId" />
+            </MyFormModelItem>
+        </template>
+
+        <a-table-column title="账号" data-index="loginId" />
+        <a-table-column title="姓名" data-index="userName" />
+        <a-table-column title="职称" data-index="userTitleName" />
+        <a-table-column title="移动电话" data-index="mobilePhone" />
+        <a-table-column title="固定电话" data-index="fixedPhone" />
+        <a-table-column title="电子邮箱" data-index="userEmail" />
+        <a-table-column title="是否锁定" data-index="isLockedName" />
+        <a-table-column title="操作">
+            <template #default="row">
+                <a @click="() => view(row, 1)">编辑</a>
+                <a-divider type="vertical" />
+                <PopconfirmDelete :url="`/api/v1/jobs/${row.jobId}`" :cb="refreshTable" />
+            </template>
+        </a-table-column>
+    </my-table>
+</template>
+<script>
+import Form from './form.vue';
+import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+import MyFormModelItem from '@/components/table/my_item.vue';
+import OrganizationTree from '../components/OrganizationTree.vue';
+export default {
+    components: { Form, PopconfirmDelete, OrganizationTree, MyFormModelItem },
+    data() {
+        return {
+            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
+            span: { xs: 12, md: 8, lg: 6 },
+        };
+    },
+    methods: {
+        refreshTable() {
+            this.$refs['table']?.getData();
+        },
+        view(data, type) {
+            this.$refs['table']?.show({ type });
+            this.$nextTick(() => {
+                this.$refs['form'].setData({ ...data }, type);
+            });
+        },
+    },
+};
+</script>
\ No newline at end of file

src/pages/system/view/organization/usermanagement/form.vue

+<template>
+    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+        <a-form-model-item label="名称" prop="jobName">
+            <a-input v-model="form.jobName" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="描述" prop="jobDescription">
+            <a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
+        </a-form-model-item>
+    </a-form-model>
+</template>
+
+<script>
+import JobsApi from '@/api/organization';
+import FormMixin from '@/components/FormMixin';
+export default {
+    mixins: [FormMixin],
+    data() {
+        return {
+            rules: {
+                jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                jobDescription: [
+                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                ],
+            },
+        };
+    },
+    methods: {
+        add() {
+            return JobsApi.addJobs({ ...this.form });
+        },
+        edit() {
+            return JobsApi.updateJobs({ ...this.form });
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/index.js

+import User from './User';
+
+export default User;

src/router/config.js

@@ -78,7 +78,14 @@ const options = {
                                 {
                                     path: 'job_management',
                                     name: '岗位管理',
-                                    component: () => import('@/pages/system/view/organization/jobmanagement'),
+                                    component: () =>
+                                        import('@/pages/system/view/organization/jobsmanagement'),
+                                },
+                                {
+                                    path: 'user_management',
+                                    name: '用户管理',
+                                    component: () =>
+                                        import('@/pages/system/view/organization/usermanagement'),
                                 },
                             ],
                         },

src/utils/index.js

@@ -31,3 +31,60 @@ export function convertListToTree(menuList, filterMenu = false) {
 export function EMPTY_FUN() {}
 
 export const isFunction = val => typeof val === 'function';
+export function arrayToTree(options) {
+    options = JSON.parse(JSON.stringify(options));
+    this.data = options.data || [];
+    this.parentKey = options.parentKey || 'parent_code';
+    this.childrenKey = options.childrenKey || 'children';
+    this.key = options.key || 'code';
+    this.maping = options.maping || undefined;
+    this.rootValue = options.rootValue || '0';
+    this.treeData = [];
+    this.indexStorage = {};
+    this.getDataBykey = function(key) {
+        return this.indexStorage[key];
+    };
+    this.setMapping = function() {
+        for (let i = 0; i < this.data.length; i++) {
+            var item = this.data[i];
+            for (const x in this.maping) {
+                item[this.maping[x]] = item[x];
+            }
+        }
+    };
+    if (this.maping) {
+        this.setMapping();
+    }
+    this.setIndexStorage = function() {
+        for (let i = 0; i < this.data.length; i++) {
+            this.indexStorage[this.data[i][this.key]] = this.data[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
+        }
+    };
+    this.setIndexStorage();
+    // 利用数组浅拷贝
+    this.toTree = function() {
+        const THISDATA = JSON.parse(JSON.stringify(this.data));
+        for (let i = 0; i < this.data.length; i++) {
+            let currentElement = this.data[i];
+            let tempCurrentElementParent = this.indexStorage[currentElement[this.parentKey]]; // 临时变量里面的当前元素的父元素
+            if (tempCurrentElementParent) {
+                // 如果存在父元素
+                if (!tempCurrentElementParent[this.childrenKey]) {
+                    // 如果父元素没有chindren键
+                    tempCurrentElementParent[this.childrenKey] = []; // 设上父元素的children键
+                }
+                tempCurrentElementParent[this.childrenKey].push(currentElement); // 给父元素加上当前元素作为子元素
+            } else {
+                // 不存在父元素，意味着当前元素是一级元素
+                if (this.rootValue != undefined && currentElement[this.key] === this.rootValue) {
+                    this.treeData.push(currentElement);
+                } else {
+                    this.treeData.push(currentElement);
+                }
+            }
+        }
+        return this.treeData;
+    };
+    this.toTree();
+    return this;
+}