yks-element 1.0.0 → 1.0.4

package/packages/Topic/src/shortAnswer.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="single">
+        <div class="topic-stem__label required__label">题干</div>
+        <yks-tinymce
+            key="itemContent"
+            v-model="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="topic-stem__label required__label">标准答案</div>
+        <yks-tinymce
+            key="answer"
+            v-model="fromData.answer"
+            :toolbar="toolbar"
+            :plugins="plugins"
+            :charLimit="topicDataExtent.answerLength || 5000"
+            :fileParams="getFileTypes('answer', fromData.answerAttrs)"
+            :uploadFileToHwCloud="uploadFileToHwCloud"
+            :uploadFileFunction="uploadFileFunction"
+            menubar=""
+            height="200px"
+            @change="($event) => getTinymceEdit($event, 'answer')"
+            @delte="($event) => handleDelteAttrs($event, 'answer', fromData.answerAttrs)"
+        />
+        <div class="fill__other">
+            <div class="text__warning">
+                如果勾选考生端开启数学公式编辑器，在PC端考生答题页面，本题答题区域考生可以使用数据公式编辑器。
+            </div>
+            <div class="yks-mt10">
+                <el-checkbox v-model="fromData.mathematical"
+                    >考生端开启数学公式编辑器（只适用于PC端答题）</el-checkbox
+                >
+            </div>
+        </div>
+        <div class="topic-stem__label">答案解析</div>
+        <yks-tinymce
+            key="description"
+            v-model="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 TopicMixins from 'yks/assets/mixins/topic'
+import { stemItemType, shortItemType, analysisItemType } from './config'
+
+export default {
+    name: 'YksShortanswer',
+    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 'answer':
+                    data.itemAttr.type = shortItemType[data.itemAttr.type]
+                    this.fromData.answer = data.value
+                    if (data.itemAttr.type && data.itemAttr.content) {
+                        this.fromData.answerAttrs.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)
+        },
+
+        handleDelteAttrs(data, type, list, row = {}) {
+            const listAttrs = list
+            listAttrs.splice(data.index, 1)
+            switch (type) {
+                case 'stem':
+                    this.fromData.stemAttrs = listAttrs
+                    break
+                case 'answer':
+                    this.fromData.answerAttrs = listAttrs
+                    break
+                case 'analysis':
+                    this.fromData.descriptionAttrs = listAttrs
+                    break
+                default:
+                    break
+            }
+            this.$emit('change', this.fromData)
+        }
+    }
+}
+</script>
+

package/packages/Topic/src/single.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="yks-topics">
+        <div class="topic-stem__label required__label">题干</div>
+        <yks-tinymce
+            key="itemContent"
+            v-model="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 cloze-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}`"
+                    v-model="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="topic-stem__label">答案解析</div>
+        <yks-tinymce
+            key="description"
+            v-model="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 TopicMixins from 'yks/assets/mixins/topic'
+import { letter, stemItemType, optionItemType, analysisItemType } from './config'
+
+export default {
+    name: 'YksSingle',
+    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>

package/packages/UploadFile/index.js

@@ -0,0 +1,8 @@
+import YksUploadfile from './src/index';
+
+/* istanbul ignore next */
+YksUploadfile.install = function(Vue) {
+  Vue.component(YksUploadfile.name, YksUploadfile);
+};
+
+export default YksUploadfile;

package/packages/UploadFile/src/index.vue

@@ -0,0 +1,358 @@
+<template>
+    <yks-dialog
+        :before-close="onClose"
+        :close-on-click-modal="false"
+        :destroy-on-close="true"
+        :title="title"
+        :show.sync="show"
+        append-to-body
+        width="600px"
+        height="300px"
+        @close="onClose"
+        @sure="onSure"
+    >
+        <div v-if="fileData.fileType === 'recording'" class="upload-dialog yks-tc">
+            <h1 class="dialog-title">{{ formatTimes(timestamp) }}</h1>
+            <div class="dialog-recording yks-flex h-center" @click="onRecord">
+                <i :class="['icon-recording', iconName]"></i>
+            </div>
+            <div class="yks-mt10 yks-fs-12 info">
+                语音录入时长限制{{ (fileData.fileSize / 60).toFixed(2) }}分钟
+            </div>
+            <audio
+                ref="audioS"
+                :src="fileSrc"
+                class="dialog-audio"
+                @timeupdate="onTimeupdate"
+            ></audio>
+        </div>
+        <div v-else class="upload-dialog yks-tc">
+            <Upload
+                ref="uploadFile"
+                drag
+                action=""
+                show-file-list
+                :multiple="false"
+                :accept="accept"
+                :auto-upload="false"
+                :limit="1"
+                :on-change="beforeUpload"
+            >
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div slot="tip" class="el-upload__tip">{{ tipsMsg }}</div>
+            </Upload>
+        </div>
+        <template slot="footer">
+            <div v-if="$slots.footer">
+                <slot name="footer" :row="fileDataRow"> </slot>
+            </div>
+            <div v-else>
+                <el-button
+                    type="primary"
+                    icon="el-icon-upload"
+                    :disabled="!fileSrc || loading"
+                    :loading="loading"
+                    @click="handleUpload"
+                    >上传文件</el-button
+                >
+                <el-button
+                    type="danger"
+                    icon="el-icon-delete"
+                    :disabled="!fileSrc"
+                    @click="hanleDelete"
+                    >删除文件</el-button
+                >
+            </div>
+        </template>
+    </yks-dialog>
+</template>
+
+<script>
+import { Upload, Message, MessageBox } from 'element-ui'
+
+import { formatTime } from 'yks/assets/utils/index'
+
+if (navigator.mediaDevices === undefined) {
+    navigator.mediaDevices = {}
+}
+
+if (navigator.mediaDevices.getUserMedia === undefined) {
+    navigator.mediaDevices.getUserMedia = function (constraints) {
+        const getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia
+        if (!getUserMedia) {
+            return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
+        }
+        return new Promise(function (resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject)
+        })
+    }
+}
+
+export default {
+    name: 'YksUploadfile',
+    components: {
+        Upload
+    },
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        /* 上传函数 */
+        uploadFileFunction: {
+            type: Function
+        },
+        /* 
+            fileType: 上传类型 
+            typeList: 文件类型
+            fileSize: 文件大小
+        */
+        fileData: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            /* 录音状态 */
+            playStatus: false,
+
+            /* 播放状态 */
+            playing: false,
+
+            /* 媒体流 */
+            mediaRecorder: null,
+
+            /* 录音文件地址 */
+            fileSrc: '',
+
+            /* 录音时长 */
+            timestamp: 0,
+
+            /* 记录录音时长 */
+            recordTimestamp: 0,
+
+            /* 定时器 */
+            interval: null,
+
+            /* 文件信息 */
+            data: null,
+
+            loading: false
+        }
+    },
+    computed: {
+        accept() {
+            const { typeList } = this.fileData
+            if (typeList && typeList.length > 0) {
+                return '.' + typeList.join(',.')
+            }
+            return ''
+        },
+        tipsMsg() {
+            let msg = ''
+            let type = ''
+            const { typeList, fileSize } = this.fileData
+            if (typeList && typeList.length > 0) {
+                type = typeList.join('、')
+                msg = `只能上传${type}文件`
+                if (fileSize) {
+                    return `${msg}，且不超过${fileSize}MB`
+                }
+            }
+            if (fileSize) {
+                msg += `文件大小不超过${fileSize}MB`
+            }
+            return msg
+        },
+        iconName() {
+            if (this.fileSrc && !this.playing) {
+                return 'el-icon-caret-right'
+            }
+            if (this.playStatus || this.playing) {
+                return 'icon-pause'
+            }
+            return 'el-icon-microphone'
+        },
+        fileDataRow() {
+            return this.data || {}
+        }
+    },
+    watch: {
+        timestamp(val) {
+            if (val <= 0.2) {
+                clearInterval(this.interval)
+                this.playing = false
+                this.timestamp = this.recordTimestamp
+            }
+        },
+        show(val) {
+            if (val) {
+                this.resetData()
+            }
+        }
+    },
+    created() {
+        console.log(this.$slots.footer)
+    },
+    methods: {
+        formatTimes(value) {
+            return formatTime(value)
+        },
+        resetData() {
+            this.fileSrc = ''
+            this.data = ''
+            this.timestamp = 0
+            this.recordTimestamp = 0
+            this.playStatus = false
+            this.playing = false
+        },
+
+        beforeUpload(file) {
+            const name = file.name.substr(file.name.lastIndexOf('.') + 1).toLowerCase()
+            const { typeList, fileSize } = this.fileData
+            const isLt2M = file.size / 1024 / 1024 > fileSize
+            const isType = typeList.includes(name)
+            const type = typeList.join('、')
+            if (fileSize && isLt2M) {
+                Message.error(`上传文件大小不能超过 ${fileSize}MB!`)
+                this.$refs.uploadFile.clearFiles()
+                return false
+            }
+            if (typeList && !isType) {
+                Message.error(`只能上传${type}文件!`)
+                this.$refs.uploadFile.clearFiles()
+                return false
+            }
+            this.fileSrc = file
+            this.data = file
+            return true
+        },
+
+        async handleUpload() {
+            this.loading = true
+            try {
+                const data = await this.uploadFileFunction({
+                    file: this.data,
+                    fileData: this.fileData,
+                    fileSrc: this.fileSrc
+                })
+                this.$emit('sure', data)
+                this.onClose()
+            } catch (error) {
+                console.log(error)
+            }
+            this.loading = false
+        },
+
+        onTimeupdate(el) {
+            this.timestamp = this.recordTimestamp - el.target.currentTime
+        },
+
+        hanleDelete() {
+            MessageBox.confirm('是否删除当前文件？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    this.fileSrc = ''
+                    this.data = ''
+                    this.timestamp = 0
+                    this.recordTimestamp = 0
+                    this.$refs.uploadFile.clearFiles()
+                })
+                .catch(() => {
+                    //
+                })
+        },
+
+        /* 录音 */
+        async onRecord() {
+            if (this.fileSrc) {
+                if (this.playing) {
+                    this.$refs.audioS.pause()
+                    this.playing = false
+                } else {
+                    this.$refs.audioS.play()
+                    this.playing = true
+                }
+                return
+            }
+            try {
+                if (this.playStatus) {
+                    this.mediaRecorder.stop()
+                    this.playStatus = false
+                    this.mediaRecorder = ''
+                    clearInterval(this.interval)
+                    this.interval = null
+                    this.recordTimestamp = this.timestamp
+                } else {
+                    this.interval = setInterval(() => {
+                        this.timestamp += 1
+                        if (this.fileData.fileSize <= this.timestamp) {
+                            this.onRecord()
+                        }
+                    }, 1000)
+                    const audio = await navigator.mediaDevices.getUserMedia({
+                        audio: true,
+                        video: false
+                    })
+                    this.mediaRecorder = new MediaRecorder(audio)
+                    this.mediaRecorder.start()
+                    this.playStatus = true
+                    this.mediaRecorder.addEventListener('dataavailable', (el) => {
+                        this.fileSrc = URL.createObjectURL(el.data)
+                        this.data = el
+                    })
+                }
+            } catch (error) {
+                const params = error
+                this.playStatus = false
+                this.mediaRecorder = ''
+                clearInterval(this.interval)
+                this.interval = null
+                this.recordTimestamp = 0
+                this.timestamp = 0
+                let errorMessage
+                switch (params.name) {
+                    case 'NotAllowedError':
+                        errorMessage = '用户拒绝，请在浏览器打开录音权限！'
+                        break
+                    case 'PermissionDeniedError':
+                        errorMessage = '用户已禁止网页调用录音设备'
+                        break
+                    case 'NotFoundError':
+                        errorMessage = '没接入录音设备'
+                        break
+                    case 'DevicesNotFoundError':
+                        errorMessage = '录音设备未找到'
+                        break
+                    case 'NotSupportedError':
+                        errorMessage = '不支持录音功能'
+                        break
+                    default:
+                        errorMessage = '录音调用错误'
+                        break
+                }
+                Message.error(errorMessage)
+            }
+        },
+
+        onClose() {
+            this.$emit('update:show', false)
+        },
+
+        onSure() {
+            this.onClose()
+        }
+    }
+}
+</script>

package/packages/Video/index.js

@@ -0,0 +1,8 @@
+import YksVideo from './src/index';
+
+/* istanbul ignore next */
+YksVideo.install = function(Vue) {
+  Vue.component(YksVideo.name, YksVideo);
+};
+
+export default YksVideo;