Skip to content

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

新增布展管理

上级 eb0fe35d
隐藏空白字符变更
内嵌 并排
正在显示 包含 247 行增加 和 13 行删除
src/views/display/index.vue
浏览文件 @ 02675e8e
<!-- --> <!-- -->
<template> <template>
<div class="display app-container"> <div class="display app-container">
<div class="search"> <div class="top-bar">
<el-form :inline="true" :model="search" class="demo-form-inline"> <el-form :inline="true" :model="search" class="demo-form-inline">
<el-form-item label="展览名称"> <el-form-item label="展览名称">
<el-input v-model="search.name" placeholder="展览名称"></el-input> <el-input v-model="search.name" placeholder="展览名称"></el-input>
...@@ -31,7 +31,12 @@ ...@@ -31,7 +31,12 @@
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-button type="primary" @click.native="handleOpenDrawer('add')">
<i class="el-icon-s-promotion"></i>
发布</el-button
>
</div> </div>
<template> <template>
<el-table <el-table
ref="multipleTable" ref="multipleTable"
...@@ -60,9 +65,6 @@ ...@@ -60,9 +65,6 @@
</el-table-column> </el-table-column>
<el-table-column prop="status" label="状态" show-overflow-tooltip> <el-table-column prop="status" label="状态" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-tag type="success" v-if="scope.row.status">已上线</el-tag>
<el-tag type="info" v-else>已下线</el-tag> -->
<el-popconfirm <el-popconfirm
:title="'是否确定' + getStatusLabel(scope.row.status)" :title="'是否确定' + getStatusLabel(scope.row.status)"
> >
...@@ -77,13 +79,13 @@ ...@@ -77,13 +79,13 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" width="320" fixed="right"> <el-table-column label="操作" width="320" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <!-- <el-button
size="mini" size="mini"
@click="handleEdit(scope.$index, scope.row)" @click="handleEdit(scope.$index, scope.row)"
type="primary" type="primary"
><i class="el-icon-upload" style="margin-right: 4px"></i ><i class="el-icon-upload" style="margin-right: 4px"></i
>信息录入</el-button ></el-button
> > -->
<!-- <el-button <!-- <el-button
size="mini" size="mini"
@click="handleEdit(scope.$index, scope.row)" @click="handleEdit(scope.$index, scope.row)"
...@@ -94,7 +96,7 @@ ...@@ -94,7 +96,7 @@
> --> > -->
<el-button <el-button
size="mini" size="mini"
@click="handleEdit(scope.$index, scope.row)" @click="handleOpenDrawer('edit', scope.row)"
type="primary" type="primary"
><i class="el-icon-edit" style="margin-right: 4px"></i ><i class="el-icon-edit" style="margin-right: 4px"></i
>编辑</el-button >编辑</el-button
...@@ -122,6 +124,120 @@ ...@@ -122,6 +124,120 @@
class="pagination" class="pagination"
> >
</el-pagination> </el-pagination>
<el-drawer
:title="isAdd ? '新增布展信息' : '编辑'"
:before-close="handleClose"
:visible.sync="drawerVisible"
direction="rtl"
custom-class="add-edit-drawer"
ref="drawer"
>
<div class="drawer-content">
<div class="basic-info">
<div class="basic-info-title title">
<div class="divider"></div>
<div class="label">信息录入</div>
</div>
<el-form :model="form">
<el-form-item label="展览名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="展览开始时间" :label-width="formLabelWidth">
<el-input v-model="form.startTime" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="展览结束时间" :label-width="formLabelWidth">
<el-input v-model="form.endTime" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传wav文件，且不超过500kb
</div>
<div slot="file" slot-scope="{ file }">
<i class="el-icon-microphone" style="font-size: 28px"></i>
文件名称XXXXX
</div>
</el-upload>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{ file }">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<div class="video-lists">
<div class="video-item upload-box">
<i class="el-icon-video-play"></i>
</div>
<div class="video-item upload-box">
<i class="el-icon-plus"></i>
</div>
</div>
</el-form-item>
</el-form>
</div>
<div class="relate">
<div class="relate-title title">
<div class="divider"></div>
<div class="label">关联文物</div>
</div>
<div class="relate-content">
<el-cascader :options="cascaderOptions" clearable></el-cascader>
</div>
</div>
<div class="demo-drawer__footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button
type="primary"
@click="$refs.drawer.closeDrawer()"
:loading="loading"
>{{ loading ? "提交中 ..." : "确 定" }}</el-button
>
</div>
</div>
</el-drawer>
</div> </div>
</template> </template>
...@@ -168,11 +284,67 @@ export default { ...@@ -168,11 +284,67 @@ export default {
current: 1, current: 1,
total: 0, total: 0,
}, },
search:{ search: {
searchTime:[new Date(), new Date()], searchTime: [new Date(), new Date()],
name:'', name: "",
status:'' status: "",
} },
drawerVisible: false,
isAdd: true,
form: {
name: "",
startTime: "",
endTime: "",
imgs: [],
audios: [],
videos: [],
},
loading: false,
formLabelWidth: "100px",
cascaderOptions: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致",
},
{
value: "fankui",
label: "反馈",
},
{
value: "xiaolv",
label: "效率",
},
{
value: "kekong",
label: "可控",
},
],
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
},
{
value: "dingbudaohang",
label: "顶部导航",
},
],
},
],
},
],
}; };
}, },
computed: { computed: {
...@@ -226,6 +398,25 @@ export default { ...@@ -226,6 +398,25 @@ export default {
handleChangeStatus(status) { handleChangeStatus(status) {
console.log("handleChangeStatus", status); console.log("handleChangeStatus", status);
}, },
// 打开drawer
handleOpenDrawer(type, value) {
this.drawerVisible = true;
switch (type) {
case "add":
console.log("新增");
break;
case "edit":
console.log("编辑", value);
break;
}
},
// 关闭drawer之前
handleClose() {
this.drawerVisible = false;
},
// 取消drawer编辑
cancelForm() {},
}, },
}; };
</script> </script>
...@@ -233,8 +424,51 @@ export default { ...@@ -233,8 +424,51 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.display { .display {
.top-bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.pagination { .pagination {
margin-top: 10px; margin-top: 10px;
} }
.drawer-content {
padding: 0 32px;
.title {
display: flex;
margin-bottom: 16px;
.divider {
width: 8px;
border-left: 4px solid #409eff;
margin-right: 4px;
}
.label {
font-weight: bold;
}
}
}
.upload-box {
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
line-height: 146px;
vertical-align: top;
text-align: center;
margin: 0 8px 8px 0;
i {
font-size: 28px;
color: #8c939d;
}
}
.video-lists {
display: flex;
}
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论