一个支持排序的作业工作台

作业任务工作台

一、功能需求
作业任务统一成5个类型：文件、脚本、流程、通知、和公告；一个作业任务可以由多个步骤组成，一个步骤可以包含多个子任务；用户可以灵活根据实际使用业务场景进行作业任务的新建。

二、开发思路
后台需要的数据是五个对象形式，由于任务的五个类型需要支持排序和存在一个类型存在多个的情况，所以前端数据需要放在一个数组里，说过数组的下标index来控制每个item的排序和增加、删除操作。

三、实际开发
1、排序过渡效果
首先定义五个类型的html模板和每个类型的数据格式，通过stepType来确定哪个类型，stepIndex是创建每个item的时候生成的十位随机字符串，注：vue的过度效果transition-group，这个标签需要通过key值的不同才有效果，但不能使用index,这块需要特别注意一下，虚拟dom在比对时发现两个dom是一样的，会没有过度效果，故给他生成一个标识。

  const fileBase = {
    name: '文件步骤名称',
    stepType: 1,
    stepIndex: 1,   
    workStep: {stepName: '', stepOrder: 1},
    workStepitemFiledistributionList: [{fileName: '', filePath: '', sourceFilePath: '', duplicate: 1, mkdir: 0, assetList: [], assetNameList: ''}]
  }

2、新增类型中的item
新增时需要先拿到当前作业类型，再他的children里增加item

   addNodeFile(element) { // 新增文件节点
        let addItem = cloneDeep(fileBase.workStepitemFiledistributionList[0])
        element.workStepitemFiledistributionList.push(addItem)
        this.stepDataForm.workStepFiledistributionList[element.workStep.stepOrder - 1] = element // 增加节点时相应增加form
   },

3、表单验证
也是最复杂的一项，起初想法是给每个类型加一个form,发现这种做法太麻烦，而且量太多，点击保存时需要一个个验证每个form，放弃了…
优化思路：只写一个form，因为数据都是循环出来的，所以就不能使用prop，而是:prop,并且一定要对应是哪个的item,element-ui的表单验证是需要先创建一个form,里面包含要验证的每个字段，所以增加项的时候相应的form也要改变，否则验证会出错，:prop="workStepScriptList.${stepDataForm.workStepScriptList.indexOf(element)}.scriptList.${index}.timeout"

<s-form-item
   label=''
   :prop="`workStepScriptList.${stepDataForm.workStepScriptList.indexOf(element)}.scriptList.${index}.timeout`"
   :rules="stepRules.workStepScriptList.timeout">
   <s-input class="input" v-model="item.timeout" placeholder="秒，请输入正整数":disabled="isView">		  
   </s-input>
</s-form-item>

4、编辑回显数据
后台反的数据是一个对象，所以又得开始重新组合数据放在一个大数组里，才能渲染出来，有些数据是通过前一步操作才有的，所以…
比如脚本库名称获取，editScriptFlag是用来判断编辑时不用清除v-model数据的标识，但其他操作可以清除，想了一个办法，先获取所有脚本项所有的item长度，每次回显数据都会调用获取方法，并每次加1，直到editScriptTimes等于item长度，editScriptFlag为true,这样就可以选择脚本库时可以做清除操作了。

    // 脚本库对应的所有脚本
    getScriptList(item) {
      $axios.get(`/scriptConsole/getScriptByLibUuid/${item.scriptLibUuid}`).then((res) => {
        item.scriptOptions = res.data
        if (item.scriptOptions.length > 0 && this.editScriptFlag) { // 只有editScriptFlag为true时才会显示第一个脚本
          item.scriptUuid = item.scriptOptions[0].uuid
        }
        this.$set(item, item.scriptOptions, item.scriptOptions)
        if (this.editScriptUuidArr.length > 0) {
          this.editScriptTimes++
        }
      })
    },

示例