更新中英文

src/components/VueFormMaking/App.vue

@@ -1,21 +1,40 @@
 <template>
   <div id="app">
     <div class="fm-header">
-      <img class="fm-logo" src="./assets/logo.png">
-      <div class="fm-title" @click="handleHome">{{ $t('header.title') }}</div>
+      <img class="fm-logo" src="./assets/logo.png" />
+      <div class="fm-title" @click="handleHome">表单设计器</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
+        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"
+      />
 
       <div class="fm-link">
-        <a target="_blank" href="http://form.xiaoyaoji.cn/pricing">{{ $t('header.pricing') }}</a>
-        <a target="_blank" href="http://docs.form.xiaoyaoji.cn">{{ $t('header.document') }}</a>
-        <a v-if="$lang == 'zh-CN'" target="_blank" href="http://docs.form.xiaoyaoji.cn/zh/other/course.html">学习课程</a>
-        <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GitHub</a>
+        <a target="_blank" href="http://form.xiaoyaoji.cn/pricing">{{
+          商业授权
+        }}</a>
+        <a target="_blank" href="http://docs.form.xiaoyaoji.cn">{{
+          使用文档
+        }}</a>
+        <a
+          v-if="$lang == 'zh-CN'"
+          target="_blank"
+          href="http://docs.form.xiaoyaoji.cn/zh/other/course.html"
+          >学习课程</a
+        >
+        <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making"
+          >GitHub</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" />
+              {{ $route.params.lang == "zh-CN" ? "简体中文" : "English"
+              }}<i class="el-icon-arrow-down el-icon--right" />
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item command="zh-CN">简体中文</el-dropdown-item>
@@ -24,8 +43,16 @@
           </el-dropdown>
         </div>
 
-        <a class="ad" href="http://form.xiaoyaoji.cn" target="_blank">{{ $t('header.advanced') }}</a>
-        <a v-if="$lang == 'zh-CN'" class="ad" href="http://www.xiaoyaoji.cn" target="_blank">小幺鸡接口工具</a>
+        <a class="ad" href="http://form.xiaoyaoji.cn" target="_blank">{{
+          高级版本
+        }}</a>
+        <a
+          v-if="$lang == 'zh-CN'"
+          class="ad"
+          href="http://www.xiaoyaoji.cn"
+          target="_blank"
+          >小幺鸡接口工具</a
+        >
       </div>
     </div>
     <div class="fm-container"><router-view /></div>
@@ -33,34 +60,36 @@
 </template>
 
 <script>
-
 export default {
-  name: 'App',
+  name: "App",
   methods: {
     handleHome() {
-      this.$router.push({ path: '/' })
+      this.$router.push({ path: "/" });
     },
 
     handleLangCommand(command) {
-      this.$router.replace({ name: this.$route.name, params: { lang: command }})
-    }
-  }
-}
+      this.$router.replace({
+        name: this.$route.name,
+        params: { lang: command },
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-.fm-header{
+.fm-header {
   height: 50px;
-  box-shadow: 0 2px 10px rgba(70,160,252, 0.6);
+  box-shadow: 0 2px 10px rgba(70, 160, 252, 0.6);
   padding: 0 10px;
-  background-image: linear-gradient(to right,#1278f6,#00b4aa);
+  background-image: linear-gradient(to right, #1278f6, #00b4aa);
   position: relative;
 
-  .fm-logo{
+  .fm-logo {
     height: 26px;
     vertical-align: middle;
   }
-  .fm-title{
+  .fm-title {
     display: inline-block;
     line-height: 50px;
     vertical-align: middle;
@@ -71,11 +100,11 @@ export default {
     margin-left: 6px;
     cursor: pointer;
   }
-  .fm-link{
+  .fm-link {
     height: 50px;
     float: right;
 
-    a{
+    a {
       color: #fff;
       text-decoration: none;
       font-size: 14px;
@@ -83,44 +112,47 @@ export default {
       font-weight: 500;
       margin-left: 15px;
 
-      &:hover{
+      &:hover {
         opacity: 0.8;
       }
 
-      &.ad{
+      &.ad {
         color: #f5dab1;
       }
     }
 
-    .action-item{
+    .action-item {
       display: inline-block;
       margin-left: 15px;
-      .el-dropdown-link{
+      .el-dropdown-link {
         cursor: pointer;
         color: #fff;
 
-        &:hover{
+        &:hover {
           opacity: 0.8;
         }
       }
 
-      &.action-item-user{
-        .el-dropdown-link{
+      &.action-item-user {
+        .el-dropdown-link {
           color: #f5dab1;
         }
       }
     }
   }
 }
-.fm-container{
+.fm-container {
   height: calc(100% - 50px);
 }
-*, :after, :before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+*,
+:after,
+:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
-html,body{
+html,
+body {
   height: 100%;
 }
 #app {

src/components/VueFormMaking/components/Container.vue

@@ -5,101 +5,172 @@
         <el-aside width="250px">
           <div class="components-list">
             <template v-if="basicFields.length">
-              <div class="widget-cate">{{ $t('fm.components.basic.title') }}</div>
+              <div class="widget-cate">基础字段</div>
               <draggable
                 tag="ul"
                 :list="basicComponents"
-                v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
+                v-bind="{
+                  group: { name: 'people', pull: 'clone', put: false },
+                  sort: false,
+                  ghostClass: 'ghost',
+                }"
                 :move="handleMove"
                 @end="handleMoveEnd"
                 @start="handleMoveStart"
               >
                 <template v-for="(item, index) in basicComponents">
-                  <li v-if="basicFields.indexOf(item.type)>=0" :key="index" class="form-edit-widget-label" :class="{'no-put': item.type == 'divider'}">
+                  <li
+                    v-if="basicFields.indexOf(item.type) >= 0"
+                    :key="index"
+                    class="form-edit-widget-label"
+                    :class="{ 'no-put': item.type == 'divider' }"
+                  >
                     <a>
                       <i class="icon iconfont" :class="item.icon" />
                       <span>{{ item.name }}</span>
                     </a>
                   </li>
                 </template>
-
               </draggable>
             </template>
 
             <template v-if="advanceFields.length">
-              <div class="widget-cate">{{ $t('fm.components.advance.title') }}</div>
+              <div class="widget-cate">高级字段</div>
               <draggable
                 tag="ul"
                 :list="advanceComponents"
-                v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
+                v-bind="{
+                  group: { name: 'people', pull: 'clone', put: false },
+                  sort: false,
+                  ghostClass: 'ghost',
+                }"
                 :move="handleMove"
                 @end="handleMoveEnd"
                 @start="handleMoveStart"
               >
                 <template v-for="(item, index) in advanceComponents">
-                  <li v-if="advanceFields.indexOf(item.type) >= 0" :key="index" class="form-edit-widget-label" :class="{'no-put': item.type == 'table'}">
+                  <li
+                    v-if="advanceFields.indexOf(item.type) >= 0"
+                    :key="index"
+                    class="form-edit-widget-label"
+                    :class="{ 'no-put': item.type == 'table' }"
+                  >
                     <a>
                       <i class="icon iconfont" :class="item.icon" />
                       <span>{{ item.name }}</span>
                     </a>
                   </li>
                 </template>
-
               </draggable>
             </template>
 
             <template v-if="layoutFields.length">
-              <div class="widget-cate">{{ $t('fm.components.layout.title') }}</div>
+              <div class="widget-cate">布局字段</div>
               <draggable
                 tag="ul"
                 :list="layoutComponents"
-                v-bind="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
+                v-bind="{
+                  group: { name: 'people', pull: 'clone', put: false },
+                  sort: false,
+                  ghostClass: 'ghost',
+                }"
                 :move="handleMove"
                 @end="handleMoveEnd"
                 @start="handleMoveStart"
               >
                 <template v-for="(item, index) in layoutComponents">
-                  <li v-if="layoutFields.indexOf(item.type) >=0" :key="index" class="form-edit-widget-label no-put">
+                  <li
+                    v-if="layoutFields.indexOf(item.type) >= 0"
+                    :key="index"
+                    class="form-edit-widget-label no-put"
+                  >
                     <a>
                       <i class="icon iconfont" :class="item.icon" />
                       <span>{{ item.name }}</span>
                     </a>
                   </li>
                 </template>
-
               </draggable>
             </template>
-
           </div>
-
         </el-aside>
         <el-container class="center-container" direction="vertical">
-          <el-header class="btn-bar" style="height: 45px;">
+          <el-header class="btn-bar" style="height: 45px">
             <slot name="action" />
-            <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-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-header>
-          <el-main :class="{'widget-empty': widgetForm.list.length == 0}">
-
-            <widget-form v-if="!resetJson" ref="widgetForm" :data="widgetForm" :select.sync="widgetFormSelect" />
+          <el-main :class="{ 'widget-empty': widgetForm.list.length == 0 }">
+            <widget-form
+              v-if="!resetJson"
+              ref="widgetForm"
+              :data="widgetForm"
+              :select.sync="widgetFormSelect"
+            />
           </el-main>
         </el-container>
 
-        <el-aside class="widget-config-container" style="width: 305px;">
+        <el-aside class="widget-config-container" style="width: 305px">
           <el-container>
             <el-header height="45px">
-              <div class="config-tab" style="width: 100%;" :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> -->
+              <div
+                class="config-tab"
+                style="width: 100%"
+                :class="{ active: configTab == 'widget' }"
+                @click="handleConfigSelect('widget')"
+              >
+                字段属性
+              </div>
+              <!-- <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性</div> -->
             </el-header>
             <el-main class="config-content">
-              <widget-config v-if="widgetFormSelect!==null" v-show="configTab=='widget'" :form="widgetForm" :data="widgetFormSelect" />
+              <widget-config
+                v-if="widgetFormSelect !== null"
+                v-show="configTab == 'widget'"
+                :form="widgetForm"
+                :data="widgetFormSelect"
+              />
               <!-- <form-config v-show="configTab=='form'" :data="widgetForm.config" /> -->
             </el-main>
           </el-container>
-
         </el-aside>
 
         <cus-dialog
@@ -118,16 +189,25 @@
             :remote="remoteFuncs"
             @on-change="handleDataChange"
           >
-
             <template slot-scope="scope">
-              Width <el-input v-model="scope.model.blank.width" style="width: 100px" />
-              Height <el-input v-model="scope.model.blank.height" style="width: 100px" />
+              Width
+              <el-input
+                v-model="scope.model.blank.width"
+                style="width: 100px"
+              />
+              Height
+              <el-input
+                v-model="scope.model.blank.height"
+                style="width: 100px"
+              />
             </template>
           </generate-form>
 
           <template slot="action">
-            <el-button type="primary" @click="handleTest">{{ $t('fm.actions.getData') }}</el-button>
-            <el-button @click="handleReset">{{ $t('fm.actions.reset') }}</el-button>
+            <el-button type="primary" @click="handleTest">{{
+              "获取数据"
+            }}</el-button>
+            <el-button @click="handleReset">{{ "重置" }}</el-button>
           </template>
         </cus-dialog>
 
@@ -139,8 +219,10 @@
           @on-close="uploadVisible = false"
           @on-submit="handleUploadJson"
         >
-          <el-alert type="info" :title="$t('fm.description.uploadJsonInfo')" />
-          <div id="uploadeditor" style="height: 400px;width: 100%;">{{ jsonEg }}</div>
+          <el-alert type="info" :title="t('fm.description.uploadJsonInfo')" />
+          <div id="uploadeditor" style="height: 400px; width: 100%">
+            {{ jsonEg }}
+          </div>
         </cus-dialog>
 
         <cus-dialog
@@ -150,11 +232,17 @@
           form
           @on-close="jsonVisible = false"
         >
-
-          <div id="jsoneditor" style="height: 400px;width: 100%;">{{ jsonTemplate }}</div>
+          <div id="jsoneditor" style="height: 400px; width: 100%">
+            {{ jsonTemplate }}
+          </div>
 
           <template slot="action">
-            <el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">{{ $t('fm.actions.copyData') }}</el-button>
+            <el-button
+              type="primary"
+              class="json-btn"
+              :data-clipboard-text="jsonCopyValue"
+              >复制数据</el-button
+            >
           </template>
         </cus-dialog>
 
@@ -166,77 +254,98 @@
           :action="false"
           @on-close="codeVisible = false"
         >
-          <div id="codeeditor" style="height: 500px; width: 100%;">{{ htmlTemplate }}</div>
+          <div id="codeeditor" style="height: 500px; width: 100%">
+            {{ htmlTemplate }}
+          </div>
         </cus-dialog>
       </el-container>
     </el-main>
     <!-- <el-footer height="30px" style="font-weight: 600;">Powered by <a target="_blank" href="http://www.fdevops.com">fdevops</a></el-footer> -->
   </el-container>
-
 </template>
 
 <script>
-import Draggable from 'vuedraggable'
-import WidgetConfig from './WidgetConfig'
+import Draggable from "vuedraggable";
+import WidgetConfig from "./WidgetConfig";
 // import FormConfig from './FormConfig'
-import WidgetForm from './WidgetForm'
-import CusDialog from './CusDialog'
-import GenerateForm from './GenerateForm'
-import Clipboard from 'clipboard'
-import { basicComponents, layoutComponents, advanceComponents } from './componentsConfig.js'
-import request from '../util/request.js'
-import generateCode from './generateCode.js'
-
-var ace = require('ace-builds/src-noconflict/ace')
-ace.config.set('basePath', '/lib/ace')
-ace.config.set('modePath', '/lib/ace')
-ace.config.set('themePath', '/lib/ace')
-window.define = window.define || ace.define
-window.require = window.require || ace.require
+import WidgetForm from "./WidgetForm";
+import CusDialog from "./CusDialog";
+import GenerateForm from "./GenerateForm";
+import Clipboard from "clipboard";
+import {
+  basicComponents,
+  layoutComponents,
+  advanceComponents,
+} from "./componentsConfig.js";
+import request from "../util/request.js";
+import generateCode from "./generateCode.js";
 
+var ace = require("ace-builds/src-noconflict/ace");
+ace.config.set("basePath", "/lib/ace");
+ace.config.set("modePath", "/lib/ace");
+ace.config.set("themePath", "/lib/ace");
+window.define = window.define || ace.define;
+window.require = window.require || ace.require;
+import zhCN from "../lang/zh-CN";
 export default {
-  name: 'FmMakingForm',
+  name: "FmMakingForm",
   components: {
     Draggable,
     WidgetConfig,
     // FormConfig,
     WidgetForm,
     CusDialog,
-    GenerateForm
+    GenerateForm,
   },
   props: {
     preview: {
       type: Boolean,
-      default: false
+      default: false,
     },
     generateCode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     generateJson: {
       type: Boolean,
-      default: false
+      default: false,
     },
     upload: {
       type: Boolean,
-      default: false
+      default: false,
     },
     clearable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     basicFields: {
       type: Array,
-      default: () => ['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text', 'organ', 'school']
+      default: () => [
+        "input",
+        "textarea",
+        "number",
+        "radio",
+        "checkbox",
+        "time",
+        "date",
+        "rate",
+        "color",
+        "select",
+        "switch",
+        "slider",
+        "text",
+        "organ",
+        "school",
+      ],
     },
     advanceFields: {
       type: Array,
-      default: () => ['blank', 'imgupload', 'editor', 'cascader']
+      default: () => ["blank", "imgupload", "editor", "cascader"],
     },
     layoutFields: {
       type: Array,
-      default: () => ['grid', 'divider']
-    }
+      default: () => ["grid", "divider"],
+    },
   },
   data() {
     return {
@@ -248,11 +357,11 @@ export default {
         list: [],
         config: {
           labelWidth: 100,
-          labelPosition: 'right',
-          size: 'small'
-        }
+          labelPosition: "right",
+          size: "small",
+        },
       },
-      configTab: 'widget',
+      configTab: "widget",
       widgetFormSelect: null,
       previewVisible: false,
       jsonVisible: false,
@@ -262,28 +371,29 @@ export default {
         func_test(resolve) {
           setTimeout(() => {
             const options = [
-              { id: '1', name: '1111' },
-              { id: '2', name: '2222' },
-              { id: '3', name: '3333' }
-            ]
+              { id: "1", name: "1111" },
+              { id: "2", name: "2222" },
+              { id: "3", name: "3333" },
+            ];
 
-            resolve(options)
-          }, 2000)
+            resolve(options);
+          }, 2000);
         },
         funcGetToken(resolve) {
-          request.get('http://tools-server.xiaoyaoji.cn/api/uptoken').then(res => {
-            resolve(res.uptoken)
-          })
+          request
+            .get("http://tools-server.xiaoyaoji.cn/api/uptoken")
+            .then((res) => {
+              resolve(res.uptoken);
+            });
         },
-        upload_callback(response, file, fileList) {
-        }
+        upload_callback(response, file, fileList) {},
       },
       widgetModels: {},
-      blank: '',
-      htmlTemplate: '',
-      jsonTemplate: '',
+      blank: "",
+      htmlTemplate: "",
+      jsonTemplate: "",
       uploadEditor: null,
-      jsonCopyValue: '',
+      jsonCopyValue: "",
       jsonClipboard: null,
       jsonEg: `{
   "list": [],
@@ -292,105 +402,113 @@ export default {
     "labelPosition": "top",
     "size": "small"
   }
-}`
-    }
+}`,
+    };
   },
   watch: {
     widgetForm: {
       deep: true,
-      handler: function(val) {
-      }
+      handler: function (val) {},
+    },
+    $lang: function (val) {
+      this._loadComponents();
     },
-    '$lang': function(val) {
-      this._loadComponents()
-    }
   },
   mounted() {
-    this._loadComponents()
+    this._loadComponents();
   },
   methods: {
+    t(str) {
+      const fields = str.split(".");
+      let tempStr = { ...zhCN };
+      fields.forEach((i) => {
+        tempStr = tempStr[i];
+      });
+      return tempStr;
+    },
     _loadComponents() {
-      this.basicComponents = this.basicComponents.map(item => {
+      this.basicComponents = this.basicComponents.map((item) => {
         return {
           ...item,
-          name: this.$t(`fm.components.fields.${item.type}`)
-        }
-      })
-      this.advanceComponents = this.advanceComponents.map(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 => {
+          name: this.t(`fm.components.fields.${item.type}`),
+        };
+      });
+      this.layoutComponents = this.layoutComponents.map((item) => {
         return {
           ...item,
-          name: this.$t(`fm.components.fields.${item.type}`)
-        }
-      })
+          name: this.t(`fm.components.fields.${item.type}`),
+        };
+      });
     },
     handleConfigSelect(value) {
-      this.configTab = value
-    },
-    handleMoveEnd(evt) {
-    },
-    handleMoveStart({ oldIndex }) {
+      this.configTab = value;
     },
+    handleMoveEnd(evt) {},
+    handleMoveStart({ oldIndex }) {},
     handleMove() {
-      return true
+      return true;
     },
     handlePreview() {
-      this.previewVisible = true
+      this.previewVisible = true;
     },
     handleTest() {
-      this.$refs.generateForm.getData().then(data => {
-        this.$alert(data, '').catch(e => {})
-        this.$refs.widgetPreview.end()
-      }).catch(e => {
-        this.$refs.widgetPreview.end()
-      })
+      this.$refs.generateForm
+        .getData()
+        .then((data) => {
+          this.$alert(data, "").catch((e) => {});
+          this.$refs.widgetPreview.end();
+        })
+        .catch((e) => {
+          this.$refs.widgetPreview.end();
+        });
     },
     handleReset() {
-      this.$refs.generateForm.reset()
+      this.$refs.generateForm.reset();
     },
     handleGenerateJson() {
-      this.jsonVisible = true
-      this.jsonTemplate = this.widgetForm
+      this.jsonVisible = true;
+      this.jsonTemplate = this.widgetForm;
       this.$nextTick(() => {
-        const editor = ace.edit('jsoneditor')
-        editor.session.setMode('ace/mode/json')
+        const editor = ace.edit("jsoneditor");
+        editor.session.setMode("ace/mode/json");
 
         if (!this.jsonClipboard) {
-          this.jsonClipboard = new Clipboard('.json-btn')
-          this.jsonClipboard.on('success', (e) => {
-            this.$message.success(this.$t('fm.message.copySuccess'))
-          })
+          this.jsonClipboard = new Clipboard(".json-btn");
+          this.jsonClipboard.on("success", (e) => {
+            this.$message.success(this.t("fm.message.copySuccess"));
+          });
         }
-        this.jsonCopyValue = JSON.stringify(this.widgetForm)
-      })
+        this.jsonCopyValue = JSON.stringify(this.widgetForm);
+      });
     },
     handleGenerateCode() {
-      this.codeVisible = true
-      this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm))
+      this.codeVisible = true;
+      this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm));
       this.$nextTick(() => {
-        const editor = ace.edit('codeeditor')
-        editor.session.setMode('ace/mode/html')
-      })
+        const editor = ace.edit("codeeditor");
+        editor.session.setMode("ace/mode/html");
+      });
     },
     handleUpload() {
-      this.uploadVisible = true
+      this.uploadVisible = true;
       this.$nextTick(() => {
-        this.uploadEditor = ace.edit('uploadeditor')
-        this.uploadEditor.session.setMode('ace/mode/json')
-      })
+        this.uploadEditor = ace.edit("uploadeditor");
+        this.uploadEditor.session.setMode("ace/mode/json");
+      });
     },
     handleUploadJson() {
       try {
-        this.setJSON(JSON.parse(this.uploadEditor.getValue()))
-        this.uploadVisible = false
+        this.setJSON(JSON.parse(this.uploadEditor.getValue()));
+        this.uploadVisible = false;
       } catch (e) {
-        this.$message.error(e.message)
-        this.$refs.uploadJson.end()
+        this.$message.error(e.message);
+        this.$refs.uploadJson.end();
       }
     },
     handleClear() {
@@ -398,38 +516,37 @@ export default {
         list: [],
         config: {
           labelWidth: 100,
-          labelPosition: 'right',
-          size: 'small',
-          customClass: ''
-        }
-      }
+          labelPosition: "right",
+          size: "small",
+          customClass: "",
+        },
+      };
 
-      this.widgetFormSelect = {}
+      this.widgetFormSelect = {};
     },
     getJSON() {
-      return this.widgetForm
+      return this.widgetForm;
     },
     getHtml() {
-      return generateCode(JSON.stringify(this.widgetForm))
+      return generateCode(JSON.stringify(this.widgetForm));
     },
     setJSON(json) {
-      this.widgetForm = json
+      this.widgetForm = json;
 
       if (json.list.length > 0) {
-        this.widgetFormSelect = json.list[0]
+        this.widgetFormSelect = json.list[0];
       }
     },
     handleInput(val) {
-      this.blank = val
+      this.blank = val;
     },
-    handleDataChange(field, value, data) {
-    }
-  }
-}
+    handleDataChange(field, value, data) {},
+  },
+};
 </script>
 
 <style lang="scss">
-.widget-empty{
+.widget-empty {
   background-position: 50%;
 }
 

src/components/VueFormMaking/components/CusDialog.vue

@@ -22,8 +22,8 @@
       :element-loading-text="loadingText"
     >
       <slot name="action">
-        <el-button @click="close">{{ $t('fm.actions.cancel') }}</el-button>
-        <el-button type="primary" @click="submit">{{ $t('fm.actions.confirm') }}</el-button>
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
       </slot>
     </span>
   </el-dialog>
@@ -35,89 +35,88 @@ export default {
     visible: Boolean,
     loadingText: {
       type: String,
-      default: ''
+      default: "",
     },
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     width: {
       type: String,
-      default: '600px'
+      default: "600px",
     },
     form: {
       type: Boolean,
-      default: true
+      default: true,
     },
     action: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
       loading: false,
       dialogVisible: this.visible,
-      id: 'dialog_' + new Date().getTime(),
-      showForm: false
-    }
+      id: "dialog_" + new Date().getTime(),
+      showForm: false,
+    };
   },
   computed: {
     show() {
       if (this.form) {
-        return this.showForm
+        return this.showForm;
       } else {
-        return true
+        return true;
       }
-    }
+    },
   },
   watch: {
     dialogVisible(val) {
       if (!val) {
-        this.loading = false
-        this.$emit('on-close')
+        this.loading = false;
+        this.$emit("on-close");
         setTimeout(() => {
-          this.showForm = false
-        }, 300)
+          this.showForm = false;
+        }, 300);
       } else {
-        this.showForm = true
+        this.showForm = true;
       }
     },
     visible(val) {
-      this.dialogVisible = val
-    }
-  },
-  mounted() {
+      this.dialogVisible = val;
+    },
   },
+  mounted() {},
   methods: {
     close() {
-      this.dialogVisible = false
+      this.dialogVisible = false;
     },
     submit() {
-      this.loading = true
+      this.loading = true;
 
-      this.$emit('on-submit')
+      this.$emit("on-submit");
     },
     end() {
-      this.loading = false
-    }
-  }
-}
+      this.loading = false;
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-.cus-dialog-container{
-  .el-dialog__footer{
+.cus-dialog-container {
+  .el-dialog__footer {
     margin: 0 20px;
     // border-top: 1px dashed #ccc;
     padding: 15px 0 16px;
     text-align: center;
     position: relative;
 
-    .dialog-footer{
+    .dialog-footer {
       display: block;
 
-      .circular{
+      .circular {
         display: inline-block;
         vertical-align: middle;
         margin-right: 5px;
@@ -125,12 +124,12 @@ export default {
         height: 24px;
       }
 
-      .el-loading-text{
+      .el-loading-text {
         display: inline-block;
         vertical-align: middle;
       }
 
-      .el-loading-spinner{
+      .el-loading-spinner {
         margin-top: -12px;
       }
     }

src/components/VueFormMaking/components/FormConfig.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="form-config-container">
     <el-form label-position="top">
-      <el-form-item :label="$t('fm.config.form.labelPosition.title')">
+      <el-form-item :label="'标签对齐方式'">
         <el-radio-group v-model="data.labelPosition">
-          <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-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+          <el-radio-button label="top">顶部对齐</el-radio-button>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item :label="$t('fm.config.form.labelWidth')">
-        <el-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10" />
+      <el-form-item label="表单标签宽度">
+        <el-input-number
+          v-model="data.labelWidth"
+          :min="0"
+          :max="200"
+          :step="10"
+        />
       </el-form-item>
 
-      <el-form-item :label="$t('fm.config.form.size')">
+      <el-form-item :label="'组件尺寸'">
         <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>
@@ -27,6 +32,6 @@
 <script>
 export default {
   /* eslint-disable */
-    props: ['data']
-  }
+  props: ["data"],
+};
 </script>

src/components/VueFormMaking/components/GenerateForm.vue

@@ -72,7 +72,7 @@
               <el-table-column v-if="!preview" fixed width="50">
                 <template slot="header">
                   <i
-                    style="font-size: 25px; color: #409EFF;cursor:pointer;"
+                    style="font-size: 25px; color: #409eff; cursor: pointer"
                     class="el-icon-circle-plus"
                     @click="addSubformCol(item)"
                   />
@@ -150,7 +150,7 @@ import { getOrganCooperation } from "@/api/process/work-order";
 export default {
   name: "FmGenerateForm",
   components: {
-    GenetateFormItem
+    GenetateFormItem,
   },
   /* eslint-disable */
   props: [
@@ -160,7 +160,7 @@ export default {
     "insite",
     "disabled",
     "preview",
-    "organList"
+    "organList",
   ],
   data() {
     return {
@@ -174,7 +174,7 @@ export default {
       subformFields: {},
       itemOrganList: [],
       selectOrganId: [],
-      cooperationList: [] // 合作单位列表
+      cooperationList: [], // 合作单位列表
     };
   },
   watch: {
@@ -182,13 +182,13 @@ export default {
       deep: true,
       handler(val) {
         this.generateModle(val.list);
-      }
+      },
     },
     value: {
       deep: true,
       handler(val) {
         this.models = { ...this.models, ...val };
-      }
+      },
     },
     fileCheck: {
       deep: true,
@@ -199,8 +199,8 @@ export default {
         // } else {
         //   this.rules = JSON.parse(JSON.stringify(this.rules));
         // }
-      }
-    }
+      },
+    },
   },
   created() {
     this.itemOrganList = this.organList;
@@ -227,7 +227,7 @@ export default {
       const values = this.models[ids.model];
       let relationArray = [];
       ids.options &&
-        ids.options.options.forEach(item => {
+        ids.options.options.forEach((item) => {
           if (values == item.value) {
             let tempRelation = item.relationOptions || [];
             relationArray.push(...tempRelation);
@@ -242,22 +242,22 @@ export default {
   },
   methods: {
     changeFormRulesRequired() {
-      const rules = this.rules || []
-      for(let rule in rules) {
+      const rules = this.rules || [];
+      for (let rule in rules) {
         // 判断是否是子表单
-        if(rule.indexOf('subform') >= 0 && rule) {
+        if (rule.indexOf("subform") >= 0 && rule) {
           // 子表单有多个
-          rules[rule].forEach(subItem => {
-            for(let sub in subItem) {
-              subItem[sub].forEach(last => {
-                last['required'] = false
+          rules[rule].forEach((subItem) => {
+            for (let sub in subItem) {
+              subItem[sub].forEach((last) => {
+                last["required"] = false;
               });
             }
-          })
+          });
         }
       }
-      this.rules = rules
-      this.$forceUpdate()
+      this.rules = rules;
+      this.$forceUpdate();
     },
     addSubformCol(item) {
       var subformFields = {};
@@ -282,16 +282,16 @@ export default {
             this.rules[item.model][this.models[item.model].length] = {};
           }
           this.rules[item.model][this.models[item.model].length][l.model] = [
-            ...l.rules.map(item => {
+            ...l.rules.map((item) => {
               if (item.pattern) {
                 return { ...item, pattern: eval(item.pattern) };
               } else {
-                if(this.fileCheck) {
-                  item.required = false
+                if (this.fileCheck) {
+                  item.required = false;
                 }
                 return { ...item };
               }
-            })
+            }),
           ];
         }
       }
@@ -306,16 +306,16 @@ export default {
       let tempList = tpls || [];
       let status = false;
       let relationId = "";
-      tempList.forEach(list => {
+      tempList.forEach((list) => {
         if (list.type == "select" && list.options.relationStatus) {
           status = true;
           relationId = list;
         }
         if (list.type == "subform") {
           let childList = list.columns || [];
-          childList.forEach(child => {
+          childList.forEach((child) => {
             let childList = child.list || [];
-            childList.forEach(c => {
+            childList.forEach((c) => {
               if (c.type == "select" && list.options.relationStatus) {
                 status = true;
                 relationId = list;
@@ -334,7 +334,7 @@ export default {
       // false 为显示，true 为隐藏
       let temp = value || [];
       let tempData = JSON.parse(JSON.stringify(this.templateData));
-      tempData.forEach(item => {
+      tempData.forEach((item) => {
         if (this.formStatus) {
           if (
             item.type != "text" &&
@@ -353,30 +353,30 @@ export default {
         }
         // 子表单  不支持子表单，根据不同的类型显示不同
         if (item.type == "subform") {
-          let childList = item.columns || []
-          childList.forEach(child => {
-              if (child.list.length > 0) {
-                child.list.forEach(c => {
-                  // c.hidden = true
-                  if (this.formStatus) {
-                    if (
-                      c.type != "text" &&
-                      c.type != "subform" &&
-                      !c.options.relationStatus
-                    ) {
-                      c.hidden = true;
-                    } else {
-                      c.hidden = false;
-                    }
-                    if (temp.includes(c.model)) {
-                      c.hidden = false;
-                    }
+          let childList = item.columns || [];
+          childList.forEach((child) => {
+            if (child.list.length > 0) {
+              child.list.forEach((c) => {
+                // c.hidden = true
+                if (this.formStatus) {
+                  if (
+                    c.type != "text" &&
+                    c.type != "subform" &&
+                    !c.options.relationStatus
+                  ) {
+                    c.hidden = true;
                   } else {
                     c.hidden = false;
                   }
-                });
-              }
-            });
+                  if (temp.includes(c.model)) {
+                    c.hidden = false;
+                  }
+                } else {
+                  c.hidden = false;
+                }
+              });
+            }
+          });
           // 重置数据
           // let subForm = this.$refs.subform;
           // subForm &&
@@ -384,9 +384,9 @@ export default {
           //     item.reSetFormData();
           //   });
           let subFormStatus = true;
-          childList.forEach(child => {
+          childList.forEach((child) => {
             if (child.list.length > 0) {
-              child.list.forEach(c => {
+              child.list.forEach((c) => {
                 if (!c.hidden) {
                   subFormStatus = false;
                 }
@@ -406,7 +406,7 @@ export default {
     generateModle(genList) {
       for (let i = 0; i < genList.length; i++) {
         if (genList[i].type === "grid") {
-          genList[i].columns.forEach(item => {
+          genList[i].columns.forEach((item) => {
             this.generateModle(item.list);
           });
         } else {
@@ -438,23 +438,23 @@ export default {
             if (this.rules[genList[i].model]) {
               this.rules[genList[i].model] = [
                 ...this.rules[genList[i].model],
-                ...genList[i].rules.map(item => {
+                ...genList[i].rules.map((item) => {
                   if (item.pattern) {
                     return { ...item, pattern: eval(item.pattern) };
                   } else {
                     return { ...item };
                   }
-                })
+                }),
               ];
             } else {
               this.rules[genList[i].model] = [
-                ...genList[i].rules.map(item => {
+                ...genList[i].rules.map((item) => {
                   if (item.pattern) {
                     return { ...item, pattern: eval(item.pattern) };
                   } else {
                     return { ...item };
                   }
-                })
+                }),
               ];
             }
           }
@@ -463,11 +463,11 @@ export default {
     },
     getData() {
       return new Promise((resolve, reject) => {
-        this.$refs.generateForm.validate(valid => {
+        this.$refs.generateForm.validate((valid) => {
           if (valid) {
             resolve(this.models);
           } else {
-            reject(new Error(this.$t("fm.message.validError")).message);
+            reject(new Error("表单数据校验失败").message);
           }
         });
       });
@@ -482,8 +482,8 @@ export default {
       let res = await getOrganCooperation({ organId: value });
       this.cooperationList.push(...res.data);
     },
-    refresh() {}
-  }
+    refresh() {},
+  },
 };
 </script>
 

src/components/VueFormMaking/components/Upload/index.vue

@@ -14,7 +14,7 @@
         :class="{
           uploading: item.status == 'uploading',
           'is-success': item.status == 'success',
-          'is-diabled': disabled
+          'is-diabled': disabled,
         }"
         class="upload-file"
       >
@@ -39,20 +39,20 @@
         >
           <i
             class="iconfont icon-tupianyulan"
-            :title="$t('fm.upload.preview')"
+            :title="'预览'"
             :style="{ 'font-size': miniWidth / 8 + 'px' }"
             @click="handlePreviewFile(item.key)"
           />
           <!-- <i
             v-if="isEdit"
             class="iconfont icon-sync1"
-            :title="$t('fm.upload.edit')"
+            :title="'替换'"
             :style="{ 'font-size': miniWidth / 8 + 'px' }"
             @click="handleEdit(item.key)"
           /> -->
           <i
             class="iconfont icon-delete"
-            :title="$t('fm.upload.delete')"
+            :title="'删除'"
             :style="{ 'font-size': miniWidth / 8 + 'px' }"
             @click="handleRemove(item.key)"
           />
@@ -82,7 +82,7 @@
           :style="{
             fontSize: miniWidth / 4 + 'px',
             marginTop: -miniWidth / 8 + 'px',
-            marginLeft: -miniWidth / 8 + 'px'
+            marginLeft: -miniWidth / 8 + 'px',
           }"
         ></i>
       </el-upload>
@@ -131,80 +131,80 @@ import VueI18n from "vue-i18n";
 Vue.use(VueI18n);
 export default {
   components: {
-    Draggable
+    Draggable,
   },
   props: {
     value: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     width: {
       type: Number,
-      default: 100
+      default: 100,
     },
     height: {
       type: Number,
-      default: 100
+      default: 100,
     },
     token: {
       type: String,
-      default: ""
+      default: "",
     },
     domain: {
       type: String,
-      default: ""
+      default: "",
     },
     multiple: {
       type: Boolean,
-      default: false
+      default: false,
     },
     length: {
       type: Number,
-      default: 9
+      default: 9,
     },
     isQiniu: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isDelete: {
       type: Boolean,
-      default: true
+      default: true,
     },
     min: {
       type: Number,
-      default: 0
+      default: 0,
     },
     meitu: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isEdit: {
       type: Boolean,
-      default: false
+      default: false,
     },
     action: {
       type: String,
-      default: ""
+      default: "",
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     preview: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-      fileList: this.value.map(item => {
+      fileList: this.value.map((item) => {
         return {
           key: item.key
             ? item.key
             : new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
           url: item.url,
           percent: item.percent ? item.percent : 100,
-          status: item.status ? item.status : "success"
+          status: item.status ? item.status : "success",
         };
       }),
       viewer: null,
@@ -218,8 +218,8 @@ export default {
         key: "",
         KSSAccessKeyId: "",
         acl: "public-read",
-        name: ""
-      }
+        name: "",
+      },
     };
   },
   computed: {
@@ -229,15 +229,15 @@ export default {
       } else {
         return this.width;
       }
-    }
+    },
   },
   watch: {
     fileList: {
       deep: true,
       handler(val) {
         // this.$emit('input', this.fileList)
-      }
-    }
+      },
+    },
   },
   mounted() {
     this.$emit("input", this.fileList);
@@ -262,8 +262,8 @@ export default {
             filename,
             acl: "public-read",
             key,
-            unknowValueField: []
-          }
+            unknowValueField: [],
+          },
         };
 
         const res = await policy(obj);
@@ -273,7 +273,7 @@ export default {
           key,
           KSSAccessKeyId: res.data.kssAccessKeyId,
           acl: "public-read",
-          name: filename
+          name: filename,
         };
 
         return isLt2M;
@@ -287,7 +287,7 @@ export default {
         uid: file.uid,
         name: file.name,
         url,
-        percent: 100
+        percent: 100,
       });
     },
     handleChange() {
@@ -305,7 +305,7 @@ export default {
               key,
               url: reader.result,
               percent: 0,
-              status: "uploading"
+              status: "uploading",
             });
 
             this.editIndex = -1;
@@ -314,7 +314,7 @@ export default {
               key,
               url: reader.result,
               percent: 0,
-              status: "uploading"
+              status: "uploading",
             });
           }
 
@@ -341,8 +341,8 @@ export default {
             filename,
             acl: "public-read",
             key,
-            unknowValueField: []
-          }
+            unknowValueField: [],
+          },
         };
         const res = await policy(obj);
         this.dataObj = {
@@ -351,11 +351,11 @@ export default {
           key,
           KSSAccessKeyId: res.data.kssAccessKeyId,
           acl: "public-read",
-          name: filename
+          name: filename,
         };
       } catch {}
       // eslint-disable-next-line no-unused-vars
-      const changeIndex = this.fileList.findIndex(item => item.key === key);
+      const changeIndex = this.fileList.findIndex((item) => item.key === key);
       const xhr = new XMLHttpRequest();
 
       const url = this.ossUploadUrl;
@@ -394,24 +394,24 @@ export default {
           if (resData && uploadUrl) {
             this.$set(
               this.fileList,
-              this.fileList.findIndex(item => item.key === key),
+              this.fileList.findIndex((item) => item.key === key),
               {
                 ...this.fileList[
-                  this.fileList.findIndex(item => item.key === key)
+                  this.fileList.findIndex((item) => item.key === key)
                 ],
                 url: uploadUrl,
-                percent: 100
+                percent: 100,
               }
             );
             setTimeout(() => {
               this.$set(
                 this.fileList,
-                this.fileList.findIndex(item => item.key === key),
+                this.fileList.findIndex((item) => item.key === key),
                 {
                   ...this.fileList[
-                    this.fileList.findIndex(item => item.key === key)
+                    this.fileList.findIndex((item) => item.key === key)
                   ],
-                  status: "success"
+                  status: "success",
                 }
               );
               this.$emit("input", this.fileList);
@@ -419,25 +419,25 @@ export default {
           } else {
             this.$set(
               this.fileList,
-              this.fileList.findIndex(item => item.key === key),
+              this.fileList.findIndex((item) => item.key === key),
               {
                 ...this.fileList[
-                  this.fileList.findIndex(item => item.key === key)
+                  this.fileList.findIndex((item) => item.key === key)
                 ],
-                status: "error"
+                status: "error",
               }
             );
             this.fileList.splice(
-              this.fileList.findIndex(item => item.key === key),
+              this.fileList.findIndex((item) => item.key === key),
               1
             );
           }
         }
       };
-      xhr.onprogress = res => {
+      xhr.onprogress = (res) => {
         if (res.total && res.loaded) {
           this.$set(
-            this.fileList[this.fileList.findIndex(item => item.key === key)],
+            this.fileList[this.fileList.findIndex((item) => item.key === key)],
             "percent",
             (res.loaded / res.total) * 100
           );
@@ -452,17 +452,19 @@ export default {
         this.token,
         {
           fname: key,
-          mimeType: []
+          mimeType: [],
         },
         {
           useCdnDomain: true,
-          region: qiniu.region.z2
+          region: qiniu.region.z2,
         }
       );
       observable.subscribe({
         next(res) {
           _this.$set(
-            _this.fileList[_this.fileList.findIndex(item => item.key === key)],
+            _this.fileList[
+              _this.fileList.findIndex((item) => item.key === key)
+            ],
             "percent",
             parseInt(res.total.percent)
           );
@@ -471,62 +473,62 @@ export default {
         error(err) {
           _this.$set(
             _this.fileList,
-            _this.fileList.findIndex(item => item.key === key),
+            _this.fileList.findIndex((item) => item.key === key),
             {
               ..._this.fileList[
-                _this.fileList.findIndex(item => item.key === key)
+                _this.fileList.findIndex((item) => item.key === key)
               ],
-              status: "error"
+              status: "error",
             }
           );
           _this.fileList.splice(
-            _this.fileList.findIndex(item => item.key === key),
+            _this.fileList.findIndex((item) => item.key === key),
             1
           );
         },
         complete(res) {
           _this.$set(
             _this.fileList,
-            _this.fileList.findIndex(item => item.key === key),
+            _this.fileList.findIndex((item) => item.key === key),
             {
               ..._this.fileList[
-                _this.fileList.findIndex(item => item.key === key)
+                _this.fileList.findIndex((item) => item.key === key)
               ],
               url: _this.domain + res.key,
-              percent: 100
+              percent: 100,
             }
           );
           setTimeout(() => {
             _this.$set(
               _this.fileList,
-              _this.fileList.findIndex(item => item.key === key),
+              _this.fileList.findIndex((item) => item.key === key),
               {
                 ..._this.fileList[
-                  _this.fileList.findIndex(item => item.key === key)
+                  _this.fileList.findIndex((item) => item.key === key)
                 ],
-                status: "success"
+                status: "success",
               }
             );
             _this.$emit("input", _this.fileList);
           }, 200);
-        }
+        },
       });
     },
     handleRemove(key) {
       this.fileList.splice(
-        this.fileList.findIndex(item => item.key === key),
+        this.fileList.findIndex((item) => item.key === key),
         1
       );
     },
     handleEdit(key) {
-      this.editIndex = this.fileList.findIndex(item => item.key === key);
+      this.editIndex = this.fileList.findIndex((item) => item.key === key);
 
       this.$refs.uploadInput.click();
     },
     handleMeitu(key) {
       this.$emit(
         "on-meitu",
-        this.fileList.findIndex(item => item.key === key)
+        this.fileList.findIndex((item) => item.key === key)
       );
     },
     handleAdd() {
@@ -541,10 +543,10 @@ export default {
 
       this.$nextTick(() => {
         this.viewer = new Viewer(document.getElementById(this.uploadId));
-        this.viewer.view(this.fileList.findIndex(item => item.key === key));
+        this.viewer.view(this.fileList.findIndex((item) => item.key === key));
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/VueFormMaking/components/WidgetConfig.vue

@@ -4,7 +4,7 @@
       <!-- 字段标识 -->
       <el-form-item
         v-if="data.type != 'grid'"
-        :label="$t('fm.config.widget.model')"
+        :label="t('fm.config.widget.model')"
       >
         <el-input v-model="data.model" />
       </el-form-item>
@@ -16,24 +16,24 @@
           data.type != 'organ' &&
           data.type != 'school'
         "
-        :label="$t('fm.config.widget.name')"
+        :label="t('fm.config.widget.name')"
       >
         <el-input v-model="data.name" />
       </el-form-item>
 
       <el-form-item
         v-if="Object.keys(data.options).indexOf('displayRelation') >= 0"
-        :label="$t('fm.config.widget.displayRelation')"
+        :label="t('fm.config.widget.displayRelation')"
       >
         <el-input
           v-model="data.options.displayRelation"
           size="mini"
-          :placeholder="$t('fm.config.widget.displayRelationPlaceholderModel')"
+          :placeholder="t('fm.config.widget.displayRelationPlaceholderModel')"
         />
       </el-form-item>
 
       <!-- 宽度 -->
-      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('width')>=0 " :label="$t('fm.config.widget.width')">
+      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('width')>=0 " :label="t('fm.config.widget.width')">
         <el-input v-model="data.options.width" />
       </el-form-item> -->
 
@@ -44,7 +44,7 @@
           data.type!=='grid' &&
           data.type!=='subform' &&
           data.type !== 'divider'"
-        :label="$t('fm.config.widget.labelWidth')"
+        :label="t('fm.config.widget.labelWidth')"
       >
         <el-checkbox v-model="data.options.labelWidthDisabled">自定义</el-checkbox>
         <el-input-number v-model="data.options.labelWidth" :min="0" :step="10" :disabled="!data.options.labelWidthDisabled" />
@@ -61,7 +61,7 @@
       </el-form-item> -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('tip') >= 0"
-        :label="$t('fm.config.widget.tip')"
+        :label="t('fm.config.widget.tip')"
       >
         <el-input v-model="data.options.tip" />
       </el-form-item>
@@ -70,22 +70,22 @@
       <!-- 高度 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('height') >= 0"
-        :label="$t('fm.config.widget.height')"
+        :label="t('fm.config.widget.height')"
       >
         <el-input v-model="data.options.height" />
       </el-form-item>
       <!-- 大小 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('size') >= 0"
-        :label="$t('fm.config.widget.size')"
+        :label="t('fm.config.widget.size')"
       >
-        {{ $t("fm.config.widget.width") }}
+        {{ t("fm.config.widget.width") }}
         <el-input
           v-model.number="data.options.size.width"
           style="width: 90px"
           type="number"
         />
-        {{ $t("fm.config.widget.height") }}
+        {{ t("fm.config.widget.height") }}
         <el-input
           v-model.number="data.options.size.height"
           style="width: 90px"
@@ -98,35 +98,35 @@
           Object.keys(data.options).indexOf('placeholder') >= 0 &&
           (data.type != 'time' || data.type != 'date')
         "
-        :label="$t('fm.config.widget.placeholder')"
+        :label="t('fm.config.widget.placeholder')"
       >
         <el-input v-model="data.options.placeholder" />
       </el-form-item>
       <!-- 布局方式，块，行 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('inline') >= 0"
-        :label="$t('fm.config.widget.layout')"
+        :label="t('fm.config.widget.layout')"
       >
         <el-radio-group v-model="data.options.inline">
           <el-radio-button :label="false">{{
-            $t("fm.config.widget.block")
+            t("fm.config.widget.block")
           }}</el-radio-button>
           <el-radio-button :label="true">{{
-            $t("fm.config.widget.inline")
+            t("fm.config.widget.inline")
           }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
       <!-- 显示输入框 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('showInput') >= 0"
-        :label="$t('fm.config.widget.showInput')"
+        :label="t('fm.config.widget.showInput')"
       >
         <el-switch v-model="data.options.showInput" />
       </el-form-item>
       <!-- 最小值 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('min') >= 0"
-        :label="$t('fm.config.widget.min')"
+        :label="t('fm.config.widget.min')"
       >
         <el-input-number
           v-model="data.options.min"
@@ -138,7 +138,7 @@
       <!-- 最大值 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('max') >= 0"
-        :label="$t('fm.config.widget.max')"
+        :label="t('fm.config.widget.max')"
       >
         <el-input-number
           v-model="data.options.max"
@@ -150,7 +150,7 @@
       <!-- 步长 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('step') >= 0"
-        :label="$t('fm.config.widget.step')"
+        :label="t('fm.config.widget.step')"
       >
         <el-input-number
           v-model="data.options.step"
@@ -163,7 +163,7 @@
       <!-- && data.options.showMultiple -->
       <el-form-item
         v-if="data.type == 'select'"
-        :label="$t('fm.config.widget.multiple')"
+        :label="t('fm.config.widget.multiple')"
       >
         <el-switch
           v-model="data.options.multiple"
@@ -173,26 +173,26 @@
       <!-- 是否可搜索 -->
       <el-form-item
         v-if="data.type == 'select' && data.options.showFilterable"
-        :label="$t('fm.config.widget.filterable')"
+        :label="t('fm.config.widget.filterable')"
       >
         <el-switch v-model="data.options.filterable" />
       </el-form-item>
       <!-- 允许半选 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('allowHalf') >= 0"
-        :label="$t('fm.config.widget.allowHalf')"
+        :label="t('fm.config.widget.allowHalf')"
       >
         <el-switch v-model="data.options.allowHalf" />
       </el-form-item>
       <!-- 支持透明度选择 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('showAlpha') >= 0"
-        :label="$t('fm.config.widget.showAlpha')"
+        :label="t('fm.config.widget.showAlpha')"
       >
         <el-switch v-model="data.options.showAlpha" />
       </el-form-item>
       <!-- 是否显示标签 -->
-      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" :label="$t('fm.config.widget.showLabel')">
+      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" :label="t('fm.config.widget.showLabel')">
         <el-switch
           v-model="data.options.showLabel"
         />
@@ -200,27 +200,27 @@
       <!-- 选项 -->
       <el-form-item
         v-if="Object.keys(data.options).indexOf('options') >= 0"
-        :label="$t('fm.config.widget.option')"
+        :label="t('fm.config.widget.option')"
       >
         <!-- <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
-          <el-radio-button :label="false">{{ $t('fm.config.widget.staticData') }}</el-radio-button>
-          <el-radio-button v-if="data.options.showRemote" :label="true">{{ $t('fm.config.widget.remoteData') }}</el-radio-button>
+          <el-radio-button :label="false">{{ t('fm.config.widget.staticData') }}</el-radio-button>
+          <el-radio-button v-if="data.options.showRemote" :label="true">{{ t('fm.config.widget.remoteData') }}</el-radio-button>
         </el-radio-group> -->
         <template v-if="data.options.remote && data.options.showRemote">
           <div>
             <el-input v-model="data.options.remoteFunc" size="mini" style="">
               <template slot="prepend">{{
-                $t("fm.config.widget.remoteFunc")
+                t("fm.config.widget.remoteFunc")
               }}</template>
             </el-input>
             <el-input v-model="data.options.props.value" size="mini" style="">
               <template slot="prepend">{{
-                $t("fm.config.widget.value")
+                t("fm.config.widget.value")
               }}</template>
             </el-input>
             <el-input v-model="data.options.props.label" size="mini" style="">
               <template slot="prepend">{{
-                $t("fm.config.widget.label")
+                t("fm.config.widget.label")
               }}</template>
             </el-input>
             <el-input
@@ -230,7 +230,7 @@
               style=""
             >
               <template slot="prepend">{{
-                $t("fm.config.widget.childrenOption")
+                t("fm.config.widget.childrenOption")
               }}</template>
             </el-input>
           </div>
@@ -398,9 +398,12 @@
                   : handleAddOption()
               "
             >
-              {{ $t("fm.actions.addOption") }}
+              {{ t("fm.actions.addOption") }}
             </el-button>
-            <el-divider direction="vertical"></el-divider>
+            <el-divider
+              v-if="data.type == 'select'"
+              direction="vertical"
+            ></el-divider>
             <el-button
               v-if="data.type == 'select'"
               type="text"
@@ -415,11 +418,11 @@
         </template>
       </el-form-item>
       <!-- 默认值 -->
-      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
+      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="t('fm.config.widget.defaultValue')">
         <el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />
         <el-input v-if="data.type=='input'" v-model="data.options.defaultValue" />
         <el-rate v-if="data.type == 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
-        <el-button v-if="data.type == 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{ $t('fm.actions.clear') }}</el-button>
+        <el-button v-if="data.type == 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{ t('fm.actions.clear') }}</el-button>
         <el-color-picker
           v-if="data.type == 'color'"
           v-model="data.options.defaultValue"
@@ -431,7 +434,7 @@
       <template v-if="data.type == 'time' || data.type == 'date'">
         <el-form-item
           v-if="data.type == 'date'"
-          :label="$t('fm.config.widget.showType')"
+          :label="t('fm.config.widget.showType')"
         >
           <el-select v-model="data.options.type">
             <el-option value="year" />
@@ -446,13 +449,13 @@
         </el-form-item>
         <el-form-item
           v-if="data.type == 'time'"
-          :label="$t('fm.config.widget.isRange')"
+          :label="t('fm.config.widget.isRange')"
         >
           <el-switch v-model="data.options.isRange" />
         </el-form-item>
         <el-form-item
           v-if="data.type == 'date'"
-          :label="$t('fm.config.widget.isTimestamp')"
+          :label="t('fm.config.widget.isTimestamp')"
         >
           <el-switch v-model="data.options.timestamp" />
         </el-form-item>
@@ -463,7 +466,7 @@
               data.options.type != 'datetimerange' &&
               data.options.type != 'daterange')
           "
-          :label="$t('fm.config.widget.placeholder')"
+          :label="t('fm.config.widget.placeholder')"
         >
           <el-input v-model="data.options.placeholder" />
         </el-form-item>
@@ -473,7 +476,7 @@
             data.options.type == 'datetimerange' ||
             data.options.type == 'daterange'
           "
-          :label="$t('fm.config.widget.startPlaceholder')"
+          :label="t('fm.config.widget.startPlaceholder')"
         >
           <el-input v-model="data.options.startPlaceholder" />
         </el-form-item>
@@ -483,14 +486,14 @@
             data.options.type == 'datetimerange' ||
             data.options.type == 'daterange'
           "
-          :label="$t('fm.config.widget.endPlaceholder')"
+          :label="t('fm.config.widget.endPlaceholder')"
         >
           <el-input v-model="data.options.endPlaceholder" />
         </el-form-item>
-        <el-form-item :label="$t('fm.config.widget.format')">
+        <el-form-item :label="t('fm.config.widget.format')">
           <el-input v-model="data.options.format" />
         </el-form-item>
-        <!-- <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="$t('fm.config.widget.defaultValue')">
+        <!-- <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="t('fm.config.widget.defaultValue')">
           <el-time-picker
             v-if="!data.options.isRange"
             key="1"
@@ -512,12 +515,12 @@
       </template>
       <!-- 图片上传 -->
       <template v-if="data.type == 'imgupload' || data.type == 'file'">
-        <el-form-item :label="$t('fm.config.widget.limit')">
+        <el-form-item :label="t('fm.config.widget.limit')">
           <el-input v-model.number="data.options.length" type="number" />
         </el-form-item>
         <el-form-item
           v-if="Object.keys(data.options).indexOf('isQiniu') > 0"
-          :label="$t('fm.config.widget.isQiniu')"
+          :label="t('fm.config.widget.isQiniu')"
         >
           <el-switch v-model="data.options.isQiniu" />
         </el-form-item>
@@ -526,7 +529,7 @@
             <el-input v-model="data.options.domain" />
           </el-form-item>
           <el-form-item
-            :label="$t('fm.config.widget.tokenFunc')"
+            :label="t('fm.config.widget.tokenFunc')"
             :required="true"
           >
             <el-input v-model="data.options.tokenFunc" />
@@ -534,12 +537,12 @@
         </template>
         <template v-else>
           <el-form-item
-            :label="$t('fm.config.widget.imageAction')"
+            :label="t('fm.config.widget.imageAction')"
             :required="true"
           >
             <el-input v-model="data.options.action" />
           </el-form-item>
-          <el-form-item :label="$t('fm.config.widget.setHeaders')">
+          <el-form-item :label="t('fm.config.widget.setHeaders')">
             <el-row
               v-for="(uploadItem, uploadIndex) in headers"
               :key="uploadIndex"
@@ -642,20 +645,20 @@
       </template>
 
       <template v-if="data.type === 'blank'">
-        <el-form-item :label="$t('fm.config.widget.defaultType')">
+        <el-form-item :label="t('fm.config.widget.defaultType')">
           <el-select v-model="data.options.defaultType">
-            <el-option value="String" :label="$t('fm.config.widget.string')" />
-            <el-option value="Object" :label="$t('fm.config.widget.object')" />
-            <el-option value="Array" :label="$t('fm.config.widget.array')" />
+            <el-option value="String" :label="t('fm.config.widget.string')" />
+            <el-option value="Object" :label="t('fm.config.widget.object')" />
+            <el-option value="Array" :label="t('fm.config.widget.array')" />
           </el-select>
         </el-form-item>
       </template>
       <!-- 珊格 -->
       <template v-if="data.type === 'grid'">
-        <el-form-item :label="$t('fm.config.widget.gutter')">
+        <el-form-item :label="t('fm.config.widget.gutter')">
           <el-input v-model.number="data.options.gutter" type="number" />
         </el-form-item>
-        <el-form-item :label="$t('fm.config.widget.columnOption')">
+        <el-form-item :label="t('fm.config.widget.columnOption')">
           <draggable
             tag="ul"
             :list="data.columns"
@@ -674,7 +677,7 @@
               /></i>
               <el-input
                 v-model.number="item.span"
-                :placeholder="$t('fm.config.widget.span')"
+                :placeholder="t('fm.config.widget.span')"
                 size="mini"
                 style="width: 100px"
                 type="number"
@@ -693,41 +696,41 @@
           </draggable>
           <div style="margin-left: 22px">
             <el-button type="text" @click="handleAddColumn">{{
-              $t("fm.actions.addColumn")
+              t("fm.actions.addColumn")
             }}</el-button>
           </div>
         </el-form-item>
-        <el-form-item :label="$t('fm.config.widget.justify')">
+        <el-form-item :label="t('fm.config.widget.justify')">
           <el-select v-model="data.options.justify">
             <el-option
               value="start"
-              :label="$t('fm.config.widget.justifyStart')"
+              :label="t('fm.config.widget.justifyStart')"
             />
-            <el-option value="end" :label="$t('fm.config.widget.justifyEnd')" />
+            <el-option value="end" :label="t('fm.config.widget.justifyEnd')" />
             <el-option
               value="center"
-              :label="$t('fm.config.widget.justifyCenter')"
+              :label="t('fm.config.widget.justifyCenter')"
             />
             <el-option
               value="space-around"
-              :label="$t('fm.config.widget.justifySpaceAround')"
+              :label="t('fm.config.widget.justifySpaceAround')"
             />
             <el-option
               value="space-between"
-              :label="$t('fm.config.widget.justifySpaceBetween')"
+              :label="t('fm.config.widget.justifySpaceBetween')"
             />
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('fm.config.widget.align')">
+        <el-form-item :label="t('fm.config.widget.align')">
           <el-select v-model="data.options.align">
-            <el-option value="top" :label="$t('fm.config.widget.alignTop')" />
+            <el-option value="top" :label="t('fm.config.widget.alignTop')" />
             <el-option
               value="middle"
-              :label="$t('fm.config.widget.alignMiddle')"
+              :label="t('fm.config.widget.alignMiddle')"
             />
             <el-option
               value="bottom"
-              :label="$t('fm.config.widget.alignBottom')"
+              :label="t('fm.config.widget.alignBottom')"
             />
           </el-select>
         </el-form-item>
@@ -740,45 +743,45 @@
           data.type !== 'divider'
         "
       >
-        <el-form-item :label="$t('fm.config.widget.attribute')">
-          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">{{ $t('fm.config.widget.readonly') }}</el-checkbox> -->
+        <el-form-item :label="t('fm.config.widget.attribute')">
+          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">{{ t('fm.config.widget.readonly') }}</el-checkbox> -->
           <el-checkbox
             v-if="Object.keys(data.options).indexOf('disabled') >= 0"
             v-model="data.options.disabled"
-            >{{ $t("fm.config.widget.disabled") }}
+            >{{ t("fm.config.widget.disabled") }}
           </el-checkbox>
-          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('showPassword')>=0" v-model="data.options.showPassword">{{ $t('fm.config.widget.showPassword') }}	</el-checkbox> -->
+          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('showPassword')>=0" v-model="data.options.showPassword">{{ t('fm.config.widget.showPassword') }}	</el-checkbox> -->
           <el-checkbox
             v-if="Object.keys(data.options).indexOf('editable') >= 0"
             v-model="data.options.editable"
-            >{{ $t("fm.config.widget.editable") }}</el-checkbox
+            >{{ t("fm.config.widget.editable") }}</el-checkbox
           >
-          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('clearable')>=0" v-model="data.options.clearable">{{ $t('fm.config.widget.clearable') }} </el-checkbox> -->
+          <!-- <el-checkbox v-if="Object.keys(data.options).indexOf('clearable')>=0" v-model="data.options.clearable">{{ t('fm.config.widget.clearable') }} </el-checkbox> -->
           <el-checkbox
             v-if="Object.keys(data.options).indexOf('arrowControl') >= 0"
             v-model="data.options.arrowControl"
-            >{{ $t("fm.config.widget.arrowControl") }}</el-checkbox
+            >{{ t("fm.config.widget.arrowControl") }}</el-checkbox
           >
           <el-checkbox
             v-if="Object.keys(data.options).indexOf('isDelete') >= 0"
             v-model="data.options.isDelete"
-            >{{ $t("fm.config.widget.isDelete") }}</el-checkbox
+            >{{ t("fm.config.widget.isDelete") }}</el-checkbox
           >
           <el-checkbox
             v-if="Object.keys(data.options).indexOf('isEdit') >= 0"
             v-model="data.options.isEdit"
-            >{{ $t("fm.config.widget.isEdit") }}</el-checkbox
+            >{{ t("fm.config.widget.isEdit") }}</el-checkbox
           >
           <el-checkbox
             v-if="Object.keys(data.options).indexOf('showAllLevels') >= 0"
             v-model="data.options.showAllLevels"
-            >{{ $t("fm.config.widget.showAllLevels") }}</el-checkbox
+            >{{ t("fm.config.widget.showAllLevels") }}</el-checkbox
           >
         </el-form-item>
-        <el-form-item :label="$t('fm.config.widget.validate')">
+        <el-form-item :label="t('fm.config.widget.validate')">
           <div v-if="Object.keys(data.options).indexOf('required') >= 0">
             <el-checkbox v-model="data.options.required">{{
-              $t("fm.config.widget.required")
+              t("fm.config.widget.required")
             }}</el-checkbox>
           </div>
           <el-select
@@ -786,27 +789,24 @@
             v-model="data.options.dataType"
             size="mini"
           >
-            <el-option value="string" :label="$t('fm.config.widget.string')" />
-            <el-option value="number" :label="$t('fm.config.widget.number')" />
-            <!-- <el-option value="boolean" :label="$t('fm.config.widget.boolean')" /> -->
-            <el-option
-              value="integer"
-              :label="$t('fm.config.widget.integer')"
-            />
-            <el-option value="float" :label="$t('fm.config.widget.float')" />
-            <!-- <el-option value="url" :label="$t('fm.config.widget.url')" />
-            <el-option value="email" :label="$t('fm.config.widget.email')" />
-            <el-option value="hex" :label="$t('fm.config.widget.hex')" /> -->
+            <el-option value="string" :label="t('fm.config.widget.string')" />
+            <el-option value="number" :label="t('fm.config.widget.number')" />
+            <!-- <el-option value="boolean" :label="t('fm.config.widget.boolean')" /> -->
+            <el-option value="integer" :label="t('fm.config.widget.integer')" />
+            <el-option value="float" :label="t('fm.config.widget.float')" />
+            <!-- <el-option value="url" :label="t('fm.config.widget.url')" />
+            <el-option value="email" :label="t('fm.config.widget.email')" />
+            <el-option value="hex" :label="t('fm.config.widget.hex')" /> -->
           </el-select>
 
           <!-- <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
-            <el-input v-model.lazy="data.options.pattern" size="mini" style=" width: 240px;" :placeholder="$t('fm.config.widget.patternPlaceholder')" />
+            <el-input v-model.lazy="data.options.pattern" size="mini" style=" width: 240px;" :placeholder="t('fm.config.widget.patternPlaceholder')" />
           </div> -->
         </el-form-item>
       </template>
       <el-form-item
         v-if="Object.keys(data.options).indexOf('displayVerifiy') >= 0"
-        :label="$t('fm.config.widget.displayVerifiy')"
+        :label="t('fm.config.widget.displayVerifiy')"
       >
         <el-radio-group v-model="data.options.displayVerifiy.type">
           <el-radio label="hide">不校验</el-radio>
@@ -820,14 +820,14 @@
                 v-model="item.model"
                 size="mini"
                 :placeholder="
-                  $t('fm.config.widget.displayVerifiyPlaceholderModel')
+                  t('fm.config.widget.displayVerifiyPlaceholderModel')
                 "
               />
               <el-input
                 v-model="item.value"
                 size="mini"
                 :placeholder="
-                  $t('fm.config.widget.displayVerifiyPlaceholderValue')
+                  t('fm.config.widget.displayVerifiyPlaceholderValue')
                 "
               />
               <el-button
@@ -956,7 +956,7 @@
 
 <script>
 import Draggable from "vuedraggable";
-
+import zhCN from "../lang/zh-CN";
 export default {
   components: {
     Draggable,
@@ -1040,6 +1040,14 @@ export default {
     this.handleInitHeaders();
   },
   methods: {
+    t(str) {
+      const fields = str.split(".");
+      let tempStr = { ...zhCN };
+      fields.forEach((i) => {
+        tempStr = tempStr[i];
+      });
+      return tempStr;
+    },
     relationChange() {
       this.$forceUpdate();
       console.log(this.data);
@@ -1174,13 +1182,13 @@ export default {
     handleAddOption() {
       let addItem = {
         value:
-          this.$t("fm.config.widget.newOption") +
+          this.t("fm.config.widget.newOption") +
           (this.data.options.options.length + 1),
         relationOptions: [],
       };
       if (this.data.options.showLabel) {
         addItem.label =
-          this.$t("fm.config.widget.newOption") +
+          this.t("fm.config.widget.newOption") +
           (this.data.options.options.length + 1);
       }
       this.data.options.options.push(addItem);
@@ -1219,7 +1227,7 @@ export default {
       if (val) {
         this.validator.required = {
           required: true,
-          message: `${this.data.name}${this.$t(
+          message: `${this.data.name}${this.t(
             "fm.config.widget.validatorRequired"
           )}`,
         };
@@ -1240,7 +1248,7 @@ export default {
       if (val && this.data.type != "input") {
         this.validator.type = {
           type: val,
-          message: this.data.name + this.$t("fm.config.widget.validatorType"),
+          message: this.data.name + this.t("fm.config.widget.validatorType"),
         };
       } else {
         this.validator.type = null;
@@ -1256,8 +1264,7 @@ export default {
       if (val) {
         this.validator.pattern = {
           pattern: val,
-          message:
-            this.data.name + this.$t("fm.config.widget.validatorPattern"),
+          message: this.data.name + this.t("fm.config.widget.validatorPattern"),
         };
       } else {
         this.validator.pattern = null;
@@ -1295,4 +1302,4 @@ export default {
 .select-value :deep(.el-col-18) {
   margin-top: -1px;
 }
-</style>
+</style>

src/components/VueFormMaking/components/WidgetForm.vue

@@ -1,16 +1,26 @@
 <template>
   <div class="widget-form-container">
-    <div v-if="data.list.length == 0" class="form-empty">{{ $t('fm.description.containerEmpty') }}</div>
-    <el-form :size="data.config.size" label-suffix=":" :label-position="data.config.labelPosition" :label-width="data.config.labelWidth + 'px'">
-
+    <div v-if="data.list.length == 0" class="form-empty">
+      从左侧拖拽来添加字段
+    </div>
+    <el-form
+      :size="data.config.size"
+      label-suffix=":"
+      :label-position="data.config.labelPosition"
+      :label-width="data.config.labelWidth + 'px'"
+    >
       <draggable
         v-model="data.list"
         class=""
-        v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget',
+        }"
         @end="handleMoveEnd"
         @add="handleWidgetAdd"
       >
-
         <transition-group name="fade" tag="div" class="widget-form-list">
           <template v-for="(element, index) in data.list">
             <!-- 珊格 -->
@@ -20,22 +30,34 @@
                 :key="element.key"
                 class="widget-col widget-view"
                 type="flex"
-                :class="{active: selectWidget.key == element.key}"
+                :class="{ active: selectWidget.key == element.key }"
                 :gutter="element.options.gutter ? element.options.gutter : 0"
                 :justify="element.options.justify"
                 :align="element.options.align"
                 @click.native="handleSelectWidget(index)"
               >
-                <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
-
+                <el-col
+                  v-for="(col, colIndex) in element.columns"
+                  :key="colIndex"
+                  :span="col.span ? col.span : 0"
+                >
                   <draggable
                     v-model="col.list"
                     :no-transition-on-drag="true"
-                    v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
+                    v-bind="{
+                      group: 'people',
+                      ghostClass: 'ghost',
+                      animation: 200,
+                      handle: '.drag-widget',
+                    }"
                     @end="handleMoveEnd"
                     @add="handleWidgetColAdd($event, element, colIndex)"
                   >
-                    <transition-group name="fade" tag="div" class="widget-col-list">
+                    <transition-group
+                      name="fade"
+                      tag="div"
+                      class="widget-col-list"
+                    >
                       <template v-for="(el, i) in col.list">
                         <widget-form-item
                           v-if="el.key"
@@ -47,46 +69,67 @@
                           :data-config="data"
                         />
                       </template>
-
                     </transition-group>
-
                   </draggable>
                 </el-col>
-                <div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action">
-
-                  <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
+                <div
+                  v-if="selectWidget.key == element.key"
+                  class="widget-view-action widget-col-action"
+                >
+                  <i
+                    class="iconfont icon-trash"
+                    @click.stop="handleWidgetDelete(index)"
+                  />
                 </div>
 
-                <div v-if="selectWidget.key == element.key" class="widget-view-drag widget-col-drag">
+                <div
+                  v-if="selectWidget.key == element.key"
+                  class="widget-view-drag widget-col-drag"
+                >
                   <i class="iconfont icon-drag drag-widget" />
                 </div>
               </el-row>
             </template>
             <!-- 子表单 -->
             <template v-else-if="element.type == 'subform'">
-              <el-row
-                v-if="element && element.key"
-                :key="element.key"
-              >
+              <el-row v-if="element && element.key" :key="element.key">
                 <el-form-item
                   class="widget-col widget-view"
-                  :label-width="element.options.labelWidthStatus?data.config.labelWidth + 'px': '0px'"
-                  :class="{active: selectWidget.key === element.key, 'is_req': element.options.required}"
-                  :label="element.options.labelWidthStatus?element.name:''"
+                  :label-width="
+                    element.options.labelWidthStatus
+                      ? data.config.labelWidth + 'px'
+                      : '0px'
+                  "
+                  :class="{
+                    active: selectWidget.key === element.key,
+                    is_req: element.options.required,
+                  }"
+                  :label="element.options.labelWidthStatus ? element.name : ''"
                   @click.native="handleSelectWidget(index)"
                 >
                   <div
                     type="flex"
-                    :class="{active: selectWidget.key == element.key}"
-                    :gutter="element.options.gutter ? element.options.gutter : 0"
+                    :class="{ active: selectWidget.key == element.key }"
+                    :gutter="
+                      element.options.gutter ? element.options.gutter : 0
+                    "
                     :justify="element.options.justify"
                     :align="element.options.align"
                   >
-                    <el-col v-for="(col, colIndex) in element.columns" :key="colIndex" :span="col.span ? col.span : 0">
+                    <el-col
+                      v-for="(col, colIndex) in element.columns"
+                      :key="colIndex"
+                      :span="col.span ? col.span : 0"
+                    >
                       <draggable
                         v-model="col.list"
                         :no-transition-on-drag="true"
-                        v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
+                        v-bind="{
+                          group: 'people',
+                          ghostClass: 'ghost',
+                          animation: 200,
+                          handle: '.drag-widget',
+                        }"
                         @end="handleMoveEnd"
                         @add="handleWidgetColAdd($event, element, colIndex)"
                       >
@@ -94,7 +137,11 @@
                           name="fade"
                           tag="div"
                           class="widget-col-list"
-                          style="min-height: 131px;overflow-x: auto; white-space: nowrap;"
+                          style="
+                            min-height: 131px;
+                            overflow-x: auto;
+                            white-space: nowrap;
+                          "
                         >
                           <template v-for="(el, i) in col.list">
                             <div
@@ -117,11 +164,20 @@
                       </draggable>
                     </el-col>
 
-                    <div v-if="selectWidget.key == element.key" class="widget-view-action widget-col-action">
-                      <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
+                    <div
+                      v-if="selectWidget.key == element.key"
+                      class="widget-view-action widget-col-action"
+                    >
+                      <i
+                        class="iconfont icon-trash"
+                        @click.stop="handleWidgetDelete(index)"
+                      />
                     </div>
 
-                    <div v-if="selectWidget.key == element.key" class="widget-view-drag widget-col-drag">
+                    <div
+                      v-if="selectWidget.key == element.key"
+                      class="widget-view-drag widget-col-drag"
+                    >
                       <i class="iconfont icon-drag drag-widget" />
                     </div>
                   </div>
@@ -147,146 +203,168 @@
 </template>
 
 <script>
-import Draggable from 'vuedraggable'
-import WidgetFormItem from './WidgetFormItem'
+import Draggable from "vuedraggable";
+import WidgetFormItem from "./WidgetFormItem";
 
 export default {
   components: {
     Draggable,
-    WidgetFormItem
+    WidgetFormItem,
   },
   /* eslint-disable */
-  props: ['data', 'select'],
+  props: ["data", "select"],
   data() {
     return {
-      selectWidget: this.select
-    }
+      selectWidget: this.select,
+    };
   },
   watch: {
     select(val) {
-      this.selectWidget = val
+      this.selectWidget = val;
     },
     selectWidget: {
       handler(val) {
-        this.$emit('update:select', val)
+        this.$emit("update:select", val);
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
-    document.body.ondrop = function(event) {
-      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+    document.body.ondrop = function (event) {
+      const isFirefox =
+        navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
       if (isFirefox) {
-        event.preventDefault()
-        event.stopPropagation()
+        event.preventDefault();
+        event.stopPropagation();
       }
-    }
+    };
 
-    console.log(this.data.list)
+    console.log(this.data.list);
   },
   methods: {
-    handleMoveEnd({ newIndex, oldIndex }) {
-    },
+    handleMoveEnd({ newIndex, oldIndex }) {},
     handleSelectWidget(index) {
-      this.selectWidget = this.data.list[index]
+      this.selectWidget = this.data.list[index];
     },
     handleWidgetAdd(evt) {
-      const newIndex = evt.newIndex
-      const to = evt.to
+      const newIndex = evt.newIndex;
+      const to = evt.to;
 
       // 为拖拽到容器的元素添加唯一 key
-      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
       this.$set(this.data.list, newIndex, {
         ...this.data.list[newIndex],
         options: {
           ...this.data.list[newIndex].options,
-          remoteFunc: 'func_' + key
+          remoteFunc: "func_" + key,
         },
         key,
         // 绑定键值
-        model: this.data.list[newIndex].type + '_' + key,
-        rules: []
-      })
+        model: this.data.list[newIndex].type + "_" + key,
+        rules: [],
+      });
 
-      if (this.data.list[newIndex].type === 'radio' || this.data.list[newIndex].type === 'checkbox' || this.data.list[newIndex].type === 'select') {
+      if (
+        this.data.list[newIndex].type === "radio" ||
+        this.data.list[newIndex].type === "checkbox" ||
+        this.data.list[newIndex].type === "select"
+      ) {
         this.$set(this.data.list, newIndex, {
           ...this.data.list[newIndex],
           options: {
             ...this.data.list[newIndex].options,
-            options: this.data.list[newIndex].options.options.map(item => ({
-              ...item
-            }))
-          }
-        })
+            options: this.data.list[newIndex].options.options.map((item) => ({
+              ...item,
+            })),
+          },
+        });
       }
 
-      if (this.data.list[newIndex].type === 'grid' || this.data.list[newIndex].type === 'subform') {
+      if (
+        this.data.list[newIndex].type === "grid" ||
+        this.data.list[newIndex].type === "subform"
+      ) {
         this.$set(this.data.list, newIndex, {
           ...this.data.list[newIndex],
-          columns: this.data.list[newIndex].columns.map(item => ({ ...item }))
-        })
+          columns: this.data.list[newIndex].columns.map((item) => ({
+            ...item,
+          })),
+        });
       }
 
-      this.selectWidget = this.data.list[newIndex]
+      this.selectWidget = this.data.list[newIndex];
     },
     handleWidgetColAdd($event, row, colIndex) {
-      const newIndex = $event.newIndex
-      const oldIndex = $event.oldIndex
-      const item = $event.item
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
 
       // 防止布局元素的嵌套拖拽
-      if (item.className.indexOf('data-grid') >= 0) {
+      if (item.className.indexOf("data-grid") >= 0) {
         // 如果是列表中拖拽的元素需要还原到原来位置
-        item.tagName === 'DIV' && this.data.list.splice(oldIndex, 0, row.columns[colIndex].list[newIndex])
+        item.tagName === "DIV" &&
+          this.data.list.splice(
+            oldIndex,
+            0,
+            row.columns[colIndex].list[newIndex]
+          );
 
-        row.columns[colIndex].list.splice(newIndex, 1)
+        row.columns[colIndex].list.splice(newIndex, 1);
 
-        return false
+        return false;
       }
 
-      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
+      const key =
+        Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
 
       this.$set(row.columns[colIndex].list, newIndex, {
         ...row.columns[colIndex].list[newIndex],
         options: {
           ...row.columns[colIndex].list[newIndex].options,
-          remoteFunc: 'func_' + key
+          remoteFunc: "func_" + key,
         },
         key,
         // 绑定键值
-        model: row.columns[colIndex].list[newIndex].type + '_' + key,
-        rules: []
-      })
+        model: row.columns[colIndex].list[newIndex].type + "_" + key,
+        rules: [],
+      });
 
-      if (row.columns[colIndex].list[newIndex].type === 'radio' || row.columns[colIndex].list[newIndex].type === 'checkbox' || row.columns[colIndex].list[newIndex].type === 'select') {
+      if (
+        row.columns[colIndex].list[newIndex].type === "radio" ||
+        row.columns[colIndex].list[newIndex].type === "checkbox" ||
+        row.columns[colIndex].list[newIndex].type === "select"
+      ) {
         this.$set(row.columns[colIndex].list, newIndex, {
           ...row.columns[colIndex].list[newIndex],
           options: {
             ...row.columns[colIndex].list[newIndex].options,
-            options: row.columns[colIndex].list[newIndex].options.options.map(item => ({
-              ...item
-            }))
-          }
-        })
+            options: row.columns[colIndex].list[newIndex].options.options.map(
+              (item) => ({
+                ...item,
+              })
+            ),
+          },
+        });
       }
 
-      this.selectWidget = row.columns[colIndex].list[newIndex]
+      this.selectWidget = row.columns[colIndex].list[newIndex];
     },
     handleWidgetDelete(index) {
       if (this.data.list.length - 1 === index) {
         if (index === 0) {
-          this.selectWidget = {}
+          this.selectWidget = {};
         } else {
-          this.selectWidget = this.data.list[index - 1]
+          this.selectWidget = this.data.list[index - 1];
         }
       } else {
-        this.selectWidget = this.data.list[index + 1]
+        this.selectWidget = this.data.list[index + 1];
       }
 
       this.$nextTick(() => {
-        this.data.list.splice(index, 1)
-      })
-    }
-  }
-}
+        this.data.list.splice(index, 1);
+      });
+    },
+  },
+};
 </script>

src/components/VueFormMaking/components/WidgetFormFields.vue

@@ -3,7 +3,7 @@
     <template v-if="element.type == 'input'">
       <el-input
         v-model="element.options.defaultValue"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
         :placeholder="element.options.placeholder"
         :disabled="element.options.disabled"
       />
@@ -14,7 +14,7 @@
         v-model="element.options.defaultValue"
         type="textarea"
         :rows="5"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
         :disabled="element.options.disabled"
         :placeholder="element.options.placeholder"
       />
@@ -25,20 +25,22 @@
         v-model="element.options.defaultValue"
         :disabled="element.options.disabled"
         :controls-position="element.options.controlsPosition"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       />
     </template>
 
     <template v-if="element.type == 'radio'">
       <el-radio-group
         v-model="element.options.defaultValue"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
         :disabled="element.options.disabled"
       >
         <el-radio
           v-for="(item, index2) in element.options.options"
           :key="item.value + index2"
-          :style="{display: element.options.inline ? 'inline-block' : 'block'}"
+          :style="{
+            display: element.options.inline ? 'inline-block' : 'block',
+          }"
           :label="item.value"
         >
           {{ element.options.showLabel ? item.label : item.value }}
@@ -49,13 +51,15 @@
     <template v-if="element.type == 'checkbox'">
       <el-checkbox-group
         v-model="element.options.defaultValue"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
         :disabled="element.options.disabled"
       >
         <el-checkbox
           v-for="(item, index1) in element.options.options"
           :key="item.value + index1"
-          :style="{display: element.options.inline ? 'inline-block' : 'block'}"
+          :style="{
+            display: element.options.inline ? 'inline-block' : 'block',
+          }"
           :label="item.value"
         >
           {{ element.options.showLabel ? item.label : item.value }}
@@ -75,7 +79,7 @@
         :editable="element.options.editable"
         :clearable="element.options.clearable"
         :arrow-control="element.options.arrowControl"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       />
     </template>
 
@@ -91,7 +95,7 @@
         :disabled="element.options.disabled"
         :editable="element.options.editable"
         :clearable="element.options.clearable"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       />
     </template>
 
@@ -119,9 +123,14 @@
         :multiple="element.options.multiple"
         :clearable="element.options.clearable"
         :placeholder="element.options.placeholder"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       >
-        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value" />
+        <el-option
+          v-for="item in element.options.options"
+          :key="item.value"
+          :value="item.value"
+          :label="element.options.showLabel ? item.label : item.value"
+        />
       </el-select>
     </template>
 
@@ -132,9 +141,14 @@
         :multiple="element.options.multiple"
         :clearable="element.options.clearable"
         :placeholder="element.options.placeholder"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       >
-        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value" />
+        <el-option
+          v-for="item in element.options.options"
+          :key="item.value"
+          :value="item.value"
+          :label="element.options.showLabel ? item.label : item.value"
+        />
       </el-select>
     </template>
 
@@ -145,20 +159,25 @@
         :multiple="element.options.multiple"
         :clearable="element.options.clearable"
         :placeholder="element.options.placeholder"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       >
-        <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value" />
+        <el-option
+          v-for="item in element.options.options"
+          :key="item.value"
+          :value="item.value"
+          :label="element.options.showLabel ? item.label : item.value"
+        />
       </el-select>
     </template>
 
-    <template v-if="element.type=='switch'">
+    <template v-if="element.type == 'switch'">
       <el-switch
         v-model="element.options.defaultValue"
         :disabled="element.options.disabled"
       />
     </template>
 
-    <template v-if="element.type=='slider'">
+    <template v-if="element.type == 'slider'">
       <el-slider
         v-model="element.options.defaultValue"
         :min="element.options.min"
@@ -167,15 +186,15 @@
         :step="element.options.step"
         :show-input="element.options.showInput"
         :range="element.options.range"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       />
     </template>
 
-    <template v-if="element.type=='imgupload'">
+    <template v-if="element.type == 'imgupload'">
       <fm-upload
         v-model="element.options.defaultValue"
         :disabled="element.options.disabled"
-        :style="{'width': element.options.width}"
+        :style="{ width: element.options.width }"
         :width="element.options.size.width"
         :height="element.options.size.height"
         token="xxx"
@@ -183,7 +202,7 @@
       />
     </template>
 
-    <template v-if="element.type=='file'">
+    <template v-if="element.type == 'file'">
       <FileUpload :element="element" />
     </template>
 
@@ -194,20 +213,34 @@
         :show-all-levels="element.options.showAllLevels"
         :clearable="element.options.clearable"
         :placeholder="element.options.placeholder"
-        :style="{width: element.options.width}"
-        :options="element.options.remote?element.options.remoteOptions:element.options.options"
+        :style="{ width: element.options.width }"
+        :options="
+          element.options.remote
+            ? element.options.remoteOptions
+            : element.options.options
+        "
       />
     </template>
 
     <template v-if="element.type == 'editor'">
       <vue-editor
         v-model="element.options.defaultValue"
-        :style="{width: element.options.width}"
+        :style="{ width: element.options.width }"
       />
     </template>
 
-    <template v-if="element.type=='blank'">
-      <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">{{ $t('fm.components.fields.blank') }}</div>
+    <template v-if="element.type == 'blank'">
+      <div
+        style="
+          height: 50px;
+          color: #999;
+          background: #eee;
+          line-height: 50px;
+          text-align: center;
+        "
+      >
+        自定义区域
+      </div>
     </template>
 
     <template v-if="element.type === 'text'">
@@ -216,7 +249,7 @@
           'font-size': element.options.font_size,
           'font-family': element.options.font_family,
           'font-weight': element.options.font_weight,
-          'color': element.options.font_color
+          color: element.options.font_color,
         }"
       >
         {{ element.options.defaultValue }}
@@ -233,7 +266,7 @@
             'font-size': element.options.font_size,
             'font-family': element.options.font_family,
             'font-weight': element.options.font_weight,
-            'color': element.options.font_color
+            color: element.options.font_color,
           }"
         >
           {{ element.options.defaultValue }}
@@ -244,15 +277,15 @@
 </template>
 
 <script>
-import FmUpload from './Upload'
-import FileUpload from './Upload/file'
+import FmUpload from "./Upload";
+import FileUpload from "./Upload/file";
 export default {
-  name: 'WidgetFormFields',
-  /* eslint-disable */ 
-  props: ['element'],
+  name: "WidgetFormFields",
+  /* eslint-disable */
+  props: ["element"],
   components: {
     FmUpload,
-    FileUpload
-  }
-}
+    FileUpload,
+  },
+};
 </script>

src/components/VueFormMaking/index.js

@@ -24,7 +24,8 @@ const loadLang = function (Vue, lang, locale, i18n) {
     i18n.locale = lang;
   } else {
     Vue.use(VueI18n);
-    console.log(Vue, "Vue", Vue.config);
+    console.log("Vue", Vue.config);
+    console.log(Vue.locale);
     Vue.locale("en-US", { ...Vue.locale("en-US"), ...enUS });
     Vue.locale("zh-CN", { ...Vue.locale("zh-CN"), ...zhCN });
     Vue.config.lang = lang;
@@ -39,7 +40,7 @@ MakingForm.install = function (
     i18n: null,
   }
 ) {
-  loadLang(Vue, opts.lang, opts.locale, opts.i18n);
+  // loadLang(Vue, opts.lang, opts.locale, opts.i18n);
   Vue.component(MakingForm.name, MakingForm);
 };
 
@@ -51,7 +52,7 @@ GenerateForm.install = function (
     i18n: null,
   }
 ) {
-  loadLang(Vue, opts.lang, opts.locale, opts.i18n);
+  // loadLang(Vue, opts.lang, opts.locale, opts.i18n);
   Vue.component(GenerateForm.name, GenerateForm);
 };
 
@@ -65,7 +66,7 @@ const install = function (
     i18n: null,
   }
 ) {
-  loadLang(Vue, opts.lang, opts.locale, opts.i18n);
+  // loadLang(Vue, opts.lang, opts.locale, opts.i18n);
   components.forEach((component) => {
     Vue.component(component.name, component);
   });

src/components/VueFormMaking/lang/zh-CN.js

@@ -2,195 +2,196 @@ export default {
   fm: {
     components: {
       fields: {
-        input: '单行文本',
-        textarea: '多行文本',
-        number: '计数器',
-        radio: '单选框组',
-        checkbox: '多选框组',
-        time: '时间选择器',
-        date: '日期选择器',
-        rate: '评分',
-        color: '颜色选择器',
-        select: '下拉选择框',
-        switch: '开关',
-        slider: '滑块',
-        text: '文字',
-        blank: '自定义区域',
-        fileupload: '文件',
-        imgupload: '图片',
-        editor: '编辑器',
-        cascader: '级联选择器',
-        table: '子表单',
-        subform: '子表单',
-        grid: '栅格布局',
-        tabs: '标签页',
-        divider: '分割线',
-        file: '文件',
-        organ: '分部',
-        school: '学校'
+        input: "单行文本",
+        textarea: "多行文本",
+        number: "计数器",
+        radio: "单选框组",
+        checkbox: "多选框组",
+        time: "时间选择器",
+        date: "日期选择器",
+        rate: "评分",
+        color: "颜色选择器",
+        select: "下拉选择框",
+        switch: "开关",
+        slider: "滑块",
+        text: "文字",
+        blank: "自定义区域",
+        fileupload: "文件",
+        imgupload: "图片",
+        editor: "编辑器",
+        cascader: "级联选择器",
+        table: "子表单",
+        subform: "子表单",
+        grid: "栅格布局",
+        tabs: "标签页",
+        divider: "分割线",
+        file: "文件",
+        organ: "分部",
+        school: "学校",
       },
       basic: {
-        title: '基础字段'
+        title: "基础字段",
       },
       advance: {
-        title: '高级字段'
+        title: "高级字段",
       },
       layout: {
-        title: '布局字段'
-      }
+        title: "布局字段",
+      },
     },
     description: {
-      containerEmpty: '从左侧拖拽来添加字段',
-      configEmpty: '请添加字段',
-      tableEmpty: '从左侧拖拽来添加字段',
-      uploadJsonInfo: 'JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可'
+      containerEmpty: "从左侧拖拽来添加字段",
+      configEmpty: "请添加字段",
+      tableEmpty: "从左侧拖拽来添加字段",
+      uploadJsonInfo:
+        "JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可",
     },
     message: {
-      copySuccess: '复制成功',
-      validError: '表单数据校验失败'
+      copySuccess: "复制成功",
+      validError: "表单数据校验失败",
     },
     actions: {
-      import: '导入JSON',
-      clear: '清空',
-      preview: '预览',
-      json: '生成JSON',
-      code: '生成代码',
-      getData: '获取数据',
-      reset: '重置',
-      copyData: '复制数据',
-      cancel: '取 消',
-      confirm: '确 定',
-      addOption: '添加选项',
-      addColumn: '添加列',
-      addTab: '添加标签',
-      upload: '点击上传',
-      add: '添加'
+      import: "导入JSON",
+      clear: "清空",
+      preview: "预览",
+      json: "生成JSON",
+      code: "生成代码",
+      getData: "获取数据",
+      reset: "重置",
+      copyData: "复制数据",
+      cancel: "取 消",
+      confirm: "确 定",
+      addOption: "添加选项",
+      addColumn: "添加列",
+      addTab: "添加标签",
+      upload: "点击上传",
+      add: "添加",
     },
     config: {
       form: {
-        title: '表单属性',
+        title: "表单属性",
         labelPosition: {
-          title: '标签对齐方式',
-          left: '左对齐',
-          right: '右对齐',
-          top: '顶部对齐'
+          title: "标签对齐方式",
+          left: "左对齐",
+          right: "右对齐",
+          top: "顶部对齐",
         },
-        labelWidth: '表单标签宽度',
-        size: '组件尺寸',
-        customClass: '自定义Class'
+        labelWidth: "表单标签宽度",
+        size: "组件尺寸",
+        customClass: "自定义Class",
       },
       widget: {
-        title: '字段属性',
-        model: '字段标识',
-        name: '标题',
-        width: '宽度',
-        height: '高度',
-        size: '大小',
-        labelWidth: '标签宽度',
-        custom: '自定义',
-        placeholder: '占位内容',
-        layout: '布局方式',
-        block: '块级',
-        inline: '行内',
-        contentPosition: '文案位置',
-        center: '居中',
-        showInput: '显示输入框',
-        min: '最小值',
-        max: '最大值',
-        step: '步长',
-        multiple: '是否多选',
-        filterable: '是否可搜索',
-        allowHalf: '允许半选',
-        showAlpha: '支持透明度选择',
-        showLabel: '是否显示标签',
-        option: '选项',
-        staticData: '静态数据',
-        remoteData: '远端数据',
-        remoteFunc: '远端方法',
-        value: '值',
-        label: '标签',
-        childrenOption: '子选项',
-        defaultValue: '默认值',
-        showType: '显示类型',
-        isRange: '是否为范围选择',
-        isTimestamp: '是否获取时间戳',
-        startPlaceholder: '开始时间占位内容',
-        endPlaceholder: '结束时间占位内容',
-        format: '格式',
-        limit: '最大上传数',
-        isQiniu: '使用七牛上传',
-        tokenFunc: '获取七牛Token方法',
-        setHeaders: '设置上传的请求头部',
-        imageAction: '图片上传地址',
-        tip: '提示说明文字',
-        action: '上传地址',
-        defaultType: '绑定数据类型',
-        string: '字符串',
-        object: '对象',
-        array: '数组',
-        number: '数字',
-        boolean: '布尔值',
-        integer: '整数',
-        float: '浮点数',
-        url: 'URL地址',
-        email: '邮箱地址',
-        hex: '十六进制',
-        gutter: '栅格间隔',
-        columnOption: '列配置项',
-        span: '栅格值',
-        justify: '水平排列方式',
-        justifyStart: '左对齐',
-        justifyEnd: '右对齐',
-        justifyCenter: '居中',
-        justifySpaceAround: '两侧间隔相等',
-        justifySpaceBetween: '两端对齐',
-        align: '垂直排列方式',
-        alignTop: '顶部对齐',
-        alignMiddle: '居中',
-        alignBottom: '底部对齐',
-        type: '风格类型',
-        default: '默认',
-        card: '选项卡',
-        borderCard: '卡片化',
-        tabPosition: '选项卡位置',
-        top: '顶部',
-        left: '左侧',
-        right: '右侧',
-        bottom: '底部',
-        tabOption: '标签配置项',
-        tabName: '标签名称',
-        customClass: '自定义Class',
-        attribute: '操作属性',
-        dataBind: '数据绑定',
-        hidden: '隐藏',
-        readonly: '完全只读',
-        disabled: '禁用',
-        editable: '文本框可输入',
-        clearable: '显示清除按钮',
-        arrowControl: '使用箭头进行时间选择',
-        isDelete: '删除',
-        isEdit: '编辑',
-        showPassword: '密码',
-        validate: '校验',
-        required: '必填',
-        patternPlaceholder: '填写正则表达式',
-        newOption: '新选项',
-        tab: '标签页',
-        validatorRequired: '必须填写',
-        validatorType: '格式不正确',
-        validatorPattern: '格式不匹配',
-        showAllLevels: '完整路径',
-        displayVerifiy: '显示校验',
-        displayVerifiyPlaceholderModel: '请输入字段标识',
-        displayVerifiyPlaceholderValue: '请输入字段值',
-        displayRelation: '关联字段',
-        displayRelationPlaceholderModel: '请输入关联字段标识'
-      }
+        title: "字段属性",
+        model: "字段标识",
+        name: "标题",
+        width: "宽度",
+        height: "高度",
+        size: "大小",
+        labelWidth: "标签宽度",
+        custom: "自定义",
+        placeholder: "占位内容",
+        layout: "布局方式",
+        block: "块级",
+        inline: "行内",
+        contentPosition: "文案位置",
+        center: "居中",
+        showInput: "显示输入框",
+        min: "最小值",
+        max: "最大值",
+        step: "步长",
+        multiple: "是否多选",
+        filterable: "是否可搜索",
+        allowHalf: "允许半选",
+        showAlpha: "支持透明度选择",
+        showLabel: "是否显示标签",
+        option: "选项",
+        staticData: "静态数据",
+        remoteData: "远端数据",
+        remoteFunc: "远端方法",
+        value: "值",
+        label: "标签",
+        childrenOption: "子选项",
+        defaultValue: "默认值",
+        showType: "显示类型",
+        isRange: "是否为范围选择",
+        isTimestamp: "是否获取时间戳",
+        startPlaceholder: "开始时间占位内容",
+        endPlaceholder: "结束时间占位内容",
+        format: "格式",
+        limit: "最大上传数",
+        isQiniu: "使用七牛上传",
+        tokenFunc: "获取七牛Token方法",
+        setHeaders: "设置上传的请求头部",
+        imageAction: "图片上传地址",
+        tip: "提示说明文字",
+        action: "上传地址",
+        defaultType: "绑定数据类型",
+        string: "字符串",
+        object: "对象",
+        array: "数组",
+        number: "数字",
+        boolean: "布尔值",
+        integer: "整数",
+        float: "浮点数",
+        url: "URL地址",
+        email: "邮箱地址",
+        hex: "十六进制",
+        gutter: "栅格间隔",
+        columnOption: "列配置项",
+        span: "栅格值",
+        justify: "水平排列方式",
+        justifyStart: "左对齐",
+        justifyEnd: "右对齐",
+        justifyCenter: "居中",
+        justifySpaceAround: "两侧间隔相等",
+        justifySpaceBetween: "两端对齐",
+        align: "垂直排列方式",
+        alignTop: "顶部对齐",
+        alignMiddle: "居中",
+        alignBottom: "底部对齐",
+        type: "风格类型",
+        default: "默认",
+        card: "选项卡",
+        borderCard: "卡片化",
+        tabPosition: "选项卡位置",
+        top: "顶部",
+        left: "左侧",
+        right: "右侧",
+        bottom: "底部",
+        tabOption: "标签配置项",
+        tabName: "标签名称",
+        customClass: "自定义Class",
+        attribute: "操作属性",
+        dataBind: "数据绑定",
+        hidden: "隐藏",
+        readonly: "完全只读",
+        disabled: "禁用",
+        editable: "文本框可输入",
+        clearable: "显示清除按钮",
+        arrowControl: "使用箭头进行时间选择",
+        isDelete: "删除",
+        isEdit: "编辑",
+        showPassword: "密码",
+        validate: "校验",
+        required: "必填",
+        patternPlaceholder: "填写正则表达式",
+        newOption: "新选项",
+        tab: "标签页",
+        validatorRequired: "必须填写",
+        validatorType: "格式不正确",
+        validatorPattern: "格式不匹配",
+        showAllLevels: "完整路径",
+        displayVerifiy: "显示校验",
+        displayVerifiyPlaceholderModel: "请输入字段标识",
+        displayVerifiyPlaceholderValue: "请输入字段值",
+        displayRelation: "关联字段",
+        displayRelationPlaceholderModel: "请输入关联字段标识",
+      },
     },
     upload: {
-      preview: '预览',
-      edit: '替换',
-      delete: '删除'
-    }
-  }
-}
+      preview: "预览",
+      edit: "替换",
+      delete: "删除",
+    },
+  },
+};

src/components/VueFormMaking/main.js

@@ -10,31 +10,31 @@ import "element-ui/lib/theme-chalk/index.css";
 import enLocale from "element-ui/lib/locale/lang/en";
 import zhLocale from "element-ui/lib/locale/lang/zh-CN";
 
-Vue.use(VueI18n);
+// Vue.use(VueI18n);
 Vue.use(VueEditor);
 
-const messages = {
-  "en-US": {
-    header: {
-      title: "FormMaking",
-      document: "Docs",
-      pricing: "Pricing",
-      advanced: "Advanced",
-    },
-  },
-  "zh-CN": {
-    header: {
-      title: "表单设计器",
-      document: "使用文档",
-      pricing: "商业授权",
-      advanced: "高级版本",
-    },
-  },
-};
-
-Vue.locale("en-US", { ...enLocale, ...messages["en-US"] });
-Vue.locale("zh-CN", { ...zhLocale, ...messages["zh-CN"] });
-Vue.config.lang = "zh-CN";
+// const messages = {
+//   "en-US": {
+//     header: {
+//       title: "FormMaking",
+//       document: "Docs",
+//       pricing: "Pricing",
+//       advanced: "Advanced",
+//     },
+//   },
+//   "zh-CN": {
+//     header: {
+//       title: "表单设计器",
+//       document: "使用文档",
+//       pricing: "商业授权",
+//       advanced: "高级版本",
+//     },
+//   },
+// };
+
+// Vue.locale("en-US", { ...enLocale, ...messages["en-US"] });
+// Vue.locale("zh-CN", { ...zhLocale, ...messages["zh-CN"] });
+// Vue.config.lang = "zh-CN";
 
 Vue.use(ElementUI, { size: "small" });