@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,74 @@
+<template>
+  <el-input
+    v-model="currValue"
+    type="password"
+    v-bind="options"
+  >
+    <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 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, '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, 'showPassword');
+  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/radio.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-radio-group
+    v-model="currValue"
+    v-bind="options"
+  >
+    <el-radio
+      v-for="item in (dataList && dataList.length > 0 ? dataList : [{key: '', value: ''}])"
+      :key="item.key"
+      :value="item.key"
+    >{{item.value}}</el-radio>
+  </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 currDictCode = ref('');
+const dataList = ref([]);
+
+const init = () => {
+  const compStyle = props.compStyle || {};
+  currValue.value = compStyle['default'] || '';
+
+  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]['内容'] || '';
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+  <el-rate
+    v-model="currValue"
+    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(null);
+
+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, 'max');
+  visual.addIfNotNull(data, compStyle, 'low-threshold');
+  visual.addIfNotNull(data, compStyle, 'high-threshold');
+  visual.addIfNotNull(data, compStyle, 'allow-half');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+
+  if (compStyle['colors']) {
+    data['colors'] = compStyle['colors'].split(',');
+  }
+  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>

package/src/admin/visual/components/form/region-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 { getRegion } 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 getRegion();
+  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/form/rich-editor.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="editor-box" :style="editorStyle">
+    <Toolbar
+      :editor="editorRef"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :mode="mode"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { ref, computed, shallowRef, 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 mode = ref('default');
+const valueHtml = ref('');
+const editorRef = shallowRef();
+
+const init = () => {
+  const compStyle = props.compStyle || {};
+  mode.value = compStyle['mode'] || 'default';
+
+  if (!props.compData?.dataSourceType) {
+    loadValue();
+  }
+};
+
+const editorStyle = computed(() => {
+  const compStyle = props.compStyle || {};
+  let result = 'overflow-y: hidden;';
+  result += visual.parseTplNs('width: {value};', compStyle['width'], 'px');
+  result += visual.parseTplNs('height: {value};', compStyle['height'], 'px');
+  result += visual.parseTpl('overflow: {value};', compStyle['overflow']);
+  return result;
+});
+
+const handleCreated = (editor) => {
+  editorRef.value = editor;
+  editor.setHtml(valueHtml.value || '');
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  valueHtml.value = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>
+
+<style>
+.w-e-toolbar {
+  z-index: 503!important;
+}
+.w-e-menu {
+  z-index: 502!important;
+}
+.w-e-text-container{
+  z-index: 501!important;
+}
+</style>
+
+<style scoped>
+.editor-box {
+  border: 1px solid #ccc;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <el-select
+    v-model="currValue"
+    class="vc-select"
+    v-bind="options"
+  >
+    <el-option
+      v-for="item in dataList"
+      :key="item.key"
+      :value="item.key"
+      :label="item.value"
+    />
+  </el-select>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import visual from '@/visual/js/visual';
+import { getDictionary } from '@/utils/system';
+import api from '@/http/api';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const currValue = ref(null);
+const currDictCode = ref('');
+const currDataModelId = ref('');
+const currDMValue = ref('');
+const currDMLabel = 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);
+  } else if (compStyle['dataSource'] === 'dataModel') {
+    if (currDataModelId.value !== (compStyle['dataModelId'] || '')) {
+      currDataModelId.value = compStyle['dataModelId'] || '';
+      loadDataModelField(currDataModelId.value, compStyle);
+    }
+  }
+
+  if (currDataModelId.value &&
+      (currDataModelId.value !== (compStyle['dataModelId'] || '') ||
+        currDMValue.value !== (compStyle['value'] || '') ||
+        currDMLabel.value !== (compStyle['label'] || ''))) {
+    currDMValue.value = compStyle['value'] || '';
+    currDMLabel.value = compStyle['label'] || '';
+    setTimeout(() => loadDataModelData(currDataModelId.value, compStyle), 500);
+  }
+
+  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, 'effect');
+  visual.addIfNotNull(data, compStyle, 'filterable');
+  visual.addIfNotNull(data, compStyle, 'multiple');
+  visual.addIfNotNull(data, compStyle, 'allow-create');
+  visual.addIfNotNull(data, compStyle, 'fit-input-width');
+  visual.addIfNotNull(data, compStyle, 'required');
+  visual.addIfNotNull(data, compStyle, 'clearable');
+  visual.addIfNotNull(data, compStyle, 'disabled');
+  visual.addIfNotNull(data, compStyle, 'autocomplete');
+
+  return data;
+});
+
+const loadDictionary = (dictCode) => {
+  if (!dictCode) {
+    dataList.value = [];
+  }
+
+  getDictionary(dictCode).then(res => {
+    dataList.value = res;
+  });
+};
+
+const loadDataModelField = (dataModelId, compStyle) => {
+  if (!dataModelId) {
+    dataList.value = [];
+    return false;
+  }
+
+  api.post('/business/data-field/list/' + dataModelId).then(res => {
+    const fieldOptions = [];
+    (res.data && res.data).forEach(field => {
+      fieldOptions.push({ key: field.fieldName, value: field.showName });
+    });
+    compStyle['fieldOptions'] = fieldOptions;
+  });
+};
+
+const loadDataModelData = (dataModelId, compStyle) => {
+  if (!dataModelId || !compStyle['value'] || !compStyle['label']) {
+    dataList.value = [];
+    return;
+  }
+  api.post('/codeless/data-model/' + dataModelId + '/list').then(res => {
+    const fieldValueOptions = [];
+    (res.data && res.data).forEach(field => {
+      fieldValueOptions.push({ key: field[compStyle['value']], value: field[compStyle['label']] });
+    });
+    dataList.value = fieldValueOptions;
+    compStyle['fieldValueOptions'] = fieldValueOptions;
+  });
+};
+
+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]['内容'] || '';
+
+  currValue.value = null;
+  if (props.compStyle['multiple'] === true) {
+    currValue.value = defaultValue ? defaultValue.split(',') : [];
+  } else {
+    currValue.value = defaultValue || '';
+  }
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>
+
+<style scoped>
+.vc-select {
+  min-width: 100px;
+}
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <el-switch
+    v-model="currValue"
+    v-bind="options"
+    inline-prompt
+    :active-text="dataList.length >= 1 ? dataList[0].value : ''"
+    :active-value="dataList.length >= 1 ? dataList[0].key : ''"
+    :inactive-text="dataList.length >= 2 ? dataList[1].value : ''"
+    :inactive-value="dataList.length >= 2 ? dataList[1].key : ''"
+  ></el-switch>
+</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 || {};
+  currValue.value = compStyle['default'] || '';
+  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, 'inline-prompt');
+  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]['内容'] || '';
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadValue();
+});
+
+onMounted(() => {
+  init();
+  loadValue();
+});
+</script>