cnhis-design-vue 2.2.3 → 2.2.6

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

@@ -1,285 +0,0 @@
-<script>
-import { Icon, Tooltip, Progress, Switch, Popover, Button, Dropdown, Menu, Checkbox, Input, Popconfirm } from 'ant-design-vue';
-import vexutils from '@/utils/vexutils';
-import SvgIcon from '@/component/svg/index.vue';
-export default {
-  functional: true,
-  name: 'AutoLayoutButton',
-  props: {
-    btnList: {
-      type: Array,
-      default: () => []
-    },
-    row: {
-      type: Object,
-      default: () => ({})
-    },
-    index: {
-      type: Number,
-      default: () => ({})
-    },
-    renderWidth: {
-      type: Number,
-      default: 0
-    }
-  },
-  render(createElement, context) {
-    const { props, parent, listeners } = context;
-
-    const { btnList, renderWidth, row, index } = props;
-
-    // 行内列表按钮改为自适应。
-    let filterList = Array.isArray(btnList) ? btnList.filter(btn => btn.isShow == '1' && btn.type != 'LINK') : [];
-
-    const clickBtn = (e, row, btn, index, j) => {
-      listeners?.clickBtn?.(row, btn, index, e, j);
-
-      if (!btn._disabled) {
-        btn._disabled = true;
-        setTimeout(() => {
-          btn._disabled = false;
-        }, 1000);
-      }
-
-      e.stopPropagation();
-    };
-
-    const getTextWidth = (text, font) => {
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      context.font = font;
-      const metrics = context.measureText(text);
-      return metrics.width;
-    };
-
-    const btnIcons = {
-      // 按钮icon 映射
-      copy: 'copy',
-      pencil: 'edit',
-      delete: 'delete',
-      add: 'plus-circle',
-      download: 'download',
-      label: 'tag',
-      queding: 'check',
-      del: 'close'
-    };
-
-    const handleName = (item, key = 'name') => {
-      return item._show_title || item.alias || item[key];
-    };
-
-    // 获取图标
-    const getBtnIcon = (btn, mr = '8px') => {
-      let icon;
-      if (btn.icon) {
-        if (btnIcons[btn.icon]) {
-          icon = (
-            <a-icon
-              type={btnIcons[btn.icon]}
-              style={{
-                marginRight: mr
-              }}
-            />
-          );
-        } else {
-          icon = (
-            <span title={handleName(btn)}>
-              <svg-icon
-                iconClass={btn.icon}
-                style={{
-                  marginRight: mr
-                }}
-              />
-            </span>
-          );
-        }
-      } else if (btn.iconSetting) {
-        icon = (
-          <svg-icon
-            iconClass={JSON.parse(btn.iconSetting).icon}
-            style={{
-              marginRight: mr
-            }}
-          />
-        );
-      }
-      return [icon];
-    };
-
-    // 平铺
-    const renderAllBtn = (list, prow, pindex) => {
-      const row = prow;
-      const index = pindex;
-      return list.map((btn, j) => {
-        let btnTitle = handleName(btn);
-        return (
-          <a-Button
-            ref={`rowBtnItem${btn.sid}`}
-            key={btn.sid + j}
-            data-key={btn.sid}
-            on-click={e => clickBtn(e, row, btn, index, j)}
-            class="btn-custom-class auto-layout-btn"
-            style={{
-              ...(btn._show_btn_style || vexutils.getBtnStyle(btn)),
-              ...{
-                display: !row.__isInlineEditing ? 'inline-block' : 'none'
-              }
-            }}
-            disabled={row.__isDisableInlineEdit || btn._disabled}
-            type={btn.showStyle == 'none_bg' || btn.showStyle === 'only_icon' ? 'link' : 'primary'}
-            ghost={btn.showStyle == 'white_bg'}
-            size="small"
-            title={btnTitle}
-          >
-            {getBtnIcon(btn)}
-            {btn.showStyle === 'only_icon' ? '' : btnTitle}
-          </a-Button>
-        );
-      });
-    };
-
-    // 折叠
-    const retnderHideBtn = (hideList, prow, pindex) => {
-      const row = prow;
-      const index = pindex;
-      if (hideList.length === 0) return;
-      return (
-        <a-dropdown trigger={['hover']}>
-          <a-icon type="more" style="cursor: pointer;" />
-          <a-menu slot="overlay">
-            {hideList.map((b, j) => {
-              return b ? (
-                <a-menu-item key={b.sid + j} class="c_dropdown-btn" on-click={e => clickBtn(e.domEvent, row, b, index, j)}>
-                  {getBtnIcon(b)}
-                  {b.showStyle === 'only_icon' ? '' : handleName(b)}
-                </a-menu-item>
-              ) : null;
-            })}
-          </a-menu>
-        </a-dropdown>
-      );
-    };
-
-    const getBtnWidth = btn => {
-      // icon:22 box:26
-      let w = 26;
-      const [icon] = getBtnIcon(btn);
-      if (icon) {
-        w += 22;
-      }
-      let btnTitle = handleName(btn);
-      let textw = btn.showStyle === 'only_icon' ? 0 : btn._show_title_width || getTextWidth(btnTitle, '14px Arial');
-      w += textw;
-      return w;
-    };
-
-    const handlePageResize = btnList => {
-      let hideList = [];
-      let showList = [];
-      try {
-        let wrapWidth = renderWidth - 8;
-        // 如果没有传入列的宽度，从dom上取
-        if ((wrapWidth || 0) < 0) {
-          const pWrap = parent?.$el;
-          const layoutWrap = pWrap?.querySelector('.b-table-operator-column .vxe-cell--title');
-          if (!layoutWrap)
-            return {
-              hideList,
-              showList
-            };
-          wrapWidth = layoutWrap.clientWidth;
-        }
-
-        let btnTotalWidth = 0;
-        let showBtnListWidth = 0;
-        let hideIndex = -1;
-        let len = this?.btnList?.length || 0;
-        let last = len - 1 > 0 ? len - 1 : 0;
-        btnList.forEach((btn, i) => {
-          if (hideIndex > 0) {
-            btn.showType = '_hide';
-            return;
-          }
-          let btnWidth = getBtnWidth(btn);
-          // 最后一个不用加
-          let mg = last == i ? 0 : 10;
-          btnTotalWidth += (btnWidth || 0) + mg;
-          if (btnTotalWidth < wrapWidth) {
-            btn.showType = '_show';
-            showBtnListWidth = btnTotalWidth;
-          } else {
-            btn.showType = '_hide';
-            hideIndex = i;
-          }
-        });
-
-        btnList.forEach(btn => {
-          if (btn.showType === '_hide') {
-            hideList.push(btn);
-          } else {
-            showList.push(btn);
-          }
-        });
-        // 边界处理
-        // 如果有 hideList 有数据
-        // 展示的按钮宽度和加上“更多按钮”的宽度大于容器的宽度，showList 最后一个按钮移动到 hideList
-        if (hideList.length > 0 && showBtnListWidth + 15 + 10 > wrapWidth) {
-          let t = showList.pop();
-          t && hideList.unshift(t);
-        }
-      } catch (error) {
-        console.log(error)
-      }
-
-      return {
-        hideList,
-        showList
-      };
-    };
-
-    const { showList, hideList } = handlePageResize(filterList);
-
-    return (
-      <div class="c_auto-layout-wrap" ref="layoutWrap">
-        {showList.length === 0 && hideList.length === 0 ? (
-          renderAllBtn(filterList, row, index)
-        ) : (
-          <div>
-            {renderAllBtn(showList, row, index)}
-            {retnderHideBtn(hideList, row, index)}
-          </div>
-        )}
-      </div>
-    );
-  },
-  methods: {
-
-  },
-  components: {
-    [Icon.name]: Icon,
-    [Button.name]: Button,
-    [Dropdown.name]: Dropdown,
-    [Menu.name]: Menu,
-    [Menu.Item.name]: Menu.Item,
-    [Menu.ItemGroup.name]: Menu.ItemGroup,
-    SvgIcon
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.c_auto-layout-wrap {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  .auto-layout-btn + .auto-layout-btn {
-    margin-left: 10px;
-  }
-  .auto-layout-btn + .ant-dropdown-trigger {
-    margin-left: 10px;
-  }
-}
-.ant-dropdown-menu-item.c_dropdown-btn {
-  justify-content: flex-start;
-}
-</style>

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

@@ -1,371 +0,0 @@
-<template>
-  <div class="c-filter-container">
-    <a-spin :spinning="wordbookSearch.fetchingWordbook" class="filter-loading" >
-      
-     
-        <div class="sort-list" :style="{ display: field.isSort ? 'block' : 'none' }">
-          <div
-            :class="['sort-item', { active: field.filterSort === 'asc' }]"
-            @click="() => handlefilterBoxClickSort('asc', field)"
-          >
-            <i class="sort-icon sort-icon-asc"></i>
-            <span class="sort-text">升序 A to Z</span>
-          </div>
-          <div
-            :class="['sort-item', { active: field.filterSort === 'desc' }]"
-            @click="() => handlefilterBoxClickSort('desc', field)"
-          >
-            <i class="sort-icon sort-icon-asc"></i>
-            <span class="sort-text">降序 Z to A</span>
-          </div>
-        </div>
-        <template v-if="searchErr">
-          <a-empty :description="resultMsg" />
-        </template>
-
-        <div class="check-wrap-div" v-show="!searchErr">
-          <div v-if="showfilterSearch" class="checkbox-wrap checkbox-wrap--search">
-            <div class="check-search-wrap">
-              <a-input-search
-                placeholder="字段搜索"
-                class="check-seach-input"
-                :allowClear="true"
-                @search="(val) => handleFilterSeachDebounce(val, field)"
-              />
-            </div>
-          </div>
-          <div class="checkbox-box">
-            <div class="checkbox-wrap js-checkbox-wrap" :style="{ height: useCHeight + 'px' }">
-              <div v-if="showCheckAll" class="ant-checkbox-group">
-                <a-checkbox
-                  :indeterminate="indeterminate"
-                  :checked="checkAll"
-                  @change="(val) => handleFilterChangeAll(val, field)"
-                >
-                  全选
-                </a-checkbox>
-              </div>
-              <a-checkbox-group
-                v-if="!searchFilterText"
-                :options="filterOptions"
-                name="CheckboxHeaderFilter_C"
-                :value="CONVERT"
-                class="c-chekbox-group"
-                @change="(val) => handleFilterChange(val, field.columnName, field)"
-              >
-                <!-- 这里的设置主要是给字典搜索的筛选, 如果展示的label过长那么添加个title -->
-                <template slot="label" slot-scope="{ _show_title }" >
-                  <span  :title="_show_title">{{ _show_title }}</span>
-                </template>
-              </a-checkbox-group>
-              <a-checkbox-group
-                v-else
-                :options="filterOptions"
-                :value="searchFilterCONVERT"
-                class="s-chekbox-group"
-                name="CheckboxHeaderFilter_S"
-                @change="(val) => handleFilterSearchChange(val , field.columnName, field)"
-              />
-            </div>
-            <div  v-if="showPage" class="checkbox-page">
-              <select-pages :searchPageConfig="wordbookSearch" :handleSearchChangePage="handleSearchChangePage" />
-            </div>
-          </div>
-        </div>
-
-        <div
-          class="checkbox-btn-wrap"
-          :style="{ justifyContent: CONVERTLen ? 'space-between' : 'flex-end' }"
-        >
-          <div v-if="CONVERTLen" class="checkbox-btn-status">
-            <span>已选择{{ CONVERTLen }}项</span>
-            <a-button class="checkbox-btn checkbox-btn-clear" type="link" @click="() => handleFilterClearAll(field)">
-              清空
-            </a-button>
-          </div>
-          <div>
-            <a-button class="checkbox-btn" @click="() => handleCancelFilter(field)"> 取消 </a-button>
-            <a-button class="checkbox-btn" type="primary" @click="() => handleFilter(field)">确定 </a-button>
-          </div>
-        </div>
-    </a-spin>
-  </div>
-</template>
-<script>
-import Vue from 'vue';
-import { Checkbox, Input, Button, Spin, Empty } from 'ant-design-vue';
-import selectPages from '@/component/select-pages';
-export default {
-  name: "HeaderFilter",
-  props: {
-    field: { type: Object, default: () => ({}) },
-    cHeight: { type: Number, default: 0 },
-    handlefilterBoxClickSort: { type: Function, default: () => {} },
-    handleFilterSeachDebounce: { type: Function, default: () => {} },
-    handleFilterChangeAll: { type: Function, default: () => {} },
-    handleFilterChange: { type: Function, default: () => {} },
-    handleFilterSearchChange: { type: Function, default: () => {} },
-    handleFilterClearAll: { type: Function, default: () => {} },
-    handleCancelFilter: { type: Function, default: () => {} },
-    handleFilter: { type: Function, default: () => {} }
-  },
-  components: {
-    [Checkbox.Group.name]:Checkbox.Group,
-    [Checkbox.name]: Checkbox,
-    [Input.Search.name]: Input.Search,
-    [Input.name]: Input,
-    [Button.name]: Button,
-    [Spin.name]: Spin,
-    [Empty.name]: Empty,
-    selectPages
-  },
-
-  data() {
-    return {};
-  },
-
-  computed: {
-    
-    filterSettingMap() {
-      return this.field?.filterSettingMap || {};
-    },
-    useCHeight() {
-      if(!this.showPage) return this.cHeight;
-      return this.cHeight - 33;
-    },
-    showfilterSearch() {
-      return this.filterSettingMap.showfilterSearch;
-    },
-    searchFilterText() {
-      return this.field?.searchFilterText;
-    },
-    showCheckAll() {
-      return this.filterSettingMap.showSelectAll && !this.searchFilterText;
-    },
-    checkAll() {
-      return this.field?.checkAll;
-    },
-    indeterminate() {
-      return this.field?.indeterminate;
-    },
-    filterOptions() {
-      return this.filterSettingMap.filterOptions || [];
-    },
-    CONVERT() {
-      return this.field?.CONVERT || [];
-    },
-    searchFilterCONVERT() {
-      return this.field?.searchFilterCONVERT || [];
-    },
-    CONVERTLen() {
-      return this.CONVERT?.length || 0;
-    },
-    wordbookSearch() {
-      return this.field?.wordbookSearch || {};
-    },
-    searchErr(){
-      return this.filterSettingMap.isVaildWordbook && this.wordbookSearch.isRequest && this.wordbookSearch.result && this.wordbookSearch.result !== 'SUCCESS'
-    },
-    resultMsg(){
-      return this.wordbookSearch.resultMsg || '暂无数据';
-    },
-    showPage(){
-      const isVaildWordbook =  this.filterSettingMap.isVaildWordbook;
-      const {hasNextPage, page} = this.wordbookSearch;
-      return isVaildWordbook && (hasNextPage || page > 1)
-    },
-    
-  },
-  watch: {},
-  // 生命周期
-  beforeCreate(){},
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {
-    handleSearchChangePage(type){
-      let cType = type || 'next';
-      let { page, keyword = undefined } = this?.wordbookSearch;
-      page = cType === 'next' ? page + 1 : page - 1;
-      this.handleFilterSeachDebounce(keyword, this.field, {page});
-    },
-  }
-};
-</script>
-<style lang="less">
-.c-filter-container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  transition: width 2s;
-  padding-top: 8px;
-  text-align: left;
-  border-radius: 4px;
-  .filter-loading {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    .ant-spin-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-      overflow: hidden;
-    }
-  }
-  .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("../assets/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("../assets/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;
-    margin-top: 4px;
-    width: 100%;
-  }
-  .check-wrap-div {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-  .checkbox-wrap {
-    padding-left: 13px;
-    padding-right: 3px;
-    width: 100%;
-    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;
-  }
-
-  .ant-checkbox-group-item,
-  .ant-checkbox-wrapper {
-    padding-left: 10px;
-    padding-right: 10px;
-    line-height: 32px;
-    height: 32px;
-    box-sizing: border-box;
-    margin-right: 0;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background: #f7f7f7;
-    display: block;
-
-    &:hover {
-      background: #ececec;
-    }
-  }
-
-  .checkbox-page {
-    padding-left: 13px;
-    padding-right: 7px;
-    .form-select-btn {
-      border: 1px solid #d5d5d5;
-    }
-  }
-
-  .checkbox-btn-wrap {
-    display: flex;
-    padding: 8px 10px 8px 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: @primary-color;
-        }
-      }
-    }
-  }
-}
-</style>