|
|
@@ -136,7 +136,7 @@
|
|
|
<!-- 表格详情 -->
|
|
|
<div class="sheet-detail-wrapper" v-if="select_id">
|
|
|
<div class="detail-top">
|
|
|
- <!-- <el-input
|
|
|
+ <el-input
|
|
|
ref="sheetEditTitRef"
|
|
|
style="width: 400px"
|
|
|
placeholder="请输入表格名称"
|
|
|
@@ -144,18 +144,18 @@
|
|
|
v-model="sheet_title"
|
|
|
v-if="sheetDetailInfo.isEditTit"
|
|
|
@blur="changeValue(sheetDetailInfo, 'edit-tit')"
|
|
|
- /> -->
|
|
|
- <!-- <span
|
|
|
+ />
|
|
|
+ <span
|
|
|
class="sheet-name"
|
|
|
- @click="editNodeLabel(sheetDetailInfo, 'edit-tit')"
|
|
|
+ @click="editExcelName(sheetDetailInfo, 'edit-tit')"
|
|
|
v-else
|
|
|
>
|
|
|
{{ sheetDetailInfo.ExcelName }}
|
|
|
- <i class="el-icon-edit" v-if="sheetDetailInfo.Source === 1" />
|
|
|
- </span> -->
|
|
|
- <div class="sheet-name">
|
|
|
+ <i class="el-icon-edit" v-if="sheetDetailInfo.Source === 1 && onlineExcelEditing" />
|
|
|
+ </span>
|
|
|
+ <!-- <div class="sheet-name">
|
|
|
{{ sheetDetailInfo.ExcelName }}
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="sheet-anothor-info">
|
|
|
<span class="author">作者：{{ sheetDetailInfo.SysUserRealName }}</span>
|
|
|
<ul class="action-ul">
|
|
|
@@ -163,11 +163,19 @@
|
|
|
<li
|
|
|
class="editsty"
|
|
|
@click="goEditHandle"
|
|
|
- v-if="(sheetDetailInfo.Button && sheetDetailInfo.Button.OpButton&&isSheetBtnShow('edit'))"
|
|
|
+ v-if="(sheetDetailInfo.Button && sheetDetailInfo.Button.OpButton&&isSheetBtnShow('edit') && (!onlineExcelEditing))"
|
|
|
>
|
|
|
<img src="~@/assets/img/icons/edit_blue_new.png" v-if="!editButtonText"/>
|
|
|
<span>{{ editButtonText?editButtonText:'编辑' }}</span>
|
|
|
</li>
|
|
|
+ <li
|
|
|
+ class="editsty"
|
|
|
+ @click="saveHandle"
|
|
|
+ v-if="(sheetDetailInfo.Button && sheetDetailInfo.Button.OpButton&&isSheetBtnShow('save') && onlineExcelEditing)"
|
|
|
+ >
|
|
|
+ <img src="~@/assets/img/icons/save_blue_new.png"/>
|
|
|
+ <span>保存</span>
|
|
|
+ </li>
|
|
|
<template v-if="[2, 3].includes(sheetDetailInfo.Source)">
|
|
|
<li
|
|
|
class="editsty"
|
|
|
@@ -218,7 +226,14 @@
|
|
|
scrollLeft: 0
|
|
|
}]
|
|
|
}"
|
|
|
- :limit="{disabled:true}"
|
|
|
+ :sheetInfo="{
|
|
|
+ ExcelInfoId: sheetDetailInfo.ExcelInfoId,
|
|
|
+ ExcelName: sheetDetailInfo.ExcelName,
|
|
|
+ ExcelClassifyId: sheetDetailInfo.ExcelClassifyId,
|
|
|
+ Source: sheetDetailInfo.Source
|
|
|
+ }"
|
|
|
+ :limit="limit"
|
|
|
+ @updated="autoSaveFun"
|
|
|
/>
|
|
|
|
|
|
<!-- 自定义表格 -->
|
|
|
@@ -328,6 +343,12 @@ export default {
|
|
|
name: "",
|
|
|
components: { mDialog, classifyDia, Sheet, CustomTable, MixedTable,sheetListWrap },
|
|
|
mixins: [leftMixin],
|
|
|
+ beforeRouteLeave(to,from,next){
|
|
|
+ if(from.path=='/sheetList' && to.path!='/sheetList'){
|
|
|
+ this.markFinishStatus()
|
|
|
+ }
|
|
|
+ next()
|
|
|
+ },
|
|
|
computed: {
|
|
|
downExcelFileUrl() {
|
|
|
let url = `${
|
|
|
@@ -398,8 +419,12 @@ export default {
|
|
|
},
|
|
|
saveTime:"",
|
|
|
editButtonText:"",
|
|
|
- adminId:localStorage.getItem("AdminId") || '0',
|
|
|
- excelAdminId:""
|
|
|
+ onlineExcelEditing:false,
|
|
|
+ limit:{
|
|
|
+ disabled:true
|
|
|
+ },
|
|
|
+ autoSaveType:'',//自动保存类型，有的自动保存后需要其他操作
|
|
|
+ cancelAutoSave:false, //自动保存时延迟的
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -411,8 +436,9 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
/* 表格id */
|
|
|
- select_id(newval) {
|
|
|
+ select_id(newval,oldVlue) {
|
|
|
newval && this.getDetailHandle();
|
|
|
+ this.markFinishStatus(oldVlue)
|
|
|
},
|
|
|
|
|
|
select_classify(newval) {
|
|
|
@@ -441,6 +467,18 @@ export default {
|
|
|
this.select_id = newval;
|
|
|
}
|
|
|
},
|
|
|
+ onlineExcelEditing(value){
|
|
|
+ // console.log(value);
|
|
|
+ this.limit.disabled = !value
|
|
|
+ },
|
|
|
+ 'sheetDetailInfo.ExcelName':{
|
|
|
+ handler:function(newValue,oldValue){
|
|
|
+ if(newValue && oldValue){
|
|
|
+ this.autoSaveType = 'nameEdit'
|
|
|
+ this.autoSaveFun()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
/* 添加表格 */
|
|
|
@@ -662,7 +700,6 @@ export default {
|
|
|
spinner: "el-icon-loading",
|
|
|
background: "rgba(255, 255, 255, 0.6)",
|
|
|
});
|
|
|
-
|
|
|
let img = getSheetImage(data);
|
|
|
const form = new FormData();
|
|
|
form.append("Image", img);
|
|
|
@@ -670,6 +707,9 @@ export default {
|
|
|
|
|
|
data.luckysheet_select_save = [];
|
|
|
const { ExcelInfoId, ExcelName, ExcelClassifyId } = this.sheetDetailInfo;
|
|
|
+
|
|
|
+ this.cancelAutoSave=true
|
|
|
+
|
|
|
const res = await sheetInterface.sheetEdit({
|
|
|
ExcelInfoId,
|
|
|
ExcelName,
|
|
|
@@ -684,7 +724,34 @@ export default {
|
|
|
|
|
|
this.getDetailHandle();
|
|
|
}, 300),
|
|
|
+ autoSaveFun:_.debounce(async function(){
|
|
|
+ console.log("自动保存");
|
|
|
+ if(!this.onlineExcelEditing || this.cancelAutoSave){
|
|
|
+ this.cancelAutoSave=false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ luckysheet.exitEditMode();
|
|
|
+ //结构类型乱飘 强制定义下
|
|
|
+ let data = {...luckysheet.getAllSheets()[0],status:Number(luckysheet.getAllSheets()[0].status)}
|
|
|
+ if (!data.celldata.length) return this.$message.warning("请输入表格内容");
|
|
|
+
|
|
|
+ data.luckysheet_select_save = [];
|
|
|
+ const { ExcelInfoId, ExcelName, ExcelClassifyId } = this.sheetDetailInfo;
|
|
|
+ const res = await sheetInterface.sheetEdit({
|
|
|
+ ExcelInfoId,
|
|
|
+ ExcelName,
|
|
|
+ ExcelClassifyId,
|
|
|
+ Content: JSON.stringify(data),
|
|
|
+ });
|
|
|
+ if (res.Ret !== 200) return;
|
|
|
+ if(this.autoSaveType == "nameEdit"){
|
|
|
+ this.getTreeData();
|
|
|
+ this.autoSaveType=''
|
|
|
+ }
|
|
|
+
|
|
|
+ this.saveTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
|
+ },1500),
|
|
|
/* 获取表格列表 */
|
|
|
getPublicList() {
|
|
|
sheetInterface.sheetList({
|
|
|
@@ -731,10 +798,7 @@ export default {
|
|
|
|
|
|
this.sheetDetailInfo = res.Data;
|
|
|
this.saveTime = this.$moment(this.sheetDetailInfo.ModifyTime).format('YYYY-MM-DD HH:mm:ss')||''
|
|
|
- this.excelAdminId = this.sheetDetailInfo.SysUserId
|
|
|
this.editButtonText = this.sheetDetailInfo.CanEdit?'':`${this.sheetDetailInfo.Editor}编辑中`
|
|
|
- //从nextTick里面拉出来 更多功能按钮 显示的出来 但是删除表格，请求下一个表格详情时，表格内容不会更新。
|
|
|
- // this.sheetDetailInfo.Source === 1 && this.$refs.sheetRef && this.$refs.sheetRef.init();
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
@@ -774,8 +838,7 @@ export default {
|
|
|
3: "/addMixedSheet",
|
|
|
};
|
|
|
if(this.sheetDetailInfo.Source === 1) {
|
|
|
- const { href } = this.$router.resolve({ path: path[this.sheetDetailInfo.Source],query: { id: this.sheetDetailInfo.ExcelInfoId } });
|
|
|
- window.open(href, "_blank");
|
|
|
+ this.onlineExcelEditing=true
|
|
|
}else {
|
|
|
this.$router.push({
|
|
|
path: path[this.sheetDetailInfo.Source],
|
|
|
@@ -841,6 +904,23 @@ export default {
|
|
|
let left = $("#left")[0].offsetWidth;
|
|
|
let rigtWid = total_wid - left - 20 + "px";
|
|
|
$("#right")[0].style.width = rigtWid;
|
|
|
+ },
|
|
|
+ editExcelName(sheetDetailInfo, type){
|
|
|
+ if(!this.onlineExcelEditing) return
|
|
|
+ this.editNodeLabel(sheetDetailInfo, type)
|
|
|
+ },
|
|
|
+ // 标记 编辑完成
|
|
|
+ markFinishStatus(select_id){
|
|
|
+ // console.log(select_id,'markFinishStatus',this.select_id);
|
|
|
+ let id = select_id || this.select_id
|
|
|
+ if((!this.onlineExcelEditing) || (!id) || id=='0'){
|
|
|
+ this.onlineExcelEditing=false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ sheetInterface.markSheetEditStatus({ExcelInfoId: +id,Status:2}).then(res=>{
|
|
|
+ if(res.Ret != 200) return
|
|
|
+ })
|
|
|
+ this.onlineExcelEditing=false
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -855,9 +935,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
window.addEventListener("resize", this.reloadRightWid);
|
|
|
+ if(this.$route.path == '/sheetList'){
|
|
|
+ window.addEventListener('beforeunload',this.markFinishStatus)
|
|
|
+ }
|
|
|
},
|
|
|
destroyed() {
|
|
|
window.removeEventListener("resize", this.reloadRightWid);
|
|
|
+ if(this.$route.path == '/sheetList'){
|
|
|
+ window.removeEventListener('beforeunload',this.markFinishStatus)
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
hbchen