Skip to content

E
exhibition_backstage
提交 f1bda61e authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

展览编辑增加左右切换按钮和回到顶部

上级 401ffcc5
隐藏空白字符变更
内嵌 并排
正在显示 包含 264 行增加 和 107 行删除
src/components/Uploader/ManualUploader.vue
浏览文件 @ f1bda61e
......@@ -86,7 +86,7 @@ export default {
return {
highImg: this.$getFullUrl(item.url),
lowImg: this.$getFullUrl(item.pressUrl),
url: this.$getFullUrl(item.pressUrl),
url: this.$getFullUrl(item.pressUrl),
// pressUrl:item.pressUrl,
name: item.name,
fileId: item.fileId,
......@@ -105,9 +105,6 @@ export default {
immediate: true,
deep: true,
},
advice(value) {
console.log(value);
},
},
computed: {
// 是否显示提示
......@@ -262,4 +259,12 @@ export default {
.disabled .el-upload--picture-card {
display: none !important;
}
// 上传抖动修复
.el-upload-list__item.is-ready {
display: none;
}
// 隐藏回显动画
.el-upload-list__item {
transition: none !important;
}
</style>
\ No newline at end of file
src/components/VueQuillEditor/index.vue
浏览文件 @ f1bda61e
......@@ -6,6 +6,7 @@
:options="editorOption"
@change="onEditorChange($event)"
class=".editor"
@click.native="handleEditAblequestion"
/>
</template>
......@@ -76,14 +77,25 @@ export default {
theme: "snow",
placeholder: "",
},
qillInit: true,
};
},
mounted() {
this.$refs.myQuillEditor.quill.enable(false);
},
methods: {
onEditorChange() {
//内容改变事件
this.$emit("input", this.content);
},
handleEditAblequestion() {
if (this.qillInit) {
this.$refs.text.quill.enable(true);
console.log(111);
this.$refs.text.quill.focus();
this.qillInit = false;
}
},
},
};
</script>
......
src/utils/request.js
浏览文件 @ f1bda61e
......@@ -13,7 +13,7 @@ const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
timeout: 10*1000,
})
// request interceptor
service.interceptors.request.use(
......
src/views/display/components/ExhibitionUnit.vue
浏览文件 @ f1bda61e
......@@ -3,7 +3,7 @@
<div class="exhibiton-unit" ref="exhibitionUnit">
<el-row class="tree-container" v-if="treeData.length > 0">
<el-col :span="9">
<el-tree :data="treeData" node-key="euId" >
<el-tree :data="treeData" node-key="euId">
<div class="exhibition-units-tree-node" slot-scope="{ node, data }">
<div style="display: flex; align-items: center">
<div class="title" @click="handleClickNode(node, data)">
......@@ -54,7 +54,12 @@
<el-input placeholder="请输入标题" v-model="currentData.title">
</el-input>
</el-col>
<el-col :span="24" class="mg-bt20">
<VueQuillEditor
v-model="currentData.intro"
placeholder="请输入单元介绍"
/>
</el-col>
<el-col :span="24" class="mg-bt20">
<el-select
v-model="currentData.crIds"
......@@ -66,9 +71,10 @@
:remote-method="searchCR"
:loading="loading"
style="width: 100%"
ref="remoteSelect"
>
<el-option
v-for="item in CRList"
v-for="item in crList"
:key="item.crId"
:label="item.name"
:value="item.crId"
......@@ -76,46 +82,24 @@
</el-option>
</el-select>
</el-col>
<el-col :span="24">
<!-- <el-input
placeholder="请输入介绍"
v-model="currentData.intro"
type="textarea"
rows="4"
maxlength="800"
show-word-limit
>
</el-input> -->
<!-- <quill-editor
ref="myQuillEditor"
v-model="currentData.intro"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
class=".editor"
/> -->
<VueQuillEditor v-model="currentData.intro" placeholder="请输入单元介绍"/>
<div>单元图片：</div>
<ManualUploader
v-model="currentData.imagesVo"
:files="currentData.imagesVo"
:fileLimit="7"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
listType="picture-card"
:ref="'unit-images-' + currentData.euId"
/>
</el-col>
</el-row>
<el-collapse-transition>
<!-- <el-collapse-transition>
<el-row :gutter="50">
<el-col :span="24">
<div>单元图片：</div>
<ManualUploader
v-model="currentData.imagesVo"
:files="currentData.imagesVo"
:fileLimit="7"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
listType="picture-card"
:ref="'unit-images-' + currentData.euId"
/>
</el-col>
</el-row>
</el-collapse-transition>
</el-collapse-transition> -->
<div class="next-prev">
<el-button
size="mini"
......@@ -193,16 +177,28 @@ export default {
if (arr.length > 0) {
arr.forEach((item) => {
if (item.culturalRelics && item.culturalRelics.length > 0) {
that.$set(that, "CRList", item.culturalRelics);
that.$set(that, "crList", item.culturalRelics);
item.crIds = [];
item.culturalRelics.map((cr) => {
item.crIds.push(cr.crId);
// item.crIds.push(cr.crId);
that.$nextTick(() => {
// console.log("remoteSelect", that.$refs["remoteSelect"]);
that.$refs["remoteSelect"].cachedOptions.push({
currentLabel: cr.name, // 当前绑定的数据的label
currentValue: cr.crId, // 当前绑定数据的value
label: cr.name, // 当前绑定的数据的label
value: cr.crId, // 当前绑定数据的value
});
});
item.imagesVo = item.imagesVo ? item.imagesVo : [];
item.videosVo = item.videosVo ? item.videosVo : [];
});
} else {
that.$set(that, "CRList", []);
that.$set(that, "crList", []);
}
item.imagesVo = item.imagesVo || [];
item.videosVo = item.videosVo || [];
if (item.children) {
loopData(item.children);
}
......@@ -217,11 +213,9 @@ export default {
},
},
data() {
return {
treeData: [],
CRList: [], //文物列表，关联文物使用
crList: [], //文物列表，关联文物使用
loading: false,
imagesVo: [],
videosVo: [],
......@@ -231,13 +225,12 @@ export default {
},
methods: {
getUnitData() {
return this.treeData;
},
// 关联文献查询
searchCR(queryString) {
if (!queryString.trim()) {
this.CRList = [];
this.crList = [];
return;
}
this.loading = true;
......@@ -250,9 +243,9 @@ export default {
this.loading = false;
const res = await getCulturalRelicListPer(params);
if (res.code == 0) {
this.CRList = res.data.records;
this.crList = res.data.records;
} else {
this.CRList = [];
this.crList = [];
this.$message.error(res.msg);
}
}, 500);
......@@ -433,7 +426,7 @@ export default {
width: 100%;
flex-direction: column;
.title {
width:200px;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ f1bda61e
......@@ -4,17 +4,28 @@
element-loading-background="rgba(0, 0, 0, 0.5)"
:element-loading-text="loadingText"
:visible.sync="dialogVisible"
width="86%"
width="80%"
:before-close="handleClose"
top="2vh"
lock-scroll
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ title }}</div>
<div class="label">
{{ title }}
<span
v-if="dialogForm.exhibitionId"
style="font-size: 12px; margin-left: 10px; font-weight: 500"
>
<i class="el-icon-warning-outline"></i
>点击左右切换按钮可切换展览。<span style="color: #f56c6c">
注意：切换前请注意保存当前展览信息
</span>
</span>
</div>
</div>
<div class="el-dialog-div">
<div class="dialog-content" v-if="dialogVisible">
<div class="dialog-content" v-if="dialogVisible" id="dialog-content">
<el-form
:model="dialogForm"
class="basic-info"
......@@ -50,6 +61,19 @@
>
</el-cascader>
</el-form-item>
<el-form-item label="展览地区" :label-width="formLabelWidth">
<el-cascader
class="years item"
style="width: 100%"
v-model="dialogForm.regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
clearable
>
</el-cascader>
</el-form-item>
<el-form-item label="展览类型" :label-width="formLabelWidth">
<el-select
v-model="dialogForm.type"
......@@ -268,13 +292,50 @@
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button icon="el-icon-top" type="info" @click.native="handleToTop">回到顶部</el-button>
<el-button @click="cancelForm" icon="el-icon-circle-close" type="danger">取 消</el-button>
<!-- <el-button @click="handlePreview">预 览</el-button> -->
<el-button type="primary" @click="handleSubmit" :disabled="loading"
>发布<i class="el-icon-s-promotion" style="margin-left: 5px"></i
>{{ dialogForm.exhibitionId ? "保存" : "发布"
}}<i
:class="
dialogForm.exhibitionId
? 'el-icon-circle-check'
: 'el-icon-s-promotion'
"
style="margin-left: 5px"
></i
></el-button>
</div>
</div>
<el-tooltip
class="item"
effect="dark"
content="下一展览"
placement="top-start"
>
<div
class="next btn"
v-if="dialogForm.exhibitionId"
@click="handleChangeDisplay('next')"
>
<i class="el-icon-arrow-right"></i>
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="上一展览"
placement="top-start"
>
<div
class="prev btn"
v-if="dialogForm.exhibitionId"
@click="handleChangeDisplay('prev')"
>
<i class="el-icon-arrow-left"></i>
</div>
</el-tooltip>
</el-dialog>
</template>
......@@ -305,6 +366,10 @@ export default {
type: Object,
default: () => ({}),
},
currentPageIds: {
type: Array,
default: () => [],
},
},
computed: {
...mapGetters(["userInfo", "dicts"]),
......@@ -331,6 +396,17 @@ export default {
handler: function (value) {
if (value) {
this.dialogForm = JSON.parse(JSON.stringify(value));
// 新增情况下默认单位和地区是当前用户
if (!this.dialogForm.exhibitionId) {
this.dialogForm.deptId = this.userInfo.deptId;
this.dialogForm.regionCode = this.userInfo.regionCode;
console.log(
"this.dialogForm.regionCode",
this.dialogForm.regionCode
);
} else {
this.currentId = this.dialogForm.exhibitionId;
}
if (
this.dialogForm.exhibitionUnits &&
this.dialogForm.exhibitionUnits.length > 0
......@@ -417,9 +493,9 @@ export default {
});
}
// 回填展览单位
if (this.dialogForm.deptId) {
this.dialogForm.deptId = [this.dialogForm.deptId];
}
// if (this.dialogForm.deptId) {
// this.dialogForm.deptId = this.dialogForm.deptId;
// }
}
},
immediate: true,
......@@ -443,6 +519,10 @@ export default {
}
},
},
currentId(value) {
this.$emit("changeDisplay", value);
},
},
data() {
let that = this;
......@@ -485,6 +565,13 @@ export default {
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionTree: [],
rules: {
title: [{ required: true, message: "请输入展览标题", trigger: "blur" }],
// faceImage: [
......@@ -497,6 +584,9 @@ export default {
},
imagesAdvice: "",
dialogVisible: false,
nextDiaplayId: null,
prevDiaplayId: null,
currentId: null,
};
},
async created() {
......@@ -508,6 +598,8 @@ export default {
// this.orgTreeData = res[0].children; //去掉根节点的文旅厅
this.orgTreeData = res;
});
this.loadRegionTree();
},
methods: {
......@@ -602,6 +694,52 @@ export default {
this.reload();
},
// 回到顶部
handleToTop(){
let el = document.getElementById("dialog-content");
el.scrollIntoView({ block: 'start',behavior: "smooth" })
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
handleChangeDisplay(dir) {
let index = this.currentPageIds.indexOf(this.currentId);
switch (dir) {
case "next":
if (this.currentPageIds[index + 1]) {
this.currentId = this.currentPageIds[index + 1];
} else {
this.$message.info("已经是此页最后一个！");
}
console.log('this.currentId',this.currentId);
break;
case "prev":
if (this.currentPageIds[index - 1]) {
this.currentId = this.currentPageIds[index - 1];
} else {
this.$message.info("已经是此页第一个！");
}
console.log('this.currentId',this.currentId);
break;
}
},
handleSubmit() {
// this.loading = true;
this.$refs.form.validate(async (valid) => {
......@@ -687,34 +825,6 @@ export default {
deleteFileArr.push(oldfileId);
}
});
// return;
// addUnitIds(unitData); //添加unit的id作为上传文件的key
// function addUnitIds(arr) {
// if (arr.length > 0) {
// arr.map((item) => {
// unitIds.push(item.euId);
// if (item.children) {
// addUnitIds(item.children);
// }
// });
// }
// }
// unitIds.map(async (euId) => {
// let exhibitionUnitsDom = this.$refs.exhibitionUnits;
// let imageFiles = [];
// let videoFiles = [];
// if (exhibitionUnitsDom.$refs[`unit-images-${euId}`]) {
// imageFiles = [
// ...exhibitionUnitsDom.$refs[`unit-images-${euId}`].getFiles(),
// ];
// // debugger
// }
// if (exhibitionUnitsDom.$refs[`unit-videos-${euId}`]) {
// videoFiles = [
// ...exhibitionUnitsDom.$refs[`unit-videos-${euId}`].getFiles(),
// ];
// }
// 上传所有媒体文件
let filesObj = {};
......@@ -724,7 +834,7 @@ export default {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
// console.log("formDataArr,length", formDataArr.length);
// formData有长度时再进行上传
if (formDataArr.length > 0) {
this.loadingText = "正在上传文件...请耐心等待";
......@@ -746,7 +856,6 @@ export default {
successFilesObj[key].map((sf) => {
filesObj[key].push(sf.fileId);
});
// filesObj[key].push(successFilesObj[key].fileId);
} else {
let ids = [];
successFilesObj[key].map((sf) => {
......@@ -793,7 +902,6 @@ export default {
delete unit[i];
}
});
// }
if (unit.children) {
backFillUnit(unit.children);
}
......@@ -803,12 +911,9 @@ export default {
if (!that.dialogForm.exhibitionId) {
this.loadingText = "正在处理展览数据...请耐心等待";
const { deptId, regionCode } = this.userInfo;
const params = {
...this.dialogForm,
exhibitionUnits: unitData,
deptId,
regionCode,
};
params.literature = this.literatureValues.join(",");
params.status = this.dialogForm.status ? 1 : 0;
......@@ -819,7 +924,6 @@ export default {
.then((res) => {
if (res.code == 0) {
setTimeout(() => {
// this.loading = false;
this.$emit("refresh");
this.reload();
this.submitLoading = false;
......@@ -828,7 +932,6 @@ export default {
}
})
.catch((err) => {
// this.loading = false;
this.submitLoading = false;
});
} else {
......@@ -850,7 +953,6 @@ export default {
deptId,
displayCharacter,
} = this.dialogForm;
let literature = this.literatureValues.join(",");
let crIds = this.crIds.join(",");
let bvIds = this.vrIds.join(",");
......@@ -1027,5 +1129,30 @@ export default {
display: flex;
}
//展览单元
::v-deep .el-dialog__body {
position: relative;
}
.btn {
width: 80px;
height: 80px;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 40%;
cursor: pointer;
i {
font-size: 50px;
color: #fff;
}
}
.prev {
left: -8%;
}
.next {
right: -8%;
}
</style>
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ f1bda61e
......@@ -70,8 +70,11 @@
<InfoEditDialog
:visible="editDialogVisible"
:form="form"
:currentPageIds="currentPageIds"
@handleClose="handleClose"
@refresh="loadData"
@changeDisplay="reloadDisplay"
ref="InfoEditDialog"
/>
<PreviewDialog
v-if="Object.keys(curPreviewObj).length > 0"
......@@ -121,6 +124,7 @@ export default {
import("element-ui/packages/image/src/image-viewer"),
},
data() {
let that = this;
return {
list: {
record: [],
......@@ -181,6 +185,7 @@ export default {
previewVideos: [],
displayTypes: {},
curPreviewObj: {}, //当前预览的对象
currentPageIds: [], //当前的id数组，用于给详情页切换用
};
},
computed: {
......@@ -222,11 +227,13 @@ export default {
let res = await getListPer(params);
if (res.code == 0) {
this.list = res.data;
this.currentPageIds = this.list.records.map((item) => {
return item.exhibitionId;
});
}
},
reset() {
this.loadData();
console.log("reset");
},
// 加载表格数据
......@@ -237,13 +244,14 @@ export default {
};
let res = await getListPer(params);
if (res.code == 0) {
console.log(res.data);
this.list = res.data;
this.currentPageIds = this.list.records.map((item) => {
return item.exhibitionId;
});
}
},
async handleOperation(value, row) {
console.log(value, row);
switch (value.type) {
case "add":
this.editDialogVisible = true;
......@@ -270,6 +278,16 @@ export default {
break;
}
},
async reloadDisplay(exhibitionId) {
this.$refs.InfoEditDialog.submitLoading = true;
this.$refs.InfoEditDialog.loadingText = "加载中...";
let editRes = await getDisplayById({
exhibitionId,
});
this.form = editRes.data;
this.$refs.InfoEditDialog.submitLoading = false;
},
async handleChangeStatus(row) {
const { status } = row;
let newStatus = status === "0" ? "1" : "0";
......
src/views/product/index.vue
浏览文件 @ f1bda61e
......@@ -109,7 +109,7 @@ export default {
},
searchConfig: [
{
prop: "name",
prop: "title",
type: "input",
label: "文创名称",
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论