From aa64deb95a5234a00cb338b4820083de15c7b7ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com> Date: Fri, 18 Nov 2022 08:38:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B3=9B=E5=BE=AE=E8=96=AA=E8=B5=84=E6=A0=B8?= =?UTF-8?q?=E7=AE=97iframe=E8=A1=A8=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/config.dev.ts | 20 +- config/config.prod.ts | 6 +- config/config.ts | 8 +- src/api/calculate.service.ts | 33 ++ src/api/index.ts | 14 +- src/common/types/page.ts | 32 +- src/gard/AdminGard.tsx | 7 +- src/global.less | 20 +- src/layouts/BlankLayout/index.tsx | 43 ++- src/layouts/config.js | 2 + src/pages/atdTable/components/antdTable.tsx | 317 ++++++++++++++++++++ src/pages/atdTable/components/index.less | 101 +++++++ src/pages/atdTable/index.tsx | 9 + src/store/CalculateStore.ts | 17 ++ src/store/index.js | 10 +- src/utils/common.js | 48 ++- 16 files changed, 599 insertions(+), 88 deletions(-) create mode 100644 src/api/calculate.service.ts create mode 100644 src/pages/atdTable/components/antdTable.tsx create mode 100644 src/pages/atdTable/components/index.less create mode 100644 src/pages/atdTable/index.tsx create mode 100644 src/store/CalculateStore.ts diff --git a/config/config.dev.ts b/config/config.dev.ts index 4feb1ec..39134a4 100644 --- a/config/config.dev.ts +++ b/config/config.dev.ts @@ -7,18 +7,18 @@ export default defineConfig({ base: '/', publicPath: '/', proxy: { - '/gateway': { - // 'target': 'http://gateway', - target: 'https://yule-dev.njhtsz.com', - changeOrigin: true, - }, - // '/gateway/idm': { - // target: 'http://192.168.20.5:9110', + // '/gateway': { + // // 'target': 'http://gateway', + // target: 'https://yule-dev.njhtsz.com', // changeOrigin: true, - // pathRewrite: { - // '^/gateway/idm': '', - // }, // }, + '/api': { + target: 'http://192.168.0.50:7602/api', + changeOrigin: true, + pathRewrite: { + '^/api': '', + }, + }, // '/gateway/idm': { // target: 'http://localhost:9110', // changeOrigin: true, diff --git a/config/config.prod.ts b/config/config.prod.ts index df99533..ecd00b4 100644 --- a/config/config.prod.ts +++ b/config/config.prod.ts @@ -5,8 +5,10 @@ export default defineConfig({ ENV: 'prod', }, antd: false, - base: '/slave', - publicPath: '/slave/static/', + // base: '/slave', + // publicPath: '/slave/static/', + base: '/spa/hrmSalary/hrmSalaryCalculateDetail/', + publicPath: './', externals: { echarts: 'echarts', moment: 'moment', diff --git a/config/config.ts b/config/config.ts index 9de5390..c5c5717 100644 --- a/config/config.ts +++ b/config/config.ts @@ -43,13 +43,7 @@ export default defineConfig({ cssLoader: { localsConvention: 'camelCase', modules: { - getLocalIdent: ( - context: { - resourcePath: string; - }, - _: string, - localName: string, - ) => { + getLocalIdent: (context: { resourcePath: string }, _: string, localName: string) => { if ( context.resourcePath.includes('pages/home') || context.resourcePath.includes('node_modules') || diff --git a/src/api/calculate.service.ts b/src/api/calculate.service.ts new file mode 100644 index 0000000..6cf638a --- /dev/null +++ b/src/api/calculate.service.ts @@ -0,0 +1,33 @@ +import BasicService from "./BasicService"; + +/** + * @desc 全局服务 + */ +class CalculateService extends BasicService { + constructor() { + super(); + } + //获取人员确认列表信息 + getPCDataList = async ({ url, queryParams }: any) => { + const { departmentIds = "", positionIds = "", subcompanyIds="", ...extraParams } = queryParams || {}; + queryParams = { + ...extraParams, + departmentIds: departmentIds ? departmentIds.split(",") : undefined, + positionIds: positionIds ? positionIds.split(",") : undefined, + subcompanyIds: subcompanyIds ? subcompanyIds.split(",") : undefined + }; + for (let key in queryParams) { + if (queryParams[key] === "" || queryParams[key] === "0") { + delete queryParams[key]; + } + } + return this.post( + url, + queryParams + ); + }; +} + +const calculateService = new CalculateService(); + +export default calculateService; diff --git a/src/api/index.ts b/src/api/index.ts index 04a46e8..81a9643 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,8 +1,10 @@ -import AccountService from './account.service'; -import GlobalService from './global.service'; -import MenuService from './menu.service'; -import SettingService from './setting.service'; -import DictionaryService from './dictionary.service'; +import AccountService from "./account.service"; +import GlobalService from "./global.service"; +import MenuService from "./menu.service"; +import SettingService from "./setting.service"; +import DictionaryService from "./dictionary.service"; + +import CalculateService from "./calculate.service"; export { AccountService, @@ -10,6 +12,7 @@ export { MenuService, SettingService, DictionaryService, + CalculateService }; export default { @@ -18,4 +21,5 @@ export default { MenuService, SettingService, DictionaryService, + CalculateService }; diff --git a/src/common/types/page.ts b/src/common/types/page.ts index 45c7f9b..77cc80b 100644 --- a/src/common/types/page.ts +++ b/src/common/types/page.ts @@ -2,33 +2,19 @@ * 分页 */ interface IPage { - /** - * 当前页(从0开始计算) - */ - page: number; - - /** - * 每页数据 - */ + pageNum: number; size: number; - - /** - * 总述(一般从header里面获取) - */ total?: number; - - /** - * 排序字段(对应后台实体的字段,非数据库字段,例如:createdDate) - */ - sort?: string; +} +interface ILoading { + query?: boolean; + save?: boolean; + submit?: boolean; } let defaultPage: IPage = { - page: 0, - - size: 100, - - sort: 'createdDate', + pageNum: 1, + size: 10, }; -export { IPage, defaultPage }; +export { IPage, ILoading, defaultPage }; diff --git a/src/gard/AdminGard.tsx b/src/gard/AdminGard.tsx index 88a2248..7b82807 100644 --- a/src/gard/AdminGard.tsx +++ b/src/gard/AdminGard.tsx @@ -1,12 +1,13 @@ -import * as React from 'react'; -import { useAccess, Access, Redirect } from 'umi'; +import * as React from "react"; +import { Access, Redirect, useAccess } from "umi"; export default (props: any) => { const access = useAccess(); return ( } + // @ts-ignore + fallback={} > {props.children} diff --git a/src/global.less b/src/global.less index b13f7ea..5711cfd 100644 --- a/src/global.less +++ b/src/global.less @@ -70,27 +70,27 @@ div, iframe, aside, main { - scrollbar-color: #999 transparent; + scrollbar-color: #ccc transparent; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */ scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */ &::-webkit-scrollbar-track { - -webkit-box-shadow: 0 0 0; - background-color: rgba(0, 0, 0, 0.05); - border-radius: 4px; + -webkit-box-shadow: none; + background-color: transparent; + border-radius: 10px; } &::-webkit-scrollbar { - width: 6px; - height: 6px; + width: 10px; + height: 10px; background-color: transparent; } &::-webkit-scrollbar-thumb { - border-radius: 4px; - -webkit-box-shadow: inset 0 0 6px #999; - background-color: #999; + border-radius: 10px; + -webkit-box-shadow: none; + background-color: #ccc; } } @@ -143,4 +143,4 @@ input:-webkit-autofill { .ant-dropdown-menu { max-height: calc(100vh - 300px); overflow-y: auto; -} \ No newline at end of file +} diff --git a/src/layouts/BlankLayout/index.tsx b/src/layouts/BlankLayout/index.tsx index 763373b..29a368e 100644 --- a/src/layouts/BlankLayout/index.tsx +++ b/src/layouts/BlankLayout/index.tsx @@ -1,17 +1,28 @@ -import * as React from 'react'; -import styles from './index.less'; +import * as React from "react"; +import { useEffect } from "react"; +import { ConfigProvider } from "antd"; +import styles from "./index.less"; -export default ({children, style = {}}: any) => { - return ( -
- {children} -
- ); -}; \ No newline at end of file +export default ({ children, style = {} }: any) => { + useEffect(() => { + ConfigProvider.config({ + theme: { + primaryColor: "#2DB7F5" + } + }); + }, []); + + return ( +
+ {children} +
+ ); +}; diff --git a/src/layouts/config.js b/src/layouts/config.js index c4739e1..db15a54 100644 --- a/src/layouts/config.js +++ b/src/layouts/config.js @@ -4,6 +4,8 @@ module.exports = { '/home': 'blank', '/manage/design/.*': 'blank', '/manage/editor': 'blank', + '/calculateDetail.*': 'blank', + '/atdTable.*': 'blank', '/manage.*': 'manage', '/portal.*': 'template', '/passport/oauth-in': 'blank', diff --git a/src/pages/atdTable/components/antdTable.tsx b/src/pages/atdTable/components/antdTable.tsx new file mode 100644 index 0000000..b76e156 --- /dev/null +++ b/src/pages/atdTable/components/antdTable.tsx @@ -0,0 +1,317 @@ +import React, { FC, useEffect, useState } from "react"; +import { exceptStr, paginationFun } from "@/utils/common"; +import { defaultPage, ILoading, IPage } from "@/common/types/page"; +import { message, Table, Typography } from "antd"; +import { LockOutlined, UnlockOutlined } from "@ant-design/icons"; +import API from "@/api"; +import styles from "./index.less"; + +const { Text } = Typography; + +interface ITableProps { +} + +const AntdTable: FC = (props) => { + const [selected, setSelected] = useState>([]); //列表选中的数据 + const [tab, setTab] = useState(""); //顶部TAB变量 + const [usertab, setUsertab] = useState(""); //底部TAB变量 + const [pageParams, setPageParams] = useState(defaultPage); //分页变量 + const [loading, setLoading] = useState({}); + const [columns, setColumns] = useState([]); + const [dataSource, setDataSource] = useState([]); + const [sumRow, setSumRow] = useState>({});//薪资核算总计行数据 + useEffect(() => { + window.parent.postMessage( + { + type: "PC", + data: { id: "SA" } + }, + "*" + ); + window.addEventListener("message", receiveMessageFromIndex, false); + return () => { + setSumRow({}); + window.removeEventListener("message", receiveMessageFromIndex, false); + }; + }, []); + + const getPCDataList = (params: any = {}) => { + let { type, listType, ...extraParams } = params; + setLoading({ query: true }); + setTab(type); + setUsertab(listType); + API.CalculateService.getPCDataList(extraParams).then(({ success, data, errorMsg }) => { + setLoading({ query: false }); + if (success) { + const { data: dataCopy } = data; + if (type === "PC") { + if (listType === "SA") { + const { columns = [], list = [], total, pageSize: size, pageNum } = dataCopy; + setColumns(getUserListColumns(columns)); + setDataSource(list); + setPageParams({ ...pageParams, total, size, pageNum }); + } else if (listType === "MA") { + const { columns = [], list = [], total, pageSize: size, pageNum } = dataCopy; + setColumns(columns); + setDataSource(list); + setPageParams({ ...pageParams, total, size, pageNum }); + } + } else { + const { columns = [], pageInfo = {}, sumRow = {} } = dataCopy; + const { list = [], total, pageSize: size, pageNum } = pageInfo; + setColumns(getColumns(columns)); + setDataSource(list); + setSumRow(sumRow); + setPageParams({ ...pageParams, total, size, pageNum }); + } + } else { + message.error(errorMsg || ""); + } + }); + }; + const getUserListColumns = (acctemployeeListColumns: any) => { + let tmpColumns = [...acctemployeeListColumns, { + key: "cz", + title: "操作", + render: (text: string, record: any) => { + return ( + { + window.parent.postMessage( + { + type: "PC", + data: { id: "DELETE", data: record } + }, + "*" + ); + }} + > + 删除 + + ); + } + }]; + return tmpColumns; + }; + //薪资核算页面列表 + const getColumns = (column: any) => { + let tmpColumns = [...column]; + tmpColumns = tmpColumns.filter(item => item.hide == "FALSE").map((item, index) => { + let result = { ...item }; + result.title = + { + window.parent.postMessage( + { + type: "PR", + data: { id: "COLUMNINDEX", data: item.column } + }, + "*" + ); + }}>{item.text} + { + item.lockStatus && + { + item.lockStatus === "UNLOCK" && { + window.parent.postMessage( + { + type: "PR", + data: { id: "COLUMNINDEX", data: item.column, extraId: "LOCK" } + }, + "*" + ); + }} + /> + } + { + item.lockStatus !== "UNLOCK" && { + window.parent.postMessage( + { + type: "PR", + data: { id: "COLUMNINDEX", data: item.column, extraId: "UNLOCK" } + }, + "*" + ); + }} + /> + } + + } + ; + result.dataIndex = item.column; + result.oldWidth = result.width; + result.width = "150px"; + if (result.children) { + result.width = (result.children.length * 150) + "px"; + result.children.map((child: any) => { + child.title = + { + window.parent.postMessage( + { + type: "PR", + data: { id: "COLUMNINDEX", data: child.column } + }, + "*" + ); + }}>{child.text} + { + child.lockStatus && + + { + child.lockStatus === "UNLOCK" && + { + window.parent.postMessage( + { + type: "PR", + data: { id: "COLUMNINDEX", data: child.column, extraId: "LOCK" } + }, + "*" + ); + }} + /> + } + { + child.lockStatus !== "UNLOCK" && + { + window.parent.postMessage( + { + type: "PR", + data: { id: "COLUMNINDEX", data: child.column, extraId: "UNLOCK" } + }, + "*" + ); + }} + /> + } + + } + ; + child.dataIndex = child.column; + child.width = "150px"; + child.render = (text: string) => { + return + {text} + { + child.lockStatus === "LOCK" ? : null + } + ; + }; + }); + } + + if (index < 3) { + result.fixed = "left"; + result.render = (text: string) => { + return {text}; + }; + } + + return result; + }); + tmpColumns.push({ + title: "操作", + key: "cz", + width: "100px", + fixed: "right", + render: (text: string, record: any) => { + return { + window.parent.postMessage( + { + type: "PR", + data: { id: "EDIT", data: record } + }, + "*" + ); + }}>编辑; + } + }); + return tmpColumns; + }; + const receiveMessageFromIndex = (event: any) => { + setDataSource([]); + const data: any = exceptStr(event.data); + if (!_.isEmpty(data)) { + getPCDataList({ ...data, ...pageParams }); + } + }; + + const sizeChange = (pageobj: IPage) => { + }; + const onChange = (pageobj: IPage) => { + setPageParams({ ...pageParams, ...pageobj }); + window.parent.postMessage( + { + type: tab, + data: { id: "PAGEINFO", extraId: usertab, data: { ...pageParams, ...pageobj } } + }, + "*" + ); + }; + const rowSelection = { + selectedRowKeys: selected, + onChange: (selectedRowKeys: Array) => { + setSelected(selectedRowKeys); + window.parent.postMessage( + { + type: tab, + data: { id: "BATCHDELETE", extraId: usertab, data: selectedRowKeys } + }, + "*" + ); + } + }; + return { + if (tab !== "PR" || _.isEmpty(sumRow)) return; + let totalColumns: any[] = []; + _.forEach(columns, it => { + if (!it.children) { + totalColumns.push(it); + } else { + totalColumns = [...totalColumns, ...it.children]; + } + }); + return ( + + + { + _.map(totalColumns, (item, index) => { + if (index === 0) { + return 总计; + } + return + {sumRow[item.dataIndex] || "-"} + ; + }) + } + + + ); + }} + />; +}; + +export default AntdTable; diff --git a/src/pages/atdTable/components/index.less b/src/pages/atdTable/components/index.less new file mode 100644 index 0000000..293211c --- /dev/null +++ b/src/pages/atdTable/components/index.less @@ -0,0 +1,101 @@ +//表格样式 +.tableWrapper { + .titleWrapper { + display: flex; + align-items: center; + + & > span:first-child { + flex: 1; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + & > span.titleIcon { + margin-left: 4px; + display: none; + + & > span { + cursor: pointer; + color: #5d9cec; + } + + } + } + + .contentSpan { + display: flex; + justify-content: space-between; + align-items: center; + + :global { + span.anticon-lock { + color: #5d9cec; + } + } + } + + .titleWrapper:hover { + & > span.titleIcon { + display: block; + } + } + + :global { + .ant-table-tbody > tr.ant-table-row:hover > td { + background: #e9f7ff; + } + + .ant-spin-container { + .ant-pagination { + font-size: 12px; + align-items: center; + + .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next { + min-width: 28px; + height: 28px; + line-height: 28px; + border-radius: 6px; + + & > button { + border-radius: 6px; + } + } + + .ant-pagination-options { + .ant-select { + font-size: 12px; + + .ant-select-selector { + height: 28px; + border-radius: 6px; + } + + .ant-select-item { + font-size: 12px; + } + } + + .ant-pagination-options-quick-jumper { + height: 28px; + line-height: 28px; + + & > input { + border-radius: 6px; + height: 28px; + } + } + } + } + } + + .ant-table-thead > tr > th { + background-color: #f7fbfe; + } + + th, td { + font-size: 12px + } + } +} diff --git a/src/pages/atdTable/index.tsx b/src/pages/atdTable/index.tsx new file mode 100644 index 0000000..721d83b --- /dev/null +++ b/src/pages/atdTable/index.tsx @@ -0,0 +1,9 @@ +import React, { FC } from 'react'; +import AntdTable from './components/antdTable'; + +const AtdTable: FC = (props) => { + + return +}; + +export default AtdTable; diff --git a/src/store/CalculateStore.ts b/src/store/CalculateStore.ts new file mode 100644 index 0000000..85688b8 --- /dev/null +++ b/src/store/CalculateStore.ts @@ -0,0 +1,17 @@ +import { action, makeObservable, observable } from "mobx"; + +export class CalculateStore { + constructor() { + makeObservable(this); + } + + @observable + showOperatePermission: boolean = false; + + @action + setgPermission = (permission: boolean) => { + this.showOperatePermission = permission; + }; +} + +export const calculateStore = new CalculateStore(); diff --git a/src/store/index.js b/src/store/index.js index 0fc222f..0f781a5 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,9 +1,11 @@ -import { appStore } from './AppStore'; -import { baseLayoutStore } from '@/layouts/BaseLayout/Store'; +import { appStore } from "./AppStore"; +import { calculateStore } from "./CalculateStore"; +import { baseLayoutStore } from "@/layouts/BaseLayout/Store"; -export { baseLayoutStore, appStore }; +export { baseLayoutStore, appStore, calculateStore }; export default { baseLayoutStore, - appStore, + calculateStore, + appStore }; diff --git a/src/utils/common.js b/src/utils/common.js index 8ff3270..13c0b0e 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -2,16 +2,15 @@ * 上传地址 * @returns {*} */ -import config from '@/config'; -import { Session } from '../utils'; -import _ from 'lodash'; +import config from "@/config"; +import { Session } from "../utils"; /** * 上传成功返回详情信息 * @returns {string} */ export const uploadURLReturnDetail = () => { - return config.get('file/uploadReturnDetail'); + return config.get("file/uploadReturnDetail"); }; /** @@ -19,7 +18,7 @@ export const uploadURLReturnDetail = () => { * @returns {string} */ export const uploadURLReturnId = () => { - return config.get('file/uploadReturnId'); + return config.get("file/uploadReturnId"); }; /** @@ -29,7 +28,7 @@ export const uploadURLReturnId = () => { */ export const downloadURL = (fileId) => { const token = Session.getAccessToken() || Session.getRefreshToken(); - return config.get('file/download') + '/' + fileId + `?access_token=${token}`; + return config.get("file/download") + "/" + fileId + `?access_token=${token}`; }; /** @@ -39,7 +38,7 @@ export const downloadURL = (fileId) => { */ export const viewImg = (fileId) => { const token = Session.getAccessToken() || Session.getRefreshToken(); - return config.get('file/viewImg') + '/' + fileId + `?access_token=${token}`; + return config.get("file/viewImg") + "/" + fileId + `?access_token=${token}`; }; /** @@ -47,5 +46,38 @@ export const viewImg = (fileId) => { * @returns {string} */ export const getPicSuffix = () => { - return config.get('picSuffix'); + return config.get("picSuffix"); +}; + +/** + * 判断是否为JSON字符串 + * @returns {string} + */ +export const exceptStr = (str) => { + try { + return JSON.parse(str); + } catch (err) { + return {}; + } +}; + +export const paginationFun = (tableListPageObj, sizeChange, onChange) => { + return { + current: tableListPageObj.pageNum, + pageSize: tableListPageObj.size, + total: tableListPageObj.total, + showTotal: (total) => `共 ${total} 条`, + showQuickJumper: true, + showSizeChanger: true, + pageSizeOptions: ["10", "20", "50", "100"], + onShowSizeChange: () => sizeChange(), + onChange: (page, size) => { + const { total } = tableListPageObj; + onChange({ + pageNum: page, + size, + total, + }); + }, + }; };