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;