Skip to content

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

博物馆管理

上级 9fe864cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 1146 行增加 和 105 行删除
src/api/museum.js 0 → 100644
浏览文件 @ 6c6b79d9
import request from '@/utils/request'
export function getMuseumTree(params) {
return request({
url: '/sys/dept/tree',
method: 'get',
params
})
}
export function addMuseum(data) {
return request({
url: '/sys/dept',
method: 'post',
data
})
}
export function editMuseum(data) {
return request({
url: '/sys/dept',
method: 'put',
data
})
}
// 获取博物馆列表
export function getMuseumList(params) {
return request({
url: '/sys/depts',
method: 'get',
params
})
}
// 根据博物馆id查询详情
export function getMSDetailById(id) {
return request({
url: `/sys/dept/${id}`,
method: 'get',
})
}
// 删除博物馆
export function deleteMuseum(id) {
return request({
url: `/sys/dept/${id}`,
method: 'delete',
data
})
}
src/components/Uploader/ManualUploader.vue
浏览文件 @ 6c6b79d9
......@@ -33,6 +33,10 @@
export default {
name: "ManualUploader",
props: {
// 用于v-model绑定
value: {
type: [Number, Array, String],
},
files: {
type: Array,
default: () => [],
......@@ -77,6 +81,10 @@ export default {
files: {
handler: function (val) {
this.fileList = [...val];
// debugger;
if (this.value) {
this.$emit("input", this.fileList);
}
},
immediate: true,
deep: true,
......
src/components/Uploader/index.vue
浏览文件 @ 6c6b79d9
......@@ -31,7 +31,7 @@ export default {
name: "Uploader",
props: {
// 值
// value: [String, Object, Array],
value: [String, Object, Array],
files: {
type: Array,
default: () => [],
......@@ -81,6 +81,7 @@ export default {
files: {
handler: function (newVal, oldVal) {
this.fileList = newVal;
},
immediate: true,
deep: true,
......@@ -223,7 +224,7 @@ export default {
};
return tempItem;
});
this.$emit("endLoading");
this.$emit('input',tempFileList)
this.$emit("handleFileReady", tempFileList);
},
},
......
src/icons/svg/fold.svg 0 → 100644
浏览文件 @ 6c6b79d9
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656551712722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7707" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M270.4 476.48a32 32 0 1 1-28.8-56.96l256-128a32 32 0 0 1 28.8 0l256 128a32 32 0 0 1-28.8 56.96L512 355.84z m0 288a32 32 0 0 1-28.8-56.96l256-128a32 32 0 0 1 28.8 0l256 128a32 32 0 0 1-28.8 56.96L512 643.84z" p-id="7708"></path></svg>
\ No newline at end of file
src/store/getters.js
浏览文件 @ 6c6b79d9
......@@ -5,6 +5,7 @@ const getters = {
userInfo: state => state.user.userInfo,
avatar: state => state.user.avatar,
name: state => state.user.name,
dicts: state => state.dict.dicts
dicts: state => state.dict.dicts,
museumTree: state => state.org.museumTree
}
export default getters
src/store/index.js
浏览文件 @ 6c6b79d9
......@@ -5,6 +5,7 @@ import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import dict from './modules/dict'
import org from './modules/org'
Vue.use(Vuex)
......@@ -13,7 +14,8 @@ const store = new Vuex.Store({
app,
settings,
user,
dict
dict,
org
},
getters
})
......
src/store/modules/org.js 0 → 100644
浏览文件 @ 6c6b79d9
import {
getMuseumTree,
} from '@/api/museum'
const getDefaultState = () => {
return {
museumTree: [],
}
}
const state = getDefaultState()
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_MUSEUM_TREE: (state, museumTree) => {
state.museumTree = museumTree
},
}
const actions = {
getMuseumTreeData({
commit
}, deptId) {
if (state.museumTree && state.museumTree.length > 0) {
return new Promise((resolve, reject) => {
resolve(state.museumTree)
})
} else {
return new Promise((resolve, reject) => {
getMuseumTree({
deptId
}).then(response => {
const {
data
} = response
commit('SET_MUSEUM_TREE', data)
resolve()
}).catch(error => {
reject(error)
})
})
}
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
src/views/culturalRelic/components/InfoEditDialog.vue
浏览文件 @ 6c6b79d9
......@@ -374,10 +374,6 @@ export default {
});
},
methods: {
getFiles() {
debugger;
},
covertStrToArr(name) {
var fileName = "";
switch (name) {
......@@ -463,7 +459,7 @@ export default {
mediaArr.forEach((media) => {
ps.push(this.handleEditUpload(media));
});
// // 处理图片等媒体
// 处理图片等媒体
Promise.all(ps).then(
async (allResult) => {
......@@ -474,7 +470,6 @@ export default {
const params = { ...this.dialogForm };
params.literature = this.literatureModelValue.join(",");
params.status = this.dialogForm.status ? 1 : 0;
console.log("params", params);
let res = await editCulturalRelic(params);
if (res.code == 0) {
this.$message.success("修改成功！");
......@@ -490,10 +485,9 @@ export default {
}
);
} else {
console.log("this.dialogForm", this.dialogForm);
// 不确定每项是否有数据，因此不使用promise.all
let ps = [];
mediaArr.map((media) => {
let files = this.$refs[media].getFiles();
let fileList = [...files];
if (fileList.length > 0) {
......
src/views/display/components/ExhibitionUnit.vue
浏览文件 @ 6c6b79d9
......@@ -9,22 +9,19 @@
>
<div class="exhibition-units-tree-node" slot-scope="{ node, data }">
<el-row :gutter="10">
<el-col :span="7">
<!-- <el-col :span="7">
<el-input
placeholder="展览单元（如：前言、第一单元）"
v-model="node.unit"
>
</el-input>
</el-col>
<el-col :span="7">
<el-input
placeholder="展览单元标题（如：单元的主题）"
v-model="node.title"
>
</el-col> -->
<el-col :span="8">
<el-input placeholder="展览单元标题" v-model="data.title">
</el-input>
</el-col>
<el-col :span="7">
<el-input placeholder="展览单元介绍" v-model="node.intro">
<el-col :span="13">
<el-input placeholder="展览单元介绍" v-model="data.intro">
</el-input>
</el-col>
<el-col :span="3" style="display: flex; align-items: center">
......@@ -47,8 +44,13 @@
@click.native="handleAddUnitImage(node, data)"
>
<div class="add-image">
<svg-icon icon-class="image" />
<span>添加单元图片</span>
<svg-icon
:icon-class="data.showImageUploader ? 'fold' : 'image'"
/>
<span>{{
data.showImageUploader ? "收起" : "添加/显示"
}}</span>
<span>单元图片</span>
</div>
</el-button>
......@@ -57,8 +59,13 @@
@click.native="handleAddUnitVideo(node, data)"
>
<div class="add-image">
<svg-icon icon-class="video" />
<span>添加单元视频</span>
<svg-icon
:icon-class="data.showVideoUploader ? 'fold' : 'video'"
/>
<span>{{
data.showVideoUploader ? "收起" : "添加/显示"
}}</span>
<span>单元视频</span>
</div></el-button
>
</div>
......@@ -66,28 +73,34 @@
<!-- <el-col :span="12">123</el-col> -->
</el-row>
<el-row :gutter="50">
<el-col :span="12">
<div>单元图片：</div>
<ManualUploader
:files="node.imagesVo"
:fileLimit="1"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
listType="picture-card"
ref="images"
/>
</el-col>
<el-col :span="12">
<div>单元视频：</div>
<ManualUploader
:files="node.videosVo"
:fileLimit="1"
:fileSize="50"
:fileType="['mp4']"
listType="picture-card"
ref="videos"
/>
</el-col>
<el-collapse-transition>
<el-col :span="12" v-show="data.showImageUploader">
<div>单元图片：</div>
<ManualUploader
:files="data.imagesVo"
v-model="data.imagesVo"
:fileLimit="6"
:fileSize="50"
:fileType="['jpeg', 'jpg', 'png']"
listType="picture-card"
ref="images"
/>
</el-col>
</el-collapse-transition>
<el-collapse-transition>
<el-col :span="12" v-show="data.showVideoUploader">
<div>单元视频：</div>
<ManualUploader
:files="data.videosVo"
v-model="data.videosVo"
:fileLimit="6"
:fileSize="50"
:fileType="['mp4']"
listType="picture-card"
ref="videos"
/>
</el-col>
</el-collapse-transition>
</el-row>
</div>
</el-tree>
......@@ -106,41 +119,57 @@ export default {
default: () => [],
},
},
computed: {
treeData() {
let exhibitionUnits = [...this.exhibitionUnits];
exhibitionUnits.map((item) => {
if (item.imagesVo && item.imagesVo.length > 0) {
} else {
item.imagesVo = [];
}
watch: {
exhibitionUnits: {
handler: function (value) {
if (value) {
let treeData = [...this.exhibitionUnits];
treeData.map((item) => {
if (item.imagesVo && item.imagesVo.length > 0) {
} else {
item.imagesVo = [];
}
if (item.VideosVo && item.VideosVo.length > 0) {
} else {
item.VideosVo = [];
if (item.videosVo && item.videosVo.length > 0) {
} else {
item.videosVo = [];
}
});
this.treeData = treeData;
}
});
return exhibitionUnits;
},
immediate: true,
},
},
data() {
return {};
return {
treeData: [],
};
},
mounted() {},
methods: {
getData() {
console.log("this.treeData", this.treeData);
return this.treeData;
},
append(data) {
// debugger;
const newChild = {
unit: "",
title: "",
intro: "",
showImageUploader: false,
showVideoUploader: false,
images: "",
// imagesVo: [],
videos: "",
// videosVo: [],
children: [],
};
if (!data.children) {
if (!data.children ) {
this.$set(data, "children", []);
}
data.children.push(newChild);
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
......@@ -150,10 +179,14 @@ export default {
},
handleAddUnitImage(node, data) {
this.$set(data, "showImageUploader", !data.showImageUploader);
// debugger
console.log("node", node);
console.log("data", data);
},
handleAddUnitVideo(node, data) {},
handleAddUnitVideo(node, data) {
this.$set(data, "showVideoUploader", !data.showVideoUploader);
},
},
};
</script>
......@@ -170,7 +203,7 @@ export default {
height: auto;
padding: 10px;
display: flex;
align-items: center;
align-items: flex-start;
}
.plus {
font-size: 20px;
......@@ -215,4 +248,8 @@ export default {
// }
}
}
::v-deep .el-upload-list--picture-card {
display: flex;
flex-wrap: wrap;
}
</style>
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 6c6b79d9
......@@ -63,7 +63,7 @@
</el-input>
</el-form-item>
<el-form-item label="展览封面" :label-width="formLabelWidth">
<Uploader
<ManualUploader
:fileLimit="1"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
......@@ -71,10 +71,11 @@
@startLoading="startLoading"
@endLoading="endLoading"
:files="faceImage"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="展览视频" :label-width="formLabelWidth">
<Uploader
<ManualUploader
:files="videos"
:fileLimit="6"
:fileSize="50"
......@@ -83,6 +84,7 @@
@handleFileReady="handleVideosReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="videos"
/>
</el-form-item>
</el-col>
......@@ -130,7 +132,7 @@
<el-switch v-model="dialogForm.status"> </el-switch>
</el-form-item>
<el-form-item label="展览图片" :label-width="formLabelWidth">
<Uploader
<ManualUploader
:files="images"
:fileLimit="6"
:fileSize="50"
......@@ -139,10 +141,11 @@
@handleFileReady="handleImagesReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="images"
/>
</el-form-item>
<el-form-item label="展览音频" :label-width="formLabelWidth">
<Uploader
<ManualUploader
:files="audios"
:fileLimit="1"
:fileSize="50"
......@@ -151,13 +154,17 @@
@handleFileReady="handleAudiosReady"
@startLoading="startLoading"
@endLoading="endLoading"
ref="audios"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="布展单元" :label-width="formLabelWidth">
<ExhibitionUnit :exhibitionUnits="exhibitionUnits" />
<ExhibitionUnit
:exhibitionUnits="exhibitionUnits"
ref="exhibitionUnits"
/>
</el-form-item>
</el-row>
<!--
......@@ -202,15 +209,13 @@
<script>
import { getLiteratureList } from "@/api/literature";
import { addDisplay, editDisplay } from "@/api/display";
import { literatureTableTitle } from "../config";
import Uploader from "@/components/Uploader/index.vue";
import { mapGetters } from "vuex";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import ExhibitionUnit from "./ExhibitionUnit.vue";
import {upload} from '@/utils/upload'
export default {
name: "InfoEditDialog",
components: {
Uploader,
ManualUploader,
ExhibitionUnit,
},
......@@ -308,8 +313,7 @@ export default {
literatureModelValue: [], //文献绑定的数组，编辑回显时需要将后台传的值转成[id1,id2,]并赋值给它,新增时记得清空，提交时改成id 的str
exhibitionUnits: [
{
id: 1,
unit: "", //单元名称,如前言、第一单元
// unit: "", //单元名称,如前言、第一单元，暂时忽略
title: "", //单元标题，类似主题名称
intro: "", //单元介绍
images: "", //图片id集合
......@@ -317,7 +321,6 @@ export default {
crIds: "", //关联文物集合
showImageUploader: false,
showVideoUploader: false,
children: [],
},
],
};
......@@ -364,38 +367,240 @@ export default {
},
async handleSubmit() {
this.loading = true;
// 修改文献为字符串
if (this.dialogForm.exhibitionId) {
console.log("this.dialogForm", this.dialogForm);
let params = { ...this.dialogForm };
params.literature = this.literatureModelValue.join(",");
params.status = this.dialogForm.status ? 1 : 0;
let res = await editDisplay(params);
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.$emit("handleClose");
this.$emit("refresh");
this.literatureModelValue = [];
}
// debugger
// return;
var that = this
const mediaArr = ["faceImage", "images", "videos", "audios"];
if (that.dialogForm.exhibitionId) {
// 修改
let ps = []; //ps为涵盖5种媒体的promise集合
mediaArr.forEach((media) => {
ps.push(that.handleProcessMedia(media));
});
// 处理图片等媒体
Promise.all(ps).then(
async (allResult) => {
console.log("allResult", allResult);
allResult.forEach((item, index) => {
that.dialogForm[mediaArr[index]] = item;
});
const params = { ...that.dialogForm };
params.literature = that.literatureModelValue.join(",");
params.status = that.dialogForm.status ? 1 : 0;
let res = await editDisplay(params);
if (res.code == 0) {
that.$message.success("修改成功！");
that.loading = false;
that.literatureModelValue = [];
that.$emit("handleClose");
that.$emit("refresh");
that.dialogForm = {};
}
},
(reason) => {
console.log(reason);
}
);
} else {
const { deptId, regionCode } = this.userInfo;
//新增
let ps = [];
// debugger;
mediaArr.map((media) => {
// console.log("media", media);
// console.log("this.$refs[media]", this.$refs[media]);
// return
let files = that.$refs[media].getFiles();
let fileList = [...files];
if (fileList.length > 0) {
let formData = new FormData();
fileList.forEach((file) => {
formData.append("files", file.raw);
});
ps.push(upload(formData));
} else {
ps.push(null);
}
});
const params = { ...this.dialogForm, deptId, regionCode };
params.literature = this.literatureModelValue.join(",");
params.status = this.dialogForm.status ? 1 : 0;
let res = await addDisplay(params);
if (res.code == 0) {
this.$message.success("提交成功！");
this.loading = false;
this.literatureModelValue = [];
this.$emit("handleClose");
this.$emit("refresh");
}
Promise.all(ps).then(
async (allResult) => {
allResult.forEach((item, index) => {
if (item) {
let fileIds = [];
let files = item.data;
files.forEach((file) => {
fileIds.push(file.fileId);
});
that.dialogForm[mediaArr[index]] = fileIds.join(",");
} else {
that.dialogForm[mediaArr[index]] = "";
}
});
// let unitData = that.$refs["exhibitionUnits"].getData();
// debugger
// 遍历后上传图片和视频，并修改images和videos
// 单元信息处理
// function getUnitMediaStr(arr) {
// arr.forEach((unit) => {
// let unitPs = [];
// if (unit.imagesVo.length > 0) {
// unitPs.push(that.handleProcessUnitMedia(unit.imagesVo));
// } else {
// unitPs.push(null);
// }
// if (unit.videosVo.length > 0) {
// unitPs.push(that.handleProcessUnitMedia(unit.videosVo));
// } else {
// unitPs.push(null);
// }
// Promise.all(unitPs).then((res) => {
// // 图片的res
// console.log(`${arr}图片res`, res[0]);
// console.log(`${arr}图片视频`, res[1]);
// });
// if (unit.children) {
// getUnitMediaStr(unit.children);
// }
// });
// }
// getUnitMediaStr(unitData);
// unitData.forEach((unit) => {
// if (unit.imagesVo.length > 0) {
// unitPs.push(this.handleProcessUnitMedia(unit.imagesVo));
// } else {
// unitPs.push(null);
// }
// if (unit.videosVo.length > 0) {
// unitPs.push(this.handleProcessUnitMedia(unit.videosVo));
// } else {
// unitPs.push(null);
// }
// if (unit.children) {
// unit.children.forEach((item) => {
// let unitPs = [];
// if (item.imagesVo.length > 0) {
// unitPs.push(this.handleProcessUnitMedia(item.imagesVo));
// } else {
// unitPs.push(null);
// }
// if (item.videosVo.length > 0) {
// unitPs.push(this.handleProcessUnitMedia(unit.videosVo));
// } else {
// unitPs.push(null);
// }
// });
// }
// });
// const { deptId, regionCode } = this.userInfo;
// const params = { ...this.dialogForm, deptId, regionCode };
// params.literature = this.literatureModelValue.join(",");
// params.status = this.dialogForm.status ? 1 : 0;
// let res = await addDisplay(params);
// if (res.code == 0) {
// this.$message.success("提交成功！");
// this.loading = false;
// this.literatureModelValue = [];
// this.$emit("handleClose");
// this.$emit("refresh");
// this.dialogForm = {};
// }
},
(reason) => {
console.log(reason);
}
);
}
},
// 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
handleProcessUnitMedia(mediaVo) {
return new Promise((resolve, reject) => {
if (mediaVo.length > 0) {
let fileIds = [];
let formData = new FormData();
let fileIdStr = "";
mediaVo.map((file) => {
switch (file.status) {
case "ready":
formData.append("files", file.raw);
break;
case "success":
fileIds.push(file.fileId);
break;
}
});
if (formData.get("files")) {
upload(formData)
.then((upRes) => {
if (upRes.code == 0) {
// 拿到已存在的和上传过后的结果进行拼接，并赋值给images，不用管imagesVo，后台自行处理
const { data } = upRes;
data.map((item) => {
fileIds.push(item.fileId);
});
fileIdStr = fileIds.join(",");
resolve(fileIdStr);
}
})
.catch((err) => {
reject(err);
});
} else {
fileIdStr = fileIds.join(",");
resolve(fileIdStr);
}
}
});
},
// 处理编辑时图片、视频、音频、讲解词媒体资源的上传问题
handleProcessMedia(media) {
return new Promise(async (resolve, reject) => {
//files中只存在(success)和新添加的(ready)，不存在的已经在组件中被去除了
let files = [...this.$refs[media].getFiles()];
if (files.length > 0) {
let fileIds = [];
let fileIdStr = "";
let formData = new FormData();
files.forEach((file) => {
switch (file.status) {
case "ready":
formData.append("files", file.raw);
break;
case "success":
fileIds.push(file.fileId);
break;
}
});
if (formData.get("files")) {
upload(formData)
.then((upRes) => {
if (upRes.code == 0) {
// 拿到已存在的和上传过后的结果进行拼接，并赋值给images，不用管imagesVo，后台自行处理
const { data } = upRes;
data.map((item) => {
fileIds.push(item.fileId);
});
fileIdStr = fileIds.join(",");
resolve(fileIdStr);
}
})
.catch((err) => {
reject(err);
});
} else {
fileIdStr = fileIds.join(",");
resolve(fileIdStr);
}
} else {
resolve("");
}
});
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
......@@ -486,5 +691,4 @@ export default {
}
//展览单元
</style>
\ No newline at end of file
src/views/museum/components/InfoEditDialog.vue 0 → 100644
浏览文件 @ 6c6b79d9
<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="{ expandTrigger: 'hover' }"
@change="handleChangeOrgTree"
placeholder="请选择所属部门"
>
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</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-input
v-model="dialogForm.longitude"
autocomplete="off"
placeholder="请输入经度"
></el-input>
</el-form-item>
<el-form-item label="纬度" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.latitude"
autocomplete="off"
placeholder="请输入纬度"
></el-input>
</el-form-item>
<el-form-item label="博物馆封面" :label-width="formLabelWidth">
<Uploader
v-model="dialogForm.faceImage"
:fileLimit="1"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="faceImage"
/>
</el-form-item>
<el-form-item label="简介" :label-width="formLabelWidth">
<el-input
type="textarea"
placeholder="请输入博物馆简介"
v-model="dialogForm.intro"
maxlength="300"
show-word-limit
>
</el-input>
</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 { addMuseum, editMuseum } from "@/api/museum";
import Uploader from "@/components/Uploader/index.vue";
import { mapGetters, mapActions } from "vuex";
import { upload } from "@/utils/upload";
export default {
name: "InfoEditDialog",
components: {
Uploader,
},
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.crId) {
return "修改博物馆信息";
} else {
return "添加博物馆";
}
},
faceImage() {
if (this.dialogForm.faceImageUrl) {
return [
{
name: "",
url: this.dialogForm.faceImageUrl,
fileId: this.dialogForm.faceImage,
},
];
} else {
return [];
}
},
},
watch: {
form: {
handler(value) {
this.dialogForm = { ...value };
},
immediate: true,
deep: true,
},
},
data() {
return {
dialogForm: {
...this.form,
},
formLabelWidth: "100px",
// orgTreeData: [],
};
},
methods: {
handlePreview({ type, file }) {
console.log(type, file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.dialogForm = {};
},
async handleSubmit() {
if (this.dialogForm.id) {
} else {
console.log(this.dialogForm);
const { faceImage } = this.dialogForm;
this.dialogForm.faceImage = faceImage.url;
let res = await addMuseum(this.dialogForm);
if (res.code == 0) {
this.dialogForm = {};
this.$emit("refresh");
}
}
},
handleChangeOrgTree() {},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
this.$emit("handleClose");
})
.catch((_) => {});
},
refresh() {
this.$emit("refresh");
},
},
};
</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/museum/config.js 0 → 100644
浏览文件 @ 6c6b79d9
export const title = [{
prop: "name",
label: "名称",
columnAlign: 'center',
},
{
prop: "pidName",
label: "所属部门",
columnAlign: 'center',
},
{
prop: "status",
label: "状态",
columnAlign: 'center',
isStatus: true
},
{
prop: "longitude",
label: "经度",
columnAlign: 'center',
},
{
prop: "latitude",
label: "纬度",
columnAlign: 'center',
},
{
prop: "intro",
label: "简介",
columnAlign: 'center',
},
]
export const operates = {
operate: true,
label: "操作",
width: "260px",
minwidth: "220px",
titleAlign: "center",
columnAlign: "center",
}
export const operations = [
// {
// type: 'view',
// title: '预览'
// },
{
type: 'edit',
title: '编辑'
},
{
type: 'delete',
title: '删除'
},
]
src/views/museum/index-old.vue 0 → 100644
浏览文件 @ 6c6b79d9
<template>
<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>
<el-row :gutter="32">
<el-col :span="4" v-for="(item, index) in list.records" :key="index">
<el-card
shadow="hover"
:body-style="{ padding: '0px' }"
style="margin-bottom: 10px"
>
<div slot="header" class="clearfix">
<span>{{ item.name }}</span>
</div>
<!-- <div class="deptName">贵州省博物馆</div> -->
<div class="faceImage">
<div class="img">
<el-image :src="item.faceImage" style="width:100%;height: 100%;" fit="cover">
<div slot="error" class="image-slot">
<img src="@/assets/404_images/no-pic1.png" alt="">
</div>
</el-image>
<div class="modal">
<i class="el-icon-view"></i>
<div class="view-text">查看</div>
</div>
</div>
</div>
<div class="theme">{{ item.intro }}</div>
<div class="buttons">
<el-row>
<el-col :span="12">
<el-button icon="el-icon-edit" style="width: 100%"> </el-button>
</el-col>
<el-col :span="12">
<el-button icon="el-icon-delete" style="width: 100%">
</el-button>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
<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 {
getMuseumList,
// getRCDetailById,
// deleteCultralRelic,
// editCulturalRelic,
} from "@/api/museum";
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,
isAdd: true,
form: {
name: "", //名称
intro: "",
latitude: "",//纬度
longitude: "",//经度
faceImage: "",
pid:'',//所属部门id
regionCode:'',//所属地code
},
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 getMuseumList(params);
if (res.code == 0) {
this.list = res.data;
}
},
reset() {
this.loadData();
},
// 加载表格数据
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getMuseumList(params);
if (res.code == 0) {
this.list.records = res.data; //TODO:待后端增加分页
}
},
async handleOperation(value, row) {
console.log("handleOperation", value, row);
switch (value.type) {
case "add":
this.drawerVisible = true;
break;
case "view":
break;
case "edit":
let detailRes = await getRCDetailById({ crId: row.crId });
if (detailRes.code == 0) {
this.form = detailRes.data;
this.drawerVisible = true;
}
break;
case "delete":
let deleteRes = await deleteCultralRelic([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;
},
// 改变页容量
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论