Skip to content

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

新增标签

parent 2073e6fc
Hide whitespace changes
Inline Side-by-side
Showing with 2416 additions and 974 deletions
src/components/NewInitForm/ColumnsTrans.jsx 0 → 100644
View file @ 36f252db
import { CopyOutlined } from '@ant-design/icons';
import { Input, Button, message, Divider } from 'antd';
import copy from 'copy-to-clipboard';
import { useState } from 'react';
const ColumnsTrans = () => {
const [requestMsg, setrequestMsg] = useState('');
const [newRequest, setnewRequest] = useState('');
const [borderColor, setborderColor] = useState(null);
const translateHandler = () => {
try {
let newString = JSON.parse(requestMsg);
// let newString = eval('('+requestMsg+')');
const newRequestArr = formatPrettier(newString);
setnewRequest(newRequestArr);
setborderColor('green');
} catch (error) {
message.error('“request”内容的格式不符合JSON字符串格式！');
setborderColor('red');
}
};
const formatPrettier = (jsonObj) => {
// debugger
// {
// title: '文本',
// key: 'text',
// dataIndex: 'id',
// },
let arr = [];
for (let key in jsonObj) {
if (key.toLowerCase() == 'id') continue;
const newObj = {
title: jsonObj[key],
key: key,
dataIndex: key,
};
arr = [...arr, newObj];
}
const newRequestString = JSON.stringify(arr)
.replace(/\[/g, '[\n\t')
.replace(/\]/g, ']')
.replace(/\,/g, ',\n\t')
.replace(/\{/g, '{\n\t')
.replace(/\}\,/g, '\n\t},')
.replace(/\}\]/g, '\n\t}\n]');
return newRequestString;
};
return (
<div>
<Divider orientation="left">Request</Divider>
<Input.TextArea
name="text"
placeholder="请输入Request内容，须符合JSON字符串格式"
allowClear={true}
value={requestMsg}
autoSize={{ minRows: 10 }}
onChange={(value) => {
let newValue = value?.target?.value;
setrequestMsg(newValue);
}}
style={{ borderColor: borderColor }}
/>
<Button type="primary" onClick={translateHandler} style={{ margin: 6 }}>
转换
</Button>
<Input.TextArea name="beautify" autoSize={{ minRows: 8, maxRows: 16 }} value={newRequest} />
<Button
style={{ margin: 6 }}
onClick={() => {
copy(newRequest);
message.success('已成功复制到剪切板！');
}}
>
复制
</Button>
</div>
);
};
export default ColumnsTrans;
src/components/NewInitForm/Diyrule/index.jsx 0 → 100644
View file @ 36f252db
import {
Row,
Col,
Input,
InputNumber,
Select,
message,
Button,
Empty,
Checkbox,
Divider,
} from 'antd';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { getFetch, formFetch, doFetch } from '@/utils/doFetch';
import { CloseCircleFilled } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import moment from 'moment';
let Diyrule = (props) => {
let { onChange } = props;
let defval = props?.value ?? {};
console.log(defval);
let value = defval?.value || [],
other = useMemo(() => {
return (
defval?.other || {
noRuleCode: '',
sort: null,
formatType: null,
increaseList: [],
}
);
}, [defval?.other]);
useEffect(() => {
onChange(defval);
});
let { data, loading } = useRequest(() => {
return doFetch({ url: '/base/bmNoRule/querySelect', params: {} });
});
useEffect(() => {
let noRuleCode =
data &&
data?.data?.dataList
.map?.((it) => ({ ...it, label: it?.name }))
?.filter((it) => it?.value == 'increasing_order')?.[0].value;
//获取默认值 顺序递增
if (!other.noRuleCode) {
onChange({
value: value,
other: {
...other,
noRuleCode: noRuleCode,
},
});
}
}, [data]);
function renderDom(row, type) {
if (type == 'middle') {
let dom = <></>;
switch (row.noRuleCode) {
case 'text_input':
dom = (
<>
<p style={{ color: '#999', marginBottom: 24 }}>编号内容</p>
<Input
allowClear
value={row.noContent}
onChange={(e) => {
let val = e.target.value;
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == row.id) {
item.noContent = val;
}
return item;
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</>
);
break;
case 'year_code':
dom = (
<>
<p style={{ color: '#999', marginBottom: 24 }}>年份代码</p>
<Select
value={row.formatType}
options={[
{
label: 'YYYY',
value: 1,
},
{
label: 'YY',
value: 2,
},
]}
onChange={(val) => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == row.id) {
item.formatType = val;
}
return item;
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</>
);
break;
case 'month_code':
dom = (
<>
<p style={{ color: '#999', marginBottom: 24 }}>月份代码</p>
<Select
value={row.formatType}
options={[
{
label: 'MM',
value: 2,
},
{
label: 'M',
value: 1,
},
]}
onChange={(val) => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == row.id) {
item.formatType = val;
if (val == 1) {
item.paramList = Object.keys(Array.apply(null, { length: 12 })).map(
(it, i) => {
return {
key: (i + 1).toString(),
value: '',
};
},
);
} else {
delete item.paramList;
}
}
return item;
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</>
);
break;
case 'day_code':
dom = (
<>
<p style={{ color: '#999', marginBottom: 24 }}>日期类型</p>
<Select
value={row.formatType}
options={[
{
label: 'DD',
value: 2,
},
{
label: 'D',
value: 1,
},
]}
onChange={(val) => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == row.id) {
item.formatType = val;
if (val == 1) {
item.paramList = Object.keys(Array.apply(null, { length: 31 })).map(
(it, i) => {
return {
key: (i + 1).toString(),
value: '',
};
},
);
} else {
delete item.paramList;
}
}
return item;
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</>
);
break;
}
return dom;
} else if (type == 'last') {
let dom = <></>;
switch (row.noRuleCode) {
case 'month_code':
if (row.formatType == 1) {
dom = (
<>
<Row style={{ marginTop: 24 }}>
{row.paramList &&
row.paramList.map((it) => {
return (
<Col
span={4}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '#f0f0f0 solid 1px',
flexDirection: 'column',
backgroundColor: '#f0f0f0',
}}
>
<div style={{ height: 36 }} className="center">
{it?.key}月
</div>
<div>
<Input
style={{ width: '100%', textAlign: 'center' }}
value={it?.value}
onChange={(e) => {
//修改list数据
let val = e.target.value;
let newparamList = JSON.parse(JSON.stringify(row.paramList)) || [];
newparamList = newparamList.map((item) => {
if (item.key == it?.key) {
item.value = val;
}
return item;
});
//修改整体数据
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == row.id) {
item.paramList = newparamList;
}
return item;
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</div>
</Col>
);
})}
</Row>
</>
);
}
break;
case 'day_code':
if (row.formatType == 1) {
dom = (
<>
<Row style={{ marginTop: 24 }}>
{row.paramList &&
row.paramList.map((it) => {
return (
<Col
span={3}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '#f0f0f0 solid 1px',
flexDirection: 'column',
backgroundColor: '#f0f0f0',
}}
>
<div style={{ height: 36 }} className="center">
{it?.key}号
</div>
<div>
<Input
style={{ width: '100%', textAlign: 'center' }}
value={it?.value}
onChange={(e) => {
//修改list数据
let val = e.target.value;
let newparamList = JSON.parse(JSON.stringify(row.paramList)) || [];
newparamList = newparamList.map((item) => {
if (item.key == it?.key) {
item.value = val;
}
return item;
});
//修改整体数据
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == row.id) {
item.paramList = newparamList;
}
return item;
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</div>
</Col>
);
})}
</Row>
</>
);
}
break;
}
return dom;
}
}
return (
<div style={{ overflow: 'hidden', lineHeight: 0, paddingTop: 12 }}>
<div style={{ overflow: 'hidden' }}>
{value &&
value.length > 0 &&
value.map((it, i) => {
console.log(it);
return (
<Row key={i} style={{ padding: '6px 0 12px 0' }} gutter={24}>
<Col span={2}>
<p style={{ color: '#999', marginBottom: 24 }}>关联规则</p>
<Checkbox
checked={other.increaseList && other.increaseList.indexOf(it?.id) != -1}
// defaultChecked={
// other.increaseList && other.increaseList.indexOf(it?.sort + 1) != -1
// }
onChange={(e) => {
let checked = e.target.checked;
if (checked) {
let newlist = [...other?.increaseList];
newlist.push(it?.id);
onChange({
value: value,
other: {
...other,
increaseList: newlist,
},
});
} else {
onChange({
value: value,
other: {
...other,
increaseList: other.increaseList.filter((item) => {
return item != it?.id;
}),
},
});
}
}}
>
选择
</Checkbox>
</Col>
<Col span={10}>
<p style={{ color: '#999', marginBottom: 24 }}>编号规则</p>
<Select
style={{ width: '100%' }}
options={
data &&
data?.data?.dataList
.filter((it) => it?.value != 'increasing_order')
.map((it) => ({ ...it, label: it?.name }))
}
value={it?.noRuleCode}
onChange={(val) => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.map((item) => {
if (item.id == it?.id) {
return {
noRuleCode: val,
id: item.id,
};
} else {
return item;
}
});
onChange({
value: newvalue,
other: other,
});
}}
/>
</Col>
<Col span={10}>{renderDom(it, 'middle')}</Col>
<Col span={2}>
<p style={{ color: '#999', marginBottom: 40 }}>操作</p>
<a
style={{ color: 'red' }}
onClick={() => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue = newvalue.filter((item) => {
return it?.id != item.id;
});
onChange({
value: newvalue,
other: {
...other,
increaseList: other?.increaseList?.filter((item) => {
return item != it?.id;
}),
sort: other.sort == i + 1 ? null : other.sort,
},
});
}}
>
删除
</a>
</Col>
<Col span={24}>{renderDom(it, 'last')}</Col>
<Divider />
</Row>
);
})}
<Row style={{ padding: '12px 0' }} gutter={24}>
<Col span={2}>
<p style={{ color: '#999', marginBottom: 24 }}>关联规则</p>
<Checkbox
checked={value && other.increaseList && value.length == other.increaseList.length}
indeterminate={
other.increaseList
? other.increaseList.length == 0
? false
: value && value.length != other.increaseList.length
: false
}
onChange={(e) => {
let all = value.map((it, i) => it?.id);
if (e.target.checked) {
onChange({
value: value,
other: {
...other,
increaseList: all,
},
});
} else {
onChange({
value: value,
other: {
...other,
increaseList: [],
},
});
}
}}
>
全选
</Checkbox>
</Col>
<Col span={10}>
<p style={{ color: '#999', marginBottom: 24 }}>编号规则</p>
<Select
style={{ width: '100%' }}
options={data && data?.data?.dataList.map((it) => ({ ...it, label: it?.name }))}
value={other.noRuleCode}
disabled={true}
/>
</Col>
<Col span={8}>
<p style={{ color: '#999', marginBottom: 24 }}>
递增位数 (
{other?.formatType && other?.formatType > 0
? Object.keys(Array.apply('0', { length: other?.formatType })).reduce(
(prev, current) => {
return prev + '0';
},
)
: '-'}
)
</p>
<InputNumber
style={{ width: '100%' }}
min={1}
max={5}
value={other?.formatType}
onChange={(val) => {
onChange({
value: value,
other: {
...other,
formatType: val,
},
});
}}
/>
</Col>
<Col span={4}>
<p style={{ color: '#999', marginBottom: 24 }}>放置在第几个之后</p>
<Select
value={other?.sort}
options={Array.apply(null, { length: value ? value.length : 0 }).map((it, i) => ({
label: `第${i + 1}个`,
value: i + 1,
}))}
onChange={(val) => {
onChange({
value: value,
other: {
...other,
sort: val,
},
});
}}
/>
</Col>
</Row>
</div>
<Row style={{ padding: '12px 0' }} gutter={24}>
<Col span={12}>
<Button
type="dashed"
style={{ width: '100%' }}
onClick={() => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue.unshift({
noRuleCode: '',
id: moment().valueOf(),
});
onChange({
value: newvalue,
other: other,
});
}}
>
添加到顶部
</Button>
</Col>
<Col span={12}>
<Button
type="primary"
ghost
style={{ width: '100%' }}
onClick={() => {
let newvalue = JSON.parse(JSON.stringify(value)) || [];
newvalue.push({
noRuleCode: '',
id: moment().valueOf(),
});
onChange({
value: newvalue,
other: other,
});
}}
>
添加到底部
</Button>
</Col>
</Row>
</div>
);
};
export default Diyrule;
src/components/NewInitForm/EditTable/index.jsx
View file @ 36f252db
......@@ -7,7 +7,6 @@ import { doFetch } from '@/utils/doFetch';
const EditTable = (props) => {
const {
actionRef, //表格动作
formRef, //表单Ref
rowKey, // key
columns = [], //columns
......@@ -22,7 +21,9 @@ const EditTable = (props) => {
dataSource,
} = props;
const actionRefs = actionRef ?? useRef(),
let actionRefs = useRef(),
formRefs = formRef ?? useRef(),
ifspagination = pagination == 'false' || pagination === false,
[size, setsize] = useState('small');
......@@ -35,6 +36,9 @@ const EditTable = (props) => {
success: true,
total: dataSource?.length ?? 0,
};
// console.log('====================================');
// console.log(extraparams);
// console.log('====================================');
let newparams = {
...params,
...extraparams, //父组件传参
......@@ -125,6 +129,7 @@ const EditTable = (props) => {
{...props}
recordCreatorProps={false}
size={size}
params={{ ...extraparams }}
onSubmit={(params) => {
//console.log(params, 'onSubmit');
}}
......@@ -142,20 +147,20 @@ const EditTable = (props) => {
scroll={
x
? {
x: 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,
}
showTotal: (total, range) => <span>共{total}条</span>,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
defaultPageSize: pageSize || 15,
}
}
editable={{
type: 'multiple',
......@@ -164,7 +169,7 @@ const EditTable = (props) => {
}}
search={{
filterType: 'light', //轻量模式
placement: 'bottomLeft'
placement: 'bottomLeft',
}}
/>
);
......
src/components/NewInitForm/EditorItem/index.jsx 0 → 100644
View file @ 36f252db
/* eslint-disable react-hooks/exhaustive-deps */
import 'braft-editor/dist/index.css';
import BraftEditor from 'braft-editor';
import React, { useState, useMemo, useEffect } from 'react';
import moment from 'moment';
import defaultSetting from '../../../../config/defaultSettings';
export default function EditorItem({
value,
onChange,
height,
serverURL,
style,
bordered,
formRef,
curkey,
}) {
let UploadFn = (param) => {
const xhr = new XMLHttpRequest();
const fd = new FormData();
const successFn = (response) => {
// 假设服务端直接返回文件上传后的地址
// 上传成功后调用param.success并传入上传后的文件地址
param.success({
url: xhr.responseText ? JSON.parse(xhr.responseText).data?.dataList[0].url : null,
meta: {
id: moment(),
title: param.file.name,
alt: param.file.name,
loop: true, // 指定音视频是否循环播放
autoPlay: true, // 指定音视频是否自动播放
controls: true, // 指定音视频是否显示控制栏
poster: 'http://xxx/xx.png', // 指定视频播放器的封面
},
});
};
const progressFn = (event) => {
// 上传进度发生变化时调用param.progress
param.progress((event.loaded / event.total) * 100);
};
const errorFn = (response) => {
// 上传发生错误时调用param.error
param.error({
msg: '上传失败',
});
};
xhr.upload.addEventListener('progress', progressFn, false);
xhr.addEventListener('load', successFn, false);
xhr.addEventListener('error', errorFn, false);
xhr.addEventListener('abort', errorFn, false);
fd.append('file', param.file);
xhr.open(
'POST',
serverURL
? serverURL
: defaultSetting.proxypath + '/ngic-base-business/sysAttachment/uploadFile',
true,
);
xhr.send(fd);
};
return (
<div
style={{
...style,
border: bordered === false ? '#f9f9f9 solid 1px' : '#ddd solid 1px',
border: '#ddd solid 1px',
height: height ? height : 400,
overflow: 'hidden',
}}
>
<BraftEditor
media={{ uploadFn: UploadFn }}
value={BraftEditor.createEditorState(value)}
onChange={onChange}
/>
</div>
);
}
src/components/NewInitForm/Expandable/index.jsx 0 → 100644
View file @ 36f252db
import { doFetch } from '@/utils/doFetch';
import React, { useState, useEffect, useForceUpdate } from 'react';
import AutoTable from '../../AutoTable/mtable';
import EditTable from '../EditTable';
function Expandables({ value = [], onChange, item }) {
const [allDatasource, setallDatasource] = useState({});
const [nvalue, setnvalue] = useState([]);
return (
<div>
<AutoTable
columns={item?.columns}
path={item?.path}
extraparams={item?.extraparams}
expandable={{
expandRowByClick: true,
onExpand: (expanded, record) => {
if (!expanded) return;
//找到value中当前展开的值
let curvalue = value
? value.filter((it) => it.lifePieceAccountId == record.id)?.[0]
: {};
//value中的list
let curvalist = curvalue?.lineStockUseList ?? [];
doFetch({ url: item.expandablePath, params: { lifePieceAccountId: record.id } }).then(
(res) => {
//展开接口返回的结果
let curDatasource = res?.data?.dataList ?? [];
//组合数据
let result = curDatasource?.map((it) => {
const itemval =
curvalist?.filter?.((item) => item.lineStockId == it.id)?.[0] ?? false;
if (itemval) {
it.operateNum = itemval.operateNum;
}
return it;
});
setallDatasource((s) => ({
...s,
[record.id]: result,
}));
},
);
},
expandedRowRender: (record) => {
let curvalue = value
? value.filter((it) => it.lifePieceAccountId == record.id)?.[0]
: {};
// console.log('nvalue', nvalue);
// console.log('record', record);
// console.log('allDatasource:', allDatasource);
// console.log(
// 'defaultvalue:',
// nvalue?.filter((it) => it.lifePieceAccountId == record.id)?.[0]?.lineStockUseList,
// );
return (
<>
<EditTable
key={nvalue
.filter((it) => it.lifePieceAccountId == record.id)?.[0]
?.lineStockUseList.map((it) => it.lineStockId)}
resizeable={false}
alwaysShowAlert={false}
tableAlertRender={false}
tableAlertOptionRender={false}
defaultValue={nvalue
?.filter((it) => it.lifePieceAccountId == record.id)?.[0]
?.lineStockUseList.map((i) => ({
id: i.lineStockId,
operateNum: i.operateNum,
}))}
columns={[
{
title: '线边库',
dataIndex: 'stockName',
search: false,
key: 'stockName',
editable: false,
},
{
title: '供应商编号',
dataIndex: 'supplierNo',
key: 'supplierNo',
search: false,
editable: false,
},
{
title: '供应商名称',
dataIndex: 'supplierName',
search: false,
key: 'supplierName',
editable: false,
},
{
title: '可用数量',
dataIndex: 'usedStock',
search: false,
key: 'usedStock',
editable: false,
},
{
title: (
<div>
更换数量 <span style={{ color: 'red' }}>* </span>
</div>
),
dataIndex: 'operateNum',
search: false,
key: 'operateNum',
valueType: 'digit',
fieldProps: {
precision: 3,
},
},
]}
dataSource={allDatasource[record.id]}
extraparams={allDatasource}
rowSelection={{
getCheckboxProps: (record) => ({
disabled: record.isAsh == '1',
}),
columnWidth: 44,
preserveSelectedRowKeys: true,
selectedRowKeys: curvalue?.lineStockUseList
? curvalue.lineStockUseList?.map?.((it) => it?.lineStockId)
: [],
onChange: async (selectedKeys, selectedRows) => {
// debugger;
const curval = curvalue?.lineStockUseList ?? [];
const rowkeylist = curval?.map?.((it) => it?.lineStockId);
const newValue = selectedRows?.map((its) => {
if (rowkeylist?.includes(its?.id)) {
return curval?.filter((it) => it?.lineStockId == its?.id)[0];
} else {
return {
lineStockId: its.id,
operateNum: its.operateNum,
};
}
});
let nvalue = value ? [...value] : [];
if (value && value?.some((it) => it.lifePieceAccountId == record?.id)) {
nvalue = value?.map((it, i) => {
if (it.lifePieceAccountId == record.id) {
it.lineStockUseList = newValue;
}
return it;
});
} else {
nvalue.push({
lifePieceAccountId: record?.id,
lineStockUseList: newValue,
});
}
// console.log('nvalue', nvalue);
nvalue = nvalue.filter((it) => it.lineStockUseList.length !== 0);
await onChange(nvalue);
await setnvalue(nvalue);
},
}}
editable={{
onValuesChange: async (rower, recordList) => {
const curval = curvalue?.lineStockUseList ?? [];
const newValue = curval?.map((its) => {
if (its?.lineStockId == rower?.id) {
return {
lineStockId: rower.id,
operateNum: rower.operateNum,
};
} else {
return its;
}
});
let nvalue = value ? [...value] : [];
if (value && value?.some((it) => it.lifePieceAccountId == record?.id)) {
nvalue = value?.map((it, i) => {
if (it.lifePieceAccountId == record.id) {
it.lineStockUseList = newValue;
}
return it;
});
} else {
nvalue.push({
lifePieceAccountId: record.id,
lineStockUseList: newValue,
});
}
// console.log('nvalue', nvalue);
await onChange(nvalue);
await setnvalue(nvalue);
},
}}
/>
</>
);
},
}}
/>
</div>
);
}
export default Expandables;
src/components/NewInitForm/FormItems.jsx
View file @ 36f252db
import React, { useState, useRef, memo, createElement, useEffect } from "react";
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useRef, memo, createElement, useEffect, useMemo } from 'react';
import {
ProForm,
ProFormDependency,
......@@ -23,17 +24,37 @@ import {
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;
ProCard,
CheckCard,
ProFormFieldSet,
} from '@ant-design/pro-components';
import ImgCrop from 'antd-img-crop';
import { doFetch } from '@/utils/doFetch';
import moment from 'moment';
import { useAsyncEffect, useRequest } from 'ahooks';
import * as Antd from 'antd';
import { PlusOutlined, DownOutlined, CloseOutlined, RedoOutlined } from '@ant-design/icons';
import BraftEditor from 'braft-editor';
import EditTable from './EditTable';
import EditorItem from './EditorItem';
import Diyrule from './Diyrule';
import defaultSetting from '../../../config/defaultSettings';
import Expandables from './Expandable';
const {
Image,
Form,
Upload,
Col,
Pagination,
Avatar,
Dropdown,
Menu,
Tabs,
message,
AutoComplete,
Row,
} = Antd;
const AntdCheckBox = Antd.Checkbox;
const FormItems = {
Input,
......@@ -45,7 +66,9 @@ const FormItems = {
Date,
Time,
DateTime,
DateWeek,
DateMonth,
DateQuarter,
DateYear,
DateRange,
TimeRange,
......@@ -61,39 +84,46 @@ const FormItems = {
UploadBtn,
UploadImage,
UploadDragger,
FormSelectList,
Editor,
Diyrules,
FormList,
FormSelectList,
CheckboxItem,
RadioItem,
MyAutoComplete,
Expandable,
};
function upperCase(str) {
const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
return newStr;
}
// tree遍历
function treeForeach(tree, func) {
tree.forEach((data) => {
func(data);
data.children && treeForeach(data.children, func); // 遍历子树
});
}
let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
const value = action.getCurrentRowData();
let FormRender = memo(({ fields = [], name, curindex, formRef }) => {
return (
<>
{fields
.filter((it) => it.hideInForm !== true)
.map((item) => {
let key = item?.valueType ? upperCase(item?.valueType) : "Input";
let { hideInForm, editable } = item;
.map((item, index) => {
let key = item?.valueType ? upperCase(item?.valueType) : 'Input';
let { hideInForm } = 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);
return !hideInForm[its].includes(params[its]);
} else {
let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
return vals.indexOf(val) != -1;
return vals.indexOf(params[its]) != -1;
}
});
ifs = res.includes(false);
......@@ -103,15 +133,13 @@ let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
{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 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 style={{ padding: '4px 0 0 0', margin: 0 }}>
<b style={{ color: 'red' }}>!</b> 需满足条件才可以填写{item.title}
</p>
)}
</Col>
......@@ -122,7 +150,7 @@ let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
{createElement(FormItems[key], {
item: item,
colProps: item.colProps,
key: item.dataIndex,
key: item?.dataIndex,
name: name,
formRef,
curindex,
......@@ -133,33 +161,13 @@ let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
}}
</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,
key: item?.dataIndex,
name: name,
formRef,
curindex,
......@@ -174,19 +182,17 @@ let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => {
// colProps 默认删格
function Input({ item, colProps }) {
let keys = item.key ?? item.dataIndex ?? "";
keys = keys ?? "";
let keys = item?.key ?? item?.dataIndex ?? '';
const defaultrule =
keys.indexOf("dianhuas") != -1
keys.indexOf('phone') != -1
? {
pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/,
message: item.title + "格式不正确",
message: item.title + '格式不正确',
}
: keys.indexOf("mail") != -1
: 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: "邮箱格式不正确",
pattern: /^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$/,
message: '邮箱格式不正确',
}
: {};
......@@ -206,269 +212,387 @@ function Input({ item, colProps }) {
</>
);
}
function MyAutoComplete({ item, colProps, formRef }) {
const [options, setoptions] = useState([]);
const [username, setusername] = useState();
const { data, run, runAsync } = useRequest(
async () => {
let res = await doFetch({
url: '/auth/sysUser/queryLikeIotUsername',
params: { username },
});
return res?.data?.dataList;
},
{
manual: true,
debounceWait: 300,
},
);
useEffect(() => {
runAsync()
.then((data) => {
const options = data?.map((it) => ({
...it,
label: `${it?.username}-${it?.fullName}`,
value: `${it?.username}-${it?.fullName}`,
}));
setoptions(options);
})
.catch((error) => {
console.log(error);
});
}, [username]);
let col = item.colProps ?? colProps;
let curkey = item?.key ?? item?.dataIndex;
return (
<Col span={12}>
<ProForm.Item name={curkey} label={item.title} {...item.formItemProps}>
<AutoComplete
formRef={formRef}
allowClear={true}
style={{ width: '100%' }}
disabled={item?.disabled}
colProps={item.colProps ?? colProps}
onSearch={(e) => {
setusername(e);
}}
options={options}
onSelect={item?.onSelect}
{...item?.fieldProps}
/>
</ProForm.Item>
{/* createElement(children,{props:value,onChange}) */}
</Col>
);
}
//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}`}
/>
<>
<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}
/>
<>
<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 }) {
function Textarea({ item, colProps }) {
return (
<ProFormTextArea
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item.key ?? item.dataIndex}
colProps={item.colProps ?? { span: 24 }}
label={item.title}
placeholder={`请输入${item.title}`}
/>
<>
<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 ?? {}),
}}
/>
<>
<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 ?? 2, ...(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 ?? {}),
}}
/>
<>
<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%"
/>
<>
<ProFormDatePicker
fieldProps={item?.fieldProps}
formItemProps={item.formItemProps}
name={item?.key ?? item?.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
width="100%"
/>
</>
);
}
function DateWeek({ item, colProps }) {
const weekFormat = 'YYYY-MM-DD';
const customWeekStartEndFormat = (value) =>
`${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
.endOf('week')
.format(weekFormat)}`;
return (
<>
<ProFormDatePicker
fieldProps={{ ...item?.fieldProps, picker: 'week', format: customWeekStartEndFormat }}
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%"
/>
<>
<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%"
/>
</>
);
}
//DateQuarter
function DateQuarter({ item, colProps }) {
const quarterFormat = 'YYYY-MM-DD';
const customWeekStartEndFormat = (value) =>
`${moment(value).startOf('quarter').format(quarterFormat)} ~ ${moment(value)
.endOf('quarter')
.format(quarterFormat)}`;
return (
<>
<ProFormDatePicker
fieldProps={{ ...item?.fieldProps, picker: 'quarter', format: customWeekStartEndFormat }}
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%"
/>
<>
<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%"
/>
<>
<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%"
/>
<>
<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%"
/>
<>
<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%"
/>
<>
<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%"
/>
<>
<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
curlinkparams = curoption?.linkParams ?? {}, //获取linkParams下声明的key
extraParams = curoption?.extraParams ?? {};
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;
<>
<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}
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, ...extraParams },
});
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);
});
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 {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
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;
}
//console.log(
// curval,
// res?.data?.dataList?.map((it) => it.value),
// curkey,
// );
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
return res?.data?.dataList ?? [];
}}
showSearch
/>
);
}}
</ProFormDependency>
return res?.data?.dataList ?? [];
}}
showSearch
/>
);
}}
</ProFormDependency>
</>
);
}
......@@ -484,28 +608,26 @@ function NolinkSelect({ item, colProps }) {
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
request: async (params) => {
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}
/>
<>
<ProFormSelect
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item?.key ?? item?.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
showSearch
{...options}
/>
</>
);
}
......@@ -522,72 +644,77 @@ function Select(props) {
function LinkTreeSelect({ item, colProps, formRef, name, curindex }) {
let prevparse = useRef();
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
curlinkparams = curoption?.linkParams ?? {}, //获取linkParams下声明的key
extraParams = curoption?.extraParams ?? {};
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 });
<>
<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,
}}
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, ...extraParams },
});
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) => {
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;
//树结构所有value提取到数组
let allvalue = [];
treeForeach(res?.data?.dataList, (node) => {
allvalue.push(node?.key);
});
//过滤存在的value
if (Array.isArray(curval)) {
ifclean = allvalue?.filter?.((it) => {
return curval?.includes(it);
});
} else {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
} else {
ifclean = allvalue?.filter?.((it) => it == curval)?.[0];
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
}
prevparse.current = JSON.stringify(parse);
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
prevparse.current = JSON.stringify(parse);
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
</>
);
}
......@@ -603,32 +730,30 @@ function NolinkTreeSelect({ item, colProps }) {
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
request: async (params) => {
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}
/>
<>
<ProFormTreeSelect
fieldProps={{
...item?.fieldProps,
allowClear: true,
fieldNames: { label: 'title', value: 'key', children: 'children' },
showSearch: true,
}}
formItemProps={item.formItemProps}
name={item?.key ?? item?.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
</>
);
}
......@@ -644,75 +769,81 @@ function TreeSelect(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}`}
/>
<>
<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
curlinkparams = curoption?.linkParams ?? {}, //获取linkParams下声明的key
extraParams = curoption?.extraParams ?? {};
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;
<>
<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, ...extraParams },
});
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);
});
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 {
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 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: [],
},
......@@ -724,26 +855,25 @@ function NolinkCheckbox({ item, colProps }) {
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
request: async (params) => {
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}
/>
<>
<ProFormCheckbox.Group
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item?.key ?? item?.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
</>
);
}
......@@ -759,71 +889,77 @@ function Checkbox(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}`}
/>
<>
<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
curlinkparams = curoption?.linkParams ?? {}, //获取linkParams下声明的key
extraParams = curoption?.extraParams ?? {};
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;
<>
<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, ...extraParams },
});
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);
});
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 {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
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 });
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
</>
);
}
......@@ -839,26 +975,25 @@ function NolinkRadio({ item, colProps }) {
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
request: async (params) => {
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}
/>
<>
<ProFormRadio.Group
fieldProps={item.fieldProps}
formItemProps={item.formItemProps}
name={item?.key ?? item?.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
</>
);
}
......@@ -875,71 +1010,70 @@ function Radio(props) {
function LinkCascader({ item, colProps, formRef, name, curindex }) {
let prevparse = useRef();
let curoption = item.options ?? null,
curlinkparams = curoption?.linkParams ?? {}; //获取linkParams下声明的key
curlinkparams = curoption?.linkParams ?? {}, //获取linkParams下声明的key
extraParams = curoption?.extraParams ?? {};
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);
});
<>
<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: false,
}}
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, ...extraParams },
});
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 {
ifclean = res?.data?.dataList.filter(
(it) => it.value == curval
)?.[0]?.value;
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 });
}
formRef?.current?.setFieldsValue({ [curkey]: ifclean });
}
}
prevparse.current = JSON.stringify(parse);
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
prevparse.current = JSON.stringify(parse);
return res?.data?.dataList ?? [];
}}
/>
);
}}
</ProFormDependency>
</>
);
}
......@@ -955,31 +1089,29 @@ function NolinkCascader({ item, colProps }) {
};
} else if (curoption) {
options = {
request: async () => {
let list = await doFetch({
url: curoption?.path,
params: curoption?.params,
});
request: async (params) => {
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}
/>
<>
<ProFormCascader
fieldProps={{
...item?.fieldProps,
fieldNames: { label: 'title', value: 'key', children: 'children' },
showSearch: true,
}}
formItemProps={item.formItemProps}
name={item?.key ?? item?.dataIndex}
colProps={item.colProps ?? colProps}
label={item.title}
placeholder={`请选择${item.title}`}
{...options}
/>
</>
);
}
......@@ -996,96 +1128,104 @@ function Cascader(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}`}
/>
<>
<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}
/>
<>
<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}
/>
<>
<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 }) {
let token = `Bearer ${localStorage.getItem('TOKENES')}`;
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}`}
/>
<>
<ProFormUploadButton
fieldProps={{
...item?.fieldProps,
action: defaultSetting.proxypath + '/base/sysAttachment/uploadFile',
headers: { Authorization: token },
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}`}
max={item.max}
/>
</>
);
}
function UploadImg({ value, onChange, fieldProps }) {
let token = `Bearer ${localStorage.getItem('TOKENES')}`;
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";
file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error("只能上传.jpg/.jpeg/.png图片!");
message.error('只能上传.jpg/.jpeg/.png图片!');
return;
}
return true;
......@@ -1093,21 +1233,22 @@ function UploadImg({ value, onChange, fieldProps }) {
// maxCount 最大数量
const defaultconfig = {
name: "file",
action: REACT_APP_URL + "/hjjc/comAttach/uploadFile",
accept: ".jpg,.png,.jpeg",
listType: "picture-card",
name: 'file',
action: defaultSetting.proxypath + '/base/sysAttachment/uploadFile',
accept: '.jpg,.png,.jpeg',
listType: 'picture-card',
beforeUpload: beforeUpload,
defaultFileList: value,
headers: { token },
headers: { Authorization: token },
onChange(info) {
let {
file: { status },
file: { name, status, response },
fileList,
event,
} = info;
if (status == "error") {
if (status == 'error') {
message.error(`${info.file.name} 上传失败`);
} else if (status === "done") {
} else if (status === 'done') {
const transfile = fileList.map((it) => {
return it?.response ? it?.response?.data?.dataList[0] : it;
});
......@@ -1116,11 +1257,11 @@ function UploadImg({ value, onChange, fieldProps }) {
},
onRemove(file) {
let uid = file?.response?.data?.dataList[0]?.uid ?? file?.uid;
let newvalue = value?.filter((it) => it?.uid != uid);
let newvalue = value?.filter((it) => it.uid != uid);
onChange(newvalue);
},
onPreview(file) {
let url = "";
let url = '';
if (file.response) {
url = file.response.data.dataList[0].url;
} else if (file.url) {
......@@ -1141,6 +1282,7 @@ function UploadImg({ value, onChange, fieldProps }) {
<div style={{ marginTop: 8 }}>上传图片</div>
</div>
);
//console.log(value?.length, fieldProps.limit);
return (
<>
<Image
......@@ -1149,7 +1291,7 @@ function UploadImg({ value, onChange, fieldProps }) {
height={0}
preview={{
visible: image?.visible,
onVisibleChange: () => {
onVisibleChange: (e) => {
if (image?.visible) {
setImage((s) => ({
...s,
......@@ -1159,13 +1301,23 @@ function UploadImg({ value, onChange, fieldProps }) {
},
}}
/>
<Upload {...defaultconfig}>
{!value
? uploadButton
: value?.length < fieldProps.limit
? uploadButton
: null}
</Upload>
{fieldProps?.crop ? (
<ImgCrop
rotate
grid
quality={1}
shape={fieldProps?.crop?.shape ?? 'rect'} //裁切区域形状，'rect' 或 'round'
aspect={fieldProps?.crop?.aspect ?? 1 / 1} //裁切区域宽高比，width / height
>
<Upload {...defaultconfig}>
{!value ? uploadButton : value?.length < fieldProps.limit ? uploadButton : null}
</Upload>
</ImgCrop>
) : (
<Upload {...defaultconfig}>
{!value ? uploadButton : value?.length < fieldProps.limit ? uploadButton : null}
</Upload>
)}
</>
);
}
......@@ -1175,11 +1327,7 @@ function UploadImage({ item, colProps }) {
let col = item.colProps ?? colProps;
return (
<Col {...col}>
<Form.Item
name={item.key ?? item.dataIndex}
label={item.title}
{...item.formItemProps}
>
<Form.Item name={item?.key ?? item?.dataIndex} label={item.title} {...item.formItemProps}>
<UploadImg fieldProps={{ ...item?.fieldProps }} />
</Form.Item>
</Col>
......@@ -1188,109 +1336,273 @@ function UploadImage({ item, colProps }) {
// uploadDragger
function UploadDragger({ item, colProps }) {
let token = `Bearer ${localStorage.getItem('TOKENES')}`;
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}
/>
<>
<ProFormUploadDragger
fieldProps={{
...item?.fieldProps,
action: defaultSetting.proxypath + '/base/sysAttachment/uploadFile',
headers: { Authorization: token },
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;
// editor
function Editor({ item, colProps, formRef }) {
let col = item.colProps ?? colProps;
let fields = item.columns ?? [];
let curkey = item?.key ?? item?.dataIndex;
return (
<Col {...col}>
<ProForm.Item
// convertValue={(value) => {
// return BraftEditor.createEditorState(value);
// }}
transform={(value) => {
return {
[curkey]: value && value?.toHTML?.(),
};
}}
name={curkey}
label={item.title}
{...item.formItemProps}
>
<EditorItem
serverURL={defaultSetting.proxypath + '/base/sysAttachment/uploadFile'}
item={item}
params={item.params}
formRef={formRef}
curkey={curkey}
/>
</ProForm.Item>
</Col>
);
}
useEffect(() => {
let value = props.formRef.current.getFieldValue(
item?.key ?? item?.dataIndex
);
if (value?.length == 0) {
cie(true);
}
}, [props]);
// editor
function Diyrules({ item, colProps, formRef }) {
let col = item.colProps ?? colProps;
let curkey = item?.key ?? item?.dataIndex;
return (
<Col {...col}>
<ProForm.Item
convertValue={(value) => {
if (value?.other) return value;
let nrList = {
other: { increaseList: [] },
value: [],
};
value?.forEach?.((it) => {
if (it?.noRuleCode == 'increasing_order') {
nrList.other = it;
} else {
nrList.value.push(it);
}
});
return nrList;
}}
name={curkey}
label={item.title}
{...item.formItemProps}
>
<Diyrule />
</ProForm.Item>
</Col>
);
}
function Expandable({ item, colProps }) {
let col = item.colProps ?? colProps;
let curkey = item?.key ?? item?.dataIndex;
return (
<Col {...col} style={{ marginBottom: 16 }}>
<ProForm.Item name={curkey} label={item.title} {...item.formItemProps}>
<Expandables item={item} key={item} />
</ProForm.Item>
</Col>
);
}
function FormList({ item, colProps, formRef }) {
let col = item.colProps ?? colProps;
let fields = item.columns;
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,
}}
<ProFormList
name={item?.key ?? item?.dataIndex}
label={item.title}
min={item.min ?? 0}
max={item.max ?? 100}
itemContainerRender={(doms) => {
return <ProForm.Group>{doms}</ProForm.Group>;
}}
alwaysShowItemLabel={false}
copyIconProps={false}
>
{(f, index, action) => {
return (
<FormRender
fields={fields}
action={action}
curindex={index}
formRef={formRef}
name={item?.key ?? item?.dataIndex}
/>
</div>
)}
</div>
);
}}
</ProFormList>
</Col>
);
}
const Todo = ({ actionRef, value = [], item, params, rowKey, chooses, onChange }) => {
return (
<>
<EditTable
// loading={false}
actionRef={actionRef}
defaultValue={value} //调用接口合并初始值
path={item.path}
extraparams={params ?? {}}
rowKey={rowKey}
key={value}
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) => {
// console.log('row', selectedRows, 'selectkey:', selectedKeys);
// console.log('value:', value);
const rowkeylist = value ? value?.map((it) => it[rowKey]) : [];
// console.log('rowkeyList:', rowkeylist);
const newValue = selectedRows?.map((its) => {
if (rowkeylist.includes(its[rowKey])) {
return value.filter((it) => it[rowKey] == its[rowKey])[0];
} else {
return its;
}
});
// console.log('newValue:', newValue);
onChange(newValue);
},
}}
editable={{
onValuesChange: (record, recordList) => {
const newValue = value?.map((its) => {
if (its[rowKey] == record[rowKey]) {
return record;
} else {
return its;
}
});
// console.log('edit-newvalue:', newValue);
onChange(newValue);
},
}}
/>
</>
);
};
const Done = ({ actionRef, value, item, params, rowKey, chooses, onChange }) => {
return (
<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);
},
}}
/>
);
};
function TableSelect({ item, value, onChange, params = {} }) {
const rowKey = item?.rowKey ?? "id";
const rowKey = item?.rowKey ?? 'id';
const [chooses, setchooses] = useState([]); //mark 标记
const [activetab, setactivetab] = useState(1);
const actionRef = useRef();
let actionRef = useRef();
const menu = (selectedRows) => (
<Menu
......@@ -1320,11 +1632,9 @@ function TableSelect({ item, value, onChange, params = {} }) {
>
<span
style={{
color: chooses.includes(it[rowKey])
? "#1890ff"
: "#333333",
transition: "all 0.4s",
userSelect: "none",
color: chooses.includes(it[rowKey]) ? '#1890ff' : '#333333',
transition: 'all 0.4s',
userSelect: 'none',
}}
>
{it[item.rowName]}
......@@ -1332,9 +1642,7 @@ function TableSelect({ item, value, onChange, params = {} }) {
<CloseOutlined
onClick={(e) => {
e.stopPropagation();
let newvalue = value.filter(
(its) => its[rowKey] != it[rowKey]
);
let newvalue = value.filter((its) => its[rowKey] != it[rowKey]);
onChange(newvalue);
setchooses((s) => {
let news = [...s];
......@@ -1351,114 +1659,26 @@ function TableSelect({ item, value, onChange, params = {} }) {
: [
{
key: -1,
label: "请先选择",
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);
},
}}
/>
);
const propes = {
actionRef,
value,
item,
params,
rowKey,
chooses,
onChange,
};
return (
<div className="selecttable">
<Tabs
destroyInactiveTabPane={true}
tabBarExtraContent={
<div className="center">
<Dropdown overlay={menu(value ?? [])}>
......@@ -1468,11 +1688,7 @@ function TableSelect({ item, value, onChange, params = {} }) {
</Dropdown>
<div
className="center"
style={{
color: "red",
cursor: "pointer",
margin: "0 6px 0 16px",
}}
style={{ color: 'red', cursor: 'pointer', margin: '0 6px 0 16px' }}
onClick={() => {
onChange([]);
setchooses([]);
......@@ -1485,14 +1701,12 @@ function TableSelect({ item, value, onChange, params = {} }) {
}
onChange={setactivetab}
items={[
{ label: "数据选择", key: 1, children: activetab == 1 && Todo },
{
label: `选择结果${value?.length ?? 0}项`,
key: 2,
children: activetab == 2 && Done,
},
{ label: '数据选择', key: 1 },
{ label: `选择结果${value?.length ?? 0}项`, key: 2 },
]}
/>
{activetab == 1 && <Todo {...propes} />}
{activetab == 2 && <Done {...propes} />}
</div>
);
}
......@@ -1504,7 +1718,7 @@ function LinkSelectList({ item, colProps, formRef, name, curindex }) {
<Col {...col}>
<ProFormDependency name={Object.keys(curlinkparams)}>
{(params) => {
const curkey = item.key ?? item.dataIndex;
const curkey = item?.key ?? item?.dataIndex;
let result = {};
for (let key in curlinkparams) {
let reversekey = !curlinkparams[key] ? key : curlinkparams[key];
......@@ -1523,7 +1737,7 @@ function LinkSelectList({ item, colProps, formRef, name, curindex }) {
function NolinkSelectList({ item, colProps, formRef }) {
let col = item.colProps ?? colProps;
let curkey = item.key ?? item.dataIndex; //获取key
let curkey = item?.key ?? item?.dataIndex; //获取key
return (
<Col {...col}>
<Form.Item name={curkey} label={item.title} {...item.formItemProps}>
......
src/components/NewInitForm/index.jsx
View file @ 36f252db
import React, { createElement, memo, useRef, useState } from "react";
import React, { createElement, memo, useRef, useState } from 'react';
import {
ProForm,
ProFormDependency,
......@@ -7,10 +7,14 @@ import {
ProFormGroup,
ProFormList,
ProCard,
} from "@ant-design/pro-components";
import { doFetch } from "@/utils/doFetch";
import styles from "./index.less";
import FormItems from "./FormItems";
} from '@ant-design/pro-components';
import moment, { defaultFormat } from 'moment';
import { doFetch } from '@/utils/doFetch';
import styles from './index.less';
import FormItems from './FormItems';
import { Input, Col } from 'antd';
import { useDebounceFn } from 'ahooks';
import ColumnsTrans from './ColumnsTrans';
function upperCase(str) {
const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
......@@ -23,32 +27,36 @@ let FormRender = memo(({ fields = [], colProps, proformRef }) => {
{fields
.filter((it) => it.hideInForm !== true)
.map((item, index) => {
let key = item?.valueType ? upperCase(item?.valueType) : "Input";
let key = item?.valueType ? upperCase(item?.valueType) : 'Input';
let { hideInForm } = item;
item.formItemProps = item.formItemProps ?? { rules: [] };
if (item.valueType == "split") {
if (item.valueType == 'split') {
return (
<div
className={styles.title}
style={{ borderWidth: index == 0 ? 0 : 1 }}
>
<div className={styles.title} style={{ borderWidth: index == 0 ? 0 : 1 }}>
{item.title}
</div>
);
}
if (item?.valueType == 'nosubmit') {
return (
<Col {...(item.colProps ?? { span: 12 })} style={{ marginBottom: 24 }}>
<label style={{ marginBottom: 8, display: 'block' }}>{item?.title}</label>
<Input disabled value={item?.initialValue} />
</Col>
);
}
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);
return !hideInForm[its].includes(params[its]);
} else {
let vals = hideInForm[its].reverse; //取反 即不存在当前数组中的
return vals.indexOf(val) != -1;
return vals.indexOf(params[its]) != -1;
}
});
ifs = res.includes(false);
......@@ -86,32 +94,38 @@ let FormRender = memo(({ fields = [], colProps, 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,
}) {
function InitForm(props) {
let {
formRef,
onFinish = (vals) => {
//console.log(vals);
},
formKey,
params = {},
detailpath = '',
defaultFormValue = {},
detailFormat,
submitter,
fields,
extendField = '',
colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
onValuesChange = (changedValues, allValues) => {
//console.log(changedValues, allValues);
},
val,
style = {},
} = props;
const { run } = useDebounceFn(onFinish, { wait: 400 });
let proformRef = useRef();
proformRef = formRef ?? proformRef;
return (
return fields?.length == 0 ? (
<ColumnsTrans />
) : (
<ProForm
style={{ overflow: "hidden" }}
style={{ overflow: 'hidden', ...style }}
formRef={proformRef}
onFinish={onFinish}
onFinish={run}
formKey={formKey ?? parseInt(Math.random() * 1000000)}
params={params}
submitter={submitter ?? true}
......@@ -120,13 +134,69 @@ function InitForm({
gutter: 12,
}}
request={async (params) => {
if (detailpath) {
if (detailpath && val != 'add') {
let res = await doFetch({ url: detailpath, params });
if (extendField) {
let obj = {};
res?.data?.data[extendField]?.forEach?.((it) => {
obj[it?.fieldId] = it?.fieldRealValue;
});
// console.log({
// ...obj,
// ...defaultFormValue,
// ...(res?.data?.data ?? {}),
// });
return {
...obj,
...defaultFormValue,
...(res?.data?.data ?? {}),
...relationSupplierList,
};
}
//反填参数 格式化
const relationSupplierList = res?.data?.data?.relationSupplierList
? {
relationSupplierList: res?.data?.data?.relationSupplierList?.map?.((it, i) => {
return {
...it,
id: it?.supplierId,
};
}),
}
: {};
const supplierList = res?.data?.data?.supplierList
? {
supplierList: res?.data?.data?.supplierList?.map?.((it, i) => {
return {
...it,
id: it?.supplierId,
};
}),
}
: {};
let result = res?.data?.data;
if (result?.nrList) {
result.nrList = result?.nrList?.map((it) => {
it.sort = it.sort - 1;
return it;
});
}
return {
...(res?.data?.data ?? {}),
...defaultFormValue,
...(result ?? {}),
...relationSupplierList,
...supplierList,
};
} else {
// console.log({
// ...defaultFormValue,
// });
return {
...defaultFormValue,
};
......@@ -138,11 +208,10 @@ function InitForm({
}}
>
<FormRender
fields={fields?.filter((it) => it?.valueType != "option")}
fields={fields?.filter((it) => it.valueType != 'option')}
colProps={colProps}
proformRef={proformRef}
/>
{ptree && children}
</ProForm>
);
}
......
src/components/NewInitForm/index.less
View file @ 36f252db
@import '~antd/es/style/variable.less';
.title {
position: relative;
width: 100%;
margin-bottom: 8px;
padding-left: 16px;
color: #000000;
font-weight: bolder;
font-size: 16px;
&::before {
......@@ -11,7 +13,7 @@
left: 7px;
width: 3px;
height: 16px;
background-color: #3d8ad7;
background-color: @primary-color;
border-radius: 4px;
content: '';
}
......
src/pages/Printer/fields.js
View file @ 36f252db
export default [
{
title: "物料（名称+编码）",
key: "wlid",
dataIndex: "wlid",
},
{
title: "规格型号",
key: "specificationModel",
dataIndex: "specificationModel",
},
{
title: "牌号",
key: "shopSign",
dataIndex: "shopSign",
},
{
title: "铁损",
key: "ironLoss",
dataIndex: "ironLoss",
},
{
title: "片厚",
key: "sheetThickness",
dataIndex: "sheetThickness",
},
{
title: "其他信息",
key: "split",
dataIndex: "split",
valueType:'split'
},
{
title: "供应商",
key: "supplierId",
dataIndex: "supplierId",
},
];
import { doFetch } from "@/utils/doFetch";
export function getColumns(setDrawer, formRef) {
return [
{
title: "物料（名称+编码）",
key: "materieId",
dataIndex: "materieId",
valueType: "select",
formItemProps: { rules: [{ required: true, message: "此项为必填项" }] },
options: {
path: "/ngic-workmanship/pmMaterie/query/selectbox",
},
fieldProps: {
onChange: (value, options) => {
if (value) {
doFetch({
url: "/ngic-workmanship/pmMaterie/queryById",
params: { id: value },
}).then((res) => {
console.log(res);
const data = res?.data?.data;
formRef.current.setFieldValue(
"specificationModel",
data?.specificationModel ?? ""
);
formRef.current.setFieldValue("shopSign", data?.shopSign ?? "");
formRef.current.setFieldValue("ironLoss", data?.ironLoss ?? "");
formRef.current.setFieldValue(
"sheetThickness",
data?.sheetThickness ?? ""
);
});
} else {
formRef?.current?.resetFields();
}
},
},
},
{
title: "规格型号",
key: "specificationModel",
dataIndex: "specificationModel",
fieldProps: {
disabled: true,
},
},
{
title: "牌号",
key: "shopSign",
dataIndex: "shopSign",
fieldProps: {
disabled: true,
},
},
{
title: "铁损",
key: "ironLoss",
dataIndex: "ironLoss",
fieldProps: {
disabled: true,
},
},
{
title: "片厚",
key: "sheetThickness",
dataIndex: "sheetThickness",
fieldProps: {
disabled: true,
},
},
{
title: "手动录入",
key: "split",
dataIndex: "split",
valueType: "split",
},
{
title: "供应商",
key: "supplierId",
dataIndex: "supplierId",
valueType: "select",
options: {
path: "/ngic-auth/sysSupplier/query/selection",
params:{}
},
},
{
title: "单边厚度",
key: "unilateralThickness",
dataIndex: "unilateralThickness",
valueType:'digit'
},
{
title: "备注",
key: "remark",
dataIndex: "remark",
valueType: "textarea",
},
{
title: "列表",
valueType: "formList",
dataIndex: "list",
initialValue: [
{
state: "all",
title: "标题",
},
],
colProps: {
xs: 24,
sm: 24,
},
columns: [
{
title: "重量",
dataIndex: "weight",
key: "weight",
valueType: "digit",
colProps: {
sm: 6,
},
fieldProps: {
precision: 3,
max: 999999,
},
formItemProps: {
rules: [
{
required: true,
message: "此项为必填项",
},
],
},
},
{
title: "宽度",
dataIndex: "width",
key: "width",
valueType: "digit",
fieldProps: {
mode: "multiple",
precision: 3,
max: 999999,
},
colProps: {
sm: 6,
},
},
{
title: "米数",
dataIndex: "length",
key: "length",
valueType: "digit",
fieldProps: {
precision: 3,
max: 999999,
},
colProps: {
sm: 6,
},
},
{
title: "批次号",
dataIndex: "materieControlNo",
key: "materieControlNo",
valueType: "input",
formItemProps: {
rules: [
{
required: false,
message: "此项为必填项",
},
],
},
colProps: {
sm: 6,
},
},
],
search: false,
},
];
}
src/pages/Printer/index.jsx
View file @ 36f252db
import React, { useEffect, useRef, useReducer, useState } from "react";
import React, { useEffect, useRef, useReducer, useState, useMemo } from "react";
import {
Button,
Tooltip,
......@@ -11,7 +11,7 @@ import {
} from "antd";
import AutoTable from "@/components/AutoTable";
import { useRequest } from "umi";
import defaultFields from "./fields.js";
import { getColumns } from "./fields.js";
import { doFetch } from "@/utils/doFetch";
import InitForm from "@/components/NewInitForm";
import { start } from "@/utils/printHandle.js";
......@@ -112,15 +112,57 @@ const Station = (props) => {
});
const [selectIds, setselectIds] = useState([]);
let saveData = (values, fn) => {
let newfields = JSON.parse(JSON.stringify(values));
const formFields = useMemo(() => {
return getColumns(setDrawer, formRef);
});
const saveAndPrint = () => {
confirm({
title: `当前已完成信息填写，是否保存并立即打印？`,
icon: <ExclamationCircleFilled />,
width: 500,
okText: '确定',
cancelText:"取消",
onOk() {
formRef?.current?.validateFields().then((formData) => {
start("/ngic-workmanship/wmsMaterieLabel/save", formData);
setDrawer((v) => ({
...v,
visible: false,
}));
message.success("保存成功！", 2);
});
},
onCancel() {
console.log("Cancel");
},
});
};
const saveData = (type) => {
if (type === 1) {
formRef?.current?.validateFields().then((formData) => {
doFetch({
url: "/ngic-workmanship/wmsMaterieLabel/save",
params: formData,
}).then((res) => {
if (res?.code == "0000") {
setDrawer((v) => ({
...v,
visible: false,
}));
}
message.success("保存成功！", 2);
});
});
} else {
saveAndPrint();
}
//新增&修改
let difrid = iftype.val == "edit" ? { id: curitem.id } : {};
run({
url: "/ngic-auth/sysStation/save",
params: { ...newfields, ...difrid },
});
// let difrid = iftype.val == "edit" ? { id: curitem.id } : {};
// run({
// url: "/ngic-auth/sysStation/save",
// params: { ...newfields, ...difrid },
// });
};
const showConfirm = () => {
......@@ -128,6 +170,8 @@ const Station = (props) => {
title: `当前已选择 ${selectIds?.length} 条标签数据，是否全部打印？`,
icon: <ExclamationCircleFilled />,
width: 500,
okText: '确定',
cancelText:"取消",
onOk() {
start("/ngic-workmanship/wmsMaterieLabel/queryByIds", {
ids: selectIds,
......@@ -175,7 +219,6 @@ const Station = (props) => {
},
preserveSelectedRowKeys: true,
};
console.log(defaultFields);
return (
<div>
<AutoTable
......@@ -202,7 +245,7 @@ const Station = (props) => {
>
<InitForm
formRef={formRef}
fields={defaultFields}
fields={formFields}
onChange={(changedValues, allValues) => {}}
actions={() => {
return null;
......@@ -213,14 +256,14 @@ const Station = (props) => {
type="primary"
// loading={loading || !vs}
style={{ marginRight: 16 }}
onClick={() => saveData()}
onClick={() => saveData(1)}
>
保存
</Button>
<Button
type="primary"
// loading={loading || !vs}
onClick={() => saveData()}
onClick={() => saveData(2)}
>
保存并打印
</Button>
......
src/utils/mymodelhtml.js
View file @ 36f252db
......@@ -44,20 +44,26 @@ export function str(data) {
// </table>`;
return ` <div style="display:flex; width:100% ;height:100%; flex-direction: column;justify-self: space-between;">
<div style="display:flex; flex-direction: row;flex:4;">
<div style="display:flex; flex-direction: row;flex:2;">
<div style="display:flex;flex-direction: column;flex:2">
<div style="flex:1">卷料名称：${data?.materieName ?? "--"}</div>
<div style="flex:1">卷料编码：${data?.materieCode ?? "--"}</div>
<div style="flex:1">牌号：${data?.shopSign ?? "--"}片</div>
<div style="flex:1">单边卷料厚度：${data?.unilateralThickness ?? "--"}mm</div>
</div>
<div style="flex:1">
<img src=${data?.qrCodeUrl} style="width:90px"/>
</div>
</div>
<div style="display:flex; flex-direction: row;flex:2;">
<div style="flex:3;display:flex;flex-direction: column;">
<div style="flex:1">批次：${data?.materieControlNo ?? "--"}</div>
<div style="flex:1">单边卷料厚度：${
data?.unilateralThickness ?? "--"
}mm</div>
</div>
<div style="flex:1">
<img src=${data?.qrCodeUrl} style="width:100%"/>
</div>
</div>
<div style="display:flex; flex-direction: row;flex:1;">
<div style="flex:2">铁损：${data?.ironLoss ?? "--"}w/kg</div>
<div style="flex:3">批次：${data?.materieControlNo ?? "--"}</div>
<div style="flex:3">牌号：${data?.shopSign ?? "--"}片</div>
</div>
<div style="display:flex; flex-direction: row;flex:1;">
<div style="flex:2">宽度：${data?.width ?? "--"}mm</div>
......@@ -67,8 +73,6 @@ export function str(data) {
<div style="flex:2">重量：${data?.weight ?? "--"}KG</div>
<div style="flex:3">米数：${data?.length ?? "--"}M</div>
</div>
<div style="display:flex; flex-direction: row;flex:1;">
<div style="flex:1">条码：${data?.materieControlNo ?? "--"}</div>
</div>
</div>`;
}
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