退差添加人员组件

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/index.less

@@ -93,3 +93,6 @@
     }
   }
 }
+//退差人员选择框
+.regSelectWrapper{
+}

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/regAddEmployee.js

@@ -7,7 +7,7 @@
 import React, { Component } from "react";
 import { WeaDatePicker, WeaDialog, WeaFormItem, WeaSearchGroup, WeaSelect } from "ecCom";
 import { Button, Modal } from "antd";
-import { Select } from "../../../ruleConfig";
+import RegSelect from "./regSelect";
 import * as API from "../../../../apis/standingBook";
 
 class RegAddEmployee extends Component {
@@ -77,12 +77,6 @@ class RegAddEmployee extends Component {
   handleSave = () => {
     const { baseInfo, returnPersonInfo, selectPersonInfo } = this.state;
     const { onSave } = this.props;
-    const payload = {
-      recessionMonthList: baseInfo.billMonth.split(","),
-      projects: baseInfo.itemsAll ? ["0"] : baseInfo.items.split(","),
-      includes: returnPersonInfo.employee.split(","),
-      excludes: selectPersonInfo.employee.split(",")
-    };
     if (_.isEmpty(baseInfo.billMonth) || _.isEmpty(baseInfo.items) || _.isEmpty(returnPersonInfo.employee)) {
       Modal.warning({
         title: "信息确认",
@@ -90,6 +84,12 @@ class RegAddEmployee extends Component {
       });
       return;
     }
+    const payload = {
+      recessionMonthList: baseInfo.billMonth.split(","),
+      projects: baseInfo.itemsAll ? ["0"] : baseInfo.items.split(","),
+      includes: returnPersonInfo.employee,
+      excludes: selectPersonInfo.employee
+    };
     onSave(payload);
   };
 
@@ -143,38 +143,26 @@ class RegAddEmployee extends Component {
     ];
     const returnPersonItems = [
       {
-        com: Select({
-          multiple: true,
-          label: "对象",
-          viewAttr: 3,
-          showSearch: true,
-          options: returnPersonInfo.employeeOptions,
-          value: returnPersonInfo.employee,
-          onChange: ({ selected }) => {
-            this.setState({ returnPersonInfo: { ...returnPersonInfo, employee: selected } });
-          }
-        })
+        com: <RegSelect
+          label="对象"
+          viewAttr={3}
+          onChange={({ selected }) => this.setState({ returnPersonInfo: { ...returnPersonInfo, employee: selected } })}
+        />
       }
     ];
     const selectPersonItems = [
       {
-        com: Select({
-          multiple: true,
-          label: "选择人员",
-          viewAttr: 2,
-          showSearch: true,
-          options: selectPersonInfo.employeeOptions,
-          value: selectPersonInfo.employee,
-          onChange: ({ selected }) => {
-            this.setState({ selectPersonInfo: { ...selectPersonInfo, employee: selected } });
-          }
-        })
+        com: <RegSelect
+          label="选择人员"
+          viewAttr={2}
+          onChange={({ selected }) => this.setState({ selectPersonInfo: { ...selectPersonInfo, employee: selected } })}
+        />
       }
     ];
     return (
       <WeaDialog
         {...this.props}
-        style={{ width: 900 }}
+        style={{ width: 900, height: 600 }}
         hasScroll
         buttons={buttons}
       >

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/regSelect.js

@@ -0,0 +1,151 @@
+/*
+ * Author: 黎永顺
+ * name: 退差人员选择弹框
+ * Description:
+ * Date: 2022/11/25
+ */
+import React, { Component } from "react";
+import { Button, Tag } from "antd";
+import { WeaDialog, WeaFormItem, WeaInputSearch, WeaTable } from "ecCom";
+import * as API from "../../../../apis/standingBook";
+import "./index.less";
+
+class RegSelect extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userName: "",
+      visible: false,
+      loading: false,
+      selectedRow: [],
+      dataSource: [],
+      pageInfo: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      }
+    };
+  }
+
+  getEmployeeListByTaxAgent = (params = {}) => {
+    const { pageInfo } = this.state;
+    const payload = {
+      ...pageInfo,
+      ...params
+    };
+    this.setState({ loading: true });
+    API.getEmployeeListByTaxAgent(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { list: dataSource, pageNum, pageSize, total } = data;
+        this.setState({
+          dataSource,
+          pageInfo: { ...pageInfo, pageNum, pageSize, total }
+        });
+      }
+    });
+  };
+  handleSave = () => {
+    const { onChange } = this.props;
+    const { selectedRow } = this.state;
+    this.setState({
+      visible: false
+    }, () => {
+      const selected = _.map(selectedRow, it => it.employeeId);
+      onChange({ selected });
+    });
+  };
+  handleClose = (key) => {
+    const { onChange } = this.props;
+    const { selectedRow } = this.state;
+    this.setState({
+      selectedRow: _.filter(selectedRow, it => it.employeeId !== key)
+    }, () => {
+      const selected = _.map(selectedRow, it => it.employeeId);
+      onChange({ selected });
+    });
+  };
+
+  render() {
+    const { visible, loading, dataSource, pageInfo, selectedRow, userName } = this.state;
+    const { label, viewAttr } = this.props;
+    const pagination = {
+      current: pageInfo.pageNum,
+      pageSize: pageInfo.pageSize,
+      total: pageInfo.total,
+      showTotal: total => `共 ${total} 条`,
+      showQuickJumper: true,
+      onChange: (current) => {
+        this.setState({ pageInfo: { ...pageInfo, pageNum: current } }, () => {
+          this.getEmployeeListByTaxAgent();
+        });
+      }
+    };
+    const rowSelection = {
+      selectedRowKeys: _.map(selectedRow, it => it.employeeId),
+      onChange: (selectedRowKeys, rowKey) => {
+        this.setState({ selectedRow: _.uniqWith([...selectedRow, ...rowKey], _.isEqual) });
+      }
+    };
+    const buttons = [
+      <Button type="primary" onClick={this.handleSave}>保存</Button>,
+      <Button type="ghost" onClick={() => this.setState({ visible: false })}>取消</Button>
+    ];
+    return (
+      <div className="regSelectWrapper">
+        <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+          {selectedRow.map(tag =>
+            <Tag key={tag.employeeId} closable onClose={() => this.handleClose(tag.employeeId)}>
+              {tag.username}
+            </Tag>
+          )}
+          <Button
+            size="small"
+            type="dashed"
+            onClick={() => this.setState({ visible: true }, () => this.getEmployeeListByTaxAgent())}
+          >添加人员</Button>
+          {
+            _.isEmpty(selectedRow) && viewAttr === 3 &&
+            <span className="wea-required-e9" style={{ verticalAlign: "middle" }}>
+              <img src="/images/BacoError_wev9.png" alt=""/>
+            </span>
+          }
+        </WeaFormItem>
+        <WeaDialog
+          onCancel={() => this.setState({ visible: false })}
+          title="人员"
+          visible={visible}
+          loading={loading}
+          style={{ width: 680, height: 500 }}
+          hasScroll
+          buttons={buttons}
+        >
+          <div style={{ display: "flex", justifyContent: "flex-end", margin: 10 }}>
+            <WeaInputSearch
+              value={userName}
+              placeholder="请输入姓名"
+              onChange={(userName) => this.setState({ userName })}
+              onSearch={() => this.getEmployeeListByTaxAgent({ userName })}
+            />
+          </div>
+          <WeaTable
+            rowKey="employeeId"
+            columns={[
+              {
+                title: "姓名",
+                dataIndex: "username",
+                key: "username"
+              }
+            ]}
+            dataSource={dataSource}
+            loading={loading.query}
+            pagination={pagination}
+            rowSelection={rowSelection}
+          />
+        </WeaDialog>
+      </div>
+    );
+  }
+}
+
+export default RegSelect;