Skip to content

Commit

Permalink
feat(frontend): 工具箱支持资源池协议变更_editable_table #8076
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 26753
  • Loading branch information
@hLinx
hLinx committed Dec 13, 2024
1 parent 8f44114 commit 5f8ed20
Show file tree
Hide file tree
Showing 11 changed files with 272 additions and 88 deletions.
2 changes: 1 addition & 1 deletion dbm-ui/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"@icon-cool/bk-icon-bk-biz-components": "0.0.4",
"@vueuse/core": "^11.0.3",
"axios": "^1.7.7",
"bkui-vue": "2.0.1-beta.78",
"bkui-vue": "2.0.1-beta.84",
"date-fns": "3.6.0",
"dayjs": "^1.11.13",
"echarts": "^5.5.1",
Expand Down
122 changes: 91 additions & 31 deletions dbm-ui/frontend/src/components/editable-table/Column.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,7 @@
}"
class="bk-editable-table-field-cell">
<slot />
<div
v-if="validateState.isError"
class="bk-editable-table-column-error">
<slot
name="error"
v-bind="{ message: validateState.errorMessage }">
<i
v-bk-tooltips="validateState.errorMessage"
class="bk-dbm db-icon-exclamation-fill" />
</slot>
</div>

<div
v-if="loading"
class="bk-editable-table-column-loading">
Expand All @@ -38,12 +28,22 @@
</div>
</div>
</div>
<div
v-if="validateState.isError"
class="bk-editable-table-column-error">
<slot
name="error"
v-bind="{ message: validateState.errorMessage }">
<i
v-bk-tooltips="validateState.errorMessage"
class="bk-dbm db-icon-exclamation-fill" />
</slot>
</div>
</td>
</template>
<script lang="ts">
import { Loading } from 'bkui-vue/lib/icon';
import get from 'lodash/get';
import isFunction from 'lodash/isFunction';
import _ from 'lodash';
import {
type ComponentInternalInstance,
computed,
Expand Down Expand Up @@ -92,6 +92,8 @@
interface Expose {
validate: () => Promise<boolean>;
clearValidate: () => void;
getRowIndex: () => number;
}
const hasOwn = (obj: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
Expand All @@ -111,6 +113,7 @@
registerRules: (params: IRule[]) => void;
validate: (trigger?: string) => Promise<boolean>;
clearValidate: () => void;
getRowIndex: () => number;
}> = Symbol('EditableTableColumnKey');
</script>
<script setup lang="ts">
Expand Down Expand Up @@ -156,7 +159,7 @@
});
},
message: `${label}查询中`,
trigger: 'change',
trigger: '',
});
}
if (props.required) {
Expand Down Expand Up @@ -209,10 +212,10 @@
const formatConfigRules = configRules.reduce<IFinalRule[]>((result, rule) => {
let rulevalidator: any;
if (rule.required) {
rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.required;
rulevalidator = _.isFunction(rule.validator) ? rule.validator : defaultValidator.required;
customRequired = true;
} else if (rule.email) {
rulevalidator = isFunction(rule.validator) ? rule.validator : defaultValidator.email;
rulevalidator = _.isFunction(rule.validator) ? rule.validator : defaultValidator.email;
customEmail = true;
} else if (Number(rule.max) > -1) {
rulevalidator = (value: any) => defaultValidator.max(value, rule.max as number);
Expand All @@ -222,7 +225,7 @@
rulevalidator = (value: any) => defaultValidator.min(value, rule.max as number);
} else if (Object.prototype.toString.call(rule.pattern) === '[object RegExp]') {
rulevalidator = (value: any) => defaultValidator.pattern(value, rule.pattern as RegExp);
} else if (isFunction(rule.validator)) {
} else if (_.isFunction(rule.validator)) {
rulevalidator = rule.validator;
} else {
// 不支持的配置规则
Expand Down Expand Up @@ -295,11 +298,17 @@
return result ? '无法操作' : '';
});
const validate = (trigger?: string): Promise<boolean> => {
// 重新触发验证重置上次的验证状态
const getRowIndex = () => tableContext!.getColumnRelateRowIndexByInstance(currentInstance);
const clearValidate = () => {
validateState.isError = false;
validateState.errorMessage = '';
};
const triggerChangeQueue: string[] = [];
const triggerBlurQueue: string[] = [];
const triggerQueue: undefined[] = [];
const validate = (trigger?: string): Promise<boolean> => {
if (!tableContext) {
return Promise.resolve(false);
}
Expand Down Expand Up @@ -333,11 +342,13 @@
// 合并规则属性配置
const finalRuleList = getTriggerRules(mergeRules(rules, getRulesFromProps(props)), trigger);
if (finalRuleList.length < 1) {
return Promise.resolve(true);
}
// if (finalRuleList.length < 1) {
// // 重新触发验证重置上次的验证状态
// validateState.isError = false;
// validateState.errorMessage = '';
// }
const value = get(tableContext.props.model[rowContext!.getRowIndex()], props.field);
const value = _.get(tableContext.props.model[rowContext!.getRowIndex()], props.field);
const doValidate = (() => {
let stepIndex = -1;
Expand Down Expand Up @@ -379,7 +390,39 @@
});
};
})();
return doValidate();
if (trigger !== undefined) {
if (trigger === 'change') {
triggerChangeQueue.push(trigger);
} else if (trigger === 'blur') {
triggerBlurQueue.push(trigger);
}
} else {
triggerQueue.push(trigger);
}
return new Promise((resolve, reject) => {
const delay = Math.max(Number(tableContext.props.validateDelay || 200), 0);
setTimeout(() => {
if (trigger === undefined) {
if (triggerQueue.length > 1) {
triggerQueue.pop();
return reject(false);
}
}
// 处理 change 和 blur 触发器
if (trigger === 'change' || trigger === 'blur') {
const latestQueue = trigger === 'change' ? triggerChangeQueue : triggerBlurQueue;
if (triggerQueue.length > 0 || latestQueue.length > 1) {
latestQueue.pop();
return resolve(true);
}
latestQueue.pop();
}
triggerQueue.pop();
return resolve(doValidate());
}, delay);
});
};
provide(EditableTableColumnKey, {
Expand All @@ -393,10 +436,8 @@
registerRules = rules;
},
validate,
clearValidate: () => {
validateState.isError = false;
validateState.errorMessage = '';
},
clearValidate,
getRowIndex,
});
onMounted(() => {
Expand Down Expand Up @@ -439,13 +480,20 @@
defineExpose<Expose>({
validate,
clearValidate,
getRowIndex,
});
</script>
<style lang="less">
@focus-z-index: 102;
@fixed-focus-z-index: 122;
@error-z-index: 101;
@fixed-error-z-index: 121;
.bk-editable-table {
td.bk-editable-table-body-column {
&.is-focused {
z-index: 99;
z-index: @focus-z-index;
&::before {
border-color: #3a84ff;
Expand All @@ -465,14 +513,15 @@
}
&.is-error {
z-index: 99;
z-index: @error-z-index;
background: #fff1f1;
&::before {
border-color: #ea3636;
}
.bk-editable-table-field-cell {
padding-right: 20px;
background: #fff1f1;
}
}
Expand All @@ -482,6 +531,17 @@
left: -1px;
}
}
&.is-column-fixed-left,
&.is-column-fixed-right {
&.is-focused {
z-index: @fixed-focus-z-index;
}
&.is-error {
z-index: @fixed-error-z-index;
}
}
}
}
Expand All @@ -500,7 +560,7 @@
z-index: 9;
display: flex;
height: 40px;
padding: 0 8px;
padding-right: 8px;
color: #ea3636;
align-items: center;
transform: translateY(-50%);
Expand Down
21 changes: 12 additions & 9 deletions dbm-ui/frontend/src/components/editable-table/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
interface Props {
model: Record<string, any>[];
rules?: Record<string, IRule[]>;
validateDelay?: number;
}
interface Emits {
Expand Down Expand Up @@ -123,10 +124,6 @@
const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
watch(columnList, () => {
initalScroll();
});
watch(
columnSizeConfig,
() => {
Expand All @@ -141,6 +138,7 @@
setTimeout(() => {
isShowScrollX.value = scrollXRef.value!.offsetWidth + 2 < scrollXRef.value!.scrollWidth;
});
initalScroll();
});
},
{
Expand Down Expand Up @@ -242,6 +240,10 @@
});
</script>
<style lang="less">
@fixed-column-z-index: 111;
@scroll-z-index: 200;
@fixed-wrapper-z-index: 300;
.bk-editable-table {
position: relative;
background: #fff;
Expand Down Expand Up @@ -307,14 +309,11 @@
&.is-column-fixed-left {
position: sticky;
left: 0;
z-index: 9;
background: #fff;
}
&.is-column-fixed-right {
position: sticky;
right: 0;
background: #fff;
}
}
Expand All @@ -325,6 +324,7 @@
&.is-column-fixed-left,
&.is-column-fixed-right {
z-index: 9;
background-color: #fafbfd;
}
Expand All @@ -338,6 +338,7 @@
&.is-column-fixed-left,
&.is-column-fixed-right {
z-index: @fixed-column-z-index;
background: #fff;
}
}
Expand All @@ -361,6 +362,7 @@
top: 0;
bottom: 0;
left: 0;
z-index: @fixed-wrapper-z-index;
overflow-x: hidden;
pointer-events: none;
box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
Expand All @@ -371,8 +373,9 @@
top: 0;
right: 0;
bottom: 0;
z-index: @fixed-wrapper-z-index;
pointer-events: none;
box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
box-shadow: -8px 0 10px -5px rgb(0 0 0 / 12%);
}
.bk-editable-column-resize {
Expand All @@ -389,7 +392,7 @@
right: 1px;
bottom: 0;
left: 1px;
z-index: 99999999;
z-index: @scroll-z-index;
height: 14px;
overflow: scroll hidden;
cursor: pointer;
Expand Down
4 changes: 2 additions & 2 deletions dbm-ui/frontend/src/components/editable-table/Row.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</template>
<script lang="ts">
import _ from 'lodash';
import { inject, type InjectionKey, onBeforeMount, onMounted, provide } from 'vue';
import { inject, type InjectionKey, onBeforeUnmount, onMounted, provide } from 'vue';
import type { IContext as IColumnContext } from './Column.vue';
import { tableInjectKey } from './Index.vue';
Expand Down Expand Up @@ -61,7 +61,7 @@
tableContext?.registerRow(columnList);
});
onBeforeMount(() => {
onBeforeUnmount(() => {
tableContext?.unregisterRow(columnList);
});
</script>
Loading

0 comments on commit 5f8ed20

Please sign in to comment.