尼采般地抒情

公告栏

此网站主题为本人手写主题,主题还在开发中……


作者:尼采般地抒情

站点信息

文章数目:259
已运行时间:
目录
  1. 表单新增动态管理选项
  2. 遇到的问题与解决
    1. 接口数据的二级嵌套与模板之间的渲染矛盾问题
    2. 模板需要接口更新的数据
    3. 正则表达式提高代码扩展性
    4. 其他

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题,主题还在开发中……


作者:尼采般地抒情

站点信息

文章数目:259
已运行时间:

image.png

表单新增动态管理选项

  • 页面调试地址
/manage_game/web/welfare/act-list
  • 测试代码
console.log("submit提交配置:===========================");
console.log(data);
// console.log(params.holidayAddon)
// console.log(this.config)
console.log({ ...this.config.data, ...params });
console.log("==========================================");

console.log("this.config.data拉取配置:===================");
console.log(holidayAddon);
// console.log(this.config.data)
console.log("============================================");

遇到的问题与解决

接口数据的二级嵌套与模板之间的渲染矛盾问题

思路:将 get 到的 api 数据嵌套对象数据取出,并将其重新赋到 api 字段,以便渲染
找到数据的处理函数根源处修改,将其子嵌套字段拍平,同时达到提交接口所需的字段功能

if (item.holidayAddon) {
  item.holidayAddon = {
    ...item.holidayAddon,
    ...item.holidayAddon.directDeliver,
  };
}

但是字段内还有一个数组,又形成了一个接口的数组子嵌套,解决的办法是在 submit 提交时,将该数组字段进行处理

// 【上传api】添加flexibleDeliverCounts数组
if (params.directDeliver) params.directDeliver.flexibleDeliverCounts = []
list.forEach(it => {
  if (it.parentKey) {
    if (it.parentKey === curParentKey) {
      params[curParentKey][it.prop] = params[it.prop]
    }

    delete params[it.prop]
  }
  // 【提api】将持续天数配置的单个天数提交到flexibleDeliverCounts数组
  if (it.prop.match('^dayGet_')) {
    let day_num = it.prop.substring(Number(it.prop.indexOf('_')) + 1)
    let day = 'dayGet_' + day_num
    if (data[day]) {
      params.directDeliver.flexibleDeliverCounts.push({
        days: Number(day_num),
        deliverCount: data[day]
      })
    }
  }
  // 当修改的天数比配置的天数少,删除多出来的后几天
  params.directDeliver.flexibleDeliverCounts.splice(
    data.duration,
    params.directDeliver.flexibleDeliverCounts.length - 1
  )

模板需要接口更新的数据

改变赠送周期 select 的三个选项,【每日赠送-灵活次数】的子选项未能按预期显示
解决办法:基于 select 模板新增一个公共模板(传入 formData 参数)

// 直接赠送
  {
    type: 'selectData',
    prop: 'deliverCycle',
    label: '赠送周期',
    parentKey: 'directDeliver',
    dict: [
      { value: 1, label: '每日赠送-固定次数' },
      { value: 2, label: '活动期间赠送' },
      { value: 3, label: '每日赠送-灵活次数' }
    ],
    watchChange: (val, list, data) => {
      // 切换按钮时选项卡的隐藏与显示
      list.forEach(_it => {
        if (val === 3) {
          if (_it.prop === 'duration') {
            _it.hidden = false
          }
          if (_it.prop === 'deliverCount') {
            _it.hidden = true
          }
          if (_it.prop.includes('dayGet_')) {
            _it.hidden = true
            if (_it.days <= data.duration) {
              _it.hidden = false
            }
          }
        } else {
          if (_it.prop === 'duration') {
            _it.hidden = true
          }
          if (_it.prop === 'deliverCount') {
            _it.hidden = false
          }
          if (_it.prop.includes('dayGet_')) {
            _it.hidden = true
          }
        }
      })
    },
    hidden: true
  },

正则表达式提高代码扩展性

可较为方便配置持续天数(当前默认【持续天数】为 5 天)
解决办法:利用正则表达式提取关键词字头,以便后续可以动态配置持续天数
利用字符串 includes 方法

// 【提api】将持续天数配置的单个天数提交到flexibleDeliverCounts数组
if (it.prop.match("^dayGet_")) {
  let day_num = it.prop.substring(Number(it.prop.indexOf("_")) + 1);
  let day = "dayGet_" + day_num;
  if (data[day]) {
    params.directDeliver.flexibleDeliverCounts.push({
      days: Number(day_num),
      deliverCount: data[day],
    });
  }
}

其他

  • 部分代码规范化:if 语句不省大括号,includes 替代正则,监听逻辑放到 selectData 的 watchChange 事件中

评论区

Beaudar Twikoo

最新评论

Loading...