From 6555f1f63a5389d49fbb98b5b2dca16a61239c64 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 27 十月 2023 09:49:39 +0800
Subject: [PATCH] 2023-10-27
---
src/tabviews/custom/components/table/base-table/index.scss | 2
src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss | 70 ++++++++
src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx | 386 ++++++++++++++++++++++++++++++++++++++++++++++++
src/tabviews/custom/components/table/normal-table/index.scss | 2
src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 19 ++
5 files changed, 477 insertions(+), 2 deletions(-)
diff --git a/src/tabviews/custom/components/table/base-table/index.scss b/src/tabviews/custom/components/table/base-table/index.scss
index 724b889..bc4f7bc 100644
--- a/src/tabviews/custom/components/table/base-table/index.scss
+++ b/src/tabviews/custom/components/table/base-table/index.scss
@@ -14,7 +14,7 @@
}
.main-table-box {
position: relative;
- min-height: 150px;
+ min-height: 40px;
.main-pickup {
position: absolute;
right: 5px;
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 bd322ed..0805ba9 100644
--- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx
@@ -15,6 +15,7 @@
const { Paragraph } = Typography
const MkIcon = asyncComponent(() => import('@/components/mk-icon'))
+const MKPopSelect = asyncComponent(() => import('./mkPopSelect'))
const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList'))
class CusSwitch extends Component {
@@ -370,6 +371,10 @@
}, 10)
}
+ onPopChange = () => {
+
+ }
+
render() {
let { col, config, record, style, className, ...resProps } = this.props
const { editing, value, err } = this.state
@@ -445,6 +450,12 @@
return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell">
<CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/>
+ </td>)
+ } else if (col.editType === 'popSelect') {
+ 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={() => {}}/>
</td>)
} else {
let _value = record[col.field] !== undefined ? record[col.field] : ''
@@ -833,6 +844,10 @@
MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val})
}
+ onPopChange = () => {
+
+ }
+
render() {
let { col, config, record, style, className, ...resProps } = this.props
const { err } = this.state
@@ -863,6 +878,10 @@
children = (
<CusDatePicker config={col} value={record[col.field] || null} onChange={this.onDateChange} blur={() => {}}/>
)
+ } else if (col.editType === 'popSelect') {
+ children = (
+ <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/>
+ )
} else {
children = (<>
<Select
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
new file mode 100644
index 0000000..ca6c4d0
--- /dev/null
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx
@@ -0,0 +1,386 @@
+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 Api from '@/api'
+import Utils from '@/utils/utils.js'
+import MKEmitter from '@/utils/events.js'
+import './index.scss'
+
+const { Search } = Input
+
+class MKPopSelect extends Component {
+ constructor(props) {
+ super(props)
+
+ let config = fromJS(props.config).toJS()
+ let value = props.defaultValue || config.initval
+
+ let arrfield = config.columns.map(f => f.field)
+
+ if (config.subFields && config.subFields.length > 0) {
+ config.subFields.forEach(n => {
+ if (!arrfield.includes(n.field)) {
+ arrfield.push(n.field)
+ }
+ })
+ }
+
+ if (sessionStorage.getItem('dataM') === 'true') { // 鏁版嵁鏉冮檺
+ config.dataSource = config.dataSource.replace(/\$@/ig, '/*').replace(/@\$/ig, '*/').replace(/@datam@/ig, '\'Y\'')
+ } else {
+ config.dataSource = config.dataSource.replace(/@\$|\$@/ig, '').replace(/@datam@/ig, '\'\'')
+ }
+
+ config.dataSource = config.dataSource.replace(/@LoginUID@/ig, `'${sessionStorage.getItem('LoginUID') || ''}'`)
+ config.dataSource = config.dataSource.replace(/@SessionUid@/ig, `'${localStorage.getItem('SessionUid') || ''}'`)
+ config.dataSource = config.dataSource.replace(/@UserID@/ig, `'${sessionStorage.getItem('UserID') || ''}'`)
+ config.dataSource = config.dataSource.replace(/@Appkey@/ig, `'${window.GLOB.appkey || ''}'`)
+
+ if (/\s/.test(config.dataSource)) { // 鎷兼帴鍒悕
+ config.dataSource = '(' + config.dataSource + ') tb'
+ }
+
+ let columns = []
+ let labels = {}
+ config.columns.forEach(col => {
+ labels[col.field] = col.label
+
+ if (col.Hide === 'true') return
+
+ columns.push({
+ dataIndex: col.field,
+ title: col.label,
+ sorter: col.IsSort === 'true',
+ width: col.Width || 120
+ })
+ })
+
+ let placeholder = ''
+ if (!config.searchKey) {
+ config.onload = 'true'
+ } else {
+ placeholder = []
+ config.searchKey.split(',').forEach(key => {
+ if (!labels[key]) {
+ placeholder = ''
+ } else if (placeholder) {
+ placeholder.push(labels[key])
+ }
+ })
+
+ placeholder = placeholder ? placeholder.join('銆�') : ''
+ }
+
+ this.state = {
+ config: config,
+ options: [],
+ columns,
+ value,
+ placeholder,
+ arr_field: arrfield.join(','),
+ searchKey: '',
+ pageIndex: 1,
+ pageSize: 10,
+ orderBy: '',
+ visible: false,
+ loading: false
+ }
+
+ this.timer = null
+ }
+
+ componentDidMount () {
+ const { config } = this.state
+
+ if (config.onload === 'true' && config.editType !== 'popSelect') {
+ this.loadData()
+ }
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ componentWillUnmount () {
+ this.setState = () => {
+ return
+ }
+ }
+
+ loadData () {
+ const { BID, ID } = this.props
+ const { config, pageIndex, pageSize, arr_field, searchKey, orderBy } = this.state
+
+ this.setState({
+ loading: true
+ })
+
+ let param = {
+ func: 'sPC_Get_TableData',
+ obj_name: 'data',
+ exec_type: 'y',
+ arr_field: arr_field,
+ default_sql: 'true',
+ custom_script: '',
+ menuname: config.label
+ }
+
+ let sql = ''
+ let DateCount = ''
+ let _search = ''
+ let _orderBy = orderBy || config.order || ''
+ let _datasource = config.dataSource
+
+ if (config.searchKey && searchKey) {
+ let fields = config.searchKey.split(',').map(field => field + ` like '%${searchKey}%'`)
+ _search = 'where ' + fields.join(' OR ')
+ }
+
+ _datasource = _datasource.replace(/@BID@/ig, `'${BID || ''}'`)
+ _datasource = _datasource.replace(/@ID@/ig, `'${ID || ''}'`)
+
+ if (config.laypage === 'true') {
+ sql = `/*system_query*/select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows `
+ DateCount = `/*system_query*/select count(1) as total from ${_datasource} ${_search}`
+ } else if (_orderBy) {
+ sql = `/*system_query*/select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable order by tmptable.rows `
+ } else {
+ sql = `/*system_query*/select ${arr_field} from ${_datasource} ${_search} `
+ }
+
+ let departmentcode = sessionStorage.getItem('departmentcode') || ''
+ let organization = sessionStorage.getItem('organization') || ''
+ let mk_user_type = sessionStorage.getItem('mk_user_type') || ''
+
+ sql = `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
+ Select @mk_departmentcode='${departmentcode}', @mk_organization='${organization}', @mk_user_type='${mk_user_type}'
+ ${sql}`
+
+ // 娴嬭瘯绯荤粺鎵撳嵃鏌ヨ璇彞
+ if (window.GLOB.debugger === true) {
+ console.info(`/*${config.label} 鏁版嵁婧�*/\n` + sql.replace(/\n\s{6}/ig, '\n'))
+ DateCount && console.info(`/*${config.label} 鎬绘暟鏌ヨ*/\n` + DateCount.replace(/\n\s{6}/ig, '\n'))
+ }
+
+ param.LText = Utils.formatOptions(sql)
+ param.DateCount = Utils.formatOptions(DateCount)
+
+ param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
+ param.secretkey = Utils.encrypt('', param.timestamp)
+
+ param.username = sessionStorage.getItem('User_Name') || ''
+ param.fullname = sessionStorage.getItem('Full_Name') || ''
+
+ Api.genericInterface(param).then(result => {
+ if (result.status) {
+ let options = result.data.map((item, index) => {
+ item.key = index
+ item.$$uuid = item[config.primaryKey] || ''
+ item.$label = item[config.showField]
+
+ if (config.controlField && item[config.controlField] === 'true') {
+ item.$disabled = true
+ }
+
+ return item
+ })
+
+ this.setState({
+ options: options,
+ total: result.total || 0,
+ loading: false
+ })
+
+ if (result.message) {
+ if (result.ErrCode === 'Y') {
+ Modal.success({
+ title: result.message
+ })
+ } else if (result.ErrCode === 'S') {
+ notification.success({
+ top: 92,
+ message: result.message,
+ duration: 2
+ })
+ }
+ }
+ } else {
+ this.setState({
+ loading: false
+ })
+
+ if (!result.message) return
+ if (result.ErrCode === 'N') {
+ Modal.error({
+ title: result.message,
+ })
+ } else if (result.ErrCode !== '-2') {
+ notification.error({
+ top: 92,
+ message: result.message,
+ duration: 10
+ })
+ }
+ }
+ })
+ }
+
+ searchOption = (val) => {
+ this.setState({searchKey: val})
+
+ if (this.timer) {
+ clearTimeout(this.timer)
+ }
+
+ this.timer = setTimeout(() => {
+ this.loadData()
+ }, 500)
+ }
+
+ selectChange = (val, record) => {
+ const { config } = this.state
+ let other = {}
+
+ if (config.subFields) {
+ let option = record || null
+
+ 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)
+ })
+ }
+
+ 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()
+ }
+ }
+ })
+ }
+
+ trigger = (e) => {
+ const { config, options } = this.state
+
+ e.stopPropagation()
+
+ this.setState({visible: true}, () => {
+ if (config.editType === 'popSelect' && options.length === 0) {
+ this.loadData()
+ }
+ })
+ }
+
+ changeRow = (record) => {
+
+ if (record.$disabled) return
+
+ this.selectChange(record.$$uuid, record)
+ this.setState({visible: false})
+ }
+
+ changeTable = (pagination, filters, sorter) => {
+ let orderBy = ''
+
+ if (sorter.field && sorter.order) {
+ if (sorter.order === 'ascend') {
+ orderBy = `${sorter.field} asc`
+ } else {
+ orderBy = `${sorter.field} desc`
+ }
+ }
+
+ this.setState({
+ pageIndex: pagination.current,
+ pageSize: pagination.pageSize,
+ orderBy: orderBy,
+ }, () => {
+ this.loadData()
+ })
+ }
+
+ render() {
+ 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>
+ <Modal
+ wrapClassName='mk-pop-select-modal'
+ title={config.label}
+ visible={visible}
+ closable={true}
+ centered={true}
+ maskClosable={false}
+ cancelText="鍏抽棴"
+ width={config.popWidth < 100 ? config.popWidth + 'vw' : config.popWidth}
+ onCancel={() => this.setState({visible: false})}
+ destroyOnClose
+ >
+ {config.searchKey ? <Search placeholder={placeholder} onSearch={this.searchOption} enterButton /> : null}
+ <Table
+ rowKey="$$uuid"
+ bordered={true}
+ rowSelection={null}
+ columns={columns}
+ dataSource={options}
+ loading={loading}
+ onRow={(record) => {
+ let className = ''
+
+ if (record.$disabled) {
+ className = ' mk-disable-line '
+ } else if (value === record.$$uuid) {
+ className = ' ant-table-row-selected '
+ }
+
+ return {
+ className: className,
+ onClick: () => {this.changeRow(record)},
+ }
+ }}
+ onChange={this.changeTable}
+ pagination={config.laypage === 'true' ? {
+ current: pageIndex,
+ pageSize: pageSize,
+ showSizeChanger: true,
+ total: total || 0,
+ showTotal: (total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉
+ } : false}
+ />
+ </Modal>
+ </>
+ }
+}
+
+export default MKPopSelect
\ No newline at end of file
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
new file mode 100644
index 0000000..9fb18d8
--- /dev/null
+++ b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss
@@ -0,0 +1,70 @@
+.mk-pop-select {
+ .ant-select-selection__rendered {
+ margin-right: 30px;
+ }
+ .ant-select-selection__clear {
+ right: 35px;
+ }
+ .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);
+ }
+ }
+}
+.mk-pop-select-modal {
+ .ant-modal-body {
+ min-height: 200px;
+ max-height: calc(100vh - 210px);
+ overflow-y: auto;
+
+ .ant-input-search {
+ max-width: 300px;
+ margin-bottom: 20px;
+ }
+ table {
+ tr:not(.ant-table-row-selected):hover > td {
+ background-color: var(--mk-sys-color1);
+ }
+ tr.ant-table-row-selected td {
+ background-color: var(--mk-sys-color3);
+ }
+ tr:not(.mk-disable-line) {
+ cursor: pointer;
+ }
+ .mk-disable-line {
+ color: rgba(0, 0, 0, 0.35);
+ }
+ }
+ }
+ .ant-modal-body::-webkit-scrollbar {
+ width: 7px;
+ }
+ .ant-modal-body::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
+ background: rgba(0, 0, 0, 0.13);
+ }
+ .ant-modal-body::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ border: 1px solid rgba(0, 0, 0, 0.07);
+ background: rgba(0, 0, 0, 0);
+ }
+
+ .ant-modal-footer {
+ .ant-btn-primary {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/tabviews/custom/components/table/normal-table/index.scss b/src/tabviews/custom/components/table/normal-table/index.scss
index 5a2828b..5f5f0da 100644
--- a/src/tabviews/custom/components/table/normal-table/index.scss
+++ b/src/tabviews/custom/components/table/normal-table/index.scss
@@ -14,7 +14,7 @@
}
.main-table-box {
position: relative;
- min-height: 150px;
+ min-height: 40px;
.main-pickup {
position: absolute;
right: 5px;
--
Gitblit v1.8.0