diff --git a/src/global.less b/src/global.less index de3e0f1..6b69bce 100644 --- a/src/global.less +++ b/src/global.less @@ -1,64 +1,77 @@ -html, -body, -#root { - height: 100%; - margin: 0; - padding: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', - 'Noto Color Emoji'; -} - -.colorWeak { - filter: invert(80%); -} - -.ant-layout { - min-height: 100vh !important; -} - -.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed { - left: unset; -} -.ant-table-row { - &-level-1 .ant-table-cell:first-child { - padding-left: 24px !important; - } - &-level-2 .ant-table-cell:first-child { - padding-left: 48px !important; - } - // 可根据需要添加更多层级 -} -canvas { - display: block; -} - -body { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -ul, -ol { - list-style: none; -} - -@media (max-width: 768px) { - .ant-table { - width: 100%; - overflow-x: auto; - - &-thead > tr, - &-tbody > tr { - > th, - > td { - white-space: pre; - - > span { - display: block; - } - } - } - } -} +html, +body, +#root { + height: 100%; + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; +} + +.colorWeak { + filter: invert(80%); +} + +.ant-layout { + min-height: 100vh !important; +} + +.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed { + left: unset; +} +.ant-table-cell .ant-table-row-expand-icon { + vertical-align: middle; + margin-right: 8px; +} +.ant-table-row { + &-level-0 .ant-table-cell:first-child { + padding-left: 16px !important; + } + &-level-1 .ant-table-cell:first-child { + padding-left: 40px !important; + } + &-level-2 .ant-table-cell:first-child { + padding-left: 64px !important; + } +} +.ant-table-row .ant-table-cell:first-child { + display: flex; + align-items: center; +} +.ant-table-row-level-2 .ant-table-row-expand-icon { + display: none; +} +canvas { + display: block; +} + +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +ul, +ol { + list-style: none; +} + +@media (max-width: 768px) { + .ant-table { + width: 100%; + overflow-x: auto; + + &-thead > tr, + &-tbody > tr { + > th, + > td { + white-space: pre; + + > span { + display: block; + } + } + } + } +} diff --git a/src/pages/Classify/Industry/edit.tsx b/src/pages/Classify/Industry/edit.tsx index e9e39b5..bcaffd0 100644 --- a/src/pages/Classify/Industry/edit.tsx +++ b/src/pages/Classify/Industry/edit.tsx @@ -1,189 +1,190 @@ -import React, { useEffect } from 'react'; -import { - ModalForm, - ProForm, - ProFormDigit, - ProFormRadio, - ProFormTreeSelect, - ProFormText, - ProDescriptions, -} from '@ant-design/pro-components'; -import { Form } from 'antd'; -import { DictValueEnumObj } from '@/components/DictTag'; -import { FormattedMessage } from '@@/exports'; -import { getCmsIndustryTreeList } from '@/services/classify/industry'; // 修改导入为 getCmsIndustryTreeList - -interface IndustryDetail { - id?: number; - industryName?: string; - orderNum?: number; - status?: string; - parentId?: number; - parentName?: string; -} - -export type ListFormProps = { - onCancel: (flag?: boolean, formVars?: unknown) => void; - onSubmit: (values: any) => Promise; - open: boolean; - values?: Partial; - industryStatusEnum: DictValueEnumObj; - mode?: 'view' | 'edit' | 'create'; -}; - -const listEdit: React.FC = (props) => { - const [form] = Form.useForm(); - const { industryStatusEnum, mode = props.values ? 'edit' : 'create', values } = props; - - useEffect(() => { - form.resetFields(); - if (values) { - form.setFieldsValue({ - ...values, - parentId: values?.parentId ?? 0 - }); - } - }, [form, values?.id]); - - const getSafeDetailData = (data?: Partial): IndustryDetail => { - return { - id: data?.id ?? 0, - industryName: data?.industryName ?? '', - orderNum: data?.orderNum ?? 0, - parentId: data?.parentId ?? 0, - parentName: data?.parentName ?? '顶级节点', - status: data?.status ?? '0', - }; - }; - - const handleCancel = () => { - props.onCancel(); - form.resetFields(); - }; - - const handleFinish = async (values: Record) => { - const submitValues = { - ...values, - parentId: values.parentId === 0 ? undefined : values.parentId - }; - props.onSubmit(submitValues); - }; - - // 获取行业树数据 - const fetchIndustryTree = async () => { - const res = await getCmsIndustryTreeList(); - return [ - { - id: 0, - label: '顶级节点', - value: 0, - children: res.data || [] - } - ]; - }; - - if (mode === 'view') { - return ( - handleCancel(), - footer: null, - }} - submitter={false} - > - - column={1} - dataSource={getSafeDetailData(values)} - loading={!values} - > - - - - record.parentId === 0 ? '顶级节点' : text} - /> - - - - ); - } - - return ( - handleCancel(), - }} - submitTimeout={2000} - onFinish={handleFinish} - > - - ); -}; - +import React, { useEffect } from 'react'; +import { + ModalForm, + ProForm, + ProFormDigit, + ProFormRadio, + ProFormTreeSelect, + ProFormText, + ProDescriptions, +} from '@ant-design/pro-components'; +import { Form } from 'antd'; +import { DictValueEnumObj } from '@/components/DictTag'; +import { FormattedMessage } from '@@/exports'; +import { getCmsIndustryTreeList } from '@/services/classify/industry'; // 修改导入为 getCmsIndustryTreeList + +interface IndustryDetail { + id?: number; + industryName?: string; + orderNum?: number; + status?: string; + parentId?: number; + parentName?: string; +} + +export type ListFormProps = { + onCancel: (flag?: boolean, formVars?: unknown) => void; + onSubmit: (values: any) => Promise; + open: boolean; + values?: Partial; + industryStatusEnum: DictValueEnumObj; + mode?: 'view' | 'edit' | 'create'; +}; + +const listEdit: React.FC = (props) => { + const [form] = Form.useForm(); + const { industryStatusEnum, mode = props.values ? 'edit' : 'create', values } = props; + + useEffect(() => { + form.resetFields(); + if (values) { + form.setFieldsValue({ + ...values, + parentId: values?.parentId ?? 0 + }); + } + }, [form, values?.id]); + + const getSafeDetailData = (data?: Partial): IndustryDetail => { + return { + id: data?.id ?? 0, + industryName: data?.industryName ?? '', + orderNum: data?.orderNum ?? 0, + parentId: data?.parentId ?? 0, + parentName: data?.parentName ?? '顶级节点', + status: data?.status ?? '0', + }; + }; + + const handleCancel = () => { + props.onCancel(); + form.resetFields(); + }; + + const handleFinish = async (values: Record) => { + const submitValues = { + ...values, + parentId: values.parentId === 0 ? undefined : values.parentId + }; + props.onSubmit(submitValues); + }; + + // 获取行业树数据 + const fetchIndustryTree = async () => { + const res = await getCmsIndustryTreeList(); + return [ + { + id: 0, + label: '顶级节点', + value: 0, + children: res.data || [] + } + ]; + }; + + if (mode === 'view') { + return ( + handleCancel(), + footer: null, + }} + submitter={false} + > + + column={1} + dataSource={getSafeDetailData(values)} + loading={!values} + > + + + + record.parentId === 0 ? '顶级节点' : text} + /> + + + + ); + } + + return ( + handleCancel(), + }} + submitTimeout={2000} + onFinish={handleFinish} + > + + ); +}; + export default listEdit; \ No newline at end of file diff --git a/src/pages/Classify/Jobs/edit.tsx b/src/pages/Classify/Jobs/edit.tsx index 7095c16..ee8b64c 100644 --- a/src/pages/Classify/Jobs/edit.tsx +++ b/src/pages/Classify/Jobs/edit.tsx @@ -1,159 +1,159 @@ -import React,{ useEffect,useState } from 'react'; -import { - ModalForm, - ProForm, - ProFormDigit, - ProFormText, - ProFormTextArea, - ProFormTreeSelect, - ProFormSelect -} from '@ant-design/pro-components'; -import { Form } from 'antd'; -import { getCmsJobTitleList } from '@/services/classify/jobs'; -import { getDictValueEnum } from '@/services/system/dict'; - - - -// tree -type JobListParams = API.ClassifyJobs.Params; - -export type ListFormProps = { - onCancel: (flag?: boolean, formVals?: unknown) => void; - onSubmit: (values: any) => Promise; - open: boolean; - values?: Partial; - // jobGroupOptions: DictOptionType[]; - // statusOptions: DictValueEnumObj; -}; - -const listEdit: React.FC = (props) => { - const [form] = Form.useForm(); - const [treeData, setTreeData] = useState([]); - const [statusOptions, setStatusOptions] = useState>({}); - const [loading, setLoading] = useState(false); - - const buildTree = (data: API.ClassifyJobs.Job[], parentId: number = 0): API.ClassifyJobs.Job[] => { - return data - .filter(item => item.parentId === parentId) - .map(item => ({ - ...item, - children: buildTree(data, item.jobId), - })); - }; - - useEffect(() => { - const fetchData = async () => { - const res = await getCmsJobTitleList({ - tree: false, - // 明确传递所有必要参数 - pageSize: 1000, // 确保获取全部数据 - current: 1 - } as JobListParams); - setLoading(true); - try { - // 获取状态枚举 - const statusData = await getDictValueEnum('sys_jobs_status', true); - setStatusOptions(statusData); - // 获取岗位数据 - const res = await getCmsJobTitleList({ tree: false } as JobListParams); - console.log('原始数据:', res.rows); - - const treeData = buildTree(res.rows || []); - console.log('转换后的树形数据:', treeData); - setTreeData(treeData); - - // 设置表单初始值 - if (props.values) { - form.setFieldsValue({ - ...props.values, - parentId: props.values.parentId || undefined, - }); - } - } catch (error) { - console.error('数据加载失败:', error); - } finally { - setLoading(false); - } -}; -fetchData(); -}, []); - - const handleCancel = () => { - props.onCancel(); - form.resetFields(); - }; - - - const handleFinish = async (values: Record) => { - await props.onSubmit(values); - }; - - return ( - handleCancel(), - }} - submitTimeout={2000} - onFinish={handleFinish} - > - - ); -}; - -export default listEdit; - - - +import React,{ useEffect,useState } from 'react'; +import { + ModalForm, + ProForm, + ProFormDigit, + ProFormText, + ProFormTextArea, + ProFormTreeSelect, + ProFormSelect +} from '@ant-design/pro-components'; +import { Form } from 'antd'; +import { getCmsJobTitleList } from '@/services/classify/jobs'; +import { getDictValueEnum } from '@/services/system/dict'; + + + +// tree +type JobListParams = API.ClassifyJobs.Params; + +export type ListFormProps = { + onCancel: (flag?: boolean, formVals?: unknown) => void; + onSubmit: (values: any) => Promise; + open: boolean; + values?: Partial; + // jobGroupOptions: DictOptionType[]; + // statusOptions: DictValueEnumObj; +}; + +const listEdit: React.FC = (props) => { + const [form] = Form.useForm(); + const [treeData, setTreeData] = useState([]); + const [statusOptions, setStatusOptions] = useState>({}); + const [loading, setLoading] = useState(false); + + const buildTree = (data: API.ClassifyJobs.Jobs[], parentId: number = 0): API.ClassifyJobs.Jobs[] => { + return data + .filter(item => item.parentId === parentId) + .map(item => ({ + ...item, + children: buildTree(data, item.jobId), + })); + }; + + useEffect(() => { + const fetchData = async () => { + const res = await getCmsJobTitleList({ + tree: false, + // 明确传递所有必要参数 + pageSize: 1000, // 确保获取全部数据 + current: 1 + } as JobListParams); + setLoading(true); + try { + // 获取状态枚举 + const statusData = await getDictValueEnum('sys_jobs_status', true); + setStatusOptions(statusData); + // 获取岗位数据 + const res = await getCmsJobTitleList({ tree: false } as JobListParams); + console.log('原始数据:', res.rows); + + const treeData = buildTree(res.rows || []); + console.log('转换后的树形数据:', treeData); + setTreeData(treeData); + + // 设置表单初始值 + if (props.values) { + form.setFieldsValue({ + ...props.values, + parentId: props.values.parentId || undefined, + }); + } + } catch (error) { + console.error('数据加载失败:', error); + } finally { + setLoading(false); + } +}; +fetchData(); +}, []); + + const handleCancel = () => { + props.onCancel(); + form.resetFields(); + }; + + + const handleFinish = async (values: Record) => { + await props.onSubmit(values); + }; + + return ( + handleCancel(), + }} + submitTimeout={2000} + onFinish={handleFinish} + > + + ); +}; + +export default listEdit; + + + diff --git a/src/pages/Classify/Jobs/index.tsx b/src/pages/Classify/Jobs/index.tsx index a85a6cc..572fb8d 100644 --- a/src/pages/Classify/Jobs/index.tsx +++ b/src/pages/Classify/Jobs/index.tsx @@ -9,34 +9,6 @@ import { exportCmsJobTitleList, getCmsJobTitleList } from '@/services/classify/j import { getDictValueEnum } from '@/services/system/dict'; import DictTag from '@/components/DictTag'; -declare namespace API { - namespace ClassifyJobs { - interface Params { - tree?: boolean; - pageSize?: number; - current?: number; - jobName?: string; - status?: string; - } - - interface Jobs { - jobId: number; - parentId: number; - jobName: string; - orderNum?: number; - status?: string; - createTime?: string; - parentName?: string; - children?: Jobs[]; - depth?: number; // 添加这行 - } - } -} -// params类型 -type JobListParams = API.ClassifyJobs.Params & { - tree?: boolean; -}; - const handleRemoveOne = async (jobId: string) => { const hide = message.loading('正在删除'); if (!jobId) return true; @@ -74,16 +46,14 @@ const buildTree = ( parentId: number = 0, depth = 0, ): API.ClassifyJobs.Jobs[] => { - return data + const children = data .filter((item) => item.parentId === parentId) - .map((item) => { - const child = buildTree(data, item.jobId, depth + 1); - return { - ...item, - depth, - children: child.length ? child : undefined, - }; - }); + .map((item) => ({ + ...item, + depth, + children: buildTree(data, item.jobId, depth + 1), + })); + return children || []; }; const ManagementList: React.FC = () => { @@ -107,13 +77,12 @@ const ManagementList: React.FC = () => { title: '岗位名称', dataIndex: 'jobName', - align: 'center', + align: 'left', render: (text, record) => ( {text} @@ -144,67 +113,22 @@ const ManagementList: React.FC = () => { return ; }, }, - // { - // title: '操作', - // hideInSearch: true, - // align: 'center', - // dataIndex: 'jobId', - // width: 300, - // render: (_, record) => [ - // , - // // , - // ], - // }, ]; return (
- // params 是需要自带的参数 - // 这个参数优先级更高，会覆盖查询表单的参数 actionRef={actionRef} formRef={formTableRef} rowKey="jobId" key="index" columns={columns} + expandable={{ + childrenColumnName: 'children', + defaultExpandAllRows: true, + indentSize: 24, + rowExpandable: (record) => Array.isArray(record.children) && record.children.length > 0, + }} search={{ labelWidth: 120, }} @@ -215,7 +139,6 @@ const ManagementList: React.FC = () => { pageSize: 1000, }); const treeData = buildTree(res.rows); - console.log('完整树形结构:', JSON.stringify(treeData, null, 2)); return { data: treeData, total: res.total, @@ -223,12 +146,6 @@ const ManagementList: React.FC = () => { }; }} pagination={false} - expandable={{ - childrenColumnName: 'children', - defaultExpandAllRows: true, - indentSize: 30, - rowExpandable: (record) => !!record.children?.length, - }} toolBarRender={() => [