@arkxos/arkos-system 0.1.0

package/src/admin/visual/components/echarts/scatter.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="chartDiv" :style="currStyle"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick, markRaw } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const chartDiv = ref();
+const currChart = ref(null);
+const currStyle = ref();
+
+const init = async() => {
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  const compStyle = props.compStyle || {};
+  let style = '';
+  style += visual.parseTpl('width: {value};', compStyle['width']);
+  style += visual.parseTpl('height: {value};', compStyle['height']);
+  currStyle.value = style;
+
+  const padding = (compStyle['padding'] || '50px,20px,30px,20px').split(',');
+  let defaultOption = {};
+  try {
+    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  } catch (e) {
+    console.log('jsonOption解释出错', e)
+  }
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+
+  const legendData = [];
+  const labelData = [];
+  const seriesData = [];
+  (compStyle.seriesList || []).forEach(item => {
+    legendData.push(item.name);
+    labelData.push([]);
+    seriesData.push({
+      ...parseScatter(item.name, compStyle),
+      data: dataList.length > 0 ? dataList[0][item.prop] : [],
+    });
+  });
+
+  const option = {
+    animation: compStyle['animation'] || false,
+    color: parseColors(compStyle['colorScheme']),
+    title: chart.parseTitle(compStyle),
+    tooltip: chart.parseTooltip(compStyle),
+    legend: chart.parseLegend(compStyle, legendData),
+    grid: {
+      top: padding[0],
+      right: padding[1],
+      bottom: padding[2],
+      left: padding[3],
+      containLabel: true
+    },
+    xAxis: chart.parseAxis('xAxis', compStyle, [labelData]),
+    yAxis: chart.parseAxis('yAxis', compStyle, [labelData]),
+    series: seriesData,
+    toolbox: chart.parseToolbox(compStyle)
+  };
+
+  await nextTick(() => {
+    try {
+      if (currChart.value) {
+        echarts.dispose(chartDiv.value);
+      }
+      currChart.value = markRaw(echarts.init(chartDiv.value));
+      currChart.value.setOption(Object.assign({}, option, defaultOption));
+    } catch (e) {
+      console.log(e);
+    }
+  });
+  await nextTick(() => currChart.value.resize());
+};
+
+const parseScatter = (name, compStyle) => {
+  const result = { type: 'scatter', name: name };
+  result['symbol'] = compStyle['series.symbol'] || 'circle';
+  result['symbolSize'] = compStyle['series.symbolSize'] || 10;
+  return result;
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  init();
+});
+
+onMounted(() => {
+  init();
+});
+</script>

package/src/admin/visual/components/edit-table/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="vc-edit-table">
+    <div style="margin-bottom: 5px">
+      <span>
+        <span>新增&nbsp;</span>
+        <el-input
+          v-model.number="newRow"
+          auto-complete="off"
+          style="width:50px"
+        ></el-input>
+        <span>&nbsp;行&nbsp;</span>
+      </span>
+      <el-button type="success" @click="addNew">确定</el-button>
+    </div>
+    <!--表格栏-->
+    <el-table
+      ref="dataTable"
+      class="vc-table"
+      width="100%"
+      v-bind="options"
+    >
+      <el-table-column
+        v-for="(column, index) in columnList"
+        :key="index"
+        header-align="center"
+        align="center"
+        :prop="column.fieldName"
+        :label="column.showName"
+        :width="column.width"
+        :min-width="column.minWidth || 0"
+      />
+      <el-table-column
+        label="操作"
+        width="80"
+        header-align="center"
+        align="center"
+      ></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import visual from '@/visual/js/visual';
+
+const props = defineProps({
+  compStyle: Object
+});
+
+const columnList = ref([]);
+
+watch(() => props.compStyle, compStyle => {
+  columnList.value = compStyle['columns'] || [];
+}, { immediate: true, deep: true });
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'checkAll');
+  visual.addIfNotNull(data, compStyle, 'stripe');
+  visual.addIfNotNull(data, compStyle, 'border');
+  visual.addIfNotNull(data, compStyle, 'tooltip-effect');
+  return data;
+});
+</script>
+
+<style scoped>
+.vc-edit-table .vc-table :deep(.el-form-item__content) {
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,107 @@
+<template>
+  <div class="ac-affix-box">
+    <el-upload
+      action=""
+      class="ac-affix"
+      :multiple=true
+      :show-file-list=false
+    >
+      <template #trigger>
+        <el-button
+          style="margin-right: 10px;"
+          type="success"
+        >
+          <ac-icon
+            iconId="018ece4f70fcf0627f81"
+            style="margin-right: 5px"
+          />点击上传
+        </el-button>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped lang="scss">
+.ac-affix-box {
+  width: 100%;
+}
+.ac-affix {
+  text-align: left;
+  margin-bottom: 5px;
+  display: flex;
+  flex-direction: row;
+}
+.file {
+  width: 100%;
+}
+.file-item {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  > span {
+    margin-right: 5px;
+  }
+  :deep(.ac-icon) {
+    cursor: pointer;
+  }
+}
+.file-name {
+  overflow: hidden;
+  min-width: 0;
+}
+.file-name > span > span {
+  align-items: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.file-upload {
+  font-size: 18px;
+  margin-left: 5px;
+}
+.file-download, .file-delete {
+  font-size: 18px;
+  cursor: pointer;
+  margin-left: 5px;
+  width: 25px;
+}
+.file-download:hover, .file-delete:hover {
+  color: #409EFF;
+}
+.file-item[class~=is-disabled] .file-delete {
+  display: none;
+}
+.pack-button:hover {
+  background: #66b1ff;
+  border-color: #66b1ff;
+  color: #FFF;
+}
+.pack-button:focus {
+  color: #409EFF;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+.pack-button {
+  padding: 9px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  color: #FFF;
+  background-color: #409EFF;
+  border-color: #409EFF;
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  transition: .1s;
+  font-weight: 500;
+}
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <el-cascader
+    ref="cascader"
+    v-model="currValue"
+    v-bind="options"
+    :options="areaList"
+    :props="{
+      value: 'id',
+      label: 'text',
+      children: 'children',
+      leaf: 'isLeaf',
+      checkStrictly: props.checkStrictly
+    }"
+    style="width: 100%"
+  />
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import visual from '@/visual/js/visual';
+// import { useAreaStore } from '@/pinia/modules/area';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const areaStore = ref({}); // useAreaStore();
+const currValue = ref(null);
+const areaList = ref([]);
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'showAllLevels');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'filterable');
+  visual.addIfNotNull(options, compStyle, 'clearable');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  return options;
+});
+
+const loadDataList = () => {
+  // areaStore.getAreaList().then(res => {
+  //   areaList.value = res && res.length > 0 && res[0].children || [];
+  // });
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  let defaultValue = dataList.length > 0 && dataList[0]['内容'] || '';
+  if (defaultValue && defaultValue.startsWith('156,')) {
+    defaultValue = defaultValue.substring(4);
+  }
+  currValue.value = defaultValue ? defaultValue.split(',') : [];
+};
+
+watch(() => props.compStyle, () => {
+  if (!props.compData?.dataSourceType) {
+    loadValue();
+  }
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  loadValue();
+  loadDataList();
+});
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+  <el-radio-group
+    v-model="currValue"
+    v-bind="options"
+  >
+    <el-radio-button
+      key="" value=""
+      v-if="showAll"
+    >全部</el-radio-button>
+    <el-radio-button
+      v-for="item in dataList"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import { getDictionary } from '@/utils/system';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const currValue = ref('');
+const showAll = ref(false);
+const currDictCode = ref('');
+const dataList = ref([]);
+
+const init = () => {
+  const compStyle = props.compStyle;
+  showAll.value = compStyle['showAll'] || false;
+
+  if (compStyle['dataSource'] === 'enum') {
+    const optionList = [];
+    (compStyle['enumValue'] || '').split(',').forEach(item => {
+      optionList.push({ key: item, value: item });
+    });
+    dataList.value = optionList;
+  } else if (compStyle['dataSource'] === 'dict') {
+    currDictCode.value = compStyle['dictCode'] || '';
+    loadDictionary(currDictCode.value);
+  }
+
+  if (!props.compData?.dataSourceType) {
+    loadValue();
+  }
+};
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'size');
+  return data;
+});
+
+const loadDictionary = (dictCode) => {
+  if (!dictCode) {
+    dataList.value = [];
+  }
+
+  getDictionary(dictCode).then(res => {
+    dataList.value = res;
+  });
+}
+
+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/checkbox.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-checkbox-group
+    v-model="currValue"
+    v-bind="options"
+  >
+    <el-checkbox
+      v-for="item in (dataList && dataList.length > 0 ? dataList : [{key: '', value: '全部'}])"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import { getDictionary } from '@/utils/system';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const currValue = ref([]);
+const currDictCode = ref('');
+const dataList = ref([]);
+
+const init = () => {
+  const compStyle = props.compStyle;
+  if (compStyle['dataSource'] === 'enum') {
+    const optionList = [];
+    (compStyle['enumValue'] || '').split(',').forEach(item => {
+      optionList.push({ key: item, value: item });
+    });
+    dataList.value = optionList;
+  } else if (compStyle['dataSource'] === 'dict') {
+    currDictCode.value = compStyle['dictCode'] || '';
+    loadDictionary(currDictCode.value);
+  }
+
+  if (!props.compData?.dataSourceType) {
+    loadValue();
+  }
+};
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'size');
+  visual.addIfNotNull(data, compStyle, 'placeholder');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  return data;
+});
+
+const loadDictionary = (dictCode) => {
+  if (!dictCode) {
+    dataList.value = [];
+  }
+
+  getDictionary(dictCode).then(res => {
+    dataList.value = res;
+  });
+};
+
+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]['内容'] || '').split(',');
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>

package/src/admin/visual/components/form/date-range.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-date-picker
+    v-model="currValue"
+    v-bind="options"
+    type="daterange"
+  />
+</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, 'start-placeholder');
+  visual.addIfNotNull(data, compStyle, 'end-placeholder');
+  visual.addIfNotNull(data, compStyle, 'format');
+  visual.addIfNotNull(data, compStyle, 'value-format');
+  visual.addIfNotNull(data, compStyle, 'range-separator');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'editable');
+  visual.addIfNotNull(data, compStyle, 'clearable');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  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]['内容'] || '').split(',');
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <el-date-picker
+    v-model="currValue"
+    v-bind="options"
+    type="date"
+  />
+</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, 'placeholder');
+  visual.addIfNotNull(data, compStyle, 'format');
+  visual.addIfNotNull(data, compStyle, 'value-format');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'editable');
+  visual.addIfNotNull(data, compStyle, 'clearable');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  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>