'合并冯涛代码+设备页面开发'

 # Whether to open mock
-VITE_USE_MOCK = false
+VITE_USE_MOCK = true
 
 # public path
 VITE_PUBLIC_PATH = /

+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
+}

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { MessageEnum } from '/@/enums/messageEnum';
+import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
+// 表格列数据
+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' },
+  },
+  {
+    title: '标签',
+    dataIndex: 'label',
+    width: 180,
+  },
+  {
+    title: '配置信息',
+    dataIndex: 'deviceInfo',
+    width: 180,
+    slots: { customRender: 'config' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    width: 120,
+    slots: { customRender: 'deviceState' },
+  },
+  {
+    title: '最后连接时间',
+    dataIndex: 'lastConnectTime',
+    width: 180,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '网关设备', value: DeviceTypeEnum.GATEWAY },
+        { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
+        { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'deviceState',
+    label: '设备状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待激活', value: DeviceState.INACTIVE },
+        { label: '在线', value: DeviceState.ONLINE },
+        { label: '离线', value: DeviceState.OFFLINE },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+// 弹框配置项
+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: 'platformType',
+    label: '平台类型',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'platform_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    ifShow: ({ values }) => isMessage(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'accessKeyId',
+    label: 'accessKeyId',
+    required: true,
+    component: 'Input',
+    ifShow: ({ values }) => isMessage(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'accessKeySecret',
+    label: 'accessKeySecret',
+    required: true,
+    component: 'Input',
+    ifShow: ({ values }) => isMessage(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'host',
+    label: '服务器地址',
+    defaultValue: 'smtp.163.com',
+    required: true,
+    component: 'Input',
+    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'port',
+    label: '端口',
+    defaultValue: 25,
+    required: true,
+    component: 'InputNumber',
+    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    required: true,
+    component: 'Input',
+    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    required: true,
+    component: 'InputPassword',
+    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
+  },
+  {
+    field: 'config',
+    label: '消息配置',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'id',
+    label: '主键',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  },
+];
+
+export const isMessage = (type: string) => {
+  return type === MessageEnum.IS_SMS;
+};
+export const isEmail = (type: string) => {
+  return type === MessageEnum.IS_EMAIL;
+};

+<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>