This commit is contained in:
parent
9a51d08428
commit
ea5813bea7
|
|
@ -3,9 +3,19 @@
|
|||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="problem_form">
|
||||
<el-form :inline="true" ref="form" :model="dataForm" label-width="60px">
|
||||
<el-form
|
||||
:inline="true"
|
||||
ref="form"
|
||||
:model="dataForm"
|
||||
label-width="60px"
|
||||
>
|
||||
<el-form-item label="关键字:">
|
||||
<el-input v-model="dataForm.keyword" placeholder="请输入搜索关键字" style="width: 400px;" class="filter-item" />
|
||||
<el-input
|
||||
v-model="dataForm.keyword"
|
||||
placeholder="请输入搜索关键字"
|
||||
style="width: 400px"
|
||||
class="filter-item"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="success" @click="onSubmit">查询</el-button>
|
||||
|
|
@ -15,26 +25,58 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<div class="problem_container">
|
||||
<div class="problem_left" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto;padding: 10px;">
|
||||
<div @click="handleQacityl(item.city_id)" class="btn" v-for="item in getQaCityList">{{ item.city_name }}</div>
|
||||
<div
|
||||
class="problem_left"
|
||||
v-infinite-scroll="load"
|
||||
:infinite-scroll-immediate="false"
|
||||
style="overflow: auto; padding: 10px"
|
||||
>
|
||||
<div
|
||||
@click="handleQacityl(item.city_id)"
|
||||
class="btn"
|
||||
v-for="item in getQaCityList"
|
||||
>
|
||||
{{ item.city_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="problem_right">
|
||||
<ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto">
|
||||
<ul
|
||||
class="infinite-list"
|
||||
v-infinite-scroll="load"
|
||||
:infinite-scroll-immediate="false"
|
||||
style="overflow: auto"
|
||||
>
|
||||
<li class="problem_right_container" v-for="item in getQaLists">
|
||||
<div class="title">
|
||||
<span v-html="handleprant(item.title)"></span>
|
||||
<!-- <el-button @click="handleZip(item.img_zip)" type="primary">下载图片</el-button>
|
||||
<el-button @click="handleZip(item.trip_zip)" type="primary">下载行程</el-button> -->
|
||||
<el-button @click="showImgDialog(item.img_zip)" type="primary">下载图片</el-button>
|
||||
<el-button @click="showFileList(item.trip_zip)" type="primary" style="margin-left: 10px;">下载行程</el-button>
|
||||
<el-button @click="showImgDialog(item.img_zip)" type="primary"
|
||||
>下载图片</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="showFileList(item.trip_zip)"
|
||||
type="primary"
|
||||
style="margin-left: 10px"
|
||||
>下载行程</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="desc_container" v-for="list in item.qaQuestions">
|
||||
<span style="font-weight: 700;color: #46a6ff;" class="desc" v-html="handleprant(list.title)">
|
||||
<span
|
||||
style="font-weight: 700; color: #46a6ff"
|
||||
class="desc"
|
||||
v-html="handleprant(list.title)"
|
||||
>
|
||||
</span>
|
||||
<el-button @click="copyToClipboard(list.content)" type="primary" size="mini" style="margin-left: 10px;">复制</el-button>
|
||||
<el-button
|
||||
@click="copyToClipboard(list.content)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
style="margin-left: 10px"
|
||||
>复制</el-button
|
||||
>
|
||||
|
||||
<div class="desc" v-html="handleprantHtml(list.content)">
|
||||
</div>
|
||||
<div class="desc" v-html="handleprantHtml(list.content)"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -50,10 +92,18 @@
|
|||
class="image-card"
|
||||
:body-style="{ padding: '10px' }"
|
||||
>
|
||||
<img :src="image.url" class="image-preview" />
|
||||
<div style="text-align: center">{{ image.desc }}</div>
|
||||
<img :src="image.file" class="image-preview" />
|
||||
<div class="image-footer">
|
||||
<el-button @click="handlePreview(image.url)" size="mini">查看</el-button>
|
||||
<el-button @click="handleDownload(image.url)" type="success" size="mini">下载</el-button>
|
||||
<el-button @click="handlePreview(image.file)" size="mini"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleDownload(image.file)"
|
||||
type="success"
|
||||
size="mini"
|
||||
>下载</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -74,12 +124,17 @@
|
|||
>
|
||||
<div class="file-info">
|
||||
<el-icon class="file-icon">
|
||||
<i :class="getFileIcon(file.url)"></i>
|
||||
<i :class="getFileIcon(file.file)"></i>
|
||||
</el-icon>
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<span class="file-name">{{ file.desc }}</span>
|
||||
</div>
|
||||
<div class="file-footer">
|
||||
<el-button @click="handleDownload(file.url)" type="success" size="mini">下载</el-button>
|
||||
<el-button
|
||||
@click="handleDownload(file.file)"
|
||||
type="success"
|
||||
size="mini"
|
||||
>下载</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -99,7 +154,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getQaCityList, getQaList } from '@/api/qa'
|
||||
import { getQaCityList, getQaList } from "@/api/qa";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -107,110 +162,115 @@ export default {
|
|||
getQaCityList: [],
|
||||
getQaLists: [],
|
||||
dataForm: {
|
||||
keyword: '',
|
||||
city_id: ''
|
||||
keyword: "",
|
||||
city_id: "",
|
||||
},
|
||||
dialogImage: false, // 控制图片列表对话框的显示
|
||||
previewVisible: false, // 控制图片预览对话框的显示
|
||||
previewImageUrl: '', // 预览图片的 URL
|
||||
previewTitle: '', // 预览图片的标题
|
||||
imageList: [ // 示例图片列表
|
||||
previewImageUrl: "", // 预览图片的 URL
|
||||
previewTitle: "", // 预览图片的标题
|
||||
imageList: [
|
||||
// 示例图片列表
|
||||
],
|
||||
fileList: [ // 示例图片列表
|
||||
fileList: [
|
||||
// 示例图片列表
|
||||
],
|
||||
dialogFile: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getQaCityList().then(res => {
|
||||
this.getQaCityList = res.data
|
||||
})
|
||||
getQaCityList().then((res) => {
|
||||
this.getQaCityList = res.data;
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
'dataForm.keyword': function (newVal) {
|
||||
"dataForm.keyword": function (newVal) {
|
||||
if (newVal) {
|
||||
this.onSubmit();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 显示文件列表对话框
|
||||
showFileList(fileUrl) {
|
||||
this.fileList = [];
|
||||
if (fileUrl) {
|
||||
this.fileList = fileUrl.split(',').map(url => ({ url, name: url.split('/').pop() }));
|
||||
if (fileUrl.length) {
|
||||
this.fileList = fileUrl;
|
||||
}
|
||||
this.dialogFile = true;
|
||||
},
|
||||
// 根据文件 URL 获取文件图标
|
||||
getFileIcon(url) {
|
||||
const ext = url.split('.').pop().toLowerCase();
|
||||
const ext = url.split(".").pop().toLowerCase();
|
||||
console.log(ext);
|
||||
switch (ext) {
|
||||
case 'pdf':
|
||||
return 'el-icon-file-pdf';
|
||||
case 'docx':
|
||||
return 'el-icon-file-word';
|
||||
case 'pptx':
|
||||
return 'el-icon-file-ppt';
|
||||
case 'xlsx':
|
||||
return 'el-icon-file-excel';
|
||||
case "pdf":
|
||||
return "el-icon-file-pdf";
|
||||
case "docx":
|
||||
return "el-icon-file-word";
|
||||
case "pptx":
|
||||
return "el-icon-file-ppt";
|
||||
case "xlsx":
|
||||
return "el-icon-file-excel";
|
||||
default:
|
||||
return 'el-icon-file';
|
||||
return "el-icon-file";
|
||||
}
|
||||
},
|
||||
handleQacityl(val) {
|
||||
getQaList({ city_id: val }).then(res => {
|
||||
this.getQaLists = res.data.data
|
||||
})
|
||||
getQaList({ city_id: val }).then((res) => {
|
||||
this.getQaLists = res.data.data;
|
||||
});
|
||||
},
|
||||
handleZip(url) {
|
||||
if (url) {
|
||||
// window.open(url)
|
||||
fetch(url)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const link = document.createElement('a');
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const link = document.createElement("a");
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
link.href = objectUrl;
|
||||
link.download = url.split('/').pop(); // Extract filename from URL
|
||||
link.download = url.split("/").pop(); // Extract filename from URL
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '下载失败',
|
||||
type: 'error'
|
||||
message: "下载失败",
|
||||
type: "error",
|
||||
});
|
||||
console.error('Download error:', error);
|
||||
console.error("Download error:", error);
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '暂无下载链接',
|
||||
type: 'warning'
|
||||
message: "暂无下载链接",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
},
|
||||
load() {
|
||||
console.log('load')
|
||||
console.log("load");
|
||||
},
|
||||
handleprant(val) {
|
||||
if (!val) return ''; // 处理空值情况，避免返回 undefined 或其他非字符串值
|
||||
if (!val) return ""; // 处理空值情况，避免返回 undefined 或其他非字符串值
|
||||
|
||||
let replaceReg = new RegExp(this.dataForm.keyword, "ig");
|
||||
let replaceString = `<span style="color: #fff;background-color: #FC0421FF;">${this.dataForm.keyword}</span>`;
|
||||
return val.replace(replaceReg, replaceString);
|
||||
},
|
||||
handleprantHtml(val) {
|
||||
if (!val) return '';
|
||||
if (!val) return "";
|
||||
|
||||
let p = this.dataForm.keyword;
|
||||
let regexp = new RegExp(p, "g");
|
||||
let replacedHtml = val.replace(/(?<=>)[^>]+(?=<[/]?\w+.*>)/g, (v) => {
|
||||
return v.replace(regexp, `<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`);
|
||||
return v.replace(
|
||||
regexp,
|
||||
`<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`
|
||||
);
|
||||
});
|
||||
// 检查是否有替换发生
|
||||
if (replacedHtml === val) {
|
||||
|
|
@ -220,32 +280,31 @@ export default {
|
|||
return replacedHtml;
|
||||
},
|
||||
onSubmit() {
|
||||
getQaList(this.dataForm).then(res => {
|
||||
this.getQaLists = res.data.data
|
||||
})
|
||||
getQaList(this.dataForm).then((res) => {
|
||||
this.getQaLists = res.data.data;
|
||||
});
|
||||
},
|
||||
copyToClipboard(html) {
|
||||
const text = this.stripHtml(html);
|
||||
const input = document.createElement('textarea');
|
||||
const input = document.createElement("textarea");
|
||||
input.value = text;
|
||||
document.body.appendChild(input);
|
||||
input.select();
|
||||
document.execCommand('copy');
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(input);
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '内容已复制'
|
||||
message: "内容已复制",
|
||||
});
|
||||
},
|
||||
stripHtml(html) {
|
||||
const div = document.createElement('div');
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = html;
|
||||
return div.textContent || div.innerText || '';
|
||||
return div.textContent || div.innerText || "";
|
||||
},
|
||||
showImgDialog(imagesUrls) {
|
||||
this.imageList = []
|
||||
if (imagesUrls) {
|
||||
this.imageList = imagesUrls.split(',').map(url => ({ url }));
|
||||
if (imagesUrls.length) {
|
||||
this.imageList = imagesUrls;
|
||||
}
|
||||
|
||||
this.dialogImage = true;
|
||||
|
|
@ -253,7 +312,7 @@ export default {
|
|||
// 处理图片预览
|
||||
handlePreview(url) {
|
||||
this.previewImageUrl = url;
|
||||
this.previewTitle = '图片预览';
|
||||
this.previewTitle = "图片预览";
|
||||
this.previewVisible = true;
|
||||
},
|
||||
// 处理图片删除
|
||||
|
|
@ -265,35 +324,35 @@ export default {
|
|||
if (url) {
|
||||
// window.open(url)
|
||||
fetch(url)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const link = document.createElement('a');
|
||||
.then((response) => response.blob())
|
||||
.then((blob) => {
|
||||
const link = document.createElement("a");
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
link.href = objectUrl;
|
||||
link.download = url.split('/').pop(); // Extract filename from URL
|
||||
link.download = url.split("/").pop(); // Extract filename from URL
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '下载失败',
|
||||
type: 'error'
|
||||
message: "下载失败",
|
||||
type: "error",
|
||||
});
|
||||
console.error('Download error:', error);
|
||||
console.error("Download error:", error);
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '暂无下载链接',
|
||||
type: 'warning'
|
||||
message: "暂无下载链接",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -96,14 +96,20 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<el-dialog :title="title" :visible.sync="dialogCreate">
|
||||
<el-button
|
||||
class="filter-items"
|
||||
v-loading="loading"
|
||||
type="primary"
|
||||
@click="onSave"
|
||||
<el-dialog
|
||||
v-if="dialogCreate"
|
||||
ref="dialog"
|
||||
:title="title"
|
||||
:visible.sync="dialogCreate"
|
||||
>
|
||||
<div
|
||||
style="display: flex; justify-content: flex-end; margin-bottom: 10px"
|
||||
>
|
||||
<el-button v-loading="loading" type="primary" @click="onSave"
|
||||
>保 存</el-button
|
||||
>
|
||||
</div>
|
||||
<el-scrollbar ref="scrollbar" class="scrollable-container">
|
||||
<el-form ref="addForm" label-width="120px" :model="anchors">
|
||||
<el-form-item label="城市" prop="city_id">
|
||||
<el-select v-model="anchors.city_id" placeholder="请选择">
|
||||
|
|
@ -172,7 +178,11 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<div
|
||||
style="display: flex; justify-content: flex-end; margin-bottom: 10px"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<el-button type="primary" @click="onAddImg()">添加图片</el-button>
|
||||
</div>
|
||||
|
|
@ -183,7 +193,6 @@
|
|||
@click.stop="handleClose('img_zip', index)"
|
||||
class="close el-icon-close"
|
||||
/>
|
||||
<el-input v-model="item.desc" placeholder="图片说明"></el-input>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action=""
|
||||
|
|
@ -210,12 +219,17 @@
|
|||
</div>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<el-input v-model="item.desc" placeholder="图片说明"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: red">(请上传.jpg, png的图片)</div>
|
||||
</el-form-item>
|
||||
<div
|
||||
style="display: flex; justify-content: flex-end; margin-bottom: 10px"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
<el-button type="primary" @click="onAddtrip()">添加行程</el-button>
|
||||
</div>
|
||||
|
|
@ -226,7 +240,6 @@
|
|||
@click.stop="handleClose('trip_zip', index)"
|
||||
class="close el-icon-close"
|
||||
/>
|
||||
<el-input v-model="item.desc" placeholder="行程说明"></el-input>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action=""
|
||||
|
|
@ -253,12 +266,15 @@
|
|||
</div>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<el-input v-model="item.desc" placeholder="行程说明"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
|
||||
<span style="color: red"
|
||||
>(本行程请上传,ppt,word,pdf格式的文件)</span
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer"></div>
|
||||
</el-scrollbar>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -524,18 +540,30 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scrollable-container {
|
||||
// position: relative;
|
||||
height: 500px; /* 可以根据实际情况调整高度 */
|
||||
// overflow-y: auto;
|
||||
}
|
||||
::v-deep.el-scrollbar .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.upload-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.wu-yu {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 110px;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
& + .wu-yu {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep.el-input {
|
||||
width: 100px;
|
||||
margin: 0 0 10px 10px;
|
||||
margin: 10px 0 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue