station-test-ui/src/views/wind/fan/formModel.vue

<template>
  <ele-form-dialog
    v-bind="formConfig"
    v-model="formFieldsData"
    v-dialogDrag
    :title="title"
    :request-fn="handleFormSubmit"
    :visible.sync="DialogVisible"
   
    custom-class="abow_dialog"
    label-width="100px"
    label-position="left"
    :dialogAttrs="{ 'close-on-click-modal': false,'top':'8vh'}"
  />
</template>

<script>
import EleForm from 'vue-ele-form';
import Vue from 'vue';
import EleFormImageUploader from 'vue-ele-form-image-uploader';
Vue.use(EleForm, {
  // 对所有具有上传属性的组件适用
  upload: {
    fileSize: 10
  },
})
// 注册 image-uploader 组件
Vue.component('image-uploader', EleFormImageUploader)
export default {
  props: ["formModelVisible", "title"],
  data() {
    return {
      formData: {},
      formFieldsData: {
        wind_id: "",
        number: "",
        production_date: "",
        install_date:"",
        supplier:"",
        info: "",
        location:'',
        name:'',
        img:'',
      },
      url: "fan",
      formConfig: {
        formDesc: {
          wind_id: {
            type: "cascader",
            label: "所属风场",
            isOptions: true,
            options: [],
            required: true,
            attrs: {
              props: {
                label: "name",
                value: "id",
                emitPath: false,
                checkStrictly: true
              }
            }
          },
           name: {
            type: "input",
            label: "名称",
            required:true,
          },
          number: {
            type: "input",
            label: "编号",
            required:true,
          },
          supplier: {
            type: "input",
            label: "供应商"
          },
           location: {
            type: "input",
            label: "位置",
            required:true
          },
          production_date: {
            type: "date",
            label: "生产日期",
            required:true
          },
          install_date: {
            type: "date",
            label: "安装日期",
            required:true
          },
          img:{
              label:"上传图片",
              type:"image-uploader",
              attrs: {
                multiple: {
                  type: true,
                },
              limit: 3,
              fileSize: 3,
              drag: true,
              action: process.env.VUE_APP_BASE_API+'/osspolicy',
              responseFn (response, file) {
                return file.url
              }
            }


          },
          info: {
            type: "textarea",
            label: "备注"
          }
        },
        order: ["wind_id","number","name", "supplier", "production_date","install_date","location","img","info"]
      }
    };
  },
  created() {
    this.$http.get("wind").then(response => {
      this.formConfig.formDesc.wind_id.options = response.data;
    });
  },
  methods: {
    handleFormSubmit(data) {
      this.$parent.handleSubmit();
    },
    handleRequest(data) {
      return Promise.resolve();
    },
    handleRequestSuccess() {
      this.$message.success("发送成功");
    }
  },
  computed: {
    DialogVisible: {
      set(val) {
        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
      },
      get() {
        return this.formModelVisible; // 表示获取父组件的值
      }
    }
  }
};
</script>