feat
parent
608a8a4944
commit
dccacda5d8
|
|
@ -22,3 +22,4 @@ export const NS_QUAL_REVIEW = defineNamespace("qualReview");
|
|||
export const NS_QUAL_EXPERT = defineNamespace("qualExpert");
|
||||
export const NS_DRIVER = defineNamespace("driver");
|
||||
export const NS_RISK_CENTER = defineNamespace("riskCenter");
|
||||
export const NS_SAFETY_EVAL_BUSINESS = defineNamespace("safetyEvalBusiness");
|
||||
|
|
|
|||
|
|
@ -192,6 +192,23 @@ const menuItems = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "/safetyEval/container/SafetyEvalBusiness",
|
||||
label: "安评业务管理",
|
||||
icon: <FileTextOutlined />,
|
||||
children: [
|
||||
{
|
||||
key: "/safetyEval/container/SafetyEvalBusiness/MyProject",
|
||||
label: "我的项目",
|
||||
icon: <FileTextOutlined />,
|
||||
},
|
||||
{
|
||||
key: "/safetyEval/container/SafetyEvalBusiness/ProjectFlow",
|
||||
label: "项目流程",
|
||||
icon: <FileTextOutlined />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "/safetyEval/container/test",
|
||||
label: "测试",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
import React from "react";
|
||||
import { Form, Table, Tag, Button, Card, Row, Col, Statistic, Select } from "antd";
|
||||
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
||||
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
|
||||
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
|
||||
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
|
||||
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
|
||||
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
|
||||
|
||||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
|
||||
const MOCK_LIST = [
|
||||
{
|
||||
id: 1, projectName: "华安化工园区安全预评价", projectCode: "XP-2026-001",
|
||||
myRole: "项目负责人", leader: "张建国",
|
||||
startDate: "2026-03-01", endDate: "2026-09-30", phase: "正常",
|
||||
},
|
||||
{
|
||||
id: 2, projectName: "鼎信建设安全验收评价", projectCode: "XP-2026-002",
|
||||
myRole: "报告编制人", leader: "李明华",
|
||||
startDate: "2026-05-15", endDate: "2026-11-15", phase: "正常",
|
||||
},
|
||||
{
|
||||
id: 3, projectName: "安环检测年度安全现状评价", projectCode: "XP-2025-045",
|
||||
myRole: "过程控制负责人", leader: "陈志强",
|
||||
startDate: "2025-08-01", endDate: "2026-05-30", phase: "延期",
|
||||
},
|
||||
];
|
||||
|
||||
const MyProject = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号", dataIndex: "id", width: 60, fixed: "left",
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: "项目名称", dataIndex: "projectName", width: 220, ellipsis: true,
|
||||
render: (text, record) => (
|
||||
<div>
|
||||
<div>{text}</div>
|
||||
<div style={{ fontSize: 12, color: "#999" }}>{record.projectCode}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ title: "我的角色", dataIndex: "myRole", width: 130 },
|
||||
{ title: "项目负责人", dataIndex: "leader", width: 100 },
|
||||
{ title: "项目开始时间", dataIndex: "startDate", width: 120 },
|
||||
{ title: "项目结束时间", dataIndex: "endDate", width: 120 },
|
||||
{
|
||||
title: "项目阶段", dataIndex: "phase", width: 100,
|
||||
render: (phase) => (
|
||||
<Tag color={phase === "延期" ? "error" : "success"}>{phase}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作", width: 140, fixed: "right",
|
||||
render: (_, record) => (
|
||||
<TableAction>
|
||||
<Button type="link" size="small" onClick={() => props.history.push(`ProjectFlow?id=${record.id}`)}>编辑</Button>
|
||||
<Button type="link" size="small" danger>作废</Button>
|
||||
</TableAction>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageLayout title="我的项目">
|
||||
<Row gutter={16} style={{ marginBottom: 24 }}>
|
||||
<Col span={6}>
|
||||
<Card size="small">
|
||||
<Statistic title="参与项目" value={8} suffix="个" />
|
||||
<div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>负责人/编制人/审核人</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card size="small">
|
||||
<Statistic title="待我处理" value={3} valueStyle={{ color: "#faad14" }} suffix="项" />
|
||||
<div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>当前角色可操作节点</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card size="small">
|
||||
<Statistic title="现场任务" value={2} valueStyle={{ color: "#52c41a" }} suffix="项" />
|
||||
<div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>需定位打卡和人脸识别</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card size="small">
|
||||
<Statistic title="延期项目" value={1} valueStyle={{ color: "#ff4d4f" }} suffix="项" />
|
||||
<div style={{ fontSize: 12, color: "#999", marginTop: 4 }}>需优先处理</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<SearchForm
|
||||
form={form}
|
||||
loading={false}
|
||||
formLine={[
|
||||
<Form.Item key="projectName" name="projectName">
|
||||
<ControlWrapper.Input label="评价项目名称" placeholder="请输入" allowClear />
|
||||
</Form.Item>,
|
||||
<Form.Item key="myRole" name="myRole">
|
||||
<ControlWrapper.Select label="我的角色" placeholder="请选择" allowClear style={{ width: "100%" }}>
|
||||
<Select.Option value="项目负责人">项目负责人</Select.Option>
|
||||
<Select.Option value="报告编制人">报告编制人</Select.Option>
|
||||
<Select.Option value="技术负责人">技术负责人</Select.Option>
|
||||
<Select.Option value="过程控制负责人">过程控制负责人</Select.Option>
|
||||
</ControlWrapper.Select>
|
||||
</Form.Item>,
|
||||
<Form.Item key="phase" name="phase">
|
||||
<ControlWrapper.Select label="项目阶段" placeholder="请选择" allowClear style={{ width: "100%" }}>
|
||||
<Select.Option value="正常">正常</Select.Option>
|
||||
<Select.Option value="延期">延期</Select.Option>
|
||||
<Select.Option value="作废">作废</Select.Option>
|
||||
</ControlWrapper.Select>
|
||||
</Form.Item>,
|
||||
]}
|
||||
onFinish={() => {}}
|
||||
onReset={() => form.resetFields()}
|
||||
/>
|
||||
|
||||
<Table
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={MOCK_LIST}
|
||||
scroll={{ y: props.scrollY }}
|
||||
loading={false}
|
||||
pagination={{
|
||||
total: MOCK_LIST.length,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSize: 10,
|
||||
}}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default Connect(
|
||||
[NS_SAFETY_EVAL_BUSINESS],
|
||||
true,
|
||||
)(AntdTableFuncControl(MyProject));
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import React, { useState } from "react";
|
||||
import { Tabs, Tag, Alert, Button, Card } from "antd";
|
||||
import { ArrowLeftOutlined } from "@ant-design/icons";
|
||||
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
||||
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
|
||||
|
||||
const PROCESS_TABS = [
|
||||
{ key: "risk", index: "01", label: "风险分析", state: "已完成", stateType: "success" },
|
||||
{ key: "contract", index: "02", label: "业务合同", state: "已完成", stateType: "success" },
|
||||
{ key: "team", index: "03", label: "项目组", state: "已完成", stateType: "success" },
|
||||
{ key: "survey", index: "04", label: "现场踏勘", state: "已完成", stateType: "success" },
|
||||
{ key: "report", index: "05", label: "报告编制", state: "编制中", stateType: "processing" },
|
||||
{ key: "internal", index: "06", label: "内部审核", state: "待办理", stateType: "default" },
|
||||
{ key: "technical", index: "07", label: "技术审核", state: "待办理", stateType: "default" },
|
||||
{ key: "control", index: "08", label: "过程控制", state: "前置未完成", stateType: "warning", locked: true },
|
||||
];
|
||||
|
||||
const ProjectFlow = (props) => {
|
||||
const [activeKey, setActiveKey] = useState("risk");
|
||||
|
||||
const tabItems = PROCESS_TABS.map((item) => ({
|
||||
key: item.key,
|
||||
disabled: item.locked,
|
||||
label: (
|
||||
<span>
|
||||
{item.index} {item.label}
|
||||
<Tag color={item.stateType} style={{ marginLeft: 8 }}>{item.state}</Tag>
|
||||
</span>
|
||||
),
|
||||
children: (
|
||||
<Card>
|
||||
<div style={{ minHeight: 240, textAlign: "center", color: "#999", paddingTop: 80 }}>
|
||||
{item.index} {item.label} 子流程页面
|
||||
</div>
|
||||
</Card>
|
||||
),
|
||||
}));
|
||||
|
||||
return (
|
||||
<PageLayout
|
||||
title={
|
||||
<span>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => props.history.push("MyProject")}
|
||||
style={{ paddingLeft: 0 }}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
项目法定流程工作台
|
||||
</span>
|
||||
}
|
||||
extra={<Tag color="blue">全量项目管理</Tag>}
|
||||
>
|
||||
<div style={{ marginBottom: 16, color: "#666" }}>
|
||||
华安化工园区安全预评价 | XP-2026-001
|
||||
</div>
|
||||
|
||||
<Alert
|
||||
type="info"
|
||||
showIcon
|
||||
message="本工作台仅展示8个法定子流程，不重复展示新增项目时填写的基本信息。各子流程均为独立页面；过程控制审核须校验前7个节点全部完成并形成有效签字记录后才可办理。"
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
|
||||
<Tabs activeKey={activeKey} onChange={setActiveKey} items={tabItems} />
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AntdTableFuncControl(ProjectFlow);
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
import React from "react";
|
||||
|
||||
function SafetyEvalBusiness(props) {
|
||||
return (
|
||||
|
||||
props.children
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default SafetyEvalBusiness;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// App.tsx
|
||||
import { useRef, useState, useEffect } from "react";
|
||||
import WebOfficeSDK from "web-office-sdk-solution-v2.0.7/web-office-sdk-solution-v2.0.7.es.js";
|
||||
|
||||
export default function App() {
|
||||
useEffect(() => {
|
||||
window.onload = async function () {
|
||||
const instance = WebOfficeSDK.init({
|
||||
// 必填项
|
||||
officeType: WebOfficeSDK.OfficeType.Writer,
|
||||
appId: "SX20260717TSGKEA",
|
||||
mount: document.getElementById("app-sbsb"),
|
||||
fileId: "EOCVQPCDCCE4ZJ2X6MTF",
|
||||
});
|
||||
|
||||
// 需要等待实例 ready 之后再调用 API
|
||||
await instance.ready();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <div style={{ height: "100vh", display: "flex" }}>
|
||||
<div id="app-sbsb" style={{ height: "100%" }}></div>
|
||||
{/* <div style={{ width: "200px" }}>
|
||||
123
|
||||
</div> */}
|
||||
</div>;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.pick-word-container{
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
||||
import { Flex, Button, Tabs, Input, Tag, Progress, Typography } from "antd";
|
||||
import WebOfficeSDK from "~/web-office-sdk-solution-v2.0.7/web-office-sdk-solution-v2.0.7.es.js";
|
||||
import { createPortal } from "react-dom";
|
||||
import "./index.less";
|
||||
|
||||
const App = () => {
|
||||
const [expandedMap, setExpandedMap] = useState({});
|
||||
|
||||
const toggleExpand = (index) => {
|
||||
setExpandedMap((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
useEffect(() => {
|
||||
(async function () {
|
||||
const instance = WebOfficeSDK.init({
|
||||
// 必填项
|
||||
officeType: WebOfficeSDK.OfficeType.Writer,
|
||||
appId: "SX20260717TSGKEA",
|
||||
mount: document.getElementById("app-sbsb"),
|
||||
fileId: "123",
|
||||
token: sessionStorage.getItem("token"),
|
||||
});
|
||||
await instance.ready();
|
||||
const app = instance.Application;
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="WpsEditor-container">
|
||||
<PageLayout
|
||||
title="测试"
|
||||
extra={
|
||||
<Flex gap={12}>
|
||||
<Button>保存</Button>
|
||||
<Button>下载报告</Button>
|
||||
<Button type="primary">提交内审</Button>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
<div className="WpsEditor-flexContainer">
|
||||
<div id="app-sbsb" className="WpsEditor-editorArea"></div>
|
||||
<div className="WpsEditor-sidePanel">
|
||||
<Tabs
|
||||
type="card"
|
||||
tabPlacement="top"
|
||||
items={[
|
||||
{
|
||||
label: "知识库",
|
||||
key: "1",
|
||||
children: (
|
||||
<div className="WpsEditor-dock">
|
||||
<Input.Search placeholder="搜索法规、案例、措施" />
|
||||
<Flex gap={4} className="WpsEditor-dock-cats">
|
||||
{["推荐", "法规标准", "危险因素", "评价方法", "事故案例"].map((cat) => (
|
||||
<Button key={cat} size="small" type={cat === "推荐" ? "primary" : "default"}>{cat}</Button>
|
||||
))}
|
||||
</Flex>
|
||||
<div className="WpsEditor-dock-list">
|
||||
{[
|
||||
{ cat: "法规标准", title: "中华人民共和国安全生产法",
|
||||
desc: "2021年修正，当前有效。可引用至评价依据章节发多少个给梵蒂换个房间官方电话冈的是非观大使馆反对给多少给多少规范化的。" },
|
||||
{ cat: "危险因素", title: "液氨泄漏事故场景", desc: "包含泄漏扩散、中毒窒息、次生火灾及应急处置要点。" },
|
||||
{ cat: "评价方法", title: "安全检查表法", desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。" },
|
||||
{ cat: "评价方法", title: "安全检查表法", desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。" },
|
||||
{ cat: "评价方法", title: "安全检查表法", desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。" },
|
||||
{ cat: "评价方法", title: "安全检查表法", desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。" },
|
||||
{ cat: "评价方法", title: "安全检查表法", desc: "适用于法规符合性、设施状态和安全管理制度逐项检查。" },
|
||||
].map((item, i) => {
|
||||
const expanded = expandedMap[i];
|
||||
return (
|
||||
<div key={i} className="WpsEditor-resourceCard" >
|
||||
<Tag color="blue">{item.cat}</Tag>
|
||||
<Typography.Text strong className="WpsEditor-resourceTitle">{item.title}</Typography.Text>
|
||||
<Typography.Paragraph
|
||||
type="secondary"
|
||||
className="WpsEditor-resourceDesc"
|
||||
ellipsis={expanded ? false : { rows: 2 }}
|
||||
>
|
||||
{item.desc}
|
||||
</Typography.Paragraph>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => toggleExpand(i)}
|
||||
>
|
||||
{expanded ? "收起" : "展开"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "模板",
|
||||
key: "2",
|
||||
children: (
|
||||
<div className="WpsEditor-dock">
|
||||
<Flex justify="space-between" align="center" className="WpsEditor-dock-heading">
|
||||
<Typography.Text strong>机构报告模板</Typography.Text>
|
||||
<Button type="link" size="small">管理</Button>
|
||||
</Flex>
|
||||
<div className="WpsEditor-dock-list">
|
||||
{[
|
||||
{ name: "安全预评价报告", desc: "AQ 8001 / AQ 8002 · V3.2", active: true },
|
||||
{ name: "安全验收评价报告", desc: "AQ 8001 / AQ 8003 · V2.8", active: false },
|
||||
{ name: "安全现状评价报告", desc: "机构标准模板 · V4.1", active: false },
|
||||
].map((tmpl, i) => (
|
||||
<div key={i} className={`WpsEditor-templateCard${tmpl.active ? " active" : ""}`}>
|
||||
<div>
|
||||
<Typography.Text strong>{tmpl.name}</Typography.Text>
|
||||
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>{tmpl.desc}</Typography.Paragraph>
|
||||
</div>
|
||||
{tmpl.active ? <Tag color="blue">使用中</Tag> : <Button size="small">应用</Button>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="WpsEditor-templateNote">
|
||||
<Typography.Text strong>模板包含</Typography.Text>
|
||||
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>封面、责任页、目录、章节结构、页眉页脚、表格样式、附件与附图目录。</Typography.Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "签字",
|
||||
key: "3",
|
||||
children: (
|
||||
<div className="WpsEditor-dock">
|
||||
<Flex justify="space-between" align="center" className="WpsEditor-dock-heading">
|
||||
<Typography.Text strong>责任页签字</Typography.Text>
|
||||
<span className="WpsEditor-signProgress">1 / 5 已完成</span>
|
||||
</Flex>
|
||||
<Progress percent={20} size="small" />
|
||||
<div className="WpsEditor-dock-list">
|
||||
{[
|
||||
{ initial: "张", name: "张建国", role: "项目负责人", status: "signed" },
|
||||
{ initial: "李", name: "李明华", role: "报告编制人", status: "pending" },
|
||||
{ initial: "王", name: "王丽萍", role: "内部审核人", status: "locked" },
|
||||
{ initial: "陈", name: "陈志强", role: "技术负责人", status: "locked" },
|
||||
{ initial: "王", name: "王丽萍", role: "过程控制负责人", status: "locked" },
|
||||
].map((signer, i) => (
|
||||
<div key={i} className={`WpsEditor-signer ${signer.status}`}>
|
||||
<div className="WpsEditor-signerAvatar">{signer.initial}</div>
|
||||
<div className="WpsEditor-signerInfo">
|
||||
<Typography.Text strong>{signer.name}</Typography.Text>
|
||||
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>{signer.role}</Typography.Paragraph>
|
||||
</div>
|
||||
{signer.status === "signed" && <Tag color="success">已签字</Tag>}
|
||||
{signer.status === "pending" && <Button size="small" type="primary" ghost>下发APP签字</Button>}
|
||||
{signer.status === "locked" && <Tag>待内审</Tag>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="WpsEditor-signRule">
|
||||
<Typography.Paragraph type="secondary" style={{ margin: 0, fontSize: 12 }}>
|
||||
签字由 PC 端下发至本人 APP，手写签署后自动回传。各版本签字独立留痕。
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function WpsEditor() {
|
||||
return createPortal(<App />, document.body);
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
.WpsEditor-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.WpsEditor-flexContainer {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.WpsEditor-editorArea {
|
||||
height: 99%;
|
||||
min-width: 1100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.WpsEditor-sidePanel {
|
||||
overflow-x: auto;
|
||||
width: 425px;
|
||||
scrollbar-width: thin;
|
||||
|
||||
|
||||
.WpsEditor-dock {
|
||||
padding-left: 10px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.WpsEditor-dock-cats {
|
||||
margin: 8px 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.WpsEditor-dock-heading {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.WpsEditor-dock-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.WpsEditor-resourceCard {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.WpsEditor-resourceTitle {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.WpsEditor-resourceDesc {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.WpsEditor-templateCard {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.active {
|
||||
border-color: #1677ff;
|
||||
background: #f0f5ff;
|
||||
}
|
||||
}
|
||||
|
||||
.WpsEditor-templateNote {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.WpsEditor-signProgress {
|
||||
font-size: 12px;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.WpsEditor-signer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.locked {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.WpsEditor-signerAvatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.WpsEditor-signerInfo {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.WpsEditor-signRule {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,415 @@
|
|||
/**
|
||||
* 定义用户头部其它按钮菜单
|
||||
*/
|
||||
interface IUserHeaderSubItemsConf {
|
||||
/**
|
||||
* 类型
|
||||
*/
|
||||
type: 'export_img' | 'split_line' | 'custom';
|
||||
/**
|
||||
* 文本
|
||||
*/
|
||||
text?: string;
|
||||
/**
|
||||
* 事件订阅
|
||||
*/
|
||||
subscribe?: ((arg0?: any) => any) | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义用户头部按钮配置
|
||||
*/
|
||||
interface IUserHeaderButtonConf {
|
||||
/**
|
||||
* 提示
|
||||
*/
|
||||
tooltip?: string;
|
||||
/**
|
||||
* 事件订阅
|
||||
*/
|
||||
subscribe?: ((arg0?: any) => any) | string;
|
||||
|
||||
/**
|
||||
* 菜单项
|
||||
*/
|
||||
items?: IUserHeaderSubItemsConf[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 用于保存iframe原始尺寸
|
||||
*/
|
||||
interface IIframeWH {
|
||||
width: string;
|
||||
height: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义用户头部配置
|
||||
*/
|
||||
interface IUserHeadersConf {
|
||||
/**
|
||||
* 返回按钮
|
||||
*/
|
||||
backBtn?: IUserHeaderButtonConf;
|
||||
/**
|
||||
* 分享按钮
|
||||
*/
|
||||
shareBtn?: IUserHeaderButtonConf;
|
||||
/**
|
||||
* 其他按钮
|
||||
*/
|
||||
otherMenuBtn?: IUserHeaderButtonConf;
|
||||
}
|
||||
interface ICommonOptions {
|
||||
/**
|
||||
* 是否显示顶部区域，头部和工具栏
|
||||
*/
|
||||
isShowTopArea: boolean;
|
||||
/**
|
||||
* 是否显示头部
|
||||
*/
|
||||
isShowHeader: boolean;
|
||||
/**
|
||||
* 是否需要父级全屏
|
||||
*/
|
||||
isParentFullscreen: boolean;
|
||||
/**
|
||||
* 是否在iframe区域内全屏
|
||||
*/
|
||||
isIframeViewFullscreen: boolean;
|
||||
/**
|
||||
* 是否在浏览器区域内全屏
|
||||
*/
|
||||
isBrowserViewFullscreen: boolean;
|
||||
}
|
||||
/**
|
||||
* 文字自定义配置
|
||||
*/
|
||||
interface IWpsOptions {
|
||||
/**
|
||||
* 是否显示目录
|
||||
*/
|
||||
isShowDocMap?: boolean;
|
||||
/**
|
||||
* 默认以最佳显示比例打开
|
||||
*/
|
||||
isBestScale?: boolean;
|
||||
/**
|
||||
* pc-是否展示底部状态栏
|
||||
*/
|
||||
isShowBottomStatusBar?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格自定义配置
|
||||
*/
|
||||
interface IEtOptions {
|
||||
/**
|
||||
* pc-是否展示底部状态栏
|
||||
*/
|
||||
isShowBottomStatusBar?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* pdf自定义配置
|
||||
*/
|
||||
interface IPDFOptions {
|
||||
isShowComment?: boolean;
|
||||
isInSafeMode?: boolean;
|
||||
/**
|
||||
* pc-是否展示底部状态栏
|
||||
*/
|
||||
isShowBottomStatusBar?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 演示自定义配置
|
||||
*/
|
||||
interface IWppOptions {
|
||||
/**
|
||||
* pc-是否展示底部状态栏
|
||||
*/
|
||||
isShowBottomStatusBar?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据表自定义配置
|
||||
*/
|
||||
interface IDBOptions {
|
||||
/**
|
||||
* 是否显示使用反馈按钮
|
||||
*/
|
||||
isShowFeedback?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义用户通用事件订阅
|
||||
*/
|
||||
interface ISubscriptionsConf {
|
||||
[key: string]: any;
|
||||
/**
|
||||
* 导航事件
|
||||
*/
|
||||
navigate: (arg0?: any) => any;
|
||||
/**
|
||||
* WPSWEB ready 事件
|
||||
*/
|
||||
ready: (arg0?: any) => any;
|
||||
/**
|
||||
* 打印事件
|
||||
*/
|
||||
print?: {
|
||||
custom?: boolean,
|
||||
subscribe: (arg0?: any) => any,
|
||||
};
|
||||
/**
|
||||
* 导出 PDF 事件
|
||||
*/
|
||||
exportPdf?: (arg0?: any) => any;
|
||||
}
|
||||
|
||||
interface ITokenData {
|
||||
token: string;
|
||||
timeout: number;
|
||||
}
|
||||
|
||||
interface IClipboardData {
|
||||
text: string;
|
||||
html: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户配置
|
||||
*/
|
||||
interface IConfig {
|
||||
/**
|
||||
* WPSWEB iframe 挂载点
|
||||
*/
|
||||
mount?: HTMLElement;
|
||||
/**
|
||||
* url参数
|
||||
*/
|
||||
url?: string;
|
||||
wpsUrl?: string; // 即将废弃
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
headers?: IUserHeadersConf;
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
mode?: 'nomal' | 'simple';
|
||||
/**
|
||||
* 通用配置
|
||||
*/
|
||||
commonOptions?: ICommonOptions;
|
||||
/**
|
||||
* 文字自定义配置
|
||||
*/
|
||||
wpsOptions?: IWpsOptions;
|
||||
wordOptions?: IWppOptions;
|
||||
/**
|
||||
* 表格自定义配置
|
||||
*/
|
||||
etOptions?: IEtOptions;
|
||||
excelOptions?: IEtOptions;
|
||||
/**
|
||||
* 演示自定义配置
|
||||
*/
|
||||
wppOptions?: IWppOptions;
|
||||
pptOptions?: IWppOptions;
|
||||
/**
|
||||
* pdf自定义配置
|
||||
*/
|
||||
pdfOptions?: IPDFOptions;
|
||||
/**
|
||||
* db自定义配置
|
||||
*/
|
||||
dbOptions?: IDBOptions;
|
||||
/**
|
||||
* 事件订阅
|
||||
*/
|
||||
subscriptions?: ISubscriptionsConf;
|
||||
// 调试模式
|
||||
debug?: boolean;
|
||||
commandBars?: IWpsCommandBars[];
|
||||
print?: {
|
||||
custom?: boolean,
|
||||
callback?: string,
|
||||
};
|
||||
|
||||
exportPdf?: {
|
||||
callback?: string,
|
||||
};
|
||||
|
||||
// 获取token
|
||||
refreshToken?: TRefreshToken;
|
||||
|
||||
cooperUserAttribute?: {
|
||||
isCooperUsersAvatarVisible?: boolean,
|
||||
cooperUsersColor?: [{
|
||||
userId: string | number,
|
||||
color: string,
|
||||
}],
|
||||
};
|
||||
}
|
||||
|
||||
// type eventConfig = {
|
||||
// eventName: cbEventNames,
|
||||
// }
|
||||
|
||||
/** ============================= */
|
||||
interface IMessage {
|
||||
eventName: string;
|
||||
msgId?: string;
|
||||
callbackId?: number;
|
||||
data?: any;
|
||||
url?: any;
|
||||
result?: any;
|
||||
error?: any;
|
||||
_self?: boolean;
|
||||
sdkInstanceId?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* WPSWEBAPI
|
||||
*/
|
||||
interface IWpsWebApi {
|
||||
WpsApplication?: () => any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具栏
|
||||
*/
|
||||
interface IWpsCommandBars {
|
||||
cmbId: string;
|
||||
attributes: IWpsCommandBarAttr[] | IWpsCommandBarObjectAttr;
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具栏属性
|
||||
*/
|
||||
interface IWpsCommandBarAttr {
|
||||
name: string;
|
||||
value: any;
|
||||
}
|
||||
/**
|
||||
* 工具栏属性
|
||||
*/
|
||||
interface IWpsCommandBarObjectAttr {
|
||||
[propName: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* D.IWPS 定义
|
||||
*/
|
||||
|
||||
interface IWps extends IWpsCompatible {
|
||||
version: string;
|
||||
url: string;
|
||||
iframe: any;
|
||||
Enum? : any; // 即将废弃
|
||||
Events?: any; // 即将废弃
|
||||
Props?: string;
|
||||
advancedApiReady: () => Promise<any>;
|
||||
/**
|
||||
* 兼容1.x用法
|
||||
*/
|
||||
ready?:() => Promise<any>;
|
||||
destroy: () => Promise<any>;
|
||||
WpsApplication?: () => any;
|
||||
WordApplication?: () => any;
|
||||
EtApplication?: () => any;
|
||||
ExcelApplication?: () => any;
|
||||
WppApplication?: () => any;
|
||||
PPTApplication?: () => any;
|
||||
PDFApplication?: () => any;
|
||||
Application?: any;
|
||||
CommonApi?: any;
|
||||
commonApiReady: () => Promise<any>;
|
||||
setToken: (tokenData: {
|
||||
token: string, timeout?: number, hasRefreshTokenConfig: boolean,
|
||||
}) => Promise<any>;
|
||||
tokenData?: { token: string } | null;
|
||||
commandBars?: IWpsCommandBars[] | null;
|
||||
iframeReady?: boolean;
|
||||
on: (eventName: string, handle: (event?: any) => void) => void;
|
||||
off: (eventName: string, handle: (event?: any) => void) => void;
|
||||
Stack?: any;
|
||||
Free?: (objId: any) => Promise<any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 兼容1.x用法
|
||||
*/
|
||||
interface IWpsCompatible {
|
||||
tabs?: {
|
||||
getTabs: () => Promise<Array<{tabKey: number, text: string}>>
|
||||
switchTab: (tabKey: number) => Promise<any>,
|
||||
}
|
||||
setCommandBars?: (args: Array<IWpsCommandBars>) => Promise<void>;
|
||||
save?: () => Promise<any>;
|
||||
ApiEvent?: {
|
||||
AddApiEventListener: (eventName: string, handle: (event?: any) => void) => void
|
||||
RemoveApiEventListener: (eventName: string, handle: (event?: any) => void) => void
|
||||
}
|
||||
executeCommandBar?: (id: string) => void
|
||||
}
|
||||
|
||||
interface IFlag {
|
||||
advancedApiReadySended: boolean;
|
||||
advancedApiReadySendedJust: boolean;
|
||||
commonApiReadySended: boolean;
|
||||
commonApiReadySendedJust: boolean;
|
||||
}
|
||||
|
||||
interface ICbEvent {
|
||||
refreshToken?: TRefreshToken;
|
||||
}
|
||||
|
||||
interface IWebOfficeSDK {
|
||||
config: (conf: IConfig) => IWps | undefined;
|
||||
init: (conf: IAppConfig) => IWps | undefined;
|
||||
OfficeType: OfficeType;
|
||||
}
|
||||
|
||||
interface IReadyEvent {
|
||||
event: string;
|
||||
callback?: (...args: any) => void;
|
||||
after?: boolean;
|
||||
}
|
||||
|
||||
type TRefreshToken = () => ITokenData | Promise<ITokenData>;
|
||||
|
||||
type sendMsgToWps = (msg: IMessage) => void;
|
||||
type getId = () => string;
|
||||
|
||||
interface IAppConfig extends IConfig {
|
||||
appId: string;
|
||||
fileId: string | number;
|
||||
officeType: string;
|
||||
/**
|
||||
* @deprecated use token instead
|
||||
*/
|
||||
fileToken?: string | ITokenData;
|
||||
token?: string | ITokenData;
|
||||
endpoint?: string;
|
||||
customArgs?: Record<string, string | number>;
|
||||
/**
|
||||
* @deprecated A config item for WebOfficeSDK.config
|
||||
*/
|
||||
url?: string;
|
||||
mount?: any;
|
||||
attrAllow: string | string[];
|
||||
isListenResize?: boolean; // sdk内部是否监听resize变化，默认监听
|
||||
}
|
||||
|
||||
type OfficeType = {
|
||||
Spreadsheet: string,
|
||||
Writer: string,
|
||||
Presentation: string,
|
||||
Pdf: string,
|
||||
Otl: string
|
||||
}
|
||||
|
||||
export { IAppConfig, ICbEvent, IClipboardData, ICommonOptions, IConfig, IDBOptions, IEtOptions, IFlag, IIframeWH, IMessage, IPDFOptions, IReadyEvent, ISubscriptionsConf, ITokenData, IUserHeaderButtonConf, IUserHeaderSubItemsConf, IUserHeadersConf, IWebOfficeSDK, IWppOptions, IWps, IWpsCommandBarAttr, IWpsCommandBarObjectAttr, IWpsCommandBars, IWpsCompatible, IWpsOptions, IWpsWebApi, OfficeType, TRefreshToken, getId, sendMsgToWps };
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue