Skip to content

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

feat:完善博物馆、新增虚拟展厅

上级 af2ff993
隐藏空白字符变更
内嵌 并排
正在显示 包含 967 行增加 和 207 行删除
src/api/dept.js deleted 100644 → 0
浏览文件 @ af2ff993
import request from '@/utils/request'
// 根据id查询博物馆详情
export function getDeptDetailById(id) {
return request({
url: '/sys/dept/'+id,
method: 'get',
})
}
// 获取博物馆列表
export function getDepList() {
return request({
url: '/sys/depts',
method: 'get',
})
}
\ No newline at end of file
src/api/display.js
浏览文件 @ 0d1a6d1a
import request from '@/utils/request'
// 获取列表
// 获取布展列表
export function getList(data) {
return request({
url: '/bizExhibition/listByPage',
......
src/api/file.js 0 → 100644
浏览文件 @ 0d1a6d1a
import request from '@/utils/request'
// 根据id查询博物馆详情
export function deleteFiles(data) {
return request({
url: '/sysFiles/delete',
method: 'delete',
data
})
}
src/api/vitual.js 0 → 100644
浏览文件 @ 0d1a6d1a
import request from '@/utils/request'
export function getVirtualList(data) {
return request({
url: '/bizVirtual/listByPage',
method: 'post',
data
})
}
export function addVirtual(data) {
return request({
url: '/bizVirtual/add',
method: 'post',
data
})
}
export function editVirtual(data) {
return request({
url: '/bizVirtual/update',
method: 'put',
data
})
}
export function deleteVirtual(data) {
return request({
url: '/bizVirtual/delete',
method: 'delete',
data
})
}
export function getVirtualListById(data) {
return request({
url: '/bizVirtual/listById',
method: 'delete',
data
})
}
src/components/Uploader/AutoUploader.vue
浏览文件 @ 0d1a6d1a
......@@ -29,7 +29,7 @@
</template>
<script>
import { getToken } from "@/utils/auth";
import { upload } from "@/utils/upload";
import { upload } from "@/utils/file";
export default {
name: "AutoUploader",
props: {
......@@ -81,13 +81,21 @@ export default {
};
},
watch: {
files: {
handler: function (newVal, oldVal) {
this.fileList = newVal;
value: {
handler: function (val) {
this.fileList = JSON.parse(JSON.stringify(val));
},
immediate: true,
deep: true,
},
// files: {
// handler: function (val) {
// this.fileList = JSON.parse(JSON.stringify(val));
// // debugger
// },
// immediate: true,
// deep: true,
// },
},
computed: {
// 是否显示提示
......@@ -109,9 +117,9 @@ export default {
return fileAccept;
},
},
created() {
this.fileList = JSON.parse(JSON.stringify(this.files));
},
// created() {
// this.fileList = JSON.parse(JSON.stringify(this.files));
// },
methods: {
httpRequest(file) {
var formData = new FormData();
......@@ -119,53 +127,10 @@ export default {
upload(formData).then((res) => {
if (res.code == 0) {
this.fileList = res.data;
this.changeFileList(res.data)
this.changeFileList(res.data);
}
});
},
// // 自定义上传实现，用于修改上传后的封面
// uploadmany(file) {
// var formData = new FormData(); //这是由于接口数据类型规定，可以根据自己所需进行更改
// formData.append("files", file.file);
// upload(formData).then((res) => {
// if (res.code == 0) {
// console.log(res);
// var last = res.data.substring(res.data.lastIndexOf(".")); //将接口中返回的各文件链接进行截取，来判断属于什么格式文件
// if (last == ".pdf") {
// this.fileList.push({
// url: "https://img0.baidu.com/it/u=3644622474,3688361323&fm=26&fmt=auto&gp=0.jpg", //pdf封面图片
// realUrl: res.data.result, //接口返回的pdf文件链接
// });
// } else if (
// last == ".png" ||
// last == ".jpg" ||
// last == ".jpeg" ||
// last == ".jfif"
// ) {
// this.fileList.push({
// url: res.data.result,
// realurl: res.data.result,
// });
// } else if (last == ".doc" || last == ".docx") {
// this.fileList.push({
// url: "https://img1.baidu.com/it/u=1714136260,3766911961&fm=26&fmt=auto&gp=0.jpg",
// realurl: res.data.result,
// });
// } else if (last == ".xls" || last == ".xlsx") {
// this.fileList.push({
// url: "https://img1.baidu.com/it/u=1123362811,2189997153&fm=26&fmt=auto&gp=0.jpg",
// realurl: res.data.result,
// });
// }
// } else {
// this.$message({
// message: res.data.message,
// type: "error",
// offset: 70,
// });
// }
// });
// },
// 上传前校检格式和大小
handleBeforeUpload(file) {
......@@ -216,39 +181,21 @@ export default {
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
this.changeFileList(fileList);
},
handleChange(file, fileList) {
// if (fileList.length == this.fileLimit) {
// this.uploadDisabled = true;
// }
},
// 文件列表改变的时候，更新组件的v-model的文的数据
changeFileList(fileList) {
// console.log("fileList", fileList);
// const tempFileList = fileList.map((item) => {
// let tempItem = {
// name: item.name,
// url: item.response ? item.response.data[0].url : item.url,
// };
// return tempItem;
// });
debugger
this.$emit("input", fileList);
// this.$emit("handleFileReady", tempFileList);
},
},
};
</script>
<style lang="scss" >
// .images-list{
// border: 1px dashed #d5d5d5;
// padding: 10px;
// border-radius: 4px;
// background: #fff;
// }
.disabled .el-upload--picture-card {
display: none !important;
}
......
src/store/modules/org.js
浏览文件 @ 0d1a6d1a
import {
getMuseumTreeV1,getSysRegionTree
getMuseumTreeV1,
getSysRegionTree
} from '@/api/org'
const getDefaultState = () => {
return {
museumTree: [],//博物馆树
regionTree:[],//行政区划树
museumTree: [], //博物馆树
regionTree: [], //行政区划树
}
}
......@@ -18,7 +19,7 @@ const mutations = {
SET_MUSEUM_TREE: (state, museumTree) => {
state.museumTree = museumTree
},
SET_REGION_TREE:(state, regionTree)=>{
SET_REGION_TREE: (state, regionTree) => {
state.regionTree = regionTree
}
}
......@@ -26,15 +27,12 @@ const mutations = {
const actions = {
getMuseumTreeData({
commit
}, deptId) {
if (state.museumTree && state.museumTree.length > 0) {
return new Promise((resolve, reject) => {
resolve(state.museumTree)
})
} else {
}, isReload) {
// 如果是空或者需要重新加载则重新调取接口获取，否则直接获取状态管理中的
if (state.museumTree || state.museumTree.length < 0 || isReload) {
return new Promise((resolve, reject) => {
getMuseumTreeV1({
deptId
deptId: ''
}).then(response => {
const {
data
......@@ -45,6 +43,10 @@ const actions = {
reject(error)
})
})
} else {
return new Promise((resolve, reject) => {
resolve(state.museumTree)
})
}
},
......@@ -72,7 +74,7 @@ const actions = {
}
},
}
export default {
......
src/store/modules/user.js
浏览文件 @ 0d1a6d1a
......@@ -3,9 +3,6 @@ import {
logout,
getInfo
} from '@/api/user'
import{
getDepList
} from '@/api/dept'
import {
getToken,
setToken,
......
src/utils/upload.js → src/utils/file.js
浏览文件 @ 0d1a6d1a
......@@ -55,3 +55,4 @@ export function uploadV1(data) {
})
})
}
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 0d1a6d1a
......@@ -247,7 +247,7 @@ import { addCulturalRelic, editCulturalRelic } from "@/api/culturalRelic";
import AutoUploader from "@/components/Uploader/AutoUploader.vue";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { upload } from "@/utils/upload";
import { upload } from "@/utils/file";
export default {
name: "InfoEditDialog",
components: {
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 0d1a6d1a
......@@ -218,7 +218,7 @@ const ImageUploader = () => import("@/components/Uploader/ManualUploader.vue");
const VideoUploader = () => import("@/components/Uploader/ManualUploader.vue");
const AudioUploader = () => import("@/components/Uploader/ManualUploader.vue");
import ExhibitionUnit from "./ExhibitionUnit.vue";
import { upload, uploadV1 } from "@/utils/upload";
import { upload, uploadV1 } from "@/utils/file";
export default {
name: "InfoEditDialog",
components: {
......
src/views/museum/components/InfoEditDialog.vue
浏览文件 @ 0d1a6d1a
......@@ -26,26 +26,17 @@
v-model="dialogForm.pid"
:options="orgTreeData"
:props="optionProps"
:show-all-levels="false"
placeholder="请选择所属部门"
:key="pidModalKey"
>
</el-cascader>
</el-form-item>
<!-- <el-form-item label="所属地" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.regionCode"
autocomplete="off"
placeholder="请选择所属地"
></el-input>
</el-form-item> -->
<el-form-item label="所属地" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.regionCode"
:options="regionTree"
:props="regionOptionProps"
:show-all-levels="false"
placeholder="请选择所属地"
:key="regionCodeModalKey"
>
......@@ -72,7 +63,7 @@
</el-form-item>
<el-form-item label="博物馆封面" :label-width="formLabelWidth">
<AutoUploader
v-model="dialogForm.faceImage"
v-model="faceImage"
:fileLimit="1"
:fileSize="50"
listType="picture-card"
......@@ -133,35 +124,53 @@ export default {
set: function () {},
},
title() {
if (this.dialogForm.crId) {
if (this.dialogForm.id) {
return "修改博物馆信息";
} else {
return "添加博物馆";
}
},
faceImage() {
if (this.dialogForm.faceImageUrl) {
return [
{
name: "",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
} else {
return [];
}
},
},
watch: {
dialogVisible(value) {
if (value) {
// 判断是否本地
this.loadRegionTree();
}
},
form: {
handler(value) {
this.dialogForm = { ...value };
if (this.dialogForm.id) {
this.status = Boolean(Number(this.dialogForm.status));
// this.pidModalKey++; //回显
// this.regionCodeModalKey++; //回显
handler: function (value) {
let that = this;
that.dialogForm = JSON.parse(JSON.stringify(value));
// 编辑状态
if (that.dialogForm.id) {
that.status = Boolean(Number(that.dialogForm.status));
// 回填封面
if (this.dialogForm.faceImage) {
that.faceImage = [
{
name: this.dialogForm.name + "封面.png",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
}
// 编辑状态下禁用当前所属地之下的节点
if (this.regionTree.length > 0) {
this.regionTree.forEach((item, index) => {
// TODO:
if (item.regionCode == this.dialogForm.regionCode) {
item.disabled = true;
// 修改当前这一层和下面一层为禁用
// for (let index = 0; index < this.regionTree.length; index++) {
// this.regionTree[index].disabled = true
// if (this.regionTree[index].children) {
// }
// }
}
});
}
}
},
immediate: true,
......@@ -183,49 +192,33 @@ export default {
}
}
},
status(value) {
console.log(value);
},
},
data() {
return {
dialogForm: {
...this.form,
},
dialogForm: {},
formLabelWidth: "100px",
optionProps: {
value: "id",
label: "name",
children: "children",
// checkStrictly: true,
checkStrictly: true, //单选选择任意一级选项
},
regionOptionProps: {
value: "regionId",
value: "code",
label: "name",
children: "children",
// checkStrictly: true,
checkStrictly: true, //单选选择任意一级选项
},
regionTree: [],
status: false,
pidModalKey: 0,
regionCodeModalKey: 0,
faceImage: [],
};
},
mounted() {
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);
}
});
}
}
});
},
methods: {
handlePreview({ type, file }) {
console.log(type, file);
......@@ -236,46 +229,85 @@ export default {
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.dialogForm = {};
this.faceImage = [];
},
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);
}
});
}
}
});
},
async handleSubmit() {
if (this.dialogForm.id) {
let params = { ...this.dialogForm };
// 回填图片
if (this.faceImage.length > 0) {
params.faceImage = this.faceImage[0].fileId;
}
// return;
// 处理行政区划
if (params.regionCode instanceof Array) {
params.regionCode = params.regionCode[params.regionCode.length - 1];
}
// 处理所属部门
if (params.pid instanceof Array) {
params.pid = params.pid[params.pid.length - 1];
}
// 处理状态
// debugger
params.status = this.status ? 1 : 0;
let res = await editMuseum(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
}
} else {
let params = { ...this.dialogForm };
const { faceImage } = params;
if (params.faceImage.length > 0) {
params = faceImage[0].fileId;
// 回填图片
if (this.faceImage.length > 0) {
params.faceImage = this.faceImage[0].fileId;
}
// 处理行政区划
params.regionCode = params.regionCode[params.regionCode.length - 1];
// 处理所属部门
params.pid = params.pid[params.pid.length - 1];
// 处理状态
params.status = params.status ? 1 : 0;
params.status = this.status ? 1 : 0;
// return
let res = await addMuseum(params);
if (res.code == 0) {
this.$message.success("添加成功！");
this.dialogForm = {};
this.$emit("refresh");
this.$emit("handleClose");
this.reload();
}
}
},
reload() {
this.$emit("refresh", true); //需要重新获取orgTree
this.$emit("handleClose");
this.faceImage = [];
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
this.$emit("handleClose");
this.dialogForm = {};
this.faceImage = [];
})
.catch((_) => {});
},
refresh() {
this.$emit("refresh");
},
},
};
</script>
......
src/views/museum/index.vue
浏览文件 @ 0d1a6d1a
......@@ -49,15 +49,21 @@
size="mini"
icon="el-icon-edit"
@click.native="handleOperation('edit', scope.row)"
style="margin-right: 4px"
>编辑</el-button
>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click.native="handleOperation('delete', scope.row)"
>删除</el-button
<el-popconfirm
title="确定删除吗？"
@onConfirm="handleOperation('delete', scope.row)"
>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
slot="reference"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
......@@ -77,7 +83,7 @@ import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import InfoEditDialog from "./components/InfoEditDialog";
import SearchBar from "@/components/SearchBar";
import { deleteFiles } from "@/api/file";
export default {
components: {
TablePage,
......@@ -159,15 +165,13 @@ export default {
},
methods: {
async search(form) {
if (form.name) {
let searchValue = form.name;
let treeData = this.orgTreeData;
let handleTreeData = this.handleTreeData(treeData, searchValue);
// debugger;
this.setExpandRow(handleTreeData);
this.expandRow = this.expandRow.join(",").split(",");
this.orgTreeData = handleTreeData;
}
let searchValue = form.name;
let treeData = this.orgTreeData;
let handleTreeData = this.handleTreeData(treeData, searchValue);
// debugger;
this.setExpandRow(handleTreeData);
this.expandRow = this.expandRow.join(",").split(",");
this.orgTreeData = handleTreeData;
},
// 树形表格过滤
......@@ -214,9 +218,14 @@ export default {
this.loadData();
},
// 加载表格数据
loadData() {
this.$store.dispatch("org/getMuseumTreeData", "").then((res) => {
/**
* 加载表格数据
* @param isReload {Boolean} 是否需要重新调用接口加载，默认不传则从vuex中获取
*/
loadData(isReload) {
// debugger
console.log("收到isReload", isReload);
this.$store.dispatch("org/getMuseumTreeData", isReload).then((res) => {
this.orgTreeData = res;
});
},
......@@ -230,18 +239,15 @@ export default {
case "view":
break;
case "edit":
// let detailRes = await getRCDetailById({ crId: row.crId });
// if (detailRes.code == 0) {
// }
this.form = row;
this.drawerVisible = true;
break;
case "delete":
// let deleteRes = await deleteCultralRelic([row.crId]);
// if (deleteRes.code == 0) {
// this.$message.success("删除成功！");
// this.loadData();
// }
const { id } = row;
let res = await deleteFiles([id]);
if (res.code == 0) {
this.$message.success("删除成功！");
}
break;
}
},
......@@ -296,6 +302,7 @@ export default {
// 关闭Dialog
handleClose() {
this.drawerVisible = false;
this.form = {};
},
},
};
......
src/views/virtual/components/InfoEditDialog.vue 0 → 100644
浏览文件 @ 0d1a6d1a
<template>
<el-dialog
:visible.sync="dialogVisible"
width="40%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<el-form :model="dialogForm" class="basic-info">
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.name"
autocomplete="off"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="所属博物馆" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.pid"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择所属博物馆"
:key="pidModalKey"
>
</el-cascader>
</el-form-item>
<el-form-item label="所属地" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.regionCode"
:options="regionTree"
:props="regionOptionProps"
placeholder="请选择所属地"
:key="regionCodeModalKey"
>
</el-cascader>
</el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth">
<el-switch v-model="status"> </el-switch>
</el-form-item>
<el-form-item label="链接" :label-width="formLabelWidth">
<!-- <el-switch v-model="dialogForm.url"> </el-switch> -->
<el-input
v-model="dialogForm.url"
autocomplete="off"
placeholder="请输入链接"
></el-input>
</el-form-item>
<el-form-item label="展览封面" :label-width="formLabelWidth">
<AutoUploader
v-model="faceImage"
:fileLimit="1"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="museumFaceImage"
/>
</el-form-item>
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
></el-button>
</div>
</el-dialog>
</template>
<script>
import { addVirtual, editVirtual } from "@/api/vitual";
import AutoUploader from "@/components/Uploader/AutoUploader.vue";
import { mapGetters } from "vuex";
export default {
name: "InfoEditDialog",
components: {
AutoUploader,
},
props: {
visible: {
type: Boolean,
default: false,
},
form: {
type: Object,
default: () => ({}),
},
orgTreeData: {
type: Array,
default: () => [],
},
},
computed: {
...mapGetters(["userInfo"]),
dialogVisible: {
get: function () {
return this.visible;
},
set: function () {},
},
title() {
if (this.dialogForm.id) {
return "修改虚拟展厅信息";
} else {
return "添加虚拟展厅";
}
},
},
watch: {
dialogVisible(value) {
if (value) {
// 判断是否本地
this.loadRegionTree();
}
},
form: {
handler: function (value) {
let that = this;
that.dialogForm = JSON.parse(JSON.stringify(value));
// 编辑状态
if (that.dialogForm.id) {
that.status = Boolean(Number(that.dialogForm.status));
// 回填封面
if (this.dialogForm.faceImage) {
that.faceImage = [
{
name: this.dialogForm.name + "封面.png",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
}
// 编辑状态下禁用当前所属地之下的节点
if (this.regionTree.length > 0) {
this.regionTree.forEach((item, index) => {
// TODO:
if (item.regionCode == this.dialogForm.regionCode) {
item.disabled = true;
// 修改当前这一层和下面一层为禁用
// for (let index = 0; index < this.regionTree.length; index++) {
// this.regionTree[index].disabled = true
// if (this.regionTree[index].children) {
// }
// }
}
});
}
}
},
immediate: true,
deep: true,
},
orgTreeData(value) {
// 遍历，如果children为空，则直接去掉children，以免选择器中显示无结果
if (value) {
let tree = [...value];
loopTree(tree);
function loopTree(arr) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
},
status(value) {
console.log(value);
},
},
data() {
return {
dialogForm: {},
formLabelWidth: "100px",
optionProps: {
value: "id",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionOptionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionTree: [],
status: false,
pidModalKey: 0,
regionCodeModalKey: 0,
faceImage: [],
};
},
methods: {
handlePreview({ type, file }) {
console.log(type, file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.faceImage = [];
},
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);
}
});
}
}
});
},
async handleSubmit() {
if (this.dialogForm.id) {
let params = { ...this.dialogForm };
// 回填图片
if (this.faceImage.length > 0) {
params.faceImage = this.faceImage[0].fileId;
}
// return;
// 处理行政区划
if (params.regionCode instanceof Array) {
params.regionCode = params.regionCode[params.regionCode.length - 1];
}
// 处理所属部门
if (params.pid instanceof Array) {
params.pid = params.pid[params.pid.length - 1];
}
// 处理状态
// debugger
params.status = this.status ? 1 : 0;
let res = await editVirtual(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
}
} else {
let params = { ...this.dialogForm };
// 回填图片
if (this.faceImage.length > 0) {
params.faceImage = this.faceImage[0].fileId;
}
// 处理行政区划
params.regionCode = params.regionCode[params.regionCode.length - 1];
// 处理所属部门
params.pid = params.pid[params.pid.length - 1];
// 处理状态
params.status = this.status ? 1 : 0;
// return
let res = await addVirtual(params);
if (res.code == 0) {
this.$message.success("添加成功！");
this.reload();
}
}
},
reload() {
this.$emit("refresh", true); //需要重新获取orgTree
this.$emit("handleClose");
this.faceImage = [];
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
this.$emit("handleClose");
this.faceImage = [];
})
.catch((_) => {});
},
},
};
</script>
<style lang='scss' scoped>
.title {
display: flex;
margin-bottom: 16px;
.divider {
width: 8px;
border-left: 4px solid #409eff;
margin-right: 8px;
}
.label {
font-weight: bold;
}
}
.dialog-content {
padding: 0 32px;
display: flex;
.basic-info {
flex: 1;
margin-right: 48px;
}
.relate {
flex: 1;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.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>
\ No newline at end of file
src/views/virtual/config.js 0 → 100644
浏览文件 @ 0d1a6d1a
export const title = [{
prop: "name",
label: "名称",
columnAlign: 'center',
},
{
prop: "deptName",
label: "所属博物馆",
columnAlign: 'center',
},
{
prop: "faceImage",
label: "封面",
columnAlign: 'center',
},
{
prop: "regionName",
label: "所属地",
columnAlign: 'center',
},
{
prop: "status",
label: "状态",
columnAlign: 'center',
isStatus: true
},
{
prop: "url",
label: "链接",
columnAlign: 'center',
},
]
export const operates = {
operate: true,
label: "操作",
width: "200px",
titleAlign: "center",
columnAlign: "center",
}
export const operations = [
// {
// type: 'view',
// title: '预览'
// },
{
type: 'edit',
title: '编辑'
},
{
type: 'delete',
title: '删除'
},
]
src/views/virtual/index.vue
浏览文件 @ 0d1a6d1a
<template>
<div>虚拟展厅管理</div>
<div class="app-container">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
>
<i class="el-icon-s-promotion"></i>
发布</el-button
>
</div>
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<template v-slot:status="data">
<el-popconfirm
:title="getStatusTitle(data.scope.status)"
@confirm="handleChangeStatus(data.scope.status)"
>
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
</el-popconfirm>
</template>
<template v-slot:operates="scope">
<TableOperation
:operations="tableOperations"
:rawData="scope.scope.row"
@handleOperation="handleOperation"
></TableOperation>
</template>
</TablePage>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
<InfoEditDialog
:visible="drawerVisible"
:form="form"
@handleClose="handleClose"
@refresh="loadData"
/>
</div>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import { deleteVirtual, getVirtualList } from "@/api/vitual";
import InfoEditDialog from "./components/InfoEditDialog";
import SearchBar from "@/components/SearchBar";
export default {
components: {
TablePage,
TableOperation,
InfoEditDialog,
SearchBar,
},
data() {
return {
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
searchForm: {
name: "",
status: "",
},
searchConfig: [
{
prop: "name",
type: "input",
label: "虚拟展名称",
},
{
prop: "status",
type: "select",
label: "状态",
selectOptions: [
{
label: "已上架",
value: "1",
},
{
label: "已下架",
value: "0",
},
],
},
],
drawerVisible: false,
form: {
name: "", //名称
pid: "", //所属博物馆
regionCode: "", //所属地code
status: false, //上下架状态
faceImage: "", //封面
url: "", //链接
},
loading: false,
};
},
watch: {
dict(value) {
if (value) {
this.dict = value;
}
},
},
computed: {
tableTitle() {
return title;
},
tableOperates() {
return operates;
},
tableOperations() {
return operations;
},
getStatusTitle(status) {
return (status) => {
if (Number(status)) {
return "是否确定要下架？";
} else {
return "是否确定要上架？";
}
};
},
},
mounted() {
this.loadData();
},
methods: {
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
...form,
};
if (params.status == "") {
delete params.status;
}
console.log("params", params);
let res = await getVirtualList(params);
if (res.code == 0) {
this.list = res.data;
}
},
}
</script>
reset() {
this.loadData();
},
// 加载表格数据
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getVirtualList(params);
if (res.code == 0) {
this.list = res.data;
}
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
this.drawerVisible = true;
break;
case "view":
// TODO:
break;
case "edit":
this.form = row;
this.drawerVisible = true;
break;
case "delete":
let deleteRes = await deleteVirtual([row.crId]);
if (deleteRes.code == 0) {
this.$message.success("删除成功！");
this.loadData();
}
break;
}
},
async handleChangeStatus(row) {
console.log("status", row);
const { status } = row;
let newStatus = status === "0" ? "1" : "0";
const params = {
...row,
status: newStatus,
};
let res = await editCulturalRelic(params);
if (res.code == 0) {
this.loadData();
this.$message.success("修改成功！");
}
},
// 多选
handleSelectionChange(val) {
this.multipleSelection = val;
},
<style>
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
// 搜索
onSubmitSearch() {
console.log("submit!");
},
// 打开drawer
handleOpenDialog(type, value) {
this.drawerVisible = true;
switch (type) {
case "add":
console.log("新增");
break;
case "edit":
console.log("编辑", value);
break;
}
},
// 关闭Dialog
handleClose() {
this.drawerVisible = false;
},
},
};
</script>
<style lang="scss" scoped>
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.pagination {
margin: 16px;
}
::v-deep .el-card__header {
padding: 10px 20px;
font-weight: bold;
}
.deptName {
padding: 12px 16px;
font-size: 13px;
}
.theme {
padding: 4px 16px;
font-size: 13px;
}
.faceImage {
padding: 16px;
.img {
position: relative;
// width: 100%;
width: 100%;
height: 160px;
&:hover {
.modal {
background-color: rgba(0, 0, 0, 0.3);
i {
display: inline;
}
.view-text {
display: block;
}
}
}
img {
width: 100%;
height: 100%;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all ease 0.3s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
i {
font-size: 28px;
color: #fff;
display: none;
transition: all ease 0.3s;
}
.view-text {
color: #fff;
font-size: 12px;
display: none;
transition: all ease 0.3s;
}
// display: none;
}
}
}
::v-deep .el-image {
.image-slot {
width: 100%;
height: 100%;
}
}
.buttons {
.el-button {
border-radius: 0;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论