feature/2.9.42309.01-薪资核算详情页面列表改造（页面编辑）

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcAdvanceSearchPannel.js

@@ -5,10 +5,12 @@
  * Date: 2023/9/14
  */
 import React, { Component } from "react";
-import { WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
-import { Button } from "antd";
+import { WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaSelect, WeaTools } from "ecCom";
+import { Button, Col, Row } from "antd";
 import { inject, observer } from "mobx-react";
+import uuidV4 from "uuid/v4";
 import { editCalcSearchConditions } from "./condition";
+import { getExportField } from "../../../../../apis/calculate";
 import { getSearchs } from "../../../../../util";
 
 const getKey = WeaTools.getKey;
@@ -20,12 +22,13 @@ class EditCalcAdvanceSearchPannel extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      searchConditions: []
-
+      searchConditions: [], salaryItems: [],
+      customSearchConditions: []
     };
   }
 
   componentDidMount() {
+    this.getExportField();
     this.setState({
       searchConditions: _.map(editCalcSearchConditions, item => {
         return {
@@ -53,19 +56,57 @@ class EditCalcAdvanceSearchPannel extends Component {
     });
   }
 
+  getExportField = () => {
+    getExportField({ salaryAcctRecordId: this.props.salaryAcctRecordId })
+      .then(({ status, data }) => {
+        if (status) {
+          const { itemsByGroup } = data;
+          this.setState({
+            salaryItems: _.map(itemsByGroup, item => ({
+              key: item.salarySobItemGroupId.toString(),
+              label: item.salarySobItemGroupName,
+              options: _.map(item.salaryItems, o => ({
+                key: o.salaryItemId.toString(), showname: o.salaryItemName
+              }))
+            }))
+          });
+        }
+      });
+  };
+  handleAddCustomSearchForm = () => {
+    const { customSearchConditions, salaryItems } = this.state;
+    this.setState({
+      customSearchConditions: [
+        ...customSearchConditions,
+        {
+          com: CustomFormFields({
+            uuid: uuidV4(), onDelete: this.handleDelete, salaryItems
+          }),
+          uuid: uuidV4()
+        }
+      ]
+    });
+  };
+  handleDelete = (uuid) => {
+    const { customSearchConditions } = this.state;
+    this.setState({
+      customSearchConditions: _.filter(customSearchConditions, o => o.uuid !== uuid)
+    });
+  };
+
   render() {
-    const { searchConditions } = this.state;
+    const { searchConditions, customSearchConditions } = this.state;
     const { calculateStore: { ECSearchForm } } = this.props;
     return (
       <React.Fragment>
         <div className="wea-advanced-searchsAd">
           {getSearchs(ECSearchForm, searchConditions, 2, false)}
-          <WeaSearchGroup needTigger showGroup title={getLabel(32843, "其他条件")}>
-            <div className="custom-advance-form"></div>
-            <div className="custom-advance-largeSpacing">
-              <Button className="link" icon="plus">{getLabel(111, "添加搜索条件")}</Button>
-            </div>
-          </WeaSearchGroup>
+          <WeaSearchGroup needTigger showGroup title={getLabel(32843, "其他条件")} items={customSearchConditions}
+                          col={2}/>
+          <div className="custom-advance-largeSpacing">
+            <Button className="link" icon="plus"
+                    onClick={this.handleAddCustomSearchForm}>{getLabel(111, "添加搜索条件")}</Button>
+          </div>
           <div className="searchAdvanced-commonSelect">
             <Button type="ghost">{getLabel(111, "保存常用筛选")}</Button>
           </div>
@@ -86,3 +127,35 @@ class EditCalcAdvanceSearchPannel extends Component {
 }
 
 export default EditCalcAdvanceSearchPannel;
+
+const CustomFormFields = (props) => {
+  const { uuid, onDelete, salaryItems } = props;
+  console.log(133, salaryItems);
+  return <WeaFormItem labelCol={{ span: 0 }} wrapperCol={{ span: 18 }}>
+    <Row>
+      <Col span={6} style={{ paddingRight: 10 }}>
+        <WeaSelect options={salaryItems} showSearch optionFilterProp="children"/>
+      </Col>
+      <Col span={18}>
+        <Row>
+          <Col span={12} style={{ paddingRight: 10 }}>
+            <WeaSelect
+              options={[
+                { key: "1", showname: getLabel(111, "包含") },
+                { key: "2", showname: getLabel(111, "等于") },
+                { key: "3", showname: getLabel(111, "不等于") }
+              ]}
+            />
+          </Col>
+          <Col span={12} style={{ position: "relative" }}>
+            <WeaInput/>
+            <Button
+              type="ghost" icon="cross" className="formItem-delete" shape="circle"
+              onClick={() => onDelete(uuid)}
+            />
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  </WeaFormItem>;
+};

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.js

@@ -52,7 +52,7 @@ class Index extends Component {
 
   render() {
     const { salarySobCycle, showSearchAd, formulaTd, columnDesc, showTotalCell } = this.state;
-    const { accountExceptInfo } = this.props;
+    const { accountExceptInfo, routeParams: { salaryAcctRecordId } } = this.props;
     const formulaObj = _.get(columnDesc, [formulaTd]) || {};
     return (
       <div className="salary-edit-calc-content">
@@ -81,6 +81,7 @@ class Index extends Component {
         </div>
         <div className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
           <EditCalcAdvanceSearchPannel
+            salaryAcctRecordId={salaryAcctRecordId}
             onToggleSwitch={this.openAdvanceSearch}
             onAdSearch={this.onAdSearch}
           />

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.less

@@ -49,18 +49,29 @@
       height: 320px;
       overflow: hidden auto;
 
+      .formItem-delete {
+        position: absolute;
+        top: 0;
+        right: -40px;
+      }
+
       .searchAdvanced-commonSelect {
-        border-top: 1px solid #e5e5e5;
-        border-bottom: 1px solid #e5e5e5;
-        padding: 10px 16px;
+        border-top: 1px solid #ebebeb;
+        margin: 0 25px;
+        padding: 10px 0;
       }
 
       .custom-advance-largeSpacing {
+        padding-left: 26px;
+
         .link {
           border: none;
           border-radius: 0;
+          padding: 12px 10px 12px 26px;
+          color: #2db7f5
         }
       }
+
     }
   }