@netang/quasar 0.1.66 → 0.1.67

package/_docs/docs/utils/table.md

@@ -156,7 +156,7 @@ const $table = $n.$table.create({
 | tableSelected           | 表格已选数据           | `ref(Array)`   | v-model:selected="tableSelected"                 |
 | tableFixedPowerBtns     | 固定在右边的权限按钮列表     | `computed`     | -                                                |
 | showTableFixed          | 是否显示固定在右边的权限按钮列表 | `computed`     | -                                                |
-| tableImgNames           | 表格图片标识           | `ref(Array)`   | 可在插槽中使用                                          |
+| tableImgs               | 表格图片             | `ref(Object)`  | 可在插槽中使用                                          |
 | tableGrid               | 表格宫格             | `ref(Boolean)` | :grid="tableGrid"                                |
 | tableSummary            | 表格合计             | `ref(Object)`  | 可在插槽中使用                                          |
 | tableSearchValue        | 表格搜索数据           | `ref(Array)`   | -                                                |

package/components/field-table/index.vue

@@ -119,16 +119,26 @@
             >
                 <!-- 图片 -->
                 <template
-                    v-for="imgName in tableImgNames"
-                    v-slot:[`body-cell-${imgName}`]="props"
+                    v-for="imgItem in tableImgs"
+                    v-slot:[`body-cell-${imgItem.name}`]="props"
                 >
-                    <q-td :props="props">
+                    <n-data
+                        :data="formatImg(props.row[imgItem.name], imgItem)"
+                        v-slot="{ data }"
+                    >
                         <!-- 缩略图 -->
                         <n-thumbnail
-                            :src="props.row[imgName]"
+                            v-for="(item, index) in data"
+                            :key="`thumbnail-item-${item}`"
+                            class="n-table__thumbnail"
+                            :src="item"
                             preview
+                            :preview-props="{
+                                startPosition: index,
+                                images: data,
+                            }"
                         />
-                    </q-td>
+                    </n-data>
                 </template>
 
                 <!-- 插槽 -->
@@ -201,6 +211,8 @@ import $n_$table from '../../utils/$table'
 
 import { configs } from '../../utils/config'
 
+import $n_getImage from '../../utils/getImage'
+
 const {
     // 字典常量
     dicts,
@@ -407,14 +419,14 @@ export default {
             // 刷新后清空已选数据
             refreshResetSelected: false,
             // 自定义请求方法
-            async request({ httpOptions, props }) {
+            async request({ httpOptions, props: httpProps }) {
                 return $n_isFunction(props.request) ?
                     // 如果有自定义请求方法
                     await $n_runAsync(props.request)({
                         // http 请求参数
                         httpOptions,
                         // 对话框是否已显示
-                        showDialog: $n_get(props, 'showDialog') === 1 ? true : showDialog.value,
+                        showDialog: $n_get(httpProps, 'showDialog') === 1 ? true : showDialog.value,
                     }) :
                     // 否则请求数据
                     await $n_http(httpOptions)
@@ -1137,6 +1149,32 @@ export default {
             }
         }
 
+        /**
+         * 格式化图片
+         */
+        function formatImg(img, { count }) {
+
+            // 图片数组
+            const imgs = []
+
+            // 转为图片数组
+            const arr = $n_split(img, ',')
+            for (const item of arr) {
+                const src = $n_getImage(item)
+                if (src) {
+                    imgs.push(item)
+                    if (
+                        count > 0
+                        && imgs.length === count
+                    ) {
+                        break
+                    }
+                }
+            }
+
+            return imgs
+        }
+
         // ==========【生命周期】=========================================================================================
 
         /**
@@ -1210,6 +1248,8 @@ export default {
 
             // 触发更新值
             emitModelValue,
+            // 格式化图片
+            formatImg,
         }
     },
 }

package/components/mixed-table/index.vue

@@ -109,15 +109,26 @@
                 >
                     <!-- 图片 -->
                     <template
-                        v-for="imgName in tableImgNames"
-                        v-slot:[`body-cell-${imgName}`]="props"
+                        v-for="imgItem in tableImgs"
+                        v-slot:[`body-cell-${imgItem.name}`]="props"
                     >
-                        <!-- 缩略图 -->
-                        <n-thumbnail
-                            :src="props.row[imgName]"
-                            preview
-                            v-if="props.row[imgName]"
-                        />
+                        <n-data
+                            :data="formatImg(props.row[imgItem.name], imgItem)"
+                            v-slot="{ data }"
+                        >
+                            <!-- 缩略图 -->
+                            <n-thumbnail
+                                v-for="(item, index) in data"
+                                :key="`thumbnail-item-${item}`"
+                                class="n-table__thumbnail"
+                                :src="item"
+                                preview
+                                :preview-props="{
+                                    startPosition: index,
+                                    images: data,
+                                }"
+                            />
+                        </n-data>
                     </template>
 
                     <!-- 插槽 -->
@@ -194,6 +205,7 @@ import { ref, watch, computed, inject, onMounted } from 'vue'
 import $n_isFunction from 'lodash/isFunction'
 import $n_isNil from 'lodash/isNil'
 
+import $n_split from '@netang/utils/split'
 import $n_isValidObject from '@netang/utils/isValidObject'
 import $n_isValidArray from '@netang/utils/isValidArray'
 import $n_isValidValue from '@netang/utils/isValidValue'
@@ -209,6 +221,8 @@ import NTableSummary from '../table-summary'
 import NTablePagination from '../table-pagination'
 import NSearch from '../search'
 
+import $n_getImage from '../../utils/getImage'
+
 export default {
 
     /**
@@ -451,6 +465,32 @@ export default {
             })
         }
 
+        /**
+         * 格式化图片
+         */
+        function formatImg(img, { count }) {
+
+            // 图片数组
+            const imgs = []
+
+            // 转为图片数组
+            const arr = $n_split(img, ',')
+            for (const item of arr) {
+                const src = $n_getImage(item)
+                if (src) {
+                    imgs.push(item)
+                    if (
+                        count > 0
+                        && imgs.length === count
+                    ) {
+                        break
+                    }
+                }
+            }
+
+            return imgs
+        }
+
         // ==========【生命周期】=========================================================================================
 
         /**
@@ -484,6 +524,8 @@ export default {
 
             // 当前双击表格行
             currentTableRowDblclick,
+            // 格式化图片
+            formatImg,
         }
     },
 }

package/components/tree/index.vue

@@ -123,6 +123,7 @@ import $n_get from 'lodash/get'
 import $n_isFunction from 'lodash/isFunction'
 import $n_findIndex from 'lodash/findIndex'
 
+import $n_trimString from '@netang/utils/trimString'
 import $n_isValidArray from '@netang/utils/isValidArray'
 import $n_indexOf from '@netang/utils/indexOf'
 import $n_on from '@netang/utils/on'
@@ -342,8 +343,8 @@ export default {
             props.filterMethod !== void 0
                 ? props.filterMethod
                 : function (node, filter) {
-                    return node[ props.labelKey ]
-                        && node[ props.labelKey ].toLowerCase().indexOf(filter.toLowerCase()) > -1
+                    const label = $n_trimString(node[ props.labelKey ])
+                    return label && label.toLowerCase().indexOf(filter.toLowerCase()) > -1
                 }
         ))
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netang/quasar",
-  "version": "0.1.66",
+  "version": "0.1.67",
   "description": "netang-quasar",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/sass/quasar/table.scss

@@ -28,6 +28,13 @@ $dark-td-bg-color: $dark;
         margin-right: 4px;
     }
 
+    // 缩略图
+    &__thumbnail {
+        + .n-table__thumbnail {
+            margin-left: 4px;
+        }
+    }
+
     &.q-table {
         &--dense {
             // 复选框

package/utils/$table.js

@@ -145,7 +145,7 @@ function create(options) {
     let isCache
     let cacheName
     let tableColumns
-    let tableImgNames
+    let tableImgs
 
     // 是否显示可见列
     let tableShowVisibleColumns
@@ -279,11 +279,11 @@ function create(options) {
             })
         }
 
-        // 表格图片标识数组
+        // 表格图片
         if (_isCreated) {
-            tableImgNames.value = []
+            tableImgs.value = []
         } else {
-            tableImgNames = ref([])
+            tableImgs = ref([])
         }
 
         // 设置表格列数据
@@ -318,8 +318,11 @@ function create(options) {
                 item.format = val => $n_dict(item.dict, val)
 
             // 如果有图片
-            } else if ($n_has(item, 'img') && item.img === true) {
-                tableImgNames.value.push(item.name)
+            } else if ($n_has(item, 'img')) {
+                tableImgs.value.push({
+                    name: item.name,
+                    count: item.img === true ? 1 : item.img,
+                })
 
             // 如果有价格
             } else if ($n_has(item, 'price')) {
@@ -1110,8 +1113,8 @@ function create(options) {
         tableFixedPowerBtns,
         // 是否显示固定在右边的权限按钮列表
         showTableFixed,
-        // 表格图片标识
-        tableImgNames,
+        // 表格图片
+        tableImgs,
 
         // 表格宫格
         tableGrid,