custom/钱智

This commit is contained in:
lys 2025-10-28 15:07:15 +08:00
parent 8a6e9bbadd
commit fea2c5921e
18 changed files with 323 additions and 51 deletions

View File

@ -0,0 +1,127 @@
/*
* 自定义多选下拉框
* 支持搜索
* @Author: 黎永顺
* @Date: 2024/9/13
* @Wechat:
* @Email: 971387674@qq.com
* @description:
*/
import React, { Component } from "react";
import { WeaCheckbox, WeaInput, WeaLocaleProvider, WeaNewScroll } from "ecCom";
import classNames from "classnames";
import { Dropdown } from "antd";
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;
class Index extends Component {
constructor(props) {
super(props);
this.state = {
visible: false, value: props.value ? props.value.split(",") : [],
keywords: ""
};
}
isAllChecked = () => {
const { options } = this.props, { value, keywords } = this.state;
let v = "0";
if (_.uniq(value).length === options.filter(k => k.showname.indexOf(keywords) >= 0).length) v = "1";
return v;
};
isChecked = (v) => {
const { value } = this.state;
return value.indexOf(v) > -1 ? "1" : "0";
};
onAllChange = (v) => {
const { options, onChange } = this.props, { keywords } = this.state;
let values = [], shownames = [];
if (v == 1) {
options.filter(k => k.showname.indexOf(keywords) >= 0).forEach(o => {
values.push(o.key);
shownames.push(o.showname);
});
}
this.setState({ value: values });
onChange && onChange(values.join(","), shownames.join(","));
};
onItemChange = (v, id) => {
const { onChange, options } = this.props, { value } = this.state;
let values = !_.isEmpty(value) ? value : [], shownames = [];
if (v == "1") {
values.push(id);
} else {
values = values.filter(val => val !== id);
}
values.forEach(val => {
let target = options.filter((data) => data.key == val)[0];
if (target) shownames.push(target.showname);
});
this.setState({ value: values });
onChange && onChange(values.join(","), shownames.join(","));
};
getList = () => {
const { options } = this.props, { keywords } = this.state;
let style = {};
if (options.length > 5) style = { height: 200 };
return <div className="wea-select-panel" style={style}>
<WeaNewScroll className="wea-select-scroll" height="100%">
<div className="wea-select-panel-item">
<WeaInput value={keywords} onChange={keywords => this.setState({ keywords })}/>
</div>
<div className="wea-select-panel-item">
<WeaCheckbox
content={"全选"}
value={this.isAllChecked()}
onChange={this.onAllChange}
>
</WeaCheckbox>
</div>
{options && options.filter(k => k.showname.indexOf(keywords) >= 0).map(o => {
return <div className="wea-select-panel-item">
<WeaCheckbox
content={o.showname}
value={this.isChecked(o.key)}
onChange={(v) => this.onItemChange(v, o.key)}
>
</WeaCheckbox>
</div>;
})}
</WeaNewScroll>
</div>;
};
getShownames = () => {
const { options } = this.props;
let { value } = this.state;
let shownames = [];
value.forEach(val => {
let target = options.filter((data) => data.key == val)[0];
if (target) shownames.push(target.showname);
});
return shownames.join(",");
};
render() {
const { visible } = this.state, { layout } = this.props;
const clsname = classNames({
"wea-associative-search-mult": true
});
return (<div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
<Dropdown trigger={["click"]} overlay={this.getList()}
onVisibleChange={visible => this.setState({ visible })} visible={visible}
getPopupContainer={() => (layout || document.body)}>
<div className="wea-select-input wdb cursor-pointer" ref="selectInput">
<span className="wdb">{this.getShownames()}</span>
{!this.state.visible ? <i className="icon-coms-down2 arrow"/> : <i className="icon-coms-up2 arrow"/>}
</div>
</Dropdown>
</div>);
}
}
export default Index;

View File

@ -0,0 +1,43 @@
.customMuiSelect {
border: none;
padding: 0;
.wea-select-input {
min-width: 100px;
width: 100%;
display: inline-block;
padding: 4px 17px 4px 4px;
position: relative;
min-height: 30px;
border: 1px solid #d9d9d9;
user-select: none;
&:hover, &:focus {
border-color: #57c5f7;
}
.arrow {
position: absolute;
right: 4px;
top: 8px;
color: #979797;
}
}
}
.wea-select-panel {
padding: 5px 0;
max-height: 200px;
border-radius: 3px;
background: #fff;
border: 1px solid #ddd;
.wea-select-panel-item {
padding: 5px 10px;
&:hover {
background-color: #e9f7ff;
}
}
}

View File

@ -89,10 +89,10 @@ export default class FormInfo extends Component {
};
render() {
const { formFields, className, form } = this.props;
const { formFields, className, form, style = {} } = this.props;
if (formFields == null || !form.isFormInit) return (<div></div>);
return (
<div className={className}>{this.renderForm()}</div>
<div className={className} style={style}>{this.renderForm()}</div>
);
}
}
}

View File

@ -8,9 +8,10 @@ import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaLocaleProvider, WeaTools } from "ecCom";
import { Button, message } from "antd";
import { getSearchs } from "../../../../util";
import { salaryacctGetForm, saveBasic } from "../../../../apis/calculate";
import { calculateConditions } from "./condition";
import FormInfo from "../../../../components/FormInfo";
import CustomSelect from "../../../../components/CustomSelect";
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
@ -79,6 +80,22 @@ class Index extends Component {
render() {
const { conditions, loading } = this.state;
const { calculateStore: { calculateForm } } = this.props;
const itemRender = {
salarySobIds: (field, textAreaProps, form, formParams) => {
return (<React.Fragment>
<CustomSelect value={field.value} options={field.options} onChange={v => {
form.updateFields({ salarySobIds: { value: v } });
this.forceUpdate();
}}/>
{
_.isEmpty(formParams.salarySobIds) &&
<span className="wea-required-e9" style={{ verticalAlign: "middle" }}>
<img src="/images/BacoError_wev9.png" alt=""/>
</span>
}
</React.Fragment>);
}
};
return (
<WeaDialog
{...this.props} style={{ width: 480, height: 174 }} initLoadCss
@ -86,10 +103,12 @@ class Index extends Component {
<Button type="primary" onClick={this.save} loading={loading}>{getLabel(111, "确定")}</Button>
]}
>
<div className="calculate-dialog-layout">{getSearchs(calculateForm, conditions, 1, false)}</div>
<FormInfo className="calculate-dialog-layout" center={false} itemRender={itemRender} form={calculateForm}
formFields={conditions}/>
{/*<div className="calculate-dialog-layout">{getSearchs(calculateForm, conditions, 1, false)}</div>*/}
</WeaDialog>
);
}
}
export default Index;
export default Index;

View File

@ -149,6 +149,11 @@
.calculate-dialog-layout {
background: #f6f6f6;
.wea-required-e9 {
top: 0;
right: -14px;
}
.wea-form-item-wrapper {
display: inline-block !important;
}
@ -216,4 +221,4 @@
}
}
}
}
}

View File

@ -9,7 +9,6 @@ import { inject, observer } from "mobx-react";
import { WeaDialog } from "ecCom";
import { Button, message } from "antd";
import { reFrenceConditions } from "../columns";
import { getSearchs } from "../../../../util";
import {
checkOperation,
getAttendanceFieldSettingList,
@ -22,6 +21,8 @@ import SelectItemModal from "../../../../components/selectItemsModal";
import SelectItemsWrapper from "../../../../components/selectItemsModal/selectItemsWrapper";
import { postFetch } from "../../../../util/request";
import "./index.less";
import FormInfo from "../../../../components/FormInfo";
import CustomSelect from "../../../../components/CustomSelect";
@inject("attendanceStore")
@observer
@ -216,11 +217,29 @@ class AttendanceRefrenceDataModal extends Component {
<Button type="primary" onClick={this.handleSubmitFields} loading={loading}>同步</Button>,
<Button type="ghost" onClick={this.handleHeaderSetting} loading={headerSetLoading}>表头设置</Button>
];
const itemRender = {
salarySobIds: (field, textAreaProps, form, formParams) => {
return (<React.Fragment>
<CustomSelect value={field.value} options={field.options} onChange={v => {
form.updateFields({ salarySobIds: { value: v } });
this.forceUpdate();
}}/>
{
_.isEmpty(formParams.salarySobIds) &&
<span className="wea-required-e9" style={{ verticalAlign: "middle" }}>
<img src="/images/BacoError_wev9.png" alt=""/>
</span>
}
</React.Fragment>);
}
};
return (
<WeaDialog {...this.props} style={{ width: 535, height: 174 }} buttons={buttons} initLoadCss>
<div className="form-dialog-layout">
{getSearchs(refenceform, condition, 1, false, null, "", "multiple_select")}
</div>
<FormInfo className="form-dialog-layout" center={false} itemRender={itemRender} form={refenceform}
formFields={condition}/>
{/*<div className="form-dialog-layout">*/}
{/* {getSearchs(refenceform, condition, 1, false, null, "", "multiple_select")}*/}
{/*</div>*/}
{/* 表头设置 */}
<SelectItemModal {...headerSetPayload}
onCancel={this.handleCloseSettings}
@ -233,4 +252,4 @@ class AttendanceRefrenceDataModal extends Component {
}
}
export default AttendanceRefrenceDataModal;
export default AttendanceRefrenceDataModal;

View File

@ -22,6 +22,7 @@ export const dataCollectCondition = [
value: "",
options: [],
rules: "required|string",
otherParams: { showSearch: true, optionFilterProp: "children" },
viewAttr: 3
},
{
@ -153,7 +154,7 @@ export const cumTaxPeriodCondition = [
value: "",
rules: "required",
viewAttr: 3
},{
}, {
colSpan: 1,
conditionType: "SELECT",
domkey: ["taxAgentIds"],
@ -168,9 +169,4 @@ export const cumTaxPeriodCondition = [
title: "",
defaultshow: true
}
];
];

View File

@ -8,21 +8,20 @@ import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaLocaleProvider, WeaTools } from "ecCom";
import { Button, message } from "antd";
import { getSearchs } from "../../../../util";
import { cumTaxPeriodCondition } from "../columns";
import { onlineRequest } from "../../../../apis/cumDeduct";
import { onlineActualAddUpAdvanceTax } from "../../../../apis/cumSituation";
import { postFetch } from "../../../../util/request";
import FormInfo from "../../../../components/FormInfo";
import CustomSelect from "../../../../components/CustomSelect";
const getLabel = WeaLocaleProvider.getLabel;
const getKey = WeaTools.getKey;
const APIFox = {
online: onlineRequest,
advance: onlineActualAddUpAdvanceTax
online: onlineRequest, advance: onlineActualAddUpAdvanceTax
};
@inject("cumDeductStore")
@observer
@inject("cumDeductStore") @observer
class SalaryCumDeductChooseTaxPeriodDialog extends Component {
constructor(props) {
super(props);
@ -40,7 +39,8 @@ class SalaryCumDeductChooseTaxPeriodDialog extends Component {
...item, items: _.map(item.items, o => {
if (getKey(o) === "taxAgentIds") {
return {
...o, lable: getLabel(o.lanId, o.label),
...o,
lable: getLabel(o.lanId, o.label),
options: _.map(data, g => ({ key: String(g.id), showname: g.name }))
};
}
@ -81,19 +81,28 @@ class SalaryCumDeductChooseTaxPeriodDialog extends Component {
render() {
const { loading, conditions } = this.state;
const { cumDeductStore: { cumTaxPeriodForm } } = this.props;
return (
<WeaDialog
const itemRender = {
taxAgentIds: (field, textAreaProps, form, formParams) => {
return (<CustomSelect value={field.value} options={field.options} onChange={v => {
form.updateFields({ taxAgentIds: { value: v } });
this.forceUpdate();
}}/>);
}
};
return (<WeaDialog
{...this.props} className="paymentDialog mulSelectDialog" initLoadCss
style={{ width: 550 }}
buttons={[<Button type="primary" loading={loading} onClick={this.save}>{getLabel(33703, "确认")}</Button>]}
bottomLeft={getLabel(111, "点击保存后,稍后请点击【获取结果下载】下载获取结果。获取的数据将覆盖列表原本数据(有则覆盖无则新增)。")}
>
<div className="paymentDialogContent">
{getSearchs(cumTaxPeriodForm, conditions, 1, false)}
</div>
</WeaDialog>
);
<FormInfo className="paymentDialogContent" center={false} itemRender={itemRender} form={cumTaxPeriodForm}
formFields={conditions}/>
{/*<div className="paymentDialogContent">*/}
{/* {getSearchs(cumTaxPeriodForm, conditions, 1, false)}*/}
{/*</div>*/}
</WeaDialog>);
}
}
export default SalaryCumDeductChooseTaxPeriodDialog;
export default SalaryCumDeductChooseTaxPeriodDialog;

View File

@ -35,6 +35,7 @@ import { getDomkes } from "../../../util";
import Layout from "../layout";
import moment from "moment";
import SalaryCumDeductChooseTaxPeriodDialog from "./components/salaryCumDeductChooseTaxPeriodDialog";
import CustomSelect from "../../../components/CustomSelect";
const getLabel = WeaLocaleProvider.getLabel;
const getKey = WeaTools.getKey;
@ -609,8 +610,12 @@ export const DataCollectionSelect = (props) => {
wrapperCol = 14, viewAttr = 2, multiple = false
} = props;
return <WeaFormItem label={label} labelCol={{ span: labelCol }} wrapperCol={{ span: wrapperCol }}>
<WeaSelect value={value} onChange={(val) => onChange({ key, value: val })} options={options}
viewAttr={viewAttr} multiple={multiple} showSearch optionFilterProp="children"/>
{
multiple ?
<CustomSelect value={value} onChange={(val) => onChange({ key, value: val })} options={options}/> :
<WeaSelect value={value} onChange={(val) => onChange({ key, value: val })} options={options}
viewAttr={viewAttr} multiple={multiple} showSearch optionFilterProp="children"/>
}
</WeaFormItem>;
};
@ -638,4 +643,4 @@ export const DataCollectionDateRangePick = (props) => {
}}
/>
</WeaFormItem>;
};
};

View File

@ -22,6 +22,7 @@ export const dataCollectCondition = [
value: "",
options: [],
rules: "required|string",
otherParams: { showSearch: true, optionFilterProp: "children" },
viewAttr: 3
},
// {
@ -338,4 +339,4 @@ export const taxOptions = [
key: "12",
showname: "十二月"
}
];
];

View File

@ -22,6 +22,7 @@ export const dataCollectCondition = [
value: "",
options: [],
rules: "required|string",
otherParams: { showSearch: true, optionFilterProp: "children" },
viewAttr: 3
},
{
@ -635,4 +636,4 @@ export const taxDetailSettingsConditions = {
defaultshow: true,
col: 1
}]
};
};

View File

@ -11,6 +11,7 @@ export const condition = [
value: "",
options: [],
rules: "required|string",
otherParams: { showSearch: true, optionFilterProp: "children" },
viewAttr: 3
},
{
@ -193,4 +194,4 @@ export const searchCondition = [
title: "常用条件",
defaultshow: true
}
];
];

View File

@ -13,6 +13,8 @@ import { saveDeclare, taxdeclarationGetRate } from "../../../../apis/declare";
import { declareConditions } from "./condition";
import { postFetch } from "../../../../util/request";
import * as API from "../../../../apis/ruleconfig";
import FormInfo from "../../../../components/FormInfo";
import CustomSelect from "../../../../components/CustomSelect";
const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
@ -112,6 +114,22 @@ class Index extends Component {
render() {
const { conditions, loading } = this.state;
const { declareStore: { declareForm } } = this.props;
const itemRender = {
taxAgentIds: (field, textAreaProps, form, formParams) => {
return (<React.Fragment>
<CustomSelect value={field.value} options={field.options} onChange={v => {
form.updateFields({ taxAgentIds: { value: v } });
this.forceUpdate();
}}/>
{
_.isEmpty(formParams.taxAgentIds) &&
<span className="wea-required-e9" style={{ verticalAlign: "middle" }}>
<img src="/images/BacoError_wev9.png" alt=""/>
</span>
}
</React.Fragment>);
}
};
return (
<WeaDialog
{...this.props} style={{ width: 500, height: 174 }} initLoadCss
@ -119,10 +137,12 @@ class Index extends Component {
<Button type="primary" onClick={this.save} loading={loading}>{getLabel(543618, "生成申报表")}</Button>
]}
>
<div className="declare-dialog-layout">{getSearchs(declareForm, conditions, 1, false)}</div>
<FormInfo className="declare-dialog-layout" center={false} itemRender={itemRender} form={declareForm}
formFields={conditions}/>
{/*<div className="declare-dialog-layout">{getSearchs(declareForm, conditions, 1, false)}</div>*/}
</WeaDialog>
);
}
}
export default Index;
export default Index;

View File

@ -57,6 +57,11 @@
.declare-dialog-layout {
background: #f6f6f6;
.wea-required-e9 {
top: 0;
right: -14px;
}
.wea-search-group {
padding: 16px;
@ -153,4 +158,4 @@
color: red;
}
}
}
}

View File

@ -5,7 +5,7 @@
top: -1.5px;
.wea-advanced-search {
top: 1px;
top: 2px!important;
left: -1px;
height: 28px;
line-height: 1;
@ -25,4 +25,4 @@
white-space: nowrap;
text-overflow: ellipsis;
}
}
}

View File

@ -10,16 +10,17 @@
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTools } from "ecCom";
import { WeaTableNew } from "comsMobx";
import { WeaSwitch, WeaTableNew } from "comsMobx";
import { message, Modal, Spin } from "antd";
import * as API from "../../../../apis/variableSalary";
import { getSearchs } from "../../../../util";
import { extraConditions } from "../../conditions";
import AdvanceInputBtn from "../advanceInputBtn";
import SearchPannel from "../searchPannel";
import { postFetch } from "../../../../util/request";
import { toJS } from "mobx";
import cs from "classnames";
import FormInfo from "../../../../components/FormInfo";
import CustomSelect from "../../../../components/CustomSelect";
const WeaTableComx = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
@ -173,9 +174,23 @@ class Index extends Component {
if (dom && dataSource.length > 0) {
height = (parseFloat(dom.style.height) > 620 && dataSource.length === 10) ? dataSource.length * 46 + 108 : dataSource.length < 10 ? dataSource.length * 46 + 108 : parseFloat(dom.style.height) - 62;
}
const itemRender = {
taxAgentIds: (field, textAreaProps, form, formParams) => {
return (<CustomSelect value={field.value} options={field.options} onChange={v => {
form.updateFields({ taxAgentIds: { value: v } });
this.getVariableSalaryList();
}}/>);
},
salaryMonth: (field, textAreaProps, form, formParams) => {
return (<WeaSwitch fieldConfig={{ ...field, ...textAreaProps }} form={form} formParams={formParams}
onChange={this.getVariableSalaryList}/>);
}
};
return (<React.Fragment>
<div className="extraFormQuery form-dialog-layout">
{getSearchs(VExtraSalryForm, condtions, 2, false, () => this.getVariableSalaryList())}
<FormInfo center={false} colCount={2} itemRender={itemRender} form={VExtraSalryForm}
formFields={condtions} style={{ flex: 1 }}/>
{/*{getSearchs(VExtraSalryForm, condtions, 2, false, () => this.getVariableSalaryList())}*/}
<AdvanceInputBtn searchType="advance" onOpenAdvanceSearch={() => this.openAdvanceSearch()}
onAdvanceSearch={this.getVariableSalaryList}/>
</div>
@ -202,4 +217,4 @@ class Index extends Component {
}
}
export default Index;
export default Index;

View File

@ -44,6 +44,7 @@ export const conditions = [
value: "",
options: [],
multiple: true,
hide: true,
viewAttr: 2
},
{
@ -180,6 +181,7 @@ export const salaryFileConditions = [
value: "",
options: [],
rules: "required",
otherParams: { showSearch: true, optionFilterProp: "children" },
viewAttr: 3
},
{
@ -218,4 +220,4 @@ export const salaryFileConditions = [
title: "", col: 2,
defaultshow: true
}
];
];

View File

@ -39,6 +39,11 @@
.form-dialog-layout {
background: #f6f6f6;
.wea-required-e9 {
top: 0;
right: -14px;
}
.wea-form-item-wrapper {
display: block !important;
}
@ -173,5 +178,4 @@
a:not(:last-child) {
margin-right: 8px;
}
}
}