@netang/quasar 0.0.24 → 0.0.27

package/components/search/index.vue

@@ -2,7 +2,7 @@
     <div class="flex column absolute-full" v-if="utils.isValidArray(options)">
         <q-scroll-area class="n-flex-1">
 
-            <div class="n-search q-pa-sm q-pt-md q-gutter-md">
+            <div class="n-search q-pa-sm q-pt-sm q-gutter-sm">
 
                 <template
                     v-for="(item, itemIndex) in options"
@@ -110,13 +110,23 @@
                                 v-model="modelValue[itemIndex][index].value"
                                 dense
                                 outlined
-                                clearable
-                                accordion
                                 :multiple="multiple"
                                 v-bind="item.tree"
                                 v-else-if="item.searchType === 'tree'"
                             />
 
+                            <!-- 下拉表格 -->
+                            <n-field-table
+                                class="n-field-fieldset"
+                                :label="label"
+                                v-model="modelValue[itemIndex][index].value"
+                                dense
+                                outlined
+                                :multiple="multiple"
+                                v-bind="item.table"
+                                v-else-if="item.searchType === 'table'"
+                            />
+
                         </n-search-item>
                     </template>
                 </template>

package/components/search-item/index.vue

@@ -2,10 +2,11 @@
     <div class="n-search__item n-field-group">
 
         <!-- 比较1 -->
-        <div class="n-field-group row">
+        <div class="n-field-group row no-wrap">
 
             <!-- 比较类型1 -->
             <q-select
+                class="n-field-group__select"
                 v-model="modelValue[0].type"
                 :options="compareOptions1"
                 map-options
@@ -41,6 +42,7 @@
         >
             <!-- 比较类型2 -->
             <q-select
+                class="n-field-group__select"
                 v-model="modelValue[1].type"
                 :options="[
                     { label: '<', value: dicts.SEARCH_TYPE__LT },
@@ -205,7 +207,12 @@ export default {
             // 第三个子节点
             &:nth-child(3) {
                 .q-field__control {
+                    height: 100% !important;
                     background-color: rgba(var(--n-reverse-color-rgb), 0.04);
+
+                    .q-field__marginal {
+                        height: 100% !important;
+                    }
                 }
             }
 

package/components/select/index.vue

@@ -1,12 +1,41 @@
 <template>
     <q-select
-
+        v-model="currentModelValue"
+        :options="currentOptions"
+        :option-label="optionLabel"
+        :use-input="filter"
+        @filter="onFilter"
+        v-bind="$attrs"
     >
+        <!-- 占位符 -->
+        <template v-slot:selected v-if="! currentModelValue && placeholder">
+            <div class="n-placeholder q-mr-xs">{{placeholder}}</div>
+        </template>
+
+        <!-- 插槽 -->
+        <template
+            v-for="slotName in slotNames"
+            v-slot:[slotName]="props"
+        >
+            <!-- 有传参的插槽 -->
+            <slot
+                :name="slotName"
+                v-bind="props"
+                v-if="props"
+            />
 
+            <!-- 无传参的插槽 -->
+            <slot
+                :name="slotName"
+                v-else
+            />
+        </template>
     </q-select>
 </template>
 
 <script>
+import { ref, computed, watch } from 'vue'
+
 export default {
 
     /**
@@ -22,6 +51,19 @@ export default {
         modelValue: {
             required: true,
         },
+        options: {
+            type: Array,
+            default: () => []
+        },
+        // 选项标签
+        optionLabel: {
+            type: String,
+            default: 'label',
+        },
+        // 占位符
+        placeholder: String,
+        // 筛选
+        filter: Boolean,
     },
 
     /**
@@ -34,37 +76,78 @@ export default {
     /**
      * 组合式
      */
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
+        })
 
         // ==========【当前值】===========================================================================================
 
+        // 当前值
+        const currentModelValue = ref(props.modelValue)
+
+        // 原始选项
+        const rawOptions = props.options
+
+        // 当前选项
+        const currentOptions = ref(rawOptions)
+
+        // ==========【监听数据】=========================================================================================
+
         /**
-         * 原始值
+         * 监听声明值
          */
-        const rawModelValue = props.modelValue
+        watch(()=>props.modelValue, function (val) {
+            // 设置当前值
+            currentModelValue.value = val
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentModelValue, function (val) {
+            // 更新值
+            emit('update:modelValue', val)
+        })
 
         // ==========【方法】============================================================================================
 
         /**
          * 筛选
          */
-        function filter(value, update) {
+        function onFilter(value, update) {
             update(function() {
-                // 更新值
-                emit(
-                    'update:modelValue',
-                    value === '' ? rawModelValue : utils.collection(rawModelValue)
-                        .where(props.optionLabel, 'like', value)
-                        .toArray()
-                )
+                // 更新选项
+                currentOptions.value =
+                    // 如果搜索值为空
+                    value === '' ?
+                        // 选项还原为初始值
+                        rawOptions
+                        // 否则筛选选项
+                        : utils.collection(rawOptions)
+                            .where(props.optionLabel, 'like', value)
+                            .toArray()
             })
         }
 
         // ==========【返回】=============================================================================================
 
         return {
+            // 插槽标识
+            slotNames,
+            // 当前值
+            currentModelValue,
+            // 当前选项
+            currentOptions,
+
             // 筛选
-            filter,
+            onFilter,
         }
     }
 }

package/package.json

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

package/utils/$search.js

@@ -194,12 +194,13 @@ async function getOptions(rawSearchOptions, format) {
                     newItem.select.options = await utils.runAsync(newItem.select.options)()
                 }
 
-            // 如果有树选项
+            // 如果有树选项(调用的是 <n-field-tree> 组件)
             } else if (_.has(newItem, 'tree')) {
                 newItem.searchType = 'tree'
                 newItem.tree = Object.assign({
                     nodes: [],
                     accordion: true,
+                    clearable: true,
                 }, newItem.tree)
 
                 // 如果节点数组是方法
@@ -208,6 +209,20 @@ async function getOptions(rawSearchOptions, format) {
                     newItem.tree.nodes = await utils.runAsync(newItem.tree.nodes)()
                 }
 
+            // 如果有表格选项(调用的是 <n-field-table> 组件)
+            } else if (_.has(newItem, 'table')) {
+                newItem.searchType = 'table'
+                newItem.table = Object.assign({
+                    // 值字段(必填)
+                    valueKey: newItem.name,
+                    // 是否可清除
+                    clearable: true,
+                    // 是否开启筛选
+                    filter: true,
+                }, newItem.table)
+
+                console.log('111', newItem.table)
+
             // 否则为输入框
             } else {
                 newItem.searchType = 'input'

package/utils/$table.js

@@ -22,8 +22,8 @@ function create(params) {
     const $q = useQuasar()
 
     // 每页显示行数选项
-    // const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
-    const rowsPerPageOptions = [3, 40, 50, 100, 200, 500, 1000]
+    const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
+    // const rowsPerPageOptions = [3, 40, 50, 100, 200, 500, 1000]
 
     // 获取参数
     const o = _.merge({
@@ -556,8 +556,6 @@ function create(params) {
             }
         })
 
-        console.log('newValue', newValue)
-
         // 还原表格搜索数据
         tableSearchValue.value = _.cloneDeep(newValue)
 
@@ -742,29 +740,27 @@ function create(params) {
             return
         }
 
-        // 如果选择类型为单选
-        if (o.selection === 'single') {
-            tableSelected.value = [ row ]
-
-        // 否则为多选
-        } else {
+        const opt = {}
+        opt[o.rowKey] = row[o.rowKey]
 
-            const opt = {}
-            opt[o.rowKey] = row[o.rowKey]
+        // 获取当前数据索引
+        const itemIndex = _.findIndex(tableSelected.value, opt)
 
-            // 获取当前数据索引
-            const itemIndex = _.findIndex(tableSelected.value, opt)
+        // 如果不存在, 则添加
+        if (itemIndex === -1) {
 
-            // 如果不存在
-            if (itemIndex === -1) {
-                // 则添加
-                tableSelected.value.push(row)
+            // 如果选择类型为单选
+            if (o.selection === 'single') {
+                tableSelected.value = [ row ]
 
-            // 否则
+            // 否则为多选
             } else {
-                // 删除
-                tableSelected.value.splice(itemIndex, 1)
+                tableSelected.value.push(row)
             }
+
+        // 否则删除
+        } else {
+            tableSelected.value.splice(itemIndex, 1)
         }
     }
 
@@ -898,7 +894,7 @@ function create(params) {
 }
 
 /**
- * 获取配置
+ * 获取表格配置
  */
 function config(routePath, path, defaultValue) {
     return _.get(tablesConfig, utils.slash(routePath, 'start', false) + (path ? '.' + path : ''), defaultValue)
@@ -910,6 +906,6 @@ function config(routePath, path, defaultValue) {
 utils.$table = {
     // 创建表格
     create,
-    // 获取配置
+    // 获取表格配置
     config,
 }

package/components/input-number/number.js

@@ -1,67 +0,0 @@
-/**
- * 删除前后字符
- * @param {string} value
- * @param {string} char
- * @param {RegExp} regExp
- * @returns {string}
- */
-function trimExtraChar(value, char, regExp) {
-    const index = value.indexOf(char)
-    let prefix = ''
-
-    if (index === -1) {
-        return value
-    }
-
-    if (char === '-' && index !== 0) {
-        return value.slice(0, index)
-    }
-
-    if (char === '.' && value.match(/^(\.|-\.)/)) {
-        prefix = index ? '-0' : '0'
-    }
-
-    return (
-        prefix + value.slice(0, index + 1) + value.slice(index).replace(regExp, '')
-    )
-}
-
-/**
- * 格式化数字
- * @param {string} value
- * @param {boolean} allowDot
- * @param {boolean} allowMinus
- * @returns {string}
- */
-export function formatNumbers(
-    value,
-    allowDot = true,
-    allowMinus = true
-) {
-    if (allowDot) {
-        value = trimExtraChar(value, '.', /\./g)
-    } else {
-        value = value.split('.')[0]
-    }
-
-    if (allowMinus) {
-        value = trimExtraChar(value, '-', /-/g)
-    } else {
-        value = value.replace(/-/, '')
-    }
-
-    const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g
-
-    return value.replace(regExp, '')
-}
-
-/**
- * 增加数字
- * @param {number} num1
- * @param {number} num2
- * @returns {number}
- */
-export function addNumber(num1, num2) {
-    const cardinal = 10 ** 10
-    return Math.round((num1 + num2) * cardinal) / cardinal
-}

package/components/input-price-cent/index.vue

@@ -1,213 +0,0 @@
-<template>
-    <q-input
-        v-model="currentValue"
-        @blur="onBlur"
-        v-bind="$attrs"
-    >
-        <template
-            v-for="slotName in slotNames"
-            v-slot:[slotName]
-        >
-            <slot :name="slotName" />
-        </template>
-    </q-input>
-</template>
-
-<script>
-import { computed, ref, watch } from 'vue'
-
-/**
- * 金额(分转元)
- */
-export default {
-
-    /**
-     * 标识
-     */
-    name: 'NInputPrice',
-
-    /**
-     * 声明属性
-     */
-    props: {
-        // 值
-        modelValue: [String, Number],
-        // 最小值(分)
-        min: {
-            type: Number,
-            default: 1,
-        },
-        // 最大值(分)
-        max: Number,
-    },
-
-    /**
-     * 声明事件
-     */
-    emits: [
-        'update:modelValue',
-    ],
-
-    /**
-     * 组合式
-     */
-    setup(props, { emit, slots }) {
-
-        // ==========【数据】============================================================================================
-
-        // 当前值
-        const currentValue = ref(formatModelValue())
-
-        // ==========【计算属性】==========================================================================================
-
-        /**
-         * 插槽标识数组
-         */
-        const slotNames = computed(function() {
-            if (utils.isValidObject(slots)) {
-                return Object.keys(slots)
-            }
-            return []
-        })
-
-        /**
-         * 最大值
-         */
-        const maxValue = computed(function() {
-            const maxValue = new BigNumber(props.max)
-            if (maxValue.isFinite()) {
-                return maxValue
-                    .dividedBy(100)
-                    .toNumber()
-            }
-            return null
-        })
-
-        /**
-         * 最小值
-         */
-        const minValue = computed(function() {
-            const maxValue = new BigNumber(props.min)
-            if (maxValue.isFinite()) {
-                return maxValue
-                    .dividedBy(100)
-                    .toNumber()
-            }
-            return null
-        })
-
-        // ==========【监听数据】=========================================================================================
-
-        /**
-         * 监听声明值
-         */
-        watch(()=>props.modelValue, function() {
-            currentValue.value = formatModelValue()
-        })
-
-        // ==========【方法】=============================================================================================
-
-        /**
-         * 格式化传值
-         */
-        function formatModelValue() {
-            // 分转元
-            return utils.price(props.modelValue, '')
-        }
-
-        /**
-         * 提交值
-         */
-        function emitModelValue(newVal) {
-            // 更新值(元转分)
-            emit('update:modelValue', utils.priceYuanToCent(newVal, ''))
-        }
-
-        /**
-         * 失去焦点触发
-         */
-        function onBlur() {
-
-            if (utils.isValidValue(currentValue.value)) {
-
-                let val = new BigNumber(currentValue.value)
-
-                if (val.isFinite()) {
-
-                    // 值是否有更新
-                    let isChange = false
-
-                    if (
-                        // 如果值 > 0
-                        val.isGreaterThan(0)
-                        // 如果值精度 > 2
-                        && val.decimalPlaces() > 2
-                    ) {
-                        // 值有更新
-                        isChange = true
-
-                        // 将元向下舍入 2 位精度(如 68.345 -> 68.34)
-                        val = val.decimalPlaces(2, BigNumber.ROUND_DOWN)
-                    }
-
-                    // 如果值 >= 最大值
-                    if (maxValue.value !== null) {
-                        if (val.isGreaterThanOrEqualTo(maxValue.value)) {
-
-                            // 更新当前值
-                            currentValue.value = maxValue.value
-
-                            // 提交值
-                            emitModelValue(currentValue.value)
-                            return
-                        }
-                    }
-
-                    // 如果值 <= 最小值
-                    if (minValue.value !== null) {
-                        if (val.isLessThanOrEqualTo(minValue.value)) {
-
-                            // 更新当前值
-                            currentValue.value = minValue.value
-
-                            // 提交值
-                            emitModelValue(currentValue.value)
-                            return
-                        }
-                    }
-
-                    // 获取最新值
-                    val = val.toNumber()
-
-                    if (isChange) {
-                        // 更新当前值
-                        currentValue.value = val
-                    }
-
-                    // 提交值
-                    emitModelValue(val)
-                    return
-                }
-            }
-
-            // 更新当前值
-            currentValue.value = ''
-
-            // 提交值
-            emitModelValue(currentValue.value)
-        }
-
-        // ==========【返回】=============================================================================================
-
-        return {
-            // 当前值
-            currentValue,
-            // 插槽标识数组
-            slotNames,
-
-            // 失去焦点触发
-            onBlur,
-        }
-    },
-}
-</script>