前端el-date-picker/el-select/el-step/向后端插入多个数据的使用总结

在这里简单总结下，在项目中关于这几个控件和向后端插入多个数据的的用法。
业务场景1：选择定时的时候出现日期这个控件，立即不出现日期控件。且对于日期控件选择时间范围只能是当日及之后。
业务场景2：下拉框选择内容后，内容可以随意切换
业务场景3：需要根据流的内容按钮的文字内容不一样，如按钮内容顺序为：下一步-开始-开始采集

一、el-date-picker控件

在这里注意使用 value-format="yyyy-MM-dd HH:mm:ss"前端的日期格式就是如：2020-01-21 15:09:10
接下来，直接上代码说话：

  <div class="step3" align="center" v-if="step3IsDisplay">
      <span class="handlerTime">执行时间</span>
      <el-radio v-model="radio" label="0">立即</el-radio>
      <el-radio v-model="radio" label="1">定时</el-radio>
      <el-date-picker
        v-model="startTimeAndEndTime"
        @change="pickerTime"
        type="datetime"
        placeholder="选择日期时间"
        default-time="12:00:00"
        v-if="timeIsDisplay"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="expireTimeOption"
      >
      </el-date-picker>
    </div>

1，将选中的日期传到后端，可根据v-model里面的值来传。
change选择的值，pickerTime方法，上代码：

 pickerTime(val) {
      this.startTimeAndEndTime = val;
      console.log(this.startTimeAndEndTime);
    }

console.log输入打印出选中的日期格式。
2，限制选中日期只能是当天及之后
属性是： :picker-options=“expireTimeOption”
代码写在的data()返回里面：

  expireTimeOption: {
        disabledDate(date) {
          return date.getTime() < Date.now() - 8.64e7;
        },
      },

3，监听单选框选项

  watch: {
    // 监听单选框选项
    radio() {
      if (this.radio == 1) {
        this.timeIsDisplay = true;
      } else {
        this.timeIsDisplay = false;
      }
    },
  },

二、el-select 控件

这里需要注意，通过控件选中的值传给后端的参数需要加上:value，代码如下所示：

 <div>
      <el-select
        class="step4"
        v-if="step4IsDisplay"
        v-model="value"
        placeholder="请选择事件"
      >
        <el-option
          v-for="item in step4Options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>

此代码v-model里面的字段可以随意定义，只需保持:value即可。这里因为后端需要传id过去，所以就是:value=“item.id”
三、model向后端传参数

  //向task表中添加任务记录
    addTask() {
      (this.addTaskModel = {
        eventsId: this.value,
        name: this.input,
        priorityId: this.value1,
        taskGroupId: this.value2,
        type: 1,
        status: 0,
        isTimer: this.radio,
        isDelete: 0,
        handlerTime: this.startTimeAndEndTime,
      }),
        this.$http
          .post(
            provider.crawl + "/AddTaskMapping/queryAddTask",
            this.addTaskModel
          )
          .then((response) => {
            console.log(response.data.data);
          });
      this.$router.replace("/TestZhangjiaxu"); //这里是调取此接口后，需要跳转的页面
    }

四、el-step控件使用
业务场景3：需要根据流的内容按钮的文字内容不一样，如按钮内容顺序为：下一步-开始-开始采集
功能实现：这里一开始我用了三个按钮，虽然实现了，但很麻烦，所以就采取了如下方式，代码说话：

  <div>
      <el-steps
        :active="active"
        align-center
        style="padding-top: 20px; padding-left: 15%; padding-right: 20%"
        finish-status="success"
      >
        <el-step title="创建任务" icon="el-icon-d-arrow-right"></el-step>
        <el-step title="任务命名" icon="el-icon-success"></el-step>
        <el-step title="输入网址" icon="el-icon-success"></el-step>
        <el-step title="数据预览" icon="el-icon-d-arrow-right"></el-step>
        <el-step title="设置" icon="el-icon-d-arrow-right"></el-step>
        <el-step title="执行时间" icon="el-icon-success"></el-step>
        <el-step title="事件" icon="el-icon-success"></el-step>
        <el-step title="优先级" icon="el-icon-success"></el-step>
        <el-step title="开始采集" icon="el-icon-d-arrow-right"></el-step>
      </el-steps>
    </div>

定义数组titleName，还有active为0的这里就不再展示：

  titleName: [
        "创建任务",
        "任务命名",
        "输入网址",
        "数据预览",
        "设置",
        "执行时间",
        "事件",
        "优先级",
        "开始采集",
      ],

定义一个方法，这个方法在el-button点击方法里调用它，并在created()生命周期里调用。

  showComponentContent() {
      if (this.titleName[this.active] == "创建任务") {
        this.message = "下一步";
        this.step1Display();
      }
      if (this.titleName[this.active] == "任务命名") {
        this.message = "下一步";
        this.step1Display();
        this.inputInit();
      }
        if (this.titleName[this.active] == "输入网址") {
           this.message = "开始";  //这里当流是输入网址时，button就变为开始
           this.step2Display();
        }

 next() {
      this.active++;

      if (this.message == "开始采集") {   //这里是按钮为开始采集就调取addTask接口
        this.addTask();
      }

      this.showComponentContent();
    },

created生命周期：

  created() {
    this.showComponentContent();
  },