tianheng-ui 0.1.38 → 0.1.40

package/packages/TableMaking/widgetConfig.vue

@@ -12,40 +12,43 @@
       </div>
     </div>
     <div v-if="activeTab.value === 'field'" class="configItem fieldsView">
-      <el-collapse v-model="collapseValue">
-        <el-collapse-item title="查询字段" name="group-fields_search">
-          <el-checkbox
-            v-model="searchField.isCheckAll"
-            :indeterminate="searchField.isIndeterminate"
-            @change="val => handleCheckAllChange(val, 'searchField')"
-            >全选</el-checkbox
-          >
-          <el-checkbox
-            v-for="item in fields"
-            :label="item.prop"
-            :key="`searchField-${item.prop}-${item.isSearch}`"
-            :checked="item.isSearch"
-            @change="val => handleCheckboxChange(val, 'searchField', item)"
-            >{{ item.label }}</el-checkbox
-          >
-        </el-collapse-item>
-        <el-collapse-item title="列表字段" name="group-fields_list">
-          <el-checkbox
-            v-model="tableField.isCheckAll"
-            :indeterminate="tableField.isIndeterminate"
-            @change="val => handleCheckAllChange(val, 'tableField')"
-            >全选</el-checkbox
-          >
-          <el-checkbox
-            v-for="item in fields"
-            :label="item.prop"
-            :key="`tableField-${item.prop}-${item.isTable}`"
-            :checked="item.isTable"
-            @change="val => handleCheckboxChange(val, 'tableField', item)"
-            >{{ item.label }}</el-checkbox
-          >
-        </el-collapse-item>
-      </el-collapse>
+      <template v-if="fields.length">
+        <el-collapse v-model="collapseValue">
+          <el-collapse-item title="查询字段" name="group-fields_search">
+            <el-checkbox
+              v-model="searchField.isCheckAll"
+              :indeterminate="searchField.isIndeterminate"
+              @change="val => handleCheckAllChange(val, 'searchField')"
+              >全选</el-checkbox
+            >
+            <el-checkbox
+              v-for="item in fields"
+              :label="item.prop"
+              :key="`searchField-${item.prop}-${item.isSearch}`"
+              :checked="item.isSearch"
+              @change="val => handleCheckboxChange(val, 'searchField', item)"
+              >{{ item.label }}</el-checkbox
+            >
+          </el-collapse-item>
+          <el-collapse-item title="列表字段" name="group-fields_table">
+            <el-checkbox
+              v-model="tableField.isCheckAll"
+              :indeterminate="tableField.isIndeterminate"
+              @change="val => handleCheckAllChange(val, 'tableField')"
+              >全选</el-checkbox
+            >
+            <el-checkbox
+              v-for="item in fields"
+              :label="item.prop"
+              :key="`tableField-${item.prop}-${item.isTable}`"
+              :checked="item.isTable"
+              @change="val => handleCheckboxChange(val, 'tableField', item)"
+              >{{ item.label }}</el-checkbox
+            >
+          </el-collapse-item>
+        </el-collapse>
+      </template>
+      <th-empty v-else description="请选择列表接口"></th-empty>
     </div>
     <div v-if="activeTab.value === 'table' && config.table" class="configItem">
       <el-form
@@ -112,7 +115,7 @@
               <el-switch v-model="config.search.show"> </el-switch>
             </el-form-item>
           </el-collapse-item>
-          <el-collapse-item title="排序配置" name="group-sort">
+          <el-collapse-item title="排序配置" name="group-table_sort">
             <el-form-item label="排序类型">
               <el-radio-group v-model="config.table.sort.type">
                 <el-radio-button label="1">降序</el-radio-button>
@@ -135,7 +138,7 @@
               </el-select>
             </el-form-item>
           </el-collapse-item>
-          <el-collapse-item title="分页配置" name="group-pageInfo">
+          <el-collapse-item title="分页配置" name="group-table_pageInfo">
             <el-form-item label="开启分页">
               <el-switch v-model="config.table.pageInfo.show"> </el-switch>
             </el-form-item>
@@ -207,7 +210,7 @@
               </el-form-item>
             </template>
           </el-collapse-item>
-          <el-collapse-item title="提示语配置" name="group-hint">
+          <el-collapse-item title="提示语配置" name="group-table_hint">
             <el-form-item label="空数据">
               <el-input
                 v-model="config.table.empty.text"
@@ -221,9 +224,9 @@
               ></el-input>
             </el-form-item>
           </el-collapse-item>
-          <!-- <el-collapse-item title="数据接口配置" name="group-network">
+          <!-- <el-collapse-item title="数据接口配置" name="group-table_network">
           </el-collapse-item> -->
-          <el-collapse-item name="group-button">
+          <el-collapse-item name="group-table_button">
             <template slot="title">
               <div class="collapse-title">
                 <div>按钮配置</div>
@@ -475,17 +478,39 @@
       :modal-append-to-body="false"
       :showFooter="false"
     >
-      <div class="toolsSeting th-flex_box">
-        <el-card class="th-flex_aside" style="width:200px;margin-right:10px;">
-          <el-tree
-            :data="Object.values(config.tools || [])"
-            :props="{ label: 'name' }"
-            node-key="name"
-            @node-click="handleActionConfig"
-          ></el-tree>
-        </el-card>
-        <el-card v-if="dialog.data" class="th-fiex_content">
+      <div class="eventsSetting th-flex_box th-is_border">
+        <div class="list th-flex_aside">
+          <div class="events-header th-sticky_top">
+            <div>按钮库</div>
+            <!-- <el-button type="text" icon="el-icon-plus" size="mini" disabled
+              >添加</el-button
+            > -->
+          </div>
+          <div
+            v-for="(item, index) in Object.values(config.tools || [])"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active': dialog.data && dialog.data.name === item.name
+            }"
+            :key="item.key"
+            @click="dialog.data = item"
+          >
+            <div class="list-item-value">{{ item.name }}</div>
+            <!-- <el-popconfirm
+              :title="`是否确定删除方法 ${item.name}`"
+              confirm-button-text="删除"
+              confirm-button-type="danger"
+              @confirm="handleEventDialogDelete(item, index)"
+            >
+              <i class="el-icon-delete" slot="reference"></i>
+            </el-popconfirm> -->
+          </div>
+        </div>
+        <div class="detail th-fiex_content">
+          <div class="events-header th-sticky_top">按钮详情</div>
           <el-form
+            v-if="dialog.data"
+            class="detail-form"
             ref="form"
             :model="dialog.data"
             label-width="80px"
@@ -587,7 +612,7 @@
               </el-select>
             </el-form-item>
           </el-form>
-        </el-card>
+        </div>
       </div>
     </th-dialog>
   </div>
@@ -626,12 +651,14 @@ export default {
         isIndeterminate: false
       },
       collapseValue: [
+        "group-fields_search",
+        "group-fields_table",
         "group-table",
-        "group-pageInfo",
-        "group-sort",
-        "group-hint",
-        "group-network",
-        "group-button"
+        "group-table_pageInfo",
+        "group-table_sort",
+        "group-table_hint",
+        "group-table_network",
+        "group-table_button"
       ],
       pageInfoLayout: [
         { label: "总条数", value: "total" },
@@ -865,6 +892,54 @@ export default {
       }
     }
   }
+
+  .eventsSetting {
+    height: 100%;
+
+    .events-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+      height: 40px;
+      background-color: #f2f6fc;
+      z-index: 10;
+    }
+
+    .list {
+      width: 200px;
+      min-height: 430px;
+      overflow-y: overlay;
+      border-right: 1px solid #eee;
+
+      .list-item {
+        display: flex;
+        // align-items: center;
+        margin: 5px;
+        padding: 10px;
+        border-radius: 3px;
+        border: 1px solid #dcdfe6;
+        transition: 0.25s;
+
+        .list-item-title {
+          color: var(--th-green);
+        }
+        .list-item-value {
+          flex: 1;
+          padding: 0 5px;
+        }
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .detail {
+      .detail-form {
+        padding: 10px;
+      }
+    }
+  }
 }
 </style>
 

package/packages/TableMaking/widgetTable.vue

@@ -79,7 +79,7 @@
       <div v-else class="search-content"></div>
     </div>
     <div class="table-title">列表字段</div>
-    <div class="tableList" style="height: calc(100% - 340px);">
+    <div class="tableList" style="height: calc(100% - 350px);">
       <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
@@ -219,9 +219,11 @@ export default {
 
 <style lang="scss" scoped>
 .widgetTable {
-  height: 100%;
+  height: calc(100% - 45px);
   padding: 10px;
   background-color: white;
+  overflow-y: overlay;
+
   .table-title {
     height: 25px;
     line-height: 25px;

package/packages/FormMaking/FormConfig.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="form-config">
-    <el-form
-      :model="config"
-      label-position="left"
-      label-width="80px"
-      size="small"
-      :rules="formRules"
-      ref="formRef"
-    >
-      <el-collapse v-model="collapseValue">
-        <el-collapse-item title="表单配置" name="group-form">
-          <el-form-item prop="fieldsType" required>
-            <el-tooltip
-              slot="label"
-              effect="light"
-              content="字段的配置方式"
-              placement="top"
-            >
-              <span style="color: #409EFF;">字段类型</span>
-            </el-tooltip>
-            <el-radio-group v-model="config.fieldsType">
-              <el-radio-button label="custom">自定义</el-radio-button>
-              <el-radio-button label="fieldsApi">接口导入</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item
-            v-if="config.fieldsType === 'fieldsApi'"
-            prop="fieldsApi"
-            required
-          >
-            <el-tooltip
-              slot="label"
-              effect="light"
-              content="使用接口的出参配置可选字段"
-              placement="top"
-            >
-              <span style="color: #409EFF;">字段接口</span>
-            </el-tooltip>
-            <el-select
-              v-model="config.fieldsApi"
-              style="width:100%"
-              clearable
-              placeholder="请选择"
-              no-data-text="暂无接口，请前往【数据源模块】创建"
-              @change="handleFieldsApiChange"
-            >
-              <el-option
-                v-for="item in Object.values(apiConfig)"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="表单标题" prop="title" required>
-            <el-input
-              v-model="config.title"
-              placeholder="请输入"
-              clearable
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="表单宽度">
-            <el-input v-model="config.width"></el-input>
-          </el-form-item>
-          <el-form-item label="组件库">
-            <el-radio-group v-model="config.ui">
-              <el-radio-button label="element">Element</el-radio-button>
-              <el-radio-button label="vant" disabled>Vant</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="组件尺寸">
-            <el-radio-group v-model="config.size">
-              <el-radio-button label="medium">medium</el-radio-button>
-              <el-radio-button label="small">small</el-radio-button>
-              <el-radio-button label="mini">mini</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-collapse-item>
-
-        <el-collapse-item title="数据配置" name="group-resultData">
-          <el-form-item>
-            <el-tooltip
-              slot="label"
-              effect="light"
-              content="一般用于编辑和详情的数据回显"
-              placement="top"
-            >
-              <span style="color: #409EFF;">数据回填</span>
-            </el-tooltip>
-            <el-select
-              v-model="config.mounted.api"
-              value-key="id"
-              clearable
-              placeholder="请选择数据方法"
-              no-data-text="暂无接口，请前往【接口模块】创建"
-            >
-              <el-option
-                v-for="item in Object.values(apiConfig)"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="标签配置" name="group-label">
-          <el-form-item label="标签宽度">
-            <el-input-number
-              v-model="config.labelWidth"
-              :min="0"
-              :step="5"
-            ></el-input-number>
-          </el-form-item>
-          <el-form-item label="对齐方式">
-            <el-radio-group v-model="config.labelPosition">
-              <el-radio-button label="left">左对齐</el-radio-button>
-              <el-radio-button label="right">右对齐</el-radio-button>
-              <el-radio-button label="top">顶部对齐</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-collapse-item>
-        <el-collapse-item title="属性配置" name="group-attributes">
-          <el-form-item label-width="0">
-            <el-checkbox v-model="config.disabled">禁用 </el-checkbox>
-            <el-checkbox v-model="config.hideLabel">隐藏标签 </el-checkbox>
-          </el-form-item>
-        </el-collapse-item>
-      </el-collapse>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["config", "apiConfig"],
-  data() {
-    return {
-      collapseValue: [
-        "group-form",
-        "group-resultData",
-        "group-label",
-        "group-attributes"
-      ],
-      formRules: {
-        fieldsType: [
-          { required: true, message: "请选择字段类型", trigger: "change" }
-        ],
-        fieldsApi: [
-          { required: true, message: "请选择字段类型", trigger: "change" }
-        ],
-        title: [
-          { required: true, message: "请选择字段类型", trigger: "change" }
-        ]
-      }
-    };
-  },
-  methods: {
-    handleFieldsApiChange() {
-      this.$emit("fieldsChange");
-    },
-    formValidate() {
-      return new Promise((resolve, reject) => {
-        this.$refs.formRef.validate(valid => {
-          resolve(valid);
-        });
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.form-config {
-  .el-collapse-item__header {
-    padding: 0 10px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #f5f7f9;
-  }
-  .el-collapse-item__wrap {
-    padding: 10px;
-  }
-  .el-radio-button__inner {
-    padding: 7px !important;
-  }
-}
-</style>