From c95579f945a795138fc85a59246c97a21ce8a45e Mon Sep 17 00:00:00 2001
From: liweilong <515897141@qq.com>
Date: 星期四, 24 十二月 2020 11:04:53 +0800
Subject: [PATCH] 添加时间线组件、但图片上传组件、标签组件
---
src/components_simple/UploadSingleImg.vue | 144 ++++++++++++++++++++
src/components_simple/long_timeline.vue | 84 ++++++++++++
src/components_simple/demo.vue | 27 +++
src/components_simple/jun_serveLabels.vue | 117 ++++++++++++++++
4 files changed, 372 insertions(+), 0 deletions(-)
diff --git a/src/components_simple/UploadSingleImg.vue b/src/components_simple/UploadSingleImg.vue
new file mode 100644
index 0000000..514d418
--- /dev/null
+++ b/src/components_simple/UploadSingleImg.vue
@@ -0,0 +1,144 @@
+<template>
+ <div>
+ <!-- 涓婁紶鍥剧墖缁勪欢(鍗曞浘) -->
+ <el-upload
+ ref="refUploadImg"
+ :accept="accept"
+ :auto-upload="false"
+ list-type="picture-card"
+ :class="{disabled:uploadDisabled}"
+ action="#"
+ :limit="1"
+ :file-list="uploadImgs"
+ :on-change="addUploadImg"
+ :on-remove="delUploadImg"
+ :http-request="uploadImg"
+ :on-preview="uploadPreview"
+ :before-upload="beforeUploadImg"
+ size="mini"
+ >
+ <i class="el-icon-plus" />
+ </el-upload>
+ <!-- upload鏀惧ぇ鍥剧墖 -->
+ <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
+ <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import mixin_upload from '@/mixins/upload.js' // 閫氱敤涓婁紶鍥剧墖棰勮
+export default {
+ mixins: [mixin_upload],
+ model: {
+ prop: 'uploadImgs',
+ event: 'change'
+ },
+ props: {
+ uploadImgs: {
+ type: Array,
+ default: () => {
+ return []
+ }
+ },
+ accept: {
+ type: String,
+ default: () => {
+ return 'image/jpeg,image/jpg,image/gif,image/png'
+ }
+ }
+
+ },
+
+ data() {
+ return {
+ callback: null
+ }
+ },
+ computed: {
+ uploadDisabled() {
+ return this.uploadImgs.length > 0
+ }
+ },
+
+ methods: {
+ // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶇‘璁ゆ牸寮�
+ beforeUploadImg(file) {
+ const isImg = file.type.indexOf('image/') > -1
+ const isTooLarge = file.size / 1024 / 1024 > 4
+ let flag = true
+ if (!isImg) {
+ this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
+ flag = false
+ } else if (isTooLarge) {
+ this.$message.error('璇峰嬁涓婁紶澶т簬4MB鐨勫浘鐗�')
+ flag = false
+ }
+ return flag
+ },
+ // 澧炲姞鍥剧墖
+ addUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鍒犻櫎鍥剧墖
+ delUploadImg(file, fileList) {
+ this.$emit('change', fileList)
+ },
+ // 鎵ц涓婁紶鍟嗗搧鍥�
+ runUploadImg(suc_cb) {
+ console.log('runUploadImg!!!!!')
+ if (this.checkNeedUpload(this.uploadImgs)) {
+ this.callback = suc_cb
+ this.$refs.refUploadImg.submit()
+ } else {
+ suc_cb && suc_cb()
+ }
+ },
+ // 涓婁紶鍟嗗搧鍥�
+ uploadImg(res) {
+ console.log(res)
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ console.log(formData)
+ this.postFN({
+ url: 'admin/image/upload?folderCode=IMG',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'xxxx'
+ }
+ }
+ }, (inf) => {
+ console.log('涓婁紶鍥剧墖鎴愬姛')
+
+ // 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
+ this.$emit('change', [{ url: inf.imgUrl, status: 'success' }])
+
+ console.log('涓婁紶鍥剧墖缁撴潫')
+
+ // 鎻愪氦
+ // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
+ this.callback && this.callback(inf.imgUrl)
+ })
+ }
+ // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+ }
+}
+</script>
+
+<style>
+.disabled .el-upload--picture-card {
+ display: none;
+}
+.el-upload-list--picture-card{
+ line-height: 1;
+}
+.el-upload-list--picture-card .el-upload-list__item{
+ margin-bottom: 0
+}
+</style>
diff --git a/src/components_simple/demo.vue b/src/components_simple/demo.vue
new file mode 100644
index 0000000..b484af1
--- /dev/null
+++ b/src/components_simple/demo.vue
@@ -0,0 +1,27 @@
+<template>
+ <div class="">
+
+ </div>
+</template>
+
+<script>
+export default {
+ name: "",
+ data() {
+ return {
+ };
+ },
+ props:{
+
+ },
+ mounted() {
+ },
+ methods: {
+ }
+}
+</script>
+
+<style lang="less" scoped>
+
+
+</style>
\ No newline at end of file
diff --git a/src/components_simple/jun_serveLabels.vue b/src/components_simple/jun_serveLabels.vue
new file mode 100644
index 0000000..0b062da
--- /dev/null
+++ b/src/components_simple/jun_serveLabels.vue
@@ -0,0 +1,117 @@
+<!-- 鏈嶅姟鏍囩 -->
+<template>
+ <div class="serveLabel">
+ <el-tag
+ v-for="tag in labelList"
+ :key="tag"
+ closable
+ :disable-transitions="false"
+ @close="labelCloseHandle(tag)"
+ >
+ {{ tag }}
+ </el-tag>
+ <el-input
+ v-if="labelInputVisible"
+ ref="saveTagInput"
+ v-model="labelValue"
+ class="input-new-tag"
+ size="small"
+ placeholder="杈撳叆鏍囩锛屽洖杞﹀垎闅�"
+ @keyup.enter.native="handleInputConfirm"
+ @blur="handleInputConfirm"
+ />
+ <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 娣诲姞{{ text||'鏍囩' }}</el-button>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ServeLabels',
+ model: {
+ prop: 'param_labelList', // 浣跨敤 v-model
+ event: 'change' // 缁戝畾change浜嬩欢
+ },
+ props: [
+ 'param_labelList', // 鏍囩
+ 'text'
+ ],
+ data() {
+ return {
+ // 鏍囩杈撳叆
+ labelValue: '',
+ // 鏄惁鏄剧ず鏍囩杈撳叆妗�
+ labelInputVisible: false,
+ // 鏍囩鏁扮粍
+ labelList: []
+ }
+ },
+ watch: {
+ // 鐩戝惉shopId锛屽苟瑙﹀彂change浜嬩欢
+ labelList(value) {
+ this.$emit('change', value)
+ },
+ param_labelList(value) {
+ this.labelList = value
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ init() {
+ this.labelList = this.param_labelList || []
+ },
+
+ // 鍒犻櫎鏍囩
+ labelCloseHandle(tag) {
+ this.labelList.splice(this.labelList.indexOf(tag), 1)
+ },
+ // 鏄剧ず杈撳叆妗�
+ showInput() {
+ this.labelInputVisible = true
+ this.$nextTick(() => {
+ this.$refs.saveTagInput.$refs.input.focus()
+ })
+ },
+ // 杈撳叆鏍囩瀹屾垚
+ handleInputConfirm() {
+ const inputValue = this.labelValue
+
+ if (this.labelList.indexOf(inputValue) > -1) {
+ this.$messageError('璇峰嬁閲嶅杈撳叆鏍囩')
+ } else {
+ if (inputValue) {
+ this.labelList.push(inputValue)
+ }
+ }
+
+ // 闅愯棌杈撳叆妗�
+ this.labelInputVisible = false
+ // 娓呯┖杈撳叆鍐呭
+ this.labelValue = ''
+ }
+ }
+}
+</script>
+
+<style>
+.serveLabel .el-tag {
+ margin-right: 10px;
+ margin-bottom: 10px;
+ font-size: 14px;
+}
+.button-new-tag {
+ height: 32px;
+ line-height: 30px;
+ padding-top: 0;
+ padding-bottom: 0;
+ font-size: 14px !important;
+}
+.input-new-tag {
+ width: 160px;
+ vertical-align: bottom;
+}
+.input-new-tag .el-input__inner{
+ font-size: 14px;
+}
+</style>
diff --git a/src/components_simple/long_timeline.vue b/src/components_simple/long_timeline.vue
new file mode 100644
index 0000000..5bf5c18
--- /dev/null
+++ b/src/components_simple/long_timeline.vue
@@ -0,0 +1,84 @@
+<template>
+ <div class="long_timeline">
+ <el-timeline>
+ <el-timeline-item v-if="!list || !list.length" color="#999">{{ emptyText||'鏆傛棤鏃ュ織璁板綍' }}</el-timeline-item>
+ <el-timeline-item
+ v-for="(item, index) in list"
+ :key="index"
+ color="#00AFAA"
+ >
+ <div class="flex flex-sb">
+ <div class="content-box">
+ <div class="title">{{ item.content }}</div>
+ <div v-if="item.remark" class="content">{{ item.remark }}</div>
+ </div>
+ <div class="right-box">
+ <div class="time-tx">{{ item.time }}</div>
+ <div v-if="item.author" class="author-tx">鎿嶄綔浜猴細{{ item.author }}</div>
+ </div>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'LongTimeline',
+ props: {
+ // [{content:'xxx', time: 'xxx', author: 'xxx'}]
+ list: {
+ type: Array,
+ default: null
+ },
+ // 绌哄垪琛ㄦ椂鏄剧ず
+ emptyText: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+ }
+ },
+ mounted() {
+ },
+ methods: {
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.long_timeline{
+ margin-top: 37px;
+}
+.content-box{
+ font-size: 14px;
+ line-height: 1.2;
+ color: #666666;
+ // line-height: 34px;
+ width: 70%;
+ .content{
+ // width: 60%;
+ margin-top: 4px;
+ font-size: 12px;
+ color: #ccc;
+ }
+}
+.right-box{
+ margin-left: 20px;
+}
+.time-tx{
+ font-size: 14px;
+ color: #000000;
+ // line-height: 34px;
+ text-align: right;
+}
+.author-tx{
+ font-size: 14px;
+ color: #000000;
+ // line-height: 34px;
+ text-align: right;
+ margin-top: 8px;
+}
+</style>
--
Gitblit v1.8.0