tianheng-ui 0.1.77 → 0.1.78

package/package.json

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

package/packages/FormMaking/WidgetConfig.vue

@@ -181,7 +181,7 @@
               <el-tooltip
                 slot="label"
                 effect="light"
-                content="使用接口的出参配置可选字段"
+                content="使用该接口的出参配置可选字段"
                 placement="top"
               >
                 <span style="color: #409EFF;">字段接口</span>
@@ -217,7 +217,7 @@
               <el-tooltip
                 slot="label"
                 effect="light"
-                content="开启后，选择数据接口会触发 remote-params 回调，用于从服务器查询字段"
+                content="开启后，选择数据接口会触发 remote-params 回调，用于从服务器获取字段"
                 placement="top"
               >
                 <span style="color: #409EFF;">远程字段</span>

package/packages/FormMaking/WidgetGuide.vue

@@ -3,14 +3,94 @@
     <el-steps :active="step" finish-status="success" simple>
       <el-step title="表单配置" icon="el-icon-s-operation" description="">
       </el-step>
-      <el-step title="按钮配置" icon="el-icon-set-up" description=""></el-step>
+      <el-step
+        title="选择初始模板"
+        icon="el-icon-set-up"
+        description=""
+      ></el-step>
+      <!-- <el-step
+        title="选择初始模板"
+        icon="el-icon-set-up"
+        description=""
+      ></el-step> -->
     </el-steps>
     <div class="content">
-      <div v-show="step === 0">
-        <div>你好</div>
-        <div>让我们来了解一些基本信息</div>
-      </div>
-      <div v-show="step === 1"></div>
+      <el-form :model="config" label-width="80px" size="small">
+        <div v-show="step === 0">
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="字段的配置方式"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段类型</span>
+            </el-tooltip>
+            <el-radio-group v-model="config.config.fields.type">
+              <el-radio-button label="custom">自定义</el-radio-button>
+              <el-radio-button label="api">接口导入</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="config.config.fields.type === 'api'">
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="使用该接口的出参配置可选字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段接口</span>
+            </el-tooltip>
+            <el-select
+              v-model="config.config.fields.api"
+              style="width:100%"
+              clearable
+              placeholder="请选择"
+              no-data-text="暂无接口，请前往【接口模块】创建"
+              filterable
+            >
+              <el-option
+                v-for="item in apiOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="表单名称">
+            <el-input
+              v-model="config.config.title"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="开启后，选择数据接口会触发 remote-params 回调，用于从服务器获取字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">远程字段</span>
+            </el-tooltip>
+            <el-switch v-model="config.config.fields.remote"> </el-switch>
+          </el-form-item>
+        </div>
+        <div v-show="step === 1" class="formTemplates">
+          <div
+            :class="
+              `formTemplates-item th-border th-hover_boxShadow_light ${
+                formTemplateActive === index ? 'th-active' : ''
+              }`
+            "
+            v-for="(item, index) in formTemplates"
+            :key="index"
+            @click="handleFormTemplateClick(index)"
+          >
+            <img :src="item.img" alt="" />
+            <div>{{ item.name }}</div>
+          </div>
+        </div>
+      </el-form>
     </div>
     <div class="footer">
       <div></div>
@@ -23,31 +103,59 @@
           @click="handleBack"
           >上一步</el-button
         >
-        <el-button type="primary" size="small" @click="handleNext"
-          >下一步<i class="el-icon-right el-icon--right"></i
-        ></el-button>
+        <el-button
+          v-if="step !== 1"
+          type="primary"
+          size="small"
+          @click="handleNext"
+        >
+          下一步<i class="el-icon-right el-icon--right"></i>
+        </el-button>
+        <el-button v-else type="success" size="small" @click="handleSave">
+          完&nbsp;&nbsp;&nbsp;成<i class="el-icon-finished el-icon--right"></i>
+        </el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import EmptyTemplateJson from "./assets/templates/empty.json";
+import GeneralTemplateJson from "./assets/templates/general.json";
+import PersonalDetailsTemplateJson from "./assets/templates/personalDetails.json";
+import TableTemplateJson from "./assets/templates/table.json";
+import { deepClone } from "./util";
 export default {
-  props: { visible: { type: Boolean, default: true } },
+  props: { config: Object, apiOptions: Array },
   data() {
     return {
-      show: this.visible,
-      step: 0
+      step: 0,
+      formTemplates: [
+        {
+          img: require("./assets/images/json0.png"),
+          name: "空白表单",
+          data: EmptyTemplateJson
+        },
+        {
+          img: require("./assets/images/json1.png"),
+          name: "典型表单",
+          data: GeneralTemplateJson
+        },
+        {
+          img: require("./assets/images/json3.png"),
+          name: "复杂表单-人员履历",
+          data: PersonalDetailsTemplateJson
+        },
+        {
+          img: require("./assets/images/json6.png"),
+          name: "数据列表",
+          data: TableTemplateJson
+        }
+      ],
+      formTemplateActive: null
     };
   },
-  watch: {
-    visible(val) {
-      this.show = val;
-    },
-    show(val) {
-      this.$emit("update:visible", val);
-    }
-  },
+  computed: {},
   created() {},
   mounted() {},
   methods: {
@@ -57,8 +165,15 @@ export default {
     handleNext() {
       this.step++;
     },
-    handleClose() {
-      this.show = !this.show;
+    handleSave() {
+      if (this.formTemplateActive !== null) {
+        const list = this.formTemplates[this.formTemplateActive].data.list;
+        this.config.list = deepClone(list);
+      }
+      this.$emit("save");
+    },
+    handleFormTemplateClick(index) {
+      this.formTemplateActive = index;
     }
   }
 };
@@ -70,7 +185,13 @@ export default {
   height: 100%;
 
   .content {
-    height: calc(100% - 50px);
+    height: calc(100% - 96px);
+    padding-top: 10px;
+    overflow-y: scroll;
+
+    .tools-item {
+      margin-bottom: 10px;
+    }
   }
   .footer {
     height: 50px;
@@ -78,9 +199,56 @@ export default {
     align-items: center;
     justify-content: space-between;
     box-sizing: border-box;
+    background-color: white;
 
     .stepView {
     }
   }
+  .fields-item {
+    span {
+      padding: 0px 8px 2px 8px;
+      border-radius: 4px;
+    }
+    span:nth-child(1) {
+      color: #1890ff;
+      background-color: #e8f4ff;
+    }
+    span:nth-child(2) {
+      color: #13ce66;
+      background-color: #e7faf0;
+    }
+    span:nth-child(3) {
+      color: #909399;
+      background-color: #f4f4f5;
+    }
+  }
+  .formTemplates {
+    .formTemplates-item {
+      display: inline-block;
+      margin: 10px;
+      padding: 10px;
+      width: 200px;
+      border-radius: 4px;
+      transition: 0.25s;
+
+      img {
+        width: 100%;
+        height: 180px;
+        object-fit: contain;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.widgetGuide {
+  .el-transfer {
+    display: flex;
+    align-items: center;
+  }
+  .el-transfer-panel {
+    flex: 1;
+  }
 }
 </style>

package/packages/FormMaking/WidgetTools.vue

@@ -74,7 +74,6 @@
             <el-button
               type="text"
               size="medium"
-              disabled
               @click="handleDialogOpen('importTemplate')"
               >导入模板
             </el-button>
@@ -120,7 +119,8 @@
       :showFooter="
         dialog.action === 'previewPc' ||
           dialog.action === 'previewH5' ||
-          dialog.action === 'importJson'
+          dialog.action === 'importJson' ||
+          dialog.action === 'importTemplate'
       "
       @on-close="handleDialogClose"
       @on-affirm="handleDialogAffirm"
@@ -133,7 +133,21 @@
         ></el-alert>
         <th-code-editor v-model="dialog.data" ref="codeEditor"></th-code-editor>
       </template>
-      <template v-if="dialog.action === 'importTemplate'"> </template>
+      <div v-if="dialog.action === 'importTemplate'" class="formTemplates">
+        <div
+          :class="
+            `formTemplates-item th-border th-hover_boxShadow_light ${
+              formTemplateActive === index ? 'th-active' : ''
+            }`
+          "
+          v-for="(item, index) in formTemplates"
+          :key="index"
+          @click="handleFormTemplateClick(index)"
+        >
+          <img :src="item.img" alt="" />
+          <div>{{ item.name }}</div>
+        </div>
+      </div>
       <template v-if="dialog.action === 'generateJson'">
         <th-code-editor v-model="dialog.data" ref="codeEditor"></th-code-editor>
       </template>
@@ -164,7 +178,7 @@
       <template v-if="dialog.action === 'previewPc'">
         <generate-form
           v-if="dialog.show"
-          :config="formData"
+          :config="formConfig"
           :oauthConfig="oauthConfig"
           :slotKeys="slotKeys"
           @change="handleDataChange"
@@ -188,7 +202,7 @@
           <generate-form
             v-if="dialog.show"
             class="box"
-            :config="formData"
+            :config="formConfig"
             :oauthConfig="oauthConfig"
             @change="handleDataChange"
             @button-submit="handleButtonSubmit"
@@ -230,13 +244,17 @@ import { deepClone } from "./util/index";
 import * as XLSX from "xlsx/xlsx.mjs";
 import generateCode from "./util/generateCode.js";
 import GenerateForm from "./GenerateForm";
+import EmptyTemplateJson from "./assets/templates/empty.json";
+import GeneralTemplateJson from "./assets/templates/general.json";
+import PersonalDetailsTemplateJson from "./assets/templates/personalDetails.json";
+import TableTemplateJson from "./assets/templates/table.json";
 export default {
   props: {
     baseConfig: Object,
     permissions: Array,
     basicComponents: Array,
     layoutComponents: Array,
-    formData: Object,
+    formConfig: Object,
     oauthConfig: Object,
     apiOptions: Array
   },
@@ -249,7 +267,6 @@ export default {
         data: null
       },
       dialogResultData: { show: false, data: null },
-
       dialogTitles: {
         previewPc: "预览-电脑端",
         previewH5: "预览-移动端",
@@ -258,7 +275,30 @@ export default {
         generateJson: "生成JSON",
         generateCode: "生成代码"
       },
-      slotKeys: ["blank_1681093126000_96387"]
+      formTemplates: [
+        {
+          img: require("./assets/images/json0.png"),
+          name: "空白表单",
+          data: EmptyTemplateJson
+        },
+        {
+          img: require("./assets/images/json1.png"),
+          name: "典型表单",
+          data: GeneralTemplateJson
+        },
+        {
+          img: require("./assets/images/json3.png"),
+          name: "复杂表单-人员履历",
+          data: PersonalDetailsTemplateJson
+        },
+        {
+          img: require("./assets/images/json6.png"),
+          name: "数据列表",
+          data: TableTemplateJson
+        }
+      ],
+      formTemplateActive: null,
+      slotKeys: []
     };
   },
   created() {},
@@ -418,13 +458,13 @@ export default {
       let data = "";
       switch (action) {
         case "generateJson":
-          data = JSON.stringify(this.formData, null, 2);
+          data = JSON.stringify(this.formConfig, null, 2);
           break;
         case "generateCode":
           data = {
             generate: generateCode(
               {
-                formConfig: JSON.stringify(this.formData, null, 2),
+                formConfig: JSON.stringify(this.formConfig, null, 2),
                 apiOptions: JSON.stringify(this.apiOptions, null, 2),
                 oauthConfig: JSON.stringify(this.oauthConfig, null, 2)
               },
@@ -432,7 +472,7 @@ export default {
             ),
             making: generateCode(
               {
-                formConfig: JSON.stringify(this.formData, null, 2),
+                formConfig: JSON.stringify(this.formConfig, null, 2),
                 apiOptions: JSON.stringify(this.apiOptions, null, 2),
                 oauthConfig: JSON.stringify(this.oauthConfig, null, 2)
               },
@@ -440,6 +480,9 @@ export default {
             )
           };
           break;
+        case "importTemplate":
+          this.formTemplateActive = null;
+          break;
 
         default:
           break;
@@ -453,6 +496,14 @@ export default {
       if (this.dialog.action === "importJson") {
         this.handleClick("import-json", JSON.parse(this.dialog.data));
       }
+      if (
+        this.dialog.action === "importTemplate" &&
+        this.formTemplateActive !== null
+      ) {
+        const list = this.formTemplates[this.formTemplateActive].data.list;
+        this.formConfig.list = deepClone(list);
+        this.$emit("importTemplate");
+      }
       this.handleDialogClose();
     },
     handleDialogFullscreen() {
@@ -472,8 +523,8 @@ export default {
     },
     handleNetworkConfig() {
       const fieldsApi = {
-        fields: this.formData.config.fields.api,
-        mounted: this.formData.config.mounted.api
+        fields: this.formConfig.config.fields.api,
+        mounted: this.formConfig.config.mounted.api
       };
       const initList = list => {
         for (const item of list) {
@@ -490,13 +541,16 @@ export default {
           }
         }
       };
-      initList(this.formData.list);
+      initList(this.formConfig.list);
       const apis = Object.values(fieldsApi);
       const network = {};
       this.apiOptions.map(item => {
         if (apis.includes(item.id)) network[item.id] = item;
       });
-      this.formData.config.network = network;
+      this.formConfig.config.network = network;
+    },
+    handleFormTemplateClick(index) {
+      this.formTemplateActive = index;
     }
   }
 };
@@ -520,6 +574,23 @@ export default {
     justify-content: right;
   }
 
+  .formTemplates {
+    .formTemplates-item {
+      display: inline-block;
+      margin: 10px;
+      padding: 10px;
+      width: 200px;
+      border-radius: 4px;
+      transition: 0.25s;
+
+      img {
+        width: 100%;
+        height: 180px;
+        object-fit: contain;
+      }
+    }
+  }
+
   .previewH5 {
     width: 300px;
     height: 649px;

package/packages/FormMaking/assets/templates/empty.json

@@ -0,0 +1,35 @@
+{
+  "list": [],
+  "config": {
+    "fields": {
+      "type": "api",
+      "api": "",
+      "remote": true
+    },
+    "ui": "element",
+    "title": "",
+    "width": "",
+    "labelWidth": 100,
+    "labelPosition": "right",
+    "labelSuffix": ":",
+    "size": "small",
+    "disabled": false,
+    "hideLabel": false,
+    "mounted": {
+      "api": ""
+    },
+    "eventScript": [
+      {
+        "id": "mounted",
+        "label": "mounted",
+        "value": ""
+      },
+      {
+        "id": "refresh",
+        "label": "refresh",
+        "value": ""
+      }
+    ],
+    "network": {}
+  }
+}