xvji/xvji-ui/src/views/tasks/training/reportForm.vue

<template>
  <div>
    <el-form ref="reportForm" :rules="rules" :model="form" class="demo-form-inline"
             label-width="130px">
      <el-form-item label="mongo库" prop="mongodb_database">
        <el-input v-model="form['mongodb_database']" size="mini"
                  :disabled="!report.enable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取的mongo表" prop="mongodb_read_table">
        <el-input v-model="form['mongodb_read_table']" size="mini"
                  :disabled="!report.enable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="时间列名称" prop="col_time">
        <el-input v-model="form['col_time']" size="mini"
                  :disabled="!report.enable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="目标列" prop="label">
        <el-input v-model="form['label']" size="mini"
                  :disabled="!report.enable " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="预测列" prop="label_pre">
        <el-input v-model="form['label_pre']" size="mini"
                  :disabled="!report.enable " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="站点编码" prop="farm_id">
        <el-input v-model="form['farm_id']" size="mini"
                  :disabled="!report.enable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="装机容量" prop="cap">
        <el-input v-model="form['cap']" size="mini"
                  :disabled="!report.enable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="分组计算准确率的key值">
        <el-input v-model="form['group_key']" size="mini"
                  :disabled="!report.enable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  destroyed() {
    this.$nextTick(() => {
      this.$refs.reportForm.clearValidate();
    });
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.report = newVal
        this.form = newVal.value
      },
      immediate: true
    }
  },
  data() {
    return {
      report: {},
      form: {},
      rules: {
        mongodb_database: [
          {required: true, message: '请填写mongo库', trigger: 'blur'}
        ],
        mongodb_write_table: [
          {required: true, message: '请填写写入的mongo表', trigger: 'blur'}
        ],
        mongodb_read_table: [
          {required: true, message: '请填写读取的mongo表', trigger: 'blur'}
        ],
        col_time: [
          {required: true, message: '请填写时间列名称', trigger: 'blur'}
        ],
        label: [
          {required: true, message: '请填写目标列', trigger: 'blur'}
        ], label_pre: [
          {required: true, message: '请填写预测列', trigger: 'blur'}
        ], cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ], farm_id: [
          {required: true, message: '请填写站点编码', trigger: 'blur'}
        ]
      },
      plantType: [
        {label: 'solar', value: 'solar'},
        {label: 'wind', value: 'wind'}
      ],
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      this.$refs.reportForm.validate((valid) => {
        if (valid) {
          // console.log('child submit!');
          this.$emit('child-event', this.form)
          return true
        } else {
          this.$emit('child-event', {})
          console.log('error submit!!');
          return false;
        }
      });
      // this.dialogVisible = false
    },
  }
}
</script>

<style scoped lang="scss">

</style>