文章目录

一、统计功能

​​在vue中使用echarts​​

二、下载模板功能与批量导入员工功能

  1. 下载模板
    ​​前端需要调下载模板接口，把获取的二进制流文件转换为excel文件​​
  2. 批量导入员工
    前端需要调用批量导入员工接口，上传一个excel文件
    步骤：
  • 在项目中引入上传文件组件
<el-upload
     ref="upload"
     class="upload-demo"
     :on-error="uploadError"
     :on-success="uploadSuccess"
     :limit="1"
     accept=".xlsx,.xls"
     :headers="token"
     drag
     action="/api/users/import"
     multiple
     @src-file-set="fileSet"
>
    <i class="iconfont icon-ioc-shangc myupload-icon" />
    <div class="el-upload__text">选择或拖拽上传文件</div>
</el-upload>
  • js代码：
uploadSuccess: function(response, file, fileList) {
    console.log('上传文件成功response' + response);
    console.log('上传文件成功file' + file);
    console.log('上传文件成功fileList' + fileList);
    this.$message({
        message: '上传文件成功！',
        type: 'success'
    });
    return true;
},
uploadError: function(response, file, fileList) {
    console.log('上传文件失败response' + response);
    console.log('上传文件失败file' + file);
    console.log('上传文件失败fileList' + fileList);
    this.$message({
        message: '上传文件失败！',
        type: 'error'
    });
    return false;
},
 // 用户选取文件之后调用
 fileSet(fileName, fileType, fileSize) {
 },

三、修改公司头像

  • 引入上传图片（文件）组件
<div class="companyProfilePhotoContent Grid">
    <div class="companyProfilePhoto Grid-cell">公司头像</div>
    <div class="companyImg Grid-cell">
        <img
            :src="imgSrc"
            alt=""
            referrerpolicy="no-referrer-when-downgrade"
        >
    </div>
    <div class="editCompanyProfilePhoto Grid-cell" @click="toggleShow">修改</div>
    <my-upload
        v-model="show"
        :width="200"
        :height="200"
        img-format="png"
        :size="size"
        lang-type="zh"
        :no-rotate="false"
        field="file"
        url="/api/file/uploadImage"
        :headers="token"
        @src-file-set="fileSet"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
    />
</div>
  • js代码
toggleShow() {
    this.show = !this.show;
     },
     // 用户选取文件之后调用
     fileSet(fileName, fileType, fileSize) {
         this.token = { 'Authorization': getToken() };
     },
     // 修改公司头像（图片截取完成事件  上传前）
     // 因为使用上传组件中加上url后，已经上传到服务器，所以这里不用再调上传文件的接口
     cropSuccess(imgDataUrl, field) {
         // console.log('crop 成功', imgDataUrl, field);
         console.log('imagedataurl', imgDataUrl);
         console.log(' field', field);
         console.log('上传前！');
         console.log(imgDataUrl);
     },
     // 上传成功回调
     cropUploadSuccess(jsonData, field) {
         console.log('上传成功');
         console.log('文件名', jsonData.data);
         console.log(service);
         console.log(window.location.hostname, 'url');
         console.log(process.env.VUE_APP_BASE_API);
  
         this.jsonData.data = jsonData.data;
         this.company.logoPath = this.jsonData.data;
         crudCompany.edit(this.company).then((res) => {
         });
         this.imgSrc = process.env.VUE_APP_BASE_API + 'api/file/download/' + this.company.logoPath;
     },
     // 上传失败回调
     cropUploadFail(status, field) {
         console.log('-------- upload fail --------');
         console.log('上传失败状态' + status);
         console.log('field: ' + field);
  }

四、修改公司名称

<div class="companyNameContent Grid">
    <div class="companyName Grid-cell">公司名</div>
    <!-- <div class="companyNameValue Grid-cell">{{ this.$store.state.company.company.name }}</div> -->

    <div class="companyNameValue Grid-cell">{{ company.name }}</div>
    <el-button
        type="text"
        class="editCompanyName Grid-cell"
        @click="dialogFormVisible = true"
    >修改</el-button>
    <el-dialog
        title="修改公司名称"
        :visible.sync="dialogFormVisible"
        :before-close="handleDialogClose"
    >
        <el-form :model="form">
            <el-form-item label="新的公司名称：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <div id="result" />
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button
                type="primary"
                @click="editCompanyName()"
            >确 定</el-button>
        </div>
    </el-dialog>
</div>

js代码

// 确认修改公司名称
editCompanyName() {
    document.getElementById('result').innerHTML = '';
    if (this.form.name !== '') {
        this.company.name = this.form.name;
        crudCompany.edit(this.company).then((res) => {
            this.dialogFormVisible = false;
            // 刷新页面--------------------------------------------
            location.reload();
        });
    } else {
        document.getElementById('result').innerHTML = '公司名称不能为空！';
    }
    this.form.name = '';
},
// 取消修改公司名称
cancel() {
    this.dialogFormVisible = false;
    this.form.name = '';
    document.getElementById('result').innerHTML = '';
},
/**
* 点击修改公司名称  X 关闭对话框的回调
**/
handleDialogClose() {
    this.dialogFormVisible = false;
    this.form.name = '';
    document.getElementById('result').innerHTML = '';
}