@arkxos/arkos-system 0.1.0

package/src/admin/visual/components/form/textarea.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-input
+    v-model="currValue"
+    type="textarea"
+    v-bind="options"
+  />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const currValue = ref('');
+
+const init = () => {
+  if (!props.compData?.dataSourceType) {
+    loadValue();
+  }
+};
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'size');
+  visual.addIfNotNull(data, compStyle, 'minlength');
+  visual.addIfNotNull(data, compStyle, 'maxlength');
+  visual.addIfNotNull(data, compStyle, 'placeholder');
+  visual.addIfNotNull(data, compStyle, 'rows');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'clearable');
+  visual.addIfNotNull(data, compStyle, 'readonly');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  visual.addIfNotNull(data, compStyle, 'showWordLimit');
+  visual.addIfNotNull(data, compStyle, 'autocomplete');
+  return data;
+});
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  currValue.value = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>

package/src/admin/visual/components/form/unit-tree.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-input v-model="message" v-bind="options" />
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue';
+
+import { getUnit } from '@/utils/system';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const currValue = ref('');
+const treeData = ref([]);
+const message = ref('');
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+  return {
+    placeholder: compStyle['placeholder'] || '--请选择--'
+  };
+});
+
+const calcValue = async() => {
+  if (treeData.value && treeData.value.length > 0) {
+    const ids = (currValue.value || '').split(',');
+    const list = findData(treeData.value, ids);
+    if (list && list.length > 0) {
+      for (let i = 0; i < list.length; i++) {
+        message.value = list[i].text;
+      }
+    } else {
+      message.value = '';
+    }
+  } else {
+    message.value = '';
+  }
+};
+
+const findData = (list, ids) => {
+  let results = [];
+  if (list === undefined || list == null || ids === undefined || ids == null) {
+    return results;
+  }
+
+  for (let i = 0; i < list.length; i++) {
+    const id = list[i].id + '';
+    if (id !== '0' && ids.indexOf(id) >= 0) {
+      results.push(list[i]);
+    }
+
+    if (list[i].children !== undefined && list[i].children != null) {
+      results = results.concat(findData(list[i].children, ids));
+    }
+  }
+
+  return results;
+};
+
+const loadTree = async () => {
+  treeData.value = await getUnit();
+  await calcValue();
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  currValue.value = dataList.length > 0 && dataList[0]['内容'] || '';
+  await calcValue();
+};
+
+watch(() => props.compStyle, () => {
+  loadValue();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  loadTree();
+  loadValue();
+});
+</script>

package/src/admin/visual/components/icon/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <span
+    v-if="icon.type === 'svg' && icon.content"
+    v-html="icon.content"
+    class="vc-icon"
+  ></span>
+  <img
+    v-else-if="icon.type === 'base64' && icon.content"
+    :src="'data:image/png;base64,' + icon.content"
+    alt=""
+  />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { getIconList } from '@/utils/system';
+
+const props = defineProps({
+  iconId: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Object,
+    default: null
+  },
+});
+
+const icon = ref({});
+
+const init = async() => {
+  if (props.icon) {
+    icon.value = props.icon;
+  } else if (props.iconId) {
+    const iconList = await getIconList();
+    icon.value = iconList.find(item => item.id === props.iconId) || {};
+  }
+};
+
+watch(() => props, () => {
+  init();
+}, { deep: 1 });
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped>
+.vc-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: inherit;
+  width: 1em!important;
+  height: 1em!important;
+}
+.vc-icon svg {
+  width: 1em;
+  height: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/admin/visual/components/image/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div :style="style">
+    <div v-if="disabled" :class="['image-box', border ? 'border' : '']">
+      <el-image
+        v-if="imageUrl !== ''"
+        preview-teleported
+        hide-on-click-modal
+        :src="imageUrl"
+        :preview-src-list="[imageUrl]"
+        :style="{
+          width: width || '100%',
+          height: height || '100%',
+          maxWidth: '100%',
+          maxHeight: '100%'
+        }"
+      />
+    </div>
+    <div v-else class="image-edit-box">
+      <el-upload
+        class="vc-image"
+        action=""
+        :disabled="disabled"
+        :show-file-list="false"
+        :accept="'image/*'"
+      >
+        <cc-icon v-if="loading" size="30" color="#999" iconId="018dcab3d3dfd6e82393" class="spinner" />
+        <span v-else-if="imageUrl && !loading" class="image-item">
+          <img :src="imageUrl" alt />
+        </span>
+        <cc-icon v-else size="30" color="#999" iconId="018dca3b4707c4c43a2f"></cc-icon>
+      </el-upload>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object,
+  inputParam: Object
+});
+const currNode = ref(props.node);
+const loading = ref(true);
+const fileId = ref('');
+const imageUrl = ref('');
+const width = ref('');
+const height = ref('');
+const disabled = ref(false);
+const border = ref(false);
+
+const init = () => {
+  const compStyle = props.compStyle || {};
+  width.value = compStyle['width'];
+  height.value = compStyle['height'];
+  disabled.value = compStyle['readonly'];
+  border.value = compStyle['border'] || false;
+};
+
+const loadValue = async() => {
+  loading.value = false;
+  const dataList = (await visual.loadData(
+    props.compData,
+    {},
+    { inputParam: props.inputParam },
+    currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  fileId.value = dataList.length > 0 && dataList[0]['内容'] || '';
+  imageUrl.value = import.meta.env.VITE_IMAGE_PATH + fileId.value;
+};
+
+const style = computed(() => {
+  const compStyle = props.compStyle || {};
+  return visual.parseStyle(compStyle);
+});
+
+watch(() => props.compStyle, () => {
+  init();
+  loadValue();
+}, { deep: true });
+
+watch(() => props.node.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>
+
+<style scoped>
+.vc-image {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border: 1px dashed #c2c2c2;
+}
+.vc-image :deep(.el-upload) {
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+  outline: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.vc-image :deep(.el-upload span) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.vc-image:not(.is-disabled) :deep(.el-upload) {
+  cursor: pointer;
+}
+.vc-image:not(.is-disabled) :deep(.el-upload:hover) {
+  border-color: #409EFF;
+}
+.loading-icon {
+  font-size: 28px;
+  color: #8c939d;
+  position: absolute;
+}
+.plus-icon {
+  font-size: 28px;
+  color: #8c939d;
+  position: absolute;
+}
+.vc-image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.image-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.border {
+  border: 1px dashed #c2c2c2;
+}
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.vc-image :deep(.el-upload:after) {
+  display: block;
+  margin-top: 100%;
+  content: ""
+}
+.image-item {
+  position: relative;
+}
+.image-item .vc-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+</style>

package/src/admin/visual/components/index.js

@@ -0,0 +1,44 @@
+import { defineAsyncComponent } from 'vue';
+import { useAdminVisualCompStore } from '@/admin/visual/js/visual-comp';
+import { useVisualCompStore } from '@/visual/js/visual-comp';
+
+export default function install(app) {
+  // const adminVisualComps = import.meta.glob('@/admin/visual/components/**/*.vue');
+  // const visualComps = import.meta.glob('@/visual/components/**/*.vue');
+  const adminVisualComps = require.context('@/admin/visual/components/', true, /\.vue$/);
+  const visualComps = require.context('@/visual/components/', true, /\.vue$/);
+
+  const adminVisualComp = useAdminVisualCompStore();
+  const visualComp = useVisualCompStore();
+
+  Object.entries(adminVisualComps).forEach(async ([key, value]) => {
+    const paths = key.replace('/src/admin/visual/components/', '').split('/');
+    const name = getName('avc-', paths);
+    app.component(name, defineAsyncComponent(value));
+    adminVisualComp.setVisualComp(name, { name: name, styleList: [] });
+  });
+
+  Object.entries(visualComps).forEach(async ([key, value]) => {
+    const paths = key.replace('/src/visual/components/', '').split('/');
+    const name = getName('vc-', paths);
+    app.component(name, defineAsyncComponent(value));
+    visualComp.setVisualComp(name, { name: name, styleList: [] });
+  });
+}
+
+function getName(prefix, paths) {
+  let name = prefix + paths[0];
+  if (paths[1] !== 'index.vue') {
+    name += '-' + paths[1].replace('.vue', '');
+  }
+  if (paths.length > 2 && paths[2] !== 'index.vue') {
+    name += '-' + paths[2].replace('.vue', '');
+  }
+  if (paths.length > 3 && paths[3] !== 'index.vue') {
+    name += '-' + paths[3].replace('.vue', '');
+  }
+  name = name.replace(/[A-Z]/g, function(str) {
+    return '-' + str.toLowerCase();
+  });
+  return name;
+}

package/src/admin/visual/components/list/block.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    v-if="!loading"
+    class="vc-block-list"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <div
+      v-for="(data, index) in dataList"
+      :key="index"
+      class="vc-block-list-item"
+    >
+      <div
+        class="vc-block-list-item-title"
+        :style="getTitleStyle()"
+      >{{data["标题"]}}</div>
+      <div
+        class="vc-block-list-item-content"
+        :style="getContentStyle()"
+      >{{data["内容"]}}</div>
+      <div
+        v-if="currNode.currStyle && currNode.currStyle.subtitleList && currNode.currStyle.subtitleList.length > 0"
+        class="vc-block-list-item-subtitle"
+        :style="getSubtitleStyle()"
+      >
+        <div
+          class="vc-block-list-item-subtitle-item"
+          v-for="(subtitle, index2) in currNode.currStyle.subtitleList"
+          :key="index2"
+        >
+          <div class="vc-block-list-item-subtitle-item-field">{{subtitle.name}}：</div>
+          <div class="vc-block-list-item-subtitle-item-value">{{data[subtitle.value] || ''}}</div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="!dataList || dataList.length === 0"
+      class="vc-block-list"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <div class="vc-block-list-empty">
+        <img src="@/assets/images/no-data.png" style="width: 100px" alt />
+        <span style="margin-top: 20px;">暂无数据</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const dataList = ref([]);
+const loading = ref(true);
+
+const init = async() => {
+  loading.value = true;
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  await nextTick(() => loading.value = false);
+};
+
+const loadData = async() => {
+  dataList.value = (await visual.loadData(props.compData, {}, {}) || {}).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList.value);
+};
+
+const getTitleStyle = () => {
+  const compStyle = props.compStyle || {};
+  return visual.parseFontStyle(compStyle, '', 'title.');
+};
+
+const getContentStyle = () => {
+  const compStyle = props.compStyle || {};
+  let result = visual.parseFontStyle(compStyle, '', 'content.');
+  if (compStyle && compStyle['value.show'] === false) {
+    result += 'display: none!important;';
+  }
+  return result;
+};
+
+const getSubtitleStyle = () => {
+  const compStyle = props.compStyle || {};
+  return visual.parseFontStyle(compStyle, '', 'subtitle.');
+};
+
+watch(() => props.node, (val) => {
+  currNode.value = val;
+}, { immediate: true });
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true, immediate: true });
+
+watch(() => props.node.compData?.refresh, () => {
+  loadData();
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+.vc-block-list {
+  width: 100%;
+  .vc-block-list-empty {
+    width: 100%;
+    padding: 50px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.vc-block-list-item {
+  width: 100%;
+  padding: 15px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+.vc-block-list .vc-block-list-item:last-child {
+  border-bottom: none!important;
+}
+.vc-block-list-item-title {
+  padding: 15px 0;
+}
+.vc-block-list-item-content {
+  padding: 8px 0;
+}
+.vc-block-list-item-subtitle {
+  padding: 8px 0;
+}
+.vc-block-list-item-subtitle-item,
+.vc-block-list-item-subtitle-item-field,
+.vc-block-list-item-subtitle-item-value {
+  font-size: inherit;
+}
+.vc-block-list-item-subtitle {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  .vc-block-list-item-subtitle-item {
+    display: flex;
+    flex-direction: row;
+    margin-right: 8px;
+    width: 100%;
+    .vc-block-list-item-subtitle-item-field {
+      flex-shrink: 1;
+    }
+    .vc-block-list-item-subtitle-item-value {
+      width: 1px;
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

package/src/admin/visual/components/list/button.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    v-if="!loading"
+    class="vc-button-list"
+    :style="{gap: gap}"
+  >
+    <div
+      v-if="compStyle['showAll']"
+      class="vc-button-list-item"
+      :style="getStyle({})"
+    >全部</div>
+    <div
+      v-for="(data, index) in dataList"
+      :key="index"
+      class="vc-button-list-item"
+      :style="getStyle(data)"
+    >{{data["显示字段"]}}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const currValue = ref('');
+const dataList = ref([{}]);
+const gap = ref('');
+const loading = ref(true);
+
+const init = async() => {
+  loading.value = true;
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  gap.value = props.compStyle['gap'];
+  await nextTick(() => loading.value = false);
+};
+
+const loadDataList = async() => {
+  loading.value = true;
+  currValue.value = await visual.loadValue(currNode.value, {}) || '';
+  dataList.value = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList.value);
+  await nextTick(() => loading.value = false);
+};
+
+const getStyle = (data) => {
+  const compStyle = props.compStyle || {};
+  const prefix = currValue.value === (data['传值字段'] || '') ? 'selected.' : '';
+  const styleList = compStyle[prefix + 'styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.node.compData?.refresh, () => {
+  loadDataList();
+});
+
+onMounted(async() => {
+  await init();
+  await loadDataList();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-button-list {
+  display: flex;
+  flex-direction: row;
+}
+</style>