Browse Source

根据新版UI修改选择编辑

shaun-sheep 4 years ago
parent
commit
4871d44a7f

+ 1 - 0
.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .DS_Store
 node_modules
 node_modules
 /dist
 /dist
+package-lock.json
 
 
 # local env files
 # local env files
 .env.local
 .env.local

+ 13 - 1
babel.config.js

@@ -1,5 +1,17 @@
 module.exports = {
 module.exports = {
   presets: [
   presets: [
     '@vue/cli-plugin-babel/preset'
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+    plugins: [
+
+        [
+            "component",
+            {
+                "libraryName": "meri-design",
+                "camel2Dash": false,
+                "libDir": "dist",
+                "style": false
+            }
+        ]
+    ]
 }
 }

File diff suppressed because it is too large
+ 597 - 232
package-lock.json


+ 2 - 0
package.json

@@ -16,6 +16,7 @@
     "@saga-web/topology": "1.0.84",
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",
     "ant-design-vue": "^1.6.0",
     "core-js": "^3.6.4",
     "core-js": "^3.6.4",
+    "meri-design": "^1.2.9",
     "vue": "^2.6.11",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-class-component": "^7.2.3",
     "vue-property-decorator": "^8.4.1",
     "vue-property-decorator": "^8.4.1",
@@ -33,6 +34,7 @@
     "@vue/cli-plugin-vuex": "^4.3.0",
     "@vue/cli-plugin-vuex": "^4.3.0",
     "@vue/cli-service": "^4.3.0",
     "@vue/cli-service": "^4.3.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^6.7.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "eslint-plugin-vue": "^6.2.2",
     "fengmap": "^2.5.3",
     "fengmap": "^2.5.3",

+ 5 - 5
src/components/edit/attr_select.vue

@@ -101,17 +101,17 @@
       </section>
       </section>
     </div>
     </div>
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
-    <!-- <div class="attr-select">
-    <section class="grid">-->
+    <div class="attr-select">
+    <section class="grid">
     <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
     <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
-    <!-- <span>{{`设备`}}</span>
+     <span>{{`设备`}}</span>
         <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
         <a-button type="link" class="edit-option-btn" @click="handleEdit">选择编辑</a-button>
         <div class="grid-content">
         <div class="grid-content">
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
           <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
         </div>
         </div>
       </section>
       </section>
-    </div>-->
+    </div>
     <!--    快捷操作提示-->
     <!--    快捷操作提示-->
     <div style="position: fixed;bottom: 0;width: 280px;">
     <div style="position: fixed;bottom: 0;width: 280px;">
       <a-collapse :bordered="false" expand-icon-position="right">
       <a-collapse :bordered="false" expand-icon-position="right">
@@ -157,7 +157,7 @@ export default {
     onChange(e) {
     onChange(e) {
       this.precision = e.target.checked === true ? false : true;
       this.precision = e.target.checked === true ? false : true;
     },
     },
-    handleChange() {
+    handleChange(value) {
       console.log(`selected ${value}`);
       console.log(`selected ${value}`);
     },
     },
     changeNumber() {
     changeNumber() {

+ 75 - 68
src/components/edit/edit-dialog.vue

@@ -11,18 +11,31 @@
     <div class="dialog-content">
     <div class="dialog-content">
       <div class="left">
       <div class="left">
         <div class="header">
         <div class="header">
-          <a-input-search placeholder="搜索" class="search" @search="onSearch"/>
+          <div class="select">
+            <a-select default-value="全部" style="width:90%;margin-left: 10px" @change="handleMajor">
+              <a-select-option :value="item.value" v-for="item in majorList" :key="item.value">
+                {{item.value}}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div class="search">
+            <Select
+                v-model="model"
+                caption="所属系统:"
+                :isReadOnly="true"
+                @change="testClick"
+                :hideClear='true'
+                :selectdata="dataSelect2"
+                :placeholder="'请选择'"
+                class="search-select"
+                width="236"
+            />
+            <a-input-search placeholder="搜索" class="press-enter" @search="onSearch"/>
+
+          </div>
         </div>
         </div>
         <div class="tree">
         <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"
-          />
+          <searchTree/>
         </div>
         </div>
         <div class="checkbox">
         <div class="checkbox">
           <a-checkbox-group @change="ChangeCheckbox">
           <a-checkbox-group @change="ChangeCheckbox">
@@ -48,65 +61,34 @@
 </template>
 </template>
 
 
 <script>
 <script>
+    import searchTree from "@/components/edit/search_tree";
+
     export default {
     export default {
         name: "edit-dialog",
         name: "edit-dialog",
+        components: {searchTree},
         data() {
         data() {
             return {
             return {
                 loading: false,
                 loading: false,
                 visible: false,
                 visible: false,
+                model: 'test1',
+                searchName: '',
+                dataSelect2: [
+                    {id: 'test1', name: '全部'},
+                    {id: 'test2', name: '单平米'},
+                    {id: 'test3', name: '下级分项'},
+                    {id: 'test4', name: '滑动平均滑动平均'}
+                ],
                 selectList: [
                 selectList: [
                     {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
                     {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
                     {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
                     {value: '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742387443345435'},
                 ],
                 ],
                 plainOptions: ['福建三明万达-供电系统-6楼-工程信息化中的区域编码ND182472e83742', '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742'],
                 plainOptions: ['福建三明万达-供电系统-6楼-工程信息化中的区域编码ND182472e83742', '福建三明万达-供电系统-6楼-工程信息化中的区域编码ND18247283742'],
+                majorList: [
+                    {value: '全部'}, {value: 'luck'}, {value: 'tom'}
+                ],
                 checkedList: [],
                 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',
-                    },
-                ]
+
+
             }
             }
         },
         },
 
 
@@ -130,16 +112,17 @@
             ChangeCheckbox(val) {
             ChangeCheckbox(val) {
                 console.log(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;
+
+            handleMajor(val) {
+                console.log(val)
+            },
+            testClick(data) {
+                console.log(data)
             },
             },
+            pressEnter(e) {
+                console.log(e)
+            }
         }
         }
 
 
     }
     }
@@ -160,11 +143,35 @@
         width: 785px;
         width: 785px;
         border-right: 1px solid #EFF0F1;
         border-right: 1px solid #EFF0F1;
 
 
-        .search {
-          width: 762px;
-          margin: 0 12px;
+        .header {
+          width: 785px;
+
+          .select {
+            width: 260px;
+            border-right: 1px solid #EFF0F1;
+            display: inline-block;
+          }
+
+          .search {
+            width: 524px;
+            display: inline-block;
+
+            .search-select {
+              margin-left: 10px;
+              position: relative;
+              top: -2px;
+            }
+
+            .press-enter {
+              margin-left: 10px;
+              width: 236px;
+            }
+          }
+
+
         }
         }
 
 
+
         .tree {
         .tree {
           width: 259px;
           width: 259px;
           height: 441px;
           height: 441px;

+ 114 - 0
src/components/edit/search_tree.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <a-input-search style="margin: 10px;width: 90%" placeholder="搜索" @change="onChange" />
+    <a-tree
+        :expanded-keys="expandedKeys"
+        :auto-expand-parent="autoExpandParent"
+        :tree-data="gData"
+        @expand="onExpand"
+    >
+      <template slot="title" slot-scope="{ title }">
+        <span v-if="title.indexOf(searchValue) > -1">
+          {{ title.substr(0, title.indexOf(searchValue)) }}
+          <span style="color: #f50">{{ searchValue }}</span>
+          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+        </span>
+        <span v-else>{{ title }}</span>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script>
+    const x = 3;
+    const y = 2;
+    const z = 1;
+    const gData = [];
+
+    const generateData = (_level, _preKey, _tns) => {
+        const preKey = _preKey || '0';
+        const tns = _tns || gData;
+
+        const children = [];
+        for (let i = 0; i < x; i++) {
+            const key = `${preKey}-${i}`;
+            tns.push({ title: key, key, scopedSlots: { title: 'title' } });
+            if (i < y) {
+                children.push(key);
+            }
+        }
+        if (_level < 0) {
+            return tns;
+        }
+        const level = _level - 1;
+        children.forEach((key, index) => {
+            tns[index].children = [];
+            return generateData(level, key, tns[index].children);
+        });
+    };
+    generateData(z);
+
+    const dataList = [];
+    const generateList = data => {
+        for (let i = 0; i < data.length; i++) {
+            const node = data[i];
+            const key = node.key;
+            dataList.push({ key, title: key });
+            if (node.children) {
+                generateList(node.children);
+            }
+        }
+    };
+    generateList(gData);
+
+    const getParentKey = (key, tree) => {
+        let parentKey;
+        for (let i = 0; i < tree.length; i++) {
+            const node = tree[i];
+            if (node.children) {
+                if (node.children.some(item => item.key === key)) {
+                    parentKey = node.key;
+                } else if (getParentKey(key, node.children)) {
+                    parentKey = getParentKey(key, node.children);
+                }
+            }
+        }
+        return parentKey;
+    };
+    export default {
+        data() {
+            return {
+                expandedKeys: [],
+                searchValue: '',
+                autoExpandParent: true,
+                gData,
+            };
+        },
+        methods: {
+            onExpand(expandedKeys) {
+                this.expandedKeys = expandedKeys;
+                this.autoExpandParent = false;
+            },
+            onChange(e) {
+                const value = e.target.value;
+                const expandedKeys = dataList
+                    .map(item => {
+                        if (item.title.indexOf(value) > -1) {
+                            return getParentKey(item.key, gData);
+                        }
+                        return null;
+                    })
+                    .filter((item, i, self) => item && self.indexOf(item) === i);
+                Object.assign(this, {
+                    expandedKeys,
+                    searchValue: value,
+                    autoExpandParent: true,
+                });
+            },
+        },
+    };
+</script>
+
+<style scoped>
+
+</style>

src/components/mapClass/editScence.ts → src/components/mapClass/EditScence.ts


+ 4 - 0
src/main.ts

@@ -8,6 +8,10 @@ import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import 'ant-design-vue/dist/antd.css'
 Vue.config.productionTip = false
 Vue.config.productionTip = false
 
 
+import Pui from 'meri-design';
+import 'meri-design/dist/index.css'
+Vue.use(Pui);
+
 Vue.use(Antd)
 Vue.use(Antd)
 Vue.config.productionTip = false
 Vue.config.productionTip = false