@arkxos/arkos-system 0.1.0

package/src/admin/components/region-tree/index.vue

@@ -0,0 +1,269 @@
+<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"
+      :size="size"
+      @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="false"
+            @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, nextTick } from 'vue';
+import { useDisabled, ClickOutside as vClickOutside } from 'element-plus';
+import { getRegion } from '@/utils/system';
+
+const emit = defineEmits(['update:modelValue', 'change', 'update:name']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  dataFieldId: String,
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  size: {
+    type: String,
+    default: 'default'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+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);
+  selectedId.value = id;
+  selectedValue.value = value;
+  message.value = value;
+  messageHolder.value = message.value || props.placeholder;
+  emit('update:modelValue', id || '');
+  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 === '1') {
+    changeValue(data.id || '', data.text || '');
+  }
+};
+
+const loadTree = async () => {
+  treeData.value = await getRegion();
+  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(() => props.modelValue, (newVal) => {
+  if (initializing.value) return;
+
+  selectedId.value = newVal || '';
+  calcValue();
+});
+
+onMounted(() => {
+  selectedId.value = props.modelValue || '';
+  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/admin/components/remote-select/index.vue

@@ -0,0 +1,315 @@
+<template>
+  <span v-if="props.showText">{{ message }}</span>
+  <el-select
+    v-else
+    v-model="selectValue"
+    filterable
+    clearable
+    popper-class="remote-select-box"
+    :allow-create="allowCreate"
+    :disabled="inputDisabled"
+    :placeholder="calcPlaceholder"
+    :filter-method="filterMethod"
+    :popper-append-to-body="true"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @change="handleChange"
+    @clear="handleClear"
+    @click.stop="handleFocus"
+  >
+    <template #empty>
+      <span class="empty">{{ loading ? '数据加载中...' : tipText }}</span>
+    </template>
+    <span v-if="options.length === 0" class="empty">{{ loading ? '数据加载中...' : tipText }}</span>
+    <span v-if="options.length > 0">
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="(item.name || '').length > 30 ? ((item.name || '').substring(0, 30) + '...') : (item.name || '')"
+        :title="(item.name || '').length > 30 ? (item.name || '') : ''"
+        :value="item.id"
+      ></el-option>
+    </span>
+  </el-select>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed, onUnmounted, nextTick } from 'vue';
+import { useDisabled } from 'element-plus';
+import api from '@/http/api';
+
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'clear', 'update:name']);
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  query: Object,
+  option: Object,
+  dataUrl: String,
+  filterName: {
+    type: String,
+    default: 'name'
+  },
+  allowCreate: {
+    type: Boolean,
+    default: false
+  },
+  filterable: {
+    type: Boolean,
+    default: false
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  placeholder: {
+    type: String,
+    default: '--请选择--'
+  },
+  idProp: {
+    type: String,
+    default: 'id'
+  },
+  nameProp: {
+    type: String,
+    default: 'name'
+  },
+  selectFirst: {
+    type: Boolean,
+    default: false
+  },
+  loadAll: {
+    type: Boolean,
+    default: false
+  },
+  showText: Boolean
+});
+
+const loading = ref(false);
+const tipText = ref('请输入内容搜索');
+const timer = ref(0);
+const options = ref([]);
+const message = ref('');
+const inputDisabled = useDisabled();
+const selectValue = ref(props.modelValue || '');
+const changeLoad = ref(false);
+const selectFirst = ref(false);
+const pageNumber = ref(1);
+const filter = ref(false);
+const updateValue = ref(false);
+
+const calcPlaceholder = computed(() => {
+  return inputDisabled.value ? ' ' : props.placeholder;
+});
+
+const handleFocus = () => {
+  filter.value = false;
+  changeLoad.value = true;
+  if (options.value.length <= 1) {
+    loadData(props.query);
+  }
+};
+
+const handleBlur = () => {
+  filter.value = false;
+  changeLoad.value = false;
+};
+
+const handleChange = () => {
+  filter.value = false;
+  if (!selectValue.value) {
+    changeInput('', '');
+    return;
+  }
+
+  const currOpt = options.value.find(item => item.id === selectValue.value);
+  if (currOpt) {
+    changeInput(currOpt.id, currOpt.name);
+  } else if (props.option && props.option.id === selectValue.value) {
+    options.value.push(props.option);
+  }
+};
+
+const initSelectFirst = () => {
+  if (!inputDisabled.value &&
+      props.selectFirst === true &&
+      selectFirst.value === false &&
+      (props.modelValue || '') === '' &&
+      options.value.length > 0) {
+    selectFirst.value = true;
+    changeInput(options.value[0].id, options.value[0].name);
+  }
+};
+
+const changeInput = (id, name) => {
+  updateValue.value = true;
+  emit('update:modelValue', id);
+  emit('update:name', name);
+  emit('change', { id: id, name: name });
+  selectValue.value = id;
+  message.value = name;
+
+  nextTick(() => {
+    updateValue.value = false;
+  });
+};
+
+const handleClear = () => {
+  pageNumber.value = 1;
+  selectValue.value = '';
+  changeLoad.value = true;
+  filter.value = false;
+  options.value = [];
+  changeInput('', '');
+
+  nextTick(() => {
+    changeLoad.value = false;
+  });
+  return true;
+};
+
+const filterMethod = (value) => {
+  if (updateValue.value) {
+    return;
+  }
+
+  filter.value = true;
+  pageNumber.value = 1;
+  const params = {};
+  params[props.filterName] = value;
+  loadData(params);
+};
+
+const loadData = (params) => {
+  if (!changeLoad.value) {
+    return;
+  }
+  if (loading.value) {
+    if (timer.value) {
+      clearTimeout(timer.value);
+    }
+    timer.value = setTimeout(() => loadData(params), 500);
+  } else {
+    if (timer.value) {
+      clearTimeout(timer.value);
+    }
+    timer.value = setTimeout(function () {
+      timer.value = null;
+      doLoadData(params);
+    }, 500);
+  }
+};
+
+const doLoadData = async(params) => {
+  if (params == null) {
+    params = { pageSize: props.pageSize };
+  } else {
+    params.pageSize = props.pageSize
+  }
+  params = Object.assign({ pageNumber: pageNumber.value++ }, params, props.query);
+  loading.value = true;
+
+  try {
+    const res = await api.post(props.dataUrl, params);
+    if (res.data && res.data.length > 0) {
+      const arr = [];
+      res.data.forEach((item) => {
+        const labelName = generateName(props.nameProp, item);
+        if ((item[props.idProp] || '') !== '') {
+          arr.push({ id: item[props.idProp], name: labelName, data: item })
+        }
+      });
+      options.value = arr;
+      calcValue();
+      initSelectFirst();
+    } else {
+      options.value = [];
+      tipText.value = '暂无数据';
+    }
+  } catch (e) {
+    console.log(e);
+  }
+
+  loading.value = false;
+  timer.value = null;
+};
+
+const calcValue = () => {
+  if (options.value == null || options.value.length <= 0) {
+    selectValue.value = '';
+    message.value = '';
+  } else {
+    const currOpt = options.value.find(item => item.id === selectValue.value);
+    if (currOpt) {
+      message.value = currOpt[props.nameProp];
+    } else {
+      selectValue.value = '';
+      message.value = '';
+    }
+  }
+};
+
+const generateName = (name, json) => {
+  return name.replace(/[0-9a-zA-Z]+/g, function(s) {
+    return json[s] || '';
+  });
+};
+
+const init = async(data) => {
+  options.value = [];
+  selectValue.value = data.modelValue || '';
+
+  const option = data.option || {};
+  if (option.id && option.name) {
+    options.value.unshift(option);
+    selectValue.value = option.id;
+    message.value = option.name;
+    return;
+  }
+
+  if ((!inputDisabled.value && data.selectFirst === true) || data.loadAll) {
+    changeLoad.value = true;
+    loadData();
+  }
+};
+
+watch(() => props, (data) => {
+  if (updateValue.value) {
+    return;
+  }
+
+  init(data);
+}, { deep: 1 });
+
+onMounted(() => {
+  init(props)
+});
+
+onUnmounted(() => {
+  clearTimeout(timer.value);
+  options.value = [];
+  message.value = '';
+});
+</script>
+
+<style>
+.remote-select-box .el-select-dropdown__wrap {
+  max-height: 70vh;
+  text-align: left;
+}
+</style>
+<style scoped>
+.empty {
+  font-size: 14px;
+  padding: 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #606266;
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+}
+</style>