Merge branch 'master' into feature/shuiluo

src/components/action_button/index.vue

@@ -50,20 +50,38 @@ export default {
         },
         row: Object,
     },
+    watch: {
+        row() {
+            this.init();
+        },
+    },
+    data() {
+        return {
+            buttonsArr: [],
+        };
+    },
+    created() {
+        this.init();
+    },
     computed: {
         basicBtns() {
-            return this.buttons.length > 3 ? this.buttons.slice(0, 3) : this.buttons;
+            return this.buttonsArr.length > 3 ? this.buttonsArr.slice(0, 3) : this.buttonsArr;
         },
         moreBtns() {
-            return this.buttons.length > 3 ? this.buttons.slice(3) : [];
+            return this.buttonsArr.length > 3 ? this.buttonsArr.slice(3) : [];
         },
     },
-
     methods: {
         getDelUrl(url, row) {
             if (isFunction(url)) return url(row);
             return url;
         },
+        init() {
+            this.buttons.map((i) => {
+                i.__hidden__ = i.isHidden && i.isHidden(this.row);
+            });
+            this.buttonsArr = this.buttons.filter((i) => !i.__hidden__);
+        },
     },
 };
 </script>

src/components/popconfirm_delete/index.vue

@@ -6,11 +6,11 @@
 
 <script>
 import { EMPTY_FUN } from '@/utils';
-import { delReq } from '@/utils';
+import { delReq, getReq, postReq, putReq } from '@/utils';
 
 export default {
     props: {
-        url: String,
+        url: [String, Object],
         cb: {
             type: Function,
             default: EMPTY_FUN,
@@ -30,9 +30,25 @@ export default {
     },
     methods: {
         async confirm() {
-            if (this.url) {
+            if (typeof this.url === 'string') {
                 await delReq(this.url);
             }
+            if (typeof this.url === 'object') {
+                switch (this.url.method) {
+                    case 'get':
+                        await getReq(this.url.url, this.url?.data);
+                        break;
+                    case 'post':
+                        await postReq(this.url.url, this.url?.data);
+                        break;
+                    case 'put':
+                        await putReq(this.url.url, this.url?.data);
+                        break;
+                    case 'del':
+                        await delReq(this.url.url, this.url?.data);
+                        break;
+                }
+            }
             if (this.onOk) {
                 await this.onOk();
             }

src/components/table/drawer.vue

 <template>
     <a-drawer
         placement="right"
-        :visible="visible"
+        :visible="value"
         :drawerStyle="drawerStyle"
         :bodyStyle="bodyStyle"
         destroyOnClose
+        :width="600"
         v-bind="$attrs"
+        v-on="$listeners"
+        @close="onClose"
     >
-        <div class="tw-overflow-y-hidden">
+        <div class="tw-overflow-y-hidden tw-flex-1">
             <div class="tw-overflow-y-auto tw-h-full">
                 <slot />
             </div>
         </div>
         <template>
             <a-divider />
-            <a-space>
-                <slot name="footer">
+            <a-space class="tw-justify-end">
                 <a-button @click="cancel">取消</a-button>
+                <slot name="footer">
                     <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
                 </slot>
             </a-space>
@@ -29,10 +32,14 @@ export default {
     props: {
         oncancel: Function,
         onok: Function,
+        value: Boolean,
+    },
+    model: {
+        prop: 'value',
+        event: 'change',
     },
     data() {
         return {
-            visiable: false,
             loading: false,
             drawerStyle: {
                 display: 'flex',
@@ -48,21 +55,18 @@ export default {
         };
     },
     methods: {
-        show() {
-            this.visiable = true;
-        },
-        hidden() {
-            this.visiable = false;
-        },
         cancel() {
             this.oncancel && this.oncancel();
-            this.visiable = false;
+            this.$emit('change', false);
+        },
+        onClose() {
+            this.cancel();
         },
         async ok() {
             this.loading = true;
             await (this.onok && this.onok());
             this.loading = false;
-            this.visiable = false;
+            this.$emit('change', false);
         },
     },
 };

src/components/table/index.vue

@@ -20,9 +20,7 @@
                 <a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
                     {{ addBtn.text || '新建' }}
                 </a-button>
-                <template v-for="btn of buttons">
-                    <a-button :type="btn.primary" :key="btn.text">{{ btn.text }}</a-button>
-                </template>
+                <slot name="buttons" />
             </a-space>
             <div class="tw-mb-2">
                 <a-alert
@@ -65,12 +63,13 @@
             </div>
             <template v-if="!noFooter">
                 <a-divider />
-                <a-space>
+                <a-space class="tw-justify-end">
                     <a-button @click="addVisible = false">取消</a-button>
                     <a-button type="primary" @click="submit" :loading="submitLoading"> 确认 </a-button>
                 </a-space>
             </template>
         </a-drawer>
+        <slot name="children"></slot>
     </div>
 </template>
 

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>
+    <my-table url="/api/v1/users" rowKey="userId" ref="table">
         <template #search="{ query }">
             <my-form-item label="归属部门">
                 <OrganizationTree v-model="query.orgId" />
@@ -11,6 +8,9 @@
                 <a-input placeholder="Basic usage" v-model="query.loginId" />
             </my-form-item>
         </template>
+        <template #buttons>
+            <a-button type="primary" @click="onAdd">新增</a-button>
+        </template>
 
         <a-table-column title="账号" data-index="loginId" />
         <a-table-column title="姓名" data-index="userName" />
@@ -21,36 +21,95 @@
         <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" />
+                <ActionButton :buttons="buttons" :row="row" />
             </template>
         </a-table-column>
+
+        <template #children>
+            <Form ref="form" />
+        </template>
     </my-table>
 </template>
 <script>
 import Form from './form.vue';
-import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+import ActionButton from '@/components/action_button/index.vue';
 import OrganizationTree from '../components/OrganizationTree.vue';
 
 export default {
-    components: { Form, PopconfirmDelete, OrganizationTree },
+    components: { Form, OrganizationTree, ActionButton },
     data() {
         return {
-            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
-            span: { xs: 12, md: 8, lg: 6 },
+            buttons: [
+                {
+                    label: '编辑',
+                    click: (row) => {},
+                },
+                {
+                    type: 'confirm',
+                    url: (row) => `/api/v1/jobs/${row.jobId}`,
+                    after: () => this.refreshTable(),
+                    isHidden: (row) => {
+                        return row.userId === 1;
+                    },
+                },
+                {
+                    type: 'confirm',
+                    label: '重置',
+                    title: '确认是否重置?',
+                    url: (row) => {
+                        return {
+                            url: `/api/v1/users/${row.userId}/resetting`,
+                            method: 'put',
+                        };
+                    },
+                    after: () => this.refreshTable(),
+                },
+                {
+                    type: 'confirm',
+                    label: '解锁',
+                    title: '确认是否解锁?',
+                    url: (row) => {
+                        return {
+                            url: `/api/v1/users/${row.userId}/unlocking`,
+                            method: 'put',
+                        };
+                    },
+                    after: () => this.refreshTable(),
+                    isHidden: (row) => {
+                        return !row.isLocked;
+                    },
+                },
+                {
+                    type: 'confirm',
+                    label: '锁定',
+                    title: '确认是否锁定?',
+                    url: (row) => {
+                        return {
+                            url: `/api/v1/users/${row.userId}/locking`,
+                            method: 'put',
+                        };
+                    },
+                    after: () => this.refreshTable(),
+                    isHidden: (row) => {
+                        return !!row.isLocked;
+                    },
+                },
+            ],
         };
     },
     methods: {
         refreshTable() {
             this.$refs['table']?.getData();
         },
-        view(data, type) {
-            this.$refs['table']?.show({ type });
-            this.$nextTick(() => {
-                this.$refs['form'].setData({ ...data }, type);
-            });
+        onAdd() {
+            this.$refs['form']?.open();
         },
+        // view(data, type) {
+        //     this.$refs['table']?.show({ type });
+        //     this.$nextTick(() => {
+        //         this.$refs['form'].setData({ ...data }, type);
+        //     });
+        // },
     },
 };
 </script>

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

 <template>
-    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+    <Drawer ref="drawerRef" v-model="visible" title="用户配置">
+        <!-- <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> -->
+
+        <a-steps :current="current">
+            <a-step v-for="item in steps" :key="item.title" :title="item.title" />
+        </a-steps>
+        <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>
+        <template #footer>
+            <a-button type="primary" @click="prev" v-if="current > 0"> 上一步 </a-button>
+            <a-button type="primary" @click="next" v-if="current < 2"> 下一步 </a-button>
+        </template>
+    </Drawer>
 </template>
 
 <script>
+import Drawer from '@/components/table/drawer.vue';
 import JobsApi from '@/api/organization';
 import FormMixin from '@/components/FormMixin';
 export default {
+    components: { Drawer },
     mixins: [FormMixin],
     data() {
         return {
+            visible: false,
             rules: {
                 jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                 jobDescription: [
                     { required: true, message: 'Please select Activity zone', trigger: 'change' },
                 ],
             },
+            current: 0,
+            steps: [
+                {
+                    title: '基本信息',
+                },
+                {
+                    title: '证件设置',
+                },
+                {
+                    title: '岗位设置',
+                },
+            ],
         };
     },
     methods: {
+        open() {
+            this.visible = true;
+        },
+        next() {
+            this.current++;
+        },
+        prev() {
+            this.current--;
+        },
+
         add() {
             return JobsApi.addJobs({ ...this.form });
         },