feat(模块): 添加了个很棒的功能
This commit is contained in:
parent
c6da1f9557
commit
bf17f9f44b
@ -44,6 +44,11 @@ export default [
|
|||||||
path: '/examine/record',
|
path: '/examine/record',
|
||||||
name: '考核记录管理',
|
name: '考核记录管理',
|
||||||
component: "@/pages/examine/record/index",
|
component: "@/pages/examine/record/index",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/examine/recordSummary',
|
||||||
|
name: '考核记录汇总',
|
||||||
|
component: "@/pages/examine/recordSummary/index",
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,11 +1,4 @@
|
|||||||
/*
|
|
||||||
* @Author: cclu 1106109051@qq.com
|
|
||||||
* @Date: 2025-02-27 15:55:46
|
|
||||||
* @LastEditors: cclu 1106109051@qq.com
|
|
||||||
* @LastEditTime: 2025-03-10 17:46:55
|
|
||||||
* @FilePath: \umi4-admin-main\src\layouts\index.tsx
|
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
||||||
*/
|
|
||||||
import type { FC } from 'react';
|
import type { FC } from 'react';
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { Dropdown, Layout, Menu, Tabs, Tooltip } from 'antd';
|
import { Dropdown, Layout, Menu, Tabs, Tooltip } from 'antd';
|
||||||
@ -201,6 +194,13 @@ const BasicLayout: FC<{ user: UserModelState, global: ProfileModelState, dispatc
|
|||||||
name: "考核记录管理",
|
name: "考核记录管理",
|
||||||
path: "/examine/record",
|
path: "/examine/record",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
SYSTEMMODULE_DESC: "",
|
||||||
|
guid: "7",
|
||||||
|
hideInMenu: false,
|
||||||
|
name: "考核记录汇总",
|
||||||
|
path: "/examine/recordSummary",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
SYSTEMMODULE_DESC: "",
|
SYSTEMMODULE_DESC: "",
|
||||||
guid: "6",
|
guid: "6",
|
||||||
|
|||||||
@ -242,7 +242,13 @@ const UserModel: UserModelType = {
|
|||||||
path: '/examine/record',
|
path: '/examine/record',
|
||||||
name: '考核记录管理',
|
name: '考核记录管理',
|
||||||
component: "@/pages/examine/record",
|
component: "@/pages/examine/record",
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/examine/recordSummary',
|
||||||
|
name: '考核记录汇总',
|
||||||
|
component: "@/pages/examine/recordSummary",
|
||||||
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -289,7 +295,8 @@ const UserModel: UserModelType = {
|
|||||||
'/examine/modal',
|
'/examine/modal',
|
||||||
'/examine/question',
|
'/examine/question',
|
||||||
'/examine/record',
|
'/examine/record',
|
||||||
'/setting/menu'
|
'/setting/menu',
|
||||||
|
'/examine/recordSummary'
|
||||||
],
|
],
|
||||||
rootSubmenuKeys: handleGetRootSubmenuKeys(menuRes.data),
|
rootSubmenuKeys: handleGetRootSubmenuKeys(menuRes.data),
|
||||||
indexAllMenuItemById: handleGetEachDatumFromNestedDataByKey(menuRes.data, 'id'),
|
indexAllMenuItemById: handleGetEachDatumFromNestedDataByKey(menuRes.data, 'id'),
|
||||||
|
|||||||
@ -14,6 +14,9 @@ const authority: PageAuthority = {
|
|||||||
'/examine/record': [
|
'/examine/record': [
|
||||||
'/examine/record',
|
'/examine/record',
|
||||||
],
|
],
|
||||||
|
'/examine/recordSummary': [
|
||||||
|
'/examine/recordSummary',
|
||||||
|
],
|
||||||
'/setting/menu': ['/setting/menu']
|
'/setting/menu': ['/setting/menu']
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -481,7 +481,7 @@ const examineModal: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
|
|
||||||
const fileData = await handleUploadFile(formData)
|
const fileData = await handleUploadFile(formData)
|
||||||
console.log('fileData', fileData);
|
console.log('fileData', fileData);
|
||||||
let imgUrl: string = `https://es.robot-z.cn/${fileData.data.path}`
|
let imgUrl: string = `https://es.eshangtech.com/${fileData.data.path}`
|
||||||
await handleUpdateTemplates({
|
await handleUpdateTemplates({
|
||||||
...data.data,
|
...data.data,
|
||||||
qrUrl: imgUrl
|
qrUrl: imgUrl
|
||||||
|
|||||||
@ -536,33 +536,51 @@ const RecordDetail = ({ parentRow, show, detailType, currentUser, onRef, showErr
|
|||||||
readonly
|
readonly
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={16}>
|
|
||||||
<ProFormList
|
{
|
||||||
label={"附件列表"}
|
formRes?.imgsList && formRes?.imgsList.length > 0 ?
|
||||||
name={"imgsList"}
|
<Col span={24}>
|
||||||
copyIconProps={false}
|
<div style={{ width: "100%", height: '170px', overflowX: "auto", display: 'flex', alignItems: 'center' }}>
|
||||||
deleteIconProps={false}
|
{
|
||||||
readonly
|
formRes?.imgsList && formRes?.imgsList.length > 0 ?
|
||||||
style={{ width: '100%' }}
|
formRes?.imgsList.map((item: string) => {
|
||||||
itemContainerStyle={{ width: '100%' }}
|
return <Image key={item} style={{ width: "150px", height: "150px", marginRight: "12px" }} src={item} />
|
||||||
itemRender={({ listDom, action }, { record, index }) => (
|
})
|
||||||
<div style={{ width: '100%', display: 'flex', alignItems: 'flex-start', marginBottom: '10px' }}>
|
: ''
|
||||||
<div style={{ flex: 1, width: '100%' }}>{listDom}</div>
|
}
|
||||||
<div style={{ marginLeft: '8px', marginTop: '30px' }}>{action}</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</Col>
|
||||||
>
|
|
||||||
<div style={{ width: "300px", height: '170px', overflowX: "auto", display: 'flex', alignItems: 'center' }}>
|
// <Col span={16}>
|
||||||
{
|
// <ProFormList
|
||||||
formRes?.imgsList && formRes?.imgsList.length > 0 ?
|
// label={"附件列表"}
|
||||||
formRes?.imgsList.map((item: string) => {
|
// name={"imgsList"}
|
||||||
return <Image style={{ width: "150px", height: "150px", marginRight: "12px" }} src={item} />
|
// copyIconProps={false}
|
||||||
})
|
// deleteIconProps={false}
|
||||||
: ''
|
// readonly
|
||||||
}
|
// alwaysShowItemLabel
|
||||||
</div>
|
// style={{ width: '100%' }}
|
||||||
</ProFormList>
|
// itemContainerStyle={{ width: '100%' }}
|
||||||
</Col>
|
// itemRender={({ listDom, action }, { record, index }) => (
|
||||||
|
// <div style={{ width: '100%', display: 'flex', alignItems: 'flex-start', marginBottom: '10px' }}>
|
||||||
|
// <div style={{ flex: 1, width: '100%' }}>{listDom}</div>
|
||||||
|
// <div style={{ marginLeft: '8px', marginTop: '30px' }}>{action}</div>
|
||||||
|
// </div>
|
||||||
|
// )}
|
||||||
|
// >
|
||||||
|
// <div style={{ width: "300px", height: '170px', overflowX: "auto", display: 'flex', alignItems: 'center' }}>
|
||||||
|
// {
|
||||||
|
// formRes?.imgsList && formRes?.imgsList.length > 0 ?
|
||||||
|
// formRes?.imgsList.map((item: string) => {
|
||||||
|
// return <Image key={item} style={{ width: "150px", height: "150px", marginRight: "12px" }} src={item} />
|
||||||
|
// })
|
||||||
|
// : ''
|
||||||
|
// }
|
||||||
|
// </div>
|
||||||
|
// </ProFormList>
|
||||||
|
// </Col>
|
||||||
|
: ""
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -39,22 +39,29 @@ const examineRecord: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
title: "统计日期",
|
title: "统计日期",
|
||||||
dataIndex: "staticDate",
|
dataIndex: "staticDate",
|
||||||
hideInTable: true,
|
hideInTable: true,
|
||||||
valueType: "dateRange",
|
valueType: "date",
|
||||||
initialValue: [moment().startOf('M'), moment()],
|
initialValue: moment().subtract('1', 'd'),
|
||||||
search: {
|
|
||||||
transform: (value: any) => {
|
|
||||||
return {
|
|
||||||
startTime: moment(value[0]).format('YYYY-MM-DD'),
|
|
||||||
endTime: moment(value[1]).format('YYYY-MM-DD')
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fieldProps: {
|
|
||||||
picker: "day",
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
// title: "统计日期",
|
||||||
|
// dataIndex: "staticDate",
|
||||||
|
// hideInTable: true,
|
||||||
|
// valueType: "dateRange",
|
||||||
|
// initialValue: [moment().startOf('M'), moment()],
|
||||||
|
// search: {
|
||||||
|
// transform: (value: any) => {
|
||||||
|
// return {
|
||||||
|
// startTime: moment(value[0]).format('YYYY-MM-DD'),
|
||||||
|
// endTime: moment(value[1]).format('YYYY-MM-DD')
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// fieldProps: {
|
||||||
|
// picker: "day",
|
||||||
|
// format: 'YYYY-MM-DD',
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
// title: "服务区",
|
// title: "服务区",
|
||||||
// dataIndex: "serverPartId",
|
// dataIndex: "serverPartId",
|
||||||
// hideInTable: true,
|
// hideInTable: true,
|
||||||
@ -289,7 +296,7 @@ const examineRecord: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
expandRowByClick: true
|
expandRowByClick: true
|
||||||
}}
|
}}
|
||||||
rowKey={(record) => {
|
rowKey={(record) => {
|
||||||
return `${record?.id}`
|
return `${record?.id}-${record?.code}`
|
||||||
}}
|
}}
|
||||||
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
||||||
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>考核记录管理</span>}
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>考核记录管理</span>}
|
||||||
@ -304,8 +311,8 @@ const examineRecord: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
|
|
||||||
const req: any = {
|
const req: any = {
|
||||||
serverPartIds: selectedId && selectedId.length > 0 ? selectedId : [],
|
serverPartIds: selectedId && selectedId.length > 0 ? selectedId : [],
|
||||||
startTime: params?.startTime ? `${params?.startTime}T00:00:00` : "",
|
startTime: params?.staticDate ? `${params?.staticDate}T00:00:00` : "",
|
||||||
endTime: params?.endTime ? `${params?.endTime}T23:59:59` : "",
|
endTime: params?.staticDate ? `${params?.staticDate}T23:59:59` : "",
|
||||||
// serverPartId: params?.serverPartId ? params?.serverPartId : undefined,
|
// serverPartId: params?.serverPartId ? params?.serverPartId : undefined,
|
||||||
extend: params?.inspectionType ? [{
|
extend: params?.inspectionType ? [{
|
||||||
key: "situation",
|
key: "situation",
|
||||||
|
|||||||
602
src/pages/examine/recordSummary/index.tsx
Normal file
602
src/pages/examine/recordSummary/index.tsx
Normal file
@ -0,0 +1,602 @@
|
|||||||
|
import { ConnectState } from "@/models/global";
|
||||||
|
import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
|
||||||
|
import { useRef, useState } from "react";
|
||||||
|
import { connect } from "umi";
|
||||||
|
import moment from "moment";
|
||||||
|
import { Button, Drawer, Image, message, Popconfirm, Space } from "antd";
|
||||||
|
import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree";
|
||||||
|
import { handleGetRecordTreeList } from "../record/service";
|
||||||
|
|
||||||
|
const recordSummary: React.FC<{ currentUser: any }> = (props) => {
|
||||||
|
const { currentUser } = props
|
||||||
|
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
const formRef = useRef<FormInstance>();
|
||||||
|
|
||||||
|
const drawerActionRef = useRef<ActionType>();
|
||||||
|
const drawerFormRef = useRef<FormInstance>();
|
||||||
|
const recordDetailRef = useRef<any>()
|
||||||
|
// 显示的附件数据
|
||||||
|
const [showImgList, setShowImgList] = useState<string[]>([])
|
||||||
|
// 预览图片
|
||||||
|
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false)
|
||||||
|
// 预览的索引
|
||||||
|
const [previewIndex, setPreviewIndex] = useState<number>(0)
|
||||||
|
// 当行数据
|
||||||
|
const [currentRow, setCurrentRow] = useState<any>()
|
||||||
|
// 显示详情抽屉
|
||||||
|
const [showDetail, setShowDetail] = useState<boolean>(false)
|
||||||
|
// 显示类型 1 巡查次数 2 正常 3 异常 4 待处理 5 处理中 6 已处理
|
||||||
|
const [showType, setShowType] = useState<number>(0)
|
||||||
|
// 外侧表格的搜索条件
|
||||||
|
const [searchParams, setSearchParams] = useState<any>()
|
||||||
|
|
||||||
|
// 判断是否点了出现的是异常处理的抽屉
|
||||||
|
const [showAbnormal, setShowAbnormal] = useState<boolean>(false)
|
||||||
|
// 树相关的属性和方法
|
||||||
|
const [selectedId, setSelectedId] = useState<string[]>()
|
||||||
|
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||||||
|
score: { show: false }
|
||||||
|
})
|
||||||
|
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||||||
|
|
||||||
|
const columns: any = [
|
||||||
|
{
|
||||||
|
title: "统计日期",
|
||||||
|
dataIndex: "staticDate",
|
||||||
|
hideInTable: true,
|
||||||
|
valueType: "dateRange",
|
||||||
|
initialValue: [moment().startOf('M'), moment()],
|
||||||
|
search: {
|
||||||
|
transform: (value: any) => {
|
||||||
|
return {
|
||||||
|
startTime: moment(value[0]).startOf('m').format('YYYY-MM-DD'),
|
||||||
|
endTime: moment(value[1]).format('YYYY-MM-DD')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fieldProps: {
|
||||||
|
picker: "day",
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>服务区名称</div>,
|
||||||
|
dataIndex: "serverPartName",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.type === 'district' || record?.type === 'servicePart' ? record?.name :
|
||||||
|
record?.template ? record?.template.title : "-"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查次数</div>,
|
||||||
|
dataIndex: "inspectionNumber",
|
||||||
|
align: 'center',
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.template?.id && record?.inspectionNumber > 0 ? <a onClick={() => {
|
||||||
|
setCurrentRow(record)
|
||||||
|
setShowType(1)
|
||||||
|
setShowDetail(true)
|
||||||
|
}}>
|
||||||
|
{record?.inspectionNumber || '-'}
|
||||||
|
</a> : <span>{record?.inspectionNumber || '-'}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>正常</div>,
|
||||||
|
dataIndex: "normalNumber",
|
||||||
|
align: 'center',
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.template?.id && record?.normalNumber > 0 ? <a onClick={() => {
|
||||||
|
setCurrentRow(record)
|
||||||
|
setShowType(2)
|
||||||
|
setShowDetail(true)
|
||||||
|
}}>
|
||||||
|
{record?.normalNumber || '-'}
|
||||||
|
</a> : <span>{record?.normalNumber || '-'}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>异常</div>,
|
||||||
|
dataIndex: "errorNumber",
|
||||||
|
align: 'center',
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.template?.id && record?.errorNumber > 0 ? <a onClick={() => {
|
||||||
|
setCurrentRow(record)
|
||||||
|
setShowType(3)
|
||||||
|
setShowDetail(true)
|
||||||
|
}}>
|
||||||
|
{record?.errorNumber || '-'}
|
||||||
|
</a> : <span>{record?.errorNumber || '-'}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>待处理</div>,
|
||||||
|
dataIndex: "pendingProcessNumber",
|
||||||
|
align: 'center',
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.template?.id && record?.pendingProcessNumber > 0 ? <a onClick={() => {
|
||||||
|
setCurrentRow(record)
|
||||||
|
setShowType(4)
|
||||||
|
setShowDetail(true)
|
||||||
|
}}>
|
||||||
|
{record?.pendingProcessNumber || '-'}
|
||||||
|
</a> : <span>{record?.pendingProcessNumber || '-'}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>处理中</div>,
|
||||||
|
dataIndex: "processingNumber",
|
||||||
|
align: 'center',
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.template?.id && record?.processingNumber > 0 ? <a onClick={() => {
|
||||||
|
setCurrentRow(record)
|
||||||
|
setShowType(5)
|
||||||
|
setShowDetail(true)
|
||||||
|
}}>
|
||||||
|
{record?.processingNumber || '-'}
|
||||||
|
</a> : <span>{record?.processingNumber || '-'}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>已处理</div>,
|
||||||
|
dataIndex: "processedNumber",
|
||||||
|
align: 'center',
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.template?.id && record?.processedNumber > 0 ? <a onClick={() => {
|
||||||
|
setCurrentRow(record)
|
||||||
|
setShowType(6)
|
||||||
|
setShowDetail(true)
|
||||||
|
}}>
|
||||||
|
{record?.processedNumber || '-'}
|
||||||
|
</a> : <span>{record?.processedNumber || '-'}</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const drawerColumns: any = [
|
||||||
|
// {
|
||||||
|
// title: "巡查类型",
|
||||||
|
// dataIndex: "inspectionType",
|
||||||
|
// hideInTable: true,
|
||||||
|
// valueType: "select",
|
||||||
|
// valueEnum: {
|
||||||
|
// "1": '异常',
|
||||||
|
// "0": "正常"
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>服务区名称</div>,
|
||||||
|
dataIndex: "serverPartName",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.type === 'district' || record?.type === 'servicePart' ? record?.name :
|
||||||
|
record?.template ? record?.template.title : "-"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查类型</div>,
|
||||||
|
dataIndex: "placeName",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 100,
|
||||||
|
align: 'center',
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
let res: any = record.extend ? JSON.parse(record.extend) : "-"
|
||||||
|
return <span style={{ color: res.situation === 1 ? "red" : "" }}>{res.situation === 1 ? '异常' : res.situation === 0 ? '正常' : ''}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查内容</div>,
|
||||||
|
dataIndex: "uploadResult",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 200,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
let extendObj = record?.extend ? JSON.parse(record?.extend) : ""
|
||||||
|
return extendObj?.uploadResult ? extendObj?.uploadResult : "-"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查结果</div>,
|
||||||
|
dataIndex: "uploadResult",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 350,
|
||||||
|
ellipsis: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
let str: string = ''
|
||||||
|
if (record?.questionResponses && record?.questionResponses.length > 0) {
|
||||||
|
record?.questionResponses.forEach((item: any, index: number) => {
|
||||||
|
let anwers: string = ''
|
||||||
|
if (item.choiceResponse && item.choiceResponse.length > 0) {
|
||||||
|
item.choiceResponse.forEach((subItem: string, subIndex: number) => {
|
||||||
|
anwers += `${subIndex > 0 ? '，' : ''}${subItem}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
str += `${index > 0 ? '，' : ''}考核内容：${item.question.title}，考核结果：${anwers}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return str || ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查总分</div>,
|
||||||
|
dataIndex: "score",
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'digit',
|
||||||
|
width: 100,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查时间</div>,
|
||||||
|
dataIndex: "createdAt",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center',
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.createdAt ? moment(record?.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>巡查人</div>,
|
||||||
|
dataIndex: "userName",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 100,
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>处理状态</div>,
|
||||||
|
dataIndex: "errorStatus",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 100,
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center',
|
||||||
|
render: (_, record) => {
|
||||||
|
let res: any = record.extend ? JSON.parse(record.extend) : "-"
|
||||||
|
return <span style={{ color: res.errorStatus === 0 ? "red" : res.errorStatus === 1 ? "#1677ff" : "" }}>{
|
||||||
|
res.errorStatus === 0
|
||||||
|
? "待处理"
|
||||||
|
: res.errorStatus === 1
|
||||||
|
? "处理中"
|
||||||
|
: res.errorStatus === 2
|
||||||
|
? "已处理"
|
||||||
|
: "-"
|
||||||
|
}</span>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>现场图片</div>,
|
||||||
|
dataIndex: "placeName",
|
||||||
|
hideInSearch: true,
|
||||||
|
width: 150,
|
||||||
|
ellipsis: true,
|
||||||
|
align: 'center',
|
||||||
|
render: (_, record) => {
|
||||||
|
let extendObj = record?.extend ? JSON.parse(record?.extend) : ""
|
||||||
|
let imgList = extendObj.imgsList
|
||||||
|
return imgList && imgList.length > 0 ?
|
||||||
|
<Button type="primary" onClick={() => {
|
||||||
|
setShowImgList(imgList)
|
||||||
|
setImagePreviewVisible(true)
|
||||||
|
}}>查看附件</Button> : "-"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||||||
|
<LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} currentUser={currentUser} />
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||||||
|
// width: "100%",
|
||||||
|
paddingTop: 0,
|
||||||
|
paddingBottom: 0,
|
||||||
|
paddingRight: 0
|
||||||
|
}}>
|
||||||
|
<ProTable
|
||||||
|
actionRef={actionRef}
|
||||||
|
formRef={formRef}
|
||||||
|
columns={columns}
|
||||||
|
bordered
|
||||||
|
expandable={{
|
||||||
|
expandRowByClick: true,
|
||||||
|
defaultExpandAllRows: true
|
||||||
|
}}
|
||||||
|
rowKey={(record) => {
|
||||||
|
return `${record?.id}-${record?.code}`
|
||||||
|
}}
|
||||||
|
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
||||||
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>考核记录汇总</span>}
|
||||||
|
search={{ span: 6 }}
|
||||||
|
request={async (params) => {
|
||||||
|
if (!(selectedId && selectedId.length > 0)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const req: any = {
|
||||||
|
serverPartIds: selectedId && selectedId.length > 0 ? selectedId : [],
|
||||||
|
startTime: params?.startTime ? `${params?.startTime}T00:00:00` : "",
|
||||||
|
endTime: params?.endTime ? `${params?.endTime}T23:59:59` : "",
|
||||||
|
// serverPartId: params?.serverPartId ? params?.serverPartId : undefined,
|
||||||
|
extend: params?.inspectionType ? [{
|
||||||
|
key: "situation",
|
||||||
|
value: params?.inspectionType
|
||||||
|
}] : undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
setSearchParams(params)
|
||||||
|
|
||||||
|
console.log('req', req);
|
||||||
|
const data = await handleGetRecordTreeList(req)
|
||||||
|
console.log('dat3a333', data);
|
||||||
|
|
||||||
|
// 处理一下 根据第三层的实际巡查记录 汇总到第二层来
|
||||||
|
if (data && data.length > 0) {
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
item.children.forEach((subItem: any) => {
|
||||||
|
if (subItem.children && subItem.children.length > 0) {
|
||||||
|
// 点位的id数据 肯定要求不重复的
|
||||||
|
let templateIdList: number[] = []
|
||||||
|
// 遍历完之后 要替换的
|
||||||
|
let newChildren: any = []
|
||||||
|
|
||||||
|
subItem.children.forEach((thirdItem: any) => {
|
||||||
|
let extendObj: any = {}
|
||||||
|
if (thirdItem.extend) {
|
||||||
|
extendObj = JSON.parse(thirdItem.extend)
|
||||||
|
}
|
||||||
|
if (templateIdList.indexOf(thirdItem.template.id) === -1) {
|
||||||
|
templateIdList.push(thirdItem.template.id)
|
||||||
|
// 没有过的点位数据 就给他默认值
|
||||||
|
newChildren.push({
|
||||||
|
template: thirdItem.template,
|
||||||
|
inspectionNumber: 1,
|
||||||
|
normalNumber: extendObj?.situation === 0 ? 1 : 0,
|
||||||
|
errorNumber: extendObj?.situation === 1 ? 1 : 0,
|
||||||
|
pendingProcessNumber: extendObj?.errorStatus === 0 ? 1 : 0,
|
||||||
|
processingNumber: extendObj?.errorStatus === 1 ? 1 : 0,
|
||||||
|
processedNumber: extendObj?.errorStatus === 2 ? 1 : 0,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 如果已经有过了的点位 给他加当前的状态就好
|
||||||
|
if (newChildren && newChildren.length > 0) {
|
||||||
|
newChildren.forEach((fourthItem: any) => {
|
||||||
|
if (fourthItem.template.id === thirdItem.template.id) {
|
||||||
|
fourthItem.inspectionNumber += 1
|
||||||
|
if (extendObj?.situation === 0) {
|
||||||
|
fourthItem.normalNumber += 1
|
||||||
|
} else if (extendObj?.situation === 1) {
|
||||||
|
fourthItem.errorNumber += 1
|
||||||
|
}
|
||||||
|
|
||||||
|
if (extendObj?.errorStatus === 0) {
|
||||||
|
fourthItem.pendingProcessNumber += 1
|
||||||
|
} else if (extendObj?.errorStatus === 1) {
|
||||||
|
fourthItem.processingNumber += 1
|
||||||
|
} else if (extendObj?.errorStatus === 2) {
|
||||||
|
fourthItem.processedNumber += 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
subItem.children = newChildren
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
let inspectionNumberItemSum: number = 0
|
||||||
|
let normalNumberItemSum: number = 0
|
||||||
|
let errorNumberItemSum: number = 0
|
||||||
|
let pendingProcessNumberItemSum: number = 0
|
||||||
|
let processingNumberItemSum: number = 0
|
||||||
|
let processedNumberItemSum: number = 0
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
item.children.forEach((subItem: any) => {
|
||||||
|
let inspectionNumberSum: number = 0
|
||||||
|
let normalNumberSum: number = 0
|
||||||
|
let errorNumberSum: number = 0
|
||||||
|
let pendingProcessNumberSum: number = 0
|
||||||
|
let processingNumberSum: number = 0
|
||||||
|
let processedNumberSum: number = 0
|
||||||
|
if (subItem.children && subItem.children.length > 0) {
|
||||||
|
subItem.children.forEach((thirdItem: any) => {
|
||||||
|
inspectionNumberSum += thirdItem.inspectionNumber
|
||||||
|
normalNumberSum += thirdItem.normalNumber
|
||||||
|
errorNumberSum += thirdItem.errorNumber
|
||||||
|
pendingProcessNumberSum += thirdItem.pendingProcessNumber
|
||||||
|
processingNumberSum += thirdItem.processingNumber
|
||||||
|
processedNumberSum += thirdItem.processedNumber
|
||||||
|
})
|
||||||
|
}
|
||||||
|
subItem.inspectionNumber = inspectionNumberSum
|
||||||
|
subItem.normalNumber = normalNumberSum
|
||||||
|
subItem.errorNumber = errorNumberSum
|
||||||
|
subItem.pendingProcessNumber = pendingProcessNumberSum
|
||||||
|
subItem.processingNumber = processingNumberSum
|
||||||
|
subItem.processedNumber = processedNumberSum
|
||||||
|
|
||||||
|
inspectionNumberItemSum += subItem.inspectionNumber
|
||||||
|
normalNumberItemSum += subItem.normalNumber
|
||||||
|
errorNumberItemSum += subItem.errorNumber
|
||||||
|
pendingProcessNumberItemSum += subItem.pendingProcessNumber
|
||||||
|
processingNumberItemSum += subItem.processingNumber
|
||||||
|
processedNumberItemSum += subItem.processedNumber
|
||||||
|
})
|
||||||
|
item.inspectionNumber = inspectionNumberItemSum
|
||||||
|
item.normalNumber = normalNumberItemSum
|
||||||
|
item.errorNumber = errorNumberItemSum
|
||||||
|
item.pendingProcessNumber = pendingProcessNumberItemSum
|
||||||
|
item.processingNumber = processingNumberItemSum
|
||||||
|
item.processedNumber = processedNumberItemSum
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log('resresres', data);
|
||||||
|
|
||||||
|
|
||||||
|
if (data && data.length > 0) {
|
||||||
|
return { data, success: true }
|
||||||
|
}
|
||||||
|
return { data: [], success: true }
|
||||||
|
}}
|
||||||
|
toolbar={{
|
||||||
|
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
value: columnsStateMap,
|
||||||
|
onChange: setColumnsStateMap,
|
||||||
|
}}
|
||||||
|
|
||||||
|
>
|
||||||
|
</ProTable>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{
|
||||||
|
showImgList && showImgList.length > 0 && <div style={{ display: 'none' }}>
|
||||||
|
|
||||||
|
<Image.PreviewGroup
|
||||||
|
|
||||||
|
preview={{
|
||||||
|
visible: imagePreviewVisible,
|
||||||
|
onVisibleChange: vis => {
|
||||||
|
setImagePreviewVisible(vis)
|
||||||
|
},
|
||||||
|
current: previewIndex
|
||||||
|
}}>
|
||||||
|
{
|
||||||
|
showImgList.map((n) =>
|
||||||
|
<Image src={n} key={n} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Image.PreviewGroup>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
title={false}
|
||||||
|
closeIcon={false}
|
||||||
|
onClose={() => {
|
||||||
|
setCurrentRow(undefined)
|
||||||
|
setShowType(0)
|
||||||
|
setShowDetail(false)
|
||||||
|
setShowImgList([])
|
||||||
|
setImagePreviewVisible(false)
|
||||||
|
}}
|
||||||
|
open={showDetail}
|
||||||
|
destroyOnClose
|
||||||
|
width={'60%'}
|
||||||
|
>
|
||||||
|
<ProTable
|
||||||
|
actionRef={drawerActionRef}
|
||||||
|
formRef={drawerFormRef}
|
||||||
|
columns={drawerColumns}
|
||||||
|
bordered
|
||||||
|
expandable={{
|
||||||
|
expandRowByClick: true,
|
||||||
|
defaultExpandAllRows: true
|
||||||
|
}}
|
||||||
|
rowKey={(record) => {
|
||||||
|
return `${record?.id}-${record?.code}`
|
||||||
|
}}
|
||||||
|
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
||||||
|
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>考核记录管理</span>}
|
||||||
|
search={{ span: 6 }}
|
||||||
|
request={async (params) => {
|
||||||
|
|
||||||
|
console.log('searchParams', searchParams);
|
||||||
|
console.log('currentRow', currentRow);
|
||||||
|
if (!currentRow?.template?.serverPartId) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// showType 1 巡查次数 2 正常 3 异常 4 待处理 5 处理中 6 已处理
|
||||||
|
|
||||||
|
|
||||||
|
const req: any = {
|
||||||
|
serverPartIds: [currentRow?.template?.serverPartId],
|
||||||
|
startTime: searchParams?.startTime ? `${searchParams?.startTime}T00:00:00` : "",
|
||||||
|
endTime: searchParams?.endTime ? `${searchParams?.endTime}T23:59:59` : "",
|
||||||
|
extend: showType === 1 ? undefined : showType === 2 ? [
|
||||||
|
{
|
||||||
|
key: "situation",
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
] : showType === 3 ? [
|
||||||
|
{
|
||||||
|
key: "situation",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
] : showType === 4 ? [
|
||||||
|
{
|
||||||
|
key: "errorStatus",
|
||||||
|
value: 0,
|
||||||
|
}
|
||||||
|
] :
|
||||||
|
showType === 5 ? [
|
||||||
|
{
|
||||||
|
key: "errorStatus",
|
||||||
|
value: 1,
|
||||||
|
}
|
||||||
|
] :
|
||||||
|
showType === 6 ? [
|
||||||
|
{
|
||||||
|
key: "errorStatus",
|
||||||
|
value: 2,
|
||||||
|
}
|
||||||
|
] : undefined
|
||||||
|
}
|
||||||
|
console.log('req', req);
|
||||||
|
const data = await handleGetRecordTreeList(req)
|
||||||
|
console.log('data', data);
|
||||||
|
|
||||||
|
if (data && data.length > 0) {
|
||||||
|
return { data, success: true }
|
||||||
|
}
|
||||||
|
return { data: [], success: true }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
</ProTable>
|
||||||
|
</Drawer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(({ user }: ConnectState) => ({
|
||||||
|
currentUser: user.data
|
||||||
|
}))(recordSummary);
|
||||||
@ -1,26 +1,213 @@
|
|||||||
import { Modal } from "antd";
|
import { ProForm, ProFormDigit, ProFormRadio, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-components";
|
||||||
|
import { Col, FormInstance, message, Modal, Row } from "antd";
|
||||||
|
import { useRef, useState } from "react";
|
||||||
import { connect } from "umi";
|
import { connect } from "umi";
|
||||||
|
import { ConnectState } from "@/models/global";
|
||||||
|
import { handleAddMenus, handleGetMenuList } from "../service";
|
||||||
|
|
||||||
type DetailProps = {
|
type DetailProps = {
|
||||||
currentUser?: any // 用户详情的公参
|
currentUser?: any // 用户详情的公参
|
||||||
showDrawer: boolean // 显示悬浮框的判断
|
showDrawer: boolean // 显示悬浮框的判断
|
||||||
parentRow?: any // 点击的行 编辑的时候有用
|
parentRow?: any // 点击的行 编辑的时候有用
|
||||||
|
setShowDrawer: any // 改变悬浮框现实状态
|
||||||
|
parentTableRef?: any // 父级表格实例
|
||||||
}
|
}
|
||||||
const AddBigType = ({ currentUser, showDrawer, parentRow }: DetailProps) => {
|
const AddMenu = ({ currentUser, showDrawer, parentRow, setShowDrawer, parentTableRef }: DetailProps) => {
|
||||||
|
console.log('showDrawer', showDrawer);
|
||||||
|
// 表单实例
|
||||||
|
const formRef = useRef<FormInstance>();
|
||||||
|
// 当前的菜单类型
|
||||||
|
const [currentMenuType, setCurrentMenuType] = useState<number>(1)
|
||||||
|
|
||||||
<Modal
|
|
||||||
title={parentRow?.id ? '更新菜单' : '新建菜单'}
|
|
||||||
width={600}
|
|
||||||
open={showDrawer}
|
|
||||||
onOk={() => {
|
|
||||||
|
|
||||||
}}
|
return (
|
||||||
onCancel={() => {
|
<Modal
|
||||||
|
title={parentRow?.id ? '更新菜单' : '新建菜单'}
|
||||||
|
width={600}
|
||||||
|
open={showDrawer}
|
||||||
|
destroyOnClose
|
||||||
|
onOk={() => {
|
||||||
|
formRef.current?.validateFields().then(async (res: any) => {
|
||||||
|
console.log('res', res);
|
||||||
|
const req: any = {
|
||||||
|
parentId: res.parentId || 1,
|
||||||
|
menuCode: res.menuCode,
|
||||||
|
menuName: res.menuName,
|
||||||
|
menuIcon: res.menuIcon || "",
|
||||||
|
menuPath: res.menuPath || "",
|
||||||
|
component: "",
|
||||||
|
permission: "",
|
||||||
|
menuType: res.menuType,
|
||||||
|
sortOrder: res.sortOrder,
|
||||||
|
hidden: res.hidden === 1 ? false : res.hidden === 2 ? true : '',
|
||||||
|
operator: currentUser.adminName
|
||||||
|
}
|
||||||
|
const data = await handleAddMenus(req)
|
||||||
|
console.log('datadsa', data);
|
||||||
|
if (data.code === 200) {
|
||||||
|
message.success(data.message)
|
||||||
|
if (parentTableRef) {
|
||||||
|
parentTableRef.current.reload()
|
||||||
|
}
|
||||||
|
|
||||||
}}
|
formRef.current?.resetFields()
|
||||||
/>
|
setShowDrawer(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
setShowDrawer(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm
|
||||||
|
formRef={formRef}
|
||||||
|
submitter={false}
|
||||||
|
layout="horizontal"
|
||||||
|
labelCol={{ span: 6 }}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormText
|
||||||
|
label={currentMenuType === 1 ? "菜单名称" : "模块名称"}
|
||||||
|
name={"menuName"}
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: `请输入${currentMenuType === 1 ? '菜单' : '模块'}名称` }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormText
|
||||||
|
label={currentMenuType === 1 ? "菜单编码" : "模块编码"}
|
||||||
|
name={"menuCode"}
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: `请输入${currentMenuType === 1 ? '菜单' : '模块'}编码` }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormTreeSelect
|
||||||
|
label={"上级菜单"}
|
||||||
|
name={"parentId"}
|
||||||
|
request={async () => {
|
||||||
|
const req: any = {
|
||||||
|
|
||||||
|
}
|
||||||
|
const data = await handleGetMenuList()
|
||||||
|
let res: any = []
|
||||||
|
if (data && data.length > 0) {
|
||||||
|
res = data
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}}
|
||||||
|
fieldProps={{
|
||||||
|
fieldNames: {
|
||||||
|
label: "menuName",
|
||||||
|
value: "id"
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{
|
||||||
|
currentMenuType === 1 ?
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormText
|
||||||
|
name="menuIcon"
|
||||||
|
label="菜单图标"
|
||||||
|
placeholder="请输入菜单图标字段"
|
||||||
|
initialValue={"<ProfileOutlined />"}
|
||||||
|
fieldProps={
|
||||||
|
{
|
||||||
|
addonAfter: <a href='https://ant.design/components/icon-cn/' target='_blank'>去复制</a>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/>
|
||||||
|
</Col> : ""
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
currentMenuType === 2 ?
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormText
|
||||||
|
name="menuPath"
|
||||||
|
label="模块地址"
|
||||||
|
placeholder="请输入模块地址"
|
||||||
|
/>
|
||||||
|
</Col> : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormDigit
|
||||||
|
name="sortOrder"
|
||||||
|
label="索引"
|
||||||
|
placeholder="请输入索引"
|
||||||
|
|
||||||
|
min={0}
|
||||||
|
max={9999}
|
||||||
|
fieldProps={{ precision: 0 }}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormRadio.Group
|
||||||
|
name="hidden"
|
||||||
|
label="状态"
|
||||||
|
initialValue={1}
|
||||||
|
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: '有效',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '隐藏',
|
||||||
|
value: 2,
|
||||||
|
}]}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col span={24}>
|
||||||
|
<ProFormRadio.Group
|
||||||
|
name="menuType"
|
||||||
|
label="菜单类型"
|
||||||
|
initialValue={1}
|
||||||
|
rules={[
|
||||||
|
{ required: true, message: "请选择菜单类型" }
|
||||||
|
]}
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: '菜单',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '模块',
|
||||||
|
value: 2,
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
fieldProps={{
|
||||||
|
onChange: (e: any) => {
|
||||||
|
console.log('e', e);
|
||||||
|
setCurrentMenuType(Number(e.target.value))
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
{/* <Col span={24}>
|
||||||
|
<ProFormTextArea
|
||||||
|
name="DESC"
|
||||||
|
label="备注说明"
|
||||||
|
placeholder="请输入说明"
|
||||||
|
/>
|
||||||
|
</Col> */}
|
||||||
|
</Row>
|
||||||
|
</ProForm>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
export default connect(({ user }: ConnectState) => ({
|
export default connect(({ user }: ConnectState) => ({
|
||||||
currentUser: user.data
|
currentUser: user.data
|
||||||
}))(AddBigType);
|
}))(AddMenu);
|
||||||
@ -1,8 +1,11 @@
|
|||||||
|
|
||||||
import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
|
import { ActionType, FormInstance, ProTable } from "@ant-design/pro-components";
|
||||||
import { Button } from "antd";
|
import { Button, Space } from "antd";
|
||||||
import { useRef, useState } from "react";
|
import { useRef, useState } from "react";
|
||||||
import { connect } from "umi";
|
import { connect } from "umi";
|
||||||
import { handleGetMenuList } from "./service";
|
import { handleGetMenuList } from "./service";
|
||||||
|
import AddMenu from "./components/addMenu";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
||||||
const { currentUser } = props
|
const { currentUser } = props
|
||||||
@ -11,48 +14,69 @@ const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
const formRef = useRef<FormInstance>();
|
const formRef = useRef<FormInstance>();
|
||||||
// 打开新增的悬浮框
|
// 打开新增的悬浮框
|
||||||
const [openAddModal, setOpenAddModal] = useState<boolean>(false)
|
const [openAddModal, setOpenAddModal] = useState<boolean>(false)
|
||||||
// 显示新增和编辑的悬浮框
|
// 行数据
|
||||||
|
const [currentRow, setCurrentRow] = useState<any>()
|
||||||
|
// 表格默认隐藏字段
|
||||||
|
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||||||
|
menuCode: { show: false },
|
||||||
|
createdAt: { show: false },
|
||||||
|
})
|
||||||
// 表格组件
|
// 表格组件
|
||||||
const columns: any = [
|
const columns: any = [
|
||||||
{
|
{
|
||||||
title: "菜单名称",
|
title: <div style={{ textAlign: 'center' }}>菜单名称</div>,
|
||||||
dataIndex: "menuName",
|
dataIndex: "menuName",
|
||||||
width: 300,
|
width: 300,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "菜单图标",
|
title: <div style={{ textAlign: 'center' }}>菜单编号</div>,
|
||||||
|
dataIndex: "menuCode",
|
||||||
|
width: 300,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <div style={{ textAlign: 'center' }}>菜单图标</div>,
|
||||||
dataIndex: "menuIcon",
|
dataIndex: "menuIcon",
|
||||||
width: 120,
|
width: 120,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "菜单索引",
|
title: <div style={{ textAlign: 'center' }}>菜单索引</div>,
|
||||||
dataIndex: "id",
|
dataIndex: "sortOrder",
|
||||||
width: 180,
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '状态',
|
title: <div style={{ textAlign: 'center' }}>状态</div>,
|
||||||
dataIndex: 'hidden',
|
dataIndex: 'hidden',
|
||||||
hideInSearch: true,
|
hideInSearch: true,
|
||||||
width: 180,
|
width: 100,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.hidden ? '隐藏' : '显示'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '说明',
|
title: <div style={{ textAlign: 'center' }}>创建时间</div>,
|
||||||
dataIndex: 'desc',
|
dataIndex: 'createdAt',
|
||||||
width: 200,
|
width: 200,
|
||||||
hideInSearch: true
|
hideInSearch: true,
|
||||||
|
render: (_, record) => {
|
||||||
|
return record?.createdAt ? moment(record?.createdAt).format('YYYY-MM-DD HH:mm:ss') : ""
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: <div style={{ textAlign: 'center' }}>操作</div>,
|
||||||
dataIndex: 'option',
|
dataIndex: 'option',
|
||||||
valueType: 'option',
|
valueType: 'option',
|
||||||
hideInDescriptions: true,
|
hideInDescriptions: true,
|
||||||
width: 260,
|
width: 100,
|
||||||
render: (_, record) => { }
|
render: (_, record) => {
|
||||||
|
return <Space>
|
||||||
|
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
// 表格子集的columns
|
// 表格子集的columns
|
||||||
@ -97,6 +121,23 @@ const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// 模块列表
|
||||||
|
const expandedRowRender = (data: any) => {
|
||||||
|
console.log('data', data);
|
||||||
|
|
||||||
|
return (data && data.length > 0 ?
|
||||||
|
<ProTable
|
||||||
|
rowKey="id"
|
||||||
|
columns={childrenColumns}
|
||||||
|
search={false}
|
||||||
|
headerTitle={false}
|
||||||
|
options={false}
|
||||||
|
dataSource={data}
|
||||||
|
pagination={false}
|
||||||
|
/>
|
||||||
|
: [])
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ProTable
|
<ProTable
|
||||||
@ -104,9 +145,6 @@ const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
formRef={formRef}
|
formRef={formRef}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
bordered
|
bordered
|
||||||
expandable={{
|
|
||||||
expandRowByClick: true
|
|
||||||
}}
|
|
||||||
rowKey={(record) => {
|
rowKey={(record) => {
|
||||||
return `${record?.id}`
|
return `${record?.id}`
|
||||||
}}
|
}}
|
||||||
@ -132,7 +170,18 @@ const menuIndex: React.FC<{ currentUser: any }> = (props) => {
|
|||||||
</Button>
|
</Button>
|
||||||
]
|
]
|
||||||
}}
|
}}
|
||||||
|
expandable={{
|
||||||
|
expandRowByClick: true,
|
||||||
|
// expandedRowRender
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
value: columnsStateMap,
|
||||||
|
onChange: setColumnsStateMap,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<AddMenu currentUser={currentUser} showDrawer={openAddModal} parentRow={currentRow} setShowDrawer={setOpenAddModal} parentTableRef={actionRef} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,16 @@
|
|||||||
import request from "@/utils/request"
|
import request from "@/utils/request"
|
||||||
|
|
||||||
// 拿到类别列表接口
|
// 拿到菜单列表数据
|
||||||
export async function handleGetMenuList(params?: any) {
|
export async function handleGetMenuList(params?: any) {
|
||||||
const data = await request.get('/menus/getAll', { params })
|
const data = await request.get('/menus/getAll', { params })
|
||||||
if (data.code === 200) {
|
if (data.code === 200) {
|
||||||
return data.data
|
return data.data
|
||||||
}
|
}
|
||||||
return []
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增菜单
|
||||||
|
export async function handleAddMenus(params?: any) {
|
||||||
|
const data = await request.post('/menus', params)
|
||||||
|
return data
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user