ibsp-fg-page 4.0.2

package/src/views/designer/modules/config-interactive/src/components/IbspInteractivceList.vue

@@ -0,0 +1,553 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { Plus, CaretRight } from '@element-plus/icons-vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { reactive, nextTick } from 'vue';
+import { Modal } from '@nextui';
+import { Button } from '@nextui';
+
+import useInteractiveContext from '../hooks/useInteractiveContext'
+import ConditionPopup from './ConditionPopup.vue'
+import IbspActionConfig from './IbspActionConfig.vue'
+import IbspInteractivePanel from './IbspInteractivePanel.vue'
+
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+import { inject } from '@/models/service'
+import Draggable from '@/libs/vuedraggable/vuedraggable.js'
+const props = defineProps({
+  interaction: {
+    type: Array,
+    default: () => ([
+
+    ])
+  },
+  actionMap: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  isOpenActionConfig: {
+    type: Boolean,
+    default: true
+  },
+  openInteractiveList: {
+    type: Function,
+    default: ()=>({})
+  },
+  delConfigCallback: {
+    type: Function,
+    default: ()=>{}
+  }
+})
+
+const emit = defineEmits([
+  'dbClickEvent',
+  'clickActionItem',
+  'clickActionItemName',
+  'dbClickAction',
+  'dbClickWhereAction',
+  'dbClickTargetComponent',
+  'clickAddTarget',
+  'clickWhereAction',
+  'clickAction',
+  'delConfig'
+])
+
+const interactiveService = inject('interactive')
+const conditionPopupRef = ref(null)
+const visibleWherePopup = ref(false)
+const originPosition = reactive({
+  x: 0,
+  y: 0
+})
+const currentConditionPopupState = ref('add')
+let clickEvent = null
+let clickWhere = null
+
+
+const onGetConditionData = (res)=>{
+  if (currentConditionPopupState.value === 'add') {
+    interactiveService.addInteractiveWhereAction(res, clickWhere, clickEvent)
+  } else {
+    clickWhere.where = res
+  }
+  visibleWherePopup.value = false
+}
+const onClickAddWhere = (e, event, whereAction)=>{
+  originPosition.x = e.clientX + 'px'
+  originPosition.y = e.clientY + 'px'
+  currentConditionPopupState.value = 'add'
+  visibleWherePopup.value = true
+  clickEvent = event
+  clickWhere = whereAction
+}
+const onClickWhereExpression = (e, whereAction)=>{
+  currentConditionPopupState.value = 'edit'
+  visibleWherePopup.value = true
+  originPosition.x = e.clientX + 'px'
+  originPosition.y = e.clientY + 'px'
+  clickWhere = whereAction
+  nextTick(() => {
+    conditionPopupRef.value?.setWhere(whereAction?.where)
+  })
+
+}
+
+const onDbClickInteraction = (e, item)=>{
+  emit('dbClickEvent', e, item)
+}
+const clickActionItem = (whereAction, item2, item)=>{
+  emit('clickActionItem', item2, item, whereAction)
+}
+const clickActionItemName = (whereAction, item2, item)=>{
+  if (props.isOpenActionConfig) {
+    item2.updating = true
+  }
+  emit('clickActionItemName', item2, item, whereAction)
+}
+const onClickEvent = (item)=>{
+  interactiveService.setActiveConfig('event', item)
+}
+const onClickWhere = (item)=>{
+  interactiveService.setActiveConfig('where', item)
+  emit('clickWhereAction', item)
+}
+const onClickAddAction = (e, whereAction)=>{
+  interactiveService.setActiveConfig('where', whereAction)
+  props.openInteractiveList('action', e, whereAction)
+}
+const dbClickAction = (e, ...args)=>{
+  emit('dbClickAction', e, ...args)
+}
+const dbClickWhereAction = (e, ...args)=>{
+  emit('dbClickWhereAction', e, ...args)
+}
+const dbClickTargetComponent = (e, ...args)=>{
+  emit('dbClickTargetComponent', e, ...args)
+}
+const clickAddTarget = (...args)=>{
+  emit('clickAddTarget', ...args)
+}
+const clickAction = (...args)=>{
+  emit('clickAction', ...args)
+}
+
+const onContextmenuEvent = (eventItem)=>{
+  interactiveService.setActiveConfig('event', eventItem)
+  useContextmenu(useInteractiveContext('event')).show((item)=>{
+    item.value('event', {
+      eventItem,
+      interactiveList: props.interaction
+    })
+    if (item.id === 'delete') {
+      props.delConfigCallback('event', eventItem)
+    }
+  })
+
+}
+const onContextmenuWhere = (whereActionItem, eventItem)=>{
+  interactiveService.setActiveConfig('where', whereActionItem)
+  useContextmenu(useInteractiveContext('where')).show((item)=>{
+    item.value('where', {
+      whereActionItem,
+      eventItem,
+      interactiveList: props.interaction
+    })
+    if (item.id === 'delete') {
+      props.delConfigCallback('where', whereActionItem)
+    }
+  })
+}
+
+const contextmenuAction = (actionItem, whereActionItem, eventItem)=>{
+  interactiveService.setActiveConfig('action', actionItem)
+  useContextmenu(useInteractiveContext('action')).show((item)=>{
+    item.value('action', {
+      whereActionItem,
+      eventItem,
+      actionItem,
+      interactiveList: props.interaction
+    })
+    if (item.id === 'delete') {
+      props.delConfigCallback('action', actionItem)
+    }
+  })
+}
+
+const contextmenuTarget = (targetComponentItem, actionItem, whereActionItem, eventItem)=>{
+  interactiveService.setActiveConfig('targetComponent', targetComponentItem)
+  useContextmenu(useInteractiveContext('targetComponent')).show((item)=>{
+    const params = {
+      whereActionItem,
+      eventItem,
+      actionItem,
+      targetComponentItem,
+      interactiveList: props.interaction
+    }
+    // 删除需要回调到父组件
+    if (item.id === 'delete') {
+      item.value('targetComponent', params).then(state=>{
+        if (state) {
+          props.delConfigCallback('targetComponent', targetComponentItem)
+        }
+      })
+      return
+    }
+    item.value('targetComponent', params)
+  })
+}
+const whereDragAdd = (e)=>{
+  console.log(e);
+}
+const evenConfigMap = computed(()=>{
+  const events = props.activeComponent?.componentConfig?.event || props.page.events
+  return events.reduce((acc, item)=>{
+    acc[item.key] = item
+    return acc
+  }, {}) || {}
+})
+</script>
+
+<template>
+  <div class="ibsp-interaction-list-config">
+    <el-collapse v-for="interactionItem in interaction"
+                 :key="interactionItem.id"
+                 :id="isOpenActionConfig?`event-${interactionItem.id}`:`panel-${interactionItem.id}`"
+                 :class="{'active': interactiveService.isActive(interactionItem)}"
+                 :model-value="interactionItem.id">
+      <el-collapse-item :name="interactionItem.id">
+        <template #title>
+          <!-- 事件 -->
+          <header class="interaction-header"
+                  @click.stop="onClickEvent(interactionItem)"
+                  @dblclick="(e)=>onDbClickInteraction(e,interactionItem)"
+                  @contextmenu.prevent="onContextmenuEvent(interactionItem)"
+          >
+            <div class="title">
+              <span>{{ evenConfigMap[interactionItem.key].label }}</span>
+            </div>
+            <div class="operation">
+              <Button @click="(e)=>onClickAddWhere(e,interactionItem)">添加条件</Button>
+            </div>
+          </header>
+        </template>
+        <div class="ibsp-interaction-config-item">
+          <main>
+            <!-- 条件 -->
+
+            <Draggable ref="el"
+                       :list="interactionItem.whereActions"
+                       :animation="400"
+                       class="action-drag-container"
+                       group="action-where"
+                       @end="whereDragAdd"
+                       item-key="id">
+              <template #item="{ element: whereAction }">
+                <template v-if="whereAction.where?.value">
+                  <div class="action-where"
+                       :class="{'active':interactiveService.isActive(whereAction)}"
+                       :id="isOpenActionConfig?`whereAction-${whereAction?.id}`:`whereAction-popup-${whereAction?.id}`"
+                  >
+                    <div class="where-name"
+                         style="width: 100%;"
+                         @click.stop="onClickWhere(whereAction)"
+                         @dblclick.stop="(e)=>dbClickWhereAction(e,whereAction,interactionItem)"
+                         @contextmenu.prevent="onContextmenuWhere(whereAction,interactionItem)"
+                    >
+                      <span>{{ whereAction.where.name }}</span>
+                      <Button @click="(e)=>onClickAddWhere(e,interactionItem,whereAction)">添加否则</Button>
+                    </div>
+                    <div class="where-expression" @click.stop="(e)=>onClickWhereExpression(e,whereAction)">
+                      <span class="expression-label"
+                            :style="{
+                              color:whereAction?.where?.value === 'if' ? '#e953ae' : '#9d33fa'
+                            }"
+                      >{{ whereAction.where.label }}</span>
+                      <p v-for="(rowText,index) in whereAction?.where?.expression?.rowLabels" :key="index">
+                        <span class="expression-type" v-if="index>0">{{ whereAction?.where?.whereType === '&&'?'并且':'或者' }}</span>
+                        {{ rowText }}
+                      </p>
+                    </div>
+                    <IbspActionConfig :activeComponent="activeComponent"
+                                      :actionMap="actionMap"
+                                      :page="page"
+                                      :isOpenActionConfig="isOpenActionConfig"
+                                      @clickActionItem="(...args)=>clickActionItem(whereAction,...args)"
+                                      @clickActionItemName="(...args)=>clickActionItemName(whereAction,...args)"
+                                      @clickAddTarget="clickAddTarget"
+                                      @clickAction="(...args)=>clickAction(whereAction,...args)"
+                                      @dbClickAction="(e,action)=>dbClickAction(e,action,whereAction,interactionItem)"
+                                      @contextmenuAction="(action)=>contextmenuAction(action,whereAction,interactionItem)"
+                                      @dbClickTargetComponent="(e,targetComponent, action)=>dbClickTargetComponent(e,targetComponent,action,whereAction,interactionItem)"
+                                      @contextmenuTarget="(targetComponent, action)=>contextmenuTarget(targetComponent,action,whereAction,interactionItem)"
+                                      :actionList="whereAction.list" />
+                    <footer    v-if="isOpenActionConfig">
+                      <Button type="icon"
+                              @click="(e)=>onClickAddAction(e,whereAction)">
+                        <el-icon>
+                          <Plus />
+                        </el-icon>
+                      </Button>
+                    </footer>
+                  </div>
+                </template>
+                <!-- 动作 -->
+                <template v-else-if="whereAction.list">
+                  <IbspActionConfig  :activeComponent="activeComponent"
+                                     :actionMap="actionMap"
+                                     :page="page"
+                                     :isOpenActionConfig="isOpenActionConfig"
+                                     @clickActionItem="(...args)=>clickActionItem(whereAction,...args)"
+                                     @clickActionItemName="(...args)=>clickActionItemName(whereAction,...args)"
+                                     @clickAction="(...args)=>clickAction(whereAction,...args)"
+                                     @clickAddTarget="clickAddTarget"
+                                     @dbClickAction="(e,action)=>dbClickAction(e,action,whereAction,interactionItem)"
+                                     @dbClickTargetComponent="(e,targetComponent, action)=>dbClickTargetComponent(e,targetComponent,action,whereAction,interactionItem)"
+                                     @contextmenuAction="(action)=>contextmenuAction(action,whereAction,interactionItem)"
+                                     @contextmenuTarget="(targetComponent, action)=>contextmenuTarget(targetComponent,action,whereAction,interactionItem)"
+                                     :actionList="whereAction.list" />
+                  <footer v-if="isOpenActionConfig">
+                    <Button type="icon"
+                            @click="(e)=>onClickAddAction(e,whereAction)"
+                    >
+                      <el-icon>
+                        <Plus />
+                      </el-icon>
+                    </Button>
+                  </footer>
+                </template>
+
+
+              </template>
+            </Draggable>
+
+
+          </main>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+
+    <Modal v-model="visibleWherePopup"
+           :style="{width: '60%', height: 'auto'}"
+           title="条件配置面板"
+           hideFooter
+           :originPosition="originPosition"
+           closeDestroyContent
+    >
+      <ConditionPopup ref="conditionPopupRef"
+                      :state="currentConditionPopupState"
+                      :activeComponent="activeComponent"
+                      @onCancel="visibleWherePopup = false"
+                      @onOk="onGetConditionData"
+      />
+    </Modal>
+
+  </div>
+
+</template>
+
+<style scoped lang="less">
+.ibsp-interaction-list-config {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+
+  .el-collapse {
+    margin: 5px 0;
+    border-radius: 6px;
+    --el-collapse-border-color: var(--theme-border-color);
+    :deep(.el-collapse-item__header) {
+      flex-direction: row-reverse;
+      border-bottom: none;
+      border-radius: 6px;
+    }
+
+    .el-collapse-item:last-child {
+      margin-bottom: 0;
+    }
+    .el-collapse-item{
+      border-radius: 6px;
+      border-left: 1px solid var(--theme-border-color);
+      border-right: 1px solid var(--theme-border-color);
+    }
+
+
+    :deep(.el-collapse-item__content) {
+      padding-bottom: 0;
+    }
+
+    .interaction-header {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+
+
+      :deep(.ibsp-next-ui-button) {
+        height: 28px;
+        padding: 0 10px;
+        border-radius: 8px;
+        opacity: 0;
+        margin-right: 10px;
+      }
+
+      &:hover {
+        :deep(.ibsp-next-ui-button) {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:not(:has(.action-drag-container:hover)):hover {
+    border: 1px solid var(--theme-gl-bg);
+  }
+  }
+
+
+  .ibsp-interaction-config-item {
+    height: 100%;
+
+
+    display: flex;
+    flex-direction: column;
+
+    header,
+    :deep(header) {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+
+      .title {
+        font-size: 14px;
+        color: var(--theme-font-color);
+        padding-left: 20px;
+        height: 100%;
+        line-height: 40px;
+        cursor: pointer;
+      }
+
+      :deep(.ibsp-next-ui-button) {
+        height: 28px;
+        padding: 0 10px;
+        border-radius: 8px;
+        opacity: 0;
+      }
+
+      &:hover {
+        :deep(.ibsp-next-ui-button) {
+          opacity: 1;
+        }
+      }
+
+      .operation {
+        padding: 0 10px;
+      }
+
+
+    }
+
+    main {
+      flex: 1;
+      overflow: auto;
+
+    }
+
+
+    footer {
+      flex-shrink: 0;
+      height: 34px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--theme-block-bg) !important;
+
+      :deep(.ibsp-next-ui-button) {
+        width: 24px !important;
+        height: 24px !important;
+
+        border-radius: 6px;
+      }
+      .el-icon{
+        &:hover{
+          color: var(--theme-gl-bg);
+        }
+      }
+    }
+
+    .action-where {
+      display: flex;
+
+      border-top: 1px solid var(--theme-border-color);
+      flex-direction: column;
+
+      &:not(:has(.action-config-item:hover)):hover {
+    border: 1px solid var(--theme-gl-bg);
+  }
+
+      .where-name {
+        padding: 5px 20px;
+        color: var(--theme-font-color);
+        font-size: 14px;
+        display: flex;
+        justify-content: space-between;
+        :deep(.ibsp-next-ui-button) {
+        height: 28px;
+        padding: 0 10px;
+        border-radius: 8px;
+        opacity: 0;
+      }
+
+      &:hover {
+        :deep(.ibsp-next-ui-button) {
+          opacity: 1;
+        }
+      }
+
+      }
+
+      .where-expression {
+        padding: 0 20px;
+        flex: 1;
+        color: var(--theme-font-color);
+        font-size: 14px;
+        line-height: 30px;
+
+        .expression-label {
+          font-weight: bold;
+          float: left;
+          margin-right: 10px;
+        }
+        .expression-type{
+          color: var(--theme-gl-bg);
+        }
+        &:hover p {
+            text-decoration: underline;
+            cursor: pointer;
+        }
+
+        p {
+          margin: 0;
+
+      }
+      }
+    }
+
+
+  }
+
+  .active {
+    border: 1px solid var(--theme-gl-bg) !important;
+  }
+  :deep(.active) {
+    border: 1px solid var(--theme-gl-bg) !important;
+  }
+}
+</style>