# 三期复盘总结

## el-checkbox

遇到好几次不同需求,处理的方式都不同. 如果采用 v-for 循环的话 可以直接免对数据项做处理,否则就要自己处理 checkbox 的数据.

```js
// 1. 自己操作
  <el-form-item label="接入方式："  class="radio-form-item" v-if="ruleForm.gameTypeSelect === 0">
    <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
      <el-checkbox  @click.native.prevent="clickItem('supportNetGame')" label="supportNetGame">网游 sdk</el-checkbox>
      <el-checkbox @click.native.prevent="clickItem('supportSingleGame')" label="supportSingleGame">单机 sdk</el-checkbox>
    </el-checkbox-group>
  </el-form-item>

clickItem(e) {
  // 获取到 e ,如果有 arr 里面有 e 则去掉
  let arr = this.checkList;
  const arr2 = ['supportNetGame', 'supportSingleGame'];

  if (arr.includes(e)) {
      arr = arr2.filter(i => i !== e);
      this.checkList = [...arr]
  } else {
    // 不存在
    this.checkList.push(e)
  }

// 2. 无需操作
<el-form-item label="接入方式："  class="radio-form-item" v-if="ruleForm.appType == '1'">
  <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="item in accessTypeList" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
</el-form-item>

handleCheckedCitiesChange(e) {
  console.log('e: ', e);
},
```

## 时间戳处理

默认情况下得到的是时间戳, 我们可以将其 xxxx-xx-xx,在统一进行比较.

```js
formatTime(val) {
  const date = new Date(val * 1000);
  const Y = date.getFullYear();
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  const D = date.getDate() + ' ';
  return Y + M + D
}
```

## 表单验证

针对层级嵌套比较深 Form 表单采用单个 input 框处理,在提交的时候可以在进行一次验证

```js
  @keyup.native="validateEventHandle(dynamicProportion)"

    validateEventHandle(val) {
      console.log('val: ', val);
      if (val.proportion > 50) {
        this.$message.error('返回比例不能大于 50');
        val.proportion = '';
      }
      if (val.proportion < 0) {
        this.$message.error('返回比例不能小于 0');
        val.proportion = '';
      }
    },

    if (data[i].payMax < data[i].payMin) {
      this.$message.error('最大和最小充值金额设置比例错误');
      return
    }
```

## el-radio-group

label 放入的数字 对应为 string 类型, :label 则为 number 类型.在做校验的时候可能会报错.所以我们要转换一下

```js
  <el-form-item label="游戏类型选择：" prop="gameTypeSelect" class="radio-form-item">
      <el-radio-group v-model="ruleForm.gameTypeSelect">
          <el-radio :label="0">按接入方式</el-radio>
          <el-radio :label="1">自定义</el-radio>
      </el-radio-group>
  </el-form-item>
```

## form 表单 时间戳,做空判断

```js
  const startTime = Number(createTime[0]) / 1000 || '';
  const endTime = Number(createTime[1]) / 1000 || '';
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/chang-jian-zong-jie/meizu/miao-bi-guan-li-san-qi-fu-pan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
