@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,59 @@
+<template>
+  <el-date-picker
+    v-model="currValue"
+    v-bind="options"
+    type="datetime"
+  />
+</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) {
+    loadData();
+  }
+};
+
+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 loadData = 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, () => {
+  loadData();
+});
+
+onMounted(() => {
+  init();
+  loadData();
+});
+</script>

package/src/admin/visual/components/form/employee-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 { getEmployee } 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 getEmployee();
+  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, () => {
+  calcValue();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  loadTree();
+  loadValue();
+});
+</script>

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

@@ -0,0 +1,6 @@
+<template>
+  <el-select
+    class="vc-select"
+    placeholder="--请选择--"
+  ></el-select>
+</template>

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

@@ -0,0 +1,103 @@
+<template>
+  <div :style="'width: 100%; max-width: ' + props.width + 'px;height: ' + props.height + 'px'">
+    <span class="image-edit-box">
+      <el-upload
+        class="ac-image" action=""
+        :show-file-list="false"
+        :accept="'image/*'"
+      >
+        <cc-icon size="30" color="#999" iconId="018dca3b4707c4c43a2f"></cc-icon>
+      </el-upload>
+    </span>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: [Number, String],
+  width: {
+    type: Number,
+    default: 100
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  showText: Boolean
+});
+</script>
+
+<style scoped>
+.ac-image {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border: 1px dashed #c2c2c2;
+}
+.ac-image :deep(.el-upload) {
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+  outline: 0;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.ac-image :deep(.el-upload span) {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ac-image:not(.is-disabled) :deep(.el-upload) {
+  cursor: pointer;
+}
+.ac-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;
+}
+.ac-image img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.image-box {
+  border: 1px dashed #d9d9d9;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.image-box img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.ac-image :deep(.el-upload:after) {
+  display: block;
+  margin-top: 100%;
+  content: ""
+}
+.image-item {
+  position: relative;
+}
+.image-item .ac-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <el-form
+    :model="formData"
+    v-bind="options"
+    :show-message="false"
+    :validate-on-rule-change="false"
+  >
+    <draggable
+      v-model="currNode"
+      :class="currNode.children.length === 0 ? 'empty' : ''"
+      @mouseoverNode="mouseoverNode"
+      @activeNode="activeNode"
+      @deleteNode="deleteNode"
+    />
+  </el-form>
+</template>
+
+<script setup>
+import { ref, computed } 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,
+  compData: Object
+});
+const currNode = ref(props.node);
+const formData = ref({});
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, currNode.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'inline');
+  visual.addIfNotNull(data, compStyle, 'size');
+  visual.addIfNotNull(data, compStyle, 'labelPosition');
+  visual.addIfNotNull(data, compStyle, 'labelWidth');
+  visual.addIfNotNull(data, compStyle, 'labelSuffix');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  visual.addIfNotNull(data, compStyle, 'hideRequiredAsterisk');
+  visual.addIfNotNull(data, compStyle, 'requireAsteriskPosition');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  return data;
+});
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+  <el-input
+    v-model="currValue"
+    v-bind="options"
+    :type="type"
+    :style="[
+      !border ? '--el-input-border-color: transparent;' : '',
+      backgroundColor ? '--el-input-bg-color: ' + backgroundColor : '',
+    ]"
+  >
+    <template #prefix>
+      <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
+    </template>
+    <template #suffix>
+      <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
+    </template>
+  </el-input>
+</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 type = ref('text');
+const border = ref(false);
+const backgroundColor = ref('');
+const prefixIconId = ref('');
+const suffixIconId = ref('');
+
+const init = () => {
+  const compStyle = props.compStyle;
+  type.value = compStyle['hidden'] ? 'hidden' : 'text';
+  border.value = compStyle['border'] !== false;
+  backgroundColor.value = compStyle['background-color'] || '';
+  prefixIconId.value = compStyle['prefixIcon'] || '';
+  suffixIconId.value = compStyle['suffixIcon'] || '';
+
+  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, '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/item.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-form-item v-bind="options" @click.prevent>
+    <template #label>
+      <span>{{label}}</span>
+      <span v-if="description" style="margin-left: 5px;">
+        <el-tooltip :content="description">
+          <ac-icon iconId="018dca8ec9890493be26" />
+        </el-tooltip>
+      </span>
+    </template>
+    <draggable
+      v-model="currNode"
+      :class="currNode.children.length === 0 ? 'empty' : ''"
+      @mouseoverNode="mouseoverNode"
+      @activeNode="activeNode"
+      @deleteNode="deleteNode"
+    />
+  </el-form-item>
+</template>
+
+<script setup>
+import { ref, watch, computed } 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
+});
+const currNode = ref(props.node);
+const label = ref();
+const description = ref();
+
+const activeNode = (node) => {
+  emit('activeNode', node);
+};
+
+const deleteNode = (item) => {
+  emit('deleteNode', item, currNode.value.children);
+};
+
+const mouseoverNode = (item) => {
+  emit('mouseoverNode', item)
+};
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+
+  let required = false;
+  tool.walkTree(currNode.value, node => {
+    if (node.id && node.formItem === '1' && node.currCompStyle && node.currCompStyle['required']) {
+      required = true;
+    }
+  });
+
+  const data = {};
+  data['required'] = required;
+  visual.addIfNotNull(data, compStyle, 'labelWidth');
+  return data;
+});
+
+watch(() => props.compStyle, (compStyle) => {
+  label.value = compStyle['label'] || '';
+  description.value = compStyle['description'] || '';
+}, { immediate: true, deep: true });
+</script>

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

@@ -0,0 +1,130 @@
+<template>
+  <span class="input-number">
+    <span class="prefix-box" v-if="prefixIconId">
+      <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
+    </span>
+    <el-input-number
+      v-model="currValue"
+      :controls="false"
+      v-bind="options"
+    />
+    <span class="suffix-box" v-if="suffixIconId">
+      <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
+    </span>
+  </span>
+</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(null);
+const prefixIconId = ref('');
+const suffixIconId = ref('');
+
+const init = () => {
+  const compStyle = props.compStyle || {};
+  prefixIconId.value = compStyle['prefixIcon'] || '';
+  suffixIconId.value = compStyle['suffixIcon'] || '';
+
+  if (!props.compData?.dataSourceType) {
+    loadValue();
+  }
+};
+
+const options = computed(() => {
+  const compStyle = props.compStyle || {};
+  const data = {};
+  visual.addIfNotNull(data, compStyle, 'size');
+  visual.addIfNotNull(data, compStyle, 'min');
+  visual.addIfNotNull(data, compStyle, 'max');
+  visual.addIfNotNull(data, compStyle, 'precision');
+  visual.addIfNotNull(data, compStyle, 'placeholder');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'readonly');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  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);
+  const defaultValue = dataList.length > 0 && dataList[0]['内容'];
+  if (defaultValue || defaultValue === 0) {
+    currValue.value = parseFloat(defaultValue + '');
+  } else {
+    currValue.value = null;
+  }
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>
+
+<style scoped>
+.input-number {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+.input-number :deep(.el-input-number) {
+  width: 100%;
+}
+.input-number :deep(.el-input-number--small) {
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+.input-number :deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+.input-number:has(.prefix-box) :deep(.el-input__wrapper) {
+  border-top-left-radius: 0!important;
+  border-bottom-left-radius: 0!important;
+}
+.input-number:has(.suffix-box) :deep(.el-input__wrapper) {
+  border-top-right-radius: 0!important;
+  border-bottom-right-radius: 0!important;
+}
+.input-number :deep(.prefix-box) {
+  background-color: #f5f7fa;
+  color: #909399;
+  border: 1px solid #dcdfe6;
+  border-right: none;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  padding: 0 10px;
+  white-space: nowrap;
+  height: 30px;
+  line-height: 30px;
+}
+.input-number :deep(.suffix-box) {
+  background-color: #f5f7fa;
+  color: #909399;
+  border: 1px solid #dcdfe6;
+  border-left: none;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  padding: 0 10px;
+  white-space: nowrap;
+  height: 30px;
+  line-height: 30px;
+}
+</style>

package/src/admin/visual/components/form/organization-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 { getOrganization } 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 getOrganization();
+  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>