@smalljelly/public-dynamic-template

@smalljelly/public-dynamic-template

云实验室项目动态组件集合

Build Setup

安装 public-dynamic-template 组件，npm i @smalljelly/public-dynamic-template

引入组件

1.在项目的 main.ts 文件中引入组件

// 导入动态组件
import DynamicPublic from '@smalljelly/public-dynamic-template'
DynamicPublic.pubGlobalInit({
  $NotificationFormSub: app.config.globalProperties.$NotificationFormSub,
  $NotificationPubSub: app.config.globalProperties.$NotificationPubSub,
  $goTo: app.config.globalProperties.$goTo,
  router,
  $Http,
  isHidden,
  dictionary,
  XEUtils,
  formInfoStore,
  SEARCHFORM,
  RESETVERIFY,
  INFOSERVE,
  DYNAMICLAYERCLEAR,
  DYNAMICLAYERTABLEDATA,
  DYNAMICLAYERFORM,
  DYNAMICLAYERTABLE,
  RESETTABLE,
  DYNAMICLAYERUPLOAD,
  DYNAMICLOCALICONS,
  DYNAMICLOCALTABLE,
  SELECTSERVE,
  LOCALSUBSERVE,
  SEARCHSERVE,
  RADIOSERVE,
  INITSERVE,
  addressDataJson,
  getDictionaryList,
  dictionaryFn,
  timeFilter,
  useUserStoreWithOut,
  uploadUrl
});//需要初始化变量
app.use(DynamicPublic)

2.在页面中使用组件 目前有三个组件 DynamicForm, DynamicLayer, DynamicTable,

<template>
    <DynamicForm :config="config" :questions="questions"></DynamicForm>
</template>

<script setup>
import homeService from './group.service'

let config:any= {
  queryUrl: 'TokenAuth/Authenticate',
  addUrl: 'TokenAuth/Authenticate',
  layout: 'vertical',
  grid: 6, //分栏
  rowKey: 'key',
  labelCol: { //label 固定宽度
    style: { width: '240px' } 
  },  //label的占比
  // cancelSave: true, //隐藏底部按钮
  combinationMethod(data: any) {
    return data
  },
  beforeWithMethod(data: any) {
    return data
  },
}
let questions: any = reactive(homeService.getQuestions());

//group.service.ts详细配置参考项目里面demno

</script>

What's Changed