tianheng-ui 0.1.22 → 0.1.24

package/packages/FormMaking/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="formMaking">
     <el-container
-      v-if="Object.keys(widgetFormData.config).length"
+      v-if="Object.keys(formConfig.config).length"
       class="container-box"
     >
       <el-main>
@@ -106,7 +106,7 @@
               :client.sync="client"
               :basicComponents="basicComponents"
               :layoutComponents="layoutComponents"
-              :formData="widgetFormData"
+              :formData="formConfig"
               :formValue="widgetValue"
               :oauthConfig="oauthConfig"
               :slotKeys="Object.keys($slots)"
@@ -119,7 +119,7 @@
             <el-main>
               <widget-form
                 ref="widgetForm"
-                :data="widgetFormData"
+                :data="formConfig"
                 :select.sync="widgetFormSelect"
                 :client="client"
               >
@@ -148,15 +148,18 @@
               </el-header>
               <el-main class="config-container-content">
                 <widget-config
-                  v-show="configTab == 'widget'"
+                  v-if="configTab == 'widget'"
                   :data="widgetFormSelect"
-                  :config="widgetFormData.config"
+                  :config="formConfig.config"
+                  :fields="fields"
                   @update="handleWidgetConfigUpdate"
                 >
                 </widget-config>
                 <form-config
-                  v-show="configTab == 'form'"
-                  :data="widgetFormData.config"
+                  v-if="configTab == 'form'"
+                  :config="formConfig.config"
+                  :fieldsOptions="fieldsOptions"
+                  @fieldsTableChange="handleFieldsTableChange"
                 ></form-config>
               </el-main>
             </el-container>
@@ -250,10 +253,8 @@ export default {
       type: Array,
       default: () => ["grid", "filler", "divider"]
     },
-    remoteFuncs: {
-      type: Object,
-      default: () => {}
-    }
+    fieldsOptions: Array,
+    apiOptions: Array
   },
   data() {
     this.basicComponents = basicComponents;
@@ -261,11 +262,12 @@ export default {
     this.layoutComponents = layoutComponents;
     this.baseConfig = deepClone(baseConfig);
     return {
-      widgetFormData: this.config,
+      formConfig: this.config,
       widgetFormSelect: {},
       widgetValue: {},
-      configTab: "widget",
-      client: "monitor"
+      configTab: "form",
+      client: "monitor",
+      fields: []
     };
   },
   computed: {
@@ -289,7 +291,7 @@ export default {
     }
   },
   watch: {
-    widgetFormData: {
+    formConfig: {
       deep: true,
       handler: function(val) {
         this.$emit("update:config", val);
@@ -302,53 +304,23 @@ export default {
       }
       this.setJSON(val);
     },
-    remoteFuncs(val) {
+    apiOptions(val) {
       if (val) {
-        const props = val.props;
-        const options = val.options;
-
-        /**
-         * 支持外部接口转自定义事件（待完成）
-         */
-        //         const _eventScript = options.map(item => {
-        //           return {
-        //             id: item[props.key],
-        //             label: item[props.name],
-        //             value: `
-        // const params = ${JSON.stringify(item.params)}
-        // const headers = ${JSON.stringify(item.headers || {})}
-        // const request = {
-        //   url:"${item.url}",
-        //   method:"${item.method}",
-        //   data:params,
-        //   headers:headers
-        // }
-        // this.hendleRemoteData(request)
-        //             `
-        //           };
-        //         });
-        //         this.widgetFormData.config.eventScript = this.widgetFormData.config.eventScript.concat(
-        //           _eventScript
-        //         );
-
-        const _remoteFuncs = options.map(item => {
-          return { ...item, id: item[props.key], label: item[props.name] };
-        });
-        this.widgetFormData.config.remoteFuncs = _remoteFuncs;
+        this.formConfig.config.network = val;
       }
     }
   },
   created() {
     this.initConfig();
-    this.widgetFormData.config = Object.assign(
+    this.formConfig.config = Object.assign(
       this.baseConfig,
-      this.widgetFormData.config
+      this.formConfig.config
     );
 
-    if (this.widgetFormData.list && this.widgetFormData.list.length) {
-      this.widgetFormSelect = this.widgetFormData.list[0];
+    if (this.formConfig.list && this.formConfig.list.length) {
+      this.widgetFormSelect = this.formConfig.list[0];
     } else {
-      this.widgetFormData.list = [];
+      this.formConfig.list = [];
     }
   },
   mounted() {},
@@ -383,7 +355,7 @@ export default {
     },
 
     handleClear() {
-      this.widgetFormData = {
+      this.formConfig = {
         list: [],
         config: this.baseConfig
       };
@@ -414,17 +386,20 @@ export default {
     handleWidgetConfigUpdate(val) {
       this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
     },
+    handleFieldsTableChange(val) {
+      this.fields = val;
+    },
     clear() {
       this.handleClear();
     },
     getJSON() {
-      return this.widgetFormData;
+      return this.formConfig;
     },
     getHtml() {
-      return generateCode(JSON.stringify(this.widgetFormData));
+      return generateCode(JSON.stringify(this.formConfig));
     },
     setJSON(json) {
-      this.widgetFormData = json;
+      this.formConfig = json;
 
       if (json.list.length > 0) {
         this.widgetFormSelect = json.list[0];

package/packages/FormMaking/styles/index.scss

@@ -614,17 +614,17 @@ $primary-background-color: #ecf5ff;
     }
 
     .config-container-content {
-      padding: 10px;
+      // padding: 10px;
 
-      .el-form-item__label {
-        padding: 0;
-        font-weight: 500;
-      }
+      // .el-form-item__label {
+      //   padding: 0;
+      //   font-weight: 500;
+      // }
 
-      .el-form-item {
-        border-bottom: solid 1px #e1e1e1;
-        padding-bottom: 10px;
-      }
+      // .el-form-item {
+      //   border-bottom: solid 1px #e1e1e1;
+      //   padding-bottom: 10px;
+      // }
 
       .config-pattern-input {
         .el-input-group__prepend,

package/packages/TableMaking/custom/config.js

@@ -148,7 +148,7 @@ export const tools = {
 // 接口配置
 export const network = {};
 
-export const tableConfig = {
+export const baseConfig = {
   search,
   table,
   tools,

package/packages/TableMaking/index.vue

@@ -17,7 +17,7 @@
     <div class="th-flex_aside th-is_border_left" style="width:300px">
       <widget-config
         :config="tableConfig"
-        :fields.sync="fields"
+        :fieldsOptions="fieldsOptions"
         :formOptions="formOptions"
         :apiOptions="apiOptions"
         ref="configRef"
@@ -42,7 +42,26 @@ export default {
         return deepClone(baseConfig);
       }
     },
-    fields: Array,
+
+     /**
+     * 字段表配置列表。
+     * [
+     *  {
+     *    id:'',    表单id
+     *    label:'',   表单名称
+     *    children:[
+     *      {
+              label: "主键",
+              alias: "id",
+              prop: "id",
+              type: "input",
+              align: "left"
+            }
+     *    ]
+     *  }
+     * ]
+     */
+    fieldsOptions: Array,
 
     /**
      * 表单配置列表。
@@ -139,6 +158,10 @@ export default {
             }
           })
           .catch(err => {
+            if (!this.tableConfig.table.fieldsTable) {
+              this.$message.warning("请选择字段表");
+              return reject();
+            }
             if (!this.tableConfig.table.title) {
               this.$message.warning("请选择列表名称");
               return reject();

package/packages/TableMaking/widgetConfig.vue

@@ -48,12 +48,30 @@
         :model="config"
         label-position="left"
         label-width="80px"
-        size="mini"
+        size="small"
         :rules="formRules"
         ref="formRef"
       >
-        <el-collapse v-model="tableCollapse">
-          <el-collapse-item title="表格配置" name="group-table">
+        <el-collapse v-model="collapseValue">
+          <el-collapse-item title="列表配置" name="group-table">
+            <el-form-item label="字段表" required prop="table.fieldsTable">
+              <el-select
+                v-model="config.table.fieldsTable"
+                style="width:100%"
+                clearable
+                placeholder="请选择"
+                no-data-text="暂无接口，请前往【数据源模块】创建"
+                @change="handleFieldsTableChange"
+              >
+                <el-option
+                  v-for="item in fieldsOptions"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
             <el-form-item label="列表名称" required prop="table.title">
               <el-input
                 v-model="config.table.title"
@@ -64,7 +82,6 @@
               <el-select
                 v-model="config.table.mounted.api"
                 style="width:100%"
-                value-key="id"
                 clearable
                 placeholder="请选择"
                 no-data-text="暂无接口，请前往【接口模块】创建"
@@ -417,12 +434,7 @@ export default {
         return {};
       }
     },
-    fields: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
+    fieldsOptions: Array,
     formOptions: Array,
     apiOptions: Array
   },
@@ -434,6 +446,7 @@ export default {
         { title: "列表属性", value: 2 }
       ],
       activeTab: { title: "列表属性", value: 2 },
+      fields: [],
       searchField: {
         isCheckAll: false,
         isIndeterminate: false
@@ -442,7 +455,7 @@ export default {
         isCheckAll: false,
         isIndeterminate: false
       },
-      tableCollapse: [
+      collapseValue: [
         "group-table",
         "group-pageInfo",
         "group-sort",
@@ -454,12 +467,15 @@ export default {
         "group-button"
       ],
       formRules: {
+        "table.fieldsTable": [
+          { required: true, message: "请选择字段表", trigger: "change" }
+        ],
         "table.title": [
           { required: true, message: "请选择列表名称", trigger: "change" }
         ],
         "table.mounted.api": [
           { required: true, message: "请选择列表接口", trigger: "change" }
-        ],
+        ]
       },
       dialog: { show: false, data: null }
     };
@@ -568,6 +584,13 @@ export default {
     handleActionConfig(data) {
       this.dialog = { show: true, data };
     },
+    handleFieldsTableChange(val) {
+      const data = this.fieldsOptions.filter(item => {
+        return item.id === val;
+      });
+      if (data.length) this.fields = data[0].children;
+      else this.fields = [];
+    },
     handleFormValidate() {
       return new Promise((resolve, reject) => {
         if (this.$refs.formRef) {
@@ -585,14 +608,17 @@ export default {
 
 <style lang="scss" scoped>
 .widgetConfig {
-  height: 100%;
   background-color: white;
   .tabs {
+    position: sticky;
+    top: 0;
     display: flex;
     align-items: center;
     height: 45px;
+    background-color: white;
     border-bottom: 1px solid #dcdfe6;
     box-sizing: border-box;
+    z-index: 100;
 
     .tabs-item {
       flex: 1;