yks-element 1.0.314 → 1.0.317

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yks-element",
-  "version": "1.0.314",
+  "version": "1.0.317",
   "description": "yks公共库",
   "private": false,
   "keywords": ["yks-element", "element-ui", "tinymce", "vue"],

package/packages/Button/src/index.vue

@@ -19,6 +19,17 @@ export default {
 .el-button {
     padding: 8px 24px;
 }
+.el-button--text {
+    border-color: transparent;
+    color: #409eff;
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.el-button--text.is-plain {
+    padding: 8px 24px;
+}
 
 .el-button--primary.is-plain,
 .el-button--primary.is-plain.is-disabled {

package/packages/Dialog/src/index.vue

@@ -37,7 +37,7 @@ export default {
         ...ElDialog.props,
         height: {
             type: String,
-            default: '300px'
+            default: '390px'
         },
         show: {
             type: Boolean,

package/packages/Multimedia/src/index.vue

@@ -15,7 +15,17 @@
                 ></i>
             </div>
         </div>
-        <yks-video v-if="fileType === '2'" :src="data.content"></yks-video>
+        <yks-video v-else-if="fileType === '2'" :src="data.content"></yks-video>
+        <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>
+                <i
+                    v-if="visibleDel"
+                    class="el-icon-error media-delfile"
+                    @click.stop="handleCloseFile"
+                ></i>
+            </div>
+        </div>
         <div class="ks-stem__content yks-text-ellipsis">
             {{ fileName }}
         </div>
@@ -135,6 +145,10 @@ export default {
     .ks-stem__itemattrs {
         border-radius: 4px;
         position: relative;
+        .ks-stem__remove{
+            font-size: 50px;
+            cursor: pointer;
+        }
         .ks-stem__icon {
             width: 77px;
             height: 77px;

package/packages/Tinymce/src/index.vue

@@ -29,6 +29,7 @@
             :show.sync="show"
             :fileData="fileData"
             :title="title"
+            :uploadFileFunction="uploadFileFunction"
             @sure="onSure"
         ></yks-uploadfile>
     </div>
@@ -93,19 +94,28 @@ export default {
         value: {
             required: true
         },
+        /* 语言包 */
         language: {
+            type: String,
             default: 'zh_CN'
         },
+        /* 扩展bar */
         toolbar: {
+            type: [String, Array],
             default: () => []
         },
+        /* 字数限制 */
         charLimit: {
+            type: Number,
             default: 5000
         },
+        /* 插件 */
         plugins: {
+            type: [String, Array],
             default: () => []
         },
         menubar: {
+            type: String,
             default: 'file edit insert view format table'
         },
         height: {
@@ -113,31 +123,37 @@ export default {
             default: '660px'
         },
         width: {
+            type: String,
             default: 'auto'
         },
         inline: {
             type: Boolean,
             default: false
         },
+        /* 音视频数据 */
         fileParams: {
             type: Array,
             default: () => []
         },
+        /* 
+            上传文件函数
+            抛出blobInfo函数
+            接收data src
+        */
         uploadFileToHwCloud: {
             required: true,
             type: Function
         },
-        paramsList: {
-            type: Array,
-            default: () => {
-                return [
-                    {
-                        keys: 'fileType',
-                        value: 'stem'
-                    }
-                ]
-            }
+        /* 
+            上传音视频文件函数
+            抛出数组文件信息
+            接收data src
+        */
+        uploadFileFunction: {
+            required: true,
+            type: Function
         },
+        /* 扩展插件 */
         externalPlugins: {
             type: Object,
             default: () => {
@@ -167,6 +183,10 @@ export default {
             },
             set(value) {
                 this.$emit('input', value)
+                this.$emit('change', {
+                    value: value,
+                    itemAttr: { type: this.fileData.fileType, content: this.mediaFile }
+                })
             }
         },
         containerWidth() {
@@ -236,7 +256,7 @@ export default {
                     })
 
                     try {
-                        const { data } = await this.uploadFileToHwCloud(blobInfo)
+                        const data = await this.uploadFileToHwCloud(blobInfo)
                         success(data)
                     } catch (error) {
                         console.log(error)
@@ -351,7 +371,7 @@ export default {
     },
     methods: {
         handleCloseFile(row, index) {
-            this.$emit('delteFile', {
+            this.$emit('delte', {
                 row: row,
                 index: index
             })
@@ -379,7 +399,7 @@ export default {
             }
         },
         onSure(value) {
-            this.$emit('changeFile', {
+            this.$emit('change', {
                 value: this.tinymceContent,
                 itemAttr: { type: this.fileData.fileType, content: value }
             })

package/packages/UploadFile/src/index.vue

@@ -7,7 +7,7 @@
         :show.sync="show"
         append-to-body
         width="600px"
-        height="250px"
+        height="300px"
         @close="onClose"
         @sure="onSure"
     >
@@ -35,7 +35,6 @@
                 :multiple="false"
                 :accept="accept"
                 :auto-upload="false"
-                :headers="params.headers"
                 :limit="1"
                 :on-change="beforeUpload"
             >
@@ -44,25 +43,21 @@
                 <div slot="tip" class="el-upload__tip">{{ tipsMsg }}</div>
             </Upload>
         </div>
-        <template v-slot:footer>
+        <slot slot="footer" name="footer" :row="fileDataRow">
             <div>
-                <yks-button
-                    type="primary"
-                    :disabled="!fileSrc || loading"
-                    :loading="loading"
-                    icon="el-icon-upload"
-                    @click="handleUpload"
-                    >上传文件</yks-button
-                >
-                <yks-button
-                    type="danger"
-                    :disabled="!fileSrc"
-                    icon="el-icon-delete"
-                    @click="hanleDelete"
-                    >删除文件</yks-button
-                >
+              <yks-button
+                type="primary"
+                icon="el-icon-upload"
+                :disabled="!fileSrc || loading"
+                :loading="loading"
+                @click="handleUpload"
+                >上传文件</yks-button
+              >
+              <yks-button type="danger" icon="el-icon-delete" :disabled="!fileSrc" @click="hanleDelete"
+                >删除文件</yks-button
+              >
             </div>
-        </template>
+        </slot>
     </yks-dialog>
 </template>
 
@@ -105,17 +100,16 @@ export default {
             type: String,
             default: ''
         },
-        params: {
-            type: Object,
-            default: () => {
-                return {
-                    type: 'multimediaFile',
-                    headers: {},
-                    data: null
-                }
-            }
+        /* 上传函数 */
+        uploadFileFunction: {
+            type: Function,
+            required: true
         },
-        uploadFn: Function,
+        /* 
+            fileType: 上传类型 
+            typeList: 文件类型
+            fileSize: 文件大小
+        */
         fileData: {
             type: Object,
             default: () => {
@@ -184,6 +178,9 @@ export default {
                 return 'icon-pause'
             }
             return 'el-icon-microphone'
+        },
+        fileDataRow() {
+            return this.data || {}
         }
     },
     watch: {
@@ -237,27 +234,13 @@ export default {
         async handleUpload() {
             this.loading = true
             try {
-                const fileData = new FormData()
-                Object.keys(this.params.data || {}).forEach((key) => {
-                    fileData.append(key, this.params.data[key])
+                const data = await this.uploadFileFunction({
+                    file: this.data,
+                    fileData: this.fileData,
+                    fileSrc: this.fileSrc
                 })
-
-                if (this.fileData.fileType === 'recording') {
-                    const fileNmae = Date.now() + '.mp3'
-                    const file = new File([this.data.data], fileNmae)
-                    fileData.append('fileType', this.params.type || 'multimediaFile')
-                    fileData.append('file', file)
-                } else {
-                    fileData.append('fileType', this.params.type || 'multimediaFile')
-                    fileData.append('file', this.data.raw)
-                }
-
-                const { data, code } = await this.uploadFn(fileData)
-                if (code === 20000) {
-                    Message.success('添加成功')
-                    this.$emit('sure', data)
-                    this.onClose()
-                }
+                this.$emit('sure', data)
+                this.onClose()
             } catch (error) {
                 console.log(error)
             }
@@ -373,7 +356,7 @@ export default {
 .dialog {
     position: relative;
     .dialog-title {
-        margin-top: 0;
+        margin-top: 20px;
     }
     .dialog-audio {
         display: none;
@@ -399,10 +382,10 @@ export default {
         bottom: 20px;
     }
     .icon-pause {
-        width: 10px;
+        width: 20px;
         height: 20px;
-        border-left: #fff solid 4px;
-        border-right: #fff solid 4px;
+        border-left: #fff solid 5px;
+        border-right: #fff solid 5px;
     }
 }
 </style>

package/packages/Video/src/index.vue

@@ -1,39 +1,48 @@
 <template>
-    <div class="ks-stem__videos yks-flex h-center v-center" :class="{ 'dialog-pause': playing }">
-        <video
-            :ref="videoId"
-            :width="width"
-            :height="height"
-            :src="src"
-            :poster="musicBgs"
-            playsinline
-            webkit-playsinline
-            preload="auto"
-            class="file__videos"
-            @timeupdate="durationUpdate"
-            @canplay="getDuration"
-        ></video>
-        <div class="slider-video">
-            <i class="el-icon-video-pause" @click.stop="handlePause"></i>
-            <Slider
-                v-model="musicDuration"
-                :max="musicAllDuration"
-                height="2px"
-                :show-tooltip="false"
-                class="slider__value"
-                @change="changeMusicDuration"
-                @mousedown.native="isChange = true"
-                @mouseup.native="isChange = false"
-            ></Slider>
-            <span class="slider__text">{{ formatTime(musicAllDuration) }}</span>
-            <i class="el-icon-full-screen" @click.stop="handleFullScreen"></i>
-        </div>
+    <div class="multimedia__video">
         <div
-            v-if="!playing"
-            class="dialog-playing yks-flex h-center v-center"
-            @click.stop="handlePlaying"
+            class="ks-stem__videos yks-flex h-center v-center"
+            :class="{ 'dialog-pause': playing }"
         >
-            <i class="icon-recording el-icon-video-play"></i>
+            <video
+                :ref="videoId"
+                :width="width"
+                :height="height"
+                :src="src"
+                :poster="musicBgs"
+                playsinline
+                webkit-playsinline
+                preload="auto"
+                class="file__videos"
+                @timeupdate="durationUpdate"
+                @canplay="getDuration"
+            ></video>
+            <div v-if="!isInfinity" class="slider-video">
+                <i class="el-icon-video-pause video-icon_mini" @click.stop="handlePause"></i>
+                <Slider
+                    v-model="musicDuration"
+                    :max="musicAllDuration"
+                    height="2px"
+                    :show-tooltip="false"
+                    class="slider__value"
+                    @change="changeMusicDuration"
+                    @mousedown.native="isChange = true"
+                    @mouseup.native="isChange = false"
+                ></Slider>
+                <span class="slider__text video-icon_mini">{{ formatTime(musicAllDuration) }}</span>
+                <i
+                    v-if="fileType === '3'"
+                    class="el-icon-full-screen video-icon_mini"
+                    @click.stop="handleFullScreen"
+                ></i>
+            </div>
+            <div
+                v-if="!playing || isInfinity"
+                class="dialog-playing yks-flex h-center v-center"
+                @click.stop="handlePlaying"
+            >
+                <i :class="[`icon-recording ${playingIcon}`]"></i>
+            </div>
         </div>
     </div>
 </template>
@@ -61,10 +70,19 @@ export default {
             /* 歌曲当前时长 */
             musicDuration: 0,
             /* 判断是否被拖动 */
-            isChange: false
+            isChange: false,
+            /* 判断是否为Infinity */
+            isInfinity: false
         }
     },
     computed: {
+        playingIcon() {
+            if (this.playing) {
+                return 'el-icon-video-pause'
+            } else {
+                return 'el-icon-video-play'
+            }
+        },
         /* 播放背景图 */
         musicBgs() {
             if (this.fileType === '3') {
@@ -150,7 +168,14 @@ export default {
         /* 获取音视频时长 */
         getDuration() {
             const video = this.$refs[this.videoId]
-            this.musicAllDuration = video.duration
+
+            if (!Number.isFinite(video.duration)) {
+                this.musicAllDuration = 300
+                this.isInfinity = true
+            } else {
+                this.isInfinity = false
+                this.musicAllDuration = video.duration
+            }
         },
         /* 获取音视频播放当前时间 */
         durationUpdate() {
@@ -163,6 +188,8 @@ export default {
         handlePlaying() {
             if (!this.playing) {
                 this.$refs[this.videoId].play()
+            } else {
+                this.handlePause()
             }
         },
         /* 暂停 */
@@ -175,93 +202,150 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.multimedia__video {
+    position: relative;
+    margin-right: 10px;
 
-.slider-video {
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 2px;
-    display: flex;
-    align-items: center;
-    .el-icon-video-pause {
-        cursor: pointer;
-        color: #ffffff;
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-    .el-icon-full-screen {
-        cursor: pointer;
-        color: #ffffff;
-        font-size: 12px;
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-    .slider__value {
-        flex: 1;
-        margin: 0 5px;
-    }
-    .slider__text {
-        color: #fff;
-        font-size: 12px;
-        transform: scale(0.7);
-    }
-    ::v-deep {
-        .el-slider__runway {
-            margin: 0;
-            height: 1px;
-            background-color: #ffffff;
-            border-radius: 1px;
+    .slider-video {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 2px;
+        display: flex;
+        align-items: center;
+
+        .video-icon_mini {
+            font-size: 13px !important;
+            cursor: pointer;
+            color: #ffffff;
+            margin-left: 5px;
+            margin-right: 5px;
         }
-        .el-slider__bar {
-            height: 1px;
-            background-color: transparent;
-            border-radius: 1px;
+
+        .el-icon-video-pause {
+            cursor: pointer;
+            color: #ffffff;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+        .slider__value {
+            flex: 1;
+            margin: 0 5px;
         }
-        .el-slider__button-wrapper {
-            height: 31px;
-            width: 13px;
+        .slider__text {
+            color: #fff;
+            font-size: 12px;
+            transform: scale(0.7);
         }
-        .el-slider__button {
-            height: 5px;
-            width: 5px;
-            background: #ffffff;
-            border: unset;
+        ::v-deep {
+            .el-slider__runway {
+                margin: 0;
+            }
+            .el-slider__runway {
+                height: 1px;
+                background-color: #ffffff;
+                border-radius: 1px;
+            }
+            .el-slider__bar {
+                height: 1px;
+                background-color: transparent;
+                border-radius: 1px;
+            }
+            .el-slider__button-wrapper {
+                height: 31px;
+                width: 13px;
+            }
+            .el-slider__button {
+                height: 5px;
+                width: 5px;
+                background: #ffffff;
+                border: unset;
+            }
         }
     }
-}
 
-.media-delvideo {
-    top: -5px;
-    right: -5px;
-}
+    .file-stem {
+        position: relative;
+        width: 80px;
+        margin: 0 auto;
+    }
 
-.ks-stem__videos {
-    border-radius: 4px;
-    position: relative;
-    .file__videos {
-        background: #000000;
+    &:hover {
+        .media-delfile,
+        .media-delvideo {
+            opacity: 1 !important;
+        }
+
+        .dialog-pause {
+            .slider-video {
+                opacity: 1 !important;
+            }
+        }
+    }
+    .media-delfile,
+    .media-delvideo {
+        color: red;
+        position: absolute;
+        opacity: 0;
+        right: -3px;
+        top: -3px;
+        background: #fff;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: 0.3s opacity;
+        -webkit-transition: 0.3s opacity;
+    }
+    .media-delvideo {
+        top: -5px;
+        right: -5px;
     }
-}
 
-.dialog-playing {
-    margin: 0 auto;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-    position: absolute;
+    .ks-stem__itemattrs {
+        border-radius: 4px;
+        position: relative;
+        .ks-stem__icon {
+            width: 77px;
+            height: 77px;
+            margin-bottom: 9px;
+            cursor: pointer;
+        }
+    }
+    .ks-stem__content {
+        width: 160px;
+        font-size: 12px;
+        text-align: center;
+        padding-top: 5px;
+        color: #000;
+    }
 
-    &:hover {
-        opacity: 0.7;
+    .ks-stem__videos {
+        border-radius: 4px;
+        position: relative;
+        .file__videos {
+            background: #000000;
+        }
     }
-    .icon-recording {
-        color: #fff;
-        font-size: 30px;
+
+    .dialog-playing {
+        margin: 0 auto;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        position: absolute;
+
+        &:hover {
+            opacity: 0.7;
+        }
+        .icon-recording {
+            color: #fff;
+            font-size: 30px !important;
+        }
     }
-}
 
-.slider-video {
-    opacity: 1;
-    transition: 0.3s opacity;
-    -webkit-transition: 0.3s opacity;
+    .slider-video {
+        opacity: 0;
+        transition: 0.3s opacity;
+        -webkit-transition: 0.3s opacity;
+    }
 }
 </style>