@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/blueking/ediatable/components/regex-keys.vue

@@ -0,0 +1,71 @@
+<template>
+  <TagInputColumn
+    ref="editTagRef"
+    :model-value="localValue"
+    placeholder="请输入正则表达式"
+    :rules="rules"
+    show-tip
+    @change="handleChange"
+  >
+    <template #tip>
+      <p style="font-weight: bold">
+        可使用通配符进行提取，如
+      </p>
+      <p>*Key$ ：提取以 Key 结尾的 key，包括 Key</p>
+      <p>^Key$：提取精确匹配的Key</p>
+      <p>* ：代表所有'</p>
+    </template>
+  </TagInputColumn>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import { TagInputColumn } from '@blueking/ediatable';
+
+  interface Props {
+    data?: string[];
+    required?: boolean;
+  }
+  interface Emits {
+    (e: 'change', value: string[]): void;
+  }
+  interface Exposes {
+    getValue: () => Promise<string[]>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: () => [],
+    required: false,
+  });
+
+  const emits = defineEmits<Emits>();
+
+  const rules = [
+    {
+      validator: (value: string[]) => {
+        if (!props.required) {
+          return true;
+        }
+        return value && value.length > 0;
+      },
+      message: '不能为空',
+    },
+  ];
+
+  const editTagRef = ref();
+  const localValue = ref(props.data);
+
+  const handleChange = (value: string[]) => {
+    if (value.includes('*') && value.length > 1) {
+      // 已经输入默认全部，不能继续输入其他字符
+      localValue.value = ['*'];
+    }
+    emits('change', value);
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return editTagRef.value.getValue(localValue.value);
+    },
+  });
+</script>

package/knowledge/examples/blueking/ediatable/components/render-row.vue

@@ -0,0 +1,152 @@
+<template>
+  <tr>
+    <td>
+      <RenderTargetCluster
+        ref="clusterRef"
+        :data="data.cluster"
+        @input-finish="handleInputFinish"
+      />
+    </td>
+    <td>
+      <TextPlainColumn
+        :data="data.nodeType"
+        :is-loading="data.isLoading"
+        placeholder="输入集群后自动生成"
+      />
+    </td>
+    <td>
+      <RenderTargetNumber
+        ref="numRef"
+        :data="data.targetNum"
+        :disabled="!data.cluster"
+        :is-loading="data.isLoading"
+      />
+    </td>
+    <td>
+      <RenderKeyRelated
+        required
+        ref="includeKeyRef"
+      />
+    </td>
+    <td>
+      <RenderTargetDateTime
+        ref="timeRef"
+        :data="data.targetDateTime"
+        :is-loading="data.isLoading"
+      />
+    </td>
+    <td>
+      <RenderSwitchMode
+        ref="switchModeRef"
+        :data="data.switchMode"
+        :is-loading="data.isLoading"
+      />
+    </td>
+    <OperationColumn
+      :removeable="removeable"
+      show-copy
+      @add="handleAppend"
+      @remove="handleRemove"
+    />
+  </tr>
+</template>
+<script lang="ts">
+  import _ from 'lodash';
+  import { OperationColumn } from '@blueking/ediatable';
+  import { TextPlainColumn } from '@blueking/ediatable';
+  import RenderTargetCluster from './cluster-name.vue';
+  import RenderSwitchMode from './switch-mode.vue';
+  import RenderTargetNumber from './target-number.vue';
+  import RenderKeyRelated from './regex-keys.vue';
+  import RenderTargetDateTime from './target-datetime.vue';
+
+  export interface IDataRow {
+    rowKey?: string;
+    isLoading?: boolean;
+    cluster: string;
+    nodeType?: string;
+    switchMode?: string;
+    targetNum?: number;
+    targetDateTime?: string;
+  }
+
+  const random = () => `${_.random(0, 999999)}_${Date.now()}_${_.random(0, 999999)}`;
+
+  // 创建表格行数据
+  export const createRowData = (data?: IDataRow): IDataRow => ({
+    rowKey: random(),
+    isLoading: false,
+    cluster: data?.cluster ?? '',
+    nodeType: data?.nodeType ?? '',
+    switchMode: data?.switchMode ?? '',
+  });
+</script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  interface Props {
+    data: IDataRow;
+    removeable: boolean;
+  }
+
+  interface Emits {
+    (e: 'add', params: Array<IDataRow>): void;
+    (e: 'remove'): void;
+    (e: 'clusterInputFinish', value: string): void;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<{
+      cluster: string;
+      target_num: number;
+      include_keys: string[];
+      target_time: string;
+      mode: string;
+    }>;
+  }
+
+  const props = defineProps<Props>();
+
+  const emits = defineEmits<Emits>();
+
+  const clusterRef = ref<InstanceType<typeof RenderTargetCluster>>();
+  const numRef = ref<InstanceType<typeof RenderTargetNumber>>();
+  const includeKeyRef = ref<InstanceType<typeof RenderKeyRelated>>();
+  const timeRef = ref<InstanceType<typeof RenderTargetDateTime>>();
+  const switchModeRef = ref<InstanceType<typeof RenderSwitchMode>>();
+
+  const handleInputFinish = (value: string) => {
+    emits('clusterInputFinish', value);
+  };
+
+  const handleAppend = () => {
+    emits('add', [createRowData()]);
+  };
+
+  const handleRemove = () => {
+    if (props.removeable) {
+      return;
+    }
+    emits('remove');
+  };
+
+  defineExpose<Exposes>({
+    async getValue() {
+      return await Promise.all([
+        clusterRef.value!.getValue(),
+        numRef.value!.getValue(),
+        includeKeyRef.value!.getValue(),
+        timeRef.value!.getValue(),
+        switchModeRef.value!.getValue(),
+      ]).then(data => {
+        const [cluster, target_num, include_keys, target_time, mode] = data;
+        return {
+          cluster,
+          target_num,
+          include_keys,
+          target_time,
+          mode,
+        };
+      });
+    },
+  });
+</script>

package/knowledge/examples/blueking/ediatable/components/switch-mode.vue

@@ -0,0 +1,68 @@
+<template>
+  <Loading :loading="isLoading">
+    <SelectColumn
+      ref="selectRef"
+      v-model="localValue"
+      :list="selectList"
+      placeholder="请选择"
+      :rules="rules"
+      @change="value => handleChange(value as string)"
+    />
+  </Loading>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Loading } from 'bkui-vue';
+
+  import { SelectColumn } from '@blueking/ediatable';
+
+  interface Props {
+    data?: string;
+    isLoading?: boolean;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string>;
+  }
+
+  enum OnlineSwitchType {
+    USER_CONFIRM = 'user_confirm',
+    NO_CONFIRM = 'no_confirm',
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: '',
+    isLoading: false,
+  });
+
+  const selectRef = ref();
+  const localValue = ref(props.data);
+
+  const selectList = [
+    {
+      value: OnlineSwitchType.USER_CONFIRM,
+      label: '需人工确认',
+    },
+    {
+      value: OnlineSwitchType.NO_CONFIRM,
+      label: '无需确认',
+    },
+  ];
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: '请选择切换模式',
+    },
+  ];
+
+  const handleChange = (value: string) => {
+    localValue.value = value as OnlineSwitchType;
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return selectRef.value.getValue().then(() => localValue.value);
+    },
+  });
+</script>

package/knowledge/examples/blueking/ediatable/components/target-datetime.vue

@@ -0,0 +1,74 @@
+<template>
+  <Loading :loading="isLoading">
+    <DateTimePickerColumn
+      ref="editRef"
+      append-to-body
+      class="render-box"
+      clearable
+      :disabled-date="disableDate"
+      :model-value="dateValue"
+      placeholder="请选择指定时间"
+      :rules="rules"
+      type="datetime"
+      @change="handleDatetimeChange"
+    />
+  </Loading>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Loading } from 'bkui-vue';
+
+  import { DateTimePickerColumn } from '@blueking/ediatable';
+
+  interface Props {
+    data?: string;
+    isLoading?: boolean;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: '',
+    isLoading: false,
+  });
+
+  const editRef = ref();
+  const dateValue = ref(props.data);
+
+  const rules = [
+    {
+      validator: (value: string) => !!value,
+      message: '请指定时间',
+    },
+  ];
+
+  const disableDate = (date: Date) => {
+    const now = Date.now();
+    return date.valueOf() < now - 16 * 24 * 3600000 || date.valueOf() > now;
+  };
+
+  const handleDatetimeChange = (date: string) => {
+    dateValue.value = date;
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return editRef.value.getValue().then(() => dateValue.value);
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .render-box {
+    :deep(.icon-wrapper) {
+      left: 10px;
+      display: block;
+      width: 32px;
+    }
+
+    :deep(input) {
+      padding-left: 40px;
+    }
+  }
+</style>

package/knowledge/examples/blueking/ediatable/components/target-number.vue

@@ -0,0 +1,59 @@
+<template>
+  <Loading :loading="isLoading">
+    <InputColumn
+      ref="editRef"
+      v-model="localValue"
+      :disabled="disabled"
+      placeholder="请输入"
+      :rules="rules"
+      :min="0"
+      type="number"
+    />
+  </Loading>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Loading } from 'bkui-vue';
+
+  import { InputColumn } from '@blueking/ediatable';
+
+  interface Props {
+    data?: number;
+    min?: number;
+    isLoading?: boolean;
+    disabled?: boolean;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<number>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: 0,
+    min: 0,
+    isLoading: false,
+    disabled: false,
+  });
+
+  const localValue = ref(String(props.data));
+  const editRef = ref();
+
+  const nonInterger = /\D/g;
+
+  const rules = [
+    {
+      validator: (value: string) => Boolean(value),
+      message: '目标台数不能为空',
+    },
+    {
+      validator: (value: string) => !nonInterger.test(value),
+      message: '格式有误，请输入数字',
+    },
+  ];
+
+  defineExpose<Exposes>({
+    getValue() {
+      return editRef.value.getValue().then(() => Number(localValue.value));
+    },
+  });
+</script>

package/knowledge/examples/blueking/ediatable/datetime-picker-column-demo.vue

@@ -0,0 +1,63 @@
+<template>
+  <DateTimePickerColumn
+    ref="editRef"
+    append-to-body
+    clearable
+    :disabled-date="disableDate"
+    v-model="localValue"
+    placeholder="请选择指定时间"
+    :rules="rules"
+    type="datetime"
+  />
+  <Button
+    style="width: 88px; margin-top: 16px"
+    theme="primary"
+    @click="handleGetValue"
+  >
+    获取值
+  </Button>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Button } from 'bkui-vue';
+  import { DateTimePickerColumn } from '@blueking/ediatable';
+
+  interface Props {
+    data?: string;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<string>;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    data: '',
+  });
+
+  const editRef = ref();
+  const localValue = ref(props.data);
+
+  const rules = [
+    {
+      validator: (value: string) => !!value,
+      message: '请指定时间',
+    },
+  ];
+
+  const disableDate = (date: Date) => {
+    const now = Date.now();
+    return date.valueOf() < now - 16 * 24 * 3600000 || date.valueOf() > now;
+  };
+
+  const handleGetValue = () => {
+    editRef.value.getValue().then(() => {
+      console.log('值：', localValue.value);
+    })
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      return editRef.value.getValue().then(() => localValue.value);
+    },
+  });
+</script>