feat(frontend): sqlserver添加统一设置和单据备注 #9684

Author: 3octaves

dbm-ui/frontend/src/components/editable-table/Column.vue

@@ -111,6 +111,8 @@
     width?: number;
   }
 
+  export type Emits = (e: 'validate', result: boolean, message: string) => boolean;
+
   interface Slots {
     default: () => VNode;
     error?: (params: { message: string }) => VNode;
@@ -162,6 +164,7 @@
     rules: undefined,
     width: undefined,
   });
+  const emits = defineEmits<Emits>();
   const slots = defineSlots<Slots>();
 
   const tableContext = inject(tableInjectKey);
@@ -173,7 +176,7 @@
   interface IFinalRule {
     message: string | (() => string);
     trigger: string;
-    validator: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
+    validator: (value: any, rowDataValue?: Record<string, any>) => Promise<boolean | string> | boolean | string;
   }
 
   let loadingValidatorTimer: ReturnType<typeof setTimeout>;
@@ -423,10 +426,19 @@
 
     const doValidate = (() => {
       let stepIndex = -1;
-      return (finalRuleList: IFinalRule[], value: any, rowDataValue: Record<string, any>): Promise<boolean> => {
+      return (
+        finalRuleList: IFinalRule[],
+        value: any,
+        rowDataValue: {
+          columnIndex: number;
+          rowData: Record<string, any>;
+          rowIndex: number;
+        },
+      ): Promise<boolean> => {
         stepIndex = stepIndex + 1;
         // 验证通过
         if (stepIndex >= finalRuleList.length) {
+          emits('validate', true, '');
           tableContext.emits('validate', props.field || '', true, '');
           return Promise.resolve(true);
         }
@@ -454,6 +466,7 @@
               (errorMessage: string) => {
                 validateState.isError = true;
                 validateState.errorMessage = errorMessage;
+                emits('validate', false, errorMessage);
                 tableContext.emits('validate', props.field || '', false, errorMessage);
                 return Promise.reject(validateState.errorMessage);
               },
@@ -504,8 +517,14 @@
           validateState.errorMessage = '';
         }
 
-        const rowDataValue = tableContext.props.model[rowContext!.getRowIndex()];
-        const value = _.get(rowDataValue, props.field || '_');
+        const rowIndex = rowContext!.getRowIndex();
+        const columnIndex = tableContext!.getColumnRelateRowIndexByInstance(currentInstance);
+        const rowDataValue = {
+          columnIndex,
+          rowData: tableContext.props.model[rowIndex],
+          rowIndex,
+        };
+        const value = _.get(rowDataValue.rowData, props.field || '_');
 
         doValidate(finalRuleList, value, rowDataValue).then(
           () => {

dbm-ui/frontend/src/components/editable-table/Index.vue

@@ -14,6 +14,11 @@
           <slot />
         </tbody>
       </table>
+      <div
+        v-if="slots.empty"
+        class="bk-editable-table-empty">
+        <slot name="empty" />
+      </div>
     </div>
     <div class="bk-editable-table-fixed-wrapper">
       <div
@@ -87,6 +92,7 @@
 
   export interface Slots {
     default: () => VNode;
+    empty?(): VNode;
   }
 
   export interface Expose {
@@ -114,15 +120,15 @@
   export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
+  defineOptions({
+    name: 'EditableTable',
+  });
+
   const props = defineProps<Props>();
 
   const emits = defineEmits<Emits>();
 
-  defineSlots<Slots>();
-
-  defineOptions({
-    name: 'EditableTable',
-  });
+  const slots = defineSlots<Slots>();
 
   const tableRef = ref<HTMLElement>();
   const scrollXRef = ref<HTMLElement>();
@@ -280,6 +286,12 @@
         width: 0;
         height: 0;
       }
+
+      .bk-editable-table-empty {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
 
     table {

dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue

@@ -9,9 +9,11 @@
     clearable
     has-delete-icon
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
 <script setup lang="ts" generic="T extends string[] | number[] | string | number">
+  import _ from 'lodash';
   import { watch } from 'vue';
 
   import useColumn from '../useColumn';
@@ -30,14 +32,17 @@
   const props = defineProps<Props>();
   const emits = defineEmits<Emits<T>>();
 
+  const modelValue = defineModel<T>();
+
   const attrs = useAttrs();
 
   const columnContext = useColumn();
 
-  const modelValue = defineModel<T>();
-
-  watch(modelValue, () => {
-    columnContext?.validate('change');
+  watch(modelValue, (newValue, oldValue) => {
+    // 对于引用类型，实际值变化才校验
+    if (!_.isEqual(newValue, oldValue)) {
+      columnContext?.validate('change');
+    }
   });
 
   const handleBlur = () => {
@@ -50,6 +55,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = () => {
+    emits('change', modelValue.value as T);
+  };
 </script>
 <style lang="less">
   .bk-editable-tag-input {

dbm-ui/frontend/src/components/editable-table/types.ts

@@ -7,5 +7,12 @@ export interface IRule {
   pattern?: RegExp;
   required?: boolean;
   trigger: string;
-  validator?: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
+  validator?: (
+    value: any,
+    rowDataValue: {
+      columnIndex: number;
+      rowData: Record<string, any>;
+      rowIndex: number;
+    },
+  ) => Promise<boolean | string> | boolean | string;
 }

dbm-ui/frontend/src/locales/zh-cn.json

@@ -4069,6 +4069,7 @@
   "近1小时": "近1小时",
   "近1天": "近1天",
   "近1个月": "近1个月",
+  "数据库备份任务提交成功": "数据库备份任务提交成功",
   "跳转监控": "跳转监控",
   "批量设置告警组": "批量设置告警组",
   "已选n个策略": "已选 {n} 个策略",
@@ -4342,5 +4343,15 @@
   "每个 Shard 节点数不能为空": "每个 Shard 节点数不能为空",
   "集群 Shared 数不能为空": "集群 Shared 数不能为空",
   "机器组数不能为空": "机器组数不能为空",
+  "预览 DB 结果列表": "预览 DB 结果列表",
+  "新建一个单节点实例，通过全备 +binlog 的方式，将数据库恢复到过去的某一时间点或者某个指定备份文件的状态。": "新建一个单节点实例，通过全备 +binlog 的方式，将数据库恢复到过去的某一时间点或者某个指定备份文件的状态。",
+  "已更新": "已更新",
+  "目标集群n输入格式有误": "目标集群 {n} 输入格式有误",
+  "目标集群n不存在": "目标集群 {n} 不存在",
+  "起止时间：": "起止时间：",
+  "完整": "完整",
+  "DB 列表": "DB 列表",
+  "请先设置集群、构造 DB、回档信息": "请先设置集群、构造 DB、回档信息",
+  "请先设置集群、目标集群、构造 DB、回档信息": "请先设置集群、目标集群、构造 DB、回档信息",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/db-manage/common/batch-edit-column/Index.vue

@@ -52,6 +52,7 @@
               allow-create
               :disabled="disabled"
               has-delete-icon
+              :max-data="single ? 1 : -1"
               :model-value="localValue"
               :paste-fn="tagInputPasteFn"
               @change="handleChange" />
@@ -61,6 +62,7 @@
               :disabled="disabled"
               :disabled-date="disableFn"
               :model-value="localValue"
+              style="width: 100%"
               type="datetime"
               @change="handleChange">
             </BkDatePicker>
@@ -84,6 +86,7 @@
     }[];
     disableFn?: (date?: Date | number) => boolean;
     placeholder?: string;
+    single?: boolean;
     title: string;
     titlePrefixType?: 'edit' | 'entry';
     type?: 'select' | 'textarea' | 'input' | 'taginput' | 'datetime' | 'number-input';
@@ -95,6 +98,7 @@
     dataList: () => [],
     disableFn: () => false,
     placeholder: '',
+    single: false,
     titlePrefixType: 'edit',
     type: 'select',
   });