|
@@ -1,36 +1,582 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <das-board>
|
|
|
- <template v-slot:plan>
|
|
|
- <span>{{plan?plan:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- <template v-slot:finish>
|
|
|
- <span>{{finish?finish:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- <template v-slot:onLine>
|
|
|
- <span>{{onLine?onLine:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- <template v-slot:explain>
|
|
|
- <span>{{explain?explain:"yyyy-mm-dd"}}</span>
|
|
|
- </template>
|
|
|
- </das-board>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
+ <div id="file_moddle_manage" v-loading="loading">
|
|
|
+ <!-- 左边模型文件夹列表 -->
|
|
|
+ <el-col class="col_left" :span="5">
|
|
|
+ <div class="grid-content grid-left">
|
|
|
+ <el-card class="box-card" :body-style="{ padding: '0px', height: '100%' }">
|
|
|
+ <div class="top_hand left_top_hand">
|
|
|
+ <div class="folder-box">
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
+ <el-scrollbar style="height:100%;">
|
|
|
+ <li @click="openFolder(index,item)" v-for="(item,index) in navigationModel" :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>
|
|
|
+ </el-scrollbar>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- 右边文件表格 -->
|
|
|
+ <el-col class="col_left" :span="19">
|
|
|
+ <el-card class="box-card" :body-style="{ padding: '0px' }">
|
|
|
+ <!-- 顶部操作栏 -->
|
|
|
+ <div class="top_hand right_top_hand">
|
|
|
+ <el-button @click="addFloorFile">添加楼层文件</el-button>
|
|
|
+ <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <floorTable
|
|
|
+ ref="floorTable"
|
|
|
+ :tableData="tableData"
|
|
|
+ @openModelLog="queryModelLog"
|
|
|
+ @replaceModel="repliaceModel"
|
|
|
+ @closeUpdateFile="removePersentList"
|
|
|
+ @percentFinish ="queryFloorFile(currentFolderId)"
|
|
|
+ :persentList="persentList"
|
|
|
+ ></floorTable>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <!-- 弹窗 开始-->
|
|
|
|
|
|
+ <!-- 模型日志弹窗 -->
|
|
|
+ <modelLog
|
|
|
+ :modelLogVisible="modelLogVisible"
|
|
|
+ @deleteFinish="updataLog"
|
|
|
+ @CloseModelLogDia="modelLogVisible=false"
|
|
|
+ :logData="logData"
|
|
|
+ ></modelLog>
|
|
|
+ <!-- 替换模型弹窗 -->
|
|
|
+ <repliceModel
|
|
|
+ :repliceModelVisible="repliceModelVisible"
|
|
|
+ @closeReplaceModelDia="repliceModelVisible=false"
|
|
|
+ :replaceModelItem="replaceModelItem"
|
|
|
+ @updataModel="updateModelFile"
|
|
|
+ ></repliceModel>
|
|
|
+ <!-- 新增楼层 -->
|
|
|
+ <addFloorDialog
|
|
|
+ :addFloorFileVisible="addFloorFileVisible"
|
|
|
+ :FolderName="currentFolderName"
|
|
|
+ :FolderId="currentFolderId"
|
|
|
+ @closeAddFloorDia="addFloorFileVisible=false"
|
|
|
+ @finishCreateFloor="uploadModelFIle"
|
|
|
+ ></addFloorDialog>
|
|
|
+ <!-- 新增文件夹名称 -->
|
|
|
+ <addFolder
|
|
|
+ :addFolderVisible="addFolderVisible"
|
|
|
+ @closeAddFolderVisible="addFolderVisible=false;folderName=''"
|
|
|
+ :folderName="folderName"
|
|
|
+ @getfolderModel="queryModel"
|
|
|
+ ></addFolder>
|
|
|
+ <!-- 编辑文件夹名字 -->
|
|
|
+ <changeFolderName
|
|
|
+ :currentFolderId="currentFolderId"
|
|
|
+ :changeFolderNameVisible="changeFolderNameVisible"
|
|
|
+ :folderName="folderName"
|
|
|
+ @finishChangeFolderName="queryModel"
|
|
|
+ @closeChangeFolderVisible="changeFolderNameVisible=false;folderName=''"
|
|
|
+ ></changeFolderName>
|
|
|
+ <!-- 弹窗 结束-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import request from "@/api/model/file.js";
|
|
|
+
|
|
|
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 changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
|
|
|
+import floorTable from "@/components/model/file/floorTable"; //右侧list表
|
|
|
export default {
|
|
|
- components: {
|
|
|
- dasBoard
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ dasBoard,
|
|
|
+ modelLog,
|
|
|
+ repliceModel,
|
|
|
+ addFloorDialog,
|
|
|
+ addFolder,
|
|
|
+ changeFolderName,
|
|
|
+ floorTable
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ addFolderVisible: false, //是否显示新增文件夹弹窗
|
|
|
+ addFloorFileVisible: false, //是否显示增加楼层文件弹窗
|
|
|
+ repliceModelVisible: false, //是否显示替换楼层模型弹窗
|
|
|
+ modelLogVisible: false, //是否显示模型日志弹窗
|
|
|
+ changeFolderNameVisible: false, //是否显示编辑文件夹弹窗
|
|
|
+ folderName: "", //新建文件夹名称
|
|
|
+ navigationModel: [
|
|
|
+ {
|
|
|
+ Name: ""
|
|
|
+ }
|
|
|
+ ], //文件夹模型list
|
|
|
+ choiceIndex: 0, //当前文件夹index
|
|
|
+ currentFolderId: "", //当前选择的文件夹id
|
|
|
+ currentFolderName: "", //当前选择文件夹的Name
|
|
|
+ currentFloorModelId: "", //当前选择的楼层文件id
|
|
|
+ tableData: [],
|
|
|
+ loading: false, //加载loading
|
|
|
+ logData: [], //楼层文件对应的模型日志
|
|
|
+ replaceModelItem: null, //替换文件的item
|
|
|
+ uploadFloorModelIdList: [], //上传楼层文件得数组,上传完成则为空
|
|
|
+ //请求头
|
|
|
+ headers: {
|
|
|
+ ProjectId: ""
|
|
|
+ },
|
|
|
+ updataData: {
|
|
|
+ model: {}
|
|
|
+ },
|
|
|
+ persentList: [], //请求进度列表
|
|
|
+ uploadClassList: [], //请求list 用与缓存多个请求问题
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 以下是模型文件夹
|
|
|
+
|
|
|
+ // 打开模型文件夹
|
|
|
+ openFolder(index, item) {
|
|
|
+ this.choiceIndex = index + 1;
|
|
|
+ this.currentFolderId = item.Id;
|
|
|
+ this.currentFolderName = item.Name;
|
|
|
+ // 获取模型文件夹对应得楼层文件
|
|
|
+ this.queryFloorFile(this.currentFolderId);
|
|
|
+ },
|
|
|
+ //新增模型文件夹
|
|
|
+ addFolder() {
|
|
|
+ this.folderName = "";
|
|
|
+ this.addFolderVisible = true;
|
|
|
+ },
|
|
|
+ //删除模型文件夹
|
|
|
+ removeFolder() {
|
|
|
+ this.$alert(`确定要删除文件夹 <${this.currentFolderName}> 吗?`, "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ callback: action => {
|
|
|
+ if (action == "confirm") {
|
|
|
+ let params = {
|
|
|
+ Id: this.currentFolderId,
|
|
|
+ ProjectId: this.projectId
|
|
|
+ };
|
|
|
+ request.deleteModel(params, res => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功!",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ this.queryModel();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: `取消操作`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //编辑文件夹
|
|
|
+ editFolder() {
|
|
|
+ this.folderName = this.currentFolderName;
|
|
|
+ this.changeFolderNameVisible = true;
|
|
|
+ },
|
|
|
+ // 查询所有文件夹模型
|
|
|
+ queryModel() {
|
|
|
+ this.loading = true;
|
|
|
+ request.queryModel("", res => {
|
|
|
+ this.navigationModel = res.Content;
|
|
|
+ //默认选择第一个文件夹
|
|
|
+ this.choiceIndex = 1;
|
|
|
+ this.currentFolderName = this.navigationModel[0].Name;
|
|
|
+ this.currentFolderId = this.navigationModel[0].Id;
|
|
|
+ this.loading = false;
|
|
|
+ this.queryFloorFile(this.currentFolderId);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ ///一下是楼层文件
|
|
|
+
|
|
|
+ //获取楼层文件
|
|
|
+ /**
|
|
|
+ * @param currentFolderId 当前选择得楼层id
|
|
|
+ */
|
|
|
+ queryFloorFile(currentFolderId) {
|
|
|
+ let data = {
|
|
|
+ FolderId: currentFolderId,
|
|
|
+ ProjectId: this.projectId
|
|
|
+ };
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ request.queryFloorList(data, res => {
|
|
|
+ res.Content.map(item => {
|
|
|
+ // 显示进度条:Status == 0 || null 正在上传 ;:Status == 1:等待检查;Status == 2:模型检查中; Status == 3 文件上传完成
|
|
|
+ if (item.Status == 3) {
|
|
|
+ Object.assign(item, { isDown: false, precent: 0 });
|
|
|
+ } else {
|
|
|
+ Object.assign(item, { isDown: true, precent: 100 });
|
|
|
+ if (this.persentList.length != 0) {
|
|
|
+ this.persentList.forEach(pItem => {
|
|
|
+ if (item.Id == pItem.Id) {
|
|
|
+ Object.assign(item, { isDown: true, precent: 0 });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tableData = res.Content;
|
|
|
+ this.loading = false;
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //添加楼层文件
|
|
|
+ addFloorFile() {
|
|
|
+ this.addFloorFileVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ //以下是文件模型
|
|
|
+
|
|
|
+ //打开替换文件模型
|
|
|
+ repliaceModel(item) {
|
|
|
+ this.replaceModelItem = item;
|
|
|
+ this.repliceModelVisible = true;
|
|
|
+ },
|
|
|
+ // 上传模型文件
|
|
|
+ uploadModelFIle(data) {
|
|
|
+ // 在列表中添加
|
|
|
+ this.persentList.push({
|
|
|
+ Id: data.FloorModelId,
|
|
|
+ precent: 0
|
|
|
+ });
|
|
|
+ let uploadClass = this.uploadClass();
|
|
|
+ this.uploadClassList.push({
|
|
|
+ obj: new uploadClass(data),
|
|
|
+ Id: data.FloorModelId
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传文件的类
|
|
|
+ uploadClass() {
|
|
|
+ let that = this;
|
|
|
+ return class {
|
|
|
+ constructor(data) {
|
|
|
+ this.upload(data);
|
|
|
+ }
|
|
|
+ upload(data) {
|
|
|
+ that.queryFloorFile(that.currentFolderId).then(() => {
|
|
|
+ // 开始上传文件
|
|
|
+ // 开始处理数据
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append(
|
|
|
+ "model",
|
|
|
+ JSON.stringify({
|
|
|
+ FloorModelId: data.FloorModelId,
|
|
|
+ Id: data.CurrentModelId
|
|
|
+ })
|
|
|
+ );
|
|
|
+ formData.append("file", data.Form.file.raw);
|
|
|
+ // 处理数据结束
|
|
|
+
|
|
|
+ // 修改isdown得值
|
|
|
+ that.tableData.map(item => {
|
|
|
+ if (item.Id == data.FloorModelId) {
|
|
|
+ item.isDown = true;
|
|
|
+ item.precent = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 开始上传
|
|
|
+ request.uploadModelFile(
|
|
|
+ formData,
|
|
|
+ that.projectId,
|
|
|
+ res => {
|
|
|
+ let loaded = res.loaded, //加载量
|
|
|
+ total = res.total; //文件大小
|
|
|
+ that.$nextTick(() => {
|
|
|
+ let precent = Math.round((loaded / total) * 100);
|
|
|
+ // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
|
|
|
+ if (that.persentList.length != 0) {
|
|
|
+ that.persentList.map(item => {
|
|
|
+ if (item.Id == data.FloorModelId) {
|
|
|
+ item.precent = precent;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ val => {
|
|
|
+ if (val.data.Result === "success") {
|
|
|
+ if (that.persentList.length != 0) {
|
|
|
+ that.persentList.forEach((item, index) => {
|
|
|
+ if (item.Id == data.FloorModelId) {
|
|
|
+ item.precent = 101;
|
|
|
+ that.persentList.splice(index, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.$message({
|
|
|
+ message: "文件上传成功",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (that.persentList.length != 0) {
|
|
|
+ that.persentList.forEach((item, index) => {
|
|
|
+ if (item.Id == data.FloorModelId) {
|
|
|
+ item.precent = 101;
|
|
|
+ that.persentList.splice(index, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.$message({
|
|
|
+ message: val.data.Message,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //更新模型文件;
|
|
|
+ updateModelFile(data) {
|
|
|
+ this.persentList.push({
|
|
|
+ Id: data.replaceModelItem.Id,
|
|
|
+ precent: 0
|
|
|
+ });
|
|
|
+ // 修改isdown得值
|
|
|
+ this.tableData.map(item => {
|
|
|
+ if (item.Id == data.replaceModelItem.Id) {
|
|
|
+ item.isDown = true;
|
|
|
+ item.precent = 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 开始上传
|
|
|
+ let updataclass = this.updateModelClass();
|
|
|
+ this.uploadClassList.push({
|
|
|
+ obj: new updataclass(data),
|
|
|
+ Id: data.replaceModelItem.Id
|
|
|
+ });
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- plan: "",
|
|
|
- finish: "",
|
|
|
- onLine: "",
|
|
|
- explain: "模型文件管理"
|
|
|
+ // 更新文件的类
|
|
|
+ updateModelClass() {
|
|
|
+ let that = this;
|
|
|
+ // 开始上传
|
|
|
+ return class {
|
|
|
+ constructor(data) {
|
|
|
+ this.upDateModel(data);
|
|
|
+ }
|
|
|
+ upDateModel(data) {
|
|
|
+ request.upDateModelFile(
|
|
|
+ data,
|
|
|
+ that.projectId,
|
|
|
+ that.userInfo.username,
|
|
|
+ res => {
|
|
|
+ let loaded = res.loaded, //加载量
|
|
|
+ total = res.total; //文件大小
|
|
|
+ that.$nextTick(() => {
|
|
|
+ let precent = Math.round((loaded / total) * 100);
|
|
|
+ // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
|
|
|
+ if (that.persentList.length != 0) {
|
|
|
+ that.persentList.map(item => {
|
|
|
+ if (item.Id == data.replaceModelItem.Id) {
|
|
|
+ item.precent = precent;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ val => {
|
|
|
+ if (val.data.Result === "success") {
|
|
|
+ if (that.persentList.length != 0) {
|
|
|
+ that.persentList.forEach((item, index) => {
|
|
|
+ if (item.Id == data.replaceModelItem.Id) {
|
|
|
+ item.precent = 101;
|
|
|
+ that.persentList.splice(index, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.$message({
|
|
|
+ message: "文件上传成功",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (that.persentList.length != 0) {
|
|
|
+ that.persentList.forEach((item, index) => {
|
|
|
+ if (item.Id == data.FloorModelId) {
|
|
|
+ item.precent = 101;
|
|
|
+ that.persentList.splice(index, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ that.$message({
|
|
|
+ message: val.data.Message,
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //查看模型日志
|
|
|
+ queryModelLog(item) {
|
|
|
+ this.FloorModelId = item.Id; //楼层模型文件
|
|
|
+ request.queryModelFile(this.FloorModelId, res => {
|
|
|
+ this.logData = res.Content;
|
|
|
+ this.modelLogVisible = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 刷新日志
|
|
|
+ updataLog() {
|
|
|
+ request.queryModelFile(this.FloorModelId, res => {
|
|
|
+ this.logData = res.Content;
|
|
|
+ });
|
|
|
},
|
|
|
- mounted() {}
|
|
|
+ // 删除上传列表item
|
|
|
+ removePersentList(item) {
|
|
|
+ this.uploadClassList.forEach((i, index) => {
|
|
|
+ if (item.Id == i.Id) {
|
|
|
+ this.$delete(this.uploadClassList, index);
|
|
|
+ // this.uploadClassList.splice(index,0)
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.persentList.forEach((i, index) => {
|
|
|
+ if (item.Id == i.Id) {
|
|
|
+ this.$delete(this.persentList, index);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.queryFloorFile(this.currentFolderId);
|
|
|
+ this.$message({
|
|
|
+ message: "中止上传!",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.queryModel();
|
|
|
+ // 十秒刷新次楼层列表
|
|
|
+ setInterval(()=>{
|
|
|
+ this.queryFloorFile(this.currentFolderId)
|
|
|
+ },10000)
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+#file_moddle_manage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden !important;
|
|
|
+ .col_left{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .grid-content{
|
|
|
+ height:100%;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ height:100%;
|
|
|
+ }
|
|
|
+ .grid-left {
|
|
|
+ padding-right: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ // 顶部
|
|
|
+ .top_hand {
|
|
|
+ height: 60px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .left_top_hand {
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .folder-box {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ .box-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 左侧文件夹列表
|
|
|
+ .folder-list {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ .head {
|
|
|
+ height: 42px;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #ccc;
|
|
|
+ color: #000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .lists {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ height: calc(100% - 52px);
|
|
|
+ overflow-y: auto;
|
|
|
+ li {
|
|
|
+ height: 42px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:hover {
|
|
|
+ background: rgb(240, 238, 238);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .li-active {
|
|
|
+ background: rgb(240, 238, 238);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon_font {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
-</script>
|
|
|
+</style>
|