FDAPFEPlatform/fdapfe-ui/src/views/model/faultPhysical/form.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogOpen"
    width="700px"
    append-to-body
    @opened="initData"
    @close="handleCancel"
  >

    <el-descriptions v-if="options === 'info'" :column="1" border>
      <el-descriptions-item label="故障模型名称" label-class-name="my-label" content-class-name="my-content">{{formData.formulaName}}</el-descriptions-item>
      <el-descriptions-item label="故障模型类型">
        <dict-tag
          :options="dict.type.biz_model_type"
          :value="formData.modelType"
        />
      </el-descriptions-item>
      <el-descriptions-item label="故障模型接口地址">{{formData.modelPath}}</el-descriptions-item>
      <el-descriptions-item label="故障模型参数参数">{{formData.modelDataParams}}</el-descriptions-item>
      <el-descriptions-item label="说明">{{formData.remark}}</el-descriptions-item>
    </el-descriptions>
    <el-form v-else ref="formData" :model="formData" :rules="rules" label-width="130px">
      <el-form-item label="故障模型名称" prop="modelName">
        <el-input v-model="formData.modelName" placeholder="请输入故障模型名称"/>
      </el-form-item>
      <el-form-item label="故障模型类型" prop="modelType">
        <el-select
          v-model="formData.modelType"
          placeholder="请选择故障模型类型"
          clearable
        >
          <el-option
            v-for="dict in dict.type.biz_model_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="故障模型接口地址" prop="modelPath">
        <el-input v-model="formData.modelPath" placeholder="请输入故障模型接口地址"/>
      </el-form-item>
      <el-form-item label="故障模型参数参数" prop="modelDataParams">
        <el-input
          v-model="formData.modelDataParams"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  listFaultPhysical,
  getFaultPhysical,
  delFaultPhysical,
  addFaultPhysical,
  updateFaultPhysical,
} from "@/api/model/faultPhysical";

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    dataInfo: {
      type: Object,
      default: null
    },
    options: {
      type: String,
      default: 'add'
    },
  },
  dicts: ["biz_model_type"],
  data() {
    return {
      formData: {
        modelId: null,
        modelName: null,
        modelType: null,
        modelPath: null,
        modelDataParams: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        modelAttribution:null,
      },
      rules: {
        modelName: [
          {required: true, message: '请输入故障模型名称', trigger: 'blur'}
        ],
        modelType: [
          {required: true, message: '请选择故障模型类型', trigger: 'blur'}
        ]
      },
      dialogOpen: false
    };
  },
  model: {
    prop: 'value',
    event: 'callback'
  },

  watch: {
    value(newVal) {
      this.dialogOpen = newVal;
    }
  },
  computed: {
    modelAtrtibution() {
      return this.$route.query.modelAttribution;
    },
    title() {
      if (this.options === 'add') {
        return '添加故障物理模型管理';
      }
      if (this.options === 'edit') {
        return '添加故障物理模型管理';
      }
      if (this.options === 'info') {
        return '添加故障物理模型管理';
      }
    }
  },
  methods: {
    initData() {
      this.formData.modelAttribution= this.modelAtrtibution;
      console.log(this.dataInfo)
      if (this.options!== 'add') {
        this.formData = { ...this.dataInfo };
      }
    },
    handleSubmit() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.formData.modelId) {
            updateFaultPhysical(this.formData).then((response) => {
              this.$message.success("修改成功");
              this.handleCancel();
            });
          } else {
            addFaultPhysical(this.formData).then((response) => {
              this.$message.success("新增成功");
              this.handleCancel();
            });
          }
        }
      });
    },
    handleCancel() {
      this.formData = {
      };
      this.$emit('callback', false);
    }
  }
};
</script>