@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,123 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div
+      class="vc-button-list"
+      :style="{gap: gap}"
+    >
+      <div
+        v-if="compStyle['showAll']"
+        class="vc-button-list-item"
+        :style="getStyle({})"
+        @click="changeData({})"
+      >全部</div>
+      <div
+        v-for="(data, index) in dataList"
+        :key="index"
+        class="vc-button-list-item"
+        :style="getStyle(data)"
+        @click="changeData(data)"
+      >{{data["显示字段"]}}</div>
+    </div>
+  </div>
+  <div
+    v-if="initializing"
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+  ></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 tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object,
+  inputParam: Object
+});
+
+const initializing = ref(true);
+const currNode = ref(props.node);
+const currValue = ref('');
+const compStyle = ref({});
+const dataList = ref([]);
+const gap = ref('');
+const eventHandler = 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 || {};
+  gap.value = compStyle.value['gap'];
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  currValue.value = await visual.loadValue(currNode.value, eventHandler) || '';
+};
+
+const loadDataList = tool.debounce(async() => {
+  dataList.value = (await visual.loadData(
+    currNode.value.compData,
+    eventHandler,
+    getData(),
+    currNode.value) || {}).data || [];
+});
+
+const getStyle = (data) => {
+  const prefix = currValue.value === (data['传值字段'] || '') ? 'selected.' : '';
+  const styleList = compStyle.value[prefix + 'styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
+};
+
+const changeData = (data) => {
+  if (currValue.value === (data['传值字段'] || '') + '') return;
+  currValue.value = (data['传值字段'] || '') + '';
+  eventHandler.trigger('点击条目事件', data);
+};
+
+const getData = () => {
+  return {
+    value: currValue.value || '',
+    inputParam: currNode.value.inputParam || {}
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  loadDataList();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  loadDataList();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped lang="scss">
+.vc-button-list {
+  display: flex;
+  flex-direction: row;
+}
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div
+      class="vc-card-list"
+      :style="visual.parseStyle(currNode.currCompStyle)"
+    >
+      <div
+        v-for="(data, index) in dataList"
+        :key="index"
+        class="vc-card-list-item"
+        :style="getStyle(data)"
+        @click.stop="() => clickItem(data)"
+      >
+        <div
+          class="vc-card-list-item-title"
+          :style="getTitleStyle(data)"
+          @click.stop="() => clickTitle(data)"
+        >{{data["标题"]}}</div>
+        <div
+          class="vc-card-list-item-value"
+          :style="getValueStyle(data)"
+        >{{data["数值"]}}</div>
+      </div>
+    </div>
+  </div>
+  <div v-if="initializing" class="loading">
+    <div
+      v-loading="true"
+      element-loading-text="数据加载中..."
+    ></div>
+  </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 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 init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  compStyle.value = currNode.value.currCompStyle || {};
+  await nextTick(() => initializing.value = false);
+};
+
+const loadDataList = tool.debounce(async() => {
+  initializing.value = true;
+  dataList.value = await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value);
+  await nextTick(() => initializing.value = false);
+});
+
+const getTitleStyle = (data) => {
+  const styleList = compStyle.value['styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  return visual.parseFontStyle(style, '', 'title.');
+};
+
+const getValueStyle = (data) => {
+  const styleList = compStyle.value['styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  let result = visual.parseFontStyle(style, '', 'value.');
+  if (style && style['value.show'] === false) {
+    result += 'display: none!important;';
+  }
+  return result;
+};
+
+const getStyle = (data) => {
+  const styleList = compStyle.value['styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  return style
+    ? visual.parseStyle(style)
+    : 'background: #409EFF;' +
+    'color: white;' +
+    'height: 100px;' +
+    'justify-content: center;' +
+    'align-items: center;' +
+    'display: flex;' +
+    'flex-direction: column;' +
+    'border-radius: 5px;'
+};
+
+const clickItem = (row) => {
+  eventHandler.trigger('点击事件', { col: '卡片', row: row });
+};
+
+const clickTitle = (row) => {
+  eventHandler.trigger('点击标题事件', { col: '标题', row: row });
+};
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {} };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  loadDataList();
+};
+
+onMounted(async() => {
+  await init();
+  loadDataList();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

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

@@ -0,0 +1,214 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div
+      v-if="dataList.length > 0"
+      class="vc-list-custom"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <div
+        class="vc-list-custom-item"
+        v-for="(data, index) in dataList"
+        :key="index"
+        @click="clickItem(data)"
+      >
+        <Component
+          v-for="(child, index) in currNode.children"
+          :key="index"
+          :is="'vc-' + child.type"
+          :node="tool.deepClone(child)"
+          :inputParam="getInputParam(data)"
+        />
+      </div>
+      <div
+        v-if="dataPage && dataLoadMode === 'pagination'"
+        class="vc-pagination"
+      >
+        <el-pagination
+          :layout="`total, prev, pager, next
+            ${showJumper ? ',jumper' : ''}
+            ${showSizes ? ',sizes' : ''}`"
+          :current-page="queryInfo.pageNumber"
+          :page-size="queryInfo.pageSize"
+          :total="page.totalRecord"
+          :pager-count="pagerCount"
+          @current-change="refreshPage"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+    <div v-if="loading" class="loading">
+      <div
+        v-loading="true"
+        element-loading-text="数据加载中..."
+      ></div>
+    </div>
+    <div
+      v-if="!loading && dataList.length === 0"
+      class="vc-list-custom"
+      :style="visual.parseStyle(currNode.currCompStyle)"
+    >
+      <div class="vc-list-empty">
+        <span style="margin-top: 20px;">暂无数据</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, inject, getCurrentInstance, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import emitter from '@/utils/bus';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object
+});
+
+const initializing = ref(true);
+const loading = ref(true);
+const currNode = ref(props.node);
+const compStyle = ref({});
+const queryInfo = ref({
+  pageNumber: 1,
+  pageSize: 10
+});
+const hasPage = ref(true);
+const page = ref({});
+const dataList = ref([]);
+const dataPage = ref(false);
+const dataLoadMode = ref('pagination');
+const showJumper = ref(false);
+const showSizes = ref(false);
+const pagerCount = ref(7);
+const eventHandler = 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 || {};
+  const compData = currNode.value.compData || {};
+  hasPage.value = true;
+  dataPage.value = compData.dataPage || false;
+  dataLoadMode.value = compData.dataLoadMode || 'pagination';
+  showJumper.value = compData.showJumper || false;
+  showSizes.value = compData.showSizes || false;
+  pagerCount.value = compData.pagerCount || 7;
+  if (dataPage.value) {
+    queryInfo.value.pageSize = compData.dataPageSize || 20;
+  } else {
+    queryInfo.value.pageSize = compData.dataQueryTotal || 20;
+  }
+
+  if (dataLoadMode.value === 'bottom') {
+    emitter.off('onReachBottom', onReachBottom);
+    emitter.on('onReachBottom', onReachBottom);
+  }
+  await nextTick(() => initializing.value = false);
+};
+
+const clickItem = (row) => {
+  eventHandler.trigger('点击条目事件', row);
+};
+
+const handleSizeChange = (pageSize) => {
+  hasPage.value = true;
+  queryInfo.value.pageSize = pageSize;
+  refreshPage(1);
+};
+
+const refreshPage = async(pageNumber) => {
+  queryInfo.value.pageNumber = pageNumber;
+  findPage();
+};
+
+const findPage = tool.debounce(async() => {
+  if (!hasPage.value) return;
+
+  if (queryInfo.value.pageNumber === 1 || dataLoadMode.value !== 'bottom') {
+    dataList.value = [];
+  }
+  loading.value = true;
+  page.value = await visual.loadData(
+    currNode.value.compData,
+    eventHandler,
+    getData(),
+    currNode.value) || {};
+  if (dataLoadMode.value === 'bottom') {
+    if (page.value.data && page.value.data.length > 0) {
+      dataList.value.push(...page.value.data);
+    }
+    if (!page.value.data ||
+        dataList.value.length >= page.value.totalRecord ||
+        page.value.data.length < queryInfo.value.pageSize) {
+      hasPage.value = false;
+    }
+  } else {
+    dataList.value = page.value.data || [];
+  }
+  await nextTick(() => loading.value = false);
+});
+
+const getInputParam = (data) => {
+  const result = {};
+  result[`list.${currNode.value.id}.row`] = data;
+  return result;
+};
+
+const getData = () => {
+  return {
+    ...queryInfo.value,
+    inputParam: currNode.value.inputParam || {}
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  hasPage.value = true;
+  await refreshPage(1);
+  await nextTick(() => initializing.value = false);
+};
+
+const onReachBottom = () => {
+  queryInfo.value.pageNumber++;
+  findPage();
+};
+
+onMounted(async() => {
+  await init();
+  await refreshPage(1);
+  await eventHandler.trigger('初始化事件');
+});
+
+onUnmounted(() => {
+  emitter.off('onReachBottom', onReachBottom);
+});
+
+defineExpose({ init, getData, changeStyle, refresh });
+</script>
+
+<style scoped>
+.vc-pagination {
+  margin: 10px 0;
+  padding: 5px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  place-content: flex-end;
+  background: #ffffff;
+  border-radius: 5px;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,182 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-checkbox-group v-model="selectList">
+      <div
+        class="vc-image-list"
+        :style="visual.parseStyle(currNode.currCompStyle)"
+      >
+        <div
+          v-for="(data, index) in checkDataList"
+          :key="index"
+          class="vc-image-item"
+          :style="itemStyle"
+        >
+          <el-image
+            v-if="data['图片']"
+            preview-teleported
+            hide-on-click-modal
+            :src="imageUrl + data['图片']"
+            :preview-src-list="[imageUrl + data['图片']]"
+            style="width:100%;height:100%"
+            :fit="imageFit"
+          />
+          <div :style="checkboxStyle">
+            <el-checkbox
+              v-if="showCheckbox"
+              :key="data.tempUuid"
+              :value="data.tempUuid"
+            ></el-checkbox>
+          </div>
+        </div>
+      </div>
+    </el-checkbox-group>
+  </div>
+  <div
+    v-if="initializing"
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+  ></div>
+</template>
+
+<script setup>
+import { ref, nextTick, inject, getCurrentInstance, onMounted, computed, watch } from 'vue';
+import visual from '@/visual/js/visual';
+import tool from '@/utils/tool';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object,
+  inputParam: Object
+});
+const currNode = ref(props.node);
+const dataList = ref([{}]);
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+const showCheckbox = ref(false);
+const checkboxStyle = ref('');
+const selectList = ref([]);
+const itemStyle = ref('');
+const imageFit = ref('cover');
+const initializing = ref(true);
+const compStyle = ref({});
+const minSelect = ref(0);
+const maxSelect = ref(0);
+const pageData = inject('pageData', null);
+const eventHandler = 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 || {};
+  showCheckbox.value = compStyle.value['checkbox'] || false;
+  checkboxStyle.value = 'position: absolute;' + (compStyle.value['checkbox.position'] || '');
+  minSelect.value = parseInt(compStyle.value['min-select'] || '0');
+  maxSelect.value = parseInt(compStyle.value['max-select'] || '0');
+  initItemStyle();
+  await nextTick(() => initializing.value = false);
+};
+
+const loadDataList = tool.debounce(async() => {
+  initializing.value = true;
+  dataList.value = await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value);
+  await nextTick(() => initializing.value = false);
+});
+
+const initItemStyle = () => {
+  itemStyle.value = 'position: relative;';
+  imageFit.value = compStyle.value['image.fit'] || 'cover';
+  itemStyle.value += 'width: ' + compStyle.value['image.width'] + ';';
+  itemStyle.value += 'height: ' + compStyle.value['image.height'] + ';';
+  return itemStyle.value;
+};
+
+const checkDataList = computed(() => {
+  dataList.value.forEach(data => {
+    data.tempUuid = tool.uuids();
+  })
+  return dataList.value;
+});
+
+const getData = () => {
+  const resultList = [];
+  selectList.value.forEach(tempUuid => {
+    const find = dataList.value.find(item => item.tempUuid === tempUuid);
+    if (find) {
+      const result = tool.deepClone(find);
+      delete result['tempUuid'];
+      resultList.push(result);
+    }
+  });
+  return {
+    inputParam: currNode.value.inputParam || {},
+    dataList: resultList
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const validate = (callback) => {
+  const promise = new Promise((resolve, reject) => {
+    const selectCount = selectList.value.length;
+    if (minSelect.value > 0 && selectCount < minSelect.value) {
+      reject(new Error('最少选择 ' + minSelect.value + ' 张图片！'));
+    }
+    if (maxSelect.value > 0 && selectCount > maxSelect.value) {
+      reject(new Error('最多只能选择 ' + maxSelect.value + ' 张图片！'));
+    }
+    resolve(true);
+  });
+  promise.then(valid => callback(valid));
+  return promise;
+};
+
+watch(() => selectList.value, (list) => {
+  const resultList = [];
+  list.forEach(tempUuid => {
+    const find = dataList.value.find(item => item.tempUuid === tempUuid);
+    if (find) {
+      const result = tool.deepClone(find);
+      delete result['tempUuid'];
+      resultList.push(result);
+    }
+  });
+  pageData.value[currNode.value.id] = resultList;
+});
+
+const refresh = async() => {
+  initializing.value = true;
+  loadDataList();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  loadDataList();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, validate, refresh });
+</script>
+
+<style scoped>
+.vc-image-item {
+  :deep() {
+    .el-checkbox {
+      height: 14px!important;
+    }
+    .el-checkbox__label {
+      padding-left: 0!important;
+    }
+  }
+}
+</style>