经验总结

  1. 首页 > 生活 > >

Vue3实现动态导入Excel表格数据( 三 )

生活百科

const Save = () => {if (state.tempData.length == 0) {state.active=1;ElMessage.warning('请导入考生数据');return;}let CheckSelectData = https://www.huyubaike.com/biancheng/true;state.SelectData.forEach((value, index) => {if (!value.type) {CheckSelectData = false}});if (!CheckSelectData) {state.active=2;ElMessage.warning('请设置完成数据对应关系');return;}if (state.tableTimeData.data.length==0){state.active=3;ElMessage.warning('请添加场次数据');return;}if (!state.ExamData.jiancheng||!state.ExamData.kaikaonianyue||!state.ExamData.quancheng){state.active=4;ElMessage.warning('请设置任务相关信息');return;}axios.post('/GenerateCheckTemplate', state).then(function (response) {if (response.status == 200) {ElMessage.success(response.data);dataUpload.value.cancel();getData();} else {ElMessage.error(response.data)}})}后台定义接口:/GenerateCheckTemplate定义实体对前台导入数据进行接收：public class GenerateCheckTemplate{/// <summary>/// 考试任务对象/// </summary>public ExamData ExamData { get; set; }/// <summary>/// 数据对应关系对象/// </summary>public List<Correspondence> SelectData { get; set; }/// <summary>/// 导入数据/// </summary>public List<Dictionary<string, string>> tempData { get; set; }/// <summary>/// 导入数据列集合/// </summary>public List<Colunm> colunm { get; set; }/// <summary>/// 场次对象/// </summary>public tableTimeData tableTimeData { get; set; }}/// <summary>/// 考试任务对象/// </summary>public class ExamData{/// <summary>/// 简称/// </summary>public string jiancheng { get; set; }/// <summary>/// 考试年月/// </summary>public string kaikaonianyue { get; set; }/// <summary>/// 简称/// </summary>public string quancheng { get; set; }}/// <summary>/// 数据对应关系对象/// </summary>public class Correspondence{/// <summary>/// key/// </summary>public string key { get; set; }/// <summary>/// 下拉选择数据/// </summary>public string selectValue { get; set; }/// <summary>/// 标题/// </summary>public string title { get; set; }/// <summary>/// 类型 0 固定值 1下拉框选择/// </summary>public string type { get; set; }/// <summary>/// 固定值数据/// </summary>public string value { get; set; }}/// <summary>/// 表格对象/// </summary>public class tableTimeData{/// <summary>/// 提交表格数据/// </summary>public List<ExamTime> data { get; set; }/// <summary>/// 总数/// </summary>public int total { get; set; }}public class ExamTime{/// <summary>/// 场次编码/// </summary>public int? ExamTimeCode { get; set; }/// <summary>/// 场次名称/// </summary>public string ExamTimeName { get; set; }/// <summary>/// 开始时间/// </summary>public string startTime { get; set; }/// <summary>/// 结束时间/// </summary>public string endTime { get; set; }/// <summary>/// 是否编辑状态/// </summary>public bool Edit { get; set; }}/// <summary>/// 导入数据列对象/// </summary>public class Colunm{/// <summary>/// 键值/// </summary>public string key { get; set; }/// <summary>/// 值/// </summary>public string lable { get; set; }}然后处理前端传过来的数据转换成需要的数据，这里type需要修改成枚举类型,类型可以根据需求进行扩展 /// <summary>/// 处理前端传过来的数据/// </summary>/// <param name="companiesInput"></param>private void ProcessingData(GenerateCheckTemplate companiesInput, DataTable dataTable){Dictionary<string, string> keyValuePairs = new Dictionary<string, string>();foreach (var data in companiesInput.tempData){DataRow dataRow = dataTable.NewRow();foreach (Correspondence correspondence in companiesInput.SelectData){if (correspondence.type == "0"){dataRow[correspondence.key] = correspondence.value;}else if (correspondence.type == "1"){dataRow[correspondence.key] = data[correspondence.selectValue];}else if (correspondence.type == "2"){string value = https://www.huyubaike.com/biancheng/data[correspondence.selectValue];if (keyValuePairs.ContainsKey(value)){dataRow[correspondence.key] = keyValuePairs[value];}else{keyValuePairs.Add(value, (keyValuePairs.Count + 1).ToString().PadLeft(2,'0'));dataRow[correspondence.key] = keyValuePairs[value];}}}dataTable.Rows.Add(dataRow);}}

经验总结扩展阅读


上一篇：2022最火的新人结婚祝福

下一篇：从0搭建vue3组件库: Input组件