feat(frontend):场景联动新增页面编写

 # Whether to open mock
 # Whether to open mock
-VITE_USE_MOCK = false
+VITE_USE_MOCK = true
 
 
 # public path
 # public path
 VITE_PUBLIC_PATH = /
 VITE_PUBLIC_PATH = /
 
 
 # Cross-domain proxy, you can configure multiple
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
 # Please note that no line breaks
-VITE_PROXY = [["/api","http://localhost:8082/api"],["/upload","http://localhost:3300/upload"]]
+# If Use Online Mock,Address Is ["https://www.fastmock.site/mock/87187f474cb8128e88a517a04d77d80c/api"]
+VITE_PROXY = [["/api","http://192.168.10.116:8082/api"],["/upload","http://localhost:3300/upload"]]
+# VITE_PROXY = [["/api","https://www.fastmock.site/mock/87187f474cb8128e88a517a04d77d80c/api]",["/upload","http://localhost:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 
 # Delete console
 # Delete console

+import {defHttp} from "/@/utils/http/axios";
+import {
+  DeviceModel,
+  DeviceProfileModel,
+  DeviceProfileQueryParam,
+  DeviceQueryParam
+} from "/@/api/device/model/deviceModel";
+
+enum DeviceManagerApi {
+  /**
+   * 设备URL
+   */
+  DEVICE_URL = "/device",
+  /**
+   * 设备配置URL
+   */
+  DEVICE_PROFILE_URL = "/deviceProfile"
+}
+
+export const devicePage = (params: DeviceQueryParam) =>{
+  return defHttp.get<DeviceModel>({
+    url: DeviceManagerApi.DEVICE_URL,
+    params
+  });
+}
+
+/**
+ * 分页查询设备配置页面
+ * @param params pageSize page name
+ */
+export const deviceProfilePage = (params: DeviceProfileQueryParam) => {
+  return defHttp.get<DeviceProfileModel>({
+    url: DeviceManagerApi.DEVICE_PROFILE_URL,
+    params
+  });
+}
+/**
+ * 删除设备配置
+ * @param ids 删除的ids
+ */
+export const deleteDeviceProfile = (ids: string[]) => {
+  return defHttp.delete({
+    url: DeviceManagerApi.DEVICE_PROFILE_URL,
+    data:{
+      ids:ids
+    }
+  })
+}
+
+/**
+ * 删除设备
+ * @param ids 删除的ids
+ */
+export const deleteDevice = (ids: string[]) => {
+  return defHttp.delete({
+    url: DeviceManagerApi.DEVICE_URL,
+    data:{
+      ids:ids
+    }
+  })
+}

+import {BasicPageParams} from "/@/api/model/baseModel";
+export enum DeviceState {
+  INACTIVE='INACTIVE',
+  ONLINE='ONLINE',
+  OFFLINE='OFFLINE'
+}
+export enum DeviceTypeEnum{
+  GATEWAY='GATEWAY',
+  DIRECT_CONNECTION='DIRECT_CONNECTION',
+  SENSOR='SENSOR'
+}
+export type DeviceProfileQueryParam = BasicPageParams & DeviceProfileParam
+export type DeviceQueryParam = BasicPageParams & DeviceParam
+export type DeviceParam = {
+  name?:string,
+  deviceProfileId?:string
+}
+export type DeviceProfileParam = {
+  name?: string
+}
+
+export interface DeviceModel{
+  id:string,
+  name:string,
+  deviceInfo:any,
+  activeTime:string,
+  deviceState:DeviceState,
+  profileId:string,
+  label:string,
+  lastConnectTime:string,
+  deviceType:DeviceTypeEnum
+}
+
+export interface DeviceProfileModel{
+  id:string,
+  name:string,
+  transportType:string,
+  createTime:string,
+  description:string
+}

@@ -4,40 +4,61 @@
       <template #toolbar>
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
         <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
       </template>
       </template>
-      <template #config="{record}">
+      <template #config="{ record }">
         <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
         <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
       </template>
       </template>
-      <template #deviceProfile="{record}">
-        <a-button type="link" class="ml-2" @click="goDeviceProfile"> {{record.deviceProfile.name}} </a-button>
+      <template #deviceProfile="{ record }">
+        <a-button type="link" class="ml-2" @click="goDeviceProfile">
+          {{ record.deviceProfile.name }}
+        </a-button>
       </template>
       </template>
-      <template #deviceType = "{record}">
+      <template #deviceType="{ record }">
         <Tag color="success" class="ml-2">
         <Tag color="success" class="ml-2">
-          {{record.deviceType==DeviceTypeEnum.GATEWAY ?'网关设备':
-          record.deviceType==DeviceTypeEnum.DIRECT_CONNECTION  ?'直连设备':'网关子设备'}}
+          {{
+            record.deviceType == DeviceTypeEnum.GATEWAY
+              ? '网关设备'
+              : record.deviceType == DeviceTypeEnum.DIRECT_CONNECTION
+              ? '直连设备'
+              : '网关子设备'
+          }}
         </Tag>
         </Tag>
       </template>
       </template>
-      <template #deviceState = "{record}">
-        <Tag :color="record.deviceState==DeviceState.INACTIVE?'warning':record.deviceState==DeviceState.ONLINE?'success':'error'" class="ml-2">
-          {{record.deviceState==DeviceState.INACTIVE ?'待激活':
-          record.deviceState==DeviceState.ONLINE ?'在线':'离线'}}
+      <template #deviceState="{ record }">
+        <Tag
+          :color="
+            record.deviceState == DeviceState.INACTIVE
+              ? 'warning'
+              : record.deviceState == DeviceState.ONLINE
+              ? 'success'
+              : 'error'
+          "
+          class="ml-2"
+        >
+          {{
+            record.deviceState == DeviceState.INACTIVE
+              ? '待激活'
+              : record.deviceState == DeviceState.ONLINE
+              ? '在线'
+              : '离线'
+          }}
         </Tag>
         </Tag>
       </template>
       </template>
       <template #action="{ record }">
       <template #action="{ record }">
         <TableAction
         <TableAction
           :actions="[
           :actions="[
             {
             {
-              label:'编辑',
+              label: '编辑',
               icon: 'clarity:note-edit-line',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
               onClick: handleEdit.bind(null, record),
             },
             },
             {
             {
-              label:'删除',
+              label: '删除',
               icon: 'ant-design:delete-outlined',
               icon: 'ant-design:delete-outlined',
               color: 'error',
               color: 'error',
               popConfirm: {
               popConfirm: {
                 title: '是否确认删除',
                 title: '是否确认删除',
                 confirm: handleDelete.bind(null, record),
                 confirm: handleDelete.bind(null, record),
-              }
+              },
             },
             },
           ]"
           ]"
         />
         />
@@ -47,93 +68,93 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-import { defineComponent,h} from 'vue';
-import {DeviceState, DeviceTypeEnum} from "/@/api/device/model/deviceModel";
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { useDrawer } from '/@/components/Drawer';
-import ConfigDrawer from './DeviceDrawer.vue';
-import { columns, searchFormSchema } from './config.data';
-import {Modal, Tag} from 'ant-design-vue';
-import { CodeEditor,JsonPreview } from '/@/components/CodeEditor';
-import {useMessage} from "/@/hooks/web/useMessage";
-import {deleteDevice, devicePage} from "/@/api/device/deviceManager";
-import {PageEnum} from "/@/enums/pageEnum";
-import {useGo} from "/@/hooks/web/usePage";
+  import { defineComponent, h } from 'vue';
+  import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import ConfigDrawer from './DeviceDrawer.vue';
+  import { columns, searchFormSchema } from './config.data';
+  import { Modal, Tag } from 'ant-design-vue';
+  import { CodeEditor, JsonPreview } from '/@/components/CodeEditor';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useGo } from '/@/hooks/web/usePage';
 
 
-export default defineComponent({
-  name: 'DeviceManagement',
-  components: { BasicTable, ConfigDrawer, TableAction ,CodeEditor,Tag},
-  setup() {
-    const [registerDrawer, { openDrawer }] = useDrawer();
-    const {createMessage} = useMessage();
-    const go = useGo();
-    const [registerTable, { reload }] = useTable({
-      title: '设备列表',
-      api: devicePage,
-      columns,
-      formConfig: {
-        labelWidth: 120,
-        schemas: searchFormSchema,
-      },
-      useSearchForm: true,
-      showTableSetting: true,
-      bordered: true,
-      showIndexColumn: false,
-      actionColumn: {
-        width: 180,
-        title: '操作',
-        dataIndex: 'action',
-        slots: { customRender: 'action' },
-        fixed: undefined,
-      },
-    });
-
-    function handleCreate() {
-      openDrawer(true, {
-        isUpdate: false,
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: { BasicTable, ConfigDrawer, TableAction, CodeEditor, Tag },
+    setup() {
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const [registerTable, { reload }] = useTable({
+        title: '设备列表',
+        api: devicePage,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 180,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
       });
       });
-    }
 
 
-    function handleEdit(record: Recordable) {
-      openDrawer(true, {
-        record,
-        isUpdate: true,
-      });
-    }
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
 
 
-    function handleDelete(record: Recordable) {
-      let ids = [record.id];
-      deleteDevice(ids).then(()=>{
-        createMessage.success("删除设备成功")
-        handleSuccess()
-      });
-    }
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
 
 
-    function handleSuccess() {
-      reload();
-    }
-    function showData(record: Recordable){
-      Modal.info({
-        title: '当前配置',
-        width:480,
-        content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.deviceInfo)) }),
-      });
-    }
-    function goDeviceProfile(){
-      go(PageEnum.DEVICE_PROFILE)
-    }
-    return {
-      registerTable,
-      registerDrawer,
-      showData,
-      handleCreate,
-      handleEdit,
-      handleDelete,
-      handleSuccess,
-      goDeviceProfile,
-      DeviceTypeEnum,
-      DeviceState
-    };
-  },
-});
+      function handleDelete(record: Recordable) {
+        let ids = [record.id];
+        deleteDevice(ids).then(() => {
+          createMessage.success('删除设备成功');
+          handleSuccess();
+        });
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+      function showData(record: Recordable) {
+        Modal.info({
+          title: '当前配置',
+          width: 480,
+          content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.deviceInfo)) }),
+        });
+      }
+      function goDeviceProfile() {
+        go(PageEnum.DEVICE_PROFILE);
+      }
+      return {
+        registerTable,
+        registerDrawer,
+        showData,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+        goDeviceProfile,
+        DeviceTypeEnum,
+        DeviceState,
+      };
+    },
+  });
 </script>
 </script>

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import {saveOrEditMessageConfig} from "/@/api/message/config";
+  import {useMessage} from "/@/hooks/web/useMessage";
+
+  export default defineComponent({
+    name: 'ConfigDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, {  validate,setFieldsValue,resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          const config = data.record.config;
+          for (const key in config){
+            Reflect.set(data.record, key+'', config[key]);
+          }
+          await setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增消息配置' : '编辑消息配置'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          const { createMessage } = useMessage();
+          setDrawerProps({ confirmLoading: true });
+          let config={};
+          if(values.messageType === 'PHONE_MESSAGE'){
+            config ={
+              "accessKeyId":values.accessKeyId,
+              "accessKeySecret":values.accessKeySecret,
+            }
+          }else if(values.messageType === 'EMAIL_MESSAGE'){
+            config ={
+              "host":values.host,
+              "port":values.port,
+              "username":values.username,
+              "password":values.password,
+            }
+          }
+          Reflect.set(values, 'config', config);
+          let saveMessage = "添加成功";
+          let updateMessage = "修改成功";
+          await saveOrEditMessageConfig(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate)?updateMessage:saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { findDictItemByCode } from '/@/api/system/dict';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '场景联动名称',
+  },
+  {
+    title: '触发方式',
+    // dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '状态',
+    // dataIndex: 'deviceType',
+    width: 200,
+    // slots: { customRender: 'deviceType' },
+  },
+  {
+    title: '描述',
+    // dataIndex: 'deviceProfile.name',
+    width: 180,
+    // slots: { customRender: 'deviceProfile' },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'configName',
+    label: '场景联动名称',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'messageType',
+    label: '所属组织',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'message_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'no1',
+    label: '触发器',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'no2',
+    label: '执行条件',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'no3',
+    label: '执行动作',
+    required: true,
+    component: 'Input',
+  },
+];

+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
+      </template>
+      <template #config="{ record }">
+        <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
+      </template>
+      <template #deviceProfile="{ record }">
+        <a-button type="link" class="ml-2" @click="goDeviceProfile">
+          {{ record.deviceProfile.name }}
+        </a-button>
+      </template>
+      <template #deviceType="{ record }">
+        <Tag color="success" class="ml-2">
+          {{
+            record.deviceType == DeviceTypeEnum.GATEWAY
+              ? '网关设备'
+              : record.deviceType == DeviceTypeEnum.DIRECT_CONNECTION
+              ? '直连设备'
+              : '网关子设备'
+          }}
+        </Tag>
+      </template>
+      <template #deviceState="{ record }">
+        <Tag
+          :color="
+            record.deviceState == DeviceState.INACTIVE
+              ? 'warning'
+              : record.deviceState == DeviceState.ONLINE
+              ? 'success'
+              : 'error'
+          "
+          class="ml-2"
+        >
+          {{
+            record.deviceState == DeviceState.INACTIVE
+              ? '待激活'
+              : record.deviceState == DeviceState.ONLINE
+              ? '在线'
+              : '离线'
+          }}
+        </Tag>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <RuleEngineDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, h } from 'vue';
+  import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import RuleEngineDrawer from './RuleEngineDrawer.vue';
+  import { columns } from './config.data';
+  import { Modal, Tag } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: { BasicTable, RuleEngineDrawer, TableAction, Tag },
+    setup() {
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const [registerTable, { reload }] = useTable({
+        title: '设备列表',
+        api: devicePage,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 180,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+      });
+
+      function handleCreate() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      function handleDelete(record: Recordable) {
+        let ids = [record.id];
+        deleteDevice(ids).then(() => {
+          createMessage.success('删除设备成功');
+          handleSuccess();
+        });
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+      function showData(record: Recordable) {
+        Modal.info({
+          title: '当前配置',
+          width: 480,
+          content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.deviceInfo)) }),
+        });
+      }
+      function goDeviceProfile() {
+        go(PageEnum.DEVICE_PROFILE);
+      }
+      return {
+        registerTable,
+        registerDrawer,
+        showData,
+        handleCreate,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+        goDeviceProfile,
+        DeviceTypeEnum,
+        DeviceState,
+      };
+    },
+  });
+</script>

+<template>
+  <CollapseContainer title="执行条件" style="background-color: #eeeeee">
+    <BasicForm
+      style="display: inline-block"
+      layout="inline"
+      :actionColOptions="{ span: 24 }"
+      :labelWidth="100"
+      :showResetButton="false"
+      :showSubmitButton="false"
+      autoFocusFirstItem
+      labelAlign="left"
+      @register="register"
+    >
+      <template #add="{ field }">
+        <br />
+        <Button
+          style="margin-left: -575px; margin-top: 15px"
+          v-if="Number(field) === 0"
+          @click="add"
+          type="primary"
+          >+新增执行条件</Button
+        >
+        <br />
+        <Button
+          style="margin-left: -415px; margin-top: -15px"
+          v-if="field > 0"
+          @click="add"
+          type="primary"
+          >+新增执行条件</Button
+        >
+        <Button style="margin-left: 10px" v-if="field > 0" @click="del(field)" type="primary"
+          >删除</Button
+        >
+        <br />
+      </template>
+    </BasicForm>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { Input } from 'ant-design-vue';
+  import { Button } from '/@/components/Button';
+  import { useConditionDrawerSchema } from '../config.d';
+
+  export default defineComponent({
+    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
+    setup() {
+      const formData = ref([]);
+      const [register, { appendSchemaByField, removeSchemaByFiled, validate }] = useForm({
+        labelWidth: 100,
+        schemas: useConditionDrawerSchema,
+        actionColOptions: { span: 24 },
+      });
+
+      async function handleSubmit() {
+        try {
+          const data = await validate();
+          formData.value = data;
+          console.log(formData.value);
+        } catch (e) {
+          console.log(e);
+        }
+      }
+      const n = ref(1);
+      function add() {
+        appendSchemaByField(
+          {
+            field: `field${n.value}a`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}b`,
+            component: 'Input',
+            label: '',
+            componentProps: {
+              placeholder: '请输入',
+            },
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}c`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}d`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}e`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}f`,
+            component: 'Input',
+            label: '',
+            componentProps: {
+              placeholder: '请输入',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `${n.value}`,
+            component: 'ApiSelect',
+            label: ' ',
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            slot: 'add',
+          },
+          ''
+        );
+        n.value++;
+      }
+
+      function del(field) {
+        removeSchemaByFiled([
+          `field${field}a`,
+          `field${field}b`,
+          `field${field}c`,
+          `field${field}d`,
+          `field${field}e`,
+          `field${field}f`,
+          `field${field}g`,
+          `field${field}h`,
+          `${field}`,
+        ]);
+        n.value--;
+      }
+
+      return { register, handleSubmit, add, del, formData };
+    },
+  });
+</script>

+<template>
+  <CollapseContainer title="执行动作" style="background-color: #eeeeee">
+    <BasicForm
+      style="display: inline-block"
+      layout="inline"
+      :actionColOptions="{ span: 24 }"
+      :labelWidth="100"
+      :showResetButton="false"
+      :showSubmitButton="false"
+      autoFocusFirstItem
+      labelAlign="left"
+      @register="register"
+    >
+      <template #add="{ field }">
+        <br />
+        <Button
+          style="margin-left: -575px; margin-top: 15px"
+          v-if="Number(field) === 0"
+          @click="add"
+          type="primary"
+          >+新增执行动作</Button
+        >
+        <br />
+        <Button
+          style="margin-left: -415px; margin-top: -15px"
+          v-if="field > 0"
+          @click="add"
+          type="primary"
+          >+新增执行动作</Button
+        >
+        <Button style="margin-left: 10px" v-if="field > 0" @click="del(field)" type="primary"
+          >删除</Button
+        >
+        <br />
+      </template>
+    </BasicForm>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { Input } from 'ant-design-vue';
+  import { Button } from '/@/components/Button';
+  import { useActionDrawerSchema } from '../config.d';
+
+  export default defineComponent({
+    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
+    setup() {
+      const formData = ref([]);
+      const [register, { appendSchemaByField, removeSchemaByFiled, validate }] = useForm({
+        labelWidth: 100,
+        schemas: useActionDrawerSchema,
+        actionColOptions: { span: 24 },
+      });
+
+      async function handleSubmit() {
+        try {
+          const data = await validate();
+          formData.value = data;
+          console.log(formData.value);
+        } catch (e) {
+          console.log(e);
+        }
+      }
+      const n = ref(1);
+      function add() {
+        appendSchemaByField(
+          {
+            field: `field${n.value}a`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}b`,
+            component: 'Input',
+            label: '',
+            componentProps: {
+              placeholder: '请输入',
+            },
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}c`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}d`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}e`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}f`,
+            component: 'Input',
+            label: '',
+            componentProps: {
+              placeholder: '请输入',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `${n.value}`,
+            component: 'ApiSelect',
+            label: ' ',
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            slot: 'add',
+          },
+          ''
+        );
+        n.value++;
+      }
+
+      function del(field) {
+        removeSchemaByFiled([
+          `field${field}a`,
+          `field${field}b`,
+          `field${field}c`,
+          `field${field}d`,
+          `field${field}e`,
+          `field${field}f`,
+          `field${field}g`,
+          `field${field}h`,
+          `${field}`,
+        ]);
+        n.value--;
+      }
+
+      return { register, handleSubmit, add, del, formData };
+    },
+  });
+</script>

+<template>
+  <CollapseContainer title="触发器" style="background-color: #eeeeee">
+    <BasicForm
+      style="display: inline-block"
+      layout="inline"
+      :actionColOptions="{ span: 24 }"
+      :labelWidth="100"
+      :showResetButton="false"
+      :showSubmitButton="false"
+      autoFocusFirstItem
+      labelAlign="left"
+      @register="register"
+    >
+      <template #add="{ field }">
+        <Button
+          style="margin-left: -575px; margin-top: 40px"
+          v-if="Number(field) === 0"
+          @click="add"
+          type="primary"
+          >+新增触发器</Button
+        >
+        <Button
+          style="margin-left: 10px"
+          v-if="Number(field) === 0"
+          @click="handleSubmit"
+          type="primary"
+          >保存</Button
+        >
+        <br />
+        <Button
+          style="margin-left: -456px; margin-top: 20px"
+          v-if="field > 0"
+          @click="add"
+          type="primary"
+          >+新增触发器</Button
+        >
+        <Button style="margin-left: 10px" v-if="field > 0" @click="handleSubmit" type="primary"
+          >保存</Button
+        >
+        <Button style="margin-left: 10px" v-if="field > 0" @click="del(field)" type="primary"
+          >删除</Button
+        >
+        <br />
+      </template>
+    </BasicForm>
+  </CollapseContainer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { Input } from 'ant-design-vue';
+  import { Button } from '/@/components/Button';
+  import { useTriggerDrawerSchema } from '../config.d';
+
+  export default defineComponent({
+    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
+    setup(_, { emit }) {
+      const [register, { appendSchemaByField, removeSchemaByFiled, getFieldsValue }] = useForm({
+        labelWidth: 100,
+        schemas: useTriggerDrawerSchema,
+        actionColOptions: { span: 24 },
+      });
+      const formData = ref([]);
+      async function handleSubmit() {
+        try {
+          const data = await getFieldsValue();
+          formData.value = data;
+          emit('get-formdata', formData.value);
+        } catch (e) {
+          console.log(e);
+        }
+      }
+      const n = ref(1);
+      function add() {
+        appendSchemaByField(
+          {
+            field: `field${n.value}a`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}b`,
+            component: 'Input',
+            label: '',
+            componentProps: {
+              placeholder: '请输入',
+            },
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}c`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}d`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}e`,
+            component: 'ApiSelect',
+            label: '',
+            componentProps: {
+              placeholder: '请选择',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}f`,
+            component: 'Input',
+            label: '',
+            componentProps: {
+              placeholder: '请输入',
+            },
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `${n.value}`,
+            component: 'ApiSelect',
+            label: ' ',
+            colProps: {
+              span: 8,
+              offset: 1,
+            },
+            slot: 'add',
+          },
+          ''
+        );
+        n.value++;
+      }
+
+      function del(field) {
+        removeSchemaByFiled([
+          `field${field}a`,
+          `field${field}b`,
+          `field${field}c`,
+          `field${field}d`,
+          `field${field}e`,
+          `field${field}f`,
+          `field${field}g`,
+          `field${field}h`,
+          `${field}`,
+        ]);
+        n.value--;
+      }
+
+      return { register, handleSubmit, add, del, formData };
+    },
+  });
+</script>

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { findDictItemByCode } from '/@/api/system/dict';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '场景联动名称',
+    dataIndex: 'name',
+    width: 200,
+    slots: { customRender: 'name' },
+  },
+  {
+    title: '触发方式',
+    dataIndex: 'act',
+    width: 200,
+  },
+  {
+    title: '状态',
+    dataIndex: 'stu',
+    width: 200,
+    slots: { customRender: 'stu' },
+  },
+  {
+    title: '描述',
+    dataIndex: 'desc',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '场景联动名称',
+    colProps: { span: 20 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入场景联动名称',
+    },
+  },
+  {
+    field: 'org',
+    label: '所属组织',
+    required: true,
+    colProps: { span: 20 },
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'message_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'nn',
+    label: '描述',
+    // colProps: { span: 20 },
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入描述',
+    },
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'org',
+    label: '所属组织',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      placeholder: '请输入所属组织',
+    },
+    colProps: { span: 7 },
+  },
+  {
+    field: 'name1',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '请输入场景联动状态',
+    },
+  },
+  {
+    field: 's1',
+    label: '状态',
+    component: 'ApiSelect',
+    componentProps: {
+      placeholder: '请选择状态',
+    },
+    colProps: { span: 4 },
+  },
+];
+
+export const useTriggerDrawerSchema: FormSchema[] = [
+  {
+    field: 'field0a',
+    label: '',
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'message_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0b',
+    label: '',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    onChange: (e: any) => {
+      console.log(e);
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0c',
+    label: '',
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'message_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0d',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0e',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0f',
+    component: 'Input',
+    label: '',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: '0',
+    component: 'ApiSelect',
+    label: ' ',
+    colProps: {
+      span: 6,
+    },
+    slot: 'add',
+  },
+];
+
+export const useConditionDrawerSchema: FormSchema[] = [
+  {
+    field: 'field0a',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0b',
+    component: 'Input',
+    label: '',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    onChange: (e: any) => {
+      console.log(e);
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0c',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0d',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0e',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0f',
+    component: 'Input',
+    label: '',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: '0',
+    component: 'ApiSelect',
+    label: ' ',
+    colProps: {
+      span: 6,
+    },
+    slot: 'add',
+  },
+];
+
+export const useActionDrawerSchema: FormSchema[] = [
+  {
+    field: 'field0a',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0b',
+    component: 'Input',
+    label: '',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    onChange: (e: any) => {
+      console.log(e);
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0c',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0d',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0e',
+    component: 'ApiSelect',
+    label: '',
+    componentProps: {
+      placeholder: '请选择',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: 'field0f',
+    component: 'Input',
+    label: '',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    colProps: {
+      span: 6,
+    },
+    required: true,
+  },
+  {
+    field: '0',
+    component: 'ApiSelect',
+    label: ' ',
+    colProps: {
+      span: 6,
+    },
+    slot: 'add',
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="true" @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleAdd"> 新增场景联动 </a-button>
+        <a-button type="error" @click="handleToolbarDel"> 删除 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <SceneLinkAgeDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import SceneLinkAgeDrawer from './useDrawer.vue';
+  import { columns, searchFormSchema } from './config.d';
+  // import { Modal } from 'ant-design-vue';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  // import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
+  import { PageEnum } from '/@/enums/pageEnum';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: { BasicTable, SceneLinkAgeDrawer, TableAction },
+    setup() {
+      const [registerDrawer, { openDrawer }] = useDrawer();
+      // const { createMessage } = useMessage();
+      const go = useGo();
+      const [registerTable, { reload }] = useTable({
+        title: '',
+        // api: devicePage,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+        rowSelection: {
+          type: 'checkbox',
+        },
+        actionColumn: {
+          width: 180,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: undefined,
+        },
+      });
+
+      function handleAdd() {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      }
+      function handleToolbarDel() {
+        return;
+      }
+
+      function handleEdit(record: Recordable) {
+        openDrawer(true, {
+          record,
+          isUpdate: true,
+        });
+      }
+
+      function handleDelete(record: Recordable) {
+        return record;
+        // let ids = [record.id];
+        // deleteDevice(ids).then(() => {
+        //   createMessage.success('删除设备成功');
+        //   handleSuccess();
+        // });
+      }
+
+      function handleSuccess() {
+        reload();
+      }
+      function showData(record: Recordable) {
+        return record;
+        // Modal.info({
+        //   title: '当前配置',
+        //   width: 480,
+        //   content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.deviceInfo)) }),
+        // });
+      }
+      function goDeviceProfile() {
+        go(PageEnum.DEVICE_PROFILE);
+      }
+      return {
+        registerTable,
+        registerDrawer,
+        showData,
+        handleAdd,
+        handleToolbarDel,
+        handleEdit,
+        handleDelete,
+        handleSuccess,
+        goDeviceProfile,
+        DeviceTypeEnum,
+        DeviceState,
+      };
+    },
+  });
+</script>

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="1000px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+    <AddTriggerForm @get-formdata="getFormData" ref="triggerRef" />
+    <AddConditiForm ref="conditionRef" />
+    <AddActionForm ref="actionRef" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.d';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  // import { saveOrEditMessageConfig } from '/@/api/message/config';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  import AddTriggerForm from './addForm/trigger.vue';
+  import AddActionForm from './addForm/doaction.vue';
+  import AddConditiForm from './addForm/condition.vue';
+
+  export default defineComponent({
+    name: 'ConfigDrawer',
+    components: { BasicDrawer, BasicForm, AddTriggerForm, AddActionForm, AddConditiForm },
+    emits: ['success', 'register'],
+    setup() {
+      const isUpdate = ref(true);
+      const getAllFormData = ref(null);
+      const getChildFormData = ref(null);
+      const [registerForm, { resetFields, validateFields, getFieldsValue }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+      });
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增场景联动' : '编辑场景联动'));
+      const getFormData = (v) => {
+        getChildFormData.value = { ...v };
+        // console.log('获取子组件的值', v);
+      };
+      async function handleSubmit() {
+        const res = await validateFields();
+        if (!res) return;
+        const values = await getFieldsValue();
+        getAllFormData.value = { ...values , ...getChildFormData.value};
+        console.log(getAllFormData.value);
+      }
+      return {
+        getFormData,
+        getAllFormData,
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+      };
+    },
+  });
+</script>

@@ -10,125 +10,161 @@
     <BasicForm @register="registerForm">
     <BasicForm @register="registerForm">
       <template #menu="{ model, field }">
       <template #menu="{ model, field }">
         <BasicTree
         <BasicTree
+          ref="tree"
           v-model:value="model[field]"
           v-model:value="model[field]"
           :treeData="treeData"
           :treeData="treeData"
           :replaceFields="{ title: 'menuName' }"
           :replaceFields="{ title: 'menuName' }"
-          :checked-keys="roleMenus"
+          :checkedKeys="roleMenus"
           checkable
           checkable
           toolbar
           toolbar
           title="菜单分配"
           title="菜单分配"
+          @check="handleCheckClick"
         />
         />
       </template>
       </template>
     </BasicForm>
     </BasicForm>
   </BasicDrawer>
   </BasicDrawer>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-import {defineComponent, ref, computed, unref} from 'vue';
-import {BasicForm, useForm} from '/@/components/Form/index';
-import {formSchema} from './role.data';
-import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
-import {BasicTree, TreeItem} from '/@/components/Tree';
+  import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { formSchema } from './role.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
 
 
-const {t} = useI18n(); //加载国际化
+  const { t } = useI18n(); //加载国际化
 
 
-// import { getMenuList } from '/@/api/demo/system';
+  // import { getMenuList } from '/@/api/demo/system';
 
 
-// 加载菜单数据
-import {getMenuList, getMenusIdsByRoleId} from '/@/api/sys/menu';
-import {useI18n} from "/@/hooks/web/useI18n";
-import {RouteItem} from "/@/api/sys/model/menuModel";
-import {saveOrUpdateRoleInfoWithMenu} from "/@/api/system/system";
+  // 加载菜单数据
+  import { getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { RouteItem } from '/@/api/sys/model/menuModel';
+  import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+  export default defineComponent({
+    name: 'RoleDrawer',
+    components: { BasicDrawer, BasicForm, BasicTree },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const { proxy } = getCurrentInstance();
+      const isUpdate = ref<boolean>(true);
+      const treeData = ref<TreeItem[]>([]);
+      const roleMenus = ref<string[]>([]);
+      const allCheckedKeys = ref<string[]>();
+      const roleHalfCheckedKeys = ref<string[]>([]);
+      const roleId = ref<string>('');
+      const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+        labelWidth: 90,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
 
 
-export default defineComponent({
-  name: 'RoleDrawer',
-  components: {BasicDrawer, BasicForm, BasicTree},
-  emits: ['success', 'register'],
-  setup(_, {emit}) {
-    const isUpdate = ref(true);
-    const treeData = ref<TreeItem[]>([]);
-    const roleMenus = ref<string[]>([]);
-    const roleId = ref("");
+      function processChildren(items: RouteItem[]) {
+        items.map((item) => {
+          item.menuName = t(item.meta.title);
+          item.icon = item.meta.icon;
+          item.key = item.id;
+          if (item.children) {
+            processChildren(item.children);
+          }
+        });
+      }
 
 
-    const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({
-      labelWidth: 90,
-      schemas: formSchema,
-      showActionButtonGroup: false,
-    });
+      /**
+       * 根据角色id获取所有的菜单ids----里面包含父级id---会造成回显数据时
+       * 存在父级id则默认勾选所有子级id
+       */
+      function useChildrenIdsRemoveParentId(str, arr) {
+        let index = arr.indexOf(str);
+        arr.splice(index, 1);
+        return arr;
+      }
 
 
-    function processChildren(items: RouteItem[]) {
-      items.map((item) => {
-        item.menuName = t(item.meta.title);
-        item.icon = item.meta.icon;
-        item.key=item.id;
-        if (item.children) {
-          processChildren(item.children);
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        resetFields();
+        roleId.value = '';
+        setDrawerProps({ confirmLoading: false });
+        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+        if (unref(treeData).length === 0) {
+          // 获取全部的菜单
+          const menuListModel = await getMenuList();
+          processChildren(menuListModel);
+          let treeValues: TreeItem[] = [];
+          menuListModel.map((item) => {
+            const data = {
+              menuName: t(item.meta.title),
+              icon: item.meta.icon,
+              key: item.id,
+              children: item.children as any as TreeItem[],
+            };
+            treeValues.push(data);
+          });
+          treeData.value = treeValues;
         }
         }
-      });
-    }
 
 
-    const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
-      resetFields();
-      roleId.value = "";
-      setDrawerProps({confirmLoading: false});
-      // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-      if (unref(treeData).length === 0) {
-        const menuListModel = await getMenuList();
-        processChildren(menuListModel);
-        let treeValues = new Array<TreeItem>();
-        menuListModel.map((item) => {
-          const data = {
-            menuName: t(item.meta.title),
-            icon: item.meta.icon,
-            key: item.id,
-            children: item.children as any as TreeItem[],
+        if (unref(isUpdate)) {
+          if (data.record) {
+            // // 通过角色id去获取角色对应的菜单的ids
+            roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+            console.log(roleMenus.value);
+            console.log(treeData.value);
+            treeData.value.map((m) => {
+              roleMenus.value.map((m1) => {
+                if (m.key === m1) {
+                  proxy.useChildrenIdsRemoveParentId(m1, roleMenus.value);
+                }
+              });
+            });
+            console.log(roleMenus.value);
+            proxy.$refs.tree.setCheckedKeys(roleMenus.value);
+            // console.log(roleMenus.value, 'roleMenus.value');
+            // // TODO: 角色回显问题：待解决
+            roleId.value = data.record.id;
           }
           }
-          treeValues.push(data);
-        })
-        treeData.value = treeValues;
-      }
-      if (data.record) {
-        roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-        console.log(roleMenus.value,"roleMenus.value")
-        roleId.value = data.record.id;
-      }
-      isUpdate.value = !!data?.isUpdate;
-      if (unref(isUpdate)) {
-        setFieldsValue({
-          ...data.record,
-        });
-      }
-    });
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
 
 
-    const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
 
 
-    async function handleSubmit() {
-      try {
-        const values = await validate();
-        setDrawerProps({confirmLoading: true});
-        const req = {
-          id: roleId.value,
-          name: values.name,
-          remark: values.remark,
-          status: values.status,
-          menu: [...values.menu]
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          setDrawerProps({ confirmLoading: true });
+          const req = {
+            id: roleId.value,
+            name: values.name,
+            remark: values.remark,
+            status: values.status,
+            menu: allCheckedKeys.value as string[],
+          };
+          saveOrUpdateRoleInfoWithMenu(req).then(() => {
+            closeDrawer();
+            emit('success');
+          });
+        } finally {
+          setDrawerProps({ confirmLoading: false });
         }
         }
-        saveOrUpdateRoleInfoWithMenu(req).then(()=>{
-          closeDrawer();
-          emit('success');
-        })
-      } finally {
-        setDrawerProps({confirmLoading: false});
       }
       }
-    }
+      // Tree check事件
+      const handleCheckClick = (checkedKeys: string[], { halfCheckedKeys }) => {
+        allCheckedKeys.value = [...checkedKeys, ...halfCheckedKeys];
+        // 父节点
+        roleHalfCheckedKeys.value = halfCheckedKeys;
+      };
 
 
-    return {
-      registerDrawer,
-      registerForm,
-      getTitle,
-      handleSubmit,
-      treeData,
-      roleMenus,
-    };
-  },
-});
+      return {
+        allCheckedKeys,
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+        treeData,
+        roleMenus,
+        handleCheckClick,
+        useChildrenIdsRemoveParentId,
+      };
+    },
+  });
 </script>
 </script>