模版管理

src/views/report/TEMPLATE/index.vue

@@ -127,8 +127,28 @@
         <el-form-item label="模版名称" prop="title">
           <el-input v-model="form.title" placeholder="请输入模版名称"/>
         </el-form-item>
-        <el-form-item label="模版路径" prop="filename">
-          <el-input v-model="form.filename" placeholder="请输入模版路径"/>
+        <el-form-item label="模版上传" prop="filename">
+          <el-upload
+            ref="upload"
+            :auto-upload="false"
+            :limit="1"
+            accept=".docx, .doc"
+            :headers="upload.headers"
+            :action="upload.url + '?updateSupport=' + upload.updateSupport"
+            :disabled="upload.isUploading"
+            :on-success="handleFileSuccess"
+            :on-change="onChange"
+            drag
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+            <div class="el-upload__tip text-left" slot="tip">
+              <span>仅允许导入doc、docx格式文件。</span>
+            </div>
+          </el-upload>
         </el-form-item>
         <el-form-item label="是否启用">
           <el-radio-group v-model="form.status">
@@ -150,7 +170,7 @@
 
 <script>
   import {getTEMPLATE, listTEMPLATE, addTEMPLATE, updateTEMPLATE, delTEMPLATE, changeTemplateStatus, queryStatusNum} from "@/api/report/TEMPLATE";
-
+  import {getToken} from "@/utils/auth";
   export default {
   name: "TEMPLATE",
   dicts: ['template_disable'],
@@ -189,6 +209,21 @@
         updateTime: null,
         updateBy: null
       },
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        uploadFinish: false,
+        // 弹出层标题（用户导入）
+        title: '',
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: {Authorization: 'Bearer ' + getToken()},
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/report/TEMPLATE/importTemplate'
+      },
       // 表单参数
       form: {},
       // 表单校验
@@ -206,6 +241,21 @@
     this.getList();
   },
   methods: {
+    onChange(file, fileList) {
+      this.$refs.upload.submit();
+    },
+    handleFileSuccess(response, file, fileList) {
+      this.form.filename = response.data;
+      //this.$refs.upload.clearFiles();
+      this.upload.uploadFinish = true;
+      let code = response.code;
+      if (code !== 200) {
+        this.$message.error(response.msg);
+        return;
+      }
+      this.$message.success('上传成功');
+      //this.reset();
+    },
     /** 查询模板管理列表 */
     getList() {
       this.loading = true;