fix: 增加筛选标签显示

package.json

 {
   "name": "panda-xform",
-  "version": "4.2.1",
-  "description": "4.2.1 增加功能按钮",
+  "version": "4.2.2",
+  "description": "4.2.2 增加筛选标签显示",
   "keywords": [
     "panda-xform"
   ],
@@ -35,6 +35,7 @@
     "http-proxy-middleware": "^1.0.6",
     "moment": "^2.29.1",
     "qrcode.react": "^3.1.0",
+    "rc-tween-one": "^3.0.6",
     "react": "17.0.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -130,4 +131,4 @@
   "publishConfig": {
     "registry": "https://g.civnet.cn:4873"
   }
-}
\ No newline at end of file
+}

src/core/Account/components/SearchGroup/search.less

 .controlRow {
   width: 100%;
-  height: 100%;
+  height: 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/core/Account/components/TablePack/components/ResizeableTitle/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 const ResizeableTitle = (props) => {
 
   const { onResize, width, onClick, ...restProps } = props
-  const [resizing, setResizing] = useState(true)
+  const [resizing, setResizing] = useState(false)
   const [offset, setOffset] = useState(0)
 
   return (

src/core/Account/components/TablePack/index.js

 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 ResizeableTitle from './components/ResizeableTitle'
 import FileView from './components/FileView'
@@ -37,6 +39,18 @@ const TablePack = (props, ref) => {
   const [sortedInfo, setSortedInfo] = useState({})
   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 { widget, sourceType, options } = widgetInfo
     if (['CheckBox', 'ComboBox', 'RadioButton'].includes(widget)) {
@@ -142,14 +156,13 @@ const TablePack = (props, ref) => {
     let array = []
     showField.forEach((v, i) => {
       const { widget } = json?.[v] || {}
-      console.log('json', json, v)
       array.push({
         title: json[v]?.title || v,
         dataIndex: v,
         width: fieldResize[v] || 120,
         ellipsis: true,
         sorter: true,
-        sortOrder: sortedInfo.columnKey === v ? sortedInfo.order : null,
+        sortOrder: sortedInfo.field === v ? sortedInfo.order : null,
         filteredValue: filteredInfo[v] || null,
         ...getColumnSearchProps(json[v], v),
         onHeaderCell: (column) => ({
@@ -243,29 +256,93 @@ const TablePack = (props, ref) => {
 
   const onChange = (page, filters, sorter) => {
     setFilteredInfo(filters)
-    setSortedInfo({ order: sorter.order, columnKey: sorter.field })
+    console.log('sorter', sorter)
+    setSortedInfo(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 (
-    <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 className={styles.tablePack} style={{ paddingTop: filtered.length ? '30px' : '10px' }}>
+      {
+        filtered.length ? (
+          <div className={styles.condition}>
+            <TweenOneGroup
+              enter={{
+                scale: 0.8,
+                opacity: 0,
+                type: 'from',
+                duration: 200,
+              }}
+              onEnd={(e) => {
+                if (e.type === 'appear' || e.type === 'enter') {
+                  e.target.style = 'display: inline-block';
+                }
+              }}
+              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

+@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

@@ -12,91 +12,11 @@
       height: 100%;
       .top {
         width: 100%;
-        height: 50px;
+        height: 40px;
       }
       .bottom {
         width: 100%;
         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 {

src/core/widgets/text/Coding/index.js

@@ -4,47 +4,25 @@ import { QrcodeOutlined } from '@ant-design/icons'
 import QRcode from 'qrcode.react'
 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 { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
   const prefixCls = getPrefixCls('pandaXform')
-  const { value, onChange, schema } = props
-  const { disabled, prefixion, codingType } = 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 { value, onChange, addons, schema } = props
+  const { disabled, prefixion, codingType, presetValue } = schema
 
   const inputChange = (e) => {
     onChange(e.target.value)
   }
 
+  useEffect(() => {
+    if (addons) {
+      addons.setValueByPath(addons.dataPath, presetValue)
+    } else {
+      onChange(presetValue)
+    }
+  }, [])
+
   const content = (
     <div>
       <QRcode value={value} />