!612 优化排钻配置排钻类型的选择

src/UI/Components/Board/DrillCommon.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Classes, Popover, Position, Radio, RadioGroup, Intent } from '@blueprintjs/core';
+import { Button, Card, Classes, Popover, Position, Radio, RadioGroup, Intent, HTMLSelect } from '@blueprintjs/core';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -43,21 +43,43 @@ export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { type
         observable(store.rules).replace(store.drillConfig.get(store.type));
         store.ChangeRules(0);
     };
+    private renderRadiosType = () =>
+    {
+        const store = this.props.store;
+        return (
+            <RadioGroup
+                inline={true}
+                selectedValue={store.type}
+                onChange={this.handleOnChange}
+            >
+                {
+                    [...store.drillConfig.keys()].map(type => <Radio label={type} value={type} />)
+                }
+            </RadioGroup>
+        );
+    };
+    private renderSelectType = () =>
+    {
+        const store = this.props.store;
+        const options = [...store.drillConfig.keys()];
+
+        return (
+            <HTMLSelect
+                value={store.type}
+                options={options}
+                onChange={this.handleOnChange}
+            />
+        );
+    };
     render()
     {
         const store = this.props.store;
 
         return (
             <div className="flex drill-type">
-                <RadioGroup
-                    inline={true}
-                    selectedValue={store.type}
-                    onChange={this.handleOnChange}
-                >
-                    {
-                        [...store.drillConfig.keys()].map(type => <Radio label={type} value={type} />)
-                    }
-                </RadioGroup>
+                {
+                    store.drillConfig.size > 7 ? this.renderSelectType() : this.renderRadiosType()
+                }
                 <div>
                     <Popover
                         position={Position.LEFT}
@@ -92,4 +114,3 @@ export class DrillTypeCom extends React.Component<{ store: DrillStore; }, { type
         );
     }
 }
-

src/UI/Components/Modal/ModalStyle/DrillModal.less

@@ -1,75 +1,101 @@
-#drillModal{
+#drillModal {
     min-width: 500px;
 }
-#drillModal .small-name{
+
+#drillModal .small-name {
     width: 4.55rem;
     margin: 0;
     padding: 0;
     padding-left: 5px;
 }
-#drillModal .bp3-dialog-body>div:first-child{
+
+#drillModal .bp3-dialog-body>div:first-child {
     padding-top: 10px;
     padding-bottom: 0;
 }
 
-#drillModal{
-    .flexWrap{
+#drillModal {
+    .flexWrap {
         width: 300px;
     }
-    .pos-par{
-        .br-set>span:first-child{
+
+    .pos-par {
+        .br-set>span:first-child {
             width: 9rem;
         }
-        input{
+
+        input {
             width: 8rem;
         }
     }
-    .hole{
+
+    .hole {
         flex-direction: column;
     }
 }
-#drillModal .flexWrap>div{
+
+#drillModal .flexWrap>div {
     white-space: nowrap;
 }
-#drillModal  .br-set>span:first-child,#drillModal .bp3-dialog-body .bp3-label>span:first-child{
+
+#drillModal .br-set>span:first-child,
+#drillModal .bp3-dialog-body .bp3-label>span:first-child {
     display: inline-block;
     width: 5.5rem;
     white-space: nowrap;
 }
 
-#drillModal .flexWrap>div:not([class~="br-set"]){
+#drillModal .flexWrap>div:not([class~="br-set"]) {
     flex: 0 1 100%;
-    input{
+
+    input {
         width: 50%;
     }
-    span{
+
+    span {
         margin-right: 5px;
     }
 }
 
-#drillModal .rules{
+#drillModal .rules {
     height: 80%;
 }
-@darkActiveColor:#1a83ad;
 
-#drillModal .rules>li.active{
+@darkActiveColor: #1a83ad;
+
+#drillModal .rules>li.active {
     background-color: @darkActiveColor;
 }
 
-#drillModal div>.flexWrap>div>.dist-input{
+#drillModal div>.flexWrap>div>.dist-input {
     width: 100px;
 }
 
-#drillModal  .drill-type{
+#drillModal .drill-type {
     justify-content: space-between;
     align-items: center;
     padding-bottom: 3px;
-    button{
+
+    button {
         margin-bottom: 10px;
     }
-    &>div:first-child{
-         width: 680px;
+
+    &>div:first-child {
+        width: 680px;
         overflow-x: auto;
         white-space: nowrap;
     }
+
+    &>div.bp3-html-select {
+        width: 300px;
+        padding-bottom: 10px;
+
+        select {
+            height: 30px;
+        }
+
+        .bp3-icon {
+            top: 7px;
+        }
+    }
 }

src/UI/Components/Template/Template.less

@@ -51,9 +51,9 @@
 
                 &>p {
                     width: 100px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
+                    // overflow: hidden;
+                    // white-space: nowrap;
+                    // text-overflow: ellipsis;
                     margin: 0;
                     line-height: 1;
                 }