FEV2 / fw-cms

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

  import PostSelect from "@/components/PostSelect";

  import {
    Modal,
    Select,
    InputNumber,
    Spin,
    message,
    Form,
    Input,
    FormInstance,
  } from "antd";

  import { TriggerType, TriggerAll } from "../entity";

  import _ from "lodash";

  // ShopSelect;
  import ShopSelect from "@/components/ShopSelect";

  interface PostItem {

    type: number; //岗位大类编码
    typeName: string; //岗位大类名称

  }

  const { Option } = Select;
  const FormItem = Form.Item;
  interface Interval {
    min?: number;
    max?: number;
  }
  
  interface Props {
    loading: boolean;
    onOk: (data: any, cb: () => any) => any;
    onCancel: () => any;
    show: boolean;

    data: any[];
    allShopList: any[];

    allPost: CommonApi.RoleCodeVO[]; //角色列表
    postTypeList: PostItem[]; //岗位大类

    postList: any[];
    storageList: any[];
    form: FormInstance;
    eidt?: boolean;
    readOnly?: boolean;

    // preConditonList: any[];

    abilityList: PartStorageSpace.AbilityPageVO[]; // 能力提升列表;

    foundList: PartStorageSpace.FoundPageVO[]; //款项列表

    preCondition: any[];

    fittingsList: PartStorageSpace.PageVO[];
    accountList: SpecialAccount.AccountInfo[];

  }
  
  export default function setModal(props: Props) {
    const {
      loading,
      onCancel,
      onOk,
      show,
      allShopList,

      postTypeList,

      data,
      allPost,
      postList,
      storageList,
      form,
      eidt,
      readOnly,

      preCondition,

      accountList,
      fittingsList,

      abilityList,

      foundList,

    } = props;
    const [newData, setNewData] = useState<ApprovalProcess.InstanceInfo[]>([]);
    const [deepData, setDeepData] = useState<ApprovalProcess.InstanceInfo[]>([]);
    /** 选择条件配置 */
    const [selectData, setSelectData] = useState<

      { label: string; value: number }[]

    >([]);

    useEffect(() => {
      if (show) {

        if (eidt) {

          /** 编辑回显已经填写条件值 */
          setDeepData([...data]);

          if (preCondition && preCondition.length) {
            const _selectList = preCondition.map((item) => ({
              label: item.flowTriggerDto.name,
              value: item.triggerId,

            }));
            setSelectData(_selectList);
          }

          const conditionList = data.map((item) => item.triggerId);
          form.setFieldsValue({
            ...data[0],
            confList: conditionList,
          });

        } else {

          // 新增

          setNewData(data);

          const tmpSelectList = data.map((item) => ({
            label: item.flowTriggerDto.name,
            value: item.triggerId,
            extral: item,
          }));
          setSelectData(tmpSelectList);

        }

      }

    }, [data]);
  
    /** 保存 */
    function save() {
      if (loading) {
        return;
      }

      if (
        deepData.filter(

          (item) =>
            !item.value ||

            JSON.parse(item.value) == null ||
            JSON.parse(item.value).length == 0
        ).length
      ) {
        message.error("请填写全部条件");
        return;
      }

      const _data = deepData.length > 0 ? deepData : data;

  
      const params = _data.map((item: ApprovalProcess.InstanceInfo) => ({
        approvalConditionId: item.triggerId,
        value: item.value,
      }));
      onOk && onOk(params, hide);
      // setDeepData([]);
    }
  
    function hide() {
      onCancel && onCancel();

      form.resetFields();

      setDeepData([]);

      setNewData([]);

    }
  
    function onChange(
      item: ApprovalProcess.InstanceInfo,
      // value: any,
      Values: any,
      index: number
    ) {

      // idOrCode;

      const newValue = Array.isArray(Values)

        ? Values.map((i) => ({ idOrCode: i.value, name: i.label }))

        : Values;

      const { value, flowTriggerDto } = item;

  
      if ([2, 3, 4, 5, 6, 7, 8].includes(flowTriggerDto.judgeRule)) {
        const _item = { ...item, value: JSON.stringify(newValue) };

        deepData[index] = _item;

  
        setDeepData([...deepData]);
      } else {
        const _item = {
          ...item,
          value: JSON.stringify({
            ...JSON.parse(value || "{}"),
            ...newValue,
          }),
        };

        deepData[index] = _item;
        setDeepData([...deepData]);

      }
    }
  
    /** 选择需要配置的预设条件 */

    const _onChange = (value: any[], option) => {
      if (eidt) {
        let res1 = data.filter((item) => value.find((y) => y === item.triggerId)); //交集
        let res2 = value.filter((x) => !data.find((y) => y.triggerId === x)); //差集

        let res3 = preCondition.filter((x) => {
          return res2.find((y) => y === x.triggerId);
        });

  
        let res = res1.concat(res3);
        setDeepData([...res]);
      } else {
        const tempId = option.map((item) => item.extral.triggerId);

        const tempList = newData.filter((item) =>
          tempId.includes(item.triggerId)

        );
  
        setDeepData([...tempList]);
      }

    };

    return (
      <Modal
        visible={show}
        onCancel={hide}
        onOk={save}

        title={`${eidt ? "编辑" : "添加"}流程`}

        width={500}

        maskClosable={false}
        closable={readOnly}

        okButtonProps={{ disabled: readOnly }}
        cancelButtonProps={{ disabled: readOnly }}
      >

        <Spin tip="保存中" spinning={loading}>
          <Form layout="vertical" form={form} onFinish={save}>
            <Form.Item
              name="name"
              label="流程名称"
              rules={[{ required: true, message: "请输入流程名称" }]}
            >
              <Input placeholder="请输入" maxLength={64} disabled={readOnly} />
            </Form.Item>
            {/* 多选=》选择要配置的预设条件 */}
            <Form.Item

              label="触发条件"

              name="confList"
              rules={[{ required: true, message: "请选择需要配置的条件" }]}
            >
              <Select
                mode="multiple"
                allowClear
                style={{ width: "100%" }}
                placeholder="请选择"
                onChange={_onChange}
                disabled={readOnly}
              >
                {selectData.map((item, index) => (
                  <Option
                    value={item.value}
                    key={item.value}

                    extral={item.extral}
                  >
                    {item.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
  
            {deepData.map((item: ApprovalProcess.InstanceInfo, index: number) => {
              const data = item;

              const { flowTriggerDto, value } = data;
              const originalData = JSON.parse(value || "{}");

              const {

                name,
                unit,
                judgeRule,
                type,
                // options,
              } = flowTriggerDto;
  
              const _maxRule =
                originalData && typeof originalData.max === "number"
                  ? originalData.max
                  : Infinity;
              const _minRule =
                originalData && typeof originalData.min === "number"
                  ? originalData.min
                  : -Infinity;
  

              return (

                <div
                  style={{ marginBottom: judgeRule === 1 ? 75 : 20 }}
                  key={`id_${index}`}
                >

                  <React.Fragment key={`id_${index}`}>
                    <FormItem
                      label={`${index + 1}、${name || ""}(${
                        TriggerAll[judgeRule]
                      })`}
                      style={{ marginBottom: 20 }}
                    >
                      {judgeRule === 1 ? (
                        <div
                          style={{
                            height: 70,
                            width: "100%",
                          }}
                        >
                          <div>
                            <span>下限值(不包含,值为0则包含)：</span>
                            <InputNumber
                              disabled={readOnly}
                              style={{ width: "100%" }}
                              placeholder="请输入"
                              precision={type === TriggerType["数量"] ? 0 : 2}
                              max={_maxRule}
                              value={originalData.min}
                              onChange={(value) =>
                                onChange(
                                  data,
                                  { min: value > _maxRule ? _maxRule : value },
                                  index
                                )
                              }
                            />
                          </div>
                          <div
                            style={{
                              width: "100%",
                              marginTop: 20,
                            }}
                          >
                            <span>上限值(包含)：</span>
                            <InputNumber
                              disabled={readOnly}
                              style={{ width: "100%" }}
                              placeholder="请输入"
                              precision={type === TriggerType["数量"] ? 0 : 2}
                              min={_minRule}
                              value={originalData.max}
                              onChange={(value) =>
                                onChange(
                                  data,
                                  { max: value < _minRule ? _maxRule : value },
                                  index
                                )
                              }
                            />
                          </div>
                        </div>
                      ) : null}
                      {[2, 3, 4, 5, 6].includes(judgeRule) ? (

                        <div>

                          <InputNumber
                            disabled={readOnly}

                            style={{ width: "100%" }}

                            placeholder="请输入"
                            precision={type === TriggerType["数量"] ? 0 : 2}

                            min={_minRule}
                            value={
                              typeof originalData === "number"
                                ? originalData
                                : undefined

                            }

                            onChange={(value) => onChange(data, value, index)}

                          />
                        </div>

                      ) : null}
                      {type === TriggerType["门店"] && (
                        <div>
                          <ShopSelect
                            labelInValue
                            multiple
                            initType={1}

                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []

                            }

                            onChange={(value) => {
                              console.log("value：", value);
                              onChange(data, value, index);
                            }}

                          />

                          {/* <Select

                          disabled={readOnly}
                          optionFilterProp="children"
                          labelInValue
                          value={
                            originalData.length > 0
                              ? originalData.map((i: any) => ({

                                  value: i.idOrCode,

                                  label: i.name,
                                }))
                              : []
                          }
                          mode="multiple"
                          placeholder="请选择门店"
                          onChange={(value) => onChange(data, value, index)}
                        >
                          {allShopList.map((item) => (
                            <Option value={item.id} key={item.id}>
                              {item.name}
                            </Option>
                          ))}

                        </Select> */}

                        </div>
                      )}
                      {type === TriggerType["角色"] && (
                        <div>
                          <Select
                            disabled={readOnly}
                            optionFilterProp="children"
                            labelInValue
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    // idOrCode
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            mode="multiple"
                            // style={{ width: '80%', marginTop: 10 }}
                            placeholder="请选择角色"
                            onChange={(value) => onChange(data, value, index)}
                            showSearch
                          >
                            {allPost.length &&
                              allPost.map((item) => (
                                <Option value={item.roleCode} key={item.roleCode}>
                                  {item.roleName}
                                </Option>
                              ))}
                          </Select>
                        </div>
                      )}
                      {type === TriggerType["岗位"] && (
                        <div>
                          <Select
                            disabled={readOnly}
                            optionFilterProp="children"
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            labelInValue
                            mode="multiple"
                            placeholder="请选择岗位"
                            onChange={(value) => {
                              onChange(data, value, index);
                            }}
                          >
                            {postList.map((item) => (
                              <Option value={item.id} key={item.id}>
                                {item.postName}

                              </Option>
                            ))}

                          </Select>
                        </div>
                      )}
                      {/* 岗位大类 */}
                      {type === TriggerType["岗位大类"] && (
                        <div>
                          <Select
                            disabled={readOnly}
                            optionFilterProp="children"
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            labelInValue
                            mode="multiple"
                            placeholder="请选择岗位大类"
                            onChange={(value) => onChange(data, value, index)}
                          >
                            {postTypeList.map((item) => (
                              <Option value={item.type} key={item.type}>
                                {item.typeName}
                              </Option>
                            ))}
                          </Select>
                        </div>
                      )}
                      {type === TriggerType["车辆区域库"] && (
                        <div>
                          <Select
                            optionFilterProp="children"
                            disabled={readOnly}
                            labelInValue
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            mode="multiple"
                            placeholder="请选择车辆区域库"
                            onChange={(value) => onChange(data, value, index)}
                          >
                            {storageList.map((item) => (
                              <Option value={item.id} key={item.id}>
                                {item.name}
                              </Option>
                            ))}
                          </Select>
                        </div>
                      )}
                      {/* 配件库房 */}
                      {type === TriggerType["配件库房"] && (
                        <div>
                          <Select
                            optionFilterProp="children"
                            disabled={readOnly}
                            labelInValue
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            mode="multiple"
                            placeholder="请选择配件库房"
                            onChange={(value) => onChange(data, value, index)}
                          >
                            {fittingsList.map((item) => (
                              <Option
                                value={item.storageCode}
                                key={item.storageCode}
                              >
                                {item.storageName}
                              </Option>
                            ))}
                          </Select>
                        </div>
                      )}
                      {/* 资金账户 */}
                      {type === TriggerType["资金账户"] && (
                        <div>
                          <Select
                            optionFilterProp="children"
                            disabled={readOnly}
                            labelInValue
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            mode="multiple"
                            placeholder="请选择资金账户"
                            onChange={(value) => onChange(data, value, index)}
                          >
                            {accountList.map((item) => (
                              <Option value={item.id} key={item.id}>
                                {item.name}
                              </Option>
                            ))}
                          </Select>
                        </div>
                      )}

                      {/* 能力提升 */}
                      {type === TriggerType["能力提升业务类型"] && (
                        <div>
                          <Select
                            disabled={readOnly}
                            optionFilterProp="children"
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            labelInValue
                            mode="multiple"
                            placeholder="请选择能力提升业务类型"
                            onChange={(value) => {
                              onChange(data, value, index);
                            }}
                          >
                            {abilityList.map((item) => (
                              <Option value={item.id} key={item.id}>
                                {item.name}
                              </Option>
                            ))}
                          </Select>
                        </div>
                      )}

                      {/* 款项 */}
  
                      {type === TriggerType["款项"] && (
                        <div>
                          <Select
                            disabled={readOnly}
                            optionFilterProp="children"
                            value={
                              originalData.length > 0
                                ? originalData.map((i: any) => ({
                                    value: i.idOrCode,
                                    label: i.name,
                                  }))
                                : []
                            }
                            labelInValue
                            mode="multiple"
                            placeholder="请选择款项类型"
                            onChange={(value) => {
                              onChange(data, value, index);
                            }}
                          >
                            {foundList.map((item) => (
                              <Option value={item.value} key={item.value}>
                                {item.name}
                              </Option>
                            ))}
                          </Select>
                        </div>
                      )}

                    </FormItem>

                  </React.Fragment>
                </div>

              );
            })}
          </Form>
        </Spin>
      </Modal>
    );
  }