feat: 数据库表单元格编辑封装

mayfly_go_web/src/views/ops/db/component/table/ColumnFormItem.vue

@@ -0,0 +1,152 @@
+<template>
+    <el-input
+        v-if="dataType == DataType.String"
+        :ref="(el: any) => focus && el?.focus()"
+        @blur="emit('blur')"
+        class="w100 mb4"
+        input-style="text-align: center; height: 26px;"
+        size="small"
+        v-model="itemValue"
+        :placeholder="placeholder"
+    />
+
+    <el-input
+        v-if="dataType == DataType.Number"
+        :ref="(el: any) => focus && el?.focus()"
+        @blur="emit('blur')"
+        class="w100 mb4"
+        input-style="text-align: center; height: 26px;"
+        size="small"
+        v-model.number="itemValue"
+        :placeholder="placeholder"
+        type="number"
+    />
+
+    <el-date-picker
+        v-if="dataType == DataType.Date"
+        :ref="(el: any) => focus && el?.focus()"
+        @change="emit('blur')"
+        @blur="emit('blur')"
+        class="edit-time-picker mb4"
+        popper-class="edit-time-picker-popper"
+        size="small"
+        v-model="itemValue"
+        :clearable="false"
+        type="Date"
+        value-format="YYYY-MM-DD"
+        placeholder="选择日期"
+    />
+
+    <el-date-picker
+        v-if="dataType == DataType.DateTime"
+        :ref="(el: any) => focus && el?.focus()"
+        @change="emit('blur')"
+        @blur="emit('blur')"
+        class="edit-time-picker mb4"
+        popper-class="edit-time-picker-popper"
+        size="small"
+        v-model="itemValue"
+        :clearable="false"
+        type="datetime"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        placeholder="选择日期时间"
+    />
+
+    <el-time-picker
+        v-if="dataType == DataType.Time"
+        :ref="(el: any) => focus && el?.focus()"
+        @change="emit('blur')"
+        @blur="emit('blur')"
+        class="edit-time-picker mb4"
+        popper-class="edit-time-picker-popper"
+        size="small"
+        v-model="itemValue"
+        :clearable="false"
+        value-format="HH:mm:ss"
+        placeholder="选择时间"
+    />
+</template>
+
+<script lang="ts" setup>
+import { Ref } from 'vue';
+import { ElInput } from 'element-plus';
+import { DataType } from '../../dialect/index';
+import { useVModel } from '@vueuse/core';
+
+export interface ColumnFormItemProps {
+    modelValue: string | number; // 绑定的值
+    dataType: DataType; // 数据类型
+    focus?: boolean; // 是否获取焦点
+    placeholder?: string;
+}
+
+const props = withDefaults(defineProps<ColumnFormItemProps>(), {
+    focus: false,
+    dataType: DataType.String,
+});
+
+const emit = defineEmits(['update:modelValue', 'blur']);
+
+const itemValue: Ref<any> = useVModel(props, 'modelValue', emit);
+</script>
+
+<style lang="scss">
+.edit-time-picker {
+    height: 26px;
+    width: 100% !important;
+    .el-input__prefix {
+        display: none;
+    }
+    .el-input__inner {
+        text-align: center;
+    }
+}
+
+.edit-time-picker-popper {
+    .el-date-picker {
+        width: 250px !important;
+        .el-date-picker__header {
+            margin: 0 5px;
+        }
+        .el-picker-panel__content {
+            width: unset;
+            margin: 0 5px;
+        }
+        .el-date-picker__header-label {
+            font-size: 13px;
+        }
+        .el-picker-panel__footer {
+            padding: 0 5px;
+            button {
+                font-size: 11px;
+                padding: 5px 6px;
+                height: 20px;
+            }
+        }
+    }
+    .el-date-table {
+        th {
+            font-size: 10px;
+            font-weight: 600;
+            padding: 0;
+        }
+        td {
+            padding: 0;
+        }
+    }
+    .el-time-panel {
+        width: 100px;
+
+        .el-time-spinner__list {
+            &::after,
+            &::before {
+                height: 10px;
+            }
+            .el-time-spinner__item {
+                height: 20px;
+                line-height: 20px;
+            }
+        }
+    }
+}
+</style>

mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue

@@ -94,57 +94,11 @@
                             <!-- 数据列 -->
                             <div v-else @dblclick="onEnterEditMode(rowData, column, rowIndex, columnIndex)">
                                 <div v-if="canEdit(rowIndex, columnIndex)">
-                                    <el-input
+                                    <ColumnFormItem
-                                        v-if="nowUpdateCell.dataType == DataType.Number || nowUpdateCell.dataType == DataType.String"
-                                        :ref="(el: any) => el?.focus()"
-                                        @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="w100 mb4"
-                                        input-style="text-align: center; height: 26px;"
-                                        size="small"
                                         v-model="rowData[column.dataKey!]"
-                                    />
+                                        :data-type="nowUpdateCell.dataType"
-                                    <el-date-picker
-                                        v-if="nowUpdateCell.dataType == DataType.Date"
-                                        :ref="(el: any) => el?.focus()"
-                                        @change="onExitEditMode(rowData, column, rowIndex)"
                                         @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="edit-time-picker mb4"
+                                        focus
-                                        popper-class="edit-time-picker-popper"
-                                        size="small"
-                                        v-model="rowData[column.dataKey!]"
-                                        :clearable="false"
-                                        type="Date"
-                                        value-format="YYYY-MM-DD"
-                                        placeholder="选择日期"
-                                    />
-                                    <el-date-picker
-                                        v-if="nowUpdateCell.dataType == DataType.DateTime"
-                                        :ref="(el: any) => el?.focus()"
-                                        @change="onExitEditMode(rowData, column, rowIndex)"
-                                        @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="edit-time-picker mb4"
-                                        popper-class="edit-time-picker-popper"
-                                        size="small"
-                                        :key="rowIndex"
-                                        v-model="rowData[column.dataKey!]"
-                                        :clearable="false"
-                                        type="datetime"
-                                        value-format="YYYY-MM-DD HH:mm:ss"
-                                        placeholder="选择日期时间"
-                                        :teleported="false"
-                                    />
-                                    <el-time-picker
-                                        v-if="nowUpdateCell.dataType == DataType.Time"
-                                        :ref="(el: any) => el?.focus()"
-                                        @change="onExitEditMode(rowData, column, rowIndex)"
-                                        @blur="onExitEditMode(rowData, column, rowIndex)"
-                                        class="edit-time-picker mb4"
-                                        popper-class="edit-time-picker-popper"
-                                        size="small"
-                                        v-model="rowData[column.dataKey!]"
-                                        :clearable="false"
-                                        value-format="HH:mm:ss"
-                                        placeholder="选择时间"
                                     />
                                 </div>
 
@@ -206,6 +160,7 @@ import { exportCsv, exportFile } from '@/common/utils/export';
 import { dateStrFormat } from '@/common/utils/date';
 import { useIntervalFn } from '@vueuse/core';
 import { ColumnTypeSubscript, DataType, DbDialect, DbType, getDbDialect } from '../../dialect/index';
+import ColumnFormItem from './ColumnFormItem.vue';
 
 const emits = defineEmits(['dataDelete', 'sortChange', 'deleteData', 'selectionChange', 'changeUpdatedField']);
 
@@ -706,6 +661,7 @@ const onEnterEditMode = (rowData: any, column: any, rowIndex = 0, columnIndex =
 };
 
 const onExitEditMode = (rowData: any, column: any, rowIndex = 0) => {
+    console.trace('exit');
     const oldValue = nowUpdateCell.oldValue;
     const newValue = rowData[column.dataKey];
 
@@ -915,62 +871,4 @@ defineExpose({
         right: 0px;
     }
 }
-
-.edit-time-picker {
-    height: 26px;
-    width: 100% !important;
-    .el-input__prefix {
-        display: none;
-    }
-    .el-input__inner {
-        text-align: center;
-    }
-}
-.edit-time-picker-popper {
-    .el-date-picker {
-        width: 250px !important;
-        .el-date-picker__header {
-            margin: 0 5px;
-        }
-        .el-picker-panel__content {
-            width: unset;
-            margin: 0 5px;
-        }
-        .el-date-picker__header-label {
-            font-size: 13px;
-        }
-        .el-picker-panel__footer {
-            padding: 0 5px;
-            button {
-                font-size: 11px;
-                padding: 5px 6px;
-                height: 20px;
-            }
-        }
-    }
-    .el-date-table {
-        th {
-            font-size: 10px;
-            font-weight: 600;
-            padding: 0;
-        }
-        td {
-            padding: 0;
-        }
-    }
-    .el-time-panel {
-        width: 100px;
-
-        .el-time-spinner__list {
-            &::after,
-            &::before {
-                height: 10px;
-            }
-            .el-time-spinner__item {
-                height: 20px;
-                line-height: 20px;
-            }
-        }
-    }
-}
 </style>

mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue

@@ -135,43 +135,11 @@
                     :label="column.columnName"
                     :required="column.nullable != 'YES' && column.columnKey != 'PRI'"
                 >
-                    <el-input-number
+                    <ColumnFormItem
-                        v-if="DbInst.isNumber(column.columnType)"
                         v-model="addDataDialog.data[`${column.columnName}`]"
+                        :data-type="dbDialect.getDataType(column.columnType)"
                         :placeholder="`${column.columnType}  ${column.columnComment}`"
-                        class="w100"
                     />
-
-                    <el-date-picker
-                        v-else-if="dbDialect.getDataType(column.columnType) === DataType.DateTime"
-                        v-model="addDataDialog.data[`${column.columnName}`]"
-                        :placeholder="`${column.columnType}  ${column.columnComment}`"
-                        type="datetime"
-                        class="w100"
-                        :default-value="new Date()"
-                        :default-time="new Date()"
-                        value-format="YYYY-MM-DD HH:mm:ss"
-                    />
-                    <el-date-picker
-                        v-else-if="dbDialect.getDataType(column.columnType) === DataType.Date"
-                        v-model="addDataDialog.data[`${column.columnName}`]"
-                        :placeholder="`${column.columnType}  ${column.columnComment}`"
-                        type="Date"
-                        class="w100"
-                        :default-value="new Date()"
-                        value-format="YYYY-MM-DD"
-                    />
-                    <el-time-picker
-                        v-else-if="dbDialect.getDataType(column.columnType) === DataType.Time"
-                        v-model="addDataDialog.data[`${column.columnName}`]"
-                        :placeholder="`${column.columnType}  ${column.columnComment}`"
-                        type="Date"
-                        class="w100"
-                        :default-value="new Date()"
-                        value-format="HH:mm:ss"
-                    />
-
-                    <el-input v-else v-model="addDataDialog.data[`${column.columnName}`]" :placeholder="`${column.columnType}  ${column.columnComment}`" />
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -190,8 +158,9 @@ import { ElMessage } from 'element-plus';
 
 import { DbInst } from '@/views/ops/db/db';
 import DbTableData from './DbTableData.vue';
-import { DataType, DbDialect, getDbDialect } from '@/views/ops/db/dialect';
+import { DbDialect, getDbDialect } from '@/views/ops/db/dialect';
 import SvgIcon from '@/components/svgIcon/index.vue';
+import ColumnFormItem from './ColumnFormItem.vue';
 
 const props = defineProps({
     dbId: {