0.1.21 • Published 10 months ago
ysxs-dynamic-table v0.1.21
动态表格
## 启动: npm run dev
## 本地打包: npm run build
## 发布到私服: npm run pub
## 在宿主项目中，引用该npm包的项目，本地联调时：
## 1.在验证项目的目录下 执行 cd node_modules/react && npm link
## 2.在模块包项目目录下执行 npm link react
## 以上两步为：npm包中的react依赖于，宿主项目nodeModules中的react，本地引用就不会报错引入不同react版本的问题了
## 3.npm包项目本地 npm run build，打包之后生成了dist文件夹,这时可以在宿主 npm link ysxs-dynamic-table,
## 4.npm包本地启动: npm run dev，启动之后 本地编译的文件是在demo文件夹中验证的,比如给npm传参都可以在demo/demo.js中 操作
## 5.在src/components中新建组件的文件夹,在src/index.js中导出, 宿主项目安装引用时就可以引入对应的组件,比如:
## import YsxsDynamicTable from'ysxs-dynamic-table'
## 6.如果需要做成组件库，产出多个组件,需要在src/index.js中导出对应的多个组件
## 解除关联引用可以使用 npm unlink ysxs-dynamic-table
## 解除全局link npm unlink
## 引用时需传入指定参数如下：
## 动态节点: searchOptions=> 默认搜索节点, operationButtons=> 表格外上方的按钮, tableColumns=> 表格中默认展示列的节点
## 关于operator的:
EQ 等于
LT 小于
GT 大于
LTE 小于等于
GTE 大于等于
IN 存在于
LIKE 全模糊
LEFT_LIKE 左模糊
RIGHT_LIKE 右模糊
## 关于 组件类型componentType:
INPUT: 'INPUT',
SELECT_SINGLE: 'SELECT_SINGLE',
SELECT_MULTI: 'SELECT_MULTI',
DATEPICKER: 'DATEPICKER',
DATE_PICKER_TIME: 'DATE_PICKER_TIME',
DATE_PICKER_RANGE: 'DATE_PICKER_RANGE',
DATE_PICKER_TIME_RANGE: 'DATE_PICKER_TIME_RANGE',
TEXTAREA: 'TEXTAREA',
INPUT_NUMBER: 'INPUT_NUMBER',
INPUT_NUMBER_RANGE: 'INPUT_NUMBER_RANGE'
const dynamicNodes = {
searchOptions: [
{
operator: "IN",
key: 'name',
fieldKey: 'name',
fieldName: '姓名',
searchType: 'LABEL',
componentType: 'SELECT_MULTI',
boxValue: [
{ value: 'zhangsan', label: '张三' },
{ value: 'lisi', label: '李四' },
],
render: () => {
return (
<Select
showSearch
allowClear
mode="multiple"
placeholder="请选择姓名"
style={{ width: '80%' }}
onChange={(e) => handleChangeSearch(e, 'name')}
>
{
[
{ value: 'zhangsan', label: '张三' },
{ value: 'lisi', label: '李四' },
].map(item => {
return (
<Option key={item.value} value={item.value}>{item.label}</Option>
)
})
}
</Select>
)
}
},
{
operator: "EQ",
key: 'mobile',
fieldKey: 'mobile',
fieldName: '联系方式',
searchType: 'ATTR',
componentType: 'SELECT_SINGLE',
boxValue: [
{ value: '14698707567', label: '14698707567' },
{ value: '18898980909', label: '18898980909' },
],
},
{
operator: "EQ",
key: 'id_card',
fieldKey: 'id_card',
fieldName: '身份证号',
componentType: 'INPUT'
}
],
operationButtons: [
{
btn: (
<Button type="primary" onClick={handleClick}>
新建
</Button>
),
key: "add",
},
{
btn: (
<Space>
<Dropdown
overlay={workMenu}
disabled={selectedRowKeys.length === 0}
key={1}
>
<Button>
更多操作 <DownOutlined/>
</Button>
</Dropdown>
</Space>
),
key: "moreOperation",
},
],
tableColumns: [
{
isLeft: true,
title: "姓名",
dataIndex: "name",
render: (text, record) => {
return <a onClick={() => handleClickTd(record, 'name')}>{text}</a>;
},
},
{
isLeft: true,
title: "id",
dataIndex: "id",
render: (text, record) => {
return <a onClick={() => handleClickTd(record, 'id')}>{text}</a>;
},
},
{
isLeft: true,
title: "联系方式",
dataIndex: "mobile",
render: (text, record) => {
return <>
<a onClick={() => handleClickTd(record, 'mobile')}>{text}</a>
{
text &&
<MessageOutlined style={{ marginLeft: 5 }} />
}
</>;
},
},
{
isLeft: true,
title: "年龄",
dataIndex: "age",
render: (text, record) => {
return <a onClick={() => handleClickTd(record, 'age')}>{text}</a>;
},
},
{
isLeft: false,
position: 'right',
title: "操作",
dataIndex: "option",
width: 150,
fixed: "right",
onCell: () => {
return {
onClick: (event) => {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
};
},
render: (text, record) => {
return <a onClick={() => handleEdit(record)}>编辑</a>;
},
},
],
};
## 默认搜索节点的key, 与searchOptions中的key保持一致
const defaultSearchOption = ["name", "mobile", "id_card"];
## 默认列的key,正常情况下 与 tableColumns中的非操作的节点的key保持一直，导出时以这个数组中的key为准
const defaultColumnOption = ['name', 'id', 'mobile', 'age'];
## 修改动态展示列时，禁止修改哪些列
const defaultDisabledColumns = ['姓名', '身份证号', '联系方式', '创建人', '创建时间', '标签', '职业', 'id'];
## 请求需要的参数
const apiParams = {
displayKey: 'wenhua_displayKey_test',
modelKey: 'tb_resident',
tenantId: 'GOV',
queryKey: 'wenhua_queryKey_test'
}
## 接口地址
const apiUrl = {
// 查询已设置的展示字段
DISPLAY_QUERY: '/dataStore/dynamicTable/api/display/query',
// 查询全部可展示字段
DISPLAY_QUERY_ALL: '/dataStore/dynamicTable/api/display/queryAll',
// 修改自定义展示属性
DISPLAY_SAVE: '/dataStore/dynamicTable/api/display/save',
// 查询 table数据 => 必传
QUERY_DATA: '/dataStore/dynamicTable/api/data/query',
// 查询已设置的搜索字段
QUERY_QUERY: '/dataStore/dynamicTable/api/query/query',
// 查询全部可搜索字段
QUERY_QUERY_ALL: '/dataStore/dynamicTable/api/query/queryAll',
// 修改自定义搜索属性
QUERY_SAVE: '/dataStore/dynamicTable/api/query/save',
// 导出 => 必传
DATA_EXPORT: '/dataStore/dynamicTable/api/data/export',
}
## 表格内选中，全选 or 单选
const handleGetSelectedRowKeys = (selectedRowKeys, dataItem) => {
console.log(selectedRowKeys, dataItem);
setSelectedRowKeys(selectedRowKeys);
};
## 表格外的全选 checkAll
const handleGetCheckAll = (checkAll, dataSource) => {
console.log(checkAll, dataSource);
setCheckAll(checkAll);
};
## 获取已有查询条件，全部查询条件
const handleChangeSearchOptions = (data) => {
console.log(data)
}
## 获取查询过table列表数据的查询条件的值
const handleChangeSearchOptionsValues = (data) => {
console.log(data)
}
## dynamicNodes 中的render方法 如果是动态的可修改的，那么dynamicNodes 也需要是动态可修改, 便于子组件检测到外部组件传入的参数有变动
/**
* dynamicNodes 中的render方法 如果是动态的可修改的，那么dynamicNodes 也需要是动态可修改, 便于子组件检测到外部组件传入的参数有变动
*/
// render方法的列表渲染的列表数据 如有改变，需要修改dynamicNodes
const [dynamicNodesResult, setDynamicNodes] = useState({...dynamicNodes})
useEffect(() => {
const { searchOptions } = dynamicNodesResult;
const searchOptionsCopy = JSON.parse(JSON.stringify(searchOptions));
searchOptionsCopy[0] = {
operator: "LIKE",
key: 'name',
fieldKey: 'name',
fieldName: '姓名',
searchType: 'LABEL',
componentType: 'INPUT',
boxValue: [
{ value: 'zhangsan', label: '张三' },
{ value: 'lisi', label: '李四' },
],
render: () => {
return (
<Select
showSearch
allowClear
mode="multiple"
placeholder="请选择姓名"
style={{ width: '80%' }}
onChange={(e) => handleChangeSearch(e, 'name')}
>
{
nameList.map(item => {
return (
<Option key={item.value} value={item.value}>{item.label}</Option>
)
})
}
</Select>
)
}
}
setDynamicNodes({
...dynamicNodesResult,
searchOptions: [...searchOptionsCopy],
nameListLen: nameList.length
})
}, [nameList])0.1.21
10 months ago