上传文件组件编写

 Source/ProjectWeb/src/components/Divider/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
<!-- å‡½æ•°å¼ç»„件封装分割线 -->
<template functional>
  
  <div class="divider" :style="{backgroundColor: props.bgkColor, color: props.color}">
    <span :style="{left: props.left}">{{ props.text }}</span>{{ $props }}
  </div>
</template>
<style lang="scss" scoped>
.divider {
  margin: 10px 0;
  position: relative;
  width: 100%;
  height: 1px;
  background-color: rgb(196, 196, 196);
  color:  rgb(164, 164, 164);
  span {
    padding: 0 10px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 999;
    background-color: #fff;
  }
}
</style>

 Source/ProjectWeb/src/components/PLT-basic-component/Upload-files.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,155 @@
<template>
  <el-dialog
    title="上传文件"
    :visible.sync="dialogVisible"
    append-to-body
  >
    <Divider text="导入提示" left="30px"></Divider>
    <ul>
      <li>
        1.红色字体表示必输项
      </li>
      <li>
        2.每次仅能最多导入10000条数据
      </li>
    </ul>
    <Divider text="excel文件，选择文件后会自动上传" left="30px"></Divider>
    <el-upload
      accept=".xlsx, .xls"
      action="/api/ubcs-code/codeClassify/importClassify"
      :on-success="onSuccess"
      :on-error="onError"
      :headers="uploadHeaders"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-change="uploadChange"
      class="upload-demo">
      <el-button size="small" type="primary" style="margin: 15px 35px">浏览文件</el-button>
    </el-upload>
    <template #footer>
      <el-button
        type="primary"
        size="small"
        @click="downloadTemplateFun"
        :loading="downloadLoading"
      >下载导入模板</el-button
      >
      <el-button size="small" @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
// import {downloadErrorFile,downloadBatchImportApplyTemplate} from '@/api/template/templateAttr'
import {getToken} from "@/util/auth";
import func from "@/util/func";
export default {
  name: "Upload-files",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    codeClassifyOid: {
      type: String,
      default: "",
    },
  },
  data(){
    return{
      flga:true,
      pageLoading: null,
      downloadLoading: false,
    }
  },
  watch:{
    visible:{
      handler(newval,oldval){
        // console.log('newval',newval)
      }
    }
  },
  computed:{
    uploadHeaders() {
      return {
        "Blade-Auth": "bearer " + getToken(),
      };
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods:{
    //文件上传前
    async beforeUpload(file) {
      const fileType = file.name.split(".").pop();
      if (fileType !== "xlsx" && fileType !== "xls") {
        // ä¸Šä¼ æ ¼å¼ä¸ç¬¦åˆè¦æ±‚，提示错误信息并取消上传
        this.$message.error("只允许上传xlsx、xls格式的文件");
        return Promise.reject(false);
      }
      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸ
    onSuccess(resbonse){
      if (Object.keys(resbonse.data).length === 0) {
        this.$message.success( "上传成功！");
        this.dialogVisible = false;
        return;
      }
      if (resbonse.data.fileOid) {
        const fileName = resbonse.data.filePath.split("/").pop();
        this.$message.error("请下载错误信息文件进行查看！");
        downloadErrorFile({ uuid: resbonse.data.fileOid }).then((res) => {
          func.downloadFileByBlobHandler(res);
        });
      }
    },
    //点击下载模板
    downloadTemplateFun(){
      this.downloadLoading = true;
      downloadBatchImportApplyTemplate({codeClassifyOid: this.codeClassifyOid}).then(res=>{
        this.$utilFunc.downloadFileByBlob(res.data,  "模板文件.xls");
        this.downloadLoading = false;
      }).catch((res)=>{
        this.$message.warning(res)
        this.downloadLoading = false;
      })
    },
    //文件上传失败
    onError(res){
      this.pageLoading.close();
    },
    //文件状态改变
    uploadChange(file){
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 20px 0;
  padding: 0 0 0 30px;
  list-style: none;
  li {
    margin-bottom: 5px;
    font-size: 13px;
  }
}
</style>

 Source/ProjectWeb/src/components/PLT-basic-component/richText.vue

 Source/ProjectWeb/src/main.js

@@ -23,6 +23,7 @@
import avueUeditor from 'avue-plugin-ueditor';
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
import Divider from  '@/components/Divider/index'
// ä¸šåŠ¡ç»„件
import tenantPackage from './views/system/tenantpackage';
//基础绑定表单按钮
@@ -32,8 +33,9 @@
//固定表单组件
import dynamicForm from '@/components/dynamic-components/dynamic-form'
//富文本组件
import richText from '@/components/form-component/richText'

import richText from '@/components/PLT-basic-component/richText'
// ä¸Šä¼ æ–‡ä»¶ç»„件
import UploadFiles from  '@/components/PLT-basic-component/Upload-files'
// æ³¨å†Œå…¨å±€å®¹å™¨
Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
@@ -45,6 +47,8 @@
Vue.component('dynamicTableForm', dynamicTableForm);
Vue.component('dynamicForm', dynamicForm);
Vue.component('richText', richText);
Vue.component('UploadFiles', UploadFiles);
Vue.component('Divider', Divider);

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

 Source/ProjectWeb/src/views/custom-ui/test.vue

@@ -1,5 +1,6 @@
<template>
    <div id='quillEditorQiniu'>
      <el-button @click="visible = true">上传文件</el-button>
      <!-- åŸºäºŽelementUi的上传组件 el-upload begin-->
      <el-upload
        :accept="'image'"
@@ -14,6 +15,7 @@
      <!-- åŸºäºŽelementUi的上传组件 el-upload end-->
      <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
      </quill-editor>
      <UploadFiles :visible.sync="visible"></UploadFiles>
    </div>
</template>

@@ -38,6 +40,7 @@
export default {
  data() {
    return {
      visible:false,
      headers: {
        Authorization: "Bearer " + getToken(),
      },