Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue

@@ -1,15 +1,26 @@
<template>
  <basic-container>
    <el-dialog v-if="dialogFormVisible" :title="title" :visible.sync="dialogFormVisible" @close="closeHandler" append-to-body>
      <avue-form v-model="form" :option="option" @submit="submitHandler" @reset-change="changeHandler"></avue-form>
    </el-dialog>
  </basic-container>
  <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
    <dynamic-button v-if="componentVO && componentVO.buttons" :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData" type="form"></dynamic-button>
    <basic-form :span="this.componentVO.formDefineVO.columnOneRow?(24/this.componentVO.formDefineVO.columnOneRow) : 12"
                :formItems="this.componentVO.formDefineVO && this.componentVO.formDefineVO.items"
                :formData="form">
    </basic-form>
  </div>
</template>

<script>

export default {
  name: "dynamic-form",
  props: {
    //ui上下文的业务类型（或链接类型）
    uiBtmType: {
      type: String
    },
    //ui上下文
    uiContext:{
      type: String
    },
    componentVO: {
      type: Object,
      default: {}
@@ -23,23 +34,23 @@
      default: ''
    },
    sourceData: {
      //菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
    paramVOS: {
      type: Object,
      default: {}
    },
    visible: {
    isShow: {
      //所在区域是否已显示，针对tab和collapse
      type: Boolean,
      default: false,
    },
    title: {
      type: String
    },
    formList:{
      type:Array
      default: true
    },
  },
  data() {
@@ -47,59 +58,34 @@
      form: {},
    }
  },
  computed: {
    dialogFormVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    option() {
      return {
        column: this.formColumn(this.formList)
  mounted() {
  },
  watch: {
    form:{
      handler(newval) {
        if(newval) {
          this.$emit("setDataStore", {
            area: this.areasName,
            type:this.componentVO.uiComponentType,
            btmType:this.componentVO.treeDefineVO.btmType,
            dataStore:[newval]
          });
        }
      }
    },
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
        console.log(newval);
        this.handleRefresh();
      }
    }
  },
  methods:{
    //表单提交
    submitHandler(form,done){
      console.log(form)
      done()
    },
    changeHandler(){
      this.form = {};
      // this.clearValidate() 清空校验
      // this.resetFields()
    },
    formColumn(formList) {
      return formList.map(item => {
        const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
  methods: {
    handleRefresh(){

        return {
          label: item.text,
          prop: item.field,
          type: typeValue,
          value: item.defaultValue,
          dicData: item.type === 'combox' ? item.dicData : null,
          readonly: item.readOnly,
          disabled: item.disabled,
          labelSuffix: item.suffix,
          suffixIcon: item.prefix,
          placeholder:item.placeholder,
          clearable:item.clearable,
          rules: [{
            required: item.required,
            message: `请输入${item.text}!`,
            trigger: "blur"
          }]
        }
      })
    },
    closeHandler(){
      this.form = {};
    },
    }
  }
}
</script>