682 lines
30 KiB
TypeScript
682 lines
30 KiB
TypeScript
import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree";
|
||
import { handleGetServerpartDDL } from "@/components/leftSelectTree/service";
|
||
import { ActionType, FormInstance, ProCard, ProForm, ProFormList, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
|
||
import { Button, Col, message, Modal, Popconfirm, Row, Space, Image, Drawer } from "antd";
|
||
import moment from "moment";
|
||
import { useRef, useState } from "react";
|
||
import { connect } from "umi";
|
||
import { handleAddTemplates, handleDeleteTemplates, handleGetQuestionList, handleGetTemplatesList, handleUpdateTemplates, handleUploadFile } from "./service";
|
||
import { handleGetExamineTypeTreeList } from "../index/service";
|
||
import QRCode from 'qrcode';
|
||
import { base64ToFile } from "@/utils/publicMethods";
|
||
import RecordDetail from "../record/components/recordDetail";
|
||
|
||
|
||
const examineModal: React.FC<{ currentUser: any }> = (props) => {
|
||
const { currentUser } = props
|
||
|
||
const actionRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const modalActionRef = useRef<ActionType>();
|
||
const modalFormRef = useRef<FormInstance>();
|
||
|
||
|
||
|
||
// 弹出框的表单实例
|
||
const modalRef = useRef<FormInstance>()
|
||
// 树相关的属性和方法
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
|
||
// 显示新增点位的悬浮框
|
||
const [showPlaceModal, setShowPlaceModal] = useState<boolean>(false)
|
||
// 显示详情
|
||
const [showDetail, handleShowDetail] = useState<boolean>(false)
|
||
// 当前点击选中的问题行
|
||
const [currentRow, setCurrentRow] = useState<any>()
|
||
// 服务区的枚举
|
||
const [serviceObj, setServiceObj] = useState<any>()
|
||
// 生成的二维码的初始
|
||
const [qrCodeUrl, setQrCodeUrl] = useState<string>()
|
||
// 选择问题的悬浮框
|
||
const [selectQuestionModal, setSelectQuestionModal] = useState<boolean>(false)
|
||
// 选择的问题列表 详情
|
||
const [selectedQuestionDetail, setSelectedQuestionDetail] = useState<any>()
|
||
// 选择的问题列表的id
|
||
const [selectedQuestionId, setSelectedQuestionId] = useState<any>()
|
||
|
||
// 显示的附件数据
|
||
const [showImgList, setShowImgList] = useState<string[]>([])
|
||
// 预览图片
|
||
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false)
|
||
// 预览的索引
|
||
const [previewIndex, setPreviewIndex] = useState<number>(0)
|
||
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||
updatedAt: { show: false },
|
||
createdAt: { show: false },
|
||
operator: { show: false },
|
||
})
|
||
|
||
const columns: any = [
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>服务区名称</div>,
|
||
dataIndex: "serverPartName",
|
||
hideInSearch: true,
|
||
width: 150,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>点位名称</div>,
|
||
dataIndex: "title",
|
||
hideInSearch: true,
|
||
width: 200,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>问题列表</div>,
|
||
dataIndex: "questions",
|
||
hideInSearch: true,
|
||
width: 400,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
let questionStr: string = ""
|
||
if (record?.questionnaireTemplateQuestions && record?.questionnaireTemplateQuestions.length > 0) {
|
||
record?.questionnaireTemplateQuestions.forEach((item: any, index: number) => {
|
||
let options: string = ''
|
||
if (item.question.options && item.question.options.length > 0) {
|
||
item.question.options.forEach((subItem: any, subIndex: number) => {
|
||
options += `${subIndex > 0 ? '，' : ''}选项${subIndex + 1}：${subItem.text}`
|
||
})
|
||
}
|
||
questionStr += `${index > 0 ? '，' : ''}问题${index + 1}：${item.question.title}，${options}`
|
||
})
|
||
}
|
||
return questionStr || ''
|
||
// return record?.questions && record?.questions.length > 0 ? JSON.stringify(record?.questions) : ''
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>站点二维码</div>,
|
||
dataIndex: "qrUrl",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
width: 150,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.qrUrl ? <Button type="primary" onClick={() => {
|
||
setShowImgList([record?.qrUrl])
|
||
setImagePreviewVisible(true)
|
||
}}>查看二维码</Button> : "-"
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>有效状态</div>,
|
||
dataIndex: "status",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
width: 100,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.status ? '有效' : '无效'
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>备注说明</div>,
|
||
dataIndex: "description",
|
||
hideInSearch: true,
|
||
width: 200,
|
||
ellipsis: true
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>更新时间</div>,
|
||
dataIndex: "updatedAt",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
width: 150,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.updatedAt ? moment(record?.updatedAt).format('YYYY-MM-DD HH:mm:ss') : ''
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>创建时间</div>,
|
||
dataIndex: "createdAt",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
width: 150,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.createdAt ? moment(record?.createdAt).format('YYYY-MM-DD HH:mm:ss') : ''
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>操作人</div>,
|
||
dataIndex: "operator",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
width: 100,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'option',
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
fixed: "right",
|
||
width: 120,
|
||
render: (_: any, record: any) => {
|
||
return <Space>
|
||
<a onClick={() => {
|
||
console.log('record', record);
|
||
setCurrentRow(record)
|
||
setShowPlaceModal(true)
|
||
}}>编辑</a>
|
||
<a onClick={() => {
|
||
setCurrentRow(record)
|
||
handleShowDetail(true)
|
||
}}>详情</a>
|
||
<Popconfirm
|
||
title={"确认删除？"}
|
||
onConfirm={async () => {
|
||
deleteQuestion(record?.id)
|
||
}}
|
||
>
|
||
<a>删除</a>
|
||
</Popconfirm>
|
||
|
||
</Space>
|
||
}
|
||
}
|
||
]
|
||
|
||
// 弹出框里面的
|
||
const modalColumns: any = [
|
||
{
|
||
title: "问题分类",
|
||
dataIndex: "id",
|
||
hideInTable: true,
|
||
valueType: 'treeSelect',
|
||
request: async () => {
|
||
const data = await handleGetExamineTypeTreeList()
|
||
console.log('data', data);
|
||
return data && data.length > 0 ? data.map(item => ({
|
||
title: item.name,
|
||
value: item.id,
|
||
children: item.children?.map((child: any) => ({
|
||
title: child.name,
|
||
value: child.id,
|
||
children: child.children || []
|
||
})) || []
|
||
})) : []
|
||
},
|
||
fieldProps: {
|
||
multiple: false,
|
||
treeDefaultExpandAll: true,
|
||
showSearch: true,
|
||
treeNodeFilterProp: 'title',
|
||
placeholder: '请选择问题分类'
|
||
}
|
||
},
|
||
{
|
||
title: "考核内容",
|
||
dataIndex: "title",
|
||
width: 200,
|
||
ellipsis: true,
|
||
hideInSearch: true
|
||
},
|
||
{
|
||
title: "考核选项",
|
||
dataIndex: "options",
|
||
width: 500,
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
let str: string = ''
|
||
if (record.options && record?.options.length > 0) {
|
||
record.options.forEach((item: any, index: number) => {
|
||
str += `${index > 0 ? '，' : ''}选项${index + 1}：${item.text}`
|
||
})
|
||
}
|
||
return str || ''
|
||
// return record?.options && record?.options.length > 0 ? JSON.stringify(record?.options) : ""
|
||
}
|
||
}
|
||
]
|
||
|
||
// 删除模版
|
||
const deleteQuestion = async (id: number) => {
|
||
const data = await handleDeleteTemplates({ id: id })
|
||
if (data.code === 200) {
|
||
message.success(data.message)
|
||
actionRef.current?.reload()
|
||
}
|
||
}
|
||
|
||
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
|
||
}}
|
||
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
||
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>走动式点位管理</span>}
|
||
search={{ span: 6 }}
|
||
request={async () => {
|
||
const req: any = {
|
||
|
||
}
|
||
const data = await handleGetTemplatesList()
|
||
if (data && data.length > 0) {
|
||
return { data, success: true }
|
||
}
|
||
return { data: [], success: true }
|
||
}}
|
||
toolbar={{
|
||
actions: [
|
||
<Button type="primary" onClick={(e) => {
|
||
setShowPlaceModal(true)
|
||
}}>
|
||
添加点位
|
||
</Button>
|
||
]
|
||
}}
|
||
columnsState={{
|
||
value: columnsStateMap,
|
||
onChange: setColumnsStateMap,
|
||
}}
|
||
>
|
||
</ProTable>
|
||
|
||
{
|
||
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>
|
||
}
|
||
|
||
<Modal
|
||
width={1200}
|
||
title={`${currentRow?.id ? '编辑' : '创建'}点位`}
|
||
open={showPlaceModal}
|
||
destroyOnClose
|
||
onOk={() => {
|
||
modalRef.current?.validateFields().then(async (res) => {
|
||
console.log('res', res);
|
||
console.log('currentRow', currentRow);
|
||
let req = {}
|
||
let data = {}
|
||
if (currentRow?.id) {
|
||
let questions: any = []
|
||
if (selectedQuestionDetail && selectedQuestionDetail.length > 0) {
|
||
selectedQuestionDetail.forEach((item) => {
|
||
questions.push({
|
||
questionId: item.id,
|
||
isRequired: item.required,
|
||
sortOrder: item.sortOrder
|
||
})
|
||
})
|
||
} else {
|
||
// 判断是否有改动 一样 说明没改动 那么把老的拿进去就行
|
||
if (currentRow?.questionnaireTemplateQuestions.length === res.questions.length) {
|
||
if (currentRow?.questionnaireTemplateQuestions && currentRow?.questionnaireTemplateQuestions.length > 0) {
|
||
currentRow?.questionnaireTemplateQuestions.forEach((item) => {
|
||
questions.push({
|
||
questionId: item.question.id,
|
||
isRequired: item.question.required,
|
||
sortOrder: item.question.sortOrder
|
||
})
|
||
})
|
||
}
|
||
} else {
|
||
// 不一样 说明有删除 不然走的是第一个
|
||
if (res.questions && res.questions.length > 0) {
|
||
res.questions.forEach((item) => {
|
||
questions.push({
|
||
questionId: item.id,
|
||
isRequired: item.required,
|
||
sortOrder: item.sortOrder
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
req = {
|
||
...currentRow,
|
||
title: res.title,
|
||
serverPartName: serviceObj ? serviceObj[res.serverPartId] : "",
|
||
serverPartId: res.serverPartId,
|
||
questions: questions && questions.length > 0 ? questions : "",
|
||
operator: currentUser?.operator,
|
||
status: res.status,
|
||
description: res.description
|
||
}
|
||
data = await handleUpdateTemplates(req)
|
||
} else {
|
||
let questions: any = []
|
||
if (selectedQuestionDetail && selectedQuestionDetail.length > 0) {
|
||
selectedQuestionDetail.forEach((item) => {
|
||
questions.push({
|
||
questionId: item.id,
|
||
isRequired: item.required,
|
||
sortOrder: item.sortOrder
|
||
})
|
||
})
|
||
}
|
||
|
||
req = {
|
||
title: res.title,
|
||
placeName: "",
|
||
placeId: 0,
|
||
serverPartName: serviceObj ? serviceObj[res.serverPartId] : "",
|
||
serverPartId: res.serverPartId,
|
||
// qrUrl: "",
|
||
questions: questions && questions.length > 0 ? questions : "",
|
||
operator: currentUser?.operator,
|
||
status: res.status,
|
||
description: res.description
|
||
}
|
||
data = await handleAddTemplates(req)
|
||
console.log('datadsadsa1', data.data);
|
||
const myQRCodeDataUrl = await QRCode.toDataURL(`pages/walkAroundManager/index?id=${data.data.id}`);
|
||
const file = base64ToFile(myQRCodeDataUrl, `wenjuan${data.data.id}.png`);
|
||
console.log('file', file);
|
||
const formData = new FormData();
|
||
formData.append("file", file, `wenjuan${data.data.id}.png`); // 确保文件名也传递
|
||
|
||
const fileData = await handleUploadFile(formData)
|
||
console.log('fileData', fileData);
|
||
let imgUrl: string = `https://es.robot-z.cn/${fileData.data.path}`
|
||
await handleUpdateTemplates({
|
||
...data.data,
|
||
qrUrl: imgUrl
|
||
})
|
||
setQrCodeUrl(imgUrl)
|
||
// setQrCodeUrl(myQRCodeDataUrl)
|
||
}
|
||
console.log('datadsadsa', data);
|
||
if (data.code === 200) {
|
||
modalRef.current?.resetFields()
|
||
message.success(data.message)
|
||
setShowPlaceModal(false)
|
||
actionRef.current?.reload()
|
||
setCurrentRow(undefined)
|
||
} else {
|
||
message.error(data.message)
|
||
}
|
||
|
||
})
|
||
}}
|
||
onCancel={() => {
|
||
modalRef.current?.resetFields()
|
||
setShowPlaceModal(false)
|
||
setCurrentRow(undefined)
|
||
setQrCodeUrl(undefined)
|
||
}}
|
||
>
|
||
<ProForm formRef={modalRef} submitter={false} request={() => {
|
||
console.log('currentRow', currentRow);
|
||
|
||
let questionsList: any = []
|
||
let keyList: any = []
|
||
if (currentRow?.questionnaireTemplateQuestions && currentRow?.questionnaireTemplateQuestions.length > 0) {
|
||
console.log('1');
|
||
|
||
currentRow?.questionnaireTemplateQuestions.forEach((item) => {
|
||
console.log('2');
|
||
if (item.question) {
|
||
let obj = JSON.parse(JSON.stringify(item.question))
|
||
|
||
let str: string = ''
|
||
if (obj.options && obj?.options.length > 0) {
|
||
obj.options.forEach((subItem: any, index: number) => {
|
||
str += `${index > 0 ? '，' : ''}选项${index + 1}：${subItem.text}`
|
||
})
|
||
}
|
||
|
||
obj.text = obj.title
|
||
obj.mark = JSON.stringify(obj.options)
|
||
obj.showText = str
|
||
keyList.push(obj.id)
|
||
questionsList.push(obj)
|
||
}
|
||
})
|
||
}
|
||
|
||
// setSelectedQuestionDetail
|
||
setSelectedQuestionId(keyList)
|
||
return {
|
||
...currentRow,
|
||
serverPartId: currentRow.serverPartId.toString(),
|
||
questions: questionsList
|
||
}
|
||
}}>
|
||
<Row gutter={8}>
|
||
<Col span={8}>
|
||
<ProFormSelect
|
||
label={"服务区名"}
|
||
name={"serverPartId"}
|
||
request={async () => {
|
||
const req = {
|
||
ProvinceCode: currentUser?.provinceCode,
|
||
StatisticsType: 1000
|
||
}
|
||
const data = await handleGetServerpartDDL(req)
|
||
let obj: any = {}
|
||
if (data && data.length > 0) {
|
||
data.forEach((item) => {
|
||
obj[item.value] = item.label
|
||
})
|
||
}
|
||
setServiceObj(obj)
|
||
return data
|
||
}}
|
||
fieldProps={{
|
||
showSearch: true,
|
||
}}
|
||
rules={[{
|
||
required: true,
|
||
message: "请选择服务区！"
|
||
}]}
|
||
/>
|
||
</Col>
|
||
|
||
<Col span={8}>
|
||
<ProFormText
|
||
label={"点位名称"}
|
||
name={"title"}
|
||
rules={[{
|
||
required: true,
|
||
message: "请输入点位名称！"
|
||
}]}
|
||
/>
|
||
</Col>
|
||
<Col span={8}>
|
||
<ProFormSwitch
|
||
label={"有效状态"}
|
||
name={"status"}
|
||
initialValue={currentRow?.id ? currentRow.status : true}
|
||
/>
|
||
</Col>
|
||
<Col span={20}>
|
||
<ProFormList
|
||
name="questions"
|
||
label="考核列表"
|
||
initialValue={[]}
|
||
creatorButtonProps={{
|
||
position: 'bottom',
|
||
creatorButtonText: '添加选项',
|
||
style: { display: 'none' },
|
||
onClick: (e) => {
|
||
console.log('e', e);
|
||
}
|
||
}}
|
||
copyIconProps={false}
|
||
style={{ width: '100%' }}
|
||
itemContainerStyle={{ width: '100%' }}
|
||
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>
|
||
)}
|
||
>
|
||
<Row gutter={6} style={{ width: '100%', margin: 0 }}>
|
||
<Col span={8}>
|
||
<ProFormTextArea
|
||
name="text"
|
||
label="考核内容"
|
||
fieldProps={{
|
||
style: { width: '100%' }
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col span={16}>
|
||
<ProFormTextArea
|
||
name="showText"
|
||
label="考核标准"
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</ProFormList>
|
||
</Col>
|
||
<Col span={4}>
|
||
<Button type={"primary"} onClick={() => {
|
||
setSelectQuestionModal(true)
|
||
}}>添加考核</Button>
|
||
</Col>
|
||
<Col span={24}>
|
||
<ProFormTextArea
|
||
label={"备注说明"}
|
||
name={"description"}
|
||
/>
|
||
</Col>
|
||
|
||
<Col span={24}>
|
||
<ProFormTextArea
|
||
label={"二维码URL"}
|
||
name={"qrUrl"}
|
||
/>
|
||
</Col>
|
||
<Col span={24}>
|
||
{
|
||
qrCodeUrl || currentRow?.qrUrl ?
|
||
<img style={{ width: "150px", height: "150px" }} src={qrCodeUrl || currentRow?.qrUrl} /> : ""
|
||
}
|
||
</Col>
|
||
|
||
|
||
</Row>
|
||
</ProForm>
|
||
</Modal>
|
||
|
||
<Modal
|
||
width={1400}
|
||
title={`点位`}
|
||
open={selectQuestionModal}
|
||
destroyOnClose
|
||
onOk={() => {
|
||
console.log('selectedQuestionDetail', selectedQuestionDetail);
|
||
// 显示的问题列表
|
||
let showQuestion: any = []
|
||
if (selectedQuestionDetail && selectedQuestionDetail.length > 0) {
|
||
selectedQuestionDetail.forEach((item) => {
|
||
let str: string = ''
|
||
if (item.options && item?.options.length > 0) {
|
||
item.options.forEach((item: any, index: number) => {
|
||
str += `${index > 0 ? '，' : ''}选项${index + 1}：${item.text}`
|
||
})
|
||
}
|
||
showQuestion.push({ text: item.title, showText: str, mark: item.options ? JSON.stringify(item.options) : "" })
|
||
})
|
||
}
|
||
modalRef.current?.setFieldsValue({
|
||
questions: showQuestion
|
||
})
|
||
setSelectQuestionModal(false)
|
||
}}
|
||
onCancel={() => {
|
||
setSelectQuestionModal(false)
|
||
}}
|
||
>
|
||
<ProTable
|
||
actionRef={modalActionRef}
|
||
formRef={modalFormRef}
|
||
columns={modalColumns}
|
||
rowKey={"id"}
|
||
scroll={{ y: 'calc(100vh - 500px)' }}
|
||
request={async (params) => {
|
||
console.log('查询参数:', params);
|
||
const req: any = {
|
||
categoryId: params.id
|
||
}
|
||
const data = await handleGetQuestionList(req)
|
||
if (data && data.length > 0) {
|
||
return { data, success: true }
|
||
}
|
||
return { data: [], success: true }
|
||
|
||
}}
|
||
rowSelection={{
|
||
type: "checkbox",
|
||
defaultSelectedRowKeys: selectedQuestionId,
|
||
onChange: (selectedRowKeys, selectedRows) => {
|
||
setSelectedQuestionDetail(selectedRows)
|
||
setSelectedQuestionId(selectedRowKeys)
|
||
}
|
||
}}
|
||
/>
|
||
</Modal>
|
||
</div>
|
||
|
||
|
||
<Drawer
|
||
title={false}
|
||
closeIcon={false}
|
||
onClose={() => {
|
||
handleShowDetail(false)
|
||
}}
|
||
open={showDetail}
|
||
destroyOnClose
|
||
width={'60%'}
|
||
>
|
||
<RecordDetail parentRow={currentRow} show={showDetail} detailType={'modal'} />
|
||
</Drawer>
|
||
</div >
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.data
|
||
}))(examineModal);
|
||
|