Merge pull request #1033 from shuzhenyang/fix_online_table

feat: 在线调试表格选择功能

src/dashboard-front/.commitlintrc.js

@@ -0,0 +1,65 @@
+/** @type {import('cz-git').UserConfig} */
+module.exports = {
+  rules: {
+    // @see: https://commitlint.js.org/#/reference-rules
+  },
+  prompt: {
+    alias: { fd: 'docs: fix typos' },
+    messages: {
+      type: 'Select the type of change that you\'re committing:',
+      scope: 'Denote the SCOPE of this change (optional):',
+      customScope: 'Denote the SCOPE of this change:',
+      subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
+      body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
+      breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
+      footerPrefixesSelect: 'Select the ISSUES type of changeList by this change (optional):',
+      customFooterPrefix: 'Input ISSUES prefix:',
+      footer: 'List any ISSUES by this change. E.g.: #31, #34:\n',
+      generatingByAI: 'Generating your AI commit subject...',
+      generatedSelectByAI: 'Select suitable subject by AI generated:',
+      confirmCommit: 'Are you sure you want to proceed with the commit above?'
+    },
+    types: [
+      { value: 'feat', name: 'feat:     A new feature', emoji: ':sparkles:' },
+      { value: 'fix', name: 'fix:      A bug fix', emoji: ':bug:' },
+      { value: 'docs', name: 'docs:     Documentation only changes', emoji: ':memo:' },
+      { value: 'style', name: 'style:    Changes that do not affect the meaning of the code', emoji: ':lipstick:' },
+      { value: 'refactor', name: 'refactor: A code change that neither fixes a bug nor adds a feature', emoji: ':recycle:' },
+      { value: 'perf', name: 'perf:     A code change that improves performance', emoji: ':zap:' },
+      { value: 'test', name: 'test:     Adding missing tests or correcting existing tests', emoji: ':white_check_mark:' },
+      { value: 'build', name: 'build:    Changes that affect the build system or external dependencies', emoji: ':package:' },
+      { value: 'ci', name: 'ci:       Changes to our CI configuration files and scripts', emoji: ':ferris_wheel:' },
+      { value: 'chore', name: 'chore:    Other changes that don\'t modify src or test files', emoji: ':hammer:' },
+      { value: 'revert', name: 'revert:   Reverts a previous commit', emoji: ':rewind:' }
+    ],
+    useEmoji: false,
+    emojiAlign: 'center',
+    useAI: false,
+    aiNumber: 1,
+    themeColorCode: '',
+    scopes: [],
+    allowCustomScopes: true,
+    allowEmptyScopes: true,
+    customScopesAlign: 'bottom',
+    customScopesAlias: 'custom',
+    emptyScopesAlias: 'empty',
+    upperCaseSubject: false,
+    markBreakingChangeMode: false,
+    allowBreakingChanges: ['feat', 'fix'],
+    breaklineNumber: 100,
+    breaklineChar: '|',
+    skipQuestions: [],
+    issuePrefixes: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],
+    customIssuePrefixAlign: 'top',
+    emptyIssuePrefixAlias: 'skip',
+    customIssuePrefixAlias: 'custom',
+    allowCustomIssuePrefix: true,
+    allowEmptyIssuePrefix: true,
+    confirmColorize: true,
+    scopeOverrides: undefined,
+    defaultBody: '',
+    defaultIssues: '',
+    defaultScope: '',
+    defaultSubject: ''
+  }
+}

src/dashboard-front/package.json

@@ -76,6 +76,7 @@
     "@types/node": "^20.6.3",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.20.0",
+    "cz-git": "^1.10.1",
     "enhanced-resolve": "^5.17.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.27.0",
@@ -98,5 +99,10 @@
   "engines": {
     "node": ">= 14.16.1",
     "npm": ">= 6.4.1 <7"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git"
+    }
   }
 }

src/dashboard-front/src/views/online-debug/components/edit-table.vue

@@ -4,12 +4,15 @@
     ref="bkTableRef"
     row-hover="auto"
     :data="tableData"
+    :checked="checkedList"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
     @cell-click="handleCellClick"
     :cell-class="getCellClass"
     border="outer">
     <bk-table-column :width="55" type="selection" align="center" />
     <bk-table-column :label="t('参数名')" prop="name">
-      <template #default="{ row, index }">
+      <template #default="{ row, column, index }">
         <!-- <div class="td-text" v-if="!row?.isEdit">
           {{ row?.name }}
         </div> -->
@@ -165,9 +168,40 @@ import { Message } from 'bkui-vue';
 
 const { t } = useI18n();
 
+interface RowType {
+  id?: number;
+  name: string;
+  value: string;
+  type: string;
+  instructions: string;
+  isEdit?: boolean;
+  editType?: boolean;
+  required?: boolean;
+  options?: unknown;
+  default?: string;
+}
+
+interface SelectPayload {
+  row: RowType;
+  index: number;
+  checked: boolean;
+  data: RowType[];
+}
+
+interface CellClickPayload {
+  event: Event;
+  row: RowType;
+  column: {
+    field: string;
+    index: number;
+  };
+  rowIndex: number;
+  columnIndex: number;
+}
+
 const props = defineProps({
   list: {
-    type: Array,
+    type: Array<RowType>,
     default: [],
   },
 });
@@ -177,14 +211,14 @@ const emit = defineEmits(['change']);
 // const isShowVarPopover = ref(false);
 
 const formRefs = ref(new Map());
-const setRefs = (el: any, name: string) => {
+const setRefs = (el: Element, name: string) => {
   if (el) {
     formRefs.value?.set(name, el);
   }
 };
 
 const formInputRef = ref(new Map());
-const setInputRefs = (el: any, name: string) => {
+const setInputRefs = (el: Element, name: string) => {
   if (el) {
     formInputRef.value?.set(name, el);
   }
@@ -200,9 +234,9 @@ const getDefaultTbRow = () => {
   };
 };
 
-const tableData = ref<any>(props?.list?.length ? props.list : [getDefaultTbRow()]);
-
-const typeList = ref<any[]>([
+const tableData = ref<RowType[]>(props?.list?.length ? props.list : [getDefaultTbRow()]);
+const checkedList = ref<RowType[]>([]);
+const typeList = ref<{label: string, value: string}[]>([
   {
     label: 'string',
     value: 'string',
@@ -217,14 +251,14 @@ const typeList = ref<any[]>([
   },
 ]);
 
-const getCellClass = (payload: any) => {
+const getCellClass = (payload: {index: number;}) => {
   if (payload.index !== 5) {
     return 'custom-table-cell';
   }
   return '';
 };
 
-const handleCellClick = async ({ event, column, rowIndex }: any) => {
+const handleCellClick = async ({ event, column, rowIndex }: CellClickPayload) => {
   event.stopPropagation();
   const { field, index } = column;
   if (!field) {
@@ -277,19 +311,23 @@ const handleTypeChange = (index: number, v: boolean) => {
 };
 
 const addRow = (index: number) => {
-  tableData.value?.splice(index + 1, 0, getDefaultTbRow());
+  const row = { ...getDefaultTbRow(), id: +new Date() };
+  tableData.value?.splice(index + 1, 0, row);
+  checkedList.value = [...checkedList.value, row];
 };
 
 const delRow = (index: number) => {
+  const row = tableData.value[index];
+  checkedList.value = checkedList.value.filter(item => item.id !== row.id);
   tableData.value?.splice(index, 1);
 };
 
 const validate = async () => {
   const list = tableData.value;
   let flag = true;
 
-  list?.forEach(async (item: any) => {
-    if (item.required) {
+  list?.forEach(async (item: RowType) => {
+    if (item?.required) {
       if (!item.name) {
         flag = false;
         Message({
@@ -311,7 +349,24 @@ const validate = async () => {
 };
 
 const getTableData = () => {
-  return tableData.value;
+  return checkedList.value;
+};
+
+const handleSelect = ({ row, checked }: SelectPayload) => {
+  if (checked) {
+    checkedList.value = [...checkedList.value, row];
+  } else {
+    const { id } = row;
+    checkedList.value = checkedList.value?.filter(item => item.id !== id);
+  }
+};
+
+const handleSelectAll = ({ checked, data }: SelectPayload) => {
+  if (checked) {
+    checkedList.value = data;
+  } else {
+    checkedList.value = [];
+  }
 };
 
 // const varRules = {
@@ -368,12 +423,12 @@ const getTableData = () => {
 watch(
   () => props.list,
   (v) => {
-    // console.log('table: ', v);
-    const list: any[] = [];
+    const list: RowType[] = [];
     v?.forEach((item: any) => {
       list.push({
         isEdit: false,
         editType: false,
+        id: +new Date(),
         name: item.name,
         value: item.schema?.default || '',
         instructions: item.description,
@@ -385,10 +440,12 @@ watch(
     });
 
     if (!list?.length) {
-      tableData.value = [getDefaultTbRow()];
+      tableData.value = [{ ...getDefaultTbRow(), id: +new Date() }];
     } else {
       tableData.value = list;
     }
+
+    checkedList.value = [...tableData.value];
   },
   {
     deep: true,
@@ -398,9 +455,10 @@ watch(
 
 watch(
   () => tableData.value,
-  (v) => {
-    const list = v?.filter((item: any) => item.name);
-    emit('change', list);
+  () => {
+    // const list = v?.filter((item: RowType) => item.name);
+    // checkedList.value = cloneDeep([...tableData.value]);
+    emit('change', checkedList.value);
   },
   {
     deep: true,