tianheng-ui 0.1.23 → 0.1.24

package/packages/TableMaking/widgetConfig.vue

@@ -52,8 +52,26 @@
         :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;