tianheng-ui 0.1.23 → 0.1.25

package/packages/TableMaking/index.vue

@@ -10,6 +10,7 @@
         <slot name="action"></slot>
       </widget-tools>
       <widget-table
+        v-if="client === 'monitor'"
         style="height:calc(100% - 45px)"
         :config="tableConfig"
       ></widget-table>
@@ -17,7 +18,6 @@
     <div class="th-flex_aside th-is_border_left" style="width:300px">
       <widget-config
         :config="tableConfig"
-        :fields.sync="fields"
         :formOptions="formOptions"
         :apiOptions="apiOptions"
         ref="configRef"
@@ -42,7 +42,6 @@ export default {
         return deepClone(baseConfig);
       }
     },
-    fields: Array,
 
     /**
      * 表单配置列表。
@@ -121,6 +120,10 @@ export default {
         case "import-json":
           this.tableConfig = data;
           break;
+        case "monitor":
+        case "mobile":
+          this.client = action;
+          break;
 
         default:
           break;
@@ -139,6 +142,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

@@ -52,22 +52,39 @@
         :rules="formRules"
         ref="formRef"
       >
-        <el-collapse v-model="tableCollapse">
-          <el-collapse-item title="表格配置" name="group-table">
-            <el-form-item label="列表名称" required prop="table.title">
-              <el-input
-                v-model="config.table.title"
-                placeholder="请输入"
-              ></el-input>
-            </el-form-item>
-            <el-form-item label="列表接口" required prop="table.mounted.api">
+        <el-collapse v-model="collapseValue">
+          <el-collapse-item title="列表配置" name="group-table">
+            <el-form-item required prop="table.fieldsType">
+              <el-tooltip
+                slot="label"
+                effect="dark"
+                content="字段的配置方式"
+                placement="top"
+              >
+                <span style="color: #409EFF;">字段类型</span>
+              </el-tooltip>
+              <el-radio-group v-model="config.table.fieldsType">
+                <el-radio-button label="custom" disabled
+                  >自定义</el-radio-button
+                >
+                <el-radio-button label="fieldsApi">接口导入</el-radio-button>
+              </el-radio-group> </el-form-item
+            ><el-form-item required prop="table.mounted.api">
+              <el-tooltip
+                slot="label"
+                effect="dark"
+                content="列表初始化完成后，调用该接口获取列表数据"
+                placement="top"
+              >
+                <span style="color: #409EFF;">列表接口</span>
+              </el-tooltip>
               <el-select
                 v-model="config.table.mounted.api"
                 style="width:100%"
-                value-key="id"
                 clearable
                 placeholder="请选择"
                 no-data-text="暂无接口，请前往【接口模块】创建"
+                @change="handleFieldsApiChange"
               >
                 <el-option
                   v-for="item in apiOptions"
@@ -78,12 +95,18 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="开启查询">
-              <el-switch v-model="config.search.show"> </el-switch>
+            <el-form-item label="列表名称" required prop="table.title">
+              <el-input
+                v-model="config.table.title"
+                placeholder="请输入"
+              ></el-input>
             </el-form-item>
             <el-form-item label="列表序号">
               <el-switch v-model="config.table.sequence"> </el-switch>
             </el-form-item>
+            <el-form-item label="开启查询">
+              <el-switch v-model="config.search.show"> </el-switch>
+            </el-form-item>
           </el-collapse-item>
           <el-collapse-item title="排序配置" name="group-sort">
             <el-form-item label="排序类型">
@@ -417,12 +440,6 @@ export default {
         return {};
       }
     },
-    fields: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
     formOptions: Array,
     apiOptions: Array
   },
@@ -434,6 +451,7 @@ export default {
         { title: "列表属性", value: 2 }
       ],
       activeTab: { title: "列表属性", value: 2 },
+      fields: [],
       searchField: {
         isCheckAll: false,
         isIndeterminate: false
@@ -442,7 +460,7 @@ export default {
         isCheckAll: false,
         isIndeterminate: false
       },
-      tableCollapse: [
+      collapseValue: [
         "group-table",
         "group-pageInfo",
         "group-sort",
@@ -454,12 +472,18 @@ export default {
         "group-button"
       ],
       formRules: {
+        "table.fieldsType": [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ],
+        "table.fieldsApi": [
+          { 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 +592,23 @@ export default {
     handleActionConfig(data) {
       this.dialog = { show: true, data };
     },
+    handleFieldsApiChange(val) {
+      const dataArr = this.apiOptions.filter(item => {
+        return item.id === val;
+      });
+      if (dataArr.length && dataArr[0].paramsOut) {
+        const fields = dataArr[0].paramsOut.map(item => {
+          return {
+            label: item.note || item.name,
+            alias: item.name,
+            prop: item.name,
+            type: "input",
+            align: "left"
+          };
+        });
+        this.fields = fields;
+      } else this.fields = [];
+    },
     handleFormValidate() {
       return new Promise((resolve, reject) => {
         if (this.$refs.formRef) {
@@ -585,14 +626,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;