工资单发放部分发放和部分撤回

2022-12-02 14:27:39 +08:00 · 2022-12-02 14:27:39 +08:00 · a4dbd0cc4b
parent 2d1cc3cd61
commit a4dbd0cc4b
6 changed files with 210 additions and 317 deletions
--- a/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
+++ b/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
@ -1,6 +1,6 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
-import { Dropdown, Menu, message } from "antd";
+import { message } from "antd";
 import moment from "moment";
 import CustomPaginationTable from "../../components/customPaginationTable";

@ -30,12 +30,12 @@ export default class SalarySendList extends React.Component {
  handleShowDetail(record) {
    window.open(
      "/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=" +
-        record.id
+      record.id
    );
  }

  // 更新模板
-  handleUpdateTemplate(record) {
+  handleUpdateTemplate = (record) => {
    let templateRecord = {};
    templateRecord.id = record.templateId;
    if (!record.templateId) {
@ -43,22 +43,18 @@ export default class SalarySendList extends React.Component {
      return;
    }
    this.props.onEditTemplate && this.props.onEditTemplate(templateRecord);
-  }
+  };

  // 获取表头数据
-  getColumns() {
-    const {
-      payrollStore: { salarySendTableStore },
-      taxAgentStore: { showOperateBtn }
-    } = this.props;
+  getColumns = () => {
+    const { payrollStore: { salarySendTableStore }, taxAgentStore: { showOperateBtn } } = this.props;
    const { columns } = salarySendTableStore;
    if (!columns) {
      return [];
    }
-
-    let result = columns.filter(item => item.hide == "false");
+    let result = columns.filter(item => item.hide === "false");
    result.map(item => {
-      if (item.dataIndex == "salaryYearMonth") {
+      if (item.dataIndex === "salaryYearMonth") {
        item.render = (text, record) => {
          return (
            <span>
@ -66,7 +62,7 @@ export default class SalarySendList extends React.Component {
            </span>
          );
        };
-      } else if (item.dataIndex == "lastSendTime") {
+      } else if (item.dataIndex === "lastSendTime") {
        item.render = (text, record) => {
          return (
            <span>
@ -82,68 +78,37 @@ export default class SalarySendList extends React.Component {
        {
          title: "操作",
          key: "operate",
-          render: (text, record) => {
-            return (
-              <a
-                onClick={() => {
-                  this.handleGrant(record);
-                }}>
-                发放
-              </a>
-            );
-          }
-        },
-        {
-          title: "",
-          key: "moreOperate",
-          dataIndex: "moreOperate",
          render: (text, record) => {
            const { sendNum, sendTotal } = record;
            return (
-              <Dropdown
-                overlay={
-                  sendNum !== sendTotal ?
-                  <Menu onClick={({key})=>{
-                    if(key === "1"){
-                      this.handleShowDetail(record)
-                    }else{
-                      this.handleUpdateTemplate(record);
-                    }
-                  }}>
-                    <Menu.Item key="1"> 查看详情 </Menu.Item>
-                    <Menu.Item key="2"> 更新模板 </Menu.Item>
-                  </Menu>:
-                  <Menu onClick={()=>{
-                    this.handleShowDetail(record)
-                  }}>
-                    <Menu.Item key="1"> 查看详情 </Menu.Item>
-                  </Menu>
-                }>
-                <i className="icon-coms-more"/>
-              </Dropdown>
+              <React.Fragment>
+                <a href="javascript:void(0);" onClick={() => this.handleGrant(record)}
+                   style={{ marginRight: 10 }}>发放</a>
+                <a href="javascript:void(0);" onClick={() => this.handleShowDetail(record)}
+                   style={{ marginRight: 10 }}>查看详情</a>
+                {
+                  sendNum !== sendTotal &&
+                  <a href="javascript:void(0);" onClick={() => this.handleUpdateTemplate(record)}>更新模板</a>
+                }
+              </React.Fragment>
            );
          }
        }
      ]))
      :
-    (result = result.concat([
+      (result = result.concat([
        {
          title: "操作",
          key: "operate",
          render: (text, record) => {
            return (
-              <a
-                onClick={() => {
-                  this.handleShowDetail(record);
-                }}>
-                查看详情
-              </a>
+              <a href="javascript:void(0);" onClick={() => this.handleShowDetail(record)}>查看详情</a>
            );
          }
        }
      ]));
    return result;
-  }
+  };

  render() {
    const { payrollStore } = this.props;
--- a/pc4mobx/hrmSalary/pages/payroll/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/index.js
@ -6,8 +6,6 @@ import moment from "moment";
 import { WeaHelpfulTip, WeaInputSearch, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
 import { renderLoading } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from "../../components/customTab";
-
-import { columns, tempateColumns } from "./columns";
 import StepSlide from "../../components/stepSlide";
 import BaseInformForm from "./stepForm/baseInformForm";
 import ShowSettingForm from "./stepForm/showSettingForm";
@ -30,7 +28,7 @@ export default class Payroll extends React.Component {
      selectedKey: "0",
      currentStep: 0,
      stepSlideVisible: false,
-      selectedTab: 0,
+      selectedTab: "0",
      editSlideVisible: false,
      initSelected: false,
      ledgerOptions: [],
@ -44,44 +42,6 @@ export default class Payroll extends React.Component {
    this.recordId = "";
    this.salaryYearMonth = [];
    this.listPageInfo = { current: 1, pageSize: 10 };
-    columns.map(item => {
-      if (item.dataIndex == "cz") {
-        item.render = (text, record) => {
-          return (
-            <div>
-              <a onClick={() => {
-                window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant");
-              }}>工资单发放</a>
-              <a onClick={window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail")}>查看详情</a>
-              <a onClick={this.handleUpdateTemplate(record)}>更新模板</a>
-            </div>
-          );
-        };
-      }
-    });
-
-    tempateColumns.map(item => {
-      if (item.dataIndex == "username") {
-        item.render = (text) => {
-          return (
-            <a onClick={() => {
-              this.setState({ editSlideVisible: true });
-            }}>{text}</a>
-          );
-        };
-      } else if (item.dataIndex == "cz") {
-        item.render = () => {
-          return (
-            <div style={{ display: "inline-block" }}>
-              <a style={{ marginRight: "10px" }}>编辑</a>
-              <a style={{ marginRight: "10px" }}>复制</a>
-              <a style={{ marginRight: "10px" }}>删除</a>
-              {/* <a >操作日志</a> */}
-            </div>
-          );
-        };
-      }
-    });
  }

  // 更新模板
@ -95,19 +55,19 @@ export default class Payroll extends React.Component {
  }

  // 工资单模板-新建表单变化监听
-  handleBaseInfoChange(request) {
+  handleBaseInfoChange = (request) => {
    const { payrollStore: { setTemplateBaseData } } = this.props;
    setTemplateBaseData(request);
-  }
+  };

  // 新建保存
-  handleSave() {
+  handleSave = () => {
    const { payrollStore } = this.props;
    const { fetchSavePayroll } = payrollStore;
    fetchSavePayroll().then(() => {
      this.setState({ currentStep: 0, stepSlideVisible: false });
    });
-  }
+  };

  componentWillMount() {
    const { payrollStore } = this.props;
@ -142,7 +102,7 @@ export default class Payroll extends React.Component {
    const { getPayrollShowForm } = payrollStore;
    this.recordId = record.id;
    getPayrollShowForm(record.id);
-    this.setState({ templateCurrentId: record.id, selectedTab: 0 }, () => {
+    this.setState({ templateCurrentId: record.id, selectedTab: "0" }, () => {
      this.setState({ editSlideVisible: true });
    });
  }
@ -197,16 +157,16 @@ export default class Payroll extends React.Component {
  }

  // 预览
-  handlePreview() {
+  handlePreview = () => {
    const { payrollStore: { templateBaseData, salaryTemplateShowSet, salaryItemSet } } = this.props;
    window.localStorage.setItem("templateBaseData", JSON.stringify(templateBaseData));
    window.localStorage.setItem("salaryTemplateShowSet", JSON.stringify(salaryTemplateShowSet));
    window.localStorage.setItem("salaryItemSet", JSON.stringify(salaryItemSet));
    window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview");
-  }
+  };

  // 更新保存
-  handleUpdateSave() {
+  handleUpdateSave = () => {
    const { payrollStore } = this.props;
    const { fetchUpdatePayroll } = payrollStore;
    fetchUpdatePayroll(this.recordId).then(() => {
@ -215,7 +175,7 @@ export default class Payroll extends React.Component {
        selectedTab: 0
      });
    });
-  }
+  };

  // 发放页面页码跳转
  handleListDataPageChange(value, pageInfo) {
@ -233,52 +193,23 @@ export default class Payroll extends React.Component {

  render() {
    const { payrollStore, taxAgentStore: { showOperateBtn } } = this.props;
-    const {
-      loading,
-      hasRight,
-      form,
-      doSearch,
-      setShowSearchAd,
-      templateStore,
-      deletePayroll
-    } = payrollStore;
+    const { loading, hasRight, templateStore, deletePayroll } = payrollStore;
    const { currentStep, selectedTab, templateSearchValue, templateSelect, startDate, endDate } = this.state;
    if (!hasRight && !loading) { // 无权限处理
      return renderLoading();
    }
-
-    const rightMenu = [// 右键菜单
-      // {
-      //   key: 'BTN_COLUMN',
-      //   icon: <i className='icon-coms-Custom' />,
-      //   content: '显示列定制',
-      //   onClick: this.showColumn
-      // },
-    ];
-    const collectParams = { // 收藏功能配置
-      favname: "工资单发放",
-      favouritetype: 1,
-      objid: 0,
-      link: "wui/index.html#/ns_demo03/index",
-      importantlevel: 1
-    };
-    const adBtn = [ // 高级搜索内部按钮
-      <Button type="primary" onClick={doSearch}>搜索</Button>,
-      <Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
-      <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>
-    ];
-
-    const topTab = [{
-      title: "工资单发放",
-      viewcondition: "0"
-    },
+    const topTab = [
+      {
+        title: "工资单发放",
+        viewcondition: "0"
+      },
      {
        title: "工资单模板设置",
        viewcondition: "1"
-      }];
-
+      }
+    ];
    const renderRightOperation = () => {
-      if (this.state.selectedKey == "0") {
+      if (this.state.selectedKey === "0") {
        return <div style={{ display: "inline-block" }}>
          <WeaHelpfulTip
            width={200}
@ -306,7 +237,7 @@ export default class Payroll extends React.Component {
            />
          </div>
        </div>;
-      } else if (this.state.selectedKey == "1") {
+      } else if (this.state.selectedKey === "1") {
        return (
          <div style={{ display: "inline-block" }}>
            {
@ -354,29 +285,20 @@ export default class Payroll extends React.Component {
        );
      }
    };
-
-    const steps = [
-      "基础设置",
-      "显示设置"
-    ];
-
+    const steps = ["基础设置", "显示设置"];
    const validateStep1 = () => {
      const { payrollStore: { templateBaseData } } = this.props;
-      if (!notNull(templateBaseData.name)) {
-        message.warning("工资单模板名称不能为空");
-        return false;
-      }
-
-      if (!notNull(templateBaseData.salarySob)) {
-        message.warning("薪资账套不能为空");
+      if (!notNull(templateBaseData.name) || !notNull(templateBaseData.salarySob)) {
+        Modal.warning({
+          title: "信息确认",
+          content: "必要信息不完整，红色*为必填项！"
+        });
        return false;
      }
      return true;
    };
    const nextStep = () => {
-      if (!validateStep1()) {
-        return;
-      }
+      if (!validateStep1()) return;
      this.setState({
        currentStep: this.state.currentStep + 1
      });
@ -395,20 +317,14 @@ export default class Payroll extends React.Component {
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
-          dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
-          dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
-          <CustomTab
-            topTab={topTab}
-            searchOperationItem={
-              renderRightOperation()
-            }
-            onChange={(v) => {
-              this.setState({ selectedKey: v, stepSlideVisible: false, editSlideVisible: false });
-            }}
+          <CustomTab topTab={topTab} searchOperationItem={renderRightOperation()}
+                     onChange={(v) => {
+                       this.setState({ selectedKey: v, stepSlideVisible: false, editSlideVisible: false });
+                     }}
          />
          {
-            this.state.selectedKey == 0 &&
+            this.state.selectedKey === "0" &&
            <SalarySendList
              onEditTemplate={(record) => {
                this.handleTemplateListEdit(record);
@ -424,7 +340,7 @@ export default class Payroll extends React.Component {
          }

          {
-            this.state.selectedKey == 1 &&
+            this.state.selectedKey === "1" &&
            <TemplateSettingList
              onEdit={(record) => {
                this.handleTemplateListEdit(record);
@ -437,7 +353,6 @@ export default class Payroll extends React.Component {
            />
          }
        </WeaTop>
-
        {
          this.state.stepSlideVisible && <StepSlide
            visible={this.state.stepSlideVisible}
@ -447,35 +362,29 @@ export default class Payroll extends React.Component {
              this.setState({ stepSlideVisible: false });
            }}
            customOperate={
-              currentStep == 0 ? [
+              currentStep === 0 ? [
                <Button type="primary" onClick={() => {
                  nextStep();
                }}>下一步</Button>
-              ] : currentStep == 1 ? [
-                <Button type="default" style={{ marginRight: "10px" }} onClick={() => {
+              ] : currentStep === 1 ? [
+                <Button type="default" style={{ marginRight: 10 }} onClick={() => {
                  prevStep();
                }}>上一步</Button>,
-                <Button type="primary" onClick={() => {
-                  this.handleSave();
-                }}>保存</Button>,
-                <Button type="default" style={{ marginLeft: "10px" }} onClick={() => {
-                  this.handlePreview();
-                }}>预览</Button>
+                <Button type="primary" onClick={this.handleSave}>保存</Button>,
+                <Button type="default" style={{ marginLeft: 10 }} onClick={this.handlePreview}>预览</Button>
              ] : []
            }
            title="新建工资单模板"
            content={
              <div>
                {
-                  currentStep == 0 && <BaseInformForm onChange={(request) => {
-                    this.handleBaseInfoChange(request);
-                  }}/>
+                  currentStep === 0 &&
+                  <BaseInformForm onChange={this.handleBaseInfoChange}/>
                }
                {
-                  currentStep == 1 && <ShowSettingForm/>
+                  currentStep === 1 && <ShowSettingForm/>
                }
              </div>
-
            }
          />
        }
@ -493,22 +402,16 @@ export default class Payroll extends React.Component {
            title={
              <SlideModalTitle
                subtitle="编辑工资单模板"
-                tabs={[{ title: "基础设置", key: 0 }, { title: "显示设置", key: 1 }]}
+                tabs={[{ title: "基础设置", key: "0" }, { title: "显示设置", key: "1" }]}
                editable={false}
                selectedTab={selectedTab}
                showOperateBtn={showOperateBtn}
                customOperate={
-                  selectedTab == 0 ? [
-                    <Button type="primary" onClick={() => {
-                      this.handleUpdateSave();
-                    }}>保存</Button>
-                  ] : selectedTab == 1 ? [
-                    <Button type="primary" onClick={() => {
-                      this.handleUpdateSave();
-                    }} style={{ marginRight: "10px" }}>保存</Button>,
-                    <Button type="default" onClick={() => {
-                      this.handlePreview();
-                    }}>预览</Button>
+                  selectedTab === "0" ? [
+                    <Button type="primary" onClick={this.handleUpdateSave}>保存</Button>
+                  ] : selectedTab === "1" ? [
+                    <Button type="primary" onClick={this.handleUpdateSave} style={{ marginRight: 10 }}>保存</Button>,
+                    <Button type="default" onClick={this.handlePreview}>预览</Button>
                  ] : []
                }
                subItemChange={
@ -520,13 +423,11 @@ export default class Payroll extends React.Component {
            }
            content={<div>
              {
-                selectedTab == 0 &&
-                <BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {
-                  this.handleBaseInfoChange(request);
-                }}/>
+                selectedTab === "0" &&
+                <BaseInformForm id={this.state.templateCurrentId} onChange={this.handleBaseInfoChange}/>
              }
              {
-                selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
+                selectedTab === "1" && <ShowSettingForm id={this.state.templateCurrentId}/>
              }
            </div>}
            onClose={() => this.setState({ editSlideVisible: false }, () => this.setState({ selectedTab: 0 }))}
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
@ -19,12 +19,14 @@ export default class PayrollGrant extends React.Component {
      selectedRowKeys: [],
      payrollGrantVisible: false,
      payrollWithdrawVisible: false,
-      currentId: ""
+      currentId: "",
+      selectedKey: "0"
    };
    this.pageInfo = { current: 1, pageSize: 10 };
  }

  componentWillMount() {
+    const { selectedKey } = this.state;
    let id = getQueryString("id");
    this.setState({ currentId: id });
    const {
@ -32,35 +34,40 @@ export default class PayrollGrant extends React.Component {
    } = this.props;
    getPayrollInfo(id);
    getInfoList({
-      salarySendId: id
+      salarySendId: id,
+      isGranted: selectedKey !== "0"
    });
    getPaySa();
  }

  // 撤回
-  handleWithdraw(record) {
+  handleWithdraw = (record) => {
    const { payrollStore } = this.props;
+    const { currentId, selectedKey } = this.state;
    const { withdrawPayroll, getInfoList } = payrollStore;
    withdrawPayroll({
      ids: [record.id],
-      salarySendId: this.state.currentId
+      salarySendId: currentId
    }).then(() => {
      getInfoList({
-        salarySendId: this.state.currentId
+        salarySendId: this.state.currentId,
+        isGranted: selectedKey !== "0"
      });
    });
-  }
+  };

  // 发送
  handleGrant(record) {
    const { payrollStore } = this.props;
+    const { currentId, selectedKey } = this.state;
    const { grantPayroll, getInfoList } = payrollStore;
    grantPayroll({
      ids: [record.id],
-      salarySendId: this.state.currentId
+      salarySendId: currentId
    }).then(() => {
      getInfoList({
-        salarySendId: this.state.currentId
+        salarySendId: currentId,
+        isGranted: selectedKey !== "0"
      });
    });
  }
@ -68,13 +75,15 @@ export default class PayrollGrant extends React.Component {
  // 全部发送
  handleGrantAll() {
    const { payrollStore } = this.props;
+    const { currentId, selectedKey } = this.state;
    const { grantPayroll, getInfoList } = payrollStore;
    grantPayroll({
      ids: [],
-      salarySendId: this.state.currentId
+      salarySendId: currentId
    }).then(() => {
      getInfoList({
-        salarySendId: this.state.currentId
+        salarySendId: currentId,
+        isGranted: selectedKey !== "0"
      });
    });
  }
@ -82,29 +91,30 @@ export default class PayrollGrant extends React.Component {
  // 全部撤回
  handleWithdrawAll() {
    const { payrollStore } = this.props;
+    const { currentId, selectedKey } = this.state;
    const { withdrawPayroll, getInfoList } = payrollStore;
    withdrawPayroll({
      ids: [],
-      salarySendId: this.state.currentId
+      salarySendId: currentId
    }).then(() => {
      getInfoList({
-        salarySendId: this.state.currentId
+        salarySendId: currentId,
+        isGranted: selectedKey !== "0"
      });
    });
  }

-  getColumns() {
+  getColumns = () => {
    const { payrollStore } = this.props;
    const { salaryGrantTableStore: columns } = payrollStore;
-
-    let result = [
+    return [
      ...columns,
      { title: "操作", key: "operation", dataIndex: "operation" }
    ].map(item => {
      item = { ...item };
-      if (item.dataIndex == "operation") {
+      if (item.dataIndex === "operation") {
        item.render = (text, record) => {
-          if (record.sendStatus == "已发放") {
+          if (record.sendStatus === "已发放") {
            return (
              <a
                onClick={() => {
@ -127,8 +137,7 @@ export default class PayrollGrant extends React.Component {
      }
      return item;
    });
-    return result;
-  }
+  };

  getSearchsAdQuick() {
    const handleMenuClick = e => {
@ -149,36 +158,32 @@ export default class PayrollGrant extends React.Component {
          break;
      }
    };
-
    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">批量发放</Menu.Item>
        <Menu.Item key="2">批量撤回</Menu.Item>
        <Menu.Item key="3">全部导出</Menu.Item>
        <Menu.Item key="4">导出选中</Menu.Item>
-        {/* <Menu.Item key="3">自定义列</Menu.Item> */}
      </Menu>
    );
    return [
-        <Button
-          type="primary"
-          style={{ marginRight: "10px" }}
-          onClick={() => {
-            this.handleGrantAll();
-          }}>
-          全部发放
-        </Button>,
-        <Button
-          type="default"
-          style={{ marginRight: "10px" }}
-          onClick={() => {
-            this.handleWithdrawAll();
-          }}>
-          全部撤回
-        </Button>,
-        <Dropdown.Button style={{ marginRight: "10px" }} overlay={menu}>
-          更多
-        </Dropdown.Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          this.handleGrantAll();
+        }}>
+        全部发放
+      </Button>,
+      <Button
+        type="default"
+        onClick={() => {
+          this.handleWithdrawAll();
+        }}>
+        全部撤回
+      </Button>,
+      <Dropdown.Button overlay={menu}>
+        更多
+      </Dropdown.Button>
    ];
  }

@ -192,7 +197,7 @@ export default class PayrollGrant extends React.Component {
  handleExportSelect = () => {
    const { selectedRowKeys, currentId } = this.state;
    const { payrollStore: { exportPayroll } } = this.props;
-    if (selectedRowKeys.length == 0) {
+    if (selectedRowKeys.length === 0) {
      message.warning("未选择条目");
      return;
    }
@ -203,30 +208,36 @@ export default class PayrollGrant extends React.Component {
  };

  // 分页
-  handleDataPageChange(value) {
+  handleDataPageChange = (value) => {
    const { payrollStore: { getInfoList } } = this.props;
+    const { currentId, selectedKey } = this.state;
    getInfoList({
-      salarySendId: this.state.currentId,
+      salarySendId: currentId,
+      isGranted: selectedKey !== "0",
      ...this.pageInfo
    });
-  }
+  };

  handleShowSizeChange(pageInfo) {
    const { payrollStore: { getInfoList } } = this.props;
+    const { currentId, selectedKey } = this.state;
    getInfoList({
-      salarySendId: this.state.currentId,
+      salarySendId: currentId,
+      isGranted: selectedKey !== "0",
      ...pageInfo
    });
  }

-  handleSearch=()=> {
+  handleSearch = () => {
    const { payrollStore: { getInfoList, setGrantListShowSearchAd } } = this.props;
+    const { currentId, selectedKey } = this.state;
    setGrantListShowSearchAd(false);
    getInfoList({
-      salarySendId: this.state.currentId,
+      salarySendId: currentId,
+      isGranted: selectedKey !== "0",
      ...this.pageInfo
    });
-  }
+  };

  onSelectChange = value => {
    this.setState({
@ -239,21 +250,21 @@ export default class PayrollGrant extends React.Component {
    const {
      salarySendDetailBaseInfo,
      salaryGrantDataSource,
-      getInfoList,
      grantListShowSearchAd,
      grantListConditionForm,
      grantListCondition,
      setGrantListShowSearchAd,
-      salaryGrantPageInfo
+      salaryGrantPageInfo,
+      getInfoList
    } = payrollStore;
-    const { selectedRowKeys } = this.state;
+    const { selectedRowKeys, selectedKey, currentId } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const adBtn = [
      // 高级搜索内部按钮
-      <Button type="primary" onClick={()=>this.handleSearch()}>
+      <Button type="primary" onClick={() => this.handleSearch()}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => grantListConditionForm.resetForm()}>
@ -263,6 +274,16 @@ export default class PayrollGrant extends React.Component {
        取消
      </Button>
    ];
+    const topTab = [
+      {
+        title: "未发送",
+        viewcondition: "0"
+      },
+      {
+        title: "已发送",
+        viewcondition: "1"
+      }
+    ];
    return (
      <div className="payrollGrant_new">
        <WeaTop
@ -274,20 +295,25 @@ export default class PayrollGrant extends React.Component {
        />

        <WeaTab
+          datas={topTab}
+          keyParam="viewcondition"
+          selectedKey={selectedKey}
+          onChange={v =>
+            this.setState({ selectedKey: v }, () => {
+              getInfoList({
+                salarySendId: currentId,
+                isGranted: v !== "0"
+              });
+            })
+          }
          searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
          searchsBasePlaceHolder="请输入姓名"
          showSearchAd={grantListShowSearchAd} // 是否展开高级搜索面板
          setShowSearchAd={bool => setGrantListShowSearchAd(bool)} //高级搜索面板受控
-          searchsAd={getSearchs(
-            grantListConditionForm,
-            toJS(grantListCondition),
-            2
-          )} // 高级搜索内部数据
+          searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)} // 高级搜索内部数据
          buttonsAd={adBtn} // 高级搜索内部按钮
          onSearch={() => this.handleSearch()} // 点搜索按钮时的回调
-          // searchsAdQuick={this.getSearchsAdQuick()}
-          onSearchChange={v =>
-            grantListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
+          onSearchChange={v => grantListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
          searchsBaseValue={grantListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
        />
        <div className="titleBar">
@ -301,32 +327,7 @@ export default class PayrollGrant extends React.Component {
            <WeaHelpfulTip
              style={{ marginLeft: "1rem", marginRight: "1rem" }}
              width={200}
-              title={`薪资周期\n
-                            ${salarySendDetailBaseInfo.salarySobCycle &&
-              salarySendDetailBaseInfo.salarySobCycle
-                .salaryCycle &&
-              salarySendDetailBaseInfo.salarySobCycle
-                .salaryCycle
-                .fromDate}至 ${salarySendDetailBaseInfo.salarySobCycle &&
-              salarySendDetailBaseInfo.salarySobCycle.salaryCycle &&
-              salarySendDetailBaseInfo.salarySobCycle.salaryCycle.endDate}\n
-                            税款所属期\n
-                            ${salarySendDetailBaseInfo.salarySobCycle &&
-              salarySendDetailBaseInfo.salarySobCycle
-                .taxCycle}\n
-                            考勤取值周期\n
-                            ${salarySendDetailBaseInfo.salarySobCycle &&
-              salarySendDetailBaseInfo.salarySobCycle
-                .attendCycle &&
-              salarySendDetailBaseInfo.salarySobCycle
-                .attendCycle
-                .fromDate}至${salarySendDetailBaseInfo.salarySobCycle &&
-              salarySendDetailBaseInfo.salarySobCycle.attendCycle &&
-              salarySendDetailBaseInfo.salarySobCycle.attendCycle.endDate}\n
-                            福利台账月份\n
-                            引用${salarySendDetailBaseInfo.salarySobCycle &&
-              salarySendDetailBaseInfo.salarySobCycle
-                .socialSecurityCycle}的福利台账数据`}
+              title={<TitleHelp salarySobCycle={salarySendDetailBaseInfo.salarySobCycle}/>}
              placement="topLeft"
            />
            <span>
@ -343,7 +344,6 @@ export default class PayrollGrant extends React.Component {
            </span>
          </div>
        </div>
-
        <div className="tableWrapper">
          <CustomPaginationTable
            rowKey="id"
@ -384,3 +384,27 @@ export default class PayrollGrant extends React.Component {
    );
  }
 }
+
+
+const TitleHelp = (props) => {
+  const { salarySobCycle } = props;
+  const { salaryCycle = {}, attendCycle = {} } = salarySobCycle;
+  return <div>
+    <div>
+      <p>薪资周期</p>
+      <p>{salaryCycle.fromDate}<span style={{ margin: "0 4px" }}>至</span>{salaryCycle.endDate}</p>
+    </div>
+    <div>
+      <p>税款所属期</p>
+      <p>{salarySobCycle.taxCycle}</p>
+    </div>
+    <div>
+      <p>考勤取值周期</p>
+      <p>{attendCycle.fromDate}<span style={{ margin: "0 4px" }}>至</span>{attendCycle.endDate}</p>
+    </div>
+    <div>
+      <p>福利台账月份</p>
+      <p>{`引用${salarySobCycle.socialSecurityCycle}的福利台账数据`}</p>
+    </div>
+  </div>;
+};
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
@ -60,7 +60,7 @@ export default class BaseInformForm extends React.Component {
              viewAttr={3}
              options={options}
              value={salarySob ? salarySob : ""}
-              style={{ width: "200px" }}
+              style={{ width: 200 }}
              onChange={value => this.hanldeChange({ salarySob: value })}/>
          }
        </WeaFormItem>
--- a/pc4mobx/hrmSalary/pages/payroll/templateSettingList.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templateSettingList.js
@ -2,6 +2,7 @@ import React from "react";
 import { inject, observer } from "mobx-react";
 import { Radio, Spin } from "antd";
 import { WeaTableNew } from "comsMobx";
+
 const WeaTable = WeaTableNew.WeaTable;

@inject("payrollStore")
@ -76,7 +77,7 @@ export default class TemplateSettingList extends React.Component {
              />
            );
          default:
-            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />;
+            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
@ -91,15 +92,15 @@ export default class TemplateSettingList extends React.Component {
      <div>
        {loading
          ? <div style={{ width: "100%", textAlign: "center" }}>
-              <Spin />
-            </div>
+            <Spin/>
+          </div>
          : <WeaTable // table内部做了loading加载处理，页面就不需要再加了
-              comsWeaTableStore={templateStore} // table store
-              hasOrder={true} // 是否启用排序
-              needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
-              getColumns={this.getColumns}
-              onOperatesClick={this.onOperatesClick.bind(this)}
-            />}
+            comsWeaTableStore={templateStore} // table store
+            hasOrder={true} // 是否启用排序
+            needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+            getColumns={this.getColumns}
+            onOperatesClick={this.onOperatesClick.bind(this)}
+          />}
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/stores/payroll.js
+++ b/pc4mobx/hrmSalary/stores/payroll.js
@ -1,4 +1,4 @@
-import { observable, action, toJS } from "mobx";
+import { action, observable } from "mobx";
 import { message } from "antd";
 import { WeaForm, WeaTableNew } from "comsMobx";

@ -160,12 +160,12 @@ export class payrollStore {

          this.salarySobOptions = response.salarySobOptions
            ? response.salarySobOptions.map(item => {
-                let result = {};
-                result.showname = item.name;
-                result.key = item.id + "";
-                result.selected = false;
-                return result;
-              })
+              let result = {};
+              result.showname = item.name;
+              result.key = item.id + "";
+              result.selected = false;
+              return result;
+            })
            : [];
          resolve({
            templateBaseData: this.templateBaseData,
@ -249,11 +249,12 @@ export class payrollStore {
  // 工资单模板-新建工资单模板
  @action
  fetchSavePayroll = () => {
-    if (!this.validateSalaryTemplateShowSet()) {
-      return false;
-    }
    let params = this.convertParams();
    return new Promise((resolve, reject) => {
+      if (!this.validateSalaryTemplateShowSet()) {
+        reject();
+        return false;
+      }
      API.savePayroll(params).then(res => {
        if (res.status) {
          message.success("保存成功");
@ -270,12 +271,13 @@ export class payrollStore {
  // 工资单模板-更新工资单模板
  @action
  fetchUpdatePayroll = id => {
-    if (!this.validateSalaryTemplateShowSet()) {
-      return false;
-    }
    let params = this.convertParams();
    params.id = id;
    return new Promise((resolve, reject) => {
+      if (!this.validateSalaryTemplateShowSet()) {
+        reject();
+        return false;
+      }
      API.updatePayroll(params).then(res => {
        if (res.status) {
          message.success("保存成功");
@ -453,7 +455,7 @@ export class payrollStore {
    API.exportDetailList(params);
  };
  // 工资单发放-导出-工资单发放列表
-  
+
  @action
  exportPayroll = (params = {}) => {
    API.exportPayroll(params);