组织管理

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">
@@ -50,9 +52,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>
@@ -99,6 +99,10 @@ export default {
                 flexDirection: 'column',
             },
             noFooter: false,
+            layout: {
+                labelCol: { span: 4 },
+                wrapperCol: { span: 20 },
+            },
         };
     },
     watch: {

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/jobsmanagement/Jobs.vue

+<template>
+    <my-table url="/api/v1/jobs" rowKey="jobId" :addBtn="addBtn" ref="table" noPage>
+        <template #drawer>
+            <Form ref="form" />
+        </template>
+        <!-- <template #search="{ query }">
+            <a-form-model-item label="名称">
+                <a-input v-model="query.jobName" />
+            </a-form-model-item>
+        </template> -->
+
+        <a-table-column title="名称" data-index="jobName" />
+        <a-table-column title="描述" data-index="jobDescription" />
+        <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';
+export default {
+    components: { Form, PopconfirmDelete },
+    data() {
+        return {
+            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
+        };
+    },
+    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/jobsmanagement/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/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;