| | |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { notification, Spin} from 'antd' |
| | | import { notification, Spin, Col, Row, Icon, Tabs} from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | |
| | | import Utils from '@/utils/utils.js' |
| | | import options from '@/store/options.js' |
| | | |
| | | import SubTable from '@/tabviews/zshare/normalTable' |
| | | import SubAction from '@/tabviews/zshare/actionList' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | import SubSearch from '@/tabviews/zshare/topSearch' |
| | | import NotFount from '@/components/404' |
| | | |
| | | import './index.scss' |
| | | |
| | | const { TabPane } = Tabs |
| | | const SubAction = asyncComponent(() => import('@/tabviews/zshare/actionList')) |
| | | const SubTable = asyncSpinComponent(() => import('@/tabviews/zshare/normalTable')) |
| | | const CardComponent = asyncSpinComponent(() => import('@/tabviews/zshare/cardcomponent')) |
| | | const ChartComponent = asyncSpinComponent(() => import('@/tabviews/zshare/chartcomponent')) |
| | | |
| | | class SubTabModalTable extends Component { |
| | | static propTpyes = { |
| | | menuType: PropTypes.any, // 菜单类型,普通菜单或HS |
| | | ID: PropTypes.string, // 上级数据ID |
| | | BID: PropTypes.string, // 上上级数据ID |
| | | BData: PropTypes.any, // 上上级数据 |
| | | type: PropTypes.any, // 类型,calendar需特殊处理 |
| | | Tab: PropTypes.any, // 日历标签信息 |
| | | BID: PropTypes.string, // 上级数据ID |
| | | BData: PropTypes.any, // 上级数据 |
| | | MenuID: PropTypes.string, // 菜单Id |
| | | mainSearch: PropTypes.any, // 主表搜索条件 |
| | | SupMenuID: PropTypes.string, // 上级菜单Id |
| | | ContainerId: PropTypes.any, // 三级菜单Container(html) ID |
| | | refreshSupView: PropTypes.any // 刷新上级菜单 |
| | | refreshSupView: PropTypes.any, // 刷新上级菜单 |
| | | closeModalView: PropTypes.any // 关闭模态框 |
| | | } |
| | | |
| | | state = { |
| | |
| | | loadingview: true, // 页面加载中 |
| | | viewlost: false, // 页面丢失:1、未获取到配置-页面丢失;2、页面未启用 |
| | | lostmsg: '', // 页面丢失时的提示信息 |
| | | config: {}, // 页面配置信息,包括按钮、搜索、显示列、标签等 |
| | | config: null, // 页面配置信息,包括按钮、搜索、显示列、标签等 |
| | | searchlist: null, // 搜索条件 |
| | | actions: null, // 按钮集 |
| | | columns: null, // 显示列 |
| | |
| | | arr_field: '', // 使用 sPC_Get_TableData 时的查询字段集 |
| | | setting: null, // 页面全局设置:数据源、按钮及显示列固定、主键等 |
| | | data: null, // 列表数据集 |
| | | selectedData: [], // 已选表格数据 |
| | | resetTable: false, // 表格重置,值在true与false之间切换,切换时表格重置 |
| | | total: 0, // 总数 |
| | | loading: false, // 列表数据加载中 |
| | | pageIndex: 1, // 页码 |
| | | pageSize: 10, // 每页数据条数 |
| | | orderBy: '', // 排序 |
| | | search: '', // 搜索条件数组,使用时需分场景处理 |
| | | configMap: {} // 页面配置信息:下拉、按钮等 |
| | | triggerBtn: null, // 按钮触发 |
| | | chartId: '' // 展开图表ID |
| | | } |
| | | |
| | | /** |
| | | * @description 获取页面配置信息 |
| | | */ |
| | | async loadconfig () { |
| | | const { permAction } = this.props |
| | | const { permAction, type } = this.props |
| | | |
| | | let param = { |
| | | func: 'sPC_Get_LongParam', |
| | | MenuID: this.props.MenuID |
| | | } |
| | | let result = await Api.getSystemCacheConfig(param) |
| | | let result = await Api.getCacheConfig(param) |
| | | if (result.status) { |
| | | let config = '' |
| | | |
| | |
| | | let _hideCol = [] // 隐藏及合并列中字段的uuid集 |
| | | let colMap = new Map() |
| | | |
| | | // 旧版本兼容 |
| | | if (!config.version || config.version < '1.0') { |
| | | // 兼容图表 |
| | | if (!config.charts) { |
| | | config.expand = true |
| | | config.charts = [{ uuid: Utils.getuuid(), label: '', title: '', chartType: 'table', icon: 'table', Hide: 'false', blacklist: [] }] |
| | | } else { |
| | | config.charts.forEach(card => { |
| | | if (card.chartType === 'card') { |
| | | card.details = card.details.map(_cell => { |
| | | _cell.fontSize = _cell.fontSize || 14 |
| | | if (!_cell.width) { |
| | | _cell.width = 100 |
| | | } else if (_cell.width === 'helf') { |
| | | _cell.width = 50 |
| | | } else if (_cell.width === 'third') { |
| | | _cell.width = 33 |
| | | } |
| | | if (!_cell.fontWeight && _cell.bold === 'true') { |
| | | _cell.fontWeight = 'normal' |
| | | } |
| | | _cell.height = _cell.height || 1 |
| | | |
| | | return _cell |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | // 仅支持exec、prompt、pop 三种类型按钮 |
| | | config.action = config.action.filter(item => ['exec', 'prompt', 'pop'].includes(item.OpenType)) |
| | | if (type === 'calendar') { |
| | | config.action = config.action.filter(item => ['exec', 'prompt', 'pop', 'tab', 'excelIn', 'excelOut'].includes(item.OpenType)) |
| | | } else { |
| | | config.action = config.action.filter(item => ['exec', 'prompt', 'pop'].includes(item.OpenType)) |
| | | } |
| | | |
| | | // 权限过滤 |
| | | if (this.props.menuType !== 'HS') { |
| | | config.action = config.action.filter(item => permAction[item.uuid]) |
| | | |
| | | // 字段权限黑名单 |
| | | config.search = config.search.filter(item => { |
| | | if (!item.blacklist || item.blacklist.length === 0) return true |
| | | |
| | | let _black = item.blacklist.filter(v => { |
| | | return this.props.permRoles.indexOf(v) !== -1 |
| | | }) |
| | | |
| | | if (_black.length > 0) { |
| | | return false |
| | | } else { |
| | | return true |
| | | } |
| | | }) |
| | | |
| | | config.columns = config.columns.filter(col => { |
| | | if (!col.field || !col.blacklist || col.blacklist.length === 0 || config.setting.primaryKey === col.field) return true |
| | | |
| | | let _black = col.blacklist.filter(v => { |
| | | return this.props.permRoles.indexOf(v) !== -1 |
| | | }) |
| | | |
| | | if (_black.length > 0) { |
| | | return false |
| | | } else { |
| | | return true |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 字段权限黑名单 |
| | | config.search = config.search.filter(item => { |
| | | item.oriInitval = item.initval |
| | | if (!item.blacklist || item.blacklist.length === 0) return item |
| | | |
| | | let _black = item.blacklist.filter(v => { |
| | | return this.props.permRoles.indexOf(v) !== -1 |
| | | }) |
| | | |
| | | if (_black.length > 0) { |
| | | item.Hide = 'true' |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | |
| | | config.columns = config.columns.filter(col => { |
| | | if (!col.field || !col.blacklist || col.blacklist.length === 0 || config.setting.primaryKey === col.field) return col |
| | | |
| | | let _black = col.blacklist.filter(v => { |
| | | return this.props.permRoles.indexOf(v) !== -1 |
| | | }) |
| | | |
| | | if (_black.length > 0) { |
| | | col.Hide = 'true' |
| | | } |
| | | |
| | | return col |
| | | }) |
| | | |
| | | // 视图权限 |
| | | config.charts = config.charts.filter(item => { |
| | | if (item.Hide === 'true') return false |
| | | if (!item.blacklist || item.blacklist.length === 0) return true |
| | | |
| | | let _black = item.blacklist.filter(v => { |
| | | return this.props.permRoles.indexOf(v) !== -1 |
| | | }) |
| | | |
| | | if (_black.length > 0 || item.Hide === 'true') { |
| | | return false |
| | | } else { |
| | | return true |
| | | } |
| | | }) |
| | | |
| | | if (config.charts.length <= 1) { |
| | | config.expand = true |
| | | } |
| | | |
| | | let chartId = config.charts[0] ? config.charts[0].uuid : '' |
| | | |
| | | // 1、筛选字段集,2、过滤隐藏列及合并列中的字段uuid |
| | | config.columns.forEach(col => { |
| | | if (col.field) { |
| | | _arrField.push(col.field) |
| | | |
| | | _logcolumns.push(col) |
| | | |
| | | col.nameField && _arrField.push(col.nameField) // 链接名字段 |
| | | } |
| | | if (col.type === 'colspan' && col.sublist) { // 筛选隐藏列 |
| | | _hideCol = _hideCol.concat(col.sublist) |
| | |
| | | // 生成显示列,处理合并列中的字段 |
| | | config.columns.forEach(col => { |
| | | if (_hideCol.includes(col.uuid)) return |
| | | |
| | | if (col.linkThdMenu) { |
| | | col.linkThdMenu = '' |
| | | } |
| | | |
| | | if (col.type === 'colspan' && col.sublist) { |
| | | let _col = JSON.parse(JSON.stringify(col)) |
| | |
| | | }) |
| | | |
| | | if (config.gridBtn && config.gridBtn.display && _operations.length > 0) { |
| | | _columns.push({ |
| | | ...config.gridBtn, |
| | | operations: _operations |
| | | }) |
| | | config.gridBtn.operations = _operations |
| | | _columns.push(config.gridBtn) |
| | | } |
| | | |
| | | let valid = true // 搜索条件必填验证 |
| | |
| | | } |
| | | }) |
| | | |
| | | config.setting.tabType = 'subtab' |
| | | |
| | | this.setState({ |
| | | loadingview: false, |
| | | chartId: chartId, |
| | | config: config, |
| | | setting: config.setting, |
| | | searchlist: config.search, |
| | |
| | | arr_field: _arrField.join(','), |
| | | search: Utils.initMainSearch(config.search) // 搜索条件初始化(含有时间格式,需要转化) |
| | | }, () => { |
| | | this.improveSearch() |
| | | |
| | | if (config.setting.onload !== 'false' && valid) { // 初始化可加载 |
| | | this.loadmaindata() |
| | | } |
| | |
| | | notification.warning({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | duration: 5 |
| | | }) |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 搜索条件下拉选项预加载 |
| | | */ |
| | | improveSearch = () => { |
| | | let searchlist = JSON.parse(JSON.stringify(this.state.searchlist)) |
| | | let deffers = [] |
| | | searchlist.forEach(item => { |
| | | if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return |
| | | if (item.setAll === 'true') { |
| | | item.options.unshift({ |
| | | key: Utils.getuuid(), |
| | | Value: '', |
| | | Text: this.state.dict['main.all'] |
| | | }) |
| | | } |
| | | |
| | | if (item.resourceType === '1' && item.dataSource) { |
| | | let _option = Utils.getSelectQueryOptions(item) |
| | | let _sql = Utils.formatOptions(_option.sql) |
| | | let isSSO = item.database === 'sso' |
| | | |
| | | let param = { |
| | | func: 'sPC_Get_SelectedList', |
| | | LText: _sql, |
| | | obj_name: 'data', |
| | | arr_field: _option.field |
| | | } |
| | | |
| | | if (this.props.BID) { |
| | | param.BID = this.props.BID |
| | | } |
| | | |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | |
| | | let defer = new Promise(resolve => { |
| | | Api.getSystemCacheConfig(param, isSSO).then(res => { |
| | | res.search = item |
| | | resolve(res) |
| | | }) |
| | | }) |
| | | deffers.push(defer) |
| | | } else if (item.resourceType === '1' && !item.dataSource) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: item.label + ': ' + this.state.dict['main.datasource.settingerror'], |
| | | duration: 10 |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | this.setState({searchlist: JSON.parse(JSON.stringify(searchlist))}) |
| | | |
| | | if (deffers.length === 0) return |
| | | |
| | | Promise.all(deffers).then(result => { |
| | | result.forEach(res => { |
| | | if (res.status) { |
| | | searchlist = searchlist.map(item => { |
| | | if (item.uuid === res.search.uuid) { |
| | | res.data.forEach(cell => { |
| | | item.options.push({ |
| | | key: Utils.getuuid(), |
| | | Value: cell[res.search.valueField], |
| | | Text: cell[res.search.valueText] |
| | | }) |
| | | }) |
| | | } |
| | | return item |
| | | }) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.search.label + ':' + res.message, |
| | | duration: 10 |
| | | }) |
| | | } |
| | | }) |
| | | this.setState({searchlist}) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | const { setting, search } = this.state |
| | | let param = '' |
| | | |
| | | let requireFields = search.filter(item => item.required && !item.value) |
| | | let requireFields = search.filter(item => item.required && (!item.value || item.value.length === 0)) |
| | | |
| | | if (requireFields.length > 0) { |
| | | let labels = requireFields.map(item => item.label) |
| | | labels = Array.from(new Set(labels)) |
| | | |
| | | notification.warning({ |
| | | top: 92, |
| | | message: this.state.dict['form.required.input'] + requireFields.map(item => item.label).join('、') + ' !', |
| | | message: this.state.dict['form.required.input'] + labels.join('、') + ' !', |
| | | duration: 3 |
| | | }) |
| | | return |
| | |
| | | param = this.getCustomParam() |
| | | } else { |
| | | param = this.getDefaultParam() |
| | | } |
| | | |
| | | // 数据管理权限 |
| | | if (this.props.dataManager) { |
| | | param.dataM = 'Y' |
| | | } |
| | | |
| | | let result = await Api.genericInterface(param) |
| | |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 15 |
| | | duration: 10 |
| | | }) |
| | | } |
| | | } |
| | |
| | | * @description 获取用户自定义存储过程传参 |
| | | */ |
| | | getCustomParam = () => { |
| | | const { mainSearch } = this.props |
| | | const { pageIndex, pageSize, orderBy, search, setting } = this.state |
| | | |
| | | let _search = Utils.formatCustomMainSearch(search) |
| | | let searches = search |
| | | if (mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | searches = [...mainSearch, ...search] |
| | | } |
| | | |
| | | let _search = Utils.formatCustomMainSearch(searches) |
| | | |
| | | let param = { |
| | | PageIndex: pageIndex, |
| | | PageSize: pageSize, |
| | | OrderCol: orderBy || setting.order, |
| | | ..._search |
| | | } |
| | | |
| | | if (setting.laypage !== 'false') { |
| | | param.PageIndex = pageIndex |
| | | param.PageSize = pageSize |
| | | } |
| | | |
| | | if (setting.interType === 'inner') { |
| | |
| | | param.rduri = setting.interface |
| | | } |
| | | } else { |
| | | if (setting.sysInterface === 'true') { |
| | | param.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi |
| | | } else { |
| | | if (setting.sysInterface === 'true' && window.GLOB.mainSystemApi) { |
| | | param.rduri = window.GLOB.mainSystemApi |
| | | } else if (setting.sysInterface !== 'true') { |
| | | param.rduri = setting.interface |
| | | } |
| | | } |
| | | |
| | | param.appkey = window.GLOB.appkey || '' // 调用外部接口增加appkey |
| | | |
| | | if (setting.outerFunc) { |
| | | param.func = setting.outerFunc |
| | |
| | | * @description 获取系统存储过程 sPC_Get_TableData 的参数 |
| | | */ |
| | | getDefaultParam = () => { |
| | | const { mainSearch } = this.props |
| | | const { arr_field, pageIndex, pageSize, orderBy, search, setting } = this.state |
| | | |
| | | let _search = Utils.joinMainSearchkey(search) |
| | | let searches = search |
| | | if (mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | searches = [...mainSearch, ...search] |
| | | } |
| | | |
| | | let _search = Utils.joinMainSearchkey(searches) |
| | | _search = _search ? 'where ' + _search : '' |
| | | |
| | | let param = { |
| | |
| | | obj_name: 'data', |
| | | arr_field: arr_field, |
| | | BID: this.props.BID, |
| | | appkey: window.GLOB.appkey || '' |
| | | custom_script: setting.customScript || '', |
| | | default_sql: setting.default || 'true' |
| | | } |
| | | |
| | | let _orderBy = orderBy || setting.order |
| | |
| | | _dataresource = '(' + _dataresource + ') tb' |
| | | } |
| | | |
| | | if (setting.queryType === 'statistics') { // 统计数据源,内容替换 |
| | | let fieldmap = new Map() |
| | | let options = search.map(item => { |
| | | let _field = item.key |
| | | if (this.props.dataManager) { // 数据权限 |
| | | _dataresource = _dataresource.replace(/\$@/ig, '/*') |
| | | _dataresource = _dataresource.replace(/@\$/ig, '*/') |
| | | param.custom_script = param.custom_script.replace(/\$@/ig, '/*') |
| | | param.custom_script = param.custom_script.replace(/@\$/ig, '*/') |
| | | } else { |
| | | _dataresource = _dataresource.replace(/@\$|\$@/ig, '') |
| | | param.custom_script = param.custom_script.replace(/@\$|\$@/ig, '') |
| | | } |
| | | |
| | | if (fieldmap.has(_field)) { |
| | | _field = _field + '1' |
| | | } |
| | | let regoptions = null |
| | | if (setting.queryType === 'statistics' || param.custom_script) { |
| | | let allSearch = Utils.getAllSearchOptions(searches) |
| | | |
| | | fieldmap.set(item.key, true) |
| | | |
| | | regoptions = allSearch.map(item => { |
| | | return { |
| | | reg: new RegExp('@' + _field, 'ig'), |
| | | value: item.value |
| | | reg: new RegExp('@' + item.key + '@', 'ig'), |
| | | value: `'${item.value}'` |
| | | } |
| | | }) |
| | | } |
| | | |
| | | options.reverse() |
| | | |
| | | options.forEach(item => { |
| | | _dataresource = _dataresource.replace(item.reg, `'${item.value}'`) |
| | | if (setting.queryType === 'statistics' && setting.default !== 'false') { // 统计数据源,内容替换 |
| | | regoptions.forEach(item => { |
| | | _dataresource = _dataresource.replace(item.reg, item.value) |
| | | }) |
| | | |
| | | _search = '' |
| | | } |
| | | |
| | | let LText = `select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows` |
| | | let DateCount = `select count(1) as total from ${_dataresource} ${_search}` |
| | | let LText = '' |
| | | let DateCount = '' |
| | | |
| | | if (setting.default !== 'false' && setting.laypage !== 'false') { |
| | | LText = ` select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows ` |
| | | DateCount = `select count(1) as total from ${_dataresource} ${_search}` |
| | | } else if (setting.default !== 'false') { |
| | | LText = ` select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable order by tmptable.rows ` |
| | | DateCount = '' |
| | | } |
| | | |
| | | if (param.custom_script) { |
| | | regoptions.push({ |
| | | reg: new RegExp('@orderBy@', 'ig'), |
| | | value: _orderBy |
| | | }) |
| | | if (setting.laypage !== 'false') { |
| | | regoptions.push({ |
| | | reg: new RegExp('@pageSize@', 'ig'), |
| | | value: pageSize |
| | | }, { |
| | | reg: new RegExp('@pageIndex@', 'ig'), |
| | | value: pageIndex |
| | | }) |
| | | } |
| | | |
| | | regoptions.forEach(item => { |
| | | param.custom_script = param.custom_script.replace(item.reg, item.value) |
| | | }) |
| | | |
| | | if (LText) { |
| | | LText += ` |
| | | aaa: |
| | | if @ErrorCode!='' |
| | | insert into tmp_err_retmsg (ID, ErrorCode, retmsg, CreateUserID) select @time_id@,@ErrorCode, @retmsg,@UserID@ |
| | | ` |
| | | } else { |
| | | param.custom_script += ` |
| | | aaa: |
| | | if @ErrorCode!='' |
| | | insert into tmp_err_retmsg (ID, ErrorCode, retmsg, CreateUserID) select @time_id@,@ErrorCode, @retmsg,@UserID@ |
| | | ` |
| | | } |
| | | } |
| | | |
| | | // 测试系统打印查询语句 |
| | | if ((options.sysType === 'local' && !window.GLOB.systemType) || window.debugger === true) { |
| | | param.custom_script && console.log(`${LText ? '' : '/*不执行默认sql*/\n'}${param.custom_script}`) |
| | | LText && console.log(LText) |
| | | } |
| | | |
| | | param.custom_script = Utils.formatOptions(param.custom_script) |
| | | param.LText = Utils.formatOptions(LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | param.DateCount = Utils.formatOptions(DateCount) |
| | | |
| | | if (this.props.menuType === 'HS') { // 云端数据验证 |
| | | param.open_key = Utils.encrypt(param.secretkey, param.timestamp, true) |
| | | } |
| | | |
| | | return param |
| | | } |
| | |
| | | * 含有初始不加载的页面,修改设置 |
| | | */ |
| | | refreshbysearch = (searches) => { |
| | | this.refs.subTable.resetTable() |
| | | |
| | | this.setState({ |
| | | pageIndex: 1, |
| | | search: searches |
| | | search: searches, |
| | | selectedData: [], |
| | | resetTable: !this.state.resetTable |
| | | }, () => { |
| | | this.loadmaindata() |
| | | }) |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | selectedData: [], |
| | | pageIndex: pagination.current, |
| | | pageSize: pagination.pageSize, |
| | | orderBy: (sorter.field && sorter.order) ? `${sorter.field} ${sorter.order}` : '' |
| | |
| | | * @description 表格刷新 |
| | | */ |
| | | reloadtable = () => { |
| | | this.refs.subTable.resetTable() |
| | | this.setState({ |
| | | pageIndex: 1 |
| | | pageIndex: 1, |
| | | selectedData: [], |
| | | resetTable: !this.state.resetTable |
| | | }, () => { |
| | | this.loadmaindata() |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 表格选择项切换 |
| | | */ |
| | | changeSelectedData = (selectedData) => { |
| | | this.setState({selectedData}) |
| | | } |
| | | |
| | | /** |
| | | * @description 页面刷新,重新获取配置 |
| | | */ |
| | | reloadview = () => { |
| | | this.setState({ |
| | | loadingview: true, |
| | | viewlost: false, |
| | | lostmsg: '', |
| | | config: {}, |
| | | searchlist: null, |
| | | actions: null, |
| | | columns: null, |
| | | arr_field: '', |
| | | setting: null, |
| | | data: null, |
| | | total: 0, |
| | | loading: false, |
| | | pageIndex: 1, |
| | | pageSize: 10, |
| | | orderBy: '', |
| | | search: '', |
| | | configMap: {} |
| | | this.setState({ loadingview: true, viewlost: false, lostmsg: '', config: null, searchlist: null, actions: null, columns: null, |
| | | arr_field: '', setting: null, data: null, total: 0, loading: false, pageIndex: 1, pageSize: 10, orderBy: '', search: '', |
| | | triggerBtn: null |
| | | }, () => { |
| | | this.loadconfig() |
| | | }) |
| | |
| | | /** |
| | | * @description 按钮操作完成后(成功或失败),页面刷新,重置页码及选择项 |
| | | */ |
| | | refreshbyaction = (btn, type) => { |
| | | if (btn.execSuccess === 'grid' && type === 'success') { |
| | | refreshbyaction = (position) => { |
| | | if (position === 'grid' || position === 'maingrid') { |
| | | this.reloadtable() |
| | | } else if (btn.execError === 'grid' && type === 'error') { |
| | | this.reloadview() |
| | | } else if (btn.execSuccess === 'view' && type === 'success') { |
| | | this.reloadtable() |
| | | } else if (btn.execError === 'view' && type === 'error') { |
| | | this.reloadview() |
| | | } else if (type === 'excelOut') { |
| | | this.handleDefaultExcelout(btn) |
| | | } |
| | | if (type === 'success') { |
| | | this.props.refreshSupView() |
| | | } else if (position === 'view') { |
| | | this.reloadview() |
| | | this.props.refreshSupView() |
| | | } else if (position === 'trigger') { // 日历子表触发标签点击事件 |
| | | this.props.closeModalView && this.props.closeModalView() |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 使用默认存储过程 sPC_Get_TableData 导出excel表格 |
| | | */ |
| | | handleDefaultExcelout = (btn) => { |
| | | const { MenuName } = this.props |
| | | const { arr_field, orderBy, search, setting, config } = this.state |
| | | |
| | | let _arr_labels = [] // 列名称集 |
| | | let _arr_label_field = [] // 列名称字段集 |
| | | |
| | | config.columns.forEach(col => { |
| | | if (col.field) { |
| | | _arr_labels.push(col.label) |
| | | _arr_label_field.push(`${col.field} as ${col.label}`) |
| | | } |
| | | }) |
| | | |
| | | _arr_labels = _arr_labels.join(',') |
| | | _arr_label_field = _arr_label_field.join(',') |
| | | |
| | | let _search = Utils.joinMainSearchkey(search) |
| | | _search = _search ? 'where (' + _search + ')' : '' |
| | | // 获取列表数据 |
| | | let param = { |
| | | func: 'sPC_Get_TableData', |
| | | obj_name: 'data', |
| | | arr_field: _arr_labels, |
| | | BID: this.props.BID, |
| | | appkey: window.GLOB.appkey || '' |
| | | } |
| | | |
| | | let _orderBy = orderBy || setting.order |
| | | let _dataresource = setting.dataresource |
| | | |
| | | if (/\s/.test(_dataresource)) { |
| | | _dataresource = '(' + _dataresource + ') tb' |
| | | } |
| | | |
| | | let LText = `select ${_arr_label_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_dataresource} ${_search}) tmptable order by tmptable.rows` |
| | | |
| | | param.LText = Utils.formatOptions(LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | param.DateCount = '' |
| | | |
| | | let name = `${MenuName}${moment().format('YYYYMMDDHHmmss')}.xlsx` |
| | | |
| | | Api.getExcelOut(param, name).then(res => { |
| | | if (res && res.status === false) { |
| | | this.refs.subtabButton.execError(res, btn) |
| | | } else { |
| | | this.refs.subtabButton.execSuccess(btn) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 获取表格选择项 |
| | | */ |
| | | gettableselected = () => { |
| | | let data = [] |
| | | this.refs.subTable.state.selectedRowKeys.forEach(item => { |
| | | data.push(this.refs.subTable.props.data[item]) |
| | | }) |
| | | return data |
| | | } |
| | | |
| | | /** |
| | | * @description 表格中,按钮触发事件传递 |
| | | */ |
| | | buttonTrigger = (btn, record) => { |
| | | this.refs.subtabButton.actionTrigger(btn, record) |
| | | this.setState({ |
| | | triggerBtn: { |
| | | uuid: new Date().getTime(), |
| | | parentId: this.props.SupMenuID, |
| | | button: btn, |
| | | data: record |
| | | } |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 导出Excel时,获取页面搜索排序等参数 |
| | | */ |
| | | getexceloutparam = () => { |
| | | const { Tab, mainSearch } = this.props |
| | | const { arr_field, orderBy, search, setting} = this.state |
| | | |
| | | let searches = search |
| | | if (mainSearch && mainSearch.length > 0) { // 主表搜索条件 |
| | | searches = [...mainSearch, ...search] |
| | | } |
| | | |
| | | return { |
| | | arr_field: arr_field, |
| | | orderBy: orderBy || setting.order, |
| | | search: searches, |
| | | menuName: Tab.label |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 图表视图切换 |
| | | */ |
| | | changeChart = (uuid) => { |
| | | this.setState({chartId: uuid}) |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { setting, searchlist, actions, columns, loadingview, viewlost } = this.state |
| | | const { config, setting, searchlist, pageSize, actions, columns, loadingview, viewlost, triggerBtn, chartId, selectedData } = this.state |
| | | |
| | | return ( |
| | | <div className="subtabtable" id={'subtabtable' + this.props.MenuID}> |
| | | {loadingview && <Spin size="large" />} |
| | | {loadingview && <Spin />} |
| | | {searchlist && searchlist.length > 0 ? |
| | | <SubSearch |
| | | refreshdata={this.refreshbysearch} |
| | | searchlist={searchlist} |
| | | BID={this.props.BID} |
| | | dict={this.state.dict} |
| | | searchlist={searchlist} |
| | | menuType={this.props.menuType} |
| | | dataManager={this.props.dataManager} |
| | | refreshdata={this.refreshbysearch} |
| | | /> : null |
| | | } |
| | | {actions ? |
| | | <div style={{minHeight: '25px'}}> |
| | | <SubAction |
| | | ref="subtabButton" |
| | | type="subtab" |
| | | menuType={this.props.menuType} |
| | | setting={setting} |
| | | actions={actions} |
| | | BID={this.props.BID} |
| | | dict={this.state.dict} |
| | | BData={this.props.BData} |
| | | MenuID={this.props.SupMenuID} |
| | | permRoles={this.props.permRoles} |
| | | refreshdata={this.refreshbyaction} |
| | | ContainerId={this.props.ContainerId} |
| | | gettableselected={this.gettableselected} |
| | | /> |
| | | </div> : null |
| | | } |
| | | {columns && |
| | | <SubTable |
| | | ref="subTable" |
| | | tableId="" |
| | | dict={this.state.dict} |
| | | MenuID={this.props.MenuID} |
| | | setting={setting} |
| | | columns={columns} |
| | | data={this.state.data} |
| | | total={this.state.total} |
| | | loading={this.state.loading} |
| | | logcolumns={this.state.logcolumns} |
| | | refreshdata={this.refreshbytable} |
| | | buttonTrigger={this.buttonTrigger} |
| | | handleTableId={() => {}} |
| | | /> |
| | | } |
| | | {config ? <Row className="chart-view" gutter={16}> |
| | | {/* 视图组 */} |
| | | {!config.expand ? <Tabs activeKey={chartId} onChange={this.changeChart}> |
| | | {config.charts.map(item => ( |
| | | <TabPane tab={<Icon type={item.icon} />} key={item.uuid}></TabPane> |
| | | ))} |
| | | </Tabs> : null} |
| | | {config.charts.map(item => { |
| | | if (!config.expand && chartId !== item.uuid) return null |
| | | |
| | | if (item.chartType === 'table') { |
| | | return ( |
| | | <Col span={item.width || 24} key={item.uuid}> |
| | | {config.charts.length > 1 ? <p className="chart-table chart-title">{item.title}</p> : null} |
| | | <div style={{minHeight: '25px'}}> |
| | | <SubAction |
| | | triggerBtn={triggerBtn} |
| | | setting={setting} |
| | | actions={actions} |
| | | BID={this.props.BID} |
| | | dict={this.state.dict} |
| | | BData={this.props.BData} |
| | | selectedData={selectedData} |
| | | MenuID={this.props.SupMenuID} |
| | | logcolumns={this.state.logcolumns} |
| | | operations={config.gridBtn.operations || []} |
| | | refreshdata={this.refreshbyaction} |
| | | getexceloutparam={this.getexceloutparam} |
| | | /> |
| | | </div> |
| | | <SubTable |
| | | tableId="" |
| | | config={config} |
| | | setting={setting} |
| | | columns={columns} |
| | | pageSize={pageSize} |
| | | data={this.state.data} |
| | | dict={this.state.dict} |
| | | total={this.state.total} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | | refreshdata={this.refreshbytable} |
| | | buttonTrigger={this.buttonTrigger} |
| | | resetTable={this.state.resetTable} |
| | | chgSelectData={this.changeSelectedData} |
| | | handleTableId={() => {}} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else if (item.chartType === 'card') { |
| | | return ( |
| | | <Col span={item.width} key={item.uuid}> |
| | | <CardComponent |
| | | tableId="" |
| | | plot={item} |
| | | config={config} |
| | | BID={this.props.BID} |
| | | BData={this.props.BData} |
| | | data={this.state.data} |
| | | loading={this.state.loading} |
| | | logcolumns={this.state.logcolumns} |
| | | buttonTrigger={this.buttonTrigger} |
| | | refreshdata={this.refreshbyaction} |
| | | handleTableId={() => {}} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } else { |
| | | return ( |
| | | <Col span={item.width} key={item.uuid}> |
| | | <ChartComponent |
| | | plot={item} |
| | | config={config} |
| | | data={this.state.data} |
| | | loading={this.state.loading} |
| | | /> |
| | | </Col> |
| | | ) |
| | | } |
| | | })} |
| | | </Row> : null } |
| | | {viewlost ? <NotFount msg={this.state.lostmsg} /> : null} |
| | | </div> |
| | | ) |
| | |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | menuType: state.editLevel, |
| | | permAction: state.permAction, |
| | | permRoles: state.permRoles |
| | | permRoles: state.permRoles, |
| | | dataManager: state.dataManager, |
| | | memberLevel: state.memberLevel |
| | | } |
| | | } |
| | | |