feat: 新增规则链库功能

@@ -165,11 +165,39 @@ export const createRuleChine = (params) => {
  * 删除规则链
  */
 
-export const deleteRuleChine = (params) => {
+export const deleteRuleChine = (id) => {
   return defHttp.delete(
     {
       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 }
   );

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

+<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"
       width="30rem"
       @register="register"
-      title="添加规则链"
+      :title="ruleTile"
       @ok="handleSuccess"
       @close="handleClose"
     >
@@ -17,49 +17,73 @@
 </template>
 <script setup lang="ts">
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ExecuteReportRecord } from '/@/api/export/model/exportModel';
   import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema } from './config';
   import { createRuleChine } from '/@/api/ruleengine/ruleengineApi';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref, unref } from 'vue';
 
   const emit = defineEmits(['register', 'success']);
 
   const { createMessage } = useMessage();
 
-  const [registerForm, { getFieldsValue, validate }] = useForm({
+  const ruleTile = ref();
+
+  const [registerForm, { getFieldsValue, validate, setFieldsValue }] = useForm({
     labelWidth: 120,
     schemas: formSchema,
     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 = () => {
     closeModal();
   };
 
   const handleSuccess = async () => {
-    console.log(1, '1', getFieldsValue());
     await validate();
     const record = getFieldsValue();
     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();
     emit('success');
   };

@@ -16,7 +16,7 @@ export const columns: BasicColumn[] = [
     width: 200,
   },
   {
-    title: '是否跟链',
+    title: '是否根链',
     dataIndex: 'root',
     slots: {
       customRender: 'root',
@@ -41,3 +41,20 @@ export const searchFormSchema: FormSchema[] = [
 export const encode = (string: 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',
+}

@@ -6,6 +6,9 @@
           <a-button type="primary" @click="handleAdd"> 新增规则链 </a-button>
         </Authority>
         <!-- <Authority>
+          <a-button type="primary" @click="handleImport"> 导入规则链 </a-button>
+        </Authority> -->
+        <!-- <Authority>
           <Popconfirm
             title="您确定要批量删除数据"
             ok-text="确定"
@@ -23,10 +26,37 @@
         <TableAction
           :actions="[
             {
-              label: '查看',
+              label: '打开规则链',
               icon: 'ant-design:eye-outlined',
               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: '删除',
               icon: 'ant-design:delete-outlined',
@@ -42,12 +72,25 @@
       </template>
     </BasicTable>
     <RuleChainModal @register="registerModal" @success="handleSuccess" />
+
+    <!-- <ChainDetailDrawer @register="registerDrawer" /> -->
   </div>
 </template>
 <script lang="ts" setup>
   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,
+  } from '/@/api/ruleengine/ruleengineApi';
   import { useModal } from '/@/components/Modal';
   import { Authority } from '/@/components/Authority';
   import { Tag } from 'ant-design-vue';
@@ -55,11 +98,19 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useRouter } from 'vue-router';
+  // import { ChainDetailDrawer } from './chainDetail/index';
+  // import { useDrawer } from '/@/components/Drawer';
 
   const [registerTable, { reload, setProps }] = useTable({
     title: '规则链库',
     api: getRuleChinsList,
+    rowKey: (record) => record.id.id,
     columns,
+    pagination: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
     formConfig: {
       labelWidth: 120,
       schemas: searchFormSchema,
@@ -68,17 +119,19 @@
       pageField: 'page',
       listField: 'data',
     },
-    pagination: true,
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    showIndexColumn: false,
     beforeFetch(params) {
       Reflect.set(params, 'page', params.page - 1);
       Reflect.set(params, 'sortProperty', 'createdTime');
       Reflect.set(params, 'sortOrder', 'DESC');
       return params;
     },
+    rowSelection: {
+      type: 'checkbox',
+      getCheckboxProps: (record: Recordable) => {
+        console.log(record, 'record');
+        return { disabled: record.root };
+      },
+    },
     actionColumn: {
       width: 200,
       title: '操作',
@@ -90,12 +143,23 @@
 
   const [registerModal, { openModal }] = useModal();
 
+  // const [registerDrawer, { openDrawer }] = useDrawer();
+
   const handleSuccess = () => {
     reload();
   };
 
   const handleAdd = () => {
-    openModal(true);
+    openModal(true, {
+      text: '创建规则链',
+    });
+  };
+
+  const handleBussinessModal = (record) => {
+    openModal(true, {
+      text: '编辑规则链',
+      record,
+    });
   };
 
   const { createMessage } = useMessage();
@@ -103,13 +167,53 @@
   const router = useRouter();
 
   const handleView = (record: Recordable) => {
-    const hasDetailPermission = hasPermission('rule:chain:detail');
+    const hasDetailPermission = hasPermission(RuleChainPermisssion.DETAIL);
     if (hasDetailPermission) {
       const boardId = encode(record.id.id);
       router.push(`/rule/chain/${boardId}`);
     } else createMessage.warning('没有权限');
   };
 
+  // const handleRowClick = (record) => {
+  //   openDrawer(true, { record });
+  //   console.log('点击行', record);
+  // };
+
+  // const handleDetail = (record) => {
+  //   console.log(record, '详情');
+  // };
+
+  // const handleImport = () => {};
+
+  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) => {
     setProps({
       loading: true,