Skip to content

D
DiscuzWeb
Commit 1a576f26 by zhujunjie
Options

样式修改及逻辑处理

parent 5bfca543
Showing with 213 additions and 93 deletions
pages/knowledge/index.vue
<template>
<div class="knowledge" v-loading="loading">
<div class="knowledge-list" >
<div v-loading="loading" class="knowledge">
<div class="knowledge-list">
<div
v-for="(item, index) in knowledgeList"
:key="index"
class="knowledge-list-detail"
>
<div class="knowledge-list-detail-img">
<!-- <img src="@/assets/BLT.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-document" />
<img src="@/assets/file.png" alt="" />
<!-- <i v-if="item.filetype == 1" class="el-icon-folder-opened" />
<i v-if="item.filetype != 1" class="el-icon-document" /> -->
</div>
<div class="knowledge-list-detail-content">
<div
......@@ -21,7 +20,9 @@
</div>
<div class="knowledge-list-detail-content-text">
<div>创建人:{{ item.name }}</div>
<div>{{ item.time }}</div>
<div class="knowledge-list-detail-content-text-time">
{{ item.time }}
</div>
</div>
</div>
</div>
......@@ -37,14 +38,14 @@ export default {
userId: this.$store.getters["session/get"]("userId"), // 获取当前登陆用户的ID
userInfo: "",
qywxUserid: "",
loading:false,
knowledgeList: [],
loading: false,
knowledgeList: []
};
},
computed: {},
mounted() {
const params = {
include: "groups,wechat",
include: "groups,wechat"
};
if (!this.userId) {
this.$message.warning(`请先登录`);
......@@ -52,25 +53,24 @@ export default {
}
this.$store
.dispatch("jv/get", [`users/${this.userId}`, { params }])
.then((res) => {
.then(res => {
this.userInfo = JSON.parse(res.wechat_info);
this.qywxUserid = this.userInfo.userid;
if (!this.qywxUserid) {
this.$message.warning(`请先登录`);
return false;
}
this.loading=true;
this.loading = true;
// 调用后台获取文件列表
axios
.get(
config.WEI_PAN_URL +
`/weipan/getfirstfilelist?userId=${this.qywxUserid}`
`${config.WEI_PAN_URL}/weipan/getfirstfilelist?userId=${this.qywxUserid}`
)
.then((res) => {
.then(res => {
if (res.data.result.file_list != null) {
const filelist = res.data.result.file_list.item;
this.knowledgeList = [];
filelist.forEach((element) => {
filelist.forEach(element => {
if (element.file_status == "1") {
const knowledge = {
title: element.file_name,
......@@ -78,15 +78,15 @@ export default {
time: element.ctime,
fileid: element.fileid,
fatherid: element.fatherid,
filetype: element.file_type,
filetype: element.file_type
};
this.knowledgeList.push(knowledge);
}
this.loading=false;
this.loading = false;
});
} else {
this.$message.warning(`当前微盘无文件`);
this.loading=false;
this.loading = false;
}
});
});
......@@ -98,63 +98,77 @@ export default {
query: {
id: fileid,
fatherid: fatherid,
useid: this.qywxUserid,
},
useid: this.qywxUserid
}
});
},
},
}
}
};
</script>
<style lang="scss" scoped>
.knowledge {
width: 1009px;
&-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
&-detail {
float: left;
width: 263px;
width: 298px;
height: 119px;
// height: 105px;
display: flex;
background: #fff;
margin-bottom: 15px;
padding: 32px 20px;
margin-left: 10px;
margin-left: 16px;
padding: 33px 39px 41px 21px;
&-img {
width: 30px;
height: 30px;
i {
width: 30px;
height: 30px;
font-size: 30px;
}
.el-icon-folder-opened {
color: #00a1ff;
}
.el-icon-document {
color: #ffbc00;
width: 27px;
height: 33px;
img {
width: 27px;
height: 33px;
margin: 5px;
}
// i {
// width: 30px;
// height: 30px;
// font-size: 30px;
// }
// .el-icon-folder-opened {
// color: #00a1ff;
// }
// .el-icon-document {
// color: #ffbc00;
// }
}
&-content {
margin-left: 10px;
float: left;
margin-left: 14px;
&-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
line-height: 20px;
font-size: 14px;
margin-bottom: 5px;
color: #666;
&:hover {
cursor: pointer;
}
}
&-text {
width: 200px;
// display: flex;
// justify-content: space-between;
display: flex;
justify-content: space-between;
color: #999999;
line-height: 17px;
font-size: 12px;
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-time {
margin-left: 20px;
}
}
}
}
......
pages/knowledge/knowledgeDetail.vue
......@@ -11,17 +11,16 @@
:props="defaultProps"
@node-click="handleNodeClick"
>
<span slot-scope="{ node, data }">
<i :class="data.icon" />
<span class="detail-content-left-text-custom">{{
data.label
}}</span>
</span>
<div slot-scope="{ node, data }" style="display:flex">
<div class="detail-content-left-text-custom">
{{ data.label }}
</div>
</div>
</el-tree>
</div>
</div>
<div class="detail-content-right" v-loading="showViewloading">
<div v-loading="showViewloading" class="detail-content-right">
<div v-if="isShowView">
<el-button size="small" style="ma" @click="openNewForm">
全屏查看
......@@ -31,7 +30,12 @@
id="map"
:src="fileSrc"
scrolling="no"
marginwidth="0"
marginheight="0"
frameborder="0"
mainview.height="0"
mainview.wdith="0"
style="border:none"
class="detail-content-right-text"
/>
</div>
......@@ -39,18 +43,32 @@
<img :src="fileSrc" class="detail-content-right-img" />
</div>
</div>
<el-input
<!-- <el-input
v-model="title"
placeholder="请输入标题"
style="width: 300px;margin-top:10px;"
/>
<Vditor
/> -->
<!-- <Vditor
v-if="isPost"
:inputTitle="title"
:publishType="publishType"
:fileMd5="fileMd5"
:inputContent="inputContent"
:input-title="title"
:publish-type="publishType"
:file-md5="fileMd5"
: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>
......@@ -58,12 +76,43 @@
<script>
import axios from "@/plugins/axios.js";
import handleError from "@/mixin/handleError";
import config from '@/config.js';
import config from "@/config.js";
export default {
data() {
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,
showViewloading:false,
showViewloading: false,
isShowView: false,
isfile: true,
fileSrc: "",
......@@ -76,9 +125,9 @@ export default {
data: [],
defaultProps: {
children: "children",
label: "label",
label: "label"
},
list: [],
list: []
};
},
computed: {},
......@@ -95,43 +144,66 @@ export default {
const qywxUserid = this.$route.query.useid;
this.qywxUserid = this.$route.query.useid;
const fatherid = this.$route.query.fatherid;
// 获取树状数据
axios
.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) => {
this.data = res.data.result;
.then(res => {
// this.data = res.data.result;
this.data = this.deleteChildren(res.data.result);
console.log(this.data, "this.data");
this.loading = false;
if (this.data.length == 1) {
if (this.data[0].file) {
//触发点击事件
// 触发点击事件
this.handleNodeClick(this.data[0]);
}
}
console.log(this.data, 222);
});
// 监听滚动事件
// 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: {
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() {
window.open(this.fileSrc, "_blank");
},
handleNodeClick(data) {
if (data.file) {
this.showViewloading=true;
this.showViewloading = true;
axios
.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) => {
this.showViewloading=false;
if (!!res.data) {
let filePath = res.data.result;
if (!!filePath) {
.then(res => {
// const ele = document.querySelector(".WACPageBorder");
// ele.style.border = "none";
// console.log(ele, "ele");
this.showViewloading = false;
if (res.data) {
const filePath = res.data.result;
if (filePath) {
this.isShowView = true;
if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
this.isfile = false;
......@@ -143,7 +215,7 @@ export default {
)
) {
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 {
},
changTree(index) {
console.log(index);
},
}
},
textChange() {
alert(332);
},
}
// },
// destroy() {
......@@ -167,18 +239,18 @@ export default {
};
</script>
<style>
.detail-content-left-text .el-tree-node__expand-icon {
color: #c0c4cc;
}
/* .detail-content-left-text
.el-tree-node__content
.detail-content-left-text-custom {
width: 200px;
overflow: hidden;
} */
.detail-content-left-text .el-tree-node:focus > .el-tree-node__content {
color: #2e8cf0;
}
</style>
<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.iframe-box {
position: relative;
width: 100%;
......@@ -199,17 +271,22 @@ export default {
justify-content: space-between;
&-left {
background: #fff;
position: relative;
width: 220px;
padding: 10px 0 0 20px;
overflow: hidden;
padding: 10px 0 0 25px;
&-text {
width: 200px;
position: fixed;
font-size: 12px;
line-height: 17px;
background: #fff;
overflow: hidden;
i {
line-height: 17px;
}
&-custom {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
......@@ -223,14 +300,43 @@ export default {
width: 100%;
height: 700px;
}
&-img{
width:auto;
height:100%;
iframe {
}
&-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>
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