|
@@ -20,30 +20,16 @@
|
|
|
class="layers"
|
|
|
:class="comIndex == index ? 'active-layer' : ''"
|
|
|
>
|
|
|
- <div class="drag-handle" draggable>
|
|
|
+ <!-- <div class="drag-handle" draggable>
|
|
|
<img src="@/icons/svg/drag.svg" style="width: 20px;" icon-class="drag" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- :options="categoryList":props="props" -->
|
|
|
- <div style="padding: 10px 0">
|
|
|
+ <!-- <div style="padding: 10px 0">
|
|
|
<el-form label-position="left" class="inline-form">
|
|
|
<el-row :gutter="24" style="margin-left: 0; margin-right: 0">
|
|
|
- <!-- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form-item label="模块分类:">
|
|
|
- <span @click="enableSelect(it)" style="cursor: pointer">{{
|
|
|
- getCategory(it.category_id)
|
|
|
- }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <el-form-item label="模块名称:">
|
|
|
- <span @click="enableName(it)" style="cursor: pointer">{{
|
|
|
- it.dcb_name
|
|
|
- }}</span>
|
|
|
- </el-form-item>
|
|
|
- </el-col> -->
|
|
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
<el-form-item
|
|
|
- ><!-- v-if="$store.state.user.roleInfo.id == 1" -->
|
|
|
+ >
|
|
|
<div class="btn-save">
|
|
|
<el-tooltip
|
|
|
v-if="type !== 'document'"
|
|
@@ -59,28 +45,12 @@
|
|
|
>
|
|
|
</el-button>
|
|
|
</el-tooltip>
|
|
|
- <!-- <el-tooltip
|
|
|
- class="item"
|
|
|
- effect="dark"
|
|
|
- content="另存为"
|
|
|
- placement="top"
|
|
|
- >
|
|
|
- <el-button
|
|
|
- circle
|
|
|
- size="mini"
|
|
|
- @click="onSaveAs(it)"
|
|
|
- v-if="it.id > 0"
|
|
|
- icon="el-icon-document-copy"
|
|
|
- >
|
|
|
- </el-button>
|
|
|
- </el-tooltip> && type !== 'document'-->
|
|
|
<el-button
|
|
|
circle
|
|
|
v-if="it.isEdit !== 1"
|
|
|
@click="onEdit(index, 1)"
|
|
|
icon="el-icon-edit"
|
|
|
>
|
|
|
- <!-- <svg-icon icon-class="edit" /> -->
|
|
|
</el-button>
|
|
|
<el-button
|
|
|
circle
|
|
@@ -89,7 +59,6 @@
|
|
|
v-else
|
|
|
>
|
|
|
</el-button>
|
|
|
- <!-- v-if="!templateId && type !== 'document'" -->
|
|
|
<el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
@@ -100,9 +69,7 @@
|
|
|
circle
|
|
|
@click="onRemove(index)"
|
|
|
icon="el-icon-delete"
|
|
|
- >
|
|
|
- <!-- <svg-icon icon-class="el-icon-delete"
|
|
|
- />--></el-button
|
|
|
+ ></el-button
|
|
|
>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
@@ -110,7 +77,7 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="main" @click="onSetActive(index)">
|
|
|
<component
|
|
|
:is="it.type"
|
|
@@ -636,51 +603,82 @@ export default {
|
|
|
},
|
|
|
async onEdit(e, state) {
|
|
|
try {
|
|
|
- // 如果是切换到预览模式,先等待保存完成
|
|
|
+ // 如果是切换到预览模式
|
|
|
if (state === 2) {
|
|
|
- console.log("isEditor:",'001');
|
|
|
- this.isSaving = true; // 设置保存状态
|
|
|
+ this.isSaving = true;
|
|
|
+
|
|
|
+ // 获取组件引用并添加详细日志
|
|
|
const componentRef = this.$refs[`component_${e}`];
|
|
|
- if (componentRef && componentRef.save) {
|
|
|
- // 等待保存完成
|
|
|
- await componentRef.save();
|
|
|
+ console.log("componentRef:", componentRef);
|
|
|
+
|
|
|
+ // 检查组件引用是否正确
|
|
|
+ if (!componentRef || !componentRef[0]) {
|
|
|
+ console.error(`组件引用获取失败: component_${e}`);
|
|
|
+ throw new Error('组件引用不存在');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查 save 方法是否存在
|
|
|
+ if (typeof componentRef[0].save !== 'function') {
|
|
|
+ console.error('组件没有 save 方法:', componentRef[0]);
|
|
|
+ throw new Error('组件 save 方法不存在');
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 1. 等待组件内容保存
|
|
|
+ console.log('开始保存组件内容...');
|
|
|
+ await componentRef[0].save();
|
|
|
+ console.log('组件内容保存完成');
|
|
|
+
|
|
|
+ // 2. 等待父组件的更新完成
|
|
|
+ console.log('开始更新父组件...');
|
|
|
+ await new Promise(resolve => {
|
|
|
+ this.$nextTick(async () => {
|
|
|
+ await this.$emit("onRebuild", this.comList);
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log('父组件更新完成');
|
|
|
|
|
|
- // 在保存完成后,手动更新组件状态
|
|
|
+ // 3. 更新编辑状态
|
|
|
+ console.log('更新编辑状态...');
|
|
|
this.$set(this.comList[e], 'isEdit', 2);
|
|
|
|
|
|
- // 立即触发更新
|
|
|
+ // 4. 确保视图更新完成
|
|
|
await this.$nextTick();
|
|
|
+ console.log('视图更新完成');
|
|
|
|
|
|
- // 通知父组件更新
|
|
|
- this.$emit("onRebuild", this.comList);
|
|
|
-
|
|
|
- this.isSaving = false; // 重置保存状态
|
|
|
- return; // 直接返回,不执行后续的批量更新
|
|
|
+ } catch (error) {
|
|
|
+ console.error('保存过程中出错:', error);
|
|
|
+ this.$message.error('保存失败:' + error.message);
|
|
|
+ throw error;
|
|
|
}
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ // 编辑模式的处理...
|
|
|
+ console.log('切换到编辑模式...');
|
|
|
+ this.comList = this.comList.map((it, index) => {
|
|
|
+ it.isEdit = 2;
|
|
|
+ if (index === e && state === 1) {
|
|
|
+ this.filterAttrs(it);
|
|
|
+ }
|
|
|
+ return it;
|
|
|
+ });
|
|
|
|
|
|
- // 如果是切换到编辑模式,执行原有逻辑
|
|
|
- this.comList = this.comList.map((it, index) => {
|
|
|
- it.isEdit = 2;
|
|
|
-
|
|
|
- if (index === e && state === 1) {
|
|
|
- this.filterAttrs(it);
|
|
|
+ if (state === 1) {
|
|
|
+ this.comList[e].isEdit = 1;
|
|
|
+ this.onSetActive(e);
|
|
|
}
|
|
|
- return it;
|
|
|
- });
|
|
|
-
|
|
|
- if (state === 1) {
|
|
|
- this.comList[e].isEdit = 1;
|
|
|
- this.onSetActive(e);
|
|
|
}
|
|
|
|
|
|
- this.$emit("onRebuild", this.comList);
|
|
|
+ // 触发重建
|
|
|
+ await this.$emit("onRebuild", this.comList);
|
|
|
+ console.log('重建完成');
|
|
|
|
|
|
} catch (error) {
|
|
|
- console.error('保存失败:', error);
|
|
|
- this.$message.error('切换模式失败,请重试');
|
|
|
+ console.error('切换模式失败:', error);
|
|
|
+ this.$message.error('切换模式失败:' + error.message);
|
|
|
} finally {
|
|
|
- this.isSaving = false; // 确保在出错时也重置保存状态
|
|
|
+ this.isSaving = false;
|
|
|
+ console.log('操作完成,isSaving 重置为 false');
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -714,13 +712,28 @@ export default {
|
|
|
onSetActive(e) {
|
|
|
this.$emit("onSetActiveIndex", e);
|
|
|
},
|
|
|
+ // 添加一个辅助方法来验证组件引用
|
|
|
+ validateComponentRef(ref, index) {
|
|
|
+ if (!ref) {
|
|
|
+ throw new Error(`组件引用为空 (index: ${index})`);
|
|
|
+ }
|
|
|
+ if (!Array.isArray(ref)) {
|
|
|
+ throw new Error(`组件引用不是数组 (index: ${index})`);
|
|
|
+ }
|
|
|
+ if (!ref[0]) {
|
|
|
+ throw new Error(`组件引用数组为空 (index: ${index})`);
|
|
|
+ }
|
|
|
+ if (!ref[0].save) {
|
|
|
+ throw new Error(`组件没有 save 方法 (index: ${index})`);
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
@import "./editor.scss";
|
|
|
.layers {
|
|
|
- margin-left: 26px;
|
|
|
+ // margin-left: 26px;
|
|
|
.drag-handle {
|
|
|
position: absolute;
|
|
|
top: 0;
|