Merge branch 'master' of http://118.178.224.202:3000/ewide/ewide_core

web-react/src/pages/system/user/form.jsx

@@ -1,13 +1,15 @@
 import React, { Component } from 'react'
-import { Cascader, Form, Input, InputNumber, Select, Spin, TreeSelect } from 'antd'
+import { Button, Row, Col, Form, Input, DatePicker, Radio, Table, Select, Spin, TreeSelect } from 'antd'
 import { AntIcon } from 'components'
 import { cloneDeep } from 'lodash'
 import getDictData from 'util/dic'
 import { EMPTY_ID } from 'util/global'
 import { api } from 'common/api'
+import moment from 'moment'
 
 const initialValues = {
-    sort: 100
+    sex: 0,
+    sysEmpParam: {}
 }
 
 export default class form extends Component {
@@ -15,17 +17,74 @@ export default class form extends Component {
     state = {
         // 加载状态
         loading: true,
-
         codes: {
             orgType: []
         },
 
         options: {
             orgData: [],
-            areaData: []
+            posData: []
+        },
+        sysEmpParam: {
+            extIds: []
         }
     }
-
+    extColumns = [
+        {
+            title: '附属机构',
+            dataIndex: 'orgId',
+            width: '45%',
+            render: (text, record, index) => (
+                <Form.Item name={['sysEmpParam', 'extIds', index, 'orgId']}>
+                    <TreeSelect
+                        defaultValue={text}
+                        treeData={this.state.options.orgData}
+                        className="w-100-p"
+                        dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                        treeDefaultExpandAll
+                        placeholder="请选择附加组织机构"
+                    />
+                </Form.Item>
+            )
+        },
+        {
+            title: '附属岗位',
+            dataIndex: 'posId',
+            width: '45%',
+            render: (text, record, index) => (
+                <Form.Item name={['sysEmpParam', 'extIds', index, 'posId']}>
+                    <Select
+                        defaultValue={text}
+                        className="w-100-p"
+                        placeholder="请选择附加职位信息">
+                        {
+                            this.state.options.posData.map(item => {
+                                return <Select.Option
+                                    key={item.id}
+                                    value={item.id}
+                                >
+                                    {item.name}</Select.Option>
+                            })
+                        }
+                    </Select>
+                </Form.Item>
+            )
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: '70px',
+            render: (text, record) => (
+                <Button
+                    onClick={() => this.onRemoveExtData(record)}
+                    size="small"
+                    danger
+                >
+                    删除
+                </Button>
+            )
+        },
+    ]
     // 表单实例
     form = React.createRef()
 
@@ -46,54 +105,63 @@ export default class form extends Component {
      * @param {*} params 
      */
     async fillData(params) {
-
+        this.record = cloneDeep(params.record || {})
-        this.record = cloneDeep(params.record)
         //#region 从后端转换成前段所需格式
         const orgData = await this.loadOrgData()
-        const areaData = await this.loadAreaData()
+        const posData = await this.loadPosData()
+        const codes = await getDicData('org_type')
+
+        // 日期特殊处理
+        if (this.record.birthday) {
+            this.record.birthday = moment(this.record.birthday)
+        }
+
+        // 提交的时候是"param",而获取下来却是"info",在这里转换一下
+        if (this.record.sysEmpInfo) {
+            this.record.sysEmpParam = this.record.sysEmpInfo;
+            delete this.record.sysEmpInfo;
+        } else if (!this.record.sysEmpParam) {
+            this.record.sysEmpParam = {
+                extIds: [],
+            };
+        }
+
+        // 转换职位信息列表
+        if (this.record.sysEmpParam.positions) {
+            this.record.sysEmpParam.posIdList = this.record.sysEmpParam.positions.map((p) => p.posId);
+        }
+
+        // 附加信息
+        if (this.record.sysEmpParam.extOrgPos) {
+            this.record.sysEmpParam.extIds = this.record.sysEmpParam.extOrgPos.map((p, i) => {
+                return {
+                    key: i,
+                    orgId: p.orgId,
+                    posId: p.posId,
+                };
+            });
+        }
+
+        if (params.orgId) {
+            this.record.sysEmpParam.orgId = params.orgId;
+        }
 
-        const codes = await getDictData('org_type')
         this.setState({
             codes,
             options: {
+                ...this.state.options,
                 orgData,
-                areaData
+                posData,
+            },
+            sysEmpParam: {
+                ...this.record.sysEmpParam
             }
         })
 
-        const areaCode = [];
-        const findCode = (data, level) => {
-            level = level || 0;
-            for (let i = 0; i < data.length; i++) {
-                const item = data[i];
-                areaCode[level] = item.code;
-
-                if (item.code === params.record.areaCode) {
-                    areaCode.length = level + 1;
-                    return true;
-                }
-
-                if (item.children && item.children.length) {
-                    const found = findCode(item.children, level + 1);
-                    if (found) {
-                        return true;
-                    }
-                }
-            }
-        };
-
-        if (params.record && params.record.areaCode) {
-            findCode(areaData);
-        }
-
         this.record = {
-            pid: params.orgId,
+            ...this.record
-            ...this.record,
-            areaCode
         }
-        this.record.areaCode = areaCode
         //#endregion
-
         this.form.current.setFieldsValue(this.record)
 
         this.setState({
@@ -117,7 +185,7 @@ export default class form extends Component {
                 postData.id = this.record.id
             }
             //#region 从前段转换后端所需格式
-            postData.areaCode = postData.areaCode[postData.areaCode.length - 1]
+            console.log(postData)
             //#endregion
             return postData
         }
@@ -126,39 +194,79 @@ export default class form extends Component {
     //#region 自定义方法
     async loadOrgData() {
         const { data } = await api.getOrgTree()
-        return [{
-            id: EMPTY_ID,
-            parentId: undefined,
-            title: '顶级',
-            value: EMPTY_ID,
-            pid: undefined,
-            children: data,
-        }]
-    }
-
-    async loadAreaData() {
-        const { data } = await api.getAreaTree()
-        const clearChiildren = (data) => {
-            data.forEach((item) => {
-                if (item.children && item.children.length) {
-                    clearChiildren(item.children);
-                } else {
-                    delete item.children;
-                }
-            });
-        };
-        clearChiildren(data);
         return data
     }
+    async loadPosData() {
+        const { data } = await api.sysPosList()
+        return data
+    }
+    onAddExtData() {
+        const { extIds } = this.state.sysEmpParam
 
-    onAreaCodeChange(selectedOptions) {
+        const record = {
-        const data = selectedOptions[selectedOptions.length - 1]
+            key: extIds.length > 0 ? extIds[extIds.length - 1].key + 1 : 0,
-        this.form.current.setFieldsValue({
+            orgId: undefined,
-            name: data.name,
+            posId: undefined
-            code: data.code
+        }
+
+        this.setState({
+            sysEmpParam: {
+                extIds: [...extIds, record]
+            }
+        }, () => {
+            console.log(this.form.current.getFieldsValue())
         })
+
+    }
+    onRemoveExtData(record) {
+        const ext = this.state.sysEmpParam.extIds,
+            remove = ext.find((p) => p.key === record.key),
+            index = ext.indexOf(remove);
+
+        ext.splice(index, 1);
+        console.log(ext)
+
+        // this.form.current.setFieldsValue({
+        //     sysEmpParam: {
+        //         extIds: {}
+        //     }
+        // })
+
+        this.setState({
+            sysEmpParam: {
+                extIds: ext
+            }
+        }, () => {
+            //console.log(this.form.current.getFieldsValue())
+        })
+
     }
     //#endregion
+    renderExtInfoTable() {
+        //console.log(this.state.sysEmpParam.extIds)
+        return (
+            <Table
+                dataSource={this.state.sysEmpParam.extIds}
+                columns={this.extColumns}
+                pagination={false}
+                size="small"
+                bordered
+                rowKey={(record) => record.key}
+                footer={
+                    () =>
+                        <Button
+                            block
+                            icon={
+                                <AntIcon type="plus" />
+                            }
+                            type="dashed"
+                            onClick={() => this.onAddExtData()}>
+                            新增一项</Button>
+                }
+            >
+            </Table>
+        )
+    }
 
     render() {
         return (
@@ -167,59 +275,104 @@ export default class form extends Component {
                 ref={this.form}
                 className="yo-form"
             >
-                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                <Spin
-                    <div className="yo-form-group">
+                    spinning={this.state.loading}
-                        <Form.Item label="所属区域" name="areaCode" rules={[{ required: true, message: '请选择所属区域' }]}>
+                    indicator={<AntIcon type="loading" />}>
-                            <Cascader
+                    <Row gutter={16}>
-                                options={this.state.options.areaData}
+                        <Col span={10}>
-                                fieldNames={{
+                            <h3 className="h3t">基本信息</h3>
-                                    label: 'name',
+                            <div className="yo-form-group">
-                                    value: 'code',
+                                <Form.Item label="账号" name="account" rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}>
-                                    children: 'children'
+                                    <Input autoComplete="off" placeholder="请输入账号" />
-                                }}
+                                </Form.Item>
-                                changeOnSelect
+                                <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}>
-                                placeholder="请选择所属区域"
+                                    <Input autoComplete="off" placeholder="请输入姓名" />
-                                onChange={(val, selectedOptions) => this.onAreaCodeChange(selectedOptions)}
+                                </Form.Item>
-                            />
+                                {this.props.mode == 'add' && <>
-                        </Form.Item>
+                                    <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码', trigger: 'blur' }]}>
-                        <Form.Item label="机构名称" name="name" rules={[{ required: true, message: '请输入机构名称', trigger: 'blur' }]}>
+                                        <Input.Password autoComplete="off" placeholder="请输入密码" />
-                            <Input autoComplete="off" placeholder="请输入机构名称" />
+                                    </Form.Item>
-                        </Form.Item>
+                                    <Form.Item label="确认密码" name="confirm" rules={[{ required: true, message: '请确认密码', trigger: 'blur' }]}>
-                        <Form.Item label="唯一编码" name="code" rules={[{ required: true, message: '请输入唯一编码', trigger: 'blur' }]}>
+                                        <Input.Password autoComplete="off" placeholder="请确认密码" />
-                            <Input autoComplete="off" placeholder="请输入唯一编码" />
+                                    </Form.Item>
-                        </Form.Item>
+                                </>
-                        <Form.Item label="机构类型" name="type" rules={[{ required: true, message: '请选择机构类型' }]}>
-                            <Select placeholder="请选择机构类型">
-                                {
-                                    this.state.codes.orgType.map(item => {
-                                        return <Select.Option
-                                            key={item.code}
-                                            value={+item.code}
-                                        >{item.value}</Select.Option>
-                                    })
                                 }
-                            </Select>
+                                <Form.Item label="昵称" name="nickName" >
-                        </Form.Item>
+                                    <Input autoComplete="off" placeholder="请输入昵称" />
-                        <Form.Item label="上级机构" name="pid" rules={[{ required: true, message: '请选择上级机构' }]}>
+                                </Form.Item>
-                            <TreeSelect
+                                <Form.Item label="生日" name="birthday" >
-                                treeData={this.state.options.orgData}
+                                    <DatePicker className="w-100-p" />
-                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                                </Form.Item>
-                                treeDefaultExpandAll
+                                <Form.Item label="性别" name="sex" >
-                                placeholder="请选择上级机构"
+                                    <Radio.Group >
-                            />
+                                        <Radio.Button value={0}>
-                        </Form.Item>
+                                            <AntIcon className="mr-xxs" type="stop" />
-                        <Form.Item label="排序" name="sort">
+                                            <span>保密</span>
-                            <InputNumber
+                                        </Radio.Button>
-                                max={1000}
+                                        <Radio.Button value={1}>
-                                min={0}
+                                            <AntIcon style={{ color: '#1890ff' }} className="mr-xxs" type="man" />
-                                placeholder="请输入排序"
+                                            <span>男</span>
-                                className="w-100-p"
+                                        </Radio.Button>
-                            />
+                                        <Radio.Button value={2}>
-                        </Form.Item>
+                                            <AntIcon style={{ color: '#eb2f96' }} className="mr-xxs" type="woman" />
-                        <Form.Item label="备注" name="remark">
+                                            <span>女</span>
-                            <Input.TextArea placeholder="请输入备注" />
+                                        </Radio.Button>
-                        </Form.Item>
+                                    </Radio.Group>
-                    </div>
+                                </Form.Item>
+                                <Form.Item label="邮箱" name="email" >
+                                    <Input autoComplete="off" placeholder="请输入邮箱" />
+                                </Form.Item>
+                                <Form.Item label="手机号" name="phone" >
+                                    <Input autoComplete="off" placeholder="请输入手机号" />
+                                </Form.Item>
+                                <Form.Item label="电话" name="tel" >
+                                    <Input autoComplete="off" placeholder="请输入电话" />
+                                </Form.Item>
+                            </div>
+                        </Col>
+                        <Col span={14}>
+                            <h3 className="h3t">员工信息</h3>
+                            <div className="yo-form-group">
+                                <Form.Item
+                                    label="所属组织机构"
+                                    name={['sysEmpParam', 'orgId']}
+                                    rules={[{ required: true, message: '所属组织机构' }]}>
+                                    <TreeSelect
+                                        treeData={this.state.options.orgData}
+                                        dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                                        treeDefaultExpandAll
+                                        placeholder="请选择所属组织机构"
+                                    />
+                                </Form.Item>
+                                <Form.Item
+                                    label="工号"
+                                    name={['sysEmpParam', 'jobNum']} >
+                                    <Input
+                                        autoComplete="off"
+                                        placeholder="请输入工号" />
+                                </Form.Item>
+                                <Form.Item label="职位信息" name={['sysEmpParam', 'posIdList']}>
+                                    <Select
+                                        mode="multiple"
+                                        placeholder="请选择职位信息">
+                                        {
+                                            this.state.options.posData.map(item => {
+                                                return <Select.Option
+                                                    key={item.id}
+                                                    value={item.id}
+                                                >
+                                                    {item.name}</Select.Option>
+                                            })
+                                        }
+                                    </Select>
+                                </Form.Item>
+                            </div>
+                            {/* <h4 className="h4">附加信息</h4>
+                            <div className="pl-md pr-md">
+                                {this.renderExtInfoTable()}
+                            </div> */}
+                        </Col>
+                    </Row>
                 </Spin>
             </Form>
         )

web-react/src/pages/system/user/index.jsx

@@ -301,8 +301,9 @@ export default class index extends Component {
                     action={apiAction.add}
                     ref={this.addForm}
                     onSuccess={() => this.list.current.onReloadData()}
+                    width={1100}
                 >
-                    <FormBody />
+                    <FormBody mode="add" />
                 </ModalForm>
 
                 <ModalForm
@@ -310,8 +311,9 @@ export default class index extends Component {
                     action={apiAction.edit}
                     ref={this.editForm}
                     onSuccess={() => this.list.current.onReloadData()}
+                    width={1100}
                 >
-                    <FormBody />
+                    <FormBody mode="edit" />
                 </ModalForm>
             </QueryTreeLayout>
         )