ui库和web端产品库合并版本(还需修复细节)

2022-11-29 18:27:14 +08:00
parent 5e4bd93238
commit 8bf6c57668
151 changed files with 28267 additions and 49 deletions
--- a/ui/packages/common/AiAvatar.vue
+++ b/ui/packages/common/AiAvatar.vue
@@ -0,0 +1,110 @@
+<template>
+  <section class="AiAvatar">
+    <el-row type="flex">
+      <div class="image-box">
+        <el-image v-if="value" :src="value" :preview-src-list="preview?[value]:null"></el-image>
+        <div style="margin: 36px auto;" v-else>
+          <i class="iconfont iconProfile_Picture"></i>
+          <div style="color: #666;font-size: 12px;">暂无照片</div>
+        </div>
+      </div>
+      <div v-if="editable" class="upload-box">
+        <el-upload ref="avatarUploader" action :http-request="uploadAvatar" :limit="1" :show-file-list="false"
+                   :before-upload="f=>file=f" :on-change="()=>$refs.avatarUploader.clearFiles()"
+                   :accept="accept">
+          <el-button size="mini">上传图片</el-button>
+          <div class="upload-tip" slot="tip">图片必须小于10MB，仅限jpg/png/jpeg格式</div>
+        </el-upload>
+      </div>
+    </el-row>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiAvatar",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {type: String, default: ""},
+    instance: Function,
+    editable: {type: Boolean, default: true},
+    bid: String,
+    preview: {type: Boolean, default: true}
+  },
+  data() {
+    return {
+      file: null,
+      accept: ".jpg,.png,.jpeg"
+    }
+  },
+  methods: {
+    uploadAvatar() {
+      const fileType = this.file.name.split(".")[1]
+      if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
+        let formData = new FormData()
+        formData.append('bizId', this.bid)
+        formData.append('bizType', '2')
+        formData.append('file', this.file)
+        console.log(this.file)
+        this.instance.post("/admin/file/add", formData).then(res => {
+          if (res.data) {
+            const fileInfo = res.data[0]
+            this.$emit("change", fileInfo.split(";")[0], fileInfo);
+            this.$message.success("上传成功")
+          }
+        })
+      } else {
+        this.$message.error("上传文件格式错误!")
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiAvatar {
+  font-size: 12px;
+  line-height: initial;
+
+  .iconProfile_Picture {
+    color: #89b;
+  }
+
+  .image-box {
+    width: 104px !important;
+    height: 120px;
+    text-align: center;
+    background-color: #f5f5f5;
+    border: 1px solid rgba(208, 212, 220, 1);
+    border-radius: 2px;
+    padding: 0;
+
+    .iconfont {
+      font-size: 32px
+    }
+
+    .el-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .upload-box {
+    width: 104px;
+    margin-left: 8px;
+
+    .el-button {
+      width: 104px;
+      height: 32px;
+    }
+
+    .upload-tip {
+      padding: 8px 0 0 10px;
+      color: #999999;
+    }
+  }
+}
+</style>