@netang/quasar 0.0.22 → 0.0.24

package/components/field-table/index.vue

@@ -1,54 +1,89 @@
 <template>
+    <!--:class="fieldFocused ? 'q-field&#45;&#45;float q-field&#45;&#45;focused q-field&#45;&#45;highlighted' : ''"-->
     <q-field
-        :class="fieldFocused ? 'q-field--float q-field--focused q-field--highlighted' : ''"
+        class="n-field-table"
         :model-value="modelValue"
         :readonly="readonly"
-        @clear="onClear"
+        :clearable="clearable && ! multiple"
+        @clear="onFieldClear"
         v-bind="$attrs"
     >
         <template v-slot:control>
 
-            <!--&lt;!&ndash; 显示值 &ndash;&gt;-->
-            <!--<div v-if="showValue">{{showValue}}</div>-->
+            <template v-if="multiple">
+
+                <!-- 多选插槽 -->
+                <slot
+                    name="selected"
+                    :selected="selected"
+                    :remove="onRemoveSelected"
+                    v-if="$slots.selected"
+                />
+
+                <!-- 多选标签 -->
+                <template v-else>
+                    <q-chip
+                        v-for="(item, index) in selected"
+                        :key="`options-${index}`"
+                        :label="item[labelKey || rowKey]"
+                        removable
+                        @remove="onRemoveSelected(item, index)"
+                        dense
+                    />
+                </template>
+            </template>
+
+            <!-- 显示文字 -->
+            <span v-else>
+                {{showValue}}
+            </span>
+
+            <!-- 筛选输入框 -->
+            <input
+                ref="inputRef"
+                class="q-field__input q-placeholder col q-field__input--padding"
+                v-model="inputValue"
+                v-if="filter"
+            />
 
-            <!--&lt;!&ndash; 显示占位符 &ndash;&gt;-->
-            <!--<div class="n-placeholder" v-else-if="placeholder">{{placeholder}}</div>-->
         </template>
 
-        <template v-slot:append>
+        <!-- 弹出对话框图标 -->
+        <template v-slot:append v-if="! noDialog">
             <q-icon
                 class="cursor-pointer"
                 name="search"
-                @click.prevent.stop="onDialog"
+                @click.prevent.stop="showDialog = true"
             />
         </template>
 
+        <!-- 弹出层代理 -->
         <q-popup-proxy
             ref="popupRef"
-            @before-show="onPopupBeforeShow"
+            no-refocus
+            no-focus
             @show="onPopupShow"
-            @before-hide="onPopupBeforeHide"
-            @hide="onPopupHide"
+            @focus="onPopupFocus"
             v-if="! readonly"
         >
+            <!-- 快捷表格 -->
             <q-table
-                ref="tableRef"
                 class="n-table"
                 style="min-width:500px;max-width:90vw;height: 300px;"
                 v-model:pagination="tablePagination"
-                v-model:selected="tableSelected"
+                v-model:selected="selected"
                 :row-key="tableRowKey"
                 :rows="tableRows"
-                :columns="tableColumns"
-                :selection="tableSelection"
+                :columns="columns"
+                :selection="multiple ? 'multiple' : 'none'"
                 :loading="tableLoading"
                 :rows-per-page-options="tableRowsPerPageOptions"
-                @row-click="tableRowClick"
-                @row-dblclick="tableRowDblclick"
+                @row-click="quickTableRowClick"
                 @request="tableRequest"
                 flat
                 virtual-scroll
                 dense
+                v-bind="tableProps"
             >
                 <!-- 图片 -->
                 <template
@@ -77,42 +112,37 @@
                     </q-td>
                 </template>
 
-                <!-- 合计 -->
-                <!--<template v-slot:bottom-row="props" v-if="tableSummary">-->
-                <!--    <n-table-summary-->
-                <!--        :props="props"-->
-                <!--        :data="tableSummary"-->
-                <!--        :selection="tableSelection"-->
-                <!--    />-->
-                <!--</template>-->
-
                 <!-- 翻页 -->
                 <template v-slot:pagination="props">
                     <n-table-pagination
                         :props="props"
-                        :table-refresh="tableRefresh"
+                        no-power
+                        dense
                     />
                 </template>
             </q-table>
         </q-popup-proxy>
     </q-field>
 
+    <!-- 弹出对话框 -->
     <n-dialog
-        title="选择商品"
         v-model="showDialog"
+        width="80%"
+        :on-confirm="onDialogConfirm"
+        @before-show="onDialogBeforeShow"
+        @show="onDialogShow"
+        @hide="onDialogHide"
+        cancel
+        v-bind="dialogProps"
     >
         <q-page>
-            <n-table
-                page-status
-                @load="onPopupShow"
-            />
+            <n-table />
         </q-page>
     </n-dialog>
 </template>
 
 <script>
-import { ref, reactive, computed, provide, watch, nextTick, onMounted } from 'vue'
-import { NFieldTableKey } from '../../utils/symbols'
+import { ref, computed, watch, onMounted } from 'vue'
 
 export default {
 
@@ -126,40 +156,70 @@ export default {
      */
     props: {
         // 值
-        modelValue: [String, Number],
-        // 占位符
-        placeholder: String,
-        // 是否只读
-        readonly: Boolean,
-
-        // 表格请求地址
-        url: String,
-        // 路由组件路径
-        route: String,
-        // 值属性名称
+        modelValue: [ String, Number, Array ],
+        // 是否可清除
+        clearable: Boolean,
+        // 表格请求路径
+        path: String,
+        // 表格请求参数
+        query: Object,
+        // 附加请求数据
+        data: Object,
+        // 已选数据
+        selected: Array,
+        // 初始加载选择数据
+        loadSelected: {
+            type: Boolean,
+            default: true,
+        },
+        // 值字段(必填)
         valueKey: {
             type: String,
             required: true,
         },
-        // 快捷表格显示的属性名称数组
-        showKeys: {
-            type: Array,
+        // 标签字段(必填)
+        labelKey:  {
+            type: String,
             required: true,
         },
-        // 默认搜索属性名称
-        searchKey: String,
-
-        // 表格列数据
-        columns: Array,
         // 表格行唯一键值
         rowKey: {
             type: String,
             default: 'id',
         },
-        // 是否多选
-        multiple: Boolean,
+        // 快捷表格显示的字段数组(空为:[值字段, 标签字段])
+        showKeys: Array,
+        // 隐藏搜索字段数组
+        hideSearchKeys: Array,
+        // 默认筛选字段(空为:标签字段)
+        filterKey: String,
+        // 是否开启筛选
+        filter: Boolean,
+        // 表格声明属性
+        tableProps: Object,
+        // 对话框声明属性
+        dialogProps: Object,
+
+        // 占位符
+        placeholder: String,
+        // 是否只读
+        readonly: Boolean,
+        // 值是否为数组
+        valueArray: Boolean,
+        // 关闭对话框
+        noDialog: Boolean,
+
+        // 表格列数据
+        columns: Array,
         // 行数据
         rows: Array,
+        // 是否多选
+        multiple: Boolean,
+        // 输入防抖(毫秒)
+        inputDebounce: {
+            type: [ Number, String ],
+            default: 500
+        },
     },
 
     /**
@@ -167,6 +227,7 @@ export default {
      */
     emits: [
         'update:modelValue',
+        'update:selected',
     ],
 
     /**
@@ -174,156 +235,427 @@ export default {
      */
     setup(props, { emit, slots }) {
 
+        // ==========【计算属性】=========================================================================================
 
-        // ==========【数据】============================================================================================
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
+            return utils.isValidObject(slots) ? Object.keys(slots) : []
+        })
 
-        // 字段组件获取焦点
-        const fieldFocused = ref(false)
+        /**
+         * 当前显示字段
+         */
+        const currentShowKeys = computed(function() {
+            return utils.isValidArray(props.showKeys)
+                ? props.showKeys
+                : [ props.rowKey, props.labelKey ]
+        })
 
-        // 弹出层节点
-        const popupRef = ref(null)
+        /**
+         * 当前搜索字段
+         */
+        const currentFilterKeys = computed(function() {
+            return props.filterKey || props.labelKey
+        })
 
-        // 是否显示对话框
-        const showDialog = ref(false)
+        /**
+         * 显示值
+         */
+        const showValue = computed(function () {
+
+            // 如果是单选
+            if (! props.multiple && utils.isValidArray(selected.value)) {
+                return selected.value[0][props.labelKey || props.rowKey]
+            }
+
+            return ''
+        })
+
+        // ==========【数据】============================================================================================
 
-        // 表格是否已加载
-        let tableLoaded = false
+        // 创建权限实例
+        const $power = utils.$power.create({
+            // 路由路径
+            path: utils.isValidString(props.path) ? props.path : false,
+            // 路由参数
+            query: props.query,
+            // 关闭权限页面
+            power: false,
+        })
 
-        // 创建表格
+        const {
+            // 当前路由路径
+            routePath,
+        } = $power
+
+        // 创建表格实例
         const $table = utils.$table.create({
-            url: props.route ? props.route : props.url,
+            // 权限实例
+            $power,
+            // 附加请求数据
+            data: props.data,
             // 获取表格列数据
             columns: getTableColumns(),
             // 表格行唯一键值
             rowKey: props.rowKey,
+            // 行数据
+            rows: props.rows,
             // 选择类型, 可选值 single multiple none
-            selection: props.multiple ? 'multiple' : 'none',
-            // // 关闭宫格
-            // showGrid: false,
-            // // 关闭可见列
-            // showVisibleColumns: false,
+            selection: props.multiple ? 'multiple' : 'single',
+            // 已选数据
+            selected: props.selected,
+            // http 设置
+            httpSettings: {
+                // 头部请求
+                headers: {
+                    // 添加头部查看请求
+                    Pview: 1,
+                },
+            },
+            // 刷新后清空已选数据
+            refreshResetSelected: false,
         })
 
-        // ==========【注入】============================================================================================
+        // 创建防抖睡眠方法
+        const sleep = utils.debounceSleep()
 
-        // 向后代注入数据
-        provide(NFieldTableKey, {
-            // 表格实例
-            $table,
-        })
+        // 输入框节点
+        const inputRef = ref(null)
 
-        // ==========【计算属性】=========================================================================================
+        // 输入框值
+        const inputValue = ref('')
+
+        // 弹出层节点
+        const popupRef = ref(null)
+
+        // 是否显示对话框
+        const showDialog = ref(false)
+
+        // 当前已选数据
+        const selected = ref([...$table.tableSelected.value])
+
+        // 当前表格列数据
+        const columns = getQuickTableColumns()
+
+        // 如果有已选数据
+        if (utils.isValidArray(selected.value)) {
+            // 检查值更新
+            checkModelValueChange()
+        }
+
+        // ==========【监听数据】=========================================================================================
 
         /**
-         * 插槽标识
+         * 监听声明值
          */
-        const slotNames = computed(function() {
-            if (utils.isValidObject(slots)) {
-                return Object.keys(slots)
+        watch(()=>props.modelValue, async function() {
+
+            // 格式化值
+            let values = formatModelValue()
+
+            // 如果值不是有效数组
+            if (! utils.isValidArray(values)) {
+                // 则清空已选数据
+                selected.value = []
+                return
+            }
+            values = _.uniq(values)
+
+            // 已选数据值数组
+            const selectedValues = utils.isValidArray(selected.value)
+                // 如果有已选数据
+                ? _.uniq(selected.value.map(e => e[props.rowKey]))
+                // 否则为空
+                : []
+
+            // 需增删除的值
+            const removeValues = selectedValues.filter(e => values.indexOf(e) === -1)
+            if (removeValues.length) {
+                utils.forEachRight(selected.value, function (item, index) {
+                    if (removeValues.indexOf(item[props.rowKey]) > -1) {
+                        selected.value.splice(index, 1)
+                    }
+                })
+            }
+
+            // 需增加的值
+            const addValues = values.filter(e => selectedValues.indexOf(e) === -1)
+            if (addValues.length) {
+                // 请求选择数据
+                selected.value.push(...await onRequestSelected(addValues))
             }
-            return []
         })
 
         /**
-         * 获取表格列数据
+         * 监听声明选择数据
          */
-        // const tableColumns = computed(function () {
-        //
-        //     // 获取原始表格列数据
-        //     const rawTableColumns = props.route
-        //         // 如果有路由组件路径
-        //         ? utils.$table.config(props.route, 'columns')
-        //         // 否则为自定义表格列数据
-        //         : props.columns
-        //
-        //     // 如果有原始表格列数据
-        //     return utils.isValidArray(rawTableColumns)
-        //         // 克隆原始表格列数据
-        //         ? _.cloneDeep(rawTableColumns)
-        //         : []
-        // })
+        watch(()=>props.selected, function(val) {
+            if (val !== selected.value) {
+                // 设置选择数据
+                selected.value = val
+            }
+            // 检查值更新
+            checkModelValueChange()
 
-        // ==========【监听数据】=========================================================================================
+            // 设置输入框焦点
+            setInputFocus()
+
+        }, {
+            // 深度监听
+            deep: true
+        })
 
         /**
-         * 获取快捷表格列数据
+         * 监听当前已选数据
          */
-        // watch([()=>props.modelValue, ()=>props.end, ()=>props.type], function() {
-        //
-        // })
+        watch(selected, function(val) {
+            if (val !== props.selected) {
+                emit('update:selected', val)
+            }
+        }, {
+            // 深度监听
+            deep: true,
+        })
+
+        /**
+         * 监听输入框值
+         */
+        watch(inputValue, async function (val) {
+
+            // 取消延迟执行
+            sleep.cancel()
+
+            if (utils.isValidValue(val)) {
+
+                const n_search = {}
+                n_search[currentFilterKeys.value] = [
+                    {
+                        // 比较类型
+                        type: dicts.SEARCH_TYPE__LIKE,
+                        // 值
+                        value: val || '',
+                    }
+                ]
+
+                $table.tableQuery.value = {
+                    n_search,
+                }
+
+            } else {
+                $table.tableQuery.value = {}
+            }
+
+            // 延迟执行
+            await sleep(props.inputDebounce)
+
+            // 表格重新加载
+            await $table.tableReload()
+        })
 
         // ==========【方法】=============================================================================================
 
+        /**
+         * 格式化值
+         */
+        function formatModelValue() {
+
+            // 如果值是数组
+            if (props.valueArray) {
+                return props.modelValue
+            }
+
+            // 否则值是字符串/数字
+            return utils.split(props.modelValue, ',')
+        }
+
+        /**
+         * 请求选择数据
+         */
+        async function onRequestSelected(value) {
+
+            // 请求数据
+            const { status, data } = await utils.http({
+                url: $table.routePath,
+                data: Object.assign(
+                    // 获取表格请求数据
+                    $table.getTableRequestData({
+                        // filter,
+                        pagination: {
+                            // 页码
+                            page: 1,
+                            // 每页的数据条数
+                            rowsPerPage: value.length,
+                            // 排序字段
+                            sortBy: null,
+                            // 是否降序排列
+                            descending: true,
+                        }
+                    }, false),
+                    {
+                        // 查看字段
+                        n_view: {
+                            // 查看字段
+                            field: props.rowKey,
+                            // 查看值
+                            value,
+                        },
+                    }
+                ),
+            })
+
+            return status && utils.isValidArray(_.get(data, 'rows')) ? data.rows : []
+        }
+
+        /**
+         * 初始加载选择数据
+         */
+        async function onLoadSelected() {
+
+            if (
+                // 如果初始不加载选择数据
+                ! props.loadSelected
+                // 如果没有请求路由路径
+                || ! 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.rowKey])
+                        // 否则是单选
+                        : [ selected.value[0][props.rowKey] ]
+                )
+                // 否则为空
+                : []
+
+            // 如果值为字符串或数字
+            if (! props.valueArray) {
+                newModelValue = utils.numberDeep(utils.join(newModelValue, ','))
+            }
+
+            // 如果值发生改变
+            if (! _.isEqual(newModelValue, props.modelValue)) {
+
+                // 提交更新值
+                emit('update:modelValue', newModelValue)
+            }
+        }
+
         /**
          * 获取表格列数据
          */
         function getTableColumns() {
 
-            // 获取原始表格列数据
-            const rawTableColumns = props.route
-                // 如果有路由组件路径
-                ? utils.$table.config(props.route, 'columns')
-                // 否则为自定义表格列数据
-                : props.columns
+            let columns
+
+            // 如果有声明路由表格列数据
+            if (utils.isValidArray(props.columns)) {
+                columns = _.cloneDeep(props.columns)
+
+            // 如果有路由路径
+            } else if (routePath) {
+                // 否则如果有路由表格列数据
+                const rawTableColumns = utils.$table.config(routePath, 'columns')
+                if (utils.isValidArray(rawTableColumns)) {
+                    columns = _.cloneDeep(rawTableColumns)
+                }
+            }
+
+            if (utils.isValidArray(columns)) {
+                if (utils.isValidArray(props.hideSearchKeys)) {
+                    for (const item of columns) {
+                        if (
+                            props.hideSearchKeys.indexOf(item.name) > -1
+                            && _.has(item, 'search')
+                        ) {
+                            item.search.hide = true
+                        }
+                    }
+                }
+                return columns
+            }
+
+            return []
+        }
+
+        /**
+         * 获取快捷表格列数据
+         */
+        function getQuickTableColumns() {
+
+            const columns = []
 
             // 如果有原始表格列数据
-            return utils.isValidArray(rawTableColumns)
+            if (utils.isValidArray($table.tableColumns)) {
+
                 // 克隆原始表格列数据
-                ? _.cloneDeep(rawTableColumns)
-                // 否则为空
-                : []
+                const rawTableColumns = _.cloneDeep($table.tableColumns)
+
+                // 快捷表格显示的属性名称数组
+                utils.forEach(currentShowKeys.value, function (key) {
+                    for (const item of rawTableColumns) {
+                        if (item.name === key) {
+                            // 删除搜索字段
+                            if (_.has(item, 'search')) {
+                                delete item.search
+                            }
+                            // 删除可见字段
+                            if (_.has(item, 'visible')) {
+                                delete item.visible
+                            }
+                            columns.push(item)
+                        }
+                    }
+                })
+            }
 
-            // const columns = []
-            //
-            // // 获取原始表格列数据
-            // let rawTableColumns = props.route
-            //     // 如果有路由组件路径
-            //     ? utils.$table.config(props.route, 'columns')
-            //     // 否则为自定义表格列数据
-            //     : props.columns
-            //
-            // // 如果有原始表格列数据
-            // if (utils.isValidArray(rawTableColumns)) {
-            //
-            //     // 克隆原始表格列数据
-            //     rawTableColumns = _.cloneDeep(rawTableColumns)
-            //
-            //     // 快捷表格显示的属性名称数组
-            //     utils.forEach(props.showKeys, function (key) {
-            //         for (const item of rawTableColumns) {
-            //             if (item.name === key) {
-            //                 // 删除搜索字段
-            //                 if (_.has(item, 'search')) {
-            //                     delete item.search
-            //                 }
-            //                 // 删除可见字段
-            //                 if (_.has(item, 'visible')) {
-            //                     delete item.visible
-            //                 }
-            //                 columns.push(item)
-            //             }
-            //         }
-            //     })
-            // }
-            //
-            // return columns
+            return columns
         }
 
         /**
-         * 取消
+         * 移除已选数据
          */
-        function onCancel() {
-            // 还原原始值
-            // onEmit('update:modelValue', oldModelValue)
+        function onRemoveSelected(item, index) {
+            selected.value.splice(index, 1)
         }
 
         /**
-         * 弹出层显示前回调
+         * 字段清空触发
          */
-        function onPopupBeforeShow() {
+        function onFieldClear() {
 
-            // 字段组件获取焦点
-            fieldFocused.value = true
+            // 清空快捷表格已选数据
+            selected.value = []
+
+            // 关闭弹出层
+            popupRef.value.hide()
         }
 
         /**
@@ -331,46 +663,126 @@ export default {
          */
         function onPopupShow() {
 
-            // 表格重新加载
-            if (! tableLoaded) {
-                $table.tableReload()
-                tableLoaded = true
-            }
+            // 表格加载(只加载一次)
+            $table.tableLoad()
+
+            // 设置输入框焦点
+            setInputFocus()
         }
 
         /**
-         * 弹出层隐藏前回调
+         * 弹出层获取焦点触发
          */
-        function onPopupBeforeHide() {
+        function onPopupFocus(e) {
+
+            // 停止冒泡
+            e.stopPropagation()
+
+            // 设置输入框焦点
+            setInputFocus()
 
-            // 字段组件失去焦点
-            fieldFocused.value = false
+            window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, 0)
         }
 
         /**
-         * 弹出层隐藏后回调
+         * 对话框显示前回调
          */
-        function onPopupHide() {
+        function onDialogBeforeShow() {
 
+            // 设置当前已选数据
+            $table.tableSelected.value = [...selected.value]
+
+            popupRef.value.hide()
         }
 
         /**
-         * 清空
+         * 对话框显示回调
          */
-        function onClear() {
-            emit('update:modelValue', null)
-            popupRef.value.hide()
+        function onDialogShow() {
+            $table.tableLoad()
+        }
+
+        /**
+         * 对话框隐藏后回调
+         */
+        function onDialogHide() {
+
+            let isReload = true
+
+            // 清空输入框值
+            if (inputValue.value) {
+                // 此时清空输入框后, 会自动刷新表格
+                inputValue.value = ''
+
+                // 所以只需要重置搜索值即可, 不需要再重置后刷新表格
+                isReload = false
+            }
+
+            // 如果有表格搜索值
+            if ($table.hasTableSearchValue()) {
+                // 表格搜索重置
+                $table.tableSearchReset(isReload)
+            }
+        }
+
+        /**
+         * 对话框点击确认回调
+         */
+        function onDialogConfirm(data) {
+            selected.value = [...data]
+        }
+
+        /**
+         * 单击快捷表格行
+         */
+        function quickTableRowClick(e, row, index) {
+
+            // 如果为多选
+            if (props.multiple) {
+
+                const opt = {}
+                opt[props.rowKey] = row[props.rowKey]
+
+                // 获取当前数据索引
+                const itemIndex = _.findIndex(selected.value, opt)
+
+                // 如果不存在
+                if (itemIndex === -1) {
+                    // 则添加
+                    selected.value.push(row)
+
+                // 否则
+                } else {
+                    // 删除
+                    selected.value.splice(itemIndex, 1)
+                }
+
+            // 否则为单选
+            } else {
+                selected.value = [ row ]
+                popupRef.value.hide()
+            }
         }
 
         /**
-         * 显示对话框
+         * 设置输入框焦点
          */
-        function onDialog() {
-            showDialog.value = true
+        function setInputFocus() {
+            if (inputRef.value) {
+                inputRef.value.focus()
+            }
         }
 
         // ==========【生命周期】=========================================================================================
 
+        /**
+         * 实例被挂载后调用
+         */
+        onMounted(async function() {
+
+            // 初始加载选择数据
+            await onLoadSelected()
+        })
 
         // ==========【返回】=============================================================================================
 
@@ -378,61 +790,58 @@ export default {
             // 解构表格实例
             ...$table,
 
-            // 字段组件获取焦点
-            fieldFocused,
+            // 插槽标识
+            slotNames,
+            // 显示值
+            showValue,
+
+            // 输入框节点
+            inputRef,
+            // 输入框值
+            inputValue,
             // 弹出层节点
             popupRef,
             // 是否显示对话框
             showDialog,
+            // 当前已选数据
+            selected,
+            // 当前表格列数据
+            columns,
 
-            // 插槽 body 单元格标识
-            slotNames,
+            // 移除已选数据
+            onRemoveSelected,
+            // 字段清空触发
+            onFieldClear,
 
-            // 取消
-            onCancel,
-            // 弹出层显示前回调
-            onPopupBeforeShow,
             // 弹出层显示回调
             onPopupShow,
-            // 弹出层隐藏前回调
-            onPopupBeforeHide,
-            // 弹出层隐藏后回调
-            onPopupHide,
-            // 清空
-            onClear,
-
-            // 显示对话框
-            onDialog,
+            // 弹出层获取焦点触发
+            onPopupFocus,
+
+            // 对话框显示前回调
+            onDialogBeforeShow,
+            // 对话框显示回调
+            onDialogShow,
+            // 对话框隐藏后回调
+            onDialogHide,
+            // 对话框点击确认回调
+            onDialogConfirm,
+
+            // 单击快捷表格行
+            quickTableRowClick,
         }
     },
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "@/assets/sass/var.scss";
 
-.date {
-
-    // 选择容器
-    &__select {
-        background-color: #ffffff;
-    }
-
-    // 时间容器
-    &__time {
-        + .date__settings {
-            // 等同 q-pt-sm
-            padding-top: map-get($space-sm, 'y');
-        }
-    }
-}
-
-/**
- * 暗色
- */
-.body--dark {
-    .date__select {
-        background-color: $color-gray-86;
+.n-field-table {
+    .q-field__input--padding {
+        padding-left: 4px;
+        min-width: 50px !important;
+        cursor: text;
     }
 }
 </style>