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

@@ -1,188 +1,161 @@
<template>
  <basic-container>
    <el-dialog v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :title="title" append-to-body>

    </el-dialog>
  </basic-container>
  <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
    <dynamic-button v-if="componentVO && componentVO.buttons" :key="areasName+'buttons-'+componentVO.oid"
                    :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData" type="form"></dynamic-button>
    <basic-form :key="areasName+'basicForm-'+componentVO.oid"
                :span="this.componentVO.formDefineVO.columnOneRow?(24/this.componentVO.formDefineVO.columnOneRow) : 12"
                :formItems="this.componentVO.formDefineVO && this.componentVO.formDefineVO.items"
                :disabled="!inDialog"
                :isEdit="inDialog"
                :formData="form">
    </basic-form>
  </div>
</template>

<script>
import {dataForm} from "@/api/base/ui";

export default {
  name: "dynamic-form",
  props:{
    visible:{
      type: Boolean,
      default: false,
  props: {
    //ui上下文的业务类型（或链接类型）
    uiBtmType: {
      type: String
    },
    title:{
      type:String
    }
    //ui上下文
    uiContext:{
      type: String
    },
    componentVO: {
      type: Object,
      default: {}
    },
    inDialog: {
      type: Boolean,
      default: false
    },
    areasName: {
      type: String,
      default: ''
    },
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    //上一区域业务类型
    sourceBtmType:{
      type: String
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
    paramVOS: {
      type: Object,
      default: {}
    },
    isShow: {
      //所在区域是否已显示，针对tab和collapse
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      formList: [
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: null,
          defaultValue: "",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "name",
          hidden: false,
          keyAttr: false,
          prefix: null,
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: null,
          showField: null,
          suffix: null,
          text: "名称",
          tooltips: null,
          type: "text",
          unique: false,
          verify: ""
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: null,
          defaultValue: "",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "code",
          hidden: false,
          keyAttr: false,
          prefix: null,
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: null,
          showField: null,
          suffix: null,
          text: "编码",
          tooltips: null,
          type: "text",
          unique: false,
          verify: ""
        },
        {
          comboxKey: "EnumReviewType",
          customClass: null,
          data: null,
          dateFormate: null,
          defaultValue: "department",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "reviewtype",
          hidden: false,
          keyAttr: false,
          prefix: null,
          readOnly: true,
          referConfig: null,
          required: false,
          selectLibFlag: null,
          showField: null,
          suffix: null,
          text: "类型",
          tooltips: null,
          type: "combox",
          unique: false,
          verify: ""
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: null,
          defaultValue: "",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "content",
          hidden: false,
          keyAttr: false,
          prefix: null,
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: null,
          showField: null,
          suffix: null,
          text: "备注",
          tooltips: null,
          type: "textarea",
          unique: false,
          verify: ""
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: null,
          defaultValue: "",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "creator",
          hidden: true,
          keyAttr: false,
          prefix: null,
          readOnly: true,
          referConfig: null,
          required: false,
          selectLibFlag: null,
          showField: null,
          suffix: null,
          text: "创建人",
          tooltips: null,
          type: "text",
          unique: false,
          verify: ""
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "yyyy-MM-dd HH:mm:ss",
          defaultValue: "",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "createtime",
          hidden: true,
          keyAttr: false,
          prefix: null,
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: null,
          showField: null,
          suffix: null,
          text: "创建时间",
          tooltips: null,
          type: "date",
          unique: false,
          verify: ""
        }
      ],
      form: {},
      params:{},
      sourceDataMapParams:{},
      currentDefineVO:this.componentVO.formDefineVO,
    }
  },
  computed:{
    dialogFormVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
  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) {
        //源数据有变化时变更当前区域数据
        this.sourceDataMapParams=this.sourceDataMap();
        this.getParams();
        this.handleRefresh();
      }
    }
  },
  created() {
    this.getParams();
  },
  methods: {
    sourceDataMap: function () {
      const sourceDataMap = {};
      if (Object.keys(this.sourceData).length>0) {
        if(this.sourceData.oid ) {
          if (this.sourceData.oid.indexOf('@vcitreesep@') > -1) {
            this.sourceData.oid = this.sourceData.oid.split('@vcitreesep@')[1];
          }
          sourceDataMap.sourceBtmName = this.sourceBtmType;;
          sourceDataMap.sourceOid = this.sourceData.oid;
        }
        for (let i in this.sourceData) {
          let item = this.sourceData[i]
          if (item && item.constructor === Object) return;
          if (i == 'type' || i == 'context' || i == 'content') return;
          sourceDataMap['sourceData["' + i + '"]'] = item
        }
      }

      if (Object.keys(this.paramVOS).length>0) {
        for (let i in this.paramVOS) {
          let item = this.paramVOS[i]
          if (item && item.constructor === Object) return;
          if (i == 'type' || i == 'context' || i == 'content') return;
          sourceDataMap['sourceData["' + i + '"]'] = item
        }
      }
      return sourceDataMap;
    },
    getParams: function () {
      const formParams = {
        btmname: this.currentDefineVO.btmType,
        btmType:this.currentDefineVO.btmType,
        formDefineId: this.currentDefineVO.id,
        oid:this.currentDefineVO.oid
      };
      if(this.dataStore[0] && this.dataStore[0].oid) {
        formParams.oid = this.dataStore[0].oid;
      }
      const sourceDataMapList = this.sourceDataMapParams;

      this.params = Object.assign({},formParams, sourceDataMapList);
      console.log(this.params)
    },
    onLoad:function () {
      if (Object.keys(this.sourceData).length>0 && this.isShow) {
        this.loading = true;
        dataForm(this.params).then(res => {
          this.form = res.data.obj;
          this.loading = false;
        }).catch(error => {
          this.$message.error(error);
          this.loading = false;
        });
      }
    },
    handleRefresh(){

    }
  }
}
</script>