From e822f7f875f50dc4af33637fbd2e44ab0644715a Mon Sep 17 00:00:00 2001 From: krysent <10075251+krysent@user.noreply.gitee.com> Date: Thu, 27 Jul 2023 17:44:59 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../NewInitForm/EditTable/index.jsx | 173 ++ src/components/NewInitForm/FormItems.jsx | 1545 +++++++++++++++++ src/components/NewInitForm/index.css | 28 + src/components/NewInitForm/index.jsx | 150 ++ src/components/NewInitForm/index.less | 28 + src/pages/Printer/fields.js | 89 +- src/pages/Printer/index.jsx | 17 +- 7 files changed, 1965 insertions(+), 65 deletions(-) create mode 100644 src/components/NewInitForm/EditTable/index.jsx create mode 100644 src/components/NewInitForm/FormItems.jsx create mode 100644 src/components/NewInitForm/index.css create mode 100644 src/components/NewInitForm/index.jsx create mode 100644 src/components/NewInitForm/index.less diff --git a/src/components/NewInitForm/EditTable/index.jsx b/src/components/NewInitForm/EditTable/index.jsx new file mode 100644 index 0000000..910d1fc --- /dev/null +++ b/src/components/NewInitForm/EditTable/index.jsx @@ -0,0 +1,173 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable react-hooks/rules-of-hooks */ +import React, { useEffect, useRef, useState, memo, useMemo } from 'react'; +import { EditableProTable } from '@ant-design/pro-components'; +import { Tooltip } from 'antd'; +import { doFetch } from '@/utils/doFetch'; + +const EditTable = (props) => { + const { + actionRef, //è¡¨æ ¼åŠ¨ä½œ + formRef, //表å•Ref + rowKey, // key + columns = [], //columns + style, //style + path, //接å£åœ°å€ + extraparams, //é¢å¤–傿•° + pageSize, //修改默认pageSize + pagination, //分页设置 + x, //æ¨ªå‘æ»šåЍ + refreshDep, //ä¾èµ–刷新 (已废弃) + getDefaultSelected, //å˜åœ¨é»˜è®¤é€‰ä¸å‘上返回选ä¸å€¼ + dataSource, + } = props; + + const actionRefs = actionRef ?? useRef(), + formRefs = formRef ?? useRef(), + ifspagination = pagination == 'false' || pagination === false, + [size, setsize] = useState('small'); + + //è°ƒç”¨æŽ¥å£ + const request = async (params, sort, filter) => { + if (!path) + return { + data: dataSource ?? [], + success: true, + total: dataSource?.length ?? 0, + }; + let newparams = { + ...params, + ...extraparams, //çˆ¶ç»„ä»¶ä¼ å‚ + pageIndex: params.current, + pageSize: params.pageSize || pageSize, + }; + delete newparams.current; + if (ifspagination) { + delete newparams.pageIndex; + delete newparams.pageSize; + } + const result = await doFetch({ url: path, params: newparams }); + //分页结果 + let data = result?.data?.page?.list, + success = true, + total = result?.data?.page?.total; + //ä¸å¸¦åˆ†é¡µèŽ·å–结果 + if (ifspagination || !data) { + data = result?.data?.dataList; + total = result?.data?.dataList?.length; + } + //å˜åœ¨é»˜è®¤é€‰ä¸å‘上返回选ä¸å€¼ + getDefaultSelected && getDefaultSelected(result?.data); + return { + data, + success, + total, + }; + }; + + let columncs = useMemo(() => { + return columns.map((item, index) => { + let it = { ...item }; + let itemwidth = it.width ? it.width : 'auto'; + let options = {}; + if (it.valueType == 'select' || it.valueType == 'checkbox') { + if (Array.isArray(it.options)) { + options = { + fieldProps: { + ...it?.fieldProps, + options: [...it.options], + }, + }; + } else if (it.options) { + options = { + request: async (params) => { + let list = await doFetch({ url: it?.options?.path, params: it?.options?.params }); + return list.data.dataList; + }, + }; + } + } + if (it.valueType == 'option') { + options = { + key: 'option', + dataIndex: 'option', + fixed: 'right', + }; + } + if (!it.render) { + options = { + ...options, + render: (text, row) => { + return ( + <Tooltip title={row[it.dataIndex]} placement="topLeft"> + <span className="table-cell">{row[it.dataIndex] ?? '-'}</span> + </Tooltip> + ); + }, + }; + } + + options = { + ...options, + width: itemwidth, + }; + + delete it.formItemProps; + return { + ...it, + ...options, + }; + }); + }, [columns]); + + return ( + <EditableProTable + {...props} + recordCreatorProps={false} + size={size} + onSubmit={(params) => { + //console.log(params, 'onSubmit'); + }} + onSizeChange={(size) => { + localStorage.setItem('size', size); //è®¾ç½®å…¨å±€è¡¨æ ¼è§„æ ¼ç¼“å˜ + setsize(size); + }} + columns={columncs ?? []} + style={style || {}} + actionRef={actionRefs} + formRef={formRefs} + rowKey={rowKey ?? 'id'} //è¡¨æ ¼æ¯è¡Œæ•°æ®çš„key + dateFormatter="string" + request={request} + scroll={ + x + ? { + x: x, + } + : {} + } + pagination={ + ifspagination + ? false + : { + showTotal: (total, range) => <span>å…±{total}æ¡</span>, + showQuickJumper: true, + showSizeChanger: true, + pageSizeOptions: [5, 10, 15, 30, 50, 100, 200], + defaultPageSize: pageSize || 15, + } + } + editable={{ + type: 'multiple', + editableKeys: props?.rowSelection?.selectedRowKeys ?? [], + ...props?.editable, + }} + search={{ + filterType: 'light', //è½»é‡æ¨¡å¼ + placement: 'bottomLeft' + }} + /> + ); +}; + +export default memo(EditTable); diff --git a/src/components/NewInitForm/FormItems.jsx b/src/components/NewInitForm/FormItems.jsx new file mode 100644 index 0000000..4a5c3c4 --- /dev/null +++ b/src/components/NewInitForm/FormItems.jsx @@ -0,0 +1,1545 @@ +import React, { useState, useRef, memo, createElement, useEffect } from "react"; +import { + ProForm, + ProFormDependency, + ProFormSelect, + ProFormText, + ProFormMoney, + ProFormTextArea, + ProFormDigit, + ProFormDigitRange, + ProFormDatePicker, + ProFormDateTimePicker, + ProFormDateRangePicker, + ProFormDateTimeRangePicker, + ProFormTimePicker, + ProFormTreeSelect, + ProFormCheckbox, + ProFormRadio, + ProFormCascader, + ProFormSwitch, + ProFormRate, + ProFormSlider, + ProFormUploadDragger, + ProFormUploadButton, + ProFormList, +} from "@ant-design/pro-components"; +import { doFetch } from "@/utils/doFetch"; +import * as Antd from "antd"; +import { + PlusOutlined, + DownOutlined, + RedoOutlined, + CloseOutlined, +} from "@ant-design/icons"; +import EditTable from "./EditTable"; +const { Image, Form, Upload, Col, Tabs, Dropdown, Menu, Empty } = Antd; + +const FormItems = { + Input, + Password, + Money, + Textarea, + Digit, + DigitRange, + Date, + Time, + DateTime, + DateMonth, + DateYear, + DateRange, + TimeRange, + DateTimeRange, + Select, + TreeSelect, + Checkbox, + Radio, + Switch, + Cascader, + Rate, + Slider, + UploadBtn, + UploadImage, + UploadDragger, + FormSelectList, + FormList, + CheckboxItem, + RadioItem, +}; + +function upperCase(str) { + const newStr = str.slice(0, 1).toUpperCase() + str.slice(1); + return newStr; +} + +let FormRender = memo(({ fields = [], name, curindex, formRef, action }) => { + const value = action.getCurrentRowData(); + return ( + <> + {fields + .filter((it) => it.hideInForm !== true) + .map((item) => { + let key = item?.valueType ? upperCase(item?.valueType) : "Input"; + let { hideInForm, editable } = item; + if (hideInForm && Object.keys(hideInForm)) { + return ( + <ProFormDependency name={Object.keys(hideInForm)}> + {(params) => { + let ifs = true; + let res = Object.keys(hideInForm).map((its) => { + let val = + JSON.stringify(params[its]) === "[]" ? "[]" : params[its]; + if (Array.isArray(hideInForm[its])) { + return !hideInForm[its].includes(val); + } else { + let vals = hideInForm[its].reverse; //å–å å³ä¸å˜åœ¨å½“剿•°ç»„ä¸çš„ + return vals.indexOf(val) != -1; + } + }); + ifs = res.includes(false); + if (ifs) { + return ( + <Col {...item.colProps}> + {curindex == 0 ? ( + <p> + <label htmlFor="">{item.title}</label> + <p style={{ padding: "6px 0 0 0", margin: 0 }}> + <b style={{ color: "red" }}>!</b>{" "} + 需满足æ¡ä»¶æ‰å¯ä»¥å¡«å†™{item.title} + </p> + </p> + ) : ( + <p style={{ padding: "4px 0 0 0", margin: 0 }}> + <b style={{ color: "red" }}>!</b>{" "} + 需满足æ¡ä»¶æ‰å¯ä»¥å¡«å†™{item.title} + </p> + )} + </Col> + ); + } else { + return ( + <> + {createElement(FormItems[key], { + item: item, + colProps: item.colProps, + key: item.dataIndex, + name: name, + formRef, + curindex, + })} + </> + ); + } + }} + </ProFormDependency> + ); + } else if (editable === false) { + return curindex === 0 ? ( + <Col {...item.colProps} style={{ height: 68 }}> + <p> + <label htmlFor="">{item.title}</label> + <p style={{ padding: "6px 0 0 0", margin: 0 }}> + {value[item?.key ?? item?.dataIndex] ?? "-"} + </p> + </p> + </Col> + ) : ( + <Col {...item.colProps} style={{ height: 68 }}> + <p> + <label htmlFor=""> </label> + <p style={{ padding: "6px 0 0 0", margin: 0 }}> + {value[item?.key ?? item?.dataIndex] ?? "-"} + </p> + </p> + </Col> + ); + } else { + return ( + <> + {createElement(FormItems[key], { + item: item, + colProps: item.colProps, + key: item.dataIndex, + name: name, + formRef, + curindex, + })} + </> + ); + } + })} + </> + ); +}); + +// colProps é»˜è®¤åˆ æ ¼ +function Input({ item, colProps }) { + let keys = item.key ?? item.dataIndex ?? ""; + keys = keys ?? ""; + const defaultrule = + keys.indexOf("dianhuas") != -1 + ? { + pattern: /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/, + message: item.title + "æ ¼å¼ä¸æ£ç¡®", + } + : keys.indexOf("mail") != -1 + ? { + pattern: + /^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-z]{2,}$/, + message: "é‚®ç®±æ ¼å¼ä¸æ£ç¡®", + } + : {}; + + return ( + <> + <ProFormText + fieldProps={item?.fieldProps} + formItemProps={{ + ...item.formItemProps, + rules: [defaultrule, ...(item?.formItemProps?.rules ?? [])], + }} //手机å·é‚®ç®±è‡ªå¸¦éªŒè¯ + name={keys} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请输入${item.title}`} + /> + </> + ); +} +//pwd +function Password({ item, colProps }) { + return ( + <ProFormText.Password + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请输入${item.title}`} + /> + ); +} +//money +function Money({ item, colProps }) { + return ( + <ProFormMoney + locale="zh-CN" + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请输入${item.title}`} + min={item.min} + max={item.max} + /> + ); +} + +//textarea +function Textarea({ item }) { + return ( + <ProFormTextArea + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? { span: 24 }} + label={item.title} + placeholder={`请输入${item.title}`} + /> + ); +} + +//digit +function Digit({ item, colProps }) { + return ( + <ProFormDigit + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请输入${item.title}`} + min={item.min} + max={item.max} + fieldProps={{ + precision: item.precision ?? 0, + ...(item?.fieldProps ?? {}), + }} + /> + ); +} + +//digitrange +function DigitRange({ item, colProps }) { + return ( + <ProFormDigitRange + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={["请输入最å°å€¼", "请输入最大值"]} + min={item.min} + max={item.max} + fieldProps={{ + precision: item.precision ?? 0, + ...(item?.fieldProps ?? {}), + }} + /> + ); +} + +//Date +function Date({ item, colProps }) { + return ( + <ProFormDatePicker + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + width="100%" + /> + ); +} + +//DateMonth +function DateMonth({ item, colProps }) { + return ( + <ProFormDatePicker + fieldProps={{ ...item?.fieldProps, picker: "month", format: "YYYY-MM" }} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + width="100%" + /> + ); +} +//DateYear +function DateYear({ item, colProps }) { + return ( + <ProFormDatePicker + fieldProps={{ ...item?.fieldProps, picker: "year", format: "YYYY" }} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + width="100%" + /> + ); +} + +//dateTime +function DateTime({ item, colProps }) { + return ( + <ProFormDateTimePicker + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + width="100%" + /> + ); +} +//DateRange +function DateRange({ item, colProps }) { + return ( + <ProFormDateRangePicker + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={["请选择开始日期", "è¯·é€‰æ‹©ç»“æŸæ—¥æœŸ"]} + width="100%" + /> + ); +} +//dateTimeRange +function DateTimeRange({ item, colProps }) { + return ( + <ProFormDateTimeRangePicker + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={["请选择开始时间", "è¯·é€‰æ‹©ç»“æŸæ—¶é—´"]} + width="100%" + /> + ); +} +//Time +function Time({ item, colProps }) { + return ( + <ProFormTimePicker + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + width="100%" + /> + ); +} +//TimeRange +function TimeRange({ item, colProps }) { + return ( + <ProFormTimePicker.RangePicker + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={["请选择开始时间", "è¯·é€‰æ‹©ç»“æŸæ—¶é—´"]} + width="100%" + /> + ); +} + +function LinkSelect({ item, colProps, formRef, name, curindex }) { + let curoption = item.options ?? null, + curlinkparams = curoption?.linkParams ?? {}; //获å–linkParams下声明的key + return ( + <ProFormDependency name={Object.keys(curlinkparams)}> + {(params) => { + const curkey = item.key ?? item.dataIndex; + return ( + <ProFormSelect + convertValue={(value) => { + return item?.fieldProps?.mode == "multiple" + ? !value + ? [] + : null + : null; + }} + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={curkey} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + params={params} + mode={item?.mode} + request={async (parse) => { + let result = {}; + for (let key in curlinkparams) { + let reversekey = !curlinkparams[key] ? key : curlinkparams[key]; + result[reversekey] = parse[key]; + } + let res = await doFetch({ + url: curoption?.path, + params: { ...result, ...(curoption?.extraparams ?? {}) }, + }); + if (name) { + let curvals = formRef?.current?.getFieldValue(name); + curvals = curvals.map((it, i) => { + if (i == curindex) { + it[curkey] = null; + } + return it; + }); + formRef?.current?.setFieldsValue({ [name]: curvals }); + } else { + let curval = formRef?.current?.getFieldValue(curkey), + ifclean; + if (Array.isArray(curval)) { + ifclean = res?.data?.dataList + ?.map((it) => it.value) + .filter?.((it) => { + return curval?.includes(it); + }); + } else { + ifclean = res?.data?.dataList.filter( + (it) => it.value == curval + )?.[0]?.value; + } + formRef?.current?.setFieldsValue({ [curkey]: ifclean }); + } + return res?.data?.dataList ?? []; + }} + showSearch + /> + ); + }} + </ProFormDependency> + ); +} + +function NolinkSelect({ item, colProps }) { + let options = { + options: [], + }, + curoption = item.options ?? null; + + if (Array.isArray(curoption)) { + options = { + options: [...curoption], + }; + } else if (curoption) { + options = { + request: async () => { + let list = await doFetch({ + url: curoption?.path, + params: curoption?.params, + }); + return list.data.dataList; + }, + }; + } + + return ( + <ProFormSelect + fieldProps={item.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + showSearch + mode={item?.mode} + {...options} + /> + ); +} + +//Select 高阶组建 +function Select(props) { + let ifs = props?.item?.options?.linkParams; + if (ifs) { + return <LinkSelect {...props} />; + } else { + return <NolinkSelect {...props} />; + } +} + +function LinkTreeSelect({ item, colProps, formRef, name, curindex }) { + let prevparse = useRef(); + let curoption = item.options ?? null, + curlinkparams = curoption?.linkParams ?? {}; //获å–linkParams下声明的key + return ( + <ProFormDependency name={Object.keys(curlinkparams)}> + {(params) => { + const curkey = item.key ?? item.dataIndex; + return ( + <ProFormTreeSelect + fieldProps={{ + ...item?.fieldProps, + fieldNames: { + label: "title", + value: "key", + children: "children", + }, + showSearch: false, + multiple: item?.mode === "multiple", + }} + formItemProps={item.formItemProps} + name={curkey} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + params={params} + request={async (parse) => { + delete parse.keyWords; + let result = {}; + for (let key in curlinkparams) { + let reversekey = !curlinkparams[key] ? key : curlinkparams[key]; + result[reversekey] = parse[key]; + } + let res = await doFetch({ url: curoption?.path, params: result }); + + if (prevparse.current !== JSON.stringify(parse)) { + if (name) { + let curvals = formRef?.current?.getFieldValue(name); + curvals = curvals.map((it, i) => { + if (i == curindex) { + it[curkey] = null; + } + return it; + }); + formRef?.current?.setFieldsValue({ [name]: curvals }); + } else { + let curval = formRef?.current?.getFieldValue(curkey), + ifclean; + if (Array.isArray(curval)) { + ifclean = res?.data?.dataList + ?.map((it) => it.value) + .filter?.((it) => { + return curval?.includes(it); + }); + } else { + ifclean = res?.data?.dataList.filter( + (it) => it.value == curval + )?.[0]?.value; + } + formRef?.current?.setFieldsValue({ [curkey]: ifclean }); + } + } + prevparse.current = JSON.stringify(parse); + return res?.data?.dataList ?? []; + }} + /> + ); + }} + </ProFormDependency> + ); +} + +function NolinkTreeSelect({ item, colProps }) { + let options = { + options: [], + }, + curoption = item.options ?? null; + + if (Array.isArray(curoption)) { + options = { + options: [...curoption], + }; + } else if (curoption) { + options = { + request: async () => { + let list = await doFetch({ + url: curoption?.path, + params: curoption?.params, + }); + return list.data.dataList; + }, + }; + } + + return ( + <ProFormTreeSelect + fieldProps={{ + ...item?.fieldProps, + fieldNames: { label: "title", value: "key", children: "children" }, + showSearch: true, + multiple: item?.mode === "multiple", + }} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + multiple + {...options} + /> + ); +} + +//TreeSelect 高阶组建 +function TreeSelect(props) { + let ifs = props?.item?.options?.linkParams; + if (ifs) { + return <LinkTreeSelect {...props} />; + } else { + return <NolinkTreeSelect {...props} />; + } +} + +function CheckboxItem({ item, colProps }) { + return ( + <ProFormCheckbox + fieldProps={item.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + /> + ); +} + +function LinkCheckbox({ item, colProps, formRef, name, curindex }) { + let curoption = item.options ?? null, + curlinkparams = curoption?.linkParams ?? {}; //获å–linkParams下声明的key + return ( + <ProFormDependency name={Object.keys(curlinkparams)}> + {(params) => { + const curkey = item.key ?? item.dataIndex; + return ( + <ProFormCheckbox.Group + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={curkey} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + params={params} + request={async (parse) => { + let result = {}; + for (let key in curlinkparams) { + let reversekey = !curlinkparams[key] ? key : curlinkparams[key]; + result[reversekey] = parse[key]; + } + let res = await doFetch({ url: curoption?.path, params: result }); + if (name) { + let curvals = formRef?.current?.getFieldValue(name); + curvals = curvals.map((it, i) => { + if (i == curindex) { + it[curkey] = null; + } + return it; + }); + formRef?.current?.setFieldsValue({ [name]: curvals }); + } else { + let curval = formRef?.current?.getFieldValue(curkey), + ifclean; + if (Array.isArray(curval)) { + ifclean = res?.data?.dataList + ?.map((it) => it.value) + .filter?.((it) => { + return curval?.includes(it); + }); + } else { + ifclean = res?.data?.dataList.filter( + (it) => it.value == curval + )?.[0]?.value; + } + formRef?.current?.setFieldsValue({ [curkey]: ifclean }); + } + return res?.data?.dataList ?? []; + }} + /> + ); + }} + </ProFormDependency> + ); +} + +function NolinkCheckbox({ item, colProps }) { + let options = { + options: [], + }, + curoption = item.options ?? null; + + if (Array.isArray(curoption)) { + options = { + options: [...curoption], + }; + } else if (curoption) { + options = { + request: async () => { + let list = await doFetch({ + url: curoption?.path, + params: curoption?.params, + }); + return list.data.dataList; + }, + }; + } + + return ( + <ProFormCheckbox.Group + fieldProps={item.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + {...options} + /> + ); +} + +//Checkbox 高阶组建 +function Checkbox(props) { + let ifs = props?.item?.options?.linkParams; + if (ifs) { + return <LinkCheckbox {...props} />; + } else { + return <NolinkCheckbox {...props} />; + } +} + +function RadioItem({ item, colProps }) { + return ( + <ProFormRadio + fieldProps={item.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + /> + ); +} + +function LinkRadio({ item, colProps, formRef, name, curindex }) { + let curoption = item.options ?? null, + curlinkparams = curoption?.linkParams ?? {}; //获å–linkParams下声明的key + return ( + <ProFormDependency name={Object.keys(curlinkparams)}> + {(params) => { + const curkey = item.key ?? item.dataIndex; + return ( + <ProFormRadio.Group + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={curkey} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + params={params} + request={async (parse) => { + let result = {}; + for (let key in curlinkparams) { + let reversekey = !curlinkparams[key] ? key : curlinkparams[key]; + result[reversekey] = parse[key]; + } + let res = await doFetch({ url: curoption?.path, params: result }); + if (name) { + let curvals = formRef?.current?.getFieldValue(name); + curvals = curvals.map((it, i) => { + if (i == curindex) { + it[curkey] = null; + } + return it; + }); + formRef?.current?.setFieldsValue({ [name]: curvals }); + } else { + let curval = formRef?.current?.getFieldValue(curkey), + ifclean; + if (Array.isArray(curval)) { + ifclean = res?.data?.dataList + ?.map((it) => it.value) + .filter?.((it) => { + return curval?.includes(it); + }); + } else { + ifclean = res?.data?.dataList.filter( + (it) => it.value == curval + )?.[0]?.value; + } + formRef?.current?.setFieldsValue({ [curkey]: ifclean }); + } + return res?.data?.dataList ?? []; + }} + /> + ); + }} + </ProFormDependency> + ); +} + +function NolinkRadio({ item, colProps }) { + let options = { + options: [], + }, + curoption = item.options ?? null; + + if (Array.isArray(curoption)) { + options = { + options: [...curoption], + }; + } else if (curoption) { + options = { + request: async () => { + let list = await doFetch({ + url: curoption?.path, + params: curoption?.params, + }); + return list.data.dataList; + }, + }; + } + + return ( + <ProFormRadio.Group + fieldProps={item.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + {...options} + /> + ); +} + +//Radio 高阶组建 +function Radio(props) { + let ifs = props?.item?.options?.linkParams; + if (ifs) { + return <LinkRadio {...props} />; + } else { + return <NolinkRadio {...props} />; + } +} + +function LinkCascader({ item, colProps, formRef, name, curindex }) { + let prevparse = useRef(); + let curoption = item.options ?? null, + curlinkparams = curoption?.linkParams ?? {}; //获å–linkParams下声明的key + return ( + <ProFormDependency name={Object.keys(curlinkparams)}> + {(params) => { + const curkey = item.key ?? item.dataIndex; + return ( + <ProFormCascader + fieldProps={{ + ...item?.fieldProps, + fieldNames: { + label: "title", + value: "key", + children: "children", + }, + showSearch: true, + multiple: item?.mode === "multiple", + }} + formItemProps={item.formItemProps} + name={curkey} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + params={params} + request={async (parse) => { + delete parse.keyWords; + let result = {}; + for (let key in curlinkparams) { + let reversekey = !curlinkparams[key] ? key : curlinkparams[key]; + result[reversekey] = parse[key]; + } + let res = await doFetch({ url: curoption?.path, params: result }); + if (prevparse.current !== JSON.stringify(parse)) { + if (name) { + let curvals = formRef?.current?.getFieldValue(name); + curvals = curvals.map((it, i) => { + if (i == curindex) { + it[curkey] = null; + } + return it; + }); + formRef?.current?.setFieldsValue({ [name]: curvals }); + } else { + let curval = formRef?.current?.getFieldValue(curkey), + ifclean; + if (Array.isArray(curval)) { + ifclean = res?.data?.dataList + ?.map((it) => it.value) + .filter?.((it) => { + return curval?.includes(it); + }); + } else { + ifclean = res?.data?.dataList.filter( + (it) => it.value == curval + )?.[0]?.value; + } + formRef?.current?.setFieldsValue({ [curkey]: ifclean }); + } + } + prevparse.current = JSON.stringify(parse); + return res?.data?.dataList ?? []; + }} + /> + ); + }} + </ProFormDependency> + ); +} + +function NolinkCascader({ item, colProps }) { + let options = { + options: [], + }, + curoption = item.options ?? null; + + if (Array.isArray(curoption)) { + options = { + options: [...curoption], + }; + } else if (curoption) { + options = { + request: async () => { + let list = await doFetch({ + url: curoption?.path, + params: curoption?.params, + }); + return list.data.dataList; + }, + }; + } + + return ( + <ProFormCascader + fieldProps={{ + ...item?.fieldProps, + fieldNames: { label: "title", value: "key", children: "children" }, + showSearch: true, + multiple: item?.mode === "multiple", + }} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请选择${item.title}`} + {...options} + /> + ); +} + +//Cascader 高阶组建 +function Cascader(props) { + let ifs = props?.item?.options?.linkParams; + if (ifs) { + return <LinkCascader {...props} />; + } else { + return <NolinkCascader {...props} />; + } +} + +//switch +function Switch({ item, colProps }) { + return ( + <ProFormSwitch + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + placeholder={`请输入${item.title}`} + /> + ); +} + +//Rate +function Rate({ item, colProps }) { + return ( + <ProFormRate + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + /> + ); +} + +//Slider +function Slider({ item, colProps }) { + return ( + <ProFormSlider + {...item?.fieldProps} + fieldProps={item?.fieldProps} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + /> + ); +} + +//uploadbtn +function UploadBtn({ item, colProps }) { + return ( + <ProFormUploadButton + fieldProps={{ + ...item?.fieldProps, + action: REACT_APP_URL + "/hjjc/comAttach/uploadFile", + onPreview: (file) => { + let url = ""; + if (file.response) { + url = file.response.data.dataList[0].url; + } else if (file.url) { + url = file.url; + } else { + url = file.thumbUrl; + } + window.open(url); + }, + }} + transform={(value) => { + const key = item.key ?? item.dataIndex; + const transvalue = value?.map((it) => { + if (it.response) { + return it?.response?.data?.dataList[0]; + } else { + return it; + } + }); + return { + [key]: transvalue, + }; + }} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + title={`ä¸Šä¼ ${item.title}`} + /> + ); +} + +function UploadImg({ value, onChange, fieldProps }) { + const [image, setImage] = useState({}); + let token = localStorage.getItem("TOKENSTRING"); + + function beforeUpload(file) { + const isJpgOrPng = + file.type === "image/jpg" || + file.type === "image/jpeg" || + file.type === "image/png"; + if (!isJpgOrPng) { + message.error("åªèƒ½ä¸Šä¼ .jpg/.jpeg/.png图片!"); + return; + } + return true; + } + + // maxCount æœ€å¤§æ•°é‡ + const defaultconfig = { + name: "file", + action: REACT_APP_URL + "/hjjc/comAttach/uploadFile", + accept: ".jpg,.png,.jpeg", + listType: "picture-card", + beforeUpload: beforeUpload, + defaultFileList: value, + headers: { token }, + onChange(info) { + let { + file: { status }, + fileList, + } = info; + if (status == "error") { + message.error(`${info.file.name} ä¸Šä¼ å¤±è´¥`); + } else if (status === "done") { + const transfile = fileList.map((it) => { + return it?.response ? it?.response?.data?.dataList[0] : it; + }); + onChange(transfile); + } + }, + onRemove(file) { + let uid = file?.response?.data?.dataList[0]?.uid ?? file?.uid; + let newvalue = value?.filter((it) => it?.uid != uid); + onChange(newvalue); + }, + onPreview(file) { + let url = ""; + if (file.response) { + url = file.response.data.dataList[0].url; + } else if (file.url) { + url = file.url; + } else { + url = file.thumbUrl; + } + setImage({ + url, + visible: true, + }); + }, + }; + + const uploadButton = ( + <div> + <PlusOutlined /> + <div style={{ marginTop: 8 }}>ä¸Šä¼ å›¾ç‰‡</div> + </div> + ); + return ( + <> + <Image + src={image.url} + width={0} + height={0} + preview={{ + visible: image?.visible, + onVisibleChange: () => { + if (image?.visible) { + setImage((s) => ({ + ...s, + visible: false, + })); + } + }, + }} + /> + <Upload {...defaultconfig}> + {!value + ? uploadButton + : value?.length < fieldProps.limit + ? uploadButton + : null} + </Upload> + </> + ); +} + +//upload Image +function UploadImage({ item, colProps }) { + let col = item.colProps ?? colProps; + return ( + <Col {...col}> + <Form.Item + name={item.key ?? item.dataIndex} + label={item.title} + {...item.formItemProps} + > + <UploadImg fieldProps={{ ...item?.fieldProps }} /> + </Form.Item> + </Col> + ); +} + +// uploadDragger +function UploadDragger({ item, colProps }) { + return ( + <ProFormUploadDragger + fieldProps={{ + ...item?.fieldProps, + action: REACT_APP_URL + "/hjjc/comAttach/uploadFile", + onPreview: (file) => { + let url = ""; + if (file.response) { + url = file.response.data.dataList[0].url; + } else if (file.url) { + url = file.url; + } else { + url = file.thumbUrl; + } + window.open(url); + }, + }} + transform={(value) => { + const key = item.key ?? item.dataIndex; + const transvalue = value?.map((it) => { + if (it.response) { + return it?.response?.data?.dataList[0]; + } else { + return it; + } + }); + return { + [key]: transvalue, + }; + }} + formItemProps={item.formItemProps} + name={item.key ?? item.dataIndex} + colProps={item.colProps ?? colProps} + label={item.title} + /> + ); +} + +function FormList(props) { + const [isEmpty, cie] = useState(false); + let { item, colProps, formRef } = props; + let col = item.colProps ?? colProps; + let fields = item.columns ?? []; + + useEffect(() => { + let value = props.formRef.current.getFieldValue( + item?.key ?? item?.dataIndex + ); + if (value?.length == 0) { + cie(true); + } + }, [props]); + + return ( + <Col {...col}> + <div className="formList" > + {!isEmpty ? ( + <ProFormList + name={item.key ?? item.dataIndex} + label={item.title} + min={item.min ?? 1} + max={item.max ?? 100} + itemContainerRender={(doms) => { + return <ProForm.Group>{doms}</ProForm.Group>; + }} + alwaysShowItemLabel={false} + copyIconProps={item?.copyIconProps} + deleteIconProps={item?.deleteIconProps} + creatorButtonProps={item?.creatorButtonProps} + > + {(f, index, action) => { + return ( + <FormRender + fields={fields} + action={action} + curindex={index} + formRef={formRef} + name={item.key ?? item.dataIndex} + /> + ); + }} + </ProFormList> + ) : ( + <div> + <div>{item.title}</div> + <Empty + image={"./empty.svg"} + imageStyle={{ + height: 60, + }} + /> + </div> + )} + </div> + </Col> + ); +} + +function TableSelect({ item, value, onChange, params = {} }) { + const rowKey = item?.rowKey ?? "id"; + const [chooses, setchooses] = useState([]); //mark æ ‡è®° + const [activetab, setactivetab] = useState(1); + const actionRef = useRef(); + + const menu = (selectedRows) => ( + <Menu + style={{ width: 160 }} + items={ + selectedRows.length > 0 + ? selectedRows.map((it) => ({ + key: it[rowKey], + label: ( + <div + className="spread" + onClick={(e) => { + e.stopPropagation(); + let key = it[rowKey]; + setchooses((s) => { + let news = [...s]; + if (s.includes(key)) { + news = news.filter((it) => { + return it != key; + }); + } else { + news.push(key); + } + return news; + }); + }} + > + <span + style={{ + color: chooses.includes(it[rowKey]) + ? "#1890ff" + : "#333333", + transition: "all 0.4s", + userSelect: "none", + }} + > + {it[item.rowName]} + </span> + <CloseOutlined + onClick={(e) => { + e.stopPropagation(); + let newvalue = value.filter( + (its) => its[rowKey] != it[rowKey] + ); + onChange(newvalue); + setchooses((s) => { + let news = [...s]; + news = news.filter((its) => { + return its != it[rowKey]; + }); + return news; + }); + }} + /> + </div> + ), + })) + : [ + { + key: -1, + label: "请先选择", + }, + ] + } + /> + ); + const Todo = ( + <EditTable + actionRef={actionRef} + defaultValue={value} //调用接å£åˆå¹¶åˆå§‹å€¼ + path={item.path} + extraparams={params ?? {}} + rowKey={rowKey} + columns={item.columns} + resizeable={false} + alwaysShowAlert={false} + tableAlertRender={false} + tableAlertOptionRender={false} + rowClassName={(record, index) => { + if (chooses.includes(record[rowKey])) { + return "lightblue"; + } else { + return ""; + } + }} + rowSelection={{ + ...item.rowSelection, + columnWidth: 44, + preserveSelectedRowKeys: true, + selectedRowKeys: value && value?.map((it) => it[rowKey]), + onChange: (selectedKeys, selectedRows) => { + const rowkeylist = value ? value?.map((it) => it[rowKey]) : []; + const newValue = selectedRows?.map((its) => { + if (rowkeylist.includes(its[rowKey])) { + return value.filter((it) => it[rowKey] == its[rowKey])[0]; + } else { + return its; + } + }); + onChange(newValue); + }, + }} + editable={{ + onValuesChange: (record, recordList) => { + const newValue = value?.map((its) => { + if (its[rowKey] == record[rowKey]) { + return record; + } else { + return its; + } + }); + onChange(newValue); + }, + }} + /> + ); + + const Done = ( + <EditTable + value={value} + rowKey={rowKey} + columns={item.columns} + resizeable={false} + alwaysShowAlert={false} + tableAlertRender={false} + tableAlertOptionRender={false} + rowClassName={(record, index) => { + if (chooses.includes(record[rowKey])) { + return "lightblue"; + } else { + return ""; + } + }} + rowSelection={{ + ...item.rowSelection, + columnWidth: 44, + preserveSelectedRowKeys: true, + selectedRowKeys: value && value?.map((it) => it[rowKey]), + onChange: (selectedKeys, selectedRows) => { + const rowkeylist = value ? value?.map((it) => it[rowKey]) : []; + const newValue = selectedRows?.map((its) => { + if (rowkeylist.includes(its[rowKey])) { + return value.filter((it) => it[rowKey] == its[rowKey])[0]; + } else { + return its; + } + }); + onChange(newValue); + }, + }} + editable={{ + onValuesChange: (record, recordList) => { + const newValue = value?.map((its) => { + if (its[rowKey] == record[rowKey]) { + return record; + } else { + return its; + } + }); + onChange(newValue); + }, + }} + /> + ); + + return ( + <div className="selecttable"> + <Tabs + tabBarExtraContent={ + <div className="center"> + <Dropdown overlay={menu(value ?? [])}> + <a> + 已选择{value?.length ?? 0}项 <DownOutlined /> + </a> + </Dropdown> + <div + className="center" + style={{ + color: "red", + cursor: "pointer", + margin: "0 6px 0 16px", + }} + onClick={() => { + onChange([]); + setchooses([]); + }} + > + <RedoOutlined rotate={-90} /> + 清空 + </div> + </div> + } + onChange={setactivetab} + items={[ + { label: "æ•°æ®é€‰æ‹©", key: 1, children: activetab == 1 && Todo }, + { + label: `选择结果${value?.length ?? 0}项`, + key: 2, + children: activetab == 2 && Done, + }, + ]} + /> + </div> + ); +} + +function LinkSelectList({ item, colProps, formRef, name, curindex }) { + let col = item.colProps ?? colProps; + let curlinkparams = item?.linkParams ?? {}; //获å–linkParams下声明的key + return ( + <Col {...col}> + <ProFormDependency name={Object.keys(curlinkparams)}> + {(params) => { + const curkey = item.key ?? item.dataIndex; + let result = {}; + for (let key in curlinkparams) { + let reversekey = !curlinkparams[key] ? key : curlinkparams[key]; + result[reversekey] = params[key]; + } + return ( + <Form.Item name={curkey} label={item.title} {...item.formItemProps}> + <TableSelect item={item} params={result} /> + </Form.Item> + ); + }} + </ProFormDependency> + </Col> + ); +} + +function NolinkSelectList({ item, colProps, formRef }) { + let col = item.colProps ?? colProps; + let curkey = item.key ?? item.dataIndex; //获å–key + return ( + <Col {...col}> + <Form.Item name={curkey} label={item.title} {...item.formItemProps}> + <TableSelect item={item} params={item.params} /> + </Form.Item> + </Col> + ); +} + +function FormSelectList(props) { + let ifs = props?.item?.linkParams; + if (ifs) { + return <LinkSelectList {...props} />; + } else { + return <NolinkSelectList {...props} />; + } +} + +export default FormItems; diff --git a/src/components/NewInitForm/index.css b/src/components/NewInitForm/index.css new file mode 100644 index 0000000..41ec07a --- /dev/null +++ b/src/components/NewInitForm/index.css @@ -0,0 +1,28 @@ +.title { + position: relative; + width: 100%; + margin-bottom: 8px; + padding-left: 16px; + font-weight: bolder; + font-size: 16px; +} +.title::before { + position: absolute; + top: 4px; + left: 7px; + width: 3px; + height: 16px; + background-color: #3d8ad7; + border-radius: 4px; + content: ''; +} +.title::after { + position: absolute; + top: 14px; + right: 0px; + width: calc(100% - 160px); + height: 1px; + border-bottom: 1px dotted rgba(0, 0, 0, 0.1); + border-radius: 4px; + content: ''; +} diff --git a/src/components/NewInitForm/index.jsx b/src/components/NewInitForm/index.jsx new file mode 100644 index 0000000..d78c9da --- /dev/null +++ b/src/components/NewInitForm/index.jsx @@ -0,0 +1,150 @@ +import React, { createElement, memo, useRef, useState } from "react"; +import { + ProForm, + ProFormDependency, + ProFormSelect, + ProFormText, + ProFormGroup, + ProFormList, + ProCard, +} from "@ant-design/pro-components"; +import { doFetch } from "@/utils/doFetch"; +import styles from "./index.less"; +import FormItems from "./FormItems"; + +function upperCase(str) { + const newStr = str.slice(0, 1).toUpperCase() + str.slice(1); + return newStr; +} + +let FormRender = memo(({ fields = [], colProps, proformRef }) => { + return ( + <> + {fields + .filter((it) => it.hideInForm !== true) + .map((item, index) => { + let key = item?.valueType ? upperCase(item?.valueType) : "Input"; + let { hideInForm } = item; + item.formItemProps = item.formItemProps ?? { rules: [] }; + if (item.valueType == "split") { + return ( + <div + className={styles.title} + style={{ borderWidth: index == 0 ? 0 : 1 }} + > + {item.title} + </div> + ); + } + if (hideInForm && Object.keys(hideInForm)) { + return ( + <ProFormDependency name={Object.keys(hideInForm)}> + {(params) => { + let ifs = true; + let res = Object.keys(hideInForm).map((its) => { + let val = + JSON.stringify(params[its]) === "[]" ? "[]" : params[its]; + if (Array.isArray(hideInForm[its])) { + return !hideInForm[its].includes(val); + } else { + let vals = hideInForm[its].reverse; //å–å å³ä¸å˜åœ¨å½“剿•°ç»„ä¸çš„ + return vals.indexOf(val) != -1; + } + }); + ifs = res.includes(false); + if (ifs) { + return; + } else { + return ( + <> + {createElement(FormItems[key], { + item: item, + colProps: colProps, + key: item.dataIndex, + formRef: proformRef, + })} + </> + ); + } + }} + </ProFormDependency> + ); + } else { + return ( + <> + {createElement(FormItems[key], { + item: item, + colProps: colProps, + key: item.dataIndex, + formRef: proformRef, + })} + </> + ); + } + })} + </> + ); +}); + +function InitForm({ + formRef, + onFinish = (vals) => { + // console.log(vals); + }, + formKey, + params = {}, + detailpath = "", + defaultFormValue = {}, + submitter, + fields, + colProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 }, + onValuesChange = (changedValues, allValues) => { + // console.log(changedValues, allValues); + }, + ptree = false, + children, +}) { + let proformRef = useRef(); + proformRef = formRef ?? proformRef; + + return ( + <ProForm + style={{ overflow: "hidden" }} + formRef={proformRef} + onFinish={onFinish} + formKey={formKey ?? parseInt(Math.random() * 1000000)} + params={params} + submitter={submitter ?? true} + grid={true} + rowProps={{ + gutter: 12, + }} + request={async (params) => { + if (detailpath) { + let res = await doFetch({ url: detailpath, params }); + return { + ...(res?.data?.data ?? {}), + ...defaultFormValue, + }; + } else { + return { + ...defaultFormValue, + }; + } + }} + autoFocusFirstInput + onValuesChange={(changedValues, allValues) => { + onValuesChange?.(changedValues, allValues); + }} + > + <FormRender + fields={fields?.filter((it) => it?.valueType != "option")} + colProps={colProps} + proformRef={proformRef} + /> + {ptree && children} + </ProForm> + ); +} + +export default InitForm; diff --git a/src/components/NewInitForm/index.less b/src/components/NewInitForm/index.less new file mode 100644 index 0000000..e0ec9f1 --- /dev/null +++ b/src/components/NewInitForm/index.less @@ -0,0 +1,28 @@ +.title { + position: relative; + width: 100%; + margin-bottom: 8px; + padding-left: 16px; + font-weight: bolder; + font-size: 16px; + &::before { + position: absolute; + top: 4px; + left: 7px; + width: 3px; + height: 16px; + background-color: #3d8ad7; + border-radius: 4px; + content: ''; + } + &::after { + position: absolute; + top: 14px; + right: 0px; + width: calc(100% - 160px); + height: 1px; + border-bottom: 1px dotted rgba(0, 0, 0, 0.1); + border-radius: 4px; + content: ''; + } +} diff --git a/src/pages/Printer/fields.js b/src/pages/Printer/fields.js index 17290cc..0a5cdf0 100644 --- a/src/pages/Printer/fields.js +++ b/src/pages/Printer/fields.js @@ -1,60 +1,39 @@ -import { - factorySelect, - shopSelectByFactory, - productionLineSelectByShop, - sectionSelectByShop, -} from "@/services/system"; -export default { - stationNo: { - value: null, - type: "input", - title: "å·¥ä½ç¼–å·", - name: ["stationNo"], - required: true, +export default [ + { + title: "物料(åç§°+ç¼–ç )", + key: "wlid", + dataIndex: "wlid", }, - stationName: { - value: null, - type: "input", - title: "å·¥ä½åç§°", - name: ["stationName"], - required: true, + { + title: "è§„æ ¼åž‹å·", + key: "specificationModel", + dataIndex: "specificationModel", }, - factoryId: { - value: null, - type: "select", - title: "所属工厂", - name: ["factoryId"], - required: true, - options: { - database: factorySelect, - params: {}, - }, - linked: true, + { + title: "牌å·", + key: "shopSign", + dataIndex: "shopSign", }, - status: { - value: null, - type: "select", - title: "å¯ç”¨çжæ€", - name: ["status"], - required: true, - options: [ - { - label: "å¯ç”¨", - value: 1, - }, - { - label: "ç¦ç”¨", - value: 0, - }, - ], + { + title: "铿Ÿ", + key: "ironLoss", + dataIndex: "ironLoss", }, - remark: { - value: null, - type: "textarea", - title: "æè¿°", - name: ["remark"], - required: false, - - col: { span: 24 }, + { + title: "片厚", + key: "sheetThickness", + dataIndex: "sheetThickness", }, -}; + { + title: "å…¶ä»–ä¿¡æ¯", + key: "split", + dataIndex: "split", + valueType:'split' + }, + { + title: "供应商", + key: "supplierId", + dataIndex: "supplierId", + }, + +]; diff --git a/src/pages/Printer/index.jsx b/src/pages/Printer/index.jsx index a0a800a..82c4879 100644 --- a/src/pages/Printer/index.jsx +++ b/src/pages/Printer/index.jsx @@ -10,11 +10,10 @@ import { message, } from "antd"; import AutoTable from "@/components/AutoTable"; -import getPrem from "@/utils/getPrem"; //æƒé™åˆ¤æ–fn import { useRequest } from "umi"; -import defaultFields from "./fields"; +import defaultFields from "./fields.js"; import { doFetch } from "@/utils/doFetch"; -import InitForm from "@/components/InitForm"; +import InitForm from "@/components/NewInitForm"; import { start } from "@/utils/printHandle.js"; import { ExclamationCircleFilled } from "@ant-design/icons"; const { confirm } = Modal; @@ -174,9 +173,9 @@ const Station = (props) => { console.log(selectedRowKeys, selectedRows); setselectIds(selectedRowKeys); }, - preserveSelectedRowKeys:true + preserveSelectedRowKeys: true, }; - + console.log(defaultFields); return ( <div> <AutoTable @@ -193,7 +192,7 @@ const Station = (props) => { ></AutoTable> <Drawer title={drawer?.title} - visible={drawer?.visible} + open={drawer?.visible} onClose={() => setDrawer((v) => ({ ...v, visible: false }))} footer={false} destroyOnClose={true} @@ -208,20 +207,18 @@ const Station = (props) => { actions={() => { return null; }} + submitter={false} ></InitForm> <Button - style={{ width: "100%" }} type="primary" - size="large" // loading={loading || !vs} + style={{ marginRight: 16 }} onClick={() => saveData()} > ä¿å˜ </Button> <Button - style={{ width: "100%" }} type="primary" - size="large" // loading={loading || !vs} onClick={() => saveData()} > -- 2.21.0