@arkxos/arkos-system 0.1.0

package/src/admin/visual/components/app/list/goods/double.vue

@@ -0,0 +1,184 @@
+<template>
+  <div
+    v-if="!loading"
+    class="vc-app-list-goods-double"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <div
+      v-if="dataList && dataList.length > 0"
+      class="vc-app-list-goods-double-list"
+    >
+      <div
+        v-for="(data, index) in dataList"
+        :key="index"
+        class="vc-app-list-goods-double-item"
+      >
+        <div style="text-align: center">
+          <img v-if='data["图片"]' :src='imageUrl + data["图片"]' alt />
+          <vc-icon v-else iconId="018ece4f76dbdc838868" size="120" />
+        </div>
+        <div class="item-content">
+          <div class="item-line">
+            <div class="item-name-label" v-if='data["名称标签"]'>{{data["名称标签"]}}</div>
+            <div class="item-name ellipsis">{{data["名称"]}}</div>
+          </div>
+          <div class="item-line">
+            <div class="item-label ellipsis">{{(data["标签"] || '').replace(/,/g, ' ')}}</div>
+          </div>
+          <div class="item-line item-baseline">
+            <div class="item-red item-smaller">￥</div>
+            <div class="item-red item-bigger">{{tool.getMoneyInt(data["价格"])}}</div>
+            <div class="item-red item-smaller item-mr5">.{{tool.getMoneyScale(data["价格"])}}</div>
+            <div class="item-red item-smaller item-mr5" v-if='data["价格标签"]'>{{data["价格标签"]}}</div>
+            <div class="item-grey item-smaller ellipsis">{{data["价格补充"]}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="vc-app-list-goods-double-empty"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <span style="margin-top: 20px;">暂无数据</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const dataList = ref([]);
+const loading = ref(true);
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+
+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, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList.value);
+};
+
+watch(() => props.node.compData?.refresh, () => {
+  loadData();
+});
+
+onMounted(() => {
+  init();
+  loadData();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-app-list-goods-double {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background: #F5F6FA;
+  .vc-app-list-goods-double-list {
+    width: 1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: auto;
+    padding: 10px;
+    gap: 10px;
+    .vc-app-list-goods-double-item {
+      white-space: nowrap;
+      width: calc(50% - 5px);
+      display: flex;
+      flex-direction: column;
+      border-radius: 5px;
+      background: white;
+      padding-bottom: 3px;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 5px 5px 0 0;
+      }
+      .item-content {
+        padding: 5px;
+        .ellipsis {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+        .item-red {
+          color: #FF3333;
+        }
+        .item-grey {
+          color: #8c939d;
+        }
+        .item-smaller {
+          font-size: 12px;
+        }
+        .item-bigger {
+          font-size: 20px;
+          font-weight: bold;
+        }
+        .item-baseline {
+          align-items: baseline!important;
+        }
+        .item-line {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        .item-name-label {
+          background: #FF3333;
+          color: white;
+          font-size: 10px;
+          border-radius: 5px;
+          padding: 2px 5px;
+          margin-right: 5px;
+        }
+        .item-name {
+          flex-grow: 1;
+          width: 1px;
+        }
+        .item-label {
+          color: #D97E23;
+          font-size: 12px;
+          height: 25px;
+          line-height: 25px;
+        }
+        .item-mr5 {
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+  .vc-app-list-goods-double-list::-webkit-scrollbar {
+    display: none;
+  }
+  .vc-app-list-goods-double-icon {
+    width: 30px;
+    margin-left: 10px;
+    border-left: 1px solid #ccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .vc-app-list-goods-double-empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

package/src/admin/visual/components/app/list/nav/image.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    v-if="!loading"
+    class="vc-app-list-nav-image"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <div
+      v-if="dataList && dataList.length > 0"
+      class="vc-app-list-nav-image-list"
+    >
+      <div
+        v-for="(data, index) in dataList"
+        :key="index"
+        class="vc-app-list-nav-image-item"
+      >
+        <div>
+          <img v-if='data["图片"]' :src='imageUrl + data["图片"]' alt />
+          <vc-icon v-else iconId="018ece4f76dbdc838868" size="60" />
+        </div>
+        <div>{{data["名称"]}}</div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="vc-app-list-nav-image-empty"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <span style="margin-top: 20px;">暂无数据</span>
+    </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 dataList = ref([]);
+const loading = ref(true);
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+
+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, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList.value);
+};
+
+watch(() => props.node.compData?.refresh, () => {
+  loadData();
+});
+
+onMounted(() => {
+  init();
+  loadData();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-app-list-nav-image {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  .vc-app-list-nav-image-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: auto;
+    gap: 10px;
+    padding: 0 10px;
+    .vc-app-list-nav-image-item {
+      padding: 0 8px;
+      white-space: nowrap;
+      width: calc(20% - 8px);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+  .vc-app-list-nav-image-list::-webkit-scrollbar {
+    display: none;
+  }
+  .vc-app-list-nav-image-icon {
+    width: 30px;
+    margin-left: 10px;
+    border-left: 1px solid #ccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .vc-app-list-nav-image-empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

package/src/admin/visual/components/app/list/nav/text.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-if="!loading"
+    class="vc-app-list-nav-text"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <div
+      v-if="dataList && dataList.length > 0"
+      class="vc-app-list-nav-text-list"
+    >
+      <div
+        v-for="(data, index) in dataList"
+        :key="index"
+        class="vc-app-list-nav-text-item"
+        :style="data['主键'] === currValue ? getActiveStyle() : getInactiveStyle()"
+      >{{data["名称"]}}</div>
+    </div>
+    <div
+      v-if="dataList && dataList.length > 0"
+      class="vc-app-list-nav-text-icon"
+    >
+      <ac-icon iconId="0197e491a5b4194b6032" size="14" />
+    </div>
+    <div
+      v-else
+      class="vc-app-list-nav-text-empty"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <span style="margin-top: 20px;">暂无数据</span>
+    </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 dataList = ref([]);
+const loading = ref(true);
+const currValue = ref('');
+
+const getActiveStyle = () => {
+  let result = '';
+  if (currNode.value.currCompStyle['fontSize']) {
+    result += 'font-size: ' + currNode.value.currCompStyle['fontSize'] + 'px;';
+  }
+  if (currNode.value.currCompStyle['activeColor']) {
+    result += 'color: ' + currNode.value.currCompStyle['activeColor'] + ';';
+  }
+  result += 'font-weight: bolder;';
+  return result;
+};
+
+const getInactiveStyle = () => {
+  let result = '';
+  if (currNode.value.currCompStyle['fontSize']) {
+    result += 'font-size: ' + currNode.value.currCompStyle['fontSize'] + 'px;';
+  }
+  if (currNode.value.currCompStyle['inactiveColor']) {
+    result += 'color: ' + currNode.value.currCompStyle['inactiveColor'] + ';';
+  }
+  return result;
+};
+
+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, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList.value);
+  currValue.value = dataList.value.length > 0 ? dataList.value[0]['主键'] : '';
+};
+
+watch(() => props.node.compData?.refresh, () => {
+  loadData();
+});
+
+onMounted(() => {
+  init();
+  loadData();
+});
+</script>
+
+<style scoped lang="scss">
+.vc-app-list-nav-text {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  .vc-app-list-nav-text-list {
+    width: 1px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow: auto;
+    .vc-app-list-nav-text-item {
+      padding: 0 8px;
+      white-space: nowrap;
+    }
+  }
+  .vc-app-list-nav-text-list::-webkit-scrollbar {
+    display: none;
+  }
+  .vc-app-list-nav-text-icon {
+    width: 30px;
+    margin-left: 10px;
+    border-left: 1px solid #ccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .vc-app-list-nav-text-empty {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+  <el-button v-bind="options">
+    <cc-icon
+      v-if="prefixIconId"
+      :iconId="prefixIconId"
+      style="margin-right: 5px;"
+    />
+    {{ buttonName }}
+    <cc-icon
+      v-if="suffixIconId"
+      :iconId="suffixIconId"
+      style="margin-left: 5px;"
+    />
+  </el-button>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  compStyle: Object,
+});
+
+const buttonName = ref('');
+const prefixIconId = ref('');
+const suffixIconId = ref('');
+
+const init = () => {
+  const compStyle = props.compStyle;
+  buttonName.value = compStyle['buttonName'] || '';
+  prefixIconId.value = compStyle['prefixIcon'] || '';
+  suffixIconId.value = compStyle['suffixIcon'] || '';
+};
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'size');
+  visual.addIfNotNull(data, compStyle, 'type');
+  visual.addIfNotNull(data, compStyle, 'style');
+  visual.addIfNotNull(data, compStyle, 'label');
+  visual.addIfNotNull(data, compStyle, 'plain');
+  visual.addIfNotNull(data, compStyle, 'text');
+  visual.addIfNotNull(data, compStyle, 'round');
+  visual.addIfNotNull(data, compStyle, 'circle');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  return data;
+});
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+onMounted(() => {
+  init();
+});
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <draggable
+    v-model="currNode"
+    :class="['vc-container', !currNode.children || currNode.children.length === 0 ? 'empty' : '']"
+    :style="visual.parseStyle(compStyle)"
+    :inputParam="inputParam"
+    @mouseoverNode="mouseoverNode"
+    @activeNode="activeNode"
+    @deleteNode="deleteNode"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Draggable from '@/admin/visual/draggable.vue';
+import visual from '@/visual/js/visual';
+
+const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode']);
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  inputParam: Object
+});
+const currNode = ref(props.node);
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, currNode.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+</script>

package/src/admin/visual/components/custom-list/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    class="vc-list"
+    :style="visual.parseStyle(compStyle)"
+  >
+    <div
+      class="vc-list-item"
+      :style="getStyle(dataList[0])"
+    >
+      <draggable
+        v-model="currNode"
+        :data="dataList[0]"
+        :class="!currNode.children || currNode.children.length === 0 ? 'empty' : ''"
+        @mouseoverNode="mouseoverNode"
+        @activeNode="activeNode"
+        @deleteNode="deleteNode"
+      />
+    </div>
+    <div
+      class="vc-list-item"
+      v-for="(data, index) in dataList.slice(1)"
+      :key="index"
+      :style="getStyle(data)"
+    >
+      <draggable
+        class="vc-list-item none-pointer-events"
+        v-model="currNode.children"
+        :data="data"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import Draggable from '@/admin/visual/draggable.vue';
+import visual from '@/visual/js/visual';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode'])
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const dataList = ref([{}]);
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, currNode.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+
+const init = async() => {
+  dataList.value = (await visual.loadData(props.compData, {}, {}) || {}).data || [];
+};
+
+const getStyle = (data) => {
+  const compStyle = props.compStyle || {};
+  const itemList = compStyle['itemList'] || [];
+  for (const item in itemList) {
+    let result = false;
+    (tool.groupBy(item.conditionList || [], (item) => [item.grouping || 999]) || []).forEach(conditionList => {
+      result = result || checkConditionList(conditionList, data);
+    });
+    if (result) {
+      return visual.parseStyle(item, { 'flex-grow': 1 });
+    }
+  }
+  return { 'flex-grow': 1 };
+};
+
+const checkConditionList = (conditionList, data) => {
+  let result = true;
+  (conditionList || []).forEach(condition => {
+    const testValue = data[condition.condition];
+    switch (condition.type) {
+      case '包含':
+        result = result && (testValue || '').indexOf(condition.value || '') >= 0;
+        break;
+      case '不包含':
+        result = result && (testValue || '').indexOf(condition.value || '') === -1;
+        break;
+      case '等于':
+        result = result && (testValue || '') === (condition.value || '');
+        break;
+      case '不等于':
+        result = result && (testValue || '') !== (condition.value || '');
+        break;
+      case '大于':
+        result = result && parseFloat(testValue || '0') > parseFloat(condition.value || '0');
+        break;
+      case '大于等于':
+        result = result && parseFloat(testValue || '0') >= parseFloat(condition.value || '0');
+        break;
+      case '小于':
+        result = result && parseFloat(testValue || '0') < parseFloat(condition.value || '0');
+        break;
+      case '小于等于':
+        result = result && parseFloat(testValue || '0') <= parseFloat(condition.value || '0');
+        break;
+    }
+  });
+  return result;
+};
+
+watch(() => props.node, (val) => {
+  currNode.value = val;
+}, { immediate: true });
+
+watch(() => props.compData, () => {
+  init();
+}, { deep: true, immediate: true });
+</script>
+
+<style scoped lang="scss">
+.none-pointer-events {
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="vc-data">数据加载组件</div>
+</template>
+
+<script setup>
+import { watch, onMounted, ref } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const queryInfo = ref({
+  pageNumber: 1,
+  pageSize: 1
+});
+
+const loadData = async() => {
+  const dataList = (await visual.loadData(
+    props.compData,
+    {},
+    { ...queryInfo.value },
+    currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+};
+
+watch(() => props.compData?.refresh, () => {
+  loadData();
+});
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped>
+.vc-data {
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+</style>