diff --git a/src/components/Common/CommonComponent/index.js b/src/components/Common/CommonComponent/index.js index ffe6ca5..e4dcaf8 100644 --- a/src/components/Common/CommonComponent/index.js +++ b/src/components/Common/CommonComponent/index.js @@ -1,7 +1,7 @@ -import moment from 'moment'; -import React, { Component, createRef } from 'react'; -import reactComponentDebounce from '@/components/Common/ReactDebounce'; -import * as commonFunc from '@/components/Common//commonFunc';/* 通用单据方法 */ /* 通用单据方法 */ +import moment from "moment"; +import React, { Component, createRef } from "react"; +import reactComponentDebounce from "@/components/Common/ReactDebounce"; +import * as commonFunc from "@/components/Common//commonFunc"; /* 通用单据方法 */ /* 通用单据方法 */ // import '@ant-design/compatible/assets/index.css'; import { InputNumber, @@ -21,24 +21,18 @@ import { Table, Pagination, Tooltip, -} from 'antd-v4'; -import { - EyeOutlined, - FilePdfOutlined, - FileWordOutlined, - FileExcelOutlined, - FileOutlined, - RightOutlined, -} from '@ant-design/icons'; -import * as commonUtils from '@/utils/utils'; -import styles from '@/index.less'; -import Provinces from '@/assets/provinces.json'; -import Cities from '@/assets/cities.json'; -import Areas from '@/assets/areas.json'; -import commonConfig from '@/utils/config'; -import { VirtualKeyboard } from '@/oee/common/oeeKeyBoard';// 虚拟软键盘 -import 'braft-editor/dist/output.css'; -import SvgBox from '../BoxDesignCompontent/svg'; + Modal, +} from "antd-v4"; +import {DeleteOutlined, EyeOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined, FileOutlined, RightOutlined } from "@ant-design/icons"; +import * as commonUtils from "@/utils/utils"; +import styles from "@/index.less"; +import Provinces from "@/assets/provinces.json"; +import Cities from "@/assets/cities.json"; +import Areas from "@/assets/areas.json"; +import commonConfig from "@/utils/config"; +import { VirtualKeyboard } from "@/oee/common/oeeKeyBoard"; // 虚拟软键盘 +import "braft-editor/dist/output.css"; +import SvgBox from "../BoxDesignCompontent/svg"; const FormItem = Form.Item; const { Option } = Select; @@ -59,18 +53,18 @@ export default class CommonComponent extends Component { constructor(props) { super(props); this.state = { - dataValue: props.dataValue, /* 本showType数据 */ - enabled: props.enabled, /* 是否是查看状态(数据格式:布尔) */ - dropDownData: [], /* 下拉数据集(如果不是下拉控件该值为空,数据格式:数组对象) */ + dataValue: props.dataValue /* 本showType数据 */, + enabled: props.enabled /* 是否是查看状态(数据格式:布尔) */, + dropDownData: [] /* 下拉数据集(如果不是下拉控件该值为空,数据格式:数组对象) */, conditonValues: {}, sFieldName: props.showConfig.sName, // 字段名 bNotEmpty: props.showConfig.bNotEmpty, - mode: props.showConfig.bMultipleChoice ? 'multiple' : 'default', - bNewRecord: props.showConfig.bNewRecord, /* 是否有新纪录 */ + mode: props.showConfig.bMultipleChoice ? "multiple" : "default", + bNewRecord: props.showConfig.bNewRecord /* 是否有新纪录 */, sActiveDisplay: true, pageNum: 0, totalPageCount: 1, - searchValue: '', + searchValue: "", searchDropDownData: [], searchTotalPageCount: 1, searchPageNum: 0, @@ -89,31 +83,39 @@ export default class CommonComponent extends Component { // this.getFieldDecorator = commonUtils.isUndefined(props.form) ? undefined : undefined; /* 字段验证(数据格式:数字) */ this.floatNum = this.props.getFloatNum(props.showConfig.sName); /* 数字格式化规范转换(数据格式:数字) */ this.floatPrice = this.getFloatPrice(this.floatNum); /* 价格格式化规范转换(数据格式:数字) */ - this.formItemLayout = commonUtils.isNotEmptyObject(props.formItemLayout) ? - props.formItemLayout : - location.pathname.toLowerCase().indexOf('oee') > -1 ? { labelCol: { span: 7, style: { color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#BFEFFF' } }, wrapperCol: { span: 15 } } : - { labelCol: { span: 7, style: { height: '27.82px', color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#BFEFFF' } }, wrapperCol: { span: 15 } }; /* 表格样式(主要是colspan和rowspan,数据格式:对象) */ + this.formItemLayout = commonUtils.isNotEmptyObject(props.formItemLayout) + ? props.formItemLayout + : location.pathname.toLowerCase().indexOf("oee") > -1 + ? { labelCol: { span: 7, style: { color: "rgba(0, 0, 0, 0.65)", backgroundColor: "#BFEFFF" } }, wrapperCol: { span: 15 } } + : { + labelCol: { span: 7, style: { height: "27.82px", color: "rgba(0, 0, 0, 0.65)", backgroundColor: "#BFEFFF" } }, + wrapperCol: { span: 15 }, + }; /* 表格样式(主要是colspan和rowspan,数据格式:对象) */ this.isDropdownFilter = false; this.V = { value: props.dataValue }; this.myRef = createRef(); this.dropDownCount = 0; - this.bSpecial = location.pathname?.includes('ResearchTableTree') && props.showConfig.sName === 'sProductName'; + this.bSpecial = location.pathname?.includes("ResearchTableTree") && props.showConfig.sName === "sProductName"; } /** 渲染前只执行一次 */ componentWillMount() { this.mounted = true; - if (this.props.showConfig.sDropDownType === 'const') { /* 常量下拉 */ + if (this.props.showConfig.sDropDownType === "const") { + /* 常量下拉 */ /* 常量下拉其实只取一次数据就可以啦,去过数据的会给state中的dropDownData赋值,所以dropDownData有值的情况就不需要再获取了 */ - const showDropDown = commonUtils.isNotEmptyArr(this.props.showConfig.dropDownData) ? this.props.showConfig.dropDownData : - (typeof this.props.showConfig.showDropDown === 'object') ? this.props.showConfig.showDropDown : commonUtils.objectToArr(commonUtils.convertStrToObj(this.props.showConfig.showDropDown)); + const showDropDown = commonUtils.isNotEmptyArr(this.props.showConfig.dropDownData) + ? this.props.showConfig.dropDownData + : typeof this.props.showConfig.showDropDown === "object" + ? this.props.showConfig.showDropDown + : commonUtils.objectToArr(commonUtils.convertStrToObj(this.props.showConfig.showDropDown)); /* 给state赋值 */ if (this.mounted) { this.setState({ dropDownData: showDropDown, }); } - } else if (this.props.showConfig.sDropDownType === 'sql' && !commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { + } else if (this.props.showConfig.sDropDownType === "sql" && !commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { if (this.mounted) { this.setState({ dropDownData: this.props.showConfig.dropDownData, @@ -128,10 +130,10 @@ export default class CommonComponent extends Component { const antInput = currentNode.querySelector("input[class*='ant-input']"); const oInput = selectInputNode || antInput; if (oInput) { - oInput.addEventListener('compositionstart', () => { + oInput.addEventListener("compositionstart", () => { this.chineseInputting = true; }); - oInput.addEventListener('compositionend', () => { + oInput.addEventListener("compositionend", () => { this.chineseInputting = false; if (this.handleCompleteInputEventCache) { this.handleCompleteInputEventCache(); @@ -140,20 +142,20 @@ export default class CommonComponent extends Component { } if (currentNode) { - if (['t', 'm', 'y'].includes(this.firstDataIndex)) { + if (["t", "m", "y"].includes(this.firstDataIndex)) { const oInput = currentNode.querySelector(`input[id*="${this.props.showConfig.sName}"]`); if (oInput) { let { sDateFormat } = this.props.showConfig; if (commonUtils.isEmptyStr(sDateFormat)) { - if (this.firstDataIndex === 'm') { - sDateFormat = 'YYYY-MM'; - } else if (this.firstDataIndex === 'y') { - sDateFormat = 'YYYY'; + if (this.firstDataIndex === "m") { + sDateFormat = "YYYY-MM"; + } else if (this.firstDataIndex === "y") { + sDateFormat = "YYYY"; } else { sDateFormat = this.props.getDateFormat(); } } - oInput.oninput = (e) => { + oInput.oninput = e => { const { value } = e.target; const isValidDate = moment(value, sDateFormat, true).isValid(); if (isValidDate) { @@ -163,22 +165,24 @@ export default class CommonComponent extends Component { } } } - document.addEventListener('mousedown', this.handleSelectClick); + document.addEventListener("mousedown", this.handleSelectClick); } /** props改变的时候触发 */ componentWillReceiveProps(nextProps) { /* 如果是下拉控件,则要获取数据(获取下拉数据前要先更新sqlCondition) */ - const { - dataValue, enabled, sFieldName, bNotEmpty, showName, sDropDownType, - } = this.state; + const { dataValue, enabled, sFieldName, bNotEmpty, showName, sDropDownType } = this.state; if (nextProps.showConfig === undefined || this.props.showConfig === undefined) return; this.firstDataIndex = nextProps.showConfig.sName.substring(0, 1); /* 控件首字母(数据格式:字符串) */ - if (nextProps.showConfig.sDropDownType === 'const') { /* 常量下拉 */ + if (nextProps.showConfig.sDropDownType === "const") { + /* 常量下拉 */ /* 常量下拉其实只取一次数据就可以啦,去过数据的会给state中的dropDownData赋值,所以dropDownData有值的情况就不需要再获取了 */ - const showDropDown = commonUtils.isNotEmptyArr(nextProps.showConfig.dropDownData) ? nextProps.showConfig.dropDownData : - (typeof nextProps.showConfig.showDropDown === 'object') ? nextProps.showConfig.showDropDown : commonUtils.objectToArr(commonUtils.convertStrToObj(nextProps.showConfig.showDropDown)); + const showDropDown = commonUtils.isNotEmptyArr(nextProps.showConfig.dropDownData) + ? nextProps.showConfig.dropDownData + : typeof nextProps.showConfig.showDropDown === "object" + ? nextProps.showConfig.showDropDown + : commonUtils.objectToArr(commonUtils.convertStrToObj(nextProps.showConfig.showDropDown)); // 对应工序单独处理 // if (this.props.showConfig.showName === '对应工序') { // showDropDown = nextProps.customDropData; @@ -189,7 +193,7 @@ export default class CommonComponent extends Component { dropDownData: showDropDown, }); } - } else if (nextProps.showConfig.sDropDownType === 'sql' && !commonUtils.isEmptyArr(nextProps.showConfig.dropDownData)) { + } else if (nextProps.showConfig.sDropDownType === "sql" && !commonUtils.isEmptyArr(nextProps.showConfig.dropDownData)) { if (this.mounted) { this.setState({ dropDownData: nextProps.showConfig.dropDownData, @@ -197,7 +201,16 @@ export default class CommonComponent extends Component { } } /* 把需要更新的数据setState */ - if (dataValue !== nextProps.dataValue || enabled !== nextProps.enabled || bNotEmpty !== nextProps.showConfig.bNotEmpty || sFieldName !== nextProps.showConfig.sName || (showName !== nextProps.showConfig.showName || !showName) || sDropDownType !== nextProps.showConfig.sDropDownType || (this.bSpecial && this.props.record.sProductNo !== nextProps.record.sProductNo)) { + if ( + dataValue !== nextProps.dataValue || + enabled !== nextProps.enabled || + bNotEmpty !== nextProps.showConfig.bNotEmpty || + sFieldName !== nextProps.showConfig.sName || + showName !== nextProps.showConfig.showName || + !showName || + sDropDownType !== nextProps.showConfig.sDropDownType || + (this.bSpecial && this.props.record.sProductNo !== nextProps.record.sProductNo) + ) { if (this.mounted) { if (commonUtils.isEmpty(nextProps.dataValue)) { this.lastValue = nextProps.dataValue; @@ -221,20 +234,40 @@ export default class CommonComponent extends Component { shouldComponentUpdate(nextProps, nextState) { const { - dataValue, enabled, dropDownData, searchValue, searchDropDownData, sFieldName, bNotEmpty, sActiveDisplay, sDropDownType, spinState, showConfig, + dataValue, + enabled, + dropDownData, + searchValue, + searchDropDownData, + sFieldName, + bNotEmpty, + sActiveDisplay, + sDropDownType, + spinState, + showConfig, } = this.state; - return nextProps.showConfig !== undefined && (dataValue !== nextState.dataValue || enabled !== nextState.enabled || - sFieldName !== nextState.sFieldName || sDropDownType !== nextState.sDropDownType || bNotEmpty !== nextState.bNotEmpty || JSON.stringify(dropDownData) !== JSON.stringify(nextState.dropDownData) || - searchValue !== nextState.searchValue || JSON.stringify(searchDropDownData) !== JSON.stringify(nextState.searchDropDownData) || - JSON.stringify(sActiveDisplay) !== JSON.stringify(nextState.sActiveDisplay) || nextProps.showTime !== this.props.showTime || - spinState !== nextState.spinState || JSON.stringify(nextState.selectTableData) !== JSON.stringify(this.state.selectTableData) || - JSON.stringify(nextProps.showConfig) !== JSON.stringify(showConfig)); + return ( + nextProps.showConfig !== undefined && + (dataValue !== nextState.dataValue || + enabled !== nextState.enabled || + sFieldName !== nextState.sFieldName || + sDropDownType !== nextState.sDropDownType || + bNotEmpty !== nextState.bNotEmpty || + JSON.stringify(dropDownData) !== JSON.stringify(nextState.dropDownData) || + searchValue !== nextState.searchValue || + JSON.stringify(searchDropDownData) !== JSON.stringify(nextState.searchDropDownData) || + JSON.stringify(sActiveDisplay) !== JSON.stringify(nextState.sActiveDisplay) || + nextProps.showTime !== this.props.showTime || + spinState !== nextState.spinState || + JSON.stringify(nextState.selectTableData) !== JSON.stringify(this.state.selectTableData) || + JSON.stringify(nextProps.showConfig) !== JSON.stringify(showConfig)) + ); } componentWillUnmount() { this.mounted = false; - document.removeEventListener('mousedown', this.handleSelectClick); + document.removeEventListener("mousedown", this.handleSelectClick); } onFocus = () => { @@ -242,8 +275,8 @@ export default class CommonComponent extends Component { this.setState({ sActiveDisplay: false }); }; - onBlur = (event) => { - if (this.onExecInstructSet('blur')) return; + onBlur = event => { + if (this.onExecInstructSet("blur")) return; this.isDropdownFilter = false; if (commonUtils.isNotEmptyStr(this.props.showConfig.sTableTitleSql) && this.props.showConfig.iVisCount > 1) { @@ -251,13 +284,17 @@ export default class CommonComponent extends Component { searchPageNum: 1, searchTotalPageCount: 1, searchDropDownData: [], - searchValue: '', + searchValue: "", spinState: false, sActiveDisplay: true, }); - } else if (this.state.searchValue !== '' && this.props.showConfig.sDropDownType === 'sql' && commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { + } else if ( + this.state.searchValue !== "" && + this.props.showConfig.sDropDownType === "sql" && + commonUtils.isEmptyArr(this.props.showConfig.dropDownData) + ) { if (!this.props.showConfig.bCanInput) { - this.handleSelectOptionEvent(''); + this.handleSelectOptionEvent(""); } this.setState({ searchPageNum: 1, @@ -273,7 +310,10 @@ export default class CommonComponent extends Component { }); } /* 若下拉配置了movesql 则离开时 调用下拉sql数据 */ - if (this.props.showConfig && (this.props.showConfig.sDropDownType === 'movesql' || commonUtils.isNotEmptyObject(this.props.showConfig.sButtonParam))) { + if ( + this.props.showConfig && + (this.props.showConfig.sDropDownType === "movesql" || commonUtils.isNotEmptyObject(this.props.showConfig.sButtonParam)) + ) { this.props.onDropDownBlur(this.props.name, this.props.showConfig.sName, this.props.record, this.props.showConfig); } @@ -282,40 +322,34 @@ export default class CommonComponent extends Component { }; onBlurText = (event, timeout = 0) => { - if (this.onExecInstructSet('blur')) return; + if (this.onExecInstructSet("blur")) return; const currentValue = event?.target?.value; if (currentValue === this.lastValue) return; setTimeout(() => { - const { - name, - record, - sBtnSendDialogConfigList, - onToolBarBtnClick, - } = this.props; - if (name !== 'master') return; + const { name, record, sBtnSendDialogConfigList, onToolBarBtnClick } = this.props; + if (name !== "master") return; if (commonUtils.isEmptyArr(sBtnSendDialogConfigList)) return; const { sName } = this.props.showConfig; if (!record[sName]) return; const { sActiveKey, sControlName } = - sBtnSendDialogConfigList.find((item) => { - const { sActiveKey = '' } = item; - return sActiveKey.split(',').includes(`${name}.${sName}`); - }) - || {}; - if (sControlName !== 'BtnSendDialog') { + sBtnSendDialogConfigList.find(item => { + const { sActiveKey = "" } = item; + return sActiveKey.split(",").includes(`${name}.${sName}`); + }) || {}; + if (sControlName !== "BtnSendDialog") { if (!sActiveKey) return; this.lastValue = currentValue; onToolBarBtnClick({ key: sControlName }); } }, timeout); - } + }; - onExecInstructSet = (type) => { + onExecInstructSet = type => { const { sInstruct: sInstructStr, showName, sOnChangeInstruct } = this.props.showConfig; const sInstruct = commonUtils.convertStrToObj(sInstructStr, {}); let { [type]: instructType } = sInstruct; - if (type === 'change') { + if (type === "change") { const onChangeNew = commonUtils.convertStrToObj(sOnChangeInstruct, {}); instructType = onChangeNew[type]; } @@ -324,48 +358,46 @@ export default class CommonComponent extends Component { this.props.onExecInstructSet({ type, sInstruct: instructType, - showName: `${showName}-${type === 'blur' ? '离焦' : '变化'}`, + showName: `${showName}-${type === "blur" ? "离焦" : "变化"}`, }); } else { - message.error('未定义调用指令集事件!'); + message.error("未定义调用指令集事件!"); } return true; } return false; - } + }; onCheckFields = () => { // 手机号、邮箱校验等校验 // setTimeout(() => { - const sDateFormatTypeList = ['phone', 'mobile', 'mail', 'postcode']; + const sDateFormatTypeList = ["phone", "mobile", "mail", "postcode"]; const { sName, showName, sDateFormat } = this.props.showConfig; const { record } = this.props; - const IncorrectFormat = commonFunc.showLocalMessage(this.props, 'IncorrectFormat', '格式不正确'); + const IncorrectFormat = commonFunc.showLocalMessage(this.props, "IncorrectFormat", "格式不正确"); const value = record[sName]; - if ( - value !== undefined && value !== '' && sDateFormatTypeList.includes(sDateFormat) - ) { + if (value !== undefined && value !== "" && sDateFormatTypeList.includes(sDateFormat)) { let flag = false; - if (sDateFormat === 'phone') { + if (sDateFormat === "phone") { const reg = /^0\d{2,3}-\d{7,8}$/; const reg1 = /^1[0-9]{10}$/; const reg2 = /^0\d{2,3}-\d{7,8}-\d{1,8}$/; if (!reg.test(value) && !reg1.test(value) && !reg2.test(value)) { flag = true; } - } else if (sDateFormat === 'mobile') { + } else if (sDateFormat === "mobile") { const reg = /^0\d{2,3}-\d{7,8}$/; const reg1 = /^1[0-9]{10}$/; const reg2 = /^0\d{2,3}-\d{7,8}-\d{1,8}$/; if (!reg.test(value) && !reg1.test(value) && !reg2.test(value)) { flag = true; } - } else if (sDateFormat === 'mail') { + } else if (sDateFormat === "mail") { const reg = /^[a-zA-Z0-9]{1,20}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}$/; if (!reg.test(value)) { flag = true; } - } else if (sDateFormat === 'postcode') { + } else if (sDateFormat === "postcode") { const reg = /^[1-9][0-9]{5}$/; if (!reg.test(value)) { flag = true; @@ -373,26 +405,30 @@ export default class CommonComponent extends Component { } if (flag) { - this.props.onChange(this.props.name, 'verificationFailed', { verificationFailed: true, verificationFailedMsg: `【${showName}】【${sName}】${IncorrectFormat}!` }, this.props.sId, []); + this.props.onChange( + this.props.name, + "verificationFailed", + { verificationFailed: true, verificationFailedMsg: `【${showName}】【${sName}】${IncorrectFormat}!` }, + this.props.sId, + [] + ); message.warning(`【${showName}】【${sName}】${IncorrectFormat}!`); } else if (record.verificationFailed) { record.verificationFailed = undefined; } } // }, timeout); - } + }; /** 下拉时看是否要重新获取数据 */ - onDropdownVisibleChange = (open) => { - const { - dropDownData, bNewRecord, pageNum: pageNumOld, totalPageCount: totalPageCountOld, searchValue, conditonValues, - } = this.state; + onDropdownVisibleChange = open => { + const { dropDownData, bNewRecord, pageNum: pageNumOld, totalPageCount: totalPageCountOld, searchValue, conditonValues } = this.state; if (this.mounted && open) { const conditonValuesNew = this.props.getSqlCondition(this.props.showConfig, this.props.name, this.props.record); const pageNum = JSON.stringify(conditonValuesNew) !== JSON.stringify(conditonValues) ? 1 : pageNumOld === 0 ? 1 : pageNumOld; const totalPageCount = conditonValuesNew !== conditonValues ? 1 : totalPageCountOld; - if (pageNum === 1 && this.props.showConfig.sDropDownType === 'sql' && commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { + if (pageNum === 1 && this.props.showConfig.sDropDownType === "sql" && commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { this.setState({ spinState: true }); this.getDropDownData(pageNum, totalPageCount, searchValue, this.dropDownCount); } @@ -411,14 +447,17 @@ export default class CommonComponent extends Component { } this.props.onDropdownVisibleChange(open); } - } + }; onDoubleClick = () => { const sMemo = this.props.showConfig.sName; const title = this.props.showConfig.showName; - const bSParamValue = sMemo === 'sParamValue'; - if ((commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('Memo') > -1) || (bSParamValue && !this.props.record.sDropDownData) || - (this.props.showConfig.sControlName && this.props.showConfig.sControlName.toLowerCase().indexOf('memo') > -1)) { + const bSParamValue = sMemo === "sParamValue"; + if ( + (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf("Memo") > -1) || + (bSParamValue && !this.props.record.sDropDownData) || + (this.props.showConfig.sControlName && this.props.showConfig.sControlName.toLowerCase().indexOf("memo") > -1) + ) { const sCurrMemoProps = { title, name: this.props.name, @@ -434,16 +473,20 @@ export default class CommonComponent extends Component { } else if (this.props.onSaveState) { this.props.onSaveState({ sCurrMemoProps }); } - } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sName') > -1) { /* 计算方案 变量设置双击弹出 */ + } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf("sName") > -1) { + /* 计算方案 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.props.record, this.state.dataValue, this.props.showConfig, this.props.name); - } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sValue') > -1) { /* 计算方案 变量设置双击弹出 */ + } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf("sValue") > -1) { + /* 计算方案 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.props.record, this.state.dataValue, this.props.showConfig, this.props.name); - } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sAssignField') > -1) { /* 赋值字段 变量设置双击弹出 */ + } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf("sAssignField") > -1) { + /* 赋值字段 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); - } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf('sInstruct') > -1) { /* 赋值字段 变量设置双击弹出 */ + } else if (commonUtils.isNotEmptyObject(sMemo) && sMemo.indexOf("sInstruct") > -1) { + /* 赋值字段 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); } - } + }; onEditorClick = () => { // if (this.props.enabled) { @@ -459,42 +502,44 @@ export default class CommonComponent extends Component { config: this.props.showConfig, }; this.props.onSaveState({ curEditorProps }); - } + }; - onKeyUp = (e) => { + onKeyUp = e => { if (this.props.onKeyUp) { this.props.onKeyUp(e); } - } + }; - onKeyDown = (e) => { + onKeyDown = e => { // 如果输入的是字母数字或者中文 if (!this.state.bDropDownOpen && /^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(e.keyCode)) { this.setState({ bDropDownOpen: true }); } - if (e.ctrlKey && e.keyCode === 82) { /* CTRL+ALT+R 代替右击事件 */ + if (e.ctrlKey && e.keyCode === 82) { + /* CTRL+ALT+R 代替右击事件 */ this.onContextMenu(e); - } else if (e.key === 'F10') { + } else if (e.key === "F10") { message.info(this.props.showConfig.sName); - } else if (e.ctrlKey && (e.altKey || e.metaKey) && e.keyCode === 71) { /* CTRL+ALT+G F7 设置界面 */ + } else if (e.ctrlKey && (e.altKey || e.metaKey) && e.keyCode === 71) { + /* CTRL+ALT+G F7 设置界面 */ const { sType } = this.props?.app?.userinfo || {}; - if (!['sysadmin'].includes(sType)) { + if (!["sysadmin"].includes(sType)) { return; } if (commonUtils.isNotEmptyObject(this.props)) { - const { - name, tableConfig, record, configName, - } = this.props; + const { name, tableConfig, record, configName } = this.props; if (commonUtils.isNotEmptyObject(tableConfig)) { const myTableConfig = JSON.parse(JSON.stringify(tableConfig)); - myTableConfig.sActiveId = '16411004790004762980820285096000'; + myTableConfig.sActiveId = "16411004790004762980820285096000"; myTableConfig.sName = this.props.showConfig.sName; const myTableConfigArr = []; myTableConfigArr.push(myTableConfig); - if (this.props.name === 'master') { /* 主表 */ - this.props.onViewClick(name, 'myTableConfig', record, 0, myTableConfigArr, configName); - } else { /* 从表 */ - this.props.onViewClick(name, 'myTableConfig', record, 0, myTableConfigArr, configName); + if (this.props.name === "master") { + /* 主表 */ + this.props.onViewClick(name, "myTableConfig", record, 0, myTableConfigArr, configName); + } else { + /* 从表 */ + this.props.onViewClick(name, "myTableConfig", record, 0, myTableConfigArr, configName); } } } @@ -502,28 +547,33 @@ export default class CommonComponent extends Component { const { showConfig, record, name } = this.props; this.props.onKeyDown(e, record, showConfig.sName, name); } - } + }; /* CommonList列表onkeydown-F10处理 */ - onKeyDownDiv = (e) => { + onKeyDownDiv = e => { if (this.props.onKeyDown) { this.props.onKeyDown(e); } - if (e.key === 'F10') { + if (e.key === "F10") { message.info(this.props.showConfig.sName); } else if (e.ctrlKey && e.keyCode === 67) { - console.log('复制成功!'); + console.log("复制成功!"); } else if (e.ctrlKey && e.keyCode === 65) { - console.log('全选成功!'); + console.log("全选成功!"); } else { e.preventDefault(); return false; } - } + }; /* 单击右键全部更新,弹出窗选择后,更新此列所有数据 (只更新非只读字段) */ - onContextMenu = (e) => { - if (this.state.enabled && commonUtils.isNotEmptyObject(this.props) && this.props.name !== 'master' && commonUtils.isNotEmptyObject(this.props.showConfig)) { + onContextMenu = e => { + if ( + this.state.enabled && + commonUtils.isNotEmptyObject(this.props) && + this.props.name !== "master" && + commonUtils.isNotEmptyObject(this.props.showConfig) + ) { const { showConfig, name } = this.props; const { bReadonly } = showConfig; if (bReadonly) { @@ -535,47 +585,47 @@ export default class CommonComponent extends Component { this.props.onContextMenu(e, record, showConfig, name); } } - } + }; /* 字段选择弹窗 */ onFieldPopupModal = (showConfig, name, open) => { if (open !== undefined) { this.props.onFieldPopupModal(showConfig, name); } - } + }; /** 获取selectprops对象 */ getSelectProps = () => { /* 返回值声明 */ const obj = { id: `${this.props.showConfig.sName}${this.props.record ? this.props.record.sId : commonUtils.createSid()}`, - showSearch: true, /* 是否有查找功能 */ + showSearch: true /* 是否有查找功能 */, // disabled: !this.state.enabled /* 修改的时候传过来的数据 */ onSelect: () => { - if (this.state.mode !== 'multiple') { + if (this.state.mode !== "multiple") { this.setState({ bDropDownOpen: false, bNotFirstEnter: true }); } }, - onChange: this.handleSelectOptionEvent, /* 选择触发事件 */ - filterOption: this.filterOption, /* 搜索时过滤对应的 option 属性 */ + onChange: this.handleSelectOptionEvent /* 选择触发事件 */, + filterOption: this.filterOption /* 搜索时过滤对应的 option 属性 */, onDropdownVisibleChange: this.onDropdownVisibleChange, onPopupScroll: this.handlePopupScroll, onSearch: this.handleSearch, - notFoundContent: this.state.spinState ? : '暂无数据', + notFoundContent: this.state.spinState ? : "暂无数据", // getPopupContainer: this.props.name === 'slave' || this.props.name === 'searchColumnShow' ? this.getPopupContainer : null,/*解决下拉框不随浏览器滚动问题 */ onFocus: this.onFocus, // onBlur: this.onBlur, - onBlur: (e) => { + onBlur: e => { this.setState({ bDropDownOpen: false, bNotFirstEnter: false }); this.onBlur(e); }, mode: this.state.mode, - onPaste: (event) => { + onPaste: event => { if (this.props.showConfig.bMultipleChoice) { - const clipboardText = event.clipboardData.getData('text/plain').trim(); + const clipboardText = event.clipboardData.getData("text/plain").trim(); if (clipboardText) { - const { dataValue = '' } = this.state; + const { dataValue = "" } = this.state; let dataValueNew = dataValue; - if (dataValueNew === '') { + if (dataValueNew === "") { dataValueNew += clipboardText; } else { dataValueNew += `,${clipboardText}`; @@ -586,22 +636,30 @@ export default class CommonComponent extends Component { } }, }; - if (this.props.showConfig.sDropDownType === 'sql') { - obj.optionLabelProp = 'title'; + if (this.props.showConfig.sDropDownType === "sql") { + obj.optionLabelProp = "title"; } if (this.props.readOnly) { - obj.readOnly = 'readOnly'; + obj.readOnly = "readOnly"; } else { obj.disabled = !this.state.enabled; } obj.placeholder = this.props.showConfig.placeholder; /* 区分Oee设置字体与其他系统设置字体 */ - obj.dropdownStyle = commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf('oee') > -1 ? { fontSize: '1.3rem' } : { fontSize: '12px' }; - obj.dropdownClassName = commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf('oee') > -1 ? (location.pathname.toLowerCase().indexOf('loginoee') > -1 ? 'loginOeeDropDown' : 'oeeDropDown') : ''; + obj.dropdownStyle = + commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf("oee") > -1 + ? { fontSize: "1.3rem" } + : { fontSize: "12px" }; + obj.dropdownClassName = + commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf("oee") > -1 + ? location.pathname.toLowerCase().indexOf("loginoee") > -1 + ? "loginOeeDropDown" + : "oeeDropDown" + : ""; /* 主表时才赋值value */ if (this.props.bTable) { if (this.props.showConfig.bMultipleChoice) { - obj.value = !commonUtils.isEmpty(this.state.dataValue) ? this.state.dataValue.split(',') : []; /* 数据值 */ + obj.value = !commonUtils.isEmpty(this.state.dataValue) ? this.state.dataValue.split(",") : []; /* 数据值 */ } else { obj.value = this.state.dataValue; /* 数据值 */ } @@ -611,7 +669,7 @@ export default class CommonComponent extends Component { obj.dropdownMatchSelectWidth = false; /* true时 下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。 */ obj.dropdownStyle.width = this.props.showConfig.iDropWidth; } - obj.onInputKeyDown = (e) => { + obj.onInputKeyDown = e => { const { bDropDownOpen, bNotFirstEnter } = this.state; if (bDropDownOpen && [38, 40, 13].includes(e.keyCode)) { // eslint-disable-next-line no-console @@ -637,25 +695,25 @@ export default class CommonComponent extends Component { /* 返回值 */ return obj; }; - getLocalizedString = (jsonStr, language) =>{ + getLocalizedString = (jsonStr, language) => { try { const data = JSON.parse(jsonStr); - return data[language] || ''; + return data[language] || ""; } catch (e) { - console.error('Error parsing JSON:', e); - return ''; + console.error("Error parsing JSON:", e); + return ""; } - } + }; getSelectTableProps = () => { const { currentPage, tempCurrentPage, searchValue } = this.state; - const pageNum = searchValue === '' ? currentPage : tempCurrentPage; + const pageNum = searchValue === "" ? currentPage : tempCurrentPage; /* 返回值声明 */ const obj = { id: `${this.props.showConfig.sName}${this.props.record ? this.props.record.sId : commonUtils.createSid()}`, dropdownMatchSelectWidth: false, - filterOption: this.filterOption, /* 搜索时过滤对应的 option 属性 */ - onDropdownVisibleChange: (open) => { + filterOption: this.filterOption /* 搜索时过滤对应的 option 属性 */, + onDropdownVisibleChange: open => { this.onDropdownVisibleChange(open); if (open === false) { clearTimeout(this.blurtimer); @@ -672,41 +730,47 @@ export default class CommonComponent extends Component { // onFocus: this.onFocus, // onBlur: this.onBlur, }; - if (this.props.showConfig.sDropDownType === 'sql') { - obj.optionLabelProp = 'title'; + if (this.props.showConfig.sDropDownType === "sql") { + obj.optionLabelProp = "title"; } if (this.props.readOnly) { - obj.readOnly = 'readOnly'; + obj.readOnly = "readOnly"; } else { obj.disabled = !this.state.enabled; } obj.placeholder = this.props.showConfig.placeholder; /* 区分Oee设置字体与其他系统设置字体 */ - obj.dropdownStyle = commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf('oee') > -1 ? { fontSize: '1.3rem' } : { fontSize: '12px' }; - obj.dropdownClassName = commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf('oee') > -1 ? (location.pathname.toLowerCase().indexOf('loginoee') > -1 ? 'loginOeeDropDown' : 'oeeDropDown') : ''; + obj.dropdownStyle = + commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf("oee") > -1 + ? { fontSize: "1.3rem" } + : { fontSize: "12px" }; + obj.dropdownClassName = + commonUtils.isNotEmptyObject(location.pathname) && location.pathname.toLowerCase().indexOf("oee") > -1 + ? location.pathname.toLowerCase().indexOf("loginoee") > -1 + ? "loginOeeDropDown" + : "oeeDropDown" + : ""; /* 主表时才赋值value */ if (this.props.bTable) { - obj.value = this.props.showConfig.bMultipleChoice && !commonUtils.isEmpty(this.state.dataValue) ? this.state.dataValue.split(',') : this.state.dataValue; /* 数据值 */ + obj.value = + this.props.showConfig.bMultipleChoice && !commonUtils.isEmpty(this.state.dataValue) + ? this.state.dataValue.split(",") + : this.state.dataValue; /* 数据值 */ obj.className = this.props.costomClassName === undefined ? styles.editSelect : this.props.costomClassName; } if (this.props.showConfig.iDropWidth > 0) { obj.dropdownMatchSelectWidth = false; /* true时 下拉菜单和选择器同宽。默认将设置 min-width,当值小于选择框宽度时会被忽略。 */ } - obj.onInputKeyDown = (e) => { - const { - selectTableData = [], - selectTableIndex = 0, - bDropDownOpen, - bNotFirstEnter, - } = this.state; + obj.onInputKeyDown = e => { + const { selectTableData = [], selectTableIndex = 0, bDropDownOpen, bNotFirstEnter } = this.state; const { keyCode } = e; try { if (bDropDownOpen) { - const oTBody = this.selectTableRef1.querySelector('.ant-table-body'); + const oTBody = this.selectTableRef1.querySelector(".ant-table-body"); const { scrollTop } = oTBody; - const oTr = this.selectTableRef1.querySelector('.selected-record-row'); + const oTr = this.selectTableRef1.querySelector(".selected-record-row"); const trRect = oTr.getBoundingClientRect(); const tbodyRect = oTBody.getBoundingClientRect(); @@ -771,7 +835,7 @@ export default class CommonComponent extends Component { }; obj.onKeyUp = this.onKeyUp; /* eslint-disable */ - obj.dropdownRender = (menu) => ( + obj.dropdownRender = menu => ( <> {/*
this.selectTableSearch(e)}/> @@ -779,7 +843,9 @@ export default class CommonComponent extends Component { {menu}
{ this.bInPagination = true; }} + onMouseEnter={() => { + this.bInPagination = true; + }} onMouseLeave={() => { this.bInPagination = false; if (this.selectTableRef) { @@ -787,50 +853,57 @@ export default class CommonComponent extends Component { } }} > - this.selectTableChange(e)} showSizeChanger={false} current={pageNum} pageSize={20} size="small" total={this.state.totalCount} /> + this.selectTableChange(e)} + showSizeChanger={false} + current={pageNum} + pageSize={20} + size="small" + total={this.state.totalCount} + /> {this.props.showConfig.bFirstEmpty && ( ) - } + + )} {this.props.showConfig.bNewRecord && ( ) - } + + )}
- ) + ); /* eslint-enable */ /* 返回值 */ return obj; @@ -838,38 +911,40 @@ export default class CommonComponent extends Component { getSelectTableOption = () => { const { selectTableData, selectTableIndex = 0 } = this.state; - const { showConfig , app} = this.props; + const { showConfig, app } = this.props; const { userinfo } = app; let { sTableTitleSql } = showConfig; /* 根据用户配置语言 设置表格标题 */ - if(commonUtils.isJSON(sTableTitleSql) && sTableTitleSql.includes('Chinese')) { + if (commonUtils.isJSON(sTableTitleSql) && sTableTitleSql.includes("Chinese")) { sTableTitleSql = this.getLocalizedString(sTableTitleSql, userinfo.sLanguage); } - const tempColumnArr = sTableTitleSql.split(','); + const tempColumnArr = sTableTitleSql.split(","); let scrollX = 0; const columns = tempColumnArr.map((item, index) => { - const tempArr = item.split(':'); + const tempArr = item.split(":"); const [value, title, columnWidth] = tempArr; let width; - if (!Number.isNaN(Number(columnWidth))) { // 如果配置了列宽 + if (!Number.isNaN(Number(columnWidth))) { + // 如果配置了列宽 width = Number(columnWidth); - } else { // 没有配置列宽,就根据字符数算宽度 + } else { + // 没有配置列宽,就根据字符数算宽度 // 获取中文字数、非中文字数, 中文12px,其它8px const titleStr = title; const totalStringLen = titleStr.length; - const otherStrLen = titleStr.replace(/[^\x00-\xff]/g, '').length; // eslint-disable-line + const otherStrLen = titleStr.replace(/[^\x00-\xff]/g, "").length; // eslint-disable-line const chineseStrLen = totalStringLen - otherStrLen; - const defaultWidth = (chineseStrLen * 12) + (otherStrLen * 8); + const defaultWidth = chineseStrLen * 12 + otherStrLen * 8; const maxStrLen = selectTableData.reduce((res, pre) => { - let tempValue = pre[value] !== undefined ? pre[value] : ''; - if (tempValue === '') { + let tempValue = pre[value] !== undefined ? pre[value] : ""; + if (tempValue === "") { return res; } - tempValue = typeof tempValue === 'string' ? tempValue : JSON.stringify(tempValue); + tempValue = typeof tempValue === "string" ? tempValue : JSON.stringify(tempValue); const totalStringLen = tempValue.length; - const otherStrLen = tempValue.replace(/[^\x00-\xff]/g, '').length; // eslint-disable-line + const otherStrLen = tempValue.replace(/[^\x00-\xff]/g, "").length; // eslint-disable-line const chineseStrLen = totalStringLen - otherStrLen; - const tempWidth = (chineseStrLen * 12) + (otherStrLen * 8); + const tempWidth = chineseStrLen * 12 + otherStrLen * 8; return Math.max(tempWidth, res); }, defaultWidth); width = Math.min(maxStrLen + 8, 300); @@ -882,20 +957,29 @@ export default class CommonComponent extends Component { dataIndex: value, key: value, width: index !== tempColumnArr.length - 1 ? width : undefined, - render: (text) => { - return ({text}); + render: text => { + return ( + + {text} + + ); }, }; }); return (