yks-element 1.0.317 → 1.0.320

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "yks-element",
-  "version": "1.0.317",
+  "version": "1.0.320",
   "description": "yks公共库",
   "private": false,
-  "keywords": ["yks-element", "element-ui", "tinymce", "vue"],
+  "keywords": [
+    "yks-element",
+    "element-ui",
+    "tinymce",
+    "vue"
+  ],
   "repository": {
     "type": "git",
     "url": "http://10.5.1.5/it-ogt-client/it-ogt-npm.git"
@@ -71,4 +76,4 @@
     "npm": ">= 3.0.0"
   },
   "license": "MIT"
-}
+}

package/packages/Multimedia/src/index.vue

@@ -15,7 +15,14 @@
                 ></i>
             </div>
         </div>
-        <yks-video v-else-if="fileType === '2'" :src="data.content"></yks-video>
+        <div v-else-if="fileType === '2'">
+            <yks-video :src="data.content"></yks-video>
+            <i
+                v-if="visibleDel"
+                class="el-icon-error media-delfile"
+                @click.stop="handleCloseFile"
+            ></i>
+        </div>
         <div v-else class="ks-stem__itemattrs" :title="fileName">
             <div class="yks-tc file-stem">
                 <i class="el-icon-document-remove ks-stem__remove" @click="handleClick"></i>
@@ -163,5 +170,10 @@ export default {
         padding-top: 5px;
         color: #000;
     }
+    .media-delfile {
+        position: absolute;
+        top: -5px;
+        right: 0;
+    }
 }
 </style>

package/packages/Topic/index.js

@@ -0,0 +1,9 @@
+export { default as Single } from './src/single'
+export { default as Multiple } from './src/multiple'
+export { default as Judgment } from './src/judgment'
+export { default as FillInBlanks } from './src/fillInBlanks'
+export { default as ShortAnswer } from './src/shortAnswer'
+export { default as PictureAnswer } from './src/pictureAnswer'
+export { default as Compound } from './src/compound'
+export { default as AudioFrequency } from './src/audioFrequency'
+export { default as Attachment } from './src/attachment'

package/packages/Topic/src/attachment.vue

@@ -0,0 +1,125 @@
+<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="single-stem__label required__label">标准答案</div>
+        <yks-tinymce
+            key="answer"
+            :value="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="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 { stemItemType, shortItemType, analysisItemType } from './config'
+
+export default {
+    name: 'Attachment',
+    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 '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>
+
+<style lang="scss" scoped>
+.single-stem__label {
+    margin: 30px 0;
+    font-size: 18px;
+    font-weight: 700;
+}
+</style>

package/packages/Topic/src/audioFrequency.vue

@@ -0,0 +1,127 @@
+<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="single-stem__label required__label">标准答案</div>
+        <yks-tinymce
+            key="answer"
+            :value="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="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 { stemItemType, shortItemType, analysisItemType } from './config'
+
+export default {
+    name: 'AudioFrequency',
+    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 '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>
+
+<style lang="scss" scoped>
+
+.single-stem__label {
+    margin: 30px 0;
+    font-size: 18px;
+    font-weight: 700;
+}
+</style>

package/packages/Topic/src/clozeFillInBlanks.vue

@@ -0,0 +1,267 @@
+<template>
+    <div class="single">
+        <div class="single-stem__label required__label">题干</div>
+        <yks-tinymce
+            ref="stemTinymceEdit"
+            key="itemContent"
+            :value="fromData.itemContent"
+            :toolbar="toolbar"
+            :plugins="plugins"
+            :charLimit="topicDataExtent.itemContentLength || 20000"
+            
+            :fileParams="getFileTypes('stem', fromData.stemAttrs)"
+            menubar=""
+            height="200px"
+            @change="($event) => getTinymceEdit($event, 'stem')"
+            @delte="($event) => handleDelteAttrs($event, 'stem', fromData.stemAttrs)"
+        />
+        <div class="yks-flex yks-mt10">
+            <el-button type="primary" class="yks-mr10" @click="handleFillInBlanks"
+                >插入填空符</el-button
+            >
+            <span class="yks-fs-12 yks-info">请在题干中你需要的位置插入填空符，并在下方编辑对应答案</span>
+        </div>
+
+        <div class="yks-flex single-single">
+            <span class="single-single__label required__label">答案</span>
+            <span class="yks-fs-12 yks-info">考生需要在每个空内输入正确的答案</span>
+        </div>
+        <div
+            v-for="(item, index) in fromData.itemList"
+            :key="`itemList${index}`"
+            class="yks-flex yks-mb10 v-start"
+        >
+            <span class="yks-w_60 yks-mr10">填空{{ index + 1 }}</span>
+            <yks-tinymce
+                key="content"
+                :value="item.content"
+                :toolbar="toolbarSpare"
+                :plugins="plugins"
+                :charLimit="topicDataExtent.answerLength || 5000"
+                
+                :fileParams="getFileTypes('option', item.optionAttrs)"
+                inline
+                height="60px"
+                menubar=""
+                class="flex-1 radio-tinymce"
+                @change="($event) => changeItem($event, item)"
+                @delte="($event) => handleDelteAttrs($event, 'option', item.optionAttrs, item)"
+            />
+            <el-input-number
+                v-model="item.score"
+                controls-position="right"
+                placeholder="分值"
+                class="yks-mr10"
+                size="large"
+                :min="0"
+                :step="0.5"
+                :max="100"
+            ></el-input-number>
+            <el-button type="text" class="yks-danger" @click="handleDelte(index)">删除</el-button>
+        </div>
+
+        <div class="fill__other">
+            <div class="text__warning">
+                1、如果勾选考生端开启数学公式编辑器，在PC端考生答题页面，本题答题区域考生可以使用数据公式编辑器。
+                <br />
+                2、如果勾选按答案自动判分，需要考生填写内容须跟答案完全相同，才能得分，录入答案时，请不要加多余的空格标点符号等干扰字符，考生考后系统自动出分。
+                <br />
+                3、如果没有勾选按答案自动判分，考生答卷需等待管理员后台手工判分。
+            </div>
+            <div class="yks-mt10">
+                <el-checkbox v-model="fromData.mathematical"
+                    >开启数学公式编辑器（只适用于PC端答题）</el-checkbox
+                >
+                <div class="yks-mt10">
+                    <el-checkbox v-model="fromData.automaticScoring" true-label="1" false-label="0"
+                        >按答案自动判分</el-checkbox
+                    >
+                </div>
+                <div v-if="fromData.automaticScoring === '1'" class="yks-mt10">
+                    <el-checkbox v-model="fromData.outOfOrder" true-label="1" false-label="0"
+                        >允许考生答案与参考答案顺序不一致</el-checkbox
+                    >
+                    <el-checkbox v-model="fromData.neglect" true-label="1" false-label="0"
+                        >忽略大小写</el-checkbox
+                    >
+                </div>
+            </div>
+        </div>
+
+        <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)"
+            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 { stemItemType, optionItemType, analysisItemType } from './config'
+
+export default {
+    name: 'ClozeFillInBlanks',
+    components: { YksTinymce },
+    mixins: [TopicMixins],
+    methods: {
+        /**
+         * data 富文本数据
+         * field 对象名
+         * type 类型
+         */
+        getTinymceEdit(data, type) {
+            switch (type) {
+                case 'stem':
+                    data.itemAttr.type = stemItemType[data.itemAttr.type]
+                    if (data.itemAttr.type && data.itemAttr.content) {
+                        this.fromData.stemAttrs.push(data.itemAttr)
+                    }
+                    // eslint-disable-next-line no-case-declarations
+                    const list = data.value.match(/<input ([^>|]+)>/g, '') || []
+                    // eslint-disable-next-line no-case-declarations
+                    const editor = this.$refs.stemTinymceEdit
+                    if ((this.fromData.itemList || []).length !== list.length && !this.processing) {
+                        const { itemContent } = this.fromData
+                        this.$message.error('请从下方填空符删除！')
+                        this.fromData.itemContent = itemContent.replace(
+                            /<input ([^>|]+)\/>/g,
+                            (all, value) => {
+                                const attributes = value.replace('disabled="disabled"', '')
+                                return `<input ${attributes} disabled="disabled" />`
+                            }
+                        )
+                        this.$nextTick(() => {
+                            editor.keepLastIndex()
+                        })
+                    } else {
+                        this.fromData.itemContent = data.value
+                    }
+                    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 list = this.fromData.itemContent.match(/<input ([^>|]+)>/g, '') || []
+            const classId = this.fromData.itemList[index].classId
+            if (classId) {
+                const subIndex = list.findIndex((v) => v.search(classId) !== -1)
+                this.fromData.itemList.splice(index, 1)
+                const editor = this.$refs.stemTinymceEdit
+                editor.deleFillItem(subIndex)
+            } else {
+                this.fromData.itemList.splice(index, 1)
+                const editor = this.$refs.stemTinymceEdit
+                editor.deleFillItem(index)
+            }
+
+            this.$emit('change', this.fromData)
+        },
+
+        handleFillInBlanks() {
+            if (this.fromData.itemList.length >= 40) {
+                return
+            }
+
+            const value = Date.now()
+            this.processing = true
+            const editor = this.$refs.stemTinymceEdit
+            editor.handleFillInBlanks(this.fromData.itemList.length, value)
+            const { itemContent } = this.fromData
+            let index = 0
+            this.fromData.itemContent = itemContent.replace(/<input ([^>|]+)\/>/g, (all, value) => {
+                index += 1
+                return `<input value="${index}" ${value} />`
+            })
+            const list = this.fromData.itemContent.match(/<input ([^>|]+)>/g, '') || []
+            const subIndex = list.findIndex((v) => v.search(value) !== -1)
+            this.fromData.itemList.splice(subIndex, 0, {
+                optionName: '',
+                content: '',
+                score: '',
+                optionAttrs: [],
+                classId: value
+            })
+            this.$nextTick(() => {
+                editor.keepLastIndex()
+                this.$emit('change', this.fromData)
+            })
+            this.processing = false
+        },
+
+        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)
+        }
+    }
+}
+</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>