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, Checkbox, DatePicker, Input, Cascader, Select, AutoComplete, Spin, message, Form, Upload, Image, Button, Space, Table, Pagination, Tooltip, Modal, } from "antd-v4"; import {DeleteOutlined, EyeOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined, FileOutlined, RightOutlined, PlaySquareOutlined } 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; const { TextArea } = Input; const { Search } = Input; const InputNumberA1 = reactComponentDebounce(300)(InputNumber); const InputA1 = reactComponentDebounce(300)(Input); const AutoCompleteA1 = reactComponentDebounce(300)(AutoComplete); /* 处理快速选择产品后离开 产品无法赋值问题s */ const TextAreaA1 = reactComponentDebounce(500)(TextArea); // const InputNumberA = InputNumber; // const InputA = Input; // const AutoCompleteA = AutoComplete; // const TextAreaA = TextArea; const { RangePicker, MonthPicker } = DatePicker; export default class CommonComponent extends Component { /** 构造函数 */ constructor(props) { super(props); this.state = { 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 /* 是否有新纪录 */, sActiveDisplay: true, pageNum: 0, totalPageCount: 1, searchValue: "", searchDropDownData: [], searchTotalPageCount: 1, searchPageNum: 0, spinState: false, currentPage: 1, selectTableData: [], buttonLoading: false, key: 0, selectTableIndex: 0, }; this.firstDataIndex = props.showConfig.sName.substring(0, 1); /* 控件首字母(数据格式:字符串) */ this.max = props.showConfig.sMaxValue; /* 最大值(数据格式:数字) */ this.min = props.showConfig.sMinValue; /* 最小值(数据格式:数字) */ // 重构修改 this.getFieldDecorator = commonUtils.isUndefined(props.form) ? undefined : props.form.getFieldDecorator; /* 字段验证(数据格式:数字) */ // 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.isDropdownFilter = false; this.V = { value: props.dataValue }; this.myRef = createRef(); this.dropDownCount = 0; this.bSpecial = location.pathname?.includes("ResearchTableTree") && props.showConfig.sName === "sProductName"; } /** 渲染前只执行一次 */ componentWillMount() { this.mounted = true; 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)); /* 给state赋值 */ if (this.mounted) { this.setState({ dropDownData: showDropDown, }); } } else if (this.props.showConfig.sDropDownType === "sql" && !commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { if (this.mounted) { this.setState({ dropDownData: this.props.showConfig.dropDownData, }); } } } componentDidMount() { const currentNode = this.myRef.current; const selectInputNode = currentNode.querySelector("input[class*='ant-select-selection-search-input']"); const antInput = currentNode.querySelector("input[class*='ant-input']"); const oInput = selectInputNode || antInput; if (oInput && !this.props.noDebounce) { oInput.addEventListener("compositionstart", () => { this.chineseInputting = true; }); oInput.addEventListener("compositionend", () => { this.chineseInputting = false; if (this.handleCompleteInputEventCache) { this.handleCompleteInputEventCache(); } }); } if (currentNode) { 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"; } else { sDateFormat = this.props.getDateFormat(); } } oInput.oninput = e => { const { value } = e.target; const isValidDate = moment(value, sDateFormat, true).isValid(); if (isValidDate) { this.handleSelectOptionEvent(moment(this.state.dataValue), value); } }; } } } document.addEventListener("mousedown", this.handleSelectClick); } /** props改变的时候触发 */ componentWillReceiveProps(nextProps) { /* 如果是下拉控件,则要获取数据(获取下拉数据前要先更新sqlCondition) */ 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") { /* 常量下拉 */ /* 常量下拉其实只取一次数据就可以啦,去过数据的会给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)); // 对应工序单独处理 // if (this.props.showConfig.showName === '对应工序') { // showDropDown = nextProps.customDropData; // } /* 给state赋值 */ if (this.mounted) { this.setState({ dropDownData: showDropDown, }); } } else if (nextProps.showConfig.sDropDownType === "sql" && !commonUtils.isEmptyArr(nextProps.showConfig.dropDownData)) { if (this.mounted) { this.setState({ dropDownData: nextProps.showConfig.dropDownData, }); } } /* 把需要更新的数据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 (this.mounted) { if (commonUtils.isEmpty(nextProps.dataValue)) { this.lastValue = nextProps.dataValue; } const addState = { dataValue: nextProps.dataValue, enabled: nextProps.enabled, sFieldName: nextProps.showConfig.sName, sDropDownType: nextProps.showConfig.sDropDownType, bNotEmpty: nextProps.showConfig.bNotEmpty, showName: nextProps.showConfig.showName, }; if (this.bSpecial && this.completeSelectFlag) { addState.key = this.state.key + 1; } this.completeSelectFlag = false; this.setState(addState); } } } shouldComponentUpdate(nextProps, nextState) { const { 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)) ); } componentWillUnmount() { this.mounted = false; document.removeEventListener("mousedown", this.handleSelectClick); } onFocus = () => { this.isDropdownFilter = false; this.setState({ sActiveDisplay: false }); }; onBlur = event => { if (this.onExecInstructSet("blur")) return; this.isDropdownFilter = false; if (commonUtils.isNotEmptyStr(this.props.showConfig.sTableTitleSql) && this.props.showConfig.iVisCount > 1) { this.setState({ searchPageNum: 1, searchTotalPageCount: 1, searchDropDownData: [], searchValue: "", spinState: false, sActiveDisplay: true, }); } else if ( this.state.searchValue !== "" && this.props.showConfig.sDropDownType === "sql" && commonUtils.isEmptyArr(this.props.showConfig.dropDownData) ) { if (!this.props.showConfig.bCanInput) { this.handleSelectOptionEvent(""); } this.setState({ searchPageNum: 1, searchTotalPageCount: 1, // searchDropDownData: [], // searchValue: '', spinState: false, sActiveDisplay: true, }); } else { this.setState({ sActiveDisplay: true, }); } /* 若下拉配置了movesql 则离开时 调用下拉sql数据 */ 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); } this.onCheckFields(500); this.onBlurText(event, 500); }; onBlurText = (event, timeout = 0) => { 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; 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") { if (!sActiveKey) return; this.lastValue = currentValue; onToolBarBtnClick({ key: sControlName }); } }, timeout); }; onExecInstructSet = type => { const { sInstruct: sInstructStr, showName, sOnChangeInstruct } = this.props.showConfig; const sInstruct = commonUtils.convertStrToObj(sInstructStr, {}); let { [type]: instructType } = sInstruct; if (type === "change") { const onChangeNew = commonUtils.convertStrToObj(sOnChangeInstruct, {}); instructType = onChangeNew[type]; } if (instructType) { if (this.props.onExecInstructSet) { this.props.onExecInstructSet({ type, sInstruct: instructType, showName: `${showName}-${type === "blur" ? "离焦" : "变化"}`, }); } else { message.error("未定义调用指令集事件!"); } return true; } return false; }; onCheckFields = () => { // 手机号、邮箱校验等校验 // setTimeout(() => { 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 value = record[sName]; if (value !== undefined && value !== "" && sDateFormatTypeList.includes(sDateFormat)) { let flag = false; 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") { 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") { 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") { const reg = /^[1-9][0-9]{5}$/; if (!reg.test(value)) { flag = true; } } if (flag) { 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; 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)) { this.setState({ spinState: true }); this.getDropDownData(pageNum, totalPageCount, searchValue, this.dropDownCount); } } else { // if (searchValue !== '' && this.props.showConfig.sDropDownType === 'sql' && commonUtils.isEmptyArr(this.props.showConfig.dropDownData)) { // this.setState({ // searchPageNum: 1, searchTotalPageCount: 1, searchDropDownData: [], searchValue: '', spinState: false, // }); // } this.isDropdownFilter = false; } if (this.props.onDropdownVisibleChange !== undefined) { if (dropDownData.length === 0 && !bNewRecord) { /* 如果没有值并且没有新纪录,则不展开 */ open = false; } 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 sCurrMemoProps = { title, name: this.props.name, sValue: this.props.dataValue, sMemoField: sMemo, bVisibleMemo: true, sRecord: this.props.record, sMemoConfig: this.props.showConfig, bOnlyShow: !this.props.enabled, }; if (this.props.bInSlaveMemo) { this.props.onSaveState({ sCurrMemoProps1: sCurrMemoProps }); } else if (this.props.onSaveState) { this.props.onSaveState({ sCurrMemoProps }); } } 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) { /* 计算方案 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.props.record, this.state.dataValue, this.props.showConfig, this.props.name); } 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) { /* 赋值字段 变量设置双击弹出 */ this.props.onFieldDoubleClick(this.state.dataValue, this.props.showConfig, this.props.name); } }; onEditorClick = () => { // if (this.props.enabled) { // // } const curEditorProps = { title: this.props.showConfig.showName, name: this.props.name, value: this.props.dataValue, sName: this.props.showConfig.sName, visible: true, record: this.props.record, config: this.props.showConfig, }; this.props.onSaveState({ curEditorProps }); }; onKeyUp = e => { if (this.props.onKeyUp) { this.props.onKeyUp(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 代替右击事件 */ this.onContextMenu(e); } 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 设置界面 */ const { sType } = this.props?.app?.userinfo || {}; if (!["sysadmin"].includes(sType)) { return; } if (commonUtils.isNotEmptyObject(this.props)) { const { name, tableConfig, record, configName } = this.props; if (commonUtils.isNotEmptyObject(tableConfig)) { const myTableConfig = JSON.parse(JSON.stringify(tableConfig)); 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); } } } } else if (this.props.onKeyDown) { const { showConfig, record, name } = this.props; this.props.onKeyDown(e, record, showConfig.sName, name); } }; /* CommonList列表onkeydown-F10处理 */ onKeyDownDiv = e => { if (this.props.onKeyDown) { this.props.onKeyDown(e); } if (e.key === "F10") { message.info(this.props.showConfig.sName); } else if (e.ctrlKey && e.keyCode === 67) { console.log("复制成功!"); } else if (e.ctrlKey && e.keyCode === 65) { 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) ) { const { showConfig, name } = this.props; const { bReadonly } = showConfig; if (bReadonly) { return; } e.preventDefault(); /* 阻止浏览器本身的右击事件 */ if (this.props.onContextMenu) { const { showConfig, record } = this.props; 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 /* 是否有查找功能 */, // disabled: !this.state.enabled /* 修改的时候传过来的数据 */ onSelect: () => { if (this.state.mode !== "multiple") { this.setState({ bDropDownOpen: false, bNotFirstEnter: true }); } }, onChange: this.handleSelectOptionEvent /* 选择触发事件 */, filterOption: this.filterOption /* 搜索时过滤对应的 option 属性 */, onDropdownVisibleChange: this.onDropdownVisibleChange, onPopupScroll: this.handlePopupScroll, onSearch: this.handleSearch, notFoundContent: this.state.spinState ? : "暂无数据", // getPopupContainer: this.props.name === 'slave' || this.props.name === 'searchColumnShow' ? this.getPopupContainer : null,/*解决下拉框不随浏览器滚动问题 */ onFocus: this.onFocus, // onBlur: this.onBlur, onBlur: e => { this.setState({ bDropDownOpen: false, bNotFirstEnter: false }); this.onBlur(e); }, mode: this.state.mode, onPaste: event => { if (this.props.showConfig.bMultipleChoice) { const clipboardText = event.clipboardData.getData("text/plain").trim(); if (clipboardText) { const { dataValue = "" } = this.state; let dataValueNew = dataValue; if (dataValueNew === "") { dataValueNew += clipboardText; } else { dataValueNew += `,${clipboardText}`; } this.handleSelectOptionEvent(dataValueNew, []); document.activeElement.blur(); } } }, }; if (this.props.showConfig.sDropDownType === "sql") { obj.optionLabelProp = "title"; } if (this.props.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" : ""; /* 主表时才赋值value */ if (this.props.bTable) { if (this.props.showConfig.bMultipleChoice) { obj.value = !commonUtils.isEmpty(this.state.dataValue) ? this.state.dataValue.split(",") : []; /* 数据值 */ } else { obj.value = 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.dropdownStyle.width = this.props.showConfig.iDropWidth; } obj.onInputKeyDown = e => { const { bDropDownOpen, bNotFirstEnter } = this.state; if (bDropDownOpen && [38, 40, 13].includes(e.keyCode)) { // eslint-disable-next-line no-console } else if (bDropDownOpen && [27].includes(e.keyCode)) { this.setState({ bDropDownOpen: false }); } else if (e.keyCode === 13 && !bNotFirstEnter) { this.setState({ bDropDownOpen: true, bNotFirstEnter: true }); } else { this.onKeyDown(e); } }; obj.onKeyUp = this.onKeyUp; obj.open = this.state.bDropDownOpen !== undefined ? this.state.bDropDownOpen : false; // obj.onBlur = () => { // this.setState({ bDropDownOpen: false }); // }; obj.onMouseMove = () => { this.bInputIn = true; }; obj.onMouseLeave = () => { this.bInputIn = false; }; /* 返回值 */ return obj; }; getLocalizedString = (jsonStr, language) => { try { const data = JSON.parse(jsonStr); return data[language] || ""; } catch (e) { console.error("Error parsing JSON:", e); return ""; } }; getSelectTableProps = () => { const { currentPage, tempCurrentPage, searchValue } = this.state; 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 => { this.onDropdownVisibleChange(open); if (open === false) { clearTimeout(this.blurtimer); this.blurtimer = setTimeout(() => { this.onBlur(); }, 500); } else { clearTimeout(this.blurtimer); this.onFocus(); } }, onSearch: this.selectTableSearch, showSearch: true, // onFocus: this.onFocus, // onBlur: this.onBlur, }; if (this.props.showConfig.sDropDownType === "sql") { obj.optionLabelProp = "title"; } if (this.props.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" : ""; /* 主表时才赋值value */ if (this.props.bTable) { 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; const { keyCode } = e; try { if (bDropDownOpen) { const oTBody = this.selectTableRef1.querySelector(".ant-table-body"); const { scrollTop } = oTBody; const oTr = this.selectTableRef1.querySelector(".selected-record-row"); const trRect = oTr.getBoundingClientRect(); const tbodyRect = oTBody.getBoundingClientRect(); const tbodyTop = tbodyRect.top + window.scrollY; const tbodyBottom = tbodyRect.bottom + window.scrollY; const trTop = trRect.top + window.scrollY; const trBottom = trRect.bottom + window.scrollY; if (keyCode === 40) { const selectTableIndexNew = Math.min(selectTableIndex + 1, selectTableData.length - 1); if (selectTableIndex !== selectTableIndexNew) { const bInView = trTop + 29 >= tbodyTop && trBottom + 29 <= tbodyBottom; if (!bInView) { oTBody.scrollTop = scrollTop + 29; } this.setState({ selectTableIndex: selectTableIndexNew, }); } } else if (keyCode === 38) { const selectTableIndexNew = Math.max(selectTableIndex - 1, 0); if (selectTableIndex !== selectTableIndexNew) { const bInView = trTop - 29 >= tbodyTop && trBottom - 29 <= tbodyBottom; if (!bInView) { oTBody.scrollTop = scrollTop - 29; } this.setState({ selectTableIndex: selectTableIndexNew, }); } } else if (keyCode === 13) { e.stopPropagation(); this.setState({ bNotFirstEnter: true }); setTimeout(() => { oTr.click(); }, 10); } else { this.onKeyDown(e); } } else if (![37, 38, 39, 40, 13].includes(keyCode)) { this.setState({ bDropDownOpen: true }); } else if (keyCode === 13 && !bNotFirstEnter) { this.setState({ bDropDownOpen: true, bNotFirstEnter: true }); } else { this.onKeyDown(e); } } catch (error) { console.log(error); } }; obj.open = this.state.bDropDownOpen !== undefined ? this.state.bDropDownOpen : false; obj.onBlur = () => { if (!this.bInPagination) { this.setState({ bDropDownOpen: false, bNotFirstEnter: false }); } }; obj.onMouseMove = () => { this.bInputIn = true; }; obj.onMouseLeave = () => { this.bInputIn = false; }; obj.onKeyUp = this.onKeyUp; /* eslint-disable */ obj.dropdownRender = menu => ( <> {/*
this.selectTableSearch(e)}/>
*/} {menu}
{ this.bInPagination = true; }} onMouseLeave={() => { this.bInPagination = false; if (this.selectTableRef) { this.selectTableRef.focus(); } }} > 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; }; getSelectTableOption = () => { const { selectTableData, selectTableIndex = 0 } = this.state; const { showConfig, app } = this.props; const { userinfo } = app; let { sTableTitleSql } = showConfig; /* 根据用户配置语言 设置表格标题 */ if (commonUtils.isJSON(sTableTitleSql) && sTableTitleSql.includes("Chinese")) { sTableTitleSql = this.getLocalizedString(sTableTitleSql, userinfo.sLanguage); } const tempColumnArr = sTableTitleSql.split(","); let scrollX = 0; const columns = tempColumnArr.map((item, index) => { const tempArr = item.split(":"); const [value, title, columnWidth] = tempArr; let width; if (!Number.isNaN(Number(columnWidth))) { // 如果配置了列宽 width = Number(columnWidth); } else { // 没有配置列宽,就根据字符数算宽度 // 获取中文字数、非中文字数, 中文12px,其它8px const titleStr = title; const totalStringLen = titleStr.length; const otherStrLen = titleStr.replace(/[^\x00-\xff]/g, "").length; // eslint-disable-line const chineseStrLen = totalStringLen - otherStrLen; const defaultWidth = chineseStrLen * 12 + otherStrLen * 8; const maxStrLen = selectTableData.reduce((res, pre) => { let tempValue = pre[value] !== undefined ? pre[value] : ""; if (tempValue === "") { return res; } tempValue = typeof tempValue === "string" ? tempValue : JSON.stringify(tempValue); const totalStringLen = tempValue.length; const otherStrLen = tempValue.replace(/[^\x00-\xff]/g, "").length; // eslint-disable-line const chineseStrLen = totalStringLen - otherStrLen; const tempWidth = chineseStrLen * 12 + otherStrLen * 8; return Math.max(tempWidth, res); }, defaultWidth); width = Math.min(maxStrLen + 8, 300); } scrollX += width; return { title, dataIndex: value, key: value, width: index !== tempColumnArr.length - 1 ? width : undefined, render: text => { return ( {text} ); }, }; }); return (