喵币管理

整体项目的技术难度不大, 更多的在于表格 状态的处理.

技术注意点

表格的数据拼接

  <el-table
    :data="tableData1"
    border
    @cell-dblclick="celledit"
    style="width: 671px;height:100px"
  >
    <template v-for="({ prop, label }, index) in vipConfig1">
      <el-table-column :key="prop" :prop="prop" :label="label">
        <template slot-scope="scope">
          <el-input
            class="border"
            v-model.number="scope.row[index].value"
            :disabled="scope.row[index].edit"
          ></el-input>
        </template>
      </el-table-column>
    </template>
  </el-table>

const vipConfigOption = Array.from({
    length: 15
}, (_, i) => ({
    prop: `${i + 1}` ,
    label: `vip${i + 1}` 
}));
const vipConfig1 = vipConfigOption.slice(0, 5);

传值的注意点

还有传值的时候, 注意值为0 的时候, 会判断成 false , 进而执行其他的. 还有一个 route 要注意的. 传成 false, 还是判断成字符串, 进而拿不到正确值.

数组嵌套

在时间控件上面面对 timerange 这种, 如果自己解析成, 很容易出现丢失的情况

  <el-form-item label="喵币批次有效期："  class="priceThreshold" prop="dateArray">
    <el-date-picker
      v-model="ruleForm.dateArray"
      type="daterange"
      @input='dataMethod'
      value-format="yyyyMMdd"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </el-form-item>

dataMethod(val) {
  delete this.ruleForm[0]
  delete this.ruleForm[1]

  const dateArray = this.ruleForm
  this.$set(dateArray, 0, val[0]);
  this.$set(dateArray, 1, val[1]);

}

导出表格

          const options = {
            activityId,
            uid: this.formInline.uid || '',
            beginTime,
            endTime
          };
          console.log('options', options);
          const parseParams = (uri, params) => {
            const paramsArray = []
            Object.keys(params).forEach(key => params[key] && paramsArray.push(`${key}=${params[key]}`))
            if (uri.search(/\?/) === -1) {
              uri += `?${paramsArray.join('&')}`
            } else {
              uri += `&${paramsArray.join('&')}`
            }
            return uri
          }

          const uri = 'http://game.manage.meizu.com/console/coin/activity/order/export?'
          const href = parseParams(uri, options)
          window.open(href, '_blank');