Fieldmanage.jsx

import React, { useState, useReducer, useRef, memo } from "react";
import { Card, Button } from "antd";
import { useRequest } from "umi";
import { doFetch } from "@/utils/doFetch";
import getPrem from "@/utils/getPrem"; //权限判断fn
import Tableform from "@/components/Tableform";
import DrawInitForm from "@/components/DrawInitForm";
import {
  paFormConditionSelect,
  queryConValueSelect,
} from "@/services/platform";
import defaultFields from "./fields";
const tabList = [
    {
      key: "tab1",
      tab: <span style={{ fontSize: 14 }}>公共字段</span>,
    },
    {
      key: "tab2",
      tab: <span style={{ fontSize: 14 }}>条件字段</span>,
    },
  ],
  initState = {
    vs: false,
    fields: {},
    iftype: {},
    curitem: {},
    tabKey: "tab1",
    formCharId: "",
    expandedRowKeys: [],
  };
function reducer(state, action) {
  let { type } = action,
    newState = {};
  switch (type) {
    case "add":
      newState = {
        ...state,
        vs: true,
        iftype: {
          title: action.title,
          val: type,
        },
        fields: { ...action.fields },
      };
      break;
    case "addcustomFields":
      newState = {
        ...state,
        vs: true,
        iftype: {
          title: action.title,
          val: type,
        },
        fields: { ...action.fields },
        curitem: action.curitem,
      };
      break;
    case "condition": //新增条件
      newState = {
        ...state,
        vs: true,
        iftype: {
          title: action.title,
          val: type,
        },
        fields: { ...action.fields },
      };
      break;
    case "editCondition": //编辑条件
      newState = {
        ...state,
        vs: true,
        iftype: {
          title: action.title,
          val: type,
        },
        fields: { ...action.fields },
        curitem: action.curitem,
      };
      break;
    case "edit":
      newState = {
        ...state,
        vs: true,
        iftype: {
          title: action.title,
          val: type,
        },
        fields: { ...action.fields },
        curitem: action.curitem,
      };
      break;
    case "changeTab":
      newState = {
        ...state,
        tabKey: action.tabKey,
        expandedRowKeys: [],
      };
      break;
    case "changeFormCharId":
      newState = {
        ...state,
        formCharId: action.formCharId,
        expandedRowKeys: action.expandedRowKeys,
      };
      break;
    case "close":
      newState = {
        ...state,
        vs: false,
        fields: {},
        iftype: {},
        curitem: {},
      };
      break;
  }

  return newState;
}

const ExpandedRowRender = memo(
  (props) => {
    const { checkedNodeKey, formCharId, expanded, tableRef, columns } = props;
    return (
      <div style={{ minHeight: 200 }}>
        {expanded && (
          <Tableform
            columns={columns}
            path="/ngic-base-business/paFormField/queryList"
            actionRef={tableRef}
            extraparams={{
              fieldType: 2,
              formId: checkedNodeKey,
              formCharId: formCharId,
            }}
            bordered={false}
          ></Tableform>
        )}
      </div>
    );
  },
  (prev, next) => {
    if (prev.formCharId == next.formCharId) {
      return true;
    } else {
      return false;
    }
  }
);

const Fieldmanage = (props) => {
  let actionRef = useRef(),
    ChildRef = useRef();
  function reload() {
    actionRef?.current?.reload();
  }
  function reloadChildren() {
    ChildRef?.current?.reload();
    dispatch({ type: "close" });
  }
  const [state, dispatch] = useReducer(reducer, initState),
    { vs, fields, iftype, curitem, tabKey, formCharId, expandedRowKeys } =
      state,
    { checkedNode } = props,
    columns = [
      {
        title: "自定义字段名称",
        dataIndex: "fieldName",
        key: "fieldName",
        search: false,
      },
      {
        title: "自定义字段属性",
        dataIndex: "fieldCharName",
        key: "fieldCharName",
        search: false,
      },
      {
        title: "选项内容",
        dataIndex: "fieldCharValue",
        key: "fieldCharValue",
        search: false,
      },
      {
        title: "操作",
        dataIndex: "option_dataindex",
        key: "option_dataindex",
        valueType: "option",
        width: 150,
        render: (text, row, _, action) => extraAction(text, row, _, action),
      },
    ],
    columnss = [
      {
        title: "条件字段",
        dataIndex: "fieldCondName",
        key: "fieldCondName",
        render: (_, row) => {
          return (
            <span>
              {row.fieldCondName}={row.optCondName}
            </span>
          );
        },
        search: false,
      },
      {
        title: "自定义字段名称",
        dataIndex: "fieidNames",
        key: "fieidNames",
        search: false,
      },
      {
        title: "操作",
        dataIndex: "option_dataindex",
        key: "option_dataindex",
        valueType: "option",
        width: 215,
        render: (text, row, _, action) =>
          extraAction(text, row, _, action, "tab2"),
      },
    ],
    { run, loading } = useRequest(doFetch, {
      manual: true,
      formatResult: (res) => res,
      onSuccess: (result, params) => {
        if (result.code == "0000") {
          reload();
          reloadChildren();
        }
      },
    }),
    conditionFields = {
      formConditionId: {
        value: null,
        type: "select",
        title: "条件字段",
        name: ["formConditionId"],
        required: true,
        options: {
          database: paFormConditionSelect,
          params: { formId: checkedNode?.key },
        },
        linked: true,
      },
      optCondKey: {
        value: null,
        type: "select",
        title: "字段属性值",
        name: ["optCondKey"],
        required: true,
        belinked: {
          options: {
            database: queryConValueSelect,
            params: {
              formId: checkedNode?.key,
              formConditionId: "linked",
            },
          },
        },
      },
    };

  function extraAction(text, record, _, action, types) {
    return [
      types == "tab2" &&
        getPrem("sysDepartment_save", action, "新增", () => {
          for (let i in defaultFields) {
            defaultFields[i].value = null;
          }
          let title = "新增自定义字段";
          dispatch({
            type: "addcustomFields",
            fields: defaultFields,
            curitem: record,
            title,
          });
        }),
      getPrem("sysDepartment_save", action, "修改", () => {
        let title;
        if (tabKey == "tab1") {
          for (let i in defaultFields) {
            defaultFields[i].value = record[i];
          }
          title = "修改公共字段";
          dispatch({
            type: "edit",
            fields: defaultFields,
            curitem: record,
            title,
          });
        } else {
          if (record.formCharId) {
            for (let i in defaultFields) {
              defaultFields[i].value = record[i];
            }
            title = "修改自定义字段";
            dispatch({
              type: "edit",
              fields: defaultFields,
              curitem: record,
              title,
            });
          } else {
            for (let i in conditionFields) {
              conditionFields[i].value = record[i];
            }
            title = "修改条件字段";
            dispatch({
              type: "editCondition",
              fields: conditionFields,
              curitem: record,
              title,
            });
          }
        }
      }),
      getPrem("sysDepartment_deleteById", action, "删除", null, {
        title:
          tabKey == "tab1"
            ? "确认删除该公共字段？"
            : record.formCharId
            ? "确认删除该自定义字段？"
            : "确认删除该条件字段？",
        onConfirm: () => {
          run({
            url:
              tabKey == "tab1" || record.formCharId
                ? "/ngic-base-business/paFormField/deleteById"
                : "/ngic-base-business/paFormChar/deleteById",
            params: { id: record.id },
          });
        },
      }),
    ];
  }
  let saveData = (values, fn) => {
    let newfields = JSON.parse(JSON.stringify(values));
    //新增&修改
    let difrid =
      iftype.val == "edit" || iftype.val == "editCondition"
        ? { id: curitem.id }
        : {};
    let params, url;
    if (tabKey == "tab1") {
      params =
        iftype.val == "add"
          ? {
              ...newfields,
              formId: checkedNode?.key,
              fieldType: 1,
            }
          : {
              ...newfields,
              ...difrid,
            };
      url = "/ngic-base-business/paFormField/save";
    } else {
      if (iftype.val == "condition") {
        params = {
          ...newfields,
          formId: checkedNode?.key,
        };
        url = "/ngic-base-business/paFormChar/save";
      } else if (iftype.val == "editCondition") {
        params = {
          ...newfields,
          formId: checkedNode?.key,
          ...difrid,
        };
        url = "/ngic-base-business/paFormChar/save";
      } else if (iftype.val == "addcustomFields") {
        params = {
          ...newfields,
          formId: checkedNode?.key,
          fieldType: 2,
          formCharId: curitem.id,
        };
        url = "/ngic-base-business/paFormField/save";
      } else {
        params = {
          ...newfields,
          ...difrid,
        };
        url = "/ngic-base-business/paFormField/save";
      }
    }
    run({ url, params });
  };
  return (
    <div>
      <Card
        tabList={tabList}
        activeTabKey={tabKey}
        onTabChange={(key) => {
          dispatch({ type: "changeTab", tabKey: key });
        }}
        bordered={false}
        tabBarExtraContent={
          <Button
            onClick={() => {
              let title;
              if (tabKey == "tab1") {
                for (let i in defaultFields) {
                  defaultFields[i].value = null;
                }
                title = "新增公共字段";
                dispatch({ type: "add", fields: defaultFields, title });
              } else {
                for (let i in conditionFields) {
                  conditionFields[i].value = null;
                }
                title = "新增条件字段";
                dispatch({ type: "condition", fields: conditionFields, title });
              }
            }}
            disabled={
              !(checkedNode?.key && getPrem("bmNumberRule_save", "ifs"))
            }
            type="primary"
          >
            新增
          </Button>
        }
      >
        {tabKey == "tab1" && (
          <Tableform
            columns={columns}
            path="/ngic-base-business/paFormField/queryList"
            actionRef={actionRef}
            extraparams={{ fieldType: 1, formId: checkedNode?.key }}
            bordered={false}
          ></Tableform>
        )}
        {tabKey == "tab2" && (
          <Tableform
            columns={columnss}
            path="/ngic-base-business/paFormChar/queryList"
            actionRef={actionRef}
            extraparams={{ formId: checkedNode?.key }}
            expandable={{
              expandedRowRender: (val) => {
                return (
                  <ExpandedRowRender
                    columns={columns}
                    tableRef={ChildRef}
                    reloadChildren={reloadChildren}
                    checkedNodeKey={checkedNode?.key}
                    formCharId={formCharId}
                    expanded={val.id == formCharId ? true : false}
                  />
                );
              },
              expandedRowKeys,
            }}
            bordered={false}
            onExpand={(expanded, record) => {
              if (expanded) {
                dispatch({
                  type: "changeFormCharId",
                  formCharId: record.id,
                  expandedRowKeys: [record.id],
                });
              } else {
                dispatch({
                  type: "changeFormCharId",
                  formCharId: record.id,
                  expandedRowKeys: [],
                });
              }
            }}
          ></Tableform>
        )}
      </Card>
      <DrawInitForm
        title={iftype.title}
        visible={vs}
        onClose={() => dispatch({ type: "close" })}
        footer={false}
        destroyOnClose={true}
        fields={fields}
        submitData={(values) => {
          saveData(values);
        }}
        onChange={(changedValues, allValues) => {
          //联动操作
        }}
        submitting={loading || !vs}
        width={"60%"}
      >
        {(iftype.val == "edit" || iftype.val == "editCondition") && (
          <div style={{ color: "#f50", marginBottom: 20 }}>
            <div>修改条件字段注意事项：</div>
            <div>
              1. 修改条件字段中任一属性值内容提交后，仅新增该表单时才生效；
            </div>
            <div>
              2.
              修改前添加的表单数据（如：物料），查看与编辑时仍显示修改前信息，若需应用新的条件，需新增该表单数据；
            </div>
            <div>
              修改条件字段后可能会影响到历史数据，为确保数据准确性，请谨慎操作！
            </div>
          </div>
        )}
      </DrawInitForm>
    </div>
  );
};
export default Fieldmanage;