Kaynağa Gözat

Merge branch 'master' into develop

YaolongHan 4 yıl önce
ebeveyn
işleme
4edcf3670c

+ 9 - 4
src/components/edit/attr_select.vue

@@ -75,7 +75,7 @@
       <section class="grid">
         <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
         <span>{{`设备`}}</span>
-        <a-button type="link" class="edit-option-btn">选择编辑</a-button>
+        <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
         <div class="grid-content">
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
@@ -89,17 +89,21 @@
           <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
         </template>
         <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
-          <p v-for="item in keyboardOperation">{{item.value}}</p>
+          <p v-for="item in keyboardOperation" :key="item.value">{{item.value}}</p>
         </a-collapse-panel>
       </a-collapse>
     </div>
+    <editDialog ref="dialog"/>
   </div>
 </template>
 
 <script>
+    import editDialog from './edit-dialog'
+
     export default {
         name: "attr_select",
         props: ['type'],
+        components: {editDialog},
         data() {
             return {
                 precisionList: [
@@ -111,8 +115,6 @@
                 keyboardOperation: [
                     {value: '拖动画布:'}, {value: '加选对象:'}, {value: '确认操作:'}, {value: '取消对象:'},
                 ],
-
-
             }
         },
         methods: {
@@ -139,6 +141,9 @@
                 } else if (status === 'error') {
                     this.$message.error(`${info.file.name} file upload failed.`);
                 }
+            },
+            handleEdit() {
+                this.$refs.dialog.showModal()
             }
         }
     }

+ 196 - 4
src/components/edit/edit-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model="visible" title="选择编辑" on-ok="handleOk">
+  <a-modal v-model="visible" title="选择编辑" on-ok="handleOk" width="1200px" class="edit-dialog">
     <template slot="footer">
       <a-button key="back" @click="handleCancel">
         取消
@@ -8,7 +8,42 @@
         确认
       </a-button>
     </template>
-    <div></div>
+    <div class="dialog-content">
+      <div class="left">
+        <div class="header">
+          <a-input-search placeholder="搜索" class="search" @search="onSearch"/>
+        </div>
+        <div class="tree">
+          <a-tree
+              v-model="checkedKeys"
+              :expanded-keys="expandedKeys"
+              :auto-expand-parent="autoExpandParent"
+              :selected-keys="selectedKeys"
+              :tree-data="treeData"
+              @expand="onExpand"
+              @select="onSelect"
+          />
+        </div>
+        <div class="checkbox">
+          <a-checkbox-group @change="ChangeCheckbox">
+            <a-checkbox v-for="item in plainOptions" :value="item" :key="item" style="display: block">{{item}}
+            </a-checkbox>
+          </a-checkbox-group>
+
+        </div>
+      </div>
+      <div class="right">
+        <div class="header">
+          <span class="select-number">已选择 <b>2</b>/4</span>
+          <a-button type="link" class="link">清空</a-button>
+        </div>
+
+        <p v-for="(item,index) in selectList" :key="index" class="list">{{item.value}}
+          <a-icon type="close" class="icon"/>
+        </p>
+
+      </div>
+    </div>
   </a-modal>
 </template>
 
@@ -19,8 +54,62 @@
             return {
                 loading: false,
                 visible: false,
-            };
+                selectList: [
+                    {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
+                    {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
+                ],
+                plainOptions: ['福建三明万达-供电系统-6楼-工程信息化中的区域编码ND182472e83742', '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742'],
+                checkedList: [],
+                expandedKeys: [],
+                autoExpandParent: true,
+                checkedKeys: [],
+                selectedKeys: [],
+                treeData: [
+                    {
+                        title: '0-0',
+                        key: '0-0',
+                        children: [
+                            {
+                                title: '0-0-0',
+                                key: '0-0-0',
+                                children: [
+                                    {title: '0-0-0-0', key: '0-0-0-0'},
+                                    {title: '0-0-0-1', key: '0-0-0-1'},
+                                    {title: '0-0-0-2', key: '0-0-0-2'},
+                                ],
+                            },
+                            {
+                                title: '0-0-1',
+                                key: '0-0-1',
+                                children: [
+                                    {title: '0-0-1-0', key: '0-0-1-0'},
+                                    {title: '0-0-1-1', key: '0-0-1-1'},
+                                    {title: '0-0-1-2', key: '0-0-1-2'},
+                                ],
+                            },
+                            {
+                                title: '0-0-2',
+                                key: '0-0-2',
+                            },
+                        ],
+                    },
+                    {
+                        title: '0-1',
+                        key: '0-1',
+                        children: [
+                            {title: '0-1-0-0', key: '0-1-0-0'},
+                            {title: '0-1-0-1', key: '0-1-0-1'},
+                            {title: '0-1-0-2', key: '0-1-0-2'},
+                        ],
+                    },
+                    {
+                        title: '0-2',
+                        key: '0-2',
+                    },
+                ]
+            }
         },
+
         methods: {
             showModal() {
                 this.visible = true;
@@ -35,10 +124,113 @@
             handleCancel(e) {
                 this.visible = false;
             },
+            onSearch(value) {
+                console.log(value);
+            },
+            ChangeCheckbox(val) {
+                console.log(val)
+            },
+            onExpand(expandedKeys) {
+                console.log('onExpand', expandedKeys);
+                this.expandedKeys = expandedKeys;
+                this.autoExpandParent = false;
+            },
+
+            onSelect(selectedKeys, info) {
+                console.log('onSelect', info);
+                this.selectedKeys = selectedKeys;
+            },
         }
+
     }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .edit-dialog {
+    .dialog-content {
+      width: 1136px;
+      height: 499px;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 3px;
+      border: 1px solid rgba(239, 240, 241, 1);
+      display: flex;
+      overflow: auto;
+
+      .left {
+        width: 785px;
+        border-right: 1px solid #EFF0F1;
+
+        .search {
+          width: 762px;
+          margin: 0 12px;
+        }
+
+        .tree {
+          width: 259px;
+          height: 441px;
+          border-right: 1px solid #EFF0F1;
+          display: inline-block;
+          float: left;
+
+        }
+
+        .checkbox {
+          margin-top: 17px;
+          margin-left: 13px;
+          width: 500px;
+          display: inline-block;
+        }
+      }
+
+      .right {
+        flex-grow: 1;
+
+
+        .list {
+          background: rgba(239, 240, 241, 1);
+          border-radius: 2px;
+          margin: 8px 12px;
+          position: relative;
+          padding: 5px;
+
+          .icon {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+            cursor: pointer;
+          }
+        }
+
+
+        .select-number {
+          margin-left: 12px;
+
+        }
+
+        .link {
+          float: right;
+          line-height: 57px;
+        }
+      }
 
+      .header {
+        height: 57px;
+        line-height: 57px;
+        border-bottom: 1px solid #EFF0F1;
+      }
+    }
+
+    /deep/ .ant-input-affix-wrapper .ant-input-suffix {
+      /*left: 12px;*/
+      /*padding-right: 12px;*/
+    }
+
+    /deep/ .ant-modal-footer {
+      border: 0;
+    }
+
+    /deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
+      margin: 0;
+    }
+  }
 </style>

+ 1 - 1
src/components/edit/right_toolbar.vue

@@ -37,7 +37,7 @@
       </a-tab-pane>
       <a-tab-pane key="2" tab="元素" force-render>
         <div class="element">
-          <a-input-search placeholder="input search text" @search="onSearch" />
+          <a-input-search placeholder="搜索" @search="onSearch" />
           <ul class="element-list">
             <li>
               <a-icon type="play-circle" />

+ 1 - 1
src/components/edit/top_toolbar.vue

@@ -37,7 +37,7 @@
         </li> -->
         <li>
           <a-icon type="edit" />
-          <span>锁</span>
+          <span>锁</span>
         </li>
         <li>
           <a-icon type="delete" />