images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2025-05-10 18:24:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

1. 替换vue-i18n多语言实现；

Browse Source 
2. 修复一丢丢小问题。
This commit is contained in:
vdpAdmin 2022-02-11 17:31:36 +08:00
parent 8fbb9f4647
commit f7885d5774
8 changed files with 250 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
README.md
View File

@ -5,135 +5,135 @@
<br/> <br/>
#### 立即体验VForm 3 ### 立即体验VForm 3
[在线Demo](http://120.92.142.115:81/vform3/) [在线Demo](http://120.92.142.115:81/vform3/)
### 友情链接 ### 友情链接
[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3） [Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）
[REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统 [REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统
### 功能一览 ### 功能一览
``` ```
> 拖拽式可视化表单设计； > 拖拽式可视化表单设计；
> 支持PC、Pad、H5三种布局； > 支持PC、Pad、H5三种布局；
> 支持运行时动态加载表单； > 支持运行时动态加载表单；
> 支持表单复杂交互控制； > 支持表单复杂交互控制；
> 支持自定义CSS样式； > 支持自定义CSS样式；
> 支持自定义校验逻辑； > 支持自定义校验逻辑；
> 支持国际化多语言； > 支持国际化多语言；
> 可导出Vue组件、HTML源码； > 可导出Vue组件、HTML源码；
> 可导出Vue的SFC单文件组件； > 可导出Vue的SFC单文件组件；
> 支持开发自定义组件； > 支持开发自定义组件；
> 支持响应式自适应布局； > 支持响应式自适应布局；
> 支持VS Code插件； > 支持VS Code插件；
> 更多功能等你探究...； > 更多功能等你探究...；
``` ```
### 浏览器兼容性 ### 浏览器兼容性
```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari``` ```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari```
<br/> <br/>
### 跟Vue 3.x项目集成 ### 跟Vue 3.x项目集成
<br/> <br/>
#### 1. 安装包 #### 1. 安装包
```bash ```bash
npm i vform3-builds npm i vform3-builds
``` ```
或 或
```bash ```bash
yarn add vform3-builds yarn add vform3-builds
``` ```
<br/> <br/>
#### 2. 引入并全局注册VForm 3组件 #### 2. 引入并全局注册VForm 3组件
``` ```
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import ElementPlus from 'element-plus' //引入element-plus库 import ElementPlus from 'element-plus' //引入element-plus库
import 'element-plus/dist/index.css' //引入element-plus样式 import 'element-plus/dist/index.css' //引入element-plus样式
import VForm3 from 'vform3-builds' //引入VForm 3库 import VForm3 from 'vform3-builds' //引入VForm 3库
import 'vform3-builds/dist/designer.style.css' //引入VForm3样式 import 'vform3-builds/dist/designer.style.css' //引入VForm3样式
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus) //全局注册element-plus app.use(ElementPlus) //全局注册element-plus
app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件) app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)
app.mount('#app') app.mount('#app')
``` ```
<br/> <br/>
#### 3. 在Vue 3.x模板中使用表单设计器组件 #### 3. 在Vue 3.x模板中使用表单设计器组件
```bash ```bash
<template> <template>
<v-form-designer ref="vfdRef"></v-form-designer> <v-form-designer ref="vfdRef"></v-form-designer>
</template> </template>
<script setup> <script setup>
const vfdRef = ref(null) const vfdRef = ref(null)
</script> </script>
<style lang="scss"> <style lang="scss">
body { body {
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */ margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
} }
</style> </style>
``` ```
<br/> <br/>
#### 4. 在Vue 3.x模板中使用表单渲染器组件 #### 4. 在Vue 3.x模板中使用表单渲染器组件
```html ```html
<template> <template>
<div> <div>
<v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"> <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
</v-form-render> </v-form-render>
<el-button type="primary" @click="submitForm">Submit</el-button> <el-button type="primary" @click="submitForm">Submit</el-button>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}}) const formJson = reactive({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
const formData = reactive({}) const formData = reactive({})
const optionData = reactive({}) const optionData = reactive({})
const vFormRef = ref(null) const vFormRef = ref(null)
const submitForm = () => { const submitForm = () => {
vFormRef.value.getFormData().then(formData => { vFormRef.value.getFormData().then(formData => {
// Form Validation OK // Form Validation OK
alert( JSON.stringify(formData) ) alert( JSON.stringify(formData) )
}).catch(error => { }).catch(error => {
// Form Validation failed // Form Validation failed
ElMessage.error(error) ElMessage.error(error)
}) })
} }
</script> </script>
``` ```
<br/> <br/>
### 资源链接 ### 资源链接
<hr> <hr>
文档官网：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a> 文档官网：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
在线演示：<a href="http://120.92.142.115:81/vform3/" target="_blank">http://120.92.142.115:81/vform3/</a> 在线演示：<a href="http://120.92.142.115:81/vform3/" target="_blank">http://120.92.142.115:81/vform3/</a>
Github仓库：<a href="https://github.com/vform666/variant-form3-vite" target="_blank">https://github.com/vform666/variant-form3-vite</a> Github仓库：<a href="https://github.com/vform666/variant-form3-vite" target="_blank">https://github.com/vform666/variant-form3-vite</a>
Gitee仓库：<a href="https://gitee.com/vdpadmin/variant-form3-vite" target="_blank">https://gitee.com/vdpadmin/variant-form3-vite</a> Gitee仓库：<a href="https://gitee.com/vdpadmin/variant-form3-vite" target="_blank">https://gitee.com/vdpadmin/variant-form3-vite</a>
更新日志：<a href="https://www.vform666.com/pages/changelog/" target="_blank">https://www.vform666.com/pages/changelog/</a> 更新日志：<a href="https://www.vform666.com/pages/changelog/" target="_blank">https://www.vform666.com/pages/changelog/</a>
技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群 技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群
![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png) ![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png)

1
package.json
View File

@ -19,7 +19,6 @@
"mitt": "^3.0.0", "mitt": "^3.0.0",
"sortablejs": "1.14.0", "sortablejs": "1.14.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-i18n": "^9.2.0-beta.23",
"vue3-quill": "^0.2.6" "vue3-quill": "^0.2.6"
}, },
"devDependencies": { "devDependencies": {

19
src/App.vue
View File

@ -1,12 +1,17 @@
<template> <template>
<el-config-provider :locale="elLocale">
<div id="app"> <div id="app">
<VFormDesigner /> <VFormDesigner />
</div> </div>
</el-config-provider>
</template> </template>
<script> <script>
import VFormDesigner from './components/form-designer/index.vue' import VFormDesigner from './components/form-designer/index.vue'
import zhCNLang from 'element-plus/lib/locale/lang/zh-cn'
import enUSLang from 'element-plus/lib/locale/lang/en'
export default { export default {
name: 'App', name: 'App',
components: { components: {
@ -16,9 +21,21 @@ export default {
return { return {
formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}}, formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}},
formData: {}, formData: {},
optionData: {} optionData: {},
elLocaleMap: {
'zh-CN': zhCNLang,
'en-US': enUSLang,
},
} }
}, },
computed: {
elLocale() {
let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN'
return this.elLocaleMap[curLocale]
},
},
methods: { methods: {
submitForm() { submitForm() {
this.$refs.vFormRef.getFormData().then(formData => { this.$refs.vFormRef.getFormData().then(formData => {

10
src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
View File

@ -287,14 +287,7 @@
border: 1px dashed #336699; border: 1px dashed #336699;
margin: 3px; margin: 3px;
//min-height: 36px;
height: 100%; height: 100%;
/*position: absolute;*/
/*top: 0;*/
/*right: 0;*/
/*bottom: 0;*/
/*left: 0;*/
} }
.table-cell-action{ .table-cell-action{
@ -307,6 +300,9 @@
background: $--color-primary; background: $--color-primary;
z-index: 999; z-index: 999;
display: flex;
align-items: center;
i { i {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;

17
src/components/form-designer/index.vue
View File

@ -72,7 +72,7 @@
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config" import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
import i18n, { changeLocale } from "@/utils/i18n" import i18n, { changeLocale } from "@/utils/i18n"
import axios from 'axios' import axios from 'axios'
import SvgIcon from "@/components/svg-icon/index"; import SvgIcon from "@/components/svg-icon/index"
export default { export default {
name: "VFormDesigner", name: "VFormDesigner",
@ -123,12 +123,13 @@
return { return {
vFormVersion: VARIANT_FORM_VERSION, vFormVersion: VARIANT_FORM_VERSION,
curLangName: '', curLangName: '',
curLocale: '',
vsCodeFlag: false, vsCodeFlag: false,
caseName: '', caseName: '',
docUrl: 'https://www.vform666.com/document.html', docUrl: 'https://www.vform666.com/document3.html',
gitUrl: 'https://github.com/vform666/variant-form', gitUrl: 'https://github.com/vform666/variant-form3-vite',
chatUrl: 'https://www.vform666.com/chat-group.html', chatUrl: 'https://www.vform666.com/chat-group.html',
subScribeUrl: 'https://www.vform666.com/subscribe.html', subScribeUrl: 'https://www.vform666.com/subscribe.html',
@ -225,14 +226,14 @@
}, },
initLocale() { initLocale() {
let curLocale = localStorage.getItem('v_form_locale') this.curLocale = localStorage.getItem('v_form_locale')
if (!!this.vsCodeFlag) { if (!!this.vsCodeFlag) {
curLocale = curLocale || 'en-US' this.curLocale = this.curLocale || 'en-US'
} else { } else {
curLocale = curLocale || 'zh-CN' this.curLocale = this.curLocale || 'zh-CN'
} }
this.curLangName = this.i18nt('application.' + curLocale) this.curLangName = this.i18nt('application.' + this.curLocale)
this.changeLanguage(curLocale) this.changeLanguage(this.curLocale)
}, },
loadFieldListFromServer() { loadFieldListFromServer() {

29
src/utils/i18n.js
View File

@ -1,4 +1,4 @@
import { createI18n } from 'vue-i18n' //引入vue-i18n组件 import { createI18n } from './smart-vue-i18n/index'
import enLocaleElement from "element-plus/lib/locale/lang/en"; import enLocaleElement from "element-plus/lib/locale/lang/en";
import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn"; import zhLocaleElement from "element-plus/lib/locale/lang/zh-cn";
@ -33,36 +33,33 @@ const langResources = {
} }
} }
//locale.i18n((key, value) => i18n.t(key, value))
export const changeLocale = function(langName) {
//i18n.locale = langName //此行切换语言无效！！
i18n.global.locale = langName
localStorage.setItem('v_form_locale', langName)
}
export const translate = function(key) {
return i18n.global.t(key, i18n.locale)
}
const i18n = createI18n({ const i18n = createI18n({
locale: localStorage.getItem('v_form_locale') || 'zh-CN', locale: localStorage.getItem('v_form_locale') || 'zh-CN',
messages: langResources messages: langResources
}) })
export const changeLocale = function(langName) {
i18n.setLang(langName)
localStorage.setItem('v_form_locale', langName)
}
export const translate = function(key) {
return i18n.$st(key)
}
export const installI18n = (app) => { export const installI18n = (app) => {
app.use(i18n) //
} }
export default { export default {
methods: { methods: {
i18nt(key) { i18nt(key) {
return i18n.global.t(key, i18n.locale) return i18n.$st(key)
}, },
/* 如果key1不存在，则查找key2 */ /* 如果key1不存在，则查找key2 */
i18n2t(key1, key2) { i18n2t(key1, key2) {
return i18n.global.te(key1, i18n.locale) ? i18n.global.t(key1, i18n.locale) : i18n.global.t(key2, i18n.locale) return i18n.$st2(key1, key2)
}, },
} }

30
src/utils/smart-vue-i18n/index.js Normal file
View File

@ -0,0 +1,30 @@
import { reactive } from 'vue'
import { get } from './utils'
let locale = reactive({
lang: localStorage.getItem('v_form_locale') || 'zh-CN',
})
export function createI18n(options) {
return {
messages: options.messages,
$st(path, ...args) {
const message = get(this.messages[locale.lang], path)
return typeof message === 'function'
? message(...args)
: (message !== null ? message : path)
},
$st2(path, path2) {
let messages = this.messages[locale.lang]
const message = get(messages, path)
return (message !== null) ? message : get(messages, path2)
},
setLang(lang) {
locale.lang = lang
}
}
}

47
src/utils/smart-vue-i18n/utils.js Normal file
View File

@ -0,0 +1,47 @@
// 值存在
export function isDef(value) {
return value !== undefined && value !== null
}
// 对象映射 'a.b' {a: {b: 'val'}}
export function get(object, path) {
const keys = path.split('.')
let result = object
keys.forEach(key => {
result = isDef(result) && isDef(result[key]) ? result[key] : null
})
return result
}
// 是否是对象
export function isObj(x) {
const type = typeof x
return x !== null && (type === 'object' || type === 'function')
}
// 深拷贝
const { hasOwnProperty } = Object.prototype
function assignKey(to, from, key) {
const val = from[key]
if (!isDef(val)) {
return
}
if (!hasOwnProperty.call(to, key) || !isObj(val)) {
to[key] = val
} else {
to[key] = deepAssign(Object(to[key]), from[key])
}
}
export function deepAssign(to, from) {
Object.keys(from).forEach(key => {
assignKey(to, from, key)
})
return to
}