@arkxos/arkos-system 0.1.0

package/src/admin/components/multiple-number/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="!initializing" class="multiple-number">
+    <ac-number
+      v-for="item in number"
+      :key="item"
+      v-model="currValues[item - 1]"
+      @change="handleChange"
+      @blur="handleBlur"
+      :size="size"
+      :point="0"
+      :show-controls="false"
+    ></ac-number>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  number: {
+    type: Number,
+    default: 1
+  },
+  size: String
+});
+const modelValue = defineModel();
+const currValues = ref([]);
+const initializing = ref(false);
+
+const handleChange = () => {
+  const result = [];
+  for (let index = 0; index < props.number; index++) {
+    result.push(currValues.value[index]);
+  }
+  modelValue.value = result.join(',');
+  emit('change');
+};
+
+const handleBlur = () => {
+  handleChange();
+};
+
+watch(() => modelValue.value, (val) => {
+  if (initializing.value) return;
+
+  initializing.value = true;
+  currValues.value = [];
+  for (const item of (val || '').split(',')) {
+    currValues.value.push(parseInt(item || '0'));
+  }
+  while (currValues.value.length < props.number) {
+    currValues.value.push(0);
+  }
+  initializing.value = false;
+}, { immediate: true });
+</script>
+
+<style scoped lang="scss">
+.multiple-number {
+  display: flex;
+  flex-direction: row;
+  .input-number:first-child {
+    margin-left: 0;
+  }
+  .input-number {
+    margin-left: 3px;
+  }
+}
+</style>

package/src/admin/components/number/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <span :class="['input-number', $slots.append ? 'append' : '']">
+    <el-input-number
+      v-model="numberValue"
+      :controls="showControls"
+      controls-position="right"
+      :step="precision === 1 ? 0.1 : precision === 2 ? 0.01 : 1"
+      :precision="precision"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      :readonly="readonly"
+      :size="size"
+      @change="handleChange"
+      @blur="handleBlur"
+    />
+    <span class="append-box" v-if="$slots.append">
+      <slot name="append" />
+    </span>
+  </span>
+</template>
+
+<script setup>
+import { onBeforeMount, ref, watch, nextTick } from 'vue';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur']);
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  point: {
+    type: [String, Number],
+    default: 0
+  },
+  min: {
+    type: Number,
+    default: -Infinity
+  },
+  max: {
+    type: Number,
+    default: Infinity
+  },
+  size: String,
+  placeholder: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  showControls: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const min = ref(0);
+const max = ref(2147483647);
+const numberValue = ref(undefined);
+const precision = ref(parseInt((props.point || '0')));
+const disabled = ref(false);
+const readonly = ref(false);
+const inputDisabled = useDisabled();
+
+const init = (data) => {
+  min.value = data.min || min.value;
+  max.value = data.max || max.value;
+  precision.value = parseInt((data.point || '0'));
+  disabled.value = inputDisabled.value || data.disabled || false;
+  readonly.value = data.readonly || false;
+
+  if (typeof data.modelValue === 'undefined' || data.modelValue == null || data.modelValue === '') {
+    numberValue.value = undefined;
+  } else {
+    numberValue.value = parseFloat(data.modelValue + '');
+  }
+  emit('update:modelValue', numberValue.value);
+};
+
+const handleChange = () => {
+  emit('update:modelValue', numberValue.value);
+  nextTick(() => {
+    emit('change', numberValue.value);
+  });
+};
+
+const handleBlur = () => {
+  emit('update:modelValue', numberValue.value);
+  nextTick(() => {
+    emit('blur', numberValue.value);
+  });
+};
+
+watch(() => props, (newVal) => {
+  init(newVal);
+}, { deep: 1 });
+
+onBeforeMount(() => {
+  init(props);
+});
+</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.append :deep(.el-input__wrapper) {
+  border-top-right-radius: 0!important;
+  border-bottom-right-radius: 0!important;
+}
+.input-number :deep(.append-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/components/organization/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <span v-if="props.showText">{{ message }}</span>
+  <div
+    v-else
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <div>
+      <el-popover
+        ref="popover"
+        width="—"
+        placement="bottom-start"
+        :fallback-placements="['bottom', 'right', 'left', 'top']"
+        :visible-arrow="true"
+        trigger="click"
+      >
+        <template #reference>
+          <el-input v-model="message" readonly :size="size">
+            <template #suffix>
+              <ac-icon
+                v-if="hovering && !inputDisabled"
+                iconId="018dca412c4ebd53fd1d"
+                style="cursor: pointer;"
+                @click.stop="clearInput"
+              />
+            </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-scrollbar
+          wrap-class="popover-scrollbar"
+          wrap-style="min-height:0px;max-height: 400px;min-width: 300px"
+          view-style="height:100%;"
+          v-loading="loading"
+          element-loading-text="数据加载中..."
+          :noresize="false"
+        >
+          <el-tree
+            ref="tree"
+            node-key="id"
+            :data="treeData"
+            :props="treeProps"
+            :default-expanded-keys="expandedData"
+            :default-checked-keys="selectedData"
+            :show-checkbox="multiple"
+            :check-strictly="true"
+            :filter-node-method="filterNode"
+            :expand-on-click-node="leafSelect"
+            @node-expand="nodeExpand"
+            @check="handleClick"
+            @node-click="nodeClick"
+          ></el-tree>
+        </el-scrollbar>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { getOrganization } from '@/utils/system';
+import emitter from '@/utils/bus';
+import { useDisabled } from 'element-plus';
+
+const emit = defineEmits(['update:modelValue', 'change', 'update:name']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  leafSelect: {
+    type: Boolean,
+    default: true,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  showText: Boolean,
+  text: {
+    type: String,
+    default: ''
+  }
+});
+
+const inputDisabled = useDisabled();
+const tree = ref();
+const popover = ref();
+const filterText = ref('');
+const message = ref('');
+const loading = ref(false);
+const selectedData = ref(((props.modelValue || '') + '').split(','));
+const expandedData = ref([]);
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  label: function (data) {
+    return data.text;
+  }
+});
+const hovering = ref(false);
+
+const clearInput = () => {
+  message.value = '';
+  changeInput('');
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) !== -1;
+};
+
+const nodeExpand = () => {
+  setTimeout(() => {
+    popover.value && popover.value.popperRef.popperInstanceRef.forceUpdate();
+  }, 300);
+};
+
+const handleClick = (data, checked) => {
+  if (!props.multiple &&
+      checked === true &&
+      (!props.leafSelect ||
+        (props.leafSelect &&
+          (data.children == null || data.children.length === 0)))) {
+    tree.value.setCheckedKeys([data.id]);
+  }
+  if (!props.multiple) {
+    if (data) {
+      tree.value.setCheckedNodes([data]);
+      let id = data.id || '';
+      if (id.indexOf('@') > 0) {
+        id = id.split('@')[1];
+      }
+      emit('update:modelValue', id || '');
+      emit('change');
+    } else {
+      emit('update:modelValue', '');
+      emit('change');
+    }
+    hidePopover();
+  }
+};
+
+const nodeClick = (data) => {
+  if (data.disabled === true) {
+    emit('update:modelValue', '');
+    emit('change');
+    return;
+  }
+
+  if (props.multiple) {
+    let nodes = tree.value.getCheckedNodes();
+    if (props.leafSelect) {
+      nodes = nodes.filter(
+        (item) => item.children == null || item.children.length === 0
+      );
+    }
+
+    const curNodes = nodes.filter((item) => item.id === data.id);
+    if (curNodes.length > 0) {
+      nodes = nodes.filter((item) => item.id !== data.id);
+    } else {
+      nodes.push(data);
+    }
+    tree.value.setCheckedNodes(nodes);
+  } else {
+    hidePopover()
+    tree.value.setCheckedNodes([data]);
+
+    changeInput(data.id || '');
+  }
+};
+
+const confirm = () => {
+  const nodes = tree.value.getCheckedNodes();
+  const multipleValue = [];
+  const multipleMessage = [];
+  nodes.forEach((item) => {
+    if (!item.disable) {
+      multipleValue.push(item.id);
+      multipleMessage.push(item.data.name);
+    }
+  });
+  message.value = multipleMessage.join(',');
+  changeInput(multipleValue.join(','));
+};
+
+const changeInput = (id) => {
+  hidePopover();
+  emit('update:modelValue', id);
+  emit('change', id);
+};
+
+const loadOrganization = async() => {
+  treeData.value = await getOrganization();
+  expandedData.value = [treeData.value && treeData.value[0] && treeData.value[0].id];
+  calcValue();
+};
+
+const calcValue = () => {
+  message.value = '';
+  if (treeData.value == null || treeData.value.length <= 0) {
+    message.value = selectedData.value.join(',');
+  } else {
+    const organizations = findOrganization(treeData.value, selectedData.value);
+    for (let i = 0; i < organizations.length; i++) {
+      if (i > 0) {
+        message.value += ',';
+      }
+      message.value += organizations[i].text;
+    }
+  }
+
+  emit('update:name', message.value);
+
+  if (props.multiple) {
+    if (tree.value !== undefined && tree.value != null) {
+      tree.value.setCheckedNodes(selectedData.value);
+      tree.value.setCheckedKeys(selectedData.value);
+    }
+  }
+};
+
+const findOrganization = (datas, ids) => {
+  let results = [];
+  if (datas === undefined || datas == null || ids === undefined || ids == null) {
+    return results;
+  }
+
+  for (let i = 0; i < datas.length; i++) {
+    const id = datas[i].id + '';
+    if (ids.includes(id)) {
+      results.push(datas[i]);
+    }
+
+    if (datas[i].children !== undefined && datas[i].children != null) {
+      results = results.concat(findOrganization(datas[i].children, ids));
+    }
+  }
+
+  return results;
+};
+
+const hidePopover = () => {
+  popover.value && popover.value.hide()
+};
+
+watch(() => props.modelValue, (newVal) => {
+  if (props.showText && props.text) {
+    return;
+  }
+
+  message.value = '';
+  if (tree.value) {
+    tree.value.setCheckedNodes([]);
+  }
+
+  selectedData.value = ((newVal || '') + '').split(',');
+  if (selectedData.value.length <= 0) {
+    return;
+  }
+
+  calcValue();
+});
+
+watch(() => props.text, (newVal) => {
+  message.value = newVal;
+});
+
+watch(() => filterText.value, (newVal) => {
+  tree.value.filter(newVal);
+});
+
+onMounted(() => {
+  if (props.showText && props.text) {
+    message.value = props.text;
+  } else {
+    loadOrganization();
+    emitter.on('organization.change', () => {
+      loadOrganization();
+    });
+  }
+});
+
+onUnmounted(() => {
+  emitter.off('organization.change');
+});
+</script>