stupid backend developer to develop hard-to-use api.

Detail.vue

<template lang="pug">
tb-wrapper(title='配方工艺明细')
  el-table(v-loading='loading', :data='data', border stripe)
    el-table-column(label='原料', width='200px', prop='material.materialName' show-overflow-tooltip)
    el-table-column(label='称料顺序', width='120px', align='center')
      template(slot-scope="scope")
        span(v-if="!scope.row.__editable__") {{ scope.row.weightSeq }}
        m-input-number(v-else int :max="1000" v-model="scope.row.__form__.weightSeq" style="width:96%;")
    el-table-column(label='投料顺序', width='120px', align='center')
      template(slot-scope="scope")
        span(v-if="!scope.row.__editable__") {{ scope.row.throwSeq }}
        m-input-number(v-else int :max="1000" v-model="scope.row.__form__.throwSeq" style="width:96%;")
    el-table-column(label='工序', show-overflow-tooltip)
      template(slot-scope="scope")
        span(v-if="!scope.row.__editable__") {{ formatter(scope.row.workStepList) }}
        el-select(v-else v-model="scope.row.__form__.workStepList" multiple style="width:96%;")
          el-option(v-for="(o, index) in options" :key="index" :label="o.workStep.workStepName" :value="o.workStepId")

    el-table-column(align='center', width='78px', label="操作")
      template(slot-scope='scope')
        template(v-if="!scope.row.__editable__" )
          el-tooltip(:content="'修改' + scope.row.material.materialName", effect='light')
            el-button(type='text', icon='edit', size='small', @click='updateRowForm(scope.row)')
        template(v-else)
          el-tooltip(content="保存", effect="light")
            el-button(type='text', icon='check', size='small', @click='postUpdatedRowForm(scope.row)')
          el-tooltip(content="取消", effect="light")
            el-button(type='text', icon='close', size='small', @click='cancelEditRow(scope.row)')

  el-button(v-if="data.some(m => m.__editable__)" type="primary" style="float:right; margin-top:16px;"
    @click="postBatch") 保 存
</template>

<script>
import TbWrapper from '@/components/TbWrapper'
import {
  listFormulaMaterialByFormulaId,
  updateFormulaItemWithAll
} from '@/xhr'

export default {
  components: { TbWrapper },
  props: {
    options: { required: true, type: Array } 
  },
  data() {
    return {
      loading: false,
      data: []
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    formatter(value) {
      return value ? value.map(item => item.workStepName).join(', ') : ''
    },

    loadData() {
      let formulaId = this.$route.params.formulaId;
      this.loading = true;
      listFormulaMaterialByFormulaId({ formulaId }).then(({ data }) => {
        this.data = data.data.map(material => ({
          ...material,
          __form__: material,
          __editable__: false
        }));
        this.loading = false;
      });
    },

    // init value for row form.
    assignRow(row) {
      for (let k in row.__form__) {
        row.__form__[k] = row[k];
      }

      row.__form__.workStepList = row.workStepList.map(o => o.id);
    },

    updateRowForm(row) {
      // 这里要有一个转换，后端要的是 workStepIds '1,3,4' 这种，然后到后端去解析🐶
      // 但是前端界面的绑定必须不能是字符串，只能是 array.
      // 那么，我可以用一个中间变量来绑定界面，数据接收的时候把 workStepIds 赋给这个中间变量，
      // 数据传的时候把这个中间变量赋给 workStepIds,
      // 根据事件来相互赋值，不一定时时刻刻都绑定。
      // 这个中间变量一定是行内的 row 的某个成员变量。
      // 提交的时候，用的是 row 的 __form__，
      // 编辑的时候，用的是 row 的原有变量和 __form__ 两个变量。
      // 显示的时候，用的是 row 的原有变量。
      // 如此分析，上述中间变量可以命名为 `__form__.workStepList`.
      // 1. 编辑界面上绑定的是 `__form__.workStepList`
      // 2. 表格非编辑状态时界面上绑定的是 `row.workStepList`
      // 3. 提交的时候，提交的是 `__form__.workStepIds`
      // 4. 这个 `__form__.workStepList` 不用提交，但是 `row.workStepList` 会在返回数据中。
      
      this.assignRow(row);
      row.__editable__ = true;
    },

    cancelEditRow(row) {
      this.assignRow(row);
      row.__editable__ = false;
    },  
    
    // save row form locally.
    assignBackRow(row) {
      // 新要求此行的编辑成功状态不能影响其他行。那么，
      // 不重新加载表格数据 list，以免冲洗接口。
      // 且操作成功接口没有返回值，把 `__form__` 的值赋值给 `row` 好了。

      let { __form__ } = row;
      for (let k in __form__) {
        row[k] = __form__[k]
      }

      // workStepList 要另外赋值唷
      // 因为，此时的 `__form__.workStepList` 为纯 id 的数组。(注：element-ui multi-select 特性)
      // 而保存要用 `row.workStepList` 包含不限 workStepName 的详细信息。
      // 与 `this.options` 匹配就好了，`this.options` 已包含所有选项。
      // `this.options` 是什么数据？

      row.workStepList = __form__.workStepList.map(id => 
        (this.options.find(o => o.workStepId == id) || '').workStep
      );

      row.__editable__ = false;      
    },

    postUpdatedRowForm(row) {
      // @form stands for formulaMaterial
      let form = row.__form__;

      // 要的就是 `workStepList` 转 `workStepIds`，然后提交行
      form.workStepIds = form.workStepList.join(',');
      let _form = {
        formula: form.formula,
        updateFormulaMaterialList: [{
          ...form,
          // 警告，workStepList 不能传，传则报不明错误。
          workStepList: undefined
        }]
      }

      updateFormulaItemWithAll({ data: JSON.stringify(_form) }).then((res) => {
        this.$report(res.data, 'update', () => {
          this.assignBackRow(row);
        });
      });
    },

    postBatch() {
      let updateFormulaMaterialList = this.data.filter(it => it.__editable__).map(it => {
        let form = it.__form__
        form.workStepIds = form.workStepList.join(',');
        return {
          ...form,
          // 警告，workStepList 不能传，传则报不明错误。
          workStepList: undefined
        }
      });

      let _form = {
        formula: updateFormulaMaterialList.length ? updateFormulaMaterialList[0].formula : undefined,
        updateFormulaMaterialList
      }

      updateFormulaItemWithAll({ data: JSON.stringify(_form) }).then((res) => {
        this.$report(res.data, 'update', () => {
          this.loadData();
        });
      });
    }
  }
}
</script>