import {
Form,
Input,
DatePicker,
TimePicker,
Select,
Row,
Col,
InputNumber,
Upload,
message,
Radio,
TreeSelect,
Button,
AutoComplete,
Image,
Cascader,
ConfigProvider,
Rate,
} from "antd";
import moment from "moment";
import React, { useEffect, useMemo, useState } from "react";
import { LoadingOutlined, UploadOutlined } from "@ant-design/icons";
import { PlusOutlined } from "@ant-design/icons";
import EditTable from "../EditTable";
import CheckTable from "../CheckTable";
import Editor from "../Editor";
import mockfile from "./mockfile.js";
import zhCN from "antd/lib/locale/zh_CN";
import Diyrule from "../Diyrule";
moment.locale("zh-cn");
const { TreeNode } = TreeSelect;
const { RangePicker } = DatePicker;
let { Option } = Select;
let loop = (data, title, key, children) =>
data &&
data?.length > 0 &&
data?.map((item) => {
let defaulttitle = title ? title : "title",
defaultkey = key ? key : "key",
defaultchildren = children ? children : "children";
const titles = {item[defaulttitle]};
if (item[defaultchildren]) {
return (
{loop(item[defaultchildren])}
);
} else {
return (
);
}
});
function filter(inputValue, path) {
return path.some(
(option) =>
option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
);
}
function formartData(item, val) {
let formartValue = val;
if (item.type == "upload") {
let stepval = val ? (Array.isArray(val) ? val : val.fileList) : [];
formartValue = stepval.map((it) => {
if (it.response) {
return it.response.data.dataList[0];
} else {
return it ? it : null;
}
});
// if (item.limit == 1) {
// formartValue = formartValue[0] ? formartValue[0] : '';
// }
} else if (item.type == "datepicker") {
formartValue = val
? val.format(item.format ? item.format : "YYYY-MM-DD")
: null;
} else if (item.type == "timepicker") {
formartValue = val
? val.format(item.format ? item.format : "HH:mm:ss")
: null;
} else if (item.type == "daterange") {
formartValue =
val && Array.isArray(val)
? val.map((it) =>
it
? moment(it).format(item.format ? item.format : "YYYY-MM-DD")
: null
)
: [];
} else if (item.type == "select" || item.type == "treeselect") {
formartValue = val == 0 || val ? val : item.multiple ? [] : "";
} else if (item.type == "input" || !item.type) {
formartValue = val ? val?.replace(/^\s+|\s+$/g, "") : "";
}
return formartValue;
}
let InitForm = ({
fields,
onChange,
submitting,
submitData,
actions,
col,
mode,
formRef,
style,
reset,
row,
rowCol,
autoSubmit,
bottomNode,
topNode,
}) => {
let token = localStorage.getItem("TOKENY")
? localStorage.getItem("TOKENY")
: "b60ef0c40b7f1b7e63c2b24b127988d4";
let [Dom, cDom] = useState([]),
[cururl, setcururl] = useState(""),
[loading, sload] = useState(false),
[form] = Form.useForm(),
[filelist, cfilelist] = useState({}),
[link, clink] = useState({}),
[belink, cbelink] = useState({}),
[visible, setVisible] = useState(false),
[optiondom, cdom] = useState({}),
[len, clen] = useState(0),
[ind, cind] = useState(0);
form = formRef ? formRef : form;
useEffect(() => {
let Doms = [],
klink = {},
belinked = {},
defaultfiles = {},
allenin = 0;
for (let i in fields) {
let record = fields[i];
if (record.defaultValueIndex || record.defaultValueIndex === 0) {
allenin++;
}
//获取linked key
if (record.linked === true) {
klink[i] = record.value;
}
//获取belinked key
if (record.belinked) {
belinked[i] = record.belinked;
}
//初始化filelist
if (record.type === "upload") {
let curfileList =
record.value && record.value.length > 0
? mockfile(
Array.isArray(record.value) ? record.value : [record.value]
)
: [];
//default value
defaultfiles[i] = curfileList
? curfileList.fileList
? curfileList.fileList
: []
: [];
//formart value
record.value = curfileList;
} else if (record.type === "datepicker") {
record.value = record.value ? moment(record.value) : undefined;
} else if (record.type === "timepicker") {
record.value = record.value
? moment(record.value, record?.formart ?? "HH:mm:ss")
: undefined;
} else if (record.type === "daterange") {
record.value =
record.value && Array.isArray(record.value)
? record.value.map((it) => it && moment(it))
: [];
}
Doms.push(record);
}
clink(klink);
cbelink(belinked);
cfilelist(defaultfiles);
cDom(Doms);
clen(allenin);
}, [fields]);
useEffect(() => {
//联动数据
for (let i in fields) {
let extraprops = getSelectLinked(fields[i]);
let { options } = extraprops;
getOptions(options, fields[i]);
}
}, [link]);
const getCol = (itemcol) => {
if (itemcol) {
return itemcol;
} else {
return col ? col : { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 };
}
};
//表格 联动声明
const getTableLinked = (item) => {
let extraparams = {},
oldparams = item.extraparams;
if (oldparams && Object.keys(oldparams).length > 0) {
for (let i in oldparams) {
if (oldparams[i] == "linked") {
extraparams = {
...extraparams,
[i]: form.getFieldValue(i), //获取联动数据
};
} else {
extraparams = {
...extraparams,
[i]: oldparams[i], //获取props传入数据
};
}
}
}
return extraparams;
};
//下拉框联动声明
const getSelectLinked = (item) => {
let names = item.belinked && Object.keys(item.belinked),
hides = item.hides,
options = item.options;
if (names && names.length > 0) {
if (item.belinked.hides && item.belinked.hides.length > 0) {
let requiredlist = item.belinked.hides
.filter((it) => {
return it.required;
})
.map((it) => {
if (it.equalvalue) {
let equalvalue =
it.equalvalue &&
Array.isArray(it.equalvalue) &&
it.equalvalue.length > 0
? it.equalvalue.indexOf(link[it.name]) != -1
: link[it.name] == it.equalvalue;
return equalvalue;
} else if (it.unequalvalue) {
let unequalvalue =
it.unequalvalue &&
Array.isArray(it.unequalvalue) &&
it.unequalvalue.length > 0
? it.unequalvalue.indexOf(link[it.name]) == -1
: link[it.name] != it.unequalvalue;
return unequalvalue;
} else {
return true;
}
});
let unrequiredlist = item.belinked.hides
.filter((it) => {
return !it.required;
})
.map((it) => {
if (it.equalvalue) {
let equalvalue =
it.equalvalue &&
Array.isArray(it.equalvalue) &&
it.equalvalue.length > 0
? it.equalvalue.indexOf(link[it.name]) != -1
: link[it.name] == it.equalvalue;
return equalvalue;
} else if (it.unequalvalue) {
let unequalvalue =
it.unequalvalue &&
Array.isArray(it.unequalvalue) &&
it.unequalvalue.length > 0
? it.unequalvalue.indexOf(link[it.name]) == -1
: link[it.name] != it.unequalvalue;
return unequalvalue;
} else {
return true;
}
});
let rq = requiredlist.some((it) => it == true);
let unrq = unrequiredlist.some((it) => it == true);
hides = hides ? hides : rq || unrq;
}
if (!Array.isArray(item.belinked.options) && item.belinked.options) {
let { database, params } = item.belinked.options,
newparams = {};
//获取传参联动的值
for (let i in params) {
if (params[i] == "linked") {
newparams[i] = form.getFieldValue(i);
} else {
newparams[i] = params[i];
}
}
if (Array.isArray(database)) {
options = database;
} else {
options = {
database,
params: newparams,
};
}
}
}
return {
hides,
options,
};
};
//格式化数据提交
function formartSubmit(values) {
let newvalue = { ...values };
for (let i in fields) {
newvalue[i] = formartData(fields[i], values[i]);
}
submitData(newvalue, () => {
form.resetFields();
});
}
useEffect(() => {
if (autoSubmit && len == ind) {
setTimeout(() => {
form
.validateFields()
.then((values) => {
formartSubmit(values);
})
.catch((error) => {});
}, 200);
}
}, [len, ind]);
const submitBtn = (
);
let getOptions = async (options, item) => {
let curkey = item.name[0];
if (Array.isArray(options)) {
if (JSON.stringify(optiondom[curkey]) !== JSON.stringify(options)) {
cdom((optiondom) => {
return {
...optiondom,
[curkey]: options,
};
});
}
} else if (options?.database) {
let { database, params } = options ? options : {};
let res = await database(params),
dataList = [];
if (res.code == "0000") {
if (item.type == "treeselect") {
dataList = res?.data.dataList;
} else {
dataList = res?.data?.dataList?.map((it, i) => {
let label = item.formart ? item.formart[1] : "label",
value = item.formart ? item.formart[0] : "value";
if (
(item?.defaultValueIndex || item?.defaultValueIndex === 0) &&
i == item?.defaultValueIndex
) {
form.setFieldsValue({
[curkey]: it[value],
});
cind((ind) => {
ind++;
return ind;
});
}
return item.type == "cascader"
? {
label: it[label],
value: it[value],
isLeaf: it.isHaveChild ? false : true,
}
: {
label: it[label],
value: it[value],
};
});
}
if (item.type == "cascader" && item.value && item.value.length) {
dataList = res?.data.dataList;
let valueArr = item.value,
valueArrLength = item.value.length,
valueObj = {};
let all = async () => {
for (let j = 0; j < valueArrLength; j++) {
let isMultiple = item.otherOptions[j]?.multiple,
key = item.otherOptions[j]?.paramsKey,
dataBase = item.otherOptions[j]?.database,
newData = [],
val = valueArr[j];
let res = dataBase
? await dataBase(key ? { [key]: isMultiple ? [val] : val } : {})
: null;
if (res?.code == "0000") {
newData = res?.data?.dataList?.map((it) => {
return {
label: it.label,
value: it.value,
isLeaf: it.isHaveChild ? false : true,
};
});
valueObj[val] = { newData };
}
}
return { valueObj };
};
all().then((res) => {
const { valueObj } = res;
for (let i in valueObj) {
loopBack(dataList, i, valueObj[i].newData);
}
if (
dataList.length == 0 &&
Object.values(params).some((it) => !it)
) {
} else {
cdom((optiondom) => {
return {
...optiondom,
[curkey]: JSON.parse(JSON.stringify(dataList)),
};
});
}
});
}
}
if (dataList.length == 0 && Object.values(params).some((it) => !it)) {
} else {
if (
item.type != "cascader" ||
(item.type == "cascader" && !item.value)
) {
cdom((optiondom) => {
return {
...optiondom,
[curkey]: dataList,
};
});
}
}
}
};
//获取级联下一级
let getChildren = async (index, item, targetOption) => {
let isMultiple = item.otherOptions[index]?.multiple,
key = item.otherOptions[index]?.paramsKey,
dataBase = item.otherOptions[index]?.database,
newData = [],
val = targetOption.value;
let res = dataBase
? await dataBase(key ? { [key]: isMultiple ? [val] : val } : {})
: null;
if (res?.code == "0000") {
targetOption.loading = false;
newData = res?.data?.dataList?.map((it) => {
return {
label: it.label,
value: it.value,
isLeaf: it.isHaveChild ? false : true,
};
});
targetOption.children = [...newData];
cdom((optiondom) => {
return JSON.parse(JSON.stringify(optiondom));
});
}
};
//递归级联回显
const loopBack = (data, val, children) => {
data &&
data?.length > 0 &&
data?.map((it) => {
if (it.value == val) {
(it.children = JSON.parse(JSON.stringify(children))),
(it.loading = false);
it.isLeaf = children ? false : true;
} else if (it.children) {
loopBack(it.children, val, children);
}
});
};
return (
{
if (visible) {
setVisible(false);
}
},
}}
>
);
};
export default InitForm;