|
@@ -6,20 +6,35 @@
|
|
|
<el-card class="box-card" :body-style="{ padding: '0px' }">
|
|
|
<div class="top_hand left_top_hand">
|
|
|
<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 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 class="folder-list">
|
|
|
<div class="head">模型文件夹</div>
|
|
|
<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>
|
|
|
</div>
|
|
|
</el-card>
|
|
@@ -31,18 +46,18 @@
|
|
|
<el-card class="box-card" :body-style="{ padding: '0px' }">
|
|
|
<!-- 顶部操作栏 -->
|
|
|
<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>
|
|
|
</div>
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
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">
|
|
|
<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>
|
|
|
</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="操作">
|
|
|
<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>
|
|
|
</el-table-column>
|
|
|
</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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
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 {
|
|
|
components: {
|
|
|
dasBoard,
|
|
@@ -90,36 +124,102 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
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: {
|
|
|
- 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>
|
|
|
<style lang="less" scoped>
|
|
@@ -166,7 +266,7 @@ export default {
|
|
|
width: 100%;
|
|
|
padding-left: 10px;
|
|
|
box-sizing: border-box;
|
|
|
- background: #909399;
|
|
|
+ background: #ccc;
|
|
|
color: #000;
|
|
|
display: flex;
|
|
|
justify-content: left;
|
|
@@ -175,6 +275,7 @@ export default {
|
|
|
}
|
|
|
.lists {
|
|
|
width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
li {
|
|
|
height: 42px;
|
|
|
display: flex;
|
|
@@ -182,14 +283,23 @@ export default {
|
|
|
align-items: center;
|
|
|
padding-left: 20px;
|
|
|
box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
li:hover {
|
|
|
- background: #909399;
|
|
|
+ background: rgb(240, 238, 238);
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
.li-active {
|
|
|
- background: #909399;
|
|
|
+ background: rgb(240, 238, 238);
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .icon_font {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|