tianheng-ui 0.1.33 → 0.1.35

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateForm.vue

@@ -3,7 +3,7 @@
     <el-form
       class="generateForm"
       :class="{ isHideLabel: formJson.config.hideLabel }"
-      :style="{ width: formWidth }"
+      :style="{ width: formJson.config.width }"
       :label-suffix="formJson.config.labelSuffix"
       :size="formJson.config.size"
       :model="models"
@@ -97,7 +97,6 @@ export default {
         return [];
       }
     },
-    client: String
   },
   data() {
     return {
@@ -110,7 +109,6 @@ export default {
   computed: {
     formWidth() {
       if (this.formJson.config.width) return this.formJson.config.width;
-      if (this.client === "mobile") return "375px";
 
       return "";
     }

package/packages/FormMaking/WidgetTools.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="widgetTools">
     <div class="left">
-      <el-button
+      <!-- <el-button
         v-if="permissions.includes('monitor')"
         :class="{ active: client === 'monitor' }"
         type="text"
@@ -18,11 +18,10 @@
         icon="el-icon-mobile"
         @click="handleClick('mobile')"
       >
-      </el-button>
+      </el-button> -->
+      <slot> </slot>
     </div>
     <div class="right">
-      <slot> </slot>
-
       <el-button
         v-if="permissions.includes('clearable')"
         style="margin-left:10px;"
@@ -32,14 +31,34 @@
         @click="handleClick('clear')"
         >清空
       </el-button>
-      <el-button
-        v-if="permissions.includes('preview')"
-        type="text"
-        size="medium"
-        icon="el-icon-view"
-        @click="dialog.preview.visible = true"
-        >预览
-      </el-button>
+      <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
+        <el-button
+          v-if="permissions.includes('preview')"
+          type="text"
+          size="medium"
+          icon="el-icon-view"
+          slot="reference"
+          >预览
+        </el-button>
+        <div>
+          <el-button
+            type="text"
+            size="medium"
+            icon="el-icon-monitor"
+            @click="handleDialogOpen('previewPc')"
+            >电脑端
+          </el-button>
+        </div>
+        <div>
+          <el-button
+            type="text"
+            size="medium"
+            icon="el-icon-mobile"
+            @click="handleDialogOpen('previewH5')"
+            >移动端
+          </el-button>
+        </div>
+      </el-popover>
       <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
         <el-button
           v-if="permissions.includes('upload')"
@@ -54,7 +73,7 @@
             <el-button
               type="text"
               size="medium"
-              @click="dialog.import.visible = true"
+              @click="handleDialogOpen('importJson')"
               >导入JSON
             </el-button>
           </div>
@@ -73,7 +92,8 @@
             <el-button
               type="text"
               size="medium"
-              @click="dialog.template.visible = true"
+              disabled
+              @click="handleDialogOpen('importTemplate')"
               >导入模板
             </el-button>
           </div>
@@ -81,10 +101,7 @@
       </el-popover>
       <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
         <el-button
-          v-if="
-            permissions.includes('generateJson') ||
-              permissions.includes('generateCode')
-          "
+          v-if="permissions.includes('generate')"
           type="text"
           size="medium"
           icon="el-icon-document"
@@ -94,20 +111,19 @@
         <div>
           <div>
             <el-button
-              v-if="permissions.includes('generateJson')"
               type="text"
               size="medium"
-              @click="handleGenerateJson"
+              @click="handleDialogOpen('generateJson')"
             >
               生成JSON
             </el-button>
           </div>
           <div>
             <el-button
-              v-if="permissions.includes('generateCode')"
               type="text"
               size="medium"
-              @click="handleGenerateCode"
+              disabled
+              @click="handleDialogOpen('generateCode')"
             >
               生成代码
             </el-button>
@@ -116,145 +132,111 @@
       </el-popover>
     </div>
 
-    <!-- 导入JSON -->
     <th-dialog
-      title="导入JSON"
-      :visible="dialog.import.visible"
+      v-model="dialog.show"
+      :title="dialogTitles[dialog.action]"
       :modal-append-to-body="false"
-      @on-close="dialog.import.visible = false"
-      @on-affirm="handleImportJson"
-      @on-fullscreen="$refs.valueCodeEditor.resize()"
-    >
-      <el-alert
-        type="info"
-        title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
-      ></el-alert>
-      <th-code-editor
-        v-model="dialog.import.value"
-        ref="valueCodeEditor"
-      ></th-code-editor>
-    </th-dialog>
-
-    <!-- 导入模板 -->
-    <th-dialog
-      title="导入模板"
-      :visible="dialog.template.visible"
-      :modal-append-to-body="false"
-      @on-close="dialog.template.visible = false"
-      @on-affirm="handleImportTemplate"
-    >
-    
-    </th-dialog>
-
-    <!-- 预览 -->
-    <th-dialog
-      title="预览"
-      v-model="dialog.preview.visible"
-      :modal-append-to-body="false"
-      @on-close="dialog.preview.visible = false"
+      :showFooter="
+        dialog.action === 'previewPc' ||
+          dialog.action === 'previewH5' ||
+          dialog.action === 'importJson'
+      "
+      @on-close="handleDialogClose"
+      @on-affirm="handleDialogAffirm"
+      @on-fullscreen="handleDialogFullscreen"
     >
-      <generate-form
-        v-if="dialog.preview.visible"
-        :config="formData"
-        :value="formValue"
-        :oauthConfig="oauthConfig"
-        :remote="remoteData"
-        :slotKeys="slotKeys"
-        :client="client"
-        insite="true"
-        @on-change="handleDataChange"
-        @button-submit="handleButtonSubmit"
-        ref="generateForm"
-      >
-        <template v-for="name in slotKeys" :slot="name">
-          <slot :name="name" />
+      <template v-if="dialog.action === 'importJson'">
+        <el-alert
+          type="info"
+          title="JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可"
+        ></el-alert>
+        <th-code-editor v-model="dialog.data" ref="codeEditor"></th-code-editor>
+      </template>
+      <template v-if="dialog.action === 'importTemplate'"> </template>
+      <template v-if="dialog.action === 'generateJson'">
+        <th-code-editor v-model="dialog.data" ref="codeEditor"></th-code-editor>
+      </template>
+      <template v-if="dialog.action === 'generateCode'">
+        <el-tabs value="vue" type="border-card" style="box-shadow: none;">
+          <el-tab-pane label="Vue Component" name="vue">
+            <th-code-editor
+              v-model="dialog.data.vue"
+              language="html"
+              readonly
+              ref="vueCodeEditor"
+            ></th-code-editor>
+          </el-tab-pane>
+          <el-tab-pane label="HTML" name="html">
+            <th-code-editor
+              v-model="dialog.data.html"
+              language="html"
+              readonly
+              ref="htmlCodeEditor"
+            ></th-code-editor>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+      <template v-if="dialog.action === 'previewPc'">
+        <generate-form
+          :config="formData"
+          :value="formValue"
+          :oauthConfig="oauthConfig"
+          :remote="remoteData"
+          :slotKeys="slotKeys"
+          insite="true"
+          @on-change="handleDataChange"
+          @button-submit="handleButtonSubmit"
+          ref="generateForm"
+        >
+          <template v-for="name in slotKeys" :slot="name">
+            <slot :name="name" />
+          </template>
+        </generate-form>
+        <template slot="footer">
+          <el-button type="primary" @click="handleGetData">获取数据</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </template>
+      </template>
+      <template v-if="dialog.action === 'previewH5'">
+        <div class="previewH5">
+          <div class="header"></div>
+          <generate-form
+            class="box"
+            :config="formData"
+            :value="formValue"
+            :oauthConfig="oauthConfig"
+            :remote="remoteData"
+            :slotKeys="slotKeys"
+            insite="true"
+            @on-change="handleDataChange"
+            @button-submit="handleButtonSubmit"
+            ref="generateForm"
+          >
+            <template v-for="name in slotKeys" :slot="name">
+              <slot :name="name" />
+            </template>
+          </generate-form>
+        </div>
+        <template slot="footer">
+          <el-button type="primary" @click="handleGetData">获取数据</el-button>
+          <el-button @click="handleReset">重置</el-button>
         </template>
-      </generate-form>
-
-      <template slot="footer">
-        <el-button type="primary" @click="handleGetData">获取数据</el-button>
-        <el-button @click="handleReset">重置</el-button>
       </template>
     </th-dialog>
 
     <!-- 获取数据 -->
     <th-dialog
+      v-model="dialogResultData.show"
       title="获取数据"
-      :visible="dialog.data.visible"
       :modal-append-to-body="false"
-      @on-close="dialog.data.visible = false"
+      :showFooter="false"
+      @on-close="dialogResultData.show = false"
       @on-fullscreen="$refs.dataCodeEditor.resize()"
     >
       <th-code-editor
-        v-model="dialog.data.value"
+        v-model="dialogResultData.data"
         ref="dataCodeEditor"
       ></th-code-editor>
-
-      <template slot="footer">
-        <el-button
-          type="primary"
-          class="json-btn"
-          :data-clipboard-text="dialog.data.valueCopy"
-          >复制数据</el-button
-        >
-      </template>
-    </th-dialog>
-
-    <!-- 生成json -->
-    <th-dialog
-      title="生成JSON"
-      :visible="dialog.config.visible"
-      :modal-append-to-body="false"
-      @on-close="dialog.config.visible = false"
-      @on-fullscreen="$refs.jsonCodeEditor.resize()"
-    >
-      <th-code-editor
-        v-model="dialog.config.value"
-        ref="jsonCodeEditor"
-      ></th-code-editor>
-
-      <template slot="footer">
-        <el-button
-          type="primary"
-          class="json-btn"
-          :data-clipboard-text="dialog.config.valueCopy"
-          >复制数据</el-button
-        >
-      </template>
-    </th-dialog>
-
-    <!-- 生成代码 -->
-    <th-dialog
-      class="codeDialog"
-      title="生成代码"
-      :visible="dialog.code.visible"
-      :showFooter="false"
-      :modal-append-to-body="false"
-      @on-close="dialog.code.visible = false"
-      @on-fullscreen="handleDialogFullscreen"
-    >
-      <el-tabs
-        type="border-card"
-        style="box-shadow: none;"
-        v-model="dialog.code.type"
-      >
-        <el-tab-pane label="Vue Component" name="vue">
-          <th-code-editor
-            v-model="dialog.code.valueVue"
-            language="html"
-            readonly
-            ref="vueCodeEditor"
-          ></th-code-editor>
-        </el-tab-pane>
-        <el-tab-pane label="HTML" name="html">
-          <th-code-editor
-            v-model="dialog.code.valueHtml"
-            language="html"
-            readonly
-            ref="htmlCodeEditor"
-          ></th-code-editor>
-        </el-tab-pane>
-      </el-tabs>
     </th-dialog>
   </div>
 </template>
@@ -282,12 +264,19 @@ export default {
   data() {
     return {
       dialog: {
-        import: { visible: false, value: "" },
-        template: { visible: false, value: "" },
-        preview: { visible: false, value: "" },
-        data: { visible: false, value: "", valueCopy: "" },
-        config: { visible: false, value: "", valueCopy: "" },
-        code: { visible: false, valueHtml: "", valueVue: "", type: "vue" }
+        show: false,
+        action: "",
+        data: null
+      },
+      dialogResultData: { show: false, data: null },
+
+      dialogTitles: {
+        previewPc: "预览-电脑端",
+        previewH5: "预览-移动端",
+        importJson: "导入JSON",
+        importTemplate: "导入模板",
+        generateJson: "生成JSON",
+        generateCode: "生成代码"
       },
       remoteData: {
         func_test(resolve) {
@@ -449,13 +438,6 @@ export default {
       }
       return data;
     },
-    handleImportJson() {
-      this.dialog.import.visible = false;
-      this.handleClick("import-json", JSON.parse(this.dialog.import.value));
-    },
-    handleImportTemplate() {
-      this.dialog.template.visible = false;
-    },
     handleDataChange(field, value, data) {
       // console.log('handleDataChange =>',field, value, data);
     },
@@ -464,29 +446,15 @@ export default {
     },
     handleGetData() {
       this.$refs.generateForm.getData().then(data => {
-        this.dialog.data = {
-          visible: true,
-          value: JSON.stringify(data, null, 2),
-          valueCopy: JSON.stringify(data, null, 2)
+        this.dialogResultData = {
+          show: true,
+          data: JSON.stringify(data, null, 2)
         };
-        this.$nextTick(() => {
-          this.initClipboard();
-        });
       });
     },
     handleReset() {
       this.$refs.generateForm.reset();
     },
-    handleGenerateJson() {
-      this.dialog.config = {
-        visible: true,
-        value: JSON.stringify(this.formData, null, 2),
-        valueCopy: JSON.stringify(this.formData, null, 2)
-      };
-      this.$nextTick(() => {
-        this.initClipboard();
-      });
-    },
     initClipboard() {
       if (!this.jsonClipboard) {
         this.jsonClipboard = new Clipboard(".json-btn");
@@ -495,17 +463,47 @@ export default {
         });
       }
     },
-    handleGenerateCode() {
-      this.dialog.code = {
-        visible: true,
-        valueHtml: generateCode(JSON.stringify(this.formData), "html"),
-        valueVue: generateCode(JSON.stringify(this.formData), "vue"),
-        type: "vue"
-      };
+    handleDialogOpen(action) {
+      let data = "";
+      switch (action) {
+        case "generateJson":
+          data = JSON.stringify(this.formData, null, 2);
+          break;
+        case "generateCode":
+          data = {
+            html: generateCode(JSON.stringify(this.formData), "html"),
+            vue: generateCode(JSON.stringify(this.formData), "vue")
+          };
+          break;
+
+        default:
+          break;
+      }
+      this.dialog = { show: true, action, data };
+    },
+    handleDialogClose() {
+      this.dialog.show = false;
+    },
+    handleDialogAffirm() {
+      if (this.dialog.action === "importJson") {
+        this.handleClick("import-json", JSON.parse(this.dialog.data));
+      }
+      this.handleDialogClose();
     },
     handleDialogFullscreen() {
-      this.$refs.vueCodeEditor.resize();
-      this.$refs.htmlCodeEditor.resize();
+      switch (this.dialog.action) {
+        case "importJson":
+        case "generateJson":
+          this.$refs.codeEditor.resize();
+          break;
+        case "generateCode":
+          this.$refs.vueCodeEditor.resize();
+          this.$refs.htmlCodeEditor.resize();
+          break;
+
+        default:
+          break;
+      }
     }
   }
 };
@@ -521,13 +519,6 @@ export default {
   border-bottom: solid 2px #e4e7ed;
 
   .left {
-    min-width: 60px;
-    .el-button {
-      color: #333;
-    }
-    .active {
-      color: #409eff;
-    }
   }
   .right {
     flex: 1;
@@ -535,5 +526,23 @@ export default {
     align-items: center;
     justify-content: right;
   }
+
+  .previewH5 {
+    width: 300px;
+    height: 649px;
+    margin: auto;
+    padding: 0 10px;
+    border-radius: 10px;
+    background-image: url("../../lib/theme-chalk/images/iPhone13.png");
+    background-size: 100% 100%;
+    overflow: hidden;
+    .header {
+      height: 44px;
+    }
+    .box {
+      height: 570px;
+      overflow-y: scroll;
+    }
+  }
 }
 </style>

package/packages/FormMaking/index.vue

@@ -215,8 +215,7 @@ export default {
         "upload",
         "clearable",
         "preview",
-        "generateCode",
-        "generateJson"
+        "generate"
       ]
     },
     basicFields: {
@@ -354,11 +353,7 @@ export default {
     },
 
     handleClear() {
-      this.formConfig = {
-        list: [],
-        config: this.baseConfig
-      };
-
+      this.formConfig.list = []
       this.widgetFormSelect = {};
     },
     handleWidgetToolsChange(val, data) {

package/packages/TableMaking/WidgetTools.vue

@@ -17,9 +17,9 @@
         @click="handleClick('mobile')"
       >
       </el-button> -->
+      <slot> </slot>
     </div>
     <div class="right">
-      <slot> </slot>
       <el-button
         v-if="permissions.includes('clearable')"
         style="margin-left:10px;"
@@ -44,7 +44,7 @@
             type="text"
             size="medium"
             icon="el-icon-monitor"
-            @click="handleDialogOpen('preview_pc')"
+            @click="handleDialogOpen('previewPc')"
             >电脑端
           </el-button>
         </div>
@@ -53,7 +53,7 @@
             type="text"
             size="medium"
             icon="el-icon-mobile"
-            @click="handleDialogOpen('preview_h5')"
+            @click="handleDialogOpen('previewH5')"
             >移动端
           </el-button>
         </div>
@@ -145,11 +145,12 @@
       @on-close="handleDialogClose"
       @on-affirm="handleDialogAffirm"
     >
-      <template v-if="dialog.action === 'preview_pc'">
+      <template v-if="dialog.action === 'previewPc'">
         <th-table-generate :config="deepClone(config)"> </th-table-generate>
       </template>
-      <template v-if="dialog.action === 'preview_h5'">
-        <th-list-generate :data="[]" :config="deepClone(config)"> </th-list-generate>
+      <template v-if="dialog.action === 'previewH5'">
+        <th-list-generate :data="[]" :config="deepClone(config)">
+        </th-list-generate>
       </template>
       <template v-else-if="dialog.action === 'importJson'">
         <el-alert
@@ -190,8 +191,8 @@ export default {
         data: {}
       },
       dialogTitles: {
-        preview_pc: "预览-电脑端",
-        preview_h5: "预览-移动端",
+        previewPc: "预览-电脑端",
+        previewH5: "预览-移动端",
         importJson: "导入JSON",
         importTemplate: "导入模板",
         generateJson: "生成JSON",
@@ -263,13 +264,6 @@ export default {
   border-bottom: solid 2px #e4e7ed;
 
   .left {
-    min-width: 60px;
-    .el-button {
-      color: #333;
-    }
-    .active {
-      color: #409eff;
-    }
   }
   .right {
     flex: 1;

package/packages/TableMaking/custom/config.js

@@ -40,13 +40,11 @@ export const table = {
     table: {
       border: true,
       height: "",
-      maxHeight: "",
-      customStyle: ""
     },
     cell: {
       customStyle: "",
       margin: "",
-      padding: "20rpx",
+      padding: "10px",
       "border-bottom": "1px solid #e5e5e5"
     },
     title: {

package/packages/TableMaking/custom/items/search/index-h5.vue

@@ -11,6 +11,7 @@
           v-model="data[item.prop]"
           :placeholder="item.label"
           :disabled="item.disabled"
+          size="small"
           clearable
         ></el-input>
         <el-date-picker
@@ -22,6 +23,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          size="small"
           clearable
         >
         </el-date-picker>
@@ -33,6 +35,7 @@
           :multiple-limit="item.multipleLimit"
           :filterable="item.filterable"
           :disabled="item.disabled"
+          size="small"
           clearable
         >
           <template v-if="item.remote">