From 882d11341442d5128c9e314f76e48d4d829f31cc Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 27 十月 2023 17:15:47 +0800
Subject: [PATCH] 2023-10-27
---
src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss | 93 ++++++++++++++----
src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx | 99 +++++++++----------
src/tabviews/zshare/mutilform/mkPopSelect/index.scss | 3
src/menu/components/table/edit-table/columns/editColumn/index.jsx | 2
src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx | 29 +++++
src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 42 ++++++-
6 files changed, 187 insertions(+), 81 deletions(-)
diff --git a/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx b/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx
index da0ea0b..6ebce77 100644
--- a/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx
+++ b/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx
@@ -457,6 +457,35 @@
required: true
},
{
+ type: 'radio',
+ key: 'laypage',
+ label: '鍒嗛〉',
+ initVal: card.laypage || 'true',
+ required: false,
+ options: [{
+ value: 'true',
+ text: '鏄�'
+ }, {
+ value: 'false',
+ text: '鍚�'
+ }]
+ },
+ {
+ type: 'radio',
+ key: 'onload',
+ label: '鍒濆鍖�',
+ initVal: card.onload || 'true',
+ tooltip: '褰撴病鏈夎缃悳绱㈠瓧娈垫椂锛屽垵濮嬪寲鍔犺浇鏁版嵁銆�',
+ required: false,
+ options: [{
+ value: 'true',
+ text: '鍔犺浇'
+ }, {
+ value: 'false',
+ text: '涓嶅姞杞�'
+ }]
+ },
+ {
type: 'text',
key: 'valueField',
label: '鍊悸峰瓧娈�',
diff --git a/src/menu/components/table/edit-table/columns/editColumn/index.jsx b/src/menu/components/table/edit-table/columns/editColumn/index.jsx
index baca4f6..25e6c22 100644
--- a/src/menu/components/table/edit-table/columns/editColumn/index.jsx
+++ b/src/menu/components/table/edit-table/columns/editColumn/index.jsx
@@ -76,7 +76,7 @@
} else if (this.record.editType === 'date') {
_options.push('required', 'precision', 'enter', 'declareType')
} else if (this.record.editType === 'popSelect') {
- _options.push('required', 'enter', 'linkSubField', 'columns', 'dataSource', 'primaryKey', 'order', 'showField', 'controlField', 'searchKey', 'popWidth')
+ _options.push('required', 'enter', 'linkSubField', 'columns', 'dataSource', 'primaryKey', 'order', 'showField', 'controlField', 'searchKey', 'popWidth', 'laypage', 'onload')
} else if (this.record.editType === 'select') {
_options.push('required', 'enter', 'resourceType', 'linkSubField', 'dropdown')
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
index 0805ba9..cdf3368 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
@@ -371,8 +371,23 @@
}, 10)
}
- onPopChange = () => {
+ onPopChange = (values) => {
+ const { col, record } = this.props
+ this.setState({editing: false})
+
+ setTimeout(() => {
+ if (/\$next/.test(col.enter)) {
+ MKEmitter.emit('nextLine', col, record.$$uuid)
+ } else if (col.enter === '$sub') {
+ MKEmitter.emit('subLine', col, record)
+ } else if (col.enter !== '$noAct') {
+ let node = document.getElementById(col.enter + record.$$uuid)
+ node && node.click()
+ }
+ }, 50)
+
+ MKEmitter.emit('changeRecord', col.tableId, {...record, ...values})
}
render() {
@@ -455,7 +470,7 @@
let _value = record[col.field] !== undefined ? record[col.field] : ''
return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell">
- <MKPopSelect defaultValue={_value} config={col} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/>
+ <MKPopSelect mask={true} defaultValue={_value} config={col} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} blur={() => this.setState({editing: false})}/>
</td>)
} else {
let _value = record[col.field] !== undefined ? record[col.field] : ''
@@ -844,8 +859,21 @@
MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val})
}
- onPopChange = () => {
+ onPopChange = (values) => {
+ const { col, record } = this.props
+ setTimeout(() => {
+ if (/\$next/.test(col.enter)) {
+ MKEmitter.emit('nextLine', col, record.$$uuid)
+ } else if (col.enter === '$sub') {
+ MKEmitter.emit('subLine', col, record)
+ } else if (col.enter !== '$noAct') {
+ let node = document.getElementById(col.enter + record.$$uuid)
+ node && node.click()
+ }
+ }, 50)
+
+ MKEmitter.emit('changeRecord', col.tableId, {...record, ...values})
}
render() {
@@ -880,7 +908,7 @@
)
} else if (col.editType === 'popSelect') {
children = (
- <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/>
+ <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange}/>
)
} else {
children = (<>
@@ -2049,11 +2077,7 @@
})
if (err) {
- notification.warning({
- top: 92,
- message: err,
- duration: 5
- })
+ message.warning(err)
return null
}
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx
index ca6c4d0..651bc6f 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx
@@ -1,13 +1,11 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
-import { Select } from 'antd'
import { notification, Modal, Table, Input } from 'antd'
import moment from 'moment'
-import { TableOutlined } from '@ant-design/icons'
+import { TableOutlined, CloseCircleFilled } from '@ant-design/icons'
import Api from '@/api'
import Utils from '@/utils/utils.js'
-import MKEmitter from '@/utils/events.js'
import './index.scss'
const { Search } = Input
@@ -17,7 +15,7 @@
super(props)
let config = fromJS(props.config).toJS()
- let value = props.defaultValue || config.initval
+ let value = props.defaultValue
let arrfield = config.columns.map(f => f.field)
@@ -94,10 +92,10 @@
}
componentDidMount () {
- const { config } = this.state
+ const { mask } = this.props
- if (config.onload === 'true' && config.editType !== 'popSelect') {
- this.loadData()
+ if (mask) {
+ this.trigger()
}
}
@@ -243,46 +241,26 @@
selectChange = (val, record) => {
const { config } = this.state
- let other = {}
- if (config.subFields) {
- let option = record || null
+ let values = {[config.field]: val}
- if (!option) {
- option = this.state.options.filter(m => m.$$uuid === val)[0]
- }
-
- option && config.subFields.forEach((n, i) => {
- other[n.field] = option[n.field]
- setTimeout(() => {
- MKEmitter.emit('mkFC', 'input', n.uuid, option[n.field])
- }, i * 5)
+ if (config.linkSubField) {
+ config.linkSubField.forEach(m => {
+ values[m] = record[m] === undefined ? '' : record[m]
})
}
- this.props.onChange(val, other)
- this.setState({value: val}, () => {
- if (config.enter === 'tab') {
- MKEmitter.emit('mkFC', 'focus', config.tabUuid)
- } else if (config.enter === 'sub') {
- if (config.subFields) {
- setTimeout(() => {
- this.props.onSubmit()
- }, 1000)
- } else {
- this.props.onSubmit()
- }
- }
- })
+ this.props.onChange(values)
+ this.setState({value: val})
}
trigger = (e) => {
const { config, options } = this.state
- e.stopPropagation()
+ e && e.stopPropagation()
this.setState({visible: true}, () => {
- if (config.editType === 'popSelect' && options.length === 0) {
+ if (config.onload === 'true' && options.length === 0) {
this.loadData()
}
})
@@ -294,6 +272,23 @@
this.selectChange(record.$$uuid, record)
this.setState({visible: false})
+ }
+
+ clear = (e) => {
+ const { config } = this.state
+
+ e.stopPropagation()
+
+ let values = {[config.field]: ''}
+
+ if (config.linkSubField) {
+ config.linkSubField.forEach(m => {
+ values[m] = ''
+ })
+ }
+
+ this.props.onChange(values)
+ this.setState({value: ''})
}
changeTable = (pagination, filters, sorter) => {
@@ -316,25 +311,27 @@
})
}
+ cancel = () => {
+ const { mask } = this.props
+
+ this.setState({visible: false})
+
+ if (mask) {
+ this.props.blur()
+ }
+ }
+
render() {
+ const { mask } = this.props
const { value, config, options, visible, loading, total, pageIndex, pageSize, columns, placeholder } = this.state
return <>
- <Select
- className="mk-pop-select"
- showSearch={!!config.searchKey}
- allowClear
- value={value}
- onSearch={(val) => val && this.searchOption(val)}
- filterOption={false}
- onChange={(val) => this.selectChange(val === undefined ? '' : val)}
- disabled={config.readonly}
- suffixIcon={<TableOutlined onClick={this.trigger}/>}
- >
- {options.map(option =>
- <Select.Option disabled={option.$disabled} key={option.key} value={option.$$uuid}>{option.$label}</Select.Option>
- )}
- </Select>
+ {mask ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null}
+ <div className="mk-pop-select-wrap" onClick={this.trigger}>
+ {value}
+ {value && !mask ? <CloseCircleFilled onClick={this.clear} /> : null}
+ <TableOutlined onClick={this.trigger}/>
+ </div>
<Modal
wrapClassName='mk-pop-select-modal'
title={config.label}
@@ -344,7 +341,7 @@
maskClosable={false}
cancelText="鍏抽棴"
width={config.popWidth < 100 ? config.popWidth + 'vw' : config.popWidth}
- onCancel={() => this.setState({visible: false})}
+ onCancel={this.cancel}
destroyOnClose
>
{config.searchKey ? <Search placeholder={placeholder} onSearch={this.searchOption} enterButton /> : null}
diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss
index 9fb18d8..bc198f7 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss
@@ -1,26 +1,76 @@
-.mk-pop-select {
- .ant-select-selection__rendered {
- margin-right: 30px;
+.mk-pop-select-wrap {
+ position: relative;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0 30px 0 11px;
+ color: rgba(0, 0, 0, 0.65);
+ font-size: 14px;
+ font-variant: tabular-nums;
+ list-style: none;
+ font-feature-settings: 'tnum';
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ outline: 0;
+ border: 1px solid #d9d9d9;
+ border-top-width: 1.02px;
+ background: #ffffff;
+ user-select: none;
+ height: 32px;
+ cursor: pointer;
+ transition: all 0.3s;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ line-height: 30px;
+
+ .anticon-table {
+ padding: 7px;
+ color: rgba(0, 0, 0, 0.25);
+ transition: color 0.3s;
+ font-size: 14px;
+ position: absolute;
+ right: 0px;
+ top: 0px;
}
- .ant-select-selection__clear {
- right: 35px;
+ .anticon-close-circle {
+ color: rgba(0, 0, 0, 0.25);
+ transition: all 0.3s;
+ padding: 7px;
+ opacity: 0;
+ position: absolute;
+ right: 25px;
}
- .ant-select-arrow {
- transform: translate(8px, -9px);
- .ant-select-arrow-icon {
- padding: 7px;
- color: rgba(0, 0, 0, 0.25);
- transition: color 0.2s;
- font-size: 14px;
- svg {
- transition: none!important;
- transform: none!important;
- }
- }
- .ant-select-arrow-icon:hover {
- color: var(--mk-sys-color);
- }
+ .anticon-close-circle:hover {
+ color: rgba(0, 0, 0, 0.45);
}
+}
+.mk-pop-select-wrap:hover, .mk-pop-select-mask:hover + .mk-pop-select-wrap {
+ border-color: var(--mk-sys-color5);
+ box-shadow: 0 0 0 2px var(--mk-sys-color2);
+
+ .anticon-table {
+ color: var(--mk-sys-color);
+ }
+ .anticon-close-circle {
+ opacity: 1;
+ }
+}
+.mk-pop-select-mask {
+ position: absolute;
+ background: #ffffff;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ height: auto;
+ border: 1px solid #d9d9d9;
+ cursor: pointer;
+}
+.mk-pop-select-mask + .mk-pop-select-wrap {
+ border: none;
+ box-shadow: none!important;
+ padding-left: 0px;
}
.mk-pop-select-modal {
.ant-modal-body {
@@ -33,6 +83,9 @@
margin-bottom: 20px;
}
table {
+ td {
+ padding: 12px 16px;
+ }
tr:not(.ant-table-row-selected):hover > td {
background-color: var(--mk-sys-color1);
}
diff --git a/src/tabviews/zshare/mutilform/mkPopSelect/index.scss b/src/tabviews/zshare/mutilform/mkPopSelect/index.scss
index 9fb18d8..9663e3f 100644
--- a/src/tabviews/zshare/mutilform/mkPopSelect/index.scss
+++ b/src/tabviews/zshare/mutilform/mkPopSelect/index.scss
@@ -33,6 +33,9 @@
margin-bottom: 20px;
}
table {
+ td {
+ padding: 12px 16px;
+ }
tr:not(.ant-table-row-selected):hover > td {
background-color: var(--mk-sys-color1);
}
--
Gitblit v1.8.0