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'; ...@@ -12,82 +12,85 @@ import RichTextShow from '../RichTextShow';
          import styles from './demo.less'; import styles from './demo.less';
          class RichTextDemo extends React.Component { class RichTextDemo extends React.Component {
          constructor(props) { constructor(props) {
          super(props); super(props);
          this.myRichText = React.createRef(); this.myRichText = React.createRef();
          this.state = { this.state = {
          personList: [ personList: [
          { userId: 568, userName: '徐乐' }, { userId: 568, userName: '徐乐' },
          { userId: 569, userName: '余苏苏' }, { userId: 569, userName: '余苏苏' },
          { userId: 572, userName: '周宏民' }, { userId: 572, userName: '周宏民' },
          ], ],
          content: '', content: '',
          fileList: [], 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('');
          }; };
          }
          componentDidMount = () => { getData = async () => {
          this.getData(); // 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() { componentWillUnmount() {
          this.setState = () => { }; this.setState = () => {};
          } }
          render() { render() {
          return ( return (
          <div className={styles.RichTextDemo}> <div className={styles.RichTextDemo}>
          <div className={styles.RichTextDemoContainer}> <div className={styles.RichTextDemoContainer}>
          <RichText <RichText
          // content={this.state.content} // content={this.state.content}
          personList={this.state.personList} personList={this.state.personList}
          onChange={val => { onChange={(val) => {
          this.setState({ content: val }); this.setState({ content: val });
          }} }}
          onChangeFile={arr => { onChangeFile={(arr) => {
          this.setState({ fileList: arr }); this.setState({ fileList: arr });
          }} }}
          fileList={this.state.fileList} fileList={this.state.fileList}
          projectId={19} projectId={19}
          ref={this.myRichText} ref={this.myRichText}
          /> />
          </div> </div>
          {/* <div className={styles.contentBox}>{this.state.content}</div> */} {/* <div className={styles.contentBox}>{this.state.content}</div> */}
          <div className={styles.contentBox}> <div className={styles.contentBox}>
          <RichTextShow content={this.state.content} onClickImg={src => { }} fileList={this.state.fileList} /> <RichTextShow
          </div> content={this.state.content}
          <div className={styles.contentBox}>{this.state.content}</div> onClickImg={(src) => {}}
          </div> fileList={this.state.fileList}
          ); />
          } </div>
          <div className={styles.contentBox}>{this.state.content}</div>
          </div>
          );
          }
          } }
          export default RichTextDemo; export default RichTextDemo;
          packages/base-components/RichText/src/demos/demo.less
          View file @ 5d128a0a
          .RichTextDemoContainer { .RichTextDemoContainer {
          // height: 400px; // height: 400px;
          // padding: 0px 100px; // padding: 0px 100px;
          background-color: #fff; background-color: #fff;
          } }
          .contentBox { .contentBox {
          // height: 400px; // height: 400px;
          margin-top: 10px; margin-top: 10px;
          padding: 20px; padding: 20px;
          background-color: #fff; background-color: #fff;
          } }
          .RichTextDemo { .RichTextDemo {
          height: 100%; height: 100%;
          overflow-y: scroll; overflow-y: scroll;
          } }
          \ No newline at end of file
          packages/base-components/RichText/src/fileListItem.js
          View file @ 5d128a0a
          ...@@ -4,97 +4,106 @@ ...@@ -4,97 +4,106 @@
          * @Date: 2022-03-21 14:44:49 * @Date: 2022-03-21 14:44:49
          */ */
          import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'; 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 { Button } from 'antd';
          import iconFile from './icon_file.png'; import iconFile from './icon_file.png';
          function fileListItem(props) { function fileListItem(props) {
          const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
          const imgType = ['image/png', 'image/jpg', 'image/jpeg']; const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
          const onPreview = item => { const onPreview = (item) => {
          props.onPreview(item); props.onPreview(item);
          }; };
          const onDownLoad = item => { const onDownLoad = (item) => {
          const a = document.createElement('a'); const a = document.createElement('a');
          a.setAttribute('download', item.name); a.setAttribute('download', item.name);
          a.setAttribute('href', item.path); a.setAttribute('href', item.path);
          document.documentElement.appendChild(a); document.documentElement.appendChild(a);
          a.target = '_black'; a.target = '_black';
          a.click(); a.click();
          }; };
          useEffect(() => { useEffect(() => {
          setFileList(props.list || []); setFileList(props.list || []);
          }, [props.list]); }, [props.list]);
          return ( return (
          <> <>
          {fileList.map((item, index) => { {fileList.map((item, index) => {
          return ( return (
          <div key={index} className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}> <div
          <div className={'panda-civ-work-upload-list-picture-container'}> key={index}
          <div className={'panda-civ-work-upload-list-item'}> className={'panda-civ-work-upload-list panda-civ-work-upload-list-picture'}
          <div className={'panda-civ-work-upload-list-item-info'}> >
          <span className={'panda-civ-work-upload-span'}> <div className={'panda-civ-work-upload-list-picture-container'}>
          <div <div className={'panda-civ-work-upload-list-item'}>
          className={ <div className={'panda-civ-work-upload-list-item-info'}>
          'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file' <span className={'panda-civ-work-upload-span'}>
          } <div
          > className={
          {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */} 'panda-civ-work-upload-list-item-thumbnail panda-civ-work-upload-list-item-file'
          <img src={iconFile} /> }
          </div> >
          <span {/* {imgType.includes(item.type) ? <FileImageTwoTone /> : <FileTwoTone />} */}
          className={'panda-civ-work-upload-list-item-name'} <img src={iconFile} />
          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> </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; export default fileListItem;
          packages/base-components/RichText/src/index.less
          View file @ 5d128a0a
          @import '~antd/es/style/themes/default.less'; @import '~antd/es/style/themes/default.less';
          // @import '~antd/es/image/style/index.less'; // @import '~antd/es/image/style/index.less';
          .RichText { .RichText {
          width: 100%; position: relative;
          height: auto; display: flex;
          min-height: 200px; flex-direction: column;
          position: relative; width: 100%;
          display: flex; height: auto;
          flex-direction: column; min-height: 200px;
          border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
          border-radius: 2px; border-radius: 2px;
          .loadingWrap { .loadingWrap {
          width: 100%; position: absolute;
          height: 100%; top: 0;
          position: absolute; left: 0;
          display: flex; display: flex;
          align-items: center; align-items: center;
          justify-content: center; justify-content: center;
          top: 0; width: 100%;
          left: 0; height: 100%;
          background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
          } }
          .selectBox { .selectBox {
          position: absolute; position: absolute;
          top: 0; top: 0;
          left: 0; left: 0;
          display: none;
          background: #fff; max-height: 250px;
          max-height: 250px; overflow-y: scroll;
          overflow-y: scroll;
          display: none; background: #fff;
          } }
          .selectList{ .selectList {
          border: 1px solid #efefef; border: 1px solid #efefef;
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16), 0 0; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16), 0 0;
          } }
          .selectList .selectItem:hover { .selectList .selectItem:hover {
          background: #1685FF; color: #fff;
          color: #fff; background: #1685ff;
          cursor: pointer; cursor: pointer;
          } }
          .selectList .selectActiveItem { .selectList .selectActiveItem {
          background: #1685FF; color: #fff;
          color: #fff; background: #1685ff;
          } }
          .selectItem { .selectItem {
          padding: 5px 10px; padding: 5px 10px;
          } }
          ol li { ol li {
          list-style: decimal !important; list-style: decimal !important;
          } }
          ul li { ul li {
          list-style: disc !important; list-style: disc !important;
          } }
          }
          }
          .RichTextFileList {
          .RichTextFileList { padding: 20px;
          padding: 20px;
          :global {
          :global { .@{ant-prefix}-upload-list-item {
          .@{ant-prefix}-upload-list-item { height: 44px;
          height: 44px; padding: 8px 16px;
          padding: 8px 16px;
          .@{ant-prefix}-upload-list-item-thumbnail,
          .@{ant-prefix}-upload-list-item-thumbnail, .@{ant-prefix}-upload-list-item-file {
          .@{ant-prefix}-upload-list-item-file { width: 20px;
          width: 20px; height: 22px;
          height: 22px;
          > img {
          >img { width: 100%;
          width: 100%; height: 100%;
          height: 100%; }
          } }
          }
          .@{ant-prefix}-upload-list-item-name {
          .@{ant-prefix}-upload-list-item-name { line-height: normal;
          line-height: normal; }
          } }
          } }
          } }
          } .RichTextContainer {
          position: relative;
          .RichTextContainer { flex: 1;
          background-color: #fff; overflow-y: scroll;
          color: #000000d9; color: #000000d9;
          position: relative; background-color: #fff;
          overflow-y: scroll;
          flex: 1; pre {
          white-space: pre-wrap;
          pre { word-wrap: break-word;
          white-space: pre-wrap; }
          word-wrap: break-word; }
          }
          } .RichTextToolbar {
          border-bottom: 1px solid #d9d9d9;
          // height: 0;
          .RichTextToolbar { // overflow: hidden;
          border-bottom: 1px solid #d9d9d9; }
          // height: 0;
          // overflow: hidden; .RichTextShow img {
          cursor: pointer;
          } }
          .RichTextShow img { .RichTextShow span[data-type='person'] {
          cursor: pointer; color: #44acb6 !important;
          } font-weight: bold;
          }
          .RichTextShow span[data-type='person'] {
          font-weight: bold; :global {
          color: #44acb6 !important; #RichTextContainer span[data-type='person'] {
          } color: #44acb6 !important;
          font-weight: bold;
          :global { }
          #RichTextContainer span[data-type='person'] {
          font-weight: bold; .w-e-menu[data-title='图片'] {
          color: #44acb6 !important; display: none;
          } }
          .w-e-menu[data-title="图片"] { .RichText-image {
          display: none; position: relative;
          } display: inline-block;
          }
          .RichText-image {
          position: relative; #RichTextContainer .RichText-image-img {
          display: inline-block; display: inline-block;
          } width: auto;
          max-width: calc(100% - 20px);
          #RichTextContainer .RichText-image-img { height: auto;
          max-width: calc(100% - 20px); }
          display: inline-block;
          width: auto; .RichText-image-mask {
          height: auto; position: absolute;
          } top: 0;
          right: 0;
          .RichText-image-mask { bottom: 0;
          position: absolute; left: 0;
          top: 0; display: flex;
          right: 0; align-items: center;
          bottom: 0; justify-content: center;
          left: 0; box-sizing: border-box;
          display: flex; margin: 0;
          align-items: center;
          justify-content: center; padding: 0;
          color: #fff; color: #fff;
          background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
          cursor: pointer; cursor: pointer;
          opacity: 0; opacity: 0;
          transition: opacity 0.3s; transition: opacity 0.3s;
          }
          padding: 0;
          margin: 0; .RichText-image-mask-info {
          box-sizing: border-box; box-sizing: border-box;
          } margin: 0;
          padding: 0;
          .RichText-image-mask-info { overflow: hidden;
          padding: 0; color: #fff;
          margin: 0; font-size: 20px;
          box-sizing: border-box; white-space: nowrap;
          overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; cursor: pointer;
          text-overflow: ellipsis; }
          cursor: pointer;
          color: #fff; .RichText-image-mask-info .anticon {
          font-size: 20px; margin-inline-end: 4px;
          } }
          .RichText-image-mask-info .anticon { .anticon svg {
          margin-inline-end: 4px; display: inline-block;
          } }
          .anticon svg { .RichText-image-mask:hover {
          display: inline-block; opacity: 1;
          } }
          .RichText-image-mask:hover { .r-t-add-file {
          opacity: 1; box-sizing: border-box;
          } margin: 0;
          padding: 0;
          .r-t-add-file { color: #999;
          color: #999; font-weight: normal;
          font-family: 'w-e-icon' !important; font-family: 'w-e-icon' !important;
          speak: none; font-style: normal;
          font-style: normal; font-variant: normal;
          font-weight: normal; line-height: 1;
          font-variant: normal; text-transform: none;
          text-transform: none; speak: none;
          line-height: 1; -webkit-font-smoothing: antialiased;
          -webkit-font-smoothing: antialiased; }
          padding: 0;
          margin: 0; .r-t-add-file:before {
          box-sizing: border-box; content: '\e9cb';
          } }
          .r-t-add-file:before { .@{ant-prefix}-image-error {
          content: "\e9cb"; display: block;
          } }
          }
          .@{ant-prefix}-image-error {
          display: block;
          }
          }
          \ No newline at end of file
          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