From 36f252dbf4bff9dcb2867b2b37abf4f0a54ecfc9 Mon Sep 17 00:00:00 2001 From: krysent <10075251+krysent@user.noreply.gitee.com> Date: Fri, 28 Jul 2023 15:05:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/NewInitForm/ColumnsTrans.jsx | 83 + src/components/NewInitForm/Diyrule/index.jsx | 589 +++++ .../NewInitForm/EditTable/index.jsx | 27 +- .../NewInitForm/EditorItem/index.jsx | 78 + .../NewInitForm/Expandable/index.jsx | 208 ++ src/components/NewInitForm/FormItems.jsx | 1932 +++++++++-------- src/components/NewInitForm/index.jsx | 151 +- src/components/NewInitForm/index.less | 4 +- src/pages/Printer/fields.js | 224 +- src/pages/Printer/index.jsx | 69 +- src/utils/mymodelhtml.js | 24 +- 12 files changed, 2416 insertions(+), 974 deletions(-) create mode 100644 src/components/NewInitForm/ColumnsTrans.jsx create mode 100644 src/components/NewInitForm/Diyrule/index.jsx create mode 100644 src/components/NewInitForm/EditorItem/index.jsx create mode 100644 src/components/NewInitForm/Expandable/index.jsx diff --git a/package.json b/package.json index 6ebcd5f..f9fb4c2 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@umijs/route-utils": "^2.0.0", "ahooks": "^3.3.12", "antd": "^4.21.5", + "antd-img-crop": "^4.12.2", "array-move": "^4.0.0", "braft-editor": "^2.3.9", "classnames": "^2.3.0", diff --git a/src/components/NewInitForm/ColumnsTrans.jsx b/src/components/NewInitForm/ColumnsTrans.jsx new file mode 100644 index 0000000..02f87c3 --- /dev/null +++ b/src/components/NewInitForm/ColumnsTrans.jsx @@ -0,0 +1,83 @@ +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; diff --git a/src/components/NewInitForm/Diyrule/index.jsx b/src/components/NewInitForm/Diyrule/index.jsx new file mode 100644 index 0000000..547ec3c --- /dev/null +++ b/src/components/NewInitForm/Diyrule/index.jsx @@ -0,0 +1,589 @@ +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; diff --git a/src/components/NewInitForm/EditTable/index.jsx b/src/components/NewInitForm/EditTable/index.jsx index 910d1fc..68b888a 100644 --- a/src/components/NewInitForm/EditTable/index.jsx +++ b/src/components/NewInitForm/EditTable/index.jsx @@ -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', }} /> ); diff --git a/src/components/NewInitForm/EditorItem/index.jsx b/src/components/NewInitForm/EditorItem/index.jsx new file mode 100644 index 0000000..3bd8043 --- /dev/null +++ b/src/components/NewInitForm/EditorItem/index.jsx @@ -0,0 +1,78 @@ +/* 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> + ); +} diff --git a/src/components/NewInitForm/Expandable/index.jsx b/src/components/NewInitForm/Expandable/index.jsx new file mode 100644 index 0000000..3229130 --- /dev/null +++ b/src/components/NewInitForm/Expandable/index.jsx @@ -0,0 +1,208 @@ +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; diff --git a/src/components/NewInitForm/FormItems.jsx b/src/components/NewInitForm/FormItems.jsx index 4a5c3c4..46a472a 100644 --- a/src/components/NewInitForm/FormItems.jsx +++ b/src/components/NewInitForm/FormItems.jsx @@ -1,4 +1,5 @@ -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=""> </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}> diff --git a/src/components/NewInitForm/index.jsx b/src/components/NewInitForm/index.jsx index d78c9da..e462d64 100644 --- a/src/components/NewInitForm/index.jsx +++ b/src/components/NewInitForm/index.jsx @@ -1,4 +1,4 @@ -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> ); } diff --git a/src/components/NewInitForm/index.less b/src/components/NewInitForm/index.less index e0ec9f1..abf3f83 100644 --- a/src/components/NewInitForm/index.less +++ b/src/components/NewInitForm/index.less @@ -1,8 +1,10 @@ +@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: ''; } diff --git a/src/pages/Printer/fields.js b/src/pages/Printer/fields.js index 0a5cdf0..43843e3 100644 --- a/src/pages/Printer/fields.js +++ b/src/pages/Printer/fields.js @@ -1,39 +1,185 @@ -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, + }, + ]; +} diff --git a/src/pages/Printer/index.jsx b/src/pages/Printer/index.jsx index 82c4879..407f6ce 100644 --- a/src/pages/Printer/index.jsx +++ b/src/pages/Printer/index.jsx @@ -1,4 +1,4 @@ -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> diff --git a/src/utils/mymodelhtml.js b/src/utils/mymodelhtml.js index e9e0bbc..df13616 100644 --- a/src/utils/mymodelhtml.js +++ b/src/utils/mymodelhtml.js @@ -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>`; } -- 2.21.0