~jinfei/pc-plat.git

New file
			@@ -0,0 +1,383 @@
			import React, {Component} from 'react'
			import { is, fromJS } from 'immutable'
			import { notification, Modal, Table, Input } from 'antd'
			import moment from 'moment'
			import { TableOutlined, CloseCircleFilled } from '@ant-design/icons'

			import Api from '@/api'
			import Utils from '@/utils/utils.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

			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 { mask } = this.props

			if (mask) {
			this.trigger()
			}
			}

			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 values = {[config.field]: val}

			if (config.linkSubField) {
			config.linkSubField.forEach(m => {
			values[m] = record[m] === undefined ? '' : record[m]
			})
			}

			this.props.onChange(values)
			this.setState({value: val})
			}

			trigger = (e) => {
			const { config, options } = this.state

			e && e.stopPropagation()

			this.setState({visible: true}, () => {
			if (config.onload === 'true' && options.length === 0) {
			this.loadData()
			}
			})
			}

			changeRow = (record) => {

			if (record.$disabled) return

			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) => {
			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()
			})
			}

			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 <>
			{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}
			visible={visible}
			closable={true}
			centered={true}
			maskClosable={false}
			cancelText="关闭"
			width={config.popWidth < 100 ? config.popWidth + 'vw' : config.popWidth}
			onCancel={this.cancel}
			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