FEV2 / fw-cms

  import React, { useState, useEffect } from "react";

  import {
    Input,
    Select,
    Modal,
    Form,
    message,
    Tooltip,
    Tag,
    Button,
    Space,
  } from "antd";

  import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";

  import {
    ApprovalType,
    Approval_Status,
    transformDTO,
    transformFormData,
  } from "../entity";

  import _ from "lodash";

  import { systemListApi } from "@/pages/admin/Privilege/api";
  import usePagination from "@/hooks/usePagination";

  import { getAllRoleCodeApi } from "@/common/api";

  import useInitial from "@/hooks/useInitail";

  import { saveApproveConfig } from "../api";

  import toChineseBig from "@/utils/toChinease";

  
  const { Option } = Select;

  const layout = {

    labelCol: { span: 6 },
    wrapperCol: { span: 18 },

  };

  interface Props {

    item: { visible: boolean; currentItem?: ApprovalSetteing.ApprovalListItems };
    setItem: any;
    setParams: any;

  }
  

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };
  const formItemLayoutWithOutLabel = {
    wrapperCol: {
      xs: { span: 24, offset: 0 },
      sm: { span: 20, offset: 4 },
    },
  };

  export default function CreateItem({ item, setItem, setParams }: Props) {

    const [form] = Form.useForm();

    const { list } = usePagination(systemListApi, { current: 1, pageSize: 500 });

    const { data, setData } = useInitial(getAllRoleCodeApi, [], {});

    const [loading, setLoading] = useState(false);

    const { visible, currentItem } = item;

    useEffect(() => {

      setData(data.filter((item) => item.useType === 3 || item.useType === 4));

      if (visible && currentItem) {

        const result = transformFormData(currentItem);

        form.setFieldsValue({ ...result });
      }
    }, [visible]);

    const onFinish = () => {

      form
        .validateFields()
        .then((fileds) => {
          const pa = {
            ...fileds,

            id: currentItem ? currentItem.id : undefined,

          };
  
          const result = transformDTO(pa);

          // return;

          setLoading(true);
          saveApproveConfig(result)
            .then((res) => {
              message.success("保存成功");
              setParams({ current: 1 }, true);

              setItem({ visible: false });

            })
            .catch((err) => message.error(err.message))
            .finally(() => {
              setLoading(false);

            });
        })

        .catch((err) => message.error(err.message));

    };

    return (

      <Modal

        // title="新增"

        title={`${currentItem ? "编辑" : "新增"}审批配置`}

        visible={visible}
        onCancel={() => setItem({ visible: false })}
        onOk={() => form.submit()}

        confirmLoading={loading}
        afterClose={() => form.resetFields()}

        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}

      >

        <Form
          {...layout}
          form={form}
          name="control-hooks"
          onFinish={onFinish}

          initialValues={{ approvalRoles: [{}] }}

        >

          <Form.Item
            name="approvalName"
            label="审批名称"
            rules={[{ required: true }]}
          >

            <Input placeholder="请输入审批名称" maxLength={16} />

          </Form.Item>

          <Form.Item
            name="approvalType"
            label="审批类型"
            rules={[{ required: true }]}
          >
            <Select placeholder="请选择审批类型">
              {ApprovalType.map((item) => (
                <Option value={item.value} key={item.value}>
                  {item.label}
                </Option>
              ))}

            </Select>
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.approvalType !== currentValues.approvalType}
          >
            {({ getFieldValue }) => (getFieldValue("approvalType") === 1 ? (
              <Form.List name="approvalRoles">
                {(fields, { add, remove }) => (
                  <div style={{ paddingLeft: 47 }}>
                    {fields.map(({ key, name, ...restField }, index) => (

                      <Form.Item

                        label={index === 0 ? "审批角色" : ""}

                        key={key}

                        {...(index === 0
                            ? formItemLayout
                            : formItemLayoutWithOutLabel)}
                        style={{ height: 55 }}

                      >

                        <div>
                          <span style={{ fontSize: 14 }}>
                            {toChineseBig(index + 1)}级审批
                          </span>
                          {index !== 0 && (
                          <DeleteOutlined
                            style={{ marginLeft: 5, color: "red" }}
                            onClick={() => remove(name)}
                          />
                            )}
                          <Form.Item
                            key={key}
                            style={{ width: "100%" }}
                            {...restField}
                            name={[name, "roleObj"]}
                            rules={[
                                { required: true, message: "请选择审批角色" },
                              ]}
                          >
                            <Select
                              style={{ width: "100%" }}
                              placeholder="请选择审批角色"
                              labelInValue
                              showSearch
                              showArrow
                              allowClear
                              optionFilterProp="children"
                            >
                              {data.map((item) => (
                                <Option
                                    value={item.roleCode}
                                    key={item.roleCode}
                                  >
                                    {item.roleName}
                                  </Option>
                                ))}
                            </Select>
                          </Form.Item>
                        </div>

                      </Form.Item>

                      ))}
                    <Form.Item style={{ width: "100%" }}>
                      <Button
                        type="dashed"
                        onClick={() => add()}
                        block
                        style={{ marginLeft: 67, width: 358 }}
                        icon={<PlusOutlined />}
                      >
                        增加角色
                      </Button>
                    </Form.Item>
                  </div>
                  )}
              </Form.List>
              ) : null)}
          </Form.Item>
  

          <Form.Item
            name="path"
            label="业务详情路径"

            // rules={[{ required: true }]}

          >
            <Input placeholder="请输入业务详情路径" />
          </Form.Item>
          <Form.Item
            name="gateName"
            label="归属系统"
            rules={[{ required: true }]}
          >

            <Select
              placeholder="请选择归属系统"
              showSearch
              allowClear
              optionFilterProp="children"
            >

              {list.map((item) => (
                <Option value={item.sysPrefix} key={item.sysPrefix}>

                  {/* <Option value={item.id} key={item.sysPrefix}> */}

                  {item.sysName}
                </Option>
              ))}

            </Select>
          </Form.Item>

          <Form.Item name="status" label="状态" rules={[{ required: true }]}>

            <Select placeholder="请选择状态">
              {Approval_Status.map((item) => (
                <Option value={item.value} key={item.value}>
                  {item.label}
                </Option>
              ))}

            </Select>
          </Form.Item>
        </Form>

      </Modal>
    );
  }