diff --git a/src/UI/Components/SourceManage/CommonPanel.tsx b/src/UI/Components/SourceManage/CommonPanel.tsx index 31b5c4e83..234469686 100644 --- a/src/UI/Components/SourceManage/CommonPanel.tsx +++ b/src/UI/Components/SourceManage/CommonPanel.tsx @@ -100,6 +100,7 @@ export interface ICommonPanelProps resourceStore?: ResourceStore; //户型模板需要资源库数据 resourceListMap?: Map; //资源库文件夹对应的ID handleDirComponent?: React.ReactElement; + perPageCount: number; } export class CommonPanelEventBus @@ -180,8 +181,8 @@ export class CommonPanel extends React.Component, prevState: Readonly, snapshot?: any): void + { + if (prevProps.perPageCount && prevProps.perPageCount !== this.pageData.pageCount) + { + this.pageData.pageCount = prevProps.perPageCount; + } + } + private renderNavbar = () => { return ( diff --git a/src/UI/Components/Template/Template.less b/src/UI/Components/Template/Template.less index 32155ede1..c3b7d817b 100644 --- a/src/UI/Components/Template/Template.less +++ b/src/UI/Components/Template/Template.less @@ -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; + } } } -} \ No newline at end of file +} diff --git a/src/UI/Components/Template/TemplateComponent.tsx b/src/UI/Components/Template/TemplateComponent.tsx index cbfd103d3..1cad6911d 100644 --- a/src/UI/Components/Template/TemplateComponent.tsx +++ b/src/UI/Components/Template/TemplateComponent.tsx @@ -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 { 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 { currentTag={this.props.currentTag} currentInfo={this.currentTemplateInfo} uiOption={this.templateManageOption.uiOption} + perPageCount={this.templateManageOption.perPageCount} handleDirComponent={ this.canCreateTemplate.get() && { this.renderBody() } -
+
{ !this.props.R2bReplace ? <> @@ -1003,24 +1007,38 @@ export class TemplateManage extends React.Component { option={this.templateManageOption.option} needBoardName /> +
- { -
: diff --git a/src/UI/Store/BoardInterface.ts b/src/UI/Store/BoardInterface.ts index 76baa666a..57c3a2020 100644 --- a/src/UI/Store/BoardInterface.ts +++ b/src/UI/Store/BoardInterface.ts @@ -518,6 +518,7 @@ export interface TemplateManageOption extends IBaseOption openDir?: BoardOpenDir | string; navigationWidth: string; showTag: boolean; + perPageCount: number; } export interface IAutoDimBrsOption extends IBaseOption diff --git a/src/UI/Store/TemplateManageStore.ts b/src/UI/Store/TemplateManageStore.ts index f250a517d..bcaf37309 100644 --- a/src/UI/Store/TemplateManageStore.ts +++ b/src/UI/Store/TemplateManageStore.ts @@ -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) });