@arkxos/arkos-system 0.1.0

package/src/visual/components/list/news.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div class="vc-news-list-wrapper">
+      <div class="vc-news-list-header"></div>
+      <div class="vc-news-list-body">
+        <div
+          class="vc-news-list fit-box full-height"
+          :style="visual.parseStyle(compStyle)"
+        >
+          <el-table
+            ref="dataTable"
+            v-bind="tableOptions"
+            :data="dataList"
+            class="fit-table vc-news-list-table"
+          >
+            <el-table-column
+              v-for="(column, index) in columnList"
+              :key="index"
+              v-bind="column.options"
+            >
+              <template #default="{ row }">
+                <div
+                  v-if="column.fieldType === '日期'"
+                  :style="column.style"
+                  @click="() => cellClick(column.prop, row)"
+                >
+                  {{row[column.prop] ? date.formatLongDate(row[column.prop], column.format) : ''}}
+                </div>
+                <div
+                  v-else-if="column.fieldType === '数字'"
+                  :style="column.style"
+                  @click="() => cellClick(column.prop, row)"
+                >
+                  {{tool.formatNumber(row[column.prop], column.point)}}
+                </div>
+                <div
+                  v-else
+                  :style="column.style"
+                  @click="() => cellClick(column.prop, row)"
+                >{{row[column.prop]}}</div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject, getCurrentInstance, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import date from '@/utils/date';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const compStyle = ref({});
+const dataList = ref([]);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+const tableOptions = ref({});
+const columnList = ref([]);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  compStyle.value = currNode.value.currCompStyle || {};
+  dataList.value = (await visual.loadData(currNode.value.compData, eventHandler, getData()) || {}).data || [];
+  initTableOptions();
+  initColumnList();
+  await nextTick(() => initializing.value = false);
+};
+
+const initTableOptions = () => {
+  const options = {};
+  options.width = compStyle.value['width'] || '100%';
+  options.height = compStyle.value['height'] || '100%';
+  options.border = compStyle.value['border'] || false;
+  options.stripe = compStyle.value['stripe'] || false;
+  tableOptions.value = options;
+};
+
+const initColumnList = () => {
+  const list = [];
+  (compStyle.value.columnList || []).forEach(item => {
+    const column = {};
+    column.label = item.label;
+    column.prop = item.prop;
+    column.fieldType = item.fieldType;
+    column.point = item.point;
+    column.format = item.format;
+
+    const options = {};
+    if (item.autoWidth) {
+      options.minWidth = item.width || 10;
+    } else {
+      options.width = item.width || 10;
+    }
+    options.label = item.label;
+    options.headerAlign = item.headerAlign;
+    options.align = item.align;
+    column.options = options;
+
+    column.style = visual.parseFontStyle(item);
+    list.push(column);
+  });
+  columnList.value = list;
+};
+
+const cellClick = (prop, row) => {
+  eventHandler.trigger('点击行内容事件', { col: prop, row: row });
+};
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {} };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = () => {
+  init();
+};
+
+onMounted(() => {
+  refresh();
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped lang="scss">
+.vc-news-list-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 1px;
+  flex-grow: 1;
+  .vc-news-list-body {
+    height: 1px;
+    flex-grow: 1;
+    .vc-news-list {
+      display: flex;
+      flex-direction: row;
+      .vc-news-list-table {
+        --el-table-index: unset!important;
+        :deep(.el-table__inner-wrapper):before {
+          background-color: unset!important;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/visual/components/page-comp/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle, {width: '100%'})"
+  >
+    <div
+      :class="['vc-' + currNode.type,]"
+      :style="visual.parseStyle(currNode.currCompStyle)"
+    >
+      <Component
+        v-if="compName"
+        :is="compName"
+        :node="currNode"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import { useVisualCompStore } from '@/visual/js/visual-comp';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const visualComp = useVisualCompStore();
+
+const comp = ref();
+const compName = ref('');
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+
+  if (currNode.value.type) {
+    comp.value = await visualComp.getVisualComp(currNode.value.type);
+    compName.value = comp.value.name;
+  }
+
+  await nextTick(() => initializing.value = false);
+};
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {} };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const loadData = async() => {};
+
+const refresh = async() => {
+  initializing.value = true;
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+});
+
+defineExpose({ getData, changeStyle, refresh, loadData });
+</script>

package/src/visual/components/portal-menu/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div
+      class="vc-portal-menu"
+      :style="visual.parseStyle(currNode.currCompStyle)"
+    >
+      <el-menu
+        ellipsis
+        mode="horizontal"
+        :default-active="active"
+        @select="selectMenuItem"
+      >
+        <span v-for="(first, index) in dataList" :key="index">
+          <el-sub-menu
+            v-if="first.children && first.children.length > 0"
+            :index="first.id"
+            :key="first.id"
+            :style="currStyle"
+            class="first-menu"
+          >
+            <template #title>
+              <div :style="currStyle">{{first.text}}</div>
+            </template>
+            <span v-for="(second, index2) in first.children" :key="index2">
+              <el-sub-menu
+                v-if="second.children && second.children.length > 0"
+                :index="second.id"
+                :key="second.id"
+              >
+                <template #title>{{second.text}}</template>
+                <span v-for="(third, index3) in second.children" :key="index3">
+                  <el-sub-menu
+                    v-if="third.children && third.children.length > 0"
+                    :index="third.id"
+                    :key="third.id"
+                  >
+                    <template #title>{{third.text}}</template>
+                  </el-sub-menu>
+                  <el-menu-item
+                    v-else
+                    :index="second.id"
+                    :key="second.id"
+                  >{{third.text}}</el-menu-item>
+                </span>
+              </el-sub-menu>
+              <el-menu-item
+                v-else
+                :index="second.id"
+                :key="'' + second.id"
+              >{{second.text}}</el-menu-item>
+            </span>
+          </el-sub-menu>
+          <el-menu-item
+            v-else
+            :index="first.id"
+            :key="'' + first.id"
+            :style="currStyle"
+          ><div class="first-menu" :style="currStyle">{{first.text}}</div></el-menu-item>
+        </span>
+      </el-menu>
+    </div>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject, getCurrentInstance, nextTick, watch } from 'vue';
+import visual from '@/visual/js/visual';
+import { useRoute, useRouter } from 'vue-router';
+import { usePortalRouterStore as useRouterStore } from '@/portal/pinia/router';
+import EventHandler from '@/visual/js/event';
+import api from '@/http/api';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const active = ref('');
+const route = useRoute();
+const router = useRouter();
+const routerStore = useRouterStore();
+const currNode = ref(props.node);
+const compStyle = ref({});
+const currStyle = ref('');
+const dataList = ref([]);
+new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  compStyle.value = currNode.value.currCompStyle || {};
+  currStyle.value = visual.parseFontStyle(compStyle.value || {}) + ';--portal-menu-color: ' + compStyle.value['fontColor'];
+  dataList.value = routerStore.getMenuTree() || [];
+
+  if (!dataList.value || dataList.value.length === 0) {
+    const res = await api.post('/business/menu/portal-tree');
+    dataList.value = res.data && res.data.children || [];
+  }
+
+  await nextTick(() => initializing.value = false);
+};
+
+const selectMenuItem = (index) => {
+  if (index === route.name) return;
+  if (index.indexOf('http://') >= 0 || index.indexOf('https://') >= 0) {
+    window.open(index);
+  } else {
+    router.push({ name: index });
+  }
+};
+
+const getData = () => {
+  return { };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = () => {
+  init();
+};
+
+watch(() => route, () => {
+  active.value = route.meta.activeName || route.name;
+}, { deep: true });
+
+onMounted(() => {
+  active.value = route.meta.activeName || route.name;
+  refresh();
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style>
+.el-menu--popup .first-menu {
+  color: #303133!important;
+}
+</style>
+
+<style scoped lang="scss">
+.vc-portal-menu {
+  --el-menu-item-height: unset;
+  --el-menu-horizontal-height: unset;
+  width: 100%;
+  :deep(.el-menu) {
+    background: transparent !important;
+    border-bottom: none !important;
+    .el-menu-item.is-active {
+      border-bottom: unset!important;
+    }
+    .el-sub-menu.is-active .el-sub-menu__title {
+      border-bottom: unset!important;
+    }
+    .first-menu > div {
+      color: var(--portal-menu-color, inherit);
+      > .el-menu-item:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  :deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
+    background: unset;
+    outline: unset;
+    color: unset;
+  }
+  :deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
+    background: unset;
+    outline: unset;
+  }
+
+  :deep(.el-menu--horizontal .el-sub-menu__title:hover) {
+    background: unset;
+  }
+}
+</style>

package/src/visual/components/qrcode/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+    @click="() => eventHandler.trigger('点击事件')"
+  >
+    <span class="image-box">
+      <el-image
+        v-if="imageUrl !== ''"
+        preview-teleported
+        hide-on-click-modal
+        :src="imageUrl"
+        :preview-src-list="[imageUrl]"
+        style="width:100%;height:100%"
+        fit="scale-down"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, inject, getCurrentInstance } from 'vue'
+import api from '@/http/api';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const loading = ref(true);
+const message = ref('');
+const imageUrl = ref('');
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  message.value = dataList.length > 0 && dataList[0]['内容'] || '';
+  loading.value = true;
+  api.createQrCode(message.value).then((res) => {
+    loading.value = false;
+    imageUrl.value = URL.createObjectURL(new Blob([res.data]));
+  }).catch(() => {
+    loading.value = false;
+  });
+};
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {}, value: message.value };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped>
+.image-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>

package/src/visual/components/router-view/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, inject, nextTick, onMounted, ref } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const getData = () => {};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>