zv-mpaas-dynamic

快速上手

• 安装npm包npm i zv-mpaas-dynamic

• 在项目中引入

import Vue from "vue";
import zv-mpaas-dynamic from 'zv-mpaas-dynamic';

Vue.use(zv-mpaas-dynamic, {
  mpssApi: "**********" // 一体化网关对应地址
});

• 列表页配置

<template>
  <zv-dy-list templateId="169">
    <!-- 搜索字段自定义插槽 -->
    <template slot="processResultSearch" slot-scope="scope"> <el-input v-model="scope.row.processResult" />1112</template>
    <template #menuLeft>
      <el-button type="primary" size="small" @click.stop="initiatorVisible = true">单据发起人设置</el-button>
    </template>
  </zv-dy-list>
</template>

<script>
  name: "dynamicForm-dyFormList",
  data() {
    return {}
  }
</script>

• 创建页配置

<template>
  <zv-dy-form template-id="166" :page-config="pageConfig" v-model="form">
    <!-- 主表字段，根据配置的字段名预留插槽 -->
    <template slot="p_refund_document-refundDocumentNo" slot-scope="{ data }">
      <div>
        <el-input v-model="data.refundDocumentNo"></el-input>
      </div>
    </template>
    <!-- 子表行项目字段，根据配置的字段名预留搜索插槽 -->
    <template slot="t_sales_contract_order_item-processResultSearch" slot-scope="scope">
      <div>
        <el-input v-model="scope.row.processResult"></el-input>
      </div>
    </template>
    <!-- 子表行项目弹窗表单字段，根据配置的字段名预留插槽 -->
    <template slot="t_sales_contract_order_item-processResult" slot-scope="{ data }">
      <div>
        <el-input v-model="data.processResult"></el-input>
      </div>
    </template>
    <!-- 增强组件，根据配置的组件名预留插槽 -->
    <template slot="changeLogs" slot-scope="scope"> {{ scope }}</template>
  </zv-dy-form>
</template>

<script>
export default {
  name: "dynamicForm-dyFormAdd",
  data() {
    return {
      pageConfig: {
        pageFlag: "createPage"
      },
			form: {}
    };
  },
  methods: {}
};
</script>