cnhis-design-vue 0.3.1-beta → 0.3.4-beta

package/packages/big-table/src/bigTableState.ts

@@ -0,0 +1,62 @@
+const bigTableState = {
+  curAbleCheckedLen: 0, // 当前页能够多选的选项个数
+  showButtonTop: 0,
+  // hasOnlyIcon: false,
+  isTree: 0, // 0非数表 1全加载数表 2懒加载数表 3分组表
+  isShowEmpty: false,
+  /* 全选相关 */
+  currentPageSelectedLength: 0,
+  visibleCheckAllWrap: false,
+  visibleCheckAllWrapMore: false,
+  // 已勾选的表格row数据
+  checkedRows: [],
+  // 存储所有当前可筛选的表头
+  filterFields: {},
+  /* 树状已选 */
+  visibleTreeCheck: false,
+  treeTableLength: 0,
+  checkWidth: {
+    "table-simple": "30",
+    "table-classics": "24",
+  },
+  lastPageIndex: 1,
+  selectType: "",
+  levelLazyLoadSetting: null, // 数表懒加载配置
+  openOnly: 0, // 手风琴模式
+  filterWidth: 280, // 筛选框宽度
+  filterHeight: 120, // 筛选框高度
+  startX: 0, // 起始距离
+  distance: 0, // 移动距离
+  mask: "", // 拖拽遮罩层
+  groupText: [], // 分组统计 text
+
+  /* 行内编辑相关 */
+  currentClickBtnInfo: null,
+  /*  */
+
+  columnLen: 0, // column 长度
+  hasRefresh: false, // 当前列表是否有新的更新
+  isExpand: 0, // isTree == 1 是否全部展开
+  btnIcons: {
+    // 按钮icon 映射
+    copy: "copy",
+    pencil: "edit",
+    delete: "delete",
+    add: "plus-circle",
+    download: "download",
+    label: "tag",
+    queding: "check",
+    del: "close",
+  },
+  tableHeight: "100%",
+  //来自batchEditting
+  cacheUniqueKey: {},
+  theUniqueKeyListObj: {},
+  // batchFieldList: [],
+  editColumnMap: {},
+  fieldLength: 0,
+  originFormatList: [],
+  isSaveForm: false,
+};
+
+export default bigTableState;

package/packages/big-table/src/components/NoData.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="no-data-tip NoData-page">
+    <img v-if="showImg" :src="imgStr" alt="" />
+    <p>{{ noDataTip }}</p>
+    <span v-if="handleDesc">{{ handleDesc }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import noData from "../assets/img/nodata.png";
+import noPermission from "../assets/img/no-permission.png";
+import failure from "../assets/img/failure.png";
+import notfound from "../assets/img/notfound.png";
+
+const imgStr = computed(() => {
+  let str = null;
+  switch (props.noDataImg) {
+    case "no-permission":
+      str = noPermission;
+      break;
+    case "failure":
+      str = failure;
+      break;
+    case "nodata":
+      str = noData;
+      break;
+    default:
+      str = notfound;
+      break;
+  }
+  return str;
+});
+
+const props = defineProps({
+  noDataTip: {
+    type: String,
+    default: "暂无数据",
+  },
+  noDataImg: {
+    type: String,
+    default: "nodata",
+  },
+  showImg: {
+    type: Boolean,
+    default: true,
+  },
+});
+const handleDesc = computed(() => {
+  let res = "";
+  switch (props.noDataImg) {
+    case "no-permission":
+      res = "请联系管理员";
+      break;
+    case "failure":
+      res = "请稍后再试";
+      break;
+    default:
+      break;
+  }
+  return res;
+});
+</script>
+<style lang="less" scoped>
+.no-data-tip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #333333;
+  font-size: 22px;
+  > img {
+    max-width: 70%;
+    width: 260px;
+  }
+  > p {
+    margin-top: 12px;
+    margin-bottom: 0;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  > span {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.4);
+    margin-top: 6px;
+  }
+}
+</style>

package/packages/big-table/src/components/SvgIcon.vue

@@ -0,0 +1,49 @@
+<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/packages/big-table/src/components/TextOverTooltip.vue

@@ -0,0 +1,110 @@
+<script lang="ts">
+export default {
+  name: "TextOverTooltip"
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { NTooltip } from 'naive-ui'
+import vexutils from '@/utils/vexutils';
+
+const props = withDefaults(defineProps<{
+  content?: string | number
+  className?: string
+  refName?: string
+  effect?: string
+  placement?: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'
+  tooltipTitle?: string | number
+  isAlias?: boolean
+}>(), {
+  effect: 'dark',
+  placement: 'top',
+  tooltipTitle: ''
+})
+
+let isDisabledTooltip = ref(false) // 是否需要禁止提示
+
+const curContent = computed(() => {
+  let res = props.tooltipTitle || props.content || "";
+  if (vexutils.isNumber(res)) {
+    return res.toString();
+  }
+  return res;
+})
+
+const $refName: any = ref(null)
+// 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
+const onMouseOver = (str: any) => {
+  if (props.isAlias) {
+    isDisabledTooltip.value = true;
+    return;
+  }
+  let parentWidth = $refName.value.parentNode.offsetWidth;
+  let contentWidth = $refName.value.offsetWidth;
+  // 判断是否禁用tooltip功能
+  isDisabledTooltip.value = contentWidth > parentWidth;
+}
+const onMouseOut = () => {
+  isDisabledTooltip.value = false;
+}
+
+</script>
+
+<template>
+<div class="text-over-tooltip-components">
+  <NTooltip
+    :effect="effect"
+    :show="isDisabledTooltip"
+    :placement="placement"
+  >
+    <template #trigger>
+      <div
+        class="ellipsis"
+        :class="className"
+        @mouseover="onMouseOver(refName)"
+        @mouseout="onMouseOut"
+      >
+        <i :ref="el => { if (el) $refName = el }">
+          <slot></slot>
+          <i>{{ content }}</i>
+        </i>
+      </div>
+    </template>
+    {{curContent}}
+  </NTooltip>
+</div>
+</template>
+
+<style lang="less" scoped>
+.text-over-tooltip-components {
+  display: inline-block;
+  max-width: 98%;
+  /* 文字超出宽度显示省略号 单行 */
+  .ellipsis {
+    font-size: 14px;
+    color: #35393c;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    i {
+      font-style: normal;
+      word-break: keep-all;
+      white-space: nowrap;
+    }
+  }
+  /* 自定义样式 */
+  .fs20 {
+    font-size: 20px;
+    font-weight: 600;
+    color: green;
+    line-height: 22px;
+  }
+  .fs12 {
+    font-size: 12px;
+    font-weight: 400;
+    color: orange;
+    line-height: 14px;
+  }
+}
+</style>