Finish Hotfix-mo-8

src/api/common.js

@@ -17,3 +17,12 @@ export function getTypeList() {
     params
   })
 }
+
+// 获取oss配置
+export function getOssConfig(params) {
+  return request({
+    url: '/common/oss/config',
+    method: 'get',
+    params
+  })
+}

src/components/Common/file-upload.vue

@@ -0,0 +1,129 @@
+<template>
+	<div>
+		<el-upload
+			:action="oss_url"
+			:data="dataObj"
+			:multiple="false"
+			:show-file-list="isShowFileList"
+			:file-list="fileList"
+			:before-upload="beforeUpload"
+			:on-remove="handleRemove"
+			:on-success="handleUploadSuccess"
+		>
+			<el-button size="small" type="primary">{{fileList.length == 0 ? '点击上传':'重新上传'}}</el-button>
+		</el-upload>
+	</div>
+</template>
+<script>
+import { getOssConfig } from '@/api/common';
+
+export default {
+	name: 'fileUpload',
+	props: {
+		fileList: Array,
+    fileType: {
+      type: Array,
+      default: () => ['image', 'video', 'word', 'excel', 'ppt', 'pdf']
+    }
+	},
+	data() {
+		return {
+			oss_url: '',
+			dataObj: {},
+			aliosstoken: '',
+		};
+	},
+	created() {
+    getOssConfig().then(res => {
+      this.oss_url = res.data.host;
+      this.dataObj = res.data;
+    })
+	},
+	computed: {
+		isShowFileList: {
+			get: function() {
+				if (this.fileList.length > 0 && this.fileList[0].url) {
+					return true;
+				} else {
+					return false;
+				}
+			},
+			set: function(newValue) {}
+		}
+	},
+	methods: {
+		getUUID() {
+			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+				return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16);
+			});
+		},
+		createName(name) {
+			const date = Date.now();
+			const uuid = this.getUUID();
+			const fileSuffix = name.substring(name.lastIndexOf(".") + 1);
+			return `${date}${uuid}.${fileSuffix}`;
+		},
+		handleRemove(file, fileList) {
+			// this.fileList = [{ name: '', url: '' }];
+      this.fileList.pop();
+		},
+		beforeUpload(file) {
+			const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const imgList = ['jpg', 'jpeg', 'png'];
+      const videoList = ['mp4'];
+      const wordList = ['doc', 'docx', 'dot', 'wps', 'wpt'];
+			const excelList = ['xls', 'xlsx', 'xlt', 'et', 'ett'];
+			const pptList = ['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'];
+			const pdfList = ['pdf'];
+
+      let whiteList = [];
+      if(this.fileType.includes('image')) {
+        whiteList = whiteList.concat(imgList);
+      }
+      if(this.fileType.includes('video')) {
+        whiteList = whiteList.concat(videoList);
+      }
+      if(this.fileType.includes('word')) {
+        whiteList = whiteList.concat(wordList);
+      }
+      if(this.fileType.includes('excel')) {
+        whiteList = whiteList.concat(excelList);
+      }
+      if(this.fileType.includes('ppt')) {
+        whiteList = whiteList.concat(pptList);
+      }
+      if(this.fileType.includes('pdf')) {
+        whiteList = whiteList.concat(pdfList);
+      }
+
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        return this.$errorMsg('只支持上传' + this.fileType.join(',') + '文件!');
+      }
+			const fileName = this.createName(file.name);
+			const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      this.dataObj.key = this.dataObj.dir + fileName;
+		},
+		handleUploadSuccess(res, file, fileList) {
+			const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+			this.fileList.pop();
+			this.fileList.push({
+				name: file.name,
+				url: this.dataObj.key
+			});
+			this.showFileList = true;
+			loading.close();
+		}
+	}
+};
+</script>

src/components/Common/import-button.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <el-upload
+      style="display: inline-block; margin: 0 10px;"
+      action="import"
+      :http-request="handleImport"
+      :file-list="importFileList"
+    >
+      <el-button size="small" type="primary" :icon="isIcon ? 'el-icon-download':''" :loading="importLoading">{{ importLoading ? '导入中...' : imText }}</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { handleImport } from '@/utils/util'
+
+export default {
+  name: 'ImportButton',
+  props: {
+    imText: { // 按钮文字
+      type: String,
+      default: '导入数据'
+    },
+    isIcon: { // 是否显示icon图标
+      type: Boolean,
+      default: true
+    },
+    imUrl: { // 导入地址
+      type: String,
+      default: '',
+    },
+    imParams: { // 导入参数
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      importLoading: false,
+      importFileList: [],
+    }
+  },
+  methods: {
+    async handleImport(param) {
+      this.importLoading = true;
+      const file = param.file;
+      const formData = new FormData();
+      formData.append("file", file);
+
+      if(this.imParams) {
+        for (let key in this.imParams) {
+          if (this.imParams.hasOwnProperty(key)) {
+            formData.append(key, this.imParams[key]);
+          }
+        }
+      }
+
+      let result = await handleImport(this.imUrl, formData);
+      this.importLoading = false;
+      this.importFileList = [];
+      if(result.code == 200) {
+        this.$alert(result.message, '导入成功', {
+          confirmButtonText: '确定'
+        });
+        this.$emit('importSuccess');
+      }else {
+        this.$alert(result.message, '导入失败', {
+          confirmButtonText: '确定'
+        });
+      }
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

src/main.js

@@ -29,7 +29,8 @@ Vue.prototype.$warningNotify = warningNotify;
 // 自定义组件
 import ExportButton from '@/components/Common/export-button.vue'
 Vue.component('ExportButton', ExportButton);
-
+import ImportButton from '@/components/Common/import-button.vue'
+Vue.component('ImportButton', ImportButton);
 
 /**
  * If you don't want to use mock-server

src/views/setting/role.vue

@@ -9,6 +9,7 @@
           <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEdit('add')" v-if="checkBtnRole('add')">新增角色</el-button>
         </div>
         <div class="fr">
+          <ImportButton :imUrl="'stock/importToll'" @importSuccess="getList" />
         </div>
       </div>
 
@@ -53,6 +54,9 @@
         <el-form-item label="角色名" prop="name">
           <el-input v-model="addForm.name" autocomplete="off" placeholder="请输入角色名"></el-input>
         </el-form-item>
+        <el-form-item label="上传文件" prop="fileUrl">
+          <fileUpload :fileList="fileList" />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelAddForm">取 消</el-button>
@@ -84,8 +88,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import { getRoleList, addRole, editRole, getRoleDetail, deleteRole, getMenuList, getMenuRoleIds, setMenuRole } from '@/api/setting'
+import fileUpload from '@/components/Common/file-upload.vue'
 
 export default {
+  components: {
+    fileUpload
+  },
   data() {
     return {
       baseURL: process.env.VUE_APP_BASE_API,
@@ -113,7 +121,9 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'moduleName'
-      }
+      },
+
+      fileList: [],
     }
   },
   computed: {