表单样式调整

曾柯
1 parent 4b165279
Showing 23 changed files with 389 additions and 160 deletions
src/pages/performance/CompensateGroupConfig/EditComfirm/components/AddCommissionParamsModal.tsx
src/pages/performance/CompensateGroupConfig/EditComfirm/components/AddCondModal.tsx
src/pages/performance/CompensateGroupConfig/EditComfirm/components/AddIndicatorsModal.tsx
src/pages/performance/CompensateGroupConfig/EditComfirm/components/AddLadderParamsModal.tsx
src/pages/performance/CompensateGroupConfig/EditComfirm/index.tsx
src/pages/performance/CompensateGroupConfig/EditComfirm/store.ts
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddCommissionParamsModal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddCommissionParamsModalSal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddCondModal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddCondModalSal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddEvaGroupModal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddIndicatorsModal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddLadderParamsModal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddLadderParamsModalSal.tsx
src/pages/performance/EvaGroupSetting/EditComfirm/components/AddRewardsModal.tsx
src/pages/performance/EvaSetting/components/EditModal.tsx
src/pages/performance/KpiGroupSetting/EditComfirm/components/AddCommissionParamsModal.tsx
src/pages/performance/KpiGroupSetting/EditComfirm/components/AddCondModal.tsx
src/pages/performance/KpiGroupSetting/EditComfirm/components/AddIndicatorsModal.tsx
src/pages/performance/KpiGroupSetting/EditComfirm/components/AddLadderParamsModal.tsx
@@ -146,7 +146,13 @@ export default function AddCommissionParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="commissionParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标"
@@ -189,7 +195,7 @@ export default function AddCommissionParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -137,9 +137,10 @@ export default function AddCondModal(props: Props) {
       <Spin spinning={loading}>
         <Form
           form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
           onFinish={handSubmit}
+          style={{ width: "80%", marginLeft: 100 }}
           initialValues={{
             condLadders: [{ lower: 0, scorePercent: 0, key: 0 }],
           }}
@@ -179,7 +180,7 @@ export default function AddCondModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -309,7 +309,13 @@ export default function CreateModal(props: Props) {
       onOk={form.submit}
       width={1200}
     >
-      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} onFinish={handSubmit}>
+      <Form
+        form={form}
+        // labelCol={{ span: 4 }}
+        // wrapperCol={{ span: 20 }}
+        onFinish={handSubmit}
+        style={{ width: "90%", marginLeft: 60 }}
+      >
         <Form.Item name="name" label="薪酬项目名称" rules={[{ required: true, message: "请输入指标名称" }]}>
           <Input placeholder="请输入指标名称" />
         </Form.Item>
@@ -347,7 +353,7 @@ export default function CreateModal(props: Props) {
           }}
         </Form.Item>
  
-        <div style={{ marginLeft: 95, marginBottom: 20 }}>
+        <div style={{ marginBottom: 20 }}>
           <span>是否添加前置条件设置：</span>
           <Radio.Group
             onChange={(e) => {
@@ -139,7 +139,13 @@ export default function AddLadderParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="ladderParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标"
@@ -185,7 +191,7 @@ export default function AddLadderParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -23,7 +23,7 @@ const { Option } = Select;
  
 interface Props extends common.ConnectProps {}
 function Index(props: Props) {
-  const { postList, detailError, setSubmit, configId, setId, data, readOnly, setReadOnly, setSelectedSalaryIds } =
+  const { postList, detailError, setSubmit, configId, setId, data, readOnly, setReadOnly, setSelectedSalaryIds, loading } =
     useStore();
   const [form] = Form.useForm();
   const { match } = props;
@@ -145,7 +145,7 @@ function Index(props: Props) {
   };
  
   return (
-    <PageHeaderWrapper title="薪酬组配置">
+    <PageHeaderWrapper title="薪酬组配置" loading={id ? loading : false}>
       <Card>
         {detailError ? (
           <Result status="warning" title={detailError} />
@@ -13,6 +13,7 @@ export default function useStore() {
     data,
     errMsg: detailError,
     setParams,
+    loading
   } = useInitail(submit == 1 ? api.queryDetailListApi : api.draftQueryDetailListApi, {}, {}, delay);
   const [readOnly, setReadOnly] = useState(false);
  
@@ -59,5 +60,6 @@ export default function useStore() {
     preconditionAlias,
     setPreconditionAlias,
     setSubmit,
+    loading
   };
 }
@@ -149,7 +149,13 @@ export default function AddCommissionParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="commissionParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标(*为考评指标,无*为绩效指标)"
@@ -176,7 +182,8 @@ export default function AddCommissionParamsModal(props: Props) {
                   codeType={item.codeType}
                   name={item.name}
                 >
-                  {item.name}{item.codeType == 2 ? '*' : ''}
+                  {item.name}
+                  {item.codeType == 2 ? "*" : ""}
                 </Option>
               ))}
             </Select>
@@ -203,7 +210,7 @@ export default function AddCommissionParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -147,7 +147,13 @@ export default function AddCommissionParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="commissionParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标(*为考评指标,无*为绩效指标)"
@@ -202,7 +208,7 @@ export default function AddCommissionParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -146,9 +146,10 @@ export default function AddCondModal(props: Props) {
       <Spin spinning={loading}>
         <Form
           form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
           onFinish={handSubmit}
+          style={{ width: "80%", marginLeft: 100 }}
           initialValues={{
             ladders: [{ lower: 0, scorePercent: 0, key: 0 }],
           }}
@@ -190,7 +191,7 @@ export default function AddCondModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -144,9 +144,10 @@ export default function AddCondModal(props: Props) {
       <Spin spinning={loading}>
         <Form
           form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
           onFinish={handSubmit}
+          style={{ width: "80%", marginLeft: 100 }}
           initialValues={{
             ladders: [{ lower: 0, scorePercent: 0, key: 0 }],
           }}
@@ -235,7 +236,7 @@ export default function AddCondModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -137,13 +137,19 @@ export default function AddIndicatorsModal(props: Props) {
       onOk={form.submit}
       width={1400}
     >
-      <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} onFinish={handSubmit}>
+      <Form
+        form={form}
+        // labelCol={{ span: 6 }}
+        // wrapperCol={{ span: 16 }}
+        onFinish={handSubmit}
+        style={{ width: "80%", marginLeft: 140 }}
+      >
         <Form.Item name="name" label="考评组名称" rules={[{ required: true, message: "请输入名称" }]}>
           <Input placeholder="请输入考评组名称" disabled={readOnly} />
         </Form.Item>
         <Form.Item label="考评时间" name="time" rules={[{ required: true, message: "请选择考评时间" }]}>
           <RangePicker
-            style={{ width: 900 }}
+            style={{ width: 1000 }}
             disabled={readOnly}
             disabledDate={(current) => current && current < moment().add(-1, "days").endOf("day")}
           />
@@ -225,7 +231,7 @@ export default function AddIndicatorsModal(props: Props) {
         >
           {({ getFieldValue }) =>
             getFieldValue("scopeType") === 1 ? (
-              <div style={{ marginBottom: 20, marginLeft: 250 }}>
+              <div style={{ marginBottom: 20 }}>
                 <a onClick={() => personView()}>{`人员查看 >`}</a>
               </div>
             ) : null
@@ -184,9 +184,10 @@ export default function AddIndicatorsModal(props: Props) {
     >
       <Form
         form={form}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 18 }}
+        // labelCol={{ span: 6 }}
+        // wrapperCol={{ span: 18 }}
         onFinish={handSubmit}
+        style={{ width: "80%", marginLeft: 120 }}
         initialValues={{
           ladders: [{ lower: 0, standardScore: 0, key: 0 }],
         }}
@@ -208,7 +209,7 @@ export default function AddIndicatorsModal(props: Props) {
             </Option>
           </Select>
         </Form.Item>
-        <div style={{ marginLeft: 218, marginBottom: 20 }}>
+        <div style={{ marginBottom: 20 }}>
           <span>是否添加前置条件设置：</span>
           <Radio.Group
             onChange={(e) => {
@@ -145,7 +145,13 @@ export default function AddLadderParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="ladderParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标(*为考评指标,无*为绩效指标)"
@@ -200,7 +206,7 @@ export default function AddLadderParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -145,7 +145,13 @@ export default function AddLadderParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="ladderParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标(*为考评指标,无*为绩效指标)"
@@ -200,7 +206,7 @@ export default function AddLadderParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -196,8 +196,9 @@ export default function CreateModal(props: Props) {
     >
       <Form
         form={form}
-        labelCol={{ span: 4 }}
-        wrapperCol={{ span: 20 }}
+        // labelCol={{ span: 4 }}
+        // wrapperCol={{ span: 20 }}
+        style={{ width: "90%", marginLeft: 60 }}
         onFinish={handSubmit}
         initialValues={{
           ladders: [{ lower: 0, money: 0, key: 0 }],
@@ -349,22 +350,22 @@ export default function CreateModal(props: Props) {
                       } else if (!rankType && (!currentItem.ladders || currentItem.ladders.length == 0)) {
                         form.setFieldValue("ladders", [{ lower: 0, money: 0, key: 0, rankOrderType: 1 }]);
                       }
-                        return (
-                          <Form.Item
-                            name="ladders"
-                            label="排名设置"
-                            rules={[{ required: true, message: "请配置排名" }]}
-                            style={{ width: "100%" }}
-                          >
-                            <RankModal
-                              visible
-                              isPercent={isPercent}
-                              laddersType={currentItem?.laddersType}
-                              calType={calType}
-                              rankType={rankType}
-                            />
-                          </Form.Item>
-                        );
+                      return (
+                        <Form.Item
+                          name="ladders"
+                          label="排名设置"
+                          rules={[{ required: true, message: "请配置排名" }]}
+                          style={{ width: "100%" }}
+                        >
+                          <RankModal
+                            visible
+                            isPercent={isPercent}
+                            laddersType={currentItem?.laddersType}
+                            calType={calType}
+                            rankType={rankType}
+                          />
+                        </Form.Item>
+                      );
                     }}
                   </Form.Item>
                 </>
@@ -442,23 +443,23 @@ export default function CreateModal(props: Props) {
               } else if (caculateType == 5 && (!currentItem.ladders || currentItem.ladders.length == 0)) {
                 form.setFieldValue("ladders", [{ lower: 0, money: 0, capMoney: 0, key: 0 }]);
               }
-                return (
-                  <>
-                    <Form.Item
-                      name="ladders"
-                      label="阶梯条件"
-                      rules={[{ required: true, message: "请配置阶梯" }]}
-                      style={{ width: "100%" }}
-                    >
-                      <TotalAmountSal
-                        visible
-                        isPercent={isPercent}
-                        laddersType={currentItem.laddersType}
-                        calType={calType}
-                      />
-                    </Form.Item>
-                  </>
-                );
+              return (
+                <>
+                  <Form.Item
+                    name="ladders"
+                    label="阶梯条件"
+                    rules={[{ required: true, message: "请配置阶梯" }]}
+                    style={{ width: "100%" }}
+                  >
+                    <TotalAmountSal
+                      visible
+                      isPercent={isPercent}
+                      laddersType={currentItem.laddersType}
+                      calType={calType}
+                    />
+                  </Form.Item>
+                </>
+              );
             }
             return null;
           }}
@@ -66,8 +66,9 @@ export default function EditModal({ onClose, setItem, item, roleList }: Props) {
       <Form
         form={form}
         onFinish={handleSave}
-        labelCol={{ span: 6 }}
-        wrapperCol={{ span: 15 }}
+        // labelCol={{ span: 6 }}
+        // wrapperCol={{ span: 15 }}
+        style={{ width: "80%", marginLeft: 100 }}
         initialValues={{ ruleValues: [] }}
       >
         <FormItem name="name" label="指标名称" rules={[{ required: true, message: "请输入指标名称" }]}>
@@ -142,7 +142,13 @@ export default function AddCommissionParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="commissionParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标"
@@ -187,7 +193,7 @@ export default function AddCommissionParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -137,9 +137,10 @@ export default function AddCondModal(props: Props) {
       <Spin spinning={loading}>
         <Form
           form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
           onFinish={handSubmit}
+          style={{ width: "80%", marginLeft: 100 }}
           initialValues={{
             condLadders: [{ lower: 0, scorePercent: 0, key: 0 }],
           }}
@@ -170,7 +171,7 @@ export default function AddCondModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -190,8 +190,9 @@ export default function AddIndicatorsModal(props: Props) {
       <Spin spinning={loading}>
         <Form
           form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 18 }}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 15 }}
+          style={{ width: "80%", marginLeft: 150 }}
           onFinish={handSubmit}
           initialValues={{
             indicatorLadders: [{ lower: 0, standardScore: 0, key: 0 }],
@@ -214,7 +215,7 @@ export default function AddIndicatorsModal(props: Props) {
               </Option>
             </Select>
           </Form.Item>
-          <div style={{ marginLeft: 218, marginBottom: 20 }}>
+          <div style={{ marginBottom: 20 }}>
             <span>是否添加前置条件设置：</span>
             <Radio.Group
               onChange={(e) => {
@@ -140,7 +140,13 @@ export default function AddLadderParamsModal(props: Props) {
       width={1000}
     >
       <Spin spinning={loading}>
-        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
+        <Form
+          form={form}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 18 }}
+          onFinish={handSubmit}
+          style={{ width: "70%", marginLeft: 150 }}
+        >
           <Form.Item name="ladderParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
             <Select
               placeholder="选择指标"
@@ -191,7 +197,7 @@ export default function AddLadderParamsModal(props: Props) {
           {(targetType === TargetTypeEnum["百分比"] ||
             targetType === TargetTypeEnum["金额"] ||
             targetType === TargetTypeEnum["数量"]) && (
-            <div style={{ marginLeft: 65 }}>
+            <div>
               <Button type="link" onClick={() => setIsTarget(true)}>
                 考核目标值设置（可选项）
               </Button>
@@ -62,7 +62,13 @@ export default function EditModal({ onClose, setItem, item, roleList }: Props) {
       confirmLoading={saveLoading}
       afterClose={() => form.resetFields()}
     >
-      <Form form={form} onFinish={handleSave} labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
+      <Form
+        form={form}
+        onFinish={handleSave}
+        // labelCol={{ span: 6 }}
+        // wrapperCol={{ span: 15 }}
+        style={{ width: "80%", marginLeft: 50 }}
+      >
         <Form.Item name="indicatorName" label="指标名称" rules={[{ required: true, message: "请输入指标名称" }]}>
           <Input placeholder="请输入指标名称" />
         </Form.Item>
@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { Modal, Form, Select, InputNumber, message, Spin, Radio, Input, Button } from "antd";
 // import { queryPostIndicatorApi } from "../api";
-import _ from "lodash";
+import _, { fromPairs } from "lodash";
 import useInitail from "@/hooks/useInitail";
 import { KpiGroupSetteing } from "@/pages/performance/KpiGroupSetting/interface";
 import { getManagerRoleListApi } from "@/common/api";
@@ -104,6 +104,7 @@ export default function AddIndicatorsModal(props: Props) {
     }
     setEvaPerson({ ...evaPerson, visible: true });
   };
+  // console.log("form", form.getFieldValue("penaltyScore"));
   return (
     <Modal
       title={`${comItem.role ? "编辑" : "新增"}考核对象`}
@@ -120,12 +121,10 @@ export default function AddIndicatorsModal(props: Props) {
       <Spin spinning={false}>
         <Form
           form={form}
-          labelCol={{ span: 6 }}
-          wrapperCol={{ span: 15 }}
+          // labelCol={{ span: 6 }}
+          // wrapperCol={{ span: 15 }}
+          style={{ width: "70%", marginLeft: 200 }}
           onFinish={handSubmit}
-          initialValues={{
-            indicatorLadders: [{ lower: 0, standardScore: 0, key: 0 }],
-          }}
         >
           <Form.Item
             name="role"
@@ -157,11 +156,11 @@ export default function AddIndicatorsModal(props: Props) {
               ))}
             </Select>
           </Form.Item>
-          <div style={{ marginBottom: 15, marginLeft: 220 }}>
+          <div style={{ marginBottom: 15 }}>
             <a onClick={() => personView()}>{`考核人员清单 >`}</a>
           </div>
-          {type == 2 ? <div style={{ marginBottom: 15, marginLeft: 220 }}>考核方式：绩效排名差</div> : null}
-          <div style={{ marginBottom: 15, marginLeft: 220 }}>• 处罚：</div>
+          {type == 2 ? <div style={{ marginBottom: 15 }}>考核方式：绩效排名差</div> : null}
+          <div style={{ marginBottom: 15, fontSize: 18, fontWeight: "bold" }}>• 处罚：</div>
           <Form.Item
             name="penaltyScore"
             label="处罚绩效分"
@@ -170,23 +169,64 @@ export default function AddIndicatorsModal(props: Props) {
           >
             <InputNumber placeholder="请输入处罚绩效分" addonAfter="分/名次" style={{ width: "100%" }} min={0} />
           </Form.Item>
-          {type == 2 ? (
-            <Form.Item
-              name="capPersonPenaltyScore"
-              label="单人处罚封顶分数"
-              rules={[{ required: true, message: "请输入单人处罚封顶分数" }]}
-              style={{ marginBottom: 15 }}
-            >
-              <InputNumber placeholder="请输入单人处罚封顶分数" addonAfter="分/人" style={{ width: "100%" }} min={0} />
-            </Form.Item>
-          ) : null}
           <Form.Item
-            name="capPenaltyScore"
-            label="封顶处罚分数"
-            rules={[{ required: true, message: "请输入封顶处罚分数" }]}
-            style={{ marginBottom: 15 }}
+            noStyle
+            shouldUpdate={(prevValues, currentValues) => prevValues.penaltyScore !== currentValues.penaltyScore}
+          >
+            {({ getFieldValue }) => {
+              const penaltyScore = getFieldValue("penaltyScore");
+              return type == 2 ? (
+                <Form.Item
+                  name="capPersonPenaltyScore"
+                  label="单人处罚封顶分数"
+                  rules={[
+                    { required: true, message: "请输入单人处罚封顶分数" },
+                    { type: "number", min: penaltyScore, message: "单人处罚封顶分数必须大于等于处罚绩效分" },
+                  ]}
+                  style={{ marginBottom: 15}}
+                >
+                  <InputNumber
+                    placeholder="请输入单人处罚封顶分数"
+                    addonAfter="分/人"
+                    style={{ width: "100%" }}
+                    min={0}
+                  />
+                </Form.Item>
+              ) : null;
+            }}
+          </Form.Item>
+          <Form.Item
+            noStyle
+            shouldUpdate={(prevValues, currentValues) => {
+              if (type == 2) {
+                return prevValues.capPersonPenaltyScore !== currentValues.capPersonPenaltyScore;
+              } else {
+                return prevValues.penaltyScore !== currentValues.penaltyScore;
+              }
+            }}
           >
-            <InputNumber placeholder="请输入封顶处罚分数" addonAfter="分" style={{ width: "100%" }} min={0} />
+            {({ getFieldValue }) => {
+              const capPersonPenaltyScore = getFieldValue("capPersonPenaltyScore");
+              const penaltyScore = getFieldValue("penaltyScore");
+              return (
+                <Form.Item
+                  name="capPenaltyScore"
+                  label="封顶处罚分数"
+                  rules={[
+                    { required: true, message: "请输入封顶处罚分数" },
+                    {
+                      type: "number",
+                      min: type == 1 ? penaltyScore : capPersonPenaltyScore,
+                      message:
+                        type == 1 ? "封顶处罚分数必须大于等于处罚绩效分" : "封顶处罚分数必须大于等于单人处罚封顶分数",
+                    },
+                  ]}
+                  style={{ marginBottom: 40 }}
+                >
+                  <InputNumber placeholder="请输入封顶处罚分数" addonAfter="分" style={{ width: "100%" }} min={0} />
+                </Form.Item>
+              );
+            }}
           </Form.Item>
           <Form.Item
             name="penaltyMoney"
@@ -196,27 +236,68 @@ export default function AddIndicatorsModal(props: Props) {
           >
             <InputNumber placeholder="请输入处罚金额" addonAfter="元/名次" style={{ width: "100%" }} min={0} />
           </Form.Item>
-          {type == 2 ? (
-            <Form.Item
-              name="capPersonPenaltyMoney"
-              label="单人处罚封顶金额"
-              rules={[{ required: true, message: "请输入单人处罚封顶金额" }]}
-              style={{ marginBottom: 15 }}
-            >
-              <InputNumber placeholder="请输入单人处罚封顶金额" addonAfter="元/人" style={{ width: "100%" }} min={0} />
-            </Form.Item>
-          ) : null}
           <Form.Item
-            name="capPenaltyMoney"
-            label="封顶处罚金额"
-            rules={[{ required: true, message: "请输入封顶处罚金额" }]}
-            style={{ marginBottom: 15 }}
+            noStyle
+            shouldUpdate={(prevValues, currentValues) => prevValues.penaltyMoney !== currentValues.penaltyMoney}
           >
-            <InputNumber placeholder="请输入封顶处罚金额" addonAfter="元" style={{ width: "100%" }} min={0} />
+            {({ getFieldValue }) => {
+              const penaltyMoney = getFieldValue("penaltyMoney");
+              return type == 2 ? (
+                <Form.Item
+                  name="capPersonPenaltyMoney"
+                  label="单人处罚封顶金额"
+                  rules={[
+                    { required: true, message: "请输入单人处罚封顶金额" },
+                    { type: "number", min: penaltyMoney, message: "单人处罚封顶金额必须大于等于处罚金额" },
+                  ]}
+                  style={{ marginBottom: 15 }}
+                >
+                  <InputNumber
+                    placeholder="请输入单人处罚封顶金额"
+                    addonAfter="元/人"
+                    style={{ width: "100%" }}
+                    min={0}
+                  />
+                </Form.Item>
+              ) : null;
+            }}
+          </Form.Item>
+          <Form.Item
+            noStyle
+            shouldUpdate={(prevValues, currentValues) => {
+              if (type == 2) {
+                return prevValues.capPersonPenaltyMoney !== currentValues.capPersonPenaltyMoney;
+              } else {
+                return prevValues.penaltyMoney !== currentValues.penaltyMoney;
+              }
+            }}
+          >
+            {({ getFieldValue }) => {
+              const capPersonPenaltyMoney = getFieldValue("capPersonPenaltyMoney");
+              const penaltyMoney = getFieldValue("penaltyMoney");
+              return (
+                <Form.Item
+                  name="capPenaltyMoney"
+                  label="封顶处罚金额"
+                  rules={[
+                    { required: true, message: "请输入封顶处罚金额" },
+                    {
+                      type: "number",
+                      min: type == 1 ? penaltyMoney : capPersonPenaltyMoney,
+                      message:
+                        type == 1 ? "封顶处罚金额必须大于等于处罚金额" : "封顶处罚金额必须大于等于单人处罚封顶金额",
+                    },
+                  ]}
+                  style={{ marginBottom: 15 }}
+                >
+                  <InputNumber placeholder="请输入封顶处罚金额" addonAfter="元" style={{ width: "100%" }} min={0} />
+                </Form.Item>
+              );
+            }}
           </Form.Item>
           {type == 2 ? (
             <>
-              <div style={{ marginBottom: 15, marginLeft: 220 }}>• 奖励：</div>
+              <div style={{ marginBottom: 15, fontSize: 18, fontWeight: "bold" }}>• 奖励：</div>
               <Form.Item
                 name="awardScore"
                 label="奖励绩效分"
@@ -226,26 +307,59 @@ export default function AddIndicatorsModal(props: Props) {
                 <InputNumber placeholder="请输入奖励绩效分" addonAfter="分/名次" style={{ width: "100%" }} min={0} />
               </Form.Item>
               <Form.Item
-                name="capPersonAwardScore"
-                label="单人奖励封顶分数"
-                rules={[{ required: true, message: "请输入单人奖励封顶分数" }]}
-                style={{ marginBottom: 15 }}
+                noStyle
+                shouldUpdate={(prevValues, currentValues) => prevValues.awardScore !== currentValues.awardScore}
               >
-                <InputNumber
-                  placeholder="请输入单人奖励封顶分数"
-                  addonAfter="分/人"
-                  style={{ width: "100%" }}
-                  min={0}
-                />
+                {({ getFieldValue }) => {
+                  const awardScore = getFieldValue("awardScore");
+                  return (
+                    <Form.Item
+                      name="capPersonAwardScore"
+                      label="单人奖励封顶分数"
+                      rules={[
+                        { required: true, message: "请输入单人奖励封顶分数" },
+                        { type: "number", min: awardScore, message: "单人奖励封顶分数必须大于等于奖励绩效分" },
+                      ]}
+                      style={{ marginBottom: 15 }}
+                    >
+                      <InputNumber
+                        placeholder="请输入单人奖励封顶分数"
+                        addonAfter="分/人"
+                        style={{ width: "100%" }}
+                        min={0}
+                      />
+                    </Form.Item>
+                  );
+                }}
               </Form.Item>
               <Form.Item
-                name="capAwardScore"
-                label="封顶奖励分数"
-                rules={[{ required: true, message: "请输入封顶奖励分数" }]}
-                style={{ marginBottom: 15 }}
+                noStyle
+                shouldUpdate={(prevValues, currentValues) =>
+                  prevValues.capPersonAwardScore !== currentValues.capPersonAwardScore
+                }
               >
-                <InputNumber placeholder="请输入封顶奖励分数" addonAfter="分" style={{ width: "100%" }} min={0} />
+                {({ getFieldValue }) => {
+                  const capPersonAwardScore = getFieldValue("capPersonAwardScore");
+                  return (
+                    <Form.Item
+                      name="capAwardScore"
+                      label="封顶奖励分数"
+                      rules={[
+                        { required: true, message: "请输入封顶奖励分数" },
+                        {
+                          type: "number",
+                          min: capPersonAwardScore,
+                          message: "封顶奖励分数必须大于等于单人奖励封顶分数",
+                        },
+                      ]}
+                      style={{ marginBottom: 40 }}
+                    >
+                      <InputNumber placeholder="请输入封顶奖励分数" addonAfter="分" style={{ width: "100%" }} min={0} />
+                    </Form.Item>
+                  );
+                }}
               </Form.Item>
+
               <Form.Item
                 name="awardMoney"
                 label="奖励金额"
@@ -255,25 +369,57 @@ export default function AddIndicatorsModal(props: Props) {
                 <InputNumber placeholder="请输入奖励金额" addonAfter="元/名次" style={{ width: "100%" }} min={0} />
               </Form.Item>
               <Form.Item
-                name="capPersonAwardMoney"
-                label="单人奖励封顶金额"
-                rules={[{ required: true, message: "请输入单人奖励封顶金额" }]}
-                style={{ marginBottom: 15 }}
+                noStyle
+                shouldUpdate={(prevValues, currentValues) => prevValues.awardMoney !== currentValues.awardMoney}
               >
-                <InputNumber
-                  placeholder="请输入单人奖励封顶金额"
-                  addonAfter="元/人"
-                  style={{ width: "100%" }}
-                  min={0}
-                />
+                {({ getFieldValue }) => {
+                  const awardMoney = getFieldValue("awardMoney");
+                  return (
+                    <Form.Item
+                      name="capPersonAwardMoney"
+                      label="单人奖励封顶金额"
+                      rules={[
+                        { required: true, message: "请输入单人奖励封顶金额" },
+                        { type: "number", min: awardMoney, message: "单人奖励封顶金额必须大于等于奖励金额" },
+                      ]}
+                      style={{ marginBottom: 15 }}
+                    >
+                      <InputNumber
+                        placeholder="请输入单人奖励封顶金额"
+                        addonAfter="元/人"
+                        style={{ width: "100%" }}
+                        min={0}
+                      />
+                    </Form.Item>
+                  );
+                }}
               </Form.Item>
               <Form.Item
-                name="capAwardMoney"
-                label="封顶奖励金额"
-                rules={[{ required: true, message: "请输入封顶奖励金额" }]}
-                style={{ marginBottom: 15 }}
+                noStyle
+                shouldUpdate={(prevValues, currentValues) =>
+                  prevValues.capPersonAwardMoney !== currentValues.capPersonAwardMoney
+                }
               >
-                <InputNumber placeholder="请输入封顶奖励金额" addonAfter="元" style={{ width: "100%" }} min={0} />
+                {({ getFieldValue }) => {
+                  const capPersonAwardMoney = getFieldValue("capPersonAwardMoney");
+                  return (
+                    <Form.Item
+                      name="capAwardMoney"
+                      label="封顶奖励金额"
+                      rules={[
+                        { required: true, message: "请输入封顶奖励金额" },
+                        {
+                          type: "number",
+                          min: capPersonAwardMoney,
+                          message: "封顶奖励金额必须大于等于单人奖励封顶金额",
+                        },
+                      ]}
+                      style={{ marginBottom: 15 }}
+                    >
+                      <InputNumber placeholder="请输入封顶奖励金额" addonAfter="元" style={{ width: "100%" }} min={0} />
+                    </Form.Item>
+                  );
+                }}
               </Form.Item>
             </>
           ) : null}
@@ -107,14 +107,14 @@ export default function EditModal({ onClose, setItem, item, roleList }: Props) {
     if (pa.type == 2) {
       pa.details.forEach((item: any) => {
         if (
-          !item.capPersonPenaltyScore ||
-          !item.capPersonPenaltyMoney ||
-          !item.awardScore ||
-          !item.capPersonAwardScore ||
-          !item.capAwardScore ||
-          !item.awardMoney ||
-          !item.capPersonAwardMoney ||
-          !item.capAwardMoney
+          item.capPersonPenaltyScore == undefined ||
+          !item.capPersonPenaltyMoney == undefined ||
+          !item.awardScore == undefined ||
+          !item.capPersonAwardScore == undefined ||
+          !item.capAwardScore == undefined ||
+          !item.awardMoney == undefined ||
+          !item.capPersonAwardMoney == undefined ||
+          !item.capAwardMoney == undefined
         ) {
           message.error("考核详情中存在没有填的内容");
         } else {
@@ -175,7 +175,13 @@ export default function EditModal({ onClose, setItem, item, roleList }: Props) {
         width={1200}
       >
         <Spin spinning={currentItem.id ? loading : false}>
-          <Form form={form} onFinish={handleSave} labelCol={{ span: 6 }} wrapperCol={{ span: 15 }}>
+          <Form
+            form={form}
+            onFinish={handleSave}
+            // labelCol={{ span: 6 }}
+            // wrapperCol={{ span: 15 }}
+            style={{ width: "70%", marginLeft: 200 }}
+          >
             <Form.Item name="post" label="岗位" rules={[{ required: true, message: "请选择岗位" }]}>
               <Select
                 labelInValue
@@ -238,7 +244,7 @@ export default function EditModal({ onClose, setItem, item, roleList }: Props) {
                 ) : null;
               }}
             </Form.Item>
-            <div style={{ marginBottom: 20, marginLeft: 220 }}>
+            <div style={{ marginBottom: 20 }}>
               <a onClick={() => personView()}>{`人员清单 >`}</a>
             </div>
             <Form.Item name="details" label="考核详情" rules={[{ required: true }]}>