Skip to content

D
DiscuzWeb
Commit 1a576f26 by zhujunjie
Options

样式修改及逻辑处理

parent 5bfca543
Showing with 213 additions and 93 deletions
pages/knowledge/index.vue
<template> <template>
<div class="knowledge" v-loading="loading"> <div v-loading="loading" class="knowledge">
<div class="knowledge-list" > <div class="knowledge-list">
<div <div
v-for="(item, index) in knowledgeList" v-for="(item, index) in knowledgeList"
:key="index" :key="index"
class="knowledge-list-detail" class="knowledge-list-detail"
> >
<div class="knowledge-list-detail-img"> <div class="knowledge-list-detail-img">
<!-- <img src="@/assets/BLT.png" alt="" /> <img src="@/assets/file.png" alt="" />
<img v-else="item.file == false" src="@/assets/essence.png" alt="" /> --> <!-- <i v-if="item.filetype == 1" class="el-icon-folder-opened" />
<i v-if="item.filetype == 1" class="el-icon-folder-opened" /> <i v-if="item.filetype != 1" class="el-icon-document" /> -->
<i v-if="item.filetype != 1" class="el-icon-document" />
</div> </div>
<div class="knowledge-list-detail-content"> <div class="knowledge-list-detail-content">
<div <div
...@@ -21,7 +20,9 @@ ...@@ -21,7 +20,9 @@
</div> </div>
<div class="knowledge-list-detail-content-text"> <div class="knowledge-list-detail-content-text">
<div>创建人:{{ item.name }}</div> <div>创建人:{{ item.name }}</div>
<div>{{ item.time }}</div> <div class="knowledge-list-detail-content-text-time">
{{ item.time }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -37,14 +38,14 @@ export default { ...@@ -37,14 +38,14 @@ export default {
userId: this.$store.getters["session/get"]("userId"), // 获取当前登陆用户的ID userId: this.$store.getters["session/get"]("userId"), // 获取当前登陆用户的ID
userInfo: "", userInfo: "",
qywxUserid: "", qywxUserid: "",
loading:false, loading: false,
knowledgeList: [], knowledgeList: []
}; };
}, },
computed: {}, computed: {},
mounted() { mounted() {
const params = { const params = {
include: "groups,wechat", include: "groups,wechat"
}; };
if (!this.userId) { if (!this.userId) {
this.$message.warning(`请先登录`); this.$message.warning(`请先登录`);
...@@ -52,25 +53,24 @@ export default { ...@@ -52,25 +53,24 @@ export default {
} }
this.$store this.$store
.dispatch("jv/get", [`users/${this.userId}`, { params }]) .dispatch("jv/get", [`users/${this.userId}`, { params }])
.then((res) => { .then(res => {
this.userInfo = JSON.parse(res.wechat_info); this.userInfo = JSON.parse(res.wechat_info);
this.qywxUserid = this.userInfo.userid; this.qywxUserid = this.userInfo.userid;
if (!this.qywxUserid) { if (!this.qywxUserid) {
this.$message.warning(`请先登录`); this.$message.warning(`请先登录`);
return false; return false;
} }
this.loading=true; this.loading = true;
// 调用后台获取文件列表 // 调用后台获取文件列表
axios axios
.get( .get(
config.WEI_PAN_URL + `${config.WEI_PAN_URL}/weipan/getfirstfilelist?userId=${this.qywxUserid}`
`/weipan/getfirstfilelist?userId=${this.qywxUserid}`
) )
.then((res) => { .then(res => {
if (res.data.result.file_list != null) { if (res.data.result.file_list != null) {
const filelist = res.data.result.file_list.item; const filelist = res.data.result.file_list.item;
this.knowledgeList = []; this.knowledgeList = [];
filelist.forEach((element) => { filelist.forEach(element => {
if (element.file_status == "1") { if (element.file_status == "1") {
const knowledge = { const knowledge = {
title: element.file_name, title: element.file_name,
...@@ -78,15 +78,15 @@ export default { ...@@ -78,15 +78,15 @@ export default {
time: element.ctime, time: element.ctime,
fileid: element.fileid, fileid: element.fileid,
fatherid: element.fatherid, fatherid: element.fatherid,
filetype: element.file_type, filetype: element.file_type
}; };
this.knowledgeList.push(knowledge); this.knowledgeList.push(knowledge);
} }
this.loading=false; this.loading = false;
}); });
} else { } else {
this.$message.warning(`当前微盘无文件`); this.$message.warning(`当前微盘无文件`);
this.loading=false; this.loading = false;
} }
}); });
}); });
...@@ -98,63 +98,77 @@ export default { ...@@ -98,63 +98,77 @@ export default {
query: { query: {
id: fileid, id: fileid,
fatherid: fatherid, fatherid: fatherid,
useid: this.qywxUserid, useid: this.qywxUserid
}, }
}); });
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.knowledge { .knowledge {
width: 1009px; width: 1009px;
&-list { &-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
&-detail { &-detail {
float: left; width: 298px;
width: 263px; height: 119px;
// height: 105px; // height: 105px;
display: flex; display: flex;
background: #fff; background: #fff;
margin-bottom: 15px; margin-bottom: 15px;
padding: 32px 20px; margin-left: 16px;
margin-left: 10px; padding: 33px 39px 41px 21px;
&-img { &-img {
width: 30px; width: 27px;
height: 30px; height: 33px;
i { img {
width: 30px; width: 27px;
height: 30px; height: 33px;
font-size: 30px; margin: 5px;
}
.el-icon-folder-opened {
color: #00a1ff;
}
.el-icon-document {
color: #ffbc00;
} }
// i {
// width: 30px;
// height: 30px;
// font-size: 30px;
// }
// .el-icon-folder-opened {
// color: #00a1ff;
// }
// .el-icon-document {
// color: #ffbc00;
// }
} }
&-content { &-content {
margin-left: 10px; margin-left: 14px;
float: left;
&-title { &-title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 200px; line-height: 20px;
font-size: 14px;
margin-bottom: 5px; margin-bottom: 5px;
color: #666;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
} }
&-text { &-text {
width: 200px; display: flex;
// display: flex; justify-content: space-between;
// justify-content: space-between; color: #999999;
line-height: 17px;
font-size: 12px;
div { div {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
&-time {
margin-left: 20px;
}
} }
} }
} }
......
pages/knowledge/knowledgeDetail.vue
...@@ -11,17 +11,16 @@ ...@@ -11,17 +11,16 @@
:props="defaultProps" :props="defaultProps"
@node-click="handleNodeClick" @node-click="handleNodeClick"
> >
<span slot-scope="{ node, data }"> <div slot-scope="{ node, data }" style="display:flex">
<i :class="data.icon" /> <div class="detail-content-left-text-custom">
<span class="detail-content-left-text-custom">{{ {{ data.label }}
data.label </div>
}}</span> </div>
</span>
</el-tree> </el-tree>
</div> </div>
</div> </div>
<div class="detail-content-right" v-loading="showViewloading"> <div v-loading="showViewloading" class="detail-content-right">
<div v-if="isShowView"> <div v-if="isShowView">
<el-button size="small" style="ma" @click="openNewForm"> <el-button size="small" style="ma" @click="openNewForm">
全屏查看 全屏查看
...@@ -31,7 +30,12 @@ ...@@ -31,7 +30,12 @@
id="map" id="map"
:src="fileSrc" :src="fileSrc"
scrolling="no" scrolling="no"
marginwidth="0"
marginheight="0"
frameborder="0" frameborder="0"
mainview.height="0"
mainview.wdith="0"
style="border:none"
class="detail-content-right-text" class="detail-content-right-text"
/> />
</div> </div>
...@@ -39,18 +43,32 @@ ...@@ -39,18 +43,32 @@
<img :src="fileSrc" class="detail-content-right-img" /> <img :src="fileSrc" class="detail-content-right-img" />
</div> </div>
</div> </div>
<el-input <!-- <el-input
v-model="title" v-model="title"
placeholder="请输入标题" placeholder="请输入标题"
style="width: 300px;margin-top:10px;" style="width: 300px;margin-top:10px;"
/> /> -->
<Vditor <!-- <Vditor
v-if="isPost" v-if="isPost"
:inputTitle="title" :input-title="title"
:publishType="publishType" :publish-type="publishType"
:fileMd5="fileMd5" :file-md5="fileMd5"
:inputContent="inputContent" :input-content="inputContent"
/> -->
<div class="list-top-item">
<nuxt-link :to="`/thread/`" target="_blank" class="top-title">
<template>
百伦论坛知识库
</template>
<div />
</nuxt-link>
</div>
<topic-actions
:thread-id="threadId"
:actions="actions || []"
@clickAction="postCommand"
/> />
<comment :thread-id="threadId" />
</div> </div>
</div> </div>
</div> </div>
...@@ -58,12 +76,43 @@ ...@@ -58,12 +76,43 @@
<script> <script>
import axios from "@/plugins/axios.js"; import axios from "@/plugins/axios.js";
import handleError from "@/mixin/handleError"; import handleError from "@/mixin/handleError";
import config from '@/config.js'; import config from "@/config.js";
export default { export default {
data() { data() {
return { return {
threadId: "1",
actions: [
{
text: this.$t("topic.read"),
count: 0,
command: "",
canOpera: false,
icon: "book"
},
{
text: this.$t("topic.getLike"),
count: 0,
command: "isLiked",
canOpera: false,
isStatus: false,
icon: "like"
},
{
text: this.$t("topic.collection"),
command: "isFavorite",
canOpera: false,
isStatus: false,
icon: "favor"
},
{
text: this.$t("topic.share"),
command: "showLink",
canOpera: true,
icon: "link"
}
],
loading: false, loading: false,
showViewloading:false, showViewloading: false,
isShowView: false, isShowView: false,
isfile: true, isfile: true,
fileSrc: "", fileSrc: "",
...@@ -76,9 +125,9 @@ export default { ...@@ -76,9 +125,9 @@ export default {
data: [], data: [],
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label", label: "label"
}, },
list: [], list: []
}; };
}, },
computed: {}, computed: {},
...@@ -95,43 +144,66 @@ export default { ...@@ -95,43 +144,66 @@ export default {
const qywxUserid = this.$route.query.useid; const qywxUserid = this.$route.query.useid;
this.qywxUserid = this.$route.query.useid; this.qywxUserid = this.$route.query.useid;
const fatherid = this.$route.query.fatherid; const fatherid = this.$route.query.fatherid;
// 获取树状数据 // 获取树状数据
axios axios
.get( .get(
config.WEI_PAN_URL+`/weipan/getfilelisttree?userId=${qywxUserid}&fildId=${fildId}&fatherid=${fatherid}` `${config.WEI_PAN_URL}/weipan/getfilelisttree?userId=${qywxUserid}&fildId=${fildId}&fatherid=${fatherid}`
) )
.then((res) => { .then(res => {
this.data = res.data.result; // this.data = res.data.result;
this.data = this.deleteChildren(res.data.result);
console.log(this.data, "this.data");
this.loading = false; this.loading = false;
if (this.data.length == 1) { if (this.data.length == 1) {
if (this.data[0].file) { if (this.data[0].file) {
//触发点击事件 // 触发点击事件
this.handleNodeClick(this.data[0]); this.handleNodeClick(this.data[0]);
} }
} }
console.log(this.data, 222); console.log(this.data, 222);
}); });
// 监听滚动事件 // 监听滚动事件
// window.addEventListener("scroll", this.onScroll, false); // window.addEventListener("scroll", this.onScroll, false);
// window.onload = function() {
// const _iframe = document
// .getElementById("map")
// .contentWindow.document.queryselector("WACPageBorder"); // get iframe下的id
// _iframe.style.display = "none"; // 修改样式
// };
}, },
methods: { methods: {
deleteChildren(arr) {
const childs = arr;
for (let i = childs.length; i--; i > 0) {
if (childs[i].children) {
if (childs[i].children.length) {
this.deleteChildren(childs[i].children);
} else {
delete childs[i].children;
}
}
}
return arr;
},
postCommand(item) {},
openNewForm() { openNewForm() {
window.open(this.fileSrc, "_blank"); window.open(this.fileSrc, "_blank");
}, },
handleNodeClick(data) { handleNodeClick(data) {
if (data.file) { if (data.file) {
this.showViewloading=true; this.showViewloading = true;
axios axios
.get( .get(
config.WEI_PAN_URL+`/weipan/getviewfile?userId=${this.qywxUserid}&fileId=${data.id}&md5=${data.md5}&fileName=${data.label}` `${config.WEI_PAN_URL}/weipan/getviewfile?userId=${this.qywxUserid}&fileId=${data.id}&md5=${data.md5}&fileName=${data.label}`
) )
.then((res) => { .then(res => {
this.showViewloading=false; // const ele = document.querySelector(".WACPageBorder");
if (!!res.data) { // ele.style.border = "none";
let filePath = res.data.result; // console.log(ele, "ele");
if (!!filePath) { this.showViewloading = false;
if (res.data) {
const filePath = res.data.result;
if (filePath) {
this.isShowView = true; this.isShowView = true;
if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) { if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
this.isfile = false; this.isfile = false;
...@@ -143,7 +215,7 @@ export default { ...@@ -143,7 +215,7 @@ export default {
) )
) { ) {
this.isfile = true; this.isfile = true;
this.fileSrc = "http://ow365.cn/?i=23468&furl=" + filePath; this.fileSrc = `http://ow365.cn/?i=23468&furl=${filePath}`;
} }
} }
} }
...@@ -153,11 +225,11 @@ export default { ...@@ -153,11 +225,11 @@ export default {
}, },
changTree(index) { changTree(index) {
console.log(index); console.log(index);
}, }
}, },
textChange() { textChange() {
alert(332); alert(332);
}, }
// }, // },
// destroy() { // destroy() {
...@@ -167,18 +239,18 @@ export default { ...@@ -167,18 +239,18 @@ export default {
}; };
</script> </script>
<style> <style>
.detail-content-left-text .el-tree-node__expand-icon {
color: #c0c4cc;
}
/* .detail-content-left-text /* .detail-content-left-text
.el-tree-node__content .el-tree-node__content
.detail-content-left-text-custom { .detail-content-left-text-custom {
width: 200px; width: 200px;
overflow: hidden; overflow: hidden;
} */ } */
.detail-content-left-text .el-tree-node:focus > .el-tree-node__content {
color: #2e8cf0;
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.iframe-box { .iframe-box {
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -199,17 +271,22 @@ export default { ...@@ -199,17 +271,22 @@ export default {
justify-content: space-between; justify-content: space-between;
&-left { &-left {
background: #fff; background: #fff;
position: relative;
width: 220px; width: 220px;
padding: 10px 0 0 20px; padding: 10px 0 0 25px;
overflow: hidden;
&-text { &-text {
width: 200px;
position: fixed; position: fixed;
font-size: 12px;
line-height: 17px;
background: #fff; background: #fff;
overflow: hidden; overflow: hidden;
i {
line-height: 17px;
}
&-custom { &-custom {
width: 150px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
} }
...@@ -223,14 +300,43 @@ export default { ...@@ -223,14 +300,43 @@ export default {
width: 100%; width: 100%;
height: 700px; height: 700px;
} }
&-img{ iframe {
width:auto; }
height:100%;
&-img {
width: auto;
height: 100%;
}
.list-top-item {
margin: 30px 0 0 150px;
.top-title {
color: #000;
width: 122px;
height: 25px;
overflow: hidden;
// text-overflow:ellipsis;
// white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
border-radius: 30px;
text-align: center;
background: #f7f7f7;
border: 1px solid #f7f7f7;
color: #777;
font-size: 12px;
line-height: 25px;
text-align: center;
}
&:hover {
.top-title {
color: #1878f3;
background: #fff;
border: 1px solid #1878f3;
}
}
} }
} }
} }
}
.vditor-tooltipped__ne{
display: none;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment