Selaa lähdekoodia

添加公共样式

zhangyu 4 vuotta sitten
vanhempi
commit
ee2ac7ddc1

+ 1 - 21
src/App.vue

@@ -9,24 +9,4 @@ export default {
     return {};
   },
 };
-</script>
-<style lang="less">
-div {
-  -moz-user-select: none; /*火狐*/
-  -webkit-user-select: none; /*webkit浏览器*/
-  -ms-user-select: none; /*IE10*/
-  -khtml-user-select: none; /*早期浏览器*/
-  user-select: none;
-}
-body,
-html {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-#app {
-  width: 100%;
-  height: 100%;
-}
-</style>
+</script>

+ 22 - 0
src/assets/less/reset.less

@@ -0,0 +1,22 @@
+div {
+    -moz-user-select: none; /*火狐*/
+    -webkit-user-select: none; /*webkit浏览器*/
+    -ms-user-select: none; /*IE10*/
+    -khtml-user-select: none; /*早期浏览器*/
+    user-select: none;
+}
+body,
+html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+#app {
+    width: 100%;
+    height: 100%;
+}
+
+.el-input__inner:hover {
+    border-color: #409eff !important;
+}

+ 4 - 5
src/components/homeView/createCanvasDialog.vue

@@ -17,7 +17,6 @@
                         :options="buildFloorData"
                         :props="props"
                         clearable
-                        @change="handleChangeBuildFloor"
                         size="small"
                     ></el-cascader>
                 </el-form-item>
@@ -44,7 +43,7 @@
                     </div>
                 </el-form-item>
                 <el-form-item label="所属文件夹" prop="folder">
-                    <el-select v-model="ruleForm.folder" filterable allow-create default-first-option size="small" @change="handleChangeFolder">
+                    <el-select v-model="ruleForm.folder" filterable allow-create default-first-option size="small">
                         <el-option v-for="item in folderData" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                     </el-select>
                 </el-form-item>
@@ -218,6 +217,9 @@ export default {
                 console.log("新建文件夹", this.ruleForm.folder);
             }
             console.log(pa)
+            /**
+             * 返回参数中要返给我是否新建文件夹标识
+             */
         },
         // 关闭创建弹窗回调(重置创建信息)
         closeModal() {
@@ -257,9 +259,6 @@ export default {
     }
     .input-new-tag {
         width: 150px;
-        // input{
-        //   height: 24px;
-        // }
     }
     .button-new-tag {
         width: 60px;

+ 53 - 45
src/components/homeView/leftFolder.vue

@@ -22,12 +22,13 @@
                 </li>
                 <li
                     class="folder-item"
+                    v-loading="loading"
                     :class="{ 'folder-select': folder.checked }"
                     v-for="folder in folderData"
                     :key="folder.id"
                     :title="folder.name"
                     @contextmenu.prevent="openMenu($event, folder)"
-                    @click="handleCheckFolder(folder)"
+                    @click="handleCheckFolder(folder.id)"
                 >
                     <span v-show="!folder.showInput" class="folder-item-text">{{ folder.name }}</span>
                     <!-- <el-badge is-dot class="folder-item-number">103</el-badge> -->
@@ -41,8 +42,8 @@
                         @keyup.native.enter="handleUpdateFolderName(folder)"
                         placeholder="请输入文件夹名称"
                     ></el-input>
-                    <i v-show="folder.showInput" class="el-icon-refresh-left revoke-icon" title="撤销" @click="handleRevokeUpdateFolder(folder)"></i>
-                    <i v-show="folder.showInput" class="el-icon-check confirm-icon" title="确认" @click="handleUpdateFolderName(folder)"></i>
+                    <i v-show="folder.showInput" class="el-icon-refresh-left revoke-icon" title="撤销" @click.stop="handleRevokeUpdateFolder(folder)"></i>
+                    <i v-show="folder.showInput" class="el-icon-check confirm-icon" title="确认" @click.stop="handleUpdateFolderName(folder)"></i>
                 </li>
                 <!-- 右键菜单部分 -->
                 <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
@@ -58,52 +59,57 @@ export default {
     data() {
         return {
             showAddFolder: false,
+            loading: false,
             folderName: "未命名文件夹",
-            folderData: [
-                {
-                    id: 1,
-                    name: "能源系统",
-                    updateName: "能源系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 2,
-                    name: "排水系统",
-                    updateName: "排水系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 3,
-                    name: "消防水系统",
-                    updateName: "消防水系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 4,
-                    name: "公共照明系统公共照明系统公共照明系统公共照明系统",
-                    updateName: "公共照明系统公共照明系统公共照明系统公共照明系统",
-                    checked: false,
-                    showInput: false,
-                },
-                {
-                    id: 5,
-                    name: "暖通空调系统",
-                    updateName: "暖通空调系统",
-                    checked: false,
-                    showInput: false,
-                },
-            ],
+            folderData: [],
             visible: false,
             top: 0,
             left: 0,
             rightClickFolder: null,
         };
     },
-    mounted() {},
+    created() {
+        this.getFolderData();
+    },
     methods: {
+        // 获取文件夹数据
+        getFolderData(folderId) {
+            this.loading = true;
+            setTimeout(() => {
+                const res = [
+                    {
+                        id: 1,
+                        name: "能源系统",
+                    },
+                    {
+                        id: 2,
+                        name: "排水系统",
+                    },
+                    {
+                        id: 3,
+                        name: "消防水系统",
+                    },
+                    {
+                        id: 4,
+                        name: "公共照明系统公共照明系统公共照明系统公共照明系统",
+                    },
+                    {
+                        id: 5,
+                        name: "暖通空调系统",
+                    },
+                ];
+                this.folderData = res.map(folder => {
+                    folder.updateName = folder.name;
+                    folder.checked = false;
+                    folder.showInput = false;
+                    return folder
+                })
+                if (folderId) {// 如果参数传入文件夹Id,则选中对应的文件夹
+                    this.handleCheckFolder(folderId)
+                }
+                this.loading = false;
+            }, 1000);
+        },
         // 点击添加文件夹icon打开弹窗
         handleShowAddFolder() {
             this.showAddFolder = true;
@@ -123,8 +129,9 @@ export default {
                 this.$message({ showClose: true, message: "您输入的文件夹已存在!" });
             } else {
                 setTimeout(() => {
+                    const folderId = Math.floor(Math.random() * 1000);
                     this.folderData.unshift({
-                        id: Math.floor(Math.random() * 1000),
+                        id: folderId,
                         name: this.folderName,
                         updateName: this.folderName,
                         checked: false,
@@ -132,6 +139,7 @@ export default {
                     });
                     this.$message.success("添加文件夹成功!");
                     this.handleRevokeAddFolder();
+                    this.handleCheckFolder(folderId);
                 }, 1000);
             }
         },
@@ -142,11 +150,11 @@ export default {
             this.folderName = "未命名文件夹";
         },
         // 点击文件夹
-        handleCheckFolder(folder) {
-            this.$emit("changeFolder", folder);
+        handleCheckFolder(folderId) {
             this.folderData.forEach((item) => {
-                if (item.id === folder.id) {
+                if (item.id === folderId) {
                     item.checked = true;
+                    this.$emit("changeFolder", item);
                 } else {
                     item.checked = false;
                 }

+ 1 - 0
src/main.ts

@@ -5,6 +5,7 @@ import store from './store'
 import './assets/font/iconfont.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import './assets/less/reset.less'
 import _ from 'lodash';
 
 Vue.use(ElementUI);