@netang/quasar 0.0.36 → 0.0.39

package/components/field-table/index.vue

@@ -79,16 +79,17 @@
             no-refocus
             no-focus
             fit
-            @focus="onPopupFocus"
+            @focus="onFieldBlur"
             @show="onPopupShow"
-            @before-hide="onPopupBeforeHide"
+            @before-hide="showPopup = false"
             v-if="! readonly"
         >
             <!-- 快捷表格 -->
             <q-table
                 class="n-table n-field-table__popup-table"
                 v-model:pagination="tablePagination"
-                v-model:selected="selected"
+                :selected="selected"
+                @update:selected="emitModelValue"
                 :row-key="tableRowKey"
                 :rows="tableRows"
                 :columns="columns"
@@ -147,7 +148,7 @@
         width="80%"
         :on-confirm="onDialogConfirm"
         @before-show="onDialogBeforeShow"
-        @show="onDialogShow"
+        @show="tableLoad"
         @hide="onDialogHide"
         cancel
         v-bind="dialogProps"
@@ -159,7 +160,7 @@
 </template>
 
 <script>
-import { ref, computed, watch, onMounted, onUpdated } from 'vue'
+import { ref, computed, watch, onUpdated } from 'vue'
 
 export default {
 
@@ -172,18 +173,11 @@ export default {
      * 声明属性
      */
     props: {
-        // 值
-        modelValue: [ String, Number, Array ],
-        // 表格请求路径
-        path: String,
-        // 表格请求参数
-        query: Object,
-        // 附加请求数据
-        data: Object,
-        // 已选数据
-        selected: Array,
-        // 初始时不加载选择数据
-        noLoadSelected: Boolean,
+        // 值 v-model
+        modelValue: {
+            type: [ String, Number, Array ],
+            required: true,
+        },
         // 值字段(必填)
         valueKey: {
             type: String,
@@ -191,6 +185,28 @@ export default {
         },
         // 标签字段
         labelKey:  String,
+        // 值类型
+        // string: 分隔符隔开的字符串
+        // array: 数组
+        // arrayObject: 数组对象
+        valueType: {
+            type: String,
+            default: 'arrayObject'
+        },
+        // 值分隔符(值类型为 string 有效)
+        valueSeparator: {
+            type: String,
+            default: ',',
+        },
+
+        // 表格请求路径
+        path: String,
+        // 表格请求参数
+        query: Object,
+        // 附加请求数据
+        data: Object,
+        // 不加载已选数据
+        noLoadSelected: Boolean,
         // 格式化显示标签
         formatLabel: Function,
         // 快捷表格显示的字段数组(空为:[值字段, 标签字段])
@@ -206,8 +222,6 @@ export default {
         // 对话框声明属性
         dialogProps: Object,
 
-        // 值是否为数组
-        valueArray: Boolean,
         // 关闭对话框
         noDialog: Boolean,
 
@@ -232,11 +246,6 @@ export default {
             type: [ Number, String ],
             default: 500
         },
-        // 值分隔符(值为非数组有效)
-        valueSeparator: {
-            type: String,
-            default: ',',
-        },
     },
 
     /**
@@ -298,6 +307,7 @@ export default {
 
         // ==========【数据】============================================================================================
 
+
         // 创建权限实例
         const $power = utils.$power.create({
             // 路由路径
@@ -328,7 +338,7 @@ export default {
             // 选择类型, 可选值 single multiple none
             selection: props.multiple ? 'multiple' : 'single',
             // 已选数据
-            selected: initSelected(),
+            selected: [],
             // http 设置
             httpSettings: {
                 // 头部请求
@@ -344,12 +354,6 @@ export default {
         // 创建防抖睡眠方法
         const sleep = utils.debounceSleep()
 
-        // 停止观察值
-        let stopValueWatcher = false
-
-        // 停止观察已选数据
-        let stopSelectedWatcher = false
-
         // 输入框节点
         const inputRef = ref(null)
 
@@ -365,24 +369,28 @@ export default {
         // 是否显示弹出层
         const showPopup = ref(false)
 
-        // 当前已选数据
-        const selected = ref([...$table.tableSelected.value])
-
         // 当前表格列数据
         const columns = getQuickTableColumns()
 
-        // 如果有已选数据
-        if (utils.isValidArray(selected.value)) {
-            // 检查值更新
-            checkModelValueChange()
-        }
+        // 停止观察值
+        let stopValueWatcher = false
+
+        // 临时已选数据
+        let tempSelected = []
+
+        // 初始化已选数据
+        const selected = ref(valueToSelected(props.modelValue, true, true))
+
+        // 加载已选数据
+        loadSelected()
+            .finally()
 
         // ==========【监听数据】=========================================================================================
 
         /**
          * 监听声明值
          */
-        watch(()=>props.modelValue, async function() {
+        watch(() => props.modelValue, async function(val) {
 
             // 如果停止观察值
             if (stopValueWatcher === true) {
@@ -391,102 +399,75 @@ export default {
                 return
             }
 
-            // 格式化值
-            let values = formatModelValue()
+            // 值转已选数据
+            let newSelected = valueToSelected(val, false, false)
 
-            // 如果值是有效数组
-            if (utils.isValidArray(values)) {
+            // 如果值类型是数组对象
+            if (props.valueType === 'arrayObject') {
 
-                // 去重
-                values = _.uniq(values)
+                // 设置已选数据
+                setSelected(newSelected)
 
-                // 已选数据值数组
-                const selectedValues = utils.isValidArray(selected.value)
-                    // 如果有已选数据
-                    ? _.uniq(selected.value.map(e => e[props.valueKey]))
-                    // 否则为空
-                    : []
-
-                // 需增删除的值
-                const removeValues = selectedValues.filter(e => values.indexOf(e) === -1)
-                if (removeValues.length) {
-                    utils.forEachRight(selected.value, function (item, index) {
-                        if (removeValues.indexOf(item[props.valueKey]) > -1) {
-                            selected.value.splice(index, 1)
-                        }
-                    })
-                }
-
-                // 需增加的值
-                const addValues = values.filter(e => selectedValues.indexOf(e) === -1)
-                if (addValues.length) {
-                    // 请求选择数据
-                    selected.value.push(...await onRequestSelected(addValues))
-                }
-
-            // 否则
+            // 否则值类型是字符串或数组
             } else {
-                // 清空已选数据
-                selected.value = []
-            }
 
-            // 检查值更新
-            checkModelValueChange()
-        })
+                // 初始已选数据
+                let _selected = []
 
-        /**
-         * 监听声明选择数据
-         */
-        watch(()=>props.selected, function(val) {
+                // 如果值转已选数据是有效数组
+                if (newSelected.length) {
 
-            // 如果停止观察已选数据
-            if (stopSelectedWatcher === true) {
-                // 取消停止观察已选数据
-                stopSelectedWatcher = false
-                return
-            }
+                    // 当前已选数据
+                    const currentSelected = tempSelected.length ? tempSelected : selected.value
 
-            if (val !== selected.value) {
-                // 设置选择数据
-                selected.value = val
-            }
+                    // 如果有已选数据
+                    if (currentSelected.length) {
 
-            // 检查值更新
-            checkModelValueChange()
+                        // 新已选数据
+                        _selected = currentSelected.filter(e => newSelected.indexOf(e[props.valueKey]) > -1)
 
-            // 设置输入框焦点
-            setInputFocus()
+                        // 需增加的值
+                        newSelected = newSelected.filter(e => _selected.map(e => e[props.valueKey]).indexOf(e) === -1)
+                    }
 
-            // 设置输入框文字选中
-            setInputSelection()
+                    // 需增加的值
+                    if (newSelected.length) {
 
-        }, {
-            // 深度监听
-            deep: true
-        })
+                        // 如果不加载已选数据
+                        if (props.noLoadSelected) {
+                            // 请求选择数据
+                            _selected.push(...newSelected.map(e => setSelectedItem(e)))
+                        } else {
+                            // 请求选择数据
+                            _selected.push(...await onRequestSelected(newSelected))
+                        }
+                    }
+                }
 
-        /**
-         * 监听当前已选数据
-         */
-        watch(selected, function(val) {
+                // 设置已选数据
+                setSelected(_selected)
 
-            if (val !== props.selected) {
+                // 清空临时已选数据
+                tempSelected = []
+            }
 
-                // 停止观察已选数据
-                stopSelectedWatcher = true
+            // 将已选数据转为值
+            const _value = selectedToValue(selected.value)
 
-                // 更新选择数据
-                emit('update:selected', val)
+            // 如果声明值发生变化
+            if (_value !== props.modelValue) {
+                // 停止观察值
+                stopValueWatcher = true
+                // 触发更新已选数据
+                emit('update:modelValue', _value)
             }
 
-            // 检查值更新
-            checkModelValueChange()
-
             // 设置输入框焦点
             setInputFocus()
 
             // 设置输入框文字选中
             setInputSelection()
+
         }, {
             // 深度监听
             deep: true,
@@ -497,32 +478,26 @@ export default {
          */
         watch(inputValue, async function (val) {
 
-            // 取消延迟执行
-            sleep.cancel()
+            // 延迟执行
+            await sleep(props.inputDebounce)
 
+            // 是否有值
             const hasValue = utils.isValidValue(val)
-            if (hasValue) {
 
-                const n_search = {}
-                n_search[currentFilterKey.value] = [
-                    {
-                        // 比较类型
-                        compare: dicts.SEARCH_COMPARE_TYPE__LIKE,
-                        // 值
-                        value: val || '',
-                    }
-                ]
-
-                $table.tableQuery.value = {
-                    n_search,
+            const n_search = {}
+            n_search[currentFilterKey.value] = [
+                {
+                    // 比较类型
+                    compare: dicts.SEARCH_COMPARE_TYPE__LIKE,
+                    // 值
+                    value: hasValue ? val : '',
                 }
+            ]
 
-            } else {
-                $table.tableQuery.value = {}
-            }
-
-            // 延迟执行
-            await sleep(props.inputDebounce)
+            // 设置表格传参
+            $table.setQuery({
+                n_search,
+            })
 
             if (
                 // 如果弹出层是隐藏的
@@ -541,33 +516,67 @@ export default {
         // ==========【方法】=============================================================================================
 
         /**
-         * 初始化已选数据
+         * 加载已选数据
          */
-        function initSelected() {
-
-            // 如果有已选数据
-            if (utils.isValidArray(props.selected)) {
+        async function loadSelected() {
 
-                // 则返回已选数据
-                return props.selected
-            }
-
-            // 如果初始时不加载选择数据
-            if (props.noLoadSelected) {
-
-                // 将值格式化为已选数据数组
-                const vals = formatModelValue()
-                if (utils.isValidArray(vals)) {
-                    return vals.map(function (val) {
-                        const obj = {}
-                        obj[props.valueKey] = val
-                        obj[currentlabelKey.value] = val
-                        return obj
-                    })
+            if (
+                // 如果值类型不是数组对象
+                props.valueType !== 'arrayObject'
+                // 如果不加载已选数据
+                && ! props.noLoadSelected
+                // 如果有请求路由路径
+                && routePath
+            ) {
+                // 获取值数组
+                const values = valueToSelected(props.modelValue, false, false)
+                if (values.length) {
+
+                    // 初始的已选数据
+                    const _selected = await onRequestSelected(values)
+                    const _value = selectedToValue(_selected)
+
+                    // 如果声明值未发生变化
+                    if (_value === props.modelValue) {
+                        // 设置已选数据
+                        setSelected(_selected)
+
+                    } else {
+                        // 设置临时已选数据
+                        tempSelected = _selected
+                        // 触发更新值
+                        emit('update:modelValue', _value)
+                    }
+                    return
                 }
             }
 
-            return []
+            // 触发更新已选数据
+            emit('update:selected', selected.value)
+        }
+
+        /**
+         * 触发更新值
+         */
+        function emitModelValue(val) {
+
+            // 设置临时已选数据
+            tempSelected = val
+
+            // 触发更新值
+            emit('update:modelValue', selectedToValue(val))
+        }
+
+        /**
+         * 设置已选数据
+         */
+        function setSelected(val) {
+
+            // 设置已选数据
+            selected.value = val
+
+            // 触发更新已选数据
+            emit('update:selected', val)
         }
 
         /**
@@ -583,18 +592,96 @@ export default {
         }
 
         /**
-         * 格式化值
+         * 设置已选数据的单个元素
+         */
+        function setSelectedItem(val) {
+            const obj = {}
+            obj[props.valueKey] = val
+            obj[currentlabelKey.value] = val
+            return obj
+        }
+
+        /**
+         * 值转已选数据
          */
-        function formatModelValue() {
+        function valueToSelected(val, isFirst, toSelected) {
+
+            // 如果值类型是数组对象
+            if (props.valueType === 'arrayObject') {
 
-            // 如果值是数组
-            if (props.valueArray) {
-                return props.modelValue
+                // 如果是有效数组
+                if (utils.isValidArray(val)) {
+                    for (const item of val) {
+                        if (
+                            // 如果元素不是有效对象
+                            ! utils.isValidObject(item)
+                            // 如果元素没有值字段
+                            || ! _.has(item, props.valueKey)
+                        ) {
+                            return []
+                        }
+                    }
+                }
+
+                // 否则直接返回
+                return val
+            }
+
+            if (
+                // 非初始化
+                ! isFirst
+                // 或非加载已选数据
+                || props.noLoadSelected
+                // 或没有路由路径
+                || ! routePath
+            ) {
+                // 将值转为数组
+                val = props.valueType === 'string' ? utils.split(val, props.valueSeparator) : val
+
+                // 如果是有效数组
+                if (utils.isValidArray(val)) {
+                    val = val.filter(e => utils.isValidValue(e))
+                    return toSelected ? val.map(e => setSelectedItem(e)) : val
+                }
+            }
+
+            return []
+        }
+
+        /**
+         * 已选数据转值
+         */
+        function selectedToValue(val) {
+
+            // 如果值类型是数组对象
+            if (props.valueType === 'arrayObject') {
+
+                // 则直接返回
+                return val
+            }
+
+            // 值数组
+            const values = val.length
+                // 如果有已选数据
+                ? (
+                    props.multiple
+                        // 如果是多选
+                        ? val.map(e => e[props.valueKey])
+                        // 否则是单选
+                        : [ val[0][props.valueKey] ]
+                )
+                // 否则为空
+                : []
+
+            // 如果值类型是数组
+            if (props.valueType === 'array') {
+
+                // 直接返回数组
+                return values
             }
 
-            // 否则值是字符串/数字
-            return _.uniq(utils.split(props.modelValue, props.valueSeparator))
-                .filter(e => utils.isValidValue(e))
+            // 返回转为分隔符隔开的字符串
+            return utils.join(values, props.valueSeparator)
         }
 
         /**
@@ -635,69 +722,6 @@ export default {
             return status && utils.isValidArray(_.get(data, 'rows')) ? data.rows : []
         }
 
-        /**
-         * 初始加载选择数据
-         */
-        async function onLoadSelected() {
-
-            if (
-                // 如果初始不加载选择数据
-                props.noLoadSelected
-                // 如果没有请求路由路径
-                || ! routePath
-                // 如果有选择数据
-                || utils.isValidArray(selected.value)
-            ) {
-                // 则无任何操作
-                return
-            }
-
-            // 格式化值
-            const value = formatModelValue()
-
-            // 如果值不是有效数组
-            if (! utils.isValidArray(value)) {
-                // 则无任何操作
-                return
-            }
-
-            // 设置已选数据
-            selected.value = await onRequestSelected(value)
-        }
-
-        /**
-         * 检查值更新
-         */
-        function checkModelValueChange() {
-
-            let newModelValue = utils.isValidArray(selected.value)
-                // 如果有已选数据
-                ? (
-                    props.multiple
-                        // 如果是多选
-                        ? selected.value.map(e => e[props.valueKey])
-                        // 否则是单选
-                        : [ selected.value[0][props.valueKey] ]
-                )
-                // 否则为空
-                : []
-
-            // 如果值为字符串或数字
-            if (! props.valueArray) {
-                newModelValue = utils.numberDeep(utils.join(newModelValue, props.valueSeparator))
-            }
-
-            // 如果值发生改变
-            if (newModelValue !== props.modelValue) {
-
-                // 停止观察值
-                stopValueWatcher = true
-
-                // 提交更新值
-                emit('update:modelValue', newModelValue)
-            }
-        }
-
         /**
          * 获取表格列数据
          */
@@ -814,27 +838,14 @@ export default {
          */
         function onFieldClear() {
 
+            // 触发更新值
             // 清空快捷表格已选数据
-            selected.value = []
+            emitModelValue([])
 
             // 隐藏弹出层
             popupRef.value.hide()
         }
 
-        /**
-         * 弹出层获取焦点触发
-         */
-        function onPopupFocus(e) {
-
-            // 停止冒泡
-            e.stopPropagation()
-
-            // 设置输入框焦点
-            setInputFocus()
-
-            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
-        }
-
         /**
          * 弹出层显示回调
          */
@@ -851,15 +862,6 @@ export default {
                 .finally()
         }
 
-        /**
-         * 弹出层隐藏前显示回调
-         */
-        function onPopupBeforeHide() {
-
-            // 隐藏弹出层
-            showPopup.value = false
-        }
-
         /**
          * 对话框显示前回调
          */
@@ -872,16 +874,6 @@ export default {
             popupRef.value.hide()
         }
 
-        /**
-         * 对话框显示回调
-         */
-        function onDialogShow() {
-
-            // 表格加载(只加载一次)
-            $table.tableLoad()
-                .finally()
-        }
-
         /**
          * 对话框隐藏后回调
          */
@@ -914,37 +906,47 @@ export default {
          * 对话框点击确认回调
          */
         function onDialogConfirm(data) {
-            selected.value = [...data]
+
+            // 触发更新值
+            emitModelValue([...data])
         }
 
         /**
          * 单击快捷表格行
          */
-        function quickTableRowClick(e, row, index) {
+        function quickTableRowClick(e, row) {
 
             // 如果为多选
             if (props.multiple) {
 
+                // 克隆已选数据
+                const _selected = [...selected.value]
+
                 const opt = {}
                 opt[props.valueKey] = row[props.valueKey]
 
                 // 获取当前数据索引
-                const itemIndex = _.findIndex(selected.value, opt)
+                const itemIndex = _.findIndex(_selected, opt)
 
                 // 如果不存在
                 if (itemIndex === -1) {
                     // 则添加
-                    selected.value.push(row)
+                    _selected.push(row)
 
                 // 否则
                 } else {
                     // 删除
-                    selected.value.splice(itemIndex, 1)
+                    _selected.splice(itemIndex, 1)
                 }
 
+                // 触发更新值
+                emitModelValue(_selected)
+
             // 否则为单选
             } else {
-                selected.value = [ row ]
+
+                // 触发更新值
+                emitModelValue([ row ])
 
                 // 隐藏弹出层
                 popupRef.value.hide()
@@ -985,15 +987,6 @@ export default {
 
         // ==========【生命周期】=========================================================================================
 
-        /**
-         * 实例被挂载后调用
-         */
-        onMounted(async function() {
-
-            // 初始加载选择数据
-            await onLoadSelected()
-        })
-
         /**
          * 在组件因为响应式状态变更而更新其 DOM 树之后调用
          */
@@ -1041,17 +1034,11 @@ export default {
             // 字段清空触发
             onFieldClear,
 
-            // 弹出层获取焦点触发
-            onPopupFocus,
             // 弹出层显示回调
             onPopupShow,
-            // 弹出层隐藏前显示回调
-            onPopupBeforeHide,
 
             // 对话框显示前回调
             onDialogBeforeShow,
-            // 对话框显示回调
-            onDialogShow,
             // 对话框隐藏后回调
             onDialogHide,
             // 对话框点击确认回调
@@ -1059,6 +1046,9 @@ export default {
 
             // 单击快捷表格行
             quickTableRowClick,
+
+            // 触发更新值
+            emitModelValue,
         }
     },
 }