摘要：相當(dāng)于可以編輯問卷并提供問卷展示，數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺。極大的節(jié)省了需要進(jìn)行表單樣式修改的時(shí)間，同時(shí)，讓動態(tài)渲染表單成為一件可能且容易的事情。表單動態(tài)渲染剛好在項(xiàng)目之前，有過一次動態(tài)配置表單的嘗試通過字段自動生成表單及驗(yàn)證。

近幾天來了個(gè)緊急項(xiàng)目，想要做一個(gè)內(nèi)部版本的問卷星。相當(dāng)于可以編輯問卷并提供問卷展示，數(shù)據(jù)統(tǒng)計(jì)的這么一個(gè)平臺。整個(gè)項(xiàng)目耗時(shí)不長，本著積淀和積累的原則，將過程中的思路和收獲進(jìn)行一下沉淀。由于公司原因，代碼尚未開源。
不過沉淀了個(gè)動態(tài)配置表單的嘗試： github，用于后臺快速開發(fā)表單等需求，搭配element-ui進(jìn)行使用，同時(shí)可通過后臺進(jìn)行配置生成表單等。

問卷編輯功能大概需要一下幾點(diǎn)：

根據(jù)不同題型添加問題

區(qū)分問題的必選性

問題排序，刪除，復(fù)制功能

選擇題的選項(xiàng)編輯，排序，刪除功能

問卷渲染

生成問卷二維碼

or
預(yù)覽

使用element進(jìn)行后臺以及問卷表單渲染是再合適不過的了。極大的節(jié)省了需要進(jìn)行表單樣式修改的時(shí)間，同時(shí)，讓動態(tài)渲染表單成為一件可能且容易的事情。

剛好在項(xiàng)目之前，有過一次動態(tài)配置表單的嘗試： github 通過字段自動生成表單及驗(yàn)證。但此時(shí)的數(shù)據(jù)格式相當(dāng)于在后臺已經(jīng)確定好的，針對可變切頻繁變動的表單結(jié)構(gòu)，確定數(shù)據(jù)結(jié)構(gòu)如下：

data: {
  title: 問卷名稱
  desc: 問卷描述
  questionList: [
    {
      type: 問題類型,
      label: 問題描述,
      required: 必選性,
      options: [ //選項(xiàng)
        {
          label: 選項(xiàng)內(nèi)容,
          value: 選項(xiàng)值
        }
        ...
      ] 
    }
    ...
  ]
}

最簡單的 v-if 模式來滿足我們的需求，之前有想過使用is進(jìn)行渲染，但是不同表單配置項(xiàng)相差很大，很難進(jìn)行通用。因此采用類似以下這種方式，配置詳情可見element官網(wǎng)。

很簡單就可以將表單根據(jù)配置渲染出來啦：

思路理清楚了，就可以動手實(shí)踐啦！

首先，我需要各個(gè)問題的基本配置模板，以便于每次直接向questionList中直接添加相應(yīng)的內(nèi)容，為了方便存儲及使用，將其放在store中,當(dāng)

const state = {
  baseSet: {
    radio: {
      type: "radio",
      label: "單選題",
      required: true,
      options: [...]
    },
    checkbox: ...
    input: ...
  }
}

//添加問題時(shí)，直接push進(jìn)數(shù)組即可
const mutations = [
  //添加問題
  ADDQUESTIONLIST(state, data) {
    state.qss.questionList.push(data);
  }
]

//添加問題方法
addQuestion(type) {
  this.addQuestionList(this. baseSet[type]);
},

使用getter獲取到我們對應(yīng)的baseSet對象時(shí)，此對象為引用類型，并且，對象的屬性，如options也同樣為引用類型。我們?nèi)舨贿M(jìn)行處理，則會出現(xiàn)，創(chuàng)建兩個(gè)相同類型的問題時(shí)，對其中某一問題選項(xiàng)進(jìn)行修改，另一個(gè)選項(xiàng)也會進(jìn)行修改。 因此我們需要對base對象進(jìn)行簡單的拷貝（只進(jìn)行到數(shù)組內(nèi)容即可）

export const clone = function(obj) {
  var newObj = {};

  for (let key in obj) {
    var target = obj[key];

    if (Object.prototype.toString.call(target) === "[object Object]") {
      newObj[key] = clone(target);
    } else {
      if (Object.prototype.toString.call(target) === "[object Array]") {
        newObj[key] = target.slice(0);
      } else {
        newObj[key] = target;
      }
    }
  }

  return newObj;
}

addQuestion(type) {
  this.addQuestionList(clone(this. baseSet[type]));
},

這三點(diǎn)基本就是簡單的數(shù)組操作啦，此時(shí)的問題數(shù)據(jù)依舊是引用類型，直接對引用數(shù)組進(jìn)行操作即可。簡單的上移，下移排序，使用splice即可實(shí)現(xiàn)。其實(shí)這三點(diǎn)都是用splice實(shí)現(xiàn)的哈。

deleteQuestion(index) {
  this.data.questionList.splice(index, 1);
},

copyQuestion(index) {
  let list = this.data.questionList;
  //復(fù)制時(shí)，同樣需要對引用對象進(jìn)行深拷貝
  list.splice(index, 1, list[index], clone(list[index]));
},

moveQuestion(index, direct) {
  let list = this.data.questionList;

  if(direct === "up") {
    if(index < 1) {
      this.$toast("已經(jīng)是第一項(xiàng)！");
      return;
    }

    list.splice(index - 1, 2, list[index], list[index - 1]);
  } else {
    if(index >= list.length - 1) {
      this.$toast("已經(jīng)是最后一項(xiàng)！");
      return;
    }

    list.splice(index, 2, list[index + 1], list[index]);
  }
}

使用qrcode.js,感謝大佬們?yōu)樾≥厒冊斐鲞@么多好用的輪子，讓我們站在巨人的肩膀上前行！

我們都知道，針對Vue2.0后，使用computed獲取getters or state，而針對計(jì)算屬性，我們是無法進(jìn)行寫操作的，像這樣

computed: {
  ...mapState({
    qss: state => state.qss,
    base: state => state.base
  })
},

//以下代碼是無效的
this.qss = 2;

因此，我們更無法將qss屬性直接綁定在v-model上，很是苦惱。同事的一般處理方式是在data中書寫相同的屬性，在路由進(jìn)入時(shí)對其進(jìn)行初始化，當(dāng)其修改時(shí)再寫回store。這樣寫起來未免有點(diǎn)麻煩且不妥當(dāng)。那么，該如何解決呢？

其實(shí)很簡單，可以交給父組件呀。

我們常常會聽到一個(gè)詞，單向數(shù)據(jù)流，大概意思就是讓數(shù)據(jù)單一方向流動，我們只對數(shù)據(jù)源進(jìn)行修改，再讓數(shù)據(jù)從數(shù)據(jù)源依次流動到子組件進(jìn)行UI渲染。

其實(shí)就像我們使用ajax獲取數(shù)據(jù)時(shí)，統(tǒng)一交給父組件一樣，我們將統(tǒng)一獲取到的數(shù)據(jù)，使用props進(jìn)行向下分發(fā)即可,使用vuex亦是如此。子組件值進(jìn)行對應(yīng)值的修改。而針對props，v-model可以很方便的對其進(jìn)行修改了。當(dāng)然這些只是我的一點(diǎn)理解，如果有異議，可以一起討論哈。