npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ep-form-making

v1.3.0

Published

基于element-plus、vant3封装的可拖拽表单设计器

Downloads

667

Readme

ep-form-making

介绍

基于element-plus、vant3封装的可拖拽表单设计器,低代码框架,组件同时支持PC端和移动端适配展示。

使用说明

  1. 安装依赖
npm install ep-form-making --save
  1. 引用组件方式
// Export EpFormMaking and RenderFrom components by default
import epFormMaking from 'ep-form-making'

// element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// ...
app.use(epFormMaking, request) 
// app.use(renderFrom)
app.mount('#app')
  1. 表单设计器组件
<ep-form-making />

-- 选项参数

options: {
  nameReadonly: false, // 禁止修改组件名称
  clearButtonShow: true, // 显示清空按钮
  previewButtonShow: true, // 显示预览按钮
  exportJsonButtonShow: true, // 显示导出JSON按钮
  formConfigShow: true // 显示表单设置项
}

-- 隐藏常用组件

hideFields: ['fileupload', 'imgupload']

-- 配置双向绑定

modelValue: {}

-- 容器高度,可由外部指定维护

height: {
  type: Number,
  default: null
}

-- 是否显示容器

show: {
  type: Boolean,
  default: true
}

-- 已使用流程条件项ids 配合流程设计器使用,已作为流程判断条件不能删除

usedConditionIds: {
  type: Array,
  default: null
}

-- 必选项字段 可作为流程设计器条件使用

conditions: {
  type: Array,
  default: () => []
}

-- 多语言

language: {
  type: String,
  default: 'zh-cn'
}

-- 表单模板数据

formTemplates: {
  type: Array,
  default: () => [{
    title: '请假表单',
    img: new URL('../../assets/leave.jpg', import.meta.url).href,
    json: new URL('../../assets/leave.json', import.meta.url).href
  }]
}

-- 关联审批应用列表 { label, options: [{label, value}]}

correlationOptions: {
  type: Array,
  default: null
}

render-form组件

<render-form
  ref="previewRef"
  :json-object="formMaking"
  :form-data="initFormData"
  :h5="isH5"
  @change="renderChange"
/>
<render-form ref="previewRef" :json-object="state" :h5="isH5" :form-data="initFormData" @change="renderChange">
  <!-- 已选关联审批列表 -->
  <template #correlation="{ item, remove }">
    {{ item }}
    <el-button @click="remove">删除</el-button>
  </template>
  <!-- 选择关联审批:options组件配置 {selectType} 可选范围,默认false全部; {selectRange} 可选审批;
    callback([...items]) 选中项改变后回调函数;
    save 移动端调用保存关闭 -->
  <template #correlationDialog="{ options: optionItems, callback, save }">
    options:{{ optionItems }}
    <el-table
      :data="[{id:'1',name:'小明的请假', time:'2023-6-13'},{id:'2',name:'小红的请假', time:'2023-6-13'}]"
      style="width: 100%"
      @selection-change="callback"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="id" width="120" />
      <el-table-column property="name" label="name" />
      <el-table-column property="time" label="time" />
    </el-table>
    <van-button
      v-show="isH5"
      type="primary"
      style="margin-top: 10px;margin-left: 2%;margin-right: 2%;width: 96%;"
      block
      @click="save"
    >
      确定
    </van-button>
  </template>
</render-form>

props: {
    /** 是否渲染H5 UI组件 */
    h5: {
      type: Boolean,
      default: false
    },
    /** Json表单配置 */
    jsonObject: {
      type: Object,
      required: true
    },
    /** 表单数据 */
    formData: {
      type: Object,
      default: null
    }
  }

/** Json表单配置 */
jsonObject: {
  widgetList: [],
  formConfig: {}
}

const previewRef = ref(null)

/**
 * 表单中流程条件字段值变更时触发
 */
const renderChange = (val) => {
  console.log('renderChange :>> ', val)
}

/** 表单提交 */
const onSubmit = () => {
  previewRef.value.getFormModel().then(formData => {
    const formDataJson = JSON.stringify(formData)
    console.log('formDataJson :>> ', formDataJson)
  }).catch(error => {
    console.log('error :>> ', error)
  })
}

/** 表单重置 */
const onReset = () => {
  previewRef.value.clearFormModel()
}

detail-form组件:

<detail-form :widget-list="widgetList" :form-data="detailFormData" :h5="isH5" label-width="80px">
  <!-- 已选关联审批列表 -->
  <template #correlation="{ item }">
    {{ item }}
  </template>
</detail-form>

props: {
    /** 是否渲染H5 UI组件 */
    h5: {
      type: Boolean,
      default: false
    },
    /** 表单组件列表 */
    widgetList: {
      type: Object,
      required: true
    },
    /** 表单展示数据 */
    formData: {
      type: Object,
      required: true
    },
    /** 字体颜色 */
    color: {
      type: String,
      default: null
    },
    /** 字体大小 */
    fontSize: {
      type: [String, Number],
      default: null
    },
    /** 标题颜色 */
    labelColor: {
      type: String,
      default: null
    },
    /** 标题大小 */
    labelFontSize: {
      type: [String, Number],
      default: null
    },
    /** 标题宽度 */
    labelWidth: {
      type: [String, Number],
      default: null
    },
    /** 附加样式 */
    cellClass: {
      type: String,
      default: ''
    }
  }