榆山大屏 增加党组织类型图标 admin前端代码更新

src/views/modules/sys/partyorgtype-add-or-update.vue

@@ -7,6 +7,22 @@
           <el-form-item label="党组织类型编码" prop="typeCode">
           <el-input v-model="dataForm.typeCode" placeholder="类型编码" maxlength="30"></el-input>
       </el-form-item>
+        <el-row>
+            <el-form-item label="图标" v-loading="loading" prop="imgUrl">
+                <el-upload class="avatar-uploader"
+                           :action="uploadUrl"
+                           :show-file-list="false"
+                           :on-success="handleAvatarActSuccess"
+                           :on-error="handelError"
+                           :before-upload="beforeAvatarUpload">
+                    <img v-if="dataForm.imgUrl"
+                         :src="dataForm.imgUrl"
+                         class="avatar">
+                    <i v-else
+                       class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+            </el-form-item>
+        </el-row>
           <el-form-item label="排序" prop="sort">
           <el-input-number v-model="dataForm.sort" :min="0" :max="99990"></el-input-number>
       </el-form-item>
@@ -30,15 +46,18 @@
 
 <script>
 import debounce from 'lodash/debounce'
+import Cookies from 'js-cookie'
 export default {
   data () {
     return {
       visible: false,
+      uploadUrl: '',
       dataForm: {
         id: '',
         typeName: '',
         typeCode: '',
         sort: '',
+        imgUrl: '',
         enable: ''
       },
       options: [{
@@ -47,7 +66,8 @@ export default {
       }, {
         value: '1',
         label: '是'
-      }]
+      }],
+      loading: false
     }
   },
   computed: {
@@ -59,6 +79,9 @@ export default {
         typeCode: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
+        imgUrl: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
         sort: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
@@ -73,6 +96,7 @@ export default {
       this.visible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
+        this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
         if (this.dataForm.id) {
           this.getInfo()
         }
@@ -111,7 +135,44 @@ export default {
           })
         }).catch(() => {})
       })
-    }, 1000, { 'leading': true, 'trailing': false })
+    }, 1000, { 'leading': true, 'trailing': false }),
+   handleAvatarActSuccess (res, file) {
+       this.loading = false
+       this.dataForm.imgUrl = res.data.url
+       this.btnAble = false
+      },
+   beforeAvatarUpload (file) {
+      this.loading = true
+      this.btnAble = false
+      },
+   handelError () {
+      this.loading = false
+      }
   }
 }
 </script>
+<style>
+    .avatar-uploader .el-upload {
+        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: 80px;
+        height: 80px;
+        line-height: 80px;
+        text-align: center;
+    }
+    .avatar {
+        width: 80px;
+        height: 80px;
+        display: block;
+    }
+</style>