yks-element 1.0.317 → 1.0.320

package/packages/Topic/src/single.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="single">
+        <div class="single-stem__label required__label">题干</div>
+        <yks-tinymce
+            key="itemContent"
+            :value="fromData.itemContent"
+            :toolbar="toolbar"
+            :plugins="plugins"
+            :charLimit="topicDataExtent.itemContentLength || 20000"
+            
+            :fileParams="getFileTypes('stem', fromData.stemAttrs)"
+            :uploadFileToHwCloud="uploadFileToHwCloud"
+            :uploadFileFunction="uploadFileFunction"
+            menubar=""
+            height="200px"
+            @change="($event) => getTinymceEdit($event, 'stem')"
+            @delte="($event) => handleDelteAttrs($event, 'stem', fromData.stemAttrs)"
+        />
+
+        <div class="yks-flex single-single">
+            <span class="single-single__label required__label">选项</span>
+            <span class="yks-fs-12 yks-info">请在编辑完选项后选择正确的答案</span>
+        </div>
+        <el-radio-group v-model="fromData.answer">
+            <div
+                v-for="(item, index) in fromData.itemList"
+                :key="`itemList${index}`"
+                class="yks-flex v-start yks-mb10"
+            >
+                <el-radio :label="item.optionName" class="yks-w_60 yks-mr10"></el-radio>
+                <yks-tinymce
+                    :key="`itemList${index}`"
+                    :value="item.content"
+                    :toolbar="toolbar"
+                    :plugins="plugins"
+                    :charLimit="topicDataExtent.answerLength || 5000"
+                    
+                    :fileParams="getFileTypes('option', item.optionAttrs)"
+                    :uploadFileToHwCloud="uploadFileToHwCloud"
+                    :uploadFileFunction="uploadFileFunction"
+                    inline
+                    height="80px"
+                    menubar=""
+                    class="flex-1 radio-tinymce"
+                    @change="($event) => changeItem($event, item)"
+                    @delte="($event) => handleDelteAttrs($event, 'option', item.optionAttrs, item)"
+                />
+                <el-button
+                    v-if="fromData.itemList.length > 2"
+                    type="text"
+                    class="yks-danger"
+                    @click="handleDelte(index)"
+                    >删除</el-button
+                >
+            </div>
+        </el-radio-group>
+        <el-button v-if="fromData.itemList.length < 14" type="primary" @click="handleAddItem"
+            >新增选项</el-button
+        >
+        <div class="single-stem__label">答案解析</div>
+        <yks-tinymce
+            key="description"
+            :value="fromData.description"
+            :toolbar="toolbar"
+            :plugins="plugins"
+            :charLimit="topicDataExtent.descriptionLength || 20000"
+            
+            :fileParams="getFileTypes('analysis', fromData.descriptionAttrs)"
+            :uploadFileToHwCloud="uploadFileToHwCloud"
+            :uploadFileFunction="uploadFileFunction"
+            menubar=""
+            height="200px"
+            @change="($event) => getTinymceEdit($event, 'analysis')"
+            @delte="($event) => handleDelteAttrs($event, 'analysis', fromData.descriptionAttrs)"
+        />
+    </div>
+</template>
+<script>
+import YksTinymce from '../../Tinymce/index'
+import TopicMixins from '../../assets/mixins/topic'
+import { letter, stemItemType, optionItemType, analysisItemType } from './config'
+
+export default {
+    name: 'Single',
+    components: { YksTinymce },
+    mixins: [TopicMixins],
+    methods: {
+        /**
+         * data 富文本数据
+         * field 对象名
+         * type 类型
+         */
+        getTinymceEdit(data, type) {
+            switch (type) {
+                case 'stem':
+                    data.itemAttr.type = stemItemType[data.itemAttr.type]
+                    this.fromData.itemContent = data.value
+                    if (data.itemAttr.type && data.itemAttr.content) {
+                        this.fromData.stemAttrs.push(data.itemAttr)
+                    }
+                    break
+                case 'analysis':
+                    data.itemAttr.type = analysisItemType[data.itemAttr.type]
+                    this.fromData.description = data.value
+                    if (data.itemAttr.type && data.itemAttr.content) {
+                        this.fromData.descriptionAttrs.push(data.itemAttr)
+                    }
+                    break
+                default:
+                    break
+            }
+            this.$emit('change', this.fromData)
+        },
+
+        changeItem(data, row) {
+            data.itemAttr.type = optionItemType[data.itemAttr.type]
+            if (data.itemAttr.type && data.itemAttr.content) {
+                row.optionAttrs.push(data.itemAttr)
+                this.$set(row, 'optionAttrs', row.optionAttrs)
+            }
+            this.$set(row, 'content', data.value)
+            this.$emit('change', this.fromData)
+        },
+
+        handleDelte(index) {
+            const { itemList } = this.fromData
+            itemList.splice(index, 1)
+            this.fromData.itemList = itemList.map((v, index) => {
+                return {
+                    ...v,
+                    optionName: letter[index]
+                }
+            })
+            this.$emit('change', this.fromData)
+        },
+
+        handleDelteAttrs(data, type, list, row = {}) {
+            const listAttrs = list
+            listAttrs.splice(data.index, 1)
+            switch (type) {
+                case 'stem':
+                    this.fromData.stemAttrs = listAttrs
+                    break
+                case 'option':
+                    this.$set(row, 'optionAttrs', listAttrs)
+                    break
+                case 'analysis':
+                    this.fromData.descriptionAttrs = listAttrs
+                    break
+                default:
+                    break
+            }
+            this.$emit('change', this.fromData)
+        },
+
+        handleAddItem() {
+            const { itemList } = this.fromData
+            this.fromData.itemList.push({
+                optionName: letter[itemList.length],
+                content: '',
+                optionAttrs: []
+            })
+
+            this.$emit('change', this.fromData)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.single-single {
+    margin: 30px 0;
+    .single-single__label {
+        font-weight: 700;
+        font-size: 18px;
+        width: 100px;
+    }
+}
+.single-stem__label {
+    font-weight: 700;
+    font-size: 18px;
+    margin: 30px 0;
+}
+.radio-tinymce {
+    font-size: 14px;
+    margin-right: 20px;
+}
+
+::v-deep {
+    .el-radio-group {
+        display: block;
+    }
+}
+</style>

package/packages/UploadFile/src/index.vue

@@ -102,8 +102,7 @@ export default {
         },
         /* 上传函数 */
         uploadFileFunction: {
-            type: Function,
-            required: true
+            type: Function
         },
         /* 
             fileType: 上传类型 

package/packages/assets/mixins/topic.js

@@ -0,0 +1,137 @@
+import { toolbar, plugins, toolbarSpare } from '../utils/topic'
+
+export default {
+    model: {
+        prop: 'fromData',
+        event: 'change'
+    },
+    props: {
+        topicDataExtent: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        uploadFileCloud: {
+            required: true,
+            type: Function
+        },
+        fromData: {
+            required: true,
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            pageLoading: false,
+            processing: false,
+            toolbar: toolbar,
+            toolbarSpare: toolbarSpare,
+            plugins: plugins,
+            topic: {
+                single: '单项选择题',
+                multiple: '多项选择题',
+                judgment: '判断题',
+                short_answer: '简答题'
+            }
+        }
+    },
+    methods: {
+        /**
+         * 获取题类型
+         * @param {string} type
+         * @return {Object}
+         */
+        getFileType(type, data) {
+            if (data) {
+                let params = {}
+                switch (type) {
+                    case 'stem':
+                        params = {
+                            stem_voiceRecord: 'recording',
+                            stem_video: 'video',
+                            stem_audio: 'audio',
+                            stem_document: 'file'
+                        }
+                        break
+                    case 'answer':
+                        params = {
+                            answer_voiceRecord: 'recording',
+                            answer_video: 'video',
+                            answer_audio: 'audio',
+                            answer_document: 'file'
+                        }
+                        break
+                    case 'option':
+                        params = {
+                            option_voiceRecord: 'recording',
+                            option_video: 'video',
+                            option_audio: 'audio',
+                            option_document: 'file'
+                        }
+                        break
+                    case 'analysis':
+                        params = {
+                            description_voiceRecord: 'recording',
+                            description_video: 'video',
+                            description_audio: 'audio',
+                            description_document: 'file'
+                        }
+                        break
+                }
+                const fileType = params[data.type]
+
+                return {
+                    ...data,
+                    fileType
+                }
+            }
+            return false
+        },
+        getFileTypes(type, list) {
+            return (list || []).map((v) => this.getFileType(type, v))
+        },
+        async uploadFileToHwCloud(file) {
+            try {
+                const fileData = new FormData()
+                fileData.append('fileType', 'stem')
+                fileData.append('file', file.blob())
+                const { data, code } = await this.uploadFileCloud(fileData)
+                if (code === 20000) {
+                    return data
+                } else {
+                    return ''
+                }
+            } catch (error) {
+                console.log(error)
+                return ''
+            }
+        },
+        async uploadFileFunction({ file, fileData }) {
+            try {
+                const fileDatas = new FormData()
+                if (fileData.fileType === 'recording') {
+                    const fileNmae = Date.now() + '.mp3'
+                    const files = new File([file.data], fileNmae)
+                    fileDatas.append('fileType', 'multimediaFile')
+                    fileDatas.append('file', files)
+                } else {
+                    fileDatas.append('fileType', 'multimediaFile')
+                    fileDatas.append('file', file.raw)
+                }
+                const { data, code } = await this.uploadFileCloud(fileDatas)
+                if (code === 20000) {
+                    return data
+                } else {
+                    return Promise.reject(new Error('出错了'))
+                }
+            } catch (error) {
+                console.log(error)
+                return Promise.reject(error)
+            }
+        }
+    }
+}

package/packages/assets/utils/topic.js

@@ -0,0 +1,132 @@
+/**
+ * uploadRecording 录音
+ * uploadVideo 视频
+ * uploadAudio 音频
+ * uploadFile 文件
+ */
+
+export const toolbar = [
+    'bold underline italic strikethrough | kityformula-editor subscript superscript charmap | link image | table | removeformat | uploadRecording uploadVideo uploadAudio uploadFile'
+]
+
+/* 选项、填空等 */
+export const toolbarSpare = ['kityformula-editor subscript superscript charmap']
+
+/* 插件 */
+export const plugins = ['kityformula-editor powerpaste lists image media table charmap imagetools']
+
+/* 选项字符 */
+export const letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）：题干 / 标题 - 类型 */
+export const stemItemType = {
+    recording: 'stem_voiceRecord',
+    video: 'stem_video',
+    audio: 'stem_audio',
+    file: 'stem_document'
+}
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）： 标准答案 - 类型 */
+export const shortItemType = {
+    recording: 'answer_voiceRecord',
+    video: 'answer_video',
+    audio: 'answer_audio',
+    file: 'answer_document'
+}
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）： 选项  - 类型 */
+export const optionItemType = {
+    recording: 'option_voiceRecord',
+    video: 'option_video',
+    audio: 'option_audio',
+    file: 'option_document'
+}
+
+/* 自定义添加菜单项（录音、上传视频、上传音乐、上传文件）： 答案解析 - 类型 */
+export const analysisItemType = {
+    recording: 'description_voiceRecord',
+    video: 'description_video',
+    audio: 'description_audio',
+    file: 'description_document'
+}
+
+/**
+ * 获取题类型
+ * @param {string} type
+ * @return {Object}
+ */
+export const getFileType = (type, data) => {
+    if (data) {
+        let params = {}
+        switch (type) {
+            case 'stem':
+                params = {
+                    stem_voiceRecord: 'recording',
+                    stem_video: 'video',
+                    stem_audio: 'audio',
+                    stem_document: 'file'
+                }
+                break
+            case 'answer':
+                params = {
+                    answer_voiceRecord: 'recording',
+                    answer_video: 'video',
+                    answer_audio: 'audio',
+                    answer_document: 'file'
+                }
+                break
+            case 'option':
+                params = {
+                    option_voiceRecord: 'recording',
+                    option_video: 'video',
+                    option_audio: 'audio',
+                    option_document: 'file'
+                }
+                break
+            case 'analysis':
+                params = {
+                    description_voiceRecord: 'recording',
+                    description_video: 'video',
+                    description_audio: 'audio',
+                    description_document: 'file'
+                }
+                break
+        }
+        const fileType = params[data.type]
+
+        return {
+            ...data,
+            fileType
+        }
+    }
+    return false
+}
+
+export const itemDataLists = () => {
+    return [
+        {
+            optionName: 'A',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        },
+        {
+            optionName: 'B',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        },
+        {
+            optionName: 'C',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        },
+        {
+            optionName: 'D',
+            content: '',
+            optionAttrs: [],
+            score: ''
+        }
+    ]
+}

package/packages/index.js

@@ -94,6 +94,18 @@ import YksUploadfile from './UploadFile'
 import YksVideo from './Video'
 import YksOption from './option/index'
 
+import {
+    Single,
+    Multiple,
+    Judgment,
+    FillInBlanks,
+    ShortAnswer,
+    PictureAnswer,
+    Compound,
+    AudioFrequency,
+    Attachment
+  } from './Topic/index'
+
 import locale from 'element-ui/src/locale'
 const components = [
     YskButton,
@@ -136,10 +148,19 @@ if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue)
 }
 export default {
-    version: '1.0.317',
+    version: '1.0.320',
     locale: locale.use,
     i18n: locale.i18n,
     install,
+    Single,
+    Multiple,
+    Judgment,
+    FillInBlanks,
+    ShortAnswer,
+    PictureAnswer,
+    Compound,
+    AudioFrequency,
+    Attachment,
     /* element-ui */
     Pagination,
     Dialog,

package/packages/styles/common.scss

@@ -1,3 +1,7 @@
+@import './variables';
+@import './mixin';
+@import './element-variables';
+
 * {
     box-sizing: border-box;
 }
@@ -61,6 +65,10 @@
     -webkit-line-clamp: 4;
 }
 
+.yks-w_60 {
+    width: 60px !important;
+}
+
 .yks-w_80 {
     width: 80px !important;
 }
@@ -132,7 +140,7 @@
     &.f-wrap {
         flex-wrap: wrap;
     }
-    
+
     .flex-1 {
         flex: 1;
     }
@@ -165,3 +173,28 @@
 .yks-fs-12 {
     font-size: 12px;
 }
+
+.yks-primary {
+    color: $--color-primary;
+}
+
+.yks-success {
+    color: $--color-success;
+}
+
+.yks-warning {
+    color: $--color-warning;
+}
+
+.yks-info {
+    color: $--color-info;
+}
+
+.yks-danger {
+    color: $--color-danger;
+}
+
+.yks-disabled {
+    cursor: no-drop !important;
+    opacity: 0.5 !important;
+}

package/packages/styles/index.scss

@@ -2,9 +2,10 @@
 @import './mixin';
 @import './element-variables';
 // @import '~element-ui/lib/theme-chalk/index.css';
-@import '~element-ui/packages/theme-chalk/src/index.scss';
-@import './element-ui.scss';
-@import './common.scss';
-@import './icon.scss';
-@import './select.scss';
-@import './table.scss';
+@import '~element-ui/packages/theme-chalk/src/index';
+@import './element-ui';
+@import './common';
+@import './icon';
+@import './select';
+@import './table';
+@import './topic'

package/packages/styles/topic.scss

@@ -0,0 +1,26 @@
+@import './variables';
+@import './mixin';
+@import './element-variables';
+
+.required__label {
+    position: relative;
+    &::before {
+        content: '*';
+        color: $--color-danger;
+        margin-right: 4px;
+    }
+}
+
+.text__warning {
+    color: $--color-danger;
+}
+
+.fill__other {
+    font-size: 12px;
+    padding: 10px;
+    background: #e1f5fe;
+    border: #bbdefb solid 1px;
+    border-radius: 5px;
+    margin-top: 10px;
+}
+