diff --git a/components/DataView/_selfColumn.js b/components/DataView/_selfColumn.js new file mode 100644 index 0000000000000000000000000000000000000000..587380ac4c16eee8894bcc25ffc0288686b02f80 --- /dev/null +++ b/components/DataView/_selfColumn.js @@ -0,0 +1,365 @@ +/* eslint-disable */ +import styles from './index.less'; +import { contractCategory } from '@/utils/enumNo2'; +import { FEE_APPLY_TYPE_LIST, CONTRACT_ARCHIVE_STATUS, PROJECT_TYPE } from '@/utils/enum'; +import { getOptionName, thousandSeparatorFixed } from '@/utils/utils'; +import { renderTxt, renderPopTable } from '@/utils/hoverPopover'; +import AuthButton from '@/components/AuthButton'; +import BIButton from '@/ant_components/BIButton'; + +function getColor(id) { + // 1:待审批 2:审批中 3:审批通过 4:审批未通过 5:审批撤销 6 审批流程启动失败 + switch (id) { + case 1: + case 2: + return '#FFB63E'; + case 3: + return '#04B4AD'; + case 4: + return '#EC6D68'; + case 5: + return '#8C97A3'; + default: + return '#848F9B'; + } +} + +// 获取table列表头 +export function columnsFn(props) { + const columns = [ + { + title: '序列', + dataIndex: 'index', + align: 'center', + render: (...argu) => { + return argu[2] + 1; + }, + width: 50, + }, + { + title: '项目名称', + dataIndex: 'contractProjectName', + render: (text) => { + return text && renderTxt(text); + }, + width: 110, + }, + { + title: '项目类型', + dataIndex: 'contractProjectType', + render: (text) => { + return text && getOptionName(PROJECT_TYPE, text); + }, + width: 60, + }, + { + title: '客户名称', + dataIndex: 'customers', + width: 110, + render: (text) => { + return text && renderTxt(text); + }, + }, + { + title: '合同名称', + dataIndex: 'contractName', + width: 110, + render: (text) => { + return text && renderTxt(text); + }, + }, + { + title: '艺人/博主', + dataIndex: 'talents', + render: (text) => { + return text && renderTxt(text); + }, + width: 110, + }, + { + title: '合同总金额', + dataIndex: 'contractMoneyTotal', + render: (text) => { + return `${thousandSeparatorFixed(text)}元`; + }, + width: 110, + }, + { + title: '执行进度', + dataIndex: 'contractProgress', + width: 90, + render: (text, record) => { + const content = (text && `${(text * 100).toFixed(2)}%`) || '0.00%'; + const contractAppointmentList = (record.contractAppointmentList || []).map((item, index) => { + return { + ...item, + index, + }; + }); + const column = [ + { + title: '艺人/博主', + dataIndex: 'contractAppointmentTalentName', + render: (text) => { + return text && renderTxt(text); + }, + width: 100, + className: styles.columnHeader, + }, + { + title: '执行进度', + className: styles.columnHeader, + dataIndex: 'contractAppointmentProgress', + render: (word) => { + return (word && `${(word * 100).toFixed(2)}%`) || '0.00%'; + }, + width: 80, + }, + { + title: '进度更新时间', + className: styles.columnHeader, + dataIndex: 'contractAppointmentCreatedAt', + render: (text) => { + return text && text.slice(0, 10); + }, + width: 100, + }, + ]; + return renderPopTable(content, column, contractAppointmentList, styles.tableClass); + }, + }, + { + title: '开票进度', + dataIndex: 'invoiceMoney', + width: 110, + render: (text, record) => { + const result = text ? text.split('/') : [0, 0]; + const left = Number(result[0]) === 0 ? 0 : thousandSeparatorFixed(result[0]); + const right = Number(result[1]) === 0 ? 0 : thousandSeparatorFixed(result[1]); + const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`; + const contractInvoiceList = (record.contractInvoiceList || []).map((item, index) => { + return { + ...item, + index, + }; + }); + const column = [ + { + title: '开票金额', + dataIndex: 'contractInvoiceMoney', + render: (word) => { + return word && thousandSeparatorFixed(word); + }, + className: styles.columnHeader, + width: 120, + }, + { + title: '开票时间', + className: styles.columnHeader, + dataIndex: 'contractInvoiceDate', + render: (text) => { + return text && text.slice(0, 10); + }, + width: 100, + }, + ]; + return renderPopTable(content, column, contractInvoiceList, styles.tableClass); + }, + }, + { + title: '回款进度', + dataIndex: 'returnMoney', + width: 110, + render: (text, record) => { + const result = text ? text.split('/') : [0, 0]; + const left = Number(result[0]) === 0 ? 0 : thousandSeparatorFixed(result[0]); + const right = Number(result[1]) === 0 ? 0 : thousandSeparatorFixed(result[1]); + const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`; + const contractReturnList = (record.contractReturnList || []).map((item, index) => { + return { ...item, index }; + }); + const column = [ + { + title: '回款金额', + className: styles.columnHeader, + dataIndex: 'contractReturnMoney', + render: (word) => { + return word && thousandSeparatorFixed(word); + }, + width: 120, + }, + { + title: '回款时间', + className: styles.columnHeader, + dataIndex: 'contractReturnDate', + render: (text) => { + return text && text.slice(0, 10); + }, + width: 100, + }, + ]; + return renderPopTable(content, column, contractReturnList, styles.tableClass); + }, + }, + { + title: '费用确认进度', + dataIndex: 'feeConfirmProgress', + width: 110, + render: (text, record) => { + const result = text ? text.split('/') : [0, 0]; + const left = result[0]; + const right = result[1]; + const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`; + const disabled = content === '0/0' || Number(result[1]) === 0; // textDecoration: 'underline' + const style = disabled ? {} : { textDecoration: 'underline' }; + return ( + { + return props.goProgress(record.contractId); + }} + > + {content} + + ); + }, + }, + { + title: '累计报销金额', + dataIndex: 'accumulatedReimbursementMoney', + width: 110, + render: (text, record) => { + const disabled = !( + AuthButton.checkPathname('/foreEnd/business/project/contract/detail/cost') && + record.contractApprovalStatus === 3 + ); + const style = disabled ? {} : { textDecoration: 'underline' }; + return ( + { + return props.checkFeeData(record.contractId); + }} + > + {(text && thousandSeparatorFixed(text)) || 0} + + ); + }, + }, + { + title: '结算进度', + dataIndex: 'settlementProgress', + width: 100, + render: (text, record) => { + const result = text ? text.split('/') : [0, 0]; + const left = Number(result[0]) === 0 ? 0 : thousandSeparatorFixed(result[0]); + const right = Number(result[1]) === 0 ? 0 : thousandSeparatorFixed(result[1]); + const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`; + const disabled = !( + AuthButton.checkPathname('/foreEnd/business/project/contract/detail/settle') && + record.contractApprovalStatus === 3 + ); + const style = disabled ? {} : { textDecoration: 'underline' }; + return ( + { + return props.checkAccountData(record.contractId); + }} + > + {content} + + ); + }, + }, + { + title: '签约日期', + dataIndex: 'contractSigningDate', + render: (text) => { + return text && text.slice(0, 10); + }, + width: 90, + }, + { + title: '主子合同', + dataIndex: 'contractCategory', + render: (text) => { + return getOptionName(contractCategory, text); + }, + width: 70, + }, + { + title: '审批状态', + dataIndex: 'contractApprovalStatus', + render: (text) => { + return {getOptionName(FEE_APPLY_TYPE_LIST, text)}; + }, + width: 70, + }, + { + title: '归档状态', + dataIndex: 'contractArchiveStatus', + render: (text) => { + return ( + + {getOptionName(CONTRACT_ARCHIVE_STATUS, text)} + + ); + }, + width: 70, + }, + { + title: '操作', + dataIndex: 'operate', + width: 90, + render: (text, record) => { + const { contractCategory, contractApprovalStatus, contractIsVirtual } = record; + return ( +
+ + {Number(contractCategory) === 0 && + Number(contractApprovalStatus) === 3 && + Number(contractIsVirtual) !== 1 ? ( + { + return props.addChildContract(record.contractId); + }} + > + {' '} + 创建子合同 + + ) : null} + + + { + return props.editData(record.contractId, 1); + }} + > + {' '} + 编辑 + + + + { + return props.checkData(record.contractId); + }} + > + {' '} + 查看 + + +
+ ); + }, + }, + ]; + return columns || []; +} diff --git a/components/DataView/index.js b/components/DataView/index.js index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f76066a3566ea35949b6138d5bd70f3d59d71776 100644 --- a/components/DataView/index.js +++ b/components/DataView/index.js @@ -0,0 +1,804 @@ +/* eslint-disable */ +// 库/框架 +import React, { Component } from 'react'; +// 组件 +import { Modal, message } from 'antd'; +import _ from 'lodash'; +import moment from 'moment'; +import SearchView from '@/components/SearchView'; +import FormFilterBtn from '@/components/form-FilterButton2'; +import SelfPagination from '@/components/SelfPagination'; +import BITable from '@/ant_components/BITable'; +import BIButton from '@/ant_components/BIButton'; +import ButtonAuth from '@/components/AuthButton'; +import IconFont from '@/components/CustomIcon/IconFont'; + +// 样式 +import s from './index.less'; +// 工具 +import antiAssign from '@/utils/anti-assign'; +import { DATE_FORMAT, PAGINATION } from '@/utils/constants'; +import BISpin from '@/ant_components/BISpin'; +import { getSift } from '@/services/comment'; +import { getOptionName, replacePageNum } from '@/utils/utils'; +import { SIFT_TYPE } from '@/utils/enum'; +import storage from '@/utils/storage'; /* eslint-disable react/sort-comp */ // 关闭下划线变量检测 // 关闭方法排序检测 // 多维数组降维成一维数组 + +/* eslint-disable no-underscore-dangle */ +function reduceDimension(arr) { + return Array.prototype.concat.apply([], arr); +} + +// userTree/orgTree数据转成{id,name} +function formatUser(obj) { + let name = obj.label; + if (typeof name !== 'string') { + name = obj.label.props.children; + } + return { id: obj.value, name }; +} + +// associationSearch数据转成{id,name} +function formatAssociationSearch(obj) { + if (Array.isArray(obj) && obj.length > 0) { + return obj.map((item) => { + return { id: item.value, name: item.label }; + }); + } + return { id: obj.value, name: obj.label }; +} + +// id数组转成{id,name} +function formatArr(arr, options) { + const temp = []; + arr.map((key) => { + temp.push({ + id: key, + name: ( + options.find((item) => { + return String(item.id) === String(key); + }) || {} + ).name, + }); + }); + return temp; +} + +// radio转换 +function formatRadioArr(key, options) { + const temp = []; + options.map((item) => { + if (Number(item.id) === Number(key)) { + temp.push({ + id: Number(item.id), + name: item.name, + }); + } + }); + return temp; +} + +// 日期数组转成{id,name} +function formatDateRange(arr) { + const temp = []; + arr.map((date, index) => { + temp.push({ id: index, name: moment(date).format(DATE_FORMAT) }); + }); + return temp; +} + +// 日期数组转成{id,name} +function formatDateTimeRange(arr) { + const temp = []; + arr.map((date, index) => { + temp.push({ id: index, name: moment(date).format('YYYY-MM-DD hh:mm:ss') }); + }); + return temp; +} + +// 日期转成{id,name} +function formatDate(date) { + return { id: undefined, name: moment(date).format('YYYY-MM-DD') }; +} + +// 转换成区间 +function formarRange(data) { + return Object.keys(data) + .map((item) => { + return { + id: item, + name: data[item], + }; + }) + .filter((item) => { + return item.name && item.name !== data.type; + }); +} + +// 日期区间格式化（时间部分为00:00:00-23:59:59） +function changeDateRange(props, changedValues, allValues) { + const key = Object.keys(changedValues)[0]; + const cols = reduceDimension(props.searchCols); + const col = cols.find((item) => { + return item.key === key; + }); + if (col && col.type === 'daterange' && Array.isArray(changedValues[key]) && changedValues[key].length > 0) { + if (changedValues[key].length === 1) { + allValues[key] = [moment(moment(changedValues[key][0]).format('YYYY-MM-DD 00:00:00'))]; + } else { + allValues[key] = [ + moment(moment(changedValues[key][0]).format('YYYY-MM-DD 00:00:00')), + moment(moment(changedValues[key][1]).format('YYYY-MM-DD 23:59:59')), + ]; + } + } + return allValues; +} + +function formatSelect(val, options) { + if (Array.isArray(val) && val.length > 0) { + return val.map((item) => { + return { + id: item, + name: options.find((cItem) => { + return cItem.id === item; + }).name, + }; + }); + } + if (Array.isArray(val) && val.length === 0) { + return []; + } + return { + id: val, + name: options.find((item) => { + return item.id === val; + }).name, + }; +} + +function formatForm(formData, searchCols) { + const cols = reduceDimension(searchCols); + const result = []; + Object.keys(formData).map((key) => { + if (!formData[key]) { + return; + } + const col = cols.find((item) => { + return item.key === key; + }); + if (col === undefined) return; + let value; + switch (col.type) { + case 'radio': + value = formatRadioArr(formData[key], col.options); + break; + case 'checkbox': + value = formatArr(formData[key], col.options); + break; + case 'usertree': + break; + case 'orgtree': + value = formatUser(formData[key]); + break; + case 'associationSearch': + value = formatAssociationSearch(formData[key]); + break; + case 'daterange': + value = formatDateRange(formData[key]); + break; + case 'daterangetime': + value = formatDateTimeRange(formData[key]); + break; + case 'date': + value = formatDate(formData[key]); + break; + case 'associationSearchFilter': + value = formatAssociationSearch(formData[key]); + break; + case 'numberRange': + value = formarRange(formData[key]); + break; + case 'select': + value = formatSelect(formData[key], col.options); + break; + case 'tag': + let tagVal = {}; + const tagTreeSelect = (val, options) => { + options.forEach((item) => { + if (item.value === val) { + tagVal = { id: item.id, name: item.title }; + } else if (item.children && item.children.length) { + tagTreeSelect(val, item.children); + } + }); + return tagVal; + }; + value = tagTreeSelect(formData[key], col.componentAttr.treeData, tagVal); + break; + default: + value = formData[key]; + break; + } + result.push({ key, value }); + }); + return result; +} + +function removeItem(formData, removedItem) { + const data = _.assign({}, formData); + const item = data[removedItem.key]; + if (item.type === 'numberRange') { + const clearObj = {}; + clearObj[removedItem.id] = undefined; + const newObj = { ...data[removedItem.key], ...clearObj }; + data[removedItem.key] = newObj; + } else if (Array.isArray(item)) { + if (moment.isMoment(item[0])) { + data[removedItem.key] = undefined; + // item.splice(removeItem.id, 1); + } else { + const index = item.findIndex((t) => { + return t.key || t.value + ? String(t.key) === String(removedItem.id) || String(t.value) === String(removedItem.id) + : String(t) === String(removedItem.id); + }); + if (index > -1) { + item.splice(index, 1); + } + } + } else { + data[removedItem.key] = undefined; + } + return data; +} + +// 基础数据视图 +export default class DataView extends Component { + constructor(props) { + super(props); + const { + pageData: { list, page }, + pagination, + } = props; + this.state = { + searchForm: this.getDefaultSift(), + pagination: { + showTotal: (total) => { + return `共${total}条`; + }, + pageSize: (pagination && pagination.pageSize) || PAGINATION.pageSize, + total: (page && page.total) || PAGINATION.total, + current: (page && page.current) || PAGINATION.current, + onChange: (nextPage) => { + this.fetchPage(nextPage); + this.fetch(); + window.history.replaceState({ pageNum: nextPage }, '', `?pageNum=${nextPage}`); + }, + onShowSizeChange: this.fetchPageSize, + showQuickJumper: true, + }, + data: { + origin: list || [], + view: { + selectedData: [], + selectedDataKeys: [], + }, + }, + loading: false, + siftDataArr: [], // 快捷筛选数据列表 + currentSiftNum: 0, + }; + } + + componentWillMount() { + // this.getDefaultSift(); + } + + componentDidMount() { + this.getSiftData(); + replacePageNum('pageNum', this.state.current, this.fetchPage); // 当url里面有pageNum参数时，获取url里面的参数进行请求 + } + + componentWillReceiveProps(nextProps) { + if (JSON.stringify(this.props.pageData) !== JSON.stringify(nextProps.pageData)) { + const { pagination, data } = this.state; + const { + pageData: { list, page }, + } = nextProps; + const newPage = + page.total > 0 + ? { + current: page.pageNum, + total: page.total, + } + : { + current: PAGINATION.current, + total: PAGINATION.total, + }; + const newData = _.assign({}, data, { origin: list }); + this.setState({ + pagination: _.assign({}, pagination, newPage), + data: newData, + }); + } + const { loading } = nextProps; + this.setState({ + loading: loading || false, + }); + } + + getDefaultSetSift() { + if (Array.isArray(this.props.searchCols)) { + const newData = {}; + this.props.searchCols.map((item) => { + item.map((col) => { + if (col.defaultValue) newData[col.key] = col.defaultValue; + }); + }); + return newData; + } + } + + getDefaultSift() { + const storageItem = storage.getItem(`businessType-${getOptionName(SIFT_TYPE, window.location.pathname)}`); + const siftStorage = this.rebackDate(storageItem) || {}; + let result = {}; + let status = false; + if (JSON.stringify(siftStorage) === '{}') { + result = this.getDefaultSetSift(); + } else { + // eslint-disable-next-line no-restricted-syntax + for (const key in siftStorage) { + // eslint-disable-next-line no-prototype-builtins + if (siftStorage.hasOwnProperty(key)) { + const element = siftStorage[key]; + if (Array.isArray(element) && element.length === 0) { + result = this.getDefaultSetSift(); + } else { + status = true; + } + } + } + } + if (status) { + result = siftStorage; + } + return result; + } + + async getSiftData() { + const res = await getSift({ + businessType: getOptionName(SIFT_TYPE, window.location.pathname), + }); + if (res && res.success === true) { + const data = res.data || {}; + const siftData = data.queryLabelList || []; + this.setState({ + siftDataArr: siftData, + }); + } else { + message.error(res && res.message); + } + } + + // eslint-disable-next-line react/sort-comp + _beforeFetch() { + const { searchForm, pagination } = this.state; + + return _.assign({}, searchForm, { + pageSize: pagination.pageSize, + pageNum: pagination.current, + }); + } + + _afterFetch(data, selectedData, selectedDataKeys) { + const { pagination } = this.state; + const newPagination = _.assign({}, pagination, data.page); + this.setState({ + pagination: newPagination, + data: { + origin: data.list, + view: { + selectedData: selectedData || [], + selectedDataKeys: selectedDataKeys || [], + }, + }, + }); + } + + _afterDel() { + this.fetch(); + message.success('操作成功'); + } + + fetch() { + const { beforeFetch, fetch, afterFetch } = this.props; + let onBeforeFetch = beforeFetch; + if (typeof onBeforeFetch !== 'function') { + onBeforeFetch = this._beforeFetch.bind(this); + } + let onAfterFetch = afterFetch; + if (typeof onAfterFetch !== 'function') { + onAfterFetch = this._afterFetch.bind(this); + } + storage.setItem( + `businessType-${getOptionName(SIFT_TYPE, window.location.pathname)}`, + this.changeData(this.state.searchForm), + ); + if (typeof fetch === 'function') { + fetch(onBeforeFetch, onAfterFetch); + } + } + + search() { + const { beforeSearch } = this.props; + window.history.replaceState({ pageNum: 1 }, '', `?pageNum=${1}`); + if (typeof beforeSearch === 'function') { + beforeSearch(); + } + this.state.pagination.current = 1; + this.fetch(); + } + + // 翻页功能 + fetchPage = (current) => { + this.state.pagination.current = current; + // this.fetch(); + }; + + // 改变页码功能 + fetchPageSize = (current, pageSize) => { + this.state.pagination.current = 1; + this.state.pagination.pageSize = pageSize; + this.fetch(); + }; + + del(label, onClick, type) { + label = typeof label === 'string' ? label : '删除'; + onClick = typeof onClick === 'function' ? onClick : null; + if (type === 'download') { + // onClick(); + return; + } + + const { + data: { + view: { selectedData }, + }, + } = this.state; + if (selectedData.length <= 0) { + message.error(`请选择要${label}的记录`); + return; + } + Modal.confirm({ + title: `确认${label}`, + content: `确认${label}选中的${selectedData.length}条记录`, + okText: '确认', + cancelText: '取消', + onOk: () => { + const { del, afterDel } = this.props; + let onAfterDel = afterDel; + if (typeof onAfterDel !== 'function') { + onAfterDel = this._afterDel.bind(this); + } + if (del === true && onClick) { + onClick(selectedData, onAfterDel); + } else if (typeof del === 'function') { + del(selectedData, onAfterDel); + } + }, + }); + } + + rebackDate = (data) => { + const reg = /^(\d{4})-(\d{2})-(\d{2})$/; + // eslint-disable-next-line no-restricted-syntax + for (const key in data) { + // eslint-disable-next-line no-prototype-builtins + if (data.hasOwnProperty(key)) { + if (Array.isArray(data[key])) { + data[key].map((item) => { + if (reg.test(item)) { + data[key][0] = moment(moment(data[key][0]).format('YYYY-MM-DD 00:00:00')); + data[key][1] = moment(moment(data[key][1]).format('YYYY-MM-DD 23:59:59')); + } + }); + } + } + } + return data; + }; + + changeSearchForm(index) { + // 点击筛选更新选中条件 + let result = {}; + if (index === 0) { + result = {}; + } else { + const siftDataArr = Array.isArray(this.state.siftDataArr) ? this.state.siftDataArr : []; + const obj = + siftDataArr.find((item) => { + return item.queryLabelId === index; + }) || {}; + try { + result = JSON.parse(obj.queryLabelValue); + result = this.rebackDate(result); + } catch (e) { + console.warn(e); + } + } + this.setState( + { + searchForm: result, + currentSiftNum: index, + }, + () => { + this.search(); + }, + ); + } + + changeData = (changeData) => { + const data = _.cloneDeep(changeData); + // eslint-disable-next-line no-restricted-syntax + for (const key in data) { + // eslint-disable-next-line no-prototype-builtins + if (data.hasOwnProperty(key)) { + if (Array.isArray(data[key])) { + data[key].map((item) => { + if (item instanceof moment) { + data[key][0] = moment(data[key][0]).format('YYYY-MM-DD'); + data[key][1] = moment(data[key][1]).format('YYYY-MM-DD'); + } + }); + } + } + } + return data; + }; + + // 更改查询条件 + _changeSearchForm = (props, changedValues, allValues) => { + const newData = changeDateRange(props, changedValues, allValues); + this.setState({ + searchForm: newData, + currentSiftNum: 0, + }); + }; + + // 渲染搜索栏 + _renderSearchForm = () => { + const { searchCols } = this.props; + const { searchForm } = this.state; + if (searchCols === null || searchCols.length <= 0) return null; + return ( + + ); + }; + + // 清空搜索条件 + _onReset = () => { + this.setState( + { + searchForm: {}, + }, + () => { + this.fetch(); + }, + ); + }; + + // 删除指定搜索条件 + _onRemoveItem = (values) => { + const { searchForm } = this.state; + const formData = removeItem(searchForm, values); + this.setState( + { + searchForm: formData, + currentSiftNum: 0, + }, + () => { + this.fetch(); + }, + ); + }; + + siftCallBack() { + // 更新自定义筛选标签 + this.getSiftData(); + } + + // 渲染查询条件按钮组件 + _renderFilterBtn = () => { + const { searchCols } = this.props; + const { searchForm, siftDataArr, currentSiftNum } = this.state; + if (searchCols === null || searchCols.length <= 0) return null; + const chooseItems = formatForm(searchForm, searchCols); + return ( + + ); + }; + + // 渲染顶部tips + _renderTips() { + const { tips } = this.props; + if (tips) { + return ( +
+ {tips} + {this._renderBtns()} +
+ ); + } + return this._renderBtns(); + } + + // 渲染操作按钮栏 + _renderBtns() { + const { del } = this.props; + let { btns } = this.props; + if (btns == null || btns.length <= 0) return null; + if (typeof del === 'function') { + btns = btns.concat([{ label: '删除', onClick: this.del.bind(this) }]); + } + return ( +
+ {btns.map((item, i) => { + const { label, onClick, authority, download, iconBtnSrc, type } = item; + const style = { + marginLeft: '10px', + }; + if (i === 0) { + style.marginRight = '0'; + } + return ( + + {type === 'download' ? ( + download() + ) : ( + + {iconBtnSrc && iconBtnSrc !== '' ? ( + + ) : ( + + )} + {label} + + )} + + ); + })} +
+ ); + } + + // 渲染表格组件 + _renderData() { + const { + del, + cols, + rowKey, + rowSelectionConfig, + expandedRowRender, + expandIcon, + scroll, + expandedRowKeys, + onExpandedRowsChange, + } = this.props; + const { data } = this.state; + let rowSelection = null; + if (del === true || typeof del === 'function') { + rowSelection = { + selectedRowKeys: data.view.selectedDataKeys, + onChange: (selectedRowKeys, selectedRows) => { + this.state.data.view.selectedDataKeys = selectedRowKeys; + this.state.data.view.selectedData = selectedRows; + this.forceUpdate(); + }, + }; + } + if (rowSelectionConfig) { + rowSelection = rowSelectionConfig; + } + const commonProps = { + className: s.table, + rowKey, + rowSelection, + columns: cols, + dataSource: data.origin, + expandIcon, + onExpandedRowsChange, + expandedRowRender, + pagination: false, + bordered: false, + }; + const _props = expandedRowKeys ? { ...commonProps, expandedRowKeys } : commonProps; + return scroll ? : ; + } + + // 渲染分页组件 + _renderPagination = () => { + const { pagination } = this.state; + return pagination.total > 20 ? : null; + }; + + formSiftData = (data) => { + // 格式化快捷筛选数据 + const result = []; + data.map((item) => { + const queryLabelConditions = []; + item.queryLabelConditions.map((cItem) => { + queryLabelConditions.push({ + queryLabelKey: cItem.queryLabelKey, + queryLabelValue: cItem.queryLabelValue, + queryLabelControlType: cItem.queryLabelControlType, + }); + }); + result.push({ + queryLabelName: item.queryLabelName, + queryLabelConditions, + queryLabelControlType: item.queryLabelControlType, + }); + }); + return result; + }; + + // 高级搜索 + // renderAdvanced = () => { + // const {} = this.props; + // return null; + // // return ; + // }; + + render() { + const { style, hideForm, tips } = this.props; + const { loading } = this.state; + return ( +
+ + {hideForm ? null : ( + <> +
+ {/* 筛选条件 */} + {this._renderSearchForm()} + {/* 高级搜索 */} + {/* {advancedStatus ? this.renderAdvanced() : null} */} + {/* 已选条件、搜索按钮 */} + {this._renderFilterBtn()} +
+
+ + )} +
+ {tips ? this._renderTips() : this._renderBtns()} + {this._renderData()} + {this._renderPagination()} + {this.props.children} +
+ +
+ ); + } +} diff --git a/components/DataView/index.less b/components/DataView/index.less new file mode 100644 index 0000000000000000000000000000000000000000..20e86a1417a0b560d558cb05fb5cb1fece56d231 --- /dev/null +++ b/components/DataView/index.less @@ -0,0 +1,77 @@ +@import '~@/theme/common'; + +@smallSpace: 4px; +@normalSpace: 16px; +.view { + .tableWrap { + background: #fff; + padding: 10px 20px; + border-radius: 6px; + } + + .formWrap { + background: #fff; + padding: 25px 20px; + border-radius: 6px; + } + + .row { + text-align: right; + // display: flex; + // margin-bottom: 6px; + + .col { + display: inline-block; + vertical-align: middle; + width: 30%; + margin: @smallSpace; + } + + .btn { + color: @primaryColor; + border-color: @primaryColor; + line-height: 32px; + + .iconCls { + font-size: @textFontGen; + } + .titleCls { + font-size: @textFontGen; + } + } + } + + .table { + margin: @smallSpace 0; + + td { + word-break: break-word; + } + + :global(.ant-table-placeholder) { + border-bottom: none; + } + + :global(.ant-table-thead > tr > th) { + border-right: none; + border-bottom: 1px solid #f6f6f8; + } + + :global(.ant-table-tbody > tr > td) { + border-right: none; + border-bottom: 1px solid #f6f6f8; + } + } +} + +.split { + height: 16px; + background: #f9f9f9; +} + +.tips { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + align-items: center; +}