Skip to content

W
wms
Commit e822f7f8 authored by krysent's avatar krysent
Browse files
Options

标签

parent 1c49e391
Hide whitespace changes
Inline Side-by-side
Showing with 1965 additions and 65 deletions
src/components/NewInitForm/EditTable/index.jsx 0 → 100644
View file @ e822f7f8
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useRef, useState, memo, useMemo } from 'react';
import { EditableProTable } from '@ant-design/pro-components';
import { Tooltip } from 'antd';
import { doFetch } from '@/utils/doFetch';
const EditTable = (props) => {
const {
actionRef, //表格动作
formRef, //表单Ref
rowKey, // key
columns = [], //columns
style, //style
path, //接口地址
extraparams, //额外参数
pageSize, //修改默认pageSize
pagination, //分页设置
x, //横向滚动
refreshDep, //依赖刷新 （已废弃）
getDefaultSelected, //存在默认选中向上返回选中值
dataSource,
} = props;
const actionRefs = actionRef ?? useRef(),
formRefs = formRef ?? useRef(),
ifspagination = pagination == 'false' || pagination === false,
[size, setsize] = useState('small');
//调用接口
const request = async (params, sort, filter) => {
if (!path)
return {
data: dataSource ?? [],
success: true,
total: dataSource?.length ?? 0,
};
let newparams = {
...params,
...extraparams, //父组件传参
pageIndex: params.current,
pageSize: params.pageSize || pageSize,
};
delete newparams.current;
if (ifspagination) {
delete newparams.pageIndex;
delete newparams.pageSize;
}
const result = await doFetch({ url: path, params: newparams });
//分页结果
let data = result?.data?.page?.list,
success = true,
total = result?.data?.page?.total;
//不带分页获取结果
if (ifspagination || !data) {
data = result?.data?.dataList;
total = result?.data?.dataList?.length;
}
//存在默认选中向上返回选中值
getDefaultSelected && getDefaultSelected(result?.data);
return {
data,
success,
total,
};
};
let columncs = useMemo(() => {
return columns.map((item, index) => {
let it = { ...item };
let itemwidth = it.width ? it.width : 'auto';
let options = {};
if (it.valueType == 'select' || it.valueType == 'checkbox') {
if (Array.isArray(it.options)) {
options = {
fieldProps: {
...it?.fieldProps,
options: [...it.options],
},
};
} else if (it.options) {
options = {
request: async (params) => {
let list = await doFetch({ url: it?.options?.path, params: it?.options?.params });
return list.data.dataList;
},
};
}
}
if (it.valueType == 'option') {
options = {
key: 'option',
dataIndex: 'option',
fixed: 'right',
};
}
if (!it.render) {
options = {
...options,
render: (text, row) => {
return (
<Tooltip title={row[it.dataIndex]} placement="topLeft">
<span className="table-cell">{row[it.dataIndex] ?? '-'}</span>
</Tooltip>
);
},
};
}
options = {
...options,
width: itemwidth,
};
delete it.formItemProps;
return {
...it,
...options,
};
});
}, [columns]);
return (
<EditableProTable
{...props}
recordCreatorProps={false}
size={size}
onSubmit={(params) => {
//console.log(params, 'onSubmit');
}}
onSizeChange={(size) => {
localStorage.setItem('size', size); //设置全局表格规格缓存
setsize(size);
}}
columns={columncs ?? []}
style={style || {}}
actionRef={actionRefs}
formRef={formRefs}
rowKey={rowKey ?? 'id'} //表格每行数据的key
dateFormatter="string"
request={request}
scroll={
x
? {
x: x,
}
: {}
}
pagination={
ifspagination
? false
: {
showTotal: (total, range) => <span>共{total}条</span>,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
defaultPageSize: pageSize || 15,
}
}
editable={{
type: 'multiple',
editableKeys: props?.rowSelection?.selectedRowKeys ?? [],
...props?.editable,
}}
search={{
filterType: 'light', //轻量模式
placement: 'bottomLeft'
}}
/>
);
};
export default memo(EditTable);
src/components/NewInitForm/FormItems.jsx 0 → 100644
View file @ e822f7f8
import React, { useState, useRef, memo, createElement, useEffect } from "react";
import {
ProForm,
ProFormDependency,
ProFormSelect,
ProFormText,
ProFormMoney,
ProFormTextArea,
ProFormDigit,
ProFormDigitRange,
ProFormDatePicker,
ProFormDateTimePicker,
ProFormDateRangePicker,
ProFormDateTimeRangePicker,
ProFormTimePicker,
ProFormTreeSelect,
ProFormCheckbox,
ProFormRadio,
ProFormCascader,
ProFormSwitch,
ProFormRate,
ProFormSlider,
ProFormUploadDragger,
ProFormUploadButton,
ProFormList,
} from "@ant-design/pro-components";
import { doFetch } from "@/utils/doFetch";
import * as Antd from "antd";
import {
PlusOutlined,
DownOutlined,
RedoOutlined,
CloseOutlined,
} from "@ant-design/icons";
import EditTable from "./EditTable";
const { Image, Form, Upload, Col, Tabs, Dropdown, Menu, Empty } = Antd;
const FormItems = {
Input,
Password,
Money,
Textarea,
Digit,
DigitRange,
Date,
Time,
DateTime,
DateMonth,
DateYear,
DateRange,
TimeRange,
DateTimeRange,
Select,
TreeSelect,
Checkbox,
Radio,
Switch,
Cascader,
Rate,
Slider,
UploadBtn,
UploadImage,
UploadDragger,
FormSelectList,
FormList,
CheckboxItem,
RadioItem,
};
function upperCase(str) {
const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
return newStr;
}
let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
const value = action.getCurrentRowData();
return (
<>
{fields
.filter((it) => it.hideInForm !== true)
.map((item) => {
let key = item?.valueType ? upperCase(item?.valueType) : "Input";
let { hideInForm, editable } = item;
if (hideInForm && Object.keys(hideInForm)) {
return (
<ProFormDependency name={Object.keys(hideInForm)}>
{(params) => {
let ifs = true;
let res = Object.keys(hideInForm).map((its) => {
let val =
JSON.stringify(params[its]) === "[]" ? "[]" : params[its];
if (Array.isArray(hideInForm[its])) {
return !hideInForm[its].includes(val);
} else {
let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
return vals.indexOf(val) != -1;
}
});
ifs = res.includes(false);
if (ifs) {
return (
<Col {...item.colProps}>
{curindex == 0 ? (
<p>
<label htmlFor="">{item.title}</label>
<p style={{ padding: "6px 0 0 0", margin: 0 }}>
<b style={{ color: "red" }}>!</b>{" "}
需满足条件才可以填写{item.title}
</p>
</p>
) : (
<p style={{ padding: "4px 0 0 0", margin: 0 }}>
<b style={{ color: "red" }}>!</b>{" "}
需满足条件才可以填写{item.title}
</p>
)}
</Col>
);
} else {
return (
<>
{createElement(FormItems[key], {
item: item,
colProps: item.colProps,
key: item.dataIndex,
name: name,
formRef,
curindex,
})}
</>
);
}
}}
</ProFormDependency>
);
} else if (editable === false) {
return curindex === 0 ? (
<Col {...item.colProps} style={{ height: 68 }}>
<p>
<label htmlFor="">{item.title}</label>
<p style={{ padding: "6px 0 0 0", margin: 0 }}>
{value[item?.key ?? item?.dataIndex] ?? "-"}
</p>
</p>
</Col>
) : (
<Col {...item.colProps} style={{ height: 68 }}>
<p>
<label htmlFor=""> &nbsp;</label>
<p style={{ padding: "6px 0 0 0", margin: 0 }}>
{value[item?.key ?? item?.dataIndex] ?? "-"}
</p>
</p>
</Col>
);
} else {
return (
<>
{createElement(FormItems[key], {
item: item,
colProps: item.colProps,
key: item.dataIndex,
name: name,
formRef,
curindex,
})}
</>
);
}
})}
</>
);
});
// colProps 默认删格
function Input({ item, colProps }) {
let keys = item.key ?? item.dataIndex ?? "";
keys = keys ?? "";
const defaultrule =
keys.indexOf("dianhuas") != -1
? {
pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/,
message: item.title + "格式不正确",
}
: keys.indexOf("mail") != -1
? {
pattern:
/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$/,
message: "邮箱格式不正确",
}
: {};
return (
<>
<ProFormText
fieldProps={item?.fieldProps}
formItemProps={{
...item.formItemProps,
rules: [defaultrule, ...(item?.formItemProps?.rules ?? [])],
}} //手机号邮箱自带验证
name={keys}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请输入${item.title}`}
/>
</>
);
}
//pwd
function Password({ item, colProps }) {
return (
<ProFormText.Password
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请输入${item.title}`}
/>
);
}
//money
function Money({ item, colProps }) {
return (
<ProFormMoney
locale="zh-CN"
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请输入${item.title}`}
min={item.min}
max={item.max}
/>
);
}
//textarea
function Textarea({ item }) {
return (
<ProFormTextArea
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? { span: 24 }}
label={item.title}
placeholder={`请输入${item.title}`}
/>
);
}
//digit
function Digit({ item, colProps }) {
return (
<ProFormDigit
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请输入${item.title}`}
min={item.min}
max={item.max}
fieldProps={{
precision: item.precision ?? 0,
...(item?.fieldProps ?? {}),
}}
/>
);
}
//digitrange
function DigitRange({ item, colProps }) {
return (
<ProFormDigitRange
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={["请输入最小值", "请输入最大值"]}
min={item.min}
max={item.max}
fieldProps={{
precision: item.precision ?? 0,
...(item?.fieldProps ?? {}),
}}
/>
);
}
//Date
function Date({ item, colProps }) {
return (
<ProFormDatePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
width="100%"
/>
);
}
//DateMonth
function DateMonth({ item, colProps }) {
return (
<ProFormDatePicker
fieldProps={{ ...item?.fieldProps, picker: "month", format: "YYYY-MM" }}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
width="100%"
/>
);
}
//DateYear
function DateYear({ item, colProps }) {
return (
<ProFormDatePicker
fieldProps={{ ...item?.fieldProps, picker: "year", format: "YYYY" }}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
width="100%"
/>
);
}
//dateTime
function DateTime({ item, colProps }) {
return (
<ProFormDateTimePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
width="100%"
/>
);
}
//DateRange
function DateRange({ item, colProps }) {
return (
<ProFormDateRangePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={["请选择开始日期", "请选择结束日期"]}
width="100%"
/>
);
}
//dateTimeRange
function DateTimeRange({ item, colProps }) {
return (
<ProFormDateTimeRangePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={["请选择开始时间", "请选择结束时间"]}
width="100%"
/>
);
}
//Time
function Time({ item, colProps }) {
return (
<ProFormTimePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
width="100%"
/>
);
}
//TimeRange
function TimeRange({ item, colProps }) {
return (
<ProFormTimePicker.RangePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={["请选择开始时间", "请选择结束时间"]}
width="100%"
/>
);
}
function LinkSelect({ item, colProps, formRef, name, curindex }) {
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
return (
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
return (
<ProFormSelect
convertValue={(value) => {
return item?.fieldProps?.mode == "multiple"
? !value
? []
: null
: null;
}}
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={curkey}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
params={params}
mode={item?.mode}
request={async (parse) => {
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
result[reversekey] = parse[key];
}
let res = await doFetch({
url: curoption?.path,
params: { ...result, ...(curoption?.extraparams ?? {}) },
});
if (name) {
let curvals = formRef?.current?.getFieldValue(name);
curvals = curvals.map((it, i) => {
if (i == curindex) {
it[curkey] = null;
}
return it;
});
formRef?.current?.setFieldsValue({ [name]: curvals });
} else {
let curval = formRef?.current?.getFieldValue(curkey),
ifclean;
if (Array.isArray(curval)) {
ifclean = res?.data?.dataList
?.map((it) => it.value)
.filter?.((it) => {
return curval?.includes(it);
});
} else {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
return res?.data?.dataList ?? [];
}}
showSearch
/>
);
}}
</ProFormDependency>
);
}
function NolinkSelect({ item, colProps }) {
let options = {
options: [],
},
curoption = item.options ?? null;
if (Array.isArray(curoption)) {
options = {
options: [...curoption],
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
return list.data.dataList;
},
};
}
return (
<ProFormSelect
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
showSearch
mode={item?.mode}
{...options}
/>
);
}
//Select 高阶组建
function Select(props) {
let ifs = props?.item?.options?.linkParams;
if (ifs) {
return <LinkSelect {...props} />;
} else {
return <NolinkSelect {...props} />;
}
}
function LinkTreeSelect({ item, colProps, formRef, name, curindex }) {
let prevparse = useRef();
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
return (
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
return (
<ProFormTreeSelect
fieldProps={{
...item?.fieldProps,
fieldNames: {
label: "title",
value: "key",
children: "children",
},
showSearch: false,
multiple: item?.mode === "multiple",
}}
formItemProps={item.formItemProps}
name={curkey}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
params={params}
request={async (parse) => {
delete parse.keyWords;
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
result[reversekey] = parse[key];
}
let res = await doFetch({ url: curoption?.path, params: result });
if (prevparse.current !== JSON.stringify(parse)) {
if (name) {
let curvals = formRef?.current?.getFieldValue(name);
curvals = curvals.map((it, i) => {
if (i == curindex) {
it[curkey] = null;
}
return it;
});
formRef?.current?.setFieldsValue({ [name]: curvals });
} else {
let curval = formRef?.current?.getFieldValue(curkey),
ifclean;
if (Array.isArray(curval)) {
ifclean = res?.data?.dataList
?.map((it) => it.value)
.filter?.((it) => {
return curval?.includes(it);
});
} else {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
}
prevparse.current = JSON.stringify(parse);
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
);
}
function NolinkTreeSelect({ item, colProps }) {
let options = {
options: [],
},
curoption = item.options ?? null;
if (Array.isArray(curoption)) {
options = {
options: [...curoption],
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
return list.data.dataList;
},
};
}
return (
<ProFormTreeSelect
fieldProps={{
...item?.fieldProps,
fieldNames: { label: "title", value: "key", children: "children" },
showSearch: true,
multiple: item?.mode === "multiple",
}}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
multiple
{...options}
/>
);
}
//TreeSelect 高阶组建
function TreeSelect(props) {
let ifs = props?.item?.options?.linkParams;
if (ifs) {
return <LinkTreeSelect {...props} />;
} else {
return <NolinkTreeSelect {...props} />;
}
}
function CheckboxItem({ item, colProps }) {
return (
<ProFormCheckbox
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
/>
);
}
function LinkCheckbox({ item, colProps, formRef, name, curindex }) {
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
return (
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
return (
<ProFormCheckbox.Group
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={curkey}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
params={params}
request={async (parse) => {
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
result[reversekey] = parse[key];
}
let res = await doFetch({ url: curoption?.path, params: result });
if (name) {
let curvals = formRef?.current?.getFieldValue(name);
curvals = curvals.map((it, i) => {
if (i == curindex) {
it[curkey] = null;
}
return it;
});
formRef?.current?.setFieldsValue({ [name]: curvals });
} else {
let curval = formRef?.current?.getFieldValue(curkey),
ifclean;
if (Array.isArray(curval)) {
ifclean = res?.data?.dataList
?.map((it) => it.value)
.filter?.((it) => {
return curval?.includes(it);
});
} else {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
);
}
function NolinkCheckbox({ item, colProps }) {
let options = {
options: [],
},
curoption = item.options ?? null;
if (Array.isArray(curoption)) {
options = {
options: [...curoption],
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
return list.data.dataList;
},
};
}
return (
<ProFormCheckbox.Group
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
);
}
//Checkbox 高阶组建
function Checkbox(props) {
let ifs = props?.item?.options?.linkParams;
if (ifs) {
return <LinkCheckbox {...props} />;
} else {
return <NolinkCheckbox {...props} />;
}
}
function RadioItem({ item, colProps }) {
return (
<ProFormRadio
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
/>
);
}
function LinkRadio({ item, colProps, formRef, name, curindex }) {
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
return (
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
return (
<ProFormRadio.Group
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={curkey}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
params={params}
request={async (parse) => {
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
result[reversekey] = parse[key];
}
let res = await doFetch({ url: curoption?.path, params: result });
if (name) {
let curvals = formRef?.current?.getFieldValue(name);
curvals = curvals.map((it, i) => {
if (i == curindex) {
it[curkey] = null;
}
return it;
});
formRef?.current?.setFieldsValue({ [name]: curvals });
} else {
let curval = formRef?.current?.getFieldValue(curkey),
ifclean;
if (Array.isArray(curval)) {
ifclean = res?.data?.dataList
?.map((it) => it.value)
.filter?.((it) => {
return curval?.includes(it);
});
} else {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
);
}
function NolinkRadio({ item, colProps }) {
let options = {
options: [],
},
curoption = item.options ?? null;
if (Array.isArray(curoption)) {
options = {
options: [...curoption],
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
return list.data.dataList;
},
};
}
return (
<ProFormRadio.Group
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
);
}
//Radio 高阶组建
function Radio(props) {
let ifs = props?.item?.options?.linkParams;
if (ifs) {
return <LinkRadio {...props} />;
} else {
return <NolinkRadio {...props} />;
}
}
function LinkCascader({ item, colProps, formRef, name, curindex }) {
let prevparse = useRef();
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
return (
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
return (
<ProFormCascader
fieldProps={{
...item?.fieldProps,
fieldNames: {
label: "title",
value: "key",
children: "children",
},
showSearch: true,
multiple: item?.mode === "multiple",
}}
formItemProps={item.formItemProps}
name={curkey}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
params={params}
request={async (parse) => {
delete parse.keyWords;
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
result[reversekey] = parse[key];
}
let res = await doFetch({ url: curoption?.path, params: result });
if (prevparse.current !== JSON.stringify(parse)) {
if (name) {
let curvals = formRef?.current?.getFieldValue(name);
curvals = curvals.map((it, i) => {
if (i == curindex) {
it[curkey] = null;
}
return it;
});
formRef?.current?.setFieldsValue({ [name]: curvals });
} else {
let curval = formRef?.current?.getFieldValue(curkey),
ifclean;
if (Array.isArray(curval)) {
ifclean = res?.data?.dataList
?.map((it) => it.value)
.filter?.((it) => {
return curval?.includes(it);
});
} else {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
}
prevparse.current = JSON.stringify(parse);
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
);
}
function NolinkCascader({ item, colProps }) {
let options = {
options: [],
},
curoption = item.options ?? null;
if (Array.isArray(curoption)) {
options = {
options: [...curoption],
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
return list.data.dataList;
},
};
}
return (
<ProFormCascader
fieldProps={{
...item?.fieldProps,
fieldNames: { label: "title", value: "key", children: "children" },
showSearch: true,
multiple: item?.mode === "multiple",
}}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
);
}
//Cascader 高阶组建
function Cascader(props) {
let ifs = props?.item?.options?.linkParams;
if (ifs) {
return <LinkCascader {...props} />;
} else {
return <NolinkCascader {...props} />;
}
}
//switch
function Switch({ item, colProps }) {
return (
<ProFormSwitch
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请输入${item.title}`}
/>
);
}
//Rate
function Rate({ item, colProps }) {
return (
<ProFormRate
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
/>
);
}
//Slider
function Slider({ item, colProps }) {
return (
<ProFormSlider
{...item?.fieldProps}
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
/>
);
}
//uploadbtn
function UploadBtn({ item, colProps }) {
return (
<ProFormUploadButton
fieldProps={{
...item?.fieldProps,
action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
onPreview: (file) => {
let url = "";
if (file.response) {
url = file.response.data.dataList[0].url;
} else if (file.url) {
url = file.url;
} else {
url = file.thumbUrl;
}
window.open(url);
},
}}
transform={(value) => {
const key = item.key ?? item.dataIndex;
const transvalue = value?.map((it) => {
if (it.response) {
return it?.response?.data?.dataList[0];
} else {
return it;
}
});
return {
[key]: transvalue,
};
}}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
title={`上传${item.title}`}
/>
);
}
function UploadImg({ value, onChange, fieldProps }) {
const [image, setImage] = useState({});
let token = localStorage.getItem("TOKENSTRING");
function beforeUpload(file) {
const isJpgOrPng =
file.type === "image/jpg" ||
file.type === "image/jpeg" ||
file.type === "image/png";
if (!isJpgOrPng) {
message.error("只能上传.jpg/.jpeg/.png图片!");
return;
}
return true;
}
// maxCount 最大数量
const defaultconfig = {
name: "file",
action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
accept: ".jpg,.png,.jpeg",
listType: "picture-card",
beforeUpload: beforeUpload,
defaultFileList: value,
headers: { token },
onChange(info) {
let {
file: { status },
fileList,
} = info;
if (status == "error") {
message.error(`${info.file.name} 上传失败`);
} else if (status === "done") {
const transfile = fileList.map((it) => {
return it?.response ? it?.response?.data?.dataList[0] : it;
});
onChange(transfile);
}
},
onRemove(file) {
let uid = file?.response?.data?.dataList[0]?.uid ?? file?.uid;
let newvalue = value?.filter((it) => it?.uid != uid);
onChange(newvalue);
},
onPreview(file) {
let url = "";
if (file.response) {
url = file.response.data.dataList[0].url;
} else if (file.url) {
url = file.url;
} else {
url = file.thumbUrl;
}
setImage({
url,
visible: true,
});
},
};
const uploadButton = (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>上传图片</div>
</div>
);
return (
<>
<Image
src={image.url}
width={0}
height={0}
preview={{
visible: image?.visible,
onVisibleChange: () => {
if (image?.visible) {
setImage((s) => ({
...s,
visible: false,
}));
}
},
}}
/>
<Upload {...defaultconfig}>
{!value
? uploadButton
: value?.length < fieldProps.limit
? uploadButton
: null}
</Upload>
</>
);
}
//upload Image
function UploadImage({ item, colProps }) {
let col = item.colProps ?? colProps;
return (
<Col {...col}>
<Form.Item
name={item.key ?? item.dataIndex}
label={item.title}
{...item.formItemProps}
>
<UploadImg fieldProps={{ ...item?.fieldProps }} />
</Form.Item>
</Col>
);
}
// uploadDragger
function UploadDragger({ item, colProps }) {
return (
<ProFormUploadDragger
fieldProps={{
...item?.fieldProps,
action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
onPreview: (file) => {
let url = "";
if (file.response) {
url = file.response.data.dataList[0].url;
} else if (file.url) {
url = file.url;
} else {
url = file.thumbUrl;
}
window.open(url);
},
}}
transform={(value) => {
const key = item.key ?? item.dataIndex;
const transvalue = value?.map((it) => {
if (it.response) {
return it?.response?.data?.dataList[0];
} else {
return it;
}
});
return {
[key]: transvalue,
};
}}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
/>
);
}
function FormList(props) {
const [isEmpty, cie] = useState(false);
let { item, colProps, formRef } = props;
let col = item.colProps ?? colProps;
let fields = item.columns ?? [];
useEffect(() => {
let value = props.formRef.current.getFieldValue(
item?.key ?? item?.dataIndex
);
if (value?.length == 0) {
cie(true);
}
}, [props]);
return (
<Col {...col}>
<div className="formList" >
{!isEmpty ? (
<ProFormList
name={item.key ?? item.dataIndex}
label={item.title}
min={item.min ?? 1}
max={item.max ?? 100}
itemContainerRender={(doms) => {
return <ProForm.Group>{doms}</ProForm.Group>;
}}
alwaysShowItemLabel={false}
copyIconProps={item?.copyIconProps}
deleteIconProps={item?.deleteIconProps}
creatorButtonProps={item?.creatorButtonProps}
>
{(f, index, action) => {
return (
<FormRender
fields={fields}
action={action}
curindex={index}
formRef={formRef}
name={item.key ?? item.dataIndex}
/>
);
}}
</ProFormList>
) : (
<div>
<div>{item.title}</div>
<Empty
image={"./empty.svg"}
imageStyle={{
height: 60,
}}
/>
</div>
)}
</div>
</Col>
);
}
function TableSelect({ item, value, onChange, params = {} }) {
const rowKey = item?.rowKey ?? "id";
const [chooses, setchooses] = useState([]); //mark 标记
const [activetab, setactivetab] = useState(1);
const actionRef = useRef();
const menu = (selectedRows) => (
<Menu
style={{ width: 160 }}
items={
selectedRows.length > 0
? selectedRows.map((it) => ({
key: it[rowKey],
label: (
<div
className="spread"
onClick={(e) => {
e.stopPropagation();
let key = it[rowKey];
setchooses((s) => {
let news = [...s];
if (s.includes(key)) {
news = news.filter((it) => {
return it != key;
});
} else {
news.push(key);
}
return news;
});
}}
>
<span
style={{
color: chooses.includes(it[rowKey])
? "#1890ff"
: "#333333",
transition: "all 0.4s",
userSelect: "none",
}}
>
{it[item.rowName]}
</span>
<CloseOutlined
onClick={(e) => {
e.stopPropagation();
let newvalue = value.filter(
(its) => its[rowKey] != it[rowKey]
);
onChange(newvalue);
setchooses((s) => {
let news = [...s];
news = news.filter((its) => {
return its != it[rowKey];
});
return news;
});
}}
/>
</div>
),
}))
: [
{
key: -1,
label: "请先选择",
},
]
}
/>
);
const Todo = (
<EditTable
actionRef={actionRef}
defaultValue={value} //调用接口合并初始值
path={item.path}
extraparams={params ?? {}}
rowKey={rowKey}
columns={item.columns}
resizeable={false}
alwaysShowAlert={false}
tableAlertRender={false}
tableAlertOptionRender={false}
rowClassName={(record, index) => {
if (chooses.includes(record[rowKey])) {
return "lightblue";
} else {
return "";
}
}}
rowSelection={{
...item.rowSelection,
columnWidth: 44,
preserveSelectedRowKeys: true,
selectedRowKeys: value && value?.map((it) => it[rowKey]),
onChange: (selectedKeys, selectedRows) => {
const rowkeylist = value ? value?.map((it) => it[rowKey]) : [];
const newValue = selectedRows?.map((its) => {
if (rowkeylist.includes(its[rowKey])) {
return value.filter((it) => it[rowKey] == its[rowKey])[0];
} else {
return its;
}
});
onChange(newValue);
},
}}
editable={{
onValuesChange: (record, recordList) => {
const newValue = value?.map((its) => {
if (its[rowKey] == record[rowKey]) {
return record;
} else {
return its;
}
});
onChange(newValue);
},
}}
/>
);
const Done = (
<EditTable
value={value}
rowKey={rowKey}
columns={item.columns}
resizeable={false}
alwaysShowAlert={false}
tableAlertRender={false}
tableAlertOptionRender={false}
rowClassName={(record, index) => {
if (chooses.includes(record[rowKey])) {
return "lightblue";
} else {
return "";
}
}}
rowSelection={{
...item.rowSelection,
columnWidth: 44,
preserveSelectedRowKeys: true,
selectedRowKeys: value && value?.map((it) => it[rowKey]),
onChange: (selectedKeys, selectedRows) => {
const rowkeylist = value ? value?.map((it) => it[rowKey]) : [];
const newValue = selectedRows?.map((its) => {
if (rowkeylist.includes(its[rowKey])) {
return value.filter((it) => it[rowKey] == its[rowKey])[0];
} else {
return its;
}
});
onChange(newValue);
},
}}
editable={{
onValuesChange: (record, recordList) => {
const newValue = value?.map((its) => {
if (its[rowKey] == record[rowKey]) {
return record;
} else {
return its;
}
});
onChange(newValue);
},
}}
/>
);
return (
<div className="selecttable">
<Tabs
tabBarExtraContent={
<div className="center">
<Dropdown overlay={menu(value ?? [])}>
<a>
已选择{value?.length ?? 0}项 <DownOutlined />
</a>
</Dropdown>
<div
className="center"
style={{
color: "red",
cursor: "pointer",
margin: "0 6px 0 16px",
}}
onClick={() => {
onChange([]);
setchooses([]);
}}
>
<RedoOutlined rotate={-90} />
清空
</div>
</div>
}
onChange={setactivetab}
items={[
{ label: "数据选择", key: 1, children: activetab == 1 && Todo },
{
label: `选择结果${value?.length ?? 0}项`,
key: 2,
children: activetab == 2 && Done,
},
]}
/>
</div>
);
}
function LinkSelectList({ item, colProps, formRef, name, curindex }) {
let col = item.colProps ?? colProps;
let curlinkparams = item?.linkParams ?? {}; //获取linkParams下声明的key
return (
<Col {...col}>
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
result[reversekey] = params[key];
}
return (
<Form.Item name={curkey} label={item.title} {...item.formItemProps}>
<TableSelect item={item} params={result} />
</Form.Item>
);
}}
</ProFormDependency>
</Col>
);
}
function NolinkSelectList({ item, colProps, formRef }) {
let col = item.colProps ?? colProps;
let curkey = item.key ?? item.dataIndex; //获取key
return (
<Col {...col}>
<Form.Item name={curkey} label={item.title} {...item.formItemProps}>
<TableSelect item={item} params={item.params} />
</Form.Item>
</Col>
);
}
function FormSelectList(props) {
let ifs = props?.item?.linkParams;
if (ifs) {
return <LinkSelectList {...props} />;
} else {
return <NolinkSelectList {...props} />;
}
}
export default FormItems;
src/components/NewInitForm/index.css 0 → 100644
View file @ e822f7f8
.title {
position: relative;
width: 100%;
margin-bottom: 8px;
padding-left: 16px;
font-weight: bolder;
font-size: 16px;
}
.title::before {
position: absolute;
top: 4px;
left: 7px;
width: 3px;
height: 16px;
background-color: #3d8ad7;
border-radius: 4px;
content: '';
}
.title::after {
position: absolute;
top: 14px;
right: 0px;
width: calc(100% - 160px);
height: 1px;
border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
border-radius: 4px;
content: '';
}
src/components/NewInitForm/index.jsx 0 → 100644
View file @ e822f7f8
import React, { createElement, memo, useRef, useState } from "react";
import {
ProForm,
ProFormDependency,
ProFormSelect,
ProFormText,
ProFormGroup,
ProFormList,
ProCard,
} from "@ant-design/pro-components";
import { doFetch } from "@/utils/doFetch";
import styles from "./index.less";
import FormItems from "./FormItems";
function upperCase(str) {
const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
return newStr;
}
let FormRender = memo(({ fields = [], colProps, proformRef }) => {
return (
<>
{fields
.filter((it) => it.hideInForm !== true)
.map((item, index) => {
let key = item?.valueType ? upperCase(item?.valueType) : "Input";
let { hideInForm } = item;
item.formItemProps = item.formItemProps ?? { rules: [] };
if (item.valueType == "split") {
return (
<div
className={styles.title}
style={{ borderWidth: index == 0 ? 0 : 1 }}
>
{item.title}
</div>
);
}
if (hideInForm && Object.keys(hideInForm)) {
return (
<ProFormDependency name={Object.keys(hideInForm)}>
{(params) => {
let ifs = true;
let res = Object.keys(hideInForm).map((its) => {
let val =
JSON.stringify(params[its]) === "[]" ? "[]" : params[its];
if (Array.isArray(hideInForm[its])) {
return !hideInForm[its].includes(val);
} else {
let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
return vals.indexOf(val) != -1;
}
});
ifs = res.includes(false);
if (ifs) {
return;
} else {
return (
<>
{createElement(FormItems[key], {
item: item,
colProps: colProps,
key: item.dataIndex,
formRef: proformRef,
})}
</>
);
}
}}
</ProFormDependency>
);
} else {
return (
<>
{createElement(FormItems[key], {
item: item,
colProps: colProps,
key: item.dataIndex,
formRef: proformRef,
})}
</>
);
}
})}
</>
);
});
function InitForm({
formRef,
onFinish = (vals) => {
// console.log(vals);
},
formKey,
params = {},
detailpath = "",
defaultFormValue = {},
submitter,
fields,
colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
onValuesChange = (changedValues, allValues) => {
// console.log(changedValues, allValues);
},
ptree = false,
children,
}) {
let proformRef = useRef();
proformRef = formRef ?? proformRef;
return (
<ProForm
style={{ overflow: "hidden" }}
formRef={proformRef}
onFinish={onFinish}
formKey={formKey ?? parseInt(Math.random() * 1000000)}
params={params}
submitter={submitter ?? true}
grid={true}
rowProps={{
gutter: 12,
}}
request={async (params) => {
if (detailpath) {
let res = await doFetch({ url: detailpath, params });
return {
...(res?.data?.data ?? {}),
...defaultFormValue,
};
} else {
return {
...defaultFormValue,
};
}
}}
autoFocusFirstInput
onValuesChange={(changedValues, allValues) => {
onValuesChange?.(changedValues, allValues);
}}
>
<FormRender
fields={fields?.filter((it) => it?.valueType != "option")}
colProps={colProps}
proformRef={proformRef}
/>
{ptree && children}
</ProForm>
);
}
export default InitForm;
src/components/NewInitForm/index.less 0 → 100644
View file @ e822f7f8
.title {
position: relative;
width: 100%;
margin-bottom: 8px;
padding-left: 16px;
font-weight: bolder;
font-size: 16px;
&::before {
position: absolute;
top: 4px;
left: 7px;
width: 3px;
height: 16px;
background-color: #3d8ad7;
border-radius: 4px;
content: '';
}
&::after {
position: absolute;
top: 14px;
right: 0px;
width: calc(100% - 160px);
height: 1px;
border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
border-radius: 4px;
content: '';
}
}
src/pages/Printer/fields.js
View file @ e822f7f8
import {
factorySelect,
shopSelectByFactory,
productionLineSelectByShop,
sectionSelectByShop,
} from "@/services/system";
export default {
stationNo: {
value: null,
type: "input",
title: "工位编号",
name: ["stationNo"],
required: true,
export default [
{
title: "物料（名称+编码）",
key: "wlid",
dataIndex: "wlid",
},
stationName: {
value: null,
type: "input",
title: "工位名称",
name: ["stationName"],
required: true,
{
title: "规格型号",
key: "specificationModel",
dataIndex: "specificationModel",
},
factoryId: {
value: null,
type: "select",
title: "所属工厂",
name: ["factoryId"],
required: true,
options: {
database: factorySelect,
params: {},
},
linked: true,
{
title: "牌号",
key: "shopSign",
dataIndex: "shopSign",
},
status: {
value: null,
type: "select",
title: "启用状态",
name: ["status"],
required: true,
options: [
{
label: "启用",
value: 1,
},
{
label: "禁用",
value: 0,
},
],
{
title: "铁损",
key: "ironLoss",
dataIndex: "ironLoss",
},
remark: {
value: null,
type: "textarea",
title: "描述",
name: ["remark"],
required: false,
col: { span: 24 },
{
title: "片厚",
key: "sheetThickness",
dataIndex: "sheetThickness",
},
};
{
title: "其他信息",
key: "split",
dataIndex: "split",
valueType:'split'
},
{
title: "供应商",
key: "supplierId",
dataIndex: "supplierId",
},
];
src/pages/Printer/index.jsx
View file @ e822f7f8
......@@ -10,11 +10,10 @@ import {
message,
} from "antd";
import AutoTable from "@/components/AutoTable";
import getPrem from "@/utils/getPrem"; //权限判断fn
import { useRequest } from "umi";
import defaultFields from "./fields";
import defaultFields from "./fields.js";
import { doFetch } from "@/utils/doFetch";
import InitForm from "@/components/InitForm";
import InitForm from "@/components/NewInitForm";
import { start } from "@/utils/printHandle.js";
import { ExclamationCircleFilled } from "@ant-design/icons";
const { confirm } = Modal;
......@@ -174,9 +173,9 @@ const Station = (props) => {
console.log(selectedRowKeys, selectedRows);
setselectIds(selectedRowKeys);
},
preserveSelectedRowKeys:true
preserveSelectedRowKeys: true,
};
console.log(defaultFields);
return (
<div>
<AutoTable
......@@ -193,7 +192,7 @@ const Station = (props) => {
></AutoTable>
<Drawer
title={drawer?.title}
visible={drawer?.visible}
open={drawer?.visible}
onClose={() => setDrawer((v) => ({ ...v, visible: false }))}
footer={false}
destroyOnClose={true}
......@@ -208,20 +207,18 @@ const Station = (props) => {
actions={() => {
return null;
}}
submitter={false}
></InitForm>
<Button
style={{ width: "100%" }}
type="primary"
size="large"
// loading={loading || !vs}
style={{ marginRight: 16 }}
onClick={() => saveData()}
>
保存
</Button>
<Button
style={{ width: "100%" }}
type="primary"
size="large"
// loading={loading || !vs}
onClick={() => saveData()}
>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment