src/pages/backlog/TaskConfig/components/CreateModal.tsx

import React, { useEffect, useState } from "react";
import { Modal, Form, Input, Radio, message, Select } from "antd";
import { ListVO, saveTaskApi } from "../api";
import { NotifyTypeEnum, TodoTypeEnum } from "../entity";
import PageParams, { ValueVO } from "./PageParams";
import { systemListApi } from "@/pages/admin/Privilege/api";
import usePagination from "@/hooks/usePagination";
import { checkNull } from "@/utils/validate";
const { TextArea } = Input;
interface Props {
  visible: boolean;
  onCancel: () => void;
  onRefreshing: () => void;
  item: ListVO;
  /** 系统列表 */
  systemList: any[];
  /** 工作类型列表 */
  workTyoeList: any[];
  /** 角色列表 */
  // roleList: CommonApi.RoleCodeVO[],
}
export default function CreateModal({
  visible,
  onCancel,
  item,
  onRefreshing,
  systemList,
  workTyoeList,
}: Props) {
  const [form] = Form.useForm();
  const [saveLoading, setSaveLoading] = useState(false);
  const [value, setValue] = useState<ValueVO[]>([]);
  useEffect(() => {
    /** 编辑时，表单数据回显 */
    // if (visible && item.id) {
    if (visible) {
      const prePageParam: { [key: string]: any } = JSON.parse(
        item.pageParam || "{}"
      );
      let pageParam: ValueVO[] = [{ key: "", value: "" }];
      for (let [key, value] of Object.entries(prePageParam)) {
        pageParam.unshift({ key, value });
      }
      setValue(pageParam);
      form.setFieldsValue({
        ...item,
        funcPage: item.funcPage,
        itemName: item.itemName,
        dock: item.dock,
        exShow: item.exShow,
        assess: item.assess,
        itemType: item.itemType || TodoTypeEnum["业务性"],
        listPage: item.listPage,
        detailPage: item.detailPage,
        dynamicTemp: item.dynamicTemp,
        notifyType: item.notifyType || 1,
        pageParam,
        applySysId: item.applySysId,
        workType: item.workType,
        customTemp: item.customTemp,
        customTempPath: item.customTempPath,
        closeStand: checkNull(item.closeStand) ? true : item.closeStand,
      });
    }
    if (!visible) {
      setSaveLoading(false);
    }
  }, [visible]);
  function handleSave(feildValue: any) {
    setSaveLoading(true);
    const pageParam = {};
    (feildValue.pageParam || value || []).forEach((obj: ValueVO) => {
      if (obj.key) {
        pageParam[obj.key.trim()] = (obj.value || "").trim();
      }
    });
    const dock = feildValue.dock;
    const assess = feildValue.assess;
    const exShow = feildValue.exShow;
    const params = {
      ...feildValue,
      itemName: (feildValue.itemName || "").trim(),
      listPage: (feildValue.listPage || item.listPage || "").trim(),
      funcPage: (feildValue.funcPage || "").trim(),
      detailPage: (feildValue.detailPage || "").trim(),
      pageParam: JSON.stringify(pageParam),
      dock: JSON.parse(dock),
      assess: JSON.parse(assess),
      exShow: JSON.parse(exShow),
      itemCode: item.itemCode,
      id: item.id,
      applySysId: feildValue.applySysId,
    };
    saveTaskApi(params)
      .then((res) => {
        message.success("操作成功！");
        onRefreshing && onRefreshing();
        setSaveLoading(false);
        onCancel && onCancel();
      })
      .catch((e) => {
        message.error(e.message);
        setSaveLoading(false);
      });
  }
  return (
    <Modal
      visible={visible}
      onCancel={onCancel}
      onOk={form.submit}
      title={item.itemCode ? "编辑待办项" : "新增待办项"}
      confirmLoading={saveLoading}
      maskClosable={false}
      // afterClose={() => form.resetFields()}
    >
      <Form
        form={form}
        onFinish={handleSave}
        wrapperCol={{ span: 18 }}
        labelCol={{ span: 6 }}
      >
        <Form.Item
          label="待办名称"
          name="itemName"
          rules={[{ required: true }]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          label="关单站岗"
          name="closeStand"
          rules={[{ required: true, message: "请选择是否关单站岗" }]}
        >
          <Radio.Group>
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="对接新待办"
          name="dock"
          rules={[{ required: true, message: "请选择是否对接新待办" }]}
        >
          <Radio.Group>
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </Form.Item>
        {/* 是否显示切换入口 */}
        <Form.Item
          label="显示切换入口"
          name="exShow"
          rules={[{ required: true, message: "请选择是否显示切换入口" }]}
        >
          <Radio.Group>
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="待办时效考核"
          name="assess"
          rules={[{ required: true, message: "请选择是否对接待办时效考核" }]}
        >
          <Radio.Group>
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="待办类型"
          name="itemType"
          rules={[{ required: true, message: "请选择待办类型" }]}
        >
          <Radio.Group>
            {[1, 2].map((it) => (
              <Radio value={it} key={it}>
                {TodoTypeEnum[it]}
              </Radio>
            ))}
          </Radio.Group>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(pre, cur) =>
            pre.dock !== cur.dock || pre.itemType !== cur.itemType
          }
        >
          {({ getFieldValue }) => {
            const dock = getFieldValue("dock");
            const itemType = getFieldValue("itemType");
            if (dock && itemType === TodoTypeEnum["业务性"]) {
              return (
                <Form.Item
                  label="使用自定义模板"
                  name="customTemp"
                  rules={[
                    { required: true, message: "请选择是否使用自定义模板" },
                  ]}
                >
                  <Radio.Group>
                    <Radio value>是</Radio>
                    <Radio value={false}>否</Radio>
                  </Radio.Group>
                </Form.Item>
              );
            }
            return null;
          }}
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(pre, cur) =>
            pre.customTemp !== cur.customTemp ||
            pre.dock !== cur.dock ||
            pre.itemType !== cur.itemType
          }
        >
          {({ getFieldValue }) => {
            const dock = getFieldValue("dock");
            const itemType = getFieldValue("itemType");
            const customTemp = getFieldValue("customTemp");
            if (dock && itemType === TodoTypeEnum["业务性"] && customTemp) {
              return (
                <>
                  <Form.Item
                    label="自定义模板路径"
                    name="customTempPath"
                    rules={[{ required: true }]}
                  >
                    <Input allowClear placeholder="请输入自定义模板路径" />
                  </Form.Item>
                  <Form.Item
                    label="详情页面路径"
                    name="detailPage"
                    extra="用于待办报表跳转详情页"
                    rules={[{ required: true }]}
                  >
                    <Input placeholder="请输入" />
                  </Form.Item>
                </>
              );
            }
            return null;
          }}
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(pre, cur) =>
            pre.dock !== cur.dock ||
            pre.itemType !== cur.itemType ||
            pre.customTemp !== cur.customTemp
          }
        >
          {({ getFieldValue }) => {
            const dock = getFieldValue("dock");
            const itemType = getFieldValue("itemType");
            const customTemp = getFieldValue("customTemp");
            if (itemType === TodoTypeEnum["业务性"]) {
              // 业务性待办
              if (dock) {
                // 新待办
                if (!customTemp) {
                  // 不使用自定义模板
                  return (
                    <div>
                      <Form.Item
                        label="功能页面路径"
                        name="funcPage"
                        rules={[{ required: true }]}
                      >
                        <Input placeholder="请输入功能页面路径" />
                      </Form.Item>
                      <Form.Item
                        label="详情页面路径"
                        name="detailPage"
                        extra="用于待办报表跳转详情页"
                        rules={[{ required: true }]}
                      >
                        <Input placeholder="请输入详情页面路径" />
                      </Form.Item>
                      <Form.Item
                        label="通用模版"
                        name="dynamicTemp"
                        rules={[{ required: true }]}
                        extra={
                          <span>
                            {
                              "换行使用“\n”，动态内容用“${}”包含，如：您的验证码是“${}”(其中code是变量)"
                            }
                          </span>
                        }
                      >
                        <TextArea
                          placeholder={`动态内容用“\${}”包含，如：您的验证码是“\${}”(其中code是变量)"`}
                          allowClear
                          autoSize={{ minRows: 4 }}
                        />
                      </Form.Item>
                    </div>
                  );
                }
              } else {
                // 旧待办
                return (
                  <div>
                    <Form.Item
                      label="待办路径"
                      name="listPage"
                      rules={[{ required: true }]}
                    >
                      <Input placeholder="请输入待办路径" />
                    </Form.Item>
                    <Form.Item label="详情页面路径" name="detailPage">
                      <Input placeholder="请输入详情页面路径" />
                    </Form.Item>
                    <Form.Item label="路径参数" name="pageParam">
                      <PageParams />
                    </Form.Item>
                  </div>
                );
              }
            }
            return null;
          }}
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(pre, cur) =>
            pre.itemType !== cur.itemType || pre.customTemp !== cur.customTemp
          }
        >
          {({ getFieldValue }) => {
            const itemType = getFieldValue("itemType");
            const customTemp = getFieldValue("customTemp");
            if (itemType === TodoTypeEnum["提示性"]) {
              // 业务性待办
              if (!customTemp) {
                // 不使用自定义模板
                return (
                  <Form.Item
                    label="待办模版"
                    name="dynamicTemp"
                    rules={[{ required: true, message: "必填项" }]}
                    extra={
                      <span>
                        {
                          "换行使用“\n”，动态内容用“${}”包含，如：您的验证码是“${}”(其中code是变量)"
                        }
                      </span>
                    }
                  >
                    <TextArea
                      placeholder="请输入"
                      allowClear
                      autoSize={{ minRows: 4 }}
                    />
                  </Form.Item>
                );
              }
            }
            return null;
          }}
        </Form.Item>
        <Form.Item
          name="applySysId"
          label="适用系统"
          rules={[{ required: true, message: "适用系统不能为空" }]}
        >
          <Select placeholder="请选择">
            {systemList.map((item) => (
              <Select.Option value={item.id} key={item.id}>
                {item.sysName}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="通知方式"
          name="notifyType"
          rules={[{ required: true, message: "必选项" }]}
        >
          <Radio.Group>
            {[1, 2, 9].map((it) => (
              <Radio value={it} key={it}>
                {NotifyTypeEnum[it]}
              </Radio>
            ))}
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="workType"
          label="工作类型"
          rules={[{ required: true, message: "工作类型不能为空" }]}
        >
          <Select placeholder="请选择">
            {workTyoeList.map((item) => (
              <Select.Option value={item.id} key={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
}