tianheng-ui 0.1.63 → 0.1.65

package/package.json

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

package/packages/CodeEditor/index.vue

@@ -46,7 +46,7 @@ export default {
   },
   props: {
     // 编辑器内容
-    value: String,
+    value: [String, Object, Array],
     // 默认语言
     language: {
       type: String,
@@ -76,17 +76,32 @@ export default {
   data() {
     return {
       editor: null,
-      generateId:
-        "id_" +
-        Math.random()
-          .toString(36)
-          .substr(2, 4)
+      editorValue: this.value,
+      generateId: `id_${Math.random()
+        .toString(36)
+        .substr(2, 4)}`,
+      dataType: ""
     };
   },
-  mounted() {
-    // 初始化
-    this.initEditor();
-    this.setCompleteData();
+  watch: {
+    value(val) {
+      this.dataType = val.constructor;
+      if (this.dataType === Object || this.dataType === Array)
+        this.editorValue = JSON.stringify(val, null, 2);
+      else this.editorValue = val;
+    },
+    editorValue(val) {
+      if (this.dataType === Object || this.dataType === Array)
+        try {
+          this.$emit("change", JSON.parse(val));
+        } catch (error) {}
+      else this.$emit("change", val);
+
+      if (this.editor.getValue() !== val) {
+        this.editor.setValue(val);
+        this.editor.clearSelection();
+      }
+    }
   },
   computed: {
     selfStyle() {
@@ -102,24 +117,25 @@ export default {
       return style;
     }
   },
-  watch: {
-    value(val) {
-      if (this.editor.getValue() !== val) {
-        this.editor.setValue(val);
-        this.editor.clearSelection();
-      }
-    }
+  mounted() {
+    // 初始化
+    this.initEditor();
+    this.setCompleteData();
   },
   methods: {
     // 初始化
     initEditor() {
+      this.dataType = this.editorValue.constructor;
       // 创建实例
       this.editor = ace.edit(this.$refs[this.generateId], {
         mode: `ace/mode/${this.language}`,
         theme: `ace/theme/${this.theme}`,
         fontSize: 14,
         tabSize: 2,
-        value: this.value,
+        value:
+          this.dataType === Object || this.dataType === Array
+            ? JSON.stringify(this.editorValue, null, 2)
+            : this.editorValue,
         selectionStyle: "text",
         maxLines: this.maxLines,
         readOnly: this.readonly,
@@ -138,7 +154,7 @@ export default {
       });
       // 设置值改变监听
       this.editor.on("change", () => {
-        this.$emit("change", this.editor.getValue());
+        this.editorValue = this.editor.getValue();
       });
     },
     setCompleteData() {
@@ -169,6 +185,12 @@ export default {
         this.editor.destroy();
         this.editor = null;
       }
+    },
+    setValue(val) {
+      if (this.editor) {
+        this.editor.setValue(val);
+        this.editor.clearSelection();
+      }
     }
   },
   beforeDestroy() {

package/packages/FormMaking/GenerateForm.vue

@@ -24,7 +24,7 @@
         :slotKeys="slotKeys"
         :config="formConfig.config"
         :componentsData="componentsData"
-        @input-change="onInputChange"
+        @input-change="handleInputChange"
         @button-submit="handleButtonSubmit"
       >
         <template v-for="name in slotKeys" :slot="name">
@@ -32,32 +32,6 @@
         </template>
       </genetate-form-item>
     </el-form>
-    <!-- <van-form
-      v-else
-      class="generateForm"
-      :class="{ 'form-hideLabel': formConfig.config.hideLabel }"
-      :style="{ width: formWidth }"
-      style="margin: 0 auto;"
-      :label-align="formConfig.config.labelPosition"
-      :label-width="formConfig.config.labelWidth + 'px'"
-      ref="generateForm"
-    >
-      <genetate-form-item-h5
-        v-for="item in formConfig.list"
-        :key="item.key"
-        :models.sync="models"
-        :widget="item"
-        :slotKeys="slotKeys"
-        :config="formConfig.config"
-        :prop="item.type === 'grid' ? '' : item.model"
-        :componentsData="componentsData"
-        @input-change="onInputChange"
-      >
-        <template v-for="name in slotKeys" :slot="name">
-          <slot :name="name" />
-        </template>
-      </genetate-form-item-h5>
-    </van-form> -->
   </div>
 </template>
 
@@ -70,6 +44,8 @@ export default {
   name: "thFormGenerate",
   components: { GenetateFormItem },
   props: {
+    formId: String,
+    query: Object,
     oauthConfig: {
       type: Object,
       default: () => {
@@ -99,7 +75,6 @@ export default {
     return {
       formConfig: this.config,
       models: this.value,
-      query: {},
       componentsData: [],
       axios: null,
       showForm: false
@@ -117,15 +92,16 @@ export default {
     },
     value(val) {
       if (val) this.models = val;
+      console.log("watch models =>", this.models);
     }
   },
   created() {
-    this.query = this.$route.query || {};
     localStorage.setItem("_TH_OauthConfig", JSON.stringify(this.oauthConfig));
     this.axios = Axios.init(this.oauthConfig);
   },
   mounted() {
     this.generateModle(this.formConfig.list, this.models);
+    console.log("mounted models =>", this.models);
     this.handleMountedRemotData();
     this.showForm = true;
   },
@@ -203,9 +179,15 @@ export default {
     },
     // 获取组件的远端数据
     hendleElementRemoteData(item) {
-      if (!item.options.remote) return;
+      if (!item.options.remote || !item.options.remote.open) return;
       if (item.type === "upload" || item.type === "button") return;
-      const api = this.formConfig.config.network[item.options.remoteFunc];
+      
+      let api = "";
+      if (item.options.remote.api.constructor === String) {
+        api = this.formConfig.config.network[item.options.remote.api];
+      } else {
+        api = deepClone(item.options.remote.api);
+      }
       if (!api) return this.$message.warning("未知的接口，请检查配置信息");
 
       const requestConfig = {
@@ -218,8 +200,8 @@ export default {
       const params = {};
       for (let e of api.inParams) {
         const value =
-          e.defaultValue || getProperty(this.query, e.alias) || null;
-        setProperty(params, e.alias, value);
+          e.defaultValue || getProperty(this.query, e.pAlias) || null;
+        setProperty(params, e.pAlias, value);
       }
       if (api.needPage) {
         params.pageNum = params.pageNum || 1;
@@ -230,33 +212,43 @@ export default {
       else requestConfig.data = params;
 
       this.axios(requestConfig).then(res => {
-        const props = {
-          value: item.options.props.value || "value",
-          label: item.options.props.label || "label",
-          children: item.options.props.children || "children"
-        };
-        const initOptions = list => {
-          return list.map(element => {
-            const dic = {
-              value: element[props.value],
-              label: element[props.label]
-            };
-            if (element[props.children] && element[props.children].length) {
-              dic.children = initOptions(element[props.children]);
-            }
-            return dic;
-          });
-        };
         const resultData = res.data.records ? res.data.records : res.data;
-        item.options.remoteOptions = initOptions(resultData);
+        if (item.type === "descriptions" || item.type === "workflow") {
+          item.options.defaultValue = resultData;
+        } else {
+          const props = {
+            value: item.options.remote.props.value || "value",
+            label: item.options.remote.props.label || "label",
+            children: item.options.remote.props.children || "children"
+          };
+          const initOptions = list => {
+            return list.map(element => {
+              const dic = {
+                value: element[props.value],
+                label: element[props.label]
+              };
+              if (element[props.children] && element[props.children].length) {
+                dic.children = initOptions(element[props.children]);
+              }
+              return dic;
+            });
+          };
+          item.options.options = initOptions(resultData);
+        }
       });
     },
     handleMountedRemotData() {
       if (!this.formConfig.config.mounted.api) return;
 
-      const api = this.formConfig.config.network[
-        this.formConfig.config.mounted.api
-      ];
+      let api = "";
+      if (this.formConfig.config.mounted.api.constructor === String) {
+        api = this.formConfig.config.network[
+          this.formConfig.config.mounted.api
+        ];
+      } else {
+        api = deepClone(this.formConfig.config.mounted.api);
+      }
+
       if (!api) return this.$message.warning("未知的接口，请检查配置信息");
 
       const requestConfig = {
@@ -286,12 +278,20 @@ export default {
       });
     },
     handleButtonSubmit(element) {
-      console.log(element);
-      const api = this.formConfig.config.network[element.options.remoteFunc];
+      if (!element.options.remote.api)
+        return this.$emit("button-submit", element);
+
+      let api = "";
+      if (element.options.remote.api.constructor === String) {
+        api = this.formConfig.config.network[element.options.remote.api];
+      } else {
+        api = deepClone(element.options.remote.api);
+      }
+
       if (!api) return this.$message.warning("未知的接口，请检查配置信息");
 
       let params = {};
-      const inParams = api.inParams;
+      const inParams = api.inParams || [];
       const initParams = list => {
         list.map(item => {
           if (item.children) {
@@ -311,7 +311,10 @@ export default {
       const requestConfig = {
         url: api.url,
         method: api.method,
-        headers: api.headers
+        headers: {
+          ...api.headers,
+          formId: this.formId
+        }
       };
       if (["get", "delete"].includes(api.method.toLowerCase()))
         requestConfig.params = params;
@@ -330,6 +333,12 @@ export default {
           });
       });
     },
+    handleInputChange(value, field) {
+      this.$emit("change", field, value, this.models);
+    },
+    reset() {
+      this.$refs.generateForm.resetFields();
+    },
     getData() {
       return new Promise((resolve, reject) => {
         this.$refs.generateForm.validate(valid => {
@@ -341,12 +350,6 @@ export default {
         });
       });
     },
-    reset() {
-      this.$refs.generateForm.resetFields();
-    },
-    onInputChange(value, field) {
-      this.$emit("change", field, value, this.models);
-    },
     setConfig(json) {
       this.formConfig = json;
       this.generateModle(this.formConfig.list, this.models);
@@ -377,13 +380,6 @@ export default {
     }
   }
 
-  .widget-form-list-filler {
-    margin-bottom: 0 !important;
-  }
-  .widget-form-list-image {
-    margin-bottom: 0 !important;
-  }
-
   .tableH5 {
     // 操作按钮布局
     .tableH5-item > div {

package/packages/FormMaking/WidgetConfig.vue

@@ -338,7 +338,7 @@
             <div class="list-item-title">Function</div>
             <div class="list-item-value">{{ item.label }}</div>
             <el-popconfirm
-              :title="`是否确定删除方法 ${item.label}`"
+              :title="`是否确定删除 ${item.label}`"
               confirm-button-text="删除"
               confirm-button-type="danger"
               @confirm="handleEventDialogDelete(item, index)"

package/packages/FormMaking/WidgetForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widget-form-container" ref="formContainer">
+  <div class="widgetForm" ref="formContainer">
     <th-empty
       v-if="data.list.length == 0"
       class="form-empty"
@@ -21,9 +21,9 @@
         v-model="data.list"
         v-bind="{
           group: 'people',
-          ghostClass: 'ghost',
           animation: 200,
-          handle: '.drag-widget'
+          handle: '.drag-widget',
+          ghostClass: 'draggable-ghost'
         }"
         @add="handleWidgetAdd"
       >
@@ -117,11 +117,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.widget-form-container {
+.widgetForm {
   position: relative;
   width: 100%;
   height: calc(100% - 45px);
-  overflow-y: scroll;
+  overflow-y: overlay;
 
   .form-empty {
     position: absolute;
@@ -136,5 +136,11 @@ export default {
       font-size: 20px;
     }
   }
+  .draggable {
+    height: 100%;
+    .draggable-list {
+      min-height: 100%;
+    }
+  }
 }
 </style>

package/packages/FormMaking/WidgetFormItem.vue

@@ -2,14 +2,14 @@
   <el-form-item
     class="widgetFormItem"
     :class="{
-      active: selectWidget.model == widget.model,
-      isRequired: widget.options.required,
+      isActive: selectWidget.model == widget.model,
       isLayout: layoutElements.includes(widget.type),
       [`widget-form-list-${widget.type}`]: true,
       [widget.model]: true
     }"
     :label="widget.options.hideLabel ? '' : widget.name"
     :label-width="labelWidth"
+    :required="widget.options.required"
     :ref="widget.model"
     @click.native.stop="selectWidget = widget"
   >
@@ -30,8 +30,15 @@
       }"
     >
       <div class="actions">
-        <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone"></i>
-        <i class="iconfont icon-trash" @click.stop="handleWidgetDelete"></i>
+        <div class="clone">
+          <i
+            class="iconfont icon-icon_clone"
+            @click.stop="handleWidgetClone"
+          ></i>
+        </div>
+        <div class="trash">
+          <i class="iconfont icon-trash" @click.stop="handleWidgetDelete"></i>
+        </div>
       </div>
 
       <div class="drag">

package/packages/FormMaking/WidgetTools.vue

@@ -480,8 +480,8 @@ export default {
             });
           } else if (item.type === "table" || item.type === "tableH5") {
             initList(item.options.columns);
-          } else if (item.options.remote || item.options.remoteFunc) {
-            fieldsApi[item.model] = item.options.remoteFunc;
+          } else if (item.options.remote?.open || item.options.remote?.api) {
+            fieldsApi[item.model] = item.options.remote.api;
           }
         }
       };