新品管理表格技术点小记

一、封装上传表格读取到table里

let ReadTable = (file,fileList,i,keyName,callback)=>{
      const types = file.name.split('.')[1];
      const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv', 'xlsm'].some(
        (item) => item === types,
      );  
      if (!fileType) {
        alert('格式错误！请重新选择');
        return;
      }
      file2Xce(file).then((tab) => {
        if (tab && tab.length > 0) {
          Tab = tab;
          if (Tab.length !== 0) {
            xlsx_list = [];
          tab[0].sheet.forEach((item) => {
            if (item.indexOf('') !== -1) {
              const inputInfo = item.split("'");// excel的数据类型都是text所以通过item.split("'")截取，拿到所以表的数据
              if (inputInfo.length === 2) {
              xlsx_list.push(inputInfo[1]);
              }
            }
          });
          }
          if (fileList.length !== 0) {
            setInputToForm(i,keyName).then(e=>{
              callback(e)
            })
          }
        }
      });
    }
    // 对组进行切割
    let setInputToForm = (index,keyName) => {
      if (xlsx_list.length >= index) { // 判断表头的长度
        /*
        * 将一个数组分成几个同等长度的数组
        * array[分割的原数组]
        * size[每个子数组的长度]
        */
        xlsx_list = xlsx_list.slice(index);
        const result = [];
        for (let x = 0; x < Math.ceil(xlsx_list.length / index); x++) {
          const start = x * index;
          const end = start + index;
          result.push(xlsx_list.slice(start, end));
        }
        // 获取所有的表格数据
        let num = 0
        result.map(e=>{
          e.map(y=>{
            temporaryObj.push(y)
          })
        })
        // 给每行数据赋值，最核心部分
        for(let u = 0;u < result.length;u++){
          for(let key in keyName[0]){
              keyName[0][key] = temporaryObj[num++]
          }
          thisList.push(JSON.parse(JSON.stringify(keyName[0])))
        }
        return new Promise((resolve,reject)=>{
          resolve(thisList)
        })
      // console.log(simulate)
      // console.log(keyName)
      } else {
        this.$message({
          message: '上传格式不對',
          type: 'warning',
        });
      }
    }
    let file2Xce = (file) => {
      return new Promise(((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          let wb = null
          wb = XLSX.read(data, {
            type: 'binary',
          });
          const result = [];
          wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName,
              sheet: XLSX.utils.sheet_to_formulae(wb.Sheets[sheetName]),
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
      }));
    }

二、封装了请求链接

如果参数多于三个，遵循柯里化思想 使用…统一接收参数

function Confirm(...rest) {
    let condition = false
    if (rest[5]) {
        let i = 0
        // 遍历对象每一项
        Object.values(rest[5]).filter(element => {
            if (element === '') {
                i++
                return condition = true
            } else {
                if (i === 0) {
                    condition = false
                }
            }
        })
    }
    if (condition && rest[5]) {
        ElMessage.error('搞错了，搞错了')
    } else {
        ElMessageBox.confirm(rest[0], rest[1], {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            if(rest[3]){
                PostData.apply(this, [rest[3], rest[2], res => rest[4](res)])
            }else{
                rest[2](true)
            }
            }
        )
            .catch(() => {
                ElMessage({
                    type: 'warning',
                    message: '已取消操作'
                })
                rest[2](false)
            });
    }
}

三、Vuex的使用

可以直接引入，直接修改全局数据

store.state.isControlFormEditMode = !res

可以使用actions提交给mutations修改需要改动的数据

  // script
  import {useStore} from 'vuex'
  let store = useStore()
  store.dispath('DelRow', data)

  // vuex
  // actions
  DelRow(data, index) {
	data.commit('delRow', index)
 }

可以使用mutations修改数据

// mutations
delRow(state, index) {
 let result = judge(state, index)
  // 这里删的是变量,并没有对数组做操作
  const last = state.formData[result[1]]
  delete last[index[0]];
}