Cthep-ui NPM | npm.io

https://gitee.com/geshijia/cthep-ui.git

本组件依赖element-plus如果你的项目里没有element-plus请先引入element-plus https://element-plus.gitee.io/zh-CN/guide/quickstart.html

main.js注册element-plus和图标

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')

安装插件

npm install cthep-ui

找到node_modules/cthep-ui把tinymce文件夹拷贝到自己的项目public/static文件下（如果没有static文件自己创建一个）

在main.js注册全部组件（也可在页面按需引入）

import cthepUi from "cthep-ui";
import "cthep-ui/index.css";
Vue.use(cthepUi);

录题组件ctAddQuestion

<template>
  <ctAddQuestion :questionDbId="100" questionType="单选题" token="" @close="close" @save="save" @saveBack="saveBack" domainName="" tinymceUrl=""></ctAddQuestion>
</template>
<script setup>
//选填
//checkout 传0则不校验是否存在正确答案
//addType 不传或传0点击保存会调用爱习题接口保存到爱习题，传1保存到本地
//questionConfig 题库配置,没有传入会调用爱习题接口查询
//修改时传入参数
//questionUuid 试题uuid,传入即为修改试题
//serialNumber 试题编号，修改时传入
//data 修改源数据，传入即为修改试题（注意questionUuid和data只能传一个）
data格式在cthep-ui/data.json
//必传参数
//token 传入或者本地有可用token（本地存在cookie里Admin-Token）
//domainName   网站域名
//tinymceUrl   编辑器上传文件接口
//questionDbId  题库ID(如果传入questionConfig则此参数无效但是需要随意传一个数)
//questionType 当前录入题型（支持题型可以看根目录下的questionConfig.json文件里面的type数组里的dbName字段，因为在爱习题,题型名称可以自定义名称，所以取中文名称）
url:{
      imgUpload: "https://ct.hep.com.cn/ct-api-online/api/oss/aliyun/upload",//文件上传地址
      exam_resources: 'https://ct.hep.com.cn/ct-api-online/api/data/search/exam_resources',//获取附件列表
      questiondb_allpz: 'https://ct.hep.com.cn/ct-api-online/api/data/search/questiondb_allpz',//获取题库配置
      addSubmit: 'https://ct.hep.com.cn/ct-api-online/api/commonPage/question/addSubmit',//保存试题
      get: 'https://ct.hep.com.cn/ct-api-online/api/commonPage/question/get',//获取试题详情
      resources_add: 'https://ct.hep.com.cn/ct-api-online/api/data/search/resources_add',//新增附件
      resources_delete: 'https://ct.hep.com.cn/ct-api-online/api/data/search/resources_delete',//删除附件
      question_updatejson: 'https://ct.hep.com.cn/ct-api-online/api/data/search/question_updatejson',//修改附件
    } 录题用到的所有接口,所有接口均需要传递token
import ctAddQuestion from 'cthep-ui/components/add-question/index.vue'//按需引入组件（如已在main.js注册了所有组件则不需要此操作）
import questionConfig from 'cthep-ui/questionConfig.json'//引入题库配置测试数据（注意，这个文件只能测试使用，正确方法应该通过url.questiondb_allpz接口获取）
const close = (data) => {//点击关闭时触发
  console.log(data);
}
const save = (data) => {//点击保存并录入下一题触发，触发后请重新渲染此组件已达到刷新组件的效果
  console.log(data);
}
const saveBack = (data) => {//保存并关闭时触发
  console.log(data);
}
</script>

接口要求

注意tinymceUrl接口必须按照以下标准
token 传输使用Authorization方式 并需要在前面加Bearer（前端传token不需要加Bearer会自动带）
返回参数格式为 {
    "msg": "ok!",
    "path": "/fileFolder/mathImageFolder/278a5ac9-21b8-4d39-b548-9d7ece2355c4.jpg",
    "code": 200
}
  //上传文件源码
      var xhr, formData;
      var file = blobInfo.blob(); //转化为易于理解的file对象
      if (file.size > 5242880) return failFun("图片大小不能超过5M");
      if (!["image/jpeg", "image/png", "image/gif"].includes(file.type))
        return failFun("只能上传JPG、PNG、GIF图片");
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open("POST", url.value);
      xhr.setRequestHeader("Authorization", "Bearer " + getToken());
      xhr.onload = function () {
        var json = JSON.parse(xhr.responseText);
        if (json.code != 200) {
          failFun("HTTP Error: " + json.error);
          return;
        }
        succFun(localStorage.getItem('domainName') + json.path, { alt: "文件" });
      };
      formData = new FormData();
      formData.append("file", file, file.name); //此处与源文档不一样
      xhr.send(formData);