custom/钱智

pc4mobx/hrmSalary/components/CustomSelect/index.js

@@ -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;

pc4mobx/hrmSalary/components/CustomSelect/index.less

@@ -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;
+    }
+  }
+}

pc4mobx/hrmSalary/components/FormInfo/index.js

@@ -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>
     );
   }
 }

pc4mobx/hrmSalary/pages/calculate/components/calculateDialog/index.js

@@ -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,7 +103,9 @@ 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>
     );
   }

pc4mobx/hrmSalary/pages/calculate/index.less

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

pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceRefrenceDataModal.js

@@ -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">
+        <FormInfo className="form-dialog-layout" center={false} itemRender={itemRender} form={refenceform}
-          {getSearchs(refenceform, condition, 1, false, null, "", "multiple_select")}
+                  formFields={condition}/>
-        </div>
+        {/*<div className="form-dialog-layout">*/}
+        {/*  {getSearchs(refenceform, condition, 1, false, null, "", "multiple_select")}*/}
+        {/*</div>*/}
         {/* 表头设置 */}
         <SelectItemModal {...headerSetPayload}
                          onCancel={this.handleCloseSettings}

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/columns.js

@@ -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"],
@@ -169,8 +170,3 @@ export const cumTaxPeriodCondition = [
     defaultshow: true
   }
 ];
-
-
-
-
-

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/components/salaryCumDeductChooseTaxPeriodDialog.js

@@ -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,
+  online: onlineRequest, advance: onlineActualAddUpAdvanceTax
-  advance: onlineActualAddUpAdvanceTax
 };
 
-@inject("cumDeductStore")
+@inject("cumDeductStore") @observer
-@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,18 +81,27 @@ class SalaryCumDeductChooseTaxPeriodDialog extends Component {
   render() {
     const { loading, conditions } = this.state;
     const { cumDeductStore: { cumTaxPeriodForm } } = this.props;
-    return (
+    const itemRender = {
-      <WeaDialog
+      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">
+        <FormInfo className="paymentDialogContent" center={false} itemRender={itemRender} form={cumTaxPeriodForm}
-          {getSearchs(cumTaxPeriodForm, conditions, 1, false)}
+                  formFields={conditions}/>
-        </div>
+
-      </WeaDialog>
+        {/*<div className="paymentDialogContent">*/}
-    );
+        {/*  {getSearchs(cumTaxPeriodForm, conditions, 1, false)}*/}
+        {/*</div>*/}
+      </WeaDialog>);
   }
 }
 

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js

@@ -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>;
 };
 

pc4mobx/hrmSalary/pages/dataAcquisition/cumSituation/columns.js

@@ -22,6 +22,7 @@ export const dataCollectCondition = [
         value: "",
         options: [],
         rules: "required|string",
+        otherParams: { showSearch: true, optionFilterProp: "children" },
         viewAttr: 3
       },
       // {

pc4mobx/hrmSalary/pages/dataAcquisition/otherDeduct/columns.js

@@ -22,6 +22,7 @@ export const dataCollectCondition = [
         value: "",
         options: [],
         rules: "required|string",
+        otherParams: { showSearch: true, optionFilterProp: "children" },
         viewAttr: 3
       },
       {

pc4mobx/hrmSalary/pages/dataAcquisition/specialAddDeduction/components/condition.js

@@ -11,6 +11,7 @@ export const condition = [
         value: "",
         options: [],
         rules: "required|string",
+        otherParams: { showSearch: true, optionFilterProp: "children" },
         viewAttr: 3
       },
       {

pc4mobx/hrmSalary/pages/declare/components/declareDialog/index.js

@@ -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,7 +137,9 @@ 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>
     );
   }

pc4mobx/hrmSalary/pages/declare/index.less

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

pc4mobx/hrmSalary/pages/variableSalary/components/advanceInputBtn/index.less

@@ -5,7 +5,7 @@
   top: -1.5px;
 
   .wea-advanced-search {
-    top: 1px;
+    top: 2px!important;
     left: -1px;
     height: 28px;
     line-height: 1;

pc4mobx/hrmSalary/pages/variableSalary/components/salaryFileList/index.js

@@ -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>

pc4mobx/hrmSalary/pages/variableSalary/conditions.js

@@ -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
       },
       {

pc4mobx/hrmSalary/style/index.less

@@ -39,6 +39,11 @@
 .form-dialog-layout {
   background: #f6f6f6;
 
+  .wea-required-e9 {
+    top: 0;
+    right: -14px;
+  }
+
   .wea-form-item-wrapper {
     display: block !important;
   }
@@ -174,4 +179,3 @@
     margin-right: 8px;
   }
 }
-