FEV2 / fw-cms

  import React, { useEffect, useState } from "react";
  import {
    Card,
    Form,
    InputNumber,
    Button,
    message,
    Popconfirm,
    Result,
    Radio,
    Descriptions,
    Popover,
  } from "antd";
  import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
  
  import { PageHeaderWrapper } from "@ant-design/pro-layout";
  import useInitial from "@/hooks/useInitail";
  import {
    getConfigApi,
    DetailParams,
    SaveParams,
    saveConfigApi,
    fetchList,
    Item,
  } from "./api";
  
  const FormItem = Form.Item;
  
  export default function StarRatingRules() {
    const { data, setLoading, loading, errMsg } = useInitial<Item, any>(
      fetchList,
      {},
      {}
    );
    const [disabled, setDisabled] = useState(true);
    const [submitLoading, setSubmitLoading] = useState(false);
    const [form] = Form.useForm();
  
    useEffect(() => {
      initData();
    }, [data]);
  
    function onHandleCancel(initFlag: boolean = true) {
      initFlag && initData();
      setDisabled(!disabled);
    }
  
    function initData() {
      form.setFieldsValue({
        ...data,
      });
    }
  
    function onFinish(feildValue: SaveParams) {
      setSubmitLoading(true);

      const params = {
        ...feildValue,
      };
      try {
        saveConfigApi(params)
          .then((res) => {
            message.success("保存成功");
            setDisabled(true);
            setSubmitLoading(false);
          })
          .catch((err) => {
            message.error(err.message);
            setSubmitLoading(false);
          });
      } catch (err) {
        message.error(err.message);
        setSubmitLoading(false);
      }
    }
  
    return (

      <PageHeaderWrapper title="系统设置">

        <Card loading={loading}>
          {errMsg ? (
            <Result
              title="页面错误"
              subTitle={errMsg}
              status="error"
              extra={
                <Button type="primary" onClick={() => setLoading(true)}>
                  重新加载
                </Button>
              }
            />
          ) : (
            <Form
              form={form}
              onFinish={onFinish}
              labelCol={{ span: 10 }}
              layout="vertical"
              wrapperCol={{ span: 5 }}
              style={{

                padding: 150,

              }}
            >

              <h3 style={{ width: "100%" }}>开放管理层查看薪酬：</h3>

              <FormItem

                name="leaderVisibility"

                style={{ paddingLeft: 100 }}
                rules={[{ required: true, message: "请输入" }]}
              >

  
                <Radio.Group disabled={disabled} >

                  <Radio value>开放</Radio>
                  <Radio value={false}>不开放</Radio>
                </Radio.Group>

              </FormItem>

              <h3 style={{ width: "100%" }}>工资申诉时间：</h3>

              <div
                style={{
                  display: "flex",
                  paddingLeft: 50,
                  flexWrap: "wrap",
                }}
              >
                <FormItem

                  name="startDateOfAppeal"
                  label="可申诉开始日期"

                  style={{ paddingLeft: 50 }}
                  rules={[{ required: true, message: "请输入" }]}
                >
                  <InputNumber
                    placeholder="请输入"

                    min={1}

                    precision={0}
                    disabled={disabled}

                    addonAfter="日"

                    style={{ marginRight: 6, width: 400 }}
                  />
                </FormItem>
                <FormItem

                  name="endDateOfAppeal"

                  label="可申诉结束日期"

                  style={{ paddingLeft: 50 }}
                  rules={[{ required: true, message: "请输入" }]}
                >
                  <InputNumber
                    placeholder="请输入"
                    style={{ width: 400 }}

                    min={1}
                    max={28}

                    addonAfter="日"

                    disabled={disabled}
                    precision={0}
                  />
                </FormItem>
              </div>

              <h3 style={{ width: "100%" }}>工资发放时间：</h3>

              <div
                style={{
                  display: "flex",
                  paddingLeft: 50,
                  flexWrap: "wrap",
                }}
              >
                <FormItem

                  name="payoffDate"

                  label="每月"

                  style={{ paddingLeft: 50 }}
                  rules={[{ required: true, message: "请输入" }]}
                >
                  <InputNumber
                    placeholder="请输入"

                    min={1}

                    precision={0}
                    max={28}

                    disabled={disabled}
                    style={{ marginRight: 6, width: 400 }}

                    addonAfter="日"

                  />
                </FormItem>

  
              </div>
              <h3 style={{ width: "100%" }}>薪酬发放限制：</h3>
              <div
                style={{
                  display: "flex",
                  paddingLeft: 50,
                  flexWrap: "wrap",
                }}
              >

                <FormItem

                  name="payoffLimit"
                  label="公户发放最大金额"

                  style={{ paddingLeft: 50 }}

                >
                  <InputNumber

                    placeholder="请输入"

                    min={0}

                    precision={2}

                    disabled={disabled}

                    addonAfter="元"
  

                    style={{ marginRight: 6, width: 400 }}

                  />
                </FormItem>
              </div>

              <FormItem
                wrapperCol={{ offset: 7, span: 14 }}
                style={{ marginTop: 40 }}
              >
                <Popconfirm
                  title="确定取消？取消将重置数据"
                  onConfirm={() => onHandleCancel(true)}
                >
                  <Button hidden={disabled} style={{ marginRight: 30 }}>
                    取消
                  </Button>
                </Popconfirm>
                <Button
                  hidden={disabled}
                  type="primary"
                  htmlType="submit"
                  loading={submitLoading}
                >
                  提交
                </Button>
                <Button
                  hidden={!disabled}
                  type="primary"
                  htmlType="button"
                  onClick={() => onHandleCancel(false)}
                >
                  编辑
                </Button>
              </FormItem>
            </Form>
          )}
        </Card>
      </PageHeaderWrapper>
    );
  }