feat: 新增头像上传组件

BoBoooooo · Feb 4, 2021 · 968baa0 · 968baa0
1 parent 3091d9f
commit 968baa0
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.6-3",
+  "version": "0.8.6-4",
   "author": "BoBo<[email protected]>",
   "main": "lib/ProCrud.umd.min.js",
   "files": [

diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
@@ -286,13 +286,13 @@
       <FileUpload
         :visibleList="fileVisibleList"
         :fileType="widget.options.fileType"
-        :readOnly="widget.options.readonly || readOnly === {}"
+        :readOnly="readOnly || widget.options.readonly"
         showPagination
         :resourceid="models[widget.options.resourceId]"
       ></FileUpload>
     </template>
     <template v-if="widget.type === 'avatar'">
-     <AvatarUpload :uploadUrl="widget.options.uploadUrl"></AvatarUpload>
+     <AvatarUpload :readOnly="readOnly" :widget="widget" v-model="dataModel"></AvatarUpload>
     </template>
     <template v-if="widget.type === 'form'">
       <GenerateSubForm :widget="widget"></GenerateSubForm>

diff --git a/src/component/form-designer/src/WidgetFormItem.vue b/src/component/form-designer/src/WidgetFormItem.vue
@@ -207,7 +207,7 @@
       <h4 style="text-align:center;margin:0">附件上传</h4>
     </template>
     <template v-if="element.type === 'avatar'">
-     <AvatarUpload :uploadUrl="element.options.uploadUrl"></AvatarUpload>
+     <AvatarUpload :widget="element"></AvatarUpload>
     </template>
     <template v-if="element.type === 'chart-pie'">
        <pieChart

diff --git a/src/component/form-designer/src/components/AvatarUpload/AvatarUpload.vue b/src/component/form-designer/src/components/AvatarUpload/AvatarUpload.vue
@@ -6,30 +6,60 @@
 -->
 
 <template>
-  <el-upload class="avatar-uploader" :headers="headers" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess">
-    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+  <el-upload
+    :style="{
+      width: widget.options.width,
+      height: widget.options.width,
+    }"
+    class="avatar-uploader"
+    :class="{
+      'is-disabled' : readOnly
+    }"
+    :headers="headers"
+    :action="action"
+    :before-upload="beforeUpload"
+    :show-file-list="false"
+    :on-success="handleAvatarSuccess"
+  >
+    <img :src="imageUrl" class="avatar" />
   </el-upload>
 </template>
 
 <script>
 export default {
   name: 'AvatarUpload',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   data() {
     return {
-      imageUrl: '',
+      imageUrl: this.value,
     };
   },
   props: {
-    uploadUrl: {
+    // 初始值
+    value: {
       type: String,
       default: '',
     },
+    widget: {
+      type: Object,
+      default: () => ({
+        options: {
+          width: '',
+        },
+      }),
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     action() {
       const __GLOBAL__URL__ = window.__HOST__URL__ + window.__PREFIX__URL__;
-      return __GLOBAL__URL__ + this.uploadUrl;
+      return __GLOBAL__URL__ + this.widget.options.uploadUrl;
     },
     headers() {
       return { Authorization: sessionStorage.getItem('token') };
@@ -38,6 +68,14 @@ export default {
   methods: {
     handleAvatarSuccess(res, file) {
       this.imageUrl = URL.createObjectURL(file.raw);
+      this.$emit('change', res.data);
+    },
+    beforeUpload() {
+      // 只读时禁止上传
+      if (this.readOnly) {
+        return false;
+      }
+      return true;
     },
   },
 };
@@ -56,14 +94,18 @@ export default {
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
+  position: absolute;
   text-align: center;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .avatar {
-  width: 178px;
-  height: 178px;
+  width: 100%;
+  height: 100%;
   display: block;
 }
+.is-disabled{
+  cursor: not-allowed;
+}
 </style>