tianheng-ui 0.1.39 → 0.1.40

package/package.json

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

package/packages/Dialog/index.vue

@@ -2,7 +2,6 @@
   <el-dialog
     class="th-dialog"
     :class="[customClass]"
-    :style="{'z-index':zIndex}"
     :visible.sync="visible"
     :width="width"
     :top="top"
@@ -88,9 +87,7 @@ export default {
     showFullscreen: { type: Boolean, default: true },
     fullscreenIcon: { type: String, default: "el-icon-full-screen" },
 
-    showFooter: { type: Boolean, default: true },
-
-    zIndex: Number
+    showFooter: { type: Boolean, default: true }
   },
   data() {
     return {

package/packages/FormMaking/GenerateForm.vue

@@ -230,7 +230,7 @@ export default {
       }
 
       this.axios({
-        url: `/api/lc/api/${remoteFunc.url}`,
+        url: remoteFunc.url,
         method: remoteFunc.method,
         headers: remoteFunc.headers,
         data: remoteFunc.params

package/packages/FormMaking/WidgetConfig.vue

@@ -6,7 +6,7 @@
         :key="index"
         class="tabs-item"
         :class="{ 'tabs-item__active': activeTab.value === item.value }"
-        @click="handleTabsChange(item)"
+        @click="activeTab = item"
       >
         {{ item.title }}
       </div>
@@ -14,6 +14,7 @@
 
     <div v-if="activeTab.value === 'field'">
       <el-form
+        v-if="data.model"
         :model="data"
         label-position="left"
         label-width="80px"
@@ -132,6 +133,7 @@
           </el-collapse-item>
         </el-collapse>
       </el-form>
+      <th-empty v-else description="请左侧拖拽来添加字段"></th-empty>
     </div>
     <div v-if="activeTab.value === 'form'">
       <el-form
@@ -264,17 +266,19 @@
         </el-collapse>
       </el-form>
     </div>
-    <div v-if="activeTab.value === 'css'"></div>
+    <div v-if="activeTab.value === 'css'">
+      <th-empty description="开发中，敬请期待..."></th-empty>
+    </div>
 
     <th-dialog
-      title="动作设置"
       v-model="eventsDialog.visible"
+      title="动作设置"
       :modal-append-to-body="false"
       @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
     >
-      <div class="eventsSetting">
-        <div class="list">
-          <div class="list-header">
+      <div class="eventsSetting th-flex_box th-is_border">
+        <div class="list th-flex_aside">
+          <div class="events-header">
             <div>动作库</div>
             <el-button
               type="text"
@@ -285,8 +289,12 @@
             >
           </div>
           <div
-            class="list-item"
             v-for="(item, index) in eventsDialog.eventScript"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active':
+                eventsDialog.active && eventsDialog.active.label === item.label
+            }"
             :key="item.key"
             @click="eventsDialog.active = item"
           >
@@ -302,7 +310,7 @@
             </el-popconfirm>
           </div>
         </div>
-        <div class="detail" v-if="eventsDialog.active">
+        <div class="detail th-fiex_content" v-if="eventsDialog.active">
           <div>
             <span>Function Name</span>
             <el-input
@@ -474,13 +482,6 @@ export default {
     }
   },
   methods: {
-    handleTabsChange(item) {
-      if (!this.data.model)
-        return this.$message.warning("请从左侧拖拽来添加组件");
-
-      this.activeTab = item;
-    },
-
     handleEventDialogShow() {
       this.eventsDialog = {
         visible: true,
@@ -577,6 +578,7 @@ export default {
     display: flex;
     align-items: center;
     height: 45px;
+    z-index: 10;
 
     .tabs-item {
       flex: 1;
@@ -599,8 +601,18 @@ export default {
 
   .eventsSetting {
     height: 100%;
-    display: flex;
-    border: 1px solid #eee;
+
+    .events-header {
+      position: sticky;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 5px;
+      line-height: 30px;
+      border-bottom: 1px solid #eee;
+      background: #f2f6fc;
+    }
 
     .list {
       width: 270px;
@@ -608,18 +620,6 @@ export default {
       overflow-y: overlay;
       border-right: 1px solid #eee;
 
-      .list-header {
-        position: sticky;
-        top: 0;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px;
-        line-height: 30px;
-        border-bottom: 1px solid #eee;
-        background: #f2f6fc;
-      }
-
       .list-item {
         display: flex;
         // align-items: center;
@@ -640,14 +640,9 @@ export default {
           cursor: pointer;
         }
       }
-
-      .list-item:hover {
-        background-color: #f2f6fc;
-      }
     }
 
     .detail {
-      flex: 1;
       padding: 10px;
 
       > div:nth-child(1) {

package/packages/FormMaking/WidgetForm.vue

@@ -121,6 +121,7 @@ export default {
   position: relative;
   width: 100%;
   height: calc(100% - 45px);
+  overflow-y: scroll;
 
   .form-empty {
     position: absolute;

package/packages/FormMaking/WidgetTools.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widgetTools th-sticky_top">
+  <div class="widgetTools">
     <div class="left">
       <slot> </slot>
     </div>
@@ -215,7 +215,6 @@
       title="获取数据"
       :modal-append-to-body="false"
       :showFooter="false"
-      :z-index="99999"
       @on-close="dialogResultData.show = false"
       @on-fullscreen="$refs.dataCodeEditor.resize()"
     >
@@ -506,7 +505,7 @@ export default {
   width: 100%;
   height: 45px;
   padding: 0 15px;
-  z-index: 999;
+  border-bottom: solid 1px #e4e7ed;
 
   .left {
   }

package/packages/FormMaking/custom/items/upload.vue

@@ -75,7 +75,7 @@ export default {
           this.$message.warning("未知的请求接口，请检查配置信息");
           return "";
         }
-        return `${baseUrl}/api/lc/api/${func.url}`;
+        return `${baseUrl}${func.url}`;
       } else {
         return this.widget.options.action;
       }

package/packages/FormMaking/index.vue

@@ -263,6 +263,7 @@ export default {
     },
     config(val) {
       this.setConfig(val);
+      this.initApiConfig()
     },
     apiOptions(val) {
       this.initApiConfig();
@@ -314,6 +315,7 @@ export default {
           this.apiConfig[item.id] = item;
         });
       }
+      this.formConfig.config.network = this.apiConfig;
     },
 
     handleConfigSelect(value) {

package/packages/TableMaking/WidgetTools.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widgetTools th-sticky_top">
+  <div class="widgetTools">
     <div class="left">
       <slot> </slot>
     </div>
@@ -123,7 +123,7 @@
     <th-dialog
       v-model="dialog.show"
       :title="dialogTitles[dialog.action]"
-      :modal="dialog.action !== 'previewPc'"
+      :modal="false"
       :modal-append-to-body="false"
       :showFooter="['importJson', 'importTemplate'].includes(dialog.action)"
       @on-fullscreen="handleDialogFullscreen"
@@ -245,7 +245,7 @@ export default {
   width: 100%;
   height: 45px;
   padding: 0 15px;
-  z-index: 999;
+  border-bottom: solid 1px #e4e7ed;
 
   .left {
   }

package/packages/TableMaking/custom/items/search/index-h5.vue

@@ -2,9 +2,9 @@
   <div class="generateTable-search">
     <el-row :gutter="10">
       <el-col
-        v-for="item in options"
+        v-for="item in getList"
         :key="item.prop"
-        :span="24 / options.length"
+        :span="24 / getList.length"
       >
         <el-input
           v-if="item.type === 'input' || item.elType === 'input'"
@@ -81,6 +81,17 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    getList() {
+      if (this.options) {
+        const data = this.options.filter(item => {
+          return !item.hide;
+        });
+        return data;
+      }
+      return [];
+    }
+  },
   methods: {
     doSearch() {
       this.$emit("search", this.data);

package/packages/TableMaking/custom/items/search/index-pc.vue

@@ -2,7 +2,7 @@
   <div class="generateTable-search">
     <el-form :inline="true" :model="data" size="small">
       <el-form-item
-        v-for="item in options"
+        v-for="item in getList"
         :key="item.prop"
         :label="item.label"
       >
@@ -95,6 +95,17 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    getList() {
+      if (this.options) {
+        const data = this.options.filter(item => {
+          return !item.hide;
+        });
+        return data;
+      }
+      return [];
+    }
+  },
   methods: {
     doSearch() {
       this.$emit("search", this.data);

package/packages/TableMaking/custom/items/table/index-pc.vue

@@ -9,7 +9,7 @@
       v-loading="config.loading.show"
       :element-loading-text="config.loading.text"
     >
-      <template v-for="item in config.options">
+      <template v-for="item in getList">
         <el-table-column
           v-if="item.type"
           :key="item.prop"
@@ -54,6 +54,18 @@ export default {
   data() {
     return {};
   },
+
+  computed: {
+    getList() {
+      if (this.config.options) {
+        const data = this.config.options.filter(item => {
+          return !item.hide;
+        });
+        return data;
+      }
+      return [];
+    }
+  },
   created() {},
   mounted() {},
   methods: {}

package/packages/TableMaking/generateTable.vue

@@ -393,7 +393,7 @@ export default {
       }
 
       const request = {
-        url: `api/lc/api/${config.url}`,
+        url: config.url,
         method: config.method,
         headers: { ...config.headers, actionType }
       };

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;