系统管理

package.json

@@ -4,6 +4,7 @@
   "homepage": "https://iczer.github.io/vue-antd-admin",
   "private": true,
   "scripts": {
+    "start": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",

src/api/organization.js

 import { delReq, getReq, postReq, putReq } from '@/utils';
 
+function getJobsApi(data) {
+    return getReq('/api/v1/jobs', data);
+}
+
 function addJobsApi(data) {
     return postReq('/api/v1/jobs', data);
 }
@@ -8,12 +12,28 @@ function updateJobsApi(data) {
     return putReq('/api/v1/jobs', data);
 }
 
-function getOrganizationList(data) {
+function getOrganizationListApi(data) {
     return getReq('/api/v1/organizations', data);
 }
 
+function getOrganizationDetailsApi(id) {
+    return getReq(`/api/v1/organizations/${id}`);
+}
+
+function addOrgApi(data) {
+    return postReq('/api/v1/organizations', data);
+}
+
+function updateOrgApi(data) {
+    return putReq('/api/v1/organizations', data);
+}
+
 export default {
     addJobs: addJobsApi,
     updateJobs: updateJobsApi,
-    getOrganizationList: getOrganizationList,
+    getOrganizationList: getOrganizationListApi,
+    getJobs: getJobsApi,
+    getOrganizationDetails: getOrganizationDetailsApi,
+    addOrg: addOrgApi,
+    updateOrg: updateOrgApi,
 };

src/components/Acron/ACron.vue

+<template>
+  <div class="components-input-demo-presuffix">
+    <a-input :placeholder="placeholder" :value="cron" @input="handleinput">
+      <a-icon slot="prefix" type="schedule" title="corn控件" @click="openModal" />
+      <a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空" />
+    </a-input>
+    <AntCron ref="innerVueCron" :data="afterCron" @ok="handleOK"></AntCron>
+  </div>
+</template>
+<script>
+import AntCron from "./AntCron";
+import { replaceWeekName } from "./validator";
+export default {
+  name: "ACron",
+  components: {
+    AntCron
+  },
+  props: {
+    value: {
+      required: false,
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      required: false,
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      cron: this.value,
+      afterCron: ""
+    };
+  },
+  watch: {
+    value(val) {
+      this.cron = val;
+    },
+    cron(val) {
+      console.log(replaceWeekName(val));
+      this.afterCron = replaceWeekName(val);
+      console.log(val);
+      this.$emit("input", val);
+    }
+  },
+  methods: {
+    openModal() {
+      this.$refs.innerVueCron.show();
+    },
+    handleOK(val) {
+      this.cron = val;
+      this.$emit("change", this.cron);
+    },
+    handleinput(evt) {
+      this.cron = evt.target.value;
+      if (this.cron !== "") {
+        this.$emit("change", this.cron);
+      } else {
+        this.$emit("change", undefined);
+      }
+    },
+    handleEmpty() {
+      this.handleOK("");
+    }
+  },
+  model: {
+    prop: "value",
+    event: "change"
+  }
+};
+</script>
+<style scoped>
+.components-input-demo-presuffix .anticon-close-circle {
+  cursor: pointer;
+  color: #ccc;
+  transition: color 0.3s;
+  font-size: 12px;
+}
+.components-input-demo-presuffix .anticon-close-circle:hover {
+  color: #f5222d;
+}
+.components-input-demo-presuffix .anticon-close-circle:active {
+  color: #666;
+}
+</style>
\ No newline at end of file

src/components/Acron/index.js

+import ACron from './ACron'
+
+export default ACron
\ No newline at end of file

src/components/Acron/validator.js

+// import CronParser from 'cron-parser'
+export const WEEK_MAP_EN = {
+    'sun': '0',
+    'mon': '1',
+    'tue': '2',
+    'wed': '3',
+    'thu': '4',
+    'fri': '5',
+    'sat': '6',
+    
+  }
+  
+export const replaceWeekName = (c) => {
+    if (c) {
+        c = c.toLowerCase()
+        Object.keys(WEEK_MAP_EN).forEach(k => {
+        c = c.replace(new RegExp(k, 'g'), WEEK_MAP_EN[k])
+        })
+        c = c.replace(new RegExp('7', 'g'), '0')
+    }
+    return c
+}

src/components/MySelect/index.vue

+<template>
+    <a-select
+        :value="value"
+        style="width: 100%"
+        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+        placeholder="Please select"
+        allow-clear
+        :options="data"
+        v-on="$listeners"
+        v-bind="$attrs"
+    />
+</template>
+
+<script>
+import { formatObj } from '@/utils';
+
+export default {
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: [String, Number, Array],
+        request: Function,
+    },
+    data() {
+        return {
+            data: [],
+        };
+    },
+    async mounted() {
+        if (this.request) {
+            const newArr = await this.request();
+            this.data = await formatObj(newArr, { value: 'jobId', label: 'jobName', key: 'jobId' });
+        }
+    },
+};
+</script>

src/components/table/index.vue

@@ -24,13 +24,22 @@
                     <a-button :type="btn.primary" :key="btn.text">{{ btn.text }}</a-button>
                 </template>
             </a-space>
-
+            <div class="tw-mb-2">
+                <a-alert
+                    v-if="selectedRowKeys.length"
+                    :message="`已选择${selectedRowKeys.length}项`"
+                    type="success"
+                    closable
+                    :after-close="handleClose"
+                />
+            </div>
             <a-table
                 :data-source="data"
                 :loading="loading"
                 v-bind="$attrs"
                 :pagination="pagination"
                 @change="pageChange"
+                :row-selection="isRowSelection"
             >
                 <slot />
             </a-table>
@@ -85,6 +94,7 @@ export default {
         },
         formatData: Function,
         noPage: Boolean,
+        rowSelection: Object, //  radio  OR  checkbox
     },
     data() {
         return {
@@ -114,6 +124,8 @@ export default {
                 wrapperCol: { span: 20 },
             },
             total: 0,
+            selectedRowKeys: [],
+            selectedRows: [],
         };
     },
     watch: {
@@ -135,6 +147,15 @@ export default {
                       total: this.total,
                   };
         },
+        isRowSelection() {
+            return this.rowSelection
+                ? {
+                      ...this.rowSelection,
+                      selectedRowKeys: this.selectedRowKeys,
+                      onChange: this.onSelectChange,
+                  }
+                : undefined;
+        },
     },
 
     methods: {
@@ -202,6 +223,21 @@ export default {
             this.initQuery.pageNum = page.current;
             this.getData();
         },
+
+        onSelectChange(selectedRowKeys, selectedRows) {
+            this.selectedRowKeys = selectedRowKeys;
+            this.selectedRows = selectedRows;
+        },
+        handleClose() {
+            this.selectedRowKeys = [];
+            this.selectedRows = [];
+        },
+        getSelectedRowKeys() {
+            return this.selectedRowKeys;
+        },
+        getTableData() {
+            return this.data;
+        },
     },
 };
 </script>

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

 <template>
-    <div>
     <a-tree-select
         :value="value"
         show-search
@@ -11,9 +10,7 @@
         tree-default-expand-all
         :replaceFields="replaceFields"
         v-on="$listeners"
-        >
-        </a-tree-select>
-    </div>
+    />
 </template>
 
 <script>
@@ -25,7 +22,7 @@ export default {
         event: 'change',
     },
     props: {
-        value: [Object, Array],
+        value: Number,
         showMenu: Boolean,
     },
     data() {

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

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

src/pages/system/view/organization/orgmanagement/Org.vue

+<template>
+    <my-table
+        url="/api/v1/organizations"
+        rowKey="orgId"
+        :addBtn="addBtn"
+        ref="table"
+        :formatData="formatData"
+        noPage
+        :rowSelection="{ type: 'radio', getCheckboxProps, selections: true }"
+    >
+        <template #drawer>
+            <Form ref="form" :tableRef="$refs['table']" />
+        </template>
+        <a-table-column title="名称" data-index="orgName" />
+        <a-table-column title="组织分类" #default="row">
+            <a-tag color="#87d068" v-if="row.orgType === 'ORGANIZATION'"> {{ row.orgTypeName }}</a-tag>
+            <a-tag color="#108ee9" v-if="row.orgType === 'DEPARTMENT'"> {{ row.orgTypeName }}</a-tag>
+        </a-table-column>
+        <a-table-column title="说明" data-index="remark" />
+        <a-table-column title="操作">
+            <template #default="row">
+                <a @click="() => view(row, 1)">编辑</a>
+                <a-divider type="vertical" />
+                <PopconfirmDelete :url="`/api/v1/organizations/${row.orgId}`" :cb="refreshTable" />
+            </template>
+        </a-table-column>
+    </my-table>
+</template>
+<script>
+import Form from './form.vue';
+import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+import { arrayToTree } from '@/utils';
+import api from '@/api/organization';
+
+export default {
+    components: { Form, PopconfirmDelete },
+    data() {
+        return {
+            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit(), openBefore: () => {} },
+            selectedRowKeys: [],
+        };
+    },
+    methods: {
+        refreshTable() {
+            this.$refs['table']?.getData();
+        },
+        async view(data, type) {
+            this.$refs['table']?.show({ type });
+            const detailData = await api.getOrganizationDetails(data.orgId);
+            this.$nextTick(() => {
+                this.$refs['form'].setData({ ...detailData }, type);
+            });
+        },
+        formatData(data) {
+            const newArr = new arrayToTree({
+                data: data,
+                rootValue: 0,
+                parentKey: 'parentOrgId',
+                key: 'orgId',
+            }).treeData;
+            return newArr;
+        },
+        getCheckboxProps(record) {
+            return {
+                props: {
+                    ...record,
+                    disabled: record.orgType === 'DEPARTMENT',
+                },
+            };
+        },
+    },
+};
+</script>
\ No newline at end of file

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

+<template>
+    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+        <a-form-model-item label="组织分类" prop="orgType">
+            <a-select v-model="form.orgType" :disabled="isView">
+                <a-select-option value="ORGANIZATION"> 组织 </a-select-option>
+                <a-select-option value="DEPARTMENT"> 部门 </a-select-option>
+            </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="名称" prop="orgName">
+            <a-input v-model="form.orgName" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="上级组织名称" prop="parentOrgId">
+            <a-select v-model="form.parentOrgId" disabled :options="options" />
+        </a-form-model-item>
+        <a-form-model-item v-if="form.orgType === 'DEPARTMENT'" label="岗位" prop="orgJobs">
+            <MySelect :request="Api.getJobs" v-model="form.orgJobs" mode="multiple" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="显示顺序" prop="viewIndex">
+            <a-input v-model="form.viewIndex" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="描述" prop="remark">
+            <a-textarea v-model="form.remark" :disabled="isView" :rows="4" />
+        </a-form-model-item>
+    </a-form-model>
+</template>
+
+<script>
+import Api from '@/api/organization';
+import FormMixin from '@/components/FormMixin';
+import MySelect from '@/components/MySelect/index.vue';
+export default {
+    mixins: [FormMixin],
+    components: { MySelect },
+    props: {
+        tableRef: Object,
+    },
+    created() {
+        const dataArr = this.tableRef
+            ?.getTableData()
+            .map((i) => ({ value: i.orgId, label: i.orgName, key: i.orgId }));
+        const parentOrgId = this.tableRef?.getSelectedRowKeys()[0];
+        this.options = [...this.options, ...dataArr];
+        this.form.parentOrgId = parentOrgId || 0;
+    },
+    data() {
+        return {
+            options: [{ value: 0, label: '组织更目录', key: 0 }],
+            form: {
+                parentOrgId: 0,
+            },
+            rules: {
+                orgName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                orgType: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                viewIndex: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+            },
+            Api,
+        };
+    },
+    methods: {
+        add() {
+            return Api.addOrg({ ...this.form });
+        },
+        edit() {
+            return Api.updateOrg({ ...this.form });
+        },
+    },
+};
+</script>

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

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

src/router/config.js

@@ -79,20 +79,21 @@ const options = {
                                     path: 'job_management',
                                     name: '岗位管理',
                                     component: () =>
-                                        import('@/pages/system/view/organization/jobsmanagement'),
+                                        import('@/pages/system/view/organization/jobsmanagement/Jobs.vue'),
                                 },
                                 {
                                     path: 'user_management',
                                     name: '用户管理',
                                     component: () =>
-                                        import('@/pages/system/view/organization/usermanagement'),
-                                },
-                            ],
+                                        import('@/pages/system/view/organization/usermanagement/User.vue'),
                                 },
                                 {
-                            path: 'user_management',
-                            name: '用户管理',
-                            component: () => import('@/pages/system/view/user'),
+                                    path: 'org_management',
+                                    name: '机构管理',
+                                    component: () =>
+                                        import('@/pages/system/view/organization/orgmanagement/Org.vue'),
+                                },
+                            ],
                         },
                         {
                             path: 'role_management',

src/utils/index.js

@@ -66,6 +66,7 @@ export function arrayToTree(options) {
         const THISDATA = JSON.parse(JSON.stringify(this.data));
         for (let i = 0; i < this.data.length; i++) {
             let currentElement = this.data[i];
+            currentElement.selectable = currentElement.orgType === 'DEPARTMENT';
             let tempCurrentElementParent = this.indexStorage[currentElement[this.parentKey]]; // 临时变量里面的当前元素的父元素
             if (tempCurrentElementParent) {
                 // 如果存在父元素
@@ -88,3 +89,16 @@ export function arrayToTree(options) {
     this.toTree();
     return this;
 }
+
+// select组件 数据格式化
+export const formatObj = async (ArrObj, obj) => {
+    const newData = [...ArrObj];
+    const newDataOne = await newData.map(i => {
+        const newObj = { ...i };
+        Object.keys(obj).forEach(key => {
+            newObj[key] = i[obj[key]];
+        });
+        return newObj;
+    });
+    return newDataOne;
+};