{"size": 8313, "ext": "js", "max_stars_repo_path": "kk-react/src/layouts/components/create_issues/index.js", "max_stars_repo_name": "AlisonZXQ/micro-pratice", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "kk-react/src/layouts/components/create_issues/index.js", "max_issues_repo_name": "AlisonZXQ/micro-pratice", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "kk-react/src/layouts/components/create_issues/index.js", "max_forks_repo_name": "AlisonZXQ/micro-pratice", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.608365019, "max_line_length": 179, "alphanum_fraction": 0.5899194033}
import React, { useState } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Dropdown, Button, Menu, Modal, Popover, message, notification } from 'antd';
import { connect } from 'dva';
import { history } from 'umi';
import { withRouter } from 'react-router-dom';
import MyIcon from '@components/MyIcon';
import moment from 'moment';
import { getIssueCustom, getMentionUsers, firstWordToUpperCase, getSystemDescription } from '@utils/helper';
import { issue_type_name_map, issueUrlMap } from '@shared/ReceiptConfig';
import { createBill } from '@services/receipt';
import CreateObjective from '@components/CreateIssues/create_objective';
import CreateRequirement from '@components/CreateIssues/create_requirement';
import CreateTask from '@components/CreateIssues/create_task';
import CreateBug from '@components/CreateIssues/create_bug';
import { createFeedback4Workbench } from '@services/my_workbench';
import CreateAdviseOrTicket from '../create_advise_ticket';
import styles from './index.less';

const feedbackArr = [{
  key: 'feedback',
  name: '建议',
  icon: 'icon-jianyi1',
  tip: '产品的功能与体验改进建议'
}, {
  key: 'ticket',
  name: '工单',
  icon: 'icon-gongdan1',
  tip: '产品使用过程中遇到的问题'
}];

const issuesArr = [
  //   {
  //   key: 'objective',
  //   name: '目标',
  //   icon: 'icon-mubiao'
  // },
  {
    key: 'feature',
    name: '需求',
    icon: 'icon-xuqiu1'
  }, {
    key: 'task',
    name: '任务',
    icon: 'icon-renwu1'
  }, {
    key: 'bug',
    name: '缺陷',
    icon: 'icon-quexian1'
  }];

function Index({ form, customList, lastProduct, allProductList, customSelect, productList, location, ...rest }) {
  const [visible, setVisible] = useState(false);
  const [dropDownVisible, setDropDownVisible] = useState(visible);
  const [current, setCurrent] = useState(''); // 当前选择的单据类型
  const [createLoading, setCreateLoading] = useState(false);
  const { pathname, search } = location;

  /**
   * 除建议和工单外的默认产品设置
     1.在产品管理页面里，取当前产品；
     2.如果上次有选择，则取上次选择过的；
     3.上次没有选择过的，取ep；
     4.没有ep权限，取产品列表的第一个
   */
  const getProductId = () => {
    let productId = 0;
    const localProductId = localStorage.getItem('last_select_product') || 0;
    const lastProductId = lastProduct.id || 0;
    const epId = (productList.find(it => it.name === 'Easy Project') || {}).id || 0;
    const firstId = (productList && productList[0] && productList[0].id) ? productList[0].id : 0;
    //产品管理页面
    if (pathname.includes('/manage') && lastProductId) {
      productId = lastProductId;
    } else if (localProductId && productList.some(it => it.id === Number(localProductId))) {
      productId = localProductId;
    } else if (epId && productList.some(it => it.id === epId)) {
      productId = epId;
    } else {
      productId = firstId;
    }
    return productId;
  };

  // 工单和建议需要加文字说明
  const menu = () => {
    return (<Menu>
      <div className={styles.title}>反馈</div>
      {
        feedbackArr.map(it =>
          <div onClick={() => setDropDownVisible(false)}>
            <CreateAdviseOrTicket data={it} />
          </div>
        )
      }

      {
        !!productList.length &&
        <span>
          <div className={styles.title}>工作项</div>
          {
            issuesArr.map(it =>
              <div
                className={styles.menuItem}
                onClick={() => {
                  setVisible(true);
                  setCurrent(it.key);
                }}>
                <MyIcon type={it.icon} />
                <span style={{ marginLeft: '8px' }}>
                  {it.name}
                </span>
              </div>)
          }
        </span>
      }

      <div className={styles.divider}></div>
      <div className={styles.menuItem}>
        <MyIcon type="icon-xiangmu" />
        <span style={{ marginLeft: '8px' }} onClick={() => history.push('/project/create_project')}>
          项目
        </span>
      </div>
    </Menu>);
  };

  const openNotification = (result) => {
    let issueId = 0;
    // 目标返回的是全部的数据，其他就是一个id
    if (current === 'objective') {
      let resultObj = result || {};
      const issue = resultObj[current] || {};
      issueId = issue.id;
    } else {
      issueId = result;
    }

    const issueKey = `${firstWordToUpperCase(current)}-${issueId}`;

    const args = {
      message: <span>创建成功，点击查看问题
        <a
          href={`${issueUrlMap[current]}-${issueId}`}
          target="_blank"
          rel="noopener noreferrer"
        >{issueKey}</a>
      </span>,
      description:
        <span>
        </span>,
      duration: 5,
    };
    notification.open(args);
  };

  // 五类单据创建统一处理
  const handleOk = () => {
    form.validateFieldsAndScroll((err, values) => {
      if (err) return;
      let type = '';
      if (current === 'task' || current === 'bug' || current === 'ticket') {
        type = issue_type_name_map[current];
      } else if (current === 'feature') {
        type = issue_type_name_map['story'];
      } else if (current === 'objective') {
        type = issue_type_name_map['epic'];
      } else if (current === 'feedback') {
        type = issue_type_name_map['advise'];
      }

      const custom_field_values = getIssueCustom(values, customSelect); // 自定义字段

      const params = {
        parentid: 0,
        issuetype: type,
        ...values,
        noticeEmailList: getMentionUsers(values.description).map(it => it.email) || [],
        moduleid: values.moduleid ? values.moduleid : 0,
        tagnames: values.tagnames ? values.tagnames.join(',') : '',
        custom_field_values,
        expect_releasetime: values.expect_releasetime && moment(values.expect_releasetime).valueOf(),
      };

      let promise = null;
      if (current === 'feedback' || current === 'ticket') {
        promise = createFeedback4Workbench;
      } else {
        promise = createBill;
      }
      setCreateLoading(true);
      promise(params).then((res) => {
        setCreateLoading(false);
        if (res.code !== 200) return message.error(`新建失败，${res.msg}`);
        message.success('新建成功！');
        setVisible(false);
        form.resetFields();
        openNotification(res.result);
      }).catch((err) => {
        setCreateLoading(false);
        return message.error(`新建异常, ${err || err.message}`);
      });
    });
  };

  return (<span className={styles.createIssue}>
    <Dropdown
      overlay={menu}
      visible={dropDownVisible}
      onVisibleChange={visible => setDropDownVisible(visible)}
    >
      <MyIcon type="icon-chuangjian" className={styles.createIcon} />
    </Dropdown>
    <Modal
      title={`创建${(issuesArr.find(it => it.key === current) || {}).name || '工作项'}`}
      visible={visible}
      onCancel={() => {
        form.setFieldsValue({ [`custom-${getSystemDescription(customList).id}-${getSystemDescription(customList).type}`]: getSystemDescription(customList).defaultValue || '' });
        setVisible(false);
      }}
      className='modal-createissue-height'
      footer={<span>
        <Button onClick={() => {
          form.setFieldsValue({ [`custom-${getSystemDescription(customList).id}-${getSystemDescription(customList).type}`]: getSystemDescription(customList).defaultValue || '' });
          setVisible(false);
        }}>取消</Button>
        <Button
          type='primary'
          onClick={() => handleOk()}
          loading={createLoading}>创建</Button>
      </span>}
      width={1000}
      destroyOnClose
    >
      {
        current === 'objective' && <CreateObjective form={form} showProduct productid={getProductId()} />
      }
      {
        current === 'feature' && <CreateRequirement form={form} showProduct productid={getProductId()} />
      }
      {
        current === 'bug' && <CreateBug form={form} showProduct productid={getProductId()} />
      }
      {
        current === 'task' && <CreateTask form={form} showProduct productid={getProductId()} />
      }
    </Modal>
  </span>);
}

const mapStateToProps = (state) => {
  return {
    lastProduct: state.product.lastProduct,
    allProductList: state.product.allProductList,
    customSelect: state.aimEP.customSelect,
    customList: state.receipt.customList || [],
    productList: state.product.productList,
  };
};

export default withRouter(connect(mapStateToProps)(Form.create()(Index)));
