From 33e96c4437436a12acec4d98d366b9af5a4f2bd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com> Date: Mon, 6 Mar 2023 15:06:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=87=87=E9=9B=86-=E8=80=83?= =?UTF-8?q?=E5=8B=A4=E5=BC=95=E7=94=A8=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/importModal/headerSet.js | 34 ++-- .../components/selectItemsModal/index.js | 108 +++++-------- .../components/selectItemsModal/index.less | 67 ++++++++ .../components/selectItemsModal/index11.js | 93 +++++++++++ .../selectItemsModal/selectItemsWrapper.js | 116 ++++++-------- .../selectItemsWrappercopy.js | 78 +++++++++ .../components/attendanceDataComp.js | 150 +++++++++++++++--- 7 files changed, 474 insertions(+), 172 deletions(-) create mode 100644 pc4mobx/hrmSalary/components/selectItemsModal/index.less create mode 100644 pc4mobx/hrmSalary/components/selectItemsModal/index11.js create mode 100644 pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrappercopy.js diff --git a/pc4mobx/hrmSalary/components/importModal/headerSet.js b/pc4mobx/hrmSalary/components/importModal/headerSet.js index 94717e9f..41fe75a7 100644 --- a/pc4mobx/hrmSalary/components/importModal/headerSet.js +++ b/pc4mobx/hrmSalary/components/importModal/headerSet.js @@ -1,20 +1,20 @@ -import React from "react" -import { Button } from "antd" -import { WeaCheckbox, WeaHelpfulTip } from "ecCom"; +import React from "react"; +import { Button } from "antd"; export default class HeaderSet extends React.Component { - render() { - return ( -
- - {/**/} - {/**/} -
- ) - } + render() { + return ( +
+ + {/**/} + {/**/} +
+ ); + } } diff --git a/pc4mobx/hrmSalary/components/selectItemsModal/index.js b/pc4mobx/hrmSalary/components/selectItemsModal/index.js index 27cc02a7..6bb7919d 100644 --- a/pc4mobx/hrmSalary/components/selectItemsModal/index.js +++ b/pc4mobx/hrmSalary/components/selectItemsModal/index.js @@ -5,24 +5,11 @@ * LastEditTime: 2022-06-29 10:06:13 */ import React from "react"; -import { WeaCheckbox, WeaInputSearch, WeaDialog } from "ecCom"; -import { Button, Dropdown, Menu, Modal } from "antd"; -import "../../pages/dataAcquisition/attendance/index.less" +import { WeaCheckbox, WeaDialog, WeaInputSearch } from "ecCom"; +import { Button } from "antd"; +import "./index.less"; -export const items = [ - { - key: "1", - title: "测试", - checked: false - }, - { - key: "2", - title: "测试2", - checked: true - } -]; - export default class SelectItemModal extends React.Component { constructor(props) { super(props); @@ -31,62 +18,49 @@ export default class SelectItemModal extends React.Component { }; } - handleShowChecked(value) { - value = value == 1 ? true : false; - this.props.onShowChecked(value); - } - - handleMenuClick(e) { - if (e.key == "1") { //恢复默认设置 - this.props.onRestoreDefault(); - } else if (e.key == "2") { - this.props.onSetDefault(); - } else if (e.key == "3") { - - } + componentWillReceiveProps(nextProps, nextContext) { + if ( + nextProps.visible !== this.props.visible && + !nextProps.visible + ) this.setState({ searchValue: "" }); } render() { - const menu = ( - this.handleMenuClick(e)}> - 恢复默认设置 - 设置默认设置 - {/* 操作日志 */} - - ); + const { searchValue } = this.state; + const { title, onSearchItemSet, onShowOnlyChecked, comp: children, ...extra } = this.props; + const btns = []; + const moreBtn = { + datas: [ + { + key: "recovery", + content: "恢复默认设置", + icon: , + onClick: key => alert(`点击事物处理函数接受的实参为 ${key}`) + }, + { + key: "setting", + content: "设为默认设置", + icon: , + onClick: key => alert(`点击事物处理函数接受的实参为 ${key}`) + } + ] + }; + const titleComp =
+ {title} + this.setState({ searchValue })} + placeholder="请输入关键字" style={{ width: 200 }} + onSearch={onSearchItemSet} + /> +
; + const bottomLeft = ; return ( - { - this.props.onSave(); - }}>保存, - 更多 - ]} + -
- { - this.setState({ searchValue: value }); - }} - onSearch={(value) => { - this.props.onSearch(value); - }} - /> -
- {this.props.children} -
- { - this.handleShowChecked(value); - }}/> -
+ {children} ); } diff --git a/pc4mobx/hrmSalary/components/selectItemsModal/index.less b/pc4mobx/hrmSalary/components/selectItemsModal/index.less new file mode 100644 index 00000000..6486a98c --- /dev/null +++ b/pc4mobx/hrmSalary/components/selectItemsModal/index.less @@ -0,0 +1,67 @@ +.setWrapper { + .setHeaderWrapper, .setGroupWrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + .wea-title .ant-checkbox-wrapper > span:last-child, .setGroupWrapper > .checkedtitle { + color: #111; + font-weight: 600; + font-size: 12px; + padding-right: 8px; + } + + .itemContUl { + display: flex; + align-items: center; + flex-wrap: wrap; + + li { + width: 124px; + overflow: hidden; + padding: 4px 0; + + .wea-checkbox { + width: 100%; + } + + .ant-checkbox-wrapper { + display: flex; + align-items: center; + width: 100%; + + span:last-child { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + } + + .itemsWrapper { + height: 160px; + overflow: scroll; + border: 1px solid #e5e5e5; + border-radius: 4px; + padding: 16px; + width: 100%; + + .empty { + line-height: 160px; + text-align: center; + font-size: 14px; + display: inline-block; + width: 100%; + } + } + + .wea-more-button { + ul > li:last-child { + display: none !important; + } + } +} diff --git a/pc4mobx/hrmSalary/components/selectItemsModal/index11.js b/pc4mobx/hrmSalary/components/selectItemsModal/index11.js new file mode 100644 index 00000000..27cc02a7 --- /dev/null +++ b/pc4mobx/hrmSalary/components/selectItemsModal/index11.js @@ -0,0 +1,93 @@ +/* + * Author: 黎永顺 + * Description: + * Date: 2022-05-19 15:18:09 + * LastEditTime: 2022-06-29 10:06:13 + */ +import React from "react"; +import { WeaCheckbox, WeaInputSearch, WeaDialog } from "ecCom"; +import { Button, Dropdown, Menu, Modal } from "antd"; +import "../../pages/dataAcquisition/attendance/index.less" + + +export const items = [ + { + key: "1", + title: "测试", + checked: false + }, + { + key: "2", + title: "测试2", + checked: true + } +]; + +export default class SelectItemModal extends React.Component { + constructor(props) { + super(props); + this.state = { + searchValue: "" + }; + } + + handleShowChecked(value) { + value = value == 1 ? true : false; + this.props.onShowChecked(value); + } + + handleMenuClick(e) { + if (e.key == "1") { //恢复默认设置 + this.props.onRestoreDefault(); + } else if (e.key == "2") { + this.props.onSetDefault(); + } else if (e.key == "3") { + + } + } + + render() { + const menu = ( + this.handleMenuClick(e)}> + 恢复默认设置 + 设置默认设置 + {/* 操作日志 */} + + ); + return ( + { + this.props.onSave(); + }}>保存, + 更多 + ]} + > +
+ { + this.setState({ searchValue: value }); + }} + onSearch={(value) => { + this.props.onSearch(value); + }} + /> +
+ {this.props.children} +
+ { + this.handleShowChecked(value); + }}/> +
+ + ); + } +} diff --git a/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js index b29f38b8..e4d99a5e 100644 --- a/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js +++ b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js @@ -1,78 +1,56 @@ -import React from "react"; -import { WeaCheckbox } from "ecCom"; -import { Col, Icon, Row } from "antd"; +/* + * Author: 黎永顺 + * name: 设置项目 + * Description: + * Date: 2023/3/6 + */ +import React, { Component } from "react"; +import { WeaCheckbox, WeaSearchGroup } from "ecCom"; -export default class SelectItemsWrapper extends React.Component { - constructor(props) { - super(props); - this.state = { - showContent: true, - checkStatus: false - }; - } - - handleAllChecked(value) { - value = value == 1 ? true : false; - let items = [...this.props.items]; - items.map(item => { - item.checked = value; - }); - this.setState({ - checkStatus: value - }); - this.props.onChange(items); - } - - handleItemChange(value, record) { - value = value == 1 ? true : false; - let items = [...this.props.items]; - items.map(item => { - if (item.id == record.id) { - item.checked = value; - } - }); - this.props.onChange(items); - } +class SelectItemsWrapper extends Component { + renderTitle = (item) => { + const { groupName } = item; + return
+ + 已选择0个字段 +
; + }; render() { + const { dataSource } = this.props; return ( -
-
-
{this.props.title}} onChange={(value) => { - this.handleAllChecked(value); - }} value={this.state.checkStatus}/>
-
this.setState({ - showContent: !this.state.showContent - })}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 0}个字段 - - { - this.state.showContent ? : - } - -
-
+ { - this.state.showContent &&
- - { - this.props.items && this.props.items.map(item => ( - { - this.handleItemChange(value, item); - }}/> - )) - } - -
+ _.map(dataSource, item => { + const { items } = item; + return +
+ { + _.isEmpty(items) ? + 暂无数据 : +
    + { + _.map(items, child => { + const { name, checked } = child; + return
  • + { + console.log(value); + }} + /> +
    • ; + }) + } +
+ } +
+ ; + }) } - -
+ ); } } + +export default SelectItemsWrapper; diff --git a/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrappercopy.js b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrappercopy.js new file mode 100644 index 00000000..b29f38b8 --- /dev/null +++ b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrappercopy.js @@ -0,0 +1,78 @@ +import React from "react"; +import { WeaCheckbox } from "ecCom"; +import { Col, Icon, Row } from "antd"; + +export default class SelectItemsWrapper extends React.Component { + constructor(props) { + super(props); + this.state = { + showContent: true, + checkStatus: false + }; + } + + handleAllChecked(value) { + value = value == 1 ? true : false; + let items = [...this.props.items]; + items.map(item => { + item.checked = value; + }); + this.setState({ + checkStatus: value + }); + this.props.onChange(items); + } + + handleItemChange(value, record) { + value = value == 1 ? true : false; + let items = [...this.props.items]; + items.map(item => { + if (item.id == record.id) { + item.checked = value; + } + }); + this.props.onChange(items); + } + + render() { + return ( +
+
+
{this.props.title}} onChange={(value) => { + this.handleAllChecked(value); + }} value={this.state.checkStatus}/>
+
this.setState({ + showContent: !this.state.showContent + })}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 0}个字段 + + { + this.state.showContent ? : + } + +
+
+ { + this.state.showContent &&
+ + { + this.props.items && this.props.items.map(item => ( + { + this.handleItemChange(value, item); + }}/> + )) + } + +
+ } + +
+ ); + } +} diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js index 1ee0714f..2eb99f7e 100644 --- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js +++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js @@ -9,25 +9,31 @@ import { WeaTable } from "ecCom"; import { message, Modal } from "antd"; import { deleteAttendance, + getAttendanceFieldSettingList, getAttendanceList, getLedgerList, getSalaryCycleAndAttendCycle, + importAttendQuoteData, previewAttendQuote } from "../../../../apis/attendance"; import ImportModal from "../../../../components/importModal"; import HeaderSet from "../../../../components/importModal/headerSet"; import ImportFormOptions from "./importFormOptions"; +import SelectItemModal from "../../../../components/selectItemsModal"; import moment from "moment"; +import SelectItemsWrapper from "../../../../components/selectItemsModal/selectItemsWrapper"; class AttendanceDataComp extends Component { constructor(props) { super(props); this.state = { loading: { - query: false + query: false, + headset: false }, dataSource: [], columns: [], + fieldSetList: [], pageInfo: { current: 1, pageSize: 10, @@ -40,7 +46,8 @@ class AttendanceDataComp extends Component { importFormPayload: { salaryYearMonth: moment().format("YYYY-MM"), salarySobList: [], salarySobId: "", salaryCycle: "", attendCycle: "" - } + }, + fieldSetPayload: { visible: false, title: "", data: [] } }; } @@ -137,15 +144,47 @@ class AttendanceDataComp extends Component { }; setStep = step => this.setState({ importData: { ...this.state.importData, step } }); handleFinish = () => { - console.log("finish"); + const { importData } = this.state; + const { step } = importData; + this.setState({ + importData: { + ...importData, visiable: false, params: {}, step: 0, + columns: [], slideDataSource: [], importResult: [] + } + }); + step === 2 && this.getAttendanceList(); }; handlePreviewImport = (params) => { - previewAttendQuote(params).then(({status, data})=>{ - console.log("handlePreviewImport", data); - }) + const { importData } = this.state; + previewAttendQuote(params).then(({ status, data }) => { + if (status) { + const { headers, list } = data; + this.setState({ + importData: { + ...importData, + columns: _.map(headers, (it, dataIndex) => ({ title: it, dataIndex })), + slideDataSource: _.map(list, item => { + return _.reduce(item, (pre, cur, key) => (_.assign(pre, { [key]: cur })), {}); + }) + } + }); + } + }); }; handleImport = (params) => { - console.log("handleImport", params); + const { importData } = this.state; + const { step } = importData; + importAttendQuoteData(params).then(({ status, data }) => { + if (status) { + this.setState({ + importData: { + ...importData, + step: step + 1, + importResult: data + } + }); + } + }); }; handleTemplateLinkClick = () => { const { importFormPayload } = this.state; @@ -156,9 +195,81 @@ class AttendanceDataComp extends Component { } window.open(`/api/bs/hrmsalary/attendQuote/downloadTemplate?salaryYearMonth=${salaryYearMonth}&salarySobId=${salarySobId}`); }; + /* + * Author: 黎永顺 + * Description: 表头设置 + * Params: + * Date: 2023/3/6 + */ + handleHeaderSettings = (params) => { + const { fieldSetPayload, loading } = this.state; + this.setState({ loading: { ...loading, headset: true } }); + getAttendanceFieldSettingList(params).then(({ status, data }) => { + this.setState({ loading: { ...loading, headset: false } }); + if (status) { + this.setState({ + fieldSetList: data, + fieldSetPayload: { + ...fieldSetPayload, + visible: true, title: "导入字段设置", data + } + }); + } + }).catch(() => this.setState({ loading: { ...loading, headset: false } })); + }; + handleCloseSettings = () => { + const { fieldSetPayload } = this.state; + this.setState({ + fieldSetPayload: { + ...fieldSetPayload, + visible: false, title: "", data: [] + } + }); + }; + handleSearchItemSet = (val) => { + const { fieldSetPayload, fieldSetList } = this.state; + this.setState({ + fieldSetPayload: { + ...fieldSetPayload, + data: _.map(_.cloneDeep(fieldSetList), item => { + return { + ...item, + items: _.filter(item.items || [], child => { + return child.name.indexOf(val) !== -1; + }) + }; + }) + } + }); + }; + handleShowOnlyChecked = (checked) => { + const { fieldSetPayload, fieldSetList } = this.state; + if (!!NUmber(checked)) { + this.setState({ + fieldSetPayload: { + ...fieldSetPayload, + data: _.map(_.cloneDeep(fieldSetList), item => { + return { + ...item, + items: _.map(item.items || [], child => !!child.checked) + }; + }) + } + }); + } else { + this.setState({ + fieldSetPayload: { + ...fieldSetPayload, + data: _.cloneDeep(fieldSetList) + } + }); + } + }; render() { - const { dataSource, columns, pageInfo, loading, importData, importFormPayload } = this.state; + const { + dataSource, columns, pageInfo, loading, importData, importFormPayload, fieldSetPayload + } = this.state; const { showOperateBtn, salaryYearMonth } = this.props; const pagination = { ...pageInfo, @@ -207,19 +318,20 @@ class AttendanceDataComp extends Component { previewImport={this.handlePreviewImport} importFile={this.handleImport} templateLink={this.handleTemplateLinkClick} onCancel={this.handleFinish} headerSetCompoent={ { - // getAttendanceFieldSettingList({ sourceType: "IMPORT" }); - // this.setState({ - // selectItemVisible: true - // }); - }} - />} - renderFormComponent={ - () => + loading={loading.headset} + onSetClick={() => this.handleHeaderSettings({ sourceType: "IMPORT" })}/>} + renderFormComponent={() => } /> + {/* 表头设置 */} + } + onCancel={this.handleCloseSettings} + onSearchItemSet={this.handleSearchItemSet} + onShowOnlyChecked={this.handleShowOnlyChecked} + /> ); }