From 8a614cedd9decd047fa67301df8829c12a56272f Mon Sep 17 00:00:00 2001
From: shuiluo <lzi.love@icloud.com>
Date: Tue, 20 Jul 2021 23:07:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BD=E9=99=85=E5=8C=96=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/index.js                 | 15 ++++++
 src/components/table/index.vue                | 30 +++++------
 src/components/table/table.vue                |  2 -
 src/local/index.js                            | 10 ++--
 src/local/system.js                           |  6 +++
 src/local/table.js                            |  7 ++-
 src/local/user.js                             |  5 ++
 .../organization/jobsmanagement/Jobs.vue      | 54 +++++++++----------
 .../organization/jobsmanagement/form.vue      | 49 +++++++++++------
 .../organization/usermanagement/User.vue      | 45 ++++++++--------
 src/router/config.js                          |  4 +-
 11 files changed, 135 insertions(+), 92 deletions(-)
 create mode 100644 src/components/table/index.js
 create mode 100644 src/local/system.js

diff --git a/src/components/table/index.js b/src/components/table/index.js
new file mode 100644
index 0000000..09cb4f6
--- /dev/null
+++ b/src/components/table/index.js
@@ -0,0 +1,15 @@
+import Wraper from './wraper.vue';
+import Table from './table.vue';
+import MoreItem from './more_item.vue';
+
+export const WraperMixins = {
+    props: { hidden: Function, row: Object, type: String, refresh: Function },
+    components: { Wraper },
+    data() {
+        return {
+            form: {},
+        };
+    },
+};
+
+export { Wraper, Table, MoreItem };
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index 9f4a2db..caba50a 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -1,16 +1,14 @@
 <template>
     <div>
         <my-card v-if="$scopedSlots.search">
-            <a-form-model :model="queryForm" layout="horizontal">
-                <a-row :gutter="16">
-                    <slot name="search" :query="queryForm" />
-                </a-row>
-            </a-form-model>
+            <div class="tw-flex">
+                <slot name="search" :query="queryForm" />
+            </div>
 
             <div class="tw-text-right tw-mt-2">
                 <a-space>
-                    <a-button @click="reset">重置</a-button>
-                    <a-button type="primary" @click="getData">查询</a-button>
+                    <a-button @click="reset">{{ $t('table.reset') }}</a-button>
+                    <a-button type="primary" @click="getData">{{ $t('table.search') }}</a-button>
                 </a-space>
             </div>
         </my-card>
@@ -18,14 +16,14 @@
         <my-card :class="$scopedSlots.search ? 'tw-mt-3' : ''">
             <a-space class="tw-mb-2.5">
                 <a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
-                    {{ addBtn.text || '新建' }}
+                    {{ addBtn.text || $t('table.add') }}
                 </a-button>
                 <slot name="buttons" />
             </a-space>
             <div class="tw-mb-2">
                 <a-alert
                     v-if="selectedRowKeys.length"
-                    :message="`已选择${selectedRowKeys.length}项`"
+                    :message="$t('table.hasSelectedSome', { num: selectedRowKeys.length })"
                     type="success"
                     closable
                     :after-close="handleClose"
@@ -64,8 +62,10 @@
             <template v-if="!noFooter">
                 <a-divider />
                 <a-space class="tw-justify-end">
-                    <a-button @click="addVisible = false">取消</a-button>
-                    <a-button type="primary" @click="submit" :loading="submitLoading"> 确认 </a-button>
+                    <a-button @click="addVisible = false">{{ $t('table.cancel') }}</a-button>
+                    <a-button type="primary" @click="submit" :loading="submitLoading">
+                        {{ $t('table.confirm') }}
+                    </a-button>
                 </a-space>
             </template>
         </a-drawer>
@@ -188,7 +188,7 @@ export default {
             this.addVisible = true;
             this.type = 0;
             this.noFooter = false;
-            this.title = '新增';
+            this.title = this.$t('table.add');
         },
         addDrawerClose() {
             this.addVisible = false;
@@ -206,13 +206,13 @@ export default {
         },
         show({ type, title, noFooter } = {}) {
             if (type === 0) {
-                this.title = '新增';
+                this.title = this.$t('table.add');
             }
             if (type === 1) {
-                this.title = '编辑';
+                this.title = this.$t('table.edit');
             }
             if (type === 2) {
-                this.title = '查看';
+                this.title = this.$t('table.view');
             }
             if (title) {
                 this.title = title;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 4f04690..4ca9ddb 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -18,7 +18,6 @@
 
                     <a-button @click="reset">{{ $t('table.reset') }}</a-button>
                     <a-button type="primary" @click="resetGetData">{{ $t('table.search') }}</a-button>
-
                 </a-space>
             </div>
         </my-card>
@@ -113,7 +112,6 @@ export default {
     },
 
     data() {
-        const newBtn = this.addBtn ? (typeof this.addBtn === 'object' ? this.addBtn : {}) : this.addBtn;
         return {
             initQuery: {
                 ...initQuery,
diff --git a/src/local/index.js b/src/local/index.js
index 14d8a52..b336acb 100644
--- a/src/local/index.js
+++ b/src/local/index.js
@@ -1,6 +1,7 @@
 import selectLang from './select';
-import TableLang from './table';
-import UserLang from './user';
+import tableLang from './table';
+import userLang from './user';
+import systemLang from './system';
 
 const zh_CN = {};
 const en_US = {};
@@ -14,7 +15,8 @@ function formatLang(langObject) {
 }
 
 formatLang(selectLang);
-formatLang(TableLang);
-formatLang(UserLang);
+formatLang(tableLang);
+formatLang(userLang);
+formatLang(systemLang);
 
 export { en_US, zh_CN };
diff --git a/src/local/system.js b/src/local/system.js
new file mode 100644
index 0000000..914b836
--- /dev/null
+++ b/src/local/system.js
@@ -0,0 +1,6 @@
+export default {
+    'system.jobName': ['任务名称', 'Job Name'],
+    'system.jobName.add': ['请输入@:system.jobName', 'Please Input @:system.jobName'],
+    'system.department': ['所属部门', 'Department'],
+    'system.userTitleName': ['用户职称', 'User Title Name'],
+};
diff --git a/src/local/table.js b/src/local/table.js
index 05b151e..728de0a 100644
--- a/src/local/table.js
+++ b/src/local/table.js
@@ -27,5 +27,10 @@ export default {
     'table.confirm': ['确认', 'Confirm'],
     'table.cancel': ['取消', 'Cancel'],
     'table.delete': ['删除', 'Delete'],
-    'table.confirmDelete': ['确认是否删除', 'Confirm To Delete']
+    'table.confirmDelete': ['确认是否删除', 'Confirm To Delete'],
+    'table.describe': ['描述', 'Describe'],
+    'table.describe.add': ['请输入描述信息', 'Please Input @:table.describe'],
+    'table.confirmReset': ['确认是否重置', 'Confirm Reset'],
+    'table.hasSelectedSome': ['已选择{num}项', '{num} have been selected'],
+    'table.view': ['查看', 'View'],
 };
diff --git a/src/local/user.js b/src/local/user.js
index 9b89419..4e8bd18 100644
--- a/src/local/user.js
+++ b/src/local/user.js
@@ -24,4 +24,9 @@ export default {
     'user.twoInconsistent': ['两次密码不一致', 'The two passwords are inconsistent'],
     'user.modifiedSuccessfully': ['修改成功', 'Modified successfully'],
     'user.serverException': ['服务器异常', 'Server exception'],
+    'user.isLocked': ['是否锁定', 'Is Locked'],
+    'user.deblocking': ['解锁', 'Deblocking'],
+    'user.confirmUnlock': ['确认是否解锁', 'Confirm Whether To Unlock'],
+    'user.locking': ['锁定', 'Locking'],
+    'user.confirmLocked': ['确认是否锁定', 'Confirm Locked'],
 };
diff --git a/src/pages/system/organization/jobsmanagement/Jobs.vue b/src/pages/system/organization/jobsmanagement/Jobs.vue
index 4bd4e93..b13c725 100644
--- a/src/pages/system/organization/jobsmanagement/Jobs.vue
+++ b/src/pages/system/organization/jobsmanagement/Jobs.vue
@@ -1,44 +1,40 @@
 <template>
-    <my-table url="/api/v1/jobs" rowKey="jobId" :addBtn="addBtn" ref="table" noPage>
-        <template #drawer>
-            <Form ref="form" />
+    <Table url="/api/v1/jobs" rowKey="jobId" addBtn ref="table" :drawerWidth="600" noPage :buttons="buttons">
+        <template #drawer="drawer">
+            <Form v-bind="drawer" />
         </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>
+        <a-table-column :title="$t('system.jobName')" data-index="jobName" />
+        <a-table-column :title="$t('table.describe')" data-index="jobDescription" />
+    </Table>
 </template>
+
 <script>
 import Form from './form.vue';
-import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+import { Table } from '@/components/table';
+
 export default {
-    components: { Form, PopconfirmDelete },
-    data() {
-        return {
-            addBtn: { width: 600, onOk: () => this.$refs['form']?.submit() },
-        };
+    components: { Form, Table },
+
+    computed: {
+        buttons() {
+            return [
+                { label: this.$t('table.edit'), click: this.edit },
+                {
+                    type: 'confirm',
+                    url: (row) => `/api/v1/jobs/${row.jobId}`,
+                    after: this.refreshTable,
+                },
+            ];
+        },
     },
+
     methods: {
         refreshTable() {
             this.$refs['table']?.getData();
         },
-        view(data, type) {
-            this.$refs['table']?.show({ type });
-            this.$nextTick(() => {
-                this.$refs['form'].setData({ ...data }, type);
-            });
+        edit(row) {
+            this.$refs.table.show({ row, title: this.$t('table.edit'), type: 'edit' });
         },
     },
 };
diff --git a/src/pages/system/organization/jobsmanagement/form.vue b/src/pages/system/organization/jobsmanagement/form.vue
index 7b8a493..7b08d6e 100644
--- a/src/pages/system/organization/jobsmanagement/form.vue
+++ b/src/pages/system/organization/jobsmanagement/form.vue
@@ -1,35 +1,50 @@
 <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>
+    <Wraper :hidden="hidden" :refresh="refresh" :onOk="submit">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
+            <a-form-model-item :label="$t('system.jobName')" prop="jobName">
+                <a-input v-model="form.jobName" />
+            </a-form-model-item>
+            <a-form-model-item :label="$t('table.describe')" prop="jobDescription">
+                <a-textarea v-model="form.jobDescription" :rows="4" />
+            </a-form-model-item>
+        </a-form-model>
+    </Wraper>
 </template>
 
 <script>
 import JobsApi from '@/api/organization';
-import FormMixin from '@/components/FormMixin';
+import { WraperMixins } from '@/components/table';
+
 export default {
-    mixins: [FormMixin],
+    mixins: [WraperMixins],
     data() {
         return {
             rules: {
-                jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                jobName: [{ required: true, message: this.$t('system.jobName.add'), trigger: 'change' }],
                 jobDescription: [
-                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                    { required: true, message: this.$t('table.describe.add'), trigger: 'change' },
                 ],
             },
         };
     },
-    methods: {
-        add() {
-            return JobsApi.addJobs({ ...this.form });
+    mounted() {
+        if (this.row) {
+            this.form = { ...this.row };
+        }
+    },
+    computed: {
+        isEdit() {
+            return this.type === 'edit';
         },
-        edit() {
-            return JobsApi.updateJobs({ ...this.form });
+        isAdd() {
+            return this.type === null;
+        },
+    },
+    methods: {
+        async submit() {
+            await this.$refs.form.validate();
+            if (this.isAdd) return JobsApi.addJobs({ ...this.form });
+            if (this.isEdit) return JobsApi.updateJobs({ ...this.form });
         },
     },
 };
diff --git a/src/pages/system/organization/usermanagement/User.vue b/src/pages/system/organization/usermanagement/User.vue
index 3a41819..ca11a82 100644
--- a/src/pages/system/organization/usermanagement/User.vue
+++ b/src/pages/system/organization/usermanagement/User.vue
@@ -1,25 +1,25 @@
 <template>
     <my-table url="/api/v1/users" rowKey="userId" ref="table">
         <template #search="{ query }">
-            <my-form-item label="归属部门">
+            <MoreItem :label="$t('system.department')">
                 <OrganizationTree v-model="query.orgId" />
-            </my-form-item>
-            <my-form-item label="账号">
-                <a-input placeholder="Basic usage" v-model="query.loginId" />
-            </my-form-item>
+            </MoreItem>
+            <MoreItem :label="$t('user.account')">
+                <a-input :placeholder="$t('input.placeholder')" v-model="query.loginId" />
+            </MoreItem>
         </template>
         <template #buttons>
-            <a-button type="primary" @click="() => view()">新增</a-button>
+            <a-button type="primary" @click="() => view()">{{ $t('table.add') }}</a-button>
         </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="操作">
+        <a-table-column :title="$t('user.account')" data-index="loginId" />
+        <a-table-column :title="$t('user.name')" data-index="userName" />
+        <a-table-column :title="$t('system.userTitleName')" data-index="userTitleName" />
+        <a-table-column :title="$t('user.mobilePhone')" data-index="mobilePhone" />
+        <a-table-column :title="$t('user.fixedPhone')" data-index="fixedPhone" />
+        <a-table-column :title="$t('user.email')" data-index="userEmail" />
+        <a-table-column :title="$t('user.isLocked')" data-index="isLockedName" />
+        <a-table-column :title="$t('table.operation')">
             <template #default="row">
                 <ActionButton :buttons="buttons" :row="row" />
             </template>
@@ -36,14 +36,15 @@ import ActionButton from '@/components/action_button/index.vue';
 import { formatObj } from '@/utils';
 import Form from './form.vue';
 import OrganizationTree from '../components/OrganizationTree.vue';
+import { MoreItem } from '@/components/table';
 
 export default {
-    components: { Form, OrganizationTree, ActionButton },
+    components: { Form, OrganizationTree, ActionButton, MoreItem },
     data() {
         return {
             buttons: [
                 {
-                    label: '编辑',
+                    label: this.$t('table.edit'),
                     click: (row) => {
                         this.view(row, 1);
                     },
@@ -58,8 +59,8 @@ export default {
                 },
                 {
                     type: 'confirm',
-                    label: '重置',
-                    title: '确认是否重置?',
+                    label: this.$t('table.reset'),
+                    title: this.$t('table.confirmReset'),
                     url: (row) => {
                         return {
                             url: `/api/v1/users/${row.userId}/resetting`,
@@ -70,8 +71,8 @@ export default {
                 },
                 {
                     type: 'confirm',
-                    label: '解锁',
-                    title: '确认是否解锁?',
+                    label: this.$t('user.deblocking'),
+                    title: this.$t('user.confirmUnlock'),
                     url: (row) => {
                         return {
                             url: `/api/v1/users/${row.userId}/unlocking`,
@@ -85,8 +86,8 @@ export default {
                 },
                 {
                     type: 'confirm',
-                    label: '锁定',
-                    title: '确认是否锁定?',
+                    label: this.$t('user.locking'),
+                    title: this.$t('user.confirmLocked'),
                     url: (row) => {
                         return {
                             url: `/api/v1/users/${row.userId}/locking`,
diff --git a/src/router/config.js b/src/router/config.js
index 2713b6c..89c8931 100644
--- a/src/router/config.js
+++ b/src/router/config.js
@@ -154,7 +154,7 @@ const hasAuthorityRoutes = [
                         component: RouterView,
                         children: [
                             {
-                                path: 'job',
+                                path: 'jobs',
                                 name: '岗位管理',
                                 component: () =>
                                     import('@/pages/system/organization/jobsmanagement/Jobs.vue'),
@@ -166,7 +166,7 @@ const hasAuthorityRoutes = [
                                     import('@/pages/system/organization/usermanagement/User.vue'),
                             },
                             {
-                                path: 'org',
+                                path: 'manager',
                                 name: '机构管理',
                                 component: () => import('@/pages/system/organization/orgmanagement/Org.vue'),
                             },
-- 
GitLab