Browse Source

文件模型管理ui界面的搭建

YaolongHan 5 years ago
parent
commit
f1f6c42179

+ 94 - 63
src/components/model/file/addFloorDialog.vue

@@ -1,55 +1,69 @@
 <template>
 <template>
   <!-- 新增楼层 -->
   <!-- 新增楼层 -->
   <div id="addFloorDialog">
   <div id="addFloorDialog">
-    <el-dialog title="新增楼层" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item ref="form" :model="form" label-width="80px">
-          <el-form-item label="活动名称">
-            <el-upload
-              class="upload-demo"
-              ref="upload"
-              action="https://jsonplaceholder.typicode.com/posts/"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :file-list="fileList"
-              :auto-upload="false"
-              :limit="1"
+    <el-dialog
+      title="新增楼层"
+      :visible.sync="addFloorFileVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item label="模型文件:">
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+            :auto-upload="false"
+            :on-change="onChangeUpLoad"
+            :limit="1"
+          >
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="模型所属楼层:">
+          <div class="floorModle">
+            <el-select v-model="form.floorTypeVal" placeholder="请选择">
+              <el-option
+                v-for="item in floorType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+            <!-- 计数 -->
+            <el-input-number
+              style="margin-left:10px"
+              v-model="form.floorNum"
+              :min="1"
+              :disabled="form.floorTypeVal == '选项2'"
+              @change="handleChange"
+            ></el-input-number>
+            <!-- 是否夹层 -->
+            <el-checkbox style="margin-left:10px" v-model="form.haveInterlayer">是否夹层</el-checkbox>
+            <!-- 夹层选择 -->
+            <el-select
+              v-model="form.interlayerTypeVal"
+              :disabled="!form.haveInterlayer"
+              placeholder="请选择"
             >
             >
-              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-            </el-upload>
-          </el-form-item>
-          <el-form-item label="模型所属楼层">
-            <div class="floorModle">
-              <el-select v-model="value" placeholder="请选择">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </el-select>
-              <!-- 计数 -->
-              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
-              <!-- 是否夹层 -->
-              <el-radio v-model="radio" label="1">是否夹层</el-radio>
-              <!-- 夹层选择 -->
-              <el-select v-model="value" placeholder="请选择">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="活动形式">
-            <el-input type="textarea" v-model="form.desc"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">立即创建</el-button>
-            <el-button>取消</el-button>
-          </el-form-item>
+              <el-option
+                v-for="item in interlayerType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="备注信息:">
+          <el-input type="textarea" v-model="form.desc"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">确认</el-button>
+          <el-button @click="handleClose">取消</el-button>
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>
     </el-dialog>
     </el-dialog>
@@ -57,9 +71,11 @@
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
+  props: {
+    addFloorFileVisible: Boolean
+  },
   data() {
   data() {
     return {
     return {
-      dialogVisible: false,
       form: {
       form: {
         name: "",
         name: "",
         region: "",
         region: "",
@@ -68,34 +84,43 @@ export default {
         delivery: false,
         delivery: false,
         type: [],
         type: [],
         resource: "",
         resource: "",
-        desc: ""
+        desc: "",
+        floorTypeVal: "选项1", //楼层类型得值
+        interlayerTypeVal: "选项1", //夹层类型得值
+        haveInterlayer: false, //是否有夹层
+        file: null,            //上传文件
+        floorNum:1          //楼层
       },
       },
       fileList: [],
       fileList: [],
-      radio: "1", //是否夹层
-      options: [
+      floorType: [
         {
         {
           value: "选项1",
           value: "选项1",
-          label: "黄金糕"
+          label: "正常层(F)"
         },
         },
         {
         {
           value: "选项2",
           value: "选项2",
-          label: "双皮奶"
+          label: "屋顶(RF)"
         },
         },
         {
         {
           value: "选项3",
           value: "选项3",
-          label: "蚵仔煎"
+          label: "地下(B)"
+        }
+      ],
+      interlayerType: [
+        {
+          value: "选项1",
+          label: "夹层M1"
         },
         },
         {
         {
-          value: "选项4",
-          label: "龙须面"
+          value: "选项2",
+          label: "夹层M2"
         },
         },
         {
         {
-          value: "选项5",
-          label: "北京烤鸭"
+          value: "选项3",
+          label: "夹层M2"
         }
         }
       ],
       ],
-      value: "",
-      num:0
+      value: ""
     };
     };
   },
   },
   methods: {
   methods: {
@@ -107,7 +132,7 @@ export default {
       this.$refs.upload.submit();
       this.$refs.upload.submit();
     },
     },
     handleClose() {
     handleClose() {
-
+      this.$emit("closeAddFloorDia");
     },
     },
     handleRemove(file, fileList) {
     handleRemove(file, fileList) {
       console.log(file, fileList);
       console.log(file, fileList);
@@ -115,7 +140,13 @@ export default {
     handlePreview(file) {
     handlePreview(file) {
       console.log(file);
       console.log(file);
     },
     },
-    handleChange(){}
+    handleChange() {},
+    // 获取上传文件
+    onChangeUpLoad(file, fileList) {
+      if (fileList.length) {
+        this.form.file = file;
+      }
+    }
   }
   }
 };
 };
 </script>
 </script>

+ 46 - 10
src/components/model/file/addFolder.vue

@@ -1,24 +1,60 @@
 <template>
 <template>
   <div id="addFolder">
   <div id="addFolder">
-    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-        <div>
-            文件夹名称:
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-        </div>
+    <el-dialog title="提示" :visible.sync="addFolderVisible" width="30%" :before-close="closeDiaLog">
+      <div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="文件夹名称" prop="name">
+            <el-input v-model="ruleForm.name" focus></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
       <span slot="footer" class="dialog-footer">
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button @click="closeDiaLog">取 消</el-button>
+        <el-button type="primary" @click="addFolder">确 定</el-button>
       </span>
       </span>
     </el-dialog>
     </el-dialog>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
+  props: {
+    addFolderVisible: Boolean,
+    folderName: String
+  },
   data() {
   data() {
     return {
     return {
-      dialogVisible: false,
-      input:''
+      ruleForm: {
+        name: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: "文件夹名称不能为空!", trigger: "blur" }
+        ]
+      }
     };
     };
-  }
+  },
+  methods: {
+    closeDiaLog() {
+      this.resetForm()
+      this.$emit("closeAddFolderVisible");
+    },
+    addFolder() {
+      this.closeDiaLog();
+    },
+    resetForm() {
+      this.$refs['ruleForm'].resetFields();
+    }
+  },
+  watch: {
+    folderName:function(val,oldVal){
+         this.ruleForm.name = val
+    }
+  },
 };
 };
 </script>
 </script>

+ 6 - 7
src/components/model/file/modelLog.vue

@@ -1,7 +1,7 @@
 <template>
 <template>
   <!-- 模型日志弹窗 -->
   <!-- 模型日志弹窗 -->
   <div id="modelLog">
   <div id="modelLog">
-    <el-dialog title="模型日志" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+    <el-dialog title="模型日志" :visible.sync="modelLogVisible" width="30%" :before-close="handleClose">
       <div class="bodys">
       <div class="bodys">
         <el-button plain icon="el-icon-delete" class="delete-model" @click="deleteModel">删除模型</el-button>
         <el-button plain icon="el-icon-delete" class="delete-model" @click="deleteModel">删除模型</el-button>
         <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
         <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
@@ -12,7 +12,7 @@
               <el-table-column prop="address" label="上传人"></el-table-column>
               <el-table-column prop="address" label="上传人"></el-table-column>
               <el-table-column prop="address" label="操作">
               <el-table-column prop="address" label="操作">
                 <template slot-scope="scope">
                 <template slot-scope="scope">
-                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+                  <el-button @click="handleClick(scope.row)" type="text" size="small">下载</el-button>
                 </template>
                 </template>
               </el-table-column>
               </el-table-column>
             </el-table>
             </el-table>
@@ -25,6 +25,9 @@
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
+  props:{
+   modelLogVisible:Boolean
+  },
   data() {
   data() {
     return {
     return {
       dialogVisible: false, //是否显示该弹窗
       dialogVisible: false, //是否显示该弹窗
@@ -55,11 +58,7 @@ export default {
   },
   },
   methods: {
   methods: {
     handleClose(done) {
     handleClose(done) {
-      this.$confirm("确认关闭?")
-        .then(_ => {
-          done();
-        })
-        .catch(_ => {});
+      this.$emit('CloseModelLogDia')
     },
     },
     handleClick() {},
     handleClick() {},
     /**
     /**

+ 94 - 37
src/components/model/file/replaceModelDialog.vue

@@ -1,33 +1,49 @@
  <!-- 替换模型弹窗 -->
  <!-- 替换模型弹窗 -->
+
 <template>
 <template>
+  <!-- 新增楼层 -->
   <div id="replaceModel">
   <div id="replaceModel">
-    <el-dialog title="替换模型" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item ref="form" :model="form" label-width="80px">
-          <el-form-item label="上传新模型">
-            <el-upload
-              class="upload-demo"
-              ref="upload"
-              action="https://jsonplaceholder.typicode.com/posts/"
-              :on-preview="handlePreview"
-              :on-remove="handleRemove"
-              :file-list="fileList"
-              :auto-upload="false"
-              limit="1"
-            >
-              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-            </el-upload>
-          </el-form-item>
-          <el-form-item label="选择模型文件替换原因:">
-            <div class="radios">
-              <el-radio v-model="radio" label="1">之前模型画错,要修改</el-radio>
-              <el-radio v-model="radio" label="2">因工程改造,更新模型文件</el-radio>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">立即创建</el-button>
-            <el-button>取消</el-button>
-          </el-form-item>
+    <el-dialog
+      title="替换模型"
+      :visible.sync="repliceModelVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item label="模型文件:">
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :file-list="fileList"
+            :auto-upload="false"
+            :on-change="onChangeUpLoad"
+            :limit="1"
+          >
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="选择模型文件替换原因:">
+          <ul>
+            <li>
+              <el-radio v-model="form.radio" label="1">之前模型画错要修改</el-radio>
+            </li>
+            <li>
+              <el-radio v-model="form.radio" label="2">因工程改造,更新模型文件</el-radio>
+            </li>
+          </ul>
+        </el-form-item>
+        <el-form-item>
+          <div class="dateTime" v-show ="form.radio == '2'">
+            <p>工程改造竣工时间:</p>
+            <el-date-picker v-model="form.finishTime" type="date" placeholder="选择日期"></el-date-picker>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">确认</el-button>
+          <el-button @click="handleClose">取消</el-button>
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>
     </el-dialog>
     </el-dialog>
@@ -35,9 +51,11 @@
 </template>
 </template>
 <script>
 <script>
 export default {
 export default {
+  props: {
+    repliceModelVisible: Boolean
+  },
   data() {
   data() {
     return {
     return {
-      dialogVisible: false,
       form: {
       form: {
         name: "",
         name: "",
         region: "",
         region: "",
@@ -46,36 +64,75 @@ export default {
         delivery: false,
         delivery: false,
         type: [],
         type: [],
         resource: "",
         resource: "",
-        desc: ""
+        desc: "",
+        file: null, //上传文件
+        radio: "1",
+        finishTime:''
       },
       },
-      radio:1,
-      fileList: []
+      fileList: [],
+      floorType: [
+        {
+          value: "选项1",
+          label: "正常层(F)"
+        },
+        {
+          value: "选项2",
+          label: "屋顶(RF)"
+        },
+        {
+          value: "选项3",
+          label: "地下(B)"
+        }
+      ],
+      interlayerType: [
+        {
+          value: "选项1",
+          label: "夹层M1"
+        },
+        {
+          value: "选项2",
+          label: "夹层M2"
+        },
+        {
+          value: "选项3",
+          label: "夹层M2"
+        }
+      ],
+      value: ""
     };
     };
   },
   },
   methods: {
   methods: {
     onSubmit() {
     onSubmit() {
       console.log("submit!");
       console.log("submit!");
     },
     },
-    handleClose() {},
     // /上传到服务器/
     // /上传到服务器/
     submitUpload() {
     submitUpload() {
       this.$refs.upload.submit();
       this.$refs.upload.submit();
     },
     },
+    handleClose() {
+      this.$emit("closeReplaceModelDia");
+    },
     handleRemove(file, fileList) {
     handleRemove(file, fileList) {
       console.log(file, fileList);
       console.log(file, fileList);
     },
     },
     handlePreview(file) {
     handlePreview(file) {
       console.log(file);
       console.log(file);
+    },
+    handleChange() {},
+    // 获取上传文件
+    onChangeUpLoad(file, fileList) {
+      if (fileList.length) {
+        this.form.file = file;
+      }
     }
     }
   }
   }
 };
 };
 </script>
 </script>
-<style lang="less" scoped>
-#replaceModel {
-  .radios {
+<style lang="less">
+#addFloorDialog {
+  .floorModle {
     display: flex;
     display: flex;
-    flex-direction: column;
+    justify-content: left;
   }
   }
 }
 }
 </style>
 </style>
-

+ 158 - 48
src/views/model/file/index.vue

@@ -6,20 +6,35 @@
         <el-card class="box-card" :body-style="{ padding: '0px' }">
         <el-card class="box-card" :body-style="{ padding: '0px' }">
           <div class="top_hand left_top_hand">
           <div class="top_hand left_top_hand">
             <div class="folder-box">
             <div class="folder-box">
-              <i class="box-icon el-icon-circle-plus-outline"></i>
-              <i class="box-icon el-icon-remove-outline"></i>
+              <el-tooltip class="item" effect="dark" content="新建文件夹" placement="top-start">
+                <el-button icon="el-icon-folder-add" @click="addFolder" class="icon_font"></el-button>
+              </el-tooltip>
+              <el-tooltip class="item" effect="dark" content="删除文件夹" placement="top-start">
+                <el-button icon="el-icon-folder-remove" class="icon_font" @click="removeFolder"></el-button>
+              </el-tooltip>
             </div>
             </div>
             <div class="file-box">
             <div class="file-box">
-              <i class="box-icon el-icon-edit"></i>
+              <el-tooltip class="item" effect="dark" content="编辑文件夹" placement="top-start">
+                <el-button @click="editFolder" icon="el-icon-edit" class="icon_font"></el-button>
+              </el-tooltip>
             </div>
             </div>
           </div>
           </div>
           <div class="folder-list">
           <div class="folder-list">
             <div class="head">模型文件夹</div>
             <div class="head">模型文件夹</div>
             <ul class="lists">
             <ul class="lists">
-              <li @click="openFolder">文件夹1</li>
-              <li @click="openFolder">文件夹2</li>
-              <li @click="openFolder">文件夹13</li>
-              <li @click="openFolder">文件夹4</li>
+              <li
+                @click="openFolder(index,item)"
+                v-for="(item,index) in navigationBar"
+                :key="index"
+                :class="[choiceIndex == index + 1 ? 'li-active' : '']"
+              >
+                <i
+                  :class="[choiceIndex == index + 1 ?  'el-icon-folder-opened':'el-icon-folder','icon_font']"
+                  width="40"
+                  height="40"
+                ></i>
+                <span>{{item.name}}</span>
+              </li>
             </ul>
             </ul>
           </div>
           </div>
         </el-card>
         </el-card>
@@ -31,18 +46,18 @@
       <el-card class="box-card" :body-style="{ padding: '0px' }">
       <el-card class="box-card" :body-style="{ padding: '0px' }">
         <!-- 顶部操作栏 -->
         <!-- 顶部操作栏 -->
         <div class="top_hand right_top_hand">
         <div class="top_hand right_top_hand">
-          <el-button type="primary">添加楼层文件</el-button>
+          <el-button type="primary" @click="addFloorFile">添加楼层文件</el-button>
           <el-button type="primary" round>刷新</el-button>
           <el-button type="primary" round>刷新</el-button>
         </div>
         </div>
         <el-table
         <el-table
           :data="tableData"
           :data="tableData"
           style="width: 100%"
           style="width: 100%"
-          :header-cell-style="{background:'#909399',color:'#000'}"
+          :header-cell-style="{background:'#ccc',color:'#000'}"
         >
         >
           <el-table-column prop="date" label="模型文件" width="180">
           <el-table-column prop="date" label="模型文件" width="180">
             <template slot-scope="scope">
             <template slot-scope="scope">
-              <i class="el-icon-document-checked" width="30" height="30"></i>
-              <span style="margin-left: 10px">{{ scope.row.date }}</span>
+                <i class="el-icon-document-checked icon_font"></i>
+                <span style="margin-left: 10px">{{ scope.row.date }}</span>
             </template>
             </template>
           </el-table-column>
           </el-table-column>
           <el-table-column prop="name" label="备注" width="180"></el-table-column>
           <el-table-column prop="name" label="备注" width="180"></el-table-column>
@@ -51,9 +66,19 @@
           <el-table-column prop="address" label="上传人"></el-table-column>
           <el-table-column prop="address" label="上传人"></el-table-column>
           <el-table-column prop="address" label="操作">
           <el-table-column prop="address" label="操作">
             <template slot-scope="scope">
             <template slot-scope="scope">
-              <el-button  type="primary" icon="el-icon-download"></el-button>
-              <el-button type="primary" icon="el-icon-goods" @click="handleClick(scope.row)"></el-button>
-              <el-button  type="primary" icon="el-icon-date"></el-button>
+              <el-button type="primary" class="icon_font" icon="el-icon-download"></el-button>
+              <el-button
+                type="primary"
+                class="icon_font"
+                icon="el-icon-goods"
+                @click="repliaceModel(scope.row)"
+              ></el-button>
+              <el-button
+                type="primary"
+                class="icon_font"
+                icon="el-icon-date"
+                @click="queryModelLog"
+              ></el-button>
             </template>
             </template>
           </el-table-column>
           </el-table-column>
         </el-table>
         </el-table>
@@ -62,24 +87,33 @@
     <!-- 弹窗 开始-->
     <!-- 弹窗 开始-->
 
 
     <!-- 模型日志弹窗 -->
     <!-- 模型日志弹窗 -->
-    <modelLog></modelLog>
+    <modelLog :modelLogVisible="modelLogVisible" @CloseModelLogDia="modelLogVisible=false"></modelLog>
     <!-- 替换模型弹窗 -->
     <!-- 替换模型弹窗 -->
-    <repliceModel></repliceModel>
+    <repliceModel
+      :repliceModelVisible="repliceModelVisible"
+      @closeReplaceModelDia="repliceModelVisible=false"
+    ></repliceModel>
     <!-- 新增楼层 -->
     <!-- 新增楼层 -->
-    <addFloorDialog></addFloorDialog>
+    <addFloorDialog
+      :addFloorFileVisible="addFloorFileVisible"
+      @closeAddFloorDia="addFloorFileVisible=false"
+    ></addFloorDialog>
     <!-- 新增文件夹名称 -->
     <!-- 新增文件夹名称 -->
-    <addFolder></addFolder>
+    <addFolder
+      :addFolderVisible="addFolderVisible"
+      @closeAddFolderVisible="addFolderVisible=false;folderName=''"
+      :folderName="folderName"
+    ></addFolder>
     <!-- 弹窗 结束-->
     <!-- 弹窗 结束-->
-
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import dasBoard from "@/views/dasboard/index";
 import dasBoard from "@/views/dasboard/index";
-import modelLog from "@/components/model/file/modelLog" //模型日志弹窗
-import repliceModel from '@/components/model/file/replaceModelDialog' //替换模型弹窗
-import addFloorDialog from '@/components/model/file/addFloorDialog' //新增楼层弹窗
-import addFolder from '@/components/model/file/addFolder' //新增文件夹
+import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
+import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
+import addFloorDialog from "@/components/model/file/addFloorDialog"; //新增楼层弹窗
+import addFolder from "@/components/model/file/addFolder"; //新增文件夹
 export default {
 export default {
   components: {
   components: {
     dasBoard,
     dasBoard,
@@ -90,36 +124,102 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      explain: "模型文件管理",
-      time: "2019-06-25",
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
-        },
+      addFolderVisible: false, //是否显示新增文件夹弹窗
+      addFloorFileVisible: false, //是否显示增加楼层文件弹窗
+      repliceModelVisible: false, //是否显示替换楼层模型弹窗
+      modelLogVisible: false, //是否显示模型日志弹窗
+      folderName: "", //文件夹名称
+      currentFolderName: "",
+      navigationBar: [
         {
         {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄"
+          name: "文件夹1",
+          tableData: [
+            {
+              date: "2016-05-02",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1518 弄"
+            },
+            {
+              date: "2016-05-04",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1517 弄"
+            },
+            {
+              date: "2016-05-04",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1517 弄"
+            }
+          ],
+          id: "1"
         },
         },
         {
         {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
+          name: "文件夹2",
+          tableData: [
+            {
+              date: "2016-05-02",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1518 弄"
+            },
+            {
+              date: "2016-05-04",
+              name: "王小虎",
+              address: "上海市普陀区金沙江路 1517 弄"
+            }
+          ],
+          id: "2"
         }
         }
-      ]
+      ],
+      choiceIndex: 0,
+      tableData: []
     };
     };
   },
   },
   methods: {
   methods: {
-    openFolder() {}
+    // 打开模型文件夹
+    openFolder(index, item) {
+      this.choiceIndex = index + 1;
+      this.tableData = item.tableData;
+      this.folderName = item.name;
+    },
+    //新增模型文件夹
+    addFolder() {
+      this.folderName = "";
+      this.addFolderVisible = true;
+    },
+    //删除模型文件夹
+    removeFolder() {
+      this.$alert("确定要删除文件夹吗?", "提示", {
+        confirmButtonText: "确定",
+        callback: action => {
+          this.$message({
+            type: "info",
+            message: `action: ${action}`
+          });
+        }
+      });
+    },
+    //编辑文件夹
+    editFolder() {
+      this.folderName = this.currentFolderName;
+      this.addFolderVisible = true;
+    },
+    //添加楼层文件
+    addFloorFile() {
+      this.addFloorFileVisible = true;
+    },
+    //替换文件模型
+    repliaceModel(e) {
+      this.repliceModelVisible = true;
+    },
+    //查看模型日志
+    queryModelLog() {
+      this.modelLogVisible = true;
+    }
   },
   },
-  mounted() {}
+  mounted() {
+    this.choiceIndex = 1;
+    this.tableData = this.navigationBar[0].tableData;
+    this.currentFolderName = this.navigationBar[0].name;
+  }
 };
 };
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
@@ -166,7 +266,7 @@ export default {
       width: 100%;
       width: 100%;
       padding-left: 10px;
       padding-left: 10px;
       box-sizing: border-box;
       box-sizing: border-box;
-      background: #909399;
+      background: #ccc;
       color: #000;
       color: #000;
       display: flex;
       display: flex;
       justify-content: left;
       justify-content: left;
@@ -175,6 +275,7 @@ export default {
     }
     }
     .lists {
     .lists {
       width: 100%;
       width: 100%;
+      margin-top: 10px;
       li {
       li {
         height: 42px;
         height: 42px;
         display: flex;
         display: flex;
@@ -182,14 +283,23 @@ export default {
         align-items: center;
         align-items: center;
         padding-left: 20px;
         padding-left: 20px;
         box-sizing: border-box;
         box-sizing: border-box;
+        cursor: pointer;
+        span {
+          padding-left: 6px;
+        }
       }
       }
       li:hover {
       li:hover {
-        background: #909399;
+        background: rgb(240, 238, 238);
+        font-weight: bold;
       }
       }
       .li-active {
       .li-active {
-        background: #909399;
+        background: rgb(240, 238, 238);
+        font-weight: bold;
       }
       }
     }
     }
   }
   }
+  .icon_font {
+    font-size: 18px;
+  }
 }
 }
 </style>
 </style>