Skip to content

Commit

Permalink
add i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
@GavinZhuLei
GavinZhuLei committed Nov 7, 2019
1 parent ec7a388 commit 3ca2068
Show file tree
Hide file tree
Showing 19 changed files with 708 additions and 215 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"qiniu-js": "^2.5.1",
"viewerjs": "^1.2.0",
"vue": "^2.6.5",
"vue-i18n": "5.0.3",
"vue-router": "^3.0.1",
"vue2-editor": "^2.10.2",
"vuedraggable": "^2.16.0"
Expand Down
4 changes: 2 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>表单设计器 | 表单生成器</title>
<meta name="description" content="基于Vue的表单设计器，让表单开发简单而高效">
<title>FormMaking</title>
<meta name="description" content="A designer and generator of form base on Vue.js, make form development simple and efficient.">
</head>
<body>
<div id="app"></div>
Expand Down
58 changes: 50 additions & 8 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,48 @@
<div id="app">
<div class="fm-header">
<img class="fm-logo" src="./assets/logo.png">
<div class="fm-title" @click="handleHome">表单设计器</div>
<div class="fm-title" @click="handleHome">{{$t('header.title')}}</div>

<iframe style="vertical-align: middle;margin-top:10px;margin-left: 10px;" src="https://ghbtns.com/github-btn.html?user=GavinZhulei&repo=vue-form-making&type=star&count=true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

<div class="fm-link">
<a target="_blank" href="http://tools.xiaoyaoji.cn/guide/installation.html">使用文档</a>
<a target="_blank" href="http://tools.xiaoyaoji.cn/other/course.html">教程</a>
<a target="_blank" href="http://tools.xiaoyaoji.cn/form/#/price">商业授权</a>
<a target="_blank" href="http://tools.xiaoyaoji.cn/form/#/price">{{$t('header.pricing')}}</a>
<a target="_blank" href="http://tools.xiaoyaoji.cn/guide/installation.html">{{$t('header.document')}}</a>
<a target="_blank" href="http://tools.xiaoyaoji.cn/other/course.html" v-if="$lang == 'zh-CN'">学习课程</a>
<a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GitHub</a>
<a target="_blank" href="https://gitee.com/gavinzhulei/vue-form-making">码云</a>
<a class="ad" href="http://www.xiaoyaoji.cn" target="_blank">小幺鸡接口文档</a>
<a class="ad" target="_blank" href="http://book.wawo.xyz/">WAWO 好神奇</a>

<div class="action-item">
<el-dropdown trigger="click" @command="handleLangCommand">
<span class="el-dropdown-link">
{{$route.params.lang == 'zh-CN' ? '简体中文' : 'English'}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
<el-dropdown-item command="en-US">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>

<a class="ad" href="http://form.xiaoyaoji.cn" target="_blank">{{$t('header.advanced')}}</a>
<a class="ad" href="http://www.xiaoyaoji.cn" target="_blank" v-if="$lang == 'zh-CN'">小幺鸡接口工具</a>
</div>
</div>
<div class="fm-container"><router-view/></div>
</div>
</template>

<script>
import Vue from 'vue'
export default {
name: 'app',
methods: {
handleHome () {
this.$router.push({path: '/'})
},
handleLangCommand (command) {
this.$router.replace({name: this.$route.name, params: {lang: command}})
}
}
}
Expand Down Expand Up @@ -73,6 +92,29 @@ export default {
color: #f5dab1;
}
}
.action-item{
display: inline-block;
margin-left: 15px;
.el-dropdown{
// font-size: 16px;
// font-weight: 500;
}
.el-dropdown-link{
cursor: pointer;
color: #fff;
&:hover{
opacity: 0.8;
}
}
&.action-item-user{
.el-dropdown-link{
color: #f5dab1;
}
}
}
}
}
.fm-container{
Expand All @@ -87,7 +129,7 @@ html,body{
height: 100%;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
Expand Down
100 changes: 42 additions & 58 deletions src/components/Container.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<el-aside width="250px">
<div class="components-list">
<template v-if="basicFields.length">
<div class="widget-cate">基础字段</div>
<div class="widget-cate">{{$t('fm.components.basic.title')}}</div>
<draggable tag="ul" :list="basicComponents"
v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
@end="handleMoveEnd"
Expand All @@ -23,7 +23,7 @@
</template>

<template v-if="advanceFields.length">
<div class="widget-cate">高级字段</div>
<div class="widget-cate">{{$t('fm.components.advance.title')}}</div>
<draggable tag="ul" :list="advanceComponents"
v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
@end="handleMoveEnd"
Expand All @@ -42,7 +42,7 @@


<template v-if="layoutFields.length">
<div class="widget-cate">布局字段</div>
<div class="widget-cate">{{$t('fm.components.layout.title')}}</div>
<draggable tag="ul" :list="layoutComponents"
v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
@end="handleMoveEnd"
Expand All @@ -66,11 +66,11 @@
<el-header class="btn-bar" style="height: 45px;">
<slot name="action">
</slot>
<el-button v-if="upload" type="text" size="medium" icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
<el-button v-if="clearable" type="text" size="medium" icon="el-icon-delete" @click="handleClear">清空</el-button>
<el-button v-if="preview" type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
<el-button v-if="generateJson" type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
<el-button v-if="generateCode" type="text" size="medium" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
<el-button v-if="upload" type="text" size="medium" icon="el-icon-upload2" @click="handleUpload">{{$t('fm.actions.import')}}</el-button>
<el-button v-if="clearable" type="text" size="medium" icon="el-icon-delete" @click="handleClear">{{$t('fm.actions.clear')}}</el-button>
<el-button v-if="preview" type="text" size="medium" icon="el-icon-view" @click="handlePreview">{{$t('fm.actions.preview')}}</el-button>
<el-button v-if="generateJson" type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">{{$t('fm.actions.json')}}</el-button>
<el-button v-if="generateCode" type="text" size="medium" icon="el-icon-document" @click="handleGenerateCode">{{$t('fm.actions.code')}}</el-button>
</el-header>
<el-main :class="{'widget-empty': widgetForm.list.length == 0}">

Expand All @@ -81,8 +81,8 @@
<el-aside class="widget-config-container">
<el-container>
<el-header height="45px">
<div class="config-tab" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">字段属性</div>
<div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性</div>
<div class="config-tab" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">{{$t('fm.config.widget.title')}}</div>
<div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">{{$t('fm.config.form.title')}}</div>
</el-header>
<el-main class="config-content">
<widget-config v-show="configTab=='widget'" :data="widgetFormSelect"></widget-config>
Expand All @@ -102,14 +102,14 @@
<generate-form insite="true" @on-change="handleDataChange" v-if="previewVisible" :data="widgetForm" :value="widgetModels" :remote="remoteFuncs" ref="generateForm">

<template v-slot:blank="scope">
宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
Width <el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
Height <el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
</template>
</generate-form>

<template slot="action">
<el-button type="primary" @click="handleTest">获取数据</el-button>
<el-button @click="handleReset">重置</el-button>
<el-button type="primary" @click="handleTest">{{$t('fm.actions.getData')}}</el-button>
<el-button @click="handleReset">{{$t('fm.actions.reset')}}</el-button>
</template>
</cus-dialog>

Expand All @@ -121,7 +121,7 @@
width="800px"
form
>
<el-alert type="info" title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"></el-alert>
<el-alert type="info" :title="$t('fm.description.uploadJsonInfo')"></el-alert>
<div id="uploadeditor" style="height: 400px;width: 100%;">{{jsonEg}}</div>
</cus-dialog>

Expand All @@ -136,7 +136,7 @@
<div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>

<template slot="action">
<el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">复制数据</el-button>
<el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">{{$t('fm.actions.copyData')}}</el-button>
</template>
</cus-dialog>

Expand Down Expand Up @@ -263,46 +263,7 @@ export default {
jsonCopyValue: '',
jsonClipboard: null,
jsonEg: `{
"list": [
{
"type": "input",
"name": "单行文本",
"icon": "icon-input",
"options": {
"width": "100%",
"defaultValue": "",
"required": false,
"dataType": "string",
"pattern": "",
"placeholder": "",
"remoteFunc": "func_1540908864000_94322"
},
"key": "1540908864000_94322",
"model": "input_1540908864000_94322",
"rules": [
{
"type": "string",
"message": "单行文本格式不正确"
}
]
},
{
"type": "textarea",
"name": "多行文本",
"icon": "icon-diy-com-textarea",
"options": {
"width": "100%",
"defaultValue": "",
"required": false,
"pattern": "",
"placeholder": "",
"remoteFunc": "func_1540908876000_19435"
},
"key": "1540908876000_19435",
"model": "textarea_1540908876000_19435",
"rules": []
}
],
"list": [],
"config": {
"labelWidth": 100,
"labelPosition": "top",
Expand All @@ -312,9 +273,29 @@ export default {
}
},
mounted () {
this._loadComponents()
},
methods: {
_loadComponents () {
this.basicComponents = this.basicComponents.map(item => {
return {
...item,
name: this.$t(`fm.components.fields.${item.type}`)
}
})
this.advanceComponents = this.advanceComponents.map(item => {
return {
...item,
name: this.$t(`fm.components.fields.${item.type}`)
}
})
this.layoutComponents = this.layoutComponents.map(item => {
return {
...item,
name: this.$t(`fm.components.fields.${item.type}`)
}
})
},
handleGoGithub () {
window.location.href = 'https://github.com/GavinZhuLei/vue-form-making'
},
Expand Down Expand Up @@ -357,7 +338,7 @@ export default {
if (!this.jsonClipboard) {
this.jsonClipboard = new Clipboard('.json-btn')
this.jsonClipboard.on('success', (e) => {
this.$message.success('复制成功')
this.$message.success(this.$t('fm.message.copySuccess'))
})
}
this.jsonCopyValue = JSON.stringify(this.widgetForm)
Expand Down Expand Up @@ -427,6 +408,9 @@ export default {
handler: function (val) {
console.log(this.$refs.widgetForm)
}
},
'$lang': function (val) {
this._loadComponents()
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/CusDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<span v-if="action" slot="footer" class="dialog-footer" v-loading="loading"
:element-loading-text="loadingText">
<slot name="action">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="submit" >确 定</el-button>
<el-button @click="close">{{$t('fm.actions.cancel')}}</el-button>
<el-button type="primary" @click="submit" >{{$t('fm.actions.confirm')}}</el-button>
</slot>
</span>
</el-dialog>
Expand Down
12 changes: 6 additions & 6 deletions src/components/FormConfig.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<template>
<div class="form-config-container">
<el-form label-position="top">
<el-form-item label="标签对齐方式">
<el-form-item :label="$t('fm.config.form.labelPosition.title')">
<el-radio-group v-model="data.labelPosition">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
<el-radio-button label="top">顶部对齐</el-radio-button>
<el-radio-button label="left">{{$t('fm.config.form.labelPosition.left')}}</el-radio-button>
<el-radio-button label="right">{{$t('fm.config.form.labelPosition.right')}}</el-radio-button>
<el-radio-button label="top">{{$t('fm.config.form.labelPosition.top')}}</el-radio-button>
</el-radio-group>
</el-form-item>

<el-form-item label="表单字段宽度">
<el-form-item :label="$t('fm.config.form.labelWidth')">
<el-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
</el-form-item>

<el-form-item label="组件尺寸">
<el-form-item :label="$t('fm.config.form.size')">
<el-radio-group v-model="data.size">
<el-radio-button label="medium">medium</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/GenerateForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export default {
if (valid) {
resolve(this.models)
} else {
reject(new Error('表单数据校验失败').message)
reject(new Error(this.$t('fm.message.validError')).message)
}
})
})
Expand Down
6 changes: 3 additions & 3 deletions src/components/Upload/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@
</label>

<div class="uplaod-action" :style="{height: miniWidth / 4 + 'px'}" v-if="!disabled">
<i class="iconfont icon-tupianyulan" title="预览" @click="handlePreviewFile(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
<i v-if="isEdit" class="iconfont icon-sync1" title="替换" @click="handleEdit(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
<i v-if="isDelete && fileList.length > min" class="iconfont icon-delete" title="删除" @click="handleRemove(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
<i class="iconfont icon-tupianyulan" :title="$t('fm.upload.preview')" @click="handlePreviewFile(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
<i v-if="isEdit" class="iconfont icon-sync1" :title="$t('fm.upload.edit')" @click="handleEdit(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
<i v-if="isDelete && fileList.length > min" class="iconfont icon-delete" :title="$t('fm.upload.delete')" @click="handleRemove(item.key)" :style="{'font-size': miniWidth/8+'px'}"></i>
</div>
</div>
</draggable>
Expand Down
Loading

0 comments on commit 3ca2068

Please sign in to comment.