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

xmceloan-form-design-cst

v0.1.166

Published

## Project setup ``` yarn install ```

Downloads

27

Readme

表单设置组建

属性: widgetForm 配置项 defaulTypeList 默认值类型配置项 widgetFormSelect 配置项选中项 selectList 体验事项 (动态下拉框 传入参数[ { value: 1, label: '13' },{ value: 2, label: '22' },]) stencil 模版组件 (参数与配置项list相同) 事件: @handleClear 清空事件的回调

表单展示组建

属性: widgetForm 配置项 widgetModels 配置项默认值对象 resetWord 重置按钮文字 saveWord 保存按钮文字 submitWord 提交按钮文字 closeWord 关闭按钮文字 isShowBtn 是否显示提交按钮 isShowReset 是否显重置值按钮 isShowSave 是否显示保存按钮 isShowClose 是否显示关闭按钮 isShowLine 是否显示按钮顶部与表单顶部的线条 isConfirm 提交时是否需要二次确认提示 isView 是否禁用表单 loadDown 附件下载接口地址 //'/common/download/resource?filePath=' upload 附件上传接口地址 // upLoadBaseUrl 附件下载地址前缀 // ‘http://10.0.251.212:8888’ data 附件上传参数 headers 附件上传请求头信息 btnposition 按钮水平布局控制 size 按钮尺寸 事件: @saveCallback 保存按钮回调事件 =>(formData) 保存回调不经过表单rules验证 @closeHandleTest 关闭按钮回调事件 @resetCallback 重置按钮回调事件 @addCallback 提交按钮回调事件 =>(formData) 需要经过表单rules验证 @uploadDown 附件下载回调事件 =>(data) projectName=='haicang' 专用

默认值回显

默认值数组 valueObj: { checkBoxInput_1636427365000_55187: [ { option: 'Option 1', input: '12' } ], input_1636427380000_90623: '123123', time_1636427386000_83661: '09:50:58', checkbox_1636427361000_29174: ['Option 1', 'Option 2'], input_1636427352000_34791: '11', textarea_1636427357000_13834: '22' }, 配置项数组 widgetForm: { list: [ { key: '1638175179000_76523', rules: [], model: 'imgupload_1638175179000_76523', typeName: '上传文件', type: 'imgupload', options: { innerWidth: '100%', isQiniu: false, tokenFunc: 'funcGetToken', width: '', domain: 'http://pfp81ptt6.bkt.clouddn.com/', disabled: false, length: 8, size: { width: 100, height: 100 }, multiple: false, defaultValue: [ { status: 'success', uid: 1638175185056, name: '体验官表单.jpg', url: '/2021/11/29/6d64177c-ea56-47ba-874b-86919ad2b92a.jpg' } ], token: '', isDelete: false, isEdit: false, action: 'https://jsonplaceholder.typicode.com/photos/', remoteFunc: 'func_1638175179000_76523', min: 0 }, name: '上传文件', icon: 'icon-tupian' } ], config: { labelWidth: 100, labelPosition: 'right', size: 'small', projectName:'haicang' } }, 回显方法 valueInit() { // if (res.data.representation && res.data.values) { // let data = JSON.parse(res.data.representation); let data = this.widgetForm // console.log("表单", data); // 处理表单回显 for (let i in data.list) { if (data.list[i].type == 'grid') { //栅格布局 for (let j in data.list[i].columns) { this.listInit(data.list[i].columns[j].list) } } else { //普通布局 this.listInit([data.list[i]]) } } const arr = data.list.map(v => { if (v.name == '体验事项') { v.option.option == this.selectList return v } else { return v } }) this.widgetFormValue = { list: arr, config: { ...data.config } } this.$refs.previewPage.referKey++ }, listInit(_list) { for (let i in this.valueObj) { let _index = _list.findIndex(function(params) { return params.model == i }) if (_index > -1) { if (_list[_index].type == 'checkBoxInput') { const boxList = [] const inputList = [] this.valueObj[i].map(v => { boxList.push(v.option) inputList.push(v.input) }) _list[_index].options.previewValue.boxlist = boxList _list[_index].options.previewValue.valueList = _list[ _index ].options.options.map(v => { return v.value }) _list[_index].options.previewValue.valueList.map((v, i) => { boxList.map((j, k) => { if (j == v) { return (_list[_index].options.previewValue.inputList[i] = inputList[k]) } }) }) } else if (_list[_index].type == 'radioInput') { if (this.valueObj[i][0]) { const boxList = this.valueObj[i][0].option const inputList = [] this.valueObj[i].map(v => { inputList.push(v.input) }) _list[_index].options.previewValue.boxlist = boxList const a = (_list[_index].options.previewValue.valueList = _list[ _index ].options.options.map(v => { return v.ifRemark })) a.map((v, i) => { if (v) { _list[_index].options.previewValue.inputList[i] = inputList[0] } else { _list[_index].options.previewValue.inputList[i] = '' } }) } } else if(_list[_index].type == 'table'){ console.log(i) _list[_index].tableData = this.valueObj[i] console.log(_list[_index].tableData) }else{ _list[_index].options.defaultValue = this.valueObj[i] } } } },

配置项示例 widgetModels: { table_1641263289000_33408: [ { input_1641263672000_31294: '3', input_1641263676000_59762: '4', row_index: 0, input_1641263681000_1135: '7', input_1641263665000_36914: '1', input_1641263678000_77264: '5', input_1641263669000_2609: '2' }, { input_1641263669000_2609: '1234', input_1641263678000_77264: '1234567', input_1641263676000_59762: '123456', row_index: 1, input_1641263681000_1135: '12345678', input_1641263665000_36914: '123', input_1641263672000_31294: '12345' } ], input_1641266034000_77509: '222', input_1641368888000_7072: '444' }, stencil: [ { type: 'text', name: '文字', typeName: '文字', noLabel: false, icon: 'icon-wenzishezhi-', options: { defaultValue: '设置默认值', customClass: '', layout: 'left', fontSize: '14', color: '#333333', bold: false, italic: false, lineStyle: 'none', remoteFunc: 'func_1638430361000_47102' }, key: '1638430361000_47102', model: 'text_1638430361000_47102', rules: [] }, { type: 'input', noLabel: false, name: '单行文本', typeName: '单行文本', icon: 'icon-diy-com-textarea', options: { innerWidth: '100%', width: '100%', defaultValue: '', defaultValueType: '', required: true, dataType: 'string', ywType: '', pattern: '', placeholder: '', disabled: false, layout: 'left', fontSize: 14, color: '#333333', labelPosition: 'left', remoteFunc: 'func_1638500005000_54617' }, key: '1638500005000_54617', model: 'input_1638500005000_54617', rules: [ { type: 'string', message: '单行文本格式不正确' }, { required: true, message: '单行文本必须填写!' } ] }, { type: 'radioInput', name: '单选配置', typeName: '单选配置', icon: 'icon-wenzishezhi-', options: { defaultValue: '', previewValue: { boxlist: '', inputList: [], valueList: [] }, inline: false, showLabel: false, labelTitle: '', options: [ { value: 'Option 1', label: 'Option 1', ifRemark: true, ifRequired: false, description: '' }, { value: 'Option 2', label: 'Option 2', ifRemark: false, ifRequired: false, description: '' }, { value: 'Option 3', label: 'Option 3', ifRemark: false, ifRequired: false, description: '' } ], cascader: false, required: false, requiredSelf: true, innerWidth: '100%', width: '', max: 3, disabled: false, bold: false, italic: false, remoteFunc: 'func_1638502919000_79155' }, key: '1638502919000_79155', model: 'radioInput_1638502919000_79155', rules: [] } ], defaulTypeList: [ { value: 'ENTERPRISE_NAME', label: '企业名称' }, { value: 'ENTERPRISE_CODE', label: '统一社会信用代码' }, { value: 'ORGANIZATION_CODE', label: '组织机构代码' }, { value: 'REGISTERED_ADDRESS', label: '注册地址' }, { value: 'REGISTERED_CAPITAL', label: '注册资本' }, { value: 'INFORMANT_NAME', label: '填报人' }, { value: 'INFORMANT_PHONE', label: '填报人手机号' }, { value: 'LEGAL_REPRESENTATIVE_NAME', label: '法人代表姓名' }, { value: 'LEGAL_REPRESENTATIVE_CERT_TYPE', label: '法人代表证件类别' }, { value: 'LEGAL_REPRESENTATIVE_CERT_NUMBER', label: '法人代表证件号码' }, { value: 'LEGAL_REPRESENTATIVE_CONTACT', label: '法人联系方式' }, { value: 'BUSINESS_ADDRESS', label: '经营地址' }, { value: 'INDUSTRY_CODE', label: '所属行业' }, { value: 'REGISTRATION_DATE', label: '登记日期' }, { value: 'REGION', label: '所在区域' } ], selectList: [ { value: 1, label: '13' }, { value: 2, label: '22' }, { value: 3, label: '31' }, { value: 31, label: '33331' } ]

强化js 使用规范 (function(){ (默认生成匿名立即执行函数) $('input[id=input_1641266034000_77509]')[0].dispatchEvent(new Event('input')), (激活目标组件的dom与vue双向绑定关联) $('input[id=input_1641266034000_77509]')[0].value = (目标组件赋值) Number($('input[id=input_1641263665000_36914]')[0].value) + (目标组件计算方法) Number($('input[id=input_1641263665000_36914]')[1].value) + Number($('input[id=input_1641263669000_2609]')[0].value) + Number($('input[id=input_1641263669000_2609]')[1].value) })() 计算方法目标获取 如被计算组件只有一个则$('input[id=input_1641263665000_36914]')获取后是长度为1的数组 即根据角标[0]获取对应value 如被计算组件有n个则$('input[id=input_1641263665000_36914]')获取后是长度为n的数组 即根据角标[n]获取对应value