{"_id":"@dongjuntao/dynamic-form","name":"@dongjuntao/dynamic-form","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dongjuntao/dynamic-form","version":"1.0.0","description":"Vue 3 dynamic form renderer (FormFiller) migrated from auth-pc","type":"module","main":"./dist/dynamic-form.umd.cjs","module":"./dist/dynamic-form.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/dynamic-form.js","require":"./dist/dynamic-form.umd.cjs"},"./style.css":"./dist/style.css"},"keywords":["vue3","dynamic-form","form-filler","ant-design-vue"],"peerDependencies":{"@ant-design/icons-vue":"^7.0.0","ant-design-vue":"^4.0.0","vue":"^3.3.0"},"devDependencies":{"@ant-design/icons-vue":"^7.0.1","@vitejs/plugin-vue":"^5.2.1","ant-design-vue":"^4.2.6","less":"^4.2.1","typescript":"^5.7.2","vite":"^6.0.3","vite-plugin-dts":"^4.3.0","vue":"^3.5.13","vue-tsc":"^2.1.10"},"scripts":{"build":"vite build","dev":"vite build --watch","prepublishOnly":"npm run build"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/your-org/auth-pc.git","directory":"packages/dynamic-form"},"publishConfig":{"access":"public"},"gitHead":"c8f3df4a31a4f7b2e6dd9f5f17fec69f83f12b40","_id":"@dongjuntao/dynamic-form@1.0.0","bugs":{"url":"https://github.com/your-org/auth-pc/issues"},"homepage":"https://github.com/your-org/auth-pc#readme","_nodeVersion":"26.3.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-LKI8UtZRZ9AK7vWPvs6ux6DeXvoFfVtXgVPYeY6XY86dpYPoXBAfUfjHgcyOowLYw54dh194Nil/nVPYd7dQuA==","shasum":"2ea8b342c145762cb7efb1d4247278715d9ddc6c","tarball":"https://registry.npmjs.org/@dongjuntao/dynamic-form/-/dynamic-form-1.0.0.tgz","fileCount":39,"unpackedSize":116219,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICvI7TYroGc8Pl1oJH+Xlta+sW8nyE2ngEMovECqe8fSAiBAuz7fJrqs0BMbY0yShHk0KvRgs1G2S5cRNHGNhukasA=="}]},"_npmUser":{"name":"dongjuntao","email":"1220951092@qq.com"},"directories":{},"maintainers":[{"name":"dongjuntao","email":"1220951092@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dynamic-form_1.0.0_1781424812987_0.8844915107454507"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-14T08:13:32.837Z","1.0.0":"2026-06-14T08:13:33.125Z","modified":"2026-06-14T08:13:33.338Z"},"maintainers":[{"name":"dongjuntao","email":"1220951092@qq.com"}],"description":"Vue 3 dynamic form renderer (FormFiller) migrated from auth-pc","homepage":"https://github.com/your-org/auth-pc#readme","keywords":["vue3","dynamic-form","form-filler","ant-design-vue"],"repository":{"type":"git","url":"git+https://github.com/your-org/auth-pc.git","directory":"packages/dynamic-form"},"bugs":{"url":"https://github.com/your-org/auth-pc/issues"},"license":"MIT","readme":"﻿# @dongjuntao/dynamic-form\r\n\r\nVue 3 动态表单填写组件，从 auth-pc 自研表单（`FormFiller`）迁移而来。\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @dongjuntao/dynamic-form ant-design-vue @ant-design/icons-vue vue\r\n```\r\n\r\n## 快速开始\r\n\r\n```typescript\r\n// main.ts\r\nimport { createApp } from 'vue'\r\nimport Antd from 'ant-design-vue'\r\nimport 'ant-design-vue/dist/reset.css'\r\nimport { createDynamicForm } from '@dongjuntao/dynamic-form'\r\nimport '@dongjuntao/dynamic-form/style.css'\r\nimport axios from 'axios'\r\n\r\nconst app = createApp(App)\r\napp.use(Antd)\r\napp.use(\r\n  createDynamicForm({\r\n    apis: {\r\n      orgTree: () => axios.get('/server-system/org/tree').then(r => r.data),\r\n      empPage: params =>\r\n        axios.get('/server-system/emp/page', { params }).then(r => r.data),\r\n      upload: (formData, params) =>\r\n        axios\r\n          .post('/server-system/aliyun/oss/upload', formData, { params })\r\n          .then(r => r.data),\r\n    },\r\n    uploadBusinessType: 'auth_hub_emp_avatar',\r\n    amapKey: 'your-amap-key',\r\n  })\r\n)\r\napp.mount('#app')\r\n```\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref, onMounted } from 'vue'\r\nimport { FormFiller } from '@dongjuntao/dynamic-form'\r\nimport axios from 'axios'\r\n\r\nconst fillerRef = ref()\r\nconst formConfig = ref({ fields: [], layout: 'left' })\r\n\r\nonMounted(async () => {\r\n  const { payload } = await axios.get('/server-system/form/field/list', {\r\n    params: { formId: 'YOUR_FORM_ID' },\r\n  })\r\n  formConfig.value = JSON.parse(payload.array[0].extAttr)\r\n})\r\n\r\nasync function submit() {\r\n  const { values } = await fillerRef.value.getFormData()\r\n  await axios.post('/server-system/form/submit/YOUR_FORM_ID', values)\r\n}\r\n</script>\r\n\r\n<template>\r\n  <FormFiller ref=\"fillerRef\" :form-config=\"formConfig\" device-type=\"pc\" />\r\n  <a-button type=\"primary\" @click=\"submit\">提交</a-button>\r\n</template>\r\n```\r\n\r\n## API\r\n\r\n### `createDynamicForm(options)`\r\n\r\n| 选项 | 说明 |\r\n|------|------|\r\n| `apis.orgTree` | 部门树（department 字段） |\r\n| `apis.empPage` | 员工列表（user-select 字段） |\r\n| `apis.upload` | 图片/文件上传 |\r\n| `uploadBusinessType` | 上传业务类型，默认 `auth_hub_emp_avatar` |\r\n| `amapKey` | 高德地图 Key（location 字段） |\r\n\r\n### `FormFiller` Props\r\n\r\n| Prop | 类型 | 默认 |\r\n|------|------|------|\r\n| `formConfig` | `FormConfig` | 必填 |\r\n| `deviceType` | `'pc' \\| 'mobile'` | `'pc'` |\r\n\r\n### `FormFiller` Methods（ref 调用）\r\n\r\n| 方法 | 说明 |\r\n|------|------|\r\n| `getFormData()` | 校验并返回 `{ values, fieldValues }` |\r\n| `resetForm()` | 重置表单 |\r\n| `updateFieldStates()` | 刷新字段联动状态 |\r\n\r\n## 数据格式\r\n\r\n与 auth-pc 后端 `extAttr` 完全兼容：\r\n\r\n```json\r\n{\r\n  \"fields\": [\r\n    {\r\n      \"id\": \"field_1\",\r\n      \"key\": \"field_1\",\r\n      \"type\": \"input\",\r\n      \"label\": \"姓名\",\r\n      \"required\": true,\r\n      \"colSpan\": 24,\r\n      \"props\": {}\r\n    }\r\n  ],\r\n  \"layout\": \"left\"\r\n}\r\n```\r\n\r\n## 本地开发\r\n\r\n```bash\r\ncd packages/dynamic-form\r\nnpm install\r\nnpm run build\r\n```\r\n\r\n## 发布\r\n\r\n```bash\r\nnpm login\r\nnpm publish --access public\r\n```\r\n\r\n## 后续计划\r\n\r\n- [ ] FormDesigner（表单设计器）迁移\r\n- [ ] 独立 `@dongjuntao/dynamic-form-designer` 分包\r\n","readmeFilename":"README.md","_rev":"1-407c4457cd4445bb7b3796f5fc2a80ca"}