|
|
|
@ -226,10 +226,29 @@
|
|
|
|
|
v-for="(step, index) in actionStepsList"
|
|
|
|
|
:key="step.tempId || step.objId"
|
|
|
|
|
class="step-item"
|
|
|
|
|
:data-index="index"
|
|
|
|
|
>
|
|
|
|
|
<div class="step-header">
|
|
|
|
|
<span class="step-number">步骤 {{ step.stepSequence }}</span>
|
|
|
|
|
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeActionStep(index)" circle></el-button>
|
|
|
|
|
<div class="step-controls">
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="index > 0"
|
|
|
|
|
type="text"
|
|
|
|
|
size="mini"
|
|
|
|
|
icon="el-icon-top"
|
|
|
|
|
@click="moveStepUp(index)"
|
|
|
|
|
title="上移"
|
|
|
|
|
></el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
v-if="index < actionStepsList.length - 1"
|
|
|
|
|
type="text"
|
|
|
|
|
size="mini"
|
|
|
|
|
icon="el-icon-bottom"
|
|
|
|
|
@click="moveStepDown(index)"
|
|
|
|
|
title="下移"
|
|
|
|
|
></el-button>
|
|
|
|
|
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeActionStep(index)" circle></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="step-content">
|
|
|
|
@ -275,8 +294,8 @@
|
|
|
|
|
:key="image.tempId || image.objId"
|
|
|
|
|
class="image-item"
|
|
|
|
|
>
|
|
|
|
|
<div class="image-preview" @click="previewImage(image.imageUrl)">
|
|
|
|
|
<img :src="image.imageUrl" alt="预览图" />
|
|
|
|
|
<div class="image-preview" @click="previewImage(getFullImageUrl(image.imageUrl))">
|
|
|
|
|
<img :src="getFullImageUrl(image.imageUrl)" alt="预览图" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-info">
|
|
|
|
|
<el-input
|
|
|
|
@ -611,9 +630,17 @@ export default {
|
|
|
|
|
step.stepImages = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 从完整URL中提取相对路径,只保存相对路径到数据库
|
|
|
|
|
let relativePath = res.url;
|
|
|
|
|
if (res.url.startsWith('http')) {
|
|
|
|
|
// 如果是完整URL,提取相对路径部分
|
|
|
|
|
const urlObj = new URL(res.url);
|
|
|
|
|
relativePath = urlObj.pathname;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const newImage = {
|
|
|
|
|
tempId: Date.now() + Math.random(),
|
|
|
|
|
imageUrl: res.url,
|
|
|
|
|
imageUrl: relativePath, // 只存储相对路径
|
|
|
|
|
imageSequence: step.stepImages.length + 1,
|
|
|
|
|
description: ''
|
|
|
|
|
};
|
|
|
|
@ -695,6 +722,41 @@ export default {
|
|
|
|
|
previewImage(url) {
|
|
|
|
|
this.previewImageUrl = url;
|
|
|
|
|
this.imagePreviewVisible = true;
|
|
|
|
|
},
|
|
|
|
|
moveStepUp(index) {
|
|
|
|
|
if (index > 0) {
|
|
|
|
|
const temp = this.actionStepsList[index];
|
|
|
|
|
this.actionStepsList[index] = this.actionStepsList[index - 1];
|
|
|
|
|
this.actionStepsList[index - 1] = temp;
|
|
|
|
|
// 重新排序步骤序号
|
|
|
|
|
this.actionStepsList.forEach((step, idx) => {
|
|
|
|
|
step.stepSequence = idx + 1;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
moveStepDown(index) {
|
|
|
|
|
if (index < this.actionStepsList.length - 1) {
|
|
|
|
|
const temp = this.actionStepsList[index];
|
|
|
|
|
this.actionStepsList[index] = this.actionStepsList[index + 1];
|
|
|
|
|
this.actionStepsList[index + 1] = temp;
|
|
|
|
|
// 重新排序步骤序号
|
|
|
|
|
this.actionStepsList.forEach((step, idx) => {
|
|
|
|
|
step.stepSequence = idx + 1;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 获取完整的图片URL
|
|
|
|
|
getFullImageUrl(relativePath) {
|
|
|
|
|
if (!relativePath) return '';
|
|
|
|
|
|
|
|
|
|
// 如果已经是完整URL,直接返回(兼容历史数据)
|
|
|
|
|
if (relativePath.startsWith('http')) {
|
|
|
|
|
return relativePath;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 动态拼接当前环境的baseURL
|
|
|
|
|
const baseURL = process.env.VUE_APP_BASE_API || '';
|
|
|
|
|
return baseURL + relativePath;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -746,6 +808,21 @@ export default {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.step-controls {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
|
|
|
|
|
.el-button--text {
|
|
|
|
|
color: #606266;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.step-content {
|
|
|
|
|