Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!2131 开发:模板文件显示模式增加选项,可配置每页显示数量

Browse Source
pull/2109/MERGE
黄诗津 1 year ago committed by ChenX
parent ad6e54bb3a
commit b091bc6a9a
5 changed files with 463 additions and 408 deletions
Show Stats Download Patch File Download Diff File

13
src/UI/Components/SourceManage/CommonPanel.tsx
Unescape View File

@ -100,6 +100,7 @@ export interface ICommonPanelProps
resourceStore?: ResourceStore; //户型模板需要资源库数据
resourceListMap?: Map<string, string>; //资源库文件夹对应的ID
handleDirComponent?: React.ReactElement;
perPageCount: number;
}
export class CommonPanelEventBus
@ -180,8 +181,8 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
this.currentDir.id = this.props.defaultDirId as DirectoryId;
if (this.props.defaultDirId === DirectoryId.FileDir)
this.pageData.pageCount = 15;
else if (this.props.defaultDirId === DirectoryId.TemplateDir)
this.pageData.pageCount = 12; //模板每页12条
if (this.props.perPageCount)
this.pageData.pageCount = this.props.perPageCount; //模板每页自定义
switch (this.props.defaultDirId)
{
@ -301,6 +302,14 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
}
userConfigStore.SaveConfig(BoardModalType.CommonPanelStore, commonPanelStore, { toaster: false }); //保存配置
}
componentDidUpdate(prevProps: Readonly<ICommonPanelProps>, prevState: Readonly<ICommonPanelState>, snapshot?: any): void
{
if (prevProps.perPageCount && prevProps.perPageCount !== this.pageData.pageCount)
{
this.pageData.pageCount = prevProps.perPageCount;
}
}
private renderNavbar = () =>
{
return (

765
src/UI/Components/Template/Template.less
Unescape View File

@ -22,528 +22,543 @@
.bp3-dialog-footer {
height: 110px;
display: flex;
justify-content: space-between;
.lock{
display : flex;
.lock {
display: flex;
margin-bottom: 2px;
.bp3-checkbox{
.bp3-checkbox {
margin: 0;
padding: 0;
}
}
.needBoardName{
display : flex;
.needBoardName {
display: flex;
flex-direction: column;
margin-left : 50px;
padding : 11px 35px 8px 30px;
margin-left: 50px;
padding: 11px 35px 8px 30px;
background-color: #EBF1F5;
.bp3-checkbox{
.bp3-checkbox {
margin-bottom: 7px;
}
.tip{
.tip {
position: absolute;
margin : -19px -23px
margin: -19px -23px;
}
}
}
.flex-between {
justify-content: space-between;
}
.display-count {
display: flex;
align-items: center;
.bp3-dialog-body > div:first-child {
min-width: 200px;
}
input {
margin-left: 5px;
width: 50px;
}
}
.bp3-tree {
height: 100%;
}
.flex-between {
justify-content: space-between;
}
.template-right {
flex: 1;
overflow: auto;
.bp3-dialog-body>div:first-child {
min-width: 200px;
}
.template-list {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
width: 60%;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
align-content: flex-start;
text-align: center;
.bp3-tree {
height: 100%;
}
& > li {
padding: 5px 10px 0 10px;
.template-right {
flex: 1;
overflow: auto;
& > div {
width: 80%;
margin: 0 auto;
}
.template-list {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
width: 60%;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
align-content: flex-start;
text-align: center;
& > p {
width: 100px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
margin: 0;
line-height: 1;
&>li {
padding: 5px 10px 0 10px;
&>div {
width: 80%;
margin: 0 auto;
}
&>p {
width: 100px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
margin: 0;
line-height: 1;
}
}
}
}
.template-detail {
width: 320px;
overflow: auto;
.template-detail {
width: 320px;
overflow: auto;
& > div {
input {
height: 30px;
&>div {
input {
height: 30px;
}
align-items: flex-start;
}
align-items: flex-start;
&>ul {
width: 300px;
list-style: none;
padding: 0;
text-align: center;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
max-height: 40%;
overflow: auto;
&>li {
display: flex;
justify-content: space-between;
height: 25px;
align-items: center;
white-space: nowrap;
&>span {
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
& > ul {
width: 300px;
list-style: none;
padding: 0;
text-align: center;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
max-height: 40%;
overflow: auto;
.kugan {
margin-top: 20px;
& > li {
&>div {
&>label {
display: flex;
justify-content: space-between;
height: 25px;
align-items: center;
white-space: nowrap;
text-align: left;
flex: 1;
}
& > span {
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
&>label:first-child {
span {
width: 60px;
}
margin-right: 10px;
}
.bp3-checkbox {
margin: 0;
}
}
}
}
.kugan {
margin-top: 20px;
.delete-selete {
position: relative;
& > div {
& > label {
display: flex;
align-items: center;
text-align: left;
flex: 1;
&>.bp3-control {
display: none;
position: absolute;
top: 5px;
left: 10px;
margin: 0;
padding: 0;
height: 16px;
line-height: 16px;
.bp3-control-indicator {
margin: 0;
vertical-align: baseline;
}
}
& > label:first-child {
span {
width: 60px;
&>.selected {
display: block;
}
&>.bp3-popover-wrapper:not(:first-child) {
position: absolute;
top: 0px;
right: 0px;
.bp3-button {
display: none;
}
svg {
color: #ff7373;
}
}
margin-right: 10px;
&:hover>.bp3-control {
display: block;
}
.bp3-checkbox {
margin: 0;
&:hover>.bp3-popover-wrapper .bp3-button {
display: flex;
}
}
}
.delete-selete {
position: relative;
.tag-list {
border-right: 1px solid #ccc;
display: flex;
width: 75%;
flex-wrap: wrap;
align-content: start;
& > .bp3-control {
display: none;
position: absolute;
top: 5px;
left: 10px;
margin: 0;
padding: 0;
height: 16px;
line-height: 16px;
.pagination {
margin-top: 20px;
}
.bp3-control-indicator {
margin: 0;
vertical-align: baseline;
&>.tag-img {
width: 17%;
outline: 1px solid #ccc;
height: 0;
text-align: center;
padding-bottom: calc(20%);
position: relative;
}
}
& > .selected {
display: block;
&>.tag-img:hover:after,
&>.tag-img.active:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(30, 152, 209);
opacity: 0.5;
}
}
}
& > .bp3-popover-wrapper:not(:first-child) {
position: absolute;
top: 0px;
right: 0px;
#commonModal .template-detail {
&>.add-tag {
display: flex;
align-items: center;
padding-top: 10px;
.bp3-button {
display: none;
input {
width: 100px;
}
svg {
color: #ff7373;
button {
height: 20px;
min-height: 20px;
line-height: 20px;
padding: 0 5px;
}
}
&:hover > .bp3-control {
display: block;
}
&>div {
input {
height: 30px;
}
&:hover > .bp3-popover-wrapper .bp3-button {
display: flex;
align-items: flex-start;
}
}
.tag-list {
border-right: 1px solid #ccc;
display: flex;
width: 75%;
flex-wrap: wrap;
align-content: start;
.pagination {
margin-top: 20px;
&>div:last-child {
text-align: right;
}
& > .tag-img {
width: 17%;
outline: 1px solid #ccc;
height: 0;
&>ul {
list-style: none;
padding: 0;
text-align: center;
padding-bottom: calc(20%);
position: relative;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
max-height: 40%;
overflow: auto;
&>li {
display: flex;
justify-content: space-between;
height: 25px;
align-items: center;
&>span {
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
}
}
&>li:not(:first-child) {
box-shadow: 0 1px 0 0 rgba(16, 22, 26, 0.15);
span {
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
}
input {
height: 25px;
}
}
}
}
& > .tag-img:hover:after,
& > .tag-img.active:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(30, 152, 209);
opacity: 0.5;
#commonModal .tag-temp-detail {
flex: 1;
&>ul {
max-height: 100%;
}
}
}
#commonModal .template-detail {
& > .add-tag {
display: flex;
align-items: center;
padding-top: 10px;
#commonModal .template-design {
.bp3-dialog-body {
overflow: hidden;
}
input {
width: 100px;
.bp3-dialog-body .bp3-label {
margin: 0;
}
button {
height: 20px;
min-height: 20px;
line-height: 20px;
padding: 0 5px;
.bp3-dialog-body .bp3-label>span {
width: auto;
}
}
& > div {
input {
height: 30px;
.bp3-dialog-body>div {
height: 100%;
&>div:first-child {
width: 60%;
}
&>div:last-child {
width: 40%;
}
}
align-items: flex-start;
}
.buttons {
&>button {
margin-right: 3px;
margin-bottom: 3px;
border-radius: 5px;
}
& > div:last-child {
text-align: right;
&>span {
margin-right: 3px;
& button {
margin-bottom: 3px;
border-radius: 5px;
}
}
}
}
& > ul {
@boxShadow: rgba(19, 124, 189, 0) 0px 0px 0px 0px, rgba(19, 124, 189, 0) 0px 0px 0px 0px, rgba(16, 22, 26, 0.15) 0px 0px 0px 1px inset, rgba(16, 22, 26, 0.2) 0px 1px 1px inset;
.params-list {
list-style: none;
padding: 0;
text-align: center;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
max-height: 40%;
flex: 1;
overflow: auto;
& > li {
&>li {
display: flex;
justify-content: space-between;
height: 25px;
align-items: center;
& > span {
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
&>span {
line-height: 25px;
box-shadow: @boxShadow;
}
}
& > li:not(:first-child) {
box-shadow: 0 1px 0 0 rgba(16, 22, 26, 0.15);
span {
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
&>label {
box-shadow: @boxShadow;
}
input {
height: 25px;
&>span,
&>input,
label {
width: 20% !important;
height: 100% !important;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
#commonModal .tag-temp-detail {
flex: 1;
& > ul {
max-height: 100%;
}
}
#commonModal .template-design {
.bp3-dialog-body {
overflow: hidden;
}
.bp3-dialog-body .bp3-label {
margin: 0;
}
.action-list {
overflow: auto;
flex: 1;
.bp3-dialog-body .bp3-label > span {
width: auto;
.bp3-tree-node-content {
height: 20px;
}
}
.bp3-dialog-body > div {
height: 100%;
#modal .action-dialog {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 280px;
z-index: 35;
display: flex;
flex-direction: column;
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0);
& > div:first-child {
width: 60%;
h4 {
font-size: 14px;
}
& > div:last-child {
width: 40%;
.bp3-dialog-header {
min-height: auto;
height: 30px;
}
}
.buttons {
& > button {
margin-right: 3px;
margin-bottom: 3px;
border-radius: 5px;
}
.bp3-dialog-body {
padding: 3px;
& > span {
margin-right: 3px;
&>.bp3-label {
display: flex;
width: 100%;
justify-content: space-between;
font-size: 14px;
padding: 5px 10px 5px 10px;
&>input,
&>.bp3-html-select {
width: 65%;
height: 25px;
margin: auto;
& button {
margin-bottom: 3px;
border-radius: 5px;
}
}
}
}
select {
height: 25px;
}
@boxShadow: rgba(19, 124, 189, 0) 0px 0px 0px 0px, rgba(19, 124, 189, 0) 0px 0px 0px 0px, rgba(16, 22, 26, 0.15) 0px 0px 0px 1px inset, rgba(16, 22, 26, 0.2) 0px 1px 1px inset;
>span {
margin-top: 3px;
}
}
.params-list {
list-style: none;
padding: 0;
text-align: center;
box-shadow: 1px 0 0 0 rgba(16, 22, 26, 0.15);
flex: 1;
overflow: auto;
.spanText {
width: 82px;
margin: auto;
}
}
& > li {
display: flex;
justify-content: space-between;
height: 25px;
align-items: center;
.bp3-control.bp3-inline {
margin: 0px 10px 0 0;
}
& > span {
line-height: 25px;
box-shadow: @boxShadow;
.bp3-control.bp3-checkbox {
margin: 7px 0 0 5px;
font-size: 13px;
}
}
& > label {
box-shadow: @boxShadow;
}
.bp3-dialog-footer {
padding: 5px;
justify-content: flex-end;
& > span,
& > input,
label {
width: 20% !important;
height: 100% !important;
overflow: hidden;
text-overflow: ellipsis;
button {
margin: 5px;
}
}
}
}
.action-list {
overflow: auto;
flex: 1;
#commonModal .template-select,
#template-select .template-select,
#modal .template-select {
position: absolute;
z-index: 30;
.bp3-tree-node-content {
height: 20px;
}
}
#modal .action-dialog {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 280px;
z-index: 35;
display: flex;
flex-direction: column;
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.15), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0);
h4 {
font-size: 14px;
}
.bp3-dialog-header {
min-height: auto;
height: 30px;
}
.bp3-dialog-body {
padding: 3px;
.show-temp {
&>h5 {
text-align: left;
}
& > .bp3-label {
display: flex;
width: 100%;
justify-content: space-between;
font-size: 14px;
padding: 5px 10px 5px 10px;
& > input,
& > .bp3-html-select {
width: 65%;
height: 25px;
margin: auto;
&>div>div {
width: 50%;
outline: 1px solid #ccc;
text-align: center;
select {
height: 25px;
}
> span {
margin-top: 3px;
&>img {
width: 100px;
height: 100px;
}
}
.spanText {
width: 82px;
margin: auto;
&>p {
text-align: center;
}
}
}
.bp3-control.bp3-inline {
margin: 0px 10px 0 0;
}
.bp3-control.bp3-checkbox {
margin: 7px 0 0 5px;
font-size: 13px;
}
}
.bp3-dialog-footer {
padding: 5px;
justify-content: flex-end;
button {
margin: 5px;
}
}
}
#commonModal .template-select,
#template-select .template-select,
#modal .template-select {
position: absolute;
z-index: 30;
.show-temp {
& > h5 {
text-align: left;
}
.tag-names {
padding: 0;
& > div > div {
width: 50%;
outline: 1px solid #ccc;
ul {
width: 100px;
text-align: center;
padding: 5px;
max-height: 200px;
overflow: auto;
& > img {
width: 100px;
height: 100px;
li {
border-bottom: 1px solid #ccc;
padding: 2px 0;
}
& > p {
text-align: center;
li:hover {
background-color: #ccc;
}
}
}
}
.tag-names {
padding: 0;
ul {
width: 100px;
text-align: center;
padding: 5px;
max-height: 200px;
.saveDir {
overflow: auto;
li {
border-bottom: 1px solid #ccc;
padding: 2px 0;
}
li:hover {
background-color: #ccc;
}
min-width: 200px;
max-height: 70vh;
}
}
.saveDir {
overflow: auto;
min-width: 200px;
max-height: 70vh;
}
#template-select {
position: absolute;
}
#template-select {
position: absolute;
}
#ScaleImages {
.bp3-dialog-body {
width: 850px;
height: 850px;
display: flex;
background-color: #fff;
#ScaleImages{
.bp3-dialog-body {
width : 850px;
height : 850px;
display : flex;
background-color: #fff;
img{
height : unset;
margin : auto;
-webkit-user-drag : none;
}
img {
height: unset;
margin: auto;
-webkit-user-drag: none;
}
.scale{
right : 0;
position : absolute;
.scale {
right: 0;
position: absolute;
}
}
}
}
}

72
src/UI/Components/Template/TemplateComponent.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, Classes, Intent } from '@blueprintjs/core';
import { Button, Classes, Intent, Label } from '@blueprintjs/core';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@ -12,6 +12,7 @@ import { TemplateUrls } from '../../../Common/HostUrl';
import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
import { DuplicateRecordCloning } from '../../../Common/Status';
import { StoreageKeys } from '../../../Common/StoreageKeys';
import { safeEval } from '../../../Common/eval';
import { CADObject } from '../../../DatabaseServices/CADObject';
import { Board } from '../../../DatabaseServices/Entity/Board';
import { Entity } from '../../../DatabaseServices/Entity/Entity';
@ -74,6 +75,7 @@ export interface ITemplateManageOption extends IBaseOption
option: IGetRoomInfo;
autoCutOption: IDrawBoardAutoCutOption;
uiOption: TemplateManageUiOption;
perPageCount: number;
}
@observer
@ -96,10 +98,11 @@ export class TemplateManage extends React.Component<ITemplateManage, {}> {
private autoCutOption: IDrawBoardAutoCutOption = { isAutoCut: false, isRelevance: false };
private uiOption = { navigationWidth: "25%", showTag: true };
@observable templateManageOption: ITemplateManageOption = {
version: 1,
version: 2,
option: this.option,
autoCutOption: this.autoCutOption,
uiOption: this.uiOption
uiOption: this.uiOption,
perPageCount: 12,
};
private canCreateTemplate = observable.box(false);
@ -910,6 +913,7 @@ export class TemplateManage extends React.Component<ITemplateManage, {}> {
currentTag={this.props.currentTag}
currentInfo={this.currentTemplateInfo}
uiOption={this.templateManageOption.uiOption}
perPageCount={this.templateManageOption.perPageCount}
handleDirComponent={
this.canCreateTemplate.get() && <HandleDirComponent
defualtValue={this.currentTemplateInfo.name}
@ -995,7 +999,7 @@ export class TemplateManage extends React.Component<ITemplateManage, {}> {
this.renderBody()
}
</div>
<div className={Classes.DIALOG_FOOTER + ` ${!this.props.R2bReplace && "flex-between"}`} >
<div className={Classes.DIALOG_FOOTER} >
{
!this.props.R2bReplace ?
<>
@ -1003,24 +1007,38 @@ export class TemplateManage extends React.Component<ITemplateManage, {}> {
option={this.templateManageOption.option}
needBoardName
/>
<Label className='display-count'>
<span>每页显示数量</span>
<input
tabIndex={1}
type="text"
className='bp3-input'
value={this.templateManageOption.perPageCount}
onClick={(e) => { (e.currentTarget).setSelectionRange(0, e.currentTarget.value.length); }}
onChange={(e) =>
{
let currentCount = safeEval(e.currentTarget.value);
if (isNaN(currentCount) || currentCount > 100 || currentCount < 1) return;
this.templateManageOption.perPageCount = currentCount;
this.commonPanel.current.pageData.pageCount = currentCount;
this.commonPanel.current.handleGetData();
}}
/>
</Label>
<AutoCutCheckbox isFlex={false} autoCutOption={this.templateManageOption.autoCutOption} />
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
{
<Button
className={Classes.INTENT_SUCCESS}
text={<span>动态插入<i>(I)</i></span>}
disabled={!this.currentTemplateInfo.id}
onClick={() => this.handleInsert(true)}
/>
}
{
<Button
className={Classes.INTENT_DANGER}
text={<span>空间拾取<i>(S)</i></span>}
onClick={() => this.handleInsert(false)}
disabled={!this.currentTemplateInfo.id}
/>
}
<Button
className={Classes.INTENT_SUCCESS}
text={<span>动态插入<i>(I)</i></span>}
disabled={!this.currentTemplateInfo.id}
onClick={() => this.handleInsert(true)}
/>
<Button
className={Classes.INTENT_DANGER}
text={<span>空间拾取<i>(S)</i></span>}
onClick={() => this.handleInsert(false)}
disabled={!this.currentTemplateInfo.id}
/>
{
this.currentTemplateInfo.id && (this.currentTemplateInfo.isHandle || this.currentTemplateInfo.isHinge) &&
<Button
@ -1030,14 +1048,12 @@ export class TemplateManage extends React.Component<ITemplateManage, {}> {
disabled={!this.currentTemplateInfo.id}
/>
}
{
<Button
className={Classes.INTENT_PRIMARY}
text={<span>模块替换<i>(T)</i></span>}
onClick={this.handleReplace}
disabled={!this.currentTemplateInfo.id || this.currentTemplateInfo.isKuGan}
/>
}
<Button
className={Classes.INTENT_PRIMARY}
text={<span>模块替换<i>(T)</i></span>}
onClick={this.handleReplace}
disabled={!this.currentTemplateInfo.id || this.currentTemplateInfo.isKuGan}
/>
</div>
</>
:

1
src/UI/Store/BoardInterface.ts
Unescape View File

@ -518,6 +518,7 @@ export interface TemplateManageOption extends IBaseOption
openDir?: BoardOpenDir | string;
navigationWidth: string;
showTag: boolean;
perPageCount: number;
}
export interface IAutoDimBrsOption extends IBaseOption

20
src/UI/Store/TemplateManageStore.ts
Unescape View File

@ -21,18 +21,32 @@ export class TempalteManageStore extends Singleton
m_Option.autoCutOption = { isAutoCut: cof.isAutoCut, isRelevance: cof.isRelevance };
m_Option.option.roomName = cof.roomName;
m_Option.option.useCabName = cof.useCabName;
if (cof.version === 1)
if (!cof.version)
{
cof.version = 1;
m_Option.uiOption = { navigationWidth: "25%", showTag: true };
}
else
{
m_Option.uiOption = { navigationWidth: cof.navigationWidth, showTag: cof.showTag };
}
if (cof.version < 2)
{
cof.version = 2;
m_Option.perPageCount = 12;
}
else
{
m_Option.perPageCount = cof.perPageCount;
}
}
}
async SaveConfig(m_Option: ITemplateManageOption)
{
//由于之前保存的数据就是展开的,所以这里也只能跟着展开保存
let opt = { version: m_Option.version, ...m_Option.option, ...m_Option.autoCutOption, ...m_Option.uiOption } as TemplateManageOption;
let opt = { version: m_Option.version, ...m_Option.option, ...m_Option.autoCutOption, ...m_Option.uiOption, perPageCount: m_Option.perPageCount } as TemplateManageOption;
let newConfig: TemplateManageOption = toJS(opt);
let data = await PostJson(ConfigUrls.Edit, { key: BoardModalType.TemplateManage, value: JSON.stringify(newConfig) });

Write Preview
Loading…
Cancel
Save