|
|
@@ -2,75 +2,51 @@
|
|
|
<div class="l_box">
|
|
|
<div class="l_type_box" v-loading="isLoading">
|
|
|
<div class="header">
|
|
|
- <span class="title">我的资源库</span>
|
|
|
- <span class="add" @click="addClick" ref="divToHide3">添加分类</span>
|
|
|
+ <span class="title">知识库</span>
|
|
|
</div>
|
|
|
<div class="nav">
|
|
|
- <div class="nav_b">
|
|
|
- <div class="nav_box" :class="{ active1: pid == 'wu' }" @click="checkType('wu')"><span
|
|
|
- class="icon no"></span><span class="name">未分类</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<div class="nav_b" v-for="(item, index) in typeArray" :key="index">
|
|
|
- <div class="nav_box" :class="{ open: item.open, active2: pid.split('-')[0] == index }"
|
|
|
- @click="checkType(index + '')"><span class="icon" :class="{ haveL: item.child.length }"
|
|
|
- @click.stop="typeOpen(index)"></span>
|
|
|
- <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '')" ref="renameInput"
|
|
|
- @change="rename" @keyup.enter="rename">
|
|
|
- <el-tooltip :content="item.name" placement="top" effect="dark" v-else>
|
|
|
+ <div class="nav_box" :class="{ open: item.open, active2: pid.split('/')[0] == item.id }" @click="checkType(item.id)">
|
|
|
+ <span class="icon" :class="{ haveL: item.child.length }" @click.stop="typeOpen(index)"></span>
|
|
|
+ <el-tooltip :content="item.name" placement="top" effect="dark">
|
|
|
<span class="name">{{ item.name }}</span>
|
|
|
</el-tooltip>
|
|
|
- <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '')"></span>
|
|
|
</div>
|
|
|
<div class="nav_child_box" v-if="item.open && item.child.length">
|
|
|
- <div class="nav_box" :class="{ active: pid == index + '-' + index2 }" v-for="(item2, index2) in item.child"
|
|
|
- :key="index + '-' + index2" @click="checkType(index + '-' + index2)">
|
|
|
+ <div class="nav_box" :class="{ active: pid == item.id + '/' + item2.id }" v-for="(item2, index2) in item.child"
|
|
|
+ :key="index + '-' + index2" @click="checkType(item.id + '/' + item2.id)">
|
|
|
<span class="icon"></span>
|
|
|
- <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '-' + index2)"
|
|
|
- ref="renameInput" @change="rename" @keyup.enter="rename">
|
|
|
- <el-tooltip :content="item2.name" placement="top" effect="dark" v-else>
|
|
|
+ <el-tooltip :content="item2.name" placement="top" effect="dark">
|
|
|
<span class="name">{{ item2.name }}</span>
|
|
|
</el-tooltip>
|
|
|
- <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '-' + index2)"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="add_box" v-if="addVisbile2 === index" ref="divToHide2">
|
|
|
- <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="add_box" v-if="addVisbile" ref="divToHide">
|
|
|
- <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="showActionDiv" ref="actionDiv" :style="actionDivStyle" class="action-div">
|
|
|
- <div @click="actionDelete">删除</div>
|
|
|
- <div @click="actionRename">重命名</div>
|
|
|
- <div @click="actionAdd" v-if="actionType.split('-').length == 1" ref="addTypeAction">添加分类</div>
|
|
|
- <div class="move" v-if="pidArray.length">
|
|
|
- <span>移动</span>
|
|
|
- <div class="pid_box">
|
|
|
- <div v-for="(item, index) in pidArray" :key="index" @click="actionMove(item)">
|
|
|
- <!-- <el-tooltip :content="item.name" placement="right" effect="dark"> -->
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- <!-- </el-tooltip> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="l_file_box">
|
|
|
- <div class="l_none" v-if="pid != 'wu' && pid.split('-').length == 1">请添加二级分类</div>
|
|
|
- <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' @addFile="addFile" ref="fileBox" v-else>
|
|
|
+ <div class="bread_box">
|
|
|
+ <span class="bread" :class="{is: getPid(item.name) == pid}" v-for="(item, index) in getBread()" :key="index" @click="checkType2(getPid(item.name) == pid, getPid(item.name))">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <folder :userid="userid" :typeArray="typeArray" :pid="pid" @checkType="checkType" v-if="pid.split('/').length == 1"></folder>
|
|
|
+ <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' ref="fileBox" v-if="pid.split('/').length == 1">
|
|
|
</fileBox>
|
|
|
+ <folderDetail :userid="userid" :pid="pid" v-if="pid.split('/').length > 1" @checkType="checkType"></folderDetail>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import fileBox from './fileBox.vue';
|
|
|
+import folder from './folder.vue';
|
|
|
+import folderDetail from './folderDetail.vue';
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
fileBox,
|
|
|
+ folder,
|
|
|
+ folderDetail
|
|
|
},
|
|
|
props: {
|
|
|
type: {
|
|
|
@@ -81,23 +57,58 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
userid: this.$route.query.userid,
|
|
|
- pid: 'wu',
|
|
|
+ pid: '0',
|
|
|
addInput: '',
|
|
|
addVisbile: false,
|
|
|
addVisbile2: '',
|
|
|
isLoading: false,
|
|
|
- typeArray: [],
|
|
|
- showActionDiv: false,
|
|
|
- actionDivStyle: {
|
|
|
- top: '0px',
|
|
|
- left: '0px'
|
|
|
- },
|
|
|
+ typeArray: [
|
|
|
+ { name: '我的知识库',child: [], id: '0' }
|
|
|
+ ],
|
|
|
actionType: '',
|
|
|
renameType: '',
|
|
|
renameInput: '',
|
|
|
pidArray: [],
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ getBread(){
|
|
|
+ return function () {
|
|
|
+ const _pid = this.pid.split('/');
|
|
|
+ let array = [];
|
|
|
+ let index = this.typeArray.findIndex(item => item.id === _pid[0]);
|
|
|
+
|
|
|
+ if (index !== -1) {
|
|
|
+ array.push({ name: this.typeArray[index].name, id: this.typeArray[index].id });
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 1; i < _pid.length; i++) {
|
|
|
+ const childIndex = this.typeArray[index].child.findIndex(child => child.id === _pid[i]);
|
|
|
+ if (childIndex !== -1) {
|
|
|
+ array.push({ name: this.typeArray[index].child[childIndex].name, id: this.typeArray[index].child[childIndex].id });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(array);
|
|
|
+
|
|
|
+ return array;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getPid(){
|
|
|
+ return function (item) {
|
|
|
+ let array = this.getBread()
|
|
|
+ let pid = []
|
|
|
+ for(var i = 0; i < array.length; i++){
|
|
|
+ if(array[i].name == item){
|
|
|
+ pid.push(array[i].id)
|
|
|
+ break;
|
|
|
+ }else{
|
|
|
+ pid.push(array[i].id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return pid.join('/');
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
getData() {
|
|
|
this.isLoading = true;
|
|
|
@@ -105,299 +116,46 @@ export default {
|
|
|
uid: this.userid,
|
|
|
};
|
|
|
this.ajax
|
|
|
- .get(this.$store.state.api + "getSourceFileType", params)
|
|
|
+ .post(this.$store.state.api + "getFolder", [params])
|
|
|
.then((res) => {
|
|
|
this.isLoading = false;
|
|
|
- let pid = res.data[0];
|
|
|
- let child = res.data[1];
|
|
|
- for (var i = 0; i < pid.length; i++) {
|
|
|
- let pidChild = []
|
|
|
- pid[i].open = (this.typeArray.length && this.typeArray[i]) ? this.typeArray[i].open : false
|
|
|
- for (var j = 0; j < child.length; j++) {
|
|
|
- if (pid[i].id == child[j].pid) {
|
|
|
- pidChild.push(child[j])
|
|
|
- }
|
|
|
- }
|
|
|
- pid[i].child = pidChild
|
|
|
- }
|
|
|
- this.typeArray = pid
|
|
|
- this.$forceUpdate()
|
|
|
-
|
|
|
- let _pid = this.pid.split('-')
|
|
|
- if (_pid.length === 1 && this.pid != 'wu') {
|
|
|
- if (pid[_pid[0]]) {
|
|
|
- pid[_pid[0]].open = true
|
|
|
- this.pid = this.pid + '-0'
|
|
|
- } else {
|
|
|
- this.pid = 'wu'
|
|
|
- };
|
|
|
- this.checkType(this.pid);
|
|
|
- } else if (_pid.length > 1) {
|
|
|
- if (this.typeArray[_pid[0]].child.length > 0 && (parseInt(_pid[1]) + 1) > this.typeArray[_pid[0]].child.length) {
|
|
|
- this.pid = _pid[0] + '-0';
|
|
|
- this.checkType(this.pid);
|
|
|
- } else if ((parseInt(_pid[1]) + 1) > this.typeArray[_pid[0]].child.length) {
|
|
|
- this.checkType(_pid[0]);
|
|
|
- }
|
|
|
- }
|
|
|
- this.$refs['fileBox'].getData()
|
|
|
- console.log(this.$refs['fileBox']);
|
|
|
+ let data = res.data[0]
|
|
|
+ this.typeArray[0].child = data
|
|
|
+ // this.$refs['fileBox'].getData()
|
|
|
+ // console.log(this.$refs['fileBox']);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.isLoading = false;
|
|
|
console.error(err);
|
|
|
});
|
|
|
},
|
|
|
- addClick() {
|
|
|
- // if (this.pid == 'wu') {
|
|
|
- this.addVisbile = true;
|
|
|
- this.addInput = '一级分类标签'
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.divToHide.children[0].select()
|
|
|
- }, 500);
|
|
|
- // } else {
|
|
|
- // let check = this.pid.split('-')
|
|
|
- // this.addVisbile2 = parseInt(check[0]);
|
|
|
- // this.addInput = '二级分类标签'
|
|
|
- // setTimeout(() => {
|
|
|
- // this.$refs.divToHide2[0].children[0].select()
|
|
|
- // }, 500);
|
|
|
- // }
|
|
|
-
|
|
|
- },
|
|
|
- addType() {
|
|
|
- let pid = ''
|
|
|
- if (!this.addInput) {
|
|
|
- this.$message.error('请输入分类名字');
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.addVisbile) {
|
|
|
- pid = '0'
|
|
|
- } else if (this.addVisbile2 === 0 || this.addVisbile2) {
|
|
|
- let check = this.pid.split('-')
|
|
|
- pid = this.typeArray[check[0]].id
|
|
|
- }
|
|
|
- let params = [{
|
|
|
- pid: pid,
|
|
|
- name: this.addInput,
|
|
|
- uid: this.userid
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "addSourceFileType", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success('添加成功');
|
|
|
- this.addVisbile = false
|
|
|
- this.addVisbile2 = ''
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
typeOpen(index) {
|
|
|
if (this.typeArray[index].child.length > 0) {
|
|
|
this.typeArray[index].open = !this.typeArray[index].open
|
|
|
+ this.$forceUpdate();
|
|
|
}
|
|
|
},
|
|
|
checkType(pid) {
|
|
|
if (this.pid == pid) {
|
|
|
return
|
|
|
}
|
|
|
- let _pid = pid.split('-')
|
|
|
- if (_pid.length === 1 && pid != 'wu') {
|
|
|
- if (this.typeArray[_pid[0]].child.length > 0) {
|
|
|
- this.pid = pid + '-0';
|
|
|
- this.typeArray[_pid[0]].open = true;
|
|
|
- } else {
|
|
|
- this.pid = pid;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.pid = pid;
|
|
|
+ const [id] = pid.split('/');
|
|
|
+ const index = this.typeArray.findIndex(item => item.id === id);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.typeArray[index].open = true;
|
|
|
}
|
|
|
+ this.pid = pid;
|
|
|
+ this.$forceUpdate()
|
|
|
},
|
|
|
- handleClickOutside(event) {
|
|
|
- const target = event.target;
|
|
|
- const divToHide = this.$refs.divToHide; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide2 = this.$refs.divToHide2; // 获取需要隐藏的 div 的引用
|
|
|
- const addTypeAction = this.$refs.addTypeAction
|
|
|
- const divToHide3 = this.$refs.divToHide3; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide4 = this.$refs.actionDiv; // 获取需要隐藏的 div 的引用
|
|
|
- const divToHide5 = this.$refs.divToHide5; // 获取需要隐藏的 div 的引用
|
|
|
- const renameInput = this.$refs.renameInput; // 获取需要隐藏的 div 的引用
|
|
|
- console.log('1')
|
|
|
- if (divToHide && !divToHide.contains(target) && divToHide3 && !divToHide3.contains(target)) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.addVisbile = false
|
|
|
- }
|
|
|
- // if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && divToHide3 && !divToHide3.contains(target)) {
|
|
|
- // // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- // this.addVisbile2 = ''
|
|
|
- // }
|
|
|
- if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && addTypeAction && !addTypeAction.contains(target)) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.addVisbile2 = ''
|
|
|
+ checkType2(is, pid) {
|
|
|
+ if(!is){
|
|
|
+ this.checkType(pid)
|
|
|
}
|
|
|
-
|
|
|
- if (divToHide4 && !divToHide4.contains(target) && divToHide5 && !divToHide5[0].contains(target)) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.showActionDiv = false;
|
|
|
- }
|
|
|
-
|
|
|
- if (renameInput && renameInput[0] && !renameInput[0].contains(target) && (!divToHide4 || (divToHide4 && !divToHide4.contains(target)))) {
|
|
|
- // 点击的不是需要隐藏的 div，则隐藏它
|
|
|
- this.renameType = ''
|
|
|
- }
|
|
|
- },
|
|
|
- showActions(event, type) {
|
|
|
- this.showActionDiv = true;
|
|
|
- const buttonRect = event.target.getBoundingClientRect();
|
|
|
- this.actionDivStyle.top = `${buttonRect.bottom - 30}px`;
|
|
|
- this.actionDivStyle.left = `${buttonRect.left + 25}px`;
|
|
|
- this.pidArray = []
|
|
|
- let _type = type.split('-')
|
|
|
- if (_type.length > 1) {
|
|
|
- let pid = this.typeArray[_type[0]].child[_type[1]].pid
|
|
|
- this.typeArray.forEach(item => {
|
|
|
- item.id != pid && this.pidArray.push(item)
|
|
|
- })
|
|
|
- }
|
|
|
- this.actionType = type;
|
|
|
- this.$forceUpdate();
|
|
|
- },
|
|
|
- actionMove(pid) {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- let id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- this
|
|
|
- .$confirm('确定移动到' + pid.name + '吗？并且此分类的底下的文件也会跟随！', "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- let params = [{
|
|
|
- id: id,
|
|
|
- pid: pid.id
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "updateSourceFileTypePid", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success('移动成功');
|
|
|
- this.showActionDiv = false
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- });
|
|
|
- },
|
|
|
- actionRename() {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- if (type.length == 1) {
|
|
|
- this.renameInput = this.typeArray[type[0]].name
|
|
|
- } else {
|
|
|
- this.renameInput = this.typeArray[type[0]].child[type[1]].name
|
|
|
- }
|
|
|
- this.renameType = this.actionType
|
|
|
- if (this.pid != this.renameType) {
|
|
|
- this.checkType(this.renameType)
|
|
|
- }
|
|
|
- console.log(this.renameType);
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.renameInput[0].select();
|
|
|
- this.showActionDiv = false
|
|
|
- }, 500);
|
|
|
- },
|
|
|
- actionAdd() {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- if (type.length > 1) {
|
|
|
- return
|
|
|
- }
|
|
|
- let check = type
|
|
|
- this.checkType(this.actionType)
|
|
|
- this.addVisbile2 = parseInt(check[0]);
|
|
|
- this.addInput = '二级分类标签'
|
|
|
- this.showActionDiv = false
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.divToHide2[0].children[0].select()
|
|
|
- }, 500);
|
|
|
- },
|
|
|
- rename() {
|
|
|
- if (!this.renameInput) {
|
|
|
- this.$message.error('请输入分类名字');
|
|
|
- return
|
|
|
- }
|
|
|
- let type = this.renameType.split('-')
|
|
|
- let id = ''
|
|
|
- if (type.length == 1) {
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- }
|
|
|
- let params = [{
|
|
|
- id: id,
|
|
|
- name: this.renameInput
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "updateSourceFileName", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success('修改成功');
|
|
|
- this.renameType = ''
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- actionDelete() {
|
|
|
- let type = this.actionType.split('-')
|
|
|
- let id = ''
|
|
|
- let msg = ''
|
|
|
- if (type.length == 1) {
|
|
|
- if (this.typeArray[type[0]].child.length) {
|
|
|
- msg = '删除此分类后，该分类下的所有子分类将全部删除，确定删除此分类吗？'
|
|
|
- } else {
|
|
|
- msg = '确定删除此分类吗？'
|
|
|
- }
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- } else {
|
|
|
- msg = '确定删除此分类吗？'
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- }
|
|
|
- this
|
|
|
- .$confirm(msg, "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- let params = [{
|
|
|
- id: id,
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "deleteSoureFileType", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message.success('删除成功');
|
|
|
- this.showActionDiv = false
|
|
|
- this.getData()
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- });
|
|
|
- },
|
|
|
- addFile(file) {
|
|
|
- this.$emit('addFile', file)
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- document.removeEventListener('click', this.handleClickOutside);
|
|
|
},
|
|
|
mounted() {
|
|
|
- document.addEventListener('click', this.handleClickOutside);
|
|
|
this.getData();
|
|
|
},
|
|
|
}
|
|
|
@@ -467,7 +225,7 @@ export default {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
-.l_type_box>.nav>.nav_b {
|
|
|
+.l_type_box>.nav>.nav_b + .nav_b {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
@@ -737,7 +495,9 @@ export default {
|
|
|
background: #fff;
|
|
|
height: 100%;
|
|
|
border-radius: 5px;
|
|
|
- overflow: hidden;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.l_none {
|
|
|
@@ -748,4 +508,29 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
+.bread_box{
|
|
|
+ padding: 15px 10px 0px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bread_box > .bread{
|
|
|
+ font-size: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #a1a1a1;
|
|
|
+}
|
|
|
+
|
|
|
+.bread_box > .bread.is{
|
|
|
+ color: #000;
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+
|
|
|
+.bread_box > .bread + .bread::before{
|
|
|
+ content: '>';
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 8px;
|
|
|
+}
|
|
|
</style>
|
