@bit-sun/business-component 2.1.22 → 2.1.24

package/src/components/Business/JsonQueryTable/components/FieldsModifyModal.tsx

@@ -0,0 +1,824 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Modal, Input } from 'antd';
+import { Form, request, Table } from 'bssula';
+import { useMount } from 'ahooks';
+import _ from 'lodash';
+import MaintainOptions from '../components/MaintainOptions';
+import Formula from '../components/Formula';
+import { inputTypes } from './../static';
+import { getDictionarySource } from '@/utils/utils';
+import { getDynamicDict } from "./../function";
+
+// @ts-nocheck
+const FieldsModifyModal = (props: any) => {
+  const { onParentOk, mode, inputType, choiceType, valueType, lineDetail } = props;
+  const [maintainOptionsModal, setMaintainOptionsModal]:any = useState({
+    visible: false,
+    onCancel: () =>
+      setMaintainOptionsModal({
+        ...maintainOptionsModal,
+        visible: false,
+      }),
+    onParentOk: () => {},
+  });
+  const record = {
+    ...props.record,
+    ...props.record.info,
+    dictionaryCode_dynamic: props.record.info?.dictionaryCode,
+    defaultValue:
+      props.record.defaultValue && props.record.inputType === 30
+        ? props.record.defaultValue.split(',')
+        : props.record?.defaultValue,
+    showValue: [
+      'createVisibleFlag',
+      'editVisibleFlag',
+      'createEditableFlag',
+    ].filter((item) => props.record[item]),
+    editableStatus:
+      props.record?.editableStatus === ''
+        ? []
+        : props.record?.editableStatus?.split(',') || [],
+  };
+
+  console.log(record,'record')
+  const trueOrFalseSource = [
+    {
+      text: '是',
+      value: true,
+    },
+    {
+      text: '否',
+      value: false,
+    },
+  ];
+  const ref = useRef();
+  useMount(async () => {
+    await setIsShowAndType((prev: any) => {
+      if (record.inputType === 20 || record.inputType === 30) {
+        return {
+          isShow: true,
+          singleOrMultiple: record.inputType,
+          type: record.choiceType,
+        };
+      }
+      return prev;
+    });
+    if(record.dictionaryCode){
+      let source = record.choiceType == 20 ? getDictionarySource(record.dictionaryCode) : record.choiceType == 30 ? await getDynamicDict(record.dictionaryCode) : []
+      // @ts-ignore
+      ref?.current?.setFieldSource('defaultValue', source)
+    }
+
+  });
+  const [isShowAndType, setIsShowAndType] = useState({
+    isShow: false,
+    singleOrMultiple: 20,
+    type: 10,
+  });
+  const [isFieldMappingRequired,setIsFieldMappingRequired] = useState(lineDetail?.moduleType == 1)
+
+  const fieldOfDefaultValue = () => {
+    const { singleOrMultiple, type } = isShowAndType;
+    if (type === 10) {
+      // 自定义
+      return [
+        {
+          name: 'defaultValue',
+          label: '默认值',
+          field: {
+            ...inputTypes[singleOrMultiple][type],
+          },
+          initialSource: Object.keys(record.enumeration || {})?.map(
+            (value: any) => ({
+              text: record?.enumeration[value],
+              value,
+            }),
+          ),
+          dependency: {
+            value: {
+              relates: ['enumeration'],
+              type: ({ form, values, name, relates }: any) => {
+                if (values[0]) {
+                  form?.setFieldSource(name[0], []);
+                  form?.setFieldValue(name[0], undefined);
+                  form?.setFieldSource(
+                    name[0],
+                    Object.keys(values[0]).map((value: any) => ({
+                      text: values[0][value],
+                      value,
+                    })),
+                  );
+                }
+              },
+            },
+          },
+        },
+      ];
+    }
+    if (type === 20 || type === 30) {
+      // 数据字典 或 动态数据字典
+      return [
+        {
+          name: 'defaultValue',
+          label: '默认值',
+          field: {
+            ...inputTypes[singleOrMultiple][type],
+          },
+          dependency: {
+            source: {
+              relates: ['dictionaryCode', 'dictionaryCode_dynamic', 'choiceType'],
+              type: async ({ form, values, name, relates }: any) => {
+                if (values[0]) {
+                  form?.setFieldSource(name[0], []);
+                  form?.setFieldValue(name[0], undefined);
+                  form?.setFieldSource(name[0], getDictionarySource(values[0]));
+                }
+                if(values[1]){
+                  const source = await getDynamicDict(record.dictionaryCode || values[1])
+                  form?.setFieldSource(name[0], []);
+                  form?.setFieldValue(name[0], undefined);
+                  form?.setFieldSource(name[0], source);
+                }
+              },
+            },
+          },
+        },
+      ];
+    }
+    if(type === 330){
+      // 变量
+      return [{
+        name:'defaultValue',
+        label:'默认值',
+        dependency:{
+          value:{
+            relates: ['variable'],
+            type:({name, values, form}: any) => {
+              if(values[0]){
+                form?.setFieldValue(name, undefined)
+                request({
+                  url:`/basic/businessVariable/dict/${values[0]}`,
+                  converter:({data}: any) => {
+                    let source = []
+                    form.setFieldDisabled(name, false)
+                    if(data?.defaultValue?.modeType == 1){
+                      if(typeof data?.defaultValue?.value[0] === 'string'){
+                        source = data?.defaultValue?.value.map((d:any) => ({
+                          text: d,
+                          value: d
+                        }))
+                      }
+                    }else if(data?.defaultValue?.modeType == 2) {
+                      source = [{text: data?.defaultValue?.value, value: data?.defaultValue?.value}]
+                      form.setFieldDisabled(name, true)
+                      form?.setFieldValue(name,singleOrMultiple == 30 ? [data?.defaultValue?.value] : data?.defaultValue?.value)
+                    }
+                    form?.setFieldSource(name, source)
+                  }
+                })
+              }
+            }
+          }
+        },
+        field:{
+          type:'select',
+          props:{
+            allowClear: true,
+            mode: singleOrMultiple == 30 ? 'multiple': 'default',
+          },
+        },
+      }]
+    }
+    return [
+      {
+        name: 'defaultValue',
+        label: '默认值',
+        field: {
+          ...inputTypes[singleOrMultiple][type],
+        },
+      },
+    ];
+  };
+
+  const handleChoiceTypeChange = (val: any) => {
+    // @ts-ignore
+    ref?.current?.setFieldValue('defaultValue', undefined);
+    // @ts-ignore
+    const singleOrMultiple = ref?.current?.getFieldValue('inputType'); // 20-单选， 30多选
+    setIsShowAndType((prev: any) => {
+      if (singleOrMultiple === 20 || singleOrMultiple === 30) {
+        return {
+          isShow: true,
+          singleOrMultiple,
+          type: val,
+        };
+      }
+      return prev;
+    });
+  };
+  const formConfig = {
+    mode,
+    initialValues:
+      mode !== 'create'
+        ? record
+        : {
+            showValue: [
+              'createVisibleFlag',
+              'editVisibleFlag',
+              'createEditableFlag',
+            ],
+          },
+    itemLayout: {
+      cols: 2,
+    },
+    fields: [
+      {
+        name: 'code',
+        label: '字段编号',
+        field: 'input',
+        initialDisabled: true,
+      },
+      {
+        name: 'name',
+        label: '字段名',
+        field: {
+          type: 'input',
+        },
+        rules: [{ required: true }],
+      },
+      // {
+      // 	name:'name',
+      // 	label:'是否显示',
+      // 	field:{
+      // 		type:'select',
+      // 	},
+      // 	initialSource: trueOrFalseSource,
+      // 	rules:[{required: true,}],
+      // },x
+      {
+        name: 'priority',
+        label: '排序',
+        field: {
+          type: 'inputnumber',
+          props: {
+            min: 1,
+            max: Number.MAX_SAFE_INTEGER,
+            precision: 0,
+          },
+        },
+        rules: [{ required: true }],
+      },
+      {
+        name: 'requiredFlag',
+        label: '是否必填',
+        field: {
+          type: 'select',
+        },
+        initialSource: trueOrFalseSource,
+        initialValue: false,
+        rules: [{ required: true }],
+      },
+      // {
+      // 	name:'businessType',
+      // 	label:'校验规则',
+      // 	field:'input',
+      // 	rules:[{required: true,}]
+      // },
+      {
+        name: 'searchableFlag',
+        label: '是否查询项',
+        field: {
+          type: 'select',
+          props: {
+            onChange: (value: any) => {
+              // if(lineDetail?.moduleType == 2) {
+              //   setIsFieldMappingRequired(value)
+              // }
+            }
+          }
+        },
+        rules: [{ required: true }],
+        initialSource: trueOrFalseSource,
+        initialValue: false,
+      },
+      {
+        name: 'sortableFlag',
+        label: '是否允许排序',
+        field: {
+          type: 'select',
+        },
+        initialSource: trueOrFalseSource,
+        rules: [{ required: true }],
+        initialValue: false,
+      },
+      // {
+      // 	name:'multiFlag',
+      // 	label:'是否汇总项',
+      // 	field:{
+      // 		type:'select',
+      // 	},
+      // 	initialSource: trueOrFalseSource,
+      // 	rules:[{required: true,}],
+      // },
+      {
+        name: 'inputType',
+        label: '显示类型',
+        field: {
+          type: 'select',
+          props: {
+            onChange: (val: any) => {
+              setIsShowAndType((prev: any) => {
+                if (val !== 20 && val !== 30) {
+                  return {
+                    ...prev,
+                    isShow: false,
+                  };
+                }
+                return { ...prev };
+              });
+            },
+          },
+        },
+        initialDisabled: mode !== 'create',
+        initialSource: Object.keys(inputType).map((d: any) => ({
+          text: inputType[d],
+          value: Number(d),
+        })),
+        rules: [{ required: true }],
+      },
+      {
+        name: 'scale',
+        label: '精度值',
+        field: {
+          type: 'InputNumber',
+          props: {
+            min: 1,
+            max: Number.MAX_SAFE_INTEGER,
+            precision: 0,
+          },
+        },
+        initialVisible: false,
+        initialValue: 2,
+        dependency: {
+          source: {
+            relates: ['inputType'],
+            type: (ctx: any) => {
+              const { values, form, name } = ctx;
+              if (values[0] === 40) {
+                form.setFieldVisible(name, true);
+                !form.getFieldValue(name) && form?.setFieldValue(name, 2);
+              } else {
+                form.setFieldVisible(name, false);
+              }
+            },
+          },
+        },
+        rules: [{ required: true }],
+      },
+      {
+        name: 'formula',
+        label: '表达式',
+        itemLayout: {
+          cols: 1,
+          span: 24,
+          labelCol: { span: 4 },
+          wrapperCol: { span: 20 },
+        },
+        field: {
+          type: ({ form }:any) => {
+            const setValue = (formulaArray:any) => {
+              debugger;
+              form?.setFieldValue(
+                'formula',
+                formulaArray
+                  .map((item:any) => {
+                    if (
+                      ['+', '-', '*', '/', '(', ')'].indexOf(item.value) == -1
+                    ) {
+                      return `{${item.value}}`;
+                    }
+                    return item.value;
+                  })
+                  .join(''),
+              );
+            };
+
+            const formula = form.getFieldValue('formula');
+
+            return (
+              <div style={{ display: 'flex', width: '868px' }}>
+                <Formula
+                  formula={formula}
+                  setValue={setValue}
+                  record={{ ...record }}
+                />
+              </div>
+            );
+          },
+        },
+        initialDisabled: mode !== 'create',
+        initialVisible: false,
+        dependency: {
+          source: {
+            relates: ['inputType'],
+            type: (ctx: any) => {
+              const { values, form, name } = ctx;
+              if (values[0] === 40) {
+                form.setFieldVisible(name, true);
+              } else {
+                form.setFieldVisible(name, false);
+              }
+            },
+          },
+        },
+        rules: [{ required: true }],
+      },
+      {
+        name: 'valueType',
+        label: '字段类型',
+        field: {
+          type: 'select',
+        },
+        initialDisabled: mode !== 'create',
+        initialSource: Object.keys(valueType).map((d: any) => ({
+          text: valueType[d],
+          value: Number(d),
+        })),
+        dependency: {
+          source: {
+            relates: ['inputType'],
+            type: (ctx: any) => {
+              const { values, form, name } = ctx;
+              if (values[0] === 40) {
+                form?.setFieldValue(name, null);
+                form.setFieldVisible(name, false);
+              }
+              if (mode === 'create') {
+                if (values[0] && values[0] === 10) {
+                  form?.setFieldValue(name, null);
+                  form.setFieldDisabled(name, false);
+                } else {
+                  form?.setFieldValue(name, 10);
+                  form.setFieldDisabled(name, true);
+                }
+              }
+            },
+          },
+        },
+        rules: [{ required: true }],
+      },
+      {
+        name: 'showValue',
+        label: '显示属性',
+        field: {
+          type: 'checkboxgroup',
+        },
+        initialValue: [
+          'createVisibleFlag',
+          'editVisibleFlag',
+          'createEditableFlag',
+        ],
+        initialSource: [
+          { text: '新增时显示', value: 'createVisibleFlag' },
+          { text: '编辑时显示', value: 'editVisibleFlag' },
+          { text: '新增时编辑', value: 'createEditableFlag' },
+        ],
+      },
+      {
+        name: 'choiceType',
+        label: '选项集',
+        field: {
+          type: 'select',
+          props: {
+            onChange: handleChoiceTypeChange,
+            showSearch: true,
+            filterOption: (input: any, option: any) =>
+              option.props.children
+                .toLowerCase()
+                .indexOf(input.toLowerCase()) >= 0,
+          },
+        },
+        initialVisible: false,
+        initialDisabled: mode !== 'create',
+        initialSource: Object.keys(choiceType).map((d: any) => ({
+          text: choiceType[d],
+          value: Number(d),
+        })),
+        dependencies: ['inputType'],
+        dependency: {
+          source: {
+            relates: ['inputType'],
+            type: ({ form, name, values }: any) => {
+              const flag = values[0] === 20 || values[0] === 30;
+              form.setFieldVisible(name, flag);
+            },
+          },
+        },
+        rules: [
+          ({ getFieldValue }: any) => {
+            const value = getFieldValue('inputType');
+            const flag = value === 20 || value === 30;
+            return {
+              required: flag,
+            };
+          },
+        ],
+      },
+      {
+        name: 'dictionaryCode',
+        label: '数据字典',
+        field: {
+          type: 'bs-searchSelect',
+          props: {
+            requestConfig: {
+              url: `/basic/bscDict/getBscDictList`,
+              filter: 'qp-name-like',
+              mappingTextField: 'name',
+              mappingValueField: 'code',
+            },
+          },
+        },
+        initialVisible: false,
+        dependency: {
+          source: {
+            relates: ['choiceType', 'inputType'],
+            type: ({ values, name, form }: any) => {
+              if (values[1] === 40) {
+                form?.setFieldValue(name, null);
+                form.setFieldVisible(name, false);
+              }
+
+              if (values[0] === 20) {
+                form.setFieldVisible(name, true);
+              } else {
+                form.setFieldVisible(name, false);
+              }
+            },
+          },
+        },
+      },
+      {
+        name: 'dictionaryCode_dynamic',
+        label: '数据字典',
+        field: {
+          type: 'select',
+        },
+        initialVisible: false,
+        dependency: {
+          source: {
+            relates: ['choiceType', 'inputType'],
+            type: async ({ values, name, form }: any) => {
+              if (values[1] === 40) {
+                form?.setFieldValue(name, null);
+                form.setFieldVisible(name, false);
+              }
+
+              if (values[0] === 30) {
+                const source = await request({
+                  url:'/basic/dictDynamicItem/queryList',
+                  converter:({data}: any) => {
+                    return data?.map((d:any) => ({
+                      text: d.dictCode,
+                      value: d.dictCode,
+                    }))
+                  }
+                })
+                form?.setFieldSource(name, source)
+                form.setFieldVisible(name, true);
+              } else {
+                form.setFieldVisible(name, false);
+              }
+            },
+          },
+        },
+      },
+      {
+        name: 'enumeration',
+        label: '维护自定义选项',
+        field: {
+          type: ({ form }: any) => {
+            return (
+              <Button
+                type={'link'}
+                onClick={() => {
+                  setMaintainOptionsModal({
+                    ...maintainOptionsModal,
+                    visible: true,
+                    record: {
+                      choiceInfo: form.getFieldValue('enumeration'),
+                    },
+                    onParentOk: (rows:any) => {
+                      const obj:any = {};
+                      rows.forEach((d: any) => {
+                        obj[d.value] = d.text;
+                      });
+                      form?.setFieldValue('enumeration', obj);
+                      maintainOptionsModal.onCancel();
+                    },
+                  });
+                }}
+              >
+                点击维护自定义选项
+              </Button>
+            );
+          },
+        },
+        initialVisible: false,
+        dependency: {
+          source: {
+            relates: ['choiceType'],
+            type: ({ values, name, form }: any) => {
+              if (values[0] === 10) {
+                form.setFieldVisible(name, true);
+              } else {
+                form.setFieldVisible(name, false);
+              }
+            },
+          },
+        },
+      },
+      {
+        name: 'variable',
+        label: '变量值',
+        initialVisible: false,
+        dependency:{
+          visible:{
+            relates:['choiceType'],
+            type:({name, values, form}: any) => {
+              if(values[0] == 330){
+                form.setFieldVisible(name, true)
+              }else{
+                form.setFieldVisible(name, false)
+              }
+            }
+          }
+        },
+        field:{
+          type:'select',
+          props:{
+            allowClear: true,
+            showSearch: true,
+            filterOption: (input: string, option: { props: { children: string } }) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+          }
+        },
+        remoteSource: {
+          url:'/basic/businessVariable/listNoPage',
+          params:{
+            'qp-businessType-eq': record.businessType,
+          },
+          converter:({data}: any) => {
+            return data?.map((d:any) => ({
+              text: d.name,
+              value: d.code
+            })) || []
+          },
+        },
+      },
+      ...(isShowAndType.isShow ? fieldOfDefaultValue() : []),
+      {
+        name: 'editableStatus',
+        label: '允许编辑状态',
+        field: {
+          type: 'select',
+          props: {
+            mode: 'multiple',
+          },
+        },
+        dependency: {
+          source: {
+            relates: ['inputType'],
+            type: (ctx: any) => {
+              const { values, form, name } = ctx;
+              if (values[0] === 40) {
+                form?.setFieldValue(name, null);
+                form.setFieldVisible(name, false);
+              } else {
+                form.setFieldVisible(name, true);
+              }
+            },
+          },
+        },
+        remoteSource: {
+          url: `/basic/flow/businessStatus/listNoPage`,
+          params: {
+            'qp-businessType-eq': record.businessType,
+            'qp-status-eq': 1,
+          },
+          converter: ({ data }: any) => {
+            return (
+              data?.map((d: any) => ({
+                text: d.name,
+                value: d.code?.toString(),
+              })) || []
+            );
+          },
+        },
+      },
+      {
+        name: 'fieldMapping',
+        label:'关联字段',
+        initialVisible: lineDetail?.moduleType == 1 || lineDetail?.moduleType == 2,
+        initialDisabled: lineDetail?.moduleType == 2,
+        rules:[{required: isFieldMappingRequired}],
+        field:{
+          type:'select',
+          props:{
+            allowClear: true,
+          },
+        },
+        ...((lineDetail?.moduleRelationId) ? {
+          remoteSource:{
+            url: lineDetail.moduleType == 1 ? `/basic/planModelField/listNoPage?qp-modelCode-eq=${lineDetail?.moduleRelationId}` : `/basic/flow/businessField/metaFieldMapping?metaEntityCode=${lineDetail?.moduleRelationId}&fieldMapping=${record?.fieldMapping}`,
+            method:'get',
+            converter:({data}: any) => {
+              if(lineDetail.moduleType == 1){
+                return data?.map((d:any) => ({
+                  text: d.fieldName,
+                  value: d.fieldCode,
+                })) || []
+              }
+              if(lineDetail.moduleType == 2){
+                return data?.map((d:any) =>({
+                  text: d.name,
+                  value: d.code
+                })) || []
+              }
+              return []
+            }
+          }
+        } : {}),
+      }
+    ],
+  };
+
+  return (
+    <Modal
+      {...props}
+      width={900}
+      maskClosable={false}
+      onOk={async () => {
+        // @ts-ignore
+        const res = await ref?.current?.validateFields();
+        res.editableStatus = res.editableStatus?.join(',');
+        res.fieldGroup = record.fieldGroup;
+        res.businessType = record.businessType;
+        res.info = {
+          enumeration: res.enumeration,
+          dictionaryCode: res.dictionaryCode || res?.['dictionaryCode_dynamic'],
+          formula: res.formula,
+          scale: res.scale,
+          variable: res.variable,
+        };
+
+        res.createVisibleFlag = res.showValue.indexOf('createVisibleFlag') >= 0;
+        res.editVisibleFlag = res.showValue.indexOf('editVisibleFlag') >= 0;
+        res.createEditableFlag =
+          res.showValue.indexOf('createEditableFlag') >= 0;
+
+        if (res.inputType === 40) {
+          res.valueType = 22;
+        }
+        // 把数组处理成文本
+        if (res.inputType === 30) {
+          if (res.defaultValue) {
+            res.defaultValue = res.defaultValue?.join(',');
+          }
+        }
+
+        res.fieldMapping = res.fieldMapping || ''
+
+        delete res.formula;
+        delete res.showValue;
+
+        if (mode === 'create') {
+          request({
+            url: `/basic/flow/businessField`,
+            method: 'POST',
+            params: res,
+            successMessage: '创建成功！',
+            converter: () => {
+              onParentOk();
+            },
+          });
+          return;
+        }
+        request({
+          url: `/basic/flow/businessField/${record.id}`,
+          method: 'PATCH',
+          params: res,
+          successMessage: '修改成功！',
+          converter: () => {
+            onParentOk();
+          },
+        });
+      }}
+    >
+      <Form {...formConfig} ref={ref} />
+      {maintainOptionsModal.visible && (
+        <MaintainOptions {...maintainOptionsModal} />
+      )}
+    </Modal>
+  );
+};
+
+export default FieldsModifyModal;