TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-03 16:00:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
meilin.huang
2023-12-21 13:07:02 +08:00
parent 550631c03b
commit 85d745fcee
3 changed files with 161 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
mayfly_go_web/src/views/ops/db/component/table/ColumnFormItem.vue Normal file
View File

@@ -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>

112
mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue
View File

@@ -94,57 +94,11 @@
<!-- 数据列 -->
<div v-else @dblclick="onEnterEditMode(rowData, column, rowIndex, columnIndex)">
<div v-if="canEdit(rowIndex, columnIndex)">
<el-input
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"
<ColumnFormItem
v-model="rowData[column.dataKey!]"
/>
<el-date-picker
v-if="nowUpdateCell.dataType == DataType.Date"
:ref="(el: any) => el?.focus()"
@change="onExitEditMode(rowData, column, rowIndex)"
:data-type="nowUpdateCell.dataType"
@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"
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="选择时间"
focus
/>
</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>

39
mayfly_go_web/src/views/ops/db/component/table/DbTableDataOp.vue
View File

@@ -135,43 +135,11 @@
:label="column.columnName"
:required="column.nullable != 'YES' && column.columnKey != 'PRI'"
>
<el-input-number
v-if="DbInst.isNumber(column.columnType)"
<ColumnFormItem
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: {