产品-薪资账套薪资项目项添加编辑的功能

2023-07-19 15:02:44 +08:00 · 2023-07-19 15:02:44 +08:00 · d1b2f98387
parent ce93eff734
commit d1b2f98387
9 changed files with 283 additions and 89 deletions
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/index.less
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/index.less
@ -168,6 +168,11 @@
  }

  .categroyListWrapper {
+    .wea-search-group {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
    .titleNormalWrapper {
      display: flex;
      justify-content: space-between;
@ -180,6 +185,11 @@
      }

      .titleWrapper {
+        span {
+          font-weight: 600;
+          color: #111;
+        }
+
        i {
          font-size: 16px;
          color: #333;
@ -201,6 +211,16 @@
    align-items: center;
    width: 100%;

+    .topTitle {
+      padding: 5px 12px;
+      margin-right: 10px;
+    }
+
+    .active {
+      background: #e9f7ff;
+      color: #5d9cec;
+    }
+
    .titleLeft {
      display: flex;
      align-items: center;
@ -236,11 +256,28 @@

 .moveModalWrapper {
  .ant-radio-group {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(3, 33.33%);

    .ant-radio-wrapper {
-      margin: 4px 16px;
+      margin: 4px 0;
+    }
+  }
+}
+
+.salaryItemEditWrapper {
+  .wea-search-group {
+    padding: 0;
+    border: 1px solid #e5e5e5;
+    border-bottom: none;
+
+    .wea-content {
+      padding: 0;
+
+      .wea-form-item {
+        padding: 4px 16px;
+        border-bottom: 1px solid #e5e5e5;
+      }
    }
  }
 }
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerMovoTo.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerMovoTo.js
@ -24,7 +24,12 @@ class LedgerMovoTo extends Component {
      >
        <WeaSearchGroup showGroup needTigger={false}>
          <WeaSelect
-            options={dataList}
+            options={_.filter(dataList, item => item.showname === "未分类")}
+            detailtype={3} value={value}
+            onChange={onChangeMoveVal}
+          />
+          <WeaSelect
+            options={_.filter(dataList, item => item.showname !== "未分类")}
            detailtype={3} value={value}
            onChange={onChangeMoveVal}
          />
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemEditSlide.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemEditSlide.js
@ -0,0 +1,56 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资账套-编辑薪资项目项
+ * Description:
+ * Date: 2023/07/19
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaSlideModal } from "ecCom";
+import SlideModalTitle from "../../../components/slideModalTitle";
+import SalaryItemForm from "../../salaryItem/salaryItemForm";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class LedgerSalaryItemEditSlide extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  handleChange = (params) => {
+    const request = { ...this.props.request, ...params };
+    this.props.onUpdateRequest(request);
+  };
+  handleShowFormal = () => this.props.onEditFormnul();
+
+  render() {
+    return (
+      <WeaSlideModal
+        {...this.props}
+        className="salaryItemEditWrapper"
+        top={0} width={80} height={100}
+        direction="right" measure="%"
+        title={
+          <SlideModalTitle
+            subtitle={getLabel(111, "编辑薪资项目")} showOperateBtn
+            loading={false} editable onSave={this.props.onSave}
+          />
+        }
+        content={
+          <div style={{ padding: 16 }}>
+            {
+              this.props.visible &&
+              <SalaryItemForm
+                {...this.props}
+                onChangeFieldsItem={this.handleChange} onShowFormal={this.handleShowFormal}
+              />
+            }
+          </div>
+        }
+      />
+    );
+  }
+}
+
+export default LedgerSalaryItemEditSlide;
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemNormal.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemNormal.js
@ -306,7 +306,7 @@ const TitleNormalComp = (props) => {
 const TitleComp = (props) => {
  const { onAddCategory, titleName, showOperateBtn } = props;
  return <div className="titleWrapper">
-    <span>{titleName}</span>
+    <div><span className="topTitle active">{titleName}</span></div>
    {
      showOperateBtn &&
      <Button type="ghost" onClick={() => onAddCategory()}>新增分类</Button>
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemTable.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemTable.js
@ -5,13 +5,25 @@
 * Date: 2022/12/13
 */
 import React, { Component } from "react";
-import { WeaCheckbox, WeaHelpfulTip, WeaTable } from "ecCom";
+import { message } from "antd";
+import { WeaCheckbox, WeaHelpfulTip, WeaLocaleProvider, WeaTable } from "ecCom";
+import LedgerSalaryItemEditSlide from "./ledgerSalaryItemEditSlide";
+import { getSalaryFieldForm } from "../../../apis/fieldManage";
+import { commonEnumList } from "../../../apis/ruleconfig";
+import { saveItem } from "../../../apis/item";
+
+const getLabel = WeaLocaleProvider.getLabel;

 class LedgerSalaryItemTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      salaryItemPayload: {
+        visible: false, record: {},
+        request: {}, isLedger: true,
+        userStatusList: []
+      }
    };
  }

@ -46,8 +58,47 @@ class LedgerSalaryItemTable extends Component {
      })
    );
  };
+  /*
+   * Author: 黎永顺
+   * Description: 编辑薪资项目
+   * Params:
+   * Date: 2023/7/19
+   */
+  handleEditSalaryItem = async (record) => {
+    const { data: userStatusList } = await commonEnumList({ enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
+    getSalaryFieldForm({ id: record.salaryItemId }).then(({ status, data }) => {
+      if (status) {
+        this.setState({
+          salaryItemPayload: {
+            ...this.state.salaryItemPayload,
+            visible: true, request: data, record,
+            userStatusList: _.map(userStatusList, it => ({ key: it.value.toString(), showname: it.defaultLabel }))
+          }
+        });
+      }
+    });
+  };
+  /*
+   * Author: 黎永顺
+   * Description: 保存薪资项目
+   * Params:
+   * Date: 2023/7/19
+   */
+  handleSaveItem = () => {
+    const { salaryItemPayload } = this.state;
+    const { request } = salaryItemPayload;
+    saveItem(request).then(({ status, errorMsg }) => {
+      if (status) {
+        message.success(getLabel(22619, "保存成功"));
+        //TODO:渲染列表数据
+      } else {
+        message.error(errorMsg || getLabel(22620, "保存失败"));
+      }
+    });
+  };

  render() {
+    const { salaryItemPayload } = this.state;
    const {
      dataSource,
      onDropCategoryItem,
@ -77,18 +128,11 @@ class LedgerSalaryItemTable extends Component {
          <span style={{ marginRight: 8 }}>核算公式</span>
          <WeaHelpfulTip title={<HelpContent/>} placement="bottom" width={200}/>
        </span>,
-        dataIndex: "formulaContent",
-        key: "formulaContent",
-        render: (text, record) => {
-          if (record.canEdit) {
-            return (
-              <span className="linkWapper">
-                <a href="javascript: void(0);" onClick={() => onEditFormnul(record)}> {text} </a>
-              </span>
-            );
-          } else {
-            return <span> {text} </span>;
-          }
+        dataIndex: "valueType",
+        key: "valueType",
+        render: (_, record) => {
+          const { valueType } = record;
+          return <span> {valueType === 1 ? "输入" : valueType === 2 ? "自定义公式" : valueType === 3 ? "SQL" : ""} </span>;
        }
      },
      {
@ -116,26 +160,49 @@ class LedgerSalaryItemTable extends Component {
        title: "操作",
        dataIndex: "operate",
        key: "operate",
-        width: 100,
+        width: 120,
        render: (_, record) => (
-          <a href="javascript:void(0);" onClick={() => onMoveTo(record)}>移动到</a>
+          <React.Fragment>
+            <a href="javascript:void(0);" onClick={() => this.handleEditSalaryItem(record)}
+               style={{ marginRight: 10 }}>编辑</a>
+            <a href="javascript:void(0);" onClick={() => onMoveTo(record)}>移动到</a>
+          </React.Fragment>
        )
      }
    ];
    return (
-      <WeaTable
-        rowKey={record => record.id || record.key}
-        rowSelection={rowSelection}
-        dataSource={dataSource}
-        columns={columns}
-        onRow={(record, index) => ({
-          index,
-          moveRow: record
-        })}
-        pagination={false}
-        onDrop={onDropCategoryItem}
-        draggable={true}
-      />
+      <React.Fragment>
+        <WeaTable
+          rowKey={record => record.id || record.key}
+          rowSelection={rowSelection}
+          dataSource={dataSource}
+          columns={columns}
+          onRow={(record, index) => ({
+            index,
+            moveRow: record
+          })}
+          pagination={false}
+          onDrop={onDropCategoryItem}
+          draggable={true}
+        />
+        <LedgerSalaryItemEditSlide
+          {...salaryItemPayload}
+          onUpdateRequest={request => {
+            this.setState({
+              salaryItemPayload: {
+                ...salaryItemPayload, request
+              }
+            });
+          }}
+          onEditFormnul={() => onEditFormnul(salaryItemPayload.record)}
+          onSave={this.handleSaveItem}
+          onClose={() => this.setState({
+            salaryItemPayload: {
+              ...salaryItemPayload, visible: false
+            }
+          })}
+        />
+      </React.Fragment>
    );
  }
 }
--- a/pc4mobx/hrmSalary/pages/ledgerPage/index.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/index.js
@ -10,6 +10,7 @@ import { WeaInputSearch, WeaTop } from "ecCom";
 import { Button } from "antd";
 import LedgerTable from "./components/ledgerTable";
 import LedgerSlide from "./components/ledgerSlide";
+import "./index.less";

@inject("taxAgentStore")
@observer
@ -67,7 +68,7 @@ class Index extends Component {
    ];
    return (
      <WeaTop
-        title="薪资账套"
+        title="薪资账套" className="ledgerOuter"
        icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D"
        showDropIcon={false}
--- a/pc4mobx/hrmSalary/pages/ledgerPage/index.less
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/index.less
@ -1,3 +1,13 @@
+.ledgerOuter {
+  .wea-new-top {
+    .ant-col-10 {
+      span:nth-child(2) {
+        margin-top: -6px;
+      }
+    }
+  }
+}
+
 .ledgerWrapper {
  height: 100%;

--- a/pc4mobx/hrmSalary/pages/salaryItem/columns.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/columns.js
@ -1,5 +1,7 @@
+import { WeaLocaleProvider } from "ecCom";
 import { dataTypeOptions, patternOptions, roundingModeOptions } from "./options";

+const getLabel = WeaLocaleProvider.getLabel;
 export const columns = [
  {
    title: "名称",
@ -54,11 +56,11 @@ export const columns = [
 ];
 export const salaryItemFields = [
  {
-    key: 'name',
-    label: '名称',
-    type: 'INPUT',
+    key: "name",
+    label: "名称",
+    type: "INPUT",
    viewAttr: 3,
-    tip: ''
+    tip: ""
  },
  // {
  //   key: 'useInEmployeeSalary',
@ -68,63 +70,70 @@ export const salaryItemFields = [
  //   tip: '提示：开启后，该薪资项目不可删除或设为无效，取值方式会默认置为输入'
  // },
  {
-    key: 'useDefault',
-    label: '默认使用',
-    type: 'SWITCH',
+    key: "useDefault",
+    label: "默认使用",
+    type: "SWITCH",
    viewAttr: 2,
-    tip: '提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除'
+    tip: "提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除"
  },
  {
-    key: 'sharedType',
-    label: '可见性',
-    type: 'SELECT',
+    key: "hideDefault",
+    label: getLabel(111, "核算时隐藏"),
+    type: "SWITCH",
    viewAttr: 2,
-    tip: ''
+    tip: getLabel(111, "提示：开启后，在薪资账套中添加该项目时，默认勾选隐藏且在核算时隐藏该薪资项目，可在具体薪资账套中设置是否隐藏")
  },
  {
-    key: 'taxAgentIds',
-    label: '可见性范围',
-    type: 'SELECT',
+    key: "sharedType",
+    label: "可见性",
+    type: "SELECT",
+    viewAttr: 2,
+    tip: ""
+  },
+  {
+    key: "taxAgentIds",
+    label: "可见性范围",
+    type: "SELECT",
    viewAttr: 3,
-    tip: ''
+    tip: ""
  },
  {
-    key: 'dataType',
-    label: '字段类型',
-    type: 'SELECT',
+    key: "dataType",
+    label: "字段类型",
+    type: "SELECT",
    viewAttr: 3,
    options: dataTypeOptions,
-    tip: ''
+    tip: ""
  },
  {
-    key: 'roundingMode',
-    label: '舍入规则',
-    type: 'SELECT',
+    key: "roundingMode",
+    label: "舍入规则",
+    type: "SELECT",
    viewAttr: 2,
    options: roundingModeOptions,
-    tip: ''
+    tip: ""
  },
  {
-    key: 'pattern',
-    label: '保留小数位',
-    type: 'SELECT',
+    key: "pattern",
+    label: "保留小数位",
+    type: "SELECT",
    viewAttr: 2,
    options: patternOptions,
-    tip: ''
+    tip: ""
  },
  {
-    key: 'valueType',
-    label: '取值方式',
-    type: 'RADIO',
+    key: "valueType",
+    label: "取值方式",
+    type: "RADIO",
    viewAttr: 2,
-    tip: ''
+    tip: ""
  },
  {
-    key: 'formulaContent',
-    label: '公式',
-    type: 'INPUT',
+    key: "formulaContent",
+    label: "公式",
+    type: "INPUT",
    viewAttr: 2,
-    tip: ''
+    tip: ""
  },
  {
    key: "sortedIndex",
@ -134,18 +143,18 @@ export const salaryItemFields = [
    tip: ""
  },
  {
-    key: 'description',
-    label: '备注',
-    type: 'TEXTAREA',
+    key: "description",
+    label: "备注",
+    type: "TEXTAREA",
    viewAttr: 2,
-    tip: ''
-  },
+    tip: ""
+  }
+];
+export const valTakeOptions = [
+  { key: "1", showname: "输入" },
+  { key: "2", showname: "公式" },
+  { key: "3", showname: "SQL" }
 ];
-export const valTakeOptions=[
-  {key: "1", showname: '输入'},
-  {key: "2", showname: '公式'},
-  {key: "3", showname: 'SQL'},
-]



--- a/pc4mobx/hrmSalary/pages/salaryItem/salaryItemForm.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/salaryItemForm.js
@ -5,7 +5,7 @@
 * Date: 2023/2/9
 */
 import React, { Component } from "react";
-import { WeaCheckbox, WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect, WeaTextarea, WeaInputNumber } from "ecCom";
+import { WeaCheckbox, WeaFormItem, WeaInput, WeaInputNumber, WeaSearchGroup, WeaSelect, WeaTextarea } from "ecCom";
 import { salaryItemFields, valTakeOptions } from "./columns";

 class SalaryItemForm extends Component {
@ -18,12 +18,20 @@ class SalaryItemForm extends Component {

  componentDidMount() {
    const { salaryItemFieldsList } = this.state;
-    const { request, editable, record, isAdd, taxAgentAdminOption } = this.props;
-    const { systemType, sharedType, valueType } = request;
+    const { request, editable, record, isAdd = false, taxAgentAdminOption, isLedger = false } = this.props;
+    const { systemType = "", sharedType, valueType } = request;
    this.setState({
      salaryItemFieldsList: _.map(salaryItemFieldsList, item => {
        const { key } = item;
        switch (key) {
+          case "useDefault":
+          case "sortedIndex":
+          case "description":
+            return {
+              ...item,
+              viewAttr: (!isLedger && ((editable && record.canEdit) || isAdd)) ? 2 : 1,
+              display: !isLedger
+            };
          case "useInEmployeeSalary":
            return {
              ...item,
@ -44,16 +52,17 @@ class SalaryItemForm extends Component {
              display: (!_.isNil(sharedType) && sharedType.toString() === "1") && (!_.isNil(systemType) && systemType.toString() === "0"),
              options: taxAgentAdminOption
            };
+          case "hideDefault":
          case "valueType":
            return {
              ...item,
-              viewAttr: isAdd ? 2 : 1
+              viewAttr: (isLedger && record.canEdit) || (editable && record.canEdit) || isAdd ? 2 : 1
            };
          case "formulaContent":
            return {
              ...item,
-              display: valueType === "2" || valueType === "3",
-              viewAttr: (editable && record.canEdit) || isAdd ? 2 : 1
+              display: valueType && (valueType.toString() === "2" || valueType.toString() === "3"),
+              viewAttr: (isLedger && record.canEdit) || (editable && record.canEdit) || isAdd ? 2 : 1
            };
          default:
            break;
@ -86,7 +95,7 @@ class SalaryItemForm extends Component {
      if (key === "valueType") {
        onChangeFieldsItem({ formulaContent: "", formulaId: 0, valueType: v });
      } else {
-        onChangeFieldsItem({ [key]: (key === "useDefault" || key === "useInEmployeeSalary") ? Number(v) : v });
+        onChangeFieldsItem({ [key]: (key === "useDefault" || key === "useInEmployeeSalary" || key === "hideDefault") ? Number(v) : v });
      }
    });
  };
@ -131,7 +140,7 @@ class SalaryItemForm extends Component {
                          (type === "INPUTNUMBER" && display) ?
                            <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
                              <WeaInputNumber value={value} viewAttr={viewAttr} precision={0}
-                                           onChange={v => this.handleChangeSalaryFiledItems(key, v)}/>
+                                              onChange={v => this.handleChangeSalaryFiledItems(key, v)}/>
                            </WeaFormItem> : null
              }
            </React.Fragment>;