|
@@ -0,0 +1,496 @@
|
|
|
+<template>
|
|
|
+ <div class="w-main docs">
|
|
|
+
|
|
|
+ <v-title>{{$L('知识库')}}-{{$L('轻量级的团队在线协作')}}</v-title>
|
|
|
+
|
|
|
+ <w-header value="docs"></w-header>
|
|
|
+
|
|
|
+ <div class="w-nav">
|
|
|
+ <div class="nav-row">
|
|
|
+ <div class="w-nav-left">
|
|
|
+ <div class="page-nav-left">
|
|
|
+ <span class="hover" @click="[addBookId=0,addBookShow=true]"><i class="ft icon"></i> {{$L('新建知识库')}}</span>
|
|
|
+ <div v-if="loadIng > 0" class="page-nav-loading"><w-loading></w-loading></div>
|
|
|
+ <div v-else class="page-nav-refresh"><em @click="">刷新</em></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="w-nav-flex"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <w-content>
|
|
|
+ <div class="docs-main">
|
|
|
+ <div class="docs-body">
|
|
|
+ <div class="docs-menu">
|
|
|
+ <h3>我的知识库</h3>
|
|
|
+ <ul>
|
|
|
+ <li v-for="book in bookLists" :class="{active:book.id==selectBookData.id}" @click="[selectBookData=book,getSectionLists(true)]">
|
|
|
+ <div class="docs-title">{{book.title}}</div>
|
|
|
+ <div class="docs-time">{{$A.formatDate("Y-m-d H:i:s", book.indate)}}</div>
|
|
|
+ </li>
|
|
|
+ <li v-if="bookLists.length == 0" class="none">{{bookNoDataText}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="docs-container">
|
|
|
+ <div v-if="selectBookData.id > 0">
|
|
|
+ <div class="docs-header">
|
|
|
+ <div class="docs-h1">{{selectBookData.title}}</div>
|
|
|
+ <div class="docs-setting">
|
|
|
+ <Button @click="[addSectionId=0,addSectionShow=true]">新增章节</Button>
|
|
|
+ <Button @click="[addBookId=selectBookData.id,addBookShow=true]">修改标题</Button>
|
|
|
+ <!--<Button>权限设置</Button>-->
|
|
|
+ <Button type="warning" ghost @click="onBookDelete(selectBookData.id)">删除</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="docs-section">
|
|
|
+ <nested-draggable :lists="sectionLists" @change="handleSection"></nested-draggable>
|
|
|
+ <div v-if="sectionLists.length == 0" class="none">{{sectionNoDataText}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </w-content>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ v-model="addBookShow"
|
|
|
+ :title="$L(addBookId > 0 ? '修改标题' : '新建知识库')"
|
|
|
+ :closable="false"
|
|
|
+ :mask-closable="false">
|
|
|
+ <Form ref="bookAdd" :model="formBookAdd" :rules="ruleBookAdd" :label-width="110">
|
|
|
+ <FormItem prop="title" :label="$L('知识库名称')" style="margin-right:28px">
|
|
|
+ <Input type="text" v-model="formBookAdd.title" :maxlength="32"></Input>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ <div slot="footer">
|
|
|
+ <Button type="default" @click="addBookShow=false">{{$L('取消')}}</Button>
|
|
|
+ <Button type="primary" :loading="loadIng > 0" @click="onBookAdd">{{$L(addBookId > 0 ? '提交' : '添加')}}</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ <Modal
|
|
|
+ v-model="addSectionShow"
|
|
|
+ :title="$L(addSectionId > 0 ? '修改文档标题' : '新建文档')"
|
|
|
+ :closable="false"
|
|
|
+ :mask-closable="false">
|
|
|
+ <Form ref="sectionAdd" :model="formSectionAdd" :rules="ruleSectionAdd" :label-width="110">
|
|
|
+ <FormItem prop="title" :label="$L('文档标题')" style="margin-right:28px">
|
|
|
+ <Input type="text" v-model="formSectionAdd.title" :maxlength="32"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem v-if="addSectionId <= 0" prop="type" :label="$L('文档类型')" style="margin-right:28px">
|
|
|
+ <ButtonGroup>
|
|
|
+ <Button v-for="(it, ik) in sectionTypeLists"
|
|
|
+ :key="ik"
|
|
|
+ :type="`${formSectionAdd.type==it.value?'primary':'default'}`"
|
|
|
+ @click="formSectionAdd.type=it.value">{{it.text}}</Button>
|
|
|
+ </ButtonGroup>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ <div slot="footer">
|
|
|
+ <Button type="default" @click="addSectionShow=false">{{$L('取消')}}</Button>
|
|
|
+ <Button type="primary" :loading="loadIng > 0" @click="onSectionAdd">{{$L(addSectionId > 0 ? '提交' : '添加')}}</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .docs {
|
|
|
+ .docs-main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ .docs-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 500px;
|
|
|
+ .docs-menu {
|
|
|
+ width: 230px;
|
|
|
+ border-radius: 3px 0 0 3px;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: normal;
|
|
|
+ padding: 10px 12px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ padding: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.none {
|
|
|
+ background-color: transparent;
|
|
|
+ text-align: center;
|
|
|
+ color: #666666;
|
|
|
+ padding: 8px 18px;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .docs-title {
|
|
|
+ color: #242424;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .docs-time {
|
|
|
+ display: block;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 2px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .docs-container {
|
|
|
+ flex: 1;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 0 3px 3px 0;
|
|
|
+ .docs-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 6px 24px 12px;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ .docs-h1 {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .docs-setting {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > button {
|
|
|
+ margin: 0 6px;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .docs-section {
|
|
|
+ margin: 0 26px;
|
|
|
+ .none {
|
|
|
+ background-color: transparent;
|
|
|
+ text-align: center;
|
|
|
+ color: #666666;
|
|
|
+ padding: 48px 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<script>
|
|
|
+ import WHeader from "../components/WHeader";
|
|
|
+ import WContent from "../components/WContent";
|
|
|
+ import NestedDraggable from "../components/docs/NestedDraggable";
|
|
|
+ export default {
|
|
|
+ components: {NestedDraggable, WContent, WHeader},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loadIng: 0,
|
|
|
+
|
|
|
+ bookLists: [],
|
|
|
+ bookListPage: 1,
|
|
|
+ bookListTotal: 0,
|
|
|
+ bookNoDataText: "数据加载中.....",
|
|
|
+
|
|
|
+ addBookId: 0,
|
|
|
+ addBookShow: false,
|
|
|
+ formBookAdd: {
|
|
|
+ title: '',
|
|
|
+ },
|
|
|
+ ruleBookAdd: {},
|
|
|
+ selectBookData: {},
|
|
|
+
|
|
|
+ sectionLists: [],
|
|
|
+ sectionNoDataText: "数据加载中.....",
|
|
|
+
|
|
|
+ addSectionId: 0,
|
|
|
+ addSectionShow: false,
|
|
|
+ formSectionAdd: {
|
|
|
+ title: '',
|
|
|
+ type: 'text',
|
|
|
+ },
|
|
|
+ ruleSectionAdd: {},
|
|
|
+ sectionTypeLists: [
|
|
|
+ {value: 'text', text: "文本"},
|
|
|
+ {value: 'mind', text: "脑图"},
|
|
|
+ {value: 'excel', text: "表格"},
|
|
|
+ {value: 'chart', text: "流程图"},
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.ruleBookAdd = {
|
|
|
+ title: [
|
|
|
+ { required: true, message: this.$L('请填写知识库名称!'), trigger: 'change' },
|
|
|
+ { type: 'string', min: 2, message: this.$L('知识库名称长度至少2位!'), trigger: 'change' }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.ruleSectionAdd = {
|
|
|
+ title: [
|
|
|
+ { required: true, message: this.$L('请填写文档标题!'), trigger: 'change' },
|
|
|
+ { type: 'string', min: 2, message: this.$L('文档标题长度至少2位!'), trigger: 'change' }
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.getBookLists(true);
|
|
|
+ $A.getUserInfo((res, isLogin) => {
|
|
|
+ isLogin && this.getBookLists(true);
|
|
|
+ }, false);
|
|
|
+ },
|
|
|
+
|
|
|
+ deactivated() {
|
|
|
+ this.addBookShow = false;
|
|
|
+ this.addSectionShow = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getBookLists(resetLoad) {
|
|
|
+ if (resetLoad === true) {
|
|
|
+ this.bookListPage = 1;
|
|
|
+ }
|
|
|
+ this.loadIng++;
|
|
|
+ this.bookNoDataText = "数据加载中.....";
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'docs/book/lists',
|
|
|
+ data: {
|
|
|
+ page: Math.max(this.bookListPage, 1),
|
|
|
+ pagesize: 20,
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ this.loadIng--;
|
|
|
+ },
|
|
|
+ error: () => {
|
|
|
+ this.bookNoDataText = "数据加载失败!";
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.bookLists = res.data.lists;
|
|
|
+ this.bookListTotal = res.data.total;
|
|
|
+ this.bookNoDataText = "没有相关的数据";
|
|
|
+ if (typeof this.selectBookData.id === "undefined") {
|
|
|
+ this.selectBookData = this.bookLists[0];
|
|
|
+ this.getSectionLists();
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.bookLists = [];
|
|
|
+ this.bookListTotal = 0;
|
|
|
+ this.bookNoDataText = res.msg;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onBookAdd() {
|
|
|
+ this.$refs.bookAdd.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loadIng++;
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'docs/book/add',
|
|
|
+ data: Object.assign(this.formBookAdd, {id:this.addBookId}),
|
|
|
+ complete: () => {
|
|
|
+ this.loadIng--;
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.addBookShow = false;
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ this.$refs.bookAdd.resetFields();
|
|
|
+ //
|
|
|
+ if (this.addBookId > 0) {
|
|
|
+ this.bookLists.some((item) => {
|
|
|
+ if (item.id == this.addBookId) {
|
|
|
+ this.$set(item, 'title', res.data.title);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.bookLists.unshift(res.data);
|
|
|
+ this.selectBookData = this.bookLists[0];
|
|
|
+ this.getSectionLists();
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onBookDelete(bookId) {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: '删除知识库',
|
|
|
+ content: '你确定要删除此知识库吗?',
|
|
|
+ loading: true,
|
|
|
+ onOk: () => {
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'docs/book/delete',
|
|
|
+ data: {
|
|
|
+ id: bookId
|
|
|
+ },
|
|
|
+ error: () => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ alert(this.$L('网络繁忙,请稍后再试!'));
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ this.bookLists.some((item, index) => {
|
|
|
+ if (item.id == bookId) {
|
|
|
+ this.bookLists.splice(index, 1);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.selectBookData = this.bookLists[0];
|
|
|
+ this.getSectionLists();
|
|
|
+ //
|
|
|
+ setTimeout(() => {
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ } else {
|
|
|
+ this.$Modal.error({title: this.$L('温馨提示'), content: res.msg});
|
|
|
+ }
|
|
|
+ }, 350);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getSectionLists(isClear) {
|
|
|
+ if (isClear === true) {
|
|
|
+ this.sectionLists = [];
|
|
|
+ }
|
|
|
+ let bookid = this.selectBookData.id;
|
|
|
+ this.loadIng++;
|
|
|
+ this.sectionNoDataText = "数据加载中.....";
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'docs/section/lists',
|
|
|
+ data: {
|
|
|
+ bookid: bookid
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ this.loadIng--;
|
|
|
+ },
|
|
|
+ error: () => {
|
|
|
+ if (bookid != this.selectBookData.id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.sectionNoDataText = "数据加载失败!";
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (bookid != this.selectBookData.id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.sectionLists = res.data;
|
|
|
+ this.sectionNoDataText = "没有相关的数据";
|
|
|
+ }else{
|
|
|
+ this.sectionLists = [];
|
|
|
+ this.sectionNoDataText = res.msg;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onSectionAdd() {
|
|
|
+ this.$refs.sectionAdd.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loadIng++;
|
|
|
+ let bookid = this.selectBookData.id;
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'docs/section/add',
|
|
|
+ data: Object.assign(this.formSectionAdd, {
|
|
|
+ id: this.addSectionId,
|
|
|
+ bookid: bookid,
|
|
|
+ }),
|
|
|
+ complete: () => {
|
|
|
+ this.loadIng--;
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (bookid != this.selectBookData.id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.addSectionShow = false;
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ this.$refs.sectionAdd.resetFields();
|
|
|
+ //
|
|
|
+ this.getSectionLists();
|
|
|
+ }else{
|
|
|
+ this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ onSectionDelete(sectionId) {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: '删除文档',
|
|
|
+ content: '你确定要删除此文档吗?',
|
|
|
+ loading: true,
|
|
|
+ onOk: () => {
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'docs/section/delete',
|
|
|
+ data: {
|
|
|
+ id: sectionId
|
|
|
+ },
|
|
|
+ error: () => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ alert(this.$L('网络繁忙,请稍后再试!'));
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ this.getSectionLists();
|
|
|
+ //
|
|
|
+ setTimeout(() => {
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ } else {
|
|
|
+ this.$Modal.error({title: this.$L('温馨提示'), content: res.msg});
|
|
|
+ }
|
|
|
+ }, 350);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSection(act, detail) {
|
|
|
+ if (act == 'edit') {
|
|
|
+ this.addSectionId = detail.id;
|
|
|
+ this.addSectionShow = true
|
|
|
+ } else if (act == 'add') {
|
|
|
+ this.addSectionId = detail.id * -1;
|
|
|
+ this.addSectionShow = true
|
|
|
+ } else if (act == 'delete') {
|
|
|
+ this.onSectionDelete(detail.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|