|
@@ -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>
|