ct-answer-designer

Vue3工单组件库，包含PC端和移动端工单组件
2,155
vue3 component element-plus workorder
Install
npm install ct-answer-designer
Latest Version:1.1.6
Vue:3
License:MIT
Last Updated:Oct 13, 2026
Links: npm
Maintainer: zsc1678593083

ct-answer-designer

Vue3 工单组件库，包含 PC 端和移动端工单组件

npm version license

版本

当前版本：1.1.5

使用方式

方式一：Vue 组件方式（推荐用于 Vue 项目）

import CtAnswerDesigner from 'ct-answer-designer'
import 'ct-answer-designer/dist/style.css'

app.use(CtAnswerDesigner)

方式二：SDK 函数式（推荐用于 React/其他框架）

import { initWorkOrderPc } from 'ct-answer-designer/sdk'
import 'ct-answer-designer/dist/style.css'

initWorkOrderPc({
  containerId: 'work-order-container',
  orderInfo: { paperUuid: 'your-uuid' }
})

📖 查看 SDK 文档

安装

方式 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 支持

注意事项

  1. 引入 Authing SSO SDK

    如果使用 SSO 登录，需要在 HTML 中引入 Authing SSO SDK：

    <script src="/static/AuthingSSO.umd.min.js"></script>

  2. API 配置

    组件内部使用 src/utils/setting.js 中的配置，请根据实际情况修改 API 地址。

  3. 依赖版本

    • Vue 3.3+
    • Element Plus 2.4+
    • Vant 4.9.21
    • Axios 1.6+

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 预览
npm run preview

License

MIT

Related Packages

@element-plus/nuxt

Element Plus module for Nuxt

830,141 176
element-plus nuxt
earthsdk-ui

基于 vue3、element-plus、earthsdk3 构建的 EarthSDK UI 组件库，提供丰富的 UI 组件...

11,530
element-plus earthsdk3
monose-component-vue

Vue3 ElementPlus 二次封装组件库

3,327
element-plus vue3
zb-ep

vue3 and element-plus components

2,744
element-plus vue3
slb_public_components

This is a Vue3 + ts + ELement-Plus pulic components.

1,804
element-plus vue

Version History

Version Released Vue License
1.1.6 ^3.3.0 MIT
1.1.5 ^3.3.0 MIT
1.1.4 ^3.3.0 MIT
1.1.3 ^3.3.0 MIT
1.1.2 ^3.3.0 MIT