格式化代码

ZR.Vue/src/views/tool/build/index.vue

@@ -11,19 +11,9 @@
           <div class="components-title">
             <svg-icon icon-class="component" />输入型组件
           </div>
-          <draggable
+          <draggable class="components-draggable" :list="inputComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            class="components-draggable"
+            :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
-            :list="inputComponents"
+            <div v-for="(element, index) in inputComponents" :key="index" class="components-item" @click="addComponent(element)">
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            :clone="cloneComponent"
-            draggable=".components-item"
-            :sort="false"
-            @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in inputComponents" :key="index" class="components-item"
-              @click="addComponent(element)"
-            >
               <div class="components-body">
                 <svg-icon :icon-class="element.tagIcon" />
                 {{ element.label }}
@@ -33,21 +23,9 @@
           <div class="components-title">
             <svg-icon icon-class="component" />选择型组件
           </div>
-          <draggable
+          <draggable class="components-draggable" :list="selectComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            class="components-draggable"
+            :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
-            :list="selectComponents"
+            <div v-for="(element, index) in selectComponents" :key="index" class="components-item" @click="addComponent(element)">
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            :clone="cloneComponent"
-            draggable=".components-item"
-            :sort="false"
-            @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in selectComponents"
-              :key="index"
-              class="components-item"
-              @click="addComponent(element)"
-            >
               <div class="components-body">
                 <svg-icon :icon-class="element.tagIcon" />
                 {{ element.label }}
@@ -57,15 +35,9 @@
           <div class="components-title">
             <svg-icon icon-class="component" /> 布局型组件
           </div>
-          <draggable
+          <draggable class="components-draggable" :list="layoutComponents" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
-            class="components-draggable" :list="layoutComponents"
+            :clone="cloneComponent" draggable=".components-item" :sort="false" @end="onEnd">
-            :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
+            <div v-for="(element, index) in layoutComponents" :key="index" class="components-item" @click="addComponent(element)">
-            draggable=".components-item" :sort="false" @end="onEnd"
-          >
-            <div
-              v-for="(element, index) in layoutComponents" :key="index" class="components-item"
-              @click="addComponent(element)"
-            >
               <div class="components-body">
                 <svg-icon :icon-class="element.tagIcon" />
                 {{ element.label }}
@@ -90,25 +62,12 @@
       </div>
       <el-scrollbar class="center-scrollbar">
         <el-row class="center-board-row" :gutter="formConf.gutter">
-          <el-form
+          <el-form :size="formConf.size" :label-position="formConf.labelPosition" :disabled="formConf.disabled"
-            :size="formConf.size"
+            :label-width="formConf.labelWidth + 'px'">
-            :label-position="formConf.labelPosition"
-            :disabled="formConf.disabled"
-            :label-width="formConf.labelWidth + 'px'"
-          >
             <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
-              <draggable-item
+              <draggable-item v-for="(element, index) in drawingList" :key="element.renderKey" :drawing-list="drawingList" :element="element"
-                v-for="(element, index) in drawingList"
+                :index="index" :active-id="activeId" :form-conf="formConf" @activeItem="activeFormItem" @copyItem="drawingItemCopy"
-                :key="element.renderKey"
+                @deleteItem="drawingItemDelete" />
-                :drawing-list="drawingList"
-                :element="element"
-                :index="index"
-                :active-id="activeId"
-                :form-conf="formConf"
-                @activeItem="activeFormItem"
-                @copyItem="drawingItemCopy"
-                @deleteItem="drawingItemDelete"
-              />
             </draggable>
             <div v-show="!drawingList.length" class="empty-info">
               从左侧拖入或点选组件进行表单设计
@@ -118,19 +77,9 @@
       </el-scrollbar>
     </div>
 
-    <right-panel
+    <right-panel :active-data="activeData" :form-conf="formConf" :show-field="!!drawingList.length" @tag-change="tagChange" />
-      :active-data="activeData"
-      :form-conf="formConf"
-      :show-field="!!drawingList.length"
-      @tag-change="tagChange"
-    />
 
-    <code-type-dialog
+    <code-type-dialog :visible.sync="dialogVisible" title="选择生成类型" :show-file-name="showFileName" @confirm="generate" />
-      :visible.sync="dialogVisible"
-      title="选择生成类型"
-      :show-file-name="showFileName"
-      @confirm="generate"
-    />
     <input id="copyNode" type="hidden">
   </div>
 </template>
@@ -149,10 +98,16 @@ import {
   formConf
 } from '@/utils/generator/config'
 import {
-  exportDefault, beautifierConf, isNumberStr, titleCase
+  exportDefault,
+  beautifierConf,
+  isNumberStr,
+  titleCase
 } from '@/utils/index'
 import {
-  makeUpHtml, vueTemplate, vueScript, cssStyle
+  makeUpHtml,
+  vueTemplate,
+  vueScript,
+  cssStyle
 } from '@/utils/generator/html'
 import { makeUpJs } from '@/utils/generator/js'
 import { makeUpCss } from '@/utils/generator/css'
@@ -193,19 +148,19 @@ export default {
       activeData: drawingDefalut[0]
     }
   },
-  computed: {
+  computed: {},
-  },
   watch: {
     // eslint-disable-next-line func-names
     'activeData.label': function(val, oldVal) {
       if (
-        this.activeData.placeholder === undefined
+        this.activeData.placeholder === undefined ||
-        || !this.activeData.tag
+        !this.activeData.tag ||
-        || oldActiveId !== this.activeId
+        oldActiveId !== this.activeId
       ) {
         return
       }
-      this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
+      this.activeData.placeholder =
+        this.activeData.placeholder.replace(oldVal, '') + val
     },
     activeId: {
       handler(val) {
@@ -216,7 +171,7 @@ export default {
   },
   mounted() {
     const clipboard = new ClipboardJS('#copyNode', {
-      text: trigger => {
+      text: (trigger) => {
         const codeStr = this.generateCode()
         this.$notify({
           title: '成功',
@@ -226,7 +181,7 @@ export default {
         return codeStr
       }
     })
-    clipboard.on('error', e => {
+    clipboard.on('error', (e) => {
       this.$message.error('代码复制失败')
     })
   },
@@ -309,7 +264,9 @@ export default {
         item.componentName = `row${this.idGlobal}`
       }
       if (Array.isArray(item.children)) {
-        item.children = item.children.map(childItem => this.createIdAndKey(childItem))
+        item.children = item.children.map((childItem) =>
+          this.createIdAndKey(childItem)
+        )
       }
       return item
     },
@@ -353,9 +310,11 @@ export default {
       delete this.activeData.tag
       delete this.activeData.tagIcon
       delete this.activeData.document
-      Object.keys(newTag).forEach(key => {
+      Object.keys(newTag).forEach((key) => {
-        if (this.activeData[key] !== undefined
+        if (
-          && typeof this.activeData[key] === typeof newTag[key]) {
+          this.activeData[key] !== undefined &&
+          typeof this.activeData[key] === typeof newTag[key]
+        ) {
           newTag[key] = this.activeData[key]
         }
       })
@@ -363,12 +322,12 @@ export default {
       this.updateDrawingList(newTag, this.drawingList)
     },
     updateDrawingList(newTag, list) {
-      const index = list.findIndex(item => item.formId === this.activeId)
+      const index = list.findIndex((item) => item.formId === this.activeId)
       if (index > -1) {
         list.splice(index, 1, newTag)
       } else {
-        list.forEach(item => {
+        list.forEach((item) => {
-          if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
+          if (Array.isArray(item.children)) { this.updateDrawingList(newTag, item.children) }
         })
       }
     }
@@ -377,18 +336,22 @@ export default {
 </script>
 
 <style lang='scss'>
-body, html{
+body,
+html {
   margin: 0;
   padding: 0;
   background: #fff;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }
 
-input, textarea{
+input,
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }
 
 .editor-tabs {
@@ -466,7 +429,7 @@ input, textarea{
     cursor: pointer;
     font-size: 12px;
     &:hover {
-      background: rgba(210, 23, 23, 0.5)
+      background: rgba(210, 23, 23, 0.5);
     }
   }
   & + .reg-item {
@@ -495,7 +458,7 @@ input, textarea{
     margin-left: 6px;
   }
   .el-icon-plus {
-    color: #409EFF;
+    color: #409eff;
   }
   .el-icon-delete {
     color: #157a0c;
@@ -515,7 +478,7 @@ input, textarea{
 }
 
 $selectedColor: #f6f7ff;
-$lighterBlue: #409EFF;
+$lighterBlue: #409eff;
 
 .container {
   position: relative;
@@ -606,12 +569,12 @@ $lighterBlue: #409EFF;
   height: 42px;
   text-align: right;
   padding: 0 15px;
-  box-sizing: border-box;;
+  box-sizing: border-box;
   border: 1px solid #f1e8e8;
   border-top: none;
   border-left: none;
   .delete-btn {
-    color: #F56C6C;
+    color: #f56c6c;
   }
 }
 .logo-wrapper {
@@ -686,7 +649,8 @@ $lighterBlue: #409EFF;
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
       display: initial;
     }
     & > .component-name {
@@ -740,17 +704,20 @@ $lighterBlue: #409EFF;
     padding: 0 6px;
   }
 }
-.drawing-item, .drawing-row-item{
+.drawing-item,
+.drawing-row-item {
   &:hover {
     & > .el-form-item {
       background: $selectedColor;
       border-radius: 6px;
     }
-    & > .drawing-item-copy, & > .drawing-item-delete{
+    & > .drawing-item-copy,
+    & > .drawing-item-delete {
       display: initial;
     }
   }
-  & > .drawing-item-copy, & > .drawing-item-delete{
+  & > .drawing-item-copy,
+  & > .drawing-item-delete {
     display: none;
     position: absolute;
     top: -10px;
@@ -776,14 +743,13 @@ $lighterBlue: #409EFF;
   }
   & > .drawing-item-delete {
     right: 24px;
-    border-color: #F56C6C;
+    border-color: #f56c6c;
-    color: #F56C6C;
+    color: #f56c6c;
     background: #fff;
     &:hover {
-      background: #F56C6C;
+      background: #f56c6c;
       color: #fff;
     }
   }
 }
-
 </style>