Merge branch 'feat/add-rule-chain' into 'main_dev'

fix: 修改规则链相关的问题

See merge request yunteng/thingskit-front!850

@@ -12,11 +12,11 @@ export const getDeviceProfile = (deviceType?: string) => {
 };
 };
 
 
 // 获取历史数据
 // 获取历史数据
-export const getDeviceHistoryInfo = (params: Recordable) => {
+export const getDeviceHistoryInfo = (params: Recordable, orderBy) => {
   return defHttp.get<HistoryData>(
   return defHttp.get<HistoryData>(
     {
     {
       url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
       url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
-      params: { ...params, entityId: null, orderBy: 'ASC' },
+      params: { ...params, entityId: null, orderBy },
     },
     },
     {
     {
       joinPrefix: false,
       joinPrefix: false,

@@ -161,15 +161,53 @@ export const createRuleChine = (params) => {
   );
   );
 };
 };
 
 
+export const importRuleChine = (params) => {
+  return defHttp.post(
+    {
+      url: `${ScreenManagerApi.RULE_CHAIN}/metadata`,
+      params,
+    },
+    { joinPrefix: false }
+  );
+};
+
 /**
 /**
  * 删除规则链
  * 删除规则链
  */
  */
 
 
-export const deleteRuleChine = (params) => {
+export const deleteRuleChine = (id) => {
   return defHttp.delete(
   return defHttp.delete(
     {
     {
       url: `${ScreenManagerApi.RULE_CHAIN}/`,
       url: `${ScreenManagerApi.RULE_CHAIN}/`,
-      params,
+      params: id,
+    },
+    { joinPrefix: false }
+  );
+};
+
+/**
+ * 导出规则链
+ */
+
+export const exportRuleChine = (id) => {
+  return defHttp.get(
+    {
+      url: `${ScreenManagerApi.RULE_CHAIN}/`,
+      params: id + '/metadata',
+    },
+    { joinPrefix: false }
+  );
+};
+
+/**
+ * 设置根规则链接
+ */
+
+export const settingRootChine = (id) => {
+  return defHttp.post(
+    {
+      url: `${ScreenManagerApi.RULE_CHAIN}/`,
+      params: id + '/root',
     },
     },
     { joinPrefix: false }
     { joinPrefix: false }
   );
   );

@@ -84,10 +84,22 @@
         format: (val) => {
         format: (val) => {
           return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
           return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
         },
         },
+        sorter: 'descend',
       },
       },
     ],
     ],
   });
   });
 
 
+  const handleTableChange = async (pag, filters, sorter: any) => {
+    console.log(pag, filters, sorter, 'pag, filters, sorter');
+    if (sorter.field == 'ts') {
+      if (sorter.order == 'descend') {
+        openHistoryPanel('ASC');
+      } else {
+        openHistoryPanel('DESC');
+      }
+    }
+  };
+
   const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
   const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
 
 
   const [register, method] = useTimePeriodForm({
   const [register, method] = useTimePeriodForm({
@@ -158,7 +170,7 @@
     } catch (error) {}
     } catch (error) {}
   };
   };
 
 
-  const openHistoryPanel = async () => {
+  const openHistoryPanel = async (orderBy?: string) => {
     await nextTick();
     await nextTick();
     method.updateSchema({
     method.updateSchema({
       field: 'keys',
       field: 'keys',
@@ -177,14 +189,17 @@
 
 
     const keys = props.attr ? props.attr : unref(getDeviceKeys).join();
     const keys = props.attr ? props.attr : unref(getDeviceKeys).join();
 
 
-    const res = await getDeviceHistoryInfo({
-      entityId: props.deviceDetail.tbDeviceId,
-      keys,
-      startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
-      endTs: Date.now(),
-      agg: AggregateDataEnum.NONE,
-      limit: 7,
-    });
+    const res = await getDeviceHistoryInfo(
+      {
+        entityId: props.deviceDetail.tbDeviceId,
+        keys,
+        startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
+        endTs: Date.now(),
+        agg: AggregateDataEnum.NONE,
+        limit: 7,
+      },
+      orderBy
+    );
     historyData.value = getTableHistoryData(res);
     historyData.value = getTableHistoryData(res);
 
 
     // 判断对象是否为空
     // 判断对象是否为空
@@ -238,7 +253,11 @@
         </div>
         </div>
         <Empty v-show="!isNull && mode === EnumTableChartMode.CHART" />
         <Empty v-show="!isNull && mode === EnumTableChartMode.CHART" />
 
 
-        <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerTable">
+        <BasicTable
+          @change="handleTableChange"
+          v-show="mode === EnumTableChartMode.TABLE"
+          @register="registerTable"
+        >
           <template #toolbar>
           <template #toolbar>
             <div class="flex h-70px items-center justify-end p-2">
             <div class="flex h-70px items-center justify-end p-2">
               <ModeSwitchButton
               <ModeSwitchButton

@@ -136,6 +136,7 @@ export const useGenDynamicForm = () => {
     fieldTypeMap.clear();
     fieldTypeMap.clear();
     const formSchema = schemas.map((item) => {
     const formSchema = schemas.map((item) => {
       const { functionName, identifier, dataType } = item;
       const { functionName, identifier, dataType } = item;
+      console.log(item, 'item');
       const { type } = dataType || {};
       const { type } = dataType || {};
 
 
       fieldTypeMap.set(identifier!, dataType!.type);
       fieldTypeMap.set(identifier!, dataType!.type);

@@ -72,7 +72,11 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref, unref, reactive, nextTick } from 'vue';
   import { ref, unref, reactive, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
+  import {
+    deviceConfigAddOrEdit,
+    deviceConfigGetDetail,
+    deviceConfigGetRuleChain,
+  } from '/@/api/device/deviceConfigApi';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { steps } from './device.profile.data';
   import { steps } from './device.profile.data';
   import { isEmpty } from '/@/utils/is';
   import { isEmpty } from '/@/utils/is';
@@ -119,6 +123,12 @@
       unref(DevConStRef)?.editOrAddDeviceTypeStatus(true);
       unref(DevConStRef)?.editOrAddDeviceTypeStatus(true);
     } else {
     } else {
       unref(DevConStRef)?.editOrAddDeviceTypeStatus(false);
       unref(DevConStRef)?.editOrAddDeviceTypeStatus(false);
+      const values = ref([]) as any;
+      if (!values.value.length) {
+        values.value = await deviceConfigGetRuleChain();
+      }
+      const defaultRuleChainId = unref(values).filter((item) => item.root)[0].id.id;
+      await unref(DevConStRef)?.setFieldsdefaultRuleChainId(defaultRuleChainId);
     }
     }
   });
   });
   const handleChange = (e) => {
   const handleChange = (e) => {

@@ -196,7 +196,6 @@ export const step1Schemas: FormSchema[] = [
     label: '规则链',
     label: '规则链',
     component: 'ApiSelect',
     component: 'ApiSelect',
     colProps: { span: 14 },
     colProps: { span: 14 },
-
     componentProps: {
     componentProps: {
       api: async () => {
       api: async () => {
         const data = await deviceConfigGetRuleChain();
         const data = await deviceConfigGetRuleChain();

@@ -28,7 +28,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../device.profile.data';
   import { step1Schemas } from '../device.profile.data';
   import { uploadApi } from '/@/api/personal/index';
   import { uploadApi } from '/@/api/personal/index';
@@ -90,6 +90,12 @@
     }
     }
     return isJpgOrPng && isLt2M;
     return isJpgOrPng && isLt2M;
   };
   };
+
+  const setFieldsdefaultRuleChainId = async (id) => {
+    await nextTick();
+    setFieldsValue({ defaultRuleChainId: id });
+  };
+
   async function customSubmitFunc() {
   async function customSubmitFunc() {
     const values = await validate();
     const values = await validate();
     if (!values) return;
     if (!values) return;
@@ -129,6 +135,7 @@
     resetFormData,
     resetFormData,
     getFormData,
     getFormData,
     editOrAddDeviceTypeStatus,
     editOrAddDeviceTypeStatus,
+    setFieldsdefaultRuleChainId,
   });
   });
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>

+<template>
+  <div>属性</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

+<template>
+  <div>警告</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

+import ChainDetailDrawer from './index.vue';
+export { ChainDetailDrawer };

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    isDetail
+    @register="register"
+    destroyOnClose
+    @close="closeDrawer"
+    :title="deviceDetail.alias || deviceDetail.name"
+    width="80%"
+  >
+    <Tabs v-model:activeKey="activeKey" :size="size">
+      <TabPane key="1" tab="详情">
+        <div>详情</div>
+      </TabPane>
+      <TabPane key="2" tab="属性">
+        <Attribute />
+      </TabPane>
+      <TabPane key="3" tab="最新遥测数据"><div>最新遥测数据</div></TabPane>
+      <TabPane key="4" tab="警告">
+        <div>警告</div>
+      </TabPane>
+      <TabPane key="5" tab="事件">
+        <div>事件</div>
+      </TabPane>
+      <!-- 网关设备并且场家是TBox -->
+      <TabPane key="6" tab="关联">
+        <div>关联</div>
+      </TabPane>
+      <!-- 网关设备并且是TBox -->
+
+      <TabPane key="7" tab="审计日志">
+        <div>审计日志</div>
+      </TabPane>
+    </Tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+
+  import Attribute from './component/Attribute.vue';
+
+  // defineProps({});
+
+  // defineEmits([]);
+
+  const activeKey = ref('1');
+  const size = ref('small');
+  const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
+  // 详情回显
+  const [register] = useDrawerInner(async (data) => {
+    console.log(data, 'data');
+  });
+  const closeDrawer = () => {
+    activeKey.value = '1';
+  };
+</script>

@@ -5,7 +5,7 @@
       v-bind="$attrs"
       v-bind="$attrs"
       width="30rem"
       width="30rem"
       @register="register"
       @register="register"
-      title="添加规则链"
+      :title="ruleTile"
       @ok="handleSuccess"
       @ok="handleSuccess"
       @close="handleClose"
       @close="handleClose"
     >
     >
@@ -17,49 +17,73 @@
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ExecuteReportRecord } from '/@/api/export/model/exportModel';
   import { useForm, BasicForm } from '/@/components/Form';
   import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema } from './config';
   import { formSchema } from './config';
   import { createRuleChine } from '/@/api/ruleengine/ruleengineApi';
   import { createRuleChine } from '/@/api/ruleengine/ruleengineApi';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref, unref } from 'vue';
 
 
   const emit = defineEmits(['register', 'success']);
   const emit = defineEmits(['register', 'success']);
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
-  const [registerForm, { getFieldsValue, validate }] = useForm({
-    labelWidth: 120,
+  const ruleTile = ref();
+
+  const [registerForm, { getFieldsValue, validate, setFieldsValue }] = useForm({
+    labelWidth: 70,
     schemas: formSchema,
     schemas: formSchema,
     showActionButtonGroup: false,
     showActionButtonGroup: false,
   });
   });
 
 
-  const [register, { setModalProps, closeModal }] = useModalInner(
-    async (data: { record: ExecuteReportRecord }) => {
-      setModalProps({ loading: true });
-      console.log(data, 'record');
-    }
-  );
+  const updateValue = ref({});
+  const isUpdate = ref<boolean>(true);
+
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    const { text, record } = data || {};
+    console.log(data, 'data');
+    isUpdate.value = record ? true : false;
+    ruleTile.value = text;
+    const { name, additionalInfo, debugMode } = record || {};
+    const { description } = additionalInfo || {};
+    updateValue.value = record;
+    unref(isUpdate) && setFieldsValue({ name, debugMode, description });
+    setModalProps({ loading: false });
+  });
 
 
   const handleClose = () => {
   const handleClose = () => {
     closeModal();
     closeModal();
   };
   };
 
 
   const handleSuccess = async () => {
   const handleSuccess = async () => {
-    console.log(1, '1', getFieldsValue());
     await validate();
     await validate();
     const record = getFieldsValue();
     const record = getFieldsValue();
     const { description, debugMode, name } = record;
     const { description, debugMode, name } = record;
-    const form = {
-      additionalInfo: {
-        description,
-      },
-      debugMode,
-      name,
-      type: 'CORE',
-    };
+    if (!isUpdate.value) {
+      const form = {
+        additionalInfo: {
+          description,
+        },
+        debugMode,
+        name,
+        type: 'CORE',
+      };
+      await createRuleChine(form);
+      createMessage.success('添加成功');
+    } else {
+      const value = {
+        ...updateValue.value,
+        additionalInfo: {
+          description,
+        },
+        debugMode,
+        name,
+      };
+      console.log(value, 'value');
+      await createRuleChine(value);
+      createMessage.success('编辑成功');
+    }
 
 
-    await createRuleChine(form);
-    createMessage.success('添加成功');
     handleClose();
     handleClose();
     emit('success');
     emit('success');
   };
   };

@@ -9,6 +9,7 @@ export const formSchema: FormSchema[] = [
     required: true,
     required: true,
     componentProps: {
     componentProps: {
       placeholder: '请输入名称',
       placeholder: '请输入名称',
+      max: 120,
     },
     },
   },
   },
   {
   {

@@ -16,7 +16,7 @@ export const columns: BasicColumn[] = [
     width: 200,
     width: 200,
   },
   },
   {
   {
-    title: '是否跟链',
+    title: '是否根链',
     dataIndex: 'root',
     dataIndex: 'root',
     slots: {
     slots: {
       customRender: 'root',
       customRender: 'root',
@@ -41,3 +41,20 @@ export const searchFormSchema: FormSchema[] = [
 export const encode = (string: string) => {
 export const encode = (string: string) => {
   return encodeURIComponent(string);
   return encodeURIComponent(string);
 };
 };
+
+export const exportJSONFile = (value: Recordable, name: string) => {
+  const blob = new Blob([JSON.stringify(value, null, 2)], { type: 'text/json' });
+  const objectURL = URL.createObjectURL(blob);
+  const element = document.createElement('a');
+  element.href = objectURL;
+  element.download = `${name}.json`;
+  element.style.display = 'none';
+  document.body.appendChild(element);
+  element.click();
+  element.remove();
+  URL.revokeObjectURL(objectURL);
+};
+
+export enum RuleChainPermisssion {
+  DETAIL = 'rule:chain:detail',
+}

@@ -5,6 +5,9 @@
         <Authority>
         <Authority>
           <a-button type="primary" @click="handleAdd"> 新增规则链 </a-button>
           <a-button type="primary" @click="handleAdd"> 新增规则链 </a-button>
         </Authority>
         </Authority>
+        <Upload :show-upload-list="false" :customRequest="handleImport">
+          <Button type="primary" :loading="importLoading"> 导入规则链 </Button>
+        </Upload>
         <!-- <Authority>
         <!-- <Authority>
           <Popconfirm
           <Popconfirm
             title="您确定要批量删除数据"
             title="您确定要批量删除数据"
@@ -23,10 +26,37 @@
         <TableAction
         <TableAction
           :actions="[
           :actions="[
             {
             {
-              label: '查看',
+              label: '打开规则链',
               icon: 'ant-design:eye-outlined',
               icon: 'ant-design:eye-outlined',
               onClick: handleView.bind(null, record),
               onClick: handleView.bind(null, record),
             },
             },
+            // {
+            //   label: '详情',
+            //   icon: 'ant-design:field-time-outlined',
+            //   onClick: handleDetail.bind(null, record),
+            // },
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              onClick: handleBussinessModal.bind(null, record),
+            },
+          ]"
+          :dropDownActions="[
+            {
+              label: '设置为根规则链',
+              icon: 'ant-design:gateway-outlined',
+              color: 'error',
+              ifShow: !record.root,
+              popConfirm: {
+                title: '是否确认设置成根规则链',
+                confirm: handleSettingRoot.bind(null, record),
+              },
+            },
+            {
+              label: '导出规则链',
+              icon: 'ant-design:vertical-align-bottom-outlined',
+              onClick: handleExport.bind(null, record),
+            },
             {
             {
               label: '删除',
               label: '删除',
               icon: 'ant-design:delete-outlined',
               icon: 'ant-design:delete-outlined',
@@ -42,24 +72,49 @@
       </template>
       </template>
     </BasicTable>
     </BasicTable>
     <RuleChainModal @register="registerModal" @success="handleSuccess" />
     <RuleChainModal @register="registerModal" @success="handleSuccess" />
+
+    <!-- <ChainDetailDrawer @register="registerDrawer" /> -->
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { columns, encode, searchFormSchema } from './config/config.data';
-  import { deleteRuleChine, getRuleChinsList } from '/@/api/ruleengine/ruleengineApi';
+  import {
+    RuleChainPermisssion,
+    columns,
+    encode,
+    exportJSONFile,
+    searchFormSchema,
+  } from './config/config.data';
+  import {
+    deleteRuleChine,
+    getRuleChinsList,
+    exportRuleChine,
+    settingRootChine,
+    importRuleChine,
+    createRuleChine,
+  } from '/@/api/ruleengine/ruleengineApi';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
-  import { Tag } from 'ant-design-vue';
+  import { Tag, Button, Upload } from 'ant-design-vue';
   import { RuleChainModal } from './component/index';
   import { RuleChainModal } from './component/index';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useRouter } from 'vue-router';
   import { useRouter } from 'vue-router';
+  import { ref } from 'vue';
+  import { isObject, isString } from '/@/utils/is';
+  // import { ChainDetailDrawer } from './chainDetail/index';
+  // import { useDrawer } from '/@/components/Drawer';
 
 
   const [registerTable, { reload, setProps }] = useTable({
   const [registerTable, { reload, setProps }] = useTable({
     title: '规则链库',
     title: '规则链库',
     api: getRuleChinsList,
     api: getRuleChinsList,
+    rowKey: (record) => record.id.id,
     columns,
     columns,
+    pagination: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
     formConfig: {
     formConfig: {
       labelWidth: 120,
       labelWidth: 120,
       schemas: searchFormSchema,
       schemas: searchFormSchema,
@@ -68,19 +123,21 @@
       pageField: 'page',
       pageField: 'page',
       listField: 'data',
       listField: 'data',
     },
     },
-    pagination: true,
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    showIndexColumn: false,
     beforeFetch(params) {
     beforeFetch(params) {
       Reflect.set(params, 'page', params.page - 1);
       Reflect.set(params, 'page', params.page - 1);
       Reflect.set(params, 'sortProperty', 'createdTime');
       Reflect.set(params, 'sortProperty', 'createdTime');
       Reflect.set(params, 'sortOrder', 'DESC');
       Reflect.set(params, 'sortOrder', 'DESC');
       return params;
       return params;
     },
     },
+    rowSelection: {
+      type: 'checkbox',
+      getCheckboxProps: (record: Recordable) => {
+        console.log(record, 'record');
+        return { disabled: record.root };
+      },
+    },
     actionColumn: {
     actionColumn: {
-      width: 200,
+      width: 220,
       title: '操作',
       title: '操作',
       dataIndex: 'action',
       dataIndex: 'action',
       slots: { customRender: 'action' },
       slots: { customRender: 'action' },
@@ -90,12 +147,23 @@
 
 
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
 
 
+  // const [registerDrawer, { openDrawer }] = useDrawer();
+
   const handleSuccess = () => {
   const handleSuccess = () => {
     reload();
     reload();
   };
   };
 
 
   const handleAdd = () => {
   const handleAdd = () => {
-    openModal(true);
+    openModal(true, {
+      text: '创建规则链',
+    });
+  };
+
+  const handleBussinessModal = (record) => {
+    openModal(true, {
+      text: '编辑规则链',
+      record,
+    });
   };
   };
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
@@ -103,13 +171,110 @@
   const router = useRouter();
   const router = useRouter();
 
 
   const handleView = (record: Recordable) => {
   const handleView = (record: Recordable) => {
-    const hasDetailPermission = hasPermission('rule:chain:detail');
+    const hasDetailPermission = hasPermission(RuleChainPermisssion.DETAIL);
     if (hasDetailPermission) {
     if (hasDetailPermission) {
       const boardId = encode(record.id.id);
       const boardId = encode(record.id.id);
       router.push(`/rule/chain/${boardId}`);
       router.push(`/rule/chain/${boardId}`);
     } else createMessage.warning('没有权限');
     } else createMessage.warning('没有权限');
   };
   };
 
 
+  // const handleRowClick = (record) => {
+  //   openDrawer(true, { record });
+  //   console.log('点击行', record);
+  // };
+
+  // const handleDetail = (record) => {
+  //   console.log(record, '详情');
+  // };
+
+  const paseJSON = (string: string) => {
+    let data = null;
+    let flag = false;
+    try {
+      if (!isString(string)) return { flag: false, data };
+      data = JSON.parse(string);
+      flag = true;
+      if (!isObject(data)) flag = false;
+    } catch (error) {}
+    return { flag, data };
+  };
+
+  const isEmptyObject = (value: any) => isObject(value) && !Object.keys(value).length;
+
+  const importLoading = ref<boolean>(false);
+  const handleImport = (data: { file: File }) => {
+    const fileReader = new FileReader();
+
+    fileReader.onload = async () => {
+      const { flag, data } = paseJSON(fileReader.result as string);
+      if (!flag) {
+        createMessage.warning('JSON解析失败,请导入正确的JSON~');
+        return;
+      }
+      try {
+        importLoading.value = true;
+
+        Object.keys(data || {}).forEach((key) => {
+          const value = (data || {})[key];
+          if (value && isEmptyObject(value)) {
+            (data || {})[key] = [];
+          }
+        });
+        const { ruleChain, metadata } = data as any;
+
+        const value = await createRuleChine(ruleChain);
+        const { id } = value;
+
+        const values = {
+          ruleChainId: id,
+          ...metadata,
+        };
+        const rules = await importRuleChine(values);
+
+        rules
+          ? createMessage.success('导入成功~')
+          : createMessage.error('JSON解析失败,请导入正确的JSON~');
+
+        rules && reload();
+      } catch (error) {
+        throw error;
+      } finally {
+        importLoading.value = false;
+      }
+    };
+
+    fileReader.readAsText(data.file, 'utf-8');
+  };
+
+  const handleExport = async (record: Recordable) => {
+    if (!record) return;
+    const { additionalInfo, name, type, firstRuleNodeId, root, debugMode, configuration } =
+      record || {};
+    const { firstNodeIndex, nodes, connections, ruleChainConnections } = await exportRuleChine(
+      record.id.id
+    );
+    const value = {
+      ruleChain: { additionalInfo, name, type, firstRuleNodeId, root, debugMode, configuration },
+      metadata: { firstNodeIndex, nodes, connections, ruleChainConnections },
+    };
+    exportJSONFile(value, name);
+  };
+
+  const handleSettingRoot = async (record) => {
+    setProps({
+      loading: true,
+    });
+    try {
+      await settingRootChine(record.id.id);
+      createMessage.success('设置成功');
+    } finally {
+      setProps({
+        loading: false,
+      });
+    }
+    reload();
+  };
+
   const handleDeleteOrBatchDelete = async (record: Recordable) => {
   const handleDeleteOrBatchDelete = async (record: Recordable) => {
     setProps({
     setProps({
       loading: true,
       loading: true,