254 lines
9.1 KiB
Vue
254 lines
9.1 KiB
Vue
<template>
|
||
<div class="file-content">
|
||
<div class="edit-header">
|
||
<div class="header-title">
|
||
<EPopover v-if="!equalContent" v-model="unsaveTip" class="file-unsave-tip">
|
||
<div class="task-detail-delete-file-popover">
|
||
<p>{{$L('未保存当前修改内容？')}}</p>
|
||
<div class="buttons">
|
||
<Button size="small" type="text" @click="unsaveGive">{{$L('放弃')}}</Button>
|
||
<Button size="small" type="primary" @click="unsaveSave">{{$L('保存')}}</Button>
|
||
</div>
|
||
</div>
|
||
<span slot="reference">[{{$L('未保存')}}*]</span>
|
||
</EPopover>
|
||
{{file.name}}
|
||
</div>
|
||
<div class="header-user">
|
||
<ul>
|
||
<li v-for="(userid, index) in editUser" :key="index" v-if="index <= 10">
|
||
<UserAvatar :userid="userid" :size="28" :border-witdh="2"/>
|
||
</li>
|
||
<li v-if="editUser.length > 10" class="more">{{editUser.length > 99 ? '99+' : editUser.length}}</li>
|
||
</ul>
|
||
</div>
|
||
<div v-if="file.type=='document' && contentDetail" class="header-hint">
|
||
<ButtonGroup size="small" shape="circle">
|
||
<Button :type="`${contentDetail.type!='md'?'primary':'default'}`" @click="$set(contentDetail, 'type', 'text')">{{$L('文本编辑器')}}</Button>
|
||
<Button :type="`${contentDetail.type=='md'?'primary':'default'}`" @click="$set(contentDetail, 'type', 'md')">{{$L('MD编辑器')}}</Button>
|
||
</ButtonGroup>
|
||
</div>
|
||
<div v-if="file.type=='mind'" class="header-hint">
|
||
{{$L('选中节点，按enter键添加同级节点，tab键添加子节点')}}
|
||
</div>
|
||
<Dropdown v-if="file.type=='mind' || file.type=='flow' || file.type=='sheet'"
|
||
trigger="click"
|
||
class="header-hint"
|
||
@on-click="exportMenu">
|
||
<a href="javascript:void(0)">{{$L('导出')}}<Icon type="ios-arrow-down"></Icon></a>
|
||
<DropdownMenu v-if="file.type=='sheet'" slot="list">
|
||
<DropdownItem name="xlsx">{{$L('导出XLSX')}}</DropdownItem>
|
||
<DropdownItem name="xlml">{{$L('导出XLS')}}</DropdownItem>
|
||
<DropdownItem name="csv">{{$L('导出CSV')}}</DropdownItem>
|
||
<DropdownItem name="txt">{{$L('导出TXT')}}</DropdownItem>
|
||
</DropdownMenu>
|
||
<DropdownMenu v-else slot="list">
|
||
<DropdownItem name="png">{{$L('导出PNG图片')}}</DropdownItem>
|
||
<DropdownItem name="pdf">{{$L('导出PDF文件')}}</DropdownItem>
|
||
</DropdownMenu>
|
||
</Dropdown>
|
||
<Button v-if="!file.only_view" :disabled="equalContent" :loading="loadIng > 0" class="header-button" size="small" type="primary" @click="handleClick('save')">{{$L('保存')}}</Button>
|
||
</div>
|
||
<div v-if="contentDetail" class="content-body">
|
||
<template v-if="file.type=='document'">
|
||
<MDEditor v-if="contentDetail.type=='md'" v-model="contentDetail.content" height="100%"/>
|
||
<TEditor v-else v-model="contentDetail.content" height="100%" @editorSave="handleClick('saveBefore')"/>
|
||
</template>
|
||
<Flow v-else-if="file.type=='flow'" ref="myFlow" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
|
||
<Minder v-else-if="file.type=='mind'" ref="myMind" v-model="contentDetail" @saveData="handleClick('saveBefore')"/>
|
||
<LuckySheet v-else-if="file.type=='sheet'" ref="mySheet" v-model="contentDetail"/>
|
||
<div v-if="loadContent > 0" class="content-load"><Loading/></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
import Minder from '../../../components/minder'
|
||
import {mapState} from "vuex";
|
||
Vue.use(Minder)
|
||
|
||
const MDEditor = () => import('../../../components/MDEditor/index');
|
||
const TEditor = () => import('../../../components/TEditor');
|
||
const LuckySheet = () => import('../../../components/LuckySheet');
|
||
const Flow = () => import('../../../components/flow');
|
||
|
||
export default {
|
||
name: "FileContent",
|
||
components: {TEditor, MDEditor, LuckySheet, Flow},
|
||
props: {
|
||
file: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
}
|
||
},
|
||
parentShow: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
loadContent: 0,
|
||
loadIng: 0,
|
||
|
||
fileId: 0,
|
||
|
||
unsaveTip: false,
|
||
|
||
contentDetail: null,
|
||
contentBak: {},
|
||
|
||
editUser: []
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
file: {
|
||
handler(info) {
|
||
if (this.fileId != info.id) {
|
||
this.fileId = info.id;
|
||
this.getContent();
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
|
||
wsMsg: {
|
||
handler({type, data}) {
|
||
if (type == 'path') {
|
||
if (data.path == 'file/content/' + this.fileId) {
|
||
this.editUser = data.userids;
|
||
}
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
|
||
parentShow: {
|
||
handler(val) {
|
||
if (!val) {
|
||
this.fileContent[this.fileId] = this.contentDetail;
|
||
} else {
|
||
this.editUser = [this.userId];
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['fileContent', 'wsMsg', 'userId']),
|
||
|
||
equalContent() {
|
||
return this.contentBak == $A.jsonStringify(this.contentDetail);
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
getContent() {
|
||
if (!this.fileId) {
|
||
this.contentDetail = {};
|
||
return;
|
||
}
|
||
if (typeof this.fileContent[this.fileId] !== "undefined") {
|
||
this.contentDetail = this.fileContent[this.fileId];
|
||
return;
|
||
}
|
||
this.loadIng++;
|
||
this.loadContent++;
|
||
this.$store.dispatch("call", {
|
||
url: 'file/content',
|
||
data: {
|
||
id: this.fileId,
|
||
},
|
||
}).then(({data}) => {
|
||
this.loadIng--;
|
||
this.loadContent--;
|
||
this.contentDetail = data.content;
|
||
this.updateBak();
|
||
}).catch(({msg}) => {
|
||
$A.modalError(msg);
|
||
this.loadIng--;
|
||
this.loadContent--;
|
||
})
|
||
},
|
||
|
||
updateBak() {
|
||
this.contentBak = $A.jsonStringify(this.contentDetail);
|
||
},
|
||
|
||
handleClick(act) {
|
||
switch (act) {
|
||
case "saveBefore":
|
||
if (!this.equalContent && this.loadIng == 0) {
|
||
this.handleClick('save');
|
||
} else {
|
||
$A.messageWarning('没有任何修改！');
|
||
}
|
||
return;
|
||
|
||
case "save":
|
||
if (this.file.only_view) {
|
||
return;
|
||
}
|
||
this.updateBak();
|
||
this.loadIng++;
|
||
this.$store.dispatch("call", {
|
||
url: 'file/content/save',
|
||
method: 'post',
|
||
data: {
|
||
id: this.fileId,
|
||
content: this.contentBak
|
||
},
|
||
}).then(({data, msg}) => {
|
||
$A.messageSuccess(msg);
|
||
this.loadIng--;
|
||
this.contentDetail = data.content;
|
||
this.updateBak();
|
||
this.$store.dispatch("saveFile", {
|
||
id: this.fileId,
|
||
size: data.size,
|
||
});
|
||
}).catch(({msg}) => {
|
||
$A.modalError(msg);
|
||
this.loadIng--;
|
||
this.getContent();
|
||
})
|
||
break;
|
||
}
|
||
},
|
||
|
||
exportMenu(act) {
|
||
switch (this.file.type) {
|
||
case 'mind':
|
||
this.$refs.myMind.exportHandle(act == 'pdf' ? 1 : 0, this.file.name);
|
||
break;
|
||
|
||
case 'flow':
|
||
this.$refs.myFlow[act == 'pdf' ? 'exportPDF' : 'exportPNG'](this.file.name, 3);
|
||
break;
|
||
|
||
case 'sheet':
|
||
this.$refs.mySheet.exportExcel(this.file.name, act);
|
||
break;
|
||
}
|
||
},
|
||
|
||
unsaveGive() {
|
||
delete this.fileContent[this.fileId];
|
||
this.getContent();
|
||
this.unsaveTip = false;
|
||
},
|
||
|
||
unsaveSave() {
|
||
this.handleClick('save');
|
||
this.unsaveTip = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|