kn-cli 1.0.131 → 1.0.134

package/templates/template_admin_antd5/public/src/components/table/imageTable/index.jsx

@@ -0,0 +1,302 @@
+import React,{useCallback} from 'react';
+// @ts-ignore
+import { Pagination,Checkbox,Tooltip, Spin,Tag } from "@/components/antd";
+import ShowPreviewImage from '@/components/image/preview';
+import ShowPreviewVideo from '@/components/video/preview';
+import Empty from '@/components/empty';
+// @ts-ignore
+import styles from './index.module.less';
+import { emMaterialTypeZeus } from '@/dictionary';
+import { jumpUrl } from '@/utils';
+import Radio from './radio';
+import { PlayVideo } from '@/components/icon';
+import {getMaterialTags} from '@/pages/bullet/material/material/column'
+import ShowViewImageList from '@/pages/components/dialog/viewImageList';
+import CheckboxBlock from '@/pages/components/checkboxBlock';
+
+import {updatePageSizeToLocal,calPageSize,PAGE_SIZE_LIST} from '../';
+
+const MaterialType={
+  Video:'video',
+  ImageText:'imageText',
+  Image:'image',
+  Douyin:'douyin',
+  Design:'design',
+  DouyinImageText:'douyinImageText',
+  StarDeliveryVideo:'starDeliveryVideo',
+  RemoteVideo:'remoteVideo',
+}
+
+const InfoType={
+  Cover:'cover',// 封面
+  Url:'url',// 素材真实url
+  Type:'type',// 素材类型
+  Name:'name',//素材名称
+  Tags:'tags',//媒体标签
+}
+/**
+ * 图片视频等素材的大图展示列表
+ * @param {object} [props] 
+ * @param {string} [props.rowKey='id'] - 主键key名称
+ * @param {boolean} [props.loading] - 是否加载中
+ * @param {Array} [props.dataSource] - 数据数组
+ * @param {object} [props.pagination] - 分页器，参考配置项或 pagination 文档，设为 false 时不展示和进行分页
+ * @param {object} [props.page] - 表格数据，包括数据数组、分页参数、loading等
+ * @param {import('@/hooks/useTableRowSelect').UseTableRowSelect} [props.rowSelecter] - 选中管理器
+ * @param {(item:object,type:string)=>string} [props.onGetItemInfo] - 获取对象信息的监听方法
+ * @param {boolean|string[]} [props.hideInfo] - 是否隐藏信息
+ * @param {JSX.Element} [props.footer] - 表格底部额外的东西
+ * @param {boolean} [props.isRadio=false] - 是否是单选框
+ * @param {number} [props.columnCount=4] - 每行容纳的素材个数
+ * @param {string} [props.materialType] - 当前列表内的素材类型,来源：MaterialType
+ * @param {(item:object,type:string)=>JSX.Element} [props.renderItemInfo] - 渲染对象信息的方法
+ * @param {(record:object)=>boolean} [props.getCheckboxDisabled] - 每一个选项的配置
+ * @param {(item:object,e:any)=>void} [props.onView] - 点击图片的回调事件
+ * @param {(item:object)=>JSX.Element} [props.renderFlag] - 渲染角标
+ * @returns {JSX.Element}
+ */
+const ImageTable = (props) => {
+  const {
+    rowKey='id',
+    loading,
+    dataSource,
+    pagination,
+    page,
+    rowSelecter,
+    onGetItemInfo,
+    hideInfo=[InfoType.Tags],
+    footer=null,
+    isRadio=false,
+    columnCount=4,
+    materialType,
+    renderItemInfo,
+    getCheckboxDisabled,
+    onView:_onView,
+    renderFlag,
+    ...others
+  } = props;
+
+
+  const paginationFn = useCallback(() => {
+    // pagination=false时不分页
+    if (typeof pagination === 'boolean') {
+      return pagination;
+    }
+    if( page?.pagination?.pageSize){
+      updatePageSizeToLocal( page?.pagination?.pageSize )
+      let sizeList = pagination?.pageSizeOptions||PAGE_SIZE_LIST;
+      page.pagination.pageSize=  calPageSize(page.pagination.pageSize,sizeList);
+
+    }
+    return {
+      pageSizeOptions: PAGE_SIZE_LIST,
+      current: page?.pagination?.current,
+      pageSize: page?.pagination?.pageSize,
+      total: page?.pagination?.total,
+      showTotal: (total) => `总计${total}条`,
+      ...pagination,
+    };
+  }, [pagination, page]);
+
+
+  const onView=(type,src,item,e)=>{
+    e.stopPropagation();
+    if(_onView){
+      _onView(item,e);
+      return;
+    }
+    if(type==MaterialType.Video){
+      ShowPreviewVideo({src})
+    }else if(type==MaterialType.Image){
+      ShowPreviewImage({data:{src}})
+    }else if( type == MaterialType.DouyinImageText || type == MaterialType.RemoteVideo || type==MaterialType.Douyin){
+      jumpUrl(src,{newWindow:true})
+    }
+  }
+  const onChecked=(item,e)=>{
+    rowSelecter.onSelect(item,e.target.checked)
+  }
+  const onCheckedAll=()=>{
+    let keys=[];
+    let _list=[];
+    list.forEach(item=>{
+      if(getCheckboxDisabled && getCheckboxDisabled(item)){
+        return;
+      }
+      _list.push(item)
+      keys.push(item[rowKey]);
+    });
+    rowSelecter.onSelectAll(keys,_list,_list)
+  }
+  const onCheckedAllChange=(e)=>{
+    if(e.target.checked){
+      onCheckedAll();
+    }else{
+      rowSelecter.clear();
+    }
+  }
+
+  const getCheckedState=()=>{
+    let all=false;
+    let half=false;
+    if(rowSelecter.checked.length<=0){
+      return {all,half};
+    }
+    if(list?.length<=0){
+      return {all,half}
+    }
+
+    let keys =list.map(item=>item[rowKey])||[];
+    keys.sort();
+    let _keys = [...rowSelecter.checked].sort();
+    if(keys.length == _keys.length){
+      if( JSON.stringify(keys) == JSON.stringify(_keys) ){
+        all=true;
+      }
+    }
+
+    if(!all){
+      half=keys.some(_current=>{
+        if(_keys.includes(_current)){
+          return true;
+        }
+        return false;
+      });
+    }
+    return {all,half};
+
+  }
+
+  const getItemInfo=(item,type)=>{
+    if(onGetItemInfo){
+      return onGetItemInfo(item,type);
+    }
+    switch(type){
+      case InfoType.Cover:return item.cover||item.url;
+      case InfoType.Url:return item.url;
+      case InfoType.Name:return item.name;
+      case InfoType.Type:{
+        if(materialType){
+          return materialType;
+        }
+        let type = emMaterialTypeZeus.getName(item.type);
+        if('video'==type){
+          return MaterialType.Video;
+        }else{
+          return MaterialType.Image;
+        }
+      }
+      case InfoType.Tags:{
+        let tags = getMaterialTags(item,false);
+        return tags?.map(tag=>tag.name)||[];
+      }
+    }
+    return '';
+  }
+
+  // const renderFlag=(item)=>{
+  //   let flagType = getItemInfo(item,InfoType.Type)
+  //   const flagName={
+  //     [MaterialType.Video]:'视频',
+  //     [MaterialType.ImageText]:'图文',
+  //     [MaterialType.Image]:'图片',
+  //     [MaterialType.Douyin]:'抖音号',
+  //     [MaterialType.Design]:'设计组',
+  //     [MaterialType.DouyinImageText]:'抖音图文',
+
+  //   }
+  //   if(!flagType)return '';
+  //   return <div className={styles.flag} data-type={flagType}>{flagName[flagType]}</div>
+  // }
+
+  const getList=()=>{
+    if(dataSource)return dataSource;
+    if(page.mode == 'scrollLoad'){
+      return page.scrollData || [];
+    }else{
+      return page?.data?.[page?.pagination?.current - 1] ||[];
+    }
+  }
+
+  const showInfo=(type)=>{
+    if(hideInfo===true)return false;
+    if(hideInfo===false)return true;
+    if(Array.isArray(hideInfo)){
+      return !hideInfo.includes(type)
+    };
+    return true;
+  }
+  let list = getList();
+
+  if(list?.length<=0){
+    return <section className={styles.empty}><Empty /></section>
+  }
+
+  const checkedState=getCheckedState();
+  return (
+    <section className={styles.wrap}>
+      {
+        !isRadio&&
+        <div className={styles.checkedAllBar}>
+          <Checkbox 
+            indeterminate={checkedState.half} 
+            onChange={onCheckedAllChange} 
+            checked={checkedState.all}
+          >
+            全选
+          </Checkbox>
+        </div>
+      }
+      <div className={styles.imageList} data-flex={true} data-hide-info={hideInfo===true?true:false} data-column-count={columnCount}>
+      {
+        list.map((item,idx)=>{
+          const url = getItemInfo(item,InfoType.Url);
+          const cover = getItemInfo(item,InfoType.Cover);
+          const name = getItemInfo(item,InfoType.Name);
+          const type = getItemInfo(item,InfoType.Type);
+          const tags = getItemInfo(item,InfoType.Tags)
+
+          return (
+            <div className={styles.imageGrid} key={idx}>
+              {
+                isRadio?
+                (<div className={styles.checkBox}><Radio disabled={getCheckboxDisabled?getCheckboxDisabled(item):false} checked={rowSelecter?.checked?.includes(item[rowKey])} onChange={onChecked.bind(this,item)} /></div>)
+                :(<div className={styles.checkBox}><CheckboxBlock disabled={getCheckboxDisabled?getCheckboxDisabled(item):false} onChange={onChecked.bind(this,item)} checked={rowSelecter?.checked?.includes(item[rowKey])} /></div>)
+              }
+              
+              <div className={styles.imageView} onClick={onView.bind(this,type,url,item)}>
+                <img src={cover} />
+                {[MaterialType.RemoteVideo,MaterialType.Video,MaterialType.Douyin].includes(type)&&<PlayVideo className={styles.playIcon} size={30} onClick={onView.bind(this,type,url)}/>}
+              </div>
+              {renderItemInfo?renderItemInfo(item,type):(
+                <div className={styles.infoWrap} data-hide={hideInfo===true?true:false}>
+                  <div className={styles.imageInfo} >
+                    <span className={styles.text}><Tooltip title={name}>{name}</Tooltip></span>
+                  </div>
+                  {
+                    showInfo(InfoType.Tags)&&
+                    <div className={styles.tags}>
+                      <Tooltip title={tags?tags.join(';'):'无'}><span className={styles.tagTitle}>媒体标签({tags?.length||0})</span></Tooltip>
+                    </div>
+                  }
+                </div>
+                
+              )}
+              {renderFlag&&renderFlag(item)}
+            </div>
+          )
+        })
+      }
+      </div>
+      <div className={styles.pagination}>
+        {page.mode == 'pagination'&&pagination!==false&&<Pagination {...paginationFn()}/>}
+      </div>
+      {footer?<div className={styles.footer}>{footer}</div>:''}
+      <div className={styles.loading} data-show={ loading || page?.loading?.state }><Spin /></div>
+    </section>
+  );
+};
+ImageTable.InfoType=InfoType;
+ImageTable.MaterialType=MaterialType;
+
+export default ImageTable;

package/templates/template_admin_antd5/public/src/components/table/imageTable/index.module.less

@@ -0,0 +1,196 @@
+@import '~@/_mixin.module.less';
+@import '~@/_variable.module.less';
+.empty{
+  width: 100%;
+  height: 200px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+}
+.checkedAllBar{
+  background-color: #F5F8FF;
+  border-radius: 4px;
+  padding: 8px 12px;
+}
+.wrap{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  overflow: hidden;
+  .imageList{
+    position: relative;
+    flex:1;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-rows:217px;
+
+    &[data-flex='true']{
+      display: flex;
+      flex-wrap: wrap;
+      align-content:flex-start;
+    }
+
+    grid-gap: 12px;
+    overflow: auto;
+    .scrollBar;
+
+    &[ data-column-count='5']{
+      grid-template-columns: repeat(5,1fr);
+    }
+    &[ data-column-count='6']{
+      grid-template-columns: repeat(6,1fr);
+    }
+
+    &[data-hide-info='true']{
+      grid-template-rows:159px;
+    }
+
+    .imageGrid{
+
+      flex-shrink: 0;
+      flex-grow: 0;
+      position: relative;
+      width: 159px;
+      height: 217px;
+      border:1px solid #DEE0E3;
+      border-radius: 5px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      
+      .checkBox{
+        position: absolute;
+        left:4px;
+        top:4px;
+        width: 100%;
+      }
+      .imageView{
+        padding:12px;
+        flex:1;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #F3F3F3;
+        cursor: pointer;
+        overflow: hidden;
+        img{
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+      .infoWrap{
+        padding:6px 12px;
+        width: 100%;
+        &[data-hide='true']{
+          display: none;
+        }
+        .tags{
+          display: flex;
+          flex-wrap:wrap;
+          row-gap: 4px;
+          height: 24px;
+          overflow: hidden;
+          .tagTitle{
+            color: var(--color-primary);
+            font-size: 14px;
+          }
+        }
+      }
+      .imageInfo{
+        width: 100%;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 400;
+        font-size: 12px;
+        color: #373C43;
+
+        .text,
+        .text span{
+          width: 100%;
+          max-width: 100%;
+          display: -webkit-box;        
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;        
+          overflow: hidden;            
+          text-overflow: ellipsis;    
+          white-space: normal;    
+          word-break: break-all;
+        }
+
+
+      }
+    }
+    &[data-hide-info='true']{
+      .imageGrid{
+        height: 159px;
+      }
+    }
+  }
+  .pagination{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+}
+
+.loading{
+  position: absolute;
+  display: none;
+  left:0;
+  top:0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255,255,255,.8);
+  z-index: 3;
+  &[data-show='true']{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.footer{
+  width: 100%;
+  position: relative;
+}
+.flag{
+  position: absolute;
+  right:4px;
+  top:4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding:0 5px;
+  border-radius: 2px 2px 2px 2px;
+  color:white;
+  font-size: 12px;
+  // width: 32px;
+  // height: 16px;
+  &[data-type='video']{
+    background: #F39322;
+  }
+  &[data-type='imageText']{
+    background: #D580FF;
+  }
+  &[data-type='image']{
+    background: #1CC9E5;
+  }
+  &[data-type='douyin']{
+    background: #5B609E;
+  }
+  &[data-type='design']{
+    background: #7755FF;
+  }
+}
+
+.playIcon{
+  position: absolute;
+}

package/templates/template_admin_antd5/public/src/components/table/imageTable/radio.jsx

@@ -0,0 +1,15 @@
+
+import React from 'react';
+import styles from './radio.module.less';
+
+const Radio=props=>{
+  const {checked,onChange:_onChange} = props;
+  const onChange=()=>{
+    if(_onChange){
+      _onChange({target:{checked:!checked}})
+    }
+  }
+  return <div className={styles.wrap} data-checked={checked} onClick={onChange}/>
+}
+
+export default Radio;

package/templates/template_admin_antd5/public/src/components/table/imageTable/radio.module.less

@@ -0,0 +1,18 @@
+
+
+.wrap{
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  background: #FFFFFF;
+  border-radius:20px;
+  border: 1px solid #BBBFC4;
+  &[data-checked='true']{
+    background-image: url('~@/assets/images/checked.png');
+    background-size:100% 100%;
+  }
+}