Merge branch 'feature/chw' into 'master'

yonghu

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

src/api/index.js

-import { request, METHOD } from '@/utils';
+import { request, METHOD, formatObj } from '@/utils';
 export * from './menu';
 export * from './system';
 export * from './task';
@@ -6,3 +6,15 @@ export * from './task';
 export function getUserDetailInfoApi() {
     return request('/api/v1/detail', METHOD.GET);
 }
+export const getStaticParam = async staticKey => {
+    const res = await request('/api/v1/parameters/business/multi/list', METHOD.GET, {
+        queryList: staticKey,
+    });
+    const curData = res.find(i => i.key === staticKey);
+    const newData = await formatObj(curData.businessParameterList || [], {
+        value: 'paramValue',
+        label: 'paramName',
+        key: 'paramId',
+    });
+    return newData;
+};

src/api/organization.js

@@ -43,6 +43,18 @@ function addOperationApi(data) {
 function updateOperationApi(data) {
     return putReq('/api/v1/parameters/operation', data);
 }
+
+function getRolesApi(data) {
+    return getReq('/api/v1/roles', data);
+}
+function getUsersInfoApi({ userId }) {
+    return getReq(`/api/v1/users/${userId}`);
+}
+
+export const addUserApi = data => postReq('/api/v1/users', data);
+
+export const updateUserApi = data => putReq('/api/v1/users', data);
+
 export default {
     addJobs: addJobsApi,
     updateJobs: updateJobsApi,
@@ -55,4 +67,8 @@ export default {
     updateBusiness: updateBusinessApi,
     addOperation: addOperationApi,
     updateOperation: updateOperationApi,
+    getRoles: getRolesApi,
+    getUsersInfo: getUsersInfoApi,
+    addUser: addUserApi,
+    updateUser: updateUserApi,
 };

src/components/MySelect/ParameterSelect.vue

+<template>
+    <a-select
+        :value="value"
+        style="width: 100%"
+        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+        placeholder="Please select"
+        allow-clear
+        :options="data"
+        @change="onChange"
+        v-bind="$attrs"
+    />
+</template>
+
+<script>
+import { formatObj, getReq } from '@/utils';
+
+export default {
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: [String, Number, Array],
+        staticKey: String,
+        formatData: { type: Object, default: undefined },
+        getName: Function,
+    },
+    data() {
+        return {
+            data: [],
+        };
+    },
+    async mounted() {
+        const formatData = this.formatData || { value: 'paramValue', label: 'paramName', key: 'paramId' };
+        const newArr = await getReq('/api/v1/parameters/business/multi/list', {
+            queryList: this.staticKey,
+        });
+
+        const curData = newArr.find((i) => i.key === this.staticKey);
+        this.data = await formatObj(curData.businessParameterList || [], formatData);
+    },
+    methods: {
+        onChange(val, opt) {
+            this.$emit('change', val);
+            this.getName && this.getName(opt?.componentOptions?.children[0]?.text || '');
+        },
+    },
+};
+//
+</script>

src/components/MySelect/RequestSelect.vue

+<template>
+    <a-select
+        :value="value"
+        style="width: 100%"
+        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+        placeholder="Please select"
+        allow-clear
+        :options="data"
+        @change="onChange"
+        v-bind="$attrs"
+    />
+</template>
+
+<script>
+import { formatObj } from '@/utils';
+
+export default {
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: [String, Number, Array],
+        request: Function,
+        formatData: { type: Object, default: undefined },
+        getName: Function,
+    },
+    data() {
+        return {
+            data: [],
+        };
+    },
+    async mounted() {
+        if (this.request) {
+            const newArr = await this.request();
+            this.data = this.formatData ? await formatObj(newArr, this.formatData) : newArr;
+        }
+    },
+    methods: {
+        onChange(val, opt) {
+            this.$emit('change', val);
+            this.getName && this.getName(opt?.componentOptions?.children[0]?.text || '');
+        },
+    },
+};
+</script>

src/components/MySelect/index.vue

@@ -5,34 +5,21 @@
         :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
         placeholder="Please select"
         allow-clear
-        :options="data"
+        :options="options"
         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' });
-        }
+        value: [String, Number],
+        options: Array,
     },
 };
 </script>

src/components/table/drawer.vue

@@ -5,7 +5,7 @@
         :drawerStyle="drawerStyle"
         :bodyStyle="bodyStyle"
         destroyOnClose
-        :width="600"
+        :width="width"
         v-bind="$attrs"
         v-on="$listeners"
         @close="onClose"
@@ -31,8 +31,9 @@
 export default {
     props: {
         oncancel: Function,
-        onok: Function,
+        onOk: Function,
         value: Boolean,
+        width: { type: Number, default: 600 },
     },
     model: {
         prop: 'value',
@@ -64,9 +65,13 @@ export default {
         },
         async ok() {
             this.loading = true;
-            await (this.onok && this.onok());
+            try {
+                await (this.onOk && this.onOk());
+                this.$emit('change', false);
+            } catch {
+                // TODO
+            }
             this.loading = false;
-            this.$emit('change', false);
         },
     },
 };

src/components/upload/uploadList.vue

+<template>
+    <a-upload
+        :customRequest="customRequest"
+        :showUploadList="showUploadList"
+        :fileList="fileList"
+        :remove="onRemove"
+        v-bind="$attrs"
+        list-type="picture"
+    >
+        <slot>
+            <a-button v-if="fileList.length < number"> <a-icon type="upload" /> 上传 </a-button>
+        </slot>
+    </a-upload>
+</template>
+
+<script>
+import { uploadFileApi } from '@/api';
+
+export default {
+    props: {
+        value: [String, Array],
+        modelName: {
+            type: String,
+            default: 'adminSystem',
+        },
+        showUploadList: {
+            type: [Object, Boolean],
+            default: false,
+        },
+        number: {
+            type: Number,
+            default: 5,
+        },
+    },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    data() {
+        return {
+            fileList: [],
+        };
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.fileList = val || [];
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        async customRequest(info) {
+            const { file } = info;
+            const data = {
+                uid: file.uid,
+                status: 'uploading',
+                name: file.name,
+                url: '',
+                thumbUrl: '',
+            };
+            this.fileList = [...this.fileList, data];
+            try {
+                const res = await uploadFileApi(this.modelName, file);
+                data.url = res.fileSrc;
+                data.status = 'done';
+                data.thumbUrl = 'http://platform.kuopu.net:9300/' + res.fileSrc;
+                const newArr = this.fileList.filter((i) => i.uid !== data.uid);
+                this.fileList = [...newArr, data];
+                this.$emit('change', this.fileList);
+            } catch (error) {
+                data.status = 'error';
+                const newArr = this.fileList.filter((i) => i.uid !== data.uid);
+                this.fileList = [...newArr, data];
+            }
+        },
+        onRemove(file) {
+            const newArr = this.fileList.filter((i) => i.uid !== file.uid);
+            this.fileList = [...newArr];
+            this.$emit('change', this.fileList);
+        },
+    },
+};
+</script>

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

@@ -9,10 +9,10 @@
         allow-clear
         tree-default-expand-all
         :replaceFields="replaceFields"
-        v-on="$listeners"
+        @change="onChange"
     />
 </template>
-
+  <!-- v-on="$listeners" -->
 <script>
 import api from '@/api/organization';
 import { arrayToTree } from '@/utils';
@@ -24,6 +24,7 @@ export default {
     props: {
         value: Number,
         showMenu: Boolean,
+        getName: Function,
     },
     data() {
         return {
@@ -45,5 +46,11 @@ export default {
         }).treeData;
         this.treeData = [...newArr];
     },
+    methods: {
+        onChange(value, label, extra) {
+            this.getName && this.getName(label);
+            this.$emit('change', value);
+        },
+    },
 };
 </script>

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

@@ -13,7 +13,13 @@
             <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" />
+            <RequestSelect
+                :formatData="formatData"
+                :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" />
@@ -27,10 +33,11 @@
 <script>
 import Api from '@/api/organization';
 import FormMixin from '@/components/FormMixin';
-import MySelect from '@/components/MySelect/index.vue';
+import RequestSelect from '@/components/MySelect/RequestSelect.vue';
+
 export default {
     mixins: [FormMixin],
-    components: { MySelect },
+    components: { RequestSelect },
     props: {
         tableRef: Object,
     },
@@ -54,6 +61,7 @@ export default {
                 viewIndex: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
             },
             Api,
+            formatData: { value: 'jobId', label: 'jobName', key: 'jobId' },
         };
     },
     methods: {

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

@@ -9,7 +9,7 @@
             </my-form-item>
         </template>
         <template #buttons>
-            <a-button type="primary" @click="onAdd">新增</a-button>
+            <a-button type="primary" @click="() => view()">新增</a-button>
         </template>
 
         <a-table-column title="账号" data-index="loginId" />
@@ -26,13 +26,15 @@
         </a-table-column>
 
         <template #children>
-            <Form ref="form" />
+            <Form ref="form" :refresh="refreshTable" />
         </template>
     </my-table>
 </template>
 <script>
-import Form from './form.vue';
+import Api from '@/api/organization';
 import ActionButton from '@/components/action_button/index.vue';
+import { formatObj } from '@/utils';
+import Form from './form.vue';
 import OrganizationTree from '../components/OrganizationTree.vue';
 
 export default {
@@ -42,11 +44,13 @@ export default {
             buttons: [
                 {
                     label: '编辑',
-                    click: (row) => {},
+                    click: (row) => {
+                        this.view(row, 1);
+                    },
                 },
                 {
                     type: 'confirm',
-                    url: (row) => `/api/v1/jobs/${row.jobId}`,
+                    url: (row) => `/api/v1/users/${row.userId}`,
                     after: () => this.refreshTable(),
                     isHidden: (row) => {
                         return row.userId === 1;
@@ -101,15 +105,36 @@ export default {
         refreshTable() {
             this.$refs['table']?.getData();
         },
-        onAdd() {
+        async view(data = {}, type = 0) {
             this.$refs['form']?.open();
+            if (type !== 0) {
+                const info = await Api.getUsersInfo({ userId: data.userId });
+                const userRoleRelationList = (info.userRoleRelationList || []).map((i) => i.roleId);
+                const userJobRelationList = await formatObj(info.userJobRelationList || [], {
+                    key: 'relationId',
+                });
+                const userCertificateList = await formatObj(info.userCertificateList || [], {
+                    key: 'certificateId',
+                });
+                userCertificateList.map((i) => {
+                    const name = i.pictureUrl.split('/');
+                    const data = {
+                        uid: +new Date(),
+                        status: 'done',
+                        name: name[name.length - 1],
+                        url: i.pictureUrl,
+                        thumbUrl: 'http://platform.kuopu.net:9300/' + i.pictureUrl,
+                    };
+                    i.pictureUrl = [data];
+                });
+                this.$nextTick(() => {
+                    this.$refs['form'].setData(
+                        { ...info, userRoleRelationList, userJobRelationList, userCertificateList },
+                        type,
+                    );
+                });
+            }
         },
-        // view(data, type) {
-        //     this.$refs['table']?.show({ type });
-        //     this.$nextTick(() => {
-        //         this.$refs['form'].setData({ ...data }, type);
-        //     });
-        // },
     },
 };
 </script>

src/pages/system/view/organization/usermanagement/components/Certificate/Certificate.vue

+<template>
+    <div>
+        <a-row :gutter="[16, 16]">
+            <a-col>
+                <a-button type="primary" block @click="onAdd">
+                    <a-icon type="plus-circle" />
+                    添加证件
+                </a-button>
+            </a-col>
+            <CertificateItem
+                v-for="item of value"
+                :key="item.key"
+                :value="item"
+                @del="onItemDel"
+                @edit="onItemEdit"
+            />
+        </a-row>
+        <CertificateFrom ref="CertificateDrawerRef" @submit="onSubmit" />
+    </div>
+</template>
+
+<script>
+import CertificateItem from './CertificateItem.vue';
+import CertificateFrom from './CertificateFrom.vue';
+
+export default {
+    components: { CertificateItem, CertificateFrom },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: Array,
+    },
+
+    methods: {
+        onAdd() {
+            this.$refs['CertificateDrawerRef']?.open();
+        },
+        onItemDel(val) {
+            const newData = this.value.filter((i) => i.key !== val.key);
+            this.$emit('change', newData);
+        },
+        onItemEdit(val) {
+            this.$refs['CertificateDrawerRef']?.open();
+            this.$nextTick(() => {
+                this.$refs['CertificateDrawerRef'].setData(val);
+            });
+        },
+        async onSubmit(val) {
+            const newArr = (this.value || []).filter((i) => i.key !== val?.key);
+            this.$emit('change', [...newArr, val]);
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/Certificate/CertificateFrom.vue

+<template>
+    <Drawer v-model="visible" title="证件编辑" destroyOnClose :width="500" :onOk="onOk">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="CertificateFromRef">
+            <a-form-model-item label="证件类型" prop="certificateType">
+                <MySelect v-model="form.certificateType" :options="certificateTypeOption" />
+            </a-form-model-item>
+            <a-form-model-item label="证件名称" prop="certificateName">
+                <a-input v-model="form.certificateName" />
+            </a-form-model-item>
+            <a-form-model-item label="证件号码" prop="certificateCode">
+                <a-input v-model="form.certificateCode" />
+            </a-form-model-item>
+            <a-form-model-item label="发证机构" prop="authorityDepartment">
+                <MySelect v-model="form.authorityDepartment" :options="authorityDepartmentOption" />
+            </a-form-model-item>
+            <a-form-model-item label="有效期" prop="expirationDate">
+                <a-date-picker class="tw-w-full" v-model="form.expirationDate" />
+            </a-form-model-item>
+            <a-form-model-item label="证件副本" prop="pictureUrl">
+                <Upload v-model="form.pictureUrl" showUploadList :number="1" />
+            </a-form-model-item>
+        </a-form-model>
+    </Drawer>
+</template>
+
+<script>
+import moment from 'moment';
+import MySelect from '@/components/MySelect/index.vue';
+import Drawer from '@/components/table/drawer.vue';
+import FormMixin from '@/components/FormMixin';
+import Upload from '@/components/upload/uploadList.vue';
+import { getStaticParam } from '@/api';
+
+export default {
+    components: { Drawer, MySelect, Upload },
+    mixins: [FormMixin],
+    data() {
+        return {
+            visible: false,
+            form: {},
+            rules: {
+                certificateType: [
+                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                ],
+                certificateName: [
+                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                ],
+                certificateCode: [
+                    { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                ],
+                // authorityDepartment: [
+                //     { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                // ],
+                // expirationDate: [
+                //     { required: true, message: 'Please select Activity zone', trigger: 'change' },
+                // ],
+                // pictureUrl: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+            },
+            certificateTypeOption: [],
+            authorityDepartmentOption: [],
+        };
+    },
+    async mounted() {
+        const certificateTypeOption = await getStaticParam('tfm_sys_user_certificate|certificate_type');
+
+        const authorityDepartmentOption = await getStaticParam(
+            'tfm_sys_user_certificate|authority_department',
+        );
+        this.certificateTypeOption = certificateTypeOption;
+        this.authorityDepartmentOption = authorityDepartmentOption;
+    },
+    methods: {
+        open() {
+            this.form = {};
+            this.visible = true;
+        },
+        setData(data) {
+            const expirationDate = data.expirationDate && moment(data.expirationDate, 'YYYY-MM-DD');
+            this.form = { ...data, expirationDate };
+        },
+        async onOk() {
+            const { key = `${+new Date()}`, expirationDate, ...rest } = this.form;
+            await this.$refs['CertificateFromRef'].validate();
+            const time = expirationDate && (await expirationDate.format('YYYY-MM-DD'));
+            const authorityDepartmentCur = this.authorityDepartmentOption.find((i) => {
+                return (i.paramValue = this.form.authorityDepartment);
+            });
+            const certificateTypeCur = this.certificateTypeOption.find((i) => {
+                return (i.paramValue = this.form.certificateType);
+            });
+
+            const data = {
+                key,
+                ...rest,
+                authorityDepartmentName: authorityDepartmentCur && authorityDepartmentCur.paramName,
+                certificateTypeName: certificateTypeCur && certificateTypeCur.paramName,
+                expirationDate: time && `${time} 00:00:00`,
+            };
+            this.$emit('submit', data);
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/Certificate/CertificateItem.vue

+<template>
+    <a-col :span="12">
+        <a-card hoverable style="width: 100%">
+            <img class="tw-h-40" slot="cover" alt="example" :src="value.pictureUrl[0].thumbUrl" />
+            <template slot="actions" class="ant-card-actions">
+                <div class="tw-h-full" @click="onEdit">编辑</div>
+                <div class="tw-h-full">
+                    <Del class="tw-h-full" :onOk="onDel" />
+                </div>
+            </template>
+            <a-card-meta :title="value.certificateName">
+                <template #description>
+                    <div>证件号码：{{ value.certificateCode }}</div>
+                    <div>有效期：{{ value.expirationDate }}</div>
+                    <div class="tw-mt-2">
+                        <a-tag color="#f50" v-if="value.authorityDepartmentName">
+                            {{ value.authorityDepartmentName }}
+                        </a-tag>
+                        <a-tag color="#2db7f5"> {{ value.certificateTypeName }} </a-tag>
+                    </div>
+                </template>
+            </a-card-meta>
+        </a-card>
+    </a-col>
+</template>
+
+<script>
+import Del from '@/components/popconfirm_delete/index.vue';
+export default {
+    components: { Del },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: Object,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        onEdit() {
+            this.$emit('edit', this.value);
+        },
+        onDel() {
+            this.$emit('del', this.value);
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/FixedPhone.vue

+<template>
+    <a-input-group compact>
+        <a-input style="width: 30%" v-model="code" v-bind="$attrs" />
+        <a-input style="width: 70%" v-model="phone" v-bind="$attrs" />
+    </a-input-group>
+</template>
+
+<script>
+export default {
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    watch: {
+        value(val) {
+            const arr = val?.split('-') || [];
+            this.code = arr[0] || '';
+            this.phone = arr[1] || '';
+        },
+        code(val) {
+            this.$emit('change', `${this.code}-${this.phone}`);
+        },
+        phone(val) {
+            this.$emit('change', `${this.code}-${this.phone}`);
+        },
+    },
+    props: {
+        value: String,
+    },
+    data() {
+        return {
+            code: '',
+            phone: '',
+        };
+    },
+    async mounted() {
+        const arr = this.value?.split('-') || [];
+        this.code = arr[0] || '';
+        this.phone = arr[1] || '';
+    },
+    methods: {},
+};
+</script>

src/pages/system/view/organization/usermanagement/components/Jobs/Jobs.vue

+<template>
+    <div>
+        <a-row :gutter="[16, 16]">
+            <a-col>
+                <a-button type="primary" block @click="onAdd">
+                    <a-icon type="plus-circle" />
+                    添加岗位
+                </a-button>
+            </a-col>
+            <JobsItem
+                v-for="item of value"
+                :key="item.key"
+                :value="item"
+                @del="onItemDel"
+                @edit="onItemEdit"
+            />
+        </a-row>
+        <JobsFrom ref="JobsDrawerRef" @submit="onSubmit" />
+    </div>
+</template>
+
+<script>
+import JobsItem from './JobsItem.vue';
+import JobsFrom from './JobsFrom.vue';
+
+export default {
+    components: { JobsItem, JobsFrom },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: [Array],
+    },
+    methods: {
+        onAdd() {
+            this.$refs['JobsDrawerRef']?.open();
+        },
+        onItemDel(val) {
+            const newData = this.value.filter((i) => i.key !== val.key);
+            this.$emit('change', newData);
+        },
+        onItemEdit(val) {
+            this.$refs['JobsDrawerRef']?.open();
+            this.$nextTick(() => {
+                this.$refs['JobsDrawerRef'].setData(val);
+            });
+        },
+        async onSubmit(val) {
+            const data = {
+                ...val,
+                startDate: `${await val.startDate.format('YYYY-MM-DD')} 00:00:00`,
+                endDate: `${await val.endDate.format('YYYY-MM-DD')} 00:00:00`,
+            };
+
+            const newArr = (this.value || []).filter((i) => i.key !== data?.key);
+            this.$emit('change', [...newArr, data]);
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/Jobs/JobsFrom.vue

+<template>
+    <Drawer v-model="visible" title="证件编辑" destroyOnClose :width="500" :onOk="onOk">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="JobsFormRef">
+            <a-form-model-item label="归属部门" prop="orgId">
+                <OrganizationTree v-model="form.orgId" :getName="getOrgName" />
+            </a-form-model-item>
+            <a-form-model-item label="岗位" prop="jobId">
+                <RequestSelect
+                    v-model="form.jobId"
+                    :request="Api.getJobs"
+                    :formatData="formatData"
+                    :getName="getJobName"
+                />
+            </a-form-model-item>
+            <a-form-model-item label="兼职/全职" prop="isFull">
+                <ParameterSelect
+                    staticKey="tfm_sys_user|isFull"
+                    v-model="form.isFull"
+                    :getName="getFullName"
+                />
+            </a-form-model-item>
+            <a-form-model-item label="开始时间" prop="startDate">
+                <a-date-picker class="tw-w-full" v-model="form.startDate" />
+            </a-form-model-item>
+            <a-form-model-item label="结束时间" prop="endDate">
+                <a-date-picker class="tw-w-full" v-model="form.endDate" />
+            </a-form-model-item>
+        </a-form-model>
+    </Drawer>
+</template>
+
+<script>
+import moment from 'moment';
+import ParameterSelect from '@/components/MySelect/ParameterSelect.vue';
+import RequestSelect from '@/components/MySelect/RequestSelect.vue';
+import Drawer from '@/components/table/drawer.vue';
+import Api from '@/api/organization';
+import FormMixin from '@/components/FormMixin';
+import OrganizationTree from '../../../components/OrganizationTree.vue';
+
+export default {
+    components: { Drawer, ParameterSelect, OrganizationTree, RequestSelect },
+    mixins: [FormMixin],
+    data() {
+        return {
+            Api,
+            visible: false,
+            form: {},
+            rules: {
+                orgId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                jobId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                isFull: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                startDate: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                endDate: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+            },
+            formatData: { value: 'jobId', label: 'jobName', key: 'jobId' },
+            orgName: '',
+            jobName: '',
+            fullName: '',
+        };
+    },
+    async mounted() {},
+    methods: {
+        getOrgName(val) {
+            this.organizationName = val;
+        },
+        getJobName(val) {
+            this.jobName = val;
+        },
+        getFullName(val) {
+            this.fullName = val;
+        },
+        open() {
+            this.form = {};
+            this.visible = true;
+        },
+        setData(data) {
+            const startDate = moment(data.startDate, 'YYYY-MM-DD');
+            const endDate = moment(data.endDate, 'YYYY-MM-DD');
+            const isFull = data.isFull + '';
+            this.form = { ...data, startDate, endDate, isFull };
+        },
+        async onOk() {
+            const { key = +new Date(), ...rest } = this.form;
+            await this.$refs['JobsFormRef'].validate();
+            this.$emit('submit', {
+                ...rest,
+                key,
+                orgName: this.orgName[0] || '',
+                jobName: this.jobName,
+                isFullName: this.fullName,
+            });
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/Jobs/JobsItem.vue

+<template>
+    <a-col :span="12">
+        <a-card hoverable style="width: 100%">
+            <template slot="actions" class="ant-card-actions">
+                <div class="tw-h-full" @click="onEdit">编辑</div>
+                <div class="tw-h-full">
+                    <Del class="tw-h-full" :onOk="onDel" />
+                </div>
+            </template>
+            <a-card-meta :title="`${value.orgName}[${value.jobName}]`">
+                <template #description>
+                    <div>兼职/全职：{{ value.isFullName }}</div>
+                    <div>开始时间：{{ value.startDate }}</div>
+                    <div>结束时间：{{ value.endDate }}</div>
+                </template>
+            </a-card-meta>
+        </a-card>
+    </a-col>
+</template>
+
+<script>
+import Del from '@/components/popconfirm_delete/index.vue';
+
+export default {
+    components: { Del },
+    model: {
+        prop: 'value',
+        event: 'change',
+    },
+    props: {
+        value: Object,
+    },
+    methods: {
+        onEdit() {
+            this.$emit('edit', this.value);
+        },
+        onDel() {
+            this.$emit('del', this.value);
+        },
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/StepsOne.vue

+<template>
+    <a-row :gutter="16">
+        <a-col :span="span">
+            <a-form-model-item label="账号" prop="loginId">
+                <a-input v-model="form.loginId" :disabled="isView" />
+            </a-form-model-item>
+        </a-col>
+        <a-col :span="span">
+            <a-form-model-item label="名称" prop="userName">
+                <a-input v-model="form.userName" :disabled="isView" />
+            </a-form-model-item>
+        </a-col>
+        <a-col :span="24">
+            <a-form-model-item label="角色" prop="userRoleRelationList">
+                <RequestSelect
+                    mode="multiple"
+                    :formatData="formatRoleData"
+                    :request="Api.getRoles"
+                    v-model="form.userRoleRelationList"
+                    :disabled="isView"
+                />
+            </a-form-model-item>
+        </a-col>
+        <a-col :span="span">
+            <a-form-model-item label="职称" prop="userTitle">
+                <ParameterSelect
+                    staticKey="tfm_sys_user|userTitle"
+                    v-model="form.userTitle"
+                    :disabled="isView"
+                />
+            </a-form-model-item>
+        </a-col>
+        <a-col :span="span">
+            <a-form-model-item label="电子邮箱" prop="userEmail">
+                <a-input v-model="form.userEmail" :disabled="isView" />
+            </a-form-model-item>
+        </a-col>
+        <a-col :span="span">
+            <a-form-model-item label="移动电话" prop="mobilePhone">
+                <a-input v-model="form.mobilePhone" :disabled="isView" />
+            </a-form-model-item>
+        </a-col>
+        <a-col :span="span">
+            <a-form-model-item label="固定电话" prop="fixedPhone">
+                <FixedPhone v-model="form.fixedPhone" :disabled="isView" />
+            </a-form-model-item>
+        </a-col>
+    </a-row>
+</template>
+
+<script>
+import Api from '@/api/organization';
+import RequestSelect from '@/components/MySelect/RequestSelect.vue';
+import ParameterSelect from '@/components/MySelect/ParameterSelect.vue';
+import FixedPhone from './FixedPhone.vue';
+export default {
+    components: { RequestSelect, ParameterSelect, FixedPhone },
+    props: {
+        form: Object,
+        isView: Boolean,
+    },
+    data() {
+        return {
+            Api,
+            span: 12,
+            formatRoleData: { value: 'roleId', label: 'roleName', key: 'roleId' },
+        };
+    },
+    methods: {},
+};
+</script>

src/pages/system/view/organization/usermanagement/components/StepsThree.vue

+<template>
+    <Jobs v-model="form.userJobRelationList" />
+</template>
+
+<script>
+import Jobs from './Jobs/Jobs.vue';
+
+export default {
+    components: { Jobs },
+    props: {
+        form: Object,
+        isView: Boolean,
+    },
+};
+</script>

src/pages/system/view/organization/usermanagement/components/StepsTwo.vue

+<template>
+    <Certificate v-model="form.userCertificateList" />
+</template>
+
+<script>
+import Api from '@/api/organization';
+import Certificate from './Certificate/Certificate.vue';
+
+export default {
+    components: { Certificate },
+    props: {
+        form: Object,
+        isView: Boolean,
+    },
+    data() {
+        return {
+            Api,
+        };
+    },
+    methods: {},
+};
+</script>

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

 <template>
     <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>
+        <div class="tw-m-6" />
         <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>
+            <StepsOne v-if="current === 0" :form="form" />
+            <StepsTwo v-if="current === 1" :form="form" />
+            <StepsThree v-if="current === 2" :form="form" />
         </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>
+            <a-button type="primary" @click="onSubmit" v-if="current === 2"> 提交 </a-button>
         </template>
     </Drawer>
 </template>
 
 <script>
 import Drawer from '@/components/table/drawer.vue';
-import JobsApi from '@/api/organization';
+import Api from '@/api/organization';
 import FormMixin from '@/components/FormMixin';
+import StepsOne from './components/StepsOne.vue';
+import StepsTwo from './components/StepsTwo.vue';
+import StepsThree from './components/StepsThree.vue';
+
 export default {
-    components: { Drawer },
+    props: {
+        refresh: Function,
+    },
+    components: { Drawer, StepsOne, StepsTwo, StepsThree },
     mixins: [FormMixin],
     data() {
         return {
             visible: false,
+            form: {},
             rules: {
-                jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
-                jobDescription: [
+                loginId: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                userName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
+                userRoleRelationList: [
                     { required: true, message: 'Please select Activity zone', trigger: 'change' },
                 ],
+                userTitle: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
             },
             current: 0,
             steps: [
@@ -52,24 +55,45 @@ export default {
                     title: '岗位设置',
                 },
             ],
+            Api,
         };
     },
+    async mounted() {},
     methods: {
         open() {
+            this.form = {};
+            this.current = 0;
             this.visible = true;
         },
         next() {
-            this.current++;
+            this.$refs.DrawerForm.validate().then(() => {
+                this.current++;
+            });
         },
         prev() {
             this.current--;
         },
-
-        add() {
-            return JobsApi.addJobs({ ...this.form });
-        },
-        edit() {
-            return JobsApi.updateJobs({ ...this.form });
+        async onSubmit() {
+            if (this.form.userJobRelationList.length === 0) {
+                this.$message.error('必须设置岗位!');
+                return;
+            }
+            const userCertificateList = this.form.userCertificateList.map((i) => {
+                return {
+                    ...i,
+                    pictureUrl: i.pictureUrl[0]?.url || undefined,
+                };
+            });
+            const userRoleRelationList = this.form.userRoleRelationList.map((i) => ({ roleId: i }));
+            const data = { ...this.form, userRoleRelationList, userCertificateList };
+            if (this.form.userId) {
+                await Api.updateUser(data);
+            } else {
+                await Api.addUser(data);
+            }
+            this.visible = false;
+            this.$message.success('操作成功');
+            this.refresh && this.refresh();
         },
     },
 };