@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,157 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <span class="input-number">
+      <span class="prefix-box" v-if="prefixIconId">
+        <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
+      </span>
+      <el-input-number
+        v-model="pageData[currNode.name]"
+        :controls="false"
+        @change="handleChange"
+        v-bind="options"
+      />
+      <span class="suffix-box" v-if="suffixIconId">
+        <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
+      </span>
+    </span>
+  </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 pageData = inject('pageData');
+const prefixIconId = ref('');
+const suffixIconId = 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 || {};
+  prefixIconId.value = compStyle['prefixIcon'] || '';
+  suffixIconId.value = compStyle['suffixIcon'] || '';
+  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 || value === 0) {
+    pageData.value[currNode.value.name] = parseFloat(value + '');
+  } else {
+    pageData.value[currNode.value.name] = null;
+  }
+};
+
+const options = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const options = {};
+  visual.addIfNotNull(options, compStyle, 'size');
+  visual.addIfNotNull(options, compStyle, 'min');
+  visual.addIfNotNull(options, compStyle, 'max');
+  visual.addIfNotNull(options, compStyle, 'precision');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'readonly');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  visual.addIfNotNull(options, compStyle, 'autocomplete');
+  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>
+
+<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/visual/components/form/organization-tree.vue

@@ -0,0 +1,300 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-popover
+      ref="popoverRef"
+      :width="popoverWidth"
+      placement="bottom-start"
+      :fallback-placements="['bottom', 'right', 'left', 'top']"
+      :visible-arrow="true"
+      trigger="click"
+    >
+      <template #reference>
+        <el-input
+          v-if="inputDisabled"
+          disabled
+          v-model="message"
+        />
+        <el-input
+          v-else
+          ref="messageRef"
+          v-model="message"
+          :placeholder="placeholder"
+          @click="messageClick"
+          @input="messageChange"
+        >
+          <template #suffix>
+            <cc-icon
+              v-if="hovering"
+              style="cursor: pointer;color: #c0c4cc"
+              @click.stop="clearInput"
+              iconId="018dca412c4ebd53fd1d"
+            />
+          </template>
+        </el-input>
+      </template>
+      <el-row v-if="multiple" style="text-align: center;padding-top: 10px;">
+        <el-button
+          style="width: 100%"
+          class="el-button--primary"
+          @click="confirm"
+        >确定</el-button>
+      </el-row>
+      <el-input v-model="filterText" style="margin: 8px 0" placeholder="输入查询" />
+      <el-scrollbar
+        wrap-class="popover-scrollbar"
+        wrap-style="min-height:0px;max-height: 400px;"
+        view-style="height:100%;"
+        v-loading="loading"
+        element-loading-text="数据加载中..."
+        :noresize="false"
+      >
+        <el-row class="tree-row">
+          <el-tree
+            style="width: 100%"
+            ref="tree"
+            node-key="id"
+            :data="treeData"
+            :props="treeProps"
+            :highlight-current="true"
+            :default-expanded-keys="expandedData"
+            :filter-node-method="filterNode"
+            :expand-on-click-node="true"
+            :show-checkbox="multiple"
+            @node-expand="nodeExpand"
+            @node-click="nodeClick"
+          >
+            <template v-slot="{ data }">
+              <div class="node-item">
+                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
+              </div>
+            </template>
+          </el-tree>
+        </el-row>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, inject, getCurrentInstance, onMounted, nextTick } from 'vue';
+import { getOrganization } from '@/utils/system';
+import { useDisabled, useFormItem } from 'element-plus';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const pageData = inject('pageData', ref({}));
+const currNode = ref(props.node);
+const inputDisabled = useDisabled();
+const formItem = useFormItem();
+const multiple = ref(false);
+const tree = ref();
+const filterText = ref('');
+const message = ref('');
+const loading = ref(false);
+const selectedData = ref([]);
+const expandedData = ref([]);
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  label: function (data) {
+    return data.text;
+  }
+});
+const hovering = ref(false);
+const messageRef = ref();
+const popoverRef = ref();
+const popoverWidth = ref('-');
+
+const placeholder = ref('');
+const clearable = ref(false);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = (styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  multiple.value = compStyle['multiple'] === true;
+  placeholder.value = compStyle['placeholder'] || '--请选择--';
+  clearable.value = compStyle['clearable'] || false;
+  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]['内容'] || '';
+  selectedData.value = value ? value.split(',') : [];
+  pageData.value[currNode.value.name] = value;
+  calcValue();
+};
+
+const clearInput = () => {
+  changeValue('', '');
+};
+
+const messageClick = () => {
+  tree.value.filter('');
+  const width = messageRef.value.$el.getBoundingClientRect().width;
+  if (width && width > 0) {
+    popoverWidth.value = width < 300 ? 300 : width;
+  }
+  return false;
+};
+
+const messageChange = () => {
+  tree.value.filter(message.value);
+};
+
+const confirm = () => {
+  const nodes = tree.value.getCheckedNodes();
+  const multipleValue = [];
+  const multipleMessage = [];
+  nodes.forEach((item) => {
+    if (!item.disable && item.data && item.data.type === '4') {
+      multipleValue.push(item.id);
+      multipleMessage.push(item.data.name);
+    }
+  });
+
+  tree.value.setCheckedKeys(multipleValue);
+  selectedData.value = multipleValue;
+  pageData.value[currNode.value.name] = multipleValue.join(',');
+  message.value = multipleMessage.join(',');
+  filterText.value = '';
+  popoverRef.value && popoverRef.value.hide()
+  emit('change');
+
+  nextTick(() => {
+    initializing.value = false;
+    if (formItem && formItem.formItem) {
+      formItem.formItem.validate('change');
+    }
+  });
+};
+
+const changeValue = (id, value) => {
+  initializing.value = true;
+  tree.value.setChecked(id);
+  selectedData.value = [id];
+  pageData.value[currNode.value.name] = id;
+  message.value = value;
+  filterText.value = '';
+  emit('change');
+
+  nextTick(() => {
+    initializing.value = false;
+    if (formItem && formItem.formItem) {
+      formItem.formItem.validate('change');
+    }
+  });
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0;
+};
+
+const nodeExpand = () => {
+  setTimeout(() => {
+    popoverRef.value && popoverRef.value.popperRef.popperInstanceRef.forceUpdate();
+  }, 300);
+};
+
+const nodeClick = (data) => {
+  if (data.disabled === true || multiple.value) return;
+  if (data?.data?.type === '4') {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async () => {
+  treeData.value = await getOrganization();
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+  calcValue();
+};
+
+const calcValue = () => {
+  if (selectedData.value &&
+      selectedData.value.length > 0 &&
+      treeData.value &&
+      treeData.value.length > 0) {
+    const list = findData(treeData.value, selectedData.value);
+    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;
+};
+
+watch(() => filterText.value, (newVal) => {
+  tree.value.filter(newVal);
+});
+
+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 loadTree();
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-input
+      v-model="pageData[currNode.name]"
+      v-bind="options"
+      @change="handleChange"
+      type="password"
+    >
+      <template #prefix>
+        <cc-icon v-if="prefixIconId" :iconId="prefixIconId" />
+      </template>
+      <template #suffix>
+        <cc-icon v-if="suffixIconId" :iconId="suffixIconId" />
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script setup>
+import { ref, inject, getCurrentInstance, computed, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object,
+});
+
+const prefixIconId = ref('');
+const suffixIconId = ref('');
+const type = ref('text');
+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);
+  const compStyle = currNode.value.currCompStyle || {};
+  prefixIconId.value = compStyle['prefixIcon'] || '';
+  suffixIconId.value = compStyle['suffixIcon'] || '';
+  type.value = compStyle['hidden'] ? 'hidden' : 'text';
+  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, 'minlength');
+  visual.addIfNotNull(options, compStyle, 'maxlength');
+  visual.addIfNotNull(options, compStyle, 'placeholder');
+  visual.addIfNotNull(options, compStyle, 'required');
+  visual.addIfNotNull(options, compStyle, 'clearable');
+  visual.addIfNotNull(options, compStyle, 'readonly');
+  visual.addIfNotNull(options, compStyle, 'disabled');
+  visual.addIfNotNull(options, compStyle, 'showPassword');
+  visual.addIfNotNull(options, compStyle, 'autocomplete');
+  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>

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

@@ -0,0 +1,122 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <el-radio-group
+      v-model="currValue"
+      @change="handleChange"
+      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>
+  </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';
+import { useFormItem } from 'element-plus';
+
+const props = defineProps({
+  node: Object
+});
+
+const pageData = inject('pageData', ref({}));
+const currDictCode = ref('');
+const dataList = ref([]);
+const initializing = ref(true);
+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 || '';
+  } else if (currValue.value) {
+    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 = () => {
+  pageData.value[currNode.value.name] = currValue.value;
+
+  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>