ibsp-fg-page 4.0.2

package/src/components/globals/IbspIcon.vue

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  icon: {
+    type: Object,
+    default: ()=>({
+      type: 'element',
+    })
+  }
+})
+</script>
+
+<template>
+  <i class="ibsp-icon">
+
+  </i>
+
+</template>
+
+<style>
+
+</style>

package/src/components/globals/LoginDialog.vue

@@ -0,0 +1,365 @@
+<script>
+import { ref, onMounted } from 'vue'
+import CryptoJS from 'crypto-js'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus';
+
+import { loginApi } from '@/api/ibsp-bg-auth'
+
+
+export default {
+  props: {
+    close: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  setup(props) {
+    const loginForm = ref({
+      account: '',
+      password: ''
+    })
+    const passType = ref('password')
+
+    /**
+ * 提交登录
+ */
+    const submitFormLogin = () => {
+      loginApi({
+        ...loginForm.value,
+        password: CryptoJS.MD5(loginForm.value.password)
+          .toString()
+      })
+        .then(res => {
+          if (res.success) {
+            console.log(res.data);
+            props.close(res.data)
+          }
+        })
+    }
+
+    return {
+      loginForm,
+      passType,
+      submitFormLogin
+    }
+  }
+}
+
+</script>
+
+<template>
+  <div class="login">
+    <div class="container">
+      <div class="form">
+        <header>
+          <h2>ibsp-page4</h2>
+        </header>
+        <div class="flex-column">
+          <label>account</label>
+        </div>
+        <div class="inputForm">
+          <svg height="20"
+               viewBox="0 0 32 32"
+               width="20"
+               xmlns="http://www.w3.org/2000/svg">
+            <g id="Layer_3" data-name="Layer 3">
+              <path
+                d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z">
+              </path>
+            </g>
+          </svg>
+          <input type="text"
+                 class="input"
+                 v-model="loginForm.account"
+                 placeholder="Enter your Account">
+        </div>
+
+        <div class="flex-column">
+          <label>password </label>
+        </div>
+        <div class="inputForm">
+          <svg height="20"
+               viewBox="-64 0 512 512"
+               width="20"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0">
+            </path>
+            <path
+              d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0">
+            </path>
+          </svg>
+          <input :type="passType"
+                 class="input"
+                 v-model="loginForm.password"
+                 placeholder="Enter your Password">
+          <svg viewBox="0 0 576 512"
+               height="1em"
+               @click="() => {
+                 passType = passType === 'password' ? 'text' : 'password'
+               }"
+               xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
+            </path>
+          </svg>
+        </div>
+
+        <div class="flex-row">
+          <div style="display: flex;">
+            <input :checked="true"
+                   type="checkbox"
+                   style="margin-right: 3px;cursor: pointer;">
+            <label>记住账号密码</label>
+          </div>
+          <span class="span">忘记密码?</span>
+        </div>
+        <button @click.stop="submitFormLogin" class="button-submit">登录</button>
+        <p class="p">没有账号? <span class="span">注册</span>
+
+        </p>
+        <p class="p line">Or With</p>
+
+        <div class="flex-row">
+          <button class="btn google">
+            <svg version="1.1"
+                 width="20"
+                 id="Layer_1"
+                 xmlns="http://www.w3.org/2000/svg"
+                 xmlns:xlink="http://www.w3.org/1999/xlink"
+                 x="0px"
+                 y="0px"
+                 viewBox="0 0 512 512"
+                 style="enable-background:new 0 0 512 512;"
+                 xml:space="preserve">
+              <path style="fill:#FBBB00;"
+                    d="M113.47,309.408L95.648,375.94l-65.139,1.378C11.042,341.211,0,299.9,0,256
+	c0-42.451,10.324-82.483,28.624-117.732h0.014l57.992,10.632l25.404,57.644c-5.317,15.501-8.215,32.141-8.215,49.456
+	C103.821,274.792,107.225,292.797,113.47,309.408z"></path>
+              <path style="fill:#518EF8;"
+                    d="M507.527,208.176C510.467,223.662,512,239.655,512,256c0,18.328-1.927,36.206-5.598,53.451
+	c-12.462,58.683-45.025,109.925-90.134,146.187l-0.014-0.014l-73.044-3.727l-10.338-64.535
+	c29.932-17.554,53.324-45.025,65.646-77.911h-136.89V208.176h138.887L507.527,208.176L507.527,208.176z"></path>
+              <path style="fill:#28B446;"
+                    d="M416.253,455.624l0.014,0.014C372.396,490.901,316.666,512,256,512
+	c-97.491,0-182.252-54.491-225.491-134.681l82.961-67.91c21.619,57.698,77.278,98.771,142.53,98.771
+	c28.047,0,54.323-7.582,76.87-20.818L416.253,455.624z"></path>
+              <path style="fill:#F14336;"
+                    d="M419.404,58.936l-82.933,67.896c-23.335-14.586-50.919-23.012-80.471-23.012
+	c-66.729,0-123.429,42.957-143.965,102.724l-83.397-68.276h-0.014C71.23,56.123,157.06,0,256,0
+	C318.115,0,375.068,22.126,419.404,58.936z"></path>
+
+            </svg>
+
+            Google
+
+          </button>
+
+          <!-- <button class="btn apple">
+            <svg version="1.1"
+                 height="20"
+                 width="20"
+                 id="Capa_1"
+                 xmlns="http://www.w3.org/2000/svg"
+                 xmlns:xlink="http://www.w3.org/1999/xlink"
+                 x="0px"
+                 y="0px"
+                 viewBox="0 0 22.773 22.773"
+                 style="enable-background:new 0 0 22.773 22.773;"
+                 xml:space="preserve">
+              <g>
+                <g>
+                  <path
+                    d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573 c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z">
+                  </path>
+                  <path
+                    d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334 c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0 c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019 c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464 c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648 c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z">
+                  </path>
+                </g>
+              </g>
+            </svg>
+
+            Apple
+
+          </button> -->
+        </div>
+      </div>
+    </div>
+
+    <div class="mask"></div>
+
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.login {
+  width: 100vw;
+  height: 100vh;
+  z-index: 999999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: pinia, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  position: fixed;
+  top: 0;
+
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--theme-bg);
+    z-index: -1;
+  }
+
+  input {
+    font-family: pinia, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background: initial;
+  }
+
+  h1,
+  h2 {
+    color: var(--theme-font-color);
+  }
+
+  .container {
+    display: flex;
+    background-color: var(--theme-bg);
+    border: 1px solid var(--theme-border-color);
+    border-radius: 20px;
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 30px;
+      width: 550px;
+
+
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+
+    ::placeholder {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+
+    .form button {
+      align-self: flex-end;
+    }
+
+    .flex-column>label {
+      color: var(--theme-font-color);
+      font-weight: 600;
+    }
+
+    .inputForm {
+      border: 1.5px solid var(--theme-border-color);
+      border-radius: 10px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      transition: 0.2s ease-in-out;
+
+      path {
+        fill: var(--theme-font-color);
+      }
+    }
+
+    .input {
+      margin-left: 10px;
+      border-radius: 10px;
+      border: none;
+      width: 85%;
+      height: 100%;
+    }
+
+    .input:focus {
+      outline: none;
+    }
+
+    .inputForm:focus-within {
+      border: 1.5px solid var(--theme-gl-bg);
+    }
+
+    .flex-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 10px;
+      justify-content: space-between;
+    }
+
+    .flex-row>div>label {
+      font-size: 14px;
+      color: var(--theme-font-color);
+      font-weight: 400;
+    }
+
+    .span {
+      font-size: 14px;
+      margin-left: 5px;
+      color: var(--theme-gl-bg);
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .button-submit {
+      margin: 20px 0 10px 0;
+      background-color: var(--theme-btn-bg);
+      color: var(--theme-font-color);
+      font-size: 15px;
+      font-weight: 500;
+      border-radius: 10px;
+      height: 50px;
+      width: 100%;
+      cursor: pointer;
+    }
+
+    .button-submit:hover {
+      background-color: #252727;
+    }
+
+    .p {
+      text-align: center;
+      color: var(--theme-font-color);
+      font-size: 14px;
+      margin: 5px 0;
+    }
+
+    .btn {
+      margin-top: 10px;
+      width: 100%;
+      height: 50px;
+      border-radius: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: 500;
+      gap: 10px;
+      border: 1px solid var(--theme-border-color);
+      background-color: var(--theme-btn-bg);
+      cursor: pointer;
+      transition: 0.2s ease-in-out;
+      color: var(--theme-font-color);
+    }
+
+    .btn:hover {
+      border: 1px solid var(--theme-gl-bg);
+      ;
+    }
+
+    input:-internal-autofill-selected {
+      background-color: transparent !important;
+    }
+
+
+  }
+
+
+}
+</style>

package/src/components/globals/Message.vue

@@ -0,0 +1,10 @@
+<script setup>
+// import Toast from 'primevue/toast';
+
+</script>
+
+<template>
+  <div class="my-message">
+    <!-- <Toast position="top-center"/> -->
+  </div>
+</template>

package/src/components/globals/SvgIcon.vue

@@ -0,0 +1,122 @@
+<script setup>/**
+ * 接收一个 icon 对象，包含两个属性： type 和 value, type 为 svg 或 element, value 为 svg 的 id 或 element 的组件
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
+  icon: {
+    type: Object,
+    required: true,
+    default: () => ({
+      type: 'default',
+      value: '',
+      size: 'small',
+
+    })
+  }
+});
+
+
+const getColor = computed(() => {
+  return '#2a8afe';
+
+});
+
+/**
+ * 获取 icon 的大小
+ */
+const getIconSize = () => {
+  const size = props.icon?.size;
+  if (typeof size === 'string' || !size) {
+    if (size === 'large') {
+      return {
+        '--width': '140px',
+        '--height': '70px',
+      };
+    }
+    return {
+      '--width': '16px',
+      '--height': '16px'
+    };
+
+  }
+  if (typeof size === 'object') {
+    return size;
+  }
+
+};
+
+const id = props.icon?.type === 'lib' ? 'lib' : 'icon';
+
+
+</script>
+
+<template>
+  <i :style="getIconSize()" class="ibsp-svg-icon">
+    <template v-if="icon.type === 'svg' || icon.type==='local' || icon.type === 'lib'">
+      <svg :style="getIconSize()"
+           aria-hidden="true"
+           class="icon-svg"
+           v-on="$attrs">
+        <use :xlink:href="`#${id}-${icon.value}`"/>
+      </svg>
+    </template>
+    <template v-else-if="icon.type === 'element-icon' || icon.type === 'element-plus'">
+      <component :is="icon.value" :style="getIconSize()"/>
+    </template>
+    <template v-else-if="icon.type === 'html'">
+      <svg :style="getIconSize()"
+           viewBox="0 0 1024 1024"
+           version="1.1"
+           xmlns="http://www.w3.org/2000/svg"
+           p-id="4066"
+           width="200"
+           height="200"
+           class="icon-svg"
+           v-html="icon.value"></svg>
+    </template>
+  </i>
+
+</template>
+
+<style lang="less" scoped>
+
+.icon-svg{
+  :deep(svg){
+    path{
+      fill:var(--theme-gl-bg);
+      stroke:var(--theme-gl-bg);
+    }
+
+  }
+}
+
+i {
+  width: var(--width);
+  height: var(--height);
+  --fill:var(--theme-font-color);
+  display: inline-flex;
+  align-items:center;
+  svg {
+    width: var(--width);
+    height: var(--height);
+    fill: var(--fill);
+
+    //font-size: 20px;
+    vertical-align: -0.05em;
+    overflow: hidden;
+  }
+
+  span {
+    :deep(svg) {
+      width: var(--width);
+      height: var(--height);
+      color: var(--fill);
+    }
+
+
+  }
+
+
+}
+</style>

package/src/components/ibsp/Cascader.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+
+const cascaderRef = ref(null)
+
+const label = defineModel('label')
+
+
+const onChange = (val) => {
+  const node = cascaderRef.value.cascaderPanelRef.getCheckedNodes()
+  label.value = node?.[0]?.text
+}
+
+
+</script>
+
+<template>
+  <div class="ibsp-cascader">
+    <el-cascader
+      ref="cascaderRef"
+      clearable
+      filterable
+      v-bind="$attrs"
+      @change="onChange"
+      style="width: 100%;">
+      <template #default="{ node, data }">
+        <span>{{ data.label }}</span>
+        <span v-if="!node.isLeaf"> ({{ $attrs['props']?.children?data[$attrs['props']?.children]?.length: data.children.length }}) </span>
+      </template>
+    </el-cascader>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ibsp-cascader{
+    width: 100%;
+    height: 100%;
+}
+</style>

package/src/components/ibsp/FromPage.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+import appData from '@/stores/appData';
+import { getSysFormVersionInfo } from '@/api/ibsp-bg-form'
+const props = defineProps({
+  formId: {
+    type: String,
+    default: ''
+  },
+  isOpenIframe: {
+    type: Boolean,
+    default: true
+  },
+  isInitOpenForm: {
+    type: Boolean,
+    default: true
+  },
+  defaultData: {
+    type: Object,
+    default: () => ({})
+  },
+  dataJson: {
+    type: Object,
+    default: () => (null)
+  },
+})
+const appDataStore = appData()
+const iframeUrl = ' http://localhost:9528/form-preview'
+const formVisible = ref(props.isOpenIframe)
+let formWindow = null
+
+const intiForm = async({ formId, dataJson, defaultData, isInitPage } = {})=>{
+  if (!formVisible.value) {
+    formVisible.value = true
+  }
+  nextTick(async()=>{
+    let formJson = dataJson || {}
+    if (formId && !dataJson) {
+      const res = await getSysFormVersionInfo(props.formId)
+      formJson = JSON.parse(res.data?.viewJson)
+    }
+    if (isInitPage || !formWindow) {
+      formWindow = document.getElementById('from-page-iframe')?.contentWindow
+      if (formWindow) {
+        formWindow.postMessage({
+          type: 'initFormPage',
+          data: {
+            appId: window.appId,
+            token: localStorage.getItem('ibsp_token') || localStorage.getItem('ibsp-token'),
+            formDataStore: { system: {
+              ...appDataStore.userInfo,
+              token: localStorage.getItem('ibsp_token') || localStorage.getItem('ibsp-token')
+            } }
+          },
+        }, '*')
+      }
+    }
+    if (formWindow) {
+      formWindow.postMessage({
+        type: 'openForm',
+        data: {
+          defaultData,
+          formJson,
+        },
+      }, '*')
+    }
+  })
+}
+
+const closeForm = ()=>{
+  if (formWindow) {
+    formWindow.postMessage({
+      type: 'closeForm',
+    }, '*')
+    if (props.isInitOpenForm) {
+      formVisible.value = false
+    }
+  }
+}
+
+onMounted(async ()=>{
+  if (formVisible.value) {
+    nextTick(()=>{
+      intiForm({
+        formId: props.formId,
+        dataJson: props.dataJson,
+        defaultData: props.defaultData,
+        isInitPage: props.isInitOpenForm
+      })
+    })
+  }
+})
+
+defineExpose({
+  openForm: intiForm,
+  closeForm,
+})
+
+</script>
+
+<template>
+  <iframe
+    v-if="formVisible"
+    title="表单预览"
+    id="from-page-iframe"
+    :src="iframeUrl"
+  />
+</template>
+
+<style lang="less" scoped>
+#from-page-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+</style>