cnhis-design-vue 3.1.1 → 3.1.4-beta.1

package/packages/big-table/src/assets/iconfont/iconfont.less

@@ -1,22 +0,0 @@
-/*
-@font-face {
-  font-family: "iconfont";
-  src: url('iconfont.ttf?t=1631151904509') format('truetype');
-}*/
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-a-xitongtubiaotianjia:before {
-  content: "\e9c3";
-}
-
-.icon-a-xitongtubiaozhediejian:before {
-  content: "\e9c4";
-}
-

package/packages/big-table/src/assets/style/table-global.less

@@ -1,171 +0,0 @@
-@import '../iconfont/iconfont.less';
-
-.big-table-filter-wrap {
-  position: fixed;
-  z-index: 99998;
-  transform: translateX(-2%);
-  margin-top: -6px;
-
-  min-width: 280px;
-  border-radius: 4px;
-  background-color: #fff;
-  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width 2s;
-
-  .sort-list {
-    margin-top: 6px;
-  }
-
-  .sort-item {
-    line-height: 32px;
-    padding: 0 13px;
-    display: flex;
-    align-items: center;
-
-    &:hover,
-    &.active {
-      background: #f2f2f2;
-    }
-  }
-
-  .sort-icon {
-    width: 16px;
-    height: 16px;
-    background-size: contain;
-    display: inline-block;
-  }
-
-  /*
-  .sort-icon-asc {
-    background-image: url('../img/icon-asc.png');
-  }
-  */
-
-  .sort-text {
-    margin-left: 11px;
-    font-size: 14px;
-    line-height: 32px;
-    color: rgba(0, 0, 0, 0.8);
-  }
-
-  /*
-  .sort-icon-desc {
-    background-image: url('../img/icon-desc.png');
-  }
-  */
-
-  .filter-header {
-    padding: 0 13px;
-    cursor: initial;
-  }
-
-  .filter-header-icon {
-    border-top-color: #333;
-    border-right-color: #333;
-  }
-
-  .filter-header-text {
-    margin-left: 11px;
-  }
-
-  .check-search-wrap {
-    padding: 8px 0;
-    width: 100%;
-    background: #f7f7f7;
-    display: flex;
-    justify-content: center;
-  }
-
-  .check-seach-input {
-    line-height: 32px;
-  }
-
-  .checkbox-box {
-    padding-right: 3px;
-    width: 100%;
-  }
-
-  .checkbox-wrap {
-    padding-left: 13px;
-    padding-right: 3px;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-      height: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: #d5d5d5;
-      border-radius: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: #fff;
-      border-radius: 4px;
-    }
-
-    &::-webkit-scrollbar-corner {
-      background-color: #000;
-      border-radius: 4px;
-      width: 4px;
-    }
-  }
-
-  .checkbox-wrap--search {
-    padding-right: 10px;
-  }
-
-  .checkbox-btn-wrap {
-    display: flex;
-    padding: 9px 10px 19px 14px;
-
-    .checkbox-btn {
-      width: 56px;
-      padding: 0;
-    }
-
-    .checkbox-btn+.checkbox-btn {
-      margin-left: 8px;
-    }
-
-    .checkbox-btn-status {
-      .checkbox-btn {
-        border: 0;
-        border-radius: 0;
-        width: initial;
-        margin: 0 13px;
-        position: relative;
-
-        &:hover::after {
-          display: block;
-          content: '';
-          position: absolute;
-          bottom: 5px;
-          width: 100%;
-          height: 1px;
-          background-color: #5585f5;
-        }
-      }
-    }
-  }
-
-  .arrows-icon {
-    position: absolute;
-    bottom: -1px;
-    right: -1px;
-    font-size: 15px;
-    cursor: nw-resize;
-    width: 25px;
-    height: 20px;
-  }
-}

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

@@ -1,63 +0,0 @@
-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,
-  editConfig: { trigger: 'manual', mode: 'cell', autoClear: false, showIcon: false }
-};
-
-export default bigTableState;

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

@@ -1,90 +0,0 @@
-<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/TextOverTooltip.vue

@@ -1,110 +0,0 @@
-<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.js';
-
-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>

package/packages/big-table/src/components/edit-form/edit-date.vue

@@ -1,75 +0,0 @@
-<script lang="tsx">
-import { defineComponent, ref, reactive, resolveComponent } from 'vue'
-import { NDatePicker } from 'naive-ui'
-
-export default defineComponent({
-  name: 'EditDate',
-  inheritAttrs: false,
-  components: {
-    NDatePicker
-  },
-  props: {
-    col: {
-      type: Object,
-      default: () => ({})
-    },
-    row: {
-      type: Object,
-      default: () => ({})
-    },
-    index: {
-      type: [Number, Object],
-      default: 0
-    }
-  },
-  emits: ['formChange'],
-  setup (props, { attrs, slots, emit }) {
-    const onConfirm = (value: any) => {
-      emit('formChange', { value, row: props.row, column: props.col, index: props.index })
-    }
-    const { isStartDate = false, isEndDate = false, connectField } = props.col
-    const setDateDisabled = (cur: number, date: number) => {
-      if (isStartDate && connectField) {
-        return cur > date
-      }
-      if(isEndDate && connectField) {
-        return cur < date
-      }
-      return false
-    }
-    const isDateDisabled = (ts: number) => {
-      return setDateDisabled(ts, new Date(props.row[connectField]).getTime())
-    }
-    const isTimeDisabled = (ts: number) => {
-      const date = new Date(props.row[connectField] || ts)
-      const h = date.getHours()
-      const m = date.getMinutes()
-      const s = date.getSeconds()
-      return {
-        isHourDisabled: (hour: number) => {
-          return setDateDisabled(hour, h)
-        },
-        isMinuteDisabled: (minute: number) => {
-          return setDateDisabled(minute, m)
-        },
-        isSecondDisabled: (second: number) => {
-          return setDateDisabled(second, s)
-        }
-      }
-    }
-    const config: any = {
-      type: props.col.type || 'datetime',
-      clearable: props.col.clearable || true,
-      disabled: props.col.disabled || false,
-      valueFormat: props.col.valueFormat || 'yyyy-MM-dd HH:mm:ss',
-      to: false,
-      isDateDisabled: props.col.isDateDisabled || isDateDisabled
-    }
-    if (config.type.includes('time')) {
-      config.isTimeDisabled = props.col.isTimeDisabled || isTimeDisabled
-    }
-    return () => <NDatePicker {...attrs} {...config} onUpdateFormattedValue={onConfirm} />
-  }
-})
-</script>
-<style lang="less" scoped></style>

package/packages/big-table/src/components/edit-form/edit-input.vue

@@ -1,39 +0,0 @@
-<script lang="tsx">
-import { defineComponent, ref, reactive, resolveComponent } from 'vue'
-import { NInput, NInputNumber } from 'naive-ui'
-
-export default defineComponent({
-  name: 'EditInput',
-  inheritAttrs: false,
-  components: {
-    NInput,
-    NInputNumber
-  },
-  props: {
-    type: {
-      type: String,
-      default: 'input'
-    },
-    col: {
-      type: Object,
-      default: () => ({})
-    },
-    row: {
-      type: Object,
-      default: () => ({})
-    },
-    index: {
-      type: [Number, Object],
-      default: 0
-    }
-  },
-  emits: ['formChange'],
-  setup (props, { attrs, slots, emit }) {
-    const onUpdateValue = (value: number | string | null) => {
-      emit('formChange', { value, row: props.row, column: props.col, index: props.index })
-    }
-    return () => props.type === 'input' ? <NInput {...attrs} onUpdateValue={onUpdateValue } /> : <NInputNumber {...attrs} onUpdateValue={onUpdateValue} />
-  }
-})
-</script>
-<style lang="less" scoped></style>

package/packages/big-table/src/components/edit-form/edit-select-table.vue

@@ -1,133 +0,0 @@
-<script lang="tsx">
-import { defineComponent, ref, reactive } from 'vue'
-import { NSelect, NPagination, NEmpty, NSpin, NSpace } from 'naive-ui'
-import CGrid from '~/grid'
-import vexutils from '@/utils/vexutils.js'
-
-export default defineComponent({
-  name: 'EditSelectTable',
-  inheritAttrs: false,
-  components: {
-    NSelect,
-    CGrid,
-    NPagination,
-    NEmpty,
-    NSpin,
-    NSpace
-  },
-  props: {
-    row: {
-      type: Object,
-      default: {}
-    },
-    col: {
-      type: Object,
-      default: {}
-    },
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['update:value', 'clickSelectTable'],
-  setup (props, { attrs, slots, emit }) {
-    const state = reactive({
-      value: props.value,
-      row: JSON.parse(JSON.stringify(props.row)),
-      page: 1,
-      pageCount: 0,
-      keyword: '',
-      data: [],
-      columns: JSON.parse(JSON.stringify(props.col.tableColumn)),
-      loading: false,
-      show: true
-    })
-
-    const selectTableFocus = () => {
-      state.show = true
-      state.page = 1
-      state.keyword = ''
-      state.pageCount = 0
-      querySelectTableList()
-    }
-    const querySelectTableList = async () => {
-      state.loading = true
-      const obj = {
-        page: state.page,
-        keyword: state.keyword
-      }
-      const { data, pageCount } = await props.col.querySelectTableList(obj)
-      state.data = data
-      state.pageCount = pageCount
-      state.loading = false
-    }
-    let selectTableSearch = (value: string) => {
-      state.keyword = value
-      querySelectTableList()
-    }
-    selectTableSearch = vexutils.debounce(selectTableSearch, 800)
-    // 初始化搜索
-    selectTableSearch('')
-    const getSelectTableGrid = () => {
-      const config = {
-        border: 'outer',
-        resizable: true,
-        autoResize: true,
-        showOverflow: true,
-        showHeaderOverflow: true,
-        highlightHoverRow: true,
-        highlightCurrentRow: true,
-        maxHeight: (props.col.tableHeight || 200),
-        align: 'center',
-        columns: state.columns,
-        data: state.data
-      }
-      return <CGrid {...config} onCellClick={(data: any) => onCellClick(data)}>{{
-        empty: () => <NEmpty description="无数据" />
-      }}</CGrid>
-    }
-    const onCellClick = (data: any) => {
-      const { row } = data
-      // emit('update:value', data.row?.[props.col.columnName])
-      emit('clickSelectTable', row)
-      state.show = false
-    }
-    const getPagination = () => {
-      const pagination = () => {
-        return <NPagination
-          v-model={[state.page, 'page']} 
-          pageCount={state.pageCount}
-          onUpdatePage={(page: number) => querySelectTableList()}
-        />
-      }
-      return <NSpace justify="space-between" align="center" style="margin-top: 5px">{{
-        default: () => [`共${state.pageCount}条`, pagination()]
-      }}</NSpace>
-    }
-    
-    return () => [
-      <NSelect
-        class="form-select-table"
-        placeholder='请选择'
-        options={[]}
-        consistentMenuWidth={false}
-        clearable
-        filterable
-        to={false}
-        show={state.show}
-        loading={state.loading}
-        onFocus={selectTableFocus}
-        onBlur={() => state.show = false}
-        onSearch={selectTableSearch}
-      >{{
-        action: () => state.loading ? <NSpace justify="center">{{ default: () => <NSpin class="spin" size="small" /> }}</NSpace> : [getSelectTableGrid(), state.pageCount ? getPagination() : null]
-      }}</NSelect>
-    ]
-  }
-})
-</script>
-<style lang="less" scoped>
-.spin {
-  margin: 80px auto;
-}
-</style>