@arkxos/arkos-system 0.1.0

package/src/codeless/components/employee-tree/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <el-input
+      v-if="inputDisabled || disabled"
+      disabled
+      v-model="message"
+    />
+    <el-input
+      v-else
+      ref="messageRef"
+      v-model="message"
+      :placeholder="messageHolder"
+      @click="messageClick"
+      @input="messageChange"
+    >
+      <template #suffix>
+        <cc-icon
+          v-if="hovering"
+          style="cursor: pointer;color: #c0c4cc"
+          @click.stop="clearInput"
+          iconId="018dca412c4ebd53fd1d"
+        />
+      </template>
+    </el-input>
+    <el-popover
+      ref="popoverRef"
+      :width="popoverWidth"
+      placement="bottom-start"
+      :fallback-placements="['bottom', 'right', 'left', 'top']"
+      :visible-arrow="true"
+      :visible="popoverVisible"
+      popper-class="popper-box"
+      trigger="click"
+      :virtual-ref="messageRef"
+      virtual-triggering
+      @hide="popoverHide"
+    >
+      <el-scrollbar
+        wrap-class="popover-scrollbar"
+        wrap-style="min-height:0px;max-height: 400px;"
+        view-style="height:100%;"
+        v-click-outside="clickOutside"
+        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"
+            @node-expand="nodeExpand"
+            @node-click="nodeClick"
+          ></el-tree>
+        </el-row>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import { getEmployee } from '@/utils/system';
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  dataFieldId: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const formData = inject('formData');
+
+const initializing = ref(false);
+const tree = ref();
+const popoverRef = ref();
+const popoverWidth = ref('-');
+const popoverVisible = ref(false);
+const messageHolder = ref(props.placeholder || '--请选择--');
+const messageRef = ref();
+const message = ref('');
+const loading = ref(false);
+const selectedId = ref('');
+const selectedValue = ref('');
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  isLeaf: 'leaf',
+  label: 'text'
+});
+const hovering = ref(false);
+
+const clearInput = () => {
+  changeValue('', '');
+};
+
+const messageClick = () => {
+  messageHolder.value = selectedValue.value || props.placeholder;
+  popoverVisible.value = true;
+  message.value = '';
+  tree.value.filter('');
+  const width = messageRef.value.$el.getBoundingClientRect().width;
+  if (width && width > 0) {
+    popoverWidth.value = width;
+  }
+  return false;
+};
+
+const messageChange = () => {
+  tree.value.filter(message.value);
+};
+
+const clickOutside = () => {
+  popoverVisible.value = false;
+};
+
+const popoverHide = () => {
+  if (selectedValue.value !== message.value) {
+    message.value = selectedValue.value;
+  }
+};
+
+const changeValue = (id, value) => {
+  initializing.value = true;
+  tree.value.setChecked(id);
+  formData.value[props.prop] = id;
+  selectedId.value = id;
+  selectedValue.value = value;
+  message.value = value;
+  messageHolder.value = message.value || props.placeholder;
+  emit('change');
+
+  nextTick(() => {
+    popoverVisible.value = false;
+    initializing.value = false;
+  });
+};
+
+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) return;
+  changeValue(data.id || '', data.text || '');
+};
+
+const loadTree = async () => {
+  treeData.value = await getEmployee();
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+  calcValue();
+};
+
+const calcValue = () => {
+  if (treeData.value == null || treeData.value.length <= 0) {
+    message.value = selectedId.value;
+  } else {
+    const list = findData(treeData.value, selectedId.value);
+    if (list && list.length > 0) {
+      for (let i = 0; i < list.length; i++) {
+        message.value = list[i].text;
+      }
+    } else {
+      message.value = '';
+    }
+  }
+  selectedValue.value = 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(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+
+  selectedId.value = newVal || '';
+  calcValue();
+});
+
+onMounted(() => {
+  selectedId.value = formData.value[props.prop] || '';
+  loadTree();
+});
+</script>
+
+<style scoped lang="scss">
+.popper-box {
+  .node-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+
+    .node-label {
+      flex-grow: 1;
+      width: 1px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: flex;
+
+      > span {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>

package/src/codeless/components/employees-tree/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-tree-select
+    v-model="selectedIds"
+    multiple
+    :data="treeData"
+    :props="treeProps"
+    :render-after-expand="false"
+    :disabled="calcDisabled"
+    :placeholder="calcPlaceholder"
+    :default-expanded-keys="expandedData"
+    :expand-on-click-node="true"
+    show-checkbox
+    filterable
+    check-on-click-node
+    style="width: 100%"
+  />
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject, computed } from 'vue';
+import { useDisabled } from 'element-plus';
+import { getEmployee } from '@/utils/system';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+});
+const formData = inject('formData');
+
+const initializing = ref(false);
+const selectedIds = ref([]);
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const disabled = ref(false);
+const treeData = ref([]);
+const treeProps = ref({
+  value: 'id',
+  label: 'text',
+  children: 'children'
+});
+
+const loadTree = async() => {
+  treeData.value = await getEmployee();
+  tool.walkTree({ children: treeData.value }, (node) => {
+    node.value = node.id;
+    node.label = node.text;
+  });
+
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+};
+
+const calcPlaceholder = computed(() => {
+  return (disabled.value || inputDisabled.value) ? '' : props.placeholder;
+});
+
+const calcDisabled = computed(() => {
+  return disabled.value || inputDisabled.value;
+});
+
+watch(() => selectedIds.value, (newVal) => {
+  if (initializing.value) return;
+
+  initializing.value = true;
+  formData.value[props.prop] = newVal.join(',');
+  initializing.value = false;
+});
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+
+  initializing.value = true;
+  selectedIds.value = newVal ? newVal.split(',') : [];
+  initializing.value = false;
+  emit('change');
+}, { immediate: true });
+
+onMounted(async() => {
+  await loadTree();
+});
+</script>

package/src/codeless/components/entp-tree/index.vue

@@ -0,0 +1,261 @@
+<template>
+  <div
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+    style="width: 100%"
+  >
+    <el-input
+      v-if="inputDisabled || disabled"
+      disabled
+      v-model="message"
+    />
+    <el-input
+      v-else
+      ref="messageRef"
+      v-model="message"
+      :placeholder="messageHolder"
+      @click="messageClick"
+      @input="messageChange"
+    >
+      <template #suffix>
+        <cc-icon
+          v-if="hovering"
+          style="cursor: pointer;color: #c0c4cc"
+          @click.stop="clearInput"
+          iconId="018dca412c4ebd53fd1d"
+        />
+      </template>
+    </el-input>
+    <el-popover
+      ref="popoverRef"
+      :width="popoverWidth"
+      placement="bottom-start"
+      :fallback-placements="['bottom', 'right', 'left', 'top']"
+      :visible-arrow="true"
+      :visible="popoverVisible"
+      popper-class="popper-box"
+      trigger="click"
+      :virtual-ref="messageRef"
+      virtual-triggering
+      @hide="popoverHide"
+    >
+      <el-scrollbar
+        wrap-class="popover-scrollbar"
+        wrap-style="min-height:0px;max-height: 400px;"
+        view-style="height:100%;"
+        v-click-outside="clickOutside"
+        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"
+            @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, onMounted, inject, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import { getEntp } from '@/utils/system';
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  dataFieldId: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const formData = inject('formData');
+const initializing = ref(false);
+const tree = ref();
+const popoverRef = ref();
+const popoverWidth = ref('-');
+const popoverVisible = ref(false);
+const messageHolder = ref(props.placeholder || '--请选择--');
+const messageRef = ref();
+const message = ref('');
+const loading = ref(false);
+const selectedId = ref('');
+const selectedValue = ref('');
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeData = ref([]);
+const treeProps = ref({
+  children: 'children',
+  isLeaf: 'leaf',
+  label: 'text'
+});
+const hovering = ref(false);
+
+const clearInput = () => {
+  changeValue('', '');
+};
+
+const messageClick = () => {
+  messageHolder.value = selectedValue.value || props.placeholder;
+  popoverVisible.value = true;
+  message.value = '';
+  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 clickOutside = () => {
+  popoverVisible.value = false;
+};
+
+const popoverHide = () => {
+  if (selectedValue.value !== message.value) {
+    message.value = selectedValue.value;
+  }
+};
+
+const changeValue = (id, value) => {
+  initializing.value = true;
+  tree.value.setChecked(id);
+  formData.value[props.prop] = id;
+  selectedId.value = id;
+  selectedValue.value = value;
+  message.value = value;
+  messageHolder.value = message.value || props.placeholder;
+  emit('change');
+
+  nextTick(() => {
+    popoverVisible.value = false;
+    initializing.value = false;
+  });
+};
+
+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) return;
+  if (data?.data?.type === '企业') {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async () => {
+  treeData.value = await getEntp();
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+  calcValue();
+};
+
+const calcValue = () => {
+  if (treeData.value == null || treeData.value.length <= 0) {
+    message.value = selectedId.value;
+  } else {
+    const list = findData(treeData.value, selectedId.value);
+    if (list && list.length > 0) {
+      for (let i = 0; i < list.length; i++) {
+        message.value = list[i].text;
+      }
+    } else {
+      message.value = '';
+    }
+  }
+  selectedValue.value = 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(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+
+  selectedId.value = newVal || '';
+  calcValue();
+});
+
+onMounted(() => {
+  selectedId.value = formData.value[props.prop] || '';
+  loadTree();
+});
+</script>
+
+<style scoped lang="scss">
+.popper-box {
+  .node-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+
+    .node-label {
+      flex-grow: 1;
+      width: 1px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: flex;
+
+      > span {
+        width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+</style>

package/src/codeless/components/entps-tree/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-tree-select
+    ref="treeRef"
+    v-model="selectedIds"
+    multiple
+    :data="treeData"
+    :props="treeProps"
+    :render-after-expand="false"
+    :disabled="inputDisabled"
+    :placeholder="placeholder"
+    :default-expanded-keys="expandedData"
+    :expand-on-click-node="false"
+    show-checkbox
+    filterable
+    check-on-click-node
+    style="width: 100%"
+    @check="checkChange"
+  />
+</template>
+
+<script setup>
+import { ref, watch, onMounted, inject } from 'vue';
+import { useDisabled } from 'element-plus';
+import { getEntp } from '@/utils/system';
+import tool from '@/utils/tool';
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  prop: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+});
+const formData = inject('formData');
+
+const initializing = ref(false);
+const selectedIds = ref([]);
+const expandedData = ref([]);
+const inputDisabled = useDisabled();
+const treeRef = ref();
+const treeData = ref([]);
+const treeProps = ref({
+  value: 'id',
+  label: 'text',
+  children: 'children'
+});
+
+const checkChange = () => {
+  initializing.value = true;
+  const unitNodes = [];
+  for (const node of treeRef.value.getCheckedNodes()) {
+    if (node.data && node.data.type === '企业') {
+      unitNodes.push(node);
+    }
+  }
+  selectedIds.value = unitNodes.map(item => item.id);
+  formData.value[props.prop] = selectedIds.value.join(',');
+  setTimeout(() => initializing.value = false, 500);
+};
+
+const loadTree = async() => {
+  treeData.value = await getEntp();
+  tool.walkTree({ children: treeData.value }, (node) => {
+    node.value = node.id;
+    node.label = node.text;
+  });
+
+  if (treeData.value && treeData.value.length === 1) {
+    expandedData.value = [treeData.value[0].id];
+  }
+};
+
+watch(() => selectedIds.value, (newVal) => {
+  if (initializing.value) return;
+  initializing.value = true;
+  formData.value[props.prop] = newVal.join(',');
+  setTimeout(() => initializing.value = false, 500);
+});
+
+watch(() => formData.value[props.prop], (newVal) => {
+  if (initializing.value) return;
+  initializing.value = true;
+  selectedIds.value = newVal ? newVal.split(',') : [];
+  emit('change');
+  setTimeout(() => initializing.value = false, 500);
+});
+
+onMounted(() => {
+  selectedIds.value = formData.value[props.prop] ? formData.value[props.prop].split(',') : [];
+  loadTree();
+});
+</script>