添加管理员

2022-04-28 15:47:43 +08:00 · 2022-04-28 15:47:43 +08:00 · 6f39cadda0
parent 48edb3df17
commit 6f39cadda0
6 changed files with 339 additions and 28 deletions
--- a/src/managements/competition/editTable/index.jsx
+++ b/src/managements/competition/editTable/index.jsx
@ -0,0 +1,262 @@
+import React from "react";
+import { Table, Input, Button, Popconfirm, Form, Checkbox, AutoComplete } from 'antd';
+import { Base64 } from 'js-base64';
+import AddMember from '../../../forge/Component/AddMember';
+
+import './index.scss';
+import apply_delete from "../../../military/qz2022/image/apply_delete.png";
+import axios from "axios";
+import { getImageUrl } from "educoder";
+const { Option } = AutoComplete;
+
+const EditableContext = React.createContext();
+
+const EditableRow = ({ form, index, ...props }) => (
+  <EditableContext.Provider value={form}>
+    <tr {...props} />
+  </EditableContext.Provider>
+);
+
+const EditableFormRow = Form.create()(EditableRow);
+
+class EditableCell extends React.Component {
+
+  save = (dataIndex, e) => {
+    const { record, handleSave } = this.props;
+    this.form.validateFields([dataIndex],(error, values) => {
+      handleSave({ ...record, ...values });
+      if (error && error[e.currentTarget.id]) {
+        return;
+      }
+    });
+  };
+
+  renderCell = form => {
+    this.form = form;
+    const {record, dataIndex, title } = this.props;
+    return <Form.Item >
+      {form.getFieldDecorator(dataIndex, {
+        rules: [
+          {required: true,message: `${title}不能为空.`,},
+          {max: 32, message: '超出限制长度32位字符,请重新编辑' }
+        ],
+        validateFirst: true,
+        initialValue: record[dataIndex],
+      })(<Input onPressEnter={(e)=>{this.save(dataIndex,e)}} onBlur={(e)=>{this.save(dataIndex,e)}} placeholder="请输入"/>)}
+    </Form.Item>
+  };
+
+  render() {
+    const {
+      editable,
+      dataIndex,
+      title,
+      record,
+      index,
+      handleSave,
+      children,
+      ...restProps
+    } = this.props;
+    return (
+      <td {...restProps}>
+        {editable ? (
+          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  }
+}
+
+class EditableTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.columns = [
+      {
+        title: '用户id',
+        dataIndex: 'real_name',
+        render: ((test, record)=>{
+          return <AutoComplete
+            dataSource={this.state.source}
+            value={this.state.searchKey}
+            onChange={this.getUserList}
+            onSelect={this.selectInputUser}
+            placeholder="搜索需要添加的用户..."
+            allowClear
+          />
+        })
+      },
+      {
+        title: '单位',
+        dataIndex: 'org_name',
+        render: ((text, record) =>{
+          return <Checkbox.Group options={this.state.plainOptions} defaultValue={['Apple']} />
+        })
+      },
+      {
+        title: '操作',
+        dataIndex: 'operation',
+        width: '10%',
+        render: (text, record) =>
+          this.state.dataSource.length >= 1 ? (
+            <Popconfirm title="确定删除此成员?" onConfirm={() => this.handleDelete(record.key)}>
+              <img src={apply_delete} className="apply_delete" alt="" style={{width: 16}}/>
+            </Popconfirm>
+          ) : null,
+      },
+    ];
+    this.state = {
+      dataSource: this.props.members || [{key: 0}],
+      count: (this.props.members && this.props.members.length) || 1,
+      plainOptions: [],
+      newId: undefined,
+      newIdFlag: false,
+      source: undefined,
+      searchKey: undefined,
+    };
+    // this.parse(props.data);
+  }
+
+  componentWillReceiveProps(props){
+    this.parse(props.data);
+  }
+
+  getID = id => {
+    this.setState({newId : id, newIdFlag: !this.state.newIdFlag})
+  }
+
+  changeInputUser = (e) =>{
+    console.log('222', e);
+    this.setState({searchKey : e})
+  };
+
+  // 选择用户
+  selectInputUser = (e, option) =>{
+    // setID(login ? e : option.props.login);
+    this.setState({searchKey : option.props.name})
+  };
+
+  getUserList = (e) => {
+    this.setState({searchKey : e})
+    const url = `/users/list.json`;
+    axios.get(url, {
+      params: {
+        search: e,
+      },
+    }).then((result) => {
+      if (result) {
+        this.sourceOptions(result.data.users);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  };
+
+  sourceOptions = (userDataSource) => {
+    const s = userDataSource && userDataSource.map((item, key) => {
+      return (
+        <Option
+          key={key}
+          value={`${item.user_id}`}
+          login={`${item.login}`}
+          name={item.username}
+        >
+          <img
+            className="user_img radius"
+            width="28"
+            height="28"
+            src={getImageUrl(`/${item && item.image_url}`)}
+            alt=""
+          />
+          <span className="ml10" style={{ verticalAlign: "middle" }}>
+            {item.username}
+            <span className="color-grey ml10">({item.login})</span>
+          </span>
+        </Option>
+      );
+    });
+    this.setState({source : s})
+  }
+
+  parse = data =>{
+    const dataSet = new Set();
+    data.zones && data.zones.split(',').map(item=>{dataSet.add(item)});
+    data.zones_local && data.zones_local.split(',').map(item=>{dataSet.add(item)});
+    this.setState({plainOptions : dataSet.toJSON()})
+  }
+
+  handleDelete = key => {
+    const dataSource = [...this.state.dataSource];
+    const newData = dataSource.filter(item => item.key !== key);
+    this.setState({ dataSource: newData });
+    this.props.setMembers(newData);
+  };
+
+  handleAdd = () => {
+    const { count, dataSource } = this.state;
+    const newData = {
+      key: count,
+    };
+    this.setState({
+      dataSource: [...dataSource, newData],
+      count: count + 1,
+    });
+  };
+
+  handleSave = row => {
+    const newData = [...this.state.dataSource];
+    const index = newData.findIndex(item => row.key === item.key);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+    this.setState({ dataSource: newData });
+    this.props.setMembers(newData);
+  };
+
+  render() {
+    const { dataSource } = this.state;
+    const components = {
+      body: {
+        row: EditableFormRow,
+        cell: EditableCell,
+      },
+    };
+    const columns = this.columns.map(col => {
+      if (!col.editable) {
+        return col;
+      }
+      return {
+        ...col,
+        onCell: record => ({
+          record,
+          editable: col.editable,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          handleSave: this.handleSave,
+        }),
+      };
+    });
+
+    return (
+      <div className="apply_team">
+        <Button onClick={this.handleAdd} type="primary" className="add_member">
+          添加管理员
+        </Button>
+        <div className="member_info">
+          <Table
+            components={components}
+            rowClassName={() => 'editable-row'}
+            dataSource={dataSource}
+            columns={columns}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EditableTable;
--- a/src/managements/competition/editTable/index.scss
+++ b/src/managements/competition/editTable/index.scss
@ -0,0 +1,24 @@
+.editable-cell {
+    position: relative;
+}
+
+.editable-cell-value-wrap {
+    padding: 5px 12px;
+    cursor: pointer;
+}
+
+.editable-row .editable-cell-value-wrap {
+    height: 30px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    padding: 4px 11px;
+}
+
+.member_info table{
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+}
+
+.member_info table tr:last-child td{
+    border-bottom: none;
+}
--- a/src/managements/competition/setting/index.jsx
+++ b/src/managements/competition/setting/index.jsx
@ -3,15 +3,16 @@ import { Input, Row, Col, Button, Form, message, Spin, Checkbox, DatePicker, Upl
 import axios from "axios";
 import moment from 'moment';
 import MDEditor from 'src/modules/tpm/challengesnew/tpm-md-editor';
+import EditTable from '../editTable';
 import { getUploadActionUrl } from 'educoder';

 import './index.scss';
 const format = "YYYY-MM-DD HH:mm:ss";

-export default Form.create()(({ form, match, history, current_user }) => {
+export default Form.create()(({ form, match, history, current_user, showNotification }) => {
    const id = match.params.id

-    const { getFieldDecorator, validateFields, setFieldsValue } = form;
+    const { getFieldDecorator, validateFields, setFieldsValue, getFieldsValue } = form;
    const [content, setContent] = useState('');
    const [guide, setGuide] = useState('');
    const [about_us, setAbout_us] = useState('');
@ -143,7 +144,7 @@ export default Form.create()(({ form, match, history, current_user }) => {
    return (
        <Spin spinning={loading}>
            <div className="centerbox competition_setting">
-                <Button type="link" onClick={() => { history.push('/managements/competition/customize'); }} className="mb10">返回</Button>
+                <Button type="link" onClick={() => { history.push('/managements/competition/customize'); }} className="mb10">返回列表</Button>
                {helper('赛事名称',
                    'title',
                    [{ required: true, message: "请正确输入赛事名称" }],
@ -156,20 +157,6 @@ export default Form.create()(({ form, match, history, current_user }) => {
                    <Input placeholder="请输入参赛单位" onBlur={() => { verify("identifier") }} />
                )}

-                <Form.Item className="mb0 mdEditor" label={'大赛介绍'}>
-                    <MDEditor
-                        placeholder={"请输入大赛介绍"}
-                        height={500}
-                        mdID={"competition-content"}
-                        initValue={content}
-                        onChange={(value) => { onContentChange(value, 'content') }}
-                    />
-                    {getFieldDecorator("content", {
-                        rules: [{ required: true, message: "请输入大赛介绍" }],
-                        validateFirst: true,
-                    })(<Input style={{ display: "none" }} />)}
-                </Form.Item>
-

                <Form.Item className="video-box" label="Banner图">
                    <Row gutter={8}>
@ -237,13 +224,13 @@ export default Form.create()(({ form, match, history, current_user }) => {
                {helper('赛区(内网)',
                    'zones_local',
                    [{ required: true, message: "请填写赛区" }],
-                    <Input placeholder="请填写赛区" onBlur={() => { verify("zones_local") }} />
+                    <Input placeholder="请填写赛区" onBlur={() => { verify("zones_local")}} />
                )}

                {helper('赛区(外网)',
                    'zones',
                    [{ required: true, message: "请填写赛区" }],
-                    <Input placeholder="请填写赛区" onBlur={() => { verify("zones") }} />
+                    <Input placeholder="请填写赛区" onBlur={() => { verify("zones")}} />
                )}

                {helper('赛项',
@ -276,6 +263,42 @@ export default Form.create()(({ form, match, history, current_user }) => {
                    moment(new Date(), format)
                )}

+
+                {helper('管理员配置（配置方式：用户id:赛区名称,用户id:赛区名称）',
+                    'manager_ids',
+                    [],
+                    <Input placeholder="请配置管理员" onBlur={() => { verify("manager_ids") }} />
+                )}
+                <div className="edit_table">
+                    <p className="mt10">管理员配置 : </p>
+                    {/* <p className="error_message">{errorMessage}</p> */}
+                    {/*  */}
+                    {/* {qzDetail &&
+                    <EditTable members={enrollStatus && enrollStatus.enroll_status ? enrollStatus.enroll_info.members : [{key:"0"}]} setMembers={setMembers} isLocal = {qzDetail.is_local}/>} */}
+                </div>
+
+                <Form.Item className="mb0 mdEditor" label={'大赛介绍'}>
+                    <EditTable data = {getFieldsValue(['zones', 'zones_local', 'manager_ids'])} showNotification={showNotification}/>
+                    {getFieldDecorator("manager_ids", {
+                        rules: [],
+                        validateFirst: true,
+                    })(<Input style={{ display: "none" }} />)}
+                </Form.Item>
+
+                <Form.Item className="mb0 mdEditor" label={'大赛介绍'}>
+                    <MDEditor
+                        placeholder={"请输入大赛介绍"}
+                        height={500}
+                        mdID={"competition-content"}
+                        initValue={content}
+                        onChange={(value) => { onContentChange(value, 'content') }}
+                    />
+                    {getFieldDecorator("content", {
+                        rules: [{ required: true, message: "请输入大赛介绍" }],
+                        validateFirst: true,
+                    })(<Input style={{ display: "none" }} />)}
+                </Form.Item>
+
                <Form.Item className="mb0 mdEditor" label={'赛事指南'}>
                    <MDEditor
                        placeholder={"请输入赛事指南"}
@ -303,13 +326,6 @@ export default Form.create()(({ form, match, history, current_user }) => {
                        validateFirst: true,
                    })(<Input style={{ display: "none" }} />)}
                </Form.Item>
-
-                {helper('管理员配置（配置方式：用户id:赛区名称,用户id:赛区名称）',
-                    'manager_ids',
-                    [],
-                    <Input placeholder="请配置管理员" onBlur={() => { verify("manager_ids") }} />
-                )}
-
                <div className="mt20">
                    <Button className="mr30" type="primary" onClick={submit}>提交</Button>
                    <Button onClick={() => { history.push('/managements/competition/customize'); }}>取消</Button>
--- a/src/military/qz2022/apply/index.jsx
+++ b/src/military/qz2022/apply/index.jsx
@ -329,7 +329,7 @@ export default Form.create()((props) => {
        <Button type="primary" className="submit_info" onClick={checkInfo}>
          提交资料
        </Button>
-        <a href={qzDetail.enroll_template}>
+        <a href={qzDetail && qzDetail.enroll_template}>
          <Button className="add_member download ml20">下载报名表</Button>
        </a>
      </div>}
--- a/src/military/qz2022/editTable/index.jsx
+++ b/src/military/qz2022/editTable/index.jsx
@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo, useEffect } from "react";
+import React from "react";
 import { Table, Input, Button, Popconfirm, Form } from 'antd';
 import { Base64 } from 'js-base64';

--- a/src/military/qz2022/editTable/index.scss
+++ b/src/military/qz2022/editTable/index.scss
@ -12,4 +12,13 @@
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 4px 11px;
+}
+
+.member_info table{
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+}
+
+.member_info table tr:last-child td{
+    border-bottom: none;
 }