yks-element 1.0.322 → 1.0.792

package/packages/UploadFile/src/index.vue

@@ -1,390 +0,0 @@
-<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="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="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>
-        <slot slot="footer" name="footer" :row="fileDataRow">
-            <div>
-              <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>
-        </slot>
-    </yks-dialog>
-</template>
-
-<script>
-import YksDialog from '../../Dialog'
-import YksButton from '../../Button'
-import { Upload, Message, MessageBox } from 'element-ui'
-
-import { formatTime } from '../../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: {
-        YksDialog,
-        YksButton,
-        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()
-            }
-        }
-    },
-    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>
-
-<style lang="scss" scoped>
-.dialog {
-    position: relative;
-    .dialog-title {
-        margin-top: 20px;
-    }
-    .dialog-audio {
-        display: none;
-    }
-    .dialog-recording {
-        width: 100px;
-        height: 100px;
-        margin: 0 auto;
-        border-radius: 50%;
-        cursor: pointer;
-        background-color: #03a9f4;
-        &:hover {
-            opacity: 0.7;
-        }
-        .icon-recording {
-            font-size: 30px;
-            color: #fff;
-        }
-    }
-    .dialog-button {
-        position: absolute;
-        right: 0;
-        bottom: 20px;
-    }
-    .icon-pause {
-        width: 20px;
-        height: 20px;
-        border-left: #fff solid 5px;
-        border-right: #fff solid 5px;
-    }
-}
-</style>

package/packages/Video/index.js

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