From d3ca08680f5f7b000144f2662591822ba0935f67 Mon Sep 17 00:00:00 2001 From: Chengliang <1546584672@qq.com> Date: Mon, 25 Jul 2022 17:53:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=AF=BC=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pc4mobx/organization/apis/newImport.js | 6 + .../components/newImport/index.js | 141 +++++++++++ .../components/newImport/stepContent.js | 231 ++++++++++++++++++ .../components/newImport/stepDialog.js | 96 ++++++++ pc4mobx/organization/index.js | 3 +- pc4mobx/organization/public/i18n.js | 1 + pc4mobx/organization/stores/index.js | 2 + pc4mobx/organization/stores/newImport.js | 170 +++++++++++++ 8 files changed, 649 insertions(+), 1 deletion(-) create mode 100644 pc4mobx/organization/apis/newImport.js create mode 100644 pc4mobx/organization/components/newImport/index.js create mode 100644 pc4mobx/organization/components/newImport/stepContent.js create mode 100644 pc4mobx/organization/components/newImport/stepDialog.js create mode 100644 pc4mobx/organization/stores/newImport.js diff --git a/pc4mobx/organization/apis/newImport.js b/pc4mobx/organization/apis/newImport.js new file mode 100644 index 0000000..3a16b62 --- /dev/null +++ b/pc4mobx/organization/apis/newImport.js @@ -0,0 +1,6 @@ +import { WeaTools } from 'ecCom' + +//获取导入表单 +export const getImportForm = (params) => { + return WeaTools.callApi(`/api/hrm/import/resource/getImportForm`, 'GET', params); +} \ No newline at end of file diff --git a/pc4mobx/organization/components/newImport/index.js b/pc4mobx/organization/components/newImport/index.js new file mode 100644 index 0000000..234b93b --- /dev/null +++ b/pc4mobx/organization/components/newImport/index.js @@ -0,0 +1,141 @@ +import React from 'react' +import { + toJS +} from 'mobx' +import { + inject, + observer, +} from 'mobx-react' +import { + WeaTop, + WeaAlertPage, +} from 'ecCom' +import { + Spin, +} from 'antd'; +import { + i18n +} from '../../public/i18n'; + +import '../../style/import.css'; +import {addContentPath} from '../../util/index.js'; +import StepDialog from './stepDialog'; + + +@inject("newImport") +@observer +export default class newImport extends React.Component { + constructor(props) { + super(props); + this.state = ({ + title:'基础数据导入', + + }) + } + + componentWillMount() { + + } + + componentDidMount() { + + } + + + getImportCard = () => { + const { + newImport + } = this.props, { + isMouseOver, + curIndex, + cardConfig, + setMouseStatus, + } = newImport; + + let arr = []; + + cardConfig.map((c, index) => { + arr.push(
setMouseStatus(index, true)} onMouseLeave={() => setMouseStatus(index, false)}> +
+ { curIndex == index && isMouseOver ? this.getLinkName(c.linkName,index) : this.getIcon(c.icon)} + { curIndex == index && isMouseOver ? this.getSubTitle(c.subTitle,c.url) : this.getTitle(c.title)} +
+
) + }); + return arr; + } + + getIcon = (icon) => { + return (
+ +
) + } + + getTitle = (title) => { + return (
{title}
) + } + + getLinkName = (linkName, index) => { + return (
+
+ this.handleClick(index)} style={{color:'#fff',textDecoration: 'underline',fontSize:15}}>{linkName} +
+
) + } + + getSubTitle = (subTitle, url) => { + return (
{subTitle}
) + } + + handleClick = (index) => { + const { + newImport + } = this.props, { + } = newImport; + switch (index) { + case 0: + newImport.importType = 'company'; + break; + case 1: + newImport.importType = 'department'; + break; + case 2: + newImport.importType = 'jobtitle'; + break; + case 3: + newImport.importType = 'resource'; + break; + } + newImport.buttonTitle = i18n.button.nextStep(); + newImport.current = 0; + newImport.visible = true; + newImport.getImportField(); + + + } + + + render() { + const { + newImport, + } = this.props,{ + visible + } = newImport,{ + title, + } = this.state; + + return ( + } + iconBgcolor='#217346' + loading={true} + showDropIcon={true} + > +
{this.getImportCard()}
+ {visible && } + + ) + } + +} \ No newline at end of file diff --git a/pc4mobx/organization/components/newImport/stepContent.js b/pc4mobx/organization/components/newImport/stepContent.js new file mode 100644 index 0000000..59129a8 --- /dev/null +++ b/pc4mobx/organization/components/newImport/stepContent.js @@ -0,0 +1,231 @@ + +import { + WeaSearchGroup, + WeaTransfer, + WeaNewScroll, + WeaSelect, + WeaUpload +} from 'ecCom' +import { + Spin, + Button, + Pagination, + Steps, + Row, + Col, +} from 'antd' +import { + inject, + observer, +} from 'mobx-react' +import { + WeaSwitch, + WeaTableNew +} from 'comsMobx' + +import { + i18n +} from '../../public/i18n'; +import { addContentPath } from '../../util/index.js' + + +@inject("newImport") +@observer +export default class StepDialog extends React.Component { + constructor(props) { + super(props); + } + + getCircle() { + let style = { + width: 20, + height: 20, + backgroundColor: '#D8D8D8', + webkitBorderRadius: 10, + mozBorderRadius: 10, + msBorderRadius: 10, + oBorderRadius: 10, + borderRadius: 10, + //paddingLeft: 6, + textAlign: 'center', + } + return style; + } + + getForm() { + const { + newImport + } = this.props; + const { + condition + } = newImport; + let _arr = []; + + condition.map((c, i) => { + let arr = []; + if (i == 0) { //基本信息 + c.items.map((field, index) => { + arr.push({ + com: ( +
+ + +
+
{index + 1}
+
+ + +
+ + {field.label}: + + {this.getDom(field)} + + +
+ + +
+ ), + colSpan: 1, + }) + }) + } + if (i == 1) { //导入说明 + c.items.map((field, index) => { + arr.push({ + com: ( +
+ + +
+
{index + 1}
+
+ + + {this.getIllustration(field.value, field.link, index, field)} + + + +
+ ), + colSpan: 1 + }) + }) + } + _arr.push(
) + + }); + return _arr; + } + + getDom(field) { + const { + newImport + } = this.props; + const { + filelist + } = newImport; + let dom; + let domkey = field.domkey; + if (domkey[0] == 'templet') { + dom = {i18n.label.importTemplate()}; + } else if (domkey[0].indexOf('keyField') > -1) { + const vals = field.options.filter(v => v.selected == true); + let val = ''; + vals.length > 0 && (val = vals[0].key); + dom = { newImport.setParam(domkey[0], v) }} + /> + } else if (domkey[0] == 'importType') { + dom = { newImport.operateType = v }} + /> + } else if (domkey[0] == 'excelfile' || domkey[0] == 'importfile') { + dom = (
+
+ { + this.setFileId(ids, list) + } + } > + + +
+
+ {filelist.length == 0 ?

{i18n.label.noFileSelected()}

: filelist.map(file =>

{file.filename}

)} +
+
) + } + return dom; + } + + setFileId(ids, list) { + const { + newImport + } = this.props; + newImport.excelfile = ids; + newImport.filelist = list; + } + + getIllustration(val, url, index, link) { + const { + newImport + } = this.props; + const { + getTemplateUrl, + importParams + } = newImport; + let p; + if (index == 0) { + p = (

{i18n.label.downLoadTemplete()}: {i18n.label.importTemplate()}

); + } else { + p = (

); + } + return p; + } + + render = () => { + const { + newImport + } = this.props, { + data, selectedKeys, current + } = newImport; + + return ( +
+ { + current == 0 && newImport.setSelectedKeys(keys)} + /> + } + { + current == 1 && + {this.getForm()} + + } + { + current == 2 &&
获取导入结果
+ } + +
+ ) + } +} + + diff --git a/pc4mobx/organization/components/newImport/stepDialog.js b/pc4mobx/organization/components/newImport/stepDialog.js new file mode 100644 index 0000000..d209963 --- /dev/null +++ b/pc4mobx/organization/components/newImport/stepDialog.js @@ -0,0 +1,96 @@ +import { + WeaNewScroll, + WeaSearchGroup, + WeaMoreButton, + WeaDialog +} from 'ecCom' +import { + inject, + observer, +} from 'mobx-react' +import { + Spin, + Button, + Pagination, + Steps +} from 'antd' + +import { + WeaSwitch, + WeaTableNew +} from 'comsMobx' + +import { + i18n +} from '../../public/i18n'; + +const Step = Steps.Step; +import StepContent from './stepContent'; + +@inject("newImport") +@observer +export default class StepDialog extends React.Component { + constructor(props) { + super(props); + this.state = { + width: 800, + height: 600, + title: '数据导入', + } + } + + next() { + const {newImport} = this.props; + let {current,steps} = newImport; + current = current + 1; + if (current === steps.length) { + current = 0; + newImport.init(); + } + newImport.current = current; + current === 1 && newImport.getImportForm(); + current === steps.length - 1 && newImport.getImportResult(); + } + + render() { + const { + newImport + } = this.props, { + current, + visible, + steps + } = newImport,{ + width, + height, + title + } = this.state; + + const buttons = [ + (), + ]; + + return ( + newImport.init()} + buttons={buttons} + style={{ width: width, height: height }} + > +
+ + {steps.map((s, i) => )} + +
+
+ +
+ + + ) + } +} \ No newline at end of file diff --git a/pc4mobx/organization/index.js b/pc4mobx/organization/index.js index 5b5d7f0..0abe74e 100644 --- a/pc4mobx/organization/index.js +++ b/pc4mobx/organization/index.js @@ -27,6 +27,7 @@ import Resource from "./components/resource/resource"; import ResourceExtend from "./components/resource/ResourceExtend"; import BasicInfoImport from "./components/import"; import HrmInfoExtend from "./components/resource/HrmInfoExtend"; +import NewImport from "./components/newImport" import stores from "./stores"; import "./style/index"; @@ -87,7 +88,7 @@ const Routes = ( - + ); diff --git a/pc4mobx/organization/public/i18n.js b/pc4mobx/organization/public/i18n.js index ab5efc7..655e455 100644 --- a/pc4mobx/organization/public/i18n.js +++ b/pc4mobx/organization/public/i18n.js @@ -853,6 +853,7 @@ export const i18n = { back: () => getLabel(1290, '返回'), createType: () => getLabel(30131, '新建类型'), editTypeInfo: () => getLabel(32732, '编辑类型'), + nextStep:() => getLabel(30131, '下一步'), batchOpen: () => getLabel(534249, '批量解锁'), collect: () => getLabel(28111, '收藏'), diff --git a/pc4mobx/organization/stores/index.js b/pc4mobx/organization/stores/index.js index 4d66441..45a7974 100644 --- a/pc4mobx/organization/stores/index.js +++ b/pc4mobx/organization/stores/index.js @@ -22,6 +22,7 @@ import {DatasImportStore} from "./datasImport"; import {HrmImportResource} from "./importresource"; import {HrmImportCommon} from "./importCommon"; import {HrmBasicDataImport} from "./import"; +import {newImportStore} from "./newImport"; module.exports = { @@ -49,4 +50,5 @@ module.exports = { hrmImportResource:new HrmImportResource(), hrmImportCommon:new HrmImportCommon(), hrmBasicDataImport:new HrmBasicDataImport(), + newImport: new newImportStore() }; diff --git a/pc4mobx/organization/stores/newImport.js b/pc4mobx/organization/stores/newImport.js new file mode 100644 index 0000000..6f3eead --- /dev/null +++ b/pc4mobx/organization/stores/newImport.js @@ -0,0 +1,170 @@ +import { + observable, + action +} from 'mobx'; +import { + WeaForm +} from 'comsMobx'; + +import * as API from '../apis/newImport'; +import * as Util from '../util/index'; +import { + validate, + getFormParamValue +} from '../util' +import { + message, + Modal, + Button +} from 'antd'; +import { + WeaTableNew +} from 'comsMobx' +import * as mobx from 'mobx'; +import isEmpty from 'lodash/isEmpty'; +import { + has +} from 'lodash'; +const toJS = mobx.toJS; +const { + TableStore +} = WeaTableNew; +const confirm = Modal.confirm; +// import { +// i18n +// } from '../public/i18n'; + +export class newImportStore { + + /********************* cardConfig *********************/ + cardConfig = [ + { + "subTitle": "分部设置", + "bgColor": "#92B75B", + "icon": "icon-coms-Department-number", + "title": "分部", + "linkName": "分部导入", + "url": "/spa/hrm/engine.html#/hrmengine/organization" + }, + { + "subTitle": "部门设置", + "bgColor": "#92B75B", + "icon": "icon-coms-Department-number", + "title": "部门", + "linkName": "部门导入", + "url": "/spa/hrm/engine.html#/hrmengine/organization" + }, + { + "subTitle": "岗位设置", + "bgColor": "#49B2FE", + "icon": "icon-coms-hrm", + "title": "岗位", + "linkName": "岗位体系导入", + "url": "/spa/hrm/engine.html#/hrmengine/post" + }, + { + "subTitle": "组织维护", + "bgColor": "#51A39A", + "icon": "icon-coms-crm", + "title": "人员", + "linkName": "人员导入", + "url": "/spa/hrm/engine.html#/hrmengine/organization" + } + ] + + @observable isMouseOver = false; + @observable curIndex = ''; + @observable visible = false; + + @action setMouseStatus = (index, bool) => { + this.curIndex = index; + this.isMouseOver = bool; + } + + + + /********************* stepDialog *********************/ + + steps = [ + { title: '设置导入字段'}, + { title: '获取导入模板' }, + { title: '导入结果' } + ]; + @observable importType = ''; + @observable current = 0; + @observable buttonTitle = ''; + + + + /********************* stepContent *********************/ + data = [ + { id: 1, name: '杨文元' }, + { id: 2, name: '李妍' }, + { id: 3, name: '刘长庚' }, + { id: 4, name: '孟玲' }, + { id: 5, name: '张建华' }, + ]; + selectedKeys = [1, 2]; + + @observable condition = []; + @observable importParams = {}; //重复验证字段 + @observable operateType = 'add'; //导入类型 + @observable filelist = []; //文件信息 + @observable excelfile = []; //文件id + @observable templetName = "导入模板"; + getTemplateUrl + + @action setParam = (k, v) => { + const p = toJS(this.importParams); + Object.assign(p, { + [k]: v + }); + this.importParams = p; + } + + @action("获取导入字段") getImportField() { + + } + + @action("获取导入表单") getImportForm() { + const params = { + importType: this.importType, + } + API.getImportForm(params).then(data => { + if (data.status == '1') { + this.condition = data.condition; + if (data.condition != null && Array.isArray(data.condition) && data.condition.length > 0) { + this.condition[0].items.map(item => { + if (item.conditionType === 'SELECT' && item.domkey[0] === 'importType') { + item.options.map(op => { + if (op.selected) + this.operateType = op.key; + }) + } + item.domkey[0].indexOf('keyField') > -1 && this.setParam(item.domkey[0], item.value); + }) + } + } else { + // message.warning(data.message); + } + }, error => { + message.warning(error.message); + }) + } + + @action("获取导入结果") getImportResult() { + + } + + setSelectedKeys(keys) { + this.selectedKeys = keys; + } + + @action("初始化弹框内容") init() { + this.filelist = []; + this.excelfile = []; + this.visible = false; + } + + +} \ No newline at end of file