Skip to content

Commit

Permalink
feat(frontend): 表格列支持快捷清空 TencentBlueKing#6565
Browse files Browse the repository at this point in the history
  • Loading branch information
jinquantianxia committed Aug 30, 2024
1 parent 708cac9 commit c3b277d
Show file tree
Hide file tree
Showing 70 changed files with 405 additions and 2,236 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}">
<BkDatePicker
append-to-body
:clearable="false"
clearable
:model-value="localValue"
:placeholder="placeholder"
style="width: 100%"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<TagInput
ref="tagInputRef"
v-model="modelValue"
clearable
:disabled="disabled"
:placeholder="placeholder"
:rules="rules"
Expand Down
105 changes: 84 additions & 21 deletions dbm-ui/frontend/src/components/render-table/columns/input/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
'is-error': Boolean(errorMessage),
'is-disabled': disabled,
'is-password': isPassword,
'is-clearable': clearable,
}">
<BkInput
class="input-box"
Expand All @@ -35,8 +36,12 @@
@input="handleInput"
@keydown="handleKeydown"
@paste="handlePaste">
<template #suffix />
</BkInput>
<DbIcon
v-if="clearable && modelValue"
class="clear-icon"
type="close-circle-shape"
@click="handleClear" />
<DbIcon
v-if="errorMessage"
v-bk-tooltips="errorMessage"
Expand All @@ -62,12 +67,18 @@
min?: number;
max?: number;
isShowBlur?: boolean;
clearable?: boolean;
ignoreSameInput?: boolean;
pasteFn?: (value: string) => string;
}

interface Emits {
(e: 'blur', value: string): void;
(e: 'input', value: string): void;
(e: 'submit', value: string): void;
(e: 'error', result: boolean): void;
(e: 'focus'): void;
(e: 'clear'): void;
}

interface Exposes {
Expand All @@ -84,6 +95,9 @@
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
isShowBlur: false,
clearable: true,
ignoreSameInput: false,
pasteFn: undefined,
});

const emits = defineEmits<Emits>();
Expand Down Expand Up @@ -118,35 +132,48 @@
isBlur.value = false;
window.changeConfirm = true;
modelValue.value = value;
emits('input', value);
};

const handleFocus = () => {
isBlur.value = false;
emits('focus');
};

const handleClear = () => {
modelValue.value = '';
validator('')
.catch(() => emits('error', true))
.finally(() => {
emits('clear');
});
};

// 失去焦点
const handleBlur = (event: FocusEvent) => {
isBlur.value = true;
if (props.disabled) {
event.preventDefault();
return;
}
if (modelValue.value) {
if (oldInputText === modelValue.value) {
setTimeout(() => {
emits('blur', modelValue.value);
isBlur.value = true;
if (props.disabled) {
event.preventDefault();
return;
}
oldInputText = modelValue.value;
validator(modelValue.value)
.then(() => {
window.changeConfirm = true;
emits('error', false);
emits('submit', modelValue.value);
})
.catch(() => emits('error', true));
return;
}
emits('submit', modelValue.value);
if (modelValue.value) {
if (oldInputText === modelValue.value && props.ignoreSameInput) {
return;
}
oldInputText = modelValue.value;
validator(modelValue.value)
.then(() => {
window.changeConfirm = true;
emits('error', false);
emits('submit', modelValue.value);
})
.catch(() => emits('error', true));
return;
}
emits('submit', modelValue.value);
}, 100);
};

// enter键提交
Expand All @@ -160,7 +187,7 @@
return;
}
if (event.which === 13 || event.key === 'Enter') {
if (oldInputText === modelValue.value) {
if (oldInputText === modelValue.value && props.ignoreSameInput) {
return;
}
oldInputText = modelValue.value;
Expand All @@ -182,7 +209,8 @@
event.preventDefault();
let paste = (event.clipboardData || window.clipboardData).getData('text');
paste = encodeMult(paste);
modelValue.value = paste.replace(/^\s+|\s+$/g, '');
paste = paste.replace(/^\s+|\s+$/g, '');
modelValue.value = props.pasteFn ? props.pasteFn(paste) : paste;
window.changeConfirm = true;
};

Expand All @@ -203,6 +231,12 @@
</script>
<style lang="less" scoped>
.is-error {
&.is-clearable {
:deep(input) {
padding-right: 45px;
}
}

:deep(input) {
padding: 0 16px;
background-color: #fff0f1;
Expand All @@ -227,6 +261,10 @@
:deep(.bk-input--suffix-icon) {
display: none !important;
}

.clear-icon {
right: 28px !important;
}
}

.is-disabled {
Expand Down Expand Up @@ -256,12 +294,24 @@
}
}

.is-clearable {
:deep(input) {
padding-right: 25px;
}
}

.table-edit-input {
position: relative;
min-height: 42px;
cursor: pointer;
background: #fff;

&:hover {
.clear-icon {
display: block;
}
}

.input-box {
width: 100%;
height: 42px;
Expand Down Expand Up @@ -293,6 +343,19 @@
}
}

.clear-icon {
position: absolute;
top: 14px;
right: 10px;
font-size: 14px;
color: #c4c6cc;
display: none;

&:hover {
color: #979ba5;
}
}

.error-icon {
position: absolute;
top: 14px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
auto-focus
v-bind="attrs"
class="select-box"
:clearable="false"
clearable
:disabled="disabled"
:input-search="false"
@change="handleSelect"
Expand Down Expand Up @@ -200,6 +200,10 @@
:deep(.angle-up) {
display: none !important;
}

:deep(.angle-down) {
display: none !important;
}
}

.is-disable {
Expand Down Expand Up @@ -233,12 +237,12 @@

.bk-input {
height: 100%;
padding-left: 8px;
border: none;
outline: none;

input {
background: transparent;
margin-left: 8px;
}
}
}
Expand All @@ -247,11 +251,10 @@
.select-error {
position: absolute;
top: 0;
right: 0;
right: 4px;
bottom: 0;
z-index: 99;
display: flex;
padding-right: 6px;
font-size: 14px;
color: #ea3636;
align-items: center;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
v-model="localValue"
allow-auto-match
allow-create
:clearable="false"
clearable
v-bind="$attrs"
:disabled="disabled"
has-delete-icon
Expand Down Expand Up @@ -180,6 +180,10 @@
.bk-tag-input-trigger {
background: #fff0f1;

.clear-icon {
margin-right: 28px;
}

.placeholder {
height: 42px;
line-height: 42px;
Expand All @@ -197,6 +201,10 @@
&:hover {
background-color: #fafbfd;
border-color: #a3c5fd !important;

.clear-icon {
display: block !important;
}
}

&.active {
Expand All @@ -212,6 +220,10 @@
max-height: 400px;
}

.clear-icon {
display: none !important;
}

.placeholder {
top: 0;
height: 42px;
Expand Down
2 changes: 1 addition & 1 deletion dbm-ui/frontend/src/services/source/spider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function getSpiderList(params: {
exact_domain?: string;
creator?: string;
version?: string;
cluster_ids?: number[];
cluster_ids?: string | number;
db_module_id?: number;
region?: string;
}) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -374,12 +374,12 @@
.input-error {
position: absolute;
top: 50%;
right: 10px;
left: 50%;
transform: translateY(-50%);
padding-bottom: 4px;
z-index: 10;
padding-bottom: 3px;
font-size: 14px;
color: #ea3636;
transform: translate(-50%, -50%);
}

.count-tag {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,12 @@
<div
ref="popRef"
style="font-size: 12px; line-height: 24px; color: #63656e">
<p>{{ t('匹配任意长度字符串_如a_不允许独立使用') }}</p>
<p>{{ t('匹配任意单一字符_如a_d') }}</p>
<p>{{ t('专门指代ALL语义_只能独立使用') }}</p>
<p>{{ t('注_含通配符的单元格仅支持输入单个对象') }}</p>
<p>{{ t('Enter完成内容输入') }}</p>
<p>{{ t('%:匹配任意长度字符串,如 a%, 不允许独立使用') }}</p>
<p>{{ t('?: 匹配任意单一字符,如 a%?%d') }}</p>
<p>{{ t('* :专门指代 ALL 语义, 只能独立使用') }}</p>
<p>{{ t('注:含通配符的单元格仅支持输入单个对象') }}</p>
<p>{{ t('按Enter或失焦可完成内容输入') }}</p>
<p>{{ t('粘贴多个对象可用换行,空格或;,|分隔') }}</p>
</div>
</div>
</template>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

import { useTimeZoneFormat } from '@hooks';

import TableEditDateTime from '@views/mysql/common/edit/DateTime.vue';
import TableEditDateTime from '@components/render-table/columns/DateTime.vue';

interface Exposes {
getValue: () => Promise<{ rollback_time: string }>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@

defineExpose<Exposes>({
async getValue() {
await clusterRef.value!.getValue(true);
await clusterRef.value!.getValue();
return Promise.all([
slaveRef.value!.getValue(),
dbPatternsRef.value!.getValue('db_patterns'),
Expand Down
Loading

0 comments on commit c3b277d

Please sign in to comment.