Skip to content

X
xform
Commit 5999ce04 authored by 田翔's avatar 田翔
Browse files
Options

fix: 增加筛选标签显示

parent f8c00cd1
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 141 deletions
package.json
View file @ 5999ce04
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "4.2.1", "version": "4.2.2",
"description": "4.2.1 增加功能按钮", "description": "4.2.2 增加筛选标签显示",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
"http-proxy-middleware": "^1.0.6", "http-proxy-middleware": "^1.0.6",
"moment": "^2.29.1", "moment": "^2.29.1",
"qrcode.react": "^3.1.0", "qrcode.react": "^3.1.0",
"rc-tween-one": "^3.0.6",
"react": "17.0.2", "react": "17.0.2",
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1", "react-dnd-html5-backend": "^16.0.1",
...@@ -130,4 +131,4 @@ ...@@ -130,4 +131,4 @@
"publishConfig": { "publishConfig": {
"registry": "https://g.civnet.cn:4873" "registry": "https://g.civnet.cn:4873"
} }
} }
\ No newline at end of file
src/core/Account/components/SearchGroup/search.less
View file @ 5999ce04
.controlRow { .controlRow {
width: 100%; width: 100%;
height: 100%; height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
......
src/core/Account/components/TablePack/components/ResizeableTitle/index.js
View file @ 5999ce04
...@@ -6,7 +6,7 @@ import classnames from 'classnames' ...@@ -6,7 +6,7 @@ import classnames from 'classnames'
const ResizeableTitle = (props) => { const ResizeableTitle = (props) => {
const { onResize, width, onClick, ...restProps } = props const { onResize, width, onClick, ...restProps } = props
const [resizing, setResizing] = useState(true) const [resizing, setResizing] = useState(false)
const [offset, setOffset] = useState(0) const [offset, setOffset] = useState(0)
return ( return (
......
src/core/Account/components/TablePack/index.js
View file @ 5999ce04
import React, { useMemo, useState, useRef, forwardRef, useImperativeHandle } from 'react' import React, { useMemo, useState, useRef, forwardRef, useImperativeHandle } from 'react'
import { Table, Tooltip, Button, Popconfirm, Input, Space, useTable } from 'antd' import { Table, Tooltip, Button, Popconfirm, Input, Space, Tag } from 'antd'
import { TweenOneGroup } from 'rc-tween-one'
import styles from './index.less'
import { SearchOutlined } from '@ant-design/icons' import { SearchOutlined } from '@ant-design/icons'
import ResizeableTitle from './components/ResizeableTitle' import ResizeableTitle from './components/ResizeableTitle'
import FileView from './components/FileView' import FileView from './components/FileView'
...@@ -37,6 +39,18 @@ const TablePack = (props, ref) => { ...@@ -37,6 +39,18 @@ const TablePack = (props, ref) => {
const [sortedInfo, setSortedInfo] = useState({}) const [sortedInfo, setSortedInfo] = useState({})
const inputRef = useRef() const inputRef = useRef()
const filtered = useMemo(() => {
let array = []
if (isObject(filteredInfo)) {
Object.keys(filteredInfo).forEach(v => {
if (Array.isArray(filteredInfo[v])) {
array.push({ filterName: v, filterValue: filteredInfo[v].join(',') })
}
})
}
return array
}, [filteredInfo])
const getColumnSearchProps = (widgetInfo, dataIndex) => { const getColumnSearchProps = (widgetInfo, dataIndex) => {
const { widget, sourceType, options } = widgetInfo const { widget, sourceType, options } = widgetInfo
if (['CheckBox', 'ComboBox', 'RadioButton'].includes(widget)) { if (['CheckBox', 'ComboBox', 'RadioButton'].includes(widget)) {
...@@ -142,14 +156,13 @@ const TablePack = (props, ref) => { ...@@ -142,14 +156,13 @@ const TablePack = (props, ref) => {
let array = [] let array = []
showField.forEach((v, i) => { showField.forEach((v, i) => {
const { widget } = json?.[v] || {} const { widget } = json?.[v] || {}
console.log('json', json, v)
array.push({ array.push({
title: json[v]?.title || v, title: json[v]?.title || v,
dataIndex: v, dataIndex: v,
width: fieldResize[v] || 120, width: fieldResize[v] || 120,
ellipsis: true, ellipsis: true,
sorter: true, sorter: true,
sortOrder: sortedInfo.columnKey === v ? sortedInfo.order : null, sortOrder: sortedInfo.field === v ? sortedInfo.order : null,
filteredValue: filteredInfo[v] || null, filteredValue: filteredInfo[v] || null,
...getColumnSearchProps(json[v], v), ...getColumnSearchProps(json[v], v),
onHeaderCell: (column) => ({ onHeaderCell: (column) => ({
...@@ -243,29 +256,93 @@ const TablePack = (props, ref) => { ...@@ -243,29 +256,93 @@ const TablePack = (props, ref) => {
const onChange = (page, filters, sorter) => { const onChange = (page, filters, sorter) => {
setFilteredInfo(filters) setFilteredInfo(filters)
setSortedInfo({ order: sorter.order, columnKey: sorter.field }) console.log('sorter', sorter)
setSortedInfo(sorter)
tableChange(page, filters, sorter) tableChange(page, filters, sorter)
} }
const closeTag = (e, { filterName, filterValue }) => {
e.preventDefault()
let filtered = {}
for (let key in filteredInfo) {
if (key === filterName) {
filtered[key] = null
} else {
filtered[key] = filteredInfo[key]
}
}
setFilteredInfo(filtered)
tableChange({}, filtered, sortedInfo)
}
return ( return (
<Table <div className={styles.tablePack} style={{ paddingTop: filtered.length ? '30px' : '10px' }}>
size='small' {
rowKey='ID' filtered.length ? (
bordered <div className={styles.condition}>
loading={loading} <TweenOneGroup
columns={columns} enter={{
dataSource={dataSource} scale: 0.8,
rowSelection={rowSelection} opacity: 0,
onRow={onRow} type: 'from',
pagination={false} duration: 200,
scroll={{ x: '100%', y: 'calc(100% - 40px)' }} }}
onChange={onChange} onEnd={(e) => {
components={{ if (e.type === 'appear' || e.type === 'enter') {
header: { e.target.style = 'display: inline-block';
cell: ResizeableTitle }
} }}
}} leave={{
/> opacity: 0,
width: 0,
scale: 0,
duration: 200,
}}
appear={false}
>
{
filtered.map(v => {
return (
<span
key={v.filterName}
style={{ display: 'inline-block' }}
>
<Tag
color='volcano'
closable
onClose={(e) => closeTag(e, v)}
>
<span>{v.filterName}</span>
<span style={{ padding: '0 3px' }}>:</span>
<span>{v.filterValue}</span>
</Tag>
</span>
)
})
}
</TweenOneGroup>
</div>
) : null
}
<Table
size='small'
rowKey='ID'
bordered
loading={loading}
columns={columns}
dataSource={dataSource}
rowSelection={rowSelection}
onRow={onRow}
pagination={false}
scroll={{ x: '100%', y: 'calc(100% - 40px)' }}
onChange={onChange}
components={{
header: {
cell: ResizeableTitle
}
}}
/>
</div>
) )
} }
......
src/core/Account/components/TablePack/index.less 0 → 100644
View file @ 5999ce04
@import '~antd/es/style/themes/default.less';
.tablePack {
width: 100%;
height: 100%;
position: relative;
transition: all 0.5s ease;
.condition {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
display: flex;
align-items: center;
}
.@{ant-prefix}-table-wrapper {
height: 100%;
.@{ant-prefix}-spin-nested-loading {
height: 100%;
}
.@{ant-prefix}-spin-container {
height: 100%;
}
.@{ant-prefix}-table {
height: 100%;
.@{ant-prefix}-table-container {
height: 100%;
}
}
}
.@{ant-prefix}-table.@{ant-prefix}-table-bordered>.@{ant-prefix}-table-container {
border-left: 1px solid #dbe7fb;
.ant-table-header>table {
border-top: 1px solid #dbe7fb;
}
}
.@{ant-prefix}-table-thead>tr {
height: 40px;
th {
overflow: inherit;
user-select: none;
/* Chrome and Opera */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
border-right: 1px solid #dbe7fb!important;
border-bottom: 1px solid #dbe7fb;
background: white;
}
th:last-child {
border-left: 1px solid #dbe7fb;
}
}
.@{ant-prefix}-table-tbody>tr {
&:nth-child(2n-1) {
td {
background: #f6f9fe;
}
}
td {
border-bottom: 1px solid #dbe7fb;
border-right: 1px solid #dbe7fb!important;
&:last-child {
border-left: 1px solid #dbe7fb;
}
}
&:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) {
td {
background: rgb(237, 242, 255)!important;
}
}
}
.@{ant-prefix}-table-body {
overflow-x: scroll;
&::-webkit-scrollbar {
width: 0;
height: 12px;
}
&::-webkit-scrollbar {
width: 0;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: rgb(41, 166, 255);
}
&::-webkit-scrollbar-track {
background: #f7f4f5;
padding: 0 3px;
}
}
}
\ No newline at end of file
src/core/Account/index.less
View file @ 5999ce04
...@@ -12,91 +12,11 @@ ...@@ -12,91 +12,11 @@
height: 100%; height: 100%;
.top { .top {
width: 100%; width: 100%;
height: 50px; height: 40px;
} }
.bottom { .bottom {
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
.@{ant-prefix}-table-wrapper {
height: 100%;
.@{ant-prefix}-spin-nested-loading {
height: 100%;
}
.@{ant-prefix}-spin-container {
height: 100%;
}
.@{ant-prefix}-table {
height: 100%;
.@{ant-prefix}-table-container {
height: 100%;
}
}
}
.ant-table.ant-table-bordered>.ant-table-container {
border-left: 1px solid #dbe7fb;
.ant-table-header>table {
border-top: 1px solid #dbe7fb;
}
}
.@{ant-prefix}-table-thead>tr {
height: 40px;
th {
overflow: inherit;
user-select: none;
/* Chrome and Opera */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
border-right: 1px solid #dbe7fb!important;
border-bottom: 1px solid #dbe7fb;
background: white;
}
th:last-child {
border-left: 1px solid #dbe7fb;
}
}
.ant-table-tbody>tr {
&:nth-child(2n-1) {
td {
background: #f6f9fe;
}
}
td {
border-bottom: 1px solid #dbe7fb;
border-right: 1px solid #dbe7fb!important;
&:last-child {
border-left: 1px solid #dbe7fb;
}
}
&:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) {
td {
background: rgb(237, 242, 255)!important;
}
}
}
.@{ant-prefix}-table-body {
overflow-x: scroll;
&::-webkit-scrollbar {
width: 0;
height: 12px;
}
&::-webkit-scrollbar {
width: 0;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: rgb(41, 166, 255);
}
&::-webkit-scrollbar-track {
background: #f7f4f5;
padding: 0 3px;
}
}
} }
} }
.footer { .footer {
......
src/core/widgets/text/Coding/index.js
View file @ 5999ce04
...@@ -4,47 +4,25 @@ import { QrcodeOutlined } from '@ant-design/icons' ...@@ -4,47 +4,25 @@ import { QrcodeOutlined } from '@ant-design/icons'
import QRcode from 'qrcode.react' import QRcode from 'qrcode.react'
import styles from './index.less' import styles from './index.less'
function toUtf8(str) {
let out = ''
for (let i = 0; i < str.length; i++) {
let c = str.charCodeAt(i)
if (c >= 0x0001 && c <= 0x007f) {
out += str.charAt(i);
} else if (c > 0x07ff) {
out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
} else {
out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
}
}
return out;
}
const Coding = (props) => { const Coding = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext) const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
const prefixCls = getPrefixCls('pandaXform') const prefixCls = getPrefixCls('pandaXform')
const { value, onChange, schema } = props const { value, onChange, addons, schema } = props
const { disabled, prefixion, codingType } = schema const { disabled, prefixion, codingType, presetValue } = schema
// useEffect(() => {
// let date = ''
// if (codingType === '1') {
// date = moment().format('YYYY')
// } else if (codingType === '2') {
// date = moment().format('YYYYMM')
// }
// let code = toUtf8(tableNameParent)
// let codeValue = `${prefixion ? `${prefixion}-` : ''}${date ? `${date}-` : date}${code}`
// onChange(codeValue)
// }, [prefixion, codingType])
const inputChange = (e) => { const inputChange = (e) => {
onChange(e.target.value) onChange(e.target.value)
} }
useEffect(() => {
if (addons) {
addons.setValueByPath(addons.dataPath, presetValue)
} else {
onChange(presetValue)
}
}, [])
const content = ( const content = (
<div> <div>
<QRcode value={value} /> <QRcode value={value} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment