@tongfun/tf-widget 0.1.13 → 0.1.18

package/package/tf-icon-picker/README.md

@@ -0,0 +1,8 @@
+# tf-icon-picker	
+
+1. 参数
+   1. width (Number) 选择图标区域宽度,默认值 400。
+   2. placement (string) 选择图标展示区域,默认值 'bottom', 可选值: 'top', 'left', 'right', 'bottom'。
+   3. hint (string) 展示图标选择标题。
+
+2. 

package/package/tf-icon-picker/index.js

@@ -0,0 +1,8 @@
+import TfIconPicker from './src/tf-icon-picker'
+
+/* istanbul ignore next */
+TfIconPicker.install = function (Vue) {
+  Vue.component(TfIconPicker.name, TfIconPicker)
+}
+
+export default TfIconPicker

package/package/tf-icon-picker/src/tf-icon-picker.vue

@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <el-popover
+      v-model="visible"
+      :placement="placement"
+      :width="width"
+      trigger="manual"
+    >
+      <div class="content-view">
+        <div class="search-box">
+          <svg-icon
+            v-if="selectIconClass"
+            :icon-class="selectIconClass.font_class"
+          />
+          <span v-if="selectIconClass">{{ selectIconClass.name }}</span>
+          <el-input
+            v-model="search"
+            size="mini"
+            style="width: 50%"
+            clearable
+            @clear="cleanSearch"
+          />
+          <el-button
+            size="mini"
+            @click="searchInfo"
+          >搜索</el-button>
+        </div>
+        <el-empty
+          v-if="!iconList || iconList.length === 0"
+          description="暂无数据!"
+          style="height: 270px;width: 100%"
+        />
+        <div
+          v-for="item in iconList"
+          :key="item.unicode_decimal"
+          class="icon-item"
+          @click="selectIcon(item)"
+        >
+          <el-tooltip
+            placement="top"
+          >
+            <div slot="content">
+              <span>图标名称: {{ item.name }}</span>
+              <br>
+              <br>
+              <span>class: {{ item.font_class }}</span>
+            </div>
+            <div class="icon-box">
+
+              <svg-icon
+                :icon-class="item.font_class"
+              />
+              <span :title="item.name">{{ item.name }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+        <div class="paging">
+          <span>第 {{ pagination + 1 }} 页</span>
+          <el-pagination
+            small
+            background
+            layout="total, prev, next"
+            :total="total"
+            @current-change="handleCurrentChange"
+          />
+
+          <el-button
+            type="info"
+            size="mini"
+            @click="visible = false"
+          >取消</el-button>
+          <el-button
+            class="button"
+            size="mini"
+            @click="select"
+          >确定</el-button>
+        </div>
+      </div>
+      <el-button
+        slot="reference"
+        class="button"
+        :size="bottomSize"
+        @click="visible = !visible; selectIconClass = null"
+      >{{ hint }}</el-button>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'TfIconPicker',
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    placement: {
+      default: 'bottom',
+      type: String
+    },
+    bottomSize: {
+      default: 'small',
+      type: String
+    },
+    hint: {
+      default: '选择图标',
+      type: String
+    }
+  },
+  data () {
+    return {
+      glyphsList: null,
+      allIconList: null,
+      pagination: 0,
+      iconList: null,
+      total: 0,
+      selectIconClass: null,
+      visible: false,
+      search: null
+    }
+  },
+  watch: {
+    pagination: {
+      handler: function (newValue) {
+        if (!this.glyphsList) return
+        this.iconList = this.allIconList.slice(newValue * 20, (newValue + 1) * 20)
+      },
+      immediate: true
+    }
+  },
+  created () {
+    axios.get('/icon-list.json').then((res) => {
+      if (res.status === 200) {
+        const { glyphs: glyphsList } = res.data
+        this.glyphsList = glyphsList.sort((a, b) => a.font_class - b.font_class)
+        this.allIconList = JSON.parse(JSON.stringify(this.glyphsList))
+        this.total = this.allIconList?.length
+        this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20)
+      }
+    })
+  },
+  methods: {
+    handleCurrentChange (val) {
+      if (val - 1 > this.total / 20) return
+      this.pagination = val - 1
+    },
+    selectIcon (params) {
+      this.selectIconClass = params
+    },
+    searchInfo () {
+      this.pagination = 0
+      const glyphs = JSON.parse(JSON.stringify(this.glyphsList))
+      const iconArr = []
+      glyphs.forEach(item => {
+        const str = `${item.font_class}+${item.name}`.toLowerCase()
+        if (str.indexOf(this.search.toLowerCase()) !== -1) {
+          iconArr.push(item)
+        }
+      })
+      this.allIconList = iconArr
+      this.total = this.allIconList.length
+      if (iconArr.length > 20) {
+        this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20).sort((a, b) => a.font_class - b.font_class)
+      } else {
+        this.iconList = iconArr.sort((a, b) => a.font_class - b.font_class)
+      }
+    },
+    cleanSearch () {
+      this.pagination = 0
+      this.allIconList = JSON.parse(JSON.stringify(this.glyphsList))
+      this.total = this.allIconList?.length
+      this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20)
+    },
+    select () {
+      if (this.selectIconClass) {
+        this.$emit('selectIcon', JSON.parse(JSON.stringify(this.selectIconClass)))
+      } else {
+        this.$message.error('未选择图标')
+      }
+      this.selectIconClass = null
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.content-view {
+  min-height: 300px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  .search-box {
+    width: 100%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 0 10px;
+    color: red;
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
+  }
+  .icon-item {
+    width: 20%;
+    height: 60px;
+    display: flex;
+    margin-top: 10px;
+    align-items: center;
+    justify-content: center;
+    .icon-box {
+      box-sizing: border-box;
+      padding: 5px 0;
+      border-radius: 2px;
+      border: 1px solid #eeeeee;
+      display: inherit;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      width: 60px;
+      height: 100%;
+      color: #666666;
+      &:hover {
+        color: #2a90e9;
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+      }
+      .svg-icon {
+        height: 25px;
+        width: 25px;
+      }
+      span {
+        line-height: 1;
+        box-sizing: border-box;
+        padding: 0 2px;
+        text-align: center;
+        width: 60px;
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        font-size: 12px;
+      }
+    }
+  }
+  .paging {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    margin-top: 10px;
+    height: 20px;
+    width: 100%;
+  }
+}
+.button {
+  opacity: 1;
+  background: #0c4c8e;
+  border-radius: 2px;
+  font-weight: 700;
+  color: #FFFFFF;
+}
+</style>

package/package/tf-layout/src/components/tf-labelbar.vue

@@ -97,7 +97,6 @@ export default {
   watch: {
     $route: {
       handler: function (newValue) {
-        console.log(this.routeBase)
         if (newValue && newValue.matched[0]?.meta.base === this.routeBase) {
           const { meta, path, name, params, query } = newValue
           if (!path) return

package/package/tf-layout/src/tf-layout.vue

@@ -49,14 +49,6 @@ export default {
       thirdCacheArr: []
     }
   },
-  watch: {
-    routeBase: {
-      handler: function (newValue) {
-        console.log(newValue)
-      },
-      immediate: true
-    }
-  },
   methods: {
     changeMenuState (state) {
       this.menuState = state

package/package/tf-widget/src/children/basic-data/dependcy/basic-data-selector.vue

@@ -55,6 +55,7 @@
           :table-data="pageData.commonTableData"
           :table-layout="pageData.commonTableLayout"
           :paging="pageData.paging"
+          :head-name="pageData.headName"
           :total-data="pageData.totalData"
           :single-select="true"
           :quick-filter-data="pageData.quickFilterData"
@@ -254,11 +255,15 @@ export default {
       },
       deep: true
     },
-    tableId (newVal, oldVal) {
-      if (oldVal !== newVal) {
-        this.DetermineWhetherTheTableidTasChanged = true
-        this.pageData.tableId = newVal
-      }
+    tableId: {
+      handler (newVal, oldVal) {
+        if (oldVal !== newVal && newVal) {
+          this.DetermineWhetherTheTableidTasChanged = true
+          this.pageData.tableId = newVal
+          this.initTable()
+        }
+      },
+      immediate: true
     },
     dialogVisible (newVal) {
       if (!this.DetermineWhetherTheTableidTasChanged) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongfun/tf-widget",
-  "version": "0.1.13",
+  "version": "0.1.18",
   "description": "tf-widget",
   "main": "lib/tf-widget.umd.js",
   "private": false,

package/postinstall.js

@@ -1,10 +1,10 @@
-
-const BANNER = '\u001B[96mThank you for using tf-widget for polyfilling JavaScript standard library!\u001B[0m\n\n' +
-             '\u001B[96mWe need the best of you! Come and join us\n\n' +
-             '\u001B[96mWe are waiting for you\n'
-
-function showBanner () {
-  console.log(BANNER)
-}
-
-showBanner()
+
+const BANNER = '\u001B[96mThank you for using tf-widget for polyfilling JavaScript standard library!\u001B[0m\n\n' +
+             '\u001B[96mWe need the best of you! Come and join us\n\n' +
+             '\u001B[96mWe are waiting for you\n'
+
+function showBanner () {
+  console.log(BANNER)
+}
+
+showBanner()

package/src/index.js

@@ -4,12 +4,14 @@ import SvgIcon from '../package/svg-icon'
 import TfLayout from '../package/tf-layout'
 import TDataList from '../package/t-data-list'
 import Tinput from '../package/t-input'
+import TfIconPicker from '../package/tf-icon-picker'
 const components = [
   TfWidget,
   SvgIcon,
   TfLayout,
   TDataList,
-  Tinput
+  Tinput,
+  TfIconPicker
 ]
 
 const install = function (Vue) {
@@ -24,5 +26,6 @@ export default {
   SvgIcon,
   TfLayout,
   TDataList,
-  Tinput
+  Tinput,
+  TfIconPicker
 }

package/dist/css/chunk-9c7a8e06.920744ef.css

@@ -1 +0,0 @@
-.el-popover .context-list .list-item[data-v-fcd31cd8]{display:flex;margin:1px 0;padding:2px 8px;justify-content:space-between}.el-popover .context-list .list-item[data-v-fcd31cd8]:hover{background-color:#e7ebfd}.el-popover .context-list .list-item-active[data-v-fcd31cd8]{color:#3b68fc;background-color:#e7ebfd}.el-popover .context-list[data-v-fcd31cd8] .el-input .el-input__inner{height:30px}.el-popover .context-list[data-v-fcd31cd8]:last-child{margin-top:4px;width:100%;display:flex;justify-content:space-between}.el-popover .header-input[data-v-fcd31cd8]{margin-top:5px}.el-popover .filter-icon[data-v-fcd31cd8]{outline:none;width:15px;height:15px;cursor:pointer}