ibsp-fg-page 4.0.2

package/src/components/common/SelectAllIcon.vue

@@ -0,0 +1,202 @@
+<script setup>
+import * as AllIcon from '@element-plus/icons-vue'
+import { markRaw, reactive, ref, computed } from 'vue';
+
+import PageDrawerPopup from './PageDrawerPopup.vue';
+
+
+const emit = defineEmits(['onClose', 'onOk', 'update:modelValue'])
+const selectIcon = ref({
+  type: '',
+  name: ''
+})
+const data = ref({
+  id: 'iconAll',
+  active: false,
+  position: {
+    x: 0,
+    y: 0
+  },
+})
+const componentListRef = ref(null)
+
+const currentActiveComponentName = ref('')
+const elementIconList = markRaw(Object.values(AllIcon)) // element图标列表
+const AllIconCateList = reactive([
+  {
+    id: 1,
+    name: 'element',
+    label: 'Element组件库图标',
+    currentLoadNum: 0, // 当前加载的图标个数
+    stepLoadNum: 100, // 每次加载的图标个数
+    list: elementIconList,
+  }
+])
+
+
+/**
+ *获取图片列表
+ */
+const getIconList = computed(() => {
+  const name = currentActiveComponentName.value
+  const item = AllIconCateList.find(item => item.name === name)
+  if (!item) return []
+  return item.list.slice(0, item.currentLoadNum)
+})
+
+/**
+ *  确定
+ */
+const onClickIcon = (iconItem, component)=>{
+  selectIcon.value.type = iconItem.name
+  selectIcon.value.name = component.name
+}
+
+/**
+ *
+ * @param {*} e
+ */
+const onScroll = (index, item)=>{
+  const ref = componentListRef.value[index]
+  const isAtBottom = ref.scrollTop === (ref.scrollHeight - ref.clientHeight);
+  if (isAtBottom) {
+    item.currentLoadNum += item.stepLoadNum
+  }
+
+
+}
+/**
+ *  获取图标
+ */
+const onChangeComponentName = (name)=>{
+  if (name) {
+    const item = AllIconCateList.find(item => item.name === name)
+    if (item.currentLoadNum === 0) {
+      item.currentLoadNum = item.stepLoadNum
+    }
+  }
+
+}
+
+/**
+ * 确定
+ */
+const onClickOk = ()=>{
+  emit('onOk', { ...selectIcon.value })
+  emit('update:modelValue', false)
+}
+/**
+ * 取消
+ */
+const onClickCancel = ()=>{
+  emit('update:modelValue', false)
+}
+
+</script>
+
+<template>
+
+  <div class="select-all-icon" @click.stop="()=>{}">
+    <PageDrawerPopup title="选择图标"
+                     width="800px"
+                     height="500px"
+                     v-bind="$attrs"
+                     @onClose="onClickCancel"
+                     :data="data"  >
+
+      <template #default>
+        <el-collapse v-model="currentActiveComponentName"
+                     accordion
+                     @change="onChangeComponentName" >
+          <el-collapse-item v-for="(iconitem,i)  in  AllIconCateList"
+                            :key="iconitem?.id"
+                            :title="iconitem?.label"
+                            :name="iconitem?.name">
+            <ul @scroll="onScroll(i, iconitem)"
+                ref="componentListRef"
+            >
+              <el-icon
+                :class="{'active': selectIcon.name === Component.name}"
+                @click.stop="onClickIcon(iconitem, Component)"
+                :data-name="Component?.name"
+                v-for="(Component,index) in getIconList"
+                :key="index"> <component :is="Component"></component></el-icon>
+            </ul>
+          </el-collapse-item>
+        </el-collapse>
+      </template>
+
+      <template #footer>
+
+        <div class="submit-btn">
+          <el-button size="small"
+                     type="primary"
+                     class="ok-btn"
+                     @click.stop="onClickOk">确定
+          </el-button>
+          <el-button size="small"
+                     plain
+                     class="cancel-btn"
+                     @click.stop="onClickCancel">取消
+          </el-button>
+
+        </div>
+
+      </template>
+    </PageDrawerPopup>
+
+  </div>
+
+
+</template>
+
+<style lang="less" scoped>
+.select-all-icon {
+ :deep(.el-collapse-item__header){
+  padding: 0 10px !important;
+  flex-direction: row !important;
+    justify-content: space-between !important;
+ }
+ :deep(.el-collapse-item__wrap){
+  height: 390px !important;
+  .el-collapse-item__content{
+   height: 100% !important;
+  }
+ }
+ .item{
+  width: 100%;
+  height: 100%;
+ }
+ ul{
+  width: 100%;
+    height: 100%;
+    overflow: auto;
+  &>*{
+   margin: 10px;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    border-radius: 2px;
+    font-size: 30px;
+    &:hover{
+     background-color: var(--theme-gl-bg);
+     color: var(--theme-gl-color);
+
+    }
+  }
+ }
+
+}
+.submit-btn{
+  position: absolute;
+    bottom: 0px;
+    right: 0;
+    width: 100%;
+    text-align: right;
+    margin: 10px;
+}
+.active{
+ background-color: var(--theme-gl-bg);
+     color: var(--theme-gl-color);
+}
+</style>

package/src/components/globals/ColorPicker.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { onMounted, ref, reactive, watch } from 'vue'
+import SvPanel from 'element-plus/es/components/color-picker/src/components/sv-panel'
+import Color from 'element-plus/es/components/color-picker/src/utils/color'
+import HueSlider from 'element-plus/es/components/color-picker/src/components/hue-slider'
+import AlphaSlider from 'element-plus/es/components/color-picker/src/components/alpha-slider'
+
+import IbspSelect from '../ibsp/IbspSelect.vue';
+import IbspButton from '../ibsp/IbspButton.vue';
+
+
+const show = ref(false)
+const modelValue = ref('rgba(19, 206, 102, 0.8')
+
+const color = reactive(new Color({
+  enableAlpha: true,
+  format: '',
+  value: 'rgba(19, 206, 102, 0.8)'
+}))
+
+const inputColor = ref(modelValue.value)
+
+const inputState = ref(false)
+const selectSate = ref(true)
+
+
+const colorPickerRef = ref(null)
+const btnRef = ref(null)
+
+const state = reactive({
+  position: {
+    x: 0,
+    y: 0
+  }
+})
+
+const x = ref(0)
+const y = ref(0)
+
+
+const show = ({ x, y }) => {
+  document.body.style.setProperty('--color-picker-x', x + 'px');
+  document.body.style.setProperty('--color-picker-y', y + 'px');
+  setTimeout(() => {
+    colorPickerRef.value.show()
+  }, 50);
+}
+
+
+const options = reactive([
+  {
+    label: '主色',
+    value: 'rgba(19, 206, 102, 0.8)'
+  },
+  {
+    label: '成功色',
+    value: '#67C23A'
+  },
+  {
+    label: '警告色',
+    value: '#E6A23C'
+  },
+  {
+    label: '危险色',
+    value: '#F56C6C'
+  },
+  {
+    label: '信息色',
+    value: '#909399'
+  },
+  {
+    label: '错误色',
+    value: '#F56C6C'
+  }
+])
+
+let isChange = false
+const onChangeColorSelect = (val) => {
+  isChange = true
+  color.fromString(val)
+  modelValue.value = val
+}
+watch(() => modelValue.value, (val) => {
+  color.fromString(val)
+})
+watch(() => color.value, (val) => {
+  if (isChange) {
+    isChange = false
+    return
+  }
+  inputColor.value = val
+})
+
+const onChangeSelectState = (val) => {
+  inputState.value = !val
+}
+
+const onChangeInputState = (val) => {
+  selectSate.value = !val
+}
+
+
+</script>
+
+<template>
+  <div class="ibsp-color-picker" v-if="show">
+    <div class="color-panel">
+      <SvPanel class="sv-panel" :color="color" />
+      <HueSlider ref="hue"
+                 class="hue-slider"
+                 :color="color"
+                 vertical />
+    </div>
+    <AlphaSlider class="alpha-slider"
+                 ref="alpha"
+                 :color="color" />
+    <div class="color-picker-box">
+      <div class="input">
+        <el-checkbox v-model="inputState" @change="onChangeInputState" />
+        <el-input :disabled="selectSate"
+                  v-model="inputColor"
+                  placeholder="输入颜色值"
+                  @change="onChangeColorInput" />
+      </div>
+      <div class="select">
+        <el-checkbox v-model="selectSate" @change="onChangeSelectState" />
+        <IbspSelect :disabled="inputState"
+                    @change="onChangeColorSelect"
+                    placeholder="预定义色"
+                    @click.stop="() => { }"
+                    v-model="inputColor"
+                    :options="options"
+                    filterable
+                    clearable>
+          <template #option="{ item }">
+            <div class="color-option">
+              <span :style="{
+                      backgroundColor: item.value
+                    }"
+                    class="color-value"></span>
+              <span class="color-label">{{ item.label }}</span>
+
+            </div>
+          </template>
+        </IbspSelect>
+      </div>
+
+
+    </div>
+    <div class="operation">
+      <IbspButton ref="btn"
+                  @click="() => show(state.position)"
+                  type="primary">确定</IbspButton>
+      <IbspButton ref="btn"
+                  @click="() => show(state.position)"
+                  type="default">取消</IbspButton>
+    </div>
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-color-picker {
+    width: fit-content;
+    height: fit-content;
+    border-radius: 12px;
+    padding: 12px;
+    border: 1px solid var(--theme-border-color);
+
+    .color-picker-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        >div {
+            display: flex;
+            align-items: center;
+        }
+
+        .input {
+            margin-right: 10px;
+
+            .el-input {
+                font-size: 12px;
+            }
+        }
+
+        .ibsp-select {
+            width: 120px !important;
+        }
+
+        .el-checkbox {
+            margin-right: 5px;
+            --el-checkbox-input-height: 18px;
+            --el-checkbox-input-width: 18px;
+            --el-checkbox-font-size: 16px;
+
+            :deep(.el-checkbox__inner) {
+                border-radius: 6px;
+
+                &::after {
+                    height: 9px;
+                    left: 6px;
+                    top: 2px;
+                }
+            }
+        }
+    }
+
+    .color-panel {
+        .sv-panel {
+            float: left;
+        }
+
+        .hue-slider {
+            float: right;
+            margin-left: 10px;
+        }
+
+        &::after {
+            content: '';
+            display: block;
+            clear: both;
+        }
+    }
+
+    .alpha-slider {
+        margin: 10px 0;
+
+    }
+
+    .operation {
+        display: flex;
+        justify-content: flex-end;
+        margin: 5px;
+        margin-bottom: 0;
+        margin-top: 10px;
+    }
+}
+
+.color-option {
+    display: flex;
+
+    // justify-content: space-between;
+    .color-value {
+        width: 50px;
+        margin-right: 10px;
+        border-radius: 6px;
+
+    }
+
+}
+</style>
+
+<style lang="less">
+.ibsp-color-picker-popper.el-popper {
+    position: fixed !important;
+    top: var(--color-picker-x) !important;
+    left: var(--color-picker-y) !important;
+}
+</style>

package/src/components/globals/ContextMenu.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { inject, ref } from 'vue';
+
+
+const show = ref(false);
+const position = ref({
+  x: 0,
+  y: 0
+});
+
+const menuList = ref([
+  // 以下是示例, 当选择菜单时, 会触发对应的handleFn
+  // {
+  //   id: 1,
+  //   label: '添加容器',
+  //   handleFn: () => {
+  //     console.log('添加容器');
+  //   }
+  // }
+]);
+
+
+const $bus = inject('$bus');
+let clickFunction = null
+
+// data 是一个对象, 必须包含position和menuList两个属性
+$bus.on('showContextmenu', (data) => {
+  show.value = true;
+  position.value = data.position;
+  menuList.value = data.menuList;
+  if (data.click && typeof data.click === 'function') {
+    clickFunction = data.click
+  }
+});
+
+/**
+ * 关闭右键菜单
+ */
+const close = () => {
+  show.value = false;
+};
+
+/**
+ * 点击菜单
+ * @param item
+ */
+const onClick = (item) => {
+  if (clickFunction) {
+    clickFunction?.(item)
+    clickFunction = null
+  } else {
+    item?.handleFn();
+  }
+  close();
+};
+/**
+ * 点击遮罩层
+ */
+const onContextmenuMask = (e) => {
+  const position = {
+    x: e.clientX,
+    y: e.clientY
+  };
+  $bus.emit('showContextmenu', { menuList: menuList.value, position });
+};
+
+
+</script>
+
+<template>
+  <!-- 右键菜单 -->
+  <Teleport to="body">
+    <div
+      :style="{
+        top: position.y + 'px',
+        left: position.x + 'px',
+        display: show? 'block': 'none',
+      }"
+      class="contextmenu-menus"
+    >
+      <ul>
+        <li
+          v-for="(item, index) in menuList"
+          :key="item.id || index"
+          @click.stop="onClick(item)"
+        >
+          <span>{{ item.label }}</span>
+        </li>
+      </ul>
+      <div class="menu-mask"
+           @click="close"
+           @contextmenu.prevent="onContextmenuMask"></div>
+    </div>
+  </Teleport>
+
+</template>
+
+<style lang="less" scoped>
+.contextmenu-menus {
+  width: 170px;
+  background-color: var(--theme-btn-bg);
+  position: fixed;
+  border: 1px solid var(--theme-btn-border-color);
+  border-radius: 2px;
+  z-index: 2000;
+  display: none;
+  user-select: none;
+  border-radius: 2px;
+
+  .menu-mask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: transparent;
+  }
+
+  ul {
+    width: 100%;
+    height: 100%;
+    list-style: none;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 2px 8px 0 rgba(7,12,20,.12);
+
+    li {
+      width: 100%;
+      font-size: 12px;
+      cursor: pointer;
+      height: 28px;
+      line-height: 28px;
+      // text-align: center;
+      padding: 0 10px;
+    }
+  }
+}
+
+.contextmenu-menus li:hover {
+  background-color: var(--theme-gl-bg);
+  color: var(--theme-gl-color);
+}
+</style>

package/src/components/globals/FormContainer.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { cloneDeep } from 'lodash-es'
+
+
+import { getSysFormVersionInfo } from '@/api/ibsp-bg-form'
+import useEnv from '@/hooks/useEnv';
+const props = defineProps({
+  env: {
+    type: String,
+    default: () => ('http://ibsp-dev.cnibsp.com')
+  },
+  load: {
+    type: Function,
+    default: () => {}
+  },
+  id: {
+    type: String,
+    default: () => ''
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  },
+  defaultData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const local_env = useEnv('IBSP_APP_MAIN_WEB')
+// const local_env = 'http://localhost:9528'
+const token = localStorage.getItem('ibsp_token') || localStorage.getItem('ibsp-token')
+const iframeUrl = `${local_env}/form-preview?token=${token}`
+// const iframeUrl = ` http://10.148.121.221:9528/form-preview?token=${token}`
+const appForms = props.page.appForms
+const iframeRef = ref(null)
+const emit = defineEmits('onInput')
+/**
+ *  监表单
+ */
+const watchForm = async (e) => {
+  if (e.data.type === 'formInit') {
+    const formId = props.id
+    // let res;
+    // if (appForms.has(formId)) {
+    //   res = appForms.get(formId)
+    // } else {
+    let res = await getSysFormVersionInfo(formId)
+    //   appForms.set(formId, res)
+    // }
+
+    const formJson = JSON.parse(res.data?.viewJson)
+    const formWindow = iframeRef.value.contentWindow
+    if (formWindow) {
+      formWindow.postMessage({
+        type: 'renderForm',
+        data: {
+          defaultData: cloneDeep({ ...(props.defaultData || []) }),
+          formJson,
+          token: token,
+          formDataStore: { system: {
+            token: token
+          } }
+        }
+      }, '*')
+    }
+  }
+  if (e.data.type === 'formChange') {
+    emit('onInput', e.data.data)
+  }
+
+  if (e.data.type === 'formLoadedSuccess') {
+    props.load()
+  }
+
+
+}
+
+
+onMounted(()=>{
+  nextTick(()=>{
+    if (props.id) {
+      window.addEventListener('message', watchForm);
+    }
+  })
+})
+
+onBeforeUnmount(()=>{
+  window.removeEventListener('message', watchForm);
+})
+
+</script>
+
+<template>
+  <div class="ibsp-form-container">
+    <iframe
+      ref="iframeRef"
+      id="ibsp-page-form-container"
+      :data-form-id="id"
+      title="ibsp-from-iframe"
+      :src="iframeUrl"
+      :style="{
+        'pointer-events':page.mode === 'Design' ? 'none' : 'auto'
+      }"
+    />
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.ibsp-form-container {
+  width: 100%;
+  height: 100%;
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}
+
+</style>