若依VUE前后端分离版如何添加导入功能

在**若依VUE**前后端分离版中，若是需要手动增加导入功能，请按照如下步骤，可快速，且完整的实现：

1. controller中增加如下代码：
```java
/**
 * 导入数据
 * @param file
 * @param updateSupport
 * @return
 * @throws Exception
 */
@Log(title = "导入合同", businessType = BusinessType.IMPORT)
@RequiresPermissions("system:incontract:import")
@PostMapping("/importData")
@ResponseBody
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
{

ExcelUtil<Incontract> util = new ExcelUtil<Incontract>(Incontract.class);
    List<Incontract> dataList = util.importExcel(file.getInputStream());
    String message = IncontractService.importData(dataList, updateSupport, getLoginName());
    return AjaxResult.success(message);
}

/**
 * 下载模板文件
 * @return
 */
@RequiresPermissions("system:incontract:view")
@GetMapping("/importTemplate")
@ResponseBody
public AjaxResult importTemplate()
{
    ExcelUtil<Incontract> util = new ExcelUtil<Incontract>(Incontract.class);
    return util.importTemplateExcel("合同数据模板数据");
}
```

2. service中增加如下代码
**interface**
```java
/**
 * 导入合同数据数据
 *
 * @param dataList 用户数据列表
 * @param isUpdateSupport 是否更新支持，如果已存在，则进行更新数据
 * @param operName 操作用户
 * @return 结果
 */
public String importData(List<Incontract> dataList, Boolean isUpdateSupport, String operName);
```

**service**
```java
/**
 * 导入项目数据
 *
 * @param dataList 项目数据列表
 * @param isUpdateSupport 是否更新支持，如果已存在，则进行更新数据
 * @param operName 操作用户
 * @return 结果
 */
@Override
public String importData(List<Incontract> dataList, Boolean isUpdateSupport, String operName)
{
    if (StringUtils.isNull(dataList) || dataList.size() == 0)
    {
        throw new ServiceException("导入数据不能为空！");
    }
    int successNum = 0;
    int failureNum = 0;
    StringBuilder successMsg = new StringBuilder();
    StringBuilder failureMsg = new StringBuilder();

for (Incontract item : dataList)
    {
        try
        {
            // 验证是否存在这个项目，用合同编号，项目名称，创建人判断
            Incontract u = IncontractMapper.selectIncontractByConNo(item.getConNo());

if (StringUtils.isNull(u))
            {
                BeanValidators.validateWithException(validator, item);
                //item.setCreateTime();
                IncontractMapper.insertIncontract(item);
                successNum++;
                successMsg.append("<br/>" + successNum + ", 导入成功");
            }
//                else if (isUpdateSupport)
//                {
//                    BeanValidators.validateWithException(validator, user);
//                    checkUserAllowed(u);
//                    checkUserDataScope(u.getUserId());
//                    user.setUserId(u.getUserId());
//                    user.setUpdateBy(operName);
//                    userMapper.updateUser(user);
//                    successNum++;
//                    successMsg.append("<br/>" + successNum + "、账号 " + user.getLoginName() + " 更新成功");
//                }
            else
            {
                failureNum++;
                failureMsg.append("<br/>" + failureNum + "、合同编号: " + item.getConNo() + " 已存在");
            }
        }
        catch (Exception e)
        {
            failureNum++;
            String msg = "<br/>" + failureNum + "、导入失败：";
            failureMsg.append(msg + e.getMessage());
            log.error(msg, e);
        }
    }
    if (failureNum > 0)
    {
        failureMsg.insert(0, "很抱歉，导入失败！共 " + failureNum + " 条数据格式不正确，错误如下：");
        throw new ServiceException(failureMsg.toString());
    }
    else
    {
        successMsg.insert(0, "恭喜您，数据已全部导入成功！共 " + successNum + " 条，数据如下：");
    }
    return successMsg.toString();
}
```

3. view中增加如下代码
javascript 部分
```js
data() {
    return {
	...
	  // 用户导入参数
	  upload:{
		// 是否显示弹出层（用户导入）
		open: false,
		// 淡出层标题
		title: "",
		// 是否禁用上传
		isUploading: false,
		// 是否更新已经存在的用户数据
		updateSupport: 0,
		// 设置上传的请求头部
		headers: {Authorization: "Bearer " + getToken()},
		// 上传的地址
		url: process.env.VUE_APP_BASE_API + "/system/incontract/importData"
	  },
	...
	}
}
```
vue部分
```html
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" :close-on-click-modal="false" v-dialogDrag>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport='+upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport"/> 是否更新已经存在的合同数据
          <el-link type="info" style="font-size: 12px; margin-left:10px; padding:3px; border:1px solid #CCC; background-color: #EEE; color:#1890ff;" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red;" slot="tip">提示: 仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确定</el-button>
        <el-button @click="upload.open = false">取消</el-button>
      </div>
    </el-dialog>
```

钱三爷的窝

若依VUE前后端分离版如何添加导入功能