@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,120 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-radio-group
+      v-model="pageData[currNode.name]"
+      @change="handleChange"
+      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"
+        @click.prevent="clickButton(item.key)"
+      >{{item.value}}</el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import { getDictionary } from '@/utils/system';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+
+const initializing = ref(true);
+const pageData = inject('pageData', ref({}));
+const showAll = ref(false);
+const currDictCode = ref('');
+const dataList = ref([]);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  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'] || '';
+    await loadDictionary(currDictCode.value);
+  }
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  pageData.value[currNode.value.name] = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  return options;
+});
+
+const loadDictionary = async(dictCode) => {
+  dataList.value = dictCode ? await getDictionary(dictCode) : [];
+};
+
+const clickButton = (key) => {
+  if (pageData.value[currNode.value.name] === key) {
+    pageData.value[currNode.value.name] = '';
+  } else {
+    pageData.value[currNode.value.name] = key;
+  }
+
+  handleChange();
+};
+
+const handleChange = () => {
+  eventHandler.trigger('变更事件');
+};
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

package/src/visual/components/form/checkbox.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-checkbox-group
+      v-model="currValue"
+      @change="handleChange"
+      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>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import { getDictionary } from '@/utils/system';
+import { useFormItem } from 'element-plus';
+
+const props = defineProps({
+  node: Object
+});
+
+const initializing = ref(true);
+const pageData = inject('pageData', ref({}));
+const currDictCode = ref('');
+const dataList = ref([]);
+const currNode = ref(props.node);
+const currValue = ref([]);
+const formItem = useFormItem();
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  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'] || '';
+    await loadDictionary(currDictCode.value);
+  }
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  const value = dataList.length > 0 && dataList[0]['内容'] || '';
+  if (value) {
+    currValue.value = value ? value.split(',') : [];
+  } else if (currValue.value.length > 0) {
+    currValue.value = [];
+  }
+  pageData.value[currNode.value.name] = value || '';
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  return options;
+});
+
+const loadDictionary = async(dictCode) => {
+  dataList.value = dictCode ? await getDictionary(dictCode) : [];
+};
+
+const handleChange = () => {
+  if (currValue.value && currValue.value.length > 0) {
+    pageData.value[currNode.value.name] = currValue.value.join(',');
+  } else {
+    pageData.value[currNode.value.name] = '';
+  }
+
+  nextTick(() => {
+    if (formItem && formItem.formItem) {
+      formItem.formItem.validate('change');
+    }
+  });
+  eventHandler.trigger('变更事件');
+};
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

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

@@ -0,0 +1,97 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-date-picker
+      v-model="currValue"
+      v-bind="options"
+      type="daterange"
+      @change="handleChange"
+      style="width: 100%;"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, inject, getCurrentInstance, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+const pageData = inject('pageData', ref({}));
+const initializing = ref(true);
+const currNode = ref(props.node);
+const currValue = ref([]);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  const value = dataList.length > 0 && dataList[0]['内容'] || '';
+  currValue.value = value ? value.split(',') : [];
+  pageData.value[currNode.value.name] = value || '';
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'start-placeholder');
+  visual.addIfNotNull(options, compStyle, 'end-placeholder');
+  visual.addIfNotNull(options, compStyle, 'format');
+  visual.addIfNotNull(options, compStyle, 'value-format');
+  visual.addIfNotNull(options, compStyle, 'range-separator');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'editable');
+  visual.addIfNotNull(options, compStyle, 'clearable');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  return options;
+});
+
+const handleChange = () => {
+  if (currValue.value && currValue.value.length > 0) {
+    pageData.value[currNode.value.name] = currValue.value.join(',')
+  } else {
+    pageData.value[currNode.value.name] = '';
+  }
+  eventHandler.trigger('变更事件');
+};
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-date-picker
+      v-model="pageData[currNode.name]"
+      v-bind="options"
+      type="date"
+      style="width: 100%"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+
+const initializing = ref(true);
+const currNode = ref(props.node);
+const pageData = inject('pageData', ref({}));
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const handleChange = () => {
+  eventHandler.trigger('变更事件');
+};
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  pageData.value[currNode.value.name] = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'format');
+  visual.addIfNotNull(options, compStyle, 'value-format');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'editable');
+  visual.addIfNotNull(options, compStyle, 'clearable');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  return options;
+});
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

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

@@ -0,0 +1,87 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-date-picker
+      v-model="pageData[currNode.name]"
+      v-bind="options"
+      type="datetime"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+
+const pageData = inject('pageData', ref({}));
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  pageData.value[currNode.value.name] = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'format');
+  visual.addIfNotNull(options, compStyle, 'value-format');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'editable');
+  visual.addIfNotNull(options, compStyle, 'clearable');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  return options;
+});
+
+const handleChange = () => {
+  eventHandler.trigger('变更事件');
+};
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam,
+    value: pageData.value[currNode.value.name]
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>