cnhis-design-vue 3.1.1 → 3.1.4

package/packages/select-person/src/search-tree.vue

@@ -1,326 +0,0 @@
-<template>
-  <div v-show="visible" class="search-tree-wrap">
-    <n-tree
-      v-bind="$attrs"
-      ref="searchTree"
-      v-model:checked-keys="state.checkedKeys"
-      @update:expanded-keys="onExpand"
-      @update:checked-keys="onCheck"
-      checkable
-      cascade
-      allow-checking-not-loaded
-      check-strategy="all"
-      :selectable="false"
-      :expanded-keys="state.expandedKeys"
-      :data="formatTreeData"
-      :render-label="renderLabel"
-    >
-    </n-tree>
-    <div v-show="!searchNoMore" style="text-align: center;">
-      <!-- loadMorenLoadinng -->
-      <n-spin v-if="loadMorenLoadinng" />
-      <div v-else class="load-more-btn-wrap">
-        <n-icon :component="Search" class="search-input-icon" />
-        <div class="load-more-btn" @click="searchOnloadMore">
-          加载更多
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="tsx" setup>
-import { ref, reactive, watch, computed } from 'vue'
-import { NSpin, NTree, NTooltip, NIcon } from "naive-ui"
-import type { TreeOption } from 'naive-ui'
-import { Search } from '@vicons/ionicons5'
-
-const props = withDefaults(defineProps<{
-  visible: boolean
-  searchNoMore?: boolean
-  loadMorenLoadinng?: boolean
-  formatTreeData?: any[]
-  searchValue?: string
-  defaultExpandedKeys: Array<string | number>
-  allCheckedKeys?: any
-  dataListKeys?: any
-}>(), {
-  visible: false,
-  searchNoMore: false,
-  loadMorenLoadinng: false,
-  formatTreeData: () => ([])
-})
-const state = reactive({
-  expandedKeys: [] as Array<string | number>,
-  autoExpandParent: true,
-  // 初始化时，根据formatTreeData和父组件的checkedKeys，动态计算
-  checkedKeys: [],
-  defaultCheckedKeys: {
-    main: [],
-    other: []
-  }
-})
-
-const emit = defineEmits(['addCheckedkeysMain', 'removeCheckedkeysMain', 'addCheckedkeysOther', 'removeCheckedkeysOther', 'searchOnloadMore'])
-
-const dataLen = computed(() => props.formatTreeData?.length || 0)
-
-const resetData = () => {
-  state.checkedKeys = [];
-  state.expandedKeys = [];
-  state.autoExpandParent = true;
-  state.defaultCheckedKeys.main = [];
-  state.defaultCheckedKeys.other = [];
-}
-const emitCheckedkeys = () => {
-  emitCheckedkeysMain();
-  emitCheckedkeysOther();
-  setDefaultCheckedKeys();
-}
-const emitCheckedkeysMain = () => {
-  let searchCheckedKeysMain = state.checkedKeys.filter(key => {
-    return props.dataListKeys.main.includes(key);
-  });
-  let defaultCheckedKeysMain = state.defaultCheckedKeys.main;
-  // let defaultCheckedKeysMain = this.defaultCheckedKeys.main.filter(key => {
-  //   return this.dataListKeys.main.includes(key);
-  // });
-  let { add, remove } = calcChangeKeys(defaultCheckedKeysMain, searchCheckedKeysMain);
-  emit("addCheckedkeysMain", add);
-  emit("removeCheckedkeysMain", remove);
-}
-const emitCheckedkeysOther = () => {
-  let searchCheckedKeysOther = state.checkedKeys.filter(key => {
-    return props.dataListKeys.other.includes(key);
-  });
-  let defaultCheckedKeysOther = state.defaultCheckedKeys.other;
-  // let defaultCheckedKeysOther = this.defaultCheckedKeys.other.filter(key => {
-  //   return this.dataListKeys.other.includes(key);
-  // });
-  let { add, remove } = calcChangeKeys(defaultCheckedKeysOther, searchCheckedKeysOther);
-  emit("addCheckedkeysOther", add);
-  emit("removeCheckedkeysOther", remove);
-}
-const calcChangeKeys = (defaultCheckedKeys: Array<string | number>, currentCheckedKeys: Array<string | number>) => {
-  let add = [] as Array<string | number>;
-  let remove = [] as Array<string | number>;
-
-  currentCheckedKeys.forEach(key => {
-    if (!defaultCheckedKeys.includes(key)) {
-      add.push(key);
-    }
-  });
-
-  defaultCheckedKeys.forEach(key => {
-    if (!currentCheckedKeys.includes(key)) {
-      remove.push(key);
-    }
-  });
-
-  return {
-    add,
-    remove
-  };
-}
-const emptyCheckedKeys = () => {
-  state.checkedKeys = [];
-  emitCheckedkeys();
-}
-/* setCheckedKeys */
-const setDefaultCheckedKeys = () => {
-  setDefaultCheckedKeysMain();
-  setDefaultCheckedKeysOther();
-  setCurrentCheckedKeys();
-}
-const setDefaultCheckedKeysMain = () => {
-  state.defaultCheckedKeys.main = props.dataListKeys.main.filter((key: any) => {
-    return props.allCheckedKeys.main.includes(key);
-  });
-}
-const setDefaultCheckedKeysOther = () => {
-  state.defaultCheckedKeys.other = props.dataListKeys.other.filter((key: any) => {
-    return props.allCheckedKeys.other.includes(key);
-  });
-}
-const setCurrentCheckedKeys = () => {
-  let { main, other } = state.defaultCheckedKeys;
-  let res = [...new Set([...main, ...other])];
-  state.checkedKeys = res;
-}
-// 选中事件
-const onCheck = () => {
-  emitCheckedkeys();
-  // this.$emit('check',...arg)
-}
-// 展开数节点
-const onExpand = (expandedKeys: Array<string | number>) => {
-  state.expandedKeys = expandedKeys;
-  state.autoExpandParent = false;
-  // this.$emit('expand', expandedKeys, ...arg)
-}
-const treeCount = (count: any) => {
-  if (!count) return "";
-  return `(${count})`;
-}
-const searchOnloadMore = () => {
-  emit("searchOnloadMore");
-}
-const formatName = (name: string) => {
-  let len = name.length;
-  return name.substring(len - 2, len);
-}
-const renderLabel = ({option}: {option: TreeOption}) => {
-  return (
-    <div class="search-tree-item">
-      <div class="info-wrap">
-        <NTooltip trigger="hover">
-          {{
-            default: () => `${option.title} ${option.sub_title || ''}`,
-            trigger: () => (
-              <p class="info-wrap-top" style="margin: 0">
-                <span class="info-wrap-title">
-                  <span class="c-title">{ option.title }</span>&thinsp;<span class="c-sub-title">{ option.sub_title }</span>
-                </span>
-              </p>
-            )
-          }}
-        </NTooltip>
-      </div>
-    </div>
-  )
-}
-
-watch(
-  () => props.defaultExpandedKeys,
-  (val) => {
-    state.expandedKeys = val
-  },
-  { immediate: true, deep: true }
-)
-watch(
-  () => props.visible,
-  (val) => {
-    if (!val) {
-      resetData()
-      return
-    }
-    setDefaultCheckedKeys();
-  }
-)
-watch(
-  () => dataLen,
-  (val) => {
-    if (val.value > 0) {
-      setDefaultCheckedKeys()
-    }
-  }
-)
-
-defineExpose({
-  setDefaultCheckedKeys,
-  checkedKeys: state.checkedKeys,
-  emptyCheckedKeys
-})
-
-</script>
-
-<style lang="less" scoped>
-.df {
-  display: flex;
-}
-
-.search-tree-wrap {
-  .search-tree-item {
-    display: flex;
-    align-items: center;
-  }
-  .name-wrap {
-    width: 48px;
-    height: 48px;
-    background: #7d88b5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    margin-right: 13px;
-
-    .name {
-      font-size: 16px;
-      color: #ffffff;
-      margin-bottom: 0;
-      line-height: 16px;
-    }
-  }
-  .info-wrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: column;
-  }
-  .info-wrap-top {
-    align-items: flex-end;
-    margin: 0;
-    margin-bottom: 1px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .info-wrap-title {
-    margin-bottom: 0;
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #4e4e4e;
-    line-height: 16px;
-
-    .c-title {
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #212121;
-    }
-    .c-sub-title {
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      color: #4e4e4e;
-    }
-  }
-  .info-wrap-desc {
-    margin-left: 10px;
-    margin-bottom: 0;
-    font-size: 12px;
-    line-height: 17px;
-    color: #aeaeae;
-  }
-  .info-wrap-position {
-    margin-bottom: 0;
-    font-size: 12px;
-    color: #7d88b5;
-    line-height: 17px;
-  }
-}
-
-.load-more-btn-wrap {
-  display: flex;
-  justify-content: center;
-  height: 35px;
-  line-height: 35px;
-  cursor: pointer;
-  padding-top: 10px;
-  box-sizing: border-box;
-
-  .search-input-icon {
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.4);
-    margin-right: 14px;
-  }
-  .load-more-btn {
-    font-size: 12px;
-    color: #747c8e;
-    line-height: 12px;
-  }
-}
-</style>

package/src/component/svg/index.vue

@@ -1,49 +0,0 @@
-<template>
-  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs">
-    <title v-if="title">{{ title }}</title>
-    <use :xlink:href="iconName" />
-  </svg>
-</template>
-
-<script lang="ts">
-export default {
-  name: "SvgIcon"
-}
-</script>
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-// svg图标组件 使用方式
-// 将svg图片放入 /assets/icons/svg/图片名称.svg
-// vue页面中 <svg-icon icon-class="图片名称"></svg-icon>
-
-  const props = withDefaults(defineProps<{
-    iconClass: string
-    title: string
-    className?: string
-  }>(), {
-    iconClass: '',
-    title: '',
-    default: ''
-  })
-  
-  const iconName = computed(() => `#icon-${props.iconClass}`)
-
-  const svgClass = computed(() => {
-    if (props.className) {
-      return "svg-icon " + props.className;
-    } else {
-      return "svg-icon";
-    }
-  })
-   
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>

package/src/core/create.js

@@ -1,5 +0,0 @@
-import { KEY_COMPONENT_NAME } from '../global/variable';
-export default function(vm) {
-  vm.name = KEY_COMPONENT_NAME + (vm.name || '');
-  return vm;
-}

package/src/global/variable.ts

@@ -1,2 +0,0 @@
-export const KEY_COMPONENT_NAME = 'C';
-export const GROUP_TITLE_KEY = 'group-show-title';

package/src/utils/clickoutside.ts

@@ -1,80 +0,0 @@
-interface Binding {
-  expression: any,
-  value?: any
-}
-
-const nodeList: any[] = [];
-const ctx = '@@clickoutsideContext';
-
-let startClick: MouseEvent;
-let seed = 0;
-
-document.addEventListener('mousedown', e => (startClick = e), false);
-document.addEventListener(
-  'mouseup',
-  e => {
-    nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
-  },
-  false
-);
-
-function createDocumentHandler(el: any, binding: Binding, vnode: any) {
-  return function(mouseup: any = {}, mousedown: any = {}) {
-    if (
-      !vnode ||
-      !vnode.context ||
-      !mouseup.target ||
-      !mousedown.target ||
-      el.contains(mouseup.target) ||
-      el.contains(mousedown.target) ||
-      el === mouseup.target ||
-      (vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target)))
-    )
-      return;
-
-    if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) {
-      vnode.context[el[ctx].methodName]();
-    } else {
-      el[ctx].bindingFn && el[ctx].bindingFn();
-    }
-  };
-}
-
-/**
- * v-clickoutside
- * @desc 点击元素外面才会触发的事件
- * @example
- * ```vue
- * <div v-element-clickoutside="handleClose">
- * ```
- */
-export default {
-  mounted(el: any, binding: Binding, vnode: any) {
-    nodeList.push(el);
-    const id = seed++;
-    el[ctx] = {
-      id,
-      documentHandler: createDocumentHandler(el, binding, vnode),
-      methodName: binding.expression,
-      bindingFn: binding.value
-    };
-  },
-
-  update(el: any, binding: Binding, vnode: any) {
-    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
-    el[ctx].methodName = binding.expression;
-    el[ctx].bindingFn = binding.value;
-  },
-
-  unmounted(el: any) {
-    let len = nodeList.length;
-
-    for (let i = 0; i < len; i++) {
-      if (nodeList[i][ctx].id === el[ctx].id) {
-        nodeList.splice(i, 1);
-        break;
-      }
-    }
-    delete el[ctx];
-  }
-};