innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

增加数据关联示例

This commit is contained in:
yangchch6 2019-04-19 17:04:39 +08:00
parent 0e7231aa66 162dec5d37
commit 7b8bbefa3c
12 changed files with 10848 additions and 2310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
demo/TableDemo.scss
View File

@ -1,20 +1,20 @@
// @import "../node_modules/tinper-bee-core/scss/index.scss";
// @import "../node_modules/bee-panel/src/Panel.scss";
// @import "../node_modules/bee-layout/src/Layout.scss";
// @import "../node_modules/bee-button/src/Button.scss";
// @import "../node_modules/bee-transition/src/Transition.scss";
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
// @import "../node_modules/bee-form-control/src/FormControl.scss";
// @import "../node_modules/bee-pagination/src/Pagination.scss";
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
// @import "../node_modules/bee-select/src/Select.scss";
@import "../node_modules/tinper-bee-core/scss/index.scss";
@import "../node_modules/bee-panel/src/Panel.scss";
@import "../node_modules/bee-layout/src/Layout.scss";
@import "../node_modules/bee-button/src/Button.scss";
@import "../node_modules/bee-transition/src/Transition.scss";
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
@import "../node_modules/bee-form-control/src/FormControl.scss";
@import "../node_modules/bee-pagination/src/Pagination.scss";
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
@import "../node_modules/bee-select/src/Select.scss";
// @import "../node_modules/bee-form/src/Form.scss";
// @import "../node_modules/bee-popover/src/Popover.scss";
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
// @import "../node_modules/bee-message/build/Message.css";
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
// @import "../node_modules/bee-input-number/build/InputNumber.css";
// @import "../node_modules/bee-modal/build/Modal.css";
@import "../node_modules/bee-popover/src/Popover.scss";
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
@import "../node_modules/bee-message/build/Message.css";
@import "../node_modules/bee-dropdown/build/Dropdown.css";
@import "../node_modules/bee-input-number/build/InputNumber.css";
@import "../node_modules/bee-modal/build/Modal.css";
@import "../src/Table.scss";

144
demo/demolist/Demo03.js
View File

@ -76,99 +76,99 @@ const columns03 = [
const data03 = [
{
orderCode:"2343",
supplierName: "xxx",
type_name: "123",
purchasing:'内行',
purchasingGroup:"323",
voucherDate:"kkkk",
approvalState_name:"vvvv",
confirmState_name:"aaaa",
closeState_name:"vnnnnn",
orderCode:"NU0391025",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织c',
purchasingGroup:"aa",
voucherDate:"2018年03月18日",
approvalState_name:"已审批",
confirmState_name:"执行中",
closeState_name:"未关闭",
key: "1"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391026",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织a',
purchasingGroup:"bb",
voucherDate:"2018年02月05日",
approvalState_name:"已审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "2"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391027",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织b',
purchasingGroup:"aa",
voucherDate:"2018年07月01日",
approvalState_name:"已审批",
confirmState_name:"终止",
closeState_name:"已关闭",
key: "3"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391028",
supplierName: "xx供应商",
type_name: "4",
purchasing:'组织c',
purchasingGroup:"cc",
voucherDate:"2019年03月01日",
approvalState_name:"未审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "4"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391029",
supplierName: "xx供应商",
type_name: "5",
purchasing:'组织d',
purchasingGroup:"ss",
voucherDate:"2019年02月14日",
approvalState_name:"未审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "5"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391030",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织e',
purchasingGroup:"zz",
voucherDate:"2019年02月18日",
approvalState_name:"已审批",
confirmState_name:"终止",
closeState_name:"已关闭",
key: "6"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391031",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织f',
purchasingGroup:"qq",
voucherDate:"2019年01月01日",
approvalState_name:"已审批",
confirmState_name:"执行中",
closeState_name:"未关闭",
key: "7"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
orderCode:"NU0391032",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织g',
purchasingGroup:"pp",
voucherDate:"2019年01月31日",
approvalState_name:"未审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "8"
},
];

106
demo/demolist/Demo11.js
View File

@ -13,7 +13,7 @@ const columns = [
title: "序号",
dataIndex: "index",
key: "index",
width: 200,
width: 100,
render(text, record, index) {
return index + 1;
}
@ -22,7 +22,7 @@ const columns = [
title: "订单编号",
dataIndex: "orderCode",
key: "orderCode",
width: 200,
width: 300,
},
{
title: "供应商名称",
@ -46,13 +46,13 @@ const columns = [
title: "采购组",
dataIndex: "purchasingGroup",
key: "purchasingGroup",
width: 300
width: 200
},
{
title: "凭证日期",
dataIndex: "voucherDate",
key: "voucherDate",
width: 200,
width: 300,
},
{
title: "审批状态",
@ -70,65 +70,77 @@ const columns = [
title: "关闭状态",
dataIndex: "closeState_name",
key: "closeState_name",
width: 200
width: 100
}
];
const data = [
{
orderCode:"2343",
supplierName: "xxx",
type_name: "123",
purchasing:'内行',
purchasingGroup:"323",
voucherDate:"kkkk",
approvalState_name:"vvvv",
confirmState_name:"aaaa",
closeState_name:"vnnnnn",
key: "1"
orderCode:"NU0391025",
supplierName: "xx供应商",
type_name: "1",
purchasing:'组织c',
purchasingGroup:"aa",
voucherDate:"2018年03月18日",
approvalState_name:"已审批",
confirmState_name:"执行中",
closeState_name:"未关闭",
key: "1"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
key: "2"
orderCode:"NU0391026",
supplierName: "xx供应商",
type_name: "2",
purchasing:'组织a',
purchasingGroup:"bb",
voucherDate:"2018年02月05日",
approvalState_name:"已审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "2"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
key: "3"
orderCode:"NU0391027",
supplierName: "xx供应商",
type_name: "3",
purchasing:'组织b',
purchasingGroup:"aa",
voucherDate:"2018年07月01日",
approvalState_name:"已审批",
confirmState_name:"终止",
closeState_name:"已关闭",
key: "3"
},
{
orderCode:"222",
supplierName: "22xxx",
type_name: "1223",
purchasing:'内行2',
purchasingGroup:"3223",
voucherDate:"222kk",
approvalState_name:"22vvvv",
confirmState_name:"2aaaa",
closeState_name:"2vnnnnn",
key: "4"
orderCode:"NU0391028",
supplierName: "xx供应商",
type_name: "4",
purchasing:'组织c',
purchasingGroup:"cc",
voucherDate:"2019年03月01日",
approvalState_name:"未审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "4"
},
{
orderCode:"NU0391029",
supplierName: "xx供应商",
type_name: "5",
purchasing:'组织d',
purchasingGroup:"ss",
voucherDate:"2019年02月14日",
approvalState_name:"未审批",
confirmState_name:"待确认",
closeState_name:"未关闭",
key: "5"
}
];
class Demo11 extends Component {
render() {
return (
<Table columns={columns} data={data} scroll={{x:true}} />
<Table columns={columns} data={data} scroll={{ x:true }} />
);
}
}

102
demo/demolist/Demo33.js Normal file
View File

@ -0,0 +1,102 @@
/**
*
* @title 数据关联
* @parent 列渲染 Custom Render
* @description 数据行关联自定义菜单显示
*/
import React, { Component } from 'react';
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
import Table from '../../src';
import multiSelect from "../../src/lib/multiSelect";
import sort from "../../src/lib/sort";
const { Item } = Menu;
const data = [
{
num:"NU0391025",
name: "aa",
sex: "男",
dept:'财务二科',
rank:"T1",
year:"1",
seniority:"1",
key: "1"
},
{
num:"NU0391026",
name: "bb",
sex: "女",
dept:'财务一科',
rank:"M1",
year:"1",
seniority:"1",
key: "2"
},
{
num:"NU0391027",
name: "dd",
sex: "女",
dept:'财务一科',
rank:"T2",
year:"2",
seniority:"2",
key: "3"
}
];
const MultiSelectTable = multiSelect(Table, Checkbox);
const ComplexTable = sort(MultiSelectTable, Icon);
class Demo33 extends Component {
constructor(props) {
super(props);
}
getSelectedDataFunc = data => {
console.log(data);
}
onSelect = (item) => {
console.log(item);
}
render() {
const menu1 = (
<Menu
onSelect={this.onSelect}>
<Item key="1">模态弹出</Item>
<Item key="2">链接跳转</Item>
<Item key="3">打开新页</Item>
</Menu>);
let columns = [
{ title: "关联",dataIndex: "link",key: "link",width: 80,
render: (text, record, index) => {
return (
<Dropdown
trigger={['click']}
overlay={menu1}
animation="slide-up"
>
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
</Dropdown>
)
}
},
{ title: "员工编号",dataIndex: "num",key: "num",width: 200 },
{ title: "员工姓名",dataIndex: "name",key: "name", width: 200},
{ title: "员工性别",dataIndex: "sex",key: "sex",width: 200 },
{ title: "部门",dataIndex: "dept",key: "dept",width: 200},
{ title: "职级",dataIndex: "rank",key: "rank",width: 200},
{ title: "工龄",dataIndex: "year",key: "year",width: 200},
{ title: "司龄",dataIndex: "seniority",key: "seniority",width: 200}
];
return <ComplexTable
bordered
columns={columns}
data={data}
multiSelect={{type: "checkbox"}}
getSelectedDataFunc={this.getSelectedDataFunc}
/>
}
}
export default Demo33;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

8261
dist/demo.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

4496
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
src/Table.js
View File

@ -160,7 +160,7 @@ class Table extends Component {
if (this.columnManager.isAnyColumnsFixed()) {
this.syncFixedTableRowHeight();
this.resizeEvent = addEventListener(
window, 'resize', debounce(this.syncFixedTableRowHeight, 150)
window, 'resize', this.resize
);
}
@ -233,6 +233,10 @@ class Table extends Component {
}
}
resize(){
debounce(this.syncFixedTableRowHeight, 150);
this.computeTableWidth();
}
computeTableWidth() {
//如果用户传了scroll.x按用户传的为主

1
src/Table.scss
View File

@ -1,6 +1,5 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
@import "../node_modules/tinper-bee/assets/tinper-bee.css";
// @import "../node_modules/bee-loading/src/Loading";
$text-color: $font-color-base;

4
src/lib/multiSelect.js
View File

@ -67,7 +67,7 @@ export default function multiSelect(Table, Checkbox) {
let count = 0;
let disabledCount = 0;
data.forEach(da=>{
if(da._checked){
if(da._checked && !da._disabled){
count ++;
}
if(da._disabled){
@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
width: 50,
width: 60,
render: (text, record, index) => {
let attr = {};
record._disabled?attr.disabled = record._disabled:"";