活动策略录入总结

整体思路

（一）功能实现

1、excel读取（学习）

const fileConcent = e.target.file[0]; //fileContent 为文件信息
const reader = new FileReader(); //读取文件方法
reader.readAsBinaryString(fileContent);//执行该方法时，自动触发onload，read结果放在wordbook中,workbook包含excel所有信息，如下图；

把上图结果workbook转为json（sheet.to_json方法）

2、上传提示框 el-dialog

3、批量删除

4、数据校验

• 折扣输入框：一位数字–>num*10; 输入长度maxlength<=2;

• el-input输入框属性 :rules=”[{type:array, required, message: “不可为空”}]”

• 提交时判断数字数字是否为空，为空则this.$message.error(‘’);
  

  5、新建情况下“其他活动”

  变化：单个活动变为->多个活动录入，
  upload：上传图片
  第一个其他活动使用原来的城市日期等
  
  
  其他活动，活动参数由对象变为对象数组，难点

• 添加日期、规则、上传图片等组件需要条件：判断type = 其他

• 使用新数组（对象–>对象数组）保存信息，各个属性值与原来参数同，以v-for形式展示多个活动；

• 上传功能：el-upload组件，包含预览、保存url、多个图片、放大和删除

• 新增活动：日期城市名称等信息push进新数组，列表活动增加一个；

• 提交处理：数组遍历，每次提交一个对象信息，其中需要拆分城市id数组；

查看和编辑状态–>点击进入详情

• watch监听：如果为“其他”活动, 对象参数 ->另一个对象数组中；

查看：限制不可用
重新编辑：信息修改或增加活动

• 再次提交时，根据活动id（后端产生，更新则有id，新增无id）区分为“更新”和“新增”，分开提交
• 图片回显，fileList将url以对象形式存储，能够在upload中展示；

6、活动录入流程图

7、合并日历展示–table 难点

数据格式处理：按天数据（按列给数据）–>按活动类型展示（分5行展示）；一个活动类型–>多个活动（求最大行数）; 每一行活动内容相同
tableContent处理–5层循环：
第一层5个活动类型；
每个类型最大行数，行数for循环，每一行活动；
每一行每一个日期：
每一行不同日期的对比；
不同日期中一天的多个活动依次对比，相同则放入同一行，不同则进入下一行；




行合并：行列合并通过span-method实现，在第一列合并；maxlength为合并的行数；
列合并：难点在于多次合并列和合并位置不确定；
)

8、数据处理思路

（二）所遇问题及解决