作为一名新晋码农，以下是我个人的工作心得，希望能帮到刚步入编程殿堂和使用vue-cli和ant-design-vue UI组件库的童鞋们

---

之前需求总结：

上传代码的时候，记得把一些全局的配置包括：package.json，以及一些console.log代码删除，其次考虑代码冗余，不得随意篡改老代码及其样式，保证样式的美观，仿照别人代码进行配置的同时进行代码优化，减少不必要的操作，运用框架的时候，尽量少用面向对象的原生方法来获取数据，例如：获取table组件的某个单元格信息，第一时间想到的必然是事件代理，获取点击target，通过向上查找父节点的兄弟节点来获取目标单元格的数据，没有充分利用组件的方便，而且通过事件代理触发的变更只是前端页面上的变更，并不能做到数据的变更，而是对页面标签的一些属性的属性值进行表面上的更改，当页面刷新的时候，之前操作所修改的值就会消失，所以我们要充分利用组件提供的record以及scope.row属性，若为antd-vue组件即可使用record.xxx来获取指定单元格的数据，若为饿了么UI，则可以使用scope.row.xxx来获取改行单元格的数据，以减少代码的冗余性，提高代码的可读性。多次做分页功能，当需要做改变页面展示条数的时候，antd-vue需要的onTableChange可以如此写：
onTableChange({current,pageSize}){this.pageSize:pageSize,this.getDataList(current)}（参数有大括号是因为table组件动态绑定的pagination属性是一个对象，具体见项目）下边的请求方法要把pageNum和pageSize传入。事件BUS不建议或者不用，因为事件bus需要全局引入，组件传值可以使用this.$emit（“事件姓名”,所传的数据)，在接收的那一边将事件注册在组件上，可以实现组件之间传值，减少代码的冗余，参数在页面展示的时候需要注意：当dom刚加载的时候，没有参数的情况下，传的值是undefined，会降低用户的体验度，解决方法：增加三元判断，如果值存在即显示值，若不存在，即赋一个默认值为0或者""（依据情况而定）。交流中获得的知识：router.resolve类似与router-link实现打开一个新页面进行跳转。切记，给接口传参数的时候，必须传一个对象，而不是一个数组！若要限制一个日期组件的时间区间。可以使用moment函数，例如：uploadTime:[moment().subtract(90, ‘days’), moment()]，设置完之后，可以实现选择了前面的日期之后，会自动的选择后90天的日期。当你想禁用今天后面的日期被选中的时候可以使用日期框的disabledDate方法，其中的操作如下：
disabledDate (current) { // 禁用 今天以后的日期
return current >= moment().endOf(‘day’)
},
当点击Link文本根据获取的url进行跳转的时候，我们可以使用window.open(record.xxxxxUrl)进行页面的跳转（此处拿antd-vue进行举例），展示数据的时候要注意，如果接收的某个字段没有数据，换个说法就是如果值为空，则需要给它赋一个默认值，这样做的原因是：如果这是个table组件，个别单元格没有值，那么就会缩在一起，可能导致表头和值不匹配，这是需要写个三元表达式对接收的值进行判断，如果值是空，则设置一个默认值为空字符串，如果值存在，则展示该值。
经验总结：
对比饿了么UI和antd-vue的table组件，饿了么UI将column写在vue页面，antd-vue可以采用动态绑定将column以:columns=columns的方式，可以在当前页进行定义，也可以写一个columns.js文件进行引入，数据插入采用插槽，例如：scopedSlots: { customRender: ‘xxx’ },
当涉及到父子传值的时候，可以将对应的值绑定在子组件上，在子组件上可以如此操作，例如：
父组件中在子组件上如此绑定：
:inviteResultList = “inviteResultList”
在子组件中：
props: {
visible: Boolean,
inviteResultList: {
type: Array,
default: () => [],
},
测试接口的时候，多打开控制台查看Network数据包，出错根据状态码进行分析，获取不到数据的时候，一看状态码，二看preview参数，提高效率。既然使用组件，就充分利用组件文档里的API，减少多余的操作，提高工作效率。当后端接口传过来一个status为一个数字，但你需要展示的是一个string文字状态的时候，可以写一个js进行转换，类似于：
function makeOption (obj) {
return Object.entries(obj).map(([key, val]) => ({ label: val, value: key }))
}
export const signalMap = {
0: ‘短途高活’,
1: ‘非高活’,
2: ‘中高活’
}
export const signalList = makeOption(signalMap)
当一个dialog被一到两个页面复用，并且，两个页面所展示的columns不一样，可以使用lodash中的remove方法：
首先引入lodash方法：
import { remove } from ‘lodash’
columns () {
const displayColumns = cloneDeep(columns)
if (this.from === ‘signIn’) {
remove(displayColumns, (column) => (
column.key === ‘inviteRemark’
))
}
return displayColumns
}
},
当需要对数组对象进行深拷贝的时候可以使用lodash的clonedeep方法进行深拷贝，例如利用深拷贝，对查询按钮进行操作：
首先同上lodash的remove方法进行引入
handleSubmit () {
if (!this.validate()) return
this.cacheForm = cloneDeep(this.form)
this.getTableList(1)
},
喇叭需求经验总结：在表头添加任意icon和tooltip怎么实现？
在columns.js文件中对应column的scopeslots:{customRender:‘xxxxx’}中添加字段后变为：{ customRender: ‘stickerInfo’, filterIcon: ‘filterIcon’ },并且添加属性：filterDropdownVisible: true, filterDropdown: true。
在.vue文件中相应部分添加如下代码，此处拿问好icon举例：
下面展示一些 内联代码片。

<template slot="filterIcon">
        <a-tooltip placement="bottom">
          <template slot="title">
            近30天的接单/完单数据
          </template>
          <a-icon type="question-circle"/>
        </a-tooltip>
</template>

此时，该问号icon在该表头框的最右边，那么如何修改样式把该icon紧挨着文件？
首先打开控制台，查看他的element组成，尝试着直接在.vue文件中通过其class名进行修改（基本失败，多次尝试），这时我们会发现是因为权重不够，那么尝试这添加类名增加权重（无用功），或者在该样式的尾部加上!important将此样式的权重改为最高，发现也是无用功，这时应该在assets的common.css中写全局引入样式，问题找到了，现在看怎么改，我们不难发现，该icon是个嵌套在块级盒子里的span标签，并且该标签添加了绝对定位脱离了文档流，这时只需取消right:0即可，只需一条命令right：unset即可取消脱离文档流之后icon所在标签位置在该单元格的最右边。
当你使用的是antd-vue做需求，且需求上要求的是table的列表项可筛选，那么如何实现？
首先查找文档，不难发现，table组件有一个rowSelection属性，使得列表项可选择，接收的是一个对象，即在table组件中加入：:row-selection=“rowSelection”，接着传入一个对象，对象通常包括如下属性和属性值，以及方法：
hideDefaultSelections 去掉全选，反选两个默认选项 接收boolean，默认为false
selectedRowKeys 指定选中项的key数组，需要和onchange进行配合 接受一个string类型
onChange 选中项发生变化时触发的回调 Function(selectedRowKeys, selectedRows)
onSelect 用户手动选择/取消某列触发的回调 Function(record, selected, selectedRows)
例如邀约优化中的指派删除的逻辑：
下面展示一些 内联代码片。

onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      if (selectedRowKeys.length == this.tableData.length) {
        this.selectUserIds = []
        this.selectUserMobilesForSms = []
        this.assignSelectItems = []
        this.deleteSelectItems = []

        for (let i = 0; i < selectedRows.length; i++) {
          this.selectUserIds.push(selectedRows[i].driverInfo.userId)
          this.selectUserMobilesForSms.push(
            selectedRows[i].driverInfo.driverMobileForSms
          )
          const deleteItem = {
            driverId: selectedRows[i].driverInfo.userId
          }
          // 指派
          const assignItem = {
            userId: selectedRows[i].driverInfo.userId,
            storeId: selectedRows[i].storeId,
            taskId: selectedRows[i].taskId,
            taskStatus: selectedRows[i].taskStatus,
            phone:
              selectedRows[i].driverInfo.driverMobileForSms.slice(3, -3) || "",
          }
          this.assignSelectItems.push(assignItem)
          this.deleteSelectItems.push(Object.values(deleteItem))
        }
      } else if (selectedRowKeys.length == 0) {
        this.selectUserIds = []
        this.selectUserMobilesForSms = []
        this.assignSelectItems = []
        this.deleteSelectItems = []
      }
    },
    onSelectRows (record, selected) {
      if (
        this.selectedRowKeys.length == 0 ||
        this.selectedRowKeys.length == this.tableData.length
      ) {
        return
      }
      if (selected) {
        // 选中，记录userId和mobile
        this.selectUserIds.push(record.driverInfo.userId)
        this.selectUserMobilesForSms.push(record.driverInfo.driverMobileForSms)

        const deleteItem = {
          driverId: record.driverInfo.userId
        }
        // 指派
        const assignItem = {
          userId: record.driverInfo.userId,
          storeId: record.storeId,
          taskId: record.taskId,
          taskStatus: record.taskStatus,
          phone: record.driverInfo.driverMobileForSms.slice(3, -3) || "",
        }
        this.assignSelectItems.push(assignItem)
        this.deleteSelectItems.push(Object.values(deleteItem))
      } else {
        // 取消选中，删除userId和mobile
        const userIdValue = record.driverInfo.userId
        const userMobileValue = record.driverInfo.driverMobileForSms

        this.selectUserIds.length &&
          this.selectUserIds.map((item, index) => {
            if (item == userIdValue) {
              this.selectUserIds.splice(index, 1)
            }
          })

        this.selectUserMobilesForSms.length &&
          this.selectUserMobilesForSms.map((item, index) => {
            if (item == userMobileValue) {
              this.selectUserMobilesForSms.splice(index, 1)
            }
          })

        this.assignSelectItems.length &&
          this.assignSelectItems.map((item, index) => {
            if (item.userId == userIdValue) {
              this.assignSelectItems.splice(index, 1)
            }
          })

        this.deleteSelectItems.length && this.deleteSelectItems.map((item, index) => {
          if (item == userIdValue) {
            this.deleteSelectItems.splice(index, 1)
          }
        })
      }
    },

12.29错误总结：

当项目运行时，利用项目运行后的ip地址进行登录，若反复登录不上，首先检查host的配置，若不行，则检查vue.config.js，试着改变端口号，防止由于端口号被占用，其次可能是ip地址未加入到本机host当中去，可以将host改成自己配置的host的ip地址。
Tips：
input框的type有很多种，可以根据需求设置type值，例如：上传文件可以将type设置成"file"，变成改变年月的可以将type设置成"datetime-local"（h5新属性），甚至还能修改type的值使之变成各类样式的button包括reset、submit等等
刷新时如果提交数据的动作，则会出现对话框，解决方法：
window.location.href=window.location.href;
window.location.reload;
饿了么上传文件的模板：

<el-form ref="form" :inline="true">
      <el-form-item label="导入：">
        <input type="file" ref="uploadFile" accept="application/xls,application/vnd.ms-excel,application/x-excel" style="width: 180px;">
        <el-button size="small" type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
</el-form>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>导入完成</span>
        <span slot="footer" class="dialog-footer">
          <a href="/cargo-admin/cargoAssociateWord/downloadLatestImportData" target="_blank">
            <el-button type="primary" @click="confirmHandle">确定</el-button>
          </a>
        </span>
      </el-dialog>

JS部分：

// An highlighted block
async submitForm (e) {
      let file = this.$refs.uploadFile.files[0]
      if (!file) {
        this.$message.error('请先选择文件')
        return
      }
      this.$message({ type: 'success', message: '导入中，请稍后!' })
      let res = await importFile(file)
      this.dialogVisible = true
    },

12.30日总结：

饿了么ui分页问题，模仿其他页面做分页的时候，未注意接口返回的字段里有没有pageNumber和pageSize，导致currentPage始终传默认值1，table组件能够实现变化，但是页码始终跳回第一页，甚至未显示末页的页码，显示的是infinity，解决方法1：让负责接口的后端添加两个返回的字段分别对应pageSize和pageNumber，接收后赋值给pagination中的参数，解决方法2：给pageSize传一个默认值（大于0，尽量为10的倍数，美观），currentPage给一个默认值，从接口接收一个total或者数据的length即可。当创建了本地分支但远程没有该分支的时候，可以使用代码：git push --set-upstream origin 本地分支名，在远程创建一个和本地名字一样的分支源，接着按照代码提交流程进行代码的提交，若有代码更新，切记，先拉取代码，再进行缓存，提交！！！git status查看代码状态，git branch -r查看远程分支，git branch -a查看所有分支,git checkout -b myRelease origin/Release,作用是checkout远程的Release分支，在本地起名为myRelease分支，并切换到本地的myRelase分支
使用pm及dmpt系统，pm创建模块，填写ip地址及权限码，以及审批人之类，创建好之后本地运行项目后打开的网页即有该模块。dmpt系统，项目完成填写项目变更。

12.31日总结：

检视代码，发现多处method中的方法都加上了async,await，async,await在方法上的作用，不难知道，async，await是用于解决无限嵌套的promise请求，将异步请求以同步的方式执行，那么货源后台项目中为什么要在方法前面使用async,await呢？通过试验得出，由于很多method的触发会有$message的弹窗出现，如果不加上async,await的话，可能能够完成原来方法中的操作，但是看不到弹窗结果，甚至不能及时的刷新table，获取最新的数据。进行模糊搜索的时候，可以尝试去封装一个模糊搜索的组件，所谓的模糊搜索就是一个input框，在里面输入关键字的时候会出现一个下拉框，下拉框里的字段从后端接口获取，其中都是包含该关键字的字段，例如对user进行模糊搜索的组件模板（可以进行修改变成其他内容的模糊搜索，通过增删props里的值，以及按需修改方法名，可以封装成需求的模糊搜索）：

<template>
  <a-select
    mode="multiple"
    label-in-value
    :value="value"
    :placeholder="placeholder"
    :filter-option="false"
    :not-found-content="fetching ? undefined : null"
    :size="size"
    :maxTagCount="maxTagCount"
    style="min-width: 200px"
    @search="fetchUser"
    @change="handleChange"
  >
    <a-spin
      v-if="fetching"
      slot="notFoundContent"
      size="small"
    />
    <a-select-option
      v-for="d in data"
      :key="d.value"
    >
      {{ d.text }}
    </a-select-option>
  </a-select>
</template>

<script>
import debounce from 'lodash/debounce'
import Config from '@/config'
import Server from '@/extend/Server'
import { mapState } from 'vuex'

export default {
  name: 'SearchUser',
  props: {
    roleId: { // 【运营负责人1】【大区经理2】【城市经理3】【邀约员4】【培训师5】【前台6】
      type: Number | String,
      default: null,
    },
    size: {
      type: String,
      default: 'default',
    },
    maxTagCount: {
      type: Number,
      default: 1,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: '请输入工号或姓名搜索',
    },
    storeIdArray: {
      type: Array,
      default: () => []
    },
    echoJobNumber: {
      type: Boolean,
      default: false
    },
    hideStoreIdList: {
      type: Boolean,
      default: false
    },
    sourceType: {
      type: Number | String,
      default: ''
    },
  },
  data () {
    this.lastFetchId = 0
    this.fetchUser = debounce(this.fetchUser, 800)
    return {
      data: [],
      fetching: false,
    }
  },
  computed: {
    ...mapState(['storeInfoList'])
  },
  methods: {
    fetchUser (value) {
      if (!value) return
      if (!this.multiple && this.value.length === 1) return
      this.lastFetchId += 1
      const fetchId = this.lastFetchId
      this.data = []
      this.fetching = true
      let storeIdList = []
      if (this.hideStoreIdList) {
        storeIdList = null
      } else {
        storeIdList = this.storeIdArray && this.storeIdArray.length ? this.storeIdArray : this.storeInfoList.map((store) => store.id)
      }

      // 集中处理Payload
      let payload = {
        storeIdList: storeIdList,
        keyWord: value,
        roleId: this.roleId,
      }
      if (this.sourceType || this.sourceType === 0) {
        payload = {
          ...payload,
          sourceType: this.sourceType,
        }
      }
      Server({
        url: `${Config.apiHost}/api/v1/user/fuzzy/list`,
        method: 'POST',
        needLoading: false,
        ignoreCode: true,
        data: payload
      }).then(({ data }) => {
        if (fetchId !== this.lastFetchId) {
          return
        }
        const userList = (data.data || []).map(user => ({
          ...user,
          text: `${user.name}(${user.jobNumber})`,
          value: this.echoJobNumber ? user.jobNumber : user.id.toString(),
        })) || []
        this.data = userList
        if (!this.data.length) this.$message.warning('未搜索到用户')
        this.fetching = false
      }).catch(e => {
        this.$message.warning('未搜索到用户')
        this.fetching = false
      })
    },
    handleChange (value) {
      value = value.map(element => ({
        ...this.data.find(user => user.value === element.key),
        ...element,
      }))
      this.$emit('input', value)
      this.$emit('change', value, this.data)
      Object.assign(this, {
        data: [],
        fetching: false,
      })
    },
  },
}
</script>

codeReview结果总结：
导入外来的文件时，观察有没有返回message类似于：errorMsg字段，将次字段作为this.$message的提示字段
查询的按钮不要使用submit关键字，lodash的get方法：_.get(object, path, [defaultValue])，可以通过该方法，获取目标对象里的某个特点键的值，例如在API的异步请求中使用lodash的get方法：
export const getAbnormalWordList = (pageNumber, pageSize, badCaseName) => {
let param = {
pageNumber: pageNumber,
pageSize: pageSize,
badCaseName: “”
}
if (badCaseName) {
param.badCaseName = badCaseName
}
return Server({
url: ‘badCargoName/badCargoNameList’,
method: ‘post’,
data: param
}).then(resp => {
return {
list: get(resp, ‘data.list’, []),
total: Number(get(resp, ‘data.totalCount’, 0)),
}
})
}

2021.1.4日当日总结：

不熟悉react，怎么实现跳转老后台的vue页面？解决：首先在config文件里添加出menu菜单行，其次在siderMenu中的baseRoute写上跳转老后台的路由，path写死，写成老后台对应页面的ip地址，target写为_blank以打开新页面的方式打开对应页面（投机）
已经权限系统配置完了侧栏菜单的权限，需求完成，并且正确打包部署到dev环境，但仅在本地看到新增的侧栏，在dev环境下看不到，这是什么原因？解决：由于dev网页的本地缓存未清理，导致每次登陆都是第一次登陆的信息。

2021.1.5总结：

学习：在日历组件上动态渲染数据在对应日期上：
首先它是通过v-for遍历到每个日期格子的。

• //数组格式如下所示，因此我们可以在数据库这样写入每日的内容，date对应那一天，listData对应具体内容，包含的type为内容提示，content为文字。 testList: [ { date: "2020-12-01", listData: [ { type: "warning", content: "This is warning event." }, { type: "success", content: "This is usual event." }, { type: "error", content: "This is error event." }, ], }, { date: "2020-12-05", listData: [{ type: "warning", content: "This is warning event." }], }, { date: "2020-12-08", listData: [ { type: "warning", content: "This is warning event." }, { type: "error", content: "This is error event." }, ], }, ],

• getListData(value) {
  let listData;
  //遍历数组
  this.testList.forEach(e => {
  //让数组的date与遍历到日历的那天的日期值相匹配
  if (e.date === value.format(“YYYY-MM-DD”)) {
  listData = e.listData;
  }
  });
  return listData || [];
  },
  从接口获取到日期数据，但我们仅仅想要的部分是月和日部分，怎么办？解决：之前我们使用的是{record.xxxxx | datetime}获取到的是"年月日"的形式，经过尝试，获取"月日"的方法是这样的{record.xxxxx | daytime}从而实现获取日月部分。
  需求中要求在今天之前的日期不展示更改框，大于等于今天的展示，怎么实现？方法：首先获取指定时间以及当前时间的时间戳，即Date.parse(new Date()),之后将两者时间戳相减除以天数：(10006060*24)即var day = parseInt((a2-a1)/ (1000 * 60 * 60 * 24))，如果为正的话就显示更改框，如果为负数的话就不显示更改框
  let day = new Date()
  day = day.toLocaleDateString()
  if (day == value.format(“YYYY-MM-DD”)){
  this.today = true
  console.log(this.today)
  }else {
  this.today = false
  }
  获取当前时间戳后如何转换成正常的形式？解决：
  let day = new Date()
  day = day.toLocaleDateString().replace(///g, ‘-’)
  日历控件如何实现在当日的日期上展示“今日”二字？解决：

  <template slot="dateCellRender" slot-scope="value">
          <div>
            <span>{{ getMonthData(value) }}</span>
          </div>
  </template>
  getMonthData (value) {
          let day = new Date().getDate()
          let month = new Date().getMonth() + 1
          let year = new Date().getFullYear()
          if (day - 10 < 0) {
            day = "0" + day
          }
          if (month - 10 < 0) {
            month = "0" + month
          }
          let days = year + "-" + month + "-" + day
          console.log(days)
          let slotData
          let obj = {
            date: days,
            text: "今日"
          }
          if (obj.date === value.format("YYYY-MM-DD")) {
              slotData = obj.text
            }
            return slotData || ""
        },
  

  1.6日个人总结：

  如何获取一段时间内的所有日期？解决：
  用项目举例，项目要求当在日期选择框里选完日期的时候，能够获取到日期区间内所有的日期，并且按照轮询渲染到表格组件上（这部分还没做，待补充）代码如下：
  首先是组件部分，选择最为简单的日期选择框：

  <a-form-item label="开始排班">
              <a-date-picker
                  v-model="onDutyTime"
                  ref="onDutyTime"
                  class="date-pick-input"
                  allowClear
                  @change="changeDate"
              />
  </a-form-item>
  其次是逻辑部分：
  getAll(begin, end) {
          let arr1= begin.split("-");
          let arr2= end.split("-");
          let arr1_= new Date();
          // let arrTime = [];
          arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
          let arr2_= new Date();
          arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
          let unixDb = arr1_.getTime();
          let unixDe = arr2_.getTime();
          for (let k = unixDb; k <= unixDe;) {
            this.arrTime.push(this.datetimeparse(k, 'MM-DD'));
            k = k + 24 * 60 * 60 * 1000;
          }
        },
        datetimeparse (timestamp, format, prefix) {
            if (typeof timestamp =='string'){
                timestamp=Number(timestamp)
            };
            //转换时区
            let currentZoneTime = new Date (timestamp);
            let currentTimestamp = currentZoneTime.getTime ();
            let offsetZone = currentZoneTime.getTimezoneOffset () / 60;//如果offsetZone>0是西区，西区晚
            let offset = null;
            //客户端时间与服务器时间保持一致，固定北京时间东八区。
            offset = offsetZone + 8;
            currentTimestamp = currentTimestamp + offset * 3600 * 1000
  
            let newtimestamp = null;
            if (currentTimestamp) {
                if (currentTimestamp.toString ().length === 13) {
                    newtimestamp = currentTimestamp.toString ()
                } else if (currentTimestamp.toString ().length === 10) {
                    newtimestamp = currentTimestamp + '000'
                } else {
                    newtimestamp = null
                }
            } else {
                newtimestamp = null
            }
            ;
            let dateobj = newtimestamp ? new Date (parseInt (newtimestamp)) : new Date ()
            let YYYY = dateobj.getFullYear ()
            let MM = dateobj.getMonth () > 8 ? dateobj.getMonth () + 1 : '0' + (dateobj.getMonth () + 1)
            let DD = dateobj.getDate () > 9 ? dateobj.getDate () : '0' + dateobj.getDate ()
            let HH = dateobj.getHours () > 9 ? dateobj.getHours () : '0' + dateobj.getHours ()
            let mm = dateobj.getMinutes () > 9 ? dateobj.getMinutes () : '0' + dateobj.getMinutes ()
            let ss = dateobj.getSeconds () > 9 ? dateobj.getSeconds () : '0' + dateobj.getSeconds ()
            let output = '';
            let separator = '/'
            if (format) {
                separator = format.match (/-/) ? '-' : '/'
                output += format.match (/yy/i) ? YYYY : ''
                output += format.match (/MM/) ? (output.length ? separator : '') + MM : ''
                output += format.match (/dd/i) ? (output.length ? separator : '') + DD : ''
                output += format.match (/hh/i) ? (output.length ? ' ' : '') + HH : ''
                output += format.match (/mm/) ? (output.length ? ':' : '') + mm : ''
                output += format.match (/ss/i) ? (output.length ? ':' : '') + ss : ''
            } else {
                output += YYYY + separator + MM + separator + DD
            }
            output = prefix ? (prefix + output) : output
  
            return newtimestamp ? output : ''
        },
      changeDate (date) {
        let days = new Date(date)
        console.log(date.format("YYYY-MM-DD"));
        let day1 = date.format("YYYY-MM-DD")
        days.setDate(days.getDate()+this.number.value)
        let day = days.getDate()
        let month = days.getMonth() + 1
        let year = days.getFullYear()
        if (day - 10 < 0) {
          day = "0" + day
        }
        if (month - 10 < 0) {
          month = "0" + month
        }
        let da = year + "-" + month + "-" + day
        console.log(da)
        this.getAll(day1,da)
        console.log(this.arrTime)
      },
  

  这样能够成功获取到日期区间内的所有日期，渲染后期待补充！
  如何将日历组件作限制，将当日之前的日期置为灰色？解决：
  两种方法：1.修改底层，添加让当日日期之前日期置灰的API（鄙人不才，不会，看了下底层是TS，果断放弃治疗），2.用一个块级元素改为透明色，用绝对定位将当日之前所有的灰色大框框定位到日历的框框上，也能达到效果，不过有瑕疵，就是选中的时候那个蓝色不是很明显，因为被半透明的灰色中和掉了（甭管了，先实现效果！没有效果都是空谈！实在不行可以修改全局的样式，将选中呈现的颜色加深一些）实现方法如下：

  <a-calendar  @select="select">
          <template slot="dateCellRender" slot-scope="value">
            <div :class="getBackColor(value)">		// 主要部分
              <span v-if="getDutyData(value)">{{ getDutyData(value) }}</span>
              <li v-for="item in getListData(value)" :key="item.content">
                <a-badge :status="item.type" :text="item.content" />
              </li>
            </div>
          </template>
  </a-calendar>
  逻辑部分：
  getBackColor (value) {
          return value < moment().startOf('day')  ? "events-bofore" : "events"
  },
  css样式部分：
  .events-bofore {
    position: absolute;
    left: 5px;
    top: 0;
    right: 5px;
    bottom: 0;
    width: calc(100%-10px);
    height: 100%;
    background-color: lightgrey;
    opacity: 0.5;
  }
  .events {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  

  通过返回的三元表达式进行判断，勉强实现当日之前的日子置灰，另外还有一个想法：为了比较完美的还原wiki项目上的需求，我们是否可以通过事件，在选中的时候将置灰块级元素盒子的背景色置为transparent，来达到近乎完美还原项目需求？（通过实验证明，在下不才，通过ref修改样式未能成功，待后面解决补充）

  1.7日个人总结：

  日期成功渲染到对应框，并且经过改动能够用少量代码实现各种日期区间的展示，之前出现了这样的问题：通过CSDN的方法所获取到的日期段的日期是一整个数组，数组中的元素是一个个字符串，若要通过record渲染到table上的话，会出现错误，该错误大概意思是需要的是一个对象，而我传送的是一个个字符串，虽然能够成功渲染到页面上（仅仅是一竖排），但是出现的84个同样的错误，也就是渲染的问题，而且要求轮询渲染（以7天为一竖列，超过7天另起一列进行渲染）进行排列，所以会牵扯到两个字符串日期的拼接，以及对不同日期段的长度进行不同的渲染（这边我投机取巧了采用一次性渲染到位5列，这样渲染的缺点是可能会出现不存在的日期显示的是undefined，这里可以采用一组判断，下面会解释），下面是代码展示：
  let con = {}
  let tem = []
  if (this.arrTime.length) {
  for (let i = 0; i < 7; i++) {
  this.arrTime[i] = this.arrTime[i] !== undefined ? this.arrTime[i] : " "
  this.arrTime[i + 7] = this.arrTime[i + 7] !== undefined ? this.arrTime[i + 7] : " "
  this.arrTime[i + 14] = this.arrTime[i + 14] !== undefined ? this.arrTime[i + 14] : " "
  this.arrTime[i + 21] = this.arrTime[i + 21] !== undefined ? this.arrTime[i + 21] : " "
  this.arrTime[i + 28] = this.arrTime[i + 28] !== undefined ? this.arrTime[i + 28] : " "
  let rowDate = JSON.parse(JSON.stringify(this.arrTime[i] + ’ ’ + this.arrTime[i + 7] + ’ ’ + this.arrTime[i + 14] + ’ ’ + this.arrTime[i + 21] + ’ ’ + this.arrTime[i + 28]))
  tem.push(rowDate)
  con = { …tem }
  this.tableData.push(con)
  tem = []
  con = {}
  }
  console.log(this.tableData)
  } else {
  this.tableData = []
  }
  由于不存在该日期的话会出现undefined，所以这里我们采用三元判断当不存在的时候将对应的值置" "
  两个相同格式的日期之间是可以直接作比较的，例如需求中的如果日期相同则渲染一个字段：e.date === value.format(“YYYY-MM-DD”)即格式都为’2021-xx-xx’是能够直接比较出大小
  在衔接两个字符串之间我们常常用+" "+中间来个空格进行拼接，但是为了做到美观，我们可能需要多个空格，那么如何做到呢？在html部分我们可以使用 进行添加空格，那么在js里我们如何在字符串之间添加空格？解决：字符串1+’\xa0\xa0\xa0\xa0’+字符串2进行拼接，根据想要的间隔大小进行个数的添加。

  1月8日个人总结：
  如果返回的值是这样的：[{…}, {…}, {…}, {…}, {…}, {…}, {…}, ob: Observer]，那么handleChange(value)其中value打印下来的是每个对象的索引值，即0，1，那么怎么拿到值呢？解决：将value值作为索引带入tableData里即：this.tableData[value][0]
  页面即一些效果完成了，现在出现了一个问题，如何将这个页面上的数据发给接口？点击上次排班的配置如何将数据渲染到select多选框？

  1月11日到12日总结：
  进度条组件与页面联动，并实现父子传值如何实现？解决：

  <template>
    <div>
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content">
        <Info v-if="this.current === 0" :userInfo='userInfo' />
        <competitorInfo v-if="this.current === 1" />
        <sticker v-if="this.current === 2" />
        <extension v-if="this.current === 3" />
      </div>
      <div class="steps-action">
        <a-button v-if="current > 0" style="margin-right: 8px" @click="prev">
          上一步
        </a-button>
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="$message.success('Processing complete!')"
        >
          提交
        </a-button>
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">
          下一步
        </a-button>
      </div>
    </div>
  </template>
  <script>
  import Info from './components/Info'
  import competitorInfo from './components/competitorInfo'
  import sticker from './components/sticker'
  import extension from './components/extension'
  export default {
      name: "uploadInfo",
      data() {
          return {
          userInfo: {
            applyId: '',
            driverUserId: '',
            driverName: '',
            driverMobile: ''
          },
          current: 0,
          steps: [
              {
              title: '合同上传',
              },
              {
              title: '竞品信息',
              },
              {
              title: '车贴张贴',
              },
              {
              title: '推广信息',
              },
          ],
          };
    },
    components: {
      Info,
      competitorInfo,
      sticker,
      extension
    },
    mounted () {
      this.getRecord()
    },
    methods: {
      next() {
        this.current++;
      },
      prev() {
        this.current--;
      },
      getRecord () {
        this.userInfo.driverMobile = this.$route.query.driverMobile
        this.userInfo.driverName = this.$route.query.driverName
        this.userInfo.driverUserId = this.$route.query.driverUserId
        this.userInfo.applyId = this.$route.query.applyId
      }
    },
  };
  </script>
  <style scoped>
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    padding-top: 80px;
  }
  
  .steps-action {
    margin-top: 24px;
  }
  </style>
  

  介于第一个合同审核的跳转页，如何实现这样的页面？（这里复用了别人封装的upload组件，也有一些自己的改良，这里拿出一部分进行举例）
  下面展示一些 内联代码片。

  <a-form-item label="身份证">
        <div class="upload-container">
          <upload-item
            :src="src1"
            :disabled="disabled"
            :img-business-type="1"
            :bottomFooter="ImgTypeAndDescMap[1]"
            @setLoading="setLoading"
            @getUploadError="getUploadError"
            @setTarget="setTarget1"
          />
          <upload-item
            :src="src2"
            :disabled="disabled"
            :img-business-type="2"
            :bottom-footer="ImgTypeAndDescMap[2]"
            @setLoading="setLoading"
            @getUploadError="getUploadError"
            @setTarget="setTarget2"
          />
        </div>
  </a-form-item>
  此处的<upload-item>是封装的组件，具体如下：
  <template>
    <div class="clearfix">
      <a-upload
        class="upload"
        :disabled="disabled"
        :custom-request="customRequest"
        :file-list="fileList"
        :beforeUpload="beforeUpload"
        :withCredentials="true"
        list-type="picture-card"
        accept=".jpg,jpeg,.png"
        @preview="handlePreview"
        @change="handleChange"
      >
        <div v-if="!uploadError && fileList.length < uploadNum && (computeValid() || !fileList.length)">
          <a-icon type="plus" />
          <div class="ant-upload-text">
            上传
          </div>
          <div>{{ isOther ? '其他图片' : '' }}</div>
        </div>
      </a-upload>
      <div v-if="bottomFooter" class="bottom-footer">{{ bottomFooter }}</div>
      <div v-else class="bottom-footer">&nbsp;</div>
    </div>
  </template>
  
  <script>
  import api from '../api/index'
  
  export default {
    name: "upload-item",
    components: {
  
    },
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      uploadNum: {
        type: Number,
        default: 1,
      },
      src: {
        type: Array,
        default: () => []
      },
      imgBusinessType: {
        type: String | Number,
        default: '',
      },
      bottomFooter: {
        type: String,
        default: '',
      },
      isOther: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      src: {
        handler (v) {
          // 此处为 fileList 赋初始值
          this.fileList = v.map((item, index) => ({
            ...item,
            name: item.picName || `${new Date()}`, // 非常必须
            uid: item.uid || `${new Date()}-${index}`,
            url: item.picUrl || '',
          }))
        },
        deep: true,
      },
    },
    data () {
      return {
        fileList: [],
        UID: '', // 记录上传错误图片的UID
        uploadError: false, // 是否有图片上传错误
      }
    },
    methods: {
      customRequest ({ onSuccess, onError, file }) {
        this.setLoading(true)
        const formData = new FormData()
        formData.append("uploadVersionImage", file)
        // 此处后端要求，上传图片和车贴版本图片上传地址保持一致
        api.getUploadVersionImage(formData).then(res => {
          file.networkUrl = res.data.data.url
          this.setImgItem(file)
          onSuccess(null, file)
        }).catch(err => {
          onError(err)
        }).finally(() => {
          this.setLoading(false)
        })
      },
      beforeUpload (file) { // 图片上传前的校验
        return new Promise((resolve, reject) => {
          const isValidImg = file.type === 'image/png' || file.type === 'image/jpeg'
          if (!isValidImg) {
            this.$message.warning('只能上传.png, .jpg, .jpeg 格式的图片')
            return reject(new Error('只能上传.png, .jpg, .jpeg 格式的图片'))
          }
          return resolve(true)
        })
      },
      handleChange ({ file, fileList }) {
        if (file.status === 'error') {
          this.UID = file.uid
          this.uploadError = true
        } else if (file.status === 'removed' && this.UID === file.uid) {
          this.uploadError = false
        }
        this.$emit('getUploadError', this.uploadError, this.imgBusinessType)
        this.fileList = fileList
        this.echoTarget(this.fileList)
      },
      setImgItem (imgItem) {
        for (let index = 0; index < this.fileList.length; index++) {
          if (this.fileList[index].uid === imgItem.uid) {
            this.fileList[index].url = imgItem.url || imgItem.networkUrl
          }
        }
        this.echoTarget(this.fileList)
      },
      echoTarget (target) {
        this.$emit('setTarget', target, this.imgBusinessType)
      },
      setLoading (loading) {
        this.$emit('setLoading', loading)
      },
      async handlePreview (file) { // 预览图片
        this.$imageview.show(file.url || file.originFileObj.networkUrl, 0, this.bottomFooter || '')
      },
      computeValid () { // 校验所有图片是否上传失败，有删除失败的图片，则引导用户先删除失败的图片
        if (this.uploadError) {
          this.$message.warning('上传失败，请删除后重新上传')
          return false
        }
        return true
      },
    },
  }
  </script>
  
  <style scoped>
  .upload {
    display: flex;
    flex-direction: row;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  
  .bottom-footer {
    width: 102px;
    line-height: 13px; /* 比 font-size 略大即可 */
    text-align: center;
    color: #999999;
    font-size: 12px;
  }
  </style>
  

  之后可以拿来复用，里面的上传之前的判断逻辑很值得学习！

  1月14日总结：

  排班需求上要求根据用户选择的起始日期以及排班天数，动态形成日期+select的列表（已实现），并且根据用户选择的排班人，生成列表数据，传送给后端，暴露出问题：我才用的是失去焦点事件来收集数据，因为在我看来通过绑定value和onchange事件会造成牵一发而动全身的问题，但是这样会出现当用户选完该行后，再来改的话会生成两条时间相同但人不同的数据，所以我想了个笨法子：采用数组的filter方法，将相同的和不相同的过滤出来，对过滤出来相同的，取最后一条，最后全部合并到一个数组里，代码如下：
  onBlur (record) {
  console.log(this.selectOnes.length)
  console.log(record[0].slice(0,11).split(" "))
  let payload = {
  time:record[0].slice(0,11),
  selectPerson:this.selectOnes
  }
  this.obj.push(payload)
  let a = JSON.parse(JSON.stringify(this.obj))
  let temSame = a.filter(item => {
  if (item.time !== payload.time) {
  return item
  }
  return
  })
  let temDiff = a.filter(item => {
  if (item.time === payload.time) {
  return item
  }
  return
  })
  if (temDiff.length > 1) {
  this.obj = []
  this.obj.push(temDiff[temDiff.length - 1])
  this.obj = […this.obj, …temSame]
  }
  console.log(JSON.parse(JSON.stringify(this.obj)))
  this.selectOnes = ‘’
  },
  但此时又会出现另一个问题：我的数据是这样的，后面要通过数组方法把时间拆分遍历和值班人拼起来，但是拼接完成后，他再要修改，我的过滤就判断不了了，因为我的过滤逻辑不太行，只能对存储的时间和整行时间比，那么怎么办？解决，将拼接操作放在点击保存时弹出气泡确定的时候，代码如下：
  confirmOnDuty (e) {
  console.log(e)
  let tem = JSON.parse(JSON.stringify(this.obj))
  if (this.arrTime.length >= 7) {
  for (let i = 0; i < 7; i++) {
  let temTime = tem[i].time.split(’ ‘)
  let len = tem[i].time.split(’ ‘).length
  let people = tem[i].selectPerson
  for (let j = 0; j < len; j++) {
  let params = {
  time: temTime[j],
  person: people
  }
  this.totalInfo.push(params)
  }
  }
  } else if (this.arrTime.length < 7) {
  let temTime = tem[i].time
  let len = tem[i].time.split(’ ‘).length
  let people = tem[i].selectPerson
  let params = {
  time: temTime,
  person: people
  }
  this.totalInfo.push(params)
  }
  console.log(this.totalInfo)
  this.$message.success{(}^{\prime }排班成{功}^{\prime })this.$router.push(’/cityManagement/scheduleManagement’)
  },

  1月15号总结：在龙哥的帮助下完成了upload组件的封装：

  <template>
    <div class="clearfix">
      <!-- <img v-if="src" :src="src" alt="" class="img-con"> -->
      <a-upload
        :custom-request="customRequest"
        list-type="picture-card"
        :file-list="fileList"
      >
        <div v-if="fileList.length < 1">
          <a-icon type="plus" />
          <div class="ant-upload-text">上传</div>
        </div>
      </a-upload>
      <div class="bottom-footer">{{label}}</div>
      <!-- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal> -->
    </div>
  </template>
  <script>
  import api from './api/index'
  
  export default {
    name: 'FileUpload',
    props: {
      label: String,
      value: String
    },
    data () {
      return {
        src: '',
        fileList: []
      }
    },
    watch: {
      value (val) {
        this.src = val
      }
    },
    methods: {
      // handleChange ({ file, fileList }) {
      //   // if (file.status === 'error') {
      //   //   this.UID = file.uid
      //   //   this.uploadError = true
      //   // } else if (file.status === 'removed' && this.UID === file.uid) {
      //   //   this.uploadError = false
      //   // }
      //   console.log(fileList, 333)
      //   this.$emit('input', this.fileList[0].url)
      // },
      customRequest ({ onSuccess, onError, file }) {
        const formData = new FormData()
        formData.append("uploadVersionImage", file)
        // 此处后端要求，上传图片和车贴版本图片上传地址保持一致
        api
          .getUploadVersionImage(formData)
          .then((res) => {
            this.src = res.data.data.url
            this.$emit('input', this.src)
            onSuccess(null, file)
          })
          .catch((err) => {
            onError(err)
          })
      },
    },
  }
  </script>
  <style scoped>
    .bottom-footer {
      width: 102px;
      line-height: 13px; /* 比 font-size 略大即可 */
      text-align: center;
      color: #999999;
      font-size: 12px;
    }
  </style>
  页面落实：
  H5部分：
  <file-upload v-model="srcIdentiFront" label="身份证正面"></file-upload>
  <file-upload v-model="srcIdentiBack" label="身份证反面"></file-upload>
  逻辑部分：
  import FileUpload from './FileUpload.vue'
  watch: {
      srcIdentiFront (val) {
        console.log(123, val)
      },
      srcIdentiBack (val) {
        console.log(123, val)
      },
  }
  
  

  1月20日总结：

  当需要动态获取多行input或者select这一类的框框中的文本可以这样，项目需求动态根据排期来创建select：
  下面展示一些 内联代码片。

  <template slot="onDutyPeople" slot-scope="text, record ,index">
        <SearchUser v-model="userList[index]"/>
  </template>
  

  1月21日

  let people = this.userList?.[i]?.[0]?.name || null

  1月25日

  scoped看起来很好用，当时在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。

  1、stylus的样式穿透 使用 >>>
  .wrapper >>> .swiper-pagination-bullet-active
  background: #fff复制代码

  2、sass和less的样式穿透 使用 /deep/
  // 语法
  外层 /deep/ 第三方组件 {
  样式
  }

  // eg
  .wrapper /deep/ .swiper-pagination-bullet-active{
  background: #fff;
  }