ct-answer-designer
v1.0.5
Published
Vue3工单组件库，包含PC端和移动端工单组件
Downloads
36
Maintainers
zsc1678593083Readme
ct-answer-designer
Vue3 工单组件库，包含 PC 端和移动端工单组件
版本
当前版本：1.0.0
安装
方式 1：从 npm 安装（推荐）
npm install ct-answer-designer方式 2：本地开发引用
npm install file:../ctAnswerDesigner方式 3：直接使用 dist 文件
将 dist 文件夹复制到你的项目中，然后直接引入。
依赖要求
必须安装以下 peer dependencies：
npm install vue@^3.3.0 \
axios@^1.6.0 \
element-plus@^2.4.0 \
vant@^4.9.21 \
@element-plus/icons-vue@^2.3.1 \
@form-create/element-ui@^3.2.27 \
@form-create/vant@^3.2.28 \
js-cookie@^3.0.5或一次性安装所有依赖：
{
"dependencies": {
"vue": "^3.3.0",
"axios": "^1.6.0",
"element-plus": "^2.4.0",
"vant": "^4.9.21",
"@element-plus/icons-vue": "^2.3.1",
"@form-create/element-ui": "^3.2.27",
"@form-create/vant": "^3.2.28",
"js-cookie": "^3.0.5",
"ct-answer-designer": "^1.0.0"
}
}使用方法
1. 引入静态资源（重要！）
步骤 1：复制静态文件到 public 目录
# 从 node_modules 复制 AuthingSSO 到你的 public 目录
cp -r node_modules/ct-answer-designer/public/static public/步骤 2：在 HTML 中引入 Authing SSO SDK
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>工单系统</title>
<!-- 引入 Authing SSO SDK（SSO 登录必需） -->
<script src="/static/AuthingSSO.umd.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>重要说明：
- ✅
static/AuthingSSO.umd.min.js必须复制到 public 目录 - ✅
fcDesignerPro文件不需要复制，直接从 node_modules 引用即可
2. 完整引入
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Vant from 'vant'
import 'vant/lib/index.css'
// 引入 form-create 相关（直接从 node_modules 引用）
import FcDesigner from 'ct-answer-designer/fcDesignerPro/dist/index.es.js'
import formCreateMobile from 'ct-answer-designer/fcDesignerPro/dist/render/vant/form-create.es.js'
// 引入组件库
import CtAnswerDesigner from 'ct-answer-designer'
import 'ct-answer-designer/dist/style.css'
const app = createApp(App)
// 注册 form-create（PC端 和 移动端）
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
app.use(formCreateMobile)
// 注册 ElementPlus 和 Vant
app.use(ElementPlus)
app.use(Vant)
// 注册工单组件
app.use(CtAnswerDesigner)
app.mount('#app')引用路径说明：
- ✅
ct-answer-designer/fcDesignerPro/dist/index.es.js- PC端表单设计器 - ✅
ct-answer-designer/fcDesignerPro/dist/render/vant/form-create.es.js- 移动端表单（Vant） - ✅
ct-answer-designer/fcDesignerPro/dist/render/element-plus/form-create.es.js- PC端表单（Element Plus）
3. 按需引入组件
import { WorkOrderPc, WorkOrderMobile } from 'ct-answer-designer'
import 'ct-answer-designer/dist/style.css'
// 在组件中使用
export default {
components: {
WorkOrderPc,
WorkOrderMobile
}
}4. 在模板中使用
PC 端工单组件
<template>
<work-order-pc
:order-info="orderInfo"
@login-success="handleLoginSuccess"
@logout="handleLogout"
@submit-success="handleSubmitSuccess"
@submit-error="handleSubmitError"
/>
</template>
<script setup>
import { ref } from 'vue'
const orderInfo = ref({
paperUuid: 'xxx-xxx-xxx', // 工单 UUID（必需）
testId: 'xxx', // 测试 ID（查看模式时需要）
result: '1' // 是否为查看模式（'1' 表示查看已提交的工单）
})
const handleLoginSuccess = (userInfo) => {
console.log('登录成功:', userInfo)
}
const handleLogout = () => {
console.log('已退出登录')
}
const handleSubmitSuccess = (data) => {
console.log('提交成功:', data)
}
const handleSubmitError = (error) => {
console.error('提交失败:', error)
}
</script>移动端工单组件
<template>
<work-order-mobile
:order-info="orderInfo"
@login-success="handleLoginSuccess"
@logout="handleLogout"
@submit-success="handleSubmitSuccess"
@submit-error="handleSubmitError"
/>
</template>
<script setup>
import { ref } from 'vue'
const orderInfo = ref({
paperUuid: 'xxx-xxx-xxx', // 工单 UUID（必需）
testId: 'xxx', // 测试 ID（查看模式时需要）
result: '1' // 是否为查看模式
})
// 事件处理方法同上...
</script>Props 参数说明
orderInfo
| 参数 | 说明 | 类型 | 必填 | 默认值 | |------|------|------|------|--------| | paperUuid | 工单 UUID | String | 是 | - | | testId | 测试 ID（查看模式时需要） | String | 否 | - | | result | 是否为查看模式（'1' 表示查看已提交） | String | 否 | - |
Events 事件说明
| 事件名 | 说明 | 回调参数 | |--------|------|----------| | login-success | 登录成功时触发 | userInfo: 用户信息对象 | | logout | 退出登录时触发 | - | | submit-success | 工单提交成功时触发 | data: { formData, response } | | submit-error | 工单提交失败时触发 | error: 错误对象 |
特性
- ✅ 支持 PC 端和移动端
- ✅ 内置 SSO 单点登录
- ✅ 支持动态表单（基于 form-create）
- ✅ 移动端支持图片查看和表单填写
- ✅ 美观的现代化 UI 设计
- ✅ 响应式布局
- ✅ 完整的 TypeScript 支持
注意事项
引入 Authing SSO SDK
如果使用 SSO 登录，需要在 HTML 中引入 Authing SSO SDK：
<script src="/static/AuthingSSO.umd.min.js"></script>API 配置
组件内部使用
src/utils/setting.js中的配置，请根据实际情况修改 API 地址。依赖版本
- Vue 3.3+
- Element Plus 2.4+
- Vant 4.9.21
- Axios 1.6+
开发
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建
npm run build
# 预览
npm run previewLicense
MIT