| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\system\\maintain\\systemFile\\opendir.vue?vue&type=style&index=0&id=c61d0132&scoped=true&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\system\\maintain\\systemFile\\opendir.vue","mtime":1761614939077},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouZmlsZS1sZWZ0IDo6di1kZWVwIC5pdnUtdHJlZS10aXRsZSB7DQogIGZvbnQtd2VpZ2h0OiA1MDA7DQogIGZvbnQtZmFtaWx5OiBTb3VyY2VIYW5TYW5zU0MtcmVndWxhciwgJ+W+rui9r+mbhem7kScsIEFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWY7DQp9DQouZmlsZS1jb250ZW50IDo6di1kZWVwIC5pdnUtdGFicy5pdnUtdGFicy1jYXJkID4gLml2dS10YWJzLWJhciAuaXZ1LXRhYnMtdGFiLWFjdGl2ZSB7DQogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCBvcmFuZ2U7DQp9DQo="},{"version":3,"sources":["opendir.vue"],"names":[],"mappings":";AAq4BA;AACA;AACA;AACA;AACA;AACA;AACA","file":"opendir.vue","sourceRoot":"src/pages/system/maintain/systemFile","sourcesContent":["<template>\r\n <div>\r\n <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\" v-loading=\"spinShow\">\r\n <div v-if=\"isShowList\" class=\"backs-box\">\r\n <div class=\"backs\">\r\n <span class=\"back\" v-db-click @click=\"goBack(false)\">\r\n <i class=\"el-icon-back icon\" />\r\n </span>\r\n <span class=\"item\" v-for=\"(item, index) in routeList\" :key=\"index\" v-db-click @click=\"jumpRoute(item)\">\r\n <span class=\"key\">{{ item.key }}</span>\r\n <i class=\"forward el-icon-arrow-right\" v-if=\"index < routeList.length - 1\" />\r\n </span>\r\n </div>\r\n <span class=\"refresh\" v-db-click @click=\"refreshRoute\">\r\n <i class=\"el-icon-refresh-right icon\" />\r\n </span>\r\n </div>\r\n <el-table\r\n v-if=\"isShowList\"\r\n ref=\"selection\"\r\n :data=\"tabList\"\r\n v-loading=\"loading\"\r\n empty-text=\"暂无数据\"\r\n class=\"mt14\"\r\n >\r\n <el-table-column label=\"文件/文件夹名\" min-width=\"150\">\r\n <template slot-scope=\"scope\">\r\n <div class=\"file-name\" v-db-click @click=\"currentChange(scope.row)\">\r\n <i v-if=\"scope.row.isDir\" class=\"el-icon-folder mr5\" />\r\n <i v-else class=\"el-icon-document mr5\" />\r\n <span>{{ scope.row.filename }}</span>\r\n </div>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"文件/文件夹大小\" min-width=\"100\">\r\n <template slot-scope=\"scope\">\r\n <span>{{ scope.row.size }}</span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"更新时间\" min-width=\"100\">\r\n <template slot-scope=\"scope\">\r\n <span>{{ scope.row.mtime }}</span>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"备注\" min-width=\"120\">\r\n <template slot-scope=\"scope\">\r\n <div class=\"mark\">\r\n <div v-if=\"scope.row.is_edit\" class=\"table-mark\" v-db-click @click=\"isEditMark(scope.row)\">\r\n {{ scope.row.mark }}\r\n </div>\r\n <el-input ref=\"mark\" v-else v-model=\"scope.row.mark\" @blur=\"isEditBlur(scope.row)\"></el-input>\r\n </div>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"操作\" fixed=\"right\" width=\"60\">\r\n <template slot-scope=\"scope\">\r\n <el-button type=\"text\" v-db-click @click=\"open(scope.row)\" v-if=\"scope.row.isDir\">打开</el-button>\r\n <el-button type=\"text\" v-db-click @click=\"edit(scope.row)\" v-else>编辑</el-button>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n </el-card>\r\n <el-dialog\r\n :visible.sync=\"modals\"\r\n :custom-class=\"className\"\r\n :close-on-click-modal=\"false\"\r\n width=\"80%\"\r\n top=\"5vh\"\r\n @close=\"editModalChange\"\r\n append-to-body\r\n :title=\"editorIndex[indexEditor].title\"\r\n >\r\n <p slot=\"header\" class=\"diy-header\" ref=\"diyHeader\">\r\n <span>{{ title }}</span>\r\n <i\r\n v-db-click\r\n @click=\"winChanges\"\r\n class=\"diy-header-icon\"\r\n :class=\"className ? 'el-icon-cpu' : 'el-icon-full-screen'\"\r\n style=\"font-size: 20px\"\r\n />\r\n </p>\r\n <div style=\"height: 100%\">\r\n <div class=\"top-button\">\r\n <el-button type=\"primary\" id=\"savefile\" class=\"diy-button\" v-db-click @click=\"savefile(indexEditor)\"\r\n >保存</el-button\r\n >\r\n <el-button id=\"refresh\" class=\"diy-button\" v-db-click @click=\"refreshfile\">刷新</el-button>\r\n </div>\r\n <div class=\"file-box\">\r\n <div class=\"show-info\">\r\n <div class=\"show-text\" :title=\"navItem.pathname\">目录: {{ navItem.pathname }}</div>\r\n <div class=\"diy-button-list\">\r\n <el-button class=\"diy-button\" v-db-click @click=\"goBack(true)\">返回上一级</el-button>\r\n <el-button class=\"diy-button\" v-db-click @click=\"getList(true, true)\">刷新</el-button>\r\n </div>\r\n </div>\r\n <div class=\"file-left\">\r\n <el-tree\r\n class=\"diy-tree-render\"\r\n :data=\"navList\"\r\n :render-content=\"renderContent\"\r\n :load=\"loadData\"\r\n @node-contextmenu=\"handleContextMenu\"\r\n expand-node\r\n lazy\r\n :props=\"props\"\r\n >\r\n <!-- <template transfer slot=\"contextMenu\">\r\n <DropdownItem v-if=\"contextData && contextData.isDir\" v-db-click @click.native=\"handleContextCreateFolder()\"\r\n >新建文件夹</DropdownItem\r\n >\r\n <DropdownItem v-if=\"contextData && contextData.isDir\" v-db-click @click.native=\"handleContextCreateFile()\"\r\n >新建文件</DropdownItem\r\n >\r\n <DropdownItem v-db-click @click.native=\"handleContextRename()\">重命名</DropdownItem>\r\n <DropdownItem v-db-click @click.native=\"handleContextDelFolder()\" style=\"color: #ed4014\">删除</DropdownItem>\r\n </template> -->\r\n </el-tree>\r\n </div>\r\n <div class=\"file-fix\"></div>\r\n <div class=\"file-content\">\r\n <el-tabs\r\n type=\"card\"\r\n v-model=\"indexEditor\"\r\n style=\"height: 100%\"\r\n @tab-click=\"toggleEditor\"\r\n :animated=\"false\"\r\n closable\r\n @tab-remove=\"handleTabRemove\"\r\n >\r\n <el-tab-pane\r\n v-for=\"value in editorIndex\"\r\n :key=\"value.index\"\r\n :name=\"value.index.toString()\"\r\n :label=\"value.title\"\r\n :icon=\"value.icon\"\r\n v-if=\"value.tab\"\r\n >\r\n <div\r\n ref=\"container\"\r\n :id=\"'container_' + value.index\"\r\n style=\"height: 100%; min-height: calc(80vh - 100px)\"\r\n ></div>\r\n </el-tab-pane>\r\n </el-tabs>\r\n </div>\r\n </div>\r\n </div>\r\n </el-dialog>\r\n\r\n <div v-show=\"formShow\" class=\"diy-from\">\r\n <div class=\"diy-from-header\">\r\n {{ formTitle\r\n }}<span :title=\"contextData ? contextData.pathname : ''\">{{ contextData ? contextData.pathname : '' }}</span>\r\n </div>\r\n <el-form ref=\"formInline\" :model=\"formFile\" :rules=\"ruleInline\" inline>\r\n <el-form-item prop=\"filename\" class=\"diy-file\">\r\n <el-input type=\"text\" class=\"diy-file\" v-model=\"formFile.filename\" placeholder=\"请输入名字\">\r\n <i class=\"el-icon-folder-opened\" slot=\"prepend\"></i>\r\n </el-input>\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button class=\"diy-button\" v-db-click @click=\"handleSubmit('formInline')\">确定</el-button>\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button class=\"diy-button\" v-db-click @click=\"formExit()\">取消</el-button>\r\n </el-form-item>\r\n <div class=\"form-mask\" v-show=\"formShow\"></div>\r\n </el-form>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { resolveComponent } from 'vue';\r\nimport {\r\n opendirListApi,\r\n openfileApi,\r\n savefileApi,\r\n opendirLoginApi,\r\n createFolder,\r\n createFile,\r\n delFolder,\r\n rename,\r\n fileMark,\r\n markSave,\r\n} from '@/api/system';\r\nimport CodeMirror from 'codemirror/lib/codemirror';\r\nimport loginFrom from './components/loginFrom';\r\nimport { setCookies, getCookies, removeCookies } from '@/libs/util';\r\n// import Fullscreen from '@/layout/components/fullscreen';\r\nimport * as monaco from 'monaco-editor';\r\nexport default {\r\n name: 'opendir',\r\n data() {\r\n return {\r\n modals: false, //编辑器开关\r\n editor: '', //当前编辑器对象\r\n editorIndex: [\r\n //选项卡数组\r\n {\r\n tab: true,\r\n index: '0',\r\n title: '',\r\n icon: '',\r\n },\r\n ],\r\n editorList: [], //编辑器数组\r\n indexEditor: 0, //当前编辑器索引\r\n code: '', //当前文件打开时的内容\r\n navList: [], //左侧导航数据\r\n navItem: {}, //左侧导航点击是选中的数据\r\n contextData: null, //左侧导航右键点击是产生的数据对象\r\n\r\n fileType: '', // 文件操作类型 createFolder|创建文件夹 createFile|创建文件 delFolder|删除文件夹或者文件\r\n className: '', //全屏 class名\r\n // fullscreen:false, // 是否全屏\r\n isSave: true, //当前文件是否保存\r\n\r\n isShowLogn: false, // 登录\r\n isShowList: false, // 登录之后列表\r\n\r\n spinShow: false,\r\n loading: false,\r\n tabList: [],\r\n\r\n formItem: {\r\n //记录当前路径信息，获取文件列表时使用\r\n dir: '',\r\n superior: 0,\r\n filedir: '',\r\n fileToken: getCookies('file_token'),\r\n },\r\n dir: '', //当前完整文件路径\r\n // rows: {}, //\r\n pathname: '', // 当前文件路径\r\n title: '', //当前文件标题\r\n\r\n formFile: {\r\n //重命名表单\r\n filename: '',\r\n },\r\n ruleInline: {\r\n filename: [{ required: true, message: '请输入文件或文件夹的名字', trigger: 'blur' }],\r\n },\r\n formShow: false, //表单开关\r\n formTitle: '', //表单标题\r\n fileToken: getCookies('file_token'),\r\n routeList: [], // 打开文件路径\r\n props: {\r\n label: 'title',\r\n children: 'children',\r\n isLeaf: 'isLeaf',\r\n },\r\n };\r\n },\r\n\r\n components: {\r\n loginFrom,\r\n },\r\n mounted() {\r\n // this.initEditor();\r\n },\r\n created() {\r\n this.getList();\r\n },\r\n beforeDestroy() {\r\n removeCookies('file_token');\r\n },\r\n computed: {},\r\n methods: {\r\n // 点击行\r\n currentChange(currentRow) {\r\n if (currentRow.isDir) {\r\n this.open(currentRow);\r\n } else {\r\n this.edit(currentRow);\r\n }\r\n },\r\n /**\r\n * 文件列表\r\n * @param {Object} refresh // 是否重新加载 bool\r\n * @param {Object} is_edit // 是否是编辑器中的刷新 bool\r\n */\r\n getList(refresh, is_edit) {\r\n let params;\r\n if (refresh) {\r\n params = {\r\n dir: '',\r\n superior: 0,\r\n filedir: '',\r\n fileToken: this.fileToken,\r\n };\r\n } else {\r\n params = this.formItem;\r\n params.fileToken = this.fileToken;\r\n }\r\n if (!is_edit) this.loading = true;\r\n opendirListApi(params)\r\n .then(async (res) => {\r\n let data = res.data;\r\n this.routeList = data.routeList;\r\n\r\n if (is_edit) {\r\n this.navList = data.navList;\r\n } else {\r\n this.navListForTab = data.navList;\r\n this.tabList = data.list;\r\n // this.navList = data.navList;\r\n this.isShowList = true;\r\n }\r\n this.dir = data.dir;\r\n this.isShowLogn = false;\r\n this.loading = false;\r\n })\r\n .catch((res) => {\r\n this.catchFun(res);\r\n });\r\n },\r\n //新建文件后重新加载左侧导航\r\n getListItem(data) {\r\n opendirListApi(data)\r\n .then(async (res) => {\r\n this.$set(this.contextData, 'children', res.data.navList);\r\n })\r\n .catch((res) => {\r\n this.catchFun(res);\r\n });\r\n },\r\n\r\n // 返回上级\r\n goBack(is_edit) {\r\n this.formItem = {\r\n dir: this.dir,\r\n superior: 1,\r\n filedir: '',\r\n };\r\n this.getList(false, is_edit);\r\n },\r\n // 打开\r\n open(row) {\r\n // this.rows = row;\r\n this.formItem = {\r\n dir: row.path,\r\n superior: 0,\r\n filedir: row.filename,\r\n fileToken: this.fileToken,\r\n };\r\n this.getList(false, false);\r\n },\r\n jumpRoute(item) {\r\n let data = {\r\n path: item.route,\r\n filename: '',\r\n };\r\n this.open(data);\r\n },\r\n refreshRoute() {\r\n let data = {\r\n path: this.routeList[this.routeList.length - 1].route,\r\n filename: '',\r\n };\r\n this.open(data);\r\n },\r\n // 编辑ß\r\n edit(row) {\r\n this.navItem = row;\r\n this.spinShow = true;\r\n this.pathname = row.pathname;\r\n this.title = row.filename;\r\n this.editorIndex[0].title = row.filename;\r\n this.editorIndex[0].pathname = row.pathname;\r\n this.navList = this.navListForTab;\r\n this.dir = row.path;\r\n // 创建代码容器\r\n if (this.editorList.length <= 0) {\r\n // this.initEditor();\r\n }\r\n this.openfile(row.pathname, false);\r\n },\r\n /**\r\n * 备注\r\n */\r\n mark(row) {\r\n this.$modalForm(\r\n fileMark({\r\n path: row.pathname,\r\n fileToken: this.fileToken,\r\n }),\r\n ).then(() => this.getList(true, false));\r\n },\r\n /**\r\n * 保存\r\n * @param {Object} index // 当前索引\r\n * @param {Object} type // true 不更新当前本地数据，false或者为空 更新当前数据\r\n */\r\n savefile(index, type) {\r\n let code = this.editorList[index].editor.getValue();\r\n let data = {\r\n comment: code,\r\n filepath: this.editorList[index].path,\r\n fileToken: this.fileToken,\r\n };\r\n let that = this;\r\n savefileApi(data)\r\n .then(async (res) => {\r\n if (!type) {\r\n that.code = code;\r\n that.isSave = true;\r\n that.editorIndex[index].icon = '';\r\n that.editorList[index].isSave = true;\r\n }\r\n that.$message.success(res.msg);\r\n that.$Modal.remove();\r\n })\r\n .catch((res) => {\r\n that.catchFun(res);\r\n });\r\n },\r\n // 刷新\r\n refreshfile() {\r\n // 刷新编辑器\r\n if (this.editorList[this.indexEditor]) this.openfile(this.editorList[this.indexEditor].path, true);\r\n },\r\n //计算token过期时间\r\n getExpiresTime(expiresTime) {\r\n let nowTimeNum = Math.round(new Date() / 1000);\r\n let expiresTimeNum = expiresTime - nowTimeNum;\r\n return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);\r\n },\r\n // 侧边栏异步加载\r\n loadData(item, callback) {\r\n if (!item.data.isLeaf) {\r\n this.formItem = {\r\n dir: item.data.path,\r\n superior: 0,\r\n filedir: item.data.title,\r\n fileToken: this.fileToken,\r\n };\r\n opendirListApi(this.formItem)\r\n .then(async (res) => {\r\n callback(res.data.navList);\r\n })\r\n .catch((res) => {\r\n if (res.status == 110008) {\r\n this.$message.error(res.msg);\r\n this.isShowLogn = true;\r\n this.isShowList = false;\r\n this.loading = false;\r\n } else {\r\n this.catchFun(res);\r\n }\r\n });\r\n }\r\n },\r\n // 自定义显示\r\n renderContent(h, { node, data, root }) {\r\n let that = this;\r\n return h(\r\n 'span',\r\n {\r\n style: {\r\n display: 'inline-block',\r\n cursor: 'pointer',\r\n userSelect: 'null',\r\n color: '#cccccc',\r\n display: 'inline-block',\r\n width: '100%',\r\n borderRadis: '5px',\r\n },\r\n on: {\r\n click: () => {\r\n that.clickDir(data, root, node);\r\n },\r\n contextmenu: () => {\r\n // that.handleContextDelFolder(data,root,node);\r\n },\r\n },\r\n },\r\n [\r\n h('span', [\r\n h('Icon', {\r\n props: {\r\n type: !data.isLeaf ? 'md-folder' : 'ios-document-outline',\r\n },\r\n style: {\r\n marginRight: '8px',\r\n },\r\n }),\r\n h(\r\n 'span',\r\n {\r\n attrs: {\r\n title: data.title,\r\n },\r\n },\r\n data.title,\r\n ),\r\n ]),\r\n ],\r\n );\r\n },\r\n /**\r\n * 侧边栏点击事件\r\n * @param {Object} data\r\n */\r\n clickDir(data, root, node) {\r\n let that = this;\r\n that.navItem = data;\r\n that.pathname = data.pathname;\r\n\r\n if (!data.isDir) {\r\n let i = that.editorIndex.findIndex((e) => {\r\n return e.pathname === data.pathname;\r\n });\r\n if (i > -1) {\r\n that.indexEditor = i.toString();\r\n that.toggleEditor();\r\n } else {\r\n let index = that.editorIndex.length;\r\n // 创建tabs\r\n that.editorIndex.push({\r\n tab: true,\r\n index: index.toString(),\r\n title: data.title,\r\n icon: '',\r\n pathname: data.pathname,\r\n });\r\n that.indexEditor = index.toString();\r\n // 创建代码容器\r\n that.initEditor();\r\n that.openfile(data.pathname, true);\r\n }\r\n }\r\n },\r\n //侧边栏右键点击事件\r\n handleContextMenu(data, event, position) {\r\n position.left = Number(position.left.slice(0, -2)) + 75 + 'px';\r\n this.contextData = data;\r\n },\r\n // 文件操作类型 createFolder|创建文件夹 createFile|创建文件 delFolder|删除文件夹或者文件 renameFile|文件重命名\r\n //创建文件夹\r\n handleContextCreateFolder() {\r\n this.formFile.filename = '';\r\n this.formTitle = '创建文件夹';\r\n this.formShow = true;\r\n this.fileType = 'createFolder';\r\n },\r\n //创建文件\r\n handleContextCreateFile() {\r\n this.formFile.filename = '';\r\n this.formTitle = '创建文件';\r\n this.formShow = true;\r\n this.fileType = 'createFile';\r\n },\r\n //删除文件\r\n handleContextDelFolder() {\r\n let that = this;\r\n that.$Modal.confirm({\r\n title: '删除文件夹和文件',\r\n content: '您确定要删除改文件？',\r\n loading: true,\r\n onOk: () => {\r\n let data = {\r\n path: that.contextData.pathname,\r\n fileToken: this.fileToken,\r\n };\r\n delFolder(data)\r\n .then(async (res) => {\r\n that.loopDel(that.navList, that.contextData.nodeKey);\r\n that.$Modal.remove();\r\n that.$message.success('删除成功');\r\n })\r\n .catch((res) => {\r\n that.catchFun(res);\r\n });\r\n },\r\n onCancel: () => {\r\n that.$message.info('取消删除');\r\n },\r\n });\r\n },\r\n //重命名\r\n handleContextRename() {\r\n this.formFile.filename = this.contextData.title;\r\n this.formTitle = '重命名文件';\r\n this.formShow = true;\r\n this.fileType = 'renameFile';\r\n },\r\n //打开文件\r\n openfile(path, is_edit) {\r\n let that = this;\r\n let params = {\r\n filepath: path,\r\n fileToken: this.fileToken,\r\n };\r\n\r\n openfileApi(params)\r\n .then(async (res) => {\r\n if (!is_edit) {\r\n that.modals = true;\r\n that.spinShow = false;\r\n this.initEditor();\r\n }\r\n let data = res.data;\r\n that.code = data.content;\r\n // 保存相对信息\r\n\r\n that.editorList[that.indexEditor].oldCode = that.code;\r\n this.$nextTick((e) => {\r\n that.editorList[that.indexEditor || 0].path = path;\r\n that.editorList[that.indexEditor || 0].pathname = path;\r\n });\r\n //改变属性\r\n that.changeModel(data.mode, that.code);\r\n })\r\n .catch((res) => {\r\n that.catchFun(res);\r\n });\r\n },\r\n /**\r\n * 初始化编辑器\r\n */\r\n initEditor() {\r\n let that = this;\r\n that.$nextTick(() => {\r\n // 初始化编辑器，确保dom已经渲染\r\n that.editor = monaco.editor.create(document.getElementById('container_' + that.indexEditor), {\r\n value: that.code, //编辑器初始显示文字\r\n language: 'sql', //语言支持自行查阅demo\r\n automaticLayout: true, //自动布局\r\n theme: 'vs', //官方自带三种主题vs, hc-black, or vs-dark\r\n foldingStrategy: 'indentation', // 代码可分小段折叠\r\n overviewRulerBorder: false, // 不要滚动条的边框\r\n scrollbar: {\r\n // 滚动条设置\r\n verticalScrollbarSize: 4, // 竖滚动条\r\n horizontalScrollbarSize: 10, // 横滚动条\r\n },\r\n autoIndent: true, // 自动布局\r\n tabSize: 4, // tab缩进长度\r\n autoClosingOvertype: 'always',\r\n });\r\n //添加按键监听\r\n that.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {\r\n that.savefile(that.indexEditor);\r\n });\r\n that.editor.onKeyUp(() => {\r\n // 当键盘按下，判断当前编辑器文本与已保存的编辑器文本是否一致\r\n if (that.editor.getValue() != that.code) {\r\n that.isSave = false;\r\n that.editorIndex[that.indexEditor].icon = 'md-warning';\r\n that.editorList[that.indexEditor].isSave = false;\r\n }\r\n });\r\n that.editorList.push({\r\n editor: that.editor,\r\n oldCode: that.code,\r\n path: this.pathname,\r\n isSave: true,\r\n index: that.indexEditor,\r\n });\r\n });\r\n },\r\n /**\r\n * 切换语言\r\n * @param {Object} mode\r\n */\r\n changeModel(mode, value) {\r\n var oldModel = this.editorList[this.indexEditor].editor.getModel(); //获取旧模型\r\n // var value = this.editor.getValue();//获取旧的文本\r\n //创建新模型，value为旧文本，id为modeId，即语言（language.id）\r\n //modesIds即为支持语言\r\n // var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });\r\n if (!mode) mode = oldModel.getLanguageId();\r\n // if(!value) value = this.editor.getValue();\r\n\r\n var newModel = monaco.editor.createModel(value, mode);\r\n //将旧模型销毁\r\n if (oldModel) {\r\n oldModel.dispose();\r\n }\r\n //设置新模型\r\n this.editorList[this.indexEditor].editor.setModel(newModel);\r\n },\r\n // 文件操作类型 createFolder|创建文件夹 createFile|创建文件 delFolder|删除文件夹或者文件\r\n handleSubmit(name) {\r\n let that = this;\r\n let data = '';\r\n let dataItem = '';\r\n this.$refs[name].validate((valid) => {\r\n if (valid) {\r\n switch (that.fileType) {\r\n case 'createFolder':\r\n data = {\r\n path: that.contextData.pathname,\r\n name: that.formFile.filename,\r\n fileToken: this.fileToken,\r\n };\r\n createFolder(data)\r\n .then(async (res) => {\r\n dataItem = {\r\n dir: that.contextData.path,\r\n superior: 0,\r\n filedir: that.contextData.title,\r\n fileToken: this.fileToken,\r\n };\r\n that.getListItem(dataItem);\r\n if (that.formShow) that.formShow = false;\r\n that.$message.success('创建成功');\r\n })\r\n .catch((res) => {\r\n that.catchFun(res);\r\n });\r\n break;\r\n case 'createFile':\r\n data = {\r\n path: that.contextData.pathname,\r\n name: that.formFile.filename,\r\n fileToken: this.fileToken,\r\n };\r\n createFile(data)\r\n .then(async (res) => {\r\n dataItem = {\r\n dir: that.contextData.path,\r\n superior: 0,\r\n filedir: that.contextData.title,\r\n fileToken: this.fileToken,\r\n };\r\n that.getListItem(dataItem);\r\n if (that.formShow) that.formShow = false;\r\n that.$message.success('创建成功');\r\n })\r\n .catch((res) => {\r\n that.catchFun(res);\r\n });\r\n break;\r\n case 'renameFile':\r\n data = {\r\n newname: that.contextData.path + '\\\\' + that.formFile.filename,\r\n oldname: that.contextData.pathname,\r\n fileToken: this.fileToken,\r\n };\r\n rename(data)\r\n .then(async (res) => {\r\n that.$set(that.contextData, 'title', that.formFile.filename);\r\n that.$message.success('修改成功');\r\n if (that.formShow) that.formShow = false;\r\n })\r\n .catch((res) => {\r\n that.catchFun(res);\r\n });\r\n break;\r\n }\r\n } else {\r\n this.$message.error('Fail!');\r\n }\r\n });\r\n },\r\n /**\r\n * 退出表单\r\n */\r\n formExit() {\r\n this.formShow = false;\r\n },\r\n\r\n /**\r\n * 处理接口回调\r\n * @param {Object} res\r\n */\r\n catchFun(res) {\r\n if (res.status) {\r\n if (res.status == 400) this.$message.error(res.msg);\r\n if (res.status == 110008) {\r\n // this.$message.error(res.msg);\r\n this.isShowLogn = true;\r\n this.isShowList = false;\r\n this.loading = false;\r\n }\r\n } else {\r\n // this.$message.error('文件编码不被兼容，无法正确读取文件!');\r\n }\r\n //关闭蒙版层\r\n if (this.spinShow) this.spinShow = false;\r\n // 关闭文件列表展示\r\n if (this.loading) this.loading = false;\r\n },\r\n loopDel(data, nodeKey) {\r\n data.forEach((item, index) => {\r\n if (item.nodeKey === nodeKey) {\r\n return data.splice(index, 1);\r\n }\r\n if (item.children.length > 0) {\r\n return this.loopDel(item.children, nodeKey);\r\n }\r\n });\r\n },\r\n /**\r\n * 窗口最大化\r\n */\r\n winChanges() {\r\n if (this.className) {\r\n this.className = '';\r\n } else {\r\n this.className = 'diy-fullscreen';\r\n }\r\n },\r\n /**\r\n * 切换选项卡\r\n * @param {Object} index\r\n */\r\n toggleEditor() {\r\n let index = Number(this.indexEditor);\r\n this.code = this.editorList[index].oldCode; //设置文件打开时的代码\r\n this.editor = this.editorList[index].editor; //设置编辑器实例\r\n },\r\n isEditMark(row) {\r\n try {\r\n row.is_edit = true;\r\n this.$nextTick((e) => {\r\n this.$refs.mark.focus();\r\n });\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n },\r\n isEditBlur(row) {\r\n row.is_edit = false;\r\n let data = {\r\n full_path: row.real_path,\r\n mark: row.mark,\r\n };\r\n markSave(this.fileToken, data)\r\n .then((res) => {\r\n // this.$message.success(res.msg);\r\n })\r\n .catch((err) => {\r\n this.$message.error(err.msg);\r\n });\r\n },\r\n handleTabRemove(index) {\r\n let that = this;\r\n\r\n // 关闭选项卡\r\n that.editorIndex[index].tab = false; // 关闭选项卡\r\n // 判断当前文件有没有保存\r\n if (!that.editorList[index].isSave) {\r\n that.$Modal.confirm({\r\n title: '文件未保存',\r\n content: '您是否需要保存当前文件',\r\n loading: true,\r\n onOk: () => {\r\n // 保存文件\r\n that.savefile(index);\r\n },\r\n onCancel: () => {\r\n that.$message.info('取消保存');\r\n },\r\n });\r\n }\r\n },\r\n //编辑器状态变化\r\n editModalChange() {\r\n let that = this;\r\n that.editorList.forEach(function (value, index) {\r\n if (value.isSave === false) {\r\n if (confirm(`${that.editorIndex[index].title}文件未保存,是否要保存该文件`)) {\r\n // 保存当前文件\r\n that.savefile(index, true);\r\n } else {\r\n that.$message.info(`已取消${that.editorIndex[index].title}文件保存`);\r\n }\r\n }\r\n // 销毁当前编辑器\r\n that.editorList[index].editor.dispose();\r\n that.editorList[index].editor = null;\r\n });\r\n // 初始话数据\r\n that.modals = false; //编辑器开关\r\n that.editor = ''; //当前编辑器对象\r\n that.editorIndex = [\r\n //选项卡数组\r\n {\r\n tab: true,\r\n index: '0',\r\n title: '',\r\n icon: '',\r\n },\r\n ];\r\n that.editorList = []; //编辑器数组\r\n that.indexEditor = '0'; //当前编辑器索引\r\n that.code = ''; //当前文件打开时的内容\r\n that.navList = []; //左侧导航数据\r\n that.navItem = {}; //左侧导航点击是选中的数据\r\n that.contextData = null; //左侧导航右键点击是产生的数据对象\r\n },\r\n },\r\n};\r\n</script>\r\n<style scoped>\r\n.file-left ::v-deep .ivu-tree-title {\r\n font-weight: 500;\r\n font-family: SourceHanSansSC-regular, '微软雅黑', Arial, Helvetica, sans-serif;\r\n}\r\n.file-content ::v-deep .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {\r\n border-bottom: 1px solid orange;\r\n}\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.file-left {\r\n padding-left: 10px;\r\n color: #cccccc;\r\n}\r\n.mr5 {\r\n margin-right: 5px;\r\n}\r\n.backs-box {\r\n display: flex;\r\n justify-content: space-between;\r\n min-width: 800px;\r\n max-width: max-content;\r\n border: 1px solid #cfcfcf;\r\n background: #f6f6f6;\r\n .refresh {\r\n background: #fff;\r\n border-left: 1px solid #cfcfcf;\r\n padding: 0 8px 0 10px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n }\r\n .refresh {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n }\r\n .refresh:hover,\r\n .back:hover {\r\n background: #2d8cf0;\r\n border-color: #38983b;\r\n color: #fff;\r\n }\r\n}\r\n.file-name {\r\n cursor: pointer;\r\n}\r\n.backs {\r\n cursor: pointer;\r\n display: inline-block;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n .back {\r\n height: 100%;\r\n background: #fff;\r\n border-right: 1px solid #cfcfcf;\r\n padding: 6px 8px 0 10px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n }\r\n .item:last-child {\r\n padding-right: 5px !important;\r\n }\r\n .item {\r\n padding: 0 0 0 8px;\r\n font-size: 12px;\r\n line-height: 33px;\r\n color: #555;\r\n display: flex;\r\n align-items: center;\r\n .key {\r\n margin-right: 3px;\r\n }\r\n }\r\n .item:hover {\r\n background: #fff;\r\n }\r\n}\r\n::v-deep .CodeMirror {\r\n height: 70vh !important;\r\n}\r\n.file-box {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n position: relative;\r\n min-height: calc(100% - 35px);\r\n overflow: hidden;\r\n}\r\n.file-box {\r\n .file-left {\r\n position: absolute;\r\n top: 58px;\r\n left: 0;\r\n height: calc(100% - 58px);\r\n\r\n width: 25%;\r\n max-width: 250px;\r\n overflow: auto;\r\n background-color: #292929;\r\n }\r\n .file-fix {\r\n flex: 1;\r\n max-width: 250px;\r\n min-height: calc(100% - 35px);\r\n\r\n min-height: calc(100% - 35px);\r\n background-color: #292929;\r\n }\r\n}\r\n.file-box {\r\n .file-content {\r\n flex: 3;\r\n overflow: hidden;\r\n min-height: calc(100% - 35px);\r\n height: 100%;\r\n }\r\n}\r\n::v-deep .el-dialog__body {\r\n padding: 0 !important;\r\n height: 80vh;\r\n max-height: 80vh;\r\n}\r\n.diy-button {\r\n height: 35px;\r\n padding: 0 15px;\r\n font-size: 13px;\r\n text-align: center;\r\n color: #fff;\r\n border: 0;\r\n border-right: 1px solid #4c4c4c;\r\n cursor: pointer;\r\n border-radius: 0;\r\n background-color: #565656;\r\n}\r\n.form-mask {\r\n z-index: -1;\r\n width: 100%;\r\n height: 100%;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n margin: auto;\r\n background: rgba(0, 0, 0, 0.3);\r\n}\r\n.table-mark {\r\n cursor: text;\r\n}\r\n.table-mark:hover {\r\n border: 1px solid #c2c2c2;\r\n padding: 3px 5px;\r\n}\r\n.mark ::v-deep .el-input__inner {\r\n background: #fff;\r\n border-radius: 0.39rem;\r\n}\r\n.mark ::v-deep .el-input__inner,\r\n.el-input__inner:hover,\r\n.el-input__inner:focus {\r\n border: transparent;\r\n box-shadow: none;\r\n}\r\n.diy-from-header {\r\n height: 30px;\r\n line-height: 30px;\r\n background-color: #fff;\r\n text-align: left;\r\n padding-left: 20px;\r\n font-size: 16px;\r\n margin-bottom: 15px;\r\n\r\n span {\r\n display: inline-block;\r\n float: right;\r\n color: #999;\r\n text-align: right;\r\n font-size: 12px;\r\n width: 280px;\r\n word-break: keep-all; /* 不换行 */\r\n white-space: nowrap; /* 不换行 */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n}\r\n.diy-from {\r\n z-index: 9999;\r\n width: 400px;\r\n height: 100px;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n margin: auto;\r\n text-align: center;\r\n background-color: #2f2f2f;\r\n}\r\n.top-button {\r\n background-color: #292929;\r\n}\r\n.show-info {\r\n background-color: #292929;\r\n color: #fff;\r\n width: 25%;\r\n max-width: 250px;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 1122;\r\n .diy-button {\r\n width: 50%;\r\n height: 25px;\r\n line-height: 8px;\r\n }\r\n .diy-button-list {\r\n display: flex;\r\n align-items: center;\r\n }\r\n .show-text {\r\n padding-left: 10px;\r\n word-break: keep-all; /* 不换行 */\r\n white-space: nowrap; /* 不换行 */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n padding: 7px 5px;\r\n }\r\n}\r\n\r\nbody ::v-deep .ivu-select-dropdown {\r\n background: #fff;\r\n}\r\n::v-deep .el-tabs__item {\r\n background-color: #fff;\r\n}\r\n::v-deep .el-tree {\r\n background-color: #292929 !important;\r\n}\r\n.file-box {\r\n .file-left::-webkit-scrollbar {\r\n width: 4px;\r\n }\r\n}\r\n.file-box {\r\n .file-left::-webkit-scrollbar-thumb {\r\n border-radius: 10px;\r\n -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);\r\n background: rgba(255, 255, 255, 0.2);\r\n }\r\n}\r\n.file-box {\r\n .file-left::-webkit-scrollbar-track {\r\n -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);\r\n border-radius: 0;\r\n background: rgba(0, 0, 0, 0.1);\r\n }\r\n}\r\n.diy-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n .diy-header-icon {\r\n margin-right: 30px;\r\n cursor: pointer;\r\n }\r\n .diy-header-icon:hover {\r\n opacity: 0.8;\r\n }\r\n}\r\n::v-deep .diy-fullscreen {\r\n overflow: hidden;\r\n .ivu-modal {\r\n top: 0px;\r\n left: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n height: 100%;\r\n width: 100% !important;\r\n .ivu-modal-content {\r\n height: 100%;\r\n .ivu-modal-body {\r\n height: 100%;\r\n }\r\n }\r\n .ivu-tabs {\r\n .ivu-tabs-content-animated {\r\n height: 92%;\r\n background-color: #2f2f2f !important;\r\n }\r\n }\r\n .ivu-tabs-content {\r\n height: 100%;\r\n }\r\n .ivu-tabs {\r\n .ivu-tabs-tabpane {\r\n height: 92%;\r\n }\r\n }\r\n }\r\n}\r\n::v-deep .ivu-modal {\r\n top: 70px;\r\n}\r\n.ivu-modal-content {\r\n .ivu-modal-body {\r\n min-height: 632px;\r\n height: 80vh;\r\n overflow: hidden;\r\n }\r\n}\r\n.ivu-tabs {\r\n .ivu-tabs-content-animated {\r\n min-height: 580px;\r\n height: 73vh;\r\n margin-top: -1px;\r\n }\r\n .ivu-tabs-tabpane {\r\n min-height: 580px;\r\n height: 73vh;\r\n margin-top: -1px;\r\n }\r\n}\r\n.ivu-tabs-nav .ivu-tabs-tab .ivu-icon {\r\n color: #f00;\r\n}\r\n::v-deepbody .ivu-select-dropdown .ivu-dropdown-transfer {\r\n background: red !important;\r\n}\r\n.file-left ::v-deep .ivu-select-dropdown.ivu-dropdown-transfer .ivu-dropdown-menu .ivu-dropdown-item:hover {\r\n background-color: #e5e5e5 !important;\r\n}\r\n::v-deep .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container {\r\n background-color: #333;\r\n}\r\n</style>\r\n"]}]}
|
