233 lines
9.5 KiB
JavaScript
233 lines
9.5 KiB
JavaScript
import React from 'react'
|
|
import * as mobx from 'mobx'
|
|
import {
|
|
inject,
|
|
observer
|
|
} from 'mobx-react'
|
|
import {
|
|
WeaTable, WeaLocaleProvider, WeaSelect, WeaInput, WeaInputNumber
|
|
} from 'ecCom'
|
|
import {
|
|
Row, Col, Button, Modal, message, Input, Dropdown, Icon, Menu
|
|
} from 'antd'
|
|
import {
|
|
i18n
|
|
} from '../../public/i18n';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
import jQuery from "jquery";
|
|
const toJS = mobx.toJS;
|
|
|
|
export default class QuickSearchTableEdit extends React.Component {
|
|
|
|
|
|
/**========================table字段类型=====================*/
|
|
getColumns = () => {
|
|
let columnArray = [
|
|
{
|
|
title: getLabel(261, "字段"), dataIndex: "fieldid", key: "fieldid", width: "18%",
|
|
com: [{ label: '', type: 'SELECT', isLink: true, key: 'fieldid', options: [] }]
|
|
},
|
|
{
|
|
title: getLabel(195, "名称"), dataIndex: "customname", key: "customname", width: "18%",
|
|
com: [{
|
|
label: '', type: 'INPUT', key: 'customname', viewAttr: 2, otherParams: { isBase64: true, inputType: "multilang" }
|
|
}]
|
|
},
|
|
{
|
|
title: getLabel(389518, "查询范围"), dataIndex: "range", key: "range", width: "8%",
|
|
com: [{ label: '', type: 'INPUT', key: 'range', viewAttr: 1 }]
|
|
},
|
|
{
|
|
title: getLabel(387588, "内容自定义条件"), dataIndex: "condition", key: "condition", width: "15%",
|
|
com: [{ label: '', type: 'BUTTON', key: 'condition', viewAttr: 1 }]
|
|
}, {
|
|
title: getLabel(21657, "显示模式"), dataIndex: "showmodel", key: "showmodel", width: "15%",
|
|
com: [{
|
|
label: '',
|
|
type: 'SELECT',
|
|
key: 'showmodel',
|
|
viewAttr: 1,
|
|
options: [ { key: '0', showname: getLabel(19852, '平铺') },]
|
|
}]
|
|
}
|
|
];
|
|
columnArray = columnArray.map((col) => {
|
|
let _col = { ...col };
|
|
_col.render = (text, record, index) => {
|
|
return this.getColRender(_col, text, record, index);
|
|
}
|
|
return _col
|
|
});
|
|
return columnArray;
|
|
}
|
|
|
|
getColRender = (_col, text, record, index) => {
|
|
const {
|
|
quickSearch: store
|
|
} = this.props;
|
|
const { com } = _col;
|
|
let _com = [];
|
|
com.map((c, idn) => {
|
|
if (typeof c.props === 'object') {
|
|
_com.push(<span></span>);
|
|
} else {
|
|
const { key, isLink = false, viewAttr = 2, type = 'INPUT', width, otherParams = {}, detailtype = 1, options = [] } = c;
|
|
const _type = type.toUpperCase();
|
|
record.range = record.type == '1' ? getLabel('387636', "内容自定义") : getLabel('387637', "字段本身值");
|
|
record.condition = record.type == '1' ? getLabel('68', "设置") : '';
|
|
if (_type === 'INPUT') {
|
|
_com.push(<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@gedh14@${idn}`}
|
|
style={{ minWidth: 60 }}
|
|
value={record[key]}
|
|
viewAttr={viewAttr}
|
|
onChange={(value) => this.onEdit(record, index, key, value)}
|
|
{...otherParams}
|
|
length={100}
|
|
/>)
|
|
} else if (_type === 'BUTTON') {
|
|
_com.push(<a onClick={() => this.onClick(record)}
|
|
style={{ width, display: 'inline-block' }}>{record[key]}</a>);
|
|
} else if (_type === 'INPUTNUMBER') {
|
|
_com.push(<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@9qqytl@${idn}`}
|
|
value={record[key]}
|
|
style={{ width, display: 'inline-block' }}
|
|
viewAttr={viewAttr}
|
|
onChange={(value) => this.onEdit(record, index, key, value)}
|
|
{...otherParams}
|
|
/>)
|
|
} else if (_type === 'SELECT') {
|
|
if (isLink) {
|
|
_com.push(<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@h3f5u2@${idn}`}
|
|
style={{ width, display: 'inline-block', minWidth: 173 }}
|
|
options={toJS(this.props.options)}
|
|
viewAttr={viewAttr}
|
|
value={record[key]}
|
|
detailtype={detailtype}
|
|
onChange={(value) => {
|
|
this.onEdit(record, index, key, value)
|
|
}}
|
|
showSearch
|
|
filterOption={(inputValue, option) => this.selectFilterOption(inputValue, option)}
|
|
/>);
|
|
}else if (key === 'showmodel') {//可以设置平铺的类型
|
|
const opt = this.props.options.filter(item => item.fieldid === record.fieldid);
|
|
const isShowModel = opt[0] ? opt[0].isShowModel : false;
|
|
if (isShowModel) {
|
|
if (!record[key]) {
|
|
record[key] = '0'
|
|
}
|
|
_com.push(<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ffcq2z@${idn}`}
|
|
style={{ width, display: 'inline-block' }}
|
|
options={options}
|
|
viewAttr={viewAttr}
|
|
value={record[key]}
|
|
detailtype={detailtype}
|
|
onChange={(value) => {
|
|
this.onEdit(record, index, key, value)
|
|
}}
|
|
filterOption={(inputValue, option) => selectFilterOption(inputValue, option)}
|
|
/>);
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
});
|
|
return (
|
|
<div className="cube-quicksearch-list-form">{_com}</div>
|
|
)
|
|
};
|
|
|
|
onDropChange = (data) => {
|
|
typeof this.props.onChange === 'function' && this.props.onChange(data);
|
|
}
|
|
|
|
onClick = (record) => {
|
|
const { ListProps } = this.props;
|
|
const { quickSearch } = ListProps;
|
|
let key = record.key;
|
|
if (key.indexOf("new") >= 0 || record.fieldid != record.orifieldid) {
|
|
message.error(getLabel(82228, "请先保存再设置条件"));
|
|
return;
|
|
}
|
|
quickSearch.openQuickSearchDetail(record);
|
|
};
|
|
|
|
onEdit = (record, index, key, value, name, data) => {
|
|
const { datas } = this.props;
|
|
let _datas = [...datas];
|
|
_datas[index][key] = value;
|
|
if (key == 'fieldid') {
|
|
let opt = this.getType(value);
|
|
if (opt != null) {
|
|
_datas[index].type = opt['type'];
|
|
_datas[index].customname = opt['showname'];
|
|
_datas[index].range = _datas[index].type == '1' ? getLabel('387636', "内容自定义") : getLabel('387637', "字段本身值");
|
|
_datas[index].condition = _datas[index].type == '1' ? getLabel('68', "设置") : '';
|
|
_datas[index].isdetailtable = opt['isdetailtable'];
|
|
}
|
|
}
|
|
typeof this.props.onChange === 'function' && this.props.onChange(_datas);
|
|
}
|
|
|
|
getType = (key) => {
|
|
let option = null;
|
|
this.props.options.map(f => {
|
|
if (f.key == key) {
|
|
option = f;
|
|
}
|
|
});
|
|
return option;
|
|
}
|
|
|
|
/**
|
|
* 根据选择框的名称，搜索过滤选项
|
|
* @param inputValue
|
|
* @param option
|
|
*/
|
|
selectFilterOption = (inputValue, option) => {
|
|
if (inputValue != "") {
|
|
const { children } = option["props"];
|
|
if (children) {
|
|
if ((typeof children) == "string") {
|
|
return children.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
|
|
} else if ((typeof children) == "object" && children.length > 0) {
|
|
const childrenNew = children[0]["props"]["children"];
|
|
if (childrenNew) {
|
|
return childrenNew.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
|
|
} else {
|
|
return false;
|
|
}
|
|
} else {
|
|
const childrenNew = children["props"]["children"];
|
|
if (childrenNew) {
|
|
return childrenNew.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
|
|
render() {
|
|
const { datas, rowSelection } = this.props;
|
|
return (
|
|
<div className="wev-cube-table-inner-warp">
|
|
<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ofga8g`}
|
|
rowSelection={rowSelection}
|
|
columns={this.getColumns()}
|
|
dataSource={datas}
|
|
pagination={false}
|
|
draggable={true}
|
|
onDrop={this.onDropChange}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
} |