From e4a124a4332bb8811c40b0b9da40d6d0991faf7f Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Mon, 27 Feb 2023 16:40:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E8=81=94=E5=8A=A8-=E8=A7=A6=E5=8F=91=E8=A7=84?=
 =?UTF-8?q?=E5=88=99-=E5=B1=9E=E6=80=A7=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Scene/Save/Device/ReadProperties.vue      | 82 +++++++++++++++
 .../Scene/Save/Device/ReportEvent.vue         | 66 +++++++++++++
 .../rule-engine/Scene/Save/Device/Type.vue    | 55 +++++++++--
 .../Scene/Save/Device/WriteProperty.vue       | 99 +++++++++++++++++++
 .../components/FunctionCall/FunctionCall.vue  | 38 +++++++
 .../Save/components/FunctionCall/index.ts     |  0
 .../Save/components/Timer/WhenOption.vue      | 98 ++++++++++++++++++
 .../Scene/Save/components/Timer/index.ts      |  3 +
 .../components/{Timer.vue => Timer/index.vue} | 57 +++++++++--
 .../Scene/Save/components/Timer/util.ts       |  9 ++
 .../Scene/Save/components/index.ts            |  3 +
 src/views/rule-engine/Scene/typings.ts        |  2 +-
 12 files changed, 495 insertions(+), 17 deletions(-)
 create mode 100644 src/views/rule-engine/Scene/Save/Device/ReadProperties.vue
 create mode 100644 src/views/rule-engine/Scene/Save/Device/ReportEvent.vue
 create mode 100644 src/views/rule-engine/Scene/Save/Device/WriteProperty.vue
 create mode 100644 src/views/rule-engine/Scene/Save/components/FunctionCall/FunctionCall.vue
 create mode 100644 src/views/rule-engine/Scene/Save/components/FunctionCall/index.ts
 create mode 100644 src/views/rule-engine/Scene/Save/components/Timer/WhenOption.vue
 create mode 100644 src/views/rule-engine/Scene/Save/components/Timer/index.ts
 rename src/views/rule-engine/Scene/Save/components/{Timer.vue => Timer/index.vue} (68%)
 create mode 100644 src/views/rule-engine/Scene/Save/components/Timer/util.ts
 create mode 100644 src/views/rule-engine/Scene/Save/components/index.ts

diff --git a/src/views/rule-engine/Scene/Save/Device/ReadProperties.vue b/src/views/rule-engine/Scene/Save/Device/ReadProperties.vue
new file mode 100644
index 00000000..e81f3bb9
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/Device/ReadProperties.vue
@@ -0,0 +1,82 @@
+<template>
+  <a-row :gutter='[24]'>
+    <a-col :span='10'>
+      <a-form-item
+        name='readProperties'
+        :rules="[{ required: true, message: '请选择属性' }]"
+      >
+        <a-select
+          show-search
+          mode='multiple'
+          max-tag-count='responsive'
+          placeholder='请选择属性'
+          style='width: 100%'
+          v-model:value='readProperties'
+          :options='properties'
+          :filter-option='filterSelectNode'
+          @change='change'
+        />
+      </a-form-item>
+    </a-col>
+    <a-col :span='14'>
+      <a-form-item>定时读取所选属性值</a-form-item>
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang='ts' name='ReadProperties'>
+import { filterSelectNode } from '@/utils/comm'
+import type { PropType } from 'vue'
+
+type Emit = {
+  (e: 'update:value', data: Array<string>): void
+  (e: 'update:action', data: string): void
+}
+
+const props = defineProps({
+  value: {
+    type: Array as PropType<Array<string>>,
+    default: () => []
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  properties: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits<Emit>()
+
+const readProperties = ref<string[]>(props.value)
+
+const change = (values: string[], optionItems: any[]) => {
+  console.log(values, optionItems)
+  const names = optionItems.map((item) => item.name);
+  let extraStr = '';
+  let isLimit = false;
+  let indexOf = 0;
+  extraStr = names.reduce((_prev, next, index) => {
+    if (_prev.length <= 30) {
+      indexOf = index;
+      return index === 0 ? next : _prev + '、' + next;
+    } else {
+      isLimit = true;
+    }
+    return _prev;
+  }, '');
+
+  if (isLimit && names.length - 1 > indexOf) {
+    extraStr += `等${optionItems.length}个属性`;
+  }
+  emit('update:value', values)
+  emit('update:action', `读取 ${extraStr}`)
+}
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/Device/ReportEvent.vue b/src/views/rule-engine/Scene/Save/Device/ReportEvent.vue
new file mode 100644
index 00000000..c127df2d
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/Device/ReportEvent.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-row :futter='[24]'>
+    <a-col :span='10'>
+      <a-select
+        showSearch
+        max-tag-count='responsive'
+        style='width: 100%'
+        placeholder='placeholder'
+        v-model:value='reportKey'
+        :options='properties'
+        :filter-option='filterSelectNode'
+      />
+    </a-col>
+    <a-col :span='14'>定时调用所选属性</a-col>
+    <a-col :span='24' v-if='showTable'>
+
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang='ts' name='ReportEvent'>
+import { filterSelectNode } from '@/utils/comm'
+import type { PropType } from 'vue'
+
+type Emit = {
+  (e: 'update:value', data: Array<string>): void
+  (e: 'update:action', data: string): void
+}
+
+const props = defineProps({
+  value: {
+    type: Array as PropType<Array<string>>,
+    default: () => []
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  properties: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits<Emit>()
+
+const reportKey = ref<Array<string>>([])
+const callData = ref<Array<{}>>()
+
+const showTable = computed(() => {
+  return !!reportKey.value
+})
+
+watch([props.value, props.properties], () => {
+  if (props.value && props.properties?.length) {
+
+  } else {
+
+  }
+}, { immediate: true })
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/Device/Type.vue b/src/views/rule-engine/Scene/Save/Device/Type.vue
index 7d1e0c23..a6d84d3a 100644
--- a/src/views/rule-engine/Scene/Save/Device/Type.vue
+++ b/src/views/rule-engine/Scene/Save/Device/Type.vue
@@ -7,23 +7,33 @@
       >
         <TopCard
           :label-bottom='true'
-          :options='options'
+          :options='topOptions'
           v-model:value='formModel.operator'
         />
       </a-form-item>
-      <Timer v-if='showTimer' />
+      <Timer v-if='showTimer' v-model:value='formModel.timer' />
+      <ReadProperties v-if='showReadProperty' v-model:value='formModel.readProperties' v-model:action='optionCache.action' :properties='readProperties' />
+      <a-form-item
+        v-if='showWriteProperty'
+        name='writeProperties'
+        :rules="[{ required: true, message: '请输入修改值' }]"
+      >
+        <WriteProperty v-model:value='formModel.writeProperties' v-model:action='optionCache.action' :properties='writeProperties' />
+      </a-form-item>
     </a-form>
   </div>
 </template>
 
 <script setup lang='ts'>
 
-import TopCard from '@/views/rule-engine/Scene/Save/components/TopCard.vue'
+import { TopCard, Timer } from '@/views/rule-engine/Scene/Save/components'
 import { getImage } from '@/utils/comm'
 import { metadataType } from '@/views/rule-engine/Scene/typings'
 import type { PropType } from 'vue'
 import { TypeEnum } from '@/views/rule-engine/Scene/Save/Device/util'
-import Timer from '../components/Timer.vue'
+import ReadProperties from './ReadProperties.vue'
+import ReportEvent from './ReportEvent.vue'
+import WriteProperty from './WriteProperty.vue'
 
 const props = defineProps({
   metadata: {
@@ -34,12 +44,19 @@ const props = defineProps({
 
 const formModel = reactive({
   operator: 'online',
+  timer: {},
+  readProperties: [],
+  writeProperties: {}
+})
+
+const optionCache = reactive({
+  action: ''
 })
 
 const readProperties = ref<any[]>([])
 const writeProperties = ref<any[]>([])
 
-const options = computed(() => {
+const topOptions = computed(() => {
   const baseOptions = [
     {
       label: '设备上线',
@@ -59,9 +76,9 @@ const options = computed(() => {
 
   if (props.metadata.properties?.length) {
     const _properties = props.metadata.properties
-    readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read'))
-    writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write'))
-    const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report'))
+    readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read')).map(item => ({...item, label: item.name, value: item.id }))
+    writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write')).map(item => ({...item, label: item.name, value: item.id }))
+    const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report')).map(item => ({...item, label: item.name, value: item.id }))
 
     if (readProperties.value.length) {
       baseOptions.push(TypeEnum.readProperty)
@@ -84,8 +101,28 @@ const options = computed(() => {
   return baseOptions
 })
 
+const showReadProperty = computed(() => {
+  return formModel.operator === TypeEnum.readProperty.value
+})
+
+const showWriteProperty = computed(() => {
+  return formModel.operator === TypeEnum.writeProperty.value
+})
+
+const showReportEvent = computed(() => {
+  return formModel.operator === TypeEnum.reportEvent.value
+})
+
+const showInvokeFunction = computed(() => {
+  return formModel.operator === TypeEnum.invokeFunction.value
+})
+
 const showTimer = computed(() => {
-  return ['readProperty', 'writeProperty', 'invokeFunction'].includes(formModel.operator)
+  return [
+    TypeEnum.readProperty.value,
+    TypeEnum.writeProperty.value,
+    TypeEnum.invokeFunction.value
+  ].includes(formModel.operator)
 })
 
 </script>
diff --git a/src/views/rule-engine/Scene/Save/Device/WriteProperty.vue b/src/views/rule-engine/Scene/Save/Device/WriteProperty.vue
new file mode 100644
index 00000000..e75f2071
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/Device/WriteProperty.vue
@@ -0,0 +1,99 @@
+<template>
+  <a-row :futter='[24, 24]'>
+    <a-col :span='10'>
+      <a-select
+        showSearch
+        style='width: 100%'
+        placeholder='请选择属性'
+        v-model:value='reportKey'
+        :options='properties'
+        :filter-option='filterSelectNode'
+        @change='change'
+      />
+    </a-col>
+    <a-col :span='14'>
+      <span style='line-height: 32px;padding-left: 24px'>
+        定时调用所选属性
+      </span>
+    </a-col>
+    <a-col :span='24' v-if='showTable'>
+
+    </a-col>
+  </a-row>
+</template>
+
+<script setup lang='ts' name='WriteProperties'>
+import { filterSelectNode } from '@/utils/comm'
+import type { PropType } from 'vue'
+
+type Emit = {
+  (e: 'update:value', data: Record<string, any>): void
+  (e: 'update:action', data: string): void
+}
+
+const props = defineProps({
+  value: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => []
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  properties: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits<Emit>()
+
+const reportKey = ref<string>()
+const callData = ref<Array<Record<string, any>>>()
+
+const callDataOptions = computed(() => {
+  const _valueKeys = Object.keys(props.value)
+  if (_valueKeys.length) {
+    return _valueKeys.map(key => {
+      const item: any = props.properties.find((p: any) => p.id === key)
+      if (item) {
+        return {
+          id: item.id,
+          name: item.name,
+          type: item.valueType ? item.valueType.type : '-',
+          format: item.valueType ? item.valueType.format : undefined,
+          options: item.valueType ? item.valueType.element : undefined,
+          value: props.value[key]
+        }
+      }
+      return {
+        id: key,
+        name: key,
+        type: '',
+        format: undefined,
+        options: undefined,
+        value: props.value[key]
+      }
+    })
+  }
+  return []
+})
+
+const showTable = computed(() => {
+  return !!reportKey.value
+})
+
+const change = (v: string, option: any) => {
+  console.log(v, option)
+  const _data = {
+    [v]: undefined
+  }
+  callData.value = [_data]
+  emit('update:value', _data)
+}
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/components/FunctionCall/FunctionCall.vue b/src/views/rule-engine/Scene/Save/components/FunctionCall/FunctionCall.vue
new file mode 100644
index 00000000..74c99134
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/components/FunctionCall/FunctionCall.vue
@@ -0,0 +1,38 @@
+<template>
+  <a-table
+    :data-source='dataSource'
+    :columns='columns'
+  >
+    <template #bodyCell="{ column, record, index }">
+      <template v-if='column.key'>
+
+      </template>
+    </template>
+  </a-table>
+</template>
+
+<script setup lang='ts' name='FunctionCall'>
+
+const dataSource = []
+
+const columns = [
+  {
+    title: '参数名称',
+    dataIndex: 'name'
+  },
+  {
+    title: '参数名称',
+    dataIndex: 'name'
+  },
+  {
+    title: '值',
+    dataIndex: 'value',
+    align: 'center',
+    width: 260
+  },
+]
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/components/FunctionCall/index.ts b/src/views/rule-engine/Scene/Save/components/FunctionCall/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/rule-engine/Scene/Save/components/Timer/WhenOption.vue b/src/views/rule-engine/Scene/Save/components/Timer/WhenOption.vue
new file mode 100644
index 00000000..345f3fb1
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/components/Timer/WhenOption.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class='timer-when-warp'>
+    <div :class='["when-item-option", allActive ? "active" : ""]' @click='() => change(0)'>每天</div>
+    <div
+      v-for='item in timeOptions'
+      :class='["when-item-option", rowKeys.includes(item.value) ? "active" : ""]'
+      @click='() => change(item.value)'
+    >
+      {{ item.label }}
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts' name='WhenOption'>
+import type { PropType } from 'vue'
+import { numberToString } from './util'
+
+type Emit = {
+  (e: 'update:value', data: Array<number>):void
+}
+
+const props = defineProps({
+  value: {
+    type: Array as PropType<Array<number>>,
+    default: []
+  },
+  type: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits<Emit>()
+
+const timeOptions = ref<Array<{ label: string, value: number}>>([])
+const rowKeys = ref<Array<number>>(props.value)
+
+const change = (number: number) => {
+  const _keys = new Set(rowKeys.value)
+  if (number === 0) { // 全选
+    _keys.clear()
+  } else {
+    if (_keys.has(number)) {
+      _keys.delete(number)
+    } else {
+      _keys.add(number)
+    }
+  }
+  rowKeys.value = [..._keys.values()]
+  emit('update:value', rowKeys.value)
+}
+
+const allActive = computed(() => {
+  return !rowKeys.value.length
+})
+
+watch(() => props.type, () => {
+  const isMonth = props.type === 'month'
+  const day = isMonth ? 31 : 7
+  change(0)
+  timeOptions.value = new Array(day)
+    .fill(1)
+    .map((_, index) => {
+      const _value = index + 1
+      return {
+        label: isMonth ? `${_value}号` : numberToString[_value],
+        value: _value
+      }
+    })
+}, { immediate: true })
+
+</script>
+
+<style scoped lang='less'>
+.timer-when-warp {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  padding: 16px;
+  background: #fafafa;
+
+  .when-item-option {
+    width: 76px;
+    padding: 6px 0;
+    text-align: center;
+    background: #fff;
+    border: 1px solid #e6e6e6;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .active {
+    color: #233dd7;
+    border-color: #233dd7;
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/components/Timer/index.ts b/src/views/rule-engine/Scene/Save/components/Timer/index.ts
new file mode 100644
index 00000000..79dacbf1
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/components/Timer/index.ts
@@ -0,0 +1,3 @@
+import Timer from './index.vue'
+
+export default Timer
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/components/Timer.vue b/src/views/rule-engine/Scene/Save/components/Timer/index.vue
similarity index 68%
rename from src/views/rule-engine/Scene/Save/components/Timer.vue
rename to src/views/rule-engine/Scene/Save/components/Timer/index.vue
index 5f4977f6..03054f3e 100644
--- a/src/views/rule-engine/Scene/Save/components/Timer.vue
+++ b/src/views/rule-engine/Scene/Save/components/Timer/index.vue
@@ -17,12 +17,26 @@
         button-style='solid'
       />
     </a-form-item>
-    <a-form-item v-if='showCron' name='cron'>
-      <a-input placeholder='corn表达式' v-model='formModel.cron' />
+    <a-form-item v-if='showCron' name='cron' :rules="[
+      { max: 64, message: '最多可输入64个字符' },
+      {
+        validator: async (_, v) => {
+           if (v) {
+             if (!isCron(v)) {
+               return Promise.reject(new Error('请输入正确的cron表达式'));
+             }
+           } else {
+             return Promise.reject(new Error('请输入cron表达式'));
+           }
+           return Promise.resolve();
+        }
+      }
+    ]">
+      <a-input placeholder='corn表达式' v-model:value='formModel.cron' />
     </a-form-item>
     <template v-else>
       <a-form-item name='when'>
-
+        <WhenOption v-model:value='formModel.when' :type='formModel.trigger' />
       </a-form-item>
       <a-form-item name='mod'>
         <a-radio-group
@@ -38,9 +52,10 @@
     </template>
     <a-space v-if='showOnce' style='display: flex;gap: 24px'>
       <a-form-item :name="['once', 'time']">
-        <a-time-picker valueFormat='HH:mm:ss' v-model:value='formModel.once.time' style='width: 100%' format='HH:mm:ss' />
+        <a-time-picker valueFormat='HH:mm:ss' v-model:value='formModel.once.time' style='width: 100%'
+                       format='HH:mm:ss' />
       </a-form-item>
-      <a-form-item> 执行一次 </a-form-item>
+      <a-form-item> 执行一次</a-form-item>
     </a-space>
     <a-space v-if='showPeriod' style='display: flex;gap: 24px'>
       <a-form-item>
@@ -89,9 +104,17 @@
 <script setup lang='ts' name='Timer'>
 import type { PropType } from 'vue'
 import moment from 'moment'
+import WhenOption from './WhenOption.vue'
+import { cloneDeep } from 'lodash-es'
+import type { OperationTimer } from '../../../typings'
+import { isCron } from '@/utils/regular'
 
 type NameType = string[] | string
 
+type Emit = {
+  (e: 'update:value', data: OperationTimer): void
+}
+
 const props = defineProps({
   name: {
     type: [String, Array] as PropType<NameType>,
@@ -103,13 +126,15 @@ const props = defineProps({
   }
 })
 
-const formModel = reactive({
+const emit = defineEmits<Emit>()
+
+const formModel = reactive<OperationTimer>({
   trigger: 'week',
   when: [],
   mod: 'period',
   cron: undefined,
   once: {
-    time: ''
+    time: moment(new Date()).format('HH:mm:ss')
   },
   period: {
     from: moment(new Date()).startOf('day').format('HH:mm:ss'),
@@ -119,6 +144,8 @@ const formModel = reactive({
   }
 })
 
+Object.assign(formModel, props.value)
+
 const showCron = computed(() => {
   return formModel.trigger === 'cron'
 })
@@ -131,6 +158,22 @@ const showPeriod = computed(() => {
   return formModel.trigger !== 'cron' && formModel.mod === 'period'
 })
 
+watch(() => formModel, () => {
+  const cloneValue = cloneDeep(formModel)
+  if (cloneValue.trigger === 'cron') {
+    delete cloneValue.when
+  } else {
+    delete cloneValue.cron
+  }
+
+  if (cloneValue.mod === 'period') {
+    delete cloneValue.once
+  } else {
+    delete cloneValue.period
+  }
+  emit('update:value', cloneValue)
+}, { deep: true })
+
 </script>
 
 <style scoped lang='less'>
diff --git a/src/views/rule-engine/Scene/Save/components/Timer/util.ts b/src/views/rule-engine/Scene/Save/components/Timer/util.ts
new file mode 100644
index 00000000..861859ba
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/components/Timer/util.ts
@@ -0,0 +1,9 @@
+export const numberToString = {
+  1: '星期一',
+  2: '星期二',
+  3: '星期三',
+  4: '星期四',
+  5: '星期五',
+  6: '星期六',
+  7: '星期日',
+};
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/Save/components/index.ts b/src/views/rule-engine/Scene/Save/components/index.ts
new file mode 100644
index 00000000..504835c4
--- /dev/null
+++ b/src/views/rule-engine/Scene/Save/components/index.ts
@@ -0,0 +1,3 @@
+export { default as Timer } from './Timer'
+export { default as TopCard } from './TopCard.vue'
+export { default as TriggerWay } from './TriggerWay.vue'
\ No newline at end of file
diff --git a/src/views/rule-engine/Scene/typings.ts b/src/views/rule-engine/Scene/typings.ts
index f1cfdcc9..eff7cdbb 100644
--- a/src/views/rule-engine/Scene/typings.ts
+++ b/src/views/rule-engine/Scene/typings.ts
@@ -93,7 +93,7 @@ export enum ActionAlarmMode {
 export interface OperationTimerPeriod {
   from: string;
   to: string;
-  every: string[];
+  every: number;
   unit: keyof typeof TimeUnit;
 }
 

From 72c72888dfea7f57d416f2904ed975cafbc32b5d Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 27 Feb 2023 17:49:40 +0800
Subject: [PATCH 2/2] =?UTF-8?q?update:=20=E5=BA=94=E7=94=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=B7=BB=E5=8A=A0=E9=9B=86=E6=88=90=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E3=80=81cardbox=E7=BB=84=E4=BB=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=81=AE=E7=BD=A9=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/apply.ts                       |  23 +-
 src/components/CardBox/index.vue              |  49 +++--
 .../system/Apply/Save/components/EditForm.vue |  76 +++++--
 .../Apply/Save/components/MenuDialog.vue      |  49 -----
 .../Apply/Save/components/RequestTable.vue    |   1 +
 src/views/system/Apply/Save/typing.d.ts       |   4 +-
 .../system/Apply/componenets/MenuDialog.vue   | 196 ++++++++++++++++++
 src/views/system/Apply/index.vue              |  21 +-
 8 files changed, 323 insertions(+), 96 deletions(-)
 delete mode 100644 src/views/system/Apply/Save/components/MenuDialog.vue
 create mode 100644 src/views/system/Apply/componenets/MenuDialog.vue

diff --git a/src/api/system/apply.ts b/src/api/system/apply.ts
index 9bf97443..b3b4c218 100644
--- a/src/api/system/apply.ts
+++ b/src/api/system/apply.ts
@@ -4,17 +4,30 @@ import server from '@/utils/request';
 // 获取应用管理列表
 export const getApplyList_api = (data: any) => server.post(`/application/_query/`, data)
 // 修改应用状态
-export const changeApplyStatus_api = (id:string,data: any) => server.put(`/application/${id}`, data)
+export const changeApplyStatus_api = (id: string, data: any) => server.put(`/application/${id}`, data)
 // 删除应用
-export const delApply_api = (id:string) => server.remove(`/application/${id}`)
+export const delApply_api = (id: string) => server.remove(`/application/${id}`)
 
 
 
 // 获取组织列表
 export const getDepartmentList_api = () => server.get(`/organization/_all/tree`);
 // 获取组织列表
-export const getAppInfo_api = (id:string) => server.get(`/application/${id}`);
+export const getAppInfo_api = (id: string) => server.get(`/application/${id}`);
 // 新增应用
-export const addApp_api = (data:object) => server.post(`/application`, data);
+export const addApp_api = (data: object) => server.post(`/application`, data);
 // 更新应用
-export const updateApp_api = (id:string, data:object) => server.put(`/application/${id}`, data);
\ No newline at end of file
+export const updateApp_api = (id: string, data: object) => server.put(`/application/${id}`, data);
+
+
+// ---------集成菜单-----------
+
+// 获取所属系统
+export const getOwner_api = (data: object) => server.post(`/menu/owner`, data);
+export const getOwnerStandalone_api = (appId: string, data: object) => server.post(`/application/${appId}/_/api/menu/owner`, data);
+
+// 获取对应系统菜单树
+export const getOwnerTree_api = (owner: string) => server.post(`/menu/owner/tree/${owner}`, {});
+export const getOwnerTreeStandalone_api = (appId: string, owner: string) => server.post(`/application/${appId}/_/api/menu/owner/tree/${owner}`, {});
+// 保存集成菜单
+export const saveOwnerMenu_api = (owner: string, appId: string, data: object) => server.patch(`/menu/owner/${owner}/${appId}/_all`, data);
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index dee607c8..bfe32ab1 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -40,11 +40,19 @@
                     </div>
                 </div>
             </div>
+            <div class="card-mask" v-if="props.hasMark">
+                <div class="mask-content">
+                    <slot name="mark" />
+                </div>
+            </div>
         </div>
 
         <!-- 按钮 -->
         <slot name="bottom-tool">
-            <div v-if="showTool && actions && actions.length" class="card-tools">
+            <div
+                v-if="showTool && actions && actions.length"
+                class="card-tools"
+            >
                 <div
                     v-for="item in actions"
                     :key="item.key"
@@ -53,8 +61,8 @@
                         delete: item.key === 'delete',
                     }"
                 >
-                <slot name="actions" v-bind="item"></slot>
-                <!-- <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
+                    <slot name="actions" v-bind="item"></slot>
+                    <!-- <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
                     <a-button :disabled="item.disabled">
                         <DeleteOutlined v-if="item.key === 'delete'" />
                         <template v-else>
@@ -79,10 +87,14 @@
 </template>
 
 <script setup lang="ts">
-import { SearchOutlined, CheckOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+import {
+    SearchOutlined,
+    CheckOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons-vue';
 import BadgeStatus from '@/components/BadgeStatus/index.vue';
 import { StatusColorEnum } from '@/utils/consts.ts';
-import type { ActionsType } from '@/components/Table/index.vue'
+import type { ActionsType } from '@/components/Table/index.vue';
 import { PropType } from 'vue';
 
 type EmitProps = {
@@ -90,14 +102,14 @@ type EmitProps = {
     (e: 'click', data: Record<string, any>): void;
 };
 
-type TableActionsType  = Partial<ActionsType>
+type TableActionsType = Partial<ActionsType>;
 
 const emit = defineEmits<EmitProps>();
 
 const props = defineProps({
     value: {
         type: Object as PropType<Record<string, any>>,
-        default: () => {}
+        default: () => {},
     },
     showStatus: {
         type: Boolean,
@@ -124,8 +136,12 @@ const props = defineProps({
     },
     active: {
         type: Boolean,
-        default: false
-    }
+        default: false,
+    },
+    hasMark: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const handleClick = () => {
@@ -167,9 +183,13 @@ const handleClick = () => {
         position: relative;
         border: 1px solid #e6e6e6;
 
-        &.hover {
+        &:hover {
             cursor: pointer;
             box-shadow: 0 0 24px rgba(#000, 0.1);
+
+            .card-mask {
+                visibility: visible;
+            }
         }
 
         &.active {
@@ -269,12 +289,12 @@ const handleClick = () => {
             width: 100%;
             height: 100%;
             color: #fff;
-            background-color: rgba(#000, 0);
+            background-color: rgba(#000, .5);
             visibility: hidden;
             cursor: pointer;
             transition: all 0.3s;
 
-            > div {
+            .mask-content {
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -282,11 +302,6 @@ const handleClick = () => {
                 height: 100%;
                 padding: 0 !important;
             }
-
-            &.show {
-                background-color: rgba(#000, 0.5);
-                visibility: visible;
-            }
         }
     }
 
diff --git a/src/views/system/Apply/Save/components/EditForm.vue b/src/views/system/Apply/Save/components/EditForm.vue
index 7ba9c83b..2e0be394 100644
--- a/src/views/system/Apply/Save/components/EditForm.vue
+++ b/src/views/system/Apply/Save/components/EditForm.vue
@@ -710,6 +710,7 @@
                         <a-select
                             v-model:value="form.data.apiServer.roleIdList"
                             :options="form.roleIdList"
+                            mode="multiple"
                             placeholder="请选中角色"
                         ></a-select>
                         <PermissionButton
@@ -869,7 +870,7 @@
                                 'sso',
                                 'configuration',
                                 'oauth2',
-                                'client_id',
+                                'clientId',
                             ]"
                             :rules="[
                                 {
@@ -1003,7 +1004,6 @@
                                 v-model:file-list="form.fileList"
                                 accept=".jpg,.png,.jfif,.pjp,.pjpeg,.jpeg"
                                 :maxCount="1"
-                                name="avatar"
                                 list-type="picture-card"
                                 :show-upload-list="false"
                                 :headers="{
@@ -1022,6 +1022,7 @@
                                             .logoUrl
                                     "
                                     alt="avatar"
+                                    width="100%"
                                 />
                                 <div v-else>
                                     <AIcon
@@ -1295,6 +1296,7 @@
                         <a-form-item label="角色">
                             <a-select
                                 v-model:value="form.data.sso.roleIdList"
+                                mode="multiple"
                                 :options="form.roleIdList"
                                 placeholder="请选中角色"
                             ></a-select>
@@ -1372,7 +1374,10 @@
         </a-button>
 
         <div class="dialog">
-            <MenuDialog ref="dialogRef" />
+            <MenuDialog
+                ref="dialogRef"
+                :mode="routeQuery.id ? 'edit' : 'add'"
+            />
         </div>
     </div>
 </template>
@@ -1389,7 +1394,7 @@ import {
 } from '@/api/system/apply';
 import FormLabel from './FormLabel.vue';
 import RequestTable from './RequestTable.vue';
-import MenuDialog from './MenuDialog.vue';
+import MenuDialog from '../../componenets/MenuDialog.vue';
 import { getImage } from '@/utils/comm';
 import type { formType, dictType, optionsType } from '../typing';
 import { getRoleList_api } from '@/api/system/user';
@@ -1400,32 +1405,34 @@ import {
     UploadFile,
 } from 'ant-design-vue';
 import { randomString } from '@/utils/utils';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, difference } from 'lodash';
+import { useMenuStore } from '@/store/menu';
 
 const emit = defineEmits(['changeApplyType']);
 const routeQuery = useRoute().query;
+const menuStory = useMenuStore();
 
 const deptPermission = 'system/Department';
 const rolePermission = 'system/Role';
 
 const dialogRef = ref();
+// 初始化表单
 const initForm: formType = {
     name: '',
     provider: 'internal-standalone',
     integrationModes: [],
-    config: '',
     description: '',
     page: {
         // 页面集成
         baseUrl: '',
         routeType: 'hash',
-        parameters: [{ label: '', value: '' }],
+        parameters: [],
     },
     apiClient: {
         // API客户端
         baseUrl: '',
-        headers: [{ label: '', value: '' }], // 请求头
-        parameters: [{ label: '', value: '' }], // 请求参数
+        headers: [], // 请求头
+        parameters: [], // 请求参数
         authConfig: {
             // API客户端
             type: 'oauth2', // 类型, 可选值：none, bearer, oauth2, basic, other
@@ -1447,13 +1454,12 @@ const initForm: formType = {
     },
     apiServer: {
         // API服务
-        appId: '',
+        appId: randomString(16),
         secureKey: randomString(), // 密钥
         redirectUri: '', // 重定向URL
         roleIdList: [], // 角色列表
         orgIdList: [], // 部门列表
         ipWhiteList: '', // IP白名单
-        signature: '', // 签名方式, 可选值：MD5，SHA256
         enableOAuth2: false, // 是否启用OAuth2
     },
     sso: {
@@ -1497,9 +1503,9 @@ const initForm: formType = {
 const formRef = ref<FormInstance>();
 const form = reactive({
     data: { ...initForm },
-    integrationModesISO: [] as string[],
-    roleIdList: [] as optionsType,
-    orgIdList: [] as dictType,
+    integrationModesISO: [] as string[], // 接入方式镜像  折叠面板使用
+    roleIdList: [] as optionsType, // 角色列表
+    orgIdList: [] as dictType, // 组织列表
 
     errorNumInfo: {
         page: new Set(),
@@ -1509,7 +1515,6 @@ const form = reactive({
     },
 
     fileList: [] as any[],
-    fileUrlList: [] as string[],
     uploadLoading: false,
 });
 // 接入方式的选项
@@ -1591,6 +1596,7 @@ function init() {
         () => form.data.provider,
         (n) => {
             emit('changeApplyType', n);
+            if (routeQuery.id) return;
             if (n === 'wechat-webapp' || n === 'dingtalk-ent-app') {
                 form.data.integrationModes = ['ssoClient'];
                 form.integrationModesISO = ['ssoClient'];
@@ -1616,6 +1622,7 @@ function getInfo(id: string) {
                 (item: any) => item.value,
             ),
         } as formType;
+        form.data.apiServer && (form.data.apiServer.appId = id);
     });
 }
 // 获取角色列表
@@ -1651,6 +1658,23 @@ function clickAddItem(data: string[], target: string) {
 function clickSave() {
     formRef.value?.validate().then(() => {
         const params = cloneDeep(form.data);
+        // 删除多余的参数
+        const list = ['page', 'apiClient', 'apiServer', 'ssoClient'];
+        difference(list, params.integrationModes).forEach((item) => {
+            if (item === 'ssoClient') {
+                // @ts-ignore
+                delete params['sso'];
+            }
+            delete params[item];
+        });
+        clearNullProp(params);
+        if (
+            params.provider === 'internal-standalone' &&
+            params.integrationModes.includes('page')
+        ) {
+            // @ts-ignore
+            delete params.page.parameters;
+        }
 
         if (
             params.provider === 'internal-standalone' &&
@@ -1674,15 +1698,19 @@ function clickSave() {
         const request = routeQuery.id
             ? updateApp_api(routeQuery.id as string, params)
             : addApp_api(params);
-        request.then((resp) => {
+        request.then((resp: any) => {
             if (resp.status === 200) {
                 const isPage = params.integrationModes.includes('page');
                 if (isPage) {
                     form.data = params;
-                    dialogRef.value && dialogRef.value.openDialog();
+                    dialogRef.value &&
+                        dialogRef.value.openDialog(
+                            routeQuery.id || resp.result.id,
+                            form.data.provider,
+                        );
                 } else {
                     message.success('保存成功');
-                    jumpPage('system/Apply');
+                    menuStory.jumpPage('system/Apply');
                 }
             }
         });
@@ -1722,9 +1750,15 @@ function changeBackUpload(info: UploadChangeParam<UploadFile<any>>) {
 function test(...args: any[]) {
     console.log('test:', args);
 }
-
-function jumpPage(arg0: string) {
-    throw new Error('Function not implemented.');
+function clearNullProp(obj: object) {
+    if (typeof obj !== 'object') return;
+    for (const prop in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+            const val = obj[prop];
+            if (val === '') delete obj[prop];
+            else if (typeof val === 'object') clearNullProp(obj[prop]);
+        }
+    }
 }
 </script>
 
diff --git a/src/views/system/Apply/Save/components/MenuDialog.vue b/src/views/system/Apply/Save/components/MenuDialog.vue
deleted file mode 100644
index b706bf1e..00000000
--- a/src/views/system/Apply/Save/components/MenuDialog.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <a-modal
-        v-model:visible="dialog.visible"
-        title="集成菜单"
-        width="600px"
-        @ok="dialog.handleOk"
-        class="edit-dialog-container"
-        :confirmLoading="dialog.loading"
-        cancelText="取消"
-        okText="确定"
-    >
-    
-    
-    
-    </a-modal>
-</template>
-
-<script setup lang="ts">
-
-
-const emits = defineEmits(['confirm']);
-// 弹窗相关
-const dialog = reactive({
-    visible: false,
-    loading: false,
-
-    handleOk: () => {
-        emits('confirm');
-    },
-    /**
-     * 设置表单类型
-     * @param type 弹窗类型
-     * @param defaultForm 表单回显对象
-     */
-    changeVisible: () => {
-        dialog.visible = true;
-    }
-});
-// 将打开弹窗的操作暴露给父组件
-defineExpose({
-    openDialog: dialog.changeVisible,
-});
-
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/system/Apply/Save/components/RequestTable.vue b/src/views/system/Apply/Save/components/RequestTable.vue
index 888d5e76..4c8ff9ee 100644
--- a/src/views/system/Apply/Save/components/RequestTable.vue
+++ b/src/views/system/Apply/Save/components/RequestTable.vue
@@ -88,6 +88,7 @@ const tableData = computed(() => {
     return props.value.slice((current.value - 1) * 10, current.value * 10);
 });
 
+if(props.value.length < 1) addRow()
 watch(
     () => props.value,
     (n, o) => {
diff --git a/src/views/system/Apply/Save/typing.d.ts b/src/views/system/Apply/Save/typing.d.ts
index af68633c..2bc07a2f 100644
--- a/src/views/system/Apply/Save/typing.d.ts
+++ b/src/views/system/Apply/Save/typing.d.ts
@@ -19,7 +19,7 @@ export type formType = {
     name: string;
     provider: applyType;
     integrationModes: string[];
-    config: string;
+    config?: string;
     description: string;
     page: { // 页面集成
         baseUrl: string,
@@ -54,7 +54,7 @@ export type formType = {
         roleIdList: string[], // 角色列表	
         orgIdList: string[], // 部门列表	
         ipWhiteList: string, // IP白名单	
-        signature: 'MD5' | 'SHA256' | '', // 签名方式, 可选值：MD5，SHA256
+        signature?: 'MD5' | 'SHA256' | '', // 签名方式, 可选值：MD5，SHA256
         enableOAuth2: boolean, // 是否启用OAuth2	
     },
     sso: { // 统一单点登陆集成
diff --git a/src/views/system/Apply/componenets/MenuDialog.vue b/src/views/system/Apply/componenets/MenuDialog.vue
new file mode 100644
index 00000000..bc4a5d7a
--- /dev/null
+++ b/src/views/system/Apply/componenets/MenuDialog.vue
@@ -0,0 +1,196 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        title="集成菜单"
+        width="600px"
+        @ok="dialog.handleOk"
+        @cancel="dialog.cancel"
+        class="edit-dialog-container"
+        :confirmLoading="dialog.loading"
+        cancelText="取消"
+        okText="确定"
+    >
+        <a-select
+            v-model:value="form.checkedSystem"
+            @change="(value) => value && getTree(value as string)"
+            style="width: 200px"
+            placeholder="请选择集成系统"
+        >
+            <a-select-option
+                v-for="item in form.systemList"
+                :value="item.value"
+                >{{ item.label }}</a-select-option
+            >
+        </a-select>
+
+        <p style="margin: 20px 0 0 0" v-show="form.menuTree.length > 0">当前集成菜单</p>
+        <a-tree
+            v-model:checkedKeys="form.checkedMenu"
+            v-model:expandedKeys="form.expandedKeys"
+            checkable
+            :tree-data="form.menuTree"
+            :fieldNames="{ key: 'id', title: 'name' }"
+            @check="treeCheck"
+        >
+            <template #title="{ name }">
+                <span>{{ name }}</span>
+            </template>
+        </a-tree>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { optionItemType } from '@/views/system/DataSource/typing';
+import { applyType } from '../Save/typing';
+import {
+    getOwner_api,
+    getOwnerStandalone_api,
+    getOwnerTree_api,
+    getOwnerTreeStandalone_api,
+    saveOwnerMenu_api,
+} from '@/api/system/apply';
+import { CheckInfo } from 'ant-design-vue/lib/vc-tree/props';
+import { useMenuStore } from '@/store/menu';
+import { message } from 'ant-design-vue';
+import { getMenuTree_api } from '@/api/system/menu';
+
+const menuStory = useMenuStore();
+
+const props = defineProps<{
+    mode: 'add' | 'edit';
+}>();
+// 弹窗相关
+const dialog = reactive({
+    visible: false,
+    loading: false,
+
+    handleOk: () => {
+        const items = filterTree(form.menuTree, [
+            ...form.checkedMenu,
+            ...form.half,
+        ]);
+        if (form.checkedSystem) {
+            if (items && items.length !== 0) {
+                saveOwnerMenu_api('iot', form.id, items).then((resp) => {
+                    if (resp.status === 200) {
+                        message.success('操作成功');
+                        dialog.visible = false;
+                    }
+                });
+            } else {
+                message.warning('请勾选配置菜单');
+            }
+        } else {
+            message.warning('请选择所属系统');
+        }
+    },
+    cancel: () => {
+        if (props.mode === 'add')
+            menuStory.jumpPage('system/Apply/Save', {}, { id: form.id });
+        dialog.visible = false;
+    },
+    changeVisible: (id: string, provider: applyType) => {
+        form.id = id;
+        form.provider = provider;
+        form.checkedSystem = undefined;
+        form.checkedMenu = [];
+        dialog.visible = true;
+
+        if (id) {
+            getSystemList();
+            getMenus();
+        }
+    },
+});
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible,
+});
+
+const form = reactive({
+    id: '',
+    checkedSystem: '' as undefined | string,
+    checkedMenu: [] as string[],
+    expandedKeys: [] as string[],
+    half: [] as string[],
+
+    provider: '' as applyType,
+    systemList: [] as optionItemType[],
+    menuTree: [] as any[],
+});
+/**
+ * 与集成系统关联的菜单
+ * @param params
+ */
+function getTree(params: string) {
+    const api =
+        form.provider === 'internal-standalone'
+            ? getOwnerTreeStandalone_api(form.id, params)
+            : getOwnerTree_api(params);
+    api.then((resp: any) => {
+        form.menuTree = resp.result;
+        form.expandedKeys = resp.result.map((item: any) => item.id);
+    });
+}
+/**
+ * 获取当前用户可访问菜单
+ */
+function getMenus() {
+    const params = {
+        terms: [
+            {
+                column: 'appId',
+                value: form.id,
+            },
+        ],
+    };
+    getMenuTree_api(params).then((resp: any) => {
+        if (resp.status === 200) {
+            form.menuTree = resp.result;
+            const keys = resp.result.map((item: any) => item.id) as string[];
+            form.expandedKeys = keys;
+            form.checkedMenu = keys;
+        }
+    });
+}
+/**
+ * 获取集成系统选项
+ */
+function getSystemList() {
+    const api =
+        form.provider === 'internal-standalone'
+            ? getOwnerStandalone_api(form.id, ['iot'])
+            : getOwner_api(['iot']);
+
+    api.then((resp: any) => {
+        if (resp.status === 200) {
+            form.systemList = resp.result.map((item: string) => ({
+                label: item,
+                value: item,
+            }));
+        }
+    });
+}
+// 树选中事件
+function treeCheck(checkedKeys: any, e: CheckInfo) {
+    form.checkedMenu = checkedKeys;
+    form.half = e.halfCheckedKeys as string[];
+}
+//过滤节点-默认带上父节点
+function filterTree(nodes: any[], list: any[]) {
+    if (!nodes?.length) {
+        return nodes;
+    }
+    return nodes.filter((it) => {
+        // 不符合条件的直接砍掉
+        if (list.indexOf(it.id) <= -1) {
+            return false;
+        }
+        // 符合条件的保留，并且需要递归处理其子节点
+        it.children = filterTree(it.children, list);
+        return true;
+    });
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/Apply/index.vue b/src/views/system/Apply/index.vue
index aa8d8021..d5b557f9 100644
--- a/src/views/system/Apply/index.vue
+++ b/src/views/system/Apply/index.vue
@@ -42,6 +42,7 @@
                             enabled: 'success',
                             disabled: 'error',
                         }"
+                        hasMark
                     >
                         <template #img>
                             <slot name="img">
@@ -118,6 +119,14 @@
                                 </PermissionButton>
                             </a-tooltip>
                         </template>
+
+                        <template #mark>
+                            <AIcon
+                                type="EyeOutlined"
+                                style="font-size: 24px"
+                                @click="() => table.toSave(slotProps.id, true)"
+                            />
+                        </template>
                     </CardBox>
                 </template>
 
@@ -151,11 +160,15 @@
                 </template>
             </JTable>
         </div>
+        <div class="dialogs">
+            <MenuDialog ref="dialogRef" mode="edit" />
+        </div>
     </page-container>
 </template>
 
 <script setup lang="ts" name="Apply">
 import PermissionButton from '@/components/PermissionButton/index.vue';
+import MenuDialog from './componenets/MenuDialog.vue';
 import {
     getApplyList_api,
     changeApplyStatus_api,
@@ -251,9 +264,10 @@ const columns = [
     },
 ];
 const params = ref({});
-const search = (newParams: any) => (params.value = {...newParams});
+const search = (newParams: any) => (params.value = { ...newParams });
 
 const tableRef = ref();
+const dialogRef = ref();
 const table = {
     refresh: () => {
         tableRef.value.reload();
@@ -344,7 +358,10 @@ const table = {
                     title: '集成菜单',
                 },
                 icon: 'MenuUnfoldOutlined',
-                onClick: () => {},
+                onClick: () => {
+                    dialogRef.value &&
+                        dialogRef.value.openDialog(data.id, data.provider);
+                },
             });
         // 有api操作权限
         if (otherServers.includes('apiServer'))