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>
  );
}