tianheng-ui 0.1.69 → 0.1.71

package/packages/Icons/index.vue

@@ -1,37 +1,51 @@
 <template>
-  <div>
+  <div class="th-icons">
     <el-popover
-      placement="bottom-start"
-      :title="title"
+      popper-class="th-icons-popover"
       :width="width"
+      placement="bottom-start"
       trigger="click"
     >
       <el-input
-        :value="value"
+        :value="icon"
         slot="reference"
         placeholder="请选择图标"
         clearable
         @clear="handleInputClear"
       >
-        <div v-if="value" class="input-prefix" slot="prefix">
-          <i :class="value" class="icon" />
+        <div v-if="icon" class="input-prefix" slot="prefix">
+          <i :class="icon" class="icon" />
         </div>
       </el-input>
 
-      <div class="th-icons">
-        <i
-          v-for="(icon, index) in icons"
-          class="icon"
-          :class="icon"
-          :key="index"
-          @click="handleIconClick(icon)"
-        />
-      </div>
+      <el-tabs v-model="tabsActiveName" type="border-card">
+        <el-tab-pane label="Tianheng图标库" name="tianheng"> </el-tab-pane>
+        <el-tab-pane label="Element图标库" name="element"> </el-tab-pane>
+        <div v-if="tabsActiveName === 'tianheng'" class="th-icons-content">
+          <i
+            v-for="(icon, index) in tianhengIcons"
+            class="icon"
+            :class="icon"
+            :key="index"
+            @click="handleIconClick(icon)"
+          />
+        </div>
+        <div v-if="tabsActiveName === 'element'" class="th-icons-content">
+          <i
+            v-for="(icon, index) in elementIcons"
+            class="icon"
+            :class="icon"
+            :key="index"
+            @click="handleIconClick(icon)"
+          />
+        </div>
+      </el-tabs>
     </el-popover>
   </div>
 </template>
 
 <script>
+import { tianhengIcons, elementIcons } from "./index";
 export default {
   name: "ThIcons",
   model: {
@@ -39,10 +53,6 @@ export default {
     prop: "value"
   },
   props: {
-    title: {
-      type: String,
-      default: "Element图标库"
-    },
     value: {
       type: String,
       default: ""
@@ -54,303 +64,34 @@ export default {
   },
   data() {
     return {
-      icons: [
-        "el-icon-platform-eleme",
-        "el-icon-eleme",
-        "el-icon-delete-solid",
-        "el-icon-delete",
-        "el-icon-s-tools",
-        "el-icon-setting",
-        "el-icon-user-solid",
-        "el-icon-user",
-        "el-icon-phone",
-        "el-icon-phone-outline",
-        "el-icon-more",
-        "el-icon-more-outline",
-        "el-icon-star-on",
-        "el-icon-star-off",
-        "el-icon-s-goods",
-        "el-icon-goods",
-        "el-icon-warning",
-        "el-icon-warning-outline",
-        "el-icon-question",
-        "el-icon-info",
-        "el-icon-remove",
-        "el-icon-circle-plus",
-        "el-icon-success",
-        "el-icon-error",
-        "el-icon-zoom-in",
-        "el-icon-zoom-out",
-        "el-icon-remove-outline",
-        "el-icon-circle-plus-outline",
-        "el-icon-circle-check",
-        "el-icon-circle-close",
-        "el-icon-s-help",
-        "el-icon-help",
-        "el-icon-minus",
-        "el-icon-plus",
-        "el-icon-check",
-        "el-icon-close",
-        "el-icon-picture",
-        "el-icon-picture-outline",
-        "el-icon-picture-outline-round",
-        "el-icon-upload",
-        "el-icon-upload2",
-        "el-icon-download",
-        "el-icon-camera-solid",
-        "el-icon-camera",
-        "el-icon-video-camera-solid",
-        "el-icon-video-camera",
-        "el-icon-message-solid",
-        "el-icon-bell",
-        "el-icon-s-cooperation",
-        "el-icon-s-order",
-        "el-icon-s-platform",
-        "el-icon-s-fold",
-        "el-icon-s-unfold",
-        "el-icon-s-operation",
-        "el-icon-s-promotion",
-        "el-icon-s-home",
-        "el-icon-s-release",
-        "el-icon-s-ticket",
-        "el-icon-s-management",
-        "el-icon-s-open",
-        "el-icon-s-shop",
-        "el-icon-s-marketing",
-        "el-icon-s-flag",
-        "el-icon-s-comment",
-        "el-icon-s-finance",
-        "el-icon-s-claim",
-        "el-icon-s-custom",
-        "el-icon-s-opportunity",
-        "el-icon-s-data",
-        "el-icon-s-check",
-        "el-icon-s-grid",
-        "el-icon-menu",
-        "el-icon-share",
-        "el-icon-d-caret",
-        "el-icon-caret-left",
-        "el-icon-caret-right",
-        "el-icon-caret-bottom",
-        "el-icon-caret-top",
-        "el-icon-bottom-left",
-        "el-icon-bottom-right",
-        "el-icon-back",
-        "el-icon-right",
-        "el-icon-bottom",
-        "el-icon-top",
-        "el-icon-top-left",
-        "el-icon-top-right",
-        "el-icon-arrow-left",
-        "el-icon-arrow-right",
-        "el-icon-arrow-down",
-        "el-icon-arrow-up",
-        "el-icon-d-arrow-left",
-        "el-icon-d-arrow-right",
-        "el-icon-video-pause",
-        "el-icon-video-play",
-        "el-icon-refresh",
-        "el-icon-refresh-right",
-        "el-icon-refresh-left",
-        "el-icon-finished",
-        "el-icon-sort",
-        "el-icon-sort-up",
-        "el-icon-sort-down",
-        "el-icon-rank",
-        "el-icon-loading",
-        "el-icon-view",
-        "el-icon-c-scale-to-original",
-        "el-icon-date",
-        "el-icon-edit",
-        "el-icon-edit-outline",
-        "el-icon-folder",
-        "el-icon-folder-opened",
-        "el-icon-folder-add",
-        "el-icon-folder-remove",
-        "el-icon-folder-delete",
-        "el-icon-folder-checked",
-        "el-icon-tickets",
-        "el-icon-document-remove",
-        "el-icon-document-delete",
-        "el-icon-document-copy",
-        "el-icon-document-checked",
-        "el-icon-document",
-        "el-icon-document-add",
-        "el-icon-printer",
-        "el-icon-paperclip",
-        "el-icon-takeaway-box",
-        "el-icon-search",
-        "el-icon-monitor",
-        "el-icon-attract",
-        "el-icon-mobile",
-        "el-icon-scissors",
-        "el-icon-umbrella",
-        "el-icon-headset",
-        "el-icon-brush",
-        "el-icon-mouse",
-        "el-icon-coordinate",
-        "el-icon-magic-stick",
-        "el-icon-reading",
-        "el-icon-data-line",
-        "el-icon-data-board",
-        "el-icon-pie-chart",
-        "el-icon-data-analysis",
-        "el-icon-collection-tag",
-        "el-icon-film",
-        "el-icon-suitcase",
-        "el-icon-suitcase-1",
-        "el-icon-receiving",
-        "el-icon-collection",
-        "el-icon-files",
-        "el-icon-notebook-1",
-        "el-icon-notebook-2",
-        "el-icon-toilet-paper",
-        "el-icon-office-building",
-        "el-icon-school",
-        "el-icon-table-lamp",
-        "el-icon-house",
-        "el-icon-no-smoking",
-        "el-icon-smoking",
-        "el-icon-shopping-cart-full",
-        "el-icon-shopping-cart-1",
-        "el-icon-shopping-cart-2",
-        "el-icon-shopping-bag-1",
-        "el-icon-shopping-bag-2",
-        "el-icon-sold-out",
-        "el-icon-sell",
-        "el-icon-present",
-        "el-icon-box",
-        "el-icon-bank-card",
-        "el-icon-money",
-        "el-icon-coin",
-        "el-icon-wallet",
-        "el-icon-discount",
-        "el-icon-price-tag",
-        "el-icon-news",
-        "el-icon-guide",
-        "el-icon-male",
-        "el-icon-female",
-        "el-icon-thumb",
-        "el-icon-cpu",
-        "el-icon-link",
-        "el-icon-connection",
-        "el-icon-open",
-        "el-icon-turn-off",
-        "el-icon-set-up",
-        "el-icon-chat-round",
-        "el-icon-chat-line-round",
-        "el-icon-chat-square",
-        "el-icon-chat-dot-round",
-        "el-icon-chat-dot-square",
-        "el-icon-chat-line-square",
-        "el-icon-message",
-        "el-icon-postcard",
-        "el-icon-position",
-        "el-icon-turn-off-microphone",
-        "el-icon-microphone",
-        "el-icon-close-notification",
-        "el-icon-bangzhu",
-        "el-icon-time",
-        "el-icon-odometer",
-        "el-icon-crop",
-        "el-icon-aim",
-        "el-icon-switch-button",
-        "el-icon-full-screen",
-        "el-icon-copy-document",
-        "el-icon-mic",
-        "el-icon-stopwatch",
-        "el-icon-medal-1",
-        "el-icon-medal",
-        "el-icon-trophy",
-        "el-icon-trophy-1",
-        "el-icon-first-aid-kit",
-        "el-icon-discover",
-        "el-icon-place",
-        "el-icon-location",
-        "el-icon-location-outline",
-        "el-icon-location-information",
-        "el-icon-add-location",
-        "el-icon-delete-location",
-        "el-icon-map-location",
-        "el-icon-alarm-clock",
-        "el-icon-timer",
-        "el-icon-watch-1",
-        "el-icon-watch",
-        "el-icon-lock",
-        "el-icon-unlock",
-        "el-icon-key",
-        "el-icon-service",
-        "el-icon-mobile-phone",
-        "el-icon-bicycle",
-        "el-icon-truck",
-        "el-icon-ship",
-        "el-icon-basketball",
-        "el-icon-football",
-        "el-icon-soccer",
-        "el-icon-baseball",
-        "el-icon-wind-power",
-        "el-icon-light-rain",
-        "el-icon-lightning",
-        "el-icon-heavy-rain",
-        "el-icon-sunrise",
-        "el-icon-sunrise-1",
-        "el-icon-sunset",
-        "el-icon-sunny",
-        "el-icon-cloudy",
-        "el-icon-partly-cloudy",
-        "el-icon-cloudy-and-sunny",
-        "el-icon-moon",
-        "el-icon-moon-night",
-        "el-icon-dish",
-        "el-icon-dish-1",
-        "el-icon-food",
-        "el-icon-chicken",
-        "el-icon-fork-spoon",
-        "el-icon-knife-fork",
-        "el-icon-burger",
-        "el-icon-tableware",
-        "el-icon-sugar",
-        "el-icon-dessert",
-        "el-icon-ice-cream",
-        "el-icon-hot-water",
-        "el-icon-water-cup",
-        "el-icon-coffee-cup",
-        "el-icon-cold-drink",
-        "el-icon-goblet",
-        "el-icon-goblet-full",
-        "el-icon-goblet-square",
-        "el-icon-goblet-square-full",
-        "el-icon-refrigerator",
-        "el-icon-grape",
-        "el-icon-watermelon",
-        "el-icon-cherry",
-        "el-icon-apple",
-        "el-icon-pear",
-        "el-icon-orange",
-        "el-icon-coffee",
-        "el-icon-ice-tea",
-        "el-icon-ice-drink",
-        "el-icon-milk-tea",
-        "el-icon-potato-strips",
-        "el-icon-lollipop",
-        "el-icon-ice-cream-square",
-        "el-icon-ice-cream-round"
-      ]
+      icon: this.value,
+      tabsActiveName: "tianheng",
+      tianhengIcons: tianhengIcons,
+      elementIcons: elementIcons
     };
   },
+  watch: {
+    icon(val) {
+      this.$emit("input", val);
+      this.$emit("update:value", val);
+    },
+    value(val) {
+      this.icon = val;
+    }
+  },
   created() {},
   methods: {
     handleIconClick(icon) {
-      this.$emit("input", icon);
+      this.icon = icon;
     },
     handleInputClear() {
-      this.$emit("input", "");
+      this.icon = "";
     }
   }
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .input-prefix {
   height: 100%;
   width: 32px;
@@ -360,18 +101,24 @@ export default {
     font-size: 20px;
   }
 }
-.th-icons {
+.th-icons-content {
   height: 300px;
   overflow-y: scroll;
   .icon {
     padding: 8px;
     font-size: 20px;
     border-radius: 2px;
+    transition: 0.25s;
   }
   .icon:hover {
     cursor: pointer;
     background-color: #f2f2f2;
-    // transition: .3s;
   }
 }
 </style>
+
+<style lang="scss">
+.th-icons-popover {
+  padding: 0 !important;
+}
+</style>

package/packages/TableMaking/index.vue

@@ -22,7 +22,14 @@
         ref="configRef"
       ></widget-config>
     </div>
-    <!-- <widget-guide :visible="true"></widget-guide> -->
+
+    <th-dialog v-model="showGuide" title="引导配置" :showFooter="false">
+      <widget-guide
+        :config="tableConfig"
+        :apiOptions="apiOptions"
+        @save="showGuide = false"
+      ></widget-guide>
+    </th-dialog>
   </div>
 </template>
 
@@ -79,12 +86,14 @@ export default {
         "generateCode",
         "generateJson"
       ]
-    }
+    },
+    guide: Boolean
   },
   data() {
     this.baseConfig = deepClone(baseConfig);
     return {
-      tableConfig: this.baseConfig
+      tableConfig: this.baseConfig,
+      showGuide: this.guide
     };
   },
   watch: {
@@ -94,6 +103,12 @@ export default {
     config(val) {
       this.tableConfig = Object.assign(this.baseConfig, val);
       this.handleNetworkConfig();
+    },
+    guide(val) {
+      this.showGuide = val;
+    },
+    showGuide(val) {
+      this.$emit("update:guide", val);
     }
   },
   mounted() {

package/packages/TableMaking/widgetGuide.vue

@@ -1,26 +1,107 @@
 <template>
-  <div v-show="show" class="widgetGuide">
-    <div class="box">
-      <div class="header"></div>
-      <div class="content">
-        <div>你好</div>
-        <div>让我们来了解一些基本信息</div>
-      </div>
-      <div class="footer th-is_border_top">
-        <div></div>
-        <div class="stepView">
-          <el-button
-            :disabled="step === 0"
-            type="primary"
-            icon="el-icon-back"
-            size="small"
-            @click="handleBack"
-            >上一步</el-button
-          >
-          <el-button type="primary" size="small" @click="handleNext"
-            >下一步<i class="el-icon-right el-icon--right"></i
-          ></el-button>
+  <div class="widgetGuide">
+    <el-steps :active="step" finish-status="success" simple>
+      <el-step title="列表配置" icon="el-icon-s-operation" description="">
+      </el-step>
+      <!-- <el-step
+        title="字段配置"
+        icon="el-icon-c-scale-to-original"
+        description=""
+      ></el-step> -->
+      <el-step title="按钮配置" icon="el-icon-set-up" description=""></el-step>
+    </el-steps>
+    <div class="content">
+      <el-form :model="config" label-width="80px" size="small">
+        <div v-show="step === 0">
+          <el-form-item size="small">
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="字段的配置方式"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段类型</span>
+            </el-tooltip>
+            <el-radio-group v-model="config.table.fields.type">
+              <el-radio-button label="custom" disabled>自定义</el-radio-button>
+              <el-radio-button label="api">接口导入</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="开启后，选择数据接口会触发 remote-params 回调，用于从服务器查询字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">远程字段</span>
+            </el-tooltip>
+            <el-switch v-model="config.table.fields.remote"> </el-switch>
+          </el-form-item>
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="light"
+              content="列表初始化完成后，调用该接口获取列表数据"
+              placement="top"
+            >
+              <span style="color: #409EFF;">列表接口</span>
+            </el-tooltip>
+            <el-select
+              v-model="config.table.mounted.api"
+              style="width:100%"
+              clearable
+              placeholder="请选择"
+              no-data-text="暂无接口，请前往【接口模块】创建"
+              filterable
+            >
+              <el-option
+                v-for="item in apiOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="列表名称">
+            <el-input
+              v-model="config.table.title"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+        </div>
+        <div v-show="step === 1">
+          <el-form-item label="">
+            <div v-for="item in Object.values(config.tools)" :key="item.type">
+              <el-checkbox v-model="item.show" :label="item.name"></el-checkbox>
+            </div>
+          </el-form-item>
         </div>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div></div>
+      <div class="stepView">
+        <el-button
+          type="primary"
+          icon="el-icon-back"
+          size="small"
+          :disabled="step === 0"
+          @click="handleBack"
+          >上一步</el-button
+        >
+        <el-button
+          v-if="step !== 1"
+          type="primary"
+          size="small"
+          @click="handleNext"
+        >
+          下一步<i class="el-icon-right el-icon--right"></i>
+        </el-button>
+        <el-button v-else type="success" size="small" @click="handleSave">
+          完&nbsp;&nbsp;&nbsp;成<i class="el-icon-finished el-icon--right"></i>
+        </el-button>
       </div>
     </div>
   </div>
@@ -28,19 +109,16 @@
 
 <script>
 export default {
-  props: { visible: { type: Boolean, default: true } },
+  props: { config: Object, apiOptions: Array },
   data() {
     return {
-      show: this.visible,
-      step: 0
+      step: 0,
+      formData: {}
     };
   },
-  watch: {
-    visible(val) {
-      this.show = val;
-    },
-    show(val) {
-      this.$emit("update:visible", val);
+  computed: {
+    getFields() {
+      return [];
     }
   },
   created() {},
@@ -51,6 +129,9 @@ export default {
     },
     handleNext() {
       this.step++;
+    },
+    handleSave() {
+      this.$emit("save");
     }
   }
 };
@@ -58,38 +139,21 @@ export default {
 
 <style lang="scss" scoped>
 .widgetGuide {
-  position: absolute;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba($color: #000000, $alpha: 0.6);
-  z-index: 999;
 
-  .box {
-    position: relative;
-    width: calc(100% - 200px);
-    height: calc(100% - 200px);
-    background-color: white;
-    border-radius: 4px;
-
-    .header {
-      height: 50px;
-    }
-    .content {
-      height: calc(100% - 100px);
-    }
-    .footer {
-      padding: 10px 20px;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
+  .content {
+    height: calc(100% - 96px);
+    padding-top: 10px;
+  }
+  .footer {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
 
-      .stepView {
-      }
+    .stepView {
     }
   }
 }