feat: 新增头像上传组件

BoBoooooo · Feb 4, 2021 · 3091d9f · 3091d9f
1 parent 101327f
commit 3091d9f
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 30 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Element-Pro-Crud</title>
     <!-- 服务器地址 -->
-    <script>window.__HOST__URL__ = 'http://server.boboooooo.top:7788/'</script>
+    <script>window.__HOST__URL__ = 'http://server.boboooooo.top:7788'</script>
     <!-- 后台url地址 -->
     <script>window.__PREFIX__URL__ = '/';</script>
   </head>

diff --git a/src/component/form-designer/src/GenerateFormItem.vue b/src/component/form-designer/src/GenerateFormItem.vue
@@ -291,6 +291,9 @@
         :resourceid="models[widget.options.resourceId]"
       ></FileUpload>
     </template>
+    <template v-if="widget.type === 'avatar'">
+     <AvatarUpload :uploadUrl="widget.options.uploadUrl"></AvatarUpload>
+    </template>
     <template v-if="widget.type === 'form'">
       <GenerateSubForm :widget="widget"></GenerateSubForm>
     </template>
@@ -346,6 +349,7 @@ import lineChart from './components/Charts/lineChart.vue';
 import pieChart from './components/Charts/pieChart.vue';
 import Echarts from './components/Charts/Echarts.vue';
 import GenerateTabs from './components/Tabs/GenerateTabs.vue';
+import AvatarUpload from './components/AvatarUpload/AvatarUpload.vue';
 
 @Component({
   components: {
@@ -357,6 +361,7 @@ import GenerateTabs from './components/Tabs/GenerateTabs.vue';
     pieChart,
     lineChart,
     GenerateTabs,
+    AvatarUpload,
     CrudTable: () => import('@/component/crud-table/src/CrudTable.vue'),
   },
   model: {

diff --git a/src/component/form-designer/src/WidgetConfig.vue b/src/component/form-designer/src/WidgetConfig.vue
@@ -418,9 +418,12 @@
       </template>
 
       <template v-if="elementConfig.type !== 'grid'">
-        <el-form-item v-if="elementConfig.type === 'upload'" label="关联字段名">
+        <el-form-item v-if="Object.keys(elementConfig.options).indexOf('resourceId') >= 0" label="关联字段名">
           <el-input size="mini" v-model="elementConfig.options.resourceId"></el-input>
         </el-form-item>
+        <el-form-item  v-if="Object.keys(elementConfig.options).indexOf('uploadUrl') >= 0" label="接口地址">
+          <el-input size="mini" v-model="elementConfig.options.uploadUrl"></el-input>
+        </el-form-item>
         <el-form-item v-if="elementConfig.type === 'upload'" label="附件类型">
           <el-input size="mini" v-model="elementConfig.options.fileType" placeholder="关联多个附件的情况下需要填写"></el-input>
         </el-form-item>

diff --git a/src/component/form-designer/src/WidgetFormItem.vue b/src/component/form-designer/src/WidgetFormItem.vue
@@ -206,6 +206,9 @@
     <template v-if="element.type === 'upload'">
       <h4 style="text-align:center;margin:0">附件上传</h4>
     </template>
+    <template v-if="element.type === 'avatar'">
+     <AvatarUpload :uploadUrl="element.options.uploadUrl"></AvatarUpload>
+    </template>
     <template v-if="element.type === 'chart-pie'">
        <pieChart
           :data="element.options.data"
@@ -250,7 +253,7 @@ import Tinymce from './components/Tinymce'; // 富文本编辑器
 import lineChart from './components/Charts/lineChart.vue';
 import pieChart from './components/Charts/pieChart.vue';
 import Echarts from './components/Charts/Echarts.vue';
-
+import AvatarUpload from './components/AvatarUpload/AvatarUpload.vue';
 
 export default {
   name: 'WidgetFormItem',
@@ -281,6 +284,7 @@ export default {
     pieChart,
     lineChart,
     Echarts,
+    AvatarUpload,
   },
   data() {
     return {

diff --git a/src/component/form-designer/src/components/AvatarUpload/AvatarUpload.vue b/src/component/form-designer/src/components/AvatarUpload/AvatarUpload.vue
@@ -0,0 +1,69 @@
+<!--
+ * @file: 头像上传
+ * @author: BoBo
+ * @copyright: BoBo
+ * @Date: 2021-12-30 21:41:26
+-->
+
+<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>
+</template>
+
+<script>
+export default {
+  name: 'AvatarUpload',
+  data() {
+    return {
+      imageUrl: '',
+    };
+  },
+  props: {
+    uploadUrl: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    action() {
+      const __GLOBAL__URL__ = window.__HOST__URL__ + window.__PREFIX__URL__;
+      return __GLOBAL__URL__ + this.uploadUrl;
+    },
+    headers() {
+      return { Authorization: sessionStorage.getItem('token') };
+    },
+  },
+  methods: {
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+    },
+  },
+};
+</script>
+<style scoped>
+.avatar-uploader {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
diff --git a/src/component/form-designer/src/components/Charts/lineChart.vue b/src/component/form-designer/src/components/Charts/lineChart.vue
@@ -240,34 +240,7 @@ export default {
           zoomLock: true,
         };
         option.series[0].barWidth = null;
-        option.series[0].itemStyle.normal.color = (params) => {
-          const color = new echarts.graphic.LinearGradient(
-            0,
-            0,
-            1,
-            0,
-            [
-              {
-                offset: 0,
-                color: '#99E0AD', // 0% 处的颜色
-              },
-              {
-                offset: 0.6,
-                color: '#72C6A4', // 60% 处的颜色
-              },
-              {
-                offset: 1,
-                color: '#0B8A82', // 100% 处的颜色
-              },
-            ],
-            false,
-          );
-          return color;
-        };
       }
-      // if (this.option) {
-      //   this.lodash.merge(option, this.option);
-      // }
       return option;
     },
   },

diff --git a/src/component/form-designer/src/componentsConfig.ts b/src/component/form-designer/src/componentsConfig.ts
@@ -336,6 +336,18 @@ export const advanceComponents = [
       hiddenLabel: false,
     },
   },
+  {
+    type: 'avatar',
+    name: '头像',
+    icon: 'user',
+    labelWidth: '',
+    options: {
+      resourceId: 'id',
+      uploadUrl: '',
+      width: '180px',
+      hiddenLabel: true,
+    },
+  },
   {
     type: 'cascader',
     name: '级联选择器',

diff --git a/src/component/form-designer/src/icon.ts b/src/component/form-designer/src/icon.ts
@@ -35,3 +35,4 @@ import 'vue-awesome/icons/mouse-pointer';
 import 'vue-awesome/icons/file-word';
 import 'vue-awesome/icons/chart-bar';
 import 'vue-awesome/icons/tags';
+import 'vue-awesome/icons/user';