perf: 迁移脚本管理/转换函数至规则引擎页面

+export { default as RuleChainConversionScript } from './index.vue';

+<template>
+  <div>
+    <BasicTable @register="registerTable" v-show="isStatus === 0">
+      <template #toolbar>
+        <Authority value="api:yt:convert:js:post">
+          <a-button type="primary" @click="handleCreate"> 新增转换脚本 </a-button>
+        </Authority>
+        <Authority value="api:yt:convert:js:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #status="{ record }">
+        <Switch
+          :checked="record.status === 1"
+          :loading="record.pendingStatus"
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          @change="(checked:boolean)=>statusChange(checked,record)"
+        />
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              auth: 'api:yt:convert:js:get',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleView.bind(null, record),
+              ifShow: record.status == 1,
+            },
+            {
+              label: '编辑',
+              auth: 'api:yt:convert:js:update',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+              ifShow: record.status == 0,
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:convert:js:delete',
+              icon: 'ant-design:delete-outlined',
+              ifShow: record.status == 0,
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ScriptDrawer
+      @register="registerDrawer"
+      @isStatus="handleIsStatus"
+      ref="scriptDrawerRef"
+      @success="handleSuccess"
+    />
+    <TestScript v-show="isStatus === 1" @isStatus="handleCancelStatus" ref="testScriptRef" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick } from 'vue';
+  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns } from '../config/config.data';
+  import { getConvertApi, deleteTransformApi } from '/@/api/device/TransformScriptApi';
+  import { useDrawer } from '/@/components/Drawer/index';
+  import ScriptDrawer from '../cpns/ScriptDrawer.vue';
+  import TestScript from '../cpns/TestScript.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { updateTransformScriptStatusApi } from '/@/api/device/TransformScriptApi';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Authority } from '/@/components/Authority';
+  import { computed, unref } from 'vue';
+
+  const props = defineProps<{ searchInfo: Recordable }>();
+
+  const getSearchInfo = computed(() => props.searchInfo);
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
+    api: getConvertApi,
+    title: '转换脚本列表',
+    columns,
+    useSearchForm: false,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    rowKey: 'id',
+    beforeFetch: (params: Recordable) => {
+      return { ...unref(getSearchInfo), ...params };
+    },
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+    useBatchDelete(deleteTransformApi, handleSuccess, setProps);
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.status === 1) {
+      return { disabled: true };
+    } else {
+      return { disabled: false };
+    }
+  };
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const isStatus = ref(0);
+  const testScriptRef = ref();
+  const scriptDrawerRef = ref();
+  const handleIsStatus = ({ status, jsCode }) => {
+    isStatus.value = status;
+    testScriptRef.value.aceEditor.setValue(jsCode);
+  };
+  const handleCancelStatus = ({ status, emitType }) => {
+    openDrawer(true);
+    isStatus.value = status;
+    if (emitType === 'ok') {
+      const jsCode = testScriptRef.value.aceEditor.getValue();
+      scriptDrawerRef.value.aceEditor.setValue(jsCode);
+    }
+  };
+  const handleCreate = () => {
+    nextTick(() => {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    });
+  };
+  const handleEdit = (record: Recordable) => {
+    nextTick(() => {
+      openDrawer(true, { isUpdate: true, record });
+    });
+  };
+  const statusChange = async (checked, record) => {
+    setProps({
+      loading: true,
+    });
+    setSelectedRowKeys([]);
+    resetSelectedRowKeys();
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      await updateTransformScriptStatusApi(newStatus, record.id);
+      if (newStatus) {
+        createMessage.success(`启用成功`);
+      } else {
+        createMessage.success('禁用成功');
+      }
+    } finally {
+      setProps({
+        loading: false,
+      });
+      reload();
+    }
+  };
+  function handleView(record: Recordable) {
+    nextTick(() => {
+      openDrawer(true, {
+        record,
+        isUpdate: 'view',
+      });
+    });
+  }
+
+  defineExpose({
+    reload: () => reload(),
+  });
+</script>

+export { default as TcpConversionScript } from './index.vue';

-<template>
-  <div>
-    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
-      <template #toolbar>
-        <Authority value="api:yt:js:post">
-          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增转换脚本 </a-button>
-        </Authority>
-        <Authority value="api:yt:js:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #convertJs="{ record }">
-        <a-button type="text" @click="handleScriptView(record)">
-          <span style="color: #377dff">查看脚本</span>
-        </a-button>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '测试',
-              icon: 'ant-design:font-size-outlined',
-              auth: 'api:yt:js:test',
-              onClick: handleBindTest.bind(null, record),
-            },
-            {
-              label: '编辑',
-              icon: 'clarity:note-edit-line',
-              auth: 'api:yt:js:update',
-              onClick: handleCreateOrEdit.bind(null, record),
-              ifShow: record.status == 0,
-            },
-            {
-              label: '删除',
-              icon: 'ant-design:delete-outlined',
-              auth: 'api:yt:js:delete',
-              color: 'error',
-              ifShow: record.status == 0,
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
-            },
-          ]"
-        />
-      </template>
-      <template #status="{ record }">
-        <Authority value="api:yt:js:update:status">
-          <Switch
-            :checked="record.status === 1"
-            :loading="record.pendingStatus"
-            checkedChildren="启用"
-            unCheckedChildren="禁用"
-            @change="(checked:boolean)=>statusChange(checked,record)"
-          />
-        </Authority>
-      </template>
-    </BasicTable>
-    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, nextTick } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { searchFormSchema, columns } from './config.data';
-  import { Authority } from '/@/components/Authority';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Switch, Popconfirm } from 'ant-design-vue';
-  import { useModal } from '/@/components/Modal';
-  import ConverScriptModal from './ConverScriptModal.vue';
-  import {
-    ScriptPage,
-    deleteScriptManage,
-    scriptPagePutApi,
-  } from '/@/api/scriptmanage/scriptManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  const searchInfo = reactive<Recordable>({});
-  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
-    title: '转换脚本列表',
-    api: ScriptPage,
-    columns,
-    showIndexColumn: false,
-    clickToRowSelect: false,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
-    },
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    rowKey: 'id',
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
-  });
-
-  const handleSuccess = () => {
-    reload();
-  };
-
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-    useBatchDelete(deleteScriptManage, handleSuccess, setProps);
-  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-    // Demo:status为1的选择框禁用
-    if (record.status === 1) {
-      return { disabled: true };
-    } else {
-      return { disabled: false };
-    }
-  };
-
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
-
-  const [registerModal, { openModal }] = useModal();
-
-  // 新增或编辑
-  const handleCreateOrEdit = (record: Recordable | null) => {
-    if (record) {
-      openModal(true, {
-        isUpdate: false,
-        record,
-        isAuth: '',
-        isView: false,
-        isTest: false,
-        isText: 'confirm',
-        isTitle: 'edit',
-      });
-    } else {
-      openModal(true, {
-        isAuth: '',
-        isUpdate: true,
-        isView: false,
-        isTest: false,
-        isText: 'confirm',
-        isTitle: 'add',
-      });
-    }
-  };
-  const handleBindTest = (record: Recordable | null) => {
-    if (record) {
-      openModal(true, {
-        isAuth: '',
-        isUpdate: false,
-        record: record.id,
-        isTest: true,
-        isText: 'test',
-        isTitle: 'test',
-      });
-    }
-  };
-  const handleScriptView = (record: Recordable | null) => {
-    if (record) {
-      openModal(true, {
-        isUpdate: true,
-        record,
-        isView: true,
-      });
-    }
-  };
-  const statusChange = async (checked, record) => {
-    setProps({
-      loading: true,
-    });
-    setSelectedRowKeys([]);
-    resetSelectedRowKeys();
-    const newStatus = checked ? 1 : 0;
-    const { createMessage } = useMessage();
-    try {
-      await scriptPagePutApi(record.id, newStatus);
-      if (newStatus) {
-        createMessage.success(`启用成功`);
-      } else {
-        createMessage.success('禁用成功');
-      }
-    } finally {
-      setProps({
-        loading: false,
-      });
-      reload();
-    }
-  };
-</script>
+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="api:yt:js:post">
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增转换脚本 </a-button>
+        </Authority>
+        <Authority value="api:yt:js:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #convertJs="{ record }">
+        <a-button type="text" @click="handleScriptView(record)">
+          <span style="color: #377dff">查看脚本</span>
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '测试',
+              icon: 'ant-design:font-size-outlined',
+              auth: 'api:yt:js:test',
+              onClick: handleBindTest.bind(null, record),
+            },
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:js:update',
+              onClick: handleCreateOrEdit.bind(null, record),
+              ifShow: record.status == 0,
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: 'api:yt:js:delete',
+              color: 'error',
+              ifShow: record.status == 0,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+      <template #status="{ record }">
+        <Authority value="api:yt:js:update:status">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+      </template>
+    </BasicTable>
+    <ConverScriptModal @register="registerModal" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick, unref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns } from './config.data';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import ConverScriptModal from './ConverScriptModal.vue';
+  import {
+    ScriptPage,
+    deleteScriptManage,
+    scriptPagePutApi,
+  } from '/@/api/scriptmanage/scriptManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const props = defineProps<{ searchInfo: Recordable }>();
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
+    title: '转换脚本列表',
+    api: ScriptPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    beforeFetch: (params: Recordable) => {
+      return { ...unref(props.searchInfo), ...params };
+    },
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+    useBatchDelete(deleteScriptManage, handleSuccess, setProps);
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.status === 1) {
+      return { disabled: true };
+    } else {
+      return { disabled: false };
+    }
+  };
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  // 新增或编辑
+  const handleCreateOrEdit = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isUpdate: false,
+        record,
+        isAuth: '',
+        isView: false,
+        isTest: false,
+        isText: 'confirm',
+        isTitle: 'edit',
+      });
+    } else {
+      openModal(true, {
+        isAuth: '',
+        isUpdate: true,
+        isView: false,
+        isTest: false,
+        isText: 'confirm',
+        isTitle: 'add',
+      });
+    }
+  };
+  const handleBindTest = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isAuth: '',
+        isUpdate: false,
+        record: record.id,
+        isTest: true,
+        isText: 'test',
+        isTitle: 'test',
+      });
+    }
+  };
+  const handleScriptView = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isUpdate: true,
+        record,
+        isView: true,
+      });
+    }
+  };
+  const statusChange = async (checked, record) => {
+    setProps({
+      loading: true,
+    });
+    setSelectedRowKeys([]);
+    resetSelectedRowKeys();
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      await scriptPagePutApi(record.id, newStatus);
+      if (newStatus) {
+        createMessage.success(`启用成功`);
+      } else {
+        createMessage.success('禁用成功');
+      }
+    } finally {
+      setProps({
+        loading: false,
+      });
+      reload();
+    }
+  };
+
+  defineExpose({
+    reload: () => {
+      reload();
+    },
+  });
+</script>

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
+import moment from 'moment';
+
+export enum StatusEnum {
+  ENABLE = 1,
+  DISABLE = 0,
+}
+
 export const columns: BasicColumn[] = [
   {
     title: '名称',
@@ -44,12 +51,23 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       placeholder: '请选择状态',
       options: [
-        { label: '已启用', value: '1' },
-        { label: '未启用', value: '0' },
+        { label: '已启用', value: StatusEnum.ENABLE },
+        { label: '未启用', value: StatusEnum.DISABLE },
       ],
     },
     colProps: { span: 6 },
   },
+  {
+    field: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    colProps: { span: 10 },
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+  },
 ];
 
 export const formSchema: FormSchema[] = [

-<template>
-  <div>
-    <BasicTable @register="registerTable" v-show="isStatus === 0">
-      <template #toolbar>
-        <Authority value="api:yt:convert:js:post">
-          <a-button type="primary" @click="handleCreate"> 新增转换脚本 </a-button>
-        </Authority>
-        <Authority value="api:yt:convert:js:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
-            <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '查看',
-              auth: 'api:yt:convert:js:get',
-              icon: 'ant-design:eye-outlined',
-              onClick: handleView.bind(null, record),
-              ifShow: record.status == 1,
-            },
-            {
-              label: '编辑',
-              auth: 'api:yt:convert:js:update',
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-              ifShow: record.status == 0,
-            },
-            {
-              label: '删除',
-              auth: 'api:yt:convert:js:delete',
-              icon: 'ant-design:delete-outlined',
-              ifShow: record.status == 0,
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-    <ScriptDrawer
-      @register="registerDrawer"
-      @isStatus="handleIsStatus"
-      ref="scriptDrawerRef"
-      @success="handleSuccess"
-    />
-    <TestScript v-show="isStatus === 1" @isStatus="handleCancelStatus" ref="testScriptRef" />
-  </div>
-</template>
-
 <script lang="ts" setup>
-  import { ref, nextTick } from 'vue';
-  import { Switch, Popconfirm } from 'ant-design-vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { columns, searchFormSchema } from './config/config.data';
-  import { getConvertApi, deleteTransformApi } from '/@/api/device/TransformScriptApi';
-  import { useDrawer } from '/@/components/Drawer/index';
-  import ScriptDrawer from './cpns/ScriptDrawer.vue';
-  import TestScript from './cpns/TestScript.vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { updateTransformScriptStatusApi } from '/@/api/device/TransformScriptApi';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Authority } from '/@/components/Authority';
+  import { Tabs } from 'ant-design-vue';
+  import { RuleChainConversionScript } from './RuleChainConversionScript';
+  import { TcpConversionScript } from './TcpConversionScript';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { searchFormSchema } from './config/config.data';
+  import { nextTick, ref, unref } from 'vue';
+
+  enum ActiveKey {
+    RULE = 'rule',
+    TCP = 'tco',
+  }
+  const ruleChainTableRefEl = ref<Nullable<InstanceType<typeof RuleChainConversionScript>>>(null);
+  const tcpTableRefEl = ref<Nullable<InstanceType<typeof TcpConversionScript>>>(null);
 
-  const handleSuccess = () => {
-    reload();
-  };
+  const searchInfo = ref<Recordable>({});
 
-  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
-    api: getConvertApi,
-    title: '转换脚本列表',
-    columns,
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    showIndexColumn: false,
-    formConfig: {
-      labelWidth: 100,
-      schemas: searchFormSchema,
+  const activeKey = ref(ActiveKey.RULE);
+
+  const [register, { getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    labelWidth: 120,
+    showAdvancedButton: true,
+    compact: true,
+    fieldMapToTime: [['createTime', ['startTime', 'endTime'], 'x']],
+    submitFunc: async () => {
+      const value = getFieldsValue();
+      searchInfo.value = value;
+      console.log(searchInfo);
+      await nextTick();
+      if (unref(activeKey) === ActiveKey.RULE) {
+        unref(ruleChainTableRefEl)?.reload();
+      } else {
+        unref(tcpTableRefEl)?.reload();
+      }
     },
-    clickToRowSelect: 'false',
-    rowKey: 'id',
-    actionColumn: {
-      width: 180,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
+    resetFunc: async () => {
+      searchInfo.value = {};
+      await nextTick();
+      if (unref(activeKey) === ActiveKey.RULE) {
+        unref(ruleChainTableRefEl)?.reload();
+      } else {
+        unref(tcpTableRefEl)?.reload();
+      }
     },
   });
+</script>
 
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-    useBatchDelete(deleteTransformApi, handleSuccess, setProps);
-  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-    // Demo:status为1的选择框禁用
-    if (record.status === 1) {
-      return { disabled: true };
-    } else {
-      return { disabled: false };
-    }
-  };
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
-  const [registerDrawer, { openDrawer }] = useDrawer();
+<template>
+  <section class="w-full h-full p-4">
+    <BasicForm @register="register" class="rule-script-manage-form w-full bg-light-50 !pt-4" />
+    <main class="mt-4">
+      <Tabs v-model:activeKey="activeKey" type="card" class="w-full h-full bg-light-50 !p-4">
+        <Tabs.TabPane tab="规则链转换脚本" :key="ActiveKey.RULE">
+          <RuleChainConversionScript
+            ref="ruleChainTableRefEl"
+            :search-info="searchInfo"
+            class="p-4 bg-neutral-100"
+          />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="TCP转换脚本" :key="ActiveKey.TCP">
+          <TcpConversionScript
+            ref="tcpTableRefEl"
+            :search-info="searchInfo"
+            class="p-4 bg-neutral-100"
+          />
+        </Tabs.TabPane>
+      </Tabs>
+    </main>
+  </section>
+</template>
 
-  const isStatus = ref(0);
-  const testScriptRef = ref();
-  const scriptDrawerRef = ref();
-  const handleIsStatus = ({ status, jsCode }) => {
-    isStatus.value = status;
-    testScriptRef.value.aceEditor.setValue(jsCode);
-  };
-  const handleCancelStatus = ({ status, emitType }) => {
-    openDrawer(true);
-    isStatus.value = status;
-    if (emitType === 'ok') {
-      const jsCode = testScriptRef.value.aceEditor.getValue();
-      scriptDrawerRef.value.aceEditor.setValue(jsCode);
+<style lang="less" scoped>
+  .rule-script-manage-form {
+    :deep(.ant-row) {
+      @apply w-full;
     }
-  };
-  const handleCreate = () => {
-    nextTick(() => {
-      openDrawer(true, {
-        isUpdate: false,
-      });
-    });
-  };
-  const handleEdit = (record: Recordable) => {
-    nextTick(() => {
-      openDrawer(true, { isUpdate: true, record });
-    });
-  };
-  const statusChange = async (checked, record) => {
-    setProps({
-      loading: true,
-    });
-    setSelectedRowKeys([]);
-    resetSelectedRowKeys();
-    const newStatus = checked ? 1 : 0;
-    const { createMessage } = useMessage();
-    try {
-      await updateTransformScriptStatusApi(newStatus, record.id);
-      if (newStatus) {
-        createMessage.success(`启用成功`);
-      } else {
-        createMessage.success('禁用成功');
-      }
-    } finally {
-      setProps({
-        loading: false,
-      });
-      reload();
-    }
-  };
-  function handleView(record: Recordable) {
-    nextTick(() => {
-      openDrawer(true, {
-        record,
-        isUpdate: 'view',
-      });
-    });
   }
-</script>
+</style>