Skip to content

W
wisdom-components
Commit 5d128a0a authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 提交便跟

parent c9e3086e
Pipeline #59458 failed with stages
          in 18 seconds
          Expand all Hide whitespace changes
          Inline Side-by-side
          Showing with 393 additions and 388 deletions
          packages/base-components/RichText/src/demos/demo.jsx
          View file @ 5d128a0a
          ......@@ -12,82 +12,85 @@ import RichTextShow from '../RichTextShow';
          import styles from './demo.less';
          class RichTextDemo extends React.Component {
          constructor(props) {
          super(props);
          this.myRichText = React.createRef();
          this.state = {
          personList: [
          { userId: 568, userName: '徐乐' },
          { userId: 569, userName: '余苏苏' },
          { userId: 572, userName: '周宏民' },
          ],
          content: '',
          fileList: [],
          };
          }
          getData = async () => {
          // const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
          // this.setState({
          // // personList: res.data || [],
          // });
          // const arr = [
          // {
          // name: '工时管理_工时日报 (1).xlsx',
          // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          // size: 8192,
          // path:
          // '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
          // },
          // {
          // name: '浊度.png',
          // type: 'image/png',
          // size: 6789,
          // path:
          // '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
          // },
          // ];
          // // this.setState({ fileList: arr });
          // this.myRichText.current && this.myRichText.current.setHtml('');
          constructor(props) {
          super(props);
          this.myRichText = React.createRef();
          this.state = {
          personList: [
          { userId: 568, userName: '徐乐' },
          { userId: 569, userName: '余苏苏' },
          { userId: 572, userName: '周宏民' },
          ],
          content: '',
          fileList: [],
          };
          }
          componentDidMount = () => {
          this.getData();
          };
          getData = async () => {
          // const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
          // this.setState({
          // // personList: res.data || [],
          // });
          // const arr = [
          // {
          // name: '工时管理_工时日报 (1).xlsx',
          // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          // size: 8192,
          // path:
          // '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
          // },
          // {
          // name: '浊度.png',
          // type: 'image/png',
          // size: 6789,
          // path:
          // '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
          // },
          // ];
          // // this.setState({ fileList: arr });
          // this.myRichText.current && this.myRichText.current.setHtml('');
          };
          componentDidMount = () => {
          this.getData();
          };
          componentDidUpdate = (propNev, stateNev) => { };
          componentDidUpdate = (propNev, stateNev) => {};
          componentWillUnmount() {
          this.setState = () => { };
          }
          componentWillUnmount() {
          this.setState = () => {};
          }
          render() {
          return (
          <div className={styles.RichTextDemo}>
          <div className={styles.RichTextDemoContainer}>
          <RichText
          // content={this.state.content}
          personList={this.state.personList}
          onChange={val => {
          this.setState({ content: val });
          }}
          onChangeFile={arr => {
          this.setState({ fileList: arr });
          }}
          fileList={this.state.fileList}
          projectId={19}
          ref={this.myRichText}
          />
          </div>
          {/* <div className={styles.contentBox}>{this.state.content}</div> */}
          <div className={styles.contentBox}>
          <RichTextShow content={this.state.content} onClickImg={src => { }} fileList={this.state.fileList} />
          </div>
          <div className={styles.contentBox}>{this.state.content}</div>
          </div>
          );
          }
          render() {
          return (
          <div className={styles.RichTextDemo}>
          <div className={styles.RichTextDemoContainer}>
          <RichText
          // content={this.state.content}
          personList={this.state.personList}
          onChange={(val) => {
          this.setState({ content: val });
          }}
          onChangeFile={(arr) => {
          this.setState({ fileList: arr });
          }}
          fileList={this.state.fileList}
          projectId={19}
          ref={this.myRichText}
          />
          </div>
          {/* <div className={styles.contentBox}>{this.state.content}</div> */}
          <div className={styles.contentBox}>
          <RichTextShow
          content={this.state.content}
          onClickImg={(src) => {}}
          fileList={this.state.fileList}
          />
          </div>
          <div className={styles.contentBox}>{this.state.content}</div>
          </div>
          );
          }
          }
          export default RichTextDemo;
          packages/base-components/RichText/src/demos/demo.less
          View file @ 5d128a0a
          .RichTextDemoContainer {
          // height: 400px;
          // padding: 0px 100px;
          background-color: #fff;
          }
          .contentBox {
          // height: 400px;
          margin-top: 10px;
          padding: 20px;
          background-color: #fff;
          }
          .RichTextDemo {
          height: 100%;
          overflow-y: scroll;
          }
          \ No newline at end of file
          .RichTextDemoContainer {
          // height: 400px;
          // padding: 0px 100px;
          background-color: #fff;
          }
          .contentBox {
          // height: 400px;
          margin-top: 10px;
          padding: 20px;
          background-color: #fff;
          }
          .RichTextDemo {
          height: 100%;
          overflow-y: scroll;
          }
          packages/base-components/RichText/src/fileListItem.js
          View file @ 5d128a0a
          ......@@ -4,97 +4,106 @@
          * @Date: 2022-03-21 14:44:49
          */
          import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
          import { FileTwoTone, DeleteOutlined, FileImageTwoTone, DownloadOutlined, PictureOutlined } from '@ant-design/icons';
          import {
          FileTwoTone,
          DeleteOutlined,
          FileImageTwoTone,
          DownloadOutlined,
          PictureOutlined,
          } from '@ant-design/icons';
          import { Button } from 'antd';
          import iconFile from './icon_file.png';
          function fileListItem(props) {
          const [fileList, setFileList] = useState([]);
          const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
          const onPreview = item => {
          props.onPreview(item);
          };
          const onDownLoad = item => {
          const a = document.createElement('a');
          a.setAttribute('download', item.name);
          a.setAttribute('href', item.path);
          document.documentElement.appendChild(a);
          a.target = '_black';
          a.click();
          };
          useEffect(() => {
          setFileList(props.list || []);
          }, [props.list]);
          return (
          <>
          {fileList.map((item, index) => {
          return (
          <div key={index} className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}>
          <div className={'panda-civ-work-upload-list-picture-container'}>
          <div className={'panda-civ-work-upload-list-item'}>
          <div className={'panda-civ-work-upload-list-item-info'}>
          <span className={'panda-civ-work-upload-span'}>
          <div
          className={
          'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file'
          }
          >
          {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
          <img src={iconFile} />
          </div>
          <span
          className={'panda-civ-work-upload-list-item-name'}
          title={item.name}
          style={{ cursor: 'pointer' }}
          >
          {item.name}
          </span>
          <span className={'panda-civ-work-upload-list-item-card-actions picture'}>
          {imgType.includes(item.type) && (
          <Button
          title="预览"
          type="text"
          onClick={e => {
          e && e.stopPropagation();
          onPreview(item);
          }}
          style={{ padding: '4px 8px' }}
          >
          <PictureOutlined />
          </Button>
          )}
          <Button
          title="下载"
          type="text"
          onClick={e => {
          e && e.stopPropagation();
          onDownLoad(item);
          }}
          style={{ padding: '4px 8px' }}
          >
          <DownloadOutlined />
          </Button>
          {props.type === 'edit' && (
          <Button
          title="删除文件"
          type="text"
          onClick={e => {
          e && e.stopPropagation();
          props.onDel(item);
          }}
          style={{ padding: '4px 8px' }}
          >
          <DeleteOutlined />
          </Button>
          )}
          </span>
          </span>
          </div>
          </div>
          </div>
          const [fileList, setFileList] = useState([]);
          const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
          const onPreview = (item) => {
          props.onPreview(item);
          };
          const onDownLoad = (item) => {
          const a = document.createElement('a');
          a.setAttribute('download', item.name);
          a.setAttribute('href', item.path);
          document.documentElement.appendChild(a);
          a.target = '_black';
          a.click();
          };
          useEffect(() => {
          setFileList(props.list || []);
          }, [props.list]);
          return (
          <>
          {fileList.map((item, index) => {
          return (
          <div
          key={index}
          className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}
          >
          <div className={'panda-civ-work-upload-list-picture-container'}>
          <div className={'panda-civ-work-upload-list-item'}>
          <div className={'panda-civ-work-upload-list-item-info'}>
          <span className={'panda-civ-work-upload-span'}>
          <div
          className={
          'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file'
          }
          >
          {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
          <img src={iconFile} />
          </div>
          );
          })}
          </>
          );
          <span
          className={'panda-civ-work-upload-list-item-name'}
          title={item.name}
          style={{ cursor: 'pointer' }}
          >
          {item.name}
          </span>
          <span className={'panda-civ-work-upload-list-item-card-actions picture'}>
          {imgType.includes(item.type) && (
          <Button
          title="预览"
          type="text"
          onClick={(e) => {
          e && e.stopPropagation();
          onPreview(item);
          }}
          style={{ padding: '4px 8px' }}
          >
          <PictureOutlined />
          </Button>
          )}
          <Button
          title="下载"
          type="text"
          onClick={(e) => {
          e && e.stopPropagation();
          onDownLoad(item);
          }}
          style={{ padding: '4px 8px' }}
          >
          <DownloadOutlined />
          </Button>
          {props.type === 'edit' && (
          <Button
          title="删除文件"
          type="text"
          onClick={(e) => {
          e && e.stopPropagation();
          props.onDel(item);
          }}
          style={{ padding: '4px 8px' }}
          >
          <DeleteOutlined />
          </Button>
          )}
          </span>
          </span>
          </div>
          </div>
          </div>
          </div>
          );
          })}
          </>
          );
          }
          export default fileListItem;
          packages/base-components/RichText/src/index.less
          View file @ 5d128a0a
          @import '~antd/es/style/themes/default.less';
          // @import '~antd/es/image/style/index.less';
          .RichText {
          width: 100%;
          height: auto;
          min-height: 200px;
          position: relative;
          display: flex;
          flex-direction: column;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          .loadingWrap {
          width: 100%;
          height: 100%;
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.8);
          }
          .selectBox {
          position: absolute;
          top: 0;
          left: 0;
          background: #fff;
          max-height: 250px;
          overflow-y: scroll;
          display: none;
          }
          .selectList{
          border: 1px solid #efefef;
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16), 0 0;
          }
          .selectList .selectItem:hover {
          background: #1685FF;
          color: #fff;
          cursor: pointer;
          }
          .selectList .selectActiveItem {
          background: #1685FF;
          color: #fff;
          }
          .selectItem {
          padding: 5px 10px;
          }
          ol li {
          list-style: decimal !important;
          }
          ul li {
          list-style: disc !important;
          }
          }
          .RichTextFileList {
          padding: 20px;
          :global {
          .@{ant-prefix}-upload-list-item {
          height: 44px;
          padding: 8px 16px;
          .@{ant-prefix}-upload-list-item-thumbnail,
          .@{ant-prefix}-upload-list-item-file {
          width: 20px;
          height: 22px;
          >img {
          width: 100%;
          height: 100%;
          }
          }
          .@{ant-prefix}-upload-list-item-name {
          line-height: normal;
          }
          }
          }
          }
          .RichTextContainer {
          background-color: #fff;
          color: #000000d9;
          position: relative;
          overflow-y: scroll;
          flex: 1;
          pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          }
          }
          .RichTextToolbar {
          border-bottom: 1px solid #d9d9d9;
          // height: 0;
          // overflow: hidden;
          }
          .RichTextShow img {
          cursor: pointer;
          }
          .RichTextShow span[data-type='person'] {
          font-weight: bold;
          color: #44acb6 !important;
          }
          :global {
          #RichTextContainer span[data-type='person'] {
          font-weight: bold;
          color: #44acb6 !important;
          }
          .w-e-menu[data-title="图片"] {
          display: none;
          }
          .RichText-image {
          position: relative;
          display: inline-block;
          }
          #RichTextContainer .RichText-image-img {
          max-width: calc(100% - 20px);
          display: inline-block;
          width: auto;
          height: auto;
          }
          .RichText-image-mask {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
          cursor: pointer;
          opacity: 0;
          transition: opacity 0.3s;
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          }
          .RichText-image-mask-info {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
          color: #fff;
          font-size: 20px;
          }
          .RichText-image-mask-info .anticon {
          margin-inline-end: 4px;
          }
          .anticon svg {
          display: inline-block;
          }
          .RichText-image-mask:hover {
          opacity: 1;
          }
          .r-t-add-file {
          color: #999;
          font-family: 'w-e-icon' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          padding: 0;
          margin: 0;
          box-sizing: border-box;
          }
          .r-t-add-file:before {
          content: "\e9cb";
          }
          .@{ant-prefix}-image-error {
          display: block;
          }
          }
          \ No newline at end of file
          @import '~antd/es/style/themes/default.less';
          // @import '~antd/es/image/style/index.less';
          .RichText {
          position: relative;
          display: flex;
          flex-direction: column;
          width: 100%;
          height: auto;
          min-height: 200px;
          border: 1px solid #d9d9d9;
          border-radius: 2px;
          .loadingWrap {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.8);
          }
          .selectBox {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          max-height: 250px;
          overflow-y: scroll;
          background: #fff;
          }
          .selectList {
          border: 1px solid #efefef;
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16), 0 0;
          }
          .selectList .selectItem:hover {
          color: #fff;
          background: #1685ff;
          cursor: pointer;
          }
          .selectList .selectActiveItem {
          color: #fff;
          background: #1685ff;
          }
          .selectItem {
          padding: 5px 10px;
          }
          ol li {
          list-style: decimal !important;
          }
          ul li {
          list-style: disc !important;
          }
          }
          .RichTextFileList {
          padding: 20px;
          :global {
          .@{ant-prefix}-upload-list-item {
          height: 44px;
          padding: 8px 16px;
          .@{ant-prefix}-upload-list-item-thumbnail,
          .@{ant-prefix}-upload-list-item-file {
          width: 20px;
          height: 22px;
          > img {
          width: 100%;
          height: 100%;
          }
          }
          .@{ant-prefix}-upload-list-item-name {
          line-height: normal;
          }
          }
          }
          }
          .RichTextContainer {
          position: relative;
          flex: 1;
          overflow-y: scroll;
          color: #000000d9;
          background-color: #fff;
          pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          }
          }
          .RichTextToolbar {
          border-bottom: 1px solid #d9d9d9;
          // height: 0;
          // overflow: hidden;
          }
          .RichTextShow img {
          cursor: pointer;
          }
          .RichTextShow span[data-type='person'] {
          color: #44acb6 !important;
          font-weight: bold;
          }
          :global {
          #RichTextContainer span[data-type='person'] {
          color: #44acb6 !important;
          font-weight: bold;
          }
          .w-e-menu[data-title='图片'] {
          display: none;
          }
          .RichText-image {
          position: relative;
          display: inline-block;
          }
          #RichTextContainer .RichText-image-img {
          display: inline-block;
          width: auto;
          max-width: calc(100% - 20px);
          height: auto;
          }
          .RichText-image-mask {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
          cursor: pointer;
          opacity: 0;
          transition: opacity 0.3s;
          }
          .RichText-image-mask-info {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          overflow: hidden;
          color: #fff;
          font-size: 20px;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
          }
          .RichText-image-mask-info .anticon {
          margin-inline-end: 4px;
          }
          .anticon svg {
          display: inline-block;
          }
          .RichText-image-mask:hover {
          opacity: 1;
          }
          .r-t-add-file {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: #999;
          font-weight: normal;
          font-family: 'w-e-icon' !important;
          font-style: normal;
          font-variant: normal;
          line-height: 1;
          text-transform: none;
          speak: none;
          -webkit-font-smoothing: antialiased;
          }
          .r-t-add-file:before {
          content: '\e9cb';
          }
          .@{ant-prefix}-image-error {
          display: block;
          }
          }
          packages/base-components/RichText/src/wangEditor.js
          View file @ 5d128a0a
          This source diff could not be displayed because it is too large. You can view the blob instead.
          scripts/verifyCommit.js
          View file @ 5d128a0a
          This diff is collapsed.
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment