yks-element 1.0.0 → 1.0.315

package/packages/UploadFile/src/index.vue

@@ -0,0 +1,388 @@
+<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>
+        <template v-slot:footer>
+            <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
+                >
+            </div>
+        </template>
+    </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,
+            required: true
+        },
+        /* 
+            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'
+        }
+    },
+    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(this.data)
+                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

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