ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-outline/src/index.vue

@@ -0,0 +1,256 @@
+<script setup>
+import { computed, nextTick, onActivated } from 'vue';
+import useComponentContext, { groupBoxContext } from '@ibsp-component-lib/src/componentLibs/hooks/useComponentContext';
+
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+import useComponentStore from '@/stores/useComponentStore';
+import { executeCommand } from '@/models/command'
+let componentStore = useComponentStore()
+const props = defineProps({
+  page: {
+    type: Object,
+    default: ()=>({})
+  }
+})
+let treeData = computed(() => {
+  return [
+    {
+      id: 'POPUP',
+      label: '弹窗',
+      componentIcon: {
+        type: 'html',
+        value: '<path d="M0 160v704c0 35.3 28.7 64 64 64h896c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64z m944 704H80c-8.8 0-16-7.2-16-16V360c0-4.4 3.6-8 8-8h880c4.4 0 8 3.6 8 8v488c0 8.8-7.2 16-16 16z m8-576H72c-4.4 0-8-3.6-8-8V176c0-8.8 7.2-16 16-16h864c8.8 0 16 7.2 16 16v104c0 4.4-3.6 8-8 8z" p-id="3286"></path><path d="M848 256c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zM720 256c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zM592 256c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z" p-id="3287"></path>'
+      },
+      children: componentStore.componentData.filter((item) => item.componentMetaId === 'other-popup')
+    },
+    {
+      id: 'LAYOUT',
+      label: '布局',
+      componentIcon: {
+        type: 'html',
+        value: '<path d="M781.69183326 208.63562012H242.36749291c-9.3092649 0-17.22930884 3.30743408-23.84417772 9.86792016-6.57531762 6.62475562-9.87780761 14.54479957-9.87780761 23.85406446v101.12640405h606.74853539V242.36254883c0-9.3092649-3.30743408-17.22930884-9.87780761-23.85406518-6.62475562-6.56048608-14.54479957-9.86792016-23.84417701-9.86791944h0.01977491z m33.70220971 573.04632568V410.87854004H444.59063721v404.50561547h337.08142114c9.29937744 0 17.22436547-3.30743408 23.844177-9.87780762 6.57531762-6.60992408 9.87780761-14.54479957 9.87780762-23.84417772v0.01977563z m-438.20782447 33.70220971v-404.50561548h-168.53576684v370.80340577c0 9.31420898 3.30249 17.26391602 9.87286353 23.82934546 6.61486816 6.61981225 14.53491211 9.89263916 23.84417772 9.89263917h134.81872559v-0.01977492zM242.34771729 141.21142578h539.32434106c27.89318824 0 51.74725342 9.87780761 71.50286865 29.62353539 19.74572778 19.75561523 29.61364722 43.58001733 29.61364722 71.48803711v539.33917189c0 27.89318824-9.86792016 51.73736596-29.61364722 71.4929812-19.75561523 19.75561523-43.60968041 29.63342286-71.50286865 29.63342285H242.34771729c-27.91296386 0-51.74725342-9.87780761-71.50286866-29.63342285C151.08923339 833.39953614 141.21142578 809.55041503 141.21142578 781.66217017V242.32794165C141.21142578 214.41497779 151.08923339 190.59057641 170.84484863 170.83496117 190.60046386 151.08923339 214.43475342 141.21142578 242.34771729 141.21142578z" p-id="2283"></path>'
+      },
+      children: componentStore.queryComponentDataTree(null, {
+        filter: (item) => item.componentMetaId !== 'other-popup' && item.showInPrecis
+      })
+    }
+  ]
+})
+
+let onSelectComponent = (node) => {
+  componentStore.componentDataMap[node.id].click()
+}
+
+let getComponentName = (nodeId) => {
+  let node = componentStore.componentDataMap[nodeId]
+  return node?.name
+}
+
+const menuList = [
+  {
+    label: '显示',
+    value: (component)=>{
+      const id = component.id
+      if (!componentStore.componentDataMap[id]?.show) {
+        componentStore.componentDataMap[id].show = true;
+      }
+
+    },
+    icon: {
+      type: 'svg',
+      value: '显示'
+    }
+  },
+  {
+    label: '隐藏',
+    value: (component)=>{
+      const id = component.id
+      if (componentStore.componentDataMap[id]?.show) {
+        componentStore.componentDataMap[id].show = false;
+      }
+    },
+    icon: {
+      type: 'svg',
+      value: '隐藏'
+    }
+  }
+
+]
+
+let onContextmenu = (e, id) => {
+  const component = componentStore.componentDataMap[id]
+  component.click(component)
+
+  const menu = useComponentContext(component, props.page, ['hide'])
+  useContextmenu([...menu, ...menuList]).show((item)=>{
+    item.value(component, props.page)
+  })
+}
+
+
+const allowDrop = (dragNode, dropNode, type) => {
+  if (dropNode.level < 3 && type !== 'inner') {
+    return false;
+  }
+  if (dropNode.data.type !== 'layout' && type === 'inner') {
+    return false;
+  }
+  return true;
+}
+
+const allowDrag = (node) => {
+  if (node.level < 3) {
+    return false;
+  }
+  return true;
+}
+
+const sortComponent = (dragIndex, dropIndex, dropType) => {
+  let temp = componentStore.componentData[dragIndex], appendIndex = dropType === 'before' ? dropIndex + 1 : dropIndex;
+  if (dragIndex < dropIndex) {
+    componentStore.componentData.splice(appendIndex, 0, temp);
+    componentStore.componentData.splice(dragIndex, 1);
+  } else {
+    componentStore.componentData.splice(dragIndex, 1);
+    componentStore.componentData.splice(appendIndex, 0, temp);
+  }
+}
+
+const nodeDrop = (dragNode, dropNode, dropType, ev) => {
+  let parentId = dragNode.data.parentId;
+  let dragNodeComponent = componentStore.componentData.find(item => item.id === dragNode.data.id),
+    dragIndex = componentStore.componentData.findIndex(item => item.id === dragNode.data.id);
+
+  if (dropType === 'before' || dropType === 'after') {
+    let dropIndex = componentStore.componentData.findIndex(item => item.id === dropNode.data.id);
+    sortComponent(dragIndex, dropIndex, dropType)
+    dragNodeComponent.parentId = dropNode.data.parentId;
+  }
+  if (dropType === 'inner') {
+    let lastComponent = componentStore.componentData.findLast(item => item.parentId === dropNode.data.id);
+    let lastIndex = lastComponent ? componentStore.componentData.findIndex(item => item.id === lastComponent.id) : -1;
+    if (lastIndex > -1) {
+      if (lastIndex > dragIndex) {
+        sortComponent(dragIndex, lastIndex, 'after')
+      } else {
+        sortComponent(dragIndex, lastIndex, 'before')
+      }
+    }
+    dragNodeComponent.parentId = dropNode.data.id;
+  }
+
+  componentStore.componentData.forEach(
+    item => {
+      if (item.id === dragNode.data.id && parentId !== item.parentId) {
+        item.position.x = 0;
+        item.position.y = 0;
+      }
+    }
+  )
+}
+
+const currentNodeKey = computed(()=>{
+  return componentStore.activeComponent?.id
+})
+
+const customClassName = (data)=>{
+  if (Object.hasOwn(data, 'show') && data.show === false) {
+    return 'no-visible'
+  }
+}
+
+onActivated(()=>{
+  nextTick(()=>{
+    setTimeout(() => {
+      document.getElementById(`outline-${currentNodeKey.value}`)?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
+    }, 100);
+  })
+})
+
+</script>
+
+<template>
+  <div class="outline-index">
+    <el-tree
+      draggable
+      node-key="id"
+      :data="treeData"
+      :default-expand-all="true"
+      :expand-on-click-node="false"
+      :allow-drop="allowDrop"
+      :allow-drag="allowDrag"
+      @node-drop="nodeDrop"
+      :props="{
+        class: customClassName
+      }"
+      @node-contextmenu="(e , node) => onContextmenu(e, node.id)"
+      @node-click="onSelectComponent"
+      :current-node-key="currentNodeKey"
+    >
+      <template #default="{ data }">
+        <div class="tree-item"
+             :id="`outline-${data.id}`"
+             :class="{ 'no-visible': !componentStore.componentDataMap[data.id]?.show && data.id !=='LAYOUT' && data.id !=='POPUP' }">
+          <div class="tree-item-icon">
+            <SvgIcon style="margin-right: 5px;"
+                     v-if="data.componentIcon"
+                     :icon="data.componentIcon" />
+          </div>
+          <span class="visible">{{ getComponentName(data.id) || data.label }}</span>
+        </div>
+      </template>
+
+    </el-tree>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.outline-index {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .el-tree{
+    background:transparent;
+    padding: 0 10px;
+  }
+  .tree-item{
+    display: flex;
+    align-items: center;
+    .tree-item-icon{
+      display: flex;
+      width: 24px;
+      align-items: center;
+      height: 100%;
+      justify-content: center;
+    }
+  }
+  .visible {
+    color: var(--theme-font-color);
+    cursor: pointer;
+    width: 100%;
+    display: inline-block;
+  }
+  .no-visible {
+    filter: brightness(0.5);
+    opacity: .5;
+  }
+  :deep(.el-tree-node){
+    color: var(--theme-font-color);
+    user-select: none;
+    .el-tree-node__content{
+      padding: 3px 0;
+      line-height: 24px;
+      border-radius: 2px;
+      &:hover{
+        background: var(--theme-next-btn-bg);
+      }
+    }
+    &.is-current{
+      >.el-tree-node__content{
+        background-color: var(--theme-gl-bg) !important;
+      }
+    }
+  }
+}
+</style>

package/src/views/designer/modules/ibsp-page/index.ts

@@ -0,0 +1,4 @@
+import IbspPage from './src/index.vue'
+
+
+export default IbspPage

package/src/views/designer/modules/ibsp-page/pageList.service.ts

@@ -0,0 +1,3 @@
+export default class PageListService {
+
+}

package/src/views/designer/modules/ibsp-page/src/index.vue

@@ -0,0 +1,393 @@
+<script setup>
+import { computed, nextTick, onActivated, onMounted, reactive, ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { filter, toArray, foreach } from 'tree-lodash';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Button } from '@nextui';
+
+import { savePageInfo, deletePage, getPageListApi } from '@/api/ibsp-bg-page'
+import { useContextmenu } from '@/components/nextui/Contextmenu';
+import IbspSearchInput from '@/components/ibsp/IbspSearchInput.vue';
+import SvgIcon from '@/components/globals/SvgIcon.vue';
+import IbspTree from '@/components/ibsp/IbspTree.vue';
+import usePlatformStore from '@/stores/usePlatformStore';
+const platformStore = usePlatformStore();
+const ibspTreeRef = ref(null);
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+  loadPage: {
+    type: Function,
+    default: () => {}
+  },
+  page: {
+    type: Object,
+    default: () => {}
+  },
+  appId: {
+    type: String,
+    default: ''
+  },
+  app: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const inputRef = ref(null)
+const data = ref([])
+const selectedKey = ref(route.params.id);
+const searchValue = ref('');
+
+const onSelectPage = (node) => {
+  if (node.temporary) return;
+  selectedKey.value = node.idPageVersion;
+  router.push('/' + node.idPageVersion);
+  props.loadPage(node.idPageVersion);
+};
+
+const getPageList = async ()=>{
+  const res = await getPageListApi({
+    appId: props.page.appId || window.appId,
+    pageName: '',
+    pageNo: 1,
+    pageSize: 100
+  })
+  data.value = res.data?.records || []
+  nextTick(()=>{
+    ibspTreeRef.value.setCurrentKey(selectedKey.value)
+  })
+}
+
+const getPageLength = ()=>{
+  let num = 0;
+  foreach(data.value, ()=>{
+    num++;
+  })
+  return num + 1
+}
+
+
+const readerData = computed(()=>{
+  if (!searchValue.value?.trim?.()) {
+    return data.value
+  }
+  return toArray(data.value).filter((item) => {
+    return item.pageName.includes(searchValue.value);
+  });
+})
+
+
+const scrollIntoView = (id = selectedKey.value) => {
+  nextTick(()=>{
+    setTimeout(() => {
+      document.getElementById(`tree-${id}`)?.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'center' });
+    }, 100);
+  })
+}
+
+const addPage = async (obj)=>{
+  const res = await savePageInfo({
+    'appId': props.page.appId,
+    'id': '',
+    'pageName': '',
+    'status': 'ZYZT-QY',
+    'seqNum': '123',
+    'pagePid': '',
+    'remark': '234324',
+    'pageType': 'YMLX-KSGJ',
+    'coverId': '',
+    'coverUrl': '',
+    'createMethod': 'CJFS-NEW',
+    'createRelation': '',
+    'createRelationContent': '',
+    'pageUrl': '',
+    'idSysResource': '',
+    'designerVersion': 'PT-YMSJQ-BB-4.X',
+    ...obj
+  })
+  return res.success
+
+}
+let changeState = false
+let addState = false
+const inputAddPage = async (currentData, node)=>{
+  if (!currentData.label.trim()) {
+    ElMessage.error('页面名称不能为空')
+    if (currentData.temporary) {
+      const children = Array.isArray(node.parent.data) ? node.parent.data : node.parent.data.children
+      if (!children?.length) return
+      const index = children.findIndex((item)=>item.idPageVersion === currentData.idPageVersion)
+      children.splice(index, 1)
+      return
+    }
+    currentData.isEdit = false
+    return
+
+  }
+  if (addState) return
+  addState = true
+  const res = await addPage({
+    seqNum: currentData.seqNum,
+    pageName: currentData.pgeName || currentData.label,
+    pagePid: currentData.pagePid,
+    id: currentData.id,
+    idSysResource: currentData.idSysResource
+  })
+  if (res) {
+    ElMessage.success('成功')
+    getPageList()
+  }
+  nextTick(()=>{
+    addState = false
+  })
+}
+const onChangeEdit = (data, node)=>{
+  changeState = true
+  inputAddPage(data, node)
+
+}
+const onChangeEditBlur = (data, node)=>{
+  if (changeState) {
+    changeState = false
+    return
+  }
+  inputAddPage(data, node)
+}
+
+
+const onContextmenu = (data, node) => {
+  useContextmenu([
+    {
+      label: '新增下级',
+      click() {
+        const seqNum = getPageLength()
+        const idPageVersion = Math.random().toString(36)
+        const label = `页面${seqNum}`
+        const node = {
+          idPageVersion,
+          label,
+          isEdit: true,
+          temporary: true,
+          pagePid: data.id,
+          seqNum
+        }
+        if (data.children?.length) {
+          data.children.push(node)
+        } else {
+          data.children = reactive([node])
+        }
+
+        nextTick(()=>{
+          scrollIntoView(idPageVersion)
+          inputRef.value.focus()
+        })
+      },
+      icon: {
+        type: 'svg',
+        value: '新增页面'
+      }
+    },
+    {
+      label: '删除',
+      click() {
+        ElMessageBox.confirm('此操作将永久删除该页面, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const children = Array.isArray(node.parent.data) ? node.parent.data : node.parent.data?.children || []
+          const currentIndex = children.findIndex(item=>item.id === data.id)
+          deletePage([data.id]).then((res)=>{
+            if (res.success) {
+              ElMessage.success('删除成功')
+              getPageList()
+              if (selectedKey.value === data.idPageVersion) {
+                if (currentIndex > 0) {
+                  onSelectPage(children[currentIndex - 1])
+                } else {
+                  if (!Array.isArray(node.parent.data) && node.parent?.data) {
+                    onSelectPage(node.parent?.data)
+                  }
+                }
+              }
+            }
+          })
+        })
+          .catch(() => {
+            console.log('取消删除');
+          });
+
+      },
+      icon: {
+        type: 'svg',
+        value: '删除'
+      }
+    },
+    {
+      label: '重命名',
+      click() {
+        data.isEdit = true
+        data.label = data.pageName
+        nextTick(()=>{
+          inputRef.value.focus()
+        })
+      },
+      icon: {
+        type: 'svg',
+        value: '复制'
+      }
+    }
+  ]).show((item)=>{
+    item.click()
+  })
+};
+const onClickAddPage = () => {
+  const seqNum = getPageLength()
+  data.value.push({
+    idPageVersion: Math.random().toString(36),
+    label: '页面' + seqNum,
+    isEdit: true,
+    temporary: true,
+    pagePid: '',
+    seqNum
+  })
+  scrollIntoView()
+  nextTick(()=>{
+    inputRef.value.focus()
+  })
+};
+
+watch(()=>props.appId, async(val)=>{
+  if (props.page.appId) {
+    selectedKey.value = props.page.versionId
+    await getPageList()
+    scrollIntoView()
+  }
+}, {
+  immediate: true
+})
+
+onActivated(async()=>{
+  scrollIntoView()
+})
+
+</script>
+
+<template>
+  <div class="page-list-index">
+    <header>
+      <IbspSearchInput v-model="searchValue" />
+      <Button @click="onClickAddPage">新增</Button>
+    </header>
+    <el-tree
+      :data="readerData"
+      ref="ibspTreeRef"
+      @current-change="onSelectPage"
+      :current-node-key="selectedKey"
+      node-key="idPageVersion"
+      :props="{
+        label:'pageName',
+      }"
+      default-expand-all
+      highlight-current
+      :expand-on-click-node="false"
+    >
+      <template #default="{data,node}">
+        <div class="page-node"
+             :id="`tree-${data.idPageVersion}`"
+             @contextmenu.prevent="onContextmenu(data,node)">
+          <SvgIcon
+            :icon="{
+              type: 'svg',
+              value: data.children?.length ? '页面1' : '页面2',
+            }"
+          />
+          <form         v-if="data.isEdit" @submit.prevent="onChangeEdit(data,node)">
+            <el-input @click.stop="()=>{}"
+                      :id="`tree-${data.idPageVersion}`"
+
+                      :ref="(el)=>{
+                        inputRef = el
+                      }"
+                      class="page-node-input"
+
+                      @blur="onChangeEditBlur(data,node)"
+                      v-model="data.label"></el-input>
+          </form>
+
+          <span v-else class="label" >
+            {{ data.pageName }}
+          </span>
+        </div>
+      </template>
+    </el-tree>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.page-list-index {
+    width: 100%;
+    height: 100%;
+    header{
+        height: 40px;
+        display: flex;
+        padding: 5px 10px;
+        align-items: center;
+        position: sticky;
+        top: 0;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+        :deep(.ibsp-next-ui-button){
+            width: 100px;
+            padding: 0 8px;
+            height: 30px;
+            border-radius: 6px;
+            margin-left: 8px;
+        }
+    }
+
+    .page-node{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        .label{
+            margin-left: 5px;
+            width: 100%;
+
+        }
+        .el-input{
+            width: 100%;
+        }
+        :deep(.ibsp-svg-icon){
+            --fill:var(--theme-font-color);
+        }
+        .page-node-input{
+          background-color: var(--theme-bg);
+        }
+    }
+    .el-tree{
+        height: calc(100% - 40px);
+        padding: 0 10px;
+        overflow: auto;
+        --el-tree-node-content-height: 30px;
+        --el-tree-text-color:var(--theme-font-color);
+        background:transparent;
+        --el-tree-node-hover-bg-color:transparent;
+        :deep(.el-tree-node__content){
+            border-radius: 2px;
+            &:hover{
+                background: var(--theme-next-btn-bg);
+            }
+        }
+        :deep(.el-tree-node__content:hover){
+            color: var(--theme-gl-color);
+        }
+        :deep(.el-tree-node.is-current>.el-tree-node__content){
+            color: var(--theme-gl-color);
+            background: var(--theme-gl-bg);
+        }
+    }
+}
+</style>

package/src/views/designer/modules/ibsp-script/index.ts

@@ -0,0 +1,3 @@
+import IbspScript from './src/index.vue'
+
+export default IbspScript