newtv-ui-3.0 0.0.1

package/packages/avatar-upload/src/upload.vue

@@ -0,0 +1,640 @@
+<script>
+import { defineComponent, ref, toRef, useSlots } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Download, Delete, ZoomIn } from '@element-plus/icons-vue'
+import previewDialog from './previewDialog.vue'
+export default defineComponent({
+  name: 'fgAvatarUpload',
+  emits: ['on-success', 'on-remove', 'http-request', 'on-crop', 'on-generation'],
+  components: { Plus, Download, Delete, ZoomIn, previewDialog },
+  props: {
+    uploadType: {
+      type: String,
+      default: 'Card', // Default Card
+    },
+    uploadTitle: {
+      type: String,
+      default: '上传', // 仅在Default时生效
+    },
+    name: {
+      type: String,
+      default: 'file',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    action: {
+      type: String,
+      default: '',
+    },
+    uploadWidth: {
+      type: String,
+      default: '178px',
+    },
+    uploadHeight: {
+      type: String,
+      default: '178px',
+    },
+    width: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: Number,
+      default: 0,
+    },
+    tips: {
+      type: String,
+      default: '',
+    },
+    // 上传文件类型
+    accept: {
+      type: String,
+      default: 'image/jpg, image/jpeg, image/png',
+    },
+    // 上传文件大小，单位按MB计算
+    size: {
+      type: Number,
+      default: 2,
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+    edit: {
+      type: Boolean,
+      default: false,
+    },
+    httpRequest: {
+      type: Function,
+      default: null,
+    },
+    isImgDetail: {
+      type: Boolean,
+      default: false,
+    },
+    imgWidth: {
+      type: Number,
+      default: 0,
+    },
+    imgHeight: {
+      type: Number,
+      default: 0,
+    },
+    fileType: {
+      type: String,
+      default: '',
+    },
+    isCrop: {
+      type: Boolean,
+      default: false,
+    },
+    intelligentDraw: {
+      type: Boolean,
+      default: false,
+    },
+    isShowGenetaion: {
+      type: Boolean,
+      default: false,
+    },
+    genetaionIcon: {
+      type: String,
+      default: '',
+    },
+    genetaionTitle: {
+      type: String,
+      default: '自动上传', // 仅在Default时生效
+    },
+    disabledBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(__props, { emit }) {
+    const uploader = ref(null)
+    const preview = ref(null)
+    const props = __props
+    const fsize = props.size
+    const accept = props.accept
+    const imageUrl = toRef(props, 'url')
+    const typeTip = accept
+      .split(',')
+      .map((item) => item.split('/')[1].toLocaleLowerCase())
+      .join('，')
+
+    const slotPrepend = !!useSlots().prepend
+    const slotAppend = !!useSlots().append
+    let tips = props.tips
+    const beforeUpload = (rawFile) => {
+      if (!rawFile.type || accept.indexOf(rawFile.type) == -1) {
+        ElMessage.error(`仅支持 ${typeTip} 类型的上传`)
+        return false
+      }
+
+      if (rawFile.size / 1024 / 1024 > fsize) {
+        ElMessage.error(`上传大小不超过${fsize}MB`)
+        return false
+      }
+
+      const w = Number(props.width)
+      const h = Number(props.height)
+      if (w && h) {
+        return new Promise((resolve, reject) => {
+          judgeImgSize(rawFile, w, h, (flag) => {
+            if (flag) {
+              resolve()
+            } else {
+              ElMessage.error(`图片大小应为${w}*${h}`)
+              reject()
+            }
+          })
+        })
+      }
+
+      return true
+    }
+
+    const judgeImgSize = (rawFile, w, h, callback) => {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const data = e.target.result
+        //加载图片获取图片真实宽度和高度
+        const image = new Image()
+        image.onload = () => {
+          const width = image.width
+          const height = image.height
+          if (width != w || height != h) {
+            callback && callback(false)
+          } else {
+            callback && callback(true)
+          }
+        }
+        image.src = data
+      }
+      reader.readAsDataURL(rawFile)
+    }
+
+    const percentage = ref(0)
+    const handleProgress = (evt, uploadFile) => {
+      percentage.value = uploadFile.percentage
+    }
+
+    const handleSuccess = (response, uploadFile, uploadFiles) => {
+      // uploadFile && uploadFile.raw;
+      emit('on-success', response, uploadFile)
+    }
+    const handleCrop = () => {
+      emit('on-crop')
+    }
+    const handleRemove = () => {
+      percentage.value = 0
+      emit('on-remove')
+    }
+    const handlerGeneration = (mode, data = null) => {
+      emit('on-generation', {
+        mode,
+        data,
+      })
+    }
+    const dialogVisible = ref(false)
+    const handlePreview = () => {
+      preview.value.open()
+      // dialogVisible.value = true
+    }
+
+    const loading = ref(true)
+    return {
+      uploader,
+      preview,
+      httpRequest: props.httpRequest,
+      data: props.data,
+      tips,
+      imageUrl,
+      handleSuccess,
+      beforeUpload,
+      handleCrop,
+      handleRemove,
+      handlerGeneration,
+      handlePreview,
+      handleProgress,
+      dialogVisible,
+      edit: toRef(props, 'edit'),
+      name: props.name,
+      slotPrepend,
+      slotAppend,
+      percentage,
+      uploadHeight: props.uploadHeight,
+      loading,
+      intelligentDraw: props.intelligentDraw,
+      isShowGenetaion: props.isShowGenetaion,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="fg-upload">
+    <div class="fg-avatar-uploader" :class="{ 'fg-default': uploadType == 'Default' }">
+      <template v-if="!edit && !imageUrl">
+        <div v-if="slotPrepend && !percentage" class="upload-prepend">
+          <slot name="prepend"></slot>
+        </div>
+        <el-upload
+          class="upload"
+          ref="uploader"
+          :action="action"
+          :data="data"
+          :show-file-list="false"
+          :on-success="handleSuccess"
+          :before-upload="beforeUpload"
+          :on-progress="handleProgress"
+          :http-request="httpRequest"
+          :with-credentials="true"
+          :name="name"
+          v-if="httpRequest"
+        >
+          <el-button v-if="uploadType == 'Default'" type="primary" text>
+            <i class="iconfont icon-tubiao-shangchuan"></i>
+            {{ uploadTitle }}
+          </el-button>
+
+          <el-icon v-if="uploadType == 'Card'" class="avatar-uploader-icon"><Plus /></el-icon>
+
+          <template #tip>
+            <div class="el-upload__tip" v-if="tips">
+              {{ tips }}
+            </div>
+          </template>
+        </el-upload>
+
+        <el-upload
+          class="upload"
+          ref="uploader"
+          :action="action"
+          :data="data"
+          :show-file-list="false"
+          :on-success="handleSuccess"
+          :on-progress="handleProgress"
+          :before-upload="beforeUpload"
+          :with-credentials="true"
+          :name="name"
+          v-else
+        >
+          <slot name="prevUploadBtn"></slot>
+
+          <div class="genetaion" v-if="intelligentDraw && !percentage">
+            <i
+              class="iconfont-btn zhihui"
+              @click.stop="handlerGeneration('zhihui')"
+              title="智绘"
+            ></i>
+            <!--<i class="iconfont-btn gaoding" @click.stop="handlerGeneration('gaoding')" title="稿定"></i>-->
+          </div>
+
+          <el-button
+            v-if="isShowGenetaion && !percentage"
+            type="primary"
+            text
+            @click.stop="handlerGeneration"
+            :disabled="disabledBtn"
+          >
+            <i class="iconfont" :class="genetaionIcon"></i>
+            {{ genetaionTitle }}
+          </el-button>
+
+          <el-button v-if="uploadType == 'Default' && !percentage" type="primary" text>
+            <i class="iconfont icon-tubiao-shangchuan"></i>
+            {{ uploadTitle }}
+          </el-button>
+
+          <el-icon v-if="uploadType == 'Card' && !percentage" class="avatar-uploader-icon"
+            ><Plus
+          /></el-icon>
+          <div v-if="percentage != 0 && percentage != 100">
+            <div class="upload-progress" v-loading="percentage != 0 && percentage != 100">
+              <!--<el-progress-->
+              <!--:width="80"-->
+              <!--type="circle"-->
+              <!--:percentage="parseFloat(percentage.toFixed(2))"-->
+              <!--&gt;</el-progress>-->
+            </div>
+          </div>
+
+          <template #tip>
+            <div class="el-upload__tip" v-if="tips">
+              {{ tips }}
+            </div>
+          </template>
+        </el-upload>
+
+        <div v-if="slotAppend" class="upload-append">
+          <slot name="append" />
+        </div>
+      </template>
+
+      <div v-else class="fg-avatar-picture-card">
+        <el-image :src="imageUrl" class="avatar" fit="contain">
+          <template #error>
+            <div class="image-slot">
+              <img src="../../assets/images/error-poster.png" alt="" />
+              <p class="slot-title">{{ imageUrl ? '图片加载失败' : '暂无图片' }}</p>
+            </div>
+          </template>
+        </el-image>
+        <!-- <img :src="imageUrl"  /> -->
+        <span :class="{ actions: true, hide: edit }">
+          <span @click="handleCrop(file)" v-if="isCrop">
+            <i class="iconfont icon-caijian el-icon"></i>
+          </span>
+          <span
+            @click="handleCrop(file)"
+            v-if="intelligentDraw"
+            style="display: inline-block; padding: 0; background: transparent"
+          >
+            <i
+              class="iconfont-btn zhihui"
+              @click.stop="
+                handlerGeneration('zhihui', {
+                  imgUrl: imageUrl,
+                  imgWidth,
+                  imgHeight,
+                })
+              "
+              title="智绘"
+            ></i>
+          </span>
+          <span @click="handlePreview(file)">
+            <i class="iconfont icon-tubiao-fangda el-icon"></i>
+          </span>
+          <span @click="handleRemove(file)">
+            <i class="iconfont icon-tubiaoanniu-shanchu el-icon"></i>
+          </span>
+        </span>
+      </div>
+    </div>
+    <previewDialog
+      ref="preview"
+      :imageUrl="imageUrl"
+      :isImgDetail="isImgDetail"
+      :imgWidth="imgWidth"
+      :imgHeight="imgHeight"
+      :fileType="fileType"
+    ></previewDialog>
+    <!--<el-dialog class="preview-dialog" v-model="dialogVisible">-->
+    <!--<img class="fg-avatar-preview-img" :src="imageUrl" alt="" />-->
+    <!--<div class="img-detail" v-if="isImgDetail">-->
+    <!--<div class="size detail">{{ imgWidth }}x{{ imgHeight }} | {{ fileType }}</div>-->
+    <!--<el-tooltip class="item" effect="dark" :content="imageUrl" placement="top">-->
+    <!--<div class="address detail">地址：{{ imageUrl }}</div>-->
+    <!--</el-tooltip>-->
+    <!--</div>-->
+    <!--</el-dialog>-->
+  </div>
+</template>
+
+<style lang="scss">
+.fg-upload {
+}
+.fg-avatar-uploader {
+  :deep(.el-dialog) {
+    background: black !important;
+  }
+  .el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+  }
+  .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  .upload-progress {
+    width: v-bind(uploadWidth);
+    height: v-bind(uploadHeight);
+    text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: v-bind(uploadWidth);
+    height: v-bind(uploadHeight);
+    text-align: center;
+
+    border: 1px dashed #d9d9d9;
+    box-sizing: border-box;
+  }
+  .el-upload .el-button {
+    background: #ffffff;
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    border: 1px solid #e6e6e6;
+    padding: 5px 10px;
+    margin: 10px;
+  }
+  .el-upload .el-button:hover {
+    background: #ffffff;
+  }
+  &.fg-default {
+    width: v-bind(uploadWidth);
+    height: v-bind(uploadHeight);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background: #f4f5f7;
+    /*border: 1px dashed #d9d9d9;*/
+    box-sizing: border-box;
+    /*line-height: v-bind(uploadHeight);*/
+    .upload {
+      display: inline-block;
+    }
+    .iconfont {
+      font-size: 16px;
+    }
+    .el-button {
+      padding: 0 10px;
+      line-height: 32px;
+    }
+  }
+  .upload-prepend,
+  .upload-append {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    .iconfont {
+      font-size: 16px;
+    }
+    .el-button {
+      padding: 0 10px;
+      line-height: 32px;
+    }
+  }
+
+  .iconfont-btn {
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin: 10px;
+    vertical-align: middle;
+  }
+
+  .zhihui {
+    background: url(./zhihui.png) center no-repeat;
+    background-size: contain;
+  }
+
+  .gaoding {
+    background: url(./gaoding.png) center no-repeat;
+    background-size: contain;
+  }
+}
+
+// 图片预览
+.fg-avatar-picture-card {
+  position: relative;
+  overflow: hidden;
+  /*border: 1px solid #c0ccda;*/
+  color: #fff;
+  background: #d3d3d3;
+  /*border-radius: 6px;*/
+  box-sizing: border-box;
+  width: v-bind(uploadWidth);
+  height: v-bind(uploadHeight);
+  padding: 0;
+  display: inline-flex;
+  box-sizing: border-box;
+  &:hover {
+    span {
+      display: inline-flex;
+    }
+  }
+  .actions {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    cursor: default;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 20px;
+    /*background: rgba(0, 0, 0, 0.3);*/
+    &.hide {
+      display: none;
+    }
+    span {
+      margin: 0 3px;
+      display: inline-flex;
+      cursor: pointer;
+      padding: 6px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.5);
+      line-height: 0;
+      .iconfont {
+        font-size: 12px;
+      }
+      .iconfont-btn {
+        width: 24px;
+        height: 24px;
+        margin: 0;
+      }
+    }
+
+    .zhihui {
+      background: url(./zhihui_2.png) center no-repeat;
+      background-size: contain;
+    }
+  }
+  .avatar {
+    width: 100%;
+    height: 100%;
+    .image-slot {
+      height: 100%;
+      color: #ff5757;
+      text-align: center;
+      /*margin-top: 10px;*/
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+      .slot-title {
+        line-height: 30px;
+      }
+    }
+  }
+}
+/*loading*/
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.1);
+}
+.el-loading-spinner {
+  /*top: 0 !important;*/
+  /*margin-top: 0 !important;*/
+}
+.el-loading-spinner .path {
+  stroke: #ffffff !important;
+}
+.fg-avatar-preview-img {
+  width: 100%;
+}
+.img-detail {
+  position: absolute;
+  right: 20px;
+  bottom: 30px;
+  .detail {
+    height: 36px;
+    line-height: 36px;
+    background: #e4e9ed;
+    border-radius: 18px;
+    opacity: 0.7;
+    padding: 0 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #282828;
+    float: left;
+  }
+  .size {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .address {
+    display: inline-block;
+    width: 338px;
+    word-wrap: break-word; /*强制换行*/
+    overflow: hidden; /*超出隐藏*/
+    text-overflow: ellipsis; /*隐藏后添加省略号*/
+    white-space: nowrap; /*强制不换行*/
+  }
+}
+
+.preview-dialog .el-dialog__header {
+  border: 0;
+}
+.upload-make {
+  :deep(.el-button) {
+    padding: 5px 10px;
+    background: white;
+    border-radius: 10px;
+  }
+}
+.upload .el-button.is-text.is-disabled {
+  color: #a0cfff !important;
+  -webkit-text-fill-color: #a0cfff !important;
+  background-color: transparent !important;
+}
+</style>

package/packages/cardTable/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import fgCard from './src/cardTable.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fgCard.install = function (Vue) {
+  Vue.component(fgCard.name, fgCard)
+}
+
+// 默认导出组件
+export default fgCard